/* ==========================================================================
   QuantiDawn - shared stylesheet
   Mobile-first (375px base). Breakpoints: 768px (tablet), 960px (nav), 1100px, 1280px.
   Colour rule: --orange / --green are for fills, icons, large type only.
   Any orange or green used as TEXT must use --orange-text / --green-text.
   Design approach: clean and restrained (Apple-like clarity) with an engineered,
   blueprint-native character: hairline borders, grid lines, dimension marks.
   Motion approach: transform/opacity only, strong ease-out, press feedback,
   hover gated to real pointers. No scroll-triggered animation.
   ========================================================================== */

/* ---- 1. Tokens --------------------------------------------------------- */
:root {
  /* Brand palette (official) */
  --navy: #012852;
  --orange: #FD6101;
  --orange-tint: #FF7A2E;
  --white: #FFFFFF;
  --offwhite: #F7F5F1;
  --gray: #5D6670;            /* Slate: secondary copy */
  --ink: #17212B;             /* main body copy */
  --mist: #DCE7F0;            /* secondary text on navy */
  --deep-blueprint: #0A3D6B;
  --border: #D9D7D3;
  --green: #2EAA6E;

  /* Text-safe variants (WCAG AA on white and off-white) */
  --orange-text: #BE4901;
  --green-text: #227E51;

  /* Semantic roles */
  --bg: var(--white);
  --bg-alt: var(--offwhite);
  --text: var(--ink);
  --heading: var(--navy);
  --focus: var(--navy);
  --hairline: rgba(1, 40, 82, 0.12);
  --on-dark: #DCE7F0;                 /* text on the footer surface */
  --on-dark-muted: #B3C5D6;
  --navy-deep: #011F40;               /* footer surface: a step deeper than Quantidawn Navy so it separates from the CTA band */
  --input-border: #85827E;   /* 3.9:1 on white: meets 3:1 for UI components */
  --error: #B42318;          /* 6.5:1 on white; used with an icon + text, never colour alone */

  /* Type */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (one size per role) */
  --fs-label: 0.8125rem;   /* 13px  small caps labels: eyebrow, footer headings, table headers */
  --fs-small: 0.9375rem;   /* 15px  secondary text: tile copy, footer */
  --fs-body: 1.0625rem;    /* 17px  body, buttons, links */
  --fs-lead: 1.25rem;      /* 20px  hero sub-copy (desktop) */
  --fs-h3: 1.25rem;        /* 20px  every H3 */
  --fs-figure: 2rem;       /* 32px  headline numbers (plan prices) */

  /* Spacing scale (4/8 rhythm) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Shape: crisp, engineered radii */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --gutter: 20px;
  --container: 1200px;
  --header-h: 64px;

  --shadow-sm: 0 1px 2px rgba(1, 40, 82, 0.06), 0 1px 3px rgba(1, 40, 82, 0.06);
  --shadow-md: 0 1px 2px rgba(1, 40, 82, 0.06), 0 12px 28px rgba(1, 40, 82, 0.12);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* entering, feedback */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* sheets / panels */
  --t-press: 160ms;
  --t-hover: 200ms;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 72px; }
}

/* ---- 2. Reset / base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;       /* 17px reading size; also stops iOS zoom-on-focus */
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--heading);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.125rem, 8.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 5vw, 2.75rem); }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--s-4); }

a {
  color: var(--orange-text);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Visible keyboard focus on EVERY interactive element (never outline:none) */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark { --focus: #FFFFFF; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: first focusable element on every page */
.skip-link {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-5);
  background: var(--navy);
  color: #fff;
  font-weight: 500;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid var(--orange); outline-offset: 2px; }

main:focus { outline: none; } /* programmatic focus target only, never a tab stop */

/* ---- 3. Layout helpers -------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 8vw, 96px); }
.section--alt {
  background-color: var(--bg-alt);
  /* faint blueprint grid */
  background-image:
    linear-gradient(rgba(1, 40, 82, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(1, 40, 82, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
}

.section-head {
  max-width: 46rem;
  margin: 0 auto var(--s-7);
  text-align: center;
}

/* Small mono label, e.g. the hero eyebrow */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange-text);
}

/* ---- 4. Buttons (pill) -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;                    /* >= 44px tap target */
  min-width: 44px;
  padding: 0 var(--s-6);
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--t-press) var(--ease-out),
              background-color var(--t-hover) ease,
              border-color var(--t-hover) ease,
              color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }

/* Primary: orange fill + navy text (4.83:1) - one primary CTA per view */
.btn--primary { background: var(--orange); color: var(--navy); }

.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.on-dark .btn--secondary { color: #fff; border-color: rgba(255, 255, 255, 0.7); }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

.btn-row { display: flex; flex-direction: column; gap: var(--s-3); width: 100%; }
@media (min-width: 480px) {
  .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; }
}

/* ---- 5. Header / nav (frosted) ------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;                                   /* fallback */
  border-bottom: 1px solid var(--hairline);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--s-1);
  flex-shrink: 0;
}
.brand img { display: block; width: clamp(190px, 18vw, 220px); height: auto; }

.nav-toggle {
  display: none;               /* shown only when JS is available */
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--s-4);
  background: transparent;
  border: 1.5px solid rgba(1, 40, 82, 0.18);
  border-radius: var(--radius-pill);
  color: var(--navy);
  font: 500 0.9375rem/1 var(--font-body);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform var(--t-press) var(--ease-out), border-color var(--t-hover) ease;
}
.js .nav-toggle { display: inline-flex; }
.nav-toggle:active { transform: scale(0.95); }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.site-nav { width: 100%; }
.nav-list { display: flex; flex-direction: column; }

.nav-link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--s-2);
  color: var(--navy);
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: color var(--t-hover) ease;
}
.nav-link[aria-current="page"] {
  color: var(--navy);
  box-shadow: inset 3px 0 0 var(--orange);
  padding-left: var(--s-4);
}
.nav-cta { padding: var(--s-4) 0 var(--s-2); }
.nav-cta .btn { width: 100%; }

/* Collapsible only when JS is available; without JS the nav simply shows.
   Opens with a quick fade + slide from the top edge; closes faster than it opens. */
.js .site-nav {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  padding: var(--s-2) var(--gutter) var(--s-5);
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transform-origin: top center;
  transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 0s linear 140ms;
}
.js .site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-drawer), visibility 0s;
}

/* Desktop nav */
@media (min-width: 960px) {
  .nav-toggle, .js .nav-toggle { display: none; }
  .header-inner { flex-wrap: nowrap; }
  .site-nav, .js .site-nav {
    display: block;
    position: static;
    width: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .nav-list { flex-direction: row; align-items: center; gap: var(--s-1); }
  .nav-link {
    min-height: 44px;
    padding: 0 var(--s-4);
    font-size: 0.9375rem;
    border: 0;
    border-radius: var(--radius-pill);
  }
  .nav-link[aria-current="page"] {
    padding-left: var(--s-4);
    box-shadow: none;
    background: rgba(1, 40, 82, 0.07);
  }
  .nav-cta { padding: 0 0 0 var(--s-3); }
  .nav-cta .btn { width: auto; min-height: 44px; padding: 0 var(--s-5); font-size: 0.9375rem; }
}

/* ---- 6. Hero (centered, blueprint field) -------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #E7E5E1;
  padding-top: clamp(44px, 7vw, 80px);
  padding-bottom: 72px;                 /* trust strip overlaps the last 48px */
  background-color: var(--navy);
  /* glow + major grid (120px) + minor grid (24px) */
  background-image:
    radial-gradient(70% 55% at 50% 100%, rgba(10, 61, 107, 0.9), rgba(10, 61, 107, 0) 70%),
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: auto, 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: center top;
}
/* corner registration marks */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 20px; height: 20px;
  border: 0 solid rgba(255, 255, 255, 0.35);
  display: none;
}
.hero::before { left: var(--gutter); border-top-width: 2px; border-left-width: 2px; }
.hero::after  { right: var(--gutter); border-top-width: 2px; border-right-width: 2px; }
@media (min-width: 768px) { .hero::before, .hero::after { display: block; } }

