/* =====================================================================
   BMG Laboratory Services — main.css
   Hand-editable. No build step. Change a value here, save, refresh.

   BRAND LAW (approved by John 2026-09-13, docs/brand-direction.html):
   Palette A, violet-led. Type: Bricolage Grotesque (display) /
   IBM Plex Sans (body) / IBM Plex Mono (labels).

   AA RULE SET — every text/background pair must pass WCAG 2.1 AA:
   - --emerald (#0E8C5C) = the mark, LARGE display words, and bold
     button text ≥19px ONLY. It is 3.96:1 on --slide (large text only).
   - --emerald-deep (#0B6B47) = EVERY small emerald word (6.1:1 on slide).
   - --violet (#5E2CA5) passes at any size on slide (8.2:1); buttons use
     white on violet (8.8:1).
   - --violet-deep (#4A2185) = eyebrows/labels (10.6:1).
   - Inside dark bands (--ink): body = --lilac-on-ink, accent =
     --emerald-on-ink (both > 9:1).

   THE READ LINE — the site's composition. One emerald rule sits on the
   meniscus in the home hero photo and leaves the image into the page;
   the same rule (.rule) divides every section on every page.
   ===================================================================== */

:root {
  /* surfaces */
  --slide: #F7F6FA;        /* page background: a glass slide, faintly cool */
  --slide-deep: #ECE9F3;   /* alternate bands, cards, hairlines */
  --lilac: #E4DCF3;        /* soft violet tint band */
  --mint: #D9EEE4;         /* soft emerald tint band */
  --white: #FFFFFF;

  /* ink */
  --ink: #1F1535;          /* headlines, dark bands, footer */
  --ink-soft: #3D3554;     /* body text */

  /* violet — primary */
  --violet: #5E2CA5;       /* buttons, links, display accents */
  --violet-deep: #4A2185;  /* small violet text, eyebrows */

  /* emerald — signature */
  --emerald: #0E8C5C;      /* mark, large display, bold buttons ≥19px */
  --emerald-deep: #0B6B47; /* ALL small emerald text */

  /* on dark */
  --lilac-on-ink: #C9B8F0;
  --emerald-on-ink: #3DD598;

  /* type */
  --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  /* shape + motion */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 2px 12px rgba(31, 21, 53, .05);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --measure: 62ch;
  --container: 1140px;
  --gutter: clamp(20px, 4vw, 40px);
}

/* ---- base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--slide);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); line-height: 1.1; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(38px, 6vw, 68px); font-weight: 800; letter-spacing: -.02em; font-stretch: 88%; } /* Bricolage's width axis: pulled in so display sizes don't read as stretched */
h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; font-stretch: 92%; }
h3 { font-size: 22px; font-weight: 600; }
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--violet); text-underline-offset: .15em; }
a:hover { color: var(--violet-deep); }
img { max-width: 100%; height: auto; display: block; }
ul { padding-left: 20px; }
li { margin: 0 0 .45em; }
strong { color: var(--ink); font-weight: 600; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; } /* main.js hides unfilled PLACEHOLDER_ links with the hidden attribute */

/* ---- accessibility ------------------------------------------------- */
.skip-link {
  position: absolute; left: 8px; top: -60px;
  background: var(--ink); color: var(--white);
  padding: 10px 14px; border-radius: var(--radius-sm);
  font-family: var(--display); font-weight: 700; z-index: 100; text-decoration: none;
}
.skip-link:focus { top: 8px; }
:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; }
.band-ink :focus-visible, .site-footer :focus-visible { outline-color: var(--emerald-on-ink); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- labels (the lab-notebook tell) -------------------------------- */
.eyebrow {
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--violet-deep); margin: 0 0 12px;
}
.band-ink .eyebrow { color: var(--emerald-on-ink); }
.scope {
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  color: var(--violet-deep); margin: 10px 0 0;
}
.scope b { color: var(--emerald-deep); font-weight: 500; }
.band-ink .scope { color: var(--lilac-on-ink); }
.band-ink .scope b { color: var(--emerald-on-ink); }

