/* ==========================================================================
   Hertz2Hearts — "Sage" design system
   Aged care music wellbeing · Perth, WA

   One stylesheet, no build step, no dependencies.
   Everything is driven by the tokens in :root — change them there and the
   whole site follows.

   Contents
   01  Tokens
   02  Reset & base
   03  Typography
   04  Layout primitives
   05  Buttons, links, chips
   06  Media
   07  Header & navigation
   08  Hero
   09  Value band
   10  Sections & splits
   11  Bento / cards
   12  Steps
   13  Dark band
   14  Benefits
   15  Comparison
   16  Testimonials
   17  FAQ
   18  CTA band
   19  Forms
   20  Footer
   21  Motion & reveal
   22  Utilities
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   ========================================================================== */
:root {
  /* --- Brand colour ----------------------------------------------------
     Built from the logo blue #85B9F4. That blue is light — it reaches only
     1.9:1 on warm white — so it works as a tint, a highlight and an accent
     on dark, while the darker steps carry anything that has to be read.
     Every pairing used on this site meets WCAG AA (4.5:1 body text,
     3:1 large text and UI). */
  --brand-50:   #EFF5FD;
  --brand-100:  #DEEBFB;
  --brand-200:  #C4DCF8;
  --brand-300:  #A5CAF6;
  --brand-400:  #85B9F4;  /* THE LOGO BLUE — tints, glows, borders, on dark */
  --brand-500:  #4E8BD8;  /* fills, borders, large text — 3.3:1 on paper    */
  --brand-700:  #2E6DB0;  /* buttons, links, eyebrows — 5.1:1 on paper      */
  --brand-800:  #24558A;  /* headings on brand tints                        */
  --brand-900:  #112A41;  /* dark bands and footer — 14.7:1 with white      */

  /* Sage, the brief's original primary, kept on as a secondary tint. It
     stops an all-blue palette reading cold and clinical, which matters
     more than usual for aged care. */
  --sage-100:  #E7EDE8;
  --sage-300:  #B4C7BA;
  --sage-500:  #6F8F7A;
  --sage-700:  #4E6B59;   /* secondary text/icon — 5.5:1 on paper          */

  --gold-100:  #F7EFDC;
  --gold-300:  #E7D2A3;
  --gold-500:  #D6B46A;   /* brief accent — accent fills, never text bg    */
  --gold-700:  #7F611E;   /* accent used AS text — 5.4:1 on warm white,
                             5.0:1 on the gold-100 tint it sits in         */

  --paper:     #FAF8F4;   /* brief background — kept warm on purpose      */
  --paper-2:   #F4F1EA;   /* alternate warm band                           */
  --white:     #FFFFFF;

  --ink:       #2F3B46;   /* brief text — 12.3:1 on paper                  */
  --ink-soft:  #55636E;   /* secondary copy — 6.4:1 on paper               */
  --ink-mute:  #63707B;   /* meta, captions — 4.8:1 on paper               */

  /* --- Type ----------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Fluid display sizes. Cormorant runs small for its point size, so these
     are set a notch larger than a sans-serif equivalent would be. */
  --fs-display: clamp(2.85rem, 1.6rem + 5.4vw, 5.6rem);
  --fs-h1:      clamp(2.5rem, 1.6rem + 3.9vw, 4.4rem);
  --fs-h2:      clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
  --fs-h3:      clamp(1.45rem, 1.2rem + 1.0vw, 1.9rem);
  --fs-h4:      1.2rem;

  /* Body sits at 17.5px — deliberately larger than a typical marketing
     site, because a meaningful share of this audience is over 70. */
  --fs-body:    1.09rem;
  --fs-lead:    clamp(1.15rem, 1.05rem + 0.4vw, 1.32rem);
  --fs-sm:      0.95rem;
  --fs-xs:      0.83rem;

  /* --- Space ---------------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.75rem;  --sp-8: 3.5rem;
  --sp-9: 5rem;     --sp-10: 7rem;

  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);
  --container: 1240px;
  --gutter: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

  /* --- Shape ---------------------------------------------------------- */
  --r-xs: 8px;   --r-sm: 12px;  --r-md: 18px;
  --r-lg: 26px;  --r-xl: 34px;  --r-2xl: 44px;  --r-pill: 999px;

  /* --- Shadow ---------------------------------------------------------
     Warm-tinted rather than neutral grey — grey shadows on a cream page
     read as dirt. */
  --sh-sm: 0 1px 2px rgba(47, 59, 70, 0.05), 0 2px 8px rgba(47, 59, 70, 0.04);
  --sh-md: 0 2px 4px rgba(47, 59, 70, 0.04), 0 10px 28px rgba(47, 59, 70, 0.07);
  --sh-lg: 0 4px 10px rgba(47, 59, 70, 0.05), 0 24px 60px rgba(47, 59, 70, 0.11);
  --sh-xl: 0 8px 20px rgba(47, 59, 70, 0.07), 0 40px 90px rgba(47, 59, 70, 0.16);

  /* --- Motion --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 480ms;
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
figure { margin: 0; }   /* clear the UA default 40px side margin */
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Visible, high-contrast focus for every interactive element. Not optional
   for this audience — keyboard and switch access matter here. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--sage-700);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--gold-300); color: var(--ink); }

