/* Echelon */
:root{
  --paper:#F8FAFC; --ink:#0F172A; --gold:#C7A86D; --slate:#64748B; --hair:#E1E7EE;
  --serif:"Playfair Display",Georgia,serif;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --out:cubic-bezier(.23,1,.32,1);
  --inout:cubic-bezier(.77,0,.175,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.7;font-weight:300;
  background:var(--ink);color:var(--ink);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.lock{overflow:hidden}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
.wrap{width:min(1320px,89vw);margin-inline:auto}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.eyebrow{font-size:.66rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--slate)}
/* The trademark rides the line rather than sitting on it, and never disturbs the
   line box. The ratio is set per context: a glyph tuned for body size becomes a
   2.4rem tick at display size. */
.tm{letter-spacing:0;vertical-align:super;line-height:0;margin-left:-.06em}
.sec-title{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.8rem);
  line-height:1.08;letter-spacing:-.02em;margin-top:1.2rem}

/* loader */
.loader{position:fixed;inset:0;background:var(--ink);z-index:200;display:flex;
  flex-direction:column;justify-content:flex-end;padding:2.2rem 5.5vw;
  transition:clip-path .9s var(--inout)}
.loader.done{clip-path:inset(0 0 100% 0);pointer-events:none}
html:not(.js) .loader{display:none}
.loader-count{font-family:var(--serif);font-size:clamp(4rem,12vw,9rem);color:var(--paper);
  line-height:1;font-variant-numeric:tabular-nums}
.loader-bar{height:1px;background:rgba(248,250,252,.16);margin-top:1.6rem}
.loader-bar i{display:block;height:100%;width:0;background:var(--gold)}
body.loading{overflow:hidden}

/* wipe */
.wipe{position:fixed;inset:0;background:var(--ink);z-index:150;pointer-events:none;
  clip-path:inset(100% 0 0 0)}

/* text roll */
.roll{display:inline-block;text-decoration:none;color:inherit}
.roll-box{display:inline-block;position:relative;overflow:hidden;vertical-align:top}
.roll-a,.roll-b{display:block;transition:transform .5s var(--out)}
.roll-b{position:absolute;inset:0;transform:translateY(105%)}
@media (hover:hover) and (pointer:fine){
  .roll:hover .roll-a{transform:translateY(-105%)}
  .roll:hover .roll-b{transform:translateY(0)}
}

/* nav: always present, but only the clickable parts. no bar, no scrim. */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;padding:1.5rem 0;pointer-events:none}
.nav .row{position:relative;display:flex;justify-content:space-between;align-items:center;gap:2rem}
.nav .logo,.nav .menu-btn{pointer-events:auto}
.logo{display:flex;align-items:center;gap:.95rem;text-decoration:none;color:inherit}
.bars{display:flex;flex-direction:column;gap:3.5px}
.bars i{display:block;height:3.5px;width:34px;background:var(--ink);
  transition:transform .5s var(--out),background .4s var(--out)}
.bars i:nth-child(3){background:var(--gold)}
@media (hover:hover) and (pointer:fine){
  .logo:hover .bars i:nth-child(2){transform:translateX(7px)}
  .logo:hover .bars i:nth-child(3){transform:translateX(13px)}
}
/* the header adapts by section rather than by blending: blend modes compute
   against the root backdrop here, not the section underneath, so they invert
   backwards over the light bands */
.wordmark,.menu-btn{color:var(--ink);transition:color .35s var(--out)}
.wordmark{font-size:.88rem;font-weight:500;letter-spacing:.42em;text-transform:uppercase}
.menu-btn{font-size:.74rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;padding:.4rem 0}

/* language: two words and a hairline, sized to sit under the menu trigger
   rather than compete with it */
.nav-right{display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.4rem);pointer-events:auto}
.langsw{display:flex;align-items:center;gap:.6rem}
.langsw button{font-size:.68rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);opacity:.4;padding:.4rem 0;transition:opacity .35s var(--out),color .35s var(--out)}
.langsw button.on{opacity:1}
.langsw button:hover{opacity:1;color:var(--gold)}
.langsw i{display:block;width:1px;height:11px;background:currentColor;opacity:.28;color:var(--ink)}
.nav.inv .langsw button,.nav.inv .langsw i,
body.menu .langsw button,body.menu .langsw i{color:var(--paper)}
.tracepage .langsw button,.tracepage .langsw i{color:var(--paper)}
@media (max-width:600px){
  .nav-right{gap:1.1rem}
  .langsw button{font-size:.62rem;letter-spacing:.14em}
}

/* the floating control: takes over once the header has retired, so the one
   action stays reachable without a bar sitting across the work all day */
.dock{position:fixed;right:clamp(1rem,2.4vw,2.2rem);bottom:clamp(1rem,3vh,2rem);
  z-index:118;display:flex;align-items:center;gap:.7rem;
  opacity:0;pointer-events:none;transform:translateY(18px);
  transition:opacity .5s var(--out),transform .5s var(--out)}
.dock.on{opacity:1;pointer-events:auto;transform:none}
body.menu .dock{opacity:0;pointer-events:none;transform:translateY(18px)}
.dock-menu{width:48px;height:48px;border-radius:999px;display:grid;place-items:center;
  background:rgba(15,23,42,.92);backdrop-filter:blur(10px);
  box-shadow:0 16px 34px -18px rgba(15,23,42,.75)}
.dock-menu span{display:flex;flex-direction:column;gap:3px;width:18px}
.dock-menu i{display:block;height:2px;width:100%;background:var(--paper);
  transition:transform .45s var(--out),background .4s var(--out)}