/* ---- the read line ------------------------------------------------- */
.rule {
  height: 2px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--emerald) 0 38%, rgba(14, 140, 92, 0) 100%);
}
.container > .rule { margin-bottom: clamp(24px, 3vw, 36px); }

/* ---- buttons ------------------------------------------------------- */
.btn {
  display: inline-block; font-family: var(--display); font-weight: 700;
  font-size: 19px; line-height: 1; padding: 15px 22px;
  border-radius: var(--radius-sm); text-decoration: none; border: 0; cursor: pointer;
  color: var(--white); background: var(--violet);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { background: var(--violet-deep); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn-emerald { background: var(--emerald); }         /* text is ≥19px bold: 4.26:1 passes large-text AA */
.btn-emerald:hover { background: var(--emerald-deep); }
.btn-ghost { background: transparent; color: var(--violet-deep); box-shadow: inset 0 0 0 2px var(--violet); }
.btn-ghost:hover { background: var(--lilac); color: var(--violet-deep); }
.band-ink .btn-ghost { color: var(--white); box-shadow: inset 0 0 0 2px var(--lilac-on-ink); }
.band-ink .btn-ghost:hover { background: rgba(255,255,255,.08); color: var(--white); }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 26px; }
.phone-link { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); text-decoration: none; }
.phone-link:hover { color: var(--violet-deep); }
.band-ink .phone-link { color: var(--white); }

/* ---- header -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 246, 250, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--slide-deep);
}
.site-header .container { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand svg { width: 36px; height: 36px; flex: none; }
.brand .wordmark { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; line-height: 1; }
.brand .wordmark small { display: block; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-deep); margin-top: 5px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; }
.site-nav a { display: inline-block; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; }
.site-nav a:hover { background: var(--slide-deep); color: var(--ink); }
.site-nav a[aria-current="page"]:not(.btn) { box-shadow: inset 0 -2px 0 var(--emerald); border-radius: 8px 8px 0 0; }
section[id], [id] { scroll-margin-top: 84px; } /* sticky header height + breathing room for in-page links */
.site-nav .btn { /* header CTA is the quiet outline version; the solid violet button is for the page itself */
  font-size: 16px; padding: 11px 16px; margin-left: 8px;
  background: transparent; color: var(--violet-deep); box-shadow: inset 0 0 0 2px var(--violet);
}
.site-nav .btn:hover { background: var(--lilac); color: var(--violet-deep); }
.nav-toggle { display: none; background: none; border: 2px solid var(--ink); border-radius: 8px; padding: 8px 12px; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; }
@media (max-width: 1080px) {
  .nav-toggle { display: inline-block; }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--slide); border-bottom: 1px solid var(--slide-deep); display: none; padding: 10px var(--gutter) 18px; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav a { display: block; padding: 12px 10px; font-size: 18px; }
  .site-nav .btn { margin: 10px 0 0; text-align: center; }
}

/* ---- home hero ----------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  /* Height = the 3:2 photo's own height at full width, capped at 86vh.
     (Not aspect-ratio + max-height: browsers transfer that cap into the
     WIDTH and the hero shrinks on wide screens.) */
  height: min(66.667vw, 86vh); min-height: 520px;
  background: var(--slide-deep);
  container-type: inline-size; /* lets .readline use cqw = % of the hero's own width */
}
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: saturate(.7); }
.hero::before { /* scrim so ink text reads over the bright photo */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(247,246,250,.98) 0%, rgba(247,246,250,.9) 34%, rgba(247,246,250,.35) 62%, rgba(247,246,250,0) 82%);
}
.hero .readline { /* pinned to the photo's meniscus: 16.5% of the rendered image height.
     Width-limited (the usual case): image height = width × 2/3 → 16.5% × 2/3 = 11cqw.
     Height-limited (min-height or the phone crop): image height = box height → 16.5%.
     max() picks whichever applies. */
  position: absolute; left: 0; right: 0; top: max(11cqw, 16.5%); height: 2px; z-index: 2;
  background: linear-gradient(90deg, var(--emerald) 0 70%, rgba(14,140,92,.2) 100%);
}
.hero .readline::after { /* the read label */
  content: "read at eye level"; position: absolute; right: var(--gutter); top: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--emerald-deep);
}
.hero .container { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(32px, 5vw, 64px); }
.hero h1 { max-width: 12ch; margin-bottom: .3em; }
.hero h1 .em { color: var(--emerald); }  /* large display text: 3.96:1 passes large-text AA */
.hero .lede { font-size: clamp(18px, 2vw, 21px); color: var(--ink); max-width: 46ch; }
@media (max-width: 700px) {
  .hero { height: auto; aspect-ratio: 4 / 5; min-height: 0; } /* phone: taller crop, image fills the box height */
  .hero .readline::after { display: none; }
}

