/* ==========================================================================
   369Network — v4 "Field Report"
   Light corporate ground, full-bleed cinematic dark bands, angular geometry.
   Amber is action. Volt is system/data. Nothing is decorative.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */

:root{
  /* light ground — cool, never cream */
  --paper:#F3F5F8;
  --card:#FFFFFF;
  --ink:#080C13;
  --ink-2:#3B4756;
  --mute:#5C6B7D;
  --rule:#D7DEE7;
  --rule-2:#BCC7D4;

  /* dark bands */
  --void:#05080E;
  --deep:#0D1522;
  --deep-2:#121D2E;
  --dline:#1D2A3B;
  --dline-2:#2B3B51;
  --dtext:#F2F6FB;
  --dtext-2:#A6B5C7;
  --dmute:#8E9DAF;

  /* action */
  --amber:#F5821F;
  --amber-lit:#FF9A3D;
  --amber-ink:#A85306;     /* the amber that passes contrast on white */
  --amber-glow:rgba(245,130,31,.42);
  --amber-dim:rgba(245,130,31,.14);

  /* system / data */
  --volt:#1D4FFF;
  --volt-ink:#1540CC;      /* the volt that passes contrast on white */
  --volt-lit:#6E9BFF;
  --volt-dim:rgba(29,79,255,.12);

  --shell:1280px;
  --gut:clamp(18px,4vw,40px);
  --bandpad:clamp(58px,7vw,110px);
  --skew:clamp(16px,2.6vw,38px);   /* the diagonal band edge */
  --measure:68ch;

  --disp:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* one angular gesture, used everywhere */
  --cut:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  --cut-sm:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));

  --lift:0 1px 2px rgba(10,20,40,.06),0 6px 14px rgba(10,20,40,.07),0 22px 44px rgba(10,20,40,.08);
  --lift-hi:0 2px 4px rgba(10,20,40,.08),0 10px 22px rgba(10,20,40,.10),0 34px 64px rgba(10,20,40,.12);

  --ease:cubic-bezier(.22,.8,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
main{display:block}

.shell{width:min(var(--shell),100% - var(--gut)*2);margin-inline:auto}

::selection{background:var(--amber);color:#0A0A0A}

:focus-visible{outline:2px solid var(--volt);outline-offset:3px}
.band--dark :focus-visible,.foot :focus-visible{outline-color:var(--amber-lit)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px}

/* ------------------------------------------------------------- type scale */

h1,h2,h3,h4{font-family:var(--disp);font-weight:700;letter-spacing:-.015em;line-height:1.08;margin:0}

/* the readout: mono, tracked, uppercase. Only ever carries real data. */
.rd{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase}

/* ============================================================ system rail */

.rail{background:var(--void);color:var(--dtext-2);border-bottom:1px solid var(--dline)}
.rail__in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:9px 0}
.rail .rd{color:var(--dtext-2);white-space:nowrap}
.rail__live{display:inline-flex;align-items:center;gap:8px;color:var(--amber-lit)}
.rail__live::before{content:"";width:6px;height:6px;background:var(--amber);box-shadow:0 0 10px var(--amber)}
.rail__sep{color:var(--dline-2)}
.rail__end{margin-left:auto;display:flex;gap:18px}
@media (max-width:860px){.rail__end{display:none}}
@media (max-width:560px){.rail__in>.rail__sep,.rail__in>.rd:nth-child(3){display:none}}
@media (prefers-reduced-motion:no-preference){
  .rail__live::before{animation:pip 2.6s ease-in-out infinite}
  @keyframes pip{0%,100%{opacity:1}50%{opacity:.22}}
}

/* ==================================================================== nav */

.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(243,245,248,.88);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--rule);
}
.nav__in{display:flex;align-items:center;gap:20px;min-height:68px;position:relative}

.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--disp);font-weight:700;font-size:1.16rem;letter-spacing:-.02em;color:var(--ink)}
.brand img{width:32px;height:32px}

.navwrap{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__list a{
  display:block;padding:9px 13px;text-decoration:none;color:var(--ink-2);
  font-size:.93rem;font-weight:500;position:relative;transition:color .18s;
}
.nav__list a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
.nav__list a:hover,.nav__list .current-menu-item>a{color:var(--ink)}
.nav__list a:hover::after,.nav__list .current-menu-item>a::after{transform:scaleX(1)}

.nav .btn{margin-left:8px}

.navtoggle{
  display:none;align-items:center;gap:9px;background:var(--ink);color:#fff;border:0;
  font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 15px;cursor:pointer;clip-path:var(--cut-sm);margin-left:auto;
}
.navtoggle svg{width:15px;height:15px}

@media (max-width:980px){
  .navtoggle{display:inline-flex}
  .navwrap{
    position:absolute;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);top:100%;
    background:var(--card);border-bottom:1px solid var(--rule);
    box-shadow:var(--lift-hi);display:none;padding:6px 0 14px;margin:0;
  }
  .navwrap.is-open{display:block}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list li{border-top:1px solid var(--rule)}
  .nav__list a{padding:14px var(--gut)}
  .nav__list a::after{display:none}
  .nav .btn{display:none}
}

/* ================================================================ buttons */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--disp);font-weight:600;font-size:.95rem;
  padding:13px 22px;text-decoration:none;border:0;cursor:pointer;
  clip-path:var(--cut-sm);transition:background .18s,color .18s,transform .18s var(--ease),box-shadow .18s;
}
.btn svg{width:16px;height:16px;flex:none}
.btn--on{background:var(--amber);color:#120A02}
.btn--on:hover{background:var(--amber-lit);transform:translateY(-2px)}
.btn--off{background:#E2E8F0;color:var(--ink)}
.btn--off:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.band--dark .btn--off,.foot .btn--off,.showcase .btn--off{background:var(--deep-2);color:var(--dtext)}
.band--dark .btn--off:hover,.foot .btn--off:hover,.showcase .btn--off:hover{background:var(--dtext);color:var(--void)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

.wa{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--amber);color:#120A02;text-decoration:none;
  font-family:var(--disp);font-weight:600;font-size:.9rem;
  padding:13px 18px;clip-path:var(--cut-sm);
  box-shadow:0 10px 30px rgba(245,130,31,.4);
}
.wa svg{width:18px;height:18px}
.wa:hover{background:var(--amber-lit)}
@media (max-width:620px){.wa span{display:none}.wa{padding:14px}}

/* ================================================================== bands */

.band{padding:var(--bandpad) 0;position:relative}

/* the signature move: light and dark meet on a slant, never a flat line */
.band--dark{
  background:var(--void);color:var(--dtext);
  padding-top:calc(var(--bandpad) + var(--skew));
  padding-bottom:calc(var(--bandpad) + var(--skew));
  margin-block:calc(var(--skew) * -1);
  clip-path:polygon(0 0,100% var(--skew),100% 100%,0 calc(100% - var(--skew)));
  isolation:isolate;
}
.band--dark::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 58% at 84% 10%,rgba(245,130,31,.16),transparent 66%),
    radial-gradient(46% 54% at 8% 94%,rgba(29,79,255,.18),transparent 70%);
}
.band--dark::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px);
}
.band--dark p,.band--dark li{color:var(--dtext-2)}
.band--dark h1,.band--dark h2,.band--dark h3{color:var(--dtext)}

