/* ==========================================================================
   Colour by Shann, design system
   Quiet-luxury editorial. Warm ivory ground, charcoal ink, seasonal colour
   used as a controlled accent. Cormorant Garamond display, DM Sans body.
   ========================================================================== */

:root {
  /* Ground and ink */
  --ivory: #FAF8F4;
  --white: #FFFFFF;
  --ink: #2C2C2C;
  --grey: #6F6F6C;
  --line: #E5E1D8;

  /* Palette accents (from Shann's working palette) */
  --lacey: #F3E3A2;     /* airy, optimistic */
  --lemonade: #E98A7D;  /* playful, juicy */
  --orchid: #B4A2CD;    /* gentle, dreamy */
  --aura: #C7D5E1;      /* calm, cool */
  --bio: #4F7B66;       /* natural, balanced */

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Rhythm */
  --measure: 62ch;
  --site-max: 1120px;
  --pad: clamp(1.25rem, 5vw, 3rem);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.01em;
}

/* height:auto is load-bearing. Images carry width/height attributes so the
   browser can reserve space and avoid layout shift; without height:auto the
   attribute height is taken literally while max-width shrinks the width, and
   every photograph is squashed. Do not remove. */
img { max-width: 100%; height: auto; display: block; }

/* ==========================================================================
   Scroll progress bar, the site signature
   ========================================================================== */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: transparent;
  z-index: 100;
  pointer-events: none;
}

.progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    var(--lacey), var(--lemonade), var(--orchid), var(--aura), var(--bio));
  transition: width 80ms linear;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 1.1rem var(--pad);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark small {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 0.1rem;
  /* Centred beneath the wordmark. The indent offsets the trailing
     letter-space on the final character, which would otherwise pull the
     line visually left of true centre. */
  text-align: center;
  text-indent: 0.32em;
}

.site-nav {
  display: flex;
  align-items: center;
  /* The upper limit was 1.75rem until the Groups chevron arrived; at 1.6rem
     the menu still fits on wide screens, where the gaps stop growing. */
  gap: clamp(1.1rem, 1.8vw, 1.6rem);
}

.site-nav a {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { border-color: var(--ink); }

/* Book Now: the one pill in the header. A rectangle with curved edges,
   outlined in ink and filling on hover. Deliberately the only rounded
   element on the page, so it reads as the primary action. */
.site-nav a.nav-book {
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.6rem 1.45rem;
  margin-left: 0.4rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}

.site-nav a.nav-book:hover,
.site-nav a.nav-book:focus-visible,
.site-nav a.nav-book[aria-current="page"] {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
  transform: none;
}

.nav-toggle { display: none; }

/* Re-measured 11 Oct 2026, when Groups joined the menu and Home left it (the
   wordmark is the link home), and again when Groups gained its sub-menu
   chevron (see "Groups sub-menu" below). With DM Sans loaded, the wordmark
   is 220px and the menu 765px from a 1440px window upwards (the gaps stop
   growing at 1.6rem), plus the 32px gap: 1017px of the 1024px the header
   has inside its padding. Narrower windows shrink the menu gaps
   (1.8vw), and the menu stops fitting at about 1055px, so the burger takes
   over at 1100 and the menu never wraps. There is no room for another item
   at full width: adding one means a shorter label, a wider header or a
   longer burger range. Re-measure before changing any label. */
@media (max-width: 1100px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -11px; /* optical alignment: bars end flush with the page edge */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .nav-toggle__bar {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--ivory);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--pad) 1.25rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 0.75rem 0; border-bottom: none; }
  .site-nav a.nav-book {
    margin: 0.9rem 0 0.25rem;
    padding: 0.85rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--ink);
  }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--pad); }

.section { padding: clamp(4rem, 10vw, 7.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.section--rule { border-top: 1px solid var(--line); }

.measure { max-width: var(--measure); }
.centered { margin-left: auto; margin-right: auto; text-align: center; }

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
}

h1 { font-size: clamp(2.6rem, 6.5vw, 4.4rem); letter-spacing: 0.005em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.35rem, 2.5vw, 1.6rem); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 1.4rem;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.55rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

p + p { margin-top: 1.25em; }
h2 + p, h3 + p { margin-top: 1.25em; }

.muted { color: var(--grey); }

a { color: var(--ink); }

/* ==========================================================================
   Buttons and links
   ========================================================================== */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory);
  background: var(--ink);
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 1rem 2.4rem;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease;
}

.btn:hover { background: transparent; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); }

/* Rectangle with curved edges, matching the header Book Now pill */
.btn--pill { border-radius: 999px; }

.text-link {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.2rem;
}

/* ==========================================================================
   Signature elements
   ========================================================================== */

/* Thin strip of the five palette accents, used as a deliberate detail.
   Centred everywhere it appears, per Shann. */
