/* ==========================================================================
   APEX LIVE GAMING — design system
   Dark precision-industrial B2B. Manufacturer-grade.
   ========================================================================== */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* --- surface ladder --- */
  --ink-000:#06080c;
  --ink-050:#0a0d13;
  --ink-100:#0e1219;
  --ink-150:#131822;
  --ink-200:#1a212c;
  --ink-300:#242d3a;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --line-strong:rgba(255,255,255,.18);

  /* --- text --- */
  --tx-hi:#ffffff;
  --tx:#d3dae4;
  --tx-mid:#a9b5c4;
  --tx-lo:#8492a3;

  /* --- brand: pulled from the Apex mark (blue → teal → gold) --- */
  --brand:#1668c8;
  --brand-lo:#0c4da2;
  --brand-hi:#3d95e8;
  --teal:#00abca;
  --gold:#ffce1f;
  --gold-deep:#d9a400;

  /* --- type scale (fluid, confident) --- */
  /* Floor was 3.4rem (54.4px). The clamp floor is what actually applies on
     phones (7.4vw is only 28.9px at 390px wide), and at 54.4px the single word
     "manufacturers" measures ~378px against a 346px content column, so the hero
     headline overflowed its own box on every phone. 2.9rem keeps the hero
     dominant while letting the longest word fit at 390px.
     Below ~380px the 2.9rem floor is still too big: "manufacturers" needs
     322px against a 316px column at 360px and 276px at 320px, so the
     overflow-wrap guard fired and split the word as "manufacturer"/"s".
     See the max-width:380px rule below, which scales the floor by viewport.
     Crossover is exact: 12.2vw == 2.9rem at 380px, so there is no jump. */
  --fs-hero:clamp(2.9rem,7.4vw,7.5rem);
  --fs-d1:clamp(2.9rem,5.3vw,5.2rem);
  --fs-d2:clamp(2.35rem,4vw,3.9rem);
  --fs-h3:clamp(1.6rem,2.2vw,2.35rem);
  --fs-h4:clamp(1.22rem,1.5vw,1.55rem);
  --fs-lead:clamp(1.18rem,1.45vw,1.5rem);
  --fs-body:clamp(1.075rem,1.1vw,1.19rem);
  --fs-sm:1.03rem;
  --fs-eyebrow:.845rem;

  /* Single source of truth for the sticky header surface. */
  --hdr:#0a0e14;
  /* Border is a shade DARKER than the bar: it defines the edge without ever
     rendering as the bright seam the client reported. */
  --hdr-edge:#04060a;

  --shell:1400px;
  /* One explicit horizontal gutter for every section. A fluid 4vw clamp made
     visual audits ambiguous and produced different-looking offsets when
     screenshots were viewed/scaled separately. All .shell content now begins
     on one deterministic line: 68px at 1440 (20px shell margin + 48px pad). */
  --gutter:48px;
  --sec:clamp(6rem,10vw,11.5rem);
  --r:3px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:210px}
body{
  margin:0;background:var(--ink-050);color:var(--tx);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--fs-body);line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:'Archivo',system-ui,sans-serif;color:var(--tx-hi);margin:0;text-wrap:balance}
h1{font-size:var(--fs-hero);font-weight:800;line-height:.94;letter-spacing:-.035em;
   /* last-resort guard: never let a long compound word punch out of the column */
   overflow-wrap:break-word}
h2{font-size:var(--fs-d1);font-weight:800;line-height:1.0;letter-spacing:-.03em}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.12;letter-spacing:-.02em}
h4{font-size:var(--fs-h4);font-weight:700;line-height:1.22;letter-spacing:-.012em}
p{margin:0}
::selection{background:var(--brand);color:#fff}

.shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);width:100%}
.section{padding-block:var(--sec)}

/* ── shared atoms ─────────────────────────────────────────────── */
.eyebrow{
  font-family:'Archivo',sans-serif;font-size:var(--fs-eyebrow);font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--teal);
  display:inline-flex;align-items:center;gap:.85rem;margin:0 0 1.6rem;
}
.eyebrow::before{content:"";width:34px;height:2px;background:linear-gradient(90deg,var(--teal),transparent)}
.eyebrow.is-gold{color:var(--gold)}
.eyebrow.is-gold::before{background:linear-gradient(90deg,var(--gold),transparent)}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--tx-mid);max-width:62ch;font-weight:380}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.8rem;
  font-family:'Archivo',sans-serif;font-size:1.015rem;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;padding:1.32rem 2.5rem;border-radius:var(--r);
  border:1px solid transparent;cursor:pointer;transition:.32s var(--ease);white-space:nowrap;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 14px 40px -14px rgba(22,104,200,.85)}
.btn-primary:hover{background:var(--brand-hi);transform:translateY(-2px);box-shadow:0 20px 48px -14px rgba(61,149,232,.9)}
/* CTA hierarchy: one primary (blue) sitewide; gold is reserved for the ChipperX2
   flagship only, so the eye always knows which action is the main one. */
