/* =====================================================================
   STEADY GROUND — STYLES
   ---------------------------------------------------------------------
    1. Brand tokens          ← colours, fonts and spacing live here
    2. Section colour themes
    3. Base
    4. Layout helpers
    5. Brand elements        (logo, groundline, eyebrow, glow, grain)
    6. Components            (buttons, links, artwork frames, chips, accordions)
    7. Header + mobile menu
    8. Sections, in page order
    9. Responsive adjustments
   10. Motion + reduced motion
   11. Edit-guide mode       (open the site with ?edit on the end)
   ===================================================================== */


/* =====================================================================
   THE TWO TYPEFACES, stored with the site in assets/fonts
   Inter (the plain text) and Newsreader (the headings), so no page has to
   fetch them from Google. Each comes in two files: everyday letters, and a
   second file of accented letters that is only fetched if a page needs it.
   Both are free to use and share under the SIL Open Font License
   (see assets/fonts/ABOUT-THESE-FONTS.txt).
   ===================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =====================================================================
   1. BRAND TOKENS
   Change a colour here and it updates across the whole site.
   ===================================================================== */
:root {
  /* The five brand colours */
  --forest:  #1E3D2F;   /* Steadiness — the main identity colour     */
  --oxblood: #6E1E22;   /* Commitment — buttons, the closing section  */
  --cream:   #F3EFE6;   /* Welcome — panels and quieter sections      */
  --gold:    #A5843A;   /* Worth — fine lines and the brand's ball    */
  --ink:     #15201B;   /* Clarity — reading text and the footer      */

  /* The main reading background: a bright, warm near-white */
  --paper:   #FBF9F4;

  /* The characters' inner light. Only ever used as a soft glow, never for text. */
  --core-light: #E8A652;

  /* The emblem's own colours. Used for the logo only, so it always matches the master artwork. */
  --logo-red:   #7F1B1B;
  --logo-green: #1C3728;
  --logo-gold:  #C7802D;

  /* Supporting tones — contrast-checked against the colours above */
  --cream-deep:       #E9E3D6;
  --field:            #FFFFFF;
  --ink-muted:        #444B46;
  --gold-text:        #74622F;
  --gold-light:       #B79D62;
  --muted-on-forest:  #B5BBB1;
  --muted-on-oxblood: #D0B9B3;
  --muted-on-ink:     #9A9C95;
  --oxblood-hover:    #581E20;
  --field-border:     #797D76;

  /* Fonts: Inter for almost everything; Newsreader for the wordmark, the opening headline and one big statement */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-space: clamp(56px, 7vw, 100px);
  --header-h: 72px;
  --radius: 2px;
  --radius-art: 4px;

  /* Motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --fast: 180ms;
  --ui: 280ms;
  --slow: 700ms;

  color-scheme: only light;
}


/* =====================================================================
   2. SECTION COLOUR THEMES
   Each section has data-theme="paper | cream | forest | oxblood | ink".
   Components only ever use these named roles, so contrast stays correct.
   ===================================================================== */
[data-theme] {
  --accent: var(--gold);
  --mark-ball: var(--gold);
  --control-bg: var(--field);
  --control-fg: var(--ink);
  --control-line: var(--field-border);
  background: var(--bg);
  color: var(--fg);
}

[data-theme="paper"],
[data-theme="cream"],
[data-theme="cream-deep"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --heading: var(--forest);
  --fg-muted: var(--ink-muted);
  --accent-text: var(--gold-text);
  --line: rgb(21 32 27 / .14);
  --line-strong: rgb(21 32 27 / .28);
  --panel: var(--cream);
  --btn-bg: var(--oxblood);
  --btn-fg: var(--cream);
  --btn-hover: var(--oxblood-hover);
  --focus: var(--oxblood);
  --logo-steady: var(--logo-green);
  --logo-ground: var(--logo-red);
}
[data-theme="cream"] { --bg: var(--cream); --panel: var(--paper); }
/* On the dark sections the wordmark turns cream; the emblem keeps its colours on its cream plate */
[data-theme="forest"],
[data-theme="oxblood"],
[data-theme="ink"] { --logo-steady: var(--cream); --logo-ground: var(--cream); }
[data-theme="cream-deep"] { --bg: var(--cream-deep); }

[data-theme="forest"] {
  --bg: var(--forest);
  --fg: var(--cream);
  --heading: var(--cream);
  --fg-muted: var(--muted-on-forest);
  --accent-text: var(--gold-light);
  --line: rgb(243 239 230 / .2);
  --line-strong: rgb(243 239 230 / .36);
  --panel: rgb(243 239 230 / .06);
  --btn-bg: var(--cream);
  --btn-fg: var(--forest);
  --btn-hover: var(--cream-deep);
  --focus: var(--cream);
}

[data-theme="oxblood"] {
  --bg: var(--oxblood);
  --fg: var(--cream);
  --heading: var(--cream);
  --fg-muted: var(--muted-on-oxblood);
  --accent-text: var(--cream);
  --mark-ball: var(--gold-light);
  --line: rgb(243 239 230 / .2);
  --line-strong: rgb(243 239 230 / .36);
  --btn-bg: var(--cream);
  --btn-fg: var(--oxblood);
  --btn-hover: var(--cream-deep);
  --focus: var(--cream);
}

[data-theme="ink"] {
  --bg: var(--ink);
  --fg: var(--cream);
  --heading: var(--cream);
  --fg-muted: var(--muted-on-ink);
  --accent-text: var(--gold-light);
  --line: rgb(243 239 230 / .16);
  --line-strong: rgb(243 239 230 / .3);
  --btn-bg: var(--cream);
  --btn-fg: var(--ink);
  --btn-hover: var(--cream-deep);
  --focus: var(--cream);
}


/* =====================================================================
   3. BASE
   ===================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--heading);
  text-wrap: balance;
}
h2 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -.035em;
}
h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }

p { max-width: 66ch; text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: inherit; text-underline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .6; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
ul, ol { padding-left: 1.4em; }
[hidden] { display: none !important; }

:focus-visible,
[tabindex="-1"]:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Links to a part of the page stop just below the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
main { overflow: clip; }
main:focus { outline: none; }

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

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

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--forest);
  color: var(--cream);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }


/* =====================================================================
   4. LAYOUT HELPERS
   ===================================================================== */
.container {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-space);
}
.section > * { position: relative; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: 24px clamp(32px, 6vw, 96px);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section-head h2 { max-width: 17ch; }
.section-head > p { color: var(--fg-muted); }

.muted { color: var(--fg-muted); }
.small { font-size: .875rem; line-height: 1.6; }
.lead {
  font-size: clamp(1.125rem, 1rem + .35vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
}
.anchor-alias { position: absolute; top: 0; left: 0; }


/* =====================================================================
   5. BRAND ELEMENTS
   The Steady Ground mark: a ball at rest on level ground.
   The same "ball on a line" appears as the groundline, eyebrow marker,
   reading-progress bar and timeline nodes. The characters' warm inner
   light appears as a soft glow in the green sections.
   ===================================================================== */

/* Logo lockup: the emblem beside the stacked two-colour wordmark, with a gold rule beneath */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--heading);
  text-decoration: none;
}
.logo-emblem {
  width: 40px;
  height: auto;
  flex: none;
  overflow: visible;
}
.logo-words {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--serif);
  font-weight: 700;
  line-height: .9;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-word-steady {
  margin-right: -.17em;          /* balances the letter spacing so the word stays centred */
  font-size: .8rem;
  letter-spacing: .17em;
  color: var(--logo-steady);
}
.logo-word-ground {
  font-size: 1.36rem;
  letter-spacing: .02em;
  color: var(--logo-ground);
}
.logo-words::after {
  content: "";
  width: 38%;
  height: 2px;
  margin-top: 5px;
  background: var(--logo-gold);
}

/* Groundline: a gold line with the ball resting at the end of it */
.groundline {
  position: relative;
  width: min(170px, 45%);
  height: 11px;
}
.groundline-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
}
.groundline-ball {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mark-ball);
}

/* Eyebrow label, led by the mark in miniature */
.eyebrow {
  --draw: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 8px;
  background:
    radial-gradient(circle calc(var(--draw) * 3.5px) at 50% 3.5px, var(--mark-ball) 96%, transparent 100%) no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / calc(var(--draw) * 100%) 1px no-repeat;
}

/* Warm inner light — a soft amber glow in a corner of the green sections */
.glow { background-image: radial-gradient(55% 50% at 92% 8%, rgb(232 166 82 / .16), transparent 72%); }
.glow-left { background-image: radial-gradient(50% 45% at 4% 96%, rgb(232 166 82 / .13), transparent 72%); }

/* Topographic contour lines — "ground" as terrain */
.contours {
  position: absolute !important;
  width: 70%;
  height: auto;
  right: -15%;
  top: -2%;
  opacity: .1;
  color: var(--accent);
  pointer-events: none;
}

/* Film grain on dark sections */
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23F3EFE6' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}


/* =====================================================================
   6. COMPONENTS
   ===================================================================== */

/* Buttons — the hover colour sweeps in from the left */
.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 48px;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 1rem/1.35 var(--sans);
  text-decoration: none;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.button:hover::before,
.button:focus-visible::before {
  transform: scaleX(1);
  transform-origin: left;
}
/* Ring button (the opening "Get involved"): a pill with a dark disc, and a gold arc that orbits the disc.
   Pointing at it stops the arc where it is while its glow keeps breathing. */
.button-ring {
  gap: 14px;
  min-height: 52px;
  padding: 6px 24px 6px 6px;
  border-radius: 999px;
  font-size: .875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ring-disc {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
}
.ring-disc .arrow { position: relative; z-index: 2; letter-spacing: 0; }
.ring-disc::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0turn, transparent 0 56%, #7F1B1B 64%, #C7802D 74%, #F6DCA6 84%, #E8A652 90%, transparent 96%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
}
@media (prefers-reduced-motion: no-preference) {
  .ring-disc::before { animation: ring-orbit 2.6s linear infinite, ring-glow 7s ease-in-out infinite; }
  .button-ring:hover .ring-disc::before,
  .button-ring:focus-visible .ring-disc::before { animation-play-state: paused, running; }
}
@keyframes ring-orbit { to { transform: rotate(1turn); } }
@keyframes ring-glow { 50% { filter: brightness(1.35) saturate(1.25); } }
.button-ring:hover .ring-disc .arrow,
.button-ring:focus-visible .ring-disc .arrow { transform: translate(2px, -2px); }
.button-small {
  white-space: nowrap;
  min-height: 44px;
  padding: 11px 17px;
  font-size: .875rem;
}

.arrow {
  display: inline-block;
  flex: none;
  transition: transform var(--fast) var(--ease-out);
}
.button:hover .arrow,
.button:focus-visible .arrow,
.text-link:hover .arrow,
.text-link:focus-visible .arrow,
.theme-invite:hover .arrow,
.theme-invite:focus-visible .arrow { transform: translate(3px, -3px); }
.text-link:hover .arrow-down,
.text-link:focus-visible .arrow-down { transform: translateY(4px); }

/* Text link — underline draws from left to right */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--ui) var(--ease-out);
}
.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

/* Chips and labels */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.5;
}
.status-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--mark-ball);
  box-shadow: 0 0 0 3px rgb(232 166 82 / .2);
}
.example-chip {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Pictures and artwork. The frame keeps its shape, and any image is cropped to fit it.
   To choose which part of an image stays in view, add e.g. style="object-position: 50% 20%" to the <img>. */
.media {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 4 / 3);
  background: var(--cream-deep);
}
.media.art { border-radius: var(--radius-art); }
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.2s var(--ease-out);
}
.media:hover img { scale: 1.03; }
.media-caption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgb(251 249 244 / .88);
  color: var(--ink);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Accordions (FAQ, sources, privacy) */
details { border-bottom: 1px solid var(--line); }
summary {
  position: relative;
  min-height: 48px;
  padding: 20px 48px 20px 0;
  list-style: none;
  cursor: pointer;
  font-weight: 600;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform var(--ui) var(--ease-out);
}
details[open] > summary::after { transform: rotate(135deg); }
details > p,
.details-body { padding-bottom: 22px; }
/* The privacy note in the footer runs to several short paragraphs */
.footer-details .details-body p + p { margin-top: .75em; }

/* Smooth opening where the browser supports it (others simply open instantly) */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    height: 0;
    overflow: clip;
    transition: height .5s var(--ease-out), content-visibility .5s allow-discrete;
  }
  details[open]::details-content { height: auto; }
}
/* ...and the answer settles in as its question opens */
@media (prefers-reduced-motion: no-preference) {
  details[open] > .details-body { animation: answer-in .5s var(--ease-out) both; }
}
@keyframes answer-in { from { opacity: 0; transform: translateY(-6px); } }

.notice {
  padding: 8px 0 8px 18px;
  border-left: 2px solid var(--accent);
  font-weight: 500;
}

.source-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 500;
}


/* =====================================================================
   7. HEADER + MOBILE MENU
   ===================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgb(251 249 244 / .94);
  backdrop-filter: blur(10px);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: var(--header-h);
}
.site-header .logo { transition: transform var(--ui) var(--ease-out); transform-origin: left center; }
.site-header.is-scrolled .logo { transform: scale(.94); }

.main-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.main-nav a {
  position: relative;
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--ui) var(--ease-out);
}
.main-nav a:hover::after,
.main-nav a[aria-current="true"]::after,
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: none;
  font-size: .875rem;
  font-weight: 500;
}
.menu-toggle-lines {
  width: 18px;
  height: 9px;
  border-block: 1.5px solid currentColor;
}

/* Reading progress — the ball rolls along the ground as you read */
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  container-type: inline-size;
  pointer-events: none;
}
.progress-line {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}
.progress-ball {
  position: absolute;
  left: 0;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateX(calc(var(--progress, 0) * (100cqw - 8px)));
}