.band--tint{background:linear-gradient(180deg,#EBEFF5,var(--paper))}

.head{max-width:62ch;margin-bottom:clamp(26px,3.4vw,44px)}
.head .rd{color:var(--amber-ink);display:flex;align-items:center;gap:11px;margin:0 0 14px}
.head .rd::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.band--dark .head .rd{color:var(--amber-lit)}
.band--dark .ops__cap{color:var(--amber-lit)}
.head h2{margin:0 0 14px;font-size:clamp(1.9rem,1.1rem + 2.7vw,3.2rem);letter-spacing:-.025em}
.head p{color:var(--ink-2);margin:0}
.band--dark .head p{color:var(--dtext-2)}

/* legacy section-chip, now a readout line */
.band__tag{
  display:flex;align-items:center;gap:11px;margin:0 0 14px;
  font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--amber-ink);
}
.band__tag::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.band--dark .band__tag{color:var(--amber-lit)}
.band__h{margin:0 0 14px;font-size:clamp(1.9rem,1.1rem + 2.7vw,3.2rem);letter-spacing:-.025em}
.band__say{font-size:clamp(1.02rem,.96rem + .35vw,1.18rem);line-height:1.6;color:var(--ink-2);max-width:58ch;margin:0}
.band--dark .band__say{color:var(--dtext-2)}
.band__grid>*{min-width:0}

/* =================================================================== hero */

.hero{position:relative;overflow:hidden;padding:clamp(44px,6vw,86px) 0 clamp(50px,7vw,96px)}
.hero__gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 26%,#000 58%);mask-image:linear-gradient(90deg,transparent 26%,#000 58%)}
@media (max-width:980px){.hero__gl{-webkit-mask-image:linear-gradient(180deg,transparent 52%,#000 84%);mask-image:linear-gradient(180deg,transparent 52%,#000 84%)}}
.hero>.shell{position:relative;z-index:1}
.hero__in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(26px,4vw,62px);align-items:center}
@media (max-width:980px){.hero__in{grid-template-columns:1fr}}

.hero__rail{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 20px;font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.hero__rail i{font-style:normal;display:inline-flex;align-items:center;gap:9px;color:var(--volt-ink);white-space:nowrap}
.hero__rail i::before{content:"";width:6px;height:6px;background:var(--volt)}
.hero__rail span{white-space:nowrap}
.hero__rail s{text-decoration:none;color:var(--rule-2)}
@media (prefers-reduced-motion:no-preference){.hero__rail i::before{animation:pip 2.6s ease-in-out infinite}}

.hero__h{font-size:clamp(2.5rem,1rem + 6.2vw,5.4rem);line-height:.95;letter-spacing:-.032em;text-transform:uppercase;color:var(--ink)}
.hero__h span{display:block}
.hero__h span:last-child{margin-top:.1em}
.hero__h mark{background:var(--amber);color:#120A02;display:inline;padding:0 .14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero__say{margin:24px 0 0;font-size:clamp(1.02rem,.95rem + .4vw,1.2rem);line-height:1.6;color:var(--ink-2);max-width:50ch}
.hero__acts{display:flex;flex-wrap:wrap;gap:13px;margin:30px 0 0}

.hero__chips{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;padding:0;list-style:none}
.hero__chips li{
  font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-2);background:var(--card);padding:8px 12px;
  box-shadow:inset 0 0 0 1px var(--rule);clip-path:var(--cut-sm);
}

.hero__art{position:relative;min-height:260px}
.hero__frame{position:relative;z-index:1;clip-path:var(--cut);background:var(--ink);box-shadow:var(--lift-hi)}
.hero__frame img{width:100%;clip-path:var(--cut);filter:saturate(1.08) contrast(1.04)}
.hero__corner{position:absolute;z-index:2;width:30px;height:30px;pointer-events:none}
.hero__corner--a{left:-9px;top:-9px;border-left:2px solid var(--amber);border-top:2px solid var(--amber)}
.hero__corner--b{right:-9px;bottom:-9px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber)}

@media (prefers-reduced-motion:no-preference){
  .hero__h span{animation:rise .8s var(--ease) both}
  .hero__h span:nth-child(2){animation-delay:.09s}
  .hero__h span:nth-child(3){animation-delay:.18s}
  .hero__say{animation:rise .8s .26s var(--ease) both}
  .hero__acts{animation:rise .8s .34s var(--ease) both}
  .hero__chips{animation:rise .8s .42s var(--ease) both}
  .hero__art{animation:fade 1.2s .2s ease both}
  @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0;transform:scale(.975)}to{opacity:1;transform:none}}
}

/* ====================================================== operations bento */

.ops__cap{display:flex;align-items:center;gap:11px;margin:0 0 24px;color:var(--amber-ink);font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.17em;text-transform:uppercase}
.ops__cap::before{content:"";width:7px;height:7px;background:var(--amber);box-shadow:0 0 12px var(--amber)}
.ops__cap::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(245,130,31,.55),transparent)}

.bento{display:grid;gap:13px;grid-template-columns:1fr}
.tile{
  position:relative;padding:1px;clip-path:var(--cut);
  background:linear-gradient(150deg,rgba(245,130,31,.5),var(--dline-2) 30%,var(--dline) 64%,rgba(29,79,255,.45));
  transition:transform .28s var(--ease),filter .28s;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5));
}
.tile__in{
  position:relative;height:100%;clip-path:var(--cut);
  background:linear-gradient(170deg,var(--deep-2),#070D16);
  padding:24px clamp(18px,2.4vw,30px) 26px;display:flex;flex-direction:column;gap:10px;
}
.tile__ico{width:30px;height:30px;color:var(--amber);margin-bottom:2px;flex:none}
.tile__ico svg{width:100%;height:100%;display:block}
.tile__no{font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.15em;color:var(--volt-lit)}
.tile__h{font-size:clamp(1.1rem,.88rem + .5vw,1.5rem);color:var(--dtext);margin:0}
.tile__p{margin:0;color:var(--dtext-2);font-size:.96rem;line-height:1.55;max-width:46ch}
.tile__note{margin:2px 0 0;font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--dmute)}
.tile__bar{margin-top:auto;height:2px;background:linear-gradient(90deg,var(--amber),rgba(245,130,31,.1) 48%,transparent)}
.tile:hover{transform:translateY(-4px);filter:drop-shadow(0 16px 34px rgba(0,0,0,.55)) drop-shadow(0 0 44px rgba(245,130,31,.3))}
.tile--lead .tile__h{font-size:clamp(1.5rem,1.05rem + 1.7vw,2.5rem)}
.tile--lead .tile__in::after{
  content:"369";position:absolute;right:-4px;bottom:-26px;pointer-events:none;
  font-family:var(--disp);font-weight:700;font-size:clamp(5rem,9vw,9rem);
  line-height:1;letter-spacing:-.04em;color:rgba(245,130,31,.07);
}
@media (min-width:880px){
  .bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(100px,auto)}
  .tile--a{grid-column:1/3;grid-row:1/3}
  .tile--b{grid-column:3/5;grid-row:1}
  .tile--c{grid-column:3/4;grid-row:2}
  .tile--d{grid-column:4/5;grid-row:2}
  .tile--e{grid-column:1/5;grid-row:3}
  .tile--e .tile__in{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
  .tile--e .tile__bar{display:none}
  .tile--e .tile__ico{margin:0}
  .tile--e .tile__p{margin-left:auto;text-align:right}
}
@media (prefers-reduced-motion:reduce){.tile,.tile:hover{transform:none;transition:none}}

/* ========================================================= service cards */

.svcband{margin:40px 0 0}
.svcband:first-of-type{margin-top:4px}
.svcband__h{
  display:flex;align-items:center;gap:13px;margin:0 0 16px;
  font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--amber-ink);
}
.svcband__h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--amber),var(--rule) 40%,transparent)}
.band--dark .svcband__h{color:var(--amber-lit)}

.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:16px}

.svccard{
  position:relative;display:flex;flex-direction:column;text-decoration:none;
  background:var(--card);clip-path:var(--cut);box-shadow:var(--lift);
  transition:transform .24s var(--ease),box-shadow .24s;isolation:isolate;
}
.svccard::before{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--rule);transition:box-shadow .24s;clip-path:var(--cut);
}
.svccard:hover{transform:translateY(-6px);box-shadow:var(--lift-hi)}
.svccard:hover::before{box-shadow:inset 0 0 0 2px var(--amber)}
.svccard__pic{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--ink);display:block}
.svccard__pic img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.svccard:hover .svccard__pic img{transform:scale(1.05)}
.svccard__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(5,8,14,.78))}
.svccard__ico{position:absolute;left:16px;bottom:13px;z-index:2;width:34px;height:34px;color:var(--amber)}
.svccard__ico svg{width:100%;height:100%;display:block}
.svccard__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.svccard__name{font-family:var(--disp);font-weight:700;font-size:1.2rem;color:var(--ink);margin:0}
.svccard__say{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.svccard__go{
  margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-weight:500;font-size:.67rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber-ink);
}
.svccard__go::before{content:"";width:16px;height:1.5px;background:var(--amber);transition:width .24s var(--ease)}
.svccard:hover .svccard__go::before{width:30px}
@media (prefers-reduced-motion:reduce){.svccard,.svccard:hover{transform:none;transition:none}}

.svclist{list-style:none;margin:0;padding:0;counter-reset:r}
.svcrow{counter-increment:r;border-top:1px solid var(--rule)}
.svcrow:last-child{border-bottom:1px solid var(--rule)}
.svcrow__link{
  display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:baseline;
  padding:22px 18px 22px 0;text-decoration:none;position:relative;
  transition:padding .22s var(--ease),background .22s;
}
.svcrow__link::before{
  content:"[" counter(r,decimal-leading-zero) "]";
  font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.1em;
  color:var(--volt-ink);grid-row:1/3;
}
.svcrow__name{font-family:var(--disp);font-weight:700;font-size:1.16rem;color:var(--ink)}
.svcrow__say{color:var(--ink-2);font-size:.95rem}
.svcrow__link:hover{padding-left:16px;background:linear-gradient(90deg,var(--amber-dim),transparent 60%)}
.svcrow__link:hover .svcrow__name{color:var(--amber-ink)}

/* ====================================================== process / steps */

