/* QuantQS shared stylesheet.
   Load after fonts.css and tokens.css:
     <link rel="stylesheet" href="./fonts/fonts.css">
     <link rel="stylesheet" href="./css/tokens.css">
     <link rel="stylesheet" href="./css/app.css">

   Sizing rules for anything added here:
     - rem for every length, derived at the 1920x1200 reference (1rem = 16px).
     - clamp() where something should scale faster or slower than the type.
     - px ONLY for hairline borders and the pill-radius sentinel.
     - Breakpoints in rem, from the shared set at the bottom of this file. */

/* ===========================================================================
   1. Base
   ======================================================================== */

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

html {
  font-size: var(--root-size);
  scroll-behavior: smooth;
  /* Stops iOS Safari inflating text in landscape, which would defeat the
     whole scale. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  /* Belt and braces against a stray wide child on small screens. Each page
     should still avoid overflowing rather than relying on this. */
  overflow-x: hidden;
}

::selection {
  background: var(--c-brand);
  color: var(--c-surface);
}

a {
  color: var(--c-brand);
  text-decoration: none;
}

a:hover {
  color: var(--c-brand-dark);
  text-decoration: underline;
}

input,
select,
textarea,
button {
  font-family: var(--font-body);
}

/* Media never forces a horizontal scrollbar. */
img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

/* Anchor targets clear the fixed nav. */
[id] {
  scroll-margin-top: var(--scroll-offset);
}

:focus-visible {
  outline: 0.125rem solid var(--c-brand);
  outline-offset: 0.125rem;
}

/* ===========================================================================
   2. Typography helpers
   ======================================================================== */

.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-widest);
  color: var(--c-brand);
  margin-bottom: var(--space-3-5);
}

.eyebrow-light {
  color: var(--c-brand-light);
}

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--c-muted);
}

.lede-light {
  color: var(--c-brand-pale);
}

/* A comfortable measure. ch units are already relative to the font, so these
   hold their reading rhythm at every root size. */
.measure {
  max-width: 62ch;
}

.measure-tight {
  max-width: 48ch;
}

/* ===========================================================================
   3. Layout primitives
   ======================================================================== */

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

.section {
  padding-block: var(--section-y);
}

.section-deep {
  background: var(--c-brand-deep);
  padding-block: var(--section-y-lg);
  padding-inline: var(--gutter);
}

/* Two-column split that collapses to one column when the columns can no
   longer hold their minimum. auto-fit + minmax does the reflow without a
   media query, so it responds to the *container*, not the viewport. */
.split {
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--grid-gap);
  align-items: start;
}

/* Card grids. The min() guard is what stops a 20rem minimum from overflowing
   a 390px phone. */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr));
  gap: var(--space-4);
}

.grid-cards-wide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18.75rem, 100%), 1fr));
  gap: var(--space-4);
}

.grid-cards-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-7);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

/* ===========================================================================
   4. Shell - nav, mobile menu, footer
   Injected markup lives in site-nav.js; all of its styling is here.
   ======================================================================== */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: var(--nav-h);
  padding-inline: var(--gutter);
  background: rgba(247, 246, 242, 0.85);
  backdrop-filter: blur(0.875rem);
  -webkit-backdrop-filter: blur(0.875rem);
  border-bottom: var(--hairline) solid var(--c-line);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  width: 2.125rem;
  height: 2.125rem;
  background: var(--c-brand);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-surface);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-slight);
  color: var(--c-ink);
}

.nav-desktop {
  display: none;
  align-items: center;
  gap: var(--space-1);
}

.nav-link {
  display: inline-block;
  background: none;
  border: none;
  color: var(--c-muted-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition:
    color var(--ease),
    background var(--ease);
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link[aria-current='page'] {
  color: var(--c-ink);
  background: var(--c-surface-alt);
  text-decoration: none;
}

.btn-cta {
  margin-left: var(--space-2-5);
  white-space: nowrap;
  display: inline-block;
  background: var(--c-brand);
  color: var(--c-surface);
  border: none;
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background var(--ease),
    transform var(--ease);
  text-decoration: none;
}

.btn-cta:hover {
  background: var(--c-brand-dark);
  transform: translateY(-0.0625rem);
  color: var(--c-surface);
  text-decoration: none;
}

.nav-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1-5);
  background: none;
  border: none;
  cursor: pointer;
  /* 2.75rem square keeps the tap target at the 44px minimum. */
  width: 2.75rem;
  height: 2.75rem;
  padding: var(--space-2);
  flex-shrink: 0;
}

.nav-hamburger span {
  width: 100%;
  height: 0.125rem;
  background: var(--c-ink);
  display: block;
  border-radius: 0.125rem;
}

.mobile-menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 49;
  background: var(--c-bg);
  display: none;
  flex-direction: column;
  padding: var(--space-6) var(--gutter) var(--space-10);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu a {
  border-bottom: var(--hairline) solid var(--c-line);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  text-align: left;
  padding: var(--space-4-5) 0;
  text-decoration: none;
}

.mobile-menu a:hover {
  color: var(--c-ink);
  text-decoration: none;
}

.mobile-menu a.btn-cta-mobile {
  margin-top: var(--space-6);
  background: var(--c-brand);
  color: var(--c-surface);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  padding: var(--space-4);
  border-radius: var(--radius-pill);
  text-align: center;
  border-bottom: none;
}

/* Body scroll lock while the menu is open, set by site-nav.js. */
body.menu-open {
  overflow: hidden;
}

.site-footer {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--space-11) var(--gutter);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  border-bottom: var(--hairline) solid var(--c-line);
  padding-bottom: var(--space-7);
  margin-bottom: var(--space-5-5);
}

.footer-mark {
  width: 1.875rem;
  height: 1.875rem;
  background: var(--c-brand);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-surface);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-md);
  flex-shrink: 0;
}

.footer-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}

.footer-link {
  display: inline-block;
  background: none;
  border: none;
  color: var(--c-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-2-5);
  cursor: pointer;
  transition: color var(--ease);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--c-ink);
  text-decoration: none;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--c-faint);
}

.footer-email {
  /* Inherits the meta row's size; only the colour and underline mark it as a
     link, so it sits level with the entity line rather than competing with it. */
  color: var(--c-muted);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--ease);
}

.footer-email:hover {
  color: var(--c-ink);
  text-decoration: underline;
}