/* Full-screen menu on phones */
.mobile-menu {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 20px var(--gutter) 32px;
  border: 0;
}
.mobile-menu::backdrop { background: var(--forest); }
.mobile-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-menu .logo-word-ground { font-size: 1.3rem; }
.menu-close {
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: none;
}
.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 48px;
}
.mobile-menu nav a {
  font: 650 clamp(1.9rem, 8vw, 2.6rem)/1.2 var(--sans);
  letter-spacing: -.03em;
  text-decoration: none;
}
.mobile-menu nav a[aria-current] { color: var(--gold-light); }
.mobile-menu > .button { margin-top: 36px; }


/* =====================================================================
   8. SECTIONS, IN PAGE ORDER
   The homepage (index.html) first; the programme page further down.
   ===================================================================== */

/* ---------- Shared pieces, used on both pages ---------- */
.small-heading {
  margin: 30px 0 10px;
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.route-list { margin: 0 0 14px; padding: 0; list-style: none; }
.route-list li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
}
.route-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mark-ball);
}
/* "Grow → Cook → Share" style sequences */
.loop-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--heading);
}
.loop-steps span:not(:last-child)::after {
  content: "→";
  margin-inline: .45em;
  font-weight: 500;
  color: var(--gold-light);
}
/* The strengths each part of the programme builds */
.values-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.values-tag svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
.values-tag svg:last-of-type { margin-right: 6px; }
.theme-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 14px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--btn-bg);
  text-decoration: none;
}
.theme-more:hover .arrow,
.theme-more:focus-visible .arrow { transform: translateX(4px); }
.section-link { margin-top: 14px; color: var(--btn-bg); }

/* ---------- 1 · Hero ---------- */
.hero { padding-block: clamp(24px, 3.4vw, 52px) clamp(48px, 6vw, 88px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: start;
  column-gap: clamp(40px, 5vw, 88px);
}
.hero-title {
  margin-top: 20px;
  font: 600 clamp(2.5rem, .5rem + 5.2vw, 6rem)/.98 var(--serif);
  letter-spacing: -.035em;
}
.hero-line { display: block; }
.hero-line > span { display: inline-block; }
/* The full stops are small gold points, like the ball on the groundline */
.hero-dot { display: inline-block; color: var(--gold); }
/* The promise as the headline, with the four parts beneath as a signature */
.hero-promise { font-size: clamp(2.3rem, .8rem + 4.4vw, 5.3rem); line-height: 1.04; }
.hero-signature {
  margin-top: 22px;
  font: 600 clamp(1.05rem, .95rem + .45vw, 1.35rem)/1.3 var(--serif);
  letter-spacing: .01em;
  color: var(--heading);
}
.hero-signature .hero-dot { margin-right: .25em; }
/* Opening light: a band of warm light passes through each word once (motion.js), then the words settle
   into solid green. Only while animation runs, and only where the browser can clip a background to text. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* (The full stop sits outside the word, so it never shows through the clipped light) */
  .has-motion .hero-word {
    display: inline-block;
    background: linear-gradient(100deg, var(--heading) 0 40%, #C7802D 46%, #F6DCA6 50%, #C7802D 54%, var(--heading) 60% 100%) 0 0 / 300% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.hero-side { max-width: 540px; padding-top: 16px; }
/* The gold line above the introduction is exactly as wide as the text under it */
.hero-groundline { width: 100%; margin-bottom: 24px; }
.hero-intro {
  margin-bottom: 26px;
  font-size: clamp(1.0625rem, .95rem + .3vw, 1.2rem);
  line-height: 1.55;
}
.hero-art-wrap {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
}
.hero-art img { object-position: 30% 50%; }
.hero-badge {
  position: absolute;
  z-index: 3;
  right: clamp(12px, 2.4vw, 32px);
  top: clamp(12px, 2.4vw, 32px);
  width: clamp(80px, 8.5vw, 124px);
  overflow: visible;
  pointer-events: none;
}
.hero-badge-disc { fill: var(--forest); }
.hero-badge text {
  fill: var(--cream);
  font: 600 13.5px var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-badge-mark { --emblem-plate: var(--cream); }

/* The three connected parts, joined by one gold line */
.pillars-wrap { margin-top: clamp(40px, 5vw, 64px); }
.pillars {
  --draw: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(28px, 4vw, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pillars::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 0;
  top: 6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(var(--draw));
  transform-origin: left;
}
.pillar { position: relative; padding-top: 34px; }
.pillar-node {
  position: absolute;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--core-light);
  box-shadow: 0 0 0 5px var(--bg), 0 0 18px rgb(232 166 82 / .7);
}
.pillar h3 {
  margin-bottom: 8px;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  letter-spacing: -.025em;
}
.pillar p { font-size: 1rem; color: var(--fg-muted); }
.pillar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 4px;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--btn-bg);
  text-decoration: none;
}
.pillar-link:hover .arrow,
.pillar-link:focus-visible .arrow { transform: translateX(4px); }

/* ---------- 2 · Why Steady Ground ---------- */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
  gap: 32px clamp(40px, 6vw, 96px);
}
.statement {
  max-width: 12ch;
  font: 600 clamp(2.4rem, 1.1rem + 4.2vw, 5rem)/1.12 var(--serif);
  letter-spacing: -.03em;
}
.statement-long { max-width: 15ch; font-size: clamp(2rem, 1rem + 2.7vw, 3.5rem); }
/* The gold underline sits just under the letters, clear of the line below, on every line it spans */
.emphasis {
  --draw: 1;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 86% / calc(var(--draw) * 100%) 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.chapter-text { max-width: 58ch; }
.chapter-text .lead { color: var(--heading); }
.chapter-text p:not(.lead):not(.chapter-ambition) { color: var(--fg-muted); }
.chapter-ambition {
  margin-top: 24px;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
  font-weight: 600;
}
.welcome {
  margin-top: clamp(48px, 5.5vw, 80px);
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.welcome-line {
  max-width: 24ch;
  font: 650 clamp(1.75rem, 1rem + 2.4vw, 3rem)/1.08 var(--sans);
  letter-spacing: -.035em;
  color: var(--heading);
}
.welcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 36px;
}
.welcome-grid article {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.welcome-grid h3 { margin-bottom: 10px; font-size: 1.15rem; }
.welcome-grid p { font-size: 1rem; color: var(--fg-muted); }

/* The evidence, inside the same chapter */
.evidence {
  margin-top: clamp(48px, 5.5vw, 80px);
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.evidence-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 12px clamp(32px, 6vw, 96px);
  margin-bottom: 40px;
}
.evidence-head h3 { max-width: 20ch; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -.03em; }
.evidence-head p { color: var(--fg-muted); }
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 44px);
  row-gap: 44px;
}
/* Four figures sit two by two on tablets and small laptops, where four across would squeeze the source links
   on to two lines (and one under another on phones, further down) */
@media (max-width: 1279px) {
  .evidence-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.stat {
  --draw: 1;
  position: relative;
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
/* The gold line runs the full width of each figure, and draws across them all in turn */
.stat::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--draw));
  transform-origin: left;
}
/* "More than" gets its own row; the empty rows on the other figures keep the numbers level */
.stat-prefix {
  min-height: 1.5em;
  font: 600 .9375rem/1.5 var(--sans);
  color: var(--accent-text);
}
.stat-value {
  margin: 2px 0 16px;
  font: 650 clamp(2.75rem, 1.5rem + 2.3vw, 3.9rem)/1 var(--sans);
  letter-spacing: -.05em;
  font-variant-numeric: lining-nums;
  color: var(--heading);
}
.stat h4 {
  margin-bottom: 10px;
  font: 600 1.0625rem/1.45 var(--sans);
  letter-spacing: -.01em;
  color: var(--fg);
}
.stat-meta { font-size: .875rem; color: var(--fg-muted); }
.stat .source-link { align-self: start; }
@supports not (grid-template-rows: subgrid) {
  .stat { display: block; }
}
.methodology {
  max-width: 820px;
  margin-top: 32px;
  font-size: .875rem;
  border-top: 1px solid var(--line);
}
.methodology summary { font-size: .9375rem; }
.methodology p { color: var(--fg-muted); }

/* ---------- 3 · How it works ---------- */
.model-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px clamp(32px, 6vw, 96px);
}
.model-head h2 { max-width: 12ch; }
.model-intro p:not(.lead) { color: var(--fg-muted); }
.model-intro .lead { color: var(--heading); font-weight: 600; }

/* The four parts: Belong, Build, Contribute, Inspire. Equal weight, one gold line each. */
.engines {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px clamp(20px, 3vw, 40px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.engine {
  --draw: 1;
  position: relative;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.engine::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(var(--draw));
  transform-origin: left;
}
.engine h3 {
  margin-bottom: 8px;
  font: 650 clamp(1.5rem, 1.15rem + 1vw, 2rem)/1.1 var(--serif);
  letter-spacing: -.02em;
  color: var(--heading);
}
.engine p { font-size: .9375rem; color: var(--fg-muted); }
.engines-note {
  max-width: 78ch;
  margin-top: 26px;
  font-size: .9375rem;
  color: var(--fg-muted);
}
.founder-note {
  max-width: 60ch;
  margin-top: 14px;
  font-size: .9375rem;
  color: var(--fg-muted);
}

/* "Where we are now", under the opening */
.status-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px clamp(20px, 3vw, 40px);
  margin-top: clamp(36px, 4vw, 56px);
  padding: 18px 22px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-art);
}
.status-strip p { max-width: none; font-size: .9375rem; color: var(--fg-muted); }
.status-strip strong { color: var(--heading); }
.status-strip-label {
  font: 600 .75rem/1.4 var(--sans) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text) !important;
  white-space: nowrap;
}
.status-strip .text-link { white-space: nowrap; }

/* The journey */
.cycle-wrap {
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
  padding-bottom: 8px;
}
.cycle {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cycle-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  color: var(--forest);
}
.cycle-node {
  display: block;
  width: 15px;
  height: 15px;
  margin-bottom: 22px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: var(--bg);
  transition: background var(--ui), box-shadow var(--ui);
}
.cycle-node.is-lit {
  background: var(--mark-ball);
  box-shadow: 0 0 0 6px rgb(232 166 82 / .18);
}
.cycle-step h3 { margin-bottom: 8px; font-size: 1.2rem; }
.cycle-step p { font-size: .9375rem; color: var(--fg-muted); }
.cycle-line {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--gold);
  pointer-events: none;
}
.cycle-ball {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--mark-ball);
  box-shadow: 0 0 0 5px rgb(232 166 82 / .2), 0 0 18px rgb(232 166 82 / .55);
  opacity: 0;
  pointer-events: none;
}
/* "Permanent belonging. Changing roles." A focus frame travels word to word (motion.js) */
.focus-line {
  position: relative;
  max-width: none;
  margin-top: 56px;
  font: 650 clamp(1.6rem, 1rem + 2vw, 2.6rem)/1.15 var(--serif);
  letter-spacing: -.02em;
  word-spacing: .16em;
  color: var(--heading);
}
.focus-line .focus-word { display: inline-block; }
.focus-frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 22px rgb(232 166 82 / .22);
  pointer-events: none;
}
/* Small L-shaped corner ticks, top left and bottom right, like a camera's focus box */
.focus-frame::before,
.focus-frame::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 0 solid var(--accent);
}
.focus-frame::before { left: -5px; top: -5px; border-width: 2px 0 0 2px; }
.focus-frame::after { right: -5px; bottom: -5px; border-width: 0 2px 2px 0; }
/* Once it has visited each word, the box fades and only the corner brackets stay round the phrase */
.focus-frame { transition: border-color .9s var(--ease-out), box-shadow .9s var(--ease-out); }
.focus-frame.is-locked { border-color: transparent; box-shadow: none; }
.cycle-loop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: none;
  margin-top: 12px;
  font-weight: 600;
  color: var(--heading);
}
.cycle-loop span { color: var(--gold); font-size: 1.2em; }

