/* Sitewide v2 design layer. Loads on every page, immediately after style.css (and before
   home-v2.css on the homepage). This is the single source of truth for the homepage v2 tokens
   and the generic .h-* components (moved here from home-v2.css, which now keeps only the
   pieces that are genuinely homepage-only: hero, trust band, problem cards, founder split,
   compare, case study, final CTA, sticky mobile bar and the shrunk lender strip).
   It also re-skins the EXISTING shared components from style.css (buttons, cards, steps, FAQ,
   tables, forms, notes, hero copy, prose columns, etc.) so every inner page and post picks up
   the homepage look without any markup changes beyond this stylesheet link.
   This is a restyle only: no selector here changes text, links, form fields or structure. */

/* ---------------------------------------------------------------------
   1. Tokens (moved from home-v2.css; values unchanged)
   --------------------------------------------------------------------- */
:root {
  --h-ink: #0B1F14;
  --h-dark: #0B1F14;
  --h-dark-2: #112A1C;
  --h-line: rgba(228,192,92,0.22);
  --h-champ: #D9BC72;
  --h-warm: #F7F4EC;
  --h-warm-2: #EFEAE0;
  --h-muted-on-dark: #B9C2BC;
  --h-body-on-dark: #D5DBD7;
  --h-ease: cubic-bezier(0.22,0.61,0.36,1);
  /* The lighter green glow used across every dark surface on the old/live site (owner
     correction: the old site's dark sections are not a flat #0B1F14, they carry this
     top-left glow). One definition, reused everywhere via --bg-dark-glow so every dark
     surface (section-dark, heroes, cta-band, the homepage's dark sections) matches. */
  --h-glow: rgba(20,55,38,0.9);
  --h-glow-0: rgba(20,55,38,0);
  --bg-dark-glow: radial-gradient(1100px 480px at 18% -10%, var(--h-glow), var(--h-glow-0) 65%);
}

/* ---------------------------------------------------------------------
   2. Page background + sitewide container (header + main; footer untouched)
   --------------------------------------------------------------------- */
body { background: var(--h-warm); }

.site-header .container, main .container { max-width: 1320px; padding-inline: 28px; }
@media (max-width: 760px) {
  .site-header .container, main .container { padding-inline: 20px; }
}

/* ---------------------------------------------------------------------
   3. Type: headings, prose
   --------------------------------------------------------------------- */
h1, h2 { letter-spacing: -0.028em; font-weight: 700; }
main p { text-wrap: pretty; }

/* ---------------------------------------------------------------------
   4. Header (moved from home-v2.css's `.home-v2 .site-header ...` block, now sitewide).
   The header's Call Marco button (.nav-cta) is left alone here: it is already styled by
   style.css's higher-specificity `.site-nav a.nav-cta` rules, which these selectors don't
   reach, so it keeps looking exactly as it does on the homepage today, sitewide.
   Note: the homepage previously flattened the header to a solid `--h-ink` background here
   (`.home-v2 .site-header`). Owner correction: the header should stay the translucent
   `rgba(11,31,20,0.94)` + blur(12px) glass that style.css already defines sitewide, so that
   rule is deliberately NOT carried over. This is one of the few homepage colour changes this
   restyle deliberately makes; see the report for the full list.
   --------------------------------------------------------------------- */
