/* ==========================================================================
   Vyanshi International N.V. — Lightning Protection
   Redesign design system. Palette locked to the brand logo gradient:
   electric cyan → brand blue → deep teal-navy (storm).
   Dark cinematic hero → calm, credible light body.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* Brand — sampled from the Vyanshi logo mark */
  --ink-900: #061820;   /* deepest storm (hero base)          */
  --ink-850: #08212b;
  --ink-800: #0b2c38;
  --ink-750: #0f3948;
  --teal-700: #105060;  /* wordmark deep teal                 */
  --brand-700: #0f6c92;
  --brand: #1585b0;     /* primary brand blue                 */
  --brand-400: #45a9ce;
  --cyan: #5bc4ec;      /* electric accent / lightning glow    */
  --cyan-200: #97ddf5;

  /* Light body */
  --paper: #f4f7f9;
  --paper-2: #eaeff3;
  --paper-3: #e0e8ec;
  --line: #d7e1e7;
  --line-2: #c6d4dc;
  --ink: #0f3644;       /* deep teal text on light            */
  --ink-soft: #375562;
  --muted: #476069;     /* ≥4.5:1 on paper & paper-2          */

  /* On-dark text */
  --d-fg: #eaf4f8;
  --d-soft: #a9c4cf;
  --d-muted: #7a97a3;

  --white: #ffffff;

  /* Effects */
  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --shadow-s: 0 2px 8px rgba(11, 44, 56, .06);
  --shadow: 0 18px 44px -22px rgba(11, 44, 56, .30);
  --shadow-lg: 0 40px 90px -36px rgba(9, 38, 50, .45);
  --glow: 0 0 40px rgba(91, 196, 236, .45);
  --ring: 0 0 0 3px rgba(21, 133, 176, .30);

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* One shared gutter used site-wide */
  --gutter: clamp(18px, 4vw, 20px);
  --maxw: 1340px;
  --header-h: 76px;

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

/* Desktop: modest inset so content never touches the viewport edge */
@media (min-width: 768px) { :root { --gutter: 25px; } }

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: clamp(15px, 1.05vw, 16.5px);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 8px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Typography --------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 6vw, 4.3rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
p { text-wrap: pretty; }
.tabnum { font-variant-numeric: tabular-nums; }

/* ---------- Layout ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  /* max() keeps the gutter on normal screens but clears the notch when a
     landscape iPhone puts the cutout inside the left or right inset. */
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.section { padding-block: clamp(72px, 9vw, 140px); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--dark { background: var(--ink-900); color: var(--d-fg); }
.section--ink { background: var(--teal-700); color: var(--d-fg); }
.section--paper2 { background: var(--paper-2); }

/* Section header + eyebrow chip */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand);
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 100px;
  background: rgba(21, 133, 176, .06);
}
.section--dark .eyebrow, .section--ink .eyebrow {
  color: var(--cyan); border-color: rgba(91, 196, 236, .3);
  background: rgba(91, 196, 236, .08);
}
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { color: var(--muted); font-size: 1.08rem; max-width: 60ch; }
.section--dark .section-head p, .section--ink .section-head p { color: var(--d-soft); }
.section-head.center p { margin-inline: auto; }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: .96rem;
  letter-spacing: -0.01em;
  padding: 14px 24px; border-radius: 100px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
  color: #fff;
  /* No coloured halo at rest: the solid fill carries the button. The inset
     top highlight is material shading, not glow. Hover lifts with the same
     neutral shadow the cards use, so depth reads consistently sitewide. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1.5px solid var(--line-2);
}
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.section--dark .btn-ghost, .hero .btn-ghost, .section--ink .btn-ghost, .cta-band .btn-ghost, .page-hero .btn-ghost {
  color: var(--d-fg); border-color: rgba(151, 221, 245, .3);
}
.section--dark .btn-ghost:hover, .hero .btn-ghost:hover, .section--ink .btn-ghost:hover, .cta-band .btn-ghost:hover, .page-hero .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-wa { background: #25d366; color: #06331b; width: 100%; }
.btn-wa:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-lg { padding: 17px 30px; font-size: 1.02rem; }
.btn-text {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 600; color: var(--brand);
  transition: gap .25s var(--ease);
}
.btn-text svg { width: 17px; height: 17px; }
.btn-text:hover { gap: 12px; }

/* ---------- Header ------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
}
/* Only animate once the first paint has settled (main.js adds .ready on the next
   frame). Without this the initial solid state fades in and reads as a glitch. */
.site-header.ready {
  transition: background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo img { height: 62px; width: auto; transition: opacity .3s; }
.logo-on-light { display: none; }
/* Push the nav to the right so it sits directly beside the cart */
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  font-family: var(--font-display); font-weight: 500; font-size: .95rem;
  color: var(--d-soft); padding: 9px 14px; border-radius: 100px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--d-fg); background: rgba(151, 221, 245, .08); }
.nav-links a.active { color: var(--cyan); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* Scrolled / light-page state. Light pages get it straight from CSS so the
   header is already correct at first paint, instead of waiting for main.js. */
.site-header.solid,
body.page-light .site-header {
  background: #fff;
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px -22px rgba(11, 44, 56, .5);
}
.site-header.solid .logo-on-dark,
body.page-light .site-header .logo-on-dark { display: none; }
.site-header.solid .logo-on-light,
body.page-light .site-header .logo-on-light { display: block; }
.site-header.solid .nav-links a,
body.page-light .site-header .nav-links a { color: var(--ink-soft); }
.site-header.solid .nav-links a:hover,
body.page-light .site-header .nav-links a:hover { color: var(--brand); background: rgba(21, 133, 176, .07); }
.site-header.solid .nav-links a.active,
body.page-light .site-header .nav-links a.active { color: var(--brand); }
.site-header.solid .cart-btn,
body.page-light .site-header .cart-btn { color: var(--ink); }

/* Pages that are light from the top (no dark hero) render the header solid
   immediately (main.js adds .solid when body.page-light). Header stays fixed. */

/* Mobile sidebar chrome: inert on desktop, switched on in the 860px block. */
.nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 1;
  background: rgba(4, 18, 25, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
.nav-open .nav-overlay { opacity: 1; visibility: visible; }
.nav-close {
  display: none; position: absolute; top: 14px; right: 12px;
  width: 44px; height: 44px; border-radius: 12px;
  place-items: center; color: var(--d-fg); cursor: pointer;
  background: rgba(151, 221, 245, .08); border: 1px solid rgba(151, 221, 245, .18);
  transition: background .2s var(--ease);
}
.nav-close:hover { background: rgba(151, 221, 245, .18); }
.nav-close svg { width: 20px; height: 20px; }
body.nav-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .nav-links, .nav-overlay { transition: none; }
}

.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; position: relative; color: var(--d-fg); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span { top: 21px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

.cart-btn {
  position: relative; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; color: var(--d-fg);
  transition: background .2s, transform .2s;
}
.cart-btn:hover { background: rgba(151, 221, 245, .1); }
.cart-btn svg { width: 22px; height: 22px; }
.cart-btn.pop { animation: pop .4s var(--ease); }
@keyframes pop { 40% { transform: scale(1.18); } }
.cart-count {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 100px; background: var(--cyan); color: var(--ink-900);
  font-size: .7rem; font-weight: 700; display: none; align-items: center; justify-content: center;
  font-family: var(--font-display);
}
.cart-count.show { display: flex; }

/* ==========================================================================
   HERO — cinematic storm + interactive dome / product carousel
   ========================================================================== */
.hero {
  position: relative;
  background:
    radial-gradient(120% 90% at 78% 0%, rgba(21, 133, 176, .28), transparent 55%),
    radial-gradient(90% 70% at 12% 100%, rgba(16, 80, 96, .5), transparent 60%),
    linear-gradient(180deg, #041219 0%, var(--ink-900) 45%, #04141b 100%);
  color: var(--d-fg);
  overflow: hidden;
  isolation: isolate;
}
.hero-sky {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; opacity: .9;
}
/* Real storm photograph behind the dome stage */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  filter: saturate(.7) brightness(.92);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 0%, rgba(21, 133, 176, .2), transparent 55%),
    linear-gradient(180deg, rgba(4, 18, 25, .78) 0%, rgba(6, 26, 35, .62) 42%, rgba(4, 20, 27, .88) 78%, #04141b 100%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(151, 221, 245, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(151, 221, 245, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%);
}
.hero-inner {
  position: relative; z-index: 2;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(14px, 2.5vw, 30px));
  padding-bottom: clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}

/* Hero copy */
.hero-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 14px; border-radius: 100px;
  background: rgba(6, 24, 32, .5);
  border: 1px solid rgba(151, 221, 245, .18);
  backdrop-filter: blur(6px);
  margin-bottom: 26px;
}
.hero-badge img { height: 26px; width: auto; border-radius: 6px; }
.hero-badge .hb-divider { width: 1px; height: 26px; background: rgba(151, 221, 245, .22); }
.hero-badge .hb-text { display: flex; flex-direction: column; line-height: 1.2; padding-right: 6px; }
.hero-badge .hb-title { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--d-fg); }
.hero-badge .hb-sub { font-size: .72rem; color: var(--d-muted); }

