/* Serenive Beauty & Spa — website stylesheet
   Built from the Serenive design pack (tokens.json, README, Website & digital).
   Layout concept: an editorial scroll that alternates ivory rooms and candlelit forest rooms,
   big Playfair headlines, lots of air, gold used only as jewellery.

   Brand rules this file keeps (from the design pack):
   - Four brand colours plus the pack's derived text tokens. No other hues.
   - No gradients (the sage-marble texture is the only exception) and no drop shadows.
   - Gold for the monogram, hairline rules, line art and the header Book button only.
   - Square corners on images, panels and cards; radius-sm on buttons and inputs.
   - Body text left-aligned; centring only for the hero and signage moments.
   - Motion: fade and rise, 600-900ms ease-out, off for reduced-motion. */

:root {
  /* Brand colour (design pack tokens) */
  --forest: #2f4a3b;
  --sage: #8c9b87;
  --ivory: #f9f5ee;
  --gold: #d4b07a;
  --surface: var(--ivory);
  --surface-raised: #ffffff;
  --forest-raised: #3b5a4a;    /* pack: surface-raised, dark theme */
  --ink: var(--forest);
  --ink-muted: #5c6b58;        /* pack: ink-muted, light */
  --accent: #7a6136;           /* pack: accent, light (gold-toned text on ivory) */
  --rule: var(--gold);
  --hairline: #e8dfd0;         /* pack: hairline, light */
  --on-forest: var(--ivory);
  --on-forest-muted: #c9d1c5;  /* pack: ink-muted, dark */
  --on-gold: var(--forest);

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: Montserrat, "Helvetica Neue", Arial, sans-serif;

  /* Space (pack tokens) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --section: clamp(var(--space-6), 9vw, 128px);
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1280px;

  /* Shape */
  --radius-none: 0;
  --radius-sm: 4px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: 800ms;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 27px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.section--ivory :focus-visible, .section--white :focus-visible, .panel :focus-visible { outline-color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: absolute; left: var(--space-3); top: -60px; z-index: 100;
  background: var(--forest); color: var(--on-forest); padding: 10px 16px; text-decoration: none;
}
.skip-link:focus { top: calc(var(--space-3) + env(safe-area-inset-top, 0px)); }

/* ---------- Type ---------- */
.display, .h1, .h2, .h3, .quote {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.005em;
}
.display { font-size: clamp(40px, 6.4vw, 84px); line-height: 1.06; }
.display em { font-style: italic; }
.h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.12; }
.h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.2; }
.h3 { font-size: 22px; line-height: 30px; font-weight: 500; }
.h3--light { font-weight: 400; }
.h3 a { text-decoration: none; }
.h3 a:hover { text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.quote { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.4; font-style: italic; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px; line-height: 20px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  margin: 0;
}
.lede { font-size: 18px; line-height: 31px; max-width: 34em; }
.body-sm { font-size: 14px; line-height: 22px; }
.muted { color: var(--ink-muted); max-width: 34em; }
.measure { max-width: 640px; }
.prose { max-width: 36em; }
.prose p + p { margin-top: var(--space-4); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.wrap--narrow { max-width: calc(820px + 2 * var(--gutter)); }
.section { padding-block: var(--section); position: relative; }
.section--flush-top { padding-top: 0; }
.section--ivory { background: var(--ivory); color: var(--ink); }
.section--white { background: var(--surface-raised); color: var(--ink); }
.section--forest { background: var(--forest); color: var(--on-forest); }
.section--forest .muted { color: var(--on-forest-muted); }
.section--forest .eyebrow { color: var(--gold); }
.section--ivory .eyebrow, .section--white .eyebrow { color: var(--ink-muted); }
.section--sage {
  background: var(--sage) url("../assets/textures/sage-marble.svg") center / cover no-repeat;
  color: var(--ink);
}
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--lg { gap: var(--space-5); }
.center { text-align: center; align-items: center; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: center; }

.rule { display: block; width: 56px; height: 1px; border: 0; margin: 0; background: var(--rule); }
.mark-sm { width: 72px; }
.mark-xs { width: 56px; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 28px;
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap; background: transparent;
  transition: background-color 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease), opacity 400ms var(--ease);
}
/* Gold fill: the header Book button (and its mobile equivalents) only. */
.btn--gold { background: var(--gold); color: var(--on-gold); }
.btn--gold:hover { opacity: .88; }
/* Forest fill: Book actions on ivory. */
.btn--forest { background: var(--forest); color: var(--on-forest); }
.btn--forest:hover { background: var(--forest-raised); }
/* Outline: every other action. Takes the colour of its ground. */
.btn--outline { border-color: currentColor; }
.section--ivory .btn--outline:hover, .section--white .btn--outline:hover, .panel .btn--outline:hover, .feature__text .btn--outline:hover { background: var(--forest); color: var(--on-forest); border-color: var(--forest); }
.section--forest .btn--outline:hover, .hero .btn--outline:hover { background: var(--ivory); color: var(--forest); border-color: var(--ivory); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Underline links: a 1px gold rule draws in on hover. */
.link {
  position: relative;
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
  padding-block: 6px; align-self: flex-start;
}
.center .link { align-self: center; }
.link::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule);
  transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease);
}
.link::after { content: "\2192"; font-weight: 400; letter-spacing: 0; transition: transform 600ms var(--ease); }
.link:hover::before { transform: scaleX(1); }
.link:hover::after { transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  color: var(--on-forest);
  border-bottom: 1px solid transparent;
  transition: background-color 500ms var(--ease), color 500ms var(--ease), border-color 500ms var(--ease);
}
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: 88px; transition: height 500ms var(--ease);
}
.site-header.is-solid { background: var(--ivory); color: var(--ink); border-bottom-color: var(--hairline); }
.site-header.is-solid .site-header__bar { height: 72px; }
.brand { display: block; position: relative; width: 210px; flex: none; }
.brand img { width: 100%; height: auto; transition: opacity 500ms var(--ease); }
.brand .brand__dark { position: absolute; inset: 0; opacity: 0; }
.site-header.is-solid .brand__light { opacity: 0; }
.site-header.is-solid .brand__dark { opacity: 1; }

.nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav__links { display: flex; gap: clamp(20px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  position: relative;
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; padding-block: 8px; display: inline-block;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.site-header .btn { min-height: 44px; padding: 0 22px; }

.menu-toggle {
  display: none; background: none; border: 0; padding: 10px; margin-right: -10px; cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  align-items: center; gap: 10px;
}
.menu-toggle__icon { width: 22px; height: 9px; position: relative; }
.menu-toggle__icon::before, .menu-toggle__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform 400ms var(--ease), top 400ms var(--ease);
}
.menu-toggle__icon::before { top: 0; }
.menu-toggle__icon::after { top: 8px; }

/* Mobile menu sheet */
.menu-sheet {
  position: fixed; inset: 0; z-index: 45;
  background: var(--forest) url("../assets/textures/forest-leaf.svg") right bottom / auto 70% no-repeat;
  color: var(--on-forest);
  padding: calc(120px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5);
  opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease), visibility 0s linear 500ms;
}
.menu-open .menu-sheet { opacity: 1; visibility: visible; transition: opacity 500ms var(--ease); }
.menu-sheet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.menu-sheet a:not(.btn) { font-family: var(--font-display); font-size: 36px; line-height: 1.2; text-decoration: none; }
.menu-sheet .btn { align-self: flex-start; }
.menu-sheet .eyebrow { color: var(--gold); }
.menu-open .site-header { background: transparent; color: var(--on-forest); border-bottom-color: transparent; }
.menu-open .site-header .brand__light { opacity: 1; }
.menu-open .site-header .brand__dark { opacity: 0; }
.menu-open .menu-toggle__icon::before { top: 4px; transform: rotate(20deg); }
.menu-open .menu-toggle__icon::after { top: 4px; transform: rotate(-20deg); }
.menu-open { overflow: hidden; }

/* Mobile sticky Book bar */
.book-bar {
  display: none;
  position: fixed; inset: auto 0 0; z-index: 40;
  background: var(--forest); color: var(--on-forest);
  border-top: 1px solid var(--forest-raised);
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  align-items: center; justify-content: space-between; gap: var(--space-3);
}
.book-bar p { font-family: var(--font-display); font-style: italic; font-size: 17px; line-height: 22px; }
.book-bar .btn { min-height: 44px; padding: 0 20px; }

