/* ============================================================
   GLOBEX ATLAS - components
   One persistent CTA (nav pill). Gold only at crown moments.
   ============================================================ */

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:9999;background:radial-gradient(120% 120% at 50% 40%,#161512 0%,#0A0A0B 60%);
  display:flex;align-items:center;justify-content:center}
html:not(.js) #loader{display:none}
#loader .stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px}
#loader .lockup{position:relative;width:min(58vw,420px);min-height:min(46vw,340px);
  display:flex;align-items:center;justify-content:center}
#loader canvas{width:min(46vw,340px);height:min(46vw,340px);will-change:transform,opacity}
#loader .lockup-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100%;height:auto;opacity:0;pointer-events:none;clip-path:inset(0 41.5% 0 29%)}
#loader .word{font-family:var(--mono);font-size:11.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--text);
  height:16px;text-align:center;transition:opacity .3s ease}
#loader .word em{font-style:normal;color:var(--gold-bright)}
#loader .meter{width:min(46vw,340px);height:1px;background:var(--hairline-soft);position:relative;overflow:hidden}
#loader .meter i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--gold)}
#loader .skip{position:absolute;bottom:-64px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--text-faint)}
#loader.done{transition:opacity .4s ease;opacity:0;pointer-events:none}
#loader .brandfade{position:fixed;opacity:0;pointer-events:none}
#loader .brandfade img{height:100%;width:auto}

/* ---------- nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:900;padding:22px 0;
  transition:background .4s ease,border-color .4s ease,padding .4s ease}
header.solid{background:rgba(11,9,6,.96);border-bottom:1px solid var(--hairline-soft);padding:14px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo-img{display:block}
.nav-brand{view-transition-name:globex-logo}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{font-size:13.5px;font-weight:500;letter-spacing:.02em;color:rgba(250,246,238,.7);transition:color .25s}
.nav-links a:hover{color:#fff}
.nav-links a[aria-current="page"]{color:var(--bone)}
.nav-links a.pill-solid{color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;color:var(--bone);cursor:pointer}

/* ---------- hero (home) ---------- */
.hero{min-height:100svh;display:flex;align-items:flex-end;position:relative;overflow:hidden;isolation:isolate;background:var(--night)}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-fallback{position:absolute;inset:0;z-index:-3;
  background:
    radial-gradient(90% 70% at 78% 18%,rgba(201,162,75,.28),transparent 55%),
    radial-gradient(80% 80% at 20% 90%,rgba(201,162,75,.12),transparent 55%),
    linear-gradient(180deg,#12100b 0%,#0A0A0B 70%)}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,9,8,.72) 0%,rgba(10,9,8,.42) 46%,rgba(10,9,8,.06) 100%),
  linear-gradient(0deg,rgba(10,9,8,.82) 0%,rgba(10,9,8,.26) 32%,transparent 54%)}
.hero-inner{width:100%;padding-top:140px;padding-bottom:110px;color:var(--bone)}
.hero .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(250,246,238,.9);
  margin-bottom:26px;display:flex;align-items:center;gap:14px}
.hero .kicker::before{content:"";width:34px;height:1px;background:var(--gold)}
.hero h1{font-size:clamp(46px,7.2vw,96px);max-width:13ch;margin-bottom:26px}
.hero .lead{max-width:44ch;margin-bottom:40px;color:rgba(250,246,238,.85);font-size:clamp(16px,1.7vw,19px)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
html.js .hero .kicker{opacity:0;animation:rise .9s ease .1s forwards}
html.js .hero h1{opacity:0;animation:rise 1s ease .22s forwards}
html.js .hero .lead{opacity:0;animation:rise 1s ease .34s forwards}
html.js .hero-cta{opacity:0;animation:rise 1s ease .46s forwards}
body.held .hero .kicker,body.held .hero h1,body.held .hero .lead,body.held .hero-cta{animation-play-state:paused}
html.rm .hero .kicker,html.rm .hero h1,html.rm .hero .lead,html.rm .hero-cta{opacity:1!important}
@media(prefers-reduced-motion:reduce){
  html.js .hero .kicker,html.js .hero h1,html.js .hero .lead,html.js .hero-cta{opacity:1!important}
}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.scrollcue{position:absolute;bottom:26px;right:44px;color:rgba(250,246,238,.55);font-family:var(--mono);font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1}
.scrollcue .bar{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ?hero=centre comparison variant (the current live composition:
   vertically centred, column shrink-to-fit centred by auto margins) */
body.hero-centre .hero{align-items:center}
body.hero-centre .hero-inner{width:auto;padding-top:120px;padding-bottom:90px}
body.hero-centre .hero h1{font-size:clamp(38px,6vw,74px)}

/* the world below the film: shadow curtain hand-off */
.world{position:relative;z-index:5;background:var(--night);box-shadow:0 -60px 120px var(--night)}

/* ---------- generic bands ---------- */
.band{padding:clamp(80px,11vw,140px) 0}
.band.tight{padding:clamp(56px,7vw,90px) 0}
.sec-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-dim);margin-top:34px;transition:color .25s}
.sec-link:hover{color:var(--bone)}
.sec-link::after{content:"";width:30px;height:1px;background:var(--gold-deep);transition:width .3s var(--ease)}
.sec-link:hover::after{width:44px}

/* ---------- practice statement (karaoke) ---------- */
.practice .labelrow{margin-bottom:44px}
.practice-duo{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,100px);align-items:center}
.family-globe{display:flex;align-items:center;justify-content:center;position:relative}
.family-globe canvas{width:min(100%,420px);aspect-ratio:1/1;height:auto}
.family-globe .halo{position:absolute;width:64%;aspect-ratio:1/1;border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,162,75,.1),transparent 70%)}
.statement{font-family:var(--serif);font-size:clamp(30px,4.4vw,56px);line-height:1.18;max-width:22ch;color:rgba(250,246,238,.95)}
.statement em{color:var(--gold-bright)}
/* the scroll highlight: words light as you scroll in from the hero */
html.js:not(.rm) .kw{opacity:.22;transition:opacity .35s ease,text-shadow .35s ease}
html.js:not(.rm) .kw.lit{opacity:1;text-shadow:0 0 22px rgba(201,162,75,.28)}
html.rm .kw{opacity:1!important;text-shadow:none!important}
.goldline{height:1px;width:0;background:var(--gold);margin-top:38px;transition:width 1.2s var(--ease)}
.goldline.in{width:96px}
html:not(.js) .goldline,html.rm .goldline{width:96px}
.practice-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);margin-top:clamp(44px,6vw,80px);align-items:start}
.practice-copy p{color:var(--text);font-size:clamp(15.5px,1.5vw,17.5px)}
.practice-copy p+p{margin-top:18px}
.backedby{border-top:1px solid var(--hairline)}
.backed-row{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--hairline)}
.backed-row .k{font-family:var(--serif);font-size:22px;color:rgba(250,246,238,.92)}
.backed-row .v{color:var(--text-dim);font-size:14.5px}
.backed-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);padding-top:16px}

