/* ==========================================================================
   Go To My Bookkeeper - design system
   Static site, no build step. Edit tokens below to reskin the whole site.
   ========================================================================== */

/* ---------- Fonts (self-hosted, variable) -------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/source-serif-4-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* Warm bone paper + deep slate ink. Shared language with the Curve Jump build. */
  --ink:        #172230;
  --ink-2:      #333c47;
  --muted:      #6b6558;
  --hairline:   #dcd8cf;
  --hairline-2: #e6e2d9;

  --paper:      #f3f1ec;
  --paper-2:    #eae7e0;
  --white:      #faf9f6;

  /* Brand: deep slate, the dark surface */
  --brand:      #172230;
  --brand-deep: #172230;
  --brand-soft: #d9dde2;

  /* Accent: warm clay. Locked. One accent, whole site. */
  --accent:     #b04a24;
  --accent-hi:  #8f3b1b;
  --accent-soft:#efe4db;

  /* On dark surfaces */
  --on-dark:      #f4f2ec;
  --on-dark-mute: #a8afb8;

  /* Mono micro-label */
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale, 1.25+ ratio */
  --step--1: clamp(0.83rem, 0.81rem + 0.10vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.45rem);
  --step-2:  clamp(1.55rem, 1.42rem + 0.65vw, 1.95rem);
  --step-3:  clamp(1.90rem, 1.65rem + 1.25vw, 2.75rem);
  --step-4:  clamp(2.30rem, 1.80rem + 2.40vw, 3.75rem);

  /* Space, 4px base */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  /* Sharp corners, matching the Curve Jump build */
  --radius:    0px;
  --radius-sm: 0px;

  --shadow: 0 1px 2px rgba(23, 34, 48, 0.06), 0 8px 20px rgba(23, 34, 48, 0.08);

  /* Ledger rhythm: horizontal rules every 34px, column rules every 132px */
  --rule-h: 34px;
  --rule-v: 132px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --wrap: 1180px;
  --measure: 68ch;

  --z-sticky: 100;
  --z-nav: 200;
}

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 640;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); letter-spacing: -0.032em; }
h2 { font-size: var(--step-3); letter-spacing: -0.028em; }
h3 { font-size: var(--step-1); letter-spacing: -0.016em; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hi); }

img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

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

/* ---------- Layout primitives -------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-5); }
@media (min-width: 768px) { .wrap { padding-inline: var(--s-6); } }

.section { padding-block: var(--s-8); }
@media (min-width: 768px) { .section { padding-block: var(--s-9); } }

.section--tight { padding-block: var(--s-7); }

/* ---------- Ledger pattern -----------------------------------------------
   Ruled ledger paper. Straight, and only ever on the navy bands, where there
   is no content hairline for the rules to run parallel to and interfere with.
   Never apply .ledger to a light section: the services and problem lists carry
   their own dividers, and two line systems at different rhythms fight. */
.ledger { position: relative; isolation: isolate; overflow: hidden; }
.ledger > * { position: relative; z-index: 1; }
.ledger::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    /* ruled lines: the dominant texture of a ledger page */
    linear-gradient(to bottom, rgba(244, 242, 236, 0.065) 1px, transparent 1px),
    /* column rules: sparser and fainter, so it reads as ruled, not gridded */
    linear-gradient(to right, rgba(244, 242, 236, 0.034) 1px, transparent 1px);
  background-size:
    100% var(--rule-h),
    var(--rule-v) 100%;
}

/* The double rule that closes a ledger's amount column. It lives in the outer
   gutter, clear of the content column, so it never crosses text or panels.
   Hidden below the width at which a gutter actually exists. */
.ledger--edge::after {
  content: '';
  position: absolute; z-index: 0;
  top: 0; bottom: 0;
  left: calc(50% + (var(--wrap) / 2) + 30px);
  width: 6px;
  border-left: 1px solid rgba(244, 242, 236, 0.13);
  border-right: 1px solid rgba(244, 242, 236, 0.13);
  pointer-events: none;
}
@media (max-width: 1360px) { .ledger--edge::after { display: none; } }

/* ---------- Serif accent -------------------------------------------------
   TWICE on the page. Nowhere else. Headings stay in the grotesque, because
   the promise is clean books and the type should look like it. The serif is
   reserved for the two lines that carry the whole argument, where it reads
   as a graphic element rather than as body copy.
     1. The client story pull quote (the loan booked as income).
     2. The closing line about Deb saying the uncomfortable thing.
   Adding a third weakens all three. Resist.
   ------------------------------------------------------------------------ */