.btn-gold{background:var(--gold);color:#161003;box-shadow:0 14px 40px -14px rgba(255,206,31,.6)}
.btn-gold:hover{background:#ffd94d;transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-strong);color:var(--tx-hi);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07);transform:translateY(-2px)}
.btn .ar{transition:transform .32s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}

.rule{height:1px;background:var(--line-soft);border:0;margin:0}

/* ══════════════════════════════════════════════════════════════
   HEADER — utility bar + large primary nav
   ══════════════════════════════════════════════════════════════ */
.hdr{position:fixed;inset:0 0 auto;z-index:120}
.hdr-util{
  background:var(--hdr);border-bottom:1px solid var(--hdr-edge);
  font-size:1.0rem;color:var(--tx);
}
.hdr-util .shell{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:60px}
.util-left{display:flex;align-items:center;gap:2.7rem;flex-wrap:wrap}
.util-item{display:inline-flex;align-items:center;gap:.68rem;transition:color .25s;letter-spacing:.004em}
.util-item svg{flex:none;opacity:.85;color:var(--teal)}
.util-item.is-link:hover{color:#fff}
.util-item.is-link:hover svg{opacity:1}
.util-item strong{color:var(--tx-hi);font-weight:600;letter-spacing:.005em}
.util-item.is-addr{color:var(--tx-mid)}
/* R3-1: the gold "Manufacturer — not a reseller" badge (.util-right/.util-badge)
   was removed site-wide on Emil's instruction. Rules deleted with it. */

/* ONE solid opaque colour for the whole header, in every state and at every
   breakpoint. No rgba() alpha and no backdrop-filter anywhere: a blur still
   samples the content behind it, which is what let page copy read through.
   The bottom border is DARKER than the bar, never lighter, so the edge can
   never render as a glowing seam. */
.hdr-main{
  background:var(--hdr);
  border-bottom:1px solid var(--hdr-edge);
  transition:min-height .35s var(--ease);
}
/* keep the brand mark above the open mega panel */
.brand{position:relative;z-index:10}
.hdr-main .shell{position:relative;display:flex;align-items:center;justify-content:space-between;gap:clamp(1.5rem,3vw,3.5rem);min-height:124px;transition:min-height .35s var(--ease)}
.brand{display:flex;align-items:center;flex:none;padding-block:.9rem}
.brand img{width:clamp(196px,15.2vw,252px);transition:width .35s var(--ease)}

.nav{display:flex;align-items:center;gap:clamp(.05rem,.34vw,.28rem);margin-left:auto;min-width:0}
.nav-item{position:relative}
.nav-item.has-mega{position:static;display:flex;align-items:center}
/* NINE primary targets (Home, Products, Catalogues, ChipperX2, About, References,
   Global Reach, Contact us, Request a Quote) plus the search trigger have to share
   the 1400px shell with the brand mark — Emil's 2026-09-09 nav order. Adding Contact
   us + search pushed the row past the viewport at 1440, so the type, padding, gap and
   brand mark are all tightened here. These figures are measured, not guessed: re-run
   tools/check_nav_fit.py after touching any of them. */
.nav-link{
  display:flex;align-items:center;gap:.45rem;
  font-family:'Archivo',sans-serif;font-size:.94rem;font-weight:600;letter-spacing:-.004em;
  color:var(--tx);padding:1.25rem clamp(.26rem,.44vw,.44rem);border-radius:var(--r);
  transition:color .25s var(--ease);white-space:nowrap;
}
.has-mega .nav-link{padding-right:.28rem}
.mega-toggle{
  width:30px;height:38px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  margin-left:-.2rem;padding:0;border:1px solid transparent;border-radius:var(--r);
  background:transparent;color:var(--tx-mid);cursor:pointer;transition:.25s var(--ease);
}
.mega-toggle:hover,.mega-toggle:focus-visible{color:#fff;border-color:var(--line-strong);background:rgba(255,255,255,.05);outline:none}
.mega-toggle .chev{transition:transform .3s var(--ease)}
/* The active/hover underline is positioned against the nav item. `.has-mega`
   must stay `position:static` so the mega panel can span the header shell —
   which previously left the Products underline resolving against `.hdr-main
   .shell` and painting a full-width 2px teal rule under the whole header on
   every /products/* page (Emil, 2026-09-09). Anchoring the pseudo-element to
   the link itself keeps the underline the width of its own label everywhere. */
.nav-link{position:relative}
.nav-link::after{
  content:"";position:absolute;left:clamp(.75rem,1.15vw,1.2rem);right:clamp(.75rem,1.15vw,1.2rem);bottom:.68rem;height:2px;
  background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease);
}
.nav-item:hover .nav-link,.nav-link.is-active{color:#fff}
.nav-item:hover .nav-link::after,.nav-link.is-active::after{transform:scaleX(1)}
.nav-item.is-mega-open>.nav-link{color:#fff}
.nav-item.is-mega-open>.nav-link::after{transform:scaleX(1)}
.nav-item.is-mega-open .mega-toggle{color:#fff;border-color:var(--line-strong);background:rgba(255,255,255,.06)}
.nav-item.is-mega-open .mega-toggle .chev{transform:rotate(180deg)}

/* ── mega menu: two columns of links + featured ChipperX2 panel ── */
.mega{
  position:absolute;top:calc(100% + 1px);left:50%;transform:translate(-50%,10px);
  width:min(1060px,calc(100% - 96px));background:#0e1219;border:1px solid var(--line);
  border-radius:4px;box-shadow:0 48px 100px -25px rgba(0,0,0,.92);
  opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;
  transition:.28s var(--ease);z-index:5;
}
.nav-item.is-mega-open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}

/* Dim the page—not the header—while the mega-menu is open. This prevents hero
   copy beside/below the panel from visually competing with or appearing to
   bleed through the product navigation. */
body.mega-active::after{
  content:"";position:fixed;inset:0;z-index:110;background:rgba(2,4,7,.74);
  pointer-events:auto;
}
.mega-inner{display:grid;grid-template-columns:minmax(0,1fr) 306px}
.mega-cols{padding:2.2rem 2.3rem 1.9rem}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:.15rem 1.6rem}
.mega-head{
  grid-column:1/-1;font-family:'Archivo',sans-serif;font-size:.75rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tx-lo);
  padding-bottom:.95rem;margin-bottom:.85rem;border-bottom:1px solid var(--line-soft);
}
.mega-link{
  display:flex;align-items:center;gap:.95rem;
  padding:.6rem .7rem;border-radius:3px;font-size:1.055rem;font-weight:500;color:var(--tx);
  transition:.22s var(--ease);border-left:2px solid transparent;
}
.mega-link:hover{background:rgba(255,255,255,.05);color:#fff;border-left-color:var(--teal)}
.mega-link .thumb{
  flex:none;width:52px;height:38px;border-radius:2px;object-fit:cover;
  border:1px solid var(--line-soft);filter:saturate(.8) brightness(.86);transition:.28s var(--ease);
}
.mega-link:hover .thumb{filter:saturate(1) brightness(1);border-color:var(--line-strong)}
.mega-link .tx{flex:1 1 auto;min-width:0}
.mega-link span.ar{margin-left:auto;opacity:0;transform:translateX(-4px);transition:.22s var(--ease);color:var(--teal);flex:none}
.mega-link:hover span.ar{opacity:1;transform:translateX(0)}

.mega-feat{
  position:relative;border-left:1px solid var(--line);background:var(--ink-150);
  padding:2.2rem 1.9rem;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;overflow:hidden;
}
.mega-feat::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(78% 62% at 62% 26%,rgba(0,171,202,.24),transparent 66%);
}
.mega-feat img.shot{
  width:100%;max-width:214px;margin:0 auto 1.3rem;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.8));
}
.mega-feat .tag{
  font-family:'Archivo',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.6rem;display:block;
}
.mega-feat h5,.mega-feat .mega-h5{font-family:'Archivo',sans-serif;font-size:1.28rem;font-weight:800;color:#fff;margin:0 0 .5rem;letter-spacing:-.015em}
.mega-feat p{font-size:.945rem;color:var(--tx-mid);line-height:1.55;margin-bottom:1.2rem}
.mega-feat .go{
  display:inline-flex;align-items:center;gap:.5rem;font-family:'Archivo',sans-serif;
  font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
}
.mega-feat .go:hover{color:#ffe071}
.nav-cta{margin-left:clamp(.2rem,.45vw,.5rem);padding:.92rem .98rem;font-size:.85rem;white-space:nowrap}

/* ── search: trigger in the nav + full-screen overlay ── */
.nav-search{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;margin-left:clamp(.1rem,.3vw,.3rem);padding:0;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:var(--r);
  color:var(--tx);transition:.25s var(--ease);
}
.nav-search:hover,.nav-search:focus-visible{color:#fff;border-color:var(--line-strong);background:rgba(255,255,255,.05);outline:none}

.srch{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(4,6,10,.82);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.srch.is-open{display:block}
.srch-panel{
  max-width:760px;margin:clamp(80px,12vh,150px) auto 0;background:#0e1219;
  border:1px solid var(--line);border-radius:4px;box-shadow:0 48px 100px -25px rgba(0,0,0,.92);
  overflow:hidden;
}
.srch-bar{display:flex;align-items:center;gap:.85rem;padding:1.15rem 1.3rem;border-bottom:1px solid var(--line)}
.srch-bar svg{flex:none;color:var(--teal)}
.srch-bar input{
  flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;
  font-family:'Archivo',sans-serif;font-size:1.16rem;font-weight:600;
}
.srch-bar input::placeholder{color:var(--tx-mid);font-weight:500}
.srch-close{
  flex:none;background:none;border:1px solid var(--line-strong);border-radius:3px;
  color:var(--tx-mid);cursor:pointer;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.5rem .7rem;transition:.2s var(--ease);
}
.srch-close:hover{color:#fff;border-color:#fff}
.srch-results{max-height:min(56vh,460px);overflow-y:auto;padding:.5rem 0}
.srch-results a{
  display:flex;align-items:center;gap:.9rem;padding:.8rem 1.3rem;
  border-left:2px solid transparent;transition:.18s var(--ease);
}
.srch-results a:hover,.srch-results a:focus-visible{background:rgba(255,255,255,.05);border-left-color:var(--teal);outline:none}
.srch-results .sr-t{color:#fff;font-family:'Archivo',sans-serif;font-weight:600;font-size:1rem}
.srch-results .sr-c{margin-left:auto;flex:none;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-mid)}
.srch-empty{padding:1.5rem 1.3rem;color:var(--tx-mid)}
.srch-hint{padding:1rem 1.3rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--tx-mid)}

.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:3px;padding:.85rem;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:.3s var(--ease)}
.hdr.is-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr.is-open .burger span:nth-child(2){opacity:0}
.hdr.is-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* scrolled state */
.hdr.is-stuck .hdr-main .shell{min-height:80px}
.hdr.is-stuck .brand img{width:clamp(188px,14vw,228px)}
/* Scrolled state keeps the SAME solid colour as the resting state. Only a dark
   shadow is added for depth: no lighter border, no gradient skirt, no glow.
   A border lighter than the bar rendered as a bright seam (measured
   rgb(74,77,82) desktop / rgb(98,102,109) mobile) and the skirt produced a
   gradient band fading from y~213 to y~255. Both are removed. */
/* Resting-state edge: a pure-black hairline plus a short dark falloff. This is
   strictly DARKER than the bar, so it defines the boundary against the hero
   without ever reading as the bright seam reported earlier. */
.hdr-main{box-shadow:0 1px 0 #000,0 5px 14px rgba(0,0,0,.72)}
.hdr.is-stuck .hdr-main{
  box-shadow:0 6px 16px rgba(0,0,0,.55);
}
/* Hard visual break between header and hero: the hero's own grid/glow and the
   stats-row top divider sit close enough to the header edge to read as a soft
   bleed at a glance. A solid-color spacer strip, same tone as the header,
   removes any perceived gradient/seam at the boundary with no shadow or
   gradient of its own. */
.hdr::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:6px;
  background:var(--hdr-edge);pointer-events:none;
}

@media(min-width:761px){
  /* Section blocks include 144px internal top padding, so a small negative
     margin keeps anchor landings from opening an oversized empty gulf. */
  section[id]{scroll-margin-top:-64px}
}

/* ══════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════ */
/* Top padding clears the 186px two-tier fixed header while keeping the primary
   CTAs above the fold at the 1440x900 review viewport. */
.hero{position:relative;padding-top:clamp(190px,15vw,224px);padding-bottom:clamp(4rem,7vw,7rem);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2}
/* R3-10: the hero background is now a slow cross-fade between the original
   photo and Emil's 12 "transition" photos. The .48 opacity and the gradient
   overlay below are UNCHANGED - he explicitly asked to keep the current
   blending so the headline stays readable. Every frame is stacked in the same
   box and only the active one is at full alpha, so the fade never shows the
   page background through a gap. 2.2s ease is deliberately slow: "no flashy or
   fast transition of pictures". */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:.48}
.hero-frame{position:absolute;inset:0;opacity:0;transition:opacity 2.2s ease-in-out}
.hero-frame.is-on{opacity:.48}
@media(prefers-reduced-motion:reduce){
  /* honour reduced-motion: hold the first frame, no cross-fade at all */
  .hero-frame{transition:none}
  .hero-frame:not(:first-child){display:none}
  .hero-frame:first-child{opacity:.48}
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(115% 88% at 76% 34%,rgba(0,171,202,.20),transparent 58%),
    linear-gradient(104deg,var(--ink-050) 26%,rgba(10,13,19,.88) 48%,rgba(10,13,19,.34) 74%,rgba(10,13,19,.58)),
    linear-gradient(to top,var(--ink-050) 3%,transparent 46%);
}
.hero-grid{
  position:absolute;inset:0;z-index:-1;opacity:.4;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:88px 88px;
  /* Radial mask alone left the grid pattern partially visible at y=0, right at
     the header boundary, reading as a glow/seam. A linear fade-in over the
     first 140px is layered on top so the grid is fully transparent exactly
     where it meets the header, regardless of viewport width. */
  mask-image:radial-gradient(90% 70% at 50% 30%,#000,transparent 78%),linear-gradient(to bottom,transparent,#000 140px);
  mask-composite:intersect;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 30%,#000,transparent 78%),linear-gradient(to bottom,transparent,#000 140px);
  -webkit-mask-composite:source-in;
}
.hero-bg::after{mask-image:linear-gradient(to bottom,#000 140px,#000);-webkit-mask-image:linear-gradient(to bottom,#000 140px,#000);}
.hero-inner{max-width:1010px}
.hero h1{margin-bottom:2.1rem}
.hero h1 .gr{
  background:linear-gradient(96deg,var(--gold) 6%,var(--teal) 52%,var(--brand-hi) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lead{max-width:60ch;font-size:clamp(1.24rem,1.62vw,1.62rem);color:#a9b6c6}
.hero-actions{display:flex;flex-wrap:wrap;gap:1.05rem;margin-top:2.6rem}

.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(4.5rem,7vw,7.5rem);background:var(--line);
  border-block:1px solid var(--line);
}
.hstat{background:var(--ink-050);padding:2.3rem clamp(1rem,2vw,2.1rem) 2.1rem}
.hstat .n{
  font-family:'Archivo',sans-serif;font-size:clamp(2.5rem,3.9vw,3.75rem);font-weight:800;
  line-height:1;letter-spacing:-.035em;color:#fff;display:block;
}
.hstat .n em{font-style:normal;color:var(--teal)}
.hstat .l{
  display:block;margin-top:.95rem;font-size:.895rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tx-lo);line-height:1.5;
}

/* ══════════════════════════════════════════════════════════════
   Generic section head
   ══════════════════════════════════════════════════════════════ */
.sec-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,5rem);align-items:end;margin-bottom:clamp(3.2rem,5.5vw,5.5rem)}
.sec-head.is-center{grid-template-columns:1fr;text-align:center;justify-items:center;max-width:860px;margin-inline:auto}
.sec-head.is-center .eyebrow::before{display:none}
.sec-head.is-center .lead{margin-inline:auto}
.sec-head h2{margin-bottom:0}
.sec-head .lead{padding-bottom:.5rem}

/* ══════════════════════════════════════════════════════════════
   Capability strip
   ══════════════════════════════════════════════════════════════ */
.caps{background:var(--ink-000);border-block:1px solid var(--line-soft)}
.caps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft)}
.cap{background:var(--ink-000);padding:clamp(2.6rem,3.6vw,3.6rem) clamp(1.6rem,2.6vw,2.9rem);transition:background .3s}
.cap:hover{background:var(--ink-100)}
.cap-ic{width:46px;height:46px;color:var(--teal);margin-bottom:1.7rem}
.cap h4{margin-bottom:.85rem}
.cap p{color:var(--tx-mid);font-size:1.075rem;line-height:1.66}

/* ══════════════════════════════════════════════════════════════
   Products
   ══════════════════════════════════════════════════════════════ */
.prod-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.1rem,1.6vw,1.7rem)}
.pcard{
  position:relative;grid-column:span 4;overflow:hidden;border:1px solid var(--line-soft);
  border-radius:var(--r);background:var(--ink-100);isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-end;min-height:330px;
  transition:.42s var(--ease);
}
.pcard.is-wide{grid-column:span 6}
.pcard.is-tall{grid-column:span 6;min-height:440px}

/* R3-2: Emil asked for the portfolio to be equal categories, "smaller so
   they will fit screen without scrolling". The old mixed tall/wide mosaic is
   replaced by one uniform grid of short cards.
   Grid was originally tuned for exactly nine cards (3 rows of 3); the
   catalogue is actually 11 categories (Wheels of Fortune + Pre-owned were
   missing from this section, flagged 2026-09-10), so it now runs 4 rows
   (3+3+3+2) and the height budget below is divided by 4 rows, not 3.
   Phones cannot show eleven legible image cards in 697px, so there the grid
   goes to a compact 2-up with the blurb dropped - far shorter than it
   was, while keeping tap targets real. */
#products > .shell > .sec-head{margin-bottom:clamp(1.1rem,1.8vw,1.8rem)}
#products > .shell > .sec-head h2{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.08;margin:0}
#products > .shell > .sec-head .eyebrow{margin-bottom:.4rem}
.prod-grid.is-eleven{gap:clamp(.7rem,1.1vw,1.15rem)}
.prod-grid.is-eleven .pcard{
  grid-column:span 4;
  min-height:0;
  height:clamp(104px,calc((100vh - 27rem) / 4),150px);
}
.prod-grid.is-eleven .pcard-body{padding:clamp(.85rem,1.1vw,1.15rem)}
.prod-grid.is-eleven .pcard-num{font-size:.66rem;letter-spacing:.16em;margin-bottom:.2rem;opacity:.85}
.prod-grid.is-eleven .pcard h4{font-size:clamp(.98rem,1.15vw,1.2rem);line-height:1.16;margin-bottom:.25rem}
.prod-grid.is-eleven .pcard p{
  font-size:.855rem;line-height:1.35;max-width:34ch;margin:0;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}
.prod-grid.is-eleven .pcard-more{margin-top:.35rem;font-size:.82rem}
#products .prod-all{margin-top:clamp(1.1rem,1.8vw,1.8rem)}
.pa-short{display:none}
@media(max-width:760px){.pa-long{display:none}.pa-short{display:inline}}

/* short/laptop viewports: drop the blurb rather than overflow the card */
@media(max-height:820px) and (min-width:1081px){
  .prod-grid.is-eleven .pcard p{display:none}
}
@media(max-width:1080px){
  .prod-grid.is-eleven .pcard{grid-column:span 6;height:clamp(140px,22vw,190px)}
  .prod-grid.is-eleven .pcard p{display:none}
}
@media(max-width:760px){
  /* Phones: 11 image cards + heading + button must fit within a mobile
     viewport. Grid goes compact 2-up (6 rows, last card spans full width
     since 11 is odd), the card drops to the name only, and the
     catalogue button uses its short label. */
  .prod-grid.is-eleven{gap:.5rem}
  .prod-grid.is-eleven .pcard{grid-column:span 6;height:clamp(96px,26vw,116px);min-height:0}
  .prod-grid.is-eleven .pcard:last-child{grid-column:span 12}
  .prod-grid.is-eleven .pcard-body{padding:.6rem .7rem}
  .prod-grid.is-eleven .pcard h4{font-size:.9rem;line-height:1.12;margin:0}
  .prod-grid.is-eleven .pcard-num,
  .prod-grid.is-eleven .pcard-more,
  .prod-grid.is-eleven .pcard p{display:none}
  #products > .shell > .sec-head{margin-bottom:.8rem}
  #products > .shell > .sec-head h2{font-size:1.55rem}
  #products .prod-all{margin-top:.8rem}
  #products .prod-all .btn{width:auto;padding:.85rem 1.2rem;font-size:.88rem}
}
.pcard-img{position:absolute;inset:0;z-index:-2}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .95s var(--ease);filter:saturate(.82) contrast(1.06) brightness(.9)}
.pcard::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,
      rgba(4,6,9,.99) 0%,
      rgba(4,6,9,.98) 26%,
      rgba(5,7,11,.92) 44%,
      rgba(6,8,12,.62) 66%,
      rgba(6,8,12,.34) 84%,
      rgba(6,8,12,.24) 100%);
  transition:.42s var(--ease);
}
.pcard:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.pcard:hover .pcard-img img{transform:scale(1.07)}
.pcard:hover::after{
  background:linear-gradient(to top,
    rgba(4,6,9,.99) 0%,rgba(5,16,26,.98) 28%,rgba(8,28,45,.9) 48%,
    rgba(6,8,12,.6) 72%,rgba(6,8,12,.3) 100%);
}
/* The electrical-devices source is an intentionally busy installed-floor shot;
   deepen its text zone beyond the global card scrim. */
