/* ═══════════════════════════════════════════════════════════════════════
   OPULENCE — shared stylesheet
   Brand: forest #0E351E · gold #FAAD4B (sampled from the supplied artwork)
   Emerald carries structure and futuristic elements. Gold marks emphasis only.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#F4F3EE; --leaf:#FBFAF7; --white:#fff;
  --ink:#0A1710; --forest:#0E351E; --forest-2:#0A2617; --forest-3:#17452B;
  --emerald:#14603F; --emerald-lt:#1E8A5F; --emerald-soft:#E4EFE9;
  --gold:#FAAD4B; --gold-dp:#A9761A;
  --graphite:#55605A; --quiet:#87908B;
  --rule:#DBD9D0; --rule-2:#E8E6DE;
  --wordmark:'Cinzel',Georgia,serif;
  --disp:'Inter Tight',system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gut:clamp(20px,4.5vw,78px); --max:1360px; --hdr:82px;
  --e:cubic-bezier(.16,.84,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--disp);font-weight:300;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--emerald);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── type ───────────────────────────────────────────────────────────── */
.d{font-weight:600;line-height:.99;letter-spacing:-.042em;margin:0;text-wrap:balance}
.d1{font-size:clamp(2.4rem,6.4vw,5.8rem);letter-spacing:-.05em}
.d2{font-size:clamp(1.9rem,3.9vw,3.3rem)}
.d3{font-size:clamp(1.22rem,1.9vw,1.62rem);letter-spacing:-.03em;line-height:1.13}
.au{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;color:var(--gold-dp)}
.inv .au{color:var(--gold)}
.hero .au{color:#C6871F;text-shadow:0 0 24px rgba(198,135,31,.2)}
.rub{font-family:var(--mono);font-size:.65rem;text-transform:uppercase;letter-spacing:.24em;
  color:var(--quiet);margin:0 0 24px;display:flex;align-items:center;gap:14px}
.rub::after{content:"";flex:1;height:1px;background:var(--rule);transform-origin:left;
  transform:scaleX(0);transition:transform 1.15s var(--e)}
.in .rub::after{transform:scaleX(1)}
.lede{font-size:clamp(1rem,1.35vw,1.17rem);line-height:1.6;color:var(--graphite);max-width:60ch;margin:0}
p{margin:0 0 1.05em}p:last-child{margin-bottom:0}
.sheet{padding-block:clamp(50px,5.6vw,84px);border-top:1px solid var(--rule)}
.sheet--flush{border-top:0}
.mast{max-width:64ch;margin-bottom:clamp(26px,3vw,42px)}
.mast .lede{margin-top:20px}
.note{font-family:var(--mono);font-size:.7rem;color:var(--quiet);margin-top:20px;max-width:82ch;line-height:1.8}

.g{border:0;border-bottom:1px dotted var(--emerald);background:none;padding:0;font:inherit;cursor:help;
  color:inherit;transition:color .2s}
.g:hover{color:var(--emerald)}
.tip{position:fixed;z-index:110;max-width:320px;background:var(--forest);color:#CBD8D1;padding:15px 17px;
  font-size:.85rem;line-height:1.56;pointer-events:none;opacity:0;transform:translateY(6px) scale(.98);
  transition:opacity .18s var(--e),transform .18s var(--e);box-shadow:0 20px 40px -22px rgba(10,23,16,.55)}
.tip.on{opacity:1;transform:none}
.tip b{display:block;font-family:var(--mono);font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px;font-weight:400}

.lk{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;font-size:.92rem;color:var(--emerald);
  position:relative;padding-bottom:2px;transition:gap .24s var(--e)}
.lk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--emerald);
  transform:scaleX(.32);transform-origin:left;transition:transform .42s var(--e)}
.lk:hover{gap:15px}.lk:hover::after{transform:scaleX(1)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 25px;cursor:pointer;text-decoration:none;
  border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--mono);
  font-size:.71rem;letter-spacing:.15em;text-transform:uppercase;position:relative;overflow:hidden;
  transition:color .3s var(--e),border-color .3s var(--e)}
.btn>*{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--forest);transform:translateY(101%);
  transition:transform .44s var(--e);z-index:0}
.btn:hover{color:var(--paper);border-color:var(--forest)}
.btn:hover::before{transform:none}
.btn--em{border-color:var(--forest);background:var(--forest);color:var(--paper)}
.btn--em::before{background:var(--emerald)}
.btn--em:hover{color:#fff;border-color:var(--emerald)}
.btn--pale{border-color:var(--rule);color:var(--graphite)}
.btn--pale:hover{color:var(--paper);border-color:var(--forest)}
.btn--onDark{border-color:rgba(250,173,75,.5);color:var(--gold)}
.btn--onDark::before{background:var(--gold)}
.btn--onDark:hover{color:var(--forest);border-color:var(--gold)}
.btn .arw{transition:transform .3s var(--e)}
.btn:hover .arw{transform:translateX(4px)}

/* ── header ─────────────────────────────────────────────────────────── */
.prog{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--emerald),var(--gold));
  width:0;z-index:95;box-shadow:0 0 14px rgba(30,138,95,.45)}