.steps{list-style:none;counter-reset:s;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.steps li{counter-increment:s;position:relative;padding:22px 22px 24px;background:var(--card);clip-path:var(--cut-sm);box-shadow:var(--lift)}
.steps li::before{
  content:"[" counter(s,decimal-leading-zero) "]";display:block;
  font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;
  color:var(--volt-ink);margin-bottom:12px;
}
.steps strong{display:block;font-family:var(--disp);font-weight:700;font-size:1.1rem;margin-bottom:7px;color:var(--ink)}
.steps p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.55}
.band--dark .steps li{background:linear-gradient(170deg,var(--deep-2),#070D16);box-shadow:none;outline:1px solid var(--dline)}
.band--dark .steps strong{color:var(--dtext)}
.band--dark .steps p{color:var(--dtext-2)}
.band--dark .steps li::before{color:var(--volt-lit)}

/* ================================================================ pillars */

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;counter-reset:p}
.pillar{counter-increment:p;position:relative;padding:26px 24px 28px;background:var(--card);clip-path:var(--cut);box-shadow:var(--lift)}
.pillar::before{
  content:"[" counter(p,decimal-leading-zero) "]";display:block;
  font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;
  color:var(--volt-ink);margin-bottom:12px;
}
.pillar__h{font-size:1.2rem;margin:0 0 9px;color:var(--ink)}
.pillar p{margin:0;color:var(--ink-2);font-size:.96rem}
.band--dark .pillar{background:linear-gradient(170deg,var(--deep-2),#070D16);box-shadow:none;outline:1px solid var(--dline)}
.band--dark .pillar__h{color:var(--dtext)}
.band--dark .pillar p{color:var(--dtext-2)}
.band--dark .pillar::before{color:var(--volt-lit)}

/* ================================================================== cases */

.case{position:relative;padding:28px 30px 30px;margin:18px 0 0;background:var(--card);clip-path:var(--cut);box-shadow:var(--lift)}
.case__tag{margin:0 0 10px;font-family:var(--mono);font-weight:500;font-size:.67rem;letter-spacing:.17em;text-transform:uppercase;color:var(--amber-ink)}
.case__h{font-size:clamp(1.3rem,1.05rem + .9vw,1.8rem);margin:0 0 14px;color:var(--ink)}
.case p{color:var(--ink-2);max-width:78ch;margin:0 0 .9em}
.case dl{margin:20px 0 0}
.case dt{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);padding:14px 0 0;border-top:1px solid var(--rule)}
.case dd{margin:5px 0 14px;color:var(--ink-2);max-width:78ch}
.band--dark .case{background:linear-gradient(170deg,var(--deep-2),#070D16);box-shadow:none;outline:1px solid var(--dline)}
.band--dark .case__h{color:var(--dtext)}
.band--dark .case p,.band--dark .case dd{color:var(--dtext-2)}
.band--dark .case dt{border-top-color:var(--dline);color:var(--dmute)}
.band--dark .case__tag{color:var(--amber-lit)}

/* ================================================================ pricing */

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));gap:16px;counter-reset:tier;margin:14px 0 0}
.plan{
  counter-increment:tier;position:relative;padding:1px;clip-path:var(--cut);
  background:linear-gradient(160deg,var(--dline-2),var(--dline) 55%,rgba(29,79,255,.4));
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.45));
}
.plan>*{position:relative;z-index:1}
.plan::before{content:"";position:absolute;inset:1px;z-index:0;clip-path:var(--cut);background:linear-gradient(172deg,var(--deep-2),#070D16)}
.plan__name{margin:26px 26px 10px;font-size:1.22rem;color:var(--dtext)}
.plan__name::before{
  content:"TIER " counter(tier,decimal-leading-zero);display:block;
  font-family:var(--mono);font-weight:500;font-size:.67rem;letter-spacing:.17em;
  color:var(--volt-lit);margin-bottom:9px;
}
.plan__price{margin:0 26px 2px;font-family:var(--disp);font-weight:700;font-size:2.4rem;letter-spacing:-.03em;color:var(--dtext)}
.plan__per{margin:0 26px 20px;font-family:var(--mono);font-weight:500;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dmute)}
.plan ul{margin:0;padding:0 26px 28px;list-style:none;font-size:.94rem}
.plan li{position:relative;padding:11px 0 11px 24px;border-top:1px solid var(--dline);color:var(--dtext-2)}
.plan li::before{content:"";position:absolute;left:1px;top:1.1em;width:10px;height:5px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.plan--pick{background:linear-gradient(160deg,var(--amber),rgba(245,130,31,.4) 42%,var(--dline-2));filter:drop-shadow(0 12px 28px rgba(0,0,0,.45)) drop-shadow(0 0 52px rgba(245,130,31,.3))}
.plan--pick .plan__price{color:var(--amber-lit)}
.plan--pick .plan__name::before{content:"TIER " counter(tier,decimal-leading-zero) "  ·  RECOMMENDED";color:var(--amber-lit)}

/* ================================================================= tables */

.tscroll{overflow-x:auto;margin:1.8em 0;clip-path:var(--cut);background:var(--card);box-shadow:var(--lift)}
.dtable{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px;margin:0}
.dtable th,.dtable td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.dtable thead th{
  background:var(--ink);color:var(--amber-lit);border-bottom:0;
  font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
}
.dtable tbody th{color:var(--ink);font-family:var(--disp);font-weight:700}
.dtable .num{text-align:right;white-space:nowrap;word-break:keep-all;font-family:var(--mono);font-weight:500;color:var(--ink)}
.dtable thead .num{color:var(--amber-lit)}
.dtable tbody tr{transition:background .16s}
.dtable tbody tr:hover{background:var(--amber-dim)}
.dtable tbody tr:last-child td,.dtable tbody tr:last-child th{border-bottom:0}
.dtable a{color:var(--volt-ink);display:inline-block;min-height:24px;padding:2px 0}

/* ==================================================================== FAQ */

.faq{margin:18px 0 0;max-width:68ch}
.faq h3{position:relative;font-size:1.08rem;margin:0;padding:22px 0 0 28px;border-top:1px solid var(--rule);color:var(--ink)}
.faq h3::before{content:"";position:absolute;left:2px;top:29px;width:9px;height:9px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.faq p{margin:10px 0 24px 28px;color:var(--ink-2)}
.band--dark .faq h3{border-top-color:var(--dline);color:var(--dtext)}
.band--dark .faq p{color:var(--dtext-2)}

/* ================================================================== prose */

.prose{max-width:var(--measure);font-size:1.06rem;color:var(--ink-2)}
.prose>*:first-child{margin-top:0}
.prose p{margin:0 0 1.1em}
.prose h2{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.1rem);margin:2em 0 .6em;padding-top:.8em;border-top:1px solid var(--rule);position:relative;color:var(--ink)}
.prose h2::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:2px;background:linear-gradient(90deg,var(--amber),rgba(245,130,31,.15))}
.prose h3{font-size:1.18rem;margin:1.8em 0 .5em;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--volt-ink);display:inline-block;min-height:24px;padding:2px 0}
.prose ul{list-style:none;padding-left:0;margin:0 0 1.1em}
.prose ul>li{position:relative;padding-left:24px;margin-bottom:.5em}
.prose ul>li::before{content:"";position:absolute;left:0;top:.58em;width:10px;height:5px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(-45deg)}
.prose ol{list-style:none;counter-reset:po;padding-left:0;margin:0 0 1.1em}
.prose ol>li{counter-increment:po;position:relative;padding-left:36px;margin-bottom:.5em}
.prose ol>li::before{content:counter(po,decimal-leading-zero);position:absolute;left:0;top:.1em;font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.08em;color:var(--volt-ink)}
blockquote.prose,.prose blockquote{
  margin:1.4em 0;padding:26px 30px;clip-path:var(--cut-sm);position:relative;max-width:none;
  background:linear-gradient(140deg,rgba(245,130,31,.14),rgba(245,130,31,.03) 45%,var(--card));
  box-shadow:var(--lift);color:var(--ink);
}
.prose blockquote p,blockquote.prose p{color:var(--ink)}
.prose blockquote>*:last-child,blockquote.prose>*:last-child{margin-bottom:0}
.band--dark .prose,.band--dark .prose p,.band--dark .prose li{color:var(--dtext-2)}
.band--dark .prose h2,.band--dark .prose h3,.band--dark .prose strong{color:var(--dtext)}
.band--dark .prose h2{border-top-color:var(--dline)}
.band--dark .prose a{color:var(--volt-lit)}
.band--dark blockquote.prose,.band--dark .prose blockquote{
  background:linear-gradient(140deg,rgba(245,130,31,.2),rgba(245,130,31,.04) 45%,var(--deep-2));
  box-shadow:none;outline:1px solid var(--dline);color:var(--dtext);
}
.band--dark .prose blockquote p,.band--dark blockquote.prose p{color:var(--dtext)}

/* =========================================================== page headers */

.pagehead{position:relative;overflow:hidden;background:linear-gradient(180deg,#EBEFF5,var(--paper));padding:clamp(28px,4vw,52px) 0 clamp(30px,4.4vw,56px);border-bottom:1px solid var(--rule)}
.pagehead__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.84fr);gap:clamp(22px,3.4vw,50px);align-items:center}
.pagehead--plain .pagehead__in{grid-template-columns:1fr}
@media (max-width:900px){.pagehead__in{grid-template-columns:1fr}}
.pagehead__kicker{margin:0 0 12px;font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--amber-ink)}
.pagehead__h{font-size:clamp(2rem,1.2rem + 2.8vw,3.5rem);letter-spacing:-.028em;color:var(--ink)}
.pagehead__lede{margin:16px 0 0;font-size:clamp(1rem,.95rem + .35vw,1.16rem);line-height:1.6;color:var(--ink-2);max-width:52ch}
.pagehead__art{position:relative}
.pagehead__art img{clip-path:var(--cut);box-shadow:var(--lift-hi)}