.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero .eyebrow { color: var(--orange-tint); }   /* Morning Glow: keeps 4.5:1 over the brightest frame of the dawn clip */
.hero h1 { color: #fff; margin-top: var(--s-4); max-width: 20ch; }
.hero-sub {
  margin-top: var(--s-5);
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: #E7E5E1;
}
.hero-tagline {
  margin-top: var(--s-4);
  font-size: 1.125rem;
  font-weight: 500;
  color: #fff;
}
.hero .btn-row { margin-top: var(--s-6); justify-content: center; }

@media (min-width: 768px) {
  .hero-sub { font-size: var(--fs-lead); }
  .hero-tagline { font-size: var(--fs-lead); }
}

/* Entrance: quick staggered rise on load (text + buttons only; art is static) */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hero [data-rise] {
  animation: rise 400ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}

/* ---- 6b. Photo hero (homepage) ------------------------------------------
   Full-bleed photo anchored to the bottom of the hero. The sky is dark navy so
   the headline sits on it with strong contrast; a navy scrim guarantees it.   */
.hero--photo { padding-bottom: 232px; }
.hero--photo::before, .hero--photo::after { display: none; }   /* no registration marks over a photo */
.hero-bg { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; }
.hero-bg img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
}
.hero--photo .hero-inner { z-index: 1; }

/* Dawn clip: desktop only, added by script.js after page load. The photo above stays as the
   poster, so the video only fades in over it. It loops forward then in reverse (16 s), so there is no jump. */
.hero-video { display: none; }
.hero-motion {
  position: absolute;
  right: var(--gutter);
  bottom: 72px;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(1, 31, 64, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.hero-motion:active { transform: scale(0.94); }
.hero-motion svg { width: 16px; height: 16px; }
.hero-motion .i-play { display: none; }
.hero-motion.is-paused .i-pause { display: none; }
.hero-motion.is-paused .i-play { display: inline; }
@media (min-width: 768px) {
  .hero-motion:not([hidden]) { display: inline-flex; }
  .hero-video {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
    opacity: 0;
    transition: opacity 900ms ease;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  }
  .hero-video.is-playing { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) { .hero-motion:hover { background: rgba(1, 31, 64, 0.8); } }
@media (prefers-reduced-motion: reduce) { .hero-video, .hero-motion { display: none !important; } }
@media (min-width: 768px) {
  .hero--photo { padding-bottom: clamp(260px, 26vw, 340px); }
  .hero-bg { top: 0; }
  .hero-bg img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 14%);
  }
  .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1, 40, 82, 0.82) 0, rgba(1, 40, 82, 0.68) 45%, rgba(1, 40, 82, 0) 74%);
  }
}

/* ---- 7. Trust bar (elevated proof strip overlapping the hero) ----------- */
.trust-bar { position: relative; z-index: 2; margin-top: -48px; padding-bottom: var(--s-5); }
.trust-list {
  display: grid;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 76px;
  padding: var(--s-4) var(--s-5);
  color: var(--navy);
  font-weight: 500;
  line-height: 1.4;
}
.trust-item + .trust-item { border-top: 1px solid var(--hairline); }
.trust-item svg { flex: none; width: 24px; height: 24px; color: var(--green); }  /* icon: bright green OK */

/* mono emphasis for the one hard number in the strip */
.mono-em {
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(253, 97, 1, 0.12);
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .trust-list { grid-template-columns: repeat(3, 1fr); }
  .trust-item { padding: var(--s-5); }
  .trust-item + .trust-item { border-top: 0; border-left: 1px solid var(--hairline); }
}

/* ---- 8. Feature grid (Why QuantiDawn) ------------------------------------ */
.grid { display: grid; gap: var(--s-4); }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--4 { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-6); } }
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } }

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-5) var(--s-6);
}
/* "Why QuantiDawn": open columns divided by a rule, not boxed cards */
.feature { padding-top: var(--s-5); border-top: 2px solid var(--navy); }
.feature .icon-badge { margin-bottom: var(--s-5); }
.feature h3 { margin-bottom: var(--s-3); }
.feature p { font-size: var(--fs-small); line-height: 1.6; }

.icon-badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #fff;
}
.icon-badge svg { width: 24px; height: 24px; }

/* ---- 9. Service tiles --------------------------------------------------- */
.tile-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .tile-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } }
@media (min-width: 1100px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }
.tile-cell { display: flex; }
.tile-cell .tile { flex: 1; }

.tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--t-press) var(--ease-out),
              box-shadow var(--t-hover) var(--ease-out),
              border-color var(--t-hover) ease;
}
.tile:active { transform: scale(0.985); }
.tile-top { display: flex; align-items: center; gap: var(--s-4); }
.tile-desc { font-size: var(--fs-small); line-height: 1.55; }
.price {
  margin-top: auto;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--offwhite);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.section-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-6);
  text-align: center;
}
.foot-note {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-2);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--orange-text);
  text-decoration: none;
  transition: color var(--t-hover) ease;
}

/* ---- 10. Steps (dimension-line connectors) ------------------------------ */
.steps { display: grid; gap: var(--s-6); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 1.125rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.step h3 { padding-top: 10px; }

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); }
  .step { grid-template-columns: 1fr; gap: var(--s-5); position: relative; }
  /* dimension line: rule with end ticks */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    left: 64px;
    right: calc(var(--s-7) * -1 + 16px);
    height: 9px;
    background:
      linear-gradient(var(--border), var(--border)) center / 100% 1.5px no-repeat,
      linear-gradient(var(--border), var(--border)) left  / 1.5px 100% no-repeat,
      linear-gradient(var(--border), var(--border)) right / 1.5px 100% no-repeat;
  }
  .step h3 { padding-top: 0; max-width: 16rem; }
}

/* ---- 11. Closing CTA ---------------------------------------------------- */
.cta-band {
  text-align: center;
  color: #E7E5E1;
  padding-block: clamp(56px, 8vw, 96px);
  background-color: var(--navy);
  background-image:
    radial-gradient(60% 90% at 50% 0%, rgba(10, 61, 107, 0.9), rgba(10, 61, 107, 0) 70%),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}
.cta-band h2 { color: #fff; max-width: 18ch; margin-inline: auto; font-size: clamp(1.875rem, 6vw, 3rem); }
.cta-band .btn-row { margin-top: var(--s-6); justify-content: center; }

/* ---- 12. Footer (one closing line, then a short ruled strip) ---------------- */
.site-footer { background: var(--navy-deep); color: var(--on-dark); padding-block: var(--s-8) var(--s-6); font-size: var(--fs-small); }
.foot-line {
  max-width: 30ch;
  margin: 0 0 var(--s-6);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--white);
}
.foot-grid { display: grid; gap: var(--s-5); padding-top: var(--s-6); border-top: 1px solid color-mix(in srgb, var(--white) 16%, transparent); }
@media (min-width: 960px) { .foot-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-7) var(--s-8); align-items: start; } }
.foot-id img { display: block; width: min(260px, 70vw); height: auto; }
.foot-id p { margin-top: var(--s-4); max-width: 30rem; color: var(--on-dark); }
.foot-links ul { display: flex; flex-wrap: wrap; column-gap: var(--s-3); margin-inline: calc(var(--s-2) * -1); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-inline: var(--s-2); color: var(--on-dark); text-decoration: none; transition: color var(--t-hover) ease; }
.foot-links a[aria-current="page"] { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.foot-links--legal a { color: var(--on-dark-muted); font-size: 0.875rem; }
.footer-bottom { margin-top: var(--s-6); font-size: 0.875rem; color: var(--on-dark-muted); }

/* ---- 12b. Inner-page header (compact hero) ------------------------------ */
.hero--page { padding-bottom: clamp(48px, 7vw, 72px); }
.hero--page h1 { max-width: 22ch; font-size: clamp(2rem, 7vw, 3.25rem); }
.hero--page .hero-sub { margin-top: var(--s-4); }

/* ---- 12c. Service category cards --------------------------------------- */
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
.category { display: flex; gap: var(--s-4); align-items: flex-start; }
.category h3 { margin-bottom: var(--s-2); }
.category p { font-size: var(--fs-small); line-height: 1.55; }

/* ---- 12d. Pricing table (stacks into cards on phones) ------------------- */
.table-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.price-table { width: 100%; border-collapse: collapse; text-align: left; }
.price-table caption { padding: 0; }
.price-table th, .price-table td { padding: var(--s-4) var(--s-5); vertical-align: top; }
.price-table thead th {
  background: var(--offwhite);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.price-table tbody tr + tr { border-top: 1px solid var(--border); }
.price-table tbody th {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.price-table .figure {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; }
  .price-table thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .price-table tbody tr { padding: var(--s-4) var(--s-5); }
  .price-table th, .price-table td { padding: 0; }
  .price-table td { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-2); }
  .price-table td::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    padding-top: 3px;
  }
  .price-table td.figure { white-space: normal; text-align: right; }
}

