/* =========================================================
   Stonebridge Financial — Design System
   Revolut's editorial system (Oct 2026 style reference): neutral greys, hairlines instead of shadows (shadows only over
   photos, plus modals and the approved effect components), display type never above weight 500 with Revolut's
   tracking scale, pill controls, compact 80px section rhythm. Brand blue, ink and the fonts stay Stonebridge's.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand */
  --blue: #1847ED;
  --blue-deep: #0D36C5;
  --blue-hover: #1340D6;
  --blue-tint: #E9EDFF;
  --blue-tint-2: #D6DEFF;
  --ink: #0B0D12;
  --ink-2: #14171F;
  --ink-3: #1D212B;
  --silver: #BFBFBF;
  --silver-2: #A3A3A3;

  /* Semantic — light surfaces */
  --bg: #FFFFFF;
  --bg-2: #F7F7F7;   /* mist: recessed panels */
  --bg-3: #EFEFF1;
  --text: #1F1F1F;   /* ink text */
  --text-2: #4C4C4C; /* graphite: 8.6:1 on white */
  --text-3: #717173; /* slate: 4.9:1 on white, 4.6:1 on --bg-2 */
  --line: #C9C9CD;   /* ash grey hairline: separates cards and sections instead of shadows */
  --line-2: #A9A9AE; /* stronger edge: field borders, hover */

  /* Semantic — dark surfaces */
  --on-dark: #FFFFFF;
  --on-dark-2: #B6B6BB;
  --on-dark-3: #8A8A8F;
  --line-dark: rgba(255, 255, 255, 0.12);

  /* Feedback */
  --success: #16A34A;
  --success-bg: #EAF7EE;
  --error: #DC2626;
  --error-bg: #FDECEC;

  /* Type */
  --font-display: "Onest", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.75rem, 1.5rem + 5.5vw, 5.5rem);   /* 88px, Revolut's display-xl */
  --fs-h1: clamp(2.5rem, 1.5rem + 4.5vw, 4.75rem);
  --fs-h2: clamp(2rem, 1.25rem + 2.6vw, 3.25rem);       /* 52px, Revolut's display */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);      /* 24px, Revolut's heading-sm */
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;

  /* Radii */
  --r-xl: 22.5px;  /* cards */
  --r-lg: 20px;    /* lists, inner cards */
  --r-md: 12px;    /* small controls */
  --r-sm: 10px;
  --r-pill: 999px;

  /* Spacing (8pt) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section-y: clamp(3.5rem, 2.5rem + 3vw, 5rem);   /* Revolut's 80px section gap */

  /* Layout */
  --container: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --nav-h: 76px;

  /* Elevation: only for things floating over photos, and modals (Revolut: no shadows on cards or buttons) */
  --shadow-sm: 0 1px 2px rgba(11, 13, 18, 0.06), 0 1px 3px rgba(11, 13, 18, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 13, 18, 0.08);
  --shadow-lg: 0 24px 60px rgba(11, 13, 18, 0.18);
  --shadow-blue: 0 16px 40px rgba(24, 71, 237, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 600ms;

  /* Z-index scale */
  --z-nav: 100;
  --z-menu: 110;
  --z-toast: 1000;

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
/* white rings only where the surface is actually dark or blue; the nav turns white once scrolled or opened */
.on-dark :focus-visible, .on-blue :focus-visible, .footer :focus-visible, .debt-card--yes :focus-visible,
.nav--on-dark:not(.is-scrolled):not(.is-open) :focus-visible { outline-color: #fff; }
input, textarea { caret-color: var(--blue); }
a[href^="tel:"] { white-space: nowrap; }
.btn[href^="tel:"], .calc__foot a { white-space: normal; }
::selection { background: var(--blue); color: #fff; }

.sr-only {
  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; top: -100px; left: var(--s-4);
  background: var(--ink); color: #fff; padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); z-index: calc(var(--z-menu) + 1);
  font-weight: 500;
}
.skip-link:focus { top: var(--s-4); }

/* ---------- Typography ----------
   Revolut: the display face never goes above weight 500 (authority comes from size), tracking tightens with size:
   -0.024em at 88px, -0.012em at 52px, -0.01em from 40px down. */
.display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.0; letter-spacing: -0.024em; }
.h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.02em; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.012em; }
.h3 { font-size: var(--fs-h3); line-height: 1.17; letter-spacing: -0.01em; }
.display, .h1, .h2, .h3, h1, h2, h3 { text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-2); text-wrap: pretty; max-width: 42ch; }
.on-dark .lead { color: var(--on-dark-2); }
.muted { color: var(--text-2); }
.on-dark .muted { color: var(--on-dark-2); }
.small { font-size: var(--fs-small); }
.xs { font-size: var(--fs-xs); }
.num { font-variant-numeric: tabular-nums; }
p + p { margin-top: var(--s-4); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 820px; }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush-top { padding-top: 0; }
.on-dark { background: var(--ink); color: var(--on-dark); }
.on-gray { background: var(--bg-2); }
.on-blue { background: var(--blue); color: #fff; }
.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head .lead { margin-top: var(--s-5); }
.section-head--split {
  max-width: none; display: grid; gap: var(--s-5); align-items: end;
  grid-template-columns: 1fr;
}
.section-head--split .lead { margin-top: 0; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.2fr 1fr; }
  .section-head--split .lead { justify-self: end; }
}
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--ink); --btn-fg: #fff; --btn-bg-h: #22262F;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 52px; padding: 0.875rem 1.5rem;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-align: center; text-wrap: balance;
  border: 1.5px solid transparent;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
  touch-action: manipulation; cursor: pointer;
}
.btn:hover { background: var(--btn-bg-h); }
.btn:active { transform: scale(0.98); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--dur) var(--ease-out); }
.btn:hover svg.arrow { transform: translateX(3px); }
.btn--primary { --btn-bg: var(--blue); --btn-bg-h: var(--blue-hover); }
.btn--white { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bg-h: #EFEFF1; }
/* Light pill (Revolut): white, ink label, 2px ink edge */
.btn--ghost { --btn-bg: #fff; --btn-fg: var(--text); --btn-bg-h: var(--bg-2); border: 2px solid var(--text); }
/* Over photos and dark bands (Revolut's ghost on photo): 10% white glass, white hairline */
.on-dark .btn--ghost, .hero .btn--ghost, .page-hero .btn--ghost, .btn--ghost.is-light { --btn-bg: rgba(255,255,255,0.1); --btn-fg: #fff; --btn-bg-h: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.85); }
.on-blue .btn--ghost { --btn-bg: rgba(255,255,255,0.1); --btn-fg: #fff; --btn-bg-h: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.85); }
.btn--sm { min-height: 44px; padding: 0.625rem 1.125rem; font-size: 0.9375rem; }
.btn--lg { min-height: 60px; padding: 1.125rem 2rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.35); border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 600; color: var(--blue); min-height: 44px;
}
.link svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease-out); }
.link:hover svg { transform: translateX(4px); }
.link:hover { text-decoration: underline; text-underline-offset: 4px; }
.on-dark .link { color: #fff; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  color: var(--text);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line); /* hairline drawn outside the box so the 76px bar centers content on whole pixels */
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.nav--on-dark:not(.is-scrolled):not(.is-open) {
  color: #fff; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav.is-scrolled { box-shadow: 0 1px 0 var(--line); }   /* hairline, no shadow */
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.nav__logo { display: inline-flex; align-items: center; height: var(--nav-h); flex: none; } /* full nav height → logo centers on a whole pixel */
.nav__logo svg { display: block; height: 40px; width: 177px; shape-rendering: geometricPrecision; } /* (76-40)/2 = 18px: whole-pixel centering */
@media (min-width: 900px) { .nav__logo svg { height: 44px; width: 195px; } }                          /* (76-44)/2 = 16px */
.nav__logo .logo-light { display: none; }
.nav--on-dark:not(.is-scrolled):not(.is-open) .nav__logo .logo-light { display: block; }
.nav--on-dark:not(.is-scrolled):not(.is-open) .nav__logo .logo-dark { display: none; }
.nav__links { display: none; align-items: center; gap: var(--s-2); }
.nav__link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0.625rem 0.875rem; min-height: 44px;
  border-radius: var(--r-pill); font-weight: 500; font-size: 0.9375rem; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { background: rgba(11, 13, 18, 0.06); }
.nav--on-dark:not(.is-scrolled):not(.is-open) .nav__link:hover { background: rgba(255,255,255,0.12); }
.nav__link[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 currentColor; border-radius: 0; padding-inline: var(--s-2); }
.nav__link svg { width: 16px; height: 16px; }
.nav__actions { display: none; align-items: center; gap: var(--s-3); }
.nav--on-dark:not(.is-scrolled):not(.is-open) .nav__actions .btn--primary { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bg-h: #EFEFF1; box-shadow: none; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.nav__toggle:hover { background: rgba(11, 13, 18, 0.06); }
.nav--on-dark:not(.is-scrolled):not(.is-open) .nav__toggle:hover { background: rgba(255,255,255,0.12); }
.nav__toggle svg { width: 26px; height: 26px; }
.nav__toggle .icon-close { display: none; }
.nav.is-open .nav__toggle .icon-close { display: block; }
.nav.is-open .nav__toggle .icon-menu { display: none; }
@media (min-width: 900px) {
  .nav__links, .nav__actions { display: flex; }
  .nav__toggle { display: none; }
}
/* 900–999px: four nav items plus the button are tight, so trim the spacing to keep every label on one line */
@media (min-width: 900px) and (max-width: 999.98px) {
  .nav__inner { gap: 1rem; }
  .nav__links { gap: 0.25rem; }
  .nav__link { padding-inline: 0.625rem; }
  .nav__actions { gap: 0.5rem; }
}

/* Mobile menu */
.menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: var(--z-menu);
  background: #fff; color: var(--text);
  padding: var(--s-5) var(--gutter) var(--s-7);
  display: none; flex-direction: column; gap: var(--s-2);
  overflow-y: auto;
}
.menu.is-open { display: flex; }
.menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0.25rem; min-height: 56px;
  font-family: var(--font-display); font-size: 1.625rem; font-weight: 500; letter-spacing: -0.02em;
  border-bottom: 1px solid var(--line);
}
.menu__link svg { width: 22px; height: 22px; color: var(--text-3); }
.menu__actions { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
body.menu-open { overflow: hidden; }

/* Space below fixed nav for pages without a dark hero */
.page-top { padding-top: var(--nav-h); }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(3rem, 2rem + 5vw, 7rem));
  padding-bottom: clamp(4rem, 3rem + 5vw, 8rem);
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(24, 71, 237, 0.85) 0%, rgba(24, 71, 237, 0) 60%),
    radial-gradient(50% 60% at 10% 100%, rgba(13, 54, 197, 0.7) 0%, rgba(13, 54, 197, 0) 60%),
    linear-gradient(180deg, #0E1320 0%, var(--ink) 100%);
  color: #fff;
}
.hero__deco {
  position: absolute; z-index: -1; right: -8%; top: 8%;
  width: clamp(360px, 48vw, 760px); opacity: 0.09; pointer-events: none;
  filter: blur(0.3px);
}
.hero__grid {
  display: grid; gap: var(--s-7); align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-8); }
}
.hero__copy .lead { color: rgba(255,255,255,0.78); margin-top: var(--s-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); color: rgba(255,255,255,0.78); font-size: var(--fs-small); }
.hero__proof strong { color: #fff; font-weight: 600; }
.stars { display: inline-flex; gap: 2px; color: #FFB800; }
/* Google rating badge (links to the Business Profile reviews) */
.google-g { width: 18px; height: 18px; flex: none; }
.hero__rating {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 26px; padding: 0.125rem 0.6875rem 0.125rem 0.5rem; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff;
  font-size: 0.75rem; font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.hero__rating:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.6); }
.hero__rating strong { font-weight: 700; }
.hero__rating .google-g { width: 12px; height: 12px; }
.hero__rating .stars svg { width: 11px; height: 11px; }
.hero__rating .muted-inline { opacity: 0.8; }
.rating-badge { gap: var(--s-2); color: var(--text); font-weight: 500; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.rating-badge:hover { border-color: var(--line-2); }
.rating-badge .muted-inline { color: var(--text-2); }
.stars svg { width: 16px; height: 16px; }

/* Hero photo background with parallax (Revolut-style: photo shown clean, white type straight on the sky) */
.hero--photo.is-photo-failed .hero__media { display: none; } /* fall back to the gradient hero */
.hero__media {
  position: absolute; left: 0; right: 0; top: -12%; height: 124%;
  z-index: -1; overflow: hidden; pointer-events: none;
  transform: translate3d(0, 0, 0);
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%;
  will-change: transform; /* scroll parallax (js/main.js) sinks the photo inside the clipped layer */
}
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__tint { display: none; } /* no color grade; the sky is already brand-blue */
.hero__scrim { display: none; } /* owner asked for the photo with no dark overlay (Oct 2026); white type sits on the clean photo */
/* Desktop: open a center gap so the subject's face sits between the headline and the card */
@media (min-width: 1000px) {
  .hero--photo .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 14vw, 15rem); }
  .hero--photo .display { font-size: clamp(2.75rem, 1.25rem + 3.7vw, 4.5rem); }
  /* The hero fills the first screen exactly (owner, Oct 2026), with the copy and card centred in the space under the nav.
     Capped at 90vw tall so the 3:2 photo (106vw wide, face at mid-height) always reaches the bottom edge. */
  .hero--photo {
    min-height: min(100vh, 90vw); min-height: min(100svh, 90vw);
    display: flex; flex-direction: column; justify-content: center;
    padding-top: calc(var(--nav-h) + clamp(1.5rem, 0.5rem + 2vw, 3rem));
    padding-bottom: clamp(1.5rem, 0.5rem + 2vw, 3rem);
  }
  /* No overlay on the photo, so the paragraph carries its own soft shadow where it crosses her hair */
  .hero--photo .hero__copy .lead { text-shadow: 0 1px 3px rgba(11, 13, 18, 0.45), 0 0 24px rgba(11, 13, 18, 0.35); }
  /* Compact calculator card (owner asked for it smaller, Oct 2026): narrower, tighter, results side by side */
  .hero--photo .calc { justify-self: end; width: 100%; max-width: 24rem; padding: 1.75rem; }
  .hero--photo .calc__amount { font-size: clamp(2.25rem, 1.5rem + 1.2vw, 2.75rem); }
  .hero--photo .calc__range { margin-top: var(--s-3); }
  .hero--photo .range { height: 40px; }
  .hero--photo .calc__results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-3); }
  .hero--photo .calc__stat { padding: 0.75rem 0.875rem; }
  .hero--photo .calc__cta { margin-top: var(--s-4); min-height: 52px; padding-block: 0.875rem; font-size: 1rem; }
  .hero--photo .calc__foot { margin-top: var(--s-3); }
}
/* Phones/tablets: the hero becomes a two-row grid. Row 1 is the sky box (.hero__media) with the copy laid over it; the copy
   reserves room at its bottom for the bottom-anchored, zoomed-out head-and-shoulders crop (like the reference), so the box
   grows with the text (user font scaling, longer copy) and the photo can never collide with the headline. Row 2 is the
   calculator band. The .container wrapper is display: contents here so the copy and the band are direct grid rows. */
