/* ==========================================================================
   LAB — product-led design system

   Replaces the "Fleet Operations" system in lab.css. That one was built to
   read as instrumentation: dark canvas, mono microtype, numbered section
   indices, dotted-leader spec rows everywhere. Those four things together are
   what made every page read as a pitch deck rather than a site you buy from.

   What changes here:
     · Light by default. Dark is now a *section* treatment reserved for
       product and video, where it genuinely helps the subject.
     · Type carries the page. Display sizes are large and tight; there is no
       decorative chrome standing in for hierarchy.
     · Dotted leaders survive only inside real specification tables, where a
       leader does an actual job. They are no longer a page motif.
     · Section indices ("01 / THE PROBLEM") are gone entirely.

   Self-contained on purpose. Pages migrate one at a time and load either this
   or lab.css, never both, so no page is ever half-converted. When the last
   template moves over, lab.css is deleted and this is renamed.
   ========================================================================== */

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

:root{
  /* --- Canvas -----------------------------------------------------------
     Two greys, not five. Alternating white and a single warm-neutral tint is
     what gives a long marketing page rhythm without drawing borders. */
  --bg:#ffffff;
  --bg-2:#f5f5f7;
  --bg-3:#ebebef;

  /* Dark sections — product and video only. */
  --dark:#0b100f;
  --dark-2:#141b1a;

  /* --- Ink --------------------------------------------------------------- */
  --ink:#12181a;           /* headings, primary copy */
  --ink-2:#5c6b6e;         /* secondary copy, ledes */
  --ink-3:#8b979a;         /* captions, meta */
  --hair:rgba(18,24,26,.12);
  --hair-soft:rgba(18,24,26,.07);

  /* On dark sections. */
  --dtext:#f2f6f5;
  --dtext-2:#a9b8b5;
  --dtext-3:#71827f;
  --dhair:rgba(226,255,246,.14);

  /* --- Signal ------------------------------------------------------------
     The lime is the brand and it stays, but its job narrows. On light it is
     a filled button with near-black text (lime is bright enough that this
     clears AA comfortably) and a live-status dot. It is no longer sprayed
     across labels, rules and indices. */
  --signal:#c9f24d;
  --signal-deep:#b2db34;
  --signal-ink:#0d1400;
  --signal-wash:rgba(201,242,77,.16);

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

  /* --- Geometry ----------------------------------------------------------
     Soft, not engineered. The old 3px radius was part of the instrument
     metaphor; product marketing wants the opposite. */
  --maxw:1220px;
  --maxw-wide:1440px;
  --gutter:clamp(22px,5vw,40px);
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:980px;
  --nav-h:60px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow:0 2px 8px rgba(18,24,26,.05),0 12px 32px rgba(18,24,26,.06);
  --shadow-lift:0 4px 14px rgba(18,24,26,.08),0 20px 48px rgba(18,24,26,.10);
}

/* ==========================================================================
   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(--bg);
  color:var(--ink-2);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}

/* The `hidden` attribute has to outrank author `display` declarations.
   `[hidden]{display:none}` lives in the UA stylesheet, and *any* author rule
   setting display beats it — so `.expanel{display:grid}` quietly re-showed
   all twelve explorer panels as 314px of blank page each, which is what a
   3,766px-tall explorer and an empty-looking home page turned out to be.
   This is the one place !important is the correct tool: `hidden` is a
   statement about the element existing, not about how it lays out. */