.hdr{position:fixed;top:0;left:0;right:0;z-index:80;height:var(--hdr);border-bottom:1px solid transparent;
  transition:background .34s var(--e),border-color .34s var(--e)}
.hdr.solid{background:rgba(244,243,238,.9);backdrop-filter:blur(16px) saturate(150%);border-bottom-color:var(--rule)}
.hdr__in{display:flex;align-items:center;gap:26px;height:var(--hdr)}
.brand{display:flex;align-items:center;gap:15px;text-decoration:none;margin-right:auto}
.brand .halo img{height:46px;width:auto;flex:none}   /* the monogram only */
/* The wordmark is struck metal, not flat ink: lit with the share card's
   bright gold along the top and settling into the deep gold at the base, so
   it reads as the brighter tone at a glance while keeping enough weight to
   stay crisp on the pale header. The deep gold below is the fallback for
   anything that cannot clip a background to text. */
/* The header wordmark is the logo artwork itself, the same drawing the footer
   lockup uses, so the two match exactly. Cinzel was close but not the face the
   logo was drawn in — set side by side the letterforms disagree — and no
   tracking or weight would have closed that. The green aura belongs to the
   monogram alone; the wordmark carries the metal and nothing behind it.
   The text stays in the markup for screen readers and search. */
.brand__w{height:16px;width:auto;display:block;flex:none}
.brand__n{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.nav{display:flex;gap:0}
.nav a{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--graphite);padding:9px 11px;text-decoration:none;position:relative;transition:color .2s}
.nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:1px;background:var(--emerald);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--emerald)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.kbd{background:none;border:1px solid var(--rule);color:var(--quiet);padding:6px 10px;font-family:var(--mono);
  font-size:.66rem;cursor:pointer;transition:color .2s,border-color .2s}
.kbd:hover{color:var(--ink);border-color:var(--graphite)}
.hdr .btn{padding:9px 17px;font-size:.64rem}
.mb{display:none;background:none;border:1px solid var(--rule);color:var(--graphite);padding:8px 12px;
  font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--hdr) + 28px);padding-bottom:clamp(30px,4.5vh,56px);overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(78% 44% at 40% 84%,rgba(244,243,238,.95),rgba(244,243,238,.6) 50%,transparent 80%)}
.hero__in{position:relative;z-index:2;width:100%;flex:1;display:flex;flex-direction:column}
.hero__copy{flex:none}
.hero__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 48px;align-items:end}
.hero__row .lede{max-width:62ch}
.hero__tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--quiet);display:flex;align-items:center;gap:11px;margin-bottom:26px;flex-wrap:wrap}
.hero__tag i{width:5px;height:5px;border-radius:50%;background:var(--emerald-lt);font-style:normal;
  animation:pl 2.4s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(30,138,95,.45)}50%{opacity:.32;box-shadow:0 0 0 8px rgba(30,138,95,0)}}
.hero h1{max-width:none;margin-bottom:24px;position:relative;font-size:clamp(2.1rem,4.6vw,4.4rem)}
.hero__g{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:end}
.hero__cta{display:flex;flex-wrap:wrap;gap:11px}

/* emerald aura traced around the logo's own outline */
/* The aura is a pre-rendered glow of the logo's OUTER silhouette only, so it
   radiates from the outline and never fills the space inside the shield.
   Offsets = padding baked into each aura image ÷ the logo image size. */
.halo{display:inline-grid;place-items:center;flex:none;position:relative;isolation:isolate}
.halo img{position:relative}
.halo::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-22.965%;bottom:-22.965%;left:-30.556%;right:-30.556%;
  background:url("opulence-aura-header.png") center/100% 100% no-repeat}
/* the wordmark's counters cannot take the glow cleanly, so the footer lockup carries none */
.colo .halo::before{display:none}

/* ═══ 3D emblem ════════════════════════════════════════════════════════
   The hub occupies its own space in the hero's layout, so text can never
   overlap it: it takes the height left above the copy, and if there is
   too little, the hero grows instead. The canvas reads .hub__stage to
   centre its rings and sweep on the emblem. */
.hero__hub{--hub-h:clamp(170px,min(21vw,calc(52svh - 185px)),320px);flex:1 0 auto;min-height:calc(var(--hub-h) + 58px);
  display:grid;place-items:center;padding:4px 0 40px;position:relative}
.hub__stage{position:relative;height:var(--hub-h);aspect-ratio:360/479;perspective:1400px}
.hub__float,.hub__tilt,.coin{position:absolute;inset:0;transform-style:preserve-3d}
.hub__float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-5px)}50%{transform:translateY(6px)}}
.hub__tilt{transform:rotateX(9deg)}
.coin{animation:spin 26s linear infinite}
@keyframes spin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.coin>i{position:absolute;inset:0;display:block;
  -webkit-mask-image:url("opulence-mark.png");mask-image:url("opulence-mark.png");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}
