/* =============================================================
   ISO Consultant — landing page
   Rebrand: change --accent, --accent-deep, --accent-soft and --gold.
   ============================================================= */

/* ------------------------------ fonts ------------------------------
   Self-hosted rather than linked from fonts.googleapis.com. That link
   was render-blocking AND cross-origin: the browser had to resolve DNS,
   open a TLS connection and read a stylesheet before it even learned
   which font files it needed — then repeat the whole handshake against
   fonts.gstatic.com to fetch them. Here the files sit on this origin,
   already warm, and the two that matter are preloaded from the <head>.

   Both faces are variable fonts, so one file covers every weight the
   page uses; the `font-weight` range below is what unlocks that. Do not
   split these back into one @font-face per weight — that downloads the
   same file four times.

   latin-ext is listed but only fetched if a character outside the latin
   subset is actually painted. Today nothing does, so it costs nothing.
   -------------------------------------------------------------------- */

@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(fonts/space-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(fonts/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url(fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600;
  font-display: swap; src: url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --accent:        #0A3B2C;
  --accent-deep:   #061512;
  --accent-soft:   #EBF2EE;
  --accent-tint:   #DEEAE4;
  --on-deep:       #E8EFEA;
  --on-deep-rgb:   232, 239, 234;
  --gold:          #C9A227;
  --gold-ink:      #8A6E14;
  --gold-soft:     #FBF6E6;

  --ink:           #12211C;
  --body:          #3E4E48;
  --muted:         #5A6A63;
  --muted-2:       #66736D;   /* lightest grey that still clears WCAG AA */

  --paper:         #F6F4EF;
  --card:          #FFFFFF;
  --field:         #FCFBF8;
  --field-line:    #D6D1C5;
  --line:          #DDD8CD;
  --line-soft:     #E5E0D5;

  --danger:        #A3341F;
  --danger-bg:     #FDF5F3;

  --shadow-sm:     0 2px 8px -4px rgba(6, 21, 18, 0.30);
  --shadow-md:     0 12px 28px -20px rgba(6, 21, 18, 0.46);
  --shadow-lg:     0 26px 60px -34px rgba(6, 21, 18, 0.55);

  --sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --display: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif;

  --gutter: clamp(16px, 3.5vw, 28px);
  --radius: 12px;
  --section-y: clamp(52px, 6.4vw, 88px);
}

/* ------------------------------- base ------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* component rules below set display on some of these, which would otherwise
   beat the UA stylesheet's [hidden] { display: none } */
[hidden] { display: none !important; }

/* the gutter is reserved permanently so that locking the scroll behind the
   popup doesn't widen the viewport and shunt the whole page sideways */
html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: 76px;           /* clears the fixed sticky bar */
}

h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.03em; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
table { border-collapse: collapse; width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }

::selection { background: var(--gold); color: var(--ink); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--paper);
  padding: 12px 18px; border-radius: 0 0 8px 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--paper); }

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

.sprite { display: none; }
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 16px; height: 16px; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot--gold { background: var(--gold); width: 6px; height: 6px; }

.pulse {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--accent); position: relative;
}
.pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--accent); opacity: 0; animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* scroll reveal — visible by default if JS never runs */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 620ms ease, transform 620ms ease; }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ------------------------------ buttons ------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 15.5px;
  padding: 14px 24px; border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease,
              transform 150ms ease, box-shadow 150ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--lg    { padding: 15px 26px; font-size: 16px; }
.btn--sm    { padding: 11px 18px; font-size: 14.5px; gap: 7px; }
.btn--block { width: 100%; padding: 17px; font-size: 16.5px; margin-top: 6px; }
.btn--block .icon { transition: transform 180ms ease; }
.btn--block:hover .icon { transform: translateX(4px); }

.btn--accent { background: var(--accent); color: var(--paper); box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-md); }
.btn--accent[disabled] { opacity: 0.65; cursor: progress; transform: none; }

.btn--gold { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-md); }

.btn--ghost { border-color: #C1BCAF; color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--card); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--accent); color: var(--paper); }

.btn--outline-ink { border-color: rgba(18, 33, 28, 0.45); color: var(--ink); }
.btn--outline-ink:hover { border-color: var(--ink); background: rgba(255, 255, 255, 0.4); }

.btn--outline-light { border-color: rgba(var(--on-deep-rgb), 0.35); color: var(--on-deep); }
.btn--outline-light:hover { border-color: var(--gold); color: var(--gold); }

/* ------------------------------ shared bits ------------------------------ */

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.eyebrow--gold { color: var(--gold); }

.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 9px;
  /* inline-flex alone isn't enough inside a flex column — a flex item stretches
     to the full track unless it says otherwise */
  align-self: flex-start;
  border: 1px solid #C9C4B7; background: rgba(255, 255, 255, 0.6);
  border-radius: 999px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: #4A5A53;
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  white-space: nowrap;
}
.badge--soft { background: var(--accent-soft); color: var(--accent); }

.section-title {
  font-weight: 700; font-size: clamp(27px, 4vw, 40px); line-height: 1.1;
  margin-top: 14px; color: var(--ink); text-wrap: balance;
}
.section-title--light { color: var(--on-deep); font-size: clamp(28px, 4.2vw, 42px); max-width: 20em; margin-bottom: 46px; }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 40px; flex-wrap: wrap; margin-bottom: 40px;
}
/* basis values keep title and note on one row until there is genuinely no
   space, instead of the note dropping below at full width */
.section-head > :first-child { flex: 1 1 22em; min-width: 0; }
.section-head__note { flex: 0 1 26em; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ------------------------------- topbar ------------------------------- */

.topbar { background: var(--accent-deep); color: var(--on-deep); font-size: 13px; letter-spacing: 0.02em; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 9px; }
.topbar__note { display: flex; align-items: center; gap: 9px; }
.topbar__hours { opacity: 0.78; }

/* ------------------------------- header ------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 244, 239, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); padding-block: 13px; }

.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
/* three letters, not two — the type drops a couple of points so "ISO" keeps
   an even margin inside the square instead of touching the corners */
.brand__mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--accent); color: var(--paper);
  font-family: var(--display); font-weight: 700; font-size: 13px;
  display: grid; place-items: center; letter-spacing: -0.02em;
}
.brand__mark--gold { background: var(--gold); color: var(--ink); width: 32px; height: 32px; font-size: 12px; }
.brand__name { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); }
.brand__name--light { color: var(--on-deep); }
.brand--footer { margin-right: 0; }

.site-nav { display: none; gap: 24px; font-size: 14.5px; font-weight: 500; }
.site-nav a { color: var(--muted); }
.site-nav a:hover { color: var(--accent); }

.site-header__actions { display: flex; align-items: center; gap: 14px; }

.phone-link {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink);
}
.phone-link:hover { color: var(--accent); }

.site-header__cta { padding: 11px 20px; font-family: var(--sans); font-size: 14.5px; border-radius: 8px; }

/* -------------------------------- hero -------------------------------- */

/* overflow:hidden keeps the oversized decorative shapes from widening the page */
.hero { position: relative; overflow: hidden; }
.hero__bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(58% 48% at 80% 4%, rgba(201, 162, 39, 0.16), transparent 68%),
    radial-gradient(52% 44% at 4% 0%, rgba(10, 59, 44, 0.11), transparent 70%);
}
.hero__bg > * { position: absolute; }

