/* ==========================================================================
   The Client Base — stylesheet
   Private client book transactions for financial advisers.

   One accent colour (ink navy), one display face (Instrument Serif) used
   only where it earns its place, hairline rules instead of boxes, and no
   shadows. Every colour is defined once in the token block below.
   ========================================================================== */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ======================================================================
     LAYERED SURFACE SYSTEM
     Every background on the site is one of these six layers, and every
     layer has matched foreground tokens below it. Contrast ratios are
     measured, not estimated — the figure after each is the WCAG 2.1
     contrast ratio against the surface it is designed to sit on.
     AA body text needs 4.5:1; UI component boundaries need 3:1.
     ====================================================================== */

  --surface-page: #fcfaf6; /* base paper */
  --surface-raised: #fffefb; /* inputs, anything lifted off the page */
  --surface-sunken: #f2efe8; /* alternating bands */
  --surface-accent: #e3f1fc; /* accent tint — selected states, consent */
  --surface-inverse: #11263c; /* dark sections, footer */
  --surface-inverse-deep: #0b1b2d; /* deepest, for layering on inverse */

  /* --- Foreground on light surfaces ----------------------------------- */
  --on-surface: #15191a; /* 17.0:1 on page · 15.4:1 on sunken */
  --on-surface-muted: #565c58; /*  6.6:1 on page ·  6.0:1 on sunken */
  --on-surface-subtle: #5b6b7c; /*  5.3:1 on page ·  4.8:1 on sunken */

  /* --- Foreground on inverse surfaces --------------------------------- */
  --on-inverse: #fcfaf6; /* 14.7:1 on inverse */
  --on-inverse-muted: #bfc3c6; /*  8.7:1 on inverse */
  --on-inverse-subtle: #8fa6bc; /*  6.1:1 on inverse */

  /* --- Rules and borders ---------------------------------------------- */
  --rule: #e3ded2; /* decorative hairlines — not load-bearing */
  --rule-strong: #d1cab9; /* emphasis hairlines */
  --border-control: #8d8268; /*  3.8:1 on raised — WCAG 1.4.11 */
  --rule-inverse: rgba(252, 250, 246, 0.17);

  /* --- Accents ---------------------------------------------------------
     Deep ink navy, not a fintech blue. It stays out of the bright end of
     the spectrum, and it sits on warm ivory paper rather than cold white —
     that pairing is what keeps it editorial instead of SaaS.
     ------------------------------------------------------------------- */
  --accent: #1a3f63; /* 10.4:1 with ivory on it */
  --accent-hover: #24537f; /*  7.7:1 with ivory on it */
  --accent-light: #a0d8f7; /* 10.0:1 on inverse — the supplied baby blue */
  --accent-light-deep: #7ec3ee;
  --tan: #bd896b; /* supporting warm tone, used sparingly */
  --error: #8c3a1e; /*  7.4:1 on page */

  /* --- Aliases kept so component rules read in plain language ---------- */
  --ivory: var(--surface-page);
  --white: var(--surface-raised);
  --stone: var(--surface-sunken);
  --accent-subtle: var(--surface-accent);
  --ink: var(--on-surface);
  --body: var(--on-surface-muted);
  --body-light: var(--on-inverse-muted);
  --sage: var(--on-inverse-subtle);
  --line: var(--rule);
  --line-strong: var(--rule-strong);
  --line-dark: var(--rule-inverse);

  --display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --sans: "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;

  --r-sm: 4px;
  --r-md: 6px;

  --wrap: 74rem;
  --measure: 34rem;

  --section-y: clamp(4.75rem, 8.5vw, 8.5rem);
}

/* --- reset -------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  /* 17px root. Every rem-based size on the site scales from here — the
     audience skews older and the old 16px base ran small. */
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--surface-page);
  background-image:
    radial-gradient(
      118% 78% at 12% -12%,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0) 58%
    ),
    radial-gradient(
      86% 58% at 102% -6%,
      rgba(189, 137, 107, 0.07) 0%,
      rgba(189, 137, 107, 0) 55%
    );
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

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

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

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

::selection {
  background: #cbe9fb;
}

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

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 60;
  background: var(--accent);
  color: var(--ivory);
  padding: 0.7rem 1.1rem;
  border-radius: var(--r-sm);
}

/* Paper grain. The single thing that stops flat cream reading as a default
   background rather than a stock. Sits above everything, catches no clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* --- typography --------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

.display,
h1,
h2 {
  font-family: var(--display);
  letter-spacing: -0.012em;
  color: var(--ink);
}

h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  line-height: 1.01;
  letter-spacing: -0.018em;
}

h2 {
  font-size: clamp(2.05rem, 4vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

/* Sub-headings drop back to the sans — the serif is for statements only */
h3,
h4 {
  font-family: var(--sans);
  font-weight: 550;
  font-size: 1.06rem;
  letter-spacing: -0.003em;
  line-height: 1.45;
  color: var(--ink);
}

h1 em,
h2 em,
.statement em {
  font-style: italic;
  letter-spacing: -0.005em;
}

p {
  text-wrap: pretty;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--body);
  margin-bottom: 1.5rem;
}

.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--line-strong);
  flex: none;
}

