/* New Shruti Enterprises — Brand System
   Grounded entirely in the logo: deep ink navy on warm paper.
*/
:root {
  /* ——— Palette ——— */
  --paper: #ece7df;
  --paper-2: #e3ddd1;
  --paper-3: #d8d1c3;
  --ink: #1f3a52;
  --ink-2: #14283a;
  --ink-3: #4a6378;
  --ink-soft: rgba(31, 58, 82, 0.12);
  --ink-line: rgba(31, 58, 82, 0.22);
  --accent: #c8553d;
  --shadow: 0 1px 0 rgba(31,58,82,0.06), 0 30px 60px -30px rgba(31,58,82,0.25);

  /* ——— Type families ——— */
  --f-display: "Archivo", "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --f-body: "Inter", system-ui, sans-serif;

  /* ——— Fluid type scale ———
     All sizes scale from a small-phone (320px) baseline to ultrawide.
     The vw component is paired with a px floor so the size stays useful
     at any viewport. Override per-element if a tighter clamp is wanted. */
  --fs-mono-xs: clamp(9px,   0.20vw + 8px,  11px);  /* SVG decorative */
  --fs-mono:    clamp(10px,  0.30vw + 9px,  12px);  /* mono labels, nav */
  --fs-mono-lg: clamp(11px,  0.35vw + 10px, 13px);  /* mono medium */
  --fs-body-sm: clamp(13px,  0.30vw + 12px, 15px);  /* small body */
  --fs-body:    clamp(15px,  0.50vw + 13px, 18px);  /* body / desc */
  --fs-lede:    clamp(16px,  0.80vw + 14px, 20px);  /* lede paragraph */
  --fs-h4:      clamp(18px,  0.60vw + 16px, 22px);  /* sub-titles */
  --fs-h3:      clamp(22px,  1.50vw + 17px, 32px);  /* card titles, big stat */
  --fs-h2:      clamp(26px,  2.20vw + 20px, 48px);  /* mid headings */
  --fs-h-section: clamp(36px, 5.6vw + 8px, 96px);   /* section headlines */
  --fs-h-display: clamp(40px, 6.0vw + 16px, 132px); /* hero display — smoother curve */

  /* ——— Fluid space scale ———
     Used for paddings, margins, gaps. Each step ~1.5× the previous. */
  --space-1: clamp(4px,  0.30vw + 3px,  6px);
  --space-2: clamp(8px,  0.50vw + 6px,  12px);
  --space-3: clamp(12px, 0.80vw + 9px,  18px);
  --space-4: clamp(16px, 1.20vw + 12px, 26px);
  --space-5: clamp(20px, 1.80vw + 14px, 36px);
  --space-6: clamp(28px, 2.80vw + 18px, 56px);
  --space-7: clamp(40px, 4.50vw + 22px, 88px);
  --space-8: clamp(56px, 6.50vw + 24px, 120px);
  --space-9: clamp(72px, 9.00vw + 24px, 168px);     /* section vertical */

  /* ——— Container ——— */
  --gutter: clamp(16px, 3.6vw, 56px);
  --maxw: 1480px;  /* simple cap — content shrinks below this naturally via viewport */
}

* { box-sizing: border-box; }

/* ——— Root viewport hygiene ———
   Constrains the document to viewport width so no rogue element can push the
   page wider than the screen on mobile (which would cause the dreaded
   "zoomed-out desktop" appearance). overflow-x: clip prevents horizontal
   scroll without creating a scroll container (unlike overflow-x: hidden). */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-width: 0;
}

/* paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(rgba(31,58,82,0.05) 1px, transparent 1px),
    radial-gradient(rgba(31,58,82,0.04) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
}

/* ——— Type ——— */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--ink-3);
}

.h-display {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 110%;
  letter-spacing: -0.025em;
  line-height: 0.92;
  font-size: var(--fs-h-display);
  color: var(--ink);
  text-wrap: balance;
}
.h-section {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: var(--fs-h-section);
  color: var(--ink);
  text-wrap: balance;
}
.lede {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ——— Layout ——— */
.shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

/* ——— Top nav (registration-mark vibe) ———
   Uses CSS Grid with explicit column placement (rather than flex space-between)
   so logo and actions stay anchored to opposite edges even when middle children
   are display:none. Safe-area insets baked into horizontal padding for notched
   landscape devices. */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 110;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding-top:    calc(env(safe-area-inset-top, 0px) + var(--space-3));
  padding-right:  max(var(--gutter), env(safe-area-inset-right, 0px));
  padding-bottom: var(--space-3);
  padding-left:   max(var(--gutter), env(safe-area-inset-left, 0px));
  background: linear-gradient(to bottom, rgba(236,231,223,0.94), rgba(236,231,223,0.65));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
}
@media (max-width: 479px) {
  .nav { gap: var(--space-2); }
}
.nav-logo {
  grid-column: 1;
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: var(--fs-mono-lg);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;   /* allow text to shrink without forcing overflow */
}
.nav-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.nav-logo .barcode-mini { width: 22px; height: 28px; flex-shrink: 0; }
.nav-logo-img {
  display: block;
  /* Transparent PNG, ~1.85:1 aspect. Sized to read as the brand anchor at all viewports. */
  height: clamp(48px, 5.5vw + 20px, 72px);
  width: auto;
  flex-shrink: 0;
}
.footer-logo-img {
  display: block;
  height: clamp(72px, 7vw + 30px, 104px);
  width: auto;
}
.nav-links {
  grid-column: 2;
  justify-self: center;
  display: flex; gap: var(--space-6);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--ink);
  transition: width .3s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after { width: 100%; }

/* ——— Desktop "Products" dropdown ———
   Hover or focus reveals an absolutely-positioned panel below the trigger.
   Stays open as long as the cursor is inside .nav-products; the React
   handler also closes on outside click. */
.nav-products {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-products-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-products-caret {
  font-size: 9px;
  line-height: 1;
  margin-top: 2px;
  transition: transform .2s ease, opacity .2s ease;
  opacity: 0.6;
}
.nav-products.is-open .nav-products-caret,
.nav-products:hover .nav-products-caret { transform: rotate(180deg); opacity: 1; }

.nav-products-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 360px;
  max-width: 92vw;
  padding: 14px 6px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  box-shadow: 0 18px 40px -18px rgba(31, 58, 82, 0.32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 200;
  /* Pseudo-bridge over the gap so the menu doesn't close while the
     cursor moves from the trigger to the panel. */
}
.nav-products::before {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  width: 100%; height: 16px;
  pointer-events: none;
}
.nav-products:hover::before,
.nav-products.is-open::before { pointer-events: auto; }

.nav-products:hover .nav-products-menu,
.nav-products.is-open .nav-products-menu,
.nav-products:focus-within .nav-products-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.nav-products-menu-head {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 16px 10px;
  border-bottom: 1px dashed var(--ink-line);
  margin-bottom: 4px;
}
.nav-products-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-products-list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  font-family: var(--f-body);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  white-space: normal;
}
.nav-products-list a::after { display: none; }     /* drop the inherited underline anim */
.nav-products-list a:hover { background: var(--ink-soft); }
.nav-products-list-num {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  color: var(--ink-3);
  flex: 0 0 26px;
}
.nav-cta {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.nav-cta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--ink-2);
  transform: translateY(101%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.nav-cta:hover::before { transform: translateY(0); }
.nav-cta span { position: relative; z-index: 1; }

/* ——— Buttons ——— */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  transform: translateY(101%);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.btn-primary:hover::before { transform: translateY(0); }
.btn-primary > * { position: relative; z-index: 1; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn .arrow {
  width: 14px; height: 1px;
  background: currentColor;
  position: relative;
  transition: width .25s ease;
}
.btn:hover .arrow { width: 22px; }
.btn .arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* ——— Section frame ——— */
.section {
  position: relative;
  padding: var(--space-9) 0;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--space-8);
}
@media (min-width: 768px) {
  .section-head {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
}

/* ——— Perforation divider ——— */
.perf {
  position: relative;
  height: 24px;
  margin: 0;
}
.perf::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 0; border-top: 1.5px dashed var(--ink-line);
}
.perf::after {
  content: "✂";
  position: absolute; left: var(--gutter); top: 50%;
  transform: translateY(-50%);
  background: var(--paper);
  padding: 0 10px;
  color: var(--ink-3);
  font-size: 14px;
}

/* ——— Hero ——— */
.hero {
  position: relative;
  padding: calc(var(--space-8) + env(safe-area-inset-top, 0px)) 0 var(--space-7);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .hero {
    min-height: 100dvh;
    padding-bottom: var(--space-6);
  }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1.45fr 1fr;
    gap: var(--space-7);
    min-height: calc(100dvh - var(--space-8));
    align-items: center;
  }
}