.skip-link {
  position: absolute;
  left: var(--sp-4); top: -100px;
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand-900);
  color: var(--white);
  border-radius: var(--r-sm);
  font-weight: 500;
  text-decoration: none;
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

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


/* ==========================================================================
   03  TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -0.01em; }
h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

.display { font-size: var(--fs-display); }

/* A phrase inside a heading set in italic Cormorant — the one flourish the
   design allows itself. Used once or twice per page, no more. */
.accent-italic {
  font-style: italic;
  font-weight: 400;
  color: var(--brand-700);
}
.on-dark .accent-italic { color: var(--gold-300); }

p { margin: 0 0 var(--sp-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  background: var(--gold-500);
  border-radius: 2px;
  flex: none;
}
.on-dark .eyebrow { color: var(--gold-300); }
.on-dark .eyebrow::before { background: var(--gold-500); }

.section-head { max-width: 720px; margin-bottom: var(--sp-8); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { color: var(--ink-soft); }
.section-head--center p { margin-inline: auto; }

/* Dark context */
.on-dark { color: rgba(255, 255, 255, 0.86); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark .display { color: var(--white); }
.on-dark .lead, .on-dark p { color: rgba(255, 255, 255, 0.82); }


/* ==========================================================================
   04  LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 880px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.section--paper2 { background: var(--paper-2); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.grid { display: grid; gap: var(--sp-5); }
@media (min-width: 720px) {
  .g-2 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .g-3 { grid-template-columns: repeat(3, 1fr); }
  .g-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 560px) and (max-width: 999px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Two-column split with an optional weighting */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 940px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--text-first { grid-template-columns: 1.05fr 0.95fr; }
  .split--media-wide { grid-template-columns: 0.92fr 1.08fr; }
  .split--top { align-items: start; }
}


/* ==========================================================================
   05  BUTTONS, LINKS, CHIPS
   ========================================================================== */
.btn {
  --btn-bg: var(--brand-700);
  --btn-fg: var(--white);
  --btn-bd: var(--brand-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.92em 1.75em;
  min-height: 52px;              /* generous hit target */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease),
              background-color 240ms var(--ease), color 240ms var(--ease),
              border-color 240ms var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform 240ms var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn:hover svg { transform: translateX(3px); }
/* A button keeps its own text colour in every state. Without this the
   generic `a:hover` rule below wins on specificity (0,1,1 beats .btn's
   0,1,0) and the white text on the blue buttons flips to dark blue. */
.btn:hover, .btn:focus, .btn:active, .btn:visited { color: var(--btn-fg); }
.btn:active { transform: translateY(0); }

/* Primary call to action: dark blue with white text. On dark surfaces it
   also takes a light edge, otherwise a navy button on a navy band loses
   its shape (they sit only 1.9:1 apart). */
.btn--cta {
  --btn-bg: var(--brand-800);
  --btn-fg: var(--white);
  --btn-bd: var(--brand-800);
}
.btn--cta:hover { --btn-bg: var(--brand-700); --btn-bd: var(--brand-700); }

.on-dark .btn--cta,
.cta-band .btn--cta,
.site-footer .btn--cta { --btn-bd: rgba(255, 255, 255, 0.42); }
.on-dark .btn--cta:hover,
.cta-band .btn--cta:hover,
.site-footer .btn--cta:hover { --btn-bd: rgba(255, 255, 255, 0.72); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand-700);
  --btn-bd: var(--brand-300);
}
.btn--ghost:hover { --btn-bg: var(--brand-50); --btn-bd: var(--brand-500); }

.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.42);
}
.btn--on-dark:hover { --btn-bg: rgba(255, 255, 255, 0.12); --btn-bd: rgba(255, 255, 255, 0.7); }