.coin__face{background:linear-gradient(165deg,#FCDC95 0%,#F4B553 20%,#D9982F 42%,#A9761A 68%,#7A520E 100%)}
.coin__face--front{transform:translateZ(var(--half,7px))}
.coin__face--back{transform:translateZ(calc(var(--half,7px) * -1))}
.coin__l{background:#7A520E}
.coin__sheen{transform:translateZ(calc(var(--half,7px) + .6px));
  background:linear-gradient(100deg,transparent 38%,rgba(255,247,222,.9) 50%,transparent 62%) 50% 0/300% 100% no-repeat;
  animation:sheen 26s linear infinite}
@keyframes sheen{0%{background-position:50% 0}12%{background-position:0% 0}12.01%{background-position:100% 0}
  88%{background-position:100% 0}100%{background-position:50% 0}}
.coin>.coin__glow{-webkit-mask-image:none;mask-image:none;inset:-12.526% -16.667%;
  background:url("opulence-aura-coin.png") center/100% 100% no-repeat;transform:translateZ(-.35px)}
.coin__glow b{display:none}
.hub__shadow{position:absolute;left:50%;bottom:-30px;width:78%;height:20px;margin-left:-39%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(14,53,30,.22),rgba(14,53,30,.07) 60%,transparent);
  animation:shadow 26s linear infinite}
@keyframes shadow{0%,50%,100%{transform:scaleX(1)}12.5%,37.5%,62.5%,87.5%{transform:scaleX(.72)}25%,75%{transform:scaleX(.38)}}
/* tilted orbit ring: near half passes in front of the medallion, far half behind */
.orbit{position:absolute;left:50%;top:50%;width:190%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(20,96,63,.42);transform:translate(-50%,-50%) rotateX(74deg);
  transform-style:preserve-3d;animation:orbit 16s linear infinite;pointer-events:none}
.orbit::after{content:"";position:absolute;top:50%;left:-3.5px;width:7px;height:7px;margin-top:-3.5px;
  border-radius:50%;background:#FAAD4B;box-shadow:0 0 12px 3px rgba(250,173,75,.5)}
@keyframes orbit{from{transform:translate(-50%,-50%) rotateX(74deg) rotateZ(0deg)}
  to{transform:translate(-50%,-50%) rotateX(74deg) rotateZ(360deg)}}
@media (max-width:740px){.hero__hub{--hub-h:clamp(138px,40vw,178px);padding:6px 0 36px}}
@media (prefers-reduced-motion:reduce){
  .coin{animation:none;transform:rotateY(-22deg)}.hub__float,.coin__sheen,.hub__shadow,.orbit{animation:none}}

/* the mask that drives the rise animation must leave room for descenders */
.rw{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.rw>span{display:block;transform:translateY(105%);animation:rise 1s var(--e) forwards}
@keyframes rise{to{transform:none}}
.fade-up{opacity:0;transform:translateY(14px);animation:fu .9s var(--e) forwards}
@keyframes fu{to{opacity:1;transform:none}}
/* futuristic corner brackets */
.brk{position:absolute;width:22px;height:22px;border:1px solid rgba(20,96,63,.4);z-index:2;pointer-events:none}
.brk--tl{top:calc(var(--hdr) + 22px);left:clamp(12px,3vw,44px);border-right:0;border-bottom:0}
.brk--tr{top:calc(var(--hdr) + 22px);right:clamp(12px,3vw,44px);border-left:0;border-bottom:0}
.brk--bl{bottom:22px;left:clamp(12px,3vw,44px);border-right:0;border-top:0}
.brk--br{bottom:22px;right:clamp(12px,3vw,44px);border-left:0;border-top:0}
.pillars{display:flex;flex-wrap:wrap;gap:10px 0;margin-top:clamp(24px,4vh,44px);
  border-top:1px solid var(--rule);padding-top:18px}
.pillars span{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--graphite);padding-right:22px;margin-right:22px;border-right:1px solid var(--rule)}
.pillars span:last-child{border-right:0;margin-right:0;padding-right:0}

/* ── page banner (interior pages) ───────────────────────────────────── */
.banner{position:relative;padding-top:calc(var(--hdr) + clamp(44px,6vw,80px));
  padding-bottom:clamp(32px,4vw,56px);overflow:hidden;border-bottom:1px solid var(--rule)}
#weave{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.banner__in{position:relative;z-index:2}
.banner .lede{margin-top:20px}
.crumb{font-family:var(--mono);font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 22px;display:flex;gap:10px;align-items:center}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--emerald)}
.crumb i{font-style:normal;color:var(--gold-dp)}

/* ── layout blocks ──────────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.quad{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cell{background:var(--leaf);padding:clamp(24px,2.8vw,38px);transition:background .3s var(--e)}
.cell:hover{background:var(--white)}
.cell__k{font-family:var(--mono);font-size:.61rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-dp);margin-bottom:15px}
.cell h3{margin:0 0 10px}
.cell p{font-size:.94rem;color:var(--graphite);margin:0}
.cell strong{color:var(--ink);font-weight:500}
.ni{display:grid;grid-template-columns:58px 1fr;gap:24px;padding:26px 0;border-top:1px solid var(--rule);
  align-items:start;transition:padding-left .35s var(--e)}
.ni:hover{padding-left:10px}
.ni:first-child{border-top:1px solid var(--ink)}
.ni__n{font-family:var(--mono);font-size:.7rem;color:var(--gold-dp);letter-spacing:.15em;padding-top:5px}
.ni h3{margin:0 0 10px}
.ni p{font-size:.95rem;color:var(--graphite);margin:0;max-width:74ch}
.excl{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;margin:0;padding:0;list-style:none}
.excl li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--rule-2);font-size:.92rem;color:var(--graphite)}
.excl li::before{content:"—";color:var(--gold-dp);font-family:var(--mono);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--rule);padding:10px 16px;
  font-family:var(--mono);font-size:.66rem;text-decoration:none;color:var(--graphite);background:var(--leaf);
  transition:border-color .24s,color .24s,transform .24s var(--e)}
a.chip:hover{border-color:var(--emerald);color:var(--emerald);transform:translateY(-2px)}
.chip::before{content:"";width:4px;height:4px;background:var(--gold);flex:none}

/* figures */
.figs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.fg{padding:clamp(28px,3.4vw,48px) 0 clamp(28px,3.4vw,48px) clamp(22px,2.6vw,40px);border-left:1px solid var(--rule)}
.fg:first-child{padding-left:0;border-left:0}
.fg__n{font-size:clamp(2rem,3.8vw,3.3rem);font-weight:600;letter-spacing:-.05em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--emerald)}
.fg__l{font-family:var(--mono);font-size:.64rem;letter-spacing:.19em;text-transform:uppercase;color:var(--quiet);margin-top:13px}
.fg__s{font-size:.85rem;color:var(--graphite);margin-top:7px}