[hidden]{display:none!important}
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(--ink);outline-offset:3px;border-radius:4px}
::selection{background:var(--signal);color:var(--signal-ink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   Type scale

   Sizes are fluid between a phone and a large desktop. Tracking tightens as
   size grows — the single thing that most separates a display face set well
   from one set at default metrics.
   ========================================================================== */
h1,h2,h3,h4{color:var(--ink);font-weight:600;line-height:1.08;letter-spacing:-.022em}

.dsp{font-size:clamp(40px,6.6vw,76px);line-height:1.04;letter-spacing:-.032em;font-weight:600}
h1{font-size:clamp(34px,5.2vw,60px)}
h2{font-size:clamp(28px,3.9vw,46px);line-height:1.1}
h3{font-size:clamp(20px,1.9vw,25px);line-height:1.22;letter-spacing:-.014em}
h4{font-size:17px;line-height:1.3;letter-spacing:-.008em}

.lede{font-size:clamp(18px,1.65vw,22px);line-height:1.5;color:var(--ink-2);letter-spacing:-.011em}
.lede--lg{font-size:clamp(20px,2vw,26px);line-height:1.4}
.small{font-size:15px;line-height:1.55}
.tiny{font-size:13.5px;line-height:1.5}
.measure{max-width:64ch}
.measure--tight{max-width:52ch}
.balance{text-wrap:balance}
.dim{color:var(--ink-2)}
.dimmer{color:var(--ink-3)}
.center{text-align:center}
.center .lede,.center .measure{margin-inline:auto}

/* Eyebrow above a heading. Replaces the numbered index — it names the
   subject rather than counting sections, which is the difference between a
   website and a slide deck. */
.eyebrow{
  font-size:14.5px;font-weight:600;letter-spacing:-.006em;
  color:var(--signal-deep);margin-bottom:10px;
}
.eyebrow--quiet{color:var(--ink-3);font-weight:500}

.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mt-4{margin-top:40px}.mt-5{margin-top:64px}

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

.sec{position:relative;padding-block:clamp(72px,9vw,132px)}
.sec--tight{padding-block:clamp(48px,6vw,84px)}
.sec--flush-top{padding-top:0}
.sec--flush-bottom{padding-bottom:0}
.sec--tint{background:var(--bg-2)}

/* Dark section. Scoped inversion — everything inside flips, so a section can
   be made dark by adding one class rather than by overriding each child. */
.sec--dark{background:var(--dark);color:var(--dtext-2)}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4{color:var(--dtext)}
.sec--dark .lede{color:var(--dtext-2)}
.sec--dark .dim{color:var(--dtext-2)}
.sec--dark .dimmer{color:var(--dtext-3)}
.sec--dark .eyebrow{color:var(--signal)}
.sec--dark .eyebrow--quiet{color:var(--dtext-3)}
.sec--dark .card{background:var(--dark-2);border-color:var(--dhair)}
.sec--dark .rows{border-color:var(--dhair)}
.sec--dark .row{border-color:var(--dhair)}
.sec--dark .row__k{color:var(--dtext-3)}
.sec--dark .row__v{color:var(--dtext)}
.sec--dark .alink{color:var(--signal)}
.sec--dark :focus-visible{outline-color:var(--signal)}

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

/* Two-column text + media. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split--top{align-items:start}
.split--rev>*:first-child{order:2}
.split__media{border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2)}
.split__media img,.split__media video{width:100%;height:100%;object-fit:cover}

@media (max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:32px}
  .split--rev>*:first-child{order:0}
}
@media (max-width:620px){
  .g2,.g3,.g4{grid-template-columns:1fr}
}

/* ==========================================================================
   Buttons — pill, filled or bordered. One shape, three weights.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:500;font-size:16px;letter-spacing:-.008em;
  padding:12px 22px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .12s var(--ease);
  min-height:44px;                       /* touch target floor */
}
.btn:active{transform:scale(.985)}
.btn svg{width:17px;height:17px;flex:none}

.btn--signal{background:var(--signal);color:var(--signal-ink);font-weight:600}
.btn--signal:hover{background:var(--signal-deep)}

.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:#000}

.btn--outline{border-color:var(--hair);color:var(--ink)}
.btn--outline:hover{border-color:var(--ink);background:var(--bg-2)}

.btn--quiet{color:var(--ink-2)}
.btn--quiet:hover{background:var(--bg-2);color:var(--ink)}

.btn--lg{font-size:17px;padding:15px 30px;min-height:50px}
.btn--sm{font-size:15px;padding:9px 18px;min-height:40px}
.btn--block{display:flex;width:100%}
.btn--pill{border-radius:var(--r-pill)}

.sec--dark .btn--outline{border-color:var(--dhair);color:var(--dtext)}
.sec--dark .btn--outline:hover{border-color:var(--dtext);background:rgba(255,255,255,.06)}

/* Inline arrow link — Apple's blue chevron link, in LAB's colour. */
.alink{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--signal-deep);font-weight:500;
  min-height:34px;
}
.alink:hover{text-decoration:underline;text-underline-offset:3px}
.alink svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.alink:hover svg{transform:translateX(3px)}

/* ==========================================================================
   Header

   Translucent, condenses on scroll, and carries no region control — the
   country chooser lives in the footer (see partials/region.njk).
   ========================================================================== */