.hero h1 { color: #fff; margin-bottom: 16px; text-wrap: balance; font-size: clamp(2.2rem, 4.7vw, 3.5rem); }
.hero h1 .accent { color: var(--cyan); }
.hero-lead {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  color: var(--d-soft); max-width: 46ch; margin-bottom: 24px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.hero-cred { display: flex; flex-direction: column; gap: 14px; }
.dealer-pill {
  display: inline-flex; align-items: center; gap: 9px; width: fit-content;
  padding: 6px 14px 6px 7px; border-radius: 100px;
  background: rgba(6, 24, 32, .5); border: 1px solid rgba(151, 221, 245, .2);
  font-family: var(--font-display); font-weight: 600; font-size: .8rem; color: var(--d-fg);
  transition: border-color .2s, background .2s;
}
.dealer-pill:hover { border-color: rgba(91, 196, 236, .45); background: rgba(21, 133, 176, .18); }
.dealer-pill img { height: 22px; width: auto; border-radius: 5px; }
/* Real certifier marks (extracted from the certificates) as hero trust row */
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.hero-trust li {
  display: flex; align-items: center; gap: 9px;
  font-size: .8rem; color: var(--d-soft); font-weight: 500;
}
.hero-trust .mk {
  display: grid; place-items: center; flex: none;
  height: 34px; min-width: 34px; padding: 4px 6px;
  background: #fff; border-radius: 8px;
}
.hero-trust .mk img { max-height: 26px; max-width: 44px; width: auto; display: block; }

/* ---- Calm cinematic hero: the storm carries the visual, copy gets air ---- */
.hero--calm .hero-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(30px, 6vh, 70px));
  padding-bottom: 0;
}
.hero--calm .hero-copy { max-width: 780px; margin-block: auto; }
.hero--calm h1 { font-size: clamp(2.6rem, 6vw, 4.8rem); margin-bottom: clamp(18px, 3vh, 28px); }
.hero--calm .hero-lead {
  margin-inline: auto; max-width: 52ch;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  margin-bottom: clamp(28px, 5vh, 46px);
}
.hero--calm .hero-actions { justify-content: center; margin-bottom: 0; }
/* Quiet region strip pinned to the bottom of the viewport */
.hero-regions {
  width: 100%;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: clamp(16px, 4vw, 64px);
  padding: clamp(18px, 3vh, 26px) 0 clamp(22px, 4vh, 38px);
  border-top: 1px solid rgba(151, 221, 245, .14);
}
.hero-regions li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.68rem, 1vw, .8rem); letter-spacing: .16em; text-transform: uppercase;
  color: var(--d-soft); white-space: nowrap;
}

/* ---- Global DINNTECO dealer badge (reCAPTCHA-style, injected by main.js) ---- */
.dt-badge {
  position: fixed; right: 0; bottom: 24px; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 10px;
  background: #fff; border: 1px solid var(--line); border-right: none;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 6px 22px rgba(11, 44, 56, .2);
  transform: translateX(calc(100% - 65px));
  transition: transform .3s var(--ease);
}
.dt-badge:hover, .dt-badge:focus-visible { transform: translateX(0); }
.dt-badge img { width: 45px; height: 45px; border-radius: 9px; display: block; flex: none; }
.dt-badge .db-txt {
  white-space: nowrap; font-family: var(--font-display);
  font-size: .74rem; font-weight: 600; color: var(--ink); line-height: 1.35;
}
.dt-badge .db-txt small {
  display: block; font-size: .64rem; font-weight: 500;
  color: var(--muted); letter-spacing: .05em;
}
@media (max-width: 600px) { .dt-badge { bottom: 16px; } }

/* ---- Annotated-sky hero: one full-width dome protecting the region ---- */
.hero--dome .hero-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(8px, 1.6vh, 20px);
}
.hero--dome .hero-copy { max-width: 720px; }
.hero--dome h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); }
.hero--dome .hero-lead { margin-inline: auto; max-width: 54ch; margin-bottom: 20px; }
.hero--dome .hero-actions { justify-content: center; margin-bottom: 0; }
.hero--dome .hero-stage { width: 100%; }
.stage-arena--wide { max-width: min(940px, 100%); height: clamp(200px, 28vh, 330px); }
.stage-arena--wide .dome,
.stage-arena--wide .dome-pulse { width: min(90%, 840px); aspect-ratio: 2 / 0.95; bottom: 13%; }
.stage-arena--wide .dome-floor { width: min(96%, 900px); bottom: 12.5%; }
/* Countries protected under the arc */
.region-marks {
  position: absolute; left: 50%; bottom: calc(13% + 16px); transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3.4vw, 46px); z-index: 2; width: min(86%, 780px); flex-wrap: wrap;
}
.region-marks li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.66rem, 1vw, .8rem); letter-spacing: .15em; text-transform: uppercase;
  color: var(--d-fg); white-space: nowrap;
}
.rm-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--cyan); box-shadow: 0 0 9px rgba(91, 196, 236, .7);
}
.hero-cred--row {
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 20px; margin-top: clamp(4px, 1.4vh, 14px);
}
.hero--dome .hero-hint { margin-top: 12px; }

/* Hero stage */
.hero-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.stage-viewport {
  position: relative; width: 100%;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 8px;
}
.stage-arena {
  position: relative; width: 100%; max-width: 480px; margin-inline: auto;
  height: clamp(260px, 38vh, 420px);
  display: grid; place-items: center;
}
.stage-bolts { position: absolute; inset: -10% -8% 0 -8%; z-index: 3; pointer-events: none; width: 116%; height: 110%; }

/* Protection dome */
.dome {
  position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%);
  width: 102%; aspect-ratio: 2 / 1.34;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    radial-gradient(120% 150% at 50% 100%, rgba(91, 196, 236, .16), transparent 62%);
  border: 1px solid rgba(91, 196, 236, .28);
  border-bottom: none;
  box-shadow: inset 0 0 60px rgba(91, 196, 236, .18);
  z-index: 1;
}
.dome::before, .dome::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border: 1px solid rgba(91, 196, 236, .14);
  border-bottom: none;
}
.dome::before { width: 70%; height: 88%; }
.dome::after { width: 42%; height: 74%; }
.dome-floor {
  position: absolute; left: 50%; bottom: 16.5%; transform: translateX(-50%);
  width: 96%; height: 3px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(91, 196, 236, .55), transparent 75%);
  z-index: 1; filter: blur(1px);
}
.dome-pulse {
  position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%);
  width: 102%; aspect-ratio: 2 / 1.34;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border: 1px solid rgba(91, 196, 236, .5); border-bottom: none;
  z-index: 1; opacity: 0;
}
.stage-arena.strike .dome-pulse { animation: domepulse .7s var(--ease); }
@keyframes domepulse {
  0% { opacity: .8; transform: translateX(-50%) scale(.9); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.12); }
}

