/* ============================================================
   FUNDMASTER WEALTH — Homepage
   Peacock-iridescent brand system
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* Brand core (from logo + branding guide) */
  --navy:       #253c83;   /* logo wordmark blue            */
  --indigo:     #1b3a5c;   /* deep section navy             */
  --teal:       #7bcbbf;   /* logo mark teal                */

  /* Peacock palette */
  --ink:        #06101f;   /* near-black peacock blue       */
  --ink-2:      #0a1a33;
  --peacock:    #0e2a6b;
  --pavo-blue:  #1f6bd6;
  --pavo-teal:  #16b8a6;
  --pavo-green: #0f9d6b;
  --emerald:    #0a7d5a;
  --gold:       #e9c46a;   /* feather-eye gold accent       */
  --plum:       #3a1b5c;

  /* Neutrals */
  --paper:      #f6f9fb;
  --paper-2:    #eef4f8;
  --line:       rgba(27,58,92,.12);
  --slate:      #46586b;
  --ink-text:   #0d1f33;

  /* The signature iridescent sweep */
  --iris: linear-gradient(110deg,
            #1f6bd6 0%, #16b8a6 32%, #0f9d6b 58%, #2bd1c4 78%, #e9c46a 100%);
  --iris-soft: linear-gradient(120deg,
            rgba(31,107,214,.9), rgba(22,184,166,.9), rgba(15,157,107,.9));

  --shadow-lg: 0 30px 70px -30px rgba(8,24,52,.45);
  --shadow-md: 0 18px 40px -22px rgba(8,24,52,.4);

  --font-display: "Fraunces", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;

  --maxw: 1280px;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-sans);
  color:var(--ink-text);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.preloading{ overflow:hidden; height:100vh; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--pavo-teal); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.7em; color:var(--pavo-teal);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.6; }
.section-title{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.08; letter-spacing:-.02em;
  color:var(--ink-text);
}
.section-intro{ max-width:60ch; color:var(--slate); font-size:1.075rem; margin-top:1.1rem; }
.iris-text{
  background:var(--iris); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --pad:.95em 1.6em;
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  padding:var(--pad); border-radius:999px; font-weight:600; font-size:.96rem;
  letter-spacing:.01em; transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; transition:transform .4s var(--ease); }
.btn:hover{ transform:translateY(-3px); }
.btn:hover svg{ transform:translateX(4px); }

.btn--primary{ color:#04121f; background:var(--iris);
  box-shadow:0 14px 34px -12px rgba(22,184,166,.65); }
.btn--primary:hover{ box-shadow:0 20px 44px -12px rgba(22,184,166,.8); }

.btn--ghost{ color:#eaf6ff; border:1px solid rgba(255,255,255,.32); backdrop-filter:blur(4px); }
.btn--ghost:hover{ border-color:var(--teal); background:rgba(123,203,191,.1); }

.btn--ink{ color:#fff; background:var(--navy); box-shadow:var(--shadow-md); }
.btn--ink:hover{ background:var(--peacock); }

.btn--outline{ color:var(--navy); border:1.5px solid var(--line); }
.btn--outline:hover{ border-color:var(--pavo-teal); color:var(--pavo-green); }

@keyframes irisShift{ to{ background-position:180% 0; } }

/* ============================================================
   CINEMATIC LOADER  (peachweb-style staged reveal)
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:3000; display:grid; place-items:center;
  background:radial-gradient(130% 130% at 50% 35%, #0e2a6b 0%, #081734 48%, #040a18 100%);
  transition:opacity 1s var(--ease), visibility 0s linear 1.1s;
}
.loader.hide{ opacity:0; visibility:hidden; }
.loader__inner{ display:grid; justify-items:center; gap:1.5rem; width:min(420px,80vw); text-align:center; }
.loader__logo{ position:relative; overflow:hidden; opacity:0; transform:translateY(14px) scale(.96);
  animation:loaderLogoIn 1s var(--ease) forwards .15s; }
.loader__logo img{ display:block; width:clamp(150px,38vw,210px); height:auto;
  filter:drop-shadow(0 10px 30px rgba(22,184,166,.28)); }
/* light sheen sweeping across the logo while loading */
.loader__logo::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(190,238,222,.55) 50%, transparent 62%);
  transform:translateX(-130%); animation:loaderSheen 2.2s ease-in-out 1s infinite; }
@keyframes loaderLogoIn{ to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes loaderSheen{ 0%{ transform:translateX(-130%); } 55%,100%{ transform:translateX(130%); } }
.loader__status{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(123,203,191,.85); min-height:1em; transition:opacity .3s; }
.loader__bar{ width:100%; height:2px; background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:var(--iris); background-size:200% auto; animation:irisShift 3s linear infinite; transition:transform .2s linear; }
.loader__pct{ font-family:var(--font-display); font-size:.9rem; color:rgba(234,246,255,.6); }
.loader__pct::after{ content:"%"; opacity:.5; margin-left:1px; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes bloom{ to{ opacity:1; transform:scale(1); } }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000; padding-block:18px;
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(246,249,251,.82); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line); padding-block:12px; box-shadow:0 8px 30px -20px rgba(8,24,52,.4);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand{ display:inline-flex; align-items:center; z-index:2; line-height:0; }
/* Scales with the viewport so the mark stays legible on phones without
   crowding the nav row on desktop. */
.brand__logo{ display:block; height:clamp(42px, 4.4vw, 56px); width:auto;
  transition:height .4s ease; }
/* the bar tightens on scroll — bring the mark down with it */
.scrolled .brand__logo{ height:clamp(38px, 3.8vw, 46px); }
.brand--footer .brand__logo{ height:44px; }
.nav__links{ display:flex; gap:2rem; list-style:none; font-size:.94rem; font-weight:500; }
.nav__links a{ color:rgba(234,246,255,.86); position:relative; padding-block:4px; transition:color .3s; }
.scrolled .nav__links a{ color:var(--slate); }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
  background:var(--iris); transition:width .35s var(--ease); border-radius:2px; }
.nav__links a:hover{ color:var(--pavo-teal); }
.scrolled .nav__links a:hover{ color:var(--pavo-green); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ display:flex; align-items:center; gap:1rem; }
.nav__phone{ font-weight:600; font-size:.92rem; color:rgba(234,246,255,.9); }
.scrolled .nav__phone{ color:var(--navy); }
.nav__toggle{
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:5px;
  width:44px; height:44px; border-radius:12px; border:1px solid rgba(234,246,255,.22);
  background:rgba(8,14,30,.35); cursor:pointer; z-index:1002; flex:none;
  transition:border-color .3s, background .3s;
}
.nav__toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:#eaf6ff;
  transition:transform .35s var(--ease), opacity .25s ease; }
.scrolled .nav__toggle{ border-color:var(--line); background:rgba(255,255,255,.7); }
.scrolled .nav__toggle span{ background:var(--navy); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav__scrim{
  display:none; position:fixed; inset:0; z-index:999; background:rgba(4,10,24,.55);
  backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .35s ease;
}
body.nav-open .nav__scrim{ display:block; opacity:1; pointer-events:auto; }
/* the drawer is desktop-invisible; keeping it out of the flow stops it inheriting
   the flex row's sizing before the mobile rules take over */
.nav__drawer-foot{ display:none; }
.nav__item{ position:relative; }
.nav__item > a{ display:inline-flex; align-items:center; gap:.32em; }
.nav__chev{ width:.85em; height:.85em; transition:transform .3s var(--ease); opacity:.7; }
.nav__item--has-menu:hover .nav__chev{ transform:rotate(180deg); }

/* Services mega dropdown (desktop hover) */
.nav__mega{ position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,8px);
  width:340px; padding:.5rem; display:grid; gap:2px; opacity:0; visibility:hidden; pointer-events:none;
  background:rgba(10,18,38,.92); backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(150,190,225,.16); border-radius:18px;
  box-shadow:0 30px 60px -24px rgba(4,12,28,.7); transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s; z-index:20; }
