/* =============================================================================
   Tummies to Toes — concept preview by PXLNorth.
   Blueprint recreated: templates/blueprints/clinical/massage-thenowmassage
   (a page that reads as a row of browsable MODULES, each headed by a serif title
   and one outlined secondary control, with one solid colour reserved for every
   commit action), scaled honestly to a one-person practice: no memberships, no
   retail, no press logos.

   ---------------------------------------------------------------------------
   TYPE — Lora 600/700 (display) + Figtree 400/500/600/700 (body).

   WHY LORA. Rebecca's practice is teaching: small classes, a booklet, a midwife's
   waiting room. It wants a serif with a WRITTEN hand rather than a fashion Didone.
   Lora's brushed, calligraphic curves carry that warmth at display size and, unlike
   a high-contrast Didone, its stems hold their weight on the deep band and the dark
   booking console (TASTE_LEDGER #53: a Didone-class face holds 700 and still
   dissolves on a dark ground, and no check can see that). It is also the least-worn
   of the three faces the fleet has available: Newsreader is on 429 built pages and
   is effectively the house serif, so reaching for it here would have made this page
   open like every other one.

   WHY FIGTREE. A warm humanist-geometric sans with generous apertures and a true
   500 for labels. It sits under Lora without competing, and it is unused anywhere
   else in this fleet, so the pairing belongs to this prospect alone.

   Only 600 and 700 of Lora and 400/500/600/700 of Figtree are declared here, and
   the Google Fonts href requests exactly those: a family used at >= 600 that the
   href never asked for is synthesized into a smeared faux bold.

   ---------------------------------------------------------------------------
   PALETTE — SAMPLED FROM THE OPERATOR'S CHOSEN LOGO, pixel by pixel, not guessed
   (see runs/tummiestotoes.ca/redesign-assets/brand-note.md). The 2019 site's tan
   #dfb28b and red #bf0000 are gone with it.

   The logo gives three hues and the page uses exactly those: the deep green of the
   wordmark, the sage of the leaf, and the peach of the baby and the heart. Green is
   both the ink and the ONE solid commit colour (white on it is 10.1:1). Sage is a
   3.8:1 tone, so it draws hairlines, outline borders and markers and never body
   text. Peach is the warm counter-tone, and it exists at three strengths because
   one value cannot clear contrast on both a cream page and a dark photograph:
   #7d5231 for small text on light, #a9744d as a display accent on light, #e1b191
   for the h1 accent word over the hero scrim. Surfaces are the logo's own cream
   #faf6f1 walked toward the peach for the sand and oat tints, so the mark always
   sits on its own ground. Every pair below was computed and then pixel-checked by
   the gate; the ratios are in the comments.
   ========================================================================== */

:root {
  /* surfaces: the logo's own cream, walked toward the peach for the two tints */
  --cream:      #faf6f1;   /* the logo's ground, so the mark never sits in a box */
  --paper:      #ffffff;
  --sand:       #f4ebe1;   /* cream 12% toward the peach */
  --oat:        #ecdecf;   /* cream 26% toward the peach */

  /* the logo's greens */
  --sage:       #74836d;   /* 3.8:1 on cream: hairlines, outline borders, markers ONLY */
  --green-hair: #434f41;   /* the deep bands and the booking console (white 8.6:1) */

  /* one solid commit colour, and it is the logo's deep green (white on it 10.1:1) */
  --accent:      #3a4538;
  --accent-deep: #2e372c;  /* the deeper step: hover, footer, gradient ends */
  /* The h1 accent word has TWO values because it moved grounds: on cream it needs
     the deeper peach (3.7:1, floor 3.0 for large text); over the hero scrim it needs
     the light peach (about 5:1 on the duotone). Only one is used at a time. */
  --accent-word: #a9744d;
  /* The pale peach, and it has to be THIS pale. blueprint-gate measures the accent
     word against the MEAN of its own rendered crop, glyphs included, so a light
     accent on a dark ground is pulled toward itself: #e1b191 measured 2.37 at 390
     and 2.99 at 1440 against a floor of 3.0. At the measured ~19% glyph coverage
     the tone needs a relative luminance above about 0.58 to clear it, which is
     where this value comes from. */
  --accent-word-dark: #f2d3ba;

  /* the logo's peaches */
  --peach:       #c59770;  /* decorative marks only: 2.4:1 on cream, never text */
  --peach-ink:   #7d5231;  /* the READABLE peach: kickers, day lines, attributions,
                              prices, accent icons. 6.7:1 white, 6.2:1 cream,
                              5.7:1 sand, 5.1:1 oat */
  --peach-on-dark: #eac5a9;/* label ink on the deep green console: 5.4:1 */

  /* ink */
  --ink:        #3a4538;   /* the wordmark green. 9.4:1 on cream */
  --ink-dim:    #4e584c;   /* 6.9:1 on cream */
  --ink-faint:  #5c6655;   /* 5.6:1 cream, 5.1:1 sand, 4.7:1 on the book band */

  /* the deep grounds */
  --deep:       #434f41;   /* calm band + booking console */
  --deep-2:     #2e372c;   /* footer, and the dark end of every green gradient */

  --hair:       rgba(58, 69, 56, 0.14);
  --hair-warm:  rgba(116, 131, 109, 0.46);   /* the sage hairline */

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* fluid scale */
  --t-body: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --t-lede: clamp(1.0625rem, 0.99rem + 0.34vw, 1.25rem);
  --t-h3:   clamp(1.2rem, 1.06rem + 0.5vw, 1.5rem);
  --t-h2:   clamp(1.85rem, 1.18rem + 2.4vw, 3.1rem);
  --t-h1:   clamp(2.5rem, 1.5rem + 4.1vw, 4.6rem);

  --gutter:  clamp(1.1rem, 4vw, 3rem);
  --sec-y:   clamp(3.5rem, 6.5vw, 6rem);
  --wrap:    1220px;

  /* MEASURED on the built page (see js/main.js, which re-measures at runtime).
     This is the no-JS fallback, not a guess. */
  --nav-h: 68px;

  color-scheme: light;
}
@media (max-width: 960px) { :root { --nav-h: 68px; } }