.pcard:nth-child(9)::after{
  background:linear-gradient(to top,rgba(3,5,8,1) 0%,rgba(3,5,8,.99) 38%,rgba(4,7,12,.96) 58%,rgba(6,8,12,.48) 82%,rgba(6,8,12,.26) 100%);
}
.pcard-body{padding:clamp(1.8rem,2.4vw,2.4rem);position:relative}
.pcard-num{
  font-family:'Archivo',sans-serif;font-size:.775rem;font-weight:700;letter-spacing:.2em;
  color:var(--teal);display:block;margin-bottom:.9rem;
}
.pcard h4{margin-bottom:.7rem}
.pcard p{font-size:1.045rem;color:#b9c4d2;line-height:1.58;max-width:44ch;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.pcard-more{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.3rem;
  font-family:'Archivo',sans-serif;font-size:.875rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;opacity:.0;transform:translateY(6px);transition:.38s var(--ease);
}
.pcard:hover .pcard-more{opacity:1;transform:translateY(0)}
@media(hover:none){.pcard-more{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════════════
   ChipperX2 flagship
   ══════════════════════════════════════════════════════════════ */
.chipper{position:relative;overflow:hidden;background:var(--ink-000);border-block:1px solid var(--line-soft);isolation:isolate}
.chipper::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(72% 60% at 74% 44%,rgba(0,171,202,.20),transparent 62%),
    radial-gradient(58% 52% at 22% 82%,rgba(22,104,200,.16),transparent 66%);
}
.chipper-word{
  position:absolute;left:50%;top:clamp(1rem,3vw,3rem);transform:translateX(-50%);z-index:-1;
  font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(8rem,19vw,20rem);
  letter-spacing:-.05em;line-height:.8;color:rgba(255,255,255,.032);white-space:nowrap;user-select:none;
}
.chipper-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,3.6vw,4rem);align-items:center}
.chipper-copy .kicker{
  display:inline-flex;align-items:center;gap:.7rem;font-family:'Archivo',sans-serif;
  font-size:.83rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(255,206,31,.32);background:rgba(255,206,31,.06);
  padding:.55rem 1.15rem;border-radius:999px;margin-bottom:2.1rem;
}
/* the ChipperX2 wordmark is a loud yellow/white gamer treatment that fights the
   restrained brand type — demote it to a small product mark, lead with Archivo */
.chipper-logo{width:clamp(178px,17vw,232px);margin-bottom:1.7rem;opacity:.95}
.chipper-copy h2{font-size:var(--fs-d2);margin-bottom:1.5rem;max-width:15ch}
.chipper-copy h2 .sub{
  display:block;font-size:clamp(1.02rem,1.15vw,1.2rem);font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--teal);margin-bottom:1rem;font-family:'Archivo',sans-serif;
}
.chipper-copy .lead{max-width:52ch;margin-bottom:2.6rem}
.chipper-actions{display:flex;flex-wrap:wrap;gap:1rem}

/* ── product stage: pedestal + glow + floor reflection ── */
.chipper-visual{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(.6rem,1.4vw,1.4rem);min-height:clamp(420px,42vw,660px);
}
.chipper-visual::before{
  content:"";position:absolute;width:104%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(0,171,202,.34),rgba(22,104,200,.14) 44%,transparent 68%);filter:blur(18px);
}
.chipper-visual::after{
  content:"";position:absolute;bottom:7%;left:8%;right:8%;height:52px;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.92),transparent 72%);filter:blur(20px);
}
/* The reflection is taken out of flow so it cannot drag the product off centre:
   with the mirror in the column, the stage was twice the photo's height and the
   photo sat ~240px above the middle of the copy it is supposed to line up with
   (Emil item 11c — "make it centered to the text"). */