/* The founder's own line, given room to breathe */
.founder-quote {
  margin: clamp(48px, 5.5vw, 80px) 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.founder-quote p {
  max-width: 24ch;
  font: 600 clamp(1.75rem, 1.1rem + 2.4vw, 3.1rem)/1.1 var(--serif);
  letter-spacing: -.025em;
  color: var(--heading);
}
.founder-quote footer {
  margin-top: 16px;
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* The six characters as "character files" (homepage, Meet the characters).
   Back to front, each file is: an iridescent sheen, the character's picture
   tucked down out of sight, the coloured front with its folder tab (an SVG
   mask), then a small label. Point at a file (or focus or tap it) and it lifts,
   the front drops away, the character rises into the opening and the other
   files step back. Pictures are never cropped: the whole portrait is there,
   the front simply covers its lower half. */
.cast-intro p { color: var(--fg-muted); }
.cast-intro p + p { margin-top: 14px; }
.cast-intro strong { color: var(--heading); }
.cast-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(24px, 3vw, 36px);
  font: 500 .75rem/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.cast-hint-line { width: 36px; height: 1px; background: currentColor; }
.cast {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(44px, 5vw, 72px) clamp(24px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cast-item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 26px;
}
/* Each character's colours, taken from their clothes */
.cast-item[data-character="harbour"]    { --face-top: #2E4A39; --face-bottom: #1D3125; }
.cast-item[data-character="pathfinder"] { --face-top: #84631F; --face-bottom: #5E4512; }
.cast-item[data-character="forge"]      { --face-top: #93432A; --face-bottom: #6A2C18; }
.cast-item[data-character="ascent"]     { --face-top: #7A5C3F; --face-bottom: #56402B; }
.cast-item[data-character="beacon"]     { --face-top: #62402C; --face-bottom: #43271A; }
.cast-item[data-character="steward"]    { --face-top: #3E5368; --face-bottom: #29394A; }

.folder {
  --lift: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  z-index: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  isolation: isolate;
  box-shadow: 0 1px 0 rgb(21 32 27 / .06), 0 14px 30px -22px rgb(21 32 27 / .5);
  transition: transform .65s var(--lift), opacity .6s var(--lift), filter .6s var(--lift), box-shadow .65s var(--lift);
}
.folder-sheen {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(58% 46% at 50% 30%, rgb(255 210 140 / .9), rgb(255 210 140 / 0) 72%),
    linear-gradient(125deg, #F7E3B8 0%, #F0C2B0 20%, #D8C2E6 40%, #B5DCD4 60%, #E2ECBA 80%, #F7E3B8 100%);
  background-size: 100% 100%, 240% 240%;
  background-position: 0 0, 0% 40%;
  transition: background-position 1.4s var(--lift);
}
.folder-object {
  position: absolute;
  top: 7%;
  left: 50%;
  z-index: 1;
  width: 56%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  border-radius: 12px;
  background: #FBF6EF;
  box-shadow: 0 0 0 1px rgb(21 32 27 / .07), 0 22px 40px -16px rgb(21 32 27 / .5);
  transform: translate(-50%, 40%) rotate(-7deg);
  transition: transform .7s var(--lift);
}
.folder-front {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: var(--cream);
  transition: transform .7s var(--lift);
}
.folder-face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 24px);   /* runs past the bottom edge, so nothing behind can show along it */
  overflow: visible;
  filter: drop-shadow(0 -8px 16px rgb(21 32 27 / .22));
}
.face-top { stop-color: var(--face-top); }
.face-bottom { stop-color: var(--face-bottom); }
.folder-num {
  position: absolute;
  top: 5px;
  left: 18px;
  font: 500 .6875rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .1em;
  color: var(--cream);
}
.folder-strength {
  position: absolute;
  top: calc(22px + clamp(16px, 2vw, 24px));
  left: clamp(18px, 2vw, 24px);
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.folder-strength svg { width: 20px; height: 20px; flex: none; color: #E9C98A; }
.folder-name {
  position: absolute;
  top: calc(22px + clamp(42px, 4.6vw, 58px));
  left: clamp(18px, 2vw, 24px);
  font: 650 clamp(1.9rem, 1.2rem + 1.5vw, 2.7rem)/1 var(--serif);
  letter-spacing: -.025em;
}
.folder-mark {
  position: absolute;
  right: -6%;
  bottom: -8%;
  width: 52%;
  height: 52%;
  color: var(--cream);
  opacity: .1;
}
.folder-label {
  position: absolute;
  right: clamp(18px, 2vw, 24px);
  bottom: 16px;
  left: clamp(18px, 2vw, 24px);
  padding-top: 12px;
  border-top: 1px solid rgb(243 239 230 / .28);
  font: 500 .6875rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: opacity .55s var(--lift);
}
.folder-toggle {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
}
.folder-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

/* The words under each file */
.cast-text { position: relative; display: grid; gap: 12px; padding-top: 18px; }
.cast-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
}
.cast-text::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(.12);
  transform-origin: 0 50%;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.cast-principle {
  font: italic 500 clamp(1.125rem, 1rem + .4vw, 1.3rem)/1.3 var(--serif);
  color: var(--heading);
}
.cast-about { font-size: .9375rem; color: var(--fg-muted); }
.cast-flaw { font-size: .875rem; color: var(--fg-muted); }
.cast-flaw-label {
  display: block;
  margin-bottom: 6px;
  font: 600 .6875rem/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* Open: the chosen file lifts, its front drops away and the character rises. A tap, click, Enter or
   Space opens it (.is-open), and pointing at it does too. The other files step back by shrinking and
   losing a little colour, never by fading, so their words stay easy to read. */
.cast:has(.is-open) .folder { transform: scale(.93); filter: saturate(.6); }
.cast .cast-item.is-open .folder { z-index: 2; transform: translateY(-7%) scale(1.07); filter: none; box-shadow: 0 34px 60px -28px rgb(21 32 27 / .55); }
.cast-item.is-open .folder-front { transform: translateY(52%); }
.cast-item.is-open .folder-object { transform: translate(-50%, -4%) rotate(3deg); }
.cast-item.is-open .folder-label { opacity: 0; }
.cast-item.is-open .folder-sheen { background-position: 0 0, 100% 60%; }
.cast-item.is-open .cast-text::after { transform: scaleX(1); }

@media (hover: hover) {
  .cast:has(.cast-item:hover) .folder { transform: scale(.93); filter: saturate(.6); }
  .cast .cast-item:hover .folder { z-index: 2; transform: translateY(-7%) scale(1.07); filter: none; box-shadow: 0 34px 60px -28px rgb(21 32 27 / .55); }
  .cast-item:hover .folder-front { transform: translateY(52%); }
  .cast-item:hover .folder-object { transform: translate(-50%, -4%) rotate(3deg); }
  .cast-item:hover .folder-label { opacity: 0; }
  .cast-item:hover .folder-sheen { background-position: 0 0, 100% 60%; }
  .cast-item:hover .cast-text::after { transform: scaleX(1); }
}

/* Inspire: a dark plate with the words in gold. Behind them, motion.js draws a faint
   grid of dots that bends towards the pointer like a rubber sheet under a weight. */
.inspire { margin-top: clamp(64px, 8vw, 112px); }
.inspire-plate {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  min-height: clamp(320px, 34vw, 440px);
  padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px);
  overflow: hidden;
  border-radius: var(--radius-art);
  background: radial-gradient(ellipse 70% 80% at 50% 58%, #1F3628, #111A15 78%);
  text-align: center;
}
.inspire-plate > p { position: relative; z-index: 1; }
.inspire-label {
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
}
.inspire-headline {
  max-width: 17ch;
  font: 650 clamp(2rem, 1.1rem + 3.2vw, 3.7rem)/1.06 var(--serif);
  letter-spacing: -.025em;
  color: #E8A652;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .inspire-headline {
    background: linear-gradient(100deg, #F6DCA6 0%, #E8A652 40%, #C7802D 70%, #F3EFE6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.inspire-caption {
  font: 500 .8125rem/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .03em;
  color: rgb(243 239 230 / .78);
  text-shadow: 0 0 2px #111A15, 0 0 10px #111A15;   /* stays crisp when the grid's lines pass behind it */
}
.inspire-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The story world: what the characters are for, and where they could go */
.story-world {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 32px clamp(32px, 6vw, 96px);
  margin-top: clamp(40px, 5vw, 64px);
}
.story-world-title {
  max-width: 14ch;
  margin-bottom: 18px;
  font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.3rem);
  letter-spacing: -.03em;
}
.story-world-intro p { color: var(--fg-muted); }
.story-world-intro p + p { margin-top: 14px; }
.story-routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.story-route { display: grid; align-content: start; gap: 8px; padding-block: 20px; border-top: 1px solid var(--line); }
.story-route-num {
  font: 500 .75rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .08em;
  color: var(--accent-text);
}
.story-route h3 { font-size: 1.0625rem; letter-spacing: -.015em; }
.story-route p { font-size: .9375rem; color: var(--fg-muted); }
.story-status {
  grid-column: 2;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
  color: var(--fg-muted);
}

@media (max-width: 899px) {
  .cast { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-world { grid-template-columns: 1fr; }
  .story-status { grid-column: auto; }
}
/* The hint matches the device: pointing on a laptop, tapping on a phone or tablet, swiping on a phone */
.cast-hint-tap,
.cast-hint-swipe { display: none; }
@media (hover: none) {
  .cast-hint-point { display: none; }
  .cast-hint-tap { display: inline; }
}
/* Phones: the six files sit in a rail you swipe through, with the next one peeking in */
@media (max-width: 599px) {
  .cast-hint-point,
  .cast-hint-tap { display: none; }
  .cast-hint-swipe { display: inline; }
  .cast {
    display: flex;
    gap: 16px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 26px var(--gutter) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;   /* a slim scrollbar shows there's more, and works with a mouse */
    scrollbar-color: var(--line-strong) transparent;
  }
  .cast::-webkit-scrollbar { height: 6px; }
  .cast::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--line-strong); }
  .cast-item { flex: 0 0 84%; scroll-snap-align: start; }
  .folder { aspect-ratio: 4 / 3; }
  .folder-object { width: 46%; }
  .cast-hint { margin-bottom: 0; }
  .story-routes { grid-template-columns: 1fr; }
}

/* ---------- 4 · The programme ---------- */
.word-band {
  margin-top: calc(var(--section-space) * -.35);
  margin-bottom: clamp(40px, 5vw, 72px);
  padding-block: 18px;
  overflow: hidden;
  border-block: 1px solid var(--line);
}
.word-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font: 650 clamp(1.5rem, .9rem + 2.4vw, 3rem)/1.3 var(--sans);
  letter-spacing: -.04em;
  color: var(--heading);
}
.word-row span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.word-row span::after {
  content: "";
  flex: none;
  width: .2em;
  height: .2em;
  margin-inline: .45em;
  border-radius: 50%;
  background: var(--gold);
}
/* The progression promise beside the heading */
.promise { margin: 0; padding: 0; list-style: none; }
.promise li {
  position: relative;
  padding: 9px 0 9px 24px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  line-height: 1.4;
  color: var(--heading);
}
.promise li:first-child { border-top: 1px solid var(--line); }
.promise li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--mark-ball);
}

/* The seven themes. Without JavaScript they're a simple list... */
.theme {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: 24px clamp(28px, 5vw, 64px);
  padding-block: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
.theme-number {
  display: block;
  margin-bottom: 10px;
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--fg-muted);
}
.theme h3 {
  margin-bottom: 16px;
  font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.25rem);
  letter-spacing: -.035em;
}
.theme-lead { font-weight: 500; }
.theme-body > p:not(.theme-lead):not(.values-tag) { color: var(--fg-muted); }

/* ...and with it, a row of tabs showing one theme at a time */
.theme-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.theme-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--heading);
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.theme-tab:hover { border-color: var(--forest); }
.theme-tab[aria-selected="true"] {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--cream);
}
.is-tabbed .theme { padding-block: 0; border-top: 0; }

/* ---------- 5 · Swansea + the residential programme ---------- */
.swansea { padding-top: 0; }
.coast-band {
  position: relative;
  margin-bottom: clamp(72px, 8vw, 112px);
}
/* width: 100% keeps the banner full width; a height limit then crops it rather than shrinking it */
.coast-media { width: 100%; min-height: 240px; max-height: min(56vh, 540px); }
.coast-media .media-caption { left: 12px; top: 12px; bottom: auto; }
/* The aerial view: keep the curve of the bay and the marina in view */
.coast-media img { object-position: 50% 42%; }
.coast-wordmark {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: 0;
  padding: 14px 22px 16px;
  background: var(--bg);
  box-shadow: 0 18px 40px rgb(21 32 27 / .12);
  transform: translateY(46%);
}
.coast-coords {
  display: block;
  margin-bottom: 8px;
  font: 600 .7rem/1 var(--sans);
  letter-spacing: .16em;
  color: var(--accent-text);
}
.coast-name {
  display: block;
  font: 650 clamp(2.5rem, 6vw, 5.5rem)/1 var(--sans);
  letter-spacing: -.045em;
  color: var(--heading);
}
.coast-cy {
  display: block;
  margin-top: 6px;
  font-size: .9375rem;
  color: var(--fg-muted);
}
.swansea-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 7%;
}
.swansea-copy h2 { margin-bottom: 28px; }
.swansea-copy .lead { color: var(--heading); }
.swansea-copy > p:not(.lead):not(.place-stat) { color: var(--fg-muted); }
.place-stat {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--fg-muted);
}
.facilities h3 { font-size: 1.2rem; }
.facility-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: facility;
}
.facility-list li {
  display: flex;
  gap: 22px;
  padding-block: 13px;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  padding-right: 10px;   /* room for the slide below */
  counter-increment: facility;
}
/* Pointing at an item slides its number and words along. A slide (translate) never changes the layout,
   so the words can't re-wrap and nothing underneath moves */
.facility-list li::before,
.facility-list li > span { transition: translate var(--ui) var(--ease-out); }
.facility-list li:hover::before,
.facility-list li:hover > span { translate: 10px 0; }
.facilities-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
  color: var(--fg-muted);
}
.facility-list li::before {
  content: counter(facility, decimal-leading-zero);
  flex: none;
  padding-top: 4px;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}

.residential {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 24px clamp(32px, 6vw, 96px);
  margin-top: clamp(56px, 7vw, 88px);
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius-art);
}
.residential-title {
  max-width: 14ch;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
  letter-spacing: -.035em;
}
.pathway-copy > p:first-child { font-weight: 500; margin-bottom: 24px; }
.pathway-steps {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}
.pathway-steps li {
  --draw: 1;
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--heading);
}
.pathway-steps li { padding: 11px 0; }
/* The line from one step down to the next */
.pathway-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: calc(50% + 11px);
  width: 1px;
  height: calc(100% - 22px);
  background: var(--accent);
  transform: scaleY(var(--draw));
  transform-origin: top;
}
.step-ball {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--core-light);
  box-shadow: 0 0 0 4px rgb(232 166 82 / .18);
}
.residential .notice { margin-bottom: 12px; }

