/* ==================================================================
   The Play Way
   ------------------------------------------------------------------
   The document this site is drawn from is built from full-bleed
   colour bands with hard seams. That band rhythm is the layout
   system here: every section is a band, each one sets its own
   foreground colours, and the page is read as a sequence of them.
   ================================================================== */

/* ---------- Tokens ------------------------------------------------ */
:root {
  --clay:        #c25428;
  --clay-deep:   #a6431e;
  --ochre:       #d69a52;
  --ochre-deep:  #c0863c;
  --cream:       #f6efd8;
  --sand:        #eddfbe;
  --bark:        #3d1f0f;

  --ink:         #6e3318;
  --ink-soft:    #8c5334;

  /* Accents drawn from the practice's own reference images: antique gold,
     an earthy green, and a deep red. Used sparingly — for emphasis, price
     and category marks — so the clay and ochre keep carrying the identity. */
  --gold:        #b8893b;
  --gold-soft:   #d9b871;
  --moss:        #5f6b3c;
  --moss-soft:   #8a9560;
  --blood:       #7d2621;
  --blood-soft:  #a8453b;

  --font-display: 'Quicksand', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step-hero: clamp(2.75rem, 6.4vw, 5.25rem);
  --step-xl:   clamp(1.9rem, 3.5vw, 3.15rem);
  --step-l:    clamp(1.4rem, 2.1vw, 1.95rem);
  --step-m:    clamp(1.13rem, 1.1vw, 1.35rem);
  --step-body: clamp(1rem, 0.35vw + 0.92rem, 1.1rem);
  --step-sm:   0.875rem;
  --step-xs:   0.75rem;

  --wrap:      78rem;
  --gutter:    clamp(1.25rem, 5vw, 4rem);
  --band-pad:  clamp(4.5rem, 9vw, 8.5rem);
  --radius:    2rem;
  --radius-sm: 1rem;

  --ease: cubic-bezier(0.22, 0.72, 0.16, 1);

  /* Per-band colours. Overridden by every .band-- modifier. */
  --bg: var(--cream);
  --fg: var(--ink);
  --fg-muted: var(--ink-soft);
  --rule: rgba(110, 51, 24, 0.18);
  --on-accent: var(--cream);
  --accent: var(--clay);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

/* The source document mixes weights inside a single sentence, setting
   the words that carry the meaning in bold. That is the house style. */
h1 strong, h2 strong, h3 strong, .display strong { font-weight: 700; }

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

a { color: inherit; }

ul { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: 0.4em; }
li::marker { color: currentColor; opacity: 0.5; }

:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--clay); color: var(--cream); }

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

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* A display value on a class beats the UA rule for [hidden], so state it. */
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200; padding: 0.75rem 1.25rem;
  background: var(--cream); color: var(--clay);
  border-radius: 999px; font-family: var(--font-display); font-weight: 700;
}
.skip-link:focus { top: 1rem; }

/* ---------- Bands ------------------------------------------------- */
.band {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--band-pad);
  isolation: isolate;
}

/* The colour fields in the source are printed on a textured stock.
   This is that grain, kept faint enough to read as paper not noise. */
.band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