.nav{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.nav.is-scrolled{border-bottom-color:var(--hair)}

/* Over a full-bleed dark hero the bar is transparent with light type, and
   only becomes the blurred white bar once scrolled past it. A light bar
   pinned over a dark hero reads as a strip laid on top of the page rather
   than part of it — the one detail that most gives away a full-bleed hero.
   `has-dark-hero` is set on <body> by templates whose first element is the
   dark `.hero`; pages leading with a light `.phero` never get it. */
.has-dark-hero .nav:not(.is-scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.has-dark-hero .nav:not(.is-scrolled) .brand__mark{color:#fff}
.has-dark-hero .nav:not(.is-scrolled) .nav__links>a,
.has-dark-hero .nav:not(.is-scrolled) .drop-toggle{color:rgba(255,255,255,.8)}
.has-dark-hero .nav:not(.is-scrolled) .nav__links>a:hover,
.has-dark-hero .nav:not(.is-scrolled) .drop-toggle:hover{color:#fff;background:rgba(255,255,255,.12)}
.has-dark-hero .nav:not(.is-scrolled) .nav__links>a.is-active{color:#fff}
.has-dark-hero .nav:not(.is-scrolled) .burger span{background:#fff}
.has-dark-hero .nav:not(.is-scrolled) :focus-visible{outline-color:#fff}
.nav__inner{
  max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--gutter);
  height:100%;display:flex;align-items:center;gap:28px;
}
.brand{display:flex;align-items:center;flex:none}
.brand__mark{
  font-weight:700;font-size:21px;letter-spacing:.02em;color:var(--ink);
}
.nav__links{display:flex;align-items:center;gap:4px;margin-inline:auto}
.nav__links>a,.drop-toggle{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 13px;border-radius:var(--r-pill);
  font-size:15px;color:var(--ink-2);
  transition:color .18s var(--ease),background .18s var(--ease);
}
.nav__links>a:hover,.drop-toggle:hover{color:var(--ink);background:var(--bg-2)}
.nav__links>a.is-active{color:var(--ink);font-weight:500}
.drop-toggle svg{width:13px;height:13px;opacity:.55}
.nav__end{display:flex;align-items:center;gap:10px;flex:none}

/* Solutions mega-menu. Hover on pointer devices, click-safe via :focus-within
   so a keyboard or touch user can also open it. */
.has-drop{position:relative}
.drop__panel{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:560px;padding:14px;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-md);
  box-shadow:var(--shadow-lift);
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  opacity:0;visibility:hidden;transition:all .2s var(--ease);
}
.has-drop:hover .drop__panel,.has-drop:focus-within .drop__panel{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.drop__panel a{
  display:flex;flex-direction:column;gap:1px;
  padding:10px 12px;border-radius:var(--r-sm);
}
.drop__panel a:hover{background:var(--bg-2)}
.drop__panel b{color:var(--ink);font-weight:500;font-size:15px}
.drop__panel span{color:var(--ink-3);font-size:13px}

/* Twelve places plus the index. Three columns keeps the panel under about
   400px tall, which is the point past which a dropdown stops being scannable
   and starts being a page. */
.drop__panel--wide{grid-template-columns:repeat(3,1fr);min-width:680px}
.drop__all{grid-column:1/-1;margin-top:6px;padding-top:12px;border-top:1px solid var(--hair)}
.drop__all b{color:var(--signal-deep)}

.burger{
  display:none;width:44px;height:44px;margin-left:auto;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}
.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)}

/* Mobile sheet */
.msheet{
  position:fixed;inset:var(--nav-h) 0 0;z-index:99;
  background:#fff;padding:22px var(--gutter) 40px;
  display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:all .25s var(--ease);
}
.msheet.open{transform:none;opacity:1;visibility:visible}
.msheet>a{
  display:flex;align-items:center;min-height:50px;
  font-size:19px;color:var(--ink);border-bottom:1px solid var(--hair-soft);
}
.msheet>a.sub{font-size:16px;color:var(--ink-2);padding-left:14px;min-height:46px}
.msheet__label{
  font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-top:22px;margin-bottom:4px;
}
.msheet .btn{margin-top:22px}

@media (max-width:1080px){
  .nav__links,.nav__end{display:none}
  .burger{display:flex}
}

/* No offset on <main> for the fixed header, deliberately.
   Both hero types pad themselves past it (.hero because its media runs full
   bleed *under* the nav, .phero with plain top padding), so padding <main>
   as well would double it on every page. The invariant this depends on:
   every page template's first element is a .hero or a .phero. */

/* ==========================================================================
   Country suggestion banner

   Starts `hidden`; only ever revealed by script. Sits directly under the nav
   rather than floating over content, so it never covers what the visitor
   came for.
   ========================================================================== */
.geo{
  position:sticky;top:var(--nav-h);z-index:90;
  background:var(--bg-2);border-bottom:1px solid var(--hair);
}
.geo[hidden]{display:none}
.geo__inner{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-block:12px;
}
.geo__text{display:flex;flex-direction:column;gap:1px;margin-right:auto}
.geo__text b{color:var(--ink);font-weight:600;font-size:15.5px}
.geo__text span{color:var(--ink-2);font-size:14px}
.geo__actions{display:flex;align-items:center;gap:8px;flex:none}

@media (max-width:560px){
  .geo__inner{gap:12px}
  .geo__actions{width:100%}
  .geo__actions .btn{flex:1}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;min-height:min(92vh,860px);
  display:flex;align-items:flex-end;
  padding-top:calc(var(--nav-h) + 40px);padding-bottom:clamp(48px,7vw,88px);
  background:var(--dark);color:var(--dtext-2);overflow:hidden;
}
.hero__media{position:absolute;inset:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__video{position:absolute;inset:0;opacity:1;transition:opacity 1s var(--ease)}
.hero__media.ended .hero__video{opacity:0}
/* Two scrims, not one. The vertical gradient alone left white type sitting on
   a brightly lit supermarket floor in the middle of the frame — legible in a
   screenshot, marginal in daylight on a laptop. The horizontal pass darkens
   the left third where the copy actually is, and fades out before the machine
   so the subject of the shot stays the subject. */
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(11,16,15,.88) 0%,rgba(11,16,15,.66) 38%,rgba(11,16,15,.2) 68%,rgba(11,16,15,0) 100%),
    linear-gradient(180deg,rgba(11,16,15,.62) 0%,rgba(11,16,15,.16) 34%,rgba(11,16,15,.85) 100%);
}
.hero__inner{position:relative}
.hero__content{max-width:760px}
.hero .dsp{color:#fff}
.hero__lede{
  font-size:clamp(18px,1.8vw,23px);line-height:1.45;color:var(--dtext);
  max-width:56ch;margin-top:18px;letter-spacing:-.011em;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero__actions .btn--outline{border-color:rgba(255,255,255,.34);color:#fff}
.hero__actions .btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}
/* Row and column gaps set separately. A single `gap` puts the full column
   spacing between wrapped rows too, which left a stranded third stat sitting
   under 56px of nothing. Editions carry different numbers of these — three
   globally, four for Ireland — so the block has to wrap gracefully at any
   count rather than be tuned to one. */
.hero__meta{
  display:flex;flex-wrap:wrap;gap:22px clamp(24px,4vw,56px);
  margin-top:44px;padding-top:26px;border-top:1px solid var(--dhair);
}
.hero__meta dt{font-size:13.5px;color:var(--dtext-3);margin-bottom:3px}
.hero__meta dd{font-size:19px;color:#fff;font-weight:600;letter-spacing:-.014em}

/* Interior hero. Shorter than the home page's: it introduces a page rather
   than opening the site, and a full-height hero on every section page makes
   the site feel like a series of front doors. */
.hero--short{min-height:min(64vh,600px)}

/* Interior page hero — shorter, image optional. */
.phero{
  position:relative;background:var(--bg-2);
  padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px));
  padding-bottom:clamp(40px,6vw,80px);
  overflow:hidden;
}
.phero--media{background:var(--dark);color:var(--dtext-2);min-height:min(66vh,620px);display:flex;align-items:flex-end}
.phero__media{position:absolute;inset:0}
.phero__media img,.phero__media video{width:100%;height:100%;object-fit:cover}
.phero__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,16,15,.5) 0%,rgba(11,16,15,.3) 45%,rgba(11,16,15,.9) 100%);
}
.phero__inner{position:relative}
.phero--media h1{color:#fff}
.phero--media .lede{color:var(--dtext)}
.phero .lede{max-width:60ch;margin-top:16px}

/* Breadcrumb */
.crumb{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:14.5px;color:var(--ink-3);margin-bottom:18px;
}
.crumb a{display:inline-flex;align-items:center;min-height:34px}
.crumb a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.phero--media .crumb{color:var(--dtext-2)}
.phero--media .crumb a:hover{color:#fff}

/* ==========================================================================
   Section heading block
   ========================================================================== */
.head{max-width:72ch;margin-bottom:clamp(32px,4vw,52px)}
.head--center{margin-inline:auto;text-align:center}
.head .lede{margin-top:14px}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,32px);
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
}
.card--tint{background:var(--bg-2);border-color:transparent}
a.card:hover{border-color:var(--hair);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.card h3{margin-bottom:8px}

/* Product render inside a card. Sits on a tinted panel rather than the card's
   white, because several of these machines are near-white with transparent
   backgrounds and lose their edges otherwise. */
.card__shot{
  height:clamp(150px,17vw,210px);margin:-8px -8px 18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);border-radius:var(--r-md);
}
.card__shot img{max-height:86%;width:auto;object-fit:contain}
.card--tint .card__shot{background:var(--bg-3)}
.card__shot--pending{
  color:var(--ink-3);font-size:14px;text-align:center;padding:20px;
  border:1px dashed var(--hair);
}
.sec--dark .card__shot{background:rgba(255,255,255,.05)}

/* Media tile — image over caption, the workhorse for place and fleet grids. */
.tile{
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
a.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.tile__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-3)}
.tile__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
a.tile:hover .tile__media img{transform:scale(1.035)}
.tile__body{padding:20px 22px 24px}
.tile__body h3{font-size:21px;margin-bottom:6px}
.tile__body p{font-size:15.5px;color:var(--ink-2)}
.tile__body .alink{margin-top:12px}
.tile__tag{
  position:absolute;left:14px;top:14px;z-index:2;
  font-size:12.5px;font-weight:500;color:var(--ink);
  padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
}

