/* ============================================================================
   RUACH'S FARMS - styles.css
   Refined Desert Noir, extended into a three-world system.

   One holding company, three divisions, three visual worlds. The shell (nav,
   footer, governance, participation) stays espresso-and-sand. Each division
   section repaints itself through the --w-* token layer:

     poultry  cool graphite + heat-lamp amber + steel   (the engine)
     farming  deep field green + sage + earth           (the soil)
     retreat  midnight indigo + lamp gold + moonlight   (Beecher's Hope)

   Because custom properties inherit, a section only has to declare
   data-world="x" and everything inside it adopts that world.

   See DESIGN.md and PRODUCT.md.
   ----------------------------------------------------------------------------
    0. Fonts               6. Buttons, chips, links   12. Governance
    1. Tokens and worlds   7. Cards, media            13. Participation calc
    2. Reset and base      8. Tabs and stepper        14. Footer
    3. Typography          9. World 1, poultry        15. Subpages and prose
    4. Layout, utilities  10. World 2, farming        16. Responsive
    5. Header and nav     11. World 3, retreat        17. Motion
   ========================================================================== */

/* ============================== 0. FONTS ================================= */
/* Display: Zodiak. High stroke contrast, sharp terminals, a real italic.
   Body: Switzer. Both self-hosted woff2, no third-party font requests. */
@font-face {
  font-family: "Zodiak";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/zodiak-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Zodiak";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/zodiak-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Zodiak";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/zodiak-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/switzer-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/switzer-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/switzer-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Switzer";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/switzer-700-normal.woff2") format("woff2");
}

/* ======================= 1. TOKENS AND WORLDS ============================ */
:root {
  /* ------------------------------------------------------------------
     THE COLOUR SYSTEM. Everything is OKLCH, which is perceptually uniform:
     equal steps in L look like equal steps to the eye, so a scale built by
     moving L alone stays even instead of going muddy in the middle.

     Three rules, applied to every world:
       1. One fixed hue per world. Neutrals and accent are tuned in L and C
          only, never by picking a new hue by eye.
       2. Neutrals stay at chroma 0.010 to 0.030. That is enough to feel
          warm or cool without turning the greys dirty.
       3. Chroma above 0.10 is reserved for the accent alone, so exactly one
          thing on screen is allowed to be saturated.

     Text lightness is not chosen by taste. It is placed so the dimmest text
     still clears 4.5:1 against that world's own background, using
     Y = ((L*+16)/116)^3 to convert OKLCH lightness to relative luminance.
     ------------------------------------------------------------------ */

  /* --- brand constants, never re-themed ------------------------------- */
  --sand: oklch(0.800 0.145 70);  /* the accent, a bright warm gold */
  --sand-bright: oklch(0.880 0.130 75);
  --ember: oklch(0.650 0.150 40);
  --ember-soft: color-mix(in oklch, var(--ember) 12%, transparent);
  --sage: oklch(0.52 0.06 140);
  --ink: oklch(0.125 0.014 65);   /* the dark furniture: footer, drawer */
  --gold: oklch(0.800 0.145 70);  /* accent on dark surfaces (same now) */

  /* --- world layer, default = the SHELL. Warm dark, hue 65. ------------
     Deliberately NOT the old espresso. That sat around L 0.22 with a weak
     L 0.78 accent, which is why it read as dead soil: mid-brown ground,
     mid-brown accent, nothing separating them. This ground drops to L 0.155
     (near-black, still warm) and the accent climbs to chroma 0.145, so the
     gap between surface and accent is doing real work. */
  --w-bg: oklch(0.155 0.014 65);
  --w-bg-deep: oklch(0.125 0.014 65);
  --w-surface: oklch(0.205 0.016 65);
  --w-surface-2: oklch(0.250 0.018 65);
  --w-surface-3: oklch(0.300 0.020 65);
  --w-line: oklch(0.290 0.018 65);
  --w-line-strong: oklch(0.390 0.022 65);

  /* L 0.700 is the floor: dimmer than this fails AA on an L 0.155 ground */
  --w-text: oklch(0.965 0.010 75);
  --w-body: oklch(0.850 0.016 75);
  --w-dim: oklch(0.700 0.020 75);

  --w-accent: oklch(0.800 0.145 70);
  --w-accent-bright: oklch(0.880 0.130 75);
  --w-accent-soft: color-mix(in oklch, var(--w-accent) 12%, transparent);
  --w-accent-line: color-mix(in oklch, var(--w-accent) 28%, transparent);
  --w-accent-2: oklch(0.650 0.150 40);
  --w-ink: oklch(0.180 0.030 70); /* text sitting on an accent fill */

  --w-texture: none;
  --w-texture-size: auto;
  --w-texture-opacity: 0;

  /* --- shadow, warm, never pure black ---------------------------------- */
  --shadow-sm: 0 4px 14px -8px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, 0.8);

  /* --- radius ---------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 32px;
  --r-pill: 9999px;

  /* --- type ------------------------------------------------------------ */
  --font-display: "Zodiak", Georgia, "Times New Roman", serif;
  --font-body: "Switzer", system-ui, -apple-system, sans-serif;

  /* --- space ----------------------------------------------------------- */
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --container: 1240px;
  --container-wide: 1440px;
  --container-narrow: 720px;
  --header-h: 4.5rem;
  --section-y: clamp(4.5rem, 11vw, 9rem);

  /* --- motion, exponential ease-out only, no overshoot ------------------ */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- z-index --------------------------------------------------------- */
  --z-grain: 9999;
  --z-nav: 100;
}

/* --- WORLD 1, POULTRY. The engine. Cool graphite, heat-lamp amber, steel.
       Reads instrumented: this is the part of the business that is measured. */
[data-world="poultry"] {
  /* neutrals on hue 250 (cool steel), accent on hue 65 (heat lamp) */
  --w-bg: oklch(0.185 0.012 250);
  --w-bg-deep: oklch(0.150 0.012 250);
  --w-surface: oklch(0.235 0.014 250);
  --w-surface-2: oklch(0.280 0.016 250);
  --w-surface-3: oklch(0.330 0.018 250);
  --w-line: oklch(0.320 0.016 250);
  --w-line-strong: oklch(0.420 0.018 250);

  --w-text: oklch(0.960 0.008 250);
  --w-body: oklch(0.830 0.012 250);
  --w-dim: oklch(0.680 0.016 250);

  --w-accent: oklch(0.780 0.135 65);
  --w-accent-bright: oklch(0.860 0.120 65);
  --w-accent-soft: color-mix(in oklch, var(--w-accent) 12%, transparent);
  --w-accent-line: color-mix(in oklch, var(--w-accent) 28%, transparent);
  --w-accent-2: oklch(0.680 0.045 250);
  --w-ink: oklch(0.200 0.030 65);

  /* blueprint grid, the survey drawing under the shed */
  --w-texture: linear-gradient(oklch(0.68 0.045 250 / 0.5) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.68 0.045 250 / 0.5) 1px, transparent 1px);
  --w-texture-size: 68px 68px;
  --w-texture-opacity: 0.12;
}

