/* =========================================================================
   FORGE PALETTE - the single source of truth for every colour on this site.
   Approved brand direction. Nothing below this block may hard-code a brand
   colour; scripts/validate.mjs fails the build if a raw hex appears outside
   this block or if any retired navy/gold value returns.

     Forge Black     #171A1F   Warm Canvas  #F4F0E6   Burnt Orange #D9653B
     Steel Blue-Gray #5E7184   Concrete     #D8D6CF   White        var(--forge-white)

   The --forge-* values are the approved palette. Everything after them is
   DERIVED from those six for depth and contrast (panels on dark, AA-safe text
   shades, soft fills). Change the six and the whole site follows.
   ========================================================================= */
:root {
  /* --- The approved six --- */
  --forge-black: #171a1f;
  --forge-canvas: #f4f0e6;
  --forge-orange: #d9653b;
  --forge-steel: #5e7184;
  --forge-concrete: #d8d6cf;
  --forge-white: #ffffff;

  /* --- Derived: depth on dark --- */
  --forge-black-deep: #0f1216; /* deepest ground */
  --forge-black-2: #23272e; /* raised panel on dark */
  --forge-black-3: #2e333c; /* hairlines on dark */
  --forge-on-dark: #e8e4da; /* body text on Forge Black - 13.9:1 */
  --forge-on-dark-muted: #a9afb8; /* secondary text on dark - 6.4:1 */
  --forge-line-dark: rgba(244, 240, 230, 0.16);

  /* --- Derived: text shades that clear WCAG AA on light grounds --- */
  --forge-ink-2: #3a4048; /* secondary body text */
  --forge-steel-text: #55677a; /* muted text - 5.1:1 on Warm Canvas */
  --forge-orange-text: #a94a21; /* orange for TEXT - 5.0:1 on Warm Canvas.
                                   Burnt Orange itself is 3.6:1 on white, so it
                                   is used for fills, rules and large type only. */

  /* --- Derived: surfaces --- */
  --forge-canvas-2: #eae4d6; /* deeper canvas tint */
  --forge-canvas-3: #efeae0; /* selected-tile fill */
  --forge-line: #e7e3d9; /* hairline on light */
  --forge-orange-soft: #f7e4da; /* soft orange fill */

  /* --- Functional status colours (NOT brand; kept for legibility) --- */
  --focus: #2b5c86; /* focus ring - deepened Steel Blue-Gray, 7.0:1 on white */
  --ok: #1f7a4d;
  --err: #b3261e;

  /* ---------------- Semantic tokens: everything else maps onto the above --- */
  /* Ink / text */
  --ink: var(--forge-black);
  --ink-2: var(--forge-ink-2);
  --muted: var(--forge-steel-text);

  /* Brand */
  --navy: var(--forge-black);
  --navy-deep: var(--forge-black-deep);
  --gold: var(--forge-orange);
  --gold-text: var(--forge-orange-text);
  --gold-soft: var(--forge-orange-soft);

  /* Surfaces */
  --bg: var(--forge-white);
  --bg-alt: var(--forge-canvas);
  --surface: var(--forge-white);
  --line: var(--forge-line);
  --line-strong: var(--forge-concrete);

  /* Brand-mark colours (assets/mark*.svg, favicon.svg) */
  --brand-navy: var(--forge-black);
  --brand-amber: var(--forge-orange);

  --ring: var(--focus);

  --maxw: 1120px;
  /* Width at which the header collapses to the compact menu. js/nav.js reads
     this back so the two can never disagree. */
  --nav-compact-max: 959px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(23, 26, 31, 0.07);
  --shadow: 0 10px 30px -18px rgba(23, 26, 31, 0.4);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Apple Color Emoji", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
}
a {
  color: var(--navy);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 2px;
}
a:hover {
  color: var(--navy-deep);
}

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--forge-white);
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------------- Headings / shared ---------------- */
h1,
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 14px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.section {
  padding: 78px 0;
}
.section-alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head {
  max-width: 720px;
  margin-bottom: 42px;
}
.section-head h2 {
  font-size: clamp(1.65rem, 1rem + 2.4vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 14px;
}
.section-head p {
  color: var(--muted);
  font-size: 1.08rem;
  margin: 0;
}
.lead {
  font-size: 1.15rem;
  color: var(--ink-2);
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 14px 22px;
  border-radius: 11px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.16s var(--ease), background 0.16s var(--ease),
    border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
/* The `display` above is an author style, so it beats the browser's built-in
   [hidden] { display: none } - without this rule a button stays on screen even
   with its hidden property set. The audit form's step navigation relies on
   .hidden for Back / Continue / Submit, so it needs the same explicit opt-out
   that .form-step[hidden] and .form-status[hidden] already have. */
.btn[hidden] {
  display: none;
}
.btn-primary {
  background: var(--navy);
  color: var(--forge-white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--navy-deep);
  color: var(--forge-white);
  transform: translateY(-1px);
}
.btn-ghost {
  background: var(--forge-white);
  color: var(--navy);
  border-color: var(--line-strong);
}
.btn-ghost:hover {
  color: var(--navy);
  border-color: var(--navy);
  transform: translateY(-1px);
}
.btn-gold {
  background: var(--gold);
  color: var(--forge-black);
  box-shadow: var(--shadow-sm);
}
.btn-gold:hover {
  background: var(--forge-orange-text);
  color: var(--forge-white);
  transform: translateY(-1px);
}
.btn-sm {
  padding: 10px 16px;
  font-size: 0.92rem;
  border-radius: 9px;
}
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* ---------------- Header / nav ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 0 0 auto;
}
/* Text-based working logo */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1;
}
.wordmark .mark {
  color: var(--gold);
  margin-right: 6px;
  font-size: 1.05em;
  transform: translateY(1px);
}
.wordmark b {
  font-weight: 800;
}
.brand-sub {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  border-left: 1px solid var(--line-strong);
  padding-left: 10px;
  margin-left: 2px;
}
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.nav-links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 600;
  padding: 8px 11px;
  border-radius: 8px;
}
.nav-links a:hover {
  color: var(--navy);
  background: var(--bg-alt);
}
.nav-links a[aria-current="page"] {
  color: var(--navy);
  background: var(--gold-soft);
}

/* ---------------- Hero ---------------- */
.hero {
  padding: 66px 0 30px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 52px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.05rem, 1.2rem + 3.4vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}
.hero .lead {
  margin: 20px 0 28px;
  max-width: 560px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}
.hero-powered {
  margin: 22px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 600;
}
.hero-powered .dot {
  color: var(--gold);
  font-weight: 800;
}

/* Hero side card: lifecycle snapshot */
.snapshot {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
}
.snapshot-title {
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin: 2px 2px 14px;
}
.snap-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--forge-white);
}
.snap-row + .snap-arrow,
.snap-arrow {
  display: flex;
  justify-content: center;
  color: var(--gold);
  padding: 5px 0;
}
.snap-ico {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--navy);
}
.snap-ico svg {
  width: 20px;
  height: 20px;
}
.snap-row strong {
  display: block;
  color: var(--ink);
  font-size: 0.96rem;
}
.snap-row span {
  font-size: 0.83rem;
  color: var(--muted);
}

/* ---------------- Problem statement ---------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.disconnected {
  display: grid;
  gap: 12px;
}
.disc-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--forge-white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 14px 16px;
}
.disc-item svg {
  flex: 0 0 auto;
  color: var(--gold-text);
  margin-top: 2px;
}
.disc-item p {
  margin: 0;
  color: var(--ink-2);
}

/* ---------------- Lifecycle ---------------- */
.lifecycle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  counter-reset: life;
}
.life {
  position: relative;
  background: var(--forge-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
}
.life .life-ico {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--gold-soft);
  color: var(--gold-text);
  margin-bottom: 14px;
}
.life .life-ico svg {
  width: 22px;
  height: 22px;
}
.life h3 {
  font-size: 1.08rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.life p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--muted);
}
.life-flow {
  display: block;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 22px;
}
.life-flow b {
  color: var(--navy);
}

/* ---------------- Included grid ---------------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.icard {
  background: var(--forge-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: box-shadow 0.18s var(--ease), transform 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.icard:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--line-strong);
}
.icard .ic {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--navy);
  margin-bottom: 13px;
}
.icard .ic svg {
  width: 21px;
  height: 21px;
}
.icard h3 {
  font-size: 1.03rem;
  font-weight: 700;
  margin-bottom: 5px;
}
.icard p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---------------- System diagram (illustrative) ---------------- */
.system-wrap {
  background: var(--forge-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 26px;
}
.system-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 18px;
}
.system-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.system-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--bg-alt);
}
.system-panel h4 {
  font-size: 0.95rem;
  margin-bottom: 12px;
  color: var(--navy);
}
.pill-list {
  display: grid;
  gap: 8px;
}
.pill {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--forge-white);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex: 0 0 auto;
}
.pill.blue .dot {
  background: var(--navy);
}
.system-note {
  margin: 16px 2px 0;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---------------- Pilot ---------------- */
.pilot-card {
  background: var(--forge-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.pilot-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.pilot-head h3 {
  font-size: 1.2rem;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-text);
  background: var(--gold-soft);
  border: 1px solid var(--forge-orange-soft);
  border-radius: 999px;
  padding: 5px 11px;
}
.pilot-body {
  padding: 22px 24px;
  display: grid;
  gap: 14px;
}
.pilot-body ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 9px;
}
.pilot-body li {
  color: var(--ink-2);
}
.pilot-caveat {
  font-size: 0.86rem;
  color: var(--muted);
  border-top: 1px dashed var(--line-strong);
  padding-top: 14px;
}

/* ---------------- Who it's for ---------------- */
.fit-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
}
.fit,
.nofit {
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--forge-white);
}
.nofit {
  background: var(--bg-alt);
}
.fit h3,
.nofit h3 {
  font-size: 1.1rem;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.fit ul,
.nofit ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.fit li,
.nofit li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.96rem;
}
.fit li svg {
  color: var(--ok);
  flex: 0 0 auto;
  margin-top: 2px;
}
.nofit li svg {
  color: var(--muted);
  flex: 0 0 auto;
  margin-top: 2px;
}