.chipper-stage{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
.chipper-stage img.hero-shot{
  position:relative;width:100%;max-width:980px;
  filter:drop-shadow(0 52px 80px rgba(0,0,0,.9)) drop-shadow(0 0 60px rgba(0,171,202,.16));
}
/* The mirrored reflection is only drawn where the browser can actually feather
   it away. Without mask-image support the element rendered as its full bounding
   box: a hard-edged, semi-transparent rectangle sitting under the product — the
   "square shadow behind the chipper photo" Emil reported. It is hidden by
   default and enabled only behind an @supports test, so no engine can paint the
   slab. See tools/find_square_shadow.py for the reproduction. */
.chipper-stage .reflect{display:none}
@supports ((mask-image:linear-gradient(#000,transparent)) or (-webkit-mask-image:linear-gradient(#000,transparent))){
  .chipper-stage .reflect{
    display:block;position:absolute;top:100%;left:50%;width:100%;max-width:980px;
    margin-top:-2px;transform:translateX(-50%) scaleY(-1);
    opacity:.17;filter:blur(2.5px);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 42%);
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 42%);
    pointer-events:none;
  }
}
.chipper-badges{
  position:absolute;inset:auto auto 0 0;display:flex;gap:.6rem;flex-wrap:wrap;
}
.chipper-badge{
  font-family:'Archivo',sans-serif;font-size:.735rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-mid);border:1px solid var(--line);
  background:rgba(10,13,19,.72);backdrop-filter:blur(6px);padding:.45rem .85rem;border-radius:999px;
}

.chipper-specs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);
  margin-top:clamp(4rem,6.5vw,6.5rem);border:1px solid var(--line-soft);
}
.cspec{background:var(--ink-000);padding:clamp(2.1rem,3vw,3rem);transition:background .3s}
.cspec:hover{background:var(--ink-100)}
.cspec .n{
  font-family:'Archivo',sans-serif;font-size:clamp(2.5rem,3.8vw,3.7rem);font-weight:800;
  line-height:1;letter-spacing:-.035em;color:#fff;display:flex;align-items:baseline;gap:.28rem;
}
.cspec .n .u{font-size:.98rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.cspec .t{display:block;margin-top:1.05rem;font-family:'Archivo',sans-serif;font-size:.94rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.cspec .d{display:block;margin-top:.55rem;font-size:1rem;color:var(--tx-lo);line-height:1.55}

.chipper-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,2.6vw,2.8rem);margin-top:clamp(3.2rem,5vw,5rem)}
.cfeat{padding-top:1.6rem;border-top:2px solid var(--line-strong);transition:border-color .3s}
.cfeat:hover{border-top-color:var(--teal)}
.cfeat h4{margin-bottom:.7rem;font-size:1.22rem}
.cfeat p{color:var(--tx-mid);font-size:1.045rem;line-height:1.62}

/* ══════════════════════════════════════════════════════════════
   Story / timeline
   ══════════════════════════════════════════════════════════════ */
.story{position:relative}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(2.5rem,5.5vw,6.5rem);align-items:start}
.story-copy p+p{margin-top:1.35rem}
.story-copy p{color:var(--tx);font-size:1.13rem;line-height:1.76}
.story-figure{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.story-figure img{width:100%;aspect-ratio:4/3.05;object-fit:cover;filter:saturate(.9)}
.story-figure figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.7rem;
  background:linear-gradient(to top,rgba(6,8,12,.96),transparent);
  font-size:.955rem;color:var(--tx);letter-spacing:.02em;
}

.timeline{margin-top:clamp(4.5rem,7vw,7rem);border-top:1px solid var(--line-soft);padding-top:clamp(3rem,4.5vw,4.5rem)}
.tl-track{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line-soft)}
.tl-item{background:var(--ink-050);padding:2.3rem clamp(1.1rem,1.9vw,2rem);position:relative;transition:background .3s}
.tl-item:hover{background:var(--ink-100)}
.tl-item::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--teal);transition:width .5s var(--ease)}
.tl-item:hover::before{width:100%}
.tl-yr{font-family:'Archivo',sans-serif;font-size:1.85rem;font-weight:800;letter-spacing:-.02em;color:var(--teal);display:flex;align-items:flex-end;min-height:2.3em;margin-bottom:1rem}
.tl-yr.is-word{font-size:1.36rem;line-height:1.2;letter-spacing:.005em}
.tl-item h4{font-size:1.13rem;margin-bottom:.55rem}
.tl-item p{font-size:.99rem;color:var(--tx-mid);line-height:1.6}

/* ══════════════════════════════════════════════════════════════
   Clients wall
   ══════════════════════════════════════════════════════════════ */
.clients{background:var(--ink-000);border-block:1px solid var(--line-soft)}
/* ══════════════════════════════════════════════════════════════
   REFERENCES — catalogue logo wall (Emil item 10)
   Every logo from the Main Catalogue, in the catalogue's order. White by
   default, original colour on hover, 6 x 4 = 24 per view, the rest reached by
   sliding. Two images per cell rather than a CSS filter: several marks are
   knocked out of a solid dark box, and grayscale()/brightness() left those as
   dark rectangles punched into the wall. A pre-rendered white silhouette keeps
   the wall even, and the colour art is swapped in on hover exactly as asked.
   ══════════════════════════════════════════════════════════════ */
.logo-slider{position:relative;overflow:hidden;border:1px solid var(--line-soft);background:var(--line-soft)}
.logo-page{
  display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
}
.logo-page:not(.is-active){display:none}
.logo-cell{
  position:relative;background:var(--ink-000);display:flex;align-items:center;justify-content:center;
  padding:clamp(1.7rem,2.6vw,2.6rem) .45rem;min-height:132px;transition:background .3s;
}
.logo-cell.is-link{cursor:pointer}
.logo-cell.is-link:hover,.logo-cell.is-link:focus-visible{background:var(--ink-150);outline:none}
/* R3-6 item 1: Emil - "After howering on the logo with cursor, it shows its
   real color, but it also moves a little to the right. It needs to be static,
   centered, without any movement at all."
   Cause: the resting mark was an IN-FLOW <img width:100%> inside the cell's
   padding box, while the hover mark was position:absolute with left/right
   :.45rem insets. The two states therefore resolved to different boxes, so
   swapping opacity looked like a horizontal shift.
   Fix: both states occupy the SAME absolutely-positioned box, so only opacity
   ever changes. Nothing translates, scales or reflows on hover. */
.logo-cell img{
  position:absolute;left:.45rem;right:.45rem;top:50%;transform:translateY(-50%);
  width:auto;height:74px;margin:0 auto;
  object-fit:contain;object-position:center;transition:opacity .3s var(--ease);
}
.logo-cell .lw-colour{opacity:0}
.logo-cell.is-link:hover .lw-white,
.logo-cell.is-link:focus-visible .lw-white{opacity:0}
.logo-cell.is-link:hover .lw-colour,
.logo-cell.is-link:focus-visible .lw-colour{opacity:1}
/* Non-clickable marks still reveal their colour, so the wall behaves the same
   whether or not a gallery exists yet. */
.logo-cell:hover .lw-white{opacity:0}
.logo-cell:hover .lw-colour{opacity:1}
.logo-cell.is-link::after{
  content:"";position:absolute;inset:auto .55rem .5rem auto;width:6px;height:6px;border-radius:50%;
  background:var(--teal);opacity:0;transition:opacity .3s var(--ease);
}
.logo-cell.is-link:hover::after,.logo-cell.is-link:focus-visible::after{opacity:1}

/* R3-6 item 4: Emil - "Some of the logos have original color really dark /
   black. When we hower over them, they are almost invisible on that dark
   background, underlight the logo when howered over or make the corresponding
   rectangle under the logo in lighter color."
   These cells are tagged .is-dark in the markup (see tools/r3_references.py,
   DARK_ON_HOVER) and get a light plate on hover so near-black brand art reads.
   The plate is the cell background, so the mark itself is never recoloured. */