.header-inner { padding: 18px 28px; }
.site-nav { gap: 30px; }
.site-nav a:not(.nav-cta) { font-weight: 500; font-size: 0.95rem; color: #E8ECE9; }
.site-nav a:not(.nav-cta):hover { color: var(--c-gold-light); }
.site-nav .sub a { color: rgba(255,255,255,0.92); font-weight: 600; }
.site-nav .sub a:hover, .site-nav .sub a:focus-visible { background: rgba(201,162,39,0.14); color: var(--c-gold-light); }
@media (max-width: 760px) {
  .header-inner { padding: 14px 20px; }
}

/* ---------------------------------------------------------------------
   5. Generic v2 components (moved from home-v2.css, unscoped there already; homepage keeps
   using these under the same names, so relocating them here is a no-op for the homepage).
   --------------------------------------------------------------------- */
.h-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold-deep); margin-bottom: 18px; }
.h-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.on-dark .h-eyebrow, .h-eyebrow.on-dark { color: var(--c-gold); }
.h-btn { display: inline-flex; align-items: center; gap: 10px; padding: 0.95em 1.6em; border-radius: 8px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent; transition: background-color .2s ease, border-color .2s ease, transform .15s ease; }
.h-btn svg { width: 18px; height: 18px; transition: transform .2s var(--h-ease); }
.h-btn:hover svg { transform: translateX(3px); }
.h-btn:active { transform: scale(0.98); }
.h-btn-gold { background: var(--c-gold); color: var(--h-ink); }
.h-btn-gold:hover { background: var(--c-gold-light); }
.h-btn-ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.h-btn-ghost:hover { border-color: var(--c-gold); background: rgba(201,162,39,0.08); }
.h-btn-ghost .play { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; }
.h-btn-ghost .play svg { width: 9px; height: 9px; transform: none !important; }
.h-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-ink); text-decoration: none; border-bottom: 1.5px solid var(--c-gold); padding-bottom: 3px; }
.h-link:hover { color: var(--c-gold-deep); }
.h-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--h-warm-2); border-radius: 12px; padding: 26px 22px 22px; text-decoration: none; color: var(--c-ink); transition: transform .25s var(--h-ease), box-shadow .25s var(--h-ease), border-color .25s ease; }
.h-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(11,31,20,0.35); border-color: rgba(201,162,39,0.5); }
.h-card > svg { width: 30px; height: 30px; color: var(--c-gold-deep); margin-bottom: 22px; }
.h-card h3 { font-size: 1.05rem; margin: 0 0 8px; }
.h-card p { font-size: 0.9rem; color: var(--c-ink-muted); line-height: 1.45; margin: 0 0 22px; }
.h-card .arrow { margin-top: auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--c-border); display: grid; place-items: center; color: var(--c-gold-deep); transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.h-card .arrow svg { width: 14px; height: 14px; }
.h-card:hover .arrow { background: var(--c-gold); border-color: var(--c-gold); color: var(--h-ink); }
.h-section { padding: clamp(72px, 9vw, 120px) 0; }
.h-section-head { max-width: 640px; }
.h-section-head.center { margin: 0 auto; text-align: center; }
.h-section-head.center .h-eyebrow { justify-content: center; }
.h-section-head h2 { font-size: clamp(2rem, 2.6vw + 1rem, 3rem); margin-bottom: 14px; }
.h-section-head p { color: var(--c-ink-muted); font-size: 1.08rem; margin: 0; }

/* Reveal (homepage only in practice: .rv is only used on index.html) */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--h-ease), transform .7s var(--h-ease); transition-delay: var(--d, 0ms); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .h-hero .rv { transform: translateY(24px); }
}

/* =======================================================================
   6. Re-skin of the EXISTING shared components (defined in style.css) so
   every inner page/post picks up the homepage look with no markup changes.
   ======================================================================= */