/* Product — nudged down so the head sits centred inside the dome
   (the cutouts have long stems, which otherwise reads as "too high") */
.stage-product {
  position: relative; z-index: 2; height: auto; width: auto;
  top: clamp(20px, 5vh, 52px);
  max-height: clamp(240px, 35vh, 380px); max-width: 82%;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .55));
  animation: bob 6s ease-in-out infinite;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.stage-product.swap { opacity: 0; transform: translateY(14px) scale(.96); }
@keyframes bob { 50% { transform: translateY(-12px); } }
.stage-glow {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 72%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(69, 169, 206, .35), transparent 70%);
  z-index: 0; filter: blur(6px);
}
.stage-reflection {
  position: absolute; left: 50%; bottom: 15%; transform: translateX(-50%);
  width: 40%; height: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent 75%);
  z-index: 1; filter: blur(4px);
}

.stage-arrow {
  width: 46px; height: 46px; border-radius: 50%; z-index: 5;
  display: grid; place-items: center; color: var(--d-fg);
  border: 1px solid rgba(151, 221, 245, .22);
  background: rgba(6, 24, 32, .45); backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .2s;
}
.stage-arrow:hover { background: rgba(21, 133, 176, .35); border-color: var(--cyan); transform: scale(1.08); }
.stage-arrow svg { width: 20px; height: 20px; }

/* Spec panel */
.stage-spec {
  width: 100%; max-width: 420px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 12px;
}
.stage-spec-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.spec-range {
  font-family: var(--font-display); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cyan);
}
.spec-name { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 1; margin-top: 4px; }
.spec-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-900); background: var(--cyan); padding: 4px 9px; border-radius: 100px; white-space: nowrap;
}
.spec-stats:empty { display: none; }
.spec-blurb { color: var(--d-soft); font-size: .96rem; line-height: 1.5; max-width: 44ch; }
.stage-spec-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.stage-spec-cta .btn { padding: 12px 20px; font-size: .9rem; }

/* Thumbnail selector */
.stage-thumbs {
  display: flex; gap: 10px; margin-top: 14px; width: 100%; max-width: 420px;
  overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
}
.stage-thumbs::-webkit-scrollbar { display: none; }
.thumb {
  flex: 1 0 0; min-width: 74px; position: relative;
  border: 1px solid rgba(151, 221, 245, .16); border-radius: var(--radius-s);
  background: rgba(6, 24, 32, .4); padding: 8px 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color .2s, background .2s, transform .2s;
}
.thumb img { height: 42px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.4)); }
.thumb .tl { font-size: .64rem; color: var(--d-muted); font-weight: 600; text-align: center; line-height: 1.1; }
.thumb:hover { border-color: rgba(91, 196, 236, .4); transform: translateY(-2px); }
.thumb.active { border-color: var(--cyan); background: rgba(21, 133, 176, .22); }
.thumb.active .tl { color: var(--cyan-200); }

.hero-hint {
  margin-top: 16px;
  font-size: .74rem; color: var(--d-muted); display: flex; align-items: center; gap: 8px;
  z-index: 2;
}
.hero-hint svg { width: 15px; height: 15px; color: var(--cyan); }

/* ==========================================================================
   PARTNERS marquee
   ========================================================================== */
.partners { background: var(--paper); padding-block: clamp(44px, 6vw, 68px); border-top: 1px solid var(--line); }
.partners-label {
  text-align: center; font-family: var(--font-display); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 34px;
}
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; align-items: center; gap: clamp(64px, 9vw, 128px); width: max-content; animation: marquee 42s linear infinite; }
.marquee-track img { height: clamp(38px, 5vw, 54px); width: auto; opacity: .85; transition: opacity .3s, transform .3s; }
.marquee-track img:hover { opacity: 1; transform: scale(1.04); }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Reusable cards / grids
   ========================================================================== */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-s); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }

/* Split feature (Principle) */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
.split-media { position: relative; aspect-ratio: 1/1; display: grid; place-items: center; }
.split-media .sm-brand { width: min(88%, 450px); height: auto; }
.split-copy p { color: var(--d-soft); font-size: 1.08rem; margin-top: 16px; }
.split-copy .lead-2 { color: var(--cyan-200); }

/* Prevention vs Attraction */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); margin-top: 44px; }
.compare {
  border-radius: var(--radius-l); padding: clamp(26px, 3vw, 40px); position: relative; overflow: hidden;
}
.compare h3 { font-size: 1.35rem; margin-bottom: 4px; }
.compare .ch { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.compare .sub { font-size: .9rem; }
.compare ul { display: flex; flex-direction: column; gap: 14px; }
.compare li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; }
.compare li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.compare--old { background: var(--paper-2); border: 1px solid var(--line); }
.compare--old h3 { color: var(--ink-soft); }
.compare--old .sub { color: var(--muted); }
.compare--old li { color: var(--ink-soft); }
.compare--old li svg { color: #c2564e; }
.compare--old .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #f2dedb; color: #b04a42; flex: none; }
.compare--old .ic svg { width: 24px; height: 24px; }
.compare--new {
  background: linear-gradient(160deg, var(--ink-800), var(--ink-900));
  color: var(--d-fg); border: 1px solid rgba(91, 196, 236, .25);
}
.compare--new::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 80% 0%, rgba(91, 196, 236, .18), transparent 60%);
}
.compare--new > * { position: relative; z-index: 1; }
.compare--new h3 { color: #fff; }
.compare--new .sub { color: var(--d-soft); }
.compare--new li svg { color: var(--cyan); }
.compare--new .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(91, 196, 236, .16); color: var(--cyan); flex: none; }
.compare--new .ic svg { width: 24px; height: 24px; }

