:root{
  --hdr-h:74px;
  --ink:#06110B; --plum:#0B1F14; --royal:#0F3D27; --royal-deep:#0A2C1C;
  --paper:#F7F5F3; --parchment:#EFEAE4;
  --gold-deep:#996715; --gold:#D4A33C; --gold-light:#E8CB7A; --cream:#D5CBB9;
  --text:#F2EEE9; --muted:#98A59D; --ink-text:#0B1F14; --body-light:#3D4A43;
  --line:rgba(213,203,185,.14); --line-dark:rgba(11,31,20,.12);
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;
  --r-btn:11px; --r-card:12px; --r-input:8px;
  --glow-core:#1F8A52; --glow-edge:#5FD597;
  --panel-plum:linear-gradient(160deg,#11402A 0%,#06110B 100%);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);
  font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:clamp(20px,4vw,52px)}

/* ---------- shared type ---------- */
.eyebrow{font-size:13.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  color:var(--cream);opacity:.8;margin:0 0 18px}
.eyebrow--dark{color:var(--gold-deep);opacity:1}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-1px;text-wrap:balance;margin:0}
h1{font-size:clamp(38px,5.2vw,68px);line-height:1.06;letter-spacing:-1.5px}
h1 em,.dark h2 em,.final h2 em{font-style:italic;color:var(--gold)}
.light h2 em{font-style:italic;color:var(--gold-deep)}
/* gold headings. On the light grounds the deeper gold is the only one that
   holds contrast; #D4A33C on paper sits near 2:1 and is unreadable. */
.light .h-gold{color:var(--gold-deep)}
.dark .h-gold,.final .h-gold{color:var(--gold)}
h2{font-size:clamp(30px,3.9vw,50px);line-height:1.12}
h3{font-size:clamp(21px,1.9vw,26px);line-height:1.25;letter-spacing:-.4px}
.lede{font-size:clamp(19px,1.7vw,23px);font-weight:300;line-height:1.55;margin:0}

/* struck-metal gold: a real tonal ramp, not a flat fill */
.btn{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#F6E3AE 0%,#E3BE63 26%,#D4A33C 52%,#BE8D2A 74%,#D9B45C 100%);
  color:#1A1206;font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:2.4px;
  text-transform:uppercase;white-space:nowrap;padding:15px 30px;border-radius:var(--r-btn);
  text-decoration:none;border:0;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,250,232,.62),
             inset 0 -1px 0 rgba(120,84,14,.35),
             0 2px 10px rgba(212,163,60,.22);
  transition:filter .2s,transform .22s cubic-bezier(.16,1,.3,1),box-shadow .2s}
/* the shine sweep */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(102deg,transparent 36%,rgba(255,252,240,.30) 46%,
             rgba(255,255,255,.85) 51%,rgba(255,252,240,.30) 56%,transparent 66%);
  transform:translateX(-130%);animation:shine 5.5s ease-in-out infinite}
@keyframes shine{0%,64%{transform:translateX(-130%)}88%,100%{transform:translateX(130%)}}
.btn.is-lit,
.btn:hover{filter:brightness(1.07);transform:scale(1.045);
  box-shadow:inset 0 1px 0 rgba(255,250,232,.72),
             inset 0 -1px 0 rgba(120,84,14,.3),
             0 12px 30px rgba(212,163,60,.42)}
.btn:hover::after{animation-duration:1.6s}
.btn:active{transform:scale(1.02) translateY(1px)}
.btn:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.btn--lg{font-size:16px;padding:20px 40px}
/* same gold as the advisor names it sits under */
.btn--ghost{background:none;color:var(--gold);border:1px solid rgba(200,149,43,.5);box-shadow:none}
.btn--ghost::after{display:none}
.btn--ghost:hover{background:rgba(200,149,43,.1);filter:none;box-shadow:none}

/* trust line under CTAs */
/* set in caps, so it gets tracking like the page's other uppercase text */
.trust{font-size:13.5px;color:var(--muted);margin:16px 0 0;
  text-transform:uppercase;letter-spacing:.09em}
.trust b{color:var(--gold-light);font-weight:600}

/* ============ 0. STICKY HEADER ============ */
/* Frosted rather than solid: a light tint over a strong blur, with saturation
   pushed so the bar takes on whatever colour is passing beneath it. */
/* The bar follows you down the home page, which is one long argument. Every
   other page is a destination you arrived at deliberately, so there it scrolls
   away and gives the content the full screen. The home hero carries data-home;
   nothing else does. */
.hdr{position:relative;z-index:60;background:rgba(6,17,11,.38);
  backdrop-filter:blur(22px) saturate(165%);-webkit-backdrop-filter:blur(22px) saturate(165%);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s,color .3s}
body:has([data-home]) .hdr{position:sticky;top:0}
.hdr.is-stuck{border-bottom-color:var(--line);background:rgba(6,17,11,.52)}
/* Over the paper sections that same tint would leave cream type on near-white,
   so the bar inverts: light frost, dark type. */
.hdr.on-light{background:rgba(247,245,243,.62);border-bottom-color:var(--line-dark)}
.hdr.on-light .brand span{color:var(--ink-text)}
.hdr.on-light .brand span i{color:var(--gold-deep)}
.hdr.on-light .nav-links a{color:#3D4A43}
.hdr.on-light .nav-links a:hover{color:var(--gold-deep)}
.hdr.on-light .burger span{background:var(--ink-text)}
.hdr-in{display:flex;align-items:center;gap:26px;height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;min-width:0;flex:none}
.brand img{width:36px;height:36px;flex:none;object-fit:contain;aspect-ratio:1}
.brand span{font-family:var(--display);font-size:20px;color:var(--text);letter-spacing:-.2px}
.brand span i{font-style:normal;color:var(--gold)}
.nav-links{display:flex;gap:24px}
.nav-links a{color:var(--cream);text-decoration:none;font-size:16px;opacity:.82;
  display:inline-block;transition:opacity .18s,color .18s,transform .28s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover,.nav-links a:focus-visible{opacity:1;color:#B8862A}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;margin-left:4px;background:none;border:0;cursor:pointer}
.burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--cream);
  transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .18s ease}
.burger:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
/* the three bars fold into a cross while the panel is open */
.hdr.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.is-open .burger span:nth-child(2){opacity:0}
.hdr.is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ 1. HERO ============ */
.hero{position:relative;background:#000;overflow:hidden;
  display:grid;align-items:stretch;
  /* the hero and the bar above it fill at least one screen, so a page opens on
     the hero rather than on a hero and a strip of whatever follows it */
  min-height:calc(100vh - var(--hdr-h));
  min-height:calc(100svh - var(--hdr-h))}
.hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 58%}
/* the ground the page already had, now sitting at 80% so the photograph
   carries through at 20% */
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:#000;opacity:.80}
.hero .glow{z-index:2}
.hero-in{position:relative;z-index:3;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,4vw,60px);align-items:end;
  padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(24px,3vw,44px)}