.crumbs{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-bottom:14px;font-family:var(--mono);font-weight:500;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.crumbs a{color:var(--volt-ink);text-decoration:none;display:inline-block;min-height:24px;padding:4px 0}
.crumbs a:hover{text-decoration:underline}

/* ================================================================ showcase */

.showcase{position:relative;overflow:hidden;background:var(--void);color:var(--dtext)}
.showcase__pic{position:absolute;inset:0}
.showcase__pic img{width:100%;height:100%;object-fit:cover;opacity:.62}
.showcase__pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--void) 6%,rgba(5,8,14,.78) 46%,transparent 86%)}
.showcase__in{position:relative;padding:clamp(54px,8vw,120px) 0;max-width:58ch}
.showcase__say{margin:0 0 13px;font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--amber-lit)}
.showcase__h{font-size:clamp(1.8rem,1.1rem + 2.4vw,3rem);letter-spacing:-.025em;margin:0 0 14px;color:var(--dtext)}
.showcase__p{color:var(--dtext-2);margin:0 0 24px}
.showcase__acts{display:flex;flex-wrap:wrap;gap:13px;margin:0}
@media (max-width:760px){.showcase__pic::after{background:linear-gradient(180deg,rgba(5,8,14,.55),rgba(5,8,14,.93) 52%)}}

/* ============================================================ empty state */

.empty{max-width:62ch;margin:clamp(34px,5vw,60px) 0;padding:clamp(30px,4vw,46px);position:relative;clip-path:var(--cut);background:var(--card);box-shadow:var(--lift)}
.empty h2{font-size:1.6rem;margin:0 0 12px;color:var(--ink)}
.empty h2::before{content:"[ IN PRODUCTION ]";display:block;font-family:var(--mono);font-weight:500;font-size:.67rem;letter-spacing:.2em;color:var(--amber-ink);margin-bottom:14px}
.empty p{color:var(--ink-2);margin:0 0 20px}

/* ================================================================== posts */

.postlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:20px 0 0;list-style:none;padding:0}
.pcard{display:flex;flex-direction:column;background:var(--card);clip-path:var(--cut);box-shadow:var(--lift);text-decoration:none;padding:24px;transition:transform .24s var(--ease),box-shadow .24s}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--lift-hi)}
.pcard__date{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.pcard__h{font-size:1.16rem;margin:0 0 9px;color:var(--ink)}
.pcard__x{margin:0;color:var(--ink-2);font-size:.95rem}

/* ================================================================= footer */

.foot{
  background:var(--void);color:var(--dtext-2);position:relative;
  margin-top:calc(var(--skew) * -1);
  padding:calc(clamp(52px,7vw,96px) + var(--skew)) 0 34px;
  clip-path:polygon(0 0,100% var(--skew),100% 100%,0 100%);
}
.foot__say{max-width:62ch;margin-bottom:46px}
.foot__lead{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,1.1rem + 2vw,2.7rem);line-height:1.08;letter-spacing:-.025em;color:var(--dtext);margin:0 0 14px}
.foot__sub{color:var(--dtext-2);margin:0 0 24px}
.foot__acts{display:flex;flex-wrap:wrap;gap:13px;margin:0}
.foot__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px;padding-top:34px;border-top:1px solid var(--dline)}
.foot__h{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.17em;text-transform:uppercase;color:var(--amber-lit);margin:0 0 12px}
.foot__col ul{list-style:none;margin:0 0 22px;padding:0}
.foot a:not(.btn){color:var(--dtext-2);text-decoration:none;display:inline-block;min-height:24px;padding:5px 0;font-size:.93rem}
.foot a:not(.btn):hover{color:var(--amber-lit)}
.foot address{font-style:normal;font-size:.93rem;line-height:1.6;margin:0 0 14px;color:var(--dtext-2)}
.foot address strong{color:var(--dtext);font-weight:500;display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:5px}
.foot__hours{display:block;color:var(--dmute);font-size:.88rem;padding-top:4px}
.foot__end{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:40px;padding-top:22px;border-top:1px solid var(--dline);font-size:.86rem;color:var(--dmute)}
.foot__end p{margin:0}
.foot__legal{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;margin:0 0 0 auto;padding:0}

/* ============================================== scroll reveal (one pass) */

