/* ==========================================================================
   LAB — Robotics as a Service
   Design system: "Fleet Operations"

   Dark canvas by default; robot photography and video are the subject and the
   page gets out of their way. An acid-lime signal colour marks anything live,
   active or measured. Mono microtype carries labels, indices and specs so the
   page reads like instrumentation rather than a brochure. Light "paper"
   sections are reserved for long-form reading.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* --- Canvas ------------------------------------------------------------ */
  --void:#070d0c;          /* page background */
  --pit:#0a1413;           /* recessed bands */
  --surface:#0f1b1a;       /* cards on dark */
  --surface-2:#162422;     /* raised / hover */

  --hair:rgba(214,255,242,.11);      /* structural hairlines */
  --hair-soft:rgba(214,255,242,.055);
  --hair-strong:rgba(214,255,242,.2);

  /* --- Signal ------------------------------------------------------------ */
  --signal:#c9f24d;        /* live / active / measured */
  --signal-deep:#a8cf35;
  --signal-wash:rgba(201,242,77,.11);
  --cyan:#4fd6c0;          /* secondary technical accent */

  /* --- Type on dark ----------------------------------------------------- */
  --text:#e9f1ee;
  --text-2:#9fb2ac;
  --text-3:#657873;

  /* --- Paper (light sections) ------------------------------------------- */
  --paper:#f2f5f3;
  --paper-2:#e5ebe8;
  --ink:#07110f;
  --ink-2:#485955;
  --ink-3:#7a8b86;
  --hair-ink:rgba(7,17,15,.13);

  /* --- Type ------------------------------------------------------------- */
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- Geometry --------------------------------------------------------- */
  --maxw:1280px;
  --gutter:clamp(20px,4.5vw,48px);
  --r-lg:4px;              /* deliberately near-square: engineered, not soft */
  --r-md:3px;
  --r-pill:999px;
  --nav-h:68px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--void);
  color:var(--text-2);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}
::selection{background:var(--signal);color:#07110f}

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:920px}

.sec{position:relative;padding-block:clamp(76px,10vw,150px)}
.sec--tight{padding-block:clamp(52px,6.5vw,90px)}
.sec--flush-top{padding-top:0}
.sec--flush-bottom{padding-bottom:0}
.sec--pit{background:var(--pit)}
.sec--surface{background:var(--surface)}

/* Light "paper" sections invert the whole type scale. */
.sec--paper{background:var(--paper);color:var(--ink-2)}
.sec--paper h1,.sec--paper h2,.sec--paper h3,.sec--paper h4,.sec--paper .dsp{color:var(--ink)}
.sec--paper .dim{color:var(--ink-2)}
.sec--paper .dimmer{color:var(--ink-3)}
.sec--paper .lede{color:var(--ink-2)}
.sec--paper .idx{color:var(--ink-3)}
.sec--paper .idx b{color:var(--ink)}
.sec--paper .rules::before,.sec--paper .rules::after{background:var(--hair-ink)}

/* Hairline rules that bracket the content column — engineering-drawing motif.
   Purely decorative; hidden below the width where they'd crowd the text. */
.rules{position:relative}
.rules::before,.rules::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--hair);
  pointer-events:none;
}
.rules::before{left:var(--gutter)}
.rules::after{right:var(--gutter)}
@media (max-width:860px){.rules::before,.rules::after{display:none}}

.grid{display:grid;gap:clamp(20px,2.4vw,32px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* Asymmetric two-column: content sits left of centre, media takes the rest. */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.split--rev .split__media{order:2}
.split--top{align-items:start}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,h2,h3,h4{color:var(--text);font-weight:600;letter-spacing:-.03em;line-height:1.04}

.dsp{font-size:clamp(42px,7.4vw,104px);font-weight:600;letter-spacing:-.045em;line-height:.94;color:var(--text)}
h1{font-size:clamp(36px,5.4vw,72px);letter-spacing:-.04em}
h2{font-size:clamp(29px,4vw,54px);letter-spacing:-.035em}
h3{font-size:clamp(20px,2vw,27px);letter-spacing:-.025em}
h4{font-size:17px;letter-spacing:-.015em}

.lede{font-size:clamp(18px,1.55vw,22px);line-height:1.5;color:var(--text-2);font-weight:400}
.small{font-size:15px;line-height:1.55}
.dim{color:var(--text-2)}
.dimmer{color:var(--text-3)}
.balance{text-wrap:balance}
p{text-wrap:pretty}
.measure{max-width:64ch}
.measure-sm{max-width:46ch}
.center{text-align:center}
.mxa{margin-inline:auto}
.nowrap{white-space:nowrap}

/* Mono microtype — the technical voice of the system. */
.mono{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}

/* Section index: "03 / Fleet" */
.idx{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:clamp(20px,2.4vw,32px);
}
.idx b{color:var(--signal);font-weight:600}
.idx::after{content:"";flex:1;height:1px;background:var(--hair);max-width:120px}

/* Live indicator — pulsing signal dot. */
.live{display:inline-flex;align-items:center;gap:8px}
.live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 0 var(--signal-wash);animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(201,242,77,.5)}
  70%{box-shadow:0 0 0 9px rgba(201,242,77,0)}
  100%{box-shadow:0 0 0 0 rgba(201,242,77,0)}
}

