/* GN Tax Service. Tokens from the GN Brand System (Claude Design, October 2026).
   Layers, in order: reset, tokens, base, layout, components, pages, utilities.
   One source of truth for every color and face is the :root block. */

@layer reset, tokens, base, layout, components, pages, utilities;

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/libre-baskerville-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/libre-baskerville-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/libre-baskerville-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100dvh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  ul, ol { padding-left: 1.25rem; }
  h1, h2, h3, h4 { overflow-wrap: anywhere; }
  p, li { overflow-wrap: break-word; }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --paper: #FAFAF9; --paper-2: #F2F2EF;
    --ink: #000000; --text: #1C1C1C; --muted: #5E5E5E; --dim: #737373;
    --rule: #DDDDDA; --rule-strong: #000000;
    --gold: #D4AF37; --gold-deep: #8A6D1D; --gold-soft: #F5EBC9;
    --block-bg: #000000; --block-text: #FAFAF9; --block-soft: #A5A5A5; --block-rule: #2A2A2A; --block-raise: #161616;
    --tint-bg: #F4EFE4; --tint-raise: #EBE4D5; --tint-rule: #DDD4C2; --tint-gold: #735A16; --tint-dim: #5E5E5E;

    --serif: "Libre Baskerville", Baskerville, "Times New Roman", serif;
    --sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;

    --fs-display: clamp(2.25rem, 1.45rem + 3.2vw, 3.5rem);     /* 36 to 56 */
    --fs-display-sm: clamp(1.9rem, 1.35rem + 2.2vw, 2.75rem);  /* 30 to 44 */
    --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);               /* 24 to 32 */
    --fs-h3: 1.375rem;                                         /* 22 */
    --fs-lede: 1.1875rem;                                      /* 19 */
    --fs-body: 1.09375rem;                                     /* 17.5 */
    --fs-small: 0.9375rem;                                     /* 15 */
    --fs-micro: 0.875rem;                                      /* 14 */

    --gutter: 22px;
    --tap: 44px;
    --measure: 40rem;
    --wrap: 72rem;
    --section: clamp(3rem, 2rem + 4vw, 6rem);
    --shadow-sticky: 0 -8px 24px rgba(0, 0, 0, 0.08);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #000000; --paper-2: #111111;
      --ink: #FAFAF9; --text: #EDEDEA; --muted: #A5A5A5; --dim: #8A8A8A;
      --rule: #262626; --rule-strong: #FAFAF9;
      --gold-deep: #D4AF37; --gold-soft: #2B2411;
      --block-bg: #0E0E0E; --block-rule: #333333; --block-raise: #1A1A1A;
      --tint-bg: #1F1A12; --tint-raise: #2A241A; --tint-rule: #3A3224; --tint-gold: #D4AF37; --tint-dim: #8A8A8A;
    }
  }
  :root[data-theme="dark"] {
    --paper: #000000; --paper-2: #111111;
    --ink: #FAFAF9; --text: #EDEDEA; --muted: #A5A5A5; --dim: #8A8A8A;
    --rule: #262626; --rule-strong: #FAFAF9;
    --gold-deep: #D4AF37; --gold-soft: #2B2411;
    --block-bg: #0E0E0E; --block-rule: #333333; --block-raise: #1A1A1A;
    --tint-bg: #1F1A12; --tint-raise: #2A241A; --tint-rule: #3A3224; --tint-gold: #D4AF37; --tint-dim: #8A8A8A;
  }
}

@layer base {
  body {
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.55;
    color: var(--text);
    background: var(--paper);
  }
  h1, h2, h3, .display, .h2, .h3 {
    font-family: var(--serif);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
  }
  .display { font-size: var(--fs-display); }
  .display--sm { font-size: var(--fs-display-sm); }
  .h2, h2 { font-size: var(--fs-h2); line-height: 1.2; }
  .h3, h3 { font-size: var(--fs-h3); line-height: 1.3; }
  p { max-width: var(--measure); }
  .lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--text); max-width: var(--measure); margin-top: 0.75rem; }
  a { color: inherit; }
  .link, .prose a {
    color: var(--gold-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }
  .link:hover, .prose a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
  .band :focus-visible { outline-color: var(--gold); }
  .kicker { font-family: var(--sans); font-weight: 600; font-size: var(--fs-small); color: var(--gold-deep); margin-bottom: 0.75rem; }
  .skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; z-index: 10; }
  .skip:focus { left: var(--gutter); }
  strong { font-weight: 600; color: var(--ink); }
  .plain { list-style: none; padding: 0; }
  .plain li + li { margin-top: 0.4rem; }
  table { border-collapse: collapse; width: 100%; }
  .price, .price__n, .fee-table__num, .reach__phone { font-variant-numeric: lining-nums tabular-nums; }
}