.logo-cell.is-dark:hover,
.logo-cell.is-dark:focus-visible{background:#eef1f5}
.logo-cell.is-dark.is-link:hover,
.logo-cell.is-dark.is-link:focus-visible{background:#eef1f5}
.logo-cell.is-dark.is-link:hover::after,
.logo-cell.is-dark.is-link:focus-visible::after{background:#0a0d13}

.lw-word{
  font-family:'Archivo',sans-serif;font-size:.95rem;font-weight:800;letter-spacing:-.01em;
  line-height:1.25;text-align:center;color:#fff;opacity:.92;
}
.logo-cell:hover .lw-word{opacity:1}

.logo-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.6rem}
.lw-btn{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:3px;
  color:var(--tx);cursor:pointer;transition:.25s var(--ease);
}
.lw-btn:hover:not(:disabled){color:#fff;border-color:#fff;background:rgba(255,255,255,.05)}
.lw-btn:disabled{opacity:.34;cursor:default}
.lw-dots{display:flex;align-items:center;gap:.5rem}
.lw-dot{
  width:7px;height:7px;border-radius:50%;background:var(--line-strong);
  border:0;padding:0;cursor:pointer;transition:.25s var(--ease);
}
.lw-dot.is-on{background:var(--teal);transform:scale(1.25)}
@media(max-width:1080px){.logo-page{grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.logo-page{grid-template-columns:repeat(3,1fr)}.logo-cell{min-height:108px;padding:1.2rem .35rem}.logo-cell img{height:56px}}
@media(max-width:420px){.logo-page{grid-template-columns:repeat(2,1fr)}}

.clients-note{margin-top:2.4rem;font-size:.975rem;color:var(--tx-lo)}

/* R3-7: the Global Reach section (.reach-grid/.reach-cell) and its partner
   tiles (.events/.event/.event-logo) were deleted from the site on the CEO
   decision relayed in Web Revision 2. All rules removed with the markup. */

/* ══════════════════════════════════════════════════════════════
   CTA
   ══════════════════════════════════════════════════════════════ */
.cta{position:relative;overflow:hidden;isolation:isolate;border-block:1px solid var(--line-soft)}
.cta-bg{position:absolute;inset:0;z-index:-2}
.cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.26;filter:saturate(.8)}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(96deg,var(--ink-000) 22%,rgba(6,8,12,.9) 52%,rgba(6,8,12,.68))}
.cta-inner{max-width:900px}
.cta h2{margin-bottom:1.7rem}
.cta .lead{margin-bottom:2.9rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:1.05rem;align-items:center}
.cta-direct{display:flex;flex-wrap:wrap;gap:2.6rem;margin-top:3.4rem;padding-top:2.6rem;border-top:1px solid var(--line)}

/* R3-8b: Emil — "Above the join the elite title, there is lot of blank space,
   and because of that we cannot see the contact info until scrolling down.
   Optimize it the way, that when Contact Us buttons is clicked, the whole
   section will be visible without scrolling."
   Measured on the deployed site before this change: clicking the nav button
   left the section starting 559px down a 900px viewport, with the contact
   details ending at 1451px - i.e. off screen. The section itself was 1015px
   tall against 714px of usable height under the 186px fixed header.
   So the contact CTA gets its own tightened metrics and a scroll-margin equal
   to the header height, instead of the site-wide -64px anchor nudge. Other
   .cta blocks (category pages) keep the roomier spacing. */
#contact.cta > .shell.section{padding-block:clamp(2rem,3vw,2.5rem)}
#contact.cta h2{margin-bottom:.75rem}
#contact.cta .lead{margin-bottom:1.35rem;max-width:64ch}
#contact.cta .cta-direct{margin-top:1.5rem;padding-top:1.35rem;gap:1.1rem 2.4rem}
#contact.cta .eyebrow{margin-bottom:.5rem}
@media(min-width:761px){
  /* html already sets scroll-padding-top:210px, which is what positions an
     anchor landing under the fixed header. The global section[id]
     scroll-margin-top:-64px then claws 64px back, which is what left the
     heading mid-viewport. Zero the nudge for this one section - measured
     landing goes from 396px down a 900px viewport to 210px, and the section is
     675px tall, so heading through contact details all fit in 900px. */
  #contact.cta{scroll-margin-top:0}
}
@media(max-width:760px){
  /* Phones: scroll-padding-top is 150px, leaving ~694px. The section measured
     948px (h2 186 + lead 181 + stacked full-width buttons 160 + 3 stacked
     contact rows 282), so type and both stacks are tightened until the whole
     block fits one screen. */
  #contact.cta{scroll-margin-top:0}
  #contact.cta > .shell.section{padding-block:1.35rem}
  #contact.cta h2{font-size:clamp(1.6rem,7.2vw,2rem);line-height:1.14;margin-bottom:.6rem}
  #contact.cta .lead{font-size:.95rem;line-height:1.5;margin-bottom:1rem}
  #contact.cta .cta-actions{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.7rem}
  #contact.cta .cta-actions .btn{width:auto;flex:1 1 auto;padding-inline:1.05rem;font-size:.92rem}
  #contact.cta .cta-direct{
    display:grid;grid-template-columns:1fr 1fr;
    margin-top:1.05rem;padding-top:.95rem;gap:.8rem 1.1rem;
  }
  #contact.cta .cta-direct > :last-child:nth-child(odd){grid-column:1 / -1}
  #contact.cta .cta-direct .lbl{font-size:.7rem}
  #contact.cta .cta-direct .val{font-size:.9rem;overflow-wrap:anywhere}
}
.cta-direct .lbl{display:block;font-size:.815rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--tx-lo);margin-bottom:.6rem}
.cta-direct .val{font-family:'Archivo',sans-serif;font-size:1.3rem;font-weight:700;color:#fff}
.cta-direct a.val:hover{color:var(--teal)}

/* ══════════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════════ */
.ftr{background:var(--ink-000);padding-top:clamp(4.5rem,7vw,7rem)}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,4rem);padding-bottom:clamp(3.5rem,5vw,5rem)}
.ftr-brand img{width:238px;margin-bottom:1.7rem}
.ftr-brand p{font-size:1.03rem;color:var(--tx-mid);max-width:38ch;line-height:1.72}
.ftr h5,.ftr .ftr-h5{font-family:'Archivo',sans-serif;font-size:.83rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin:0 0 1.5rem}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.82rem}
.ftr a{font-size:1.03rem;color:var(--tx-mid);transition:color .22s}
.ftr a:hover{color:#fff}
.ftr address{font-style:normal;font-size:1.03rem;color:var(--tx-mid);line-height:1.8}
.ftr address a{display:block}
.ftr-bottom{
  border-top:1px solid var(--line-soft);padding-block:2.1rem;
  display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:space-between;align-items:center;
  font-size:.94rem;color:var(--tx-lo);
}
.ftr-legal{display:flex;flex-wrap:wrap;gap:1.7rem}

/* ══════════════════════════════════════════════════════════════
   CATALOGUE — landing, category and product-detail pages
   Same surface ladder as the rest of the site. The only new idea here is the
   "plate": catalogue photography is shot as a cut-out on a light studio
   background, so each image gets a light, inset panel that frames it instead
   of a dark scrim trying to fight it.
   ══════════════════════════════════════════════════════════════ */
/* Sub-pages have no hero image, so they carry the fixed header's clearance
   themselves — same figures as .hero. */
.page-top{padding-top:clamp(158px,12vw,182px);padding-bottom:var(--sec)}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

.crumb{margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .55rem;
  font-size:.93rem;color:var(--tx-lo)}
.crumb li{display:flex;align-items:center;gap:.55rem;min-width:0}
.crumb li+li::before{content:"/";color:rgba(255,255,255,.22)}
.crumb a{transition:color .22s}
.crumb a:hover{color:#fff}
.crumb [aria-current]{color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}

.page-head{max-width:74ch;margin-bottom:clamp(2rem,3vw,2.9rem)}
h1.ttl{font-size:var(--fs-d1);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin-bottom:1.2rem}
h1.ttl.is-product{font-size:var(--fs-d2);line-height:1.05}
.page-head .lead{max-width:60ch}
.page-intro{margin-top:.9rem;max-width:68ch;font-size:.98rem;line-height:1.6;color:var(--tx-lo)}

/* R3-18: link to the Casino Currency and Master Playing Cards catalogue from
   the Currency/Playing Cards category pages. Same visual language as .doccard
   on the Catalogues page, in a single inline row. */
.catref{
  display:inline-flex;align-items:center;gap:1rem;margin-top:1.5rem;max-width:640px;
  padding:1rem 1.35rem;border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--ink-100);transition:.3s var(--ease);color:var(--tx-mid);
}
.catref:hover{border-color:var(--gold);background:var(--ink-150)}
.catref > svg{flex:none;color:var(--gold)}
.catref-tx{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.catref-tx strong{font-family:'Archivo',sans-serif;font-size:1.02rem;font-weight:700;color:#fff;letter-spacing:-.005em}
.catref-tx span{font-size:.92rem;line-height:1.5}
.catref .ar{flex:none;margin-left:auto;color:var(--gold);transition:transform .3s var(--ease)}
.catref:hover .ar{transform:translateX(4px)}
@media(max-width:560px){
  .catref{gap:.8rem;padding:.9rem 1.05rem;align-items:flex-start}
  .catref .ar{display:none}
}

/* ── the light plate ── */
.catcard-plate,.hubcard-plate,.plcard-plate,.pdp-plate{
  display:block;position:relative;overflow:hidden;border-radius:2px;
  background:linear-gradient(176deg,#f7f8fa 0%,#eceff3 62%,#e2e6ec 100%);
  box-shadow:inset 0 0 0 1px rgba(6,8,12,.16);
}
.catcard-plate img,.hubcard-plate img,.plcard-plate img,.pdp-plate img{
  width:100%;height:100%;object-fit:contain;aspect-ratio:4/3;
  transition:transform .8s var(--ease);
}
.catcard-plate .is-scene{object-fit:cover}

/* ── catalogue landing: category cards ── */
.cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,1.7vw,1.8rem)}

/* Download cards on products/catalogues.html carry no photograph, so they need their
   own rhythm: the file-size eyebrow is what signals "this is a document", and the
   leading card spans two columns so seven cards resolve into full rows instead of
   leaving one stranded on its own line. */
.catcard.is-doc{min-height:0}
.catcard.is-doc .catcard-body{gap:.15rem;padding:clamp(1.35rem,1.7vw,1.7rem)}
.catcard.is-doc .catcard-count{color:var(--teal)}
.catcard.is-doc .catcard-name{margin-top:.35rem}
.catcard.is-doc .catcard-lead{margin-bottom:1.35rem}
.catcard.is-doc .catcard-more{margin-top:auto}
.catcard.is-doc::before{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--teal),rgba(0,0,0,0));
  opacity:.75;transition:opacity .25s var(--ease);
}
.catcard.is-doc:hover::before{opacity:1}
.catcard.is-doc.is-lead{grid-column:span 2}
@media(max-width:1080px){.catcard.is-doc.is-lead{grid-column:span 1}}

/* the closing "ask us" cell: same card, but reads as an invitation not a file */
.catcard.is-doc.is-ask{background:var(--ink-100)}
.catcard.is-doc.is-ask::before{background:linear-gradient(90deg,var(--gold),rgba(0,0,0,0))}
.catcard.is-doc.is-ask .catcard-count{color:var(--gold)}
.catcard.is-doc.is-ask .catcard-more{color:var(--gold)}

/* ── catalogue cards: cover preview + Open / Download (Emil item 5) ──
   The old site showed the front page and let you read it before committing to a
   22 MB download, so the plate is a real link to the PDF and the two actions are
   explicit. Covers vary between portrait and landscape, so the plate is a fixed
   4/3 window — the same plate aspect the product grids use. The covers themselves are pre-rendered onto a matching 3/4 plate by
   tools/make_catalogue_covers.py so portrait and landscape covers read as one set
   rather than one cover plus two floating product shots — the cover art is scaled
   to fit inside the plate, never cropped. */
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,2.2vw,2.4rem)}
@media(max-width:1080px){.doc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.doc-grid{grid-template-columns:1fr}}