.voice {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: var(--step-2);
  line-height: 1.34;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 30ch;
}
.band-dark .voice { color: var(--on-dark); }

/* ---------- Mono micro-label --------------------------------------------- */
.tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.655rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-4);
}
.band-dark .tag { color: var(--on-dark-mute); }
.band-2 { background: var(--paper-2); }
.band-white { background: var(--white); }
.band-dark { background: var(--brand-deep); color: var(--on-dark-mute); }
.band-dark h2, .band-dark h3 { color: var(--white); }
.band-warm { background: var(--accent-soft); }

.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); }
.small { font-size: var(--step--1); color: var(--muted); }

/* Section header: headline left, supporting copy directly beneath it */
.s-head { max-width: 42ch; margin-bottom: var(--s-7); }
.s-head p { color: var(--muted); font-size: var(--step-1); line-height: 1.5; }

/* ---------- Placeholders (REMOVE .tbd RULES BEFORE LAUNCH) --------------- */
.tbd {
  background: #fff4d6;
  box-shadow: 0 0 0 2px #fff4d6;
  border-bottom: 1px dashed #b58900;
  border-radius: 2px;
  color: #6b4e00;
}

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.85em 1.5em;
  font: inherit; font-weight: 560; font-size: var(--step-0);
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out),
              border-color 180ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active { transform: scale(0.975); }

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

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover { background: var(--white); border-color: var(--ink-2); color: var(--ink); }

.band-dark .btn--ghost, .hero .btn--ghost {
  color: var(--on-dark); border-color: rgba(244, 242, 236, 0.32); background: transparent;
}
.band-dark .btn--ghost:hover, .hero .btn--ghost:hover {
  color: var(--brand-deep); background: var(--on-dark); border-color: var(--on-dark);
}

.btn--on-dark { background: var(--white); color: var(--brand-deep); }
.btn--on-dark:hover { background: var(--brand-soft); color: var(--brand-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* Text link with arrow */
.arrow-link {
  display: inline-flex; align-items: baseline; gap: 0.45em;
  font-weight: 560; text-decoration: none;
}
.arrow-link::after {
  content: '\2192';
  transition: transform 200ms var(--ease-out);
}
.arrow-link:hover { text-decoration: underline; }
.arrow-link:hover::after { transform: translateX(3px); }

/* ---------- Skip link ---------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  z-index: 999;
  background: var(--ink); color: var(--white);
  padding: 0.75em 1.25em; border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none; font-weight: 560;
}
.skip-link:focus-visible { left: 0; color: var(--white); }

/* ---------- Header / nav ------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--brand-deep);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out);
}
.site-header[data-stuck='true'] {
  border-bottom-color: rgba(244, 242, 236, 0.14);
}
.nav {
  display: flex; align-items: center; gap: var(--s-5);
  min-height: 72px;
}
.brand {
  display: inline-flex; flex-direction: column; gap: 1px;
  text-decoration: none; color: var(--on-dark); margin-right: auto;
}
.brand__name {
  font-weight: 700; font-size: 1.06rem; letter-spacing: -0.03em; line-height: 1.05;
}
.brand__name em { font-style: normal; color: var(--accent); }
.brand__tag {
  display: none;
  font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-dark-mute); font-weight: 500; white-space: nowrap;
}
@media (min-width: 560px) { .brand__tag { display: block; } }

.nav__links { display: none; align-items: center; gap: var(--s-5); }
@media (min-width: 1024px) { .nav__links { display: flex; } }
.nav__links a {
  color: rgba(244, 242, 236, 0.82); text-decoration: none; font-weight: 460; font-size: 0.95rem;
  padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.nav__links a:hover { color: var(--on-dark); border-bottom-color: var(--accent); }

.nav__cta { display: none; }
@media (min-width: 640px) { .nav__cta { display: inline-flex; } }

.nav__login {
  display: none;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-mute); text-decoration: none; white-space: nowrap;
}
.nav__login:hover { color: var(--on-dark); }
@media (min-width: 640px) { .nav__login { display: inline; } }
.nav__login:hover { color: var(--ink); text-decoration: underline; }

/* Dropdown, CSS-only via details would trap focus badly; use hover+focus group */
.has-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 10px); left: calc(-1 * var(--s-4));
  min-width: 280px; padding: var(--s-3);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.985);
  transform-origin: top left;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 180ms;
}
.has-menu:hover .menu, .has-menu:focus-within .menu {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.menu a {
  display: block; padding: var(--s-3) var(--s-3);
  border-radius: var(--radius-sm); border-bottom: 0;
  font-size: 0.94rem; font-weight: 520; color: var(--ink);
}
.menu a:hover { background: var(--paper-2); border-bottom: 0; }
.menu a span { display: block; font-weight: 400; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }

/* Mobile menu */
.nav__toggle {
  display: inline-flex; align-items: center; gap: 0.5em;
  background: none; border: 1px solid rgba(244, 242, 236, 0.28); border-radius: var(--radius-sm);
  padding: 0.55em 0.9em;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-dark); cursor: pointer;
}
.nav__toggle:hover { border-color: rgba(244, 242, 236, 0.55); }
@media (min-width: 1024px) { .nav__toggle { display: none; } }

