/* The Exclusive Annuities design system. Extracted verbatim from the approved
   home comp so the built site and the comp cannot drift apart. Every page
   imports this through BaseLayout. */

/* ============================================================
   Exclusive Annuities. Full page layout comp.
   Committed dark-first world, every colour painted explicitly.
   Sections map 1:1 to future Astro components.
   ============================================================ */
:root{
  --hdr-h:74px;
  --ink:#0D0711; --plum:#1A0E22; --royal:#391548; --royal-deep:#2A0F36;
  --paper:#F7F5F3; --parchment:#EFEAE4;
  --gold-deep:#996715; --gold:#D4A33C; --gold-light:#E8CB7A; --cream:#D5CBB9;
  --text:#F2EEE9; --muted:#A3968E; --ink-text:#1A0E22; --body-light:#4A3F46;
  --line:rgba(213,203,185,.14); --line-dark:rgba(26,14,34,.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:#6D2AA0; --glow-edge:#A45CF0;
  --panel-plum:linear-gradient(160deg,#2E123A 0%,#0D0711 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(13,7,17,.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(13,7,17,.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:#4A3F46}
.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(116,46,168,.60) 0%, rgba(84,32,124,.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:#2B2831;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(186,120,255,.38) 0%,
      rgba(134,58,196,.26) 42%, rgba(134,58,196,.09) 66%, transparent 80%),
    linear-gradient(160deg,#4B1E60 0%,#26102F 100%);
  border-color:var(--gold);color:var(--text);
  box-shadow:0 30px 70px rgba(26,14,34,.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. */
#advisors{position:relative;background:transparent}
#advisors > .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(64,24,80,.46) 0%,rgba(13,7,17,.14) 100%)}
.cell:nth-child(4){grid-column:span 2;
  background:linear-gradient(100deg,rgba(153,103,21,.20),rgba(13,7,17,.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(164,92,240,.36) 0%,
    rgba(109,42,160,.18) 42%,
    rgba(109,42,160,.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:991px){
  .burger{display:flex}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;z-index:59;
    flex-direction:column;align-items:flex-end;gap:0;
    /* solid, not almost: two percent of a bright headline still ghosts
       through a menu panel and makes the words harder to read */
    background:#0D0711;backdrop-filter:blur(14px);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    /* the panel ends where the last word does — a band of dead ground under
       Contact Us read as a mistake rather than as breathing room */
    padding:10px clamp(20px,5.5vw,34px) 12px}
  .hdr.is-open .nav-links{display:flex}
  /* The words sit against the right edge, under the burger that opened them,
     and each shrinks to its own text so the underline belongs to the word
     rather than running the width of the panel. They are set in the display
     face at headline size: this is the one place the site's own voice was
     missing, and a menu in the body font reads like a menu on any site. */
  .nav-links a{position:relative;padding:11px 0;opacity:1;text-align:right;
    font-family:var(--display);font-weight:400;font-size:clamp(24px,6.4vw,30px);
    line-height:1.18;letter-spacing:-.4px;color:var(--paper)}
  .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;
    background:currentColor;transform:scaleX(0);transform-origin:left center;
    transition:transform .34s cubic-bezier(.16,1,.3,1)}
  .nav-links a:hover,.nav-links a:focus-visible,.nav-links a:active{color:var(--gold)}
  .nav-links a:hover::after,.nav-links a:focus-visible::after,
  .nav-links a:active::after{transform:scaleX(1)}
  /* they arrive one after another, so opening the menu is a moment rather
     than a block of text appearing */
  .hdr.is-open .nav-links a{animation:nav-in .46s cubic-bezier(.16,1,.3,1) backwards}
  .hdr.is-open .nav-links a:nth-child(1){animation-delay:.03s}
  .hdr.is-open .nav-links a:nth-child(2){animation-delay:.08s}
  .hdr.is-open .nav-links a:nth-child(3){animation-delay:.13s}
  .hdr.is-open .nav-links a:nth-child(4){animation-delay:.18s}
  .hdr.is-open .nav-links a:nth-child(5){animation-delay:.23s}
  @keyframes nav-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .hdr.is-open .nav-links a{animation:none}
  }
  /* the panel stays dark over a paper section, so the inverted bar's dark type
     would be unreadable inside it */
  .hdr.on-light .nav-links a{color:var(--paper)}
  .hdr.on-light .nav-links a:hover,.hdr.on-light .nav-links a:focus-visible{color:var(--gold)}
}
@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,#2E123A 0%,#0D0711 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%,#4C1D60 0%,#391548 42%,#240D2F 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(57,21,72,.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(57,21,72,.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(57,21,72,.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(13,7,17,.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,#2E123A 0%,#0D0711 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,#2E123A 0%,#0D0711 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(57,21,72,.55),rgba(13,7,17,.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(64,24,80,.46) 0%,rgba(13,7,17,.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%),
    #20112B calc(var(--adv-top,100%) + 92px),
    #281434 calc(var(--adv-top,100%) + 220px),
    #2E1740 calc(var(--adv-top,100%) + 520px),
    #331744 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 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}

@media (prefers-reduced-motion:reduce){
  .rev,.rev-g > *{opacity:1!important;transform:none!important}
  *{transition:none!important;animation:none!important}
}


/* ============================================================================
   /Advisors
   Its own device: the home page's horizontal rail, released to wrap, then a
   full profile per advisor. Tokens, type and motion are the site's; the
   structure is not reused anywhere else.
   ========================================================================= */
.adv-head{position:relative;overflow:hidden;background:var(--ink);
  border-bottom:1px solid var(--line);display:flex;align-items:center;
  /* the hero and the bar above it fill exactly one screen, so a page opens on
     the hero alone rather than on a hero and a strip of the section below */
  min-height:calc(100vh - var(--hdr-h));
  min-height:calc(100svh - var(--hdr-h))}
.adv-head-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:64% 46%}
/* Heavy where the words are, clearing toward the right so the room reads.
   A flat wash would bury the photograph rather than sit over it. */
.adv-head-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(9,5,12,.95) 0%,
    rgba(9,5,12,.88) 38%,
    rgba(9,5,12,.58) 66%,
    rgba(9,5,12,.34) 100%)}
.adv-head .glow{z-index:2}
.adv-head-in{position:relative;z-index:3;padding-block:clamp(64px,8vw,112px);max-width:46rem}
.adv-head h1{font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(34px,5vw,60px);line-height:1.07;letter-spacing:-.02em;
  color:var(--paper);text-wrap:balance}
.adv-head h1 em{font-style:italic;color:var(--gold)}
.adv-head .lede{margin:20px 0 0;max-width:52ch;color:var(--cream);
  font-size:clamp(16px,1.5vw,19px)}

/* the picker: same card as the home rail, no longer in a scroller */
.picker{background:linear-gradient(180deg,var(--ink),#150B1E);
  padding-block:clamp(34px,4vw,52px);border-bottom:1px solid var(--line)}
.pick-k{margin:0 0 22px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);font-weight:700}
.picks{display:grid;gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.pick{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;background:rgba(64,24,80,.22);
  transition:border-color .3s,box-shadow .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.pick:hover,.pick:focus-visible{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(212,163,60,.4),0 16px 38px rgba(212,163,60,.2);outline:none}
.pick-img{position:relative;padding-top:112%;overflow:hidden}
.pick-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 20%}
.pick[data-focus="left"] img{object-position:28% 18%}
.pick b{display:block;padding:13px 15px;font-family:var(--display);font-weight:400;
  font-size:17px;color:var(--gold)}

/* profiles: photo and text alternate sides, divided by a gold hairline */
.profiles{position:relative;overflow:hidden;background:#150B1E;
  padding-block:clamp(24px,3vw,40px)}
.profiles > .wrap{position:relative;z-index:2}
/* Each advisor is meant to sit in one screen, so the photo column is fixed and
   the copy runs wider than the site's usual measure — a narrow column here
   pushed the button below the fold. */
.prof{display:grid;grid-template-columns:clamp(210px,22vw,300px) minmax(0,1fr);
  gap:clamp(24px,3.4vw,48px);align-items:center;
  padding-block:clamp(30px,3.6vw,52px);border-bottom:1px solid rgba(200,149,43,.28)}
.prof:last-child{border-bottom:0}
/* Mirror by assigning columns, not by `order`: with auto-placement, order
   moved the photo into the wide 1fr track, so every even advisor's picture
   rendered at 868px instead of 300 and the block ran to double height. */
.prof:nth-child(even){grid-template-columns:minmax(0,1fr) clamp(210px,22vw,300px)}
.prof:nth-child(even) .prof-img{grid-column:2;grid-row:1}
.prof:nth-child(even) .prof-body{grid-column:1;grid-row:1}
/* Same hover as the rail cards on the home page: the picture grows a little
   and takes the gold edge. position/z-index so the grown photo sits above the
   copy beside it rather than under it. */
/* The gold edge is on at rest and triples in thickness on hover. It is the
   same line, not a brighter or fainter one: the extra weight is a box-shadow
   ring in the identical colour, sitting flush outside the border, so the two
   read as one 6px edge and the photograph inside never resizes. */
.prof-img{display:block;position:relative;z-index:1;border-radius:var(--r-card);overflow:hidden;
  border:2px solid rgba(200,149,43,.62);
  box-shadow:0 0 0 0 rgba(200,149,43,.62),0 26px 60px rgba(0,0,0,.5);
  aspect-ratio:4/5;width:100%;
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.prof-img:hover{z-index:3;transform:scale(1.035);
  box-shadow:0 0 0 4px rgba(200,149,43,.62),
             0 26px 60px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.prof-img{transition:border-color .3s,box-shadow .3s}
  .prof-img:hover{transform:none}}
.prof-img img{width:100%;height:100%;display:block;object-fit:cover;object-position:50% 18%}
/* a keyboard has to be able to reach the photograph too, and see that it has */
.prof-img:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.prof-img[data-focus="left"] img{object-position:28% 18%}
.prof h2{font-family:var(--display);font-weight:400;margin:0;
  font-size:clamp(28px,3.4vw,42px);line-height:1.1;letter-spacing:-.02em;color:var(--gold)}
.prof-title{margin:8px 0 0;font-size:clamp(14.5px,1.3vw,16.5px);color:var(--gold-light);
  font-weight:600;letter-spacing:.01em}
.prof-bio{margin:18px 0 0;color:var(--cream);max-width:88ch;line-height:1.62}

/* credentials read as awards, so they carry a mark; specialties are plain */
.creds{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 0;padding:0}
.creds li{max-width:100%;display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--gold-light);
  border:1px solid rgba(200,149,43,.45);border-radius:999px;padding:7px 14px;
  background:rgba(200,149,43,.09)}
.cred-i{font-size:11px;color:var(--gold);line-height:1}
.spec-k{margin:22px 0 11px;font-family:var(--display);font-weight:400;font-size:19px;
  color:var(--paper)}
.spec{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:0 0 22px;padding:0}
.spec li{max-width:100%;font-size:13.5px;color:var(--cream);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;background:rgba(213,203,185,.05)}

/* Tablet: stacking left a photo the width of a third of the screen with the
   whole right side empty beside it. The photo floats instead, so the name,
   credentials and the opening of the bio fill that space and the mirroring
   survives. */
@media (min-width:561px) and (max-width:860px){
  .prof,.prof:nth-child(even){display:block;grid-template-columns:none}
  .prof-img{float:left;width:clamp(210px,31vw,280px);max-width:none;
    margin:4px clamp(22px,3.2vw,30px) 20px 0}
  .prof:nth-child(even) .prof-img{float:right;
    margin:4px 0 20px clamp(22px,3.2vw,30px)}
  .prof::after{content:"";display:block;clear:both}
  .prof h2{font-size:clamp(26px,3.6vw,32px)}
  .prof-bio{margin-top:16px}
  .spec-k{margin-top:18px}
}
@media (max-width:560px){
  .prof,.prof:nth-child(even){grid-template-columns:minmax(0,1fr);gap:24px}
  .prof:nth-child(even) .prof-img,
  .prof:nth-child(even) .prof-body{grid-column:1;grid-row:auto}
}
@media (max-width:560px){
  .picks{grid-template-columns:repeat(2,1fr)}
}


/* ============================================================================
   The live calendar embed. Only an advisor's own booking page carries one.
   ========================================================================= */
/* the stand-in the renderer shows until a widget id is supplied */
.cal-frame-slot:empty::before{content:"Calendar loads here once the booking link is added";
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:420px;margin:6px auto 0;max-width:860px;padding:30px;
  border:1px dashed rgba(212,163,60,.45);border-radius:12px;
  background:rgba(13,7,17,.4);color:var(--muted);font-size:15px}

@media (max-width:767px){
  /* the hero fills the screen on a phone too — the old auto height left it a
     third of the way down with the next section already showing */
  .adv-head-bg{object-position:66% 42%}
  .adv-head-scrim{background:linear-gradient(180deg,
    rgba(9,5,12,.72) 0%,rgba(9,5,12,.86) 52%,rgba(9,5,12,.95) 100%)}
  /* ranged left, a short measure on a narrow screen leaves a ragged edge with
     nothing beside it; centred, the block reads as placed */
  .adv-head-in{text-align:center;margin-inline:auto}
  .adv-head-in .lede{margin-inline:auto}
}

/* ============================================================================
   /William-Rapp — William's booking page
   The opening screen, then the calendar, then what happens after you book.
   ========================================================================= */
.wc-hero{position:relative;overflow:hidden;background:var(--ink);
  display:grid;align-items:center;
  /* 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))}
/* The portrait is second in the markup order here but sits in the right-hand
   column, opposite the side he takes on the roster. Columns are assigned
   rather than ordered: `order` would move the portrait into the wide track and
   blow it up. */
.wc-hero-in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1.15fr) clamp(240px,26vw,360px);
  gap:clamp(30px,4vw,60px);align-items:center;padding-block:clamp(50px,6.5vw,92px)}
.wc-hero h1{margin:14px 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(32px,4.4vw,54px);line-height:1.07;letter-spacing:-.02em;color:var(--paper);
  text-wrap:balance}
.wc-hero h1 em{font-style:italic;color:var(--gold)}
.wc-hero .lede{margin:20px 0 30px;color:var(--cream);max-width:50ch;font-size:clamp(16px,1.45vw,18.5px)}
.wc-hero-in .wc-copy{grid-column:1;grid-row:1}
.wc-hero-in .wc-portrait{grid-column:2;grid-row:1}
.wc-portrait{position:relative}
/* the same hover the advisor photos use, so the two pages behave alike */
.wc-portrait img{width:100%;height:auto;display:block;border-radius:var(--r-card);
  border:3px solid rgba(200,149,43,.72);box-shadow:0 26px 60px rgba(0,0,0,.55);
  object-fit:cover;object-position:28% 18%;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s ease,box-shadow .3s ease}
.wc-portrait:hover img{transform:scale(1.035);border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(212,163,60,.45),
             0 26px 60px rgba(212,163,60,.3),
             0 30px 70px rgba(0,0,0,.5)}
/* the badge rides with the photo rather than being left behind by it */
.wc-portrait:hover .wc-badge{transform:translateX(-50%) translateY(3px) scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .wc-portrait img{transition:border-color .3s,box-shadow .3s}
  .wc-portrait:hover img{transform:none}
  .wc-portrait:hover .wc-badge{transform:translateX(-50%)}
}
.wc-badge{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  white-space:nowrap;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:#20150A;padding:8px 16px;border-radius:999px;
  background:linear-gradient(170deg,var(--gold-light),var(--gold) 52%,var(--gold-deep));
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  transition:transform .35s cubic-bezier(.16,1,.3,1)}
.wc-steps{background:linear-gradient(180deg,var(--ink),#170C22);padding-block:clamp(40px,5vw,72px)}
/* the boxes ran the full container, leaving a wide band of empty ground down
   their right-hand side */
.wc-list{list-style:none;margin:0 auto;padding:0;display:grid;
  gap:clamp(18px,2.4vw,30px);max-width:56rem}
.wc-list li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.6vw,32px);
  align-items:start;padding:clamp(24px,3vw,38px);border:1px solid var(--line);
  border-radius:var(--r-card);background:linear-gradient(155deg,rgba(57,21,72,.4),rgba(13,7,17,.3))}
.wc-num{width:clamp(44px,4.6vw,60px);height:clamp(44px,4.6vw,60px);border-radius:50%;
  display:grid;place-items:center;font-family:var(--display);
  font-size:clamp(20px,2.2vw,27px);color:var(--gold-light);
  border:1px solid rgba(200,149,43,.5);background:rgba(200,149,43,.1)}
.wc-body h3{margin:4px 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2.5vw,31px);line-height:1.15;color:var(--paper)}
.wc-body p{margin:13px 0 0;color:var(--cream);max-width:70ch;line-height:1.66}
.wc-book{background:var(--plum);padding-block:clamp(48px,6vw,84px);
  text-align:center;scroll-margin-top:140px}
.wc-book-h{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(27px,3.4vw,42px);color:var(--paper)}
.wc-book-l{margin:16px auto 30px;max-width:52ch;color:var(--cream)}
.wc-book .cal-face{min-height:auto;padding:clamp(24px,3vw,38px)}
@media (max-width:900px){
  .wc-list li{grid-template-columns:1fr;gap:14px}
}
/* Below the laptop the hero used to stack, which left a band of empty screen
   beside the copy. It keeps both columns instead, with the portrait narrower.
   The booking button goes at these sizes: the calendar is the very next thing
   on the page, so a button that scrolls one screen is noise. */
}
/* On a phone the copy stacks above the portrait with nothing beside it, so it
   reads better centred on the column than ranged left against empty space. */

