/* ==========================================================================
   Pilkington Wood — concept mock-up
   Mobile first. Breakpoints: 640px, 900px, 1200px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------
   The six brand colours are used exactly as supplied for fields, rules and
   the palette spine. Three of them fail WCAG AA as text or as a background
   for text, so each has an "ink" sibling one step darker, used wherever a
   colour has to carry type. Measured against soft pearl / white:

     slate navy  on pearl  7.11:1   body copy            OK
     ink soft    on pearl  4.71:1   secondary copy       OK
     sage ink    on pearl  4.64:1   headings, links      OK
     raspberry   on pearl  3.69:1   large display only   OK
     white on raspberry ink 5.73:1  buttons              OK
     white on sage ink      5.58:1  strand field         OK
     white on lavender ink  5.47:1  strand field         OK
     pearl on slate navy    8.56:1  retreats band        OK
     navy on dove gray      4.92:1  plate captions       OK
   -------------------------------------------------------------------------- */

:root {
  /* Brand palette, as supplied */
  --raspberry-rose: #C15469;
  --sage-teal:      #6B8E88;
  --soft-pearl:     #EBEAE5;
  --slate-navy:     #3A4F5C;
  --muted-lavender: #9A93A6;
  --dove-gray:      #C2C5C6;

  /* Ink-weight siblings, for anything carrying text */
  --raspberry-ink:  #A8455A;
  --sage-ink:       #4F6E68;
  --lavender-ink:   #6E6580;
  --navy-deep:      #2E3F4A;

  /* Surfaces */
  --paper:          #EBEAE5;
  --paper-warm:     #F3F2EE;
  --ink:            #3A4F5C;
  --ink-soft:       #566A75;  /* 4.71:1 on soft pearl — secondary copy */
  --hairline:       #D3D2CC;
  --chip-line:      #8E9491; /* divides the palette chips; reads on light and dark */

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
  --header-h: 60px;
  --rule-h: 4px;
  --section-y: clamp(64px, 10vw, 132px);
}