/* ---- page hero (stream pages) -------------------------------------- */
.page-hero { position: relative; overflow: hidden; min-height: clamp(460px, 56vh, 640px); background: var(--ink); display: flex; align-items: flex-end; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.9); z-index: 0; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(31,21,53,.94) 0%, rgba(31,21,53,.7) 42%, rgba(31,21,53,.18) 100%); }
.page-hero .container { position: relative; z-index: 2; padding-top: clamp(80px, 12vw, 140px); padding-bottom: clamp(36px, 5vw, 60px); width: 100%; }
.page-hero .eyebrow { color: var(--emerald-on-ink); }
.page-hero h1 { color: var(--white); font-size: clamp(34px, 5vw, 58px); max-width: 16ch; }
.page-hero .lede { color: var(--lilac-on-ink); font-size: clamp(17px, 1.8vw, 20px); max-width: 52ch; }
.page-hero .phone-link { color: var(--white); }
.page-hero .rule { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: linear-gradient(90deg, var(--emerald-on-ink) 0 38%, rgba(61,213,152,0) 100%); }
.page-hero .credit { position: absolute; right: var(--gutter); bottom: 10px; z-index: 2; font-family: var(--mono); font-size: 11px; color: var(--lilac-on-ink); }

/* ---- sections ------------------------------------------------------ */
.section { padding: clamp(44px, 6vw, 80px) 0; }
.section-tight { padding: clamp(36px, 4.5vw, 56px) 0; }
.band-lilac { background: var(--lilac); }
.band-mint { background: var(--mint); }
.band-ink { background: var(--ink); color: var(--lilac-on-ink); }
.band-ink h2, .band-ink h3, .band-ink strong { color: var(--white); }
.band-ink a { color: var(--emerald-on-ink); }
.band-ink a:hover { color: var(--white); }
.band-ink .em { color: var(--emerald-on-ink); }

/* doctrine */
.doctrine h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -.02em; max-width: 12ch; }
.doctrine p { font-size: clamp(18px, 2vw, 22px); color: var(--ink); max-width: 44ch; }
.doctrine .grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: end; }
@media (max-width: 800px) { .doctrine .grid { grid-template-columns: 1fr; gap: 16px; } }

/* ledger (the three doors) */
.ledger { display: grid; grid-template-columns: minmax(220px, 1fr) 2.2fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.ledger aside { position: sticky; top: 92px; }
.ledger aside p { color: var(--ink-soft); }
.ledger ol { list-style: none; margin: 0; padding: 0; }
.ledger li { margin: 0; border-top: 1px solid rgba(31,21,53,.14); }
.ledger li:last-child { border-bottom: 1px solid rgba(31,21,53,.14); }
.row { display: grid; grid-template-columns: 56px 150px 1fr; gap: 22px; padding: 22px 0; align-items: start; text-decoration: none; color: inherit; transition: background .2s var(--ease); }
.row:hover { background: rgba(228,220,243,.35); }
.row .num { font-family: var(--mono); font-size: 13px; color: var(--violet-deep); padding-top: 6px; }
.row.row-text { grid-template-columns: 56px 1fr; } /* text-only rows (consulting page) */
.row .strip { aspect-ratio: 5 / 3; overflow: hidden; border-radius: 8px; background: var(--slide-deep); }
.row .strip img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); transition: transform .5s var(--ease); }
.row:hover .strip img { transform: scale(1.03); }
.row h3 { margin: 0 0 .3em; font-size: 24px; }
.row p { margin: 0; color: var(--ink-soft); max-width: 58ch; }
.row .more { display: inline-block; margin-top: 12px; font-weight: 600; color: var(--violet); }
.row:hover .more { color: var(--violet-deep); text-decoration: underline; }
@media (max-width: 900px) { .ledger { grid-template-columns: 1fr; } .ledger aside { position: static; } }
@media (max-width: 620px) { .row { grid-template-columns: 40px 1fr; } .row .strip { grid-column: 2; order: 3; max-width: 260px; margin-top: 12px; } }