.hero-copy{padding-bottom:clamp(10px,3vw,40px)}
.checks{list-style:none;margin:26px 0 34px;padding:0;display:grid;gap:13px;max-width:46ch}
.checks li{display:flex;gap:13px;font-size:17.5px;line-height:1.55}
.tick{flex:none;width:23px;height:23px;margin-top:4px;border-radius:999px;
  background:rgba(200,149,43,.16);border:1px solid rgba(200,149,43,.42);
  color:var(--gold-light);font-size:12px;font-weight:700;display:grid;place-items:center}
/* OVERLAP 1: the crest crosses down into the figures strip */
.hero-crest{position:relative;align-self:end;justify-self:end;z-index:4;
  display:flex;justify-content:flex-end}
.hero-crest img{width:clamp(200px,25vw,360px);height:auto;
  margin-bottom:clamp(-110px,-8vw,-60px);
  filter:drop-shadow(0 34px 70px rgba(0,0,0,.62))}

/* ============ 2. FIGURES STRIP ============ */
.figs{position:relative;z-index:1;border-top:1px solid var(--line);
  background:
    radial-gradient(52% 150% at 27% 52%, rgba(40,150,92,.60) 0%, rgba(24,104,64,.30) 42%, transparent 74%),
    var(--plum)}
.figs-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,3.4fr);
  padding-block:clamp(46px,6vw,74px)}
.fig{padding-inline:clamp(12px,1.4vw,20px);border-left:1px solid var(--line);min-width:0}
.fig:first-child{border-left:0;padding-left:0}
.fig b{display:block;font-family:var(--display);font-size:clamp(28px,3.1vw,41px);font-weight:400;
  line-height:1;letter-spacing:-1px;color:var(--gold);margin-bottom:8px;font-variant-numeric:tabular-nums;
  white-space:nowrap}
/* set in caps, so it takes tracking like the page's other uppercase labels */
.fig span{font-size:14px;color:var(--muted);line-height:1.45;
  text-transform:uppercase;letter-spacing:.1em}

/* ============ light sections ============ */
.light{background:var(--paper);color:var(--ink-text);position:relative}
.light--alt{background:var(--parchment)}
.light .lede,.light p{color:var(--body-light)}
.light h2,.light h3{color:var(--ink-text)}
.sec{padding-block:clamp(70px,8.5vw,120px);position:relative}


/* 3. LEAD PANEL, sticky-stacked bands
   Ported from the services-showcase component. Cards pin at 7rem and each one
   scales down as the next arrives: 0.05 per card behind the front, scrubbed on
   scroll. Desktop only (>=1025px), per the source. */
/* the heading pins first, so the scroll settles just above it and the cards
   then stack underneath rather than sliding past it */
.stack-head{position:relative;z-index:6;background:var(--paper);
  padding-bottom:22px;margin-bottom:-22px}
@media (min-width:360px){
  .stack-head{position:sticky;top:var(--hdr-offset,96px)}
}
.threeway{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%;margin-top:44px}
.threeway.is-stacking{gap:60vh}
.opt{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,64px);align-items:start;
  width:100%;padding:clamp(28px,3.4vw,52px);
  border:1px solid var(--line-dark);border-radius:var(--r-card);background:var(--parchment)}
.opt-n{font-family:var(--display);font-size:clamp(44px,5.4vw,76px);line-height:.9;
  letter-spacing:-2px;color:var(--gold-deep);opacity:.55;margin:0;font-variant-numeric:tabular-nums}
.opt-body{min-width:0}
.opt-k{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 10px}
.opt h3{margin-bottom:12px}
.opt p{font-size:17.5px;line-height:1.65;margin:0;max-width:60ch;color:var(--body-light)}
.opt ul{margin:0;padding-left:20px;display:grid;gap:10px}
.opt li{font-size:17px;line-height:1.55;color:var(--body-light)}
/* Option two runs inverted, and grey rather than gold: darker than the option
   above it, with no accent colour of its own. The gold belongs to the option
   that wins the comparison, so this one has none. */