/* Hero visual companion — desktop/tablet only.
   Hidden under 768px so the mobile hero focuses entirely on the
   headline / sub / CTAs / stats. The grid is single-column at this
   width, so display:none cleanly collapses to one row (no orphan gap). */
.hero-visual {
  display: none;
  position: relative;
  width: 100%;
  max-width: clamp(200px, 60vw, 360px);
  margin: 0 auto;
  align-self: center;
}
@media (min-width: 768px) {
  .hero-visual { display: block; }
}
@media (min-width: 640px) {
  .hero-visual { max-width: 380px; }
}
@media (min-width: 1024px) {
  .hero-visual {
    max-width: 460px;
    margin-left: auto;
    margin-right: 0;
  }
}
.hero-visual-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 24px 50px rgba(31, 58, 82, 0.14);
  overflow: hidden;
}

/* Hero blueprint — vector illustration */
.hero-blueprint {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--paper);
}
.hero-blueprint text {
  font-family: var(--f-mono);
  user-select: none;
}
.hb-mono {
  /* SVG text — sized in user units relative to viewBox 360.
     Bumped from 8 → 9 so it stays legible when the SVG is shrunk
     to ~240px on small phones (effective ~6px instead of 5.3px). */
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--ink-3);
}
.hb-mono-ink { fill: var(--ink); }
.hb-line { stroke: var(--ink); stroke-width: 0.9; fill: none; }
.hb-line-faint { stroke: var(--ink); stroke-width: 0.6; fill: none; opacity: 0.45; }
.hb-line-dashed { stroke-dasharray: 2 2.5; }
.hb-rect { stroke: var(--ink); stroke-width: 0.9; fill: none; }
.hb-fill-soft { fill: var(--ink); opacity: 0.035; }
.hb-fill-ink { fill: var(--ink); }
.hb-grid-path { fill: none; stroke: var(--ink); }
.hb-grid-path-minor { stroke-width: 0.4; stroke-opacity: 0.13; }
.hb-grid-path-major { stroke-width: 0.6; stroke-opacity: 0.22; }

/* Product-grid cells */
.hb-cell-frame {
  stroke: var(--ink);
  stroke-width: 0.7;
  stroke-opacity: 0.35;
  fill: none;
  transition: stroke-width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              stroke-opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hb-cell.is-active .hb-cell-frame {
  stroke-width: 1.4;
  stroke-opacity: 1;
}
.hb-cell-fill {
  fill: var(--ink);
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.hb-cell.is-active .hb-cell-fill { opacity: 0.045; }

/* Icons dim when their cell is not active */
.hb-cell .hb-cell-icon {
  opacity: 0.55;
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hb-cell.is-active .hb-cell-icon { opacity: 1; }

/* Per-cell scan sweep — mounts once when the cell becomes active */
@keyframes hb-cell-scan-kf {
  0%   { transform: translateY(0px);   opacity: 0; }
  12%  { opacity: 0.55; }
  88%  { opacity: 0.55; }
  100% { transform: translateY(160px); opacity: 0; }
}
.hb-cell-scan {
  animation: hb-cell-scan-kf 4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
  pointer-events: none;
}
.hb-scan-bar      { stroke: var(--ink); stroke-width: 1.3; opacity: 0.55; }
.hb-scan-bar-soft { stroke: var(--ink); stroke-width: 0.5; opacity: 0.22; }
.hero-visual-corners span {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  pointer-events: none;
}
.hero-visual-corners span:nth-child(1) { top: -6px; left: -6px; }
.hero-visual-corners span:nth-child(2) { top: -6px; right: -6px; }
.hero-visual-corners span:nth-child(3) { bottom: -6px; left: -6px; }
.hero-visual-corners span:nth-child(4) { bottom: -6px; right: -6px; }
.hero-visual-caption {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--ink-line);
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* WhyUs — Trusted-by logos: tint Picsum placeholders to read as wordmarks on dark */
.whyus image-slot::part(image) {
  filter: grayscale(1) brightness(1.6) contrast(0.85);
  mix-blend-mode: screen;
  opacity: 0.55;
}
.whyus image-slot { transition: opacity 0.3s ease; }
.whyus image-slot:hover { opacity: 1; }
.whyus image-slot:hover::part(image) { opacity: 0.85; }
.hero-eyebrow-row {
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.hero h1 {
  /* font-size handled by .h-display token */
  margin: 0 0 var(--space-5);
}
.hero h1 .ink {
  display: inline-block;
  position: relative;
}
.hero h1 .ink::after {
  content: "";
  position: absolute; left: -4px; right: -4px; bottom: 4%;
  height: 18%;
  background: var(--ink);
  opacity: 0.08;
  z-index: -1;
}
.hero-sub {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 52ch;
  margin: 0 0 var(--space-6);
}
.hero-cta-row {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-7);
}
.hero-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--ink-line);
  max-width: 560px;
}
@media (min-width: 480px) {
  .hero-meta { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
}
.hero-meta .stat-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.hero-meta .stat-label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

/* ——— Roll (right side of hero) ——— */
.roll-stage {
  position: relative;
  height: 720px;
  width: 100%;
}
@media (max-width: 1100px) {
  .roll-stage { height: 520px; }
}

/* ——— Section: About ——— */
.about {
  background: var(--paper);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 768px) {
  .about-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}
.about-quote {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.about-quote em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 60%, rgba(31,58,82,0.15) 60%);
  padding: 0 4px;
}
.about-points {
  display: flex; flex-direction: column;
  gap: 0;
  margin-top: var(--space-6);
}
.about-point {
  display: grid;
  grid-template-columns: clamp(48px, 8vw, 80px) 1fr;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--ink-line);
}
.about-point:last-child { border-bottom: 1px solid var(--ink-line); }
.about-point .num {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.about-point h4 {
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.about-point p {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--ink-3);
}

/* ——— Section: Products ——— */
.products {
  background: var(--paper-2);
  position: relative;
}
.products::before, .products::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 14px;
  background-image: radial-gradient(circle, var(--paper) 4px, transparent 4.5px);
  background-size: 22px 14px;
  background-position: 0 50%;
  background-repeat: repeat-x;
}
.products::before { top: -7px; }
.products::after { bottom: -7px; }