/* graph-paper dots, faded out before the next section starts */
.hero__dots {
  inset: 0;
  background: radial-gradient(circle at 1px 1px, rgba(18, 33, 28, 0.07) 1px, transparent 0) 0 0 / 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 26%, transparent 88%);
          mask-image: linear-gradient(to bottom, #000 26%, transparent 88%);
}

/* soft colour orbs — radial gradients rather than filter:blur, which is far
   cheaper to paint and matters for the Ads speed score */
.hero__orb { border-radius: 50%; }
.hero__orb--gold {
  width: 520px; height: 520px; top: -190px; right: -130px;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.26), rgba(201, 162, 39, 0) 68%);
  animation: drift 9s ease-in-out infinite;
}
.hero__orb--green {
  width: 420px; height: 420px; bottom: -170px; left: -120px;
  background: radial-gradient(circle, rgba(10, 59, 44, 0.16), rgba(10, 59, 44, 0) 70%);
  animation: drift 11s ease-in-out infinite reverse;
}

/* concentric outlines — an echo of the seal on a certificate */
.hero__ring { border-radius: 50%; border: 1px solid rgba(10, 59, 44, 0.16); }
.hero__ring--lg  { width: 660px; height: 660px; top: -290px; right: -210px; }
.hero__ring--md  { width: 470px; height: 470px; top: -205px; right: -125px; border-color: rgba(201, 162, 39, 0.42); }
.hero__ring--sm  { width: 300px; height: 300px; top: -120px; right: -50px; border-style: dashed; border-color: rgba(10, 59, 44, 0.20); }
.hero__ring--low { width: 380px; height: 380px; bottom: -190px; left: 8%; border-color: rgba(201, 162, 39, 0.30); }
.hero__ring--br  { width: 240px; height: 240px; bottom: -120px; right: 14%; border-style: dashed; border-color: rgba(10, 59, 44, 0.16); }

/* a long open curve sweeping through the gutter between the two columns */
.hero__arc {
  width: 780px; height: 780px; top: 6%; left: 40%;
  border-radius: 50%; border: 1px solid transparent;
  border-top-color: rgba(10, 59, 44, 0.13);
  border-right-color: rgba(10, 59, 44, 0.13);
  transform: rotate(-28deg);
}

/* survey-style cross marks — reads as deliberate on a compliance brand,
   where scattered dots just looked like specks */
.hero__plus { width: 15px; height: 15px; opacity: 0.5; }
.hero__plus::before, .hero__plus::after { content: ""; position: absolute; background: var(--accent); }
.hero__plus::before { left: 0; top: 6.5px; width: 15px; height: 2px; }
.hero__plus::after  { top: 0; left: 6.5px; width: 2px; height: 15px; }
.hero__plus--a { top: 11%; left: 3.5%; animation: drift 7s ease-in-out infinite; }
.hero__plus--b { top: 31%; left: 55.5%; opacity: 0.42; animation: drift 8.5s ease-in-out infinite reverse; }
.hero__plus--c { bottom: 20%; right: 6%; opacity: 0.34; animation: drift 10s ease-in-out infinite; }
.hero__plus--d { bottom: 9%; left: 47%; opacity: 0.3; animation: drift 11s ease-in-out infinite reverse; }
.hero__plus--b::before, .hero__plus--b::after,
.hero__plus--d::before, .hero__plus--d::after { background: var(--gold-ink); }

/* faint diagonal hatch anchoring the bottom-right corner */
.hero__hatch {
  width: 260px; height: 200px; right: 0; bottom: 0;
  background: repeating-linear-gradient(-45deg,
    rgba(10, 59, 44, 0.07) 0 1px, transparent 1px 11px);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000, transparent 78%);
          mask-image: radial-gradient(circle at 100% 100%, #000, transparent 78%);
}

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -18px, 0); }
}

/* ---- ISO service motifs in the background ---------------------------------
   Ghosted standard codes and the service icons that go with them. Everything
   here animates transform/opacity only, so it composites on the GPU and costs
   nothing measurable on the Ads speed score. --------------------------------- */

.hero__code {
  font-family: var(--display); font-weight: 700; letter-spacing: -0.03em;
  white-space: nowrap; user-select: none;
  color: var(--on-deep); opacity: 0.055;
}
/* clamp so they shrink with the viewport instead of dominating narrow screens */
.hero__code--1 { font-size: clamp(18px, 2.2vw, 30px); top: 3%;   left: 1.5%;  --tilt: -4deg; animation: floatSlow 10s ease-in-out infinite; }
.hero__code--2 { font-size: clamp(15px, 1.8vw, 24px); top: 44%;  left: 49%;   --tilt: 3deg;  animation: floatSlow 12s ease-in-out infinite reverse; }
.hero__code--3 { font-size: clamp(16px, 2vw, 26px);   bottom: 4%; left: 2.5%; --tilt: 2deg;  animation: floatSlow 11s ease-in-out infinite; }
.hero__code--4 { font-size: clamp(14px, 1.7vw, 22px); top: 15%;  right: 0.5%; --tilt: -3deg; animation: floatSlow 13s ease-in-out infinite reverse; }
.hero__code--5 { font-size: clamp(13px, 1.5vw, 20px); bottom: 22%; left: 38%; --tilt: -2deg; animation: floatSlow 9s ease-in-out infinite; }
.hero__code--6 { font-size: clamp(12px, 1.4vw, 18px); top: 74%;  right: 8%;   --tilt: 4deg;  animation: floatSlow 14s ease-in-out infinite reverse; }

.hero__svc {
  fill: none; stroke: var(--on-deep); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.075;
}
.hero__svc--1 { width: 40px; height: 40px; top: 7%;    left: 42%;  animation: spinSlow 26s linear infinite; }
.hero__svc--2 { width: 32px; height: 32px; bottom: 9%; left: 60%;  animation: floatSlow 10.5s ease-in-out infinite; }
.hero__svc--3 { width: 36px; height: 36px; top: 58%;   left: 2%;   animation: floatSlow 11.5s ease-in-out infinite reverse; }
.hero__svc--4 { width: 30px; height: 30px; bottom: 30%; right: 2.5%; animation: spinSlow 21s linear infinite reverse; }
.hero__svc--5 { width: 28px; height: 28px; top: 30%;   left: 33%;  animation: floatSlow 12.5s ease-in-out infinite; }

/* the seal-style outlines turn very slowly, like a stamp being set */
.hero__ring--sm { animation: spinSlow 34s linear infinite; }
.hero__ring--br { animation: spinSlow 46s linear infinite reverse; }

@keyframes floatSlow {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg)); }
  50%      { transform: translate3d(0, -26px, 0) rotate(var(--tilt, 0deg)); }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ---- extra motion --------------------------------------------------------
   Verification pulses, a slow light sweep and rising motes. All of it moves
   with transform/opacity only, which the compositor handles without repainting
   the hero. -------------------------------------------------------------- */