.band--clay  { --bg: var(--clay);  --fg: var(--cream); --fg-muted: rgba(246,239,216,.86); --rule: rgba(246,239,216,.28); --accent: var(--cream); --on-accent: var(--clay); }
.band--ochre { --bg: var(--ochre); --fg: #fffaf0;      --fg-muted: rgba(255,250,240,.88); --rule: rgba(255,250,240,.32); --accent: #fffaf0;      --on-accent: var(--ochre-deep); }
.band--cream { --bg: var(--cream); --fg: var(--ink);   --fg-muted: var(--ink-soft);       --rule: rgba(110,51,24,.18);  --accent: var(--clay);  --on-accent: var(--cream); }
.band--sand  { --bg: var(--sand);  --fg: var(--ink);   --fg-muted: var(--ink-soft);       --rule: rgba(110,51,24,.2);   --accent: var(--clay);  --on-accent: var(--cream); }
.band--bark  { --bg: var(--bark);  --fg: var(--sand);  --fg-muted: rgba(237,223,190,.72); --rule: rgba(237,223,190,.2);  --accent: var(--ochre); --on-accent: var(--bark); }
/* Cream on blood is 8.41:1. The accent stays cream rather than ochre, which
   would only reach 3.96:1 on this ground and fails AA at body size. */
.band--blood { --bg: var(--blood); --fg: var(--cream); --fg-muted: rgba(246,239,216,.86); --rule: rgba(246,239,216,.28); --accent: var(--cream); --on-accent: var(--blood); }

.band--tight { padding-block: clamp(3rem, 5.5vw, 5rem); }

/* Short call-to-action strips read as a deliberate pause when centred,
   rather than as a band with an empty right-hand side. */
.band--center { text-align: center; }
.band--center .display,
.band--center .prose,
.band--center .lede { margin-inline: auto; }
.band--center .eyebrow { justify-content: center; }
.band--center .eyebrow::after { display: none; }
.band--center .actions { justify-content: center; }

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

/* ---------- Eyebrow ----------------------------------------------- */
/* Every section in the source carries a small letterspaced label in
   its top-left corner. It is the document's wayfinding, kept intact. */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.82;
  margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::after {
  content: '';
  height: 1px;
  flex: 0 1 4.5rem;
  background: currentColor;
  opacity: 0.45;
  transform-origin: left;
  animation: rule-in 1.1s var(--ease) both;
}
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Type -------------------------------------------------- */
.display  { font-family: var(--font-display); font-size: var(--step-xl); font-weight: 400; line-height: 1.16; letter-spacing: -0.015em; max-width: 20ch; }
.display--wide { max-width: 26ch; }
.display--sm { font-size: var(--step-l); }

.lede { font-size: var(--step-m); color: var(--fg-muted); max-width: 46ch; margin-top: 1.75rem; }
.prose { color: var(--fg-muted); max-width: 52ch; }
.prose--narrow { max-width: 42ch; }
.prose h3 {
  font-size: var(--step-m);
  font-weight: 700;
  color: var(--fg);
  margin: 2rem 0 0.5rem;
}
.prose h3:first-child { margin-top: 0; }
.prose ul { padding-left: 1.1em; }

.note { font-size: var(--step-sm); color: var(--fg-muted); }

/* ---------- Grid -------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2.25rem, 4.5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .split { grid-template-columns: repeat(12, 1fr); }
  .split > * { grid-column: span 6; }
  /* Both halves are pinned to row 1. Without this, placing the media at
     column 8 advances the auto-placement cursor past column 1, and a
     text block written after it in the markup drops to a second row. */
  .split__text  { grid-column: 1 / span 6; grid-row: 1; }
  .split__media { grid-column: 8 / span 5; grid-row: 1; }
  .split--flip .split__text  { grid-column: 7 / span 6; }
  .split--flip .split__media { grid-column: 1 / span 5; }
}

.stack > * + * { margin-top: 1.25rem; }

/* ---------- Media ------------------------------------------------- */
.frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  aspect-ratio: 4 / 3;
}
.frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.frame--tall { aspect-ratio: 4 / 5; }
.frame--wide { aspect-ratio: 16 / 9; }
a:hover .frame img, .frame:hover img { transform: scale(1.04); }

.portrait {
  display: block;              /* it is a <span>; without this the box rules do nothing */
  width: clamp(13rem, 22vw, 17rem);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Buttons ----------------------------------------------- */
.pill {
  --pill-fg: var(--accent);
  --pill-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--pill-fg);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.45s var(--ease);
}
/* The fill sweeps in from the left rather than cross-fading, so the
   button reads as being drawn the way the spiral is. */
.pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.pill:hover, .pill:focus-visible { color: var(--on-accent); }
.pill:hover::before, .pill:focus-visible::before { transform: scaleX(1); }

.pill--solid { background: var(--accent); color: var(--on-accent); }
.pill--solid::before { background: transparent; box-shadow: inset 0 0 0 100px rgba(0,0,0,.12); }
.pill--solid:hover, .pill--solid:focus-visible { color: var(--on-accent); }

.pill--sm { padding: 0.65rem 1.4rem; font-size: 0.85rem; }
/* WhatsApp's own green measures 1.07:1 against the clay band — invisible.
   The pill keeps the band's accent, and the icon carries the meaning. */
.pill--whatsapp svg { flex: none; }
.pill[disabled], .pill--disabled {
  opacity: 0.45; pointer-events: none;
}

.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.25rem; }
.actions--end { justify-content: flex-end; }

/* ---------- Header ------------------------------------------------ */
/* A solid bar, not a transparent overlay. The palette's cream-on-clay
   pairing only reaches 3.98:1, and cream-on-ochre 2.12:1, so a header
   that borrowed its background from the band beneath it could not be
   read on half the site. Cream on this deeper clay is 5.30:1, and it
   reads as one more band in a page built from bands. */
.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  padding-block: 1.1rem;
  background: var(--clay-deep);
  transition: padding 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.masthead.is-stuck {
  padding-block: 0.65rem;
  box-shadow: 0 1px 0 rgba(246, 239, 216, 0.16), 0 10px 30px rgba(61, 31, 15, 0.18);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
}
/* The wordmark beside the spiral is set in capitals, as in the logo. The text
   itself stays "The Play Way", so it is read and indexed normally. */