.products-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-line);
  border-left: 1px solid var(--ink-line);
}
.product-card {
  grid-column: span 2;
  border-right: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  padding: var(--space-6);
  background: var(--paper);
  position: relative;
  cursor: pointer;
  transition: background .35s ease;
  min-height: clamp(280px, 30vw + 200px, 380px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.product-card.feature { grid-column: span 3; }
.product-card.tall { grid-column: span 3; min-height: clamp(320px, 32vw + 220px, 440px); }
.product-card:hover { background: var(--ink); color: var(--paper); }
.product-card:hover .p-num,
.product-card:hover .p-meta,
.product-card:hover .p-title,
.product-card:hover .p-desc { color: var(--paper); }
.product-card:hover .p-title { color: var(--paper); }
.product-card:hover .p-bar rect { fill: var(--paper); }
.product-card:hover .scan { opacity: 1; }

.p-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-5); }
.p-num {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  color: var(--ink-3);
  transition: color .3s;
}
.p-bar { width: 60px; height: 28px; flex-shrink: 0; }
.p-bar rect { fill: var(--ink); transition: fill .3s; }
.p-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: auto 0 var(--space-3);
  transition: color .3s;
  text-wrap: balance;
}
.p-desc {
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 var(--space-4);
  transition: color .3s;
}
.p-meta {
  display: flex; gap: var(--space-3); flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .3s;
}
.scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(236,231,223,0.0) 49%, rgba(236,231,223,0.6) 50%, rgba(236,231,223,0.0) 51%, transparent 100%);
  opacity: 0;
  animation: scan 2.4s linear infinite;
}
@keyframes scan {
  0% { background-position: 0 -200%; }
  100% { background-position: 0 200%; }
}

/* Old static products grid — falls below desktop breakpoint */
@media (max-width: 1100px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .product-card, .product-card.feature, .product-card.tall { grid-column: span 1; }
}
@media (max-width: 540px) {
  .products-grid { grid-template-columns: 1fr; }
}

/* ——— Section: Industries ——— */
.industries {
  background: var(--paper);
}
.industries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 560px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .industries-grid { grid-template-columns: repeat(4, 1fr); } }
/* ——— Industry cards ———
   These are INFORMATIONAL panels, not links. No pointer cursor, no
   background fill on hover, no scale/lift transform. We only nudge
   the border + add a faint shadow so the card still has a small
   "noticed" state on a pointer device — but reads unmistakably as
   content, not a button. */
.ind-card {
  border: 1px solid var(--ink-line);
  padding: var(--space-5) var(--space-4);
  background: var(--paper);
  position: relative;
  cursor: default;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(220px, 22vw + 140px, 280px);
  transition: border-color .25s ease, box-shadow .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .ind-card:hover {
    border-color: rgba(31, 58, 82, 0.36);
    box-shadow: 0 2px 10px rgba(31, 58, 82, 0.06);
  }
}

.ind-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--space-6);
}
.ind-num {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.ind-icon {
  width: 44px; height: 44px;
  color: var(--ink);
  flex-shrink: 0;
}
.ind-name {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
.ind-desc {
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0 0 var(--space-4);
  flex: 1;
}
.ind-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--ink-line);
  padding: var(--space-1) var(--space-2);
}

/* ——— Section: Why us ——— */
.whyus {
  background: var(--ink);
  color: var(--paper);
  position: relative;
}
.whyus .h-section { color: var(--paper); }
.whyus .lede { color: rgba(236,231,223,0.7); }
.whyus .eyebrow { color: rgba(236,231,223,0.6); }
.whyus .eyebrow::before { background: rgba(236,231,223,0.6); }

/* Metrics grid: 1-col on phones, 3-col on tablet+. The grid expects exactly
   3 metric children — change column counts here if that ever changes. */
.metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(236,231,223,0.18);
  border-bottom: 1px solid rgba(236,231,223,0.18);
}
@media (min-width: 768px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
.metric {
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid rgba(236,231,223,0.12);
  position: relative;
}
.metric:last-child { border-bottom: none; }
@media (min-width: 768px) {
  .metric {
    border-bottom: none;
    border-right: 1px solid rgba(236,231,223,0.12);
  }
  .metric:last-child { border-right: none; }
}
.metric .m-num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(40px, 4.5vw + 16px, 80px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--paper);
  display: flex; align-items: baseline; gap: 6px;
  flex-wrap: wrap;
}
.metric .m-num .unit {
  font-size: 0.4em;
  font-family: var(--f-mono);
  font-weight: 500;
  color: rgba(236,231,223,0.6);
}
.metric .m-label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236,231,223,0.6);
  margin-top: var(--space-3);
}

.why-list {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px var(--space-7);
}
@media (min-width: 768px) { .why-list { grid-template-columns: repeat(2, 1fr); } }
.why-item {
  display: grid;
  grid-template-columns: clamp(40px, 6vw, 60px) 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(236,231,223,0.18);
}
.why-item .why-num {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  color: rgba(236,231,223,0.5);
}
.why-item .why-label {
  font-family: var(--f-display);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.why-item .why-check {
  width: 22px; height: 22px;
  color: rgba(236,231,223,0.7);
}

/* ——— Section: Contact ——— */
.contact {
  background: var(--paper);
  padding-bottom: var(--space-8);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.2fr 1fr; gap: var(--space-8); } }

.form {
  display: flex; flex-direction: column;
  gap: 0;
}
.field {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--ink-line);
  padding: var(--space-3) 0 var(--space-2);
  position: relative;
}
.field label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-2);
}
.field input, .field textarea, .field select {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  padding: 0;
  resize: none;
  width: 100%;
  min-width: 0;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%231f3a52' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
}
.field select option {
  font-family: var(--f-display);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  padding: 8px 12px;
}
.field input::placeholder, .field textarea::placeholder {
  color: rgba(31,58,82,0.25);
}
.field-row { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
}
.field-row .field { border-bottom: 1px solid var(--ink-line); }

.submit-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-6);
  flex-wrap: wrap; gap: var(--space-4);
}
.submit-meta {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact-info {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-7);
  position: relative;
  overflow: hidden;
}
.contact-info h3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-6);
  letter-spacing: -0.02em;
  color: var(--paper);
}
.contact-info .info-row {
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(236,231,223,0.18);
}
.contact-info .info-row:last-child { border-bottom: 1px solid rgba(236,231,223,0.18); }
.contact-info .info-label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(236,231,223,0.6);
  margin-bottom: 6px;
}
.contact-info .info-val {
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--paper);
  word-break: break-word;
  line-height: 1.35;
}
.contact-info .info-val a,
.contact-info .info-val a:link,
.contact-info .info-val a:visited,
.contact-info .info-val a:hover,
.contact-info .info-val a:active,
.contact-info .info-val a:focus {
  color: var(--paper) !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
  -webkit-text-fill-color: var(--paper) !important;
  font: inherit;
  font-style: normal !important;
  letter-spacing: inherit;
  border: 0 !important;
  background: transparent;
  transition: opacity 0.25s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.contact-info .info-val a:hover,
.contact-info .info-val a:focus-visible {
  opacity: 0.78;
  outline: none;
}

/* ——— Footer ——— */
.footer {
  background: var(--paper);
  padding: var(--space-7) 0 var(--space-5);
  border-top: 1px solid var(--ink-line);
}

/* CTA band */
.footer-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: end;
  padding-bottom: var(--space-7);
}
@media (min-width: 880px) {
  .footer-cta {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-7);
  }
}
.footer-cta-headline {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 18px 0 14px;
}
.footer-cta-lede {
  font-family: var(--f-sans, "Inter", system-ui, sans-serif);
  font-size: clamp(0.95rem, 0.7rem + 0.5vw, 1.05rem);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 56ch;
  margin: 0;
}
.footer-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-self: start;
}
@media (min-width: 880px) {
  .footer-cta-actions { justify-self: end; }
}
.footer-cta-btn { min-height: 44px; }