/* pulses expanding out of the gutter, like a check being run */
.hero__radar {
  width: 150px; height: 150px; border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.5);
  opacity: 0;
  animation: radar 4.5s ease-out infinite;
}
.hero__radar--1 { top: 34%;    left: 50%; }
.hero__radar--2 { bottom: 12%; left: 40%; border-color: rgba(var(--on-deep-rgb), 0.34); animation-delay: 2.25s; }
@keyframes radar {
  0%   { transform: scale(0.3); opacity: 0; }
  10%  { opacity: 0.32; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* one soft band crossing the hero every 15s */
.hero__sweep {
  top: -30%; left: -45%; width: 38%; height: 160%;
  background: linear-gradient(90deg, transparent, rgba(var(--on-deep-rgb), 0.05), transparent);
  animation: sweep 7s ease-in-out infinite;
}
@keyframes sweep {
  0%   { transform: translateX(0) skewX(-18deg); opacity: 0; }
  8%   { opacity: 1; }
  58%  { opacity: 1; }
  72%  { transform: translateX(340%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(340%) skewX(-18deg); opacity: 0; }
}

/* particles drifting up out of the base of the section. Sizes, speeds, start
   offsets and drift direction are all varied so the field never looks like a
   row of identical dots marching in step. */
.hero__mote {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); opacity: 0; bottom: 1%;
  animation-name: rise; animation-timing-function: linear; animation-iteration-count: infinite;
}
.hero__mote--1  { left: 4%;  animation-duration: 6s;   animation-delay: 0s;   }
.hero__mote--2  { left: 11%; animation-duration: 8.5s; animation-delay: 2.4s; width: 2px; height: 2px; }
.hero__mote--3  { left: 18%; animation-duration: 5.4s; animation-delay: 4.1s; background: var(--on-deep); }
.hero__mote--4  { left: 25%; animation-duration: 9.2s; animation-delay: 1.2s; width: 4px; height: 4px; }
.hero__mote--5  { left: 32%; animation-duration: 6.8s; animation-delay: 5.6s; background: var(--on-deep); width: 2px; height: 2px; }
.hero__mote--6  { left: 39%; animation-duration: 7.6s; animation-delay: 0.6s; }
.hero__mote--7  { left: 46%; animation-duration: 5.8s; animation-delay: 3.3s; width: 2px; height: 2px; }
.hero__mote--8  { left: 53%; animation-duration: 8.8s; animation-delay: 6.2s; background: var(--on-deep); }
.hero__mote--9  { left: 60%; animation-duration: 6.4s; animation-delay: 1.9s; width: 4px; height: 4px; }
.hero__mote--10 { left: 67%; animation-duration: 7.2s; animation-delay: 4.7s; background: var(--on-deep); width: 2px; height: 2px; }
.hero__mote--11 { left: 74%; animation-duration: 5.6s; animation-delay: 2.8s; }
.hero__mote--12 { left: 81%; animation-duration: 9.6s; animation-delay: 0.3s; width: 2px; height: 2px; }
.hero__mote--13 { left: 88%; animation-duration: 6.2s; animation-delay: 5.1s; background: var(--on-deep); }
.hero__mote--14 { left: 94%; animation-duration: 7.9s; animation-delay: 3.7s; width: 4px; height: 4px; }
/* these two fall the other way, so the field is not all one direction */
.hero__mote--15 { left: 22%; animation-name: riseLeft; animation-duration: 8.2s; animation-delay: 1.5s; background: var(--on-deep); width: 2px; height: 2px; }
.hero__mote--16 { left: 70%; animation-name: riseLeft; animation-duration: 6.6s; animation-delay: 4.4s; }

@keyframes rise {
  0%   { transform: translate3d(0, 0, 0);          opacity: 0; }
  12%  { opacity: 0.65; }
  80%  { opacity: 0.18; }
  100% { transform: translate3d(26px, -460px, 0);  opacity: 0; }
}
@keyframes riseLeft {
  0%   { transform: translate3d(0, 0, 0);           opacity: 0; }
  12%  { opacity: 0.6; }
  80%  { opacity: 0.15; }
  100% { transform: translate3d(-34px, -430px, 0);  opacity: 0; }
}

/* the orbs now breathe as well as drift */
.hero__orb--gold  { animation: orbBreathe 9s ease-in-out infinite; }
.hero__orb--green { animation: orbBreathe 12s ease-in-out infinite reverse; }
@keyframes orbBreathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(0, -20px, 0) scale(1.13); }
}

/* the dot grid creeps by exactly one tile, so the loop is seamless */
.hero__dots { inset: -48px; animation: dotsDrift 18s linear infinite; }
@keyframes dotsDrift { to { transform: translate3d(24px, 24px, 0); } }
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(32px, 4.5vw, 60px); align-items: stretch;
  padding-block: clamp(40px, 5vw, 70px) clamp(28px, 3.4vw, 44px);
}
/* The copy is the shorter of the two columns, so it centres against the form
   card rather than leaving all its slack at the bottom. */
.hero__copy {
  min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
}

.hero__title { margin-top: 20px; }
.hero__title-main {
  display: block; font-weight: 700; font-size: clamp(34px, 6vw, 58px);
  line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance;
}
.hero__lede { font-size: clamp(16px, 1.7vw, 18.5px); line-height: 1.6; color: var(--body); margin-top: 20px; max-width: 30em; text-wrap: pretty; }
.hero__lede strong { color: var(--ink); }

/* ---- proof band: one full-width row under both hero columns ----
   The mockup runs down the left across both rows; the list and the numbers
   stack beside it, which keeps the whole band about as tall as the mockup
   instead of adding a second storey to the hero. */
.hero__proof {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 156px) minmax(0, 1fr);
  column-gap: clamp(24px, 3.4vw, 46px);
  align-items: center;
  padding-bottom: clamp(38px, 4.6vw, 62px);
}
.hero__proof .certviz { grid-row: 1 / span 2; align-self: center; }

.deliver { min-width: 0; }
.deliver__label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px;
}
/* three across now that the band has the full width to work with */
.deliver__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px clamp(18px, 2.4vw, 32px); }
.deliver__list li { display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start; }
.deliver__list .icon { color: var(--accent); margin-top: 1px; }
.deliver__list strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.deliver__list span { display: block; font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 2px; }

.hero__actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; align-items: center; }

/* the numbers get their own full row beside the mockup */
.hero__proof .herostats {
  grid-column: 2;
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(var(--on-deep-rgb), 0.16);
}
.hero__proof .herostats li:first-child { padding-left: 0; }

.certviz { margin: 0; }
/* the frame wraps only the card, so the offset "stacked paper" layer can never
   spill down over the caption */
