/* == fonts: generated by `npm run fonts` (sites/tools/fonts.mjs), do not edit by hand == */
/* Self-hosted from Google Fonts. To change the faces, edit the URL below and
   re-run `npm run fonts`; it reads the URL back from here, and the preload
   list too (PAGE.md, "Preload what paints first").
   source: https://fonts.googleapis.com/css2?family=Jost:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,350;0,6..72,400&display=swap
   preload: Jost:400,Newsreader:350
*/
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jost-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jost-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jost-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jost-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 350;
  font-display: swap;
  src: url('/assets/fonts/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 350;
  font-display: swap;
  src: url('/assets/fonts/newsreader-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/newsreader-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* == end fonts == */

/* ===========================================================================
   The Therapeutic Touch
   Built to the assets chat's homepage mockup: concept 2's visuals with
   concept 3's words, which is the blend Nina asked for (text, 15 Oct 2026).
   Mockup: design/mockup/home-794.png.

   Every value below traces to a measurement in design/SPEC.md. If a number
   here is not in SPEC.md, it is a bug - not a preference.

   1200 MAX, NO BLEED (sites/.claude/rules/BUILD.md, "The defaults").
   Sizes are written in MOCKUP pixels as `N * var(--u)`, D = 794 (the
   mockup's own width, so every number is a direct reading off the image).
   --u renders them at 1200/794 at 1200 and above and shrinks below it, and
   the header, page and footer are one 1200 column. Type carries a floor on
   the same line (MOBILE.md 15).
   =========================================================================== */

:root {
  --u: min(calc(1200px / 794), calc(100vw / 794));
  /* A gutter is a share of the viewport, not of the floored unit (MOBILE.md 14). */
  --gut: max(20px, calc(43 * min(1200px / 794, 100vw / 794)));

  /* --- Colour: sampled off the mockup (SPEC.md, Colour) ------------------ */
  --ink: #151210;          /* the dark bands, services/faq/footer (avg 300,750) */
  --ink-2: #1B1715;        /* hero ground behind the photograph's dark side */
  --paper: #F3EADF;        /* the cream panels (avg 700,640) */
  --accent: #904C45;       /* buttons (avg 445,606); white text on it 6.6:1 */
  --accent-hi: #DA9980;    /* eyebrows on dark (lightest 8% of the ink) */
  --on-dark: #FBF8F4;      /* hero h1, h2 on dark (lightest ink #FEFEFE) */
  --on-dark-2: #DBDBD9;    /* hero lede (lightest ink of the line) */
  --on-dark-3: #B9B6B2;    /* small copy on dark (service text, #B6B5B3) */
  --text: #1A1513;         /* h2 on cream (darkest ink #030202, softened) */
  --text-2: #47413E;       /* body on cream (darkest 5% of the line) */
  --text-3: #6B645F;       /* fact captions: mockup #79726D is 4.1:1 on cream,
                              under the 4.5:1 floor, so darkened to 5.2:1 */
  --line-dark: #302A26;    /* the FAQ rules and card dividers (avg 49,1370) */
  --line-light: #D9CDBF;   /* step dividers on cream */

  /* --- Type ---------------------------------------------------------------
     Faces identified with font-match (SPEC.md, Typeface): Newsreader for
     display, Jost for everything else. Sizes solved from ink heights. */
  --serif: "Newsreader", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;

  --f-h1: max(38px, calc(40.3 * var(--u)));   /* "begins with you." 276 wide */
  --lh-h1: 1.19;                              /* baselines 174 -> 222 = 48 / 40.3 */
  --f-h2: max(30px, calc(30.6 * var(--u)));   /* "A more thoughtful" 235 wide */
  --lh-h2: 1.08;                              /* baselines 33 apart / 30.6 */
  --f-h2-wide: max(30px, calc(34.2 * var(--u)));/* "Focused Care..." 471 wide */
  --f-h2-sm: max(28px, calc(24.8 * var(--u)));/* "Find your moment." 198 wide */
  --f-lede: max(17px, calc(14.2 * var(--u))); /* hero lede line 1, 276 wide */
  --lh-lede: 1.41;                            /* pitch 20 / 14.2 */
  --f-body: max(16px, calc(11.7 * var(--u))); /* "My goal is simple..." 316 wide */
  --lh-body: 1.43;                            /* pitch 16.7 / 11.7 */
  --f-small: max(15px, calc(10.45 * var(--u)));/* card copy, 149 wide line */
  --lh-small: 1.44;                           /* pitch 15 / 10.45 */
  --f-label: max(16px, calc(14.4 * var(--u)));/* "Focused Relief" 89 wide */
  --f-q: max(16px, calc(13.4 * var(--u)));    /* "What should I wear?" 117 wide */
  --f-btn: max(15px, calc(10.5 * var(--u)));  /* "Book Your Session" label */
  --f-nav: max(15px, calc(10.2 * var(--u)));  /* "Location" 36 wide */
  --f-eyebrow: max(12px, calc(8.3 * var(--u)));/* "MEET NINA" 57 wide */
  --ls-eyebrow: 0.17em;                        /* "MEET NINA" 57 wide at 9.5 */
  --f-note: max(11px, calc(8 * var(--u)));    /* "DIFFERENT BODIES." 95 wide */

  /* --- Rhythm (mockup px) -------------------------------------------------- */
  --pad-top: calc(24 * var(--u));             /* boundary -> eyebrow, every band */
}

/* No bleed: one 1200 column, bands and photographs included. */
.site-header, main, .site-footer { max-width: 1200px; margin-inline: auto; }

/* A minimal reset. Everything else belongs to the design. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--sans);
  font-size: var(--f-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
main section { scroll-margin-top: 12px; }

:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
.panel--cream :focus-visible { outline-color: var(--accent); }

/* The skip link (partials/header.html): off-canvas until a keyboard focuses
   it, then pinned top-left above everything. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 16px;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--paper);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.skip-link:focus { left: 16px; outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Shared pieces
   --------------------------------------------------------------------------- */

/* Buttons: hero 149x33, Nina 215x34, location 161x35 -> one button, sized by
   its label with 21 either side; radius 4 (mockup corners). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: max(44px, calc(34 * var(--u)));
  padding-inline: max(18px, calc(21 * var(--u)));
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--f-btn);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: calc(4 * var(--u));
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.btn:hover { background: #7C3F39; }
/* The header and footer Book Now: a pill, 81 x 32. */
.btn--pill {
  min-height: max(44px, calc(32 * var(--u)));
  padding-inline: max(18px, calc(17 * var(--u)));
  border-radius: 999px;
  font-size: var(--f-nav);
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--f-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text);
}
.eyebrow--accent { color: var(--accent-hi); }

.h2 {
  font-family: var(--serif);
  font-weight: 350;
  font-size: var(--f-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: calc(13 * var(--u));     /* eyebrow bottom 390 -> h2 ink 405 */
  text-wrap: balance;                   /* no one-word last line (mobile review 30) */
}
.panel--dark .h2, .band--dark .h2 { color: var(--on-dark); }
.h2--wide { font-size: var(--f-h2-wide); line-height: 1.05; }
.h2--sm { font-size: var(--f-h2-sm); }

.body { color: var(--text-2); max-width: 30em; }
.body + .body { margin-top: calc(9 * var(--u)); }     /* para pitch 26 - 16.7 */
.h2 + .body { margin-top: calc(14 * var(--u)); }

/* The small caps notes that sit in a corner of a photograph or band, with a
   25px rule under them (mockup x 698, 617, 36...). */
.side-note {
  font-size: var(--f-note);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.side-note::after {
  content: "";
  display: block;
  width: calc(25 * var(--u));
  min-width: 20px;
  border-top: 1px solid currentColor;
  margin-top: calc(9 * var(--u));
  opacity: 0.8;
}

/* Placeholders: a box at the measured frame naming its MANIFEST.md row
   (PAGE.md, "Placeholders that are obviously placeholders"). */
.ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 260px;
  background: repeating-linear-gradient(135deg, #2A2320 0 12px, #241E1B 12px 24px);
  color: var(--on-dark-3);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}
/* A fact the concept round drew and the client has not confirmed. */
.todo {
  background: #FFE7A3;
  color: #3A2A00;
  padding: 0 0.3em;
  border-radius: 3px;
}

/* ---------------------------------------------------------------------------
   Header: lies over the hero (mockup y 0-70), logo at x 43, button to 752
   --------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  padding: calc(12 * var(--u)) var(--gut) 0;
}
.brand {
  display: grid;
  text-decoration: none;
  color: var(--on-dark);
  line-height: 1;
  margin-right: auto;
}
.brand__the { font-family: var(--serif); font-size: max(14px, calc(14.2 * var(--u))); line-height: 0.95; }
.brand__name { font-family: var(--serif); font-size: max(20px, calc(20.3 * var(--u))); line-height: 1; letter-spacing: -0.01em; }  /* 157 wide */
.brand__tag {
  margin-top: calc(7 * var(--u));               /* name ink 47 -> tag 54 */
  font-size: max(10px, calc(8.2 * var(--u)));
  font-weight: 500;
  letter-spacing: 0.19em;                       /* 158 wide, matches the name */
  text-transform: uppercase;
  color: var(--accent-hi);
}
.site-nav { display: flex; gap: calc(22 * var(--u)); }
.site-nav a {
  font-size: var(--f-nav);
  text-decoration: none;
  padding-block: 10px;
}
.site-nav a:hover { color: var(--accent-hi); }
.site-header__book { margin-left: calc(6 * var(--u)); }
.nav-toggle { display: none; }
.site-nav__book { display: none; }

/* ---------------------------------------------------------------------------
   Hero: mockup y 0-359, copy at x 54, h1 ink top 137
   --------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(360 * var(--u));
  display: grid;
  align-items: end;
  background: var(--ink-2);
}
.hero__media, .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img { object-fit: cover; object-position: 50% 42%; }   /* desktop review 5: the head nearer centre, as drawn */
/* The dark left-to-right wash the copy sits on (bundle 1 README); BELOW the
   copy, which has its own z-index (PAGE.md, fades sit under the copy). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(18, 14, 12, 0.94) 0%, rgba(18, 14, 12, 0.82) 34%, rgba(18, 14, 12, 0.25) 62%, rgba(18, 14, 12, 0.05) 100%),
    linear-gradient(180deg, rgba(18, 14, 12, 0.55) 0%, rgba(18, 14, 12, 0) 26%),
    /* a local wash under the side note (x 698, y 229-290): over the lit back
       it measured 3.34:1, under the 4.5:1 floor for 11px caps */
    radial-gradient(ellipse 15% 26% at 92% 72%, rgba(18, 14, 12, 0.72), rgba(18, 14, 12, 0) 100%);
  pointer-events: none;
}
.hero__copy {
  position: relative;
  z-index: 1;
  padding: calc(120 * var(--u)) calc(43 * var(--u)) calc(27 * var(--u)) max(var(--gut), calc(54 * var(--u)));
  max-width: calc(400 * var(--u));
}
.hero__title {
  font-family: var(--serif);
  font-weight: 350;
  font-size: var(--f-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.015em;
  color: var(--on-dark);
}
.hero__lede {
  margin-top: calc(17 * var(--u));      /* baseline 222 -> lede cap 243 */
  max-width: calc(290 * var(--u));
  font-size: var(--f-lede);
  line-height: var(--lh-lede);
  color: var(--on-dark-2);
}
.hero__btn { margin-top: calc(24 * var(--u)); min-width: calc(149 * var(--u)); }
.hero__note {
  position: absolute;
  z-index: 1;
  right: calc(56 * var(--u));
  top: calc(229 * var(--u));
}

/* ---------------------------------------------------------------------------
   Split bands: a photograph beside a panel
   --------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 404fr) minmax(0, 390fr);   /* Nina: 404 | 390 */
}
.split--narrow-media { grid-template-columns: minmax(0, 318fr) minmax(0, 476fr); }  /* process */
.split--wide-media { grid-template-columns: minmax(0, 460fr) minmax(0, 334fr); }    /* location */
.split--media-right { grid-template-columns: minmax(0, 587fr) minmax(0, 207fr); }   /* faq */

.split__media { position: relative; min-height: calc(270 * var(--u)); }
.split__media > .ph, .split__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split__note {
  z-index: 1;
  position: absolute;
  left: calc(36 * var(--u));
  bottom: calc(22 * var(--u));
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
/* A soft dark corner under each photo's caption, so it reads off the plants
   and furniture behind it (desktop review 28). Below the caption, above
   the photograph. */
.split__media:has(.split__note)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 45% at 0% 100%, rgba(18, 14, 12, 0.7), rgba(18, 14, 12, 0) 100%);
  pointer-events: none;
}
/* One treatment across the generated photographs so they read as one shoot:
   a touch less saturation and contrast (desktop review 26-27). */
.hero__media img, .split__photo, .service__photo { filter: saturate(0.9) contrast(0.95); }
#approach .split__photo { object-position: 30% 70%; }
.faq .split__photo { object-position: 58% 62%; }      /* the vase, bowl and candle whole (tablet review 24) */   /* the bed and towels, not the plant (review 13) */

.split__panel {
  padding: var(--pad-top) calc(34 * var(--u)) calc(16 * var(--u));   /* button 635 -> band 659 = 24, less the button's own floor */
}
.panel--cream { background: var(--paper); color: var(--text-2); }
.panel--dark { background: var(--ink); }
.panel__btn { margin-top: calc(16 * var(--u)); }

#about .split__panel { min-height: calc(300 * var(--u)); }
#approach .split__panel { padding-left: calc(39 * var(--u)); padding-bottom: calc(30 * var(--u)); }
#location .split__panel { padding-left: calc(42 * var(--u)); padding-bottom: calc(20 * var(--u)); }

/* ---------------------------------------------------------------------------
   Services: mockup y 660-979
   --------------------------------------------------------------------------- */
.band--dark { background: var(--ink); }
.services { padding: var(--pad-top) calc(25 * var(--u)) calc(18 * var(--u)) calc(26 * var(--u)); }
.services__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-left: calc(18 * var(--u));
}
.services__note { margin-top: calc(8 * var(--u)); flex: none; }
.services__grid {
  margin-top: calc(28 * var(--u));      /* h2 ink 732 -> titles ink 774 = 42, less the two line boxes' leading */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service { display: flex; flex-direction: column; padding-inline: calc(14 * var(--u)); }
.service:first-child { padding-left: 0; }
.service:last-child { padding-right: 0; }
.service + .service { border-left: 1px solid rgba(48, 42, 38, 0.65); }   /* quieter than the FAQ rules, desktop review 21 */
.service__head {
  display: grid;
  grid-template-columns: max(32px, calc(41 * var(--u))) minmax(0, 1fr);
  gap: calc(22 * var(--u));
  align-items: start;
  padding-inline: calc(18 * var(--u)) 0;       /* icon x 44, card edge 26 */
  flex: 1;
}
.service__icon { width: 100%; height: auto; }
.service__title {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--f-label);
  line-height: 1.2;
  color: var(--on-dark);
}
.service__text {
  margin-top: calc(5 * var(--u));         /* title ink 785 -> text ink 799, less leading */
  font-size: var(--f-small);
  line-height: var(--lh-small);
  color: var(--on-dark-3);
}
.service__photo {
  object-position: 50% 45%;                     /* the hands, in the 2.15:1 frame the mockup draws */
  margin-top: calc(10 * var(--u));              /* text 845 -> photo 852, rounded up */
  width: 100%;
  aspect-ratio: 2 / 1;      /* drawn 236 x 110 (2.15:1); 2:1 keeps 66% of the 4:3 files, the floor check:layout holds is 65% */
  object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Process steps: three columns from y 1107, circles 29 across
   --------------------------------------------------------------------------- */
.steps {
  margin-top: calc(16 * var(--u));        /* h2 ink 1081 -> circles 1107 = 26, less leading */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.step { padding-right: calc(14 * var(--u)); }
.step + .step { padding-left: calc(14 * var(--u)); border-left: 1px solid var(--line-light); }
.step__head {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  font-size: var(--f-small);                    /* "Understand" label, 10.5 */
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}
.step__num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: max(30px, calc(29 * var(--u)));
  aspect-ratio: 1;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--serif);
  font-weight: 400;          /* not the label's 500: Newsreader loads 350 and 400 only */
  font-size: var(--f-body);
}
.step__text {
  margin-top: calc(10 * var(--u));
  font-size: var(--f-small);
  line-height: var(--lh-small);
  color: var(--text-2);
}