.btn--lg { padding: 1.05em 2.15em; min-height: 58px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Text link with a sliding arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--brand-700);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--brand-400);
  transition: border-color 240ms var(--ease), color 240ms var(--ease), gap 240ms var(--ease);
}
.link-arrow svg { width: 17px; height: 17px; transition: transform 240ms var(--ease); }
.link-arrow:hover { border-color: var(--brand-700); }
.link-arrow:hover svg { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--gold-300); border-color: rgba(214, 180, 106, 0.5); }
.on-dark .link-arrow:hover { border-color: var(--gold-300); }

a { color: var(--brand-700); }
a:hover { color: var(--brand-800); }

.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5em 1em;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
}
.chip::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
  flex: none;
}
.chip--gold::before { background: var(--gold-500); }
.chip--sage::before { background: var(--sage-500); }
.on-dark .chip::before { background: var(--brand-400); }
.on-dark .chip {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(6px);
}

/* Small circular icon tile used across cards and lists */
.icon-tile {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 14px;
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-100);
}
.icon-tile svg { width: 22px; height: 22px; }
.icon-tile--gold { background: var(--gold-100); border-color: var(--gold-300); color: var(--gold-700); }
.icon-tile--sage { background: var(--sage-100); border-color: var(--sage-300); color: var(--sage-700); }
.on-dark .icon-tile {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--brand-400);
}

/* Illustrated icon tile. The artwork is a full-bleed coloured square, so the
   rounding is done here — the radius is set past the corner curve baked into
   the image, which is why the corners were flattened to the tile colour. */
.icon-art {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 18px;
  box-shadow: var(--sh-sm);
}


/* ==========================================================================
   06  MEDIA
   ========================================================================== */
.media {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--brand-50);
}
.media--1x1  { aspect-ratio: 1 / 1; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x4  { aspect-ratio: 3 / 4; }
.media--4x5  { aspect-ratio: 4 / 5; }
.media--soft { border-radius: var(--r-xl); }
.media--flush { border-radius: 0; }
.media--shadow { box-shadow: var(--sh-lg); }

.figure { position: relative; }

/* Overlapping image pair — the signature of the "story" sections */
.media-stack { position: relative; }
.media-stack__main { box-shadow: var(--sh-lg); }
/* Mobile-first, and deliberately sharing the 940px boundary with .split:
   below it the stack spans the full container, so a large negative offset
   would hang off the viewport edge. Two rules, one breakpoint, no gap. */
.media-stack__inset {
  position: absolute;
  right: -3%;
  bottom: -8%;
  width: 42%;
  border: 6px solid var(--paper);
  box-shadow: var(--sh-lg);
  border-radius: var(--r-lg);
}
.media-stack--left .media-stack__inset { right: auto; left: -3%; }

@media (min-width: 940px) {
  .media-stack__inset { width: 46%; right: -6%; bottom: -12%; border-width: 8px; }
  .media-stack--left .media-stack__inset { right: auto; left: -6%; }
}

/* A soft warm tint over photographs so text can sit on top of them.
   The image is taken out of flow and stretched behind, so the content
   inside the veil lays out normally instead of competing with it. */
.media-veil {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  display: flex;
  align-items: flex-end;
}
.media-veil > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-veil::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(178deg,
              rgba(17, 42, 65, 0.10) 0%,
              rgba(17, 42, 65, 0.42) 46%,
              rgba(17, 42, 65, 0.84) 100%);
}
/* Paint order: image, then veil, then content on top. */
.media-veil > *:not(img) { position: relative; z-index: 1; }