.certviz__frame { position: relative; }
.certviz__stack {
  position: absolute; inset: 10px -9px -8px 11px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line);
  transform: rotate(3deg); opacity: 0.7;
}
.certviz__card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: 12px;
  padding: 15px 15px 13px;
  box-shadow: var(--shadow-lg);
  transform: rotate(-2deg);
  animation: certFloat 7s ease-in-out infinite;
}
@keyframes certFloat {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(-2deg) translateY(-7px); }
}
.certviz__kicker {
  display: block; font-size: 7.5px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-2);
}
.certviz__code {
  font-family: var(--display); font-size: 16px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--accent); margin-top: 7px; line-height: 1.1;
}
.certviz__sys { font-size: 9.5px; color: var(--body); margin-top: 3px; }
.certviz__lines { display: grid; gap: 5px; margin: 11px 0 12px; }
.certviz__lines span { height: 4px; border-radius: 2px; background: var(--line); }
.certviz__lines span:nth-child(2) { width: 88%; }
.certviz__lines span:nth-child(3) { width: 62%; }
.certviz__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.certviz__seal { width: 28px; height: 28px; flex: none; }
.certviz__seal-out { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.certviz__seal-in  { fill: var(--gold); opacity: 0.16; }
.certviz__seal-tick { fill: none; stroke: var(--gold-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.certviz__seal-ribbon { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; }
.certviz__sign { display: grid; gap: 4px; font-size: 8.5px; color: var(--muted-2); text-align: right; }
.certviz__sign i { display: block; height: 1px; width: 74px; background: var(--field-line); margin-left: auto; }

.certviz__badge {
  position: absolute; top: -11px; right: -10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: var(--paper);
  border-radius: 999px; padding: 6px 12px;
  font-family: var(--display); font-size: 10.5px; font-weight: 600;
  box-shadow: var(--shadow-md);
}
.certviz__note {
  position: relative; z-index: 3;
  margin-top: 12px; font-size: 10.5px; line-height: 1.45; color: var(--muted-2);
}

.herostats { display: grid; grid-template-columns: repeat(3, 1fr); }
/* icon spans both rows, number sits above its label — never wraps awkwardly,
   at any column width */
.herostats li {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-areas: "icon num" "icon label";
  align-items: center; column-gap: 13px;
  padding: 4px 24px;
}
.herostats li + li { border-left: 1px solid var(--line); }
.herostats__icon {
  grid-area: icon; align-self: center;
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
}
.herostats__num { grid-area: num; }
.herostats__label { grid-area: label; }
.herostats__icon .icon { width: 17px; height: 17px; }
.herostats__num {
  font-family: var(--display); font-size: 23px; font-weight: 700;
  letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums;
}
.herostats__label { font-size: 13.5px; color: var(--muted); }

/* ------------------------------ lead form ------------------------------ */

/* Stretches to whatever height the copy column is, at every viewport width —
   tuning fixed pixel heights would only line up at one screen size. The slack
   collects above .quote-card__assure, which already reads as a card footer. */
.quote-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; min-width: 0;
  background: linear-gradient(180deg, var(--card) 0%, var(--card) 55%, #F8FBF9 100%);
  border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(20px, 2.6vw, 26px); box-shadow: var(--shadow-lg);
  scroll-margin-top: 100px;
}
/* accent rule across the top edge of the card */
.quote-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 45%, var(--gold) 100%);
}
/* brief ring when a quick-pick chip drops a standard into the form */
.quote-card.is-highlight { animation: cardPing 1200ms ease-out; }
@keyframes cardPing {
  0%   { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(10, 59, 44, 0.42); }
  100% { box-shadow: var(--shadow-lg), 0 0 0 18px rgba(10, 59, 44, 0); }
}
.quote-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quote-card__kicker {
  display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent);
}
.quote-card__title { font-weight: 600; font-size: 23px; letter-spacing: -0.02em; margin-top: 10px; }
.quote-card__sub { font-size: 14px; color: var(--muted); margin: 6px 0 14px; }

/* The "8,000+ businesses served" strip that used to sit here was removed with
   the multi-step rework: the same figure is now one of the three numbers in
   the proof band directly below, and the 76px it cost was the difference
   between this card matching the hero copy and towering over it. */

/* one row, not two: the card is now sized to sit beside the hero copy, and
   these two reassurances were costing 40px of it */
.quote-card__assure {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: auto; padding-top: 15px;
  border-top: 1px solid var(--line-soft);
}
.quote-card__assure li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted-2); }
.quote-card__assure .icon { color: var(--accent); }