/* ==========================================================================
   Specification rows

   The dotted leader survives here and nowhere else. In a genuine two-column
   spec table it does a job — it ties a label to a value across a gap the eye
   would otherwise lose. As a page-wide motif it was decoration.
   ========================================================================== */
.rows{border-top:1px solid var(--hair)}
.row{
  display:flex;align-items:baseline;gap:10px;
  padding-block:13px;border-bottom:1px solid var(--hair);
}
.row__k{flex:none;font-size:15px;color:var(--ink-3)}
.row__lead{flex:1 1 auto;border-bottom:1px dotted var(--hair);transform:translateY(-4px)}
.row__v{
  flex:none;font-size:15px;color:var(--ink);font-weight:500;
  font-variant-numeric:tabular-nums;text-align:right;
}
/* On a phone there is no slack for a leader to absorb, so the value wraps
   under the label instead of pushing the row out of the viewport. */
@media (max-width:620px){
  .row{flex-wrap:wrap;gap:2px}
  .row__lead{display:none}
  .row__k{flex:1 0 100%}
  .row__v{flex:1 0 100%;text-align:left}
}

/* ==========================================================================
   Checklist
   ========================================================================== */
.checklist{display:flex;flex-direction:column;gap:14px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;color:var(--ink-2)}
.checklist svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--signal-deep)}
.sec--dark .checklist li{color:var(--dtext-2)}
.sec--dark .checklist svg{color:var(--signal)}