/* A wide photographic band carrying a statement heading. */
.media-veil--band { min-height: clamp(300px, 46vh, 480px); }
.media-veil__body {
  width: 100%;
  margin: 0;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
}
.media-veil__title {
  font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.7rem);
  line-height: 1.14;
  color: var(--white);
  max-width: 22ch;
  margin: 0;
}


/* ==========================================================================
   07  HEADER & NAVIGATION
   ========================================================================== */
/* The header is a white pill floating clear of the page rather than a full
   bleed bar. The <header> itself is transparent and only provides the
   sticky positioning and the inset; the pill is .site-header__inner. */
:root { --header-pill-h: 72px; --header-gap: var(--sp-3); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  padding-block: var(--header-gap);
  pointer-events: none;          /* the gaps around the pill stay clickable */
}
.site-header > * { pointer-events: auto; }

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-pill-h);
  /* Inset from the viewport on every screen, capped at the content width.
     Overrides .container's padding, which would otherwise sit inside the
     pill instead of outside it. */
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
  transition: box-shadow 300ms var(--ease);
}
.site-header.is-stuck .site-header__inner { box-shadow: var(--sh-lg); }

/* Below the pill's breakpoint there is no centre column to fill. */
@media (max-width: 1039px) {
  .site-header__inner { grid-template-columns: auto auto; justify-content: space-between; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--ink);
}
/* The logo is a transparent 4:3 lockup with no padding of its own, so it is
   sized by height and left unclipped — a circular crop would cut the
   "HERTZ2HEARTS" ring off. */
.brand img { height: 42px; width: auto; }
/* Wordmark logo (concept 1). Its counters are punched to real transparency,
   so the same asset whitens cleanly on the dark footer via filter. */
.site-footer .brand__logo { filter: brightness(0) invert(1); }
.brand__name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.brand__tag {
  font-family: var(--font-body);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brand-700);
  margin-top: 3px;
}

.nav { display: none; gap: var(--sp-1); justify-self: center; }
@media (min-width: 1040px) { .nav { display: flex; } }
.nav a {
  position: relative;
  padding: 0.6em 0.95em;
  border-radius: var(--r-pill);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--brand-50); }
.nav a[aria-current="page"] { color: var(--brand-800); font-weight: 600; background: var(--brand-50); }

/* CTA sits flush inside the pill, with the arrow in its own dark disc. */
.header-cta { display: none; }
@media (min-width: 1040px) {
  .header-cta {
    display: inline-flex;
    min-height: 56px;
    padding: 0.4em 0.4em 0.4em 1.5em;
    gap: var(--sp-3);
  }
  .header-cta svg {
    width: 38px; height: 38px;
    padding: 11px;
    border-radius: 50%;
    background: var(--white);
    color: var(--brand-800);
  }
  .header-cta:hover svg { transform: translateX(2px); }
}

.nav-toggle {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 50%;
  cursor: pointer;
  color: var(--brand-800);
}
@media (min-width: 1040px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Dropdown panel, styled to match the floating pill above it. */
.mobile-nav { display: none; padding-top: var(--header-gap); }
.mobile-nav.is-open { display: block; }
.mobile-nav .container {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-2) var(--sp-5) var(--sp-5);
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}
.mobile-nav a {
  display: block;
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 500;
  text-decoration: none;
}
.mobile-nav a[aria-current="page"] { color: var(--brand-700); font-weight: 600; }
/* The link colour above must not bleed into the button — it has its own. */
.mobile-nav .btn { margin-top: var(--sp-5); border-bottom: 0; color: var(--btn-fg); }


/* ==========================================================================
   08  HERO
   Large inset photographic card. The page background frames it, which is
   what gives the site its "calm gallery" feel rather than a full-bleed
   corporate banner.
   ========================================================================== */
/* Full-bleed: the hero spans the whole viewport width, edge to edge, and
   its own container wrapper is neutralised. The inner body below re-applies
   the page's content column so hero text still lines up with the sections
   beneath it. */
.hero { padding: 0; }
.hero > .container { max-width: none; padding-inline: 0; }

/* The hero slides up beneath the floating header so the photograph runs to
   the very top of the page and the white pill sits over it. The header is
   sticky (still in flow), so this negative margin is exactly its height. */
