/* ================================================================
   THE SUPPLY LEDGER — homepage redesign direction
   Industrial parts-catalog + compliance-register visual world.
   Paper ground, ink text, one committed stamp-blue accent.
   Public Sans (UI/headings) + Courier Prime (data/registers only).
   ================================================================ */

:root {
  --paper: #f7f5ef;
  --paper-white: #fffdf8;
  --ink: #17181c;
  --ink-soft: #55544d;
  --ink-faint: #6f6e64;
  --stamp: #1e3a8a;
  --stamp-topbar: #dbdff0;
  --stamp-soft: rgba(30, 58, 138, 0.07);
  --stamp-line: rgba(30, 58, 138, 0.28);
  --rule: rgba(23, 24, 28, 0.16);
  --rule-soft: rgba(23, 24, 28, 0.09);
  --header-h: 72px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

::selection { background: var(--stamp); color: var(--paper-white); }

a:focus-visible,
button:focus-visible,
canvas:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 3px;
}

.mono {
  font-family: 'Courier Prime', 'Courier New', monospace;
}

/* ---------- Topbar ---------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  background: var(--stamp-topbar);
  border-bottom: 1px solid var(--rule);
}

.topbar-inner {
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

.brand-logo { height: 52px; width: auto; }

.brand-name {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.nav { display: flex; align-items: center; gap: 30px; }

.nav-link {
  position: relative;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink-soft);
  padding: 8px 2px;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%;
  height: 2px;
  background: var(--stamp);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s var(--ease-in-out);
}

.nav-link:hover,
.nav-link.is-active { color: var(--ink); }

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* .nav-cta lives on the blue topbar; .btn-cta lives on light page
   backgrounds elsewhere (e.g. "View All Products") — they need opposite
   fills now that the topbar itself is stamp-blue, so they no longer share
   a color declaration. */
.nav-cta,
.btn-cta {
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 10px 20px;
  border-radius: 3px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.16s var(--ease-out);
  white-space: nowrap;
}

.nav-cta {
  color: var(--paper-white);
  background: var(--stamp);
}

.nav-cta:hover { background: #16296b; transform: translateY(-1px); }

.btn-cta {
  color: var(--paper-white);
  background: var(--stamp);
}

.btn-cta:hover { background: #16296b; transform: translateY(-1px); }

.nav-cta:active,
.btn-cta:active {
  transform: scale(0.97);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  height: 2px;
  width: 24px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero (spray-reveal mechanics unchanged) ---------- */

.hero-pin-wrap { position: relative; height: 220vh; }

.hero {
  position: sticky;
  top: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--header-h);
  overflow: hidden;
  background: var(--paper);
}

.hero-reveal { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.hero-bg-alt {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.hero-bg-alt img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: grayscale(0.15) contrast(1.03);
}

.reveal-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

.reveal-clean {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.1) contrast(1.03);
}

.bubble-field { display: none; }

.hero-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  min-height: 62vh;
  pointer-events: none;
}

.hero-content,
.hero-why {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s var(--ease-in-out);
}

.hero-why { opacity: 0; }
.hero-why.is-active { pointer-events: auto; }

.hero-logo-wrap { margin-bottom: 24px; }
.hero-logo { height: clamp(150px, 20vw, 240px); width: auto; margin: 0 auto; filter: drop-shadow(0 2px 3px rgba(23,24,28,0.15)); }

.hero-tagline {
  margin: 0 0 14px;
  font-weight: 800;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.hero-sub {
  margin: 0 auto 22px;
  max-width: 480px;
  font-size: 16px;
  line-height: 2;
  color: var(--ink-soft);
}

/* A low-opacity, irregular-edged wash behind each wrapped line — not one
   box behind the whole paragraph. box-decoration-break makes the browser
   treat every line the text wraps to as its own separate fragment and
   paint the background on each one individually, so this adapts to
   whatever width the text actually wraps at instead of needing manual
   line breaks. The mismatched border-radius corners are what keep each
   stroke from reading as a clean highlighter rectangle. */
.brush-text {
  background-color: rgba(30, 58, 138, 0.13);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 40% 60% 45% 55% / 60% 35% 65% 40%;
  padding: 0.12em 0.5em;
}

.hero-sub .brush-text {
  background-color: rgba(247, 245, 239, 0.6);
  border-radius: 50% 30% 60% 40% / 40% 60% 30% 70%;
}

.hero-register-panel {
  display: inline-block;
  padding: 16px 32px;
  background: radial-gradient(ellipse 80% 100% at center, rgba(247, 245, 239, 0.9) 0%, rgba(247, 245, 239, 0.65) 60%, rgba(247, 245, 239, 0) 100%);
}

.hero-register {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}

.hero-register-item {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 0 16px;
  border-right: 1px solid var(--rule-soft);
  white-space: nowrap;
}

.hero-register-item:last-child { border-right: none; }
.hero-register-item strong { color: var(--stamp); font-weight: 700; }

/* Why Choose — ledger register, not cards */

.hero-why-panel {
  background: rgba(247, 245, 239, 0.85);
  border: 1px solid var(--rule);
  padding: 40px 48px;
}

.hero-why-title {
  font-weight: 800;
  font-size: clamp(28px, 4.2vw, 40px);
  color: var(--ink);
  margin: 0 0 26px;
}

.hero-why-register {
  width: 100%;
  max-width: 760px;
  text-align: left;
  border-top: 1px solid var(--rule);
}

.hero-why-row {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 20px 8px;
  border-bottom: 1px solid var(--rule-soft);
}

.hero-why-field {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 14px;
  letter-spacing: 0.07em;
  color: var(--stamp);
  text-transform: uppercase;
  font-weight: 700;
}

.hero-why-value { font-size: 19px; color: var(--ink); }
.hero-why-value span { color: var(--ink-soft); }

.hero-controls {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
}

.hero-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  transition: opacity 0.3s ease;
}

.hero-hint svg { width: 15px; height: 15px; stroke: var(--stamp); flex-shrink: 0; }
.hero-hint.is-hidden { opacity: 0; }

.hero-reset {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.16s var(--ease-out);
}

.hero-reset:hover { background: var(--stamp-soft); }
.hero-reset:active { transform: scale(0.97); }
.hero-reset svg { width: 14px; height: 14px; stroke: currentColor; }

/* ---------- Section shell ---------- */

.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 90px 24px;
}