/* Section rhythm + surfaces */
.section { padding: clamp(64px, 7vw, 104px) 0; }
.section-alt { background: #fff; border-top: 1px solid var(--h-warm-2); border-bottom: 1px solid var(--h-warm-2); }
/* .section-dark already carries the lighter-green top-left glow in style.css
   (radial-gradient(1100px 480px at 18% -10%, rgba(20,55,38,0.9), transparent 65%), var(--c-dark)),
   which is the same recipe as --bg-dark-glow above. That's the correct, owner-approved look
   (matches the live About page), so it's deliberately left alone here rather than flattened. */
.section-dark p { color: var(--h-body-on-dark); }
.section-head { max-width: 680px; }
.section-head h2 { font-size: clamp(2rem, 2.6vw + 1rem, 3rem); }
.section-head p { color: var(--c-ink-muted); font-size: 1.08rem; }

/* Eyebrows: .eyebrow and .kicker get the .h-eyebrow geometry. Existing colour rules
   (.eyebrow, .eyebrow-ink, .kicker, .section-dark .kicker, .hero .kicker) are untouched here,
   so the light/dark contrast logic they already encode keeps working unchanged. Neither class
   currently draws its own line, so this doesn't double one up. */
.eyebrow, .kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0 0 18px;
}
.eyebrow::before, .kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }

/* Buttons: .btn -> .h-btn geometry. Colour rules (.btn-gold, .btn-outline, .btn-outline-dark)
   stay defined by style.css's own selectors below, just recoloured to the v2 look. The header's
   .nav-cta is unaffected: `.site-nav a.nav-cta` in style.css is more specific than the plain
   `.btn`/`.nav-cta` selectors here and keeps setting its own padding, min-height and gap. */
/* border-width is deliberately left at style.css's 2px (not narrowed to the homepage hero's
   1.5px): the header's Call Marco button is a `.btn` too, and box-sizing:border-box means even
   an invisible (transparent) border-width change shifts its content box by a sub-pixel amount,
   which very slightly re-kerns its label and phone icon. Leaving border-width alone keeps the
   header pixel-identical sitewide while every other .btn geometry still moves to the v2 look. */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 0.95em 1.6em; border-radius: 8px; }
.btn:active { transform: scale(0.98); }
.btn-outline { background: transparent; border-color: rgba(255,255,255,0.35); color: var(--c-white); }
.btn-outline:hover { border-color: var(--c-gold); background: rgba(201,162,39,0.08); }
.btn-outline-dark { background: transparent; border-color: var(--c-ink); color: var(--c-ink); }
.btn-outline-dark:hover { border-color: var(--c-gold); background: transparent; color: var(--c-gold-deep); }
.btn-row { gap: 14px; }

/* Cards: .card, .asset-card, .more-card, .tile, .calc-card (not .pillar, which stays dark) -> the h-card surface.
   Layout properties each component already relies on (flex rows, grid gaps, icon sizing) are
   left alone; only the shared surface (background/border/radius) moves to the warm-border,
   white-card look. Hover lift + gold border is only added for the ones that are links. */
.card, .asset-card, .more-card, .tile, .calc-card {
  background: #fff;
  border-color: var(--h-warm-2);
  border-radius: 12px;
}
.card { padding: 26px 22px; }
.card:hover { transform: none; box-shadow: none; }
a.card:hover, a.tile:hover, a.asset-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201,162,39,0.5);
  box-shadow: 0 18px 40px -20px rgba(11,31,20,0.35);
}
.card-grid, .steps.steps-3, .tile-links, .card-grid-2, .asset-cards, .more-cards, .pillars { gap: 14px; }

/* .pillar (services hub "Start here" cards) stays the dark green branded panel from style.css,
   at the owner's request. Only harmonised: 12px corners like every other card, and a focus ring
   that shows on the cream page (the old light-gold ring measured about 1.5:1 there). */
.pillar { border-radius: 12px; }
.pillar:focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }

.more-card h3 { font-size: 1.15rem; }

/* Steps: .h-step look. The old connecting line between circles was drawn for the plain-text
   layout; now that each step is its own card, the line is dropped (matching .h-steps on the
   homepage, which has no connector either). The CSS keyframe that animated that line is
   untouched in style.css, it simply has nothing to animate once the line is hidden. */