@media (max-width: 960px) {
  .nav__links, .site-header .nav > .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .book-bar { display: flex; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .brand { width: 172px; }
  .site-header__bar { height: 72px; }
  .site-header.is-solid .site-header__bar { height: 64px; }
}

/* ---------- Hero (home) ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--forest); color: var(--on-forest);
  min-height: clamp(600px, 92svh, 960px);
  display: flex; align-items: center;
  padding-block: calc(140px + env(safe-area-inset-top, 0px)) 120px;
}
.hero__art { position: absolute; inset: -3%; z-index: -1; animation: hero-zoom 40s var(--ease) infinite alternate; }
.hero__art svg { width: 100%; height: 100%; }
.hero__shadow { animation: leaf-drift 22s ease-in-out infinite alternate; transform-origin: 30% 40%; }
.hero-art__lines path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 4.2s var(--ease) .3s forwards; }
.hero-art__lines path:nth-child(3n) { animation-delay: .7s; }
.hero-art__lines path:nth-child(3n+1) { animation-delay: 1.1s; }
.hero__content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.hero__mark { width: 76px; }
.hero .eyebrow { color: var(--gold); }
.hero__scroll { position: absolute; left: 50%; bottom: 32px; width: 1px; height: 56px; background: var(--rule); opacity: .6; }
.hero__content > * { animation: rise 900ms var(--ease) both; }
.hero__content > *:nth-child(2) { animation-delay: .15s; }
.hero__content > *:nth-child(3) { animation-delay: .3s; }
.hero__content > *:nth-child(4) { animation-delay: .45s; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1%); } }
@keyframes leaf-drift { from { transform: translate(0, 0) rotate(0deg); } to { transform: translate(18px, -12px) rotate(1.6deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--forest) url("../assets/textures/forest-leaf.svg") right -40px center / auto 130% no-repeat;
  color: var(--on-forest);
  padding-block: calc(180px + env(safe-area-inset-top, 0px)) clamp(64px, 8vw, 112px);
}
.page-hero__text { max-width: min(640px, 58%); }
.page-hero .eyebrow { color: var(--gold); }
.page-hero .stack > * { animation: rise 900ms var(--ease) both; }
.page-hero .stack > *:nth-child(2) { animation-delay: .12s; }
.page-hero .stack > *:nth-child(3) { animation-delay: .24s; }
.page-hero .lede { color: var(--on-forest-muted); }
@media (max-width: 760px) {
  .page-hero { background-size: auto 70%; background-position: right -120px top 40px; }
  .page-hero__text { max-width: none; }
}

/* ---------- Media slots (textures stand in until photography arrives) ---------- */
.media {
  position: relative; overflow: hidden; margin: 0; display: block;
  background: var(--sage) center / cover no-repeat;
  border-radius: var(--radius-none);
}
.media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.media--forest-leaf { background-image: url("../assets/textures/forest-leaf.svg"); background-color: var(--forest); }
.media--forest-shadow { background-image: url("../assets/textures/forest-shadow.svg"); background-color: var(--forest); }
.media--leaf-shadow { background-image: url("../assets/textures/ivory-leaf-shadow.svg"); background-color: var(--ivory); }
.media--marble { background-image: url("../assets/textures/sage-marble.svg"); }
.media--paper { background-image: url("../assets/textures/ivory-paper.svg"); background-color: var(--ivory); }
.media > .media__mark { position: absolute; left: 50%; top: 50%; width: 22%; max-width: 120px; height: auto; transform: translate(-50%, -50%); }

/* Photo brief tags: visible while the site is in draft (html[data-draft]) */
.ph-note { display: none; }
[data-draft] .ph-note {
  display: block; position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 2;
  font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted);
}
[data-draft] .media--forest-leaf .ph-note, [data-draft] .media--forest-shadow .ph-note { color: var(--on-forest-muted); }
[data-draft] .media--marble .ph-note { color: var(--forest); }
.ph-note::before { content: "Photo · "; }

/* Content still to come from the client */
.tbc { border-bottom: 1px dotted currentColor; }
[data-draft] .tbc--q::after { content: " (to confirm)"; font-size: .78em; opacity: .7; letter-spacing: 0; text-transform: none; }

/* ---------- Home: why we exist ---------- */
.intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); align-items: end; }
.intro__grid > :first-child { grid-column: 1 / span 7; min-width: 0; }
.intro__grid > :last-child { grid-column: 9 / span 4; min-width: 0; }
.intro .lede { color: var(--ink-muted); }
@media (max-width: 860px) { .intro__grid > :first-child, .intro__grid > :last-child { grid-column: 1 / -1; } }

