/*
  National Debt Consultants — Design System
  =========================================
  PALETTE NOTE:
  --color-gold-* (the brand colour is yellow, not metallic gold — the
  token name is kept only because it's already used throughout this file)
  and --color-charcoal-* are sampled directly from the official NDC logo
  artwork (assets/img/ndc-logo-master.png, a 1254x1254 source) — gold-500
  is the logo's own yellow, charcoal-900 is the logo's own dark navy
  background. The 100/300/600/700 yellow steps and the 800/700 charcoal
  steps are a tonal ramp built from that sampled hue (same hue/saturation,
  varied lightness), with gold-600/700 darkened enough to keep WCAG AA
  text contrast on light backgrounds. --color-slate-* is a complementary
  dark blue-grey used for secondary dark surfaces; it isn't present as a
  separate tone in the logo, so it hasn't been changed.
*/

/* Metric-matched fallback for Manrope.
   Manrope loads from Google Fonts with display=swap, so the first paint
   uses a local sans and the page re-wraps when Manrope arrives. Measured
   on the homepage as a layout shift of 0.078 with the hero on screen.
   These faces give the local fallback Manrope's measured metrics, per
   weight (canvas measurement in Chromium against the loaded font, width
   of a long mixed sentence vs Arial / Arial Bold; ascent 107% and
   descent 30% of the em), so text wraps and sits in the same place
   before and after the swap. Widths that were declared in ch have been
   converted to em (see .hero h1, .hero__note, --measure): ch is the
   width of the zero glyph, which no size-adjust can match across fonts.
   local() names cover Windows/macOS (Arial) and Linux (Liberation Sans,
   metrically identical); elsewhere the stack falls through unadjusted. */
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Helvetica Neue"), local("Helvetica");
  font-weight: 100 450; size-adjust: 102.39%; ascent-override: 107%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Helvetica Neue"), local("Helvetica");
  font-weight: 451 550; size-adjust: 104.18%; ascent-override: 107%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold");
  font-weight: 551 650; size-adjust: 98.64%; ascent-override: 107%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold");
  font-weight: 651 750; size-adjust: 100.28%; ascent-override: 107%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Neue Bold"), local("Helvetica Bold");
  font-weight: 751 900; size-adjust: 101.94%; ascent-override: 107%; descent-override: 30%; line-gap-override: 0%; }

:root {
  /* ---- Brand colour tokens (sampled from the official logo) ---- */
  --color-gold-100: #FCF7E3;
  --color-gold-300: #FBDE6A;
  --color-gold-500: #F7C707; /* primary brand yellow — sampled from logo */
  --color-gold-600: #8B7004; /* yellow text-safe on light backgrounds */
  --color-gold-700: #635003;

  --color-charcoal-900: #09161D; /* deep navy-charcoal — sampled from logo background */
  --color-charcoal-800: #112631;
  --color-charcoal-700: #1D3B4B;

  --color-slate-900: #202A33; /* dark blue-grey — no longer a page surface; see --surface-dark */
  --color-slate-800: #2B3944;
  --color-slate-700: #3E4E5A;

  --color-white: #FFFFFF;
  --color-neutral-50: #FAF9F6;  /* soft neutral background */
  --color-neutral-100: #F2F0EA;
  --color-neutral-200: #E6E2D8;
  --color-neutral-300: #D6D1C3;
  --color-neutral-500: #8A8477;
  --color-neutral-600: #635E52;
  --color-neutral-700: #4A463D;

  --color-ink: #201E1A;         /* body text on light backgrounds */
  --color-ink-soft: #4A463D;    /* secondary text on light backgrounds */
  --color-on-dark: #F4F1E9;     /* body text on dark backgrounds */
  --color-on-dark-soft: #C7C2B4;/* secondary text on dark backgrounds */

  /* Status colours — chosen/tested for WCAG AA text contrast on white */
  --color-success-ink: #1E6B4F;
  --color-success-bg: #EAF5EF;
  --color-warning-ink: #8A5A00;
  --color-warning-bg: #FCF3DE;
  --color-danger-ink: #9A2B2B;
  --color-danger-bg: #FBEAEA;

  /* ---- Semantic surface/text roles ---- */
  --surface-page: var(--color-neutral-50);
  --surface-card: var(--color-white);
  /* Both dark surfaces resolve to the same charcoal, deliberately. This is
     the exact colour sampled from the logo background and already used by
     the header, the hero, the footer and every page masthead, so a band at
     the old blue-grey read as a mismatch rather than as rhythm.

     The two roles are kept as separate tokens so a future design can
     diverge them again without hunting through markup. Note that on the
     homepage the calculator and "why us" bands sit directly against each
     other and now merge into one continuous block — that was already true
     when both were slate, so it is not a regression, but anything that
     relies on a seam between them must add an explicit divider rather than
     assume a colour change. */
  --surface-dark: var(--color-charcoal-900);
  --surface-dark-alt: var(--color-charcoal-900);
  --border-subtle: var(--color-neutral-300);
  --border-on-dark: rgba(244, 241, 233, 0.18);

  /* ---- Typography ----
     Single family (Manrope) throughout — headings and body are
     differentiated by size/weight, not by a separate display face. */
  --font-display: "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Manrope", "Manrope Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-sm: clamp(0.83rem, 0.8rem + 0.14vw, 0.92rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --fs-md: clamp(1.15rem, 1.08rem + 0.3vw, 1.35rem);
  --fs-lg: clamp(1.4rem, 1.28rem + 0.55vw, 1.85rem);
  --fs-xl: clamp(1.9rem, 1.6rem + 1.3vw, 2.75rem);
  --fs-2xl: clamp(2.3rem, 1.85rem + 2vw, 3.5rem);

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5.5rem;

  /* ---- Shape / elevation ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(27, 26, 24, 0.06), 0 1px 1px rgba(27, 26, 24, 0.04);
  --shadow-md: 0 8px 24px -6px rgba(27, 26, 24, 0.16);
  --shadow-lg: 0 20px 48px -12px rgba(20, 24, 28, 0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 900ms;

  --content-max: 74rem;
  --measure: 37.8em; /* was 62ch; em so the fallback font gets the same box — see @font-face note */
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  /* Reserve the scrollbar gutter permanently. The mobile menu sets
     overflow:hidden on <html>, which removes the scrollbar and would
     otherwise widen the viewport and jog the header and all centred
     content sideways at the moment the menu opens. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}
/* Any in-page anchor target (e.g. #callback-form, #how-it-works) needs
   enough top margin to clear the sticky header, or the header would
   otherwise cover the first part of the section when jumped to. */
/* Must clear the sticky header, which is now a known constant height:
   64px logo + 2 * 0.75rem padding + 1px border ~= 89px mobile,
   96px logo + the same ~= 121px from 62rem up. A little slack on top so
   a heading never lands flush against the header edge. */
[id], .calc-step h2 { scroll-margin-top: 100px; }
/* .calc-step h2 is included because calculator.js focuses it on every
   step change, and a focus scroll honours scroll-margin the same way an
   anchor jump does — without it each step's heading landed under the
   sticky header. */
@media (min-width: 62rem) {
  [id], .calc-step h2 { scroll-margin-top: 132px; }
}
body {
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background: var(--surface-page);
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
ul[class], ol[class] { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: var(--fs-lg); font-weight: 700; }
h4 { font-size: var(--fs-md); font-weight: 600; }
p { max-width: var(--measure); }
p + p { margin-top: var(--space-sm); }

:focus-visible {
  outline: 3px solid var(--color-gold-600);
  outline-offset: 3px;
  border-radius: 4px;
}
.surface-dark :focus-visible,
.btn-gold:focus-visible {
  outline-color: var(--color-gold-300);
}

/* ============ Layout helpers ============ */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}
.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--space-md); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.grid { display: grid; gap: var(--space-lg); }
@media (min-width: 56rem) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -3.5rem;
  background: var(--color-gold-500);
  color: var(--color-charcoal-900);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-weight: 600;
  z-index: 1000;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-sm); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-600);
}
.surface-dark .eyebrow, .surface-dark-alt .eyebrow { color: var(--color-gold-300); }
.lede {
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  max-width: var(--measure);
}
.surface-dark .lede, .surface-dark-alt .lede { color: var(--color-on-dark-soft); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.85em 1.5em;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-base);
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
  min-height: 48px;
}
.btn:active { transform: translateY(1px); }
.btn-gold {
  background: var(--color-gold-500);
  color: var(--color-charcoal-900);
  box-shadow: var(--shadow-sm);
}
.btn-gold:hover { background: var(--color-gold-300); box-shadow: var(--shadow-md); }
.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-outline:hover { background: rgba(255,255,255,0.08); }
.surface-page .btn-outline, .surface-card .btn-outline { border-color: var(--color-slate-800); }
.surface-page .btn-outline:hover, .surface-card .btn-outline:hover { background: var(--color-neutral-100); }
.btn-ghost {
  background: transparent;
  color: inherit;
  padding-inline: 0.75em;
}
.btn-ghost:hover { text-decoration: underline; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* ============ Header / Nav ============ */
.site-header {
  /* Fully opaque and matched exactly to the logo asset's flattened background
     colour (--color-charcoal-900). A translucent/blurred header would blend
     with whatever scrolls behind it, shifting its rendered colour away from
     the logo's fixed flat fill and re-exposing a visible rectangle. */
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-charcoal-900);
  color: var(--color-on-dark);
  border-bottom: 1px solid var(--border-on-dark);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-xs);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--color-on-dark);
}
/* Logo's native crop is 1031x785 (a stacked mark+wordmark+tagline lockup,
   not a horizontal wordmark) — sized by height so the aspect ratio is
   never distorted; width follows naturally (~1.31:1). The PNG/WebP carries
   a baked-in alpha fade on its own background margins so it blends into
   the header/footer without a visible rectangle. */