/* Section header block */
.head{max-width:800px}
.head h2 + .lede,.head .dsp + .lede{margin-top:clamp(18px,2vw,26px)}
.head--center{max-width:760px;margin-inline:auto;text-align:center}
.head--center .idx{justify-content:center}
.head--center .idx::after{display:none}

/* ==========================================================================
   Buttons & links
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1;
  padding:15px 26px;border-radius:var(--r-pill);border:1px solid transparent;
  transition:background .24s var(--ease),color .24s var(--ease),
             border-color .24s var(--ease),transform .18s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(.975)}
.btn svg{width:16px;height:16px;flex:none}

.btn--signal{background:var(--signal);color:#07110f}
.btn--signal:hover{background:#d8ff62}
.btn--outline{border-color:var(--hair-strong);color:var(--text)}
.btn--outline:hover{border-color:var(--text);background:rgba(233,241,238,.06)}
.btn--solid{background:var(--text);color:var(--void)}
.btn--solid:hover{background:#fff}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:#132321}
.btn--lg{padding:18px 32px;font-size:16.5px}
.btn--sm{padding:11px 19px;font-size:14px}
.btn--block{width:100%}

/* Arrow link — the arrow travels on hover. */
.alink{
  display:inline-flex;align-items:center;gap:9px;color:var(--signal);
  font-weight:600;font-size:15.5px;
}
.alink svg{width:15px;height:15px;transition:transform .28s var(--ease)}
.alink:hover svg{transform:translateX(5px)}
.sec--paper .alink{color:var(--signal-deep)}

/* Underline that grows from the left. */
.ulink{position:relative;color:var(--text);font-weight:500}
.ulink::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;
  background:var(--signal);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.ulink:hover::after{transform:scaleX(1)}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:200;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(7,13,12,.72);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid transparent;
  transition:height .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.nav.is-scrolled{height:58px;background:rgba(7,13,12,.93);border-bottom-color:var(--hair)}
.nav__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;gap:clamp(16px,2.5vw,36px);
}

/* Wordmark: one word, one colour. The lime is reserved for live/active state,
   so spending it on a letter of the logo dilutes the only accent we have. */
.brand{display:inline-flex;align-items:center;flex:none}
.brand__mark{
  font-size:23px;font-weight:700;letter-spacing:-.045em;color:var(--text);line-height:1;
}

.nav__links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav__links > a,.drop-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14.5px;font-weight:500;color:var(--text);
  padding:9px 13px;border-radius:var(--r-md);white-space:nowrap;
  transition:background .2s,color .2s;
}
.nav__links > a:hover,.drop-toggle:hover{background:rgba(233,241,238,.07)}
.nav__links > a.is-active{color:var(--signal)}
.drop-toggle svg{width:11px;height:11px;transition:transform .25s var(--ease);opacity:.6}

.has-drop{position:relative}
.has-drop:hover .drop-toggle{background:rgba(233,241,238,.07)}
.has-drop:hover .drop-toggle svg{transform:rotate(180deg)}
.drop__panel{
  position:absolute;top:calc(100% + 6px);left:50%;
  transform:translateX(-50%) translateY(7px);
  width:330px;padding:7px;
  background:#0d1918;border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transition:.22s var(--ease);
}
.has-drop:hover .drop__panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop__panel a{display:block;padding:11px 13px;border-radius:var(--r-md);transition:background .18s}
.drop__panel a:hover{background:var(--surface-2)}
.drop__panel b{display:block;color:var(--text);font-size:14.5px;font-weight:600;margin-bottom:2px}
.drop__panel span{display:block;color:var(--text-3);font-size:12.5px;line-height:1.4}

.nav__end{display:flex;align-items:center;gap:10px;flex:none}

/* Region (locale) switcher */
.region{position:relative}
.region__btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);
  padding:9px 12px;border:1px solid var(--hair);border-radius:var(--r-pill);
  transition:border-color .2s,color .2s;
}
.region__btn:hover{border-color:var(--hair-strong);color:var(--text)}
.region__btn svg{width:10px;height:10px;opacity:.6}
.region__panel{
  position:absolute;top:calc(100% + 6px);right:0;width:236px;padding:7px;
  background:#0d1918;border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(7px);transition:.22s var(--ease);
}
.region.open .region__panel{opacity:1;visibility:visible;transform:translateY(0)}
.region__item{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:10px 12px;border-radius:var(--r-md);transition:background .18s;
}
.region__item:hover{background:var(--surface-2)}
.region__item.is-current{background:var(--signal-wash)}
.region__item.is-current b{color:var(--signal)}
.region__item b{color:var(--text);font-size:14.5px;font-weight:500}
.region__item span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}

/* Burger + mobile sheet */
.burger{display:none;flex-direction:column;gap:5px;padding:9px;flex:none}
.burger span{width:21px;height:1.5px;background:var(--text);border-radius:2px;transition:.3s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.msheet{
  position:fixed;inset:0;z-index:190;background:rgba(7,13,12,.985);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:calc(var(--nav-h) + 22px) var(--gutter) 44px;
  display:flex;flex-direction:column;overflow-y:auto;
  transform:translateY(-14px);opacity:0;visibility:hidden;
  transition:.32s var(--ease);
}
.msheet.open{transform:none;opacity:1;visibility:visible}
.msheet a{
  font-size:26px;font-weight:600;color:var(--text);letter-spacing:-.03em;
  padding:17px 0;border-bottom:1px solid var(--hair-soft);
}
.msheet a.sub{font-size:18px;font-weight:500;color:var(--text-2);padding-left:16px}
.msheet__label{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3);padding:24px 0 6px;
}
.msheet .btn{margin-top:28px}
.msheet__regions{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.msheet__regions a{
  font-size:13px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--hair);border-radius:var(--r-pill);color:var(--text-2);
}
.msheet__regions a.is-current{border-color:var(--signal);color:var(--signal)}