/* How it works — 3 steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: 48px; }
.step {
  position: relative; padding: 30px 26px; border-radius: var(--radius);
  background: rgba(255,255,255,.03); border: 1px solid rgba(151,221,245,.14);
}
.step-num {
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  color: var(--cyan); letter-spacing: .1em;
}
.step-ic {
  width: 52px; height: 52px; border-radius: 14px; margin: 14px 0 18px;
  display: grid; place-items: center; color: var(--cyan);
  background: rgba(91, 196, 236, .1); border: 1px solid rgba(91, 196, 236, .22);
}
.step-ic svg { width: 26px; height: 26px; }
.step h3 { color: #fff; margin-bottom: 8px; }
.step p { color: var(--d-soft); font-size: .95rem; }
.step-line { position: absolute; top: 54px; right: -13px; width: 26px; height: 2px; background: rgba(91,196,236,.3); z-index: 2; }
.steps .step:last-child .step-line { display: none; }

/* Product ranges */
.range-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.range-card {
  position: relative; overflow: hidden; border-radius: var(--radius-l);
  min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px; color: #fff; isolation: isolate;
  border: 1px solid var(--line);
}
.range-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s var(--ease); }
.range-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,24,32,.15) 0%, rgba(6,24,32,.55) 55%, rgba(6,24,32,.92) 100%); }
.range-card:hover img { transform: scale(1.06); }
.range-card .rc-count { font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-200); }
.range-card h3 { color: #fff; margin: 6px 0 6px; font-size: 1.4rem; }
.range-card p { font-size: .9rem; color: rgba(234,244,248,.82); margin-bottom: 14px; }
.range-card .btn-text { color: var(--cyan-200); }
.range-card .btn-text:hover { color: #fff; }

/* Product cards (catalog) */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }

/* Product slider (home) — scroll-snap track + arrow nudges */
.prod-slider-wrap { position: relative; margin-top: 44px; }
.prod-slider {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 6px;
  /* No visible track: the arrows and drag carry the affordance instead. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.prod-slider::-webkit-scrollbar { display: none; }
.ps-card {
  flex: 0 0 clamp(210px, 22vw, 258px); scroll-snap-align: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.ps-card:hover { border-color: var(--brand); transform: translateY(-3px); }
.ps-media {
  display: grid; place-items: center;
  height: 185px; padding: 16px; background: var(--paper-2);
}
.ps-media img { max-height: 100%; max-width: 78%; object-fit: contain; display: block; }
.ps-info { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.ps-info h3 { font-size: .98rem; }
.ps-info h3 a { color: var(--ink); }
.ps-info h3 a:hover { color: var(--brand); }
.ps-info > p { font-size: .78rem; color: var(--muted); }
.ps-info .btn-add { margin-top: auto; padding-top: 10px; align-self: flex-start; font-size: .84rem; }
.slide-arrow {
  position: absolute; top: 34%; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s);
  display: grid; place-items: center; color: var(--ink);
  transition: border-color .2s, color .2s, transform .2s;
}
.slide-arrow:hover { border-color: var(--brand); color: var(--brand); transform: scale(1.07); }
.slide-arrow.prev { left: -10px; }
.slide-arrow.next { right: -10px; }
.slide-arrow svg { width: 19px; height: 19px; }
.prod-slider-cta { text-align: center; margin-top: 22px; }
@media (max-width: 600px) { .slide-arrow { display: none; } }

/* Featured flagship split (replaces the old 3-card product grid on home) */
.featured-product {
  display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center;
  gap: clamp(28px, 5vw, 64px); margin-top: 56px;
}
.fp-media { position: relative; display: grid; place-items: center; min-height: 340px; }
.fp-media::before {
  content: ""; position: absolute; inset: 8% 4%;
  background: radial-gradient(55% 55% at 50% 45%, rgba(21,133,176,.16), transparent 70%);
  border-radius: 50%;
}
.fp-media img { position: relative; max-height: 420px; width: auto; max-width: 88%; filter: drop-shadow(0 30px 40px rgba(11,44,56,.28)); }
.fp-copy h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin: 14px 0 10px; }
.fp-copy > p { color: var(--muted); max-width: 52ch; margin-bottom: 22px; }
.fp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.product-card { display: flex; flex-direction: column; padding: 22px; border-radius: var(--radius); }
.product-card .product-img {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-s);
  background: radial-gradient(120% 120% at 50% 20%, #fff, var(--paper-2));
  display: grid; place-items: center; overflow: hidden; margin-bottom: 18px;
}
.product-card .product-img img { max-height: 82%; width: auto; filter: drop-shadow(0 16px 20px rgba(11,44,56,.18)); }
.product-card .product-img.photo { padding: 0; background: var(--ink-900); }
.product-card .product-img.photo img { max-height: none; width: 100%; height: 100%; object-fit: cover; filter: none; }
/* Unscoped: the badge sits in both .product-card and .shop-card media tiles.
   position:absolute is load-bearing, not decoration. Those tiles are grid
   containers, so an in-flow badge would become a second grid row and shrink
   the product image. brand-700 on white is 5.9:1, so the pill passes AA. */
.p-badge {
  position: absolute; z-index: 2; top: 12px; left: 12px;
  font-family: var(--font-display);
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--brand-700); color: #fff;
  padding: 5px 11px; border-radius: 100px;
  box-shadow: 0 4px 12px -4px rgba(6, 24, 32, .5);
}
.product-card h3 { margin-bottom: 12px; }
.product-specs { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.product-specs li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink-soft); }
.product-specs svg { width: 17px; height: 17px; color: var(--brand); flex: none; }
.product-card .card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.product-card .btn-add { padding: 11px 16px; font-size: .86rem; }
.btn-add.added { background: linear-gradient(180deg, #17a06a, #0f8657); color: #fff; }

/* Applications gallery */
.apps-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(200px, 24vh, 250px); gap: 16px; margin-top: 48px; }
.app-tile {
  position: relative; overflow: hidden; border-radius: var(--radius-l); color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; isolation: isolate;
}
.app-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--ease); }
.app-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,24,32,.1), rgba(6,24,32,.78)); }
.app-tile:hover img { transform: scale(1.07); }
.app-tile h3 { color: #fff; font-size: 1.25rem; }
.app-tile p { font-size: .86rem; color: rgba(234,244,248,.85); }
.app-tile.wide { grid-column: span 4; }
.app-tile.tall { grid-column: span 2; grid-row: span 2; }
.app-tile.std { grid-column: span 2; }

/* Field installations — horizontal scroll-snap filmstrip of real installs */
.filmstrip {
  display: flex; gap: 18px; margin-top: 44px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 18px;
  scrollbar-width: thin; scrollbar-color: rgba(21,133,176,.5) transparent;
}
.filmstrip figure {
  flex: 0 0 clamp(240px, 26vw, 320px); scroll-snap-align: start;
  margin: 0;
}
.filmstrip .fs-img {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 1; background: var(--paper-2); border: 1px solid var(--line);
}
.filmstrip .fs-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.filmstrip figure:hover .fs-img img { transform: scale(1.06); }
.filmstrip figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-inline: 2px;
}
.filmstrip .fc-t { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--ink); }
.filmstrip .fc-s { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.strip-hint { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.strip-hint svg { width: 15px; height: 15px; }

/* Certifications wall */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.cert-card { padding: 26px 24px; border-radius: var(--radius); background: rgba(255,255,255,.03); border: 1px solid rgba(151,221,245,.14); transition: border-color .3s, transform .3s; }
.cert-card:hover { border-color: rgba(91,196,236,.4); transform: translateY(-3px); }
.cert-card .cc-badge { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; color: var(--cyan); background: rgba(91,196,236,.1); border: 1px solid rgba(91,196,236,.22); }
.cert-card .cc-badge svg { width: 26px; height: 26px; }
.cert-card h3 { color: #fff; font-size: 1.05rem; margin-bottom: 6px; }
.cert-card p { font-size: .86rem; color: var(--d-soft); }
.cert-card .cc-meta { margin-top: 12px; font-size: .74rem; color: var(--cyan-200); font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; }
/* Cert-card issuer logo chip (real marks lifted from the certificates) */
.cert-card .cc-logo { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 8px 12px; margin-bottom: 16px; height: 44px; box-sizing: border-box; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.cert-card .cc-logo img { height: 26px; width: auto; max-width: 96px; object-fit: contain; display: block; }

/* Certifier logo bar — authentic marks extracted from the certificates */
.cert-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: clamp(12px, 1.6vw, 20px); margin-top: 40px; }
.cert-logos .cl-tile { background: #fff; border: 1px solid var(--line); border-radius: 16px; width: clamp(124px, 15vw, 158px); height: 100px; display: grid; place-items: center; padding: 18px 20px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.cert-logos .cl-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(11,18,32,.1); }
.cert-logos .cl-tile img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cert-logos-note { text-align: center; margin-top: 18px; font-size: .82rem; color: var(--muted); }
@media (max-width: 600px) { .cert-logos .cl-tile { width: calc(50% - 8px); } }

/* ---- Bento: embedded DINNTECO film + proof tiles ---- */
.bento {
  display: grid; grid-template-columns: 1.55fr 1fr;
  gap: clamp(14px, 1.6vw, 20px); margin-top: 44px;
}
.bento-tile {
  border-radius: 18px; border: 1px solid var(--line);
  background: var(--paper-2); overflow: hidden; position: relative;
}
.bento-side { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(14px, 1.6vw, 20px); min-width: 0; }
.bento-quote { grid-column: 1 / -1; }

/* Video tile + click-to-load facade */
.bento-video { padding: 0; border: none; background: #04141b; }
.video-facade {
  display: block; width: 100%; aspect-ratio: 16 / 9; position: relative;
  cursor: pointer; border: none; padding: 0; background: #04141b;
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-facade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,20,27,.05), rgba(4,20,27,.5));
  transition: background .3s var(--ease);
}
.video-facade:hover::after { background: linear-gradient(180deg, rgba(4,20,27,.1), rgba(4,20,27,.35)); }
.vf-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: clamp(58px, 6vw, 78px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(21, 133, 176, .92); box-shadow: 0 10px 30px rgba(4,20,27,.5);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.video-facade:hover .vf-play { transform: translate(-50%, -50%) scale(1.08); background: var(--brand); }
.vf-play svg { width: 42%; height: 42%; margin-left: 8%; }
.vf-tag {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  font-family: var(--font-display); font-weight: 600; font-size: .74rem;
  letter-spacing: .04em; color: #eaf6fb; text-shadow: 0 1px 8px rgba(4,20,27,.7);
}
.video-frame { aspect-ratio: 16 / 9; width: 100%; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Stat + certifications tiles */
.bt-stat, .bt-cert { padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; justify-content: center; }
.bt-num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 4.5vw, 3.6rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.bt-num .u { color: var(--brand); }
.bt-cap { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); margin-top: 10px; }
.bt-stat p, .bt-cert p { font-size: .86rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.bt-cert { transition: border-color .25s var(--ease), transform .25s var(--ease); }
.bt-cert:hover { border-color: var(--brand); transform: translateY(-2px); }
.bt-cert-marks { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.bt-cert-marks img { height: 34px; width: auto; max-width: 62px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px; }
.bt-cert p .btn-text { margin-top: 8px; }

/* Testimonial tile */
.bento-quote { padding: clamp(24px, 3vw, 40px); display: grid; gap: 14px; }
.bento-quote .bq-mark { width: 34px; height: 34px; color: var(--brand-400, var(--cyan)); opacity: .8; }
.bento-quote blockquote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem); line-height: 1.5; color: var(--ink);
  max-width: 68ch; text-wrap: pretty;
}
.bento-quote figcaption { display: flex; align-items: center; gap: 12px; font-size: .86rem; color: var(--muted); font-weight: 600; }
.bento-quote figcaption img { height: 30px; width: auto; }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .bento-side { grid-template-rows: auto auto; }
}

/* How-it-works: one continuous field drawing + circled-station legend */
.how-diagram { margin-top: 40px; }
.how-diagram svg { display: block; width: 100%; height: auto; max-height: 46vh; }
.how-legend {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px); margin-top: 26px;
}
.hl-item { display: flex; align-items: flex-start; gap: 14px; }
.hl-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid #fff; color: #fff; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
}
.hl-item h3 { color: #fff; font-size: 1.08rem; margin-bottom: 6px; }
.hl-item p { font-size: .9rem; color: var(--d-soft); }
@media (max-width: 860px) { .how-legend { grid-template-columns: 1fr; } }

/* Stats band */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vw, 40px); }
.stat { text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.8rem, 6vw, 4.8rem); color: #fff; line-height: 1; letter-spacing: -0.03em; }
.stat .num .u { color: var(--cyan); }
.stat .lbl { color: var(--d-soft); font-size: .92rem; margin-top: 8px; }

/* Testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.quote-card { padding: 30px 28px; border-radius: var(--radius); display: flex; flex-direction: column; }
.quote-card .q-mark { font-family: var(--font-display); font-size: 3rem; line-height: .6; color: var(--brand-400); height: 26px; }
.quote-card p { color: var(--ink-soft); margin: 10px 0 20px; font-size: 1rem; }
.quote-card .q-by { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.quote-card .q-by img { height: 30px; width: auto; }
.quote-card .q-by .qn { font-weight: 700; font-family: var(--font-display); font-size: .92rem; }

/* CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-xl); padding: clamp(40px, 6vw, 76px); color: #fff; isolation: isolate; background: linear-gradient(150deg, var(--teal-700), var(--ink-900)); border: 1px solid rgba(91,196,236,.2); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 85% 10%, rgba(91,196,236,.22), transparent 60%); }
.cta-band .eyebrow { margin-bottom: 18px; }
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { color: var(--d-soft); max-width: 52ch; margin: 16px 0 28px; font-size: 1.08rem; }
.cta-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-side { display: flex; flex-direction: column; gap: 14px; }
.cta-side .cs-row { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--radius); background: rgba(255,255,255,.05); border: 1px solid rgba(151,221,245,.14); }
.cta-side .cs-row svg { width: 22px; height: 22px; color: var(--cyan); flex: none; }
.cta-side .cs-row .cs-l { font-size: .76rem; color: var(--d-muted); }
.cta-side .cs-row .cs-v { font-weight: 700; font-family: var(--font-display); color: #fff; }

/* ==========================================================================
   Generic page hero (interior pages)
   ========================================================================== */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #041219, var(--ink-900));
  color: var(--d-fg);
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 96px));
  padding-bottom: clamp(48px, 8vw, 96px);
}
.page-hero .hero-grid { opacity: .7; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin: 18px 0 16px; font-size: clamp(2.2rem, 5vw, 3.6rem); }
.page-hero p { color: var(--d-soft); font-size: 1.12rem; max-width: 62ch; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .82rem; color: var(--d-muted); }
.breadcrumb a:hover { color: var(--cyan); }

/* Prose (about / articles) */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; color: var(--ink); }
.prose p, .prose li { color: var(--ink-soft); font-size: 1.05rem; }
.prose ul { display: flex; flex-direction: column; gap: 10px; }
.prose ul li { display: flex; gap: 12px; }
.prose ul li::before { content: ""; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--brand); flex: none; }

/* Spec table (certifications) */
.spec-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-s); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.st-row:last-child { border-bottom: none; }
.st-row:nth-child(odd) { background: var(--paper); }
.st-k { color: var(--muted); font-size: .92rem; }
.st-v { font-family: var(--font-display); font-weight: 600; color: var(--ink); text-align: right; }