/* ---------- how it begins: the deck (4 steps) ---------- */
html.js .deck-runway{height:320vh}
html.js .deck-stage{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.deck-head{margin-bottom:44px}
.deck-head h2{font-size:clamp(30px,4.4vw,54px);margin-top:26px}
.deck-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,100px);align-items:center}
.deck{position:relative}
html.js .deck{height:clamp(360px,44vh,430px)}
/* deck cards share the warm sand of the team fan (per Kauthar 29 Jul) */
.deckcard{position:relative;background:linear-gradient(168deg,#E9DFC9 0%,#D8CAAB 100%);border-radius:10px;padding:clamp(30px,4vw,56px);
  border:1px solid rgba(25,23,19,.14);max-width:760px;color:var(--ink);box-shadow:0 14px 34px rgba(0,0,0,.3)}
.deckcard+.deckcard{margin-top:20px}
html.js .deckcard{position:absolute;inset:0 auto 0 0;width:100%;margin:0;display:flex;flex-direction:column;justify-content:center;
  transition:transform .55s var(--ease),opacity .55s var(--ease)}
.deckcard .step{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--gold-deep);margin-bottom:18px;display:block}
.deckcard h3{font-size:clamp(28px,3.2vw,44px);margin-bottom:14px;color:var(--ink)}
.deckcard p{color:rgba(25,23,19,.72);font-size:clamp(15.5px,1.6vw,18px);max-width:46ch}
html.js .deckcard.is-next{transform:translateY(46px) scale(.94);opacity:0;z-index:1}
html.js .deckcard.is-active{transform:translateY(0) scale(1);opacity:1;z-index:10}
html.js .deckcard.is-past{transform:translateY(-26px) scale(.96);opacity:.12;z-index:5}
.deck-progress{display:flex;gap:10px;margin-top:26px}
.deck-progress span{width:34px;height:2px;background:var(--hairline);transition:background .4s}
.deck-progress span.on{background:var(--gold)}
html:not(.js) .deck-progress{display:none}
/* the step index fills the right column; active step lights */
.deck-steps{list-style:none;display:flex;flex-direction:column;gap:6px}
.deck-steps li{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--hairline-soft);
  transition:opacity .4s ease}
.deck-steps li:first-child{border-top:1px solid var(--hairline-soft)}
.deck-steps .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--text-faint);transition:color .4s}
.deck-steps .t{font-family:var(--serif);font-size:clamp(19px,2vw,25px);color:var(--text-dim);transition:color .4s}
.deck-steps li{opacity:.55}
.deck-steps li.on{opacity:1}
.deck-steps li.on .n{color:var(--gold)}
.deck-steps li.on .t{color:rgba(250,246,238,.95)}
html:not(.js) .deck-steps,html.rm .deck-steps{display:none}
html.rm .deck-runway{height:auto}
html.rm .deck-stage{position:static;min-height:0;padding:clamp(80px,11vw,140px) 0}
html.rm .deck{height:auto}
html.rm .deckcard{position:relative;opacity:1!important;transform:none!important;inset:auto;width:auto}
html.rm .deckcard+.deckcard{margin-top:20px}
html:not(.js) .deck-stage{padding:clamp(80px,11vw,140px) 0}

/* ---------- services grid (need verbs + real names) ---------- */
.services .sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(40px,5vw,64px)}
.services h2{font-size:clamp(30px,4vw,52px)}
.svc-grid{border:1px solid var(--hairline);display:grid;grid-template-columns:1fr 1fr;background:rgba(250,246,238,.014)}
.svc{padding:clamp(30px,3.8vw,52px);min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;gap:28px;
  border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);transition:background .4s ease;position:relative}
.svc:nth-child(2n){border-right:0}
.svc:nth-child(3),.svc:nth-child(4){border-bottom:0}
.svc:hover{background:rgba(250,246,238,.03)}
.svc .verb{position:absolute;top:26px;left:clamp(30px,3.8vw,52px);font-family:var(--mono);font-size:11px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.svc .ghost{position:absolute;top:10px;right:22px;font-family:var(--serif);font-size:clamp(64px,7vw,110px);line-height:1;
  color:rgba(250,246,238,.07);transition:color .5s ease;pointer-events:none;z-index:1}
.svc:hover .ghost{color:rgba(201,162,75,.17)}
.svc h3{font-size:clamp(26px,2.6vw,36px);margin:0 0 10px}
.svc .sub{color:var(--text-dim);font-size:15px;max-width:34ch}
.svc ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 0;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-dim)}
.svc li{display:inline-flex;align-items:center}
.svc li+li::before{content:"·";margin:0 12px;color:var(--gold)}

/* home: the services as compact plate rows (the services-page display, smaller) */
.svc-rows{border-top:1px solid var(--hairline)}
.svc-row{display:grid;grid-template-columns:140px 1.05fr auto 44px;gap:clamp(18px,3vw,44px);align-items:center;
  padding:clamp(26px,3.2vw,38px) 0;border-bottom:1px solid var(--hairline);transition:background .35s ease}
.svc-row:hover{background:rgba(250,246,238,.02)}
.svc-row .verb{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.svc-row h3{font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);color:rgba(250,246,238,.95);line-height:1.1}
.svc-row .sub{color:var(--text-dim);font-size:14.5px;margin-top:6px}
.svc-row .chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px 0;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);justify-content:flex-end;max-width:36ch}
.svc-row .chips li{display:inline-flex;align-items:center}
.svc-row .chips li+li::before{content:"·";margin:0 10px;color:var(--gold)}
.svc-row .go{justify-self:end;width:30px;height:1px;background:var(--gold-deep);transition:width .3s var(--ease)}
.svc-row:hover .go{width:44px}

/* ---------- world band (the globe moment) ---------- */
.worldband{border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft);background:var(--night-2);overflow:hidden}
.world-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,90px);align-items:center}
.world-copy h2{font-size:clamp(30px,4.2vw,52px);margin:26px 0 18px}
.world-copy .lead{max-width:46ch}
.world-globe{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px}
.world-globe canvas{width:min(100%,460px);aspect-ratio:1/1;height:auto}

/* piggy bank removed per Devon 24 Jul; the wealth band now carries the globe */
.world-globe .halo{position:absolute;width:70%;aspect-ratio:1/1;border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,162,75,.12),transparent 70%)}
.world-facts{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.world-facts span{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);
  display:inline-flex;align-items:center;gap:10px}
.world-facts span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-deep)}