@media (max-width:560px){
  .wc-bar-txt span{display:none}
  .wc-bar .btn{font-size:12px;padding:.8em 1.2em}
}

/* ============================================================================
   /About-Us — three variations
   A: the founding story (crest watermark, dated timeline)
   B: the standard (fiduciary vs suitability, side by side)
   C: in their own words (client quotes answered by the firm's claims)
   ========================================================================= */
/* A: the crest sits behind the words rather than beside them */
.ab-close{text-align:center;position:relative;z-index:2;padding-block:clamp(52px,6vw,90px)}
.ab-close h2{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.6vw,46px);line-height:1.1;color:var(--paper);text-wrap:balance}
.ab-close h2 em{font-style:italic;color:var(--gold)}
.ab-close .lede{margin:16px auto 28px;max-width:46ch;color:var(--cream)}
.ab-close .trust{margin-top:18px}

/* B: William's own account, then what it obliges, then the people held to it */
.bb-benes{margin-top:44px}
.bb-team-l{margin:16px 0 32px;max-width:56ch;color:var(--body-light)}
/* auto-fit picks whatever columns fit, which leaves a short last row and a
   hole beside it. The column count is chosen in script from the number of
   advisors instead (see site.js), and flex-wrap centres any remainder rather
   than pushing it left, so the block stays even whoever joins or leaves. */