/* flow */
.flow{position:relative;border:1px solid var(--rule);background:var(--leaf);overflow:hidden}
.flow__track{display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.fstep{padding:clamp(24px,2.6vw,36px) clamp(16px,1.8vw,26px);border-left:1px solid var(--rule);position:relative}
.fstep:first-child{border-left:0}
.fstep__n{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--emerald);margin-bottom:14px;
  display:flex;align-items:center;gap:9px}
.fstep__n b{width:6px;height:6px;background:var(--emerald-lt);display:block;opacity:.22;
  transition:opacity .34s var(--e),transform .34s var(--e),background .34s}
.fstep.lit .fstep__n b{opacity:1;transform:scale(1.7);background:var(--gold)}
.fstep h3{margin:0 0 9px;font-size:1.03rem;font-weight:500;letter-spacing:-.028em}
.fstep p{font-size:.89rem;color:var(--graphite);margin:0}
.flow__wire{position:absolute;left:0;right:0;top:0;height:2px;background:var(--rule-2);overflow:hidden}
.flow__pulse{position:absolute;top:0;left:0;width:90px;height:2px;
  background:linear-gradient(90deg,transparent,var(--emerald-lt) 45%,var(--gold) 70%,transparent);
  animation:travel 5.6s linear infinite}
@keyframes travel{0%{transform:translateX(-90px)}100%{transform:translateX(calc(100vw + 90px))}}

/* engine */
.engine{border:1px solid var(--ink);background:var(--leaf);position:relative;overflow:hidden}
.engine__top{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;padding:13px 20px;border-bottom:1px solid var(--ink)}
.engine__ti{font-family:var(--mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite)}
.engine__ti b{color:var(--emerald);font-weight:400}
.engine__badge{margin-left:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--quiet);
  border:1px solid var(--rule);padding:4px 10px}
.engine__body{display:grid;grid-template-columns:300px minmax(0,1fr)}
.ctl{padding:26px 24px;border-right:1px solid var(--rule);display:flex;flex-direction:column;gap:25px}
.ctl__grp label{display:block;font-family:var(--mono);font-size:.61rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--quiet);margin-bottom:11px}
.seg{display:flex;border:1px solid var(--rule);position:relative}
.seg button{flex:1;background:none;border:0;border-left:1px solid var(--rule);padding:9px 4px;cursor:pointer;
  font-family:var(--mono);font-size:.65rem;color:var(--graphite);position:relative;z-index:1;transition:color .28s var(--e)}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{color:var(--paper)}
.seg__ind{position:absolute;top:0;bottom:0;background:var(--forest);transition:left .4s var(--e),width .4s var(--e);z-index:0}
.rng{width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:22px}
.rng::-webkit-slider-runnable-track{height:2px;background:var(--rule)}
.rng::-moz-range-track{height:2px;background:var(--rule)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;background:var(--emerald);
  margin-top:-5.5px;border-radius:0;border:0;box-shadow:0 0 0 0 rgba(20,96,63,.3);transition:box-shadow .25s}