/* --- WORLD 2, FARMING. The soil. Deep field green, sage, earth.
       Reads patient and organic: the part that compounds slowly. */
[data-world="farming"] {
  /* neutrals on hue 140 (field green), accent on hue 130 */
  --w-bg: oklch(0.175 0.020 140);
  --w-bg-deep: oklch(0.140 0.020 140);
  --w-surface: oklch(0.225 0.022 140);
  --w-surface-2: oklch(0.270 0.024 140);
  --w-surface-3: oklch(0.320 0.026 140);
  --w-line: oklch(0.310 0.024 140);
  --w-line-strong: oklch(0.410 0.028 140);

  --w-text: oklch(0.960 0.010 140);
  --w-body: oklch(0.840 0.020 140);
  --w-dim: oklch(0.690 0.028 140);

  --w-accent: oklch(0.820 0.130 130);
  --w-accent-bright: oklch(0.890 0.110 130);
  --w-accent-soft: color-mix(in oklch, var(--w-accent) 11%, transparent);
  --w-accent-line: color-mix(in oklch, var(--w-accent) 26%, transparent);
  --w-accent-2: oklch(0.700 0.110 60);
  --w-ink: oklch(0.180 0.030 130);

  /* crop rows seen from above, raked to one side */
  --w-texture: repeating-linear-gradient(
    102deg,
    oklch(0.82 0.13 130 / 0.55) 0 1px,
    transparent 1px 26px
  );
  --w-texture-size: auto;
  --w-texture-opacity: 0.14;
}

/* --- WORLD 3, RETREAT. Beecher's Hope. Midnight indigo, lamp gold, moonlight.
       The one place the site is allowed to feel like desire, not diligence. */
[data-world="retreat"] {
  /* neutrals on hue 275 (midnight indigo), accent on hue 80 (lamp gold) */
  --w-bg: oklch(0.150 0.022 275);
  --w-bg-deep: oklch(0.120 0.022 275);
  --w-surface: oklch(0.205 0.024 275);
  --w-surface-2: oklch(0.250 0.026 275);
  --w-surface-3: oklch(0.300 0.028 275);
  --w-line: oklch(0.285 0.026 275);
  --w-line-strong: oklch(0.385 0.030 275);

  --w-text: oklch(0.965 0.010 80);
  --w-body: oklch(0.850 0.018 80);
  --w-dim: oklch(0.690 0.024 275);

  --w-accent: oklch(0.860 0.100 80);
  --w-accent-bright: oklch(0.920 0.080 80);
  --w-accent-soft: color-mix(in oklch, var(--w-accent) 10%, transparent);
  --w-accent-line: color-mix(in oklch, var(--w-accent) 24%, transparent);
  --w-accent-2: oklch(0.640 0.060 265);
  --w-ink: oklch(0.180 0.030 80);

  --w-texture: none;
  --w-texture-opacity: 0;
}

/* ========================= 2. RESET AND BASE ============================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  /* clip, not hidden: it stops sideways scroll without making the element a
     scroll container, so position:sticky keeps working */
  overflow-x: clip;
}
body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--w-body);
  background-color: var(--w-bg);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* daylight from the top, the way paper sits under a window */
  background-image: radial-gradient(120% 60% at 50% -10%, oklch(0.235 0.024 65) 0%, oklch(0.155 0.014 65) 58%);
}
/* a page that lives entirely inside one world swaps the ground it sits on */
body.page-retreat {
  background-color: oklch(0.15 0.022 275);
  background-image: radial-gradient(120% 60% at 50% -10%, oklch(0.20 0.030 275) 0%, oklch(0.15 0.022 275) 58%);
}

/* cinematic grain, intentional and on-brand */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}
img {
  height: auto;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
input,
button {
  font: inherit;
}
::selection {
  background: var(--w-accent);
  color: var(--w-ink);
}

/* on-brand scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: oklch(0.39 0.022 65) oklch(0.155 0.014 65);
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: oklch(0.155 0.014 65);
}
::-webkit-scrollbar-thumb {
  background: oklch(0.39 0.022 65);
  border-radius: 8px;
  border: 3px solid oklch(0.155 0.014 65);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sand);
}
.page-retreat * { scrollbar-color: oklch(0.385 0.03 275) oklch(0.15 0.022 275); }
.page-retreat ::-webkit-scrollbar-track { background: oklch(0.15 0.022 275); }
.page-retreat ::-webkit-scrollbar-thumb {
  background: oklch(0.385 0.03 275);
  border-color: oklch(0.15 0.022 275);
}

:focus-visible {
  outline: 2px solid var(--w-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-nav {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 9998;
  background: var(--sand);
  color: oklch(0.985 0.006 75);
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-md);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-nav:focus {
  top: 0.75rem;
}

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

/* =========================== 3. TYPOGRAPHY =============================== */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--w-text);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* modular scale, ratio held above 1.25 between steps */
.display-0 {
  font-size: clamp(3.25rem, 11vw, 9rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.display-1 {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  line-height: 1.04;
  font-weight: 600;
}
.display-2 {
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.06;
}
.display-3 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
  line-height: 1.15;
}

.italic {
  font-style: italic;
}
.serif {
  font-family: var(--font-display);
}
.lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.2rem);
  color: var(--w-body);
  line-height: 1.8;
  max-width: 62ch;
}
.muted {
  color: var(--w-dim);
}
.text-accent {
  color: var(--w-accent);
}
.measure {
  max-width: 68ch;
}
.measure-tight {
  max-width: 48ch;
}

/* two-tone statement: the sentence starts bright and fades to context */
.statement {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--w-dim);
  max-width: 24ch;
  text-wrap: balance;
}
.statement strong {
  color: var(--w-text);
  font-weight: 600;
}

/* instrument readout numerals */
.figure {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--w-text);
}

/* the oversize phase ordinal that opens each world */
.ordinal {
  font-family: var(--font-display);
  font-size: clamp(4rem, 13vw, 11rem);
  line-height: 0.8;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--w-line-strong);
  display: block;
}