.step { background: #fff; border: 1px solid var(--h-warm-2); border-radius: 12px; padding: 28px 24px; }
.step:not(:last-child)::after { display: none; }
.step .num { width: 34px; height: 34px; margin-bottom: 22px; }

/* FAQs: stacked white rows. The existing <details>/<summary> open-close mechanism (including
   keyboard support) is untouched; only the surface and the +/- colour change. */
.faq, .post-faq { display: grid; gap: 8px; }
.faq-item { border: 1px solid var(--h-warm-2); border-radius: 12px; background: #fff; padding: 18px 22px; }
details.faq-item summary h3 { font-size: 1.05rem; }
details.faq-item summary::after { color: var(--c-gold-deep); }

/* Call strip: like the homepage trust band. */
.call-strip-band { background: #fff; border-top-color: var(--h-warm-2); border-bottom-color: var(--h-warm-2); }

/* CTA band: like .h-cta without the photo. Unlike .section-dark, .cta-band's own background in
   style.css is a flat `var(--c-dark)` with no glow, so the glow layer is added here. */
.cta-band { background: var(--bg-dark-glow), var(--h-ink); }
.cta-band h2 { font-size: clamp(2rem, 2.6vw + 1rem, 3rem); }
.cta-band p { color: var(--h-body-on-dark); }

/* Notes/callouts: warm panel, thinner gold rule, short-answer label as an eyebrow. */
.svc-note, .short-answer { background: var(--h-warm); border-left-width: 3px; border-radius: 0 12px 12px 0; }
.short-answer-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
}
.short-answer-label::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.hero-note { color: var(--h-muted-on-dark); }

/* Tables: rounded container, ink header row, warm row rules. overflow-x:auto already forces
   the other axis to compute as auto too, so the container clips to its radius while the
   horizontal scroll on mobile keeps working.
   Item I fix: the first pass changed the cell borders to --h-warm-2 (#EFEAE0), which is
   ~1.1:1 against the white cell background: the gridlines effectively vanished, especially on
   the long credit-guide lender table. Restored to the live site's --c-border (#C7C0AC), which
   is darker (higher-contrast) than #EFEAE0, plus zebra striping so rows stay trackable even
   without the gridlines being stared at. */
.table-wrap { border: 1px solid var(--h-warm-2); border-radius: 12px; }
.compare-table th, .compare-table td { border-color: var(--c-border); padding: 14px 16px; }
.compare-table thead th { background: var(--h-ink); }
.compare-table tbody th { background: var(--h-warm); }
/* Odd rows white so the warm stripe shows on cream pages too (the page background is --h-warm). */
.compare-table tbody td { background: #fff; }
.compare-table tbody tr:nth-child(even) td { background: var(--h-warm); }

/* Forms: contact and calculator inputs. Field order, names and the Turnstile widget are
   untouched; only the surface, focus ring and label weight change. Textareas keep their own
   120px min-height from style.css since they aren't matched by the 48px rule below.
   Item G fix: the default field border (style.css's --c-border, #C7C0AC) is ~1.82:1 against
   the white fill, and it's the ONLY cue that a field exists (no fill difference from the page).
   Computed replacement: --c-ink-muted (#56635C, already an existing site token) gives 6.30:1
   against white and 5.74:1 against the warm page background these fields sit on, comfortably
   over the 3:1 non-text contrast minimum.
   The focus style (outline:none + a translucent gold glow, ~1.3:1, plus a gold border ~2.2:1)
   is replaced with a solid 3px outline in --c-gold-deep (#8A6A15): computed at 5.05:1 against
   white, well over 3:1, matching the border colour so the two read as one indicator. */
.form-field input, .form-field select, .form-field textarea,
.calc-field select, .calc-field input[type="number"] { border-color: var(--c-ink-muted); }
.form-field input, .form-field select,
.calc-field select, .calc-field input[type="number"] { min-height: 48px; }
.form-field label, .calc-field label { font-size: 0.9rem; font-weight: 600; }
.form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible,
.calc-field select:focus-visible, .calc-field input[type="number"]:focus-visible {
  outline: 3px solid var(--c-gold-deep);
  outline-offset: 1px;
  border-color: var(--c-gold-deep);
  box-shadow: none;
}
/* Item G also flagged .calc-tab (the calculator's ATO debt/Payday Super/Loan repayments tabs):
   its focus outline was --c-gold (#C9A227, ~2.42:1). --c-gold-deep computes 5.05:1 (as above). */
.calc-tab:focus-visible { outline-color: var(--c-gold-deep); }

/* Calculator figures: ink on light, gold-deep for the highlighted (relief) result. */
.calc-card-relief .calc-figure { color: var(--c-gold-deep); }

/* Hero copy (.hero, .hero-page, used on every inner page). Dark green background is
   unchanged; this restyles the copy column like the homepage hero's. A few pages set an
   inline padding on the .hero element itself (about, contact, credit-guide, privacy, thanks);
   inline styles can't be touched by this restyle, so those keep their existing 64px padding,
   which already sits inside this clamp's range. */
.hero { padding: clamp(56px, 7vw, 104px) 0; }
.hero h1 { font-size: clamp(2.4rem, 3.4vw + 0.8rem, 4.2rem); line-height: 1.04; max-width: 18ch; }
.hero .lede, .hero-page .lede { color: var(--h-body-on-dark); font-size: clamp(1.15rem, 0.3vw + 1.1rem, 1.25rem); max-width: 52ch; }
.crumbs { color: var(--h-muted-on-dark); }
/* Item M: the crumb link was only distinguished from the surrounding crumb text by colour
   (#D5DBD7 vs #B9C2BC, ~1.30:1), which fails 1.4.1 (use of colour alone). An always-on
   underline gives a non-colour cue regardless of that contrast. */
.crumbs a { color: var(--h-body-on-dark); text-decoration: underline; text-underline-offset: 2px; }
.crumbs a:hover { color: var(--c-gold); }
.crumbs [aria-current] { color: var(--c-gold-light); }

/* Blog posts + long-form/legal pages (privacy, credit guide): a readable article column.
   Fix (reviewer S1 blocker): `.post-body` and `.container` are the same element
   (`class="container post-body"`), so a `.post-body { max-width: 70ch }` rule loses to
   `main .container { max-width: 1320px }` (equal class count, but that rule also has the
   `main` type selector, so its specificity is higher) and articles ran the full 1320px width.
   Rather than fight that by raising .post-body's own specificity (which would also re-shrink
   and re-centre the whole container box, pulling it away from the hero's left edge), this
   targets the DIRECT CHILDREN of .post-body instead: .container.post-body keeps its normal
   1320px frame (so it starts at exactly the same x as the hero copy above it), and each child
   (headings, paragraphs, lists, the FAQ section, the sources block, table wrappers) is capped
   at 70ch with no side margin, so the column reads as ~70-72ch and sits flush with the hero's
   left edge, matching how the hero copy aligns in the same container. Tables that don't fit
   70ch still scroll horizontally via .table-wrap's existing overflow-x:auto.
   .measure already has its own 68ch max-width in style.css (on a nested div, not shared with
   .container, so it never had this bug) and is left as-is. Links inside the article column get
   the .h-link look (bold, gold underline rule). */
.post-body > * { max-width: 70ch; }
.post-body p, .post-body li { line-height: 1.7; }
.post-body a { color: var(--c-ink); font-weight: 700; text-decoration: none; border-bottom: 1.5px solid var(--c-gold); padding-bottom: 1px; }
.post-body a:hover { color: var(--c-gold-deep); }
/* (S3/item J) h2 gets top spacing from style.css's `.post-body h2 { margin-top: 1.4em }`;
   h3 had none, so a heading straight after body copy had no visual break above it. */
.post-body h3 { margin-top: 1.4em; }

/* =======================================================================
   7. Accessibility fixes (second pass, WCAG 2.2 AA, four-subagent review)
   ======================================================================= */

/* Item F: the header's Call Marco button (.nav-cta) and every other gold button
   (.btn-gold/.h-btn-gold) inherited style.css's `.site-nav a:focus-visible` /
   generic focus rings, which are gold-on-gold (--c-gold-light on --c-gold): ~1.38:1, far under
   the 3:1 non-text contrast minimum. Gold buttons appear on both dark surfaces (header, heroes,
   cta-band, the homepage's dark sections) and light ones (plain .section/.section-alt cards,
   the founder section's warm background). --focus-on-gold carries the right colour for
   whichever surface the button sits on: ink by default (light surfaces), overridden to white
   inside the known dark containers. Ink #17211C vs gold #C9A227 computes ~5.9:1; white vs gold
   computes ~1.5:1 is NOT used here, that's why dark surfaces override to white against their
   OWN dark background instead (white vs #0B1F14 computes ~19:1), not against the gold fill. */
:root { --focus-on-gold: #17211C; }
.section-dark, .hero, .cta-band, .h-hero, .h-cta, .h-compare, .h-case-figures, .site-header, .whatsapp-card {
  --focus-on-gold: #fff;
}
.btn-gold:focus-visible, .h-btn-gold:focus-visible, .site-nav a.nav-cta:focus-visible {
  outline: 3px solid var(--focus-on-gold);
  outline-offset: 3px; /* a clear band of background between ring and gold fill */
}

/* Item H: white cards (.card/.step/.faq-item/.pillar/.asset-card/.more-card/.tile/.calc-card)
   with a --h-warm-2 (#EFEAE0) border are nearly invisible on .section-alt, which is also white
   (~1.1-1.2:1 border-to-fill). On white sections only, give cards a warm fill instead so the
   card itself reads as a distinct surface, plus a slightly stronger border. Card boundaries
   aren't text, so 1.4.11's 3:1 isn't strictly required here (the text inside identifies the
   card); this is a visual-clarity fix, not a hard AA number. Sections that are already warm
   (the default .section, no extra class) keep the white card fill as before, since white on
   warm already reads clearly. */
.section-alt .card, .section-alt .asset-card, .section-alt .more-card, .section-alt .tile,
.section-alt .calc-card, .section-alt .step, .section-alt .faq-item {
  background: var(--h-warm);
  border-color: #E2DCCD;
}

/* Item K: `.sub-toggle` (the Services/About caret) is 44x44 in style.css's original mobile
   media query, but a later, unconditional `.sub-toggle { width: 26px }` (added for desktop
   spacing polish) applies at every width, including mobile, shrinking the tap target under the
   24px minimum this site otherwise holds itself to (tests/a11y.test.mjs already asserts >=24px,
   which 26px still technically clears, but well under the 44x44 the mobile rule intended and
   under the 24px CSS pixel target this specific control needs room for a thumb). Restored here
   at the same breakpoint style.css uses for its mobile nav. */
@media (max-width: 1000px) {
  .sub-toggle { width: 44px; height: 44px; }
}

/* Item L: the Payday Super pillar's "LIVE 1 JULY 2026" badge is `white-space: nowrap` with
   `margin-left: auto` pushing it to the row's end; at 320px wide there's no room left for it
   and it clips off the card edge. Letting the row wrap, and the badge wrap onto its own line
   with no forced left margin, keeps the full label visible and readable at 320px. */
@media (max-width: 420px) {
  .pillar-top { flex-wrap: wrap; row-gap: 6px; }
  .pillar-badge { margin-left: 0; white-space: normal; text-align: center; }
}

/* Item A: one sitewide scroll-progress bar (built in assets/js/nav.js, appended to the end of
   <main> so it sits in the same landmark as the rest of the page and stays above the sticky
   header via z-index). Fixed, full width, 3px, gold, animated with `transform: scaleX()` from
   a `transform-origin: left` (a compositor-only property, so it doesn't trigger layout/paint on
   every scroll tick the way animating `width` would). The old design-system implementation
   (assets/design-system/motion-effects.js's "scroll progress" feature, driven by
   `data-tw-progress`) only ran on the 6 pages that load the design-system scripts and animated
   `width`; it's turned off in defaults.js (`progress: "off"`) so no page ever shows two bars. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: 0 0;
  z-index: 60;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-progress { transition: transform 0.1s linear; }
}

/* Skip link target: land below the sticky header instead of under it. --header-h is set by nav.js. */
#main { scroll-margin-top: var(--header-h, 85px); }

/* Blog posts: white page with the paper-filled "short answer" box, as on the previous site
   (owner preference). Only article pages carry .post-byline. FAQ rows get the warm fill so
   they still read as rows on white. */
body:has(.post-byline) { background: #fff; }
body:has(.post-byline) .short-answer { background: var(--c-paper); border-left-width: 4px; }
body:has(.post-byline) .faq-item { background: var(--h-warm); border-color: #E2DCCD; }

/* ---------------------------------------------------------------------
   Google reviews (rendered from scripts/reviews.mjs by `npm run sync`).
   .gr-* cards are shared by the homepage section and the single quote on About/Contact.
   --------------------------------------------------------------------- */
.gr-card { background: #fff; border: 1px solid var(--h-warm-2); border-radius: 16px; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 16px; margin: 0; }
.gr-stars { display: inline-flex; gap: 3px; color: var(--c-gold-deep); }
.gr-stars svg { width: 18px; height: 18px; }
.gr-card blockquote { margin: 0; padding: 0; border: 0; flex: 1; }
.gr-card blockquote p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--c-ink); }
.gr-by { margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--c-ink-muted); }
.gr-by strong { color: var(--c-ink); font-weight: 700; margin-right: 6px; }
.gr-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin: 28px 0 0; }
.gr-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-gold); text-underline-offset: 4px; }
.gr-link svg { width: 16px; height: 16px; }
.gr-link-quiet, .post-body .gr-link-quiet { font-weight: 500; color: var(--c-ink-muted); }
.post-body .gr-link { border-bottom: 0; padding-bottom: 0; text-decoration: underline; text-decoration-color: var(--c-gold); text-underline-offset: 4px; }
.gr-single { margin: 32px 0 0; max-width: 64ch; }
.gr-single .gr-links { margin-top: 16px; }
.contact-grid .gr-single { margin-top: 28px; }
.gr-card blockquote p + p { margin-top: 0.8em; }

/* Service photography. Hero = copy column + photo (photo follows the copy and buttons in the
   DOM, so on phones it sits after them); supporting photos are in-flow figures. Images carry
   real width/height plus aspect-ratio so nothing shifts while they load. No new colours. */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.hero-copy-col { min-width: 0; }
.hero-photo { margin: 0; max-width: 640px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: #143726; box-shadow: 0 24px 48px -28px rgba(0,0,0,0.6); }
.hero-photo img, .photo-side img, .photo-wide img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 56px; align-items: center; }
  .hero-photo { max-width: none; }
}
.split-photo { align-items: center; }
.photo-side, .photo-wide { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--h-warm-2); }
.split-photo + .card-eligibility { margin-top: 32px; }
.photo-wide { max-width: 960px; margin: 28px 0 32px; }
.photo-wide img { aspect-ratio: 16 / 9; }
.photo-wide-crop img { object-position: 50% 25%; }

/* Services hub: 3:2 photo at the top of each card, bleeding to the card edge. */
.svc-thumb { display: block; width: calc(100% + 3.4rem); max-width: none; margin: -1.8rem -1.7rem 0.3rem; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.more-card .svc-thumb { width: calc(100% + 2.6rem); margin: -1.4rem -1.3rem 1rem; border-radius: 11px 11px 0 0; }