.bb-team{--team-gap:clamp(10px,1.4vw,16px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--team-gap)}
.bb-team img{flex:0 0 calc((100% - (var(--cols,4) - 1) * var(--team-gap)) / var(--cols,4));
  /* a flex item's min-width is auto, which for an image is its intrinsic 400px
     — that floor was overriding the basis and forcing two per row */
  min-width:0;
  width:auto;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;
  border-radius:var(--r-card);border:1px solid var(--line-dark);
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s}
.bb-team img:hover{transform:scale(1.04);border-color:var(--gold-deep)}
.bb-links{margin-top:30px}

@media (max-width:860px){
}

/* ============================================================================
   /Contact-Us — three variations
   A: the call is the contact (calendar first, three fallbacks under it)
   B: reach the person, not a queue (the roster as a switchboard)
   C: ask first, book later (the form is the hero)
   ========================================================================= */
.ct-hero{position:relative;overflow:hidden;background:var(--ink);
  border-bottom:1px solid var(--line);display:grid;align-items:center;
  /* the hero and the bar above it fill exactly one screen, so a page opens on
     the hero alone rather than on a hero and a strip of the section below */
  min-height:calc(100vh - var(--hdr-h));
  min-height:calc(100svh - var(--hdr-h))}
.ct-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* These photographs are brighter and busier than the ones on the other heroes,
   so the scrim darkens hardest where the copy sits and lets the picture come
   back at the edges. */