/* ---------- the conversation (pinned typed exchanges) ---------- */
.convo-head{margin-bottom:10px}
html.js .convo-runway{height:200vh}
html.js .convo-stage{position:sticky;top:0;min-height:100svh;display:flex;align-items:center}
.exchange{max-width:820px}
.exchange .q{font-family:var(--serif);font-size:clamp(26px,3.6vw,46px);line-height:1.2;color:rgba(250,246,238,.95);min-height:2.4em}
.exchange .q .cursor{display:inline-block;width:2px;height:.9em;background:var(--gold-bright);vertical-align:-.08em;margin-left:3px;
  animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.exchange .a{margin-top:30px;color:var(--text);font-size:clamp(16px,1.8vw,20px);max-width:52ch;line-height:1.7}
html.js .exchange .a .ln{display:block;overflow:hidden}
html.js .exchange .a .ln i{display:block;font-style:normal;transform:translateY(110%);transition:transform .8s var(--ease)}
html.js .exchange.answered .a .ln i{transform:none}
html.js .exchange .a .ln:nth-child(2) i{transition-delay:.08s}
html.js .exchange .a .ln:nth-child(3) i{transition-delay:.16s}
.exchange .tag{margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
html.js:not(.rm) .exchange .tag{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
html.js:not(.rm) .exchange.tagged .tag{opacity:1;transform:none}
html:not(.js) .convo-stack{display:block}
html:not(.js) .convo-stack .exchange+.exchange{margin-top:64px}
.convo-stack{display:grid;width:100%}
.convo-stack .exchange{grid-area:1/1}
html.js:not(.rm) .exchange .ch{visibility:hidden}
html.js:not(.rm) .exchange .ch.on{visibility:visible}
html.js:not(.rm) .typeline .ch{visibility:hidden}
html.js:not(.rm) .typeline .ch.on{visibility:visible}
.typeline .cursor{display:inline-block;width:2px;height:.95em;background:var(--gold-bright);vertical-align:-.1em;margin-left:2px;
  animation:blink 1.05s steps(1) infinite}
html.rm .convo-runway{height:auto}
html.rm .convo-stage{position:static;min-height:0}
html.rm .exchange{opacity:1!important;visibility:visible!important}
html.rm .exchange .q .cursor{display:none}
html.rm .exchange .a .ln i{transform:none!important}
html.rm .convo-stack{display:block}
html.rm .convo-stack .exchange+.exchange{margin-top:64px}

/* ---------- questions page: stacked exchanges ---------- */
.qa-list{max-width:820px;display:flex;flex-direction:column;gap:clamp(56px,8vw,88px);margin-top:clamp(40px,6vw,64px)}
.qa-list .exchange{opacity:1;visibility:visible}
.qa-list .q{font-family:var(--serif);font-size:clamp(24px,3.2vw,40px);line-height:1.22;color:rgba(250,246,238,.95);min-height:0}
.qa-list .a{margin-top:22px;color:var(--text);font-size:clamp(15.5px,1.7vw,19px);max-width:52ch;line-height:1.7}
html.js:not(.rm) .qa-list .exchange .a .ln i{transform:translateY(110%)}
html.js:not(.rm) .qa-list .exchange.answered .a .ln i{transform:none}
.qa-divider{height:1px;background:linear-gradient(90deg,var(--hairline),transparent)}

/* ---------- team ---------- */
.team{background:var(--night-2)}
.team .labelrow{margin-bottom:44px}
.team h2{font-size:clamp(30px,4vw,52px);margin-bottom:18px}
.team .lead{max-width:56ch}
.route-key{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 52px}
.route-key span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);
  border:1px solid var(--hairline);border-radius:100px;padding:8px 16px;background:rgba(250,246,238,.02)}
.route-key b{color:var(--gold-bright);font-weight:500}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.member{background:var(--glass);border:1px solid var(--hairline-soft);border-radius:8px;padding:30px;display:flex;flex-direction:column;gap:6px;
  transition:border-color .35s ease,transform .35s ease}
.member:hover{border-color:rgba(201,162,75,.35);transform:translateY(-4px)}
.avatar{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(250,246,238,.05);border:1px solid var(--gold-rim);color:var(--gold-bright);
  font-family:var(--serif);font-size:22px;margin-bottom:16px}
.member .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.member .name{font-family:var(--serif);font-size:25px;margin-top:4px;color:rgba(250,246,238,.95)}
.member .dept{font-size:13.5px;color:var(--text-faint);margin-bottom:16px}
.member .contact{display:flex;gap:8px;margin-top:auto}
.chip{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:10px;border-radius:100px;border:1px solid var(--hairline);color:var(--text);transition:.25s}
.chip svg{width:14px;height:14px;flex:none}
.chip:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.member.office{background:transparent;border:1px dashed var(--hairline);justify-content:center}
.member.office .name{font-size:17px;line-height:1.6;font-family:var(--sans);color:var(--text)}

/* compact team strip (home) */
.team-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:44px}
.tsm{border:1px solid var(--hairline-soft);border-radius:8px;padding:20px 18px;background:var(--glass);transition:border-color .3s ease}
.tsm:hover{border-color:rgba(201,162,75,.35)}
.tsm .role{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tsm .name{font-family:var(--serif);font-size:19px;margin-top:6px;color:rgba(250,246,238,.92)}

/* ---------- numbers ---------- */
/* stat tiles as sand hover cards (per Kauthar 29 Jul) */
.numbers .num-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.num-grid .num{padding:clamp(30px,3.8vw,50px) 26px;text-align:left;border-radius:12px;
  background:linear-gradient(168deg,#E9DFC9 0%,#D8CAAB 100%);border:1px solid rgba(25,23,19,.14);
  box-shadow:0 12px 30px rgba(0,0,0,.3);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.num-grid .num:hover{transform:translateY(-7px);box-shadow:0 24px 48px rgba(0,0,0,.45),0 0 0 1px rgba(201,162,75,.35)}
.num-grid .num .big{font-family:var(--serif);font-size:clamp(40px,5.4vw,68px);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.num-grid .num .lbl{font-size:13.5px;color:rgba(25,23,19,.6);margin-top:14px}
.num-grid .num .tc{display:block;font-family:var(--mono);font-size:9.5px;color:rgba(25,23,19,.4);letter-spacing:.18em;text-transform:uppercase;margin-top:8px}

/* ---------- careers ---------- */
.recruit-inner{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(40px,6vw,90px);align-items:center;
  background:var(--glass);border:1px solid var(--hairline-soft);border-radius:10px;padding:clamp(40px,6vw,80px)}
.recruit h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:18px}
.recruit .lead{max-width:52ch}
.recruit .cta-box{display:flex;flex-direction:column;gap:12px;align-items:stretch}

/* ---------- closing band ---------- */
.closeband{background:transparent;color:var(--bone);text-align:center;
  padding:clamp(90px,12vw,160px) 0 clamp(70px,9vw,110px);border-top:1px solid var(--hairline-soft)}
.closeband .mark{width:6px;height:6px;border-radius:50%;background:var(--gold);margin:0 auto 34px;box-shadow:0 0 18px rgba(201,162,75,.8)}
.closeband h2{font-size:clamp(32px,4.4vw,60px);margin:0 auto 22px}
.closeband .lead{color:var(--text);max-width:44ch;margin:0 auto 44px}
.closeband .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.closeband .talkfirst{font-size:13.5px;color:var(--text-faint)}
.closeband .talkfirst a{color:var(--text);border-bottom:1px solid var(--hairline)}

/* ---------- footer ---------- */
footer{background:var(--night-3);color:var(--bone);border-top:1px solid var(--hairline-soft);padding:64px 0 40px;position:relative;z-index:5}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.foot p{color:var(--text-dim);font-size:14px;max-width:38ch;margin-top:16px}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);
  margin-bottom:18px;font-weight:400}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot ul li{color:var(--text-dim);font-size:14px}
.foot ul a{color:var(--text-dim);font-size:14px;transition:.2s}
.foot ul a:hover{color:var(--bone)}
.foot-bottom{border-top:1px solid var(--hairline-soft);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  color:var(--text-faint);font-size:12.5px}
.foot-bottom .compliance{max-width:62ch;line-height:1.6}
.affrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.affrow-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);margin-right:6px}
.aff-ph{display:inline-flex;flex-direction:column;gap:4px;padding:10px 18px;border:1px dashed rgba(201,162,75,.35);border-radius:10px;
  font-family:var(--serif);font-size:16px;color:var(--text);line-height:1.1}