.palette-strip {
  display: flex;
  height: 6px;
  width: min(220px, 40vw);
  margin-left: auto;
  margin-right: auto;
}
.palette-strip span { flex: 1; }
.palette-strip span:nth-child(1) { background: var(--lacey); }
.palette-strip span:nth-child(2) { background: var(--lemonade); }
.palette-strip span:nth-child(3) { background: var(--orchid); }
.palette-strip span:nth-child(4) { background: var(--aura); }
.palette-strip span:nth-child(5) { background: var(--bio); }

.palette-strip--center { margin: 2rem auto 0; }

/* Hero. Centred title page on every page: eyebrow, headline, lede, action
   and palette strip share one axis. */
.hero {
  padding: clamp(5rem, 14vw, 10rem) 0 clamp(4rem, 10vw, 7rem);
  text-align: center;
}
.hero .lede { margin: 2rem auto 0; max-width: 34ch; }
.hero .btn { margin-top: 3rem; }

/* Centred eyebrows carry the palette rule on both sides, mirrored, so the
   line reads as symmetrical rather than hung off one edge. Applies anywhere
   an eyebrow is centred, not only in the hero. */
.hero .eyebrow::after,
.centered .eyebrow::after,
.contact-card .eyebrow::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-left: 0.8rem;
  vertical-align: middle;
  background: linear-gradient(90deg,
    var(--bio), var(--aura), var(--orchid), var(--lemonade), var(--lacey));
}

/* Season grid */
.season-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 3.5rem;
}

@media (max-width: 860px) { .season-grid { grid-template-columns: repeat(2, 1fr); } }

.season-grid__cell {
  background: var(--white);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
}

/* Descriptors absorb the height difference so the four lists align */
.season-grid__cell h3 + p { flex: 1; }

.season-grid__cell h3 {
  font-size: 1.3rem;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.season-grid__cell p {
  font-size: 0.85rem;
  color: var(--grey);
  margin-top: 0.6rem;
  line-height: 1.6;
}

.season-grid__cell .dot {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 50%;
  flex: none;
}

/* Numbered process */
.process { margin-top: 3.5rem; display: grid; gap: 0; }

.process__step {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.5rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--line);
}

.process__step:last-child { border-bottom: 1px solid var(--line); }

.process__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  color: var(--grey);
}

.process__step h3 { margin-bottom: 0.4rem; }
.process__step p { max-width: var(--measure); }

/* Two-column editorial */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* Quiet reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Without JavaScript the observer never runs, so revealed content would stay
   invisible for ever. Services and prices must not depend on a script. Each
   page carries a matching <noscript> style block; this covers older browsers
   that lack the scripting media feature. Inline <style> is permitted by our
   CSP (style-src includes 'unsafe-inline'); an inline <script> would not be. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form { max-width: 40rem; }

.form__field { margin-bottom: 1.75rem; }

.form label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.6rem;
}

.form input[type="text"],
.form input[type="email"],
.form select,
.form textarea {
  width: 100%;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  padding: 0.9rem 1rem;
  transition: border-color 200ms ease;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}

.form textarea { min-height: 10rem; resize: vertical; }

.form__consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--grey);
  margin-bottom: 2rem;
}

.form__consent input { margin-top: 0.35rem; }

.form__note { font-size: 0.85rem; color: var(--grey); margin-top: 1.5rem; }

.form__status { margin-top: 1.5rem; font-size: 0.95rem; }
.form__status--ok { color: var(--bio); }
.form__status--error { color: #A04B3F; }

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

/* ==========================================================================
   Legal pages
   ========================================================================== */

.legal { max-width: var(--measure); }
.legal h1 { font-size: clamp(2.1rem, 5vw, 3rem); }
.legal .updated { font-size: 0.85rem; color: var(--grey); margin-top: 1rem; }
.legal h2 { font-size: 1.45rem; margin-top: 3rem; }
.legal h3 { font-size: 1.15rem; margin-top: 2rem; font-family: var(--sans); font-weight: 500; }
.legal ol, .legal ul { margin: 1.25em 0 1.25em 1.5em; }
.legal li { margin-bottom: 0.5em; }
.legal table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.95rem; }
.legal th, .legal td { text-align: left; padding: 0.75em; border: 1px solid var(--line); vertical-align: top; }
.legal th { font-weight: 500; background: var(--white); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 3.5rem 0 3rem;
  margin-top: clamp(3rem, 8vw, 6rem);
}