.opt--invert{background:#252B28;border-color:rgba(213,203,185,.16);color:var(--text)}
.opt--invert .opt-n{color:rgba(213,203,185,.38);opacity:1}
.opt--invert .opt-k{color:rgba(213,203,185,.62)}
.opt--invert h3{color:var(--paper)}
.opt--invert p,.opt--invert li{color:rgba(213,203,185,.78)}
/* the winning option inverts, so the stack lands on the dark card */
/* a fixed purple light on the left, so the copy sits in it rather than on flat plum */
/* the winning option carries a lighter plum than the panels elsewhere, so it
   lifts off the paper instead of receding into it */
.opt--us{background:
    radial-gradient(52% 116% at 7% 48%, rgba(120,230,165,.38) 0%,
      rgba(42,160,98,.26) 42%, rgba(42,160,98,.09) 66%, transparent 80%),
    linear-gradient(160deg,#1C6A43 0%,#0B2A1A 100%);
  border-color:var(--gold);color:var(--text);
  box-shadow:0 30px 70px rgba(11,31,20,.3)}
.opt--us .opt-n{color:var(--gold);opacity:.85}
.opt--us .opt-k{color:var(--gold-light)}
.opt--us h3{color:var(--text)}
.opt--us p,.opt--us li{color:var(--cream)}
@media (max-width:1024px){.threeway.is-stacking{gap:40vh}}
/* a phone kept the flat 2rem gap, which left the sequence no scroll to run
   through — it needs the same room the tablet gets, just less of it */
@media (max-width:599px){.threeway.is-stacking{gap:28vh}}

/* 4. TESTIMONIALS */
.marquee{overflow:hidden;margin:36px 0 44px;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:36px;width:max-content;animation:slide 46s linear infinite}
.marquee span{display:flex;align-items:center;gap:9px;font-size:15.5px;color:var(--body-light);white-space:nowrap}
.stars{font-size:15px;letter-spacing:2px;
  background:linear-gradient(180deg,#FFE9A8 0%,#EFC65C 40%,#D4A33C 70%,#A87E22 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 1px rgba(120,88,16,.28))}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.quotes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(16px,2vw,24px)}
.q{background:var(--paper);border:1px solid var(--line-dark);border-radius:var(--r-card);padding:26px;
  display:flex;flex-direction:column;gap:14px}
.q blockquote{font-family:var(--display);font-size:19px;line-height:1.5;margin:0;color:var(--ink-text)}
/* each card is a link out to that person's own Google review */
a.q{text-decoration:none;color:inherit;cursor:pointer}
a.q:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.q cite{font-style:normal;font-size:14.5px;color:var(--body-light);letter-spacing:.2px}

.review-links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:36px}
.sec--mid .review-links{align-items:center}
.review-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--display);font-size:18px;letter-spacing:.2px;color:var(--gold-deep);
  border-bottom:1px solid rgba(153,103,21,.35);padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease}
.review-link:hover{color:#7C5310;border-color:var(--gold-deep)}
.review-link:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
.review-link--fb{color:#8A5C12}
/* the mark keeps Facebook blue while the wordmark stays in the page's gold.
   CSS beats the svg's fill="currentColor" presentation attribute. */
.review-link--fb svg{fill:#1877F2}

/* 5. REASONS, asymmetric bento */
.dark{background:var(--ink);position:relative}
.dark--plum{background:var(--plum)}
/* advisors: a light of its own, parked bottom left and never moving */
/* the band forces its sections transparent; the id outranks that so this one
   can carry its own ground, fading out of the black above into dark purple */
/* The band forces its sections transparent so one glow can run through both.
   This section outranks that: it carries its own ground, ramping straight down
   from the black above into dark purple, and its own light on top of it. */
/* The ramp is anchored HERE, not on the band: the band's height swings with
   viewport and wrapping, so percentage stops on it drift. 0 is this section's
   top edge — already 120px below the trust line above — and the headline sits
   120px in, so the purple has arrived by the time it is read. The first stop is
   fully transparent, so the seam has nothing to draw a line with. */
#before-after{position:relative;background:transparent}
#before-after > .wrap{position:relative;z-index:1}
.bento{display:grid;grid-template-columns:1.25fr 1fr 1fr;grid-template-rows:auto auto;
  gap:clamp(14px,1.8vw,22px);margin-top:46px}
.cell{border:1px solid rgba(212,163,60,.45);border-radius:var(--r-card);padding:clamp(24px,2.6vw,34px);
  background:rgba(213,203,185,.035);position:relative;overflow:hidden}
.cell:nth-child(1){grid-row:span 2;
  background:linear-gradient(160deg,rgba(22,86,54,.46) 0%,rgba(6,17,11,.14) 100%)}
.cell:nth-child(4){grid-column:span 2;
  background:linear-gradient(100deg,rgba(153,103,21,.20),rgba(6,17,11,.2))}
.cell-n{font-family:var(--display);font-size:15px;color:var(--gold);letter-spacing:1px;margin:0 0 14px}
.cell h3{color:var(--gold)}
.cell p{font-size:16.5px;line-height:1.62;color:var(--cream);margin:12px 0 0}

/* 6. ADVISORS, horizontal scroll */
.rail{display:flex;gap:clamp(14px,1.8vw,22px);overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  padding:6px 0 22px;margin-top:44px;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.ph{background:
  repeating-linear-gradient(45deg,rgba(213,203,185,.05) 0 10px,rgba(213,203,185,.02) 10px 20px);
  display:grid;place-items:center;color:var(--muted);font-size:13.5px;letter-spacing:1px;text-align:center;padding:16px}
.card-adv .body{padding:22px;position:relative;
  background:radial-gradient(155% 155% at 0% 100%,
    rgba(95,213,151,.36) 0%,
    rgba(31,138,82,.18) 42%,
    rgba(31,138,82,.05) 64%,
    transparent 80%)}
.card-adv h3{font-size:22px;margin-bottom:4px;color:var(--gold)}
.role{font-size:14px;color:var(--text);margin:0;line-height:1.45}
@media (min-width:900px){
  .card-adv h3{font-size:26px;margin-bottom:6px}
  .card-adv .role{font-size:16px}
}


/* 8. HOW IT WORKS, stacking steps */
.steps{display:grid;gap:clamp(16px,2vw,24px);margin-top:46px}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:start;
  border-top:1px solid var(--line-dark);padding-top:clamp(24px,3vw,38px)}
.step-n{font-family:var(--display);font-size:clamp(42px,5vw,66px);line-height:.9;color:var(--gold-deep);
  opacity:.5;font-variant-numeric:tabular-nums}
.step h3{margin-bottom:10px}
.step p{font-size:17.5px;line-height:1.68;max-width:62ch;margin:0}

/* 9. FEATURED QUOTE, royal */
.royal{background:var(--royal);position:relative;overflow:hidden}
.royal::before{content:"";position:absolute;right:-8%;top:-30%;width:620px;height:620px;
  border-radius:50%;background:radial-gradient(circle,rgba(200,149,43,.18),transparent 66%);pointer-events:none}
.royal-in{position:relative;padding-block:clamp(80px,10vw,140px);max-width:960px}
.royal blockquote{font-family:var(--display);font-size:clamp(28px,3.8vw,50px);line-height:1.25;
  letter-spacing:-.8px;color:var(--text);margin:0 0 28px}
.royal cite{font-style:normal;font-size:17px;color:var(--gold-light);letter-spacing:.4px}

/* 10. BENEFITS, staggered */
.benes{display:grid;gap:clamp(18px,2.4vw,30px);margin-top:46px}
.bene{display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start;
  max-width:64ch;padding:clamp(18px,2vw,26px);border-radius:var(--r-card);
  border:1px solid var(--line-dark);background:var(--paper)}
.bene:nth-of-type(even){margin-left:auto;background:transparent;border-color:transparent}
.bene .ico{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  background:rgba(153,103,21,.12);color:var(--gold-deep);font-size:22px}
/* the card is always paper, so it must not inherit a dark section's light
   text — this block is reused on both grounds */
.bene h3{font-size:21px;margin-bottom:6px;color:var(--ink-text)}
.bene p{font-size:16.5px;line-height:1.62;margin:0;color:var(--body-light)}

/* 11. FAQ */
.faq{margin-top:42px;max-width:900px}
details{border-bottom:1px solid var(--line-dark);padding:6px 0}
summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-family:var(--display);font-size:clamp(19px,1.7vw,23px);line-height:1.35;color:var(--ink-text)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  color:var(--gold-deep);font-size:26px;font-family:var(--sans);font-weight:300;transition:transform .2s}
details[open] summary::after{content:"\2212"}
summary:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:4px}
details p{font-size:17px;line-height:1.7;margin:0 0 22px;max-width:66ch;color:var(--body-light)}

/* 12. FINAL CTA */
.final{background:#000;position:relative;overflow:hidden}
.final-in{position:relative;padding-block:clamp(74px,9vw,120px)}
/* The closing section reads white, and the gold arrives WITH the reveal: each
   line fades in white, then settles to the same gold as the headline em.
   These target the inner span / em rather than the .rev element itself, so the
   colour transition stays independent of the reveal's own opacity transition
   (setting `transition` on the li would clobber the .rev-g fade). */
.cal-face h3 em{color:var(--paper);transition:color .55s ease .34s}
.final-grid.in .cal-face h3 em{color:var(--gold)}
/* the promises read white; only the ticks carry gold */
.cal-face .checks li{color:var(--paper);transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){
  .cal-face h3 em,.cal-face .checks li{transition:none}
}
.final-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);align-items:center;margin-top:44px}
/* OVERLAP 5: crest crossing the final seam */
.final-crest{position:absolute;right:clamp(-40px,-2vw,0px);bottom:-70px;width:clamp(160px,18vw,260px);
  opacity:.9;pointer-events:none;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}

/* 13. FOOTER */
.ft{background:var(--ink);border-top:1px solid var(--line);position:relative;z-index:2}
.ft-in{padding-block:clamp(48px,6vw,72px) 30px;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px)}
.ft h4{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold);margin:0 0 16px;font-family:var(--sans)}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ft a{color:var(--cream);text-decoration:none;font-size:16px;opacity:.82;
  display:inline-block;transition:opacity .18s,color .18s,transform .28s cubic-bezier(.16,1,.3,1)}