.lead-form { display: grid; gap: 13px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- stepper ---
   Revealed by script.js: without it both steps show and the form is a single
   page, so the progress line would be lying about what's ahead. */
.stepper { display: grid; gap: 8px; }
.stepper__track { display: block; height: 3px; border-radius: 2px; background: var(--line-soft); overflow: hidden; }
.stepper__fill {
  display: block; height: 100%; width: 50%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transition: width 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.stepper__label { display: flex; align-items: baseline; gap: 9px; font-size: 12.5px; color: var(--muted); }
.stepper__label strong {
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--accent); flex: none;
}

/* The taller step sets the height once, so moving between steps doesn't make
   the card — and the hero row it sits in — jump. */
.lead-form__steps { display: grid; gap: 13px; }
.step { display: grid; gap: 13px; align-content: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.lead-form__nav { display: flex; align-items: stretch; gap: 10px; }
.lead-form__nav .btn--block { flex: 1 1 auto; }
.btn--quiet {
  flex: none; background: transparent; color: var(--muted);
  border: 1px solid var(--field-line); padding-inline: 14px;
}
.btn--quiet:hover { background: var(--field); color: var(--ink); border-color: var(--muted-2); }

.field { display: grid; gap: 6px; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field > legend { padding: 0; }

/* pill selector — the visible control is the <span>; the radio itself is
   hidden but still focusable, so keyboard and screen readers work natively */
.pillgroup { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 1px; }
.pill { display: inline-flex; cursor: pointer; }
.pill input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.pill span {
  display: inline-flex; align-items: center;
  font-family: var(--display); font-size: 13.5px; font-weight: 600; color: var(--ink);
  background: var(--card); border: 1px solid var(--field-line); border-radius: 999px;
  padding: 8px 14px; white-space: nowrap; box-shadow: 0 1px 2px rgba(6,21,18,.05);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.pill:hover span { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.pill input:checked + span {
  background: var(--accent); border-color: var(--accent); color: var(--paper);
  box-shadow: 0 2px 8px -3px rgba(10,59,44,.55);
}
.pill input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.pill--muted span { color: var(--muted); border-style: dashed; }
.pill--muted input:checked + span { color: var(--paper); border-style: solid; }
.field.is-invalid .pill span { border-color: var(--danger); }
.field > label, .field > legend {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.field__optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted-2); }

/* icon on the left, a tick on the right once the value passes */
.field__box { position: relative; display: block; }
.field__icon, .field__ok {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; pointer-events: none;
  fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.field__icon { left: 13px; stroke: var(--muted-2); transition: stroke 140ms ease; }
.field__ok {
  right: 12px; stroke: var(--accent); opacity: 0; transform: translateY(-50%) scale(0.7);
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.22, 1.2, 0.4, 1);
}

.field input {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--field); border: 1px solid var(--field-line);
  border-radius: 10px; padding: 13px 38px 13px 39px; outline: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.field input:focus {
  border-color: var(--accent); background: var(--card);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.field__box:focus-within .field__icon { stroke: var(--accent); }

/* live confirmation — the tick appears the moment the value becomes valid */
.field.is-valid .field__ok { opacity: 1; transform: translateY(-50%) scale(1); }
.field.is-valid input { border-color: #B9D3C5; }
.field.is-invalid .field__icon { stroke: var(--danger); }

.field.is-invalid input { border-color: var(--danger); background: var(--danger-bg); }
.field.is-invalid input:focus { box-shadow: 0 0 0 3px rgba(163, 52, 31, 0.14); }

.field__error { font-size: 12.5px; line-height: 1.4; color: var(--danger); }
.field__error:empty { display: none; }

.form-alert {
  border: 1px solid var(--danger); background: var(--danger-bg); border-radius: 9px;
  padding: 12px 13px; font-size: 13.5px; line-height: 1.5; color: var(--danger);
}

.lead-form__alt { text-align: center; font-size: 13.5px; color: var(--muted); }
.lead-form__alt a { font-weight: 600; }

/* the card keeps the copy column's height, so centre the confirmation in it
   rather than leaving it stranded at the top */
.lead-done {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: var(--radius); padding: 26px 22px; text-align: center;
}
.lead-done__mark {
  width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 12px;
  background: var(--accent); color: var(--paper); display: grid; place-items: center;
}
.lead-done__title { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--accent); }
.lead-done__body { font-size: 14px; color: var(--body); margin-top: 8px; line-height: 1.55; }
.lead-done__wa { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 14px; }

/* ---------------------------- industry strip ---------------------------- */

.industries { background: var(--card); border-block: 1px solid var(--line); }
.industries__inner {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 26px; padding-block: 20px;
}
.industries__label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--muted-2);
  padding-right: 26px; border-right: 1px solid var(--line);
  white-space: nowrap;
}

/* ---- marquee ----
   .marquee clips; .marquee__inner holds two identical tracks and slides by
   exactly one track width (-50%), so the loop has no visible seam. */
.marquee {
  position: relative; overflow: hidden; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent);
}
.marquee__inner {
  display: flex; width: max-content;
  animation: marqueeScroll 34s linear infinite;
}
/* WCAG 2.2.2: give people a way to stop moving content */
.marquee:hover .marquee__inner,
.marquee:focus-within .marquee__inner { animation-play-state: paused; }

.marquee__track { display: flex; gap: 9px; padding-right: 9px; flex: none; }
.marquee__track li {
  font-size: 13.5px; font-weight: 500; color: var(--body);
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 8px 16px; white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.marquee__track li:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

@keyframes marqueeScroll { to { transform: translateX(-50%); } }

/* ------------------------------ standards ------------------------------ */

.standards { background: var(--paper); }
.standards .wrap { padding-block: var(--section-y); }

.std {
  display: grid; grid-template-columns: 252px 1fr; gap: 22px; align-items: stretch;
  border: 1px solid var(--line-soft); border-radius: 20px;
  background: var(--card); padding: clamp(14px, 1.8vw, 20px);
  box-shadow: var(--shadow-md);
}

/* the slot occupies the grid cell; the list floats inside it, so the nine
   tabs never stretch the row — they scroll within the panel's height instead */
.std__tabslot { position: relative; min-width: 0; min-height: 0; }
.std__tabs {
  position: absolute; inset: 0;
  display: grid; gap: 4px; align-content: start; min-width: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding-right: 7px;
  scrollbar-width: thin; scrollbar-color: #C6D9CF transparent;
}
.std__tabs::-webkit-scrollbar { width: 6px; }
.std__tabs::-webkit-scrollbar-thumb { background: #C6D9CF; border-radius: 3px; }
.std__tabs::-webkit-scrollbar-track { background: transparent; }
.std__panels { min-width: 0; }
.std__tab {
  font: inherit; text-align: left; width: 100%; cursor: pointer;
  display: grid; grid-template-columns: 3px 1fr; gap: 13px; align-items: center;
  padding: 12px 14px; border-radius: 11px;
  background: transparent; border: 1px solid transparent; color: #4A5A53;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.std__tab:hover { background: var(--field); border-color: var(--line-soft); transform: translateX(2px); }
.std__tab.is-active {
  background: var(--accent-soft); border-color: #C6D9CF; color: var(--ink);
  box-shadow: 0 4px 14px -8px rgba(10,59,44,.45); transform: translateX(2px);
}
.std__bar { display: block; position: relative; overflow: hidden; width: 3px; height: 12px; border-radius: 2px; background: #CFC9BB; transition: height 140ms ease, background 140ms ease; }
.std__tab.is-active .std__bar { height: 30px; background: var(--accent); }

/* While the list is touring itself, the active tab's bar fills over the dwell
   time — the next switch is then expected instead of startling. The fill lives
   on .is-active, so moving the class to the next tab restarts it by itself. */
.std.is-autoplay .std__tab.is-active .std__bar::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 0;
  background: var(--gold);
  animation: stdDwell var(--std-dwell, 3.2s) linear forwards;
}
@keyframes stdDwell { from { height: 0; } to { height: 100%; } }
.std__tabtext { display: grid; gap: 3px; }
.std__code { font-family: var(--display); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.std__name { font-size: 12.5px; color: var(--muted-2); }

/* timeline sits on the tab so the list answers "how fast" before a click */
.std__meta {
  display: flex; align-items: center; gap: 7px; margin-top: 2px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted-2);
}
.std__meta::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.std__tab.is-active .std__meta { color: var(--accent); }
.std__flag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  background: var(--gold-soft); color: var(--gold-ink);
  border-radius: 999px; padding: 3px 8px; white-space: nowrap;
}

/* The certificate is the proof and the copy is the argument, so they get
   comparable weight: the sheet takes a third of the panel, and stretch
   makes both columns — and the tab list beside them — one height. */
/* The sheet is A4, so its width sets the panel's height — every 10px of
   column here costs 14px of section. 296px keeps it readable while letting
   the copy beside it, not the artwork, decide how tall the section is. */
.std__panel {
  display: grid; grid-template-columns: minmax(0, 296px) 1fr; gap: 28px; align-items: stretch;
  background: var(--field); border: 1px solid var(--line-soft); border-radius: 16px;
  padding: clamp(16px, 1.8vw, 22px);
}
.std__panel[hidden] { display: none; }
.no-js .std__panel + .std__panel { margin-top: 16px; }

/* coming back from display:none replays this, so every switch — clicked or
   automatic — settles in instead of snapping */
.std__panel { animation: stdPanelIn 220ms ease both; }
@keyframes stdPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* centred, so whatever height the copy doesn't use splits evenly above and
   below the sheet instead of pooling under it */
.std__cert { display: grid; gap: 12px; align-content: center; }
.cert-frame {
  position: relative; aspect-ratio: 3 / 4; border: 1px dashed #C9C4B7;
  border-radius: 12px; background: var(--card);
  display: grid; place-items: center; padding: 16px; overflow: hidden;
}
.cert-frame__hint { font-size: 12.5px; color: var(--muted-2); text-align: center; }
.cert-frame img { width: 100%; height: 100%; object-fit: contain; }

/* A real scan needs no dashed placeholder chrome — it gets a paper edge and
   the sheet's own A4 ratio, so the artwork isn't letterboxed inside a 3:4 box */
.cert-frame--photo {
  aspect-ratio: 900 / 1272; padding: 0;
  border: 1px solid var(--line-soft); background: #fff;
  box-shadow: 0 14px 34px -22px rgba(10, 59, 44, 0.55);
}
.std__certnote { font-size: 12px; color: var(--muted-2); letter-spacing: 0.03em; }

/* every panel is held at the tallest one's height, so the shorter ones would
   otherwise hang from the top with a pool of space under the button */
.std__body { display: flex; flex-direction: column; justify-content: center; }
.std__tag {
  align-self: flex-start; font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--gold-ink);
  background: var(--gold-soft); border-radius: 999px; padding: 5px 11px;
}
.std__title { font-weight: 700; font-size: clamp(23px, 2.7vw, 27px); line-height: 1.1; margin-top: 9px; color: var(--accent); }
.std__subtitle { font-family: var(--display); font-weight: 500; font-size: 16.5px; margin-top: 3px; }
.std__note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 12px; border: 1px solid #E3D5A8; background: var(--gold-soft); border-radius: 10px;
  padding: 10px 12px; font-size: 13.5px; line-height: 1.5; color: #6B551A;
}
.std__note .icon { margin-top: 2px; }
.std__blurb { font-size: 15px; line-height: 1.58; color: var(--body); margin-top: 13px; text-wrap: pretty; }

.std__who { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: grid; gap: 7px; }
.std__who h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); font-family: var(--sans); }
.std__who ul { display: grid; gap: 7px; }
.std__who li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 14.5px; align-items: start; }
.std__who li::before { content: "›"; color: var(--accent); font-weight: 700; }