.rv{opacity:0;transform:translateY(22px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){.rv,.rv.in{opacity:1;transform:none;transition:none}}

/* =================================================================== misc */

.pagebody>.band:first-child{padding-top:clamp(40px,5vw,72px)}
@media (max-width:620px){:root{--skew:14px}}

/* ---------------------------------------- dark-ground variants, late */
.band--dark .svcrow{border-top-color:var(--dline)}
.band--dark .svcrow:last-child{border-bottom-color:var(--dline)}
.band--dark .svcrow__name{color:var(--dtext)}
.band--dark .svcrow__say{color:var(--dtext-2)}
.band--dark .svcrow__link::before{color:var(--volt-lit)}
.band--dark .svcrow__link:hover .svcrow__name{color:var(--amber-lit)}
.band--dark .hero__chips li{background:var(--deep-2);color:var(--dtext-2);box-shadow:inset 0 0 0 1px var(--dline-2)}
.band--dark .empty{background:linear-gradient(170deg,var(--deep-2),#070D16);box-shadow:none;outline:1px solid var(--dline)}
.band--dark .empty h2{color:var(--dtext)}
.band--dark .empty p{color:var(--dtext-2)}
.band--dark .empty h2::before{color:var(--amber-lit)}
.band--dark .tscroll{background:linear-gradient(172deg,var(--deep-2),#070D16);box-shadow:none;outline:1px solid var(--dline)}
.band--dark .dtable th,.band--dark .dtable td{border-bottom-color:var(--dline);color:var(--dtext-2)}
.band--dark .dtable tbody th,.band--dark .dtable .num{color:var(--dtext)}
.band--dark .dtable a{color:var(--volt-lit)}
.band--dark .dtable tbody tr:hover{background:rgba(245,130,31,.12)}
.band--dark .crumbs{color:var(--dmute)}
/* a plan that somehow lands on a light ground still reads */
:not(.band--dark)>.shell .plan .plan__name,:not(.band--dark)>.shell .plan .plan__price{color:var(--dtext)}
.showcase .band__tag{color:var(--amber-lit)}
.showcase .band__tag::after{background:linear-gradient(90deg,var(--amber),transparent)}
.rail a.rd{display:inline-flex;align-items:center;min-height:24px;padding:3px 0;text-decoration:none}
.rail a.rd:hover{color:var(--amber-lit)}

/* ---------------------------------------- services dropdown (3 groups) */
.nav__list>li{position:relative}
.nav__list .sub-menu{
  position:absolute;left:0;top:calc(100% + 6px);min-width:280px;z-index:60;
  list-style:none;margin:0;padding:10px 0 12px;
  background:var(--card);clip-path:var(--cut);box-shadow:var(--lift-hi);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s,transform .22s var(--ease),visibility 0s .22s;
}
.nav__list li:hover>.sub-menu,.nav__list li:focus-within>.sub-menu,.nav__list li.is-open>.sub-menu{
  opacity:1;visibility:visible;transform:none;transition:opacity .18s,transform .22s var(--ease);
}
.nav__list .sub-menu a{display:block;padding:8px 22px;font-size:.92rem;font-weight:500;color:var(--ink-2)}
.nav__list .sub-menu a::after{display:none}
.nav__list .sub-menu a:hover{background:var(--amber-dim);color:var(--ink)}
.nav__list .sub-menu .grp{margin-top:10px;padding-top:6px;border-top:1px solid var(--rule)}
.nav__list .sub-menu>li:first-child.grp{margin-top:0;padding-top:0;border-top:0}
.nav__list .sub-menu .grp::before{
  display:block;padding:6px 22px 2px;font-family:var(--mono);font-weight:500;font-size:.62rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--amber-ink);
}
.nav__list .sub-menu .grp--grow::before{content:"Grow revenue"}
.nav__list .sub-menu .grp--reach::before{content:"Reach and sell"}
.nav__list .sub-menu .grp--build::before{content:"Build"}
@media (max-width:980px){
  .nav__list>li{position:static}
  .nav__list .sub-menu{position:static;min-width:0;clip-path:none;box-shadow:none;background:#EEF2F7;
    opacity:1;visibility:visible;transform:none;display:none;padding:4px 0 8px}
  .nav__list li.is-open>.sub-menu{display:block}
  .nav__list .sub-menu a{padding:10px var(--gut) 10px calc(var(--gut) + 14px)}
  .nav__list .sub-menu .grp::before{padding:8px var(--gut) 2px}
}

/* ==========================================================================
   CINEMATIC MOTION LAYER
   The page is cut like a short film: cold open, hero, statement beat on
   black, object beats, showreel, proof, contact. Grade (grain, vignette)
   is seasoning. Everything here is decorative: it is gated on motion
   preference and feature support, and degrades to the IntersectionObserver
   reveal with nothing lost.
   ========================================================================== */

/* ---- grade: animated film grain over everything, very low ---- */
.grain{
  position:fixed;inset:-50%;width:200%;height:200%;z-index:70;pointer-events:none;
  opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
.band--dark{box-shadow:inset 0 0 160px rgba(0,0,0,.55)}   /* vignette on the dark beats */

@media (prefers-reduced-motion:no-preference){
  .grain{animation:grain 1.1s steps(6) infinite}
  @keyframes grain{
    0%{transform:translate(0,0)}      20%{transform:translate(-4%,3%)}
    40%{transform:translate(3%,-5%)}  60%{transform:translate(-5%,-2%)}
    80%{transform:translate(4%,5%)}   100%{transform:translate(-2%,4%)}
  }
}

/* ---- cold open: letterbox bars slide away, titles wipe in ---- */
@media (prefers-reduced-motion:no-preference){
  .hero::before,.hero::after{
    content:"";position:absolute;left:0;right:0;height:14%;background:var(--void);z-index:5;
    animation:bar 1.05s .15s var(--ease) both;pointer-events:none;
  }
  .hero::before{top:0;transform-origin:top}
  .hero::after{bottom:0;transform-origin:bottom}
  @keyframes bar{to{transform:scaleY(0)}}

  .hero__h span{
    animation:title .9s var(--ease) both;
    clip-path:inset(0 100% 0 0);
  }
  .hero__h span:nth-child(1){animation-delay:.55s}
  .hero__h span:nth-child(2){animation-delay:.72s}
  .hero__h span:nth-child(3){animation-delay:.9s}
  @keyframes title{
    from{clip-path:inset(0 100% 0 0);transform:translateX(-14px);opacity:.4}
    to{clip-path:inset(0 0 0 0);transform:none;opacity:1}
  }
  .hero__say{animation:rise .8s 1.15s var(--ease) both}
  .hero__acts{animation:rise .8s 1.28s var(--ease) both}
  .hero__chips{animation:rise .8s 1.4s var(--ease) both}
  .hero__rail{animation:rise .7s .45s var(--ease) both}
  .hero__art{animation:fade 1.3s .7s ease both}

  /* one light pass over the amber title block and over the framed render */
  .hero__h mark{position:relative;overflow:hidden}
  .hero__h mark::after,.hero__frame::after{
    content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:34%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-18deg) translateX(-120%);
    animation:sweep 1.4s 1.5s cubic-bezier(.3,.7,.2,1) both;pointer-events:none;
  }
  .hero__frame{position:relative;overflow:hidden}
  .hero__frame::after{animation-delay:1.9s;z-index:2;mix-blend-mode:screen;opacity:.75}
  @keyframes sweep{to{transform:skewX(-18deg) translateX(1100%)}}
}

/* ---- scroll-driven camera: only where the browser can do it natively ---- */
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline: view()) and (animation-range: entry)){

    /* the field drifts up as the hero leaves — a slow crane move */
    .hero__gl{
      animation:crane linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes crane{to{transform:translateY(140px) scale(1.06)}}

    /* glows inside the dark beats slide against the scroll */
    .band--dark::before{
      animation:glowdrift linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes glowdrift{from{transform:translateY(-9%)}to{transform:translateY(9%)}}

    /* showreel: a scrubbed slow push-in on the plate */
    .showcase__pic img{
      transform-origin:60% 50%;
      animation:push linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes push{from{transform:scale(1.02) translateY(-3%)}to{transform:scale(1.16) translateY(3%)}}

    /* page-head render: gentle parallax */
    .pagehead__art img{
      animation:drift linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes drift{from{transform:translateY(18px)}to{transform:translateY(-18px)}}

    /* object beats: a light sweep crosses each card as it enters */
    .svccard::after,.tile::after,.plan::after,.steps li::after,.pillar::after,.case::after{
      content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:30%;z-index:4;pointer-events:none;
      background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
      transform:skewX(-18deg) translateX(-160%);
      animation:cardsweep linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 100%;
    }
    .tile::after,.plan::after{z-index:3;background:linear-gradient(100deg,transparent,rgba(255,200,140,.26),transparent)}
    @keyframes cardsweep{to{transform:skewX(-18deg) translateX(520%)}}

    /* readout lines draw themselves in */
    .band__tag::after,.svcband__h::after,.head .rd::after,.ops__cap::after{
      transform-origin:left;
      animation:draw linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 90%;
    }
    @keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    /* section titles wipe in like title cards */
    .band__h,.head h2,.case__h,.foot__lead{
      animation:wipe linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 70%;
    }
    @keyframes wipe{
      from{clip-path:inset(0 100% 0 0);transform:translateX(-10px)}
      to{clip-path:inset(0 0 0 0);transform:none}
    }

    /* the big tile headline and its ghost numeral settle in from depth */
    .tile--lead .tile__in::after{
      animation:ghost linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 60%;
    }
    @keyframes ghost{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
  }
}

/* cards host the sweep, so they need to clip it */
.svccard,.tile,.plan,.steps li,.pillar,.case{overflow:hidden}

/* ==========================================================================
   LEVEL SELECT — service cards as full-bleed selection tiles.
   The render IS the card; copy sits on a graded panel at the foot; the index
   and icon ride a HUD chip at the head. Hover = selected: amber frame, lift.
   ========================================================================== */

.svcgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;counter-reset:lv}
@media (min-width:1100px){
  .svcgrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

.svccard{
  counter-increment:lv;display:grid;grid-template-rows:1fr auto;min-height:420px;
  background:var(--void);color:var(--dtext);clip-path:var(--cut);box-shadow:var(--lift);
  isolation:isolate;overflow:hidden;
}
.svcgrid:has(> :nth-child(3)) .svccard{min-height:380px}   /* 3+ in a row: a little shorter */
.svccard::before{box-shadow:inset 0 0 0 1px var(--dline-2)}
.svccard:hover::before{box-shadow:inset 0 0 0 2px var(--amber)}

.svccard__pic{
  position:absolute;inset:0;z-index:0;aspect-ratio:auto;border:0;background:var(--void);
}
.svccard__pic img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transition:transform .7s var(--ease),filter .4s}
.svccard:hover .svccard__pic img{transform:scale(1.06);filter:saturate(1.1)}
.svccard__pic::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,8,14,.25) 0%,transparent 30%,transparent 48%,rgba(5,8,14,.86) 78%,var(--void) 100%);
}
/* HUD chip: index + icon */
.svccard__ico{
  left:14px;bottom:auto;top:14px;z-index:2;width:auto;height:auto;
  display:flex;align-items:center;gap:9px;padding:7px 10px 7px 8px;
  background:rgba(5,8,14,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  clip-path:var(--cut-sm);color:var(--amber-lit);
}
.svccard__ico svg{width:20px;height:20px}
.svccard__ico::after{
  content:counter(lv,decimal-leading-zero);
  font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;color:var(--volt-lit);
}
.svccard__body{grid-row:2;position:relative;z-index:1;padding:0 20px 22px;gap:8px;flex:none;align-self:end}
.svccard__name{color:var(--dtext);font-size:1.22rem;line-height:1.1}
.svccard__say{color:var(--dtext-2);font-size:.92rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.svccard__go{color:var(--amber-lit);padding-top:10px}
.svccard__go::before{background:var(--amber-lit)}
.svccard:hover .svccard__name{color:var(--amber-lit)}
/* the light sweep now rides above the render */
.svccard::after{z-index:3;background:linear-gradient(100deg,transparent,rgba(255,235,210,.22),transparent)}

/* two-item groups become wide feature tiles */
.svcgrid:not(:has(> :nth-child(3))) .svccard{min-height:360px}
.svcgrid:not(:has(> :nth-child(3))) .svccard__pic img{object-position:60% 50%}
.svcgrid:not(:has(> :nth-child(3))) .svccard__body{padding-right:34%}
@media (max-width:760px){.svcgrid:not(:has(> :nth-child(3))) .svccard__body{padding-right:20px}}

/* ==========================================================================
   SHOWREEL — the work strip as a letterboxed shot, not an empty band.
   ========================================================================== */

.showcase{
  position:relative;overflow:hidden;background:var(--void);color:var(--dtext);
  margin-block:calc(var(--skew) * -1);padding-block:var(--skew);
  clip-path:polygon(0 0,100% var(--skew),100% 100%,0 calc(100% - var(--skew)));isolation:isolate;
}
.showcase__pic{position:absolute;inset:0;z-index:0}
.showcase__pic img{width:100%;height:100%;object-fit:cover;object-position:66% 50%;opacity:1}
.showcase__pic::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(5,8,14,.94) 0%,rgba(5,8,14,.82) 34%,rgba(5,8,14,.25) 60%,transparent 80%),
    linear-gradient(180deg,rgba(5,8,14,.5),transparent 25%,transparent 75%,rgba(5,8,14,.6));
}
/* letterbox bars inside the shot */
.showcase::before,.showcase::after{
  content:"";position:absolute;left:0;right:0;height:10px;background:var(--void);z-index:2;
}
.showcase::before{top:var(--skew)}
.showcase::after{bottom:var(--skew)}
.showcase__say{
  position:relative;z-index:1;width:min(var(--shell),100% - var(--gut)*2);margin-inline:auto;
  font:inherit;letter-spacing:0;text-transform:none;color:inherit;
}
.showcase__in{position:relative;padding:clamp(64px,10vw,150px) 0;max-width:52ch}
.showcase__h{font-size:clamp(2rem,1.1rem + 3vw,3.6rem);letter-spacing:-.028em;text-transform:uppercase;line-height:.98;margin:0 0 16px;color:var(--dtext)}
.showcase__p{color:var(--dtext-2);font-size:1.04rem;margin:0 0 26px;max-width:46ch}
.showcase__acts{display:flex;flex-wrap:wrap;gap:13px;margin:0}
/* HUD frame marks on the shot */
.showcase__in::before,.showcase__in::after{
  content:"";position:absolute;width:26px;height:26px;pointer-events:none;opacity:.8;
}
.showcase__in::before{left:-14px;top:calc(clamp(64px,10vw,150px) - 14px);border-left:2px solid var(--amber);border-top:2px solid var(--amber)}
.showcase__in::after{right:-14px;bottom:calc(clamp(64px,10vw,150px) - 14px);border-right:2px solid var(--amber);border-bottom:2px solid var(--amber)}
@media (max-width:760px){
  .showcase__pic::after{background:linear-gradient(180deg,rgba(5,8,14,.55),rgba(5,8,14,.92) 55%)}
  .showcase__in::before,.showcase__in::after{display:none}
}
.svcgrid:has(> :nth-child(3)) .svccard{min-height:430px}
.svcgrid:has(> :nth-child(3)) .svccard__say{-webkit-line-clamp:4;font-size:.9rem}
.svcgrid:has(> :nth-child(3)) .svccard__name{font-size:1.12rem}

/* ==========================================================================
   v5 "IMMERSIVE" SKIN — the whole site goes dark and angular; the light
   now comes from the scene. Tokens flip here so every component follows.
   ========================================================================== */

:root{
  --paper:#05080E;--card:#0D1522;--ink:#F2F6FB;--ink-2:#A6B5C7;--mute:#8E9DAF;
  --rule:#1D2A3B;--rule-2:#2B3B51;--amber-ink:#FF9A3D;--volt-ink:#6E9BFF;
  --lift:0 1px 0 rgba(255,255,255,.04) inset,0 8px 18px rgba(0,0,0,.45),0 28px 60px rgba(0,0,0,.4);
  --lift-hi:0 1px 0 rgba(255,255,255,.06) inset,0 12px 24px rgba(0,0,0,.5),0 40px 80px rgba(0,0,0,.45);
}
html{background:var(--void)}
body{background:var(--void);color:var(--ink)}
body.has-cursor{cursor:none}
body.has-cursor a,body.has-cursor button{cursor:none}

/* chrome */
.nav{background:rgba(5,8,14,.78);border-bottom-color:var(--dline);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.nav__in{min-height:66px;gap:16px}
.nav__rail{display:inline-flex;align-items:center;gap:10px;color:var(--dmute);margin-left:6px}
.nav__rail .rail__live{color:var(--amber-lit)}
.nav__rail .rail__sep{color:var(--dline-2)}
@media (max-width:1180px){.nav__rail{display:none}}
.nav .motion{background:transparent;border:1px solid var(--dline-2);color:var(--dtext-2);font-family:var(--mono);font-weight:500;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:8px 10px;clip-path:var(--cut-sm);cursor:pointer;white-space:nowrap}
.nav .motion:hover{border-color:var(--amber);color:var(--amber-lit)}
@media (max-width:980px){.nav .motion{margin-left:auto;order:1}.navtoggle{margin-left:0;order:2}}
.navtoggle{background:var(--deep-2);color:var(--dtext)}
.nav__list a{color:var(--dtext-2)}
.nav__list a:hover,.nav__list .current-menu-item>a{color:var(--dtext)}
.nav__list .sub-menu{background:var(--deep);box-shadow:0 20px 50px rgba(0,0,0,.6);outline:1px solid var(--dline)}
.nav__list .sub-menu a{color:var(--dtext-2)}
.nav__list .sub-menu a:hover{background:rgba(245,130,31,.12);color:var(--dtext)}
.nav__list .sub-menu .grp{border-top-color:var(--dline)}
.nav__list .sub-menu .grp::before{color:var(--amber-lit)}
@media (max-width:980px){
  .navwrap{background:var(--deep);border-bottom-color:var(--dline)}
  .nav__list li{border-top-color:var(--dline)}
  .nav__list .sub-menu{background:#0A1220;outline:0}
}
.skip:focus{background:var(--amber);color:#120A02}

/* buttons */
.btn--off{background:var(--deep-2);color:var(--dtext);box-shadow:inset 0 0 0 1px var(--dline-2)}
.btn--off:hover{background:var(--dtext);color:var(--void)}
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg) translateX(-150%);transition:transform .7s var(--ease);pointer-events:none}
.btn:hover::after{transform:skewX(-18deg) translateX(620%)}

/* bands: all dark; the rhythm is which side the light comes from */
.band{border-top:1px solid rgba(255,255,255,.045)}
.band--dark{clip-path:none;margin-block:0;padding:var(--bandpad) 0;box-shadow:none}
.band--dark::before{background:radial-gradient(52% 58% at 86% 8%,rgba(245,130,31,.14),transparent 66%),radial-gradient(46% 54% at 6% 96%,rgba(29,79,255,.16),transparent 70%)}
.band--dark.band--alt::before{background:radial-gradient(52% 58% at 10% 10%,rgba(29,79,255,.15),transparent 66%),radial-gradient(46% 54% at 92% 94%,rgba(245,130,31,.13),transparent 70%)}
.band--tint{background:transparent}
.band::after{background:linear-gradient(90deg,transparent,rgba(110,155,255,.18) 35%,rgba(245,130,31,.35) 50%,rgba(110,155,255,.18) 65%,transparent)}
.pagebody--home>.band:first-child{border-top:0}

/* data table head was ink-on-light */
.dtable thead th{background:#0A1220}
.tscroll{outline:1px solid var(--dline)}

/* page heads */
.pagehead{background:transparent;border-bottom:1px solid var(--dline);padding:clamp(34px,5vw,64px) 0 clamp(34px,5vw,64px)}
.pagehead__h{color:var(--dtext)}
.pagehead__h .ln{display:block;overflow:hidden}
.pagehead__h .ch{display:inline-block;transform:translateY(110%) rotate(5deg);opacity:0}
.pagehead__h .sp{display:inline-block;width:.26em}
.pagehead__h .wd{display:inline-block;white-space:nowrap}
.js .pagehead__lede[data-rise]{opacity:0;transform:translateY(14px)}
.pagehead__art{position:relative}
.pagehead__art img{clip-path:var(--cut);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pagehead--scene{position:relative;min-height:min(78vh,760px);display:flex;align-items:center;overflow:hidden;background:var(--void)}
.pagehead--scene .pagehead__in{position:relative;z-index:2;grid-template-columns:minmax(0,.62fr) minmax(0,.38fr)}
@media (max-width:900px){.pagehead--scene{min-height:auto;padding:clamp(40px,8vw,80px) 0 44vw}.pagehead--scene .pagehead__in{grid-template-columns:1fr}}
.gl--plate{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
/* copy shade: the plate stays, the headline side reads */
.pagehead--scene::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,8,14,.82) 0,rgba(5,8,14,.5) 46%,rgba(5,8,14,.1) 72%,transparent)}
@media (max-width:900px){.pagehead--scene::after{background:linear-gradient(180deg,rgba(5,8,14,.86) 0,rgba(5,8,14,.55) 55%,transparent)}}
.nogl .pagehead--scene::after{display:none}
.poster{position:absolute;inset:0;z-index:0;pointer-events:none;transition:opacity .9s;
  background:radial-gradient(50% 50% at 72% 46%,rgba(245,130,31,.2),transparent 70%),radial-gradient(40% 40% at 18% 82%,rgba(29,79,255,.18),transparent 70%),var(--void)}
.poster.off{opacity:0}
/* no WebGL: the poster stays, plus a quiet CSS star field */
.nogl .poster{opacity:1;background-image:radial-gradient(1.5px 1.5px at 20% 30%,rgba(143,176,255,.7),transparent 60%),radial-gradient(1.5px 1.5px at 70% 20%,rgba(143,176,255,.6),transparent 60%),radial-gradient(1.5px 1.5px at 85% 70%,rgba(255,154,61,.6),transparent 60%),radial-gradient(1.5px 1.5px at 40% 80%,rgba(143,176,255,.6),transparent 60%),radial-gradient(1.5px 1.5px at 55% 55%,rgba(143,176,255,.5),transparent 60%),radial-gradient(50% 50% at 72% 46%,rgba(245,130,31,.22),transparent 70%),radial-gradient(40% 40% at 18% 82%,rgba(29,79,255,.2),transparent 70%)}
.nogl .gl{display:none}
.nogl .hero,.nogl .nine,.nogl .card,.nogl .pagehead__lede,.nogl .h1 .ch,.nogl .pagehead__h .ch,.nogl [data-rise]{opacity:1!important;transform:none!important}

/* ---- home stage (from the lab) ---- */
.gl--home{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.gl--home+.stage~*{position:relative;z-index:1}
.pagebody--home{position:relative;z-index:1;background:linear-gradient(180deg,transparent,rgba(5,8,14,.86) 18%,rgba(5,8,14,.96))}
.stage{position:relative;height:200vh;z-index:1}
.stick{position:sticky;top:0;height:100vh;overflow:hidden}
.hero{position:absolute;inset:0;display:grid;align-content:center;padding:0 var(--gut);max-width:var(--shell);margin:0 auto;pointer-events:none;overflow:visible}
.hero>*{pointer-events:auto}
.hero .rail{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--volt-lit);margin:0 0 22px;background:none;border:0}
.hero .rail::before{content:"";width:22px;height:2px;background:var(--volt)}
.hero .rail s{text-decoration:none;color:var(--dline-2)}
.h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.4rem,1rem + 6.6vw,6.6rem);line-height:.92;letter-spacing:-.035em;text-transform:uppercase;margin:0;max-width:9.6ch;color:var(--dtext)}
.h1 .ln{display:block;overflow:hidden}
.h1 .ln--am{color:var(--amber)}
.h1 .ch{display:inline-block;transform:translateY(110%) rotate(6deg);opacity:0;will-change:transform}
.h1 .sp{display:inline-block;width:.28em}
.h1 .wd{display:inline-block;white-space:nowrap}
.hero .sub{margin:26px 0 0;max-width:46ch;color:var(--dtext-2);font-size:clamp(1rem,.95rem + .4vw,1.2rem)}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 0}
.js .hero [data-rise]{opacity:0;transform:translateY(16px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;padding:0;list-style:none}
.chips li{font-family:var(--mono);font-weight:500;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dtext-2);background:rgba(13,21,34,.7);padding:8px 12px;box-shadow:inset 0 0 0 1px var(--dline-2);clip-path:var(--cut-sm)}
.hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dmute);display:flex;flex-direction:column;align-items:center;gap:10px}
.hint i{width:1px;height:38px;background:linear-gradient(180deg,var(--amber),transparent);animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.nine{position:absolute;inset:0;display:grid;align-content:center;padding:0 var(--gut);max-width:var(--shell);margin:0 auto;pointer-events:none}
.js .nine{opacity:0}
.nine.on{pointer-events:auto}
.nine__cap{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:500;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--amber-lit);margin:0 0 18px}
.nine__cap::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.grid9{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{position:relative;min-height:clamp(132px,19vh,186px);padding:20px 20px 18px;clip-path:var(--cut);background:linear-gradient(170deg,rgba(18,29,46,.8),rgba(7,13,22,.88));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-decoration:none;color:var(--dtext);display:flex;flex-direction:column;gap:6px;transition:transform .35s var(--ease)}
.js .card{opacity:0;transform:translateY(22px) scale(.96)}
.card::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--dline-2);clip-path:var(--cut);pointer-events:none;transition:box-shadow .25s}
.card:hover::before{box-shadow:inset 0 0 0 2px var(--amber)}
.card:hover{transform:translateY(-4px) scale(1)}
.card__g{font-family:var(--mono);font-weight:500;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--volt-lit)}
.card__n{font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,.9rem + .8vw,1.5rem);line-height:1.08;letter-spacing:-.015em}
.card__s{font-size:.9rem;color:var(--dtext-2);line-height:1.45;margin-top:auto}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--amber),rgba(245,130,31,.1) 55%,transparent);opacity:.7}
.card:hover{box-shadow:0 0 44px rgba(245,130,31,.22)}
.nine__cap{font-size:.74rem}
.nine__h{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,1rem + 2vw,2.6rem);letter-spacing:-.025em;text-transform:uppercase;color:var(--dtext);margin:0 0 18px;line-height:1}
.card__no{position:absolute;right:14px;top:12px;font-family:var(--mono);font-weight:500;font-size:.62rem;color:var(--amber-lit);letter-spacing:.14em}
.card__ico{width:30px;height:30px;color:var(--amber);margin-bottom:4px;filter:drop-shadow(0 0 8px rgba(245,130,31,.6))}
.card__ico svg{width:100%;height:100%;display:block}
@media (max-width:760px){.grid9{grid-template-columns:repeat(2,1fr);gap:9px}.card{min-height:108px;padding:12px}.card__s{display:none}.h1{max-width:none}.nine__h{font-size:1.3rem}}
@media (max-width:420px){.grid9{grid-template-columns:repeat(3,1fr)}.card{min-height:88px;padding:10px}.card__n{font-size:.78rem}.card__g,.card__ico{display:none}}

