/* Cormorant Garamond, served from this domain rather than fonts.gstatic.com.
   Google Fonts sends every visitor's IP address to Google in the US, which is
   a cross-border transfer of personal information the privacy policy would
   have to disclose. Self-hosting removes it, and one variable file covers the
   whole 300-700 weight axis. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;                 /* variable axis */
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;                 /* variable axis */
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  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;
}

/* ==========================================================================
   LODESTAR TAX AND ADVISORY
   Monochrome editorial system.

   Reference points, measured from the Big 4 South African sites:
     - PwC ZA   H1 40px weight 400, serif (ITC Charter); buttons 0 radius,
                1px border, transparent; body 18px/1.72 at 66ch; one accent.
     - EY ZA    section headings 40px weight 300; buttons 0 radius.
     - Deloitte H1 40px weight 300; card titles 20px weight 400.
   None of the four use rounded corners, drop shadows or gradients.

   This system takes that restraint to its conclusion: no accent colour at
   all. Structure comes from hairlines, whitespace, and the contrast between
   a classical serif and a plain sans. Because colour cannot signal
   interactivity here, links are underlined rather than tinted.
   ========================================================================== */
:root {
  /* Ink — the entire palette */
  --ink-900: #111111;   /* headings, rules that need weight */
  --ink-700: #2d2d2d;   /* body copy — matches PwC's text colour */
  --ink-500: #6b6b6b;   /* secondary, metadata */
  --ink-400: #8a8a8a;
  --ink-300: #b4b4b4;
  --line:    #d9d9d9;   /* hairlines */
  --line-strong: #111111;

  --surface: #ffffff;
  --surface-alt: #f4f4f4;
  --surface-deep: #111111;

  --on-deep:       #e8e8e8;
  --on-deep-muted: #a8a8a8;
  --on-deep-line:  #3a3a3a;

  /* Type */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cormorant Garamond", "Palatino Linotype", Palatino, "Iowan Old Style", Georgia, serif;

  --step--2: 0.75rem;                                        /* 12px  eyebrows */
  --step--1: 0.875rem;                                       /* 14px  meta */
  --step-0:  1.125rem;                                       /* 18px  body */
  --step-1:  clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);       /* lede */
  --step-2:  clamp(1.6rem,  1.20rem + 1.10vw, 2.6rem);       /* prose h2 */
  --step-3:  clamp(1.85rem, 1.10rem + 2.60vw, 4rem);         /* section h2 */
  --step-4:  clamp(2.25rem, 0.50rem + 3.40vw, 7rem);         /* h1 */

  /* Space — the Big 4 run 500px+ between major sections */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3.5rem;  --sp-8: 5rem;
  --sp-9: 9rem;

  /* --------------------------------------------------------------------
     Fluid container.

     The page width is driven by the gutter, not by a fixed pixel cap, so
     content stays at roughly 92% of the viewport at every size. A 4K
     monitor fills out the same way a laptop does.

       gutter    grows 20px -> 112px with the viewport (4vw, clamped)
       wrap-max  2560px, which only bites past a 2.7K viewport

     Worked examples (content width / margin each side):
       1280px viewport -> 1203px / 38px    94%
       1440px viewport -> 1354px / 43px    94%
       1920px viewport -> 1805px / 58px    94%
       2400px viewport -> 2256px / 72px    94%
       2560px viewport -> 2416px / 72px    94%
       3840px viewport -> 3200px / 320px   83%  (hard cap)

     Long line lengths are prevented per element rather than by squeezing
     the whole page: paragraphs cap at 66ch, ledes at 54ch, headlines at
     15-20ch. That is what lets the container run this wide safely.
     -------------------------------------------------------------------- */
  --gutter: clamp(1rem, 3vw, 4.5rem);
  --wrap-max: 3200px;
  --wrap-narrow: 720px;

  /* Article + sidebar pages stay tighter than the listing pages on purpose.
     The prose column holds a 66-character measure whatever the screen does,
     so letting the grid track keep growing only opens a canyon of white
     between the text and the sidebar. */
  --wrap-content: 1760px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.72;
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { color: var(--ink-900); margin: 0 0 var(--sp-4); text-wrap: balance; }
/* The hero headline must span its column, so it may not be balanced. */
.hero h1 { text-wrap: pretty; }