@media (max-width: 999px) {
  .hero--photo {
    display: grid; grid-template-columns: 100%; grid-template-rows: auto auto;
    padding: 0; background: var(--bg-2); overflow: visible; /* lets the card's shadow spill over the seam below */
  }
  .hero--photo .hero__grid { display: contents; }
  .hero--photo .hero__media {
    grid-area: 1 / 1; position: relative; inset: auto; height: auto; transform: none !important; will-change: auto;
    background: linear-gradient(180deg, #06407A 0%, #094F87 50%, #094F87 100%); /* matches the photo's top edge */
  }
  .hero--photo .hero__img {
    top: auto; bottom: 0; height: calc(min(102.25vw, 573px) + var(--ph-extra, 0px)); /* natural aspect on phones; tablets crop the shirt, not her face */
    object-position: 50% 0%;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 36px); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 36px); /* feathers the seam with the sky box */
  }
  .hero--photo .hero__copy {
    grid-area: 1 / 1; z-index: 1; align-self: start;
    padding: calc(var(--nav-h) + 1.25rem) var(--gutter) calc(min(102.25vw, 573px) + var(--ph-extra, 0px) - 6.4375rem); /* bottom: the photo, tucked 103px under the copy so her hair rises behind the badge and the last line of the lead (the feathered top of the photo hides the seam); her face stays clear of the text */
  }
  .hero--photo .hero__copy .hero__proof { margin-top: var(--s-5); } /* badge sits a little closer to the lead */
  /* The first screen is all hero (owner, Oct 2026): js/main.js ("Phone hero fills the first screen") measures how far the
     hero falls short of the visible screen and lets the photo grow into that gap (--ph-extra, at most 35% zoom), with
     --ph-min as the floor, so the calculator band never peeks in as a strip at the bottom. Without JS: the natural layout. */
  .hero--photo .hero__copy { min-height: var(--ph-min, 0px); }
  /* Headline fills the width edge to edge, like the Revolut reference (owner, Oct 2026): sized from the copy's own width so
     the widest line, "without the stress." (8.314em in Onest 500 at Revolut's -0.024em tracking), spans the line and the title stays two lines,
     "Clear your debt / without the stress.", at every phone width. Re-measure if the headline wording changes.
     The vw line is the fallback for browsers without container units. */
  .hero--photo .hero__copy { container-type: inline-size; }
  .hero--photo .display {
    font-size: min(calc((100vw - 2 * var(--gutter)) / 8.42), 5.75rem);
    font-size: min(calc(100cqi / 8.42), 5.75rem);
  }
  /* If the photo fails to load, keep the sky box (the copy is white) and just drop the reserved photo space */
  .hero--photo.is-photo-failed .hero__media { display: block; }
  .hero--photo.is-photo-failed .hero__img { display: none; }
  .hero--photo.is-photo-failed .hero__copy { padding-bottom: 3rem; }
  /* Calculator band: its own light section under the photo (the hero's background shows through) */
  .hero__calc { grid-area: 2 / 1; padding: calc(var(--section-y) * 0.6) var(--gutter) calc(var(--section-y) * 0.6 + 1.5rem); color: var(--text); }
  .hero__calc-head { margin-bottom: var(--s-6); }
  .hero__calc-head .muted { color: var(--text-2); margin-top: var(--s-3); }
  .hero--photo .hero__calc .calc { margin-top: 0; box-shadow: none; border: 1px solid var(--line); }   /* phones: on the light band, not over the photo */
  .hero__calc .calc--intro { animation: none; } /* the band reveals on scroll instead */
}
@media (min-width: 1000px) {
  .hero__calc { display: contents; } /* no box: the card is a direct hero-grid item, exactly as before */
  .hero__calc-head { display: none; }
}
/* Phone calculator band choreography: the label, heading and line rise in sequence as the band enters; the card lands
   when it enters and its rows follow one after another (the two result tiles pop). The card carries .reveal so the
   scroll observer fires it separately from the band head. Desktop keeps the hero card intro instead. */