/* HUD corners */
.hud{position:absolute;z-index:3;font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dmute);pointer-events:none}
.hud--bl{left:var(--gut);bottom:22px;display:grid;gap:4px}
.hud--br{right:var(--gut);bottom:22px;text-align:right;display:grid;gap:8px;justify-items:end}
.hud b{color:var(--dtext-2);font-weight:500}
.hud .mark{display:inline-block;width:10px;height:10px;border-left:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);margin-right:8px;vertical-align:-1px}
.shotbar{width:160px;height:2px;background:var(--dline-2);position:relative;overflow:hidden;display:block}
.shotbar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--volt),var(--amber));transform-origin:left;transform:scaleX(0)}
@media (max-width:760px){.hud--bl{display:none}.hud--br{bottom:14px}.shotbar{width:110px}}

/* site-wide grade: scan line, cursor; grain already exists */
.scan{position:fixed;left:0;right:0;top:0;height:1px;z-index:69;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(110,155,255,.3),transparent);animation:scan 9s linear infinite}
@keyframes scan{from{transform:translateY(-2px)}to{transform:translateY(100vh)}}
.grain{opacity:.06;mix-blend-mode:overlay}
.cur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--amber);clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s,opacity .3s;mix-blend-mode:difference;opacity:0}
.cur.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(245,130,31,.18)}
.dot{position:fixed;left:0;top:0;z-index:91;pointer-events:none;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--amber);opacity:0}
body:not(.has-cursor) .cur,body:not(.has-cursor) .dot{display:none}