.site-footer__inner {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer .wordmark { font-size: 1.2rem; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.site-footer__links a {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  text-decoration: none;
}

.site-footer__links a:hover { color: var(--ink); }

/* Everyone is welcome. Two small flags and one plain sentence, sitting in
   their own band between the menu and the legal line. Deliberately quiet:
   the point is that it is stated, not that it is decorated. */
.site-footer__welcome {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--grey);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.site-footer__flags {
  display: flex;
  gap: 0.4rem;
  flex: none;
}

.site-footer__flags img {
  width: 30px;
  height: 18px;
  border: 1px solid var(--line);
}

@media (max-width: 560px) {
  .site-footer__welcome { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
}

.site-footer__legal {
  width: 100%;
  font-size: 0.8rem;
  color: var(--grey);
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  line-height: 1.7;
}

/* ==========================================================================
   Brand mark (SVG monogram beside the wordmark)
   ========================================================================== */

.wordmark--brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* Keep both lines of the lockup on the same left edge and rhythm */
.wordmark--brand > span { display: block; line-height: 1.15; }
.wordmark--brand small { margin-top: 0.25rem; }

.site-header__inner { align-items: center; }

.brand-mark { height: 44px; width: 44px; flex-shrink: 0; }

@media (max-width: 720px) { .brand-mark { height: 36px; width: 36px; } }

/* On hover, each word of the wordmark takes a colour of its own */
.wordmark--brand .w-colour,
.wordmark--brand .w-by,
.wordmark--brand .w-shann { transition: color 250ms ease; }

.wordmark--brand:hover .w-colour { color: #D6246E; }
.wordmark--brand:hover .w-by { color: #7C4FD0; }
.wordmark--brand:hover .w-shann { color: #1E76B4; }

/* ==========================================================================
   Colour accents. Orchid is the interaction colour; the palette appears
   in small, deliberate details. Restraint is the point.
   ========================================================================== */

/* Text selection: each section highlights in its own palette colour,
   cycling in progress-bar order as you move down the page.
   (Browsers allow one selection colour per element, so a per-letter
   gradient is not possible; this is the closest faithful equivalent.) */
::selection { background: var(--orchid); color: var(--white); }

main section:nth-of-type(5n+1) ::selection,
main section:nth-of-type(5n+1)::selection { background: var(--lacey); color: var(--ink); }
main section:nth-of-type(5n+2) ::selection,
main section:nth-of-type(5n+2)::selection { background: var(--lemonade); color: var(--white); }
main section:nth-of-type(5n+3) ::selection,
main section:nth-of-type(5n+3)::selection { background: var(--orchid); color: var(--white); }
main section:nth-of-type(5n+4) ::selection,
main section:nth-of-type(5n+4)::selection { background: var(--aura); color: var(--ink); }
main section:nth-of-type(5n+5) ::selection,
main section:nth-of-type(5n+5)::selection { background: var(--bio); color: var(--white); }

/* Menu: each link owns one colour drawn from the logo rays, darkened
   for legibility (all pass WCAG AA on ivory). Once hovered, the colour
   stays (JS adds .was-hovered); the current page carries its colour too.

   Bound to the destination, not to position, so adding or reordering a
   menu item never moves anyone else's colour. Meet Shann keeps its pink.

   Each destination is matched both with and without the .html suffix. The
   links dropped their extensions on 27 Jul 2026, which silently unmatched
   every selector here and turned the whole menu default lilac. Keeping both
   forms means either style of link keeps its colour. */
.site-nav a[href="/"]                                          { --nav-c: #8F6C00; }  /* gold       · Home */
.site-nav a[href="/about"],      .site-nav a[href="/about.html"]      { --nav-c: #D6246E; }  /* pink       · Meet Shann */
.site-nav a[href="/experience"], .site-nav a[href="/experience.html"] { --nav-c: #7C4FD0; }  /* purple     · The Experience */
.site-nav a[href="/services"],   .site-nav a[href="/services.html"]   { --nav-c: #A84A38; }  /* terracotta · Services */
.site-nav a[href="/faq"],        .site-nav a[href="/faq.html"]        { --nav-c: #1E76B4; }  /* blue       · FAQ */
.site-nav a[href="/contact"],    .site-nav a[href="/contact.html"]    { --nav-c: #177347; }  /* green      · Contact */
.site-nav a[href="/groups"],     .site-nav a[href="/groups.html"]     { --nav-c: #0F6E6E; }  /* teal       · Groups, 5.70:1 on ivory */

.site-nav a {
  transition: border-color 200ms ease, color 200ms ease, transform 200ms ease;
  /* Never let a label break mid-item: "Meet Shann" stays on one line. */
  white-space: nowrap;
}

/* aria-current="true" marks the section rather than the page: the four
   Groups & Events pages light up Groups, which links to their hub, and their
   own entry in the Groups sub-menu carries aria-current="page". */
.site-nav a:hover,
.site-nav a.was-hovered,
.site-nav a[aria-current="page"],
.site-nav a[aria-current="true"] {
  color: var(--nav-c, var(--orchid));
  border-color: var(--nav-c, var(--orchid));
}

/* A quiet response remains after the colour has been kept */
.site-nav a:hover { transform: translateY(-1.5px); }

@media (prefers-reduced-motion: reduce) { .site-nav a:hover { transform: none; } }

/* Groups sub-menu (11 Oct 2026, Shann's request). Groups stays a link to the
   hub. On a wide screen the small chevron beside it is a real button that
   opens the four pages beneath it, for keyboards and touch screens, and a
   mouse opens them on hover. Escape closes the panel however it was opened
   (js/main-v11.js), as WCAG 1.4.13 asks of anything that appears on hover.
   In the burger menu the four pages are simply listed under Groups. */
.nav-group__menu { list-style: none; margin: 0; padding: 0; }
.nav-group__menu a { --nav-c: #0F6E6E; } /* the section's teal, as on Groups */

@media (min-width: 1101px) {
  .nav-group {
    position: relative;
    display: flex;
    align-items: center;
  }
  .nav-group__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 22px;
    margin-left: 0.3rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  /* A larger, invisible target over the gaps either side, without taking any
     room in a menu that is already full. */
  .nav-group__toggle::after {
    content: '';
    position: absolute;
    inset: -10px -8px;
  }
  .nav-group__toggle::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.25px solid currentColor;
    border-bottom: 1.25px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 200ms ease;
  }
  .nav-group:hover .nav-group__toggle,
  .nav-group.is-open .nav-group__toggle,
  .nav-group > a[aria-current] + .nav-group__toggle { color: #0F6E6E; }
  .nav-group.is-open .nav-group__toggle::before { transform: translateY(1px) rotate(-135deg); }
  .nav-group__toggle:focus-visible { outline: 2px solid #0F6E6E; outline-offset: 3px; }

  .nav-group__menu {
    position: absolute;
    top: calc(100% + 1.1rem);
    left: -1.6rem;
    z-index: 95;
    min-width: 15.5rem;
    padding: 1.35rem 1.6rem 1.45rem;
    background: var(--ivory);
    border: 1px solid var(--line);
    box-shadow: 0 22px 40px -28px rgba(44, 44, 44, 0.45);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  }
  /* Bridges the gap between Groups and the panel, so the pointer can travel
     down to it without the panel closing on the way. */
  .nav-group__menu::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 1.2rem;
  }
  .nav-group:hover .nav-group__menu,
  .nav-group.is-open .nav-group__menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
  .nav-group.is-dismissed:not(.is-open) .nav-group__menu {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
  }
  .nav-group__menu li + li { margin-top: 0.95rem; }
  .nav-group__menu a { display: inline-block; }
}

/* In the burger menu everything is centred, so the four pages sit centred
   under Groups too, smaller and in grey to show they belong to it. */
@media (max-width: 1100px) {
  .nav-group { display: flex; flex-direction: column; align-items: center; }
  .nav-group__toggle { display: none; }
  .nav-group__menu { margin: -0.3rem 0 0.45rem; text-align: center; }
  .site-nav .nav-group__menu a {
    display: block;
    padding: 0.45rem 0;
    font-size: 0.72rem;
    color: var(--grey);
  }
  .site-nav .nav-group__menu a[aria-current="page"] { color: var(--nav-c); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-group__menu,
  .nav-group__toggle::before { transition: none; }
}

.text-link:hover { color: var(--orchid); border-color: var(--orchid); }
/* Footer links carry the same idea as the menu: one colour each, kept once
   hovered. Shared destinations keep the colour they have in the menu, so
   Services is terracotta in both places. The legal links take the remaining
   palette colours, darkened to pass AA on ivory. */
.site-footer__links a[href="/about"]      { --nav-c: #D6246E; }  /* pink       */
.site-footer__links a[href="/experience"] { --nav-c: #7C4FD0; }  /* purple     */
.site-footer__links a[href="/services"]   { --nav-c: #A84A38; }  /* terracotta */
.site-footer__links a[href="/faq"]        { --nav-c: #1E76B4; }  /* blue       */
.site-footer__links a[href="/contact"]    { --nav-c: #177347; }  /* green      */
.site-footer__links a[href="/newsletter"] { --nav-c: #3F6E8C; }  /* slate blue */
.site-footer__links a[href="/terms"]      { --nav-c: #8F6C00; }  /* gold       */
.site-footer__links a[href="/privacy"]    { --nav-c: #2D5FA6; }  /* deep blue  */
.site-footer__links a[href="/cookies"]    { --nav-c: #7A5C9E; }  /* muted plum */
.site-footer__links a[href="/groups"]     { --nav-c: #0F6E6E; }  /* teal, as in the menu, 5.70:1 */

.site-footer__links a { transition: color 200ms ease; }

.site-footer__links a:hover,
.site-footer__links a.was-hovered { color: var(--nav-c, var(--orchid)); }
p a:hover, .legal a:hover, .form__note a:hover { color: var(--orchid); }

.btn:hover { background: transparent; color: var(--ink); border-color: var(--orchid); }
.btn--ghost:hover { background: var(--ink); color: var(--ivory); }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline-color: var(--orchid);
  border-color: var(--orchid);
}

/* Eyebrows carry a sliver of the palette */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: 0.8rem;
  vertical-align: middle;
  background: linear-gradient(90deg,
    var(--lacey), var(--lemonade), var(--orchid), var(--aura), var(--bio));
}

/* Season cells: family colour surfaces quietly on hover */
.season-grid__cell { border-top: 2px solid transparent; transition: border-color 250ms ease; }
.season-grid__cell:nth-child(1):hover { border-top-color: var(--lacey); }
.season-grid__cell:nth-child(2):hover { border-top-color: var(--lemonade); }
.season-grid__cell:nth-child(3):hover { border-top-color: var(--bio); }
.season-grid__cell:nth-child(4):hover { border-top-color: var(--aura); }

.season-grid__cell ul {
  list-style: none;
  font-size: 0.9rem;
  color: var(--grey);
  line-height: 2;
}

.season-grid__cell li { display: flex; align-items: center; gap: 0.6rem; }

/* Sub-seasons are listed with a plain dash, never a colour. Shann's
   decision, 27 Jul 2026: a client should not form an expectation of their
   palette before the appointment. The discovery belongs in the room. Do not
   reintroduce swatches beside the sixteen sub-season names. */
.dash {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--grey);
  flex-shrink: 0;
}

.season-grid__lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--grey);
  margin-top: 1.4rem;
  margin-bottom: 0.9rem;
  line-height: 1.5;
}

/* Consent form: tick boxes. Deliberately generous targets and never
   pre-ticked, because UK GDPR consent must be a positive, unambiguous act. */
.consent-list { margin: 1.4rem 0 0.5rem; display: grid; gap: 0.15rem; }

/* Written as `.form .consent-item` on purpose. These are <label> elements, and
   the generic `.form label` rule above sets display:block, uppercase and wide
   letter-spacing, which is right for a field label and wrong for a sentence a
   client has to read and agree to. The extra specificity restores the grid and
   sentence case. */
.form .consent-item {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 1.15rem;
  align-items: start;
  padding: 1.15rem 0.4rem;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
  line-height: 1.7;
}

.form .consent-item:last-child { border-bottom: none; }

.form .consent-item input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.3rem 0 0 0;
  accent-color: var(--bio);
  cursor: pointer;
}

/* Editorial photography */
.photo { border: 1px solid var(--line); }

.photo figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--grey);
  margin-top: 0.9rem;
  line-height: 1.5;
}

/* Photo band: three photographs side by side, opening the Groups hub
   (Shann's idea, 12 Oct 2026). It stays three across on phones, like a
   contact strip, rather than stacking into a long column of pictures before
   a single word. Each photograph is 3:4, 720 by 960, and used on this page
   only. */
.photo-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.6vw, 1.25rem);
  margin-top: clamp(3rem, 7vw, 5rem);
}

/* Contact card: the colourful invitation */
.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg,
    var(--lacey), var(--lemonade), var(--orchid), var(--aura), var(--bio)) 1;
  border-image-width: 4px 0 0 0;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 5vw, 3.5rem);
  text-align: center;
}

.contact-card h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }

.contact-card p { margin-top: 1.25rem; }

.contact-card .btn { margin-top: 2rem; }

.contact-card__email {
  display: block;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--grey);
}

.contact-card__email a { color: var(--grey); }
.contact-card__email a:hover { color: var(--orchid); }

/* Accessibility: skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--ivory);
  padding: 0.75rem 1.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.skip-link:focus { left: 0; }

/* Process numbers: each step tinted with a deepened palette colour */
.process__step:nth-of-type(1) .process__num { color: color-mix(in srgb, var(--lacey), var(--ink) 48%); }  /* 48%, not 45%: 3.23:1, clears AA for large text (11 Oct 2026) */
.process__step:nth-of-type(2) .process__num { color: color-mix(in srgb, var(--lemonade), var(--ink) 25%); }
.process__step:nth-of-type(3) .process__num { color: color-mix(in srgb, var(--orchid), var(--ink) 25%); }
.process__step:nth-of-type(4) .process__num { color: color-mix(in srgb, var(--bio), var(--ink) 10%); }
.process__step:nth-of-type(5) .process__num { color: color-mix(in srgb, var(--aura), var(--ink) 45%); }

/* Drape row: fabric drapes as quiet colour, used on The Experience */
.drape-row {
  display: flex;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  height: clamp(110px, 18vw, 170px);
  align-items: flex-start;
}

.drape-row span { flex: 1; height: 100%; }
.drape-row span:nth-child(1) { background: var(--lacey); }
.drape-row span:nth-child(2) { background: var(--lemonade); }
.drape-row span:nth-child(3) { background: var(--orchid); }
.drape-row span:nth-child(4) { background: var(--aura); }
.drape-row span:nth-child(5) { background: var(--bio); }

/* Form panel: the contact form framed in the palette */
.form-panel {
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg,
    var(--lacey), var(--lemonade), var(--orchid), var(--aura), var(--bio)) 1;
  border-image-width: 4px 0 0 0;
  max-width: 46rem;
  padding: clamp(2rem, 5vw, 3.25rem);
}

/* ==========================================================================
   Services
   Each service is an editorial spread rather than a card: the name, price
   and duration hold the left column, the description and the action hold
   the right. Hairlines separate them, in the rhythm of the process list.
   ========================================================================== */

.service {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  padding: clamp(2.75rem, 7vw, 4.5rem) 0;
  border-top: 1px solid var(--line);
}

.service:last-of-type { border-bottom: 1px solid var(--line); }

@media (max-width: 860px) {
  .service { grid-template-columns: 1fr; gap: 1.5rem; }
}

.service h2 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); }

.service__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--grey);
  margin-top: 0.55rem;
}

.service__meta { margin-top: 1.75rem; }

.service__price {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.15rem;
  line-height: 1;
  color: var(--service-c, var(--ink));
}

.service__duration {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}

.service__body > .btn { margin-top: 2.25rem; }

/* A note that belongs to one service, such as the upgrade promise */
.service__note {
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 2px solid var(--service-c, var(--line));
  font-size: 0.95rem;
}

.service__note-label {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.service__note p { margin-top: 0; }

/* One palette colour per service, deepened for legibility */
.service:nth-of-type(1) { --service-c: color-mix(in srgb, var(--lemonade), var(--ink) 30%); }
.service:nth-of-type(2) { --service-c: color-mix(in srgb, var(--aura), var(--ink) 48%); }
.service:nth-of-type(3) { --service-c: color-mix(in srgb, var(--orchid), var(--ink) 28%); }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq { max-width: var(--measure); }

/* Question groups, ordered to follow the client's own journey: before you
   book, preparing, the appointment, the results, then booking and policies.
   The eyebrow treatment is reused so a group label reads as a section marker
   and does not compete with the Cormorant questions beneath it. */
.faq-group {
  margin-top: clamp(3rem, 6vw, 4.25rem);
  margin-bottom: 1.1rem;
}

.faq-group:first-of-type { margin-top: 0; }

.faq details {
  border-top: 1px solid var(--line);
  padding: 0.25rem 0;
}

.faq details:last-of-type { border-bottom: 1px solid var(--line); }

.faq summary {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  padding: 1.4rem 2.5rem 1.4rem 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color 200ms ease;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--grey);
  transition: transform 250ms ease, color 200ms ease;
}

.faq summary:hover { color: var(--orchid); }
.faq summary:hover::after { color: var(--orchid); }

.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--orchid); }

.faq details > div { padding: 0 0 1.75rem 1.5rem; max-width: var(--measure); }
.faq details > div p + p { margin-top: 1em; }

/* Each question carries a palette colour, cycling in progress-bar order */
.faq details:nth-of-type(5n+1) { --faq-c: color-mix(in srgb, var(--lacey), var(--ink) 45%); }
.faq details:nth-of-type(5n+2) { --faq-c: color-mix(in srgb, var(--lemonade), var(--ink) 20%); }
.faq details:nth-of-type(5n+3) { --faq-c: color-mix(in srgb, var(--orchid), var(--ink) 20%); }
.faq details:nth-of-type(5n+4) { --faq-c: color-mix(in srgb, var(--aura), var(--ink) 45%); }
.faq details:nth-of-type(5n+5) { --faq-c: color-mix(in srgb, var(--bio), var(--ink) 5%); }

.faq summary { padding-left: 1.5rem; }

.faq summary::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--faq-c, var(--orchid));
}

/* An open or hovered question takes its colour as TEXT, so the words need
   4.5:1 on ivory (WCAG AA). The pastel mixes above reached only 3.0 to 3.4:1,
   so the dot keeps its bright tint and the words use a deeper mix of the same
   colour. Measured 11 Oct 2026; each is about 4.7:1. */
.faq details:nth-of-type(5n+1) { --faq-t: color-mix(in srgb, var(--lacey), var(--ink) 63%); }
.faq details:nth-of-type(5n+2) { --faq-t: color-mix(in srgb, var(--lemonade), var(--ink) 43%); }
.faq details:nth-of-type(5n+3) { --faq-t: color-mix(in srgb, var(--orchid), var(--ink) 46%); }
.faq details:nth-of-type(5n+4) { --faq-t: color-mix(in srgb, var(--aura), var(--ink) 59%); }
.faq details:nth-of-type(5n+5) { --faq-t: color-mix(in srgb, var(--bio), var(--ink) 5%); }

.faq summary:hover,
.faq details[open] summary { color: var(--faq-t, var(--faq-c, var(--orchid))); }

.faq summary:hover::after,
.faq details[open] summary::after { color: var(--faq-t, var(--faq-c, var(--orchid))); }

/* ==========================================================================
   Mobile and tablet refinements
   ========================================================================== */

@media (max-width: 860px) {
  .process__step { grid-template-columns: 3.25rem 1fr; gap: 1rem; }
  .legal table { display: block; overflow-x: auto; }
}

@media (max-width: 560px) {
  .season-grid { grid-template-columns: 1fr; }
  .season-grid__cell { padding: 1.75rem 1.5rem; }
  .hero { padding-top: clamp(3.5rem, 10vw, 5rem); }
  .faq summary { font-size: 1.15rem; padding-right: 2.25rem; }
  .contact-card { padding: 2.25rem 1.5rem; }
  .form-panel { padding: 1.75rem 1.25rem; }
  .btn { display: block; width: 100%; text-align: center; }
  .contact-card .btn, .form .btn { max-width: 100%; }
  .site-footer__inner { gap: 1.75rem; }
}

/* ==========================================================================
   Kind words, published testimonials
   Rendered live from /api/testimonials; only words each client has given
   written permission to publish, named exactly as they chose.
   ========================================================================== */

.kw-list { max-width: 680px; margin: 0 auto; }

.kw { padding: 3.25rem 0; border-bottom: 1px solid var(--line); }
.kw:first-child { padding-top: 0.5rem; }
.kw:last-child { border-bottom: 0; }

.kw blockquote,
.quote-band blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-line;
}