/* ---------------- Offer ---------------- */
.offer {
  background: var(--navy);
  color: var(--forge-canvas-3);
  border-radius: var(--radius-lg);
  padding: 44px;
  text-align: center;
}
.offer h2 {
  color: var(--forge-white);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.1rem);
  margin-bottom: 12px;
}
.offer p {
  color: var(--forge-on-dark-muted);
  max-width: 620px;
  margin: 0 auto 22px;
}
.offer .btn-gold {
  color: var(--forge-black);
}
.offer-note {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--forge-on-dark-muted);
}

/* ---------------- FAQ ---------------- */
.faq {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin: 0 auto; /* the FAQ heading is centred; the list has to match */
}
.faq details {
  background: var(--forge-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 18px;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  padding: 15px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  color: var(--gold-text);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
}
.faq details[open] summary::after {
  content: "\2212";
}
.faq details p {
  margin: 0 0 16px;
  color: var(--ink-2);
}

/* ---------------- Final CTA ---------------- */
.finalcta {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.finalcta h2 {
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.3rem);
  font-weight: 800;
  margin-bottom: 22px;
}

/* ---------------- Footer ---------------- */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: 48px 0 34px;
}
.footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  justify-content: space-between;
}
.footer-brand {
  max-width: 320px;
}
.footer-brand .wordmark {
  font-size: 1.15rem;
}
.footer-brand p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 12px 0 0;
}
.footer-brand .foot-email {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  color: var(--navy);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.footer-col-title {
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 12px;
}
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-nav li {
  margin-bottom: 9px;
}
.footer-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.94rem;
}
.footer-nav a:hover {
  color: var(--navy);
}
.footer-bottom {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.88rem;
}

/* ---------------- Legal / prose pages ---------------- */
.page-head {
  padding: 50px 0 6px;
}
.page-head h1 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 800;
}
.page-head .updated {
  color: var(--muted);
  font-size: 0.94rem;
  margin-top: 10px;
}
.prose {
  max-width: 760px;
  padding-bottom: 40px;
}
.prose section {
  margin-top: 30px;
}
.prose h2 {
  font-size: 1.28rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.prose p,
.prose li {
  color: var(--ink-2);
}
.prose p {
  margin: 0 0 14px;
}
.prose ul,
.prose ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.prose li {
  margin-bottom: 8px;
}
.prose a {
  color: var(--gold-text);
  text-decoration: underline;
}
.detail-card {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 520px;
}
.detail-card dl {
  margin: 0;
}
.detail-card dt {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-top: 16px;
}
.detail-card dt:first-child {
  margin-top: 0;
}
.detail-card dd {
  margin: 5px 0 0;
  font-size: 1.02rem;
  color: var(--ink);
}
.detail-card dd a {
  color: var(--gold-text);
}

/* ---------------- Intake / audit form ---------------- */
.form-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 36px;
  align-items: start;
}
/* grid items default to min-width:auto; let both columns shrink on phones */
.form-wrap > * {
  min-width: 0;
}
.audit-form {
  background: var(--forge-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 26px;
  min-width: 0;
}
/* fieldsets default to min-inline-size:min-content, which breaks narrow layouts */
.form-step {
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
  min-width: 0;
}
.field,
.field input,
.field select,
.field textarea {
  min-width: 0;
  max-width: 100%;
}
/* Spam-trap wrapper: removed from view without display:none, which some bots
   skip. It has no layout effect - nothing reflows around it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.progress-track {
  flex: 1;
  height: 6px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 20%;
  background: var(--gold);
  transition: width 0.25s var(--ease);
}
.progress-label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}
.form-step {
  margin-top: 18px;
}
.form-step[hidden] {
  display: none;
}
.form-step h3 {
  font-size: 1.12rem;
  margin-bottom: 4px;
}
.form-step .step-hint {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 16px;
}
.field {
  margin-bottom: 15px;
}
.field > label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.92rem;
  margin-bottom: 6px;
}
.field .req {
  color: var(--err);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--forge-white);
  border: 1.5px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 13px;
}
.field textarea {
  min-height: 96px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(47, 111, 208, 0.16);
}
.radio-set {
  display: grid;
  gap: 8px;
}
.radio-set.cols {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
  font-size: 0.94rem;
  color: var(--ink-2);
  background: var(--forge-white);
}
.opt:hover {
  border-color: var(--line-strong);
  background: var(--bg-alt);
}
.opt input {
  margin-top: 2px;
  accent-color: var(--navy);
}
.opt:focus-within {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(47, 111, 208, 0.14);
}
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.consent input {
  margin-top: 3px;
  accent-color: var(--navy);
}
.form-error {
  color: var(--err);
  font-size: 0.85rem;
  margin-top: 6px;
  min-height: 1em;
}
.form-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 0.94rem;
  border: 1px solid var(--line);
}
.form-status[hidden] {
  display: none;
}
.form-status.ok {
  background: var(--ok-soft);
  border-color: var(--ok-line);
  color: var(--ok);
}
.form-status.err {
  background: var(--err-soft);
  border-color: var(--err-line);
  color: var(--err);
}
.form-status.info {
  background: var(--bg-alt);
  color: var(--ink-2);
}
.form-aside {
  position: sticky;
  top: 96px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.form-aside h3 {
  font-size: 1.02rem;
  margin-bottom: 12px;
}
.form-aside ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.form-aside li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.form-aside li svg {
  color: var(--gold-text);
  flex: 0 0 auto;
  margin-top: 2px;
}
.form-aside .alt {
  font-size: 0.88rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.noscript-note {
  background: var(--gold-soft);
  border: 1px solid var(--forge-orange-soft);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--forge-orange-text);
  font-size: 0.94rem;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 940px) {
  .hero-grid,
  .split,
  .system-cols,
  .fit-grid,
  .form-wrap {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .snapshot {
    order: 2;
  }
  .lifecycle {
    grid-template-columns: 1fr 1fr;
  }
  .grid-cards {
    grid-template-columns: 1fr 1fr;
  }
  .form-aside {
    position: static;
  }
}
@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .section {
    padding: 56px 0;
  }
  .nav {
    gap: 10px;
  }
  .nav-brand {
    flex: 1 1 100%;
  }
  .nav-links {
    width: 100%;
    gap: 1px;
  }
  .nav-cta {
    display: none;
  }
  .offer {
    padding: 30px 22px;
  }
  .hero-actions .btn {
    width: 100%;
  }
}
@media (max-width: 460px) {
  .lifecycle,
  .grid-cards {
    grid-template-columns: 1fr;
  }
  .container {
    padding: 0 16px;
  }
  .radio-set.cols {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   REDESIGN v2 - grounded, contractor-built feel: bolder navy, denser layout,
   varied sections, a real (redacted, illustrative) system UI, case-study
   timeline. Overrides + new components appended intentionally.
   ========================================================================= */
:root {
  --on-navy: var(--forge-on-dark);
  --on-navy-muted: var(--forge-on-dark-muted);
  --navy-panel: var(--forge-black-2);
  --navy-line: rgba(244, 240, 230, 0.14);
}

/* Tighter vertical rhythm */
.section {
  padding: 60px 0;
}
.section-tight {
  padding: 42px 0;
}
.section-head {
  margin-bottom: 34px;
}

/* Section number kicker for stronger hierarchy */
.kicker {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.kicker .num {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gold-text);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.kicker .rule {
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}

/* ---- Brand symbol: the open service-loop mark (PROVISIONAL) ----
   Drawn geometry in assets/mark.svg - Service Navy loop, one Momentum Amber
   node. It carries no letters, so it needs no renaming when the working
   product name changes; the name beside it stays HTML text (.brand-name).
   Width/height are set on the element too, so it reserves space before it
   loads and cannot shift the layout. */
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: block;
}
.wordmark .brand-mark {
  margin-right: 9px;
}
.footer-brand .brand-mark {
  width: 32px;
  height: 32px;
}
.wordmark {
  align-items: center;
}
.wordmark .mark {
  display: none;
} /* retire the old arrow glyph */
/* ---- Navy sections ---- */
.section-navy {
  background: var(--navy-deep);
  color: var(--on-navy);
}
.section-navy h2,
.section-navy h3,
.section-navy h4 {
  color: var(--forge-white);
}
.section-navy .section-head p,
.section-navy p {
  color: var(--on-navy-muted);
}
.section-navy .kicker .rule {
  background: var(--navy-line);
}
.section-navy .eyebrow {
  color: var(--gold);
}

.btn-outline-light {
  background: transparent;
  color: var(--forge-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-outline-light:hover {
  color: var(--forge-white);
  border-color: var(--forge-white);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

/* ---- HERO: bold navy ---- */
.hero {
  background: var(--navy-deep);
  color: var(--on-navy);
  padding: 62px 0 66px;
  border-bottom: 3px solid var(--gold);
}
.hero .eyebrow {
  color: var(--gold);
}
.hero h1 {
  color: var(--forge-white);
}
.hero .lead {
  color: var(--forge-on-dark);
}
.hero-powered {
  color: var(--on-navy-muted);
}
.hero-grid {
  gap: 46px;
  align-items: center;
}

/* Hero system stack (grounded, embedded - replaces floaty snapshot) */
.syspanel {
  background: var(--navy-panel);
  border: 1px solid var(--navy-line);
  border-radius: 12px;
  padding: 18px;
}
.syspanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 14px;
  border-bottom: 1px solid var(--navy-line);
  margin-bottom: 12px;
}
.syspanel-head b {
  color: var(--forge-white);
  font-size: 0.92rem;
}
.syspanel-head span {
  color: var(--on-navy-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sysrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
}
.sysrow + .sysrow {
  border-top: 1px solid var(--navy-line);
}
.sysrow .n {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: rgba(217, 101, 59, 0.16);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.sysrow span {
  color: var(--on-navy);
  font-size: 0.92rem;
}
.sysrow small {
  color: var(--on-navy-muted);
  margin-left: auto;
  font-size: 0.74rem;
  white-space: nowrap;
}

/* ---- Process strip (numbered, connected) replaces 4 identical cards ---- */
.process-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--forge-white);
}
.pstep {
  padding: 24px 22px;
  border-right: 1px solid var(--line);
  position: relative;
}
.pstep:last-child {
  border-right: 0;
}
.pstep .pnum {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pstep h3 {
  font-size: 1.06rem;
  margin: 10px 0 6px;
}
.pstep p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.pstep .arrow {
  display: none;
}

/* ---- Feature columns (dense checklist) replaces 11-card grid ---- */
.feature-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 40px;
}
.frow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.frow svg {
  flex: 0 0 auto;
  color: var(--navy);
  margin-top: 3px;
}
.frow b {
  color: var(--ink);
  font-weight: 700;
  display: block;
  font-size: 0.98rem;
}
.frow span {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---- Sales tiers: core / current sending / later add-on ---- */
.tiers {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.tier {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  background: var(--forge-white);
  display: flex;
  flex-direction: column;
}
.tier.core {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.tier .tier-tag {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 12px;
}
.tier.core .tier-tag {
  background: var(--navy);
  color: var(--forge-white);
}
.tier.now .tier-tag {
  background: var(--gold-soft);
  color: var(--gold-text);
}
.tier.later .tier-tag {
  background: var(--bg-alt);
  color: var(--muted);
  border: 1px solid var(--line-strong);
}
.tier h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.tier p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0 0 12px;
}
.tier ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.tier li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--ink-2);
}
.tier li svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--navy);
}
.tier.later {
  background: var(--bg-alt);
}

/* ---- Case-study timeline ---- */
.cs-wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 34px;
  align-items: start;
}
.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--line-strong);
}
.timeline li {
  position: relative;
  padding: 0 0 20px 46px;
}
.timeline li:last-child {
  padding-bottom: 0;
}
.timeline .tnum {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--forge-white);
  font-size: 0.82rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  z-index: 1;
}
.timeline li.discovery .tnum {
  background: var(--gold);
  color: var(--forge-black);
}
.timeline b {
  color: var(--ink);
  display: block;
  font-size: 1.02rem;
  margin-bottom: 3px;
}
.timeline p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}
.cs-side {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 92px;
}
.cs-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: var(--forge-white);
}
.cs-card h4 {
  font-size: 0.96rem;
  margin-bottom: 10px;
}
.cs-card ul {
  margin: 0;
  padding-left: 18px;
}
.cs-card li {
  color: var(--ink-2);
  font-size: 0.9rem;
  margin-bottom: 6px;
}
.note-callout {
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  border-radius: 0 10px 10px 0;
  padding: 14px 16px;
  color: var(--forge-orange-text);
  font-size: 0.92rem;
}
.note-callout b {
  color: var(--forge-orange-text);
}
.cs-quals {
  font-size: 0.85rem;
  color: var(--muted);
  border-top: 1px dashed var(--line-strong);
  padding-top: 12px;
  margin-top: 4px;
}