/* calm: nothing moves on its own */
.calm .grain,.calm .scan,.calm .hint i,.calm .rail__live::before,.calm .hero__rail i::before{animation:none}
.calm .scan{display:none}
.calm .rv{opacity:1;transform:none}
.calm .h1 .ch,.calm .pagehead__h .ch{transform:none;opacity:1}
.calm [data-rise]{opacity:1;transform:none}

/* footer joins the dark page without the old slant */
.foot{clip-path:none;margin-top:0;padding-top:clamp(52px,7vw,96px);border-top:1px solid var(--dline)}

/* old light-hero leftovers must not fire */
.hero::before,.hero::after{display:none}

/* home poster covers the viewport; no-scene layout turns the stage into a document */
.home .poster{position:fixed}
.nogl .stage{height:auto}
.nogl .stick{position:static;height:auto;overflow:visible}
.nogl .hero,.nogl .nine{position:relative;inset:auto;min-height:72vh;pointer-events:auto}
.nogl .nine{padding-bottom:10vh;opacity:1}
.nogl .hud{display:none}
.nogl .hint{display:none}
.rv--hard{transition:none!important;opacity:1!important;transform:none!important}

/* ==========================================================================
   THE FILM — home shots 02–07. One canvas behind, content comes out of it.
   ========================================================================== */
.film{position:relative;z-index:1;background:linear-gradient(180deg,rgba(5,8,14,.55),rgba(5,8,14,.72))}
.home .foot__say{display:none}                 /* shot 07 is the CTA */
.home .foot{padding-top:40px}

.shot{position:relative;padding:clamp(56px,7vw,100px) 0;isolation:isolate}
.shot::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(110,155,255,.25) 30%,rgba(245,130,31,.5) 50%,rgba(110,155,255,.25) 70%,transparent)}
.shot::after{content:"";position:absolute;left:50%;top:0;width:2px;height:28px;background:var(--amber);transform:translateX(-50%) skewX(-18deg);box-shadow:0 0 12px var(--amber)}
.shot__head{max-width:62ch;margin-bottom:clamp(26px,3.4vw,44px)}
.shot__rd{display:flex;align-items:center;gap:11px;color:var(--amber-lit);margin:0 0 14px}
.shot__rd b{font-weight:500;color:var(--volt-lit)}
.shot__rd::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.shot__h{font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,1.1rem + 3vw,3.6rem);line-height:.98;letter-spacing:-.03em;text-transform:uppercase;color:var(--dtext);margin:0 0 14px}
.shot__h--xl{font-size:clamp(2.4rem,1.2rem + 4.6vw,5.2rem)}
.shot__p{color:var(--dtext-2);margin:0;max-width:58ch;font-size:clamp(1rem,.95rem + .3vw,1.14rem)}

/* panels share one surface */
.pane{position:relative;clip-path:var(--cut);background:linear-gradient(170deg,rgba(18,29,46,.82),rgba(7,13,22,.9));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pane::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--dline-2);clip-path:var(--cut);pointer-events:none;transition:box-shadow .25s}
.pane:hover::before{box-shadow:inset 0 0 0 2px var(--amber)}