.kw figcaption,
.quote-band__attr {
  margin-top: 1.2rem;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}

/* The quote band: one published testimonial, quietly, on key pages.
   Stays hidden until there is a real quote to show. */
.quote-band[hidden] { display: none; }
.quote-band .text-link { margin-top: 0.4rem; display: inline-block; }

/* Footer link colour for Kind Words: deep rose, 5.56:1 on ivory (AA). */
.site-footer__links a[href="/kind-words"] { --nav-c: #AD3A63; }

/* ==========================================================================
   Subscribe bar
   A permanent hairline strip above the header. It sits inside .site-header,
   so it rides with the sticky header rather than scrolling away. The whole
   strip is one link. Deliberately quiet: this is a masthead line, not a
   promotion.
   ========================================================================== */

.topbar {
  display: block;
  background: #F2EDE4;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  text-align: center;
  padding: 0.55rem var(--pad);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #5A5A56;
  transition: background-color 200ms ease, color 200ms ease;
}

/* Hover washes the strip in a pale lacey (the palette's warm yellow) and
   darkens the whole line to ink, so it reads unmistakably as a link without
   introducing a colour the site does not already use. */
.topbar:hover { background: #F5EDD2; color: var(--ink); }

.topbar:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.topbar__cta {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  white-space: nowrap;
}

.topbar__short { display: none; }

/* On narrow screens the descriptive line is swapped for the short masthead
   version, so the strip stays to a single line and costs as little vertical
   space as possible. */
@media (max-width: 700px) {
  .topbar { letter-spacing: 0.12em; }
  .topbar__text { display: none; }
  .topbar__short { display: inline; }
}

/* ==========================================================================
   Subscribe pop-up
   Built here rather than loaded from MailerLite, so it carries the house
   type and colours, adds no third-party script, and needs no change to the
   content security policy. The markup is created by js/subscribe-popup-v2.js.
   ========================================================================== */

.subpop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(44, 44, 44, 0.55);
  opacity: 0;
  transition: opacity 260ms ease;
}

.subpop.is-open { opacity: 1; }

.subpop__card {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  border: 1px solid var(--line);
  padding: 2.75rem clamp(1.5rem, 5vw, 2.75rem) 2.25rem;
  transform: translateY(10px);
  transition: transform 260ms ease;
  /* The palette strip is painted as a background on the card rather than a
     positioned pseudo-element, so it stays pinned to the top edge if the card
     itself has to scroll on a short screen. */
  background-color: var(--ivory);
  background-image: linear-gradient(90deg,
    var(--lacey), var(--lemonade), var(--orchid), var(--aura), var(--bio));
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top left;
}

.subpop.is-open .subpop__card { transform: none; }

.subpop__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--grey);
  transition: color 200ms ease;
}