.section--dark .eyebrow::before {
  background: rgba(252, 250, 246, 0.35);
}

.creed .eyebrow {
  justify-content: center;
}

.lead {
  max-width: var(--measure);
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--body);
}

@media (min-width: 768px) {
  .lead {
    font-size: 1.16rem;
  }
}

.copy {
  max-width: var(--measure);
  color: var(--body);
}

.copy p + p {
  margin-top: 1.25rem;
}

.note {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--body);
}

.textlink {
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.textlink:hover {
  border-bottom-color: var(--accent);
}


/* Every small-caps label in the system carries the same leading rule */
.snapshot__label,
.aside-block h2,
.talk-first h2,
.site-footer h2 {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.section--dark .snapshot__label {
  color: var(--accent-light);
}

.section--dark .snapshot__label::before {
  background: rgba(160, 216, 247, 0.5);
}

.snapshot__label::before,
.aside-block h2::before,
.talk-first h2::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--line-strong);
  flex: none;
}

/* --- layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 768px) {
  .wrap {
    padding: 0 2.5rem;
  }
}

@media (min-width: 1280px) {
  .wrap {
    padding: 0 3rem;
  }
}

.wrap--prose {
  max-width: 48rem;
}

.section {
  padding: var(--section-y) 0;
  scroll-margin-top: 4.5rem;
}

.section--stone {
  background: var(--surface-sunken);
}

.section--dark {
  position: relative;
  overflow: hidden;
  background: var(--surface-inverse);
  color: var(--body-light);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--ivory);
}

.section--dark .eyebrow {
  color: var(--accent-light);
}

.section--dark .eyebrow::before {
  background: rgba(160, 216, 247, 0.5);
}

.section--dark .lead,
.section--dark .copy {
  color: var(--body-light);
}

.section--dark .textlink {
  color: var(--accent-light);
  border-bottom-color: rgba(160, 216, 247, 0.45);
}

.section--dark .textlink:hover {
  border-bottom-color: var(--accent-light);
}

.ruled-top {
  border-top: 1px solid var(--line);
}

/* Section heading block — consistent everywhere */
.head {
  position: relative;
  max-width: 40rem;
}

/* A running index down the left margin, the way a report numbers its
   sections. Only where the page is wide enough to hold it cleanly. */
@media (min-width: 1400px) {
  .head[data-idx]::before {
    content: attr(data-idx);
    position: absolute;
    left: -4.75rem;
    top: 0.15rem;
    font-family: var(--display);
    font-size: 1.05rem;
    line-height: 1;
    color: var(--line-strong);
    font-variant-numeric: lining-nums;
  }

  .section--dark .head[data-idx]::before {
    color: rgba(252, 250, 246, 0.3);
  }
}

.head .lead {
  margin-top: 1.5rem;
}

.head + * {
  margin-top: clamp(2.75rem, 5vw, 4rem);
}

.split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--lead {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(3rem, 7vw, 6rem);
  }

  .split--trail {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(3rem, 6vw, 5rem);
  }
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0.9rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  /* Full-width buttons on a phone wrap to two lines; flex centring alone
     leaves the wrapped lines ragged. */
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.btn--primary {
  background: var(--accent);
  color: var(--ivory);
}

.btn--primary:hover {
  background: var(--accent-hover);
}

.btn--outline {
  background: transparent;
  border-color: var(--border-control);
  color: var(--ink);
}

.btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--light {
  background: var(--ivory);
  color: var(--surface-inverse);
}

.btn--light:hover {
  background: var(--accent-light);
}

/* A navy button on a navy ground is invisible — invert it */
.section--dark .btn--primary {
  background: var(--on-inverse);
  color: var(--surface-inverse);
}

.section--dark .btn--primary:hover {
  background: var(--accent-light);
}

.section--dark .btn--outline {
  border-color: var(--rule-inverse);
  color: var(--on-inverse);
}

.section--dark .btn--outline:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: default;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

@media (max-width: 479px) {
  .actions .btn {
    width: 100%;
  }
}

/* --- brand marks -------------------------------------------------------- */

/* The engraved rosette, used only as a watermark. Never as an image with
   meaning — it is texture and provenance, not decoration to be read. */
.watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  color: var(--accent);
  opacity: 0.055;
}

.section--dark .watermark,
.site-footer .watermark {
  color: var(--ivory);
  opacity: 0.07;
}

.watermark svg,
.watermark img {
  display: block;
  width: 100%;
  height: auto;
}

/* Anything sharing a box with a watermark needs to sit above it */
.above {
  position: relative;
  z-index: 1;
}


/* --- header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Set the colour context for the whole bar, so anything nested inside
     inherits a foreground that works on navy rather than the page default. */
  color: var(--on-inverse);
  background: var(--surface-inverse);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--rule-inverse);
}

.menu-toggle {
  color: var(--on-inverse);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 76px;
}