/* ====================== 4. LAYOUT AND UTILITIES ========================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide {
  max-width: var(--container-wide);
}
.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  /* the sun-glow blobs bleed past the container on purpose; clip them here so
     they can never widen the page */
  overflow-x: clip;
}
.section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.section--edge {
  border-top: 1px solid var(--w-line);
}
section[id] {
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

/* vertical rhythm helpers, these replace the old inline styles */
.stack {
  display: flex;
  flex-direction: column;
}
.stack--xs { gap: 0.4rem; }
.stack--sm { gap: 0.75rem; }
.stack--md { gap: 1.25rem; }
.stack--lg { gap: 2rem; }
.stack--xl { gap: clamp(2rem, 5vw, 3.5rem); }
.stack--center { align-items: center; text-align: center; }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.cluster--sm { gap: 0.6rem; }
.cluster--between {
  justify-content: space-between;
  align-items: flex-end;
}
.cluster--center { justify-content: center; }

.center-x { margin-inline: auto; }
.relative { position: relative; }
.text-center { text-align: center; }

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.1rem;
}
.section-head p {
  font-size: 1.0625rem;
  color: var(--w-dim);
  max-width: 60ch;
}
.section-head--center p {
  margin-inline: auto;
}

/* home hero fills the viewport */
.hero-home {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 3rem;
}

/* the global wind field, one continuous breath behind the shell.
   World sections paint over it with their own opaque background. */
#bg-flow {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}

/* warm sun glow */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  background: var(--w-accent-soft);
  pointer-events: none;
  z-index: 0;
}
.glow--hero {
  width: min(540px, 90vw);
  height: min(540px, 90vw);
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
}
.glow--right {
  width: min(480px, 80vw);
  height: min(480px, 80vw);
  top: 0;
  right: -120px;
}

.divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--w-line-strong), transparent);
  border: 0;
}

/* scroll reveal, progressive enhancement only.
   Motion always plays; there is deliberately no reduced-motion override. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease-out-quart), transform 0.9s var(--ease-out-expo);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ======================== 5. HEADER AND NAV ============================== */
/* Solid tinted bar, not frosted glass. Glassmorphism is retired brand-wide. */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: var(--z-nav);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: oklch(0.135 0.014 65);
  border-bottom-color: oklch(0.29 0.018 65);
}
/* the bar follows you into whichever world owns the screen */
html[data-active-world="poultry"] .header.scrolled {
  background: oklch(0.165 0.012 250);
  border-bottom-color: oklch(0.32 0.016 250);
}
html[data-active-world="farming"] .header.scrolled {
  background: oklch(0.155 0.020 140);
  border-bottom-color: oklch(0.31 0.024 140);
}
html[data-active-world="retreat"] .header.scrolled {
  background: oklch(0.130 0.022 275);
  border-bottom-color: oklch(0.285 0.026 275);
}
/* vision.html is a night page end to end, so its bar is dark furniture and
   everything sitting on it has to invert */
.page-retreat .nav__logo-text { color: oklch(0.965 0.010 80); }
.page-retreat .nav__link { color: oklch(0.760 0.020 275); }
.page-retreat .nav__link:hover,
.page-retreat .nav__link.active-link { color: oklch(0.965 0.010 80); }
.page-retreat .nav__link::after { background: oklch(0.86 0.10 80); }
.page-retreat .nav__btn {
  color: oklch(0.965 0.010 80);
  border-color: oklch(0.385 0.03 275);
}
.page-retreat .nav__btn:hover {
  border-color: oklch(0.86 0.10 80);
  background: color-mix(in oklch, oklch(0.86 0.10 80) 10%, transparent);
}
.page-retreat .nav__toggle,
.page-retreat .nav__close { color: oklch(0.965 0.010 80); }
.page-retreat .nav__menu {
  background: oklch(0.205 0.024 275);
  border-left-color: oklch(0.285 0.026 275);
}
.nav {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.nav__logo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  transition: opacity 0.25s var(--ease);
}
.nav__logo:hover {
  opacity: 0.82;
}
.nav__logo .logo-mark {
  height: 30px;
  width: auto;
  flex-shrink: 0;
}
.nav__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: oklch(0.965 0.010 75);
  white-space: nowrap;
}
.nav__menu {
  justify-self: center;
  display: flex;
  align-items: center;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 1.9rem;
}
.nav__link {
  position: relative;
  font-size: 0.92rem;
  color: var(--w-body);
  font-weight: 500;
  padding: 0.25rem 0;
  transition: color 0.25s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: var(--sand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-quart);
}
.nav__link:hover,
.nav__link.active-link {
  color: oklch(0.965 0.010 75);
}
.nav__link:hover::after,
.nav__link.active-link::after {
  transform: scaleX(1);
}
.nav__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid oklch(0.39 0.022 65);
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  font-weight: 600;
  color: oklch(0.965 0.010 75);
  white-space: nowrap;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.nav__btn:hover {
  border-color: var(--sand);
  background: var(--w-accent-soft);
}
.nav__toggle,
.nav__close {
  display: none;
  color: oklch(0.965 0.010 75);
}
.nav__toggle .icon,
.nav__close .icon {
  width: 1.6rem;
  height: 1.6rem;
}

/* ===================== 6. BUTTONS, CHIPS, LINKS ========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.25rem;
  padding: 0.5rem 1.6rem;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-align: center;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease), color 0.3s var(--ease);
}
.btn .icon {
  transition: transform 0.35s var(--ease-out-quart);
}
/* the lift lives on an inner wrapper so the JS magnet transform on .btn
   never fights the hover transform (this was clobbering the lift before) */
.btn--primary {
  background: var(--w-accent);
  color: var(--w-ink);
  box-shadow: 0 10px 30px -14px var(--w-accent-line);
}
.btn--primary:hover {
  background: var(--w-accent-bright);
  box-shadow: 0 16px 40px -14px var(--w-accent-line);
}
.btn--primary:hover .icon {
  transform: translateX(4px);
}
.btn--ghost {
  background: transparent;
  border: 1px solid var(--w-line-strong);
  color: var(--w-text);
}
.btn--ghost:hover {
  border-color: var(--w-accent);
  background: var(--w-accent-soft);
}
.btn--ghost:hover .icon {
  transform: translateX(3px);
}
.btn--block {
  width: 100%;
}
.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--w-text);
  transition: color 0.25s var(--ease);
}
.link-arrow span {
  border-bottom: 1px solid var(--w-accent);
  padding-bottom: 2px;
}
.link-arrow .icon {
  color: var(--w-accent);
  transition: transform 0.35s var(--ease-out-quart);
}
.link-arrow:hover {
  color: var(--w-accent);
}
.link-arrow:hover .icon {
  transform: translateX(4px);
}

/* chips are for status and tags only, never as an eyebrow above a heading */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--w-line-strong);
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--w-body);
  background: var(--w-surface);
}
.chip--accent {
  color: var(--w-accent);
  border-color: var(--w-accent-line);
  background: var(--w-accent-soft);
}
.chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--w-accent);
  box-shadow: 0 0 0 4px var(--w-accent-soft);
  flex-shrink: 0;
}
.chip__dot--live {
  background: var(--ember);
  box-shadow: 0 0 0 4px var(--ember-soft);
  animation: pulse 2.4s var(--ease) infinite;
}
[data-world="poultry"] .chip__dot--live,
[data-world="farming"] .chip__dot--live,
[data-world="retreat"] .chip__dot--live {
  background: var(--w-accent);
  box-shadow: 0 0 0 4px var(--w-accent-soft);
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* a caption line under a heading, replaces the banned pill eyebrow */
.caption-line {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--w-dim);
}
.caption-line .icon {
  color: var(--w-accent);
}