/* Value cards / features */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.feature { padding: 28px 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.feature .f-ic { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; color: var(--brand); background: rgba(21,133,176,.08); margin-bottom: 16px; }
.feature .f-ic svg { width: 26px; height: 26px; }
.feature h3 { margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: .95rem; }

/* Group structure cards */
.group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.group-card { padding: 28px 26px; border-radius: var(--radius); background: rgba(255,255,255,.03); border: 1px solid rgba(151,221,245,.14); }
.group-card .gc-role { font-family: var(--font-display); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.group-card h3 { color: #fff; margin: 8px 0 6px; font-size: 1.15rem; }
.group-card p { color: var(--d-soft); font-size: .9rem; }

/* Timeline */
.timeline { margin-top: 44px; position: relative; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--brand), transparent); }
.tl-item { position: relative; padding-bottom: 34px; }
.tl-item::before { content: ""; position: absolute; left: -28px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 3px solid var(--brand); box-shadow: 0 0 0 4px rgba(21,133,176,.12); }
.tl-item .tl-year { font-family: var(--font-display); font-weight: 700; color: var(--brand); font-size: .9rem; }
.tl-item h3 { margin: 4px 0 6px; font-size: 1.15rem; }
.tl-item p { color: var(--muted); font-size: .96rem; }

/* Region list */
.region-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
.region { display: block; padding: 22px; border-radius: var(--radius); background: rgba(255,255,255,.03); border: 1px solid rgba(151,221,245,.14); transition: transform .3s var(--ease), background .3s, border-color .3s; }
a.region:hover { transform: translateY(-4px); background: rgba(255,255,255,.06); border-color: rgba(91,196,236,.45); }
.region-flag { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: #fff; overflow: hidden; border: 1px solid rgba(255,255,255,.22); margin-bottom: 14px; }
.region-flag img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.region h3 { color: #fff; font-size: 1.05rem; margin: 0 0 4px; }
.region p { color: var(--d-soft); font-size: .85rem; }
.region-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--cyan); opacity: .8; transition: gap .25s var(--ease), opacity .25s; }
.region-go svg { width: 15px; height: 15px; }
a.region:hover .region-go { gap: 10px; opacity: 1; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-family: var(--font-display); font-weight: 600; font-size: .86rem; margin-bottom: 8px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-s);
  border: 1.5px solid var(--line-2); background: #fff; transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--brand); box-shadow: var(--ring); outline: none; }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: .82rem; color: var(--muted); }
.info-card { padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); margin-bottom: 16px; }
.info-card .ic-row { display: flex; gap: 14px; align-items: flex-start; }
.info-card .ic-row + .ic-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.info-card svg { width: 22px; height: 22px; color: var(--brand); flex: none; margin-top: 2px; }
.info-card .ic-l { font-size: .78rem; color: var(--muted); }
.info-card .ic-v { font-weight: 600; }
.form-success { display: none; padding: 18px; border-radius: var(--radius-s); background: #def0e4; color: #0f6b3c; border: 1px solid #b6dfc2; font-weight: 600; align-items: center; gap: 10px; }
.form-success.show { display: flex; }

/* Blog */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.post-card { border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card .pc-media { aspect-ratio: 16/10; overflow: hidden; }
.post-card .pc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.post-card:hover .pc-media img { transform: scale(1.05); }
.post-card .pc-body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.post-card .pc-tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.post-card h3 { margin: 8px 0 10px; font-size: 1.2rem; }
.post-card p { color: var(--muted); font-size: .92rem; margin-bottom: 16px; }
.post-card .btn-text { margin-top: auto; }

/* FAQ */
.faq-list { max-width: 820px; margin: 40px auto 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; }
.faq-q .fq-ic { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: transform .3s, background .2s, color .2s, border-color .2s; }
.faq-q .fq-ic svg { width: 16px; height: 16px; }
.faq-item.open .fq-ic { transform: rotate(45deg); background: var(--brand); color: #fff; border-color: var(--brand); }
/* Accordion collapse via grid-template-rows 0fr->1fr (no layout-property
   animation). The <p> child must carry overflow:hidden + min-height:0 so it
   clips flat at 0fr. Driven by .faq-item.open — no inline max-height needed. */
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq-a > p { overflow: hidden; min-height: 0; color: var(--muted); padding: 2px 4px 22px 0; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--paper-2); color: var(--muted); border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 92px); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
/* width:auto is required: the intrinsic width="" attribute acts as a low-specificity
   CSS width, so pinning only height would squash the logo. */
.footer-brand img { height: 46px; width: auto; margin-bottom: 18px; }
.footer-brand p { font-size: .92rem; max-width: 34ch; }
.footer-col h4 { font-family: var(--font-display); color: var(--ink); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col a { display: block; font-size: .92rem; padding: 5px 0; color: var(--ink-soft); transition: color .2s; }
.footer-col a:hover { color: var(--brand); }
.footer-contact li { display: flex; gap: 12px; margin-bottom: 14px; font-size: .92rem; }
.footer-contact svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 3px; }
.footer-contact a { color: var(--ink-soft); transition: color .2s; }
.footer-contact a:hover { color: var(--brand); }
/* One centred sentence: name, rights, the two policies and the build credit. */
.footer-bottom { padding: 24px 0 32px; font-size: .84rem; color: var(--muted); text-align: center; }
.footer-bottom p { margin: 0; line-height: 1.9; }
.fb-sep { margin: 0 6px; color: var(--line-2); }
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--brand); }
/* The build credit reads as part of the sentence: same muted colour and weight
   as Privacy and Terms, picking up the shared blue only on hover. */
.footer-credit a { color: inherit; font-weight: inherit; }

/* ==========================================================================
   CART drawer (injected by cart.js)
   ========================================================================== */
