/* ==========================================================================
   Ann Szczepanski — Global Stylesheet
   --------------------------------------------------------------------------
   Palette is drawn from the brand watercolour artwork:
     · soft warm white  -> page canvas
     · muted sky blue   -> primary accent (calm / nervous-system regulation)
     · periwinkle mist  -> secondary accent (watercolour wash)
     · slate silhouette -> body copy
     · signature red    -> sparing highlight (used like the red in the logo)
   All colours live in :root so they can be re-tuned in one place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Canvas — soft warm white */
  --c-canvas:        #FBF8F4;
  --c-canvas-alt:    #F5F1EB;
  --c-surface:       #FFFDFA;

  /* Muted light sky blue — the regulation accent */
  --c-sky-50:        #F1F7FA;
  --c-sky-100:       #E2EFF5;
  --c-sky-200:       #C6DEEA;
  --c-sky-300:       #A7CCDD;
  --c-sky-400:       #8FBFD6;
  --c-sky-600:       #5E92AC;
  --c-sky-800:       #3D6579;
  /* Deep enough to hold 4.5:1 as small text on the footer's lavender haze,
     where --c-sky-800 only manages 3.7:1. */
  --c-sky-900:       #2F5266;

  /* Periwinkle / lavender wash from the artwork */
  --c-mist-100:      #EDECF4;
  --c-mist-200:      #DAD8E8;
  --c-mist-400:      #A8A4C9;
  --c-mist-600:      #757099;
  --c-mist-800:      #4E4A6B;

  /* Silhouette greys — the figures in the artwork */
  --c-ink:           #3A3A42;
  --c-body:          #5C5C66;
  --c-muted:         #85858F;
  --c-line:          #E6E1DA;

  /* Signature red from the wordmark */
  --c-red:           #C0453F;
  --c-red-soft:      #F4E4E3;

  /* Semantic roles */
  --c-heading:       var(--c-mist-800);
  --c-accent:        var(--c-sky-400);
  --c-accent-deep:   var(--c-sky-800);
  --c-focus:         var(--c-sky-600);

  /* Typography */
  --f-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lg:   clamp(1.09rem, 1.03rem + 0.3vw, 1.22rem);
  --t-xl:   clamp(1.3rem, 1.19rem + 0.5vw, 1.6rem);
  --t-2xl:  clamp(1.6rem, 1.38rem + 1vw, 2.2rem);
  --t-3xl:  clamp(2rem, 1.6rem + 1.8vw, 3rem);
  --t-4xl:  clamp(2.4rem, 1.75rem + 2.9vw, 4.15rem);

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Shape & depth */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(78, 74, 107, 0.05), 0 2px 8px rgba(78, 74, 107, 0.04);
  --shadow-md: 0 2px 6px rgba(78, 74, 107, 0.06), 0 10px 28px rgba(78, 74, 107, 0.07);
  --shadow-lg: 0 4px 12px rgba(78, 74, 107, 0.07), 0 20px 48px rgba(78, 74, 107, 0.1);

  /* Layout */
  --w-page: 1180px;
  --w-prose: 68ch;
  --nav-h: 76px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Class-based display rules must never beat the hidden attribute. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--s-5));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-canvas);
  color: var(--c-body);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--c-heading);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
}

h1 { font-size: var(--t-4xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--c-sky-800); text-decoration-color: var(--c-sky-300); text-underline-offset: 3px; }
a:hover { color: var(--c-mist-600); }

img, svg, iframe { max-width: 100%; display: block; }
img { height: auto; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25rem; }
li { margin-bottom: var(--s-2); }
li::marker { color: var(--c-sky-400); }

hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-7) 0; }

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--c-sky-200); color: var(--c-mist-800); }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 999;
  background: var(--c-mist-800);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: var(--s-4); color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.wrap--narrow { max-width: 860px; }