/* ONE size per breakpoint, and it never changes on scroll. The header is
   position: sticky, so it sits in normal flow — resizing it resized the
   content above the viewport, the browser's scroll anchoring compensated
   by moving scrollY, and that moved scrollY back across the 24px
   threshold. Measured: 100 state flips in 2.5s with the user's scroll
   completely stationary. Height here is the cause, so height is fixed.
   Width stays auto: the artwork is a 1031x785 stacked lockup and must
   never be squeezed to a fixed width. */
.brand__mark { height: 64px; width: auto; flex-shrink: 0; }
@media (min-width: 62rem) {
  .brand__mark { height: 96px; width: auto; }
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.brand__name small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-on-dark-soft); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-sm);
  color: var(--color-on-dark);
}
.nav-toggle svg { width: 20px; height: 20px; }
.primary-nav {
  display: none;
}
.primary-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.primary-nav a {
  display: block;
  padding: var(--space-xs) var(--space-2xs);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-sm);
  min-height: 44px; display: flex; align-items: center;
}
/* Mobile: the Services group is a labelled list, not a dropdown. */
.nav-menu__btn { display: none; }
.nav-menu__label { display: block; padding: var(--space-xs) var(--space-2xs) var(--space-3xs); font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-on-dark-soft); }
.nav-menu { display: flex; flex-direction: column; gap: var(--space-3xs); padding-left: var(--space-xs); border-left: 2px solid rgba(247, 199, 7, 0.35); margin-left: var(--space-2xs); }
.nav-item--mobile-only a { color: var(--color-on-dark-soft); }
.primary-nav a:hover { background: rgba(244,241,233,0.08); }
.primary-nav a[aria-current="page"] { color: var(--color-gold-300); }
.primary-nav__actions { display: flex; flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-sm); }

/* top was hardcoded to 64px while the header is 89px tall, so the overlay
   started 25px too high and covered part of the header. --header-h is
   measured once by nav.js and on resize; the header no longer changes
   height on scroll, so that value is stable. The literal is a fallback
   for the first paint before the script runs.

   overscroll-behavior stops a scroll gesture that reaches the end of this
   panel from chaining through to the page behind it. */
[data-nav-open="true"] .primary-nav {
  display: block;
  position: fixed;
  inset: 0;
  top: var(--header-h, 89px);
  background: var(--color-charcoal-900);
  padding: var(--space-md);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 64rem (1024px). With the primary nav trimmed to seven items it fits on
   one row at 1024px with 74px clear of the logo (measured; eight items
   needed 1104px and wrapped below that). The burger still takes over
   before the nav can wrap. .mobile-actions and the chat launcher below
   use the same width so "mobile layout" means one thing everywhere. */
@media (min-width: 64rem) {
  .nav-toggle { display: none; }
  /* flex, not block: with block the actions div stacked under the list
     and the yellow button wrapped onto a second row, making the header
     needlessly tall. */
  .primary-nav { display: flex; align-items: center; gap: var(--space-sm); }
  .primary-nav__list { flex-direction: row; align-items: center; gap: var(--space-3xs); flex-wrap: nowrap; }
  .primary-nav__list a, .nav-menu__btn { font-size: 0.95rem; }
  .primary-nav a { padding: var(--space-2xs) var(--space-xs); }
  .primary-nav__actions { flex-direction: row; margin-top: 0; margin-left: var(--space-2xs); }
  .primary-nav__actions .btn { padding-block: 0.6em; }
  .nav-item--mobile-only { display: none; }
  [data-nav-open] .primary-nav { position: static; inset: auto; top: auto; padding: 0; background: transparent; overflow: visible; }

  /* Services dropdown */
  .nav-item--menu { position: relative; }
  .nav-menu__label { display: none; }
  .nav-menu__btn {
    display: inline-flex; align-items: center; gap: 0.3em;
    font: inherit; font-weight: 500; color: inherit;
    background: transparent; border: 0; border-radius: var(--radius-sm);
    padding: var(--space-2xs) var(--space-xs); cursor: pointer;
    position: relative;
  }
  .nav-menu__btn::after {
    content: ""; position: absolute; left: var(--space-xs); right: var(--space-xs); bottom: 0.35em; height: 2px;
    background: var(--color-gold-500); border-radius: 1px; transform: scaleX(0); transform-origin: left;
    transition: transform 260ms var(--ease-out-soft);
  }
  .nav-item--menu:hover .nav-menu__btn::after,
  .nav-menu__btn:focus-visible::after,
  .nav-item--menu[data-current="true"] .nav-menu__btn::after { transform: scaleX(1); }
  .nav-item--menu[data-current="true"] .nav-menu__btn { color: var(--color-gold-300); }
  .nav-menu__chev { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-out-soft); }
  .nav-item--menu[data-open="true"] .nav-menu__chev, .nav-item--menu:hover .nav-menu__chev { transform: rotate(180deg); }
  .nav-menu {
    position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 15rem; padding: var(--space-3xs);
    background: var(--surface-card); color: var(--color-ink);
    border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out-soft), transform var(--duration-fast) var(--ease-out-soft);
    z-index: 5;
  }
  /* a hover bridge so the pointer can travel from the button to the panel */
  .nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
  .nav-item--menu:hover .nav-menu, .nav-item--menu[data-open="true"] .nav-menu, .nav-item--menu:focus-within .nav-menu {
    opacity: 1; transform: none; pointer-events: auto;
  }
  .nav-menu a { display: block; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); font-weight: 500; color: var(--color-ink); }
  .nav-menu a:hover, .nav-menu a:focus-visible { background: var(--color-neutral-100); color: var(--color-ink); }
  .nav-menu a[aria-current="page"] { color: var(--color-gold-700); font-weight: 600; }
  .nav-menu a::after { display: none; }
}