@media (min-width: 900px) {
  :root {
    --header-h: 76px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* height:auto lets the CSS aspect-ratio win over the width/height attributes,
   which are there to reserve space and stop layout shift. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 120;
  margin: 0;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul { margin: 0; padding: 0; list-style: none; }

section { scroll-margin-top: calc(var(--header-h) + var(--rule-h) + 8px); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Focus — visible everywhere, inverted on dark grounds */
:focus-visible {
  outline: 2px solid var(--raspberry-ink);
  outline-offset: 3px;
}
.retreats :focus-visible,
.strand :focus-visible {
  outline-color: var(--soft-pearl);
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  background: var(--slate-navy);
  color: var(--soft-pearl);
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   3. Shared pieces
   -------------------------------------------------------------------------- */

.eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin: 0 0 0.9rem;
}
.eyebrow--light { color: var(--dove-gray); }

.section-head { margin-bottom: clamp(28px, 4vw, 48px); }

.section-title {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  color: var(--slate-navy);
}
.section-title--light { color: var(--soft-pearl); }

.link-arrow {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--sage-ink);
  border-bottom: 1px solid var(--sage-teal);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { color: var(--raspberry-ink); border-bottom-color: var(--raspberry-ink); }

/* Read against a strand's dark colour fill instead of the paper ground. */
.link-arrow--light {
  color: var(--soft-pearl);
  border-bottom-color: rgba(235, 234, 229, 0.5);
}
.link-arrow--light:hover { color: #fff; border-bottom-color: #fff; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-text);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn--primary {
  background: var(--raspberry-ink);
  color: #fff;
}
.btn--primary:hover { background: var(--navy-deep); }

.btn--ghost {
  background: transparent;
  color: var(--slate-navy);
  border-color: var(--slate-navy);
}
.btn--ghost:hover { background: var(--slate-navy); color: var(--soft-pearl); }

.btn--light {
  background: var(--soft-pearl);
  color: var(--navy-deep);
}
.btn--light:hover { background: var(--dove-gray); }

/* The ghost button read against a photo instead of the paper ground. */
.btn--ghost-light {
  background: transparent;
  color: var(--soft-pearl);
  border-color: var(--soft-pearl);
}
.btn--ghost-light:hover { background: var(--soft-pearl); color: var(--navy-deep); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.82rem; }
.btn--block { width: 100%; }

/* A booking link whose real URL is not confirmed yet */
.btn.is-pending {
  background: var(--dove-gray);
  color: var(--navy-deep);
  cursor: not-allowed;
}
.btn.is-pending:hover { background: var(--dove-gray); }

/* The palette spine, compressed to a hairline.
   The 1px gaps let the backing show through as dividers, so all six chips
   read as chips — soft pearl and dove gray are close enough to the page
   ground that they would otherwise look like holes in the chart. */
.palette-rule {
  display: flex;
  gap: 1px;
  height: var(--rule-h);
  background: var(--chip-line);
}
.palette-rule > span { flex: 1; background: var(--c); }

/* The thicker cut used to close the hero — the same chart, read as a
   deliberate signature rather than a hairline utility. */
.palette-rule--thick { height: clamp(8px, 1.1vw, 14px); }

/* Colour-block stand-ins for photography that does not exist yet */
.plate {
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 1.25rem;
  min-height: 220px;
  background: var(--dove-gray);
}
.plate--dove { background: var(--dove-gray); color: var(--navy-deep); }
.plate--sage { background: var(--sage-ink); color: var(--soft-pearl); }

.plate__caption {
  margin: 0;
  max-width: 34ch;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.6;
  border-left: 2px solid currentColor;
  padding-left: 0.75rem;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-h);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wordmark {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.wordmark__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40;
  color: var(--slate-navy);
}
.wordmark__sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin-top: 2px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 0.5rem 0.8rem;
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-navy);
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 16px; }
.nav-toggle__bars span {
  display: block;
  height: 1.5px;
  background: var(--slate-navy);
}

.nav { display: none; }
.nav.is-open {
  display: block;
  position: absolute;
  top: calc(var(--header-h) + var(--rule-h));
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  padding: 0.5rem var(--gutter) 1.5rem;
}
.nav__list { display: grid; }
.nav__list a {
  display: block;
  padding: 0.7rem 0;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--slate-navy);
  border-bottom: 1px solid var(--hairline);
}
.nav__cta { margin-top: 1.1rem; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  .nav__list {
    display: flex;
    gap: 1.75rem;
  }
  .nav__list a {
    position: relative;
    padding: 0.35rem 0;
    border: 0;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    transition: color 0.2s ease;
  }
  .nav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--raspberry-rose);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
  }
  .nav__list a:hover { color: var(--slate-navy); }
  .nav__list a[aria-current="true"] { color: var(--slate-navy); }
  .nav__list a[aria-current="true"]::after { transform: scaleX(1); }
  .nav__cta { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

/* Classic full-bleed hero: one photograph, graded into the palette, with
   the headline anchored to its bottom-left like signage rather than
   centred like a slide. The photo is a bought-in placeholder (no real hero
   shot yet — see the brief's photography list) so it is graded down in
   saturation and warmed with a navy wash + grain, rather than left raw,
   so it does not sit in the page like an unrelated stock frame. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--navy-deep);
  aspect-ratio: 4 / 5;
}

.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 45%;
  filter: saturate(0.72) contrast(1) brightness(0.74);
}
/* Navy wash for legibility. The text column runs most of the hero's height
   (eyebrow near the top, buttons near the bottom), so this has to hold
   contrast everywhere it sits, not just fade in near the bottom edge —
   measured by sampling the actual photo under each text element, see the
   verification notes in the project chat. */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg,
    rgba(46, 63, 74, 0.82) 0%,
    rgba(46, 63, 74, 0.90) 55%,
    rgba(46, 63, 74, 0.97) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 7vw, 64px) var(--gutter) clamp(36px, 6vw, 64px);
  max-width: 40rem;
}

.hero__title {
  font-size: clamp(2.5rem, 8.5vw, 5rem);
  line-height: 0.98;
  color: var(--soft-pearl);
  margin-bottom: 1.4rem;
  text-wrap: balance;
}