.brand span { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.92rem; }
.brand__mark {
  width: 2rem; height: auto; flex: none;
  transition: transform 0.9s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-40deg); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav a {
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  padding-block: 0.35rem;
  position: relative;
  white-space: nowrap;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav a:hover::after, .nav a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current='page'] { font-weight: 700; }
.nav .pill { --accent: var(--cream); --on-accent: var(--clay-deep); }

.nav-toggle {
  display: none;
  width: 2.75rem; height: 2.75rem;
  border: 0; background: none; padding: 0;
  color: var(--cream); cursor: pointer;
}
.nav-toggle span {
  display: block; height: 1.5px; width: 1.5rem;
  margin: 0.32rem auto; background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.is-open .nav-toggle span:nth-child(1) { transform: translateY(0.44rem) rotate(45deg); }
.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.is-open .nav-toggle span:nth-child(3) { transform: translateY(-0.44rem) rotate(-45deg); }

@media (max-width: 61.99rem) {
  /* The open panel is fixed and would otherwise paint over the static
     toggle, leaving no way to close the menu by tapping. */
  .nav-toggle { display: block; position: relative; z-index: 2; }
  .nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 1.4rem;
    /* Matches the header bar it drops out of, and keeps cream links at 5.3:1. */
    background: var(--clay-deep);
    font-size: 1.3rem;
    clip-path: circle(0% at calc(100% - 2.6rem) 2.6rem);
    transition: clip-path 0.65s var(--ease);
  }
  .nav a { font-size: 1.25rem; }
  .is-open .nav { clip-path: circle(150% at calc(100% - 2.6rem) 2.6rem); }
  body.is-open { overflow: hidden; }
}

/* ---------- Hero -------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: clamp(6rem, 12vh, 8rem) clamp(1.5rem, 4vh, 2.25rem);
  overflow: hidden;
}

/* ---------- Hero mosaic -------------------------------------------
   Every photograph in the collection, as a wall of blocks behind the
   lockup. Absolutely positioned, so it sits outside the hero's own grid
   and cannot disturb the centring of the content.

   The column count is stepped by breakpoint rather than auto-filled. With
   72 fixed tiles, auto-fill gives *more* columns as the screen widens,
   which means fewer rows — on a wide or a tall-narrow screen the grid can
   end up shorter than the hero and leave a band of bare colour along the
   bottom. Each step below keeps ceil(72 / cols) rows taller than 100svh.
   ------------------------------------------------------------------ */
.hero__mosaic {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  align-content: start;
  overflow: hidden;
  pointer-events: none;
  /* A tile that has not decoded yet shows this rather than a hole, which
     under the scrim is indistinguishable from a loaded one. */
  background: var(--bark);
}
@media (min-width: 34rem) { .hero__mosaic { --cols: 6; } }
@media (min-width: 56rem) { .hero__mosaic { --cols: 8; } }
@media (min-width: 88rem) { .hero__mosaic { --cols: 10; } }

.hero__tile {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  /* Left visible by default: the fill-mode below supplies the hidden
     starting state, so if the animation never runs the wall still shows. */
  animation: tile-in 0.9s var(--ease) both;
  animation-delay: var(--d, 0s);
}
@keyframes tile-in {
  from { opacity: 0; transform: scale(0.84); }
  to   { opacity: 1; transform: scale(1); }
}

/* The scrim. Cream on clay is only 3.98:1, and no clay tint reaches AA over
   a bright photograph at any opacity — bark does, from about 0.72 up. It is
   heaviest through the middle where the lockup and the copy sit, and lifts
   towards the edges so the photographs still read as photographs. */
.hero__mosaic::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Deepest behind the words on the left; lighter on the right, where the
     photographs show through around the spiral. */
  background:
    linear-gradient(to right,
      rgba(61, 31, 15, 0.84) 0%,
      rgba(61, 31, 15, 0.74) 42%,
      rgba(61, 31, 15, 0.54) 72%,
      rgba(61, 31, 15, 0.50) 100%),
    linear-gradient(to bottom,
      rgba(61, 31, 15, 0.78) 0%,
      rgba(61, 31, 15, 0.10) 24%,
      rgba(61, 31, 15, 0.10) 68%,
      rgba(61, 31, 15, 0.80) 100%);
}

/* Stacked on a phone the words run the full width, so the shading does too. */
@media (max-width: 55.99rem) {
  .hero__mosaic::after {
    background:
      linear-gradient(to bottom,
        rgba(61, 31, 15, 0.70) 0%,
        rgba(61, 31, 15, 0.78) 30%,
        rgba(61, 31, 15, 0.78) 72%,
        rgba(61, 31, 15, 0.86) 100%);
  }
}