.doccard{
  display:flex;flex-direction:column;background:var(--ink-100);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  transition:.36s var(--ease);
}
.doccard:hover{border-color:var(--line-strong);transform:translateY(-4px);background:var(--ink-150)}
.doccard::before{
  content:"";display:block;height:3px;
  background:linear-gradient(90deg,var(--teal),rgba(0,0,0,0));
  opacity:.75;transition:opacity .25s var(--ease);
}
.doccard:hover::before{opacity:1}
.doccard-plate{
  display:block;position:relative;overflow:hidden;background:#0b0e14;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.doccard-plate img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform .8s var(--ease);
}
.doccard:hover .doccard-plate img{transform:scale(1.035)}
.doccard-body{display:flex;flex-direction:column;flex:1 1 auto;padding:clamp(1.35rem,1.8vw,1.8rem)}
.doccard-meta{
  font-family:'Archivo',sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);margin:0 0 .7rem;
}
.doccard-name{font-family:'Archivo',sans-serif;font-size:var(--fs-h4);font-weight:700;
  line-height:1.22;letter-spacing:-.012em;color:var(--tx-hi);margin:0 0 .7rem}
.doccard-lead{font-size:1.005rem;line-height:1.62;color:var(--tx-mid);margin:0 0 1.4rem}
.doccard-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}
.doccard-actions .btn{padding:.82rem 1.05rem;font-size:.82rem}
.catcard{
  display:flex;flex-direction:column;background:var(--ink-100);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  transition:.36s var(--ease);
}
.catcard:hover{border-color:var(--line-strong);transform:translateY(-4px);background:var(--ink-150)}
.catcard:hover .catcard-plate img{transform:scale(1.045)}
.catcard-body{display:flex;flex-direction:column;flex:1 1 auto;padding:clamp(1.6rem,2.1vw,2.1rem)}
.catcard-count{
  font-family:'Archivo',sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);margin-bottom:.85rem;
}
.catcard-name{font-family:'Archivo',sans-serif;font-size:var(--fs-h4);font-weight:700;
  line-height:1.22;letter-spacing:-.012em;color:var(--tx-hi);margin:0 0 .85rem}
.catcard-lead{font-size:1.005rem;line-height:1.62;color:var(--tx-mid);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(3 * 1.62em)}
.catcard-more{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:auto;padding-top:1.4rem;
  font-family:'Archivo',sans-serif;font-size:.845rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;transition:.3s var(--ease);
}
.catcard:hover .catcard-more{color:var(--teal)}

/* ── hub page: three large range cards ── */
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,2vw,2rem)}
.hubcard{
  display:flex;flex-direction:column;background:var(--ink-100);
  border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  transition:.36s var(--ease);
}
.hubcard:hover{border-color:var(--line-strong);transform:translateY(-4px);background:var(--ink-150)}
.hubcard:hover .hubcard-plate img{transform:scale(1.045)}
.hubcard-body{padding:clamp(1.9rem,2.6vw,2.6rem);display:flex;flex-direction:column}
.hubcard-count{
  font-family:'Archivo',sans-serif;font-size:.76rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal);margin-bottom:.9rem;
}
.hubcard-name{font-family:'Archivo',sans-serif;font-size:var(--fs-h3);font-weight:700;
  line-height:1.12;letter-spacing:-.02em;color:var(--tx-hi);margin:0 0 1rem}
.hubcard-lead{font-size:1.03rem;line-height:1.66;color:var(--tx-mid)}

/* ── group headings + jump nav ── */
.grp+.grp{margin-top:clamp(3.4rem,5vw,5rem)}
.grp-title{
  font-family:'Archivo',sans-serif;font-size:clamp(1.12rem,1.35vw,1.35rem);font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;
  display:flex;align-items:center;gap:1rem;margin:0 0 1.35rem;
  padding-bottom:.85rem;border-bottom:1px solid var(--line);
}
.grp-title::before{content:"";width:26px;height:2px;flex:none;background:var(--teal)}
.grp-count{
  margin-left:auto;font-size:.8rem;font-weight:700;letter-spacing:.16em;color:var(--tx-lo);
  border:1px solid var(--line);border-radius:999px;padding:.28rem .8rem;flex:none;
}
.grp-jump{margin-bottom:clamp(1.2rem,1.7vw,1.7rem)}
.grp-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.grp-jump a{
  display:inline-flex;font-family:'Archivo',sans-serif;font-size:.79rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-mid);
  border:1px solid var(--line);border-radius:999px;padding:.38rem .85rem;transition:.25s var(--ease);
}
.grp-jump a:hover{color:#fff;border-color:var(--line-strong);background:rgba(255,255,255,.05)}

/* ── product cards ── */
.pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.1rem,1.7vw,1.8rem)}
/* Series grids keep Emil's rule: roulette left, card table middle, Texas
   Hold'em right. The three-column grid already lands them in that order, so the
   slot is only surfaced as a small label. The triplet is held at three columns
   down to the single-column breakpoint so it never re-wraps two-up and breaks
   the left/middle/right reading. */
.pl-grid.is-series .plcard[data-slot]::before{
  content:attr(data-slot);display:block;
  font-family:'Archivo',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx-mid);
  padding:.7rem clamp(1.1rem,1.5vw,1.5rem) 0;
}
.plcard{
  background:var(--ink-100);border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;transition:.34s var(--ease);
}
.plcard:hover{border-color:var(--line-strong);transform:translateY(-4px);background:var(--ink-150)}
.plcard:hover .plcard-plate img{transform:scale(1.05)}
.plcard-link{display:flex;flex-direction:column;height:100%}
.plcard-body{display:flex;flex-direction:column;flex:1 1 auto;padding:clamp(1.15rem,1.5vw,1.5rem)}
.plcard-name{
  font-family:'Archivo',sans-serif;font-size:1.075rem;font-weight:700;line-height:1.28;
  letter-spacing:-.01em;color:var(--tx-hi);margin:0 0 .6rem;
}
.plcard-blurb{font-size:.965rem;line-height:1.58;color:var(--tx-mid);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.plcard-more{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1.2rem;
  font-family:'Archivo',sans-serif;font-size:.79rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-lo);transition:.28s var(--ease);
}
.plcard:hover .plcard-more{color:var(--teal)}

/* ── tag chips ── */
.tagchips{list-style:none;margin:.95rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.tagchip{
  font-family:'Archivo',sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-lo);border:1px solid var(--line);
  background:rgba(255,255,255,.02);padding:.3rem .68rem;border-radius:999px;line-height:1.5;
}
.plcard:hover .tagchip{border-color:var(--line-strong);color:var(--tx-mid)}
.pdp-copy .tagchips{margin-top:2rem}
.pdp-copy .tagchip{font-size:.735rem;padding:.42rem .9rem;color:var(--tx-mid)}

/* ── product detail ── */
.pdp{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(2.4rem,4.5vw,5rem);align-items:start}
.pdp-visual{position:relative}
.pdp-plate{border-radius:var(--r)}
.pdp-plate img{aspect-ratio:4/3}
.pdp-copy .lead{max-width:52ch;margin-bottom:2rem}
.pdp-body p{font-size:1.075rem;line-height:1.76;color:var(--tx);max-width:56ch}
.pdp-meta{margin:2.4rem 0 0;padding:1.8rem 0 0;border-top:1px solid var(--line);
  display:grid;gap:1.1rem}
.pdp-meta div{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1rem;align-items:baseline}
.pdp-meta dt{font-family:'Archivo',sans-serif;font-size:.755rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tx-lo)}
.pdp-meta dd{margin:0;font-size:1.01rem;color:var(--tx)}
.pdp-meta dd a{color:var(--teal)}
.pdp-meta dd a:hover{color:#fff;text-decoration:underline}
.pdp-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.6rem}
.pdp-note{margin-top:1.6rem;font-size:.95rem;color:var(--tx-lo);max-width:52ch}
.pdp-allbtn{margin-top:clamp(2rem,3vw,2.8rem)}