/* ===========================================================================
   5. Buttons
   ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-3-5) var(--space-6);
  /* Never smaller than the 44px minimum tap target. */
  min-height: 2.75rem;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--ease),
    border-color var(--ease),
    transform var(--ease),
    box-shadow var(--ease);
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--c-brand);
  color: var(--c-surface);
}

.btn-primary:hover {
  background: var(--c-brand-dark);
  color: var(--c-surface);
  transform: translateY(-0.125rem);
  box-shadow: var(--shadow-btn);
}

.btn-outline {
  background: var(--c-surface);
  color: var(--c-ink);
  border: var(--hairline) solid var(--c-line-strong);
}

.btn-outline:hover {
  border-color: var(--c-brand);
  background: var(--c-brand-wash-alt);
  color: var(--c-ink);
}

.btn-ghost {
  background: none;
  border: none;
  color: var(--c-brand);
  font-size: var(--text-xs);
  font-weight: 800;
  padding: var(--space-1) var(--space-2);
  min-height: 2.75rem;
}

.btn-block {
  width: 100%;
}

.btn-lg {
  font-size: var(--text-md);
  padding: var(--space-4) var(--space-6);
}

/* On phones a row of buttons should fill the width rather than sit in a
   cramped huddle. */
@media (max-width: 30rem) {
  .btn-stack-sm .btn,
  .btn-stack-sm > button,
  .btn-stack-sm > a {
    width: 100%;
  }
}

/* ===========================================================================
   6. Surfaces
   ======================================================================== */

.card {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-xl);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5);
  transition:
    transform var(--ease-slow),
    box-shadow var(--ease-slow),
    border-color var(--ease-slow);
}

.panel {
  background: var(--c-surface);
  border-radius: var(--radius-3xl);
  padding: var(--card-pad);
  box-shadow: var(--shadow-panel);
}

.panel-flat {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-3xl);
  padding: var(--panel-pad);
}

/* ===========================================================================
   7. Forms
   ======================================================================== */

.field {
  border: var(--hairline-strong) solid var(--c-line);
  border-radius: var(--radius-md);
  padding: var(--space-3-5) var(--space-4);
  /* 1rem is the threshold below which iOS Safari zooms the viewport on
     focus. Holding the floor here keeps the layout still. */
  font-size: max(var(--text-md), 1rem);
  font-weight: 600;
  color: var(--c-ink);
  background: var(--c-surface);
  outline: none;
  width: 100%;
  min-height: 2.75rem;
}

.field:focus {
  border-color: var(--c-brand);
}

textarea.field {
  resize: vertical;
  line-height: var(--leading-body);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11.25rem, 100%), 1fr));
  gap: var(--space-3-5);
}

.check-row {
  display: flex;
  gap: var(--space-2-5);
  align-items: flex-start;
  cursor: pointer;
}

.check-row input[type='checkbox'] {
  margin-top: 0.1875rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--c-brand);
  flex-shrink: 0;
}

.check-label {
  font-size: var(--text-2xs);
  line-height: var(--leading-body);
  color: var(--c-muted);
}

.form-error {
  background: var(--c-error-bg);
  color: var(--c-error-ink);
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-3-5);
  font-size: var(--text-xs);
  font-weight: 700;
}

.form-note {
  font-size: var(--text-2xs);
  line-height: var(--leading-body);
  color: var(--c-faint);
}

/* Visually hidden but still announced. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   8. Pills, chips, badges
   ======================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--c-brand-tint);
  color: var(--c-brand);
  border-radius: var(--radius-pill);
  padding: var(--space-1-5) var(--space-3-5);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
}

.badge-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  background: currentColor;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.chip {
  background: var(--c-surface-sunk);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3-5);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--c-muted-strong);
  cursor: pointer;
  transition:
    background var(--ease),
    color var(--ease),
    border-color var(--ease);
}

.chip:hover {
  background: var(--c-brand-tint);
  color: var(--c-brand);
}

.tick {
  width: 1.1875rem;
  height: 1.1875rem;
  background: rgba(159, 214, 190, 0.18);
  color: var(--c-brand-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xs);
  font-weight: 800;
  flex-shrink: 0;
}

/* A ticked assurance line under the home-page calculator. A class rather than
   inline styles because home.js builds one of these at runtime when the
   rate-data provenance claim is set. */
.assurance {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
}

.assurance-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-brand-paler);
}

/* ===========================================================================
   9. Reveal-on-scroll
   ======================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(1.125rem);
  transition:
    opacity var(--ease-reveal) ease,
    transform var(--ease-reveal) ease;
}

[data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================================================
   10. Shared breakpoints
   Written in rem so they track the reader's font-size preference.
     30rem  / 480  - small phone
     48rem  / 768  - large phone, small tablet
     57.5rem/ 920  - nav switches to desktop
     63.75rem/1020 - calculator sidebar appears
   ======================================================================== */

@media (min-width: 57.5rem) {
  .nav-desktop {
    display: flex;
  }

  .nav-hamburger {
    display: none;
  }

  .mobile-menu {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ===========================================================================
   11. Home - cinematic sequence
   ======================================================================== */

.sequence {
  position: relative;
  /* Scroll distance driving the 3D sequence. Shortened on small screens:
     440vh of scrubbing is a long thumb journey on a phone before the reader
     reaches any of the real content. */
  height: var(--seq-h, 440vh);
}

.sequence-stage {
  position: sticky;
  top: 0;
  /* svh, not vh: on mobile Safari `100vh` is the *largest* viewport height, so
     a sticky full-height stage sits taller than the visible area and its
     bottom furniture hides under the browser chrome. svh is the smallest
     (chrome-visible) height, which is the one that always fits. dvh would
     resize continuously and make the stage jitter as the chrome retracts. */
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.sequence-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Scrim that keeps the hero copy legible over the render. Horizontal on wide
   screens; on narrow ones it becomes a top-down wash, because at phone widths
   a left-edge scrim would have to cover the whole viewport anyway. */
.sequence-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(247, 246, 242, 0.97) 0%,
    rgba(247, 246, 242, 0.93) 52%,
    rgba(247, 246, 242, 0.6) 100%
  );
}

.hero {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + var(--space-4)) var(--gutter) var(--space-24);
  pointer-events: none;
}

.hero-copy {
  width: min(var(--hero-copy), 100%);
  max-height: calc(100svh - var(--nav-h) - var(--space-20));
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-hero);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tighter);
  margin-bottom: var(--space-3-5);
  text-wrap: balance;
}

.hero-badge {
  margin-bottom: var(--space-5-5);
}