.mobile-menu { display: none; border-top: 1px solid rgba(244, 242, 236, 0.14); background: var(--brand-deep); }
.mobile-menu[data-open='true'] { display: block; }
.mobile-menu a {
  display: block; padding: var(--s-4) 0; color: var(--on-dark); text-decoration: none;
  font-weight: 500; border-bottom: 1px solid rgba(244, 242, 236, 0.10);
}
.mobile-menu .sub { padding-left: var(--s-4); font-weight: 400; font-size: 0.94rem; color: var(--on-dark-mute); }
.mobile-menu .btn { width: 100%; margin-block: var(--s-5); }

/* ---------- Hero --------------------------------------------------------- */
.hero { padding-block: var(--s-8) var(--s-8); }
@media (min-width: 768px) { .hero { padding-block: var(--s-9) var(--s-9); } }

.hero__grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: 7fr 4fr; gap: var(--s-8); }
}

.hero h1 { max-width: 15ch; color: var(--on-dark); font-weight: 560; }
.hero .lede { max-width: 46ch; color: rgba(244, 242, 236, 0.86); margin-bottom: var(--s-3); }
.hero__sub { max-width: 44ch; color: var(--on-dark-mute); margin-bottom: var(--s-6); }
.hero .btn-row { margin-bottom: var(--s-4); }
.hero__fine { font-size: var(--step--1); color: var(--on-dark-mute); max-width: 46ch; }