/* Display levels: classical serif at regular weight. Large and calm rather
   than large and loud — the single biggest difference from a template. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }

/* Sub-levels stay sans so lists and cards remain scannable. */
h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
h3 { font-size: 1.25rem; }
h4 { font-size: var(--step-0); }

p { margin: 0 0 var(--sp-4); max-width: 66ch; }

/* No accent colour, so links carry an underline rather than a tint. */
a { color: var(--ink-900); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--ink-300); }
a:hover { text-decoration-color: var(--ink-900); }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-3); }
strong { color: var(--ink-900); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }
:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 3px; }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap { width: min(100% - var(--gutter) * 2, var(--wrap-max)); margin-inline: auto; }
.wrap-narrow { width: min(100% - var(--gutter) * 2, var(--wrap-narrow)); margin-inline: auto; }
/* Used on pages with an article + sidebar, on both the page hero and the
   body, so the H1 and the prose share a left edge. */
.wrap--content { max-width: var(--wrap-content); }
.section { padding-block: var(--sp-8); }
@media (min-width: 900px) { .section { padding-block: var(--sp-9); } }
.section--alt { background: var(--surface-alt); }
.section--deep { background: var(--surface-deep); color: var(--on-deep); }
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4,
.section--deep strong { color: #fff; }
/* :not(.btn) matters — a bare `.section--deep a` out-specifies `.btn--light`
   and repaints the button label, giving white text on a white button. */
.section--deep a:not(.btn) { color: #fff; text-decoration-color: var(--on-deep-line); }
.section--deep a:not(.btn):hover { text-decoration-color: #fff; }

/* BUG FIXED: this was `max-width: 30ch`. `ch` resolves against the element's
   OWN font-size, and .section-head is a plain div at body size (18px), so the
   box came out ~285px wide — squeezing a 40-60px heading into two words per
   line. Constrain the heading itself instead, where ch scales with the
   display size, and lay the block out as a masthead on wide screens. */
.section-head { margin-bottom: var(--sp-7); }
.section-head > h2 { max-width: 24ch; }
.section-head > .lede { max-width: 54ch; }

@media (min-width: 1100px) {
  .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    column-gap: var(--sp-8);
    align-items: start;
  }
  .wrap-narrow .section-head { display: block; }
  .wrap-narrow .section-head > h2 { max-width: 24ch; margin-bottom: var(--sp-4); }
  .section-head > .eyebrow { grid-column: 1 / -1; }
  .section-head > h2      { grid-column: 1; max-width: none; margin-bottom: 0; }
  .section-head > .lede   { grid-column: 2; max-width: none; }
}

/* Eyebrow: small caps over a hairline, the way a print masthead labels a section. */
.eyebrow {
  display: block; font-size: var(--step--2); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-500);
  margin: 0 0 var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line-strong);
  /* An eyebrow is a <p>, so it inherited `p { max-width: 66ch }`. At its 12px
     font that is ~396px, which cut the rule off in mid-air. The rule must run
     the full width of its column. */
  max-width: none;
}
/* Same trap: any small-type <p> that carries a rule or sits in a fixed column. */
.post-card .meta, .footer-bottom p, .trust-strip p { max-width: none; }
.section--deep .eyebrow { color: var(--on-deep-muted); border-top-color: #fff; }

.lede { font-size: var(--step-1); color: var(--ink-700); line-height: 1.55; max-width: 54ch; }
.section--deep .lede { color: var(--on-deep); }

.grid { display: grid; gap: var(--sp-6); }
@media (min-width: 620px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
/* Six-up service grid: two columns would make each card ~870px wide, which
   is far too long a line once the text fills it. */
@media (min-width: 1100px) {
  .grid--2.grid--cards, .grid--2.grid--three { grid-template-columns: repeat(3, 1fr); }
}
/* The service grid can hold a count that doesn't divide evenly. Whatever card
   ends up alone on the last row takes the empty columns beside it, so the row
   never shows a gap. */
@media (min-width: 620px) and (max-width: 1099px) {
  .grid--2.grid--cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .grid--2.grid--cards > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .grid--2.grid--cards > :last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 620px) and (max-width: 899px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink-900); color: #fff; padding: var(--sp-3) var(--sp-4); text-decoration: none;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }

/* ==========================================================================
   Buttons — square, hairline, no fill by default (PwC / EY pattern)
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1rem 1.75rem; border: 1px solid var(--ink-900); border-radius: 0;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; color: var(--ink-900); background: transparent;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--ink-900); color: #fff; }
.btn--primary:hover { background: transparent; color: var(--ink-900); }
.btn--ghost:hover { background: var(--ink-900); color: #fff; }
.btn--light { background: #fff; color: var(--ink-900); border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; }
.btn--outline-light { background: transparent; color: #fff; border-color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--ink-900); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 76px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand__logo { display: block; width: auto; height: 46px; }
@media (max-width: 940px) { .brand__logo { height: 42px; } }
@media (max-width: 380px) { .brand__logo { height: 38px; } }
.brand--footer .brand__logo { height: 62px; }
@media (max-width: 700px) { .brand--footer .brand__logo { height: 54px; } }

.nav { display: flex; align-items: center; gap: var(--sp-6); }
.nav a:not(.btn) {
  color: var(--ink-700); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.nav a:not(.btn):hover { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.nav a:not(.btn)[aria-current="page"] { color: var(--ink-900); border-bottom-color: var(--ink-900); }

.nav-toggle { display: none; background: none; border: 1px solid var(--ink-900); border-radius: 0; padding: .6rem .7rem; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink-900); margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.header-cta { display: inline-flex; padding: .7rem 1.3rem; font-size: .9rem; }
@media (min-width: 941px) { .nav .btn { display: none; } }
@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .nav {
    position: absolute; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; background: #fff; border-bottom: 1px solid var(--ink-900); padding: 0; display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: var(--sp-4) 1.5rem; border-bottom: 1px solid var(--line); border-bottom-width: 1px; }
  .nav a[aria-current="page"] { border-bottom-color: var(--line); text-decoration: underline; text-underline-offset: 4px; }
  .nav .btn { margin: var(--sp-4) 1.5rem; }
}

/* ==========================================================================
   Hero — white, typographic, no gradient
   ========================================================================== */
/* The top of the page is not the same as a gap between sections. --sp-9 is
   the section rhythm (144px); using it here left 144px of dead space under
   the header before any ink. This scales with the viewport instead. */
.hero {
  background: #fff;
  padding-block: clamp(2rem, 3.5vw, 4.5rem) var(--sp-7);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px) { .hero { padding-bottom: var(--sp-8); } }
.hero__inner { display: grid; gap: var(--sp-7); align-items: start; }
/* The enquiry panel is capped so it does not balloon on a wide monitor —
   the extra width goes to the headline column instead. */
@media (min-width: 980px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); gap: var(--sp-8); }
}
@media (min-width: 1500px) { .hero__inner { gap: var(--sp-9); } }
/* No ch cap: the grid column is the constraint, so the headline always
   spans its column and wraps to two lines at every desktop width. */
