/* MIMAS v2 (31 Aug 2026). Warm off-white ground, deep green ink, green as signal, gold only on request.
   Tokens per docs/DESIGN-BRIEF.md section 8. Variable names from v1 are kept as aliases so every page still resolves.
   Every :hover sits inside @media (hover: hover). prefers-reduced-motion renders complete. JS-off renders complete. */

:root {
  --ink: #1B1F1A;
  --ink-soft: #4A4E3F;
  --beige: #FFFFFF;        /* ground: white per client 31 Aug */
  --beige-2: #F6F5F3;      /* alt band, warm neutral not green */
  --white: #FFFFFF;        /* cards, sparingly */
  --dark: #1E1C1A;         /* warm near-black. Was deep green; client read the site as green 31 Aug */
  --green-700: #1F4D3A;    /* accent and CTA */
  --green-300: #8FAF9A;    /* hairline and chip */
  --green-100: #F2F1EE;    /* neutral warm tint, was green */
  --black: #0B0A0A;        /* true black: the closer and footer, per client 1 Sep */
  --clay: #6E3A28;         /* prominent warm ground for the studio band. Warm, not pink, not green */
  --clay-deep: #52291B;
  --gold: #B29169;         /* sampled from his logo; applied only under html[data-accent="gold"] */
  --grey-300: #DBDBD3;
  --grey-500: #C1C0BB;
  --grey-700: #777773;
  --cream: #F7F5F2;        /* type on dark bands */
  --ink-on-dark: #F7F5F2;
  --line: var(--grey-300);
  --line-ink: var(--ink);
  --line-light: rgba(247, 245, 242, 0.22);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "Segoe UI", -apple-system, "Helvetica Neue", sans-serif;
  --wrap: 1200px;
  --topstrip: 0px;
  --nav-h: 64px;
  --radius: 2px;

  /* v1 aliases, retuned */
  --sage-900: var(--dark);
  --sage-700: var(--green-700);
  --sage-300: var(--green-300);
  --sage-100: var(--green-100);
  --tint: var(--green-100);

  /* accent slots: one per screen. Default state is green only. */
  --acc-hero-rule: var(--line-light);
  --acc-sparkle: var(--green-300);
  --acc-numeral: var(--green-700);
  --acc-rule: var(--green-300);

  /* logo mark fills (assets/img/logo-mark.svg reads these) */
  --logo-green: var(--green-700);
  --logo-gold: var(--green-700);
}
html[data-accent="gold"] {
  --gold-ink: #8A6B42;   /* AA-safe gold for text on light grounds */
  --acc-shadow: rgba(178, 145, 105, 0.26);
  --acc-numeral-on-dark: var(--gold);
  --acc-hero-rule: var(--gold);
  --acc-sparkle: var(--gold);
  --acc-numeral: var(--gold-ink);
  --acc-rule: var(--gold);
  --logo-gold: var(--gold);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 28px); }
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--beige);
  overflow-x: clip;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  /* two-tone: cream halo reads on the dark bands, ink outline reads on white */
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--cream);
}
ul[role="list"], ol[role="list"] { list-style: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--dark); color: var(--cream); padding: 10px 14px; border-radius: 4px; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; font-variation-settings: "opsz" 144; }
h1 { font-size: clamp(34px, 3.4vw, 48px); letter-spacing: -0.01em; }
h2 { font-size: clamp(30px, 2.8vw, 40px); letter-spacing: -0.01em; }
h3 { font-size: 24px; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
.amp { font-family: var(--sans); font-weight: 500; font-size: 0.86em; }
.label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
.num { font-family: var(--serif); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.01em; }
.lead { color: var(--ink-soft); max-width: 56ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--green-700);
  background: var(--green-700);
  color: var(--cream);
  padding: 15px 26px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:active { background: #173A2C; }
.i-wa { flex: 0 0 auto; }
.btn-sm { padding: 12px 20px; font-size: 15px; }
.btn-nav { padding: 11px 18px; font-size: 15px; background: var(--nav-fg, var(--cream)); border-color: var(--nav-fg, var(--cream)); color: var(--nav-bg, var(--dark)); }
.btn-nav:active { opacity: 0.75; }
.btn-hero { background: var(--cream); border-color: var(--cream); color: var(--dark); padding: 16px 30px; font-size: 17px; }
.btn-hero:active { background: var(--white); }
.textlink {
  font-weight: 600;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
@media (hover: hover) {
  .btn:hover { background: var(--dark); border-color: var(--dark); }
  .btn-hero:hover { background: var(--white); border-color: var(--white); color: var(--dark); }
  .btn-nav:hover { opacity: 0.86; }
  .textlink:hover { text-decoration-thickness: 2px; }
}

/* ---------- logo lockup (partials/logo.html) ---------- */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--logo-green); text-decoration: none; line-height: 1; white-space: nowrap; }
.logo .logo-mark { display: block; flex: none; width: 40px; height: 40px; }
.logo .logo-text { display: flex; flex-direction: column; align-items: flex-start; }
.logo .logo-word { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: -0.01em; font-optical-sizing: none; font-variation-settings: "opsz" 144; color: inherit; margin-top: -0.06em; }
.logo .logo-tag { font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: inherit; margin-top: 5px; padding-left: 0.05em; }
.logo .logo-tag .amp { font-family: var(--sans); font-weight: 500; font-size: inherit; letter-spacing: inherit; }
.logo.reverse { --logo-green: var(--cream); --logo-gold: var(--cream); color: var(--cream); }


/* ---------- nav: translucent pill over the hero, sticky after ---------- */
/* Full-bleed sticky bar. Transparent over the hero, then it takes the ground colour
   of whatever section is behind it (set by main.js from the real computed background,
   so it stays right if a section's colour changes). No JS: it falls back to the dark
   bar, which reads on the hero and on every band. */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  height: var(--nav-h);
  margin: 0 0 calc(var(--nav-h) * -1);
  padding: 0 max(24px, calc((100% - var(--wrap)) / 2));
  background: var(--nav-bg, var(--dark));
  color: var(--nav-fg, var(--cream));
  transition: background-color 0.28s ease, color 0.28s ease;
}
/* over the hero the bar is glass, so the photograph runs under it */
.nav.is-clear {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav.is-solid { border-bottom: 1px solid var(--nav-line, transparent); }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
.nav .logo, .nav .logo.reverse { flex: none; color: var(--nav-fg, var(--cream)); --logo-green: currentColor; --logo-gold: currentColor; }
.mega { border-top: 1px solid var(--nav-line, var(--line)); }
.nav .logo .logo-mark { width: 36px; height: 36px; }
.nav .logo .logo-word { font-size: 27px; }
.navlinks { display: flex; gap: 26px; margin-left: auto; }
.navlinks a {
  position: relative;
  text-decoration: none;
  font-weight: 500;
  font-size: 15.5px;
  color: inherit;
  padding: 6px 0;
}
.navlinks a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.navlinks a[aria-expanded="true"]::after, .navlinks a[aria-current="page"]::after { transform: scaleX(1); }
.nav-menu {
  display: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--nav-line, var(--line-light));
  border-radius: 999px;
  background: none;
  color: inherit;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
@media (hover: hover) {
  .navlinks a:hover::after { transform: scaleX(1); }
}

/* ---------- treatments mega menu (built by main.js from data/treatments.json) ---------- */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--beige);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
body.mega-on .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 268px;
  gap: 28px;
  padding: 44px max(24px, calc((100% - var(--wrap)) / 2)) 40px;
}
.mega-head { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-soft); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.mega-col a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
}
.mega-col a span { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--acc-numeral); font-weight: 600; }
.mega-card { background: var(--green-100); border-radius: 4px; padding: 22px 22px 24px; align-self: start; }
.mega-ask { font-family: var(--serif); font-size: 22px; line-height: 1.15; margin-bottom: 8px; }
.mega-card p:not(.mega-ask) { font-size: 14px; color: var(--ink-soft); margin-bottom: 16px; }
@media (hover: hover) {
  .mega-col a:hover { color: var(--green-700); }
}

