/* Layout: a fixed full-screen stage holds the gateway; the story scrolls over it in tall "beats".
   Each beat's text sits on the side the gate has moved away from. The page ground itself goes
   from warm limestone at midday to a deep night blue, driven from splash.js (--night 0..1). */
:root {
  --night: 0;
  --day-bg: #d9ecf9;      /* pale sky blue by day; splash.js fades it to sunset orange, then night */
  --dusk-bg: #f5bd8a;
  --night-bg: #141a26;    /* night over the fields */
  --day-ink: #2a241d;
  --night-ink: #f1ece2;
  --oak: #2a7ab8;         /* calls to action: the sky's blue, darkened through the evening by splash.js */
  --oak-hover: #24689c;
  --oak-ink: #ffffff;
  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --bg: var(--day-bg);
  --ink: var(--day-ink);
  --muted: color-mix(in srgb, var(--ink) 68%, transparent);
  --panel: color-mix(in srgb, var(--bg) 82%, transparent);
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --day: 1;               /* 1 at midday, 0 once the sun is down: drives the sky wash */
  --stars: 0;             /* 0 by day, 1 at full night: drives the starfield */
  color-scheme: light;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color 120ms linear, color 120ms linear;
}
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 20; background: var(--oak); color: var(--oak-ink); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* ---- header ---- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) clamp(16px, 4vw, 40px) 14px;
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
/* once the page scrolls, the header gets a backing so content never runs under the logo and nav */
body.is-scrolled .top {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.brand { font: 600 22px/1 var(--serif); text-decoration: none; letter-spacing: 0.01em; }
.top nav { display: flex; align-items: center; gap: clamp(10px, 2vw, 24px); font-size: 15px; }
.top nav a:not(.cta) { text-decoration: none; opacity: 0.85; }
.top nav a:not(.cta):hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---- buttons ---- */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: 999px;
  background: var(--oak); color: var(--oak-ink);
  font: 600 16px/1 var(--sans); text-decoration: none;
  box-shadow: 0 6px 20px -8px rgb(60 35 15 / 0.55);
  transition: background-color 150ms ease, transform 150ms ease;
}
.cta:hover { background: var(--oak-hover); transform: translateY(-1px); }
.cta-small { padding: 10px 16px; font-size: 14px; }
.cta:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.link { font-weight: 600; text-underline-offset: 4px; }

/* ---- the stage ---- */
.stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#gate { width: 100%; height: 100%; display: block; }

/* ---- the story ---- */
main { position: relative; z-index: 1; }
.beat {
  min-height: 150vh;
  display: flex; align-items: center;
  padding-inline: clamp(16px, 5vw, 72px);
}
/* side beats split the screen 50/50: the gate is centred in one half, the copy in the other */
.beat .copy { width: min(30rem, 40vw); }
.beat.right, .beat.left { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.beat.right .copy { grid-column: 2; justify-self: center; }
.beat.left .copy { grid-column: 1; justify-self: center; }
.beat.right .copy, .beat.left .copy { padding: clamp(20px, 3vw, 32px); }
.hero { position: relative; min-height: 100vh; flex-direction: column; justify-content: center; text-align: center; }
.hero .copy { width: min(38rem, 100%); }

.eyebrow { margin: 0 0 10px; font: 600 12px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0 0 16px; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.4vw, 78px); letter-spacing: -0.01em; }
h2 { font-size: clamp(30px, 3.8vw, 46px); }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 32rem; margin: 0 auto 26px; }
.copy p { margin: 0 0 14px; }
.copy p:last-child { margin-bottom: 0; }
.address { font-weight: 600; white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.finale .actions { margin: 22px 0 14px; }
.small { font-size: 14px; color: var(--muted); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 12px; height: 7px; border-left: 2px solid var(--oak); border-bottom: 2px solid var(--oak); transform: rotate(-45deg); }

.foot {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  padding: 28px clamp(16px, 5vw, 72px) calc(env(safe-area-inset-bottom, 0px) + 28px);
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.foot p { margin: 0; }
.foot .brand { font-size: 18px; }
.foot nav { display: flex; gap: 20px; }

/* Night: the CTA picks up the warm hall light instead of dark oak */

/* ---- the app showcase (after the gate has risen away) and the final sign-up ---- */
.beat.exit { min-height: 70vh; }
.showcase { position: relative; z-index: 1; padding: 4vh clamp(16px, 5vw, 72px) 10vh; }
.showcase-inner { width: min(1120px, 100%); margin-inline: auto; display: grid; gap: clamp(20px, 3vw, 36px); text-align: center; }
.showcase-inner h2 { margin-bottom: 4px; }
.shot { margin: 0; display: grid; gap: 12px; text-align: left; }
.shot .frame {
  display: flex; gap: 6px; padding: 10px 12px;
  border-radius: 12px 12px 0 0; background: color-mix(in srgb, var(--ink) 14%, var(--bg));
}
.shot .frame span { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 35%, var(--bg)); }
.shot img {
  display: block; width: 100%; height: auto; margin-top: -12px;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.65), 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent);
}
.shot figcaption { font-size: 15px; color: var(--muted); }
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.signup { position: relative; z-index: 1; padding: 12vh clamp(16px, 5vw, 72px) 16vh; text-align: center; }
.signup-inner { width: min(36rem, 100%); margin-inline: auto; }
.signup h2 { font-size: clamp(36px, 5vw, 60px); }
.signup p { margin: 0 0 18px; color: var(--muted); font-size: 18px; }
.signup .actions { margin: 28px 0 18px; }
.cta-large { padding: 18px 30px; font-size: 18px; }