/* ---- 12e. Retainer plans ------------------------------------------------ */
.plan { display: flex; flex-direction: column; }
.plan-price {
  margin: var(--s-3) 0 var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-figure);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--navy);
}
.plan-price small { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; color: var(--text); }
.plan-list { display: grid; gap: var(--s-3); margin-top: auto; padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: var(--fs-small); }
.plan-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.plan-list svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--green); }

.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

/* ---- 12g. Button-only closing band ------------------------------------- */
.cta-band--action { padding-block: clamp(56px, 8vw, 88px); }
.cta-band--action .btn-row { margin-top: 0; }

/* ---- 12h. Process timeline (How It Works) ------------------------------ */
.timeline { display: grid; max-width: 760px; margin-inline: auto; }
.milestone {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
}
.milestone:last-child { padding-bottom: 0; }
/* vertical dimension line joining the numbered badges */
.milestone:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 56px;
  bottom: 8px;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--border) 0 6px, transparent 6px 12px);
}
.milestone-body {
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.milestone-body h3 { margin-bottom: var(--s-2); }
.milestone-body p { font-size: var(--fs-body); }
@media (min-width: 768px) {
  .milestone { gap: var(--s-5); padding-bottom: var(--s-6); }
  .milestone-body { padding: var(--s-5) var(--s-6); }
}

/* ---- 12i. Statement (open type on a rule, no box) ---------------------- */
.statement { max-width: 760px; margin-inline: auto; padding-top: var(--s-6); border-top: 2px solid var(--navy); }
.statement-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); }
.statement-main {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--navy);
  text-wrap: balance;
}

/* ---- 12j. About: lead paragraph + team cards --------------------------- */
.lead { max-width: 44rem; margin-inline: auto; text-align: center; font-size: var(--fs-lead); line-height: 1.55; }
.team { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .team { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.member { display: flex; flex-direction: column; }
.member .icon-badge { margin-bottom: var(--s-5); }
.member h3 { margin-bottom: var(--s-2); }
.member p { font-size: var(--fs-small); line-height: 1.6; }

/* ---- 12k. Quote form ----------------------------------------------------- */
.form-card {
  max-width: 720px;
  margin-inline: auto;
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) { .form-card { padding: var(--s-7); } }

.form-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); }
  .form-grid .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: var(--s-2); align-content: start; min-width: 0; border: 0; padding: 0; margin: 0; }
.field > label, .field > legend {
  padding: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--navy);
}
.opt { font-weight: 400; color: var(--text); }
.hint { font-size: var(--fs-small); color: var(--text); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;                       /* >= 44px tap target */
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--navy);
  font: 400 var(--fs-body)/1.4 var(--font-body);   /* 17px: no iOS zoom on focus */
  transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.textarea { min-height: 132px; resize: vertical; }
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23012852' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--navy);
}