.hero h1 { color: var(--ink-900); margin-bottom: var(--sp-5); max-width: none; }
.hero p { font-size: var(--step-1); color: var(--ink-700); line-height: 1.55; max-width: 52ch; }
/* .hero p would otherwise out-specify the shared eyebrow rule */
.hero p.eyebrow, .page-hero p.eyebrow, .card-quote p.muted, .hero p.form-note {
  font-size: var(--step--2); line-height: 1.4; max-width: none;
}
.hero p.eyebrow, .page-hero p.eyebrow { color: var(--ink-500); }
.card-quote p.muted, .hero p.form-note { font-size: var(--step--1); color: var(--ink-500); }
.hero .btn-row { margin-top: var(--sp-6); }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-6);
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line-strong);
}
.hero__trust div { min-width: 130px; }
.hero__trust b {
  display: block; font-family: var(--font-display); font-weight: 400;
  color: var(--ink-900); font-size: 1.9rem; line-height: 1.1;
}
.hero__trust span {
  display: block; font-size: var(--step--2); color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-top: .3rem;
}

/* Wide-screen hero composition. Below 1400px this is a plain stack. */
@media (min-width: 1400px) {
  .hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    column-gap: var(--sp-8);
    align-content: start;
  }
  .hero__body > .eyebrow { grid-area: 1 / 1 / 2 / 3; }
  .hero__body > h1       { grid-area: 2 / 1 / 3 / 3; }
  .hero__body > p        { grid-area: 3 / 1 / 4 / 2; max-width: none; }
  .hero__body > .btn-row { grid-area: 4 / 1 / 5 / 2; align-self: start; }
  .hero__body > .hero__trust {
    grid-area: 3 / 2 / 5 / 3;
    flex-direction: column;
    gap: var(--sp-5);
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    border-left: 1px solid var(--line-strong);
    padding-left: var(--sp-6);
    align-self: stretch;
  }
  .hero__body > .hero__trust div { min-width: 0; }
}