@media (min-width: 1024px) {
  .site-header__inner {
    height: 84px;
  }
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* The logo ships as a flat-coloured file, so hover shifts its weight rather
   than its colour. */
.brand-logo {
  width: auto;
  height: 34px;
  opacity: 0.96;
  transition: opacity 0.2s ease;
}

.brand-lockup:hover .brand-logo {
  opacity: 1;
}

@media (min-width: 768px) {
  .brand-logo {
    height: 40px;
  }
}

@media (min-width: 1024px) {
  .brand-logo {
    height: 42px;
  }
}

.nav {
  display: none;
  align-items: center;
  gap: 2.5rem;
  margin-left: auto;
  margin-right: 2.5rem;
}

.nav a {
  position: relative;
  font-size: 0.92rem;
  color: var(--on-inverse-muted);
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.2s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--accent-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--on-inverse);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-cta {
  display: none;
  align-items: center;
  min-height: 42px;
  padding: 0.5rem 1.15rem;
  border-radius: var(--r-sm);
  background: var(--on-inverse);
  color: var(--surface-inverse);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.header-cta:hover {
  background: var(--accent-light);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-right: -0.5rem;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .nav,
  .header-cta {
    display: flex;
  }

  .menu-toggle {
    display: none;
  }
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--rule-inverse);
  background: var(--surface-inverse);
}

.mobile-nav.is-open {
  display: block;
}

@media (min-width: 1024px) {
  .mobile-nav.is-open {
    display: none;
  }
}

.mobile-nav__inner {
  padding: 0.5rem 0 2rem;
}

.mobile-nav a.mobile-link {
  display: block;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule-inverse);
  font-size: 1.05rem;
  color: var(--on-inverse);
  text-decoration: none;
}

.mobile-nav .btn {
  width: 100%;
  margin-top: 1.75rem;
}

/* --- hero --------------------------------------------------------------- */

.hero {
  padding: clamp(2.25rem, 3.5vw, 3.25rem) 0 0;
}

.hero .wrap,
.page-hero .wrap {
  position: relative;
  z-index: 1;
}

.hero .watermark {
  width: 54rem;
  right: -10rem;
  top: -32rem;
  opacity: 0.15;
}

@media (max-width: 899px) {
  .hero .watermark {
    width: 34rem;
    right: -13rem;
    top: -19rem;
    opacity: 0.12;
  }
}

/* Masthead line, as a printed research note would set it */
.hero__masthead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule-inverse);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--on-inverse-muted);
}

.hero__masthead span:last-child {
  color: var(--on-inverse-subtle);
}

.hero__grid {
  display: grid;
  gap: clamp(2.75rem, 5vw, 3.5rem);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4.5rem);
}

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) 19rem;
    column-gap: clamp(3rem, 5vw, 5rem);
  }

  /* A single hairline gives the composition its structure */
  .hero__aside {
    border-left: 1px solid var(--rule-inverse);
    padding-left: clamp(2rem, 3vw, 3rem);
  }
}

@media (max-width: 999px) {
  .hero__aside {
    border-top: 1px solid var(--rule-inverse);
    padding-top: 1.75rem;
  }
}

.hero h1 {
  max-width: 14ch;
}

.hero .lead {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  max-width: 33rem;
}

.hero__foot {
  padding: 1.4rem 0 clamp(3.5rem, 6vw, 5rem);
  border-top: 1px solid var(--rule-inverse);
}

/* Hero market snapshot — real figures, not decoration */
.snapshot__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--body);
}

.snapshot {
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule-inverse);
}

.snapshot__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule-inverse);
}

.snapshot__name {
  font-size: 1.02rem;
  color: var(--on-inverse);
}

.snapshot__val {
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--accent-light);
  font-variant-numeric: lining-nums;
}

.snapshot__note {
  margin-top: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--on-inverse-muted);
}

/* Trust strip as a masthead line, not cards */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.79rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--body);
}

.trust li {
  white-space: nowrap;
}

.section--dark .trust {
  color: var(--sage);
}

/* Trust strip closing a call-to-action section */
/* The closing call to action is centred, bookending the centred creed at the
   top of the page and giving the final ask a deliberate composition rather
   than a left column with an empty half. */
main > .section--dark:last-of-type {
  padding-bottom: 0;
}