/* ============ Hero ============ */
/* Hero visual: a small, honest budget card — the thing the calculator
   produces — instead of a second logo. Bars grow once on load; the card
   carries the same pointer depth the logo plate had. */
.hero__visual { position: relative; display: flex; align-items: center; justify-content: center; --tilt-x: 0px; --tilt-y: 0px; }
.budget-card {
  width: min(100%, 26rem);
  background: linear-gradient(160deg, rgba(244,241,233,0.07), rgba(244,241,233,0.03));
  border: 1px solid rgba(244, 241, 233, 0.16);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(247,199,7,0.08) inset;
  color: var(--color-on-dark);
  transform: translate3d(var(--tilt-x), var(--tilt-y), 0);
  transition: transform 500ms var(--ease-out-soft);
}
.budget-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--space-sm); }
.budget-card__rows { display: grid; gap: var(--space-xs); }
.budget-card__rows li { display: grid; grid-template-columns: 6.2rem 1fr auto; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); }
.budget-card__k { color: var(--color-on-dark-soft); }
.budget-card__v { font-variant-numeric: tabular-nums; font-weight: 600; }
.budget-card__bar { display: block; height: 10px; border-radius: 999px; background: rgba(244,241,233,0.1); overflow: hidden; }
.budget-card__bar i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: var(--color-gold-500); transform-origin: left; }
.budget-card__bar--alert i { background: #E5533D; }
.budget-card__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid rgba(244,241,233,0.14); font-size: var(--fs-sm); color: var(--color-on-dark-soft); }
.budget-card__foot strong { font-family: var(--font-display); font-size: var(--fs-lg); color: #FF8A73; }
.budget-card__hint { margin-top: var(--space-2xs); font-size: 0.72rem; color: var(--color-on-dark-soft); opacity: 0.8; }
.js-motion .budget-card__bar i { transform: scaleX(0); animation: budget-grow 900ms var(--ease-out-soft) forwards; }
.js-motion .budget-card__rows li:nth-child(1) i { animation-delay: 420ms; }
.js-motion .budget-card__rows li:nth-child(2) i { animation-delay: 560ms; }
.js-motion .budget-card__rows li:nth-child(3) i { animation-delay: 700ms; }
@keyframes budget-grow { to { transform: scaleX(1); } }
.js-motion .hero__visual { opacity: 0; transform: translate3d(0, 14px, 0); animation: hero-enter 760ms var(--ease-out-soft) 260ms forwards; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: 1.15fr 0.85fr; } }
@media (max-width: 61.99rem) { .hero__visual { display: none; } }

.hero {
  /* Flat and matched exactly to the logo asset's own flattened background
     colour. The hero logo image has a large opaque interior baked to
     --color-charcoal-900; a two-stop gradient hero background drifts away
     from that flat colour by the bottom of the image (measured ~18-20
     units per channel toward --color-slate-900), which is exactly what
     produced the visible dark patch there. */
  background: var(--color-charcoal-900);
  color: var(--color-on-dark);
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl) var(--space-xl);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; padding-block: 6rem var(--space-2xl); }
}
.hero h1 { margin-top: var(--space-sm); font-size: clamp(2.3rem, 4.4vw, 3.5rem); text-wrap: balance; }
.hero .lede { margin-top: var(--space-sm); font-size: var(--fs-md); color: var(--color-on-dark-soft); }
.hero__actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__note { margin-top: var(--space-md); font-size: var(--fs-sm); color: var(--color-on-dark-soft); max-width: 25.6em; /* was 42ch */ }

/* ============ Cards / pathways ============ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.pathway-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  height: 100%;
}
.pathway-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-gold-100);
  color: var(--color-gold-700);
  display: inline-flex; align-items: center; justify-content: center;
}
.pathway-card__icon svg { width: 24px; height: 24px; }
.pathway-card a.btn { margin-top: auto; align-self: flex-start; }

.service-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.service-card h3 { font-size: var(--fs-md); }
.service-card__meta { font-size: var(--fs-sm); color: var(--color-neutral-600); }

/* ============ Sections on dark ============ */
.surface-dark { background: var(--surface-dark); color: var(--color-on-dark); }
.surface-dark-alt { background: var(--surface-dark-alt); color: var(--color-on-dark); }
.surface-dark h2, .surface-dark h3, .surface-dark-alt h2, .surface-dark-alt h3 { color: var(--color-on-dark); }
.surface-dark .card, .surface-dark-alt .card {
  background: rgba(244,241,233,0.05);
  border-color: var(--border-on-dark);
  color: var(--color-on-dark);
}

/* ============ Steps / "what happens next" ============ */
.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding-top: var(--space-lg); }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--color-gold-500);
  color: var(--color-charcoal-900);
  font-family: var(--font-display);
  font-weight: 700;
  position: absolute;
  top: 0; left: 0;
}
.step__body { padding-left: var(--space-lg); }

/* ============ FAQ ============ */
.faq-item {
  border-bottom: 1px solid var(--border-subtle);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  font-weight: 600;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { transition: transform var(--duration-fast) var(--ease-standard); flex-shrink: 0; width: 20px; height: 20px; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .faq-answer { padding-bottom: var(--space-md); color: var(--color-ink-soft); max-width: var(--measure); }
.surface-dark .faq-answer, .surface-dark-alt .faq-answer { color: var(--color-on-dark-soft); }

/* ============ Forms ============ */
.field { display: flex; flex-direction: column; gap: var(--space-3xs); margin-bottom: var(--space-md); }
.field label, .field legend {
  font-weight: 600;
  font-size: var(--fs-sm);
}
.field .hint { font-size: var(--fs-sm); color: var(--color-neutral-600); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.75em 0.9em;
  background: var(--color-white);
  min-height: 48px;
  width: 100%;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--color-gold-600);
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] select {
  border-color: var(--color-danger-ink);
}
.field[data-invalid="true"] .currency-input {
  border-color: var(--color-danger-ink);
}
.field .error {
  color: var(--color-danger-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
  display: none;
}
.field[data-invalid="true"] .error { display: block; }
.field .warning {
  color: var(--color-warning-ink);
  background: var(--color-warning-bg);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.4em 0.7em;
  border-radius: var(--radius-sm);
  display: none;
  margin-top: var(--space-3xs);
}
.field[data-warning="true"] .warning { display: block; }
/* Prefix lives in normal flow as a flex sibling of the input, not
   absolutely positioned over it — this is what guarantees the "R" can
   never overlap entered digits, regardless of any other input padding
   rule's specificity. The wrapper (not the bare <input>) owns the
   border/background/radius so focus and error states can be applied
   consistently to the whole R + number group. */
.currency-input {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  min-height: 48px;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.currency-input .prefix {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 0.9em;
  color: var(--color-neutral-600);
  font-weight: 600;
  pointer-events: none;
}
.currency-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: none !important;
  background: transparent;
  padding: 0.75em 0.9em 0.75em 0.35em !important;
  min-height: 0;
}
.currency-input input:focus-visible {
  outline: none;
  border: none !important;
}
.currency-input:focus-within {
  border-color: var(--color-gold-600);
}

fieldset { border: none; padding: 0; margin: 0 0 var(--space-lg); }
fieldset legend { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--space-sm); color: var(--color-ink); }

.consent { display: flex; gap: var(--space-2xs); align-items: flex-start; }
.consent input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.15em; }
.consent label { font-size: var(--fs-sm); font-weight: 400; }