/* ---- scene controls ---- */
.scene-toggle {
  position: fixed; z-index: 15;
  right: clamp(14px, 3vw, 28px); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(14px, 3vw, 28px));
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 600 14px/1 var(--sans); cursor: pointer;
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.45);
}
.scene-toggle:hover { border-color: var(--ink); }
.scene-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.scene-toggle[hidden] { display: none; }
.scene-toggle[aria-expanded="true"] { background: var(--ink); color: var(--bg); }

.scene-panel {
  position: fixed; z-index: 15;
  right: clamp(14px, 3vw, 28px); bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(14px, 3vw, 28px) + 58px);
  width: min(340px, calc(100vw - 28px)); max-height: calc(100vh - 150px); overflow: auto;
  display: grid; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--ink); font-size: 14px;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.5);
}
.scene-panel[hidden] { display: none; }
.scene-panel header { display: flex; align-items: center; justify-content: space-between; }
.scene-panel h2 { margin: 0; font: 600 20px/1 var(--serif); }
.scene-panel .close { appearance: none; border: 0; background: none; color: inherit; font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.scene-panel fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 9px; }
.scene-panel legend { margin-bottom: 8px; padding: 0; font: 600 11px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.scene-panel label { display: grid; grid-template-columns: 6.6em minmax(0, 1fr) 3.4em; align-items: center; gap: 10px; font-weight: 500; }
.scene-panel label.check { grid-template-columns: auto 1fr; gap: 8px; }
.scene-panel input[type="range"] { width: 100%; accent-color: var(--oak); }
.scene-panel input:disabled { opacity: 0.4; }
.scene-panel output { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button {
  appearance: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px;
  background: transparent; color: var(--ink); font: 600 12px/1 var(--sans); cursor: pointer;
}
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.scene-panel button:focus-visible, .scene-panel input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.scene-panel .reset { justify-self: end; appearance: none; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: transparent; color: var(--ink); font: 600 13px/1 var(--sans); cursor: pointer; }

/* ---- narrow screens: the gate sits in the upper half, the story cards scroll over the lower ---- */
@media (max-width: 760px) {
  .top nav a:not(.cta) { display: none; }
  .beat { min-height: 120vh; align-items: flex-end; padding-bottom: calc(7vh + 44px); }
  .beat .copy, .hero .copy { width: 100%; }
  .beat.right, .beat.left { display: flex; justify-content: center; align-items: flex-end; }
  .beat.right .copy, .beat.left .copy { grid-column: auto; }
  /* on phones the copy scrolls over the gate: a soft halo in the page colour keeps it readable
     without drawing a box */
  .beat:not(.hero) .copy { background: radial-gradient(closest-side, color-mix(in srgb, var(--bg) 88%, transparent) 55%, transparent); padding: 20px 20px; }
  .hero { min-height: 100vh; align-items: center; padding-bottom: 0; }
  .shot-pair { grid-template-columns: 1fr; }
  .beat.exit { min-height: 50vh; }
}

/* without WebGL the story still reads as a plain page */
body.no-webgl .stage { display: none; }
body.no-webgl .beat { min-height: auto; padding-block: 12vh; }

/* ---- plain pages (signup, contact, legal): no stage, the header sits on the sky ---- */
body.page { min-height: 100vh; display: flex; flex-direction: column; }
body.page .foot { margin-top: auto; }
.page-main { width: min(44rem, 100% - 32px); margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 120px) 0 12vh; }
.page-main.page-wide { width: min(52rem, 100% - 32px); }
.page-head { margin-bottom: 28px; }
.page-head h1 { font-size: clamp(36px, 5vw, 56px); }
.page-head .lede { margin: 0; max-width: none; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 4vw, 36px); box-shadow: 0 18px 40px -28px rgba(30, 50, 80, 0.35); }