.rng:active::-webkit-slider-thumb{box-shadow:0 0 0 7px rgba(20,96,63,.16)}
.rng::-moz-range-thumb{width:13px;height:13px;background:var(--emerald);border-radius:0;border:0}
.rng-v{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.72rem;color:var(--ink);margin-top:4px}
.rng-v small{color:var(--quiet)}
.readout{border-top:1px solid var(--rule);padding-top:19px;display:grid;gap:10px;margin:0}
.ro{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.ro dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet)}
.ro dd{margin:0;font-family:var(--mono);font-size:.92rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.ro dd.hi{color:var(--emerald);font-weight:500}
.ro dd.bump{animation:bump .42s var(--e)}
@keyframes bump{0%{transform:translateY(-4px);opacity:.35}100%{transform:none;opacity:1}}
.stage{padding:24px;display:flex;flex-direction:column;gap:20px;min-width:0}
.stage__h{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--quiet);margin-bottom:8px}
.stage__h b{color:var(--ink);font-weight:400}
canvas.plot{width:100%;display:block}
#cvBids{height:200px}
#cvCurve{height:172px}
@media (max-width:560px){#cvBids{height:168px}#cvCurve{height:150px}}
.legend{display:flex;flex-wrap:wrap;gap:9px 22px;font-family:var(--mono);font-size:.65rem;color:var(--quiet);margin-top:8px}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:14px;height:2px;flex:none;font-style:normal}
.finding{border-top:1px solid var(--rule);padding:18px 24px;font-size:.93rem;color:var(--graphite);background:var(--white)}
.finding b{color:var(--ink);font-weight:500}