.section-title {
  font-weight: 800;
  font-size: clamp(26px, 3.6vw, 36px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 12px;
}

.section-lead {
  max-width: 640px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 44px;
}

/* ---------- How It Works ---------- */

.how-pin-wrap { position: relative; height: calc(100vh + 320px); }

.how-section {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 20px) 24px 24px;
  overflow: hidden;
  background: var(--paper);
}

.how-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.how-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: grayscale(1) contrast(1.08);
  transition: opacity 0.5s var(--ease-in-out);
}

.how-bg-video.is-active { opacity: 0.1; }

.how-header {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 16px 28px 6px;
  text-align: center;
}

.how-header .section-title { font-size: clamp(22px, 3vw, 30px); margin-bottom: 6px; }
.how-header .section-lead { margin: 0 auto 14px; font-size: 14.5px; }

.how-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: center;
}

.how-step-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  opacity: 0;
  transition: opacity 0.4s var(--ease-in-out);
  pointer-events: none;
}

.how-step-content.is-active { opacity: 1; pointer-events: auto; }

.how-step-num {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: clamp(40px, 7vw, 60px);
  font-weight: 700;
  color: var(--stamp-line);
  line-height: 1;
  flex-shrink: 0;
}

.how-step-body { border-left: 1px solid var(--rule); padding-left: 22px; }

.how-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.how-step-head svg { width: 20px; height: 20px; stroke: var(--stamp); flex-shrink: 0; }

.how-step-content h3 {
  margin: 0;
  font-size: clamp(21px, 2.8vw, 27px);
  color: var(--ink);
}

.how-step-content p {
  margin: 0;
  max-width: 440px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.how-timeline {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 78px;
  flex: 0 0 auto;
}

.how-line {
  position: absolute;
  left: 0; right: 0; top: 30px;
  height: 2px;
  background: var(--rule);
}

.how-line-fill {
  position: absolute;
  left: 0; top: 30px;
  height: 2px;
  width: 0%;
  background: var(--stamp);
  transition: width 0.45s var(--ease-in-out);
}

.how-stamp {
  position: absolute;
  top: -2px;
  left: 0;
  width: 46px;
  height: 46px;
  color: var(--stamp);
  transform: translateX(0);
  transition: transform 0.45s var(--ease-in-out);
}

.how-stamp svg { width: 100%; height: 100%; transform: rotate(-7deg); }

/* Zero-width anchor points at the exact same 0 / 33.333 / 66.666 / 100%
   the line-fill's width animates to — the dot and label are positioned
   from here independently so neither's own size can pull the dot off
   that exact mark (which is what made the dots land unevenly before). */
.how-marker {
  position: absolute;
  top: 46px;
}

.how-marker[data-step="0"] { left: 0; }
.how-marker[data-step="1"] { left: 33.333%; }
.how-marker[data-step="2"] { left: 66.666%; }
.how-marker[data-step="3"] { left: 100%; }

.how-marker-dot {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--rule);
  transition: background 0.3s ease;
}