.stage-kicker {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-brand);
  margin-bottom: var(--space-2);
}

.stage-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-slight);
  margin-bottom: var(--space-2);
}

.stage-desc {
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--c-muted);
  margin-bottom: var(--space-3-5);
  max-width: 44ch;
}

.stage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}

.stage-chip {
  background: rgba(231, 241, 236, 0.9);
  color: var(--c-brand);
  border-radius: var(--radius-pill);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: 700;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
  margin-top: var(--space-4-5);
}

.sequence-hud {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--space-6-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4-5);
  flex-wrap: wrap;
}

.milestones {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-2-5);
  position: relative;
  z-index: 5;
  max-width: 100%;
}

.milestone-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.milestone-btn:hover {
  background: var(--c-surface-alt);
}

.milestone-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: block;
  background: #c9c4b6;
  transition: background 0.3s;
  flex-shrink: 0;
}

.milestone-label {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--c-faint);
  transition: color 0.3s;
}

.milestone-btn.is-on .milestone-dot {
  background: var(--c-brand);
}

.milestone-btn.is-on .milestone-label {
  color: var(--c-ink);
}

.milestone-rule {
  width: 1.375rem;
  height: var(--hairline-strong);
  background: var(--c-line-strong);
  display: block;
  margin: 0 var(--space-1);
}

.hud-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.progress-track {
  width: 7.5rem;
  height: 0.25rem;
  background: rgba(22, 38, 42, 0.1);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--c-brand);
  border-radius: var(--radius-pill);
}

.motion-toggle {
  background: rgba(255, 255, 255, 0.85);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3-5);
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--c-muted-strong);
  cursor: pointer;
  transition: border-color var(--ease);
  white-space: nowrap;
}

.motion-toggle:hover {
  border-color: var(--c-brand);
}

.scroll-cue {
  position: absolute;
  bottom: var(--space-20);
  right: clamp(1.25rem, 12vw, 13.75rem);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-faint);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  pointer-events: none;
  text-shadow: 0 0.0625rem 0.5rem rgba(247, 246, 242, 0.6);
}

/* ===========================================================================
   12. Home - content sections
   ======================================================================== */

.stats-panel {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-xl);
  padding: var(--space-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11.25rem, 100%), 1fr));
}

.stat-cell {
  padding: var(--space-5-5) var(--space-6);
  border-radius: var(--radius-md);
  transition: background var(--ease);
}

.stat-cell:hover {
  background: var(--c-bg);
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  letter-spacing: var(--tracking-snug);
  color: var(--c-brand);
  margin-bottom: var(--space-1);
}

.stat-key {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-muted);
}

.section-head {
  max-width: 40rem;
  margin-bottom: var(--space-11);
}

.process-card {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5);
  transition:
    transform var(--ease-slow),
    box-shadow var(--ease-slow);
}

.process-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-card-lg);
}

.process-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.process-num {
  width: 2.375rem;
  height: 2.375rem;
  background: var(--c-brand-tint);
  color: var(--c-brand);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.process-time {
  background: #f5ebda;
  color: #8a6220;
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-slight);
}

.card-body {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--c-muted);
}

.service-card {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-xl);
  padding: var(--space-6-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition:
    transform var(--ease-slow),
    box-shadow var(--ease-slow),
    border-color var(--ease-slow);
}

.service-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-card-lg);
  border-color: var(--c-brand-line);
}

.service-num {
  width: 2.125rem;
  height: 2.125rem;
  background: var(--c-brand-tint);
  color: var(--c-brand);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xs);
  flex-shrink: 0;
}

.service-for {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  color: var(--c-faint);
}

.audience {
  border-top: 0.1875rem solid var(--c-brand);
  padding-top: var(--space-4-5);
}

.audience-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.testimonial {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial-mark {
  color: var(--c-brand);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: 1;
}

.testimonial-quote {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: #3e4f52;
  flex: 1;
}

.contact-line {
  font-size: var(--text-md);
  color: var(--c-brand-paler);
}

.contact-line b {
  color: var(--c-brand-light);
  font-weight: 800;
}

.sent-mark {
  width: 3.375rem;
  height: 3.375rem;
  background: var(--c-brand-tint);
  color: var(--c-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-4xl);
  font-weight: 800;
  margin: 0 auto var(--space-4-5);
}

/* ===========================================================================
   13. Home - compact calculator
   ======================================================================== */

/* The intro column tracks the wizard while it is beside it. Sticky is only
   meaningful in the two-column layout - once the split collapses the intro
   sits above the wizard and pinning it would cover the questions. */
@media (min-width: 60rem) {
  .calc-intro {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-4));
  }
}

.calc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2-5);
}

.calc-step-label {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-faint);
}

.calc-track {
  height: 0.375rem;
  background: var(--c-brand-track);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-6-5);
  overflow: hidden;
}

.calc-track-fill {
  height: 100%;
  width: 0%;
  background: var(--c-brand);
  border-radius: var(--radius-pill);
  transition: width 0.35s ease;
}

.calc-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-slight);
  margin-bottom: var(--space-4-5);
}

.calc-q-sub {
  font-size: var(--text-xs);
  color: var(--c-faint);
  margin-bottom: var(--space-4-5);
}

.calc-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2-5);
}

.calc-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3-5);
  text-align: left;
  background: var(--c-surface);
  border: var(--hairline-strong) solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4-5);
  cursor: pointer;
  transition:
    border-color var(--ease),
    background var(--ease);
  width: 100%;
  min-height: 2.75rem;
}

.calc-opt:hover {
  border-color: var(--c-brand);
  background: var(--c-brand-wash);
}

.calc-opt-label {
  display: block;
  font-weight: 800;
  font-size: var(--text-md);
  color: var(--c-ink);
  margin-bottom: var(--space-0-5);
}

.calc-opt-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--c-faint);
}

.calc-opt-arrow {
  color: var(--c-brand);
  font-weight: 800;
  flex-shrink: 0;
}

.calc-chip {
  background: var(--c-surface-sunk);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3-5);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--c-muted-strong);
  cursor: pointer;
  transition:
    background var(--ease),
    color var(--ease);
  min-height: 2.75rem;
}

.calc-chip:hover {
  background: var(--c-brand-tint);
  color: var(--c-brand);
}

.calc-continue {
  width: 100%;
  background: var(--c-brand);
  color: var(--c-surface);
  border: none;
  font-weight: 700;
  font-size: var(--text-md);
  padding: var(--space-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--ease);
  min-height: 2.75rem;
}