.hero__lede {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--dove-gray);
  max-width: 34ch;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .hero { aspect-ratio: 16 / 10; }
  .hero__media img { object-position: 28% 42%; }
}

@media (min-width: 900px) {
  .hero {
    aspect-ratio: auto;
    min-height: calc(100svh - var(--header-h) - var(--rule-h));
    max-height: 880px;
  }
  .hero__media img { object-position: 24% 40%; }
  .hero__content { padding: clamp(48px, 7vw, 96px) clamp(48px, 6vw, 96px); }
}

/* --------------------------------------------------------------------------
   6. Three strands
   -------------------------------------------------------------------------- */

.strands {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  background: var(--paper-warm);
  border-top: 1px solid var(--hairline);
}

/* Three self-contained panels — colour, plate number, verb and copy all in
   one block sized to its own content, not split across a colour field and
   a separate text column. Equal thirds side by side on desktop (a triptych,
   not a staircase), stacked on mobile. */
.strand-grid {
  display: grid;
  grid-template-columns: 1fr;
}

.strand {
  padding: clamp(36px, 9vw, 64px) var(--gutter) clamp(40px, 8vw, 64px);
  color: var(--soft-pearl);
  border-top: 4px solid var(--c);
}
.strand--a { background: var(--sage-ink);      --c: var(--sage-teal); }
.strand--b { background: var(--raspberry-ink); --c: var(--raspberry-rose); }
.strand--c { background: var(--lavender-ink);  --c: var(--muted-lavender); }

/* A large ghost plate-number, like a print run marking — decorative, so it
   sits outside the text a screen reader announces (the label carries that). */
.strand__num {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  line-height: 1;
  color: rgba(235, 234, 229, 0.22);
  margin: 0 0 0.5rem;
}

.strand__label {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.strand__verb {
  font-size: clamp(2.6rem, 7vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}

.strand__copy {
  font-size: 0.98rem;
  line-height: 1.6;
  max-width: 34ch;
  margin-bottom: 1.1rem;
}

@media (min-width: 700px) {
  .strand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strand { padding: clamp(40px, 4vw, 56px) clamp(24px, 2.6vw, 40px); }
}

/* --------------------------------------------------------------------------
   7. Classes
   -------------------------------------------------------------------------- */

.classes {
  padding-block: var(--section-y);
  border-top: 1px solid var(--hairline);
}

.classes__intro {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--hairline);
}

.class-name {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  color: var(--slate-navy);
  margin-bottom: 0.9rem;
}

.class-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-ink);
}
.class-meta span { display: inline-flex; }
.class-meta span + span::before {
  content: "";
  width: 1px;
  background: var(--hairline);
  margin-right: 1rem;
}

.classes__copy p { max-width: 62ch; color: var(--ink); }

.classes__detail { margin: 0; }
.classes__detail img {
  width: 100%;
  max-width: 253px;
  filter: saturate(0);
}
.classes__detail figcaption {
  margin-top: 0.7rem;
  max-width: 253px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (min-width: 900px) {
  .classes__intro {
    grid-template-columns: minmax(0, 1fr) 253px;
    align-items: end;
  }
}

/* Sessions */
.sessions {
  display: grid;
  gap: clamp(24px, 3vw, 36px);
  padding-top: clamp(36px, 5vw, 60px);
}

.session {
  display: flex;
  flex-direction: column;
  background: var(--paper-warm);
  border: 1px solid var(--hairline);
}

.session__media { margin: 0; }
.session__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.session__media.plate {
  aspect-ratio: 4 / 3;
  min-height: 0;
}

.session__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 3vw, 32px);
}