/* inverted section */
.inv{background:var(--forest);color:#BFCFC7;padding-block:clamp(50px,5.6vw,84px);position:relative;overflow:hidden}
.inv::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(72% 62% at 80% 16%,rgba(30,138,95,.32),transparent 62%)}
.inv>*{position:relative;z-index:1}
.inv .rub{color:#7A9186}.inv .rub::after{background:#1F4D33}
.inv h2{color:#F4F2EC}.inv .lede{color:#9BB0A4}.inv .note{color:#7A9186}
.term{border:1px solid #1F4D33;font-family:var(--mono);font-size:.72rem;overflow:hidden;position:relative;margin-top:40px;
  background:rgba(0,0,0,.16)}
.term__b{display:flex;align-items:center;gap:11px;padding:12px 18px;border-bottom:1px solid #1F4D33}
.term__d{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pl 2.6s ease-in-out infinite}
.term__ti{letter-spacing:.19em;text-transform:uppercase;font-size:.61rem;color:#9BB0A4}
.term__la{margin-left:auto;color:#7A9186;font-size:.61rem}
.term__c,.term__r{display:grid;grid-template-columns:74px 46px 1fr 66px 74px 52px;gap:11px;padding:0 18px;align-items:center}
.term__c{height:31px;border-bottom:1px solid #1F4D33;color:#7A9186;font-size:.57rem;letter-spacing:.16em;text-transform:uppercase}
.term__body{height:250px;overflow:hidden;padding-block:4px}
.term__r{height:31px;white-space:nowrap;animation:rowIn .42s var(--e) both}
@keyframes rowIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.term__r .a{color:#7A9186}.term__r .g2{color:#9BB0A4}
.term__r .f{color:#9BB0A4;overflow:hidden;text-overflow:ellipsis}
.term__r .bx{color:#9BB0A4;text-align:right}
.term__r .ok{color:var(--gold);text-align:right}
.term__r .ms{color:#7A9186;text-align:right}
.term__r.new .ok{animation:flash .8s ease-out}
@keyframes flash{0%{background:rgba(250,173,75,.2)}100%{background:transparent}}
.term__f{display:flex;flex-wrap:wrap;gap:6px 18px;padding:11px 18px;border-top:1px solid #1F4D33;
  color:#7A9186;font-size:.6rem;letter-spacing:.1em}

/* ── infographics ─────────────────────────────────────────────────────
   All drawn live on canvas; no images. Each pauses when off-screen. */
.viz{position:relative;margin:0;border:1px solid var(--rule);background:var(--leaf);overflow:hidden}
.viz canvas{display:block;width:100%}
.viz__cv--chain{height:280px}
.viz__cv--race{height:270px}
.viz__cv--depth{height:280px}
.viz__cv--filter{height:240px}
.viz__cv--curve{height:260px}
.viz__cv--cycle{height:380px}
.viz__cv--dial{height:300px}
.viz__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;padding:11px 16px;
  border-top:1px solid var(--rule);font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;color:var(--quiet)}
.viz__cap b{color:var(--graphite);font-weight:400}
.viz--gap{margin-bottom:clamp(26px,3.2vw,44px)}
.viz--dark{background:rgba(0,0,0,.16);border-color:#1F4D33}
.viz--dark .viz__cap{border-top-color:#1F4D33;color:#7A9186}
.viz--dark .viz__cap b{color:#9BB0A4}
.phases{list-style:none;margin:0;padding:13px 16px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;
  border-top:1px solid #1F4D33}
.phases li{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#6E8479;
  transition:color .25s var(--e)}
.phases li b{display:block;font-weight:400;font-size:.58rem;letter-spacing:.06em;text-transform:none;color:#5B7266;margin-top:4px}
.phases li.done{color:#9BB0A4}
.phases li.on{color:var(--gold)}
.phases li.on b{color:#C9A15E}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,76px);align-items:center}
.split--top{align-items:start}
.split .sticky{position:sticky;top:104px}
.ni{transition:padding-left .35s var(--e)}
.ni.is-on .ni__n{color:var(--emerald)}
.ni.is-on h3{color:var(--emerald)}
.ni h3{transition:color .35s var(--e)}
@media (max-width:960px){
  .split{grid-template-columns:1fr}
  .split .sticky{position:relative;top:0}
}
@media (max-width:640px){
  .viz__cv--chain{height:470px}
  .viz__cv--race{height:500px}
  .viz__cv--depth{height:260px}
  .viz__cv--filter{height:250px}
  .viz__cv--curve{height:230px}
  .viz__cv--cycle{height:340px}
  .viz__cv--dial{height:270px}
  .phases{grid-template-columns:repeat(3,1fr)}
}

/* ── the blink ───────────────────────────────────────────────────────
   Video on top, the line stacked beneath it. The line reveals once the
   eyes fill the frame, timed by data-reveal (seconds) on the figure. */
.blink{position:relative;margin:0;border:1px solid var(--rule);background:var(--leaf);overflow:hidden}
.blink__screen{position:relative;aspect-ratio:16/9;background:var(--forest);overflow:hidden}
.blink__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.1s var(--e)}
.blink.ready .blink__vid{opacity:1}
.blink__screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -70px 90px -60px rgba(14,53,30,.55)}
.blink__cap{text-align:center;padding:clamp(28px,3.6vw,52px) clamp(20px,4vw,44px) clamp(24px,3vw,40px);
  border-top:1px solid var(--rule)}
.blink__fig,.blink__txt,.blink__note{display:block;opacity:0;transform:translateY(10px);
  transition:opacity .85s var(--e),transform .85s var(--e)}
.blink__fig{font-weight:600;letter-spacing:-.05em;line-height:.95;color:#C6871F;
  font-size:clamp(2.8rem,6.4vw,5.2rem);font-variant-numeric:tabular-nums}
.blink__txt{margin-top:10px;font-size:clamp(1.05rem,2vw,1.5rem);letter-spacing:-.022em;color:var(--ink);
  transition-delay:.1s}
.blink__note{margin-top:16px;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;
  color:var(--quiet);transition-delay:.2s}
.blink.open .blink__fig,.blink.open .blink__txt,.blink.open .blink__note{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .blink__fig,.blink__txt,.blink__note{opacity:1;transform:none}
}

/* ── legal pages ─────────────────────────────────────────────────── */
.legal{max-width:76ch}
.legal__meta{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--quiet);padding-bottom:22px;margin-bottom:clamp(30px,4vw,48px);border-bottom:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 28px}
.legal h2{font-weight:600;letter-spacing:-.03em;font-size:clamp(1.18rem,1.8vw,1.5rem);line-height:1.2;
  margin:clamp(32px,3.6vw,48px) 0 14px;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline}
.legal h2 i{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--gold-dp);letter-spacing:.1em}
.legal h3{font-weight:500;font-size:1.02rem;letter-spacing:-.02em;margin:26px 0 10px;color:var(--ink)}
.legal p{font-size:.97rem;color:var(--graphite);margin:0 0 1.05em;max-width:72ch}
.legal p.lead{font-size:clamp(1rem,1.3vw,1.14rem);color:var(--graphite)}
.legal ul{list-style:none;margin:0 0 1.2em;padding:0;max-width:72ch}
.legal li{display:flex;gap:13px;padding:9px 0;border-top:1px solid var(--rule-2);font-size:.94rem;color:var(--graphite)}
.legal li::before{content:"—";color:var(--gold-dp);font-family:var(--mono);flex:none}
.legal a{color:var(--emerald)}
.legal__close{margin-top:clamp(44px,5vw,70px);padding-top:26px;border-top:1px solid var(--ink);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--quiet);line-height:1.9}
@media (max-width:640px){.legal h2{grid-template-columns:1fr;gap:4px}}

/* ── travelling rail ──────────────────────────────────────────────
   The emerald-to-gold pulse from the five-step flow, reused on the top
   edge of the major bordered blocks so the page feels alive throughout. */
.viz::before,.engine::before,.corr::before,.blink::before,.term::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--emerald-lt) 32%,var(--gold) 58%,transparent);
  background-size:240px 100%;background-repeat:no-repeat;
  animation:rail 6.4s linear infinite}
.engine::before{animation-delay:-1.2s}
.corr::before{animation-delay:-2.4s}
.blink::before{animation-delay:-3.1s}
.term::before{animation-delay:-4s}
@keyframes rail{from{background-position:-240px 0}to{background-position:calc(100% + 240px) 0}}
@media (prefers-reduced-motion:reduce){
  .viz::before,.engine::before,.corr::before,.blink::before,.term::before{animation:none;opacity:.5}
}

/* next-page rail */
.onward{border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule)}
.onward a{background:var(--paper);padding:clamp(26px,3.4vw,46px) clamp(20px,2.6vw,40px);text-decoration:none;
  display:flex;flex-direction:column;gap:10px;transition:background .3s var(--e)}
.onward a:hover{background:var(--leaf)}
.onward small{font-family:var(--mono);font-size:.61rem;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet)}
.onward strong{font-weight:600;font-size:clamp(1.2rem,2vw,1.75rem);letter-spacing:-.038em}
.onward a:hover strong{color:var(--emerald)}
.onward span{font-size:.9rem;color:var(--graphite)}

/* contact form */
.corr{border:1px solid var(--ink);background:var(--leaf);padding:clamp(28px,4.5vw,72px);position:relative;overflow:hidden}
.corr::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 70% at 90% 4%,rgba(30,138,95,.14),transparent 60%)}
.corr>*{position:relative;z-index:1}
.corr__g{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);margin-top:40px}
.proto{list-style:none;margin:0;padding:0}
.proto li{display:flex;gap:15px;padding:14px 0;border-top:1px solid var(--rule-2);font-size:.93rem;color:var(--graphite)}
.proto li:first-child{border-top:1px solid var(--ink)}
.proto i{font-style:normal;font-family:var(--mono);font-size:.64rem;color:var(--gold-dp);flex:none;padding-top:3px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:19px}
.f{display:flex;flex-direction:column;gap:8px;position:relative}
.f--w{grid-column:1/-1}
.f label{font-family:var(--mono);font-size:.61rem;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet);transition:color .24s}
.f:focus-within label{color:var(--emerald)}
.f input,.f select,.f textarea{background:transparent;border:0;border-bottom:1px solid var(--rule);padding:10px 0;font-size:.96rem}
.f input:focus,.f select:focus,.f textarea:focus{outline:none}
.f::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--emerald);
  transform:scaleX(0);transform-origin:left;transition:transform .42s var(--e)}
.f:focus-within::after{transform:scaleX(1)}
.f textarea{resize:vertical;min-height:82px}
.consent{grid-column:1/-1;display:flex;gap:13px;align-items:flex-start;font-size:.84rem;color:var(--quiet)}
.consent::after{display:none}
.consent input{margin-top:3px;accent-color:var(--emerald);width:15px;height:15px;flex:none}
.consent a{color:var(--emerald)}
.msg{grid-column:1/-1;border:1px solid var(--emerald);background:var(--emerald-soft);padding:14px 16px;
  font-size:.89rem;color:var(--emerald);animation:fu .4s var(--e)}

/* footer */
.colo{border-top:1px solid var(--ink);padding-block:clamp(44px,5vw,72px) 30px;font-size:.88rem;color:var(--graphite)}
.colo a{color:var(--graphite);text-decoration:none;transition:color .2s}
.colo a:hover{color:var(--emerald)}
.colo__t{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:38px;padding-bottom:44px;border-bottom:1px solid var(--rule)}
.colo__b img{width:164px;height:auto;display:block}
.colo__b .halo{margin-bottom:18px}
.colo__b p{max-width:38ch;font-size:.87rem;color:var(--quiet)}
.colo__slog{font-family:var(--mono);font-size:.63rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold-dp);margin:0 0 12px}
.colo__c h4{font-family:var(--mono);font-size:.61rem;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);margin:0 0 17px;font-weight:400}
.colo__c ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.colo__l{padding-top:28px;display:flex;flex-wrap:wrap;gap:12px 30px;align-items:baseline;
  font-family:var(--mono);font-size:.69rem;color:var(--quiet);line-height:1.95}