.subpop__close:hover { color: var(--ink); }
.subpop__close:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.subpop__eyebrow {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.9rem;
}

.subpop__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 5vw, 2.15rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin-bottom: 0.9rem;
}

.subpop__lede {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--grey);
  margin-bottom: 1.75rem;
}

.subpop .form { max-width: none; }
.subpop .form__field { margin-bottom: 1.1rem; }
.subpop .form .btn { width: 100%; }
.subpop .form__status { margin-top: 1rem; font-size: 0.9rem; }

.subpop__small {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--grey);
  margin-top: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .subpop, .subpop__card { transition: none; }
  .subpop__card { transform: none; }
}

/* ==========================================================================
   Groups & Events (11 Oct 2026)
   A hub at /groups and four pages beneath it: Colour Parties, Hens and
   Stags, Brands and Events and Colour at Work (renamed and extended the same
   evening, at Shann's request). Built from the existing pieces
   wherever possible; the few additions are below. Teal #0F6E6E is the
   section's colour, as in the menu.
   ========================================================================== */

/* Text for screen readers only. Finishes short link labels such as "Find out
   more" so that each link still makes sense when read out of context. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The eyebrow on each group page links back to the hub: a quiet breadcrumb.
   Underlined in its own grey so it reads as a link without relying on
   colour alone. A class rather than `.eyebrow a`, so the analysis pages'
   own eyebrow link is left exactly as it was. */