.aff-ph i{font-style:normal;font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
/* Official Liberty CI artwork: rendered exactly as supplied, never filtered or recoloured.
   Blue lockup on a cream chip (the chip is ours, the artwork untouched) to match the site's
   cream pill language. */
.aff-chip{display:inline-flex;align-items:center;background:#F4EEE0;border-radius:12px;padding:12px 18px}
.aff-chip img{height:36px;width:auto;display:block}
.aff-text{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--text-dim)}

/* ---------- interior page head ---------- */
.pagehead{padding:clamp(150px,18vw,220px) 0 clamp(40px,6vw,70px)}
.pagehead .labelrow{margin-bottom:34px}
.pagehead h1{font-size:clamp(36px,4.8vw,68px)}
.pagehead .lead{max-width:54ch;margin-top:24px}

/* ---------- practice page: the era line ---------- */
.eraline{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:clamp(20px,4vw,44px);
  padding:clamp(40px,6vw,64px) 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.eraline .yr{font-family:var(--serif);font-size:clamp(54px,8vw,120px);line-height:1;color:rgba(250,246,238,.95);
  font-variant-numeric:tabular-nums}
.eraline .rail{height:1px;background:var(--hairline);position:relative;overflow:visible}
.eraline .rail i{position:absolute;left:0;top:0;height:1px;width:0;background:var(--gold);transition:width 2.4s var(--ease)}
.eraline.in .rail i,html:not(.js) .eraline .rail i,html.rm .eraline .rail i{width:100%}
.eraline .cap{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-dim)}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:24px 0;font-family:var(--serif);font-size:clamp(19px,2vw,24px);color:rgba(250,246,238,.92)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--gold);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 0 26px;color:var(--text);font-size:15.5px;max-width:58ch}
.faq .faq-a p+p{margin-top:12px}

/* ---------- contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center}
.contact-routes{display:flex;flex-direction:column;gap:14px}
.route-card{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--hairline-soft);
  border-radius:10px;padding:22px 26px;background:var(--glass);transition:border-color .3s ease,transform .3s ease}
.route-card:hover{border-color:rgba(201,162,75,.35);transform:translateY(-2px)}
.route-card .who .k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.route-card .who .n{font-family:var(--serif);font-size:21px;margin-top:4px;color:rgba(250,246,238,.94)}
.route-card .who .d{font-size:13px;color:var(--text-faint);margin-top:2px}
.route-card .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.route-card .acts .chip{flex:none;padding:10px 16px}
.route-card .go{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.office-panel{border:1px dashed var(--hairline);border-radius:10px;padding:clamp(26px,3.4vw,40px);margin-top:26px}
.office-panel .adr{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);line-height:1.5;color:rgba(250,246,238,.92)}
.office-panel .tel{margin-top:16px}

/* ---------- cross-document view transitions (progressive) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .32s var(--ease) both}
::view-transition-new(root){animation:vt-in .42s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .team-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .nav-links{position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--night-2);flex-direction:column;
    justify-content:center;gap:26px;transform:translateX(100%);transition:transform .4s ease;border-left:1px solid var(--hairline)}
  .nav-links.open{transform:none}
  .nav-links a{font-size:18px;color:var(--text)}
  .nav-links a:hover{color:var(--bone)}
  .nav-toggle{display:block;position:relative;z-index:10}
  .practice-grid,.recruit-inner,.world-grid,.contact-grid,.deck-grid,.practice-duo{grid-template-columns:1fr;gap:36px}
  .deck-steps{display:none}
  .family-globe canvas{width:min(100%,320px)}
  .handover .hv-fam{display:none}
  .handover-copy{padding-top:11vh}
  .svc-row{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .svc-row .chips{justify-content:flex-start}
  .svc-row .go{display:none}
  .svc-grid{grid-template-columns:1fr}
  .svc{border-right:0!important;border-bottom:1px solid var(--hairline)!important;min-height:0;padding-top:72px}
  .svc:last-child{border-bottom:0!important}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .numbers .num-grid{grid-template-columns:repeat(2,1fr)}
  .foot-top{grid-template-columns:1fr 1fr;gap:32px}
  html.js .deck{height:clamp(340px,52vh,460px)}
  .world-globe{min-height:280px}
}
@media(max-width:560px){
  .wrap{padding:0 20px}
  .hero-inner{padding-top:120px;padding-bottom:96px}
  .scrollcue{right:20px}
  .team-grid,.team-strip{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .pill{padding:12px 20px}
  .backed-row{grid-template-columns:1fr;gap:6px}
  html.js .deck{height:clamp(380px,58vh,520px)}
  .factstrip .row{flex-direction:column;gap:10px}
  .eraline{grid-template-columns:1fr;gap:16px}
  .eraline .rail{display:none}
}
@media(prefers-reduced-motion:reduce){
  html.js .deck-runway{height:auto}
  html.js .deck-stage{position:static;min-height:0;padding:clamp(80px,11vw,140px) 0}
  html.js .deck{height:auto}
  html.js .deck-steps{display:none}
  html.js .deck-grid{grid-template-columns:1fr}
  html.js .deckcard{position:relative;opacity:1!important;transform:none!important;inset:auto;width:auto}
  html.js .deckcard+.deckcard{margin-top:20px}
  html.js .convo-runway{height:auto}
  html.js .convo-stage{position:static;min-height:0}
  .exchange .q .cursor{display:none}
  html.js .exchange .a .ln i{transform:none!important}
  html.js .exchange{opacity:1!important;visibility:visible!important}
  html.js .exchange .ch{visibility:visible!important}
  html.js .typeline .ch{visibility:visible!important}
  html.js .exchange .tag{opacity:1!important;transform:none!important}
  html.js .convo-stack{display:block}
  html.js .convo-stack .exchange+.exchange{margin-top:64px}
  .scrollcue .bar{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- partners band (per Devon 24 Jul; text marks until official logos land) ---------- */
.partners .partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-radius:10px;background:rgba(250,246,238,.014);margin-top:34px}
.partner{display:flex;flex-direction:column;gap:12px;padding:clamp(30px,3.5vw,48px) 28px;border-right:1px solid var(--hairline);transition:background .3s var(--ease)}
.partner:last-child{border-right:0}
.partner:hover{background:rgba(250,246,238,.03)}
.partner .pmark{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);color:rgba(250,246,238,.95);line-height:1}
.partner .pdesc{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);line-height:1.7}
.partner-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media (max-width:860px){
  .partners .partner-grid{grid-template-columns:1fr}
  .partner{border-right:0;border-bottom:1px solid var(--hairline)}
  .partner:last-child{border-bottom:0}
  .partner-cards{grid-template-columns:1fr}
}

/* ---------- WhatsApp CTAs breathe (per Devon 24 Jul) ---------- */
a.pill[data-cta="advise"],a.pill[data-cta="recruit"]{animation:ctabreathe 3.4s var(--ease) infinite}
@keyframes ctabreathe{
  0%,100%{box-shadow:0 0 0 0 rgba(201,162,75,.38)}
  55%{box-shadow:0 0 0 10px rgba(201,162,75,0)}
}
html.rm a.pill[data-cta="advise"],html.rm a.pill[data-cta="recruit"]{animation:none}