.calc-continue:hover {
  background: var(--c-brand-dark);
}

/* Eight state codes. auto-fit rather than a hard 4-column grid so they land
   4x2 on desktop and 2x4 on a narrow phone without a media query. */
.calc-regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(4.5rem, 100%), 1fr));
  gap: var(--space-2-5);
}

.calc-region {
  background: var(--c-surface);
  border: var(--hairline-strong) solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--c-ink);
  cursor: pointer;
  transition:
    border-color var(--ease),
    background var(--ease);
  min-height: 2.75rem;
}

.calc-region:hover {
  border-color: var(--c-brand);
  background: var(--c-brand-wash);
}

.calc-back {
  background: none;
  border: none;
  color: var(--c-brand);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}

.calc-area-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.calc-area-input {
  flex: 1;
  border: var(--hairline-strong) solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4-5);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--c-ink);
  outline: none;
  width: 100%;
  min-height: 2.75rem;
}

.calc-area-input:focus {
  border-color: var(--c-brand);
}

.calc-area-unit {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--c-faint);
}

.calc-result-label {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-brand);
  margin-bottom: var(--space-3);
}

.calc-result-range {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  /* Long currency ranges must not push the panel wider than the screen. */
  overflow-wrap: break-word;
}

.calc-result-rate {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--c-muted);
  margin-bottom: var(--space-5);
}

.calc-result-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5-5);
}

.calc-result-chip {
  background: var(--c-surface-sunk);
  border-radius: var(--radius-pill);
  padding: var(--space-1-5) var(--space-3-5);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--c-muted-strong);
}

.calc-disclaimer {
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4-5);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--c-faint);
  margin-bottom: var(--space-5-5);
}

.calc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
}

.calc-refine {
  flex: 1;
  min-width: min(12.5rem, 100%);
  background: var(--c-brand);
  color: var(--c-surface);
  border: none;
  font-weight: 700;
  font-size: var(--text-md);
  padding: var(--space-4) var(--space-5-5);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--ease);
  min-height: 2.75rem;
}

.calc-refine:hover {
  background: var(--c-brand-dark);
}

.calc-restart {
  background: var(--c-surface);
  color: var(--c-ink);
  border: var(--hairline) solid var(--c-line-strong);
  font-weight: 700;
  font-size: var(--text-md);
  padding: var(--space-4) var(--space-5-5);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--ease);
  min-height: 2.75rem;
}

.calc-restart:hover {
  border-color: var(--c-brand);
}

/* ===========================================================================
   14. Home - responsive adjustments
   ======================================================================== */

/* Tablet and below: the sticky hero has far less room, so trim the scroll
   distance and drop the furniture that competes with the copy. */
@media (max-width: 57.5rem) {
  .sequence {
    --seq-h: 300vh;
  }

  .scroll-cue {
    display: none !important;
  }
}

@media (max-width: 48rem) {
  .sequence {
    --seq-h: 240vh;
  }

  .hero {
    align-items: flex-start;
    padding-top: calc(var(--nav-h) + var(--space-6));
  }

  .sequence-hud {
    justify-content: center;
    bottom: var(--space-4);
    gap: var(--space-3);
  }

  /* The scrub bar duplicates the milestone dots; on a phone the dots alone
     are the clearer signal and the bar only costs width. */
  .hud-progress .progress-track {
    display: none;
  }

  .milestones {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .milestones::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 30rem) {
  .sequence {
    --seq-h: 200vh;
  }

  .milestone-rule {
    width: 0.75rem;
  }

  .stat-cell {
    padding: var(--space-4) var(--space-4-5);
  }
}

/* Short landscape phones: the sticky stage has almost no vertical room, so
   let the hero copy scroll inside itself rather than clipping. */
@media (max-height: 30rem) and (orientation: landscape) {
  .hero {
    padding-block: calc(var(--nav-h) + var(--space-2)) var(--space-4);
  }

  .hero-copy {
    max-height: calc(100svh - var(--nav-h) - var(--space-6));
  }

  .sequence-hud {
    display: none;
  }
}

/* Wide screens on the desktop scrim: restore the horizontal wash so the
   render is visible to the right of the copy. */
@media (min-width: 48rem) {
  .sequence-scrim {
    background: linear-gradient(
      90deg,
      rgba(247, 246, 242, 0.96) 0%,
      rgba(247, 246, 242, 0.9) 21.25rem,
      rgba(247, 246, 242, 0.85) 35rem,
      rgba(247, 246, 242, 0) min(55rem, 68%)
    );
  }
}

/* ===========================================================================
   15. Detailed calculator - wizard shell
   ======================================================================== */

.wizard-page {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--section-y-sm)) var(--gutter) var(--space-20);
}

.wizard-intro {
  margin-bottom: var(--space-7);
}

.wizard-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-lg);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2-5);
  text-wrap: balance;
}

.wizard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}

.sidebar-col {
  display: none;
}

.mobile-progress {
  display: block;
  margin-bottom: var(--space-5);
}

.mobile-progress-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--c-faint);
  margin-bottom: var(--space-2);
}

.wizard-sticky {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-4));
}

.step-list {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-xl);
  padding: var(--space-3-5);
  margin-bottom: var(--space-3-5);
}

.step-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-2-5);
  text-align: left;
  transition: background var(--ease);
  cursor: not-allowed;
}

.step-row[data-reachable='1'] {
  cursor: pointer;
}

.step-row.is-current {
  background: var(--c-brand-tint);
}

.step-row.is-done:hover,
.step-row[data-reachable='1']:hover {
  background: var(--c-bg);
}

.step-mark {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--c-surface-alt);
  color: var(--c-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-3xs);
  font-weight: 800;
}

.step-row.is-current .step-mark,
.step-row.is-done .step-mark {
  background: var(--c-brand);
  color: var(--c-surface);
}

.step-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--c-faint);
}

.step-row.is-current .step-label {
  color: var(--c-ink);
}

.step-row.is-done .step-label {
  color: var(--c-muted-strong);
}

.running-box {
  display: none;
  background: var(--c-brand-deep);
  border-radius: var(--radius-xl);
  padding: var(--space-4-5) var(--space-5);
  color: var(--c-surface);
}

.running-label {
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-brand-light);
  margin-bottom: var(--space-2);
}

.running-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-slight);
  line-height: 1.3;
  overflow-wrap: break-word;
}