/* ---------- hero ---------- */
/* Hero photograph restored on Omkar's instruction, 1 Sep, after it was pulled as a
   CGI render. Recorded as his call in DESIGN.md. Swaps for his own shoot by changing
   the one img in .hero-media; nothing else moves. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--topstrip));
  max-height: 980px;
  background: var(--dark);
  color: var(--cream);
  overflow: clip;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; filter: brightness(1.06); }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* scrim: never heavier than 55% at any point */
  background: linear-gradient(105deg, rgba(26, 22, 19, 0.55) 0%, rgba(26, 22, 19, 0.34) 50%, rgba(26, 22, 19, 0.12) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
  width: 100%;
  padding-top: calc(var(--nav-h) + 72px);
}
.hero-copy { margin-bottom: 48px; }
.hero h1 { max-width: 13ch; margin-bottom: 18px; }
.hero h1 em { color: var(--cream); opacity: 0.92; }
.hero .sub { max-width: 44ch; font-size: 18px; color: rgba(247, 245, 242, 0.9); margin-bottom: 28px; }
.hero-cta { display: flex; align-items: center; gap: 26px; }
.hero-cta .textlink { color: var(--cream); }

.stats {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  border-top: 1px solid var(--acc-hero-rule);
  padding: 22px 0 36px;
}
.stats li { display: flex; flex-direction: column; gap: 2px; padding: 0 32px; border-left: 1px solid var(--line-light); }
.stats li:first-child { border-left: 0; padding-left: 0; }
.stats li:last-child { padding-right: 0; }
.stats strong { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stats span { font-size: 14px; color: rgba(247, 245, 242, 0.78); }

/* ---------- section shapes ---------- */
.section { padding: 88px 0; }
.rail { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
@media (min-width: 981px) {
  /* the rail heading travels with its content: the column reads as intent, not a void */
  .rail-head { position: sticky; top: calc(var(--nav-h) + 28px); }
  /* the visit beats are three equal images: a 4fr heading rail left a ~500px void
     under a two-line heading, so this section stacks and uses the full width. */
  .visit .rail { grid-template-columns: 1fr; gap: 32px; }
  .visit .rail-head { position: static; }
  .visit .rail-head p { max-width: 60ch; }
  /* wider cells need a wider frame, or the beats tower over the copy */
  .visit .vcell-media { aspect-ratio: 4 / 3; }
}
.rail-head p { color: var(--ink-soft); margin-top: 12px; max-width: 34ch; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 32px; }
.section-head p { color: var(--ink-soft); max-width: 46ch; }

/* sparkle divider: the one ornament, from his logo. Colour is the accent slot. */
.divider { display: flex; align-items: center; gap: 18px; color: var(--acc-sparkle); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.divider svg { width: 18px; height: 18px; flex: none; }
.divider.on-dark::before, .divider.on-dark::after { background: var(--line-light); }

/* ---------- concern router (partials/concern-router.html) ---------- */
.router { padding: 88px 0; }
.router h2 { margin-bottom: 28px; }
.router-grid { display: grid; grid-template-columns: minmax(260px, 4fr) 8fr; gap: 48px; align-items: start; }
.router-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line-ink); }
.router-tab {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 2px solid transparent;
  padding: 14px 12px 14px 14px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink-soft);
  cursor: pointer;
}
.router-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-left-color: var(--acc-numeral); background: var(--beige-2); }
.router-panel-h { font-size: 22px; margin-bottom: 16px; }
.router-cells { list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.router-cell { display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.router-cell:last-child:nth-child(odd) { grid-column: span 2; }
.router-cat { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--acc-numeral); margin-bottom: 6px; }
.router-name { font-size: 22px; line-height: 1.15; margin-bottom: 8px; }
.router-effect { font-size: 15px; color: var(--ink-soft); margin-bottom: 16px; }
.router-link { margin-top: auto; align-self: flex-start; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.router-more { margin-top: 16px; font-size: 14px; color: var(--ink-soft); }
.router-more a { text-underline-offset: 3px; }
@media (hover: hover) {
  .router-link:hover { color: var(--green-700); text-decoration-thickness: 2px; }
  .router-tab:hover { color: var(--ink); }
}

/* ---------- concern ticker ---------- */
.concerns { background: var(--beige-2); padding: 56px 0 44px; position: relative; }
.concerns-grid { position: relative; }
@media (min-width: 981px) {
  .concerns-grid .tickers { width: 100%; }
  .answer-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, 42vw);
    z-index: 2;
    box-shadow: 0 18px 44px rgba(11, 10, 10, 0.13);
  }
}
.tickers { min-width: 0; }
.row {
  display: flex;
  overflow: clip;
  white-space: nowrap;
  padding: 10px 0;
  /* fade at the viewport edges; the centred card is what the words pass behind */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.track { display: flex; flex: 0 0 auto; }
html.js .track { animation: slide 80s linear infinite; }
html.js .row.rev .track { animation-direction: reverse; }
.track span { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); font-variation-settings: "opsz" 144; color: var(--ink); padding-right: 20px; line-height: 1.3; }
.track span::after { content: "\00b7"; color: var(--acc-sparkle); padding-left: 20px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.concerns[data-paused="true"] .track { animation-play-state: paused; }
html:not(.js) .row { display: block; white-space: normal; padding: 10px 24px; }
html:not(.js) .track { display: flex; flex-wrap: wrap; white-space: normal; }
html:not(.js) .track.dup, html:not(.js) .pause { display: none; }
.answer-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 28px 30px; }
.answer-card h3 { font-size: 26px; line-height: 1.15; margin-bottom: 10px; }
.answer-card p { color: var(--ink-soft); font-size: 15px; margin-bottom: 20px; }
.pause {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin: 14px auto 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  cursor: pointer;
}
.pause::before { content: "\275A\275A"; font-size: 9px; letter-spacing: 0.1em; }
.pause[aria-pressed="true"]::before { content: "\25B6"; }
@media (hover: hover) { .pause:hover { color: var(--ink); } }