.pager{
  display:flex;flex-wrap:wrap;gap:1px;background:var(--line-soft);
  border-block:1px solid var(--line-soft);margin-top:clamp(4rem,6vw,6rem);
}
.pager a{
  flex:1 1 260px;min-width:0;background:var(--ink-050);padding:1.7rem clamp(1.2rem,2vw,2rem);
  display:flex;flex-direction:column;gap:.5rem;transition:background .3s;
}
.pager a:hover{background:var(--ink-150)}
.pager .pager-next{text-align:right;align-items:flex-end}
.pager-dir{font-family:'Archivo',sans-serif;font-size:.755rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.pager-name{font-family:'Archivo',sans-serif;font-size:1.06rem;font-weight:700;color:#fff;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* home products grid: cards are real links now */
a.pcard{color:inherit}
.prod-all{margin-top:clamp(2.2rem,3.2vw,3.2rem)}
.prod-all .btn{white-space:normal;text-align:center;max-width:100%}
.mega-link.is-all{color:var(--teal);font-weight:600}
.mega-link.is-all .tx{padding-left:.15rem}

/* ── focus states: keyboard users must always see where they are ── */
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.catcard:focus-visible,.hubcard:focus-visible,.plcard-link:focus-visible,
a.pcard:focus-visible,.pager a:focus-visible{outline-offset:-2px}

@media(max-width:1240px){
  .pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-grid.is-series{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1080px){
  .cat-grid,.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdp{grid-template-columns:1fr}
  .pdp-visual{max-width:720px}
}
@media(max-width:900px){
  .pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-grid.is-series{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .page-top{padding-top:clamp(164px,34vw,202px)}
  .cat-grid,.hub-grid{grid-template-columns:1fr}
  .crumb{margin-bottom:1.8rem}
  .crumb ol{font-size:.87rem}
  .grp-title{font-size:1.02rem;gap:.7rem}
  .grp-count{display:none}
  .pdp-meta div{grid-template-columns:1fr;gap:.2rem}
  .pdp-actions .btn{width:100%}
  .pdp-allbtn{width:100%}
  .pager .pager-next{text-align:left;align-items:flex-start}
}
@media(max-width:520px){
  .pl-grid,.pl-grid.is-series{grid-template-columns:1fr}
  .pl-grid.is-series .plcard[data-slot]::before{padding-top:.55rem}
}

/* ══════════════════════════════════════════════════════════════
   Reveal
   ══════════════════════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
/* Safety net: if JS fails or the observer never fires, content must still render. */
.no-js .rv,.rv.in{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* ══════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════ */
@media(max-width:1340px){
  .nav-link{font-size:.99rem;padding-inline:.4rem}
  .brand img{width:clamp(198px,17vw,238px)}
  .mega{width:min(920px,94vw)}
  .mega-inner{grid-template-columns:minmax(0,1fr) 268px}
}
@media(max-width:1240px){
  .mega-link .thumb{width:44px;height:32px}
}

/* The primary nav carries eight targets once Catalogues is included. Below ~1300px
   they no longer fit beside the brand and the "Request a Quote" button was pushed off
   the right edge, so the header switches to the burger menu earlier than the rest of
   the layout does. Header-only: the content grids keep their own 1080px breakpoint. */
@media(max-width:1300px){
  .nav,.nav-cta{display:none}
  .burger{display:block}
  .hdr.is-open .nav-search{
    display:flex;width:100%;height:auto;margin:.9rem 0 0;padding:1rem;gap:.6rem;
    border-color:var(--line-strong);
  }
  .hdr.is-open .nav-search::after{content:"Search";font-family:'Archivo',sans-serif;font-weight:600;font-size:1.05rem}
  .srch-panel{margin-top:70px;max-width:calc(100% - 2rem)}
  .hdr-main .shell{min-height:88px}
  .brand img{width:212px}
  .hdr.is-open .nav{
    display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:var(--ink-000);border-bottom:1px solid var(--line);
    padding:1rem var(--gutter) 2rem;max-height:calc(100vh - 140px);overflow-y:auto;
  }
  .hdr.is-open .nav-link{font-size:1.34rem;padding:1.1rem 0;border-bottom:1px solid var(--line-soft)}
  .hdr.is-open .nav-link::after{display:none}
  .hdr.is-open .nav-item.has-mega{display:grid;grid-template-columns:1fr 48px;align-items:center}
  .hdr.is-open .mega-toggle{width:48px;height:48px;margin:0;justify-self:end}
  .hdr.is-open .mega{position:static;transform:none;width:100%;opacity:1;visibility:visible;
    pointer-events:auto;box-shadow:none;border:0;background:transparent;padding:.4rem 0 1rem;display:none;grid-column:1/-1}
  .hdr.is-open .nav-item.is-mega-open .mega{display:block}
  .hdr.is-open .nav-cta{display:inline-flex;margin:1.6rem 0 0;width:100%}
  .mega-inner{grid-template-columns:1fr}
  .mega-cols{padding:.4rem 0 1rem}
  .mega-grid{grid-template-columns:1fr;gap:.12rem}
  .mega-link{font-size:1.02rem;padding:.58rem .3rem}
  .mega-link .thumb{width:50px;height:36px}
  .mega-feat{display:none}
}
@media(max-width:1080px){
  :root{--gutter:32px}
  .chipper-grid,.story-grid,.sec-head{grid-template-columns:1fr}
  .sec-head .lead{padding-bottom:0}
  .chipper-visual{order:-1;min-height:auto}
  .chipper-stage img.hero-shot,.chipper-stage .reflect{max-width:620px}
  .chipper-badges{position:static;justify-content:center;margin-top:1.5rem;margin-bottom:.4rem}
  .caps-grid,.chipper-feats{grid-template-columns:1fr 1fr}
  .chipper-specs{grid-template-columns:1fr 1fr}
  .tl-track{grid-template-columns:1fr 1fr}
  .ftr-top{grid-template-columns:1fr 1fr}
  .pcard.is-wide,.pcard.is-tall{grid-column:span 6}
  .pcard{grid-column:span 6}
}
@media(max-width:760px){
  :root{--sec:5rem;--gutter:22px}
  html{scroll-padding-top:150px}
  /* Header surface comes from --hdr; no per-breakpoint colour overrides. */
  .hdr-util .shell{min-height:46px;padding-block:.45rem;gap:.4rem;flex-wrap:nowrap;justify-content:center}
  .util-left{gap:0;justify-content:center;font-size:.91rem;white-space:nowrap}
  .util-item.is-addr{display:none}
  .util-right{display:none}
  .hdr.is-open .nav{background:var(--hdr)}
  .hdr-main .shell,.hdr.is-stuck .hdr-main .shell{min-height:82px}
  .brand img,.hdr.is-stuck .brand img{width:196px}
  .hero{padding-top:clamp(164px,34vw,202px)}
  .hero-stats{grid-template-columns:1fr 1fr}
  .caps-grid,.chipper-feats,.chipper-specs,.tl-track,.ftr-top{grid-template-columns:1fr}
  .pcard,.pcard.is-wide,.pcard.is-tall{grid-column:span 12;min-height:290px}
  .logo-cell{min-height:112px;padding:1.45rem 1.1rem}
  /* height, not max-height: the marks are absolutely positioned now. And the
     opacity nudge must apply to the RESTING mark only - as a blanket rule it
     also lifted .lw-colour off 0, so the hover art showed through underneath. */
  .logo-cell img{height:48px}
  .logo-cell .lw-white{opacity:.9}
  .logo-cell .lw-colour{opacity:0}
  .btn{width:100%;padding-inline:1.4rem}
  .hero-actions,.cta-actions,.chipper-actions{flex-direction:column;align-items:stretch}
  .chipper-word{font-size:26vw}
  .cta-direct{gap:1.8rem}
  .ftr-bottom{flex-direction:column;align-items:flex-start}

  /* Mobile flagship: copy leads, then a commanding product stage without
     desktop reflection or dead vertical space. */
  .chipper-visual{order:initial;padding:1rem 0 0;min-height:0;margin-inline:-1rem}
  .chipper-stage img.hero-shot{width:112%;max-width:none}
  .chipper-stage{transform:none}
  .chipper-stage .reflect{display:none}
  .chipper-badges{margin-top:.8rem;gap:.45rem}
  .chipper-badge{font-size:.67rem;padding:.38rem .66rem}
  .chipper-word{top:1.5rem;left:50%;font-size:25vw;transform:translateX(-50%)}
  .chipper-logo{width:178px}
  .chipper-specs{margin-top:3.2rem}
  .cspec{padding:2rem 1.5rem}

  .pcard{min-height:330px}
  .pcard::after{
    background:linear-gradient(to top,rgba(4,6,9,1) 0%,rgba(4,6,9,.99) 34%,rgba(5,7,11,.94) 53%,rgba(6,8,12,.38) 82%,rgba(6,8,12,.22) 100%);
  }
  .pcard-more{min-height:44px;opacity:1;transform:none;margin-top:.7rem}
  .tl-yr{min-height:auto}
}

/* ══════════════════════════════════════════════════════════════
   PRODUCTION PORTFOLIO GALLERY (poker table subpages — Emil item 8)
   Photographs of delivered tables, captioned with the installation they came
   from. Thumbnails are pre-fitted to the same 4:3 plate as the product grids.
   ══════════════════════════════════════════════════════════════ */
.gallery{margin-top:clamp(3rem,5vw,5rem)}
.gallery-note{color:var(--tx-mid);margin:-.4rem 0 clamp(1.5rem,2.2vw,2.2rem);max-width:62ch}
.gal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.3vw,1.3rem)}
/* Small sets should not sit in a 4-up track with empty cells beside them. */
.gal-grid:has(> :last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.gal-grid:has(> :last-child:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1080px){.gal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.gal-grid{grid-template-columns:1fr}}

/* R3-5: the standalone About Us subpage. Emil asked for the homepage section
   to move here, the gaming-floor photo and its caption to go, the three
   process photographs from Main Catalogue p4 to sit next to the copy, and the
   customer map from p3 with his "more than 50 countries" line beside it.
   The map is his own vector artwork in dark blue on pale blue, so it gets a
   light plate rather than being recoloured (he asked to recolour only if the
   original did not work on the dark background). */
.about-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2.2rem,4.5vw,5rem);align-items:start;
}
.about-copy p{color:var(--tx);font-size:1.1rem;line-height:1.75}
.about-copy p+p{margin-top:1.3rem}
/* Three 3:2 photos stacked in a narrow column measured 1236px against 493px of
   copy - an L-shaped void beside the text. A 2-up mosaic (first photo wide, the
   other two side by side) keeps all three at a sane height next to the copy. */
.about-figs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.2vw,1.1rem)}
.about-fig{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.about-fig:first-child{grid-column:1 / -1}
.about-fig img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:saturate(.92)}
.about-fig:not(:first-child) img{aspect-ratio:1/1}
/* The scrim has to guarantee white-on-photo legibility even where the photo is
   pale (the colour-test print strips and the sawdust in the milling shot both
   go near-white). A gradient that fades to transparent is not enough on those,
   so the caption sits on a solid-to-transparent ramp that stays opaque for the
   full height of the text. */
.about-fig figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.85rem 1.05rem .9rem;
  /* nearly opaque for the whole text block: the milling shot's sawdust is
     bright right up to the frame edge, and a .94 ramp still read MARGINAL in
     review. Only the top 12% feathers, so it is a bar, not a wash. */
  background:linear-gradient(to top,
    rgba(3,5,8,.99) 0%,rgba(3,5,8,.985) 74%,rgba(3,5,8,.86) 88%,transparent 100%);
  font-size:.88rem;line-height:1.38;color:#fff;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}

