/* ============================================================
   Silk Road — shared brand stylesheet
   Palette: Warm Ivory / Ink / Night / Imperial Gold / Cinnabar
   Type: Cormorant Garamond · DM Sans · Noto Serif TC
============================================================ */
:root{
  --ivory:#F5EFE0;
  --ink:#2B2B2B;
  --night:#131210;
  --gold:#E8B842;
  --cinnabar:#C8302D;
  --cream-soft:#EFE7D4;
  --body-dim:#4a463d;
  --maxw:1200px;
  --gut:clamp(24px,6vw,96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ivory);color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;letter-spacing:-0.01em;line-height:1.06}
p{max-width:62ch}
a{color:inherit;text-decoration:none}
.zh{font-family:"Noto Serif TC",serif;font-weight:500}

.eyebrow{
  font-family:"DM Sans",sans-serif;font-weight:500;font-size:11px;
  letter-spacing:0.28em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:14px;margin-bottom:26px;
}
.eyebrow::before{content:"";width:40px;height:1px;background:var(--gold)}
.eyebrow.center{justify-content:center}
.lede{font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:400;
  font-size:clamp(20px,2.4vw,27px);line-height:1.42}

/* ---------- rail ---------- */
.rail{position:fixed;top:0;bottom:0;left:clamp(14px,3.4vw,52px);width:1px;z-index:60;pointer-events:none}
.rail .track{position:absolute;top:8vh;bottom:8vh;left:0;width:1px;background:rgba(43,43,43,.14)}
body.night-rail .rail .track{background:rgba(245,239,224,.16)}
.rail .fill{position:absolute;top:8vh;left:0;width:1px;height:0;background:linear-gradient(var(--gold),rgba(232,184,66,.35));transition:height .08s linear}
.rail .origin,.rail .dest,.rail .caravan{position:absolute;left:-3.5px;width:8px;height:8px;border-radius:50%}
.rail .origin{top:calc(8vh - 4px);background:var(--cinnabar)}
.rail .dest{bottom:calc(8vh - 4px);background:var(--gold)}
.rail .caravan{top:8vh;background:var(--gold);box-shadow:0 0 0 4px rgba(232,184,66,.18),0 0 14px 2px rgba(232,184,66,.5);transition:top .08s linear}
@media(max-width:720px){.rail{display:none}}

/* ---------- nav ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:80;padding:20px var(--gut);
  display:flex;align-items:center;justify-content:space-between;
  transition:background .4s ease,padding .4s ease,border-color .4s ease;border-bottom:1px solid transparent}
header.nav.solid{background:rgba(19,18,16,.88);backdrop-filter:blur(10px);padding:13px var(--gut);border-bottom:1px solid rgba(245,239,224,.08)}
.brandmark{display:flex;align-items:center;gap:14px;color:var(--ivory)}
.brandmark img.mark,.brandmark svg{height:24px;width:auto;display:block}
.brandmark .wm{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:19px;letter-spacing:.34em;padding-left:2px}
nav.links{display:flex;gap:30px;align-items:center}
nav.links a{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,239,224,.66);transition:color .25s;position:relative;padding:4px 0}
nav.links a:hover,nav.links a.active{color:var(--ivory)}
nav.links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold)}
nav.links a.cta{color:var(--night);background:var(--gold);padding:9px 18px;border-radius:1px;letter-spacing:.14em}
nav.links a.cta:hover{opacity:.88;color:var(--night)}
nav.links a.cta::after{display:none}
.navtoggle{display:none;background:none;border:none;color:var(--ivory);font-size:22px;cursor:pointer}
@media(max-width:860px){
  header.nav.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(19,18,16,.94)}
  nav.links{position:fixed;inset:0;background:#131210;display:grid;align-content:center;justify-content:center;justify-items:start;gap:26px;padding:0 var(--gut);overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:90;visibility:hidden}
  nav.links.open{transform:none;visibility:visible}
  nav.links.open{transform:none}
  nav.links a{font-size:16px}
  .navtoggle{display:block;z-index:95}
  body.nav-open{overflow:hidden}
  /* acrylic: frosted where the browser supports it, solid fallback where it does not */
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    nav.links{background:rgba(17,16,14,.82);
      -webkit-backdrop-filter:blur(28px) saturate(135%);
              backdrop-filter:blur(28px) saturate(135%)}
  }
  .brandmark .wm{font-size:16px;letter-spacing:.26em}
}

/* ---------- sections ---------- */
section{position:relative;padding:clamp(88px,13vh,170px) var(--gut)}
.wrap{max-width:var(--maxw);margin:0 auto;position:relative}
.cream{background:var(--ivory);color:var(--ink)}
.night{background:var(--night);color:var(--ivory)}
.night p{color:rgba(245,239,224,.72)}
.night .lede{color:rgba(245,239,224,.82)}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- page hero (night) ---------- */
.page-hero{min-height:66vh;display:flex;align-items:flex-end;padding-top:150px;padding-bottom:clamp(60px,10vh,110px)}
.page-hero h1{font-size:clamp(40px,7vw,88px);color:var(--ivory);max-width:16ch}
.page-hero .sub{margin-top:28px;max-width:52ch;color:rgba(245,239,224,.72);font-size:18px}
.home-hero{min-height:100svh;align-items:center;padding-top:120px}
.home-hero .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,72px);align-items:center;width:100%;max-width:var(--maxw);margin:0 auto}
.home-hero h1{font-size:clamp(42px,7vw,92px)}
/* hero background video */
.home-hero.has-video{display:flex;align-items:center;overflow:hidden;background:#131210 url('silkroad-hero-poster.jpg') center/cover no-repeat}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-tint{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(19,18,16,.88),rgba(19,18,16,.62) 45%,rgba(19,18,16,.32)),linear-gradient(0deg,rgba(19,18,16,.55),transparent 42%)}
.home-hero .hero-content{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto}
.home-hero .hero-content h1{max-width:17ch}
@media(prefers-reduced-motion:reduce){.hero-bg{display:none}}
@media(max-width:820px){.home-hero .hero-grid{grid-template-columns:1fr}.home-hero .hero-figure{order:-1}}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,6vw,90px);align-items:start}
.split h2{font-size:clamp(30px,4.2vw,52px)}
.split .body{font-size:17px;display:flex;flex-direction:column;gap:20px}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:26px}}
.section-head{max-width:60ch;margin-bottom:8px}
.section-head h2{font-size:clamp(30px,4.4vw,54px)}