/* Divider hairlines between sections */
.footer-divider {
  height: 1px;
  background: var(--ink-line);
  width: 100%;
}

/* 4-column info grid */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding: var(--space-7) 0;
}
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-5); }
}
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 0.9fr 1.3fr 1.3fr;
    gap: var(--space-6) var(--space-5);
  }
}

.footer-col { min-width: 0; }
.footer-col-brand .footer-logo-img { margin-bottom: var(--space-3); }
.footer-brand-line {
  font-family: var(--f-sans, "Inter", system-ui, sans-serif);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 var(--space-3);
  max-width: 38ch;
}
.footer-brand-meta {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.footer-col-title {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--space-3);
  font-weight: 600;
}

.footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-list li { line-height: 1.35; }
.footer-list a {
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.footer-list a:hover,
.footer-list a:focus-visible {
  opacity: 0.6;
  outline: none;
}

.footer-list-contact {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-line);
}
.footer-list-contact a { font-weight: 600; }

.footer-address {
  font-style: normal;
  font-family: var(--f-sans, "Inter", system-ui, sans-serif);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer-address strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.footer-address-role {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}

/* Legal / colophon */
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
  align-items: flex-start;
}
@media (min-width: 720px) {
  .footer-legal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
  }
}
.footer-legal-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-legal-meta a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal-meta a:hover,
.footer-legal-meta a:focus-visible {
  color: var(--ink);
  outline: none;
}
.footer-legal-dot { opacity: 0.5; }

/* ——— Horizontal label ribbon strip between sections ——— */
.label-ribbon-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--paper);
}
.label-ribbon-svg { display: block; width: 100%; }
.label-ribbon-shadow-top,
.label-ribbon-shadow-bottom {
  position: absolute; left: 0; right: 0;
  height: 6px; pointer-events: none; z-index: 2;
}
.label-ribbon-shadow-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(31,58,82,0.18), transparent);
}
.label-ribbon-shadow-bottom {
  bottom: 0;
  background: linear-gradient(to top, rgba(31,58,82,0.18), transparent);
}
.products { background: var(--paper-2); }
.whyus { background: var(--ink); }
.hero { background: var(--paper); }
.footer { background: var(--paper); }

/* image slot styling override */
image-slot {
  --paper: #ece7df;
}

/* utilities */
.spacer-sm { height: 32px; }
.spacer-md { height: 64px; }
.divider-line {
  height: 1px; background: var(--ink-line);
  margin: 0;
}

/* ——— Products: split-screen scrollytelling ——— */
.products-scroll {
  position: relative;
}
.products-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.products-stage {
  width: 100%;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 4vw, 72px);
  align-items: stretch;
  height: 84dvh; /* keep in sync with STAGE_VH in sections.jsx */
}

/* Left — sticky info panel */
.products-info {
  position: relative;
  align-self: center;
  max-width: 520px;
}
.products-info-track > * {
  opacity: 0;
  transform: translateY(8px);
  animation: products-info-reveal 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.products-info-track > *:nth-child(1) { animation-delay: 0.02s; }
.products-info-track > *:nth-child(2) { animation-delay: 0.06s; }
.products-info-track > *:nth-child(3) { animation-delay: 0.10s; }
.products-info-track > *:nth-child(4) { animation-delay: 0.14s; }
.products-info-track > *:nth-child(5) { animation-delay: 0.18s; }
.products-info-track > *:nth-child(6) { animation-delay: 0.22s; }
.products-info-track > *:nth-child(7) { animation-delay: 0.26s; }
@keyframes products-info-reveal {
  to { opacity: 1; transform: translateY(0); }
}

.products-info-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--ink-line);
  margin-bottom: var(--space-4);
}
.products-info-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw + 12px, 52px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.products-info-desc {
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 var(--space-5);
  max-width: 44ch;
}
.products-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 var(--space-4);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}
.products-info-grid > div { padding: var(--space-3) 0; }
.products-info-grid > div + div {
  padding-left: var(--space-4);
  border-left: 1px dashed var(--ink-line);
}
.products-info-grid dt {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 6px;
}
.products-info-grid dd {
  font-family: var(--f-body);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.products-info-block { margin-bottom: var(--space-4); }
.products-info-label {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-2);
}
.products-info-specs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}
.products-info-specs li {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  line-height: 1.5;
  color: var(--ink);
  padding-left: var(--space-3);
  position: relative;
}
.products-info-specs li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--ink-3);
}
.products-info-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.products-info-tags span {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
}
.products-info-cta { margin-top: 6px; }

/* Right — frame stack window */
.products-frames-window {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.products-frames-stack {
  display: flex;
  flex-direction: column;
  will-change: transform;
  /* CSS-side glide when active changes — gives the snap-but-smooth feel.
     The transform itself is set inline from sections.jsx. */
  transition: transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.products-frame {
  height: 84dvh; /* keep in sync with STAGE_VH */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3) 0 0;
  opacity: 0.22;
  filter: saturate(0.85);
  transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.products-frame.is-active {
  opacity: 1;
  filter: saturate(1);
}

/* The card in scroll mode — consistent card alignment via clamp height */
.products-card {
  width: 100%;
  max-width: 540px;
  min-height: clamp(380px, 30vw + 240px, 480px);
  cursor: default;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  box-shadow: 0 16px 36px rgba(31, 58, 82, 0.10);
  transition: box-shadow 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.products-frame.is-active .products-card {
  box-shadow: 0 28px 60px rgba(31, 58, 82, 0.18);
}

/* No scan-line sweep on the new cards — keep the surface quiet */
.products-card .scan { display: none; }

/* Product illustration block — sits between the top bar and the title.
   Pure SVG by default, raster <img> when PRODUCT_PHOTOS registers a photo
   for that product. Subtle scale on active/hover, no overlays. */
.p-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(120px, 24vw, 180px);
  margin: var(--space-3) 0 var(--space-4);
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-origin: center;
  will-change: transform;
}
.p-icon-svg {
  width: 100%;
  height: 100%;
  max-width: 220px;
  display: block;
  color: var(--ink);
}

/* Photo variant — fills the icon block edge-to-edge, no overlay */
.p-icon-photo {
  position: relative;
  height: clamp(150px, 28vw, 210px);
  overflow: hidden;
  background: var(--ink-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -24px 40px -24px rgba(0, 0, 0, 0.45);
}
.p-icon-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.18) 100%);
}
.p-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* Subtle hover (pointer-capable devices only, no sticky touch states) */
@media (hover: hover) {
  .products-card:hover .p-icon       { transform: scale(1.035); }
  .products-card:hover .p-icon-img   { transform: scale(1.04); }
  .products-card.has-photo:hover .p-icon { transform: none; }
}
/* Active card in scrollytelling gets the same subtle pop */
.products-frame.is-active .p-icon { transform: scale(1.04); }
.products-frame.is-active .p-icon-img { transform: scale(1.05); }
.products-frame.is-active .products-card.has-photo .p-icon { transform: none; }