.cart-overlay { position: fixed; inset: 0; background: rgba(4,18,25,.55); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 150; }
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(410px, 92vw); background: var(--paper); box-shadow: -30px 0 80px -30px rgba(4,18,25,.6); transform: translateX(100%); transition: transform .38s var(--ease); z-index: 151; display: flex; flex-direction: column; }
.cart-drawer.open { transform: none; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.cart-head h3 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.cart-head h3 svg { width: 22px; height: 22px; color: var(--brand); }
.cart-close { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-soft); }
.cart-close:hover { background: var(--paper-2); }
.cart-close svg { width: 20px; height: 20px; }
.cart-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.cart-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cl-media { width: 56px; height: 56px; border-radius: 10px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.cl-media img { max-width: 82%; max-height: 82%; width: auto; }
.cl-name { font-weight: 700; font-family: var(--font-display); font-size: .95rem; }
.cl-sub { font-size: .8rem; color: var(--muted); }
.cl-remove { width: 44px; height: 44px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); }
.cl-remove:hover { background: #f2dedb; color: #b04a42; }
.cl-remove svg { width: 18px; height: 18px; }
.cart-empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.cart-empty .ce-ic { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; background: var(--paper-2); color: var(--brand); }
.cart-empty .ce-ic svg { width: 28px; height: 28px; }
.cart-foot { padding: 20px 24px; border-top: 1px solid var(--line); background: var(--paper-2); }
.cart-summary { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cart-summary .lbl { color: var(--muted); font-size: .9rem; }
.cart-summary .val { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; }
.cart-foot .note { font-size: .78rem; color: var(--muted); margin-bottom: 16px; line-height: 1.5; }

/* ==========================================================================
   Reveal / motion utilities
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }
.reveal[data-d="5"] { transition-delay: .40s; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; gap: 24px; min-height: auto; }
  .hero-copy { max-width: 640px; }
  .hero-stage { order: 2; }
  .range-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .apps-grid { grid-template-columns: repeat(4, 1fr); }
  .app-tile.wide { grid-column: span 4; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; }
  .featured-product { grid-template-columns: 1fr; gap: 24px; }
  .fp-media { min-height: 0; }
  .fp-media img { max-height: 320px; }
  .feature-grid, .group-grid { grid-template-columns: repeat(2, 1fr); }
  .region-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav-cta .btn-primary { display: none; }
  .nav-toggle { display: block; }
  .site-header.solid .nav-toggle { color: var(--ink); }

  /* Off-canvas sidebar. visibility (not just transform) is toggled so the
     links are not keyboard-reachable while the panel is closed. */
  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
    width: min(320px, 86vw);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 76px 16px 24px;
    background: var(--ink-900);
    border-left: 1px solid rgba(151, 221, 245, .14);
    box-shadow: -30px 0 80px -30px rgba(4, 18, 25, .85);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform .34s var(--ease), visibility .34s var(--ease);
  }
  .nav-open .nav-links { transform: none; visibility: visible; }
  .nav-links a {
    color: var(--d-fg); font-size: 1.05rem; padding: 14px; border-radius: 10px;
  }
  .site-header.solid .nav-links a,
  body.page-light .site-header .nav-links a { color: var(--d-fg); }
  .nav-links a.active,
  .site-header.solid .nav-links a.active { color: var(--cyan); background: rgba(151, 221, 245, .08); }
  .nav-close { display: grid; }
  .nav-overlay { display: block; }
  .steps { grid-template-columns: 1fr; }
  .step-line { display: none; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .quote-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .cta-inner { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .compare-grid { grid-template-columns: 1fr; }
  .range-grid, .cert-grid, .apps-grid, .product-grid, .feature-grid, .group-grid, .region-grid, .post-grid { grid-template-columns: 1fr; }
  .app-tile.wide, .app-tile.tall, .app-tile.std { grid-column: span 1; grid-row: auto; }
  .region-marks { gap: 8px 18px; bottom: calc(13% + 6px); }
  .region-marks li { letter-spacing: .1em; }
  .apps-grid { grid-auto-rows: 200px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .stage-viewport { grid-template-columns: 1fr; }
  .stage-arrow { position: absolute; top: 38%; }
  .stage-arrow.prev { left: 0; }
  .stage-arrow.next { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .stage-product { animation: none; }
  .marquee-track { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Article pages (blog posts) + legacy page support
   ========================================================================== */
.article-hero { max-width: 800px; margin: 0 auto; text-align: center; }
.article-hero h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-top: 12px; }
.bc-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; font-size: .84rem; color: var(--muted); }
.bc-meta .cat { color: var(--brand); font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .74rem; }
.bc-meta span + span { position: relative; }
.article-cover { max-width: 960px; margin: 40px auto; border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--shadow); }
.article-cover img { width: 100%; height: auto; display: block; }
.article { max-width: 720px; margin: 0 auto; }
/* Location/service pages pair a left-aligned .page-hero with an .article body:
   keep the reading column on the same left edge as the hero, not centered. */
.section-tight { padding-block: clamp(44px, 5.5vw, 72px); }
.page-doc .article { margin-inline: 0; }
.page-doc .page-hero h1 { max-width: 22ch; }
.page-doc .page-hero .lead { max-width: 62ch; }
/* Separate the breadcrumb, the eyebrow pill and the H1 so their boxes
   never overlap (the pill is inline-flex and would otherwise ride up
   into the breadcrumb line). */
.page-hero .breadcrumb { margin-bottom: 22px; }
.page-hero .eyebrow { margin-bottom: 6px; }
.page-hero .breadcrumb + .eyebrow { display: inline-flex; }
.article > * + * { margin-top: 1.2em; }
.article p, .article li { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.75; }
.article h2 { margin-top: 1.6em; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.article h3 { margin-top: 1.4em; }
.article .bullets { display: flex; flex-direction: column; gap: 12px; }
.article .bullets li { display: flex; gap: 12px; padding-left: 0; }
.article .bullets li::before { content: ""; width: 8px; height: 8px; margin-top: 9px; border-radius: 50%; background: var(--brand); flex: none; }
.article blockquote { position: relative; margin: 1.8em 0; padding: 30px 30px 26px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; font-weight: 500; color: var(--ink); font-style: normal; }
.article blockquote::before { content: "\201C"; position: absolute; top: 4px; left: 18px; font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--brand-400); }
.article blockquote > :first-child { margin-top: 6px; }

/* ==========================================================================
   LOCATION / SERVICE PAGES — stat band, risk cards, sector grid, office card
   ========================================================================== */
.loc-intro { max-width: 64ch; }
.loc-intro p { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.75; }
.loc-intro p + p { margin-top: 1.1em; }

/* Intro + credential aside (fills the space beside the lede) */
.loc-lede { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(28px, 3.4vw, 56px); align-items: start; }
.loc-lede .loc-intro { max-width: none; }
.loc-aside {
  background: linear-gradient(160deg, #fff, var(--paper) 120%);
  border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: clamp(24px, 2.4vw, 32px); box-shadow: var(--shadow-s);
}
/* Installed-reference photo beside the lede */
.loc-shot {
  position: relative; overflow: hidden; border-radius: var(--radius-l);
  border: 1px solid var(--line); box-shadow: var(--shadow-s); background: var(--paper-2);
}
.loc-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.loc-shot:hover img { transform: scale(1.04); }
.loc-shot figcaption { display: flex; gap: 13px; align-items: flex-start; padding: 17px 20px; background: #fff; border-top: 1px solid var(--line); }
.loc-shot .lsh-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ink-900); color: var(--cyan); }
.loc-shot .lsh-ic svg { width: 19px; height: 19px; }
.loc-shot b { display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: .98rem; margin-bottom: 2px; }
.loc-shot span { display: block; color: var(--muted); font-size: .88rem; line-height: 1.45; }
/* Flag/map variant: contain the silhouette rather than crop it */
.loc-shot--flag img {
  aspect-ratio: 4 / 3; object-fit: contain;
  padding: clamp(16px, 1.6vw, 24px);
  background: radial-gradient(circle at 50% 45%, #fff, var(--paper) 100%);
}
.loc-shot--flag:hover img { transform: none; }
/* Flag maps that ship with an opaque white background: multiply against a
   pure-white card so the white drops out and the colours stay accurate. */
.loc-shot--multiply { background: #fff; }
.loc-shot--multiply img { background: #fff; mix-blend-mode: multiply; }

.loc-aside .eyebrow { margin-bottom: 12px; }
.loc-aside h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; color: var(--ink); margin-bottom: 18px; letter-spacing: -.01em; }
/* Areas-covered chips */
.la-areas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.la-areas li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 100px;
  background: var(--paper-2); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .88rem; font-weight: 500;
}
.la-areas li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.la-note { display: flex; gap: 11px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 18px; }
.la-note svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 2px; }
.la-note span { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.la-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; color: var(--brand); font-size: .95rem; transition: gap .25s var(--ease); }
.la-link:hover { gap: 12px; }
.la-link svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .loc-lede { grid-template-columns: 1fr; } }

/* Stat band */
.loc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-l); overflow: hidden; margin-top: clamp(32px, 4vw, 48px);
}
.loc-stat { background: #fff; padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2vw, 28px); }
.loc-stat .ls-n {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; color: var(--ink);
  font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: 1;
}
.loc-stat .ls-n span { color: var(--brand); font-size: .62em; margin-left: 2px; }
.loc-stat .ls-l { margin-top: 10px; color: var(--muted); font-size: .92rem; line-height: 1.4; }

/* Section heading inside these pages */
.loc-block { margin-top: clamp(48px, 6vw, 84px); }
.loc-block > h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; color: var(--ink);
  font-size: clamp(1.5rem, 2.6vw, 2rem); max-width: 22ch;
}
.loc-block > .loc-sub { margin-top: 12px; color: var(--muted); max-width: 60ch; }

/* Risk cards (3-up) */
.loc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(24px, 3vw, 36px); }
.loc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: clamp(24px, 2.4vw, 32px); box-shadow: var(--shadow-s);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.loc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); }
.loc-card .lc-ic {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(21,133,176,.12), rgba(91,196,236,.14));
  color: var(--brand); border: 1px solid rgba(21,133,176,.18); margin-bottom: 18px;
}
.loc-card .lc-ic svg { width: 27px; height: 27px; }
.loc-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; color: var(--ink); margin-bottom: 8px; }
.loc-card p { color: var(--ink-soft); font-size: .98rem; line-height: 1.6; }

/* Sector grid */
.loc-sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; margin-top: clamp(24px, 3vw, 36px); }
.loc-sector { background: #fff; padding: clamp(22px, 2.2vw, 28px); display: flex; gap: 16px; align-items: flex-start; transition: background .25s; }
.loc-sector:hover { background: var(--paper); }
.loc-sector .lsec-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ink-900); color: var(--cyan); }
.loc-sector .lsec-ic svg { width: 23px; height: 23px; }
.loc-sector h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); margin-bottom: 4px; }
.loc-sector p { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* Office card (2-col: details + product visual) */
.loc-office {
  margin-top: clamp(48px, 6vw, 84px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s);
  border-radius: var(--radius-l); padding: clamp(32px, 3.6vw, 60px); color: var(--ink);
}
.loc-office h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.7rem, 2.8vw, 2.35rem); color: var(--ink); letter-spacing: -.02em; line-height: 1.12; }
.loc-office .lo-body p { color: var(--muted); font-size: 1.02rem; line-height: 1.6; margin: 16px 0 28px; max-width: 44ch; }
.loc-office .lo-body p a { color: var(--brand); }
.loc-office .lo-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.loc-office .lo-contact { display: flex; flex-direction: column; gap: 18px; padding-left: clamp(0px, 2vw, 32px); }
.loc-office .lo-row { display: flex; gap: 14px; align-items: flex-start; }
.loc-office .lo-row svg { width: 20px; height: 20px; color: var(--brand); flex: none; margin-top: 2px; }
.loc-office .lo-row span { color: var(--ink-soft); font-size: .98rem; line-height: 1.5; }
.loc-office .lo-row a { color: var(--ink); }
.loc-office .lo-row a:hover { color: var(--brand); }