.nav__mega::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; }
.nav__item--has-menu:hover .nav__mega,
.nav__item--has-menu:focus-within .nav__mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition-delay:0s; }
.nav__mega a{ display:grid; gap:.15rem; padding:.7rem .85rem; border-radius:12px; color:#eaf6ff; transition:background .25s ease; }
.nav__mega a b{ font-weight:600; font-size:.96rem; }
.nav__mega a span{ font-size:.8rem; color:rgba(190,214,240,.7); line-height:1.35; }
.nav__mega a:hover{ background:rgba(123,203,191,.12); }
.nav__mega a:hover b{ color:var(--teal); }

/* Tools — set apart from the main menu */
.nav__sep{ width:1px; height:24px; background:rgba(234,246,255,.22); }
.scrolled .nav__sep{ background:var(--line); }
.nav__tools-wrap{ position:relative; }
.nav__tools{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:.9rem;
  padding:.5em 1.05em; border-radius:999px; color:#eaf6ff;
  border:1px solid rgba(234,246,255,.3); transition:color .3s, border-color .3s, background .3s; }
.nav__tools svg{ width:1.05em; height:1.05em; flex-shrink:0; }
.nav__tools .nav__chev{ width:.85em; height:.85em; opacity:.7; transition:transform .3s var(--ease); }
.nav__tools-wrap:hover .nav__tools .nav__chev,
.nav__tools-wrap:focus-within .nav__tools .nav__chev,
.nav__tools-wrap.is-open .nav__tools .nav__chev{ transform:rotate(180deg); }
.nav__tools:hover{ color:var(--teal); border-color:var(--teal); background:rgba(123,203,191,.1); }
.scrolled .nav__tools{ color:var(--navy); border-color:var(--line); }
.scrolled .nav__tools:hover{ color:var(--pavo-green); border-color:var(--pavo-teal); background:rgba(123,203,191,.08); }
.nav__mega--tools{
  left:auto; right:0; transform:translate(0,8px); width:320px;
}
.nav__tools-wrap:hover .nav__mega--tools,
.nav__tools-wrap:focus-within .nav__mega--tools,
.nav__tools-wrap.is-open .nav__mega--tools{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(0,0); transition-delay:0s;
}

/* ============================================================
   STICKY SIDE CTA  (always-reachable "Get Started")
   ============================================================ */
.side-cta{ position:fixed; right:0; top:50%; z-index:900;
  transform:translateY(-50%) translateX(0);
  display:inline-flex; align-items:center; gap:.55em;
  writing-mode:vertical-rl; padding:1.1em .7em; font-weight:600; font-size:.86rem; letter-spacing:.02em;
  color:#04121f; background:var(--iris); background-size:160% auto;
  border-radius:14px 0 0 14px; box-shadow:0 16px 36px -12px rgba(22,184,166,.6);
  opacity:0; pointer-events:none; visibility:hidden;
  transition:transform .45s var(--ease), box-shadow .4s var(--ease), opacity .5s var(--ease), visibility 0s linear .5s; }
body.loaded .side-cta{ opacity:1; pointer-events:auto; visibility:visible; transition-delay:0s, 0s, .2s, 0s; }
.side-cta:hover{ transform:translateY(-50%) translateX(-4px); box-shadow:0 22px 46px -12px rgba(22,184,166,.78); }
.side-cta__icon{ width:1.05em; height:1.05em; transform:rotate(90deg); transition:transform .4s var(--ease); }
.side-cta:hover .side-cta__icon{ transform:rotate(90deg) translateX(3px); }
.side-cta__txt{ line-height:1; }
@media (max-width:560px){
  .side-cta{ writing-mode:horizontal-tb; right:14px; top:auto; bottom:18px; transform:none;
    border-radius:999px; padding:.85em 1.3em; }
  body.loaded .side-cta{ transform:none; }
  .side-cta:hover{ transform:translateY(-3px); }
  .side-cta__icon{ transform:none; }
  .side-cta:hover .side-cta__icon{ transform:translateX(3px); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:transparent;          /* shares the page-wide connective backdrop — no seam */
  overflow:hidden; isolation:isolate;
}
/* WebGL canvas — fixed full-screen so the feather flows across sections */
.hero__canvas{ position:fixed; inset:0; width:100%; height:100%; display:block;
  z-index:0; pointer-events:none; }
/* atmospheric gradient depth */
.hero__veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,10,24,.86) 0%, rgba(4,10,24,.55) 32%, rgba(4,10,24,.12) 58%, rgba(4,10,24,0) 78%),
    radial-gradient(60% 80% at 22% 50%, rgba(4,10,24,.55), transparent 70%); }

/* ============================================================
   CHARACTER FIGURE
   The character video sits docked to the right of the banner from
   the first paint — no intro zoom, no full-bleed phase.
   ============================================================ */
.hero__figure{
  position:absolute; z-index:2; bottom:0;
  right:max(0px, calc(50% - 800px));
  width:min(760px, 56vw); height:94vh;
  overflow:hidden;
  pointer-events:none;
  /* --fig-scroll is driven by motion.js as the hero scrolls away; --fig-opacity is the
     resting level, which mobile dims. Composing them keeps JS from clobbering the CSS. */
  --fig-opacity:1; --fig-scroll:1;
  opacity:calc(var(--fig-opacity) * var(--fig-scroll));
}
/* Held back until the JS has seeked past the clip's baked-in push-in, so the
   zoomed opening frame never paints. .is-ready is set on `seeked` (with a timeout
   fallback) — see the inline script beside the <video>. */
.hero__video{
  position:relative; z-index:2;
  width:100%; height:100%;
  object-fit:cover; object-position:50% 22%;
  opacity:0; transition:opacity .5s ease;
}
.hero__video.is-ready{ opacity:1; }
/* Landscape viewports with limited height (typical laptops) scale the tall figure
   aggressively and end up nibbling the character's head off the top. Anchor the
   video to the top on short viewports so the head is always visible. */
@media (min-width:981px) and (max-height:900px){
  .hero__figure{ height:100vh; }
  .hero__video{ object-position:50% 0%; }
}
@media (min-width:981px) and (max-height:760px){
  .hero__video{ object-position:50% -8%; }
}
/* radial brand glow behind the character (only in the docked state) */
.hero__figure-glow{
  position:absolute; z-index:1; left:50%; top:50%;
  width:120%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(43,209,196,.42), rgba(31,107,214,.18) 42%, transparent 68%);
  filter:blur(28px); transition:opacity 1s ease;
}
/* soft contact shadow / pedestal under the feet */
.hero__figure-shadow{
  position:absolute; z-index:1; left:50%; bottom:8%;
  width:56%; height:32px; transform:translateX(-50%) scaleX(.6);
  border-radius:50%; opacity:0;
  background:radial-gradient(ellipse, rgba(4,10,24,.7), transparent 72%);
  filter:blur(9px); transition:opacity 1s ease .4s;
}