.ft a:hover{opacity:1;color:#B8862A}
.ft-note{font-size:14.5px;color:var(--muted);line-height:1.65;margin:16px 0 0;max-width:44ch}
/* A rule that draws itself left to right under the label. Desktop and up only:
   on phones the nav is a stacked panel where a sweeping underline reads as
   noise rather than refinement. currentColor means it arrives with the colour. */
@media (min-width:900px){
  .nav-links a,.ft a{position:relative}
  .nav-links a::after,.ft a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;
    height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;
    transition:transform .34s cubic-bezier(.16,1,.3,1)}
  .nav-links a:hover::after,.nav-links a:focus-visible::after,
  .ft a:hover::after,.ft a:focus-visible::after{transform:scaleX(1)}
}
.socials{display:flex;gap:10px;margin-top:22px}
/* no box: the marks stand on their own. The 42px stays as an invisible hit
   area so they remain a comfortable tap target on phones. */
.social{display:grid;place-items:center;width:42px;height:42px;
  color:var(--cream);background:none;border:0;
  transition:color .2s ease,transform .28s cubic-bezier(.16,1,.3,1)}
.social:hover{color:var(--gold);transform:translateY(-3px) scale(1.08)}
.social:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.ft-bottom{border-top:1px solid var(--line);padding-block:24px;display:flex;gap:20px;
  flex-wrap:wrap;justify-content:center;font-size:14.5px;color:var(--muted)}