/* ——— Photo-card variant ———
   When a card has a registered product photo, invert the surface to ink so
   the white typography reads cleanly. No gradients, no scanline, no hover
   tint — just the inverted surface + the photo in the icon block. */
.products-card.has-photo {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.products-card.has-photo .p-num   { color: rgba(236, 231, 223, 0.7); }
.products-card.has-photo .p-title { color: var(--paper); }
.products-card.has-photo .p-desc  { color: rgba(236, 231, 223, 0.72); }
.products-card.has-photo .p-meta  { color: rgba(236, 231, 223, 0.55); }
.products-card.has-photo .p-bar rect { fill: var(--paper); }
.products-card.has-photo:hover {
  background: var(--ink);
  color: var(--paper);
}
.products-card.has-photo:hover .p-num,
.products-card.has-photo:hover .p-title,
.products-card.has-photo:hover .p-desc,
.products-card.has-photo:hover .p-meta { color: inherit; }
.products-card.has-photo:hover .p-bar rect { fill: var(--paper); }

/* Disable the legacy .product-card ink-invert hover.
   Hover is now purely a small icon scale — no color flips, no overlay. */
.products-card:hover { background: var(--paper); color: var(--ink); }
.products-card:hover .p-num,
.products-card:hover .p-meta,
.products-card:hover .p-title,
.products-card:hover .p-desc { color: inherit; }
.products-card:hover .p-bar rect { fill: var(--ink); }

/* Frame index rail — continuous progress fill + index labels */
.products-frame-rail {
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: 0;
  width: 38px;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  pointer-events: none;
  --progress: 0;
}
.products-frame-rail-line {
  position: relative;
  width: 1px;
  background: var(--ink-line);
  align-self: stretch;
  margin-right: 14px;
}
.products-frame-rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--ink);
  height: calc(var(--progress, 0) * 100%);
  transition: height 0.06s linear;
}
.products-frame-rail-numbers {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.products-frame-rail-numbers span {
  display: block;
  line-height: 1;
  padding: 2px 0;
  transition: color 0.32s ease, transform 0.32s ease, opacity 0.32s ease;
  opacity: 0.6;
}
.products-frame-rail-numbers span.is-active {
  color: var(--ink);
  opacity: 1;
  transform: translateX(-2px);
}

/* ——— Products responsive switch (mobile-first) ———
   Default: mobile carousel visible, desktop scrollytelling hidden.
   At ≥1024px: hide carousel, show desktop split-screen. */
.products-scroll { display: none; }
.products-mobile {
  display: block;
  margin-top: var(--space-4);
}
.products-mobile-info { margin-bottom: var(--space-5); }
.products-mobile-info .products-info-cta { display: inline-flex; }

/* ——— Mobile "← Prev / Next →" cue above the carousel.
   Three-up layout: prev on the left, current/total counter centered,
   next on the right. Both buttons wrap at the ends so the carousel
   never feels "stuck". */
.products-carousel-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--ink-line);
}
.products-carousel-hint-count {
  flex: 1;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.75;
}
.products-carousel-nav {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  padding: 6px 2px;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.9;
  transition: color .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.products-carousel-nav:hover,
.products-carousel-nav:focus-visible {
  color: var(--ink);
  opacity: 1;
  outline: none;
}
.products-carousel-arrow {
  display: inline-block;
  font-size: 14px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
/* Direction-aware arrow nudge on hover / active press. */
.products-carousel-next:hover  .products-carousel-arrow,
.products-carousel-next:active .products-carousel-arrow { transform: translateX(3px); }
.products-carousel-prev:hover  .products-carousel-arrow,
.products-carousel-prev:active .products-carousel-arrow { transform: translateX(-3px); }

.products-carousel {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  scroll-padding-right: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: var(--space-2) var(--gutter) var(--space-4);
  margin: 0 calc(-1 * var(--gutter));
  overscroll-behavior-x: contain;
}
.products-carousel::-webkit-scrollbar { display: none; }
.products-carousel-frame {
  flex: 0 0 82vw;
  max-width: 380px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
}
/* Spacer after the last card so it can fully snap to the start position */
.products-carousel::after {
  content: "";
  flex: 0 0 var(--gutter);
}
.products-carousel-frame .products-card {
  width: 100%;
  min-height: clamp(360px, 50vw + 200px, 440px);
  max-width: none;
  box-shadow: 0 14px 28px rgba(31, 58, 82, 0.10);
}
.products-carousel-dots {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.products-carousel-dots::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  max-width: 60vw;
  height: 1px;
  background: var(--ink-line);
  z-index: 0;
}
.products-carousel-dots span {
  position: relative;
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--ink-line);
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.products-carousel-dots span.is-active {
  background: var(--ink);
  border-color: var(--ink);
  transform: scale(1.4);
}

@media (min-width: 1024px) {
  .products-scroll { display: block; }
  .products-mobile { display: none; }
}

/* Reviews — Write-a-Review CTA */
.review-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.review-cta:hover,
.review-cta:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  outline: none;
}
.review-cta-arrow {
  font-size: var(--fs-mono-lg);
  letter-spacing: 0;
  line-height: 1;
  display: inline-block;
  transition: transform 0.18s ease;
}
.review-cta:hover .review-cta-arrow,
.review-cta:focus-visible .review-cta-arrow {
  transform: translate(2px, -2px);
}

/* ——— Universal responsive layer (mobile-first) ——— */

/* Trusted-by + Certifications outer grid */
.trusted-cert-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .trusted-cert-grid { grid-template-columns: 1.4fr 1fr; gap: var(--space-7); }
}

/* ——— Client ribbon section — paper/navy editorial strip between WhyUs and Reviews ——— */
.client-ribbon-section {
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(.2,.7,.2,1);
}
.client-ribbon-section.is-in { opacity: 1; transform: translateY(0); }

/* ——— Brand marquee — full-bleed paper ribbon with parallax ——— */
.brand-marquee {
  margin-top: var(--space-7);
  /* Taller strip — more vertical breathing room reads as "premium". */
  padding: var(--space-6) 0;
  /* Navy ribbon (palette --ink) with a subtle vertical sheen so the
     strip reads as a single architectural element rather than a flat
     block. Top/bottom borders use --ink-2 for a crisp seam against
     the cream sections above and below. */
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 50%, var(--ink-2) 100%);
  border-top: 1px solid rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  position: relative;
  /* Belt-and-braces full-bleed in case any future ancestor introduces
     a max-width — the strip should always span the viewport. */
  width: 100%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