.section { padding-block: var(--s-9); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
/* Section backgrounds are painted on ::before and feathered: a mask fades every
   layer to transparent at the section's top and bottom edges, so two sections
   only ever meet on the plain canvas and no seam can show. It's the same rule
   the footer haze follows. A new background belongs on ::before, not on the
   section itself. */
.section--tinted,
.section--mist { position: relative; isolation: isolate; }
.hero::before,
.section--tinted::before,
.section--mist::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--s-9), #000 calc(100% - var(--s-9)), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 var(--s-9), #000 calc(100% - var(--s-9)), transparent);
}
.section--tinted::before { background: var(--bloom, none), var(--c-canvas-alt); }
.section--mist::before {
  background: linear-gradient(170deg, var(--c-sky-50) 0%, var(--c-mist-100) 55%, var(--c-canvas) 100%);
}

.stack > * + * { margin-top: var(--s-4); }

.section-head { max-width: var(--w-prose); margin-bottom: var(--s-7); }
.section-head--center { margin-inline: auto; text-align: center; }
/* A short note under a section heading (reformer, privacy). */
.section-note { margin-inline: auto; font-size: var(--t-sm); color: var(--c-body); }
.section-note strong { color: var(--c-mist-800); }

.eyebrow {
  display: inline-block;
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-sky-600);
  margin-bottom: var(--s-3);
}
.eyebrow--red { color: var(--c-red); }

.lede { font-size: var(--t-lg); color: var(--c-body); max-width: var(--w-prose); }

.prose { max-width: var(--w-prose); }
.prose h3 { margin-top: var(--s-6); }

/* Decorative watercolour blooms: a sky glow top-right and a lavender glow
   bottom-left. They're extra layers in a tinted section's feathered background
   (--bloom is read by .section--tinted::before), so they fade out at the
   section edges with everything else instead of being clipped into a line.
   Colours are --c-sky-200 and --c-mist-200. */
.bloom {
  --bloom:
    radial-gradient(circle 340px at calc(100% - 120px) 140px,
      rgba(198, 222, 234, 0.5), rgba(198, 222, 234, 0.22) 45%, rgba(198, 222, 234, 0) 100%),
    radial-gradient(circle 320px at 80px calc(100% - 120px),
      rgba(218, 216, 232, 0.5), rgba(218, 216, 232, 0.22) 45%, rgba(218, 216, 232, 0) 100%);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-sky-400);
  --btn-fg: #FFFFFF;
  --btn-bd: var(--c-sky-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.85em 1.75em;
  min-height: 48px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }

.btn--primary { --btn-bg: var(--c-sky-600); --btn-bd: var(--c-sky-600); }
.btn--primary:hover { --btn-bg: var(--c-sky-800); --btn-bd: var(--c-sky-800); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-mist-800);
  --btn-bd: var(--c-mist-400);
}
.btn--ghost:hover { --btn-bg: var(--c-mist-100); --btn-fg: var(--c-mist-800); }

.btn--red { --btn-bg: var(--c-red); --btn-bd: var(--c-red); }
.btn--red:hover { --btn-bg: #A5342F; --btn-bd: #A5342F; }

.btn--wide { width: 100%; }
.btn--sm { padding: 0.6em 1.25em; min-height: 40px; font-size: var(--t-xs); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.btn-row--center { justify-content: center; }

@media (max-width: 420px) {
  .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   5. Site header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 244, 0.88);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--c-line);
  box-shadow: 0 4px 20px rgba(78, 74, 107, 0.05);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-mist-800);
  flex-shrink: 0;
}
.brand:hover { color: var(--c-mist-800); }

.brand__mark {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c-sky-200), var(--c-mist-200));
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--c-mist-800);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--f-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.brand__tag {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-sky-600);
  font-weight: 600;
}