.colo__l .ent{flex:1;min-width:320px}

/* command palette */
.cmdk{position:fixed;inset:0;z-index:100;display:none;padding-top:13vh;justify-content:center;
  background:rgba(10,23,16,.44);backdrop-filter:blur(5px)}
.cmdk.on{display:flex}
.cmdk__x{width:min(560px,92vw);height:max-content;background:var(--white);border:1px solid var(--ink);
  overflow:hidden;animation:pop .2s var(--e);box-shadow:0 30px 60px -30px rgba(10,23,16,.45)}
@keyframes pop{from{opacity:0;transform:translateY(-10px) scale(.99)}to{opacity:1;transform:none}}
.cmdk input{width:100%;border:0;border-bottom:1px solid var(--rule);padding:17px 21px;font-size:.97rem;background:none}
.cmdk input:focus{outline:none}
.cmdk ul{list-style:none;margin:0;padding:6px;max-height:46vh;overflow:auto}
.cmdk li a{display:flex;align-items:center;gap:14px;padding:11px 15px;text-decoration:none;font-size:.92rem}
.cmdk li.on a,.cmdk li a:hover{background:var(--emerald-soft);color:var(--emerald)}
.cmdk li em{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);margin-left:auto}
.cmdk__f{border-top:1px solid var(--rule);padding:11px 21px;font-family:var(--mono);font-size:.63rem;color:var(--quiet)}
.cmdk__n{padding:21px;color:var(--quiet);font-size:.89rem}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .85s var(--e),transform .85s var(--e)}
.rv.in{opacity:1;transform:none}
.stag>*{opacity:0;transform:translateY(16px);transition:opacity .8s var(--e),transform .8s var(--e)}
.stag.in>*{opacity:1;transform:none}
.stag.in>*:nth-child(1){transition-delay:.04s}.stag.in>*:nth-child(2){transition-delay:.1s}
.stag.in>*:nth-child(3){transition-delay:.16s}.stag.in>*:nth-child(4){transition-delay:.22s}
.stag.in>*:nth-child(5){transition-delay:.28s}.stag.in>*:nth-child(6){transition-delay:.34s}