.hero:first-child {
  margin-top: calc(-1 * (var(--header-pill-h) + var(--header-gap) * 2 + 2px));
}

.hero__card {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  min-height: clamp(560px, 78vh, 820px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero__card::after {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(101deg, rgba(17, 42, 65, 0.90) 0%, rgba(17, 42, 65, 0.72) 42%,
                    rgba(17, 42, 65, 0.28) 74%, rgba(17, 42, 65, 0.18) 100%),
    linear-gradient(to top, rgba(17, 42, 65, 0.72) 0%, rgba(17, 42, 65, 0) 55%);
}

.hero__body {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* Top padding clears the floating header; content is bottom-aligned. */
  padding: calc(var(--header-pill-h) + var(--header-gap) * 2 + var(--sp-5))
           var(--gutter) clamp(2.5rem, 1.5rem + 4vw, 5rem);
  display: grid;
  gap: var(--sp-6);
  align-items: end;
}
@media (min-width: 1000px) {
  .hero__body { grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: var(--sp-8); }
}

.hero h1 {
  font-size: var(--fs-display);
  max-width: 15ch;
  margin-bottom: var(--sp-5);
}
.hero .lead { max-width: 52ch; margin-bottom: var(--sp-6); }

/* Floating "session card" — the one piece of visual delight in the hero */
.hero__aside {
  display: none;
  justify-self: end;
  width: min(320px, 100%);
}
@media (min-width: 1000px) { .hero__aside { display: block; } }

.hero-card {
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--sh-lg);
}
.hero-card img { border-radius: var(--r-md); margin-bottom: var(--sp-4); }
.hero-card__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--sp-2);
}
.hero-card p {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--white);
  margin: 0;
}
.hero-card__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.85);
}

.hero__chips { margin-top: var(--sp-6); }


/* ==========================================================================
   09  VALUE BAND
   The horizontal band under the hero. The inspiration screenshots use big
   numbers here; this brand is new and has no numbers worth claiming yet,
   so it carries three qualitative proof points instead.
   ========================================================================== */
.value-band { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.value-band__grid {
  display: grid;
  gap: var(--sp-5);
  border-block: 1px solid var(--line);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 860px) {
  .value-band__grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .value-band__item + .value-band__item {
    border-left: 1px solid var(--line);
    padding-left: clamp(1.5rem, 1rem + 2vw, 3rem);
  }
  .value-band__item:not(:last-child) { padding-right: clamp(1.5rem, 1rem + 2vw, 3rem); }
}
.value-band__item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.value-band__item h3 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-1);
}
.value-band__item p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }


/* ==========================================================================
   10  SECTIONS & SPLITS
   ========================================================================== */
/* Quiet numbered/lettered list used inside story sections */
.marker-list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.marker-list li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.marker-list strong { display: block; margin-bottom: 2px; font-weight: 600; }
.marker-list span { color: var(--ink-soft); font-size: var(--fs-sm); }
.marker-list .tick {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-800);
}
.marker-list .tick svg { width: 14px; height: 14px; }
.on-dark .marker-list .tick { background: rgba(214, 180, 106, 0.22); color: var(--gold-300); }
.on-dark .marker-list span { color: rgba(255, 255, 255, 0.78); }

/* Pull-quote / statement block */
.statement {
  margin: 0;
  padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}
.statement p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.35rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 24ch;
  margin: 0;
}
.statement footer {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--ink-mute);
}


/* ==========================================================================
   11  BENTO / CARDS
   ========================================================================== */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease),
              border-color 320ms var(--ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--brand-200); }
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--ink-soft); font-size: var(--fs-sm); }
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-5);
}
.card__tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-700);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.card__tag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-500);
}
.card .icon-tile { margin-bottom: var(--sp-5); }

/* Image-led card: photo bleeds to the card edge */
.card--media { padding: 0; overflow: hidden; }
.card--media > img { width: 100%; }
.card--media .card__body { padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); display: flex; flex-direction: column; flex: 1; }

/* Full-bleed photo card with text over the image */
.card--photo {
  padding: 0;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  border: 0;
}
.card--photo .media-veil { border-radius: 0; flex: 1; display: flex; align-items: flex-end; }
.card--photo .card__body { padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); width: 100%; }
.card--photo h3, .card--photo p { color: var(--white); }
.card--photo p { color: rgba(255, 255, 255, 0.84); }