.dock-menu i:nth-child(3){background:var(--gold)}
@media (hover:hover) and (pointer:fine){
  .dock-menu:hover i:nth-child(2){transform:translateX(3px)}
  .dock-menu:hover i:nth-child(3){transform:translateX(6px)}
}
.dock-cta{display:inline-flex;align-items:center;height:48px;padding:0 1.6rem;
  border-radius:999px;background:var(--gold);color:var(--ink);
  font-size:.7rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 16px 34px -16px rgba(199,168,109,.85);
  transition:background .35s var(--out),transform .2s var(--out)}
.dock-cta:hover{background:#dcc48f}
.dock-cta:active{transform:scale(.97)}
@media (max-width:600px){
  .dock-cta{padding:0 1.1rem;font-size:.62rem;letter-spacing:.14em;height:44px}
  .dock-menu{width:44px;height:44px}
}
/* nav inverts over dark sections */
.nav.inv .wordmark,.nav.inv .menu-btn{color:var(--paper)}
.nav.inv .bars i{background:var(--paper)}
.nav.inv .bars i:nth-child(3){background:var(--gold)}
body.menu .nav{background:transparent!important;border-color:transparent!important;backdrop-filter:none}
body.menu .wordmark,body.menu .menu-btn{color:var(--paper)}
body.menu .bars i{background:var(--paper)}
body.menu .bars i:nth-child(3){background:var(--gold)}

/* overlay menu */
.overlay{position:fixed;inset:0;background:var(--ink);z-index:110;
  display:flex;align-items:center;visibility:hidden;
  clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--inout),visibility 0s .75s}
body.menu .overlay{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .75s var(--inout)}
.overlay .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(3rem,7vw,7rem);
  align-items:center}
.ov-link{display:block;font-family:var(--serif);font-size:clamp(1.9rem,4.2vw,3rem);
  color:var(--paper);text-decoration:none;padding:.28rem 0;overflow:hidden}
.ov-link span{display:block;transform:translateY(110%);transition:transform .7s var(--out),color .3s}
body.menu .ov-link span{transform:none}
body.menu .ov-link:nth-child(1) span{transition-delay:.15s}
body.menu .ov-link:nth-child(2) span{transition-delay:.22s}
body.menu .ov-link:nth-child(3) span{transition-delay:.29s}
body.menu .ov-link:nth-child(4) span{transition-delay:.36s}
.ov-link:hover span{color:var(--gold)}
.ov-contact{color:#8C99A8;font-size:.95rem}
.ov-label{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#5C687A;margin-bottom:1rem}
.ov-contact a{display:block;color:#A8B4C4;text-decoration:none;padding:.2rem 0}
.ov-contact a:hover{color:var(--gold)}
.ov-loc{margin-top:.6rem}
/* the one action lives here rather than as a fourth nav line, so the overlay
   asks once. the note says what actually comes back, not what Trace is. */
.ov-side{display:flex;flex-direction:column;gap:clamp(2rem,5vh,3.2rem)}
.ov-start{padding-bottom:clamp(1.8rem,4vh,2.6rem);
  border-bottom:1px solid rgba(248,250,252,.12)}
.ov-note{color:#A8B4C4;font-size:1rem;line-height:1.6;max-width:34ch;margin-bottom:1.7rem}
@media (max-width:820px){
  .overlay .wrap{grid-template-columns:1fr;gap:2.6rem;align-items:start}
  .ov-note{font-size:.94rem;margin-bottom:1.3rem}
}
@media (max-height:620px){
  .ov-note{display:none}
  .ov-link{font-size:clamp(1.5rem,3.4vw,2.1rem)}
}

/* hero: fixed, the page scrolls over it */
.hero{position:fixed;top:0;left:0;width:100%;height:100svh;overflow:hidden;
  background:#DFE5EB;z-index:1}
.hero-spacer{height:100svh}
.hero-media{position:absolute;inset:0;will-change:transform}
.hero-poster,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero video{opacity:0;transition:opacity 1.2s var(--out)}
.hero video.on{opacity:1}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(248,250,252,.82) 0%,rgba(248,250,252,.25) 34%,rgba(248,250,252,0) 60%)}
.hero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding-bottom:3rem;will-change:transform,opacity}
.hero-tsw{align-self:flex-start;margin-bottom:clamp(1.2rem,3vh,2rem)}
.hero-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6.4vw,6rem);
  line-height:1.04;letter-spacing:-.02em;color:var(--ink);max-width:16ch}
.hero-title em{font-style:italic;color:var(--gold)}
/* French runs roughly a third longer than the English. The display lines are
   masked one per line, so a wrap breaks the reveal rather than just looking
   loose: the headings get their own step down rather than a global compromise. */
/* the measure is set in ch, which scales with the font, so shrinking the type
   alone narrows the box by exactly as much and changes nothing. French needs
   both: a smaller size and a longer measure. */
html[lang="fr"] .hero-title{font-size:clamp(1.95rem,4.6vw,4.3rem);max-width:34ch}
html[lang="fr"] .close-title{font-size:clamp(2.2rem,6.6vw,5.8rem)}
html[lang="fr"] .rail-h{font-size:clamp(1.9rem,3.9vw,3.5rem)}
html[lang="fr"] .deck-title{font-size:clamp(1.25rem,2vw,1.85rem)}
/* .firm-h is deliberately absent: it holds the trademark, which is a name and is
   the same length in both languages, so the French step down would be wrong */
html[lang="fr"] .tp-h{font-size:clamp(1.8rem,3.9vw,3.1rem)}
.hl{display:block;overflow:hidden}
.hl>span{display:block;transform:translateY(112%)}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem 3rem;margin-top:2.4rem;flex-wrap:wrap}
.hero-sub{color:#46536B;font-size:1rem;line-height:1.6;margin-right:auto}
.cta-line{font-size:.74rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  border-bottom:1px solid var(--gold);padding-bottom:.5rem}
.est{font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--slate)}
.scrollcue{position:absolute;left:50%;bottom:1.4rem;z-index:3;width:1px;height:44px;
  background:rgba(15,23,42,.16);overflow:hidden}