.brand-marquee::before,
.brand-marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  /* Slim fades so the strip reads broader and logos remain visible
     much closer to the viewport edges. */
  width: 36px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to right, var(--ink), transparent);
}
.brand-marquee::after { left: auto; right: 0; background: linear-gradient(to left, var(--ink), transparent); }
.brand-marquee-viewport {
  position: relative;
  overflow: hidden;
  /* A small inset so the first/last pills don't kiss the absolute
     viewport edge during the loop — keeps the framing intentional. */
  padding-inline: clamp(8px, 1.4vw, 24px);
}
.brand-marquee-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  /* Wider gap = more breathing space between pills. */
  gap: clamp(30px, 2.4vw, 56px);
  align-items: center;
  white-space: nowrap;
  animation: brand-marquee 38s linear infinite;
  animation-direction: reverse;
  will-change: transform;
}
.brand-marquee-viewport:hover .brand-marquee-track {
  animation-play-state: paused;
}
.brand-marquee-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Uniform pill geometry across the strip — every brand sits in
     an identical-sized bubble regardless of its logo's aspect
     ratio. Logos scale to fit via object-fit: contain (rule below). */
  width: 220px;
  height: 76px;
  padding: 0 22px;
  box-sizing: border-box;
  border-radius: 999px;
  /* Paper-toned pill on the navy strip — keeps brand logos legible in
     their native colour without inverting them. Faint paper-line
     border for subtle definition. */
  background: var(--paper);
  border: 1px solid rgba(236, 231, 223, 0.22);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  transition:
    border-color 240ms ease,
    background 240ms ease,
    transform 240ms ease;
  user-select: none;
  white-space: nowrap;
}
.brand-marquee-item:hover {
  background: var(--paper-2);
  border-color: rgba(236, 231, 223, 0.55);
}
.brand-marquee-logo {
  display: block;
  /* Uniform sizing: each logo fits inside the same pill via
     object-fit: contain. max-height caps vertical mass; max-width
     fills the pill interior. Result — every bubble looks identical
     in size, and every brand reads at a comparable visual weight
     regardless of its source aspect ratio. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  object-position: center;
  /* True original brand colours — no opacity dimming, no saturation
     filter. The cream pill provides enough contrast against the navy
     strip for every brand colour to stay legible. */
  opacity: 1;
  -webkit-user-drag: none;
  pointer-events: none;
}
.brand-marquee-item:hover .brand-marquee-logo {
  opacity: 1;
}
/* IDT wordmark sits in extra whitespace inside its source PNG; bump
   its render height so it reads at parity with neighbouring marks. */
.brand-marquee-item[data-brand="idt"] .brand-marquee-logo {
  max-height: 60px;
}
@keyframes brand-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 767px) {
  .brand-marquee {
    margin-top: var(--space-5);
    padding: var(--space-5) 0;
  }
  .brand-marquee::before,
  .brand-marquee::after { width: 20px; }
  .brand-marquee-viewport {
    padding-inline: clamp(6px, 2vw, 14px);
  }
  .brand-marquee-track {
    gap: clamp(16px, 3.2vw, 26px);
    animation-duration: 28s;
  }
  /* Uniform pill at mobile scale — same geometry approach as desktop,
     scaled down. */
  .brand-marquee-item {
    width: 160px;
    height: 60px;
    padding: 0 16px;
  }
  .brand-marquee-logo {
    max-height: 36px;
    max-width: 100%;
  }
  .brand-marquee-item[data-brand="idt"] .brand-marquee-logo {
    max-height: 46px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee-track { animation: none; }
  .client-ribbon-section { opacity: 1; transform: none; transition: none; }
}

/* ——— Mobile navigation system ——— */

/* Body lock when drawer is open */
body.nav-locked { overflow: hidden; touch-action: none; }

/* Desktop links: hidden on mobile, shown ≥1024 (the drawer covers smaller widths) */
.nav-links { display: none; }
.nav-cta   { display: none; }
@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta   { display: inline-flex; }
}

/* Hamburger toggle — 48×48 touch target, more present border */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1.5px solid var(--ink);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s ease, transform 0.22s ease;
}
.nav-toggle:hover { background: var(--ink-soft); }
.nav-toggle:active { transform: scale(0.96); }
.nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.8px;
  background: var(--ink);
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.18s ease;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6.8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); }
@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

/* Drawer backdrop */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 58, 82, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer panel */
.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border-left: 1px solid var(--ink-line);
  z-index: 100;
  transform: translateX(102%);
  transition: transform 0.46s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding-top: calc(env(safe-area-inset-top, 0px) + clamp(84px, 14vh, 124px));
  padding-right: var(--gutter);
  padding-left: var(--gutter);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-6));
  box-shadow: -28px 0 70px rgba(31, 58, 82, 0.18);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nav-drawer.is-open { transform: translateX(0); }
@media (min-width: 480px) {
  .nav-drawer { width: 84%; }
}
@media (min-width: 1024px) {
  .nav-drawer,
  .nav-overlay { display: none; }
}

/* Drawer head */
.nav-drawer-head {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px dashed var(--ink-line);
}
.nav-drawer-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Drawer link list */
.nav-drawer-list { display: flex; flex-direction: column; }
.nav-drawer-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-line);
  opacity: 0;
  transform: translateX(18px);
  transition: padding-left 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
              color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-drawer.is-open .nav-drawer-link {
  animation: nav-link-in 0.46s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(0.18s + var(--i) * 0.055s);
}
@keyframes nav-link-in {
  to { opacity: 1; transform: translateX(0); }
}
/* Hover styles are gated to true pointer devices so a tap on a
   touch screen doesn't leave an iOS sticky :hover state on the
   Products toggle (the only drawer item that doesn't navigate
   away immediately). Keyboard focus keeps the same indicator
   via :focus-visible for accessibility parity. */