.session__day {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  line-height: 1;
  color: var(--slate-navy);
  margin-bottom: 0.35rem;
}
.session__time {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--raspberry-ink);
  margin-bottom: 0.9rem;
}
.session__venue { color: var(--ink); margin-bottom: 0.3rem; }
.session__price {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.session__body .btn { margin-top: auto; }

.booking-note {
  margin-top: 1.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

@media (min-width: 720px) {
  .sessions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   8. Private sessions
   -------------------------------------------------------------------------- */

.private {
  padding-block: var(--section-y);
  background: var(--paper-warm);
  border-top: 1px solid var(--hairline);
}

.private__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
}

/* Capped so the portrait does not tower on tablet, where it is full width. */
.private__figure { margin: 0; position: relative; max-width: 520px; }
.private__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 35%;
}

@media (min-width: 900px) {
  .private__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    align-items: start;
  }
  .private__figure { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */

.form { margin-top: clamp(28px, 4vw, 40px); }

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid var(--dove-gray);
  border-radius: 2px;
  font-family: var(--font-text);
  font-size: 0.98rem;
  color: var(--ink);
}
.field textarea { resize: vertical; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--sage-teal); }

.field [aria-invalid="true"] { border-color: var(--raspberry-ink); }

.field__error {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--raspberry-ink);
}

.form__status {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  color: var(--sage-ink);
}
.form__status:empty { margin: 0; }

.form--inline .field label { color: var(--dove-gray); }
.form--inline .form__status { color: var(--dove-gray); }

@media (min-width: 640px) {
  .form--inline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
    margin-top: 0;
  }
  .form--inline .field { margin-bottom: 0; }
  .form--inline .form__status { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   10. About
   -------------------------------------------------------------------------- */

.about {
  padding-block: var(--section-y);
  border-top: 1px solid var(--hairline);
}

.about__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.about__lead {
  font-size: clamp(1.08rem, 2.2vw, 1.3rem);
  line-height: 1.55;
  color: var(--slate-navy);
}
.about__copy p { max-width: 56ch; }

.about__figure {
  margin: 0;
  position: relative;
  max-width: 420px;
}
.about__figure img { width: 100%; }
/* Offset rule behind the portrait — the same "hung canvas" device as the hero. */
.about__figure::after {
  content: "";
  position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid var(--raspberry-rose);
  z-index: -1;
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.68fr);
    align-items: start;
  }
}

/* Qualifications */
.quals {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(28px, 4vw, 44px);
}
.quals__title {
  font-size: 0.74rem;
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin-bottom: 1.25rem;
}
.quals__list {
  display: grid;
  gap: 0;
}
.quals__list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.94rem;
  color: var(--ink);
}

@media (min-width: 720px) {
  .quals__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
}

/* --------------------------------------------------------------------------
   11. Values
   -------------------------------------------------------------------------- */

.values {
  padding-block: var(--section-y);
  background: var(--paper-warm);
  border-top: 1px solid var(--hairline);
}

.values__grid {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.value {
  border-top: 3px solid var(--dove-gray);
  padding-top: 1.25rem;
}
.value--a { border-top-color: var(--sage-teal); }
.value--b { border-top-color: var(--raspberry-rose); }
.value--c { border-top-color: var(--muted-lavender); }

.value h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  color: var(--slate-navy);
  margin-bottom: 0.6rem;
}
.value p { color: var(--ink); }

.values__plate { margin-top: clamp(40px, 6vw, 72px); }

@media (min-width: 800px) {
  .values__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   12. Retreats
   -------------------------------------------------------------------------- */

.retreats {
  padding-block: var(--section-y);
  background: var(--slate-navy);
  color: var(--soft-pearl);
}

.retreats__grid {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.retreats__copy {
  margin-top: 1.25rem;
  max-width: 46ch;
  color: var(--dove-gray);
}

@media (min-width: 900px) {
  .retreats__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--paper); }

.site-footer__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  padding-top: clamp(48px, 6vw, 72px);
  padding-bottom: clamp(32px, 4vw, 48px);
}

.footer-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--slate-navy);
  margin-bottom: 0.5rem;
}

.footer-heading {
  font-family: var(--font-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin-bottom: 0.75rem;
}

.footer-note {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--ink-soft);
}
.footer-note a {
  color: var(--slate-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--dove-gray);
  transition: border-color 0.2s ease;
}
.footer-note a:hover { border-bottom-color: var(--raspberry-ink); }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-bottom: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--hairline);
  padding-top: 1.25rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.site-footer__base p { margin: 0; }
.site-footer__flag { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.7rem; }

@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   14. Reduced motion
   -------------------------------------------------------------------------- */

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