@media (max-width:1080px){
  .nav__links,.nav__end .btn,.nav__end .region{display:none}
  .burger{display:flex;margin-left:auto}
}

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--pit)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__video{position:absolute;inset:0;z-index:2;opacity:1;transition:opacity 1.2s var(--ease)}
.hero__still{position:absolute;inset:0;z-index:1}
/* The source photography is lit bright; knock it back so white type and the
   lime eyebrow keep their contrast wherever the composition puts them. */
.hero__media img,.hero__media video{filter:brightness(.82) saturate(1.04)}
.hero__media.ended .hero__video{opacity:0;pointer-events:none}

/* Two-stop veil: dark at the bottom for the type, clear at the top so the
   robots stay visible behind the nav. */
.hero__veil{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,13,12,.82) 0%,rgba(7,13,12,.3) 26%,rgba(7,13,12,.1) 44%,rgba(7,13,12,.72) 78%,rgba(7,13,12,.97) 100%),
    linear-gradient(90deg,rgba(7,13,12,.62) 0%,rgba(7,13,12,.12) 62%,transparent 100%);
}
.hero__inner{position:relative;z-index:4;width:100%;padding-bottom:clamp(40px,6vw,74px)}
.hero__content{max-width:900px}
.hero .dsp{color:#fff}
.hero__lede{
  font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:#c8d8d3;
  max-width:54ch;margin-top:clamp(20px,2.2vw,28px);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3.4vw,40px)}

/* Instrument strip along the bottom of the hero. */
.hero__meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(38px,5vw,64px);
  border-top:1px solid var(--hair-strong);
}
.hero__meta div{padding:20px 26px 0 0}
.hero__meta dt{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:9px;
}
/* Kept modest: four columns of value text wrap badly if this grows, and the
   strip is supporting detail rather than a headline. */
.hero__meta dd{font-size:clamp(14px,1.1vw,16.5px);font-weight:600;color:#fff;letter-spacing:-.01em;line-height:1.35;text-wrap:balance}

.hero__scroll{
  position:absolute;z-index:4;right:var(--gutter);bottom:clamp(40px,6vw,74px);
  display:flex;flex-direction:column;align-items:center;gap:11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);writing-mode:vertical-rl;
}
.hero__scroll i{display:block;width:1px;height:52px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent)}

@media (max-width:860px){
  .hero{align-items:flex-end;min-height:92svh}
  .hero__meta{grid-template-columns:repeat(2,1fr)}
  .hero__meta div{padding:16px 14px 0 0}
  .hero__scroll{display:none}
  /* Narrow screens put the type over the middle of the frame rather than the
     dark left edge, so the veil has to carry the contrast on its own. */
  .hero__veil{
    background:linear-gradient(180deg,
      rgba(7,13,12,.86) 0%,
      rgba(7,13,12,.34) 17%,
      rgba(7,13,12,.66) 40%,
      rgba(7,13,12,.88) 68%,
      rgba(7,13,12,.97) 100%);
  }
}
@media (max-width:520px){
  .hero__meta{grid-template-columns:1fr 1fr;gap:0}
  .hero__lede{display:none}
}

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.phero{
  position:relative;overflow:hidden;background:var(--pit);
  padding:calc(var(--nav-h) + clamp(58px,8vw,116px)) 0 clamp(48px,7vw,96px);
}
.phero__media{position:absolute;inset:0;z-index:0}
.phero__media img{width:100%;height:100%;object-fit:cover}
.phero__veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(7,13,12,.9) 0%,rgba(7,13,12,.6) 48%,rgba(7,13,12,.92) 100%),
    linear-gradient(90deg,rgba(7,13,12,.8) 0%,rgba(7,13,12,.2) 75%,transparent 100%);
}
.phero__inner{position:relative;z-index:2}
.phero h1{color:#fff;max-width:20ch}
.phero .lede{color:#c8d8d3;margin-top:clamp(16px,2vw,24px);max-width:58ch}
.phero--plain{background:var(--pit)}

/* Breadcrumb */
.crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:22px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.45);
}
.crumb a:hover{color:var(--signal)}
.crumb span{opacity:.4}

/* ==========================================================================
   Ticker
   ========================================================================== */