/* exclusions band */
.exclusions .grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.exclusions ul { list-style: none; padding: 0; margin: 0 0 24px; columns: 2; column-gap: 32px; }
.exclusions li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid rgba(201,184,240,.22); font-family: var(--mono); font-size: 14px; color: var(--white); }
.exclusions p { max-width: 52ch; }
@media (max-width: 800px) { .exclusions .grid { grid-template-columns: 1fr; } .exclusions ul { columns: 1; } }

/* person */
.person .container { max-width: 1320px; } /* wider than the text column: John's call, the strip should use the width */
.person .grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.person p { font-size: 18px; max-width: 58ch; }
.person figure { margin: 0; }
.person figure img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.7); }
.person figcaption { font-family: var(--mono); font-size: 12px; color: var(--violet-deep); margin-top: 10px; }
.person .name { font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--ink); margin: 0 0 .5em; }
.person .name small { display: block; font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-deep); font-weight: 400; margin-top: 6px; }
@media (max-width: 800px) { .person .grid { grid-template-columns: 1fr; } }

/* steps */
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.steps li { margin: 0; padding-top: 16px; border-top: 2px solid var(--emerald); }
.steps li .num { font-family: var(--mono); font-size: 13px; color: var(--emerald-deep); display: block; margin-bottom: 8px; }
.steps li h3 { font-size: 22px; margin-bottom: .3em; }
.steps li p { margin: 0; }
@media (max-width: 760px) { .steps ol { grid-template-columns: 1fr; } .steps .photo { aspect-ratio: 16 / 9; } }

/* contact block */
.contact { position: relative; overflow: hidden; }
.contact .bg { position: absolute; inset: 0; }
.contact .bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.55); }
.contact .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(31,21,53,.96) 0%, rgba(31,21,53,.88) 55%, rgba(31,21,53,.7) 100%); }
.contact .container { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.contact h2 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.02em; }
.contact address { font-style: normal; font-family: var(--mono); font-size: 14px; line-height: 1.8; color: var(--lilac-on-ink); }
.contact address a { color: var(--white); text-decoration: none; }
.contact address a:hover { color: var(--emerald-on-ink); }
.contact .phone-big { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 32px); color: var(--white); text-decoration: none; margin: 8px 0 14px; }
@media (max-width: 860px) { .contact .container { grid-template-columns: 1fr; } }