.ct-hero-scrim{position:absolute;inset:0;z-index:1;background:
  radial-gradient(64% 56% at 50% 50%,rgba(9,5,12,.88) 0%,
    rgba(9,5,12,.66) 55%,rgba(9,5,12,.3) 100%),
  linear-gradient(180deg,rgba(9,5,12,.5) 0%,rgba(9,5,12,.5) 40%,rgba(9,5,12,.94) 100%)}
.ct-hero-in{position:relative;z-index:3;padding-block:clamp(58px,7.5vw,110px);
  max-width:58rem;margin-inline:auto;text-align:center}
.ct-hero h1{margin:14px 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(32px,4.6vw,56px);line-height:1.08;letter-spacing:-.02em;
  color:var(--paper);text-wrap:balance}
.ct-hero h1 em{font-style:italic;color:var(--gold)}
.ct-hero .lede{margin:22px auto 0;max-width:58ch;color:var(--cream);
  font-size:clamp(16px,1.5vw,19px)}

/* A — the three fallbacks, numbered because they are ranked, not a set */

/* the form is a stand-in until the CRM form ID lands — see PLACEHOLDERS.md */
.ct-form{display:grid;gap:14px;margin-top:20px}
.ct-form label{display:grid;gap:6px;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;color:var(--muted)}
.ct-form input,.ct-form textarea{font:inherit;font-size:16px;text-transform:none;
  letter-spacing:0;font-weight:400;color:var(--ink-text);
  background:rgba(26,14,34,.03);border:1px solid var(--line-dark);
  border-radius:10px;padding:12px 14px;width:100%;
  transition:border-color .25s,box-shadow .25s,background .25s}
.ct-form textarea{resize:vertical;line-height:1.55}
.ct-form input:focus,.ct-form textarea:focus{outline:none;border-color:var(--gold-deep);
  background:var(--paper);box-shadow:0 0 0 3px rgba(212,163,60,.18)}
.ct-form input::placeholder,.ct-form textarea::placeholder{color:rgba(26,14,34,.34)}
.ct-form .btn{justify-self:start;margin-top:4px}
.ct-form .btn[disabled]{cursor:not-allowed}

/* B — the roster as a switchboard */
/* on the dark ground the panel supplies its own paper, so its fields must not
   inherit the section's light text */

/* C — the form as the hero */
/* The form stands alone now that the calendar has its own section below. On a
   narrow screen it is one column; from the laptop up it widens and puts the
   three short fields across, so it fills the section rather than running as a
   thin vertical strip down the middle of it. */
.ct-split{max-width:44rem;margin-inline:auto}
@media (min-width:992px){
  .ct-split{max-width:68rem}
  .ct-form--card{padding:clamp(34px,3.4vw,52px)}
}
.ct-form--card{background:var(--paper);border:1px solid var(--line-dark);
  border-radius:var(--r-card);padding:clamp(26px,3.2vw,42px);margin-top:0;
  box-shadow:0 26px 60px rgba(26,14,34,.09)}
.ct-form-h{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(24px,2.6vw,32px);color:var(--ink-text);text-align:left}
.ct-form-l{margin:8px 0 6px;color:var(--body-light);font-size:16px}
.ct-form-s{margin:2px 0 0;font-size:14px;color:var(--muted)}
.ct-form-row{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:720px){.ct-form-row{grid-template-columns:repeat(3,1fr)}}


/* .sec--mid centres a section's heading; blocks with their own internal
   alignment have to opt back out */
.ct-split{text-align:left}
/* the tick was drawn against the dark ground — pale gold on paper is invisible */
.light .tick{color:var(--gold-deep);background:rgba(200,149,43,.14);
  border-color:rgba(153,103,21,.4)}
/* a disabled control has to look disabled, or the page reads as broken */
.ct-form .btn[disabled]{opacity:.5;box-shadow:none}
.ct-form .btn[disabled]:hover{transform:none;box-shadow:none}
.ct-form-todo{margin:2px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted);
  border-left:2px solid rgba(153,103,21,.4);padding-left:12px;max-width:44ch}

/* ============================================================================
   Legal pages — /Privacy-Policy and /Terms-Conditions
   Two treatments, shared shell. A: plain-language summary above each clause,
   with a tracked contents rail. B: the formal numbered document.
   ========================================================================= */
.lg-hero{position:relative;overflow:hidden;background:var(--ink);
  border-bottom:1px solid var(--line);display:grid;align-items:center;
  /* the hero and the bar above it fill one screen, as on every other page */
  min-height:calc(100vh - var(--hdr-h));
  min-height:calc(100svh - var(--hdr-h))}