main > .section--dark:last-of-type .head {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

main > .section--dark:last-of-type .eyebrow,
main > .section--dark:last-of-type .actions {
  justify-content: center;
}

main > .section--dark:last-of-type .lead {
  margin-left: auto;
  margin-right: auto;
}

main > .section--dark:last-of-type .cta-trust .trust {
  justify-content: center;
}

@media (min-width: 560px) {
  main > .section--dark:last-of-type .cta-trust .trust {
    display: flex;
  }
}

.cta-trust {
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
}

/* On small screens the four points read as a tidy two-by-two block rather
   than an uneven wrap. */
@media (max-width: 559px) {
  .trust {
    display: grid;
    /* minmax(0,1fr) rather than auto: auto columns size to their content and
       will push past the container on a narrow phone. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    line-height: 1.45;
  }

  .trust li {
    white-space: normal;
  }
}

.page-hero {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0 clamp(3.5rem, 6vw, 5rem);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 48rem;
}

.page-hero .watermark {
  width: 50rem;
  right: -11rem;
  top: -30rem;
  opacity: 0.15;
}

@media (max-width: 899px) {
  .page-hero .watermark {
    width: 32rem;
    right: -12rem;
    top: -20rem;
    opacity: 0.12;
  }
}

.page-hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 3.85rem);
  line-height: 1.03;
  max-width: 17ch;
}

.page-hero .lead {
  margin-top: 1.75rem;
  max-width: 36rem;
}

.page-hero .trust {
  margin-top: 2.5rem;
}

/* --- valuation table ---------------------------------------------------- */

.ledger {
  border-top: 1px solid var(--ink);
}

.ledger__head {
  display: none;
}

@media (min-width: 768px) {
  .ledger__head {
    display: grid;
    grid-template-columns: 1fr auto 1.1fr;
    gap: 2rem;
    align-items: baseline;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.17em;
    color: var(--body);
  }

  .ledger__head span:last-child {
    text-align: right;
  }
}

.ledger__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.25s ease;
}

@media (min-width: 768px) {
  .ledger__row {
    grid-template-columns: 1fr auto 1.1fr;
    gap: 2rem;
    align-items: baseline;
    padding: 1.75rem 0.75rem;
    margin: 0 -0.75rem;
  }

  .ledger__row {
    position: relative;
  }

  .ledger__row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: -1px;
    width: 2px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .ledger__row:hover {
    background: rgba(26, 63, 99, 0.03);
  }

  .ledger__row:hover::before {
    transform: scaleY(1);
  }
}

.ledger__name {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
}

.ledger__value {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.ledger__basis {
  font-size: 0.95rem;
  color: var(--body);
}

@media (min-width: 768px) {
  .ledger__basis {
    text-align: right;
  }
}

.ledger__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 1.5rem;
  font-size: 0.86rem;
  color: var(--body);
}

/* --- generic hairline lists (replaces most cards) ----------------------- */

.list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
}

.list > li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  color: var(--body);
}

.list--split {
  display: grid;
}

@media (min-width: 560px) {
  .list--split {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }
}

.section--dark .list,
.section--dark .list > li {
  border-color: var(--line-dark);
  color: var(--body-light);
}

/* Definition grid — used for value drivers. Cells, not cards. */
.grid-defs {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 640px) {
  .grid-defs {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
}

@media (min-width: 1024px) {
  .grid-defs--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-defs > div {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}

.grid-defs p {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
}

/* --- statement (dark confidentiality section) --------------------------- */

.statement {
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.8vw, 3.55rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ivory);
  max-width: 18ch;
}

.statement-note {
  margin-top: 2rem;
  max-width: 32rem;
  color: var(--body-light);
}

/* Creed — the one centred, full-width moment on the page */
.creed {
  position: relative;
  text-align: center;
}

.creed .watermark {
  width: min(46rem, 120%);
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
}

.creed .eyebrow {
  margin-bottom: 2rem;
}

.creed__statement {
  margin: 0 auto;
  max-width: 20ch;
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 4.35rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--ivory);
}

.creed__note {
  margin: 2rem auto 0;
  max-width: 38rem;
  color: var(--body-light);
}

.creed__points {
  display: grid;
  gap: 0;
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding: 0;
  border-top: 1px solid var(--line-dark);
  list-style: none;
  text-align: left;
}

.creed__points > li {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--body-light);
}

.creed__points > li::before {
  content: attr(data-n);
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--accent-light);
  font-variant-numeric: lining-nums;
}

@media (min-width: 860px) {
  .creed__points {
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--line-dark);
  }

  .creed__points > li {
    padding: 2rem 2rem 2.25rem 0;
    border-bottom: 0;
  }

  .creed__points > li + li {
    border-left: 1px solid var(--line-dark);
    padding-left: 2rem;
  }
}

/* --- image band --------------------------------------------------------- */

/* A full-bleed plate with a statement over it. Breaks the run of typographic
   sections and gives the page a change of gear. */
.band {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(24rem, 46vw, 34rem);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background: var(--surface-inverse);
  overflow: hidden;
}

.band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Any photograph dropped in here takes the brand treatment automatically —
   desaturated, darkened, and washed with the ink navy. */
.band__media--photo img {
  filter: grayscale(1) brightness(0.62) contrast(1.08);
}

.band__media--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-inverse);
  mix-blend-mode: color;
}

/* Keeps the statement legible whatever the image behind it */
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(17, 38, 60, 0.93) 0%,
    rgba(17, 38, 60, 0.76) 42%,
    rgba(17, 38, 60, 0.26) 100%
  );
}

.band__inner {
  max-width: 40rem;
}

.band .eyebrow {
  color: var(--accent-light);
}

.band .eyebrow::before {
  background: rgba(160, 216, 247, 0.5);
}

.band__quote {
  font-family: var(--display);
  font-size: clamp(1.65rem, 3.2vw, 2.5rem);
  line-height: 1.22;
  letter-spacing: -0.014em;
  color: var(--ivory);
}

.band__attrib {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-dark);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-light);
}

/* --- big figure (50+) --------------------------------------------------- */

.figure-block {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}