/* ---------- treatment library (partials/library-grid.html) ---------- */
.library { padding: 88px 0 72px; }
.library .section-head { margin-bottom: 32px; }
.lib-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-ink); border-left: 1px solid var(--line); }
.lib-cell { display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lib-cell-name { font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; min-height: 2.3em; }
.lib-cell-count { display: flex; align-items: baseline; gap: 8px; color: var(--acc-numeral); font-weight: 600; font-size: 14px; margin: 10px 0 14px; }
.lib-cell-count strong { font-family: var(--serif); font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.lib-cell-items { list-style: none; font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 18px; }
.lib-cell-items .fade:nth-child(4) { opacity: 0.6; }
.lib-cell-items .fade:nth-child(5) { opacity: 0.3; }
.lib-cell-link { margin-top: auto; align-self: flex-start; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.lib-cell-custom { grid-column: span 2; background: var(--green-100); }
.lib-cell-custom .lib-cell-count { font-size: 15px; }
.lib-cell-blurb { font-size: 16px; max-width: 56ch; margin-bottom: 18px; }
@media (hover: hover) { .lib-cell-link:hover { color: var(--green-700); text-decoration-thickness: 2px; } }

/* ---------- how a visit goes ---------- */
.visit { padding: 72px 0 88px; }
.visit .divider { margin-bottom: 72px; }
.visit-cells { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-ink); border-left: 1px solid var(--line); }
.vcell { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.vcell-media { display: block; aspect-ratio: 3 / 4; background: var(--beige-2); overflow: clip; }
.vcell-media img { width: 100%; height: 100%; object-fit: cover; }
.vcell-body { padding: 20px 22px 24px; }
.vnum { display: block; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--acc-numeral); font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.vcell h3 { font-size: 24px; margin-bottom: 8px; }
.vcell p { font-size: 15px; color: var(--ink-soft); }

/* ---------- machines and standards: full-bleed deep green band ---------- */
.machines { background: var(--dark); color: var(--cream); padding: 96px 0; }
.machines-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: center; }
.machines-media {
  aspect-ratio: 3 / 4;
  max-width: 440px;
  background: #24352C;
  box-shadow: 16px 16px 0 0 var(--green-300);   /* the one shadow move */
  overflow: clip;
}
.machines-media img { width: 100%; height: 100%; object-fit: cover; }
.machines-copy .sparkle { display: block; width: 18px; height: 18px; color: var(--acc-sparkle); margin-bottom: 20px; }
.machines h2 { margin-bottom: 16px; }
.machines h2 em { color: var(--green-300); }
.machines .lead { color: rgba(247, 245, 242, 0.82); margin-bottom: 32px; }
.mcells { list-style: none; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
.mcells li { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 22px; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.mcells strong { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.15; }
.mcells span { font-size: 15px; color: rgba(247, 245, 242, 0.78); }
.machines-line { margin-top: 18px; font-size: 14px; color: rgba(247, 245, 242, 0.7); }

/* ---------- studio ---------- */
/* one section carries a prominent colour so the page is not a single light pair */
.studio { padding: 92px 0; background: var(--clay); color: var(--cream); }
.studio h2, .studio h3 { color: var(--cream); }
.studio h2 em { color: var(--acc-numeral-on-dark, var(--gold)); }
.studio .lead, .studio p { color: rgba(247, 245, 242, 0.86); }
.studio .infolist { border-top-color: rgba(247, 245, 242, 0.34); }
.studio .infolist li { border-bottom-color: rgba(247, 245, 242, 0.22); }
.studio .infolist li span:first-child { color: rgba(247, 245, 242, 0.72); }
.studio .studio-media { box-shadow: 18px 18px 0 -1px var(--clay-deep); }
.studio a { color: var(--cream); }
/* gold fails on clay (2.0:1); numerals and their labels go cream here */
.studio .num { color: var(--cream); }
.studio .numerals strong { color: var(--cream); }
.studio .numerals span { color: rgba(247, 245, 242, 0.78); }
.studio .numerals li { border-left-color: rgba(247, 245, 242, 0.26); }
.studio .tbc { color: rgba(247, 245, 242, 0.66); }
.studio .infolist li span:last-child,
.studio .infolist li span { color: rgba(247, 245, 242, 0.92); }
.studio .infolist li span:first-child { color: rgba(247, 245, 242, 0.66); }
.studio-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.studio-media { aspect-ratio: 3 / 4; background: var(--grey-300); overflow: clip; }
.studio-media img { width: 100%; height: 100%; object-fit: cover; }
.studio-info h2 { margin-bottom: 12px; }
.studio-info .lead { margin-bottom: 28px; }
.numerals { list-style: none; display: flex; border-top: 1px solid var(--line-ink); padding: 22px 0 24px; margin-bottom: 8px; }
.numerals li { display: flex; flex-direction: column; gap: 4px; padding: 0 36px; border-left: 1px solid var(--line); }
.numerals li:first-child { padding-left: 0; border-left: 0; }
.numerals strong { font-family: var(--serif); font-weight: 500; font-size: 56px; line-height: 1; letter-spacing: -0.015em; color: var(--acc-numeral); font-variant-numeric: tabular-nums; }
.numerals span { font-size: 14px; color: var(--ink-soft); }
.infolist { list-style: none; border-top: 1px solid var(--line-ink); }
.infolist li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.infolist li span:first-child { font-weight: 600; color: var(--ink-soft); }
.infolist a { text-underline-offset: 3px; }
.infolist .tbc { color: var(--grey-700); }
.infolist.reverse { border-top-color: var(--line-light); }
.infolist.reverse li { border-bottom-color: var(--line-light); }
.infolist.reverse li span:first-child { color: var(--green-300); }
.infolist.reverse .tbc { color: rgba(247, 245, 242, 0.6); }

/* ---------- reviews (ships hidden) ---------- */
.reviews { padding: 88px 0; }
.reviewgrid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: var(--white); }
.rcard { padding: 32px 28px; border-left: 1px solid var(--line); }
.rcard:first-child { border-left: 0; }

/* ---------- faq ---------- */
.faq { padding: 88px 0; }
.faq-list { border-top: 1px solid var(--line-ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; font-family: var(--serif); font-size: 22px; padding: 20px 40px 20px 0; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 400;
  color: var(--green-700);
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { padding: 0 0 22px; color: var(--ink-soft); max-width: 60ch; }
@media (hover: hover) { .faq-list summary:hover { color: var(--green-700); } }

/* ---------- closer: deep green band, two columns ---------- */
.closer { background: var(--black); color: var(--cream); padding: 96px 0; }
.closer .divider { margin-bottom: 48px; }
.closer-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: start; }
.closer h2 { margin-bottom: 14px; }
.closer h2 em { color: var(--green-300); }
.closer .lead { color: rgba(247, 245, 242, 0.82); margin-bottom: 28px; }

/* ---------- footer: off-white card on the ground ---------- */
.footer { padding: 24px 24px 28px; background: var(--beige); }
.footcard { max-width: var(--wrap); margin: 0 auto; background: var(--white); border: 1px solid var(--line); border-radius: 4px; padding: 40px 40px 24px; }
.footgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 36px; }
.fcol p { font-size: 15px; color: var(--ink-soft); }
.fcol .logo { margin-bottom: 14px; }
.f-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.fcol ul { list-style: none; }
.fcol li { font-size: 15px; padding: 3px 0; color: var(--ink-soft); }
.fcol li a { text-decoration: none; color: var(--ink-soft); }
.footline { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-top: 18px; }
.footline p { font-size: 13px; color: var(--grey-700); }
@media (hover: hover) { .fcol li a:hover { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; } }

/* footer long lists: <details> that stay open on desktop and without JS; JS closes them under 721px */
.fcol-details summary { list-style: none; cursor: default; pointer-events: none; }
.fcol-details summary::-webkit-details-marker { display: none; }
@media (max-width: 720px) {
  .fcol-details summary { pointer-events: auto; cursor: pointer; position: relative; padding-right: 24px; }
  .fcol-details summary::after { content: "+"; position: absolute; right: 2px; top: -2px; font-size: 20px; font-weight: 400; color: var(--green-700); }
  .fcol-details[open] summary::after { content: "\2212"; }
}

/* ---------- mobile WhatsApp bar: fixed only with JS, hidden while the hero CTA is on screen ---------- */
.wabar {
  display: none;
  background: var(--green-700);
  color: var(--cream);
  text-align: center;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  padding: 16px;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
html.js .wabar {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 50;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
html.js .wabar.is-hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }
@media (max-width: 720px) { html.js body.bar-on .btn-nav { display: none; } }
.wabar:active { background: var(--dark); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .navlinks a::after, .mega, .faq-list summary::after, html.js .wabar { transition: none; }
  html.js .track { animation: none; }
  .row { display: block; white-space: normal; padding: 10px 24px; }
  .track { display: flex; flex-wrap: wrap; white-space: normal; }
  .track.dup, .pause { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .rail, .router-grid, .machines-grid, .studio-grid, .closer-grid { grid-template-columns: 1fr; gap: 32px; }
  .machines-media { max-width: 100%; aspect-ratio: 4 / 3; }
  .studio-media { aspect-ratio: 4 / 3; }
  .lib-grid { grid-template-columns: repeat(2, 1fr); }
  .lib-cell:nth-last-child(2), .lib-cell-custom { grid-column: span 2; }
  .mega-inner { grid-template-columns: 1fr 1fr 1fr; }
  .mega-card { grid-column: span 3; }
  .concerns-grid { grid-template-columns: 1fr; gap: 24px; padding-right: 0; }
  .answer-card { margin: 0 24px; }
  .footgrid { grid-template-columns: 1fr 1fr; }
  .router-tabs {
    flex-direction: row;
    gap: 8px;
    margin: 0 -24px;
    padding: 2px 24px 10px;
    border-top: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding: 0 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .router-tabs::-webkit-scrollbar { display: none; }
  .router-tab { flex: 0 0 auto; width: auto; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; font-size: 14px; scroll-snap-align: start; background: var(--white); }
  .router-tab[aria-selected="true"] { background: var(--dark); color: var(--cream); border-color: var(--dark); font-weight: 500; }
}

@media (max-width: 720px) {
  :root { --nav-h: 56px; }
  .nav { gap: 10px; padding: 0 12px 0 18px; width: 100%; }
  .nav .logo .logo-mark { width: 30px; height: 30px; }
  .nav .logo .logo-word { font-size: 22px; }
  .navlinks {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--dark);
    padding: 14px 0 10px;
  }
  .nav.nav-open .navlinks { display: flex; }
  .navlinks a { padding: 12px 20px; font-size: 16px; color: var(--cream); border-bottom: 1px solid var(--line-light); }
  .navlinks a:last-child { border-bottom: 0; }
  .navlinks a::after { display: none; }
  .btn-nav { padding: 10px 14px; font-size: 14px; margin-left: auto; }
  .btn-nav .i-wa { display: none; }
  html.js .nav-menu { display: inline-flex; }
  /* JS off: leave the links in flow rather than behind a button that cannot exist */
  html:not(.js) .navlinks { display: flex; position: static; flex-direction: row; flex-wrap: wrap; gap: 14px; background: none; border-radius: 0; padding: 0; margin-left: auto; }
  html:not(.js) .navlinks a { padding: 4px 0; font-size: 13px; border-bottom: 0; }
  html:not(.js) .btn-nav { margin-left: 0; }

  .hero { min-height: 0; max-height: none; background: var(--beige); }
  .hero-media { bottom: auto; height: 70vh; min-height: 520px; }
  .hero-inner { min-height: 0; padding-top: 0; }
  .hero-copy { display: flex; flex-direction: column; justify-content: flex-end; min-height: 70vh; padding: calc(var(--nav-h) + 40px) 0 36px; margin-bottom: 0; }
  .hero h1 { font-size: 36px; max-width: 12ch; }
  .hero .sub { font-size: 17px; }
  .hero-cta { flex-wrap: wrap; gap: 18px; }
  .stats {
    color: var(--ink);
    border-top: 0;
    justify-content: flex-start;
    padding: 22px 0 6px;
  }
  .stats li { flex: 1; padding: 0 10px; border-left-color: var(--line); }
  .stats strong { font-size: 30px; }
  .stats span { color: var(--ink-soft); font-size: 13px; line-height: 1.3; }

  .section, .router, .library, .visit, .machines, .studio, .faq, .closer { padding: 48px 0; }
  .visit .divider { margin-bottom: 40px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 24px; }
  .lib-cell { padding: 12px 10px 12px; }
  .lib-cell-custom .lib-cell-blurb, .library .section-head p { display: none; }
  .lib-cell-name { font-size: 17px; min-height: 0; overflow-wrap: normal; }
  .lib-cell-count { margin: 8px 0 10px; font-size: 13px; }
  .lib-cell-count strong { font-size: 28px; }
  .lib-cell-items { font-size: 13.5px; line-height: 1.4; margin-bottom: 12px; }
  /* names wrap; clipping them mid-word made the grid read as broken at 390 */
  .lib-cell-items li { padding: 3px 0; white-space: normal; overflow-wrap: anywhere; }
  .lib-cell-items .fade { display: none; }
  .lib-cell-link { font-size: 14px; }
  .lib-cell-blurb { font-size: 15px; }
  .router-cells { grid-template-columns: 1fr; }
  .router-cell:last-child:nth-child(odd) { grid-column: auto; }
  .router-cell { padding: 16px 14px 16px; }
  .router-cell:nth-child(n+4) { display: none; }
  .router-name { font-size: 20px; }
  .router-effect { font-size: 14px; margin-bottom: 10px; }
  .concerns { padding: 40px 0 32px; }
  .row { padding: 6px 0; }
  .answer-card { padding: 22px 20px 24px; }
  .answer-card h3 { font-size: 22px; }
  .pause { margin-left: 24px; }

  .visit-cells {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -24px;
    padding: 0 24px 6px;
    border-top: 0;
    border-left: 0;
    scrollbar-width: none;
  }
  .visit-cells::-webkit-scrollbar { display: none; }
  .vcell { flex: 0 0 76%; scroll-snap-align: start; border: 1px solid var(--line); border-right: 0; }
  .vcell:last-child { border-right: 1px solid var(--line); }
  .vcell-media { aspect-ratio: 3 / 2; }
  .vcell-body { padding: 16px 16px 20px; }
  .vnum { font-size: 32px; }
  .vcell h3 { font-size: 22px; }

  .machines-grid { gap: 40px; }
  .machines-media { aspect-ratio: 3 / 2; max-width: calc(100% - 16px); }
  .machines-copy .sparkle, .machines-line { display: none; }
  .mcells li { padding: 12px 14px 14px; }
  .mcells strong { font-size: 19px; }
  .mcells span { font-size: 14px; }

  .studio-media { aspect-ratio: 3 / 2; }
  .numerals { padding: 18px 0 20px; }
  .numerals li { padding: 0 18px; }
  .numerals strong { font-size: 40px; }
  .infolist li { grid-template-columns: 96px 1fr; gap: 12px; font-size: 15px; }

  .faq-list summary { font-size: 20px; }
  .closer-grid { gap: 40px; }
  .closer .infolist { display: none; }  /* the footer's Studio column repeats these facts directly below on phones */
  .footer { padding: 16px 12px 24px; }
  .footcard { padding: 28px 20px 20px; }
  .footgrid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .fcol.brand { grid-column: span 2; }
  .fcol.brand p + p { display: none; }
  .footline { flex-direction: column; gap: 6px; }
  .wabar { display: flex; }
  html.js body { padding-bottom: 76px; }
}

/* ================= DEPTH PASS (31 Aug) =================
   Client read v2 as "plain / flat". Depth here is structural, never a soft float
   shadow: figure-ground separation, one hard offset shadow, tonal band rhythm,
   and imagery that crosses a section edge. Brief section 8 rules still hold. */

/* 1. Break the router -> library -> visit flat run. Library moves to the alt
      ground so its white cells lift off it instead of dissolving into it. */
.library { background: var(--beige-2); }
/* only the cell itself; [class*=cell] also matched lib-cell-name, -count, -items
   and painted a white bar behind every child */
.library .lib-cell { background: var(--white); }

/* 2. The ONE graphic move, applied consistently: a hard offset shadow in the
      accent, no blur. Reads as printed layers, not as a floating card. */
.studio-media,
.machines-media,
.vcell-media { position: relative; }
.studio-media { box-shadow: 18px 18px 0 -1px var(--acc-shadow, var(--green-100)); }
.machines-figure { box-shadow: 18px 18px 0 -1px rgba(143, 175, 154, 0.22); }

/* 3. Mid-page full-bleed image band: the page is flattest and most textual
      between the library and the visit strip. This is the tonal break. */
/* type-led band. The photograph was pulled (banned category, broken crop) and the
   scrim went with it: it was green-tinted and, with no image under it, tinted the band. */
.mid { position: relative; overflow: clip; background: var(--dark); }
.mid-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 88px 24px 92px;
  width: 100%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: end;
}
.mid-line {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.16;
  color: var(--cream);
  max-width: 20ch;
}
.mid-facts { display: flex; gap: 40px; }
.mid-facts div { border-top: 1px solid var(--acc-rule); padding-top: 12px; }
.mid-facts strong {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 34px;
  color: var(--acc-numeral-on-dark, var(--cream));
  font-variant-numeric: tabular-nums;
}
.mid-facts span { font-size: 14px; color: rgba(247, 245, 242, 0.72); }

/* 4. Sparkle divider from his logo: the one ornament between major sections. */
.sparkle {
  display: block;
  width: 100%;
  border: 0;
  height: 22px;
  margin: 0;
  background: no-repeat center/22px 22px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.2 5.1 10.6 11.3 11.3v1.4C17.1 13.4 12.7 17.8 12 24c-.7-6.2-5.1-10.6-11.3-11.3v-1.4C6.9 10.6 11.3 6.2 12 0z' fill='%23B29169'/%3E%3C/svg%3E");
}
html:not([data-accent="gold"]) .sparkle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.7 6.2 5.1 10.6 11.3 11.3v1.4C17.1 13.4 12.7 17.8 12 24c-.7-6.2-5.1-10.6-11.3-11.3v-1.4C6.9 10.6 11.3 6.2 12 0z' fill='%238FAF9A'/%3E%3C/svg%3E"); }

@media (max-width: 980px) {
  .mid-inner { grid-template-columns: 1fr; gap: 24px; }
  .mid { min-height: 52vh; }
}
@media (max-width: 720px) {
  .mid { min-height: 0; }
  .mid-inner { padding-top: 48px; padding-bottom: 44px; }
  .mid-facts { gap: 22px; }
  .mid-facts strong { font-size: 24px; }
  .mid-facts span { font-size: 12.5px; }
  .studio-media { box-shadow: 10px 10px 0 -1px var(--acc-shadow, var(--green-100)); }
  .sparkle { height: 16px; background-size: 16px 16px; }
}

/* ---------- full-bleed image + copy band (the hero treatment, reused) ---------- */
.full { position: relative; overflow: clip; display: flex; align-items: center; min-height: 76vh; background: var(--dark); }
.full-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 42%; }
.full::after {
  content: "";
  position: absolute;
  inset: 0;
  /* copy sits left, so the scrim is heaviest left and clears to show the photograph */
  background: linear-gradient(100deg, rgba(22, 20, 18, 0.94) 0%, rgba(22, 20, 18, 0.80) 42%, rgba(22, 20, 18, 0.34) 100%);
}
.full-inner { position: relative; z-index: 1; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 72px 24px; }
.full-copy { max-width: 52ch; color: var(--cream); }
/* .sparkle is a full-width hr elsewhere; inside a copy block it must be a small mark */
.full-copy .sparkle { display: block; width: 18px; height: 18px; margin-bottom: 18px; background: none; color: var(--acc-sparkle); }
.full-copy .sparkle svg { width: 100%; height: 100%; display: block; }
.full-copy h2 { color: var(--cream); }
.full-copy h2 em { color: var(--acc-numeral-on-dark, var(--cream)); }
.full-copy .lead { color: rgba(247, 245, 242, 0.86); }
.machines.full .mcells { border-top: 1px solid var(--line-light); margin-top: 28px; }
.machines.full .mcells li { border-bottom: 1px solid var(--line-light); }
@media (max-width: 980px) { .full { min-height: 0; } .full-inner { padding: 56px 24px; } }
@media (max-width: 720px) {
  .full { align-items: flex-end; min-height: 560px; }
  .full::after { background: linear-gradient(180deg, rgba(22,20,18,0.30) 0%, rgba(22,20,18,0.72) 45%, rgba(22,20,18,0.94) 100%); }
  .full-inner { padding: 40px 24px 44px; }
}

/* ---------- concern quiz (progressive enhancement over the tab router) ---------- */
/* [hidden] loses to display:grid, so the replaced router must be hidden by display */
.quiz-on .router-grid { display: none; }
.quiz-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  list-style: none;
  padding: 0 0 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--grey-700);
}
.quiz-steps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.quiz-steps li.is-done { color: var(--acc-numeral); }
.quiz-q { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.18; margin-bottom: 10px; }
.quiz-note { color: var(--ink-soft); font-size: 15px; margin-bottom: 22px; max-width: 60ch; }
.quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.quiz-opts-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quiz-opt {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* generous target: the brief's audience is above 35 */
  padding: 20px 22px;
  min-height: 68px;
  cursor: pointer;
  transition: border-color 0.14s ease, background-color 0.14s ease;
}
.quiz-opt:active { background: var(--beige-2); }
@media (hover: hover) { .quiz-opt:hover { border-color: var(--acc-numeral); background: var(--beige-2); } }
.quiz-foot { display: flex; gap: 20px; margin-top: 24px; }
.quiz-back, .quiz-restart {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (hover: hover) { .quiz-back:hover, .quiz-restart:hover { color: var(--ink); } }
.quiz-result .router-cells { margin-bottom: 26px; }
.quiz-cta { margin-top: 4px; }
@media (max-width: 720px) {
  .quiz-opts, .quiz-opts-row { grid-template-columns: 1fr; }
  .quiz-opt { padding: 17px 18px; min-height: 60px; font-size: 15.5px; }
  .quiz-steps { font-size: 13px; gap: 8px 18px; }
}

/* ---------- treatment family marks ----------
   One mechanism mark per family, same grid and stroke, sitting inline above the
   name at text scale. Never an oversized centred icon dump. */
.lib-cell-ic {
  display: block;
  color: var(--acc-numeral);
  margin-bottom: 12px;
}
.lib-cell-ic .lib-ic { width: 26px; height: 26px; stroke-width: 1.5; }
.lib-cell-ic .lib-ic { display: block; }
@media (max-width: 720px) {
  .lib-cell-ic { margin-bottom: 8px; }
  .lib-cell-ic .lib-ic { width: 19px; height: 19px; }
}

/* ---------- why: the positioning band, on true black ---------- */
.why { background: var(--black); color: var(--cream); padding: 96px 0; }
.why-inner { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.why .sparkle { display: block; width: 18px; height: 18px; margin-bottom: 18px; background: none; color: var(--acc-sparkle); }
.why .sparkle svg { width: 100%; height: 100%; display: block; }
.why h2 { color: var(--cream); }

.why .lead { color: rgba(247, 245, 242, 0.82); margin-top: 14px; }
.why-cells { list-style: none; border-top: 1px solid rgba(247, 245, 242, 0.24); }
.why-cells li { padding: 22px 0; border-bottom: 1px solid rgba(247, 245, 242, 0.16); }
.why-cells h3 { font-size: 21px; color: var(--cream); margin-bottom: 6px; }
.why-cells p { color: rgba(247, 245, 242, 0.78); font-size: 16px; max-width: 62ch; }

/* ---------- start: the route out of 95 treatments ---------- */
.start { background: var(--beige-2); padding: 72px 0; }
.start-inner { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }

.start .lead { margin-top: 12px; }
.start-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.start-actions .btn svg { flex: none; }

@media (max-width: 980px) {
  .why-inner, .start-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .why { padding: 56px 0; }
  .start { padding: 48px 0; }
  .why-cells h3 { font-size: 19px; }
}

/* ---------- family card colour set ----------
   Client asked for colour on the family cards. Not thirteen hues, which would be
   noise for a 35+ reader: a five-tone warm set cycling across the grid, so it reads
   as one palette in variation. Two dark cards give the grid punch and rhythm. */
.lib-cell:nth-child(5n+1) { background: #F7F1E8; }   /* sand */
.lib-cell:nth-child(5n+2) { background: #F3EDE6; }   /* warm stone */
.lib-cell:nth-child(5n+3) { background: #F6EADF; }   /* pale clay */
.lib-cell:nth-child(5n+4) { background: #F1EFE9; }   /* linen */
.lib-cell:nth-child(5n+5) { background: #F7F2E2; }   /* pale gold */

/* two anchors in deep colour so the mosaic has weight, not just tint */
.lib-cell:nth-child(6) { background: var(--clay); }
.lib-cell:nth-child(6) .lib-cell-name,
.lib-cell:nth-child(6) .lib-cell-count strong { color: var(--cream); }
.lib-cell:nth-child(6) .lib-cell-count,
.lib-cell:nth-child(6) .lib-cell-items { color: rgba(247, 245, 242, 0.86); }
.lib-cell:nth-child(6) .lib-cell-ic { color: var(--gold); }
.lib-cell:nth-child(6) .lib-cell-link { color: var(--cream); }
.lib-cell:nth-child(6) .lib-cell-items .fade { color: rgba(247, 245, 242, 0.5); }

.lib-cell:nth-child(11) { background: var(--black); }
.lib-cell:nth-child(11) .lib-cell-name,
.lib-cell:nth-child(11) .lib-cell-count strong { color: var(--cream); }
.lib-cell:nth-child(11) .lib-cell-count,
.lib-cell:nth-child(11) .lib-cell-items { color: rgba(247, 245, 242, 0.86); }
.lib-cell:nth-child(11) .lib-cell-ic { color: var(--gold); }
.lib-cell:nth-child(11) .lib-cell-link { color: var(--cream); }
.lib-cell:nth-child(11) .lib-cell-items .fade { color: rgba(247, 245, 242, 0.5); }

/* ---------- mega menu: 13 families, each with its treatments and a link to its page ---------- */
.mega-inner { align-items: start; }
/* the panel must never exceed the viewport: 13 families is a lot of menu */
.mega { max-height: calc(100vh - var(--topstrip) - var(--nav-h) - 24px); overflow-y: auto; }
.mega-fam { margin-bottom: 22px; }
.mega-fam:last-child { margin-bottom: 0; }
.mega-famname {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.mega-famname span {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--acc-numeral);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.mega-t {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 3px 0;
}
.mega-more {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--acc-numeral);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
}
@media (hover: hover) {
  .mega-famname:hover { color: var(--green-700); }
  .mega-t:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .mega-more:hover { color: var(--ink); }
}

/* ---------- footer map: a real map of the one location, lazy so it costs nothing above the fold ---------- */
.footmap {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 32px;
  align-items: stretch;
  padding: 32px 0 8px;
  border-top: 1px solid var(--line);
}
.footmap-frame {
  position: relative;
  min-height: 260px;
  background: var(--beige-2);
  border: 1px solid var(--line);
  overflow: clip;
}
.footmap-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* the embed ships a bright default; settle it into the page without hiding detail */
  filter: saturate(0.82) contrast(1.02);
}
.footmap-side { display: flex; flex-direction: column; align-items: flex-start; }
.footmap-addr { font-family: var(--serif); font-size: 22px; line-height: 1.25; margin-bottom: 10px; }
.footmap-note { font-size: 15px; color: var(--ink-soft); margin-bottom: 18px; max-width: 34ch; }
@media (max-width: 980px) {
  .footmap { grid-template-columns: 1fr; gap: 20px; }
  .footmap-frame { min-height: 220px; }
}