/* Problem band: bolder, less card-grid */
.problem-band .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.problem-list {
  display: grid;
  gap: 2px;
}
.problem-list .pl {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--navy-line);
  color: var(--on-navy-muted);
}
.problem-list .pl:first-child {
  border-top: 0;
}
.problem-list .pl svg {
  color: var(--gold);
  flex: 0 0 auto;
  margin-top: 2px;
}

/* ---- Responsive (v2) ---- */
@media (max-width: 940px) {
  .hero-grid,
  .cs-wrap,
  .problem-band .container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .syspanel {
    order: 2;
  }
  .process-strip {
    grid-template-columns: 1fr 1fr;
  }
  .pstep {
    border-bottom: 1px solid var(--line);
  }
  .pstep:nth-child(odd) {
    border-right: 1px solid var(--line);
  }
  .tiers {
    grid-template-columns: 1fr;
  }
  .feature-cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cs-side {
    position: static;
  }
}
@media (max-width: 560px) {
  .process-strip {
    grid-template-columns: 1fr;
  }
  .pstep {
    border-right: 0 !important;
  }
}

/* =========================================================================
   MOTION - purposeful, comprehension-first, dependency-free.

   Everything here is gated on <html class="motion">, which the tiny inline
   script in each page's <head> adds ONLY when (a) JavaScript is running and
   (b) the visitor has not asked for reduced motion. If the class is absent -
   no JS, reduced motion, or js/motion.js failing to load (the inline script
   removes the class after a timeout in that case) - every element below
   renders in its normal, final state. Nothing is ever hidden behind motion.

   Rules: transform/opacity only (no layout shift), no scroll hijacking, no
   parallax, no autoplay media, no invented numbers.
   ========================================================================= */

/* ---- Shared reveal. Keep this selector list in sync with REVEAL_SELECTOR
        in js/motion.js. ---- */
.motion :is(
    .section-head,
    .kicker,
    .problem-band > .container > div,
    .problem-list .pl,
    .frow,
    .tier,
    .fit,
    .nofit,
    .faq details,
    .finalcta > *,
    .page-head,
    .form-aside
  ) {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.motion :is(
    .section-head,
    .kicker,
    .problem-band > .container > div,
    .problem-list .pl,
    .frow,
    .tier,
    .fit,
    .nofit,
    .faq details,
    .finalcta > *,
    .page-head,
    .form-aside
  ).is-in {
  opacity: 1;
  transform: none;
}

/* Section kicker rule draws itself across as the section arrives. */
.motion .kicker .rule {
  transform: scaleX(0);
  transform-origin: left;
}
.motion .kicker.is-in .rule {
  transform: scaleX(1);
  transition: transform 0.7s var(--ease) 0.1s;
}

/* ---- Hero entry: the copy settles, then the system panel traces itself ---- */
.motion .hero-copy > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion .hero-copy.is-in > * {
  opacity: 1;
  transform: none;
}
.motion .syspanel {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease) 0.15s, transform 0.6s var(--ease) 0.15s;
}
.motion .syspanel.is-in {
  opacity: 1;
  transform: none;
}

/* The connected path: a gold trace grows down the seven stages, and each
   stage lights up as the trace reaches it. */
.sysrows {
  position: relative;
}
.sys-trace {
  position: absolute;
  left: 14px;
  top: 20px;
  bottom: 20px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(217, 101, 59, 0.25));
  transform-origin: top;
}
.motion .sys-trace {
  transform: scaleY(0);
}
.motion .sysrows.is-in .sys-trace {
  transform: scaleY(1);
  transition: transform 1.5s var(--ease) 0.25s;
}
.motion .sysrows.is-in .sysrow {
  animation: sys-stage-in 0.5s var(--ease) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.16s);
}
.motion .sysrows.is-in .sysrow .n {
  animation: sys-stage-pop 0.5s var(--ease) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.16s);
}
@keyframes sys-stage-in {
  from {
    opacity: 0.15;
    transform: translateX(-7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sys-stage-pop {
  0% {
    transform: scale(0.7);
    background: rgba(217, 101, 59, 0.05);
  }
  60% {
    transform: scale(1.12);
    background: rgba(217, 101, 59, 0.36);
  }
  100% {
    transform: scale(1);
    background: rgba(217, 101, 59, 0.16);
  }
}

/* ---- Lifecycle: the four stages arrive in order, each capped by a gold
        rule that fills in left-to-right ---- */
.pstep::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--gold);
  transform-origin: left;
}
.motion .pstep {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.15s);
}
.motion .pstep::before {
  transform: scaleX(0);
}
.motion .process-strip.is-in .pstep {
  opacity: 1;
  transform: none;
}
.motion .process-strip.is-in .pstep::before {
  transform: scaleX(1);
  transition: transform 0.6s var(--ease);
  transition-delay: calc(0.12s + var(--i, 0) * 0.15s);
}