.icon {
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.icon--lg { width: 1.6em; height: 1.6em; }
.icon--xl { width: 2.2em; height: 2.2em; }

/* ========================= 7. CARDS AND MEDIA ============================ */
.card {
  position: relative;
  background: var(--w-surface);
  border: 1px solid var(--w-line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
.card--hover {
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease),
    box-shadow 0.4s var(--ease), translate 0.4s var(--ease-out-quart);
}
.card--hover:hover {
  translate: 0 -4px;
  border-color: var(--w-accent-line);
  background: var(--w-surface-2);
  box-shadow: var(--shadow-md);
}
.card--sunk {
  background: var(--w-surface-2);
}
/* a card carrying a caution, the one place ember is allowed on a surface */
.card--warn {
  border-color: var(--ember-soft);
}
.icon--ember { color: var(--ember); }
.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-md);
  background: var(--w-accent-soft);
  color: var(--w-accent);
  margin-bottom: 1.1rem;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.card--hover:hover .card__icon {
  background: var(--w-accent);
  color: var(--w-ink);
}
.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.card p {
  color: var(--w-dim);
  font-size: 0.95rem;
}
/* The reset strips every margin, so any card that is not a .stack has no
   separation between its children at all. Give those their own flow. */
.card:not(.stack) > * + * { margin-top: 1.15rem; }
.card:not(.stack) > .card__icon + * { margin-top: 0; }
.card :where(h2, h3, h4) + p { margin-top: 0.7rem; }
/* a large centred card needs more room than a grid tile */
.card--feature {
  padding: clamp(2.25rem, 5vw, 3.5rem);
}
.card--feature > * + * { margin-top: 1.75rem; }
.card--feature > .card__icon + * { margin-top: 0; }
.card--feature :where(h2, h3) + p { margin-top: 0.9rem; }
.card__inline-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.05rem;
}
.card__inline-head .icon {
  color: var(--w-accent);
}

/* bento */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }
.row-2 { grid-row: span 2; }

/* breakpoint-free card grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1.25rem;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--wide-left {
  grid-template-columns: 1.15fr 1fr;
}

.media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--w-line);
  box-shadow: var(--shadow-md);
  background: var(--w-surface-2);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.9s var(--ease-out-quart);
}
.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 10; }
.media--pano { aspect-ratio: 21 / 9; }
.media:hover img { scale: 1.04; }
.media__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 6, 4, 0.9), transparent 58%);
}
.media__caption {
  position: absolute;
  left: clamp(1rem, 3vw, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 2;
}
.media__caption h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  color: #fff;
  margin-bottom: 0.2rem;
}
.media__caption .caption-line {
  color: rgba(255, 255, 255, 0.72);
}

/* ======================= 8. TABS AND STEPPER ============================= */
.tabs {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid var(--w-line);
  border-radius: var(--r-pill);
  background: var(--w-surface);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--w-dim);
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}
.tab:hover { color: var(--w-text); }
.tab.active {
  background: var(--w-accent);
  color: var(--w-ink);
}
.tab-panel,
.stepper-panel {
  display: none;
}
.tab-panel.active,
.stepper-panel.active {
  display: block;
  animation: fadeUp 0.6s var(--ease-out-quart);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.stepper {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 2rem;
  align-items: start;
}
.stepper__nav {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.step-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  padding: 1.1rem;
  border: 1px solid var(--w-line);
  border-radius: var(--r-md);
  background: var(--w-surface);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.step-btn:hover { border-color: var(--w-line-strong); }
.step-btn.active {
  border-color: var(--w-accent-line);
  background: var(--w-surface-2);
}
.step-btn__icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-sm);
  background: var(--w-accent-soft);
  color: var(--w-accent);
  flex-shrink: 0;
}
.step-btn h4 {
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--w-text);
  letter-spacing: 0;
}
.step-btn p {
  font-size: 0.82rem;
  color: var(--w-dim);
  line-height: 1.5;
}
.stepper__panels {
  border: 1px solid var(--w-line);
  border-radius: var(--r-lg);
  background: var(--w-surface);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.stepper__panels h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.6rem);
  margin-bottom: 1rem;
}
.stepper__panels p {
  color: var(--w-body);
  line-height: 1.85;
  margin-bottom: 1.5rem;
  max-width: 62ch;
}

/* ==================== THE WORLD SHELL (shared chrome) ==================== */
/* Every division section is a self-contained world: opaque background, own
   texture, own edge treatment. This is what makes the site read as three. */
.world {
  --seam: clamp(72px, 9vw, 150px);
  position: relative;
  isolation: isolate;
  /* clip sideways only, so the top seam bleed can escape upward */
  overflow-x: clip;
  color: var(--w-body);
  padding-block: clamp(5rem, 12vw, 10rem);
  /* the world's own ground, fading out over the last --seam so whatever sits
     behind the page shows through at the bottom edge */
  background: linear-gradient(
    to bottom,
    var(--w-bg) 0,
    var(--w-bg) calc(100% - var(--seam)),
    transparent 100%
  );
}
.world::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--w-texture);
  background-size: var(--w-texture-size);
  opacity: var(--w-texture-opacity);
  pointer-events: none;
}

/* SEAMS. The earlier attempt had each world fade *to its neighbour's colour*,
   which it cannot know: fading the retreat's top edge to the shell washed a
   band across mid-page because farming sits above it, not the shell.

   This inverts the problem. A world fades ITSELF in over whatever is above it,
   using a bleed that overhangs its own top edge. Because the world comes later
   in the DOM it paints over the previous section, so the handover works no
   matter which section that is, and no world needs to know its neighbour. */
.world::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--seam));
  height: var(--seam);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--w-bg));
}
/* Two worlds back to back hand straight over to each other, so the first one
   keeps a flat ground rather than dipping through the shell colour between. */
