/* ============================================================
   Capital Mortgages — design system
   Crisp white base · charcoal + brand red · refined serif headlines
   Fonts: Source Serif 4 (display) + General Sans (UI/body)
   ============================================================ */

:root {
  /* crisp, clean white — no cream cast, no texture (client feedback HP-2);
     soft/faint inks kept dark enough that nothing reads as faded gray */
  --bg: #ffffff;
  --bg-deep: #f4f3f0;
  --surface: #ffffff;
  --ink: #1c1c1b;
  --ink-soft: #38342e;
  --ink-faint: #524c42;
  --line: rgba(29, 27, 23, 0.12);
  --line-soft: rgba(29, 27, 23, 0.07);

  /* structural colour — charcoal (new default look; was deep teal #1f4e5f) */
  --accent: #3b3a39;
  --accent-deep: color-mix(in oklab, var(--accent), #14120e 35%);
  --accent-soft: color-mix(in oklab, var(--accent), #faf7f2 90%);
  --accent-mid: color-mix(in oklab, var(--accent), #faf7f2 72%);
  --on-accent: #f7f4ec;

  /* brand red — bold primary accent, drawn from the logo.
     --red-bright / --red-deep DERIVE from --red so recolouring the brand
     flows to every emphasis element that uses them — hero eyebrow, the
     "found" headline accent, stat numbers, button hovers… */
  /* Deepened from the logo's signal red #e01a26 to a brick that reads
     editorial rather than alarming. Everything below derives from it, so the
     buttons, the hero eyebrow and the stat figures all move together — this
     is the single value to change if the tone still isn't right. */
  --red: #a32833;
  --red-bright: color-mix(in oklab, var(--red), #ffffff 15%);
  --red-deep: color-mix(in oklab, var(--red), #1a0c08 30%);
  --red-soft: color-mix(in oklab, var(--red), #faf7f2 88%);
  --red-mid: color-mix(in oklab, var(--red), #faf7f2 70%);
  /* brand tuned for TEXT on the light editorial bands. The feature sections are
     light now (see .darkbg in glass.css), so brand labels/accents need a DARKENED
     brand — NOT the lightened --red-bright, which was for the old dark bands.
     Mixed toward the theme ink so it stays in-hue and clears 4.5:1 on every theme. */
  --brand-ink: color-mix(in oklab, var(--red), var(--ink) 36%);
  --brand: var(--red);
  --brand-deep: var(--red-deep);
  /* text colour on a brand FILL (buttons, selected tabs, accent pills). White by
     default; themes whose brand is light (e.g. Midnight Gold) override this to ink
     so filled controls stay legible. Drives every brand-filled control. */
  --on-brand: #ffffff;

  /* dark surfaces (largely vestigial — .darkbg is remapped light) — charcoal
     to match the new default palette (was teal #27535f/#2e5b68/#3a6f7d) */
  --dark: #343433;
  --dark-2: #403f3e;
  --dark-3: #565452;
  --on-dark: #eef4f5;
  --on-dark-soft: rgba(238, 244, 245, 0.84);
  --on-dark-faint: rgba(238, 244, 245, 0.66);
  --dark-line: rgba(238, 244, 245, 0.14);
  --dark-line-soft: rgba(238, 244, 245, 0.08);

  /* liquid glass material (overridden per light/dark context) */
  --glass-tint: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.22);
  --glass-hi: rgba(255, 255, 255, 0.34);
  --glass-blur: 16px;

  /* Type voice — emulates anthropic.com's pairing (grotesque headings/UI
     over a refined transitional body serif; their actual Anthropic Sans/
     Serif faces are proprietary): General Sans + Source Serif 4. */
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "General Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: var(--sans);

  --radius: 10px;
  --radius-lg: 16px;
  --btn-radius: 999px;
  /* nav capsule + its inner fills — a soft rounded square (not a full pill) */
  --nav-radius: 15px;
  --nav-pill-radius: 10px;
  --sect-gap: 96px;
  /* The page frame. Measured off anthropic.com (2026-08-27) and rebuilt to
     match its geometry rather than approximate it.

     Their model is a FLUID gutter — a constant ~5.4% of the viewport — until
     the content hits a cap, after which the frame simply centres and the
     leftover becomes margin. Ours was a FIXED 36px, which meant the page held
     the same margin at 1024 as at 2200: tight on a laptop, and narrower than
     theirs on a monitor.

     --maxw is the WRAP BOX, so it carries the gutter on both sides; the
     content it encloses caps at 1428 − 156 = 1272px, which is exactly what
     anthropic.com measures at 1600 and 2200. Verified against theirs at every
     size: 1024 → 913 vs their 909, 1280 → 1142 vs 1145, 1920 → 1272 @ 324
     gutter vs 1272 @ 324.

     The phone floor stays at 22px rather than following them to ~8.5% (33px
     at 390). Theirs can afford it; ours cannot — the header bar fits into
     375px with 21px of slack, and taking 22px back for air would put it
     straight back into horizontal scroll. */
  --maxw: 1428px;
  --gutter: clamp(22px, 5.4vw, 78px);
  --shadow-card: 0 1px 2px rgba(29,27,23,.05), 0 12px 32px -16px rgba(29,27,23,.18);
}

body[data-headline="serif"] { --display: var(--serif); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* body text is Lora; UI components opt back into Poppins via var(--sans) */
  font-family: var(--serif);
  /* 19px, up from 16.5. Measured against anthropic.com, whose base is 20px
     serif with 24px lead paragraphs: their headline-to-body ratio is ~3:1
     and ours was 5.3:1, which is why the hero read as shouting even after
     the headline came down — the body was too quiet to answer it. Raising
     the floor narrows the ratio to ~4.6:1 without touching the display
     sizes. */
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* brand-red selection — a small signature */
::selection { background: color-mix(in oklab, var(--red), #fff 78%); color: var(--ink); }

h1, h2, h3 {
  font-family: var(--display); font-weight: 600; letter-spacing: -0.025em;
  text-wrap: balance; margin: 0;
}
body[data-headline="serif"] h1,
body[data-headline="serif"] h2,
body[data-headline="serif"] h3 { letter-spacing: -0.012em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

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

/* standalone section headings (outside .section-head) */
.h2-solo { font-size: 40px; line-height: 1.12; margin-top: 14px; }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 18px; border-radius: 0 0 10px 0;
  font-size: 14px; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------- eyebrow / labels ---------- */
/* editorial kicker: a short rule, then the letterspaced label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; flex-shrink: 0;
  background: currentColor; opacity: .5; border-radius: 1px;
}

/* ---------- buttons ----------
   Sized off what the reference set does rather than one site: Stripe 4px /
   44px tall / weight 400, Mercury 4px, Anthropic 8px / weight 400. Four
   pixels is the crisp consensus — enough to not read as a hard-cornered
   box, far short of a pill. No shadow, no lift, and a transition that
   touches only colour. */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 15.5px; font-weight: 540;
  /* the body's 1.6 line-height was inflating every button to 55px; pinned to 1
     so height is padding + cap, which lands at ~46px — the reference set sits
     between 44 and 48 */
  line-height: 1;
  padding: 15px 22px; border-radius: var(--btn-radius); border: 1px solid transparent;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn .arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-solid { background: var(--brand); color: var(--on-brand); box-shadow: none; }
.btn-solid:hover { background: var(--red-deep); }
/* Secondary: a translucent tint, never an opaque slab. Every one of those
   sites tints its secondary and lets the ground show through — Stripe white
   at 65% over a brand-tinted hairline, Mercury a brand tint at 20%. An
   opaque white panel punches a hole in the photograph behind it and reads
   as a form control that wandered onto the page; a tint sits IN the image.
   The earlier version failed the other way round: fully transparent with a
   16% hairline is not a button at all. This is the middle — a definite
   chip, still part of the picture. */
.btn-ghost, .btn-glass {
  --gh-bg: color-mix(in oklab, var(--ink), transparent 91%);
  --gh-bg-hover: color-mix(in oklab, var(--ink), transparent 85%);
  --gh-text: var(--ink);
  --gh-border: color-mix(in oklab, var(--ink), transparent 68%);
  color: var(--gh-text);
  background: var(--gh-bg);
  border-color: var(--gh-border);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.btn-ghost:hover, .btn-glass:hover {
  background: var(--gh-bg-hover);
  border-color: color-mix(in oklab, var(--ink), transparent 50%);
}
.btn-light { background: var(--on-accent); color: var(--accent-deep); }
.btn-light:hover { background: #fff; }

/* ---------- header — flat sticky bar (anthropic.com-style) ----------
   Measured from the reference: the bar is position:sticky top:0 and its
   background is EXACTLY the page background, so at the top of the page it
   blends invisibly and only reads as a bar once content slides beneath it.
   We add the one embellishment the eye expects at that moment: a hairline +
   soft shadow that fade in while scrolled (and away again at the top).
   68px tall, links w500 with 12px side padding, dark radius-8 CTA. */
/* the brand leads the bar: the logo fills most of its height */
/* Logo up ~20% (56 → 67px) at the client's request. The bar has to grow with
   it or the mark ends up 2px from the header's edges: each --bar-h below keeps
   the same ~8px of air above and below the wordmark it had before. Anything
   that anchors under the sticky header reads --bar-h, so those follow along —
   see the scroll-margin-top rules in services/faq/pages.css. */
:root { --bar-h: 84px; --logo-h: 67px; }
@media (max-width: 1080px) { :root { --bar-h: 74px; --logo-h: 58px; } }
@media (max-width: 480px)  { :root { --bar-h: 69px; --logo-h: 53px; } }
/* Small phones. With the gap fixed the bar is still ~20px over at 375px, and
   the wordmark is what is taking the room: at 53px tall it is 157px wide,
   nearly half the content width. 46px keeps it clearly legible and returns
   ~21px, which — with the CTA's own trim below — lands the row inside the
   gutters with room to spare. The bar follows it down so the mark keeps the
   same ~8px of air above and below that every other step preserves. */
@media (max-width: 420px)  { :root { --bar-h: 62px; --logo-h: 46px; } }
/* Two more steps, because the bar has a hard floor: .brand and .header-cta
   are both flex-shrink:0, so below ~375px the row simply stops fitting and
   the page scrolls sideways. Hiding the CTA would be the easy win and is the
   wrong one — the hamburger menu carries .nav only, so "Talk to a broker"
   would vanish from the header entirely on exactly the devices most likely
   to tap it. Everything shrinks a little instead, which is the honest trade
   on a 360px screen. The gutter comes in with them (see .wrap below): 22px
   of air either side is a luxury a 320px phone cannot pay for. */
@media (max-width: 374px)  { :root { --bar-h: 56px; --logo-h: 40px; } }
@media (max-width: 339px)  { :root { --bar-h: 50px; --logo-h: 34px; } }
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 12px 28px -22px rgba(29, 27, 23, 0.22);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 24px;
  height: var(--bar-h);
  /* inherits the standard .wrap width/gutters, so the logo's left edge sits
     exactly on the content margin (hero eyebrow, section heads, …) */
}
/* This block used to sit ABOVE the rule it overrides. Both are (0,2,0), so
   source order decided it and `gap: 24px` won at every width — the phone bar
   has been running the desktop gap the whole time, which is 24px of the 44px
   the row was overflowing by at 375px. Media queries carry no extra weight;
   the override has to come after. */
@media (max-width: 480px) {
  .site-header .wrap { gap: 12px; }
}
/* flex-shrink: 0 + max-width: none keep the wordmark at its true 2.62:1 aspect —
   without them a tight header row shrinks the flex item and squishes the PNG */
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); flex-shrink: 0; }
/* The logo is wrapped in <picture> to serve WebP, so the WRAPPER is the flex
   item now — the sizing and the no-shrink have to sit on it, not only on the
   img inside, or the mark squashes when the nav gets tight. */
.brand picture { display: block; height: var(--logo-h); flex-shrink: 0; }
.brand-logo {
  height: var(--logo-h); width: auto; max-width: none; display: block; flex-shrink: 0;
  transition: height .3s cubic-bezier(.4, 0, .2, 1);
}
.brand .glyph { flex-shrink: 0; display: block; }
.brand .mark {
  font-family: var(--serif); font-size: 23px; font-weight: 620; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap;
}
.brand .emblem { margin-left: 6px; opacity: .92; flex-shrink: 0; display: block; }
.nav { display: flex; gap: 0; margin-left: auto; align-items: center; }
/* plain text links, generous hit areas; hover quietly dims (the reference
   bar has no pills, chips, or underline animations) */
.nav a, .nav-group-btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: .002em;
  color: var(--ink); white-space: nowrap;
  padding: 10px 12px; border: 0; background: transparent; cursor: pointer;
  transition: color .15s ease;
}
.nav a:hover, .nav-group-btn:hover { color: color-mix(in oklab, var(--ink), transparent 42%); }
.nav a[aria-current="page"], .nav-group-btn.is-current { color: var(--ink); font-weight: 600; }

/* the recruitment link reads like every other nav item */
.nav a.nav-accent { color: var(--ink); }
.nav a.nav-accent:hover { color: color-mix(in oklab, var(--ink), transparent 42%); }
.nav a.nav-accent[aria-current="page"] { font-weight: 600; }

/* home-page sections grouped under a dropdown */
.nav-group { position: relative; }
.nav-group-btn .chev { flex-shrink: 0; transition: transform .15s ease; opacity: .65; }
.nav-group.open > .nav-group-btn .chev { transform: rotate(180deg); }
.nav-menu {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 224px; z-index: 60;
  padding: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(29,27,23,.05), 0 18px 36px -20px rgba(29,27,23,.25);
}
/* invisible bridge so hover survives the gap between button and menu */
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-group.open .nav-menu { display: grid; }
.nav .nav-menu a { padding: 9px 12px; border-bottom: 0; border-radius: 6px; color: var(--ink-soft); }
.nav .nav-menu a::after { display: none; }
.nav .nav-menu a:hover { background: color-mix(in oklab, var(--accent), transparent 90%); color: var(--accent-deep); }
.nav .nav-menu a[aria-current="page"] { background: color-mix(in oklab, var(--accent), transparent 86%); color: var(--accent-deep); }
/* menu grouping: overview pinned above a hairline, rates tucked below one */
.nav .nav-menu a:first-child { font-weight: 660; color: var(--ink); padding-bottom: 10px; margin-bottom: 5px; border-bottom: 1px solid var(--line-soft); border-radius: 6px 6px 3px 3px; }
.nav .nav-menu a:last-child { padding-top: 10px; margin-top: 5px; border-top: 1px solid var(--line-soft); border-radius: 3px 3px 6px 6px; }
@media (min-width: 1081px) and (hover: hover) {
  .nav-group:hover .nav-menu { display: grid; }
}

/* ---------- nav bar layout (all pages, desktop) ----------
   Brand left, links + CTA pushed right. Byte-for-byte identical markup on
   every page, so nothing shifts when you navigate. */
@media (min-width: 1081px) {
  .nav { gap: 8px; }
  .header-cta { margin-left: 4px; }
  .nav-pills { display: inline-flex; align-items: center; gap: 0; }
}
/* in the mobile dropdown the capsule dissolves so the links stack normally */
@media (max-width: 1080px) {
  .site-header.nav-open .nav-pills { display: contents; }
}

.header-cta { display: flex; gap: 10px; align-items: center; }
.header-cta .btn {
  padding: 9px 18px; font-size: 15.5px; font-weight: 500;
  border-radius: var(--btn-radius);
  transition: background .15s ease;
}
/* single dark CTA, flat — the anthropic "Try Claude" treatment */
.header-cta .btn-solid {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
  box-shadow: none;
}
.header-cta .btn-solid:hover { background: #33312d; }
.header-cta .btn .arrow { display: none; }

/* mobile menu button (shown ≤1080px) */
.menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.menu-btn:hover { border-color: var(--ink); }

/* ---------- footer — light and flat (anthropic-style) ---------- */
.site-footer {
  background: var(--bg-deep);
  color: var(--ink); margin-top: calc(var(--sect-gap) + 14px);
  border-top: 1px solid var(--line-soft);
}
.site-footer .wrap { padding-top: 64px; padding-bottom: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.45fr .85fr .85fr .85fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.site-footer h4 { font-family: var(--sans); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 16px; color: var(--ink-faint); font-weight: 640; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer li a { font-size: 15px; color: var(--ink-soft); }
.site-footer li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-brand .mark { font-family: var(--serif); font-size: 24px; }
.footer-brand picture { display: block; }
/* +20% alongside the header mark, so the two read at the same weight. */
.footer-logo { height: 82px; width: auto; display: block; }
.footer-brand p { font-size: 14.5px; color: var(--ink-soft); max-width: 30ch; margin-top: 14px; }
.footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.footer-badges a { display: inline-flex; border-radius: 6px; transition: opacity .15s ease; }
.footer-badges a:hover { opacity: .8; }
.footer-badges img { height: 40px; width: auto; background: #fff; border: 1px solid var(--line-soft); border-radius: 6px; padding: 5px 9px; }
.footer-meta { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 28px; font-size: 13.5px; color: var(--ink-faint); flex-wrap: wrap; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-soft);
  transition: color .15s ease, border-color .15s ease;
}
.footer-social a:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- section scaffolding ---------- */
.section { padding: var(--sect-gap) 0 0; }
.section-head { display: grid; gap: 14px; max-width: 60ch; margin-bottom: 48px; }
.section-head h2 { font-size: 40px; line-height: 1.12; }
/* 21px — one step ABOVE the 19px body, the way anthropic.com runs 24px leads
   over a 20px base. It was 17.5px, tuned when the body floor was 16.5; when
   the floor moved the lede stayed put and ended up SMALLER than the copy it
   was supposed to introduce. Every lede on the site had the same inversion.

   :not([class]) is load-bearing. A .section-head holds a kicker, a heading, a
   lede and sometimes a link — the kicker and the link are <p class="eyebrow">
   and <p class="svc-all">, and a bare `.section-head p` outranks BOTH of
   their own rules (0,1,1 beats 0,1,0). The kicker has been rendering at the
   lede's size rather than its own 12.5px for as long as this rule has
   existed; raising the lede to 21px is what finally made it obvious. The
   lede is the only unclassed <p> in the block, in every .section-head on the
   site, so scoping to that fixes the kicker without touching the markup. */
.section-head p:not([class]) { color: var(--ink-soft); font-size: 21px; }
/* Support voice, unified 2026-08-09: every lede under a heading runs General
   Sans 500 — the register the hero statement set. Serif stays the READING
   voice (journey prose, quotes, blog articles); the split is by role, not by
   section. :not(.eyebrow) because the bare `p` selector above also catches
   the kicker, which has its own type. */
.section-head p:not(.eyebrow) { font-family: var(--sans); font-weight: 500; }

/* ---------- placeholder imagery ---------- */
.ph {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: repeating-linear-gradient(-45deg, var(--accent-soft), var(--accent-soft) 12px, color-mix(in oklab, var(--accent-soft), var(--accent) 7%) 12px, color-mix(in oklab, var(--accent-soft), var(--accent) 7%) 24px);
  display: grid; place-items: center;
}
.ph .ph-label {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px;
  color: var(--accent-deep); background: color-mix(in oklab, var(--surface), transparent 12%);
  padding: 6px 12px; border-radius: 6px; letter-spacing: .02em;
}

/* ---------- cards — light liquid glass ---------- */
.card {
  background: color-mix(in oklab, var(--surface), transparent 40%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--shadow-card);
}

/* ---------- a11y ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- background tone variants ---------- */
/* legacy palettes (the dev tweaks panel that toggled these was removed
   2026-08-01; the variants stay for possible future use) */
/* "warm" retuned 2026-08-09 to the reference's actual ground: anthropic.com
   measures rgb(250,249,245) = #faf9f5 — warm PAPER, near-neutral, not the
   cream the old value was. Cards stay true white so they lift off the ground
   the way the reference's do; --bg-deep steps down inside the same family
   for the stats band. This is the LIVE site tone (every page's body carries
   data-tone="warm"); "white" below is kept as the crisp-white fallback the
   client originally asked for in HP-2 — one sed swaps the site back. */
body[data-tone="warm"] {
  --bg: #faf9f5; --bg-deep: #f1efe9; --surface: #ffffff;
  --accent-soft: color-mix(in oklab, var(--accent), #faf9f5 90%);
  --accent-mid: color-mix(in oklab, var(--accent), #faf9f5 72%);
}
body[data-tone="warm"] .card { box-shadow: 0 1px 2px rgba(29,27,23,.04), 0 14px 36px -18px rgba(29,27,23,.22); border-color: var(--line); }
body[data-tone="cool"] {
  --bg: #f5f6f8; --bg-deep: #eceef1; --surface: #fdfdfe;
  --ink: #1a1c1f; --ink-soft: #545962; --ink-faint: #80858f;
  --line: rgba(26, 28, 31, 0.12); --line-soft: rgba(26, 28, 31, 0.07);
  --accent-soft: color-mix(in oklab, var(--accent), #f5f6f8 90%);
  --accent-mid: color-mix(in oklab, var(--accent), #f5f6f8 72%);
}
body[data-tone="white"] {
  --bg: #ffffff; --bg-deep: #f4f3f0; --surface: #ffffff;
  --accent-soft: color-mix(in oklab, var(--accent), #ffffff 90%);
  --accent-mid: color-mix(in oklab, var(--accent), #ffffff 72%);
}
body[data-tone="white"] .card { box-shadow: 0 1px 2px rgba(29,27,23,.04), 0 14px 36px -18px rgba(29,27,23,.22); border-color: var(--line); }

/* ---------- tweak: density ---------- */
body[data-density="compact"] { --sect-gap: 62px; }
body[data-density="compact"] .section-head { margin-bottom: 32px; }

/* ---------- tweak: corners ---------- */
body[data-radius="sharp"] { --radius: 5px; --radius-lg: 8px; --btn-radius: 4px; --nav-radius: 8px; --nav-pill-radius: 5px; }

/* ---------- scroll reveal (base state is visible; animation only runs when .in is added) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* `backwards` holds the from-state through any stagger delay, so delayed
     cards don't flash visible before their rise */
  .reveal.in { animation: revealRise .55s ease backwards; }
  @keyframes revealRise {
    from { opacity: 0; transform: translateY(14px); }
  }
}

/* ---------- word reveal — headlines arrive a word at a time ----------
   Every word in the headline becomes its own inline-block so it can rise
   and fade on its own randomised delay, so the line assembles in a
   scattered order rather than sweeping left to right. The split happens in
   JS (site.js), so no-JS readers, crawlers and reduced-motion all get the
   finished headline straight out of the HTML. */
@media (prefers-reduced-motion: no-preference) {
  .wa-word {
    display: inline-block;
    /* a split word is an atomic inline box, so the parent's underline (the
       hero h1 em, the statement em) has to be pushed in explicitly */
    text-decoration: inherit;
    opacity: 0;
    /* em-based rise so a 62px hero and a 20px h2 move in proportion. The
       reference lifts 24px on a 61px headline — .39em — so .38em matches the
       proportion, not just the look. */
    transform: translateY(.38em);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
                transform .8s cubic-bezier(.16, 1, .3, 1);
  }
  /* supporting copy under an animated headline drifts up into place; CTA
     buttons get this individually so a row arrives one button at a time */
  /* one duration and one curve for every entrance on the page — .7s here
     against the words' .8s was a seam you could feel */
  .wa-fade {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
                transform .8s cubic-bezier(.16, 1, .3, 1);
  }
  /* the eyebrow comes down from above instead, and lands last */
  .wa-fade.wa-drop { transform: translateY(-14px); }
  .wa-in .wa-word, .wa-in .wa-fade { opacity: 1; transform: none; }
}

/* header is crowded before the rest of the layout is: shed the decorative
   emblem first, then collapse to the menu button */
@media (max-width: 1150px) {
  .brand .emblem { display: none; }
}

@media (max-width: 1080px) {
  .nav { display: none; }
  .header-cta { margin-left: auto; }
  .header-cta .btn { padding: 9px 14px 10px; font-size: 14.5px; }
  /* the CTA stays on the bar at every size — it is the primary action, and
     burying it behind the hamburger to win back width would cost more than
     the width is worth. It just gives up a little of its own padding. */
  @media (max-width: 420px) {
    .header-cta .btn { padding: 9px 11px 10px; font-size: 14px; }
  }
  @media (max-width: 374px) {
    .header-cta .btn { padding: 8px 10px 9px; font-size: 13.5px; }
  }
  @media (max-width: 339px) {
    .header-cta .btn { padding: 8px 9px 9px; font-size: 13px; }
  }
  .menu-btn { display: inline-flex; width: 38px; height: 38px; }
  /* the open menu is a flat sheet under the bar (.site-header is the
     positioned ancestor now) */
  .site-header.nav-open .nav {
    display: grid; gap: 4px;
    position: absolute; top: calc(var(--bar-h) + 8px); left: 14px; right: 14px;
    margin: 0; padding: 14px 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 24px 44px -24px rgba(29,27,23,.35);
  }
  .site-header.nav-open .nav-menu {
    border-left-color: var(--line-soft);
  }
  .site-header.nav-open .nav a { padding: 12px 14px; font-size: 16px; border-radius: 10px; }
  /* dropdown becomes an inline accordion inside the panel */
  .site-header.nav-open .nav-group { display: grid; }
  .site-header.nav-open .nav-group-btn {
    width: 100%; justify-content: space-between;
    padding: 12px 14px; font-size: 16px; border-radius: 10px;
  }
  .site-header.nav-open .nav-menu {
    position: static; min-width: 0; padding: 0 0 6px 14px;
    background: none; border: 0; border-left: 2px solid var(--line-soft); border-radius: 0;
    box-shadow: none; margin-left: 4px;
  }
  .site-header.nav-open .nav-menu::before { display: none; }
}

@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}

/* The gutter steps down with the header (see --logo-h above). It is the one
   piece of width every element on the page pays for, so on a 360px phone the
   6px back on each side is worth more in the bar than it is as air. Set on
   the TOKEN, not on .wrap's padding, so everything computed from the gutter —
   the hero's scrim geometry above all — follows it down. */
@media (max-width: 374px) { :root { --gutter: 16px; } }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section-head h2 { font-size: 32px; }
}
/* The footer's two columns have a min-content width the frame cannot pay for
   below ~375px: the grid measured 335px inside a 288px box, and because that
   widened the whole document it dragged the sticky header's row out with it —
   the bar looked like the overflow when it was only the symptom. One column.

   This has to sit AFTER the 900px block, not before it: both selectors are
   (0,1,0) and a media query adds no weight, so source order decides. Putting
   it above — which is where it went first — meant `1fr 1fr` simply won and
   nothing changed. The same trap had the header bar running the desktop gap
   on phones; see .site-header .wrap.

   The breakpoint moved 374 → 520 when the body went to 19px: the link labels
   grew with it and started spilling their cells again at 375. A one-column
   footer is the right shape on a phone regardless. */
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* (header sizes are defined once, next to .site-header above — the bar does not
   condense on scroll, so no per-state overrides are needed here) */

/* ---------- page header print ------------------------------------------
   The homepage hero's treatment, in the short band the inner pages use: a
   carved stamp print as the section's ground, composited into the page's
   paper with multiply rather than laid on top of it, under a warm-paper
   ramp that keeps the copy readable. Opt in per page with `hdr-print` on
   the section — the inner pages do not share one hero class (page-hero,
   svc-hero and calcs-hero all exist), and keying the treatment to its own
   class means it does not have to know which.

   Add the <figure class="hdr-media"> as the section's FIRST child, before
   the .wrap. */
.hdr-print { position: relative; overflow: hidden; }
/* The measure the ramp is anchored to. Wider than the homepage's --hero-col
   because these headers run a 58ch dek across the band rather than a display
   headline in a column. */
.hdr-print { --hdr-col: 660px; }
@media (max-width: 1080px) { .hdr-print { --hdr-col: 560px; } }
.hdr-print > .wrap { position: relative; z-index: 1; }
/* The paper the print sits ON — a real painted colour, not inherited: the
   figure is a stacking context (position/z-index), so without it the img's
   multiply has a transparent backdrop and silently does nothing.

   Selected as `.hdr-print > .hdr-media`, and the descendant matters: glass.css
   carries `.darkbg > * { position: relative; z-index: 2 }`, it loads AFTER
   this file, and at equal specificity the later sheet wins — which pulled the
   figure back into flow and left it sitting above the copy as a 444px band at
   the top of the section. Two classes beat it on specificity rather than on
   load order, so the component does not depend on where it is imported.
   (The homepage's .hero-media escapes the same rule only because home.css
   happens to load after glass.css.) */
.hdr-print > .hdr-media {
  position: absolute; inset: 0; z-index: 0;
  margin: 0; overflow: hidden;
  background: var(--bg);
}
.hdr-media picture { display: block; width: 100%; height: 100%; }
.hdr-media img {
  display: block; width: 100%; height: 100%;
  /* contain, not cover, and it is the section heights that decide it. These
     headers are not one size: a page-hero is ~445px tall at 1600 wide, but
     the brokers and banker-to-broker heroes run to 679 and the apply page
     carries a form. cover fills whatever it is given, so on the tall ones it
     was scaling a 3.6:1 strip up by half again and turning a street into a
     close-up of one window — the same magnification that made the homepage
     soft before it was recomposed.

     contain fits the strip to the WIDTH at 1:1 and the 100% Y sits it on the
     section's bottom edge. On a 445px band that fills the frame exactly; on a
     taller one the print becomes a band along the foot with bare paper above
     it, which is where the copy sits anyway. Same rule at every width — the
     phone needs no override of its own beyond the clearance below. */
  object-fit: contain;
  object-position: 50% 100%;
  mix-blend-mode: multiply;
}
/* Same ramp as the homepage hero, anchored the same way — solid paper to the
   copy's measure, a ~150px feather, then the print at full strength. See the
   note in home.css: the stops are computed from the wrap's real geometry
   because a percentage stop drifts as the window grows past --maxw. */
.hdr-media::after {
  content: ""; position: absolute; inset: 0;
  --copy-edge: calc(50% - min(var(--maxw), 100%) / 2 + var(--gutter) + var(--hdr-col));
  background:
    linear-gradient(to right,
      color-mix(in oklab, var(--bg), transparent 9%) 0,
      color-mix(in oklab, var(--bg), transparent 9%) var(--copy-edge),
      color-mix(in oklab, var(--bg), transparent 40%) calc(var(--copy-edge) + 68px),
      color-mix(in oklab, var(--bg), transparent 82%) calc(var(--copy-edge) + 116px),
      transparent calc(var(--copy-edge) + 152px));
}
/* Centred heroes get a bottom-up wash instead of the left-to-right ramp.
   The ramp's whole logic is that the copy occupies a measure on the LEFT and
   the print runs clean to the right of it — banker-to-broker centres its
   copy across the full width, so that ramp left the dek and the CTA row
   sitting directly on the ink. This is the same gradient the phone uses:
   paper down to the copy, the print along the foot. */
.hdr-print.is-centred > .hdr-media::after {
  background: linear-gradient(to top,
    transparent 0,
    color-mix(in oklab, var(--bg), transparent 82%) 60px,
    color-mix(in oklab, var(--bg), transparent 34%) 130px,
    color-mix(in oklab, var(--bg), transparent 4%) 200px,
    color-mix(in oklab, var(--bg), transparent 4%) 100%);
}

@media (max-width: 767px) {
  /* And give it somewhere to sit. Fitted to the width, the strip is
     100vw / 3.6 tall — about 28vw — and a section's own 46px of bottom
     padding is nowhere near that, so the dek's last lines were running
     straight through the rooflines. The clearance is written in the same vw
     the strip's height derives from, so the two cannot drift apart.

     It goes on the WRAP, not on the section. Every one of these pages sets
     its hero's padding in its own stylesheet — .page-hero, .svc-hero,
     .calcs-hero.darkbg — and all of those load after this file, so a
     `.hdr-print { padding-bottom }` here is overridden by the page's own
     shorthand no matter how the numbers read. `.hdr-print > .wrap` is two
     classes deep and nothing else claims it. */
  .hdr-print > .wrap { padding-bottom: calc(28vw + 26px); }
  .hdr-media::after {
    background: linear-gradient(to top,
      transparent 0,
      color-mix(in oklab, var(--bg), transparent 82%) 40px,
      color-mix(in oklab, var(--bg), transparent 38%) 90px,
      color-mix(in oklab, var(--bg), transparent 4%) 140px,
      color-mix(in oklab, var(--bg), transparent 4%) 100%);
  }
}