.scrollcue i{display:block;width:100%;height:40%;background:var(--gold);
  animation:cue 2.2s var(--inout) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(250%)}}

/* the scrolling stage, rides above the hero */
.stage{position:relative;z-index:10;background:var(--paper)}

/* statement */
.statement{padding:clamp(7rem,16vh,12rem) 0;background:var(--paper);
  border-bottom:1px solid var(--hair)}
.say{width:min(1100px,86vw);margin-inline:auto;text-align:center;
  font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,4.2vw,3.4rem);
  line-height:1.24;letter-spacing:-.015em}
.say em{font-style:italic;color:var(--gold)}
.say .w{display:inline-block;color:#A9B4C2;transition:color .5s var(--out)}
.say .w.on{color:var(--ink)}
.say em .w.on{color:var(--gold)}

/* decks: one full panel per screen */
.deck{position:relative;background:var(--paper)}
.deck-pin{height:100svh;position:relative;overflow:hidden}
/* the plate fills the screen; the section title rides on top of it */
.deck-bar{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:5;
  width:min(1320px,89vw);display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;padding-top:calc(6.5svh + 2.4rem);padding-bottom:1.2rem;
  border-bottom:1px solid rgba(15,23,42,.14)}
.deck.dark .deck-bar{border-bottom-color:rgba(248,250,252,.18)}
.deck-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.3vw,2.1rem);
  line-height:1.15;letter-spacing:-.02em;margin-top:.7rem;text-wrap:balance}
/* position as a rank rather than a fraction: the current numeral, then one
   segment per panel with the live one extended in gold. same idea as the mark. */
.deck-count{display:flex;align-items:center;white-space:nowrap}
.dc-seg{display:flex;align-items:center;gap:7px}
.dc-seg i{display:block;width:18px;height:2px;background:rgba(15,23,42,.3);
  transition:width .55s var(--out),background .55s var(--out)}
.dc-seg i.on{width:38px;background:var(--gold)}
.deck-strip{position:absolute;inset:0;display:flex;will-change:transform}
/* full-bleed plate with the copy set over it, held legible by a side scrim */
.panel{flex:0 0 auto;width:100vw;position:relative;display:flex;align-items:center;
  height:100%;padding:0;overflow:hidden}
.panel-media{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:#E8EDF2;will-change:transform}
.panel-media img{width:100%;height:100%;object-fit:cover;will-change:transform;transform:scale(1.14)}
/* top band carries the section title, side band carries the copy */
.panel::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(248,250,252,.94) 0%,rgba(248,250,252,.72) 11%,rgba(248,250,252,0) 24%),
    linear-gradient(100deg,rgba(248,250,252,.97) 0%,rgba(248,250,252,.92) 26%,
      rgba(248,250,252,.6) 46%,rgba(248,250,252,.08) 68%,rgba(248,250,252,0) 82%)}
.deck.dark .panel::before{
  background:
    linear-gradient(to bottom,rgba(15,23,42,.94) 0%,rgba(15,23,42,.72) 11%,rgba(15,23,42,0) 24%),
    linear-gradient(100deg,rgba(15,23,42,.97) 0%,rgba(15,23,42,.92) 26%,
      rgba(15,23,42,.6) 46%,rgba(15,23,42,.08) 68%,rgba(15,23,42,0) 82%)}
.panel-txt{position:relative;z-index:2;width:min(48ch,45vw);
  margin-left:max(5.5vw,calc((100vw - 1320px)/2));will-change:transform,opacity}
.panel-big{position:absolute;z-index:1;right:clamp(2rem,6vw,6rem);
  bottom:clamp(.6rem,2.4svh,2rem);font-family:var(--serif);font-weight:400;
  font-size:clamp(5rem,13vw,12rem);line-height:.78;color:transparent;
  -webkit-text-stroke:1px rgba(199,168,109,.9);pointer-events:none;user-select:none}
.deck.dark .panel-big{-webkit-text-stroke-color:rgba(199,168,109,.7)}
.panel-idx{display:none}
.panel h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.1vw,2.7rem);
  line-height:1.1;letter-spacing:-.02em}
.panel .promise{font-family:var(--serif);font-style:italic;color:var(--gold);
  font-size:clamp(1.02rem,1.4vw,1.2rem);margin-top:.9rem}