.eyebrow__link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1rem;
  transition: color 200ms ease, border-color 200ms ease;
}

.eyebrow__link:hover,
.eyebrow__link:focus-visible { color: #0F6E6E; }

/* Four occasions on the hub. The season grid as two by two, so each card has
   room for its sentence, stacking to one column on phones. Names are upright,
   like the service names on Services; italic stays with the seasons. */
.season-grid--four { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 640px) { .season-grid--four { grid-template-columns: 1fr; } }

.season-grid--four .season-grid__cell h3 { font-style: normal; font-size: 1.5rem; }
.season-grid--four .season-grid__cell p { font-size: 0.95rem; line-height: 1.7; margin-top: 0.8rem; }
.season-grid--four .season-grid__cell .text-link { align-self: flex-start; margin-top: 1.75rem; }

/* Formats: the ways a group session can run. A hairline list rather than
   numbered steps, because these are choices, not a sequence. */
.formats {
  list-style: none;
  margin-top: 2.25rem;
  border-top: 1px solid var(--line);
}

.formats li {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--line);
}

.formats__name {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

/* Plain lists in body copy, marked with the same short dash as the
   sub-season lists on Home. */
.bullets { list-style: none; margin-top: 1.5rem; }
.bullets li { position: relative; padding-left: 1.75rem; }
.bullets li + li { margin-top: 0.8rem; }

.bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 14px;
  height: 1px;
  background: var(--grey);
}