@media (max-width: 820px) {
  .loc-office { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .loc-stats, .loc-cards, .loc-sectors { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .loc-stats, .loc-cards, .loc-sectors { grid-template-columns: 1fr; }
}

/* Legacy footer (.footer-grid) fallback for older subpages */
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 36px; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.footer-grid .footer-brand img { height: 44px; width: auto; margin-bottom: 16px; }
.footer-grid .footer-col ul { display: flex; flex-direction: column; gap: 6px; }
.footer-grid .footer-col a { color: var(--ink-soft); font-size: .92rem; transition: color .2s; }
.footer-grid .footer-col a:hover { color: var(--brand); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-soft); background: rgba(21,133,176,.08); border: 1px solid var(--line); transition: background .2s, color .2s, border-color .2s; }
.footer-social a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.footer-social svg { width: 18px; height: 18px; }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   PRODUCT ARCHIVE — filter bar + uniform product grid
   ========================================================================== */
.shop-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px 22px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.shop-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-display); font-weight: 600; font-size: .88rem;
  color: var(--ink-soft); background: #fff;
  border: 1.5px solid var(--line-2); border-radius: 100px;
  padding: 9px 16px; display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip .n { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip[aria-pressed="true"] .n { color: rgba(255, 255, 255, .78); }
.shop-count { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 20px; margin-top: 30px;
}
.shop-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.shop-card[hidden] { display: none; }
.shop-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow); }
.shop-media {
  position: relative; aspect-ratio: 1;
  background: radial-gradient(120% 120% at 50% 22%, #fff, var(--paper-2));
  display: grid; place-items: center; padding: 14px;
}
/* Every tile is square and the product is contained, so scale reads consistently
   across a 600x600 head and a 600x600 flat connector. */
.shop-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shop-media.is-photo { padding: 0; }
.shop-media.is-photo img { object-fit: cover; }
.shop-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.shop-range {
  font-family: var(--font-display); font-size: .7rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px;
}
.shop-card h3 { font-size: 1.06rem; margin-bottom: 13px; }
.shop-specs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.shop-specs li { display: flex; gap: 9px; font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }
.shop-specs svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--brand); }
.shop-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.shop-foot .btn-add { font-size: .85rem; padding: 11px 17px; }
.shop-empty { text-align: center; padding: 64px 20px; color: var(--muted); }
.shop-empty[hidden] { display: none; }
@media (max-width: 560px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .shop-body { padding: 14px; }
  .shop-foot .btn-add { width: 100%; }
}

/* ==========================================================================
   LIGHTBOX — datasheet / certificate viewer
   ========================================================================== */
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); }
.lightbox[hidden] { display: none; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(4, 16, 22, .84); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.lb-panel {
  position: relative; z-index: 1; max-width: min(920px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: 14px;
  opacity: 0; transform: scale(.985);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.lightbox.on .lb-panel { opacity: 1; transform: none; }
.lb-img {
  width: auto; max-width: 100%; max-height: calc(100vh - 200px);
  object-fit: contain; display: block; margin-inline: auto;
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .8);
}
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.lb-cap { margin: 0; color: var(--d-fg); font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.lb-orig { color: var(--cyan); font-size: .88rem; font-weight: 600; }
.lb-orig:hover { text-decoration: underline; }
.lb-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.lb-close:hover { background: rgba(255, 255, 255, .22); border-color: #fff; }
.lb-close svg { width: 20px; height: 20px; }
body.lb-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lb-panel { transition: none; } }

/* ==========================================================================
   RESPONSIVE HARDENING — touch input, small screens, notches
   ========================================================================== */

/* Long, unbreakable strings (the contact email, bare domains) must wrap
   rather than push a 320px layout sideways. */
body { overflow-wrap: break-word; }
.footer-contact a, .lo-row a, .article a { overflow-wrap: anywhere; }

/* Form controls inherit the body size, which floors at 15px. iOS Safari
   auto-zooms any control under 16px on focus, so pin them at 16px. */
.form-field input, .form-field textarea, .form-field select { font-size: 16px; }

/* Touch devices latch :hover after a tap, leaving cards lifted and images
   zoomed until you tap elsewhere. Keep the colour changes, drop the movement. */
@media (hover: none) {
  .app-tile:hover img,
  .bento-certs:hover,
  .bento-certs:hover .bc-go,
  .bento-video .video-facade:hover .vf-play,
  .bento-video .video-facade:hover img,
  .bt-cert:hover,
  .btn-ghost:hover,
  .btn-primary:hover,
  .btn-wa:hover,
  .card:hover,
  .cert-card:hover,
  .cert-logos .cl-tile:hover,
  .filmstrip figure:hover .fs-img img,
  .loc-card:hover,
  .loc-shot--flag:hover img,
  .loc-shot:hover img,
  .marquee-track img:hover,
  .post-card:hover,
  .post-card:hover .pc-media img,
  .proj-item:hover img,
  .ps-card:hover,
  .range-card:hover img,
  .sh-nav:hover,
  .shop-card:hover,
  .slide-arrow:hover,
  .stage-arrow:hover,
  .thumb:hover,
  .video-facade:hover .vf-play,
  a.region:hover {
    transform: none;
  }
}

@media (max-width: 600px) {
  /* 15px is below the comfortable reading floor on a phone held at arm's
     length; the fluid scale is only useful above this width. */
  body { font-size: 16px; }
  /* Clear the home indicator on gesture-nav phones. */
  .site-footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
  .nav-links { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .cart-drawer, .cart-foot { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}

/* Product slider refinements ---------------------------------------------- */
/* Keep the first and last card clear of the container edge while scrolling. */
.prod-slider { scroll-padding-inline: 4px; }
/* The slider reuses the archive's .shop-card verbatim; only the track sizing
   differs, since a grid cell stretches and a slide must not. */
.prod-slider .shop-card {
  flex: 0 0 clamp(238px, 23vw, 280px);
  scroll-snap-align: start;
}
.prod-slider .shop-card h3 a { color: var(--ink); }
.prod-slider .shop-card h3 a:hover { color: var(--brand); }

/* Grab affordance for mouse users; links keep their own pointer cursor. */
@media (hover: hover) and (pointer: fine) {
  .prod-slider { cursor: grab; }
  .prod-slider.dragging { cursor: grabbing; user-select: none; }
}
/* Snap fights a manual drag, so it is suspended for the duration. */
.prod-slider.dragging { scroll-snap-type: none; scroll-behavior: auto; }
.prod-slider.dragging img { pointer-events: none; }
.prod-slider:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius); }
/* The media link is decorative: the heading beneath it carries the real link,
   so it is skipped rather than duplicated for keyboard and screen readers. */
.ps-media { cursor: pointer; }
@media (pointer: coarse) {
  /* Touch swipes the track natively; the arrows would only cover cards. */
  .slide-arrow { display: none; }
}
@media (max-width: 600px) {
  .prod-slider .shop-card { flex-basis: clamp(220px, 74vw, 260px); }
  .ps-card { flex-basis: clamp(180px, 62vw, 220px); }
  .ps-media { height: 155px; }
}