.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  cursor: pointer;
  padding: 0;
  /* place-content, not place-items: grid rows stretch to fill the button by
     default, which spreads the bars apart and breaks the 6.5px "X" offsets. */
  place-content: center;
}
.nav__toggle span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--c-mist-800);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle span + span { margin-top: 5px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__menu > li { margin: 0; position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-sm);
  color: var(--c-body);
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.nav__link:hover { color: var(--c-mist-800); background: var(--c-mist-100); }
/* Set by the scroll spy in main.js. No weight change: the highlight moves as the
   page scrolls, and bolder text would nudge the neighbouring links sideways. */
.nav__link.is-active { color: var(--c-sky-800); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0.85rem; right: 0.85rem;
  bottom: 0.25rem;
  height: 2px;
  border-radius: 2px;
  background: var(--c-sky-400);
}

.nav__caret { width: 9px; height: 9px; transition: transform 0.2s var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Desktop dropdown */
.nav__submenu {
  list-style: none;
  margin: 0;
  padding: var(--s-2);
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 268px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav__item--has-menu:hover .nav__submenu,
.nav__item--has-menu:focus-within .nav__submenu,
.nav__submenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__submenu li { margin: 0; }
.nav__submenu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--c-body);
  text-decoration: none;
}
.nav__submenu a:hover { background: var(--c-sky-50); color: var(--c-sky-800); }
.nav__submenu small { display: block; color: var(--c-muted); font-size: 0.75rem; line-height: 1.4; }

.nav__cta { margin-left: var(--s-2); }

@media (max-width: 960px) {
  .nav__toggle { display: grid; }

  .nav__menu {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    padding: var(--s-4) clamp(1.15rem, 4vw, 2.5rem) var(--s-7);
    background: var(--c-canvas);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav__menu > li { border-bottom: 1px solid var(--c-line); }
  .nav__menu > li:last-child { border-bottom: 0; }

  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 0.95rem 0.25rem;
    font-size: var(--t-lg);
    border-radius: 0;
  }
  .nav__link.is-active::after { display: none; }

  .nav__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--c-sky-200);
    border-radius: 0;
    margin: 0 0 var(--s-3) 0.35rem;
    padding: 0 0 0 var(--s-4);
    background: none;
    display: none;
  }
  .nav__submenu.is-open { display: block; }
  .nav__item--has-menu:hover .nav__submenu { display: none; }
  .nav__item--has-menu:hover .nav__submenu.is-open { display: block; }

  .nav__cta { margin: var(--s-5) 0 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Feathered like the sections (see "Section backgrounds" above), so the wash
   meets the header and the next section on plain canvas. */
.hero::before {
  background:
    radial-gradient(60% 90% at 78% 20%, var(--c-mist-100) 0%, transparent 62%),
    radial-gradient(70% 80% at 12% 78%, var(--c-sky-50) 0%, transparent 60%),
    linear-gradient(160deg, var(--c-canvas) 0%, var(--c-canvas-alt) 100%);
}

.hero__inner {
  display: grid;
  gap: var(--s-7);
  align-items: center;
  padding-block: clamp(3rem, 1.5rem + 8vw, 6.5rem);
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8); }
}

/* Below 900px the intro is one column. The text wrapper steps aside
   (display: contents) so the headshot can sit between the heading and the
   about text; the two-column desktop layout is untouched. */
@media (max-width: 899.98px) {
  .hero__inner { gap: 0; }
  .hero__text { display: contents; }
  .hero__title { order: 1; }
  /* Child selector so it outranks .hero__art--square's centring further down. */
  .hero__inner > .hero__art { order: 2; margin-bottom: var(--s-6); justify-self: start; }
  .hero__text > :not(.hero__title) { order: 3; }
}

.hero__title { margin-bottom: var(--s-5); }
.hero__title em {
  font-style: italic;
  color: var(--c-sky-600);
}

.hero__lede { font-size: var(--t-lg); margin-bottom: var(--s-6); max-width: 56ch; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--t-sm);
  color: var(--c-muted);
}
/* Icons sit on the first line, centred on it, so an item that wraps keeps its
   icon beside the start of the text rather than halfway down it. */
.hero__meta span { display: inline-flex; align-items: flex-start; gap: 0.45em; }
.hero__meta svg {
  width: 15px; height: 15px;
  margin-top: calc((1.7em - 15px) / 2);
  color: var(--c-sky-600);
  flex-shrink: 0;
}

.hero__art {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, #FFFFFF 0%, var(--c-sky-50) 40%, var(--c-mist-200) 100%);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Square crop for the headshot */
.hero__art--square {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 440px;
  justify-self: center;
}

/* Fallback artwork drawn in CSS if no photo has been supplied yet */
.hero__art--placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 45% at 25% 30%, rgba(168, 164, 201, 0.55), transparent 70%),
    radial-gradient(45% 50% at 75% 65%, rgba(143, 191, 214, 0.5), transparent 70%),
    radial-gradient(35% 40% at 60% 20%, rgba(255, 255, 255, 0.85), transparent 70%);
}