/* Enquiry panel — a bordered box, flat */
.card-quote { background: var(--surface-alt); border: 1px solid var(--line-strong); border-radius: 0; padding: var(--sp-6); }
.card-quote h2 { font-size: 1.4rem; margin-bottom: var(--sp-2); }
.card-quote .muted { font-size: var(--step--1); color: var(--ink-500); }

/* ==========================================================================
   Cards — a ruled list, not a box with a shadow
   ========================================================================== */
.card {
  background: transparent; border: 0; border-top: 1px solid var(--line-strong);
  border-radius: 0; padding: var(--sp-5) 0 0; box-shadow: none;
}
.card h3 { margin-bottom: var(--sp-3); }
/* A card is already a narrow column, so the global `p { max-width: 66ch }`
   reading cap does not belong inside one — at 16px it stops the text ~440px
   in and leaves the rest of an 870px card empty. The card width IS the
   measure here, which is why the grids below cap their column count. */
/* 66ch was far too tight inside a card; none at all gave 148-character lines
   on a 4K screen. 78ch is the sane upper bound: cards up to ~620px fill
   completely, and only a very wide card leaves any slack. */
.card p, .card .checklist, .card ul, .card li { max-width: 78ch; }
.card p { margin-bottom: var(--sp-4); font-size: 1rem; color: var(--ink-700); }
/* Secondary lines inside a card (e.g. a source citation). Must out-specify
   `.card p` above, which sets colour and size on every card paragraph. */