/* shot navigator */
.shotnav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:40;display:grid;gap:10px;opacity:0;pointer-events:none;transition:opacity .4s}
.shotnav.on{opacity:1;pointer-events:auto}
.shotnav a{display:grid;grid-template-columns:auto 0fr;align-items:center;gap:0;text-decoration:none;color:var(--dmute);font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;transition:grid-template-columns .3s var(--ease),gap .3s,color .2s;min-height:24px}
.shotnav a b{font-weight:500;width:28px;height:24px;display:grid;place-items:center;clip-path:var(--cut-sm);box-shadow:inset 0 0 0 1px var(--dline-2);background:rgba(5,8,14,.7)}
.shotnav a span{overflow:hidden;white-space:nowrap}
.shotnav a:hover,.shotnav a.is-on{color:var(--amber-lit);grid-template-columns:auto 1fr;gap:8px}
.shotnav a.is-on b{background:var(--amber);color:#120A02;box-shadow:none}
@media (max-width:1100px){.shotnav{display:none}}

/* ---- 02 pan ---- */
.shot--pan{padding:clamp(60px,8vw,110px) 0}
.shot--pan .shot__stick{display:block}
.shot--pan .shot__head{margin-left:auto;margin-right:auto;width:min(var(--shell),100% - var(--gut)*2);max-width:none}
.shot--pan .shot__head>*{max-width:62ch}
.pan{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(var(--gut),calc((100% - var(--shell))/2));-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 0 16px}
.pan::-webkit-scrollbar{display:none}
.pan__track{display:flex;gap:18px;padding:0 max(var(--gut),calc((100% - var(--shell))/2))}
.pan__item{scroll-snap-align:start}
.pan__item{flex:0 0 min(78vw,440px);padding:28px 26px 26px;min-height:300px;display:flex;flex-direction:column;gap:10px;color:var(--dtext)}
.pan__item svg{width:30px;height:30px;color:var(--amber)}
.pan__item h3{font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,1rem + 1.2vw,2rem);margin:6px 0 0;letter-spacing:-.02em}
.pan__item p{margin:0;color:var(--dtext-2);line-height:1.55}
.pan__item a{margin-top:auto;padding-top:14px;font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-lit);text-decoration:none;display:inline-flex;align-items:center;gap:9px;min-height:24px}
.pan__item a::before{content:"";width:16px;height:1.5px;background:var(--amber)}
.pan__no{font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.16em;color:var(--volt-lit)}
.pan__bar{display:flex;align-items:center;gap:14px;color:var(--dmute)}
.pan__bar i{flex:1;height:2px;background:var(--dline-2);position:relative;overflow:hidden;display:block}
.pan__bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--volt),var(--amber));transform-origin:left;transform:scaleX(var(--p,0))}
.pan__bar{display:flex;align-items:center;gap:14px;color:var(--dmute);margin-top:4px}
@media (max-width:760px){.pan__item{flex-basis:84vw}}

/* ---- 03 proofs ---- */
.proofs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;perspective:1200px}
.proof{padding:28px 26px 30px;color:var(--dtext);transform-style:preserve-3d;transition:transform .35s var(--ease)}
.proof>*{transform:translateZ(24px)}
.proof__no{display:block;font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.16em;color:var(--volt-lit);margin-bottom:12px}
.proof h3{font-family:var(--disp);font-weight:700;font-size:1.3rem;margin:0 0 10px;letter-spacing:-.02em}
.proof p{margin:0;color:var(--dtext-2);line-height:1.55}

/* ---- 04 pipeline ---- */
.pipe{position:relative;padding-top:60px}
.pipe__line{position:absolute;left:0;right:0;top:40px;width:100%;height:40px;overflow:visible}
.pipe__ghost{fill:none;stroke:var(--dline-2);stroke-width:2}
.pipe__draw{fill:none;stroke:var(--amber);stroke-width:2;stroke-dasharray:1200;stroke-dashoffset:calc(1200 - 1200 * var(--p,0));filter:drop-shadow(0 0 6px var(--amber))}
.pipe__pulse{position:absolute;top:56px;left:0;width:10px;height:10px;background:var(--amber);box-shadow:0 0 16px var(--amber);transform:translate(-50%,-50%) rotate(45deg);left:calc(var(--p,0) * 100%);opacity:calc(var(--p,0) * 1.5)}
.pipe__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:none}
.pipe__steps li{position:relative;padding:34px 20px 24px;color:var(--dtext)}
.pipe__node{position:absolute;left:50%;top:-20px;width:14px;height:14px;transform:translate(-50%,0) rotate(45deg);background:var(--deep);box-shadow:inset 0 0 0 2px var(--dline-2);transition:background .3s,box-shadow .3s}
.pipe__steps li.lit .pipe__node{background:var(--amber);box-shadow:0 0 18px var(--amber)}
.pipe__steps li b{display:block;font-family:var(--disp);font-weight:700;font-size:1.1rem;margin-bottom:8px}
.pipe__steps li p{margin:0;color:var(--dtext-2);font-size:.95rem;line-height:1.55}
@media (max-width:900px){.pipe__steps{grid-template-columns:repeat(2,1fr)}.pipe__line,.pipe__pulse{display:none}.pipe{padding-top:0}.pipe__node{display:none}.pipe__steps li{padding-top:22px}}

/* ---- 05 showreel ---- */
.reel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--gut) 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;perspective:1400px}
.reel::-webkit-scrollbar{display:none}
.plate{position:relative;flex:0 0 min(80vw,620px);aspect-ratio:3/2;scroll-snap-align:center;clip-path:var(--cut);background:var(--void);text-decoration:none;color:var(--dtext);overflow:hidden;transform-style:preserve-3d;transition:transform .35s var(--ease)}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.plate:hover img{transform:scale(1.05)}
.plate::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--dline-2);clip-path:var(--cut);pointer-events:none;z-index:2;transition:box-shadow .25s}
.plate:hover::before{box-shadow:inset 0 0 0 2px var(--amber)}
.plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,14,.2),transparent 30%,transparent 50%,rgba(5,8,14,.9))}
.plate__cap{position:absolute;left:22px;right:22px;bottom:20px;z-index:1;display:grid;gap:6px}
.plate__cap .rd{color:var(--amber-lit)}
.plate__cap strong{font-family:var(--disp);font-weight:700;font-size:clamp(1rem,.9rem + .6vw,1.4rem);line-height:1.15;letter-spacing:-.015em}
.reel__foot{margin-top:18px}

/* ---- 06 tiers ---- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;perspective:1200px}
.tier{padding:26px 24px 24px;text-decoration:none;color:var(--dtext);display:grid;gap:6px;transform-style:preserve-3d;transition:transform .35s var(--ease)}
.tier>*{transform:translateZ(20px)}
.tier__k{color:var(--volt-lit)}
.tier b{font-family:var(--disp);font-weight:700;font-size:1.2rem}
.tier__n{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,1.4rem + 2vw,3rem);letter-spacing:-.03em;line-height:1;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.tier__n i{font-style:normal}
.tier .rd:last-child{color:var(--dmute)}
.tier--pick::before{box-shadow:inset 0 0 0 1.5px var(--amber)}
.tier--pick .tier__n{color:var(--amber-lit)}
.tiers__foot{margin:22px 0 0;color:var(--dtext-2);font-size:.95rem}
.tiers__foot a{color:var(--volt-lit)}

/* ---- 07 end ---- */
.shot--end{min-height:62vh;display:flex;align-items:center}
.shot__end{max-width:66ch}
.shot__end .acts{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 0}
.shot__fin{margin:48px 0 0;color:var(--dmute)}

/* ---- in writing: what you get / outside our control ---- */
.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.scope__col{padding:22px 22px 24px;clip-path:var(--cut-sm);background:var(--card);box-shadow:var(--lift);position:relative}
.scope__col::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber-ink)}
.scope__col--no::before{background:var(--volt-ink)}
.scope__col h3{margin:0 0 12px;font-family:var(--disp);font-weight:700;font-size:1.05rem;color:var(--ink);letter-spacing:.01em}
.scope__col ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.scope__col li{position:relative;padding-left:20px;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.scope__col li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--amber-ink);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.scope__col--no li::before{background:var(--volt-ink)}
.scope__note{margin:16px 0 0;font-size:.86rem;color:var(--mute);line-height:1.5}

/* v6: geo tiers on the home */
.tier .rd:last-child{line-height:1.5;letter-spacing:.02em;text-transform:none;font-size:.8rem}
.tier__n{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem)}

/* links inside prose must not restyle buttons; the rail slash is decorative but keep it legible */
.prose .btn--on,.band--dark .prose .btn--on{color:#120A02;padding:13px 22px;min-height:0}
.prose .btn--off,.band--dark .prose .btn--off{color:var(--dtext);padding:13px 22px;min-height:0}
.nav__rail .rail__sep{color:var(--mute)}

/* article figure */
.prose__fig{margin:0 0 28px}
.prose__fig img{display:block;width:100%;height:auto;margin:0;clip-path:var(--cut);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.single .pagebody .shell{max-width:min(var(--shell),100% - var(--gut)*2)}

/* no-WebGL home: the hero render stands in for the scene */
.nogl.home .poster::after{content:"";position:absolute;inset:0;background:url(img/hero.webp) right -4vw center/min(62vw,980px) auto no-repeat;opacity:.6;-webkit-mask-image:linear-gradient(90deg,transparent 46%,#000 72%);mask-image:linear-gradient(90deg,transparent 46%,#000 72%)}
@media (max-width:900px){.nogl.home .poster::after{display:none}}