/* ---- Case study: the timeline grows as its milestones are reached ---- */
.motion .timeline::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 6px;
  width: 2px;
  height: calc(var(--progress, 0) * (100% - 12px));
  background: var(--gold);
  border-radius: 2px;
  transition: height 0.7s var(--ease);
}
.motion .timeline li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.motion .timeline li.is-in {
  opacity: 1;
  transform: none;
}
.motion .timeline li .tnum {
  transform: scale(0.6);
  transition: transform 0.45s var(--ease) 0.08s;
}
.motion .timeline li.is-in .tnum {
  transform: scale(1);
}

/* ---- Restrained interaction polish (no .motion gate needed: these are
        plain transitions, which the reduced-motion block already flattens) ---- */
.btn:active {
  transform: translateY(0) scale(0.985);
}
.site-header {
  transition: box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px -18px rgba(23, 26, 31, 0.75);
}
.nav-links a {
  position: relative;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s var(--ease);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav-brand .brand-mark {
  transition: transform 0.22s var(--ease);
}
.nav-brand:hover .brand-mark {
  transform: translateY(-1px);
}
.faq details summary {
  transition: color 0.18s var(--ease);
}
.frow,
.timeline li,
.tier {
  will-change: auto;
}

/* Belt and braces: if a reduced-motion preference is set after load, or the
   .motion class is present for any other reason, nothing stays hidden. */
@media (prefers-reduced-motion: reduce) {
  .motion :is(
      .section-head,
      .kicker,
      .problem-band > .container > div,
      .problem-list .pl,
      .frow,
      .tier,
      .fit,
      .nofit,
      .faq details,
          .finalcta > *,
      .page-head,
      .form-aside,
      .hero-copy > *,
      .syspanel,
      .pstep,
      .timeline li
    ) {
    opacity: 1 !important;
    transform: none !important;
  }
  .motion .sys-trace,
  .motion .kicker .rule,
  .motion .pstep::before {
    transform: none !important;
  }
}

/* =========================================================================
   REDESIGN v3 - outcome-first, contractor-focused.
   Full-width alternating bands, layered product compositions, fewer cards,
   shorter copy. Same navy / amber / warm-white palette and the same logo.
   Appended last so it overrides v1 + v2 at equal specificity.
   ========================================================================= */
:root {
  --warm: var(--forge-canvas); /* warm white - light bands */
  --warm-2: var(--forge-canvas-2); /* warm tint - panel grounds */
  --warm-line: var(--forge-line);
  --deep: var(--forge-black-deep); /* deepest navy - dark bands */
  --deep-2: var(--forge-black);
  --panel: var(--forge-black-2); /* raised panel on dark */
  --panel-line: rgba(244, 240, 230, 0.16);
  --shadow-lift: 0 30px 60px -32px rgba(23, 26, 31, 0.55);
  --shadow-pane: 0 24px 50px -26px rgba(23, 26, 31, 0.6);
}

/* ---------------- Full-width bands ---------------- */
.band {
  padding: 96px 0;
  position: relative;
}
.band-warm {
  background: var(--warm);
}
.band-light {
  background: var(--forge-white);
}
.band-dark {
  background: linear-gradient(168deg, var(--deep) 0%, var(--deep-2) 100%);
  color: var(--on-navy);
}
.band-dark h2,
.band-dark h3,
.band-dark h4 {
  color: var(--forge-white);
}
.band-dark p {
  color: var(--forge-on-dark-muted);
}
.band + .band-warm,
.band-warm + .band-light {
  border-top: 1px solid var(--warm-line);
}
.band-dark + .band-dark {
  border-top: 1px solid var(--panel-line);
}

/* Section lead-ins: bigger, fewer words */
.band-head {
  max-width: 760px;
  margin-bottom: 48px;
}
.band-head .eyebrow {
  margin-bottom: 14px;
}
.band-head h2 {
  font-size: clamp(1.9rem, 1.15rem + 2.9vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 16px;
}
.band-head p {
  font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.2rem);
  margin: 0;
}
.band-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------------- Hero ---------------- */
.hero-v3 {
  background: var(--forge-black);
  color: var(--on-navy);
  padding: 64px 0 68px;
  border-bottom: 3px solid var(--gold);
  overflow: hidden;
}
.hero-v3 .container {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: 56px;
  align-items: center;
}
.hero-v3 h1 {
  color: var(--forge-white);
  font-size: clamp(2.3rem, 1.3rem + 4.1vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.hero-v3 h1 .amber {
  color: var(--gold);
}
.hero-v3 .hero-sub {
  font-size: clamp(1.04rem, 0.98rem + 0.45vw, 1.22rem);
  color: var(--forge-on-dark);
  max-width: 34em;
  margin: 0 0 10px;
}
.hero-v3 .hero-tagline {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
  margin: 0 0 28px;
}
.hero-actions-v3 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}
.btn-lg {
  padding: 17px 28px;
  font-size: 1.03rem;
  border-radius: 12px;
}
.hero-note {
  font-size: 0.86rem;
  color: var(--forge-on-dark-muted);
  margin: 0;
}

/* ---------------- Layered product composition ---------------- */
.stack {
  position: relative;
  min-height: 670px;
  margin: 0; /* it is a <figure> */
}
/* The demo-data disclosure. Visible text, always rendered, never a tooltip. */
.stack-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  font-size: 0.78rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--forge-on-dark-muted);
  text-align: right;
}
.stack-note {
  display: block;
  font-weight: 500;
}
.pane {
  position: absolute;
  background: var(--forge-white);
  border-radius: 12px;
  box-shadow: var(--shadow-pane);
  overflow: hidden;
  border: 1px solid rgba(23, 26, 31, 0.12);
}
.pane-head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  background: var(--warm-2);
  border-bottom: 1px solid var(--warm-line);
}
.pane-head .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--forge-concrete);
  flex: 0 0 auto;
}
.pane-head b {
  font-size: 0.72rem;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin-left: 4px;
}
.pane-head .tag {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A - angled public website preview */
.pane-site {
  left: 0;
  top: 0;
  width: 60%;
  transform: perspective(1400px) rotateY(9deg) rotateX(3deg);
  z-index: 2;
}
.site-hero {
  background: var(--forge-black-2);
  padding: 18px 16px 20px;
  color: var(--forge-white);
}
.site-hero .kick {
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 800;
}
.site-hero b {
  display: block;
  font-size: 0.95rem;
  line-height: 1.18;
  margin: 7px 0 12px;
  letter-spacing: -0.02em;
}
.site-hero .cta {
  display: inline-block;
  background: var(--gold);
  color: var(--forge-black);
  font-size: 0.66rem;
  font-weight: 800;
  padding: 7px 13px;
  border-radius: 7px;
}
.site-body {
  padding: 12px 16px 14px;
  display: grid;
  gap: 7px;
  justify-items: start;
}
/* Empty request-form fields, drawn rather than filled: no invented person. */
.site-field {
  width: 100%;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--forge-white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 9px;
}
.site-ok {
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-radius: 999px;
  padding: 4px 10px;
  margin-top: 2px;
}

/* B - private pipeline */
.pane-pipeline {
  right: 0;
  top: 104px;
  width: 63%;
  z-index: 4;
}
.rowset {
  padding: 2px 0 4px;
}
/* One demonstration record: unit-count badge, who and what, status. */
.rrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
}
.rrow:first-child {
  border-top: 0;
}
/* A drawn unit-count badge, not a photograph. The count is repeated in the
   record text beside it, so this is decorative. */
.rec-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 7px;
  border: 1px solid var(--line-strong);
  background: var(--warm-2);
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--muted);
}
.rec {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.rec b {
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.rec-sub {
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--muted);
}
/* Status is always spelled out; the tint never carries it alone. */
.chip {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* A prepared-not-sent note beside a status. */
.note {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
/* Wider rows (the pillar panels) carry the note in its own column. */
.rrow-wide {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.pane-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--warm-2);
}
.pane-caption {
  margin: 0;
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--warm-2);
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--muted);
}
/* Job record: label / value pairs. */
.fieldset {
  margin: 0;
  padding: 4px 0 6px;
}
.fieldset > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
}
.fieldset > div:first-child {
  border-top: 0;
}
.fieldset dt {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.fieldset dd {
  margin: 0;
  font-size: 0.76rem;
  color: var(--ink);
}
.chip.new { background: var(--forge-canvas-3); color: var(--focus); border-color: var(--line-strong); }
.chip.booked { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.chip.done { background: var(--gold-soft); color: var(--gold-text); border-color: var(--forge-orange-soft); }
.chip.due { background: var(--forge-canvas-2); color: var(--forge-ink-2); border-color: var(--line-strong); }

/* C - due-for-service view */
.pane-due {
  left: 0;
  top: 358px;
  width: 58%;
  z-index: 5;
}

/* Example-month totals. Synthetic interface values, sitting directly above
   the demo-data disclosure. */
.stack-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 52px;
  z-index: 6;
  border: 1px solid var(--panel-line);
  border-radius: 12px;
  background: var(--forge-black-2);
  padding: 12px 14px;
}
.meter-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}
.meter-cells {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.mcell {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.mcell b {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--forge-canvas);
  letter-spacing: -0.02em;
}
.mcell span {
  font-size: 0.66rem;
  color: var(--forge-on-dark-muted);
}

/* Narrow screens: the layered composition becomes a readable vertical
   sequence. Nothing is scaled down to fit, and the drawn pathway (which only
   describes the overlapping layout) steps aside for a simple connector. */
@media (max-width: 720px) {
  .stack {
    min-height: 0;
    display: grid;
    gap: 26px;
  }
  .stack-path {
    display: none;
  }
  .stack .pane {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
  }
  .stack .pane + .pane::before {
    content: "";
    position: absolute;
    left: 22px;
    top: -20px;
    width: 2px;
    height: 14px;
    background: var(--gold);
    border-radius: 2px;
  }
  .stack-meter,
  .stack-label {
    position: relative;
    inset: auto;
  }
  .stack-label {
    text-align: left;
  }
  /* Once the panes are stacked full width, the entrance must not carry them
     sideways: an 18px horizontal offset would hang past the container. Keep
     the settle vertical only. */
  .motion .stack .pane-site,
  .motion .stack .pane-pipeline,
  .motion .stack .pane-due {
    transform: translateY(16px);
  }
  .motion .stack.is-in .pane-site,
  .motion .stack.is-in .pane-pipeline,
  .motion .stack.is-in .pane-due {
    transform: none;
  }
}

/* the amber pathway that ties the three together */
.stack-path {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.stack-path path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 9;
  opacity: 0.85;
}
.stack-path circle {
  fill: var(--gold);
}

/* ---------------- Outcome flow (replaces the 4 process cards) ---------------- */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.flow::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 27px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold) 100%
  );
  opacity: 0.28;
}
.flow-step {
  position: relative;
  padding: 0 20px;
  text-align: center;
}
.flow-step .dotnum {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.02rem;
  background: var(--forge-white);
  color: var(--navy);
  border: 3px solid var(--gold);
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 18px -10px rgba(23, 26, 31, 0.5);
}
.band-dark .flow-step .dotnum {
  background: var(--panel);
  color: var(--forge-white);
}
.flow-step h3 {
  font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.28rem);
  margin-bottom: 7px;
  letter-spacing: -0.015em;
}
.flow-step p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.band-dark .flow-step p {
  color: var(--forge-on-dark-muted);
}