.how-marker.is-active .how-marker-dot,
.how-marker.is-passed .how-marker-dot { background: var(--stamp); }

.how-marker-label {
  position: absolute;
  top: 16px;
  left: 0;
  white-space: nowrap;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  transition: color 0.3s ease;
}

.how-marker[data-step="0"] .how-marker-label { text-align: left; }
.how-marker[data-step="1"] .how-marker-label,
.how-marker[data-step="2"] .how-marker-label { transform: translateX(-50%); text-align: center; }
.how-marker[data-step="3"] .how-marker-label { transform: translateX(-100%); text-align: right; }

.how-marker.is-active .how-marker-label,
.how-marker.is-passed .how-marker-label { color: var(--ink); }

/* ---------- Who We Serve — register list ---------- */

.who-we-serve { background: var(--paper); }

.serve-register {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  border-top: 1px solid var(--rule);
}

.serve-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 4px;
  border-bottom: 1px solid var(--rule-soft);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  transition: color 0.2s ease, transform 0.2s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .serve-row:hover { color: var(--stamp); transform: translateX(6px); }
  .serve-row:hover .arrow { color: var(--stamp); }
}

.serve-row:active { transform: scale(0.99); }

.serve-row .arrow {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 14px;
  color: var(--ink-faint);
  transition: color 0.2s ease;
}

/* ---------- Explore Range — itemised register ---------- */

.gallery-bleed { background: var(--paper-white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.range-register { border-top: 1px solid var(--rule); margin-bottom: 36px; }

.range-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule-soft);
}

.range-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1px solid var(--rule);
}

.range-thumb img { max-width: 36px; max-height: 36px; }

.range-name { font-weight: 600; font-size: 15px; color: var(--ink); flex: 1; }

.range-cat {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.view-all-wrap { text-align: center; }

/* ---------- CTA band — closing seal ---------- */

.cta-band {
  background: var(--stamp);
  color: var(--paper-white);
  text-align: center;
  padding: 90px 24px;
}

.cta-band h2 {
  font-weight: 800;
  font-size: clamp(26px, 4vw, 38px);
  color: var(--paper-white);
  margin: 0 0 14px;
}

.cta-band p {
  max-width: 560px;
  margin: 0 auto 30px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(247, 245, 239, 0.7);
}

.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.cta-btn-white {
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 700;
  color: var(--stamp);
  background: var(--paper-white);
  border-radius: 3px;
  transition: transform 0.16s var(--ease-out), background 0.2s ease;
}

.cta-btn-white:hover { transform: translateY(-2px); background: #e9e6dc; }
.cta-btn-white:active { transform: scale(0.97); }

.cta-btn-outline {
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 700;
  color: var(--paper-white);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  transition: border-color 0.2s ease, transform 0.16s var(--ease-out);
}

.cta-btn-outline:hover { border-color: var(--paper-white); }
.cta-btn-outline:active { transform: scale(0.97); }
.cta-btn-outline:active { transform: scale(0.97); }

/* ---------- Footer ---------- */

.site-footer { background: var(--paper); border-top: 1px solid var(--rule); padding: 56px 24px 0; }

.footer-top {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-logo { height: 34px; width: auto; align-self: flex-start; }
.footer-brand p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.footer-col h4 {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}

.footer-col p, .footer-col a {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
  margin-bottom: 10px;
  line-height: 1.5;
}

.footer-col a:hover { color: var(--stamp); }

.footer-bottom {
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ================================================================
   Shared secondary-page components (About / Products / Industries)
   ================================================================ */

.page-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 64px) 24px 32px;
  text-align: center;
}

.page-hero h1 {
  font-weight: 800;
  font-size: clamp(32px, 5vw, 50px);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
}

.page-sub {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

.section-alt { background: var(--paper-white); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* Stats register (replaces a big-number/small-label metric-card grid) */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 900px;
  margin: 0 auto;
}

.stat-item {
  padding: 20px 12px;
  text-align: center;
  border-left: 1px solid var(--rule-soft);
}

.stat-item:first-child { border-left: none; }

.stat-num {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-weight: 700;
  font-size: clamp(20px, 3vw, 28px);
  color: var(--stamp);
}

.stat-label {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* Journey timeline */
.timeline { max-width: 700px; margin: 0 auto; }

.timeline-item {
  position: relative;
  padding: 0 0 32px 28px;
  border-left: 1px solid var(--rule);
}

.timeline-item:last-child { padding-bottom: 0; border-left-color: transparent; }

.timeline-dot {
  position: absolute;
  left: -4px;
  top: 4px;
  width: 8px;
  height: 8px;
  background: var(--stamp);
}

.timeline-year {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stamp);
  margin-bottom: 4px;
}

.timeline-item p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }

/* "What Makes Us Different" register (was an icon-card grid) */
.diff-grid { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--rule); }

.diff-card { display: flex; gap: 16px; padding: 26px 4px; border-bottom: 1px solid var(--rule-soft); }

.diff-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--stamp);
  margin-top: 3px;
}