@keyframes calc-card-in { from { opacity: 0; transform: translateY(28px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes calc-pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (max-width: 999px) {
  html:not(.no-js) .hero__calc.reveal, html:not(.no-js) .calc.reveal { opacity: 1; transform: none; transition: none; } /* the children animate instead */
  html:not(.no-js) .hero__calc.reveal:not(.is-visible) .hero__calc-head > *, html:not(.no-js) .calc.reveal:not(.is-visible) > * { opacity: 0; }
  .hero__calc.is-visible .hero__calc-head > * { animation: hero-fade-up 640ms var(--ease-out) both; }
  .hero__calc.is-visible .hero__calc-head > :nth-child(2) { animation-delay: 90ms; }
  .hero__calc .calc.is-visible { animation: calc-card-in 700ms var(--ease-out) both; }
  .hero__calc .calc.is-visible > * { animation: hero-fade-up 520ms var(--ease-out) both; }
  .hero__calc .calc.is-visible > :nth-child(1) { animation-delay: 260ms; }
  .hero__calc .calc.is-visible > :nth-child(2) { animation-delay: 320ms; }
  .hero__calc .calc.is-visible > :nth-child(3) { animation-delay: 380ms; }
  .hero__calc .calc.is-visible > :nth-child(4) { animation-delay: 440ms; }
  .hero__calc .calc.is-visible > :nth-child(5) { animation-delay: 560ms; }
  .hero__calc .calc.is-visible > :nth-child(6) { animation-delay: 620ms; }
  .hero__calc .calc.is-visible > :nth-child(7) { animation-delay: 680ms; }   /* the footnote; the live region after it is invisible */
  .hero__calc .calc.is-visible .calc__stat { animation: calc-pop 480ms cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: 500ms; }
  .hero__calc .calc.is-visible .calc__stat:nth-child(2) { animation-delay: 590ms; }
}
@media (min-width: 1000px) {
  .calc.reveal { opacity: 1; transform: none; transition: none; } /* desktop: the hero card intro handles it */
}
@media (prefers-reduced-motion: reduce) {
  .hero__calc .hero__calc-head > *, .hero__calc .calc, .hero__calc .calc > *, .hero__calc .calc__stat { animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* Compact sizing for the phone calculator band so heading + card fit one screen */
@media (max-width: 999px) {
  .hero__calc { padding: var(--s-6) var(--gutter) calc(var(--s-6) + 1.25rem); }
  .hero__calc-head { margin-bottom: var(--s-5); }
  .hero__calc-head .h2 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2rem); }
  .hero__calc-head .muted { font-size: var(--fs-small); margin-top: var(--s-2); }
  .hero__calc .calc { padding: 1.25rem; }
  .hero__calc .calc__amount { font-size: 2.125rem; }
  .hero__calc .calc__range { margin-top: var(--s-4); }
  .hero__calc .range { height: 40px; }
  .hero__calc .calc__results { margin-top: var(--s-4); gap: var(--s-2); }
  .hero__calc .calc__stat { padding: 0.75rem 0.875rem; }
  .hero__calc .calc__stat-value { font-size: 1.375rem; }
  .hero__calc .calc__cta { margin-top: var(--s-4); min-height: 52px; padding-block: 0.875rem; font-size: 1rem; }
  .hero__calc .calc__foot { margin-top: var(--s-3); }
}
.hero--photo .hero__copy { will-change: opacity; }
.hero--photo .hero__copy .lead { color: rgba(255,255,255,0.94); }
.hero--photo .hero__proof { color: rgba(255,255,255,0.95); }
.hero--photo .btn--ghost { border-color: rgba(255,255,255,0.6); }
.hero--photo .calc { box-shadow: 0 30px 80px rgba(11, 13, 18, 0.35); }
@media (prefers-reduced-motion: reduce) {
  .hero__media, .hero__img, .hero--photo .hero__copy { animation: none; transform: none !important; opacity: 1 !important; }
}

/* Hero entrance choreography (CSS-timed; runs once on load) */
@keyframes hero-word-in { from { opacity: 0; transform: translateY(0.55em); } to { opacity: 1; transform: none; } }
@keyframes hero-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-card-in { from { opacity: 0; transform: translate3d(48px, 20px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes hero-media-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nav-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.hero--photo .hero__media { animation: hero-media-in 900ms var(--ease-out) both; }
@media (min-width: 1000px) {
  .hero--photo .hero__media { animation: hero-media-in 900ms var(--ease-out) both, hero-settle 1.8s var(--ease-out) both; } /* gentle zoom-out on load */
}
/* Desktop: the photo is laid at its natural 3:2 aspect, 6% wider than the hero so her face lands on the centre line, and
   dropped so her face sits at the hero's mid-height. The sky-coloured layer (matched to the photo's top edge) and a
   feathered top edge fill the space above her; the bottom of the shirt is simply clipped by the hero. */
@media (min-width: 1000px) {
  .hero--photo .hero__media { top: 0; height: 100%; background: linear-gradient(180deg, #06407A 0%, #084D85 45%, #084D85 100%); }
  .hero--photo .hero__img {
    inset: auto; left: 0; top: calc(50% - 24.7vw); /* face centre is 35% down the image; image height = 0.7067 × width */
    width: 106%; max-width: none; height: auto; object-fit: fill;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 56px); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0, #000 56px);
  }
}
.hero__copy--intro .hw { display: inline-block; animation: hero-word-in 700ms var(--ease-out) both; animation-delay: calc(120ms + var(--i) * 70ms); }
.hero__copy--intro .lead { animation: hero-fade-up 700ms var(--ease-out) 560ms both; }
.hero__copy--intro .hero__actions { animation: hero-fade-up 700ms var(--ease-out) 680ms both; }
.hero__copy--intro .hero__proof { animation: hero-fade-up 700ms var(--ease-out) 680ms both; }
.calc--intro { animation: hero-card-in 900ms var(--ease-out) 350ms both; }
.nav { animation: nav-in 600ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .hero--photo .hero__media, .hero__copy--intro .hw, .hero__copy--intro .lead, .hero__copy--intro .hero__actions,
  .hero__copy--intro .hero__proof, .calc--intro, .nav { animation: none !important; }
}

/* Dark-hero inner elements */
.hero .feature__copy li, .page-hero .feature__copy li { color: rgba(255,255,255,0.82); }
.hero .feature__copy li svg, .page-hero .feature__copy li svg { color: #8FA6FF; }
.hero .contact-item svg, .page-hero .contact-item svg { color: #8FA6FF; }
.hero .contact-item .label, .page-hero .contact-item .label { color: var(--on-dark-2); }
.hero .link, .page-hero .link { color: #fff; }
.hero :focus-visible, .page-hero :focus-visible { outline-color: #fff; }
.hero .calc :focus-visible, .hero .form-card :focus-visible { outline-color: var(--blue); }

/* ---------- Calculator card ---------- */
.calc {
  background: #fff; color: var(--text);
  border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--line);
  position: relative;
}
.calc__label { font-size: var(--fs-small); color: var(--text-2); font-weight: 500; }
.calc__amount {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1.05; margin-top: var(--s-1);
  font-variant-numeric: proportional-nums lining-nums;
}
.calc__range { margin-top: var(--s-5); }
.range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 48px; background: transparent; margin: 0; cursor: pointer;
  touch-action: pan-y;
  --pct: 0%;
}
.range:focus { outline: none; }
.range::-webkit-slider-runnable-track {
  height: 8px; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue) var(--pct), var(--bg-3) var(--pct), var(--bg-3) 100%);
}
.range::-moz-range-track { height: 8px; border-radius: 999px; background: var(--bg-3); }
.range::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--blue); }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px; margin-top: -12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue);
  transition: transform var(--dur-fast) var(--ease-out);
}
.range::-moz-range-thumb {
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue);
}
.range:hover::-webkit-slider-thumb, .range:active::-webkit-slider-thumb { transform: scale(1.08); }
.range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--blue); outline-offset: 3px; }
.range:focus-visible::-moz-range-thumb { outline: 3px solid var(--blue); outline-offset: 3px; }
.calc__minmax { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.calc__results { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-top: var(--s-5); }
@media (min-width: 560px) and (max-width: 999.98px) { .calc__results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } }
.calc__stat { background: var(--bg-2); border-radius: var(--r-md); padding: var(--s-4); }
.calc__stat-value .nw { white-space: nowrap; }
.calc__stat-value { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem); letter-spacing: -0.02em; color: var(--blue); font-variant-numeric: tabular-nums; line-height: 1.1; }
.calc__stat-label { font-size: var(--fs-xs); color: var(--text-2); margin-top: var(--s-1); line-height: 1.4; }
.calc__cta { margin-top: var(--s-5); }
.calc__foot { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; text-align: center; }   /* one short line now, centred under the offer-code link */
.calc__foot a { color: var(--text-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Stats strip ---------- */
.stats { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { position: relative; padding: var(--s-5) 0; }
.stat dt, .stat dd { margin: 0; }                       /* kill the browser's default dd indent */
.stat::before {                                        /* divider draws in from the left as the stat reveals */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 700ms var(--ease-out) 120ms;
}
.stat.is-visible::before, .no-js .stat::before { transform: scaleX(1); }
.on-dark .stat::before { background: var(--line-dark); }
@media (prefers-reduced-motion: reduce) { .stat::before { transform: scaleX(1); transition: none; } }
.stat__value {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.024em;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem); line-height: 1; font-variant-numeric: proportional-nums lining-nums;
}
.stat__label { margin-top: var(--s-2); color: var(--text-2); font-size: var(--fs-small); }
.on-dark .stat__label { color: var(--on-dark-2); }

/* ---------- Debt types (can / can't help) ---------- */
.section-head--compact { margin-bottom: var(--s-6); }
.debt-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 800px) { .debt-grid { grid-template-columns: 1fr 1fr; } }
.debt-card { border-radius: var(--r-lg); padding: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); display: flex; flex-direction: column; }
.debt-card--yes { background: radial-gradient(90% 90% at 80% 0%, #3F63FF 0%, var(--blue) 45%, var(--blue-deep) 100%); color: #fff; }
.debt-card--no { background: #fff; border: 1px solid var(--line); color: var(--text); }
.debt-card .h3 { margin-bottom: var(--s-4); font-size: 1.25rem; }
.debt-card .btn { align-self: flex-start; }
.debt-card__note { margin-top: auto; padding-top: var(--s-4); font-size: var(--fs-small); color: var(--text-2); }
.debt-card__note a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.debt-list { display: grid; gap: 2px; }
.debt-list li { display: flex; align-items: center; gap: var(--s-3); min-height: 38px; font-weight: 500; font-size: 1rem; }
.debt-list__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none; }
.debt-list__icon svg { width: 15px; height: 15px; }
.debt-card--yes .debt-list__icon { background: rgba(255, 255, 255, 0.2); color: #fff; }
.debt-card--yes .debt-list__icon svg { stroke-width: 2.5; }
.debt-card--no .debt-list__icon { background: var(--error-bg); color: var(--error); }
.debt-card--no .debt-list__icon svg { stroke-width: 2.5; }
.debt-card--no .debt-list li { color: var(--text-2); }

/* Debt cards: rows cascade in and icons pop once the card scrolls into view (driven by .reveal → .is-visible) */
@keyframes debt-row-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes debt-icon-pop { from { opacity: 0; transform: scale(0.4); } 70% { transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
.debt-card.reveal .debt-list li, .debt-card.reveal .btn, .debt-card.reveal .debt-card__note { opacity: 0; }
.debt-card.reveal .debt-list__icon { opacity: 0; }
.debt-card.is-visible .debt-list li { animation: debt-row-in 550ms var(--ease-out) both; animation-delay: calc(180ms + var(--i) * 80ms); }
.debt-card.is-visible .debt-list__icon { animation: debt-icon-pop 520ms cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: calc(260ms + var(--i) * 80ms); }
.debt-card.is-visible .btn, .debt-card.is-visible .debt-card__note { animation: hero-fade-up 600ms var(--ease-out) 760ms both; }
.no-js .debt-card .debt-list li, .no-js .debt-card .debt-list__icon, .no-js .debt-card .btn, .no-js .debt-card .debt-card__note { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .debt-card .debt-list li, .debt-card .debt-list__icon, .debt-card .btn, .debt-card__note { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- Cards ---------- */
.card {
  background: #fff; border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.card--hover:hover { border-color: var(--text); }
.on-dark .card { background: var(--ink-2); border-color: var(--line-dark); }
.on-gray .card { border-color: transparent; }
.card .h3 + p { margin-top: var(--s-3); color: var(--text-2); }
.on-dark .card .h3 + p { color: var(--on-dark-2); }
.card .link { margin-top: var(--s-4); }


/* Photo-backed dark section (how it works): full-bleed image, scrim, glass cards */
.section--photo { position: relative; isolation: isolate; overflow: hidden; }
.section__media { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--ink); }
.section__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
/* Phones/tablets: the section is much taller than it is wide, so the 4:3 photo is cropped to a narrow vertical slice.
   The father and son stand at ~46.5% across the photo; this X keeps them on the centre line at any phone height. */
@media (max-width: 999px) { .section__media img { object-position: 45.5% 50%; } }
.section__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 18, 0.58) 0%, rgba(11, 13, 18, 0.34) 45%, rgba(11, 13, 18, 0.5) 100%);
}
.section--photo .lead { color: rgba(255, 255, 255, 0.92); }
.section--photo.on-dark .card {
  background: rgba(11, 13, 18, 0.58); border-color: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.section--photo.on-dark .card p { color: rgba(255, 255, 255, 0.82); }

/* Step cards */
.step { position: relative; overflow: hidden; }
/* Steps: cards rise in turn, numbers slide up, and a blue progress line draws across the top of 1 → 2 → 3 */
@keyframes step-num-in { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }
@keyframes step-line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), #6F8CFF);
  transform: scaleX(0); transform-origin: left center;
}
.step.reveal { transition-delay: calc(var(--i, 0) * 140ms); }
.step.reveal .step__num, .step.reveal .h3, .step.reveal p:not(.step__num) { opacity: 0; }
.step.is-visible::before { animation: step-line-in 700ms var(--ease-out) both; animation-delay: calc(260ms + var(--i, 0) * 380ms); }
.step.is-visible .step__num { animation: step-num-in 650ms var(--ease-out) both; animation-delay: calc(200ms + var(--i, 0) * 140ms); }
.step.is-visible .h3 { animation: hero-fade-up 600ms var(--ease-out) both; animation-delay: calc(320ms + var(--i, 0) * 140ms); }
.step.is-visible p:not(.step__num) { animation: hero-fade-up 600ms var(--ease-out) both; animation-delay: calc(400ms + var(--i, 0) * 140ms); }
.no-js .step::before { transform: scaleX(1); }
.no-js .step .step__num, .no-js .step .h3, .no-js .step p:not(.step__num) { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .step::before { transform: scaleX(1); animation: none !important; }
  .step .step__num, .step .h3, .step p { opacity: 1 !important; transform: none !important; animation: none !important; }
}
.step__num {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.024em;
  font-size: clamp(3rem, 2.5rem + 2vw, 4.5rem); line-height: 1; color: var(--blue);
  margin-bottom: var(--s-5);
}
.on-dark .step__num { color: #6F8CFF; }

/* ---------- Feature rows (services) ---------- */
.feature { display: grid; gap: var(--s-6); align-items: center; grid-template-columns: minmax(0, 1fr); }
.feature + .feature { margin-top: clamp(2.5rem, 1.75rem + 2.5vw, 4rem); }
@media (min-width: 900px) {
  .feature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 2rem + 3vw, 5rem); }
  .feature--flip .feature__tilt { order: 2; }
}
.feature__copy .h2 { margin-top: 0; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem); }   /* 40px max: Revolut's heading-lg */
.feature__copy .lead { margin-top: var(--s-4); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); }
.feature__copy ul { margin-top: var(--s-4); display: grid; gap: var(--s-2); }
.feature__copy li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-2); }
.on-dark .feature__copy li { color: var(--on-dark-2); }
.feature__copy li svg { width: 22px; height: 22px; flex: none; color: var(--blue); margin-top: 2px; }
.on-dark .feature__copy li svg { color: #8FA6FF; }
.feature__copy .btn, .feature__copy .link { margin-top: var(--s-5); }
.feature__visual {
  position: relative; border-radius: var(--r-xl); isolation: isolate;
  overflow: hidden; overflow: clip; /* clip (not hidden) keeps the box from being a scroll container, so a 4:3 box still grows to fit a taller mock card on phones */
  aspect-ratio: 4 / 3; max-width: 100%;
  display: grid; place-items: center; padding: clamp(1.25rem, 1rem + 2vw, 3rem);
  background: var(--bg-2);
}
/* Phones/tablets: size the box by its content (at least 4:3) instead of relying on aspect-ratio growing to fit — Safari keeps a
   fixed 4:3 box and clips the taller mock cards otherwise. */
@media (max-width: 999px) {
  .feature__visual { aspect-ratio: auto; min-height: calc((100vw - 2 * var(--gutter)) * 0.75); }
}
.feature__visual--blue { background: radial-gradient(90% 90% at 80% 0%, #3F63FF 0%, var(--blue) 45%, var(--blue-deep) 100%); }
.feature__visual--ink { background: radial-gradient(80% 80% at 20% 0%, #232838 0%, var(--ink) 70%); }
.feature__visual--soft { background: linear-gradient(160deg, #F1F3FF 0%, var(--blue-tint-2) 100%); }
.feature__visual .deco { position: absolute; inset: auto -10% -18% auto; width: 60%; opacity: 0.12; z-index: -1; }

/* Mockup elements inside visuals */
.mock {
  width: min(100%, 340px); background: #fff; color: var(--text);
  border-radius: var(--r-lg); padding: 1.125rem 1.25rem; border: 1px solid var(--line);
  font-size: 0.875rem;
}
.mock--dark { background: var(--ink-2); color: #fff; }
.mock__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.mock__row + .mock__row { margin-top: var(--s-3); }
.mock__label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.015em; font-weight: 600; }
.mock--dark .mock__label { color: var(--on-dark-3); }
.mock__big { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.mock__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--success-bg); color: #15803D; }
.mock__pill svg { width: 14px; height: 14px; }
.mock__pill--blue { background: var(--blue-tint); color: var(--blue-deep); }
.mock__pill--gray { background: var(--bg-3); color: var(--text-2); }
.mock--dark .mock__pill--gray { background: rgba(255,255,255,0.1); color: var(--on-dark-2); }
.mock__divider { height: 1px; background: var(--line); margin: var(--s-4) 0; }
.mock--dark .mock__divider { background: var(--line-dark); }
.mock__bar { height: 10px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.mock--dark .mock__bar { background: rgba(255,255,255,0.12); }
.mock__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--blue); width: var(--w, 60%); }
.mock__line { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; }
.mock__line .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--silver); flex: none; }
.mock__line .dot--blue { background: var(--blue); }
.mock__line .grow { flex: 1; color: var(--text-2); font-size: var(--fs-small); }
.mock--dark .mock__line .grow { color: var(--on-dark-2); }
.mock__line .amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.mock__stack { position: relative; width: min(100%, 380px); }
.mock__stack .mock { position: relative; }
.mock__stack .mock--behind { position: absolute; inset: 0; transform: translateY(-14px) scale(0.94); opacity: 0.55; z-index: -1; box-shadow: none; }
.mock__stack .mock--behind2 { transform: translateY(-26px) scale(0.88); opacity: 0.3; }
.strike { text-decoration: line-through; color: var(--text-3); font-weight: 500; }

/* Feature rows: visual slides in from its side, mock card rises then floats, copy cascades (driven by .reveal → .is-visible) */
@keyframes feature-visual-in { to { opacity: 1; transform: none; } }
@keyframes mock-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes bar-fill { from { width: 0; } to { width: var(--w, 60%); } }
.feature.reveal { opacity: 1; transform: none; transition: none; }
.feature.reveal .feature__visual { opacity: 0; transform: translateX(-40px) scale(0.97); }
.feature--flip.reveal .feature__visual { transform: translateX(40px) scale(0.97); }
/* Phones/tablets: slide up instead of sideways — a sideways start position pokes past the viewport edge and lets
   iOS Safari pan the whole page horizontally (white strip on the right). */
@media (max-width: 999px) {
  .feature.reveal .feature__visual, .feature--flip.reveal .feature__visual { transform: translateY(28px) scale(0.98); }
}
.feature.reveal .feature__copy > * { opacity: 0; }
.feature.reveal .feature__copy li { opacity: 0; }
.feature.reveal .mock { opacity: 0; }
.feature.reveal .mock__pill { opacity: 0; }
.feature.reveal .mock__line { opacity: 0; }
.feature.reveal .mock__bar > span { width: 0; }
.feature.is-visible .feature__visual { animation: feature-visual-in 800ms var(--ease-out) both; }
.feature.is-visible .feature__copy > * { animation: hero-fade-up 600ms var(--ease-out) both; }
.feature.is-visible .feature__copy > :nth-child(1) { animation-delay: 140ms; }
.feature.is-visible .feature__copy > :nth-child(2) { animation-delay: 220ms; }
.feature.is-visible .feature__copy > :nth-child(3) { animation-delay: 300ms; }
.feature.is-visible .feature__copy > .link, .feature.is-visible .feature__copy > .btn { animation-delay: 720ms; }
.feature.is-visible .feature__copy li { animation: debt-row-in 500ms var(--ease-out) both; animation-delay: calc(420ms + var(--i) * 90ms); }
.feature.is-visible .mock { animation: mock-in 700ms var(--ease-out) 320ms both; }
.feature.is-visible .mock__pill { animation: debt-icon-pop 520ms cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: calc(900ms + var(--i, 0) * 120ms); }
.feature.is-visible .mock__line { animation: debt-row-in 450ms var(--ease-out) both; animation-delay: calc(760ms + var(--i) * 80ms); }
.feature.is-visible .mock__bar > span { animation: bar-fill 1100ms var(--ease-out) 1000ms both; }
.no-js .feature .feature__visual, .no-js .feature .feature__copy > *, .no-js .feature .feature__copy li,
.no-js .feature .mock, .no-js .feature .mock__pill, .no-js .feature .mock__line { opacity: 1; transform: none; }
.no-js .feature .mock__bar > span { width: var(--w, 60%); }
@media (prefers-reduced-motion: reduce) {
  .feature .feature__visual, .feature .feature__copy > *, .feature .feature__copy li, .feature .mock, .feature .mock__pill, .feature .mock__line { opacity: 1 !important; transform: none !important; animation: none !important; }
  .feature .mock__bar > span { width: var(--w, 60%) !important; animation: none !important; }
}

/* ---------- Testimonials ---------- */
.quote { display: flex; flex-direction: column; gap: var(--s-4); height: 100%; }
.quote__text { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--text); text-wrap: pretty; } /* margin:0 kills the browser's blockquote indent */
.quote__text::before { content: "\201C"; font-family: var(--font-display); font-size: 3rem; line-height: 0; color: var(--blue); vertical-align: -0.5em; margin-right: 2px; }
.quote__meta { display: flex; align-items: center; gap: var(--s-3); }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-tint); color: var(--blue-deep); font-weight: 600; font-size: var(--fs-small); flex: none; }
.quote__name { font-weight: 600; font-size: var(--fs-small); }
.quote__where { color: var(--text-2); font-size: var(--fs-xs); display: inline-flex; align-items: center; gap: 4px; }
.quote__where .google-g { width: 12px; height: 12px; }
/* Whole card is clickable via the stretched "View on Google" link */
.card:has(.quote__link) { position: relative; }
.quote__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; align-self: flex-start;
  font-size: var(--fs-small); font-weight: 600; color: var(--blue); min-height: 44px;
}
.quote__link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.quote__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card:has(.quote__link:hover) { border-color: var(--text); }
.card:has(.quote__link:hover) .quote__link svg { transform: translateX(4px); }
.card:has(.quote__link:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.quote__link:focus-visible { outline: none; }
.rating-badge {
  display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill);
}
.rating-badge strong { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.02em; }
.section-head--split .rating-badge { justify-self: start; }
@media (min-width: 900px) { .section-head--split .rating-badge { justify-self: end; } }

