/* Bridging Dimensions v02: shared stylesheet for the inner-page mockups.
   Every value comes from design-tokens/tokens.css (+ tokens-delta.css). The pages are responsive:
   view them at 1440 px (desktop) and 390 px (mobile). The breakpoint is 768 px, as in v01. */

/* Bridging Dimensions: design tokens
   Source of truth for colour, type, spacing, radius, shadow and motion.
   Every value below is taken from the approved mockups in /mockups. */

:root {
  /* Colour: core */
  --color-ink:            #1F3340; /* dusk navy: body text, headings, dark buttons' text */
  --color-ink-soft:       #4A5E6B; /* paragraph text on light backgrounds */
  --color-ink-muted:      #53646F; /* captions, meta, attributions */
  --color-ink-faint:      #5A6470; /* fine print, copyright, placeholder notes */

  --color-turquoise:      #2A7476; /* Terri Lee's colour: links, icons, eyebrows, form button */
  --color-turquoise-dark: #1F5C5E; /* link/button hover */
  --color-turquoise-mist: #EAF4F2; /* section background */
  --color-turquoise-tint: #DDEFEC; /* icon discs */
  --color-turquoise-pale: #CDEBE8; /* eyebrow text on the hero image */

  --color-lavender:       #5F5794; /* eyebrows and step labels in lavender sections */
  --color-lavender-line:  #C9C3E3; /* hairlines in lavender sections */
  --color-lavender-mist:  #F1EFF8; /* section background */
  --color-lavender-tint:  #ECE9F6; /* icon discs */

  --color-candle:         #FBF3E4; /* primary CTA background (on dark backgrounds) */
  --color-candle-glow:    #F2C98C; /* warm glow in gradients and CTA shadow */
  --color-candle-tint:    #F8EBD6; /* icon discs */
  --color-candle-deep:    #9A6A2E; /* icon stroke on candle tint */

  --color-ground:         #F8F5EF; /* page background (warm ivory) */
  --color-ground-deep:    #EFEBE3; /* footer background */
  --color-surface:        #FFFFFF; /* cards, form */
  --color-field:          #FBFAF7; /* input background */
  --color-line:           #DCE4E3; /* FAQ dividers */
  --color-line-card:      #E3ECEA; /* divider inside cards */
  --color-line-field:     #CFDAD8; /* input borders */
  --color-line-footer:    #E2DCD1;

  /* Colour: gradients */
  --gradient-hero-scrim-x: linear-gradient(90deg, rgba(18,34,46,.80) 0%, rgba(18,34,46,.52) 42%, rgba(18,34,46,.05) 78%);
  --gradient-hero-scrim-y: linear-gradient(180deg, rgba(18,34,46,.45) 0%, rgba(18,34,46,0) 22%, rgba(18,34,46,0) 80%, rgba(248,245,239,.20) 100%);
  --gradient-hero-scrim-mobile: linear-gradient(180deg, rgba(18,34,46,.55) 0%, rgba(18,34,46,.05) 26%, rgba(18,34,46,.25) 48%, rgba(18,34,46,.85) 100%);
  --gradient-dusk: radial-gradient(70% 120% at 88% 10%, rgba(242,201,140,.35) 0%, rgba(242,201,140,0) 55%),
                   linear-gradient(135deg, #1F3A4A 0%, #2A6468 55%, #3F8E8D 100%); /* booking band */
  --gradient-video: radial-gradient(120% 90% at 78% 22%, rgba(242,201,140,.45) 0%, rgba(242,201,140,0) 45%),
                    linear-gradient(140deg, #24404F 0%, #2F6A70 60%, #5BA7A5 100%); /* video placeholder / poster */
  --gradient-ground-to-mist: linear-gradient(180deg, #F8F5EF 0%, #EAF4F2 100%);
  --gradient-mist-to-lavender: linear-gradient(180deg, #EAF4F2 0%, #F1EFF8 100%);

  /* Type */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;   /* Google Fonts: opsz 6..72, wght 300/400/500, ital */
  --font-body:    'Nunito Sans', system-ui, -apple-system, sans-serif; /* Google Fonts: wght 400/500/600 */

  --text-hero:      300 72px/1.06 var(--font-display);  /* mobile: 42px/1.1 */
  --text-h2:        300 52px/1.1  var(--font-display);  /* mobile: 36px/1.12 */
  --text-h2-band:   300 54px/1.1  var(--font-display);  /* booking band; mobile 36px */
  --text-h3:        400 28px/1.2  var(--font-display);  /* card titles; mobile 25px */
  --text-step:      400 26px/1.25 var(--font-display);  /* first-session steps; mobile 23px */
  --text-faq-q:     400 28px/1.3  var(--font-display);  /* mobile 23px */
  --text-quote:     italic 300 23px/1.5 var(--font-display); /* mobile 21px */
  --text-price:     400 34px/1 var(--font-display);     /* mobile 30px */
  --text-lead:      400 20px/1.6 var(--font-body);      /* hero sub-line; mobile 17px/1.55 */
  --text-body-lg:   400 18px/1.65 var(--font-body);     /* section intros */
  --text-body:      400 17px/1.65 var(--font-body);     /* mobile 16px */
  --text-small:     400 15px/1.5 var(--font-body);
  --text-fine:      400 13px/1.5 var(--font-body);
  --text-eyebrow:   600 13px/1.4 var(--font-body);      /* uppercase, letter-spacing .22em; mobile 12px, .2em */

  /* Spacing */
  --space-section-y: 128px;  /* mobile: 80px */
  --space-gutter-x:  64px;   /* mobile: 20px */
  --space-content-max: 1200px;
  --space-grid-gap:  32px;   /* card grids */
  --space-col-gap:   80px;   /* two-column sections */
  --space-card-pad:  44px 40px; /* mobile: 30px 26px */

  /* Radius */
  --radius-card:   28px;  /* mobile 24px */
  --radius-band:   36px;  /* booking band; mobile 28px */
  --radius-video:  28px;  /* mobile 22px */
  --radius-field:  14px;
  --radius-pill:   999px;

  /* Shadow */
  --shadow-card:  0 24px 60px -32px rgba(31,51,64,.28);
  --shadow-video: 0 30px 70px -30px rgba(31,51,64,.45);
  --shadow-cta-glow: 0 12px 40px -12px rgba(242,201,140,.6);

  /* Motion: keep everything slow and gentle; never bounce */
  --ease-calm: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 900ms;
}

/* Bridging Dimensions: v02 token delta
   Load AFTER tokens.css. v02 adds as little as possible: everything else reuses v01 tokens unchanged.
   These two error colours were already specified in the v01 HANDOFF.md (contact form states);
   v02 promotes them to tokens because the booking flow uses them too. */

:root {
  --color-error-line: #B4483C; /* input border in an error state (5.3:1 on #FFFFFF) */
  --color-error-text: #8E3A30; /* error message text (7.5:1 on #FFFFFF) */
}


@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/newsreader-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300; font-display: swap; src: url("/assets/fonts/newsreader-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/newsreader-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/newsreader-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-ground); color: var(--color-ink); font: var(--text-body); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--color-turquoise); }
a:hover { color: var(--color-turquoise-dark); }
:focus-visible { outline: 3px solid var(--color-turquoise); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible { outline-color: var(--color-candle); }

.skip { position: absolute; left: -9999px; top: 12px; background: var(--color-surface); padding: 12px 20px; border-radius: var(--radius-pill); z-index: 10; }
.skip:focus { left: 12px; }

/* Layout */
.wrap { max-width: calc(var(--space-content-max) + 2 * var(--space-gutter-x)); margin: 0 auto; padding: 0 var(--space-gutter-x); }
.narrow { max-width: 760px; }
.section { padding: var(--space-section-y) 0; }
.section-tight { padding: 88px 0; }
.bg-ground { background: var(--color-ground); }
.bg-deep { background: var(--color-ground-deep); }
.bg-mist { background: var(--color-turquoise-mist); }
.bg-lav { background: var(--color-lavender-mist); }
.bg-ground-mist { background: var(--gradient-ground-to-mist); }
.bg-mist-lav { background: var(--gradient-mist-to-lavender); }
.bg-lav-ground { background: linear-gradient(180deg, var(--color-lavender-mist) 0%, var(--color-ground) 100%); }
.stack > * + * { margin-top: 22px; }
.stack-sm > * + * { margin-top: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-grid-gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-grid-gap); }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-col-gap); align-items: center; }
.split-4-8 { display: grid; grid-template-columns: 4fr 8fr; gap: var(--space-col-gap); align-items: start; }
.center { text-align: center; }
.center .lead, .center .body-lg { margin-left: auto; margin-right: auto; }

/* Type */
.eyebrow { font: var(--text-eyebrow); text-transform: uppercase; letter-spacing: .22em; color: var(--color-turquoise); }
.eyebrow.lav { color: var(--color-lavender); }
.h1 { font: 300 64px/1.08 var(--font-display); letter-spacing: -0.01em; }
.h2 { font: var(--text-h2); }
.h3 { font: var(--text-h3); }
.lead { font: var(--text-lead); color: var(--color-ink-soft); max-width: 620px; }
.body-lg { font: var(--text-body-lg); color: var(--color-ink-soft); max-width: 640px; }
.soft { color: var(--color-ink-soft); }
.muted { color: var(--color-ink-muted); font: var(--text-small); }
.fine { font: var(--text-fine); color: var(--color-ink-faint); }
.placeholder { font: var(--text-fine); color: var(--color-ink-faint); }
.link-arrow { font-weight: 600; text-decoration: none; }
nav.stack > a { display: block; }
.link-underline { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 16px 34px; border-radius: var(--radius-pill); border: 0; font: 600 17px/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease-calm), box-shadow var(--dur-fast) var(--ease-calm), background var(--dur-fast) var(--ease-calm); }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-turquoise); color: #FFFFFF; }
.btn-primary:hover { background: var(--color-turquoise-dark); color: #FFFFFF; }
.btn-candle { background: var(--color-candle); color: var(--color-ink); box-shadow: var(--shadow-cta-glow); }
.btn-candle:hover { color: var(--color-ink); }
.btn-quiet { background: transparent; color: var(--color-ink); border: 1px solid var(--color-line-field); }
.btn-quiet:hover { color: var(--color-ink); border-color: var(--color-ink-muted); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* Nav: the v01 "scrolled" (solid ivory) state is the resting state on inner pages */
.site-nav { position: sticky; top: 0; z-index: 5; background: rgba(248,245,239,.94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(31,51,64,.06); }
.site-nav .wrap { height: 96px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { color: var(--color-ink); text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; }
.wordmark:hover { color: var(--color-ink); }
.wordmark b { font: 400 26px/1.1 var(--font-display); letter-spacing: .01em; }
.wordmark small { font: 400 12px/1.2 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--color-ink-muted); margin-top: 4px; }
.nav-links { display: flex; align-items: center; gap: 36px; list-style: none; padding: 0; font: var(--text-small); }
.nav-links a { color: var(--color-ink); text-decoration: none; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--color-line-field); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--color-turquoise); color: var(--color-ink); font-weight: 600; }
.nav-links .btn { min-height: 46px; padding: 12px 24px; font-size: 15px; color: #FFFFFF; border-bottom: 0; }
.nav-links .btn:hover { color: #FFFFFF; }
.nav-links .btn[aria-current="page"] { border-bottom: 0; color: #FFFFFF; }
.menu-btn { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--color-line-field); background: var(--color-surface); align-items: center; justify-content: center; cursor: pointer; }

/* Page header (inner pages) */
.page-head { padding: 104px 0 112px; }
.page-head .h1 { max-width: 880px; }
.page-head .lead { margin-top: 24px; }

/* Cards */
.card { background: var(--color-surface); border-radius: var(--radius-card); padding: var(--space-card-pad); box-shadow: var(--shadow-card); }
.card-flat { background: rgba(255,255,255,.6); border-radius: var(--radius-card); padding: var(--space-card-pad); border: 1px solid rgba(31,51,64,.06); }
.icon-disc { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.icon-disc svg { width: 26px; height: 26px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.disc-tq { background: var(--color-turquoise-tint); } .disc-tq svg { stroke: var(--color-turquoise); }
.disc-lav { background: var(--color-lavender-tint); } .disc-lav svg { stroke: var(--color-lavender); }
.disc-candle { background: var(--color-candle-tint); } .disc-candle svg { stroke: var(--color-candle-deep); }
.card-row { display: flex; flex-direction: column; gap: 18px; height: 100%; }
.hairline { border: 0; border-top: 1px solid var(--color-line-card); margin: 0; }

/* Photo placeholders (portraits come from the client) */
.photo { position: relative; border-radius: var(--radius-card); overflow: hidden; background: radial-gradient(90% 70% at 70% 20%, rgba(242,201,140,.35) 0%, rgba(242,201,140,0) 60%), linear-gradient(160deg, var(--color-turquoise-tint) 0%, var(--color-lavender-tint) 100%); display: flex; align-items: flex-end; }
.photo span { margin: 22px; padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,.8); font: var(--text-fine); color: var(--color-ink-muted); }
.photo svg { position: absolute; left: 50%; top: 44%; width: 64px; height: 64px; transform: translate(-50%, -50%); fill: none; stroke: rgba(31,51,64,.25); stroke-width: 1.2; }

/* Pull-quote */
.pull { font: italic 300 58px/1.18 var(--font-display); letter-spacing: -0.01em; max-width: 980px; text-wrap: balance; }
.pull-attr { margin-top: 28px; font: var(--text-body-lg); color: var(--color-ink-muted); }

/* Numbered lavender journey */
.journey { list-style: none; padding: 0; counter-reset: step; position: relative; }
.journey::before { content: ""; position: absolute; left: 31px; top: 36px; bottom: 36px; width: 1px; background: var(--color-lavender-line); }
.journey li { counter-increment: step; position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 36px; padding: 0 0 56px; }
.journey li:last-child { padding-bottom: 0; }
.journey li::before { content: counter(step); width: 64px; height: 64px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-lavender-line); display: flex; align-items: center; justify-content: center; font: italic 300 28px/1 var(--font-display); color: var(--color-lavender); position: relative; z-index: 1; box-shadow: 0 10px 30px -18px rgba(95,87,148,.5); }
.journey h3 { font: var(--text-step); padding-top: 12px; }
.journey p { color: var(--color-ink-soft); margin-top: 10px; max-width: 620px; }
.journey .aside { margin-top: 18px; padding: 18px 22px; border-radius: 18px; background: rgba(255,255,255,.65); color: var(--color-ink-soft); font: var(--text-small); max-width: 620px; }

/* FAQ accordion */
.faq-group + .faq-group { margin-top: 96px; }
.faq { border-bottom: 1px solid var(--color-line); }
.faq details { border-top: 1px solid var(--color-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 0; font: var(--text-faq-q); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 1.6px solid var(--color-turquoise); border-bottom: 1.6px solid var(--color-turquoise); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--dur-base) var(--ease-calm); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq .answer { padding: 0 64px 34px 0; color: var(--color-ink-soft); max-width: 760px; }
.faq .answer > * + * { margin-top: 14px; }

/* Kind words */
.quote-wall { column-count: 3; column-gap: var(--space-grid-gap); }
.quote-wall figure { break-inside: avoid; margin: 0 0 var(--space-grid-gap); }
.quote-card { background: var(--color-surface); border-radius: var(--radius-card); padding: 36px 34px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 20px; }
.quote-card blockquote { font: var(--text-quote); }
.quote-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: var(--text-small); color: var(--color-ink-muted); }
.tag { display: inline-block; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-candle-tint); color: var(--color-ink-soft); font: 600 11px/1.4 var(--font-body); letter-spacing: .08em; white-space: nowrap; }
.story { display: grid; grid-template-columns: 5fr 7fr; border-radius: 36px; overflow: hidden; background: var(--color-surface); box-shadow: var(--shadow-card); }
.story + .story { margin-top: 40px; }
.story-side { padding: 56px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.story-side.tq { background: linear-gradient(0deg, rgba(31,51,64,.45) 0%, rgba(31,51,64,0) 70%), var(--gradient-video); color: #FFFFFF; }
.story-side.candle { background: radial-gradient(90% 80% at 20% 10%, rgba(242,201,140,.55) 0%, rgba(242,201,140,0) 60%), linear-gradient(160deg, #F8EBD6 0%, #F1EFF8 100%); }
.story-side .kicker { font: var(--text-eyebrow); letter-spacing: .22em; text-transform: uppercase; }
.story-side.tq .kicker { color: var(--color-turquoise-pale); }
.story-side.candle .kicker { color: var(--color-lavender); }
.story-side .big { font: italic 300 40px/1.2 var(--font-display); }
.story-body { padding: 56px 56px; }
.story-body > * + * { margin-top: 18px; }
.story-body p { color: var(--color-ink-soft); }

/* Dusk booking band (v01) */
.band { border-radius: var(--radius-band); padding: 88px 80px; color: #FFFFFF; background: var(--gradient-dusk); display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.band .h2 { font: var(--text-h2-band); }
.band ul { list-style: none; padding: 0; margin-top: 22px; color: #E6F1F0; font: var(--text-body-lg); }
.band li + li { margin-top: 10px; }
.band .ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.band .link-underline { color: #FFFFFF; }

/* Footer (v01, with the cleaner cardinal) */
.site-footer { background: var(--color-ground-deep); border-top: 1px solid var(--color-line-footer); padding: 72px 0 56px; }
.footer-grid { display: grid; grid-template-columns: 6fr 3fr 3fr; gap: 48px; align-items: start; }
.footer-brand { display: flex; gap: 22px; align-items: flex-end; }
.footer-brand .name { font: 400 28px/1.2 var(--font-display); }
.footer-brand .name i { font-weight: 300; }
.footer-brand img { width: 52px; height: auto; margin-bottom: 2px; }
.footer-col { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font: var(--text-small); }
.footer-col a { text-decoration: none; }
.footer-col.ink a { color: var(--color-ink); }
.footer-copy { margin-top: 48px; font: var(--text-fine); color: var(--color-ink-faint); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field legend { font: 600 15px/1.4 var(--font-body); padding: 0; }
.field .hint { font: var(--text-small); color: var(--color-ink-muted); margin-top: -2px; }
.input, .textarea { width: 100%; min-height: 52px; padding: 14px 18px; border: 1px solid var(--color-line-field); border-radius: var(--radius-field); background: var(--color-field); font: var(--text-body); color: var(--color-ink); }
.textarea { resize: vertical; min-height: 140px; }
.input:focus, .textarea:focus { outline: 3px solid rgba(42,116,118,.25); border-color: var(--color-turquoise); outline-offset: 0; }
.field.is-error .input { border-color: var(--color-error-line); }
.field .error { display: flex; gap: 8px; align-items: center; font: var(--text-small); color: var(--color-error-text); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 22px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-field); background: var(--color-field); font: var(--text-small); }
.choice input:checked + span { border-color: var(--color-turquoise); background: var(--color-turquoise-mist); font-weight: 600; box-shadow: inset 0 0 0 1px var(--color-turquoise); }
.choice input:focus-visible + span { outline: 3px solid var(--color-turquoise); outline-offset: 3px; }

/* Booking flow */
.book-head { background: var(--color-ground); border-bottom: 1px solid rgba(31,51,64,.06); }
.book-head .wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.book-head .back { font: var(--text-small); color: var(--color-ink-muted); text-decoration: none; }
.stepper { list-style: none; padding: 0; display: flex; gap: 12px; align-items: center; font: var(--text-small); color: var(--color-ink-muted); }
.stepper li { display: flex; align-items: center; gap: 10px; }
.stepper li + li::before { content: ""; width: 40px; height: 1px; background: var(--color-line-field); margin-right: 2px; }
.stepper .dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-line-field); display: inline-flex; align-items: center; justify-content: center; font: 600 13px/1 var(--font-body); background: var(--color-surface); }
.stepper .done .dot { background: var(--color-turquoise-tint); border-color: var(--color-turquoise-tint); color: var(--color-turquoise); }
.stepper [aria-current="step"] { color: var(--color-ink); font-weight: 600; }
.stepper [aria-current="step"] .dot { background: var(--color-turquoise); border-color: var(--color-turquoise); color: #FFFFFF; }
.stepper-mobile { display: none; }
.book-main { padding: 72px 0 120px; }
.book-grid { display: grid; grid-template-columns: 8fr 4fr; gap: 56px; align-items: start; }
.book-title { font: 300 48px/1.1 var(--font-display); }
.summary { position: sticky; top: 24px; }
.offer { padding: 64px; display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.avail { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-lavender-line); }
.avail > div { padding: 28px 0; border-bottom: 1px solid var(--color-lavender-line); }
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font: var(--text-small); }
.summary dt { color: var(--color-ink-muted); }
.summary dd { text-align: right; }
.summary .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; border-top: 1px solid var(--color-line-card); }
.summary .total b { font: var(--text-price); font-weight: 400; }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-head .h3 { font-size: 26px; }
.cal-nav { display: flex; gap: 8px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-line-field); background: var(--color-surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-ink); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn[disabled] { opacity: .4; cursor: not-allowed; }
.calendar { width: 100%; border-collapse: separate; border-spacing: 6px; margin-top: 18px; table-layout: fixed; }
.calendar th { font: 600 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-muted); padding: 8px 0; }
.calendar td { text-align: center; padding: 0; }
.day { width: 100%; aspect-ratio: 1 / 1; max-height: 64px; border-radius: 16px; border: 0; background: transparent; font: 400 17px/1 var(--font-body); color: var(--color-ink-faint); }
.day.open { background: var(--color-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line-card); cursor: pointer; position: relative; }
.day.open::after { content: ""; position: absolute; left: 50%; bottom: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-turquoise); transform: translateX(-50%); }
.day.open:hover { box-shadow: inset 0 0 0 1px var(--color-turquoise); }
.day.selected { background: var(--color-turquoise); color: #FFFFFF; box-shadow: none; font-weight: 600; }
.day.selected::after { background: #FFFFFF; }
.day.today { text-decoration: underline; text-underline-offset: 4px; }
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.slot { min-height: 52px; border-radius: var(--radius-pill); border: 1px solid var(--color-line-field); background: var(--color-surface); font: 600 16px/1 var(--font-body); color: var(--color-ink); cursor: pointer; }
.slot:hover { border-color: var(--color-turquoise); }
.slot[aria-pressed="true"] { background: var(--color-turquoise-mist); border-color: var(--color-turquoise); box-shadow: inset 0 0 0 1px var(--color-turquoise); }
.legend { display: flex; flex-wrap: wrap; gap: 20px; font: var(--text-small); color: var(--color-ink-muted); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-turquoise); margin-right: 8px; vertical-align: middle; }
.card-field { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
.secure { display: flex; gap: 12px; align-items: flex-start; font: var(--text-small); color: var(--color-ink-muted); }
.secure svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--color-turquoise); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.voucher { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.next-steps { list-style: none; padding: 0; }
.next-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 26px 0; border-top: 1px solid var(--color-line-card); }
.next-steps li:last-child { border-bottom: 1px solid var(--color-line-card); }
.next-steps h3 { font: 400 23px/1.3 var(--font-display); }
.next-steps p { color: var(--color-ink-soft); margin-top: 6px; }
.confirm-hero { text-align: center; max-width: 720px; margin: 0 auto; }
.confirm-hero img { width: 84px; margin: 0 auto 28px; }
.when { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 28px; padding: 18px 32px; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-card); font: 600 17px/1.4 var(--font-body); }
.book-foot { padding: 32px 0 40px; border-top: 1px solid rgba(31,51,64,.06); }
.book-foot .wrap { display: flex; justify-content: space-between; gap: 20px; font: var(--text-fine); color: var(--color-ink-faint); }
.actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Tablet */
@media (max-width: 1199px) {
  .wrap { padding: 0 40px; }
  .nav-links { gap: 22px; }
}

/* Mobile (matches the v01 390 mockup) */
@media (max-width: 767px) {
  :root { --space-section-y: 80px; --space-gutter-x: 20px; --space-card-pad: 30px 26px; --radius-card: 24px; }
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .site-nav .wrap { height: 76px; }
  .wordmark b { font-size: 21px; }
  .wordmark small { font-size: 10px; }
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .page-head { padding: 56px 0 64px; }
  .h1 { font-size: 40px; line-height: 1.12; }
  .h2 { font: 300 36px/1.12 var(--font-display); }
  .h3 { font-size: 25px; }
  .lead { font-size: 17px; line-height: 1.55; }
  .body-lg { font-size: 17px; }
  .eyebrow { font-size: 12px; letter-spacing: .2em; }
  .grid-2, .grid-3, .split, .split-4-8, .footer-grid, .band, .book-grid, .story { grid-template-columns: 1fr; }
  .split, .split-4-8 { gap: 40px; }
  .pull { font-size: 34px; line-height: 1.22; }
  .journey::before { left: 23px; }
  .journey li { grid-template-columns: 48px 1fr; gap: 18px; padding-bottom: 40px; }
  .journey li::before { width: 48px; height: 48px; font-size: 22px; }
  .journey h3 { font-size: 22px; padding-top: 8px; }
  .faq-group + .faq-group { margin-top: 64px; }
  .faq summary { font-size: 22px; padding: 24px 0; }
  .faq .answer { padding: 0 0 26px; }
  .quote-wall { column-count: 1; }
  .quote-card { padding: 28px 24px; }
  .quote-card blockquote { font-size: 21px; }
  .story { border-radius: 28px; }
  .story-side, .story-body { padding: 34px 26px; }
  .story-side .big { font-size: 30px; }
  .band { padding: 44px 26px; border-radius: 28px; gap: 28px; }
  .band .h2 { font: 300 36px/1.12 var(--font-display); }
  .band .ctas { align-items: stretch; }
  .band .ctas .btn { width: 100%; }
  .band .ctas .link-underline { align-self: center; }
  .btn { width: auto; }
  .btn-block-m { width: 100%; }
  .site-footer { padding: 56px 0 48px; }
  .footer-grid { gap: 28px; }
  .footer-brand { justify-content: space-between; }
  .footer-brand .name { font-size: 24px; }
  .book-head .wrap { height: 72px; }
  .stepper { display: none; }
  .stepper-mobile { display: block; padding: 18px 0 0; font: var(--text-small); color: var(--color-ink-muted); }
  .stepper-mobile .bar { height: 4px; border-radius: 4px; background: var(--color-line-card); margin-top: 10px; overflow: hidden; }
  .stepper-mobile .bar span { display: block; height: 100%; background: var(--color-turquoise); border-radius: 4px; }
  .book-main { padding: 32px 0 80px; }
  .book-title { font-size: 34px; }
  .summary { position: static; }
  .offer { grid-template-columns: 1fr; padding: 30px 22px; gap: 36px; }
  .avail > div { padding: 20px 0; }
  .sticky-d { position: static !important; }
  .dream { padding: 44px 26px !important; }
  .calendar { border-spacing: 4px; }
  .day { border-radius: 12px; font-size: 15px; }
  .day.open::after { bottom: 6px; width: 4px; height: 4px; }
  .card-field { grid-template-columns: 1fr 1fr; }
  .card-field .full { grid-column: 1 / -1; }
  .voucher { grid-template-columns: 1fr; }
  .actions { flex-direction: column-reverse; align-items: stretch; }
  .actions .btn { width: 100%; }
  .next-steps li { grid-template-columns: 44px 1fr; gap: 16px; }
  .when { border-radius: 24px; flex-direction: column; gap: 4px; padding: 18px 24px; }
  .book-foot .wrap { flex-direction: column; }
}

/* ── Mobile menu (added in build; the mockups only shipped the button) ── */
.mobile-menu { display: none; background: var(--color-surface, #fff); border-bottom: 1px solid var(--color-line, #e5e0d6); }
.mobile-menu ul { list-style: none; margin: 0; padding: 12px 20px 20px; display: grid; gap: 4px; }
.mobile-menu a { display: block; padding: 12px 4px; text-decoration: none; color: var(--color-ink); font-weight: 600; }
.mobile-menu .btn { text-align: center; margin-top: 8px; }
@media (max-width: 767px) { .mobile-menu:not([hidden]) { display: block; } }
.hero .mobile-menu { position: relative; z-index: 6; }

/* Real portrait inside a .photo panel: the panel's own gradient is the backdrop */
.photo .portrait {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: none;
  height: auto;
}
.photo-portrait { width: min(480px, 100%); margin-left: auto; }
@media (max-width: 767px) { .photo-portrait { margin-right: auto; } }

/* Full-bleed photograph filling a .photo panel */
.photo .photo-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }

/* A cardinal perched on a story card's top edge (wrapper dodges the card's overflow:hidden) */
.story-wrap { position: relative; }
.story-wrap .card-bird { position: absolute; top: -49px; right: 44px; width: 54px; max-width: none; height: auto; z-index: 2; }
.story-wrap + .story, .story + .story-wrap { margin-top: 40px; }

/* Page-header entrance: the same quiet staggered rise as the landing hero. */
@media (prefers-reduced-motion: no-preference) {
  .page-head .eyebrow, .page-head .h1, .page-head .lead {
    animation: bd-rise 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) both;
  }
  .page-head .eyebrow { animation-delay: 0.1s; }
  .page-head .h1 { animation-delay: 0.25s; }
  .page-head .lead { animation-delay: 0.4s; }
}
@keyframes bd-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ── Mobile bottom navigation (replaces the hamburger on phones) ── */
.bottom-nav, .more-sheet { display: none; }
@media (max-width: 767px) {
  .menu-btn { display: none !important; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(248, 245, 239, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-line, #e5e0d6);
  }
  .bottom-nav a, .bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 0;
    border: 0;
    background: none;
    text-decoration: none;
    font: 600 11px/1 var(--font-body);
    color: var(--color-ink-soft);
    cursor: pointer;
  }
  .bottom-nav svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .bottom-nav .is-active { color: var(--color-turquoise); }
  .more-sheet { display: block; position: fixed; inset: 0; z-index: 70; }
  .more-sheet[hidden] { display: none; }
  .more-sheet .sheet-scrim { position: absolute; inset: 0; background: rgba(31, 51, 64, 0.4); }
  .more-sheet .sheet-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 20px 20px 0 0;
    background: var(--color-surface, #fff);
    padding: 10px 16px calc(84px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -18px 50px rgba(31, 51, 64, 0.25);
  }
  .more-sheet .sheet-handle { width: 40px; height: 4px; border-radius: 999px; background: var(--color-line, #e5e0d6); margin: 2px auto 10px; }
  .more-sheet a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 10px;
    border-radius: 12px;
    text-decoration: none;
    font: 600 15px/1.2 var(--font-body);
    color: var(--color-ink);
  }
  .more-sheet a.is-active { background: var(--color-turquoise-mist, #eaf4f2); color: var(--color-turquoise); }
  .more-sheet svg { width: 22px; height: 22px; stroke: var(--color-turquoise); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
}

/* Gift page: the three-step "how it works" list */
.steps-gift { list-style: none; margin: 0; padding: 0; counter-reset: g; }
.steps-gift li { counter-increment: g; position: relative; padding: 0 0 18px 44px; }
.steps-gift li::before {
  content: counter(g);
  position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-turquoise-mist, #eaf4f2); color: var(--color-turquoise, #2a7476);
  font-weight: 700; font-size: 14px;
}
.steps-gift b { font-weight: 600; }

/* Anchored targets clear the sticky nav when scrolled to */
details, [id] { scroll-margin-top: 118px; }