.figure {
  font-family: var(--display);
  font-size: clamp(4.25rem, 10vw, 6.75rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.figure-label {
  font-size: 0.79rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--body);
  max-width: 11rem;
  line-height: 1.5;
}

.section--dark .figure {
  color: var(--accent-light);
}

.section--dark .figure-label {
  color: var(--sage);
}

/* --- process 01–04 ------------------------------------------------------ */

.process {
  list-style: none;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .process {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .process {
    grid-template-columns: repeat(4, 1fr);
  }
}

.process > li {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
  .process > li {
    padding: 2rem 2rem 2.25rem 0;
    border-bottom: 0;
  }

  .process > li + li {
    border-left: 1px solid var(--line);
    padding-left: 2rem;
  }

  .process > li:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .process > li:nth-child(1),
  .process > li:nth-child(2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (min-width: 1100px) {
  .process > li:nth-child(1),
  .process > li:nth-child(2) {
    border-bottom: 0;
  }

  .process > li:nth-child(3) {
    border-left: 1px solid var(--line);
    padding-left: 2rem;
  }
}

.process__num {
  display: block;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.process h3 {
  margin-top: 1.1rem;
}

.process p {
  margin-top: 0.6rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--body);
}

/* --- numbered sequence (what happens after) ----------------------------- */

.sequence {
  list-style: none;
  padding: 0;
  counter-reset: seq;
  border-top: 1px solid var(--line);
}

.sequence > li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--body);
}

.sequence > li::before {
  counter-increment: seq;
  content: "0" counter(seq);
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.section--dark .sequence,
.section--dark .sequence > li {
  border-color: var(--line-dark);
  color: var(--body-light);
}

.section--dark .sequence > li::before {
  color: var(--accent-light);
}

.emphasis {
  margin-top: 2rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 26ch;
}

.section--dark .emphasis {
  color: var(--ivory);
}

/* --- worked examples ---------------------------------------------------- */

.examples {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

@media (min-width: 860px) {
  .examples {
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.example {
  padding: 1.75rem 0 2rem;
  border-bottom: 1px solid var(--line);
}

.example h3 {
  font-size: 1.02rem;
}

.example dl {
  margin-top: 1.5rem;
}

.example .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.5rem 0;
}

.example dt {
  font-size: 0.92rem;
  color: var(--body);
}

.example dd {
  margin: 0;
  font-size: 1.04rem;
  color: var(--ink);
  text-align: right;
}

.example .row--total {
  display: block;
  margin-top: 0.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.example .row--total dd {
  margin-top: 0.35rem;
  font-family: var(--display);
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--accent);
  text-align: left;
}

/* --- FAQ ---------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.4rem 0;
  font-size: 1.12rem;
  font-weight: 450;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--accent);
}

.faq summary svg {
  flex: none;
  color: var(--on-surface-subtle);
  transition: transform 0.3s ease, color 0.2s ease;
}

.faq summary:hover svg {
  color: var(--accent);
}

.faq details[open] summary svg {
  transform: rotate(180deg);
}

.faq__body {
  padding-bottom: 1.75rem;
  max-width: 44rem;
}

.faq__body p {
  color: var(--body);
  font-size: 1.04rem;
}

.faq__body p + p {
  margin-top: 1.1rem;
}

/* --- forms -------------------------------------------------------------- */

.form-layout {
  display: grid;
  gap: clamp(3rem, 5vw, 4rem);
}

@media (min-width: 1024px) {
  .form-layout {
    grid-template-columns: 1.25fr 0.75fr;
    gap: clamp(3.5rem, 6vw, 6rem);
  }

  .form-layout__aside {
    position: sticky;
    top: 7.5rem;
    align-self: start;
  }
}

.form {
  border-top: 1px solid var(--ink);
  padding-top: 1.5rem;
}

.stepper {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  scroll-margin-top: 7rem;
}

.stepper__count {
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.stepper__name {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--body);
}

.stepper__track {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.stepper__track span {
  flex: 1;
  height: 2px;
  background: var(--line);
  transition: background-color 0.35s ease;
}

.stepper__track span.is-done {
  background: var(--accent);
}

.section--dark .site-footer__meta a:hover,
.site-footer__meta a:hover {
  color: var(--accent-light);
}

.footer-nav a:hover {
  color: var(--accent-light);
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.step {
  padding-top: clamp(2.25rem, 4vw, 3rem);
}

.js .step {
  display: none;
}

.js .step.is-active {
  display: block;
  animation: step-in 380ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

html:not(.js) .js-only {
  display: none;
}

@keyframes step-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.field + .field {
  margin-top: 2.25rem;
}

.field--tight + .field--tight {
  margin-top: 1.5rem;
}

.field-label {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
}

.optional {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--body);
}

.hint {
  margin: -0.25rem 0 0.9rem;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 32rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-control);
  border-radius: var(--r-sm);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select {
  height: 54px;
  padding: 0 1.1rem;
}

select {
  appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none' stroke='%23565c58' stroke-width='1.5'%3E%3Cpath d='M1 1L5.5 5.5L10 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
}

textarea {
  padding: 0.85rem 1.1rem;
  line-height: 1.65;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 63, 99, 0.10);
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--error);
}

.choices {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 560px) {
  .choices--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 56px;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--border-control);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.choice:hover {
  border-color: var(--accent);
}

.choice__dot {
  flex: none;
  width: 17px;
  height: 17px;
  border: 1px solid var(--border-control);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
}

.choice__dot::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.choice:has(input:checked) .choice__dot {
  border-color: var(--accent);
}

.choice input:checked + .choice__dot::after {
  transform: scale(1);
}

.choice:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.consent {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--accent-subtle);
}

.consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  font-size: 1.02rem;
  line-height: 1.6;
  cursor: pointer;
}

.consent input {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 3px;
  accent-color: #1a3f63;
}

.error {
  margin-top: 0.55rem;
  font-size: 0.94rem;
  color: var(--error);
}

.error:empty {
  margin: 0;
}

.form__actions {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.75rem;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 560px) {
  .form__actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.btn--back {
  background: none;
  border: 0;
  min-height: 48px;
  padding: 0 0.25rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--body);
  cursor: pointer;
  transition: color 0.2s ease;
}

.btn--back:hover {
  color: var(--accent);
}

.reassure {
  margin-top: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--body);
  max-width: 34rem;
}

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

/* Aside — hairline blocks, no boxes */
.aside-block + .aside-block {
  margin-top: 2.75rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--line);
}

.aside-block h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--body);
}