.world:has(+ .world) {
  background: var(--w-bg);
}
.world__inner {
  position: relative;
  z-index: 1;
}
/* rhythm inside a world: blocks breathe apart without per-element margins */
.world .section-head {
  margin-top: clamp(3.5rem, 8vw, 6rem);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.world__inner > .section-head:first-child,
.world__inner > .world__head:first-child { margin-top: 0; }
.world .rail,
.world .crops,
.world .loop,
.world .zones,
.world .field-bento,
.world .ops {
  margin-top: 0;
}
.world .rail { margin-top: clamp(2.5rem, 6vw, 4rem); }
.world .windline { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* hero fact strip sits well clear of the buttons above it */
.hero-home .statbar {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  max-width: 920px;
  margin-inline: auto;
}
.hero-copy { max-width: 56rem; }

/* The world masthead. The division name IS the headline: no uppercase kicker
   label sits above it, per the house rule against eyebrows. The outlined
   numeral beside it is a chapter figure, the same device the origin memo uses. */
.world__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.world__title {
  font-size: clamp(2.25rem, 5.2vw, 4rem);
  line-height: 1.02;
  margin-bottom: 1.1rem;
}
.world__intro {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--w-body);
  max-width: 58ch;
  line-height: 1.8;
}

/* horizontal fact rail, hairline separated, no card boxes */
.rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1px;
  background: var(--w-line);
  border-block: 1px solid var(--w-line);
}
.rail__cell {
  background: var(--w-bg);
  padding: 1.4rem clamp(1rem, 2vw, 1.5rem);
}
.rail__label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--w-dim);
  margin-bottom: 0.4rem;
}
.rail__value {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 600;
  color: var(--w-text);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

/* ===================== 9. WORLD 1, POULTRY ============================== */
/* Layout language: an operations console. Instrumented, measured, cool. */

/* Console layout: the shed photograph on one side, the operating panel on the
   other. The photograph is composed with a quiet bottom third so the instrument
   readout can sit on it without covering the building. */
.ops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
  /* start, not stretch: a stretched row height feeds back through
     aspect-ratio and drives the width, so the photo spills over the panel */
  align-items: start;
}
.ops__media {
  position: relative;
  min-width: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--w-line);
  aspect-ratio: 4 / 3;
  background: var(--w-surface-2);
}
.ops__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
}
.ops__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 10, 14, 0.92), rgba(8, 10, 14, 0.1) 55%);
}
.ops__readout {
  position: absolute;
  left: clamp(1rem, 2.5vw, 1.75rem);
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 1px;
  background: rgba(127, 151, 173, 0.25);
  border: 1px solid rgba(127, 151, 173, 0.25);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ops__readout-cell {
  background: rgba(14, 16, 19, 0.88);
  padding: 0.85rem 1rem;
}
.ops__readout-label {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--w-accent-2);
  margin-bottom: 0.2rem;
}
.ops__readout-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--w-text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.ops__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--w-line);
  border-radius: var(--r-2xl);
  background: var(--w-surface);
}
.ops__panel-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.ops__panel h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

/* the cycle bar: grow window against sterilisation window, to scale */
.cycle {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.cycle__bar {
  display: flex;
  height: 2.75rem;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--w-line-strong);
}
.cycle__seg {
  display: flex;
  align-items: center;
  padding-inline: 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
}
.cycle__seg--grow {
  flex: 35;
  background: var(--w-accent);
  color: var(--w-ink);
}
.cycle__seg--rest {
  flex: 15;
  background: var(--w-surface-3);
  color: var(--w-body);
}
.cycle__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.82rem;
  color: var(--w-dim);
}

/* three-zone biosecurity schematic */
.zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 1rem;
}
.zone {
  position: relative;
  padding: 1.25rem;
  border: 1px solid var(--w-line);
  border-radius: var(--r-md);
  background: var(--w-surface);
  overflow: hidden;
}
.zone__tag {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--w-accent-line);
  margin-bottom: 0.5rem;
}
.zone h4 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.zone p {
  font-size: 0.88rem;
  color: var(--w-dim);
  line-height: 1.6;
}
.zone--clean { border-color: var(--w-accent-line); }

.windline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--w-dim);
  margin-top: 1rem;
}
.windline__track {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--w-accent-2), transparent);
  position: relative;
  overflow: hidden;
}
.windline__track::after {
  content: "";
  position: absolute;
  top: -2px;
  left: -30%;
  width: 30%;
  height: 5px;
  border-radius: var(--r-pill);
  background: linear-gradient(to right, transparent, var(--w-accent), transparent);
  animation: windrun 5.5s var(--ease) infinite;
}
@keyframes windrun {
  to { left: 110%; }
}

/* ====================== 10. WORLD 2, FARMING ============================ */
/* Layout language: a bento of field and note. Patient, organic, unequal. */

.field-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}
.field-tile {
  position: relative;
  isolation: isolate;
  border-radius: var(--r-xl);
  border: 1px solid var(--w-line);
  background: var(--w-surface);
  padding: clamp(1.35rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  min-height: 200px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.field-tile:hover {
  border-color: var(--w-accent-line);
  background: var(--w-surface-2);
}
.field-tile h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
}
.field-tile p {
  font-size: 0.92rem;
  color: var(--w-dim);
  line-height: 1.65;
  max-width: 44ch;
}
.field-tile--photo {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--w-line);
  min-height: clamp(240px, 30vw, 380px);
}
.field-tile--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1s var(--ease-out-quart);
}
.field-tile--photo:hover img { scale: 1.05; }
.field-tile--photo .field-tile__body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: clamp(1.35rem, 2.5vw, 2rem);
}
/* scrim is a ::before so the shared ::after warmth glow cannot clobber it */
.field-tile--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(6, 9, 3, 0.92), transparent 60%);
}
.field-tile--statement {
  justify-content: center;
  background: transparent;
  border: none;
  padding-inline: 0;
}
/* .field-tile p is more specific than .statement, so restate the display size
   here or the two-tone statement silently collapses to body copy */
.field-tile .statement {
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  line-height: 1.3;
  max-width: 22ch;
}

/* the closed loop, litter to soil to crop and back */
.loop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 1px;
  background: var(--w-line);
  border: 1px solid var(--w-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.loop__step {
  background: var(--w-surface);
  padding: 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  transition: background 0.4s var(--ease);
}
.loop__step:hover { background: var(--w-surface-2); }
.loop__step .icon {
  color: var(--w-accent);
  width: 1.5rem;
  height: 1.5rem;
}
.loop__step h4 {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}
.loop__step p {
  font-size: 0.86rem;
  color: var(--w-dim);
  line-height: 1.6;
}
.loop__index {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--w-line-strong);
  font-variant-numeric: tabular-nums;
}