.panel-txt>p:not(.promise){color:#46536B;font-size:1rem;margin-top:1.1rem}
/* no bullets, no rules: the capabilities read as set copy, spaced to breathe */
.panel ul{list-style:none;margin-top:1.9rem;display:flex;flex-direction:column;gap:.85rem}
.panel li{font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.5;color:#46536B;
  max-width:36ch;font-weight:300}
.panel li b{font-weight:400;color:var(--ink)}
.deck.dark .panel li{color:#9DAABB}
.deck.dark .panel li b{color:var(--paper)}
.deck-prog{flex:0 0 auto;height:2px;background:var(--hair)}
.deck-prog i{display:block;height:100%;width:0;background:var(--gold)}

/* dark deck */
.deck.dark{background:var(--ink)}
.deck.dark .deck-title,.deck.dark .panel h3{color:var(--paper)}
.deck.dark .eyebrow,.deck.dark .deck-count{color:#7A8798}
.deck.dark .deck-bar,.deck.dark .deck-prog{border-color:rgba(248,250,252,.14);background-color:transparent}
.deck.dark .dc-seg i{background:rgba(248,250,252,.3)}
.deck.dark .dc-seg i.on{background:var(--gold)}
.deck.dark .deck-prog{background:rgba(248,250,252,.14)}
.deck.dark .deck-prog i{background:var(--gold)}
.deck.dark .panel-txt>p:not(.promise){color:#94A2B4}
.deck.dark .panel ul,.deck.dark .panel li{border-color:rgba(248,250,252,.14)}
.deck.dark .panel li{color:#94A2B4}
.deck.dark .panel-media{background:#16203A}

@media (max-width:920px){
  .deck-pin{height:auto;overflow:visible}
  .deck-bar{padding-top:8svh;padding-inline:5.5vw}
  .deck-count{display:none}
  /* the strip is absolutely positioned for the horizontal rail; below 920 it
     stacks, so it has to rejoin the flow or the whole deck measures zero and
     paints over the sections around it */
  .deck-strip{position:static;inset:auto;flex-direction:column;gap:4rem;
    padding:3rem 5.5vw 6vh;transform:none!important}
  .panel{flex:1 1 auto;width:100%;flex-direction:column;gap:1.6rem;height:auto;overflow:visible}
  .panel::before{display:none}
  .panel-media{position:relative;inset:auto;aspect-ratio:4/3;height:auto;width:100%}
  .panel-media img{transform:none}
  .panel-txt{width:100%;margin-left:0}
  .panel-big{position:static;font-size:3.4rem;-webkit-text-stroke-width:1px;display:block;
    margin-bottom:-.6rem}
  .deck-prog{display:none}
}

/* the firm */
.firm{padding:12vh 0 13vh;background:var(--paper);overflow:hidden}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the method: dark band, three measured facts, no claim about size */
.firm{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
  padding:clamp(6rem,15vh,11rem) 0}
.firm-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.firm-vid{width:100%;height:118%;object-fit:cover;opacity:.3;will-change:transform}
.firm-scrim{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(15,23,42,.97) 0%,rgba(15,23,42,.86) 48%,rgba(15,23,42,.66) 100%)}
.firm-in{position:relative;z-index:1}
.firm-lead{max-width:70ch;text-align:center;margin-inline:auto}
.firm-lead .firm-sub{margin-inline:auto}
.firm-lead .eyebrow{color:#7A8798}
.firm-h{font-family:var(--serif);font-weight:400;color:var(--paper);
  font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;letter-spacing:-.025em;margin-top:1.1rem}
/* at display size the mark needs its own ratio, or it reads as a second word */
.firm-h .tm{font-size:.34em}
/* the claim the Framework makes, kept at full strength under its name */
.firm-claim{font-family:var(--serif);font-weight:400;color:var(--paper);
  font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.3;letter-spacing:-.012em;
  margin-top:1rem}
.firm-sub{color:#94A2B4;font-size:1rem;line-height:1.65;margin-top:1.5rem;max-width:36ch}

/* three measured facts set as a numeric register. no cards, no imagery: the
   numbers carry it. gold falls on 01 alone, because gold marks the constraint
   and nothing else. */
.mcards{--gut:clamp(2.6rem,6vw,6rem);
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);
  margin-top:clamp(3.5rem,9vh,6.5rem)}
.mcards::before{content:'';position:absolute;inset:-40% -12% -55%;pointer-events:none;
  background:radial-gradient(50% 58% at 50% 48%,rgba(199,168,109,.13),transparent 72%);
  filter:blur(34px)}
.mfact{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  text-align:center;transition:transform .55s var(--out)}
.mfact-n{font-family:var(--serif);font-weight:400;color:var(--paper);
  font-size:clamp(4.2rem,8.4vw,8.4rem);line-height:.8;letter-spacing:-.038em;
  font-variant-numeric:tabular-nums;transition:color .55s var(--out)}
.mfact.gold .mfact-n{color:var(--gold)}
/* short at rest, drawn out from the middle when the column is picked up */
.mfact-rule{display:block;height:1px;width:clamp(2.6rem,4vw,4rem);transform-origin:center;
  background:rgba(248,250,252,.28);
  margin:clamp(1.5rem,3.4vh,2.3rem) 0 clamp(1.1rem,2.5vh,1.7rem);
  transition:width .7s var(--out),background .55s var(--out)}
.mfact.gold .mfact-rule{background:rgba(199,168,109,.9)}
.mfact h3{font-family:var(--serif);font-weight:400;color:var(--paper);
  font-size:clamp(1.3rem,2vw,1.78rem);line-height:1.12;letter-spacing:-.018em}
.mfact-d{color:#94A2B4;font-size:.97rem;line-height:1.62;margin-top:.9rem;
  max-width:34ch;margin-inline:auto;transition:color .55s var(--out)}
@media (hover:hover) and (pointer:fine){
  .mfact:hover{transform:translateY(-10px)}
  .mfact:hover .mfact-rule{width:100%;background:rgba(248,250,252,.5)}
  .mfact.gold:hover .mfact-rule{background:var(--gold)}
  .mfact:hover .mfact-d{color:#B9C5D4}
}
@media (max-width:920px){
  .mcards{grid-template-columns:1fr;gap:clamp(2.4rem,6vh,3.4rem);
    max-width:30rem;margin-inline:auto}
  .mfact-d{max-width:none}
}

/* engagements: one pinned rail, the heading is panel one and travels with it */
.rail{position:relative;background:var(--paper)}
.rail-pin{height:100svh;overflow:hidden;position:relative}
/* the background sits on the track itself, not the panels: panels are narrower
   than the viewport, so per-panel backgrounds leave gaps the backdrop shows through */
.rail-track{position:relative;z-index:1;display:flex;align-items:center;height:100%;
  width:max-content;will-change:transform;
  background-image:linear-gradient(to bottom,#FFFFFF 0%,var(--paper) 55%,#F2F5F9 100%)}
/* one hairline seam per panel boundary, travelling with the track */
/* The cards hang from a common top rather than being centred: Trace carries a
   toggle the others do not, so centring pushed its image higher than the rest
   and the row stopped reading as a row. Anchoring the top means any card can
   grow downward without moving the ones beside it. */
.rp{flex:0 0 auto;position:relative;height:100%;display:flex;align-items:flex-start;
  padding-block:clamp(3.5rem,19vh,10rem) 0;
  padding-inline:clamp(2rem,4.5vw,5rem)}
.rp-intro{align-items:center;padding-block:0}
.rp+.rp::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:rgba(15,23,42,.07)}

/* intro panel */
.rp-intro{width:50vw;padding-left:max(5.5vw,calc((100vw - 1320px)/2))}
.rp-intro-in{width:100%;will-change:transform}
.rail-h{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,4.4vw,4rem);
  line-height:1.06;letter-spacing:-.025em;color:var(--ink)}
.rp-intro .rcta{margin-top:clamp(2rem,5vh,3.4rem);margin-left:33%}

/* the shared label, rule and arrow */
.rcta{display:block;text-decoration:none;color:var(--ink);min-width:min(320px,26vw)}
.rcta-label{display:block;font-size:.66rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase}
.rcta-rule{position:relative;display:block;height:1px;width:100%;
  background:rgba(15,23,42,.22);margin-top:.85rem;
  transition:background .4s var(--out)}
.rcta-arrow{position:absolute;right:0;top:50%;translate:0 -50%;font-style:normal;
  font-size:.9rem;line-height:1;color:var(--ink);
  transition:transform .4s var(--out)}
.rcta.center{margin-inline:auto;text-align:center}
.rcta.small{min-width:min(200px,17vw)}

/* project panel */
.card{display:block;text-decoration:none;color:inherit;width:42vw;
  will-change:transform}
a.card{cursor:pointer}
.card-media{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;
  overflow:hidden;background:#E8EDF2}
.card-media img{width:100%;height:100%;object-fit:cover;will-change:transform}
.card-frame{position:absolute;inset:2.4%;border:1px solid rgba(248,250,252,.28);
  border-radius:5px;pointer-events:none;transition:border-color .4s var(--out)}
.card:hover .card-frame{border-color:rgba(248,250,252,.6)}
.card:hover .rcta-rule{background:var(--gold)}
.card:hover .rcta-arrow{transform:translateX(4px)}
.rcta:hover .rcta-arrow{transform:translateX(4px)}
.rcta:hover .rcta-rule{background:var(--gold)}
.card-meta{display:flex;justify-content:space-between;align-items:flex-end;
  gap:2rem;width:100%;margin-top:clamp(1.1rem,2.4vh,1.7rem)}
.card-txt{display:block;max-width:34ch}
.card-title{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1;letter-spacing:-.02em}
.card-desc{display:block;color:var(--slate);font-size:.92rem;line-height:1.55;margin-top:.55rem}
/* Forge, Elevate and Counsel have no page to open, so they state an outcome
   rather than carrying a link that lands on the form */
.card-fact{display:block;min-width:min(210px,18vw);max-width:26ch;
  border-top:1px solid var(--hair);padding-top:.7rem}
.card-fact-k{display:block;font-size:.6rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--slate)}
.card-fact-v{display:block;font-family:var(--serif);font-size:1.02rem;line-height:1.3;
  color:var(--ink);margin-top:.45rem}
.card-fact-k + .card-fact-v{margin-top:.45rem}
.card-tsw{margin-top:clamp(1rem,2.2vh,1.5rem)}

/* the panel behind the rail, uncovered once the track clears the screen */
.rail-back{position:absolute;inset:0;z-index:0;display:flex;align-items:center;
  background:linear-gradient(to bottom,#EEF2F7 0%,#E4EAF1 100%)}
.rb-in{width:min(1320px,89vw)}
.rb-in{text-align:center}
.rb-words{margin:1.2rem 0 clamp(1.6rem,4vh,2.6rem);line-height:.86}
.rb-words span{display:block;font-family:Archivo,var(--sans);
  font-variation-settings:'wdth' 120;font-weight:600;letter-spacing:-.02em;
  color:var(--gold);font-size:clamp(3.4rem,15vw,13rem)}
/* Three terms of an exchange rather than a paragraph about a process. The
   figures are the point: seventeen, six, two days. A block of grey prose here
   read like every other onboarding page, and said nothing the rest of the page
   had not already said twice. */
.rb-detail{border-top:1px solid rgba(15,23,42,.12);
  padding-top:clamp(1.6rem,3.8vh,2.6rem)}
.rb-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.8rem,3.6vw,3.6rem);text-align:left}
.rb-k{display:block;font-size:.6rem;font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--slate)}
.rb-v{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1rem,1.35vw,1.24rem);line-height:1.42;letter-spacing:-.01em;
  color:var(--ink);margin-top:.7rem;text-wrap:pretty}
.rb-detail .tsw-wrap{margin-top:clamp(1.8rem,4.2vh,3rem)}
@media (max-width:900px){
  .rb-steps{grid-template-columns:1fr;gap:1.6rem}
}

/* mobile: no pin, the rail becomes a stack */
@media (max-width:920px){
  .rail-pin{height:auto;overflow:visible}
  .rail-track{width:auto;flex-direction:column;align-items:stretch;
    padding:10vh 5.5vw;gap:5rem;transform:none!important}
  .rail-track{background-image:none}
  .rp{height:auto;padding:0;width:100%!important}
  .rp+.rp::before{display:none}
  .rail-back{position:static;inset:auto;background:none;margin-top:4rem}
  .rb-words span{transform:none!important}
  .rp-intro-in{transform:none!important}
  .rp-intro .rcta{margin-left:0}
  .card{width:100%;cursor:pointer;transform:none}
  .rcta.center{margin-inline:0;text-align:left}
}
.fcap{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--slate)}
.vault{margin-top:2rem;display:grid;grid-template-columns:auto 1fr;
  gap:clamp(2.5rem,7vw,7rem);align-items:center;perspective:1100px}
/* polished steel: the conic sweep is what makes metal read as metal,
   because a turned surface reflects the room in bands, not as a flat tone */
.vault-dial{position:relative;width:clamp(230px,26vw,330px);aspect-ratio:1;
  border-radius:50%;transform:rotateX(18deg);transform-style:preserve-3d;
  background:
    conic-gradient(from 210deg,
      #FDFEFF 0deg,#9AA6B5 22deg,#E8EDF3 46deg,#7E8B9C 74deg,
      #F4F7FA 104deg,#8F9BAA 134deg,#DDE4EC 166deg,#6F7C8D 196deg,
      #F8FAFC 226deg,#98A4B3 256deg,#E4EAF1 286deg,#7B8899 316deg,#FDFEFF 360deg);
  box-shadow:
    0 46px 64px -30px rgba(15,23,42,.6),
    0 9px 0 -2px #8D99A9,
    0 15px 0 -3px #75828F,
    inset 0 2px 5px rgba(255,255,255,.95),
    inset 0 -8px 16px rgba(15,23,42,.28),
    inset 0 0 0 1px rgba(15,23,42,.2)}
/* specular sweep across the top of the disc */
.vault-dial::before{content:'';position:absolute;inset:2%;border-radius:50%;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.12) 26%,
    rgba(255,255,255,0) 46%,rgba(255,255,255,.16) 72%,rgba(255,255,255,.5) 100%);
  mix-blend-mode:screen;opacity:.6}
/* graduations: fine ticks every 6deg, long ticks every 30deg */
.vault-ring{position:absolute;inset:7%;border-radius:50%;will-change:transform;
  background:
    repeating-conic-gradient(from 0deg,rgba(15,23,42,.62) 0deg .8deg,transparent .8deg 6deg),
    repeating-conic-gradient(from 0deg,rgba(15,23,42,.9) 0deg 1.4deg,transparent 1.4deg 30deg);
  -webkit-mask:radial-gradient(circle,transparent 0 68%,#000 70%,#000 88%,transparent 90%);
  mask:radial-gradient(circle,transparent 0 68%,#000 70%,#000 88%,transparent 90%)}
/* knurled rim */
.vault-dial::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(15,23,42,.16) 0deg 1deg,transparent 1deg 3.2deg);
  -webkit-mask:radial-gradient(circle,transparent 0 93%,#000 95% 100%);
  mask:radial-gradient(circle,transparent 0 93%,#000 95% 100%)}
.vault-mark{position:absolute;top:-2px;left:50%;transform:translateX(-50%);z-index:3;
  width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
  border-top:13px solid var(--gold)}
/* the centre boss is turned steel too, with the brass ring as the only warm note */
.vault-face{position:absolute;inset:24%;border-radius:50%;z-index:2;
  transform:translateZ(16px);
  background:
    conic-gradient(from 30deg,
      #FBFCFE 0deg,#AEB9C6 40deg,#F1F4F8 82deg,#8E9AA9 126deg,
      #F7F9FB 170deg,#9FAAB8 216deg,#EDF1F6 262deg,#8894A3 308deg,#FBFCFE 360deg);
  box-shadow:
    inset 0 0 0 2px rgba(199,168,109,.85),
    inset 0 3px 7px rgba(255,255,255,.95),
    inset 0 -7px 14px rgba(15,23,42,.3),
    0 18px 26px -14px rgba(15,23,42,.8);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem}
.vault-mark{border-top-color:#C7A86D;filter:drop-shadow(0 2px 3px rgba(15,23,42,.5))}
.vault-term{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.75rem);color:var(--ink);
  line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.vault-def{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:#4A5567;
  text-shadow:0 1px 0 rgba(255,255,255,.65)}
.vault-list{list-style:none;counter-reset:none}
.vault-list li{display:flex;align-items:baseline;gap:1.2rem;padding:.95rem 0;
  border-bottom:1px solid var(--hair);font-family:var(--serif);
  font-size:clamp(1.25rem,2.2vw,1.85rem);color:#A9B4C2;
  transition:color .45s var(--out),padding-left .45s var(--out)}
.vault-list li span{font-family:var(--sans);font-size:.64rem;letter-spacing:.22em;
  color:var(--slate);transition:color .45s var(--out)}
.vault-list li.on{color:var(--ink);padding-left:.9rem}
.vault-list li.on span{color:var(--gold)}
@media (max-width:920px){
  .stat{grid-template-columns:1fr;gap:1rem}
  .vault{grid-template-columns:1fr;gap:2.5rem;justify-items:center}
  .vault-list{width:100%}
}

/* closing */
.closing{background:var(--ink);color:var(--paper);padding:16vh 0 18vh}
.close-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,8vw,7rem);
  line-height:1.03;letter-spacing:-.022em}
.close-title em{font-style:italic;color:var(--gold)}
.close-sub{color:#A8B4C4;max-width:44ch;margin-top:1.8rem;font-size:1.06rem}
/* the Trace toggle: same object everywhere, throwing to the Trace page */
.tsw{display:inline-flex;align-items:center;gap:1rem;padding:.4rem 0}
.tsw-track{position:relative;width:60px;height:31px;border-radius:999px;flex:0 0 auto;
  background:rgba(15,23,42,.1);box-shadow:inset 0 0 0 1px rgba(15,23,42,.22);
  transition:background .4s var(--out),box-shadow .4s var(--out)}
.tsw-knob{position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;
  background:var(--ink);transition:transform .45s var(--inout),background .4s var(--out)}
.tsw-label{font-size:.7rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;transition:color .4s var(--out)}
.tsw:hover .tsw-track,.tsw.on .tsw-track{background:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.tsw:hover .tsw-knob,.tsw.on .tsw-knob{transform:translateX(29px)}
.tsw.dark .tsw-track{background:rgba(248,250,252,.14);box-shadow:inset 0 0 0 1px rgba(248,250,252,.24)}
.tsw.dark .tsw-knob{background:var(--paper)}
.tsw.dark .tsw-label{color:var(--paper)}
.tsw.dark:hover .tsw-track,.tsw.dark.on .tsw-track{background:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.tsw.dark:hover .tsw-knob,.tsw.dark.on .tsw-knob{background:var(--ink)}
.tsw-wrap.center{display:flex;justify-content:center}

.arm{display:flex;align-items:center;gap:1.6rem;margin-top:3rem;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:1.1rem;padding:.5rem .5rem .5rem .5rem;
  border-radius:999px}
.switch-track{position:relative;width:74px;height:38px;border-radius:999px;
  background:rgba(248,250,252,.14);box-shadow:inset 0 0 0 1px rgba(248,250,252,.2);
  transition:background .45s var(--out),box-shadow .45s var(--out)}
.switch-knob{position:absolute;top:4px;left:4px;width:30px;height:30px;border-radius:50%;
  background:var(--paper);box-shadow:0 4px 12px -4px rgba(0,0,0,.6);
  transition:transform .45s var(--inout),background .45s var(--out)}
.switch[aria-checked="true"] .switch-track{background:var(--gold);
  box-shadow:inset 0 0 0 1px var(--gold)}
.switch[aria-checked="true"] .switch-knob{transform:translateX(36px);background:var(--ink)}
.switch-label{position:relative;display:block;font-size:.72rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--paper);
  height:1.25em;overflow:hidden;min-width:15ch;text-align:left}
.switch-off,.switch-on{display:block;transition:transform .45s var(--out)}
.switch-on{position:absolute;inset:0;transform:translateY(110%);color:var(--gold)}
.switch[aria-checked="true"] .switch-off{transform:translateY(-110%)}
.switch[aria-checked="true"] .switch-on{transform:translateY(0)}

/* the form itself, opened by the switch */
.trace{overflow:hidden;height:0;opacity:0;margin-top:0}
.trace-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2rem;
  padding-top:clamp(2rem,5vh,3.2rem)}
.tf{display:block}
.tf.wide{grid-column:1/-1}
.tf>span{display:block;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:#7A8798;margin-bottom:.6rem}
.tf input,.tf textarea{display:block;width:100%;padding:.85rem 0;border:0;
  border-bottom:1px solid rgba(248,250,252,.2);background:none;
  font:inherit;font-size:1rem;color:var(--paper);border-radius:0;
  transition:border-color .35s var(--out)}
.tf textarea{resize:vertical;line-height:1.6}
.tf input::placeholder,.tf textarea::placeholder{color:#59667A}
.tf input:focus,.tf textarea:focus{outline:none;border-bottom-color:var(--gold)}
.tf.bad input,.tf.bad textarea{border-bottom-color:#C86D6D}
/* Chrome repaints an autofilled field pale and leaves the text colour alone, so
   a light value lands white on near white. the inset shadow is the only way to
   put the dark ground back, and the long transition stops Chrome overriding it. */
.tf input:-webkit-autofill,
.tf input:-webkit-autofill:hover,
.tf input:-webkit-autofill:focus,
.tf textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--paper);caret-color:var(--paper);
  -webkit-box-shadow:0 0 0 100px var(--ink) inset;box-shadow:0 0 0 100px var(--ink) inset;
  transition:background-color 6000s ease-in-out 0s,border-color .35s var(--out)}
.trace-foot{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
  margin-top:clamp(1.6rem,4vh,2.6rem)}
.trace-note{color:#7A8798;font-size:.85rem;max-width:38ch}
.trace-done{padding-top:clamp(2rem,5vh,3.2rem);max-width:52ch}
.trace-done-h{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--paper);margin-bottom:.9rem}
.trace-done p{color:#94A2B4;line-height:1.65}
@media (max-width:720px){ .trace-grid{grid-template-columns:1fr} }

.close-actions{display:flex;align-items:center;gap:2.6rem;margin-top:3rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:1.1rem;padding:1.25rem 3rem;
  background:var(--gold);color:var(--ink);text-decoration:none;font-size:.72rem;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;border:0;cursor:pointer;
  transition:background .3s var(--out),transform .16s var(--out)}
.btn:hover{background:#dcc48f}
.btn:active{transform:scale(.97)}
.btn span{transition:transform .3s var(--out)}
.btn:hover span{transform:translateX(6px)}
.talk{color:#A8B4C4;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid #3d4a5f;padding-bottom:.45rem}
.talk:hover{color:var(--gold)}

/* contact panel */
.cpanel-veil{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:130;
  opacity:0;pointer-events:none;transition:opacity .5s var(--out)}
body.panel-open .cpanel-veil{opacity:1;pointer-events:auto}
.cpanel{position:fixed;top:0;right:0;bottom:0;width:min(480px,92vw);z-index:140;
  background:var(--paper);padding:4.5rem 3rem 3rem;overflow-y:auto;
  transform:translateX(102%);transition:transform .6s var(--inout)}
body.panel-open .cpanel{transform:none}
.cpanel-x{position:absolute;top:1.4rem;right:1.6rem;font-size:1.8rem;line-height:1;color:var(--slate)}
.cpanel-x:hover{color:var(--ink)}
.cpanel h3{font-family:var(--serif);font-weight:400;font-size:1.9rem;margin:.9rem 0 2rem}
.cpanel label{display:block;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--slate);margin-bottom:1.4rem}
.cpanel input,.cpanel textarea{display:block;width:100%;margin-top:.5rem;padding:.85rem 0;
  border:0;border-bottom:1px solid var(--hair);background:none;font:inherit;font-size:1rem;
  color:var(--ink);border-radius:0;transition:border-color .3s}
.cpanel input:focus,.cpanel textarea:focus{outline:none;border-bottom-color:var(--gold)}
.cpanel input:-webkit-autofill,
.cpanel input:-webkit-autofill:hover,
.cpanel input:-webkit-autofill:focus,
.cpanel textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 100px var(--paper) inset;box-shadow:0 0 0 100px var(--paper) inset;
  transition:background-color 6000s ease-in-out 0s,border-color .3s}
.cpanel .btn{margin-top:.6rem}
.cpanel-note{font-size:.8rem;color:var(--slate);margin-top:1rem;letter-spacing:0;text-transform:none}

/* footer: exactly one screen */
footer{position:relative;background:var(--ink);color:#8C99A8;height:100svh;overflow:hidden;
  display:flex;align-items:stretch;border-top:1px solid rgba(248,250,252,.08)}
.foot-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.foot-vid,.foot-bg>video{width:100%;height:100%;object-fit:cover;
  opacity:.34;filter:saturate(.7) contrast(1.05)}
.foot-scrim{position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(15,23,42,.94) 0%,rgba(15,23,42,.72) 45%,rgba(15,23,42,.9) 100%)}
footer{flex-direction:column;justify-content:space-between}
.foot-in{position:relative;z-index:1;padding:calc(9svh + 2rem) 0 0}
.foot-tail{position:relative;z-index:1;padding-bottom:2rem}
/* the four bars sweep across and open the footer */
.foot-shutter{position:absolute;inset:0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column}
.foot-shutter i{flex:1;display:block;background:var(--ink);transform-origin:left center}
.foot-shutter i.gold{background:var(--gold)}
.foot-top{display:grid;grid-template-columns:1.1fr 1.4fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.foot-say{font-family:var(--serif);font-size:clamp(1.5rem,3.1vw,2.6rem);color:var(--paper);
  line-height:1.2;font-weight:400;letter-spacing:-.015em}
.foot-say em{font-style:italic;color:var(--gold)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.foot-cols h4{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#5C687A;
  margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1px solid rgba(248,250,252,.1)}
.foot-cols a,.foot-cols p{display:block;color:#A8B4C4;text-decoration:none;font-size:.95rem;
  padding:.3rem 0;transition:color .3s var(--out)}
.foot-cols a:hover{color:var(--gold)}
.foot-cta{color:var(--gold)!important;font-size:.74rem!important;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;border-bottom:1px solid rgba(199,168,109,.4);
  display:inline-block!important;padding-bottom:.4rem!important}
.foot-cta span{display:inline-block;transition:transform .3s var(--out)}
.foot-cta:hover span{transform:translateX(5px)}
/* the four bars of the mark are cut straight through the wordmark. while the
   reader is moving the bands shear apart; when they stop the word reassembles. */
/* full bleed: the wordmark spans the page edge to edge */
/* the name, set large and tracked across the footer. no mark, just the word. */
.slab{position:relative;z-index:1;display:block;text-decoration:none;
  padding:clamp(1.6rem,4.5vh,3.4rem) max(5.5vw,calc((100vw - 1560px)/2))}
.slab-word{display:flex;justify-content:space-between;width:100%}
.slab-word b{font-family:Archivo,var(--sans);font-variation-settings:'wdth' 116;
  font-weight:600;font-size:clamp(2.6rem,10.4vw,9.4rem);line-height:.92;
  color:#FFFFFF;transition:color .5s var(--out)}
@media (hover:hover) and (pointer:fine){
  .slab:hover .slab-word b{color:var(--gold)}
}
.fbot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
  border-top:1px solid rgba(248,250,252,.1);padding-top:1.4rem;font-size:.8rem}
.fbot-legal{display:flex;gap:1.6rem}
.fbot a{color:#8C99A8;text-decoration:none;transition:color .3s}
.fbot a:hover{color:var(--gold)}
@media (max-width:920px){
  footer{height:auto;min-height:100svh}
  .foot-in{padding:calc(6svh + 2rem) 0 0}
  .foot-top{grid-template-columns:1fr;gap:2.5rem}
  .foot-cols{grid-template-columns:1fr 1fr}
  .slab{height:15vw;min-height:64px}
}
/* the toggle plus its label is wider than a half column on a narrow phone, and
   the footer clips its own overflow, so the CTA was losing its right edge */
@media (max-width:560px){
  .foot-cols{grid-template-columns:1fr;gap:2.2rem}
}

/* reduced motion / low power */
@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  body.loading{overflow:auto}
  .hl>span{transform:none!important}
  .hero{position:relative;height:100svh}
  .hero-spacer{display:none}
  .deck-pin{height:auto;overflow:visible}
  .deck-strip{position:static;inset:auto;width:auto;flex-direction:column;gap:4rem;
    padding:14vh 5.5vw 8vh;transform:none!important}
  .deck-bar{position:static;transform:none;padding-inline:0}
  .deck-count,.deck-prog{display:none}
  .panel{flex:1 1 auto;width:100%;flex-direction:column;gap:1.6rem;height:auto;overflow:visible}
  .panel::before{display:none}
  .panel-media{position:relative;inset:auto;aspect-ratio:4/3;height:auto;width:100%}
  .panel-txt{width:100%;margin-left:0}
  .panel-big{position:static;font-size:3.4rem;-webkit-text-stroke-width:1px;display:block}
  .panel-media img{transform:none!important}
  .foot-vid{display:none}
  .say .w{color:var(--ink)}
  .scrollcue{display:none}
  .roll-a,.roll-b{transition:none}
}
html.lowpower .scrollcue{display:none}