/* ---------------- Pillars: big alternating rows, panel + short copy ------- */
.pillar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 54px 0;
}
.pillar + .pillar {
  border-top: 1px solid var(--warm-line);
}
.band-dark .pillar + .pillar {
  border-top-color: var(--panel-line);
}
.pillar:nth-child(even) .pillar-visual {
  order: -1;
}
.pillar h3 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.pillar p {
  font-size: 1.03rem;
  margin: 0 0 16px;
}
.pillar .pillar-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
}
.band-dark .pillar .pillar-note {
  color: var(--forge-on-dark-muted);
}
.pillar-visual {
  position: relative;
  margin: 0; /* it is a <figure> */
  display: grid;
  gap: 14px;
}
.pillar-visual .pane {
  position: relative;
  inset: auto;
  width: 100%;
  transform: none;
}
/* A second pane is inset rather than overlaid, so populated records in both
   stay fully readable. */
.pillar-visual .pane + .pane {
  position: relative;
  right: auto;
  bottom: auto;
  width: 88%;
  justify-self: end;
}

/* The demo-data disclosure that sits inside every drawn interface. Visible
   text, always rendered, never a tooltip or an aria label. */
.illus {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold-text);
  margin: 0;
}
/* Burnt Orange on the dark band measures 5.25:1, comfortably over the 4.5:1
   small-text threshold, so the accent colour carries the disclosure. */
.band-dark .illus {
  color: var(--gold);
}

/* ---------------- Big CTA band ---------------- */
.cta-band {
  background: linear-gradient(160deg, var(--deep) 0%, var(--forge-black-2) 100%);
  color: var(--forge-white);
  text-align: center;
  padding: 84px 0;
  border-top: 3px solid var(--gold);
}
.cta-band h2 {
  color: var(--forge-white);
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 2.9rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 16em;
  margin: 0 auto 16px;
}
.cta-band p {
  color: var(--forge-on-dark-muted);
  max-width: 46em;
  margin: 0 auto 26px;
  font-size: 1.05rem;
}