/* Testimonial cards: stars pop in one by one, quote fades up, then the avatar and name (driven by .reveal → .is-visible) */
.card.reveal .quote .stars svg { opacity: 0; transform: scale(0.4); }
.card.reveal .quote__text, .card.reveal .quote__meta, .card.reveal .quote__link { opacity: 0; }
.card.is-visible .quote .stars svg { animation: debt-icon-pop 420ms cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: calc(160ms + var(--i, 0) * 120ms + var(--s, 0) * 60ms); }
.card.is-visible .quote__text { animation: hero-fade-up 600ms var(--ease-out) both; animation-delay: calc(360ms + var(--i, 0) * 120ms); }
.card.is-visible .quote__meta { animation: hero-fade-up 600ms var(--ease-out) both; animation-delay: calc(520ms + var(--i, 0) * 120ms); }
.card.is-visible .quote__meta .avatar { animation: debt-icon-pop 500ms cubic-bezier(0.34, 1.4, 0.64, 1) both; animation-delay: calc(560ms + var(--i, 0) * 120ms); }
.card.is-visible .quote__link { animation: hero-fade-up 600ms var(--ease-out) both; animation-delay: calc(680ms + var(--i, 0) * 120ms); }
.no-js .card .quote .stars svg, .no-js .card .quote__text, .no-js .card .quote__meta, .no-js .card .quote__link { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .card .quote .stars svg, .card .quote__text, .card .quote__meta, .card .quote__meta .avatar, .card .quote__link { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- CTA band ---------- */
.cta {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(80% 100% at 90% 0%, #3F63FF 0%, var(--blue) 50%, var(--blue-deep) 100%);
  color: #fff; border-radius: var(--r-xl);
  padding: clamp(2.5rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  text-align: center;
}
.cta .h2 { max-width: 18ch; margin-inline: auto; }
.cta .lead { color: #fff; margin: var(--s-5) auto 0; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-6); }
.cta .deco { position: absolute; z-index: -1; right: -6%; bottom: -30%; width: 46%; opacity: 0.14; pointer-events: none; }
.cta__note { margin-top: var(--s-5); font-size: var(--fs-small); color: rgba(255,255,255,0.92); }

/* CTA band: headline builds word by word, copy and buttons follow, emblem drifts in from the corner */
@keyframes cta-deco-in { to { opacity: 0.14; transform: none; } }
.cta .hw { display: inline-block; }
.cta.reveal .hw, .cta.reveal .lead, .cta.reveal .cta__actions, .cta.reveal .cta__note { opacity: 0; }
.cta.reveal .deco { opacity: 0; transform: translate(60px, 60px) scale(0.85); }
.cta.is-visible .hw { animation: hero-word-in 650ms var(--ease-out) both; animation-delay: calc(220ms + var(--i, 0) * 60ms); }
.cta.is-visible .lead { animation: hero-fade-up 600ms var(--ease-out) 640ms both; }
.cta.is-visible .cta__actions { animation: hero-fade-up 600ms var(--ease-out) 780ms both; }
.cta.is-visible .cta__note { animation: hero-fade-up 600ms var(--ease-out) 960ms both; }
.cta.is-visible .deco { animation: cta-deco-in 1400ms var(--ease-out) 300ms both; }
.no-js .cta .hw, .no-js .cta .lead, .no-js .cta .cta__actions, .no-js .cta .cta__note { opacity: 1; }
.no-js .cta .deco { opacity: 0.14; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cta .hw, .cta .lead, .cta .cta__actions, .cta .cta__note { opacity: 1 !important; transform: none !important; animation: none !important; }
  .cta .deco { opacity: 0.14 !important; transform: none !important; animation: none !important; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(3rem, 2rem + 4vw, 6rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
  background:
    radial-gradient(55% 70% at 90% 0%, rgba(24, 71, 237, 0.75) 0%, rgba(24, 71, 237, 0) 60%),
    linear-gradient(180deg, #0E1320 0%, var(--ink) 100%);
  color: #fff;
}
.page-hero .lead { color: rgba(255,255,255,0.78); margin-top: var(--s-5); }
@media (max-width: 599px) { .page-hero__deco, .hero__deco { display: none; } }
.page-hero__deco { position: absolute; z-index: -1; right: -6%; bottom: -35%; width: clamp(300px, 40vw, 620px); opacity: 0.08; pointer-events: none; }
.page-hero .h1 { max-width: 16ch; }

/* ---------- Prose (legal) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; margin-top: var(--s-7); margin-bottom: var(--s-3); }
.prose h3 { font-size: 1.0625rem; font-weight: 600; margin-top: var(--s-5); margin-bottom: var(--s-2); }
.prose p, .prose li { color: var(--text-2); line-height: 1.7; }
.prose ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.prose a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.prose .meta { color: var(--text-3); font-size: var(--fs-small); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); align-content: start; }
.field__label { font-weight: 600; font-size: var(--fs-small); }
.field__label .req { color: var(--blue); }
.field__input, .field__select {
  width: 100%; min-height: 56px; padding: 0.875rem 1.25rem;
  border: 1.5px solid var(--line-2); border-radius: var(--r-pill);   /* Revolut: every input is a pill */
  background: #fff; color: var(--text); font-size: 1rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field__input::placeholder { color: var(--text-3); }
.field__input:focus, .field__select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(24, 71, 237, 0.15); }
.field__select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234C4C4C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; }
.field__help { font-size: var(--fs-xs); color: var(--text-3); }
.field__error { display: none; font-size: var(--fs-small); color: var(--error); font-weight: 500; align-items: center; gap: 6px; }
.field__error svg { width: 16px; height: 16px; flex: none; }
.field.is-invalid .field__input, .field.is-invalid .field__select { border-color: var(--error); }
.field.is-invalid .field__error { display: inline-flex; }
.form__consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.5; }
.form__consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.form__consent a { text-decoration: underline; text-underline-offset: 2px; }
.form__status { display: none; padding: var(--s-4); border-radius: var(--r-md); font-weight: 500; align-items: flex-start; gap: var(--s-3); }
.form__status svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.form__status.is-error { display: flex; background: var(--error-bg); color: #991B1B; }
.form__status.is-success { display: flex; background: var(--success-bg); color: #166534; }
.form-card { background: #fff; border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2vw, 3rem); border: 1px solid var(--line); color: var(--text); }
.form-card .h3 { margin-bottom: var(--s-2); }
.form-card > .muted { margin-bottom: var(--s-5); }

.field__textarea { min-height: 148px; resize: vertical; line-height: 1.5; border-radius: var(--r-lg); }

/* ---------- Contact block ---------- */
.contact-list { display: grid; gap: var(--s-4); }
.contact-item { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-item svg { width: 22px; height: 22px; flex: none; color: var(--blue); margin-top: 3px; }
.on-dark .contact-item svg { color: #8FA6FF; }
.contact-item .label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.015em; font-weight: 600; color: var(--text-3); }
.on-dark .contact-item .label { color: var(--on-dark-3); }
.contact-item .value { font-weight: 500; }
.contact-item a.value { display: inline-flex; align-items: center; min-height: 44px; }
.contact-item a.value:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-item address.value a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-alt { margin-top: var(--s-7); color: rgba(255, 255, 255, 0.78); }
.contact-alt .link { display: flex; width: max-content; margin-top: var(--s-2); } /* own line: an inline 44px link would stretch the text line above it */

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--on-dark); padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--s-6); }
.footer__top { display: grid; gap: var(--s-7); grid-template-columns: 1fr; padding-bottom: var(--s-7); border-bottom: 1px solid var(--line-dark); }
@media (min-width: 800px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer__brand img { height: 40px; width: auto; }
.footer__brand p { margin-top: var(--s-4); color: var(--on-dark-2); max-width: 36ch; font-size: var(--fs-small); }
.footer__heading { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.015em; text-transform: uppercase; color: var(--on-dark-3); margin-bottom: var(--s-4); }
.footer__links { display: grid; gap: var(--s-1); }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-2); font-size: 0.9375rem; transition: color var(--dur-fast) var(--ease-out); }
.footer__links a:hover { color: #fff; }
.footer__contact { display: grid; gap: var(--s-3); color: var(--on-dark-2); font-size: 0.9375rem; }
.footer__contact a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; }
.footer__contact a:hover { color: #fff; }
.footer__contact svg { width: 18px; height: 18px; color: var(--on-dark-3); flex: none; }
.footer__contact address { display: flex; gap: var(--s-2); align-items: flex-start; padding-block: var(--s-2); }
.footer__contact address svg { margin-top: 3px; }
.footer__legal { padding-top: var(--s-6); display: grid; gap: var(--s-5); }
.footer__disclaimer { color: var(--on-dark-3); font-size: var(--fs-xs); line-height: 1.6; max-width: 100ch; }
.footer__disclaimer strong { color: var(--on-dark-2); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); color: var(--on-dark-3); font-size: var(--fs-xs); }
.footer__bottom a { color: var(--on-dark-2); display: inline-block; padding-block: 12px; }
.footer__bottom a:hover { color: #fff; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .btn.is-loading::after { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; }
}
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Utilities ---------- */
.mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); }
.text-center { text-align: center; }
.maxw-60 { max-width: 60ch; }
.divider { height: 1px; background: var(--line); }
.on-dark .divider { background: var(--line-dark); }
.icon { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin-right: 0.25em; }

/* ===================================================================== */
/* Bolder refine (Impeccable, Oct 2026)                                    */
/* ===================================================================== */

/* Service features: the service name leads the heading in brand blue (replaces the label above it) */
.feature__kind { color: var(--blue); }

/* Brand-blue editorial band (home "why" section): the page's colour peak */
section.on-blue { background: linear-gradient(160deg, #2453F5 0%, var(--blue) 42%, var(--blue-deep) 100%); color: #fff; }

/* Split list: a big statement on the left, ruled rows on the right (why band on blue, values on ink) */
.split-list { display: grid; gap: clamp(2rem, 1.25rem + 3vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
.split-list__title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h1); line-height: 1.02;
  letter-spacing: -0.035em; max-width: 12ch; text-wrap: balance;
}
@media (min-width: 900px) {
  .split-list { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .split-list__title { position: sticky; top: calc(var(--nav-h) + 2.5rem); }
}
.rule-list__item { position: relative; padding-block: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); }
.rule-list__item::before, .rule-list__item:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor; opacity: 0.3;
  transform-origin: left center;
}
.rule-list__item::before { top: 0; }
.rule-list__item:last-child::after { bottom: 0; }
.rule-list__item .h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem); line-height: 1.12; letter-spacing: -0.025em; }
.rule-list__item p { margin-top: var(--s-3); max-width: 50ch; font-size: 1.0625rem; line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.on-dark .rule-list__item p { color: var(--on-dark-2); }
/* the rule draws across as each row arrives */
.rule-list__item.reveal::before { transform: scaleX(0); transition: transform 900ms var(--ease-out) calc(120ms + var(--i, 0) * 140ms); }
.rule-list__item.is-visible::before, .no-js .rule-list__item::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .rule-list__item::before { transform: none !important; transition: none !important; } }

/* How We Help: an index of the three paths, each jumping to its detailed section below */
.paths { display: grid; gap: clamp(1.75rem, 1rem + 2vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.paths__item { padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.paths__item .h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.025em; }
.paths__item p { margin-top: var(--s-3); color: var(--text-2); max-width: 40ch; }
.paths__item .link { margin-top: var(--s-4); }
.feature[id] { scroll-margin-top: 1.5rem; }
#get-started-form { scroll-margin-top: 1rem; }

/* About: mission and audience as two statements, no boxes */
.duo { display: grid; gap: clamp(2rem, 1.25rem + 3vw, 4.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.duo__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.03em; }
.duo__item p { margin-top: var(--s-4); color: var(--text-2); font-size: var(--fs-lead); line-height: 1.5; max-width: 38ch; text-wrap: pretty; }
.duo__item .link { margin-top: var(--s-4); }

/* Get Started / Contact heroes: copy, then the form, then the reassurance; the form comes second on phones */
.hero__grid--form { align-items: start; grid-template-areas: "copy" "form" "extras"; }
.hero__grid--form > .hero__copy { grid-area: copy; }
.hero__grid--form > .form-card { grid-area: form; }
.hero__grid--form > .hero__extras { grid-area: extras; }
.hero__extras > * + * { margin-top: var(--s-6); }
@media (min-width: 1000px) {
  .hero__grid--form { grid-template-areas: "copy form" "extras form"; grid-template-rows: auto 1fr; row-gap: var(--s-7); }
}

.nav .btn { white-space: nowrap; }

/* ---------- Apply page: the calculator's next step, modelled on the direct-mail "verify your information" form ---------- */
.page-hero--form {
  padding-bottom: clamp(7rem, 5rem + 6vw, 10rem);
  background:
    radial-gradient(60% 80% at 92% 0%, rgba(36, 83, 245, 0.9) 0%, rgba(36, 83, 245, 0) 60%),
    linear-gradient(165deg, #1E44D8 0%, var(--blue-deep) 48%, #0B2A8F 100%);
}
.page-hero--form .lead { color: rgba(255, 255, 255, 0.9); max-width: 46ch; }
.page-hero--form .h1 { max-width: 14ch; }
.chip-secure {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-4);
  padding: 6px 14px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08); color: #fff;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.015em; text-transform: uppercase;
}
.chip-secure svg { width: 14px; height: 14px; }
.apply { padding-bottom: var(--section-y); }
.apply__card { position: relative; max-width: 760px; margin: calc(-1 * clamp(5.5rem, 4rem + 5vw, 8rem)) auto 0; }
.apply__card .form { gap: var(--s-5); }
.form-section { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-section + .form-section { padding-top: var(--s-6); border-top: 1px solid var(--line); }
.form-section__title { float: left; width: 100%; padding: 0; margin-bottom: var(--s-4); font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; } /* float: keeps the legend off the fieldset's top border */
.form-section__title + * { clear: both; }
.form-section__body { display: grid; gap: var(--s-4); }
.field__label .opt { font-weight: 400; color: var(--text-2); }
.input-money { position: relative; }
.input-money > span { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-2); font-weight: 500; pointer-events: none; }
.input-money .field__input { padding-left: 2rem; font-variant-numeric: tabular-nums; }
.form__required { font-size: var(--fs-xs); color: var(--text-2); }
.form__required .req, .form__consent .req { color: var(--blue); }
.apply__card .btn svg { width: 18px; height: 18px; }
.apply__card .xs a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#apply-form { scroll-margin-top: 1rem; }
/* Date of birth: same 56px height as the other fields, empty state in the placeholder grey, value left-aligned on iOS */
.field__input[type="date"] { height: 56px; line-height: 1.2; }
.field__input[type="date"]:invalid:in-range::-webkit-datetime-edit { color: var(--text-3); }
.field__input::-webkit-date-and-time-value { text-align: left; }
/* WebKit ignores color on the empty segments; its own rule because other engines drop rules with these selectors */
#date-of-birth:invalid:in-range::-webkit-datetime-edit-month-field:not(:focus),
#date-of-birth:invalid:in-range::-webkit-datetime-edit-day-field:not(:focus),
#date-of-birth:invalid:in-range::-webkit-datetime-edit-year-field:not(:focus) { -webkit-text-fill-color: var(--text-3); }
/* Apply page: offer-code lookup (fills in the letter's name and address) */
.offer-lookup__note { font-size: var(--fs-small); color: var(--text-2); }
.offer-lookup__row { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .offer-lookup__row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.offer-lookup__row .btn { min-height: 56px; }
.offer-lookup__status:empty { position: absolute; }   /* out of the layout but still in the accessibility tree, so the first message is announced */
.no-js [data-offer-find], .no-js .offer-lookup__note { display: none; }   /* without JavaScript the code just goes in with the form */
.no-js .offer-lookup__row { grid-template-columns: minmax(0, 1fr); }
.offer-lookup__status { font-size: var(--fs-small); font-weight: 500; color: var(--text-2); }
.offer-lookup__status.is-success { color: #166534; }
.offer-lookup__status.is-error { color: var(--error); }
/* Name and address filled in from the letter: a soft brand tint until the applicant edits the field */
.field__input.is-prefilled, .field__select.is-prefilled { background-color: var(--blue-tint); border-color: var(--blue); }
/* focus can't show by turning the border blue (it already is), so a filled field gets an outline ring instead */
.field__input.is-prefilled:focus, .field__select.is-prefilled:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Apply page consent (direct-mail wording) and its legal pop-ups */
.consent-text { display: grid; gap: var(--s-3); font-size: var(--fs-xs); line-height: 1.6; color: var(--text-2); }
.consent-text a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.consent-text .nowrap { white-space: nowrap; }
.text-link {
  appearance: none; -webkit-appearance: none; display: inline; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.legal-dialog {
  width: min(640px, calc(100vw - 2 * var(--gutter))); max-height: min(85vh, 720px); padding: 0; border: 0;
  border-radius: var(--r-xl); background: #fff; color: var(--text); box-shadow: var(--shadow-lg);
}
.legal-dialog[open] { display: flex; flex-direction: column; }
.legal-dialog::backdrop { background: rgba(11, 13, 18, 0.55); }
.legal-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-5) var(--s-3); }
.legal-dialog__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.legal-dialog__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--text); cursor: pointer; }
.legal-dialog__close svg { width: 20px; height: 20px; }
.legal-dialog__body { display: grid; gap: var(--s-3); overflow: auto; padding: 0 var(--s-5); font-size: var(--fs-small); line-height: 1.6; color: var(--text-2); }
.legal-dialog__body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.legal-dialog__foot { display: flex; justify-content: flex-end; padding: var(--s-4) var(--s-5) var(--s-5); }
/* Calculator: "Have an offer code?" link under See my options (opens the apply page at the offer-code box) */
.calc__offer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; min-height: 44px;
  margin-top: var(--s-2); font-size: var(--fs-small); color: var(--text-2); text-align: center;
}
.calc__offer span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.calc__offer svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.calc__offer:hover svg { transform: translateX(3px); }
.calc__offer:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: var(--r-sm, 8px); }
#offer { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* ---------- Debt cards: skewed gradient panels behind frosted glass (owner, Oct 2026) ----------
   Recreates the "gradient card showcase" component in this site's CSS and colours: brand blue for what we help with,
   graphite for what we don't. Two skewed gradient panels (one sharp, one blurred into a glow) sit behind a glass content
   panel; on hover (mouse/trackpad only) the panels straighten and widen, two glass squares drift in, and the content
   slides left. Needs the dark section (.section--debt) so the white text reads wherever the glass extends past the panel. */
.section--debt { overflow: hidden; background: radial-gradient(70% 90% at 15% 0%, rgba(24, 71, 237, 0.22) 0%, rgba(24, 71, 237, 0) 60%), var(--ink); } /* hidden: the glow and skewed corners reach past the cards */
.section--debt .debt-grid { gap: clamp(2rem, 1rem + 3vw, 3.5rem); padding-block: var(--s-3); }
.debt-card { position: relative; isolation: isolate; padding: 0; background: none; border: 0; color: #fff; }
.debt-card--yes { --g1: #4C6BFF; --g2: var(--blue-deep); }
.debt-card--no { --g1: #525866; --g2: #20242E; }
.debt-card__panel {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 50px; width: 50%;
  border-radius: var(--r-lg); background: linear-gradient(315deg, var(--g1), var(--g2));
  transform: skewX(15deg); transition: left 500ms var(--ease-out), width 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.debt-card__panel--glow { filter: blur(30px); opacity: 0.75; }
.debt-card__blob {
  position: absolute; z-index: 2; top: 0; left: 0; width: 0; height: 0; opacity: 0; pointer-events: none;
  border-radius: var(--r-md); background: rgba(255, 255, 255, 0.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: all 100ms; animation: debt-blob 2s ease-in-out infinite;
}
.debt-card__blob--b { top: auto; left: auto; bottom: 0; right: 0; transition-duration: 500ms; animation-delay: -1s; }
@keyframes debt-blob { 0%, 100% { transform: translateY(10px); } 50% { transform: translate(-10px); } }
.debt-card__content {
  position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.05); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 500ms var(--ease-out);
}
@media (hover: hover) {
  .debt-card:hover .debt-card__panel { transform: skewX(0deg); left: 20px; width: calc(100% - 90px); }
  .debt-card:hover .debt-card__blob { top: -50px; left: 50px; width: 100px; height: 100px; opacity: 1; }
  .debt-card:hover .debt-card__blob--b { top: auto; left: auto; bottom: -50px; right: 50px; }
  .debt-card:hover .debt-card__content { transform: translateX(-25px); }
}
/* Text and icons on the dark glass */
.debt-card .h3 { color: #fff; }
.debt-card--no .debt-list li { color: rgba(255, 255, 255, 0.94); }
.debt-card--no .debt-list__icon { background: rgba(255, 120, 120, 0.16); color: #FF9F9F; }
.debt-card__note { color: rgba(255, 255, 255, 0.92); }
.debt-card__note a { color: #fff; }
.debt-card--no :focus-visible { outline-color: #fff; }
/* Touch screens: the same animation, played by scrolling. js/main.js ("Debt cards on touch screens") sets --dp from 0 to 1
   as a card nears the middle of the screen and back to 0 as it leaves; the text panel itself stays still. */
.debt-card.is-scroll-anim .debt-card__panel {
  transition: none; transform: skewX(calc(15deg * (1 - var(--dp, 0))));
  left: calc(50px - 30px * var(--dp, 0)); width: calc(50% + (50% - 90px) * var(--dp, 0));
}
.debt-card.is-scroll-anim .debt-card__blob {
  transition: none; opacity: var(--dp, 0); width: calc(100px * var(--dp, 0)); height: calc(100px * var(--dp, 0));
  top: calc(-50px * var(--dp, 0)); left: calc(50px * var(--dp, 0));
}
.debt-card.is-scroll-anim .debt-card__blob--b { top: auto; left: auto; bottom: calc(-50px * var(--dp, 0)); right: calc(50px * var(--dp, 0)); }
@media (prefers-reduced-motion: reduce) {
  .debt-card__panel, .debt-card__content, .debt-card__blob { transition: none; }
  .debt-card__blob { animation: none; }
}

/* ---------- Feature squares: 3D tilt that follows the mouse (owner, Oct 2026) ----------
   Recreates the "interactive product card" effect in this site's CSS, kept sharp: only the coloured square (background and
   emblem, no text) tilts in 3D; the card with the text floats on its own layer above it and only moves by whole pixels,
   so its text is never rotated, scaled or resampled. js/main.js ("Feature tilt") sets, while a mouse moves over a square:
   --ax/--ay/--ang (the tilt as an axis and angle, max 8deg like the reference), --s (square grows 3%) and --mx/--my
   (card shift, whole px). The tilt uses the individual rotate/scale properties, so the square's own entrance animation
   (on transform) is untouched. Mouse/trackpad only: still on touch screens (owner, Oct 2026) and with reduced motion. */
.feature__tilt { display: grid; min-width: 0; perspective: 1000px; aspect-ratio: 4 / 3; } /* the wrapper holds the 4:3 shape and grows with a taller card */
.feature__tilt > .feature__visual, .feature__tilt > .feature__float { grid-area: 1 / 1; }
.feature__tilt > .feature__visual { aspect-ratio: auto; min-height: 0; } /* the square fills the wrapper (its own 4:3 + overflow clip let Safari cut the card off) */
.feature__float {
  position: relative; z-index: 1; display: grid; place-items: center; pointer-events: none;
  padding: clamp(1.25rem, 1rem + 2vw, 3rem);
  translate: var(--mx, 0px) var(--my, 0px); transition: translate 400ms ease-in-out;
}
.feature__tilt .feature__visual {
  rotate: var(--ax, 0) var(--ay, 1) 0 calc(var(--ang, 0) * 1deg); scale: var(--s, 1);
  transition: rotate 400ms ease-in-out, scale 400ms ease-in-out, box-shadow 400ms ease-in-out;
}
.feature__tilt.is-tilting .feature__visual { transition: rotate 100ms ease-out, scale 200ms ease-out, box-shadow 200ms ease-out; box-shadow: 0 30px 60px -24px rgba(11, 13, 18, 0.45); }
.feature__tilt.is-tilting .feature__float { transition: none; } /* jumps between whole-pixel positions while moving: no in-between blur */
.feature__tilt .mock { transition: box-shadow 300ms ease-out; }
.feature__tilt.is-tilting .mock { box-shadow: 0 28px 56px -16px rgba(11, 13, 18, 0.45); }
@media (prefers-reduced-motion: reduce) {
  .feature__tilt .feature__visual { rotate: none; scale: none; transition: none; }
  .feature__float { translate: none; transition: none; }
}

/* ---------- How We Help hero: animated mesh gradient (owner, Oct 2026) ----------
   Recreates the "shader showcase" hero without React, in brand colours. js/hero-shader.js (Paper Shaders, WebGL) paints two
   mesh-gradient layers and the badge's pulsing ring; until it does, or without WebGL, the CSS gradient below shows. The
   scrim keeps the white type readable over the moving colours. */
.page-hero--shader {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 2rem); padding-bottom: clamp(3rem, 2rem + 3vw, 5.5rem);
  background:
    radial-gradient(70% 60% at 80% 20%, rgba(24, 71, 237, 0.75) 0%, rgba(24, 71, 237, 0) 60%),
    radial-gradient(60% 60% at 15% 85%, rgba(13, 54, 197, 0.6) 0%, rgba(13, 54, 197, 0) 60%),
    radial-gradient(50% 50% at 60% 70%, rgba(111, 140, 255, 0.35) 0%, rgba(111, 140, 255, 0) 60%),
    var(--ink);
}
.page-hero__shader { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-hero__shader-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease-out; }
.is-shader-ready .page-hero__shader-layer { opacity: 1; }
.is-shader-ready .page-hero__shader-layer--veil { opacity: 0.6; }
.page-hero__shader-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(125% 100% at 0% 100%, rgba(11, 13, 18, 0.78) 0%, rgba(11, 13, 18, 0.5) 45%, rgba(11, 13, 18, 0) 78%),
    linear-gradient(0deg, rgba(11, 13, 18, 0.6) 0%, rgba(11, 13, 18, 0.42) 55%, rgba(11, 13, 18, 0.22) 100%),
    linear-gradient(180deg, rgba(11, 13, 18, 0.35) 0, rgba(11, 13, 18, 0) 160px);
}
/* Wide screens: the text sits in the left column, so shade from the left and leave the colour free on the right */
@media (min-width: 768px) {
  .page-hero__shader-scrim {
    background:
      radial-gradient(125% 100% at 0% 100%, rgba(11, 13, 18, 0.78) 0%, rgba(11, 13, 18, 0.5) 45%, rgba(11, 13, 18, 0) 78%),
      linear-gradient(90deg, rgba(11, 13, 18, 0.55) 0%, rgba(11, 13, 18, 0.42) 50%, rgba(11, 13, 18, 0) 80%),
      linear-gradient(180deg, rgba(11, 13, 18, 0.35) 0, rgba(11, 13, 18, 0) 160px);
  }
}
.page-hero__content { position: relative; z-index: 1; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.shader-title { margin: 0; color: #fff; font-family: var(--font-display); }
.shader-title > span { display: block; }
.shader-title__lead {
  margin-bottom: 0.3rem; font-weight: 300; font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem); line-height: 1.1; letter-spacing: 0.01em;
  background: linear-gradient(135deg, #FFFFFF 0%, #E6ECFF 30%, #D3DCFF 55%, #FFFFFF 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: shader-title-shift 8s linear infinite;
}
@keyframes shader-title-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* max-width keeps "designed to / save you money" on two lines at every width, out of the bright right side */
.shader-title__main { max-width: 8em; font-weight: 800; font-size: clamp(2.5rem, 1.3rem + 4.8vw, 5.75rem); line-height: 0.98; letter-spacing: -0.035em; text-shadow: 0 10px 40px rgba(11, 13, 18, 0.35); }
.shader-title__soft { font-weight: 300; font-size: clamp(2.25rem, 1.2rem + 4.2vw, 5rem); line-height: 1.04; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.94); }
.page-hero--shader .lead { max-width: 36rem; margin-top: var(--s-5); color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 12px rgba(11, 13, 18, 0.45); }
.page-hero--shader .hero__actions { margin-top: var(--s-6); }
.page-hero--shader .hero__actions .btn { transition: transform 200ms var(--ease-out), background-color 200ms, border-color 200ms; }
@media (hover: hover) { .page-hero--shader .hero__actions .btn:hover { transform: scale(1.04); } }
.page-hero--shader .hero__actions .btn:active { transform: scale(0.97); }

/* Primary button: brand-blue gradient with an arrow chip that oozes out on hover (SVG "gooey" filter in the hero markup) */
.gooey-cta { display: inline-flex; filter: url(#gooey-filter); }
.btn--shader { position: relative; z-index: 0; padding-right: 3.75rem; color: #fff; border: 0; background: linear-gradient(90deg, var(--blue) 0%, #3F63FF 100%); }
.btn--shader:hover { background: linear-gradient(90deg, #0D36C5 0%, var(--blue) 100%); }   /* stays brand blue (the base .btn hover is graphite) */
.gooey-cta__arrow {
  position: absolute; z-index: -1; top: 50%; right: 6px; width: 44px; height: 44px; margin-top: -22px;
  display: grid; place-items: center; border-radius: 50%; background: #3F63FF; color: #fff;
  transition: transform 320ms var(--ease-out);
}
.gooey-cta__arrow svg { width: 18px; height: 18px; }
@media (hover: hover) { .gooey-cta:hover .gooey-cta__arrow { transform: translateX(46px); } }
.gooey-cta:focus-within .gooey-cta__arrow { transform: translateX(46px); }
/* Leave room beside the blue button for the arrow to slide into, so it never lands on the phone button */
@media (min-width: 480px) { .page-hero--shader .hero__actions { column-gap: 3.5rem; } }

@media (prefers-reduced-motion: reduce) {
  .shader-title__lead { animation: none; }
  .gooey-cta__arrow, .page-hero--shader .hero__actions .btn { transition: none; }
}


/* ===== Contact page: "contact with globe" layout in brand colours (Oct 2026) =====
   Centred heading; "Get in touch" links above a turning wireframe globe (js/contact-globe.js) beside the message
   form in a dark card. Phones stack heading, links, form, globe. */
.contact-hero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem));
  padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  background: radial-gradient(55% 45% at 50% 0%, rgba(24, 71, 237, 0.45) 0%, rgba(24, 71, 237, 0) 72%), var(--ink);
}
.contact-hero__head { max-width: 44rem; margin: 0 auto clamp(2.5rem, 2rem + 2.5vw, 4rem); text-align: center; }
.contact-hero__head .h1 { text-wrap: balance; }
.contact-hero :focus-visible { outline-color: #fff; }
.contact-hero__head .lead { max-width: 36rem; margin: var(--s-5) auto 0; color: rgba(255, 255, 255, 0.78); text-wrap: balance; }

.contact-hero__grid {
  display: grid; gap: var(--s-6); max-width: 66rem; margin: 0 auto;
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "touch" "form" "globe";
}
.contact-touch { grid-area: touch; }
.contact-card { grid-area: form; }
.contact-globe-wrap { grid-area: globe; position: relative; }
@media (min-width: 1000px) {
  .contact-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 4vw, 4rem); row-gap: var(--s-6);
    grid-template-areas: "touch form" "globe form"; align-items: start;
  }
  .contact-touch { padding-top: calc(clamp(1.5rem, 1rem + 2vw, 2.5rem) + 1px); }   /* "Get in touch" lines up with the card's title */
}

.contact-touch__title, .contact-card__title { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.contact-touch__text { max-width: 24rem; margin-top: var(--s-2); color: var(--on-dark-2); line-height: 1.6; }
.contact-links { display: grid; gap: var(--s-2); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.contact-link__address { font-style: normal; }
.contact-link {
  display: inline-flex; align-items: center; gap: var(--s-3); min-height: 48px;
  color: #D8D8DC; font-weight: 500; line-height: 1.35; transition: color var(--dur-fast) var(--ease-out);
}
.contact-link__icon {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: #909095;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.contact-link__icon svg { width: 17px; height: 17px; }
.contact-link:hover, .contact-link:focus-visible { color: #fff; }
.contact-link:hover .contact-link__icon, .contact-link:focus-visible .contact-link__icon { background: rgba(24, 71, 237, 0.16); border-color: rgba(111, 140, 255, 0.5); color: #9DB4FF; }
.contact-touch .contact-alt { margin-top: var(--s-6); font-size: var(--fs-small); }
.contact-touch .link { color: #fff; }

/* The globe: a square canvas showing only its top, faded into the section at the bottom */
.contact-globe {
  position: relative; height: 13rem; overflow: hidden;
  --globe-line: rgba(190, 204, 255, 0.62); --globe-outline: rgba(111, 140, 255, 0.9); --globe-dot: #6F8CFF;
}
.contact-globe canvas { position: absolute; top: 0; left: 0; display: block; opacity: 0; transition: opacity 1s var(--ease-out); }
.contact-globe.is-ready canvas { opacity: 1; }
.contact-globe::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, var(--ink) 8%, rgba(11, 13, 18, 0)); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .contact-globe canvas { cursor: grab; } .contact-globe.is-dragging canvas { cursor: grabbing; } }
.no-js .contact-globe-wrap { display: none; }

/* The form card, in the component's dark style */
.contact-card {
  position: relative; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-lg);
  background: var(--ink-2); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;   /* hairline highlight only, no drop shadow */
  color: #fff; color-scheme: dark;
}
.contact-card__sub { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--on-dark-2); }
.contact-card .req { color: #8FA6FF; }
.form-dots {
  height: 1rem; margin: var(--s-5) 0; color: rgba(255, 255, 255, 0.24);
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.25px); background-size: 6px 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.contact-card .field__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.015em; text-transform: uppercase; color: #ADADB2; }
.contact-card .field__input, .contact-card .field__select {
  min-height: 48px; padding: 0.75rem 1.125rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.04); color: #fff; caret-color: #9DB4FF;
}
.contact-card .field__select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23A9B0BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.contact-card .field__select option { background: var(--ink-2); color: #fff; }
@media (max-width: 359.98px) { .contact-card .field__select { padding-left: 0.875rem; padding-right: 2.25rem; background-position: right 0.625rem center; } }
.contact-card .field__textarea { min-height: 128px; border-radius: var(--r-lg); }
.contact-card .field__input::placeholder { color: #909095; }
.contact-card .field__input:hover, .contact-card .field__select:hover { border-color: rgba(255, 255, 255, 0.22); }
.contact-card .field__input:focus, .contact-card .field__select:focus { border-color: #8FA6FF; background-color: rgba(255, 255, 255, 0.06); box-shadow: 0 0 0 3px rgba(111, 140, 255, 0.45); }
.contact-card .field__input:-webkit-autofill, .contact-card .field__input:-webkit-autofill:hover { -webkit-text-fill-color: #fff; caret-color: #fff; box-shadow: 0 0 0 1000px #1C2029 inset; transition: background-color 600000s 0s; }
.contact-card .field__input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 1000px #1C2029 inset, 0 0 0 3px rgba(111, 140, 255, 0.45); }
.contact-card .field.is-invalid .field__input, .contact-card .field.is-invalid .field__select { border-color: #FF8A80; }
.contact-card .field__error { color: #FF9C94; }
.contact-card .form__status.is-error { background: rgba(255, 138, 128, 0.1); border: 1px solid rgba(255, 138, 128, 0.32); color: #FFB8B1; }
.contact-card .form__status.is-success { background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.32); color: #A7F3C0; }
.contact-card .form__consent { color: var(--on-dark-2); }
.contact-card .form__consent a { color: #fff; }
.contact-card .form__consent input { accent-color: #4C6BFF; }
.contact-card ::selection { background: #4C6BFF; color: #fff; }
.contact-card__submit { width: 100%; margin-top: var(--s-2); }
@media (min-width: 640px) { .contact-card__submit { width: auto; justify-self: start; padding-inline: 2.25rem; } }
.contact-card__note { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: #9C9CA1; }
.contact-card__note svg { width: 14px; height: 14px; flex: none; }

/* Contact links slide in from the left (after .reveal, so this offset wins; its reduced-motion reset follows it) */
.reveal--x { transform: translateX(-12px); }
.reveal[data-delay="5"] { transition-delay: 400ms; }
@media (prefers-reduced-motion: reduce) { .reveal--x { transform: none; } }

/* ===== About hero: "lamp" (Oct 2026) =====
   From the owner's React "Hero" component, in brand blue: two conic-gradient cones fan down from a bright bar, with a
   soft glow behind it; on load the cones, glow and bar widen and the copy rises into the light (0.8s, once). The hero
   fills the screen, with the lamp and the copy kept together as one block (.lamp-stage). The block is placed from the
   top by a screen-height offset rather than centred, so the web fonts swapping in (which re-wraps the text) can't move
   it, and the widening is a transform (scale), so neither counts as a layout shift. */
.page-hero--lamp {
  --lamp-w: 30rem;                               /* each cone, and the bar, at full width */
  --lamp-c: rgba(24, 71, 237, 0.75);             /* brand blue light */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  /* about centred on common screens (900px tall: bar ~205px down), close under the nav on short ones (phone landscape) */
  padding-top: calc(var(--nav-h) + clamp(1rem, 68vh - 30rem, 24rem)); padding-top: calc(var(--nav-h) + clamp(1rem, 68svh - 30rem, 24rem));
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 5rem);
  background: var(--ink); text-align: center;
}
@media (max-width: 599.98px) { .page-hero--lamp { --lamp-w: min(30rem, 64vw); } }
.lamp-stage { position: relative; padding-top: clamp(6.5rem, 5rem + 4vw, 9rem); }   /* the copy starts in the light, under the bar */
.lamp { position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 16rem; pointer-events: none; }
.lamp > * { position: absolute; top: 0; }
.lamp__cone { width: var(--lamp-w); height: 14rem; animation: lamp-cone 0.8s ease-in-out 0.3s both; }
.lamp__cone--left { transform-origin: right center; }
.lamp__cone--right { transform-origin: left center; }
.lamp__cone--left { right: 50%; background-image: conic-gradient(from 70deg at center top, var(--lamp-c), transparent, transparent); }
.lamp__cone--right { left: 50%; background-image: conic-gradient(from 290deg at center top, transparent, transparent, var(--lamp-c)); }
/* Each cone fades out toward its bottom and its outer side (one mask on the cone, so no edges show) */
.lamp__cone--left {
  -webkit-mask-image: linear-gradient(to top, transparent, #000 10rem), linear-gradient(to right, transparent, #000 10rem); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, transparent, #000 10rem), linear-gradient(to right, transparent, #000 10rem); mask-composite: intersect;
}
.lamp__cone--right {
  -webkit-mask-image: linear-gradient(to top, transparent, #000 10rem), linear-gradient(to left, transparent, #000 10rem); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, transparent, #000 10rem), linear-gradient(to left, transparent, #000 10rem); mask-composite: intersect;
}
.lamp__glow, .lamp__bulb, .lamp__line { left: 0; right: 0; margin-inline: auto; }
.lamp__glow { width: 28rem; max-width: 92vw; height: 9rem; border-radius: 50%; background: rgba(24, 71, 237, 0.6); opacity: 0.8; filter: blur(64px); translate: 0 30%; }
.lamp__bulb { width: 16rem; height: 9rem; border-radius: 999px; background: rgba(76, 107, 255, 0.6); filter: blur(40px); translate: 0 -20%; animation: lamp-bulb 0.8s ease-in-out 0.3s both; }
.lamp__line { width: var(--lamp-w); height: 2px; background: #8FA6FF; box-shadow: 0 0 12px rgba(111, 140, 255, 0.8); animation: lamp-line 0.8s ease-in-out 0.3s both; }
@keyframes lamp-cone { from { scale: 0.5 1; opacity: 0.5; } }   /* half width to full, growing out from the middle */
@keyframes lamp-bulb { from { scale: 0.5 1; } }
@keyframes lamp-line { from { scale: 0.5 1; } }
.lamp__content { position: relative; animation: lamp-rise 0.8s ease-in-out 0.3s both; }
@keyframes lamp-rise { from { transform: translateY(100px); opacity: 0.5; } }
.page-hero--lamp .h1 { max-width: 18ch; margin-inline: auto; text-wrap: balance; }
.lamp__nw { white-space: nowrap; }   /* never break "debt-free" at its hyphen */
@media (max-width: 359.98px) { .page-hero--lamp .h1 { font-size: 2.25rem; } }   /* the old hero's floor: two lines on the narrowest phones */
.page-hero--lamp .lead { max-width: 38rem; margin-inline: auto; color: rgba(255, 255, 255, 0.8); text-wrap: balance; }
.page-hero--lamp .hero__actions { justify-content: center; }
/* (after the rules above, so it wins) */
@media (prefers-reduced-motion: reduce) { .lamp__cone, .lamp__bulb, .lamp__line, .lamp__content { animation: none; } }

/* ===== Interactive hover button (Oct 2026, from the owner's React component, brand colours) =====
   A white pill with a small blue dot. While it is pressed (.is-on, set by js/main.js, or :active) the dot floods the
   pill blue, the label slides out to the right and a white "label →" slides in from the right; otherwise it stays white
   (owner, Oct 2026: blue only on press). Everything moves by transform (the fill is a big circle scaled up from the dot),
   so nothing counts as a layout shift. */
.hover-btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  min-width: 11.5rem; min-height: 52px; padding: 0.75rem 1.75rem 0.75rem 2.5rem; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--r-pill); background: #fff; color: var(--ink);
  font-weight: 600; font-size: 1rem; line-height: 1.2; white-space: nowrap; text-decoration: none;
  box-shadow: 0 12px 32px rgba(11, 13, 18, 0.28); -webkit-tap-highlight-color: transparent;
  transition: scale 0.2s var(--ease-out);
}
.hover-btn:active { scale: 0.97; }
.hover-btn__text { display: inline-block; transition: translate 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
.hover-btn__fill {
  position: absolute; z-index: 1; left: calc(1.25rem + 4px - 170px); top: calc(50% - 170px); width: 340px; height: 340px;
  border-radius: 50%; background: var(--blue); scale: 0.0236;              /* an 8px dot until it floods the pill */
  transition: scale 0.45s var(--ease-out);
}
.hover-btn__reveal {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  color: #fff; opacity: 0; translate: 3rem 0; transition: translate 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.hover-btn__reveal svg { width: 18px; height: 18px; flex: none; }
.hover-btn.is-on .hover-btn__text, .hover-btn:active .hover-btn__text { translate: 3rem 0; opacity: 0; }
.hover-btn.is-on .hover-btn__fill, .hover-btn:active .hover-btn__fill { scale: 1; }
.hover-btn.is-on .hover-btn__reveal, .hover-btn:active .hover-btn__reveal { translate: -0.25rem 0; opacity: 1; }
.hover-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Phone hero: the button sits over the photo's lower left, in the first screen (desktop has the calculator instead) */
.hero-go { display: none; }
@media (max-width: 999px) {
  .hero--photo .hero-go {
    display: inline-flex; grid-area: 1 / 1; z-index: 2; align-self: end; justify-self: start;
    margin: 0 0 1.5rem var(--gutter); animation: hero-fade-up 700ms var(--ease-out) 900ms both;
  }
  .hero--photo.is-photo-failed .hero-go { display: none; }   /* no photo, no room reserved for it: the action bar has it */
}
@media (prefers-reduced-motion: reduce) { .hero--photo .hero-go { animation: none; } }