/* ---------- 6 · Our next steps ---------- */
.phase-map {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr 1fr;
  gap: 30px;
  margin-block: 24px 16px;
}
.phase-map > div { position: relative; z-index: 1; }
.phase-map h3 { margin: 12px 0; font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); letter-spacing: -.035em; }
.phase-map p { font-size: 1rem; color: var(--fg-muted); }
.phase-node {
  display: block;
  width: 13px;
  height: 13px;
  margin-bottom: 20px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  transition: background var(--ui), transform var(--ui) var(--ease-out), box-shadow var(--ui);
}
.phase-node.is-reached { background: var(--mark-ball); transform: scale(1.15); }
/* The current stage glows with the characters' warm inner light */
.phase-node.is-current {
  border-color: var(--core-light);
  background: var(--core-light);
  box-shadow: 0 0 0 5px rgb(232 166 82 / .2), 0 0 22px rgb(232 166 82 / .65);
}
.phase-pair {
  display: flex;
  flex-direction: column;
  gap: 70px;
}
.phase-map > .phase { padding-top: 70px; }
.pair-label { display: none; }
.now-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 4px 11px;
  border: 1px solid rgb(232 166 82 / .55);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
}
.phase-lines {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--accent);
  pointer-events: none;
}
.phase-lines path { stroke-width: 1.5; }
.phase-lines-mobile { display: none; }
.phase-traveller {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 0 4px rgb(232 166 82 / .2), 0 0 16px rgb(232 166 82 / .6);
  opacity: 0;
  pointer-events: none;
}

/* ---------- 7 · Founding support ---------- */
.support-banner { margin-bottom: clamp(20px, 2.4vw, 32px); }
/* Keep the top of the footbridge's mast in the picture */
.support-banner img { object-position: 50% 12%; }
/* The marina on the programme page's closing section: keep the boats and their reflections */
.help-art img { object-position: 50% 72%; }
.support-lead { color: var(--heading); font-weight: 600; }
.support-lead + p { color: var(--fg-muted); }
.partner-principle {
  max-width: 78ch;
  margin-top: clamp(30px, 4vw, 52px);
  padding-left: 18px;
  border-left: 2px solid var(--gold);
  color: var(--fg-muted);
}
.partner-principle strong { color: var(--heading); }
.partner-principle p + p { margin-top: 10px; }
.support-routes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.support-route {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 3vw, 36px);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-art);
  background: var(--paper);
}
.route-number {
  margin-bottom: 18px;
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}
.support-route h3 { margin-bottom: 10px; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); letter-spacing: -.03em; }
.support-route p { margin-bottom: 26px; font-size: 1rem; color: var(--fg-muted); }
.support-route .button { margin-top: auto; }
/* Hover: the card lifts a little and its number opens out */
.support-route { transition: transform var(--ui) var(--ease-out), box-shadow var(--ui) var(--ease-out); }
.support-route:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgb(21 32 27 / .1); }
.route-number { transition: letter-spacing var(--ui) var(--ease-out); }
.support-route:hover .route-number { letter-spacing: .32em; }

/* Examples that make the ask tangible */
.tangible { margin-top: clamp(44px, 5.5vw, 72px); }
.partner-principle + .tangible { margin-top: clamp(30px, 4vw, 52px); }
.tangible .small-heading { margin: 0 0 18px; }
.tangible-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tangible-grid li { display: flex; flex-direction: column; }
/* Pointing anywhere on an example gently zooms its picture */
.tangible-grid li:hover .media img { scale: 1.04; }
.tangible-grid .media { margin-bottom: 16px; }
.tangible-grid h4 { margin-bottom: 6px; font-size: 1.125rem; }
.tangible-grid p { font-size: .9375rem; color: var(--fg-muted); }
.tangible-grid .theme-more { margin-top: auto; padding-top: 4px; }

/* ---------- 8 · Get involved ---------- */
.involve-lead { color: var(--fg-muted); }
.involve-actions { margin-top: 22px; }
.contact-strip {
  margin-top: 24px;
  font-size: 1rem;
}
.contact-strip a { display: block; font-weight: 600; overflow-wrap: anywhere; }

/* Enquiry form */
.enquiry-form {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 28px clamp(32px, 5vw, 72px);
  margin-top: clamp(56px, 7vw, 88px);
  padding: clamp(24px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--radius-art);
  background: var(--cream);
}
.form-head {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
.form-head h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); letter-spacing: -.03em; }
.form-lead { margin-top: 14px; font-size: 1rem; color: var(--fg-muted); }
.form-body { min-width: 0; }
.form-banner {
  margin-top: 20px;
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: var(--paper);
  font-size: .9375rem;
  font-weight: 500;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 0 24px;
}
.field,
.choice-field { margin-bottom: 26px; }
.field label,
.choice-field legend {
  display: block;
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: 600;
}
.optional { font-size: .875rem; font-weight: 400; color: var(--fg-muted); }
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--control-fg);
  transition: border-color var(--fast), box-shadow var(--fast);
}
input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover { border-color: var(--ink); }
textarea { min-height: 130px; resize: vertical; }
input[type="checkbox"],
input[type="radio"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0;
  accent-color: var(--btn-bg);
}
.field-hint { margin-bottom: 10px; font-size: .875rem; color: var(--fg-muted); }

/* Involvement choices — tick as many as you like, in three small groups */
.choice-set-title {
  margin: 18px 0 8px;
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.field-hint + .choice-set-title { margin-top: 6px; }
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 52px;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--control-bg);
  font-size: .9375rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color var(--fast), box-shadow var(--fast), background var(--fast);
}
.choice:hover { border-color: var(--ink); }
.choice.is-checked {
  border-color: var(--oxblood);
  box-shadow: inset 0 0 0 1px var(--oxblood);
}
.choice:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice-status { min-height: 1.5em; margin-top: 10px; font-size: .875rem; color: var(--fg-muted); }

/* "What interests you?" — folded away to keep the form short */
.interests-panel {
  margin-bottom: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--control-bg);
}
.interests-panel > summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 15px 52px 15px 18px;
}
.interests-panel > summary::after { right: 20px; }
.interest-summary { font-size: .875rem; font-weight: 400; color: var(--fg-muted); }
.interests { padding: 0 18px 18px; }
.interest-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 28px;
}
.interest-group-title {
  margin: 12px 0 2px;
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.check-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding-block: 8px;
  font-size: .9375rem;
  line-height: 1.4;
  cursor: pointer;
}
.other-field { margin: 4px 0 0 32px; }

.message-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 7px;
  font-size: .875rem;
  color: var(--fg-muted);
}
/* The optional "also email me news" box, above the send button. It is never ticked for anyone. */
.optin {
  margin-top: 4px;
  padding: 12px 16px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-art);
  background: var(--paper);
}
.optin .check-label { min-height: 0; padding-block: 4px; font-weight: 600; }
.optin .field-hint,
.optin .signup-note { margin: 2px 0 8px 32px; }
.form-privacy { margin-block: 18px 24px; font-size: .875rem; color: var(--fg-muted); }
.error-summary {
  margin-bottom: 28px;
  padding: 20px;
  border: 3px solid var(--btn-bg);
  background: var(--paper);
}
.error-summary h4 { font-size: 1.2rem; }
.error-summary ul { margin-bottom: 0; }
.error-summary a { font-weight: 600; }
.field-error {
  margin: 8px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--btn-bg);
}
[aria-invalid="true"] { border: 2px solid var(--btn-bg) !important; }
.choice-field[aria-invalid="true"] { border: 0 !important; }
.choice-field[aria-invalid="true"] .choice { border-color: var(--btn-bg); }
.form-result {
  margin-top: 28px;
  padding: 22px;
  border: 2px solid var(--accent);
  background: var(--paper);
}
.form-result.is-error { border-color: var(--btn-bg); }
/* An enquiry that has been sent: the tick sits to the left of the words */
.form-result.is-done {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}
.form-result.is-done > .done-tick { grid-row: 1 / span 3; width: 40px; height: 40px; }
.form-result.is-done > :not(.done-tick) { grid-column: 2; min-width: 0; }
.form-result.is-done > .reset-button { justify-self: start; }
/* A long email address in the thank you wraps instead of running out of the box on a narrow phone */
.form-result p { overflow-wrap: anywhere; }
/* The line about news sits under the thank you. main.js changes its words smoothly once the mailing list answers. */
.form-result-news { margin-top: 10px; }
/* On a phone the tick sits at the start of the words instead of in its own column, so the words get the
   full width and the box stays short enough to see whole */
@media (max-width: 480px) {
  .form-result.is-done { display: flow-root; padding: 18px; }
  .form-result.is-done > .done-tick { float: left; width: 30px; height: 30px; margin: 1px 12px 2px 0; }
}
/* The tick itself: a gold ring with the tick in the heading colour (main.js adds it) */
.done-tick { flex: none; width: 30px; height: 30px; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.done-tick circle { stroke: var(--accent); }
.done-tick path { stroke: var(--heading); }
.reset-button { margin-top: 10px; padding: 0; border: 0; background: none; }
.honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Things that depend on whether the form is live (see site-settings.js) */
[data-show-when="live"] { display: none; }
html[data-form="live"] [data-show-when="live"] { display: revert; }
html[data-form="live"] [data-show-when="demo"] { display: none; }

/* ---------- 9 · Questions ---------- */
.faq { padding-top: 0; }
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 40px 8%;
  padding-top: var(--section-space);
  border-top: 1px solid var(--line);
}
.faq-layout h2 { max-width: 12ch; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list summary {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  letter-spacing: -.01em;
  color: var(--heading);
}
.faq-list summary > span { display: block; transition: translate var(--ui) var(--ease-out); }
.faq-list summary:hover > span { translate: 8px 0; }
.faq-list p { font-size: 1rem; color: var(--fg-muted); }

/* ---------- 10 · Coming soon: merchandise + the app ---------- */
.coming-grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
/* Each teaser: words on the left, pictures on the right */
.coming-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 28px clamp(32px, 5vw, 72px);
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--radius-art);
  background: var(--paper);
}
.coming-panel h2 {
  max-width: 16ch;
  margin-bottom: 16px;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
}
.coming-copy > p:not(.eyebrow):not(.lead) { color: var(--fg-muted); }
.coming-copy .lead { margin-bottom: 12px; }
.coming-actions { margin-top: 24px; }
.coming-actions .status-chip { margin: 0; }
/* The collection preview: a small collage of pieces, not a shop window */
/* The jacket on the left; the rugby shirt above the cap and the mug on the right. Every piece has its own tile. */
.merch-collage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, .5fr));
  grid-template-areas:
    "main a a"
    "main b c";
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.merch-collage img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--radius-art);
  background: #FDFAF2;
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.collage-main { grid-area: main; height: 100% !important; aspect-ratio: auto !important; }
.collage-a { grid-area: a; }
.collage-b { grid-area: b; }
.collage-c { grid-area: c; }
.collage-count {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgb(251 249 244 / .92);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--heading);
}
.collage-count strong { font-size: .9rem; }
.merch-collage:hover .collage-main,
.merch-collage:focus-visible .collage-main { transform: scale(1.02); }
.merch-collage:hover .collage-a,
.merch-collage:focus-visible .collage-a { transform: translate(3px, -3px); }
.merch-collage:hover .collage-b,
.merch-collage:focus-visible .collage-b { transform: translateY(-4px); }
.merch-collage:hover .collage-c,
.merch-collage:focus-visible .collage-c { transform: translateY(-4px) rotate(-2deg); }
.merch-collage:hover img,
.merch-collage:focus-visible img { box-shadow: 0 12px 26px rgb(21 32 27 / .1); }

/* The app panel's example phone */
.app-visual {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 12px;
}
.app-visual::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(232 166 82 / .28), rgb(232 166 82 / 0));
}
.phone {
  position: relative;
  width: min(310px, 100%);
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  border: 8px solid var(--ink);
  border-radius: 38px;
  background: var(--paper);
  box-shadow: 0 30px 60px rgb(21 32 27 / .22);
  color: var(--ink);
}
/* In the teaser the whole phone is shown a little smaller, keeping its proportions */
.coming .phone { zoom: .86; }
.phone-inner {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 100%;
  padding: 18px 12px 14px;
  font-size: .8125rem;
  line-height: 1.4;
}
.phone-inner p { max-width: none; }
.phone-inner p + p { margin-top: 0; }
.phone-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.phone-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 650 1rem/1 var(--serif);
  color: var(--forest);
}
.phone-brand svg { width: 20px; height: auto; }
.phone-search {
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .75rem;
  color: var(--fg-muted);
}
.profile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--field);
  box-shadow: 0 6px 18px rgb(21 32 27 / .06);
}
.profile-head { display: flex; align-items: center; gap: 10px; }
.profile-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  background: var(--forest);
  color: var(--cream);
  font-size: .75rem;
  font-weight: 700;
}
.profile-avatar-alt { background: var(--oxblood); }
.profile-name { font-weight: 700; line-height: 1.2; }
.profile-type { font-size: .6875rem; color: var(--fg-muted); }
.profile-save {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
}
.profile-label {
  font: 600 .625rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.profile-offers { display: grid; gap: 4px; margin: 0; padding-left: 1.1em; }
.profile-facts { display: grid; gap: 8px; margin: 0; }
.profile-facts dt { font-size: .6875rem; color: var(--fg-muted); }
.profile-facts dd { font-weight: 500; }
.profile-cta {
  display: block;
  padding: 10px;
  border-radius: 8px;
  background: var(--oxblood);
  color: var(--cream);
  font-weight: 600;
  text-align: center;
}
.profile-story {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-weight: 500;
}
.profile-reviewed { font-size: .6875rem; color: var(--fg-muted); }
.phone-tabs {
  display: flex;
  justify-content: space-around;
  flex: none;
  margin: auto -12px -14px;
  padding: 11px 8px 15px;
  border-top: 1px solid var(--line);
  font-size: .6875rem;
  font-weight: 500;
  color: var(--fg-muted);
}
.phone-tabs .is-active { color: var(--forest); font-weight: 700; }
/* The little story the phone tells when it scrolls into view (motion.js): the search types itself,
   the two results rise, the first is saved, and a reminder slides down. Static without animation. */
.phone-inner { position: relative; }
.profile-save { transition: background .3s, border-color .3s, color .3s; }
.profile-save.is-saved { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.phone-tabs .has-count::after {
  content: "1";
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--oxblood);
  color: var(--cream);
  font-size: .5625rem;
  font-weight: 700;
  vertical-align: 1px;
}
.phone-search.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin-left: 1px;
  background: currentColor;
  vertical-align: -2px;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }
.phone-toast {
  position: absolute;
  top: 14px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--forest);
  color: var(--cream);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 12px 26px rgb(21 32 27 / .28);
}
.phone-toast::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--core-light);
  box-shadow: 0 0 8px rgb(232 166 82 / .8);
}
.has-motion .phone-toast { display: flex; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .app-visual::before { animation: app-glow 4.5s ease-in-out infinite alternate; }
}
@keyframes app-glow { to { opacity: .55; transform: scale(1.06); } }


/* ---------- 12 · Final invitation ---------- */
.invitation { overflow: hidden; }
.invitation-art {
  width: 100%;
  max-height: min(50vh, 460px);
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
/* The campfire: always the whole picture. It shrinks with the screen and is never cropped. */
.invitation-art.is-whole { max-height: none; }
.invitation-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  align-items: end;
  gap: 32px 64px;
}
.invitation h2 {
  max-width: 15ch;
  font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.25rem);
}
.invitation h2 + p { margin-top: 20px; }
.invitation-lines { margin: 28px 0 0; padding: 0; list-style: none; }
.invitation-lines li {
  font: 600 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.45 var(--sans);
  letter-spacing: -.015em;
  color: var(--cream);
}
.invitation-lines li:last-child { margin-top: 6px; color: var(--muted-on-oxblood); }
.invitation-groundline { width: 100%; margin-bottom: 24px; }
.invitation-side p { color: var(--fg-muted); }
.invitation-side .actions { margin-top: 26px; }
.invitation-side .text-link { color: var(--cream); }
.invitation-actions { flex-direction: column; align-items: flex-start; gap: 8px; }


/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  padding-block: 72px 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 44px;
}
.footer-brand .logo { margin-bottom: 20px; }
.footer-tagline {
  max-width: 34ch;
  margin-bottom: 12px;
  font-size: 1rem;
  color: var(--fg-muted);
}
.footer-heading {
  margin-bottom: 16px;
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.footer-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
}
/* Footer links: a fine underline slides in from the left on hover */
.footer-list a {
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  transition: background-size var(--ui) var(--ease-out);
}
.footer-list a:hover { background-size: 100% 1px; }
.footer-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  font-size: .875rem;
  border-top: 1px solid var(--line);
}
.footer-details summary { font-size: 1rem; }
.footer-details p { color: var(--fg-muted); }
.site-footer > .container { container-type: inline-size; }
/* The name in capitals, like the logo, filling the width of the page */
.footer-giant {
  margin: 48px 0 0;
  padding-bottom: .06em;
  font: 700 10.1cqi/.85 var(--serif);
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--forest);
  user-select: none;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--fg-muted);
}



/* =====================================================================
   PROGRAMME PAGE (programme.html)
   ===================================================================== */
.page-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.page-title {
  max-width: 14ch;
  margin: 22px 0 26px;
  font: 600 clamp(2.5rem, .8rem + 5vw, 5.5rem)/.98 var(--serif);
  letter-spacing: -.035em;
}
.page-intro { max-width: 760px; }
.page-intro-strong { font-weight: 600; color: var(--heading); }
.page-hero-art { margin-top: clamp(32px, 4vw, 56px); }

/* ---------- How the programme works ---------- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.offer {
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--radius-art);
}
.offer:not([data-theme]) { background: var(--paper); }
.offer-structured { background-image: radial-gradient(60% 120% at 100% 0%, rgb(232 166 82 / .16), transparent 70%); }
.offer-label {
  margin-bottom: 14px;
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.offer h3 { max-width: 22ch; margin-bottom: 12px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -.03em; }
.offer p:not(.offer-label):not(.small) { color: var(--fg-muted); }
.offer .small { margin-top: 16px; font-weight: 600; }

/* The intended route: five steps on one line */
.route-heading { margin: clamp(44px, 5.5vw, 72px) 0 22px; }
.route-steps {
  --draw: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px clamp(16px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.route-steps::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 0;
  top: 6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(var(--draw));
  transform-origin: left;
}
.route-steps li {
  position: relative;
  padding-top: 32px;
  font-size: .9375rem;
  color: var(--fg-muted);
}
.route-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--mark-ball);
  box-shadow: 0 0 0 5px var(--bg);
}
.route-steps li:last-child::before {
  background: var(--core-light);
  box-shadow: 0 0 0 5px var(--bg), 0 0 18px rgb(232 166 82 / .7);
}
.route-steps strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--heading);
}
.route-note { max-width: 72ch; margin-top: 30px; color: var(--fg-muted); }
.values-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin: 36px 0 0;
  padding: 18px 0;
  border-block: 1px solid var(--line);
  list-style: none;
  font-size: .875rem;
  font-weight: 600;
  color: var(--heading);
}
.values-strip li { display: flex; align-items: center; gap: 8px; }
.values-strip svg { width: 22px; height: 22px; color: var(--gold); }
.values-strip-label {
  font: 600 .75rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* ---------- The chapter links, which stick under the header ---------- */
.chapters { position: relative; }
/* ...and on the programme page, below the chapter links too */
.chapters [id] { scroll-margin-top: calc(var(--header-h) + 74px); }
.jump {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgb(251 249 244 / .95);
  backdrop-filter: blur(10px);
}
.jump-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 58px;
}
.jump-label {
  flex: none;
  font: 600 .6875rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.jump-links {
  display: flex;
  gap: 6px;
  min-width: 0;
  padding-block: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.jump-links::-webkit-scrollbar { display: none; }
/* A soft fade at an edge shows there are more links to scroll to */
.jump-links.more-right { mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.jump-links.more-left { mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent); }
.jump-links.more-left.more-right { mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.jump a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.jump a:hover { border-color: var(--forest); }
.jump a[aria-current="true"] { border-color: var(--forest); background: var(--forest); color: var(--cream); }

/* ---------- Each chapter ---------- */
.prog h2 { max-width: 16ch; margin-bottom: 14px; }
.prog .values-tag { margin-bottom: 16px; }
.prog-copy > p:not(.lead):not(.values-tag):not(.small):not(.loop-steps) { color: var(--fg-muted); }
.prog-copy .lead { margin-bottom: 14px; color: var(--heading); font-weight: 600; }
.prog-copy .button,
.prog-copy .theme-more { margin-top: 22px; }
.prog-copy .loop-steps { margin-top: 14px; }
.prog-wide { margin-bottom: clamp(32px, 4vw, 56px); }
.prog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: start;
  gap: 28px clamp(32px, 6vw, 96px);
}
.prog-aside {
  padding: 24px 26px;
  border-radius: var(--radius-art);
  background: var(--cream);
}
[data-theme="cream"] .prog-aside { background: var(--paper); }
.prog-aside .small-heading:first-child { margin-top: 0; }
.prog-aside p { font-size: .9375rem; color: var(--fg-muted); }
.prog-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: 20px clamp(32px, 6vw, 96px);
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.prog-head h2 { max-width: 20ch; margin-bottom: 0; }
.prog-head .lead { color: var(--fg-muted); }
.prog-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 40px clamp(40px, 6vw, 96px);
}
.prog-split-reverse { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.prog-stack { display: grid; gap: 14px; }
.sub-title {
  margin: 34px 0 10px;
  font-size: clamp(1.25rem, 1.05rem + .6vw, 1.55rem);
  letter-spacing: -.025em;
}
.prog-copy > .sub-title:first-child { margin-top: 0; }
.chapter-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px clamp(32px, 6vw, 96px);
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
.chapter-facts p { font-size: .9375rem; color: var(--fg-muted); }

.kitchen-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr);
  gap: 14px;
}
.kitchen-side { height: 100%; aspect-ratio: auto; }
.stage-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px clamp(20px, 3vw, 40px);
  margin: clamp(32px, 4vw, 52px) 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}
.stage-flow li {
  position: relative;
  padding-top: 20px;
  border-top: 2px solid var(--gold);
  color: var(--fg-muted);
  font-size: .9375rem;
  counter-increment: stage;
}
.stage-flow li::before {
  content: counter(stage, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent-text);
}
.stage-flow strong { display: block; margin-bottom: 4px; font-size: 1.125rem; color: var(--heading); }

.quiet-lines { margin: 0 0 24px; padding: 0; list-style: none; }
.quiet-lines li {
  padding: 8px 0 8px 22px;
  border-left: 2px solid var(--gold);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--heading);
}
.quiet-lines li + li { margin-top: 6px; }
.principles { display: grid; gap: 16px; }
.principle {
  padding: 22px 24px;
  border-left: 3px solid var(--gold-light);
  background: var(--panel);
}
.principle h3 { margin-bottom: 8px; font-size: 1.3rem; }
.principle p { font-size: .9375rem; color: var(--fg-muted); }
.inline-link { font-weight: 600; }

/* Community benefit (Gathering chapter): eight cards, each with a number and a gold line that draws in */
.benefits {
  margin-top: clamp(44px, 5.5vw, 80px);
  padding-top: clamp(32px, 3.6vw, 48px);
  border-top: 1px solid var(--line);
}
.benefits-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: 14px clamp(32px, 6vw, 96px);
  margin-bottom: clamp(26px, 3vw, 40px);
}
.benefits-title {
  max-width: 16ch;
  font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.4rem);
  letter-spacing: -.035em;
}
.benefits-head > p { color: var(--fg-muted); }
.benefits-art { margin-bottom: clamp(16px, 2vw, 24px); }
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: benefit;
}
.benefit {
  --draw: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 22px 26px;
  border-radius: var(--radius-art);
  background: var(--cream);
  counter-increment: benefit;
  transition: transform var(--ui) var(--ease-out), box-shadow var(--ui) var(--ease-out);
}
.benefit::before {
  content: counter(benefit, decimal-leading-zero);
  margin-bottom: 20px;
  font: 600 .75rem/1 var(--sans);
  letter-spacing: .14em;
  color: var(--accent-text);
}
.benefit::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 46px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(var(--draw));
  transform-origin: left;
}
.benefit strong { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.01em; color: var(--heading); }
.benefit span { font-size: .9375rem; line-height: 1.5; color: var(--fg-muted); }
.benefit:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(21 32 27 / .08); }

/* Contribution and progression */
.responsibility-list { margin: 0 0 22px; padding: 0; list-style: none; }
.responsibility-list li {
  position: relative;
  padding: 13px 0 13px 30px;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}
.responsibility-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: var(--core-light);
  box-shadow: 0 0 0 4px rgb(232 166 82 / .18);
}
.loops-block {
  margin-top: clamp(48px, 6vw, 80px);
  border-top: 1px solid var(--line);
}
.loops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(24px, 3vw, 48px);
}
.loop { padding-top: 18px; border-top: 1px solid var(--line-strong); }
.loop > p:not(.loop-steps) { font-size: .9375rem; color: var(--fg-muted); }
.progression {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 36px clamp(32px, 6vw, 96px);
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.progression-title {
  max-width: 14ch;
  margin-bottom: 16px;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
  letter-spacing: -.035em;
}
.progression-copy .lead { margin-bottom: 12px; color: var(--heading); font-weight: 600; }
.progression-copy > p:not(.lead) { color: var(--fg-muted); }
.progression-copy .button { margin-top: 18px; }
.progression-copy > p.progression-ask { margin-top: 26px; font-weight: 600; color: var(--heading); }
.progression-art { margin-top: 28px; }
.possible-list { margin: 0; padding: 0; list-style: none; }
.possible-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.4;
}
.possible-list li:first-child { border-top: 1px solid var(--line); }
.possible-list li > span:first-child { color: var(--fg-muted); }
.possible-list li > span:last-child { font-weight: 600; color: var(--fg); }
.possible-arrow {
  --draw: 1;
  position: relative;
  height: 1px;
  background: linear-gradient(var(--accent), var(--accent)) left / calc(var(--draw) * 100%) 100% no-repeat;
}
.possible-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mark-ball);
  transform: scale(var(--draw));
}

/* =====================================================================
   CONCEPT CATALOGUE (catalogue.html)
   ===================================================================== */
.cat-hero { padding-bottom: clamp(32px, 4vw, 56px); }
.cat-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: 32px clamp(40px, 6vw, 96px);
}
.cat-hero .page-title { max-width: 13ch; }
.cat-hero-actions { margin-top: 28px; }
.cat-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.cat-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.cat-jump a:hover { border-color: var(--forest); background: var(--forest); color: var(--cream); }
.cat-hero-mark {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
}
/* The warm light behind the emblem */
.cat-hero-mark::before {
  content: "";
  position: absolute;
  inset: 4% 0 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(232 166 82 / .3), rgb(232 166 82 / 0));
}
.cat-emblem {
  position: relative;
  width: min(100%, 400px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 24px 40px rgb(21 32 27 / .14));
}

/* ---------- Field goods: the 44-piece collection ---------- */
/* Smooth scrolling (Lenis, every page on laptops and desktops): let it own the scroll while it runs */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* The opening: words on the left, SG-01 on the right */
.goods-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  gap: 36px clamp(40px, 6vw, 96px);
}
.goods-hero .page-title { max-width: 11ch; }
.goods-hero .eyebrow { margin-top: 18px; }
.goods-hero-piece { max-width: 560px; justify-self: end; width: 100%; }

/* The opening, now words across the top with the wheel underneath */
.goods-hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px clamp(40px, 6vw, 96px);
}
.goods-hero .cat-jump { justify-content: center; }
.goods-hero .cat-hero-actions { margin-top: 22px; }

/* The wheel of every piece (built by main.js): cards seated round a tipped wheel, like a rolodex.
   main.js sets each card's position, size, fade and stacking; this only styles the cards. */