@media (max-width: 559px) {
  .hero .btn-row { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
  .hero .btn-row .btn { width: 100%; }
}

/* Hero aside: what the review involves. Real content, not decoration. */
.hero__aside {
  border: 1px solid rgba(244, 242, 236, 0.20);
  background: rgba(244, 242, 236, 0.04);
  padding: var(--s-5);
}
@media (min-width: 980px) { .hero__aside { margin-top: var(--s-2); } }
.hero__aside h2 {
  color: var(--on-dark);
  font-size: var(--step-0); font-weight: 620; letter-spacing: -0.012em;
  line-height: 1.35; margin-bottom: var(--s-4);
}
.hero__aside ul li {
  padding-block: var(--s-3);
  border-top: 1px solid rgba(244, 242, 236, 0.12);
  font-size: 0.94rem; line-height: 1.5; color: rgba(244, 242, 236, 0.82);
}
.hero__aside ul li:first-child { border-top: 0; padding-top: 0; }
.hero__aside .small {
  display: block; color: var(--on-dark-mute);
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid rgba(244, 242, 236, 0.20);
}

/* Credential strip */
.creds {
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
  display: grid; gap: var(--s-4) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.creds li { font-size: var(--step--1); color: var(--muted); line-height: 1.4; }
.creds strong {
  display: block; color: var(--ink);
  font-family: var(--mono); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 4px;
}

/* ---------- Two-column editorial split ----------------------------------- */
.split { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: start; }
  .split__aside { position: sticky; top: 104px; }
}

/* Stacked items separated by a single hairline between rows */
.stack > li { padding-block: var(--s-5); border-top: 1px solid var(--hairline); }
.stack > li:first-child { border-top: 0; padding-top: 0; }
.stack > li:last-child { padding-bottom: 0; }
.stack h3 { margin-bottom: var(--s-2); }
.stack p { color: var(--muted); }

/* ---------- Services list ------------------------------------------------ */
.services > li {
  display: grid; gap: var(--s-2);
  padding-block: var(--s-6);
  border-top: 1px solid var(--hairline);
}
.services > li:last-child { border-bottom: 1px solid var(--hairline); }
@media (min-width: 860px) {
  .services > li { grid-template-columns: 5.5rem 4.5fr 7fr; gap: var(--s-5); align-items: start; }
}
.services__idx {
  font-family: var(--mono); font-size: 0.655rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  padding-top: 0.45em;
}
.services h3 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.services p { color: var(--muted); margin-bottom: var(--s-3); }
.services__note {
  font-size: 0.72rem; font-weight: 620; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  padding: 0.35em 0.7em; border-radius: 100px;
}

/* ---------- Proof story -------------------------------------------------- */
.proof { max-width: 34ch; }
.proof__body { max-width: 54ch; }
.proof__body p { color: var(--on-dark-mute); }
/* Serif accent 1 of 2. Sized to read as a graphic element, not as body copy. */
.proof__pull {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: var(--step-3);
  line-height: 1.22;
  color: var(--on-dark);
  letter-spacing: -0.018em;
  margin-block: var(--s-6);
  max-width: 20ch;
}

/* ---------- Steps -------------------------------------------------------- */
.steps { display: grid; gap: var(--s-6); counter-reset: none; }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } }
.steps > li { padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.steps > li + li { border-top-color: var(--hairline); }
@media (min-width: 880px) { .steps > li + li { border-top-color: var(--ink); } }
.steps h3 { margin-bottom: var(--s-3); }
.steps p { color: var(--muted); font-size: 0.98rem; }

/* ---------- Pricing teaser ----------------------------------------------- */
.price-line {
  font-size: var(--step-2); line-height: 1.3; letter-spacing: -0.022em;
  color: var(--ink); font-weight: 600; max-width: 24ch;
}
.price-line .num { color: var(--accent); }

/* ---------- Testimonials ------------------------------------------------- */
.quotes { display: grid; gap: var(--s-6); }
@media (min-width: 880px) { .quotes { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.quotes blockquote {
  margin: 0; padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}
.quotes q {
  display: block; quotes: none;
  font-size: 1.02rem; line-height: 1.55; color: var(--ink-2);
  margin-bottom: var(--s-4);
}
.quotes q::before, .quotes q::after { content: none; }
/* The tenure is the proof, so it gets the mono treatment and the quote doesn't. */
.quotes footer {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
  line-height: 1.7;
}
.quotes cite {
  font-style: normal; color: var(--ink); display: block;
  letter-spacing: 0.10em;
}

/* ---------- Fit / not fit ------------------------------------------------ */
.fit { display: grid; gap: var(--s-7); }
@media (min-width: 860px) { .fit { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.fit h3 { font-size: var(--step-1); margin-bottom: var(--s-4); }
.fit ul li {
  padding-block: var(--s-3);
  border-top: 1px solid var(--hairline-2);
  color: var(--ink-2);
}
.fit ul li:first-child { border-top: 1px solid var(--hairline); }
.fit--no h3 { color: var(--muted); }
.fit--no ul li { color: var(--muted); }

/* ---------- FAQ ---------------------------------------------------------- */
.faq { max-width: 78ch; }
.faq details {
  border-top: 1px solid var(--hairline);
}
.faq details:last-of-type { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5);
  padding-block: var(--s-5);
  cursor: pointer; list-style: none;
  font-weight: 580; font-size: var(--step-1); color: var(--ink);
  letter-spacing: -0.014em; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  flex: none;
  font-weight: 400; font-size: 1.5rem; line-height: 1; color: var(--accent);
  transition: transform 220ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-hi); }
.faq details > div { padding-bottom: var(--s-5); }
.faq details p { color: var(--muted); max-width: 66ch; }

/* ---------- Final CTA ---------------------------------------------------- */
.cta-final { text-align: left; }
.cta-final p { color: var(--on-dark-mute); max-width: 52ch; }
.embed-slot {
  margin-top: var(--s-6);
  border: 1px dashed var(--on-dark-mute);
  border-radius: var(--radius);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--on-dark-mute);
  font-size: var(--step--1);
}
.embed-slot strong { display: block; color: var(--white); font-size: var(--step-0); margin-bottom: var(--s-2); }

/* ---------- Footer ------------------------------------------------------- */
.site-footer { background: var(--white); border-top: 1px solid var(--hairline); padding-block: var(--s-7); }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s-7); } }
.site-footer h4 {
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); font-weight: 620; margin-bottom: var(--s-3);
}
.site-footer li { padding-block: 0.3rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; font-size: 0.95rem; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.footer-legal {
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--hairline-2);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  align-items: baseline; justify-content: space-between;
  font-size: var(--step--1); color: var(--muted);
}
.footer-legal a { font-size: var(--step--1); }