/* ---------------- Growth System Audit: two-column conversion section ------ */
.audit-band {
  background: var(--warm);
  padding: 0;
}
.audit-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 0;
  align-items: stretch;
}
/* Left: dark outcome panel - what you learn, what happens next */
.audit-aside {
  background: linear-gradient(168deg, var(--deep) 0%, var(--deep-2) 100%);
  color: var(--on-navy);
  padding: 72px 56px 72px 0;
  position: relative;
}
/* bleed the dark panel to the left viewport edge */
.audit-aside::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 100vw;
  background: inherit;
}
.audit-aside h1,
.audit-aside h2 {
  color: var(--forge-white);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.7rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 16px;
}
.audit-aside .lede {
  color: var(--forge-on-dark);
  font-size: 1.05rem;
  margin: 0 0 30px;
}
.learn {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 14px;
}
.learn li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--forge-on-dark);
  font-size: 0.99rem;
  line-height: 1.5;
}
.learn li .n {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(217, 101, 59, 0.16);
  color: var(--gold);
  font-weight: 800;
  font-size: 0.75rem;
}
.audit-aside .after {
  border-top: 1px solid var(--panel-line);
  padding-top: 22px;
  font-size: 0.92rem;
  color: var(--forge-on-dark-muted);
}
.audit-aside .after b {
  color: var(--forge-white);
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

/* Right: elevated white form panel */
.audit-panel {
  background: var(--forge-white);
  border: 1px solid var(--warm-line);
  border-radius: 18px;
  box-shadow: var(--shadow-lift);
  padding: 34px 34px 30px;
  margin: 56px 0 56px 56px;
  min-width: 0;
}

/* Stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.stepper .sdot {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--warm-2);
  transition: background 0.3s var(--ease);
}
.stepper .sdot.done {
  background: var(--gold);
}
.stepper .sdot.now {
  background: var(--navy);
}
.stepmeta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.stepmeta .of {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.stepmeta .left {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}

/* Answer tiles - large, thumb-friendly, obvious selected state */
.tiles {
  display: grid;
  gap: 10px;
  margin: 0 0 4px;
}
.tiles.two {
  grid-template-columns: 1fr 1fr;
}
.tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 12px;
  background: var(--forge-white);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.99rem;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
    box-shadow 0.16s var(--ease), transform 0.16s var(--ease);
}
.tile:hover {
  border-color: var(--navy);
  background: var(--warm);
}
.tile input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.tile .mark {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.tile .mark::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.16s var(--ease);
}
.tile:has(input:checked) {
  border-color: var(--navy);
  background: var(--forge-canvas-3);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.tile:has(input:checked) .mark {
  border-color: var(--navy);
  background: var(--navy);
}
.tile:has(input:checked) .mark::after {
  background: var(--gold);
}
.tile:has(input:focus-visible) {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}
.tile-hint {
  display: block;
  font-weight: 500;
  font-size: 0.84rem;
  color: var(--muted);
  margin-top: 3px;
}

/* Fallback for browsers without :has() - JS mirrors the state onto the label */
.tile.is-selected {
  border-color: var(--navy);
  background: var(--forge-canvas-3);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.tile.is-selected .mark {
  border-color: var(--navy);
  background: var(--navy);
}
.tile.is-selected .mark::after {
  background: var(--gold);
}

.audit-panel .form-step h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.audit-panel .form-nav {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--warm-line);
}

/* ---------------- Compact mobile navigation ---------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 11px;
  border: 1.5px solid var(--line-strong);
  background: var(--forge-white);
  color: var(--navy);
  cursor: pointer;
  flex: 0 0 auto;
}
.nav-toggle:hover {
  border-color: var(--navy);
}
.nav-toggle .bars {
  position: relative;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: background 0.18s var(--ease);
}
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s var(--ease);
}
.nav-toggle .bars::before {
  top: -6px;
}
.nav-toggle .bars::after {
  top: 6px;
}
.nav-toggle[aria-expanded="true"] .bars {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] .bars::before {
  transform: translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------------- Responsive (v3) ---------------- */
@media (max-width: 1040px) {
  .hero-v3 .container,
  .pillar {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Stack the visual BELOW the hero copy on narrow screens. */
  .hero-v3 .stack {
    order: 2;
  }
  .pillar:nth-child(even) .pillar-visual {
    order: 0;
  }
  .audit-split {
    grid-template-columns: 1fr;
  }
  .audit-aside {
    padding: 60px 0 56px;
  }
  .audit-aside::before {
    right: -50vw;
    left: -50vw;
    width: auto;
  }
  .audit-panel {
    margin: -28px 0 56px;
  }
  .flow {
    grid-template-columns: 1fr 1fr;
    gap: 36px 0;
  }
  .flow::before {
    display: none;
  }
}

/* The full desktop header measures brand 351 + links 363 + CTA 112 + two 16px
   gaps = 858px. With the container's 24px gutter on each side that needs a
   960px viewport, so the compact menu covers everything below that. Keep this
   width equal to --nav-compact-max, which js/nav.js reads back. */
@media (max-width: 959px) {
  /* Compact mobile menu replaces the wrapped two-row nav. */
  .nav-toggle {
    display: inline-flex;
    order: 3;
  }
  .nav {
    flex-wrap: nowrap;
    gap: 12px;
  }
  .nav-brand {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* .nav's own `padding: 12px 0` beats .container's `0 24px`, so below the
     container's max width the bar ran flush to both viewport edges. State all
     four sides here: the gutter is only needed once the container has stopped
     being centred inside a wider viewport. */
  .site-header .container.nav {
    padding: 10px 24px;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    background: var(--forge-white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px -28px rgba(23, 26, 31, 0.6);
    /* No vertical padding while collapsed, or the closed panel keeps a
       visible strip of height under the header. */
    padding: 0 20px;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.28s var(--ease), padding 0.28s var(--ease),
      visibility 0.28s;
  }
  .nav-links.is-open {
    max-height: 70vh;
    overflow-y: auto;
    visibility: visible;
    padding: 4px 20px 12px;
    border-top: 1px solid var(--line);
  }
  .nav-links li {
    border-top: 1px solid var(--line);
  }
  .nav-links li:first-child {
    border-top: 0;
  }
  .nav-links a {
    display: block;
    padding: 14px 4px;
    font-size: 1rem;
  }
  .nav-links a::after {
    left: 4px;
    right: auto;
    width: 22px;
    bottom: 8px;
  }
  .site-header .container.nav {
    position: static;
  }
  .site-header {
    position: sticky;
  }
  /* the panel anchors to the header, not the container */
  .site-header {
    position: sticky;
  }
  .nav {
    position: static;
  }
}

/* Below this the brand, the CTA, and the toggle stop fitting on one row, so
   the CTA steps aside; the menu panel still carries the Contact link. */
@media (max-width: 860px) {
  .nav-cta {
    display: none;
  }
}

@media (max-width: 720px) {
  .band {
    padding: 64px 0;
  }
  .cta-band {
    padding: 60px 0;
  }
  .hero-v3 {
    padding: 52px 0 64px;
  }
  .hero-actions-v3 .btn {
    width: 100%;
  }
  .flow {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: left;
  }
  .flow-step {
    padding: 0;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 16px;
    text-align: left;
    align-items: start;
  }
  .flow-step .dotnum {
    margin: 0;
    grid-row: 1 / span 2; /* the dot occupies the narrow column on both rows */
  }
  /* ...so the heading and copy both sit in the wide column. Without this the
     paragraph auto-places under the dot and wraps one word per line. */
  .flow-step h3,
  .flow-step p {
    grid-column: 2;
  }
  .pillar {
    padding: 40px 0;
    gap: 30px;
  }
  .pillar-visual .pane + .pane {
    width: 100%;
    justify-self: stretch;
  }
  .audit-panel {
    padding: 24px 18px 22px;
    border-radius: 14px;
  }
  .tiles.two {
    grid-template-columns: 1fr;
  }
  .tile {
    min-height: 62px; /* thumb-friendly */
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .audit-aside {
    padding: 48px 0 46px;
  }
}

/* ---------------- Motion for v3 (still gated on .motion) ---------------- */
.motion :is(.band-head, .flow-step, .pillar > *, .cta-band > .container > *, .learn li, .proof, .accuracy) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.motion :is(.band-head, .flow-step, .pillar > *, .cta-band > .container > *, .learn li, .proof, .accuracy).is-in {
  opacity: 1;
  transform: none;
}
/* Hero panes fly into their layered positions once, on entry. */
.motion .stack .pane {
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.motion .stack .pane-site {
  transform: perspective(1400px) rotateY(9deg) rotateX(3deg) translate(-18px, 14px);
}
.motion .stack .pane-pipeline,
.motion .stack .pane-due {
  transform: translate(18px, 18px);
}
.motion .stack.is-in .pane-site {
  opacity: 1;
  transform: perspective(1400px) rotateY(9deg) rotateX(3deg);
}
.motion .stack.is-in .pane-pipeline,
.motion .stack.is-in .pane-due {
  opacity: 1;
  transform: none;
}
.motion .stack-path path {
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.5s var(--ease) 0.45s;
}
.motion .stack.is-in .stack-path path {
  stroke-dashoffset: 0;
}
.motion .stack-path circle {
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  transition-delay: calc(0.8s + var(--i, 0) * 0.2s);
}
.motion .stack.is-in .stack-path circle {
  opacity: 1;
}
/* ---- One fictional service journey, traced once when the hero composition
   first enters the viewport: request received, New, Booked, Done, review
   request ready, next service date set, due for service.

   The journey HIGHLIGHTS information that is already on screen. It never
   creates it. Every row, status, note and total is painted from the static
   markup at first paint, so the dashboard is complete before any script runs
   and stays complete if motion.js never loads, if JavaScript is off, and
   under a reduced-motion preference.

   What animates is a decorative ring that each step borrows for a moment. It
   is a pseudo-element, it is always in the DOM, and only its opacity changes,
   so nothing reflows and no content depends on it. ---- */
.stack .jrn {
  position: relative;
}
.stack .jrn::after {
  content: "";
  position: absolute;
  inset: -4px -6px;
  border-radius: 8px;
  border: 2px solid var(--gold);
  opacity: 0;
  pointer-events: none;
}
.motion .stack .jrn::after {
  transition: opacity 0.3s var(--ease);
}
/* The one step currently being traced. */
.motion .stack .jrn.is-lit::after {
  opacity: 1;
}

.motion .flow::before {
  transform: scaleX(0);
  transform-origin: left;
}
.motion .flow.is-in::before {
  transform: scaleX(1);
  transition: transform 1s var(--ease) 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .motion :is(
      .band-head, .flow-step, .pillar > *, .cta-band > .container > *,
      .learn li, .stack .pane, .proof, .accuracy
    ) {
    opacity: 1 !important;
    transform: none !important;
  }
  .motion .stack .pane-site {
    transform: perspective(1400px) rotateY(9deg) rotateX(3deg) !important;
  }
  .motion .stack-path path {
    stroke-dashoffset: 0 !important;
  }
  .motion .stack-path circle {
    opacity: 1 !important;
  }
  /* Reduced motion: the ring never lights, and the dashboard is already
     complete without it. */
  .motion .stack .jrn::after {
    opacity: 0 !important;
    transition: none !important;
  }
  .accuracy summary::before {
    transition: none !important;
  }
  .motion .flow::before {
    transform: none !important;
  }
  .nav-links {
    transition: none !important;
  }
}

/* Label for a tile group (a radiogroup has no single control to label). */
.group-label {
  display: block;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.92rem;
  margin-bottom: 9px;
}
.audit-panel .field {
  margin-bottom: 22px;
}
.audit-panel .progress {
  margin-bottom: 4px;
}

/* ---- Case study on a dark band: the v2 timeline was built for light ---- */
.band-dark .timeline::before {
  background: var(--panel-line);
}
.band-dark .timeline .tnum {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  color: var(--forge-white);
}
.band-dark .timeline li.discovery .tnum {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--forge-black);
}
.band-dark .timeline b {
  color: var(--forge-white);
}
.band-dark .timeline p {
  color: var(--forge-on-dark-muted);
}
.band-dark .cs-card {
  background: var(--panel);
  border-color: var(--panel-line);
}
.band-dark .cs-card h4 {
  color: var(--forge-white);
}
.band-dark .cs-quals {
  color: var(--forge-on-dark-muted);
  border-top-color: var(--panel-line);
}
.band-dark .cs-side {
  top: 108px;
}

/* The full-bleed pseudo-element must sit BEHIND the panel's own content.
   Without this it paints over the copy once it spans the panel (mobile). */
.audit-aside::before {
  z-index: 0;
}
.audit-aside > * {
  position: relative;
  z-index: 1;
}

/* .audit-panel is already the card. Neutralise the v1 .audit-form card so we
   don't render a second bordered white box inside it - which also reclaimed
   ~90px of form width at 375px. */
.audit-panel .audit-form {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* =========================================================================
   GUIDED HOMEPAGE
   Hero secondary link, the three-stage demonstration, the proof points, the
   accuracy disclosure, and the phone-only sticky audit CTA. Everything paints
   from the Forge tokens declared at the top of this file.
   ========================================================================= */

/* Secondary hero action: a text link, so the audit button stays the one
   visually dominant action in the hero. */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--forge-canvas);
  text-decoration: none;
  border-bottom: 2px solid var(--gold);
  padding: 4px 2px;
}
.hero-link::after {
  content: "\2193"; /* downward arrow: the section is further down the page */
  font-size: 0.95em;
}
.hero-link:hover {
  color: var(--gold);
}
.hero-link:focus-visible {
  outline: 3px solid var(--forge-orange-soft);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Three-stage demonstration ------------------------------------------------
   The stage label carries a number AND the words "Stage n of 3", so the
   progression never depends on the numeral's colour alone. */
.stage-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}
.stage-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 0.8rem;
  letter-spacing: 0;
}
.band-dark .stage .pillar-note {
  color: var(--forge-on-dark-muted);
}
/* The one disclosure that closes the demonstration. */
.demo-note {
  margin: 34px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--panel-line);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--forge-canvas);
}

/* Built and operating ---------------------------------------------------- */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.proof {
  background: var(--navy-panel);
  border: 1px solid var(--panel-line);
  border-radius: 14px;
  padding: 24px 22px;
}
.proof h3 {
  font-size: 1.02rem;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--forge-canvas);
}
.proof p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--forge-on-dark-muted);
}
/* The one qualification that stays on the page unprompted. */
.proof-note {
  margin: 20px 0 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--forge-on-dark-muted);
}
/* Collapsed accuracy notes. Native <details>, so it needs no script. */
.accuracy {
  margin-top: 16px;
  border: 1px solid var(--panel-line);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  background: var(--forge-black-2);
}
.accuracy summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--forge-canvas);
}
.accuracy summary::-webkit-details-marker {
  display: none;
}
/* Open and closed are told apart by a rotating caret and the words that
   follow it, never by colour alone. */