.wheel { margin-top: clamp(16px, 2vw, 28px); }
.wheel-stage {
  --card: 110px;
  position: relative;
  height: clamp(400px, 40vw, 540px);
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.wheel-stage.is-dragging { cursor: grabbing; }
.wheel-card {
  position: absolute;
  top: 47%;
  left: 50%;
  width: var(--card);
  height: var(--card);
  overflow: hidden;
  border-radius: 8px;
  background: #FBF7EE;
  box-shadow: 0 10px 24px rgb(21 32 27 / .16);
  will-change: transform, opacity;
}
.wheel-card img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.wheel-shade { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }
.wheel-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 18px;
  margin-top: 6px;
}
.wheel-caption {
  min-height: 1.4em;
  font: 600 .6875rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--fg-muted);
}
.wheel-pause {
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font: 600 .75rem/1 var(--sans);
  color: var(--heading);
  cursor: pointer;
}
.wheel-pause:hover { border-color: var(--heading); }
.wheel-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: max-content;
  margin: 18px auto 0;
  font: 600 .8125rem/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--heading);
}
.wheel-more .arrow { font-size: 1.1rem; transition: transform .4s var(--ease-out); }
.wheel-more:hover .arrow,
.wheel-more:focus-visible .arrow { transform: translateY(4px); }
/* A piece reached from the wheel glows gold for a moment */
.good .piece-zoom { transition: box-shadow .6s var(--ease-out); }
.good.is-arriving .piece-zoom { box-shadow: 0 0 0 3px var(--gold); }

/* "Field goods" introduction */
.goods-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px clamp(32px, 6vw, 96px);
}
.goods-intro-grid h2 { max-width: 14ch; }
.goods-intro .lead { color: var(--heading); }
.goods-patina {
  margin-top: 16px;
  font: 600 clamp(1.15rem, 1rem + .6vw, 1.45rem)/1.4 var(--serif);
  letter-spacing: -.01em;
  color: var(--heading);
}

/* The grid of pieces: four across on a laptop, featured pieces twice the size */
.goods-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  align-items: start;
  gap: clamp(28px, 3vw, 44px) clamp(14px, 1.6vw, 22px);
}
.good { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.good .piece-zoom { flex: none; aspect-ratio: 1; min-height: 0; background: #FBF7EE; }
.good.is-featured { grid-column: span 2; grid-row: span 2; }
.good figcaption { display: grid; gap: 3px; padding-top: 14px; }
.good .piece-colour { font-size: .6875rem; letter-spacing: .16em; }
.good .piece-name { font-size: 1.0625rem; line-height: 1.3; }
.good .piece-detail { font-size: .875rem; }
.good.is-featured .piece-name,
.goods-hero-piece .piece-name { font-size: 1.3rem; }
.good.is-featured .piece-detail,
.goods-hero-piece .piece-detail { font-size: .9375rem; }

/* "Not merchandise. Equipment with a purpose." */
.goods-statement-title {
  max-width: 17ch;
  margin-top: 4px;
  font: 600 clamp(2.2rem, 1.2rem + 3.4vw, 4.2rem)/1.04 var(--serif);
  letter-spacing: -.03em;
}
.goods-statement-copy { max-width: 56ch; margin-top: 22px; font-size: 1.125rem; color: var(--fg-muted); }
.goods-close-line {
  margin-top: 18px;
  font: 600 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.4 var(--serif);
  color: var(--cream);
}

/* Each chapter's heading: a big number, the title and a short introduction */
.cat-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: 16px clamp(24px, 4vw, 64px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.cat-head h2 { max-width: 16ch; }
.cat-number {
  align-self: start;
  font: 600 clamp(3rem, 2rem + 3vw, 5.5rem)/.9 var(--serif);
  letter-spacing: -.04em;
  color: var(--gold);
}
.cat-intro { color: var(--fg-muted); }

/* The grids: twelve columns on a laptop, so pieces can be different sizes and sit in different places */
.cat-grid,
.place-grid,
.materials {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px) clamp(12px, 1.6vw, 24px);
}
.piece,
.visual,
.cat-note {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  grid-column: var(--col, auto / span 4);
  grid-row: var(--row, auto);
}
.piece-zoom {
  position: relative;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 220px;
  aspect-ratio: var(--shape, 1);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-art);
  background: #FDFAF2;
  cursor: zoom-in;
}
.piece-zoom img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: scale 1s var(--ease-out);
}
.visual .piece-zoom { background: var(--cream-deep); }
.visual .piece-zoom img { object-fit: cover; }
.piece-zoom:hover img,
.piece-zoom:focus-visible img { scale: 1.045; }
/* A small "enlarge" circle appears on hover */
.zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background:
    linear-gradient(var(--forest), var(--forest)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--forest), var(--forest)) center / 1.5px 12px no-repeat,
    rgb(251 249 244 / .92);
  box-shadow: 0 4px 14px rgb(21 32 27 / .14);
  opacity: 0;
  transform: scale(.7);
  transition: opacity var(--ui), transform var(--ui) var(--ease-out);
}
.piece-zoom:hover .zoom-hint,
.piece-zoom:focus-visible .zoom-hint { opacity: 1; transform: none; }
.piece figcaption,
.visual figcaption {
  display: grid;
  gap: 2px;
  padding-top: 14px;
}
.piece-name { font-weight: 650; letter-spacing: -.01em; color: var(--heading); }
.piece-colour {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.piece-detail { max-width: 52ch; font-size: .9375rem; line-height: 1.5; color: var(--fg-muted); }
.visual .piece-detail { font-size: .875rem; }
/* A text tile among the pictures */
.cat-note {
  justify-content: center;
  padding: clamp(22px, 3vw, 40px);
  border-left: 3px solid var(--gold);
  background: var(--panel);
}
.cat-note p {
  font: 600 clamp(1.25rem, 1rem + .9vw, 1.75rem)/1.3 var(--serif);
  letter-spacing: -.01em;
  color: var(--heading);
}

/* The identity */
.identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px clamp(40px, 6vw, 96px);
}
.identity-grid h2 { margin-bottom: 22px; }
.identity-grid p:not(.eyebrow):not(.lead) { color: var(--fg-muted); }
.identity-grid .lead { margin-bottom: 14px; }
.lockup-card {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 56px);
  border-radius: var(--radius-art);
  box-shadow: 0 30px 60px rgb(0 0 0 / .22);
}
.lockup-emblem { width: min(46%, 190px); height: auto; }
.lockup-words {
  display: grid;
  justify-items: center;
  max-width: none;
  font-family: var(--serif);
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
}
.lockup-words span:first-child {
  margin-right: -.16em;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem);
  letter-spacing: .16em;
  color: var(--logo-green);
}
.lockup-words span:last-child {
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.8rem);
  letter-spacing: .01em;
  color: var(--logo-red);
}
.lockup-words::after {
  content: "";
  width: 34%;
  height: 4px;
  margin-top: 14px;
  background: var(--logo-gold);
}
.swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 clamp(28px, 3vw, 40px);
  padding: 0;
  list-style: none;
}
.swatches-heading { margin-top: clamp(48px, 6vw, 80px); }
.swatches li {
  display: grid;
  align-content: start;
  gap: 2px;
  font-size: .875rem;
  color: var(--fg-muted);
}
.swatches strong { font-size: 1rem; color: var(--heading); }
.swatch-chip {
  height: 72px;
  margin-bottom: 12px;
  border-radius: var(--radius-art);
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgb(243 239 230 / .25);
}

/* On the flagship */
.place-banner { width: 100%; margin-block: 0 clamp(14px, 1.8vw, 28px); }
.place-banner:last-child { margin: clamp(14px, 1.8vw, 28px) 0 0; }
.triptych {
  display: grid;
  grid-template-columns: 579fr 614fr 488fr;
  gap: clamp(12px, 1.6vw, 24px);
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.triptych .visual { grid-column: auto; }
.cat-in-place .visual .piece-zoom { background: rgb(243 239 230 / .06); }

/* The enlarged view */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
}
/* The page behind stays still while a picture is open */
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox::backdrop { background: rgb(21 32 27 / .92); backdrop-filter: blur(6px); }
.lightbox-inner {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
  height: 100%;
  padding: 64px var(--gutter) 24px;
}
.lightbox-figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  align-items: center;
  gap: 24px 48px;
  min-height: 0;
  margin: 0 auto;
  width: min(100%, 1200px);
}
.lightbox-image {
  width: 100%;
  height: 100%;
  max-height: calc(100dvh - 180px);
  object-fit: contain;
  border-radius: var(--radius-art);
}
.lightbox-caption { display: grid; gap: 6px; }
.lightbox-caption .piece-name { font-size: 1.5rem; color: var(--cream); }
.lightbox-caption .piece-colour { color: var(--gold-light); }
.lightbox-caption .piece-detail { font-size: 1rem; color: var(--muted-on-ink); }
.lightbox-concept { margin-top: 10px; font-size: .8125rem; color: var(--muted-on-ink); }
.lightbox-controls { display: flex; justify-content: center; align-items: center; gap: 18px; }
.lightbox-count { min-width: 5ch; text-align: center; font-size: .875rem; font-variant-numeric: tabular-nums; }
.lightbox-prev,
.lightbox-next,
.lightbox-close {
  min-width: 48px;
  min-height: 48px;
  border: 1px solid rgb(243 239 230 / .3);
  border-radius: 999px;
  background: none;
  color: var(--cream);
  font-size: 1.1rem;
  transition: background var(--fast), border-color var(--fast);
}
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-close:hover { background: rgb(243 239 230 / .1); border-color: var(--cream); }
.lightbox-close { position: absolute; top: 12px; right: var(--gutter); padding: 0 16px; font-size: .9375rem; }
.lightbox :focus-visible { outline-color: var(--cream); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] .lightbox-figure { animation: lightbox-in .45s var(--ease-out) both; }
  .lightbox[open]::backdrop { animation: menu-in .3s var(--ease-out) both; }
  .lightbox-image.is-changing { animation: lightbox-swap .35s var(--ease-out) both; }
}
@keyframes lightbox-in { from { opacity: 0; transform: scale(.96) translateY(12px); } }
@keyframes lightbox-swap { from { opacity: 0; transform: translateX(var(--swap-from, 16px)); } }


/* ---------- 6B · Who's building it ---------- */
.team-copy p { color: var(--fg-muted); }
.team-copy .lead { color: var(--fg); }
.team-copy p + p { margin-top: 14px; }
.team-copy strong { color: var(--heading); }
.team-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.team-roles li { display: grid; gap: 6px; padding-block: 18px; border-top: 1px solid var(--line); }
.team-roles li:nth-child(2) { border-top: 2px solid var(--gold); }
.team-role-name { font-weight: 650; letter-spacing: -.01em; color: var(--heading); }
.team-roles p:not(.team-role-name) { font-size: .9375rem; color: var(--fg-muted); }
.team-head { align-items: start; }
/* A short heading or note beside a long column stays in view while you read, then moves on with it */
@media (min-width: 900px) and (min-height: 700px) {
  .sticky-side,
  .prog-aside {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    align-self: start;
  }
  /* On the programme page they also clear the "Jump to" bar */
  .prog-aside { top: calc(var(--header-h) + var(--jump-h, 59px) + 24px); }
}
/* The picture column beside "Activity should lead somewhere" is tall, so it only stays in view on taller screens */
@media (min-width: 900px) and (min-height: 820px) {
  .progression > div:last-child { position: sticky; top: calc(var(--header-h) + var(--jump-h, 59px) + 24px); align-self: start; }
}
.team-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
  margin-top: clamp(32px, 4vw, 48px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-art);
  background: var(--cream);
}
.team-cta h3 { margin-bottom: 8px; font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); }
.team-cta p { max-width: 62ch; color: var(--fg-muted); }

/* Where we are now: two links */
.status-strip-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* ---------- Occasional updates (newsletter), separate from the enquiry form ---------- */
.updates-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px clamp(32px, 5vw, 72px);
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-art);
  background: var(--cream);
}
.updates-copy h3 { margin-bottom: 10px; font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); }
.updates-copy p:not(.eyebrow) { color: var(--fg-muted); }
.signup { display: grid; gap: 8px; }
.signup-label { font-weight: 600; color: var(--heading); }
.signup-row { display: flex; flex-wrap: wrap; gap: 10px; }
.signup-row input {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius);
  background: var(--control-bg);
  color: var(--control-fg);
  font: inherit;
}
.signup-row input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.signup-row input[aria-invalid="true"] { border-color: var(--oxblood); box-shadow: inset 4px 0 0 var(--oxblood); }
.signup-note { font-size: .8125rem; color: var(--fg-muted); }
.signup-status { min-height: 1.4em; font-size: .875rem; font-weight: 500; color: var(--heading); }
.signup-status:empty { min-height: 0; }
.signup-status.is-error { color: var(--oxblood); }
/* A sign up that went through: the same gold-edged box as the enquiry form's thank you, a size smaller */
.signup-status.is-done {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 8px;
  padding: 14px 16px;
  border: 2px solid var(--accent);
  background: var(--paper);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--fg);
}
.signup-status.is-done strong { display: block; margin-bottom: 2px; font-size: 1.0625rem; font-weight: 600; color: var(--heading); }
/* The contact email address in the message wraps instead of running through the edge on a narrow phone */
.signup-status.is-done { overflow-wrap: anywhere; }
/* The footer version: one line, on the dark footer */
.signup-mini { margin-top: 22px; max-width: 360px; }
.signup-mini .signup-label { font-size: .875rem; color: var(--heading); }
.signup-mini .signup-row input { flex-basis: 160px; min-height: 42px; }
.site-footer .signup-mini .signup-row input { border-color: rgb(243 239 230 / .4); background: transparent; color: var(--fg); }
.site-footer .signup-mini .signup-row input::placeholder { color: var(--fg-muted); opacity: 1; }
.site-footer .signup-status.is-error { color: #F0B8B0; }
.site-footer .signup-status.is-done { padding: 12px 14px; background: rgb(243 239 230 / .06); font-size: .875rem; }
.site-footer .signup-status.is-done strong { font-size: 1rem; }
.site-footer .signup-status.is-done .done-tick { width: 26px; height: 26px; }

/* ---------- 10 · More to explore: the characters and the collection, side by side ---------- */
.coming-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.coming-card {
  display: grid;
  align-content: start;
  gap: 22px;
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: var(--radius-art);
  background: var(--paper);
}
.coming-card h2 {
  max-width: 18ch;
  margin-bottom: 12px;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
}
.coming-card .coming-actions { margin-top: 18px; }
.coming-card-art { display: block; text-decoration: none; color: inherit; }
.coming-card-art img { transition: transform .8s var(--ease-out); }
.characters-teaser:hover .coming-card-art img { transform: scale(1.02); }
.coming-card .merch-collage { grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, .5fr)); }
/* The app's third example card */
.profile-avatar-gold { background: var(--gold); color: var(--ink); }
.profile-summary { font-size: .75rem; line-height: 1.4; color: var(--fg-muted); }