.ticker{
  overflow:hidden;border-block:1px solid var(--hair);padding-block:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.ticker__track{display:flex;width:max-content;animation:marq 46s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{
  display:flex;align-items:center;gap:11px;flex:none;
  padding:17px clamp(20px,2.4vw,34px);
  border-right:1px solid var(--hair-soft);
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-2);white-space:nowrap;
}
.ticker__item i{width:4px;height:4px;border-radius:50%;background:var(--signal);flex:none}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Image marquee */
.reel{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.reel__track{display:flex;gap:14px;width:max-content;animation:marq 64s linear infinite}
.reel:hover .reel__track{animation-play-state:paused}
.reel figure{
  position:relative;margin:0;flex:none;
  width:clamp(250px,25vw,350px);aspect-ratio:16/10;
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
}
.reel figure img{width:100%;height:100%;object-fit:cover}
.reel figcaption{
  position:absolute;left:11px;bottom:11px;
  background:rgba(7,13,12,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--hair);color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border-radius:var(--r-pill);
}
@media (prefers-reduced-motion:reduce){
  .ticker__track,.reel__track{animation:none}
  .ticker,.reel{overflow-x:auto}
}

/* ==========================================================================
   Cards & surfaces
   ========================================================================== */
.card{
  position:relative;background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--r-lg);padding:clamp(24px,2.6vw,34px);
}
.card--pit{background:var(--pit)}
.card--bare{background:transparent}
.sec--paper .card{background:#fff;border-color:var(--hair-ink)}
.sec--paper .card--bare{background:transparent}
.card h3{margin-bottom:10px}
.card p{font-size:15.5px}

/* Crop-mark ticks in the top-left / bottom-right corners. */
.tick::before,.tick::after{
  content:"";position:absolute;width:8px;height:8px;pointer-events:none;
  border-color:var(--signal);
}
.tick::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.tick::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}

/* Image tile (sector / case cards) */
.tile{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);
  transition:border-color .3s var(--ease),transform .35s var(--ease);
}
.tile:hover{border-color:var(--hair-strong);transform:translateY(-3px)}
.tile__media{aspect-ratio:16/10;overflow:hidden;background:var(--pit);position:relative}
.tile__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.tile:hover .tile__media img{transform:scale(1.045)}
.tile__tag{
  position:absolute;top:13px;left:13px;z-index:2;
  background:rgba(7,13,12,.75);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  border:1px solid var(--hair);color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 11px;border-radius:var(--r-pill);
}
.tile__body{display:flex;flex-direction:column;flex:1;padding:clamp(22px,2.2vw,28px)}
.tile__body h3{margin-bottom:9px}
.tile__body p{font-size:15.5px;flex:1}
.tile__body .alink{margin-top:20px}
.sec--paper .tile{background:#fff;border-color:var(--hair-ink)}
.sec--paper .tile:hover{border-color:rgba(7,17,15,.28)}

/* ==========================================================================
   Data display
   ========================================================================== */
/* Big measured number */
.stat{padding-block:2px}
.stat__n{
  font-family:var(--mono);font-size:clamp(32px,4.2vw,54px);font-weight:500;
  letter-spacing:-.03em;line-height:1;color:var(--text);
}
.stat__n em{font-style:normal;color:var(--signal)}
.sec--paper .stat__n{color:var(--ink)}
.stat__t{margin-top:13px;font-size:15.5px;max-width:34ch}
.stat--hair{padding-top:24px;border-top:1px solid var(--hair)}
.sec--paper .stat--hair{border-top-color:var(--hair-ink)}

/* Some "stats" lead with a phrase rather than a figure ("Every pass",
   "No employment risk"). Monospace at display size is for numbers — a
   sentence set that way overflows its column and reads as a code listing,
   so phrases get the sans treatment at a calmer size. */
.stat--phrase .stat__n{
  font-family:var(--sans);
  font-size:clamp(21px,2.2vw,29px);
  font-weight:600;letter-spacing:-.03em;line-height:1.15;
}
.stat--phrase .stat__t{margin-top:10px}

/* Spec row with dotted leader — reads like a datasheet. */
.rows{display:grid}
.row{
  display:flex;align-items:baseline;gap:10px;
  padding:15px 0;border-bottom:1px solid var(--hair-soft);
}
.sec--paper .row{border-bottom-color:var(--hair-ink)}
.row__k{font-size:15px;color:var(--text-2);flex:none}
.sec--paper .row__k{color:var(--ink-2)}
.row__lead{flex:1;border-bottom:1px dotted var(--hair-strong);transform:translateY(-4px);min-width:18px}
.row__v{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--text);flex:none;text-align:right}
.sec--paper .row__v{color:var(--ink)}

/* Numbered step */
.step{padding-top:24px;border-top:1px solid var(--hair)}
.sec--paper .step{border-top-color:var(--hair-ink)}
.step__k{
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  color:var(--signal);margin-bottom:15px;
}
.sec--paper .step__k{color:var(--signal-deep)}
.step h3{font-size:20px;margin-bottom:9px}
.step p{font-size:15.5px}

/* Icon pillar */
.pillar__ico{
  width:40px;height:40px;border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--signal-wash);color:var(--signal);margin-bottom:18px;
}
.pillar__ico svg{width:20px;height:20px}
.sec--paper .pillar__ico{background:rgba(168,207,53,.18);color:var(--signal-deep)}
.pillar h3{font-size:19px;margin-bottom:9px}
.pillar p{font-size:15.5px}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);
  padding:8px 14px;border:1px solid var(--hair);border-radius:var(--r-pill);
}
.chip--signal{border-color:rgba(201,242,77,.4);color:var(--signal)}
.sec--paper .chip{border-color:var(--hair-ink);color:var(--ink-2)}