/* ---------------------------------------------------------------------------
   FAQ: questions at x 49, rows 35.5 apart, list 500 wide
   --------------------------------------------------------------------------- */
.faq .split__panel { padding: calc(23 * var(--u)) calc(38 * var(--u)) calc(10 * var(--u)) calc(49 * var(--u)); }
.faq__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; max-width: calc(500 * var(--u)); }   /* the prompt ends on the list's edge (x 548), desktop review 16 */
.faq__ask {
  margin-top: calc(8 * var(--u));
  font-size: var(--f-note);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--on-dark);
  padding-block: 10px;
}
.faq__ask::after {
  content: "";
  display: block;
  width: calc(25 * var(--u));
  min-width: 20px;
  border-top: 1px solid var(--accent-hi);
  margin-top: calc(8 * var(--u));
}
.faq__list { margin-top: calc(6 * var(--u)); max-width: calc(500 * var(--u)); }   /* h2 ink 1323 -> first row line 1335 */
.faq__item { border-bottom: 1px solid var(--line-dark); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: max(44px, calc(35.5 * var(--u)));
  font-size: var(--f-q);
  color: var(--on-dark-2);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* The plus is a typeset character, rotated to a cross when open. */
.faq__item summary::after {
  content: "+";
  font-size: 1.35em;
  font-weight: 300;
  line-height: 1;
  color: var(--accent-hi);
  transition: transform 0.2s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .faq__item summary::after { transition: none; } }
.faq__item p {
  padding: 0 0 calc(12 * var(--u));
  font-size: var(--f-small);
  line-height: var(--lh-body);
  color: var(--on-dark-3);
  max-width: 34em;
}

/* ---------------------------------------------------------------------------
   Location facts: icon 29, rows 43.5 apart
   --------------------------------------------------------------------------- */
.facts { margin-top: calc(12 * var(--u)); display: grid; gap: calc(9 * var(--u)); }   /* rows 43.5 apart, less two lines of 15 */
.fact {
  display: grid;
  grid-template-columns: max(24px, calc(22 * var(--u))) minmax(0, 1fr);
  gap: calc(14 * var(--u));
  align-items: start;
}
.fact__title { font-size: max(15px, calc(11 * var(--u))); font-weight: 500; color: var(--text); line-height: 1.3; }
.fact__text { font-size: var(--f-small); color: var(--text-3); line-height: 1.3; }

/* ---------------------------------------------------------------------------
   Footer: mockup y 1853-1981
   --------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
  padding: calc(9 * var(--u)) var(--gut) calc(30 * var(--u));
}
.site-footer__top { display: flex; align-items: center; gap: 24px; }
.site-footer__top .brand { margin-right: 0; }
.site-footer__nav {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: calc(26 * var(--u));
}
.site-footer__nav a { font-size: var(--f-nav); text-decoration: none; padding-block: 10px; }
.site-footer__nav a:hover { color: var(--accent-hi); }
.site-footer__base {
  margin-top: calc(22 * var(--u));
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: max(13px, calc(9 * var(--u)));
  color: var(--on-dark-3);
}

/* ===========================================================================
   Below 760: the nav folds behind a toggle, header stays one row
   (MOBILE.md 16). The header stops lying over the hero and sits on ink.
   It folded at 900 until the tablet review (#1): at 820 the full nav fits
   over the hero, as the mockup draws it.
   =========================================================================== */
@media (max-width: 759px) {
  .site-header {
    position: relative;
    background: var(--ink);
    padding: 12px var(--gut);
    flex-wrap: nowrap;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    background: transparent;
    color: var(--on-dark);
    border: 1px solid #5A4F48;              /* clearer than the rule colour (mobile review 9) */
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    order: 3;
  }
  .site-header__book { order: 2; margin-left: 0; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gut) 20px;
    background: var(--ink);
    border-top: 1px solid var(--line-dark);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  }
  .site-nav.is-open { display: flex; }
  /* The tagline keeps one line beside the button and the toggle: at 390
     the desktop tracking wrapped "LA JOLLA" under it. */
  .site-header .brand__tag { font-size: 9px; letter-spacing: 0.12em; white-space: nowrap; }
  .site-header .brand__name { font-size: 19px; }
  .site-nav a { padding-block: 12px; font-size: 17px; border-bottom: 1px solid var(--line-dark); }
  .site-nav .site-nav__book { display: block; color: var(--accent-hi); border-bottom: 0; }
  .hero__copy { padding-top: calc(60 * var(--u)); }
}