.bullets strong,
.formats strong { font-weight: 500; }

/* The other group pages, offered at the foot of each one */
.siblings { margin-top: clamp(3.5rem, 7vw, 5rem); }
.siblings .eyebrow { margin-bottom: 1.25rem; }

.siblings__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.5rem;
}

/* Contact form: the optional group details. Shown when a group option is
   chosen (js/enquiry-v3.js); without the script it simply stays visible. */
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Floated so the legend sits inside the fieldset instead of breaking its top
   rule, which is how browsers draw a legend by default. */
.form legend {
  float: left;
  width: 100%;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
  padding: 0;
  margin-bottom: 0.3rem;
}

.form__hint {
  clear: both;
  font-size: 0.9rem;
  color: var(--grey);
  margin-bottom: 1.5rem;
}

.form .form__group {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.75rem 0 0.25rem;
  margin-bottom: 1.75rem;
}

.form .form__group[hidden] { display: none; }

/* Two text links side by side, wrapping cleanly on a phone (Services) */
.link-row { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; align-items: baseline; }

/* A short aside under the contact card's email line (Home) */
.contact-card__aside {
  font-size: 0.9rem;
  color: var(--grey);
}

.contact-card__aside a { color: var(--grey); }
.contact-card__aside a:hover { color: var(--orchid); }