.lg-hero-in{position:relative;z-index:2;padding-block:clamp(46px,5.5vw,84px);
  max-width:64rem}
.lg-hero h1{margin:12px 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4vw,48px);line-height:1.1;letter-spacing:-.02em;color:var(--paper)}
.lg-hero h1 em{font-style:italic;color:var(--gold)}
.lg-meta{margin:20px 0 0;font-size:15.5px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:6px 24px}
.lg-sub{margin:20px 0 0;max-width:62ch;color:var(--cream);
  font-size:clamp(16px,1.5vw,19px);line-height:1.7}
.lg-meta b{color:var(--cream);font-weight:600}
.lg-body{display:grid;grid-template-columns:clamp(190px,20vw,250px) minmax(0,78ch);
  gap:clamp(28px,4vw,68px);align-items:start;text-align:left;justify-content:center}
.lg-toc{position:sticky;top:96px}
.lg-toc h2{margin:0 0 14px;font-family:var(--sans);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--muted);text-align:left}
.lg-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  counter-reset:toc;border-left:1px solid var(--line-dark)}
.lg-toc a{counter-increment:toc;display:block;padding:6px 0 6px 16px;margin-left:-1px;
  border-left:1px solid transparent;font-size:14.5px;line-height:1.4;
  color:var(--body-light);text-decoration:none;transition:color .2s,border-color .2s}
.lg-toc a::before{content:counter(toc) ".  ";color:var(--muted)}
.lg-toc a:hover{color:var(--gold-deep);border-left-color:var(--gold-deep)}
.lg-doc{max-width:74ch}
.lg-doc section,.lg-sum{scroll-margin-top:110px}
.lg-doc section{padding-bottom:clamp(30px,3.4vw,44px)}
.lg-doc section + section{border-top:1px solid var(--line-dark);
  padding-top:clamp(30px,3.4vw,44px)}
.lg-doc h2{margin:0 0 14px;font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2.3vw,29px);color:var(--ink-text);text-align:left}
.lg-doc h3{margin:24px 0 8px;font-family:var(--sans);font-weight:700;font-size:15px;
  letter-spacing:.02em;color:var(--ink-text)}
.lg-doc p{margin:0 0 14px;color:var(--body-light);line-height:1.75;font-size:16.5px}
.lg-doc ul{margin:0 0 16px;padding-left:0;list-style:none;display:grid;gap:9px}
.lg-doc li{position:relative;padding-left:20px;color:var(--body-light);line-height:1.7;
  font-size:16.5px}
.lg-doc li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;
  border-radius:50%;background:rgba(153,103,21,.55)}
.lg-doc a{color:var(--gold-deep)}
/* a formal document numbers its clauses */
.lg-doc--num{counter-reset:cl}
.lg-doc--num > section > h2{counter-increment:cl}
.lg-doc--num > section > h2::before{content:counter(cl) ". ";color:var(--gold-deep)}
.lg-sum{margin:0 0 clamp(30px,3.4vw,44px);padding:clamp(22px,2.6vw,30px);
  border-radius:var(--r-card);background:rgba(26,14,34,.035);
  border:1px solid var(--line-dark)}
.lg-sum h2{margin:0 0 12px;font-size:clamp(20px,2vw,24px)}
.lg-sum p:last-child{margin-bottom:0}
/* fields the firm still has to supply, impossible to miss and easy to grep */
.lg-fill{background:rgba(212,163,60,.28);border-bottom:1px dashed var(--gold-deep);
  padding:0 4px;border-radius:3px;color:var(--ink-text);font-style:normal}
@media (max-width:900px){
  .lg-body{grid-template-columns:1fr}
  .lg-toc{position:static;padding-bottom:8px}
  .lg-toc ol{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
/* the fill marker is dark-on-gold, which disappears against the dark hero */
.lg-hero .lg-fill{background:rgba(212,163,60,.22);color:var(--gold-light);
  border-bottom-color:rgba(212,163,60,.6)}

/* Internal variations index — delete with src/components/VariationsIndex.astro
   once the picks are made. */
.vx-hero{background:var(--ink);border-bottom:1px solid var(--line)}
.vx-hero-in{padding-block:clamp(46px,5.5vw,80px);max-width:60rem}
.vx-hero h1{margin:12px 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4vw,50px);line-height:1.1;color:var(--paper)}
.vx-hero h1 em{font-style:italic;color:var(--gold)}
.vx-hero .lede{margin:18px 0 0;max-width:60ch;color:var(--cream)}
.vx-body{display:grid;gap:0}
.vx-row{display:grid;grid-template-columns:clamp(200px,22vw,280px) minmax(0,1fr);
  gap:clamp(20px,3vw,52px);align-items:start;
  padding-block:clamp(26px,3vw,38px)}
.vx-row + .vx-row{border-top:1px solid var(--line-dark)}
.vx-k h2{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(21px,2.2vw,27px);color:var(--ink-text);text-align:left}
.vx-k p{margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.vx-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(12px,1.4vw,16px)}
.vx-opt{display:block;text-decoration:none;background:var(--paper);
  border:1px solid var(--line-dark);border-radius:var(--r-card);
  padding:18px 20px;transition:transform .3s cubic-bezier(.16,1,.3,1),
  border-color .3s,box-shadow .3s}
.vx-opt:hover{transform:translateY(-3px);border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(212,163,60,.35),0 18px 40px rgba(212,163,60,.18)}
.vx-opt b{display:block;font-family:var(--display);font-weight:400;font-size:18px;
  color:var(--ink-text)}
.vx-opt i{display:block;margin-top:8px;font-style:normal;font-size:14.5px;line-height:1.55;
  color:var(--muted)}
.vx-opt--done{background:rgba(212,163,60,.09);border-color:rgba(153,103,21,.4)}
.vx-opt--done i{color:var(--gold-deep);font-family:var(--sans)}
@media (max-width:800px){ .vx-row{grid-template-columns:1fr} }

/* ---- header, desktop --------------------------------------------------- */
/* The nav sat wherever the brand and the button left room. On a wide screen it
   is the spine of the bar, so it gets the middle column and a size that reads
   from across the room — this audience is 65+. */
@media (min-width:992px){
  .hdr-in{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,2.4vw,40px)}
  .brand{margin-right:0}
  .nav-links{justify-self:center;gap:clamp(26px,2.8vw,40px)}
  .nav-links a{font-size:17.5px;opacity:.9}
  .hdr-in > .btn{justify-self:end}
}