/* crop rhythm strip, with the names actually used on the ground */
.crops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px;
  background: var(--w-line);
  border-block: 1px solid var(--w-line);
}
.crop {
  background: var(--w-bg);
  padding: 1.5rem 1.25rem;
  transition: background 0.4s var(--ease);
}
.crop:hover { background: var(--w-surface); }
.crop__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--w-text);
  display: block;
  line-height: 1.2;
}
.crop__local {
  display: block;
  font-size: 1rem;
  color: var(--w-accent);
  margin-top: 0.25rem;
  line-height: 1.5;
}
.crop__note {
  display: block;
  font-size: 0.8rem;
  color: var(--w-dim);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ====================== 11. WORLD 3, RETREAT ============================ */
/* Layout language: boutique hospitality. This is where the site stops being
   an investor document and starts being a place you want to go. */

/* Plain retreat sections inherit every .world default. Only the opening
   "night" section carries the sky, the horizon glow, and the flush top. */
.retreat--night {
  padding-top: 0;
}
/* the sky sits above the horizon gradient but below all content */
.retreat__sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
/* the horizon: a warm ground-glow under a cold night gradient */
.retreat--night::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 1;
  /* the night glow is centred below the top edge on purpose: if it peaks at 0%
     the section starts lighter than --w-bg, and the seam bleed above it fades
     to the wrong colour, which puts a visible step back in */
  background:
    radial-gradient(80% 50% at 50% 100%, rgba(240, 203, 139, 0.10) 0%, transparent 62%),
    radial-gradient(120% 80% at 50% 22%, oklch(0.21 0.035 275) 0%, var(--w-bg) 62%);
}

.retreat__stage {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(6rem, 14vw, 11rem);
}

.retreat__title {
  font-size: clamp(3rem, 13vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--w-text);
  font-weight: 600;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.retreat__title em {
  display: block;
  font-style: italic;
  color: var(--w-accent);
}
.retreat__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--w-body);
  max-width: 46ch;
  line-height: 1.8;
}

/* the lamp: a warm window glow that breathes, the only living light out here */
.lamp {
  position: absolute;
  right: 6%;
  top: 8%;
  width: min(420px, 70vw);
  height: min(420px, 70vw);
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(240, 203, 139, 0.34), transparent 68%);
  pointer-events: none;
  z-index: 0;
  animation: breathe 9s var(--ease) infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.55; scale: 1; }
  50% { opacity: 0.95; scale: 1.06; }
}

/* full-bleed landscape with an overlapping solid panel, RANTY-style */
.retreat__frame {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--w-line);
  aspect-ratio: 21 / 9;
  background: var(--w-surface-2);
}
.retreat__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.retreat__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 6, 12, 0.85), transparent 55%),
    linear-gradient(to right, rgba(5, 6, 12, 0.6), transparent 45%);
}

.retreat__panel {
  position: relative;
  z-index: 3;
  margin-top: -6rem;
  margin-left: clamp(1rem, 5vw, 4rem);
  max-width: min(480px, 88vw);
  background: var(--w-surface);
  border: 1px solid var(--w-line-strong);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
}
.retreat__panel h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-bottom: 0.75rem;
}
.retreat__panel p {
  color: var(--w-body);
  font-size: 0.98rem;
  line-height: 1.8;
}

/* the stay: what the place actually offers, listed not carded */
.stay {
  display: grid;
  gap: 0;
}
.stay__row {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.35rem, 3vw, 2rem);
  border-top: 1px solid var(--w-line);
  transition: background 0.5s var(--ease);
}
.stay__row:last-child { border-bottom: 1px solid var(--w-line); }
.stay__row:hover { background: rgba(240, 203, 139, 0.03); }
.stay__index {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--w-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}
.stay__name {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.65rem);
  font-weight: 600;
  color: var(--w-text);
  line-height: 1.2;
}
.stay__note {
  color: var(--w-dim);
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 56ch;
}

/* ========================= 12. GOVERNANCE =============================== */
.profile-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.profile {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--w-line);
  aspect-ratio: 3 / 4;
  background: var(--w-surface-2);
  transition: border-color 0.45s var(--ease), translate 0.45s var(--ease-out-quart);
}
.profile:hover {
  translate: 0 -5px;
  border-color: var(--w-accent-line);
}
.profile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 9, 6, 0.96) 18%, rgba(12, 9, 6, 0.35) 62%, transparent);
}
.profile__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 1.35rem 1.5rem;
}
.profile__body h3 {
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 0.2rem;
}
/* tracked tight enough that the longest role still holds one line */
.profile__role {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.4;
  color: var(--w-accent);
  margin-bottom: 0.75rem;
}
.profile__body p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
}
.profile__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.75rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}

/* hero fact strip */
.statbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1px;
  background: var(--w-line);
  border: 1px solid var(--w-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.statbar__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.6rem;
  background: var(--w-surface);
  text-align: left;
  transition: background 0.35s var(--ease);
}
.statbar__item:hover { background: var(--w-surface-2); }
.statbar__ic {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-sm);
  background: var(--w-accent-soft);
  color: var(--w-accent);
  flex-shrink: 0;
}
.statbar__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.statbar__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--w-dim);
  order: 2;
}
.statbar__value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--w-text);
  font-weight: 600;
  order: 1;
}
.statbar__value a { color: inherit; }
.statbar__value a:hover { color: var(--w-accent); }

/* risk cards */
.risk-card {
  position: relative;
  background: var(--w-surface);
  border: 1px solid var(--w-line);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  transition: border-color 0.4s var(--ease), translate 0.4s var(--ease-out-quart);
}
.risk-card:hover {
  border-color: var(--w-accent-line);
  translate: 0 -3px;
}
.risk-card__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
  color: var(--w-text);
}
.risk-card__head h4 { font-size: 1.1rem; }
.risk-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--w-dim);
  margin-bottom: 0.2rem;
}
.risk-threat {
  color: var(--w-body);
  margin-bottom: 0.9rem;
}
.risk-mit {
  color: var(--w-body);
  font-size: 0.92rem;
}

.statrow {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--w-line);
  font-size: 0.92rem;
}
.statrow span:first-child { color: var(--w-dim); }
.statrow span:last-child {
  color: var(--w-text);
  font-weight: 500;
  text-align: right;
}

/* ===================== 13. PARTICIPATION CALCULATOR ===================== */
.calc {
  position: relative;
  border: 1px solid var(--w-line);
  border-radius: var(--r-xl);
  background: var(--w-surface);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.calc__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
.calc__controls { display: flex; flex-direction: column; gap: 1.6rem; }
.calc__slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.calc__slider-head label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--w-dim);
}
.calc__amount {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--w-accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
input[type="range"].slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--w-surface-3);
  outline: none;
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--w-accent);
  border: 4px solid var(--w-surface);
  box-shadow: 0 0 0 1px var(--w-accent);
  cursor: pointer;
}
input[type="range"].slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--w-accent);
  border: 4px solid var(--w-surface);
  cursor: pointer;
}
.calc__range {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--w-dim);
  margin-top: 0.5rem;
}
.seg {
  display: grid;
  grid-auto-flow: column;
  gap: 0.4rem;
  padding: 0.35rem;
  border: 1px solid var(--w-line);
  border-radius: var(--r-md);
  background: var(--w-surface-2);
}
.seg button {
  padding: 0.7rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--w-dim);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.seg button.active {
  background: var(--w-accent);
  color: var(--w-ink);
}
.field-label {
  display: block;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--w-dim);
  margin-bottom: 0.6rem;
}
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
  gap: 0.6rem;
}
.tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.9rem 0.5rem;
  border: 1px solid var(--w-line);
  border-radius: var(--r-md);
  background: var(--w-surface-2);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.tier:hover { border-color: var(--w-line-strong); }
.tier.active {
  border-color: var(--w-accent);
  background: var(--w-accent-soft);
}
.tier__rate {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--w-text);
  font-variant-numeric: tabular-nums;
}
.tier.active .tier__rate { color: var(--w-accent); }
.tier__name {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--w-dim);
  text-align: center;
}
.calc__summary {
  border-top: 1px solid var(--w-line);
  padding-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.calc__summary-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
}
.calc__summary-row strong {
  color: var(--w-text);
  font-variant-numeric: tabular-nums;
}
.calc__summary-row--accent strong {
  color: var(--w-accent);
  font-size: 1.1rem;
}
.calc__right { display: flex; flex-direction: column; gap: 1.25rem; }
.result-card {
  background: var(--w-surface-2);
  border: 1px solid var(--w-accent-line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
}
.result-card__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--w-accent);
}
.result-card__value {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3rem);
  color: var(--w-text);
  font-weight: 600;
  margin: 0.3rem 0 0.5rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.result-card__note {
  font-size: 0.78rem;
  color: var(--w-dim);
}
.result-card__list {
  margin-top: 1.25rem;
  border-top: 1px solid var(--w-line);
}

/* ============================ 14. FOOTER ================================ */
.footer {
  position: relative;
  border-top: 1px solid oklch(0.320 0.020 60);
  background: oklch(0.180 0.018 60);
  padding-top: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
/* The giant RUACH watermark that used to live here is gone. It read as an
   unplaced decoration, and `.footer > *` below out-specified its own
   position:absolute, dropping a nowrap 15rem word into normal flow and giving
   every page horizontal scroll. */
.footer > * { position: relative; z-index: 1; }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.footer__logo .logo-mark { height: 28px; width: auto; }
.footer__logo span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: oklch(0.960 0.010 75);
}
.footer__desc {
  color: oklch(0.680 0.016 75);
  max-width: 32ch;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.footer__connect {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: oklch(0.960 0.010 75);
  font-weight: 600;
  font-size: 0.92rem;
}
.footer__connect:hover { color: var(--gold); }
.footer__socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}
.footer__social {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid oklch(0.320 0.020 60);
  border-radius: var(--r-md);
  color: oklch(0.830 0.014 75);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.footer__social:hover { border-color: var(--gold); color: var(--gold); }
.footer__social.disabled { opacity: 0.4; pointer-events: none; }
.footer__title {
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer__col p { color: oklch(0.830 0.014 75); font-size: 0.95rem; }
.footer__col li { margin-bottom: 0.5rem; }
.footer__col a { color: oklch(0.830 0.014 75); font-size: 0.95rem; }
.footer__col a:hover { color: var(--gold); }
.footer__site-id {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  color: oklch(0.680 0.016 75);
}
.footer__site-id code {
  font-family: ui-monospace, monospace;
  color: oklch(0.830 0.014 75);
}
.footer__status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.footer__status-text { display: flex; flex-direction: column; }
.footer__status-text small {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: oklch(0.680 0.016 75);
}
.footer__status-text > span { color: oklch(0.960 0.010 75); font-weight: 600; }
.footer__legal {
  border-top: 1px solid oklch(0.320 0.020 60);
  padding-block: 1.5rem 2.5rem;
}
.footer__legal--flush { border-top: none; }
.legal-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  border: 1px solid oklch(0.320 0.020 60);
  border-radius: var(--r-md);
  background: oklch(0.235 0.020 60);
  margin-bottom: 1.5rem;
}
.legal-note .icon { color: var(--gold); margin-top: 3px; }
.legal-note p { font-size: 0.82rem; color: oklch(0.680 0.016 75); line-height: 1.7; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  color: oklch(0.680 0.016 75);
}
.footer__links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer__links a:hover { color: var(--gold); }

/* ==================== 15. SUBPAGES AND PROSE ============================ */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 9vw, 7rem));
  padding-bottom: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.page-hero h1 {
  font-size: clamp(2.5rem, 6.5vw, 4.75rem);
  margin-bottom: 1.25rem;
  line-height: 1.02;
}
.page-hero p {
  max-width: 46rem;
  color: var(--w-dim);
  font-size: clamp(1.0625rem, 1.3vw, 1.15rem);
  line-height: 1.8;
}
.page-hero--center { text-align: center; }
.page-hero--center p { margin-inline: auto; }
/* legal pages: the prose that follows carries its own top space */
.page-hero--flush { padding-bottom: clamp(1rem, 2vw, 1.5rem); }
/* an error page has nothing below it, so the hero takes the room */
.page-hero--fill {
  min-height: 72vh;
  display: flex;
  align-items: center;
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 16vw, 9rem);
  line-height: 1;
  font-weight: 600;
  color: var(--w-accent);
}
.page-hero__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  color: var(--w-body);
  line-height: 1.55;
  max-width: 42ch;
}
.page-hero--center .page-hero__quote { margin-inline: auto; }

.memo {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.memo__chapter { margin-bottom: clamp(3rem, 7vw, 4.5rem); }
.memo__chapter-title {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  margin-bottom: 1.5rem;
}
.memo__chapter-title .roman {
  color: var(--w-accent);
  font-style: italic;
  flex-shrink: 0;
}
.memo__chapter-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--w-line-strong), transparent);
}
.memo__chapter p {
  font-size: clamp(1.05rem, 1.3vw, 1.15rem);
  line-height: 1.95;
  color: var(--w-body);
  margin-bottom: 1.4rem;
  max-width: 68ch;
}
.memo__chapter p strong { color: var(--w-text); }
.memo__quote {
  margin: clamp(2rem, 5vw, 3rem) 0;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 1px solid var(--w-accent-line);
}
.memo__quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.55;
  color: var(--w-text);
}