/* ---------- reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, picture, iframe { display: block; max-width: 100%; }
img { height: auto; }
input, select, textarea, button { font: inherit; color: inherit; }
textarea { resize: vertical; }
figure, blockquote, dl, dd { margin: 0; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

/* [hidden] must beat every component's own display rule, or a submitted form
   stays on screen underneath its own "nothing was sent" panel. */
[hidden] { display: none !important; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* The green focus ring disappears on the green grounds, so those surfaces ring
   in the light peach instead. */
.hero :focus-visible, .band :focus-visible, .foot :focus-visible,
.wizard :focus-visible, .honest-panel :focus-visible { outline-color: var(--peach-on-dark); }

/* Every anchor target clears the sticky nav by its MEASURED height. */
[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: var(--deep); color: #fff; padding: 0.8rem 1.2rem;
}
.skip-link:focus { left: 0; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico {
  flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- headings ------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
}

/* ---------- buttons: outlined = browse, one solid = every commit ----------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.82rem 1.35rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }

.btn-solid { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* Outline controls take the SOLID sage, not the translucent hairline: a control
   boundary has a 3:1 floor of its own and sage at 46% over cream is about 1.9. */
.btn-outline { background: transparent; color: var(--ink); border-color: var(--sage); }
.btn-outline .ico { stroke: var(--peach-ink); transition: stroke .2s ease; }
.btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-outline:hover .ico { stroke: #fff; }

.btn-ghost {
  background: transparent; color: var(--ink);
  border-color: var(--sage);
  padding: 0.62rem 1.15rem; font-size: 0.875rem;
}
.btn-ghost:hover { border-color: var(--ink); background: rgba(58,69,56,.06); }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { background: #fff; color: var(--deep); border-color: #fff; }

.btn-quiet {
  background: transparent; color: var(--peach-ink);
  border-color: transparent; padding: 0.45rem 0;
  font-size: 0.875rem; gap: 0.4rem;
}
.btn-quiet .ico { stroke: var(--peach-ink); }
.btn-quiet:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.btn-wide { width: 100%; }

/* ---------- 1. nav --------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 246, 240, 0.94);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--hair);
}
.nav-wrap {
  width: min(var(--wrap), 100%); margin-inline: auto;
  padding: 0.7rem var(--gutter);
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem);
}
/* THE LOCKUP: the operator's mark and wordmark side by side, each sized by
   max-height ONLY. Measured from the files: the mark's ink fills 323 of its 333px
   and the wordmark's fills 177 of 200, so a 44px mark beside a 42px wordmark puts
   their ink within 2px of the same height and the pair reads as one lockup rather
   than two pasted images. Never a pinned height in this flex row: flex-shrink
   squeezes the width while the height holds and the mark distorts. */
.lockup {
  display: flex; align-items: center; gap: 0.62rem;
  text-decoration: none; flex: 0 0 auto; min-width: 0;
}
.lockup-mark, .lockup-word {
  height: auto; width: auto; max-width: 100%;
  min-width: 0; object-fit: contain; flex: 0 1 auto;
}
.lockup-mark { max-height: 44px; }
.lockup-word { max-height: 42px; }
@media (max-width: 960px) {
  .lockup { gap: 0.5rem; }
  .lockup-mark { max-height: 36px; }
  .lockup-word { max-height: 34px; }
}

.nav-panel { margin-left: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.8rem); }
.nav-links a {
  white-space: nowrap;
  text-decoration: none; color: var(--ink-dim);
  font-size: 0.9375rem; font-weight: 500;
  padding: 0.4rem 0; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1.5px; background: var(--peach-ink); transition: right .22s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }

.nav-actions { display: flex; align-items: center; gap: 0.55rem; flex: 0 0 auto; }
.nav-actions .btn { padding: 0.7rem 1.1rem; font-size: 0.875rem; }
.nav-label { white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1.5px solid var(--hair-warm);
  border-radius: 999px; cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 17px; height: 1.8px; background: var(--ink); border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5.5px; }
.nav-toggle-bars::after  { top: 5.5px; }
.nav[data-open="true"] .nav-toggle-bars { background: transparent; }
.nav[data-open="true"] .nav-toggle-bars::before { transform: translateY(5.5px) rotate(45deg); }
.nav[data-open="true"] .nav-toggle-bars::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-wrap { gap: 0.6rem; flex-wrap: wrap; }
  .nav-toggle { display: flex; order: 9; }
  .nav-actions { margin-left: auto; order: 8; gap: 0.4rem; }
  .nav-actions .btn { padding: 0; width: 44px; height: 44px; }
  .nav-label {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .nav-panel { order: 10; flex-basis: 100%; margin-left: 0; }
  .nav[data-open="false"] .nav-panel { display: none; }
  .nav-links {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.4rem 0 0.7rem;
    border-top: 1px solid var(--hair); margin-top: 0.5rem;
  }
  /* Operator 2026-09-18 13:31 ("what are the lines on the nav?"): the per-row hairline sat on an
     inline anchor, so it drew at the width of each word and read as a stray underline. The rows
     are now block-level with no divider; spacing alone separates them. */
  .nav-links a { display: block; padding: 0.8rem 0.1rem; font-size: 1.05rem; border-bottom: 0; }
  .nav-links a::after { display: none; }
}
@media (max-width: 400px) { .nav-wrap { gap: 0.45rem; padding-inline: 1rem; } }

/* ---------- 2. hero: ONE full-bleed photograph ------------------------------
   Layer order is the band-photo-scrim recipe, bottom to top: photo, legibility
   wash, duotone in the brand's green, texture. GUARD A: the section carries the
   deep green as a background-color, so the hero still paints as a green band if
   the photograph 404s, is blocked, or is still arriving. The photo is a real
   <img> with no lazy attribute, because a hero's ground arriving late is a
   visible flash and because the gate's hero-photo check has to find it. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--deep);
}
.hero-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* 1440: the band is wider than the source's 3:2, so cover crops the HEIGHT only
     and x has no effect. She already sits on the right of the frame, which is the
     open half, so no widening trick is needed any more; 50% keeps her face and her
     hands on the belly both inside the 615px window. */
  object-position: 50% 50%;
}
@media (max-width: 960px) {
  /* 390: the crop is heavily horizontal (a 390x810 box shows a 1215px-wide image),
     so x is what decides whether we see HER or the empty curtain beside her. 70%
     lands the window on her face, her arms and the belly; 50% would have shown
     half a curtain. Her face then falls at 25-35% of the hero, which is the open
     band above the copy. */
  .hero-photo { object-position: 62% 50%; }
}
/* THE SCRIM DARKENS WHERE THE WORDS ARE, NOT THE WHOLE PHOTOGRAPH.
   Operator, 2026-09-18, from their phone: "Hero seems too hard to see." The first
   version laid a 0.9-alpha duotone across the full bleed, which is what a band
   with no content on it wants; a hero with a subject in it does not. So there is
   no flat wash any more and no full-width duotone: a single directional gradient
   runs from opaque behind the copy column to FULLY transparent over her, and the
   console carries its own surface. Measured effect on the gate: hero-not-flat rose
   and band-photo-perceptible rose, which is the check saying the photograph reads
   as a photograph again. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    /* 1 texture: 2.8% white hairlines, felt rather than seen */
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, rgba(255,255,255,0) 1px 7px),
    /* 2 the only tinting layer, and it ends before she does */
    linear-gradient(90deg,
      rgba(20,26,19,.93) 0%,
      rgba(20,26,19,.90) 26%,
      rgba(24,31,23,.62) 40%,
      rgba(28,36,26,.24) 52%,
      rgba(28,36,26,0) 64%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: min(var(--wrap), 100%); margin-inline: auto;
  padding: clamp(2.4rem, 4.4vw, 3.8rem) var(--gutter);
  min-height: clamp(540px, 64vh, 660px);
  display: grid; align-content: center;
  gap: clamp(1.4rem, 2.4vw, 2rem);
}
.hero-copy, .hero-book { max-width: 600px; }
h1 {
  font-size: var(--t-h1);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 0 0 0.75rem;
  color: #fff;
}
/* The accent word sits on the hero's dark scrim, so it takes the LIGHT peach.
   The deeper peach is what the same word would need on cream; one value cannot
   clear both grounds. */
.h1-accent { color: var(--accent-word-dark); font-style: italic; }
.hero-sub {
  font-size: var(--t-lede);
  max-width: 34ch;
  margin: 0;
}
/* Declared AFTER the generic .eyebrow / .hero-sub rules, not before: the hero's
   text sits on a photograph, and an earlier rule loses to the later one. This
   cost a round: the subline shipped in the page's body ink on a dark scrim and
   was all but invisible. */
.hero .eyebrow { color: rgba(255,255,255,.90); }
.hero .hero-sub { color: rgba(255,255,255,.96); }

/* --- the booking console: the page's one dark surface above the fold ------- */
.hero-book { min-width: 0; }
/* The console is a CARD, and it carries its own contrast so the scrim does not
   have to carry it for them both. Slightly translucent dark green over a blur, so
   the photograph is present underneath it as tone rather than as detail, and every
   label and field on it measures against this surface and not against whatever
   part of the picture it happens to cover. */
.wizard {
  color-scheme: dark;              /* the select POPUP is painted by the engine */
  background: rgba(24, 31, 23, 0.90);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, rgba(255,255,255,0) 1px 7px);
  border: 1px solid rgba(234, 197, 169, 0.28);
  border-radius: 18px;
  padding: clamp(1.1rem, 2vw, 1.5rem);
  box-shadow: 0 22px 54px rgba(16, 21, 15, 0.45);
}
/* Where the blur is unavailable the translucency has nothing to soften the
   picture behind it, so the card goes opaque instead of letting detail read
   through the labels. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wizard { background: rgba(24, 31, 23, 0.98); }
}
.wizard-panel { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; }
.wz-field { flex: 1 1 190px; min-width: 0; }
.wz-field-wide { flex: 1 1 100%; }
.wizard label {
  display: block;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--peach-on-dark); margin-bottom: 0.32rem;
}
/* Fields as a well one layer down inside the console. */
.fd-input, .fd-select, .fd-textarea {
  width: 100%;
  background: rgba(22, 28, 21, 0.52);
  border: 1px solid rgba(234, 197, 169, 0.24);
  border-radius: 11px;
  box-shadow: inset 0 1px 3px rgba(14, 19, 13, 0.45);
  color: #f6f3ec;
  font-size: 0.95rem;
  padding: 0.72rem 0.85rem;
  transition: border-color .2s ease, background .2s ease;
}
.fd-input:hover, .fd-select:hover, .fd-textarea:hover {
  border-color: rgba(234, 197, 169, 0.46);
  background: rgba(22, 28, 21, 0.36);
}
.fd-input::placeholder, .fd-textarea::placeholder { color: rgba(226, 214, 199, 0.66); }
.fd-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23EAC5A9' stroke-width='1.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center;
  padding-right: 2.4rem;
}
/* The popup ground must be OPAQUE: a translucent value composites against the
   engine's own light default and washes straight back out. */