@media (hover: hover) and (pointer: fine) {
  .nav-drawer-link:hover {
    padding-left: var(--space-3);
    outline: none;
  }
  .nav-drawer-link:hover .nav-drawer-arrow {
    color: var(--ink);
    transform: translate(3px, -3px);
  }
}
.nav-drawer-link:focus-visible {
  padding-left: var(--space-3);
  outline: none;
}
.nav-drawer-link:focus-visible .nav-drawer-arrow {
  color: var(--ink);
  transform: translate(3px, -3px);
}
.nav-drawer-num {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.nav-drawer-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(26px, 5.5vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.nav-drawer-arrow {
  font-family: var(--f-mono);
  font-size: var(--fs-mono-lg);
  color: var(--ink-3);
  transition: transform 0.28s ease, color 0.25s ease;
}

/* Drawer accordion variant — Products row expands to reveal a sublist. */
.nav-drawer-group {
  display: contents;          /* let children participate in the parent column */
}
.nav-drawer-link-toggle {
  /* Strip every browser-default <button> chrome so the Products row
     reads identical to the sibling <a> drawer links at rest. The
     bottom border is restored explicitly to match siblings. */
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--ink-line);
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
/* Explicit press / focus / aria resets — defensive against any
   browser default that might paint a darker fill, an inset shadow,
   a focus ring, or a residual highlight after tap. */
.nav-drawer-link-toggle:focus,
.nav-drawer-link-toggle:active,
.nav-drawer-link-toggle[aria-expanded="true"] {
  background: transparent;
  background-image: none;
  box-shadow: none;
  outline: none;
}
.nav-drawer-link-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -4px;
}
/* iOS sticky :hover defense — on touch the toggle never picks up
   the sibling's indent / arrow-nudge, because :hover never fires
   from a tap when (hover: hover) is false. The parent rule we
   already gated handles the rest. */

/* OPEN STATE — purely class-driven, no hover dependency.
   The same ↗ arrow used by siblings rotates 90° clockwise to
   become ↘, signalling the section has expanded. Ink color
   intensifies just enough to read as "active". */
.nav-drawer-link-toggle.is-open .nav-drawer-arrow {
  color: var(--ink);
  transform: rotate(90deg);
}

.nav-drawer-sublist {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--ink-line);
  transition: max-height 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-drawer-sublist.is-open {
  /* generous cap — 10 items, ~52px each, plus padding */
  max-height: 640px;
}
.nav-drawer-sublink {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding: 12px 0 12px var(--space-5);
  font-family: var(--f-body);
  font-size: clamp(15px, 2.6vw, 17px);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px dashed var(--ink-line);
  transition: padding-left 0.25s ease, color 0.2s ease;
}
.nav-drawer-sublink:hover,
.nav-drawer-sublink:focus-visible {
  padding-left: calc(var(--space-5) + 6px);
  outline: none;
}
.nav-drawer-subnum {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  color: var(--ink-3);
}

/* ——— Drawer footer ———
   Column flex with explicit gap so the two CTAs (Request a Quote +
   WhatsApp) sit with consistent breathing space — no more negative-
   margin overlap. Each CTA stretches to fill the drawer width via
   align-items:stretch, giving symmetric, premium full-width buttons
   with proper padding from the screen edges (the .nav-drawer
   container already pads horizontally). */
.nav-drawer-foot {
  margin-top: auto;
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
.nav-drawer-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;             /* drop the legacy margin-bottom */
}
.nav-drawer-meta {
  margin-top: var(--space-3);   /* small extra breath before the meta line */
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ——— Inline WhatsApp CTAs (nav + drawer + contact form) ——— */

/* Nav: outlined variant that sits beside the filled Request a Quote button.
   Matches .nav-cta's padding/font exactly; box-sizing: border-box keeps the
   height identical despite the 1px border. */
.nav-cta-whatsapp {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.nav-cta-whatsapp::before { display: none; }  /* kill the nav-cta slide-up overlay */
.nav-cta-whatsapp:hover,
.nav-cta-whatsapp:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: none;
}
.nav-cta-whatsapp svg { flex-shrink: 0; }

/* Contact form: groups WhatsApp + Submit Inquiry on the right of the submit row. */
.submit-row-cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.btn-whatsapp {
  gap: 10px;
}
.btn-whatsapp svg { flex-shrink: 0; }
@media (max-width: 540px) {
  .submit-row-cta { width: 100%; }
  .submit-row-cta > * { flex: 1 1 0; justify-content: center; }
}

/* Mobile drawer: WhatsApp sits below the primary CTA.
   Spacing is owned by .nav-drawer-foot's column-gap — no negative
   margin trick here. The button stretches to the same width as the
   primary so the pair reads as a balanced symmetrical block. */
.nav-drawer-cta-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.nav-drawer-cta-whatsapp svg { flex-shrink: 0; }

/* ——— Floating WhatsApp CTA ——— */
.whatsapp-fab {
  position: fixed;
  /* Bottom offset uses space-7 (~40–88px clamp) so the FAB cluster has room
     to breathe and never feels cramped against the viewport edge. */
  bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
  right:  calc(var(--space-5) + env(safe-area-inset-right, 0px));
  z-index: 90; /* below nav (110) and drawer (100), above all content */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  box-shadow:
    0 14px 30px rgba(31, 58, 82, 0.22),
    0 4px 10px rgba(31, 58, 82, 0.12);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.3s ease,
              background 0.22s ease,
              opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.whatsapp-fab svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  transform: translateY(-2px) scale(1.04);
  background: var(--ink-2);
  box-shadow:
    0 18px 38px rgba(31, 58, 82, 0.28),
    0 6px 14px rgba(31, 58, 82, 0.16);
  outline: none;
}
.whatsapp-fab:active {
  transform: translateY(0) scale(0.97);
}
/* Hide while the mobile drawer is open — keeps the surface uncluttered. */
body.nav-locked .whatsapp-fab {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 480px) {
  .whatsapp-fab {
    width: 50px;
    height: 50px;
    /* Lift FAB above safe-area + give breathing room on small screens too. */
    bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    right:  calc(var(--space-4) + env(safe-area-inset-right, 0px));
  }
  .whatsapp-fab svg { width: 22px; height: 22px; }
}
@media print { .whatsapp-fab { display: none; } }

/* ——— Floating Call CTA — stacks directly above the WhatsApp FAB ———
   Mirrors .whatsapp-fab exactly (same fill, size, shadow, hover language)
   so the pair reads as a single floating cluster, not two competing CTAs. */
.call-fab {
  position: fixed;
  /* WhatsApp FAB (56px) + space-4 gap, anchored to the same lifted baseline
     so the pair rises together and the inter-button gap stays constant. */
  bottom: calc(var(--space-7) + 56px + var(--space-4) + env(safe-area-inset-bottom, 0px));
  right:  calc(var(--space-5) + env(safe-area-inset-right, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  box-shadow:
    0 14px 30px rgba(31, 58, 82, 0.22),
    0 4px 10px rgba(31, 58, 82, 0.12);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.3s ease,
              background 0.22s ease,
              opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.call-fab svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}
.call-fab:hover,
.call-fab:focus-visible {
  transform: translateY(-2px) scale(1.04);
  background: var(--ink-2, #0f1f2e);
  box-shadow:
    0 18px 38px rgba(31, 58, 82, 0.28),
    0 6px 14px rgba(31, 58, 82, 0.16);
  outline: none;
}
.call-fab:active {
  transform: translateY(0) scale(0.97);
}
body.nav-locked .call-fab {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 480px) {
  .call-fab {
    width: 50px;
    height: 50px;
    /* mobile WhatsApp FAB is 50px + space-3 gap, lifted to space-6 baseline */
    bottom: calc(var(--space-6) + 50px + var(--space-3) + env(safe-area-inset-bottom, 0px));
    right:  calc(var(--space-4) + env(safe-area-inset-right, 0px));
  }
  .call-fab svg { width: 22px; height: 22px; }
}
@media print { .call-fab { display: none; } }

/* ——— Lead modal ——— */
.lead-modal {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  background: rgba(15, 22, 32, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  animation: lead-overlay-in .28s cubic-bezier(.2,.8,.2,1) forwards;
  overscroll-behavior: contain;
}
.lead-modal.is-closing { animation: lead-overlay-out .22s ease forwards; }

.lead-modal-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(92vh, 860px);
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(24px, 4vw, 48px);
  box-shadow: 0 30px 80px -20px rgba(15, 22, 32, 0.55),
              0 2px 0 rgba(31, 58, 82, 0.06);
  border: 1px solid var(--ink-line);
  transform: translateY(18px) scale(.96);
  opacity: 0;
  animation: lead-panel-in .42s cubic-bezier(.2,.8,.2,1) .04s forwards,
             lead-panel-float 6s ease-in-out .55s infinite;
}
.lead-modal.is-closing .lead-modal-panel {
  animation: lead-panel-out .2s ease forwards;
}

@keyframes lead-overlay-in  { to { opacity: 1; } }
@keyframes lead-overlay-out { to { opacity: 0; } }
@keyframes lead-panel-in {
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes lead-panel-out {
  to { transform: translateY(8px) scale(.98); opacity: 0; }
}
@keyframes lead-panel-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.lead-modal-close {
  position: absolute;
  top: clamp(12px, 1.4vw, 18px);
  right: clamp(12px, 1.4vw, 18px);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: 50%;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.lead-modal-close:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: rotate(90deg);
}
.lead-modal-close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.lead-modal-head { margin-bottom: var(--space-5); padding-right: 44px; }
.lead-modal-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.lead-modal-title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 var(--space-3);
}
.lead-modal-sub {
  font-family: var(--f-body);
  font-size: var(--fs-body-sm);
  color: var(--ink-3);
  margin: 0;
  line-height: 1.5;
}

.lead-modal-form .field { padding-top: var(--space-3); }
.lead-modal-form .field.has-error { border-bottom-color: var(--accent); }
.field-error {
  display: block;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.lead-modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}
.lead-modal-skip {
  background: transparent;
  border: none;
  padding: 6px 2px;
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.lead-modal-skip:hover { color: var(--ink); border-bottom-color: var(--ink); }
.lead-modal-submit[disabled] { opacity: .6; cursor: not-allowed; }

/* Mobile: stack actions, give CTA full width */
@media (max-width: 520px) {
  .lead-modal-actions { flex-direction: column-reverse; align-items: stretch; }
  .lead-modal-submit { justify-content: center; }
  .lead-modal-skip { text-align: center; }
}

/* Toast */
.lead-toast {
  position: fixed;
  bottom: clamp(16px, 3vw, 28px);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1100;
  display: inline-flex; align-items: center; gap: 12px;
  max-width: min(440px, calc(100vw - 24px));
  padding: 14px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: var(--fs-body-sm);
  box-shadow: 0 20px 50px -16px rgba(15, 22, 32, 0.55);
  opacity: 0;
  animation: lead-toast-in .35s cubic-bezier(.2,.8,.2,1) forwards;
}
@media (min-width: 720px) {
  .lead-toast { left: auto; right: clamp(16px, 3vw, 28px); transform: translateY(20px); }
  @keyframes lead-toast-in { to { transform: translateY(0); opacity: 1; } }
}
@keyframes lead-toast-in {
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.lead-toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6fc28a;
  box-shadow: 0 0 0 4px rgba(111, 194, 138, 0.18);
  flex-shrink: 0;
}
.lead-toast-close {
  background: transparent; border: none;
  color: rgba(236, 231, 223, 0.6);
  cursor: pointer; padding: 4px;
  margin-left: 4px;
  display: inline-flex;
  transition: color .18s ease;
}
.lead-toast-close:hover { color: var(--paper); }

/* ============================================================
   COMPACT DESKTOP (1024px – 1279px)
   1024 is the threshold where the full desktop layout takes over
   from the mobile drawer. Right at that edge the nav can crowd
   and sections feel tall, so this block trims rhythm without
   touching 1280+ laptops or the ultrawide tier below.
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* ——— Top nav (1024–1279) ———
     Switch from "auto 1fr auto" (which centres links inside the
     uneven middle column → visually drifts toward the smaller side)
     to true OPTICAL centring: links are absolutely positioned at
     50% of the nav, independent of logo/actions widths. The
     WhatsApp icon button is hidden here — the WhatsApp FAB in the
     corner already handles that affordance, and removing it gives
     the Quote button room to breathe. */
  .nav { position: relative; }
  .nav-links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    grid-column: auto;
    justify-self: auto;
    gap: var(--space-3);
  }
  .nav-cta-whatsapp { display: none; }
  .nav-cta          { padding: 9px 14px; font-size: 11px; letter-spacing: 0.12em; }

  /* Hero — shorter vertical breath, headline ceiling clipped a
     notch so a 768/800px-tall laptop sees the CTAs and stats
     above the fold. */
  .hero {
    min-height: auto;
    padding: calc(var(--space-7) + env(safe-area-inset-top, 0px)) 0 var(--space-6);
  }
  .hero-grid { gap: var(--space-5); min-height: calc(100dvh - var(--space-7)); }
  .h-display { font-size: clamp(40px, 6vw + 8px, 88px); }

  /* Sections — keep generous but trim ~20%. */
  .section { padding: var(--space-8) 0; }
  .section-head { margin-bottom: var(--space-6); }

  /* Products scrollytelling — stage a touch shorter so it
     centers cleanly even on a 768px viewport, and tighter info
     vs frame ratio. */
  .products-stage {
    grid-template-columns: 4fr 6fr;
    gap: clamp(28px, 3vw, 56px);
    height: 78dvh;
  }
  .products-info { max-width: 460px; }

  /* Industries — keep 4 cols but trim min-height + gap so the
     row reads as a single rhythmic band. */
  .industries-grid { gap: var(--space-3); }
  .ind-card { min-height: clamp(200px, 18vw + 110px, 240px); padding: var(--space-4) var(--space-3); }

  /* Footer — 4 cols stay, but reduce horizontal gap. */
  .footer-grid { gap: var(--space-5) var(--space-4); }
}

/* ============================================================
   ULTRAWIDE (≥ 1900px) — 2560 / QHD / 3K monitors
   Bump container, gutter, type caps and vertical rhythm so the
   layout doesn't sit in a narrow column with paper on either
   side. 1080p / 1440p laptops are unaffected.
   ============================================================ */
@media (min-width: 1900px) {
  :root {
    /* Wider canvas — content fills more of the screen without
       losing the "balanced page" feel. */
    --maxw: 1760px;
    --gutter: clamp(48px, 4vw, 96px);

    /* Lift the type-scale caps so headings scale with the screen.
       The slope is unchanged — we're only raising the ceiling. */
    --fs-h-display:  clamp(40px, 6.0vw + 16px, 168px);
    --fs-h-section: clamp(36px, 5.6vw + 8px,  120px);
    --fs-h2:        clamp(26px, 2.2vw + 20px,  56px);
    --fs-h3:        clamp(22px, 1.5vw + 17px,  38px);
    --fs-lede:      clamp(16px, .80vw + 14px,  22px);
    --fs-body:      clamp(15px, .50vw + 13px,  20px);

    /* Larger vertical rhythm so sections breathe. */
    --space-7: clamp(40px, 4.5vw + 22px, 104px);
    --space-8: clamp(56px, 6.5vw + 24px, 144px);
    --space-9: clamp(72px, 9.0vw + 24px, 200px);
  }
  /* Hero — give the blueprint companion a bit more presence so it
     doesn't get dwarfed by the heading column. */
  .hero-visual { max-width: 540px; }

  /* Lede paragraphs stretch a touch wider before the 60ch cap kicks in. */
  .lede { max-width: 68ch; }
}

/* Even-wider safety tier (≥ 2400px) — full ultrawide / 4K. */
@media (min-width: 2400px) {
  :root {
    --maxw: 1880px;
    --gutter: clamp(56px, 4vw, 120px);
    --fs-h-display: clamp(40px, 6.0vw + 16px, 184px);
  }
  .hero-visual { max-width: 600px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .lead-modal, .lead-modal-panel, .lead-toast { opacity: 1; transform: none; }
}

/* ============================================================
   MOBILE PERF OVERRIDES (≤ 768px)
   Drop compositor-expensive effects on phones; desktop is unchanged.
   ============================================================ */
@media (max-width: 768px) {
  /* Paper-grain overlay is a fixed full-viewport repaint — kill it. */
  body::before { display: none !important; }

  /* Backdrop-filter is the single most expensive paint op on mid-range
     Android — replace with a flat translucent fill at nav-equivalent opacity. */
  .nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(236, 231, 223, 0.96) !important;
  }
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Cheap shadows — keep depth, drop the painted spread radius.
     .ind-card intentionally excluded: it's a flat content panel, not
     an interactive surface, so it stays shadowless at rest. */
  .product-card, .contact-info, .lead-modal-panel,
  .whatsapp-fab, .call-fab, .nav-cta, .btn, .review-cta {
    box-shadow: 0 4px 12px rgba(31, 58, 82, 0.10) !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  .product-card:hover, .review-cta:hover {
    transform: none !important;
  }
}