/* ==========================================================================
   Stat
   ========================================================================== */
.stat__n{font-size:clamp(30px,3.4vw,44px);font-weight:600;color:var(--ink);letter-spacing:-.028em;line-height:1.05}
.stat__t{font-size:15.5px;color:var(--ink-2);margin-top:7px}
.sec--dark .stat__n{color:var(--dtext)}
.sec--dark .stat__t{color:var(--dtext-2)}

/* ==========================================================================
   Environment explorer

   Every panel ships visible. `js-tabs` — added by lab.js only once it has
   confirmed tabs and panels pair up — is what collapses them to one at a
   time. No script therefore means a long readable list, never an empty box.
   ========================================================================== */
.explorer{display:grid;grid-template-columns:minmax(210px,262px) 1fr;gap:clamp(20px,2.6vw,40px);align-items:start}
.exlist{display:flex;flex-direction:column;gap:2px}
.extab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;min-height:48px;padding:11px 15px;
  border-radius:var(--r-sm);font-size:16px;color:var(--ink-2);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.extab:hover{background:var(--bg-2);color:var(--ink)}
.extab[aria-selected="true"]{background:var(--ink);color:#fff;font-weight:500}
.extab__k{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}
.extab[aria-selected="true"] .extab__k{color:rgba(255,255,255,.65)}

.expanel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,36px);align-items:center}
.explorer:not(.js-tabs) .expanel{margin-bottom:36px}
.expanel__shot{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;background:var(--bg-3)}
.expanel__shot img{width:100%;height:100%;object-fit:cover}
.expanel__body h3{margin-bottom:10px}
.expanel__body p{font-size:16px;color:var(--ink-2);margin-bottom:18px}