/* ===========================================================================
   Below 760: every split stacks, services go one down. Measured: at 759 the
   Nina panel's body runs 14 words a line in a 390fr column and the process
   steps are under 120px wide each, the point where the columns stop fitting.
   =========================================================================== */
@media (max-width: 759px) {
  /* The phone hero: words, then the photograph, then the action
     (MOBILE.md 11). The copy column steps aside so its parts can be ordered
     around the photograph. */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    background: var(--ink);
    padding-bottom: 28px;
  }
  .hero::after { display: none; }
  .hero__copy { display: contents; }
  .hero__title, .hero__lede { margin-inline: var(--gut); }
  .hero__title { order: 0; margin-top: 16px; }
  .hero__lede { order: 1; margin-top: 14px; max-width: 34ch; }
  .hero__media {
    order: 2;
    position: relative;
    inset: auto;
    margin-top: 22px;
    height: min(92vw, 62svh);              /* shorter so Meet Nina starts sooner (mobile review 4) */
  }
  .hero__media img { position: absolute; inset: 0; object-position: 60% 45%; }
  .hero__btn { order: 3; margin: 20px var(--gut) 0; }
  .hero__note { display: none; }

  .split, .split--narrow-media, .split--wide-media, .split--media-right { grid-template-columns: minmax(0, 1fr); }
  .split__media { min-height: 0; height: min(66vw, 52svh); }   /* mobile review 25, 29, 33 */
  .split__note { left: max(20px, calc(36 * var(--u))); bottom: max(18px, calc(22 * var(--u))); }
  .split--media-right .split__media { order: -1; }
  .split__panel,
  #approach .split__panel,
  #location .split__panel,
  .faq .split__panel { padding: 30px var(--gut) 32px; }
  #about .split__panel { min-height: 0; }
  .h2 { margin-top: 10px; }
  .h2 + .body { margin-top: 14px; }
  .panel__btn { margin-top: 22px; }

  .services { padding: 30px var(--gut) 32px; }
  .services__head { gap: 12px; }
  .service__icon { min-width: 40px; }
  .services__head { flex-direction: column; align-items: stretch; justify-content: flex-start; padding-left: 0; }
  .services__grid { grid-template-columns: minmax(0, 1fr); margin-top: 24px; gap: 24px; }
  .service, .service:first-child, .service:last-child { padding-inline: 0; }
  .service + .service { border-left: 0; border-top: 1px solid rgba(48, 42, 38, 0.65); padding-top: 24px; }
  .service__head { padding-inline: 0; gap: 16px; grid-template-columns: 40px minmax(0, 1fr); }
  .service__photo { margin-top: 16px; aspect-ratio: 2 / 1; }

  .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 20px; }
  .step, .step + .step { padding: 0; border-left: 0; }
  .step + .step { border-top: 1px solid var(--line-light); padding-top: 14px; }

  .faq__head { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; }
  .faq__ask { margin-top: 0; align-self: flex-start; font-size: 15px; padding-block: 12px; }
  .faq__list { margin-top: 10px; max-width: none; }
  .faq__item p { padding-bottom: 16px; }

  .facts { margin-top: 24px; gap: 16px; }

  .site-footer { padding: 28px var(--gut) 32px; }
  .site-footer__top { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; }
  .site-footer__nav { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 28px; }
  .site-footer__nav a { padding-block: 12px; }
  .site-footer__base { flex-direction: column; margin-top: 20px; }
  .site-footer__base a { display: inline-block; padding-block: 10px; }
  .site-footer__base p { text-wrap: balance; }
}