/* responsive */
@media (max-width:1100px){
  .engine__body{grid-template-columns:1fr}
  .ctl{border-right:0;border-bottom:1px solid var(--rule)}
  /* the brand block carries a paragraph; it gets the full width rather than
     a narrow column that would stretch the row and leave the rest stranded */
  .colo__t{grid-template-columns:repeat(3,1fr);gap:30px 34px}
  .colo__b{grid-column:1/-1}
  .colo__b p{max-width:62ch}
  .flow__track{grid-template-columns:repeat(2,1fr)}
  .fstep{border-left:0;border-top:1px solid var(--rule)}
  .fstep:nth-child(odd){border-right:1px solid var(--rule)}
}
@media (max-width:960px){
  .hero__g,.corr__g{grid-template-columns:1fr}
  .excl,.trio{grid-template-columns:repeat(2,1fr)}
  .quad{grid-template-columns:1fr}
  .figs{grid-template-columns:1fr}
  .fg{padding-left:0;border-left:0;border-top:1px solid var(--rule)}
  .fg:first-child{border-top:0}
  .onward{grid-template-columns:1fr}
}
@media (max-width:740px){
  .nav,.hdr .btn,.kbd{display:none}
  .mb{display:block;margin-left:auto}
  .nav.open{display:grid;position:fixed;top:var(--hdr);left:0;right:0;background:var(--white);
    border-bottom:1px solid var(--rule);padding:20px var(--gut) 26px;gap:0;z-index:81}
  .nav.open a{padding:13px 0;font-size:.76rem}
  .duo,.trio,.excl,.form,.flow__track{grid-template-columns:1fr}
  .fstep:nth-child(odd){border-right:0}
  .colo__t{grid-template-columns:1fr 1fr;gap:28px 24px;padding-bottom:34px}
  .colo__b p{max-width:none}
  .colo__b img{width:140px}
  /* Contact is the longest list, so it takes the full width and runs in two */
  .colo__c:last-child{grid-column:1/-1}
  .colo__c:last-child ul{grid-template-columns:1fr 1fr;gap:12px 24px}
  .colo__l{padding-top:24px;line-height:1.8;flex-direction:column;align-items:flex-start;gap:16px}
  .colo__l .ent{min-width:0;flex:none}
  .term__c,.term__r{grid-template-columns:58px 38px 1fr 56px 62px;gap:8px;padding-inline:12px}
  .term__c span:nth-child(6),.term__r .ms{display:none}
  .ni{grid-template-columns:1fr;gap:8px}
  .pillars span{border-right:0;padding-right:0;margin-right:0;flex:1 1 100%}
  .hero__row{grid-template-columns:1fr}
  .hero__tag{margin-bottom:18px}
  .brk{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv,.stag>*{opacity:1;transform:none}.rw>span{transform:none}.fade-up{opacity:1;transform:none}
  .rub::after{transform:scaleX(1)}
}
@media print{
  @page{margin:18mm 16mm}
  body{background:#fff;color:#000;font-size:10.5pt}
  .hdr,.prog,.cmdk,.tip,.mb,.kbd,.hero__cta,.btn,.form,.consent,.msg,#field,#weave,.brk,.engine__body,.term,.onward{display:none!important}
  .rv,.stag>*{opacity:1!important;transform:none!important}
  .hero{min-height:auto;padding-top:0}
  .sheet{padding-block:20pt;border-top:.5pt solid #999;break-inside:avoid}
  .inv{background:#fff;color:#000;padding-block:20pt}
  .inv h2,.inv .lede,.inv .note{color:#000}
  .d1{font-size:26pt}.d2{font-size:17pt}.d3{font-size:12.5pt}
  a{color:#000;text-decoration:none}.g{border-bottom:0}
  .duo,.trio,.corr,.flow{break-inside:avoid}
}