/* ==========================================================================
   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;
  gap: clamp(1.1rem, 1.8vw, 1.75rem);
}

.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; }

/* The full menu needs roughly 1035px: wordmark 220 + nav 687 + the gap
   between them + the page padding. Below that it wraps onto two lines, which
   looked broken between 980 and 1035. The burger now takes over at 1080,
   comfortably before the menu runs out of room, so it never stacks. If a
   menu item is ever added, re-measure and raise this number. */
@media (max-width: 1080px) {
  .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 {
  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;
}

.site-nav a:hover,
.site-nav a.was-hovered,
.site-nav a[aria-current="page"] {
  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; } }

.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="/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 { 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;
}

/* 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) 45%); }
.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 {
  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));
}

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

.faq summary:hover::after,
.faq details[open] summary::after { color: 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; }
}