.aside-block .sequence,
.aside-block .list {
  margin-top: 1.25rem;
}

.aside-block .sequence > li {
  padding: 0.75rem 0;
  font-size: 1rem;
}

.aside-block .list > li {
  padding: 0.75rem 0;
  font-size: 1rem;
}

.aside-block .note {
  margin-top: 1.25rem;
}

.talk-first {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.talk-first h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--body);
}

.talk-first p {
  margin-top: 1rem;
  max-width: 34rem;
  font-size: 1.04rem;
  color: var(--body);
}

/* --- success ------------------------------------------------------------ */

.success {
  border-top: 1px solid var(--ink);
  padding-top: 2.5rem;
  scroll-margin-top: 7rem;
}

.success h1,
.success h2 {
  margin-top: 1.25rem;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1.12;
}

.success p {
  margin-top: 1.5rem;
  max-width: 34rem;
  color: var(--body);
}

/* --- transaction examples placeholder ----------------------------------- */

.awaiting {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 2.75rem 0;
}

.awaiting__title {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.6vw, 1.85rem);
  color: var(--ink);
}

.awaiting p {
  margin-top: 0.85rem;
  max-width: 38rem;
  font-size: 1.02rem;
  color: var(--body);
}

/* --- legal -------------------------------------------------------------- */

.legal section {
  padding-top: 2.5rem;
}

.legal section + section {
  margin-top: 0.5rem;
}

.legal h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
}

.legal section p {
  margin-top: 1.15rem;
  color: var(--body);
  font-size: 1.05rem;
}

.legal .updated {
  padding-bottom: 0.5rem;
  font-size: 0.86rem;
  color: var(--body);
}

/* --- footer ------------------------------------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--surface-inverse);
  color: var(--body-light);
  padding: clamp(4rem, 7vw, 6rem) 0 clamp(2.5rem, 4vw, 3.5rem);
}

.site-footer .watermark {
  width: 44rem;
  right: -13rem;
  bottom: -30rem;
}

@media (max-width: 899px) {
  .site-footer .watermark {
    width: 30rem;
    right: -12rem;
    bottom: -21rem;
  }
}

.site-footer .wrap {
  position: relative;
  z-index: 1;
}

/* The logo signs off at scale, the way a colophon does */
.footer-lockup {
  display: inline-flex;
  text-decoration: none;
}

.footer-logo {
  width: auto;
  height: clamp(46px, 7vw, 68px);
  opacity: 0.94;
  transition: opacity 0.2s ease;
}

.footer-lockup:hover .footer-logo {
  opacity: 1;
}

.site-footer__top {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .site-footer__top {
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 4rem;
  }
}

.site-footer__descriptor {
  margin-top: 1.5rem;
  max-width: 26rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--body-light);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  list-style: none;
  padding: 0;
}

@media (min-width: 768px) {
  .footer-nav {
    justify-content: flex-end;
  }
}

.footer-nav {
  gap: 0.9rem 2rem;
}

.footer-nav a {
  font-size: 0.98rem;
  color: var(--body-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-nav a:hover {
  color: var(--ivory);
}

.site-footer__base {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: clamp(3rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-dark);
}

@media (min-width: 900px) {
  .site-footer__base {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
  }
}

.site-footer__legal {
  max-width: 46rem;
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(252, 250, 246, 0.5);
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.86rem;
  color: rgba(252, 250, 246, 0.5);
}

.site-footer__meta a {
  color: rgba(252, 250, 246, 0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer__meta a:hover {
  color: var(--ivory);
}

/* --- motion ------------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

  .js .reveal,
  .js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .step.is-active {
    animation: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   INSIGHTS — hub, article layout and editorial components

   Nothing below introduces a new colour. Every surface is one of the six
   layers declared at the top of this file and every foreground is the token
   matched to the surface it sits on.
   ========================================================================== */

/* --- breadcrumbs and byline (both sit in the dark hero) ------------------ */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--on-inverse-muted);
}

.crumbs a {
  color: var(--on-inverse-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.crumbs a:hover {
  color: var(--on-inverse);
  border-bottom-color: var(--accent-light);
}

.crumbs__sep {
  color: var(--on-inverse-subtle);
}

.crumbs [aria-current="page"] {
  color: var(--on-inverse-subtle);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-inverse);
  font-size: 0.84rem;
  color: var(--on-inverse-subtle);
}

.byline__who {
  color: var(--on-inverse);
  font-weight: 500;
}

.page-hero .byline + .trust {
  margin-top: 1.75rem;
}

/* --- the hub grid ------------------------------------------------------- */

.hub-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 760px) {
  .hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.hub-card {
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.75rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.hub-card:hover {
  border-color: var(--accent);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hub-card:hover {
    transform: translateY(-2px);
  }
}

@media (min-width: 760px) {
  .hub-card--featured {
    grid-column: 1 / -1;
    padding: 2.5rem 2.25rem 1.9rem;
  }
}

.hub-card__cat {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--accent);
}

.hub-card__title {
  margin-top: 1.1rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}

@media (min-width: 760px) {
  .hub-card--featured .hub-card__title {
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    max-width: 22ch;
  }
}

.hub-card__desc {
  margin-top: 0.85rem;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--body);
  max-width: 42rem;
}

.hub-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* auto margin pins the meta row to the foot, so cards of different
     lengths still line their read-times up across a row */
  margin-top: auto;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--on-surface-muted);
}