.diff-icon svg { width: 100%; height: 100%; }

.diff-card h3 { margin: 0 0 6px; font-size: 19px; color: var(--ink); }
.diff-card p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }

/* Specialty list (was bordered dot-cards) */
.specialty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 32px;
  max-width: 820px;
  margin: 0 auto;
}

.specialty-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 15px;
  color: var(--ink);
}

.specialty-item .dot { width: 6px; height: 6px; background: var(--stamp); flex-shrink: 0; }

/* Certifications */
.cert-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 48px;
}

.cert-grid img { max-height: 64px; width: auto; }

.cert-explain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}

.cert-explain h3 { font-size: 16px; color: var(--ink); margin: 0 0 8px; }
.cert-explain p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; }

/* Contact cards */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 32px;
}

.contact-card { border: 1px solid var(--rule); padding: 28px; }
.contact-card h3 { margin: 0 0 4px; font-size: 19px; color: var(--ink); }

.contact-card .role {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--stamp);
  margin: 0 0 16px;
}

.contact-card p { margin: 0 0 8px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.contact-card p a { color: var(--ink); font-weight: 600; }
.contact-card p a:hover { color: var(--stamp); }

.contact-card .btn-row { margin-top: 18px; }

.btn-primary, .btn-ghost, .btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 3px;
  transition: transform 0.16s var(--ease-out), background 0.2s ease;
}