/* ---------- assist chat (interactive router; light card on the dark theme; per Devon 24+29 Jul) ---------- */
.assist{position:fixed;right:22px;bottom:22px;z-index:90;font-family:var(--sans)}
.assist-btn{width:54px;height:54px;border-radius:50%;border:1px solid var(--gold-rim);background:var(--gold);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .25s var(--ease);animation:ctabreathe 3.4s var(--ease) infinite}
.assist-btn:hover{transform:translateY(-2px)}
.assist-btn svg{width:24px;height:24px}
.assist-panel{position:absolute;right:0;bottom:66px;width:min(330px,calc(100vw - 44px));border-radius:16px;overflow:hidden;
  background:var(--bone);color:var(--ink);border:1px solid rgba(201,162,75,.4);box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.assist.open .assist-panel{opacity:1;transform:none;pointer-events:auto}
.assist-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,rgba(201,162,75,.22),rgba(201,162,75,.08));border-bottom:1px solid rgba(201,162,75,.3)}
.assist-head .dot{width:9px;height:9px;border-radius:50%;background:#3E9B4F;box-shadow:0 0 0 3px rgba(62,155,79,.18)}
.assist-head .t{font-family:var(--serif);font-size:18px;color:var(--ink);line-height:1.1}
.assist-head .s{font-size:11px;color:rgba(25,23,19,.55)}
.assist-close{margin-left:auto;background:none;border:0;cursor:pointer;color:rgba(25,23,19,.5);font-size:18px;line-height:1;padding:4px}
.assist-close:hover{color:var(--ink)}
.assist-thread{padding:16px;display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto}
.assist-msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.5}
.assist-msg.bot{background:rgba(25,23,19,.06);color:var(--ink);border-bottom-left-radius:4px;align-self:flex-start}
.assist-msg.user{background:var(--gold);color:var(--ink);border-bottom-right-radius:4px;align-self:flex-end}
.assist-msg a{color:var(--gold-deep);text-decoration:underline}
.assist-opts{display:flex;flex-direction:column;gap:8px;align-self:stretch}
.assist-opt{border:1px solid rgba(201,162,75,.55);background:#fff;border-radius:10px;padding:10px 14px;text-align:left;
  font-family:var(--sans);font-size:13.5px;color:var(--ink);cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
.assist-opt:hover{background:rgba(201,162,75,.14);border-color:var(--gold)}
.assist-opt .k{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(25,23,19,.5);display:block;margin-bottom:2px}
.assist-typing{display:inline-flex;gap:4px;padding:12px 14px;background:rgba(25,23,19,.06);border-radius:14px;border-bottom-left-radius:4px;align-self:flex-start}
.assist-typing i{width:6px;height:6px;border-radius:50%;background:rgba(25,23,19,.4);animation:assistdot 1.1s ease-in-out infinite}
.assist-typing i:nth-child(2){animation-delay:.18s}
.assist-typing i:nth-child(3){animation-delay:.36s}
@keyframes assistdot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
html.rm .assist-btn{animation:none}
html.rm .assist-typing i{animation:none}

/* ---------- team & contact cards: playing-card lift + Devon's gold star card (per Devon 24+29 Jul) ---------- */
.member,.route-card{position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease);will-change:transform}
.member:hover,.route-card:hover{box-shadow:0 20px 46px rgba(0,0,0,.42)}
.member.star,.route-card.star{border:1px solid rgba(201,162,75,.6);overflow:hidden;
  box-shadow:0 0 0 1px rgba(201,162,75,.22),0 0 34px rgba(201,162,75,.1),0 12px 34px rgba(0,0,0,.3)}
.member.star::after,.route-card.star::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(231,200,122,.2) 50%,transparent 58%);
  transform:translateX(-130%);animation:starsheen 6s var(--ease) infinite}
@keyframes starsheen{0%,58%{transform:translateX(-130%)}78%,100%{transform:translateX(130%)}}
html.rm .member.star::after,html.rm .route-card.star::after{animation:none;opacity:0}

/* ---------- team fan deck (Fruitful-style playing cards; per Devon/Kauthar 29 Jul) ----------
   Warm sand cards: lighter than the night theme, deliberately not full cream. */
.fan-wrap{display:flex;flex-direction:column;align-items:center}
.fan{display:flex;justify-content:center;align-items:flex-start;padding:14px 0 116px}
.fan-card{position:relative;width:clamp(150px,16.5vw,206px);aspect-ratio:3/4.1;border-radius:14px;cursor:pointer;
  background:linear-gradient(168deg,#E9DFC9 0%,#D8CAAB 100%);color:var(--ink);border:1px solid rgba(25,23,19,.14);
  display:flex;flex-direction:column;padding:12px;box-shadow:0 14px 34px rgba(0,0,0,.38);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),z-index 0s .1s;will-change:transform}
.fan-card+.fan-card{margin-left:-12px}
/* Three tiers (per Kauthar 29 Jul): Devon dominant centre; Lauren + Che fully readable beside him;
   Tess + Alwyn tucked far back on the sides, faded to near-invisible (hover brings them forward). */
.fan-card{transform:var(--t,none)}
.fan-card:nth-child(1){--t:translate(58px,96px) rotate(-16deg) scale(.78);z-index:1;opacity:.35;filter:brightness(.82) saturate(.85)}
.fan-card:nth-child(2){--t:translateY(26px) rotate(-5deg);z-index:3}
.fan-card:nth-child(3){--t:translateY(0) scale(1.12);z-index:6}
.fan-card:nth-child(4){--t:translateY(26px) rotate(5deg);z-index:3}
/* Che (4th) sits half behind Devon, so his name lives in the visible right corner */
.fan-card:nth-child(4) .fc-meta{text-align:right}
.fan-card:nth-child(5){--t:translate(-58px,96px) rotate(16deg) scale(.78);z-index:1;opacity:.35;filter:brightness(.82) saturate(.85)}
.fan-card:hover,.fan-card:focus-visible{transform:var(--t) translateY(-16px);z-index:12;opacity:1;filter:none;
  box-shadow:0 30px 60px rgba(0,0,0,.5);transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .3s var(--ease),filter .3s var(--ease),z-index 0s 0s;outline:none}
.fan-card:nth-child(3):hover,.fan-card:nth-child(3):focus-visible{transform:var(--t) translateY(-16px) scale(1.04)}
.fan-card:nth-child(1):hover,.fan-card:nth-child(5):hover,.fan-card:nth-child(1):focus-visible,.fan-card:nth-child(5):focus-visible{transform:var(--t) translateY(-16px) scale(1.18)}
.fan-card:hover ~ .fan-card,.fan-card:focus-visible ~ .fan-card{transform:var(--t) translateX(26px)}
/* Card face (v4, per client: no portraits at all). A typographic calling card:
   house name, gold rule, the person's name large, role in small caps. Same card
   size, fan and tiers as before; only the face changed. */
.fc-face{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:18px 8px 16px;border-radius:9px;border:1px solid rgba(25,23,19,.12);
  background:radial-gradient(80% 60% at 50% 30%,rgba(201,162,75,.14),transparent 70%)}