.form-alert {
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-weight: 500;
  margin-bottom: var(--space-md);
}
.form-alert--success { background: var(--color-success-bg); color: var(--color-success-ink); }
.form-alert--error { background: var(--color-danger-bg); color: var(--color-danger-ink); }
.form-alert--info { background: var(--color-gold-100); color: var(--color-gold-700); }

/* ============ Calculator ============ */
.calc-progress { list-style: none; padding: 0; display: flex; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.calc-progress li {
  flex: 1;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-neutral-600);
}
.calc-progress .track { height: 6px; border-radius: var(--radius-pill); background: var(--color-neutral-200); margin-bottom: var(--space-2xs); overflow: hidden; }
.calc-progress .track span { display: block; height: 100%; background: var(--color-neutral-300); border-radius: inherit; }
.calc-progress li[data-state="done"] { color: var(--color-slate-800); }
.calc-progress li[data-state="done"] .track span { background: var(--color-gold-500); }
.calc-progress li[data-state="current"] { color: var(--color-ink); }
.calc-progress li[data-state="current"] .track span { background: var(--color-gold-500); }

.calc-step { display: none; }
.calc-step[data-active="true"] { display: block; }
.calc-actions { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-lg); flex-wrap: wrap; }

.result-figure {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.result-figure__amount { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; }
.result-figure--positive { background: var(--color-success-bg); color: var(--color-success-ink); }
.result-figure--zero { background: var(--color-gold-100); color: var(--color-gold-700); }
.result-figure--negative { background: var(--color-danger-bg); color: var(--color-danger-ink); }

.summary-table { width: 100%; border-collapse: collapse; margin-block: var(--space-md); }
.summary-table th, .summary-table td { text-align: left; padding: var(--space-2xs) var(--space-2xs); border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-sm); }
.summary-table td:last-child, .summary-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ============ Mobile action bar ============ */
.mobile-actions {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  gap: 1px;
  background: var(--border-subtle);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -6px 18px rgba(27,26,24,0.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-actions a {
  flex: 1;
  background: var(--color-white);
  color: var(--color-ink);
  text-decoration: none;
  text-align: center;
  padding: 0.8rem 0.5rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  min-height: 56px;
  display: flex; align-items: center; justify-content: center;
}
.mobile-actions a.is-primary { background: var(--color-gold-500); color: var(--color-charcoal-900); }
body[data-has-mobile-bar="true"] { padding-bottom: 64px; }
@media (min-width: 64rem) {
  .mobile-actions { display: none; }
  body[data-has-mobile-bar="true"] { padding-bottom: 0; }
}

/* ============ Footer ============ */
.site-footer { background: var(--color-charcoal-900); color: var(--color-on-dark-soft); }
.site-footer a { color: var(--color-on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
/* The footer isn't space-constrained like the sticky header, so its logo
   is a clear visual anchor rather than matching the header's size. */
.site-footer .brand__mark { height: 108px; }
@media (min-width: 62rem) {
  .site-footer .brand__mark { height: 168px; }
}
.footer-grid { display: grid; gap: var(--space-lg); padding-block: var(--space-xl); }
@media (min-width: 56rem) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-grid h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-on-dark); margin-bottom: var(--space-sm); }
.footer-grid ul li + li { margin-top: var(--space-2xs); }
.footer-bottom {
  border-top: 1px solid var(--border-on-dark);
  padding-block: var(--space-sm);
  font-size: var(--fs-sm);
  display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: space-between;
}
.footer-credit { font-size: 0.72rem; color: var(--color-on-dark-soft); opacity: 0.8; }
.disclosure-note {
  font-size: var(--fs-sm);
  color: var(--color-on-dark-soft);
  max-width: 37.8em; /* was 62ch */
}

/* ============ Footer: NCR block + creditor row ============ */
.footer-ncr {
  margin-top: var(--space-md);
  padding: var(--space-sm);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.footer-ncr strong { color: var(--color-on-dark); }
.footer-contact { margin-top: var(--space-sm); font-size: var(--fs-sm); }
.footer-contact a { display: block; }
.footer-contact a + a { margin-top: var(--space-3xs); }

.footer-creditors {
  border-top: 1px solid var(--border-on-dark);
  padding-block: var(--space-lg);
}
.footer-creditors h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-on-dark); margin-bottom: var(--space-2xs); }
.footer-creditors__note { font-size: var(--fs-sm); color: var(--color-on-dark-soft); max-width: 37.8em; margin-bottom: var(--space-sm); }
.footer-creditors__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.creditor-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-on-dark-soft);
  background: rgba(244, 241, 233, 0.04);
}

/* ============ Utility ============ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.badge {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-size: var(--fs-sm); font-weight: 600;
  padding: 0.3em 0.8em; border-radius: var(--radius-pill);
  background: var(--color-neutral-100); color: var(--color-ink-soft);
  border: 1px solid var(--border-subtle);
}
.divider { border: none; border-top: 1px solid var(--border-subtle); margin-block: var(--space-lg); }


/* ============ Debt Advice (blog) ============
   Built entirely from existing tokens — same card, radius, shadow,
   spacing and type scale as the rest of the site, so the section reads
   as part of the original design rather than a bolted-on blog. */
.surface-page-alt { background: var(--color-neutral-100); }

.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-sm);
}
.breadcrumb a { color: var(--color-ink-soft); }
.breadcrumb span[aria-hidden] { margin-inline: var(--space-3xs); color: var(--color-neutral-500); }
.breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: 600; }

.article-meta {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--color-neutral-600);
}
/* Comfortable reading measure — the wrap is already capped at 46rem on
   article pages, this keeps paragraphs from running wide inside it. */
.article-body > p { max-width: var(--measure); }
.article-body > h2 { margin-top: var(--space-lg); font-size: var(--fs-lg); }
.article-faq { margin-top: var(--space-xl); }
.article-faq > h2 { font-size: var(--fs-lg); margin-bottom: var(--space-2xs); }

.blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  text-decoration: none;
  color: inherit;
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.blog-card h3 { font-size: var(--fs-md); }
.blog-card__excerpt { color: var(--color-ink-soft); font-size: var(--fs-base); }
.blog-card__meta { margin-top: auto; padding-top: var(--space-2xs); font-size: var(--fs-sm); color: var(--color-neutral-600); }
.blog-card[hidden] { display: none; }