.running-rate {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--c-brand-pale);
  margin-top: var(--space-1-5);
}

.wizard-panel {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-3xl);
  padding: clamp(1.375rem, 3.5vw, 2.375rem);
  /* Without this a grid item refuses to shrink below its content, which is
     how a wide table inside the wizard would push the page sideways. */
  min-width: 0;
}

.wizard-step-num {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-faint);
  margin-bottom: var(--space-1-5);
}

.wizard-step-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-sm);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-1-5);
}

.wizard-step-sub {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--c-faint);
  margin-bottom: var(--space-6-5);
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6-5);
  flex-wrap: wrap;
}

.wizard-err {
  background: #f5ebda;
  color: #8a6220;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-top: var(--space-4-5);
}

/* ===========================================================================
   16. Detailed calculator - questions
   ======================================================================== */

.question {
  margin-bottom: var(--space-6-5);
}

.question-label {
  font-weight: 800;
  font-size: var(--text-md);
  margin-bottom: var(--space-1);
}

.question-sub {
  font-size: var(--text-xs);
  color: var(--c-faint);
  margin-bottom: var(--space-2-5);
}

.question-spacer {
  height: var(--space-2);
}

.opt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13.125rem, 100%), 1fr));
  gap: var(--space-2-5);
}

.opt-btn {
  text-align: left;
  background: var(--c-surface);
  border: var(--hairline-strong) solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--space-3-5) var(--space-4);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2-5);
  transition:
    border-color var(--ease),
    background var(--ease);
  width: 100%;
  min-height: 2.75rem;
}

.opt-btn:hover {
  border-color: var(--c-brand);
}

.opt-btn.is-active {
  background: var(--c-brand-wash);
  border-color: var(--c-brand);
}

.opt-label {
  display: block;
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--c-ink);
}

.opt-desc {
  display: block;
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--c-faint);
  margin-top: 0.1875rem;
}

.opt-mark {
  color: var(--c-brand);
  font-weight: 800;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip-btn {
  background: var(--c-surface-sunk);
  color: var(--c-muted-strong);
  border: var(--hairline-strong) solid var(--c-surface-sunk);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition:
    background var(--ease),
    color var(--ease),
    border-color var(--ease);
  min-height: 2.75rem;
}

.chip-btn:hover {
  border-color: var(--c-brand);
}

.chip-btn.is-active {
  background: var(--c-brand);
  color: var(--c-surface);
  border-color: var(--c-brand);
}

.num-row {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  max-width: 21.25rem;
}

.field-num {
  flex: 1;
  font-size: max(var(--text-lg), 1rem);
  font-weight: 800;
}

.field-unit {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--c-faint);
  white-space: nowrap;
}

.field-text {
  max-width: 26.25rem;
}

/* ===========================================================================
   17. Detailed calculator - estimate output
   ======================================================================== */

.est-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2-5);
  margin-bottom: var(--space-3-5);
}

.est-confidence {
  background: #f5ebda;
  color: #8a6220;
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-pill);
}

.est-rateset {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--c-faint);
}

.est-range {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1-5);
  overflow-wrap: break-word;
}

.est-likely {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--c-muted);
  margin-bottom: var(--space-6);
}

.est-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16.25rem, 100%), 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.est-panel {
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  min-width: 0;
}

.est-panel-title {
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-faint);
  margin-bottom: var(--space-3);
}

.driver-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-1-5) 0;
  border-bottom: var(--hairline) solid var(--c-surface-sunk);
  font-size: var(--text-xs);
}

.driver-label {
  color: var(--c-muted-strong);
  font-weight: 600;
}

.driver-value {
  font-weight: 800;
  color: var(--c-brand);
  white-space: nowrap;
}

.element {
  margin-bottom: var(--space-2-5);
}

.element-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-2xs);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.element-name {
  color: var(--c-muted-strong);
}

.element-track {
  height: 0.4375rem;
  background: var(--c-brand-track);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.element-fill {
  height: 100%;
  background: var(--c-brand);
  border-radius: var(--radius-pill);
}

.note-box {
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4-5);
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--c-faint);
}

.note-box + .note-box {
  margin-top: var(--space-2);
}

.note-box strong {
  color: var(--c-muted);
}

.est-empty {
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
}

.est-empty-sub {
  margin-bottom: var(--space-4);
}

/* ===========================================================================
   18. Detailed calculator - details, links, summary
   ======================================================================== */

.consent-box {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--c-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-4-5);
  cursor: pointer;
  margin-bottom: var(--space-2-5);
}

.consent-box input[type='checkbox'] {
  margin-top: 0.1875rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--c-brand);
  cursor: pointer;
  flex-shrink: 0;
}

.consent-text {
  font-size: var(--text-xs);
  line-height: var(--leading-body);
  color: var(--c-muted);
}

.link-intro {
  background: var(--c-brand-wash);
  border: var(--hairline) solid var(--c-brand-line);
  border-radius: var(--radius-2xl);
  padding: var(--space-4-5) var(--space-5);
  margin-bottom: var(--space-5);
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.link-url {
  flex: 2;
  min-width: min(12.5rem, 100%);
}

.link-note {
  flex: 1;
  min-width: min(8.75rem, 100%);
}

.link-item {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-3-5);
  margin-bottom: var(--space-2);
}

.link-item-text {
  flex: 1;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--c-muted-strong);
  overflow-wrap: anywhere;
}

.add-link-btn {
  background: var(--c-surface);
  color: var(--c-brand);
  border: var(--hairline-strong) solid var(--c-brand);
  font-weight: 800;
  font-size: var(--text-xs);
  padding: var(--space-2-5) var(--space-4-5);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--ease);
  min-height: 2.75rem;
}

.add-link-btn:hover {
  background: var(--c-brand-wash);
}

.browse-btn {
  background: var(--c-brand);
  color: var(--c-surface);
  border: none;
  font-weight: 700;
  font-size: var(--text-xs);
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--ease);
  min-height: 2.75rem;
}

.browse-btn:hover {
  background: var(--c-brand-dark);
}

.remove-x {
  background: none;
  border: none;
  color: var(--c-faint);
  font-size: var(--text-lg);
  font-weight: 800;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  min-width: 2.75rem;
  min-height: 2.75rem;
  flex-shrink: 0;
}

.remove-x:hover {
  color: var(--c-warn-ink);
}

.summary-group {
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-2xl);
  padding: var(--space-4-5) var(--space-5);
  margin-bottom: var(--space-3);
  min-width: 0;
}

.summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.summary-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-1-5) 0;
  border-top: var(--hairline) solid var(--c-surface-sunk);
  font-size: var(--text-xs);
}

.summary-key {
  color: var(--c-faint);
  flex-shrink: 0;
}

.summary-value {
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
}

.link-error {
  background: var(--c-error-bg);
  color: var(--c-error-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: 700;
  margin-bottom: var(--space-2-5);
}

/* ===========================================================================
   19. Detailed calculator - confirmation
   ======================================================================== */

.done-page {
  max-width: var(--wrap-text);
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--section-y-sm)) var(--gutter) var(--space-20);
}

.done-card {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-3xl);
  padding: var(--panel-pad);
  text-align: center;
  margin-bottom: var(--space-5);
}

.done-mark {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--c-brand-tint);
  color: var(--c-brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-4xl);
  font-weight: 800;
  margin: 0 auto var(--space-4-5);
}

.done-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-2);
}

.done-ref {
  font-size: var(--text-sm);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  color: var(--c-brand);
  margin-bottom: var(--space-4);
  overflow-wrap: anywhere;
}

.done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2-5);
  justify-content: center;
}

.done-estimate {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-3xl);
  padding: var(--card-pad);
  margin-bottom: var(--space-5);
}

/* ===========================================================================
   20. Detailed calculator - responsive
   ======================================================================== */

/* The step sidebar only earns its column once there is room for it beside a
   readable wizard panel. Below that the mobile progress bar carries the same
   information in a fraction of the space. */
@media (min-width: 63.75rem) {
  .sidebar-col {
    display: block;
  }

  .mobile-progress {
    display: none;
  }

  .wizard-grid {
    grid-template-columns: 15.625rem 1fr;
  }
}

@media (max-width: 30rem) {
  /* A two-button row at 390px leaves each button too narrow to read; stack
     them and let Next sit first under the thumb. */
  .wizard-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .wizard-nav > * {
    width: 100%;
  }

  .num-row {
    max-width: none;
  }
}

@media print {
  .site-nav,
  .mobile-menu,
  [data-noprint] {
    display: none !important;
  }

  .wizard-page,
  .done-page {
    padding-top: 0;
  }

  body {
    background: #ffffff;
  }
}

/* ===========================================================================
   21. Projects
   ======================================================================== */

.page-head {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--section-y-sm)) var(--gutter) var(--space-10);
}

.page-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-2xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-3-5);
  max-width: 20ch;
  text-wrap: balance;
}

.page-body {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  padding: var(--space-2) var(--gutter) var(--space-24);
}

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9.375rem, 100%), 1fr));
  gap: var(--space-3-5);
  margin-top: var(--space-9);
}

.stat-tile {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-2xl);
  padding: var(--space-4-5) var(--space-5);
}

/* The grid renders one tile per evidenced claim, so a lone tile is a normal
   state, not an edge case. Its 1fr track is the full page width — cap it so it
   reads as a stat rather than a banner. */
.stat-tile:only-child {
  max-width: 20rem;
}

.stat-tile-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-snug);
  color: var(--c-brand);
}

.stat-tile-key {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--c-faint);
  margin-top: 0.1875rem;
  line-height: var(--leading-normal);
}

/* Sticky filter bar. It sits directly under the fixed nav, so its offset has
   to be the nav height rather than a fixed number. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6-5);
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: var(--c-bg);
  padding: var(--space-3-5) 0;
}

.cat-pill {
  background: var(--c-surface);
  color: var(--c-muted-strong);
  border: var(--hairline-strong) solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: var(--space-2-5) var(--space-4-5);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  transition:
    background var(--ease),
    color var(--ease),
    border-color var(--ease);
  min-height: 2.75rem;
}

.cat-pill:hover {
  border-color: var(--c-brand);
}

.cat-pill.is-active {
  background: var(--c-brand);
  color: var(--c-surface);
  border-color: var(--c-brand);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-5);
}

.project-card {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--ease),
    box-shadow var(--ease);
}

.project-card:hover {
  transform: translateY(-0.1875rem);
  box-shadow: var(--shadow-card);
}

.project-media {
  position: relative;
  /* Aspect ratio rather than a fixed height, so the image band keeps its
     proportion as the card width changes across the grid. 16/9 matches the
     1600x900 renders exactly: at 16/10 object-fit:cover was scaling each one
     up to fill the shorter box and cropping about 11% off the width, so the
     edges of every composition were being cut. */
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  overflow: hidden;
}

.project-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(13, 63, 54, 0.92);
  color: var(--c-surface);
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.project-body {
  padding: var(--space-5) var(--space-5-5) var(--space-5-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  flex: 1;
}

.project-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-slight);
  line-height: 1.25;
}

.project-location {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--c-faint);
  margin-top: 0.1875rem;
}

.project-desc {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--c-muted);
}

.project-services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1-5);
}

.service-tag {
  background: var(--c-surface-sunk);
  color: var(--c-muted-strong);
  font-size: var(--text-3xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}

.project-facts {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  border-top: var(--hairline) solid var(--c-surface-sunk);
  padding-top: var(--space-3);
  margin-top: auto;
}

.fact-key {
  display: block;
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  color: var(--c-faint);
}

.fact-value {
  font-weight: 800;
  font-size: var(--text-sm);
}

.img-placeholder {
  position: absolute;
  inset: 0;
  background: var(--c-surface-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--c-placeholder);
  text-align: center;
  padding: var(--space-2-5);
}

.img-placeholder svg {
  width: 1.875rem;
  height: 1.875rem;
  opacity: 0.55;
}

.img-placeholder span {
  font-size: var(--text-3xs);
  font-weight: 700;
  color: var(--c-placeholder);
  max-width: 85%;
  line-height: var(--leading-normal);
}

/* ---- full register ---- */

.register-block {
  margin-top: var(--space-9);
}

.register-head {
  display: flex;
  align-items: center;
  gap: var(--space-3-5);
  margin-bottom: var(--space-2-5);
}

.register-period {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
}

.register-rule {
  flex: 1;
  height: var(--hairline);
  background: var(--c-line);
}

.register-count {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--c-faint);
  white-space: nowrap;
}

/* Two columns only when each can be at least 26.25rem wide; below that the
   list collapses to one column on its own. */
.register-cols {
  columns: 2 26.25rem;
  column-gap: var(--space-11);
}

.register-item {
  break-inside: avoid;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3-5);
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--c-surface-alt);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.register-name {
  font-weight: 800;
  color: var(--c-ink);
}