/* ---------- Section heads ---------- */
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-4); margin-bottom: var(--space-6); }
.section-head--tight { margin-bottom: 0; }
.section-head > div { min-width: 0; }
@media (max-width: 560px) { .section-head { grid-template-columns: 1fr; } }

/* ---------- Treatment cards ---------- */
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.card__media { aspect-ratio: 3 / 4.4; }
.card__inner { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform 1.6s var(--ease); }
.card:hover .card__inner { transform: scale(1.05); }
.card .eyebrow { color: var(--ink-muted); font-size: 11px; }

@media (max-width: 1100px) {
  .cards, .cards--four {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 42%);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3);
    scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
  }
  .card { scroll-snap-align: start; }
}
@media (max-width: 560px) { .cards, .cards--four { grid-auto-columns: 78%; } }

/* ---------- The space ---------- */
.space { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); align-items: center; }
.space__text { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.space__a { grid-column: 6 / span 4; aspect-ratio: 3 / 4; }
.space__b { grid-column: 10 / span 3; aspect-ratio: 3 / 4.6; margin-top: 30%; }
@media (max-width: 860px) {
  .space__text { grid-column: 1 / -1; }
  .space__a { grid-column: 1 / span 7; }
  .space__b { grid-column: 8 / span 5; }
}

/* ---------- Feature band (packages / vouchers) ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 560px; }
.feature__media { min-height: 360px; }
.feature__text {
  background: var(--surface-raised); color: var(--ink);
  padding: clamp(40px, 6vw, 96px) max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(40px, 6vw, 96px) clamp(32px, 6vw, 96px);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-4);
}
.feature__text .eyebrow { color: var(--ink-muted); }
@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  .feature__text { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); }
}

/* ---------- Social grid ---------- */
.social-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.social-grid .media { aspect-ratio: 1; }
@media (max-width: 760px) { .social-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Panels (newsletter, ask the team) ---------- */
.panel {
  background: var(--ivory); color: var(--ink);
  max-width: 640px; margin-inline: auto;
  padding: clamp(32px, 6vw, 72px) clamp(24px, 6vw, 72px);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
}
.panel .eyebrow { color: var(--ink-muted); }
.signup { display: flex; width: 100%; gap: var(--space-2); margin-top: var(--space-2); }
.field {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 16px;
  background: var(--surface-raised); color: var(--ink);
  border: 1px solid var(--ink-muted); border-radius: var(--radius-sm);
}
.field::placeholder { color: var(--ink-muted); opacity: 1; }
.field:focus { outline: 2px solid var(--forest); outline-offset: 0; border-color: var(--forest); }
textarea.field { padding: 14px 16px; min-height: 140px; resize: vertical; }
.form-note { min-height: 22px; color: var(--ink-muted); }
@media (max-width: 480px) { .signup { flex-direction: column; } }

/* ---------- Split rows ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); align-items: center; }
.split__media { grid-column: 1 / span 6; aspect-ratio: 4 / 5; }
.split__text { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.split--flip .split__media { grid-column: 7 / span 6; order: 2; }
.split--flip .split__text { grid-column: 1 / span 5; order: 1; }
@media (max-width: 860px) {
  .split__media, .split--flip .split__media { grid-column: 1 / -1; order: 1; aspect-ratio: 4 / 3; }
  .split__text, .split--flip .split__text { grid-column: 1 / -1; order: 2; }
}
.details { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.details div { display: flex; flex-direction: column; }
.details dt { font-size: 11px; line-height: 18px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-muted); }
.details dd { margin: 0; font-size: 15px; }
.section--forest .details { border-top-color: var(--forest-raised); }
.section--forest .details dt { color: var(--on-forest-muted); }

/* Philosophy long read */
.manifesto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4); }
.manifesto__side { grid-column: 1 / span 3; }
.manifesto__body { grid-column: 5 / span 7; min-width: 0; }
.manifesto__body .first { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.4; margin-bottom: var(--space-5); }
.manifesto__body p { font-size: 17px; line-height: 30px; }
@media (max-width: 860px) { .manifesto__side, .manifesto__body { grid-column: 1 / -1; } }
.closing .quote { max-width: 22em; }