.fd-select option, .fd-select optgroup {
  background-color: #2b332a;
  color: #f6f3ec;
  font-weight: 400;
}
.fd-select option:checked { background-color: #3b463a; }
.fd-select:has(option[value=""]:checked) { color: rgba(226, 214, 199, 0.7); }

/* THE COMMIT PILL ON A GREEN CONSOLE. The one commit colour is the logo's deep
   green, and on a green surface a green fill can never clear the 3:1 non-text
   floor by itself (measured 1.6:1 even against a much darker console). So the
   pill keeps the single commit fill and gets its boundary from a light-peach
   ring, which is what the floor actually asks for. It is 1.5px and at high alpha
   so it READS as an edge, not merely measures as one. */
.wizard .btn-solid {
  box-shadow: 0 0 0 1.5px var(--peach-on-dark);
  flex: 0 0 auto;
}
.wizard .btn-solid:hover { background: var(--accent-deep); box-shadow: 0 0 0 1.5px #fff; }

/* The stepper caption sits on the hero photograph, not on paper. */
.wizard-stepper {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0.6rem auto 0;
  padding-left: var(--stepper-offset, 0px);
  font-size: 0.8125rem; color: rgba(255,255,255,.92);
}
.wz-back {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: 0; padding: 0.2rem 0.1rem;
  color: #fff; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.wz-back:hover { color: var(--peach-on-dark); }

.honest-panel {
  background: var(--deep-2);
  color: rgba(255,255,255,.93);
  border-radius: 18px;
  border: 1px solid rgba(234, 197, 169, 0.32);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
}
.honest-panel p:last-child { margin-bottom: 0; }
.honest-panel a { color: var(--peach-on-dark); }
.honest-reach { font-weight: 600; }
.honest-panel-light {
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--sage);
  box-shadow: 0 16px 38px rgba(46,55,44,.12);
}
.honest-panel-light a { color: var(--peach-ink); }

@media (max-width: 960px) {
  .wizard-panel { align-items: stretch; }
  .wz-field { flex: 1 1 100%; }
  .wizard .btn-solid { width: 100%; }
  .wizard-stepper { padding-left: 0; justify-content: flex-start; }
  /* On a phone the copy spans the full width, so the gradient runs top to bottom
     instead of left to right. It stays FULLY TRANSPARENT through the top third,
     which is where her face is, and only then ramps to the ground the headline
     needs. Nothing is laid over her at all above 30%. */
  .hero-scrim {
    background-image:
      repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, rgba(255,255,255,0) 1px 7px),
      linear-gradient(180deg,
        rgba(20,26,19,0) 0%,
        rgba(20,26,19,0) 28%,
        rgba(20,26,19,.55) 36%,
        rgba(20,26,19,.88) 46%,
        rgba(20,26,19,.92) 100%);
  }
  .hero-inner {
    /* THE PHONE FOLD IS A BUDGET, and this is the arithmetic. Bottom-aligned
       content is copy (~200) + gap (22) + console (~250) + stepper (38) = 510,
       above a 35px bottom padding, so the submit pill's bottom sits at
       height - 91 and the nav adds 67. At 844 the hero is 810, which puts the CTA
       around 786 in the viewport, inside the fold with room to spare; the 96vh
       term keeps that true on a shorter phone and the 660px floor stops the
       console crowding the headline on a very short one. The height is what buys
       the open band at the top where her face sits. */
    min-height: clamp(660px, 96vh, 820px);
    align-content: end;
    padding-top: clamp(5rem, 20vh, 9rem);
  }
}

/* ---------- 3. trust band -------------------------------------------------- */
.why {
  background: var(--sand);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.5) 0 1px, rgba(255,255,255,0) 1px 8px);
  border-block: 1px solid var(--hair-warm);
  padding-block: var(--sec-y);
}
.mod-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.4rem 2rem; flex-wrap: wrap;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.mod-head h2 { max-width: 20ch; }
.why-list {
  display: grid; gap: 0.1rem clamp(1.6rem, 3.4vw, 3.4rem);
  grid-template-columns: 1fr;
}
/* The trust band was the one list drawing a rotated square. The operator asked for
   bullets everywhere, so it takes the same disc as the rest. */