.std__facts {
  display: flex; flex-wrap: wrap; gap: 9px; margin: 16px 0 18px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.std__facts > div {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 11px;
  padding: 9px 14px;
}
.std__facts dt { font-size: 11px; color: var(--muted-2); letter-spacing: 0.06em; text-transform: uppercase; }
.std__facts dd { font-family: var(--display); font-weight: 700; font-size: 16px; margin: 2px 0 0; color: var(--accent); }

/* no margin-top:auto here — an auto margin eats the free space before
   justify-content ever sees it, which would pin this to the bottom and
   leave the copy above it stuck at the top */
.std__cta { align-self: flex-start; }

/* ------------------------------- process ------------------------------- */

.process { background: var(--accent-deep); color: var(--on-deep); }
.process .wrap { padding-block: var(--section-y); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.steps__item {
  position: relative;
  background: rgba(var(--on-deep-rgb), 0.05);
  border: 1px solid rgba(var(--on-deep-rgb), 0.16);
  border-radius: 16px; padding: 26px 22px 24px;
}
.steps__num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: var(--gold); color: var(--ink);
  font-family: var(--display); font-size: 15px; font-weight: 700;
}
.steps__title { font-weight: 600; font-size: 19px; letter-spacing: -0.02em; margin-top: 16px; }
.steps__body { font-size: 14.5px; line-height: 1.6; color: rgba(var(--on-deep-rgb), 0.78); margin-top: 9px; text-wrap: pretty; }
.steps__when {
  display: inline-block; margin-top: 16px; padding: 4px 10px; border-radius: 999px;
  background: rgba(var(--on-deep-rgb), 0.1); font-size: 12px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: rgba(var(--on-deep-rgb), 0.75);
}

.process__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-top: 32px; padding-top: 28px;
  border-top: 1px solid rgba(var(--on-deep-rgb), 0.16);
}
.process__cta p { font-size: 16px; color: rgba(var(--on-deep-rgb), 0.8); max-width: 42em; }
.process__cta strong { color: var(--on-deep); }

/* --------------------------------- why --------------------------------- */

.why { background: var(--card); border-top: 1px solid var(--line); }
.why .wrap { padding-block: var(--section-y); }

/* ---- condensed why-us: four short cards + one quote bar ---- */
.whycards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.whycard {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: 16px; padding: 22px 20px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.whycard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.whycard__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 14px;
}
.whycard h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.whycard p { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-top: 7px; }

.quotebar {
  margin: 22px 0 0; display: grid; grid-template-columns: 1fr auto;
  gap: 12px 28px; align-items: center;
  background: var(--accent-deep); color: var(--on-deep);
  border-radius: 18px; padding: 28px clamp(22px, 3vw, 34px);
}
.quotebar blockquote {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.4; letter-spacing: -0.02em;
  text-wrap: pretty;
}
.quotebar blockquote::before { content: "\201C"; color: var(--gold); }
.quotebar blockquote::after  { content: "\201D"; color: var(--gold); }
.quotebar figcaption { grid-column: 1; font-size: 13.5px; color: rgba(var(--on-deep-rgb), 0.7); }
.quotebar figcaption strong { color: var(--on-deep); }
.quotebar .btn { grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; }

@media (max-width: 1020px) { .whycards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .whycards { grid-template-columns: 1fr; }
  .quotebar { grid-template-columns: 1fr; }
  .quotebar .btn { grid-column: 1; grid-row: auto; width: 100%; }
}

/* --------------------------------- faq --------------------------------- */

.faq { background: var(--paper); }
.faq__inner {
  display: grid; grid-template-columns: 0.78fr 1.22fr; gap: clamp(32px, 5vw, 60px);
  align-items: start; padding-block: var(--section-y);
}
.faq__aside { position: sticky; top: 96px; }
.faq__note { font-size: 16px; line-height: 1.6; color: var(--muted); margin-top: 16px; }
.faq__note a { font-weight: 600; }
.faq__aside .btn { margin-top: 22px; }

.faq__list { display: grid; gap: 10px; }
.faq__item {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 0 20px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.faq__item[open] { border-color: #C6D9CF; box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 18px; height: 18px; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; background: var(--muted-2); border-radius: 2px;
  transition: transform 220ms ease, background 220ms ease;
}
.faq__icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
.faq__icon::after  { top: 0; left: 8px; width: 2px; height: 18px; }
.faq__item[open] .faq__icon::before { background: var(--accent); }
.faq__item[open] .faq__icon::after { transform: scaleY(0); background: var(--accent); }
.faq__a { font-size: 15.5px; line-height: 1.65; color: var(--muted); margin: 0 0 20px; max-width: 48em; text-wrap: pretty; }

/* ------------------------------- cta band ------------------------------- */

.cta-band__wrap { padding-block: 0 var(--section-y); }
.cta-band {
  background: linear-gradient(135deg, #D9B43A 0%, var(--gold) 55%, #B8901F 100%);
  border-radius: 22px;
  padding: clamp(30px, 4vw, 54px) clamp(24px, 4vw, 50px);
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.cta-band__title { font-weight: 700; font-size: clamp(26px, 3.8vw, 38px); line-height: 1.08; color: var(--ink); max-width: 22em; }
.cta-band__sub { font-size: 16.5px; color: rgba(18, 33, 28, 0.82); margin-top: 12px; }
.cta-band__ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; }
.cta-band__ticks li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: rgba(18, 33, 28, 0.85); }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* -------------------------------- footer -------------------------------- */

.site-footer { background: var(--accent-deep); color: rgba(var(--on-deep-rgb), 0.78); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-block: 56px 34px; }
.site-footer__about { font-size: 14.5px; line-height: 1.6; margin-top: 16px; max-width: 32em; }
.site-footer__contact { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; }
.site-footer__contact a { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--on-deep); }
.site-footer__contact a:hover { color: var(--gold); }
.site-footer__head {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--on-deep);
}
.site-footer__links { display: grid; gap: 9px; margin-top: 16px; font-size: 14.5px; }
.site-footer__links a { color: rgba(var(--on-deep-rgb), 0.78); }
.site-footer__links a:hover { color: var(--gold); }
.site-footer__legal { border-top: 1px solid rgba(var(--on-deep-rgb), 0.14); }
/* disclaimer left, build credit right; the credit drops under it when the
   row runs out of width rather than squeezing either one */
.site-footer__legal .wrap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 32px;
  padding-block: 20px; font-size: 12.5px; line-height: 1.6; color: rgba(var(--on-deep-rgb), 0.62);
}
.site-footer__disclaimer { flex: 1 1 340px; max-width: 78ch; }
.site-footer__credit { flex: none; }
.site-footer__credit a { color: rgba(var(--on-deep-rgb), 0.8); border-bottom: 1px solid rgba(var(--on-deep-rgb), 0.26); padding-bottom: 1px; transition: color 160ms ease, border-color 160ms ease; }
.site-footer__credit a:hover { color: var(--gold); border-color: var(--gold); }

/* ------------------------------ sticky bar ------------------------------ */

.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--accent-deep); border-top: 1px solid rgba(201, 162, 39, 0.4);
  box-shadow: 0 -12px 30px -20px rgba(6, 21, 18, 0.85);
  transition: transform 260ms ease;
}
.stickybar.is-hidden { transform: translateY(110%); }
.stickybar__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 12px; }
.stickybar__text { color: rgba(var(--on-deep-rgb), 0.8); font-size: 15px; }
.stickybar__text strong { font-family: var(--display); font-weight: 600; color: var(--on-deep); }
.stickybar__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   DARK HERO
   Everything that flips the masthead + hero to the dark palette lives here,
   so it can be lifted out in one piece. The quote card deliberately stays
   white — on a dark hero that is what makes the form the brightest thing
   on the screen.
   ========================================================================== */