@media (max-width:900px){
  .explorer{grid-template-columns:1fr}
  .exlist{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .extab{width:auto;flex:none;white-space:nowrap}
  .extab__k{display:none}
  .expanel{grid-template-columns:1fr}
}

/* ==========================================================================
   Calculator
   ========================================================================== */
.calc{display:grid;grid-template-columns:1fr minmax(280px,380px);gap:clamp(24px,4vw,64px);align-items:start}
.calc__control{margin-bottom:30px}
.calc__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:12px}
.calc__label{font-size:16px;color:var(--ink-2)}
.calc__value{font-size:20px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.016em}

input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track{height:5px;border-radius:var(--r-pill);background:var(--bg-3)}
input[type="range"]::-moz-range-track{height:5px;border-radius:var(--r-pill);background:var(--bg-3)}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:26px;height:26px;margin-top:-10.5px;
  border-radius:50%;background:#fff;border:1px solid var(--hair);
  box-shadow:0 1px 4px rgba(18,24,26,.2);
}
input[type="range"]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--hair);
  box-shadow:0 1px 4px rgba(18,24,26,.2);
}

.calc__out{background:var(--bg-2);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,32px)}
.calc__big{display:flex;align-items:baseline;gap:12px}
.calc__big b{font-size:clamp(52px,6.4vw,80px);font-weight:600;color:var(--ink);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.calc__big span{font-size:16px;color:var(--ink-2)}

@media (max-width:820px){.calc{grid-template-columns:1fr}}

/* ==========================================================================
   Lineup — transparent product renders

   Renders sit on a tinted panel rather than directly on white: several of
   them are near-white machines, and on a white page they lose their edges.
   ========================================================================== */
.lineup{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,20px)}
.lineup__item{
  background:var(--bg-2);border-radius:var(--r-md);
  padding:22px 16px 20px;text-align:center;
  transition:background .2s var(--ease);
}
.lineup__item:hover{background:var(--bg-3)}
.lineup__shot{height:clamp(96px,10vw,132px);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.lineup__shot img{max-height:100%;width:auto;object-fit:contain}
.lineup__name{font-size:15px;font-weight:500;color:var(--ink);line-height:1.3}
.lineup__spec{font-size:13px;color:var(--ink-3);margin-top:4px;line-height:1.35}

.sec--dark .lineup__item{background:var(--dark-2)}
.sec--dark .lineup__item:hover{background:#1b2422}
.sec--dark .lineup__name{color:var(--dtext)}
.sec--dark .lineup__spec{color:var(--dtext-3)}

@media (max-width:1020px){.lineup{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.lineup{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   Status pill
   ========================================================================== */
.status{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;color:var(--ink-2);
  padding:5px 12px;border-radius:var(--r-pill);background:var(--bg-2);
}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink-3)}
.status--live{color:var(--signal-ink);background:var(--signal-wash)}
.status--live::before{background:var(--signal-deep)}
.sec--dark .status{background:rgba(255,255,255,.08);color:var(--dtext-2)}
.sec--dark .status--live{color:var(--signal);background:var(--signal-wash)}

/* ==========================================================================
   Detail clip

   Illustration, not media to be operated: muted, looping, no controls. The
   poster frame carries the meaning on its own, which is what makes
   preload="none" safe — an unscrolled clip costs one small image.
   ========================================================================== */
.clip{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);background:var(--dark-2)}
.split__media .clip{border-radius:0}   /* parent already clips */

/* Full-bleed media band between sections. Edge to edge, no caption — the
   clip is the argument, and a label under it would restate what is on
   screen. Capped in height so a wide monitor does not turn one detail shot
   into a whole screenful. */
.band{position:relative;background:var(--dark);line-height:0}
.band .clip{border-radius:0;height:clamp(240px,38vw,460px)}

/* ==========================================================================
   Prose — long-form legal text

   The one place on this site where the design's job is to disappear. Narrow
   measure, generous leading, real heading hierarchy, no cards or tints. A
   privacy notice is read by somebody looking for one clause, usually in a
   hurry and often unhappy; making it scannable matters more than making it
   look like the rest of the site.
   ========================================================================== */
.prose{max-width:68ch}
.prose h2{
  font-size:clamp(21px,2vw,26px);margin-top:clamp(36px,4vw,52px);margin-bottom:12px;
  padding-top:clamp(24px,2.6vw,32px);border-top:1px solid var(--hair);
}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose p{font-size:16.5px;line-height:1.68;color:var(--ink-2)}
.prose p + p{margin-top:14px}
.prose ul{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.prose li{
  font-size:16.5px;line-height:1.6;color:var(--ink-2);
  padding-left:20px;position:relative;
}
.prose li::before{
  content:"";position:absolute;left:2px;top:11px;
  width:5px;height:5px;border-radius:50%;background:var(--ink-3);
}

/* ==========================================================================
   Numbered step
   ========================================================================== */
.step__k{
  font-family:var(--mono);font-size:13px;font-weight:500;
  color:var(--signal-deep);margin-bottom:10px;
}
.step h3{font-size:20px}
.step p{font-size:15.5px;color:var(--ink-2)}
.sec--dark .step p{color:var(--dtext-2)}
.sec--dark .step__k{color:var(--signal)}

/* Horizontal variant for the narrow "what happens next" column. */
.step--row{display:flex;gap:14px;align-items:baseline;padding-block:14px;border-top:1px solid var(--hair)}
.step--row:first-child{border-top:0}
.step--row .step__k{margin-bottom:0;flex:none}

/* ==========================================================================
   Before / after comparison
   ========================================================================== */
.compare{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,24px)}
.compare__col{
  padding:clamp(26px,3vw,38px);border-radius:var(--r-lg);
  background:var(--bg-2);
}
.compare__col--after{background:var(--dark);color:var(--dtext-2)}
.compare__tag{font-size:14px;color:var(--ink-3);margin-bottom:12px}
.compare__col--after .compare__tag{color:var(--dtext-3)}
.compare__fig{
  font-size:clamp(34px,4.4vw,54px);font-weight:600;letter-spacing:-.03em;
  line-height:1.04;color:var(--ink);
}
.compare__col--after .compare__fig{color:var(--signal)}
.compare__fig small{font-size:.42em;font-weight:500;letter-spacing:-.01em;margin-left:7px;color:var(--ink-3)}
.compare__col--after .compare__fig small{color:var(--dtext-2)}
.compare__sub{font-size:15px;color:var(--ink-2);margin-top:12px}
.compare__col--after .compare__sub{color:var(--dtext-2)}
@media (max-width:620px){.compare{grid-template-columns:1fr}}

/* ==========================================================================
   Pillar icon
   ========================================================================== */
.pillar__ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-sm);
  background:var(--signal-wash);color:var(--signal-deep);
}
.pillar__ico svg{width:22px;height:22px}
.sec--dark .pillar__ico{color:var(--signal)}