.btn-primary { color: var(--paper-white); background: var(--stamp); }
.btn-primary:hover { background: #16296b; }
.btn-ghost { color: var(--ink); background: transparent; border: 1px solid var(--rule); }
.btn-ghost:hover { border-color: var(--stamp); color: var(--stamp); }
.btn-whatsapp { color: var(--paper-white); background: #1f8a4c; }
.btn-whatsapp:hover { background: #186b3b; }
.btn-primary:active, .btn-ghost:active, .btn-whatsapp:active { transform: scale(0.97); }

.contact-extra {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.hours-card { border: 1px solid var(--rule); padding: 24px; }
.hours-card h3 { margin: 0 0 14px; font-size: 16px; color: var(--ink); }

.hours-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours-table td { padding: 8px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft); }
.hours-table td:last-child { text-align: right; font-family: 'Courier Prime', 'Courier New', monospace; color: var(--ink); }
.hours-table tr:last-child td { border-bottom: none; }

.map-card { border: 1px solid var(--rule); overflow: hidden; line-height: 0; }

/* Products page: category grid + item tiles */
.product-category { margin-bottom: 48px; }
.product-category:last-child { margin-bottom: 0; }

.product-category-title {
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  text-align: center;
  margin: 0 0 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.product-card {
  border: 1px solid var(--rule);
  margin: -1px 0 0 -1px;
  padding: 24px 18px;
  text-align: center;
}

.product-card .product-thumb { height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.product-card img { max-height: 120px; max-width: 100%; }
.product-card .product-name { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }

.product-card .product-ask {
  display: inline-block;
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 11.5px;
  color: var(--stamp);
}

.product-card .product-ask:hover { color: var(--ink); }

/* Industries page */
.industry-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--rule); }

.industry-block { display: flex; gap: 18px; padding: 32px 4px; border-bottom: 1px solid var(--rule-soft); scroll-margin-top: calc(var(--header-h) + 16px); }

.industry-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--stamp);
  margin-top: 4px;
}

.industry-icon svg { width: 100%; height: 100%; }

.industry-copy h3 { margin: 0 0 10px; font-size: 20px; color: var(--ink); }
.industry-copy p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.industry-copy p:last-child { margin-bottom: 0; }
.industry-copy a { color: var(--stamp); font-weight: 600; }
.industry-copy a:hover { color: var(--ink); }

/* ---------- Reveal-on-scroll (one authored moment) ---------- */

.reveal-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

/* Rows in a register enter as a cascade, not a single flat block */
.serve-row.reveal-up,
.range-row.reveal-up { transform: translateY(10px); }

.serve-register .serve-row:nth-child(1), .range-register .range-row:nth-child(1) { transition-delay: 0ms; }
.serve-register .serve-row:nth-child(2), .range-register .range-row:nth-child(2) { transition-delay: 60ms; }
.serve-register .serve-row:nth-child(3), .range-register .range-row:nth-child(3) { transition-delay: 120ms; }
.serve-register .serve-row:nth-child(4), .range-register .range-row:nth-child(4) { transition-delay: 180ms; }
.serve-register .serve-row:nth-child(5), .range-register .range-row:nth-child(5) { transition-delay: 240ms; }
.serve-register .serve-row:nth-child(6), .range-register .range-row:nth-child(6) { transition-delay: 300ms; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .nav { display: none; }
  .nav-cta { padding: 13px 16px; font-size: 13.5px; }
  .topbar-inner { gap: 14px; }
  .nav-toggle { display: flex; }

  .nav.is-open {
    display: flex;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 28px 20px;
  }

  .nav.is-open .nav-link {
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
    color: var(--ink-soft);
  }

  .nav.is-open .nav-link::after { background: var(--stamp); }

  .nav.is-open .nav-link:hover,
  .nav.is-open .nav-link.is-active { color: var(--ink); }

  .hero-why-row { grid-template-columns: 150px 1fr; }
  .serve-register { grid-template-columns: 1fr; }

  .footer-top { grid-template-columns: 1fr; text-align: center; gap: 0; }
  .footer-brand { align-items: center; margin-bottom: 36px; }
  .footer-logo { height: 60px; align-self: center; }

  .footer-col { padding-top: 28px; border-top: 1px solid var(--rule); }
  .footer-col h4 { font-size: 12px; margin-bottom: 16px; }

  .footer-col:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    text-align: left;
  }
  .footer-col:last-child h4 { grid-column: 1 / -1; text-align: center; }

  .stats-strip { grid-template-columns: 1fr 1fr; }
  .stat-item:nth-child(3) { border-left: none; }
  .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid var(--rule-soft); padding-bottom: 24px; }
  .stat-item:nth-child(3), .stat-item:nth-child(4) { padding-top: 24px; }

  .specialty-grid { grid-template-columns: 1fr; }
  .cert-explain-grid { grid-template-columns: 1fr; gap: 28px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-extra { grid-template-columns: 1fr; }
  .diff-card, .industry-block { flex-direction: column; gap: 10px; }
}

@media (max-width: 620px) {
  .how-step-content { flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; text-align: left; }
  .how-step-num { font-size: 34px; }
  .how-step-body { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 12px; }
  .how-marker-label { display: none; }
  .how-marker-dot { width: 10px; height: 10px; }
  .how-timeline { height: 76px; }
  .how-line, .how-line-fill { top: 46px; }
  .how-marker { top: 42px; }
  .how-stamp { width: 38px; height: 38px; top: 0; }

  /* The category tag's natural (unwrapped) width was winning the flex
     shrink math against the name's flex:1, so it kept a full line to
     itself while squeezing the actual product name into a few characters.
     Forcing it onto its own line below removes that competition entirely. */
  .range-row { flex-wrap: wrap; }
  .range-cat { flex-basis: 100%; margin-left: 66px; }
}

@media (max-width: 520px) {
  .hero-why-panel { padding: 24px 20px; }
  .hero-register-panel { padding: 14px 20px; }
  .hero-why-row { grid-template-columns: 1fr; gap: 4px; }
  .hero-sub { font-size: 14.5px; padding: 0 6px; }
  .cta-short-hide { display: none; }
  .nav-cta { padding: 14px 16px; }
  .brand-name { display: none; }
  .topbar-inner { padding: 0 16px; gap: 10px; }
  .hero-register-item { font-size: 10.5px; padding: 0 10px; }
}

/* ---------- Reduced motion fallback ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-pin-wrap { height: auto; }
  .hero { position: relative; height: auto; padding-bottom: 60px; }
  .hero-content { position: relative; opacity: 1; }
  .hero-why { position: relative; opacity: 1; margin-top: 40px; }

  .how-pin-wrap { height: auto; }
  .how-section { position: relative; height: auto; }
  .how-bg { display: none; }
  .how-stage { position: static; }
  .how-step-content {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
    margin-bottom: 40px;
  }

  .reveal-up { opacity: 1; transform: none; transition: none; }
}