@layer layout {
  .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
  .wrap--narrow { max-width: calc(var(--measure) + 2 * var(--gutter)); }
  main > section, main > article { padding-block: var(--section); }
  main > section + section:not(.band):not(.tint) { padding-top: 0; }
  main > section.band + section:not(.band):not(.tint), main > section.tint + section:not(.band):not(.tint) { padding-top: var(--section); }
  .band { background: var(--block-bg); color: var(--block-text); border-block: 1px solid var(--block-rule);
    --ink: var(--block-text); --text: var(--block-text); --muted: var(--block-soft); --dim: var(--block-soft);
    --paper: var(--block-bg); --paper-2: var(--block-raise); --rule: var(--block-rule); --rule-strong: var(--block-text); --gold-deep: var(--gold); }
  .tint { background: var(--tint-bg); --paper-2: var(--tint-raise); --rule: var(--tint-rule); --gold-deep: var(--tint-gold); --dim: var(--tint-dim); }
  .band h1, .band h2, .band h3, .band .display, .band .h2 { color: var(--block-text); }
  .band .lede, .band__lede, .hero__lede { color: var(--block-soft); }
  .band__lede, .message .prose { margin-top: 1rem; }
  .band .link { color: var(--gold); }
}

@layer components {
  /* buttons */
  .button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: var(--tap); padding: 0.7rem 1.25rem;
    font-weight: 700; font-size: var(--fs-body); line-height: 1.2;
    text-decoration: none; text-align: center;
    border: 2px solid transparent;
  }
  .button--gold { background: var(--gold); color: #000; border-color: var(--gold); }
  .button--gold:hover { background: #000; color: var(--gold); }
  .button--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .button--ink:hover { background: var(--paper); color: var(--ink); }
  .button--lg { padding: 0.9rem 1.5rem; font-size: var(--fs-lede); }

  /* founding notice: a thin strip above the header while the window is open */
  .notice { background: var(--block-bg); color: var(--block-text); font-size: var(--fs-small); border-bottom: 1px solid var(--block-rule); }
  .notice__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.25rem; min-height: 2.75rem; padding-block: 0.4rem; }
  .notice__text { margin: 0; max-width: none; line-height: 1.4; }
  .notice__label { color: var(--gold); font-weight: 700; margin-right: 0.4rem; }
  .notice__short { display: none; }
  .notice__link { color: var(--gold); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 0.2em; min-height: var(--tap); display: inline-flex; align-items: center; }
  @media (max-width: 47.99em) { .notice__long { display: none; } .notice__short { display: inline; } }

  /* founding offer on Home */
  .offer { display: grid; grid-template-columns: 1fr; gap: 2rem 4rem; background: var(--paper-2); border-top: 2px solid var(--gold); padding: clamp(1.5rem, 1rem + 2vw, 3rem); }
  .offer__kicker { font-weight: 600; font-size: var(--fs-small); color: var(--gold-deep); margin-bottom: 0.5rem; }
  .offer__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: 1.25rem; font-variant-numeric: lining-nums tabular-nums; }
  .offer__n { font-family: var(--serif); font-weight: 700; font-size: clamp(2.5rem, 1.8rem + 2.5vw, 3.5rem); color: var(--ink); line-height: 1; }
  .offer__per { font-size: var(--fs-lede); color: var(--text); }
  .offer__list { font-family: var(--serif); font-size: var(--fs-lede); color: var(--muted); }
  .offer__terms { margin-top: 1rem; }
  .offer__note { margin-top: 0.75rem; font-size: var(--fs-small); color: var(--muted); }
  .offer__h { font-size: var(--fs-h3); }
  .offer__side > * + * { margin-top: 0.75rem; }
  .offer__side .button { margin-top: 1.25rem; }
  .offer__after { font-size: var(--fs-small); color: var(--muted); }
  @media (min-width: 56em) { .offer { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } .offer__side { border-left: 1px solid var(--rule); padding-left: 2.5rem; } }

  /* header */
  .site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
  .site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; flex-wrap: wrap; }
  .brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap); padding: 0 0.25rem; font-weight: 600; color: var(--ink); }
  .nav-toggle__bar { width: 22px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .site-nav { flex-basis: 100%; display: none; padding-bottom: 1rem; }
  .site-nav.is-open { display: block; }
  .site-nav__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
  .site-nav__list a:not(.button) { display: block; padding: 0.6rem 0; font-weight: 600; font-size: var(--fs-small); text-decoration: none; color: var(--text); border-bottom: 2px solid transparent; }
  .site-nav__list a[aria-current="page"] { border-bottom-color: var(--gold); color: var(--ink); }
  .site-nav__signin a { color: var(--muted); font-weight: 400; }
  .site-nav__start { margin-top: 0.5rem; }
  @media (max-width: 22em) {
    .brand { gap: 0.5rem; }
    .brand__name { font-size: 1.05rem; }
    .nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  @media (min-width: 56em) {
    .nav-toggle { display: none; }
    .site-nav { display: block; flex-basis: auto; padding: 0; }
    .site-nav__list { flex-direction: row; align-items: center; gap: 1.5rem; }
    .site-nav__list a:not(.button) { padding: 0.5rem 0; }
    .site-nav__start { margin: 0 0 0 0.5rem; }
  }

  /* ruled rows */
  .doors { list-style: none; padding: 0; margin-top: 2rem; border-top: 2px solid var(--rule-strong); }
  .door { border-bottom: 1px solid var(--rule); }
  .door__link {
    display: grid; grid-template-columns: 1fr; gap: 0.35rem 2rem;
    padding: 1.25rem 0.25rem; text-decoration: none; color: var(--text);
    transition: background-color 150ms ease;
  }
  .door__link:hover { background: var(--paper-2); }
  .door__answer { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; line-height: 1.3; color: var(--ink); letter-spacing: -0.01em; }
  .door__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: baseline; }
  .door__lane { font-weight: 600; font-size: var(--fs-small); color: var(--muted); }
  .door__price { font-family: var(--serif); color: var(--gold-deep); font-size: var(--fs-body); }
  .door__next { color: var(--text); font-size: var(--fs-body); max-width: var(--measure); }
  @media (min-width: 48em) {
    .door__link { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "answer meta" "next next"; }
    .door__answer { grid-area: answer; }
    .door__meta { grid-area: meta; justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: 0.15rem; text-align: right; }
    .door__next { grid-area: next; }
  }
  .doors__after { margin-top: 1.25rem; }
  .doors--simple { max-width: 48rem; }
  .doors--simple .door__link { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 0.25rem; min-height: 4rem; }
  .doors--simple .door__answer { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem); }
  .door__go { flex: none; color: var(--gold-deep); transition: transform 150ms ease; }
  .doors--simple .door__link:hover .door__go, .doors--simple .door__link:focus-visible .door__go { transform: translateX(4px); }
  @media (prefers-reduced-motion: reduce) { .door__go { transition: none; } }
  .doors--compact .door__link { padding: 1rem 0.25rem; }
  @media (min-width: 48em) {
    .doors--compact .door__link { grid-template-areas: "answer meta"; align-items: baseline; }
    .doors--compact .door__meta { flex-direction: row; justify-content: flex-end; gap: 1rem; white-space: nowrap; }
    .doors--compact .door__link { grid-template-columns: minmax(0, 1fr) auto; }
  }

  /* price */
  .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; margin-top: 1rem; }
  .price__n { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--ink); }
  .price__for { color: var(--muted); font-size: var(--fs-small); }
  .price--list { margin-top: 0.25rem; }
  .price--list .price__n { font-size: var(--fs-body); font-weight: 400; color: var(--muted); text-decoration: line-through; }
  .band .price__n { color: var(--gold); }

  /* callout: a paper-2 panel with a gold rule across the top */
  .callout { background: var(--paper-2); border-top: 2px solid var(--gold); padding: 1.5rem; margin-top: 1.5rem; }
  .callout--founding .price__n { font-size: 1.75rem; }
  .callout--founding p + p, .callout--founding p + a { margin-top: 0.75rem; display: inline-block; }
  .callout--founding .h3 { margin-bottom: 0.75rem; }

  /* prose */
  .prose > * + * { margin-top: 1rem; }
  .prose ul, .prose ol { padding-left: 1.2rem; max-width: var(--measure); }
  .prose li + li { margin-top: 0.5rem; }
  .prose h3 { margin-top: 1.75rem; }
  .prose-section .h2, .prose-page .h2 { margin-bottom: 1rem; }
  .prose-page section { margin-top: 2.5rem; }
  .prose-page .display--sm + .lede { margin-bottom: 1.5rem; }

  /* quote */
  .quote { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--gold); max-width: var(--measure); }
  .quote p { font-family: var(--serif); font-style: italic; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }

  /* faq */
  .faq__list { margin-top: 1.5rem; border-top: 2px solid var(--rule-strong); }
  .faq__item { border-bottom: 1px solid var(--rule); }
  .faq__q {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
    padding: 1.1rem 0.25rem; font-family: var(--serif); font-weight: 700; font-size: var(--fs-lede); line-height: 1.3; color: var(--ink);
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q::after { content: "+"; font-family: var(--sans); font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--gold-deep); flex: none; transition: transform 200ms ease; }
  .faq__item[open] .faq__q::after { transform: rotate(45deg); }
  .faq__a { padding: 0 0.25rem 1.25rem; }
  .faq__a > * + * { margin-top: 0.75rem; }

  /* form */
  .form { margin-top: 1.5rem; max-width: var(--measure); }
  .form__row + .form__row, .form__row + .button { margin-top: 1.25rem; }
  .form__label { display: block; font-weight: 600; margin-bottom: 0.4rem; color: var(--ink); }
  .form__input { width: 100%; min-height: var(--tap); padding: 0.6rem 0.75rem; background: var(--paper); border: 1px solid var(--muted); color: var(--text); }
  .form__input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 0; border-color: var(--gold-deep); }
  textarea.form__input { resize: vertical; }
  .form__hint, .form__after { font-size: var(--fs-small); color: var(--muted); margin-top: 0.5rem; }
  .form__trap { display: none; }
  .form .button { margin-top: 1.25rem; }

  /* steps: the one orchestrated scroll moment. Readable as a plain list; the script adds the counter and the rail. */
  .steps { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  .steps__stage { display: none; }
  .steps__listwrap { position: relative; margin-top: 2rem; }
  .steps__rail { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--rule); }
  .steps__rail-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--gold); transition: height 120ms linear; }
  .steps__list { list-style: none; padding: 0; border-top: 2px solid var(--rule-strong); }
  .step { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 0.3rem 0.5rem; padding: 1.4rem 0 1.4rem 1rem; border-bottom: 1px solid var(--rule); }
  .step__n { font-family: var(--serif); font-weight: 700; font-size: var(--fs-h3); line-height: 1.3; grid-row: 1 / span 2; color: var(--muted); align-self: start; transition: color 250ms ease; }
  .steps--live .step.is-active::before { content: ""; position: absolute; left: -3px; top: calc(1.4rem + 0.45em); width: 8px; height: 8px; background: var(--gold); }
  .step__title { font-size: var(--fs-h3); color: var(--ink); }
  .step__body { color: var(--text); }
  .steps--live .step.is-past .step__n, .steps--live .step.is-active .step__n, .steps--static .step__n { color: var(--gold-deep); }
  .steps--static .steps__rail-fill { height: 100%; }
  .steps__tracker { margin-top: 1.5rem; font-family: var(--serif); font-size: var(--fs-lede); color: var(--ink); }
  @media (min-width: 56em) {
    .steps { grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.2fr); gap: 4rem; }
    .steps--live .steps__stage { display: block; }
    .steps__stage-inner { position: sticky; top: 6rem; }
    .steps__counter { font-family: var(--serif); font-weight: 700; color: var(--ink); line-height: 1; display: flex; align-items: baseline; gap: 0.6rem; }
    .steps__num { display: inline-block; font-size: clamp(4rem, 2rem + 6vw, 7rem); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; min-width: 1.1ch; }
    .steps__num.is-changing { animation: step-change 320ms ease; }
    .steps__of { font-size: var(--fs-lede); font-weight: 400; color: var(--muted); }
    .steps__stage-label { display: block; margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); max-width: 14rem; }
    .step { grid-template-columns: 3.25rem 1fr; padding: 1.75rem 0 1.75rem 1.25rem; }
    .steps--live .step.is-active::before { top: calc(1.75rem + 0.45em); }
  }
  @keyframes step-change {
    from { opacity: 0; transform: translateY(0.35em); }
    to { opacity: 1; transform: none; }
  }

  /* sticky start bar (phones) */
  .sticky-start { display: none; }
  @media (max-width: 55.99em) {
    .sticky-start {
      display: flex; gap: 0.75rem; align-items: center;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
      padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
      background: var(--paper); border-top: 1px solid var(--rule); box-shadow: var(--shadow-sticky);
      transform: translateY(110%); visibility: hidden; transition: transform 220ms ease, visibility 0s linear 220ms;
    }
    .sticky-start.is-shown { transform: none; visibility: visible; transition: transform 220ms ease, visibility 0s; }
    html { scroll-padding-bottom: 5.5rem; }
    .sticky-start .button { flex: 1; white-space: nowrap; padding-inline: 0.75rem; }
    .sticky-start__call { white-space: nowrap; font-weight: 600; color: var(--ink); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 0.5rem; }
  }

  /* reviews: the client's words in the serif, their name in the sans, the source beside it */
  .stars { display: inline-flex; gap: 2px; vertical-align: -2px; }
  .stars svg { fill: var(--gold); }
  .voices__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; }
  .voices__rating { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--text); font-weight: 600; max-width: none; }
  .voices__list { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; align-items: start; }
  .voices__after { margin-top: 1.75rem; }
  .review { margin: 0; border-top: 2px solid var(--rule-strong); padding-top: 1.25rem; display: flex; flex-direction: column; }
  .review__text { margin: 0; }
  .review__text p { font-family: var(--serif); font-style: italic; font-size: var(--fs-body); line-height: 1.65; color: var(--ink); }
  .review__text p + p { margin-top: 0.75rem; }
  .review__more { margin-top: 0.75rem; }
  .review__more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-small); font-weight: 600; color: var(--gold-deep); text-decoration: underline; text-underline-offset: 0.2em; }
  .review__more summary::-webkit-details-marker { display: none; }
  .review__more[open] summary { color: var(--muted); }
  .review__full { border-left: 0; padding-top: 0.25rem; }
  .review__full p { font-family: var(--serif); font-style: italic; font-size: var(--fs-small); line-height: 1.65; color: var(--text); }
  .review__full p + p { margin-top: 0.6rem; }
  .voices__note { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--muted); max-width: var(--measure); }
  .review__by { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; font-size: var(--fs-small); }
  .review__name { font-weight: 600; color: var(--ink); }
  .review__src { color: var(--muted); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.18em; }
  .review__src:hover { text-decoration-color: var(--gold); }
  @media (min-width: 56em) { .voices__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }
  .reviews-page__intro .voices__rating { margin-top: 1rem; }
  .reviews-page__list { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2.5rem; align-items: start; }
  @media (min-width: 48em) { .reviews-page__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; } }
  .reviews-page__note { margin-top: 2.5rem; font-size: var(--fs-small); color: var(--muted); max-width: var(--measure); }

  /* reach */
  .reach__list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
  .reach__item { border-top: 2px solid var(--rule-strong); padding-top: 1rem; }
  .reach__item > * + * { margin-top: 0.75rem; }
  .reach__item .button { margin-top: 1rem; }
  .reach__h { font-size: var(--fs-h3); }
  .reach__phone { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--ink); text-decoration: none; }
  .reach__phone:hover { text-decoration: underline; text-decoration-color: var(--gold); }
  @media (min-width: 48em) { .reach__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* fee table (lives inside the black band) */
  .fee-table { margin-top: 2rem; font-size: var(--fs-body); }
  .fee-table th, .fee-table td { text-align: left; vertical-align: top; padding: 0.9rem 0.5rem 0.9rem 0; border-bottom: 1px solid var(--block-rule); }
  .fee-table thead th { font-family: var(--sans); font-weight: 600; font-size: var(--fs-small); color: var(--block-soft); border-bottom: 2px solid var(--block-text); }
  .fee-table tbody th { font-family: var(--serif); font-weight: 700; color: var(--block-text); }
  .fee-table td { color: var(--block-soft); }
  .fee-table__num { font-family: var(--serif); color: var(--gold); white-space: nowrap; text-align: right; padding-right: 0 !important; }
  .fee-table__first th, .fee-table__first td { color: var(--block-text); }
  .fee-list { margin: 0.35rem 0 0.5rem; padding-left: 1.1rem; }
  .fee-list li + li { margin-top: 0.25rem; }
  .fee-table__founding { display: block; margin-top: 0.35rem; font-family: var(--sans); font-weight: 600; font-size: var(--fs-small); color: var(--block-text); }
  .fee-notes { margin-top: 1.5rem; color: var(--block-soft); font-size: var(--fs-small); max-width: var(--measure); }
  .fee-notes li + li { margin-top: 0.5rem; }
  .fees .button { margin-top: 2rem; }
  @media (max-width: 47.99em) {
    .fee-table thead { position: absolute; left: -9999px; }
    .fee-table tr, .fee-table th, .fee-table td { display: block; }
    .fee-table tr { padding: 1rem 0; border-bottom: 1px solid var(--block-rule); }
    .fee-table th, .fee-table td { border: 0; padding: 0; }
    .fee-table td { margin-top: 0.35rem; }
    .fee-table__num { text-align: left; white-space: normal; font-size: var(--fs-lede); }
  }
}