/* Checklist */
.checklist{display:grid;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.checklist svg{width:19px;height:19px;flex:none;color:var(--signal);margin-top:3px}
.sec--paper .checklist svg{color:var(--signal-deep)}

/* Compare panels */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.compare__col{padding:clamp(26px,3vw,38px);border:1px solid var(--hair);border-radius:var(--r-lg)}
.compare__col.is-before{background:transparent}
.compare__col.is-after{background:var(--surface);border-color:rgba(201,242,77,.32);position:relative}
.sec--paper .compare__col{border-color:var(--hair-ink)}
.sec--paper .compare__col.is-after{background:#fff;border-color:rgba(168,207,53,.55)}
.compare__tag{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:16px;
}
.compare__col.is-after .compare__tag{color:var(--signal)}
.sec--paper .compare__col.is-after .compare__tag{color:var(--signal-deep)}
.compare__fig{
  font-family:var(--mono);font-size:clamp(26px,3.4vw,42px);font-weight:500;
  letter-spacing:-.03em;line-height:1.05;color:var(--text);
}
.sec--paper .compare__fig{color:var(--ink)}
.compare__fig small{font-size:.42em;font-weight:500;letter-spacing:0;color:var(--text-3)}
.compare__sub{margin-top:12px;font-size:15px}

/* ── Fleet category card ───────────────────────────────────────────────── */
.fleetcard{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(24px,2.6vw,32px);
  border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--surface);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.fleetcard:hover{border-color:rgba(201,242,77,.34);background:var(--surface-2)}
.fleetcard__status{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);
  padding:6px 11px;border:1px solid var(--hair);border-radius:var(--r-pill);
  margin-bottom:22px;
}
.fleetcard__status--live{color:var(--signal);border-color:rgba(201,242,77,.34)}
.fleetcard h3{margin-bottom:10px}
.fleetcard p{font-size:15.5px}
.fleetcard__shot{
  /* flex:none is load-bearing. The card is a flex column, and a flex item's
     main size comes from flex-basis:auto → content — which is now zero because
     the render is absolutely positioned (see "Contained product renders").
     Without this the box collapses and aspect-ratio never resolves. */
  flex:none;
  display:flex;align-items:flex-end;justify-content:center;
  aspect-ratio:16/10;margin:-6px 0 20px;
  background:radial-gradient(58% 42% at 50% 88%,rgba(201,242,77,.1) 0%,transparent 72%);
}
.fleetcard__shot > img{
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.5));
  transition:transform .5s var(--ease);
}
.fleetcard:hover .fleetcard__shot > img{transform:translateY(-4px)}
/* Pilot classes without a render of their own class — see _data/fleetClasses.js.
   A stated placeholder beats borrowing a photo of a different machine. */
.fleetcard__shot--pending{
  background:none;border:1px dashed var(--hair);border-radius:var(--r-md);
  align-items:center;padding:20px;text-align:center;
}
.fleetcard__shot--pending span{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3);line-height:1.6;max-width:22ch;
}
.fleetcard__list{display:grid;gap:8px;margin-top:20px;padding-top:20px;border-top:1px solid var(--hair-soft)}
.fleetcard__list li{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-2);
  display:flex;gap:9px;align-items:baseline;
}
.fleetcard__list li::before{content:"—";color:var(--text-3);flex:none}

/* ── Contained product renders ─────────────────────────────────────────────
   Every render box sizes itself with `aspect-ratio` so a row stays uniform.
   An in-flow image defeats that: `aspect-ratio` is only a *preferred* size and
   a tall image grows the box (a 451x654 humanoid stretched its cell to 507px
   while its neighbours stayed at 208px). Taking the image out of flow makes the
   declared ratio authoritative, and `object-fit:contain` still scales it to fit.
   ========================================================================== */
.lineup__shot,
.fleetcard__shot,
.caserow__shot,
.uchero__figure,
.ucshot{position:relative}
.lineup__shot > img,
.fleetcard__shot > img,
.caserow__shot > img,
.uchero__figure > img,
.ucshot > img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;
}

/* ── Machine lineup ────────────────────────────────────────────────────────
   Transparent product renders on the dark canvas. No card, no border: the
   silhouette is the graphic, and a frame around a cut-out render just makes
   it look pasted in. Captions describe the job, never the model. */
.lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.lineup__item{
  display:flex;flex-direction:column;
  padding-top:22px;border-top:1px solid var(--hair);
}
.sec--paper .lineup__item{border-top-color:var(--hair-ink)}
.lineup__shot{
  order:-1;display:flex;align-items:flex-end;justify-content:center;
  aspect-ratio:4/3;margin-bottom:20px;
  /* Pool of light under the machine, so a floating cut-out reads as grounded. */
  background:radial-gradient(58% 44% at 50% 88%,rgba(201,242,77,.09) 0%,transparent 70%);
}
.lineup__shot img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.55));
  transition:transform .5s var(--ease);
}
/* Humanoids and legged platforms are tall subjects. In the 4:3 box used for
   the (mostly wide) floor-care renders, `contain` scales them by height and
   they end up visually tiny next to a scrubber. A square box gives them
   comparable presence. */