/* sound toggle — autoplay only survives while muted, so the voice needs a gesture */
.hero__sound{
  position:absolute; z-index:4; right:clamp(18px, 4vw, 42px); bottom:clamp(18px, 5vh, 46px);
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.62rem 1.05rem .62rem .82rem; border-radius:999px; cursor:pointer;
  font:inherit; font-size:.82rem; letter-spacing:.01em; color:#eaf6ff;
  background:rgba(8,14,30,.55); backdrop-filter:blur(10px);
  border:1px solid rgba(123,203,191,.3);
  transition:opacity .7s ease, transform .45s var(--ease), background .45s, border-color .45s;
}
.hero__sound:hover{ transform:translateY(-2px); background:rgba(8,14,30,.72); border-color:var(--teal); }
.hero__sound:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.hero__sound-icon{ width:19px; height:19px; flex:none; fill:none;
  stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hero__sound-body{ fill:currentColor; stroke:none; }
.hero__sound-waves{ opacity:0; transition:opacity .3s ease; }
.hero__sound-cross{ opacity:1; transition:opacity .3s ease; }
.hero__sound.is-on{ border-color:var(--teal); color:var(--teal); }
.hero__sound.is-on .hero__sound-waves{ opacity:1; }
.hero__sound.is-on .hero__sound-cross{ opacity:0; }
@media (max-width:560px){ .hero__sound-text{ display:none; } .hero__sound{ padding:.62rem; } }

/* glow + shadow bloom in once the loader hands over */
body.loaded .hero__figure-glow{ opacity:.7; }
body.loaded .hero__figure-shadow{ opacity:1; }
.brand, .nav__menu, .nav__cta, .side-cta{ transition:opacity .7s ease; }

.hero__inner{ position:relative; z-index:3; padding-block:140px 90px; max-width:640px; }
@media (min-width:980px){ .hero__inner{ max-width:560px; } }
.hero__eyebrow{ opacity:0; transform:translateY(16px); }
.hero h1{
  font-family:var(--font-display); font-weight:400; color:#f3f9ff;
  font-size:clamp(2.7rem,7vw,5.6rem); line-height:1.02; letter-spacing:-.025em; margin-top:1.1rem;
  text-shadow:0 2px 40px rgba(4,10,24,.5);
}
/* the overflow mask drives the rise-in; pad it so italic descenders ("Growing.")
   aren't shaved off, then pull the padding back out of the layout */
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.hero h1 .line > span{ display:inline-block; transform:translateY(130%); }
.hero h1 .grow{ font-style:italic; font-weight:500; }
.hero h1 .grow span{ background:var(--iris); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:irisShift 6s linear infinite; }
@keyframes riseIn{ to{ transform:translateY(0);} }

.hero__sub{ margin-top:1.6rem; max-width:46ch; font-size:1.18rem; color:rgba(226,240,252,.85);
  opacity:0; transform:translateY(16px); }
.hero__cta{ margin-top:2.3rem; display:flex; gap:1rem; flex-wrap:wrap;
  opacity:0; transform:translateY(16px); }
.hero__stats{ margin-top:3.4rem; display:flex; gap:2.6rem; flex-wrap:wrap; opacity:0; }
.hero__stats b{ display:block; font-family:var(--font-display); font-size:2rem; color:#fff; font-weight:500; }
.hero__stats span{ font-size:.82rem; letter-spacing:.04em; color:rgba(226,240,252,.6); text-transform:uppercase; }

/* hero text reveals — gated until the loader finishes */
body.loaded .hero__eyebrow{ animation:fadeUp .9s var(--ease) forwards .1s; }
body.loaded .reveal-up .line > span{ animation:riseIn 1.05s var(--ease) forwards; }
body.loaded .hero h1 .l1 > span{ animation-delay:.2s; }
body.loaded .hero h1 .l2 > span{ animation-delay:.34s; }
body.loaded .hero__sub{ animation:fadeUp .9s var(--ease) forwards .5s; }
body.loaded .hero__cta{ animation:fadeUp .9s var(--ease) forwards .66s; }
body.loaded .hero__stats{ animation:fadeUp 1s var(--ease) forwards .82s; }
body.loaded .hero__scroll{ animation:fadeUp 1s ease forwards 1.1s; }

.hero__scroll{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; color:rgba(234,246,255,.6);
  font-size:.7rem; letter-spacing:.25em; text-transform:uppercase; opacity:0; }
.hero__scroll i{ width:1px; height:42px; background:linear-gradient(var(--teal),transparent);
  position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:#fff; animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine{ to{ top:120%; } }

/* ============================================================
   GENERIC SECTION
   ============================================================ */
section{ position:relative; }
.section-pad{ padding-block:clamp(70px,9vw,130px); }
.section-head{ max-width:760px; margin-bottom:3.4rem; }

/* scroll reveal */
[data-reveal]{ opacity:0; transform:translateY(46px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }

/* word-by-word masked reveal — scroll-triggered */
[data-word-reveal]{ display:block; }
[data-word-reveal] .wr{ display:inline-block; overflow:hidden; vertical-align:bottom; line-height:1.1em; }
[data-word-reveal] .wr > span{ display:inline-block; transform:translateY(110%);
  transition:transform .85s var(--ease); will-change:transform; }
[data-word-reveal].in .wr > span{ transform:translateY(0); }

/* ============================================================
   PILLARS — original cards + human photo on the side
   ============================================================ */
.pillars{ background:var(--paper); }
.pillars__layout{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.2rem,3vw,2rem);
  align-items:stretch;
}
.pillars__human{
  margin:0; border-radius:22px; overflow:hidden; position:relative;
  border:1px solid var(--line); min-height:100%;
  box-shadow:0 24px 50px -32px rgba(8,24,52,.28);
}
.pillars__human img{
  width:100%; height:100%; object-fit:cover; object-position:22% center;
  display:block; min-height:420px;
}
.pillar-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; perspective:1200px; }
@property --lift{ syntax:'<length>'; inherits:false; initial-value:0px; }
.pillar{
  --mx:50%; --my:50%; --rx:0deg; --ry:0deg; --lift:0px;
  position:relative; padding:1.8rem 1.5rem 1.6rem; border-radius:22px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  transform-style:preserve-3d;
  transform:translate3d(0,var(--lift),0) rotateX(var(--rx)) rotateY(var(--ry));
  transition:--lift .35s var(--ease), box-shadow .5s var(--ease), border-color .4s ease;
  isolation:isolate; will-change:transform, translate;
}
.pillar:hover{ --lift:-10px; box-shadow:var(--shadow-lg); }
.pillar::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--iris); transition:opacity .5s ease; }
.pillar::after{ content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background:var(--iris); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.pillar__glow{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  border-radius:inherit; transition:opacity .4s ease;
  background:radial-gradient(280px circle at var(--mx) var(--my),
              rgba(43,209,196,.22), rgba(43,209,196,.06) 36%, transparent 62%); }
.pillar:hover::after{ transform:scaleX(1); }
.pillar:hover .pillar__glow{ opacity:1; }
.pillar > *:not(.pillar__glow){ position:relative; z-index:1; }
.pillar__icon{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--paper-2); margin-bottom:1.1rem; transition:background .4s ease, transform .5s var(--ease); }
.pillar__icon svg{ width:24px; height:24px; stroke:var(--navy); transition:stroke .4s ease; }
.pillar:hover .pillar__icon{ background:var(--navy); transform:rotate(-6deg) scale(1.05); }
.pillar:hover .pillar__icon svg{ stroke:var(--teal); }
.pillar h3{ font-family:var(--font-display); font-size:1.3rem; font-weight:500; margin-bottom:.2rem; }
.pillar .kicker{ font-size:.78rem; color:var(--pavo-green); font-weight:600; margin-bottom:.7rem; display:block; }
.pillar p{ font-size:.9rem; color:var(--slate); }
.pillar .more{ margin-top:1.1rem; font-weight:600; font-size:.86rem; color:var(--navy); display:inline-flex; gap:.4em; align-items:center; }
.pillar .more svg{ width:1em; transition:transform .4s var(--ease); }
.pillar:hover .more svg{ transform:translateX(4px); }
.pillars__cta{ text-align:center; margin-top:3rem; color:var(--slate); }
.pillars__cta a{ font-weight:600; color:var(--navy); border-bottom:2px solid var(--teal); }