/* ==========================================================================
   Chips
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  display:inline-flex;align-items:center;min-height:38px;
  font-size:14px;padding:8px 15px;border-radius:var(--r-pill);
  background:var(--bg-2);color:var(--ink-2);
}
a.chip{transition:background .18s var(--ease),color .18s var(--ease)}
a.chip:hover{background:var(--ink);color:#fff}
.sec--dark .chip{background:rgba(255,255,255,.09);color:var(--dtext)}

/* ==========================================================================
   Form

   Two columns on desktop, one on a phone. Fields are rendered `disabled`
   until site.formEndpoint is set — see contact.njk. Disabled styling is
   deliberately *legible* rather than ghosted: the point is to show what will
   be asked, not to look broken.
   ========================================================================== */
.form{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:14.5px;color:var(--ink-2)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:16px;color:var(--ink);
  padding:12px 14px;min-height:48px;
  background:var(--bg);border:1px solid var(--hair);border-radius:var(--r-sm);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
  width:100%;
}
.field textarea{min-height:130px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--signal-wash);
}
.field input:disabled,.field select:disabled,.field textarea:disabled{
  background:var(--bg-2);color:var(--ink-3);cursor:not-allowed;
}
.consent{
  grid-column:1/-1;display:flex;gap:11px;align-items:flex-start;
  font-size:14.5px;color:var(--ink-2);
}
.consent input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--signal-deep)}
@media (max-width:720px){.form{grid-template-columns:1fr}}

/* ==========================================================================
   Marquee reel
   ========================================================================== */