/* --------------------------------------------------------------------------
   7. Cards & grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}

/* Clickable service chooser cards */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-sky-300), var(--c-mist-400));
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--c-sky-200);
  box-shadow: var(--shadow-md);
  color: inherit;
}
.service-card:hover::before,
.service-card:focus-visible::before { opacity: 1; }

.service-card__icon,
.service__icon {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--c-sky-50);
  color: var(--c-sky-600);
  border: 1px solid var(--c-sky-100);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.service-card__icon svg,
.service__icon svg { width: 26px; height: 26px; }
.service-card:hover .service-card__icon { background: var(--c-sky-100); color: var(--c-sky-800); }

.service-card__title {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  color: var(--c-heading);
  margin: 0;
}
.service-card__text { font-size: var(--t-sm); color: var(--c-body); margin: 0; flex-grow: 1; }
.service-card__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-sky-600);
}
.service-card__cue svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.service-card:hover .service-card__cue svg { transform: translateX(4px); }

/* Feature / value tiles */
.tile { text-align: left; }
.tile__num {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  color: var(--c-sky-300);
  display: block;
  line-height: 1;
  margin-bottom: var(--s-2);
}

/* Two-column media block */
.split {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split--reverse .split__media { order: 2; }
  /* Wide main column with a narrower sidebar — used on the contact page. */
  .split--aside { grid-template-columns: 1.55fr 1fr; align-items: start; gap: var(--s-7); }
}
.split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--c-sky-50), var(--c-mist-200));
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-md);
  position: relative;
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }

/* Definition-style list (locations, credentials) */
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-line);
  margin: 0;
}
.list-plain li:last-child { border-bottom: 0; }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--s-3);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--c-sky-200);
  border: 2px solid var(--c-sky-400);
}

.tag {
  display: inline-block;
  padding: 0.3em 0.85em;
  border-radius: var(--r-pill);
  background: var(--c-sky-50);
  border: 1px solid var(--c-sky-100);
  color: var(--c-sky-800);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}
.tag--mist { background: var(--c-mist-100); border-color: var(--c-mist-200); color: var(--c-mist-600); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Location cards */
.location {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-sky-300);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.location__name { font-family: var(--f-display); font-size: var(--t-lg); color: var(--c-heading); margin: 0; }
.location__addr { font-size: var(--t-sm); color: var(--c-body); margin: 0; font-style: normal; }
.location__meta { font-size: var(--t-xs); color: var(--c-muted); margin: 0; }

/* Service card (one per carousel slide): icon and heading, then "Who it's for"
   above "What to request". Informational, so no hover lift like .service-card. */
.service { display: flex; flex-direction: column; gap: var(--s-3); }
.service h3 { margin: 0; }
.service__body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-2);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.service__body p { margin: 0; }
.service__body .check-list { margin: var(--s-2) 0 0; }
.service__body .check-list li { margin-bottom: var(--s-1); }
.service__body .check-list + p { margin-top: var(--s-4); }
.service__body strong { color: var(--c-mist-800); }
/* "What to request" sits at the foot of the card (which only matters when the
   portrait minimum below makes a card taller than its text). */
.service__request {
  margin-top: auto;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--c-sky-50);
}
/* Eyebrow styling, one step deeper so it holds 4.5:1 as small text. */
.service__label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-sky-800);
  margin-bottom: var(--s-2);
}

/* Carousel: links to every slide on top, then a row of [arrow | track | arrow].
   The scroll-snapping track shows one slide at a time. Each slide is as tall as
   its own text, and main.js eases the track's height to fit the current one. */
.carousel__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
}
.carousel__tabs li { margin: 0; }
.carousel__tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.45rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-body);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.carousel__tabs a:hover { border-color: var(--c-sky-200); background: var(--c-sky-50); color: var(--c-sky-800); }
.carousel__tabs a[aria-current="true"] {
  border-color: var(--c-sky-400);
  background: var(--c-sky-100);
  color: var(--c-sky-900);
}