.lineup--pilot .lineup__shot{aspect-ratio:1/1}
.lineup__item:hover .lineup__shot img{transform:translateY(-5px) scale(1.02)}
.lineup__name{font-size:16.5px;font-weight:600;color:var(--text);letter-spacing:-.02em}
.sec--paper .lineup__name{color:var(--ink)}
.lineup__spec{
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;
  color:var(--text-3);margin-top:7px;
}
@media (max-width:900px){.lineup{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.lineup{grid-template-columns:1fr}}

/* ── Environment explorer ──────────────────────────────────────────────────
   Pick a space, see the machine. Without JS every panel renders stacked and
   readable; the `.js-tabs` class (set by lab.js once it runs) is what collapses
   them to one at a time. Content must never depend on the script. */
.explorer{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,8fr);gap:clamp(24px,3.4vw,52px);align-items:start}
@media (max-width:900px){.explorer{grid-template-columns:1fr}}

.exlist{display:flex;flex-wrap:wrap;gap:8px}
@media (min-width:901px){.exlist{flex-direction:column;flex-wrap:nowrap;gap:1px}}
.extab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;
  padding:13px 15px;border:1px solid var(--hair);border-radius:var(--r-md);
  font-size:15.5px;font-weight:500;color:var(--text-2);
  transition:border-color .2s,color .2s,background .2s;
}
@media (min-width:901px){
  .extab{border:0;border-bottom:1px solid var(--hair-soft);border-radius:0;padding-inline:2px}
}
.extab:hover{color:var(--text)}
.extab__k{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);flex:none;
}
.extab[aria-selected="true"]{color:var(--signal);border-color:rgba(201,242,77,.4)}
.extab[aria-selected="true"] .extab__k{color:var(--signal)}
@media (min-width:901px){
  .extab[aria-selected="true"]{border-bottom-color:var(--signal)}
}

.expanel{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(20px,3vw,40px);align-items:center;
  padding:clamp(20px,2.6vw,32px);
  border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--surface);
}
/* Only one panel at a time once the script is running. */
.js-tabs .expanel[hidden]{display:none}
.expanel + .expanel{margin-top:16px}
.js-tabs .expanel + .expanel{margin-top:0}
/* A photograph of the floor, not a cut-out of the machine — so `cover` into a
   clipped frame, and none of the drop-shadow/glow treatment the transparent
   renders need to look grounded. */
.expanel__shot{
  position:relative;aspect-ratio:4/3;
  border-radius:var(--r-md);overflow:hidden;background:var(--pit);
}
.expanel__shot > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.expanel__body h3{font-size:clamp(21px,2.3vw,29px);letter-spacing:-.03em}
.expanel__body p{font-size:16px;margin-top:11px}
@media (max-width:620px){.expanel{grid-template-columns:1fr}}

/* ── Fleet calculator ──────────────────────────────────────────────────────
   Range inputs work without JS but the readout does not, so the markup ships
   with the default answer already rendered; the script only updates it. */
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:900px){.calc{grid-template-columns:1fr;gap:32px}}

.calc__control + .calc__control{margin-top:clamp(24px,3vw,34px)}
.calc__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.calc__label{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-2);
}
.calc__value{font-family:var(--mono);font-size:clamp(17px,1.8vw,21px);font-weight:500;color:var(--signal)}

/* Range track. Styled per-engine; the shared bit is a hairline track and a
   lime thumb big enough to hit on a phone. */
.calc input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;
  background:transparent;cursor:pointer;
}
.calc input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:var(--hair-strong);border-radius:2px;
}
.calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;margin-top:-10px;border-radius:50%;
  background:var(--signal);border:0;
  box-shadow:0 0 0 6px rgba(201,242,77,.14);
}
.calc input[type=range]::-moz-range-track{height:2px;background:var(--hair-strong);border-radius:2px}
.calc input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--signal);border:0;
  box-shadow:0 0 0 6px rgba(201,242,77,.14);
}
.calc input[type=range]:focus-visible{outline:none}
.calc input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--void),0 0 0 6px var(--signal)}
.calc input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--void),0 0 0 6px var(--signal)}

.calc__out{
  border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);background:var(--surface);position:relative;
}
.calc__big{display:flex;align-items:baseline;gap:14px}
.calc__big b{
  font-family:var(--mono);font-size:clamp(52px,8vw,92px);font-weight:500;
  letter-spacing:-.04em;line-height:.9;color:var(--signal);
}
.calc__big span{font-size:clamp(16px,1.6vw,19px);color:var(--text);max-width:9ch;line-height:1.25}

/* ── Labour-cost facts ─────────────────────────────────────────────────────
   Sourced, so it reads as evidence rather than a sales pitch. */