/* ---------- The characters page ---------- */
.flagship-look { margin-top: clamp(40px, 5vw, 64px); }

/* The same, sitting a touch lower and smaller, to give heads some room above */
/* Gower and the coast: under the Swansea flagship */
.coast-water { margin-top: clamp(72px, 8vw, 112px); }
/* The Gower photo runs edge to edge; a height limit crops it rather than shrinking it.
   The Gower and mountain bands share this rule and the same --ratio in the page, so they are the same
   height at every screen size. The crop comes off the sky, never the bottom, so the surfboard stays
   clear of the wave along the lower edge. */
.coast-water-band { width: 100%; min-height: 280px; max-height: min(70vh, 760px); margin-bottom: clamp(48px, 6vw, 80px); border-radius: 0; }
.coast-water-band img { object-position: 50% 100%; }
.coast-water-band .media-caption { left: 12px; top: 12px; bottom: auto; }
/* A swell rolls along the photo's lower edge, then settles (motion.js, "swell") */
.coast-swell { position: absolute; z-index: 2; left: 0; bottom: -1px; width: 100%; height: clamp(26px, 3.6vw, 52px); overflow: visible; pointer-events: none; }
.coast-swell path { fill: var(--bg); }
.coast-swell-back { opacity: .5; }
/* Heading and map on the left, the words on the right; on phones: heading, words, then the map */
.coast-water-head {
  grid-template-areas: "intro copy" "map copy";
  grid-template-rows: auto 1fr;
  align-items: start;
  margin-bottom: 0;
}
.coast-water-intro { grid-area: intro; }
.coast-water-copy { grid-area: copy; }
.coast-water-head .sg-map { grid-area: map; }
@media (max-width: 1099px) {
  .coast-water-head { grid-template-columns: 1fr; grid-template-areas: "intro" "copy" "map"; grid-template-rows: auto; }
  .coast-water-copy { max-width: 64ch; }
}
.coast-water-title { max-width: 14ch; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); letter-spacing: -.035em; }
.coast-water-copy p { color: var(--fg-muted); }
.coast-water-copy .lead { color: var(--fg); }
.coast-water-copy p + p { margin-top: 14px; }
.coast-water-copy .coast-water-strong { font-weight: 600; color: var(--heading); }

/* The mountains: built like the coast (photo edge to edge, heading and map left, words right).
   A ridge of peaks rises along the photo's lower edge (motion.js, "ridge") */
/* The mountain photo is wider than its frame: trim the dim valley on the right, keep the sun, the peak and the mist */
.mountains-band img { object-position: 30% 55%; }
.ridge-edge { position: absolute; z-index: 2; left: 0; bottom: -1px; width: 100%; height: clamp(26px, 3.6vw, 52px); overflow: visible; pointer-events: none; }
.ridge-edge path, .ridge-edge rect { fill: var(--bg); }
.ridge-back { opacity: .5; }

/* The maps: Swansea and the Gower coast (homepage), and Swansea to Brecon (programme page, Outdoors).
   Drawn from OpenStreetMap data. The shapes are inline in the page (search "MAP-"); the animation is
   mapStory() in motion.js. The map's own colours: */