/* Portrait cards: the track column tops out at 30rem wide, and each slide is
   at least 1.1× as tall as it is wide (cqi = 1% of the track's width). That
   floor sits just under the shortest card's natural height, so it keeps every
   card portrait without padding short ones out. */
.carousel__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 30rem) auto;
  justify-content: center;
  align-items: start;
  column-gap: var(--s-3);
}
/* Explicit columns, so the track stays centred while the arrows are hidden
   (before the script runs). */
.carousel__arrow--prev { grid-column: 1; grid-row: 1; }
.carousel__track { grid-column: 2; grid-row: 1; }
.carousel__arrow--next { grid-column: 3; grid-row: 1; }

.carousel__track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--s-6);
  align-items: start;
  overflow-x: auto;
  /* The height is set to fit the current slide; a taller neighbour is clipped
     mid-swipe rather than scrolling vertically inside the track. */
  overflow-y: hidden;
  transition: height 0.35s var(--ease);
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Room for the cards' shadows, which the scroller would otherwise clip. */
  padding: 8px 8px 16px;
  margin: -8px -8px -16px;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track { container-type: inline-size; }
.carousel__slide { min-height: 110cqi; scroll-snap-align: center; scroll-snap-stop: always; }

/* Icon-only arrows: no fill or outline, but a full-size tap area. They sit
   above the track's shadow padding, which overlaps their column slightly.
   They stay a fixed distance from the top of the card (about the middle of the
   shortest one), so they don't move under the pointer as the height changes. */
.carousel__arrow {
  position: relative;
  z-index: 1;
  margin-top: 15rem;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-mist-600);
  cursor: pointer;
  transition: color 0.18s var(--ease), transform 0.18s var(--ease);
}
.carousel__arrow:hover { color: var(--c-sky-800); }
.carousel__arrow--prev:hover { transform: translateX(-3px); }
.carousel__arrow--next:hover { transform: translateX(3px); }

/* Phones: the arrows move out into the page gutter, and the cards get a little
   less padding, so the text column stays readable. */
@media (max-width: 640px) {
  .carousel__stage {
    margin-inline: calc(-1 * clamp(1.15rem, 4vw, 2.5rem));
    column-gap: var(--s-1);
  }
  .carousel__arrow { width: 36px; height: 44px; }
  .carousel__arrow svg { width: 24px; height: 24px; }
  .carousel .card { padding: var(--s-5); }
}

/* Booking options — the buttons line up at the bottom of both cards */
.booking-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.booking-option h3,
.booking-option p { margin: 0; }
.booking-option .btn-row { margin-top: auto; padding-top: var(--s-2); align-self: stretch; }

/* Pricing schedule */
.price-list { list-style: none; margin: 0; padding: 0; }
.price-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  margin: 0;
  border-bottom: 1px solid var(--c-line);
}
.price-list li:first-child { padding-top: 0; }
.price-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.price-list__name { display: block; font-weight: 600; color: var(--c-mist-800); }
.price-list__meta { display: block; font-size: var(--t-sm); color: var(--c-muted); }
.price-list__price {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--c-sky-800);
  white-space: nowrap;
}

/* One collapsible card per care setting. The header (title, optional meta and
   the +/× icon) is the accordion trigger; the note and rows live in the panel. */
.price-group h3 { margin: 0; }
.price-group .accordion__trigger { padding: 0; }
.price-group__title {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-xl);
  line-height: 1.15;
}
.price-group__meta {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--c-body);
}
.price-group .accordion__icon { width: 32px; height: 32px; }
/* Collapsed content stays out of the tab order and away from screen readers. */
.price-group__panel > div { visibility: hidden; transition: visibility 0s 0.3s; }
.price-group__panel.is-open > div { visibility: visible; transition-delay: 0s; }
.price-group__note { margin: var(--s-5) 0 0; }
.price-group .price-list {
  margin-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.price-group .price-list li:first-child { padding-top: var(--s-4); }

/* --------------------------------------------------------------------------
   8. Page banner (interior pages)
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 1.5rem + 6vw, 5rem);
  background:
    radial-gradient(55% 100% at 85% 15%, var(--c-mist-100) 0%, transparent 65%),
    radial-gradient(50% 90% at 10% 90%, var(--c-sky-50) 0%, transparent 60%),
    var(--c-canvas);
  border-bottom: 1px solid var(--c-line);
}
.page-banner__inner { max-width: var(--w-prose); }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  list-style: none;
  margin: 0 0 var(--s-4);
  padding: 0;
  font-size: var(--t-xs);
  color: var(--c-muted);
}
.breadcrumb li { margin: 0; }
.breadcrumb a { color: var(--c-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-sky-800); text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.5em; color: var(--c-mist-200); }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */
.form-shell {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 2vw, 2.75rem);
  box-shadow: var(--shadow-md);
}