/* ---- /William-Rapp, closing ---------------------------------------------- */
.wc-close{margin-top:clamp(30px,3.6vw,48px);text-align:center}
.wc-close p{margin:0 auto 20px;max-width:44ch;color:var(--cream);
  font-size:clamp(16px,1.4vw,18.5px)}
.wc-steps-h{margin:0 0 clamp(28px,3.4vw,44px);font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;color:var(--paper);
  text-align:center}
.wc-steps-h em{font-style:italic;color:var(--gold)}
/* the one instruction on the page that has to be read before booking */
.wc-book-l b{color:var(--gold);font-weight:700;letter-spacing:.04em}
/* The bar's button points at the booking page. On the home page that is the
   next step; on any other page the visitor is already deeper in than the
   button would take them, so it only appears at home. The nav keeps the
   centre column either way — the empty third column still balances it. */
.hdr .btn{display:none}
body:has([data-home]) .hdr .btn{display:inline-flex}

/* ============================================================================
   /About-Us
   Photographic: the founder's account paced as three picture beats, a quote
   band, what it obliges, and the advisors held to it.
   ========================================================================= */

/* ---- C: in the room ---- */
.ir-hero{position:relative;overflow:hidden;background:var(--ink);
  display:grid;align-items:center;
  /* the hero and the bar above it fill exactly one screen, so a page opens on
     the hero alone rather than on a hero and a strip of the section below */
  min-height:calc(100vh - var(--hdr-h));
  min-height:calc(100svh - var(--hdr-h))}
.ir-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 40%;z-index:0}
.ir-hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,
  rgba(9,5,12,.62) 0%,rgba(9,5,12,.72) 45%,rgba(9,5,12,.92) 100%)}
.ir-hero-in{position:relative;z-index:3;max-width:56rem;margin-inline:auto;text-align:center;
  padding-block:clamp(50px,6vw,90px)}
.ir-hero h1{margin:14px 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(32px,4.6vw,56px);line-height:1.08;letter-spacing:-.02em;color:var(--paper);
  text-wrap:balance}
.ir-hero h1 em{font-style:italic;color:var(--gold)}
.ir-hero .lede{margin:22px auto 0;max-width:54ch;color:var(--cream);
  font-size:clamp(16px,1.5vw,19px)}
.ir-h{text-align:center}
.ir-beats{display:grid;gap:clamp(34px,4.6vw,72px);margin-top:44px}
/* these run the full width of the container, so their entrance travels only as
   far as the margin beside them allows */
.ir-beat.rev-right{transform:translateX(clamp(14px,4vw,56px))}
.ir-beat.rev-right.in,.ir-beat.rev-left.in{transform:none}
.ir-beat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,3.4vw,56px);align-items:center}
.ir-beat:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.ir-beat:nth-child(even) figure{grid-column:2;grid-row:1}
.ir-beat:nth-child(even) > div{grid-column:1;grid-row:1}
.ir-beat figure{margin:0;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line-dark);box-shadow:0 24px 56px rgba(26,14,34,.16)}
.ir-beat img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ir-k{margin:0 0 8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--gold-deep)}
.ir-beat h3{margin:0 0 14px;font-family:var(--display);font-weight:400;
  font-size:clamp(22px,2.5vw,31px);line-height:1.14;color:var(--ink-text)}
.ir-beat p{margin:0;color:var(--body-light);line-height:1.72}
/* a beat can run to several paragraphs, and they must not run together */
.ir-beat p + p{margin-top:15px}
.ir-beat p em{font-style:italic;color:var(--gold-deep)}
/* The mirror of the home page's band, which runs ink into plum: this one
   opens on the plum and resolves into the ink of the section beneath it, so
   the seam between the two disappears. */
.ir-quote{position:relative;overflow:hidden;display:grid;align-items:center;
  min-height:clamp(320px,36vw,440px);
  background:linear-gradient(180deg,
    #331744 0%,
    #2E1740 24%,
    #281434 52%,
    #20112B 78%,
    var(--ink) 100%)}
/* the page's scroll stopper: a gold wash behind it, the crest bleeding off one
   corner, and an oversized quote mark, so the eye stops here rather than
   running past it to the next heading */
.ir-quote::before{content:"";position:absolute;left:-6%;top:-30%;
  width:min(720px,70vw);aspect-ratio:1;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle,rgba(200,149,43,.2),transparent 62%)}
.ir-quote-crest{position:absolute;right:1%;bottom:-18%;width:clamp(220px,28vw,400px);
  opacity:.13;z-index:1;pointer-events:none;filter:saturate(.6)}
.ir-quote-in{position:relative;z-index:3;max-width:54rem;margin-inline:auto;text-align:center;
  padding-block:clamp(52px,6vw,88px)}
.ir-quote blockquote{margin:0;position:relative}
.ir-quote-mark{display:block;font-family:var(--display);line-height:.5;
  font-size:clamp(64px,8vw,116px);color:var(--gold);opacity:.5;margin-bottom:8px}
.ir-quote p{margin:0;font-family:var(--display);font-style:italic;
  font-size:clamp(23px,3vw,40px);line-height:1.3;color:var(--paper);
  text-shadow:0 2px 30px rgba(0,0,0,.4)}