/* Content rides above the wall. */
.hero > .wrap { position: relative; z-index: 1; }

/* The brochure's tree: in front of the photographs and their shading, behind
   the spiral. It grows in from the right with its canopy around the spiral,
   stopping short of the words. Sized from the width on a wide screen, with
   the trunk running off the bottom. (The image is 926 x 1480, so 93vw tall
   makes it 58vw wide.) */
.hero__tree {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("../img/hero-tree.webp?v=1") no-repeat right 30% / auto max(108%, 93vw);
  opacity: var(--tree-opacity, 0.25);
  animation: tree-in 2.4s var(--ease) 0.9s both;
}
@keyframes tree-in { from { opacity: 0; } to { opacity: var(--tree-opacity, 0.25); } }
/* Stacked on a phone, the tree stays low and faint so the words stay clear. */
@media (max-width: 55.99rem) {
  .hero__tree { --tree-opacity: 0.15; background-position: right bottom; background-size: auto 72%; }
}
.hero__scroll { z-index: 1; }

/* Muted cream is right on a flat colour field, but over photographs it drops
   under AA and reads as haze, so the hero's words take the full cream. */
.hero .hero__lede,
.hero .hero__foot { color: var(--fg); }

/* A drift slow enough to register as depth rather than as movement. The
   scale floor keeps the translate from exposing an edge. */
@media (prefers-reduced-motion: no-preference) {
  .hero__mosaic {
    animation: mosaic-drift 72s ease-in-out infinite alternate;
  }
}
@keyframes mosaic-drift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(0, -1.2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__tile { animation: none; }
  .hero__tree { animation: none; }
}
/* Words on the left, the spiral on its own on the right; stacked on a phone,
   with the spiral small and above the words so they stay the first thing read. */