.form-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }

.field > label,
.fieldset__legend {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--c-mist-800);
}
.req { color: var(--c-red); margin-left: 0.15em; }
/* Hints sit inside the <label>, after the text, and never inherit its weight. */
.hint {
  font-size: var(--t-xs);
  color: var(--c-muted);
  font-weight: 400;
  margin-left: 0.5em;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.95rem;
  font-family: inherit;
  font-size: var(--t-base);
  color: var(--c-ink);
  background: var(--c-canvas);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease);
  appearance: none;
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%235C5C66' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 11px;
  padding-right: 2.5rem;
}

.input::placeholder, .textarea::placeholder { color: #ADADB6; }

.input:hover, .select:hover, .textarea:hover { border-color: var(--c-sky-200); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  background: var(--c-surface);
  border-color: var(--c-sky-400);
  box-shadow: 0 0 0 4px var(--c-sky-50);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--c-red);
  background: #FEFAFA;
}
.input[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--c-red-soft); }

.field__error {
  font-size: var(--t-xs);
  color: var(--c-red);
  font-weight: 500;
  min-height: 1em;
}
.field__error:empty { display: none; }

.fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.fieldset__legend { padding: 0; margin-bottom: var(--s-1); }

.choice-grid { display: grid; gap: var(--s-2); }
@media (min-width: 520px) { .choice-grid--2 { grid-template-columns: 1fr 1fr; } }

.choice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-canvas);
  cursor: pointer;
  font-size: var(--t-sm);
  line-height: 1.5;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.choice:hover { border-color: var(--c-sky-200); background: var(--c-sky-50); }