.blog-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-md);
}
.blog-filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.blog-filter {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 0.45em 1em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--color-ink-soft);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.blog-filter:hover { background: var(--color-neutral-100); }
.blog-filter.is-active {
  background: var(--color-charcoal-900);
  border-color: var(--color-charcoal-900);
  color: var(--color-on-dark);
}
.blog-search input {
  font: inherit;
  font-size: var(--fs-base);
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--color-ink);
  min-width: min(100%, 18rem);
}
.blog-empty {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--color-ink-soft);
}

/* ============ Debt assistant (chat) ============
   Same tokens as the rest of the site: charcoal panel, brand yellow
   accent, existing radius/shadow/spacing scale. Deliberately small and
   quiet so it doesn't dominate the page. */
.chat-launcher {
  position: fixed;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.7em 1.1em;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-charcoal-900);
  color: var(--color-on-dark);
  font-weight: 600;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.chat-launcher:hover { transform: translateY(-2px); background: var(--color-charcoal-800); }
.chat-launcher svg { width: 20px; height: 20px; color: var(--color-gold-500); }
/* Clear of the mobile action bar so it never covers those buttons. */
[data-has-mobile-bar="true"] .chat-launcher { bottom: calc(var(--space-sm) + 4.25rem); }
/* Must match the breakpoint where .mobile-actions itself hides (64rem),
   or the launcher drops back down onto a still-visible action bar. */
@media (min-width: 64rem) {
  [data-has-mobile-bar="true"] .chat-launcher { bottom: var(--space-sm); }
}

/* `hidden` must win over the panel's own display:flex, or the panel
   renders open on page load. */
.chat-panel[hidden] { display: none; }
.chat-panel {
  position: fixed;
  right: var(--space-sm);
  bottom: calc(var(--space-sm) + 3.5rem);
  z-index: 201;
  width: min(23rem, calc(100vw - 2 * var(--space-sm)));
  /* Tall enough that the callback form's two fields, consent and
     submit button fit without scrolling on a laptop. */
  max-height: min(38rem, calc(100svh - 6rem));
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@media (max-width: 30rem) {
  /* Full-width sheet on small phones, but never taller than the viewport. */
  .chat-panel {
    right: 0; left: 0; bottom: 0;
    width: 100%;
    /* --chat-vh is set from visualViewport when the on-screen keyboard
       is up. Without it the sheet keeps its full height and the
       composer ends up behind the keyboard. */
    max-height: min(85svh, var(--chat-vh, 85svh));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-charcoal-900);
  color: var(--color-on-dark);
}
.chat-head__title { font-family: var(--font-display); font-weight: 700; }
.chat-head__sub { font-size: var(--fs-sm); color: var(--color-on-dark-soft); }
.chat-head__actions { display: flex; gap: var(--space-3xs); }
.chat-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-on-dark-soft);
}
.chat-icon-btn:hover { background: rgba(244,241,233,0.12); color: var(--color-on-dark); }
.chat-icon-btn svg { width: 18px; height: 18px; }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--surface-page);
}
.chat-msg { display: flex; flex-direction: column; gap: var(--space-3xs); max-width: 90%; }
.chat-msg--user { align-self: flex-end; align-items: flex-end; }
.chat-msg--assistant { align-self: flex-start; }
.chat-bubble {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  max-width: none;
}
.chat-msg--assistant .chat-bubble {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--color-ink);
}
.chat-msg--user .chat-bubble {
  background: var(--color-charcoal-900);
  color: var(--color-on-dark);
}
.chat-sources, .chat-escalation { display: flex; flex-direction: column; gap: var(--space-3xs); font-size: var(--fs-sm); }
.chat-sources__label { color: var(--color-neutral-600); font-size: var(--fs-sm); }
.chat-source { color: var(--color-gold-700); font-weight: 600; text-decoration: underline; }
.chat-escalation__row, .chat-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-3xs); }
.chat-chip {
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--color-ink-soft);
  text-decoration: none;
}
.chat-chip:hover { background: var(--color-neutral-100); color: var(--color-ink); }

.chat-typing .chat-bubble { display: flex; gap: 4px; align-items: center; }
.chat-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-neutral-500);
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .chat-dot { animation: chat-blink 1.2s infinite ease-in-out; }
  .chat-dot:nth-child(2) { animation-delay: 0.15s; }
  .chat-dot:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes chat-blink { 0%, 80%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

.chat-form {
  display: flex; gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.chat-input {
  flex: 1;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--fs-base);
  background: var(--surface-page);
  color: var(--color-ink);
  min-width: 0;
}
.chat-send {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: var(--color-gold-500);
  color: var(--color-charcoal-900);
}
.chat-send:hover { background: var(--color-gold-300); }
.chat-send svg { width: 18px; height: 18px; }
.chat-send[disabled] { opacity: 0.5; cursor: not-allowed; }
.chat-note {
  padding: var(--space-3xs) var(--space-sm) var(--space-2xs);
  font-size: 0.72rem;
  color: var(--color-neutral-600);
  background: var(--surface-card);
  max-width: none;
}

/* ---- Assistant: guided options, persistent actions, callback form ----
   Options are the primary control in the simplified flow, so they are
   full-width buttons with sentence-length labels rather than pills — a
   pill row wraps "Understanding my options for leaving debt review"
   into unreadable fragments on a phone. Minimum target height is kept
   at 44px, which is the smallest comfortable tap target. */
.chat-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  align-self: stretch;
}
.chat-option {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  min-height: 44px;
  padding: 0.65em 1em;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--color-ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.chat-option:hover {
  background: var(--color-neutral-100);
  border-color: var(--color-gold-500);
}
.chat-option--primary {
  background: var(--color-gold-500);
  border-color: var(--color-gold-500);
  color: var(--color-charcoal-900);
}
.chat-option--primary:hover { background: var(--color-gold-300); border-color: var(--color-gold-300); }

/* Back / Start again / Request a callback. Sits above the composer and
   stays put, so a callback is always one tap away and nobody has to
   complete a branch to reach a person. */
.chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  padding: var(--space-2xs) var(--space-sm);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.chat-action {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 36px;
  padding: 0.3em 0.85em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-page);
  color: var(--color-ink-soft);
}
.chat-action:hover { background: var(--color-neutral-100); color: var(--color-ink); }
.chat-action--gold {
  margin-left: auto;
  background: var(--color-gold-500);
  border-color: var(--color-gold-500);
  color: var(--color-charcoal-900);
}
.chat-action--gold:hover { background: var(--color-gold-300); color: var(--color-charcoal-900); }
.chat-action[hidden] { display: none; }