.register-desc {
  color: var(--c-faint);
  font-weight: 600;
}

.cta-banner {
  background: var(--c-brand-deep);
  border-radius: var(--radius-3xl);
  padding: var(--panel-pad);
  margin-top: var(--space-14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.cta-banner-copy {
  color: var(--c-surface);
  max-width: 52ch;
}

.cta-banner-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-sm);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-2);
}

.cta-link {
  background: var(--c-surface);
  color: var(--c-brand-deep);
  font-weight: 800;
  font-size: var(--text-md);
  padding: var(--space-4) var(--space-6-5);
  border-radius: var(--radius-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--ease);
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.cta-link:hover {
  transform: translateY(-0.125rem);
  color: var(--c-brand-deep);
  text-decoration: none;
}

@media (max-width: 30rem) {
  .cta-link {
    width: 100%;
    justify-content: center;
  }

  /* Three fact columns at 390px squeeze each to about eight characters.
     Wrapping them keeps the labels readable. */
  .project-facts {
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}

/* ===========================================================================
   22. Resources
   ======================================================================== */

.featured-card {
  background: var(--c-brand-deep);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  margin-bottom: var(--space-7);
  text-decoration: none;
}

.featured-card:hover {
  text-decoration: none;
}

.featured-copy {
  padding: var(--panel-pad);
  color: var(--c-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-3-5);
  justify-content: center;
}

.featured-meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
}

.featured-tag {
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-brand-light);
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-pill);
}

.featured-date {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--c-brand-pale);
}

.featured-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-md);
  letter-spacing: var(--tracking-snug);
  line-height: 1.15;
  text-wrap: balance;
}

.featured-excerpt {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--c-brand-pale);
  max-width: 56ch;
}

.featured-cta {
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--c-brand-light);
}

.featured-media {
  position: relative;
  min-height: 16.25rem;
  overflow: hidden;
}

.item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: var(--space-5);
}

.item-card {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--c-ink);
  transition:
    transform var(--ease),
    box-shadow var(--ease);
}

.item-card:hover {
  transform: translateY(-0.1875rem);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--c-ink);
}

.item-media {
  position: relative;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  overflow: hidden;
}

.resource-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.item-card:hover .resource-image,
.featured-card:hover .resource-image {
  transform: scale(1.025);
}

.item-tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.item-body {
  padding: var(--space-5) var(--space-5-5) var(--space-5-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  flex: 1;
}

.item-meta {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--c-faint);
}

.item-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-slight);
  line-height: 1.3;
  text-wrap: balance;
}

.item-excerpt {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--c-muted);
  flex: 1;
}

.item-result {
  background: var(--c-brand-wash);
  border-radius: var(--radius-md);
  padding: var(--space-2-5) var(--space-3-5);
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--c-brand);
}

.item-cta {
  font-weight: 800;
  font-size: var(--text-xs);
  color: var(--c-brand);
}

/* ---- newsletter ---- */

.newsletter {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-3xl);
  padding: clamp(1.625rem, 4vw, 2.5rem);
  margin-top: var(--space-11);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.newsletter-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1875rem, 2.2vw, 1.5625rem);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--space-1-5);
}

.sub-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  max-width: 44ch;
}

.sub-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.sub-input {
  border: var(--hairline-strong) solid var(--c-line);
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  /* Held at 1rem so focusing it never triggers the iOS zoom-on-focus. */
  font-size: max(var(--text-sm), 1rem);
  font-weight: 600;
  outline: none;
  flex: 1;
  min-width: min(14.375rem, 100%);
  min-height: 2.75rem;
}

.sub-input:focus {
  border-color: var(--c-brand);
}

.sub-btn {
  background: var(--c-brand);
  color: var(--c-surface);
  border: none;
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--ease);
  min-height: 2.75rem;
}

.sub-btn:hover {
  background: var(--c-brand-dark);
}

.sub-consent {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  cursor: pointer;
}

.sub-consent input[type='checkbox'] {
  margin-top: 0.125rem;
  width: 0.9375rem;
  height: 0.9375rem;
  accent-color: var(--c-brand);
  flex-shrink: 0;
}

.sub-consent-text {
  font-size: var(--text-2xs);
  line-height: 1.55;
  color: var(--c-faint);
}

.sub-done {
  background: var(--c-brand-tint);
  color: var(--c-brand);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-3-5) var(--space-5);
  border-radius: var(--radius-lg);
  max-width: 42ch;
  line-height: var(--leading-body);
}

/* The featured card only splits into copy + image once there is room for the
   image to be worth showing. */
@media (min-width: 55rem) {
  .featured-card {
    grid-template-columns: 1.2fr 1fr;
  }
}

@media (max-width: 30rem) {
  .sub-row {
    flex-direction: column;
  }

  .sub-btn {
    width: 100%;
  }
}

/* ===========================================================================
   23. Article
   ======================================================================== */

.article-head {
  max-width: var(--wrap-text);
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--space-11)) var(--gutter) var(--space-8);
}

.article-body {
  max-width: var(--wrap-text);
  margin-inline: auto;
  padding: 0 var(--gutter) var(--space-10);
}

.article-foot {
  max-width: var(--wrap-narrow);
  margin-inline: auto;
  padding: var(--space-5) var(--gutter) var(--space-24);
}

.article-meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.article-tag {
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-pill);
}

.article-date {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--c-faint);
}

.article-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6875rem, 3.4vw, 2.5rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.12;
  margin-bottom: var(--space-5-5);
  text-wrap: balance;
}

.article-hero {
  position: relative;
  height: clamp(13.75rem, 32vw, 22.5rem);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin-bottom: var(--space-2-5);
}

.fact-panel {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-5-5);
  margin-bottom: var(--space-7);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10.625rem, 100%), 1fr));
  gap: var(--space-3-5);
}

.fact-panel-key {
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-faint);
  margin-bottom: 0.1875rem;
}

.fact-panel-value {
  font-weight: 800;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* ---- long-form blocks ---- */

.article-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
  letter-spacing: -0.015em;
  margin: var(--space-9) 0 var(--space-3);
}

.article-p {
  font-size: var(--text-md);
  line-height: 1.8;
  color: #3b4a4d;
  margin-bottom: var(--space-4-5);
  text-wrap: pretty;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  margin: var(--space-1) 0 var(--space-5-5);
}