/* The bento arrangement: a 6-column grid with spans that collapse cleanly */
.bento { display: grid; gap: var(--sp-4); }
@media (min-width: 700px) { .bento { grid-template-columns: repeat(6, 1fr); } }
.bento > * { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .bento__3 { grid-column: span 3; }
  .bento__2 { grid-column: span 2; }
  .bento__4 { grid-column: span 4; }
  .bento__6 { grid-column: span 6; }
}


/* ==========================================================================
   12  STEPS
   ========================================================================== */
.steps { display: grid; gap: var(--sp-4); counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  position: relative;
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.step__num {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: var(--sp-5);
  border-radius: 16px;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--sh-sm);
  /* Default (step 1) — blue. Steps 2 and 3 take the modifiers below, so
     each block carries a different brand tint. */
  background: var(--brand-100);
  border: 1px solid var(--brand-200);
  color: var(--brand-800);
}
.step__num--blue { background: var(--brand-100); border-color: var(--brand-200); color: var(--brand-800); }
.step__num--gold { background: var(--gold-100);  border-color: var(--gold-300);  color: var(--gold-700); }
.step__num--sage { background: var(--sage-100);  border-color: var(--sage-300);  color: var(--sage-700); }

/* Optically centre the numerals. Cormorant Garamond uses old-style figures:
   "1" and "2" sit at x-height, while "3" carries a descender that drops below
   the baseline — so plain box-centring leaves it visibly low. Each figure is
   nudged up by its own measured ink offset so all three read as centred. */
.step__num__fig { display: block; }
.steps .step:nth-child(1) .step__num__fig { transform: translateY(-2.6px); }
.steps .step:nth-child(2) .step__num__fig { transform: translateY(-2.1px); }
.steps .step:nth-child(3) .step__num__fig { transform: translateY(-5.6px); }
.step h3 { font-size: 1.28rem; margin-bottom: var(--sp-2); }
.step p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
/* Connector line between steps on wide screens */
@media (min-width: 860px) {
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem) + 26px);
    right: calc(var(--sp-4) * -1);
    width: var(--sp-4);
    height: 1px;
    background: var(--line);
  }
}


/* ==========================================================================
   13  DARK BAND
   ========================================================================== */
.band-dark {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: var(--brand-900);
  padding: clamp(2.5rem, 1.8rem + 4vw, 5rem);
}
/* Soft radial warmth so the dark green doesn't read as flat black-green */
.band-dark::before {
  content: "";
  position: absolute;
  top: -30%; right: -10%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(214, 180, 106, 0.20) 0%, rgba(214, 180, 106, 0) 68%);
  pointer-events: none;
}
.band-dark::after {
  content: "";
  position: absolute;
  bottom: -40%; left: -12%;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(133, 185, 244, 0.20) 0%, rgba(133, 185, 244, 0) 68%);
  pointer-events: none;
}
.band-dark > * { position: relative; z-index: 1; }


/* ==========================================================================
   14  BENEFITS
   ========================================================================== */
.benefit-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 620px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .benefit-grid { grid-template-columns: repeat(3, 1fr); } }

.benefit {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease);
}
.benefit:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.22); }
.benefit h3 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-1);
}
.benefit p { font-size: var(--fs-sm); margin: 0; }


/* ==========================================================================
   15  COMPARISON  (Music Facilitation vs Registered Music Therapy)
   ========================================================================== */
.compare { display: grid; gap: var(--sp-4); }
@media (min-width: 860px) { .compare { grid-template-columns: repeat(2, 1fr); } }

.compare__col {
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--white);
}
.compare__col--alt { background: var(--brand-50); border-color: var(--brand-200); }
.compare__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4em 0.9em;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--sage-100);
  color: var(--sage-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.compare__col--alt .compare__label { background: var(--gold-100); color: var(--gold-700); }
.compare__col h3 { margin-bottom: var(--sp-3); }
.compare__col > p { font-size: var(--fs-sm); color: var(--ink-soft); }
.compare ul {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--sp-3);
}
.compare__col--alt ul { border-top-color: var(--brand-200); }
.compare li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}
.compare li svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--brand-500); }
.compare__note {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-mute);
  margin-top: var(--sp-2);
}