.ir-quote cite{display:block;margin-top:26px;font-style:normal;font-family:var(--sans);
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.ir-quote cite::before{content:"";display:block;width:52px;height:1px;margin:0 auto 18px;
  background:linear-gradient(90deg,transparent,var(--gold-deep),transparent)}

@media (max-width:900px){
  .ir-beat,.ir-beat:nth-child(even){grid-template-columns:1fr;gap:20px}
  .ir-beat:nth-child(even) figure,
  .ir-beat:nth-child(even) > div{grid-column:1;grid-row:auto}
}
/* the beat that claims something about these advisors shows these advisors */
.ir-quad{display:grid;grid-template-columns:1fr 1fr;gap:6px;border:0;box-shadow:none;
  border-radius:var(--r-card);overflow:hidden}
.ir-quad img{aspect-ratio:4/5;object-position:50% 16%}

/* ============================================================================
   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}
}
/* the honeypot has to be reachable by a bot and invisible to a person, which
   display:none is not — a bot reads the stylesheet too */
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-form-msg{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--gold-deep)}
.ct-form-msg.is-bad{color:#9B2C2C}
.ct-form-msg:empty{display:none}

/* ============================================================================
   Advisor booking pages — five layouts of one page
   A specialist  B the question  C the note  D the thirty minutes  E proof first
   Shared shell; only the arrangement differs. Generated by scripts/gen-booking.py
   ========================================================================= */
.bkx-hero{position:relative;overflow:hidden;background:var(--ink);
  display:grid;align-items:center;
  min-height:calc(100vh - var(--hdr-h));
  min-height:calc(100svh - var(--hdr-h))}
/* the same portrait column as William's page, so the two are the same size */
.bkx-hero-in{position:relative;z-index:2;display:grid;
  grid-template-columns:clamp(240px,26vw,360px) minmax(0,1.15fr);
  gap:clamp(28px,4vw,60px);align-items:center;padding-block:clamp(40px,5vw,72px)}
/* An advisor on an even row of /Advisors has their photograph on the right.
   Their booking page mirrors it, so arriving from the roster the page looks
   like the row that was clicked. Columns are assigned rather than ordered:
   `order` would move the portrait into the wide track. */
.bkx-hero--mirror .bkx-hero-in{grid-template-columns:minmax(0,1.15fr) clamp(240px,26vw,360px)}
.bkx-hero--mirror .bkx-portrait{grid-column:2;grid-row:1}
.bkx-hero--mirror .bkx-copy{grid-column:1;grid-row:1}
.bkx-hero--note .bkx-hero-in{grid-template-columns:minmax(0,1fr) clamp(260px,30vw,420px)}
.bkx-hero h1{margin:14px 0 0;font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4.1vw,52px);line-height:1.08;letter-spacing:-.02em;color:var(--paper);
  text-wrap:balance}
.bkx-hero h1 em{font-style:italic;color:var(--gold)}
.bkx-hero .lede{margin:20px 0 0;color:var(--cream);max-width:54ch;
  font-size:clamp(16px,1.45vw,18.5px)}
.bkx-hero .creds{margin:22px 0 0}
.bkx-hero .btn{margin-top:28px}
.bkx-portrait{margin:0;position:relative}
.bkx-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 16%;border-radius:var(--r-card);
  border:3px solid rgba(200,149,43,.62);
  box-shadow:0 0 0 0 rgba(200,149,43,.62),0 26px 60px rgba(0,0,0,.55);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.bkx-portrait:hover img{transform:scale(1.03);
  box-shadow:0 0 0 4px rgba(200,149,43,.62),0 30px 70px rgba(0,0,0,.55)}
.bkx-portrait figcaption{display:block;margin-top:16px;text-align:center}
.bkx-portrait figcaption b{display:block;font-family:var(--display);font-weight:400;
  font-size:19px;color:var(--gold)}
.bkx-portrait figcaption span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}

/* A — what the call covers, as cards */
.bkx-focus{background:linear-gradient(180deg,var(--ink),#170C22);
  padding-block:clamp(44px,5.4vw,80px);text-align:center}
.bkx-focus h2{margin:0}
.bkx-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(16px,2.2vw,26px);margin-top:40px;text-align:left}
.bkx-card{background:var(--paper);border:1px solid var(--line-dark);
  border-radius:var(--r-card);padding:clamp(24px,2.8vw,34px);
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
.bkx-card:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(212,163,60,.35),0 20px 46px rgba(212,163,60,.18)}
.bkx-n{display:block;font-family:var(--display);font-size:15px;letter-spacing:.16em;
  color:var(--gold-deep);margin-bottom:12px}
.bkx-card h3{margin:0 0 9px;font-family:var(--display);font-weight:400;
  font-size:clamp(19px,2vw,23px);line-height:1.2;color:var(--ink-text)}
.bkx-card p{margin:0;font-size:15.5px;line-height:1.62;color:var(--body-light)}

/* B — the question, then the answer */
.bkx-hero--ask .bkx-ask-in{position:relative;z-index:2;max-width:56rem;margin-inline:auto;
  text-align:center;padding-block:clamp(44px,5.4vw,80px)}
.bkx-hero--ask .lede{margin-inline:auto}
.bkx-answer{background:var(--paper);padding-block:clamp(48px,6vw,88px)}
.bkx-answer-in{display:grid;grid-template-columns:clamp(220px,26vw,340px) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);align-items:start}
.bkx-answer h2{margin:0 0 16px;text-align:left;font-size:clamp(24px,2.8vw,36px);
  color:var(--ink-text)}
.bkx-k{margin:0 0 8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--gold-deep)}
.bkx-note{margin:0 0 20px;font-family:var(--display);font-style:italic;
  font-size:clamp(18px,1.9vw,23px);line-height:1.45;color:var(--gold-deep)}
.bkx-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bkx-list li{position:relative;padding-left:22px;color:var(--body-light);line-height:1.68;
  font-size:16.5px}
.bkx-list li::before{content:"";position:absolute;left:2px;top:.66em;width:7px;height:7px;
  border-radius:50%;background:var(--gold-deep)}
.bkx-list b{color:var(--ink-text);font-weight:600}
.bkx-answer .bkx-portrait figcaption b{color:var(--gold-deep)}
.bkx-answer .bkx-portrait figcaption span{color:var(--muted)}

/* C — the note, and the calendar beside it */
.bkx-letter{margin:26px 0 0;padding:0}
.bkx-letter p{margin:0;font-family:var(--display);font-style:italic;
  font-size:clamp(19px,2.1vw,27px);line-height:1.42;color:var(--paper)}
.bkx-letter cite{display:block;margin-top:18px;font-style:normal;font-family:var(--sans);
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.bkx-portrait--tall img{aspect-ratio:3/4}
.bkx-book--wide .bkx-book-split{display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,3.4vw,56px);align-items:center;text-align:left}
.bkx-book-split .bkx-book-h,.bkx-book-split .bkx-book-l{text-align:left;margin-inline:0}
.bkx-proof{margin:22px 0 0;font-size:14px;letter-spacing:.04em;color:var(--muted)}