.about-map{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.6rem,3vw,3.2rem);align-items:center;
  margin-top:clamp(3rem,5vw,5rem);padding:clamp(1.4rem,2.4vw,2.4rem);
  border:1px solid var(--line-soft);border-radius:var(--r);background:var(--ink-050);
}
/* light plate so the catalogue's navy-on-pale-blue map keeps its own colours */
.about-map-plate{background:#fff;border-radius:calc(var(--r) - 4px);padding:clamp(.8rem,1.4vw,1.4rem)}
.about-map-plate img{display:block;width:100%;height:auto}
.about-map-tx p{color:var(--tx-mid);font-size:1rem;line-height:1.6}
.about-map-lead{
  font-family:'Archivo',sans-serif;font-size:clamp(1.3rem,2vw,1.75rem);font-weight:700;
  line-height:1.2;letter-spacing:-.015em;color:#fff;margin:.5rem 0 1rem;
}
/* the timeline drops from five items to four (Emil cut "2005 Company founded") */
.tl-track.is-four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){
  .about-grid{grid-template-columns:1fr}
  .about-map{grid-template-columns:1fr}
  .tl-track.is-four{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .about-figs{grid-template-columns:1fr}
  .about-fig:not(:first-child) img{aspect-ratio:3/2}
  .tl-track.is-four{grid-template-columns:1fr}
}

/* R3-13: live-stream production services on the Live Dealer Studio page.
   Content is lifted verbatim from Apex's own Live Stream page
   (apex-livegaming.com/brizy-7843/) - service names and the two service
   descriptions are theirs, only the obvious "imputs" typo was corrected. */
.livestream{margin-top:clamp(3rem,5vw,5rem)}
.lsvc-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,1.8vw,1.8rem);margin-bottom:clamp(1.6rem,2.4vw,2.4rem)}
.lsvc-hero{padding:clamp(1.2rem,1.8vw,1.8rem);border:1px solid var(--line-soft);border-radius:var(--r);background:var(--ink-100)}
.lsvc-hero h3{font-size:1.14rem;margin:0 0 .55rem}
.lsvc-hero p{color:var(--tx-mid);font-size:.96rem;line-height:1.6;margin:0}
.lsvc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(1rem,1.8vw,1.8rem)}
.lsvc{padding:clamp(1.2rem,1.8vw,1.8rem);border:1px solid var(--line-soft);border-radius:var(--r);background:var(--ink-050);transition:border-color .3s}
.lsvc:hover{border-color:var(--line-strong)}
.lsvc h3{font-size:1.02rem;margin:0 0 .8rem;color:var(--gold);letter-spacing:.02em;text-transform:uppercase}
.lsvc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.lsvc li{position:relative;padding-left:1.1rem;color:var(--tx-mid);font-size:.94rem;line-height:1.5}
.lsvc li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--teal)}
@media(max-width:700px){.lsvc-lead{grid-template-columns:1fr}}

/* R3-15: veneer options sheet on the Perun roulette wheel page. Emil supplied
   the PDF; the preview is page 1 rendered at 150 dpi. */
.veneer{margin-top:clamp(3rem,5vw,5rem)}
.veneer-card{
  display:flex;gap:clamp(1.4rem,2.4vw,2.4rem);align-items:center;max-width:820px;
  padding:clamp(1.1rem,1.8vw,1.8rem);border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--ink-100);transition:.3s var(--ease);
}
.veneer-card:hover{border-color:var(--gold);background:var(--ink-150)}
.veneer-plate{flex:none;width:clamp(120px,15vw,190px);border-radius:calc(var(--r) - 4px);overflow:hidden;background:#fff}
.veneer-plate img{display:block;width:100%;height:auto}
.veneer-tx{display:flex;flex-direction:column;gap:.55rem;min-width:0;color:var(--tx-mid)}
.veneer-tx strong{font-family:'Archivo',sans-serif;font-size:1.12rem;font-weight:700;color:#fff;letter-spacing:-.005em}
.veneer-tx > span{font-size:.94rem;line-height:1.55}
.veneer-go{color:var(--gold);font-weight:600}
.veneer-card:hover .veneer-go .ar{display:inline-block;transform:translateX(4px);transition:transform .3s var(--ease)}
@media(max-width:560px){
  .veneer-card{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .veneer-plate{width:min(210px,60%)}
}

/* R3-19: slidable production gallery (wheels of fortune). Reuses .gal-item and
   the references logo-wall pager controls; only the paging container is new. */
.gal-slider{position:relative}
.gal-page{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.8rem,1.3vw,1.3rem)}
.gal-page:not(.is-active){display:none}
.gal-nav{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:clamp(1.4rem,2vw,2rem)}
@media(max-width:1080px){.gal-page{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.gal-page{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.gal-page{grid-template-columns:1fr}}
.gal-item{
  position:relative;display:block;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line-soft);background:var(--ink-100);transition:.3s var(--ease);
}
.gal-item:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.gal-item img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  transition:transform .7s var(--ease)}
.gal-item:hover img{transform:scale(1.05)}
.gal-cap{
  position:absolute;inset:auto 0 0 0;padding:.75rem .85rem;
  font-family:'Archivo',sans-serif;font-size:.76rem;font-weight:600;letter-spacing:.04em;
  color:#fff;background:linear-gradient(to top,rgba(4,6,10,.92),rgba(4,6,10,0));
  opacity:0;transform:translateY(6px);transition:.28s var(--ease);
}
.gal-item:hover .gal-cap,.gal-item:focus-visible .gal-cap{opacity:1;transform:none}
@media(hover:none){.gal-cap{opacity:1;transform:none}}

/* ═══════════════ NEWS (queue item 11) ═══════════════ */
.news-lead{
  /* minmax(0,1fr), not 1fr: a bare 1fr track is minmax(auto,1fr), so its floor is
     the content's min-content width. The CTA row contains .btn with
     white-space:nowrap, whose min-content is the full label width (~367px), and
     with the card padding that forced a 424px track inside a 346px card on a
     390px viewport. overflow:hidden then silently cropped the heading, the body
     copy and the button label off the right edge. minmax(0,1fr) lets the track
     shrink to the card. */
  display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  border:1px solid var(--line);background:var(--ink-050);overflow:hidden;
  margin-bottom:clamp(3.4rem,6vw,5.6rem);
}
.news-shot{display:block;background:var(--ink-000);border-bottom:1px solid var(--line-soft)}
/* the invitation is a 3.16:1 banner — shown whole, never cropped mid-object */
.news-shot img{display:block;width:100%;height:auto}
.news-body{padding:clamp(1.8rem,3.4vw,3.2rem)}
.news-body h2{font-size:clamp(1.85rem,3.1vw,2.9rem);line-height:1.1;margin:.5rem 0 0}
.news-body .lead{margin:1.5rem 0 0;max-width:70ch}
.news-body .pdp-actions{margin-top:2.1rem}
.news-facts{list-style:none;margin:1.7rem 0 0;padding:0;
  display:grid;gap:.85rem 2.6rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.news-facts li{display:flex;flex-direction:column;gap:.3rem;
  border-left:2px solid var(--teal);padding-left:.95rem}
.news-facts span{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-lo)}
.news-facts strong{color:var(--tx-hi);font-weight:600;font-size:1.02rem;line-height:1.35}

/* ── LinkedIn widget ── */
.li-wrap{margin-bottom:clamp(3rem,5vw,4.5rem)}
/* When the LinkedIn block is the last thing in <main>, its bottom margin sat
   on top of main's 144px padding-bottom and opened a ~190px void above the
   footer that read as an unfinished page. */
.li-wrap:last-child{margin-bottom:0}
.li-wrap .sec-head{margin-bottom:clamp(1.7rem,2.8vw,2.6rem)}
.li-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
.li-grid.is-live{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.li-card{
  display:flex;align-items:center;gap:1.15rem;min-width:0;
  padding:1.35rem 1.5rem;border:1px solid var(--line);background:var(--ink-050);
  transition:border-color .24s var(--ease),background .24s var(--ease),transform .24s var(--ease);
}
.li-card:hover{border-color:var(--line-strong);background:var(--ink-100);transform:translateY(-2px)}
.li-mark{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:#0a66c2;color:#fff}
.li-shot{flex:0 0 auto;width:76px;height:76px;overflow:hidden;background:var(--ink-000)}
.li-shot img{width:100%;height:100%;object-fit:cover;display:block}
.li-txt{display:flex;flex-direction:column;gap:.32rem;min-width:0;flex:1 1 auto}
.li-txt strong{color:var(--tx-hi);font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.li-txt span,.li-txt time{color:var(--tx-lo);font-size:.92rem}
.li-card .ar{flex:0 0 auto;color:var(--tx-lo);transition:transform .24s var(--ease),color .24s}
.li-card:hover .ar{color:#fff;transform:translateX(4px)}

@media(min-width:920px){
  .news-lead{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:600px){
  .news-facts{grid-template-columns:1fr}
  .li-card{padding:1.15rem 1.15rem;gap:.9rem}
  /* the buttons go full width here, so the label must be allowed to wrap rather
     than push the card wider than the viewport */
  .news-body .pdp-actions{flex-direction:column;align-items:stretch}
  .news-body .pdp-actions .btn{white-space:normal;text-align:center;padding-left:1.4rem;padding-right:1.4rem}
}

/* ── homepage news teaser ── */
.clients-more{display:inline-flex;align-items:center;gap:.45rem;margin-left:.75rem;
  color:var(--teal);font-weight:600;transition:color .22s}
.clients-more:hover{color:#fff}
.clients-more .ar{transition:transform .22s var(--ease)}
.clients-more:hover .ar{transform:translateX(4px)}
.news-teaser{display:block;border:1px solid var(--line);background:var(--ink-050);
  overflow:hidden;transition:border-color .26s var(--ease),transform .26s var(--ease)}
.news-teaser:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.news-teaser-shot{display:block;background:var(--ink-000);border-bottom:1px solid var(--line-soft);overflow:hidden}
.news-teaser-shot img{display:block;width:100%;height:auto;transition:transform .5s var(--ease)}
.news-teaser:hover .news-teaser-shot img{transform:scale(1.02)}
.news-teaser-body{display:block;padding:clamp(1.5rem,2.6vw,2.3rem)}
.news-teaser-body .eyebrow{display:block}
.news-teaser-body strong{display:block;color:var(--tx-hi);font-weight:650;margin-top:.55rem;
  font-size:clamp(1.25rem,2.1vw,1.75rem);line-height:1.22}
.news-teaser-meta{display:block;margin-top:.7rem;color:var(--tx-mid)}
.news-teaser-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.15rem;
  color:var(--teal);font-weight:600}
.news-teaser:hover .news-teaser-cta{color:#fff}
.news-teaser-cta .ar{transition:transform .24s var(--ease)}
.news-teaser:hover .news-teaser-cta .ar{transform:translateX(5px)}

/* ── narrow phones: keep the longest hero word on one line ──────────────
   The --fs-hero clamp floor (2.9rem = 46.4px) is sized for a 390px viewport.
   On 320-380px devices "manufacturers" is wider than the content column, so
   the overflow-wrap guard on h1 broke it mid-word ("manufacturer" / "s").
   Scale the floor with the viewport instead.
   11.9vw == 46.4px at exactly 390px, so this meets the clamp floor at the
   breakpoint with no visible step, and leaves the longest word ~8px of slack
   at 320px (12.2vw left only 1.8px, which is too tight to survive font
   fallback or a slightly wider render). Measured, not eyeballed: see the
   Range.getClientRects probe in the commit for this change. */
@media (max-width:390px){
  :root{--fs-hero:11.9vw}
}