.hub-card__desc {
  padding-bottom: 1.6rem;
}

.hub-card__arrow {
  color: var(--accent);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hub-card:hover .hub-card__arrow {
  transform: translateX(4px);
}

/* --- article layout ----------------------------------------------------- */

.article__layout {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1120px) {
  .article__layout {
    grid-template-columns: 13.5rem minmax(0, 40rem);
    gap: clamp(3rem, 6vw, 5.5rem);
    justify-content: center;
  }
}

.toc-rail {
  display: none;
}

@media (min-width: 1120px) {
  .toc-rail {
    display: block;
    position: sticky;
    top: 7.5rem;
    align-self: start;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    padding-top: 0.4rem;
  }

  .toc-compact {
    display: none;
  }
}

.toc__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--body);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}

.toc__list li {
  border-bottom: 1px solid var(--rule);
}

.toc__list a {
  display: block;
  padding: 0.7rem 0;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--body);
  text-decoration: none;
  transition: color 0.2s ease;
}

.toc__list a:hover,
.toc__list a.is-current {
  color: var(--accent);
}

.toc-compact {
  margin-bottom: 2.5rem;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.toc-compact > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--body);
  cursor: pointer;
  list-style: none;
}

.toc-compact > summary::-webkit-details-marker {
  display: none;
}

.toc-compact > summary svg {
  flex: none;
  color: var(--accent);
  transition: transform 0.3s ease;
}

.toc-compact[open] > summary svg {
  transform: rotate(180deg);
}

.toc-compact .toc__list {
  padding-bottom: 0.75rem;
}

.toc-compact .toc__list li:last-child {
  border-bottom: 0;
}

/* --- prose -------------------------------------------------------------- */

.prose {
  max-width: 40rem;
  font-size: 1.06rem;
  line-height: 1.75;
  color: var(--body);
}

.prose > p {
  margin-top: 1.35rem;
}

.prose > p:first-child,
.prose > *:first-child {
  margin-top: 0;
}

/* The opening paragraph carries a little more weight, as a standfirst does */
.prose > p:first-of-type {
  font-size: 1.14rem;
  line-height: 1.66;
  color: var(--ink);
}

.prose h2 {
  margin-top: clamp(3rem, 5vw, 4.25rem);
  font-size: clamp(1.7rem, 3.1vw, 2.3rem);
  line-height: 1.12;
  scroll-margin-top: 6.5rem;
}

.prose h3 {
  margin-top: 2.5rem;
  font-size: 1.16rem;
  font-weight: 600;
  line-height: 1.4;
  scroll-margin-top: 6.5rem;
}

.prose h2 + p,
.prose h3 + p {
  margin-top: 1.1rem;
}

.prose strong {
  font-weight: 600;
  color: var(--ink);
}

.prose-list {
  margin-top: 1.35rem;
  padding-left: 0;
  list-style: none;
}

.prose-list li {
  position: relative;
  padding-left: 1.55rem;
  margin-top: 0.6rem;
}

.prose-list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.82em;
  width: 0.45rem;
  height: 1px;
  background: var(--accent);
}

.prose-list--num {
  counter-reset: prose-num;
}

.prose-list--num li {
  padding-left: 2.1rem;
}

.prose-list--num li::before {
  counter-increment: prose-num;
  content: counter(prose-num) ".";
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

/* --- pull quote --------------------------------------------------------- */

.pullquote {
  margin: clamp(2.25rem, 4vw, 3rem) 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 2px solid var(--accent);
}

.pullquote p {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.7vw, 1.85rem);
  line-height: 1.26;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* --- the indicative range statement ------------------------------------- */

.range {
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--r-md);
  background: var(--surface-accent);
  border-left: 3px solid var(--accent);
}

.range__figure {
  font-family: var(--display);
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.range__note {
  margin-top: 1rem;
  font-size: 0.92rem;
  line-height: 1.6;
  /* 5.0:1 on the pale accent tint */
  color: #4c5560;
  max-width: 34rem;
}

/* --- the calculator-style example card ---------------------------------- */

.calc {
  margin: clamp(2rem, 4vw, 2.75rem) 0;
  padding: 1.6rem 1.75rem 1.9rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--surface-raised);
}