.chat-form-card {
  align-self: stretch;
  padding: var(--space-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}
.chat-callback { display: flex; flex-direction: column; gap: var(--space-2xs); }
.chat-field { display: flex; flex-direction: column; gap: 2px; }
.chat-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink); }
.chat-field__input {
  font: inherit;
  /* 16px minimum: anything smaller makes iOS Safari zoom the page on
     focus, which throws the bottom sheet off-screen. */
  font-size: 1rem;
  min-height: 44px;
  padding: 0.45em 0.7em;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  color: var(--color-ink);
  width: 100%;
}
.chat-field__input:focus-visible { border-color: var(--color-gold-500); }
.chat-field__input[aria-invalid="true"] { border-color: #B3261E; }
.chat-field__hint { font-size: 0.75rem; color: var(--color-neutral-600); font-weight: 400; }
.chat-field__error { font-size: 0.78rem; color: #B3261E; font-weight: 600; }
.chat-field__error[hidden] { display: none; }
.chat-consent__row { display: flex; gap: var(--space-2xs); align-items: flex-start; }
.chat-consent__row input { margin-top: 0.25em; width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.chat-consent__row label { font-weight: 400; font-size: 0.8rem; line-height: var(--lh-snug); }
.chat-more summary {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  cursor: pointer;
  padding: 0.35em 0;
  min-height: 32px;
}
.chat-more[open] summary { margin-bottom: var(--space-2xs); }
.chat-more > .chat-field { margin-bottom: var(--space-2xs); }
.chat-submit {
  font: inherit;
  font-weight: 700;
  min-height: 46px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-gold-500);
  color: var(--color-charcoal-900);
  margin-top: var(--space-3xs);
}
.chat-submit:hover { background: var(--color-gold-300); }
.chat-submit[disabled] { opacity: 0.6; cursor: not-allowed; }
/* Honeypot: off-screen rather than display:none, because some bots skip
   fields that are not rendered at all. aria-hidden + tabindex -1 in the
   markup keep it away from real assistive tech. */
.chat-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Article sources — attribution for legal/regulatory claims. */
.article-sources {
  margin-top: var(--space-xl);
  padding: var(--space-md);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}
.article-sources > h2 { font-size: var(--fs-md); }
.article-sources__note {
  margin-top: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}
.article-sources__list {
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  list-style: none;
  padding: 0;
}
.article-sources__list a { color: var(--color-gold-700); font-weight: 600; }
.article-sources__publisher { color: var(--color-neutral-600); font-weight: 400; }

/* ============================================================
   MOTION SYSTEM
   ============================================================
   Principles:
   1. Motion signals hierarchy and progress. Nothing moves for
      decoration, and nothing loops forever in the periphery.
   2. One easing family (--ease-standard) and one distance (14px)
      so every reveal on the site feels like the same hand.
   3. Content is visible BY DEFAULT. The hidden-then-revealed
      state only exists under .js-motion, which is set by an
      inline script before paint. With JS off, blocked, or
      broken, everything renders normally — important here
      because these pages are the SEO surface.
   4. prefers-reduced-motion removes movement everywhere, not
      just in the places it was convenient to remember.
   ============================================================ */

:root {
  --motion-rise: 14px;
  --motion-duration: 620ms;
  --motion-stagger: 70ms;
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.28, 1);
}

/* Reveal: only armed when JS is running. */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--motion-rise), 0);
  transition:
    opacity var(--motion-duration) var(--ease-out-soft),
    transform var(--motion-duration) var(--ease-out-soft);
  transition-delay: calc(var(--reveal-index, 0) * var(--motion-stagger));
  will-change: opacity, transform;
}
.js-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Header: condenses once the page has moved. Gives back vertical
   space on scroll and makes the sticky bar feel deliberate rather
   than simply stuck. */
/* The ONLY thing that changes on scroll is a shadow. box-shadow does not
   participate in layout, so it cannot resize the header, cannot move the
   content below it, and cannot feed back into scrollY. Nothing here may
   ever animate padding, height, font-size or position — that is precisely
   the bug this replaced. `transition: all` is banned on the header for
   the same reason: it would silently pick up any layout property added
   later. */
.site-header {
  transition: box-shadow var(--duration-base) var(--ease-out-soft);
}
.site-header[data-scrolled="true"] {
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.6);
}

/* Hero: a short entrance sequence, then it stops. The logo keeps
   its existing animation; these are the text/CTA layers. */
.js-motion .hero__grid > div > .eyebrow,
.js-motion .hero__grid > div > h1,
.js-motion .hero__grid > div > .lede,
.js-motion .hero__grid > div > .hero__actions,
.js-motion .hero__grid > div > .hero__note {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  animation: hero-enter 760ms var(--ease-out-soft) forwards;
}
.js-motion .hero__grid > div > .eyebrow      { animation-delay: 60ms; }
.js-motion .hero__grid > div > h1            { animation-delay: 140ms; }
.js-motion .hero__grid > div > .lede         { animation-delay: 240ms; }
.js-motion .hero__grid > div > .hero__actions{ animation-delay: 340ms; }
.js-motion .hero__grid > div > .hero__note   { animation-delay: 430ms; }
@keyframes hero-enter { to { opacity: 1; transform: none; } }

/* NO decorative layer behind the hero logo.
   A radial "depth" glow was tried here and removed: the logo asset is
   an opaque plate whose background is matched exactly to the hero, so
   anything painted behind it reads as a lighter patch around the
   plate's edge — the precise artefact that earlier rounds of this
   project were spent eliminating. Depth in the hero comes from
   typography, spacing and the entrance sequence instead.

   Pointer-driven depth, desktop only, capped at a few pixels.
   Applied to a wrapper so the logo's own blending is untouched. */
.hero__visual {
  --tilt-x: 0px;
  --tilt-y: 0px;
}

/* Card depth on hover — restrained, consistent across card types. */
.pathway-card, .service-card {
  transition:
    transform var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft);
}
.card.pathway-card:hover, .card.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Link underline that draws in rather than snapping on. */
.article-body a:not(.btn),
.faq-answer a,
.lede a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--duration-base) var(--ease-out-soft);
  border-bottom: 1px solid currentColor;
}
.article-body a:not(.btn):hover,
.faq-answer a:hover,
.lede a:hover { background-size: 100% 1px; }

/* Button press feedback — small, physical, not bouncy. */
.btn { transition:
    transform var(--duration-fast) var(--ease-out-soft),
    background var(--duration-fast) var(--ease-out-soft),
    box-shadow var(--duration-fast) var(--ease-out-soft),
    border-color var(--duration-fast) var(--ease-out-soft); }
.btn-gold:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.995); }

/* Accordion chevron + answer easing. */
.faq-item summary { transition: color var(--duration-fast) var(--ease-out-soft); }
.faq-item summary:hover { color: var(--color-gold-700); }
.surface-dark .faq-item summary:hover,
.surface-dark-alt .faq-item summary:hover { color: var(--color-gold-300); }

/* Calculator: result figures settle in rather than snapping. */
.js-motion [data-countup] { font-variant-numeric: tabular-nums; }

/* Bank/credit-provider rail: restrained by default, clearer on
   interaction. Kept as text badges — these are named institutions,
   not partners, and the existing disclaimer stays. */
.creditor-badge {
  transition:
    color var(--duration-base) var(--ease-out-soft),
    border-color var(--duration-base) var(--ease-out-soft),
    background var(--duration-base) var(--ease-out-soft);
}
.footer-creditors__list:hover .creditor-badge { opacity: 0.55; }
.footer-creditors__list .creditor-badge:hover {
  opacity: 1;
  color: var(--color-on-dark);
  border-color: var(--color-gold-500);
  background: rgba(247, 199, 7, 0.06);
}