@media (max-width:980px){
  .pillars__layout{ grid-template-columns:1fr; }
  .pillars__human{ order:-1; max-height:320px; }
  .pillars__human img{ min-height:280px; max-height:320px; }
}
@media (max-width:560px){
  .pillar-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   WHO WE HELP
   ============================================================ */
.who{ background:linear-gradient(180deg,var(--paper),var(--paper-2)); }
.who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.who-card{
  position:relative; padding:2rem 1.7rem; border-radius:20px; background:#fff;
  border:1px solid var(--line); overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.who-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.who-card .num{ font-family:var(--font-display); font-size:.95rem; color:var(--pavo-teal); font-weight:600; }
.who-card h3{ font-family:var(--font-display); font-size:1.45rem; font-weight:500; margin:.7rem 0 .2rem; }
.who-card .tag{ font-size:.92rem; color:var(--pavo-green); font-weight:600; }
.who-card p{ font-size:.95rem; color:var(--slate); margin-top:.8rem; }
.who-card .svcs{ margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.who-card .svcs span{ font-size:.74rem; padding:.35em .8em; border-radius:999px; background:var(--paper-2);
  color:var(--indigo); font-weight:500; }

/* ============================================================
   SMART GUIDE TOOL
   ============================================================ */
.guide{ background:var(--ink); color:#eaf6ff; position:relative; overflow:hidden; }
.guide::before{ content:""; position:absolute; inset:0; background:url("assets/peacock.png") center/cover;
  opacity:.14; mix-blend-mode:screen; }
.guide__glow{ position:absolute; width:50vw; height:50vw; left:-10vw; bottom:-20vw;
  background:radial-gradient(circle,rgba(15,157,107,.35),transparent 60%); filter:blur(10px); }
.guide .wrap{ position:relative; z-index:2; }
.guide .eyebrow{ color:var(--teal); }
.guide .section-title{ color:#fff; }
.guide__build{ font-family:var(--font-display); font-weight:400; line-height:1.3;
  font-size:clamp(1.8rem,4vw,3rem); margin:.4rem 0 0; }
.guide__build .slot{ display:inline-block; }
.guide__sub{ color:rgba(226,240,252,.72); margin-top:1.1rem; max-width:54ch; }
.guide__panel{ margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:1.2rem; align-items:flex-end; }
.field{ flex:1; min-width:240px; }
.field label{ display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--teal); margin-bottom:.6rem; }
.select{ position:relative; }
.select select{
  appearance:none; width:100%; padding:1.05em 3em 1.05em 1.3em; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(123,203,191,.3); color:#fff;
  font-size:1rem; transition:border-color .3s, background .3s;
}
.select select:focus{ outline:none; border-color:var(--teal); background:rgba(255,255,255,.1); }
.select select option{ color:#0d1f33; }
.select::after{ content:""; position:absolute; right:1.2em; top:50%; width:9px; height:9px;
  border-right:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.guide__result{ margin-top:1.8rem; min-height:1.4em; font-size:1.05rem; color:rgba(226,240,252,.9);
  opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s; }
.guide__result.show{ opacity:1; transform:none; }
.guide__result b{ color:var(--teal); }
.guide__actions{ margin-top:1.8rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.guide__note{ font-size:.9rem; color:rgba(226,240,252,.6); }
/* the guide's hand-off into the booking dialog */
.guide__next{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:1.2rem; }
.guide__next-note{ font-size:.85rem; color:rgba(226,240,252,.6); }
@media (max-width:560px){
  .guide__next{ gap:.7rem; }
  .guide__next-btn{ width:100%; justify-content:center; }
}
.guide__layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.guide__col--text{ min-width:0; }
.guide__media{ position:relative; border-radius:22px; overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6); border:1px solid rgba(123,203,191,.22); }
.guide__video{ display:block; width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; }

/* ============================================================
   WHY FUNDMASTER
   ============================================================ */
.why{ background:var(--paper); }
.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; margin-top:1rem; }
.why-card{ display:flex; gap:1.3rem; padding:2rem 1.9rem; border-radius:20px; background:#fff;
  border:1px solid var(--line); transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.why-card .no{ font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:#fff;
  width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--iris); background-size:160% 160%; }
.why-card h3{ font-family:var(--font-display); font-size:1.35rem; font-weight:500; margin-bottom:.45rem; }
.why-card p{ color:var(--slate); font-size:.97rem; }
.why__cta{ margin-top:2.6rem; }

/* ============================================================
   LITERACY HUB
   ============================================================ */
.learn{ background:var(--paper-2); }
.learn-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.article{ position:relative; border-radius:20px; overflow:hidden; background:#fff;
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.article:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.article__top{ height:194px; position:relative; overflow:hidden; background:var(--paper-2); }
.article__top img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease); }
.article:hover .article__top img{ transform:scale(1.06); }
.article__body{ padding:1.5rem 1.5rem 1.7rem; flex:1; display:flex; flex-direction:column; }
.article .cat{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600; color:var(--pavo-green); }
.article h3{ font-family:var(--font-display); font-size:1.22rem; font-weight:500; margin:.6rem 0 .6rem; line-height:1.2; }
.article p{ font-size:.92rem; color:var(--slate); flex:1; }
.article .more{ margin-top:1.1rem; font-weight:600; font-size:.88rem; color:var(--navy); }
.learn__cta{ text-align:center; margin-top:3rem; }

/* ============================================================
   CALCULATORS
   ============================================================ */
.calc{ background:var(--paper); }
.calc-band{ border-radius:28px; padding:clamp(2.2rem,4vw,3.4rem); position:relative; overflow:hidden;
  background:radial-gradient(120% 140% at 80% 10%, #15407f, #0a1b3a 60%, #06101f); color:#eaf6ff; }
.calc-band::after{ content:""; position:absolute; right:-6%; top:-30%; width:46%; height:160%;
  background:url("assets/peacock.png") center/cover; opacity:.4;
  mask-image:radial-gradient(circle at 60% 50%, #000, transparent 70%);
  -webkit-mask-image:radial-gradient(circle at 60% 50%, #000, transparent 70%); }
.calc-band .eyebrow{ color:var(--teal); }
.calc-band h2{ color:#fff; }
.calc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.4rem; position:relative; z-index:2; }
.tool{ padding:1.6rem 1.4rem; border-radius:18px; background:rgba(255,255,255,.06);
  border:1px solid rgba(123,203,191,.22); transition:transform .45s var(--ease), background .45s, border-color .45s; }
.tool:hover{ transform:translateY(-7px); background:rgba(255,255,255,.1); border-color:var(--teal); }
.tool .ti{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:rgba(123,203,191,.16); margin-bottom:1rem; }
.tool .ti svg{ width:22px; height:22px; stroke:var(--teal); }
.tool h3{ font-size:1.05rem; font-weight:600; margin-bottom:.5rem; color:#fff; }
.tool p{ font-size:.86rem; color:rgba(226,240,252,.7); }
.tool .more{ margin-top:1rem; font-size:.84rem; font-weight:600; color:var(--teal); display:inline-flex; gap:.3em; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.proof{ background:linear-gradient(180deg,var(--paper),var(--paper-2)); }
.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.quote{ padding:2.2rem 2rem; border-radius:22px; background:#fff; border:1px solid var(--line);
  position:relative; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.quote:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.quote .mark{ font-family:var(--font-display); font-size:3.4rem; line-height:0; color:var(--teal); opacity:.5; }
.quote p{ font-size:1.02rem; color:var(--ink-text); margin:1rem 0 1.6rem; }
.quote .who{ display:flex; align-items:center; gap:.9rem; }
.quote .av{ width:46px; height:46px; border-radius:50%; background:var(--iris); flex:none;
  display:grid; place-items:center; color:#04121f; font-weight:700; font-family:var(--font-display); }
.quote .who b{ display:block; font-size:.96rem; }
.quote .who span{ font-size:.82rem; color:var(--slate); }
.quote .svc{ position:absolute; top:1.6rem; right:1.7rem; font-size:.72rem; font-weight:600;
  color:var(--pavo-green); letter-spacing:.04em; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{ position:relative; overflow:hidden; color:#eaf6ff; isolation:isolate;
  background:radial-gradient(120% 120% at 20% 20%, #0e3a31, #07142a 55%, #06101f); }
.final::before{ content:""; position:absolute; inset:0; z-index:-1; background:url("assets/peacock.png") center/cover;
  opacity:.22; }
.final__glow{ position:absolute; z-index:-1; width:60vw; height:60vw; right:-15vw; top:-20vw;
  background:radial-gradient(circle,rgba(22,184,166,.3),transparent 60%); filter:blur(10px); }
.final .wrap{ text-align:center; padding-block:clamp(80px,11vw,150px); position:relative; z-index:1; }
.final h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem,5.4vw,4.2rem);
  line-height:1.05; letter-spacing:-.02em; color:#fff; max-width:18ch; margin:1rem auto 0; }
.final p{ max-width:54ch; margin:1.4rem auto 0; color:rgba(226,240,252,.82); font-size:1.1rem; }
.final__cta{ margin-top:2.4rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.final__trust{ margin-top:2.2rem; font-size:.82rem; letter-spacing:.06em; color:rgba(226,240,252,.6);
  display:flex; gap:1.3rem; justify-content:center; flex-wrap:wrap; }
.final__trust span{ display:inline-flex; align-items:center; gap:.5em; }
.final__trust b{ color:var(--teal); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:rgba(226,240,252,.7); padding-block:60px 30px; }
.footer__top{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2.4rem; }
.footer__about{ margin-top:1.2rem; max-width:34ch; font-size:.92rem; }
.footer h4{ color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer ul{ list-style:none; display:grid; gap:.7rem; font-size:.92rem; }
.footer a:hover{ color:var(--teal); }
.footer__bottom{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .calc-grid{ grid-template-columns:repeat(2,1fr); }
  .footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav__phone, .nav__sep{ display:none; }
  /* The drawer is out of flow, so `space-between` would strand the burger in the
     middle of the bar. Order + auto margin pin it to the right edge instead. */
  .nav{ gap:.75rem; justify-content:flex-start; }
  .brand{ order:1; margin-right:auto; }
  .nav__cta{ order:2; gap:.55rem; flex-shrink:0; }
  .nav__toggle{ order:3; display:inline-flex; }
  .nav__cta .btn--primary{ padding:.72em 1.15em; font-size:.9rem; }
  .nav__menu{
    position:fixed; top:0; right:0; bottom:0; z-index:1000;
    width:min(360px,88vw); padding:calc(72px + env(safe-area-inset-top)) 1.4rem
            calc(2rem + env(safe-area-inset-bottom));
    background:rgba(8,14,30,.96); backdrop-filter:blur(18px) saturate(1.15);
    border-left:1px solid rgba(150,190,225,.14);
    transform:translateX(110%); visibility:hidden; pointer-events:none;
    transition:transform .4s var(--ease), visibility 0s linear .4s;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  body.nav-open .nav__menu{
    transform:translateX(0); visibility:visible; pointer-events:auto; transition-delay:0s;
  }
  /* The header outranks the drawer while it's open, so the brand and the close
     button stay tappable instead of being buried under the panel.
     backdrop-filter MUST stay off here: the drawer is a position:fixed child of this
     header, and a filtered ancestor becomes its containing block — which clips the
     full-height panel down to the header's own box. The background is opaque instead. */
  body.nav-open .site-header{
    z-index:1001; background:rgba(8,14,30,.98);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    border-bottom-color:rgba(150,190,225,.14);
  }
  body.nav-open .brand{ position:relative; z-index:1002; }
  /* the Tools chip + CTA are repeated inside the drawer — drop the duplicates */
  body.nav-open .nav__cta{ opacity:0; pointer-events:none; }
  body.nav-open{ overflow:hidden; }
  .nav__links{
    display:flex; flex-direction:column; gap:.15rem; align-items:stretch;
  }
  .nav__links > .nav__item > a{
    color:#eaf6ff; font-size:1.12rem; font-weight:600; padding:.9rem .7rem;
    border-radius:12px;
  }
  .nav__links > .nav__item > a::after{ display:none; }
  .nav__links > .nav__item > a:hover{ background:rgba(123,203,191,.1); color:var(--teal); }
  .nav__mega:not(.nav__mega--tools){
    position:static; transform:none; width:auto; opacity:1; visibility:visible;
    pointer-events:auto; box-shadow:none; border:0; background:transparent;
    padding:.15rem 0 .55rem .55rem; display:grid; gap:2px;
  }
  .nav__mega:not(.nav__mega--tools) a{ padding:.65rem .75rem; }
  .nav__item--has-menu .nav__chev{ display:none; }
  .scrolled .nav__links > .nav__item > a{ color:#eaf6ff; }

  /* --- drawer footer: tools, phone and CTA --- */
  .nav__drawer-foot{
    display:grid; gap:2px; margin-top:1.4rem; padding-top:1.2rem;
    border-top:1px solid rgba(150,190,225,.16);
  }
  .nav__drawer-label{
    font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
    color:rgba(123,203,191,.8); padding:0 .7rem .5rem;
  }
  .nav__drawer-foot > a:not(.btn){
    color:rgba(234,246,255,.9); font-size:.98rem; padding:.6rem .7rem; border-radius:10px;
    transition:background .25s ease, color .25s ease;
  }
  .nav__drawer-foot > a:not(.btn):hover{ background:rgba(123,203,191,.1); color:var(--teal); }
  .nav__drawer-phone{
    display:inline-flex; align-items:center; gap:.55em;
    margin-top:.9rem; font-weight:600;
  }
  .nav__drawer-phone svg{ width:1.05em; height:1.05em; flex:none; color:var(--teal); }
  .nav__drawer-cta{ margin-top:.9rem; justify-content:center; }

  .who-grid, .learn-grid, .proof-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }

  /* Mobile/tablet hero: video on top, banner copy underneath */
  .hero{
    display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch;
    min-height:auto; overflow:visible;
  }
  .hero__veil{
    background:linear-gradient(180deg, rgba(4,10,24,.55) 0%, rgba(4,10,24,.12) 42%, rgba(4,10,24,.82) 100%);
  }
  .hero > .wrap{
    order:2; position:relative; z-index:3; width:100%;
  }
  .hero__figure{
    order:1; position:relative; right:auto; left:auto; bottom:auto;
    width:100%; height:min(58svh, 520px);
    --fig-opacity:1; z-index:2; margin:0; margin-top:64px;
  }
  .hero__figure-glow{ opacity:.45; width:90%; filter:blur(22px); }
  .hero__figure-shadow{ opacity:.7; bottom:4%; }
  .hero__video{ object-position:50% 16%; }
  .hero__inner{ padding-block:28px 48px; max-width:100%; }
  .hero__sound{
    right:16px; left:auto; bottom:auto;
    top:calc(64px + min(58svh, 520px) - 56px);
  }
  .svc-hero .hero__inner{ padding-block:120px 64px; }
  .svc-hero h1{ font-size:clamp(1.9rem,8vw,2.8rem); }
  .field{ min-width:0; flex:1 1 100%; }
  .guide__panel{ flex-direction:column; align-items:stretch; }
  .guide__layout{ grid-template-columns:1fr; gap:2.4rem; }
  .guide__media{ order:-1; }
  .guide__video{ aspect-ratio:16/9; }
  .final h2{ max-width:22ch; font-size:clamp(1.9rem,7.5vw,3.2rem); }
  .btn{ white-space:normal; text-align:center; }
}
@media (max-width:560px){
  .hero__figure{
    height:min(48svh, 380px);
    margin-top:58px;
  }
  .hero__figure-glow, .hero__figure-shadow{ display:none; }

  .hero__inner{ padding-block:18px 36px; }
  .hero h1{ font-size:clamp(2.2rem,10.5vw,2.9rem); }
  .hero__sub{ font-size:.98rem; }
  .hero .hero__eyebrow{ font-size:.64rem; letter-spacing:.14em; }
  .hero__eyebrow::before{ width:18px; }
  .hero__stats{
    margin-top:2.1rem; display:grid; grid-template-columns:repeat(3,1fr);
    gap:.9rem .7rem; align-items:start;
  }
  .hero__stats b{ font-size:1.32rem; }
  .hero__stats span{ font-size:.56rem; letter-spacing:.02em; line-height:1.35; }

  .hero__scroll{ display:none; }
  .hero__sound{
    right:14px;
    top:calc(58px + min(48svh, 380px) - 52px);
    padding:.62rem;
  }
}
@media (max-width:560px){
  .pillar-grid, .calc-grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .hero__stats{ gap:1.6rem; }
  .nav{ gap:.6rem; }
  .nav__tools{ font-size:.82rem; }
  .nav__cta{ gap:.45rem; }
  .nav__cta .btn--primary{ padding:.72em 1.1em; font-size:.88rem; }
  .brand__logo, .scrolled .brand__logo{ height:40px; }
  .svc-row__head{ font-size:clamp(1.35rem,6.5vw,1.75rem); }
  .svc-row__body{ font-size:.98rem; }
  /* keep floating CTA from covering content */
  .final .wrap, .svc-list .wrap, .footer{ padding-bottom:5.5rem; }
}
@media (max-width:430px){
  .nav__tools{ padding:.5em; }
  .nav__tools > span{ display:none; }
  .nav__tools .nav__chev{ display:none; }
  .nav__cta .btn--primary{ display:none; } /* side-cta covers this on phones */
  .nav__mega--tools{ width:min(300px, calc(100vw - 1.5rem)); right:-.25rem; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .hero h1 .line > span{ transform:none; }
}

/* ============================================================
   MOTION LAYER  (curated.media-style interactions)
   ============================================================ */

/* ---- Lenis smooth scroll (recommended) ---- */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---- Magnetic targets ---- */
[data-magnetic]{ will-change:transform; }

/* ---- Kinetic char-split text ---- */
.split-word{ display:inline-block; overflow:hidden; vertical-align:top; }
.split-char{ display:inline-block; transform:translateY(115%); transition:transform .9s var(--ease); will-change:transform; }
.split-in .split-char{ transform:translateY(0); }

/* ============================================================
   INTERACTIVE SPARKLE FIELD
   ============================================================ */
.spark-sec{
  position:relative; min-height:100svh; overflow:hidden; isolation:isolate;
  display:grid; place-items:center; text-align:center; color:#eafcff;
  background:radial-gradient(120% 110% at 50% 0%, #0e2a6b 0%, #0a1a33 42%, #06101f 100%);
}
.spark-sec::before{ content:""; position:absolute; inset:0; z-index:0;
  background:url("assets/peacock.png") center/cover; opacity:.12; mix-blend-mode:screen; }
/* decorative sprinkle of brand sparkles (static, gentle twinkle) */
.spark-deco{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.spark-deco svg{ position:absolute; left:var(--x); top:var(--y); width:var(--s); height:auto;
  color:var(--c); opacity:0; transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 8px rgba(43,209,196,.4));
  animation:sprinkle 7s ease-in-out infinite var(--d); }
@keyframes sprinkle{
  0%,100%{ opacity:.16; transform:translate(-50%,-50%) scale(.9) rotate(0deg); }
  50%{ opacity:.62; transform:translate(-50%,calc(-50% - 12px)) scale(1.06) rotate(8deg); }
}

/* ============================================================
   AMBIENT FEATHER-SPARKLE FIELD — quiet sections
   Same #spark plume as the hero/spark-sec. Each particle gets
   a random delay + duration + drift vector so the field reads
   as a continuous twinkle, not a synchronized animation.
   ============================================================ */
.ambient-feathers{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.ambient-feather{ position:absolute; left:var(--x); top:var(--y); width:var(--s); height:auto;
  color:var(--c); opacity:0; transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 8px rgba(43,209,196,.5)) drop-shadow(0 0 14px rgba(43,209,196,.18));
  animation:featherTwinkle var(--dur,6s) ease-in-out infinite var(--d, 0s); }
.ambient-feather svg{ display:block; width:100%; height:auto; }
@keyframes featherTwinkle{
  0%,100%{ opacity:.08; transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.85); }
  50%    { opacity:.7;  transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px)))
            rotate(calc(var(--r,0deg) + 18deg)) scale(1.08); }
}
.spark-copy{ position:relative; z-index:3; max-width:760px; padding:8vh 24px; pointer-events:none; }
.spark-copy .eyebrow{ justify-content:center; }
.spark-copy h2{ font-family:var(--font-display); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(2.4rem,6vw,5rem); line-height:1.02; margin:1rem 0 0; color:#fff; }
.spark-copy h2 em{ font-style:italic; }
.spark-copy h2 .iris-text{ background:var(--iris); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:irisShift 6s linear infinite; }
.spark-copy p{ max-width:48ch; margin:1.5rem auto 0; font-size:1.12rem; color:rgba(226,240,252,.8); }
.spark-cta{ pointer-events:auto; margin-top:2.2rem; display:inline-flex; }

/* ============================================================
   VELOCITY MARQUEE
   ============================================================ */
.marquee{ position:relative; overflow:hidden; padding-block:26px; background:var(--ink);
  border-block:1px solid rgba(123,203,191,.14); }
.marquee__track{ display:flex; gap:0; width:max-content; will-change:transform; }
.marquee__item{ display:inline-flex; align-items:center; gap:1.6rem; padding-inline:1.6rem;
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,3.4vw,2.4rem);
  color:#eafcff; white-space:nowrap; }
.marquee__item svg{ width:.9em; height:.9em; color:var(--teal); flex:none; }
.marquee__item.alt{ color:transparent; -webkit-text-stroke:1px rgba(123,203,191,.6); }

@media (prefers-reduced-motion:reduce){
  .split-char{ transform:none !important; }
}

/* ============================================================
   WHITE / LIGHT THEME  (v6)
   ============================================================ */
:root{
  --paper:#ffffff;
  --paper-2:#f4f7fb;
  --ink-text:#0d1f33;
  --slate:#5a6b7d;
  --line:rgba(27,58,92,.10);
  --card-1:#ffffff;
  --card-2:#f8fbfd;
  --ink:#0d1f33;
  --ink-2:#152a44;
}
body{ background:var(--paper); color:var(--ink-text); }

/* soft section bands */
.pillars, .why{ background:#ffffff; }
.who{ background:linear-gradient(180deg,#ffffff,#f5f8fc); }
.learn{ background:#f7fafc; }
.proof{ background:linear-gradient(180deg,#ffffff,#f5f8fc); }
.pillars, .who, .why, .learn, .proof{ position:relative; }
.pillars::before, .why::before, .learn::before{ display:none; }
.pillars .wrap, .why .wrap, .learn .wrap, .who .wrap, .proof .wrap{ position:relative; z-index:1; }

.section-title{ color:var(--ink-text); }
.section-intro{ color:var(--slate); }
.eyebrow{ color:var(--pavo-green); }

/* header — light */
.site-header{ background:transparent; }
.site-header.scrolled{
  background:rgba(255,255,255,.88); backdrop-filter:blur(14px) saturate(1.15);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(8,24,52,.25);
}
.nav__links a{ color:rgba(13,31,51,.78); }
.nav__links a:hover{ color:var(--navy); }
.scrolled .nav__links a{ color:var(--ink-text); }
.nav__phone{ color:var(--ink-text); }
.scrolled .nav__phone{ color:var(--ink-text); }
.nav__sep{ background:rgba(13,31,51,.14); }
.scrolled .nav__sep{ background:var(--line); }
.nav__tools{
  color:var(--navy); border-color:rgba(37,60,131,.22); background:rgba(255,255,255,.55);
}
.nav__tools:hover{ color:var(--pavo-green); border-color:var(--pavo-teal); background:rgba(123,203,191,.12); }
.scrolled .nav__tools{ color:var(--navy); border-color:var(--line); background:#fff; }
.nav__toggle{
  border-color:rgba(37,60,131,.18); background:rgba(255,255,255,.7);
}
.nav__toggle span{ background:var(--navy); }
.scrolled .nav__toggle{ border-color:var(--line); background:#fff; }
.scrolled .nav__toggle span{ background:var(--navy); }
.nav__mega{
  background:#fff; border:1px solid var(--line);
  box-shadow:0 24px 50px -24px rgba(8,24,52,.28);
}
.nav__mega a{ color:var(--ink-text); }
.nav__mega a span{ color:var(--slate); }
.nav__mega a:hover{ background:rgba(123,203,191,.12); }

/* light cards */
.pillar, .who-card, .why-card, .article, .quote{
  background:linear-gradient(180deg, var(--card-1), var(--card-2));
  border:1px solid var(--line);
  box-shadow:0 18px 40px -28px rgba(8,24,52,.22), inset 0 1px 0 rgba(255,255,255,.9);
}
.pillar::before, .who-card::before, .why-card::before, .article::before, .quote::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; opacity:0;
  background:radial-gradient(80% 60% at 50% -10%, rgba(22,184,166,.10), transparent 70%);
  transition:opacity .5s var(--ease); pointer-events:none; }
.pillar:hover, .who-card:hover, .why-card:hover, .article:hover, .quote:hover{
  border-color:rgba(22,184,166,.45);
  box-shadow:0 28px 60px -30px rgba(8,24,52,.28), 0 0 0 1px rgba(123,203,191,.2);
}
.pillar:hover::before, .who-card:hover::before, .why-card:hover::before,
.article:hover::before, .quote:hover::before{ opacity:1; }
.who-card > *, .why-card > *, .quote > *{ position:relative; z-index:1; }

.who-card, .why-card, .article{ overflow:hidden; }
.who-card::after, .why-card::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%;
  background:var(--iris); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease); z-index:2; }
.who-card:hover::after, .why-card:hover::after{ transform:scaleX(1); }

.pillar__icon{ background:rgba(37,60,131,.06); }
.pillar__icon svg{ stroke:var(--navy); }
.pillar:hover .pillar__icon{ background:rgba(123,203,191,.18); }
.pillar:hover .pillar__icon svg{ stroke:var(--pavo-green); }
.pillar h3, .who-card h3, .why-card h3, .article h3, .quote p{ color:var(--ink-text); }
.pillar p, .who-card p, .article p, .quote .who span{ color:var(--slate); }
.pillar .more, .article .more, .pillars__cta a{ color:var(--pavo-green); }
.pillars__cta{ color:var(--slate); }
.pillars__cta a{ border-bottom-color:rgba(15,157,107,.4); }
.who-card .svcs span{ background:rgba(37,60,131,.06); color:var(--navy); }
.quote .who b{ color:var(--ink-text); }
.why-card .no{ color:#04121f; }

.btn--ghost{
  color:var(--navy); border:1px solid rgba(37,60,131,.28); background:rgba(255,255,255,.55);
}
.btn--ghost:hover{ border-color:var(--pavo-teal); color:var(--pavo-green); background:#fff; }
.btn--outline{ color:var(--navy); border-color:rgba(37,60,131,.25); }
.btn--outline:hover{ border-color:var(--pavo-teal); color:var(--pavo-green); }
.btn--ink{ background:var(--navy); color:#fff; }

/* service-page hero stays light */
.svc-hero h1{ color:var(--ink-text); text-shadow:none; }
.svc-hero .hero__sub{ color:var(--slate); }
.svc-hero .hero__stats b{ color:var(--ink-text); }
.svc-hero .hero__stats span{ color:var(--slate); }
.svc-hero .hero__scroll{ color:var(--slate); }
.svc-hero .hero__veil{
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 34%, rgba(255,255,255,.2) 62%, rgba(255,255,255,0) 82%),
    radial-gradient(60% 80% at 18% 45%, rgba(255,255,255,.55), transparent 70%);
}
.svc-hero .hero__sound{
  color:var(--ink-text); background:rgba(255,255,255,.82);
  border:1px solid rgba(37,60,131,.16);
}
.svc-hero .hero__sound:hover{ background:#fff; border-color:var(--pavo-teal); }

/* homepage hero — black bg only; keep banner + canvas animation as-is */
body.page-home .bg-atmos{ background:#000; }
body.page-home .hero:not(.svc-hero){ background:transparent; }
body.page-home .hero:not(.svc-hero) .hero__veil{
  background:
    linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 32%, rgba(0,0,0,.12) 58%, transparent 78%),
    radial-gradient(60% 80% at 22% 50%, rgba(0,0,0,.5), transparent 70%);
}
body.page-home .pillars,
body.page-home .why{ background:#fff !important; }
body.page-home .who,
body.page-home .proof{ background:linear-gradient(180deg,#ffffff,#f5f8fc) !important; }
body.page-home .learn{ background:#f7fafc !important; }
body.page-home .calc,
body.page-home .spark-sec,
body.page-home .guide{ background:#fff !important; }

/* homepage header over dark hero → light chrome until scroll */
body.page-home .brand__logo--on-light{ display:none; }
body.page-home .scrolled .brand__logo--on-dark{ display:none; }
body.page-home .scrolled .brand__logo--on-light{ display:block; }
body.page-home .site-header:not(.scrolled) .nav__links a{ color:rgba(234,246,255,.86); }
body.page-home .site-header:not(.scrolled) .nav__links a:hover{ color:var(--pavo-teal); }
body.page-home .site-header:not(.scrolled) .nav__phone{ color:rgba(234,246,255,.9); }
body.page-home .site-header:not(.scrolled) .nav__sep{ background:rgba(234,246,255,.22); }
body.page-home .site-header:not(.scrolled) .nav__tools{
  color:#eaf6ff; border-color:rgba(234,246,255,.28); background:rgba(8,14,30,.35);
}
body.page-home .site-header:not(.scrolled) .nav__toggle{
  border-color:rgba(234,246,255,.22); background:rgba(8,14,30,.35);
}
body.page-home .site-header:not(.scrolled) .nav__toggle span{ background:#eaf6ff; }
body.page-home .hero:not(.svc-hero) .btn--ghost{
  color:#eaf6ff; border:1px solid rgba(255,255,255,.32); background:transparent;
}
body.page-home .hero:not(.svc-hero) .btn--ghost:hover{
  border-color:var(--teal); color:#fff; background:rgba(255,255,255,.06);
}
body.page-home .hero__sound{
  color:#eaf6ff; background:rgba(0,0,0,.55); border:1px solid rgba(234,246,255,.22);
}
body.page-home .hero__sound:hover{ background:rgba(0,0,0,.72); border-color:var(--teal); }
.svc-crumbs, .svc-crumbs a{ color:var(--slate); }
.svc-crumbs a:hover{ color:var(--pavo-green); }
.svc-row__close{ color:var(--ink-text); }
.svc-row__head{ color:var(--ink-text); }
.svc-row__body{ color:var(--slate); }
.svc-row__list li{ color:var(--ink-text); }
.svc-row__visual{
  background:linear-gradient(180deg,#fff,#f3f7fb);
  border:1px solid var(--line);
  box-shadow:0 24px 50px -32px rgba(8,24,52,.28);
}
.svc-row__visual::before{
  background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(8,24,52,.08) 55%, rgba(8,24,52,.35) 100%);
}
.svc-row__num{ color:rgba(255,255,255,.22); }

/* soft accent bands (still readable on white site) */
.guide{
  background:linear-gradient(180deg,#f4fbf9,#eef6ff); color:var(--ink-text);
}
.guide .section-title, .guide__build{ color:var(--ink-text); }
.guide__sub, .guide__note, .guide__result, .guide__next-note{ color:var(--slate); }
.guide::before{ opacity:.06; mix-blend-mode:multiply; }
.select select{
  background:#fff; border:1px solid rgba(37,60,131,.16); color:var(--ink-text);
}
.calc-band{
  background:
    linear-gradient(135deg, rgba(247,250,252,.88) 0%, rgba(238,245,255,.82) 50%, rgba(242,251,248,.88) 100%),
    url("assets/peacock.png") center / cover no-repeat;
  color:var(--ink-text); border:1px solid var(--line);
}
.calc-band::after{ display:none; }
.calc-band h2, .tool h3{ color:var(--ink-text); }
.calc-band .section-intro{ color:var(--slate); }
.tool p{ color:var(--slate); }
.tool{ background:#fff; border:1px solid var(--line); box-shadow:0 12px 28px -22px rgba(8,24,52,.2); }
.tool:hover{ background:#fff; border-color:rgba(22,184,166,.45); }
.tool .ti{ background:rgba(123,203,191,.16); }

.spark-sec{
  background:linear-gradient(180deg,#f7fafc,#eef5ff);
  color:var(--ink-text);
}
.spark-sec::before{ display:none !important; }
.spark-copy h2{ color:var(--ink-text); }
.spark-copy p{ color:var(--slate); }

.marquee{
  background:#fff; border-block:1px solid var(--line);
}
.marquee__item{ color:var(--ink-text); }
.marquee__item.alt{ color:transparent; -webkit-text-stroke:1px rgba(37,60,131,.28); }

.final{
  background:linear-gradient(180deg,#f4f8fc,#eaf3ff); color:var(--ink-text);
}
.final::before{ opacity:.08; mix-blend-mode:multiply; }
.final h2{ color:var(--ink-text); }
.final p, .final__trust{ color:var(--slate); }

.footer{
  background:#fff; color:var(--slate);
  border-top:1px solid var(--line);
}
.footer h4{ color:var(--ink-text); }
.footer a:hover{ color:var(--pavo-green); }

.loader{
  background:radial-gradient(120% 100% at 50% 0%, #f7fafc 0%, #ffffff 55%, #eef5ff 100%);
}
.loader__status, .loader__pct{ color:var(--slate); }
.loader__bar{ background:rgba(37,60,131,.1); }

/* mobile drawer stays dark for contrast on light chrome */
@media (max-width:860px){
  .nav__menu{
    background:rgba(255,255,255,.98); border-left:1px solid var(--line);
  }
  .nav__links > .nav__item > a{ color:var(--ink-text); }
  .nav__links > .nav__item > a:hover{ background:rgba(123,203,191,.12); color:var(--pavo-green); }
  .scrolled .nav__links > .nav__item > a{ color:var(--ink-text); }
  .nav__mega a{ color:var(--ink-text); }
  /* sub-labels are tuned for the dark desktop popover — unreadable on the white panel */
  .nav__mega a span{ color:var(--slate); }
  /* the open header sits above the drawer, so it has to wear the same light skin */
  body.nav-open .site-header{
    background:rgba(255,255,255,.98); border-bottom-color:var(--line);
  }
  /* The homepage paints nav links light for the dark hero via a 4-class selector that
     doesn't know about the drawer. Inside a white panel that reads as invisible, so
     it has to be out-specified rather than merely restated. */
  body.page-home.nav-open .site-header .nav__links a,
  body.page-home.nav-open .site-header .nav__mega a{ color:var(--ink-text); }
  body.page-home.nav-open .site-header .nav__links a:hover{ color:var(--pavo-green); }
  body.page-home.nav-open .site-header .nav__mega a span{ color:var(--slate); }
  body.nav-open .nav__toggle{ border-color:var(--line); background:#fff; }
  body.nav-open .nav__toggle span{ background:var(--navy); }
  body.page-home.nav-open .site-header:not(.scrolled) .nav__toggle{ border-color:var(--line); background:#fff; }
  body.page-home.nav-open .site-header:not(.scrolled) .nav__toggle span{ background:var(--navy); }
  body.page-home.nav-open .brand__logo--on-dark{ display:none; }
  body.page-home.nav-open .brand__logo--on-light{ display:block; }
  .nav__drawer-foot{ border-top-color:var(--line); }
  .nav__drawer-label{ color:var(--pavo-green); }
  .nav__drawer-foot > a:not(.btn){ color:var(--slate); }
  .nav__drawer-foot > a:not(.btn):hover{ background:rgba(123,203,191,.12); color:var(--pavo-green); }
  .nav__drawer-phone{ color:var(--ink-text); }
  .svc-hero .hero__veil{
    background:linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 40%, rgba(255,255,255,.92) 100%);
  }
}

/* ============================================================
   CONNECTIVE BACKGROUND — soft white atmosphere
   ============================================================ */
.bg-atmos{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%, #f7fafc 42%, #f3f7fb 72%, #eef4f8 100%); }
.bg-atmos .ba{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.45; will-change:transform; }
.bg-atmos .b1{ width:52vw; height:52vw; left:-12vw; top:5vh;
  background:radial-gradient(circle, rgba(31,107,214,.14), transparent 62%); }
.bg-atmos .b2{ width:46vw; height:46vw; right:-12vw; top:44vh;
  background:radial-gradient(circle, rgba(22,184,166,.14), transparent 62%); }
.bg-atmos .b3{ width:42vw; height:42vw; left:26vw; bottom:-6vh;
  background:radial-gradient(circle, rgba(15,157,107,.12), transparent 62%); }

.hero, section, .marquee, .footer{ position:relative; z-index:1; }
.pillars, .who, .why, .learn, .proof, .calc, .spark-sec, .guide{ background:transparent !important; }
.guide::before{ opacity:.06; }


/* ============================================================
   SERVICE PAGES  (mortgage / wealth / investment / literacy)
   ============================================================ */
/* Hero — shorter than the homepage, copy-led */
.svc-hero{ min-height:auto; padding-block:0; }
.svc-hero .hero__inner{ padding-block:170px 96px; max-width:760px; }
@media (min-width:980px){ .svc-hero .hero__inner{ max-width:760px; } }
.svc-hero h1{ font-size:clamp(2.3rem,5.4vw,4.2rem); line-height:1.05; margin-top:1.1rem; }
.svc-hero h1 em{ font-style:italic; font-weight:500; background:var(--iris); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:irisShift 6s linear infinite; }
.svc-hero .hero__sub{ max-width:60ch; }
.svc-crumbs{ display:flex; gap:.5em; align-items:center; font-size:.8rem; letter-spacing:.04em;
  color:rgba(226,240,252,.55); margin-bottom:.4rem; }
.svc-crumbs a{ color:rgba(226,240,252,.7); transition:color .3s; }
.svc-crumbs a:hover{ color:var(--teal); }
.svc-crumbs span{ opacity:.5; }

/* Section that lists the sub-services */
.svc-list{ padding-block:clamp(40px,6vw,80px) clamp(60px,9vw,120px); }
.svc-list__head{ max-width:720px; margin:0 auto clamp(2.4rem,5vw,4rem); text-align:center; }
.svc-list__head .eyebrow{ justify-content:center; }

/* one sub-service = an editorial two-column row, alternating sides */
.svc-row{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.6rem,4vw,4rem);
  align-items:center; padding-block:clamp(2.4rem,5vw,4.2rem); position:relative; }
.svc-row + .svc-row{ border-top:1px solid var(--line); }
.svc-row:nth-child(even) .svc-row__visual{ order:-1; }
.svc-row__text{ position:relative; z-index:1; }
.svc-row__name{ margin-bottom:1rem; }
.svc-row__head{ font-family:var(--font-display); font-weight:500; letter-spacing:-.015em;
  font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1.12; color:var(--ink-text); }
.svc-row__body{ margin-top:1.1rem; color:var(--slate); font-size:1.04rem; }
.svc-row__listlabel{ margin-top:1.7rem; font-size:.72rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--pavo-teal); }
.svc-row__list{ list-style:none; margin-top:1rem; display:grid; gap:.7rem; }
.svc-row__list li{ position:relative; padding-left:2rem; color:var(--ink-text); font-size:.98rem; opacity:.92; }
.svc-row__list li::before{ content:""; position:absolute; left:0; top:.1em; width:1.25rem; height:1.25rem;
  border-radius:50%; background:var(--iris-soft);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/></svg>") center/68% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/></svg>") center/68% no-repeat; }
.svc-row__close{ margin-top:1.7rem; font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:1.12rem; line-height:1.4; color:#eaf6ff; }
.svc-row__cta{ margin-top:1.6rem; }

/* human lifestyle photo panel */
.svc-row__visual{ position:relative; aspect-ratio:1/.86; border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg, var(--card-1), var(--card-2));
  border:1px solid rgba(150,190,225,.12);
  box-shadow:0 30px 70px -38px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
  isolation:isolate; }
.svc-row__visual img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 28%; display:block;
  transition:transform 1.1s var(--ease); }
.svc-row:nth-child(3n) .svc-row__visual img{ object-position:center 45%; }
.svc-row:nth-child(4n) .svc-row__visual img{ object-position:center 18%; }
.svc-row:nth-child(5n) .svc-row__visual img{ object-position:60% 35%; }
.svc-row:hover .svc-row__visual img{ transform:scale(1.05); }
.svc-row__visual::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,16,31,.08) 0%, rgba(6,16,31,.15) 45%, rgba(6,16,31,.55) 100%),
            radial-gradient(70% 60% at 30% 20%, rgba(43,209,196,.12), transparent 60%); }
.svc-row__num{ position:absolute; right:6%; bottom:-2%; z-index:2; font-family:var(--font-display);
  font-size:clamp(8rem,16vw,13rem); font-weight:500; line-height:1; color:rgba(255,255,255,.14);
  letter-spacing:-.04em; pointer-events:none; }

@media (max-width:860px){
  .svc-row{ grid-template-columns:1fr; gap:1.8rem; }
  .svc-row:nth-child(even) .svc-row__visual{ order:0; }
  .svc-row__visual{ aspect-ratio:16/9; }
}

/* ============================================================
   WHITE THEME — service + accent patches (must follow svc rules)
   ============================================================ */
.svc-crumbs, .svc-crumbs a{ color:var(--slate); }
.svc-crumbs a:hover{ color:var(--pavo-green); }
.svc-row__close{ color:var(--ink-text); }
.svc-row__visual{
  background:linear-gradient(180deg,#fff,#f3f7fb);
  border:1px solid var(--line);
  box-shadow:0 24px 50px -32px rgba(8,24,52,.28);
}
.svc-row__visual::before{
  background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(8,24,52,.08) 55%, rgba(8,24,52,.35) 100%);
}
.svc-row__num{ color:rgba(255,255,255,.22); }

.who-card--accent{
  background:linear-gradient(160deg,#eef5ff 0%, #f2fbf8 100%) !important;
  border:1px solid rgba(37,60,131,.14);
  color:var(--ink-text);
}
.who-card--accent h3{ color:var(--navy); }
.who-card--accent p{ color:var(--slate) !important; }
.who-card--accent .more{ color:var(--pavo-green) !important; }

/* ============================================================
   BOOK A CONSULTATION — MODAL
   Fixed to the viewport, so it is mounted as a direct child of
   <body>: any filtered/transformed ancestor would become its
   containing block and clip it (same trap as the nav drawer).
   ============================================================ */
.bookm{ position:fixed; inset:0; z-index:1200; display:grid; place-items:center;
  padding:clamp(16px,4vw,40px); }
.bookm[hidden]{ display:none; }
.bookm__scrim{ position:absolute; inset:0; background:rgba(6,16,31,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s ease; }
.bookm.is-open .bookm__scrim{ opacity:1; }
.bookm__panel{
  position:relative; width:min(680px,100%); max-height:calc(100dvh - 2 * clamp(16px,4vw,40px));
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:#fff; color:var(--ink-text);
  border:1px solid var(--line); border-radius:22px;
  box-shadow:0 40px 90px -30px rgba(8,24,52,.5);
  padding:clamp(22px,4vw,40px);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.bookm.is-open .bookm__panel{ opacity:1; transform:none; }
/* the iridescent brand edge along the top */
.bookm__panel::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px;
  border-radius:22px 22px 0 0; background:var(--iris); }

.bookm__x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; border:1px solid var(--line); background:#fff;
  color:var(--slate); cursor:pointer; transition:color .25s, border-color .25s, background .25s;
}
.bookm__x svg{ width:18px; height:18px; }
.bookm__x:hover{ color:var(--ink-text); border-color:var(--pavo-teal); background:rgba(123,203,191,.08); }
.bookm__x:focus-visible{ outline:2px solid var(--pavo-teal); outline-offset:2px; }

.bookm__eyebrow{ color:var(--pavo-green); }
.bookm__title{ font-family:var(--font-display); font-weight:400; letter-spacing:-.02em;
  font-size:clamp(1.7rem,4.4vw,2.4rem); line-height:1.08; margin:.7rem 0 0; color:var(--navy); }
.bookm__intro{ margin:.7rem 0 0; color:var(--slate); font-size:1rem; max-width:46ch; }

.bookm__form{ margin-top:1.6rem; display:grid; gap:1rem; }
.bookm__row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.bookm__field{ display:grid; gap:.4rem; min-width:0; }
.bookm__field label{ font-size:.82rem; font-weight:600; color:var(--slate); letter-spacing:.01em; }
.bookm__field label span[aria-hidden]{ color:var(--pavo-green); }
.bookm__opt{ font-weight:500; opacity:.6; }
.bookm__field input,
.bookm__field textarea,
.bookm__select select{
  width:100%; font:inherit; font-size:1rem; color:var(--ink-text);
  padding:.78em .9em; border-radius:12px;
  border:1px solid var(--line); background:#fbfdfe;
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.bookm__field textarea{ resize:vertical; min-height:84px; }
.bookm__field input::placeholder,
.bookm__field textarea::placeholder{ color:rgba(70,88,107,.45); }
.bookm__field input:focus,
.bookm__field textarea:focus,
.bookm__select select:focus{
  outline:none; background:#fff; border-color:var(--pavo-teal);
  box-shadow:0 0 0 3px rgba(22,184,166,.16);
}
.bookm__select{ position:relative; }
.bookm__select select{ appearance:none; -webkit-appearance:none; padding-right:2.4em; cursor:pointer; }
.bookm__select::after{
  content:""; position:absolute; right:1em; top:50%; width:8px; height:8px;
  margin-top:-6px; border-right:2px solid var(--slate); border-bottom:2px solid var(--slate);
  transform:rotate(45deg); pointer-events:none;
}
/* invalid state is only painted after a submit attempt, never while first typing */
.bookm__field.is-invalid input{ border-color:#c2410c; background:#fff7f4; }
.bookm__err{ display:none; font-size:.76rem; color:#c2410c; }
.bookm__field.is-invalid .bookm__err{ display:block; }

.bookm__submit{ justify-content:center; width:100%; margin-top:.4rem; }
.bookm__fine{ font-size:.76rem; color:rgba(70,88,107,.75); text-align:center; margin:0; }

/* success state */
.bookm__done{ text-align:center; padding:1.4rem 0 .4rem; }
.bookm__done[hidden]{ display:none; }
.bookm__tick{ width:64px; height:64px; margin:0 auto 1.2rem; display:grid; place-items:center;
  border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--pavo-teal),var(--pavo-green)); }
.bookm__tick svg{ width:30px; height:30px; }
.bookm__done h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,4vw,2rem);
  color:var(--navy); margin:0; }
.bookm__done p{ margin:.8rem auto 1.6rem; max-width:42ch; color:var(--slate); }
.bookm__done a{ color:var(--pavo-green); font-weight:600; }

@media (max-width:560px){
  .bookm{ padding:0; }
  .bookm__panel{
    width:100%; max-height:100dvh; min-height:100dvh; border-radius:0; border:0;
    padding:76px clamp(18px,5vw,28px) calc(28px + env(safe-area-inset-bottom));
  }
  .bookm__panel::before{ border-radius:0; }
  .bookm__row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .bookm__panel{ transform:none; }
}
body.modal-open{ overflow:hidden; }