/* Anchored services (Services#colour-together) clear the sticky header */
.service[id] { scroll-margin-top: 8.5rem; }

/* ==========================================================================
   Guide pages and search (14 Oct 2026)
   ========================================================================== */

/* A page's subject inside its main heading (Home). The eyebrow that sat
   above the h1 now sits inside it, so the heading itself says what the page
   is about, to search engines and to screen readers. It looks exactly as it
   did as a <p>: these two rules restore the block layout and the body line
   height the paragraph had. */
h1 > .eyebrow {
  display: block;
  line-height: 1.75;
}

/* The sixteen seasons in detail (/colour-analysis): the season grid, with
   each sub-season's three words under its name and, where it has one, its
   sister season. Still a plain dash and never a swatch (see .dash above). */
.season-grid--detail .season-grid__cell ul { line-height: 1.6; margin-top: 0.4rem; }

/* Here the lists are of different lengths, so they line up at the top
   instead: the descriptor keeps a three-line height rather than absorbing
   the difference (which bottom-aligns the lists on the home page). */
.season-grid--detail .season-grid__cell h3 + p { flex: none; min-height: 4.8em; }

.season-grid--detail .season-grid__cell li {
  display: block;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}

.season-grid--detail .season-grid__cell li:first-child { border-top: 0; }

.subseason__name {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink);
}

.subseason__words {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
}

.subseason__sister {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--grey);
}

/* Gifts: the three appointments, listed under the page's own h2, so their
   names are h3s. Same size as the h2 names on Services. */
.service h3 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); }