/* ============================================================
   Finishing layer. Same easing, same 14px rise, same 70ms stagger
   as everything above — these are more places the one system
   shows up, not a second system.
   ============================================================ */

/* Word-stagger headings. Spans are inline-block (so they can move)
   with NO overflow clipping, so descenders, wrapping and selection
   behave exactly like plain text. */
.w { display: inline-block; }
.js-motion .is-split .w__i {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.38em, 0);
  transition:
    opacity 560ms var(--ease-out-soft),
    transform 560ms var(--ease-out-soft);
  transition-delay: calc(var(--wi, 0) * 42ms);
}
.js-motion [data-reveal].is-split { opacity: 1; transform: none; transition: none; }
.js-motion [data-reveal].is-split.is-revealed .w__i { opacity: 1; transform: none; }
/* Hero h1: block entrance is replaced by the words; delays start
   where the block's did so the eyebrow -> h1 -> lede rhythm holds. */
.js-motion .hero h1.is-split { animation: none; opacity: 1; transform: none; }
.js-motion .hero h1.is-split .w__i {
  animation: hero-enter 640ms var(--ease-out-soft) forwards;
  animation-delay: calc(140ms + var(--wi, 0) * 46ms);
  transition: none;
}

/* The signature: a short rule that draws in beside every eyebrow.
   Fixed width + scaleX so it reserves its space and shifts nothing. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: left center;
  flex-shrink: 0;
}
.js-motion [data-reveal].eyebrow::before {
  transform: scaleX(0);
  transition: transform 520ms var(--ease-out-soft) 120ms;
}
.js-motion [data-reveal].eyebrow.is-revealed::before { transform: scaleX(1); }
.js-motion .hero .eyebrow::before {
  transform: scaleX(0);
  animation: rule-draw 520ms var(--ease-out-soft) 260ms forwards;
}
@keyframes rule-draw { to { transform: scaleX(1); } }

/* How it works: a line draws through the four numbered steps as the
   row arrives, and each badge settles in a beat before its text. */
.steps { position: relative; }
.steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  background: linear-gradient(90deg, var(--color-gold-500), rgba(247, 199, 7, 0.25));
  border-radius: 1px;
  /* mobile: vertical, down the badge column */
  top: 1.125rem; bottom: 1.125rem;
  left: calc(1.125rem - 1px);
  width: 2px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1100ms var(--ease-out-soft) 120ms;
}
@media (min-width: 56rem) {
  .steps::before {
    top: calc(1.125rem - 1px); bottom: auto; height: 2px;
    left: 1.125rem; right: 1.125rem; width: auto;
    transform: scaleX(0);
    transform-origin: left;
  }
}
.js-motion .steps.is-inview::before { transform: none; }
.step::before { z-index: 1; transition: transform 460ms var(--ease-out-soft) 200ms, opacity 460ms var(--ease-out-soft) 200ms; }
.js-motion .step[data-reveal]:not(.is-revealed)::before { transform: scale(0.6); opacity: 0; }

/* Card depth: desktop only. Perspective + a capped tilt driven by
   custom properties, and a sheen that follows the cursor UNDER the
   content (z-index 0) so text contrast is never touched. */
@media (hover: hover) and (pointer: fine) {
  .js-motion .card-depth {
    --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
    position: relative;
    transition:
      transform 420ms var(--ease-out-soft),
      box-shadow 420ms var(--ease-out-soft),
      border-color var(--duration-fast) var(--ease-out-soft);
  }
  .js-motion .card-depth.is-revealed {
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  }
  .js-motion .card-depth.is-revealed:hover {
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
  .js-motion .card-depth > * { position: relative; z-index: 1; }
  .js-motion .card-depth::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.11), transparent 62%);
    opacity: 0;
    transition: opacity 320ms var(--ease-out-soft);
  }
  .surface-dark .js-motion .card-depth::after,
  .surface-dark-alt .js-motion .card-depth::after,
  .js-motion .surface-dark .card-depth::after,
  .js-motion .surface-dark-alt .card-depth::after {
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(247, 199, 7, 0.09), transparent 62%);
  }
  .js-motion .card-depth:hover::after { opacity: 1; }
}

/* Scroll progress: on the header's bottom edge, transform-only. */
.scroll-progress {
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 2px;
  background: var(--color-gold-500);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
  will-change: transform;
}

/* Navigation: the underline draws in on desktop instead of a box. */
@media (min-width: 64rem) {
  .primary-nav__list a { position: relative; }
  .primary-nav__list a::after {
    content: "";
    position: absolute;
    left: var(--space-xs); right: var(--space-xs); bottom: 0.35em;
    height: 2px;
    background: var(--color-gold-500);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--ease-out-soft);
  }
  .primary-nav__list a:hover { background: transparent; }
  .primary-nav__list a:hover::after,
  .primary-nav__list a:focus-visible::after,
  .primary-nav__list a[aria-current="page"]::after { transform: scaleX(1); }
}

/* Calculator: each step slides in; the progress track fills rather
   than flips; results are handled in motion.js. */
.js-motion .calc-step[data-active="true"] { animation: calc-step-in 380ms var(--ease-out-soft); }
@keyframes calc-step-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.calc-progress .track span {
  transform: scaleX(0);
  transform-origin: left;
  transition:
    transform 520ms var(--ease-out-soft),
    background var(--duration-base) var(--ease-out-soft);
}
.calc-progress li[data-state] .track span { transform: scaleX(1); }
.currency-input { transition: border-color var(--duration-fast) var(--ease-out-soft), box-shadow var(--duration-fast) var(--ease-out-soft); }
.currency-input:focus-within { box-shadow: 0 0 0 3px rgba(247, 199, 7, 0.22); }

/* Forms: the alert eases in; a success tick draws itself. */
.js-motion .form-alert { animation: alert-in 360ms var(--ease-out-soft); }
@keyframes alert-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
.form-alert--success { display: flex; align-items: center; gap: var(--space-xs); }
.form-alert__check { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.form-alert__check circle, .form-alert__check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tick-draw 520ms var(--ease-out-soft) forwards; }
.form-alert__check path { animation-delay: 300ms; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(247, 199, 7, 0.22);
  transition: box-shadow var(--duration-fast) var(--ease-out-soft);
}

/* FAQ: animated open/close where the browser can interpolate to
   auto height (Chromium). Elsewhere it simply opens, as before. */
@supports (interpolate-size: allow-keywords) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    height: 0;
    overflow: clip;
    transition: height 320ms var(--ease-out-soft), content-visibility 320ms allow-discrete;
  }
  .faq-item[open]::details-content { height: auto; }
}