@layer pages {
  /* home hero */
  .hero { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); }
  .hero__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem 4rem; align-items: center; }
  .hero__lede { font-size: var(--fs-lede); margin-top: 1.25rem; max-width: 34rem; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 2rem; }
  .hero__link { color: var(--gold); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
  .hero__figure { margin: 0; max-width: 32rem; justify-self: center; width: 100%; }
  .hero-art { width: 100%; height: auto; display: block; color: var(--block-text); }
  .hero-art__paper { fill: var(--block-bg); stroke: var(--block-soft); stroke-width: 1; }
  .hero-art__sheet--front .hero-art__paper { stroke: var(--block-text); stroke-width: 1.5; }
  .hero-art__sheet--back .hero-art__paper { opacity: 0.45; }
  .hero-art__sheet--mid .hero-art__paper { opacity: 0.7; }
  .hero-art__rule { stroke: var(--block-soft); stroke-width: 1; }
  .hero-art__rows rect { fill: var(--block-soft); opacity: 0.42; }
  .hero-art__label { font-family: var(--sans); font-size: 13px; font-weight: 600; fill: var(--block-text); }
  .hero-art__label--soft { font-weight: 400; fill: var(--block-soft); }
  .hero-art__gold-fill { fill: var(--gold); }
  .hero-art__gold-rule { stroke: var(--gold); stroke-width: 2; }
  .hero-art__gold-text { font-family: var(--serif); font-size: 13px; fill: var(--gold); }
  .hero-art__tag { fill: none; stroke: var(--gold); stroke-width: 1.5; }
  .hero-art__tag-text { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--gold); }
  /* hero photo: a page's feeling, in full colour beside the text (never dimmed behind it). One arrival: the frame
     opens from the bottom, the picture settles, a gold rule draws under it. No loop, no gradient. Focus classes set what stays
     in frame when the panel crops (the CSP blocks inline styles, so positions are classes). */
  .hero { position: relative; overflow: hidden; isolation: isolate; }
  .hero-photo { position: relative; overflow: hidden; margin: 0; aspect-ratio: 3 / 2; background: var(--block-rule);
    animation: photo-open 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-photo picture, .hero-photo img { display: block; width: 100%; height: 100%; }
  .hero-photo img { object-fit: cover; object-position: 50% 50%; transform-origin: 50% 60%;
    animation: photo-settle 2600ms cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .hero-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--gold);
    transform-origin: 0 50%; animation: rule-draw 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 650ms both; }
  .hero-photo--x20 img { object-position: 20% 50%; }
  .hero-photo--x30 img { object-position: 30% 50%; }
  .hero-photo--x40 img { object-position: 40% 50%; }
  .hero-photo--x60 img { object-position: 60% 50%; }
  .hero-photo--x70 img { object-position: 70% 50%; }
  .hero-photo--x80 img { object-position: 80% 50%; }
  .hero-photo--top img { object-position: 50% 20%; }
  @keyframes photo-open { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes photo-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
  @keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @media (prefers-reduced-motion: reduce) { .hero-photo, .hero-photo img, .hero-photo::after { animation: none; } }

  /* Home hero with a picture or clip behind the headline (James, Oct 5: not boxed in, transparent behind the text).
     Phone: the picture fills the top edge to edge and melts into the black; the headline begins over its faded foot.
     Wide screens: the picture fills the right of the band, melting into the black on its left (under the text) and
     at its foot (under the trust row). The text never sits on more than a faint, darkened edge of the picture. */
  .hero--bleed { --bleed-h: min(66vw, 28rem); padding-top: calc(var(--bleed-h) - 3.25rem); }
  .hero-bleed { position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: var(--bleed-h); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
    animation: bleed-in 1400ms ease-out both; }
  .hero-bleed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%); }
  .hero-bleed__media, .hero-bleed__pic, .hero-bleed__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
  .hero-bleed__pic img, .hero-bleed__media { transform-origin: 60% 45%; animation: photo-settle 2600ms cubic-bezier(0.2, 0.6, 0.2, 1) both; }
  .hero-bleed--x30 .hero-bleed__media, .hero-bleed--x30 img { object-position: 30% 40%; }
  .hero-bleed--x40 .hero-bleed__media, .hero-bleed--x40 img { object-position: 40% 40%; }
  .hero-bleed--x60 .hero-bleed__media, .hero-bleed--x60 img { object-position: 60% 40%; }
  .hero-bleed--x70 .hero-bleed__media, .hero-bleed--x70 img { object-position: 70% 40%; }
  @keyframes bleed-in { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .hero-bleed, .hero-bleed__pic img, .hero-bleed__media { animation: none; } }
  .hero--bleed .hero__text { position: relative; }
  .hero-bleed__media::-webkit-media-controls, .hero-bleed__media::-webkit-media-controls-start-playback-button,
  .hero-bleed__media::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

  .hero__caption { margin-top: 0.75rem; font-size: var(--fs-small); color: var(--block-soft); text-align: center; }

  /* hero arrival: the page's one moment on load. The record is read once, in order, in under two seconds. */
  .hero-art__sheet { animation: art-settle 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero-art__sheet--back { animation-delay: 0ms; }
  .hero-art__sheet--mid { animation-delay: 120ms; }
  .hero-art__sheet--front { animation-delay: 240ms; }
  .hero-art__find--1 { --i: 0; }
  .hero-art__find--2 { --i: 1; }
  .hero-art__find--3 { --i: 2; }
  .hero-art__find .hero-art__gold-rule { stroke-dasharray: 1; stroke-dashoffset: 1; animation: art-draw 520ms ease-out forwards; animation-delay: calc(760ms + var(--i) * 420ms); }
  .hero-art__find .hero-art__gold-text, .hero-art__find .hero-art__gold-fill { opacity: 0; animation: art-appear 320ms ease-out forwards; animation-delay: calc(900ms + var(--i) * 420ms); }
  .hero-art__tag, .hero-art__tag-text { opacity: 0; animation: art-appear 400ms ease-out forwards; animation-delay: 2150ms; }
  @keyframes art-settle { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes art-draw { to { stroke-dashoffset: 0; } }
  @keyframes art-appear { to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .hero-art__sheet, .hero-art__find .hero-art__gold-rule, .hero-art__find .hero-art__gold-text, .hero-art__find .hero-art__gold-fill, .hero-art__tag, .hero-art__tag-text { animation: none; opacity: 1; stroke-dashoffset: 0; }
  }
  .hero__trust { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 0.5rem 2rem; font-size: var(--fs-small); color: var(--block-soft); border-top: 1px solid var(--block-rule); padding-top: 1.25rem; }
  .hero__trust li { padding-left: 1rem; position: relative; }
  .hero__trust li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 2px; background: var(--gold); }
  @media (min-width: 48em) { .hero__trust { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 56em) {
    .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
    .hero__figure { justify-self: end; }
    .hero__trust { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0.5rem; }
    .hero--bleed .hero__text { grid-column: 1; }
  }
  @media (min-width: 72em) {
    .hero--bleed { padding-top: clamp(5rem, 3rem + 6vw, 9rem); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
    .hero--bleed .hero__grid { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
    .hero-bleed { left: auto; width: 66%; height: auto; bottom: 0;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 48%), linear-gradient(to top, transparent 0%, #000 32%);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(to right, transparent 0%, #000 48%), linear-gradient(to top, transparent 0%, #000 32%);
      mask-composite: intersect; }
    .hero-bleed::after { background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 62%), linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 34%); }
  }

  /* what we look for: the four verbs as ruled rows */
  .frame { margin: 2rem 0 0; border-top: 2px solid var(--rule-strong); }
  .frame__row { display: grid; grid-template-columns: 1fr; gap: 0.35rem 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
  .frame__verb { font-family: var(--serif); font-weight: 700; font-size: var(--fs-h3); color: var(--ink); }
  .frame__text { margin: 0; max-width: var(--measure); }
  .lookfor__after { margin-top: 1.25rem; font-family: var(--serif); font-size: var(--fs-lede); color: var(--ink); }
  @media (min-width: 48em) {
    .frame__row { grid-template-columns: 9rem minmax(0, 1fr); }
  }

  /* lanes */
  .lanes { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
  .lane-card { border-top: 2px solid var(--rule-strong); padding-top: 1rem; display: flex; flex-direction: column; }
  .lane-card__for { color: var(--muted); margin-top: 0.35rem; }
  .lane-card__p { margin-top: 1rem; flex: 1; }
  .lane-card .link { margin-top: 1rem; align-self: flex-start; }
  @media (min-width: 56em) { .lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; } }

  /* the findings drawing beside "We read your IRS record first" (when the hero carries a photo) */
  .lookfor__head { display: grid; grid-template-columns: 1fr; gap: 2rem 4rem; align-items: center; }
  .lookfor__figure { margin: 0; padding: 1.25rem 1.25rem 1rem; max-width: 30rem; width: 100%; justify-self: center; }
  @media (min-width: 56em) { .lookfor--art .lookfor__head { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); } }
  /* a drawing below the fold waits for the reader: site.js sets is-waiting, then removes it when the drawing
     comes into view. Without the script nothing waits and the drawing is simply there. */
  [data-reveal].is-waiting * { animation-play-state: paused; }
  @media print { [data-reveal] * { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; } }
  .nowrap { white-space: nowrap; }

  /* lane hero with a photo: picture first and edge to edge on a phone, beside the text on wide screens */
  .lane-hero--photo { padding-top: 0; }
  .lane-hero--photo .hero-photo { margin-inline: calc(-1 * var(--gutter)); margin-bottom: 2rem; }
  @media (min-width: 56em) {
    .lane-hero--photo { padding-top: var(--section); }
    .lane-hero--photo .lane-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; align-items: center; }
    .lane-hero--photo .hero-photo { grid-column: 2; grid-row: 1; margin: 0; aspect-ratio: 1 / 1; }
    .lane-hero--photo .lane-hero__text { grid-column: 1; grid-row: 1; }
  }

  /* people: James and Karigan, GN's own photographs. Square, like everything else in the brand. */
  .person { margin: 0; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
  .person__photo, .person__photo img { display: block; width: 4.5rem; height: 4.5rem; }
  .person__photo img { object-fit: cover; object-position: 50% 18%; border-bottom: 3px solid var(--gold); }
  .person__name { display: block; font-weight: 600; color: var(--ink); }
  .person__line { display: block; color: var(--muted); margin-top: 0.15rem; }
  .reach__people { display: grid; grid-template-columns: 1fr; gap: 1.25rem 3rem; margin-top: 1.75rem; }
  @media (min-width: 48em) { .reach__people { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; } }

  /* Reach GN hero: Karigan, because she makes the first call. A row under the button on a phone; a portrait on wide screens. */
  .start-hero__grid { display: grid; grid-template-columns: 1fr; gap: 2rem 4rem; align-items: center; }
  .host { margin: 0; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: center;
    border-top: 1px solid var(--block-rule); padding-top: 1.25rem; }
  .host__photo, .host__photo img { display: block; width: 5.5rem; height: 5.5rem; }
  .host__photo img { object-fit: cover; object-position: 50% 18%; border-bottom: 3px solid var(--gold); }
  .host__name { display: block; font-weight: 600; color: var(--block-text); }
  .host__line { display: block; color: var(--block-soft); margin-top: 0.25rem; font-size: var(--fs-small); }
  @media (min-width: 56em) {
    .start-hero__grid { grid-template-columns: minmax(0, 1fr) 18rem; }
    .host { grid-template-columns: 1fr; border-top: 0; padding-top: 0; gap: 0.9rem; }
    .host__photo, .host__photo img { width: 18rem; height: auto; aspect-ratio: 4 / 5; }
    .host__photo { position: relative; overflow: hidden; animation: photo-open 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  }

  /* case studies */
  .cs-hero { padding-bottom: 0; }
  .cs-hero__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem 4rem; align-items: center; }
  .cs-facts { margin: 1.75rem 0 0; border-top: 2px solid var(--rule-strong); max-width: var(--measure); }
  .cs-facts__row { display: grid; grid-template-columns: 1fr; gap: 0.15rem 1.5rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
  .cs-facts dt { font-weight: 600; color: var(--ink); font-size: var(--fs-small); }
  .cs-facts dd { margin: 0; }
  @media (min-width: 40em) { .cs-facts__row { grid-template-columns: 9rem minmax(0, 1fr); } }
  .cs-hero__art { margin: 0; background: var(--paper-2); border-top: 2px solid var(--gold); padding: 1.5rem 1.25rem 1.25rem; max-width: 30rem; width: 100%; justify-self: center; }
  .cs-hero__caption { margin-top: 0.75rem; font-size: var(--fs-small); color: var(--muted); }
  @media (min-width: 56em) { .cs-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); } }
  .cs-body { margin-top: var(--section); }
  .cs-body h2 { font-size: var(--fs-h2); margin-top: 2.75rem; }
  .cs-quote { margin: 2rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 3px solid var(--gold); max-width: var(--measure); }
  .cs-quote p:first-child { font-family: var(--serif); font-size: var(--fs-lede); line-height: 1.45; color: var(--ink); }
  .cs-quote .cs-quote__by { margin-top: 0.6rem; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
  .cs-note { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: var(--fs-small); color: var(--muted); }
  .cs-note p + p { margin-top: 0.5rem; }
  .cs-next .hero__actions { margin-top: 1.5rem; }
  .cases { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 2rem; }
  .case-card { border-top: 2px solid var(--rule-strong); padding-top: 1rem; }
  .case-card__h a { color: var(--ink); text-decoration: none; }
  .case-card__h a:hover { text-decoration: underline; text-decoration-color: var(--gold); }
  .case-card__p { margin-top: 0.5rem; max-width: var(--measure); }
  .case-card .link { display: inline-block; margin-top: 0.75rem; }

  /* year art: the line draws, the four payments land, the check-ins rise, then the tag. About two and a half seconds. */
  .art-year { width: 100%; height: auto; display: block; overflow: visible; }
  .art-year__title { font-family: var(--serif); font-size: 16px; fill: var(--ink); }
  .art-year__line { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: art-draw 900ms ease-out 150ms forwards; }
  .art-year__months text { font-family: var(--sans); font-size: 11px; fill: var(--muted); text-anchor: middle; }
  .art-year__dot, .art-year__dot-key { fill: var(--gold); stroke: var(--paper-2); stroke-width: 2; }
  .art-year__stem { stroke: var(--gold-deep); stroke-width: 1.5; }
  .art-year__label { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--ink); }
  .art-year__label--plain { fill: var(--text); font-weight: 400; }
  .art-year__tag-box { fill: none; stroke: var(--gold-deep); stroke-width: 1.5; }
  .art-year__tag-text { font-family: var(--sans); font-size: 12px; font-weight: 600; fill: var(--ink); }
  .art-year__dot { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: dot-land 360ms cubic-bezier(0.3, 1.4, 0.5, 1) forwards; }
  .art-year__dot--1 { animation-delay: 700ms; }
  .art-year__dot--2 { animation-delay: 880ms; }
  .art-year__dot--3 { animation-delay: 1060ms; }
  .art-year__dot--4 { animation-delay: 1240ms; }
  .art-year__flag, .art-year__legend, .art-year__tag { opacity: 0; animation: art-appear 420ms ease-out forwards; }
  .art-year__flag--1 { animation-delay: 1450ms; }
  .art-year__flag--2 { animation-delay: 1650ms; }
  .art-year__flag--3 { animation-delay: 1850ms; }
  .art-year__legend { animation-delay: 2050ms; }
  .art-year__tag { animation-delay: 2350ms; }
  @keyframes dot-land { to { transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) {
    .art-year__line, .art-year__dot, .art-year__flag, .art-year__legend, .art-year__tag { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
  }

  /* start */
  .start-hero__paths { margin-top: 2rem; }
  .start-hero__note { margin-top: 0.75rem; font-size: var(--fs-small); color: var(--block-soft); }
  .start-hero__alt { margin-top: 1.25rem; color: var(--block-soft); }
  .start-hero__alt a { color: var(--gold); }

  /* lane hero */
  .for-list { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 0.5rem; max-width: var(--measure); }
  .for-list li { padding-left: 1rem; position: relative; color: var(--text); }
  .for-list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.4rem; height: 2px; background: var(--gold); }

  /* footer */
  .site-footer { border-top: 2px solid var(--gold); background: var(--paper); padding-block: 3rem 2rem; font-size: var(--fs-small); color: var(--muted); }
  .site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  .site-footer__tagline { font-family: var(--serif); color: var(--ink); margin-top: 1rem; }
  .site-footer__people { margin-top: 0.75rem; }
  .site-footer__h { font-family: var(--sans); font-weight: 600; font-size: var(--fs-small); color: var(--ink); margin-bottom: 0.75rem; }
  .site-footer a { color: var(--text); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.18em; }
  .site-footer a:hover { text-decoration-color: var(--gold); }
  .site-footer__legal { margin-top: 2rem; max-width: none; font-size: var(--fs-micro); line-height: 1.5; }
  .site-footer__legal + .site-footer__legal { margin-top: 0.75rem; }
  @media (min-width: 48em) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; } }
}

@layer utilities {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; scroll-behavior: auto !important; }
  }
  html { scroll-behavior: smooth; }
  @media (max-width: 55.99em) { .site-footer { padding-bottom: 5.5rem; } }
  [id] { scroll-margin-top: 1.5rem; }
}

/* Unlayered on purpose, and last on purpose. A hosting wrapper (a preview frame, an embed) may inject its own
   unlayered body styles; unlayered rules beat every layer above, so the page's ground, face, and color are
   restated here where nothing can outrank them. */
:root { color-scheme: light dark; }
html { background: var(--paper); }
body { margin: 0; padding: 0; font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55; color: var(--text); background: var(--paper); }