/* --- masthead: the top bar above it is already dark, so the header joins it
       rather than leaving a light stripe between two dark blocks --- */
.site-header {
  background: rgba(6, 21, 18, 0.88);
  border-bottom-color: rgba(var(--on-deep-rgb), 0.14);
}
.site-header .brand__name { color: var(--on-deep); }
.site-header .brand__mark { background: var(--gold); color: var(--ink); }
.site-nav a { color: rgba(var(--on-deep-rgb), 0.72); }
.site-nav a:hover { color: var(--gold); }
.site-header .phone-link { color: var(--on-deep); }
.site-header .phone-link:hover { color: var(--gold); }
.site-header__cta { background: var(--gold); color: var(--ink); }
.site-header__cta:hover { background: var(--paper); color: var(--ink); }

/* --- the hero itself --- */
.hero { background: var(--accent-deep); color: var(--on-deep); }
.hero__bg {
  background:
    radial-gradient(58% 48% at 80% 4%, rgba(201, 162, 39, 0.20), transparent 68%),
    radial-gradient(52% 44% at 4% 0%, rgba(120, 190, 160, 0.10), transparent 70%);
}
.hero__dots {
  background: radial-gradient(circle at 1px 1px, rgba(var(--on-deep-rgb), 0.10) 1px, transparent 0) 0 0 / 24px 24px;
}
.hero__orb--gold  { background: radial-gradient(circle, rgba(201, 162, 39, 0.24), rgba(201, 162, 39, 0) 68%); }
.hero__orb--green { background: radial-gradient(circle, rgba(140, 205, 175, 0.13), rgba(140, 205, 175, 0) 70%); }
.hero__ring       { border-color: rgba(var(--on-deep-rgb), 0.13); }
.hero__ring--md   { border-color: rgba(201, 162, 39, 0.38); }
.hero__ring--sm   { border-color: rgba(var(--on-deep-rgb), 0.17); }
.hero__ring--low  { border-color: rgba(201, 162, 39, 0.26); }
.hero__ring--br   { border-color: rgba(var(--on-deep-rgb), 0.15); }
.hero__arc { border-top-color: rgba(var(--on-deep-rgb), 0.15); border-right-color: rgba(var(--on-deep-rgb), 0.15); }
.hero__plus::before, .hero__plus::after { background: rgba(var(--on-deep-rgb), 0.75); }
.hero__plus--b::before, .hero__plus--b::after,
.hero__plus--d::before, .hero__plus--d::after { background: var(--gold); }
.hero__hatch {
  background: repeating-linear-gradient(-45deg,
    rgba(var(--on-deep-rgb), 0.08) 0 1px, transparent 1px 11px);
}

/* --- hero copy --- */
.hero .eyebrow-pill {
  border-color: rgba(var(--on-deep-rgb), 0.28);
  background: rgba(var(--on-deep-rgb), 0.06);
  color: rgba(var(--on-deep-rgb), 0.86);
}
.hero .pulse { background: var(--gold); }
.hero .pulse::after { border-color: var(--gold); }
.hero__title-main { color: var(--on-deep); }
.hero__lede { color: rgba(var(--on-deep-rgb), 0.76); }
.hero__lede strong { color: var(--on-deep); }

.hero .btn--gold:hover { background: var(--paper); color: var(--ink); }
.hero .btn--ghost { border-color: rgba(var(--on-deep-rgb), 0.32); color: var(--on-deep); }
.hero .btn--ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; }

/* --- "what you actually receive" --- */
.deliver__label { color: rgba(var(--on-deep-rgb), 0.6); }
.deliver__list .icon { color: var(--gold); }
.deliver__list strong { color: var(--on-deep); }
.deliver__list span { color: rgba(var(--on-deep-rgb), 0.68); }

/* The hero now sets a light text colour, which anything inside the white cards
   would inherit — the quote heading was rendering near-invisible on white.
   Reset both cards back to ink. */
.quote-card, .certviz__card { color: var(--ink); }

/* --- certificate: the white card is the point, only its caption changes --- */
.certviz__note { color: rgba(var(--on-deep-rgb), 0.55); }
.certviz__stack { background: rgba(var(--on-deep-rgb), 0.12); border-color: rgba(var(--on-deep-rgb), 0.16); }

/* --- stats strip --- */
.herostats li + li { border-left-color: rgba(var(--on-deep-rgb), 0.16); }
.herostats__icon { background: rgba(var(--on-deep-rgb), 0.1); color: var(--gold); }
.herostats__num { color: var(--on-deep); }
.herostats__label { color: rgba(var(--on-deep-rgb), 0.68); }

/* the section below the hero is white, so lift the seam */
.industries { border-top: 0; }

@media (max-width: 560px) {
  .herostats li + li { border-left: 0; border-top: 1px solid rgba(var(--on-deep-rgb), 0.16); }
}

/* ------------------------------ lead popup ------------------------------ */

/* Sits above the sticky bar (z 60) and the header (z 100). The tawk.to bubble
   carries a z-index no page can outbid, so script.js hides that widget while
   this is open rather than trying to win the stack. */
.pop {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--gutter);
  /* An implicit auto column would size itself to the card's max-content —
     and the card's own width: min(560px, 100%) is a percentage against that
     same track, so the browser falls back to max-content and the ten
     never-wrapping standard pills blow the column out to their unwrapped
     width. A definite track breaks that loop. */
  grid-template-columns: minmax(0, 1fr);
}
.pop__veil {
  position: absolute; inset: 0;
  background: rgba(6, 21, 18, 0.62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 220ms ease;
}
.pop.is-open .pop__veil { opacity: 1; }

.pop__card {
  position: relative; width: min(432px, 100%);
  max-height: calc(100vh - var(--gutter) * 2);
  /* stated as a pair on purpose: overflow-y alone promotes overflow-x from
     visible to auto, which is how a stray wide child earns a scrollbar */
  overflow-x: hidden; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px;
  box-shadow: var(--shadow-lg); padding: clamp(22px, 3vw, 30px);
  opacity: 0; transform: translateY(14px) scale(0.98);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(0.22, 1.1, 0.4, 1);
}
.pop.is-open .pop__card { opacity: 1; transform: none; }
.pop__card:focus { outline: none; }
/* the same gold-into-green rule the hero uses, so this reads as the site */
.pop__card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  border-radius: 18px 18px 0 0;
}

.pop__x {
  position: absolute; top: 13px; right: 13px; z-index: 1;
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line-soft); border-radius: 50%;
  background: var(--card); color: var(--muted); cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.pop__x:hover { color: var(--ink); border-color: var(--field-line); background: var(--field); }
.pop__x .icon { width: 15px; height: 15px; }

.pop__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--gold-ink); background: var(--gold-soft);
  border-radius: 999px; padding: 5px 11px;
}
.pop__eyebrow .icon { width: 13px; height: 13px; }
.pop__title {
  font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--accent); margin-top: 12px;
}
.pop__sub { font-size: 14.5px; line-height: 1.55; color: var(--body); margin-top: 8px; }
.pop__form { display: grid; gap: 13px; margin-top: 18px; }
.pop__submit { width: 100%; margin-top: 2px; }
/* Out of sight but still in the DOM — a bot that skips display:none fields
   would skip this one too. Clipped rather than parked at left: -9999px: a
   box that far out still counts towards the card's scrollable width. */