.card p.muted { font-size: var(--step--1); color: var(--ink-500); }
.card__icon { width: 26px; height: 26px; color: var(--ink-900); margin-bottom: var(--sp-4); background: none; }
.card__icon svg { width: 26px; height: 26px; }
.card__link {
  font-family: var(--font-sans); font-weight: 700; font-size: .95rem;
  text-decoration: none; display: inline-flex; align-items: center; gap: .45rem;
  color: var(--ink-900); border-bottom: 1px solid var(--ink-900); padding-bottom: 2px;
}
.card__link::after { content: "\2192"; transition: transform .15s ease; }
.card:hover .card__link::after { transform: translateX(4px); }
.section--deep .card { background: transparent; border-top-color: #fff; color: var(--on-deep); }
.section--deep .card p { color: var(--on-deep); }
.section--deep .card__link { color: #fff; border-bottom-color: #fff; }
.section--deep .card__icon { color: #fff; }

/* ==========================================================================
   Content pages
   ========================================================================== */
.page-hero { background: #fff; border-bottom: 1px solid var(--line); padding-block: clamp(1.75rem, 2.5vw, 3rem) var(--sp-8); }
.page-hero h1 {
  margin-bottom: var(--sp-5); max-width: 22ch;
  font-size: clamp(2rem, 1rem + 2.6vw, 3.75rem);
}
.page-hero .lede { max-width: 58ch; }

/* Page masthead. A single left-aligned text stack leaves the right half of a
   wide screen empty, so past 1100px the heading and the lede sit side by side
   and the eyebrow rule spans both. Same idea as the homepage hero. */
@media (min-width: 1100px) {
  .page-hero > .wrap:not(.wrap-narrow) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    column-gap: var(--sp-8);
    align-items: start;
  }
  .page-hero > .wrap:not(.wrap-narrow) > .breadcrumbs,
  .page-hero > .wrap:not(.wrap-narrow) > .eyebrow,
  .page-hero > .wrap:not(.wrap-narrow) > .meta { grid-column: 1 / -1; }
  .page-hero > .wrap:not(.wrap-narrow) > h1 {
    grid-column: 1; max-width: none; margin-bottom: 0;
  }
  .page-hero > .wrap:not(.wrap-narrow) > .lede,
  .page-hero > .wrap:not(.wrap-narrow) > .btn-row,
  .page-hero > .wrap:not(.wrap-narrow) > .form-note {
    grid-column: 2; max-width: none;
  }
  .page-hero > .wrap:not(.wrap-narrow) > .btn-row { margin-top: var(--sp-6); }
}

.breadcrumbs { font-size: var(--step--1); color: var(--ink-500); margin-bottom: var(--sp-6); }
/* The page eyebrow used to carry this rule, but it only restated the
   breadcrumb sitting directly above it. Rule stays, duplicate wording goes. */
.page-hero .breadcrumbs {
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .45rem; color: var(--ink-300); }
.breadcrumbs a { color: var(--ink-500); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }

.layout-sidebar { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 980px) {
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr); gap: var(--sp-8); }
}
/* Two columns, not three. The reading text takes the surplus width and the
   right-hand rail carries the furniture — contact card first, "on this page"
   beneath it. A separate left rail left the prose stranded in the middle. */
@media (min-width: 1280px) {
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
}
@media (max-width: 1279px) { .toc { display: none; } }

/* The card and the rail scroll together as one sticky block; two separately
   sticky siblings would ride over each other on the way down. */
.layout-sidebar > aside { position: sticky; top: 100px; max-height: calc(100vh - 124px); overflow-y: auto; }
.layout-sidebar > aside .sidebar-card,
.layout-sidebar > aside .toc { position: static; top: auto; }
.layout-sidebar > aside .toc { margin-top: var(--sp-7); }
@media (max-width: 979px) { .layout-sidebar > aside { position: static; max-height: none; overflow: visible; } }

/* On this page */
.toc { position: sticky; top: 104px; border-top: 1px solid var(--line-strong); padding-top: var(--sp-5); }
.toc__title {
  font-size: var(--step--2); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-500); margin: 0 0 var(--sp-4);
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; border-bottom: 1px solid var(--line); }
.toc li:last-child { border-bottom: 0; }
.toc a {
  display: block; padding: .55rem 0; font-size: .92rem; line-height: 1.4;
  font-weight: 600; color: var(--ink-500); text-decoration: none;
}
.toc a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 4px; }
.prose h2 { scroll-margin-top: 100px; }

.prose { max-width: 66ch; }
/* Inside the two-column article layout the column itself is the measure, so
   the standalone 66ch cap only manufactures white space. 108ch is the ceiling
   before lines get genuinely hard to track back. */
.layout-sidebar .prose { max-width: none; }
.layout-sidebar .prose p,
.layout-sidebar .prose li { max-width: 92ch; }

/* Document layout (the privacy policy). Its sections are a single paragraph
   each, so there is nothing to spread across the row the way the About page
   spreads its lists. Sizing the document block to its content and pinning the
   rail to the right edge turns the leftover width into one gutter instead of a
   band of nothing beside every paragraph. */
@media (min-width: 1280px) {
  .wrap.layout-sidebar--doc {
    /* A fixed cap, not `auto`: an auto track fills the space available rather
       than shrinking to its content, which reopened the gap on a wide screen.
       Surplus past this becomes a right margin instead of an interior hole. */
    grid-template-columns: minmax(0, 1200px) minmax(300px, 380px);
    justify-content: start;
    column-gap: var(--sp-8);
  }
  .wrap.layout-sidebar--doc .prose-block {
    grid-template-columns: minmax(150px, 230px) minmax(0, 88ch);
  }
  .wrap.layout-sidebar--doc .prose-block__body > p { flex-basis: 100%; }
}