.fc-house{font-family:var(--mono);font-size:8px;letter-spacing:.34em;text-transform:uppercase;color:rgba(25,23,19,.5)}
.fc-mid{display:flex;flex-direction:column;align-items:center;gap:12px}
.fc-rule{width:26px;height:1px;background:rgba(150,116,47,.75)}
.fc-bigname{font-family:var(--serif);font-size:clamp(24px,2.8vw,34px);color:var(--ink);line-height:1.05;text-align:center}
.fc-brole{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(25,23,19,.5);text-align:center;max-width:92%;line-height:1.6}
.fc-foot{width:26px;height:1px;background:rgba(150,116,47,.35)}
.fc-more{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%) translateY(6px);white-space:nowrap;
  background:var(--ink);color:var(--bone);font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 13px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.fan-card:hover .fc-more,.fan-card:focus-visible .fc-more{opacity:1;transform:translateX(-50%) translateY(0)}
.fan-card.star{border:1px solid rgba(201,162,75,.75);overflow:visible;
  box-shadow:0 0 0 1px rgba(201,162,75,.3),0 0 30px rgba(201,162,75,.16),0 14px 34px rgba(0,0,0,.38)}
.fan-card.star .fc-face{position:relative;overflow:hidden}
.fan-card.star .fc-face::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(231,200,122,.35) 50%,transparent 58%);
  transform:translateX(-130%);animation:starsheen 6s var(--ease) infinite}
.fan-hint{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);margin-top:34px}
html.rm .fan-card{transform:none!important;opacity:1!important;filter:none!important}
html.rm .fan-card.star .fc-face::after{animation:none;opacity:0}
@media (max-width:820px){
  /* Mobile: Devon's star card leads alone at the top, the other four sit in a 2x2 grid below. */
  .fan{flex-wrap:wrap;justify-content:center;gap:16px;padding:8px 0 28px}
  .fan-card{transform:none!important;margin-left:0!important;opacity:1!important;filter:none!important;border-radius:12px}
  .fan-card:hover ~ .fan-card{transform:none!important}
  .fan-card.star{order:-1;width:min(64%,240px)}
  .fan-card:not(.star){width:calc(50% - 8px);max-width:190px}
  .fan-card:nth-child(4) .fc-meta{text-align:left}
  .fc-bigname{font-size:clamp(20px,6vw,28px)}
  .fc-note{display:none}
  .fc-meta{padding:9px 3px 3px}
  .fc-name{font-size:clamp(15px,4.4vw,20px)}
  .fc-role{font-size:7.5px;letter-spacing:.14em;margin-top:4px}
}

/* member detail overlay */
.fan-modal{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(10,9,8,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.fan-modal[hidden]{display:none}
.fm-card{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;width:min(740px,100%);border-radius:18px;overflow:hidden;
  background:linear-gradient(168deg,#E9DFC9,#D8CAAB);color:var(--ink);border:1px solid rgba(201,162,75,.5);
  box-shadow:0 40px 90px rgba(0,0,0,.6)}
/* left plate of the overlay: the same calling-card face as the deck, larger */
.fm-portrait{min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:28px;border-right:1px solid rgba(25,23,19,.12);
  background:radial-gradient(80% 60% at 50% 30%,rgba(201,162,75,.16),transparent 70%)}
.fm-portrait .fc-house{font-size:9px}
.fm-portrait .fc-rule{width:32px}
.fm-big{font-family:var(--serif);font-size:clamp(40px,5vw,60px);line-height:1;color:var(--ink);text-align:center}
.fm-note{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(25,23,19,.45);text-align:center;padding:0 20px}
.fm-body{padding:clamp(26px,4vw,42px)}
.fm-role{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.fm-name{font-family:var(--serif);font-size:clamp(28px,3.6vw,40px);line-height:1.05;margin-bottom:16px}
.fm-bio{font-size:15px;line-height:1.65;color:rgba(25,23,19,.75);max-width:44ch}
.fm-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.fm-acts .chip{border:1px solid rgba(25,23,19,.3);color:var(--ink);border-radius:99px;padding:8px 16px;font-size:12.5px;
  display:inline-flex;align-items:center;gap:8px;transition:background .2s var(--ease),border-color .2s var(--ease)}
.fm-acts .chip:hover{background:rgba(201,162,75,.2);border-color:var(--gold-deep)}
.fm-nav{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:18px;border-top:1px solid rgba(25,23,19,.15)}
.fm-nav button{background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(25,23,19,.55);padding:4px 0;transition:color .2s}
.fm-nav button:hover{color:var(--gold-deep)}
.fm-close{position:absolute;top:12px;right:16px;z-index:2;background:none;border:0;cursor:pointer;font-size:26px;line-height:1;
  color:rgba(25,23,19,.5);padding:6px}
.fm-close:hover{color:var(--ink)}
@media (max-width:640px){
  .fm-card{grid-template-columns:1fr;max-height:90vh;overflow-y:auto}
  .fm-portrait{min-height:150px;border-right:0;border-bottom:1px solid rgba(25,23,19,.12)}
  .fm-big{font-size:36px}
}

/* (home now uses the same .fan/.fan-card design as the team page; hf-card styles retired 29 Jul) */

/* ---------- star glow v3: aggressive gold pulse + sparkles on Devon's card (per Kauthar 29 Jul) ---------- */
.member.star,.route-card.star,.fan-card.star{
  border-color:rgba(231,200,122,.95);
  animation:starglow 1.5s ease-in-out infinite}
@keyframes starglow{
  0%,100%{box-shadow:0 0 0 1px rgba(201,162,75,.65),0 0 16px rgba(201,162,75,.5),0 0 46px rgba(201,162,75,.25),0 14px 34px rgba(0,0,0,.35)}
  50%{box-shadow:0 0 0 3px rgba(231,200,122,1),0 0 44px rgba(231,200,122,.85),0 0 120px rgba(201,162,75,.5),0 14px 34px rgba(0,0,0,.35)}
}
.spark{position:absolute;width:11px;height:11px;pointer-events:none;z-index:13;
  background:linear-gradient(180deg,#F6E7B4,#C9A24B);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  filter:drop-shadow(0 0 7px rgba(231,200,122,.95));opacity:0;animation:twinkle 2s ease-in-out infinite}
.spark:nth-of-type(1){top:-8px;left:12%;animation-delay:0s}
.spark:nth-of-type(2){top:-11px;right:20%;width:8px;height:8px;animation-delay:.3s}
.spark:nth-of-type(3){top:20%;left:-10px;animation-delay:.6s}
.spark:nth-of-type(4){top:34%;right:-9px;width:15px;height:15px;animation-delay:.9s}
.spark:nth-of-type(5){bottom:28%;left:-9px;width:8px;height:8px;animation-delay:1.2s}
.spark:nth-of-type(6){bottom:-9px;left:26%;animation-delay:1.5s}
.spark:nth-of-type(7){bottom:-11px;right:14%;animation-delay:.45s}
.spark:nth-of-type(8){top:58%;right:-11px;width:9px;height:9px;animation-delay:1.75s}
.spark:nth-of-type(9){top:-12px;left:48%;width:13px;height:13px;animation-delay:1.05s}
@keyframes twinkle{
  0%,100%{opacity:0;transform:scale(.15) rotate(0deg)}
  50%{opacity:1;transform:scale(1) rotate(120deg)}
}
html.rm .member.star,html.rm .route-card.star,html.rm .fan-card.star{
  animation:none;
  box-shadow:0 0 0 2px rgba(231,200,122,.85),0 0 30px rgba(201,162,75,.5),0 0 70px rgba(201,162,75,.25)}
html.rm .spark{animation:none;opacity:0}

/* stats band heading (added 29 Jul: was the only band without one) */
.numbers .num-head{font-size:clamp(28px,3.6vw,46px);margin:26px 0 34px}

/* ---------- life line: what we do as stages of a life (per redesign mock 29 Jul) ---------- */
.lifeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:clamp(44px,6vw,72px);padding-bottom:10px}
/* straight life line through the four nodes (wonky arc retired 29 Jul) */
.ll-line{position:absolute;left:2%;right:2%;top:51px;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(201,162,75,.5) 7%,rgba(201,162,75,.5) 93%,transparent)}
/* the line traces itself as the section scrolls into view (trial 29 Jul; easy to remove) */
html.js:not(.rm) .ll-line{transform:scaleX(0);transform-origin:left center;transition:transform 1.8s var(--ease) .25s}
html.js:not(.rm) .lifeline.in .ll-line{transform:scaleX(1)}
/* nodes pop in as the line reaches them, left to right */
html.js:not(.rm) .ll-stage .ll-dot{opacity:0;transform:scale(.4)}
html.js:not(.rm) .lifeline.in .ll-stage .ll-dot{opacity:1;transform:scale(1);
  transition:opacity .4s var(--ease),transform .5s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
html.js:not(.rm) .lifeline.in .ll-stage:nth-child(2) .ll-dot{transition-delay:.35s}
html.js:not(.rm) .lifeline.in .ll-stage:nth-child(3) .ll-dot{transition-delay:.8s}
html.js:not(.rm) .lifeline.in .ll-stage:nth-child(4) .ll-dot{transition-delay:1.25s}
html.js:not(.rm) .lifeline.in .ll-stage:nth-child(5) .ll-dot{transition-delay:1.7s}
.ll-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px;
  padding:10px 6px 16px;border-radius:12px;transition:background .3s var(--ease)}
.ll-verb{font-family:var(--mono);font-size:11px;line-height:16px;height:16px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);transition:color .3s}
.ll-dot{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--gold);background:var(--night);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);margin:6px 0}
.ll-name{font-family:var(--serif);font-size:clamp(22px,2.4vw,30px);line-height:1.15;color:rgba(250,246,238,.95);transition:color .3s;max-width:14ch}
.ll-sub{font-size:14px;color:var(--text-dim);transition:color .3s}
.ll-chips{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
  line-height:2;max-width:26ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .4s var(--ease)}
.ll-stage:hover,.ll-stage:focus-visible{outline:none}
.ll-stage:hover .ll-name,.ll-stage:focus-visible .ll-name{color:var(--gold-bright)}
.ll-stage:hover .ll-verb,.ll-stage:focus-visible .ll-verb{color:var(--gold-bright)}
.ll-stage:hover .ll-sub,.ll-stage:focus-visible .ll-sub{color:var(--text)}
.ll-stage:hover .ll-dot,.ll-stage:focus-visible .ll-dot{background:var(--gold);box-shadow:0 0 14px rgba(231,200,122,.8)}
.ll-stage:hover .ll-chips,.ll-stage:focus-visible .ll-chips{max-height:90px;opacity:1}
html.rm .ll-chips{max-height:none;opacity:1}
@media (max-width:820px){
  .lifeline{grid-template-columns:1fr 1fr;gap:34px 16px}
  .ll-line{display:none}
  .ll-chips{max-height:none;opacity:1}
}

/* ---------- practice arrival package (approved design; scroll-driven) ---------- */
.practice .wrap{position:relative}
.practice .practice-duo,.practice .labelrow{position:relative;z-index:1}
.ghost-year{position:absolute;left:-1.5%;bottom:4%;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--serif);font-size:clamp(170px,25vw,350px);line-height:1;
  color:rgba(201,162,75,.07);font-variant-numeric:tabular-nums;letter-spacing:.02em;will-change:transform}
