/* ============================================================
   ACTION SCALE  —  actionscale.com
   Visual system: continuous near-black ground, inset rounded
   cards, light-weight display type, warm red glows.
   Motion budget (measured, matched): 0.3s / cubic-bezier(.4,0,.2,1)
   ============================================================ */

:root{
  /* ground: near-black with the faintest violet, so red glows read clean */
  --bg:#08070d;
  --bg-2:#0c0b13;
  --card:#12101b;
  --card-2:#181523;
  --card-3:#1f1b2d;

  --line:rgba(180,170,215,.10);
  --line-2:rgba(180,170,215,.18);
  --line-3:rgba(180,170,215,.28);

  --text:#efecf6;
  --text-2:#a9a2bd;
  --text-3:#736c88;

  /* brand */
  --red:#f05a62;
  --red-2:#ff8a90;
  --red-3:#c2303a;
  --red-soft:rgba(240,90,98,.12);
  --red-glow:rgba(240,90,98,.34);

  --blue:#5b7cff;
  --blue-2:#8aa1ff;
  --blue-soft:rgba(91,124,255,.12);

  --green:#3ddc97;
  --amber:#ffbb3d;

  --f-display:'Archivo', system-ui, -apple-system, sans-serif;
  --f-body:'Instrument Sans', system-ui, -apple-system, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, Menlo, monospace;

  --gut:clamp(10px, 1.4vw, 22px);      /* page edge gutter */
  --maxw:1320px;
  --pad:clamp(22px, 3.4vw, 60px);      /* inside-card padding */
  --gap:clamp(48px, 6vw, 104px);       /* between blocks */
  --r:20px;
  --r-lg:28px;
  --r-sm:12px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
a{color:inherit}
::selection{background:var(--red); color:#fff}

/* ---------- page rhythm ---------- */
.page{padding:var(--gut); display:grid; gap:var(--gap)}
.inner{max-width:var(--maxw); margin:0 auto; width:100%}
.shell{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  position:relative; overflow:hidden;
}
.plain{max-width:var(--maxw); margin:0 auto; width:100%; padding-inline:clamp(4px,2vw,28px)}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0; font-family:var(--f-display); letter-spacing:-.03em; line-height:1.08; text-wrap:balance}
h1{font-size:clamp(33px,4.4vw,58px); font-weight:500}
h2{font-size:clamp(27px,3.4vw,45px); font-weight:500}
h3{font-size:clamp(19px,1.8vw,24px); font-weight:600; letter-spacing:-.02em; line-height:1.22}
h4{font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.3}
p{margin:0}
.thin{font-weight:400}
.sub{font-size:clamp(14.5px,1.15vw,16.5px); line-height:1.62; color:var(--text-2); max-width:58ch}
.tiny{font-family:var(--f-mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-3)}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.red{color:var(--red-2)}

.center{text-align:center}
.center .sub{margin-inline:auto}
.sechead{display:grid; gap:16px; margin-bottom:clamp(30px,4vw,52px)}
.sechead h2{max-width:22ch}
.center.sechead h2{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--f-body); font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  padding:11px 20px; border-radius:9px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:focus-visible{outline:2px solid var(--red-2); outline-offset:3px}
.b-red{background:var(--red); color:#fff; box-shadow:0 6px 22px -8px var(--red-glow)}
.b-red:hover{background:var(--red-2); box-shadow:0 10px 30px -8px var(--red-glow)}
.b-blue{background:var(--blue); color:#fff}
.b-blue:hover{background:var(--blue-2)}
.b-ghost{background:rgba(255,255,255,.05); color:var(--text); border-color:var(--line-2)}
.b-ghost:hover{background:rgba(255,255,255,.1); border-color:var(--line-3)}
.b-dark{background:rgba(0,0,0,.35); color:#fff; border-color:rgba(255,255,255,.2)}
.b-dark:hover{background:rgba(0,0,0,.55)}
.b-sm{padding:8px 15px; font-size:13.5px; border-radius:8px}
.b-lg{padding:13px 26px; font-size:15.5px}
.btns{display:flex; flex-wrap:wrap; gap:10px}
.center .btns{justify-content:center}

/* ---------- announcement bar ---------- */
.ann{
  position:relative; overflow:hidden; border-radius:var(--r); border:1px solid var(--line);
  background:var(--card-2);
}
.ann::before{
  content:''; position:absolute; inset:-120% 20% auto 20%; height:260%;
  background:radial-gradient(50% 50% at 50% 0%, rgba(240,90,98,.42), transparent 70%); pointer-events:none;
}
.ann a{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap; padding:11px 18px; text-decoration:none; font-size:13.5px; color:var(--text);
}
.ann b{font-weight:600}
.ann .go{font-family:var(--f-mono); transition:transform .3s var(--ease)}
.ann a:hover .go{transform:translateX(4px)}
.ann .chip{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  background:var(--red); color:#fff; padding:3px 9px; border-radius:20px; font-weight:500;
}

/* ---------- floating nav pill ---------- */
.navwrap{position:sticky; top:var(--gut); z-index:200}
.nav{
  border-radius:var(--r); border:1px solid var(--line-2);
  background:rgba(18,16,27,.82); backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.navwrap.stuck .nav{background:rgba(10,9,16,.94); border-color:var(--line-3)}
.nav-in{display:flex; align-items:center; gap:22px; padding:10px 14px 10px 18px}

.logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; flex-shrink:0}
.logo svg{width:25px; height:25px; flex-shrink:0}
.logo span{font-family:var(--f-display); font-weight:700; font-size:16.5px; letter-spacing:-.03em; color:#fff}

.links{display:flex; align-items:center; gap:2px; margin-left:auto}
.links > a, .mbtn{
  font-family:var(--f-body); font-size:14px; font-weight:500; color:var(--text-2);
  text-decoration:none; padding:8px 12px; border-radius:8px; background:none; border:none;
  cursor:pointer; transition:color .3s var(--ease), background .3s var(--ease);
  display:inline-flex; align-items:center; gap:6px;
}
.links > a:hover,.mbtn:hover{color:#fff; background:rgba(255,255,255,.06)}
.links > a.on{color:#fff}
.mbtn::after{
  content:''; width:5px; height:5px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); transition:transform .3s var(--ease);
}
.navend{display:flex; align-items:center; gap:8px; margin-left:12px; padding-left:14px; border-left:1px solid var(--line)}

.burger{display:none; margin-left:auto; width:38px; height:34px; border:1px solid var(--line-2); border-radius:9px; background:none; cursor:pointer; align-items:center; justify-content:center}
.burger i{display:block; width:15px; height:1.5px; background:var(--text); position:relative}
.burger i::before,.burger i::after{content:''; position:absolute; left:0; width:15px; height:1.5px; background:var(--text)}
.burger i::before{top:-5px} .burger i::after{top:5px}

/* mega */
.mwrap{position:relative}
.mwrap:hover .mbtn,.mwrap:focus-within .mbtn,.mwrap.menuopen .mbtn{color:#fff; background:rgba(255,255,255,.06)}
.mwrap:hover .mbtn::after,.mwrap:focus-within .mbtn::after,.mwrap.menuopen .mbtn::after{transform:translateY(1px) rotate(225deg)}
.mega{
  position:absolute; top:calc(100% + 12px); left:50%; width:min(720px,86vw);
  transform:translateX(-50%) translateY(-6px);
  background:var(--card-2); border:1px solid var(--line-3); border-radius:var(--r); padding:20px;
  display:grid; grid-template-columns:1fr 1fr .95fr; gap:20px; z-index:210;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.mwrap:hover .mega,.mwrap:focus-within .mega{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0)}
.mega h6{margin:0 0 10px; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); font-weight:500}
.mcol{display:grid; gap:1px; align-content:start}
.mcol a{display:block; padding:8px 10px; border-radius:8px; font-size:13.5px; font-weight:500; color:var(--text-2); text-decoration:none; line-height:1.35; transition:background .3s var(--ease), color .3s var(--ease)}
.mcol a i{display:block; font-style:normal; font-size:11.5px; color:var(--text-3); font-weight:400; margin-top:2px}
.mcol a:hover{background:rgba(255,255,255,.06); color:#fff}
.mpromo{background:var(--red-soft); border:1px solid rgba(240,90,98,.26); border-radius:var(--r-sm); padding:16px; display:flex; flex-direction:column; gap:9px}
.mpromo p{font-size:12.5px; color:var(--text-2); line-height:1.5}
.mpromo .btn{margin-top:auto}

@media (max-width:1260px){
  .burger{display:flex}
  .links{
    position:absolute; left:0; right:0; top:calc(100% + 10px); margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--card-2); border:1px solid var(--line-2); border-radius:var(--r);
    padding:12px; max-height:min(72vh,620px); overflow-y:auto;
  }
  .links[hidden]{display:none}
  .links > a,.mbtn{padding:12px 10px; font-size:15.5px; border-radius:8px; justify-content:space-between}
  .navend{margin:12px 0 0; padding:12px 0 0; border-left:none; border-top:1px solid var(--line); flex-direction:column; align-items:stretch}
  .navend .btn{justify-content:center}
  .mwrap{display:block}
  .mega{position:static; width:auto; transform:none; opacity:1; visibility:visible; pointer-events:auto;
        background:transparent; border:none; box-shadow:none; padding:4px 0 10px; grid-template-columns:1fr; gap:12px; display:none}
  .mwrap.open .mega{display:grid}
  .mcol a{background:rgba(255,255,255,.035)}
}

/* ---------- hero ---------- */
.hero{
  border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; position:relative;
  background:linear-gradient(135deg, #16101c 0%, #0d0b14 46%, #0a0910 100%);
  min-height:clamp(500px,54vw,620px); display:flex; align-items:center;
}
.hero::before{
  content:''; position:absolute; inset:-30% -10% -30% 30%; pointer-events:none; z-index:1;
  background:
    radial-gradient(42% 52% at 72% 42%, rgba(240,90,98,.40), transparent 68%),
    radial-gradient(30% 34% at 88% 24%, rgba(255,140,60,.22), transparent 70%);
}
.hero-in{position:relative; z-index:3; padding:clamp(28px,4.4vw,64px); padding-bottom:clamp(110px,10vw,150px); width:min(62%,690px)}
@media (max-width:900px){ .hero-in{width:100%} }
.hero h1{max-width:24ch}
.hero .sub{margin-top:20px; max-width:46ch}
.hero .btns{margin-top:26px}
.hero-note{margin-top:18px; font-family:var(--f-mono); font-size:11.5px; color:var(--text-3)}

/* hero visual slot (video goes here later) */
.hero-vis{
  position:absolute; z-index:2; right:-4%; top:50%; transform:translateY(-50%);
  width:clamp(300px,46%,620px); aspect-ratio:1/1; pointer-events:none;
  opacity:.95;
}
@media (max-width:900px){ .hero-vis{position:relative; right:auto; top:auto; transform:none; width:100%; margin:0 auto; opacity:.5} }
.hero-foot{
  position:absolute; z-index:3; left:clamp(28px,4.4vw,64px); bottom:clamp(20px,2.6vw,34px);
  display:flex; align-items:center; gap:clamp(16px,2.4vw,34px); flex-wrap:wrap; max-width:calc(100% - 60px);
}
.hero-foot .cap{font-size:12px; color:var(--text-3); max-width:15ch; line-height:1.4}
.plat{display:flex; align-items:center; gap:clamp(14px,2vw,28px); flex-wrap:wrap}
.plat span{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-display); font-weight:600; font-size:14px; color:var(--text-2); letter-spacing:-.02em; white-space:nowrap}
.plat span i{width:20px; height:20px; border-radius:5px; display:grid; place-items:center; font-style:normal; font-family:var(--f-display); font-weight:800; font-size:9px; color:#fff}

/* ---------- tab rail + canvas ---------- */
.rail{display:grid; grid-template-columns:250px 1fr; gap:clamp(22px,3vw,48px); align-items:start}
@media (max-width:920px){ .rail{grid-template-columns:1fr} }
.railnav{display:grid; gap:2px}
.railnav button{
  text-align:left; background:none; border:none; cursor:pointer; font-family:var(--f-body);
  padding:14px 16px; border-radius:var(--r-sm); border-left:2px solid transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease);
  display:grid; gap:4px;
}
.railnav button b{font-size:14.5px; font-weight:600; color:var(--text-2); transition:color .3s var(--ease)}
.railnav button i{font-style:normal; font-size:13px; color:var(--text-3); line-height:1.4}
.railnav button:hover b{color:#fff}
.railnav button[aria-selected="true"]{background:var(--card-2); border-left-color:var(--red)}
.railnav button[aria-selected="true"] b{color:#fff}
@media (max-width:920px){
  .railnav{grid-auto-flow:column; grid-auto-columns:minmax(190px,1fr); overflow-x:auto; gap:8px; padding-bottom:6px}
  .railnav button{border-left:none; border-bottom:2px solid transparent; min-width:190px}
  .railnav button[aria-selected="true"]{border-bottom-color:var(--red)}
}
.railpanel[hidden]{display:none}

/* ---------- workflow canvas ---------- */
.canvas{
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2);
  overflow:hidden;
}
.cbar{display:flex; align-items:center; gap:9px; padding:10px 15px; border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:11px; color:var(--text-3); letter-spacing:.05em}
.dots{display:flex; gap:5px}
.dots i{width:8px; height:8px; border-radius:50%; background:var(--card-3); display:block}
.dots i:first-child{background:var(--red)}
.live{margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--green)}
.live::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(61,220,151,.18)}
.cbody{padding:clamp(14px,2.4vw,28px); overflow-x:auto}
.cbody svg{min-width:720px; width:100%; height:auto}

.edge{fill:none; stroke:var(--line-3); stroke-width:1.4}
.pulse{fill:none; stroke:var(--red-2); stroke-width:2.2; stroke-linecap:round;
       stroke-dasharray:9 91; stroke-dashoffset:100;
       filter:drop-shadow(0 0 4px var(--red-glow));
       animation:flow 3.4s linear infinite}
.pulse.d2{animation-delay:.45s} .pulse.d3{animation-delay:.9s} .pulse.d4{animation-delay:1.35s} .pulse.d5{animation-delay:1.8s}
@keyframes flow{ to{ stroke-dashoffset:0 } }
.nbox{fill:var(--card-2); stroke:var(--line-3); stroke-width:1.1}
.nlab{font-family:var(--f-body); font-size:14px; font-weight:600; fill:var(--text)}
.nsub{font-family:var(--f-mono); font-size:10.5px; fill:var(--text-3); letter-spacing:.06em}
.nchip{fill:var(--red-soft); stroke:rgba(240,90,98,.4); stroke-width:1}
.ng{animation:onoff 3.4s ease-in-out infinite}
.ng.d2{animation-delay:.45s} .ng.d3{animation-delay:.9s} .ng.d4{animation-delay:1.35s} .ng.d5{animation-delay:1.8s}
@keyframes onoff{ 0%,64%,100%{opacity:.6} 16%,44%{opacity:1} }
@media (prefers-reduced-motion:reduce){
  .pulse{animation:none; stroke-dasharray:none; stroke-dashoffset:0; opacity:.5}
  .ng{animation:none; opacity:1}
}

/* ---------- 3 proof pills ---------- */
.pills{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:860px){ .pills{grid-template-columns:1fr} }
.pill{
  display:grid; grid-template-columns:38px 1fr; gap:14px; align-items:center;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:16px 18px;
  background:var(--card); transition:border-color .3s var(--ease), background .3s var(--ease);
}
.pill:hover{border-color:var(--line-3); background:var(--card-2)}
.pill .ic{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--red-soft); border:1px solid rgba(240,90,98,.28); color:var(--red-2)}
.pill .ic svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.pill p{font-size:13.5px; line-height:1.5; color:var(--text-2)}
.pill p b{color:#fff; font-weight:600}

/* ---------- icon tile grid ---------- */
.tiles{
  display:flex; flex-direction:column; gap:12px; align-items:center;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.tilerow{display:flex; gap:12px; width:max-content; animation:drift 60s linear infinite}
.tilerow.rev{animation-name:driftback; animation-duration:74s}
.tiles:hover .tilerow{animation-play-state:paused}
@keyframes drift{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@keyframes driftback{ from{transform:translate3d(-50%,0,0)} to{transform:translate3d(0,0,0)} }
@media (prefers-reduced-motion:reduce){ .tilerow{animation:none} }
.tile{
  width:58px; height:58px; border-radius:14px; flex-shrink:0;
  display:grid; place-items:center; background:var(--card-2); border:1px solid var(--line);
  font-family:var(--f-display); font-weight:800; font-size:13px; letter-spacing:-.03em;
  color:var(--text-2);
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.tile:hover{border-color:var(--line-3); transform:translateY(-3px); color:#fff}

/* ---------- bento ---------- */
.bento{display:grid; grid-template-columns:1.32fr 1fr; grid-auto-rows:auto; gap:16px}
@media (max-width:920px){ .bento{grid-template-columns:1fr} }
.bcard{
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; gap:14px;
  transition:border-color .3s var(--ease);
}
.bcard:hover{border-color:var(--line-2)}
.bcard p{font-size:14.5px; color:var(--text-2); line-height:1.6}
.bcard.tall{grid-row:span 2}
.bcard.wide{grid-column:1 / -1}
@media (max-width:920px){ .bcard.tall{grid-row:auto} }
.bvis{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg-2);
  padding:14px; display:grid; gap:8px; margin-top:auto;
}

/* ---------- ui mockup bits ---------- */
.row{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02)}
.row .t{font-size:12.5px; font-weight:600; color:var(--text); line-height:1.3}
.row .s{display:block; font-family:var(--f-mono); font-size:10px; color:var(--text-3); margin-top:3px; letter-spacing:.04em}
.tag{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; padding:4px 8px; border-radius:20px; white-space:nowrap}
.tag.ok{background:rgba(61,220,151,.13); color:var(--green); border:1px solid rgba(61,220,151,.3)}
.tag.no{background:rgba(255,187,61,.13); color:var(--amber); border:1px solid rgba(255,187,61,.3)}
.tag.hot{background:var(--red-soft); color:var(--red-2); border:1px solid rgba(240,90,98,.32)}
.tag.info{background:var(--blue-soft); color:var(--blue-2); border:1px solid rgba(91,124,255,.32)}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.stat{border:1px solid var(--line); border-radius:10px; padding:11px; background:rgba(255,255,255,.02)}
.stat b{display:block; font-family:var(--f-display); font-size:19px; font-weight:700; letter-spacing:-.03em; color:#fff; line-height:1}
.stat span{display:block; font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-top:5px}
.bars{display:flex; align-items:flex-end; gap:5px; height:64px}
.bars i{flex:1; border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--red),rgba(240,90,98,.22)); display:block}

/* ---------- the one hot card ---------- */
.hot{
  border-radius:var(--r-lg); overflow:hidden; position:relative; border:1px solid rgba(255,120,80,.3);
  background:linear-gradient(118deg, #ff3a2a 0%, #ff5a2e 32%, #c9142f 72%, #7d0a24 100%);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.4vw,52px);
  padding:clamp(26px,3.6vw,54px); align-items:center;
}
@media (max-width:920px){ .hot{grid-template-columns:1fr} }
.hot h2,.hot h3{color:#fff}
.hot p{color:rgba(255,255,255,.88); font-size:15px; line-height:1.6}
.hot .ticks li{color:rgba(255,255,255,.92)}
.hot .ticks li b{color:#fff}
.hot .ticks li::before{background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.5); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")}
.hotpanel{background:rgba(10,6,14,.72); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:16px; display:grid; gap:9px}

/* ---------- tick list ---------- */
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.ticks li{position:relative; padding-left:29px; font-size:14.5px; color:var(--text-2); line-height:1.55}
.ticks li b{color:var(--text); font-weight:600}
.ticks li::before{
  content:''; position:absolute; left:0; top:3px; width:17px; height:17px; border-radius:50%;
  background:var(--red-soft); border:1px solid rgba(240,90,98,.42);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8a90' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:10px; background-position:center; background-repeat:no-repeat;
}
.ticks.two{grid-template-columns:1fr 1fr; gap:12px clamp(18px,2.4vw,40px)}
@media (max-width:700px){ .ticks.two{grid-template-columns:1fr} }

/* ---------- case cards ---------- */
.cases{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:880px){ .cases{grid-template-columns:1fr} }
.case{
  border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.6vw,34px);
  background:linear-gradient(158deg, var(--card-2), var(--card)); display:flex; flex-direction:column; gap:18px;
  transition:border-color .3s var(--ease);
}
.case:hover{border-color:var(--line-2)}
.case .badge{
  align-self:flex-start; font-family:var(--f-display); font-weight:800; font-size:19px; letter-spacing:-.03em;
  color:#fff; opacity:.9;
}
.case h3{font-weight:500; font-size:clamp(17px,1.7vw,21px); line-height:1.32}
.case blockquote{margin:0; font-size:14.5px; color:var(--text-2); line-height:1.65}
.case .facts{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.case .facts b{display:block; font-family:var(--f-display); font-size:19px; font-weight:700; letter-spacing:-.03em; color:#fff; line-height:1}
.case .facts span{display:block; font-size:11.5px; color:var(--text-3); margin-top:5px; line-height:1.35}
.case .who{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line)}
.case .who .av{width:36px; height:36px; border-radius:9px; flex-shrink:0; display:grid; place-items:center; background:var(--red-soft); border:1px solid rgba(240,90,98,.3); font-family:var(--f-display); font-weight:800; font-size:13px; color:var(--red-2)}
.case .who .nm{font-size:13.5px; font-weight:600; color:var(--text)}
.case .who .rl{display:block; font-family:var(--f-mono); font-size:10.5px; color:var(--text-3); letter-spacing:.05em; margin-top:2px}

/* ---------- enterprise 2-col list ---------- */
.entlist{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; margin-top:clamp(26px,3vw,40px)}
.entrow{background:var(--card); padding:20px clamp(18px,2.2vw,28px); display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr); gap:clamp(16px,2.4vw,36px); align-items:start}
@media (max-width:760px){ .entrow{grid-template-columns:1fr; gap:8px} }
.entrow h4{color:#fff}
.entrow p{font-size:14px; color:var(--text-2); line-height:1.6}

/* ---------- horizontal testimonial scroller ---------- */
.tscroll{
  display:flex; gap:16px; overflow-x:auto; padding:4px 0 14px; scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.tscroll::-webkit-scrollbar{height:6px}
.tscroll::-webkit-scrollbar-thumb{background:var(--card-3); border-radius:10px}
.tcard{
  flex:0 0 clamp(280px,31%,380px); scroll-snap-align:start;
  border:1px solid var(--line); border-radius:var(--r); padding:22px; background:var(--card);
  display:flex; flex-direction:column; gap:14px; transition:border-color .3s var(--ease)
}
.tcard:hover{border-color:var(--line-2)}
.tcard .q{font-family:var(--f-display); font-weight:600; font-size:15.5px; line-height:1.36; letter-spacing:-.015em; color:#fff}
.tcard .a{font-size:13.5px; color:var(--text-2); line-height:1.6}
.tcard .w{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line)}
.tcard .w .av{width:30px; height:30px; border-radius:8px; flex-shrink:0; display:grid; place-items:center; background:rgba(255,255,255,.05); border:1px solid var(--line-2); color:var(--text-3)}
.tcard .w .av svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tcard .w .rl{font-family:var(--f-mono); font-size:10.5px; color:var(--text-3); letter-spacing:.04em; line-height:1.35}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:21px 44px 21px 0; position:relative;
  font-family:var(--f-display); font-weight:600; font-size:clamp(16px,1.5vw,19px); letter-spacing:-.02em; line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; position:absolute; right:8px; top:50%; width:10px; height:10px; border-right:2px solid var(--red-2); border-bottom:2px solid var(--red-2); transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .ans{padding:0 56px 24px 0; font-size:14.5px; color:var(--text-2); line-height:1.66; max-width:72ch}

/* ---------- final cta ---------- */
.cta{
  border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; position:relative;
  background:linear-gradient(170deg, var(--card-2), var(--bg)); padding:clamp(40px,6vw,86px) var(--pad); text-align:center;
}
.cta::before{content:''; position:absolute; inset:auto -10% -70% -10%; height:130%; background:radial-gradient(50% 60% at 50% 100%, rgba(240,90,98,.26), transparent 66%); pointer-events:none}
.cta > *{position:relative; z-index:2}
.cta h2{max-width:20ch; margin-inline:auto}
.cta .sub{margin:20px auto 0}
.cta .btns{margin-top:28px; justify-content:center}

/* ---------- forms ---------- */
.form{display:grid; gap:15px}
.f{display:grid; gap:7px}
.f label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3)}
.f input,.f select,.f textarea{
  font-family:var(--f-body); font-size:15px; color:var(--text);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; width:100%;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.f textarea{min-height:118px; resize:vertical; line-height:1.55}
.f input::placeholder,.f textarea::placeholder{color:var(--text-3)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft)}
.f select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%); background-position:calc(100% - 19px) 20px,calc(100% - 14px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:15px}
@media (max-width:640px){ .f2{grid-template-columns:1fr} }
.note{font-size:12.5px; color:var(--text-3); line-height:1.55}

/* ---------- footer ---------- */
.foot{border-radius:var(--r-lg); border:1px solid var(--line); background:var(--card); padding:clamp(34px,4vw,56px) var(--pad) 26px}
.fgrid{display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:34px}
@media (max-width:1000px){ .fgrid{grid-template-columns:1fr 1fr 1fr; gap:30px} }
@media (max-width:620px){ .fgrid{grid-template-columns:1fr 1fr} }
.foot h5{margin:0 0 14px; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); font-weight:500}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.foot a{font-size:13.5px; color:var(--text-2); text-decoration:none; transition:color .3s var(--ease)}
.foot a:hover{color:#fff}
.fblurb{font-size:13.5px; color:var(--text-2); max-width:34ch; margin-top:14px; line-height:1.6}
.soc{display:flex; gap:8px; margin-top:18px}
.soc a{width:32px; height:32px; border-radius:8px; display:grid; place-items:center; border:1px solid var(--line); color:var(--text-2); transition:all .3s var(--ease)}
.soc a:hover{border-color:var(--red); color:#fff; background:var(--red-soft)}
.soc svg{width:15px; height:15px; fill:currentColor}
.fbot{margin-top:44px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-family:var(--f-mono); font-size:11px; color:var(--text-3); letter-spacing:.03em}

/* ---------- reveal (matched to their 0.3s budget) ---------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.in{opacity:1; transform:none}
.d1{transition-delay:.06s} .d2{transition-delay:.12s} .d3{transition-delay:.18s} .d4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1!important; transform:none!important; transition:none} }
.no-js .rv{opacity:1; transform:none}

/* ---------- inner page header ---------- */
.phead{
  border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; position:relative;
  background:linear-gradient(135deg,#15101b,#0a0910); padding:clamp(34px,4.6vw,66px) var(--pad);
}
.phead::before{content:''; position:absolute; inset:-60% 40% auto -10%; height:200%; background:radial-gradient(40% 40% at 30% 30%, rgba(240,90,98,.24), transparent 68%); pointer-events:none}
.phead > *{position:relative; z-index:2}
.phead .sub{margin-top:20px}

.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:start}
@media (max-width:900px){ .two{grid-template-columns:1fr} }
.kv{display:grid; grid-template-columns:auto 1fr; gap:12px 26px; font-size:14.5px}
.kv dt{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--text-3); padding-top:4px}
.kv dd{margin:0; color:var(--text-2); line-height:1.6}
@media (max-width:620px){ .kv{grid-template-columns:1fr; gap:4px 0} .kv dd{margin-bottom:14px} }
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); border:1px solid var(--line-2); border-radius:30px; padding:6px 13px; background:rgba(255,255,255,.03); align-self:flex-start}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:1000px){ .grid4{grid-template-columns:repeat(2,1fr)} .grid3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid3,.grid4{grid-template-columns:1fr} }
.steps{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.step{background:var(--card); padding:22px clamp(18px,2.2vw,26px); display:grid; grid-template-columns:44px 1fr; gap:18px; align-items:start; transition:background .3s var(--ease)}
.step:hover{background:var(--card-2)}
.step .n{font-family:var(--f-mono); font-size:12.5px; font-weight:700; color:var(--red-2); padding-top:3px; letter-spacing:.05em}
.step p{font-size:14px; color:var(--text-2); line-height:1.6; margin-top:8px}

/* ---------- hero core graphic (placeholder for the Higgsfield loop) ---------- */
.core{width:100%; height:100%; position:relative; display:grid; place-items:center}
.core svg{width:100%; height:100%; overflow:visible}
.ring{fill:none; stroke:var(--line-3); stroke-width:1}
.ring.hot{stroke:rgba(240,90,98,.55)}
.spin1{animation:spin 28s linear infinite; transform-origin:center}
.spin2{animation:spin 44s linear infinite reverse; transform-origin:center}
.spin3{animation:spin 19s linear infinite; transform-origin:center}
@keyframes spin{ to{ transform:rotate(360deg) } }
.orb{animation:breathe 4.2s ease-in-out infinite}
@keyframes breathe{ 0%,100%{opacity:.85; r:38} 50%{opacity:1; r:44} }
.spark{animation:twinkle 2.6s ease-in-out infinite}
.spark.s2{animation-delay:.6s} .spark.s3{animation-delay:1.2s} .spark.s4{animation-delay:1.8s}
@keyframes twinkle{ 0%,100%{opacity:.25} 50%{opacity:1} }
@media (prefers-reduced-motion:reduce){
  .spin1,.spin2,.spin3,.orb,.spark{animation:none}
}

/* ---------- circular glow graphic (reliability block) ---------- */
.glowdisc{
  width:clamp(160px,20vw,230px); aspect-ratio:1; border-radius:50%; margin-inline:auto;
  display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 50% 50%, rgba(240,90,98,.30), rgba(240,90,98,.05) 58%, transparent 70%);
  border:1px solid rgba(240,90,98,.24);
}
.glowdisc::before{
  content:''; position:absolute; inset:14%; border-radius:50%; border:1px solid var(--line-2);
}
.glowdisc svg{width:34%; height:34%; stroke:var(--red-2); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; position:relative}

/* ============================================================
   V4 — mega-menu hover bridge, hero logo flipper,
   tile recipe (dark fill + gradient border on hover),
   3D tilt grid that straightens on scroll
   ============================================================ */

/* ---------- mega menu: kill the dead zone between button and panel ---------- */
.mwrap{padding-bottom:0}
.mega{
  top:100%;                      /* no gap to fall through */
  margin-top:0;
  padding-top:32px;              /* the bridge lives inside the panel */
  background:transparent; border:none; box-shadow:none;
  display:block;                 /* inner sheet does the grid */
}
.msheet{
  background:var(--card-2); border:1px solid var(--line-3); border-radius:var(--r);
  padding:20px; display:grid; grid-template-columns:1fr 1fr .95fr; gap:20px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
}
.mwrap:hover .mega,.mwrap:focus-within .mega,.mwrap.menuopen .mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
@media (max-width:1260px){
  .mega{padding-top:4px; top:auto}
  .msheet{background:transparent; border:none; box-shadow:none; padding:0; grid-template-columns:1fr; gap:12px}
}

/* ---------- hero platform strip ---------- */
.hero-foot{
  position:absolute; z-index:3; left:clamp(28px,4.4vw,64px); right:clamp(28px,4.4vw,64px);
  bottom:clamp(22px,2.8vw,38px); display:flex; align-items:center; gap:clamp(18px,2.6vw,38px);
  flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line);
}
.hero-foot .cap{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); max-width:none; line-height:1.4;
}

/* logo flipper */
.flipper{display:flex; align-items:center; gap:clamp(14px,2.2vw,34px); flex-wrap:wrap}
.slot{perspective:420px; height:26px; display:flex; align-items:center}
.face{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  transform-origin:center center; backface-visibility:hidden;
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.slot.flip .face{transform:rotateX(-92deg); opacity:0}
.face .mark{
  width:22px; height:22px; border-radius:6px; display:grid; place-items:center; flex-shrink:0;
  background:var(--card-3); border:1px solid var(--line-2);
  font-family:var(--f-display); font-weight:800; font-size:9.5px; color:var(--text-2); letter-spacing:-.02em;
}
.face .mark img{width:14px; height:14px; object-fit:contain}
.face .nm{font-family:var(--f-display); font-weight:600; font-size:13.5px; letter-spacing:-.02em; color:var(--text-2)}
@media (prefers-reduced-motion:reduce){ .face{transition:none} .slot.flip .face{transform:none; opacity:1} }

/* ---------- tile recipe, lifted from their measured values ---------- */
.tile{
  position:relative; width:60px; height:60px; border-radius:14px; flex-shrink:0;
  display:grid; place-items:center; isolation:isolate;
  border:2px solid rgba(255,255,255,.14); background:transparent;
  font-family:var(--f-display); font-weight:800; font-size:13px; letter-spacing:-.03em;
  color:var(--text-2);
  transition:border-color .2s var(--ease), color .2s var(--ease);
}
.tile::before{
  content:''; position:absolute; inset:-2px; z-index:-2; border-radius:inherit; opacity:0;
  background:linear-gradient(90deg, #ff8a90 24%, #f05a62 68%);
  transition:opacity .2s var(--ease); pointer-events:none;
}
.tile::after{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--bg-2); pointer-events:none;
}
.tile:hover{border-color:transparent; color:#fff}
.tile:hover::before{opacity:1}
.tile img{width:26px; height:26px; object-fit:contain}

/* ---------- tilt grid: enters at an angle, straightens in view ---------- */
.tiltwrap{perspective:1400px; perspective-origin:50% 0%; padding-block:10px}
.tiltgrid{
  transform:rotateX(34deg) scale(.88) translateY(26px);
  opacity:.35; transform-origin:50% 100%;
  transition:transform 1.15s var(--ease), opacity .9s var(--ease);
  will-change:transform, opacity;
}
.tiltgrid.flat{transform:none; opacity:1}
@media (prefers-reduced-motion:reduce){
  .tiltgrid{transform:none; opacity:1; transition:none}
}

/* ============================================================
   V5 — richer hero ground, then flat monochrome marks on it,
   changing on a smooth vertical reel
   ============================================================ */

/* ---------- hero ground: layered blooms, heavily blurred ---------- */
.hero{background:#0a0812}
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(38% 46% at 84% 62%, rgba(255,120,150,.30), transparent 64%),
    radial-gradient(30% 40% at 96% 34%, rgba(255,70,80,.26),  transparent 66%),
    radial-gradient(44% 52% at 58% 96%, rgba(190,120,200,.20), transparent 66%),
    radial-gradient(52% 60% at 10% 12%, rgba(40,44,110,.42),  transparent 68%),
    linear-gradient(118deg, #10111f 0%, #0c0a15 44%, #120a14 100%);
  filter:blur(6px); transform:scale(1.06);
}
/* soft floor wash so the mark row sits in light, like theirs */
.hero::after{
  content:''; position:absolute; inset:auto 0 0 0; height:44%; z-index:1; pointer-events:none;
  background:linear-gradient(0deg, rgba(226,178,205,.14), rgba(160,120,180,.05) 42%, transparent 100%);
  filter:blur(22px);
}
.hero-in{position:relative; z-index:3}
.hero-vis,.hero-foot{z-index:3}

/* ---------- hero mark row: no chips, monochrome, dissolved ---------- */
.hero-foot{border-top:1px solid rgba(255,255,255,.07)}
.hero-foot .cap{color:rgba(255,255,255,.34)}

.flipper{display:flex; align-items:center; gap:clamp(22px,3.4vw,52px); flex-wrap:nowrap; overflow:hidden}

/* each slot is a window; the reel inside slides upward */
.slot{
  position:relative; height:30px; overflow:hidden; flex:0 0 auto;
  min-width:clamp(96px,10vw,140px);
}
.reel{
  display:flex; flex-direction:column;
  transition:transform .85s cubic-bezier(.32,.72,.24,1);
  will-change:transform;
}
.reel.snap{transition:none}
.cell{
  height:30px; display:flex; align-items:center; gap:9px; flex:0 0 30px;
  white-space:nowrap;
}
.cell .nm{
  font-family:var(--f-display); font-weight:700; font-size:clamp(14px,1.15vw,16.5px);
  letter-spacing:-.025em; color:rgba(233,228,245,.62);
}
.cell img{
  height:20px; width:auto; max-width:104px; object-fit:contain;
  opacity:.6; filter:grayscale(1) brightness(1.9) contrast(.9);
}
@media (prefers-reduced-motion:reduce){ .reel{transition:none} }
@media (max-width:760px){
  .flipper{gap:20px}
  .slot{min-width:88px; height:26px}
  .cell{height:26px; flex-basis:26px}
}

/* ============================================================
   V6 — block 2 rebuilt: no card around the canvas, big two-tone
   tabs with a red bar and fading highlight, dotted grid ground
   ============================================================ */

.rail{grid-template-columns:clamp(280px,26vw,360px) 1fr; gap:clamp(20px,2.6vw,44px)}
@media (max-width:980px){ .rail{grid-template-columns:1fr} }

/* thin full-height rail line, like theirs */
.railnav{
  position:relative; gap:0; padding-left:1px;
  border-left:1px solid rgba(255,255,255,.10);
}
@media (max-width:980px){ .railnav{border-left:none; padding-left:0} }

.railnav button{
  position:relative; background:none; border:none; border-left:none; border-radius:0;
  padding:26px 22px 26px 26px; text-align:left; cursor:pointer;
  font-family:var(--f-body); display:grid; gap:8px;
  transition:background .3s var(--ease);
}
/* active: red bar + highlight that fades out to the right */
.railnav button::before{
  content:''; position:absolute; left:-1px; top:0; bottom:0; width:3px;
  background:var(--red); opacity:0; transition:opacity .3s var(--ease);
}
.railnav button::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(90deg, rgba(240,90,98,.13), rgba(240,90,98,.02) 62%, transparent);
  transition:opacity .3s var(--ease); pointer-events:none;
}
.railnav button{isolation:isolate}
.railnav button[aria-selected="true"]::before,
.railnav button[aria-selected="true"]::after{opacity:1}

.railnav b{
  font-family:var(--f-display); font-weight:600; font-size:clamp(19px,1.8vw,24px);
  letter-spacing:-.025em; line-height:1.12; color:rgba(233,228,245,.52);
  transition:color .3s var(--ease);
}
.railnav b em{font-style:normal; font-weight:400; color:rgba(233,228,245,.34)}
.railnav button:hover b{color:rgba(255,255,255,.8)}
.railnav button[aria-selected="true"] b{color:#fff}
.railnav i{
  font-style:normal; font-size:15px; line-height:1.45; color:var(--text-3);
  transition:color .3s var(--ease);
}
.railnav button[aria-selected="true"] i{color:var(--text-2)}

@media (max-width:980px){
  .railnav{grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); overflow-x:auto; padding-bottom:8px}
  .railnav button{padding:18px; min-width:230px}
  .railnav button::before{left:0; right:0; top:auto; bottom:0; width:auto; height:3px}
}

/* ---------- canvas: no card, no chrome, dotted ground ---------- */
.canvas{
  border:none; background:none; border-radius:0; overflow:visible;
}
.cbody{
  padding:0; overflow-x:auto; overflow-y:hidden;
  /* the 22px dot grid that used to sit here is gone; the sky's own stars are the background */
  mask-image:radial-gradient(76% 80% at 50% 50%, #000 52%, transparent 96%);
  -webkit-mask-image:radial-gradient(76% 80% at 50% 50%, #000 52%, transparent 96%);
}
.cbody svg{min-width:900px}

/* node vocabulary */
.nbox{fill:#15121f; stroke:rgba(255,255,255,.13); stroke-width:1}
.ncirc{fill:#15121f; stroke:rgba(255,255,255,.13); stroke-width:1}
.nlab{font-family:var(--f-body); font-size:13.5px; font-weight:600; fill:rgba(240,236,250,.92)}
.nsub{font-family:var(--f-body); font-size:11.5px; fill:var(--text-3)}
.nedge{font-family:var(--f-body); font-size:10.5px; fill:var(--text-3)}
.edge{fill:none; stroke:rgba(255,255,255,.18); stroke-width:1.2}
.edash{fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.1; stroke-dasharray:3 4}
.port{fill:rgba(255,255,255,.34)}
.plus{fill:none; stroke:rgba(255,255,255,.26); stroke-width:1}
.plusi{stroke:rgba(255,255,255,.5); stroke-width:1.2; stroke-linecap:round}
.bolt{fill:var(--red)}

/* ---------- video panel for the last tab ---------- */
.vidslot{
  position:relative; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(150deg,#17121f,#0c0a13);
  border:1px solid var(--line); aspect-ratio:16/9; display:grid; place-items:center;
}
.vidslot iframe,.vidslot video{position:absolute; inset:0; width:100%; height:100%; border:0}
.vidslot .ph{display:grid; gap:14px; justify-items:center; text-align:center; padding:26px}
.vidslot .play{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center;
  background:var(--red-soft); border:1px solid rgba(240,90,98,.4);
}
.vidslot .play svg{width:22px; height:22px; fill:var(--red-2)}
.vidslot .ph p{font-size:14px; color:var(--text-3); max-width:36ch}

/* ============================================================
   V7 — integration grid rebuilt: barely-there tiles, real marks,
   offset second row, heavy fade on both axes
   ============================================================ */

.tiles{
  gap:clamp(14px,1.6vw,22px);
  mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.tilerow{gap:clamp(14px,1.6vw,22px)}
.tilerow.rev{margin-left:calc(clamp(58px,6vw,78px) / -2)}   /* half-tile offset, like theirs */

.tile{
  width:clamp(58px,6vw,78px); height:clamp(58px,6vw,78px);
  border-radius:clamp(14px,1.5vw,18px);
  border:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.018);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.tile::before{
  inset:-1px;
  background:linear-gradient(135deg, rgba(255,138,144,.85), rgba(240,90,98,.85));
}
.tile::after{background:#0d0b14}
.tile img{
  width:56%; height:56%; object-fit:contain; border-radius:22%;
  opacity:.92; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.tile:hover{transform:translateY(-3px)}
.tile:hover img{opacity:1}

/* gradient pill under the grid, their treatment in our red */
.b-grad{
  background:linear-gradient(95deg, #f05a62, #ff8a6b 58%, #c2303a);
  color:#fff; border:none; box-shadow:0 10px 30px -12px var(--red-glow);
}
.b-grad:hover{filter:brightness(1.08)}

/* tiles were washing out: lift the container, the mark, and the resting tilt state */
.tiltgrid{opacity:.6}
.tile{border-color:rgba(255,255,255,.09); background:rgba(255,255,255,.035)}
.tile::after{background:#131020}
.tile img{opacity:1; width:60%; height:60%}
.tiles{
  mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tilerow.rev{margin-left:0}


/* ============================================================
   V8 — hero reel is now pure CSS and mathematically endless:
   the cell list is duplicated exactly once and the track walks
   to -50%, so the loop point is identical to the start.
   ============================================================ */
.flipper{gap:clamp(26px,3.6vw,60px)}
.slot{height:34px; min-width:auto; overflow:hidden}
.reel{
  display:flex; flex-direction:column;
  animation:reelstep 21s var(--ease) infinite;
  transition:none;
}
.reel.r2{animation-delay:-5.25s}
.reel.r3{animation-delay:-10.5s}
.reel.r4{animation-delay:-15.75s}
.cell{height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:flex-start}
.cell img{
  height:26px; width:26px; object-fit:contain; border-radius:26%;
  opacity:.42; filter:grayscale(.55) brightness(1.15);
  transition:opacity .3s var(--ease), filter .3s var(--ease);
}
.hero-foot:hover .cell img{opacity:.85; filter:grayscale(0) brightness(1)}
@keyframes reelstep {
  0%, 14.166% { transform: translate3d(0,0,0) }
  16.667%, 30.833% { transform: translate3d(0,-8.3333%,0) }
  33.333%, 47.499% { transform: translate3d(0,-16.6667%,0) }
  50.000%, 64.166% { transform: translate3d(0,-25.0000%,0) }
  66.667%, 80.833% { transform: translate3d(0,-33.3333%,0) }
  83.333%, 97.499% { transform: translate3d(0,-41.6667%,0) }
  100% { transform: translate3d(0,-50%,0) }
}
@media (prefers-reduced-motion:reduce){ .reel{animation:none} }
@media (max-width:760px){
  .slot{height:30px} .cell{height:30px; flex-basis:30px}
  .cell img{height:22px; width:22px}
}

/* marquee: two copies, walk exactly half the track, forever */
.tilerow{animation:drift 58s linear infinite}
.tilerow.rev{animation:driftback 58s linear infinite}

/* ------------------------------------------------------------
   Marquee arithmetic, corrected.
   One copy of the set is only about as wide as the viewport, so a
   0 -> -50% walk over two copies runs out of content at the ends.
   Three copies walking exactly -33.3333% (= one copy) always keeps
   two copies to the right of the window. Seamless in both directions.
   ------------------------------------------------------------ */
@keyframes drift     { from { transform:translate3d(0,0,0) }            to { transform:translate3d(-33.3333%,0,0) } }
@keyframes driftback { from { transform:translate3d(-33.3333%,0,0) }    to { transform:translate3d(0,0,0) } }
.tilerow      { animation:drift 64s linear infinite }
.tilerow.rev  { animation:driftback 64s linear infinite }

/* the marks were dimmed past the point of being readable */
.cell img{ opacity:.62; filter:grayscale(.28) brightness(1.05) }
.hero-foot:hover .cell img{ opacity:1; filter:none }

/* ============================================================
   V9 — reel rebuilt on integer pixels.
   The percentage version drifted: -8.3333% of a 408px track is
   33.9998px, not 34px, and that error accumulated until the window
   straddled two cells. Fixed cell height + whole-pixel steps means
   the track can never land between cells.
   Cell 36px x 6 marks x 2 copies = 432px track; half = exactly 216px.
   Cycle 21s: each mark holds 3.0s, then a 0.5s move.
   ============================================================ */
.slot{height:36px; overflow:hidden}
.cell{height:36px; flex:0 0 36px; display:flex; align-items:center; justify-content:flex-start}
.cell img{height:28px; width:28px; border-radius:26%; object-fit:contain}

.reel{animation:reelpx 21s cubic-bezier(.45,0,.2,1) infinite}
.reel.r2{animation-delay:-5.25s}
.reel.r3{animation-delay:-10.5s}
.reel.r4{animation-delay:-15.75s}

@keyframes reelpx{
  0%,      14.28% { transform:translate3d(0,0,0) }
  16.667%, 30.95% { transform:translate3d(0,-36px,0) }
  33.333%, 47.62% { transform:translate3d(0,-72px,0) }
  50%,     64.28% { transform:translate3d(0,-108px,0) }
  66.667%, 80.95% { transform:translate3d(0,-144px,0) }
  83.333%, 97.62% { transform:translate3d(0,-180px,0) }
  100%            { transform:translate3d(0,-216px,0) }
}
@media (prefers-reduced-motion:reduce){ .reel{animation:none} }

/* ---------- the label, clearer and in a different shape ---------- */
.hero-foot{gap:clamp(20px,2.8vw,40px)}
.hero-foot .cap{
  display:inline-flex; align-items:center; gap:9px; max-width:none;
  font-family:var(--f-body); font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  text-transform:none; color:rgba(240,236,250,.86);
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  padding:7px 14px 7px 12px; border-radius:30px; white-space:nowrap;
}
.hero-foot .cap::before{
  content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--red); box-shadow:0 0 0 3px rgba(240,90,98,.22);
}
@media (max-width:760px){
  .slot{height:32px} .cell{height:32px; flex-basis:32px}
  .cell img{height:24px; width:24px}
  .hero-foot .cap{font-size:12.5px; padding:6px 12px 6px 10px}
}
@media (max-width:760px){
  .reel{animation-name:reelpx-sm}
  @keyframes reelpx-sm{
    0%,      14.28% { transform:translate3d(0,0,0) }
    16.667%, 30.95% { transform:translate3d(0,-32px,0) }
    33.333%, 47.62% { transform:translate3d(0,-64px,0) }
    50%,     64.28% { transform:translate3d(0,-96px,0) }
    66.667%, 80.95% { transform:translate3d(0,-128px,0) }
    83.333%, 97.62% { transform:translate3d(0,-160px,0) }
    100%            { transform:translate3d(0,-192px,0) }
  }
}

/* ============================================================
   V10 — reel timing corrected.
   Measured fault: slot phase offsets (-5.25s) were not a multiple of
   the 3.5s step, so columns moved out of sync and one was always in
   transit. Now: 22.5s cycle, 6 steps of 3.75s each = 3.40s at rest
   plus a 0.35s move, and the four columns ripple 0.1s apart so the
   row is visually still 90% of the time.
   ============================================================ */
.reel{animation:reelpx 22.5s cubic-bezier(.5,0,.15,1) infinite}
.reel.r2{animation-delay:-.10s}
.reel.r3{animation-delay:-.20s}
.reel.r4{animation-delay:-.30s}

@keyframes reelpx{
  0%,      15.111% { transform:translate3d(0,0,0) }
  16.667%, 31.778% { transform:translate3d(0,-36px,0) }
  33.333%, 48.444% { transform:translate3d(0,-72px,0) }
  50%,     65.111% { transform:translate3d(0,-108px,0) }
  66.667%, 81.778% { transform:translate3d(0,-144px,0) }
  83.333%, 98.444% { transform:translate3d(0,-180px,0) }
  100%             { transform:translate3d(0,-216px,0) }
}
@media (max-width:760px){
  @keyframes reelpx-sm{
    0%,      15.111% { transform:translate3d(0,0,0) }
    16.667%, 31.778% { transform:translate3d(0,-32px,0) }
    33.333%, 48.444% { transform:translate3d(0,-64px,0) }
    50%,     65.111% { transform:translate3d(0,-96px,0) }
    66.667%, 81.778% { transform:translate3d(0,-128px,0) }
    83.333%, 98.444% { transform:translate3d(0,-160px,0) }
    100%             { transform:translate3d(0,-192px,0) }
  }
}

/* ============================================================
   V11 — THE actual bug.
   .slot was still carrying display:flex + align-items:center from
   the very first version of this component. That centred the 432px
   track inside the 36px window, a constant offset of (432-36)/2 =
   198px. 198/36 = 5.5 cells, i.e. permanently parked on a half-cell
   boundary, which is why every window showed the bottom of one mark
   and the top of the next no matter what the timing did.
   The window must be a plain block that clips from its top edge.
   ============================================================ */
.slot{
  display:block !important;
  align-items:initial !important;
  perspective:none;
  position:relative;
  height:36px;
  overflow:hidden;
  flex:0 0 auto;
  min-width:auto;
}
.reel{
  display:block;          /* stacked cells, no flex centring anywhere */
  margin:0; padding:0;
}
.cell{
  display:flex; align-items:center; justify-content:flex-start;
  height:36px; margin:0; padding:0; overflow:hidden;
}
@media (max-width:760px){
  .slot{height:32px}
  .cell{height:32px}
}

/* the label reads as a plain caption, not a marketing pill */
.hero-foot .cap{
  font-size:12.5px; font-weight:500; letter-spacing:.01em;
  color:rgba(240,236,250,.55);
  border:none; background:none; padding:0; border-radius:0;
}
.hero-foot .cap::before{
  width:6px; height:6px; box-shadow:0 0 0 3px rgba(240,90,98,.18);
}

/* no dot before the caption */
.hero-foot .cap::before{ content:none }

/* ============================================================
   V12 — mark reel: name under each logo, one shared treatment so
   dark marks and bright marks read at the same weight, and a much
   slower, softer cadence.
   Cell 54px x 6 marks x 2 copies = 648px track; half = exactly 324px.
   Cycle 35s: each mark rests 5.0s, then an 0.8s glide.
   ============================================================ */
.hero-foot{align-items:flex-start; gap:clamp(22px,3vw,44px)}
.hero-foot .cap{padding-top:16px}
.flipper{gap:clamp(24px,3.2vw,52px); align-items:flex-start}

.slot{display:block !important; height:54px; overflow:hidden; position:relative; flex:0 0 auto}
.reel{display:block; margin:0; padding:0}
.cell{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:5px; height:54px; margin:0; padding:0; overflow:hidden;
}

/* the shared plate is what makes black marks and yellow marks
   sit at the same visual weight */
.cell .ic{
  width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07);
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.cell .ic img{
  width:17px; height:17px; object-fit:contain; border-radius:4px;
  opacity:.72; filter:saturate(.7);
  transition:opacity .4s var(--ease), filter .4s var(--ease);
}
.cell .nm{
  font-family:var(--f-body); font-size:11px; font-weight:500; letter-spacing:.01em;
  color:rgba(240,236,250,.40); white-space:nowrap; line-height:1;
  transition:color .4s var(--ease);
}
.hero-foot:hover .cell .ic{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.14)}
.hero-foot:hover .cell .ic img{opacity:1; filter:none}
.hero-foot:hover .cell .nm{color:rgba(240,236,250,.75)}

.reel{animation:reelslow 35s cubic-bezier(.62,0,.3,1) infinite}
.reel.r2{animation-delay:-.18s}
.reel.r3{animation-delay:-.36s}
.reel.r4{animation-delay:-.54s}

@keyframes reelslow{
  0%,      14.381% { transform:translate3d(0,0,0) }
  16.667%, 31.048% { transform:translate3d(0,-54px,0) }
  33.333%, 47.714% { transform:translate3d(0,-108px,0) }
  50%,     64.381% { transform:translate3d(0,-162px,0) }
  66.667%, 81.048% { transform:translate3d(0,-216px,0) }
  83.333%, 97.714% { transform:translate3d(0,-270px,0) }
  100%             { transform:translate3d(0,-324px,0) }
}
@media (prefers-reduced-motion:reduce){ .reel{animation:none} }

@media (max-width:760px){
  .slot{height:48px}
  .cell{height:48px; gap:4px}
  .cell .ic{width:22px; height:22px; border-radius:6px}
  .cell .ic img{width:14px; height:14px}
  .cell .nm{font-size:10px}
  .reel{animation-name:reelslow-sm}
  @keyframes reelslow-sm{
    0%,      14.381% { transform:translate3d(0,0,0) }
    16.667%, 31.048% { transform:translate3d(0,-48px,0) }
    33.333%, 47.714% { transform:translate3d(0,-96px,0) }
    50%,     64.381% { transform:translate3d(0,-144px,0) }
    66.667%, 81.048% { transform:translate3d(0,-192px,0) }
    83.333%, 97.714% { transform:translate3d(0,-240px,0) }
    100%             { transform:translate3d(0,-288px,0) }
  }
}

/* ============================================================
   V13 — hero rebuilt as a results console.
   Layered blurred colour blooms, film grain over the frame, and the
   product panel tilted off the right edge. The panel argues the
   outcome (before vs after) instead of listing jobs.
   ============================================================ */
.hero{isolation:isolate}
.hero::before{filter:blur(8px)}

.mesh{position:absolute;inset:-14%;z-index:2;pointer-events:none;filter:blur(46px);opacity:.92}
.mesh i{position:absolute;display:block;border-radius:50%}
.mesh i:nth-child(1){width:52%;height:66%;right:2%;top:6%;background:rgba(240,90,98,.46);animation:dr1 19s ease-in-out infinite}
.mesh i:nth-child(2){width:38%;height:48%;right:26%;bottom:-6%;background:rgba(190,60,150,.30);animation:dr2 24s ease-in-out infinite}
.mesh i:nth-child(3){width:44%;height:54%;left:-6%;top:-8%;background:rgba(48,54,140,.40);animation:dr3 29s ease-in-out infinite}
@keyframes dr1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,4%) scale(1.14)}}
@keyframes dr2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-5%) scale(1.10)}}
@keyframes dr3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4%,5%) scale(1.12)}}

.vign{position:absolute;inset:0;z-index:6;pointer-events:none;
  background:radial-gradient(120% 100% at 28% 50%, transparent 40%, rgba(0,0,0,.55) 100%)}
.grain{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:.40;mix-blend-mode:overlay}

/* the panel itself */
.hero-vis{
  position:absolute;z-index:5;right:-8%;top:50%;width:min(58%,610px);aspect-ratio:auto;opacity:1;
  transform:translateY(-50%) perspective(1500px) rotateY(-19deg) rotateX(7deg) rotateZ(-1.5deg);
  animation:float 13s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(-50%) perspective(1500px) rotateY(-19deg) rotateX(7deg) rotateZ(-1.5deg)}
  50%    {transform:translateY(-52%) perspective(1500px) rotateY(-17deg) rotateX(5.5deg) rotateZ(-1deg)}
}
.panel{position:relative;border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;
  background:linear-gradient(170deg,rgba(28,24,42,.96),rgba(14,12,22,.98));
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.03)}
.panel.sweep::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.07) 48%,rgba(255,150,160,.05) 52%,transparent 62%);
  transform:translateX(-120%);animation:psweep 7.5s ease-in-out infinite}
@keyframes psweep{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}

.pbar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07);
  font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);letter-spacing:.05em}
.plive{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--green)}
.plive::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(61,220,151,.16)}
.pbody{padding:14px;display:grid;gap:8px}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pstat{border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:10px;background:rgba(255,255,255,.025)}
.pstat b{display:block;font-family:var(--f-display);font-size:18px;font-weight:700;letter-spacing:-.03em;line-height:1;color:#fff}
.pstat span{display:block;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:5px}

.ba{display:grid;grid-template-columns:1fr auto auto auto;gap:9px;align-items:center;
  padding:9px 11px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.025)}
.ba .lbl{font-size:12.5px;font-weight:600;line-height:1.2;color:var(--text)}
.ba .was{font-family:var(--f-mono);font-size:10.5px;color:var(--text-3);text-decoration:line-through;
  text-decoration-color:rgba(240,90,98,.55);white-space:nowrap}
.ba .arr{font-family:var(--f-mono);font-size:11px;color:var(--text-3)}
.ba .now{font-family:var(--f-mono);font-size:11px;font-weight:500;color:var(--green);white-space:nowrap;
  padding:3px 8px;border-radius:20px;background:rgba(61,220,151,.11);border:1px solid rgba(61,220,151,.26)}
.pfoot{margin:4px 0 0;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(115,108,136,.8)}

/* contents arrive in order on load */
.pstat,.ba{opacity:0;animation:prise .7s cubic-bezier(.3,.7,.3,1) forwards}
.s1{animation-delay:.25s}.s2{animation-delay:.33s}.s3{animation-delay:.41s}
.ba.r1{animation-delay:.55s}.ba.r2{animation-delay:.66s}.ba.r3{animation-delay:.77s}.ba.r4{animation-delay:.88s}
@keyframes prise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.ba .now{animation:plight .9s ease-out forwards;opacity:.35}
.ba.r1 .now{animation-delay:.95s}.ba.r2 .now{animation-delay:1.06s}
.ba.r3 .now{animation-delay:1.17s}.ba.r4 .now{animation-delay:1.28s}
@keyframes plight{from{opacity:.35;box-shadow:0 0 0 0 rgba(61,220,151,0)}
  60%{opacity:1;box-shadow:0 0 18px 2px rgba(61,220,151,.4)}
  to{opacity:1;box-shadow:0 0 0 0 rgba(61,220,151,0)}}

@media (prefers-reduced-motion:reduce){
  .mesh i,.hero-vis,.panel.sweep::after{animation:none}
  .pstat,.ba,.ba .now{opacity:1;animation:none}
}
@media (max-width:900px){
  .hero-vis{position:relative;right:auto;top:auto;width:100%;transform:none;animation:none;margin-top:26px;opacity:.9}
  .hero-in{padding-bottom:clamp(24px,4vw,40px)}
}

/* ---------- live feed inside the hero panel ---------- */
.feed{display:grid;gap:8px;min-height:188px;align-content:start}
.frow{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:9px 11px;border:1px solid rgba(255,255,255,.07);border-radius:9px;
  background:rgba(255,255,255,.025);
  animation:fin .55s cubic-bezier(.25,.8,.3,1) both;
}
@keyframes fin{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.frow.out{animation:fout .45s ease forwards}
@keyframes fout{to{opacity:0;transform:translateY(8px);height:0;padding:0;margin:0;border-width:0}}
.frow .t{font-size:12.5px;font-weight:600;line-height:1.2;color:var(--text)}
.frow .s{display:block;font-family:var(--f-mono);font-size:9.5px;color:var(--text-3);margin-top:3px;letter-spacing:.04em}
.frow .st{
  font-family:var(--f-mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:20px;white-space:nowrap;border:1px solid transparent;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.st.reading{background:rgba(255,187,61,.12);color:var(--amber);border-color:rgba(255,187,61,.28)}
.st.qual   {background:rgba(91,124,255,.14);color:var(--blue-2);border-color:rgba(91,124,255,.3)}
.st.booked {background:rgba(61,220,151,.13);color:var(--green);border-color:rgba(61,220,151,.3)}
.st.sent   {background:rgba(61,220,151,.13);color:var(--green);border-color:rgba(61,220,151,.3)}
.st.emerg  {background:rgba(240,90,98,.14);color:var(--red-2);border-color:rgba(240,90,98,.34)}
.st.paged  {background:rgba(240,90,98,.2);color:#fff;border-color:rgba(240,90,98,.5)}
.st.pulse{animation:stp 1.1s ease-in-out infinite}
@keyframes stp{0%,100%{opacity:1}50%{opacity:.45}}
.pstat b{transition:color .3s var(--ease)}
.pstat b.tick{animation:tk .6s ease}
@keyframes tk{0%{transform:translateY(0)}35%{transform:translateY(-5px);color:var(--green)}100%{transform:translateY(0)}}

/* ============================================================
   V14 — hero graph. Canvas carries the edges, the particle flow and
   the glow (where density matters); the node cards stay in the DOM
   so their type renders crisp rather than as canvas text.
   ============================================================ */
.graph{position:relative;height:300px;overflow:hidden}
.graph canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gnodes{position:absolute;inset:0;pointer-events:none}
.gn{
  position:absolute;transform:translate(-50%,-50%);
  padding:8px 11px;border-radius:9px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(170deg,rgba(32,27,48,.94),rgba(17,14,28,.96));
  box-shadow:0 10px 28px -14px rgba(0,0,0,.9);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.gn b{display:block;font-family:var(--f-body);font-size:11.5px;font-weight:600;color:var(--text);line-height:1.15}
.gn i{display:block;font-style:normal;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-3);margin-top:3px}
.gn.lit{border-color:rgba(255,255,255,.34);box-shadow:0 0 0 1px rgba(255,255,255,.10),0 12px 34px -12px rgba(0,0,0,.9),0 0 26px -4px rgba(140,160,255,.45)}
.gn.hot.lit{box-shadow:0 0 0 1px rgba(240,90,98,.35),0 12px 34px -12px rgba(0,0,0,.9),0 0 30px -4px rgba(240,90,98,.6)}
.gn.hot b{color:#ffd9dd}
.gn.hot i{color:rgba(255,120,135,.85)}

.gmeter{position:absolute;left:14px;bottom:10px;display:flex;gap:14px;pointer-events:none}
.gm{font-family:var(--f-mono);font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-3)}
.gm b{color:var(--green);font-weight:500}
.gm.alt{color:rgba(115,108,136,.7)}

@media (max-width:900px){ .graph{height:250px} .gn b{font-size:10.5px} }

/* ============================================================
   V15 — hero visual is now wordless.
   A field of cells, each one an hour the team spends by hand. The
   field lights up almost fully, a wave passes, and nearly all of it
   goes out. Nothing to read; the drop is the whole message.
   ============================================================ */

/* the divider above the platform strip is gone */
.hero-foot{border-top:none; padding-top:0}

.hero{min-height:clamp(540px,58vw,680px)}
.hero-vis{
  position:absolute; z-index:5; right:-6%; top:50%;
  width:min(62%,760px); height:min(78%,460px);
  transform:translateY(-50%) perspective(1600px) rotateY(-14deg) rotateX(6deg) rotateZ(-1deg);
  animation:float 15s ease-in-out infinite;
  opacity:1;
}
@keyframes float{
  0%,100%{transform:translateY(-50%) perspective(1600px) rotateY(-14deg) rotateX(6deg) rotateZ(-1deg)}
  50%    {transform:translateY(-52%) perspective(1600px) rotateY(-12deg) rotateX(4.5deg) rotateZ(-.5deg)}
}
.hero-vis canvas{width:100%; height:100%; display:block}

@media (max-width:900px){
  .hero-vis{position:relative; right:auto; top:auto; width:100%; height:240px;
            transform:none; animation:none; margin-top:26px}
  .hero{min-height:auto}
}

/* ---------- the real mark ---------- */
.logo img{height:27px;width:auto;display:block;flex-shrink:0}
.logo span{font-family:var(--f-display);font-weight:700;font-size:16.5px;letter-spacing:-.03em;color:#fff}

/* every hard-coded #f05a62 left over from before the logo arrived */
.tile::before{background:linear-gradient(90deg,#ff8a90,#f05a62)}
.hero-vis canvas{filter:none}

/* ============================================================
   V16 — performance.
   Four things were being recomputed every frame:
   an SVG turbulence filter across the whole hero, a blur(46px)
   on elements whose transform was animating, a 3D transform
   wrapping a live canvas, and 420 canvas shadowBlur calls a frame.
   All four are now either baked or gone.
   ============================================================ */

/* grain is a pre-made tile, not a filter the GPU re-runs */
.grain{
  background-image:url("assets/brand/noise.png");
  background-repeat:repeat; background-size:128px 128px;
  opacity:.5; mix-blend-mode:overlay; filter:none;
}

/* the blooms are gradients now. No blur filter, nothing animating a
   transform on a blurred layer. Gradients composite on the GPU for free. */
.mesh{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  filter:none; opacity:1;
  background:
    radial-gradient(38% 46% at 82% 34%, rgba(240,90,98,.42), transparent 66%),
    radial-gradient(30% 38% at 62% 96%, rgba(190,60,150,.26), transparent 68%),
    radial-gradient(40% 50% at 4% 8%,   rgba(48,54,140,.36), transparent 68%);
}
.mesh i{display:none}

/* the panel no longer floats; the canvas supplies all the motion,
   and a static transform lets the browser keep one cached layer */
.hero-vis{
  animation:none;
  transform:translateY(-50%) perspective(1600px) rotateY(-13deg) rotateX(5deg) rotateZ(-.8deg);
}

/* one blurred surface on the page instead of several */
.nav{backdrop-filter:blur(12px) saturate(130%); -webkit-backdrop-filter:blur(12px) saturate(130%)}

/* ---------- hero visual removed ---------- */
.hero-vis{display:none}
.hero{min-height:clamp(420px,42vw,520px)}
.hero-in{width:min(74%,760px)}
@media (max-width:900px){ .hero-in{width:100%} }

/* ============================================================
   V17 — platform strip alignment.
   Slots were sized to their own content, so every column was a
   different width and the icons never lined up with each other.
   Fixed-width slots with the mark centred over its name.
   ============================================================ */
.hero-foot{
  align-items:center;
  gap:clamp(18px,2.4vw,34px);
  flex-wrap:nowrap;
}
.hero-foot .cap{
  flex:0 0 auto; padding-top:0;
  font-size:12px; font-weight:500; letter-spacing:.01em;
  color:rgba(240,236,250,.42); white-space:nowrap;
}

.flipper{
  display:flex; align-items:center; justify-content:flex-start;
  gap:clamp(6px,1vw,16px); flex-wrap:nowrap; overflow:hidden; flex:1 1 auto;
}
.slot{
  display:block !important;
  width:clamp(96px,11vw,132px);
  flex:0 0 auto;
  height:52px; overflow:hidden; position:relative;
}
.reel{display:block; margin:0; padding:0}

/* mark centred over its name, both on the same axis */
.cell{
  display:flex !important; flex-direction:column;
  align-items:center; justify-content:center;
  gap:6px; height:52px; margin:0; padding:0; overflow:hidden; text-align:center;
}
.cell .ic{
  width:24px; height:24px; border-radius:7px; flex-shrink:0;
  display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.07);
}
.cell .ic img{width:15px; height:15px; object-fit:contain; opacity:.72; filter:saturate(.7)}
.cell .nm{
  font-size:10.5px; font-weight:500; letter-spacing:.005em; line-height:1;
  color:rgba(240,236,250,.42);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* the step must match the new cell height exactly, or the window
   lands between two marks again */
.reel{animation:reelcell 35s cubic-bezier(.62,0,.3,1) infinite}
@keyframes reelcell{
  0%,      15.111% { transform:translate3d(0,0,0) }
  16.667%, 31.778% { transform:translate3d(0,-52px,0) }
  33.333%, 48.444% { transform:translate3d(0,-104px,0) }
  50%,     65.111% { transform:translate3d(0,-156px,0) }
  66.667%, 81.778% { transform:translate3d(0,-208px,0) }
  83.333%, 98.444% { transform:translate3d(0,-260px,0) }
  100%             { transform:translate3d(0,-312px,0) }
}
@media (prefers-reduced-motion:reduce){ .reel{animation:none} }

@media (max-width:1100px){
  .hero-foot{flex-wrap:wrap; gap:14px}
  .hero-foot .cap{flex:1 0 100%}
}
@media (max-width:760px){
  .slot{width:clamp(84px,24vw,110px); height:48px}
  .cell{height:48px; gap:5px}
  .cell .ic{width:21px; height:21px}
  .cell .ic img{width:13px; height:13px}
  .cell .nm{font-size:9.5px}
  .reel{animation-name:reelcell-sm}
  @keyframes reelcell-sm{
    0%,      15.111% { transform:translate3d(0,0,0) }
    16.667%, 31.778% { transform:translate3d(0,-48px,0) }
    33.333%, 48.444% { transform:translate3d(0,-96px,0) }
    50%,     65.111% { transform:translate3d(0,-144px,0) }
    66.667%, 81.778% { transform:translate3d(0,-192px,0) }
    83.333%, 98.444% { transform:translate3d(0,-240px,0) }
    100%             { transform:translate3d(0,-288px,0) }
  }
}

/* ============================================================
   V8 — block 2 diagrams. One vocabulary across all three panels.
   Everything is CSS: dash draw-ins, travelling dashes, opacity.
   No canvas, no rAF, no SVG filters. Panels are display:none
   when inactive, so only the visible panel animates.
   ============================================================ */

.dg{display:block; width:100%; height:auto; min-width:900px; overflow:visible}

/* --- shared node vocabulary --- */
.dg-box{fill:#15121f; stroke:rgba(255,255,255,.13); stroke-width:1}
.dg-box.hum{fill:#1a1524; stroke:rgba(240,90,98,.30)}
.dg-hub{fill:#1b1626; stroke:rgba(240,90,98,.55); stroke-width:1.4}
.dg-hubc{fill:#1b1626; stroke:rgba(240,90,98,.55); stroke-width:1.4}
.dg-lab{font-family:var(--f-body); font-size:13.5px; font-weight:600; fill:rgba(240,236,250,.94)}
.dg-lab.soft{font-weight:500; fill:var(--text-2)}
.dg-lab.mid{text-anchor:middle}
.dg-sub{font-family:var(--f-body); font-size:11.5px; fill:var(--text-3)}
.dg-code{font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; fill:rgba(240,236,250,.9)}
.dg-code.dim{fill:var(--text-3)}
.dg-code.soft{fill:var(--text-2)}

/* --- lines --- */
.dg-line{fill:none; stroke:rgba(255,255,255,.17); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round}
.dg-dash{fill:none; stroke:rgba(255,255,255,.20); stroke-width:1.1; stroke-dasharray:4 5}
.dg-flow{fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.dg-flow.red{stroke:var(--red-2)}
.dg-flow.pale{stroke:rgba(255,255,255,.85)}

/* --- the three primitives --- */
@keyframes dgdraw{from{stroke-dashoffset:100} to{stroke-dashoffset:0}}
@keyframes dgflow{from{stroke-dashoffset:100} to{stroke-dashoffset:-6}}
@keyframes dgin{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}

.dg-draw{stroke-dasharray:100; stroke-dashoffset:100; animation:dgdraw .95s var(--ease) both}
.dg-dash.dg-draw{stroke-dasharray:100; animation-duration:.7s}
.dg-flow{stroke-dasharray:7 93; stroke-dashoffset:100; animation:dgflow 3.6s linear infinite}
.dg-node{opacity:0; animation:dgin .6s var(--ease) both}

/* stagger */
.g1{animation-delay:.05s} .g2{animation-delay:.16s} .g3{animation-delay:.27s} .g4{animation-delay:.38s}
.g5{animation-delay:.49s} .g6{animation-delay:.60s} .g7{animation-delay:.71s} .g8{animation-delay:.82s}
.f1{animation-delay:.9s} .f2{animation-delay:1.5s} .f3{animation-delay:2.1s}
.f4{animation-delay:2.7s} .f5{animation-delay:3.3s} .f6{animation-delay:3.9s}

/* --- panel 2: agent terminal cards --- */
.dg-tab{fill:rgba(240,90,98,.15); stroke:rgba(240,90,98,.42); stroke-width:1}
.dg-tabtxt{font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.12em; fill:var(--red-2)}
.dg-dot{fill:var(--red-2)}

.dg-track{fill:rgba(255,255,255,.08)}
.dg-fill{fill:var(--red); transform-box:fill-box; transform-origin:left center; animation:dgbar 2.8s var(--ease) .5s both}
@keyframes dgbar{from{transform:scaleX(.04)} to{transform:scaleX(.99)}}

.ck rect{fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.1}
.ck path{fill:none; stroke:var(--green); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
         stroke-dasharray:14; stroke-dashoffset:14; animation:dgtick .34s var(--ease) both}
.ck text{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.02em; fill:var(--text-2)}
@keyframes dgtick{to{stroke-dashoffset:0}}
.ck{opacity:0; animation:dgin .4s var(--ease) both}
.ck.k1{animation-delay:.55s} .ck.k1 path{animation-delay:.75s}
.ck.k2{animation-delay:.72s} .ck.k2 path{animation-delay:.92s}
.ck.k3{animation-delay:.89s} .ck.k3 path{animation-delay:1.09s}
.ck.k4{animation-delay:1.06s} .ck.k4 path{animation-delay:1.26s}
.ck.k5{animation-delay:1.23s} .ck.k5 path{animation-delay:1.43s}
.ck.k6{animation-delay:1.40s} .ck.k6 path{animation-delay:1.60s}
.ck.k7{animation-delay:1.57s} .ck.k7 path{animation-delay:1.77s}
.ck.k8{animation-delay:1.74s} .ck.k8 path{animation-delay:1.94s}

.dg-humck{fill:rgba(61,220,151,.14); stroke:rgba(61,220,151,.45); stroke-width:1}
.dg-humtick{fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
            stroke-dasharray:18; stroke-dashoffset:18; animation:dgtick .4s var(--ease) 1.3s both}

/* --- panel 3: the dotted ring --- */
.dg-ring{fill:none; stroke:rgba(240,90,98,.42); stroke-width:1.6; stroke-dasharray:1.6 8; stroke-linecap:round;
         transform-box:view-box; transform-origin:560px 303px; animation:dgspin 34s linear infinite}
@keyframes dgspin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .dg-draw,.dg-flow,.dg-node,.ck,.ck path,.dg-fill,.dg-ring,.dg-humtick{animation:none}
  .dg-draw{stroke-dasharray:none; stroke-dashoffset:0}
  .dg-flow{display:none}
  .dg-node,.ck{opacity:1}
  .ck path,.dg-humtick{stroke-dashoffset:0}
  .dg-fill{transform:scaleX(.99)}
}

/* ============================================================
   V9 — block 09: where the money shows up. Five columns, one
   line of copy each, icons that build themselves on reveal.
   ============================================================ */

.roi{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(18px,2.4vw,40px)}
@media (max-width:1060px){ .roi{grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,44px)} }
@media (max-width:560px){ .roi{grid-template-columns:1fr} }

.roicol{display:grid; gap:14px; align-content:start}
.roicol h3{
  font-family:var(--f-display); font-size:clamp(16px,1.3vw,18px); font-weight:600;
  letter-spacing:-.02em; color:#fff; margin:0;
}
.roicol p{font-size:14.5px; line-height:1.62; color:var(--text-2); margin:0; max-width:27ch}

.roiic{width:32px; height:32px; overflow:visible}
.roiic .dr{fill:none; stroke:var(--red-2); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.roiic .b{stroke:none; fill:var(--red-2)}
.roiic .b1{fill:rgba(255,138,144,.42)}
.roiic .b2{fill:rgba(255,138,144,.68)}
.roiic .b3{fill:var(--red-2)}

/* built on reveal, paused until the column is actually in view */
@keyframes roigrow{from{transform:scaleY(.06)} to{transform:scaleY(1)}}
@keyframes roidraw{to{stroke-dashoffset:0}}
.roiic .b{transform-box:fill-box; transform-origin:center bottom; animation:roigrow .62s var(--ease) both paused}
.roiic .b1{animation-delay:.10s} .roiic .b2{animation-delay:.20s} .roiic .b3{animation-delay:.30s}
.roiic .dr{stroke-dasharray:90; stroke-dashoffset:90; animation:roidraw .9s var(--ease) .12s both paused}
.roiic .dr.t2{animation-delay:.5s; stroke-dasharray:30; stroke-dashoffset:30}
.rv.in .roiic .b,
.rv.in .roiic .dr{animation-play-state:running}

.roicta{margin-top:clamp(34px,4.6vw,60px); display:flex; justify-content:center}
.roicta a{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  font-family:var(--f-body); font-size:15.5px; font-weight:500; color:var(--text-2);
  padding:12px 4px; transition:color .3s var(--ease);
}
.roicta a span{color:var(--red-2); transition:transform .3s var(--ease); display:inline-block}
.roicta a:hover{color:#fff}
.roicta a:hover span{transform:translateX(6px)}

@media (prefers-reduced-motion:reduce){
  .roiic .b{animation:none; transform:none}
  .roiic .dr{animation:none; stroke-dashoffset:0}
}

/* ============================================================
   V10 — legibility pass on block 2. The old radial mask was
   clipping the corners of a 1120-wide diagram, and 13.5px type
   inside a viewBox that scales to ~0.84 read at about 11px.
   ============================================================ */

.cbody{
  mask-image:radial-gradient(102% 112% at 50% 50%, #000 80%, transparent 100%);
  -webkit-mask-image:radial-gradient(102% 112% at 50% 50%, #000 80%, transparent 100%);
}

/* type up one step across every panel so it survives the downscale */
.dg-lab{font-size:15px}
.dg-sub{font-size:12.5px}
.dg-code{font-size:13px}
.dg-tabtxt{font-size:11.5px}
.ck text{font-size:12.5px}
.nlab{font-size:15px}
.nsub{font-size:12.5px}
.nedge{font-size:11.5px}

/* lines carry further on a near-black ground */
.dg-line{stroke:rgba(255,255,255,.22)}
.dg-dash{stroke:rgba(255,255,255,.30); stroke-width:1.3}
.edge{stroke:rgba(255,255,255,.24)}
.edash{stroke:rgba(255,255,255,.22)}

/* the CRM panel shares the frame, so it shares the breathing room */
#p4 .dg{min-width:900px}
.nsub.mid,.nedge.mid{text-anchor:middle}

/* ============================================================
   V11 — integration marquee fixes.
   The mask on .tiles clips to its own border box. The top row sat
   flush against that edge, so the 3px hover lift and the 1px
   gradient ring were sliced off the top of every tile up there.
   The bottom row lifts into the gap between rows, which is why it
   never showed the bug. Padding is inside the border box, so it
   buys the headroom back without touching the mask.
   ============================================================ */

.tiles{padding-block:12px}

/* the strip no longer freezes when the cursor lands on it */
.tiles:hover .tilerow{animation-play-state:running}

/* ============================================================
   V12 — nav row and announcement bar.
   The desktop nav was breaking between roughly 1060 and 1250:
   the two dropdown buttons are flex items with no nowrap, so they
   shrank and "What we build" wrapped onto two lines, 52px tall in
   a 40px row. The burger now takes over at 1260 instead, and the
   items refuse to shrink or wrap at any width.
   ============================================================ */

.links > a, .mbtn{white-space:nowrap; flex-shrink:0}
.navend{flex-shrink:0}
.logo{flex-shrink:0}
.logo span{white-space:nowrap}

/* safety net: the panel can never be wider than the window */
.mega{width:min(720px, calc(100vw - 48px))}

/* ---------- announcement bar: workshop + blue CTA ---------- */
.ann-in{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  gap:16px; flex-wrap:wrap; padding:10px 18px;
}
.ann-txt{font-size:14px; color:var(--text)}
.ann-txt b{font-weight:600; color:#fff}

.b-blue{
  background:var(--blue); color:#fff; border:none;
  box-shadow:0 6px 22px -8px rgba(91,124,255,.55);
}
.b-blue:hover{background:var(--blue-2); box-shadow:0 10px 30px -8px rgba(91,124,255,.6)}

@media (max-width:560px){
  .ann-in{gap:10px; padding:10px 14px}
  .ann-txt{font-size:13px}
}

/* ============================================================
   V13 — hero shader. One full-screen triangle on the GPU.
   Settings locked 2026-09-19: heat 2.00, contour 1.00,
   filament 1.00, split 0.10. Lattice, glitch and scanlines off.
   The canvas is inserted by hero-shader.js; if WebGL is missing
   or motion is reduced it never appears and .hero::before shows.
   ============================================================ */

.heroshader{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:2; pointer-events:none;
}

/* holds the headline on a dark ground, and settles the mark row */
.heroscrim{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(9,7,16,.95) 0%, rgba(9,7,16,.80) 32%, rgba(9,7,16,.18) 62%, transparent 100%),
    linear-gradient(0deg,  rgba(9,7,16,.88) 0%, rgba(9,7,16,.38) 17%, transparent 34%);
}
@media (max-width:900px){
  .heroscrim{
    background:
      linear-gradient(180deg, rgba(9,7,16,.90) 0%, rgba(9,7,16,.72) 46%, rgba(9,7,16,.88) 100%);
  }
}

/* the copy has to clear the scrim */
.hero-in,.hero-vis,.hero-foot{z-index:5}

/* ============================================================
   V14 — mobile keeps the plain hero.
   hero-shader.js refuses to run below 900px, so phones never
   start a WebGL context. These rules hide the canvas and the
   scrim that only existed to fight it, which puts the hero back
   on the static gradient ground. Proper mobile pass comes later.
   ============================================================ */

.heroshader[hidden]{display:none}

@media (max-width:900px){
  .heroshader{display:none}
  .heroscrim{display:none}
}

/* ============================================================
   V17 — the objections move on their own, and the page closes
   on a warm bloom instead of a plain card.
   Case studies and "Documented. Reversible. Yours." are gone.
   ============================================================ */

/* ---------- the objection rail ---------- */
.qrail{
  overflow:hidden; cursor:grab; user-select:none;
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.qrail:active{cursor:grabbing}
.qtrack{
  display:flex; gap:16px; width:max-content;
  animation:qroll 78s linear infinite;
  will-change:transform;
}
@keyframes qroll{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
.qrail:hover .qtrack,
.qrail:focus-within .qtrack{animation-play-state:paused}
.qrail.dragging .qtrack{animation-play-state:paused}

.qtrack .tcard{
  flex:0 0 clamp(290px,25vw,352px);
  scroll-snap-align:none;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.qtrack .tcard:hover{
  border-color:rgba(240,90,98,.38);
  background:linear-gradient(160deg, rgba(240,90,98,.07), transparent 62%), var(--card);
  transform:translateY(-3px);
}
@media (prefers-reduced-motion:reduce){ .qtrack{animation:none} }

/* ---------- the closing bloom ---------- */
.foot{position:relative; overflow:hidden; background:var(--bg-2)}
.fbloom{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(52% 46% at 50% 46%, rgba(255,116,58,.80), transparent 64%),
    radial-gradient(72% 60% at 50% 40%, rgba(240,90,98,.62),  transparent 68%),
    radial-gradient(44% 42% at 20% 52%, rgba(201,20,47,.42),  transparent 70%),
    radial-gradient(42% 46% at 84% 48%, rgba(255,150,86,.34), transparent 68%);
}
/* the bloom has to die out before it reaches the link columns */
.foot::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, transparent 54%, rgba(8,7,13,.32) 68%, rgba(8,7,13,.82) 84%, var(--bg-2) 96%);
}
/* only the content gets lifted — .fbloom must stay absolutely positioned,
   a blanket .foot > * rule collapses it and the gradient vanishes */
.foot > .fcta, .foot > .fgrid, .foot > .fbot{position:relative; z-index:2}

.fcta{
  text-align:center; padding:clamp(26px,4.4vw,64px) 0 clamp(40px,5vw,72px);
  display:grid; gap:0; justify-items:center;
}
.fcta h2{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.045em;
  font-size:clamp(28px,5vw,60px); line-height:1.02; color:#fff; margin:0;
  max-width:18ch; text-wrap:balance;
  text-shadow:0 2px 6px rgba(0,0,0,.35), 0 4px 44px rgba(0,0,0,.5);
}
.fcta p{
  margin:clamp(16px,2vw,22px) 0 0; font-size:clamp(14px,1.4vw,16.5px); line-height:1.6;
  color:#fff; max-width:52ch; font-weight:500;
  /* white on saturated orange measures 3.7:1, so the copy carries its own
     halo rather than dimming the gradient underneath it */
  text-shadow:0 1px 3px rgba(0,0,0,.55), 0 2px 22px rgba(0,0,0,.65);
}
.fcta .btns{margin-top:clamp(22px,2.6vw,32px); justify-content:center}
.fcta .b-ghost{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.26); color:#fff}
.fcta .b-ghost:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4)}

@media (max-width:560px){
  .fcta h2{max-width:100%}
}

/* ============================================================
   V18 — orange in the objections, ROI columns become cards
   with a reason behind each one, and the measurement block
   becomes "time or money" with a panel that alternates.
   ============================================================ */

/* ---------- objections: the question carries the colour ---------- */
.tcard .q{
  color:var(--red-2);
  font-size:16px; line-height:1.34;
}
.tcard:hover .q{color:#ff9ea3}
/* the emblem is gone; the attribution is now just a line of type */
.tcard .w{padding-top:13px}
.tcard .w .rl{
  font-family:var(--f-display); font-weight:600; font-size:12px;
  letter-spacing:.005em; text-transform:none; color:var(--text-3); line-height:1.3;
}

/* ---------- ROI columns are cards now ---------- */
.roi{gap:clamp(12px,1.4vw,18px)}
.roicol{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(18px,2vw,24px);
  border-radius:16px; border:1px solid var(--line);
  background:rgba(255,255,255,.016);
  transition:border-color .35s var(--ease), background .35s var(--ease), translate .35s var(--ease);
}
.roicol:hover{border-color:rgba(240,90,98,.4); background:rgba(255,255,255,.03); translate:0 -4px}

.roibg{
  position:absolute; inset:-30%; z-index:-1; opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease), translate .6s var(--ease);
}
.roicol:hover .roibg{opacity:1}

/* each card's ground says something about that card */
.roicol[data-k=revenue] .roibg{
  background:radial-gradient(64% 54% at 78% 92%, rgba(240,90,98,.30), transparent 68%),
             repeating-linear-gradient(46deg, rgba(255,138,144,.14) 0 2px, transparent 2px 14px);
  translate:-12px 14px;
}
.roicol[data-k=revenue]:hover .roibg{translate:0 0}

.roicol[data-k=cost] .roibg{
  background:radial-gradient(64% 54% at 78% 8%, rgba(240,90,98,.24), transparent 68%),
             repeating-linear-gradient(-46deg, rgba(255,138,144,.13) 0 2px, transparent 2px 14px);
  translate:-12px -14px;
}
.roicol[data-k=cost]:hover .roibg{translate:0 0}

.roicol[data-k=speed] .roibg{
  background:radial-gradient(56% 70% at 104% 50%, rgba(255,150,86,.30), transparent 70%),
             repeating-linear-gradient(90deg, rgba(255,170,120,.15) 0 2px, transparent 2px 11px);
  translate:-26px 0;
}
.roicol[data-k=speed]:hover .roibg{translate:0 0}

.roicol[data-k=quality] .roibg{
  background:radial-gradient(70% 66% at 50% 96%, rgba(240,90,98,.22), transparent 70%),
             radial-gradient(rgba(255,138,144,.20) 1.3px, transparent 1.3px) 0 0/15px 15px;
  scale:1.06;
}
.roicol[data-k=quality]:hover .roibg{scale:1}

.roicol[data-k=cash] .roibg{
  background:radial-gradient(64% 56% at 18% 96%, rgba(255,150,86,.30), transparent 70%),
             repeating-linear-gradient(0deg, rgba(255,170,120,.14) 0 2px, transparent 2px 13px);
  translate:0 18px;
}
.roicol[data-k=cash]:hover .roibg{translate:0 0}

}

/* ============================================================
   V19 — each ROI card gets its own illustration behind it.
   One drawing vocabulary across all five: same stroke weight,
   same corner radius, same red, same fade-in. Everything is
   built from the card's own subject, not a generic pattern.
   ============================================================ */

.roibg{
  position:absolute; inset:0; z-index:-1; opacity:0; overflow:hidden;
  border-radius:inherit; translate:0 0 !important; scale:1 !important;
  transition:opacity .45s var(--ease);
}
.roicol:hover .roibg{opacity:1}

/* the warm ground each drawing sits on */
.roibg::before{
  content:''; position:absolute; inset:-25%;
  background:radial-gradient(62% 58% at 80% 88%, rgba(240,90,98,.22), transparent 70%);
}
.roibg svg{
  position:absolute; right:-9%; bottom:-7%; width:92%; height:auto; overflow:visible;
  translate:10px 10px; transition:translate .65s var(--ease);
}
.roicol:hover .roibg svg{translate:0 0}

/* ---- shared drawing vocabulary ---- */
.roibg .ax    {fill:none; stroke:rgba(255,138,144,.22); stroke-width:1}
.roibg .l     {fill:none; stroke:var(--red-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
               stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .95s var(--ease) .08s}
.roicol:hover .roibg .l{stroke-dashoffset:0}
.roibg .f     {fill:rgba(240,90,98,.14)}
.roibg .d     {fill:var(--red-2); opacity:0; transition:opacity .3s var(--ease)}
.roibg .d.hi  {fill:#fff}
.roicol:hover .roibg .d{opacity:.9}
.roibg .d:nth-of-type(1){transition-delay:.42s} .roibg .d:nth-of-type(2){transition-delay:.54s}
.roibg .d:nth-of-type(3){transition-delay:.66s} .roibg .d:nth-of-type(4){transition-delay:.78s}
.roibg .d:nth-of-type(5){transition-delay:.90s}
.roibg .t     {font-family:var(--f-mono); font-size:7.5px; fill:rgba(255,138,144,.38)}
.roibg .glyph {font-family:var(--f-display); font-weight:700; font-size:112px;
               fill:rgba(240,90,98,.17); text-anchor:middle}

/* ---- cost: bars step down toward the arrow ---- */
.roibg .bars rect{fill:rgba(255,138,144,.26); transform-origin:bottom;
                  scale:1 0; transition:scale .5s var(--ease)}
.roicol:hover .roibg .bars rect{scale:1 1}
.roibg .bars rect:nth-child(1){transition-delay:.06s} .roibg .bars rect:nth-child(2){transition-delay:.14s}
.roibg .bars rect:nth-child(3){transition-delay:.22s} .roibg .bars rect:nth-child(4){transition-delay:.30s}
.roibg .l.tip{transition-delay:.85s}

/* ---- speed: the same bolt as the icon, blown up, with motion behind it ---- */
.roibg .bolt{fill:rgba(240,90,98,.20); stroke:var(--red-2); stroke-width:.42; stroke-linejoin:round}
.roibg .streak path{stroke:rgba(255,170,120,.34); stroke-width:2; stroke-linecap:round; fill:none;
                    translate:-26px 0; opacity:0; transition:translate .6s var(--ease), opacity .4s var(--ease)}
.roicol:hover .roibg .streak path{translate:0 0; opacity:1}
.roibg .streak path:nth-child(1){transition-delay:.05s} .roibg .streak path:nth-child(2){transition-delay:.13s}
.roibg .streak path:nth-child(3){transition-delay:.21s} .roibg .streak path:nth-child(4){transition-delay:.29s}

/* ---- quality: twelve identical ticks, because that is what quality is ---- */
.roibg .ck rect{fill:none; stroke:rgba(255,138,144,.30); stroke-width:1.2}
.roibg .ck path{fill:none; stroke:var(--red-2); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
                stroke-dasharray:14; stroke-dashoffset:14; transition:stroke-dashoffset .3s var(--ease)}
.roicol:hover .roibg .ck path{stroke-dashoffset:0}
.roibg .ck:nth-child(1) path{transition-delay:.10s} .roibg .ck:nth-child(2) path{transition-delay:.16s}
.roibg .ck:nth-child(3) path{transition-delay:.22s} .roibg .ck:nth-child(4) path{transition-delay:.28s}
.roibg .ck:nth-child(5) path{transition-delay:.34s} .roibg .ck:nth-child(6) path{transition-delay:.40s}
.roibg .ck:nth-child(7) path{transition-delay:.46s} .roibg .ck:nth-child(8) path{transition-delay:.52s}
.roibg .ck:nth-child(9) path{transition-delay:.58s} .roibg .ck:nth-child(10) path{transition-delay:.64s}
.roibg .ck:nth-child(11) path{transition-delay:.70s} .roibg .ck:nth-child(12) path{transition-delay:.76s}

/* ---- cash: three notes, fanning apart ---- */
.roibg .note rect      {fill:rgba(240,90,98,.13); stroke:rgba(255,138,144,.40); stroke-width:1.2}
.roibg .note .inner    {fill:none; stroke:rgba(255,138,144,.24); stroke-width:.9; stroke-dasharray:3 3}
.roibg .note .oval     {fill:none; stroke:rgba(255,138,144,.34); stroke-width:1.1}
.roibg .note .pip      {fill:rgba(255,138,144,.34)}
.roibg .note .nglyph   {font-family:var(--f-display); font-weight:700; font-size:17px;
                        fill:var(--red-2); text-anchor:middle}
.roibg .note{opacity:0; transition:opacity .45s var(--ease), translate .6s var(--ease)}
.roicol:hover .roibg .note{opacity:1; translate:0 0}
.roibg .n1{translate:0 16px; transition-delay:.06s}
.roibg .n2{translate:0 10px; transition-delay:.16s}
.roibg .n3{translate:0 4px;  transition-delay:.26s}

@media (prefers-reduced-motion:reduce){
  .roibg svg,.roibg .l,.roibg .d,.roibg .bars rect,.roibg .streak path,
  .roibg .ck path,.roibg .note{transition:none}
  .roibg .l,.roibg .ck path{stroke-dashoffset:0}
  .roibg .bars rect{scale:1 1}
  .roibg .d,.roibg .streak path,.roibg .note{opacity:1}
}

/* ============================================================
   V20 — the objection rail stops clipping its own hover, and
   the page no longer ends on a card. It fades into a starfield
   with the warm bloom underneath.
   ============================================================ */

/* the rail was clipping the 3px hover lift and the orange border with it,
   exactly like .tiles did. the padding has to live inside the clip. */
.qrail{
  padding-block:14px;
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

/* ---------- the close is no longer a box, it fades out of the page ---------- */
.foot{
  border:none; border-radius:0; background:transparent;
  padding:clamp(70px,9vw,140px) var(--pad) 30px;
}
.foot::after{
  background:linear-gradient(180deg,
    var(--bg) 0%, rgba(8,7,13,.55) 9%, transparent 26%,
    transparent 54%, rgba(8,7,13,.34) 70%, rgba(8,7,13,.86) 86%, var(--bg) 97%);
}
.fbloom{
  background:
    radial-gradient(50% 42% at 50% 52%, rgba(255,116,58,.72), transparent 66%),
    radial-gradient(70% 56% at 50% 46%, rgba(240,90,98,.54),  transparent 70%),
    radial-gradient(44% 40% at 18% 58%, rgba(201,20,47,.38),  transparent 72%),
    radial-gradient(42% 44% at 84% 54%, rgba(255,150,86,.30), transparent 70%);
}

/* ---------- stars, three depths so it has parallax ---------- */
.fstars{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  mask-image:linear-gradient(180deg, #000 0%, #000 34%, transparent 64%);
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 34%, transparent 64%);
}
.fstars i{
  position:absolute; top:0; left:0; width:1px; height:1px; border-radius:50%;
  background:transparent; will-change:transform;
}
.fstars .s1{box-shadow:1200px 647px 0 0px rgba(255,255,255,0.34), 839px 354px 0 0px rgba(255,255,255,0.92), 710px 21px 0 0px rgba(255,255,255,0.76), 1046px 481px 0 0px rgba(255,255,255,0.34), 384px 257px 0 0px rgba(255,255,255,0.84), 774px 505px 0 0px rgba(255,255,255,0.64), 450px 330px 0 0px rgba(255,255,255,0.5), 467px 560px 0 0px rgba(255,255,255,0.68), 70px 151px 0 0px rgba(255,255,255,0.56), 1385px 544px 0 0px rgba(255,255,255,0.72), 548px 184px 0 0px rgba(255,255,255,0.4), 387px 698px 0 0px rgba(255,255,255,0.31), 449px 673px 0 0px rgba(255,255,255,0.27), 1418px 75px 0 0px rgba(255,255,255,0.26), 554px 445px 0 0px rgba(255,255,255,0.72), 1169px 453px 0 0px rgba(255,255,255,0.45), 1308px 583px 0 0px rgba(255,255,255,0.58), 130px 310px 0 0px rgba(255,255,255,0.88), 346px 490px 0 0px rgba(255,255,255,0.6), 903px 79px 0 0px rgba(255,255,255,0.59), 563px 647px 0 0px rgba(255,255,255,0.8), 619px 86px 0 0px rgba(255,255,255,0.55), 637px 432px 0 0px rgba(255,255,255,0.61), 173px 218px 0 0px rgba(255,255,255,0.35), 533px 376px 0 0px rgba(255,255,255,0.89), 891px 244px 0 0px rgba(255,255,255,0.59), 126px 498px 0 0px rgba(255,255,255,0.26), 1417px 627px 0 0px rgba(255,255,255,0.91), 1373px 79px 0 0px rgba(255,255,255,0.75), 169px 16px 0 0px rgba(255,255,255,0.68), 461px 338px 0 0px rgba(255,255,255,0.77), 170px 218px 0 0px rgba(255,255,255,0.71), 1260px 423px 0 0px rgba(255,255,255,0.91), 1228px 21px 0 0px rgba(255,255,255,0.62), 1097px 54px 0 0px rgba(255,255,255,0.71), 1248px 626px 0 0px rgba(255,255,255,0.86), 1005px 198px 0 0px rgba(255,255,255,0.6), 1211px 67px 0 0px rgba(255,255,255,0.92), 1084px 99px 0 0px rgba(255,255,255,0.39), 1502px 608px 0 0px rgba(255,255,255,0.92), 1340px 368px 0 0px rgba(255,255,255,0.68), 494px 257px 0 0px rgba(255,255,255,0.47), 418px 504px 0 0px rgba(255,255,255,0.61), 1241px 232px 0 0px rgba(255,255,255,0.82), 356px 419px 0 0px rgba(255,255,255,0.5), 1504px 351px 0 0px rgba(255,255,255,0.89), 324px 341px 0 0px rgba(255,255,255,0.5), 1449px 524px 0 0px rgba(255,255,255,0.46), 1125px 526px 0 0px rgba(255,255,255,0.39), 1130px 293px 0 0px rgba(255,255,255,0.4), 107px 462px 0 0px rgba(255,255,255,0.57), 707px 422px 0 0px rgba(255,255,255,0.92), 774px 186px 0 0px rgba(255,255,255,0.85), 394px 103px 0 0px rgba(255,255,255,0.62), 1234px 400px 0 0px rgba(255,255,255,0.64), 482px 415px 0 0px rgba(255,255,255,0.93), 570px 353px 0 0px rgba(255,255,255,0.36), 349px 432px 0 0px rgba(255,255,255,0.72), 62px 614px 0 0px rgba(255,255,255,0.59), 224px 493px 0 0px rgba(255,255,255,0.3), 1149px 371px 0 0px rgba(255,255,255,0.77), 901px 76px 0 0px rgba(255,255,255,0.25), 230px 118px 0 0px rgba(255,255,255,0.85), 181px 576px 0 0px rgba(255,255,255,0.82), 358px 77px 0 0px rgba(255,255,255,0.89), 277px 561px 0 0px rgba(255,255,255,0.4), 1507px 202px 0 0px rgba(255,255,255,0.71), 1414px 189px 0 0px rgba(255,255,255,0.31), 1569px 482px 0 0px rgba(255,255,255,0.6), 1510px 699px 0 0px rgba(255,255,255,0.31), 402px 178px 0 0px rgba(255,255,255,0.39), 1069px 484px 0 0px rgba(255,255,255,0.75), 771px 481px 0 0px rgba(255,255,255,0.44), 724px 206px 0 0px rgba(255,255,255,0.44), 1117px 128px 0 0px rgba(255,255,255,0.44), 526px 419px 0 0px rgba(255,255,255,0.65), 251px 49px 0 0px rgba(255,255,255,0.6), 368px 483px 0 0px rgba(255,255,255,0.87), 932px 365px 0 0px rgba(255,255,255,0.25), 40px 93px 0 0px rgba(255,255,255,0.68), 930px 46px 0 0px rgba(255,255,255,0.45), 554px 652px 0 0px rgba(255,255,255,0.88), 704px 213px 0 0px rgba(255,255,255,0.89), 279px 394px 0 0px rgba(255,255,255,0.69), 1266px 320px 0 0px rgba(255,255,255,0.34), 426px 627px 0 0px rgba(255,255,255,0.33), 807px 45px 0 0px rgba(255,255,255,0.48), 45px 144px 0 0px rgba(255,255,255,0.42), 607px 218px 0 0px rgba(255,255,255,0.5), 679px 354px 0 0px rgba(255,255,255,0.56), 1025px 221px 0 0px rgba(255,255,255,0.63), 1322px 44px 0 0px rgba(255,255,255,0.65), 916px 178px 0 0px rgba(255,255,255,0.57), 405px 488px 0 0px rgba(255,255,255,0.8), 1571px 600px 0 0px rgba(255,255,255,0.49), 1299px 229px 0 0px rgba(255,255,255,0.28), 233px 164px 0 0px rgba(255,255,255,0.72), 956px 317px 0 0px rgba(255,255,255,0.85), 555px 232px 0 0px rgba(255,255,255,0.47), 329px 45px 0 0px rgba(255,255,255,0.37), 975px 233px 0 0px rgba(255,255,255,0.42), 68px 287px 0 0px rgba(255,255,255,0.55), 74px 366px 0 0px rgba(255,255,255,0.56), 149px 294px 0 0px rgba(255,255,255,0.73), 282px 267px 0 0px rgba(255,255,255,0.68), 816px 480px 0 0px rgba(255,255,255,0.39), 1074px 584px 0 0px rgba(255,255,255,0.76), 994px 444px 0 0px rgba(255,255,255,0.5), 619px 4px 0 0px rgba(255,255,255,0.92), 966px 254px 0 0px rgba(255,255,255,0.37), 661px 489px 0 0px rgba(255,255,255,0.6), 416px 316px 0 0px rgba(255,255,255,0.67), 1262px 211px 0 0px rgba(255,255,255,0.45), 1252px 132px 0 0px rgba(255,255,255,0.33), 47px 367px 0 0px rgba(255,255,255,0.69), 717px 131px 0 0px rgba(255,255,255,0.7), 860px 179px 0 0px rgba(255,255,255,0.76), 551px 418px 0 0px rgba(255,255,255,0.7), 1396px 114px 0 0px rgba(255,255,255,0.31), 1225px 398px 0 0px rgba(255,255,255,0.3);  animation:drift 150s linear infinite, tw 5.5s ease-in-out infinite}
.fstars .s2{box-shadow:787px 654px 0 0px rgba(255,255,255,0.37), 896px 539px 0 0px rgba(255,255,255,0.44), 314px 451px 0 0.5px rgba(255,255,255,0.73), 833px 518px 0 0px rgba(255,255,255,0.37), 968px 595px 0 0.5px rgba(255,255,255,0.69), 529px 25px 0 0px rgba(255,255,255,0.72), 361px 94px 0 0px rgba(255,255,255,0.38), 222px 155px 0 0px rgba(255,255,255,0.27), 89px 255px 0 0.5px rgba(255,255,255,0.9), 745px 221px 0 0px rgba(255,255,255,0.44), 1107px 149px 0 0px rgba(255,255,255,0.43), 1437px 376px 0 0.5px rgba(255,255,255,0.27), 1360px 629px 0 0px rgba(255,255,255,0.39), 600px 344px 0 0.5px rgba(255,255,255,0.9), 408px 573px 0 0px rgba(255,255,255,0.95), 1233px 569px 0 0.5px rgba(255,255,255,0.47), 457px 271px 0 0px rgba(255,255,255,0.52), 1340px 412px 0 0.5px rgba(255,255,255,0.75), 1527px 421px 0 0px rgba(255,255,255,0.49), 172px 447px 0 0.5px rgba(255,255,255,0.89), 1017px 378px 0 0px rgba(255,255,255,0.28), 19px 292px 0 0.5px rgba(255,255,255,0.83), 136px 499px 0 0.5px rgba(255,255,255,0.49), 479px 319px 0 0.5px rgba(255,255,255,0.57), 315px 550px 0 0px rgba(255,255,255,0.33), 799px 251px 0 0.5px rgba(255,255,255,0.91), 933px 484px 0 0px rgba(255,255,255,0.6), 141px 145px 0 0px rgba(255,255,255,0.28), 540px 127px 0 0px rgba(255,255,255,0.73), 1226px 448px 0 0.5px rgba(255,255,255,0.56), 111px 405px 0 0px rgba(255,255,255,0.38), 444px 140px 0 0px rgba(255,255,255,0.63), 1550px 655px 0 0.5px rgba(255,255,255,0.73), 735px 700px 0 0px rgba(255,255,255,0.47), 589px 564px 0 0.5px rgba(255,255,255,0.71), 130px 612px 0 0px rgba(255,255,255,0.65), 952px 448px 0 0px rgba(255,255,255,0.86), 416px 317px 0 0.5px rgba(255,255,255,0.49), 1035px 678px 0 0px rgba(255,255,255,0.38), 1527px 281px 0 0.5px rgba(255,255,255,0.58), 1115px 425px 0 0.5px rgba(255,255,255,0.54), 218px 8px 0 0.5px rgba(255,255,255,0.51), 1375px 20px 0 0px rgba(255,255,255,0.79), 1119px 199px 0 0.5px rgba(255,255,255,0.58), 1322px 302px 0 0.5px rgba(255,255,255,0.81), 635px 187px 0 0.5px rgba(255,255,255,0.75), 153px 496px 0 0.5px rgba(255,255,255,0.66), 11px 388px 0 0px rgba(255,255,255,0.59), 1533px 693px 0 0.5px rgba(255,255,255,0.55), 1068px 431px 0 0.5px rgba(255,255,255,0.95), 289px 519px 0 0px rgba(255,255,255,0.42), 875px 188px 0 0px rgba(255,255,255,0.95);  animation:drift 100s linear infinite, tw 7.5s ease-in-out infinite .8s}
.fstars .s3{box-shadow:1324px 489px 0 1.0px rgba(255,255,255,0.74), 414px 391px 0 0.5px rgba(255,255,255,0.55), 57px 260px 0 1.0px rgba(255,255,255,0.74), 763px 109px 0 0.5px rgba(255,255,255,0.61), 1121px 650px 0 1.0px rgba(255,255,255,0.53), 574px 536px 0 0.5px rgba(255,255,255,0.93), 1522px 454px 0 1.0px rgba(255,255,255,0.5), 457px 104px 0 1.0px rgba(255,255,255,0.49), 1516px 566px 0 0.5px rgba(255,255,255,0.42), 870px 215px 0 0.5px rgba(255,255,255,0.44), 565px 624px 0 1.0px rgba(255,255,255,0.84), 92px 217px 0 1.0px rgba(255,255,255,0.44), 1177px 114px 0 0.5px rgba(255,255,255,0.68), 41px 36px 0 1.0px rgba(255,255,255,0.55), 822px 38px 0 1.0px rgba(255,255,255,0.69), 445px 450px 0 0.5px rgba(255,255,255,0.34), 610px 597px 0 0.5px rgba(255,255,255,0.48), 326px 128px 0 1.0px rgba(255,255,255,0.43); animation:drift 68s  linear infinite, tw 9s   ease-in-out infinite 1.6s}
@keyframes drift{from{transform:translate3d(0,0,0)} to{transform:translate3d(-800px,0,0)}}
@keyframes tw{0%,100%{opacity:.5} 50%{opacity:1}}
@media (prefers-reduced-motion:reduce){ .fstars i{animation:none; opacity:.75} }

/* ============================================================
   V21 — a starlight ceiling behind the entire page.
   Fixed, so it sits still while the page scrolls over it, which
   is what makes it read as a ceiling rather than wallpaper.
   Three depths twinkle out of phase; four meteors cross on long
   staggered delays so they never look scheduled.
   ============================================================ */

.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  contain:strict;
}
.page{position:relative; z-index:1}

.sky i{
  position:absolute; top:0; left:0; width:1px; height:1px; border-radius:50%;
  background:transparent; will-change:opacity;
}
.sky .a{box-shadow:663px 308px 0 0px rgba(255,255,255,0.53), 148px 1097px 0 0px rgba(255,255,255,0.4), 118px 1039px 0 0px rgba(255,255,255,0.24), 888px 856px 0 0px rgba(255,255,255,0.34), 1128px 869px 0 0px rgba(255,255,255,0.62), 253px 457px 0 0px rgba(255,255,255,0.5), 812px 101px 0 0px rgba(255,255,255,0.24), 1758px 272px 0 0px rgba(255,255,255,0.42), 1107px 241px 0 0px rgba(255,255,255,0.49), 1396px 370px 0 0px rgba(255,255,255,0.5), 1308px 384px 0 0px rgba(255,255,255,0.27), 1458px 128px 0 0px rgba(255,255,255,0.52), 1016px 1088px 0 0px rgba(255,255,255,0.59), 953px 928px 0 0px rgba(255,255,255,0.36), 1626px 368px 0 0px rgba(255,255,255,0.26), 614px 1075px 0 0px rgba(255,255,255,0.64), 1493px 919px 0 0px rgba(255,255,255,0.51), 149px 241px 0 0px rgba(255,255,255,0.3), 700px 311px 0 0px rgba(255,255,255,0.42), 1368px 158px 0 0px rgba(255,255,255,0.38), 717px 1017px 0 0px rgba(255,255,255,0.25), 191px 552px 0 0px rgba(255,255,255,0.55), 133px 124px 0 0px rgba(255,255,255,0.53), 1395px 912px 0 0px rgba(255,255,255,0.56), 1816px 710px 0 0px rgba(255,255,255,0.67), 727px 344px 0 0px rgba(255,255,255,0.46), 446px 588px 0 0px rgba(255,255,255,0.57), 814px 800px 0 0px rgba(255,255,255,0.26), 919px 822px 0 0px rgba(255,255,255,0.64), 1677px 881px 0 0px rgba(255,255,255,0.56), 734px 779px 0 0px rgba(255,255,255,0.29), 360px 309px 0 0px rgba(255,255,255,0.54), 24px 993px 0 0px rgba(255,255,255,0.35), 8px 298px 0 0px rgba(255,255,255,0.48), 1248px 652px 0 0px rgba(255,255,255,0.55), 1055px 110px 0 0px rgba(255,255,255,0.65), 1597px 803px 0 0px rgba(255,255,255,0.41), 212px 986px 0 0px rgba(255,255,255,0.25), 137px 427px 0 0px rgba(255,255,255,0.3), 696px 107px 0 0px rgba(255,255,255,0.22), 309px 1098px 0 0px rgba(255,255,255,0.68), 1256px 52px 0 0px rgba(255,255,255,0.64), 1257px 770px 0 0px rgba(255,255,255,0.52), 711px 745px 0 0px rgba(255,255,255,0.28), 1738px 999px 0 0px rgba(255,255,255,0.45), 638px 175px 0 0px rgba(255,255,255,0.27), 701px 542px 0 0px rgba(255,255,255,0.62), 330px 1057px 0 0px rgba(255,255,255,0.32), 1081px 740px 0 0px rgba(255,255,255,0.55), 1872px 55px 0 0px rgba(255,255,255,0.69), 1768px 186px 0 0px rgba(255,255,255,0.47), 1860px 342px 0 0px rgba(255,255,255,0.59), 1090px 1029px 0 0px rgba(255,255,255,0.53), 1255px 399px 0 0px rgba(255,255,255,0.61), 1515px 464px 0 0px rgba(255,255,255,0.47), 728px 59px 0 0px rgba(255,255,255,0.6), 967px 530px 0 0px rgba(255,255,255,0.55), 705px 915px 0 0px rgba(255,255,255,0.68), 746px 164px 0 0px rgba(255,255,255,0.27), 962px 402px 0 0px rgba(255,255,255,0.32), 1278px 3px 0 0px rgba(255,255,255,0.66), 704px 173px 0 0px rgba(255,255,255,0.66), 1602px 408px 0 0px rgba(255,255,255,0.65), 888px 680px 0 0px rgba(255,255,255,0.6), 1478px 810px 0 0px rgba(255,255,255,0.41), 173px 325px 0 0px rgba(255,255,255,0.7), 56px 309px 0 0px rgba(255,255,255,0.61), 299px 971px 0 0px rgba(255,255,255,0.29), 1122px 268px 0 0px rgba(255,255,255,0.23), 1487px 210px 0 0px rgba(255,255,255,0.43), 1785px 398px 0 0px rgba(255,255,255,0.23), 435px 599px 0 0px rgba(255,255,255,0.59), 667px 531px 0 0px rgba(255,255,255,0.62), 124px 724px 0 0px rgba(255,255,255,0.54), 1669px 1058px 0 0px rgba(255,255,255,0.62), 1798px 1027px 0 0px rgba(255,255,255,0.48), 1072px 1045px 0 0px rgba(255,255,255,0.64), 1590px 375px 0 0px rgba(255,255,255,0.59), 306px 352px 0 0px rgba(255,255,255,0.45), 1485px 246px 0 0px rgba(255,255,255,0.38), 1061px 1086px 0 0px rgba(255,255,255,0.6), 217px 116px 0 0px rgba(255,255,255,0.31), 86px 200px 0 0px rgba(255,255,255,0.49), 1556px 129px 0 0px rgba(255,255,255,0.38), 1035px 1048px 0 0px rgba(255,255,255,0.55), 926px 1040px 0 0px rgba(255,255,255,0.46), 507px 1071px 0 0px rgba(255,255,255,0.66), 1828px 414px 0 0px rgba(255,255,255,0.29), 249px 803px 0 0px rgba(255,255,255,0.37), 1374px 492px 0 0px rgba(255,255,255,0.26), 1371px 620px 0 0px rgba(255,255,255,0.65), 316px 749px 0 0px rgba(255,255,255,0.34), 281px 957px 0 0px rgba(255,255,255,0.58), 192px 815px 0 0px rgba(255,255,255,0.3), 1367px 458px 0 0px rgba(255,255,255,0.56), 1055px 827px 0 0px rgba(255,255,255,0.42), 730px 652px 0 0px rgba(255,255,255,0.57), 39px 692px 0 0px rgba(255,255,255,0.43), 37px 787px 0 0px rgba(255,255,255,0.47), 605px 1049px 0 0px rgba(255,255,255,0.27), 1881px 468px 0 0px rgba(255,255,255,0.26), 556px 81px 0 0px rgba(255,255,255,0.35), 265px 864px 0 0px rgba(255,255,255,0.41), 1098px 1054px 0 0px rgba(255,255,255,0.56), 183px 571px 0 0px rgba(255,255,255,0.6), 375px 871px 0 0px rgba(255,255,255,0.35), 34px 181px 0 0px rgba(255,255,255,0.26), 1753px 455px 0 0px rgba(255,255,255,0.35), 249px 929px 0 0px rgba(255,255,255,0.38), 1132px 855px 0 0px rgba(255,255,255,0.52), 88px 1079px 0 0px rgba(255,255,255,0.67), 330px 536px 0 0px rgba(255,255,255,0.31), 638px 624px 0 0px rgba(255,255,255,0.36), 1024px 364px 0 0px rgba(255,255,255,0.39), 37px 512px 0 0px rgba(255,255,255,0.23), 1501px 1035px 0 0px rgba(255,255,255,0.47), 503px 915px 0 0px rgba(255,255,255,0.54), 1331px 885px 0 0px rgba(255,255,255,0.48), 1820px 805px 0 0px rgba(255,255,255,0.55), 470px 701px 0 0px rgba(255,255,255,0.62), 1447px 286px 0 0px rgba(255,255,255,0.69), 111px 265px 0 0px rgba(255,255,255,0.25), 1517px 523px 0 0px rgba(255,255,255,0.3), 173px 780px 0 0px rgba(255,255,255,0.51), 1418px 600px 0 0px rgba(255,255,255,0.44), 322px 550px 0 0px rgba(255,255,255,0.22), 745px 673px 0 0px rgba(255,255,255,0.34), 1807px 633px 0 0px rgba(255,255,255,0.39), 2px 686px 0 0px rgba(255,255,255,0.26), 571px 1029px 0 0px rgba(255,255,255,0.34), 1589px 10px 0 0px rgba(255,255,255,0.35), 183px 294px 0 0px rgba(255,255,255,0.5), 806px 46px 0 0px rgba(255,255,255,0.37), 476px 173px 0 0px rgba(255,255,255,0.54), 1466px 797px 0 0px rgba(255,255,255,0.57), 1012px 306px 0 0px rgba(255,255,255,0.57), 1317px 296px 0 0px rgba(255,255,255,0.62), 1464px 1050px 0 0px rgba(255,255,255,0.57), 1663px 1035px 0 0px rgba(255,255,255,0.66), 1541px 1032px 0 0px rgba(255,255,255,0.62), 1196px 470px 0 0px rgba(255,255,255,0.23), 272px 738px 0 0px rgba(255,255,255,0.4), 924px 103px 0 0px rgba(255,255,255,0.52), 1394px 500px 0 0px rgba(255,255,255,0.35), 935px 143px 0 0px rgba(255,255,255,0.54), 135px 970px 0 0px rgba(255,255,255,0.61), 1732px 543px 0 0px rgba(255,255,255,0.57), 420px 472px 0 0px rgba(255,255,255,0.46), 783px 157px 0 0px rgba(255,255,255,0.66), 588px 95px 0 0px rgba(255,255,255,0.26), 301px 679px 0 0px rgba(255,255,255,0.53), 1419px 623px 0 0px rgba(255,255,255,0.23), 124px 994px 0 0px rgba(255,255,255,0.69), 203px 445px 0 0px rgba(255,255,255,0.36), 1057px 584px 0 0px rgba(255,255,255,0.44), 1571px 242px 0 0px rgba(255,255,255,0.37), 175px 968px 0 0px rgba(255,255,255,0.36), 156px 1037px 0 0px rgba(255,255,255,0.7), 792px 429px 0 0px rgba(255,255,255,0.26), 184px 290px 0 0px rgba(255,255,255,0.68); animation:twk 6s   ease-in-out infinite}
.sky .b{box-shadow:271px 1041px 0 0.5px rgba(255,255,255,0.79), 1440px 747px 0 0px rgba(255,255,255,0.6), 1794px 995px 0 0.5px rgba(255,255,255,0.36), 7px 1006px 0 0.5px rgba(255,255,255,0.55), 1489px 288px 0 0.5px rgba(255,255,255,0.52), 647px 247px 0 0.5px rgba(255,255,255,0.35), 1537px 692px 0 0.5px rgba(255,255,255,0.41), 1897px 400px 0 0px rgba(255,255,255,0.8), 593px 518px 0 0.5px rgba(255,255,255,0.38), 799px 156px 0 0.5px rgba(255,255,255,0.81), 1547px 563px 0 0px rgba(255,255,255,0.49), 105px 584px 0 0px rgba(255,255,255,0.47), 544px 893px 0 0.5px rgba(255,255,255,0.44), 764px 876px 0 0px rgba(255,255,255,0.76), 1292px 819px 0 0px rgba(255,255,255,0.71), 101px 841px 0 0.5px rgba(255,255,255,0.66), 283px 586px 0 0.5px rgba(255,255,255,0.37), 1898px 260px 0 0px rgba(255,255,255,0.59), 703px 577px 0 0.5px rgba(255,255,255,0.48), 1512px 532px 0 0.5px rgba(255,255,255,0.68), 616px 989px 0 0.5px rgba(255,255,255,0.41), 1317px 331px 0 0px rgba(255,255,255,0.45), 1855px 1018px 0 0px rgba(255,255,255,0.58), 681px 921px 0 0.5px rgba(255,255,255,0.42), 394px 499px 0 0px rgba(255,255,255,0.44), 1138px 186px 0 0.5px rgba(255,255,255,0.47), 529px 413px 0 0px rgba(255,255,255,0.72), 845px 784px 0 0.5px rgba(255,255,255,0.72), 430px 771px 0 0.5px rgba(255,255,255,0.52), 127px 1020px 0 0.5px rgba(255,255,255,0.64), 737px 257px 0 0px rgba(255,255,255,0.4), 1836px 508px 0 0.5px rgba(255,255,255,0.55), 913px 884px 0 0.5px rgba(255,255,255,0.77), 1787px 44px 0 0px rgba(255,255,255,0.37), 1453px 969px 0 0.5px rgba(255,255,255,0.35), 801px 1081px 0 0.5px rgba(255,255,255,0.84), 508px 223px 0 0px rgba(255,255,255,0.43), 1069px 223px 0 0.5px rgba(255,255,255,0.39), 1591px 80px 0 0px rgba(255,255,255,0.74), 476px 76px 0 0.5px rgba(255,255,255,0.83), 1283px 515px 0 0.5px rgba(255,255,255,0.7), 229px 203px 0 0px rgba(255,255,255,0.5), 1193px 392px 0 0.5px rgba(255,255,255,0.48), 1618px 2px 0 0px rgba(255,255,255,0.62), 943px 570px 0 0.5px rgba(255,255,255,0.67), 1809px 496px 0 0.5px rgba(255,255,255,0.61), 1120px 505px 0 0px rgba(255,255,255,0.83), 1443px 629px 0 0px rgba(255,255,255,0.36), 1020px 860px 0 0px rgba(255,255,255,0.48), 1366px 869px 0 0.5px rgba(255,255,255,0.46), 69px 692px 0 0.5px rgba(255,255,255,0.53), 811px 405px 0 0px rgba(255,255,255,0.75), 1513px 1033px 0 0px rgba(255,255,255,0.45), 410px 638px 0 0px rgba(255,255,255,0.47), 453px 542px 0 0.5px rgba(255,255,255,0.4), 1277px 1015px 0 0px rgba(255,255,255,0.8), 993px 854px 0 0px rgba(255,255,255,0.82), 299px 805px 0 0px rgba(255,255,255,0.46), 1220px 290px 0 0.5px rgba(255,255,255,0.38), 123px 377px 0 0.5px rgba(255,255,255,0.57), 1458px 643px 0 0px rgba(255,255,255,0.85), 339px 674px 0 0px rgba(255,255,255,0.44), 1074px 957px 0 0px rgba(255,255,255,0.51), 1485px 775px 0 0.5px rgba(255,255,255,0.84), 906px 346px 0 0px rgba(255,255,255,0.35), 573px 165px 0 0.5px rgba(255,255,255,0.56), 1812px 253px 0 0px rgba(255,255,255,0.54), 1574px 632px 0 0.5px rgba(255,255,255,0.39), 1444px 969px 0 0px rgba(255,255,255,0.54), 1883px 914px 0 0px rgba(255,255,255,0.51); animation:twk 8.5s ease-in-out infinite 1.2s}
.sky .c{box-shadow:1510px 971px 0 0.5px rgba(255,255,255,0.82), 507px 828px 0 0.5px rgba(255,255,255,0.69), 950px 128px 0 0.5px rgba(255,255,255,0.63), 1530px 128px 0 1.0px rgba(255,255,255,0.68), 686px 89px 0 1.0px rgba(255,255,255,0.87), 1412px 648px 0 1.0px rgba(255,255,255,0.65), 1477px 133px 0 0.5px rgba(255,255,255,0.91), 219px 973px 0 1.0px rgba(255,255,255,0.98), 791px 514px 0 1.0px rgba(255,255,255,0.91), 271px 1016px 0 0.5px rgba(255,255,255,0.5), 1512px 621px 0 0.5px rgba(255,255,255,0.8), 671px 654px 0 1.0px rgba(255,255,255,0.68), 1602px 161px 0 0.5px rgba(255,255,255,0.7), 327px 506px 0 1.0px rgba(255,255,255,0.53), 69px 986px 0 1.0px rgba(255,255,255,0.58), 873px 215px 0 0.5px rgba(255,255,255,0.63), 172px 426px 0 0.5px rgba(255,255,255,0.71), 1453px 915px 0 0.5px rgba(255,255,255,0.62), 853px 943px 0 0.5px rgba(255,255,255,0.87), 1734px 248px 0 1.0px rgba(255,255,255,0.65), 1160px 548px 0 1.0px rgba(255,255,255,0.63), 533px 407px 0 1.0px rgba(255,255,255,0.62), 502px 482px 0 0.5px rgba(255,255,255,0.64), 1858px 385px 0 1.0px rgba(255,255,255,0.53), 515px 503px 0 0.5px rgba(255,255,255,0.82), 205px 950px 0 0.5px rgba(255,255,255,0.55); animation:twk 11s  ease-in-out infinite 2.6s}
@keyframes twk{0%,100%{opacity:.42} 50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .sky i{animation:none; opacity:.7}
}

/* the footer had its own stars; the ceiling covers it now */
.fstars{display:none}
.foot::after{
  background:linear-gradient(180deg,
    transparent 0%, transparent 26%,
    transparent 54%, rgba(8,7,13,.34) 70%, rgba(8,7,13,.86) 86%, var(--bg) 97%);
}

/* ============================================================
   V22 — the card art stops fighting the words.
   The diagonal stripe patterns are gone, the drawing is smaller
   and lives in the bottom corner, and a scrim keeps the top-left
   dark so the heading and copy never lose contrast.
   Quality is a target hit three times in the same place, which
   is what "the same steps every time" actually looks like.
   ============================================================ */

/* kill the striped grounds from V18 outright */
.roicol[data-k=revenue] .roibg,
.roicol[data-k=cost] .roibg,
.roicol[data-k=speed] .roibg,
.roicol[data-k=quality] .roibg,
.roicol[data-k=cash] .roibg{background:none}
.roicol[data-k] .roibg{translate:0 0; scale:1}

/* one soft warm pool, bottom right, under the drawing only */
.roibg::before{
  inset:0;
  background:radial-gradient(56% 50% at 84% 86%, rgba(240,90,98,.22), transparent 72%);
}
/* and a scrim that protects the text column */
.roibg::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(152deg,
    var(--bg) 0%, rgba(8,7,13,.92) 22%, rgba(8,7,13,.62) 44%, transparent 72%);
}
.roibg svg{
  right:-4%; bottom:-4%; width:68%; opacity:.85;
  translate:8px 8px;
}
.roicol:hover .roibg svg{translate:0 0}

/* the drawing must sit under the scrim */
.roibg svg{z-index:0}

/* speed: fewer, softer streaks so it reads as motion, not as lines */
.roibg .streak path:nth-child(1),
.roibg .streak path:nth-child(4){display:none}
.roibg .streak path{stroke:rgba(255,170,120,.28); stroke-width:1.6}

/* ---------- quality: a target hit three times in the same place ---------- */
.roibg .ring{fill:none; stroke:rgba(255,138,144,.30); stroke-width:1.3}
.roibg .ring.r2{stroke:rgba(255,138,144,.38)}
.roibg .ring.r3{stroke:rgba(255,138,144,.5)}
.roibg .bull{fill:rgba(240,90,98,.32); stroke:var(--red-2); stroke-width:1.3}
.roibg .cross{fill:none; stroke:rgba(255,138,144,.36); stroke-width:1.3; stroke-linecap:round}
.roibg .target circle,.roibg .target path{
  transform-box:fill-box; transform-origin:center;
  scale:.86; opacity:0; transition:scale .55s var(--ease), opacity .4s var(--ease);
}
.roicol:hover .roibg .target circle,
.roicol:hover .roibg .target path{scale:1; opacity:1}
.roibg .target .r1{transition-delay:.02s} .roibg .target .r2{transition-delay:.10s}
.roibg .target .r3{transition-delay:.18s} .roibg .target .bull{transition-delay:.26s}
.roibg .target .cross{transition-delay:.34s}

.roibg .hit{fill:#fff; opacity:0; transform-box:fill-box; transform-origin:center; scale:2.4;
  transition:opacity .28s var(--ease), scale .34s cubic-bezier(.2,.9,.3,1)}
.roicol:hover .roibg .hit{opacity:.95; scale:1}
.roibg .hit:nth-child(1){transition-delay:.44s}
.roibg .hit:nth-child(2){transition-delay:.60s}
.roibg .hit:nth-child(3){transition-delay:.76s}

@media (prefers-reduced-motion:reduce){
  .roibg .target circle,.roibg .target path,.roibg .hit{transition:none; opacity:1; scale:1}
}

/* ============================================================
   V23 — the time/money panel, rebuilt simple.
   The old one cross-faded two absolutely positioned views on an
   11s loop. Both halves were in the air at once and it read as
   broken. Nothing moves now except two bars filling once.
   ============================================================ */

.tm2{display:grid; gap:clamp(18px,2.2vw,26px)}
.tmr{display:grid; gap:7px}
.tmk{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.tmn{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.tmn em{font-style:normal; font-family:var(--f-display); font-weight:600;
  font-size:clamp(16px,1.7vw,20px); letter-spacing:-.03em; color:rgba(255,255,255,.5);
  text-decoration:line-through; text-decoration-thickness:1.5px;
  text-decoration-color:rgba(255,255,255,.35)}
.tmn i{font-style:normal; font-family:var(--f-mono); font-size:14px; color:rgba(255,255,255,.55)}
.tmn b{font-family:var(--f-display); font-weight:700; letter-spacing:-.04em; line-height:1;
  font-size:clamp(26px,3.2vw,40px); color:#fff; font-variant-numeric:tabular-nums}

.tmt{position:relative; display:block; height:7px; border-radius:4px; overflow:hidden;
  background:rgba(0,0,0,.26)}
.tmt .was{position:absolute; inset:0; background:rgba(255,255,255,.20); border-radius:4px}
.tmt .now{position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:#fff;
  width:0; animation:tmfill 1.1s cubic-bezier(.2,.75,.3,1) .35s forwards}
.tmt .now.t{--w:5%}
.tmt .now.m{--w:19%}
@keyframes tmfill{to{width:var(--w)}}

.tml{font-size:13px; line-height:1.5; color:rgba(255,255,255,.78)}
.tmnote{
  margin:0; padding-top:13px; border-top:1px solid rgba(255,255,255,.2);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.07em;
  color:rgba(255,255,255,.55); line-height:1.6;
}
@media (prefers-reduced-motion:reduce){ .tmt .now{animation:none; width:var(--w)} }




/* ============================================================
   V25 — meteors that behave like meteors.
   The first pass had four identical streaks at the same angle
   crossing the whole screen, which is why it read as a machine.
   Each one now has its own angle, trail length, thickness,
   travel distance and burn-out point, and its flight is kept
   on screen. Some flick and are gone, one or two run a long
   way. None is larger than the old ones.
   ============================================================ */

.sky u{
  position:absolute; display:block;
  width:var(--len,70px); height:var(--th,1px); border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5) 54%, #fff);
  opacity:0; will-change:transform, opacity;
  transform:translate3d(0,0,0) rotate(var(--a,30deg));
}
.sky u::after{
  content:''; position:absolute; right:calc(var(--dot,2px) * -.5); top:50%;
  width:var(--dot,2px); height:var(--dot,2px); margin-top:calc(var(--dot,2px) * -.5);
  border-radius:50%; background:#fff;
  box-shadow:0 0 6px 1px rgba(255,214,204,.7);
}

/* ============================================================
   V27 — no more than two meteors in the sky at once.
   Every meteor shares one 20s period, and their delays are
   spread across it, so the overlap can be counted rather than
   hoped for. Only one pair is scheduled close enough to burn
   together; the rest are alone. Each burn is under two seconds.
   Simulated over a full period: never more than 2 lit.
   ============================================================ */

@keyframes ma{
  0%      {transform:translate3d(0,0,0) rotate(var(--a)); opacity:0}
  1%      {opacity:.9}
  4%      {opacity:.75}
  5.5%    {transform:translate3d(var(--dx),var(--dy),0) rotate(var(--a)); opacity:0}
  100%    {transform:translate3d(var(--dx),var(--dy),0) rotate(var(--a)); opacity:0}
}
@keyframes mb{
  0%      {transform:translate3d(0,0,0) rotate(var(--a)); opacity:0}
  1%      {opacity:1}
  5%      {opacity:.8}
  7.2%    {transform:translate3d(var(--dx),var(--dy),0) rotate(var(--a)); opacity:0}
  100%    {transform:translate3d(var(--dx),var(--dy),0) rotate(var(--a)); opacity:0}
}
@keyframes mc{
  0%      {transform:translate3d(0,0,0) rotate(var(--a)); opacity:0}
  1%      {opacity:.95}
  6.5%    {opacity:.7}
  9.5%    {transform:translate3d(var(--dx),var(--dy),0) rotate(var(--a)); opacity:0}
  100%    {transform:translate3d(var(--dx),var(--dy),0) rotate(var(--a)); opacity:0}
}

.sky .k1{top:43.5%; left:91.5%; --a:120.2deg; --dx:-20.9vw; --dy:35.9vh; --len:48px; --th:1.0px; --dot:1.6px; animation:mb 20.0s linear infinite 0.0s}
.sky .k2{top:36.2%; left:9.9%; --a:20.3deg; --dx:9.3vw; --dy:3.5vh; --len:36px; --th:1.0px; --dot:1.6px; animation:ma 20.0s linear infinite 0.85s}
.sky .k3{top:75.3%; left:54.6%; --a:29.5deg; --dx:11.2vw; --dy:6.3vh; --len:38px; --th:1.0px; --dot:1.6px; animation:mc 20.0s linear infinite 4.3s}
.sky .k4{top:34.4%; left:62.2%; --a:55.3deg; --dx:5.7vw; --dy:8.3vh; --len:85px; --th:1.3px; --dot:2.7px; animation:ma 20.0s linear infinite 7.1s}
.sky .k5{top:45.5%; left:-1.7%; --a:32.1deg; --dx:8.6vw; --dy:5.4vh; --len:48px; --th:1.0px; --dot:1.6px; animation:mb 20.0s linear infinite 9.7s}
.sky .k6{top:60.2%; left:17.7%; --a:64.0deg; --dx:4.7vw; --dy:9.6vh; --len:40px; --th:1.0px; --dot:1.6px; animation:ma 20.0s linear infinite 12.2s}
.sky .k7{top:41.1%; left:70.3%; --a:67.0deg; --dx:13.8vw; --dy:32.5vh; --len:78px; --th:1.3px; --dot:2.2px; animation:mc 20.0s linear infinite 15.4s}
.sky .k8{top:3.3%; left:68.7%; --a:41.7deg; --dx:17.8vw; --dy:15.9vh; --len:80px; --th:1.3px; --dot:2.7px; animation:mb 20.0s linear infinite 17.9s}

@media (prefers-reduced-motion:reduce){ .sky u{display:none} }

/* ============================================================
   V26 — the card art was only reading on Cash.
   Cash draws with fills; the other four drew with 1px strokes at
   30% alpha, and under the text scrim that is nothing. Every card
   now carries Cash's weight, the scrim releases the bottom-right
   corner earlier, and the reveal lands in about a third of the
   time so a quick hover still shows it.
   ============================================================ */

.roibg svg{opacity:1}

/* the scrim keeps the text column dark but lets the corner go */
.roibg::after{
  background:linear-gradient(152deg,
    var(--bg) 0%, rgba(8,7,13,.94) 20%, rgba(8,7,13,.58) 36%, transparent 56%);
}
/* and a touch more warmth under the drawing itself */
.roibg::before{
  background:radial-gradient(58% 54% at 84% 86%, rgba(240,90,98,.30), transparent 72%);
}

/* ---- revenue ---- */
.roibg .ax{stroke:rgba(255,138,144,.34); stroke-width:1.1}
.roibg .f {fill:rgba(240,90,98,.26)}
.roibg .l {stroke-width:2.4; transition-duration:.55s; transition-delay:.04s}
.roibg .d {transition-duration:.2s}
.roibg .d:nth-of-type(1){transition-delay:.24s} .roibg .d:nth-of-type(2){transition-delay:.31s}
.roibg .d:nth-of-type(3){transition-delay:.38s} .roibg .d:nth-of-type(4){transition-delay:.45s}
.roibg .d:nth-of-type(5){transition-delay:.52s}
.roibg .t {fill:rgba(255,138,144,.52); font-size:8px}

/* ---- cost ---- */
.roibg .glyph{fill:rgba(240,90,98,.30)}
.roibg .bars rect{fill:rgba(255,138,144,.40); transition-duration:.34s}
.roibg .bars rect:nth-child(1){transition-delay:.03s} .roibg .bars rect:nth-child(2){transition-delay:.09s}
.roibg .bars rect:nth-child(3){transition-delay:.15s} .roibg .bars rect:nth-child(4){transition-delay:.21s}
.roibg .l.tip{transition-delay:.40s}

/* ---- speed ---- */
.roibg .bolt{fill:rgba(240,90,98,.34); stroke:var(--red-2); stroke-width:.55}
.roibg .streak path{stroke:rgba(255,170,120,.46); stroke-width:2; transition-duration:.36s}
.roibg .streak path:nth-child(2){transition-delay:.04s}
.roibg .streak path:nth-child(3){transition-delay:.12s}

/* ---- quality ---- */
.roibg .ring   {stroke:rgba(255,138,144,.42); stroke-width:1.6}
.roibg .ring.r2{stroke:rgba(255,138,144,.52)}
.roibg .ring.r3{stroke:rgba(255,138,144,.66)}
.roibg .bull   {fill:rgba(240,90,98,.46); stroke:var(--red-2); stroke-width:1.6}
.roibg .cross  {stroke:rgba(255,138,144,.48); stroke-width:1.5}
.roibg .target circle,.roibg .target path{transition-duration:.32s}
.roibg .target .r1{transition-delay:.01s} .roibg .target .r2{transition-delay:.06s}
.roibg .target .r3{transition-delay:.11s} .roibg .target .bull{transition-delay:.16s}
.roibg .target .cross{transition-delay:.21s}
.roibg .hit{transition-duration:.22s}
.roibg .hit:nth-child(1){transition-delay:.26s}
.roibg .hit:nth-child(2){transition-delay:.35s}
.roibg .hit:nth-child(3){transition-delay:.44s}

/* ---- cash: already the right weight, just match the new timing ---- */
.roibg .n1{transition-delay:.03s} .roibg .n2{transition-delay:.11s} .roibg .n3{transition-delay:.19s}

/* ============================================================
   V28 — the objection cards, hover cleaned up.
   V24 put a 2px bar down the left edge, square, running the full
   height of a card with a 20px radius and no clipping, so it
   poked out past both rounded corners as two little spikes.
   Removed. The hover now reads through the border, the lift and
   the warm tint, which were already doing the work.
   ============================================================ */
.qtrack .tcard{
  border-radius:var(--r);
  transition:border-color .3s var(--ease), background .3s var(--ease),
             translate .3s var(--ease), box-shadow .3s var(--ease);
}
.qtrack .tcard:hover{
  translate:0 -3px; transform:none;
  border-color:rgba(240,90,98,.45);
  box-shadow:0 16px 40px -22px rgba(240,90,98,.55);
}

/* ============================================================
   V29 — all five cards now share Cash's construction.
   Cash read well because it is made of solid, layered objects
   with mass. The other four were thin line diagrams, which is
   why they looked weak next to it. Same three fanned plates on
   every card now; only the motif on the front plate changes.
   ============================================================ */

/* the motifs sit on top of the plate fill, so they need to win */
.roibg .note .col{fill:rgba(255,138,144,.62); stroke:none}
.roibg .note .col.hot{fill:var(--red-2)}
.roibg .note .dash{fill:rgba(255,170,120,.42); stroke:none}
.roibg .note .badge rect{fill:rgba(240,90,98,.30); stroke:rgba(255,138,144,.60); stroke-width:1.2}
.roibg .bglyph{font-family:var(--f-display); font-weight:700; font-size:16px;
  fill:var(--red-2); text-anchor:middle}
.roibg .arw{fill:none; stroke:var(--red-2); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.roibg .bolt2{fill:var(--red-2); stroke:none}
.roibg .seal circle{fill:rgba(240,90,98,.26); stroke:rgba(255,138,144,.65); stroke-width:1.4}
.roibg .tick{fill:none; stroke:#fff; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round}
.roibg .tick.faint{stroke:rgba(255,138,144,.55); stroke-width:2.2}

/* the old line-drawing vocabulary is no longer used by any card */
.roibg .ax,.roibg .f,.roibg .l,.roibg .d,.roibg .t,.roibg .glyph,
.roibg .bars,.roibg .streak,.roibg .bolt,.roibg .target,.roibg .hits{display:none}

/* ============================================================
   V30 — one recognisable object per card.
   Making all five share Cash's three-plate construction gave
   them Cash's weight but stripped their meaning: plates are
   banknotes, and banknotes only mean something on Cash. Each
   card now has its own object, built with the same density:
   a job board, a receipt, a stopwatch, a seal, and the notes.
   ============================================================ */

.roibg .ob   {fill:rgba(240,90,98,.16); stroke:rgba(255,138,144,.46); stroke-width:1.3;
              stroke-linejoin:round}
.roibg .ob2  {fill:rgba(240,90,98,.09); stroke:rgba(255,138,144,.26); stroke-width:1.1;
              stroke-linejoin:round}
.roibg .dtl  {fill:rgba(255,138,144,.34); stroke:none}
.roibg .dtl2 {fill:none; stroke:rgba(255,138,144,.28); stroke-width:1; stroke-dasharray:3 4}
.roibg .acc  {fill:var(--red-2); stroke:none}
.roibg .accs {fill:none; stroke:var(--red-2); stroke-width:2.6;
              stroke-linecap:round; stroke-linejoin:round}
.roibg .row  {fill:rgba(255,138,144,.22); stroke:none}
.roibg .row.on{fill:rgba(255,138,144,.5)}
.roibg .dash {fill:rgba(255,170,120,.42); stroke:none}
.roibg .oTick{fill:none; stroke:rgba(255,138,144,.55); stroke-width:2; stroke-linecap:round}
.roibg .notch{fill:none; stroke:rgba(255,138,144,.55); stroke-width:4; stroke-dasharray:1.5 9;
              stroke-linecap:round}
.roibg .hand {stroke-width:2.4}
.roibg .check{stroke-width:3.2; stroke:#fff}

/* both layers arrive like the notes do */
.roibg .oa{opacity:0; transition:opacity .42s var(--ease), translate .55s var(--ease)}
.roicol:hover .roibg .oa{opacity:1; translate:0 0}
.roibg .oa.back {translate:0 14px; transition-delay:.02s}
.roibg .oa.front{translate:0 7px;  transition-delay:.12s}

@media (prefers-reduced-motion:reduce){
  .roibg .oa{transition:none; opacity:1; translate:0 0}
}

/* jumping to the audit should not tuck it under the sticky nav */
#audit{scroll-margin-top:clamp(90px,11vh,140px)}

/* ============================================================
   V32 — revenue and cost get silhouettes of their own.
   The job board and the receipt were both rounded rectangles,
   the same shape as the card holding them, so they read as
   another panel rather than an object. Coins and scissors do
   not appear anywhere else on the page.
   ============================================================ */

.roibg .face   {fill:rgba(255,138,144,.30); stroke:none}
.roibg .stem   {stroke-width:7; stroke:var(--red-2); stroke-linecap:butt}
.roibg .head   {fill:var(--red-2); stroke:none}
.roibg .blade  {fill:none; stroke:rgba(255,138,144,.58); stroke-width:7.5; stroke-linecap:round}
.roibg .ring2  {fill:rgba(240,90,98,.14); stroke:rgba(255,138,144,.58); stroke-width:6}
.roibg .cutline{fill:none; stroke:rgba(255,138,144,.30); stroke-width:2.4;
                stroke-dasharray:9 7; stroke-linecap:round}

/* ============================================================
   V33 — revenue and cost, drawn thick enough to read.
   Position was never the problem: all five already put ~73% of
   their ink in the clear bottom-right corner. The problem was
   feature size. The three cards that work are each one dominant
   shape around 80px; the coin walls were 4px and the scissor
   blades 7px on a 158px canvas, which is below the size anything
   reads at. One bold form per card now, nothing fine.
   ============================================================ */

.roibg .fat{
  fill:none; stroke:var(--red-2); stroke-width:9.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.roibg .fat.blade{stroke:rgba(255,150,150,.85); stroke-width:11}
.roibg .ring2{fill:none; stroke:rgba(255,150,150,.85); stroke-width:9}
.roibg .cutline{stroke:rgba(255,138,144,.42); stroke-width:3; stroke-dasharray:11 9}
.roibg .ob2{fill:rgba(240,90,98,.16); stroke:rgba(255,138,144,.30); stroke-width:1.2}

/* ============================================================
   V34 — the art gets its own room, and stops sitting under
   the copy.
   Measured on a 238x249 card: the paragraph runs y107 to y224,
   and the drawing box was x74-238 / y154-249. The art was
   literally behind the last four lines of text. That is why
   nothing read, and why the copy got harder to read with it.
   Every card now reserves a strip under the paragraph. The
   drawing lives there at full strength with nothing on top of
   it, and it is visible at rest instead of only on hover.
   ============================================================ */

.roicol{padding-bottom:112px}

/* the scrim existed only to protect text from the drawing.
   nothing sits over the drawing any more, so it goes. */
.roibg::after{content:none}

/* the warm ground now pools under the strip, not behind the copy */
.roibg::before{
  inset:auto 0 0 0; height:170px;
  background:radial-gradient(76% 100% at 74% 104%, rgba(240,90,98,.26), transparent 72%);
  opacity:0; transition:opacity .42s var(--ease);
}
.roicol:hover .roibg::before{opacity:1}

.roibg svg{
  right:clamp(14px,1.6vw,20px); bottom:14px; left:auto; top:auto;
  width:112px; height:84px;
  opacity:.5; translate:0 0;
  transition:opacity .42s var(--ease), translate .5s var(--ease);
}
.roicol:hover .roibg svg{opacity:1; translate:0 -3px}

/* the layers are no longer a hover reveal: every card wears its
   mark at rest, so the meaning is there before anyone touches it */
.roibg .oa{opacity:1; translate:0 0}
.roibg .note{opacity:1}
.roibg .n1,.roibg .n2,.roibg .n3{translate:0 0}

/* ---- revenue: one smooth coin ---- */
.roibg .coin {fill:rgba(240,90,98,.46); stroke:rgba(255,168,168,.92); stroke-width:3.4}
.roibg .coinr{fill:none; stroke:rgba(255,178,178,.42); stroke-width:2}
.roibg .coin2{fill:rgba(240,90,98,.15); stroke:rgba(255,150,150,.34); stroke-width:2.8}
.roibg .csym {font-family:var(--f-display); font-weight:700; font-size:46px;
              fill:#fff; opacity:.94; text-anchor:middle; dominant-baseline:central}

/* ---- cost: one heavy arrow, pointed down ---- */
.roibg .darr {fill:rgba(240,90,98,.46); stroke:rgba(255,168,168,.92); stroke-width:3.2;
              stroke-linejoin:round}
.roibg .darr2{fill:rgba(240,90,98,.15); stroke:rgba(255,150,150,.34); stroke-width:2.6;
              stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  .roicol:hover .roibg svg{translate:0 0}
}

/* the art layer still resolved to the old inset:-30% box, which pushed
   the drawing 100px below the card and straight into overflow:hidden.
   it is also no longer the opacity gate: the svg and the glow each
   carry their own, so the mark can show at rest. */
.roibg{inset:0; opacity:1}

/* ============================================================
   V35 — the closing call to action was unreadable, twice over.
   `.foot a` (0,1,1) was beating `.b-red` (0,1,0), so every
   button in the footer took the grey LINK colour: the label
   measured 1.67:1 against its own fill. And the red button on
   the red bloom measured 1.79:1 against the gradient behind it.
   The strongest ask on the page was two invisible things
   stacked on top of each other.
   ============================================================ */

/* white is the only fill that separates from a saturated orange
   bloom, and it is the highest-contrast button a page can have */
.fcta .b-red{
  background:#fff; color:#13101a; border-color:rgba(255,255,255,.92);
  box-shadow:0 12px 34px -12px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.22);
  transition:background .3s var(--ease), color .3s var(--ease),
             box-shadow .3s var(--ease), translate .3s var(--ease);
}
.fcta .b-red:hover{
  background:#fff; color:#000; translate:0 -2px;
  box-shadow:0 18px 44px -12px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.55);
}

/* the second button has to read as a second choice, not a dead one */
.fcta .b-ghost{
  background:rgba(10,8,14,.36); color:#fff; border-color:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  transition:background .3s var(--ease), border-color .3s var(--ease), translate .3s var(--ease);
}
.fcta .b-ghost:hover{background:rgba(10,8,14,.58); border-color:#fff; translate:0 -2px}

/* the sub-line sits on the brightest part of the bloom; it carries
   a warm dark halo instead of us dimming the gradient */
.fcta p{
  color:#fff;
  text-shadow:0 1px 2px rgba(58,10,10,.78), 0 2px 18px rgba(36,6,6,.82);
}

/* ============================================================
   V37 — meteors are built in JS now, from a velocity vector.
   The eight hand-placed ones each drew their streak at an angle
   that disagreed with the direction they were flying, by 7.7 to
   14.4 degrees, so every one of them crabbed sideways. The new
   ones take the angle FROM the velocity, so the disagreement is
   not possible. These rules only describe what one looks like.
   ============================================================ */

/* the element is a point that travels; the children hang off it */
.sky u.mt{
  position:absolute; left:0; top:0; width:0; height:0;
  background:none; border-radius:0; opacity:1;
  will-change:transform;
}
.sky u.mt::after{content:none}

/* the wake. white-hot at the head, cooling to sodium orange behind it,
   which is the colour an ablating meteor actually leaves. */
.sky u.mt .mt-t{
  position:absolute; right:0; top:0;
  width:var(--len); height:var(--th);
  margin-top:calc(var(--th) / -2);
  border-radius:var(--th);
  transform-origin:100% 50%;
  background:linear-gradient(90deg,
    rgba(255,140,70,0)    0%,
    rgba(255,146,78,.16) 22%,
    rgba(255,178,122,.42) 52%,
    rgba(255,224,196,.78) 82%,
    rgba(255,252,248,1)  100%);
  will-change:transform, opacity;
}

/* the head: a white core inside a halo that swells with brightness */
.sky u.mt .mt-h{
  position:absolute; right:0; top:0;
  width:var(--dot); height:var(--dot);
  margin:calc(var(--dot) / -2) calc(var(--dot) / -2) 0 0;
  border-radius:50%;
  background:radial-gradient(circle,
    #fff 0 12%,
    rgba(255,240,228,.92) 22%,
    rgba(255,196,150,.42) 44%,
    rgba(255,150,96,.14) 64%,
    transparent 76%);
  will-change:transform, opacity;
}

/* ============================================================
   V38 — the orange block, rewritten around Mark's own story,
   and the panel rebuilt as a readout instead of two bars.
   The demo-data footnote is gone; the run is labelled a sample
   inside the panel and the block carries a quiet corner mark.
   ============================================================ */

.hot em{font-style:normal; font-weight:700; color:#fff;
  text-shadow:0 0 22px rgba(255,255,255,.35)}

/* the corner mark. present, legible if you look for it, invisible if you don't */
.hotfine{
  position:absolute; z-index:3; top:14px; right:16px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.34);
  transition:color .3s var(--ease); pointer-events:none;
}
.hot:hover .hotfine{color:rgba(255,255,255,.62)}

/* ---------- the readout ---------- */
.hud{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r); padding:clamp(18px,2.1vw,26px);
  background:linear-gradient(162deg, rgba(10,5,13,.86), rgba(6,3,9,.92));
  border:1px solid rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px -30px rgba(0,0,0,.9);
  display:grid; gap:clamp(15px,1.8vw,21px);
}
.hud > *{position:relative; z-index:2}

/* the faint instrument grid */
.hudgrid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.055) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04)  0 1px, transparent 1px 26px);
  -webkit-mask-image:radial-gradient(112% 92% at 78% 12%, #000 18%, transparent 84%);
  mask-image:radial-gradient(112% 92% at 78% 12%, #000 18%, transparent 84%);
}
/* a sweep down the face of the instrument */
.hudscan{
  position:absolute; left:0; right:0; top:0; height:42%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%, rgba(255,186,150,.05) 62%, rgba(255,214,190,.14) 92%, rgba(255,236,224,.30) 100%);
  animation:hudsweep 6.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes hudsweep{
  0%,8%   {transform:translateY(-105%); opacity:0}
  16%     {opacity:1}
  72%     {opacity:1}
  86%,100%{transform:translateY(255%); opacity:0}
}

/* corner brackets, because an instrument has a frame */
.hudbr{position:absolute; z-index:2; width:13px; height:13px; pointer-events:none;
  border:1.5px solid rgba(255,255,255,.42)}
.hudbr.tl{top:9px;  left:9px;  border-right:0; border-bottom:0}
.hudbr.tr{top:9px;  right:9px; border-left:0;  border-bottom:0}
.hudbr.bl{bottom:9px; left:9px;  border-right:0; border-top:0}
.hudbr.br{bottom:9px; right:9px; border-left:0;  border-top:0}

.hudtop{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:clamp(12px,1.4vw,16px); border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase;
}
.hudtag{display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.9)}
.hudtag i{
  width:6px; height:6px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.65); animation:hudpulse 2.1s ease-out infinite;
}
@keyframes hudpulse{
  0%  {box-shadow:0 0 0 0 rgba(255,255,255,.55)}
  70% {box-shadow:0 0 0 7px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
.hudpath{color:rgba(255,255,255,.52)}

.hudrow{display:grid; gap:9px}
.hudk{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.58);
}
.hudn{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
.hudn em{
  font-style:normal; font-family:var(--f-mono); font-size:clamp(14px,1.5vw,17px);
  color:rgba(255,255,255,.46); font-variant-numeric:tabular-nums;
  text-decoration:line-through; text-decoration-thickness:1.4px;
  text-decoration-color:rgba(255,255,255,.34);
}
.hudn i{font-style:normal; font-family:var(--f-mono); font-size:13px; color:rgba(255,255,255,.4)}
.hudn b{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.045em; line-height:1;
  font-size:clamp(28px,3.4vw,44px); color:#fff; font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(255,208,182,.45);
}
.hudn b.counting{color:#ffd9c6; text-shadow:0 0 30px rgba(255,180,140,.8)}

.hudbar{position:relative; display:block; height:8px; border-radius:5px; overflow:hidden;
  background:rgba(0,0,0,.42); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hudbar u{position:absolute; top:0; bottom:0; left:0; border-radius:5px}
.hudbar .was{right:0; background:repeating-linear-gradient(115deg,
  rgba(255,255,255,.20) 0 5px, rgba(255,255,255,.07) 5px 10px)}
.hudbar .now{
  width:var(--w); background:linear-gradient(90deg, rgba(255,190,150,.9), #fff);
  box-shadow:0 0 14px 1px rgba(255,214,190,.7);
}
.hud.armed .hudbar .now{animation:hudfill 1.25s cubic-bezier(.2,.75,.3,1)}
@keyframes hudfill{from{width:0} to{width:var(--w)}}

.hudfoot{display:flex; flex-wrap:wrap; gap:7px;
  padding-top:clamp(12px,1.4vw,16px); border-top:1px solid rgba(255,255,255,.14)}
.hudchip{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 9px; border-radius:6px;
  border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.74);
}
.hudchip.on{background:rgba(255,255,255,.92); border-color:#fff; color:#2a0a10; font-weight:700}

@media (prefers-reduced-motion:reduce){
  .hudscan,.hudtag i{animation:none}
  .hudscan{opacity:0}
  .hud.armed .hudbar .now{animation:none}
}

/* the copy column tripled in length, and white at 88% on the bright end
   of the gradient measures 2.72:1. a scrim under the text side only:
   the orange stays vivid everywhere it is not carrying words. */
.hot::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(99deg,
    rgba(54,3,13,.46) 0%, rgba(54,3,13,.40) 26%, rgba(54,3,13,.14) 45%, transparent 57%);
}
.hot > div{position:relative; z-index:1}
.hot p{color:#fff}
.hot .ticks li{color:#fff}

/* ============================================================
   V39 — the ask, sitting between the hero and the first
   explainer. The hero tells them what we do; this tells them
   the next move costs nothing and the thing it fixes does not.
   It borrows the instrument frame from the block 08 readout on
   purpose, so the brackets and the sweep read as one system
   across the page rather than as decoration in two places.
   ============================================================ */

.ask{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid rgba(240,90,98,.30);
  background:linear-gradient(148deg, #170f1d 0%, #0d0913 52%, #120a16 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px -50px rgba(240,90,98,.6);
  padding:clamp(26px,3.6vw,52px);
  display:grid; grid-template-columns:1.3fr .95fr; gap:clamp(24px,3.4vw,54px);
  align-items:center;
}
.ask > *{position:relative; z-index:2}
.ask > .hudgrid,.ask > .hudscan{z-index:0}
.ask > .hudbr{z-index:3}
@media (max-width:940px){ .ask{grid-template-columns:1fr} }

/* the warm corner, so the band is not a flat rectangle */
.ask::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(52% 78% at 6% 0%, rgba(255,116,58,.20), transparent 66%),
    radial-gradient(46% 74% at 98% 100%, rgba(240,90,98,.22), transparent 70%);
}

.asktag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-2);
}
.asktag i{
  width:6px; height:6px; border-radius:50%; background:var(--red-2);
  animation:hudpulse 2.1s ease-out infinite;
}
.askmain h2{
  margin:16px 0 0; color:#fff;
  font-family:var(--f-display); font-weight:700; letter-spacing:-.045em; line-height:1.02;
  font-size:clamp(27px,3.9vw,50px); text-wrap:balance;
}
.askmain p{
  margin:16px 0 0; max-width:54ch;
  font-size:clamp(14.5px,1.4vw,16.5px); line-height:1.66; color:var(--text-2);
}
.askmain .btns{margin-top:clamp(20px,2.4vw,30px)}

@media (prefers-reduced-motion:reduce){
  .asktag i{animation:none}
}

/* ============================================================
   V41 — the marker. Phrases that carry the argument get struck
   through with a highlighter as the block arrives, one after
   the other, so the eye is told where to land before anybody
   has decided to read the paragraph. The four measurement
   bullets are gone; that space is now the ask.
   ============================================================ */

.hot mark{
  background:none; color:#fff; font-weight:600;
  position:relative; padding:0 .16em; margin:0 -.1em;
  text-shadow:0 1px 8px rgba(70,8,16,.5);
}
.hot mark::before{
  content:''; position:absolute; z-index:-1;
  inset:-.12em -.04em -.16em;
  border-radius:3px;
  background:linear-gradient(104deg,
    rgba(255,255,255,.30) 0%, rgba(255,236,226,.40) 55%, rgba(255,255,255,.26) 100%);
  box-shadow:0 0 22px rgba(255,220,200,.30);
  transform-origin:0 50%; scale:0 1;
  transition:scale .52s cubic-bezier(.2,.75,.25,1);
}
.hot .rv.in mark::before,
.hot .in mark::before{scale:1 1}
.hot mark.m1::before{transition-delay:.35s}
.hot mark.m2::before{transition-delay:.62s}
.hot mark.m3::before{transition-delay:.86s}
.hot mark.m4::before{transition-delay:1.08s}
.hot mark.m5::before{transition-delay:1.28s}

/* ---------- the ask, where the four bullets used to be ---------- */
.hotcta{
  margin-top:clamp(24px,3vw,34px); padding-top:clamp(20px,2.4vw,26px);
  border-top:1px solid rgba(255,255,255,.26);
  display:grid; gap:14px; justify-items:start;
}
.hotcta p{
  margin:0; font-family:var(--f-display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(17px,1.9vw,22px); line-height:1.25; color:#fff;
}
.hotcta p b{font-weight:800}
/* white on this orange is the only fill that separates. measured 5.9:1
   against the gradient in the footer, and this is the same problem. */
.hotcta .btn{
  background:#fff; color:#2b0710; border-color:rgba(255,255,255,.9);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.2);
  transition:background .3s var(--ease), color .3s var(--ease),
             box-shadow .3s var(--ease), translate .3s var(--ease);
}
.hotcta .btn:hover{
  background:#fff; color:#000; translate:0 -2px;
  box-shadow:0 18px 42px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.55);
}
.hotcta .fine{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
}

@media (prefers-reduced-motion:reduce){
  .hot mark::before{transition:none; scale:1 1}
}

/* ============================================================
   V42 — the hero mark row reads as proof, not as a footnote.
   The logos sat at 42% opacity behind a grayscale filter, which
   on a dark hero is almost nothing. Full colour, larger, and
   the caption says what the row is actually for.
   ============================================================ */

.hero-foot .cap{
  font-family:var(--f-body); font-size:clamp(13px,1.15vw,14.5px); font-weight:500;
  letter-spacing:-.015em; text-transform:none; color:rgba(255,255,255,.78);
  max-width:15ch; line-height:1.35;
}

/* ============================================================
   V43 — the readout card, rebuilt around one example anybody
   in the trade recognises, and given weight.
   The sweep is gone. The card now sits on a slow organic tilt
   driven in JS, two sines on incommensurate periods so it never
   repeats, and the pointer takes it over when you touch it.
   The light source is tied to the same numbers, so the sheen
   slides across the face as the card turns.
   ============================================================ */

.hudstage{perspective:1200px; perspective-origin:50% 42%}
.hud{
  transform-style:preserve-3d;
  transition:box-shadow .4s var(--ease);
  will-change:transform;
}
/* the moving light. tied to --lx/--ly, which the tilt sets. */
.hudsheen{
  position:absolute; inset:0; z-index:4; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(56% 74% at var(--lx,50%) var(--ly,34%),
      rgba(255,238,228,.20), rgba(255,186,150,.07) 40%, transparent 72%),
    linear-gradient(var(--lang,160deg), rgba(255,255,255,.09) 0%, transparent 34%);
  mix-blend-mode:screen;
}

.hudwhat{
  margin:0; font-family:var(--f-body); font-size:clamp(14px,1.35vw,15.5px);
  color:rgba(255,255,255,.62); letter-spacing:-.01em;
}

.hudbig{display:grid; gap:7px; padding:clamp(4px,.6vw,8px) 0}
.hudbig b{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.055em; line-height:.92;
  font-size:clamp(54px,7vw,92px); color:#fff; font-variant-numeric:tabular-nums;
  text-shadow:0 0 44px rgba(255,204,178,.36);
}
.hudbig b.counting{color:#ffdccb; text-shadow:0 0 52px rgba(255,170,130,.75)}
.hudunit{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.46);
}

.hudcmp{display:grid; gap:11px; padding-top:clamp(13px,1.5vw,17px);
  border-top:1px solid rgba(255,255,255,.14)}
.hudline{display:grid; grid-template-columns:78px 1fr 46px; align-items:center; gap:12px}
.hudline .hl{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.hudline.on .hl{color:#fff}
.hudline .hbar{position:relative; display:block; height:9px; border-radius:5px; overflow:hidden;
  background:rgba(0,0,0,.45); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hudline .hbar u{position:absolute; left:0; top:0; bottom:0; width:var(--w); border-radius:5px;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.22) 0 5px, rgba(255,255,255,.07) 5px 10px)}
.hudline .hbar u.now{
  background:linear-gradient(90deg, rgba(255,190,150,.95), #fff);
  box-shadow:0 0 16px 1px rgba(255,214,190,.8);
}
.hud.armed .hudline .hbar u.now{animation:hudfill 1.25s cubic-bezier(.2,.75,.3,1)}
.hudline .hv{
  font-family:var(--f-mono); font-size:12.5px; text-align:right;
  font-variant-numeric:tabular-nums; color:rgba(255,255,255,.62);
}
.hudline.on .hv{color:#fff}

.hudsay{
  margin:0; padding-top:clamp(13px,1.5vw,17px); border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--f-body); font-size:clamp(13.5px,1.3vw,15px); line-height:1.5;
  color:rgba(255,255,255,.66);
}
.hudsay b{color:#fff; font-weight:700}

@media (prefers-reduced-motion:reduce){
  .hud{transform:none !important}
  .hudsheen{background:radial-gradient(56% 74% at 50% 30%, rgba(255,238,228,.14), transparent 70%)}
}

/* ============================================================
   V44 — the hero mark row, laid out explicitly.
   The caption and the reel were fighting over the same flex
   line, so the caption ran under the first logo and the name
   dropped below its icon. Nothing here inherits from the three
   older passes over this row.
   ============================================================ */


/* ============================================================
   V45 — the marker works anywhere, not only in block 08.
   Same draw-in, same stagger, tuned for a dark ground as well
   as the orange one.
   ============================================================ */

mark.mk{
  background:none; color:#fff; font-weight:600;
  position:relative; padding:0 .16em; margin:0 -.1em;
}
mark.mk::before{
  content:''; position:absolute; z-index:-1;
  inset:-.12em -.04em -.16em; border-radius:3px;
  background:linear-gradient(104deg,
    rgba(240,90,98,.46) 0%, rgba(255,116,58,.40) 58%, rgba(240,90,98,.34) 100%);
  box-shadow:0 0 24px rgba(240,90,98,.38);
  transform-origin:0 50%; scale:0 1;
  transition:scale .55s cubic-bezier(.2,.75,.25,1) .55s;
}
.rv.in mark.mk::before{scale:1 1}
@media (prefers-reduced-motion:reduce){
  mark.mk::before{transition:none; scale:1 1}
}

/* the row keeps the icon-over-name layout it was built with. only the
   two things Mark asked for change: the marks get bigger and they stop
   being dimmed. the reel steps in pixels, so the cell height and the
   keyframes have to move together or the window lands between marks. */
.slot{width:clamp(112px,12.5vw,156px); height:60px}
.cell{height:60px; gap:6px}
.cell .ic{
  width:34px; height:34px; border-radius:9px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.12);
}
.cell .ic img{width:22px; height:22px; opacity:1; filter:none}
.cell .nm{font-size:12px; font-weight:600; color:rgba(240,236,250,.78)}
.hero-foot:hover .cell .ic{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.2)}
.hero-foot:hover .cell .ic img{opacity:1; filter:none}
.hero-foot:hover .cell .nm{color:#fff}

.reel{animation-name:reelcell60}
@keyframes reelcell60{
  0%,      15.111% { transform:translate3d(0,0,0) }
  16.667%, 31.778% { transform:translate3d(0,-60px,0) }
  33.333%, 48.444% { transform:translate3d(0,-120px,0) }
  50%,     65.111% { transform:translate3d(0,-180px,0) }
  66.667%, 81.778% { transform:translate3d(0,-240px,0) }
  83.333%, 98.444% { transform:translate3d(0,-300px,0) }
  100%             { transform:translate3d(0,-360px,0) }
}
@media (max-width:760px){
  .slot{width:clamp(88px,24vw,116px); height:52px}
  .cell{height:52px; gap:5px}
  .cell .ic{width:27px; height:27px; border-radius:7px}
  .cell .ic img{width:17px; height:17px}
  .cell .nm{font-size:10.5px}
  .reel{animation-name:reelcell52}
  @keyframes reelcell52{
    0%,      15.111% { transform:translate3d(0,0,0) }
    16.667%, 31.778% { transform:translate3d(0,-52px,0) }
    33.333%, 48.444% { transform:translate3d(0,-104px,0) }
    50%,     65.111% { transform:translate3d(0,-156px,0) }
    66.667%, 81.778% { transform:translate3d(0,-208px,0) }
    83.333%, 98.444% { transform:translate3d(0,-260px,0) }
    100%             { transform:translate3d(0,-312px,0) }
  }
}

/* the caption was a flex item shrinking to 146px while its text ran on
   past the box and into the first mark. it gets its own width now. */
.hero-foot .cap{flex:0 0 auto; max-width:16ch; line-height:1.35}

/* third time this exact trap has bitten: a blanket `X > *` rule at equal
   specificity, later in the file, stripping position:absolute off the
   decorations. Here it turned four corner brackets and the grid into
   real grid items, which pushed the copy into the second column. */
.ask > .hudbr,.ask > .hudgrid,.ask > .hudsheen{position:absolute}

/* ============================================================
   V46 — the meteors were rendering the whole time, just too
   faint to find. Measured on a black ground: the median head
   peaked at rgb(173,171,172) inside a soft 10px halo whose
   solid white core was sub-pixel, and the wake sat near 0.25
   alpha. The old CSS ones were a solid dot in a tight glow.
   Tighter core, harder falloff, brighter wake.
   ============================================================ */

/* before the first frame the children have no inline opacity, which
   would flash them at full strength in the top left corner */
.sky u.mt .mt-t,.sky u.mt .mt-h{opacity:0}

.sky u.mt .mt-h{
  background:radial-gradient(circle,
    #fff 0 26%,
    rgba(255,246,238,.92) 38%,
    rgba(255,206,168,.46) 56%,
    rgba(255,152,98,.16) 74%,
    transparent 88%);
}
.sky u.mt .mt-t{
  background:linear-gradient(90deg,
    rgba(255,140,70,0)    0%,
    rgba(255,150,86,.28) 18%,
    rgba(255,190,140,.62) 48%,
    rgba(255,230,206,.92) 78%,
    #fff                 100%);
}

/* the corner brackets are gone from the markup; the rules go with them
   so nothing later accidentally revives a stray one */
.hudbr{display:none}

/* ============================================================
   V47 — the lead window, the welcome card, and the menu promo.
   Instrument language, no corner brackets: a faint grid, a
   light that follows the tilt, mono micro-labels and one
   dominant statement. Nothing here opens a second page.
   ============================================================ */

/* ---------- the menu promo, given weight ---------- */
.mpromo{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(158deg, #1a1220 0%, #100b17 58%, #150d1a 100%);
  border:1px solid rgba(240,90,98,.32); border-radius:14px;
  padding:17px; display:flex; flex-direction:column; gap:10px;
  transform-style:preserve-3d; will-change:transform;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 44px -28px rgba(240,90,98,.7);
}
.mpromo > *{position:relative; z-index:2}
.mpgrid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 1px, transparent 1px 22px);
  -webkit-mask-image:radial-gradient(110% 90% at 82% 8%, #000 14%, transparent 82%);
  mask-image:radial-gradient(110% 90% at 82% 8%, #000 14%, transparent 82%);
}
.mpsheen{
  position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:radial-gradient(58% 70% at var(--lx,50%) var(--ly,26%),
    rgba(255,224,206,.16), rgba(255,150,110,.05) 44%, transparent 76%);
  mix-blend-mode:screen;
}
.mptag{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase;
  color:var(--red-2);
}
.mptag i{width:5px; height:5px; border-radius:50%; background:var(--red-2);
  animation:hudpulse 2.1s ease-out infinite}
.mpromo h6{
  margin:0; font-family:var(--f-display); font-weight:700; letter-spacing:-.03em;
  font-size:19px; color:#fff; text-transform:none;
}
.mpromo p{margin:0; font-size:12.5px; line-height:1.55; color:var(--text-2)}
.mplist{list-style:none; margin:2px 0 0; padding:0; display:grid; gap:6px}
.mplist li{
  position:relative; padding-left:15px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.mplist li::before{
  content:''; position:absolute; left:0; top:.42em;
  width:5px; height:5px; border-radius:1px; background:var(--red-2);
}
.mpromo .btn{margin-top:4px}

body.lmopen{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .lmveil,.lmbox,.wc{transition:none}
  .lmcheck path{animation:none; stroke-dashoffset:0}
  .mptag i,.lmtag i,.wctag i{animation:none}
}

/* the tilt now carries its own perspective in the transform, so the
   stage must not apply a second one or the two compound */
.hudstage{perspective:none}


/* ============================================================
   V48 — the menu entries get marked as you run down them.
   Same highlighter as the copy on the page, so hovering a
   process reads as picking it up rather than as a link state.
   ============================================================ */
.mcol a{position:relative; isolation:isolate}
.mcol a > b,.mcol a{z-index:1}
.mcol a::before{
  content:''; position:absolute; z-index:-1;
  left:-7px; right:-7px; top:-3px; height:1.35em;
  border-radius:5px;
  background:linear-gradient(104deg, rgba(240,90,98,.34), rgba(255,116,58,.24) 62%, rgba(240,90,98,.16));
  transform-origin:0 50%; scale:0 1;
  transition:scale .34s cubic-bezier(.2,.75,.25,1);
}
.mcol a:hover::before,.mcol a:focus-visible::before{scale:1 1}
.mcol a:hover{color:#fff}
.mcol a i{position:relative; z-index:1}

@media (prefers-reduced-motion:reduce){ .mcol a::before{transition:none} }

/* measured: the link is 52px tall with 8px/10px padding, so the title
   sits in the band from 8px to 28px. The bar was 1.35em from -3px,
   which covered only its top half. */
.mcol a::before{left:4px; right:4px; top:5px; height:24px}

/* ============================================================
   V49 — the page stops scrolling sideways.
   The logo marquee was held in by a mask only. A mask hides the
   pixels but the row still counts toward the scrollable area,
   so the document measured 2477px wide inside a 1512px window
   and the whole page could be dragged right. The padding-block
   is what keeps the clip off the hover lift.
   ============================================================ */
.tiles{overflow:hidden}
html,body{overflow-x:hidden}


/* ============================================================
   V50 — no blinking anywhere. A pulsing dot is a cheap-website
   tell and it was on five different components.
   ============================================================ */
.hudtag i,.asktag i,.mptag i,.wctag i,.lmtag i{animation:none !important}

/* ============================================================
   V51 — the lead window, rebuilt.
   The first one was a horizontal two-up covered in mono
   uppercase tags, pulsing dots and saturated red. Mark's words:
   cheap, unprofessional, cringe. This one is vertical, almost
   entirely greyscale, and carries no labels that shout. Colour
   appears once, on the focus ring. Hierarchy comes from size
   and weight, the way it does on hardware pages.
   ============================================================ */

.lm{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:clamp(14px,4vw,48px);
}
.lm[hidden]{display:none}

.lmveil{
  position:absolute; inset:0;
  background:rgba(3,3,5,.72);
  -webkit-backdrop-filter:blur(18px) saturate(.7);
  backdrop-filter:blur(18px) saturate(.7);
  opacity:0; transition:opacity .42s cubic-bezier(.16,1,.3,1);
}
.lm.on .lmveil{opacity:1}

.lmbox{
  position:relative; z-index:1;
  width:min(480px,100%);
  max-height:calc(100vh - clamp(28px,8vw,96px));
  overflow-y:auto; overscroll-behavior:contain;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, #16161a 0%, #0c0c0f 42%, #09090b 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 60px 140px -50px rgba(0,0,0,1),
    0 0 0 1px rgba(0,0,0,.6);
  padding:clamp(30px,4.4vw,44px) clamp(24px,3.6vw,38px) clamp(26px,3.4vw,34px);
  display:grid; gap:clamp(22px,2.8vw,28px);
  opacity:0; translate:0 10px; scale:.975;
  transition:opacity .42s cubic-bezier(.16,1,.3,1),
             translate .42s cubic-bezier(.16,1,.3,1),
             scale .42s cubic-bezier(.16,1,.3,1);
}
.lm.on .lmbox{opacity:1; translate:0 0; scale:1}

/* a single hairline of warmth along the very top edge, nothing more */
.lmbox::before{
  content:''; position:absolute; left:14%; right:14%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,150,140,.5), transparent);
}

/* ---- close ---- */
.lmx{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; padding:0; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid transparent;
  display:grid; place-items:center;
  transition:background .25s cubic-bezier(.16,1,.3,1), border-color .25s cubic-bezier(.16,1,.3,1);
}
.lmx svg{width:15px; height:15px; display:block}
.lmx path{
  fill:none; stroke:rgba(255,255,255,.42); stroke-width:1.6; stroke-linecap:round;
  transition:stroke .25s cubic-bezier(.16,1,.3,1);
}
.lmx:hover{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.1)}
.lmx:hover path{stroke:#fff}
.lmx:focus-visible{outline:2px solid rgba(255,255,255,.5); outline-offset:2px}

/* ---- the opening ---- */
.lmhead{display:grid; gap:11px; padding-right:34px}
.lmhead h2{
  margin:0; color:#fff;
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(25px,3.1vw,31px); line-height:1.08; letter-spacing:-.042em;
}
.lmhead p{
  margin:0; font-size:15px; line-height:1.58;
  color:rgba(255,255,255,.50); max-width:42ch;
}

/* ---- fields ---- */
.lmform{display:grid; gap:16px}
.lmtwo{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:420px){ .lmtwo{grid-template-columns:1fr} }

.lmf{display:grid; gap:8px; border:0; padding:0; margin:0; min-width:0}
.lmf > span,.lmf legend{
  font-family:var(--f-body); font-size:13px; font-weight:500; letter-spacing:-.005em;
  color:rgba(255,255,255,.48); padding:0;
}
.lmf input{
  width:100%; box-sizing:border-box; -webkit-appearance:none; appearance:none;
  font-family:var(--f-body); font-size:16px; font-weight:400; color:#fff;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px; padding:13px 15px;
  transition:border-color .28s cubic-bezier(.16,1,.3,1),
             background .28s cubic-bezier(.16,1,.3,1),
             box-shadow .28s cubic-bezier(.16,1,.3,1);
}
.lmf input:hover{border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.055)}
.lmf input:focus{
  outline:none; color:#fff;
  border-color:rgba(255,150,140,.65);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 4px rgba(240,90,98,.14);
}
.lmf input.bad{border-color:rgba(255,105,100,.85); box-shadow:0 0 0 4px rgba(255,80,80,.12)}

/* ---- the revenue tiles ---- */
.lmopts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:420px){ .lmopts{grid-template-columns:1fr} }
.lmo{
  position:relative; overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.035);
  padding:14px 15px;
  font-size:14.5px; letter-spacing:-.01em; color:rgba(255,255,255,.72);
  display:flex; align-items:center;
  transition:border-color .3s cubic-bezier(.16,1,.3,1),
             background .3s cubic-bezier(.16,1,.3,1),
             color .3s cubic-bezier(.16,1,.3,1),
             translate .3s cubic-bezier(.16,1,.3,1);
}
.lmo input{position:absolute; opacity:0; width:0; height:0}
.lmo span{position:relative; z-index:2}

/* the shine that crosses the tile under the cursor */
.lmo::after{
  content:''; position:absolute; z-index:1; inset:0;
  background:linear-gradient(105deg,
    transparent 30%, rgba(255,255,255,.14) 48%, transparent 66%);
  translate:-120% 0;
  transition:translate .72s cubic-bezier(.16,1,.3,1);
}
.lmo:hover{
  border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.07);
  color:#fff; translate:0 -2px;
}
.lmo:hover::after{translate:120% 0}

.lmo:has(input:checked){
  border-color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.11);
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 10px 28px -16px rgba(0,0,0,.9);
}
.lmo:has(input:focus-visible){box-shadow:0 0 0 4px rgba(240,90,98,.22)}
.lmrev.bad .lmopts{
  outline:1px solid rgba(255,105,100,.7); outline-offset:6px; border-radius:14px;
}

/* ---- the ask ---- */
.lmgo{
  width:100%; margin-top:4px; cursor:pointer;
  font-family:var(--f-body); font-size:16px; font-weight:600; letter-spacing:-.012em;
  color:#0a0a0c; background:#fff;
  border:0; border-radius:12px; padding:15px 20px;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.9);
  transition:background .28s cubic-bezier(.16,1,.3,1),
             translate .28s cubic-bezier(.16,1,.3,1),
             box-shadow .28s cubic-bezier(.16,1,.3,1);
}
.lmgo:hover{background:#f2f2f4; translate:0 -2px; box-shadow:0 18px 40px -14px rgba(0,0,0,.95)}
.lmgo:active{translate:0 0}
.lmgo:focus-visible{outline:2px solid rgba(255,255,255,.65); outline-offset:3px}

.lmfine{
  margin:0; font-size:13px; line-height:1.55;
  color:rgba(255,255,255,.36); letter-spacing:-.005em;
}

/* ---- finished ---- */
.lmdone{display:grid; gap:15px; justify-items:start; padding:clamp(8px,2vw,18px) 0}
.lmdone[hidden]{display:none}
.lmcheck svg{width:54px; height:54px; overflow:visible; display:block}
.lmcheck circle{fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.5}
.lmcheck path{
  fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:40; stroke-dashoffset:40;
  animation:lmtick .62s cubic-bezier(.16,1,.3,1) .12s forwards;
}
@keyframes lmtick{to{stroke-dashoffset:0}}
.lmdone h3{
  margin:0; color:#fff; font-family:var(--f-display); font-weight:700;
  font-size:clamp(24px,2.9vw,30px); letter-spacing:-.042em;
}
.lmdonep{margin:0; font-size:15px; line-height:1.58; color:rgba(255,255,255,.50); max-width:40ch}
.lmmeta{
  margin:0; font-size:13.5px; color:rgba(255,255,255,.34); letter-spacing:-.005em;
}
.lmback{
  margin-top:6px; cursor:pointer;
  font-family:var(--f-body); font-size:15px; font-weight:500; color:#fff;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:11px; padding:12px 22px;
  transition:background .28s cubic-bezier(.16,1,.3,1), border-color .28s cubic-bezier(.16,1,.3,1);
}
.lmback:hover{background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.26)}

@media (prefers-reduced-motion:reduce){
  .lmveil,.lmbox,.lmo,.lmo::after,.lmgo{transition:none}
  .lmcheck path{animation:none; stroke-dashoffset:0}
}

/* ============================================================
   V52 — the welcome note is a window now, in the same language
   as the lead one. No tag lines, no signal dots, no ask.
   ============================================================ */
.lmw .lmbox{width:min(460px,100%)}
.wcnote{
  display:grid; gap:12px;
  padding:clamp(18px,2.4vw,22px) 0 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.wcnote p{margin:0; font-size:14.5px; line-height:1.62; color:rgba(255,255,255,.52)}
.wcsign{color:rgba(255,255,255,.34) !important; font-size:13.5px !important}
.lmw .lmback{justify-self:start}

/* ============================================================
   V53 — scroll performance.
   Two measurable problems. The floating nav ran
   backdrop-filter: blur(20px) saturate(150%), and a blurred
   backdrop on a sticky element is re-rasterised on every scroll
   frame at a cost that scales with the blur radius. And the
   starfield carried will-change on layers the size of the
   viewport that were only ever animating opacity.
   ============================================================ */

/* half the radius, drop the saturate, and lean on the fill instead.
   visually near identical, and it stops repainting the strip under
   the bar every frame. */
.nav{
  background:rgba(18,16,27,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}

/* the sky is fixed and never reflows; let the compositor keep it */
.sky{transform:translateZ(0)}
.sky i{will-change:auto}
.fstars i{will-change:auto}

/* sections can skip layout and paint work for what is off screen.
   intrinsic sizes keep the scrollbar honest while they are skipped. */
.roi,.tiles,.qrail{contain:layout paint}

/* the promo bullet list was the last of the mono micro-type in the menu */
.mplist li{
  font-family:var(--f-body); font-size:12.5px; letter-spacing:-.005em;
  text-transform:none; color:rgba(255,255,255,.52);
}
.mplist li::before{background:rgba(255,255,255,.32); border-radius:50%; width:4px; height:4px; top:.5em}

/* ============================================================
   V54 — the lead window gets the accent it was missing.
   Greyscale alone read as boring. The warmth now comes in the
   way it does on a hardware page: two low radial blooms bled
   into the panel itself, a warm edge on the selected option,
   and exactly one saturated object, the button.
   ============================================================ */

#lead .lmbox{
  background:
    radial-gradient(62% 40% at 4% 0%,   rgba(255,122,61,.17), transparent 62%),
    radial-gradient(56% 42% at 100% 98%, rgba(240,80,47,.13), transparent 68%),
    linear-gradient(180deg, #17161b 0%, #0d0c10 44%, #09090b 100%);
  border-color:rgba(255,140,90,.16);
}
#lead .lmbox::before{
  background:linear-gradient(90deg, transparent, rgba(255,150,96,.7), transparent);
}

/* the chosen band warms up instead of going stark white */
#lead .lmo:has(input:checked){
  border-color:rgba(255,150,96,.72);
  background:linear-gradient(180deg, rgba(255,122,61,.16), rgba(240,80,47,.09));
  box-shadow:0 0 0 1px rgba(255,150,96,.30), 0 12px 30px -18px rgba(255,110,60,.9);
}
#lead .lmo:hover{border-color:rgba(255,150,96,.42)}

/* one saturated object in the whole window */
#lead .lmgo{
  color:#fff;
  background:linear-gradient(180deg, #ff8046 0%, #f4552f 52%, #dd4120 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 14px 34px -14px rgba(240,90,45,.8);
}
#lead .lmgo:hover{
  background:linear-gradient(180deg, #ff8b53 0%, #f75f39 52%, #e64826 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 20px 46px -14px rgba(240,90,45,.92);
}
#lead .lmgo:focus-visible{outline:2px solid rgba(255,170,120,.9); outline-offset:3px}

/* the headline runs to three lines now, so it needs its own measure */
#lead .lmhead h2{max-width:15ch; font-size:clamp(26px,3.3vw,33px)}

/* ============================================================
   V55 — the lead window has to fit without scrolling.
   It measured 709px tall on a 863px viewport, which on any
   13 inch laptop means scrolling to reach the button. The
   supporting paragraph is gone, the headline is centred, and
   every gap is tightened. Nothing else changes.
   ============================================================ */

#lead .lmbox{
  padding:clamp(26px,3.4vw,34px) clamp(22px,3vw,32px) clamp(22px,2.8vw,28px);
  gap:clamp(16px,2vw,20px);
}
#lead .lmhead{text-align:center; padding-right:0}
#lead .lmhead h2{
  max-width:none; margin:0 auto;
  font-size:clamp(23px,2.7vw,28px); line-height:1.14;
}
#lead .lmform{gap:13px}
#lead .lmf{gap:6px}
#lead .lmf input{padding:11px 14px; font-size:15.5px}
#lead .lmo{padding:12px 14px; font-size:14px}
#lead .lmopts{gap:9px}
#lead .lmgo{padding:14px 20px; margin-top:2px}
#lead .lmfine{text-align:center; font-size:12.5px; max-width:40ch; margin:0 auto}

/* ============================================================
   V56 — the welcome window, rebuilt as a moment.
   It was white text on black and nothing else, which is not
   what the rest of this site does. It opens on a schematic
   that draws itself: a tangle on the left resolving through a
   single node into three clean lines carrying a signal. That
   is the whole company in one picture, and it is the first
   thing anybody sees. Everything is centred.
   ============================================================ */

#welcome .lmbox{
  width:min(468px,100%);
  text-align:center;
  padding:clamp(28px,3.6vw,36px) clamp(24px,3.2vw,34px) clamp(24px,3vw,30px);
  gap:clamp(16px,2vw,20px);
  justify-items:center;
  background:
    radial-gradient(58% 38% at 50% 0%,  rgba(255,122,61,.15), transparent 64%),
    radial-gradient(64% 44% at 50% 100%, rgba(240,80,47,.10), transparent 70%),
    linear-gradient(180deg, #17161b 0%, #0d0c10 46%, #09090b 100%);
  border-color:rgba(255,140,90,.15);
}
#welcome .lmbox::before{
  background:linear-gradient(90deg, transparent, rgba(255,150,96,.62), transparent);
}

/* ---- the schematic: one job, from the call to the money ---- */
.wzart{width:min(320px,100%); margin:2px auto 0}
.wzart svg{display:block; width:100%; height:auto; overflow:visible}

.wztrack{
  fill:none; stroke:rgba(255,255,255,.13); stroke-width:1.5; stroke-linecap:round;
}
.wzrun{
  fill:none; stroke:rgba(255,150,96,.85); stroke-width:1.7; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:wzdraw .46s cubic-bezier(.16,1,.3,1) forwards;
}
.wzrun.r1{animation-delay:.34s} .wzrun.r2{animation-delay:.78s} .wzrun.r3{animation-delay:1.22s}

.wzs{opacity:0; transform-box:fill-box; transform-origin:center;
  animation:wzpop .52s cubic-bezier(.16,1,.3,1) forwards}
.wzs.s1{animation-delay:.14s} .wzs.s2{animation-delay:.60s}
.wzs.s3{animation-delay:1.04s} .wzs.s4{animation-delay:1.48s}

/* the stations sit on an opaque disc so nothing runs underneath them */
.wzring{fill:#131217; stroke:rgba(255,255,255,.20); stroke-width:1.3}
.wzg{fill:none; stroke:rgba(255,255,255,.72); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round}
.wzs.end .wzring{fill:#1d1216; stroke:rgba(255,160,110,.95); stroke-width:1.5}
.wzs.end .wzg{stroke:#ffb98d; stroke-width:1.9}

.wzcap{
  font-family:var(--f-body); font-size:11px; font-weight:500; letter-spacing:-.005em;
  fill:rgba(255,255,255,.42); text-anchor:middle;
  opacity:0; animation:wzfade .5s cubic-bezier(.16,1,.3,1) forwards;
}
.wzcap.c1{animation-delay:.24s} .wzcap.c2{animation-delay:.70s}
.wzcap.c3{animation-delay:1.14s} .wzcap.c4{animation-delay:1.58s}
.wzcap.c4{fill:rgba(255,178,132,.95)}

@keyframes wzdraw{to{stroke-dashoffset:0}}
@keyframes wzpop{from{opacity:0; scale:.55} to{opacity:1; scale:1}}
@keyframes wzfade{to{opacity:1}}

/* ---- the window leans toward the cursor, and the light on its
        edge moves with it ---- */
#welcome .lmbox{
  border-color:transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 60px 140px -50px rgba(0,0,0,1),
    0 0 110px -30px rgba(255,120,60,.30);
  will-change:transform;
}
#welcome .lmbox::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  padding:1.3px;
  background:radial-gradient(130% 130% at var(--lx,50%) var(--ly,26%),
    rgba(255,186,132,.98) 0%,
    rgba(255,116,58,.62) 26%,
    rgba(240,80,47,.30) 48%,
    rgba(255,255,255,.10) 72%,
    rgba(255,255,255,.05) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}

/* ---- the words, arriving after the picture ---- */
#welcome .lmhead{gap:12px; padding-right:0; justify-items:center}
#welcome .lmhead h2{
  font-size:clamp(25px,3vw,30px); line-height:1.1; letter-spacing:-.045em;
}
#welcome .lmhead p{max-width:36ch; margin:0 auto; color:rgba(255,255,255,.52)}
.wznote{
  display:grid; gap:10px; justify-items:center;
  padding-top:clamp(15px,2vw,19px);
  border-top:1px solid rgba(255,255,255,.08);
  width:100%;
}
.wznote p{margin:0; font-size:14px; line-height:1.6; color:rgba(255,255,255,.48); max-width:38ch}
.wcsign{color:rgba(255,255,255,.34) !important; font-size:13px !important}
.wzgo{justify-self:center}

/* each band settles in after the schematic has drawn */
#welcome .wzart,#welcome .lmhead,#welcome .wznote,#welcome .wzgo{
  opacity:0; translate:0 8px;
  animation:wzrise .62s cubic-bezier(.16,1,.3,1) forwards;
}
#welcome .wzart {animation-delay:.02s}
#welcome .lmhead{animation-delay:.34s}
#welcome .wznote{animation-delay:.50s}
#welcome .wzgo  {animation-delay:.62s}
@keyframes wzrise{to{opacity:1; translate:0 0}}

@media (prefers-reduced-motion:reduce){
  .wztrack,.wzrun,.wzs,.wzcap,
  #welcome .wzart,#welcome .lmhead,#welcome .wznote,#welcome .wzgo{
    animation:none; opacity:1; stroke-dashoffset:0; translate:0 0; scale:1;
  }
}

/* still 657px, which loses the button on a short window. another pass. */
#lead .lmbox{padding:clamp(22px,2.8vw,28px) clamp(22px,3vw,30px) clamp(20px,2.4vw,24px); gap:14px}
#lead .lmhead h2{font-size:clamp(22px,2.4vw,25px); line-height:1.12}
#lead .lmform{gap:11px}
#lead .lmf{gap:5px}
#lead .lmf > span,#lead .lmf legend{font-size:12.5px}
#lead .lmf input{padding:10px 13px; font-size:15px; border-radius:11px}
#lead .lmo{padding:11px 13px; font-size:13.5px; border-radius:11px}
#lead .lmopts{gap:8px}
#lead .lmgo{padding:13px 20px; font-size:15.5px; border-radius:11px}
#lead .lmfine{font-size:12px; max-width:44ch}

/* an earlier rule pinned this to the left while the box centres everything */
.lmw .lmback,#welcome .wzgo{justify-self:center}

/* ============================================================
   V57 — the What We Build page.
   Five processes on one page, each one led by the pain rather
   than by the feature, each with a schematic that draws itself
   as the section arrives. Same instrument language as the home
   page, same windows, no new vocabulary.
   ============================================================ */

/* ---------- page hero ---------- */
.phero{
  position:relative; padding-top:clamp(28px,5vw,64px); padding-bottom:clamp(24px,3.4vw,44px);
  display:grid; gap:clamp(28px,4vw,52px);
}
.phero-in{max-width:70ch}
.pcrumb{
  margin:0 0 18px; font-size:13px; color:var(--text-3);
}
.pcrumb a{color:var(--text-2); text-decoration:none}
.pcrumb a:hover{color:#fff}
.pcrumb span{margin:0 7px; opacity:.5}
.phero h1{
  margin:0; color:#fff; font-family:var(--f-display); font-weight:700;
  font-size:clamp(32px,5.4vw,62px); line-height:1.02; letter-spacing:-.045em;
  max-width:19ch; text-wrap:balance;
}
.phero .sub{
  margin:20px 0 0; font-size:clamp(15px,1.5vw,17.5px); line-height:1.62;
  color:var(--text-2); max-width:62ch;
}
.phero .btns{margin-top:clamp(22px,2.6vw,30px)}

/* the jump rail doubles as a contents list for search engines */
.pjump{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  border-top:1px solid var(--line-2);
}
@media (max-width:900px){ .pjump{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .pjump{grid-template-columns:1fr} }
.pjump a{
  display:grid; gap:4px; padding:18px clamp(12px,1.6vw,20px) 18px 0;
  text-decoration:none; border-top:1px solid transparent; margin-top:-1px;
  transition:border-color .3s var(--ease), translate .3s var(--ease);
}
.pjump a:hover{border-top-color:var(--red-2); translate:0 -2px}
.pjump b{
  font-family:var(--f-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(15px,1.5vw,17px); color:#fff;
}
.pjump i{font-style:normal; font-size:13px; line-height:1.45; color:var(--text-3)}
.pjump a:hover i{color:var(--text-2)}

/* ---------- a process section ---------- */
.psec{scroll-margin-top:clamp(90px,11vh,140px)}
.pgrid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(26px,4vw,66px); align-items:center;
}
@media (max-width:960px){ .pgrid{grid-template-columns:1fr} }
.psec.flip .pgrid > .pcopy{order:2}
.psec.flip .pgrid > .partwrap{order:1}
@media (max-width:960px){
  .psec.flip .pgrid > .pcopy{order:1}
  .psec.flip .pgrid > .partwrap{order:2}
}

.pnum{
  margin:0 0 12px; font-family:var(--f-display); font-weight:700;
  font-size:13px; letter-spacing:.04em; color:var(--red-2);
}
.pcopy h2{
  margin:0; color:#fff; font-family:var(--f-display); font-weight:700;
  font-size:clamp(24px,3.1vw,38px); line-height:1.06; letter-spacing:-.042em;
  max-width:20ch; text-wrap:balance;
}
.plead{margin:16px 0 0; font-size:15.5px; line-height:1.68; color:var(--text-2); max-width:56ch}
.pbh{
  margin:24px 0 12px; font-family:var(--f-display); font-weight:600; font-size:14.5px;
  letter-spacing:-.02em; color:#fff;
}
.pbreaks{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.pbreaks li{
  position:relative; padding-left:24px; font-size:14.5px; line-height:1.55; color:var(--text-2);
}
.pbreaks li::before{
  content:''; position:absolute; left:2px; top:.52em;
  width:9px; height:2px; border-radius:1px; background:rgba(255,138,144,.65);
}
.pafter{
  margin-top:22px; padding:16px 18px;
  border-radius:13px; border:1px solid rgba(240,90,98,.26);
  background:linear-gradient(150deg, rgba(240,90,98,.10), rgba(255,116,58,.05));
}
.pafter p{margin:0; font-size:14.5px; line-height:1.62; color:#fff}
.pcta{
  display:inline-flex; align-items:center; gap:7px; margin-top:20px;
  font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:-.02em;
  color:var(--red-2); text-decoration:none;
  transition:gap .3s var(--ease), color .3s var(--ease);
}
.pcta:hover{gap:12px; color:#fff}

/* ---------- the schematics ---------- */
.partwrap{display:grid}
.part{
  position:relative; overflow:hidden;
  border-radius:18px; border:1px solid var(--line);
  background:linear-gradient(158deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
  padding:clamp(20px,2.6vw,34px);
}
.part::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.028) 0 1px, transparent 1px 28px),
    radial-gradient(70% 70% at 84% 12%, rgba(240,90,98,.14), transparent 70%);
  -webkit-mask-image:radial-gradient(120% 100% at 80% 10%, #000 16%, transparent 84%);
  mask-image:radial-gradient(120% 100% at 80% 10%, #000 16%, transparent 84%);
}
.pz{position:relative; display:block; width:100%; height:auto; overflow:visible}

.pz path,.pz rect,.pz circle{fill:none}
.pzl,.pzbus,.pzgrid,.pztrend{
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:420; stroke-dashoffset:420;
  transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1);
}
.pzl{stroke:rgba(255,255,255,.26); stroke-width:1.4}
.pzbus{stroke:rgba(255,138,144,.55); stroke-width:1.4}
.pzgrid{stroke:rgba(255,255,255,.10); stroke-width:1}
.pztrend{stroke:var(--red-2); stroke-width:2.2}
.rv.in .pzl,.rv.in .pzbus,.rv.in .pzgrid,.rv.in .pztrend{stroke-dashoffset:0}

.pzb,.pznode,.pzjob,.pzbar,.pzdot{
  opacity:0; transform-box:fill-box; transform-origin:center;
  transition:opacity .5s cubic-bezier(.16,1,.3,1), scale .5s cubic-bezier(.16,1,.3,1);
  scale:.86;
}
.rv.in .pzb,.rv.in .pznode,.rv.in .pzjob,.rv.in .pzbar,.rv.in .pzdot{opacity:1; scale:1}
.pzb{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.22); stroke-width:1.2}
.pzb.hot{fill:rgba(240,90,98,.18); stroke:rgba(255,150,96,.8)}
.pznode{fill:rgba(240,90,98,.18); stroke:rgba(255,150,96,.9); stroke-width:1.6}
.pzjob{fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.26); stroke-width:1.2}
.pzjob.hot{fill:rgba(240,90,98,.22); stroke:rgba(255,150,96,.85)}
.pzbar{fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.2); stroke-width:1; transform-origin:bottom}
.pzbar.hot{fill:rgba(240,90,98,.26); stroke:rgba(255,150,96,.7)}
.pzdot{fill:rgba(255,255,255,.5); stroke:none}
.pzdot.hot{fill:var(--red-2)}

.d1{transition-delay:.05s} .d2{transition-delay:.15s} .d3{transition-delay:.25s}
.d4{transition-delay:.35s} .d5{transition-delay:.45s} .d6{transition-delay:.55s}
.d7{transition-delay:.65s}

/* the signal, once the picture exists */
.pzp{
  stroke:rgba(255,190,140,.95); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:14 340; stroke-dashoffset:354; opacity:0;
}
.rv.in .pzp{animation:pzsignal 3.1s linear 1.1s infinite}
.rv.in .pzp.s2{animation-delay:1.35s}
.rv.in .pzp.s3{animation-delay:1.6s}
@keyframes pzsignal{
  0%{stroke-dashoffset:354; opacity:0}
  8%{opacity:1} 72%{opacity:1}
  88%,100%{stroke-dashoffset:14; opacity:0}
}

/* ---------- how it runs ---------- */
.prun{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,30px);
}
@media (max-width:900px){ .prun{grid-template-columns:1fr 1fr} }
@media (max-width:540px){ .prun{grid-template-columns:1fr} }
.prun li{
  display:grid; gap:8px; align-content:start;
  padding-top:16px; border-top:1px solid rgba(240,90,98,.26);
  transition:border-color .3s var(--ease), translate .3s var(--ease);
}
.prun li:hover{border-top-color:var(--red-2); translate:0 -3px}
.prn{
  font-family:var(--f-display); font-weight:700; font-size:13px; color:var(--red-2);
}
.prun b{font-family:var(--f-display); font-weight:600; font-size:clamp(15px,1.5vw,18px);
  letter-spacing:-.025em; color:#fff}
.prun i{font-style:normal; font-size:13.5px; line-height:1.56; color:var(--text-2)}

@media (prefers-reduced-motion:reduce){
  .pzl,.pzbus,.pzgrid,.pztrend{transition:none; stroke-dashoffset:0}
  .pzb,.pznode,.pzjob,.pzbar,.pzdot{transition:none; opacity:1; scale:1}
  .rv.in .pzp{animation:none; opacity:0}
}


/* ============================================================
   V58 — the schematics become objects, not node graphs.
   Three of the five were the same boxes-joined-by-lines in
   different arrangements, which is exactly why they read as
   interchangeable. Dispatch worked because it is a board an
   owner looks at every day. Each one is now a thing from their
   own world: a call log, a board, an estimate, an invoice, a
   dashboard.
   ============================================================ */

/* everything draws against pathLength 100, so a line always
   completes regardless of how long the path actually is */
.pzrule,.pzgrid,.pzstrike,.pztick,.pzarrow,.pztrend{
  fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1);
}
.rv.in .pzrule,.rv.in .pzgrid,.rv.in .pzstrike,
.rv.in .pztick,.rv.in .pzarrow,.rv.in .pztrend{stroke-dashoffset:0}

.pzrule {stroke:rgba(255,255,255,.16); stroke-width:1.2}
.pzgrid {stroke:rgba(255,255,255,.08); stroke-width:1}
.pzarrow{stroke:rgba(255,138,144,.55); stroke-width:1.4}
.pzstrike{stroke:rgba(255,120,120,.75); stroke-width:1.4}
.pztick {stroke:#fff; stroke-width:1.8}
.pztick.big{stroke-width:2.6}
.pztrend{stroke:var(--red-2); stroke-width:2.2}

.pzpanel,.pzpaper{
  fill:rgba(255,255,255,.022); stroke:rgba(255,255,255,.14); stroke-width:1.2;
}
.pzpaper{fill:rgba(255,255,255,.035)}

.pzchip,.pzbarm,.pzjob,.pztile,.pzcol,.pzst,.pzsend,.pzpaid,.pzamt,
.pzrow,.pzline,.pzfollow,.pzremind{
  opacity:0; transform-box:fill-box; transform-origin:center;
  transition:opacity .5s cubic-bezier(.16,1,.3,1), scale .5s cubic-bezier(.16,1,.3,1),
             translate .5s cubic-bezier(.16,1,.3,1);
  scale:.9;
}
.rv.in .pzchip,.rv.in .pzbarm,.rv.in .pzjob,.rv.in .pztile,.rv.in .pzcol,
.rv.in .pzst,.rv.in .pzsend,.rv.in .pzpaid,.rv.in .pzamt,
.rv.in .pzrow,.rv.in .pzline,.rv.in .pzfollow,.rv.in .pzremind{opacity:1; scale:1}

.pzchip{fill:rgba(255,255,255,.10); stroke:none}
.pzchip.hot{fill:rgba(240,90,98,.24); stroke:rgba(255,150,96,.7); stroke-width:1.1}
.pzchip.faint{fill:rgba(255,255,255,.055)}
.pzbarm{fill:rgba(255,255,255,.30); stroke:none}
.pzbarm.faint{fill:rgba(255,255,255,.13)}
.pzbarm.tiny{fill:rgba(255,255,255,.22)}
.pzbarm.hot{fill:var(--red-2)}
.pzjob{fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.24); stroke-width:1.2}
.pzjob.hot{fill:rgba(240,90,98,.24); stroke:rgba(255,150,96,.85)}
.pztile{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.12); stroke-width:1.1}
.pzcol{fill:rgba(255,255,255,.12); stroke:none; transform-origin:bottom}
.pzcol.hot{fill:rgba(240,90,98,.62)}
.pzst{fill:none; stroke:rgba(255,255,255,.4); stroke-width:1.6}
.pzst.miss{stroke:rgba(255,110,110,.85)}
.pzst.ok{fill:rgba(240,90,98,.22); stroke:rgba(255,150,96,.9)}
.pzst.ok.hot{fill:var(--red-2); stroke:var(--red-2)}
.pzsend{fill:rgba(240,90,98,.28); stroke:rgba(255,150,96,.8); stroke-width:1.1}
.pzpaid{fill:rgba(240,90,98,.20); stroke:rgba(255,150,96,.8); stroke-width:1.2}
.pzamt{
  font-family:var(--f-display); font-weight:700; font-size:22px;
  fill:#fff; stroke:none; letter-spacing:-.04em;
}
/* the missed rows sit back, the answered row comes forward */
.pzrow{translate:-6px 0}
.rv.in .pzrow{translate:0 0}

/* the old vocabulary is gone from these pages */
.pzl,.pzbus,.pznode,.pzb,.pzbar,.pzdot,.pzp,.pzflow{display:none}

/* ============================================================
   V59 — the jump rail answers the cursor.
   Each entry runs a small loop behind it that means something
   for that process: a call ringing out, cells filling on a
   board, lines being written, a bar being paid down, figures
   rising. Nothing runs until you are actually on it.
   ============================================================ */

.pjump a{position:relative; overflow:hidden; isolation:isolate}
.pjump a > b,.pjump a > i{position:relative; z-index:2}
.jbg{
  position:absolute; z-index:0; inset:0; pointer-events:none;
  opacity:0; transition:opacity .34s var(--ease);
}
.pjump a:hover .jbg,.pjump a:focus-visible .jbg{opacity:1}
.jbg i{position:absolute; display:block}

/* dispatch: cells filling across a board */
.j-dispatch .jbg{
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 26px),
             repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 22px);
}
.j-dispatch .jbg i{
  width:22px; height:12px; border-radius:3px; background:rgba(240,90,98,.5);
  opacity:0;
}
.j-dispatch .jbg i:nth-child(1){left:8px;  top:18px; animation:jcell 2.4s ease-in-out infinite}
.j-dispatch .jbg i:nth-child(2){left:44px; top:40px; animation:jcell 2.4s ease-in-out .3s infinite}
.j-dispatch .jbg i:nth-child(3){left:80px; top:18px; animation:jcell 2.4s ease-in-out .6s infinite}
.j-dispatch .jbg i:nth-child(4){left:116px;top:40px; animation:jcell 2.4s ease-in-out .9s infinite}
@keyframes jcell{0%,100%{opacity:0; scale:.7} 40%,60%{opacity:.85; scale:1}}

/* reporting: figures rising */
.j-reporting .jbg i{
  bottom:14px; width:12px; border-radius:2px 2px 0 0;
  background:rgba(255,255,255,.26); height:6px;
}
.j-reporting .jbg i:nth-child(1){left:12px; animation:jrise 2.4s ease-in-out infinite}
.j-reporting .jbg i:nth-child(2){left:30px; animation:jrise 2.4s ease-in-out .18s infinite}
.j-reporting .jbg i:nth-child(3){left:48px; animation:jrise 2.4s ease-in-out .36s infinite}
.j-reporting .jbg i:nth-child(4){left:66px; background:var(--red-2); animation:jrise 2.4s ease-in-out .54s infinite}
@keyframes jrise{0%,100%{height:6px} 50%{height:30px}}

@media (prefers-reduced-motion:reduce){
  .jbg{display:none}
  .pzrule,.pzgrid,.pzstrike,.pztick,.pzarrow,.pztrend{transition:none; stroke-dashoffset:0}
  .pzchip,.pzbarm,.pzjob,.pztile,.pzcol,.pzst,.pzsend,.pzpaid,.pzamt,
  .pzrow,.pzline,.pzfollow,.pzremind{transition:none; opacity:1; scale:1; translate:0 0}
}

/* ============================================================
   V60 — the fills come back.
   `.pz path,.pz rect,.pz circle{fill:none}` from the first pass
   is specificity (0,1,1) and was beating every fill declared on
   a single class, so only the `.hot` variants (0,2,0) painted.
   That is why the call rows, the estimate line items and five
   of the seven report columns rendered as empty space.
   Every fill is restated here at element-plus-class weight.
   ============================================================ */

.pz rect.pzpanel {fill:rgba(255,255,255,.022)}
.pz rect.pzpaper {fill:rgba(255,255,255,.04)}
.pz rect.pzchip  {fill:rgba(255,255,255,.11)}
.pz rect.pzchip.faint{fill:rgba(255,255,255,.055)}
.pz rect.pzchip.hot  {fill:rgba(240,90,98,.24)}
.pz rect.pzbarm  {fill:rgba(255,255,255,.34)}
.pz rect.pzbarm.faint{fill:rgba(255,255,255,.15)}
.pz rect.pzbarm.tiny {fill:rgba(255,255,255,.26)}
.pz rect.pzbarm.hot  {fill:var(--red-2)}
.pz rect.pzjob   {fill:rgba(255,255,255,.07)}
.pz rect.pzjob.hot{fill:rgba(240,90,98,.24)}
.pz rect.pztile  {fill:rgba(255,255,255,.04)}
.pz rect.pzcol   {fill:rgba(255,255,255,.16)}
.pz rect.pzcol.hot{fill:rgba(240,90,98,.62)}
.pz rect.pzsend  {fill:rgba(240,90,98,.28)}
.pz rect.pzpaid  {fill:rgba(240,90,98,.20)}
.pz circle.pzst  {fill:none}
.pz circle.pzst.ok{fill:rgba(240,90,98,.22)}
.pz circle.pzst.ok.hot{fill:var(--red-2)}
.pz text.pzamt   {fill:#fff}

/* a struck-out entry needs the entry to be visible under the strike */
.pz rect.pzbarm.dim{fill:rgba(255,255,255,.20)}
.pzstrike{stroke:rgba(255,120,120,.9); stroke-width:1.6}

/* ============================================================
   V61 — the footer columns.
   The headings were 10px mono uppercase in the dimmest grey on
   the palette, sitting on the tail of the bloom, and measured
   3.42:1. They were also the last of the tag styling left on
   the site. Display type, sentence case, full white, and the
   links lift to meet them.
   ============================================================ */

.foot h5{
  margin:0 0 15px;
  font-family:var(--f-display); font-weight:600; font-size:15px;
  letter-spacing:-.025em; text-transform:none; color:#fff;
}
.foot .fgrid ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.foot .fgrid ul a{
  display:inline-block; padding:5px 0;
  font-family:var(--f-body); font-size:14px; letter-spacing:-.008em;
  color:rgba(255,255,255,.58); text-decoration:none;
  transition:color .25s var(--ease), translate .25s var(--ease);
}
.foot .fgrid ul a:hover{color:#fff; translate:3px 0}
.foot .fgrid ul a:focus-visible{outline:2px solid rgba(255,255,255,.5); outline-offset:3px; border-radius:4px}

.fblurb{font-size:14px; line-height:1.6; color:rgba(255,255,255,.58)}

/* the bar along the very bottom stops being mono grey too */
.fbot{
  font-family:var(--f-body); font-size:13px; letter-spacing:-.005em;
  text-transform:none; color:rgba(255,255,255,.42);
  border-top-color:rgba(255,255,255,.10);
}

/* the bloom has to be finished before it reaches the columns */
.foot::after{
  background:linear-gradient(180deg,
    transparent 0%, transparent 50%,
    rgba(8,7,13,.46) 64%, rgba(8,7,13,.90) 76%, var(--bg-2) 88%);
}

/* ============================================================
   V62 — intake and reporting, redrawn.
   The call log and the generic chart were the two that still
   looked like filler. Intake is now the one thing that section
   is actually about: the distance between a customer calling
   and somebody calling them back. Reporting is the database
   they already paid for, being worked through.
   ============================================================ */

.pzguide{stroke:rgba(255,255,255,.14); stroke-width:1.2; stroke-dasharray:3 5}
.pzwait{
  fill:none; stroke:rgba(255,255,255,.26); stroke-width:1.6;
  stroke-linecap:round; stroke-dasharray:6 7;
}
.pzfast{fill:none; stroke:var(--red-2); stroke-width:2.6; stroke-linecap:round}
.pzwait,.pzfast{
  stroke-dasharray:6 7; stroke-dashoffset:0;
}
.pzwait{opacity:0; transition:opacity .7s cubic-bezier(.16,1,.3,1) .25s}
.pzfast{stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .5s cubic-bezier(.16,1,.3,1) .55s}
.rv.in .pzwait{opacity:1}
.rv.in .pzfast{stroke-dashoffset:0}

.pz text.pzcap{
  font-family:var(--f-body); font-size:11.5px; font-weight:500;
  fill:rgba(255,255,255,.42); text-anchor:middle;
  opacity:0; transition:opacity .5s cubic-bezier(.16,1,.3,1);
}
.pz text.pzcap.left{text-anchor:start}
.pz text.pzcap.right{text-anchor:end}
.pz text.pzcap.hot{fill:rgba(255,178,132,.95); text-anchor:start}
.rv.in .pz text.pzcap,.rv.in text.pzcap{opacity:1}

/* the database grid */
.pz rect.pzcell{
  fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.09); stroke-width:1;
  opacity:0; transform-box:fill-box; transform-origin:center; scale:.8;
  transition:opacity .45s cubic-bezier(.16,1,.3,1), scale .45s cubic-bezier(.16,1,.3,1);
}
.pz rect.pzcell.hot{fill:rgba(240,90,98,.55); stroke:rgba(255,150,96,.75)}
.pz rect.pzcell.edge{fill:rgba(240,90,98,.26); stroke:rgba(255,150,96,.45)}
.rv.in .pz rect.pzcell{opacity:1; scale:1}

.pzsweep{
  fill:none; stroke:rgba(255,190,140,.85); stroke-width:2;
  stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1) .5s;
}
.rv.in .pzsweep{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  .pzwait,.pzfast,.pzsweep,.pz text.pzcap,.pz rect.pzcell{
    transition:none; opacity:1; stroke-dashoffset:0; scale:1;
  }
}

/* the second paragraph of the ask carries the offer, so it reads up */
.askmain .asksecond{
  margin-top:14px; color:#fff; font-weight:500;
}

/* ============================================================
   V63 — the menu highlight is painted, not filled.
   A bar that scales in from the left reads as a hover state.
   This lays the colour down behind a bright head that travels
   across the title, with a hairline settling under it, so the
   entry looks like it is being marked rather than lit.
   ============================================================ */

.mcol a::before{
  left:4px; right:4px; top:5px; height:24px;
  border-radius:4px;
  background:
    linear-gradient(0deg, rgba(255,150,96,.9) 0 1.5px, transparent 1.5px) 0 100% / 100% 100% no-repeat,
    linear-gradient(101deg,
      rgba(240,90,98,.40) 0%,
      rgba(255,116,58,.26) 48%,
      rgba(240,90,98,.13) 82%,
      rgba(240,90,98,.04) 100%);
  -webkit-mask-image:linear-gradient(90deg, #000 0 74%, transparent 100%);
  mask-image:linear-gradient(90deg, #000 0 74%, transparent 100%);
  transform-origin:0 50%; scale:0 1;
  transition:scale .46s cubic-bezier(.16,1,.3,1);
}
.mcol a:hover::before,.mcol a:focus-visible::before{scale:1 1}

/* the head that lays it down */
.mcol a::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:4px; top:3px; width:2px; height:28px; border-radius:2px;
  background:linear-gradient(180deg, transparent, #ffc49e 22%, #fff 50%, #ffc49e 78%, transparent);
  box-shadow:0 0 12px 2px rgba(255,150,96,.75);
  opacity:0;
  transition:left .46s cubic-bezier(.16,1,.3,1), opacity .2s var(--ease) .26s;
}
.mcol a:hover::after,.mcol a:focus-visible::after{
  left:calc(100% - 6px); opacity:1;
  transition:left .46s cubic-bezier(.16,1,.3,1), opacity .12s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  .mcol a::before,.mcol a::after{transition:none}
  .mcol a::after{display:none}
}

/* ============================================================
   V64 — the jump rail animation moves out from behind the words.
   It was running across the full width of the cell, directly
   under the label, which made both of them unreadable. It now
   lives in the right third and fades out before it reaches the
   text.
   ============================================================ */
.jbg{
  left:auto; right:0; width:42%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 42%, #000 100%);
}
.pjump a{padding-right:clamp(6px,1vw,12px)}
.pjump b,.pjump i{max-width:calc(100% - 10px)}

/* each loop re-anchored to its own smaller box */
.j-dispatch .jbg i:nth-child(1){left:auto; right:60px; top:16px}
.j-dispatch .jbg i:nth-child(2){left:auto; right:16px; top:34px}
.j-dispatch .jbg i:nth-child(3){left:auto; right:60px; top:52px}
.j-dispatch .jbg i:nth-child(4){left:auto; right:16px; top:70px}
.j-reporting .jbg i:nth-child(1){left:auto; right:70px}
.j-reporting .jbg i:nth-child(2){left:auto; right:52px}
.j-reporting .jbg i:nth-child(3){left:auto; right:34px}
.j-reporting .jbg i:nth-child(4){left:auto; right:16px}

/* ============================================================
   V65 — intake and reporting, with no words in them at all.
   Intake is two dials on the same starting line: one hand
   creeping across a long ruled run to a warning, one landing
   almost immediately on a tick. The ruler marks are what make
   it read as time without labelling anything.
   Reporting is the list itself: a ring of customers with only
   a sliver of it actually being worked, and the arc closing.
   ============================================================ */

.pzdial{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.34); stroke-width:1.5}
.pzhand{
  fill:none; stroke:rgba(255,255,255,.7); stroke-width:1.8; stroke-linecap:round;
  transform-box:fill-box; transform-origin:bottom;
  rotate:0deg; transition:rotate 1.1s cubic-bezier(.16,1,.3,1) .2s;
}
.pzhand.hot{stroke:var(--red-2)}
.rv.in .pzhand{rotate:312deg}
.rv.in .pzhand.hot{rotate:44deg}

.pzticks path{
  fill:none; stroke:rgba(255,255,255,.18); stroke-width:1.2; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .5s cubic-bezier(.16,1,.3,1);
}
.rv.in .pzticks path{stroke-dashoffset:0}
.pzticks path:nth-child(2){transition-delay:.06s} .pzticks path:nth-child(3){transition-delay:.12s}
.pzticks path:nth-child(4){transition-delay:.18s} .pzticks path:nth-child(5){transition-delay:.24s}
.pzticks path:nth-child(6){transition-delay:.30s} .pzticks path:nth-child(7){transition-delay:.36s}
.pzticks path:nth-child(8){transition-delay:.42s}

.pzbang{fill:none; stroke:rgba(255,120,120,.95); stroke-width:1.8; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .4s var(--ease) .7s}
.rv.in .pzbang{stroke-dashoffset:0}
.pz circle.pzdotmiss{fill:rgba(255,120,120,.95); opacity:0; transition:opacity .3s var(--ease) .85s}
.rv.in .pz circle.pzdotmiss{opacity:1}

/* the ring of customers */
.pzhoop{fill:none; stroke:rgba(255,255,255,.09); stroke-width:11}
.pzarc{
  fill:none; stroke:var(--red-2); stroke-width:11; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:94;
  transition:stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1) .25s;
}
.rv.in .pzarc{stroke-dashoffset:18}
.pzcore{fill:none; stroke:rgba(255,255,255,.10); stroke-width:1.2; stroke-dasharray:3 5}
.pz circle.pzseat{
  fill:rgba(255,255,255,.16); stroke:none;
  opacity:0; transform-box:fill-box; transform-origin:center; scale:.5;
  transition:opacity .45s cubic-bezier(.16,1,.3,1), scale .45s cubic-bezier(.16,1,.3,1),
             fill .45s cubic-bezier(.16,1,.3,1);
}
.pz circle.pzseat.lit{fill:rgba(255,150,96,.92)}
.rv.in .pz circle.pzseat{opacity:1; scale:1}

@media (prefers-reduced-motion:reduce){
  .pzhand,.pzticks path,.pzbang,.pzarc,.pz circle.pzseat,.pz circle.pzdotmiss{
    transition:none; stroke-dashoffset:0; opacity:1; scale:1;
  }
  .rv.in .pzarc{stroke-dashoffset:18}
}

/* ============================================================
   V66 — the menu highlight loses the travelling head and the
   underline. Just the wash, fading out to the right.
   ============================================================ */
.mcol a::after{content:none}
.mcol a::before{
  background:linear-gradient(101deg,
    rgba(240,90,98,.42) 0%,
    rgba(255,116,58,.27) 46%,
    rgba(240,90,98,.12) 80%,
    rgba(240,90,98,.03) 100%);
  -webkit-mask-image:linear-gradient(90deg, #000 0 62%, transparent 100%);
  mask-image:linear-gradient(90deg, #000 0 62%, transparent 100%);
}

/* ============================================================
   V67 — the highlighter stops leaving stray bars.
   It was drawn with an absolutely positioned layer, which has
   exactly one box. The moment a marked phrase wrapped onto a
   second line that box covered the gap between them and left a
   floating orange bar after the last word. Painted as a
   background on the text itself now, with box-decoration-break
   cloning it per line, so it can wrap as many times as it likes.
   ============================================================ */

mark.mk,.hot mark{
  background:none; color:#fff; font-weight:600;
  position:static; margin:0; padding:.08em .16em;
  border-radius:3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background-image:linear-gradient(101deg, rgba(240,90,98,.48) 0%, rgba(255,116,58,.32) 100%);
  background-repeat:no-repeat; background-position:0 0; background-size:0% 100%;
  transition:background-size .58s cubic-bezier(.16,1,.3,1) .45s;
}
.hot mark{
  background-image:linear-gradient(101deg, rgba(255,255,255,.34) 0%, rgba(255,240,232,.42) 100%);
  text-shadow:0 1px 8px rgba(70,8,16,.5);
}
mark.mk::before,.hot mark::before{content:none}
.rv.in mark.mk,.rv.in .hot mark,.hot .rv.in mark,.hot .in mark{background-size:100% 100%}
.hot mark.m1{transition-delay:.35s} .hot mark.m2{transition-delay:.62s}
.hot mark.m3{transition-delay:.86s} .hot mark.m4{transition-delay:1.08s}
.hot mark.m5{transition-delay:1.28s}

@media (prefers-reduced-motion:reduce){
  mark.mk,.hot mark{transition:none; background-size:100% 100%}
}

/* paint containment on .roi clipped the cards' own hover lift: they sit
   flush at 0px inside it with no padding, so the 4px rise was cut off
   and the top edge of the card vanished under the cursor. Layout
   containment is the part that was worth having anyway. */
.roi{contain:layout}

/* ============================================================
   V68 — the industries page.
   Same page furniture as What We Build. The drawings are the
   part that has to be specific: a trade recognises its own
   shape of problem faster than it recognises its own name.
   ============================================================ */

.pzaxis{stroke:rgba(255,255,255,.14); stroke-width:1.2; stroke-linecap:round;
  fill:none; stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1)}
.rv.in .pzaxis{stroke-dashoffset:0}

/* hvac: demand against capacity */
.pzdemand{fill:none; stroke:rgba(255,255,255,.34); stroke-width:2;
  stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1) .2s}
.pzcap{fill:none; stroke:rgba(255,255,255,.18); stroke-width:1.4; stroke-dasharray:6 6;
  opacity:0; transition:opacity .6s var(--ease) .35s}
.pzcap2{fill:none; stroke:var(--red-2); stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1) .85s}
.pz circle.pzpeak{fill:rgba(255,120,120,.95); opacity:0; scale:.4;
  transform-box:fill-box; transform-origin:center;
  transition:opacity .4s var(--ease) 1.1s, scale .4s cubic-bezier(.16,1,.3,1) 1.1s}
.rv.in .pzdemand,.rv.in .pzcap2{stroke-dashoffset:0}
.rv.in .pzcap{opacity:1}
.rv.in .pz circle.pzpeak{opacity:1; scale:1}

/* plumbing: the clock */
.pzhoop.thin{stroke-width:2; stroke:rgba(255,255,255,.12)}
.pznight{fill:none; stroke:rgba(255,255,255,.07); stroke-width:22; stroke-linecap:butt;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .9s cubic-bezier(.16,1,.3,1) .1s}
.pzhand2{fill:none; stroke:rgba(255,255,255,.55); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .6s cubic-bezier(.16,1,.3,1) .4s}
.pz circle.pzhub{fill:rgba(255,255,255,.7); opacity:0; transition:opacity .4s var(--ease) .5s}
.pz circle.pzcall{fill:rgba(255,255,255,.28); opacity:0; scale:.4;
  transform-box:fill-box; transform-origin:center;
  transition:opacity .45s var(--ease), scale .45s cubic-bezier(.16,1,.3,1)}
.pz circle.pzcall.hot{fill:var(--red-2)}
.pzdash{fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.3; stroke-dasharray:100;
  stroke-dashoffset:100; transition:stroke-dashoffset .5s cubic-bezier(.16,1,.3,1)}
.pzdash.hot{stroke:rgba(255,150,96,.8); stroke-width:1.8}
.pzticks2{fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .6s var(--ease)}
.rv.in .pznight,.rv.in .pzhand2,.rv.in .pzdash,.rv.in .pzticks2{stroke-dashoffset:0}
.rv.in .pz circle.pzhub,.rv.in .pz circle.pzcall{opacity:1; scale:1}

/* roofing: one inspection fanning out */
.pz rect.pzsheet{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.18); stroke-width:1.2;
  opacity:0; scale:.9; transform-box:fill-box; transform-origin:center;
  transition:opacity .45s var(--ease), scale .45s cubic-bezier(.16,1,.3,1)}
.pz rect.pzsheet.hot{fill:rgba(240,90,98,.20); stroke:rgba(255,150,96,.8)}
.rv.in .pz rect.pzsheet{opacity:1; scale:1}
.pzfan{fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.3; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .6s cubic-bezier(.16,1,.3,1)}
.pzfan.hot{stroke:rgba(255,150,96,.75)}
.rv.in .pzfan{stroke-dashoffset:0}

/* electrical: gates */
.pzbar2{fill:none; stroke:rgba(255,255,255,.22); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .5s cubic-bezier(.16,1,.3,1)}
.pzbar2.open{stroke:rgba(255,150,96,.7); stroke-dasharray:4 7}
.pz circle.pzgdot{fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.3); stroke-width:1.3;
  opacity:0; transition:opacity .4s var(--ease)}
.pz circle.pzgdot.open{fill:rgba(240,90,98,.3); stroke:rgba(255,150,96,.85)}
.pz rect.pzpuck{fill:rgba(255,255,255,.12); stroke:none; opacity:0; scale:.85;
  transform-box:fill-box; transform-origin:center;
  transition:opacity .45s var(--ease), scale .45s cubic-bezier(.16,1,.3,1)}
.pz rect.pzpuck.hot{fill:var(--red-2)}
.pzrun2{fill:none; stroke:rgba(255,150,96,.5); stroke-width:1.4; stroke-dasharray:100;
  stroke-dashoffset:100; transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1) .5s}
.rv.in .pzbar2,.rv.in .pzrun2{stroke-dashoffset:0}
.rv.in .pz circle.pzgdot,.rv.in .pz rect.pzpuck{opacity:1; scale:1}

/* appliance: two rolls against one */
.pz rect.pztruck{fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.26); stroke-width:1.2;
  opacity:0; scale:.85; transform-box:fill-box; transform-origin:center;
  transition:opacity .45s var(--ease), scale .45s cubic-bezier(.16,1,.3,1)}
.pz rect.pztruck.hot{fill:rgba(240,90,98,.3); stroke:rgba(255,150,96,.85)}
.pzpath{fill:none; stroke:rgba(255,255,255,.2); stroke-width:1.4; stroke-dasharray:5 6;
  opacity:0; transition:opacity .6s var(--ease) .2s}
.pzpath.hot{stroke:var(--red-2); stroke-dasharray:none; stroke-width:2.4; stroke-linecap:round}
.pz circle.pzwaitdot{fill:none; stroke:rgba(255,120,120,.7); stroke-width:1.6;
  opacity:0; transition:opacity .4s var(--ease)}
.pzsplit{fill:none; stroke:rgba(255,255,255,.10); stroke-width:1; stroke-dasharray:3 6;
  opacity:0; transition:opacity .5s var(--ease)}
.rv.in .pz rect.pztruck{opacity:1; scale:1}
.rv.in .pzpath,.rv.in .pz circle.pzwaitdot,.rv.in .pzsplit{opacity:1}

/* the jump rail loops for this page */
.j-hvac .jbg i{left:auto; right:16px; bottom:16px; width:11px; border-radius:2px 2px 0 0;
  background:rgba(255,255,255,.26); height:6px}
.j-hvac .jbg i:nth-child(1){right:70px; animation:jrise 2.6s ease-in-out infinite}
.j-hvac .jbg i:nth-child(2){right:52px; animation:jrise 2.6s ease-in-out .16s infinite}
.j-hvac .jbg i:nth-child(3){right:34px; background:var(--red-2); animation:jrise 2.6s ease-in-out .32s infinite}
.j-hvac .jbg i:nth-child(4){right:16px; animation:jrise 2.6s ease-in-out .48s infinite}

.j-plumbing .jbg i{left:auto; right:24px; top:50%; width:14px; height:14px; margin-top:-7px;
  border-radius:50%; border:1px solid rgba(255,138,144,.7); opacity:0;
  animation:jring 2.4s ease-out infinite}
.j-plumbing .jbg i:nth-child(2){animation-delay:.6s}
.j-plumbing .jbg i:nth-child(3){animation-delay:1.2s}
.j-plumbing .jbg i:nth-child(4){animation-delay:1.8s}

.j-roofing .jbg i{left:auto; right:16px; height:5px; border-radius:3px;
  background:rgba(255,255,255,.3); width:0}
.j-roofing .jbg i:nth-child(1){top:18px; animation:jwrite 2.8s ease-out infinite}
.j-roofing .jbg i:nth-child(2){top:32px; animation:jwrite 2.8s ease-out .3s infinite}
.j-roofing .jbg i:nth-child(3){top:46px; animation:jwrite 2.8s ease-out .6s infinite}
.j-roofing .jbg i:nth-child(4){top:60px; background:var(--red-2); animation:jwrite 2.8s ease-out .9s infinite}

.j-electrical .jbg i{left:auto; right:16px; top:50%; margin-top:-8px;
  width:5px; height:16px; border-radius:2px; background:rgba(255,255,255,.22); opacity:0}
.j-electrical .jbg i:nth-child(1){right:62px; animation:jcell 2.2s ease-in-out infinite}
.j-electrical .jbg i:nth-child(2){right:47px; animation:jcell 2.2s ease-in-out .2s infinite}
.j-electrical .jbg i:nth-child(3){right:32px; animation:jcell 2.2s ease-in-out .4s infinite}
.j-electrical .jbg i:nth-child(4){right:17px; background:var(--red-2); animation:jcell 2.2s ease-in-out .6s infinite}

.j-appliance .jbg i:nth-child(1){left:auto; right:16px; top:50%; height:6px; margin-top:-3px;
  width:76px; border-radius:3px; background:rgba(255,255,255,.12)}
.j-appliance .jbg i:nth-child(2){left:auto; right:16px; top:50%; height:6px; margin-top:-3px;
  border-radius:3px; background:linear-gradient(90deg, rgba(255,150,96,.9), var(--red-2));
  width:0; animation:jpay 2.6s cubic-bezier(.16,1,.3,1) infinite}
.j-appliance .jbg i:nth-child(3),.j-appliance .jbg i:nth-child(4){display:none}

@media (prefers-reduced-motion:reduce){
  .pzaxis,.pzdemand,.pzcap,.pzcap2,.pznight,.pzhand2,.pzdash,.pzticks2,.pzfan,
  .pzbar2,.pzrun2,.pzpath,.pzsplit,
  .pz circle.pzpeak,.pz circle.pzhub,.pz circle.pzcall,.pz rect.pzsheet,
  .pz circle.pzgdot,.pz rect.pzpuck,.pz rect.pztruck,.pz circle.pzwaitdot{
    transition:none; stroke-dashoffset:0; opacity:1; scale:1;
  }
}

/* ============================================================
   V69 — the welcome window can no longer render empty.
   Every part of it was invisible at rest and relied on a CSS
   animation to bring it in. Any reason that animation does not
   run, and the card opens blank. Measured: stations 0, captions
   0, button 0. Everything now rests VISIBLE and the entrance
   plays on top with fill backwards, so a failed animation costs
   a flourish instead of the content.
   ============================================================ */

.wzrun{stroke-dashoffset:0; animation:none}
.wzs,.wzcap{opacity:1; animation:none}
#welcome .wzart,#welcome .lmhead,#welcome .wznote,#welcome .wzgo{
  opacity:1; translate:0 0; animation:none;
}

#welcome.on .wzrun{animation:wzdraw .46s cubic-bezier(.16,1,.3,1) backwards}
#welcome.on .wzrun.r1{animation-delay:.34s}
#welcome.on .wzrun.r2{animation-delay:.78s}
#welcome.on .wzrun.r3{animation-delay:1.22s}

#welcome.on .wzs{animation:wzpop .52s cubic-bezier(.16,1,.3,1) backwards}
#welcome.on .wzs.s1{animation-delay:.14s} #welcome.on .wzs.s2{animation-delay:.60s}
#welcome.on .wzs.s3{animation-delay:1.04s} #welcome.on .wzs.s4{animation-delay:1.48s}

#welcome.on .wzcap{animation:wzfade .5s cubic-bezier(.16,1,.3,1) backwards}
#welcome.on .wzcap.c1{animation-delay:.24s} #welcome.on .wzcap.c2{animation-delay:.70s}
#welcome.on .wzcap.c3{animation-delay:1.14s} #welcome.on .wzcap.c4{animation-delay:1.58s}

#welcome.on .wzart {animation:wzrise .62s cubic-bezier(.16,1,.3,1) .02s backwards}
#welcome.on .lmhead{animation:wzrise .62s cubic-bezier(.16,1,.3,1) .34s backwards}
#welcome.on .wznote{animation:wzrise .62s cubic-bezier(.16,1,.3,1) .50s backwards}
#welcome.on .wzgo  {animation:wzrise .62s cubic-bezier(.16,1,.3,1) .62s backwards}

@media (prefers-reduced-motion:reduce){
  #welcome.on .wzrun,#welcome.on .wzs,#welcome.on .wzcap,
  #welcome.on .wzart,#welcome.on .lmhead,#welcome.on .wznote,#welcome.on .wzgo{animation:none}
}

/* the stations were the one entrance with an explicit from{opacity:0},
   and `backwards` holds that during the delay, so a delayed station is
   invisible until its animation actually starts. The stagger lives in
   the keyframes now, with no delay and no fill, so the resting state is
   always the visible one. */
#welcome.on .wzs{animation:wzst1 2.1s cubic-bezier(.16,1,.3,1); animation-delay:0s}
#welcome.on .wzs.s2{animation-name:wzst2} #welcome.on .wzs.s3{animation-name:wzst3}
#welcome.on .wzs.s4{animation-name:wzst4}
@keyframes wzst1{0%{opacity:0; scale:.55} 25%,100%{opacity:1; scale:1}}
@keyframes wzst2{0%,22%{opacity:0; scale:.55} 47%,100%{opacity:1; scale:1}}
@keyframes wzst3{0%,44%{opacity:0; scale:.55} 69%,100%{opacity:1; scale:1}}
@keyframes wzst4{0%,66%{opacity:0; scale:.55} 91%,100%{opacity:1; scale:1}}

/* ============================================================
   V70 — the industry drawings are the trade's own equipment.
   Curves and gates said nothing about who the page was for.
   A condenser, a dripping joint, a shingled roof, a breaker
   panel and a washer are recognised before a single word is
   read. Each one moves the way the real thing moves.
   ============================================================ */

.pz .tbody,.pz .tpipe,.pz .tpipe2,.pz .troof,.pz .tpanel,.pz .tbody2{
  fill:rgba(255,255,255,.045); stroke:rgba(255,255,255,.30); stroke-width:1.6;
  stroke-linejoin:round; stroke-linecap:round;
}
.pz .tpipe2,.pz .troof{fill:none; stroke-width:2.2}
.pz .tslat,.pz .tline,.pz .tfeed,.pz .tsoffit,.pz .tridge,.pz .tbus,.pz .tdash2,.pz .tpool{
  fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.5; stroke-linecap:round;
}
.pz .tsoffit{stroke:rgba(255,255,255,.14)}
.pz .tflange,.pz .tnozzle,.pz .tfoot{fill:rgba(255,255,255,.14); stroke:none}
.pz .tring,.pz .tdoor{fill:rgba(0,0,0,.28); stroke:rgba(255,255,255,.30); stroke-width:1.6}
.pz .tglass{fill:rgba(255,255,255,.03); stroke:rgba(255,255,255,.16); stroke-width:1.2}
.pz circle.thub,.pz circle.tdial,.pz circle.thandle{fill:rgba(255,255,255,.35); stroke:none}
.pz .tled{fill:var(--red-2); stroke:none}
.pz .tled.dim{fill:rgba(255,255,255,.14)}

/* hvac: the fan turns and the heat comes off it */
.pz .tblade{fill:rgba(255,150,96,.42); stroke:rgba(255,168,120,.85); stroke-width:1.2}
.tfan{transform-box:fill-box; transform-origin:center; transform-origin:170px 112px}
.rv.in .tfan{animation:tspin 2.6s linear infinite}
@keyframes tspin{to{rotate:360deg}}
.pz .twl{fill:none; stroke:rgba(255,150,96,.55); stroke-width:1.6; stroke-linecap:round; opacity:0}
.rv.in .twl{animation:theat 2.8s ease-in-out infinite}
.rv.in .twl.b{animation-delay:.5s} .rv.in .twl.c{animation-delay:1s}
@keyframes theat{0%{opacity:0; translate:0 10px} 35%{opacity:.85} 100%{opacity:0; translate:0 -12px}}

/* plumbing: it drips */
.pz .tdrop{fill:var(--red-2); stroke:none; opacity:0}
.rv.in .tdrop{animation:tdrip 2.4s cubic-bezier(.4,0,.8,1) infinite}
.rv.in .tdrop.d2{animation-delay:.8s} .rv.in .tdrop.d3{animation-delay:1.6s}
@keyframes tdrip{
  0%{opacity:0; translate:0 0; scale:.5 .7}
  12%{opacity:1; scale:.8 1.2}
  72%{opacity:1; translate:0 30px; scale:1 1}
  92%,100%{opacity:0; translate:0 34px; scale:1.5 .3}
}
.pz .tpool{stroke:rgba(255,150,96,.45); stroke-dasharray:4 6}

/* roofing: the shingles lay themselves */
.pz .tsh{fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.2); stroke-width:1;
  opacity:0; translate:-14px 6px; transform-box:fill-box;
  transition:opacity .45s cubic-bezier(.16,1,.3,1), translate .45s cubic-bezier(.16,1,.3,1)}
.pz .tsh.hot{fill:rgba(240,90,98,.42); stroke:rgba(255,150,96,.8)}
.rv.in .pz .tsh,.rv.in .tsh{opacity:1; translate:0 0}
.rv.in .tsh.r1{transition-delay:.1s} .rv.in .tsh.r2{transition-delay:.3s}
.rv.in .tsh.r3{transition-delay:.5s} .rv.in .tsh.r4{transition-delay:.7s}

/* electrical: the breakers go on */
.pz .tbrkb{fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.2); stroke-width:1.1}
.pz .tsw{fill:rgba(255,255,255,.34); stroke:none}
.pz .tbrk.hot .tbrkb{fill:rgba(240,90,98,.24); stroke:rgba(255,150,96,.75)}
.pz .tbrk.hot .tsw{fill:var(--red-2)}
.tbrk{opacity:0; transition:opacity .35s cubic-bezier(.16,1,.3,1)}
.rv.in .tbrk{opacity:1}
.rv.in .tbrk.b2{transition-delay:.08s} .rv.in .tbrk.b3{transition-delay:.16s}
.rv.in .tbrk.b4{transition-delay:.24s} .rv.in .tbrk.b5{transition-delay:.32s}
.rv.in .tbrk.b6{transition-delay:.40s} .rv.in .tbrk.b7{transition-delay:.48s}
.rv.in .tbrk.b8{transition-delay:.56s}
.pz .tbolt{fill:var(--red-2); stroke:none; opacity:0;
  transition:opacity .4s var(--ease) .7s}
.rv.in .tbolt{opacity:1}

/* appliance: the drum turns */
.pz .tdm{fill:none; stroke:rgba(255,168,120,.6); stroke-width:1.8; stroke-linecap:round}
.tdrum{transform-origin:170px 106px}
.rv.in .tdrum{animation:tspin 5.5s linear infinite}

@media (prefers-reduced-motion:reduce){
  .rv.in .tfan,.rv.in .twl,.rv.in .tdrop,.rv.in .tdrum{animation:none}
  .pz .twl,.pz .tdrop{opacity:.7}
  .pz .tsh,.tbrk,.pz .tbolt{transition:none; opacity:1; translate:0 0}
}

/* the blades were slivers and read as an empty housing */
.pz .tblade{fill:rgba(255,150,96,.50); stroke:rgba(255,178,132,.9); stroke-width:1.4;
  stroke-linejoin:round}
.pz .tpool2{fill:rgba(240,90,98,.14); stroke:none}
.pz .tpool{stroke:rgba(255,150,96,.55); stroke-dasharray:none; stroke-width:1.6}

/* transform-box:fill-box measures the origin from the group's own bounding
   box, so 170px 112px landed far outside it and the spin swung the whole
   fan into the corner of the panel. view-box keeps it in viewBox units. */
.tfan{transform-box:view-box; transform-origin:170px 112px}
.tdrum{transform-box:view-box; transform-origin:170px 106px}

/* ============================================================
   V71 — the welcome sequence stopped stepping cleanly.
   Two staggers were running at once: the delays from the
   previous pass were still applied on top of keyframes that
   already carried the stagger internally, so the last station
   was landing around three seconds in and the line arrived
   before the stop it was running to. One stagger now, and the
   run segments are tied to the same timeline as the stations.
   ============================================================ */

#welcome.on .wzs,
#welcome.on .wzs.s1,#welcome.on .wzs.s2,
#welcome.on .wzs.s3,#welcome.on .wzs.s4{animation-delay:0s}

#welcome.on .wzs   {animation:wzst1 2.4s cubic-bezier(.22,.9,.28,1)}
#welcome.on .wzs.s2{animation-name:wzst2}
#welcome.on .wzs.s3{animation-name:wzst3}
#welcome.on .wzs.s4{animation-name:wzst4}
@keyframes wzst1{0%{opacity:0; scale:.72} 14%,100%{opacity:1; scale:1}}
@keyframes wzst2{0%,25%{opacity:0; scale:.72} 39%,100%{opacity:1; scale:1}}
@keyframes wzst3{0%,50%{opacity:0; scale:.72} 64%,100%{opacity:1; scale:1}}
@keyframes wzst4{0%,75%{opacity:0; scale:.72} 89%,100%{opacity:1; scale:1}}

/* each segment runs between the stop it leaves and the stop it reaches */
#welcome.on .wzrun,
#welcome.on .wzrun.r1,#welcome.on .wzrun.r2,#welcome.on .wzrun.r3{animation-delay:0s}
#welcome.on .wzrun   {animation:wzrn1 2.4s cubic-bezier(.22,.9,.28,1)}
#welcome.on .wzrun.r2{animation-name:wzrn2}
#welcome.on .wzrun.r3{animation-name:wzrn3}
@keyframes wzrn1{0%,14%{stroke-dashoffset:100} 25%,100%{stroke-dashoffset:0}}
@keyframes wzrn2{0%,39%{stroke-dashoffset:100} 50%,100%{stroke-dashoffset:0}}
@keyframes wzrn3{0%,64%{stroke-dashoffset:100} 75%,100%{stroke-dashoffset:0}}

/* the captions follow their own stop */
#welcome.on .wzcap,
#welcome.on .wzcap.c1,#welcome.on .wzcap.c2,
#welcome.on .wzcap.c3,#welcome.on .wzcap.c4{animation-delay:0s}
#welcome.on .wzcap   {animation:wzcp1 2.4s cubic-bezier(.22,.9,.28,1)}
#welcome.on .wzcap.c2{animation-name:wzcp2}
#welcome.on .wzcap.c3{animation-name:wzcp3}
#welcome.on .wzcap.c4{animation-name:wzcp4}
@keyframes wzcp1{0%,4%{opacity:0} 18%,100%{opacity:1}}
@keyframes wzcp2{0%,29%{opacity:0} 43%,100%{opacity:1}}
@keyframes wzcp3{0%,54%{opacity:0} 68%,100%{opacity:1}}
@keyframes wzcp4{0%,79%{opacity:0} 93%,100%{opacity:1}}

/* ---- the headcount row ---- */
.lmopts.four{grid-template-columns:repeat(4,1fr); gap:7px}
.lmopts.four .lmo{padding:10px 6px; justify-content:center; text-align:center; font-size:13px}
@media (max-width:460px){ .lmopts.four{grid-template-columns:1fr 1fr} }
#lead .lmopts.four .lmo{padding:10px 6px; font-size:12.5px}

/* a sixth field went in, so the window needs the height back */
#lead .lmbox{padding:clamp(20px,2.4vw,25px) clamp(20px,2.8vw,28px) clamp(18px,2.2vw,22px); gap:12px}
#lead .lmhead h2{font-size:clamp(21px,2.2vw,23.5px); line-height:1.1}
#lead .lmform{gap:10px}
#lead .lmf > span,#lead .lmf legend{font-size:12px}
#lead .lmf input{padding:9px 12px; font-size:14.5px}
#lead .lmo{padding:9px 11px; font-size:13px}
#lead .lmopts{gap:7px}
#lead .lmgo{padding:12px 20px; font-size:15px}
#lead .lmfine{font-size:11.5px}

/* three seconds after the window opens the entrance is over by any
   measure, so everything is pinned visible regardless of what the
   animations did or did not do. */
#welcome.settled .wzs,#welcome.settled .wzcap,#welcome.settled .wzrun,
#welcome.settled .wzart,#welcome.settled .lmhead,
#welcome.settled .wznote,#welcome.settled .wzgo{
  animation:none !important;
  opacity:1 !important; scale:1 !important; translate:0 0 !important;
  stroke-dashoffset:0 !important;
}

/* ============================================================
   V72 — the drawings get simple enough to read at a glance.
   A tap, a house, a light bulb, a washing machine, a phone
   being answered, and a row of people coming back. If it needs
   explaining it is the wrong picture.
   ============================================================ */

/* ---- hvac: cold air, not heat ---- */
.pz .cold .cw{
  fill:none; stroke:rgba(168,224,255,.85); stroke-width:2; stroke-linecap:round;
  opacity:0;
}
.rv.in .cold .cw{animation:tcool 3s ease-in-out infinite}
.rv.in .cold .cw.b{animation-delay:.45s}
.rv.in .cold .cw.c{animation-delay:.9s}
@keyframes tcool{
  0%{opacity:0; translate:-14px 0}
  30%{opacity:.95} 62%{opacity:.7}
  100%{opacity:0; translate:26px 0}
}
.pz .flake .fk{fill:none; stroke:rgba(190,234,255,.9); stroke-width:2.2; stroke-linecap:round}
.pz .flake .fk.s{stroke-width:1.8}
.flake{transform-box:view-box; transform-origin:292px 92px; opacity:.9}
.rv.in .flake{animation:tspin 14s linear infinite}

/* ---- plumbing: the tap ---- */
.pz .tapbody,.pz .taphandle{fill:rgba(255,255,255,.12); stroke:rgba(255,255,255,.34); stroke-width:1.6}
.pz .tapstem,.pz .tspout{fill:none; stroke:rgba(255,255,255,.34); stroke-width:6; stroke-linecap:round}
.pz .tspout{stroke-width:9}
.pz .tbasin{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.26); stroke-width:1.6;
  stroke-linejoin:round}
.pz .twater{fill:rgba(240,90,98,.18); stroke:rgba(255,150,96,.5); stroke-width:1.2}
.pz .tripple{fill:none; stroke:rgba(255,150,96,.5); stroke-width:1.4; opacity:0}
.rv.in .tripple{animation:tring 2.4s ease-out infinite}
.rv.in .tripple.r2{animation-delay:.35s}
@keyframes tring{0%{opacity:0} 20%{opacity:.8} 100%{opacity:0}}

/* ---- roofing: the house ---- */
.pz .hwall{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.28); stroke-width:1.6}
.pz .hdoor,.pz .hwin{fill:rgba(255,255,255,.10); stroke:rgba(255,255,255,.24); stroke-width:1.3}
.pz .hwinx{fill:none; stroke:rgba(255,255,255,.24); stroke-width:1.2}
.pz .hchim{fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.26); stroke-width:1.4}
.pz .hground{fill:none; stroke:rgba(255,255,255,.14); stroke-width:1.4; stroke-linecap:round}
.pz .troof{fill:none; stroke:rgba(255,255,255,.4); stroke-width:3; stroke-linejoin:round;
  stroke-linecap:round}

/* ---- electrical: bulb and switch ---- */
.pz .bulb{fill:rgba(255,190,120,.16); stroke:rgba(255,200,140,.8); stroke-width:1.8;
  stroke-linejoin:round}
.pz .fil{fill:none; stroke:var(--red-2); stroke-width:2; stroke-linecap:round}
.pz .cap{fill:rgba(255,255,255,.16); stroke:rgba(255,255,255,.3); stroke-width:1.1}
.pz .wire{fill:none; stroke:rgba(255,255,255,.26); stroke-width:1.8; stroke-linecap:round}
.pz .swplate{fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.28); stroke-width:1.5}
.pz .swtog{fill:rgba(240,90,98,.5); stroke:rgba(255,150,96,.85); stroke-width:1.2}
.pz .ry{fill:none; stroke:rgba(255,200,140,.85); stroke-width:2.4; stroke-linecap:round;
  opacity:0}
.rv.in .ry{animation:tglow 2.6s ease-in-out infinite}
@keyframes tglow{0%,100%{opacity:.15} 45%,60%{opacity:.95}}
.rv.in .fil{animation:tfil 2.6s ease-in-out infinite}
@keyframes tfil{0%,100%{stroke:rgba(255,160,120,.45)} 45%,60%{stroke:#ffd2a0}}

/* ---- appliance: the washer ---- */
.pz .wm{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.32); stroke-width:1.8}
.pz .wmline{fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.4}
.pz .wmdraw{fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.26); stroke-width:1.3}
.pz .wmnotch{fill:none; stroke:rgba(255,255,255,.3); stroke-width:2; stroke-linecap:round}
.pz .wmscreen{fill:rgba(0,0,0,.4); stroke:rgba(255,255,255,.2); stroke-width:1.1}
.pz rect.wmseg{fill:var(--red-2)}
.pz rect.wmseg.dim{fill:rgba(255,150,96,.25)}
.pz circle.wmdial{fill:rgba(255,255,255,.14); stroke:rgba(255,255,255,.32); stroke-width:1.3}
.pz .wmdialmark{fill:none; stroke:rgba(255,255,255,.7); stroke-width:1.6; stroke-linecap:round}
.pz .wmdoor{fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.34); stroke-width:2.4}
.pz .wmrim{fill:none; stroke:rgba(255,255,255,.16); stroke-width:2}
.pz .wmglass{fill:rgba(8,6,12,.55); stroke:rgba(255,255,255,.2); stroke-width:1.4}
.pz .wmshine{fill:none; stroke:rgba(255,255,255,.26); stroke-width:2.4; stroke-linecap:round}
.pz circle.wmh{fill:rgba(255,168,120,.65)}
.pz circle.wmlatch{fill:rgba(255,255,255,.3)}
.pz .wmfoot{fill:rgba(255,255,255,.16)}

/* ---- intake: the phone gets answered ---- */
.pz .hs{fill:rgba(240,90,98,.32); stroke:var(--red-2); stroke-width:2;
  stroke-linejoin:round}
.hand{transform-box:view-box; transform-origin:170px 92px}
.rv.in .hand{animation:tshake 2.8s ease-in-out infinite}
@keyframes tshake{
  0%,62%,100%{rotate:0deg} 66%{rotate:-7deg} 70%{rotate:6deg}
  74%{rotate:-5deg} 78%{rotate:4deg} 82%{rotate:0deg}
}
.pz .rg{fill:none; stroke:rgba(255,150,96,.7); stroke-width:2.2; stroke-linecap:round; opacity:0}
.rv.in .rg{animation:trg 2.8s ease-out infinite}
.rv.in .rg.b{animation-delay:.12s}
@keyframes trg{0%{opacity:0} 20%{opacity:.9} 55%{opacity:.25} 100%{opacity:0}}
.pz circle.okb{fill:rgba(240,90,98,.9); stroke:none; opacity:0; scale:.4;
  transform-box:fill-box; transform-origin:center;
  transition:opacity .4s cubic-bezier(.16,1,.3,1) .5s, scale .4s cubic-bezier(.16,1,.3,1) .5s}
.rv.in .pz circle.okb,.rv.in circle.okb{opacity:1; scale:1}
.pz .okt{fill:none; stroke:#fff; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:40; stroke-dashoffset:40;
  transition:stroke-dashoffset .45s cubic-bezier(.16,1,.3,1) .75s}
.rv.in .okt{stroke-dashoffset:0}

/* ---- reporting: the people you already paid for ---- */
.pz .pph{fill:rgba(255,255,255,.18)}
.pz .ppb{fill:rgba(255,255,255,.18); stroke:none}
.pp{opacity:0; scale:.7; transform-box:fill-box; transform-origin:center;
  transition:opacity .45s cubic-bezier(.16,1,.3,1), scale .45s cubic-bezier(.16,1,.3,1)}
.rv.in .pp{opacity:1; scale:1}
.pp.d2{transition-delay:.06s} .pp.d3{transition-delay:.12s} .pp.d4{transition-delay:.18s}
.pp.d5{transition-delay:.24s} .pp.d6{transition-delay:.30s}
.pz .pp.back .pph,.pz .pp.back .ppb{fill:var(--red-2)}
.rv.in .pp.back{animation:tback 3.4s ease-in-out infinite}
@keyframes tback{0%,100%{translate:0 0} 50%{translate:0 -7px}}

@media (prefers-reduced-motion:reduce){
  .rv.in .cold .cw,.rv.in .flake,.rv.in .tripple,.rv.in .ry,.rv.in .fil,
  .rv.in .hand,.rv.in .rg,.rv.in .pp.back{animation:none}
  .pz .cold .cw,.pz .tripple,.pz .ry,.pz .rg{opacity:.7}
  .pz circle.okb,.pz .okt,.pp{transition:none; opacity:1; scale:1; stroke-dashoffset:0}
}

/* ============================================================
   V73 — the four that were still wrong.
   The roof shingles were laid on a plain grid while the roof is
   a triangle, so the top course floated in mid air. Each row is
   now sized from the roof line at its own height. The fan had
   petal shapes instead of blades and was spinning about a point
   4px off the drum centre on the washer. The cold streams were
   two overlapping paths each. The plumbing dots are gone for a
   running stream.
   ============================================================ */

/* hvac */
.pz .tguard{fill:rgba(0,0,0,.30); stroke:rgba(255,255,255,.28); stroke-width:1.6}
.pz .tblade{fill:rgba(255,168,120,.55); stroke:rgba(255,190,150,.9); stroke-width:1.2;
  stroke-linejoin:round}
.tfan{transform-box:view-box; transform-origin:125px 110px}
.rv.in .tfan{animation:tspin 1.8s linear infinite}
.pz .cold .cw{
  fill:none; stroke:rgba(168,224,255,.9); stroke-width:2.2; stroke-linecap:round; opacity:0;
}
.rv.in .cold .cw{animation:tcool 2.8s linear infinite}
.rv.in .cold .cw.b{animation-delay:.5s}
.rv.in .cold .cw.c{animation-delay:1s}
@keyframes tcool{
  0%{opacity:0; translate:-18px 0}
  25%{opacity:.95} 70%{opacity:.6}
  100%{opacity:0; translate:36px 0}
}

/* plumbing: a stream, not droplets */
.pz .stream{
  fill:none; stroke:rgba(190,226,255,.75); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:9 7;
}
.rv.in .stream{animation:tflow .5s linear infinite}
.pz .stream.f2{stroke:rgba(255,255,255,.35); stroke-width:2; stroke-dasharray:5 11}
.rv.in .stream.f2{animation:tflow .42s linear infinite}
@keyframes tflow{to{stroke-dashoffset:-16}}
.pz .twater{fill:rgba(190,226,255,.16); stroke:rgba(190,226,255,.45); stroke-width:1.2}
.pz .tripple{stroke:rgba(190,226,255,.55)}

/* washer: the drum turns about the door centre and nothing else is on it */
.tdrum{transform-box:view-box; transform-origin:170px 110px}
.rv.in .tdrum{animation:tspin 4s linear infinite}

@media (prefers-reduced-motion:reduce){
  .rv.in .tfan,.rv.in .cold .cw,.rv.in .stream,.rv.in .tdrum{animation:none}
  .pz .cold .cw{opacity:.75}
}

/* invoicing: a bill and the money on it */
.pz .bill{fill:rgba(255,255,255,.05); stroke:rgba(255,255,255,.28); stroke-width:1.6}
.pz .bill.back{fill:rgba(255,255,255,.03); stroke:rgba(255,255,255,.14)}
.pz .billin{fill:none; stroke:rgba(255,255,255,.14); stroke-width:1.1; stroke-dasharray:4 5}
.pz circle.billc{fill:rgba(240,90,98,.16); stroke:rgba(255,150,96,.7); stroke-width:1.6}
.pz circle.bpip{fill:rgba(255,255,255,.22)}
.pz text.bsym{
  font-family:var(--f-display); font-weight:700; font-size:30px; fill:var(--red-2);
  text-anchor:middle; dominant-baseline:central;
}

/* small bits the About page needs */
.pz .xmark{fill:none; stroke:rgba(255,120,120,.8); stroke-width:3.4; stroke-linecap:round}
.pz circle.tring2{fill:rgba(240,90,98,.10); stroke:rgba(255,150,96,.6); stroke-width:1.8}
.pz text.bsym{fill:var(--red-2)}
.pbreaks li b{color:#fff; font-weight:600}

/* the honeypot: reachable by a bot, invisible and untabbable to a person */
.lmhp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.lmerr{
  margin:0; font-size:13px; line-height:1.5; color:#ff9a95;
  padding:9px 12px; border-radius:9px;
  border:1px solid rgba(255,105,100,.4); background:rgba(255,80,80,.10);
}
.lmerr[hidden]{display:none}
.lmgo[disabled]{opacity:.65; cursor:default}

/* ============================================================
   V74 — the site was broken on a phone and hiding it.
   `.page` is a grid, and a grid item defaults to min-width:auto,
   which means it refuses to shrink below its own content width.
   The track sized itself to the 1320px desktop measure, so at a
   390px viewport every section was still 1320px wide and the
   right two thirds of every page was simply cut off. The
   overflow-x:hidden added earlier was hiding the symptom.
   One column that is allowed to be narrower than its contents,
   and items that are allowed to shrink.
   ============================================================ */
.page{grid-template-columns:minmax(0,1fr)}
/* min-width:0 is the part that lets a grid item shrink. Do NOT add
   max-width here: it outranks .inner's own 1320px measure and the whole
   site quietly gets wider on desktop. */
.page > *{min-width:0}

/* at phone width only two marks fit beside the caption, so stop
   rendering the two that would be cut in half */
@media (max-width:760px){
  .hero-foot{flex-wrap:wrap; gap:12px}
  .hero-foot .cap{flex:1 0 100%; max-width:none}
  .slot:nth-of-type(3),.slot:nth-of-type(4){display:none}
}
@media (max-width:520px){
  .slot:nth-of-type(2){display:none}
}

/* ============================================================
   V75 — the hero on a phone.
   The mark row is absolutely positioned against the bottom of
   the hero, which works while the hero is taller than its copy.
   At 390px the copy grows and the row lands on top of the two
   buttons. It joins the flow on small screens instead. The
   slots also carry display:block !important from an older pass,
   so hiding them needs the same weight.
   ============================================================ */

@media (max-width:760px){
  .hero-foot{
    /* relative, not static: z-index is ignored on a static box and the
       hero's scrim, vignette and grain layers paint straight over it */
    position:relative; left:auto; right:auto; bottom:auto; max-width:none;
    /* right:auto matters: a relative box with right:28px still shifts 28px left */
    margin-top:clamp(26px,6vw,40px); padding-top:20px;
    border-top:1px solid rgba(255,255,255,.08);
  }
  .hero{padding-bottom:clamp(24px,5vw,40px)}
  .slot:nth-of-type(3),.slot:nth-of-type(4){display:none !important}
}
@media (max-width:520px){ .hero-foot{gap:14px} }
@media (max-width:360px){ .slot:nth-of-type(2){display:none !important} }

/* the hero is a flex row with the copy at 62% and the visual beside it.
   Once the mark row joins the flow it becomes a second flex item and sits
   next to the copy instead of under it. On a phone the hero is one column. */
@media (max-width:760px){
  .hero{display:block; min-height:0}
  .hero-in{width:auto; padding-bottom:clamp(22px,5vw,34px)}
  .hero-foot{margin-left:clamp(20px,5vw,28px); margin-right:clamp(20px,5vw,28px)}
}

/* ============================================================
   V76 — phone polish.
   The lead window came to 813px tall at 390px wide, which is
   most of an iPhone screen before the browser chrome. Tighter
   here only. Tap targets go up to the 44px everyone expects.
   ============================================================ */

@media (max-width:480px){
  #lead .lmbox{padding:20px 18px 18px; gap:11px; border-radius:18px}
  #lead .lmhead h2{font-size:21px}
  #lead .lmform{gap:9px}
  #lead .lmf input{padding:11px 12px; font-size:16px}   /* 16px stops iOS zooming on focus */
  #lead .lmo{padding:11px 10px; font-size:13px}
  #lead .lmopts,#lead .lmopts.four{grid-template-columns:1fr 1fr; gap:7px}
  #lead .lmgo{padding:14px 18px}
  #lead .lmfine{font-size:11.5px}
  .lmx{width:40px; height:40px; top:10px; right:10px}
  .burger{width:44px; height:44px}
  .lmveil{-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
}

/* on a phone the two calls to action should be full width and easy to hit */
@media (max-width:560px){
  .hero .btns .btn,.ask .btns .btn,.fcta .btns .btn{
    width:100%; justify-content:center;
  }
  .btns{width:100%}
  .btn.b-lg{padding:15px 22px}
}

/* ============================================================
   V77 — hero copy update (2026-09-22).
   The integration label grew from "We build inside your software"
   to "Works with the software you already use." The 16ch cap with
   white-space:nowrap pushed the tail of it under the first logo.
   ============================================================ */
.hero-foot .cap{max-width:none}

/* ============================================================
   V78 — the ask, rebuilt around the free process audit.
   Left: eyebrow, headline, one button, four facts, and the
   reason it is free. Right: the three outputs drawn as one
   vertical workflow, connected by a line that draws itself in
   as the section reveals. No SVG; the connector is a 1px box
   scaled on the y axis. Red haze pulled back so the copy reads.
   ============================================================ */
.ask{
  grid-template-columns:1.12fr 1fr; gap:clamp(28px,4vw,64px);
  background:linear-gradient(148deg, #1a0e16 0%, #0e0912 54%, #140a12 100%);
  border-color:rgba(240,90,98,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 80px -56px rgba(240,90,98,.42);
}
.ask::before{
  background:
    radial-gradient(48% 70% at 4% 0%, rgba(255,116,58,.09), transparent 66%),
    radial-gradient(44% 70% at 98% 100%, rgba(240,90,98,.11), transparent 70%);
}
.ask > .hudgrid{opacity:.6}
.asktag{margin:0; gap:0; font-size:10.5px; letter-spacing:.14em; color:var(--red-2)}
.askmain h2{font-size:clamp(27px,3.6vw,46px); max-width:16ch}
.askmain > p{max-width:50ch}
.askmain .btns{margin-top:clamp(20px,2.4vw,28px)}

.asktrust{
  list-style:none; margin:16px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.asktrust li{
  font-size:12.5px; line-height:1; letter-spacing:.01em; color:var(--text-2);
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03);
}
.askwhy{
  margin-top:clamp(20px,2.4vw,28px); padding:16px 18px; max-width:52ch;
  border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.028);
}
.askwhy h3{
  margin:0; font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:-.01em; color:#fff;
}
.askwhy p{margin:6px 0 0; font-size:14px; line-height:1.6; color:var(--text-2); max-width:none}

/* ---- the workflow ---- */
.askflow{list-style:none; margin:0; padding:0; display:grid; gap:16px; align-self:center}
.asknode{
  position:relative; display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:start;
  opacity:0; translate:0 12px;
  transition:opacity .55s cubic-bezier(.16,1,.3,1), translate .55s cubic-bezier(.16,1,.3,1);
}
.askdot{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; color:var(--red-2);
  border:1px solid rgba(255,138,144,.45); background:rgba(240,90,98,.10);
  box-shadow:0 0 0 4px rgba(240,90,98,.06);
}
/* the connector: from the bottom of this dot to the top of the next */
.asknode:not(:last-child)::before{
  content:''; position:absolute; left:16.5px; top:34px; bottom:-16px; width:1px;
  background:linear-gradient(180deg, rgba(255,138,144,.55), rgba(255,138,144,.30));
  transform:scaleY(0); transform-origin:top;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.askpanel{
  display:grid; gap:6px; padding:14px 16px 15px;
  border-radius:14px; border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.askpanel b{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(15.5px,1.4vw,17.5px); color:#fff;
}
.askpanel i{font-style:normal; font-size:13.5px; line-height:1.5; color:var(--text-2)}

/* the illustrative workflow strip: four steps joined by short rules */
.askwf{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px}
.askwf span,.askissues span,.askfix span{
  font-size:11.5px; line-height:1; white-space:nowrap; color:var(--text-2);
  padding:6px 9px; border-radius:7px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
}
.askwf em{flex:0 0 10px; height:1px; background:rgba(255,255,255,.22)}
.askwf .askhot,.askfix .askhot{
  color:#fff; border-color:rgba(255,138,144,.7); background:rgba(240,90,98,.16);
  box-shadow:0 0 0 3px rgba(240,90,98,.08);
}
.askissues{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.askissues span{border-style:dashed; border-color:rgba(255,255,255,.16); color:var(--text-3); background:transparent}
.askfix{display:flex; align-items:center; gap:8px; margin-top:8px}
.askfixlbl{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,138,144,.8); border:none; background:none; padding:0;
}
.askfix .askhot{font-size:12.5px; padding:7px 11px}

/* the sequence: node, line, node, line, node */
.rv.in .asknode{opacity:1; translate:0}
.rv.in .asknode:not(:last-child)::before{transform:scaleY(1)}
.rv.in .asknode:nth-child(1){transition-delay:.15s}
.rv.in .asknode:nth-child(1)::before{transition-delay:.45s}
.rv.in .asknode:nth-child(2){transition-delay:.75s}
.rv.in .asknode:nth-child(2)::before{transition-delay:1.05s}
.rv.in .asknode:nth-child(3){transition-delay:1.35s}

@media (prefers-reduced-motion:reduce){
  .asknode,.asknode::before{transition:none; opacity:1; translate:0; transform:none}
}

/* tablet keeps two columns with a tighter gutter; phones stack.
   this has to restate the column rule: the V78 .ask block above
   sits later in the file than the original 940px stacking rule. */
@media (max-width:940px){ .ask{gap:clamp(22px,4vw,34px)} }
@media (max-width:700px){
  .ask{grid-template-columns:1fr}
  .askflow{align-self:auto}
}
@media (max-width:560px){
  .askmain h2{max-width:none}
  .asknode{grid-template-columns:30px 1fr; gap:12px}
  .askdot{width:30px; height:30px; font-size:10px}
  .asknode:not(:last-child)::before{left:14.5px; top:30px}
  .askpanel{padding:13px 13px 14px}
}

/* ============================================================
   V79 — the welcome stations were soft and dim for the first
   half second. Two scales were stacking: the card itself grows
   from .975 with will-change:transform, so its whole surface is
   rasterised small and stretched until the transition ends, and
   each station also grew from .72. Neither scales now. The card
   fades and lifts, the stations fade in place, and the art no
   longer fades as a whole on top of them.
   ============================================================ */
#welcome .lmbox{scale:1; will-change:auto; transition:opacity .42s cubic-bezier(.16,1,.3,1), translate .42s cubic-bezier(.16,1,.3,1)}
#welcome.on .wzart{animation:none; opacity:1; translate:0 0}
#welcome.on .wzs{animation:wzst1 2.4s cubic-bezier(.22,.9,.28,1)}
#welcome.on .wzs.s2{animation-name:wzst2}
#welcome.on .wzs.s3{animation-name:wzst3}
#welcome.on .wzs.s4{animation-name:wzst4}
@keyframes wzst1{0%{opacity:0} 12%,100%{opacity:1}}
@keyframes wzst2{0%,25%{opacity:0} 37%,100%{opacity:1}}
@keyframes wzst3{0%,50%{opacity:0} 62%,100%{opacity:1}}
@keyframes wzst4{0%,75%{opacity:0} 87%,100%{opacity:1}}
.no-js .asknode{opacity:1; translate:0}
.no-js .asknode::before{transform:none}

/* ============================================================
   V80 — how we decide what to build. Replaces the free-audit
   block, which repeated what 03b already says. Four checks on
   one rail, an output pill at the end, a closing principle.
   Static by design: the only motion is the site-wide reveal.
   ============================================================ */
.std{
  position:relative; isolation:isolate; overflow:hidden;
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  background:linear-gradient(168deg, #16111d 0%, #0e0b14 58%, #110c16 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 80px -60px rgba(0,0,0,.9);
  padding:clamp(28px,4vw,56px) clamp(22px,3.4vw,54px);
  display:grid; gap:clamp(26px,3.2vw,44px);
}
.std .stdgrid{position:absolute; inset:0; z-index:0; opacity:.5}
.stdhead,.stdchecks,.stdclose{position:relative; z-index:1}

.stdhead{display:grid; gap:14px; max-width:60ch}
.stdhead .asktag{margin:0}
.stdhead h2{
  margin:2px 0 0; color:#fff; max-width:18ch;
  font-family:var(--f-display); font-weight:700; letter-spacing:-.042em; line-height:1.04;
  font-size:clamp(27px,3.7vw,46px); text-wrap:balance;
}
.stdhead p:last-child{margin:0; max-width:56ch; font-size:clamp(14.5px,1.4vw,16.5px); line-height:1.62; color:var(--text-2)}

/* ---- the principle ---- */
.stdclose{
  margin:0; padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px);
  border:1px solid rgba(240,90,98,.32); border-left:3px solid var(--red-2); border-radius:14px;
  background:rgba(240,90,98,.05);
  font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; line-height:1.3;
  font-size:clamp(16px,1.7vw,21px); color:#fff; text-wrap:balance;
}


/* ---- the rail, second pass. ONE line element, labels above it,
   a hollow node per check and a filled node at the end. ---- */
.stdchecks{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto;
  gap:0 clamp(16px,2vw,30px); align-items:start;
}
.stdline{position:absolute; left:3px; right:3px; top:23px; height:1px; background:rgba(240,90,98,.40); z-index:0}
.stdc,.stdout{position:relative; z-index:1}
.stdc{display:grid; gap:8px; align-content:start; padding-top:42px}
.stdlab{
  position:absolute; top:0; left:0;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; line-height:1; color:var(--red-2);
}
.stdc::before,.stdout::before{
  content:''; position:absolute; top:20px; left:0; width:7px; height:7px; border-radius:50%;
  background:#110c16; border:1px solid var(--red-2); box-sizing:border-box;
}
/* the output label is in flow so the auto column takes its width */
.stdout{min-height:28px; text-align:right}
.stdout .stdlab{position:static; display:block; white-space:nowrap; color:#fff}
.stdout::before{left:auto; right:0; background:var(--red-2)}
.stdc b{
  font-family:var(--f-display); font-weight:600; letter-spacing:-.025em; line-height:1.15;
  font-size:clamp(16px,1.55vw,19px); color:#fff;
}
.stdc i{font-style:normal; font-size:13.5px; line-height:1.6; color:var(--text-2)}

/* under 880px the row is too tight for four columns. one vertical line. */
@media (max-width:880px){
  .stdchecks{grid-template-columns:1fr; gap:0}
  .stdline{left:3px; right:auto; top:4px; bottom:4px; width:1px; height:auto}
  .stdc{padding:0 0 26px 24px}
  .stdc::before,.stdout::before{top:2px; left:0; right:auto}
  .stdlab{position:static; display:block; margin-bottom:2px}
  .stdc .stdlab{margin-top:0}
  .stdout{padding-left:24px; min-height:0}
  .stdout .stdlab{color:#fff}
}

/* ============================================================
   V81 — the welcome sequence, made smooth.
   Two things were fighting it. The veil blurs the whole viewport,
   and the shader, the meteors and every looping animation behind
   it kept changing, so the blur was recomputed on every frame
   for as long as the window was open. And the schematic lived
   inside an SVG, where fades and line draws cannot go to the
   compositor. Now: everything behind a window pauses, and the
   schematic is HTML, animated with transform and opacity only.
   ============================================================ */
body.lmopen .page *{animation-play-state:paused !important}

.wzrow{display:flex; align-items:flex-end; padding:0 2px}
.wzst{display:grid; justify-items:center; gap:11px; flex:0 0 auto}
.wzc{font-family:var(--f-body); font-size:11.5px; letter-spacing:.02em; line-height:1; color:rgba(255,255,255,.55)}
.wzst.end .wzc{color:rgba(255,178,132,.95)}
.wzdisc{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:#131217; border:1.3px solid rgba(255,255,255,.20); box-sizing:border-box;
}
.wzdisc svg{width:15px; height:15px; fill:none; stroke:rgba(255,255,255,.72); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.wzst.end .wzdisc{background:#1d1216; border-color:rgba(255,160,110,.95)}
.wzst.end .wzdisc svg{stroke:#ffb98d; stroke-width:1.9}
.wzln{flex:1 1 auto; position:relative; height:1px; margin:0 4px 17px; background:rgba(255,255,255,.10)}
.wzln i{
  position:absolute; inset:0; display:block;
  background:linear-gradient(90deg, rgba(255,150,96,.85), rgba(255,178,132,.95));
  transform-origin:left center;
}
/* the sequence. the elements rest visible; the entrance plays over them. */
.wzst,.wzln i{will-change:transform,opacity}
#welcome.on .wzst{animation:wzin .6s cubic-bezier(.16,1,.3,1) both}
#welcome.on .wzst.s1{animation-delay:.10s}
#welcome.on .wzst.s2{animation-delay:.85s}
#welcome.on .wzst.s3{animation-delay:1.60s}
#welcome.on .wzst.s4{animation-delay:2.35s}
#welcome.on .wzln i{animation:wzgrow .62s cubic-bezier(.4,0,.2,1) both}
#welcome.on .wzln.l1 i{animation-delay:.40s}
#welcome.on .wzln.l2 i{animation-delay:1.15s}
#welcome.on .wzln.l3 i{animation-delay:1.90s}
@keyframes wzin{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
@keyframes wzgrow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
#welcome.settled .wzst,#welcome.settled .wzln i{animation:none; opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  #welcome.on .wzst,#welcome.on .wzln i{animation:none; opacity:1; transform:none}
}

/* ============================================================
   V82 — the accordion rows, restored as a shared component.
   They were defined inside the old audit block's CSS and went
   out with it, which left the FAQ on What We Build as bare text.
   ============================================================ */
.audq-wrap{display:grid; gap:9px}
.audq{
  border:1px solid rgba(240,90,98,.24); border-radius:12px; overflow:hidden;
  background:rgba(255,255,255,.018);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.audq:hover{border-color:rgba(240,90,98,.46); background:rgba(255,255,255,.035)}
.audq[open]{border-color:rgba(240,90,98,.42); background:rgba(255,255,255,.03)}
.audq summary{
  display:flex; align-items:center; gap:14px; cursor:pointer; list-style:none;
  padding:clamp(13px,1.5vw,17px) clamp(15px,1.8vw,20px);
  font-family:var(--f-display); font-weight:600; letter-spacing:-.025em;
  font-size:clamp(15px,1.5vw,17.5px); color:#fff;
}
.audq summary::-webkit-details-marker{display:none}
.audq summary:focus-visible{outline:2px solid var(--red-2); outline-offset:-2px}
.audq .sn{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  color:var(--red-2); flex:0 0 auto;
}
.audq summary::after{
  content:''; margin-left:auto; flex:0 0 auto;
  width:9px; height:9px; margin-top:-4px;
  border-right:2px solid var(--red-2); border-bottom:2px solid var(--red-2);
  rotate:45deg; transition:rotate .28s var(--ease), translate .28s var(--ease);
}
.audq[open] summary::after{rotate:-135deg; translate:0 4px}
.audq .ab{padding:0 clamp(15px,1.8vw,20px) clamp(15px,1.8vw,19px)}
.audq .ab p{margin:0; font-size:14.5px; line-height:1.68; color:var(--text-2); max-width:78ch}
.audq .ab p + p{margin-top:11px}
.audq[open] .ab{animation:audopen .34s var(--ease)}
@keyframes audopen{from{opacity:0; translate:0 -6px} to{opacity:1; translate:0 0}}
@media (prefers-reduced-motion:reduce){ .audq[open] .ab{animation:none} }

/* ============================================================
   V84 — the invoice, one card. The dashed inner frame and the
   second card behind it are gone. A single card with a header
   band, four lines and the coin, floating a few pixels and
   catching a light every few seconds. (services.html)
   ============================================================ */
.pz .bshadow{fill:rgba(0,0,0,.55); stroke:none; filter:blur(6px)}
.pz .bcard{fill:url(#bgrad); stroke:rgba(255,255,255,.16); stroke-width:1.2}
.pz .bband{fill:rgba(240,90,98,.22); stroke:none}
.pz .bband2{fill:rgba(240,90,98,.22); stroke:none}
.pz .bl{fill:rgba(255,255,255,.55); stroke:none}
.pz .bl.dim{fill:rgba(255,255,255,.22)}
.pz .bl.acc{fill:var(--red-2)}
.pz .bcoin{fill:rgba(240,90,98,.16); stroke:rgba(255,150,96,.9); stroke-width:1.6}
.pz .bsym2{fill:#ffb98d; font-family:var(--f-display); font-weight:700; font-size:22px; text-anchor:middle; dominant-baseline:central}
.pz .bglint{fill:url(#bsheen); stroke:none; animation:bglint 7s cubic-bezier(.4,0,.2,1) infinite}
.bfloat{transform-box:view-box; transform-origin:170px 88px; animation:bfloat 6s ease-in-out infinite}
@keyframes bfloat{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
@keyframes bglint{0%,55%{transform:translateX(40px) skewX(-18deg)} 85%,100%{transform:translateX(300px) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){ .bfloat,.pz .bglint{animation:none} }

/* ============================================================
   V86 — the What We Build hero, rebuilt. One card under the nav,
   copy left (42%), a Before / Connected handoff visual right
   (58%). The visual is one SVG; state lives in data-state on
   .wbvis and every animation is keyed off it, so switching
   state replays the choreography. Phones get an HTML version
   of the same two states. Scoped to .wbhero.
   ============================================================ */
.wbhero{margin-top:calc(40px - var(--gap))}
.wbh{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid rgba(240,90,98,.20);
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(240,90,98,.16), transparent 62%),
    radial-gradient(50% 60% at 0% 100%, rgba(120,70,190,.16), transparent 64%),
    linear-gradient(150deg, #150e19 0%, #0d0a13 50%, #0a0810 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 40px 90px -60px rgba(240,90,98,.35);
  padding:clamp(26px,3.4vw,50px);
  display:grid; grid-template-columns:42fr 58fr; gap:clamp(24px,3.6vw,54px); align-items:center;
}
.wbglow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(38% 50% at 72% 50%, rgba(240,90,98,.10), transparent 70%);
}
.wbcopy,.wbvis{position:relative; z-index:1}
.wbcopy .asktag{margin:0}
.wbcopy h1{
  margin:16px 0 0; color:#fff; font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.5rem,3.55vw,3.5rem); line-height:1.02; letter-spacing:-.045em; text-wrap:balance;
}
.wbcopy .sub{margin:18px 0 0; font-size:clamp(15px,1.35vw,17px); line-height:1.6; color:var(--text-2); max-width:44ch}
.wbcopy .btns{margin-top:clamp(20px,2.4vw,28px); display:flex; flex-wrap:wrap; gap:10px}

/* ---- the visual ---- */
.wbvis{display:grid; gap:12px}
.wbctl{display:flex; gap:6px; justify-self:start; padding:4px; border-radius:999px; border:1px solid var(--line-2); background:rgba(0,0,0,.35)}
.wbbtn{
  appearance:none; border:1px solid transparent; border-radius:999px; cursor:pointer;
  padding:8px 14px; min-height:34px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--text-3); background:transparent;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.wbbtn:hover{color:var(--text)}
.wbbtn[aria-pressed="true"]{color:#fff; background:rgba(240,90,98,.18); border-color:rgba(255,138,144,.55)}
.wbbtn:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}

.wbstage{
  position:relative; overflow:hidden; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01)), #0e0b13;
  box-shadow:0 30px 70px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.04);
}
.wbstage::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.028) 0 1px, transparent 1px 30px);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 95%);
  mask-image:radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 95%);
}
.wbsvg{position:relative; z-index:1; display:block; width:100%; height:auto}
.wbsvg text{font-family:var(--f-body)}

/* lines */
.wbsvg .wbl{fill:none; stroke-width:1.2; stroke-linecap:round; transition:opacity .5s var(--ease)}
.wbsvg .wbl-b{stroke:rgba(255,255,255,.22); stroke-dasharray:4 5}
.wbsvg .wbl-c{stroke:rgba(255,138,144,.55)}
[data-state="before"] .wbl-c{opacity:0}
[data-state="connected"] .wbl-b{opacity:0}

/* the request card */
.wbsvg .wbrbox{fill:#1a1420; stroke:rgba(255,255,255,.18); stroke-width:1.2}
.wbsvg .wbrtop{fill:var(--red-2)}
.wbsvg .wbrn{fill:#fff; font-family:var(--f-display); font-weight:600; font-size:12.5px; letter-spacing:-.01em}
.wbsvg .wbbar{fill:rgba(255,255,255,.28); stroke:none}

/* duplicated records, before */
.wbchip{offset-rotate:0deg; offset-distance:0%; opacity:0; transition:none}
.wbchip rect:first-child{fill:#221a29; stroke:rgba(255,255,255,.26); stroke-width:1}
.wbchipin{transform-box:fill-box; transform-origin:center}
.ch-crm .wbchipin{transform:rotate(-3deg) translate(0,-2px)}
.ch-cal .wbchipin{transform:rotate(4deg) translate(0,2px)}
.ch-inbox .wbchipin{transform:rotate(-2deg) translate(0,3px)}
.ch-pay .wbchipin{transform:rotate(3deg)}
[data-state="before"] .wbchip{animation:wbtravel 1.3s cubic-bezier(.4,0,.2,1) both}
[data-state="before"] .ch-crm{animation-delay:.25s}
[data-state="before"] .ch-cal{animation-delay:.45s}
[data-state="before"] .ch-inbox{animation-delay:.65s}
[data-state="before"] .ch-pay{animation-delay:.85s; animation-name:wbtravelshort}
[data-state="connected"] .wbchip{animation:wbreturn .8s cubic-bezier(.4,0,.2,1) both}
@keyframes wbtravel{0%{offset-distance:0%; opacity:0} 12%{opacity:1} 100%{offset-distance:88%; opacity:1}}
@keyframes wbtravelshort{0%{offset-distance:0%; opacity:0} 12%{opacity:1} 100%{offset-distance:64%; opacity:1}}
@keyframes wbreturn{0%{offset-distance:80%; opacity:1} 100%{offset-distance:4%; opacity:0}}

/* the one record, connected */
.wbrec{offset-path:path('M156 200 H300'); offset-rotate:0deg; offset-distance:0%; opacity:0}
.wbrec rect:first-child{fill:#241521; stroke:var(--red-2); stroke-width:1.2}
[data-state="connected"] .wbrec{animation:wbrecord 1s cubic-bezier(.4,0,.2,1) .9s both}
@keyframes wbrecord{0%{offset-distance:0%; opacity:0} 20%{opacity:1} 100%{offset-distance:100%; opacity:1}}

/* the process layer */
.wbsvg .wblbox{fill:rgba(240,90,98,.06); stroke:rgba(255,138,144,.45); stroke-width:1.2; stroke-dasharray:4 4}
.wbsvg .wblin{fill:rgba(255,255,255,.03); stroke:rgba(255,255,255,.10); stroke-width:1}
.wbsvg .wbll{fill:var(--red-2); font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em; text-anchor:middle}
.wblayer{transition:opacity .6s var(--ease)}
[data-state="before"] .wblayer{opacity:.22}
[data-state="connected"] .wblayer{opacity:1}
[data-state="connected"] .wblbox{animation:wblayeron 1s var(--ease) .5s both}
@keyframes wblayeron{from{stroke-dasharray:4 4; fill:rgba(240,90,98,.06)} to{stroke-dasharray:1 0; fill:rgba(240,90,98,.12)}}

/* pulses layer -> systems, connected */
.wbsvg .wbp{fill:none; stroke:#ffb98d; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:18 100; stroke-dashoffset:118; opacity:0}
[data-state="connected"] .wbp{animation:wbpulse .7s linear both}
[data-state="connected"] .p-crm{animation-delay:2.0s}
[data-state="connected"] .p-cal{animation-delay:2.5s}
[data-state="connected"] .p-inbox{animation-delay:3.0s}
[data-state="connected"] .p-pay{animation-delay:3.5s}
@keyframes wbpulse{0%{stroke-dashoffset:118; opacity:1} 95%{stroke-dashoffset:0; opacity:1} 100%{stroke-dashoffset:0; opacity:0}}

/* destinations */
.wbsvg .wbdbox{fill:#171220; stroke:rgba(255,255,255,.16); stroke-width:1.2; transition:stroke .5s var(--ease), fill .5s var(--ease)}
.wbsvg .wbdn{fill:#fff; font-family:var(--f-display); font-weight:600; font-size:12px; letter-spacing:-.01em; dominant-baseline:central}
.wbsvg .wbdot{fill:rgba(255,255,255,.22); transition:fill .5s var(--ease)}
.wbsvg .wbds{font-family:var(--f-mono); font-size:8px; letter-spacing:.12em; dominant-baseline:central; transition:opacity .4s var(--ease)}
.wbsvg .wbds-b{fill:var(--text-3)}
.wbsvg .wbds-c{fill:#ffb98d}
[data-state="before"] .wbds-c{opacity:0}
[data-state="connected"] .wbds-b{opacity:0}
[data-state="connected"] .wbds-c{opacity:0; animation:wbfadein .5s var(--ease) both}
[data-state="connected"] .wbdest .wbdbox{animation:wbdeston .8s var(--ease) both}
[data-state="connected"] .wbdest .wbdot{animation:wbdoton .8s var(--ease) both}
[data-state="connected"] .d-crm .wbdbox,[data-state="connected"] .d-crm .wbdot,[data-state="connected"] .d-crm .wbds-c{animation-delay:2.6s}
[data-state="connected"] .d-cal .wbdbox,[data-state="connected"] .d-cal .wbdot,[data-state="connected"] .d-cal .wbds-c{animation-delay:3.1s}
[data-state="connected"] .d-inbox .wbdbox,[data-state="connected"] .d-inbox .wbdot,[data-state="connected"] .d-inbox .wbds-c{animation-delay:3.6s}
[data-state="connected"] .d-pay .wbdbox,[data-state="connected"] .d-pay .wbdot,[data-state="connected"] .d-pay .wbds-c{animation-delay:4.1s}
@keyframes wbdeston{to{fill:#1d1420; stroke:rgba(255,138,144,.6)}}
@keyframes wbdoton{to{fill:var(--red-2)}}
@keyframes wbfadein{to{opacity:1}}
[data-state="before"] .d-cal .wbds-b{fill:#ffb98d}

/* status pills */
.wbst rect{fill:#120d17; stroke:rgba(255,255,255,.18); stroke-width:1}
.wbst text{fill:#fff; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.08em; text-anchor:middle; dominant-baseline:central}
.wbst{opacity:0}
[data-state="before"] .wbst-b{animation:wbfadein .5s var(--ease) both}
[data-state="before"] .s-manual{animation-delay:1.9s}
[data-state="before"] .s-wait{animation-delay:2.2s}
[data-state="before"] .s-wait rect{stroke:rgba(255,187,61,.55)}
[data-state="connected"] .wbst-c{animation:wbfadein .5s var(--ease) both}
[data-state="connected"] .s-one{animation-delay:1.9s}
[data-state="connected"] .s-next{animation-delay:3.7s}
[data-state="connected"] .s-done{animation-delay:4.5s}
[data-state="connected"] .wbst-c rect{stroke:rgba(255,138,144,.55)}

/* ---- the phone version ---- */
.wbmob{display:none; position:relative; z-index:1; padding:14px 14px 16px; font-size:13px}
.wbm-req{display:inline-block; padding:8px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.18); border-top:3px solid var(--red-2); background:#1a1420; color:#fff; font-family:var(--f-display); font-weight:600}
.wbm-layer{margin-top:10px; padding:9px 12px; border-radius:10px; border:1px solid rgba(255,138,144,.45); background:rgba(240,90,98,.10); display:flex; justify-content:space-between; align-items:center; gap:10px}
.wbm-layer span{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; color:var(--red-2)}
.wbm-layer em{font-style:normal; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em; color:#fff}
[data-state="before"] .wbm-layer{display:none}
.wbm-dests{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px}
.wbm-dests li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.14); background:#171220}
.wbm-dests b{font-family:var(--f-display); font-weight:600; color:#fff; font-size:13.5px}
.wbm-dests i{font-style:normal; font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}
[data-state="connected"] .wbm-dests li{border-color:rgba(255,138,144,.45)}
[data-state="connected"] .wbm-dests i{color:#ffb98d}
.wbm-foot{margin:10px 0 0; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; color:var(--text-2); line-height:1.5}
[data-state="before"] .wb-c,[data-state="connected"] .wb-b{display:none}

/* ---- responsive ---- */
@media (max-width:1100px){ .wbcopy h1{font-size:clamp(2.3rem,3.6vw,3rem)} }
@media (max-width:900px){
  .wbh{grid-template-columns:1fr; gap:clamp(22px,4vw,32px)}
  .wbcopy .sub{max-width:56ch}
  .wbvis{max-width:680px}
}
@media (max-width:600px){
  .wbhero{margin-top:calc(28px - var(--gap))}
  .wbcopy .btns .btn{width:100%}
  .wbsvg{display:none}
  .wbmob{display:block}
  .wbctl{width:100%; justify-self:stretch}
  .wbbtn{flex:1; min-height:40px}
}
@media (prefers-reduced-motion:reduce){
  .wbchip,.wbrec,.wbp,.wbst,.wbdest .wbdbox,.wbdest .wbdot,.wbds-c,.wblbox,.wblayer,.wbl{animation:none !important; transition:none !important}
  .wbchip{display:none}
  [data-state="connected"] .wbrec{opacity:1; offset-distance:100%}
  [data-state="connected"] .wbp{display:none}
  [data-state="connected"] .wbst-c,[data-state="before"] .wbst-b{opacity:1}
  [data-state="connected"] .wbds-c{opacity:1}
  [data-state="connected"] .wbdest .wbdbox{fill:#1d1420; stroke:rgba(255,138,144,.6)}
  [data-state="connected"] .wbdest .wbdot{fill:var(--red-2)}
  [data-state="connected"] .wblbox{stroke-dasharray:1 0; fill:rgba(240,90,98,.12)}
}
/* the two buttons have to share a row down to a laptop; the ghost label is
   long, so the pair tightens a little before it would wrap */
@media (max-width:1400px){ .wbcopy .btns{gap:8px} .wbcopy .btns .btn.b-lg{padding-inline:17px; font-size:14.5px} }
@media (max-width:1100px) and (min-width:901px){ .wbcopy .btns .btn.b-lg{padding-inline:13px; font-size:13.5px} }

/* ============================================================
   V87 — the Process Impact Calculator on What We Build.
   Four modes, real inputs, three balanced results, one SVG
   chart per mode, formula disclosure. Scoped to .pic.
   ============================================================ */
.pic{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line-2);
  background:linear-gradient(160deg, #15101b 0%, #0e0b14 55%, #100c15 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  padding:clamp(24px,3.4vw,50px);
  display:grid; gap:clamp(18px,2.2vw,26px);
}
.pic::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(50% 60% at 100% 0%, rgba(240,90,98,.10), transparent 64%);
}
.pic > *{position:relative; z-index:1}
.pichead{max-width:60ch}
.pichead .asktag{margin:0}
.pichead h2{margin:14px 0 0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(24px,2.8vw,36px); line-height:1.06; letter-spacing:-.04em; text-wrap:balance}
.pichead p:last-child{margin:12px 0 0; font-size:15px; line-height:1.6; color:var(--text-2); max-width:56ch}

.pictabs{display:flex; flex-wrap:wrap; gap:6px; padding:4px; border-radius:14px; border:1px solid var(--line-2); background:rgba(0,0,0,.3); justify-self:start}
.pictabs [role=tab]{
  appearance:none; border:1px solid transparent; background:transparent; cursor:pointer;
  padding:10px 16px; border-radius:10px; min-height:40px;
  font-family:var(--f-body); font-weight:600; font-size:14px; color:var(--text-2);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.pictabs [role=tab]:hover{color:#fff}
.pictabs [role=tab][aria-selected="true"]{color:#fff; background:rgba(240,90,98,.18); border-color:rgba(255,138,144,.5)}
.pictabs [role=tab]:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}

.picmeta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3)}
.picsrc{color:var(--red-2)}
.picreset{appearance:none; background:transparent; border:1px solid var(--line-2); color:var(--text-2); border-radius:999px; padding:6px 11px; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; transition:border-color .25s var(--ease), color .25s var(--ease)}
.picreset:hover{color:#fff; border-color:var(--line-3)}
.picreset:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}
.piclocal{margin-left:auto}

.picbody{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,3vw,44px); align-items:start}
.picin{display:grid; gap:14px}
.picf{display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center}
.picf > span:first-child{font-size:14px; color:var(--text-2); line-height:1.35}
.picnum{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-2); border-radius:9px; background:rgba(255,255,255,.04); padding:0 10px; transition:border-color .25s var(--ease)}
.picnum:focus-within{border-color:var(--red-2)}
.picnum i{font-style:normal; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; color:var(--text-3); min-width:1ch}
.picnum input{
  appearance:textfield; -moz-appearance:textfield; width:9ch; border:0; background:transparent; color:#fff; outline:none;
  font-family:var(--f-display); font-weight:600; font-size:16px; padding:9px 0; text-align:right; font-variant-numeric:tabular-nums;
}
.picnum input::-webkit-outer-spin-button,.picnum input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.picf input[type=range]{grid-column:1 / -1; width:100%; height:4px; appearance:none; -webkit-appearance:none; background:rgba(255,255,255,.14); border-radius:2px; outline:none; cursor:pointer}
.picf input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--red); box-shadow:0 2px 10px rgba(0,0,0,.5); cursor:grab}
.picf input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid var(--red); cursor:grab}
.picf input[type=range]:focus-visible{outline:2px solid var(--red-2); outline-offset:4px}

.picout{display:grid; gap:16px}
.picviz{padding:16px 18px 12px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.025)}
.picviz svg{display:block; width:100%; height:auto; overflow:visible}
.picviz text{font-family:var(--f-body)}
.picviz .pclab{fill:var(--text-2); font-size:11.5px}
.picviz .pcval{fill:#fff; font-size:11.5px; font-weight:600}
.picviz .pcbig{fill:#fff; font-family:var(--f-display); font-weight:700; font-size:24px; letter-spacing:-.03em}
.picviz .pctrack{fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.07)}
.picviz .pcbar{fill:rgba(255,255,255,.34); transition:width .3s var(--ease), x .3s var(--ease)}
.picviz .pcbar.dim{fill:rgba(255,255,255,.14)}
.picviz .pcbar.hot{fill:var(--red)}
.picviz .pcbar.hot.soft{fill:rgba(240,90,98,.38)}
.picviz .pcring{stroke:var(--red); transition:stroke-dasharray .3s var(--ease)}
.picviz .pcsw{fill:rgba(255,255,255,.34)} .picviz .pcsw.hot{fill:var(--red)} .picviz .pcsw.dim{fill:rgba(255,255,255,.14)}

.piccards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.piccard{display:grid; gap:5px; align-content:start; padding:14px 15px 15px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03)}
.piccard span{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3)}
.piccard b{font-family:var(--f-display); font-weight:700; font-size:clamp(19px,1.9vw,26px); letter-spacing:-.03em; color:#fff; line-height:1.1; font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.piccard i{font-style:normal; font-size:12px; line-height:1.45; color:var(--text-3)}
.piccard.con{border-color:rgba(255,138,144,.32)}
.piccard.str{border-color:rgba(255,138,144,.55); background:rgba(240,90,98,.07)}
.piccard.str span{color:var(--red-2)}
.pic.tick .piccard b{animation:pictick .3s var(--ease)}
@keyframes pictick{from{opacity:.35} to{opacity:1}}

.pichow{border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.02)}
.pichow summary{cursor:pointer; list-style:none; padding:13px 16px; font-family:var(--f-display); font-weight:600; font-size:14.5px; color:#fff; display:flex; align-items:center; gap:10px}
.pichow summary::-webkit-details-marker{display:none}
.pichow summary::after{content:''; margin-left:auto; width:8px; height:8px; border-right:2px solid var(--red-2); border-bottom:2px solid var(--red-2); rotate:45deg; margin-top:-3px; transition:rotate .25s var(--ease)}
.pichow[open] summary::after{rotate:-135deg; margin-top:3px}
.pichow summary:focus-visible{outline:2px solid var(--red-2); outline-offset:-2px}
.pichowin{padding:0 16px 14px}
.pichowin p{margin:0; font-size:13.5px; line-height:1.62; color:var(--text-2); max-width:76ch}
.pichowin p + p{margin-top:8px}

.picfoot{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding-top:6px}
.picdisc{margin:0; font-size:12.5px; line-height:1.5; color:var(--text-3); max-width:52ch}

@media (max-width:960px){
  .picbody{grid-template-columns:1fr}
  .piclocal{margin-left:0}
}
@media (max-width:600px){
  .piccards{grid-template-columns:1fr}
  .picf{grid-template-columns:1fr}
  .picnum{justify-self:stretch}
  .picnum input{width:100%; font-size:17px; padding:11px 0}
  .picfoot .btn{width:100%; justify-content:center}
  .pictabs{justify-self:stretch}
  .pictabs [role=tab]{flex:1 1 45%; min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  .pic.tick .piccard b{animation:none}
  .picviz .pcbar,.picviz .pcring,.pictabs [role=tab],.picnum{transition:none}
}

/* ============================================================
   V88 — a standalone audit button between blocks on the home
   page. Same orange as the lead window's submit, bigger, alone
   on its row. Nothing else in the section.
   ============================================================ */
.solo{display:flex; justify-content:center; padding:0}
.b-orange{
  color:#fff; border-color:transparent;
  background:linear-gradient(180deg, #ff8046 0%, #f4552f 52%, #dd4120 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.22), 0 18px 44px -16px rgba(240,90,45,.85);
  transition:background .3s var(--ease), box-shadow .3s var(--ease), translate .3s var(--ease);
}
.b-orange:hover{
  background:linear-gradient(180deg, #ff8b53 0%, #f75f39 52%, #e64826 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.22), 0 24px 54px -16px rgba(240,90,45,.95);
  translate:0 -2px;
}
.b-xl{padding:17px 34px; font-size:17px; border-radius:13px; font-weight:600; letter-spacing:-.01em}
@media (max-width:560px){ .solo .btn{width:100%; justify-content:center} }

/* ============================================================
   V89 — industries drawings, third pass.
   HVAC: the cold-air lines and the snowflake are gone; the unit
   sits in the centre and just runs. Roofing: no more loose
   blocks. A gable, and five courses of shingles that lay
   themselves from the eave up when the section arrives.
   ============================================================ */
.tfan{transform-box:view-box; transform-origin:170px 110px}
.pz .rroof{fill:#1b1420; stroke:none}
.pz .rridge{fill:none; stroke:rgba(255,150,96,.85); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round}
.pz .rc{fill:none; stroke:rgba(255,255,255,.34); stroke-width:1.3; stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset .7s cubic-bezier(.16,1,.3,1)}
.pz .rt{fill:none; stroke:rgba(255,255,255,.16); stroke-width:1; opacity:0; transition:opacity .4s cubic-bezier(.16,1,.3,1)}
.rv.in .pz .rc{stroke-dashoffset:0} .rv.in .pz .rt{opacity:1}
.rv.in .pz .c1{transition-delay:.1s} .rv.in .pz .c2{transition-delay:.3s} .rv.in .pz .c3{transition-delay:.5s}
.rv.in .pz .c4{transition-delay:.7s} .rv.in .pz .c5{transition-delay:.9s}
@media (prefers-reduced-motion:reduce){ .pz .rc,.pz .rt{transition:none; stroke-dashoffset:0; opacity:1} }

/* ============================================================
   V90 — What We Build: the questions block and the final ask.
   FAQ: intro left (36%, sticky on wide screens), nine rows
   right, one open at a time, height animated with a grid row.
   Final ask: one card, copy left, a small assessment record
   right whose line runs through three stages once on reveal.
   ============================================================ */
.faq2{display:grid; grid-template-columns:36fr 64fr; gap:clamp(28px,4vw,64px); align-items:start}
.faqintro .asktag{margin:0}
.faqintro h2{margin:14px 0 0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(25px,2.7vw,36px); line-height:1.08; letter-spacing:-.04em; text-wrap:balance}
.faqintro > p{margin:14px 0 0; font-size:15px; line-height:1.62; color:var(--text-2); max-width:38ch}
.faqprin{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--line-2); max-width:38ch}
.faqprin li{position:relative; padding:12px 0 12px 20px; border-bottom:1px solid var(--line); font-family:var(--f-display); font-weight:600; font-size:14.5px; letter-spacing:-.015em; color:#fff}
.faqprin li::before{content:''; position:absolute; left:2px; top:50%; width:8px; height:2px; border-radius:1px; background:var(--red-2)}
@media (min-width:1100px){ .faqintro{position:sticky; top:calc(var(--gut) + 96px)} }

.faqlist{display:grid; gap:8px; max-width:760px}
.faqi{border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); transition:border-color .25s var(--ease), background .25s var(--ease)}
.faqi:hover{border-color:var(--line-2)}
.faqi.open{border-color:rgba(255,138,144,.42); background:rgba(255,255,255,.035)}
.faqh{margin:0}
.faqb{
  appearance:none; background:none; border:0; width:100%; cursor:pointer; text-align:left;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:15px 16px 15px 18px; color:#fff;
  font-family:var(--f-display); font-weight:600; font-size:clamp(14.5px,1.3vw,16.5px); letter-spacing:-.02em; line-height:1.3;
}
.faqb:focus-visible{outline:2px solid var(--red-2); outline-offset:-2px; border-radius:14px}
.fqn{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--red-2)}
.fqx{position:relative; width:14px; height:14px}
.fqx::before,.fqx::after{content:''; position:absolute; left:0; top:6px; width:14px; height:2px; border-radius:1px; background:var(--text-2); transition:rotate .25s var(--ease), background .25s var(--ease)}
.fqx::after{rotate:90deg}
.faqi.open .fqx::after{rotate:0deg}
.faqi.open .fqx::before,.faqi.open .fqx::after{background:var(--red-2)}
.faqa{display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s var(--ease)}
.faqi.open .faqa{grid-template-rows:1fr}
.faqain{overflow:hidden; min-height:0}
.faqain p{margin:0; padding:0 18px 16px 50px; font-size:14.5px; line-height:1.65; color:var(--text-2); max-width:66ch}

@media (max-width:1000px){
  .faq2{grid-template-columns:1fr; gap:26px}
  .faqintro > p{max-width:56ch}
  .faqprin{max-width:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 16px; border-top:none}
  .faqprin li{border-top:1px solid var(--line-2)}
  .faqlist{max-width:none}
}
@media (max-width:640px){
  .faqprin{grid-template-columns:1fr; gap:0}
  .faqprin li{border-top:none}
  .faqprin{border-top:1px solid var(--line-2)}
  .faqb{padding:14px 14px 14px 14px; gap:10px}
  .faqain p{padding:0 14px 14px 38px}
}
@media (prefers-reduced-motion:reduce){ .faqa,.faqi,.fqx::before,.fqx::after{transition:none} }

/* ============================================================
   V91 — the busy-week calculator on Industries, on the same
   .pic frame as the What We Build calculator. Own bits: the
   breakdown list, the two comparison bars, the lead-in.
   ============================================================ */
.bwc .picf > span:first-child{max-width:24ch}
.bwcbreak{list-style:none; margin:0; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.025); display:grid; gap:8px}
.bwcbreak li{position:relative; padding-left:16px; font-size:14px; line-height:1.55; color:var(--text-2)}
.bwcbreak li::before{content:''; position:absolute; left:0; top:.6em; width:7px; height:2px; border-radius:1px; background:var(--red-2)}
.bwcbars{display:grid; gap:10px; padding:16px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.025)}
.bwcrow{display:grid; grid-template-columns:minmax(0,120px) 1fr auto; align-items:center; gap:12px}
.bwclab{font-size:13px; color:var(--text-2)}
.bwctrack{display:block; height:12px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden}
.bwcbar{display:block; height:100%; border-radius:6px; width:0; transition:width .3s var(--ease)}
.bwcbar.cur{background:var(--red)}
.bwcbar.tgt{background:var(--blue)}
.bwcval{font-family:var(--f-display); font-weight:600; font-size:13.5px; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap}
.bwccards .piccard b{font-size:clamp(19px,1.8vw,24px)}
.bwcfoot{gap:12px 22px}
.bwclead{margin:0; font-family:var(--f-display); font-weight:600; font-size:clamp(16px,1.6vw,19px); letter-spacing:-.02em; color:#fff}
@media (max-width:600px){
  .bwcrow{grid-template-columns:1fr auto; grid-template-rows:auto auto}
  .bwctrack{grid-column:1 / -1}
  .bwc .picf > span:first-child{max-width:none}
}
@media (prefers-reduced-motion:reduce){ .bwcbar{transition:none} }

/* ============================================================
   V92 — the final ask on What We Build, rebuilt. Bordered box on
   the page background, copy left, and a process comparison on
   the right: a selector, a CURRENT PROCESS lane and an AFTER
   THE REDESIGN lane. Steps light in sequence from JS; friction
   steps hold, improved steps do not. Colour never carries the
   meaning alone: friction is dashed with a hollow marker,
   improved is solid with a square marker, and each has hidden
   text for screen readers.
   ============================================================ */
.fx{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg); border:1px solid var(--line-2); background:#0d0b12;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  padding:clamp(26px,3.4vw,48px);
  display:grid; grid-template-columns:42fr 58fr; gap:clamp(26px,4vw,60px); align-items:center;
}
.fxcopy .asktag{margin:0}
.fxcopy h2{margin:16px 0 0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(27px,3.2vw,42px); line-height:1.05; letter-spacing:-.042em; max-width:620px; text-wrap:balance}
.fxcopy > p:not(.asktag){margin:16px 0 0; font-size:clamp(14.5px,1.35vw,16.5px); line-height:1.62; color:var(--text-2); max-width:620px}
.fxcopy .btns{margin-top:clamp(22px,2.6vw,30px)}

.fxvis{
  position:relative; display:grid; gap:14px;
  padding:clamp(16px,2vw,22px); border-radius:16px; border:1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.024) 0 1px, transparent 1px 28px),
    #0f0c15;
}
.fxsel{display:flex; flex-wrap:wrap; gap:6px}
.fxbtn{
  appearance:none; cursor:pointer; border:1px solid var(--line-2); background:rgba(255,255,255,.03);
  border-radius:999px; padding:8px 13px; min-height:36px;
  font-family:var(--f-body); font-weight:600; font-size:13px; color:var(--text-2);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.fxbtn:hover{color:#fff; border-color:var(--line-3)}
.fxbtn[aria-pressed="true"]{color:#fff; background:rgba(240,90,98,.18); border-color:rgba(255,138,144,.6)}
.fxbtn:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}

.fxlane{position:relative; display:grid; gap:9px; padding:12px 12px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02); transition:opacity .22s var(--ease), translate .22s var(--ease)}
.fxlane::before{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; opacity:0; transition:opacity .4s var(--ease)}
.fxlane.cur::before{background:radial-gradient(40% 80% at var(--gx,50%) 60%, rgba(240,90,98,.14), transparent 70%)}
.fxlane.new::before{background:radial-gradient(60% 90% at 70% 60%, rgba(91,124,255,.12), transparent 70%)}
.fxlane.lit::before{opacity:1}
.fxll{position:relative; z-index:1; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; color:var(--text-3)}
.fxlane.new .fxll{color:rgba(138,161,255,.85)}

.fxsteps{position:relative; z-index:1; list-style:none; margin:0; padding:0; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:20px}
.fxstep{
  position:relative; display:flex; align-items:center; gap:8px; min-height:40px;
  padding:8px 10px 8px 10px; border-radius:9px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);
  font-size:12.5px; line-height:1.3; color:var(--text-2); opacity:.45;
  transition:opacity .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.fxstep .fxm{flex:0 0 auto; width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:transparent; box-sizing:border-box; transition:background .2s var(--ease), border-color .2s var(--ease)}
.fxstep .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.fxstep.fric{border-style:dashed; border-color:rgba(255,138,144,.45)}
.fxstep.imp{border-color:rgba(138,161,255,.45)}
.fxstep.imp .fxm{border-radius:2px}
/* the connector between steps: a thin line and a small head, in the gap */
.fxstep + .fxstep::before{content:''; position:absolute; left:-20px; top:50%; width:14px; height:1px; background:rgba(255,255,255,.22)}
.fxstep + .fxstep::after{content:''; position:absolute; left:-8px; top:50%; width:5px; height:5px; border-top:1px solid rgba(255,255,255,.35); border-right:1px solid rgba(255,255,255,.35); transform:translateY(-50%) rotate(45deg)}
/* lit: the indicator has reached this step */
.fxstep.on{opacity:1; color:#fff}
.fxstep.on .fxm{background:rgba(255,255,255,.7); border-color:rgba(255,255,255,.7)}
.fxstep.fric.on{background:rgba(240,90,98,.14); border-color:var(--red-2)}
.fxstep.fric.on .fxm{background:var(--red-2); border-color:var(--red-2)}
.fxstep.imp.on{background:rgba(91,124,255,.14); border-color:var(--blue-2)}
.fxstep.imp.on .fxm{background:var(--blue-2); border-color:var(--blue-2)}
.fxlane.hidden-lane{opacity:0; translate:0 6px}
.fxnote{margin:0; font-size:13.5px; line-height:1.5; color:var(--text-2); opacity:0; translate:0 4px; transition:opacity .25s var(--ease), translate .25s var(--ease); min-height:1.5em}
.fxnote.on{opacity:1; translate:0 0}

@media (max-width:1000px){
  .fx{grid-template-columns:1fr; gap:clamp(22px,4vw,32px)}
}
@media (max-width:700px){
  .fxsteps{grid-auto-flow:row; grid-auto-columns:auto; gap:12px}
  .fxstep + .fxstep::before{left:14px; top:-12px; width:1px; height:8px}
  .fxstep + .fxstep::after{left:11px; top:-8px; transform:rotate(135deg)}
  .fxsel{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
  .fxsel::-webkit-scrollbar{display:none}
  .fxbtn{flex:0 0 auto; min-height:42px}
  .fx .btns .btn{width:100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .fxstep,.fxstep .fxm,.fxlane,.fxlane::before,.fxnote,.fxbtn{transition:none}
}

/* ============================================================
   V93 — the About page, rebuilt. Seven sections, one shared
   process component (.abproc): evenly spaced stages on a line,
   a line that draws, and a dot that steps along it. Everything
   rests in its finished state for reduced motion; the sequences
   are driven from site.js by data-seq.
   ============================================================ */
.abhero{margin-top:calc(80px - var(--gap))}
.abh{display:grid; grid-template-columns:43fr 57fr; gap:clamp(26px,4vw,64px); align-items:center}
.abcopy .asktag{margin:0}
.abcopy h1{margin:16px 0 0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(30px,3.7vw,52px); line-height:1.03; letter-spacing:-.044em; text-wrap:balance}
.abcopy .sub{margin:18px 0 0; font-size:clamp(15px,1.4vw,17px); line-height:1.62; color:var(--text-2); max-width:52ch}
.abcopy .btns{margin-top:clamp(20px,2.4vw,28px); display:flex; flex-wrap:wrap; gap:10px}
@media (max-width:1400px){ .abcopy .btns .btn.b-lg{padding-inline:17px; font-size:14.5px} }

.abvis{
  position:relative; display:grid; gap:14px;
  padding:clamp(18px,2.4vw,28px); border-radius:16px; border:1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.024) 0 1px, transparent 1px 28px),
    #0f0c15;
}
.abcap{margin:0; font-size:13.5px; line-height:1.5; color:var(--text-2)}

/* ---- the process component ---- */
.abproc{position:relative; display:grid; gap:0}
.abstages{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:8px; position:relative; z-index:1}
.abn{display:grid; justify-items:center; gap:10px; text-align:center}
.abnd{width:10px; height:10px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:#0f0c15; box-sizing:border-box; transition:background .22s var(--ease), border-color .22s var(--ease)}
.abn.on .abnd{background:rgba(255,255,255,.8); border-color:rgba(255,255,255,.8)}
.abnl{font-size:12px; line-height:1.3; color:var(--text-3); transition:color .22s var(--ease)}
.abn.on .abnl{color:#fff}
.abline{position:absolute; z-index:0; left:calc(100% / var(--n) / 2); right:calc(100% / var(--n) / 2); top:4px; height:1px; background:rgba(255,255,255,.12)}
.abdraw{position:absolute; inset:0; display:block; background:rgba(255,255,255,.4); transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.4,0,.2,1)}
.abdraw.blue{background:var(--blue-2)}
.go .abdraw,.done .abdraw{transform:scaleX(1)}
.abdot{
  position:absolute; z-index:2; top:-1px; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.14);
  left:calc(100% / var(--n) * (var(--i) + .5)); translate:-50% 0; opacity:0;
  transition:left .22s cubic-bezier(.4,0,.2,1), opacity .2s var(--ease), background .2s var(--ease);
}
.abdot.on{opacity:1}
.abdot.blue{background:var(--blue-2); box-shadow:0 0 0 3px rgba(91,124,255,.18)}
.abdot.red{background:var(--red-2); box-shadow:0 0 0 3px rgba(240,90,98,.18)}
/* the flag over the handoff, between stage 2 and 3 of six */
.abflag{
  position:absolute; z-index:3; top:-34px; left:calc(100% / 6 * 2); translate:-50% 0;
  padding:5px 9px; border-radius:999px; white-space:nowrap;
  font-family:var(--f-mono); font-size:9px; letter-spacing:.12em; line-height:1;
  border:1px solid transparent; opacity:0; transition:opacity .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.abflag.red{opacity:1; color:#fff; background:rgba(240,90,98,.18); border-color:rgba(255,138,144,.6)}
.abflag.blue{opacity:1; color:#fff; background:rgba(91,124,255,.18); border-color:rgba(138,161,255,.6)}
#ab-hero .abproc{padding-top:40px}

/* ---- section 2 ---- */
.abtwo{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:center}
.abtext .asktag{margin:0}
.abtext h2{margin:14px 0 0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(26px,2.9vw,38px); line-height:1.06; letter-spacing:-.04em; max-width:20ch; text-wrap:balance}
.abtext > p:not(.asktag):not(.abmem){margin:14px 0 0; font-size:15.5px; line-height:1.64; color:var(--text-2); max-width:60ch}
.abmem{margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line-2); color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(20px,2vw,26px); line-height:1.15; letter-spacing:-.03em; max-width:22ch}
.abtools{padding:34px 0 8px}
.abhand{list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; position:relative; z-index:1; translate:calc(100% / 5 / 2) 0; width:calc(100% * 4 / 5)}
.abhand li{text-align:center; font-family:var(--f-mono); font-size:9px; letter-spacing:.08em; line-height:1.35; min-height:2.7em}
.abhand .abh-b{color:var(--red-2)} .abhand .abh-c{color:var(--blue-2); display:none}
.abtools.linked .abh-b{display:none} .abtools.linked .abh-c{display:block}
.abone{position:absolute; top:0; left:50%; translate:-50% 0; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; color:var(--blue-2); padding:4px 10px; border-radius:999px; border:1px solid rgba(138,161,255,.5); background:rgba(91,124,255,.12); opacity:0; transition:opacity .3s var(--ease)}
.abtools.one .abone{opacity:1}

/* ---- section 3 ---- */
.abhead{max-width:64ch}
.abhead .asktag{margin:0}
.abhead h2{margin:14px 0 0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(26px,3vw,40px); line-height:1.05; letter-spacing:-.04em; text-wrap:balance}
.abhead .sub{margin:14px 0 0; font-size:15.5px; line-height:1.62; color:var(--text-2); max-width:62ch}
/* ---- section 4 ---- */
.abprin{list-style:none; margin:clamp(22px,3vw,32px) 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px)}
.abprin li{position:relative; display:grid; gap:8px; align-content:start; padding:24px 22px 22px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.02); opacity:0; translate:0 8px; transition:opacity .45s var(--ease), translate .45s var(--ease)}
.abprin li::before{content:''; position:absolute; left:22px; right:22px; top:0; height:2px; background:var(--red-2); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.4,0,.2,1) .2s}
.go .abprin li,.done .abprin li,.abprin.go li,.abprin.done li{opacity:1; translate:0 0}
.abprin.go li::before,.abprin.done li::before{transform:scaleX(1)}
.abprin.go li:nth-child(3),.abprin.go li:nth-child(4){transition-delay:.2s}
.abprin.go li:nth-child(3)::before,.abprin.go li:nth-child(4)::before{transition-delay:.4s}
.abpn{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--red-2)}
.abprin b{font-family:var(--f-display); font-weight:600; font-size:clamp(16px,1.5vw,19px); letter-spacing:-.025em; color:#fff; line-height:1.2}
.abprin p{margin:0; font-size:14.5px; line-height:1.6; color:var(--text-2); max-width:52ch}

/* ---- section 5 ---- */
.abfilt{position:relative; border-radius:var(--r-lg); border:1px solid var(--line-2); background:#0d0b12; padding:clamp(26px,3.4vw,48px); display:grid; gap:clamp(22px,2.6vw,32px)}
.abq{margin:0; display:flex; align-items:center; gap:18px; font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:#fff; opacity:0; transition:opacity .35s var(--ease)}
.abq::before,.abq::after{content:''; flex:1; height:1px; background:rgba(255,255,255,.14)}
.abfilt.go .abq,.abfilt.done .abq{opacity:1}
.abcond{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px)}
.abcond li{position:relative; display:grid; gap:8px; align-content:start; padding:18px 0 0 34px; border-top:1px solid var(--line)}
.abck{position:absolute; left:0; top:18px; width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:grid; place-items:center; box-sizing:border-box; transition:border-color .25s var(--ease), background .25s var(--ease)}
.abck svg{width:12px; height:12px; fill:none; stroke:var(--blue-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.abck path{stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .35s cubic-bezier(.4,0,.2,1)}
.abcond li.on .abck{border-color:rgba(138,161,255,.7); background:rgba(91,124,255,.12)}
.abcond li.on .abck path{stroke-dashoffset:0}
.abcn{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--text-3)}
.abcond b{font-family:var(--f-display); font-weight:600; font-size:clamp(15.5px,1.4vw,18px); letter-spacing:-.02em; color:#fff; line-height:1.2}
.abcond p{margin:0; font-size:14px; line-height:1.58; color:var(--text-2)}
.abclose{margin:0; padding:16px 20px; border-radius:12px; border:1px solid rgba(240,90,98,.32); border-left:3px solid var(--red-2); background:rgba(240,90,98,.05); color:#fff; font-family:var(--f-display); font-weight:600; font-size:clamp(15px,1.5vw,18px); letter-spacing:-.02em; opacity:0; transition:opacity .35s var(--ease)}
.abfilt.go .abclose,.abfilt.done .abclose{opacity:1}

/* ---- section 7 ---- */
.abcta{position:relative; border-radius:var(--r-lg); border:1px solid var(--line-2); background:#0d0b12; padding:clamp(26px,3.4vw,44px); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,56px); align-items:center; overflow:hidden}
.abcta::before{content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px), repeating-linear-gradient(0deg, rgba(255,255,255,.024) 0 1px, transparent 1px 28px);
  -webkit-mask-image:linear-gradient(90deg, transparent 40%, #000 100%); mask-image:linear-gradient(90deg, transparent 40%, #000 100%)}
.abctacopy,.abmini{position:relative}
.abctacopy .asktag{margin:0}
.abctacopy h2{margin:14px 0 0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(25px,2.8vw,36px); line-height:1.06; letter-spacing:-.04em; max-width:18ch; text-wrap:balance}
.abctacopy p:not(.asktag){margin:14px 0 0; font-size:15px; line-height:1.6; color:var(--text-2); max-width:50ch}
.abctacopy .btns{margin-top:22px}
.abmini{padding:10px 0 4px}

/* ---- responsive ---- */
@media (max-width:1000px){
  .abh,.abtwo,.abcta{grid-template-columns:1fr}
  .abvis{max-width:680px}
  .abcond{grid-template-columns:1fr 1fr}
  .abprin{grid-template-columns:1fr}
}
@media (max-width:700px){
  .abhero{margin-top:calc(40px - var(--gap))}
  .abcopy .btns .btn,.abcta .btns .btn{width:100%; justify-content:center}
  /* the process stands up: stages down the left, line vertical */
  .abstages{grid-template-columns:1fr; gap:14px}
  .abn{grid-template-columns:10px 1fr; justify-items:start; text-align:left; align-items:center; gap:0 12px}
  .abline{left:4px; right:auto; top:calc(100% / var(--n) / 2); bottom:calc(100% / var(--n) / 2); width:1px; height:auto}
  .abdraw{transform:scaleY(0); transform-origin:top}
  .go .abdraw,.done .abdraw{transform:scaleY(1)}
  .abdot{left:5px; top:calc(100% / var(--n) * (var(--i) + .5)); translate:-50% -50%; transition:top .22s cubic-bezier(.4,0,.2,1), opacity .2s var(--ease)}
  .abflag{top:calc(100% / 6 * 2); left:26px; translate:0 -50%}
  #ab-hero .abproc{padding-top:0}
  .abhand{grid-template-columns:1fr; translate:0 0; width:auto; padding-left:22px}
  .abhand li{text-align:left; min-height:0}
  .abtools{padding:34px 0 0}
  .abfound{grid-template-columns:1fr; gap:12px}
  .abcond{grid-template-columns:1fr}
  .abq{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
}

/* the line and the dot live inside the stage list now, so their offsets
   follow the markers whatever padding or siblings the box has */
.abstages > .abline,.abstages > .abdot{list-style:none; margin:0; padding:0}
.abstages{overflow:visible}
@media (max-width:700px){
  .abone{position:static; translate:none; justify-self:start; display:inline-block; margin-top:12px}
  .abtools{padding-top:0}
}
/* the flag is a child of .abproc, whose top padding is the headroom; it
   sits 34px above the line, inside the panel */
#ab-hero .abflag{top:6px}
@media (max-width:700px){ #ab-hero .abflag{top:calc(100% / 6 * 2)} }
/* phone: the flag sits at the handoff boundary but to the right of the
   short stage labels, so it never covers "Qualified" or "Scheduled" */
@media (max-width:700px){
  #ab-hero .abflag{left:auto; right:0; translate:0 -50%; max-width:calc(100% - 118px); white-space:normal; text-align:center; line-height:1.3}
}

/* ============================================================
   V94 — the Industries hero: copy left, the Operational
   Friction Map right, the EXPLORE BY INDUSTRY rail under both.
   The map is one grid: a header row of five stages and five
   industry rows, each row a real button plus five markers; the
   selected row draws a line from INQUIRY to its friction stage
   and the message sits under the grid with a caret on that
   column. Phones get a scrolling selector and one vertical
   process instead of the matrix. Scoped to .inhero.
   ============================================================ */
.inhero{margin-top:calc(64px - var(--gap)); display:grid; gap:clamp(24px,3vw,40px)}
.inh{display:grid; grid-template-columns:41fr 59fr; gap:clamp(26px,4vw,60px); align-items:center}
.incopy .asktag{margin:0}
.incopy h1{margin:16px 0 0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(30px,3.5vw,50px); line-height:1.04; letter-spacing:-.044em; max-width:680px}
.incopy .sub{margin:18px 0 0; font-size:clamp(15px,1.4vw,17px); line-height:1.62; color:var(--text-2); max-width:650px}
.incopy .btns{margin-top:clamp(20px,2.4vw,28px); display:flex; flex-wrap:wrap; gap:10px}
@media (max-width:1400px){ .incopy .btns .btn.b-lg{padding-inline:17px; font-size:14.5px} }

.infm{
  position:relative; display:grid; gap:14px;
  padding:clamp(16px,2vw,22px); border-radius:16px; border:1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.024) 0 1px, transparent 1px 28px),
    #0f0c15;
}
.infmhead{display:grid; gap:4px}
.infmt{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:#fff; opacity:0; transition:opacity .3s var(--ease)}
.infms{font-size:12.5px; color:var(--text-3); opacity:0; transition:opacity .3s var(--ease) .1s}
.infm.go .infmt,.infm.go .infms{opacity:1}

.infmgrid{display:grid; gap:4px}
.infmcols,.infmrow{display:grid; grid-template-columns:minmax(118px,.9fr) repeat(5,minmax(0,1fr)); align-items:center; gap:0 6px}
.infmcols span{font-family:var(--f-mono); font-size:8.5px; letter-spacing:.12em; color:var(--text-3); text-align:center; padding:0 0 6px; opacity:0; transition:opacity .3s var(--ease) .2s}
.infm.go .infmcols span{opacity:1}
.infmrow{opacity:0; translate:-6px 0; transition:opacity .3s var(--ease), translate .3s var(--ease)}
.infm.go .infmrow{opacity:1; translate:0 0}
.infm.go .infmrow:nth-child(2){transition-delay:.25s} .infm.go .infmrow:nth-child(3){transition-delay:.35s}
.infm.go .infmrow:nth-child(4){transition-delay:.45s} .infm.go .infmrow:nth-child(5){transition-delay:.55s} .infm.go .infmrow:nth-child(6){transition-delay:.65s}
.infmb{
  appearance:none; cursor:pointer; text-align:left; border:1px solid transparent; background:transparent;
  border-radius:9px; padding:10px 10px; min-height:40px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--text-3);
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.infmb:hover{color:#fff}
.infmb:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}
.infmrow.on .infmb{color:#fff; background:rgba(255,255,255,.04); border-color:var(--line-2)}
.infmcells{position:relative; grid-column:2 / -1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; min-height:40px}
.infmc{position:relative; z-index:1; justify-self:center; width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:#0f0c15; box-sizing:border-box; transition:background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease)}
.infmrow.on .infmc{border-color:rgba(255,255,255,.4)}
.infmrow.on .infmc.lit{background:rgba(255,255,255,.6); border-color:rgba(255,255,255,.6)}
/* the friction stage: a ring with a filled centre, coral, a whisper of glow */
.infmrow.on .infmc.fric{width:12px; height:12px; background:radial-gradient(circle, var(--red-2) 0 30%, transparent 32%), rgba(240,90,98,.14); border:1px solid var(--red-2); box-shadow:0 0 0 4px rgba(240,90,98,.10), 0 0 18px rgba(240,90,98,.25)}
.infml{position:absolute; z-index:0; top:50%; left:10%; height:1px; width:0; background:rgba(255,255,255,.35); transform-origin:left; transition:width .6s cubic-bezier(.4,0,.2,1)}
.infmrow.on .infml{width:calc(var(--stop, 0) * 20%)}
.infmd{position:absolute; z-index:2; top:50%; left:10%; width:10px; height:10px; border-radius:50%; background:#fff; translate:-50% -50%; opacity:0; transition:left .6s cubic-bezier(.4,0,.2,1), opacity .2s var(--ease)}
.infmrow.on .infmd{opacity:1; left:calc(10% + var(--stop, 0) * 20%)}

.infmmsg{position:relative; display:grid; gap:8px; min-height:74px; padding:12px 14px 12px; border-radius:12px; border:1px solid rgba(240,90,98,.28); background:rgba(240,90,98,.05)}
.infmcaret{position:absolute; top:-6px; width:10px; height:10px; rotate:45deg; border-left:1px solid rgba(240,90,98,.5); border-top:1px solid rgba(240,90,98,.5); background:#120d15;
  left:calc(var(--rowlab, 118px) + (100% - var(--rowlab, 118px)) * (var(--col) + .5) / 5); translate:-50% 0; transition:left .4s cubic-bezier(.4,0,.2,1)}
.infmtxt{margin:0; font-size:14px; line-height:1.5; color:#fff; opacity:0; transition:opacity .22s var(--ease)}
.infmlab{justify-self:start; font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; color:var(--blue-2); padding:4px 9px; border-radius:999px; border:1px solid rgba(138,161,255,.45); background:rgba(91,124,255,.10); opacity:0; transition:opacity .22s var(--ease)}
.infm.msg .infmtxt,.infm.msg .infmlab{opacity:1}
.infmv{display:none}

/* ---- the rail ---- */
.inrail{display:grid; gap:12px; padding-top:18px; border-top:1px solid var(--line-2); scroll-margin-top:clamp(90px,11vh,140px)}
.inrl{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; color:var(--text-3)}
.inrails{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px}
.inrails a{display:grid; grid-template-columns:auto 1fr; gap:2px 12px; align-items:start; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02); text-decoration:none; transition:border-color .2s var(--ease), background .2s var(--ease), translate .2s var(--ease)}
.inrails a:hover{border-color:rgba(255,138,144,.5); background:rgba(255,255,255,.04); translate:0 -2px}
.inrails a:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}
.inrn{grid-row:1 / 3; font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--red-2); padding-top:3px}
.inrails b{font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:-.02em; color:#fff}
.inrails i{font-style:normal; font-size:12.5px; color:var(--text-3)}

/* ---- responsive ---- */
@media (max-width:1100px){
  .inh{grid-template-columns:1fr; gap:clamp(22px,4vw,32px)}
  .infm{max-width:760px}
  .inrails{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .inhero{margin-top:calc(40px - var(--gap))}
  .incopy .btns .btn{width:100%}
  /* the matrix becomes a scrolling selector and one vertical process */
  .infmcols{display:none}
  .infmgrid{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
  .infmgrid::-webkit-scrollbar{display:none}
  .infmrow{display:block; flex:0 0 auto; opacity:1; translate:0 0}
  .infmcells{display:none}
  .infmb{border-color:var(--line-2); border-radius:999px; min-height:42px; padding:10px 14px; white-space:nowrap}
  .infmrow.on .infmb{background:rgba(240,90,98,.18); border-color:rgba(255,138,144,.6)}
  .infmv{display:grid; gap:10px; list-style:none; margin:0; padding:4px 0 0; position:relative}
  .infmv::before{content:''; position:absolute; left:4px; top:12px; bottom:12px; width:1px; background:rgba(255,255,255,.14)}
  .infmv li{position:relative; display:flex; align-items:center; gap:12px; padding-left:0}
  .infmvd{width:9px; height:9px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:#0f0c15; box-sizing:border-box; flex:0 0 auto; position:relative; z-index:1}
  .infmv li.lit .infmvd{background:rgba(255,255,255,.6); border-color:rgba(255,255,255,.6)}
  .infmv li.fric .infmvd{background:radial-gradient(circle, var(--red-2) 0 30%, transparent 32%), rgba(240,90,98,.14); border-color:var(--red-2); box-shadow:0 0 0 4px rgba(240,90,98,.10)}
  .infmvl{font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; color:var(--text-3)}
  .infmv li.lit .infmvl{color:#fff} .infmv li.fric .infmvl{color:var(--red-2)}
  .infmcaret{display:none}
  .infmmsg{order:3}
  .infmv{order:2}
  .inrails{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){ .inrails{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .infmt,.infms,.infmcols span,.infmrow,.infml,.infmd,.infmc,.infmtxt,.infmlab,.infmcaret,.infmb{transition:none}
}

/* ============================================================
   V95 — the Contact page, rebuilt around a three-step audit
   request form. Copy left, the form right in a near-black panel
   with the technical grid. Then the next steps on one line, the
   two "bring" columns, and three direct-contact cards. Scoped
   to the ct- prefix.
   ============================================================ */
.cthero{margin-top:calc(72px - var(--gap))}
.cth{display:grid; grid-template-columns:41fr 59fr; gap:clamp(26px,4vw,60px); align-items:start}
.ctcopy{position:sticky; top:calc(var(--gut) + 96px)}
.ctcopy .asktag{margin:0}
.ctcopy h1{margin:16px 0 0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(30px,3.5vw,50px); line-height:1.04; letter-spacing:-.044em; text-wrap:balance}
.ctcopy .sub{margin:18px 0 0; font-size:clamp(15px,1.4vw,17px); line-height:1.62; color:var(--text-2); max-width:52ch}
.ctre{margin:18px 0 0; padding:12px 14px; border-radius:11px; border:1px solid rgba(138,161,255,.35); background:rgba(91,124,255,.08); color:#fff; font-size:14px; line-height:1.5; max-width:48ch}

.ctform{
  position:relative; border-radius:18px; border:1px solid var(--line-2);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.02)  0 1px, transparent 1px 28px),
    #0e0b13;
  padding:clamp(20px,2.6vw,32px); box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.ctf{display:grid; gap:18px}
.ctfhead h2{margin:0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(21px,2vw,26px); letter-spacing:-.03em; line-height:1.1}
.ctfhead h2:focus-visible,.ctsh:focus-visible,#ctdone-h:focus-visible{outline:2px solid var(--red-2); outline-offset:4px; border-radius:4px}
.ctfhead p{margin:8px 0 0; font-size:14px; line-height:1.55; color:var(--text-2); max-width:56ch}
.ctprog{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.ctprog li{display:flex; align-items:center; gap:8px; padding:8px 0 10px; border-top:2px solid rgba(255,255,255,.12); transition:border-color .25s var(--ease)}
.ctpn{width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-family:var(--f-mono); font-size:10px; color:var(--text-3); border:1px solid rgba(255,255,255,.22); transition:all .25s var(--ease)}
.ctpl{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; color:var(--text-3)}
.ctprog li.active{border-top-color:var(--red-2)}
.ctprog li.active .ctpn{color:#fff; border-color:var(--red-2); background:rgba(240,90,98,.2)}
.ctprog li.active .ctpl{color:#fff}
.ctprog li.done{border-top-color:var(--blue-2)}
.ctprog li.done .ctpn{color:#fff; border-color:var(--blue-2); background:rgba(91,124,255,.22)}
.ctprog li.done .ctpl{color:var(--blue-2)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0}

.ctalert{display:grid; gap:8px; padding:14px 16px; border-radius:12px; border:1px solid rgba(240,90,98,.5); background:rgba(240,90,98,.08)}
.ctalert b{color:#fff; font-family:var(--f-display); font-weight:600; font-size:15px}
.ctalert p{margin:0; font-size:14px; line-height:1.5; color:var(--text-2)}
.ctalertrow{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:4px}
.ctalertrow a{color:#fff; font-size:14px; text-decoration:underline; text-underline-offset:3px}

.ctstep{display:grid; gap:14px}
.ctstep.leaving{opacity:0; transition:opacity .12s var(--ease)}
.ctstep.entering{opacity:0; translate:0 10px}
.ctstep.entered{opacity:1; translate:0 0; transition:opacity .2s var(--ease), translate .2s var(--ease)}
.ctsh{margin:0; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--red-2)}
.ctfield{display:grid; gap:6px; margin:0; padding:0; border:0; min-width:0}
.ctfield label,.ctfield legend{font-size:14px; font-weight:600; color:#fff; letter-spacing:-.01em}
.ctopt-lab{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); margin-left:6px}
.cthelp{margin:0; font-size:13px; line-height:1.5; color:var(--text-3)}
.ctfield input[type=text],.ctfield input[type=email],.ctfield input[type=tel],.ctfield select,.ctfield textarea{
  width:100%; box-sizing:border-box; appearance:none; -webkit-appearance:none;
  border:1px solid var(--line-2); border-radius:10px; background:rgba(255,255,255,.04); color:#fff;
  font-family:var(--f-body); font-size:16px; padding:12px 14px; outline:none; min-height:46px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ctfield select{background-image:linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%), linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%); background-position:calc(100% - 20px) 20px, calc(100% - 15px) 20px; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px}
.ctfield select option{background:#14111b; color:#fff}
.ctfield textarea{resize:vertical; min-height:110px; line-height:1.5}
.ctfield input:focus-visible,.ctfield select:focus-visible,.ctfield textarea:focus-visible{border-color:var(--red-2); box-shadow:0 0 0 3px rgba(240,90,98,.18)}
.ctfield.invalid input,.ctfield.invalid select,.ctradios.invalid .ctopts{border-color:var(--red-2)}
.cterr{margin:0; font-size:13px; line-height:1.4; color:var(--red-2); display:flex; gap:6px; align-items:flex-start}
.cterr::before{content:''; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--red-2); margin-top:6px}
.ctopts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; border:1px solid transparent; border-radius:11px}
.ctopt{position:relative; display:grid; gap:2px; padding:11px 12px; border-radius:10px; border:1px solid var(--line-2); background:rgba(255,255,255,.03); cursor:pointer; font-size:14px; color:var(--text-2); transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); min-height:46px; align-content:center}
.ctopt input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.ctopt span{position:relative; padding-left:20px; color:#fff}
.ctopt span::before{content:''; position:absolute; left:0; top:3px; width:12px; height:12px; border-radius:50%; border:1px solid rgba(255,255,255,.4); box-sizing:border-box}
.ctopt:has(input:checked){border-color:var(--red-2); background:rgba(240,90,98,.12)}
.ctopt:has(input:checked) span::before{border:4px solid var(--red-2); background:#fff}
.ctopt:has(input:focus-visible){outline:2px solid var(--red-2); outline-offset:2px}
.ctopt.is-off{opacity:.45; cursor:not-allowed}
.ctopt.is-off input{cursor:not-allowed}
.ctopt small{font-size:11px; color:var(--text-3); padding-left:20px}
.ctnav{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; padding-top:6px}
.ctnav .btn{min-height:46px}
.ctnav .btn[aria-busy="true"]{opacity:.7; pointer-events:none}

.ctdone{display:grid; gap:12px; justify-items:start; padding:6px 0}
.ctcheck{width:48px; height:48px; fill:none; stroke:var(--blue-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ctcheck circle{stroke:rgba(138,161,255,.45); stroke-dasharray:100; stroke-dashoffset:100; animation:ctdraw .5s cubic-bezier(.4,0,.2,1) forwards}
.ctcheck path{stroke-dasharray:100; stroke-dashoffset:100; animation:ctdraw .4s cubic-bezier(.4,0,.2,1) .35s forwards}
@keyframes ctdraw{to{stroke-dashoffset:0}}
.ctdone h2{margin:4px 0 0; color:#fff; font-family:var(--f-display); font-weight:700; font-size:clamp(22px,2.2vw,28px); letter-spacing:-.03em}
.ctdone p{margin:0; font-size:15px; line-height:1.6; color:var(--text-2); max-width:52ch}
.ctdone .ctdone-sub{color:var(--text-3); font-size:14px}

/* ---- next steps ---- */
.ctnext{display:grid; gap:22px; margin-top:clamp(22px,3vw,32px)}
.ctsteps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 clamp(18px,2.4vw,32px)}
.ctsteps li{position:relative; display:grid; gap:8px; align-content:start; padding-top:26px; opacity:0; translate:0 8px; transition:opacity .4s var(--ease), translate .4s var(--ease)}
.ctsteps li::before{content:''; position:absolute; left:0; top:0; width:9px; height:9px; border-radius:50%; border:1px solid var(--red-2); background:var(--bg); box-sizing:border-box}
.ctsteps li.on{opacity:1; translate:0 0}
.ctsteps li.on::before{background:var(--red-2)}
.ctline{position:absolute; left:14px; right:calc(-1 * clamp(18px,2.4vw,32px) - 4px); top:4px; height:1px; background:rgba(240,90,98,.4); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.4,0,.2,1)}
.ctline.on{transform:scaleX(1)}
.ctnum{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--red-2)}
.ctsteps b{font-family:var(--f-display); font-weight:600; font-size:clamp(16px,1.5vw,19px); letter-spacing:-.025em; color:#fff; line-height:1.2}
.ctsteps p{margin:0; font-size:14.5px; line-height:1.6; color:var(--text-2); font-style:normal}
.ctclose{margin:0; padding:14px 18px; border-radius:12px; border:1px solid rgba(240,90,98,.32); border-left:3px solid var(--red-2); background:rgba(240,90,98,.05); color:#fff; font-family:var(--f-display); font-weight:600; font-size:clamp(15px,1.5vw,18px); letter-spacing:-.02em; opacity:0; transition:opacity .35s var(--ease)}
.ctclose.on{opacity:1}
.ctnext.done .ctsteps li,.ctnext.done .ctclose{opacity:1; translate:0 0} .ctnext.done .ctline{transform:scaleX(1)} .ctnext.done .ctsteps li::before{background:var(--red-2)}

/* ---- what you need ---- */
.ctbring{display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.6vw,32px); margin-top:clamp(22px,3vw,32px)}
.ctcol{padding:22px 24px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.02)}
.ctcol h3{margin:0 0 14px; font-family:var(--f-display); font-weight:600; font-size:17px; letter-spacing:-.02em; color:#fff}
.ctlist{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ctlist li{position:relative; padding-left:28px; font-size:14.5px; line-height:1.55; color:var(--text-2)}
.ctlist li::before{content:''; position:absolute; left:0; top:3px; width:16px; height:16px; border-radius:50%; box-sizing:border-box}
.ctlist.yes li::before{border:1px solid rgba(138,161,255,.6); background:rgba(91,124,255,.12)}
.ctlist.yes li::after{content:''; position:absolute; left:5px; top:6px; width:5px; height:8px; border-right:1.6px solid var(--blue-2); border-bottom:1.6px solid var(--blue-2); transform:rotate(45deg)}
.ctlist.no li::before{border:1px solid rgba(255,255,255,.22)}
.ctlist.no li::after{content:''; position:absolute; left:4px; top:10px; width:8px; height:1.6px; background:rgba(255,255,255,.45)}
.ctbringclose{grid-column:1 / -1; margin:0; font-size:14.5px; line-height:1.55; color:var(--text-2); max-width:70ch}

/* ---- direct contact ---- */
.ctcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:clamp(22px,3vw,32px)}
.ctcard{display:grid; gap:6px; align-content:start; padding:20px 22px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.02); text-decoration:none; min-width:0; transition:border-color .2s var(--ease), background .2s var(--ease), translate .2s var(--ease)}
a.ctcard:hover{border-color:rgba(255,138,144,.5); background:rgba(255,255,255,.04); translate:0 -2px}
a.ctcard:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}
.ctcl{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; color:var(--red-2)}
.ctcard b{font-family:var(--f-display); font-weight:600; font-size:clamp(16px,1.4vw,19px); letter-spacing:-.02em; color:#fff; overflow-wrap:anywhere}
.ctcard i{font-style:normal; font-size:13px; line-height:1.5; color:var(--text-3)}
.ctback{margin:18px 0 0}
.ctback a{display:inline-flex; align-items:center; gap:7px; color:var(--red-2); text-decoration:none; font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:-.02em; transition:gap .3s var(--ease), color .3s var(--ease)}
.ctback a:hover{gap:12px; color:#fff}
.ctback a:focus-visible{outline:2px solid var(--red-2); outline-offset:3px; border-radius:4px}

@media (max-width:1000px){
  .cth{grid-template-columns:1fr; gap:26px}
  .ctcopy{position:static}
  .ctcards{grid-template-columns:1fr}
}
@media (max-width:700px){
  .cthero{margin-top:calc(40px - var(--gap))}
  .ctopts{grid-template-columns:1fr}
  .ctnav .btn{flex:1 1 auto; justify-content:center}
  .ctsteps{grid-template-columns:1fr; gap:22px}
  .ctsteps li{padding:0 0 0 24px}
  .ctsteps li::before{top:4px}
  .ctline{left:4px; right:auto; top:14px; bottom:-26px; width:1px; height:auto; transform:scaleY(0); transform-origin:top}
  .ctline.on{transform:scaleY(1)} .ctnext.done .ctline{transform:scaleY(1)}
  .ctbring{grid-template-columns:1fr}
  .ctprog li{gap:6px}
  .ctpl{font-size:8.5px}
}
@media (prefers-reduced-motion:reduce){
  .ctstep.leaving,.ctstep.entering,.ctstep.entered,.ctsteps li,.ctline,.ctclose,.ctprog li,.ctpn,.ctcard,.ctopt{transition:none}
  .ctstep.entering{opacity:1; translate:0 0}
  .ctcheck circle,.ctcheck path{animation:none; stroke-dashoffset:0}
}
/* display:grid/flex on these outranks the hidden attribute; restate it */
.ctalert[hidden],.ctstep[hidden],.ctdone[hidden],.cterr[hidden],#audit-form[hidden]{display:none !important}

/* ============================================================
   V96 — About: "What shaped our approach" replaces the founder
   cards. The busy-day map: four events on the left, the OWNER
   node in the middle, four destinations on the right, lines in
   an SVG overlay in percent coordinates so they always meet the
   nodes. Phones stand it up: events above, owner, destinations
   below. Scoped to bd-.
   ============================================================ */
.abvis.bd{gap:12px}
.bdt{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:#fff}
.bdmap{position:relative; display:grid; grid-template-columns:22% 1fr 22%; min-height:250px}
.bdsvg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0}
.bdsvg.mob{display:none}
.bdl{fill:none; stroke-width:1.2; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:100; stroke-dashoffset:100; opacity:0;
  transition:stroke-dashoffset .5s cubic-bezier(.4,0,.2,1), opacity .3s var(--ease)}
.bdl.own{stroke:rgba(255,138,144,.75)}
.bdl.rt.blue{stroke:rgba(138,161,255,.85)}
.bdl.rt.coral{stroke:rgba(255,138,144,.85); stroke-dasharray:4 3; stroke-dashoffset:0}
.bd.s1 .bdl.own{opacity:1; stroke-dashoffset:0}
.bd.s1 .bdl.own:nth-child(2){transition-delay:.12s} .bd.s1 .bdl.own:nth-child(3){transition-delay:.24s} .bd.s1 .bdl.own:nth-child(4){transition-delay:.36s}
.bd.s2 .bdl.own{opacity:0; transition-delay:0s}
.bd.s2 .bdl.rt.blue{opacity:1; stroke-dashoffset:0}
.bd.s2 .bdl.rt.coral{opacity:1}
.bd.s2 .bdl.rt:nth-child(6){transition-delay:.15s} .bd.s2 .bdl.rt:nth-child(7){transition-delay:.45s} .bd.s2 .bdl.rt:nth-child(8){transition-delay:.3s}
.bdevs,.bddests{list-style:none; margin:0; padding:0; position:relative; z-index:1; display:grid; grid-template-rows:repeat(4,1fr); align-items:center; min-width:0}
.bdev,.bddest{display:flex; align-items:center; gap:8px; min-width:0; font-size:12px; line-height:1.25; color:var(--text-2); opacity:0; transition:opacity .3s var(--ease) calc(var(--i) * .1s)}
.bdev{justify-content:flex-end; text-align:right; flex-direction:row-reverse}
.bd.s1 .bdev,.bd.s2 .bdev{opacity:1}
.bd.s2 .bddest{opacity:1; transition-delay:calc(.2s + var(--i) * .12s)}
.bdn{flex:0 0 auto; width:8px; height:8px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:#0f0c15; box-sizing:border-box}
.bdev .bdn{background:rgba(255,255,255,.7); border-color:rgba(255,255,255,.7)}
.bddest.blue .bdn{background:var(--blue-2); border-color:var(--blue-2)}
.bddest.coral .bdn{border:1px dashed var(--red-2); background:transparent}
.bddl{display:grid; gap:2px}
.bddl b{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; color:#fff}
.bddest.coral .bddl b{color:var(--red-2)}
.bddl i{font-style:normal; font-size:11.5px; color:var(--text-3)}
.bdowner{position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:1; display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,138,144,.6); background:#140d15; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:#fff; opacity:0; transition:opacity .3s var(--ease), border-color .4s var(--ease), color .4s var(--ease)}
.bdowner .bdn{background:var(--red-2); border-color:var(--red-2); transition:background .4s var(--ease), border-color .4s var(--ease)}
.bd.s1 .bdowner{opacity:1}
.bd.s2 .bdowner{opacity:1; border-color:rgba(255,255,255,.16); color:var(--text-3)}
.bd.s2 .bdowner .bdn{background:transparent; border-color:rgba(255,255,255,.3)}
.bdlabels{position:relative; min-height:26px}
.bdlab{position:absolute; left:0; top:0; font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; padding:5px 10px; border-radius:999px; border:1px solid transparent; opacity:0; transition:opacity .25s var(--ease)}
.bdlab.bd-one{color:#fff; border-color:rgba(255,138,144,.55); background:rgba(240,90,98,.14)}
.bdlab.bd-two.bd-blue{color:#fff; border-color:rgba(138,161,255,.55); background:rgba(91,124,255,.14)}
.bdlab.bd-two.bd-coral{left:auto; right:0; color:#fff; border-color:rgba(255,138,144,.55); background:rgba(240,90,98,.14)}
.bd.lab1 .bdlab.bd-one{opacity:1}
.bd.s2 .bdlab.bd-one{opacity:0}
.bd.lab2 .bdlab.bd-two{opacity:1}
.bd.lab2 .bdlab.bd-two.bd-coral{transition-delay:.2s}
.bdprin{margin-top:clamp(26px,3.2vw,40px)}
.bdprin li{padding:18px 0 4px; border-radius:0; border:0; border-top:1px solid var(--line-2); background:none}
.bdprin li::before{left:0; right:auto; width:34px; height:2px; top:-1px}
@media (max-width:700px){
  .bdmap{grid-template-columns:1fr; grid-template-rows:auto 1fr auto; min-height:360px; gap:0}
  .bdsvg.desk{display:none} .bdsvg.mob{display:block}
  .bdevs,.bddests{grid-template-rows:none; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; gap:6px}
  .bdev,.bddest{flex-direction:column; justify-content:flex-start; text-align:center; font-size:10.5px; gap:6px}
  .bddests{align-items:end}
  .bddest{flex-direction:column-reverse; justify-content:flex-end}
  .bddl{justify-items:center; text-align:center}
  .bddl b{font-size:8.5px} .bddl i{font-size:10px}
  .bdlabels{min-height:56px}
  .bdlab.bd-two.bd-coral{left:0; right:auto; top:28px}
  .bdprin{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){ .bdl,.bdev,.bddest,.bdowner,.bdlab{transition:none} }
/* geometry corrections: the owner node is absolute so it takes no cell,
   the destinations must be told to sit in the third column; the event
   rows are reversed so flex-start puts the dot on the right edge */
#approach .abtwo{grid-template-columns:42fr 58fr}
.bddests{grid-column:3}
.bdevs{grid-column:1}
.bdev{justify-content:flex-start}
@media (max-width:700px){
  .bdevs,.bddests{grid-column:auto; height:48px}
  .bdevs{align-items:end} .bddests{align-items:start}
  .bdev{flex-direction:column-reverse; justify-content:flex-start}
  .bddest{flex-direction:column; justify-content:flex-start}
}
@media (max-width:1000px){ #approach .abtwo{grid-template-columns:1fr} }
@media (max-width:700px){ .bdevs{grid-row:1} .bddests{grid-row:3} }
/* non-scaling strokes measure dashes in screen pixels, so each line gets
   its own length from JS (--L) and draws from that; the exception stays a
   short dash pattern */
.bdl{stroke-dasharray:var(--L, 2000); stroke-dashoffset:var(--L, 2000)}
.bdl.rt.coral{stroke-dasharray:4 3; stroke-dashoffset:0}
.bd.s1 .bdl.own{stroke-dashoffset:0}
.bd.s2 .bdl.rt.blue{stroke-dashoffset:0}
.bd.s2 .bdl.own{stroke-dashoffset:0}
.bdlab{width:max-content; max-width:100%; box-sizing:border-box}
/* the two finished-state labels are flex items, so they hug their text;
   the owner-state label overlays the same row */
.bdlabels{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:8px; min-height:26px}
.bdlab.bd-two{position:static; flex:0 0 auto; width:auto}
.bdlab.bd-two.bd-coral{left:auto; right:auto}
.bdlab.bd-one{position:absolute; left:0; top:0}
@media (max-width:700px){ .bdlab.bd-two.bd-coral{position:static; top:auto} .bdlabels{min-height:26px} }

/* ============================================================
   V97 — the standalone audit buttons: a halo behind, a slow
   light sweep across every few seconds, an arrow that leads on
   hover. Nothing blinks or pulses.
   ============================================================ */
.solo{position:relative; padding:6px 0}
.solo::before{content:''; position:absolute; left:50%; top:50%; translate:-50% -50%; width:min(460px,80%); height:140px; pointer-events:none; z-index:0;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,116,58,.16), transparent 70%)}
.solobtn{position:relative; z-index:1; overflow:hidden; gap:12px; padding:18px 30px 18px 34px; isolation:isolate}
.solobtn span{position:relative; z-index:2}
.soloarr{position:relative; z-index:2; width:18px; height:18px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:translate .3s var(--ease)}
.solobtn:hover .soloarr{translate:4px 0}
/* the light that crosses it */
.solobtn::after{content:''; position:absolute; z-index:1; top:-20%; bottom:-20%; left:-30%; width:26%; pointer-events:none;
  background:linear-gradient(105deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%); transform:skewX(-18deg) translateX(-120%);
  animation:solosweep 5.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes solosweep{0%,72%{transform:skewX(-18deg) translateX(-120%)} 100%{transform:skewX(-18deg) translateX(620%)}}
.solobtn:hover{translate:0 -3px}
@media (prefers-reduced-motion:reduce){ .solobtn::after{animation:none} .solobtn,.soloarr{transition:none} }
/* the friction map is gone from the industries hero: one column of copy */
.inh{grid-template-columns:1fr}
.incopy h1{max-width:20ch}
.innote{margin:14px 0 0; padding-left:14px; border-left:2px solid var(--red-2); font-size:14.5px; line-height:1.55; color:#fff; max-width:56ch}
.inrails{grid-template-columns:repeat(6,minmax(0,1fr))}
.inrails .inmore{border-style:dashed}
@media (max-width:1100px){ .inrails{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .inrails{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .inrails{grid-template-columns:1fr} }
.ctopts.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:700px){ .ctopts.four{grid-template-columns:1fr 1fr} }

/* ============================================================
   V98 — the industry index on the Industries hero. Six rows, not
   six boxes: number, trade, descriptor, arrow, a rule between.
   ============================================================ */
.inidx{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-2)}
.inidx li{border-bottom:1px solid var(--line)}
.inidx a{
  position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) minmax(0,1.1fr) 28px; align-items:center; gap:0 18px;
  padding:16px 6px 16px 10px; text-decoration:none; color:inherit;
  transition:background .25s var(--ease), padding-left .3s var(--ease);
}
.inidx a::before{content:''; position:absolute; left:0; top:12px; bottom:12px; width:2px; border-radius:1px; background:var(--red-2); transform:scaleY(0); transform-origin:center; transition:transform .3s var(--ease)}
.inidx a:hover{background:rgba(255,255,255,.025); padding-left:18px}
.inidx a:hover::before{transform:scaleY(1)}
.inidx a:focus-visible{outline:2px solid var(--red-2); outline-offset:-2px; border-radius:8px}
.inn{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; color:var(--red-2)}
.inidx b{font-family:var(--f-display); font-weight:700; letter-spacing:-.03em; font-size:clamp(19px,2vw,26px); line-height:1.1; color:#fff; transition:color .25s var(--ease)}
.inidx i{font-style:normal; font-size:14.5px; line-height:1.4; color:var(--text-3); transition:color .25s var(--ease)}
.inidx a:hover i{color:var(--text-2)}
.inarr{width:20px; height:20px; fill:none; stroke:rgba(255,255,255,.35); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; justify-self:end; transition:stroke .25s var(--ease), translate .3s var(--ease)}
.inidx a:hover .inarr{stroke:var(--red-2); translate:4px 0}
.inidx .inmore b{color:var(--text-2)}
.inidx .inmore:hover b{color:#fff}
@media (max-width:760px){
  .inidx a{grid-template-columns:34px minmax(0,1fr) 22px; grid-template-rows:auto auto; gap:2px 12px; padding:14px 4px 14px 8px}
  .inn{grid-row:1 / 3; align-self:start; padding-top:5px}
  .inidx i{grid-column:2}
  .inarr{grid-row:1 / 3; width:18px; height:18px}
  .inidx a:hover{padding-left:8px}
}
/* phone: every cell placed explicitly, so auto-placement cannot put the
   trade name in the arrow's column */
@media (max-width:760px){
  .inidx .inn{grid-column:1; grid-row:1 / 3}
  .inidx b{grid-column:2; grid-row:1}
  .inidx i{grid-column:2; grid-row:2}
  .inidx .inarr{grid-column:3; grid-row:1 / 3; align-self:center}
}

/* ============================================================
   V99 — the pulses on the block 2 diagrams, rebuilt.
   Two things were wrong. The loop ran the dash offset from 100
   to -6 and then jumped back to 100, so every pulse hopped
   backwards by six percent of its path at the end of each lap.
   And every line took 3.6s regardless of length, so a pulse on
   a 246-unit path crawled at a third of the speed of one on a
   705-unit path, with a dash a third as long. Both read as lag.
   Now site.js measures every path and sets four variables per
   line: --L the real length, --from / --to the offsets that
   carry one 40-unit pulse from just before the start to just
   past the end at one shared speed, and --T the period, which
   is the same for every line in a group so the choreography
   never drifts. Lines that are shorter simply rest longer.
   Nothing here uses pathLength any more.
   ============================================================ */
.dg-flow,.pulse{
  animation-name:none;                 /* until site.js has measured it */
  stroke-dasharray:var(--dash, 40px 2000px);
  stroke-dashoffset:var(--from, 2040px);
  filter:none;                         /* the CRM panel had a drop-shadow on a moving path: an SVG filter re-run every frame */
}
.dg-flow.on,.pulse.on{
  animation-name:dgpulse;
  animation-duration:var(--T, 5s);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  /* animation-delay stays with .f1 to .f6 and .d2 to .d5 */
}
@keyframes dgpulse{
  from{stroke-dashoffset:var(--from, 2040px)}
  to  {stroke-dashoffset:var(--to, 40px)}
}
@media (prefers-reduced-motion:reduce){
  .dg-flow.on,.pulse.on{animation:none; display:none}
}

/* ============================================================
   V100 — the Industries section, rebuilt as a hierarchy.
   /industries/ index, six category pages, thirty-five trade
   pages, all generated by build/build-industries.js. Everything
   here is scoped to ix-, wfa- and wfstrip- classes plus the two
   hero wrappers, so nothing outside /industries/ changes. The
   menu sheet gets a three-column variant (.mind) that lists the
   six categories and the "not seeing your industry" panel.
   ============================================================ */

/* ---- menu ---- */
.msheet.mind{grid-template-columns:1fr 1fr .9fr}
.mind .mcol a{padding:9px 10px}
.mind .mcol a i{margin-top:3px; line-height:1.4}
.mpq h6{color:#fff; font-family:var(--f-display); font-size:14px; letter-spacing:-.01em; text-transform:none; margin-bottom:4px}
.mpq p{margin:0}

/* ---- breadcrumb ---- */
.ixcrumb{margin:0 0 20px; display:flex; flex-wrap:wrap; align-items:center; gap:2px; font-family:var(--f-mono); font-size:11px; letter-spacing:.04em}
.ixcrumb a{color:var(--text-3)}
.ixcrumb a:hover,.ixcrumb a:focus-visible{color:#fff}
.ixcrumb a:focus-visible{outline:2px solid var(--red-2); outline-offset:2px; border-radius:3px}
.ixcrumb b{color:var(--text-2); font-weight:500}
.ixcrumb span{margin:0 6px; opacity:.45}

/* ---- heroes ---- */
.ixhero{margin-top:calc(64px - var(--gap)); display:grid; gap:clamp(24px,3vw,40px); scroll-margin-top:120px}
.ixh{display:grid; grid-template-columns:44fr 56fr; gap:clamp(26px,4vw,64px); align-items:center}
.ixhero .incopy h1{max-width:14ch}
.cathero .incopy h1{max-width:15ch}
.tradehero .incopy{max-width:760px}
.tradehero .incopy h1{max-width:20ch; font-size:clamp(28px,3.2vw,46px)}
.tradehero .incopy .sub{max-width:62ch}
@media (max-width:1000px){ .ixh{grid-template-columns:1fr} .ixhero .incopy h1{max-width:20ch} }

/* ---- the index hero workflow: five nodes, six vocabularies ---- */
.ixwf{
  position:relative; display:grid; gap:18px; padding:clamp(18px,2.2vw,26px);
  border-radius:18px; border:1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 28px),
    #0f0c15;
}
.ixwfhead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.ixwfk{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; color:var(--text-3)}
.ixwfl{font-family:var(--f-display); font-weight:600; font-size:14px; letter-spacing:-.01em; color:#fff; transition:opacity .22s var(--ease)}
.ixwf.swap .ixwfl,.ixwf.swap .ixlab{opacity:0}
.ixtrack{position:relative; padding:10px 0 6px}
.ixline{position:absolute; left:8%; right:8%; top:calc(10px + 14px); height:1px; background:rgba(255,255,255,.18)}
.ixpulse{
  position:absolute; top:-1px; left:0; width:52px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--red-2) 60%, #fff);
  box-shadow:0 0 12px rgba(240,90,98,.45);
  opacity:0; transform:translateX(var(--x, 0px));
}
.ixwf.live .ixpulse{animation:ixrun 4.6s linear infinite}
@keyframes ixrun{
  0%{opacity:0; transform:translateX(-52px)}
  6%{opacity:1}
  88%{opacity:1}
  100%{opacity:0; transform:translateX(var(--tw, 600px))}
}
.ixnodes{list-style:none; margin:0; padding:0; position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px}
.ixnode{display:grid; justify-items:center; gap:10px; text-align:center}
.ixnode .ixn{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; color:var(--text-2);
  border:1px solid rgba(255,255,255,.22); background:#0f0c15; box-sizing:border-box; position:relative; z-index:1;
  transition:border-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.ixnode.lit .ixn{border-color:var(--red-2); color:#fff; box-shadow:0 0 0 4px rgba(240,90,98,.12)}
.ixlab{
  font-family:var(--f-mono); font-size:clamp(9px,.8vw,11px); letter-spacing:.12em; color:#fff; font-weight:500;
  padding:7px 8px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.03);
  width:100%; box-sizing:border-box; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity .22s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.ixnode.lit .ixlab{border-color:rgba(240,90,98,.45); background:rgba(240,90,98,.08)}
.ixinds{display:flex; flex-wrap:wrap; gap:6px; padding-top:12px; border-top:1px solid var(--line)}
.ixind{
  appearance:none; cursor:pointer; border:1px solid transparent; background:transparent; border-radius:999px;
  padding:7px 11px; font-family:var(--f-body); font-size:12.5px; font-weight:500; color:var(--text-3);
  transition:color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.ixind:hover{color:#fff}
.ixind:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}
.ixind.on{color:#fff; background:rgba(255,255,255,.05); border-color:var(--line-2)}
.ixwfnote{margin:0; font-size:12.5px; color:var(--text-3); line-height:1.5}
@media (max-width:640px){
  .ixnodes{grid-template-columns:1fr; gap:6px; padding-left:0}
  .ixnode{grid-template-columns:28px 1fr; justify-items:start; text-align:left; gap:10px; align-items:center}
  .ixline{left:14px; right:auto; top:14px; bottom:14px; width:1px; height:auto}
  .ixpulse{width:3px; height:44px; left:-1px; background:linear-gradient(180deg, transparent, var(--red-2) 60%, #fff)}
  .ixwf.live .ixpulse{animation-name:ixrunv}
  @keyframes ixrunv{0%{opacity:0; transform:translateY(-44px)} 6%{opacity:1} 88%{opacity:1} 100%{opacity:0; transform:translateY(var(--th, 300px))}}
  .ixlab{white-space:normal}
}

/* ---- the five-stage strip (cards and previews) ---- */
.wfstrip{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; position:relative}
.wfstrip::before{content:''; position:absolute; left:10%; right:10%; top:5px; height:1px; background:rgba(255,255,255,.16)}
.wfstrip li{display:grid; justify-items:center; gap:8px; text-align:center; min-width:0}
.wfstrip i{width:11px; height:11px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:#12101b; box-sizing:border-box; position:relative; z-index:1; transition:background .3s var(--ease), border-color .3s var(--ease)}
.wfstrip span{font-family:var(--f-mono); font-size:9px; letter-spacing:.06em; color:var(--text-3); line-height:1.3; text-transform:uppercase; overflow-wrap:anywhere}
.wfstrip.mini{--n:5}
.rv.in .wfstrip.mini li i{animation:wfdot 6s steps(1,end) infinite; animation-delay:calc(var(--d, 0s) + var(--k) * 1.2s)}
.wfstrip.mini li:nth-child(1){--k:0} .wfstrip.mini li:nth-child(2){--k:1} .wfstrip.mini li:nth-child(3){--k:2} .wfstrip.mini li:nth-child(4){--k:3} .wfstrip.mini li:nth-child(5){--k:4}
@keyframes wfdot{0%{background:var(--red-2); border-color:var(--red-2)} 20%{background:#12101b; border-color:rgba(255,255,255,.3)} 100%{background:#12101b; border-color:rgba(255,255,255,.3)}}

/* ---- category cards ---- */
.ixcards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px)}
@media (max-width:1060px){ .ixcards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .ixcards{grid-template-columns:1fr} }
.ixcard{
  position:relative; isolation:isolate; display:grid; gap:12px; align-content:start;
  padding:clamp(20px,2.2vw,28px); border-radius:16px; border:1px solid var(--line);
  background:rgba(255,255,255,.016); color:inherit; text-decoration:none; overflow:hidden;
  transition:border-color .35s var(--ease), background .35s var(--ease), translate .35s var(--ease);
}
.ixcard::after{
  content:''; position:absolute; inset:auto -20% -30% -20%; height:60%; z-index:-1; opacity:0; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 100%, rgba(240,90,98,.14), transparent 70%);
  transition:opacity .45s var(--ease);
}
.ixcard:hover,.ixcard:focus-visible{border-color:rgba(240,90,98,.42); background:rgba(255,255,255,.03); translate:0 -4px}
.ixcard:hover::after,.ixcard:focus-visible::after{opacity:1}
.ixcard:focus-visible{outline:2px solid var(--red-2); outline-offset:3px}
.ixcardk{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--red-2)}
.ixcard h3{margin:0; font-family:var(--f-display); font-weight:600; font-size:clamp(18px,1.6vw,22px); line-height:1.15; letter-spacing:-.025em; color:#fff; text-wrap:balance}
.ixcard p{margin:0; font-size:14.5px; line-height:1.6; color:var(--text-2)}
.ixcard .wfstrip{margin-top:6px; padding-top:14px; border-top:1px solid var(--line)}
.ixgo{display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-family:var(--f-display); font-weight:600; font-size:13.5px; color:#fff; letter-spacing:-.01em}
.ixchev{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:translate .3s var(--ease); flex:none}
.ixcard:hover .ixchev,.ixcard:focus-visible .ixchev{translate:4px 0}

/* ---- recurring problems (five across) ---- */
.ixprun{grid-template-columns:repeat(5,minmax(0,1fr))}
.ixprun.five{grid-template-columns:repeat(5,minmax(0,1fr))}
.ixprun li{gap:10px}
.ixprun .prn{font-size:12px; letter-spacing:.06em}
@media (max-width:1100px){ .ixprun,.ixprun.five{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){ .ixprun,.ixprun.five{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .ixprun,.ixprun.five{grid-template-columns:1fr} }
.ixmapcta{margin-top:clamp(28px,3.6vw,48px)}
.ixmapcta a{cursor:pointer}

/* ---- category: what we build ---- */
.ixbuild{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px)}
@media (max-width:760px){ .ixbuild{grid-template-columns:1fr} }
.ixbuild li{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:clamp(18px,2vw,24px); border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.016)}
.ixbn{font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--red-2); padding-top:4px}
.ixbuild h3{margin:0; font-family:var(--f-display); font-weight:600; font-size:17px; letter-spacing:-.02em; color:#fff}
.ixbuild p{margin:8px 0 0; font-size:14.5px; line-height:1.6; color:var(--text-2)}

/* ---- category: trade links ---- */
.ixtrades{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media (max-width:700px){ .ixtrades{grid-template-columns:1fr} }
.ixtrades a{
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:4px 14px; align-items:center;
  padding:16px 18px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02); text-decoration:none;
  transition:border-color .25s var(--ease), background .25s var(--ease), translate .25s var(--ease);
}
.ixtrades a:hover,.ixtrades a:focus-visible{border-color:rgba(255,138,144,.5); background:rgba(255,255,255,.04); translate:0 -2px}
.ixtrades a:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}
.ixtrades b{font-family:var(--f-display); font-weight:600; font-size:16px; letter-spacing:-.02em; color:#fff}
.ixtrades i{font-style:normal; font-size:13px; line-height:1.45; color:var(--text-3); grid-column:1}
.ixtrades .ixchev{grid-column:2; grid-row:1 / 3; color:var(--text-2)}
.ixtrades a:hover .ixchev{translate:4px 0; color:#fff}

/* ---- trade: situation ---- */
.ixsit{max-width:72ch; padding:clamp(22px,2.6vw,32px); border-radius:16px; border:1px solid rgba(240,90,98,.22); background:linear-gradient(148deg, rgba(240,90,98,.07), rgba(255,255,255,.015) 60%)}
.ixsit .tiny{margin:0; color:var(--red-2)}
.ixsit h2{margin:12px 0 0; font-family:var(--f-display); font-weight:700; font-size:clamp(22px,2.4vw,30px); letter-spacing:-.03em; color:#fff}
.ixsit p{margin:14px 0 0; font-size:15.5px; line-height:1.7; color:var(--text-2)}
.ixsit p:first-of-type{color:var(--text)}

/* ---- trade: five workflows ---- */
.ixwfl{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.ixwfl li{display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:clamp(14px,2vw,28px); align-items:start; padding:clamp(18px,2vw,24px); border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.016)}
@media (max-width:900px){ .ixwfl li{grid-template-columns:1fr} }
.ixwfl h3{margin:0; display:flex; gap:12px; align-items:baseline; font-family:var(--f-display); font-weight:600; font-size:17px; letter-spacing:-.02em; color:#fff}
.ixna{display:grid; gap:6px; align-content:start}
.ixna p{margin:0; font-size:14px; line-height:1.6; color:var(--text-2)}
.ixtag{justify-self:start; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; padding:3px 8px; border-radius:999px; border:1px solid var(--line-2); color:var(--text-3)}
.ixtag.fixed{color:var(--red-2); border-color:rgba(240,90,98,.4); background:rgba(240,90,98,.08)}

/* ---- trade: before and after ---- */
.ixba{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,20px)}
@media (max-width:760px){ .ixba{grid-template-columns:1fr} }
.ixbacol{padding:clamp(18px,2vw,26px); border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.016)}
.ixbacol.after{border-color:rgba(240,90,98,.3); background:linear-gradient(160deg, rgba(240,90,98,.07), rgba(255,255,255,.015) 55%)}
.ixbah{display:inline-block; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.14em; color:var(--text-3); margin-bottom:12px}
.ixbacol.after .ixbah{color:var(--red-2)}
.ixbacol ol{margin:0; padding:0; list-style:none; counter-reset:step; display:grid; gap:10px}
.ixbacol li{position:relative; padding-left:34px; font-size:14.5px; line-height:1.58; color:var(--text-2); counter-increment:step}
.ixbacol li::before{content:counter(step, decimal-leading-zero); position:absolute; left:0; top:2px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; color:var(--text-3)}
.ixbacol.after li{color:var(--text)}
.ixbacol.after li::before{color:var(--red-2)}

/* ---- trade: metrics ---- */
.ixmet{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
@media (max-width:900px){ .ixmet{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .ixmet{grid-template-columns:1fr} }
.ixmet li{display:grid; gap:6px; align-content:start; padding:16px 18px; border-radius:12px; border-top:1px solid rgba(240,90,98,.26); background:rgba(255,255,255,.014)}
.ixmet b{font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:-.015em; color:#fff; line-height:1.3}
.ixmet i{font-style:normal; font-size:13.5px; line-height:1.55; color:var(--text-2)}

/* ---- trade: related ---- */
.ixrel{display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(14px,2vw,28px); align-items:start}
@media (max-width:800px){ .ixrel{grid-template-columns:1fr} }
.ixrelback,.ixrellist{display:grid; gap:10px}
.ixrel .tiny{margin:0}
.ixrellist ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.ixrelcat,.ixrellist a{
  display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; gap:3px 14px; align-items:center;
  padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.02); text-decoration:none;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.ixrelcat{border-color:rgba(240,90,98,.3); background:rgba(240,90,98,.06)}
.ixrelcat:hover,.ixrellist a:hover,.ixrelcat:focus-visible,.ixrellist a:focus-visible{border-color:rgba(255,138,144,.5); background:rgba(255,255,255,.045)}
.ixrelcat:focus-visible,.ixrellist a:focus-visible{outline:2px solid var(--red-2); outline-offset:2px}
.ixrelcat b,.ixrellist b{font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:-.02em; color:#fff}
.ixrelcat i,.ixrellist i{font-style:normal; font-size:12.5px; line-height:1.4; color:var(--text-3); grid-column:1}
.ixrelcat .ixchev,.ixrellist .ixchev{grid-column:2; grid-row:1 / 3; color:var(--text-2)}

/* ---- faq and cta reuse .audq and .ask; small tweaks ---- */
.ixfaq .sechead h2{max-width:26ch}
.ixcta .askmain h2{max-width:18ch}

/* ============================================================
   The category workflow animation (.wfa). One record moves
   through five stages; the log under it fills in as it goes.
   data-kind chooses the decoration: board columns, calendar
   slots, shop bays, milestone owners, engagement approvals, or
   the renewal loop. site.js sets data-step 0 to 4 while the
   block is on screen, and --x for the record's position.
   ============================================================ */
.wfa{
  position:relative; display:grid; gap:14px; padding:clamp(16px,2vw,22px); border-radius:18px; border:1px solid var(--line);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.022) 0 1px, transparent 1px 28px),
    #0f0c15;
}
.wfahead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.wfak{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.16em; color:var(--text-3)}
.wfarec{font-family:var(--f-display); font-weight:600; font-size:13.5px; color:#fff; letter-spacing:-.01em}
.wfastages{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px}
.wfast{display:grid; gap:8px; align-content:start; padding:10px 8px 8px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.02); min-width:0; transition:border-color .3s var(--ease), background .3s var(--ease)}
.wfast.done{border-color:rgba(255,255,255,.16)}
.wfast.on{border-color:rgba(240,90,98,.5); background:rgba(240,90,98,.07)}
.wfasn{font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; color:var(--text-3)}
.wfast b{font-family:var(--f-mono); font-size:clamp(9px,.75vw,10.5px); letter-spacing:.1em; color:#fff; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wfaslot{display:block; height:26px; border-radius:6px; border:1px dashed rgba(255,255,255,.14)}
.wfast.done .wfaslot{border-style:solid; border-color:rgba(255,255,255,.12); background:repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 6px, transparent 6px 10px)}
.wfast.on .wfaslot{border-color:rgba(240,90,98,.45); border-style:solid; background:rgba(240,90,98,.10)}

.wfalane{position:relative; height:54px}
.wfaline{position:absolute; left:10%; right:10%; top:26px; height:1px; background:rgba(255,255,255,.16)}
.wfafill{position:absolute; left:0; top:0; height:100%; width:calc(var(--step, 0) * 25%); background:var(--red-2); transition:width .6s cubic-bezier(.4,0,.2,1)}
.wfarecord{
  position:absolute; top:6px; left:0; width:calc(20% - 8px); margin-left:4px; box-sizing:border-box;
  display:grid; gap:2px; padding:7px 9px; border-radius:9px; border:1px solid rgba(240,90,98,.5); background:#1a1220;
  box-shadow:0 10px 24px -12px rgba(240,90,98,.6);
  transform:translateX(calc(var(--step, 0) * 100%)); transition:transform .6s cubic-bezier(.4,0,.2,1);
}
.wfarecord b{font-family:var(--f-display); font-weight:600; font-size:11px; color:#fff; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wfarecord i{font-style:normal; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.04em; color:var(--red-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wfaloop{position:absolute; left:10%; right:10%; top:36px; height:18px; opacity:0; transition:opacity .4s var(--ease)}
.wfaloop svg{width:100%; height:100%; fill:none; stroke:rgba(255,255,255,.35); stroke-width:1; stroke-linecap:round; stroke-linejoin:round; overflow:visible}
.wfaloop svg path{vector-effect:non-scaling-stroke}
.wfa[data-step="4"] .wfaloop{opacity:1}

.wfalog{list-style:none; margin:0; padding:10px 0 0; border-top:1px solid var(--line); display:grid; gap:5px}
.wfalogi{display:grid; grid-template-columns:96px 1fr; gap:10px; font-size:12.5px; line-height:1.4; color:var(--text-3); opacity:.35; transition:opacity .35s var(--ease), color .35s var(--ease)}
.wfalogi.done{opacity:1}
.wfalogi.on{opacity:1; color:#fff}
.wfalogn{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; color:var(--text-3); padding-top:2px}
.wfalogi.on .wfalogn{color:var(--red-2)}
.wfanote{margin:0; font-size:12.5px; color:var(--text-3); line-height:1.5}

/* kind flavours */
.wfa[data-kind="board"] .wfast{background:rgba(255,255,255,.02); border-top:2px solid rgba(255,255,255,.14)}
.wfa[data-kind="board"] .wfast.on{border-top-color:var(--red-2)}
.wfa[data-kind="calendar"] .wfaslot{background:repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.07) 7px 8px)}
.wfa[data-kind="calendar"] .wfast.on .wfaslot{background:rgba(240,90,98,.10)}
.wfa[data-kind="bay"] .wfast{border-radius:4px 4px 10px 10px}
.wfa[data-kind="bay"] .wfasn::before{content:'BAY '}
.wfa[data-kind="milestones"] .wfaslot{border:none; height:26px; background:none; position:relative}
.wfa[data-kind="milestones"] .wfaslot::before{content:''; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04)}
.wfa[data-kind="milestones"] .wfast.on .wfaslot::before,.wfa[data-kind="milestones"] .wfast.done .wfaslot::before{border-color:var(--red-2); background:rgba(240,90,98,.14)}
.wfa[data-kind="engagement"] .wfaslot{border:none; height:26px; background:none; position:relative}
.wfa[data-kind="engagement"] .wfaslot::before{content:''; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:5px; border:1px solid rgba(255,255,255,.22)}
.wfa[data-kind="engagement"] .wfast.done .wfaslot::before{border-color:var(--green); background:rgba(61,220,151,.14)}
.wfa[data-kind="engagement"] .wfast.done .wfaslot::after{content:''; position:absolute; left:5px; top:7px; width:6px; height:3px; border-left:1.6px solid var(--green); border-bottom:1.6px solid var(--green); rotate:-45deg}
.wfa[data-kind="loop"] .wfast:last-child{border-style:dashed}
.wfa[data-kind="loop"] .wfast:last-child.on{border-style:solid}

@media (max-width:640px){
  .wfast b{white-space:normal; font-size:9px}
  .wfalogi{grid-template-columns:78px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .wfarecord,.wfafill,.wfast,.wfalogi{transition:none}
  .ixwf.live .ixpulse,.rv.in .wfstrip.mini li i{animation:none}
  .ixpulse{display:none}
}

/* V100b — the three outputs listed beside the Industries CTA, and the menu
   panel button, which was wider than the panel. */
.askout{list-style:none; margin:0; padding:0; display:grid; gap:10px; align-self:center}
.askout li{
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px; align-items:baseline; counter-increment:askout;
  padding:14px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03);
}
.askout li::before{content:counter(askout, decimal-leading-zero); grid-row:1 / 3; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--red-2); padding-top:2px}
.askout{counter-reset:askout}
.askout b{font-family:var(--f-display); font-weight:600; font-size:15px; letter-spacing:-.015em; color:#fff}
.askout i{font-style:normal; font-size:13.5px; line-height:1.5; color:var(--text-2); grid-column:2}
.mpq .btn{white-space:normal; text-align:center; line-height:1.3; padding:9px 12px}

/* ============================================================
   V101 — the phone, properly.
   1. The menu under 1260px is six plain rows: Industries, What we
      build, How it works, About, Contact, and the audit button.
      No sub-lists, no promo cards.
   2. The hero's software strip is centred with three marks.
   3. Block 2 (the tab rail) stops being a horizontal scroller with
      a 900px diagram behind it. It becomes four stacked blocks,
      each with a short explanation, and no animation.
   4. The free-audit block is centred.
   5. Every Industries page is centred on a phone, and the small
      labels come up a size.
   ============================================================ */

/* 1. menu */
@media (max-width:1260px){
  .links{padding:8px; gap:2px}
  .links .mega{display:none !important}
  .links .mbtn::after{content:none}
  .links > a,.links .mbtn{width:100%; box-sizing:border-box; padding:15px 14px; font-size:16px; font-weight:500; color:var(--text); border-radius:10px; justify-content:flex-start; text-align:left}
  .links > a:hover,.links .mbtn:hover{background:rgba(255,255,255,.05)}
  .links .mwrap{display:block; padding:0}
  .links .mwrap:has(.mind){order:-1}
  .links .navend{margin:6px 0 0; padding:12px 6px 6px; border-top:1px solid var(--line)}
  .links .navend .btn{width:100%; padding:15px 18px; font-size:15.5px; justify-content:center}
}

/* 2. hero strip */
@media (max-width:760px){
  .hero-foot{flex-direction:column; align-items:center; text-align:center; gap:16px; margin-left:0; margin-right:0; padding-left:clamp(14px,4vw,24px); padding-right:clamp(14px,4vw,24px)}
  .hero-foot .cap{flex:0 0 auto; text-align:center; padding:0; margin:0 auto; max-width:none}
  .hero-foot .cap::before{content:none}
  .flipper{flex:0 0 auto; width:100%; justify-content:center; gap:clamp(10px,3vw,18px)}
  .slot:nth-of-type(2),.slot:nth-of-type(3){display:block !important}
  .slot:nth-of-type(4){display:none !important}
  .slot{width:clamp(92px,26vw,104px)}
  .cell .nm{font-size:11px; color:rgba(240,236,250,.55)}
  .cell .ic{width:28px; height:28px; border-radius:8px}
  .cell .ic img{width:17px; height:17px; opacity:.85}
}

/* 3. block 2 on a phone: stacked blocks, no diagram */
.railm{display:none}
@media (max-width:980px){
  .rail > div:last-child{display:none}
  .railnav{display:grid; grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:1fr; gap:12px; overflow:visible; padding:0; border:none}
  .railnav button{
    pointer-events:none; min-width:0; width:100%; box-sizing:border-box;
    display:grid; gap:10px; padding:22px 20px 24px; text-align:center; justify-items:center;
    border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.02);
  }
  .railnav button::before,.railnav button::after{content:none}
  .railnav button[aria-selected="true"]{background:rgba(255,255,255,.02)}
  .railnav b,.railnav button[aria-selected="true"] b{color:#fff; font-size:22px; line-height:1.15; text-wrap:balance}
  .railnav b em{color:rgba(233,228,245,.45)}
  .railnav i,.railnav button[aria-selected="true"] i{color:var(--red-2); font-size:13px; line-height:1.45; max-width:34ch}
  .railm{display:block; font-style:normal; font-size:15px; line-height:1.62; color:var(--text-2); max-width:40ch}
  .railnav #t5{display:none}
}

/* 4. the free-audit block, centred */
@media (max-width:700px){
  .ask{text-align:center}
  .asktag{justify-content:center}
  .askmain h2,.askmain > p{margin-left:auto; margin-right:auto}
  .askmain .btns{justify-content:center}
  .asktrust{justify-content:center}
  .askwhy{margin-left:auto; margin-right:auto; text-align:center}
  .askflow{gap:14px}
  .asknode{grid-template-columns:1fr; justify-items:center; gap:10px}
  .asknode:not(:last-child)::before{left:50%; top:34px; bottom:-14px; margin-left:-.5px}
  .askpanel{width:100%; box-sizing:border-box; text-align:center; justify-items:center}
  .askwf,.askissues,.askfix{justify-content:center}
  .askout li{text-align:left}
}

/* 5. Industries on a phone */
@media (max-width:760px){
  .ixhero .incopy,.tradehero .incopy{text-align:center; justify-items:center}
  .ixhero .incopy h1,.tradehero .incopy h1,.cathero .incopy h1{margin-left:auto; margin-right:auto; max-width:none; text-wrap:balance}
  .ixhero .incopy .sub{margin-left:auto; margin-right:auto}
  .ixhero .incopy .btns{justify-content:center; width:100%}
  .ixhero .incopy .btns .btn{width:100%; justify-content:center}
  .ixcrumb{justify-content:center}
  .ixhero .sechead,.plain .sechead{text-align:center}
  .sechead h2,.sechead .sub,.sechead .tiny{margin-left:auto; margin-right:auto}
  .ixwfhead,.wfahead{justify-content:center; text-align:center}
  .ixinds{justify-content:center}
  .ixwfnote,.wfanote{text-align:center}
  .ixwfk,.ixn,.wfak,.wfasn,.ixcardk,.ixbn,.ixtag,.ixbah,.ixwfl .ixbn{font-size:10.5px}
  .ixlab{font-size:10.5px}
  .wfast b{font-size:10px}
  .wfstrip span{font-size:9.5px}
  .ixcard{text-align:center; justify-items:center}
  .ixcard .wfstrip{width:100%}
  .ixgo{justify-content:center}
  .ixprun li{text-align:center; justify-items:center}
  .ixbuild li{grid-template-columns:1fr; justify-items:center; text-align:center; gap:8px}
  .ixbn{padding-top:0}
  .ixtrades a{grid-template-columns:1fr; text-align:center; justify-items:center; gap:6px}
  .ixtrades .ixchev,.ixrelcat .ixchev,.ixrellist .ixchev{display:none}
  .ixtrades i{grid-column:1}
  .ixsit{text-align:center}
  .ixwfl li{text-align:center; justify-items:center}
  .ixwfl h3{justify-content:center; flex-wrap:wrap}
  .ixna{justify-items:center}
  .ixbacol{text-align:left}
  .ixbah{display:block; text-align:center}
  .ixmet li{text-align:center; justify-items:center}
  .ixrel{text-align:center}
  .ixrelcat,.ixrellist a{grid-template-columns:1fr; justify-items:center; text-align:center}
  .ixcta .askmain h2{max-width:none}
  .wfalogi{grid-template-columns:1fr; gap:2px; text-align:center}
  .ixwfnote{max-width:34ch; margin-left:auto; margin-right:auto}
}
/* the card strips: on a phone the five columns are 60px wide and a word like
   QUALIFICATION was breaking in the middle. Columns now size to their word. */
@media (max-width:760px){
  .wfstrip{grid-template-columns:repeat(5,auto); justify-content:space-between; gap:6px}
  .wfstrip span{font-size:8.5px; letter-spacing:.02em; overflow-wrap:normal; word-break:keep-all}
}