.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:16px;width:max-content;animation:reel 58s linear infinite}
.reel:hover .reel__track{animation-play-state:paused}
.reel figure{width:clamp(230px,26vw,340px);flex:none}
.reel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-md)}
.reel figcaption{font-size:14px;color:var(--ink-3);margin-top:10px}
.sec--dark .reel figcaption{color:var(--dtext-3)}
@keyframes reel{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .reel__track{animation:none;overflow-x:auto}
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.cta{
  background:var(--dark);color:var(--dtext-2);border-radius:var(--r-xl);
  padding:clamp(44px,6vw,88px) clamp(28px,5vw,72px);text-align:center;
}
.cta h2{color:#fff;margin-bottom:14px}
.cta .lede{color:var(--dtext-2);max-width:56ch;margin-inline:auto}
.cta__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:32px}
.cta .btn--outline{border-color:rgba(255,255,255,.34);color:#fff}
.cta .btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--bg-2);padding-block:clamp(48px,5vw,72px) 32px;font-size:15px}
.footer__grid{
  display:grid;grid-template-columns:1.6fr repeat(3,1fr);
  gap:clamp(28px,3vw,48px);
  padding-bottom:36px;border-bottom:1px solid var(--hair);
}
.footer__tag{color:var(--ink-2);max-width:38ch;margin-top:14px;font-size:14.5px}
.footer__col h4{
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;
}
.footer__col a,.footer__col p{
  display:flex;align-items:center;min-height:34px;color:var(--ink-2);font-size:14.5px;
}
.footer__col a:hover{color:var(--ink)}
.footer__base{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;
  padding-top:26px;color:var(--ink-3);font-size:13.5px;
}
@media (max-width:860px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr}}

/* ==========================================================================
   Country / language chooser

   A native <details>, so it discloses with no JavaScript at all. It is the
   only region control on the page, which is why it must not depend on one.
   ========================================================================== */
.chooser{position:relative;margin-right:auto}
.chooser__summary{
  display:flex;align-items:center;gap:8px;
  min-height:40px;padding:7px 14px;
  border:1px solid var(--hair);border-radius:var(--r-pill);
  color:var(--ink-2);font-size:14px;cursor:pointer;list-style:none;
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.chooser__summary::-webkit-details-marker{display:none}
.chooser__summary:hover{border-color:var(--ink-3);color:var(--ink)}
.chooser__summary svg{width:16px;height:16px;flex:none;opacity:.75}
.chooser__now{color:var(--ink);font-weight:500}
.chooser__lang{color:var(--ink-3)}
.chooser__lang::before{content:"·";margin-right:7px}
.chooser__chev{width:13px!important;height:13px!important;transition:transform .2s var(--ease)}
.chooser[open] .chooser__chev{transform:rotate(180deg)}

.chooser__panel{
  position:absolute;bottom:calc(100% + 10px);left:0;z-index:20;
  min-width:290px;padding:16px;
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-md);
  box-shadow:var(--shadow-lift);
}
.chooser__heading{
  font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;
}
.chooser__list{display:flex;flex-direction:column;gap:1px}
.chooser__item{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  min-height:42px;padding:8px 12px;border-radius:var(--r-sm);
}
.chooser__item:hover{background:var(--bg-2)}
.chooser__item b{color:var(--ink);font-weight:500;font-size:15px}
.chooser__item span{color:var(--ink-3);font-size:13px}
.chooser__item.is-current{background:var(--bg-2)}
.chooser__item.is-current b::after{content:" ✓";color:var(--signal-deep)}

/* ==========================================================================
   Touch targets

   Keyed on `pointer:coarse` rather than on width. The 44px floor exists
   because a fingertip is imprecise, not because a screen is narrow — a
   touchscreen laptop needs it at 1440px and a mouse does not need it at
   390px. Inflating every inline link to 44px on desktop would put visible
   holes in body copy for no benefit.

   The previous system enumerated these individually after measuring; the
   list below is the same set of controls, expressed as one rule.
   ========================================================================== */
@media (pointer:coarse){
  .alink,.crumb a,.brand,.drop-toggle,.footer__col a,.chooser__item{min-height:44px}
  input[type="range"]{height:44px}
  input[type="range"]::-webkit-slider-thumb{width:30px;height:30px;margin-top:-12.5px}
  input[type="range"]::-moz-range-thumb{width:30px;height:30px}
}

/* ==========================================================================
   Scroll reveal

   Opt-in: `js-reveal` is set on <html> by an inline script before first
   paint, so a blocked or failed lab.js leaves .rv elements at their natural
   opacity rather than hiding the page. This is not theoretical — an earlier
   build of this site shipped a missing class and hid most of the home page.
   ========================================================================== */
.js-reveal .rv{opacity:0;transform:translateY(16px)}
.js-reveal .rv.in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js-reveal .rv[data-d="1"].in{transition-delay:.06s}
.js-reveal .rv[data-d="2"].in{transition-delay:.12s}
.js-reveal .rv[data-d="3"].in{transition-delay:.18s}
.js-reveal .rv[data-d="4"].in{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .js-reveal .rv{opacity:1;transform:none}
}