.sig{position:relative;display:inline-block}
.sig svg{position:absolute;left:-2%;bottom:-.14em;width:104%;height:.34em;pointer-events:none;overflow:visible}
.sig svg path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;opacity:.85}
html.js:not(.rm) .sig svg path{transition:stroke-dashoffset 1.15s var(--ease) .1s}
.sig.on svg path{stroke-dashoffset:0!important}
html.rm .sig svg path{stroke-dasharray:none!important;stroke-dashoffset:0!important}
.pin-label{position:absolute;left:47%;top:68%;z-index:2;pointer-events:none;white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright);
  opacity:0;text-shadow:0 0 12px rgba(10,9,8,.9)}
@media (max-width:900px){.ghost-year{font-size:clamp(120px,30vw,220px);bottom:auto;top:2%}}

/* ---------- affiliates: expanding panels (index) + logo credentials (affiliates page) ----------
   Liberty CI rule (logos landed 14 Aug): official artwork renders exactly as supplied.
   No CSS filters, no recolouring, no clipping, ever. The white lockup ships on its own
   navy panel so it reads correctly on dark and cream alike. */
.xpanels{display:flex;gap:10px;height:clamp(280px,34vh,360px);margin-top:34px}
.xpanel{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  overflow:hidden;border:1px solid rgba(250,246,238,.1);border-radius:10px;background:rgba(250,246,238,.02);
  padding:56px 22px 22px;color:var(--bone);
  transition:flex .6s cubic-bezier(.22,.9,.24,1),background .6s cubic-bezier(.22,.9,.24,1),
    border-color .6s cubic-bezier(.22,.9,.24,1),opacity .4s ease}
.xp-num{position:absolute;top:18px;left:20px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  color:var(--gold);transition:color .4s}
.xp-logo{height:var(--logoh,30px);width:auto;max-width:85%;object-fit:contain;object-position:left;opacity:1}
/* umbrella group lead: statement left, the official mark on its cream chip right */
.aff-lead{display:grid;grid-template-columns:1.35fr auto;gap:44px;align-items:center;margin-top:34px}
.aff-lead-copy{color:var(--text-dim);font-size:15px;line-height:1.7;max-width:52ch;margin-top:16px}
.group-chip{display:inline-flex;align-items:center;justify-content:center;background:#F4EEE0;
  border:1px solid rgba(201,162,75,.28);border-radius:16px;padding:28px 36px;
  box-shadow:0 14px 34px rgba(0,0,0,.3)}
.group-chip img{height:64px;width:auto;display:block}
.group-mark{display:flex;align-items:center;gap:24px;margin-top:30px;flex-wrap:wrap}
.group-mark .cap{font-size:13.5px;color:var(--text-dim);line-height:1.7;max-width:40ch}
.xpanel[data-brand="standard-bank"]{--logoh:24px}   /* long wordmark: equal visual weight */
.xp-wordmark{display:none;font-family:var(--serif);font-size:clamp(22px,2.2vw,28px);line-height:1;
  color:rgba(250,246,238,.92);transition:color .4s}
.xpanel.nologo .xp-logo{display:none}
.xpanel.nologo .xp-wordmark{display:block}
.xp-desc{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(250,246,238,.45);margin-top:12px;transition:color .4s}
.xp-detail{display:block;max-height:0;opacity:0;transform:translateY(8px);overflow:hidden;
  transition:max-height .45s ease,opacity .45s ease .12s,transform .45s ease .12s,margin .45s ease}