.form { display: grid; gap: 20px; }
.form .cta { justify-self: start; border: 0; cursor: pointer; font-family: inherit; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.optional { font-weight: 400; color: var(--muted); }
.form-divider { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.field-group { margin: 0; padding: 0; border: 0; display: grid; gap: 14px; min-width: 0; }
.field-group legend { padding: 0; margin-bottom: 4px; font: 600 18px/1.3 var(--serif); }
.field input.postcode { max-width: 12rem; text-transform: uppercase; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field label { font-weight: 600; font-size: 15px; }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; font: inherit; color: inherit; background: #fff;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); border-radius: 10px; padding: 11px 14px;
}
.field textarea { resize: vertical; min-height: 9em; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--oak); outline-offset: 1px; border-color: var(--oak); }
.field [aria-invalid="true"] { border-color: #b3261e; }
.error { margin: 0; font-size: 14px; color: #b3261e; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400 !important; }
.check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--oak); flex: none; }
.check a, .prose a { color: var(--oak); text-underline-offset: 3px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.alert { border-radius: 14px; padding: 14px 18px; margin-bottom: 20px; font-size: 15px; }
.alert p { margin: 0; }
.form .alert { margin: 0; }
.alert-error { background: #fdecea; color: #8a1c14; border: 1px solid #f3c2bd; }
.alert-success { background: #e8f5ec; color: #1d5b33; border: 1px solid #b9dfc6; }
.alert-info { background: #eaf3fb; color: #1f4a70; border: 1px solid #c3dbef; }
.alert-draft { background: #fff4d6; color: #6b4a00; border: 1px solid #f0d78c; font-weight: 600; }

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose h2 { font-size: clamp(24px, 2.6vw, 30px); margin: 32px 0 12px; }
.prose h3 { font: 600 18px/1.3 var(--sans); margin: 24px 0 8px; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); }

@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .page-main { padding-top: calc(env(safe-area-inset-top, 0px) + 96px); }
  .form .cta { justify-self: stretch; text-align: center; }
}
body.page .top { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }

/* ---- page sky: quiet texture behind everything. A wash that is deeper overhead and hazier toward
   the horizon (works on blue and on sunset orange), a few soft cloud wisps, a fine grain, and stars
   that come out after sunset. Translucent, so the page colour still leads. ---- */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky > div { position: absolute; inset: 0; }
.sky-wash {
  opacity: calc(0.12 + 0.88 * var(--day));
  background:
    radial-gradient(60% 18% at 22% 24%, rgb(255 255 255 / 0.22), transparent 70%),
    radial-gradient(45% 12% at 74% 14%, rgb(255 255 255 / 0.16), transparent 70%),
    radial-gradient(70% 20% at 62% 58%, rgb(255 255 255 / 0.12), transparent 70%),
    linear-gradient(to bottom, rgb(20 60 120 / 0.10), transparent 45%, rgb(255 255 255 / 0.26));
  transition: opacity 120ms linear;
}
.sky-grain {
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sky-stars {
  opacity: var(--stars);
  background-repeat: repeat;
  background-position: 0 var(--star-drift, 0px);
}
.sky-stars-twinkle { animation: twinkle 7s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: calc(var(--stars) * 0.25); } to { opacity: var(--stars); } }
@media (prefers-reduced-motion: reduce) { .sky-stars-twinkle { animation: none; } }

/* ---- section dots: jump between the major sections ---- */
.section-dots { position: fixed; right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); z-index: 6; display: grid; gap: 14px; }
.section-dots button {
  appearance: none; border: 0; padding: 6px; margin: -6px; background: none; cursor: pointer; display: block;
}
.section-dots button::before {
  content: ""; display: block; width: 8px; height: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  transition: transform 200ms ease, background-color 200ms ease;
}
.section-dots button:hover::before { background: color-mix(in srgb, var(--ink) 60%, transparent); }
.section-dots button[aria-current="true"]::before { background: var(--ink); transform: scale(1.35); }
.section-dots button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 50%; }

/* ---- "See more": fixed at the bottom middle, goes to the next section ---- */
.see-more {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); transform: translateX(-50%); z-index: 6;
  appearance: none; border: 0; background: none; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  font: 600 12px/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
}
.see-more[hidden] { display: none; }
.see-more:hover { color: var(--ink); }
.see-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
.see-more svg { width: 16px; height: 16px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .see-more svg { animation: none; } }
@media (max-width: 760px) {
  .section-dots { right: 6px; gap: 12px; }
  .section-dots button::before { width: 6px; height: 6px; }
}
.prose ol.steps { list-style: none; counter-reset: step; padding: 0; display: grid; gap: 14px; }
.prose ol.steps li { counter-increment: step; position: relative; padding-left: 42px; margin: 0; }
.prose ol.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--oak); color: var(--oak-ink); font: 600 14px/1 var(--sans);
}