/* ---------- Scroll reveal (MOTION_INTENSITY 3) --------------------------- */
[data-reveal] { opacity: 0; transform: translateY(14px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn:active { transform: none; }
  .arrow-link::after { transition: none; }
  .menu { transition: opacity 1ms; }
}

/* ---------- Late overrides ----------------------------------------------
   .voice must win over section-level paragraph colours (.stack p, .fit p).
   ------------------------------------------------------------------------ */
.wrap .voice { color: var(--ink); }
.band-dark .wrap .voice { color: var(--on-dark); }
.proof__body p.proof__pull { color: var(--on-dark); }

/* ---------- Print -------------------------------------------------------- */
@media print {
  .site-header, .embed-slot, .btn { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   Inner page components
   ========================================================================== */

/* ---------- Page head (compact dark band on every inner page) ------------ */
.pagehead { padding-block: var(--s-6) var(--s-7); }
@media (min-width: 768px) { .pagehead { padding-block: var(--s-7) var(--s-8); } }
.pagehead h1 {
  font-size: var(--step-3); max-width: 19ch; color: var(--on-dark); font-weight: 560;
  margin-bottom: var(--s-4);
}
.pagehead .lede { color: rgba(244, 242, 236, 0.86); max-width: 54ch; margin-bottom: var(--s-6); }
.pagehead .btn-row { margin-top: var(--s-2); }

.crumbs {
  font-family: var(--mono); font-size: 0.655rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-mute); margin-bottom: var(--s-5);
}
.crumbs a { color: var(--on-dark-mute); text-decoration: none; }
.crumbs a:hover { color: var(--on-dark); text-decoration: underline; }
.crumbs span { opacity: 0.5; margin-inline: 0.5em; }

/* ---------- Long-form prose ---------------------------------------------- */
.prose h3 { margin-top: var(--s-6); }
.prose h3:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); }
.prose ul.bullets { margin-block: var(--s-4); }
.prose ul.bullets li {
  padding-block: var(--s-3); border-top: 1px solid var(--hairline-2); color: var(--ink-2);
}
.prose ul.bullets li:first-child { border-top: 1px solid var(--hairline); }

/* ---------- Included list ------------------------------------------------ */
.incl { display: grid; gap: 0; }
@media (min-width: 820px) { .incl { grid-template-columns: 1fr 1fr; gap: 0 var(--s-7); } }
.incl li { padding-block: var(--s-4); border-top: 1px solid var(--hairline); }
.incl strong { display: block; color: var(--ink); font-weight: 620; margin-bottom: 3px; }
.incl span { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

/* ---------- Pricing ------------------------------------------------------ */
.tiers { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.tier { border: 1px solid var(--hairline); background: var(--white); padding: var(--s-5); }
.tier--lead { border-color: var(--ink); }
.tier__name {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted);
  margin-bottom: var(--s-4);
}
.tier__price {
  font-size: var(--step-2); font-weight: 620; color: var(--ink);
  letter-spacing: -0.02em; line-height: 1.1; margin-bottom: var(--s-2);
}
.tier__price small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 6px; }
.tier__for { color: var(--muted); font-size: 0.94rem; padding-bottom: var(--s-4); border-bottom: 1px solid var(--hairline-2); margin-bottom: var(--s-4); }
.tier ul li { padding-block: var(--s-2); color: var(--ink-2); font-size: 0.95rem; }

/* ---------- Contact ------------------------------------------------------ */
.contact-grid { display: grid; gap: var(--s-7); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 7fr 5fr; gap: var(--s-8); align-items: start; } }
.contact-card { border: 1px solid var(--hairline); background: var(--white); padding: var(--s-5); }
.contact-card h3 { font-size: var(--step-0); margin-bottom: var(--s-4); }
.contact-card li { padding-block: var(--s-3); border-top: 1px solid var(--hairline-2); font-size: 0.95rem; color: var(--ink-2); }
.contact-card li:first-child { border-top: 0; padding-top: 0; }

.embed-slot--light {
  border: 1px dashed var(--muted); color: var(--muted);
  background: var(--white); padding: var(--s-8) var(--s-5); text-align: center;
}
.embed-slot--light strong { display: block; color: var(--ink); font-size: var(--step-0); margin-bottom: var(--s-2); }

/* ---------- Local page --------------------------------------------------- */
.areas { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-4); }
.areas li {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); border: 1px solid var(--hairline); padding: 0.45em 0.8em;
}

/* ---------- Utility pages ------------------------------------------------ */
.legal { max-width: 72ch; }
.legal h2 { font-size: var(--step-1); margin-top: var(--s-6); }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul.bullets li { padding-block: var(--s-2); border: 0; }

/* ---------- Booking calendar embed --------------------------------------- */
.cal-embed {
  border: 1px solid var(--hairline);
  background: var(--white);
  min-height: 720px;
}
.cal-embed iframe { display: block; width: 100%; border: 0; }