.truth{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px)}
@media (max-width:760px){.truth{grid-template-columns:1fr}}
.truthcard{
  padding:clamp(22px,2.6vw,30px);
  border-top:2px solid rgba(201,242,77,.4);background:var(--surface);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.sec--paper .truthcard{background:#fff;border-top-color:rgba(168,207,53,.65)}
.truthcard h3{font-size:clamp(18px,1.9vw,22px);margin-bottom:10px}
.truthcard p{font-size:15.5px}

.counter{
  padding:clamp(26px,3.4vw,44px);
  border:1px solid rgba(201,242,77,.3);border-radius:var(--r-lg);
  background:
    radial-gradient(110% 130% at 8% 0%,rgba(201,242,77,.1) 0%,transparent 58%),
    var(--surface);
}
.counter h2{font-size:clamp(23px,2.9vw,38px);max-width:30ch}
.counter ul{display:grid;gap:12px;margin-top:clamp(20px,2.4vw,28px)}
.counter li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;color:var(--text)}
.counter li svg{width:18px;height:18px;flex:none;color:var(--signal);margin-top:4px}

/* ── Use-case index rows ───────────────────────────────────────────────────
   A numbered ladder rather than a card grid: the set is ordered by floor size,
   and rows make that sequence legible in a way tiles do not. */
.caselist{display:grid}
.caserow{
  display:grid;
  grid-template-columns:auto minmax(0,4fr) minmax(0,7fr);
  gap:clamp(18px,3vw,44px);align-items:center;
  padding-block:clamp(26px,3.4vw,44px);
  border-top:1px solid var(--hair);
  transition:background .3s var(--ease);
}
.caserow:last-child{border-bottom:1px solid var(--hair)}
.caserow:hover{background:rgba(233,241,238,.022)}
.caserow__n{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
  color:var(--text-3);align-self:start;padding-top:6px;
}
.caserow:hover .caserow__n{color:var(--signal)}
.caserow__shot{
  display:flex;align-items:flex-end;justify-content:center;
  aspect-ratio:4/3;
  background:radial-gradient(56% 40% at 50% 88%,rgba(201,242,77,.09) 0%,transparent 72%);
}
.caserow__shot img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.5));
  transition:transform .5s var(--ease);
}
.caserow:hover .caserow__shot img{transform:translateY(-5px) scale(1.02)}
.caserow__body{display:flex;flex-direction:column;align-items:flex-start}
.caserow__scale{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--signal);margin-bottom:12px;
}
.caserow__h{
  font-size:clamp(21px,2.3vw,31px);font-weight:600;letter-spacing:-.032em;
  line-height:1.1;color:var(--text);
}
.caserow__p{font-size:16px;color:var(--text-2);margin-top:12px;max-width:56ch}
.caserow .alink{margin-top:18px}
@media (max-width:820px){
  .caserow{grid-template-columns:auto minmax(0,1fr);row-gap:16px}
  .caserow__shot{grid-column:2;aspect-ratio:16/10}
  .caserow__body{grid-column:2}
}

/* ── Use-case detail hero ──────────────────────────────────────────────────
   The cut-out render is the subject, so it sits directly on the page rather
   than inside a frame. */
.uchero{
  position:relative;overflow:hidden;background:var(--void);
  padding:calc(var(--nav-h) + clamp(44px,6vw,86px)) 0 clamp(40px,5vw,72px);
  border-bottom:1px solid var(--hair);
}
.uchero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 78% 55%,rgba(201,242,77,.09) 0%,transparent 68%);
}
.uchero__inner{
  position:relative;display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.uchero__body h1{font-size:clamp(31px,4.4vw,60px);letter-spacing:-.04em;margin-top:6px}
.uchero__body .lede{margin-top:clamp(16px,2vw,24px);max-width:52ch}
.uchero__scale{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);
}
.uchero__figure{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1}
.uchero__figure img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.66));
}
/* Photograph variant: the hero is now the building, not the machine. A photo
   needs the opposite treatment to a cut-out — crop it into a clipped frame and
   drop the shadow, which only exists to ground a floating transparent render.
   The mobile 16/11 override below deliberately still applies. */
.uchero__figure--photo{
  aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--pit);
}
.uchero__figure--photo img{object-fit:cover;filter:none}
@media (max-width:860px){
  .uchero__inner{grid-template-columns:1fr;gap:24px}
  .uchero__figure{order:-1;aspect-ratio:16/11}
}

/* Product render placed directly on a section, no frame. Defaults to the dark
   canvas treatment (lime pool, deep shadow); `--light` re-tunes both for the
   paper sections, where a lime glow and a black shadow both look wrong. */
.ucshot{
  display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  background:radial-gradient(58% 44% at 50% 84%,rgba(201,242,77,.1) 0%,transparent 72%);
}
.ucshot img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.6));
}
.ucshot--light{background:radial-gradient(58% 46% at 50% 82%,rgba(7,17,15,.07) 0%,transparent 70%)}
.ucshot--light img{filter:drop-shadow(0 22px 30px rgba(7,17,15,.22))}
@media (max-width:900px){.ucshot{aspect-ratio:16/11}}

/* Coverage arithmetic — the one paragraph a buyer re-reads. */
.ucmaths{
  font-size:clamp(19px,2.3vw,30px);line-height:1.42;letter-spacing:-.024em;
  color:var(--text);margin-top:clamp(16px,2vw,24px);
}
.sec--paper .ucmaths{color:var(--ink)}

/* Prev / next */
.ucnav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,24px)}
.ucnav__link{
  display:flex;flex-direction:column;gap:8px;
  padding:clamp(20px,2.6vw,30px);
  border:1px solid var(--hair);border-radius:var(--r-lg);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.ucnav__link:hover{border-color:rgba(201,242,77,.34);background:var(--surface)}
.ucnav__link--next{text-align:right}
.ucnav__label{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);
}
.ucnav__h{font-size:clamp(17px,1.8vw,22px);font-weight:600;letter-spacing:-.025em;color:var(--text)}
.ucnav__link:hover .ucnav__h{color:var(--signal)}
@media (max-width:620px){
  .ucnav{grid-template-columns:1fr}
  .ucnav__link--next{text-align:left}
}