/* file input: native control, styled button, 44px+ target */
.file {
  width: 100%;
  min-height: 56px;
  padding: 6px;
  background: var(--offwhite);
  border: 1.5px dashed var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--navy);
  font: 400 var(--fs-small)/1.4 var(--font-body);
  cursor: pointer;
}
.file::file-selector-button {
  min-height: 44px;
  margin-right: var(--s-3);
  padding: 0 var(--s-4);
  background: var(--navy);
  border: 0;
  border-radius: var(--radius-sm);
  color: #fff;
  font: 500 var(--fs-small)/1 var(--font-body);
  cursor: pointer;
}
.file:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* radio cards */
.choice-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 480px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: 0 var(--s-4);
  background: #fff;
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--navy);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease;
}
/* the real input covers the whole card (44px+ hit area); the dot is drawn on the span */
.choice { position: relative; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; gap: var(--s-3); }
.choice span::before {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  border: 2px solid var(--input-border);
  border-radius: 50%;
  background: #fff;
  transition: border-color var(--t-hover) ease, background var(--t-hover) ease;
}
.choice input:checked + span::before { border-color: var(--navy); background: radial-gradient(circle, var(--navy) 0 5px, #fff 6px); }
.choice:has(input:checked) { border-color: var(--navy); background: rgba(1, 40, 82, 0.05); box-shadow: 0 0 0 1px var(--navy); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

/* inline errors: text + icon, never colour alone */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--error);
}
.field-error[hidden] { display: none; }
.field-error::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B42318' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.is-invalid, .field.is-invalid .choice { border-color: var(--error); }
.field.is-invalid .choice:has(input:checked) { border-color: var(--navy); }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid, .file.is-invalid { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }

.form-actions { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
.form-actions .btn { width: 100%; }
@media (min-width: 768px) { .form-actions .btn { width: auto; justify-self: start; min-width: 220px; } }

/* loading state */
.spinner {
  display: none;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(1, 40, 82, 0.25);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.btn.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-loading { opacity: 1; cursor: progress; }

.submit-error { padding: var(--s-3) var(--s-4); border: 1px solid var(--error); border-radius: var(--radius-sm); background: #FEF3F2; }

/* confirmation */
.success { display: grid; gap: var(--s-4); justify-items: start; }
.success[hidden] { display: none; }
.success-icon { width: 56px; height: 56px; color: var(--green); }
.success-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--navy);
}
.success-title:focus { outline: none; }
.success-msg { color: var(--green-text); font-weight: 500; }   /* text-safe green */

/* trust lines under the form */
.assurances {
  display: grid;
  gap: var(--s-3);
  max-width: 720px;
  margin: var(--s-6) auto 0;
}
@media (min-width: 768px) { .assurances { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
.assurance { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--navy); font-weight: 500; line-height: 1.45; }
.assurance svg { flex: none; width: 24px; height: 24px; color: var(--green); }

@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2s; } }

/* ---- 12l. Legal documents ------------------------------------------------ */
.legal { max-width: 720px; margin-inline: auto; }
.legal-section + .legal-section { margin-top: var(--s-7); }
.legal h2 { font-size: clamp(1.375rem, 3.6vw, 1.75rem); margin-bottom: var(--s-4); }
.legal h3 { margin: var(--s-5) 0 var(--s-2); font-size: 1.0625rem; }
.legal p { max-width: 68ch; }
.legal p + p, .legal p + ul, .legal ul + p, .legal p + .table-wrap, .legal .table-wrap + p { margin-top: var(--s-4); }
.legal ul { display: grid; gap: var(--s-2); padding-left: var(--s-5); list-style: disc; }
.legal li::marker { color: var(--navy); }
.legal strong { font-weight: 500; color: var(--navy); }
.legal .table-wrap { margin-top: var(--s-4); }
.legal .price-table tbody th { font-size: 1.0625rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* consent line under the quote form's submit button */
.consent { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-2); font-size: var(--fs-small); }
.consent a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* ---- 13. Hover (real pointers only: touch taps must not leave sticky hover) */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--navy); }
  .btn--primary:hover { background: var(--orange-tint); color: var(--navy); }
  .btn--secondary:hover { background: var(--navy); color: #fff; }
  .on-dark .btn--secondary:hover { background: #fff; color: var(--navy); border-color: #fff; }
  .nav-toggle:hover { border-color: var(--navy); }
  .nav-link:hover { color: var(--orange-text); }
  .tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--navy); color: var(--text); }
  .tile:hover:active { transform: scale(0.985); }
  .link-arrow:hover { color: var(--navy); text-decoration: underline; }
  .foot-links a:hover { color: var(--white); text-decoration: underline; }
}

/* ---- 14. Reduced motion: keep gentle fades, drop movement --------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero [data-rise] { animation: fade 200ms ease both; animation-delay: 0ms; }
  .btn:active, .tile:active, .nav-toggle:active { transform: none; }
  .tile:hover { transform: none; }
  .js .site-nav { transform: none; transition: opacity 140ms ease; }
  .js .site-nav.is-open { transition: opacity 180ms ease; }
}