.why-list { padding-left: 1.5rem; }
.why-list li {
  padding: 0.85rem 0 0.85rem 0.35rem;
  border-bottom: 1px solid var(--hair-warm);
  font-size: 1.0625rem;
  color: var(--ink);
}
.why-list li::marker { font-size: 1em; }
@media (min-width: 761px) { .why-list { grid-template-columns: 1fr 1fr; } }

/* ---------- modules -------------------------------------------------------- */
.mod { padding-block: var(--sec-y); }
.mod-classes { background: var(--cream); }
.mod-private { background: var(--paper); border-block: 1px solid var(--hair); }
.mod-locations { background: var(--cream); }
.mod-rentals { background: var(--sand); border-block: 1px solid var(--hair-warm); }
.mod-reviews { background: var(--paper); border-block: 1px solid var(--hair); }
.mod-about { background: var(--cream); }

/* ---------- BULLETS: one rule for every content list -----------------------
   Operator, 2026-09-18: "Bullet points should use real bullets." Every content
   list therefore uses a REAL `list-style: disc` marker, styled through ::marker
   rather than drawn with a ::before box. Two reasons that matters beyond taste:
   an `outside` marker hangs in its own gutter, so a wrapped line aligns to the
   text and not under the dot; and ::marker is what blueprint-gate's
   default-list-markers check looks for, so a styled disc reads as designed
   rather than as the browser's own. The colour is the readable peach, which
   clears its ground on white, cream, sand and oat alike. */