/* form */
.form { background: var(--white); border-radius: var(--radius); padding: clamp(18px, 2.4vw, 28px); box-shadow: var(--shadow); color: var(--ink-soft); }
.form h3 { margin-top: 0; margin-bottom: 4px; }
.form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form label { display: block; font-weight: 600; color: var(--ink); font-size: 14px; margin: 12px 0 5px; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  padding: 9px 11px; border: 1.5px solid #B9B3CC; border-radius: 8px; background: var(--white);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--violet); outline: 3px solid rgba(94,44,165,.25); outline-offset: 0; }
.form textarea { min-height: 84px; resize: vertical; }
.form fieldset { border: 0; padding: 0; margin: 12px 0 0; }
.form legend { font-weight: 600; color: var(--ink); font-size: 14px; margin-bottom: 6px; padding: 0; }
.form .checks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.form .checks label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; font-size: 15px; }
.form .checks input { width: 17px; height: 17px; accent-color: var(--violet); }
.form .form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.form .note { font-size: 13.5px; color: var(--ink-soft); margin: 0; max-width: 30ch; line-height: 1.4; }
.form .btn { margin: 0; }
.form .status { margin-top: 12px; font-size: 15px; }
@media (max-width: 560px) { .form .grid2 { grid-template-columns: 1fr; } .form .btn { width: 100%; text-align: center; } }
.form .status.ok { color: var(--emerald-deep); font-weight: 600; }
.form .status.err { color: #A3260F; }
.form-fallback { background: var(--lilac); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 15px; margin-top: 16px; display: none; }
.form-fallback a { font-weight: 600; }
.form.is-fallback .form-fallback { display: block; }
.form.is-fallback .btn { display: none; }

/* stream page bands */
.definition p { font-size: clamp(18px, 2vw, 21px); color: var(--ink); max-width: 52ch; }
.definition .who { font-family: var(--mono); font-size: 13px; color: var(--violet-deep); margin-top: 12px; }
.scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.scope-card { border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); }
.scope-card.in { background: var(--white); box-shadow: var(--shadow); }
.scope-card.out { background: var(--ink); color: var(--lilac-on-ink); }
.scope-card.out h3, .scope-card.out strong { color: var(--white); }
.scope-card ul { list-style: none; padding: 0; margin: 0; }
.scope-card li { padding: 9px 0; border-bottom: 1px solid rgba(31,21,53,.1); }
.scope-card.out li { border-color: rgba(201,184,240,.22); }
.scope-card li:last-child { border-bottom: 0; }
.scope-card .tag { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.scope-card.in .tag { color: var(--emerald-deep); }
.scope-card.out .tag { color: var(--emerald-on-ink); }
@media (max-width: 760px) { .scope-grid { grid-template-columns: 1fr; } }

.runs .grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.runs figure { margin: 0; }
.runs figure img { border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.7); }
.runs figcaption { font-family: var(--mono); font-size: 12px; color: var(--violet-deep); margin-top: 10px; }
.runs ol { padding-left: 22px; margin: 0; }
.runs ol li { margin-bottom: .7em; }
@media (max-width: 800px) { .runs .grid { grid-template-columns: 1fr; } }

.faq { position: relative; }
.faq details { border-top: 1px solid rgba(31,21,53,.14); }
.faq details:last-of-type { border-bottom: 1px solid rgba(31,21,53,.14); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--emerald-deep); font-size: 22px; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 18px; margin: 0; }
.band-ink .faq details, .band-ink .faq details:last-of-type { border-color: rgba(201,184,240,.22); }
.band-ink .faq summary { color: var(--white); }
.band-ink .faq summary::after { color: var(--emerald-on-ink); }

/* text pages */
.prose h2 { font-size: 26px; margin-top: 1.6em; }
.prose h3 { font-size: 20px; margin-top: 1.3em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 8px 0 20px; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--slide-deep); vertical-align: top; }
.prose th { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--violet-deep); font-weight: 500; }

/* ---- footer -------------------------------------------------------- */
.site-footer { background: #150E26; color: var(--lilac-on-ink); padding: clamp(40px, 6vw, 72px) 0 32px; font-size: 15px; }
.site-footer .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.site-footer .brand { color: var(--white); margin-bottom: 14px; }
.site-footer .brand .wordmark small { color: var(--emerald-on-ink); }
.site-footer h3 { color: var(--white); font-size: 14px; font-family: var(--mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 8px; }
.site-footer a { color: var(--lilac-on-ink); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer .legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(201,184,240,.18); display: flex; flex-wrap: wrap; gap: 10px 24px; font-family: var(--mono); font-size: 12.5px; color: rgba(201,184,240,.8); }
.site-footer .legal a { color: inherit; }
@media (max-width: 760px) { .site-footer .grid { grid-template-columns: 1fr; } }

/* ---- reveal motion (quiet) ---------------------------------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }