/* ============================================================================
   Riverina AI — Open Gate (candidate-b-opengate)
   Organising concept: the open gate as a threshold you step through.
   Content parts like a gate on a hinge to reveal media and the next idea.
   Ground: pale eucalyptus light + river-at-dusk deep. NOT cream-paper survey,
   NOT charcoal dark-tech. No survey grammar: no corner brackets, crosshairs,
   chainage coordinates, or register-row ledgers.
   ============================================================================ */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Ground (light, eucalyptus-tinted) */
  --ground:        #EDEFE6;
  --ground-2:      #E2E6D8;
  /* Ink (text on light) */
  --ink:           #1B1E1A;   /* 14.50:1 on ground */
  --ink-2:         #49514A;   /*  7.07:1 on ground */
  /* Deep (hero band + footer ground, river-at-dusk) */
  --deep:          #152022;
  --on-deep:       #EDEFE6;   /* 14.34:1 on deep */
  --on-deep-2:     #A9B6AC;   /*  7.91:1 on deep */
  /* Interaction — per surface (R4: never cross these) */
  --rust:          #A83E0E;   /* interaction on light,  5.38:1 on ground */
  --ochre:         #E8A24A;   /* interaction on deep,   7.69:1 on deep   */
  /* Accent field (filled band only, ink text on it) */
  --ochre-field:   #D98A25;   /* ink-on-field 6.10:1 — background only   */
  /* Structural green — never clickable */
  --river:         #1F4A3E;   /* 8.58:1 on ground */
  --river-bright:  #5FA98C;   /* 5.98:1 on deep   */

  /* Type scale — ratio 1.25 (major third), base 16, round-to-nearest-1px.
     Members: 8 10 13 16 20 25 31 39 49 61. Body = 16 (a true member). */
  --s-8:  0.5rem;    /*  8px — non-text UI only */
  --s-13: 0.8125rem; /* 13px — labels, fine print */
  --s-16: 1rem;      /* 16px — BODY */
  --s-20: 1.25rem;   /* 20px — lede */
  --s-25: 1.5625rem; /* 25px — h3 */
  --s-31: 1.9375rem; /* 31px — h2 small */
  --s-39: 2.4375rem; /* 39px — h2 */
  --s-49: 3.0625rem; /* 49px — h1 small */
  --s-61: 3.8125rem; /* 61px — h1 display */

  /* Spacing unit: 8px. All margins/padding are integer multiples. */
  --u: 8px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-micro: 240ms;
  --t-reveal: 640ms;
  --t-gate: 1200ms;

  /* Candidate C: the ground is pinned to the exact field hex of the line-converted
     hero clip so the video-to-page seam is invisible. The scroll temperature shift
     (Technique 2) is CUT for this candidate — any drift in the ground would draw a
     visible rectangle around the containerless hero. --ground-live stays constant. */
  --ground-live: #EDEFE6;
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground-live);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: var(--s-16);
  line-height: 1.5;
  transition: background-color var(--t-reveal) linear;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--rust); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 560;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
/* Leading scales with size: tight at display, looser as text shrinks. */
.h-display { line-height: 1.02; }   /* 61px */
.h-1       { line-height: 1.04; }   /* 49px */
.h-2       { line-height: 1.1;  }   /* 39px */
.h-3       { line-height: 1.2;  }   /* 25px */
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* ---- Vertical rhythm by element role (one system, applied everywhere) ----
   Body prose: 24px (3u) space after a paragraph. Prose blocks cap their own
   measure by role, not by opt-in class. */
main p { max-width: 62ch; }
.lede { max-width: 56ch; }
.art-body p, .measure p, p.measure { max-width: 62ch; }
main p + p { margin-top: calc(var(--u) * 3); }

/* Accessible focus — per surface, always visible */
:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-deep :focus-visible, .site-footer :focus-visible { outline-color: var(--ochre); }

.skip {
  position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 2);
  transform: translateY(-400%);
  background: var(--ink); color: var(--ground);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  z-index: 100; text-decoration: none; border-radius: 2px;
  transition: transform var(--t-micro) var(--ease);
}
.skip:focus { transform: translateY(0); color: var(--ground); }

.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;
  font-size: var(--s-16);   /* keep on the modular scale even when visually hidden */
}

/* ---- Layout wrap --------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: calc(var(--u) * 4);   /* 32px */
}
.wrap.wide { max-width: 1360px; }

/* ---- Type roles ---------------------------------------------------------- */
.disp { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.h-display { font-size: clamp(var(--s-49), 6vw, var(--s-61)); }
.h-1 { font-size: var(--s-49); }
.h-2 { font-size: var(--s-39); }
.h-3 { font-size: var(--s-25); }
.lede { font-size: var(--s-20); line-height: 1.2; color: var(--ink); }
.measure { max-width: 62ch; }
.kicker {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--s-13);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--river);
}
.accent { color: var(--rust); font-style: normal; }
.on-deep .accent, .site-footer .accent { color: var(--ochre); }

/* ---- Header -------------------------------------------------------------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--u) * 3);
  padding-block: calc(var(--u) * 3);
  position: relative; z-index: 20;
}
.brand { display: inline-flex; align-items: center; gap: calc(var(--u) * 2); text-decoration: none; color: var(--ink); min-height: 44px; }
.brand img { width: 40px; height: 40px; }
.wordmark { font-family: 'Fraunces', serif; font-size: var(--s-25); font-weight: 600; letter-spacing: -0.01em; }
.nav-list { display: flex; gap: calc(var(--u) * 3); align-items: center; }
.nav-list a {
  color: var(--ink); text-decoration: none; font-size: var(--s-16);
  padding: calc(var(--u) * 1) calc(var(--u) * 1);
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav-list a[aria-current="page"] { color: var(--rust); font-weight: 600; }
.nav-list a:hover { color: var(--rust); }
.menu-btn { display: none; padding: calc(var(--u) * 1) calc(var(--u) * 2); }
/* Header fit band. Just above the 860px mobile breakpoint the desktop header is
   already in play but the viewport is still narrow. The row needs 856px of
   content box at rest (brand 189 + nav 397 + CTA 221 + two 24px header gaps)
   while the wrap only offers viewport minus 64px of padding, so it does not fit
   on one line until 921px. The nav is rigid (its min-content equals its
   max-content), so under flexbox min-width:auto the two text items are the only
   ones that can give: brand collapses to its 117px min-content and header-cta to
   its 165px min-content, and both labels wrap to a second line (wordmark 38 to
   75, CTA 56 to 80). Tightening the header's own spacing across the band buys
   back 96px, which clears the deficit at 861px with room to spare. Values only,
   scoped to .site-header, and nothing here touches the hero wash band below. */
@media (min-width: 861px) and (max-width: 940px) {
  .site-header { gap: calc(var(--u) * 2); }               /* 24px -> 16px */
  .nav-list { gap: calc(var(--u) * 1); }                  /* 24px ->  8px */
  .nav-list a { padding-inline: calc(var(--u) * 0.5); }   /*  8px ->  4px */
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: calc(var(--u) * 2) calc(var(--u) * 4);
  background: var(--rust); color: var(--ground);
  font-weight: 600; font-size: var(--s-16); text-decoration: none;
  border: none; border-radius: 2px;
  transition: transform var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--ground); transform: translateY(-2px); }
.on-deep .btn, .site-footer .btn { background: var(--ochre); color: var(--deep); }
.on-deep .btn:hover, .site-footer .btn:hover { background: var(--on-deep); color: var(--deep); }
.quiet {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--rust); font-weight: 600; text-decoration: underline;
  text-underline-offset: 4px; padding: calc(var(--u) * 1) 0;
}
.on-deep .quiet, .site-footer .quiet { color: var(--ochre); }

/* ---- Sections ------------------------------------------------------------
   One outer rhythm: every top-level section separates by a consistent 96px
   (12u) of vertical space, via uniform padding. Sections that butt against a
   filled band (.field) keep their own internal padding. */
.section { padding-block: calc(var(--u) * 12); }   /* 96px rhythm */
.section.tight { padding-block: calc(var(--u) * 8); }
main > section + section { margin-top: 0; }

/* ---- THE PARTING GATE ----------------------------------------------------
   Signature move: a block cleaves along a vertical seam and its two halves
   swing apart on a hinge to reveal media in the gap. Implemented as two
   panels translating apart on a curved path. No-JS / reduced-motion: fully
   open finished state. */
.gate { position: relative; }
.gate-seam {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.gate-half { transition: transform var(--t-gate) var(--ease); will-change: transform; }
.gate-half--l { transform-origin: left center; }
.gate-half--r { transform-origin: right center; }
/* JS drives the open state by adding .is-open; CSS holds the closed default
   only when JS is present. Without JS the gate renders open (complete). */
.js .gate:not(.is-open) .gate-half--l { transform: translateX(0); }
.js .gate:not(.is-open) .gate-half--r { transform: translateX(0); }
.js .gate.is-open .gate-half--l { transform: translateX(calc(-1 * var(--gate-open, 18%))); }
.js .gate.is-open .gate-half--r { transform: translateX(var(--gate-open, 18%)); }

/* Per-word reveal for statement copy */
.wr .w { display: inline-block; opacity: 1; }
.js .wr .w { opacity: 0.12; transform: translateY(0.15em); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.js .wr.is-in .w { opacity: 1; transform: none; }

/* Generic rise-in reveal */
.rv { opacity: 1; }
.js .rv { opacity: 0; transform: translateY(calc(var(--u) * 3)); transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }

/* ---- Hero: the open field --------------------------------------------------
   The line-converted loop sits in open whitespace with NO container — no arch,
   plate, panel, border, radius, shadow or outline. Its field is the same hex as
   the page ground (--ground #EDEFE6), so the video-to-page seam is invisible.
   mask-image feathers the edges so the drawing dissolves into the canvas rather
   than terminating at a rectangle. Full 16:9, no crop. The pause control sits on
   the page ground beside/below the animation — there is no mask to clip it. */
.hero-openfield { position: relative; padding-block: calc(var(--u) * 6) calc(var(--u) * 12); }
.hero-openfield .hero-copy { position: relative; z-index: 3; max-width: 60ch; }
.hero-openfield .hero-copy .lede { margin-top: calc(var(--u) * 4); }
.hero-cta { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 3); align-items: center; margin-top: calc(var(--u) * 5); }

/* The containerless field. Full-bleed width, 16:9, feathered on every edge. */
.hero-openfield { position: relative; }

/* The loop is the hero ground: full-bleed, no container, no border, no radius. */
.hero-field {
  position: absolute; inset: 0; z-index: 0;
  background: var(--ground);          /* identical to the clip's field hex */
  overflow: hidden;
  /* Feather the outer edges so the drawing dissolves into the page. */
  -webkit-mask-image: radial-gradient(130% 140% at 62% 50%, #000 52%, transparent 97%);
          mask-image: radial-gradient(130% 140% at 62% 50%, #000 52%, transparent 97%);
}
.hero-field .field-frame,
.hero-field video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border: 0; outline: 0; box-shadow: none; border-radius: 0;
}
/* Wash of the page ground across the copy column. Same hex as the page and as
   the clip's field, so it reads as empty space rather than as a panel. This is
   what makes ink legible over line work that reaches full black on some frames. */
/* --wash-a is the opacity of the wash plateau. At 100% the loop is completely
   hidden behind the copy. Lowering it lets the line work read through the text,
   which is the point, but backdrop contrast falls with it. 85% is the measured
   floor. Verified across 18 widths from 1920 to 320, twelve confirmed loop
   frames at each: the tightest body-text reading is the lede at 9.16:1, at
   1440px and 1280px on the horizontal wash, against the 4.5:1 AA requirement.
   The rust accent is large text at 61px so its floor is 3:1, and its tightest
   reading anywhere on the range is 3.81:1.
   Do not lower this without re-measuring across the full width range. */
.hero-field { --wash-a: 85%; }
.hero-field::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
      color-mix(in srgb, var(--ground) var(--wash-a), transparent) 0%,
      color-mix(in srgb, var(--ground) var(--wash-a), transparent) 44%,
      color-mix(in srgb, var(--ground) calc(var(--wash-a) * 0.88), transparent) 56%,
      transparent 72%);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  /* No color-mix, so no transparency. Fall back to the fully opaque wash. */
  .hero-field::after {
    background: linear-gradient(100deg, var(--ground) 0%, var(--ground) 48%, transparent 74%);
  }
}
/* Above the 860px mobile breakpoint the desktop layout runs at narrow widths
   where the copy column overshoots the horizontal gradient's 44/56/72% stops and
   the lede lands on bare line work. At the previously shipped fully opaque wash
   the lede fell to 1.03:1 at 861px and stayed under the 4.5:1 AA floor to 999px.
   The vertical wash covers the column at any width, so it is extended upward to
   1140px, where the horizontal wash has enough room to take over safely.
   Measured at --wash-a 85%, twelve confirmed loop frames per width:
     vertical wash, 320px to 1100px .......... lede 10.27:1
     horizontal wash, 1280px ................. lede  9.16:1
     horizontal wash, 1920px ................. lede  9.26:1
   The upper bound is NOT cosmetic. An earlier attempt ended this band at 1023px
   and left 1023 and 1024 failing at 4.03:1 and 4.08:1. Do not lower it. */
@media (min-width: 861px) and (max-width: 1140px) {
  .hero-field::after {
    background: linear-gradient(178deg,
        color-mix(in srgb, var(--ground) var(--wash-a), transparent) 0%,
        color-mix(in srgb, var(--ground) var(--wash-a), transparent) 62%,
        transparent 100%);
  }
}
.hero-over {
  position: relative; z-index: 2;
  min-height: 64vh;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: calc(var(--u) * 5); padding-bottom: calc(var(--u) * 10);
}
.hero-copy { max-width: 46rem; }
.hero-toggle {
  position: static; align-self: flex-start;
  margin-top: calc(var(--u) * 6);
  min-width: 44px; min-height: 44px; padding: calc(var(--u) * 1) calc(var(--u) * 2);
  background: var(--deep); color: var(--on-deep);
  border: 1px solid var(--river-bright); border-radius: 2px; font-size: var(--s-13);
}
.hero-toggle:hover { background: var(--ink); }

/* Quiet line-art divider / header — same ink-on-canvas language as the hero.
   Containerless: no border, radius or shadow; feathered into the ground. */
.lineart-divider { margin-block: calc(var(--u) * 6); }
.lineart-divider img, .lineart-header img {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.lineart-header { margin-block: calc(var(--u) * 4) calc(var(--u) * 6); }

/* ---- Sector ledger (large parting lines, NOT a drawn rule list) ---------- */
.ledger { padding-block: calc(var(--u) * 8); }
.ledger-line {
  font-family: 'Fraunces', serif; font-size: var(--s-31); font-weight: 560;
  color: var(--ink); padding-block: calc(var(--u) * 2);
  display: block;
}
.ledger-line .accent { color: var(--rust); }

/* ---- Statement (per-word reveal) ----------------------------------------- */
.statement { padding-block: calc(var(--u) * 12); }
.statement .disp { font-size: clamp(var(--s-39), 5vw, var(--s-49)); max-width: 18ch; }

/* ---- Services: sticky split (not a card row) ----------------------------- */
.split-pin { display: grid; grid-template-columns: 5fr 7fr; gap: calc(var(--u) * 8); align-items: start; }
.pin-rail { position: sticky; top: calc(var(--u) * 12); }
.offer {
  padding-block: calc(var(--u) * 6);
  border-top: 2px solid var(--river);
}
.offer:first-child { border-top: none; padding-top: 0; }
.offer .num {
  font-family: 'Fraunces', serif; font-size: var(--s-39); color: var(--river);
  display: block; line-height: 1;
}
.offer h3 { font-size: var(--s-25); margin-top: calc(var(--u) * 2); }
.offer h3 a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.offer h3 a:hover { color: var(--rust); }
.offer p { margin-top: calc(var(--u) * 2); color: var(--ink-2); }
.offer .leave { margin-top: calc(var(--u) * 3); color: var(--ink); }
.offer .leave b { color: var(--rust); }

/* ---- Method: ochre-field band with arched panels ------------------------- */
.field {
  background: var(--ochre-field); color: var(--ink);
  padding-block: calc(var(--u) * 12);
}
/* On the ochre field the ONLY passing text token is --ink (6.10:1). rust, river
   and ink-2 all fail AA on #D98A25, so every text/link/label on the field is ink. */
.field, .field .kicker, .field h1, .field h2, .field h3, .field p,
.field a, .field .lab, .field strong, .field b { color: var(--ink); }
.field a { text-decoration-color: var(--ink); }
.field a:hover { color: var(--deep); }
/* Button on the ochre field: ink plate, ground text (ground-on-ink 14.5:1). */
.field .btn { background: var(--ink); color: var(--ground); }
.field .btn:hover { background: var(--deep); color: var(--ground); }
/* A standalone panel filled with the ochre field (e.g. method step 5) follows
   the same ink-only discipline. Specificity must beat .offer p / .offer .leave b. */
.field-panel, .field-panel h1, .field-panel h2, .field-panel h3,
.field-panel p, .field-panel b, .field-panel strong, .field-panel .num,
.offer.field-panel p, .offer.field-panel .leave, .offer.field-panel .leave b { color: var(--ink); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 6); }
.step {
  background: var(--ground); border-radius: 2px;
  /* Square pane. Uniform padding on all four sides so the text block aligns
     to the same inset top, left and right in every pane. */
  padding: calc(var(--u) * 4);
  display: flex; flex-direction: column; gap: calc(var(--u) * 2);
  align-items: flex-start; text-align: left;
}
.step .n { font-family: 'Fraunces', serif; font-size: var(--s-31); color: var(--rust); line-height: 1; }
.step h3 { font-size: var(--s-20); font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
.step p { font-size: var(--s-16); color: var(--ink-2); }

/* ---- Bento grid ---------------------------------------------------------- */
.bento { margin-top: calc(var(--u) * 6); }
.bento-track {
  display: grid; gap: calc(var(--u) * 3);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: calc(var(--u) * 24);
}
.bento-cell { position: relative; }
.bento-f1 { grid-column: span 4; grid-row: span 2; }
.bento-f2 { grid-column: span 2; grid-row: span 2; }
.bento-f3 { grid-column: span 2; grid-row: span 2; }
.bento-cell:not(.bento-f1):not(.bento-f2):not(.bento-f3) { grid-column: span 2; grid-row: span 2; }
.bento-tile { margin: 0; height: 100%; display: flex; flex-direction: column; }
.bento-media { position: relative; flex: 1; overflow: hidden; border-radius: 24px 24px 0 0; min-height: 0; }
/* Signal 2 — artwork in two states on scroll: each photograph enters greyscale
   and warms to full colour as it crosses into view (exemplar: northobject.com).
   JS adds .is-in via IntersectionObserver; no-JS / reduced-motion = full colour. */
.bento-media img { width: 100%; height: 100%; object-fit: cover; }
.js .bento-media img { filter: grayscale(1) brightness(0.96); transition: filter 900ms var(--ease); }
.js .bento-media img.is-in { filter: grayscale(0) brightness(1); }
.bento-cap {
  background: var(--ground-2); color: var(--ink);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  font-size: var(--s-13); font-weight: 600; letter-spacing: 0.02em;
  border-radius: 0 0 24px 24px; min-height: calc(var(--u) * 6);
  display: flex; align-items: center;
}
.bento-cap--feature { background: var(--ochre-field); color: var(--ink); }
.bento-text .bento-tilelink {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 100%; padding: calc(var(--u) * 4);
  background: var(--river); color: var(--on-deep);
  border-radius: 24px; text-decoration: none; font-family: 'Fraunces', serif; font-size: var(--s-20);
}
.bento-text .bento-tilelink:hover { background: var(--rust); color: var(--ground); }
.bento-ui { display: none; }
.bento-btn { padding: calc(var(--u) * 1) calc(var(--u) * 3); }

/* ---- Split (about / community) ------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); align-items: start; }

/* ---- Forms --------------------------------------------------------------- */
.lab { display: block; font-size: var(--s-13); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--river); margin-bottom: calc(var(--u) * 1); }
.input {
  width: 100%; min-height: 48px; padding: calc(var(--u) * 1) calc(var(--u) * 2);
  font: inherit; font-size: var(--s-16); color: var(--ink);
  background: var(--ground); border: 2px solid var(--river); border-radius: 2px;
}
.input:focus-visible { outline-color: var(--rust); border-color: var(--rust); }
.form-row { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 2); }
.form-msg { min-height: 1.4em; margin-top: calc(var(--u) * 1); font-size: var(--s-13); color: var(--river); }
.form-msg.is-error { color: var(--rust); }

/* ---- FAQ ----------------------------------------------------------------- */
.faq details { border-top: 2px solid var(--river); padding-block: calc(var(--u) * 3); }
.faq details:last-child { border-bottom: 2px solid var(--river); }
.faq summary {
  font-family: 'Fraunces', serif; font-size: var(--s-20); font-weight: 560; line-height: 1.2;
  cursor: pointer; list-style: none; padding: calc(var(--u) * 1) 0;
  min-height: 44px; display: flex; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--rust); font-size: var(--s-25); }
.faq details[open] summary::after { content: "–"; }
.faq-body { padding-bottom: calc(var(--u) * 2); color: var(--ink-2); }

/* ---- Article ------------------------------------------------------------- */
.art-body p { margin-bottom: calc(var(--u) * 3); }
.pullquote {
  font-family: 'Fraunces', serif; font-size: var(--s-31); color: var(--rust);
  border-left: calc(var(--u) * 1) solid var(--ochre-field);
  padding-left: calc(var(--u) * 4); margin-block: calc(var(--u) * 6);
  line-height: 1.2;
}

/* ---- Note panel (booking) ------------------------------------------------ */
.note-panel {
  background: var(--ochre-field); color: var(--ink);
  border-radius: 24px; padding: calc(var(--u) * 5);
  display: flex; flex-direction: column; gap: calc(var(--u) * 3);
}
.np-head { font-family: 'Fraunces', serif; font-size: var(--s-25); line-height: 1.2; display: flex; justify-content: space-between; gap: calc(var(--u) * 3); }
.np-body { font-size: var(--s-16); }

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--deep); color: var(--on-deep);
  padding-block: calc(var(--u) * 12) calc(var(--u) * 4);
  margin-top: calc(var(--u) * 12);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr; gap: calc(var(--u) * 8); }
.site-footer h2 { color: var(--on-deep); }
.site-footer p { color: var(--on-deep-2); }
.footer-links { display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.footer-links a {
  color: var(--on-deep); text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center; padding: calc(var(--u) * 1) 0;
}
.footer-links a:hover { color: var(--ochre); }
.footer-mark { width: 72px; height: 72px; margin-top: calc(var(--u) * 8); }
.footer-meta {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 8); padding-top: calc(var(--u) * 4);
  border-top: 1px solid var(--river); font-size: var(--s-13); color: var(--on-deep-2);
}
.footer-meta .homegrown { color: var(--ochre); font-family: 'Fraunces', serif; font-size: var(--s-16); }

/* ---- Mobile -------------------------------------------------------------- */
@media (max-width: 860px) {
  .wrap { padding-inline: calc(var(--u) * 3); }
  .section { padding-block: calc(var(--u) * 8); }
  .hero-openfield { padding-block: calc(var(--u) * 4) calc(var(--u) * 8); }
  /* Full clip on mobile (not trimmed), kept above the fold and clear of the bar. */
  .hero-field::after {
    background: linear-gradient(178deg,
        color-mix(in srgb, var(--ground) var(--wash-a), transparent) 0%,
        color-mix(in srgb, var(--ground) var(--wash-a), transparent) 62%,
        transparent 100%);
  }
  .hero-over { min-height: 62vh; padding-top: calc(var(--u) * 4); }
  .statement { padding-block: calc(var(--u) * 10); }
  .field { padding-block: calc(var(--u) * 8); }
  body { padding-bottom: calc(var(--u) * 14); }  /* clear the sticky thumb CTA */
  .split-pin { grid-template-columns: 1fr; gap: calc(var(--u) * 4); }
  .pin-rail { position: static; }
  .steps { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: calc(var(--u) * 6); }
  .footer-grid { grid-template-columns: 1fr; gap: calc(var(--u) * 6); }

  /* Bento becomes a swipe + keyboard carousel (mobile-only composition) */
  .bento-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: calc(var(--u) * 3); grid-auto-rows: unset; }
  .bento-cell, .bento-f1, .bento-f2, .bento-f3 { grid-column: unset; grid-row: unset; flex: 0 0 82%; scroll-snap-align: center; }
  .bento-cell { min-height: calc(var(--u) * 56); }
  .bento-ui { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3); }
  .bento-btn { min-width: 44px; min-height: 44px; padding: calc(var(--u) * 1) calc(var(--u) * 3); background: var(--river); color: var(--on-deep); border: none; border-radius: 2px; font-weight: 600; }
  .bento-count { font-size: var(--s-13); color: var(--ink-2); }

  /* Sticky bottom thumb CTA (M3) */
  .thumb-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: calc(var(--u) * 2) calc(var(--u) * 3) calc(var(--u) * 3);
    background: linear-gradient(to top, var(--ground-live) 70%, transparent);
    display: flex; justify-content: center;
  }
  .thumb-cta .btn { width: 100%; max-width: 480px; min-height: 56px; font-size: var(--s-20); }

  /* Mobile nav */
  .menu-btn {
    display: inline-flex; align-items: center; min-height: 44px; padding: calc(var(--u) * 1) calc(var(--u) * 2);
    background: none; border: 2px solid var(--river); border-radius: 2px; color: var(--ink); font-weight: 600;
  }
  .nav-list {
    display: none; position: absolute; top: 100%; right: calc(var(--u) * 3); left: calc(var(--u) * 3);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground); border: 2px solid var(--river); border-radius: 4px; padding: calc(var(--u) * 2);
    box-shadow: 0 24px 48px -24px rgba(21,32,34,0.4);
  }
  .nav-list.is-open { display: flex; }
  .nav-list a { width: 100%; }
  .header-cta { display: none; }
}
@media (min-width: 861px) { .thumb-cta { display: none; } }

/* ---- Reduced motion: every treatment resolves to a finished static state - */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv, .js .wr .w { opacity: 1 !important; transform: none !important; }
  .js .gate .gate-half--l, .js .gate .gate-half--r { transform: none !important; }
  .js .arch .plane-back { animation: none !important; transform: none !important; }
  .js .bento-media img { filter: none !important; }  /* full colour, no transition */
  body { transition: none; }
  /* Video is never fetched under reduce — handled by JS gating + poster default. */
}