.calc__tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--on-surface-muted);
}

.calc__rows {
  margin-top: 1.5rem;
}

.calc__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}

.calc__row dt {
  font-size: 0.98rem;
  color: var(--body);
}

.calc__row dd {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.calc__total {
  margin-top: 1.25rem;
}

.calc__total dt {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--body);
}

.calc__total dd {
  margin: 0.5rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.4vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

/* --- two offers, side by side ------------------------------------------- */

.compare {
  display: grid;
  gap: 1rem;
  margin: clamp(2rem, 4vw, 2.75rem) 0;
}

@media (min-width: 620px) {
  .compare {
    grid-template-columns: 1fr 1fr;
  }
}

.compare__item {
  padding: 1.4rem 1.5rem 1.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}

.compare__name {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--accent);
}

.compare__text {
  margin-top: 0.85rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body);
}

/* --- labelled steps ----------------------------------------------------- */

.steps {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  border-top: 1px solid var(--rule);
  counter-reset: step;
}

.steps > li {
  display: grid;
  gap: 0.3rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}

.steps__name {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}

.steps__text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--body);
}

@media (min-width: 620px) {
  .steps > li {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 0.35rem 2rem;
    align-items: baseline;
  }
}

/* --- tables ------------------------------------------------------------- */

.prose-table {
  margin: clamp(2rem, 4vw, 2.5rem) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.prose-table table {
  width: 100%;
  min-width: 26rem;
  border-collapse: collapse;
  font-size: 0.99rem;
}

.prose-table th {
  padding: 0.75rem 1.25rem 0.75rem 0;
  border-bottom: 1px solid var(--on-surface);
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--body);
  white-space: nowrap;
}

.prose-table td {
  padding: 0.95rem 1.25rem 0.95rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--body);
  vertical-align: top;
}

.prose-table tr td:first-child {
  color: var(--ink);
  font-weight: 500;
}

.prose-table th:last-child,
.prose-table td:last-child {
  padding-right: 0;
}

/* --- in-article call to action ------------------------------------------ */

.cta-panel {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0;
  padding: clamp(1.9rem, 4vw, 2.5rem) clamp(1.6rem, 3.5vw, 2.25rem);
  border-radius: var(--r-md);
  background: var(--surface-inverse);
  color: var(--on-inverse-muted);
  position: relative;
  overflow: hidden;
}

.cta-panel__title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  line-height: 1.15;
  letter-spacing: -0.014em;
  color: var(--on-inverse);
  max-width: 24ch;
}

.cta-panel p {
  margin-top: 0.9rem;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--on-inverse-muted);
  max-width: 34rem;
}

.cta-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1.85rem;
}

.cta-panel .btn--primary {
  background: var(--on-inverse);
  color: var(--surface-inverse);
}

.cta-panel .btn--primary:hover {
  background: var(--accent-light);
}

.cta-panel .textlink {
  color: var(--accent-light);
  border-bottom-color: rgba(160, 216, 247, 0.45);
}

.cta-panel .textlink:hover {
  border-bottom-color: var(--accent-light);
}

@media (max-width: 479px) {
  .cta-panel .btn {
    width: 100%;
  }
}

/* --- small print and author -------------------------------------------- */

.disclaimer {
  margin-top: clamp(2.5rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--body);
}

.author {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--rule-strong);
}

@media (min-width: 560px) {
  .author {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.brand-mark {
  width: auto;
  height: 44px;
}

.author__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--body);
}

.author__name {
  margin-top: 0.6rem;
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--ink);
}

.author__note {
  margin-top: 0.7rem;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--body);
}

/* --- article FAQ -------------------------------------------------------- */

.faq--article {
  margin-top: 1.75rem;
  border-top-color: var(--rule-strong);
}

.faq--article summary {
  font-size: 1.06rem;
  padding: 1.2rem 0;
  gap: 1.5rem;
}

.faq--article .faq__body p {
  font-size: 1.02rem;
}

.faq--article .faq__body .prose-list {
  margin-top: 1rem;
}

/* --- five nav items need a little more room ----------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {
  .nav {
    gap: 1.5rem;
    margin-right: 1.5rem;
  }

  .nav a {
    font-size: 0.86rem;
  }

  .header-cta {
    padding: 0.5rem 0.95rem;
    font-size: 0.84rem;
  }
}

/* Related insights run three-up so the third card is not stranded beside an
   empty cell the way it is in a two-column grid. */
@media (min-width: 920px) {
  .hub-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hub-grid--3 .hub-card__title {
    font-size: 1.32rem;
  }
}

/* The closing call to action sets centred, so its measure needs to be wider
   than the left-aligned default or the lines break awkwardly short. */
main > .section--dark:last-of-type .head .lead {
  max-width: 40rem;
}

main > .section--dark:last-of-type .head .lead + .lead {
  margin-top: 1.1rem;
}

/* Grid items default to min-width:auto, so a wide child — the scrolling
   table, in practice — pushes the whole column past the viewport instead of
   scrolling inside its own container. */
.article__layout > * {
  min-width: 0;
}

.prose {
  width: 100%;
}