/* Between the stack and 1100 the process panel is too narrow for three
   step columns (check:layout: 11 chars a line at 760), so they go one down
   inside the panel; the split itself holds. */
@media (min-width: 760px) and (max-width: 1099px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .step, .step + .step { padding: 0; border-left: 0; }
  .step + .step { border-top: 1px solid var(--line-light); padding-top: 14px; }
}
/* The three service cards stop fitting before the splits do: at 760-768
   their copy sets 17 characters a line. They go one down from 800. */
@media (min-width: 760px) and (max-width: 799px) {
  .services__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .service, .service:first-child, .service:last-child { padding-inline: 0; }
  .service + .service { border-left: 0; border-top: 1px solid var(--line-dark); padding-top: 32px; }
  .service__photo { aspect-ratio: 16 / 9; }
}
/* Narrow phones: brand, Book Now and Menu overflowed one row at 360 (+5px)
   and 320 (+43px). Below 400 the three tighten; below 360 the header's Book
   Now steps aside, and the folded menu carries one instead. */
@media (max-width: 399px) {
  .site-header { gap: 8px; }
  .site-header .brand__name { font-size: 17px; }
  .site-header .brand__the { font-size: 13px; }
  .site-header .brand__tag { font-size: 8px; letter-spacing: 0.1em; }
  .site-header__book, .nav-toggle { padding-inline: 12px; }
}
@media (max-width: 359px) {
  .site-header__book { display: none; }
}