/* ---------- figures / placeholders ---------- */
.figure{position:relative;border-radius:2px;overflow:hidden}
.figure img,.hero-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.figure .cap{position:absolute;left:20px;bottom:18px;z-index:2;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:13px;color:rgba(245,239,224,.42)}
.figure.has-img .cap{color:rgba(245,239,224,.72);text-shadow:0 1px 8px rgba(0,0,0,.5)}
/* ink-wash blend: drops the paper into the page, feathers the edges (use on cream backgrounds) */
.figure.blend{background:transparent;border-radius:0;overflow:visible}
.figure.blend img{
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-composite:intersect;
}
.figure.on-cream .cap{color:rgba(19,18,16,.42)}
.fig-sanctum{background:radial-gradient(120% 90% at 68% 28%,rgba(232,184,66,.30),rgba(120,70,20,.20) 34%,#1a1512 66%,#0e0c0a 100%)}
.fig-night{background:radial-gradient(130% 100% at 40% 20%,rgba(232,184,66,.22),#241a10 45%,#100d0a 100%)}
.fig-desert{background:linear-gradient(105deg,#2a1c0f 0%,#7a4e1d 30%,#d69a3f 52%,#a9702c 68%,#1c140c 100%)}
.fig-grind{background:linear-gradient(120deg,#22252a 0%,#3a3f45 45%,#6b6357 72%,#241c12 100%)}
.ar-34{aspect-ratio:3/4}.ar-45{aspect-ratio:4/5}.ar-11{aspect-ratio:1/1}
.ar-169{aspect-ratio:16/9}.ar-219{aspect-ratio:21/9}.ar-1610{aspect-ratio:16/10}
.hero-figure{position:relative;aspect-ratio:3/4;border-radius:2px;overflow:hidden}
.hero-figure .cap{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;
  font-family:"Cormorant Garamond",serif;font-style:italic;font-size:14px;color:rgba(245,239,224,.4);padding:0 24px}
@media(max-width:820px){.hero-figure{aspect-ratio:16/11}}

/* ---------- feature rows (alternating) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center;margin-top:clamp(56px,9vh,110px)}
.feature:first-of-type{margin-top:56px}
.feature.reverse .f-text{order:2}
.feature h3{font-size:clamp(26px,3.4vw,40px);margin-bottom:20px}
.feature p{font-size:16.5px}
.feature .ticks{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
.feature .ticks li{padding-left:24px;position:relative;font-size:15.5px}
.feature .ticks li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--gold)}
.night .feature p{color:rgba(245,239,224,.72)}
@media(max-width:820px){.feature{grid-template-columns:1fr;gap:26px}.feature.reverse .f-text{order:0}}

/* ---------- layers ---------- */
.layers{margin-top:60px;display:flex;flex-direction:column}
.layer{display:grid;grid-template-columns:70px minmax(0,4fr) minmax(0,6fr);gap:clamp(18px,3vw,48px);
  padding:38px 0;border-top:1px solid rgba(43,43,43,.14);align-items:baseline}
.layer:last-child{border-bottom:1px solid rgba(43,43,43,.14)}
.layer .num{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:24px;color:var(--gold)}
.layer h3{font-size:clamp(23px,2.6vw,30px)}
.layer p{font-size:16px;color:var(--body-dim)}
@media(max-width:720px){.layer{grid-template-columns:1fr;gap:10px;padding:28px 0}}

/* ---------- diffs / cards ---------- */
.diffs{margin-top:56px;display:grid;grid-template-columns:1fr 1fr}
.diff{padding:32px 40px 32px 0;border-top:1px solid rgba(43,43,43,.14)}
.diff:nth-child(even){padding-left:56px;border-left:1px solid rgba(43,43,43,.12)}
.diff h3{font-size:22px;margin-bottom:10px}
.diff p{font-size:15.5px;color:var(--body-dim)}
.night .diff{border-color:rgba(245,239,224,.12)}
.night .diff p{color:rgba(245,239,224,.66)}
@media(max-width:720px){.diffs{grid-template-columns:1fr}.diff{padding:26px 0!important;border-left:none!important}}

.cards{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.card{padding:34px 30px;border:1px solid rgba(43,43,43,.14);border-radius:2px}
.card .k{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:22px;color:var(--gold);margin-bottom:14px}
.card h3{font-size:22px;margin-bottom:10px}
.card p{font-size:15px;color:var(--body-dim)}
@media(max-width:820px){.cards{grid-template-columns:1fr}}

/* ---------- compare (the long way / the road) ---------- */
.compare{margin-top:60px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{border:1px solid rgba(245,239,224,.14);border-radius:2px;padding:38px 34px}
.panel .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,239,224,.5);margin-bottom:14px}
.panel .big{font-family:"Cormorant Garamond",serif;font-size:clamp(40px,6vw,68px);color:var(--ivory);line-height:1}
.panel .big small{font-size:.32em;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,239,224,.5);display:block;margin-top:12px;font-family:"DM Sans",sans-serif}
.panel h3{color:var(--ivory);font-size:24px;margin:20px 0 16px}
.panel ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.panel li{padding-left:22px;position:relative;color:rgba(245,239,224,.68);font-size:15px}
.panel li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:1px;background:var(--gold)}
.panel.dim .big{color:rgba(245,239,224,.55)}
.panel.dim li::before{background:rgba(245,239,224,.3)}
@media(max-width:720px){.compare{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{margin-top:52px;max-width:820px}
.faq details{border-top:1px solid rgba(43,43,43,.14);padding:6px 0}
.faq details:last-child{border-bottom:1px solid rgba(43,43,43,.14)}
.faq summary{list-style:none;cursor:pointer;padding:26px 40px 26px 0;position:relative;
  font-family:"Cormorant Garamond",serif;font-size:clamp(21px,2.4vw,27px);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:24px;font-family:"DM Sans",sans-serif;font-size:22px;color:var(--gold);transition:transform .3s}
.faq details.expanded summary::after{content:"–"}
.faq .a{padding:0 40px 30px 0;color:var(--body-dim);font-size:16px}

/* ---------- founders ---------- */
.founders{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,50px)}
.founder .portrait{aspect-ratio:4/5;border-radius:2px;margin-bottom:22px}
.founder h3{font-size:26px;margin-bottom:4px}
.founder .role{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.founder p{font-size:15px;color:var(--body-dim)}
@media(max-width:820px){.founders{grid-template-columns:1fr;gap:40px}.founder .portrait{aspect-ratio:16/10}}

/* ---------- buttons / cta ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;
  font-family:"DM Sans",sans-serif;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--night);background:var(--gold);padding:16px 30px;border-radius:1px;transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(232,184,66,.6)}
.btn.ghost{background:transparent;color:var(--gold);padding:15px 0}
.btn.ghost:hover{box-shadow:none;transform:none;opacity:.75}
.btn.ghost .arrow{transition:transform .25s}.btn.ghost:hover .arrow{transform:translateX(6px)}
.mt44{margin-top:44px}

.chop{width:64px;height:64px;background:var(--cinnabar);color:var(--ivory);display:flex;align-items:center;justify-content:center;
  font-family:"Noto Serif TC",serif;font-weight:700;font-size:34px;margin-top:52px;border-radius:1px;
  transform:rotate(-1.5deg);box-shadow:inset 0 0 0 2px rgba(245,239,224,.35)}
.signoff{margin-top:22px;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:16px;color:rgba(245,239,224,.55)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,80px);align-items:start;margin-top:52px}
.contact-grid .lines{display:flex;flex-direction:column;gap:26px}
.cline .lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.cline .val{font-family:"Cormorant Garamond",serif;font-size:22px;color:var(--ivory)}
.cline a.val:hover{color:var(--gold)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--night);color:rgba(245,239,224,.6);padding:44px var(--gut) 56px;border-top:1px solid rgba(245,239,224,.08)}
footer .frow{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer .fbrand{display:flex;align-items:center;gap:12px;color:var(--ivory)}
footer .fbrand img.mark,footer .fbrand svg{height:18px;width:auto;display:block}
footer .fbrand .wm{font-family:"Cormorant Garamond",serif;letter-spacing:.28em;font-size:15px}
footer nav{display:flex;gap:22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;flex-wrap:wrap}
footer nav a:hover{color:var(--ivory)}
footer .fine{max-width:var(--maxw);margin:26px auto 0;font-size:12px;letter-spacing:.04em;opacity:.55;text-align:center}

/* ---------- reveal ---------- */
/* content is visible by default; only hidden (for the fade-in) once JS is running */
.reveal{transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
html.js .reveal{opacity:0;transform:translateY(22px)}
html.js .reveal.in{opacity:1;transform:none}
/* blended images: no reveal at all - always in place, fully warm (any animation isolates the layer and breaks mix-blend-mode) */
html.js .figure.blend.reveal{opacity:1!important;transform:none!important;transition:none!important;clip-path:none!important}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.rail{display:none}}

/* ---------- page transitions (cross-document view transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:.001s}}


/* ============================================================
   HOME PAGE (v2) — black base, white contrast sections,
   tight sans headings, imperial gold used sparingly.
   Scoped to body.home-v2 so the shared styles above are untouched.
============================================================ */
body.home-v2{
  --hx-black:#000000;
  --hx-panel:#0B0B0B;
  --hx-panel-2:#101010;
  --hx-line:rgba(255,255,255,.10);
  --hx-line-strong:rgba(255,255,255,.20);
  --hx-white:#FFFFFF;
  --hx-mute:rgba(255,255,255,.58);
  --hx-mute-2:rgba(255,255,255,.42);
  --hx-ink:#0A0A0A;
  --hx-ink-mute:#5C5C5C;
  --hx-ink-line:rgba(10,10,10,.12);
  background:var(--hx-black);
  color:var(--hx-white);
}

/* ---------- type ---------- */
body.home-v2 h1,
body.home-v2 h2,
body.home-v2 h3,
body.home-v2 .hx-num{
  font-family:"Inter Tight","DM Sans",system-ui,-apple-system,sans-serif;
  font-weight:600;
  letter-spacing:-0.035em;
  line-height:1.04;
}
body.home-v2 h1{font-size:clamp(42px,6.2vw,84px);letter-spacing:-0.042em}
body.home-v2 h2{font-size:clamp(30px,4.2vw,56px);letter-spacing:-0.038em}
body.home-v2 h3{font-size:20px;letter-spacing:-0.025em;font-weight:600}
body.home-v2 p{font-size:16.5px;line-height:1.62;color:var(--hx-mute)}
body.home-v2 .eyebrow{color:var(--hx-mute-2);letter-spacing:.22em;font-size:10.5px;margin-bottom:22px}
body.home-v2 .eyebrow::before{width:22px;background:var(--gold)}

/* ---------- sections ---------- */
body.home-v2 section{padding:clamp(76px,11vh,140px) var(--gut)}
body.home-v2 section.hx-dark{background:var(--hx-black);color:var(--hx-white)}
body.home-v2 section.hx-light{background:var(--hx-white);color:var(--hx-ink)}
body.home-v2 section.hx-light h1,
body.home-v2 section.hx-light h2,
body.home-v2 section.hx-light h3{color:var(--hx-ink)}
body.home-v2 section.hx-light p{color:var(--hx-ink-mute)}
body.home-v2 section.hx-light .eyebrow{color:rgba(10,10,10,.42)}
body.home-v2 section.grain::after{display:none}
body.home-v2 section.hx-dark p{color:var(--hx-mute)}
body.home-v2 section.hx-dark h2{color:#fff}

/* ---------- hero ---------- */
/* Content is centred, not bottom-pinned, so the space above it is half the
   leftover rather than all of it. The height cap stops that leftover growing
   without limit on tall screens - above ~1090px viewport the hero is a fixed
   1000px, so the gap stops changing entirely. */
body.home-v2 .home-hero{
  min-height:min(92svh,1000px);
  padding-top:clamp(96px,12vh,150px);
  padding-bottom:clamp(56px,8vh,100px);
  align-items:center;
}
body.home-v2 .home-hero.has-video{background:#000}
/* poster only as a still fallback when the video is suppressed */
@media(prefers-reduced-motion:reduce){
  body.home-v2 .home-hero.has-video{background:#000 url('silkroad-hero-poster.jpg') center/cover no-repeat}
}
body.home-v2 .hero-bg{opacity:1;filter:grayscale(.3) contrast(1.04) brightness(.58)}
body.home-v2 .hero-tint{
  background:
    linear-gradient(90deg,rgba(0,0,0,.94),rgba(0,0,0,.72) 42%,rgba(0,0,0,.34)),
    linear-gradient(0deg,#000 2%,rgba(0,0,0,.55) 34%,transparent 72%);
}
body.home-v2 .home-hero h1{max-width:15ch;color:#fff}
body.home-v2 .home-hero .hx-sub{margin-top:24px;max-width:50ch;font-size:17.5px;line-height:1.6;color:rgba(255,255,255,.66)}
body.home-v2 .hx-hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
body.home-v2 .hx-pill{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--hx-line);border-radius:100px;
  padding:7px 15px 7px 12px;margin-bottom:26px;
  font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.72);
  background:rgba(255,255,255,.03);backdrop-filter:blur(6px);
}
body.home-v2 .hx-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(232,184,66,.16)}

/* ---------- buttons ---------- */
body.home-v2 .hx-btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Inter Tight","DM Sans",sans-serif;font-size:14px;font-weight:500;letter-spacing:-0.01em;
  text-transform:none;padding:13px 22px;border-radius:8px;
  background:var(--gold);color:#0A0A0A;border:1px solid var(--gold);
  transition:transform .22s ease,opacity .22s ease,background .22s ease,border-color .22s ease;
}
body.home-v2 .hx-btn:hover{transform:translateY(-1px);opacity:.9}
body.home-v2 .hx-btn.line{background:transparent;color:#fff;border-color:var(--hx-line-strong)}
body.home-v2 .hx-btn.line:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.36)}
body.home-v2 .hx-light .hx-btn.line{color:var(--hx-ink);border-color:var(--hx-ink-line)}
body.home-v2 .hx-light .hx-btn.line:hover{background:rgba(10,10,10,.04);border-color:rgba(10,10,10,.3)}
body.home-v2 .hx-link{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--gold);letter-spacing:-0.01em}
body.home-v2 .hx-link .arrow{transition:transform .22s ease}
body.home-v2 .hx-link:hover .arrow{transform:translateX(5px)}

/* ---------- the numbers strip ---------- */
body.home-v2 .hx-stats{
  padding:0 var(--gut);background:var(--hx-black);
  border-top:1px solid var(--hx-line);border-bottom:1px solid var(--hx-line);
}
body.home-v2 .hx-stats .grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
body.home-v2 .hx-stat{padding:38px 34px 40px 0;position:relative}
body.home-v2 .hx-stat + .hx-stat{padding-left:34px}
body.home-v2 .hx-stat + .hx-stat::before{content:"";position:absolute;left:0;top:38px;bottom:40px;width:1px;background:var(--hx-line)}
body.home-v2 .hx-stat .tick{width:20px;height:2px;background:var(--gold);margin-bottom:18px;opacity:.9}
body.home-v2 .hx-num{font-size:clamp(26px,3vw,40px);color:#fff;display:block;margin-bottom:9px;white-space:nowrap}
body.home-v2 .hx-stat .lbl{font-size:13.5px;line-height:1.5;color:var(--hx-mute);max-width:22ch;display:block}
@media(max-width:820px){
  body.home-v2 .hx-stats .grid{grid-template-columns:1fr 1fr}
  body.home-v2 .hx-stat{padding:28px 20px 30px 0}
  body.home-v2 .hx-stat:nth-child(even){padding-left:24px}
  body.home-v2 .hx-stat:nth-child(odd){padding-left:0}
  body.home-v2 .hx-stat:nth-child(odd)::before{display:none}
  body.home-v2 .hx-stat:nth-child(even)::before{display:block}
  body.home-v2 .hx-stat:nth-child(n+3){border-top:1px solid var(--hx-line)}
}
@media(max-width:460px){
  body.home-v2 .hx-stats .grid{grid-template-columns:1fr}
  body.home-v2 .hx-stat{padding:24px 0 26px!important}
  body.home-v2 .hx-stat::before{display:none!important}
  body.home-v2 .hx-stat + .hx-stat{border-top:1px solid var(--hx-line)}
}

/* ---------- layout helpers ---------- */
body.home-v2 .hx-head{max-width:64ch}
body.home-v2 .hx-head h2{max-width:20ch}
body.home-v2 .hx-head p{margin-top:20px;max-width:56ch;font-size:17px}
body.home-v2 .hx-split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,6vw,84px);align-items:start}
body.home-v2 .hx-split .body{display:flex;flex-direction:column;gap:18px}
@media(max-width:860px){body.home-v2 .hx-split{grid-template-columns:1fr;gap:26px}}

/* ---------- cards ---------- */
body.home-v2 .hx-cards{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
body.home-v2 .hx-card{
  display:flex;flex-direction:column;padding:30px 28px 26px;
  border:1px solid var(--hx-line);border-radius:14px;
  background:linear-gradient(180deg,var(--hx-panel-2),var(--hx-panel));
  transition:border-color .28s ease,transform .28s ease,background .28s ease;
}
body.home-v2 .hx-card:hover{border-color:rgba(232,184,66,.42);transform:translateY(-3px)}
body.home-v2 .hx-card .k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
body.home-v2 .hx-card h3{margin-bottom:10px;color:#fff}
body.home-v2 .hx-card p{font-size:15px;color:var(--hx-mute)}
body.home-v2 .hx-card .hx-link{margin-top:auto;padding-top:22px}
@media(max-width:860px){body.home-v2 .hx-cards{grid-template-columns:1fr}}

/* ---------- compare ---------- */
body.home-v2 .hx-compare{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
body.home-v2 .hx-pane{border:1px solid var(--hx-ink-line);border-radius:14px;padding:32px 30px;background:#FAFAFA}
body.home-v2 .hx-pane.ours{background:#0A0A0A;border-color:rgba(255,255,255,.14)}
body.home-v2 .hx-pane .tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hx-ink-mute);margin-bottom:22px}
body.home-v2 .hx-pane.ours .tag{color:var(--gold)}
body.home-v2 .hx-pane h3{margin-bottom:20px;font-size:22px}
body.home-v2 .hx-pane.ours h3{color:#fff}
body.home-v2 .hx-pane ul{list-style:none;display:flex;flex-direction:column;gap:13px}
body.home-v2 .hx-pane li{position:relative;padding-left:26px;font-size:15px;line-height:1.55;color:var(--hx-ink-mute)}
body.home-v2 .hx-pane li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:1px;background:rgba(10,10,10,.28)}
body.home-v2 .hx-pane.ours li{color:var(--hx-mute)}
body.home-v2 .hx-pane.ours li::before{background:var(--gold)}
@media(max-width:820px){body.home-v2 .hx-compare{grid-template-columns:1fr}}

/* ---------- four refusals ---------- */
body.home-v2 .hx-grid4{margin-top:52px;display:grid;grid-template-columns:repeat(2,1fr);gap:0}
body.home-v2 .hx-item{padding:30px 44px 30px 0;border-top:1px solid var(--hx-ink-line)}
body.home-v2 .hx-item:nth-child(even){padding-left:44px;border-left:1px solid var(--hx-ink-line)}
body.home-v2 .hx-item h3{margin-bottom:9px}
body.home-v2 .hx-item p{font-size:15px}
@media(max-width:720px){
  body.home-v2 .hx-grid4{grid-template-columns:1fr}
  body.home-v2 .hx-item{padding:24px 0!important;border-left:none!important}
}

/* ---------- image band ---------- */
body.home-v2 .hx-figure{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:#0B0B0B;border:1px solid var(--hx-line)}
body.home-v2 .hx-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:.82}
body.home-v2 .hx-figure::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 60%)}

/* ---------- closing cta ---------- */
body.home-v2 .hx-close{text-align:center;max-width:820px;margin:0 auto}
body.home-v2 .hx-close .eyebrow{justify-content:center}
body.home-v2 .hx-close h2{max-width:18ch;margin:0 auto;font-size:clamp(34px,5.4vw,68px)}
body.home-v2 .hx-close p{margin:24px auto 0;max-width:52ch;font-size:17px}
body.home-v2 .hx-close .hx-hero-actions{justify-content:center}
body.home-v2 .hx-signoff{margin-top:40px;font-size:13px;letter-spacing:.04em;color:var(--hx-mute-2)}

/* ---------- rail + nav on pure black ---------- */
body.home-v2 .rail .track{background:rgba(255,255,255,.10)}
body.home-v2.night-rail .rail .track{background:rgba(255,255,255,.14)}
body.home-v2 header.nav.solid{background:rgba(0,0,0,.86);border-bottom:1px solid var(--hx-line)}
body.home-v2 nav.links a.cta{border-radius:7px;padding:9px 16px;text-transform:none;letter-spacing:-0.01em;font-size:13.5px}


/* ---------- carrier marquee ---------- */
body.home-v2 .hx-carriers{padding:38px 0 42px;background:var(--hx-black);border-bottom:1px solid var(--hx-line);overflow:hidden}
body.home-v2 .hx-carriers .hx-carriers-label{
  max-width:var(--maxw);margin:0 auto 26px;padding:0 var(--gut);
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--hx-mute-2);
}
body.home-v2 .hx-marquee{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
body.home-v2 .hx-track{display:flex;width:max-content;animation:hx-scroll 35s linear infinite}
body.home-v2 .hx-marquee:hover .hx-track{animation-play-state:paused}
body.home-v2 .hx-set{
  display:flex;align-items:center;list-style:none;margin:0;padding:0;
  gap:clamp(20px,2.4vw,34px);padding-right:clamp(20px,2.4vw,34px);
}
/* the supplied logo files are full colour with baked-in white or yellow
   backgrounds, so each one sits on a white chip rather than bare on black */
/* logos sit straight on the black band - no chips. the slots are invisible
   and exist only to crop the dead padding baked into some of the files
   and to keep the row on a consistent rhythm */
body.home-v2 .hx-set li{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:170px;height:58px;padding:0;overflow:hidden;
  transition:transform .25s ease,opacity .25s ease;
}
body.home-v2 .hx-set li:hover{transform:translateY(-2px)}
body.home-v2 .hx-set img{display:block;width:auto;height:26px;max-width:none}
/* Per-logo sizing. Values are the height of the whole image file, not of the
   visible mark - the padded files are blown up past the slot so the slot can
   crop the empty margin. Each lands the mark at roughly 25px. */
body.home-v2 .hx-set .lg-4px img{height:110px}    /* mark is ~25% of the file */
body.home-v2 .hx-set .lg-dhl img{height:104px}    /* mark is ~25% of the file */
body.home-v2 .hx-set .lg-rm img{height:62px}      /* stacked crown + wordmark */
body.home-v2 .hx-set .lg-fedex img{height:48px}   /* mark is ~53% of the file */
body.home-v2 .hx-set .lg-ups img{height:36px}
body.home-v2 .hx-set .lg-sf img{height:34px}      /* mark is ~80% of the file */
body.home-v2 .hx-set .lg-auspost img{height:30px}
body.home-v2 .hx-set .lg-usps img{height:26px}    /* file is cropped tight */
body.home-v2 .hx-set .lg-cainiao img{height:24px} /* file is cropped tight */
@media(max-width:720px){
  body.home-v2 .hx-set li{width:132px;height:48px}
  body.home-v2 .hx-set img{height:21px}
  body.home-v2 .hx-set .lg-4px img{height:90px}
  body.home-v2 .hx-set .lg-dhl img{height:86px}
  body.home-v2 .hx-set .lg-rm img{height:51px}
  body.home-v2 .hx-set .lg-fedex img{height:40px}
  body.home-v2 .hx-set .lg-usps img{height:21px}
  body.home-v2 .hx-set .lg-ups img{height:30px}
  body.home-v2 .hx-set .lg-sf img{height:26px}
  body.home-v2 .hx-set .lg-auspost img{height:25px}
  body.home-v2 .hx-set .lg-cainiao img{height:20px}
}
@keyframes hx-scroll{from{transform:translateX(0)}to{transform:translateX(-25%)}}
/* 4 identical sets: the track stays wider than viewport + one set, so the reset is invisible */
@media(max-width:720px){
  body.home-v2 .hx-track{animation-duration:27s}
}
@media(prefers-reduced-motion:reduce){
  body.home-v2 .hx-marquee{-webkit-mask-image:none;mask-image:none;padding:0 var(--gut)}
  body.home-v2 .hx-track{width:auto;animation:none;max-width:var(--maxw);margin:0 auto}
  body.home-v2 .hx-set{flex-wrap:wrap;gap:34px 44px;padding-right:0;justify-content:flex-start}
  body.home-v2 .hx-set[aria-hidden="true"]{display:none}
}

/* ---------- services tabs ---------- */
body.home-v2 .hx-svc{background:var(--hx-black)}
body.home-v2 .hx-svc-head{max-width:var(--maxw);margin:0 auto;text-align:center}
body.home-v2 .hx-svc-head .eyebrow{justify-content:center}
body.home-v2 .hx-svc-head h2{max-width:22ch;margin:0 auto}
body.home-v2 .hx-accent{color:var(--gold)}

body.home-v2 .hx-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:38px auto 0;max-width:var(--maxw)}
body.home-v2 .hx-tab{
  font-family:"Inter Tight","DM Sans",sans-serif;font-size:14px;font-weight:500;letter-spacing:-0.01em;
  padding:11px 22px;border-radius:100px;cursor:pointer;
  background:transparent;color:rgba(255,255,255,.66);border:1px solid var(--hx-line);
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
body.home-v2 .hx-tab:hover{color:#fff;border-color:rgba(255,255,255,.28)}
body.home-v2 .hx-tab[aria-selected="true"]{background:var(--gold);color:#0A0A0A;border-color:var(--gold)}
body.home-v2 .hx-tab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

body.home-v2 .hx-panels{max-width:var(--maxw);margin:34px auto 0}
body.home-v2 .hx-panel{display:none}
body.home-v2 .hx-panel.is-active{display:block}
body.home-v2 .hx-panel-inner{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:14px;
  border:1px solid var(--hx-line);border-radius:20px;padding:14px;background:#070707;
}
@media(max-width:980px){body.home-v2 .hx-panel-inner{grid-template-columns:1fr}}

body.home-v2 .hx-gfx-wrap{
  position:relative;border-radius:14px;overflow:hidden;min-height:430px;
  background:radial-gradient(120% 85% at 50% 12%,rgba(232,184,66,.10),rgba(255,255,255,.015) 46%,#0A0A0A 100%);
  border:1px solid var(--hx-line);display:flex;align-items:center;justify-content:center;padding:26px 22px 52px;
}
@media(max-width:980px){body.home-v2 .hx-gfx-wrap{min-height:320px}}
body.home-v2 .hx-gfx{width:100%;height:auto;display:block;overflow:visible}
body.home-v2 .hx-gfx-cap{
  position:absolute;left:22px;right:22px;bottom:18px;
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.76);
}
body.home-v2 .hx-gfx-cap::before{content:"";flex:0 0 auto;width:16px;height:1px;background:var(--gold)}

body.home-v2 .hx-panel-body{display:flex;flex-direction:column;gap:14px}
body.home-v2 .hx-svc-intro{
  padding:22px 24px;border-radius:14px;background:#0E0E0E;border:1px solid var(--hx-line);
  font-size:16px;line-height:1.6;color:var(--hx-mute);margin:0;max-width:none;
}
body.home-v2 .hx-svc-intro b{color:#fff;font-weight:600}
body.home-v2 .hx-svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;flex:1}
@media(max-width:680px){body.home-v2 .hx-svc-grid{grid-template-columns:1fr}}
body.home-v2 .hx-svc-item{
  position:relative;padding:24px 24px 46px;border-radius:14px;
  background:#0E0E0E;border:1px solid var(--hx-line);
  transition:border-color .25s ease,background .25s ease;
}
body.home-v2 .hx-svc-item:hover{border-color:rgba(232,184,66,.34);background:#111}
body.home-v2 .hx-svc-item h3{font-size:17px;margin-bottom:9px;color:#fff}
body.home-v2 .hx-svc-item p{font-size:14.5px;line-height:1.58;color:var(--hx-mute);max-width:none}
body.home-v2 .hx-svc-item .n{
  position:absolute;right:16px;bottom:14px;
  font-size:10.5px;letter-spacing:.14em;color:rgba(255,255,255,.3);
  border:1px solid var(--hx-line);border-radius:6px;padding:3px 7px;
}

/* ---------- panel graphics ---------- */
body.home-v2 .hx-gfx .ln{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.5}
body.home-v2 .hx-gfx .ln-g{fill:none;stroke:var(--gold);stroke-width:1.5}
body.home-v2 .hx-gfx text{
  fill:rgba(255,255,255,.5);font-family:"Inter Tight","DM Sans",sans-serif;
  font-size:10.5px;letter-spacing:.14em;
}
body.home-v2 .hx-gfx [class^="g"]{transform-box:fill-box}
@keyframes hx-draw{to{stroke-dashoffset:0}}
@keyframes hx-fade{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* 1 — fulfillment */
.g1-bar{fill:rgba(255,255,255,.13);opacity:0;animation:hx-fade .6s cubic-bezier(.2,.7,.2,1) both}
.g1-bar.b1{animation-delay:.2s}
.g1-bar.b2{animation-delay:.4s}
.g1-bar.b3{animation-delay:.6s}
.g1-box,.g1-flap{fill:none;stroke:rgba(255,255,255,.24);stroke-width:1.5;stroke-linejoin:round;
  stroke-dasharray:760;stroke-dashoffset:760;animation:hx-draw 1.3s ease .05s forwards}
.g1-scan{fill:var(--gold);animation:g1scan 3.4s ease-in-out 1.1s infinite}
@keyframes g1scan{0%{transform:translateY(4px);opacity:0}14%{opacity:.75}86%{opacity:.75}100%{transform:translateY(150px);opacity:0}}
.g1-seal{fill:none;stroke:var(--gold);stroke-width:1.5;transform-origin:center;
  animation:g1pulse 3.4s ease-in-out 1.3s infinite}
@keyframes g1pulse{0%,55%{opacity:.28;transform:scale(.88)}72%{opacity:1;transform:scale(1)}100%{opacity:.28;transform:scale(.88)}}
.g1-check{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:hx-draw .5s ease 1.7s forwards}

/* 2 — sourcing (the sample ladder) */
.g2-spine{stroke:rgba(255,255,255,.14);stroke-width:1.5}
.g2-node{fill:#0A0A0A;stroke:rgba(255,255,255,.24);stroke-width:1.5;animation:g2pulse 4.8s ease-in-out infinite}
@keyframes g2pulse{0%,64%,100%{fill:#0A0A0A;stroke:rgba(255,255,255,.24)}10%,44%{fill:var(--gold);stroke:var(--gold)}}
.g2-lbl{opacity:0;animation:hx-fade .5s ease both}
.g2-rung{stroke:rgba(255,255,255,.1);stroke-width:1}
.g2-n1{animation-delay:0s}.g2-n2{animation-delay:.32s}.g2-n3{animation-delay:.64s}
.g2-n4{animation-delay:.96s}.g2-n5{animation-delay:1.28s}.g2-n6{animation-delay:1.6s}
.g2-runner{fill:var(--gold);opacity:.85;animation:g2run 4.8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes g2run{0%{transform:translateY(0);opacity:0}8%{opacity:.9}92%{opacity:.9}100%{transform:translateY(280px);opacity:0}}

/* 3 — access (the room) */
.g3-spoke{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5;
  stroke-dasharray:200;stroke-dashoffset:200;animation:hx-draw .8s ease both}
.g3-s1{animation-delay:.15s}.g3-s2{animation-delay:.3s}.g3-s3{animation-delay:.45s}
.g3-s4{animation-delay:.6s}.g3-s5{animation-delay:.75s}
.g3-node{fill:#0C0C0C;stroke:rgba(255,255,255,.28);stroke-width:1.5;opacity:0;
  animation:g3pop .5s cubic-bezier(.2,.9,.3,1.3) both;transform-origin:center}
@keyframes g3pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.g3-n1{animation-delay:.5s}.g3-n2{animation-delay:.65s}.g3-n3{animation-delay:.8s}
.g3-n4{animation-delay:.95s}.g3-n5{animation-delay:1.1s}
.g3-lbl{opacity:0;animation:hx-fade .5s ease both}
.g3-core{fill:rgba(232,184,66,.14);stroke:var(--gold);stroke-width:1.5}
.g3-ring{fill:none;stroke:var(--gold);stroke-width:1.5;transform-origin:center;
  animation:g3ring 3.2s ease-out infinite}
@keyframes g3ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.5)}}

/* 4 — growth */
.g4-bar{fill:rgba(255,255,255,.13);transform-origin:bottom;animation:g4grow .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes g4grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.g4-b1{animation-delay:.15s}.g4-b2{animation-delay:.27s}.g4-b3{animation-delay:.39s}
.g4-b4{animation-delay:.51s}.g4-b5{animation-delay:.63s}.g4-b6{animation-delay:.75s}
.g4-trend{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:420;stroke-dashoffset:420;animation:hx-draw 1.6s ease .8s forwards}
.g4-sweep{fill:url(#g4grad);animation:g4sweep 3.6s ease-in-out 1.4s infinite}
@keyframes g4sweep{0%{transform:translateX(-90px);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(300px);opacity:0}}
.g4-cap{fill:var(--gold);opacity:0;animation:g3pop .5s cubic-bezier(.2,.9,.3,1.3) 2.2s both;transform-origin:center}

/* ---------- platforms ---------- */
body.home-v2 .hx-pf-head{max-width:var(--maxw);margin:0 auto;text-align:center}
body.home-v2 .hx-pf-head .eyebrow{justify-content:center}
body.home-v2 .hx-pf-head h2{max-width:20ch;margin:0 auto}
body.home-v2 .hx-pf-grid{
  max-width:var(--maxw);margin:52px auto 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:16px;align-items:stretch;
}
/* collapses at 1080 rather than 940 - below that the left card is too narrow
   to hold the outer ring without clipping the widest chips */
@media(max-width:1080px){body.home-v2 .hx-pf-grid{grid-template-columns:1fr}}
body.home-v2 .hx-pf-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border:1px solid var(--hx-line);border-radius:16px;
  background:linear-gradient(180deg,#101010,#0B0B0B);
}
body.home-v2 .hx-pf-card h3{font-size:22px;color:#fff;letter-spacing:-.03em}
body.home-v2 .hx-pf-card p{font-size:15.5px;color:var(--hx-mute);margin-top:10px;max-width:46ch}
body.home-v2 .hx-pf-card .hx-link{margin-top:16px}

/* --- left: orbit --- */
/* min-height must clear the outer ring plus half a chip (152 + 14 = 166 each
   way), or chips spill past the card edge and over the heading below */
body.home-v2 .pf-orbit{
  position:relative;flex:1;min-height:384px;
  display:flex;align-items:center;justify-content:center;
}
body.home-v2 .pf-ring{
  position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.07);border-radius:50%;
  transform:translate(-50%,-50%);
}
body.home-v2 .pf-ring.r1{width:144px;height:144px}
body.home-v2 .pf-ring.r2{width:224px;height:224px}
body.home-v2 .pf-ring.r3{width:304px;height:304px;border-color:rgba(255,255,255,.05)}
/* The ring does NOT rotate. Instead an angle variable is animated and each
   item positions itself from it, cancelling the rotation in its own transform.
   Chips are therefore upright by construction - there is no second animation
   to fall out of step with, which is what made the labels tilt. */
@property --spin{syntax:"<angle>";inherits:true;initial-value:0deg}
body.home-v2 .pf-spin{position:absolute;left:50%;top:50%;width:0;height:0;--spin:0deg}
body.home-v2 .pf-spin.s1{animation:pf-spin 44s linear infinite}
body.home-v2 .pf-spin.s2{animation:pf-spin 62s linear infinite reverse}
body.home-v2 .pf-spin.s3{animation:pf-spin 82s linear infinite}
@keyframes pf-spin{from{--spin:0deg}to{--spin:360deg}}
body.home-v2 .pf-item{
  position:absolute;left:0;top:0;
  --ang:calc(var(--a) + var(--spin));
  transform:rotate(var(--ang)) translateX(var(--r)) rotate(calc(-1 * var(--ang)));
}
body.home-v2 .pf-chip{
  position:absolute;left:50%;top:50%;margin:0;white-space:nowrap;
  transform:translate(-50%,-50%);
  padding:6px 12px;border-radius:100px;
  border:1px solid var(--hx-line);background:rgba(20,20,20,.92);
  font-family:"Inter Tight","DM Sans",sans-serif;font-size:11.5px;font-weight:500;letter-spacing:-.005em;
  color:rgba(255,255,255,.74);
}
body.home-v2 .pf-chip.is-key{border-color:rgba(232,184,66,.5);color:var(--gold);background:rgba(232,184,66,.08)}
body.home-v2 .pf-core{
  position:relative;z-index:2;width:64px;height:64px;border-radius:15px;
  background:#0D0D0D;border:1px solid rgba(232,184,66,.55);
  display:flex;align-items:center;justify-content:center;
  /* both shadows centred (no y-offset) so the halo spreads evenly all round */
  box-shadow:0 0 0 6px rgba(232,184,66,.05),0 0 44px 2px rgba(232,184,66,.3);
}
/* plain <img>, same as the header brandmark - the CSS-mask version of this
   rendered here but not in Chrome, and the header proves this path loads */
body.home-v2 .pf-mark{width:38px;height:auto;display:block}
body.home-v2 .pf-pulse{
  position:absolute;left:50%;top:50%;width:64px;height:64px;border-radius:16px;
  border:1px solid var(--gold);transform:translate(-50%,-50%);opacity:0;
  animation:pf-pulse 3.6s ease-out infinite;
}
@keyframes pf-pulse{0%{opacity:.55;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
body.home-v2 .pf-foot{padding:0 28px 26px}

/* --- right: inventory panel --- */
body.home-v2 .pf-top{padding:30px 30px 0}
body.home-v2 .pf-stack{position:relative;margin:26px 0 0 30px;flex:1}
body.home-v2 .pf-ghost{
  position:absolute;left:22px;right:0;top:-12px;height:44px;border-radius:10px 0 0 0;
  border:1px solid var(--hx-line);border-bottom:none;background:#141414;
}
body.home-v2 .pf-panel{
  position:relative;border:1px solid var(--hx-line);border-bottom:none;border-right:none;
  border-radius:10px 0 0 0;background:#131313;overflow:hidden;
}
body.home-v2 .pf-panel-bar{
  display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--hx-line);
  font-size:11.5px;color:var(--hx-mute);
}
body.home-v2 .pf-live{width:7px;height:7px;border-radius:50%;background:#3FBF6A;animation:pf-blink 2.2s ease-in-out infinite}
@keyframes pf-blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(63,191,106,.45)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(63,191,106,0)}}
body.home-v2 .pf-panel-bar .sync{margin-left:auto;color:var(--hx-mute-2);font-size:11px}
body.home-v2 .pf-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
body.home-v2 .pf-tbl th{
  text-align:left;padding:10px 14px;font-weight:500;color:var(--hx-mute-2);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--hx-line);
}
body.home-v2 .pf-tbl td{padding:11px 14px;color:var(--hx-mute);border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
body.home-v2 .pf-tbl td.sku{color:rgba(255,255,255,.85);font-variant-numeric:tabular-nums}
body.home-v2 .pf-tbl td.qty{color:#fff;font-variant-numeric:tabular-nums;text-align:right}
body.home-v2 .pf-pill{
  display:inline-block;padding:3px 9px;border-radius:100px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--hx-line);color:var(--hx-mute);
}
body.home-v2 .pf-pill.ok{border-color:rgba(63,191,106,.35);color:#6FD494}
body.home-v2 .pf-pill.low{border-color:rgba(232,184,66,.45);color:var(--gold)}
body.home-v2 .pf-pill.re{border-color:rgba(200,48,45,.5);color:#E4645F}
html.js body.home-v2 .reveal.in .pf-tbl tbody tr{animation:pf-row .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes pf-row{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.home-v2 .pf-tbl tbody tr:nth-child(1){animation-delay:.25s}
body.home-v2 .pf-tbl tbody tr:nth-child(2){animation-delay:.35s}
body.home-v2 .pf-tbl tbody tr:nth-child(3){animation-delay:.45s}
body.home-v2 .pf-tbl tbody tr:nth-child(4){animation-delay:.55s}
body.home-v2 .pf-tbl tbody tr:nth-child(5){animation-delay:.65s}
@media(max-width:940px){
  body.home-v2 .pf-stack{margin-left:20px}
}
/* below phone width the orbit can't hold twelve chips without collisions,
   so it flattens into a static centred cloud - no rings, no rotation */
@media(max-width:640px){
  body.home-v2 .pf-orbit{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
    min-height:0;padding:34px 20px 30px;
  }
  body.home-v2 .pf-ring,body.home-v2 .pf-pulse{display:none}
  body.home-v2 .pf-orbit .pf-spin{display:contents;animation:none}
  body.home-v2 .pf-orbit .pf-item{position:static;transform:none}
  body.home-v2 .pf-orbit .pf-spin .pf-chip{
    position:static;transform:none;display:inline-flex;
    font-size:11px;padding:6px 11px;
  }
  /* the tile moves onto the image so the core can span its own row, above */
  body.home-v2 .pf-core{
    order:-1;flex:0 0 100%;width:auto;height:auto;
    background:none;border:none;box-shadow:none;margin-bottom:18px;
  }
  body.home-v2 .pf-mark{
    width:42px;padding:13px 17px;box-sizing:content-box;border-radius:13px;
    background:#0D0D0D;border:1px solid rgba(232,184,66,.55);
    box-shadow:0 0 34px 2px rgba(232,184,66,.26);
  }
  body.home-v2 .pf-tbl .hide-sm{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.home-v2 .pf-orbit .pf-spin,body.home-v2 .pf-orbit .pf-chip,
  body.home-v2 .pf-pulse,body.home-v2 .pf-live{animation:none}
  html.js body.home-v2 .reveal.in .pf-tbl tbody tr{animation:none}
}

/* ---------- white-band overrides (flow + origin sections) ---------- */
body.home-v2 .hx-light .hx-flow-cap .who{color:rgba(10,10,10,.45)}
body.home-v2 .hx-light .hx-flow-row.them .dur{color:var(--hx-ink-mute)}
body.home-v2 .hx-light .hx-flow-row.us .dur{color:var(--gold)}
body.home-v2 .hx-light .hx-bar{background:rgba(10,10,10,.06)}
body.home-v2 .hx-light .hx-flow-row.them .hx-seg{background:rgba(10,10,10,.19);border-right-color:#fff}
body.home-v2 .hx-light .hx-flow-row.them .hx-seg span{color:rgba(10,10,10,.66)}
body.home-v2 .hx-light .hx-flow-note{border-top-color:var(--hx-ink-line);color:var(--hx-ink-mute)}
body.home-v2 .hx-light .hx-origin-copy p{color:var(--hx-ink-mute)}
body.home-v2 .hx-light .hx-vid{border-color:rgba(10,10,10,.14);background:#E9E9E9}

/* ---------- closing cta band ---------- */
body.home-v2 .hx-cta{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(84px,13vh,148px) var(--gut);
  background:
    radial-gradient(120% 150% at 50% 120%,rgba(232,184,66,.30),rgba(232,184,66,.06) 42%,transparent 68%),
    var(--hx-black);
  border-top:1px solid var(--hx-line);
}
/* dot field bleeding in from both edges, thinning toward the centre */
body.home-v2 .hx-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(rgba(232,184,66,.24) 1.1px,transparent 1.2px);
  background-size:18px 18px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 36%,transparent 64%,#000);
          mask-image:linear-gradient(90deg,#000,transparent 36%,transparent 64%,#000);
}
body.home-v2 .hx-cta .wrap{position:relative;z-index:1}
body.home-v2 .hx-cta h2{font-size:clamp(32px,5.2vw,62px);max-width:17ch;margin:0 auto;color:#fff}
body.home-v2 .hx-cta .hx-btn{margin-top:34px}
body.home-v2 .hx-cta .hx-signoff{margin-top:38px}

/* ---------- origin story + video ---------- */
body.home-v2 .hx-origin-head{max-width:var(--maxw);margin:0 auto;text-align:center}
body.home-v2 .hx-origin-head .eyebrow{justify-content:center}
body.home-v2 .hx-origin-head h2{max-width:20ch;margin:0 auto}
body.home-v2 .hx-origin-grid{
  max-width:var(--maxw);margin:54px auto 0;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
@media(max-width:940px){body.home-v2 .hx-origin-grid{grid-template-columns:1fr;gap:38px}}
body.home-v2 .hx-origin-copy p{font-size:17px;line-height:1.66;color:var(--hx-mute);max-width:52ch}
body.home-v2 .hx-origin-copy p + p{margin-top:18px}
body.home-v2 .hx-origin-copy .hx-btn{margin-top:30px}

/* angled slabs behind the video, echoing the reference layout */
body.home-v2 .hx-vid-wrap{position:relative}
body.home-v2 .hx-vid-wrap::before,body.home-v2 .hx-vid-wrap::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  clip-path:polygon(24% 0,100% 0,76% 100%,0 100%);
  background:linear-gradient(135deg,rgba(232,184,66,.55),rgba(232,184,66,.07));
}
body.home-v2 .hx-vid-wrap::before{width:158px;height:58px;right:-16px;top:-28px}
body.home-v2 .hx-vid-wrap::after{width:124px;height:46px;left:-20px;bottom:-24px;opacity:.5}
body.home-v2 .hx-vid{
  position:relative;z-index:1;border-radius:16px;overflow:hidden;cursor:pointer;
  border:1px solid var(--hx-line);background:#0B0B0B;aspect-ratio:16/10;
}
body.home-v2 .hx-vid video{width:100%;height:100%;object-fit:cover;display:block}
body.home-v2 .hx-vid-ov{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,.12));transition:opacity .35s ease;
}
body.home-v2 .hx-vid.playing .hx-vid-ov{opacity:0;pointer-events:none}
body.home-v2 .hx-play{
  width:66px;height:66px;border-radius:50%;background:var(--gold);color:#0A0A0A;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 10px rgba(232,184,66,.12);transition:transform .25s ease;
}
body.home-v2 .hx-vid:hover .hx-play{transform:scale(1.08)}
body.home-v2 .hx-vid-cap{
  position:absolute;left:20px;bottom:16px;z-index:3;transition:opacity .3s ease;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.78);
  text-shadow:0 1px 8px rgba(0,0,0,.75);
}
body.home-v2 .hx-vid.playing .hx-vid-cap{opacity:0}

/* ---------- proof: delivery rates + founder quotes ---------- */
body.home-v2 .hx-proof-grid{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px;align-items:stretch;
}
@media(max-width:1000px){body.home-v2 .hx-proof-grid{grid-template-columns:1fr}}

/* --- left: the stat card --- */
body.home-v2 .pr-card{
  position:relative;overflow:hidden;border-radius:16px;padding:30px 30px 26px;
  background:linear-gradient(158deg,#4E360C 0%,#31220A 52%,#221806 100%);
  border:1px solid rgba(232,184,66,.28);
  display:flex;flex-direction:column;
}
body.home-v2 .pr-lab{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(232,184,66,.9)}
body.home-v2 .pr-big{
  font-family:"Inter Tight","DM Sans",sans-serif;font-weight:600;letter-spacing:-.045em;
  font-size:clamp(46px,6vw,74px);line-height:1;color:#fff;margin-top:8px;
}
body.home-v2 .pr-sub{font-size:15px;color:rgba(255,255,255,.7);margin-top:8px;max-width:34ch}
body.home-v2 .pr-chart{
  position:relative;margin-top:30px;padding-top:44px;flex:1;min-height:230px;
  display:flex;align-items:flex-end;gap:clamp(6px,1.4vw,14px);
  border-top:1px solid rgba(255,255,255,.1);
}
body.home-v2 .pr-chart::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 44px);
}
body.home-v2 .pr-bar{
  position:relative;flex:1;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,rgba(232,184,66,.75),rgba(232,184,66,.16));
  border:1px solid rgba(232,184,66,.34);border-bottom:none;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:9px;
  height:var(--h);
}
body.home-v2 .pr-bar:last-child{background:linear-gradient(180deg,var(--gold),rgba(232,184,66,.3))}
body.home-v2 .pr-bar b{
  font-family:"Inter Tight","DM Sans",sans-serif;font-size:11.5px;font-weight:600;color:#fff;
  letter-spacing:-.01em;text-shadow:0 1px 6px rgba(0,0,0,.6);
}
body.home-v2 .pr-flag{
  position:absolute;left:50%;top:-17px;transform:translateX(-50%);
  width:32px;height:32px;border-radius:50%;overflow:hidden;
  border:2px solid #2A1D06;box-shadow:0 4px 14px rgba(0,0,0,.5);background:#111;
}
body.home-v2 .pr-flag svg{width:100%;height:100%;display:block}
body.home-v2 .pr-names{display:flex;gap:clamp(6px,1.4vw,14px);margin-top:12px}
body.home-v2 .pr-names span{
  flex:1;text-align:center;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
html.js body.home-v2 .reveal.in .pr-bar{animation:pr-rise 1.1s cubic-bezier(.2,.75,.25,1) both}
@keyframes pr-rise{from{height:0}}
body.home-v2 .pr-bar:nth-child(1){animation-delay:.1s}
body.home-v2 .pr-bar:nth-child(2){animation-delay:.18s}
body.home-v2 .pr-bar:nth-child(3){animation-delay:.26s}
body.home-v2 .pr-bar:nth-child(4){animation-delay:.34s}
body.home-v2 .pr-bar:nth-child(5){animation-delay:.42s}
body.home-v2 .pr-bar:nth-child(6){animation-delay:.5s}

/* --- right: scrolling quotes --- */
body.home-v2 .hx-quotes{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--hx-line);border-radius:16px;background:#0B0B0B;
}
body.home-v2 .q-head{
  padding:22px 26px;border-bottom:1px solid var(--hx-line);
  font-family:"Inter Tight","DM Sans",sans-serif;font-size:21px;font-weight:600;letter-spacing:-.03em;color:#fff;
}
body.home-v2 .q-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;
  height:460px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 11%,#000 89%,transparent);
}
body.home-v2 .q-col{overflow:hidden}
body.home-v2 .q-track{display:flex;flex-direction:column;animation:q-roll 38s linear infinite}
body.home-v2 .q-track.rev{animation-direction:reverse;animation-duration:46s}
body.home-v2 .q-cols:hover .q-track{animation-play-state:paused}
/* each set carries its own trailing gap so -50% lands on an identical frame */
body.home-v2 .q-set{display:flex;flex-direction:column;gap:14px;padding-bottom:14px}
@keyframes q-roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
body.home-v2 .q-card{
  border:1px solid var(--hx-line);border-radius:12px;background:#111;padding:18px 18px 16px;
}
body.home-v2 .q-card p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.8);margin:0 0 14px;max-width:none}
body.home-v2 .q-mark{display:block;color:var(--gold);font-size:22px;line-height:1;margin-bottom:8px;opacity:.75}
body.home-v2 .q-who{display:flex;align-items:center;gap:10px}
body.home-v2 .q-av{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:rgba(232,184,66,.14);border:1px solid rgba(232,184,66,.4);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;letter-spacing:.04em;
}
body.home-v2 .q-who b{display:block;font-size:12.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
body.home-v2 .q-who small{display:block;font-size:11.5px;color:var(--hx-mute-2)}
@media(max-width:1000px){
  body.home-v2 .q-cols{height:400px}
}
@media(max-width:620px){
  body.home-v2 .q-cols{grid-template-columns:1fr;height:360px}
  body.home-v2 .q-col:nth-child(2){display:none}
  body.home-v2 .pr-flag{width:26px;height:26px;top:-14px}
  body.home-v2 .pr-bar b{font-size:10px}
  body.home-v2 .pr-names span{font-size:8px;letter-spacing:.04em}
}
@media(prefers-reduced-motion:reduce){
  body.home-v2 .q-track{animation:none}
  html.js body.home-v2 .reveal.in .pr-bar{animation:none}
}

/* ---------- flow / compression bars ---------- */
body.home-v2 .hx-flow{margin-top:56px;display:flex;flex-direction:column;gap:40px}
body.home-v2 .hx-flow-cap{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:13px;flex-wrap:wrap}
body.home-v2 .hx-flow-cap .who{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--hx-mute-2)}
body.home-v2 .hx-flow-cap .dur{
  font-family:"Inter Tight","DM Sans",sans-serif;font-weight:600;letter-spacing:-.03em;
  font-size:clamp(20px,2.4vw,30px);
}
body.home-v2 .hx-flow-row.them .dur{color:var(--hx-mute)}
body.home-v2 .hx-flow-row.us .dur{color:var(--gold)}
body.home-v2 .hx-bar{height:56px;border-radius:6px;overflow:hidden;display:flex;background:rgba(255,255,255,.04)}
body.home-v2 .hx-flow-row.them .hx-bar{width:100%}
body.home-v2 .hx-flow-row.us .hx-bar{width:22%;min-width:290px}
body.home-v2 .hx-seg{position:relative;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
body.home-v2 .hx-seg span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;padding:0 6px}
body.home-v2 .hx-flow-row.them .hx-seg{background:rgba(255,255,255,.075);border-right:1px solid #000}
body.home-v2 .hx-flow-row.them .hx-seg span{color:var(--hx-mute-2)}
body.home-v2 .hx-flow-row.us .hx-seg{border-right:1px solid rgba(0,0,0,.35)}
body.home-v2 .hx-flow-row.us .hx-seg span{color:#2A1F05;font-weight:600}
body.home-v2 .hx-flow-row.us .hx-seg:nth-child(1){background:#F0CB6A}
body.home-v2 .hx-flow-row.us .hx-seg:nth-child(2){background:var(--gold)}
body.home-v2 .hx-flow-row.us .hx-seg:nth-child(3){background:#D6A62F}
body.home-v2 .hx-seg:last-child{border-right:none}
/* bars grow as each row scrolls into view */
html.js body.home-v2 .hx-flow .reveal.in .hx-bar{animation:hx-grow 1.4s cubic-bezier(.2,.75,.25,1) both}
@keyframes hx-grow{from{width:0}}
body.home-v2 .hx-flow-note{
  margin-top:36px;padding-top:26px;border-top:1px solid var(--hx-line);
  font-size:16px;color:var(--hx-mute);max-width:60ch;
}
@media(max-width:720px){
  body.home-v2 .hx-bar{height:48px}
  body.home-v2 .hx-flow-row.us .hx-bar{width:58%;min-width:0}
  body.home-v2 .hx-seg span{font-size:9px;letter-spacing:.06em;padding:0 4px}
}
@media(prefers-reduced-motion:reduce){
  html.js body.home-v2 .hx-flow .reveal.in .hx-bar{animation:none}
}

@media(prefers-reduced-motion:reduce){
  body.home-v2 .hx-gfx *{animation:none!important;opacity:1!important;
    stroke-dashoffset:0!important;transform:none!important}
  body.home-v2 .hx-gfx .g1-scan,body.home-v2 .hx-gfx .g4-sweep,
  body.home-v2 .hx-gfx .g2-runner,body.home-v2 .hx-gfx .g3-ring{display:none}
}


/* ---- Resources dropdown ---- */
nav.links .navgroup{position:relative;display:flex;align-items:center}
nav.links .navgroup>.navtop{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,239,224,.66);padding:4px 0;cursor:default;transition:color .25s;position:relative}
nav.links .navgroup>.navtop:after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .28s ease}
nav.links .navgroup:hover>.navtop,nav.links .navgroup:focus-within>.navtop,nav.links .navgroup.active>.navtop{color:var(--ivory)}
nav.links .navgroup:hover>.navtop:after,nav.links .navgroup:focus-within>.navtop:after{transform:translateY(1px) rotate(225deg)}
nav.links .navgroup.active>.navtop:before{content:"";position:absolute;left:0;right:14px;bottom:-2px;height:1px;background:var(--gold)}
nav.links .navmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:14px;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
nav.links .navgroup:hover .navmenu,nav.links .navgroup:focus-within .navmenu{opacity:1;visibility:visible}
nav.links .navmenu-inner{min-width:158px;padding:7px;border-radius:10px;background:rgba(8,8,8,.97);border:1px solid rgba(245,239,224,.13);box-shadow:0 24px 50px -22px rgba(0,0,0,.9);transform:translateY(-6px);transition:transform .26s cubic-bezier(.2,.7,.2,1)}
nav.links .navgroup:hover .navmenu-inner,nav.links .navgroup:focus-within .navmenu-inner{transform:translateY(0)}
nav.links .navmenu-inner a{display:block;padding:9px 12px;border-radius:6px;color:rgba(245,239,224,.72)}
nav.links .navmenu-inner a:hover,nav.links .navmenu-inner a.active{background:rgba(255,255,255,.06);color:var(--ivory)}
nav.links .navmenu-inner a:after{display:none!important}
@media (max-width:860px){
  /* on mobile the groups are tap-to-open accordions, not flattened lists */
  nav.links .navgroup{flex-direction:column;gap:0;align-items:flex-start}
  nav.links .navgroup>.navtop{font-size:16px;color:rgba(245,239,224,.66);letter-spacing:.18em;
    cursor:pointer;gap:9px;padding:4px 0}
  nav.links .navgroup>.navtop:after{display:block;transform:translateY(-2px) rotate(45deg)}
  nav.links .navgroup.open>.navtop{color:var(--ivory)}
  nav.links .navgroup.open>.navtop:after{transform:translateY(1px) rotate(225deg)}
  nav.links .navgroup.active>.navtop:before{display:none}
  nav.links .navmenu{position:static;transform:none;padding-top:0;opacity:1;visibility:visible;
    display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.2,.7,.2,1)}
  nav.links .navgroup.open>.navmenu{grid-template-rows:1fr}
  nav.links .navmenu-inner{min-width:0;padding:0;background:none;border:none;box-shadow:none;transform:none;
    overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
  nav.links .navgroup.open>.navmenu>.navmenu-inner{padding:16px 0 4px 18px}
  nav.links .navmenu-inner a{font-size:16px;padding:0;text-align:left}
  nav.links .navmenu-inner a.active,nav.links .navmenu-inner a:hover{background:none}
}

/* ---------- Blog index ---------- */
body.home-v2 .pg-hero{min-height:54svh;display:flex;align-items:flex-end;padding-top:clamp(140px,19vh,180px);padding-bottom:clamp(62px,8vh,92px);background:var(--hx-black);position:relative;overflow:hidden}
body.home-v2 .pg-hero .wrap{z-index:2}
body.home-v2 .pg-hero .hero-bg{object-position:center 34%}
@media (max-width:820px){body.home-v2 .pg-hero .hero-bg{object-position:44% 34%}}
body.home-v2 .pg-hero .eyebrow{margin-bottom:24px}
body.home-v2 .pg-hero h1{max-width:14ch;color:#fff;font-size:clamp(40px,6.6vw,84px)}
body.home-v2 .pg-hero .hx-sub{margin-top:22px;max-width:52ch;font-size:17px;line-height:1.6;color:rgba(255,255,255,.62)}
body.home-v2 .bl-filters{display:flex;flex-wrap:wrap;gap:9px}
body.home-v2 .bl-chip{font-family:Inter Tight,DM Sans,sans-serif;font-size:12.5px;font-weight:500;letter-spacing:-.005em;color:var(--hx-mute);background:transparent;border:1px solid var(--hx-line);border-radius:100px;padding:8px 17px;cursor:pointer;transition:color .22s ease,border-color .22s ease,background .22s ease}
body.home-v2 .bl-chip:hover{color:#fff;border-color:rgba(255,255,255,.3)}
body.home-v2 .bl-chip.on{background:var(--gold);border-color:var(--gold);color:#0a0a0a}
body.home-v2 .bl-grid{margin-top:clamp(30px,4.5vh,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1000px){body.home-v2 .bl-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){body.home-v2 .bl-grid{grid-template-columns:1fr}}
body.home-v2 .bl-card{display:flex;flex-direction:column;border:1px solid var(--hx-line);border-radius:14px;background:linear-gradient(180deg,var(--hx-panel-2),var(--hx-panel));overflow:hidden;transition:border-color .28s ease,transform .28s ease}
body.home-v2 .bl-card:hover{border-color:rgba(232,184,66,.5);transform:translateY(-3px)}
body.home-v2 .bl-cover{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;aspect-ratio:16/10;padding:26px 24px;background:#080808;border-bottom:1px solid var(--hx-line)}
body.home-v2 .bl-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
body.home-v2 .bl-card:hover .bl-thumb{transform:scale(1.045)}
body.home-v2 .bl-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,.52) 46%,rgba(0,0,0,.90) 100%)}
body.home-v2 .bl-cover h3{position:relative;z-index:2}
body.home-v2 .bl-kicker{z-index:2;position:relative;padding-top:14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
body.home-v2 .bl-kicker:before{content:"";position:absolute;top:0;left:0;width:22px;height:2px;background:var(--gold)}
body.home-v2 .bl-cover h3{font-size:clamp(19px,1.75vw,23px);line-height:1.2;letter-spacing:-.032em;color:#fff}
body.home-v2 .bl-body{display:flex;flex-direction:column;flex:1;padding:20px 24px 24px}
body.home-v2 .bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
body.home-v2 .bl-pill{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(232,184,66,.9);border:1px solid rgba(232,184,66,.3);background:rgba(232,184,66,.08);border-radius:100px;padding:4px 10px}
body.home-v2 .bl-time{font-size:12.5px;color:var(--hx-mute-2)}
body.home-v2 .bl-body p{font-size:14.5px;line-height:1.6;color:var(--hx-mute)}
body.home-v2 .bl-btn{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:9px;font-family:Inter Tight,DM Sans,sans-serif;font-size:13.5px;font-weight:500;color:var(--gold);cursor:default}
body.home-v2 .bl-btn .arrow{transition:transform .22s ease}
body.home-v2 .bl-card:hover .bl-btn .arrow{transform:translateX(5px)}
body.home-v2 .bl-empty{display:none;margin-top:40px;font-size:15px;color:var(--hx-mute)}

/* ---------- blog card hover seam ----------
   .bl-thumb is absolutely positioned inside .bl-cover and scales on hover.
   While that animates, the compositor can let a sub-pixel sliver of the image
   past the cover's bottom edge into the 1px border strip — and the ::after
   darkening gradient never reaches that strip, because ::after is inset to the
   padding box. The result was a 1px band of raw, bright artwork at the
   image/body seam, invisible at rest, strobing as the layer settled.

   Three parts, all measured as necessary at 1x / 1.25x / 1.5x / 2x. Dropping
   any one of them lets the line come back at some scale factor:
     1. the divider moves off .bl-cover onto .bl-body, so there is no border
        strip sitting beside the clipped image
     2. the darkening gradient extends 1px past the bottom edge, so anything
        that does bleed is darkened instead of showing raw artwork
     3. the card and thumb are promoted to their own layers up front, so the
        rounded clip is rasterised once rather than re-derived every frame
        (promotion is the load-bearing part; without it the line returns) */
body.home-v2 .bl-cover{border-bottom:0}
body.home-v2 .bl-cover::after{
  bottom:-1px;
  /* The overlay finishes on flat #0E0E0E, and .bl-body starts on the same flat
     #0E0E0E below. Both sides of the boundary paint an identical colour, so
     there is no edge to see — at any display scaling, and wherever the clip
     lands mid-animation.

     The earlier attempt ended this gradient on #101010 to match --hx-panel-2.
     That was the wrong target: .bl-card's background is a gradient across the
     card's whole height, so at the seam (~46% down) it has already drifted to
     roughly #0E0E0E. Ending on #101010 left a small step, which is exactly
     what kept shimmering. .bl-body now paints its own background rather than
     letting the card's gradient show through, so the match is explicit
     instead of coincidental.

     The flat #0E0E0E band starts at 86% of the cover's height, not at the very
     last pixel. That matters: at 125% display scaling the boundary lands on a
     fractional device pixel, and a gradient still arriving at its end colour
     there leaves a faint edge. With ~30px of solid colour above the boundary
     and solid colour below it, there is no fractional case left to catch. */
  background:linear-gradient(180deg,
    rgba(0,0,0,.10) 0%, rgba(0,0,0,.50) 40%, rgba(14,14,14,.96) 74%, #0E0E0E 86%, #0E0E0E 100%);
}
body.home-v2 .bl-body{
  border-top:0;
  background:linear-gradient(180deg,#0E0E0E,var(--hx-panel));
  /* and the body is drawn 1px over the top of that boundary.

     This is the part that actually stops the flash. Measured across the whole
     3px path of the lift, one sub-pixel step at a time: whenever the cover's
     bottom edge lands on a fractional device pixel, exactly one device row
     there painted near-white (row brightness 14 -> 229). The cover clips its
     contents to a rounded box; when that clip falls between device rows,
     Chromium leaves the row short of both the image above and the card below.
     An animated lift walks the edge through every fractional position in turn,
     so the row blinks on and off for the length of the animation — the flash.

     Overlapping the body by 1px puts flat #0E0E0E over that row no matter
     where the clip lands. Worst row-to-row delta across the sweep falls from
     161 to 0 at 125%, 150% and 200% scaling. Nothing is lost visually: the
     overlay above already finishes on the same flat colour. */
  position:relative;
  z-index:2;
  margin-top:-1px;
}
@media (hover:hover) and (pointer:fine){
  /* only the thumb animates now, so only the thumb needs promoting */
  body.home-v2 .bl-thumb{will-change:transform;backface-visibility:hidden}
}

/* ---------- hover: lift, without the shimmer ----------
   The card lifts 3px on hover, animated over 280ms.

   That animation used to make the line between the image and the card body
   flicker. Animating a transform re-rasterises the card, and for the first
   couple of frames any crisp horizontal edge inside it is smeared across two
   device rows — it dims, then snaps back.

   Things that did NOT fix it, all measured at 1.25x and 1.5x:
     shortening the animation to 90ms, lengthening it to 420ms
     will-change:transform, translateZ(0), contain:paint on the card
     changing the lift to 4px or 8px (whole device pixels at 1/1.25/1.5/2x)
     softening the divider to a 3px or 5px ramp
   Only removing the motion made it stop — and an instant lift reads as a jerk.

   So the motion stays and the edge goes. The cover's overlay now finishes
   fully opaque at the body's own colour, so the illustration dissolves into
   the card rather than meeting it at a line. Measured at the boundary itself,
   edge strength drops from 24.3 to 3.5 — there is no longer anything crisp
   there to shimmer, so the lift can animate freely.

   The cover image still scales on hover; it sits above the boundary and does
   not disturb it. */
body.home-v2 .bl-card{transition:border-color .28s ease,box-shadow .32s ease,transform .28s cubic-bezier(.2,.7,.2,1)}
body.home-v2 .bl-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 38px -20px rgba(232,184,66,.30);
}

/* keep display headings from dropping a single orphan word onto the last line */
body.home-v2 h1,body.home-v2 h2{text-wrap:balance}

/* ---------- floating WhatsApp button (all pages) ---------- */
body.home-v2 .wa-fab{
  position:fixed;right:clamp(16px,2.2vw,26px);bottom:clamp(16px,2.2vw,26px);z-index:90;
  display:inline-flex;align-items:center;gap:0;height:56px;padding:0;
  border-radius:100px;text-decoration:none;overflow:hidden;
  background:#0D0D0D;border:1px solid rgba(232,184,66,.55);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.9),0 0 30px -12px rgba(232,184,66,.35);
  transition:gap .34s cubic-bezier(.2,.7,.2,1),padding .34s cubic-bezier(.2,.7,.2,1),
             border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
body.home-v2 .wa-fab .ic{flex:0 0 auto;width:56px;height:56px;display:grid;place-items:center}
body.home-v2 .wa-fab svg{width:25px;height:25px;display:block;fill:#fff;transition:fill .3s ease}
body.home-v2 .wa-fab .lb{
  max-width:0;white-space:nowrap;opacity:0;
  font-family:"Inter Tight","DM Sans",sans-serif;font-size:13.5px;font-weight:500;
  letter-spacing:-.01em;color:#fff;
  transition:max-width .34s cubic-bezier(.2,.7,.2,1),opacity .26s ease;
}
body.home-v2 .wa-fab:hover,body.home-v2 .wa-fab:focus-visible{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 22px 46px -14px rgba(0,0,0,.95),0 0 38px -10px rgba(232,184,66,.5);
  padding-right:22px;
}
body.home-v2 .wa-fab:hover svg,body.home-v2 .wa-fab:focus-visible svg{fill:var(--gold)}
body.home-v2 .wa-fab:hover .lb,body.home-v2 .wa-fab:focus-visible .lb{max-width:190px;opacity:1}
body.home-v2 .wa-fab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:620px){
  body.home-v2 .wa-fab{height:52px}
  body.home-v2 .wa-fab .ic{width:52px;height:52px}
  body.home-v2 .wa-fab svg{width:23px;height:23px}
  body.home-v2 .wa-fab:hover{padding-right:0}
  body.home-v2 .wa-fab:hover .lb{max-width:0;opacity:0}
}
@media(prefers-reduced-motion:reduce){
  body.home-v2 .wa-fab,body.home-v2 .wa-fab .lb{transition:none}
  body.home-v2 .wa-fab:hover{transform:none}
}

/* ============================================================
   BLOG POST (/blog/<slug>)
   Dark hero, light article body, dark closing band — the same
   alternation the rest of the site uses. Scoped to body.home-v2
   like the blog index, so nothing above is affected.
   Article headings use Inter Tight to match the blog cards;
   Cormorant Garamond is kept for pull quotes only.
============================================================ */

/* ---------- hero ---------- */
body.home-v2 .po-hero h1{max-width:20ch;font-size:clamp(34px,5.2vw,62px);line-height:1.06}
body.home-v2 .po-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:26px;
  font-family:"Inter Tight","DM Sans",sans-serif;font-size:13px;color:var(--hx-mute-2);
}
body.home-v2 .po-meta .sep{opacity:.4}
body.home-v2 .po-meta .po-author{color:var(--hx-mute)}
body.home-v2 .po-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}

/* ---------- article body ---------- */
body.home-v2 .po-article{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,8vh,96px)}
body.home-v2 .po-body{max-width:720px;margin:0 auto}
body.home-v2 .po-body > * + *{margin-top:1.35em}

body.home-v2 .po-body p{
  font-size:18px;line-height:1.75;color:#26262b;max-width:none;
}
body.home-v2 .po-body .po-lede{
  font-size:21px;line-height:1.62;color:var(--hx-ink);
}

body.home-v2 .po-body h2{
  font-size:clamp(25px,3vw,34px);line-height:1.16;letter-spacing:-.03em;
  color:var(--hx-ink);margin-top:2.1em;
}
body.home-v2 .po-body h3{
  font-size:19px;line-height:1.3;letter-spacing:-.02em;
  color:var(--hx-ink);margin-top:1.9em;
}
body.home-v2 .po-body h2 + p,
body.home-v2 .po-body h3 + p{margin-top:.75em}

body.home-v2 .po-body a{
  color:#8a6a12;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(138,106,18,.38);
  transition:text-decoration-color .2s ease,color .2s ease;
}
body.home-v2 .po-body a:hover{color:#6d5310;text-decoration-color:currentColor}

body.home-v2 .po-body strong{font-weight:600;color:var(--hx-ink)}
body.home-v2 .po-body em{font-style:italic}

body.home-v2 .po-body ul,
body.home-v2 .po-body ol{padding-left:1.3em;font-size:18px;line-height:1.75;color:#26262b}
body.home-v2 .po-body li + li{margin-top:.55em}
body.home-v2 .po-body ul{list-style:none;padding-left:0}
body.home-v2 .po-body ul > li{position:relative;padding-left:1.4em}
body.home-v2 .po-body ul > li::before{
  content:"";position:absolute;left:0;top:.72em;width:14px;height:1px;background:var(--gold);
}
body.home-v2 .po-body ol{list-style:decimal}
body.home-v2 .po-body ol > li::marker{color:var(--gold);font-variant-numeric:tabular-nums}

/* ---------- pull quote ---------- */
body.home-v2 .po-pull{
  margin-top:2.2em;margin-bottom:2.2em;padding:0 0 0 clamp(20px,3vw,34px);
  border-left:2px solid var(--gold);
}
body.home-v2 .po-pull p{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(23px,2.6vw,30px);line-height:1.3;color:var(--hx-ink);
}
body.home-v2 .po-pull cite{
  display:block;margin-top:14px;font-family:"Inter Tight",sans-serif;font-style:normal;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--hx-ink-mute);
}

/* ---------- callout ---------- */
body.home-v2 .po-note{
  margin-top:2em;margin-bottom:2em;padding:clamp(20px,3vw,30px);
  background:rgba(232,184,66,.07);border:1px solid rgba(232,184,66,.28);border-radius:12px;
}
body.home-v2 .po-note > * + *{margin-top:.8em}
body.home-v2 .po-note .po-note-label{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8a6a12;font-weight:500;
}
body.home-v2 .po-note p{font-size:16.5px;line-height:1.68}

/* ---------- figures ---------- */
body.home-v2 .po-body figure{margin-top:2.2em;margin-bottom:2.2em}
body.home-v2 .po-body figure img{
  width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--hx-ink-line);
}
body.home-v2 .po-body figcaption{
  margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--hx-ink-mute);
}

/* full-bleed-ish wide figure, still inside the reading column's gutters */
body.home-v2 .po-body figure.wide{
  width:min(1000px,92vw);margin-left:50%;transform:translateX(-50%);
}

/* ---------- table ---------- */
body.home-v2 .po-body .po-tablewrap{overflow-x:auto;margin-top:2em;margin-bottom:2em}
body.home-v2 .po-body table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:460px}
body.home-v2 .po-body th,
body.home-v2 .po-body td{
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--hx-ink-line);vertical-align:top;
}
body.home-v2 .po-body th{
  font-family:"Inter Tight",sans-serif;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hx-ink-mute);font-weight:500;
}
body.home-v2 .po-body td{color:#26262b;line-height:1.6}

/* ---------- divider + sign-off ---------- */
body.home-v2 .po-body hr{
  border:0;height:1px;background:var(--hx-ink-line);margin-top:2.6em;margin-bottom:2.6em;
}
body.home-v2 .po-signoff{
  margin-top:2.6em;padding-top:26px;border-top:1px solid var(--hx-ink-line);
  font-size:15px;color:var(--hx-ink-mute);
}

/* ---------- closing CTA band ---------- */
body.home-v2 .po-cta{text-align:center}
body.home-v2 .po-cta h2{max-width:18ch;margin:0 auto}
body.home-v2 .po-cta p{max-width:46ch;margin:20px auto 0}
body.home-v2 .po-cta .btn{margin-top:34px}

/* ---------- related ---------- */
body.home-v2 .po-related h2{font-size:clamp(24px,3vw,34px)}
body.home-v2 .po-related .bl-grid{margin-top:clamp(26px,3.5vh,38px)}

/* ---------- blog cards become real links ---------- */
body.home-v2 .bl-card > .bl-link{
  display:flex;flex-direction:column;flex:1;color:inherit;
}
body.home-v2 .bl-btn{cursor:pointer}

/* ---------- back link ---------- */
body.home-v2 .po-back{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;
  font-family:"Inter Tight",sans-serif;font-size:13px;color:var(--hx-mute);
  transition:color .2s ease;
}
body.home-v2 .po-back:hover{color:var(--gold)}
body.home-v2 .po-back .arrow{transition:transform .2s ease}
body.home-v2 .po-back:hover .arrow{transform:translateX(-4px)}

@media (max-width:660px){
  body.home-v2 .po-body p,
  body.home-v2 .po-body ul,
  body.home-v2 .po-body ol{font-size:17px}
  body.home-v2 .po-body .po-lede{font-size:19px}
  body.home-v2 .po-body figure.wide{width:100%;margin-left:0;transform:none}
}