/* ---- The escape hatch. Motion off means motion off. ---- */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion .hero__grid > div > .eyebrow,
  .js-motion .hero__grid > div > h1,
  .js-motion .hero__grid > div > .lede,
  .js-motion .hero__grid > div > .hero__actions,
  .js-motion .hero__grid > div > .hero__note {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .card.pathway-card:hover, .card.service-card:hover { transform: none; }
  .btn-gold:hover, .btn:active { transform: none; }
  .js-motion .is-split .w__i, .js-motion .hero h1.is-split .w__i { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .eyebrow::before, .js-motion .hero .eyebrow::before { transform: none !important; animation: none !important; transition: none !important; }
  .steps::before { transform: none !important; transition: none !important; }
  .js-motion .step[data-reveal]:not(.is-revealed)::before { transform: none; opacity: 1; }
  .js-motion .card-depth, .js-motion .card-depth.is-revealed, .js-motion .card-depth.is-revealed:hover { transform: none !important; }
  .js-motion .card-depth::after { display: none; }
  .scroll-progress { display: none; }
  .primary-nav__list a::after { transition: none; }
  .js-motion .calc-step[data-active="true"], .js-motion .form-alert { animation: none; }
  .calc-progress .track span { transition: none; }
  .form-alert__check circle, .form-alert__check path { animation: none; stroke-dashoffset: 0; }
  .faq-item::details-content { transition: none; }
}

/* Chat document checklist */
.chat-chip--primary {
  background: var(--color-gold-500);
  border-color: var(--color-gold-500);
  color: var(--color-charcoal-900);
  font-weight: 700;
}
.chat-chip--primary:hover { background: var(--color-gold-300); color: var(--color-charcoal-900); }
.chat-checklist__intro { font-size: var(--fs-sm); color: var(--color-ink-soft); margin-bottom: var(--space-2xs); }
.chat-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.chat-checklist > li {
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--border-subtle);
}
.chat-checklist > li:last-child { border-bottom: none; padding-bottom: 0; }
.chat-checklist__row { display: flex; gap: var(--space-2xs); align-items: flex-start; }
.chat-checklist__tick { color: var(--color-gold-700); font-weight: 700; flex-shrink: 0; }
.chat-checklist__item { font-size: var(--fs-sm); }
.chat-checklist__why {
  margin-top: 2px; margin-left: 1.3em;
  background: none; border: none; padding: 0;
  font: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--color-gold-700); text-decoration: underline; cursor: pointer;
}
.chat-checklist__reason {
  margin-left: 1.3em; margin-top: 2px;
  font-size: 0.78rem; line-height: 1.45;
  color: var(--color-ink-soft); max-width: none;
}

/* Homepage trust section — restrained, no badge clutter. */
.trust-card { display: flex; flex-direction: column; gap: var(--space-2xs); height: 100%; }
.trust-card h3 { font-size: var(--fs-md); }
.trust-note {
  margin-top: var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--color-on-dark-soft);
  max-width: var(--measure);
}

/* Language selector — subtle, footer-mounted, no flag clutter. */
.lang-switch { position: relative; display: inline-block; }
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  padding: 0.45em 0.9em;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-on-dark-soft);
  font-size: var(--fs-sm); font-weight: 600;
}
.lang-switch__btn:hover { color: var(--color-on-dark); border-color: var(--color-gold-500); }
.lang-switch__btn svg { width: 16px; height: 16px; }
.lang-switch__chev { width: 14px; height: 14px; }
.lang-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  z-index: 120;
  min-width: 17rem; max-width: min(22rem, calc(100vw - 2rem));
  padding: var(--space-sm);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  color: var(--color-ink);
}
.lang-menu[hidden] { display: none; }
.lang-menu__item {
  display: block; width: 100%; text-align: left;
  padding: var(--space-2xs) var(--space-xs);
  border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--color-ink);
  font-size: var(--fs-sm); font-weight: 600;
}
.lang-menu__item:hover { background: var(--color-neutral-100); }
.lang-menu__item[aria-current="true"] { background: var(--color-gold-100); color: var(--color-gold-700); }
.lang-menu__note {
  margin-top: var(--space-2xs); padding-top: var(--space-2xs);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.75rem; font-weight: 600; color: var(--color-ink-soft);
}
.lang-menu__pending { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-3xs); }
.lang-menu__pending-item {
  font-size: 0.72rem; padding: 0.2em 0.6em;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  color: var(--color-neutral-600);
}
.lang-menu__why {
  margin-top: var(--space-2xs);
  font-size: 0.72rem; line-height: 1.45; color: var(--color-neutral-600); max-width: none;
}
.footer-lang { margin-top: var(--space-md); }

/* Article -> parent service links (completes the hub/spoke loop). */
.article-parent {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}
.article-parent__label {
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-neutral-600);
}
.article-parent__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.article-parent__links a {
  font-size: var(--fs-sm); font-weight: 600;
  padding: 0.4em 0.9em;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
  color: var(--color-gold-700); text-decoration: none;
}
.article-parent__links a:hover { background: var(--color-gold-100); border-color: var(--color-gold-500); }

/* Callback form: two fields, consent, button. Everything else folds
   away behind one disclosure. */
.form-prefs { margin: var(--space-sm) 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-page); }
.form-prefs summary { cursor: pointer; padding: var(--space-xs) var(--space-sm); font-weight: 600; list-style: none; display: flex; align-items: center; gap: var(--space-2xs); min-height: 44px; }
.form-prefs summary::-webkit-details-marker { display: none; }
.form-prefs summary::before { content: "+"; font-weight: 700; color: var(--color-gold-700); width: 1.1em; }
.form-prefs[open] summary::before { content: "\2212"; }
.form-prefs__hint { font-weight: 400; color: var(--color-neutral-600); font-size: var(--fs-sm); }
.form-prefs__body { padding: 0 var(--space-sm) var(--space-sm); display: grid; gap: var(--space-sm); }
.form-prefs__body .field { margin: 0; }
.check-list li { padding-left: 1.6em; position: relative; }
.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--color-gold-500); font-weight: 700; }
.calc-preview { background: rgba(244,241,233,0.06) !important; border-color: var(--border-on-dark) !important; color: var(--color-on-dark); }
.summary-table--preview th, .summary-table--preview td { color: inherit; border-color: rgba(244,241,233,0.14); }
.summary-table--preview td { color: var(--color-on-dark-soft); }

/* Calculator results: compact summary, a visual breakdown, two actions. */
.result-figure__amount { font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.15; }
.result-breakdown { display: grid; gap: var(--space-xs); margin: var(--space-md) 0; }
.rb-row { display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); }
@media (max-width: 30rem) { .rb-row { grid-template-columns: 6.5rem 1fr auto; } }
.rb-label { color: var(--color-ink-soft); }
.rb-track { height: 12px; border-radius: 999px; background: var(--color-neutral-200); overflow: hidden; }
.rb-fill { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--color-charcoal-800); transform-origin: left; }
.rb-fill--expenses { background: var(--color-gold-500); }
.rb-fill--debt { background: var(--color-gold-700); }
.result-figure.is-shortfall ~ .result-breakdown .rb-fill--debt { background: #C9432F; }
.rb-value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.js-motion .rb-fill { transform: scaleX(0); animation: budget-grow 800ms var(--ease-out-soft) forwards; }
.js-motion .rb-row:nth-child(2) .rb-fill { animation-delay: 120ms; }
.js-motion .rb-row:nth-child(3) .rb-fill { animation-delay: 240ms; }
.result-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.result-note { margin-top: var(--space-sm); font-size: var(--fs-sm); color: var(--color-ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .js-motion .budget-card__bar i, .js-motion .rb-fill, .js-motion .hero__visual { animation: none; transform: none; opacity: 1; }
  .budget-card { transform: none !important; }
}

/* Step headings are focused programmatically on each calculator step so
   screen readers announce the change. A ring there after a mouse click
   reads as a stray outline; keyboard users still get it via focus-visible. */
.calc-step h2:focus:not(:focus-visible) { outline: none; box-shadow: none; }