.accuracy summary::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease);
}
.accuracy[open] summary::before {
  transform: rotate(45deg);
}
.accuracy summary::after {
  content: "Show";
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--forge-on-dark-muted);
}
.accuracy[open] summary::after {
  content: "Hide";
}
.accuracy summary:hover {
  color: var(--gold);
}
.accuracy summary:focus-visible {
  outline: 3px solid var(--forge-orange-soft);
  outline-offset: -3px;
  border-radius: 10px;
}
.accuracy ul {
  margin: 0;
  padding: 0 22px 20px 42px;
  display: grid;
  gap: 8px;
}
.accuracy li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--forge-on-dark-muted);
}
.accuracy a {
  color: var(--gold);
}

/* Compact-menu-only audit link ------------------------------------------- */
/* Redundant while the header CTA button is on screen; the compact menu hides
   that button, so this is how a phone reaches the audit from the menu. */
.nav-audit {
  display: none;
}

/* Phone-only sticky audit CTA -------------------------------------------- */
/* js/nav.js reveals this only between the hero and the closing CTA band, so
   it never sits over the real button or the footer's legal links. */
.sticky-cta {
  display: none;
}
@media (max-width: 720px) {
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--forge-black);
    border-top: 1px solid var(--panel-line);
  }
  /* Higher specificity than the rule above, so `hidden` still wins. */
  .sticky-cta[hidden] {
    display: none;
  }
  .sticky-cta .btn {
    width: 100%;
  }
}

/* Matches the width at which the header CTA button steps aside. */
@media (max-width: 860px) {
  .nav-audit {
    display: list-item;
  }
}

/* On a phone the "BY T&R GROWTH" lockup runs past the wordmark and collides
   with the menu toggle. The wizard header already drops it at this width;
   the site header now does the same. */
@media (max-width: 560px) {
  .site-header .brand-sub {
    display: none;
  }
}

@media (max-width: 940px) {
  .proof-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =========================================================================
   GUIDED AUDIT WIZARD
   One question per screen, full page, no site navigation while active.

   TOKENS: every value the wizard paints with is declared here and mapped onto
   the existing ServiceMomentum palette. Palette exploration later only needs to
   change these eleven lines - the wizard itself references nothing else.
   ========================================================================= */
:root {
  --wz-bg: var(--warm);
  --wz-surface: var(--forge-white);
  --wz-ink: var(--ink);
  --wz-muted: var(--muted);
  --wz-line: var(--warm-line);
  --wz-line-strong: var(--line-strong);
  --wz-select: var(--navy); /* selected border / check / accent */
  --wz-select-ink: var(--forge-white);
  --wz-select-bg: var(--forge-canvas-3); /* selected fill */
  --wz-progress: var(--gold); /* progress bar fill */
  --wz-progress-track: var(--warm-2);
  --wz-radius: 14px;
  --wz-pause: 420ms; /* how long the selected state shows before advancing */
}

/* Page shell ------------------------------------------------------------- */
.wizard {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--wz-bg);
}

/* Thin progress bar pinned across the very top */
.wz-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--wz-progress-track);
  z-index: 60;
}
.wz-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--wz-progress);
  border-radius: 0 3px 3px 0;
  transition: width 0.45s var(--ease);
}

/* Minimal bar: logo left, step counter right. No site nav while auditing. */
.wz-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px 0;
}
.wz-bar .nav-brand {
  text-decoration: none;
}
.wz-count {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wz-muted);
  white-space: nowrap;
}

/* The question stage - centred, generous whitespace */
.wz-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px 56px;
}
.wz-step {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.wz-step[hidden] {
  display: none;
}
.wz-eyebrow {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 14px;
}
.wz-q {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--wz-ink);
  margin: 0 auto 12px;
  max-width: 18em;
}
.wz-q:focus {
  outline: none;
}
.wz-q:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 6px;
  border-radius: 8px;
}
.wz-hint {
  font-size: 1rem;
  color: var(--wz-muted);
  margin: 0 auto 36px;
  max-width: 40em;
}

/* Answer tiles ----------------------------------------------------------- */
.wz-tiles {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: left;
}
.wz-tiles[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wz-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 18px 20px;
  background: var(--wz-surface);
  border: 2px solid var(--wz-line-strong);
  border-radius: var(--wz-radius);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
    box-shadow 0.16s var(--ease), transform 0.16s var(--ease);
}
.wz-tile:hover {
  border-color: var(--wz-select);
  box-shadow: 0 10px 24px -18px rgba(23, 26, 31, 0.7);
}
.wz-tile input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.wz-tile-label {
  font-size: 1.04rem;
  font-weight: 650;
  line-height: 1.32;
  color: var(--wz-ink);
  flex: 1;
}
/* The check sits in a fixed slot so nothing reflows when it appears. */
.wz-check {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--wz-line-strong);
  background: transparent;
  display: grid;
  place-items: center;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease);
}
.wz-check svg {
  width: 16px;
  height: 16px;
  stroke: var(--wz-select-ink);
  stroke-width: 3.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
/* Word, not just colour - the state is spelled out. */
.wz-state {
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wz-select);
  opacity: 0;
  transition: opacity 0.18s var(--ease);
}

/* Selected: fill + border + checkmark + the word "Selected". */
.wz-tile.is-selected,
.wz-tile:has(input:checked) {
  border-color: var(--wz-select);
  background: var(--wz-select-bg);
  box-shadow: inset 0 0 0 1px var(--wz-select);
}
.wz-tile.is-selected .wz-check,
.wz-tile:has(input:checked) .wz-check {
  border-color: var(--wz-select);
  background: var(--wz-select);
}
.wz-tile.is-selected .wz-check svg,
.wz-tile:has(input:checked) .wz-check svg {
  opacity: 1;
  transform: scale(1);
}
.wz-tile.is-selected .wz-state,
.wz-tile:has(input:checked) .wz-state {
  opacity: 1;
}
.wz-tile:has(input:focus-visible),
.wz-tile.is-focused {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

/* Step controls ---------------------------------------------------------- */
.wz-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
  min-height: 52px;
}
.wz-nav .btn-back {
  background: transparent;
  border-color: transparent;
  color: var(--wz-muted);
  font-weight: 650;
}
.wz-nav .btn-back:hover {
  color: var(--wz-ink);
  border-color: var(--wz-line-strong);
  background: var(--wz-surface);
}

/* Final contact screen --------------------------------------------------- */
.wz-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
  max-width: 660px;
  margin: 0 auto;
}
.wz-form-grid .field {
  margin-bottom: 0;
}
.wz-form-grid .span-2 {
  grid-column: 1 / -1;
}
.wz-form-grid label {
  font-size: 0.9rem;
}
.wz-optional {
  font-weight: 500;
  color: var(--wz-muted);
}
.wz-consent {
  max-width: 660px;
  margin: 20px auto 0;
  text-align: left;
}

/* Successful submission ---------------------------------------------------
   The two-column confirmation that replaces the question stage once the
   endpoint has actually accepted the application. Left pane is Forge Black
   with Warm Canvas type; right pane is white with Forge Black type; a Burnt
   Orange rule joins them. Every value comes from the wizard tokens or the
   Forge palette above, so a palette change still reaches it. */
.wz-done {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  border: 1px solid var(--wz-line);
  border-radius: var(--wz-radius);
  /* Clips both panes to the radius so the two grounds meet cleanly. */
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  text-align: left;
}
/* Same explicit opt-out .form-step[hidden] and .btn[hidden] need: the grid
   display above would otherwise beat the UA's [hidden] rule and leave the
   confirmation on screen before anything was submitted. */
.wz-done[hidden] {
  display: none;
}
/* The step controls sit in a flex row, so their `hidden` needs the same
   opt-out or Back / Continue / Submit stay visible after success. */
.wz-nav[hidden] {
  display: none;
}

/* Left pane: the confirmation itself, on Forge Black. */
.wz-done-main {
  display: flex;
  flex-direction: column;
  background: var(--forge-black);
  color: var(--forge-canvas);
  padding: 48px 44px 46px;
}
.wz-done-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forge-orange-soft);
  margin: 0 0 26px;
}
.wz-done-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  margin: 0 0 24px;
  border-radius: 50%;
  background: var(--forge-black-2);
  border: 1px solid var(--gold);
  color: var(--gold);
}
.wz-done-mark svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wz-done-title {
  font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--forge-canvas);
  margin: 0 0 16px;
  /* A submitted name can be one very long token. Let it break rather than
     push the pane wider than its column. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.wz-done-title:focus {
  outline: none;
}
.wz-done-title:focus-visible {
  outline: 3px solid var(--forge-orange-soft);
  outline-offset: 6px;
  border-radius: 8px;
}
.wz-done-lede {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--forge-on-dark);
  margin: 0 0 22px;
  overflow-wrap: break-word;
}
.wz-done-biz {
  font-weight: 700;
  color: var(--forge-canvas);
}
.wz-done-timing {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--forge-on-dark-muted);
  border-top: 1px solid var(--forge-line-dark);
  padding-top: 18px;
  margin: auto 0 0;
}

/* Right pane: what happens next, on white. */
.wz-done-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--wz-surface);
  color: var(--wz-ink);
  padding: 48px 44px 46px;
}
/* The Burnt Orange rule that joins the two panes. Decorative only. */
.wz-done-aside::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--gold);
}
.wz-done-next-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 22px;
}
.wz-done-steps {
  list-style: none;
  counter-reset: wz-done-step;
  display: grid;
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
}
.wz-done-steps li {
  counter-increment: wz-done-step;
  position: relative;
  padding-left: 42px;
  min-height: 28px;
  font-size: 0.97rem;
  line-height: 1.5;
  color: var(--wz-ink);
}
.wz-done-steps li::before {
  content: counter(wz-done-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--wz-select-bg);
  border: 1px solid var(--wz-line-strong);
  color: var(--wz-ink);
  font-size: 0.78rem;
  font-weight: 800;
}
.wz-done-reassure {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--wz-muted);
  border-top: 1px solid var(--wz-line);
  padding-top: 18px;
  margin: 0 0 24px;
}
.wz-done-actions {
  margin: auto 0 0;
}
.wz-done-actions .btn {
  width: 100%;
}
.wz-done-contact {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--wz-muted);
  margin: 14px 0 0;
}
.wz-done-contact a {
  color: var(--gold-text);
  overflow-wrap: anywhere;
}