/* Three-up variant of the lineup, for "also on site". */
.lineup--3{grid-template-columns:repeat(3,1fr)}
.lineup--3 .lineup__item{border-top:0;padding-top:0}
@media (max-width:620px){.lineup--3{grid-template-columns:1fr}}

/* Quote / testimonial */
.quote{border-left:2px solid var(--signal);padding-left:clamp(20px,2.6vw,32px)}
.quote p{font-size:clamp(19px,2.2vw,27px);line-height:1.4;color:var(--text);letter-spacing:-.02em}
.sec--paper .quote p{color:var(--ink)}
.quote footer{
  margin-top:20px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-3);
}

/* Media frame */
.frame{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--hair);
}
.frame img,.frame video{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.frame--wide img,.frame--wide video{aspect-ratio:16/9}
.frame--square img,.frame--square video{aspect-ratio:1/1}
.frame--contain{display:flex;align-items:center;justify-content:center;padding:7%;background:var(--pit)}
.frame--contain img{aspect-ratio:auto;object-fit:contain;max-height:400px}
.sec--paper .frame{border-color:var(--hair-ink);background:var(--paper-2)}

/* Video tile with caption */
.vtile{margin:0;overflow:hidden;border:1px solid var(--hair);border-radius:var(--r-lg);background:var(--pit)}
.vtile video{width:100%;aspect-ratio:1/1;object-fit:cover}
.vtile figcaption{padding:17px 19px}
.vtile figcaption b{display:block;color:var(--text);font-size:15.5px;font-weight:600;margin-bottom:4px}
.vtile figcaption span{font-size:14px;color:var(--text-3)}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta{
  position:relative;overflow:hidden;border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:clamp(38px,6vw,84px) clamp(26px,4vw,64px);
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(201,242,77,.11) 0%,transparent 55%),
    var(--surface);
  text-align:center;
}
.cta h2{max-width:24ch;margin-inline:auto}
.cta .lede{max-width:52ch;margin:clamp(16px,2vw,22px) auto 0}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(26px,3vw,36px)}

/* ==========================================================================
   Forms
   ========================================================================== */
.form{display:grid;gap:18px}
.form--two{grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:8px}
.field--full{grid-column:1/-1}
.field label{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);
}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:16px;color:var(--text);
  background:var(--pit);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:14px 15px;width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-wash);
}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb2ac' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px;
  padding-right:40px;
}
.field textarea{min-height:130px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--text-3);grid-column:1/-1}
.consent input{width:17px;height:17px;margin-top:3px;flex:none;accent-color:var(--signal)}
.consent a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--pit);border-top:1px solid var(--hair);padding:clamp(56px,7vw,88px) 0 36px}
.footer__grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,48px);
  padding-bottom:clamp(36px,4vw,56px);border-bottom:1px solid var(--hair);
}
.footer__tag{color:var(--text-3);font-size:15px;max-width:32ch;margin-top:18px}
.footer__col h4{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);margin-bottom:18px;
}
.footer__col a,.footer__col p{display:block;color:var(--text-2);font-size:15px;margin-bottom:11px;transition:color .2s}
.footer__col a:hover{color:var(--signal)}
.footer__base{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:28px;font-size:13px;color:var(--text-3);
}
.footer__base nav{display:flex;gap:18px;flex-wrap:wrap}
.footer__regions{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.footer__regions a{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:7px 12px;margin:0;
  border:1px solid var(--hair);border-radius:var(--r-pill);color:var(--text-3);
}
.footer__regions a.is-current{border-color:var(--signal);color:var(--signal)}

/* ==========================================================================
   Reveal on scroll

   Deliberately gated behind .js-reveal, which an inline script in <head> sets
   before first paint. If that script or lab.js never runs, `.rv` keeps its
   default styling and the page renders in full — content must never depend on
   JavaScript to become visible.
   ========================================================================== */
.js-reveal .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js-reveal .rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.07s}
.rv[data-d="2"]{transition-delay:.14s}
.rv[data-d="3"]{transition-delay:.21s}
.rv[data-d="4"]{transition-delay:.28s}
.rv[data-d="5"]{transition-delay:.35s}
.rv[data-d="6"]{transition-delay:.42s}
@media (prefers-reduced-motion:reduce){
  .js-reveal .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.mb-1{margin-bottom:12px}
.mb-2{margin-bottom:20px}
.mb-m{margin-bottom:32px}
.mb-l{margin-bottom:clamp(38px,4.4vw,56px)}
.mt-1{margin-top:12px}
.mt-2{margin-top:20px}
.mt-3{margin-top:32px}
.mt-4{margin-top:clamp(38px,4.4vw,56px)}
.mt-5{margin-top:clamp(52px,6.5vw,84px)}
.hide-sm{display:initial}
.hide-lg{display:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .split,.split--rev{grid-template-columns:1fr;gap:clamp(28px,4vw,40px)}
  .split--rev .split__media{order:0}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .compare{grid-template-columns:1fr}
  .partner{grid-template-columns:1fr;gap:20px}
  .form--two{grid-template-columns:1fr}
  .hide-sm{display:none}
  .hide-lg{display:initial}
}
@media (max-width:620px){
  body{font-size:16px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:32px}
  .footer__base{justify-content:flex-start}
  .cta{padding-inline:22px}
}