/* ==========================================================================
   16  TESTIMONIALS
   ========================================================================== */
.quote-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
}
.quote-card__mark {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 0.7;
  color: var(--gold-500);
  margin-bottom: var(--sp-4);
}
.quote-card blockquote {
  margin: 0 0 var(--sp-5);
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
}
.quote-card figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
/* The logo used in place of a headshot: never cropped to a circle. */
.quote-card figcaption img.is-logo { width: auto; height: 40px; border-radius: 0; object-fit: contain; }
.quote-card figcaption strong { display: block; font-weight: 600; }
.quote-card figcaption span { color: var(--ink-mute); font-size: var(--fs-xs); }
/* Initial monogram — stands in for a headshot so a real reviewer never gets an
   invented face. */
.quote-card figcaption .quote-avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  background: var(--brand-100); color: var(--brand-700);
}
.quote-card figcaption .quote-avatar--gold { background: var(--gold-100); color: var(--gold-700); }

/* --- Photo-led testimonial layout -----------------------------------------
   Until real attributed quotes exist, this section carries the brand's own
   words over photography rather than invented reviews. Drop a .quote-card
   into .testimonial-side when the first real quote arrives. */
.testimonial-grid { display: grid; gap: var(--sp-4); }
/* Each element full width, stacked one under another. */
.testimonial-grid { grid-template-columns: 1fr; }

.quote-feature,
.photo-note {
  position: relative;
  display: flex;
  overflow: hidden;
  border-radius: var(--r-xl);
  margin: 0;
  box-shadow: var(--sh-md);
}
.quote-feature { min-height: clamp(400px, 54vh, 560px); }
.photo-note { min-height: 220px; }
.quote-feature .media-veil,
.photo-note .media-veil { flex: 1; border-radius: 0; }

.quote-feature__body { width: 100%; padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); }
.quote-feature blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.15rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--white);
  max-width: 26ch;
}
.quote-feature figcaption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  font-size: var(--fs-sm);
}
.quote-feature figcaption strong { display: block; color: var(--white); font-weight: 600; }
.quote-feature figcaption span span { color: rgba(255, 255, 255, 0.76); font-size: var(--fs-xs); }
.quote-feature figcaption img { width: auto; height: 40px; }

.photo-note__body { width: 100%; padding: var(--sp-5); }
.photo-note__body strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: var(--sp-1);
}
.photo-note__body span { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.82); }

/* The slot the first real testimonial will fill. */
.quote-invite {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-xl);
}
.quote-invite h3 { font-size: 1.35rem; margin: var(--sp-4) 0 var(--sp-2); }
.quote-invite p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--sp-4); }
/* Flex children stretch by default; keep the underline to the text width. */
.quote-invite .icon-tile,
.quote-invite .link-arrow { align-self: flex-start; }


/* ==========================================================================
   17  FAQ
   ========================================================================== */
.faq { display: grid; gap: var(--sp-3); }
.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.faq__item[open] { border-color: var(--brand-200); box-shadow: var(--sh-sm); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand-800); }
.faq__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  transition: transform 300ms var(--ease), background-color 300ms var(--ease);
}
.faq__icon svg { width: 16px; height: 16px; }
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--gold-100); color: var(--gold-700); }
.faq__body { padding: 0 var(--sp-5) var(--sp-5); }
.faq__body p { color: var(--ink-soft); font-size: var(--fs-sm); max-width: 72ch; }
.faq__body p + p { margin-top: var(--sp-3); }
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__body { animation: faq-in 300ms var(--ease-out); }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }


/* ==========================================================================
   18  CTA BAND
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; border-radius: var(--r-2xl); }
.cta-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(17, 42, 65, 0.94) 0%, rgba(17, 42, 65, 0.78) 55%, rgba(17, 42, 65, 0.48) 100%);
}
.cta-band__body {
  position: relative;
  z-index: 1;
  padding: clamp(2.75rem, 2rem + 4.5vw, 5.5rem);
  max-width: 760px;
}
.cta-band h2 { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }


/* ==========================================================================
   19  FORMS
   ========================================================================== */