/* Past ~2200px one column of policy text cannot use the width, so the sections
   pair up. Each cell is a complete section, which keeps the reading order
   ordinary: across, then down. The threshold is 2200 and not lower because
   below it the two columns fall under about 50 characters, which is worse to
   read than the margin it was trying to remove. */
@media (min-width: 2200px) {
  .wrap.layout-sidebar--doc {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  }
  .wrap.layout-sidebar--doc .prose {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
    row-gap: var(--sp-7);
    align-items: start;
  }
  .wrap.layout-sidebar--doc .prose-block {
    grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
    margin-bottom: 0;
  }
  /* every cell carries the rule, including the two on the first row */
  .wrap.layout-sidebar--doc .prose-block:first-child {
    border-top: 1px solid var(--line);
    padding-top: var(--sp-6);
  }
}

/* "Why Lodestar" band. The reasons are discrete items, so they spread across
   the column rather than stacking in a 74ch ribbon with the rest of a 1900px
   column left empty. Heading and lede share the top row above them. */
@media (min-width: 1100px) {
  .why-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sp-7);
    align-items: end;
    margin-bottom: var(--sp-7);
  }
  .why-head > div > h2 { margin-bottom: 0; }
  .why-head > .lede { margin: 0; max-width: none; }

  .why-body > .checklist--spread {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--sp-7);
    row-gap: 0;
    max-width: none;
  }
  /* flex grow, so a short final row expands instead of leaving a gap */
  .why-body > .checklist--spread > li { flex: 1 1 22rem; max-width: none; }
}

/* Sections read top to bottom, always. Pouring one text flow into columns
   filled the width but made the reader finish a column and scroll back up for
   the next one, so the flow is gone. Instead each section is a masthead: the
   heading takes a fixed left column and the section's own paragraphs or list
   items sit beside it as a row, left to right — self-contained units, the same
   arrangement as the card grids on the home page. */
@media (min-width: 1100px) {
  .prose-block {
    display: grid;
    grid-template-columns: minmax(170px, 250px) minmax(0, 1fr);
    column-gap: var(--sp-7);
    align-items: start;
    padding-top: var(--sp-6);
    border-top: 1px solid var(--line);
    margin-bottom: var(--sp-7);
  }
  .prose-block:first-child { border-top: 0; padding-top: 0; }
  .prose-block:last-child { margin-bottom: 0; }
  .prose-block > h2 { margin: 0; hyphens: none; }

  /* Flex, not grid: a grid track is a fixed width, so three paragraphs in a
     two-track row left the second row half empty. Flex items grow, so whatever
     lands on the last row expands to fill it. */
  .prose-block__body {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--sp-7);
    row-gap: var(--sp-5);
    align-items: flex-start;
  }
  /* `.layout-sidebar .prose p` is (0,2,1) and this was (0,1,1), so the reading
     cap kept winning and the flex item never grew. Match the scope. */
  .layout-sidebar .prose .prose-block__body > p { margin: 0; max-width: none; flex: 1 1 25rem; }
  .prose-block__body > ul,
  .prose-block__body > ol {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--sp-7);
    row-gap: var(--sp-4);
    margin: 0;
    max-width: none;
  }
  .prose-block__body > ul > li,
  .prose-block__body > ol > li { flex: 1 1 20rem; }
  .prose-block__body > ul > li,
  .prose-block__body > ol > li { max-width: none; margin: 0; }
  /* Short label/value items pack tighter, so a five-item list fills one row. */
  .prose-block__body > ul.list--compact > li { flex-basis: 13rem; }

  /* One line of copy that is meant to be read as a statement, not as body.
     It spans the row rather than sitting in a single track. */
  .prose-block--feature .prose-block__body > p { flex-basis: 100%; }
  .prose-block--feature .prose-block__body > p {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.35;
    color: var(--ink-900);
    max-width: none;
  }
}
/* Headings, rules and lists run the full column, so on a very wide monitor the
   surplus reads as structure rather than as a hole beside the paragraphs. */