.choice input {
  margin: 0.2rem 0 0;
  width: 18px; height: 18px;
  accent-color: var(--c-sky-600);
  flex-shrink: 0;
}
.choice:has(input:checked) { border-color: var(--c-sky-400); background: var(--c-sky-50); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-body);
  line-height: 1.6;
}
.consent input {
  margin: 0.25rem 0 0;
  width: 18px; height: 18px;
  accent-color: var(--c-sky-600);
  flex-shrink: 0;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.form-note { font-size: var(--t-xs); color: var(--c-muted); margin: 0; flex-basis: 100%; }

/* Everything stacked inside .form-actions takes a full row of its own. */
.form-actions > .consent,
.form-actions > .field__error,
.form-actions > .btn-row { flex-basis: 100%; }

.form-status {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--ok {
  background: var(--c-sky-50);
  border: 1px solid var(--c-sky-200);
  color: var(--c-sky-800);
}
.form-status--error {
  background: var(--c-red-soft);
  border: 1px solid #E5B6B3;
  color: #8E2C27;
}
.form-status--busy {
  background: var(--c-mist-100);
  border: 1px solid var(--c-mist-200);
  color: var(--c-mist-600);
}
.form-status a { color: inherit; font-weight: 600; }

/* Honeypot — hidden from humans, catches bots */
.hp-field {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

.btn[data-busy="true"] { opacity: 0.65; pointer-events: none; }

/* --------------------------------------------------------------------------
   10. Accordion (FAQ / education)
   -------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--c-line); }
.accordion__item { border-bottom: 1px solid var(--c-line); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  font-family: var(--f-body);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--c-mist-800);
  text-align: left;
  cursor: pointer;
}
.accordion__trigger:hover { color: var(--c-sky-800); }
.accordion__icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-sky-50);
  color: var(--c-sky-600);
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease);
  font-size: 1rem;
  line-height: 1;
}
.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
  background: var(--c-sky-200);
}
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.accordion__panel > div { overflow: hidden; }
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel .accordion__body { padding-bottom: var(--s-5); max-width: var(--w-prose); }

/* --------------------------------------------------------------------------
   11. Timeline (education / courses)
   -------------------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--c-sky-200), var(--c-mist-200));
}
.timeline li {
  position: relative;
  padding: 0 0 var(--s-6) var(--s-6);
  margin: 0;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 3px solid var(--c-sky-300);
}
.timeline__year {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-sky-600);
  margin-bottom: var(--s-1);
}
.timeline__title { font-weight: 600; color: var(--c-mist-800); margin: 0 0 var(--s-1); }
.timeline__meta { font-size: var(--t-sm); color: var(--c-muted); margin: 0; }

/* --------------------------------------------------------------------------
   12. Callout / CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(140deg, var(--c-sky-100) 0%, var(--c-mist-100) 100%);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.5rem);
  text-align: center;
  border: 1px solid var(--c-sky-100);
}
.cta-band h2 { margin-bottom: var(--s-3); }
.cta-band p { max-width: 54ch; margin-inline: auto; margin-bottom: var(--s-6); }

.callout {
  border-left: 3px solid var(--c-sky-400);
  background: var(--c-sky-50);
  padding: var(--s-5);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-sm);
}
.callout--red { border-left-color: var(--c-red); background: var(--c-red-soft); }
.callout strong { color: var(--c-mist-800); }

/* --------------------------------------------------------------------------
   13. Booking embed
   -------------------------------------------------------------------------- */
.embed-shell {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  min-height: 620px;
  position: relative;
}
.embed-shell iframe { width: 100%; min-height: 900px; border: 0; display: block; }

.embed-fallback {
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(2rem, 1.2rem + 4vw, 4.5rem) var(--s-5);
  min-height: 620px;
  gap: var(--s-4);
}
.embed-fallback__inner { max-width: 46ch; }

@media (max-width: 640px) {
  .embed-shell { min-height: 560px; }
  .embed-shell iframe { min-height: 1050px; }
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
/* A lavender haze, not a footer. There is no fill and no edge anywhere in
   here: the page simply thickens into drifting mist and the document ends
   inside it. Everything stays pale, so the type keeps the same ink colours it
   uses in the rest of the page and the whole thing stays quiet to look at.

   Two rules govern every layer below:
     · Nothing may carry alpha at y=0. A layer still visible where the element
       is clipped draws exactly the hard line this effect exists to remove.
       The test is  centre − (radius × final-stop) > 0.
     · Vertical measurements inside the dissolve are expressed in --haze, not
       percentages, so the transition keeps its shape no matter how tall the
       footer grows. Below it, percentages are fine — a wash that stretches
       with the content is the point.

   Contrast: the deepest the wash gets under any text is about #C6C2DA, which
   holds --c-mist-800 at roughly 4.9:1. Don't deepen the pools without
   re-checking that. */
.site-footer {
  --haze: clamp(200px, 26vw, 380px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
  color: var(--c-mist-800);
  padding-block: calc(var(--haze) + var(--s-5)) var(--s-6);
  font-size: var(--t-sm);
  margin-top: var(--s-8);

}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Wisps. Flat, wide ellipses read as mist drifting sideways rather than as
       blobs, and being near-white they thin the haze wherever they fall. */
    radial-gradient(30% 5% at 26% 44%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 72%),
    radial-gradient(22% 4% at 68% 56%, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 72%),
    radial-gradient(34% 6% at 42% 74%, rgba(255, 255, 255, 0.4),  rgba(255, 255, 255, 0) 74%),
    radial-gradient(19% 4% at 86% 38%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 72%),
    radial-gradient(26% 5% at 58% 90%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 74%),

    /* A breath of the sky blue that carries the rest of the site — barely
       there, just enough to cool the lavender. */
    radial-gradient(46% 20% at 28% 34%, rgba(143, 191, 214, 0.15), rgba(143, 191, 214, 0) 76%),
    radial-gradient(38% 18% at 88% 64%, rgba(143, 191, 214, 0.13), rgba(143, 191, 214, 0) 78%),

    /* Lavender wisps, the same flat shape as the white ones but adding
       density instead of taking it away. */
    radial-gradient(28% 6% at 16% 64%, rgba(150, 145, 190, 0.2),  rgba(150, 145, 190, 0) 74%),
    radial-gradient(32% 5% at 74% 82%, rgba(150, 145, 190, 0.18), rgba(150, 145, 190, 0) 74%),

    /* Soft blooms in the upper dissolve, keyed to --haze so the entrance keeps
       its shape at any footer height. Uneven heights stop it reading as a band. */
    radial-gradient(30% calc(var(--haze) * 0.5)  at 12% calc(var(--haze) * 0.72),
      rgba(168, 164, 201, 0.3),  rgba(168, 164, 201, 0) 74%),
    radial-gradient(26% calc(var(--haze) * 0.62) at 40% calc(var(--haze) * 0.62),
      rgba(168, 164, 201, 0.26), rgba(168, 164, 201, 0) 72%),
    radial-gradient(30% calc(var(--haze) * 0.56) at 68% calc(var(--haze) * 0.68),
      rgba(158, 154, 195, 0.3),  rgba(158, 154, 195, 0) 72%),
    radial-gradient(26% calc(var(--haze) * 0.66) at 95% calc(var(--haze) * 0.6),
      rgba(168, 164, 201, 0.28), rgba(168, 164, 201, 0) 70%),

    /* Pools gathering toward the bottom corners, so the mist keeps moving
       right down to where the page ends. */
    radial-gradient(50% 30% at 1%  100%, rgba(150, 145, 190, 0.26), rgba(150, 145, 190, 0) 74%),
    radial-gradient(44% 26% at 100% 97%, rgba(150, 145, 190, 0.22), rgba(150, 145, 190, 0) 74%),

    /* Ground tone: nothing at the top, settling into pale lavender by the
       bottom. It never becomes opaque, so it can't read as a block. */
    linear-gradient(to bottom,
      rgba(168, 164, 201, 0)    0,
      rgba(168, 164, 201, 0.05) calc(var(--haze) * 0.34),
      rgba(168, 164, 201, 0.14) calc(var(--haze) * 0.68),
      rgba(168, 164, 201, 0.24) var(--haze),
      rgba(168, 164, 201, 0.38) 100%);
}
/* On a pale haze the footer uses the same ink as the rest of the page, which
   is a good part of why it now reads as a continuation of it. */
.site-footer h4 {
  color: var(--c-mist-800);
  font-size: var(--t-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.site-footer a { color: var(--c-mist-800); text-decoration: none; }
.site-footer a:hover { color: var(--c-sky-900); text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
/* Give the brand column extra room so the tagline stays on one line. */
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
.footer-brand { max-width: 34ch; }
.footer-brand .brand { color: var(--c-mist-800); margin-bottom: var(--s-4); }
.footer-brand .brand:hover { color: var(--c-mist-800); }
.footer-brand .brand__tag { color: var(--c-sky-900); }
.footer-brand p { color: var(--c-mist-800); }

.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: var(--s-2); }

.footer-bottom {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(78, 74, 107, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
  color: var(--c-mist-800);
}
.footer-bottom p { margin: 0; }

/* Booking block at the top of the footer. The footer shrinks type and recolours
   every link, so this restores body size and lets buttons keep their own colours. */
.footer-booking {
  max-width: 860px;
  /* Sit at the very top of the footer, up inside the haze's dissolve. */
  margin: calc(-1 * var(--haze)) auto var(--s-9);
  font-size: var(--t-base);
  margin-bottom: 15rem;
}
.site-footer .btn,
.site-footer .btn:hover { color: var(--btn-fg); text-decoration: none; }

/* --------------------------------------------------------------------------
   15. Motion
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .carousel__track { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   16. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .btn, .nav__toggle, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .form-shell { border: 1px solid #ccc; box-shadow: none; }
  /* Print every price group open. */
  .accordion__panel { grid-template-rows: 1fr !important; }
  .price-group__panel > div { visibility: visible !important; }
}