.hero__grid {
  position: relative; z-index: 1;
  flex: 1;
  display: grid;
  align-content: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
}
.hero__spiral { order: -1; justify-self: end; }
@media (min-width: 56rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
  }
  .hero__spiral { order: 0; justify-self: center; }
}
.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4vw, 3.9rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0;
  max-width: 15em;
  text-wrap: balance;
  color: var(--fg);
}
.hero__lede {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
  margin: clamp(1rem, 2.5vh, 1.5rem) 0 0;
  max-width: 34em;
}
.hero__foot {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.35rem 2rem;
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  font-family: var(--font-display);
  font-size: var(--step-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.85;
}
.hero__foot p { margin: 0; }
@media (max-width: 34rem) { .hero__foot { letter-spacing: 0.08em; font-size: 0.68rem; } }
/* The spiral, revealed outward from the centre of the curl so it appears to
   be drawn rather than to fade in. The mask is two layers intersected: the
   artwork, and a growing disc. Sized by the screen's width and height so it
   never crowds the words: small on a phone, generous on a desktop. */
.hero__mark {
  display: block;
  width: clamp(6.5rem, 26vw, 8.5rem);
  aspect-ratio: 745 / 792;
  background: var(--cream);
  -webkit-mask-image: url("../img/logo-spiral.svg");
          mask-image: url("../img/logo-spiral.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .hero__mark {
    -webkit-mask-image: url("../img/logo-spiral.svg"),
      radial-gradient(circle at 56.1% 51.3%, #000 var(--reveal, 200%), transparent var(--reveal, 200%));
            mask-image: url("../img/logo-spiral.svg"),
      radial-gradient(circle at 56.1% 51.3%, #000 var(--reveal, 200%), transparent var(--reveal, 200%));
    -webkit-mask-size: contain, 100% 100%;
            mask-size: contain, 100% 100%;
    -webkit-mask-position: center, center;
            mask-position: center, center;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}
@media (min-width: 56rem) {
  .hero__mark { width: min(26vw, 56vh, 26rem); }
}
.hero .actions { flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
@media (min-width: 34rem) { .hero .actions { flex-direction: row; align-items: center; gap: 1rem; } }

.hero__scroll {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: var(--step-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.hero__scroll i {
  display: block; width: 1px; height: 2.25rem;
  background: currentColor;
  animation: drop 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drop {
  0%, 100% { transform: scaleY(0.25); opacity: 0.35; }
  45%      { transform: scaleY(1);    opacity: 1; }
}
/* On a phone the page's next section is already in reach; no prompt needed. */
@media (max-width: 48rem), (max-height: 44rem) { .hero__scroll { display: none; } }

/* Page heads on inner pages: shorter, left-aligned. */
.pagehead { padding-block: clamp(8rem, 14vw, 11rem) var(--band-pad); }
.pagehead .display { max-width: 22ch; }

/* ---------- The spiral rail --------------------------------------- */
/* One mark, drawn by scroll. The practice's own thesis is that growth
   is rarely linear — so the page's progress indicator is the spiral
   itself, filling outward from the centre of the curl. */
.rail {
  position: fixed;
  left: clamp(0.75rem, 2vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  width: clamp(3.5rem, 5.5vw, 5.25rem);
  pointer-events: none;
  color: var(--cream);
  transition: color 0.7s var(--ease), opacity 0.5s var(--ease);
  opacity: 0.9;
}
.rail--dark { color: var(--clay); }
.rail__mark {
  display: block;
  width: 100%;
  aspect-ratio: 745 / 792;
  background: currentColor;
  -webkit-mask-image: url("../img/logo-spiral.svg");
          mask-image: url("../img/logo-spiral.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .rail__mark {
    -webkit-mask-image: url("../img/logo-spiral.svg"),
      radial-gradient(circle at 56.2% 51.3%, #000 var(--reveal, 0px), transparent var(--reveal, 0px));
            mask-image: url("../img/logo-spiral.svg"),
      radial-gradient(circle at 56.2% 51.3%, #000 var(--reveal, 0px), transparent var(--reveal, 0px));
    -webkit-mask-size: contain, 100% 100%;
            mask-size: contain, 100% 100%;
    -webkit-mask-position: center, center;
            mask-position: center, center;
    -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}
/* No mask support: the rail is decorative, so drop it rather than show a block. */
@supports not (mask-image: url("../img/logo-spiral.svg")) {
  .rail { display: none; }
}
@media (max-width: 74rem) { .rail { display: none; } }

/* ---------- Reveal ------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.15rem);
  transition:
    opacity 0.9s var(--ease) var(--delay, 0s),
    transform 0.9s var(--ease) var(--delay, 0s);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Cards ------------------------------------------------- */
.cards {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
  text-decoration: none;
  color: inherit;
}
.card__disc {
  width: 100%;
  /* Grown from 12rem at Kathryn's request — the photographs are the point of
     these cards, and at the old size they read as icons rather than images. */
  max-width: 15.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0,0,0,.08);
}
.card__disc img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1s var(--ease);
}
.card:hover .card__disc img { transform: scale(1.07); }
.card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-m); }

/* ---------- Principles list --------------------------------------- */
.principles { margin: 0; padding: 0; list-style: none; }
.principles li {
  font-family: var(--font-display);
  font-size: var(--step-l);
  font-weight: 400;
  line-height: 1.3;
  padding-block: clamp(0.9rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--rule);
  transition: padding-left 0.5s var(--ease);
}
.principles li:first-child { border-top: 1px solid var(--rule); }
.principles li:hover { padding-left: 1rem; }
.principles strong { font-weight: 700; }

/* ---------- Quote / reflections ----------------------------------- */
.quotes {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.quote {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.quote:hover { transform: translateY(-4px); border-color: currentColor; }
.quote p {
  font-family: var(--font-display);
  font-size: var(--step-m);
  line-height: 1.45;
  margin: 0;
}
.quote footer {
  font-size: var(--step-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-muted);
  margin-top: auto;
}

/* ---------- Enquiry forms ----------------------------------------- */
/* Long forms are grouped into labelled sets so the page reads as a few
   short steps rather than one wall of inputs. */
.formset {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  max-width: 52rem;
}
.formset__legend {
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.85;
  margin-bottom: 1.75rem;
}
/* These labels are whole questions, not field names, so they drop the
   letterspaced small-caps treatment used elsewhere and read as sentences. */
.formset .field > label,
.formset .legend {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--step-sm);
  font-weight: 600;
  opacity: 1;
  line-height: 1.45;
  margin-bottom: 0.7rem;
}
.formset__grid { display: grid; gap: 0 1.25rem; }
@media (min-width: 42rem) {
  .formset__grid { grid-template-columns: 1fr 1fr; }
  .formset__grid > .field { grid-column: 1 / -1; }
  .formset__grid > .field--half { grid-column: span 1; }
}
.formset--note {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-bottom: 2rem;
}

/* Radio groups: the whole row is the target, not just the dot. */
.choices { display: grid; gap: 0.5rem; }
@media (min-width: 34rem) { .choices { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } }
.choice {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--step-sm);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.choice:hover { border-color: currentColor; }
.choice input {
  width: 1.05rem; height: 1.05rem; flex: none;
  accent-color: var(--accent); cursor: pointer;
}
.choice:has(input:checked) {
  border-color: currentColor;
  background: color-mix(in srgb, var(--bg) 84%, white);
}
.choice:focus-within { outline: 3px solid currentColor; outline-offset: 3px; }

/* ---------- FAQ --------------------------------------------------- */
/* Each answer stands alone as a complete reply, because that is the unit
   a search engine or an AI assistant quotes. */
.faq {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 62rem;
}
@media (min-width: 60rem) { .faq { grid-template-columns: 1fr 1fr; } }
.faq__item {
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.faq__q {
  font-family: var(--font-display);
  font-size: var(--step-m);
  font-weight: 700;
  margin: 0 0 0.75rem;
  color: var(--fg);
}
.faq__a { margin: 0; color: var(--fg-muted); max-width: 46ch; }

/* ---------- Forms ------------------------------------------------- */
.form { max-width: 40rem; }
.form--wide { max-width: none; }
.field { margin-bottom: 1.5rem; }
.field > label,
.legend {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  color: var(--fg);
  opacity: 0.9;
}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=number],
.field input[type=password],
.field input[type=date],
.field input[type=time],
.field input[type=datetime-local],
.field select,
.field textarea {
  width: 100%;
  padding: 0.95rem 1.15rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--fg);
  background: color-mix(in srgb, var(--bg) 82%, white);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-sm);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.band--clay .field input, .band--clay .field select, .band--clay .field textarea,
.band--ochre .field input, .band--ochre .field select, .band--ochre .field textarea,
.band--bark .field input, .band--bark .field select, .band--bark .field textarea {
  background: rgba(255,255,255,0.12);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: currentColor;
  background: color-mix(in srgb, var(--bg) 68%, white);
}
.field select { appearance: none; cursor: pointer; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 0.75rem;
}
.field__hint { font-size: var(--step-sm); color: var(--fg-muted); margin-top: 0.5rem; }
.field__error { font-size: var(--step-sm); font-weight: 600; margin-top: 0.5rem; }

.checkbox { display: flex; gap: 0.85rem; align-items: flex-start; }
.checkbox input { margin-top: 0.35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: none; }
.checkbox span { font-size: var(--step-sm); color: var(--fg-muted); }

.grid-2 { display: grid; gap: 0 1.25rem; }
@media (min-width: 40rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.alert {
  border: 1.5px solid currentColor;
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.4rem;
  margin-bottom: 2rem;
  font-size: var(--step-sm);
}
.alert--ok { background: color-mix(in srgb, var(--bg) 88%, white); }
.alert--bad { background: color-mix(in srgb, var(--bg) 88%, #c0392b); }
.alert ul { margin: 0.5rem 0 0; }

/* ---------- Calendar ---------------------------------------------- */
.cal {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 64rem) { .cal { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); } }

.cal__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.75rem;
}
.cal__month { font-family: var(--font-display); font-size: var(--step-l); font-weight: 600; }
.cal__step {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--rule); border-radius: 50%;
  color: inherit; text-decoration: none;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.cal__step:hover { border-color: currentColor; transform: scale(1.08); }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; }
.cal__dow {
  font-family: var(--font-display); font-size: var(--step-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center; padding-bottom: 0.75rem; opacity: 0.55;
}
.cal__day {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 0; background: none; padding: 0;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 500;
  color: inherit; text-decoration: none;
  border-radius: 50%;
  opacity: 0.35;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), opacity 0.35s var(--ease);
}
.cal__day--out { visibility: hidden; }
/* A day with something on it gets a ring; the count sits under it. */
.cal__day--has {
  opacity: 1;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--rule);
}
.cal__day--has:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.cal__day--has::after {
  content: '';
  position: absolute; bottom: 0.42rem; left: 50%;
  width: 0.3rem; height: 0.3rem; margin-left: -0.15rem;
  border-radius: 50%; background: currentColor;
}
.cal__day--on {
  background: var(--accent); color: var(--on-accent);
  opacity: 1; box-shadow: none; font-weight: 700;
}
.cal__day--on::after { background: currentColor; }
.cal__day--today { opacity: 1; font-weight: 700; }

.cal__legend { margin-top: 1.75rem; font-size: var(--step-sm); color: var(--fg-muted); }

/* ---------- Session list ------------------------------------------ */
.sessions { display: grid; gap: 1.25rem; }
.session {
  display: grid;
  gap: 1.25rem 1.75rem;
  align-items: center;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease);
}
.session:hover { border-color: currentColor; transform: translateY(-3px); }
@media (min-width: 46rem) {
  .session { grid-template-columns: 6.5rem minmax(0, 1fr) auto; }
}

.session__when {
  font-family: var(--font-display);
  line-height: 1.15;
  text-align: left;
}
.session__day { display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; }
.session__mon {
  display: block; font-size: var(--step-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; margin-top: 0.25rem;
}
.session__title { font-family: var(--font-display); font-size: var(--step-m); font-weight: 600; margin: 0 0 0.4rem; }
.session__meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  font-size: var(--step-sm); color: var(--fg-muted); margin: 0;
}
.session__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Philosophy: the four principles as four short entries, two by two. */
.tenets { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 52rem) { .tenets { grid-template-columns: 1fr 1fr; } }
.tenets__item { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.tenets__item h3 { font-family: var(--font-display); font-size: var(--step-m); font-weight: 700; margin: 0 0 .75rem; color: var(--fg); }
.tenets__item p { margin: 0; color: var(--fg-muted); max-width: 52ch; }
.tenets__item strong { color: var(--fg); }

/* A list read as a set of named entries rather than bullet points. */
.prose ul.tools { list-style: none; padding-left: 0; margin: 1.25rem 0; }
.prose ul.tools li { margin: 0 0 0.9rem; padding: 0; }
.prose ul.tools li::before { content: none; }
.session__series { margin: 0.6rem 0 0; padding: 0; list-style: none; font-size: var(--step-sm); color: var(--fg-muted); }
.session__series li { margin: 0 0 0.2rem; }
.tag {
  display: inline-block;
  font-family: var(--font-display); font-size: var(--step-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--rule);
}
.tag--full { opacity: 0.7; }

.empty {
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--fg-muted);
}

/* ---------- Summary panel (booking) -------------------------------- */
.panel {
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.25rem);
}
.panel dl { margin: 0; display: grid; gap: 0.9rem; }
.panel dt {
  font-family: var(--font-display); font-size: var(--step-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7;
}
.panel dd { margin: 0.2rem 0 0; font-size: var(--step-m); font-family: var(--font-display); }

/* ---------- Offering cards ---------------------------------------- */
/* Five group offerings that should read as one ecosystem: a shared card,
   distinguished only by the colour of its marker and its rhythm line. */
.offers { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 46rem) { .offers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 74rem) { .offers { grid-template-columns: repeat(3, 1fr); } }

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.offer:hover { transform: translateY(-4px); border-color: currentColor; }
/* The marker: a short bar in the offering's own colour. */
.offer::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--offer-accent, var(--accent));
}
.offer--sundays   { --offer-accent: var(--gold); }
.offer--circle    { --offer-accent: var(--clay); }
.offer--playlab   { --offer-accent: var(--ochre-deep); }
.offer--underworld{ --offer-accent: var(--moss); }
.offer--tailored  { --offer-accent: var(--ink-soft); }

.offer__rhythm {
  font-family: var(--font-display);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--offer-accent, var(--accent));
}
.offer__name { font-family: var(--font-display); font-size: var(--step-l); font-weight: 600; margin: 0; }
.offer__blurb { color: var(--fg-muted); margin: 0; font-size: var(--step-sm); }
.offer__facts { margin: 0; padding: 0; list-style: none; font-size: var(--step-sm); color: var(--fg-muted); }
.offer__facts li { display: flex; gap: 0.6rem; margin: 0 0 0.3rem; }
.offer__facts b { font-weight: 600; color: var(--fg); min-width: 5.5rem; flex: none; }
/* An offering's booking & cancellation policy: there when wanted, quiet otherwise. */
.policy { margin-top: clamp(1.75rem, 3vw, 2.25rem); padding-top: 1rem; border-top: 1px solid var(--rule); max-width: 62ch; }
.policy summary { cursor: pointer; font-weight: 600; font-size: var(--step-sm); letter-spacing: .02em; list-style: none; display: flex; align-items: center; gap: .5rem; }
.policy summary::-webkit-details-marker { display: none; }
.policy summary::after { content: "+"; font-weight: 400; font-size: 1.15em; line-height: 1; }
.policy[open] summary::after { content: "\2212"; }
.policy summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.policy .prose { margin-top: .85rem; font-size: var(--step-sm); color: var(--fg-muted); }
.offer__foot { margin-top: auto; padding-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.soon {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px dashed var(--offer-accent, var(--rule));
  color: var(--offer-accent, var(--fg-muted));
}

/* ---------- Rates table ------------------------------------------- */
.rates { width: 100%; border-collapse: collapse; margin-top: clamp(2rem, 4vw, 3rem); max-width: 46rem; }
.rates th, .rates td { text-align: left; padding: 0.95rem 0.5rem; border-bottom: 1px solid var(--rule); }
.rates th {
  font-family: var(--font-display); font-size: var(--step-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted);
}
.rates td:last-child, .rates th:last-child { text-align: right; white-space: nowrap; }
.rates .fee {
  font-family: var(--font-display); font-size: var(--step-m); font-weight: 700; color: var(--fg);
}
.rates small { display: block; color: var(--fg-muted); font-size: var(--step-sm); margin-top: 0.2rem; }

/* ---------- Steps ------------------------------------------------- */
/* Numbered because this genuinely is a sequence — each step depends on
   the one before it. */
.steps { counter-reset: step; list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; max-width: 46rem; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.75rem 3.5rem;
  border-left: 1px solid var(--rule);
  margin-left: 1rem;
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: -1rem; top: 0;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--rule);
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 700;
  color: var(--fg);
}
.steps h3 { font-family: var(--font-display); font-size: var(--step-m); font-weight: 700; margin: 0 0 0.4rem; }
.steps p { color: var(--fg-muted); margin: 0; }

/* ---------- Texture band ------------------------------------------ */
/* The practice's own reference images, butted edge to edge at a matched
   height. Each keeps its own width so the rhythm stays irregular rather
   than gridded — the "structured mess" the brand is after. */
.texture {
  --texture-h: 160px;
  height: var(--texture-h);
  overflow: hidden;
  background: var(--bark);
  position: relative;
  isolation: isolate;
}
.texture__track {
  display: flex;
  height: 100%;
  width: max-content;
  animation: texture-drift 120s linear infinite;
}
.texture__track img {
  height: 100%;
  width: auto;
  flex: none;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* The track holds two identical passes, so shifting by exactly half its
   width returns to the start with no visible jump. */
@keyframes texture-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Soft edges so the band reads as a continuing surface rather than a
   filmstrip that starts and stops at the viewport. */
.texture::before,
.texture::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(2rem, 6vw, 5rem);
  z-index: 1;
  pointer-events: none;
}
.texture::before { left: 0;  background: linear-gradient(to right, var(--bark), transparent); }
.texture::after  { right: 0; background: linear-gradient(to left,  var(--bark), transparent); }

@media (max-width: 40rem) { .texture { --texture-h: 116px; } }

@media (prefers-reduced-motion: reduce) {
  .texture__track { animation: none; }
}

/* ---------- Footer ------------------------------------------------ *//* ---------- Footer ------------------------------------------------ */
.foot { padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; }
.foot__top {
  display: grid; gap: 2.5rem;
  padding-bottom: 3rem; border-bottom: 1px solid var(--rule);
}
@media (min-width: 52rem) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .foot__top { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.foot h4 {
  font-size: var(--step-xs); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 1.1rem; opacity: 0.75;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.6rem; }
.foot a { text-decoration: none; opacity: 0.85; transition: opacity 0.3s var(--ease); }
.foot a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
/* Psychology Today's verified badge: drawn by their script, shown at full strength. */
.foot__seal { margin-top: 1.25rem; }
.foot__seal a { opacity: 1; display: inline-block; }
.foot__seal a:hover { text-decoration: none; }
/* Closing call to action, sitting between the link columns and the small print. */
.foot__cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.25rem);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.foot__cta-lead {
  font-family: var(--font-display);
  font-size: var(--step-m);
  color: var(--fg);
  margin: 0;
}

.foot__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-top: 2rem; font-size: var(--step-sm); opacity: 0.7;
}
.contact-line { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.75rem; }
.contact-line svg { width: 1.15rem; height: 1.15rem; flex: none; opacity: 0.8; }

/* ---------- Motion preferences ------------------------------------ */
@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;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .rail__mark, .hero__mark { --reveal: 200%; }
}

/* The three ways into an offering, on the calendar page. */
.booking-routes { margin: 1.25rem 0 0; padding: 0; list-style: none; color: var(--fg-muted); max-width: 60ch; }
.booking-routes li { margin: 0 0 0.6rem; }
.booking-routes strong { color: var(--fg); font-weight: 700; }

/* ---------- Contribution form ------------------------------------- */
.donate, .donate__confirm {
  margin: clamp(1.75rem, 4vw, 2.5rem) auto 0;
  max-width: 34rem;
  text-align: left;
  display: grid;
  gap: 1.1rem;
}
.donate__confirm { justify-items: center; text-align: center; }
.donate__amounts {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem 1.15rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}
.donate__amounts legend {
  font-family: var(--font-display);
  font-size: var(--step-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .75;
  padding: 0 .4rem;
}
.donate__amount {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display);
}
.donate__amount:has(input:checked) {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.donate__amount input { accent-color: currentColor; }
.donate__custom { flex: 1 1 8rem; margin: 0; }
.donate__custom input { width: 100%; }