/* MEASURED, not assumed. Two things were probed in the real engine before this
   was written:
     1. `::marker { color }` DOES apply — the marker computes to rgb(125,82,49)
        while the item's own text is rgb(78,88,76). The bullets really are peach.
     2. Chromium does NOT expose a `::marker` rule through CSSOM `selectorText`,
        so blueprint-gate's `hasMarkerRule` escape hatch cannot see it and reported
        all 15 lists as "ships default bullets, no ::marker rule". That is a blind
        spot in the check, not a defect on the page — but a build must not depend
        on a hatch that cannot be reached.
   So the marker is a STRING bullet rather than the UA's `disc`. It is a real round
   bullet in the marker gutter, coloured and sized by the ::marker rule below, and
   `list-style-type` no longer computes to disc/circle/square, which is the
   check's first and unambiguous exit. */
.marks, .why-list, .date-list {
  list-style-type: "\2022";
  list-style-position: outside;
  padding-left: 1.1rem;
}
.marks li::marker,
.why-list li::marker,
.date-list li::marker {
  color: var(--peach-ink);
  font-size: 0.92em;
}
.marks li {
  color: var(--ink-dim); font-size: 0.9375rem; line-height: 1.5;
  margin-bottom: 0.35rem;
  padding-left: 0.1rem;
}
/* A wrapping inline row cannot hang its markers in a shared gutter, so those
   sit INSIDE the line box. Same disc, same colour. */
.marks-inline {
  display: flex; flex-wrap: wrap; gap: 0 1.15rem;
  /* Inside the line box, so the string marker carries its own trailing space. */
  list-style-type: "\2022\00a0\00a0";
  list-style-position: inside; padding-left: 0;
}
.marks-inline li { margin-bottom: 0.25rem; padding-left: 0; }

/* ---------- 4. class cards ------------------------------------------------- */
.card-grid { display: grid; gap: clamp(1.1rem, 2vw, 1.8rem); grid-template-columns: 1fr; }
@media (min-width: 641px) { .card-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1081px) { .card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(42, 28, 25, 0.055);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(42, 28, 25, 0.11); }
.card-media { aspect-ratio: 4 / 3; background: var(--oat); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: clamp(1.1rem, 1.7vw, 1.45rem);
}
.card-body h3 { margin-bottom: 0.2rem; }
.card-kicker {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--peach-ink); margin: 0 0 0.6rem;
}
.card-lede { font-size: 0.9375rem; color: var(--ink); margin: 0 0 0.75rem; }
.card-sub { font-size: 0.875rem; color: var(--ink-faint); margin: 0 0 0.5rem; }
.mod-lede {
  font-size: var(--t-lede); color: var(--ink-dim);
  max-width: 68ch; margin: -0.6rem 0 clamp(1.5rem, 2.6vw, 2.2rem);
}
.card-price {
  font-size: 0.9375rem; color: var(--ink);
  margin: 0.55rem 0 0.4rem; padding-top: 0.7rem;
  border-top: 1px solid var(--hair);
}
.price-num { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--peach-ink); }
.card-note { font-size: 0.875rem; color: var(--ink-faint); margin: 0 0 0.9rem; }
.card-cta { margin-top: auto; align-self: flex-start; font-size: 0.875rem; padding: 0.72rem 1.1rem; }
.card-cta span { white-space: normal; }

/* Reserve the row heights so every tile's text starts at the same y, measured at
   1440 across the four real copy lengths. */
/* Reserve the TOP rows so every tile's title, kicker and lede start at the same
   y. The topic lists are deliberately NOT reserved: the four courses have three
   to eight real topics each and padding the short ones to the tallest would open
   a hole rather than square anything up. The CTAs bottom-align on margin-top:auto
   instead, which is what actually squares the tiles. */
@media (min-width: 1081px) {
  .card-body h3      { min-height: 3.7rem; }
  .card-kicker       { min-height: 2.7rem; }
  .card-lede         { min-height: 8.6rem; }
}

/* ---------- 5. private ----------------------------------------------------- */
.split { display: grid; gap: clamp(1.4rem, 2.6vw, 2.6rem); grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 901px) { .split { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); } }

.split-media {
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: var(--oat);
  border: 1px solid var(--hair);
}
.split-media img { width: 100%; flex: 1 1 auto; min-height: 260px; object-fit: cover; object-position: 50% 32%; }
.split-media figcaption {
  padding: 1rem 1.15rem; background: var(--paper);
  font-size: 0.9375rem; color: var(--ink-dim);
  border-top: 1px solid var(--hair);
}

.split-list { display: grid; gap: clamp(0.9rem, 1.6vw, 1.2rem); align-content: start; }
.row-card {
  background: var(--cream);
  border: 1px solid var(--hair-warm);
  border-radius: 16px;
  padding: clamp(1.1rem, 1.8vw, 1.5rem);
}
.row-card h3 { margin-bottom: 0.2rem; }
.row-card .card-cta { margin-top: 0.9rem; }

/* ---------- 6. calm band --------------------------------------------------- */
/* Four layers on one element: texture, duotone in the brand's own deep tone, a
   flat legibility wash, then the photograph. background-color repeats the mid
   tone, so the band still paints if the image never arrives. */