.xp-copy{display:block;font-size:13.5px;line-height:1.6;color:rgba(23,20,16,.7);max-width:36ch}
.xp-link{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:#96742F}
/* expanded state: hover, keyboard focus, or touch .open */
.xpanel:is(:hover,:focus-visible,.open){flex:2.4;background:#F4EEE0;border-color:#F4EEE0;outline:none}
.xpanel:is(:hover,:focus-visible,.open) .xp-num{color:#96742F}
.xpanel:is(:hover,:focus-visible,.open) .xp-wordmark{color:#171410}
.xpanel:is(:hover,:focus-visible,.open) .xp-desc{color:rgba(23,20,16,.55)}
.xpanel:is(:hover,:focus-visible,.open) .xp-detail{max-height:260px;opacity:1;transform:none;margin-top:14px}
/* siblings step back while one leads */
.xpanels:hover .xpanel:not(:hover),.xpanels:focus-within .xpanel:not(:focus-visible){opacity:.55}
.xpanels:hover .xpanel:hover,.xpanels:focus-within .xpanel:focus-visible{opacity:1}
/* reduced motion: equal panels, settled cream, detail visible, no flex animation */
html.rm .xpanel{transition:none;flex:1!important;background:#F4EEE0;border-color:#F4EEE0;opacity:1!important}
html.rm .xp-num{color:#96742F}
html.rm .xp-wordmark{color:#171410}
html.rm .xp-desc{color:rgba(23,20,16,.55)}
html.rm .xp-detail{max-height:none;opacity:1;transform:none;margin-top:14px;transition:none}
@media (max-width:760px){
  .xpanels{flex-direction:column;height:auto}
  .xpanel,.xpanel:is(:hover,:focus-visible,.open){flex:none;background:#F4EEE0;border-color:#F4EEE0;opacity:1!important}
  .xpanel .xp-num{color:#96742F}
  .xpanel .xp-wordmark{color:#171410}
  .aff-lead{grid-template-columns:1fr;gap:24px;justify-items:start}
  .group-chip{padding:20px 24px}
  .group-chip img{height:48px}
  .affrow-label{flex-basis:100%;margin-right:0}
  .aff-chip{padding:10px 14px}
  .aff-chip img{height:30px}
  .xpanel .xp-desc{color:rgba(23,20,16,.55)}
  .xpanel .xp-detail{max-height:none;opacity:1;transform:none;margin-top:14px}
}

/* ---------- affiliates v2: the credential + the ledger (index) ----------
   The stacked blue lockup (transparent-backed navy artwork) sits on our cream plate,
   matching the site's cream accent surfaces; the artwork itself is untouched. The three
   group members are typographic ledger rows: deliberately no logo slots, so nothing
   reads as missing. */
.aff-h{margin-top:30px}
.aff-grid{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:clamp(40px,5vw,76px);
  margin-top:38px;align-items:center}
.aff-plaque{background:#F4EEE0;border:1px solid rgba(201,162,75,.4);border-radius:14px;
  padding:clamp(38px,4vw,54px);display:flex;align-items:center;justify-content:center;
  box-shadow:0 24px 60px rgba(0,0,0,.42)}
.aff-plaque img{width:100%;max-width:210px;height:auto;display:block}
.ledger{margin-top:26px;border-top:1px solid rgba(250,246,238,.14)}
.lrow{display:flex;align-items:center;gap:22px;padding:19px 6px;text-decoration:none;
  border-bottom:1px solid rgba(250,246,238,.14);transition:background .35s ease,padding .35s ease}
.lr-num{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--gold);flex:none;
  transition:color .35s}
.lr-body{display:flex;align-items:baseline;gap:18px;flex:1;min-width:0;flex-wrap:wrap}
.lr-name{font-family:var(--serif);font-size:clamp(21px,2vw,26px);line-height:1.1;
  color:rgba(250,246,238,.92);transition:color .35s}
.lr-caps{letter-spacing:.04em}
.lr-role{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(250,246,238,.42);transition:color .35s}
.lr-arrow{color:var(--gold-bright);opacity:0;transform:translateX(-8px);flex:none;
  transition:opacity .35s ease,transform .35s ease}
.lrow:is(:hover,:focus-visible){background:rgba(250,246,238,.04);padding-left:14px;padding-right:10px;outline:none}
.lrow:is(:hover,:focus-visible) .lr-name{color:var(--gold-bright)}
.lrow:is(:hover,:focus-visible) .lr-role{color:rgba(250,246,238,.6)}
.lrow:is(:hover,:focus-visible) .lr-arrow{opacity:1;transform:none}
html.rm .lrow,html.rm .lr-arrow{transition:none}
html.rm .lrow .lr-arrow{opacity:1;transform:none}
@media (max-width:900px){
  .aff-grid{grid-template-columns:1fr;gap:34px}
  .aff-plaque{max-width:320px;padding:34px}
  .aff-plaque img{max-width:180px}
}
@media (max-width:760px){
  .lr-body{gap:4px 14px}
  .lr-role{flex-basis:100%}
  .lrow .lr-arrow{opacity:1;transform:none}
}
/* affiliates page sections are text-led; the group mark lives once, in the pagehead */

/* ---------- film grain: felt, not seen (site-wide, 29 Jul) ---------- */
body::after{content:"";position:fixed;inset:-100%;z-index:2000;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(10) infinite;will-change:transform}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-5%,-6%)}
  20%{transform:translate(-11%,3%)}
  30%{transform:translate(6%,-9%)}
  40%{transform:translate(-4%,8%)}
  50%{transform:translate(-9%,-4%)}
  60%{transform:translate(9%,2%)}
  70%{transform:translate(-2%,6%)}
  80%{transform:translate(3%,-8%)}
  90%{transform:translate(-7%,1%)}
}
html.rm body::after{animation:none}

/* ---------- gold cursor ring + magnetic CTAs (desktop only) ---------- */
.cursor-ring{position:fixed;left:0;top:0;width:34px;height:34px;border:1px solid rgba(201,162,75,.55);
  border-radius:50%;pointer-events:none;z-index:3000;opacity:0;transition:opacity .3s ease;will-change:transform}
body.cursor-live .cursor-ring{opacity:1}
@media (hover:none){.cursor-ring{display:none}}
.magnet{transition:transform .18s var(--ease)}

/* ---------- stat count-ups: gold line draws under each number ---------- */
.num .numline{display:block;width:0;height:1px;background:var(--gold);margin-top:12px;
  transition:width 1.1s var(--ease) .45s}
.num-grid.in .numline{width:44px}
html.rm .num .numline,html:not(.js) .num .numline{width:44px;transition:none}

/* (set-piece slot above the closing band is open; constellation and ledger both retired 30 Jul) */

/* ---------- the alive package (30 Jul): the page is never fully still ----------
   1. Auras breathe on long offset cycles. 2. A whisper of gold dust drifts
   above the page (js/atmosphere.js). 3. Scene cuts in reveals.js ease each
   band in and out so the homepage reads as one continuous shot. */
.aura{animation:aurabreathe 14s ease-in-out infinite alternate;will-change:transform,opacity}
.aura.b{animation-duration:17s;animation-delay:-6s}
.aura.c{animation-duration:12s;animation-delay:-9s}
@keyframes aurabreathe{
  from{opacity:.78;transform:scale(1)}
  to{opacity:1;transform:scale(1.09)}
}
html.rm .aura{animation:none}
.dustlayer{position:fixed;inset:0;z-index:1990;pointer-events:none}