.sg-map {
  --map-sea: #D6E3E1;            /* the sea, a soft sea-glass green */
  --map-sea-line: #6F9796;       /* waterlines out at sea */
  --map-sand: #E9DFC6;           /* sand and tidal flats, uncovered at low tide */
  --map-land: var(--bg);
  --map-ink: var(--forest);      /* the coastline */
  --map-water: #4F8A8B;          /* rivers */
  container: sgmap / inline-size;
  position: relative;
  margin: 0;
}
.coast-water-head .sg-map { margin-top: clamp(28px, 3.2vw, 40px); }
.sg-map-stage {
  position: relative;
  aspect-ratio: var(--map-ratio);
  overflow: hidden;
  border-radius: var(--radius-art);
  background: var(--map-land);
  box-shadow: inset 0 0 0 1px var(--line);
}
.sg-map-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sg-map-svg path, .sg-map-svg circle { vector-effect: non-scaling-stroke; }
.map-sea { fill: var(--map-sea); }
.map-waterline { fill: none; stroke: var(--map-sea-line); stroke-width: 1; stroke-opacity: .35; stroke-linejoin: round; }
.map-waterline + .map-waterline { stroke-opacity: .2; }
.map-land { fill: var(--map-land); }
.map-sand { fill: var(--map-sand); }
.map-outline, .map-outline-rest { fill: none; stroke: var(--map-ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.map-outline { stroke-dasharray: 1000; }
.map-park-hatch { stroke: var(--forest); stroke-opacity: .13; stroke-width: 1.2; }
.map-park-edge { fill: none; stroke: var(--forest); stroke-opacity: .34; stroke-width: 1; stroke-dasharray: 3 4; }
.map-river { fill: none; stroke: var(--map-water); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; }
.map-ring { fill: none; stroke: var(--gold); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 2 5; }
.map-route { fill: none; stroke: var(--core-light); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1000; }
.map-spark { fill: var(--core-light); opacity: 0; }
.map-core-dot { fill: var(--core-light); stroke: var(--bg); stroke-width: 2.5; }
.map-dot { fill: var(--forest); stroke: var(--bg); stroke-width: 2; }
.map-dot.is-dest { fill: var(--core-light); }
.map-peak { fill: var(--forest); stroke: var(--bg); stroke-width: 1.5; stroke-linejoin: round; }
.map-town-dot { fill: var(--fg-muted); fill-opacity: .6; }

/* Names sit over the map as ordinary text, so they stay readable at every size */
.sg-map-overlay { position: absolute; inset: 0; pointer-events: none; }
.sg-map-labels { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: var(--map-ratio); margin: 0; padding: 0; list-style: none; pointer-events: none; }
.map-label, .map-region, .map-town, .map-river-label, .map-ring-label {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  white-space: nowrap;
  text-shadow: 0 0 2px var(--map-land), 0 0 4px var(--map-land), 0 0 8px var(--map-land);
}
.map-label { font: 600 .8rem/1.15 var(--sans); color: var(--heading); transform: translate(11px, -50%); }
.map-label.side-left { transform: translate(calc(-100% - 11px), -50%); text-align: right; }
.map-label.side-below { transform: translate(-50%, 10px); text-align: center; }
.map-label.side-above { transform: translate(-50%, calc(-100% - 10px)); text-align: center; }
.map-label.side-below-start { transform: translate(-8px, 10px); text-align: left; }
.map-label.is-city { font-size: .95rem; }
.map-label.is-city.side-above { transform: translate(-50%, calc(-100% - 14px)); }
.map-label.is-city.side-left { transform: translate(calc(-100% - 15px), -50%); }
.map-label-km { display: block; margin-top: 1px; font-weight: 500; font-size: .7rem; color: var(--fg-muted); }
.map-region { transform: translate(-50%, -50%); font: 600 .66rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-align: center; color: var(--accent-text); }
.map-region small { display: block; margin-top: 2px; font-size: .66rem; font-weight: 500; letter-spacing: .04em; text-transform: none; font-style: italic; }
.map-region.is-sea { font-style: italic; font-weight: 500; letter-spacing: .18em; color: #3F6F70; text-shadow: none; }
.map-town { font: 500 .66rem/1 var(--sans); letter-spacing: .03em; color: var(--fg-muted); transform: translate(8px, -50%); }
.map-town.side-left { transform: translate(calc(-100% - 8px), -50%); }
.map-river-label { transform: translate(-50%, -50%) rotate(-58deg); font: italic 500 .66rem/1 var(--sans); color: var(--map-water); }
.map-ring-label { transform: translate(-50%, -50%); font: 600 .64rem/1 var(--sans); letter-spacing: .05em; color: var(--accent-text); }
.map-num { display: none; }
.map-num circle { fill: var(--forest); stroke: var(--bg); stroke-width: 2.5; }
.map-num text { font: 700 26px/1 var(--sans); text-anchor: middle; fill: var(--cream); }

/* Narrow maps (phones, and the programme map on small laptops): numbers on the map, names in a key below */
@container sgmap (max-width: 479px) {
  .map-num { display: inline; }
  .map-dot, .map-peak { display: none; }
  .map-town, .map-town-dot, .map-river-label, .map-ring-label, .map-region small, .map-region.is-sea { display: none; }
  .sg-map-labels { position: static; display: grid; grid-template-columns: 1fr; gap: 7px; aspect-ratio: auto; margin-top: 12px; }
  .sg-map .sg-map-labels .map-label { position: static; display: flex; align-items: baseline; gap: 8px; transform: none; text-align: left; text-shadow: none; font-size: .82rem; }
  .sg-map-labels .map-label::before {
    content: attr(data-num);
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--forest);
    font: 700 .68rem/1 var(--sans);
    color: var(--cream);
    transform: translateY(-1px);
  }
  .sg-map-labels .map-label.is-city::before { content: ""; width: 12px; height: 12px; margin: 0 4px; background: var(--core-light); box-shadow: 0 0 0 4px rgb(232 166 82 / .25); }
  .sg-map-labels .map-label-km { display: inline; margin: 0 0 0 4px; }
  .sg-map.is-land .map-region { left: 62%; }
}
@container sgmap (min-width: 480px) and (max-width: 559px) {
  .sg-map.is-coast .map-num { display: inline; }
  .sg-map.is-coast .map-dot, .sg-map.is-coast .map-peak { display: none; }
  .sg-map.is-coast .map-town, .sg-map.is-coast .map-town-dot, .sg-map.is-coast .map-river-label, .sg-map.is-coast .map-ring-label, .sg-map.is-coast .map-region small, .sg-map.is-coast .map-region.is-sea { display: none; }
  .sg-map.is-coast .sg-map-labels { position: static; display: grid; grid-template-columns: 1fr; gap: 7px; aspect-ratio: auto; margin-top: 12px; }
  .sg-map.is-coast .sg-map-labels .map-label { position: static; display: flex; align-items: baseline; gap: 8px; transform: none; text-align: left; text-shadow: none; font-size: .82rem; }
  .sg-map.is-coast .sg-map-labels .map-label::before {
    content: attr(data-num);
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--forest);
    font: 700 .68rem/1 var(--sans);
    color: var(--cream);
    transform: translateY(-1px);
  }
  .sg-map.is-coast .sg-map-labels .map-label.is-city::before { content: ""; width: 12px; height: 12px; margin: 0 4px; background: var(--core-light); box-shadow: 0 0 0 4px rgb(232 166 82 / .25); }
  .sg-map.is-coast .sg-map-labels .map-label-km { display: inline; margin: 0 0 0 4px; }
}
.sg-map figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 10px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--fg-muted);
}
.sg-map-replay {
  padding: 4px 0;
  border: 0;
  background: none;
  font: 600 .78rem/1.2 var(--sans);
  color: var(--heading);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.sg-map-replay:hover { color: var(--btn-bg); }
.characters-note {
  margin-top: 18px;
  padding-left: 16px;
  border-left: 2px solid var(--gold);
  color: var(--fg-muted);
}
.characters { padding-top: clamp(8px, 2vw, 24px); }
.characters .cast-hint { margin-top: 0; }
.story { padding-top: clamp(24px, 3vw, 40px); }
.story .inspire { margin-top: 0; }
.characters-close .invitation-inner { padding-top: 0; }

@media (max-width: 899px) {
  .team-roles { grid-template-columns: 1fr; }
  .updates-box { grid-template-columns: 1fr; }
  .coming-pair { grid-template-columns: 1fr; }
}

/* =====================================================================
   9. RESPONSIVE ADJUSTMENTS
   ===================================================================== */

/* Laptops: stack the opening so the headline never gets squeezed */
@media (max-width: 1099px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { max-width: 640px; padding: 22px 0 0; }

  /* The journey reads top to bottom until there's room for six columns */
  .cycle { grid-auto-flow: row; grid-template-columns: 1fr; gap: 26px; max-width: 640px; padding-left: 40px; }
  .cycle-step { position: relative; }
  .cycle-icon { width: 34px; height: 34px; margin-bottom: 8px; }
  .cycle-node { position: absolute; left: -40px; top: 10px; margin: 0; }
  .focus-line { margin-top: 30px; }

  .tangible-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engines { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* The programme page's five-step route reads top to bottom */
  .route-steps { grid-template-columns: 1fr; gap: 0; max-width: 640px; }
  .route-steps::before { left: 6px; right: auto; top: 6px; bottom: 30px; width: 1px; height: auto; transform: scaleY(var(--draw)); transform-origin: top; }
  .route-steps li { padding: 0 0 22px 36px; }
  .route-steps strong { display: inline; margin-right: .4em; }
}

/* Small laptops */
@media (max-width: 1150px) and (min-width: 900px) {
  .header-inner { gap: 20px; }
  .main-nav { gap: 18px; }
  .main-nav a { font-size: .8125rem; }
  .logo-word-ground { font-size: 1.25rem; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}

/* Tablets and phones */
@media (max-width: 899px) {
  :root { --header-h: 64px; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding: 12px var(--gutter);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .site-header:not(.menu-ready) { margin-bottom: 52px; }
  .menu-ready .main-nav { display: none; }
  .menu-ready .menu-toggle { display: inline-flex; }
  .header-inner { gap: 10px; }
  .header-actions { margin-left: auto; }
  .logo-emblem { width: 34px; }
  .logo-word-steady { font-size: .72rem; }
  .logo-word-ground { font-size: 1.2rem; }

  .section-head { grid-template-columns: 1fr; }
  .coast-water-band img { object-position: 28% 100%; }
  .mountains-band img { object-position: 28% 55%; }

  .hero-art { aspect-ratio: 16 / 9; }
  .hero-art img { object-position: 18% 50%; }

  /* The three parts stack, with the line running down the left */
  .pillars { grid-template-columns: 1fr; gap: 0; }
  .pillars::before { left: 6px; right: auto; top: 6px; bottom: 40px; width: 1px; height: auto; transform: scaleY(var(--draw)); transform-origin: top; }
  .pillar { padding: 0 0 18px 36px; }
  .pillar h3 { margin-bottom: 6px; }

  .why-grid { grid-template-columns: 1fr; }
  .welcome-grid { grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
  .welcome-grid article { padding-block: 18px; }
  .evidence-head { grid-template-columns: 1fr; margin-bottom: 28px; }
  .evidence-grid { grid-template-columns: 1fr; row-gap: 36px; }
  .stat { display: block; grid-row: auto; }
  .stat-prefix { min-height: 0; }

  .model-head { grid-template-columns: 1fr; }

  .theme { grid-template-columns: 1fr; }
  .theme .media { max-width: 560px; }
  .is-tabbed .theme .media { max-width: none; }

  .swansea-layout { grid-template-columns: 1fr; gap: 44px; }
  .coast-band { overflow: visible; }
  .coast-wordmark { position: relative; left: auto; right: auto; bottom: auto; transform: none; width: fit-content; max-width: calc(100% - 2 * var(--gutter)); margin: -30px var(--gutter) 0; }

  .residential { grid-template-columns: 1fr; }

  .phase-map { display: flex; flex-direction: column; gap: 34px; padding-left: 40px; }
  .phase-map > .phase { padding-top: 0; }
  .phase-map .phase-pair {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding-block: 6px;
  }
  .pair-label {
    display: block;
    margin-bottom: -10px;
    font: 600 .6875rem/1.4 var(--sans) !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-text) !important;
  }
  .phase-map .phase { position: relative; }
  .phase-map h3 { margin: 0 0 8px; font-size: 1.75rem; }
  .phase-map .phase-node { position: absolute; left: -46px; top: 10px; margin: 0; }
  /* Establish sits on the second strand, beside Activate's */
  .phase-map .phase-pair .phase:last-child .phase-node { left: -32px; }
  .phase-lines-desktop { display: none; }
  .phase-lines-mobile { display: block; }

  .support-routes { grid-template-columns: 1fr; }
  .enquiry-form { grid-template-columns: 1fr; }
  .form-head { position: static; }

  .faq-layout { grid-template-columns: 1fr; }
  .coming-panel { grid-template-columns: 1fr; }
  .invitation-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-details { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }

  /* Catalogue: two columns, larger pieces across both */
  .cat-hero-grid,
  .identity-grid,
  .goods-hero-grid,
  .goods-intro-grid { grid-template-columns: 1fr; }
  .goods-hero-piece { justify-self: stretch; max-width: none; }
  .goods-hero-head { grid-template-columns: 1fr; }
  .wheel-stage { height: 300px; }
  .wheel-card { top: 50%; }
  .goods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .good.is-featured { grid-row: auto; }
  .cat-hero-mark { order: -1; max-width: 320px; margin-inline: auto; padding: 0; }
  .cat-emblem { width: min(100%, 220px); }
  .cat-head { grid-template-columns: auto minmax(0, 1fr); }
  .cat-intro { grid-column: 1 / -1; }
  .cat-grid,
  .place-grid,
  .materials { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; align-items: start; }
  .piece,
  .visual,
  .cat-note { grid-column: auto / span var(--m, 1); grid-row: auto; }
  .piece .piece-zoom { flex: none; aspect-ratio: 1; min-height: 0; }
  .visual .piece-zoom { flex: none; }
  .visual .piece-zoom { aspect-ratio: var(--mshape, 4/3); min-height: 0; }
  .cat-note { grid-column: 1 / -1; }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The three signs scroll sideways */
  .triptych {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .triptych::-webkit-scrollbar { display: none; }
  .triptych .visual { scroll-snap-align: center; }
  .triptych .piece-zoom { aspect-ratio: 3/4; }
  .place-banner { aspect-ratio: 2 / 1; }
  .place-banner img { object-position: 22% 50%; }
  .lightbox-figure { grid-template-columns: 1fr; align-content: center; }
  .lightbox-image { max-height: 58dvh; }

  /* Programme page */
  .jump-label { display: none; }
  .offer-grid,
  .prog-grid,
  .prog-head,
  .prog-split,
  .prog-split-reverse,
  .chapter-facts,
  .progression,
  .loops,
  .benefits-head,
  .status-strip { grid-template-columns: 1fr; }
  .prog-split-reverse .prog-stack { order: 2; }
  .prog-stack .media { max-width: 560px; }
  .kitchen-grid { grid-template-columns: 1fr; }
  .kitchen-side { display: none; }
  .stage-flow { grid-template-columns: 1fr; }
  .possible-list li { grid-template-columns: 1fr; gap: 6px; }
  .possible-arrow { width: 48px; margin-block: 4px; }
}

/* Phones */
@media (max-width: 480px) {
  :root { --section-space: 52px; }
  .hero { padding-top: 20px; }
  .hero-title { margin-top: 16px; font-size: clamp(2.1rem, 11.2vw, 3.4rem); letter-spacing: -.04em; }
  .hero-promise { font-size: clamp(2rem, 9.6vw, 3rem); letter-spacing: -.03em; }
  .hero-side { padding-top: 18px; }
  .hero-groundline { margin-bottom: 18px; }
  .hero-intro { margin-bottom: 20px; font-size: 1.0625rem; line-height: 1.5; }
  .hero .actions { gap: 4px 20px; }
  .hero .button { width: 100%; justify-content: space-between; }
  .hero .button-ring { justify-content: flex-start; }
  .hero-art { aspect-ratio: 4 / 3; }
  .hero-badge { width: 76px; }
  .pillar p { font-size: .9375rem; }

  .statement { font-size: clamp(2.2rem, 11vw, 3rem); }
  .word-row { font-size: 1.5rem; }
  .stat-value { font-size: 3.4rem; }

  .coast-media { aspect-ratio: 3 / 2; min-height: 0; }
  .coast-media img { object-position: 42% 50%; }
  .support-banner { aspect-ratio: 2 / 1; }
  .support-banner img { object-position: 24% 12%; }
  .help-art img { object-position: 62% 70%; }
  .coast-name { font-size: 2.4rem; }

  .theme-tablist { gap: 6px; }
  .theme-tab { min-height: 40px; padding: 6px 13px; font-size: .875rem; }
  .theme .media { aspect-ratio: 16 / 9; }

  .form-grid,
  .choice-grid,
  .interest-groups,
  .tangible-grid { grid-template-columns: 1fr; }
  /* On phones the examples drop their pictures to keep the page shorter */
  .tangible-grid .media { display: none; }
  .tangible-grid { gap: 0; }
  .tangible-grid li { padding-block: 14px; border-top: 1px solid var(--line); }
  .invitation-art:not(.is-whole) { aspect-ratio: 4 / 3; }
  .page-title { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .choice-grid { gap: 6px; }
  .choice { min-height: 46px; padding: 11px 12px; }
  .coming .phone { zoom: .74; }
  .app-visual { padding-block: 0; }
  .enquiry-form { padding: 22px 18px; margin-inline: calc(var(--gutter) * -.5); }
  .merch-collage { gap: 8px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .engines { grid-template-columns: 1fr; gap: 18px; }
  .benefit { padding: 18px 20px 22px; }
  .benefit::before { margin-bottom: 16px; }
  .benefit::after { left: 20px; right: 20px; top: 40px; }
  .phase-map p { font-size: .9375rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .header-actions .button-small { display: none; }
}


/* =====================================================================
   10. MOTION
   All animation is added by assets/js/motion.js. These rules only prepare
   elements for it; without JavaScript the page is complete and static.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Moving between pages cross-fades, and the header stays put (in browsers that support it) */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: page-out .28s var(--ease-out) both; }
  ::view-transition-new(root) { animation: page-in .45s var(--ease-out) both; }
}
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }

/* Hold the opening elements for a moment so they can animate in without flicker */
.motion-pending .hero-line > span,
.motion-pending .hero-fade,
.motion-pending .hero-groundline,
.motion-pending .hero-art-wrap > *,
.motion-pending .site-header .logo-emblem,
.motion-pending .site-header .logo-words { visibility: hidden; }

/* Masks for line-by-line headline reveals */
.has-motion .hero-line {
  overflow: hidden;
  padding: 0 .12em .14em .05em;
  margin: 0 -.12em -.14em -.05em;
}
.has-motion .word-row {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
}

/* Programme tabs: the new picture wipes in and the words rise, in under half a second.
   Only the chosen theme is ever shown, so a quick change can't leave an old picture behind. */
@media (prefers-reduced-motion: no-preference) {
  .is-tabbed .theme .media { animation: theme-wipe .42s var(--ease-out) backwards; }
  .is-tabbed .theme .media img { animation: theme-settle .9s var(--ease-out) backwards; }
  .is-tabbed .theme-body > * { animation: theme-rise .4s var(--ease-out) backwards; }
  .is-tabbed .theme-body > :nth-child(n+3) { animation-delay: 60ms; }
}
/* The inner light: the "Now" circle and the three circles under the opening picture glow softly,
   like the characters' core, one after another. A slow, small movement that stops completely
   when "reduce motion" is on. */
@media (prefers-reduced-motion: no-preference) {
  .phase-node.is-current,
  .pillar-node { animation: core-glow 3.2s ease-in-out infinite alternate; }
  .pillar:nth-child(2) .pillar-node { animation-delay: -1.1s; }
  .pillar:nth-child(3) .pillar-node { animation-delay: -2.2s; }
}
@keyframes core-glow { to { filter: drop-shadow(0 0 7px rgb(232 166 82 / .75)); } }
@keyframes theme-wipe { from { clip-path: inset(0 100% 0 0); } }
@keyframes theme-settle { from { scale: 1.08; } }
@keyframes theme-rise { from { opacity: 0; transform: translateY(10px); } }

/* "It has gone through": the box rises in with a brief gold glow, then the ring and the tick draw themselves.
   The hidden starting points live inside this block, so with reduced motion the finished tick simply shows. */
@media (prefers-reduced-motion: no-preference) {
  .form-result.is-done,
  .signup-status.is-done { animation: done-in .7s var(--ease-out) both; }
  .done-tick circle { stroke-dasharray: 88; stroke-dashoffset: 88; animation: done-draw .6s var(--ease-out) .15s forwards; }
  .done-tick path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: done-draw .35s var(--ease-out) .65s forwards; }
}
@keyframes done-in { from { opacity: 0; transform: translateY(10px); box-shadow: 0 0 0 8px rgb(232 166 82 / .45); } }
@keyframes done-draw { to { stroke-dashoffset: 0; } }

/* A ticked box glows briefly when a button on the page adds it */
@keyframes choice-added {
  from { box-shadow: 0 0 0 7px rgb(232 166 82 / .45), inset 0 0 0 1px var(--oxblood); }
}
.choice.is-added { animation: choice-added 1.2s var(--ease-out); }

/* Mobile menu: links rise in one after another */
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu[open] { animation: menu-in .45s var(--ease-out) both; }
  .mobile-menu[open] nav a { animation: menu-link-in .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); }
}
@keyframes menu-in { from { opacity: 0; } }
@keyframes menu-link-in { from { opacity: 0; transform: translateY(28px); } }

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

/* Line masks made by motion.js — a little extra room so letters like g, y and p aren't clipped */
.split-line-mask,
.has-motion [data-split] > div[style*="overflow"] {
  padding-bottom: .14em;
  margin-bottom: -.14em;
}


/* =====================================================================
   11. EDIT-GUIDE MODE
   Add ?edit to the end of the web address to see which file each picture
   comes from and the name of each section in index.html.
   ===================================================================== */
.edit-tag {
  position: absolute;
  z-index: 40;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  padding: 6px 9px;
  border-radius: 3px;
  background: #FFD84D;
  color: #15201B;
  font: 600 12px/1.35 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 2px 10px rgb(0 0 0 / .25);
  pointer-events: none;
}
.edit-tag small { display: block; font-weight: 400; }
.edit-section-tag { top: 10px; left: auto; right: 10px; background: #fff; }
.edit-mode .media { outline: 2px dashed #FFD84D; outline-offset: -2px; }
.edit-panel {
  position: fixed;
  z-index: 200;
  right: 16px;
  bottom: 16px;
  width: min(360px, calc(100% - 32px));
  padding: 18px 20px;
  border-radius: 6px;
  background: #FFD84D;
  color: #15201B;
  font: 400 14px/1.5 var(--sans);
  box-shadow: 0 10px 40px rgb(0 0 0 / .3);
}
.edit-panel strong { display: block; margin-bottom: 6px; font-size: 15px; }
.edit-panel ul { margin: 8px 0 0; padding-left: 18px; }
.edit-panel button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: 20px;
}