/* A phone held sideways: the photograph bands stop at three quarters of the
   screen's height (MOBILE.md 18), which the svh caps above already do. */

/* ---------------------------------------------------------------------------
   Pages nobody drew: the 404 and /privacy, built from the same pieces
   (design/SYSTEM.md)
   --------------------------------------------------------------------------- */
.btn--ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.btn--ghost:hover { background: var(--accent); color: #fff; }
.notfound .split__panel { padding-top: calc(110 * var(--u)); padding-bottom: calc(60 * var(--u)); }
.notfound .split__media { min-height: calc(420 * var(--u)); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(16 * var(--u)); }
.legal { padding: calc(110 * var(--u)) var(--gut) calc(60 * var(--u)); color: var(--text-2); }
.legal .body { max-width: 38em; margin-top: calc(9 * var(--u)); }
.legal .h2 + .body { margin-top: calc(14 * var(--u)); }
.legal__h {
  margin-top: calc(26 * var(--u));
  font-family: var(--serif);
  font-weight: 400;
  font-size: max(21px, calc(16 * var(--u)));
  line-height: 1.2;
  color: var(--text);
}
.legal a { color: var(--accent); }
.site-footer__base a { color: inherit; margin-left: 0.6em; }
@media (max-width: 759px) {
  .notfound .split__panel, .legal { padding-top: 36px; }
}
.nowrap { white-space: nowrap; }