.pop__honey {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}
.pop__fine { margin-top: 13px; font-size: 12.5px; line-height: 1.5; color: var(--muted-2); text-align: center; }
.pop__fine a { font-weight: 600; }

.pop__done { text-align: center; padding: 8px 0 4px; }
.pop__wa { display: inline-block; margin-top: 15px; font-weight: 600; font-size: 14px; }

@media (max-width: 480px) {
  /* a sheet rising off the bottom edge beats a card floating in the middle
     of a phone screen, and it keeps the fields near the keyboard */
  .pop { place-items: end center; padding: 0; }
  .pop__card {
    width: 100%; max-height: 92vh;
    border-radius: 18px 18px 0 0; border-bottom: 0;
    transform: translateY(28px);
  }
  .pop__card::before { border-radius: 18px 18px 0 0; }
}

/* -------------------- apply modal (3 steps) -------------------- */

/* wider than the two-field popup: step two carries a textarea, and a
   scope description squeezed into 432px reads like a ransom note */
.pop--wide .pop__card { width: min(560px, 100%); }

.apbar { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.apbar__track { flex: 1; height: 4px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.apbar__fill {
  display: block; height: 100%; width: 33.33%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transition: width 320ms cubic-bezier(0.22, 1, 0.4, 1);
}
.apbar__count {
  flex: none; font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2);
}

.ap__form { margin-top: 16px; min-width: 0; }
/* the three sheets swap in place; only one is ever in the flow. min-width: 0
   on both the sheet and its fields stops a long standard name or an
   unbreakable pill from setting the width for the whole card. */
.ap__sheet { display: grid; gap: 14px; min-width: 0; }
.ap__sheet > * { min-width: 0; }
.ap__sheet[hidden] { display: none; }
.ap__note { font-size: 12.5px; line-height: 1.5; color: var(--muted-2); }
.ap__summary {
  font-size: 13px; line-height: 1.55; color: var(--muted);
  background: var(--accent-soft); border-radius: 10px; padding: 11px 13px;
}
.ap__summary:empty { display: none; }
.ap__summary strong { color: var(--accent); font-weight: 600; }

.ap__nav { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.ap__go { flex: 1; }        /* the forward action always owns the row */
.btn--ghost-line {
  background: transparent; color: var(--muted); border-color: var(--field-line); flex: none;
}
.btn--ghost-line:hover { color: var(--ink); border-color: var(--accent); background: var(--field); }

/* ---- textarea and select, matched to .field input ---- */
.field textarea,
.field select {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--field); border: 1px solid var(--field-line);
  border-radius: 10px; outline: none;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.field textarea { padding: 12px 14px; line-height: 1.55; resize: vertical; min-height: 88px; }
.field select { padding: 13px 34px 13px 39px; appearance: none; -webkit-appearance: none; cursor: pointer; }
.field textarea:focus,
.field select:focus { border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-tint); }
.field.is-invalid textarea { border-color: var(--danger); background: var(--danger-bg); }
/* the chevron the native control no longer draws */
.field__box--select::after {
  content: ""; position: absolute; right: 15px; top: 50%; pointer-events: none;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.9px solid var(--muted-2); border-bottom: 1.9px solid var(--muted-2);
  transform: rotate(45deg);
}
.field__hint { font-size: 12px; line-height: 1.45; color: var(--muted-2); }

@media (max-width: 560px) {
  .ap__nav { flex-wrap: wrap; }
  .btn--ghost-line { order: 2; flex: 1; }
  .ap__go { order: 1; flex: 1 1 100%; }
}

/* ============================== responsive ============================== */

@media (min-width: 1060px) {
  .site-nav { display: flex; }
}

@media (max-width: 1020px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  /* once the columns stack there is no gutter for it to expand into */
  .hero__radar--1 { display: none; }
  .faq__aside { position: static; }
  /* three columns in under 1000px leaves the copy a ribbon, and a ribbon
     wraps into a tall panel — take the width off the list and the sheet */
  .std { grid-template-columns: 216px 1fr; gap: 18px; }
  .std__panel { grid-template-columns: minmax(0, 236px) 1fr; gap: 20px; }
}

@media (max-width: 900px) {
  /* the three deliverables no longer fit side by side beside the mockup */
  .deliver__list { grid-template-columns: 1fr; }
  .hero__proof { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); }
  .std { grid-template-columns: 1fr; }
  .std__tabslot { position: static; }
  .std__tabs {
    position: static; inset: auto;
    grid-auto-flow: column; grid-auto-columns: minmax(168px, 1fr);
    overflow-x: auto; overflow-y: visible;
    padding: 0 0 6px; scrollbar-width: thin;
  }
  .std__panel { grid-template-columns: 1fr; }
  /* stacked, the sheet no longer has a column to match — cap it so it
     doesn't push the copy a screen and a half down */
  .cert-frame { max-width: 268px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .faq__inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .topbar__hours { display: none; }
  .industries__inner { grid-template-columns: 1fr; gap: 14px; }
  .industries__label { padding-right: 0; border-right: 0; }
  /* on one column the long curve and the mid-page marks cut straight through
     the copy — keep only the diffuse layers */
  .hero__arc, .hero__ring--sm, .hero__ring--br,
  .hero__plus--b, .hero__plus--d, .hero__hatch { display: none; }
  /* the big ghosted codes crowd a one-column layout — keep two, drop the rest */
  .hero__code--2, .hero__code--4, .hero__code--5, .hero__code--6 { display: none; }
  .hero__svc--1, .hero__svc--2, .hero__svc--5 { display: none; }
  /* thin the particle field right down on a narrow screen */
  .hero__sweep, .hero__radar--1,
  .hero__mote--3,  .hero__mote--5,  .hero__mote--7,  .hero__mote--8,
  .hero__mote--10, .hero__mote--11, .hero__mote--13, .hero__mote--14,
  .hero__mote--15, .hero__mote--16 { display: none; }

}

@media (max-width: 640px) {
  .stickybar__text { display: none; }
  .stickybar__inner { justify-content: center; }
  .stickybar__actions { width: 100%; }
  .stickybar__actions .btn { flex: 1 1 0; }
  body { padding-bottom: 82px; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .hero__proof { grid-template-columns: 1fr; row-gap: 26px; justify-items: start; }
  .hero__proof .certviz { grid-row: auto; }
  .hero__proof .herostats { grid-column: 1; }
  .certviz { max-width: 190px; }
  .herostats { grid-template-columns: 1fr; }
  .herostats li { padding: 11px 2px; }
  .herostats li + li { border-left: 0; border-top: 1px solid var(--line); }
  /* stacked, the side padding would leave the dividers inset from the first row */
  .hero__proof .herostats li,
  .hero__proof .herostats li:first-child { padding: 10px 0; }
  /* one field per row once the card is this narrow */
  .field-row { grid-template-columns: 1fr; }
  .certviz__card { padding: 14px 13px 13px; }
  .certviz__code { font-size: 16px; }
  .herostats__num { font-size: 20px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-header__cta { display: none; }
  .industries__inner { padding-block: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  /* the looping ones are switched off outright rather than run at 0.01ms,
     which would just repaint forever */
  .certviz__card, .pulse::after,
  .hero__orb, .hero__plus,
  .hero__code, .hero__svc, .hero__ring,
  .hero__radar, .hero__sweep, .hero__mote, .hero__dots { animation: none !important; }
  .hero__radar, .hero__sweep, .hero__mote { display: none; }
  .stepper__fill { transition: none; }
  /* stop the loop and let people scroll the row themselves instead */
  .marquee__inner { animation: none !important; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}