/* A single restrained entrance. Opacity and transform only, and switched off
   entirely under a reduced-motion preference (see the query below). */
.wz-done {
  animation: wz-done-in 0.4s var(--ease) both;
}
@keyframes wz-done-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 860px) {
  .wz-done {
    /* Stack the two panes: confirmation first, next steps under it. */
    grid-template-columns: 1fr;
    max-width: 560px;
  }
  .wz-done-main,
  .wz-done-aside {
    padding: 36px 28px 32px;
  }
  /* The joining rule turns horizontal and sits on the seam. */
  .wz-done-aside::before {
    right: 0;
    bottom: auto;
    width: auto;
    height: 5px;
  }
  .wz-done-timing {
    margin-top: 4px;
  }
}
@media (max-width: 560px) {
  .wz-done-main,
  .wz-done-aside {
    padding: 30px 20px 28px;
  }
  .wz-done-label {
    margin-bottom: 20px;
  }
  .wz-done-mark {
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
  }
  .wz-done-steps li {
    padding-left: 38px;
  }
}

/* Slim legal footer - kept, so the privacy/legal links never disappear. */
.wz-foot {
  border-top: 1px solid var(--wz-line);
  padding: 18px 28px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  font-size: 0.84rem;
  color: var(--wz-muted);
}
.wz-foot a {
  color: var(--wz-muted);
  text-decoration: none;
  margin-right: 16px;
}
.wz-foot a:hover {
  color: var(--navy);
  text-decoration: underline;
}

/* Status region on the final screen */
.wizard .form-status {
  max-width: 660px;
  margin: 20px auto 0;
  text-align: left;
}
.wizard .form-error {
  text-align: center;
  margin-top: 12px;
}

/* Entering a step. Not gated on .motion: this page carries no motion layer,
   and the reduced-motion query below switches the animation off directly. */
.wz-step.is-entering {
  animation: wz-enter 0.32s var(--ease) both;
}
@keyframes wz-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 860px) {
  .wz-tiles,
  .wz-tiles[data-cols="3"] {
    grid-template-columns: 1fr;
  }
  .wz-form-grid {
    grid-template-columns: 1fr;
  }
  .wz-bar {
    padding: 16px 18px 0;
  }
  .wz-main {
    padding: 28px 18px 40px;
  }
  .wz-tile {
    min-height: 74px;
  }
  .wz-hint {
    margin-bottom: 26px;
  }
  .wz-foot {
    padding: 16px 18px 22px;
  }
}
@media (max-width: 560px) {
  /* The wordmark and the step counter share one narrow row - scale both down
     and let them shrink so they never overlap. The counter stays visible (it is
     an aria-live region announcing progress), it just gets smaller. */
  .wz-bar {
    gap: 10px;
  }
  .wz-bar .nav-brand {
    min-width: 0;
    flex: 1 1 auto;
  }
  .wz-bar .wordmark {
    font-size: 1rem;
    min-width: 0;
  }
  .wz-bar .brand-mark {
    width: 30px;
    height: 30px;
  }
  .wz-bar .brand-sub {
    display: none;
  }
  .wz-count {
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wz-progress-fill,
  .wz-tile,
  .wz-check,
  .wz-check svg,
  .wz-state {
    transition: none !important;
  }
  .wz-step.is-entering,
  .wz-done {
    animation: none !important;
  }
}

/* The wizard is the page - strip the v1 form card so nothing boxes it in. */
.wizard .audit-form {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}

/* Connected service history: an operational record, with no simulated results. */
.hero-v3 .container { gap: 40px; }
.hero-v3 .hero-copy { align-self: start; padding-top: 20px; }
.hero-v3 h1 > span { display: block; }
.hero-v3 h1 { font-size: clamp(2.3rem, 4.2vw, 3.3rem); line-height: 1.06; }
.hero-service { color: var(--forge-on-dark); font-size: 0.94rem; line-height: 1.65; margin: 20px 0 24px; }
.hero-v3 .eyebrow { color: var(--forge-orange-soft); font-size: 0.8rem; }
.stack.lifecycle-demo { min-height: 0; width: 100%; max-width: 620px; margin: 0 auto; border: 1px solid var(--forge-line-dark); border-radius: 12px; background: var(--forge-white); color: var(--ink); overflow: hidden; }
.demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; background: var(--forge-black-2); color: var(--forge-on-dark); font-size: 0.875rem; font-weight: 700; }
.demo-sample { color: var(--forge-orange-soft); font-size: 0.75rem; }
.demo-record { display: flex; gap: 14px; align-items: center; padding: 22px 20px 18px; }
.demo-record-icon { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; background: var(--forge-canvas); border: 1px solid var(--line); font-size: 1.3rem; font-weight: 800; border-radius: 6px; }
.demo-record p { margin: 0; color: var(--muted); font-size: 0.875rem; }
.demo-record .demo-overline { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-text); }
.demo-record h2 { margin: 3px 0; font-size: 1.25rem; color: var(--ink); line-height: 1.2; }
.demo-history-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; background: var(--forge-canvas); padding: 10px 20px; font-size: 0.875rem; border-block: 1px solid var(--line); }
.demo-history-head > span { font-size: 0.75rem; color: var(--muted); }
.demo-history { list-style: none; padding: 0 20px; margin: 0; }
.demo-history li { display: grid; grid-template-columns: 25px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); line-height: 1.35; }
.demo-history li:last-child { border-bottom: 0; }
.demo-step { font-size: 0.75rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.demo-history b { display: block; font-size: 0.875rem; font-weight: 700; }
.demo-history div > span { display: block; color: var(--muted); font-size: 0.875rem; margin-top: 3px; }
.demo-state { font-size: 0.75rem; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; }
.demo-due b, .demo-due .demo-step { color: var(--gold-text); }
.demo-due .demo-state { border-color: var(--gold); background: var(--forge-orange-soft); }
.lifecycle-demo .stack-label { position: static; padding: 14px 20px; background: var(--forge-canvas); border-top: 1px solid var(--line); color: var(--muted); text-align: left; font-size: 0.75rem; letter-spacing: 0; }
.lifecycle-demo .stack-note { margin-top: 4px; }
.lifecycle-demo .jrn::after { inset: 1px -8px; border-radius: 5px; }
.system-audit { display: flex; justify-content: space-between; align-items: center; gap: 24px; border-top: 1px solid var(--forge-line-dark); padding-top: 32px; margin-top: 32px; }
.system-audit h3 { margin: 0 0 6px; color: var(--forge-white); }
.system-audit p { margin: 0; color: var(--forge-on-dark-muted); }
.system-audit .btn { flex-shrink: 0; }
.wz-main { flex-direction: column; }
.audit-intro { text-align: center; margin: 0 auto 28px; }
.audit-intro h1 { font-size: 1rem; margin: 0 0 5px; }
.audit-intro p { color: var(--wz-muted); font-size: 0.875rem; margin: 0; }
@media (min-width: 960px) and (max-width: 1040px) {
  .hero-v3 .container { grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 28px; }
}
@media (max-width: 959px) {
  .hero-v3 .hero-copy { max-width: 620px; margin: 0 auto; width: 100%; }
  .hero-v3 h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); }
}
@media (max-width: 600px) {
  .hero-v3 { padding: 36px 0 40px; }
  .hero-v3 .container { gap: 28px; }
  .hero-service { margin: 16px 0 20px; }
  .demo-toolbar, .demo-history-head { padding: 12px; }
  .demo-record { padding: 18px 12px; }
  .demo-history { padding: 0 12px; }
  .demo-history li { grid-template-columns: 22px minmax(0,1fr); gap: 7px; padding: 12px 0; }
  .demo-state { display: none; } /* Status is also spelled out in each row heading. */
  .demo-history div > span { font-size: 0.875rem; }
  .lifecycle-demo .stack-label { padding: 14px 12px; }
  .system-audit { flex-direction: column; align-items: stretch; }
  .audit-intro { margin-bottom: 22px; }
  .wz-count { font-size: 0.75rem; letter-spacing: 0; }
  .wz-tiles, .wz-tiles[data-cols="3"] { gap: 10px; }
  .wz-tile { min-height: 64px; padding: 14px 16px; }
}