/* D — the call, minute by minute */
.bkx-hero--tight .bkx-tight-in{position:relative;z-index:2;max-width:54rem;margin-inline:auto;
  text-align:center;padding-block:clamp(40px,5vw,74px)}
.bkx-avatar{width:clamp(88px,9vw,124px);height:auto;aspect-ratio:1;object-fit:cover;
  object-position:50% 14%;border-radius:50%;border:3px solid rgba(200,149,43,.62);
  margin:0 auto 22px;display:block;box-shadow:0 18px 44px rgba(0,0,0,.5)}
.bkx-hero--tight .lede{margin-inline:auto}
.bkx-map{background:linear-gradient(180deg,var(--ink),#170C22);
  padding-block:clamp(44px,5.4vw,80px);text-align:center}
.bkx-clock{list-style:none;margin:40px auto 0;padding:0;max-width:72rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(18px,2.4vw,30px);text-align:left}
.bkx-clock li{border-top:2px solid rgba(212,163,60,.45);padding-top:20px}
.bkx-when{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--gold);margin-bottom:12px}
.bkx-clock h3{margin:0 0 9px;font-family:var(--display);font-weight:400;
  font-size:clamp(19px,2vw,24px);line-height:1.2;color:var(--paper)}
.bkx-clock p{margin:0;font-size:15.5px;line-height:1.62;color:var(--cream)}
.bkx-map-cta{margin-top:clamp(30px,3.6vw,48px)}

/* E — proof first */
.bkx-hero--proof .bkx-proof-in{position:relative;z-index:2;max-width:54rem;margin-inline:auto;
  text-align:center;padding-block:clamp(44px,5.4vw,80px)}
.bkx-hero--proof .lede{margin-inline:auto}
.bkx-who{background:var(--paper);padding-block:clamp(48px,6vw,88px)}
.bkx-who-in{display:grid;grid-template-columns:clamp(220px,26vw,340px) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);align-items:start}
.bkx-who h2{margin:0;text-align:left;font-size:clamp(26px,3vw,40px);color:var(--gold-deep)}
.bkx-title{margin:8px 0 0;font-size:clamp(14.5px,1.3vw,16.5px);color:var(--muted);font-weight:600}
.bkx-who .creds{margin:18px 0 0}
.bkx-who .creds li{color:var(--gold-deep);border-color:rgba(153,103,21,.4);
  background:rgba(200,149,43,.08)}
.bkx-who .spec li{color:var(--body-light);border-color:var(--line-dark);
  background:rgba(26,14,34,.03)}
.bkx-who .spec-k{color:var(--ink-text)}

/* shared: the calendar, and what follows it */
.bkx-book{background:var(--plum);padding-block:clamp(48px,6vw,84px);text-align:center;
  scroll-margin-top:24px}
.bkx-book-h{margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(27px,3.4vw,42px);color:var(--paper)}
.bkx-book-l{margin:16px auto 30px;max-width:52ch;color:var(--cream)}
.bkx-book-l b{color:var(--gold);font-weight:700;letter-spacing:.04em}
.bkx-book .cal-face{min-height:auto;padding:clamp(24px,3vw,38px)}
.bkx-after{background:linear-gradient(180deg,var(--plum),var(--ink));
  padding-block:clamp(44px,5.4vw,80px);text-align:center}
.bkx-after h2{margin:0 0 clamp(28px,3.4vw,44px)}
.bkx-steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(18px,2.4vw,32px);text-align:left}
.bkx-steps li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start}
.bkx-steps span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-size:19px;color:var(--gold);
  border:1px solid rgba(212,163,60,.45);background:rgba(212,163,60,.1)}
.bkx-steps b{display:block;font-size:17.5px;color:var(--paper);margin-bottom:4px;font-weight:600}
.bkx-steps p{margin:0;font-size:15.5px;line-height:1.55;color:var(--cream)}
.bkx-back{margin:clamp(30px,3.6vw,46px) 0 0;font-size:15.5px}
.bkx-back a{color:var(--gold);text-decoration:none;
  border-bottom:1px solid rgba(212,163,60,.4);padding-bottom:2px;transition:color .2s,border-color .2s}
.bkx-back a:hover{color:#B8862A;border-color:var(--gold)}

/* ---- every booking page, below the laptop ------------------------------ */
/* One layout for all of them, William's included: the copy leads, centred,
   and the portrait follows it. Whichever side the portrait sits on above this
   width stops mattering once there is a single column, so the mirroring is
   reset here rather than fought with. The button goes because the calendar is
   the very next section — a button that scrolls one screen is noise. */
@media (max-width:1279px){
  /* No justify-items:center here: it sizes the copy to its own content width,
     which on a phone squeezed the headline into a narrow column and made the
     block twice as tall as it needed to be. The copy stretches and centres its
     text; only the portrait is centred as a box. */
  .wc-hero-in,.bkx-hero-in,.bkx-hero--mirror .bkx-hero-in{
    grid-template-columns:1fr;gap:clamp(22px,3.4vw,34px);text-align:center}
  /* the desktop mirror rule names two classes as well and sits further down the
     file, so these have to out-specify it rather than merely follow it */
  .wc-hero .wc-hero-in .wc-copy,.bkx-hero .bkx-hero-in .bkx-copy{grid-column:1;grid-row:1}
  .wc-hero .wc-hero-in .wc-portrait,.bkx-hero .bkx-hero-in .bkx-portrait{grid-column:1;grid-row:2}
  .wc-hero .lede,.bkx-hero .lede{margin:16px auto 0}
  .wc-hero-in .btn,.bkx-hero-in .btn{display:none}
  /* on a tablet the portrait has room to be looked at rather than glanced at.
     A width, not a max-width: centred grid items size to their content, so a
     cap alone leaves the picture wherever the image happened to land. */
  /* bounded by the height as well as the width, or a short landscape tablet
     ends up with a portrait taller than the screen it has to fit inside */
  .wc-portrait,.bkx-portrait{width:min(42vw,28vh,300px);max-width:none;margin-inline:auto}
@media (max-width:560px){
  /* a phone has less to spare, so the portrait comes back down */
  .wc-portrait,.bkx-portrait{width:min(74vw,300px)}
}
/* on a phone the heading has nothing beside it, so it centres like the rest */
@media (max-width:560px){
  .stack-head{text-align:center}
}