.prose {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose h2 {
  font-size: 1.5rem;
  margin: 2.5rem 0 1rem;
}
.prose p,
.prose li {
  color: var(--w-body);
  margin-bottom: 1rem;
  line-height: 1.85;
}
.prose ul { padding-left: 1.25rem; list-style: disc; }
.prose a { color: var(--w-accent); border-bottom: 1px solid var(--w-accent-line); }

/* ========================== 16. RESPONSIVE ============================== */
/* The layout is fluid by default (clamp + auto-fit), so these breakpoints
   only handle genuine structural changes, not cosmetic patching. */

@media (max-width: 1100px) {
  .split,
  .split--wide-left,
  .ops,
  .calc__grid {
    grid-template-columns: 1fr;
  }
  .stepper { grid-template-columns: 1fr; }
  .col-3, .col-4, .col-5, .col-7, .col-8, .col-9 { grid-column: span 6; }
  .retreat__panel {
    margin-top: -3.5rem;
    margin-left: 0;
    max-width: 100%;
  }
  .retreat__frame { aspect-ratio: 16 / 9; }
}

@media (max-width: 860px) {
  :root { --header-h: 4rem; }

  .nav__menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(84vw, 340px);
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    background: oklch(0.205 0.016 65);
    border-left: 1px solid oklch(0.29 0.018 65);
    box-shadow: var(--shadow-lg);
    translate: 100% 0;
    transition: translate 0.45s var(--ease-out-expo);
    padding: 2rem;
  }
  .nav__menu.show { translate: 0 0; }
  .nav__list { flex-direction: column; gap: 1.75rem; font-size: 1.1rem; }
  .nav__close {
    display: block;
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
  }
  .nav__toggle { display: block; }
  /* the drawer is position:fixed here, so the centre grid track collapses to 0
     and the two 1fr tracks split evenly, which crushes the wordmark into the
     Invest button. Flex lets the logo take the width it actually needs. */
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav__logo { min-width: 0; }
  .nav__logo-text {
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .bento,
  .field-bento { grid-template-columns: 1fr; gap: 1rem; }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 {
    grid-column: span 1;
  }
  .row-2 { grid-row: span 1; }

  .world__head {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .ordinal { font-size: clamp(3.5rem, 18vw, 6rem); }

  .stay__row {
    grid-template-columns: 3rem 1fr;
    gap: 0.5rem 1rem;
  }
  .stay__note { grid-column: 2; }

  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .cluster--between { align-items: flex-start; flex-direction: column; }
}

/* small handsets: shrink the bar's furniture so the wordmark never ellipsises */
@media (max-width: 400px) {
  .nav__logo { gap: 0.45rem; }
  .nav__logo .logo-mark { height: 26px; }
  .nav__logo-text { font-size: 0.88rem; letter-spacing: 0.02em; }
  .nav__actions { gap: 0.6rem; }
  .nav__btn { padding: 0.5rem 0.85rem; font-size: 0.82rem; }
}
/* below this the wordmark cannot fit whole, so drop it deliberately rather
   than let it truncate to "RUACH'S FAR..." */
@media (max-width: 344px) {
  .nav__logo-text { display: none; }
}

/* ---- phones: density and two genuine breakages ---------------------------
   1. The bento stacked one card per row, so "Strategic advantage" became five
      full-height cards in a column. On a phone that is pure doomscroll. The
      cards flip to icon-beside-text, which roughly halves each one.
   2. The tab strip scrolled horizontally and clipped mid-word, which reads as
      broken rather than scrollable. It wraps instead.
   3. The retreat stage held min-height:100svh and the panel overlapped the
      frame by -3.5rem. On a tall phone that left a dead gap above the photo
      and then buried most of it under the panel. */
@media (max-width: 640px) {
  :root { --section-y: clamp(3.25rem, 12vw, 9rem); }

  /* 1. compact horizontal cards inside the bento */
  .bento .card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    row-gap: 0.3rem;
    align-items: start;
    padding: 1.25rem;
  }
  .bento .card > * + * { margin-top: 0; }
  .bento .card__icon {
    grid-row: 1 / span 2;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 0;
  }
  .bento .card h3 { font-size: 1.05rem; margin-bottom: 0; }
  .bento .card p { font-size: 0.9rem; }

  /* 1b. plain field tiles anchor their text to the bottom, which is right when
     they sit beside a tall photo but leaves a dead band above the heading once
     they are full width and short. Photo tiles keep the behaviour. */
  .field-tile:not(.field-tile--photo) {
    min-height: 0;
    justify-content: flex-start;
  }

  /* 2. tabs wrap rather than clip */
  .tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    overflow: visible;
    border-radius: var(--r-lg);
  }
  .tab { flex: 1 1 auto; text-align: center; }

  /* 3. the retreat stage stops reserving a whole viewport */
  .retreat__stage {
    min-height: 0;
    padding-block: clamp(5rem, 20vw, 8rem);
  }
  .retreat__frame { aspect-ratio: 4 / 3; }
  .retreat__panel { margin-top: 1.25rem; }

  /* 4. leadership had the same problem: four 3/4 portraits stacked is about
     1900px of scroll. The caption comes out from under the photo and sits
     beside it, which drops each card to roughly a third of its height. */
  .profile {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 108px 1fr;
    background: var(--w-surface);
  }
  .profile:hover { translate: none; }
  .profile img { height: 100%; }
  .profile__scrim { display: none; }
  .profile__body {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1.1rem;
  }
  .profile__body h3 { color: var(--w-text); font-size: 1.05rem; }
  .profile__role { margin-bottom: 0.5rem; }
  .profile__body p { color: var(--w-dim); font-size: 0.85rem; }
  .profile__tag { color: var(--w-dim); margin-top: 0.6rem; }
}

@media (max-width: 520px) {
  .btn { width: 100%; }
  .cluster > .btn { flex: 1 1 100%; }
  /* the readout drops below the photo instead of sitting on it. The media has
     to stop being a fixed-height overflow:hidden box or the readout is clipped. */
  .ops__media {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
  }
  .ops__media img { aspect-ratio: 4 / 3; }
  .ops__media img {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .ops__media::after { display: none; }
  /* three explicit columns so a 3-item readout never leaves an empty cell */
  .ops__readout {
    position: static;
    grid-template-columns: repeat(3, 1fr);
    border: 0;
    border-top: 1px solid var(--w-line);
    border-radius: 0;
  }
  .ops__readout-cell {
    background: var(--w-surface);
    padding: 0.75rem 0.7rem;
  }
  .ops__readout-value { font-size: 0.95rem; }
  .cycle__seg { font-size: 0.7rem; padding-inline: 0.5rem; }
  .memo__chapter-title { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .memo__chapter-title::after { display: none; }
}

/* ============================ 17. MOTION ================================ */
/* Motion is always on. There is deliberately no prefers-reduced-motion block
   here: the brand's house rules require animation to play regardless. */

/* cursor-following warmth on cards, JS sets --mx/--my */
.card::after,
.risk-card::after,
.field-tile:not(.field-tile--photo)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    var(--w-accent-soft),
    transparent 62%
  );
}
.card:hover::after,
.risk-card:hover::after,
.field-tile:not(.field-tile--photo):hover::after { opacity: 1; }
.card > *,
.risk-card > * { position: relative; z-index: 1; }

/* the magnet wrapper: JS translates this, so it never fights a hover state */
.magnet {
  display: inline-flex;
  transition: translate 0.5s var(--ease-out-quart);
  will-change: translate;
}

/* click spark */
.spark {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sand);
  pointer-events: none;
  z-index: 9998;
  opacity: 0.9;
  will-change: transform, opacity;
}

/* parallax hooks, JS sets --py */
.parallax {
  translate: 0 var(--py, 0px);
  will-change: translate;
}