.form-panel {
  padding: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
}
.form-grid { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, 1fr); } }

.form-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-field label { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.005em; }
.form-field .req { color: var(--gold-700); }
.form-field .hint { font-size: var(--fs-xs); color: var(--ink-mute); font-weight: 400; }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.85em 1.05em;
  min-height: 52px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 1rem;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease);
}
.form-field textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.form-field select { appearance: none; background-image: none; cursor: pointer; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--brand-300); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(133, 185, 244, 0.30);
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: #B4443A; background: #FDF5F4; }
.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus { box-shadow: 0 0 0 4px rgba(180, 68, 58, 0.14); }

.form-error { font-size: var(--fs-xs); color: #94362E; min-height: 0; }
.form-field:not(.has-error) .form-error { display: none; }

.form-select-wrap { position: relative; }
.form-select-wrap svg {
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--ink-mute);
  pointer-events: none;
}

/* Checkbox row — overrides the column direction inherited from .form-field */
.form-consent { flex-direction: row; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; }
.form-consent input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: 3px; accent-color: var(--brand-700); }
.form-consent label { flex: 1; min-width: 0; font-weight: 400; font-size: var(--fs-sm); color: var(--ink-soft); }
.form-consent .form-error { flex-basis: 100%; }

.form-status {
  display: none;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
}
.form-status.is-visible { display: flex; }
.form-status svg { width: 22px; height: 22px; flex: none; color: var(--brand-700); margin-top: 2px; }
.form-status strong { display: block; }
.form-status p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }

/* Contact details list */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.contact-list li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-list strong { display: block; font-size: var(--fs-sm); margin-bottom: 2px; }
.contact-list a, .contact-list span { color: var(--ink-soft); font-size: var(--fs-sm); text-decoration: none; }
.contact-list a:hover { color: var(--brand-700); text-decoration: underline; }


/* ==========================================================================
   20  FOOTER
   ========================================================================== */
.site-footer {
  margin-top: var(--section-y);
  background: var(--brand-900);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3rem, 2.2rem + 3vw, 5rem) var(--sp-6);
}
.site-footer__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 860px) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-6); } }
.site-footer .brand { color: var(--white); margin-bottom: var(--sp-4); }
.site-footer .brand__tag { color: var(--gold-300); }
.site-footer p { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.68); max-width: 40ch; }
.site-footer h4 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--sp-4);
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer-links a {
  color: rgba(255, 255, 255, 0.76);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.footer-links a:hover { color: var(--white); text-decoration: underline; }
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.6);
}
.site-footer__bottom a { color: rgba(255, 255, 255, 0.75); }


/* ==========================================================================
   21  MOTION & REVEAL
   Gentle, short, and entirely optional — the whole system switches off
   under prefers-reduced-motion.
   ========================================================================== */
/* Reveal is gated behind the .js class, which an inline script in <head>
   adds before first paint. If JavaScript is disabled, blocked, or fails to
   load, the selector never matches and every section renders normally —
   content must never depend on script to be readable. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }

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


/* ==========================================================================
   22  UTILITIES
   ========================================================================== */
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.text-soft { color: var(--ink-soft); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.mx-auto { margin-inline: auto; }
.maxw-60 { max-width: 60ch; }

/* Marks copy the owner still needs to supply. Visible on purpose — it is
   meant to be impossible to publish these by accident. */
[data-placeholder] {
  background: repeating-linear-gradient(-45deg, var(--gold-100), var(--gold-100) 8px, #FCF7EA 8px, #FCF7EA 16px);
  outline: 1px dashed var(--gold-500);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Page header for interior pages */
/* Page headers run the full content width, matching every section below
   them. The lead paragraph keeps its own measure so the intro stays
   readable rather than stretching into a single very long line. */
.page-head { padding-block: clamp(3rem, 2.4rem + 3vw, 5rem) 0; }
.page-head h1 { margin-bottom: var(--sp-5); }
.page-head .lead { max-width: 72ch; }
.breadcrumb {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}
.breadcrumb a { color: var(--ink-mute); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-700); text-decoration: underline; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: var(--sp-2); color: var(--line); }