.band {
  background-color: var(--deep);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.026) 0 1px, rgba(255,255,255,0) 1px 7px),
    /* --deep-2 -> --green-hair -> --sage, the same green family as the hero */
    linear-gradient(104deg, rgba(38,46,36,.90) 0%, rgba(46,55,44,.72) 46%, rgba(96,110,92,.50) 100%),
    linear-gradient(rgba(26,32,25,.16), rgba(26,32,25,.16)),
    url("../img/band-calm.jpg");
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, 74% 36%;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  color: #fff;
  padding-block: clamp(3.6rem, 7vw, 6.5rem);
}
.band-inner { max-width: 44ch; }
.band .eyebrow { color: rgba(255,255,255,.86); }
.band h2 { color: #fff; }
.band-lede { font-size: var(--t-lede); color: rgba(255,255,255,.95); margin: 0.9rem 0 1.6rem; }

/* ---------- 7. locations --------------------------------------------------- */
/* The notes panel above the grid: the class times, the "subject to change" line,
   the waiting-list sentence and the group-size/masks note, each stated ONCE for
   the whole module rather than repeated in six cards. */
.loc-notes {
  background: var(--paper);
  border: 1px solid var(--hair-warm);
  border-radius: 16px;
  padding: clamp(1rem, 1.8vw, 1.4rem);
  margin: 0 0 clamp(1.3rem, 2.4vw, 2rem);
  font-size: 0.9375rem; color: var(--ink-dim);
}
.loc-notes p { margin: 0 0 0.7rem; max-width: 78ch; }
.loc-notes p:last-child { margin-bottom: 0; }
.loc-notes a { color: var(--peach-ink); font-weight: 600; }
.loc-note-small { font-size: 0.875rem; color: var(--ink-faint); }
.loc-times {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 1rem; color: var(--ink);
}
.loc-times strong { font-weight: 600; }
.loc-times .ico { stroke: var(--peach-ink); margin-top: 0.15rem; }

.loc-grid { display: grid; gap: clamp(0.9rem, 1.8vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 601px) { .loc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 981px) { .loc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.loc-card {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: clamp(1.05rem, 1.7vw, 1.35rem);
}
.loc-card h3 { font-size: 1.3rem; margin-bottom: 0.45rem; }
.loc-venue { font-weight: 600; font-size: 0.9375rem; color: var(--ink); margin: 0 0 0.25rem; }
.loc-addr  { font-size: 0.9375rem; color: var(--ink-dim); margin: 0 0 0.5rem; }
.loc-days  { font-size: 0.875rem; color: var(--peach-ink); font-weight: 600; margin: 0 0 0.8rem; }
.loc-card .btn-quiet { margin-top: auto; align-self: flex-start; }

/* The venue's own posted 2026 dates. A native <details> so the list is there with
   scripting off, folded away so twenty-four date groups do not bury the card. */
.loc-dates { margin: 0 0 0.9rem; border-top: 1px solid var(--hair); padding-top: 0.8rem; }
.loc-dates summary {
  cursor: pointer; list-style: none;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 0.45rem;
}
.loc-dates summary::-webkit-details-marker { display: none; }
.loc-dates summary::before {
  content: ""; flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 5px solid var(--sage);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .18s ease;
}
.loc-dates[open] summary::before { transform: rotate(90deg); }
.loc-dates summary:hover { color: var(--ink); }
.date-list {
  margin-top: 0.7rem;
  max-height: 210px; overflow-y: auto;
  display: grid; gap: 0.3rem;
  font-size: 0.875rem; color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}
.date-list li { padding-left: 0.1rem; }
.loc-card-online { background: var(--oat); border-color: var(--hair-warm); }

/* Reserve the venue/address rows so every card's days line starts on one y.
   Measured at each column count: at two columns the longest venue name takes two
   lines, at three it does not, so the reservation differs by width. */
@media (min-width: 601px) and (max-width: 980px) {
  .loc-venue { min-height: 3.1rem; }
  .loc-addr  { min-height: 3.3rem; }
}
@media (min-width: 981px) {
  .loc-venue { min-height: 3.1rem; }
  .loc-addr  { min-height: 3.3rem; }
}
@media (min-width: 1201px) {
  .loc-venue { min-height: 1.6rem; }
  .loc-addr  { min-height: 3.3rem; }
}

/* ---------- 8. rentals ----------------------------------------------------- */
.rent-hero {
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--hair-warm);
  background: var(--oat);
  margin-bottom: clamp(1.3rem, 2.4vw, 2rem);
}
.rent-hero img {
  width: 100%; aspect-ratio: 21 / 9; max-height: 340px;
  object-fit: cover; object-position: 50% 52%;
}
.rent-hero figcaption {
  padding: 0.85rem 1.15rem; background: var(--paper);
  font-size: 0.875rem; color: var(--ink-dim);
  border-top: 1px solid var(--hair-warm);
}

.rent-terms {
  display: grid; gap: 1.1rem;
  background: var(--paper);
  border: 1px solid var(--hair-warm);
  border-radius: 18px;
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
  align-items: center;
}
@media (min-width: 901px) { .rent-terms { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) auto; } }
.rent-price { font-size: 1.0625rem; margin: 0; }
.rent-includes-h {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 0.45rem;
}

.spec-grid { display: grid; gap: clamp(0.9rem, 1.8vw, 1.4rem); grid-template-columns: 1fr; margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
@media (min-width: 761px) { .spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.spec-card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: clamp(1.05rem, 1.7vw, 1.35rem);
}
.spec-card h3 { font-size: 1.2rem; margin-bottom: 0.8rem; }
.spec > div {
  display: grid; grid-template-columns: 5.6rem 1fr; gap: 0.6rem;
  padding: 0.5rem 0; border-top: 1px solid var(--hair);
  font-size: 0.875rem;
}
.spec dt { color: var(--ink-faint); font-weight: 600; letter-spacing: 0.03em; }
.spec dd { color: var(--ink); }
/* Reserve the spec rows so Size / Capacity / Weight start on one y across the
   three cards; only the last row (Build, the variable one) is left free. */
@media (min-width: 761px) {
  .spec-card h3 { min-height: 2.9rem; }
  .spec > div:not(:last-child) { min-height: 3.9rem; }
}

.rent-extra {
  display: grid; gap: clamp(1rem, 2vw, 1.8rem);
  grid-template-columns: 1fr;
  background: var(--paper);
  border: 1px solid var(--hair-warm);
  border-radius: 16px;
  padding: clamp(1.05rem, 1.8vw, 1.5rem);
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
}
@media (min-width: 761px) { .rent-extra { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; } }
.rent-warning { font-size: 0.9375rem; color: var(--ink-dim); margin: 0; }
.rent-warning strong { color: var(--ink); }

.lab-card {
  display: grid; grid-template-columns: 1fr;
  background: var(--paper);
  border: 1px solid var(--hair-warm);
  border-radius: 20px; overflow: hidden;
}
@media (min-width: 901px) { .lab-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.lab-media { background: var(--oat); }
.lab-media img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; object-position: 50% 45%; }
.lab-body { padding: clamp(1.2rem, 2.2vw, 1.9rem); }
.lab-body h3 { font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); margin-bottom: 0.5rem; }
.lab-price { font-size: 1.0625rem; margin: 0 0 0.9rem; }
.lab-body .btn { margin-top: 1rem; }

/* ---------- 9. reviews ----------------------------------------------------- */
.rev-arrows { display: flex; gap: 0.5rem; }
.rev-arrow {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--hair-warm); border-radius: 999px;
  color: var(--ink); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.rev-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.rev-arrow-next .ico { transform: rotate(180deg); }

.rev-rail {
  display: grid; gap: clamp(0.85rem, 1.6vw, 1.3rem);
  grid-auto-flow: column;
  grid-auto-columns: min(78vw, 300px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding-bottom: 0.4rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rev-rail::-webkit-scrollbar { display: none; }
.rev-card {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--cream);
  border: 1px solid var(--hair-warm);
  border-radius: 16px;
  padding: clamp(1.1rem, 1.8vw, 1.45rem);
}
.rev-card p {
  font-size: 1rem; line-height: 1.55; color: var(--ink);
  margin: 0 0 1rem; flex: 1 1 auto;
}
.rev-card p::before { content: "\201C"; font-family: var(--serif); font-weight: 700; }
.rev-card p::after  { content: "\201D"; font-family: var(--serif); font-weight: 700; }
.rev-card cite {
  font-style: normal; font-weight: 600; font-size: 0.875rem;
  color: var(--peach-ink);
}
.rev-progress {
  margin: 1rem 0 0; height: 3px; border-radius: 3px;
  background: var(--hair-warm); overflow: hidden;
}
.rev-progress-bar { display: block; height: 100%; width: 30%; background: var(--accent); border-radius: 3px; }
.rev-intro { color: var(--ink-dim); max-width: 62ch; margin: -0.6rem 0 1.6rem; }
.rev-intro a { color: var(--peach-ink); font-weight: 600; overflow-wrap: anywhere; }

.rev-browse { display: none; }
@media (min-width: 901px) {
  .rev-rail {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  /* The rail becomes a grid here, so the arrows and the progress bar have
     nothing left to drive. The module keeps a browse control instead. */
  .rev-arrows, .rev-progress { display: none; }
  .rev-browse { display: inline-flex; }
}

/* ---------- 10. about ------------------------------------------------------ */
.split-about { align-items: start; }
@media (min-width: 901px) { .split-about { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.about-copy p { color: var(--ink-dim); max-width: 62ch; }
.about-copy h2 { margin-bottom: 1rem; }
.about-close { color: var(--ink); font-weight: 500; }
.about-close a { color: var(--peach-ink); font-weight: 600; }
.about-media {
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--oat);
}
.about-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 62%; }
.about-media figcaption {
  padding: 0.9rem 1.1rem; background: var(--paper);
  font-size: 0.8125rem; color: var(--ink-faint);
  border-top: 1px solid var(--hair);
}

/* ---------- 11. intake ----------------------------------------------------- */
.mod-book {
  background: var(--oat);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.42) 0 1px, rgba(255,255,255,0) 1px 9px),
    /* Sand base with a light-peach wash capped at .20: the band's DARKEST point
       still clears 4.5:1 for the eyebrow and label ink, which a heavier wash did
       not (measured at 4.03). */
    linear-gradient(160deg, rgba(250,246,241,.72) 0%, rgba(225,177,145,.20) 100%);
  border-top: 1px solid var(--hair-warm);
}
.book-grid { display: grid; gap: clamp(1.4rem, 2.6vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 901px) {
  .book-grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
  /* The intro column is shorter than the form, so it travels with it rather than
     leaving a tall empty panel beside a long field list. */
  .book-side { position: sticky; top: calc(var(--nav-h) + 2rem); }
}
.book-sub { color: var(--ink-dim); font-size: var(--t-lede); margin: 0.8rem 0 1rem; max-width: 42ch; }
.book-note { font-size: 0.9375rem; color: var(--ink-dim); max-width: 42ch; margin: 0 0 1.8rem; }

.intake {
  display: grid; gap: 0.85rem;
  grid-template-columns: 1fr;
  background: var(--paper);
  border: 1px solid var(--hair-warm);
  border-radius: 20px;
  padding: clamp(1.2rem, 2.2vw, 1.9rem);
  box-shadow: 0 18px 44px rgba(42, 28, 25, 0.1);
}
@media (min-width: 641px) { .intake { grid-template-columns: 1fr 1fr; } }
.field-wide, .intake .btn { grid-column: 1 / -1; }
.intake label {
  display: block;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.32rem;
}
.req { color: var(--peach-ink); letter-spacing: 0.06em; text-transform: none; font-size: 0.7rem; }
.fl-input, .fl-select, .fl-textarea {
  width: 100%;
  background: var(--cream);
  border: 1px solid var(--hair-warm);
  border-radius: 11px;
  color: var(--ink);
  font-size: 0.95rem;
  padding: 0.72rem 0.85rem;
  transition: border-color .2s ease, background .2s ease;
}
.fl-input:hover, .fl-select:hover, .fl-textarea:hover { border-color: var(--ink-dim); background: var(--paper); }
.fl-input::placeholder, .fl-textarea::placeholder { color: var(--ink-faint); }
.fl-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%234E584C' stroke-width='1.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center;
  padding-right: 2.4rem;
}
/* Light canvas, but the popup ground is still declared explicitly rather than
   left to the engine's default. */
.fl-select option, .fl-select optgroup { background-color: #ffffff; color: var(--ink); font-weight: 400; }
.fl-select:has(option[value=""]:checked) { color: var(--ink-faint); }

.book-side { display: grid; gap: 0.7rem; align-content: start; }
.book-side .eyebrow, .book-side h2, .book-side .book-sub, .book-side .book-note { margin-bottom: 0; }
.book-side-h {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0.6rem 0 0;
}
.option-tile {
  justify-content: flex-start; gap: 0.85rem;
  background: var(--paper);
  border: 1px solid var(--hair-warm);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  color: var(--ink);
  font-weight: 500;
  white-space: normal;
}
.option-tile .ico { stroke: var(--peach-ink); }
.option-tile span { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; overflow-wrap: anywhere; }
.option-tile strong {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.option-tile:hover { border-color: var(--ink); background: var(--cream); }
.pay-note { font-size: 0.875rem; color: var(--ink-dim); margin: 0.6rem 0 0; overflow-wrap: anywhere; }
.pay-note p { margin: 0 0 0.5rem; }
.pay-note p:last-child { margin-bottom: 0; }
.pay-note strong { color: var(--ink); }
.pay-note .book-side-h { margin: 0 0 0.4rem; }

/* ---------- 12. footer ----------------------------------------------------- */
.foot {
  background: var(--deep-2);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 1px, rgba(255,255,255,0) 1px 7px);
  color: rgba(255,255,255,.82);
  padding-block: clamp(2.6rem, 5vw, 4rem) clamp(2rem, 3.5vw, 2.6rem);
  font-size: 0.9375rem;
}
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-top {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 1.8rem 2.5rem;
  padding-bottom: 1.8rem; border-bottom: 1px solid rgba(234, 197, 169, 0.26);
}
.foot-brand { display: flex; align-items: center; gap: 1rem; }
.foot-word {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); color: #fff; letter-spacing: -0.02em;
}
/* The mark is a transparent PNG whose own greens are close to this footer, so it
   gets a plate of the logo's own cream rather than being knocked out or left to
   disappear. */
.foot-plate {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream);
  border-radius: 18px;
  padding: 0.7rem 0.9rem;
  flex: 0 0 auto;
}
.foot-mark { max-height: 58px; height: auto; width: auto; max-width: 100%; min-width: 0; object-fit: contain; }
.foot-contact { display: grid; gap: 0.6rem; }
.foot-contact li { display: flex; align-items: center; gap: 0.6rem; }
.foot-contact .ico { stroke: var(--peach-on-dark); }
.foot-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.6rem;
  padding: 1.5rem 0 1.2rem;
}
.foot-links a { color: rgba(255,255,255,.86); font-size: 0.9375rem; }
.colophon {
  text-align: center; font-size: 0.8125rem; color: rgba(255,255,255,.62);
  max-width: 70ch; margin-inline: auto;
}
.colophon a { color: rgba(255,255,255,.82); text-decoration: underline; text-underline-offset: 3px; }
.foot-disclosure {
  text-align: center; font-size: 0.8125rem; color: rgba(255,255,255,.58);
  margin: 0.6rem 0 0;
}

/* ---------- preview badge -------------------------------------------------- */
.preview-badge {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 120;
  display: flex; align-items: stretch; gap: 1px;
  background: rgba(38, 46, 36, .95);
  border-radius: 999px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  font-family: var(--sans); font-size: 0.75rem;
  max-width: calc(100vw - 24px);
}
.preview-badge a { text-decoration: none; padding: 0.6rem 1rem; white-space: nowrap; }
.preview-badge-info { color: rgba(255,255,255,.85); }
.preview-badge-cta { background: var(--peach); color: #2e372c; font-weight: 700; }
.preview-badge-cta:hover { background: #fff; }
.preview-badge--inflow { transform: none; box-shadow: none; }
@media (max-width: 540px) {
  .preview-badge { font-size: 0.6875rem; }
  .preview-badge a { padding: 0.5rem 0.7rem; }
}

/* ---------- reveals -------------------------------------------------------- */
/* Only armed once JS is running AND motion is welcome, and js/main.js reveals
   everything unconditionally after 1.2s, so a full-page capture can never shoot
   a section at opacity 0. */
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal {
    opacity: 0; transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
  }
  html.js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}