.layout-sidebar .prose h2,
.layout-sidebar .prose h3,
.layout-sidebar .prose > ul,
.layout-sidebar .prose > ol,
.layout-sidebar .prose .grid,
.layout-sidebar .prose .steps,
.layout-sidebar .prose .checklist { max-width: none; }
/* Enough room now for the supporting furniture to sit side by side. */
@media (min-width: 1280px) {
  .layout-sidebar .prose .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .layout-sidebar .prose .steps { grid-template-columns: repeat(3, 1fr); }
}
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-8); margin-bottom: var(--sp-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose p, .prose li { font-size: var(--step-0); }
.prose ul { padding-left: 1.1rem; }
.prose li::marker { color: var(--ink-400); }
.prose blockquote {
  margin: var(--sp-6) 0; padding: 0 0 0 var(--sp-5);
  border-left: 2px solid var(--ink-900); background: none; border-radius: 0;
  font-family: var(--font-display); font-size: 1.6rem; line-height: 1.35; color: var(--ink-900);
}
.prose blockquote p { font-size: inherit; font-family: inherit; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose .grid { max-width: none; }
.prose .grid--2, .prose .grid--3 { grid-template-columns: 1fr; }
/* Three step columns inside a 696px reading column is 187px each — far
   too narrow for a sentence. Stack them; there is room below, not beside. */
.prose .steps { grid-template-columns: 1fr; gap: var(--sp-5); }

.sidebar-card { background: none; border: 0; border-top: 1px solid var(--line-strong); border-radius: 0; padding: var(--sp-5) 0 0; position: sticky; top: 100px; }
.sidebar-card h3 { font-size: var(--step--2); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-500); margin-bottom: var(--sp-4); }
.sidebar-card ul { list-style: none; padding: 0; margin: 0; }
.sidebar-card li { border-bottom: 1px solid var(--line); margin: 0; }
.sidebar-card li:last-child { border-bottom: 0; }
.sidebar-card a:not(.btn) { display: block; padding: .7rem 0; text-decoration: none; color: var(--ink-700); font-weight: 600; font-size: .95rem; }
.sidebar-card a:not(.btn):hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 4px; }
.site-footer a, .sidebar-card a { overflow-wrap: break-word; }

/* Steps */
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--sp-6); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; margin: 0; padding-top: var(--sp-5); border-top: 1px solid var(--line-strong); }
.steps li::before {
  content: counter(step, decimal-leading-zero); display: block;
  font-family: var(--font-display); font-size: 2.2rem; font-weight: 400;
  color: var(--ink-300); line-height: 1; margin-bottom: var(--sp-4);
}
.steps h3 { font-size: 1.15rem; margin-bottom: var(--sp-3); }
.steps p { font-size: 1rem; margin: 0; }
.section--deep .steps li { border-top-color: #fff; }
.section--deep .steps li::before { color: var(--on-deep-muted); }

/* Checklist — a hairline-ruled list, no coloured ticks */
.checklist { list-style: none; padding: 0; }
/* The measure cap belongs on the LIST, not on the item that carries the rule.
   On the item, every divider stopped 400px short of its column. */
.checklist { max-width: 74ch; }
.checklist li {
  position: relative; padding: var(--sp-4) 0 var(--sp-4) 1.75rem;
  margin: 0; border-bottom: 1px solid var(--line); max-width: none;
}
.checklist li:first-child { border-top: 1px solid var(--line); }
.checklist li::before {
  content: "\2014"; position: absolute; left: 0; top: var(--sp-4);
  color: var(--ink-400); font-weight: 400;
}
.section--deep .checklist li { border-color: var(--on-deep-line); }
.section--deep .checklist li:first-child { border-top-color: var(--on-deep-line); }
.section--deep .checklist li::before { color: var(--on-deep-muted); }

/* Trust strip */
.trust-strip { border-bottom: 1px solid var(--line); background: #fff; padding-block: var(--sp-5); }
.trust-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4) var(--sp-7); }
.trust-strip li {
  margin: 0; font-weight: 700; color: var(--ink-500); font-size: var(--step--2);
  letter-spacing: .14em; text-transform: uppercase;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--sp-5) 2.5rem var(--sp-5) 0; position: relative;
  font-weight: 700; color: var(--ink-900); font-size: 1.1rem; line-height: 1.4;
  max-width: 58ch;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-size: 1.6rem; font-weight: 400; color: var(--ink-900); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding-bottom: var(--sp-5); max-width: 66ch; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 620px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-field--full { grid-column: 1 / -1; } }
.form-field label {
  display: block; font-weight: 700; font-size: var(--step--2); color: var(--ink-900);
  margin-bottom: .45rem; text-transform: uppercase; letter-spacing: .1em;
}
.form-field .hint { font-weight: 400; color: var(--ink-500); text-transform: none; letter-spacing: 0; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: .85rem .9rem; font: inherit; font-size: 1rem; color: var(--ink-900);
  background: #fff; border: 1px solid var(--ink-400); border-radius: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900);
}
.form-field textarea { min-height: 150px; resize: vertical; }
.form-consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--ink-500); font-weight: 400; text-transform: none; letter-spacing: 0; }
.form-consent input { width: auto; margin-top: .35rem; flex: none; }
.form-note { font-size: .92rem; color: var(--ink-500); max-width: 62ch; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { background: var(--surface-deep); color: var(--on-deep); }
.cta-band .wrap { display: grid; gap: var(--sp-6); align-items: center; padding-block: var(--sp-8); }
@media (min-width: 860px) { .cta-band .wrap { grid-template-columns: 1fr auto; gap: var(--sp-8); } }
.cta-band h2 { color: #fff; margin-bottom: var(--sp-3); font-size: var(--step-2); }
.cta-band p { margin: 0; color: var(--on-deep-muted); max-width: 52ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--surface-deep); color: var(--on-deep-muted); padding-top: var(--sp-8); font-size: .95rem; border-top: 1px solid var(--on-deep-line); }
.site-footer a:not(.btn) { color: var(--on-deep); text-decoration: none; }
.site-footer a:not(.btn):hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-footer h3 {
  color: #fff; font-size: var(--step--2); letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--on-deep-line);
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer p { max-width: 40ch; }
.footer-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: var(--sp-7); } }
.site-footer .brand { margin-bottom: var(--sp-5); }
.footer-bottom {
  margin-top: var(--sp-8); border-top: 1px solid var(--on-deep-line); padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); justify-content: space-between;
  font-size: .88rem; color: var(--ink-500);
}
.footer-bottom p { max-width: none; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: 0; }
.footer-bottom li { margin: 0; }

/* ==========================================================================
   Insights
   ========================================================================== */
.post-card { display: flex; flex-direction: column; }
.post-card .meta {
  font-size: var(--step--2); color: var(--ink-500); margin-bottom: var(--sp-4);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
}
.post-card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + 0.45vw, 1.75rem); line-height: 1.15; letter-spacing: 0; }
.post-card h3 a { color: var(--ink-900); text-decoration: none; }
.post-card h3 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.tag { font-weight: 700; color: var(--ink-900); background: none; padding: 0; border-radius: 0; }
.tag::after { content: " \00b7"; color: var(--ink-300); }

/* ==========================================================================
   Utilities
   ========================================================================== */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   Large-screen tier (1800px+ — a 4K panel at 125-150% scaling lands here).

   Widening the container alone is not enough on a very large display: the
   headline stays 415px wide inside a 1700px column and the hero reads as
   empty. Past 1800px the display type, the reading measures and the enquiry
   panel all step up together, so the composition stays in proportion to the
   page rather than to a laptop.

   NOTE: this block must remain the LAST thing in the file. Media queries add
   no specificity, so if it moves above the base rules it silently loses.
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
  :root {
    --step-0: 1.1875rem;                                   /* 19px body */
    --step-1: clamp(1.5rem, 0.9rem + 0.75vw, 1.9rem);      /* lede */
  }
  .hero p:not(.eyebrow):not(.form-note) { max-width: 44ch; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(430px, 540px); }
  .sidebar-card { top: 120px; }
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
  .layout-sidebar > aside { top: 120px; max-height: calc(100vh - 144px); }
}