.article-li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.article-li-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--c-brand);
  flex-shrink: 0;
  /* Sits on the first line's optical centre, so it tracks the type scale. */
  margin-top: 0.5em;
}

.article-li-text {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: #3b4a4d;
}

.article-quote {
  border-left: 0.1875rem solid var(--c-brand);
  padding: var(--space-1-5) 0 var(--space-1-5) var(--space-5-5);
  margin: var(--space-7) 0;
}

.article-quote-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: var(--tracking-slight);
  color: var(--c-brand-deep);
  text-wrap: pretty;
}

.article-stat {
  background: var(--c-brand-deep);
  border-radius: var(--radius-xl);
  padding: var(--space-6-5) var(--space-7);
  margin: var(--space-7) 0;
  color: var(--c-surface);
}

.article-stat-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.625rem);
  letter-spacing: var(--tracking-snug);
  color: var(--c-brand-light);
  overflow-wrap: break-word;
}

.article-stat-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--c-brand-pale);
  margin-top: var(--space-1);
}

.article-outcome {
  background: var(--c-brand-tint);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-6);
  margin-top: var(--space-2-5);
  display: flex;
  gap: var(--space-3-5);
  align-items: flex-start;
}

.article-outcome-mark {
  width: 1.75rem;
  height: 1.75rem;
  background: var(--c-brand);
  color: var(--c-surface);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.article-outcome-label {
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-brand);
  margin-bottom: 0.1875rem;
}

.article-outcome-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  line-height: 1.45;
  color: var(--c-brand-deep);
}

/* Whose engagement a case study describes. Deliberately legible rather than
   fine print: it qualifies the first-person voice of the narrative below it. */
.article-attribution {
  border-left: 3px solid var(--c-brand);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  background: var(--c-brand-pale, #f4f7f6);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--c-body, inherit);
}

.article-author {
  border-top: var(--hairline) solid var(--c-line);
  margin-top: var(--space-10);
  padding-top: var(--space-3-5);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--c-faint);
}

/* ---- related ---- */

.related-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-2xl);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(18.75rem, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-9);
}

.related-card {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-line);
  border-radius: var(--radius-2xl);
  padding: var(--space-5) var(--space-5-5);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition:
    transform var(--ease),
    box-shadow var(--ease);
}

.related-card:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.625rem 1.625rem rgba(22, 38, 42, 0.08);
  text-decoration: none;
}

.related-tag {
  align-self: flex-start;
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}

.related-card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: 1.35;
  color: var(--c-ink);
  letter-spacing: var(--tracking-slight);
}

.related-meta {
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--c-faint);
}

.article-state {
  max-width: var(--wrap-text);
  margin-inline: auto;
  padding: calc(var(--nav-h) + var(--space-20)) var(--gutter);
  text-align: center;
}

/* ===========================================================================
   24. About
   Appended as a new section rather than slotted in beside Projects, so the
   existing section numbering stays stable. Everything else on about.html is
   built from components already defined above — panel-flat, process-card,
   service-card, stat-tiles, article-p, article-quote, assurance and
   cta-banner. Only the practice panel and the career timeline are new.
   ======================================================================== */

/* Practice-at-a-glance rail beside the narrative. An explicit two-track ratio
   rather than .split's auto-fit: the rail holds short key/value pairs and must
   not grow to half the panel on a wide screen, while the narrative needs the
   remaining width to keep a readable measure. */
.about-profile {
  display: grid;
  grid-template-columns: minmax(min(14rem, 100%), 16rem) minmax(0, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

@media (max-width: 48rem) {
  .about-profile {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, the rail reads as a summary of what follows, so it wants less
     air between it and the narrative than the desktop column gap gives. */
  .about-facts {
    margin-bottom: calc(var(--space-4) - var(--grid-gap));
  }
}

.about-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-4-5);
}

.about-fact {
  border-left: 0.1875rem solid var(--c-brand-line);
  padding-left: var(--space-3-5);
}

.about-fact-key {
  font-size: var(--text-3xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--c-faint);
  margin-bottom: var(--space-1);
}

.about-fact-value {
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-normal);
  color: var(--c-muted-strong);
}

.about-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--display-md);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-6);
  max-width: 22ch;
}

/* The opening paragraph carries the argument of the whole page, so it is set a
   step larger than the rest. */
.about-profile-copy .article-p:first-of-type {
  font-size: var(--text-lg);
  color: var(--c-muted-strong);
}

/* ---- career timeline ---- */

.era-list {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
}

/* The connecting rule is a left border on the row rather than a pseudo-element
   spine, so it stops exactly at the last row without needing to know which row
   that is. The dot sits on the border with a negative offset. */
.era {
  display: grid;
  grid-template-columns: minmax(min(8rem, 100%), 9.5rem) minmax(0, 1fr);
  gap: var(--space-6);
  border-left: var(--hairline-strong) solid var(--c-brand-line);
  padding: 0 0 var(--space-8) var(--space-7);
  position: relative;
}

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

.era::before {
  content: '';
  position: absolute;
  left: calc(var(--hairline-strong) * -1 - 0.28125rem);
  top: 0.4375rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--c-brand);
}

.era-period {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--c-brand);
  letter-spacing: var(--tracking-slight);
  padding-top: 0.0625rem;
}

.era-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-slight);
  margin-bottom: var(--space-2);
}

.era-desc {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--c-muted);
  max-width: 62ch;
}

@media (max-width: 48rem) {
  .era {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    padding-left: var(--space-5);
  }
}

/* The assurance row was built for the dark .section-deep panel on the home
   page: .tick is pale green on a translucent wash and .assurance-label is
   --c-brand-paler. Both are close to invisible on this page's light
   background, so the standards list re-tones them rather than forking the
   component. Scoped to .about-standards so the home page is untouched.
   Also switched to top alignment: these labels run to a full sentence, and a
   centred tick on a four-line label floats in the middle of the paragraph. */
.about-standards .assurance {
  align-items: flex-start;
}

.about-standards .tick {
  background: var(--c-brand-tint);
  color: var(--c-brand);
  margin-top: 0.125rem;
}

.about-standards .assurance-label {
  color: var(--c-muted-strong);
  line-height: var(--leading-body);
  max-width: 76ch;
}

/* Four cards in the shared 3-column grid leaves a lone card on a second row.
   A wider minimum resolves it to a balanced 2x2 on desktop, and the cards
   carry enough copy to earn the extra width. Still collapses to one column on
   a phone through the same min() guard as every other grid here. */
.about-principles {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}