/* Services strip (from the brand board) */
.services-strip { background: var(--forest); color: var(--on-forest); border-top: 1px solid var(--forest-raised); }
.services-strip ul { list-style: none; margin: 0; padding: 22px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; }
.services-strip li { font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; padding: 0 clamp(14px, 2.4vw, 32px); }
.services-strip li + li { border-left: 1px solid var(--rule); }
.services-strip a { text-decoration: none; }
.services-strip a:hover { color: var(--gold); }
@media (max-width: 640px) { .services-strip li + li { border-left: 0; } .services-strip li { flex-basis: 50%; text-align: center; } }

/* Packages page */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.tier { background: var(--surface-raised); padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--rule); min-width: 0; }
.tier .eyebrow { color: var(--ink-muted); }
.tier .link { margin-top: auto; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

.voucher-wrap { aspect-ratio: auto; display: flex; justify-content: center; align-items: center; }
.voucher {
  aspect-ratio: 1.75; max-width: 520px; width: 100%;
  background: var(--ivory) url("../assets/textures/ivory-paper.svg") right center / cover no-repeat;
  color: var(--ink); padding: clamp(20px, 4vw, 36px);
  outline: 1px solid var(--rule); outline-offset: -10px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.voucher img { width: 180px; margin-left: -6px; }
.voucher__words { gap: var(--space-2); }
.voucher .eyebrow { color: var(--accent); }
.voucher__amount { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); line-height: 1; }

/* Visit page */
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.info-grid > div { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--rule); min-width: 0; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-4); margin: 0; font-variant-numeric: tabular-nums; }
.hours dt { color: var(--ink-muted); }
.hours dd { margin: 0; }
@media (max-width: 860px) { .info-grid { grid-template-columns: 1fr; } }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.contact-form label { display: flex; flex-direction: column; gap: var(--space-2); font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.contact-form .full { grid-column: 1 / -1; }
.contact-form .field { text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 400; }
@media (max-width: 600px) { .contact-form { grid-template-columns: 1fr; } }

/* Book page */
.booking { background: var(--surface-raised); border-top: 1px solid var(--rule); }
.booking__head { padding: var(--space-5) clamp(20px, 4vw, 48px); display: flex; flex-direction: column; gap: var(--space-3); border-bottom: 1px solid var(--hairline); }
.booking__steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0; padding: 0; counter-reset: step; }
.booking__steps li { counter-increment: step; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); display: flex; gap: 10px; align-items: center; }
.booking__steps li::before { content: counter(step); font-family: var(--font-display); font-size: 16px; letter-spacing: 0; color: var(--accent); }
.booking__steps li[aria-current="step"] { color: var(--ink); }
.booking__list { list-style: none; margin: 0; padding: 0; }
.booking__list li { border-bottom: 1px solid var(--hairline); }
.booking__option {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: center;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: var(--space-4) clamp(20px, 4vw, 48px);
  transition: background-color 400ms var(--ease);
}
.booking__option:hover { background: var(--ivory); }
.booking__option[aria-pressed="true"] { background: var(--ivory); outline: 1px solid var(--rule); outline-offset: -1px; }
.booking__option .h3 { display: block; }
.booking__option span.body-sm { color: var(--ink-muted); display: block; }
.booking__foot { padding: var(--space-4) clamp(20px, 4vw, 48px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
#booking-chosen { color: var(--ink); font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest); color: var(--on-forest); }
.site-footer .wrap { padding-block: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-6); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.footer-top > div { min-width: 0; }
.footer-brand img { width: 240px; max-width: 100%; margin-left: -10px; }
.footer-top h2 { font-family: var(--font-sans); font-size: 11px; line-height: 18px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 0 0 var(--space-3); }
.footer-top ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-top a:not(.link) { text-decoration: none; }
.footer-top a:not(.link):hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; }
.footer-top p { color: var(--on-forest-muted); }
.footer-gap { margin-top: 12px; }
.footer-hours { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-3); margin: 0; color: var(--on-forest-muted); font-variant-numeric: tabular-nums; }
.footer-hours dd { margin: 0; }
.footer-tag { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 30px; color: var(--on-forest) !important; margin-top: var(--space-4); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--forest-raised); font-size: 13px; color: var(--on-forest-muted); }
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--on-forest); }
@media (max-width: 1100px) { .footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Scroll reveal ---------- */
.reveal-pending { opacity: 0; transform: translateY(16px); }
.reveal-in { opacity: 1; transform: none; transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-art__lines path { stroke-dashoffset: 0; }
  .reveal-pending { opacity: 1; transform: none; }
}