/* ---------- responsive ---------- */
@media (max-width:1080px){
  .bento{grid-template-columns:1fr 1fr}
  .cell:nth-child(1){grid-row:auto}
  .cell:nth-child(4){grid-column:span 2}
  .threeway{grid-template-columns:1fr}
  .final-grid{grid-template-columns:1fr}
}
/* The burger and the centred desktop nav both used to be live between 992 and
   1024, because one keyed off 1024 and the other off 992. They meet at 992
   now, so exactly one of them is ever showing. */
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;align-items:start}
  /* below the desktop layout the crest has no column of its own, so it drops
     out rather than sitting under the copy competing with the CTA */
  .hero-crest{display:none}
  /* the hero centres once it is a single column */
  /* four times the gap under the CTA now the crest is gone from this side */
  .hero-copy{text-align:center;padding-bottom:clamp(96px,14vw,176px)}
  .hero-copy .lede{margin-inline:auto}
  /* the tick list is centred as a block but stays left-read inside itself, so
     every checkmark lines up on the same edge */
  .hero-copy .checks{margin-inline:auto;text-align:left;justify-items:start}
  .figs-in{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .fig:nth-child(3){border-left:0;padding-left:0}
  .ft-in{grid-template-columns:1fr 1fr}
  .bene:nth-of-type(even){margin-left:0}
}
@media (max-width:560px){
  /* the panel drops its frame and lends its colours to the whole section, so
     the close reads as one continuous block rather than a card on a ground */
  .final{background:linear-gradient(165deg,#11402A 0%,#06110B 100%)}
  body{font-size:17px}
  .hdr .brand span{display:none}
  :root{--hdr-h:64px}
  .hdr-in{gap:10px}
  .brand img{width:32px;height:32px}
  .hdr .btn{font-size:12px;letter-spacing:1.4px;padding:10px 14px;border-radius:9px}
  .burger{width:40px;height:40px;margin-left:0}
  .figs-in{grid-template-columns:1fr;gap:0;text-align:center}
  .fig{border-left:0;padding:20px 0}
  .fig + .fig{border-top:1px solid rgba(213,203,185,.18)}
  .fig:first-child{padding-top:0}
  .fig:last-child{padding-bottom:0}
  .sm-hide{display:none}
  .bento{grid-template-columns:1fr}
  .cell:nth-child(4){grid-column:auto}
  .btn--lg{width:100%}
  .step{grid-template-columns:1fr;gap:10px}
  .ft-in{grid-template-columns:1fr}
}

/* ---------- testimonial cards: google attribution + hover ---------- */
.q{position:relative;padding-bottom:58px;border-color:rgba(212,163,60,.45)}
.q .src{position:absolute;right:20px;bottom:18px;display:flex;align-items:center;gap:7px;
  font-size:12.5px;color:#7C6F66;letter-spacing:.2px}
.q .src svg{flex:none}
.q .meta{font-size:13px;color:#8A7D74;margin:-2px 0 0}
.q .qstars{font-size:19px;letter-spacing:3px;margin:-4px 0 0;line-height:1;
  background:linear-gradient(180deg,#FFE9A8 0%,#EFC65C 40%,#D4A33C 70%,#B8862A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;width:max-content;
  filter:drop-shadow(0 1px 0 rgba(255,242,206,.5)) drop-shadow(0 2px 7px rgba(212,163,60,.5))}

/* ---------- how it works: drawn timeline ---------- */
.tl{position:relative;margin-top:56px;padding-left:clamp(52px,7vw,92px)}
.tl::before{content:"";position:absolute;left:clamp(19px,2.6vw,34px);top:8px;bottom:8px;width:2px;
  background:rgba(153,103,21,.18);border-radius:2px}
/* The line grows by scaling, not by changing height: this runs on every scroll
   frame, and animating height would relayout on each one. --draw is a 0-1
   fraction written by the scroll loop. */
.tl::after{content:"";position:absolute;left:clamp(19px,2.6vw,34px);top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));
  border-radius:2px;transform-origin:top center;transform:scaleY(var(--draw,0));
  transition:transform .1s linear;will-change:transform}
.tl-step{position:relative;padding-bottom:clamp(38px,5vw,62px)}
.tl-step:last-child{padding-bottom:0}
.tl-dot{position:absolute;z-index:2;left:calc(clamp(19px,2.6vw,34px) - clamp(52px,7vw,92px) - 17px);top:4px;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper);border:2px solid rgba(153,103,21,.28);
  font-family:var(--display);font-size:18px;color:var(--gold-deep);
  transition:border-color .4s,background .4s,color .4s,transform .4s}
.tl-step.lit .tl-dot{border-color:var(--gold);background:var(--gold);color:#1A1206;transform:scale(1.08)}
.tl-card{background:var(--paper);border:1px solid var(--line-dark);border-radius:var(--r-card);
  padding:clamp(24px,3vw,34px);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.tl-step.lit .tl-card{transform:scale(1.022);border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(212,163,60,.45),0 18px 46px rgba(212,163,60,.24)}
.tl-card h3{margin-bottom:10px}
.tl-card p{font-size:17.5px;line-height:1.68;margin:0;max-width:60ch;
  /* the card is always paper, so it must not inherit a dark section's
     light text — the timeline is reused on both grounds */
  color:var(--body-light)}

/* ---------- featured quote: give it presence ---------- */
.royal{background:radial-gradient(120% 90% at 78% 12%,#1C6A43 0%,#0F3D27 42%,#082517 100%)}
.royal::before{content:"";position:absolute;right:-6%;top:-24%;width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,149,43,.22),transparent 62%);pointer-events:none}
.royal-crest{position:absolute;right:2%;bottom:-14%;width:clamp(240px,32vw,440px);opacity:.14;
  pointer-events:none;filter:grayscale(.2)}
.royal-mark{font-family:var(--display);font-size:clamp(120px,17vw,230px);line-height:.7;
  color:var(--gold);opacity:.3;display:block;margin-bottom:-.28em;user-select:none}
.royal-in{max-width:900px}
.royal blockquote{position:relative}
.royal-rule{width:64px;height:2px;background:var(--gold);margin:0 0 22px;border:0}

/* ---------- benefits: connected, with visual grounds ---------- */
.benes{position:relative;padding-left:clamp(0px,4vw,54px)}
.bene{position:relative;overflow:hidden;background:var(--paper);
  border:1px solid var(--line-dark);margin-left:0;max-width:none;
  grid-template-columns:64px 1fr;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.bene:nth-of-type(even){background:var(--paper);border-color:var(--line-dark);margin-left:clamp(0px,6vw,80px)}
.bene:nth-of-type(odd){margin-right:clamp(0px,6vw,80px)}
.bene::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5}
.bene:nth-of-type(1)::before{background:radial-gradient(70% 120% at 96% 0%,rgba(200,149,43,.16),transparent 62%)}
.bene:nth-of-type(2)::before{background:radial-gradient(70% 120% at 4% 100%,rgba(15,61,39,.12),transparent 62%)}
.bene:nth-of-type(3)::before{background:linear-gradient(100deg,transparent 55%,rgba(200,149,43,.13))}
.bene:nth-of-type(4)::before{background:radial-gradient(60% 130% at 90% 100%,rgba(15,61,39,.13),transparent 60%)}
.bene > *{position:relative;z-index:1}
.bene .ico{width:64px;height:64px;border-radius:14px;font-size:24px;
  background:linear-gradient(150deg,rgba(200,149,43,.22),rgba(15,61,39,.1));color:var(--gold-deep)}
/* the connector that ties the five points together */
.bene-link{position:absolute;left:clamp(30px,4vw,58px);top:34px;bottom:34px;width:2px;background:rgba(153,103,21,.2);z-index:0}
.bene-link i{position:absolute;inset:0;display:block;
  background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));
  transform-origin:top center;transform:scaleY(var(--draw,0));
  transition:transform .1s linear;will-change:transform}

/* ---------- final CTA: two columns again, calendar restored ---------- */
/* one panel carries the whole close: who, the offer, the calendar, then what
   happens next */
.final-grid{display:grid;grid-template-columns:1fr}
.final-cal{position:relative}
.cal-shell{position:relative;border:2px solid rgba(212,163,60,.5);
  border-radius:var(--r-card);overflow:hidden;box-shadow:0 34px 80px rgba(0,0,0,.55)}
/* The calendar sits inside the panel, directly beneath the ticks. The frame
   itself is transparent: it was white, and the widget does not paint its own
   top edge, so a white band showed above the calendar on every load. */
.cal-frame,.cal-stub{display:block;width:100%;max-width:860px;height:680px;border:0;
  border-radius:12px;background:transparent;margin:6px auto 0;
  box-shadow:0 20px 50px rgba(0,0,0,.45)}
.cal-frame-slot{width:100%}
/* stand-in while previewing off the live domain, same box as the real widget
   so the layout you review is the layout that ships */
.cal-stub{background:rgba(6,17,11,.4);border:1px dashed rgba(212,163,60,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:40px 26px;text-align:center;box-shadow:none}
.cal-stub b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--gold-light)}
.cal-stub p{margin:0;max-width:46ch;font-size:14.5px;color:var(--muted);line-height:1.55}
.cal-stub a{color:var(--gold);font-size:14px;text-decoration:none;display:inline-block;
  border-bottom:1px solid rgba(212,163,60,.45);padding-bottom:1px;
  transition:color .2s,border-color .2s,transform .28s cubic-bezier(.16,1,.3,1)}
.cal-stub a:hover{color:var(--gold-deep);border-color:var(--gold);transform:translateY(-2px)}
.cal-face{display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;gap:0;
  padding:clamp(48px,5vw,72px) clamp(26px,4vw,64px);
  background:linear-gradient(165deg,#11402A 0%,#06110B 100%)}
.cal-face > *{max-width:820px;width:100%}
.cal-face h3{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(27px,2.9vw,44px);line-height:1.12;color:var(--paper);letter-spacing:-.8px}
.cal-face h3 em{font-style:italic;color:var(--gold)}
.cal-face-l{margin:18px auto 0;font-size:clamp(16px,1.3vw,18.5px);color:var(--cream);max-width:52ch}
/* bullets stay left-read inside the centred column, so they scan as a list */
.cal-face .checks{margin:30px auto 32px;max-width:min(100%,620px);text-align:left}
.cal-face .checks li{font-size:15.5px}
.cal-who{display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,1.6vw,22px);margin-bottom:clamp(26px,3vw,38px);text-align:left}
.cal-who img{width:clamp(96px,9vw,128px);height:clamp(96px,9vw,128px);border-radius:50%;
  object-fit:cover;object-position:30% 18%;flex:none;
  border:2px solid rgba(200,149,43,.55);box-shadow:0 14px 34px rgba(0,0,0,.45)}
.cal-who b{display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(22px,1.9vw,27px);color:var(--gold);line-height:1.2}
/* the credential is the reason to trust the call, so it carries weight */
.cal-who span{display:inline-block;margin-top:7px;font-size:clamp(13px,1.05vw,14.5px);
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-light)}
@media (min-width:900px){
  /* double size on desktop, where there is room for him to carry the panel */
  .cal-who img{width:248px;height:248px;border-width:3px}
  .cal-who{gap:32px}
  .cal-who b{font-size:34px}
  .cal-who span{font-size:15px;margin-top:10px}
}
/* the process block centres: label centred, and the numbered steps sit as a
   centred column that stays left-read so all three numbers share one edge */
.cal-face .next{margin:clamp(34px,4vw,52px) auto 0;max-width:860px;width:100%;
  text-align:center}
.cal-face .next-list{max-width:min(100%,560px);margin-inline:auto;margin-bottom:0;
  text-align:left}
.cal-face-s{margin:18px 0 0;font-size:13.5px;color:var(--muted);text-align:center}
.cal-face-s a{color:var(--gold);text-decoration:none;display:inline-block;
  border-bottom:1px solid rgba(212,163,60,.35);
  transition:color .2s,border-color .2s,transform .28s cubic-bezier(.16,1,.3,1)}
.cal-face-s a:hover{color:var(--gold-deep);border-color:var(--gold);transform:translateY(-2px)}
/* Phones: the panel drops its frame and lends its colours to the section, so
   the close reads as one continuous block rather than a card on a ground.
   This has to sit AFTER the base .cal-shell / .cal-face rules above — at equal
   specificity the later declaration wins, and declaring it earlier (as it was)
   left the gold outline showing on mobile. */
@media (max-width:560px){
  .final{background:linear-gradient(165deg,#11402A 0%,#06110B 100%)}
  .cal-shell{border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
  .cal-face{background:transparent;padding-left:0;padding-right:0}
}
.cal-note{font-size:14px;color:var(--muted);margin:14px 0 0;text-align:center}
@media (max-width:900px){
  .final-grid{grid-template-columns:1fr}
  .cal-frame,.cal-stub{height:640px}
}

/* headings: alternate left rail with centred sections so the page has rhythm */
.sec--mid{text-align:center}
.sec--mid > .wrap > h2,.sec--mid > .wrap > .lede{margin-inline:auto}
.sec--mid .quotes,.sec--mid .benes,.sec--mid .faq,.sec--mid .tl,.sec--mid .bento{text-align:left}
.sec--mid .marquee{text-align:left}

/* sticky header must not cover an anchored section */
[id]{scroll-margin-top:var(--hdr-h)}

.next{border:2px solid rgba(212,163,60,.45);border-radius:var(--r-card);padding:clamp(26px,3vw,38px);
  background:linear-gradient(155deg,rgba(15,61,39,.55),rgba(6,17,11,.35))}
.next-k{font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold);margin:0 0 22px}
.next-list{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:20px}
.next-list li{display:grid;grid-template-columns:36px 1fr;gap:16px;align-items:start}
.next-list span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(200,149,43,.45);background:rgba(200,149,43,.12);
  color:var(--gold-light);font-family:var(--display);font-size:17px}
.next-list b{display:block;font-size:17.5px;color:var(--text);margin-bottom:3px;font-weight:600}
.next-list p{font-size:15.5px;line-height:1.55;color:var(--cream);opacity:.82;margin:0}

/* ---------- shared box hover ----------
   Gold outline, a shadow tinted the same gold, and a lift. Applied to every
   card family so the page behaves consistently under the cursor. */
.quotes .q,
.bento .cell,
.rail .card-adv,
.tl .tl-card,
.benes .bene{
  transition:transform .34s cubic-bezier(.16,1,.3,1),
             border-color .3s ease,
             box-shadow .3s ease,
             opacity .58s cubic-bezier(.16,1,.3,1)}
.quotes .q:hover,
.bento .cell:hover,
.rail .card-adv:hover,
.tl .tl-card:hover,
.benes .bene.lit,
.benes .bene:hover{
  transform:scale(1.022);
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(212,163,60,.45),
             0 18px 46px rgba(212,163,60,.24)}
/* a hovered box sits above its neighbours while it is scaled up */
.quotes .q:hover,.bento .cell:hover,.benes .bene:hover,.tl .tl-card:hover{position:relative;z-index:3}
.rail .card-adv:hover{z-index:3}
/* the rail clips, so give the scaled card room to breathe */
.rail{padding:12px 16px 26px;margin-inline:-16px;scroll-padding-inline:16px}

.rail.is-swiping .card-adv,
.rail.is-swiping .card-adv .img{transition:none}
.rail.is-swiping .card-adv:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* ---------- FAQ question titles ---------- */
.faq summary{transform-origin:left center;
  transition:transform .3s cubic-bezier(.16,1,.3,1),color .25s ease}
.faq details:hover > summary{transform:scale(1.035);color:var(--gold-deep)}
.faq details{transition:border-color .3s ease}
.faq details:hover{border-bottom-color:rgba(212,163,60,.5)}
/* questions light themselves as they arrive and stay lit; scrolling back up
   drops them again, the same rule the timeline steps use */
.faq details.lit > summary{transform:scale(1.035);color:var(--gold-deep)}
.faq details.lit{border-bottom-color:rgba(212,163,60,.5)}
/* ---------- FAQ centred on the page ---------- */
/* .sec--mid forces .faq back to text-align:left, so these have to outrank it */
.sec--mid .faq{margin-inline:auto}
.sec--mid .faq summary{text-align:center;padding-inline:40px}
.sec--mid .faq summary{transform-origin:center center}
.sec--mid .faq details > p{max-width:62ch;margin-inline:auto}

/* ---------- advisor image boxes ----------
   Ported from the team-carousel component. GSAP is not loaded here, so the
   parallax is reproduced with CSS transitions driven by an observer. Every
   value is the source's: wrapper yPercent -110 to 0, image yPercent 110 to 0
   with scale 1.5 to 1 and blur 10px to 0, over 1.7s on outQuart
   (GSAP power3.out) = cubic-bezier(.165,.84,.44,1), fired once at top 85%. */
.card-adv{display:block;color:inherit;flex:0 0 clamp(250px,25vw,300px);scroll-snap-align:start;
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(340deg,rgba(22,86,54,.46) 0%,rgba(6,17,11,.14) 100%);text-decoration:none;
  transition:border-color .3s,box-shadow .3s}
.card-adv:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.adv-image{position:relative;padding-top:112%;overflow:clip}
.adv-image .img-wrapper{position:absolute;inset:0;overflow:clip}
.adv-image .img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* per-advisor crop bias: some subjects are not centred in their own frame */
.card-adv[data-focus="left"] .img{object-position:28% 20%}
.card-adv[data-focus="left"] .adv-image.is-done .img{transform-origin:0% center}

@media (prefers-reduced-motion:no-preference){
  .adv-image .img-wrapper{transform:translateY(-110%);
    transition:transform 1.7s cubic-bezier(.165,.84,.44,1)}
  .adv-image .img{transform:translateY(110%) scale(1.5);filter:blur(10px);
    transition:transform 1.7s cubic-bezier(.165,.84,.44,1),filter 1.7s cubic-bezier(.165,.84,.44,1)}
  .adv-image.is-in .img-wrapper{transform:translateY(0)}
  .adv-image.is-in .img{transform:translateY(0) scale(1);filter:blur(0)}
  .adv-image.is-done .img{filter:none;will-change:auto}
}
/* once the reveal has landed, hand the image over to the hover transition */
@media (min-width:992px){
  .adv-image.is-done .img{transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
  .card-adv:hover .adv-image.is-done .img{transform:scale(1.05)}
}

.glow-band{position:relative;overflow:hidden;
  background:linear-gradient(180deg,
    var(--ink) 0,
    var(--ink) var(--adv-top,100%),
    #0C2418 calc(var(--adv-top,100%) + 92px),
    #0F2E1F calc(var(--adv-top,100%) + 220px),
    #113826 calc(var(--adv-top,100%) + 520px),
    #133F2A 100%)}
.glow-band > section{position:relative;z-index:2;background:transparent;overflow:visible}

/* ---------- cursor glow ----------
   Circle r=244 (488px) with a radial ramp, blurred at stdDeviation 94.05.
   CSS blur() takes the same standard deviation, so this is the native
   equivalent and stays sharp at any scale. translate3d keeps the follow on
   the compositor; the -50% centres the disc on the cursor point. */
.glow{position:absolute;top:0;left:0;z-index:0;width:30.5em;height:30.5em;border-radius:50%;
  background-image:radial-gradient(circle closest-side,
    var(--glow-core) 14.9038%, var(--glow-edge) 100%);
  filter:blur(5.878em);opacity:0;transition:opacity .45s ease;
  transform:translate3d(var(--glow-x,50%),var(--glow-y,40%),0) translate(-50%,-50%);
  pointer-events:none;will-change:transform}
.glow.is-on{opacity:.62}
/* The light exists to follow the cursor. A phone and a tablet have no cursor
   for it to follow, so all it ever was on those was a static purple wash sat
   behind the copy. Keyed off the input rather than the width, so a desktop
   window narrowed to tablet size keeps it and an iPad held in landscape does
   not. */
/* Two kinds of light live on this site, and only one of them is a cursor
   effect. A parked light — data-glow-fixed — is composition: it sits behind a
   hero headline or a closing panel and never moves, and it belongs on a phone
   exactly as much as on a desktop. A light without it follows the pointer, and
   on a touch screen there is no pointer for it to follow, so all it ever was
   there is a purple wash sitting behind the copy. Only that second kind goes. */
@media (hover:none),(pointer:coarse){
  [data-glow]:not([data-glow-fixed]) .glow{display:none}
}
/* the hero light is the page's opening statement, so it runs larger and is
   lit before the cursor ever arrives */
.hero .glow,.final .glow{width:44em;height:44em;filter:blur(8.2em)}
.hero .glow.is-on,.final .glow.is-on{opacity:.72}
@media (max-width:991px){.hero .glow,.final .glow{width:26em;height:26em;filter:blur(5em)}}
/* every glow section clips its own disc and keeps content above it */
[data-glow]{overflow:hidden}
[data-glow] > .wrap{position:relative;z-index:2}
/* the hero also carries a photo + scrim under the glow, so its copy needs to
   outrank the generic glow-zone rule above rather than tie with it */
.hero > .wrap.hero-in{z-index:3}
@media (max-width:991px){.glow{width:20em;height:20em;filter:blur(3.85em)}
  .glow.is-on{opacity:.5}}
@media (max-width:767px){.glow{width:15em;height:15em;filter:blur(2.9em)}
  .glow.is-on{opacity:.45}}

/* ---------- hero entrance on load ---------- */
/* The hero paints above the fold, so it does not use the scroll reveal system.
   Copy slides in from the left; the crest fades up in scale to meet it. */
@keyframes heroCopyIn{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:none}}
@keyframes heroCrestIn{from{opacity:0;transform:scale(.68)}to{opacity:1;transform:none}}
.hero-copy > *{animation:heroCopyIn .78s cubic-bezier(.16,1,.3,1) both}
.hero-copy > *:nth-child(1){animation-delay:.06s}
.hero-copy > *:nth-child(2){animation-delay:.15s}
.hero-copy > *:nth-child(3){animation-delay:.24s}
.hero-copy > *:nth-child(4){animation-delay:.33s}
.hero-copy > *:nth-child(5){animation-delay:.42s}
.hero-copy > *:nth-child(n+6){animation-delay:.5s}
.hero-crest img{animation:heroCrestIn .92s cubic-bezier(.34,1.56,.64,1) .3s both}
@media (prefers-reduced-motion:reduce){
  .hero-copy > *,.hero-crest img{animation:none}
}

/* ---------- pop-up reveal on scroll ---------- */
.rev{opacity:0;transform:translateY(22px) scale(.965);
  transition:opacity .62s cubic-bezier(.16,1,.3,1),transform .62s cubic-bezier(.16,1,.3,1)}
.rev.in{opacity:1;transform:none}
.rev-g > *{opacity:0;transform:translateY(26px) scale(.955);
  transition:opacity .58s cubic-bezier(.16,1,.3,1),transform .58s cubic-bezier(.16,1,.3,1)}
.rev-g.in > *{opacity:1;transform:none}
/* the closing crest pops in when it arrives, matching the hero's */
.pop{opacity:0;transform:scale(.68);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),
             transform .82s cubic-bezier(.34,1.56,.64,1)}
.pop.in{opacity:1;transform:none}
/* each testimonial rises into place as it arrives. Kept at 2 classes so the
   hover rule (.quotes .q:hover, 3 classes) still outranks it and the card can
   still lift on hover once it has landed. */
.rev-up{opacity:0;transform:translateY(56px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),
             transform .68s cubic-bezier(.16,1,.3,1)}
.rev-up.in{opacity:1;transform:none}
.review-links .rev-up:nth-child(2){transition-delay:.1s}
/* Each benefit row slides in as IT reaches the trigger line, rather than the
   whole group firing together off the container's position.

   A row travels across the indent it already carries, and no further, so it
   never starts outside the container: odd rows are inset from the right, so
   they come in from the right; even rows sit flush to the right edge and are
   inset from the left, so they come in from the left. The distance scales
   with the viewport for the same reason the indents do. Clipping the
   container was the old fix, and it shaved the boxes and their shadows. */
.rev-right{opacity:0;transform:translateX(clamp(16px,5vw,70px));
  transition:opacity .6s cubic-bezier(.16,1,.3,1),
             transform .68s cubic-bezier(.16,1,.3,1)}
/* the mirror of .rev-right, for blocks that should arrive from the other side */
.rev-left{opacity:0;transform:translateX(calc(-1 * clamp(14px,4vw,56px)));
  transition:opacity .6s cubic-bezier(.16,1,.3,1),
             transform .68s cubic-bezier(.16,1,.3,1)}
.rev-left.in{opacity:1;transform:none}
.benes .bene:nth-of-type(even).rev-right{transform:translateX(clamp(-70px,-5vw,-16px))}
.rev-right.in,
.benes .bene:nth-of-type(even).rev-right.in{opacity:1;transform:none}
.rev-g.in > *:nth-child(1){transition-delay:0s}
.rev-g.in > *:nth-child(2){transition-delay:.07s}
.rev-g.in > *:nth-child(3){transition-delay:.14s}
.rev-g.in > *:nth-child(4){transition-delay:.21s}
.rev-g.in > *:nth-child(5){transition-delay:.28s}
.rev-g.in > *:nth-child(6){transition-delay:.35s}
.rev-g.in > *:nth-child(7){transition-delay:.42s}
.rev-g.in > *:nth-child(n+8){transition-delay:.49s}

/* The four reasons each arrive their own way, so the section reads as four
   separate claims rather than one block sliding up together: the fiduciary
   drops in from above, the system zooms up to size, the report comes in from
   the right, the verdict rises from below.

   Written as animations rather than transitions on purpose. These boxes also
   scale under the cursor, and a transition would have to own the transform
   property permanently — the entrance would then set the hover's timing, or a
   hover would cut the entrance short. An animation holds transform only while
   it runs and hands it straight back. For the same reason the resting rule is
   .rev-g > .cell and not .bento.rev-g > .cell: it has to stay below the
   hover rule's weight or the boxes stop lifting. */
.rev-g > .cell{transform:none}
.rev-g.in > .cell{animation-duration:.72s;animation-fill-mode:backwards;
  animation-timing-function:cubic-bezier(.16,1,.3,1)}
.rev-g.in > .cell:nth-child(1){animation-name:cell-down}
.rev-g.in > .cell:nth-child(2){animation-name:cell-zoom;animation-delay:.07s;
  animation-duration:.84s;animation-timing-function:cubic-bezier(.34,1.56,.64,1)}
.rev-g.in > .cell:nth-child(3){animation-name:cell-right;animation-delay:.14s}
.rev-g.in > .cell:nth-child(4){animation-name:cell-up;animation-delay:.21s}
@keyframes cell-down{from{opacity:0;transform:translateY(-72px)}to{opacity:1;transform:none}}
@keyframes cell-zoom{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes cell-right{from{opacity:0;transform:translateX(clamp(56px,8vw,120px))}
  to{opacity:1;transform:none}}
@keyframes cell-up{from{opacity:0;transform:translateY(84px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .rev,.rev-g > *{opacity:1!important;transform:none!important}
  *{transition:none!important;animation:none!important}
}
/* ============================================================================
   Page-load curtain
   Hidden by default and shown only while html.is-loading is set, so it cannot
   outlive the script that raises it.
   ========================================================================= */
.pl{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--ink);opacity:0;visibility:hidden;
  transition:opacity .5s ease,visibility 0s linear .5s}
html.is-loading .pl{opacity:1;visibility:visible;transition:none}
html.is-loading body{overflow:hidden}
.pl-in{position:relative;display:grid;place-items:center;
  width:clamp(108px,11vw,144px);aspect-ratio:1}
.pl-ring{position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(200,149,43,.16);border-top-color:var(--gold);
  animation:pl-spin 1.05s linear infinite}
.pl img{width:56%;height:auto;object-fit:contain;
  animation:pl-breathe 1.7s ease-in-out infinite}
@keyframes pl-spin{to{transform:rotate(360deg)}}
@keyframes pl-breathe{0%,100%{opacity:.5;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .pl-ring{animation:none;border-color:rgba(200,149,43,.35);border-top-color:var(--gold)}
  .pl img{animation:none;opacity:1}
}