/* ============================================================
   jade owls — one-screen image-first variant (self-contained)
   Full-viewport slide decks, WW-tempo motion (600–800ms fades),
   spaced small-caps chrome, imagery-first restraint.
   The main site stylesheet (promoted from the one-screen variant 2026-07-26).
   ============================================================ */

:root {
  --sand: #F7F3EC;
  --sand-deep: #EFE7D9;
  --ink: #1A1F1D;
  --ink-soft: #4A5550;
  --jade: #3A5320;
  --jade-night: #1E2C11;
  --jade-bright: #7BA340;
  --sandstone: #C9A876;
  --line: #E2DACB;
  --white: #FFFFFF;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Newsreader", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ww-speed: 700ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }   /* the deck scrolls, not the page */
body {
  font-family: var(--font-body);
  font-size: 1.0425rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.14; margin: 0; text-wrap: balance; }

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

/* Cross-page fade (WW page transitions). Progressive; fallback below. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 480ms; }
@keyframes ww-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: ww-in 600ms var(--ease); }

/* ---------- Chrome: spaced small-caps ---------- */
.ww-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem clamp(1.2rem, 3vw, 2.6rem);
  pointer-events: none;
}
.ww-header > * { pointer-events: auto; }
.ww-brand { flex: none; }                 /* never let flex squeeze the logo (was skewing it) */
/* green logo everywhere; a soft sand chip makes it pop over media slides,
   and fades away on light slides where green already reads */
.ww-brand img {
  height: 3rem; width: auto;
  background: rgba(247, 243, 236, 0.9); border-radius: 10px; padding: 0.3rem 0.55rem;
  box-shadow: 0 4px 18px rgba(20, 28, 14, 0.25);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 300ms var(--ease), box-shadow 300ms var(--ease);
}
.ww-header.on-light .ww-brand img { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ww-brand { cursor: pointer; display: inline-flex; align-items: center; }
/* hamburger — reads as a menu without needing to be learned */
.brand-caret {
  position: relative; width: 19px; height: 2px; margin-left: 0.6rem;
  background: var(--sand); border-radius: 2px;
  filter: drop-shadow(0 1px 4px rgba(20, 28, 14, 0.5));
  transition: background-color 200ms var(--ease);
}
.brand-caret::before, .brand-caret::after {
  content: ""; position: absolute; left: 0; width: 19px; height: 2px;
  background: inherit; border-radius: 2px;
  transition: transform 250ms var(--ease), top 200ms var(--ease), background-color 200ms var(--ease);
}
.brand-caret::before { top: -6px; }
.brand-caret::after  { top: 6px; }
.ww-header.on-light .brand-caret, .ww-header.on-light .brand-caret::before,
.ww-header.on-light .brand-caret::after { background: var(--jade-night); filter: none; }
.ww-brand[aria-expanded="true"] .brand-caret { background: transparent; filter: none; }
.ww-brand[aria-expanded="true"] .brand-caret::before { top: 0; transform: rotate(45deg); background: var(--sand); }
.ww-brand[aria-expanded="true"] .brand-caret::after  { top: 0; transform: rotate(-45deg); background: var(--sand); }
.ww-header.on-light .ww-brand[aria-expanded="true"] .brand-caret::before,
.ww-header.on-light .ww-brand[aria-expanded="true"] .brand-caret::after { background: var(--jade-night); }
.ww-brand img { margin-right: -0.15rem; }
.brand-menu {
  position: absolute; top: calc(100% + 0.4rem); left: clamp(1.2rem, 3vw, 2.6rem); z-index: 60;
  min-width: 12.5rem; background: var(--sand); border: 1px solid var(--line);
  border-radius: 12px; padding: 0.45rem; box-shadow: 0 4px 12px rgba(26, 31, 29, 0.10), 0 18px 40px rgba(26, 31, 29, 0.18);
}
.brand-menu a {
  display: block; padding: 0.55rem 0.9rem; border-radius: 8px;
  color: var(--jade-night); text-decoration: none; font-size: 0.85rem; font-weight: 600;
}
.brand-menu a:hover { background: var(--sand-deep); }
.ww-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.6vw, 2.4rem); flex-wrap: nowrap; }
.ww-nav a {
  color: var(--sand); text-decoration: none; white-space: nowrap;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(20, 28, 14, 0.45);
}
.ww-nav a:hover, .ww-nav a[aria-current="page"] { border-bottom: 1px solid rgba(247, 243, 236, 0.7); }
.ww-nav .nav-login { border: 1px solid rgba(247, 243, 236, 0.6); border-radius: 999px; padding: 0.5rem 1.1rem; }
.ww-nav .nav-login:hover { border-bottom: 1px solid rgba(247, 243, 236, 0.6); }
.login-short { display: none; }
@media (max-width: 22em) {   /* very narrow: shrink NAV, never the logo */
  .ww-nav { gap: 0.45rem; }
  .ww-nav a { font-size: 0.58rem; letter-spacing: 0.08em; }
  .ww-nav .nav-login { padding: 0.3rem 0.6rem; }
}
@media (max-width: 56em) {   /* compact chrome through tablet — links + login must never overflow */
  .ww-brand img { height: 2.9rem; padding: 0.22rem 0.45rem; border-radius: 8px; }
  .ww-nav { gap: clamp(0.6rem, 2.2vw, 1.4rem); }
  .ww-nav a { font-size: 0.68rem; letter-spacing: 0.12em; }
  .ww-nav .nav-login { padding: 0.4rem 0.85rem; }
  .login-full { display: none; }
  .login-short { display: inline; }
}

/* ---------- Deck + slides ---------- */
.deck {
  height: 100svh; overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.slide {
  position: relative; height: 100svh;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-items: center;
  overflow: hidden; isolation: isolate;
}

/* full-bleed image slide */
.slide--image { color: var(--sand); text-align: center; }
.slide--image .slide-bg,
.slide--outro .slide-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.035); transition: transform 1400ms var(--ease);
}
.slide.is-in .slide-bg { transform: scale(1); }
.slide--image::after, .slide--outro::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(22, 30, 15, 0.34);
}
.slide-title { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.6rem); letter-spacing: -0.005em; }

/* quiet text slide */
.slide--text { background: var(--sand); text-align: center; }
.slide--text.alt { background: var(--sand-deep); }
.slide--dark { background: linear-gradient(168deg, var(--jade-night) 0%, #07231c 100%); color: rgba(247, 243, 236, 0.92); text-align: center; }
.slide--dark h2 { color: var(--sand); }

.slide-inner { max-width: 46rem; padding: 0 clamp(1.4rem, 5vw, 3rem); }
.slide-inner--wide { max-width: 62rem; }
.kicker {
  display: block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sandstone); margin-bottom: 1.6rem;
}
.slide--text .kicker { color: var(--jade); opacity: 0.75; }
.statement { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3.1rem); line-height: 1.22; }
.slide-copy { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); color: var(--ink-soft); max-width: 34rem; margin: 1.6rem auto 0; }
.slide--dark .slide-copy, .slide--image .slide-copy, .slide--outro .slide-copy { color: rgba(247, 243, 236, 0.85); }

/* half slide: image + text */
.slide--half { display: grid; grid-template-columns: 1fr 1fr; place-items: stretch; }
.slide--half .half-media { position: relative; overflow: hidden; }
.slide--half .half-media img,
.slide--half .half-media video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.035); transition: transform 1400ms var(--ease);
}
.slide--half.is-in .half-media img,
.slide--half.is-in .half-media video { transform: scale(1); }
.slide--half .half-copy {
  display: grid; place-items: center; background: var(--sand);
  padding: clamp(2rem, 5vw, 4.5rem);
}
.slide--half .half-copy > div { max-width: 26rem; }
.slide--half.right .half-media { order: 2; }
.slide--half h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); margin-bottom: 0.8rem; }
@media (max-width: 48em) {
  .slide--half { grid-template-columns: 1fr; grid-template-rows: 44svh 56svh; }
  .slide--half.right .half-media { order: 0; }
  .slide--half .half-copy { text-align: center; }
  .slide--half .half-copy > div { max-width: 30rem; }
}

/* outro slide */
.slide--outro { color: var(--sand); text-align: center; }
.slide--outro h2 { color: var(--sand); font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }

.slide--outro.scrim-deep::after { background: rgba(22, 30, 15, 0.52); }   /* bright daytime footage */

/* short viewports (landscape phones): keep titles out of the fixed header */
@media (max-height: 31.25em) {
  .slide--outro .slide-inner { padding-top: 6.5rem; }
  .slide--outro h1.statement, .slide--outro h2 { font-size: 1.2rem; }
  .contact-routes { margin-top: 1rem; }
  .contact-routes a { padding: 0.55rem 0.3rem; }
  .contact-routes .cr-sub { display: none; }
  .microline { display: none; }
}

/* hairline list (no cards) */
.hairlines { list-style: none; margin: 2.2rem 0 0; padding: 0; text-align: left; }
.hairlines li { border-top: 1px solid var(--line); padding: 1.15rem 0.2rem; }
.hairlines li:last-child { border-bottom: 1px solid var(--line); }
.hairlines .hl-title { font-family: var(--font-display); font-size: 1.15rem; display: block; margin-bottom: 0.2rem; }
.hairlines p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.slide--dark .hairlines li { border-color: rgba(247, 243, 236, 0.18); }
.slide--dark .hairlines p { color: rgba(247, 243, 236, 0.72); }

/* owl timeline — the joi owl glides down the spine each time the slide arrives
   (port of Option 1's scroll-driven spine owl; here the deck slide is one snapped
   viewport, so the glide is a timed descent re-armed by ww.js's is-in toggling) */
.tl-wrap { position: relative; margin: 2.4rem auto 0; max-width: 43rem; padding-left: 3.6rem; }
.tl-wrap::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.1rem; width: 2px;
  background: linear-gradient(var(--line), var(--jade-bright), var(--line)); }
.tl-owl { position: absolute; z-index: 2; top: 0; left: calc(1.1rem + 1px - 1.5rem);
  width: 3rem; height: 3rem; will-change: top, transform;
  filter: drop-shadow(0 6px 10px rgba(30, 44, 17, 0.22)); }
.slide.is-in .tl-owl { animation: owl-glide 5.5s ease-in-out 0.35s forwards; }
@keyframes owl-glide {              /* Option 1's sin-weave, baked into keyframes */
  0%   { top: 0;                   transform: rotate(0deg)  scale(0.92); }
  22%  {                           transform: rotate(-5deg) scale(0.96); }
  48%  {                           transform: rotate(5deg)  scale(1.02); }
  76%  {                           transform: rotate(-4deg) scale(1.06); }
  100% { top: calc(100% - 3rem);   transform: rotate(0deg)  scale(1.1); }
}
.timeline { list-style: none; margin: 0; padding: 0; text-align: left; }
.timeline li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.2rem; padding: 1.05rem 0; border-top: 1px solid var(--line); align-items: baseline;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--ww-speed) var(--ease), transform var(--ww-speed) var(--ease); }
.timeline li:last-child { border-bottom: 1px solid var(--line); }
.slide.is-in .timeline li { opacity: 1; transform: none; }
.slide.is-in .timeline li:nth-child(1) { transition-delay: 0.5s; }   /* each row lights up */
.slide.is-in .timeline li:nth-child(2) { transition-delay: 1.4s; }   /* as the owl passes  */
.slide.is-in .timeline li:nth-child(3) { transition-delay: 2.3s; }
.slide.is-in .timeline li:nth-child(4) { transition-delay: 3.2s; }
.slide.is-in .timeline li:nth-child(5) { transition-delay: 4.1s; }
.slide.is-in .timeline li:nth-child(6) { transition-delay: 5.0s; }
.timeline .tl-year { font-family: var(--font-display); font-size: 1.45rem; color: var(--jade); }
.timeline p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 36em) {
  .timeline li { grid-template-columns: 1fr; gap: 0.15rem; }
  .tl-wrap { padding-left: 2.6rem; }
  .tl-wrap::before { left: 0.9rem; }
  .tl-owl { left: calc(0.9rem + 1px - 1.2rem); width: 2.4rem; height: 2.4rem; }
  @keyframes owl-glide {
    0%   { top: 0;                     transform: rotate(0deg)  scale(0.92); }
    22%  {                             transform: rotate(-5deg) scale(0.96); }
    48%  {                             transform: rotate(5deg)  scale(1.02); }
    76%  {                             transform: rotate(-4deg) scale(1.06); }
    100% { top: calc(100% - 2.4rem);   transform: rotate(0deg)  scale(1.1); }
  }
}

/* story layout A/B toggle (ink-toned twin of .seg-ab) */
.story-ab { display: flex; justify-content: flex-end; max-width: 43rem; margin: 1.2rem auto -0.6rem; }
.tl-wrap--center ~ .story-ab, .story-ab.wide { max-width: 52rem; }
.story-ab button {
  background: none; border: 1px solid rgba(26, 31, 29, 0.25); cursor: pointer;
  color: var(--ink-soft); font-family: var(--font-body);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.22rem 0.6rem;
}
.story-ab button:first-child { border-radius: 999px 0 0 999px; border-right: none; }
.story-ab button:last-child { border-radius: 0 999px 999px 0; }
.story-ab button[aria-pressed="true"] { background: rgba(26, 31, 29, 0.08); color: var(--jade-night); }
.story-ab button:hover { color: var(--jade-night); }
@media (max-width: 36em) { .story-ab { display: none; } }

/* Centerline story variant — green spine down the middle, cards alternating,
   years ON the line, owl in front (>=36em only; classic layout on phones) */
@media (min-width: 36em) {
  .tl-wrap--center { padding-left: 0; max-width: 52rem; }
  .tl-wrap--center::before { left: 50%; margin-left: -1px;
    background: linear-gradient(var(--jade-bright), var(--jade)); }
  .tl-wrap--center .tl-owl { left: 50%; margin-left: -1.5rem; z-index: 3; }
  .tl-wrap--center .timeline li {
    display: block; position: relative; border: none; padding: 0.9rem 0;
    width: calc(50% - 4.4rem);
  }
  .tl-wrap--center .timeline li:last-child { border: none; }
  .tl-wrap--center .timeline li:nth-child(odd) { margin-right: auto; text-align: right; }
  .tl-wrap--center .timeline li:nth-child(even) { margin-left: auto; text-align: left; }
  .tl-wrap--center .tl-year {
    position: absolute; top: 0.65rem; z-index: 2; display: inline-block;
    background: var(--sand); border: 1.5px solid var(--jade); border-radius: 999px;
    padding: 0.12rem 0.7rem; font-size: 0.82rem; color: var(--jade-night); white-space: nowrap;
  }
  .tl-wrap--center .timeline li:nth-child(odd) .tl-year { right: -4.4rem; translate: 50% 0; }
  .tl-wrap--center .timeline li:nth-child(even) .tl-year { left: -4.4rem; translate: -50% 0; }
  .tl-wrap--center .timeline li:nth-child(odd) { transform: translateX(-14px); }
  .tl-wrap--center .timeline li:nth-child(even) { transform: translateX(14px); }
  .slide.is-in .tl-wrap--center .timeline li { transform: none; }
}

/* map slide (styles ported for the inline AlbersUSA svg) */
.v2-map { width: min(52rem, 88vw); max-height: 62svh; margin-inline: auto; filter: drop-shadow(0 18px 26px rgba(30, 44, 17, 0.14)); }
.v2-map .state { fill: #E7E2D1; }
.v2-map .wy, .v2-map .ok, .v2-map .tx { fill: var(--jade); stroke: var(--jade-night); stroke-width: 1; }
.v2-map .borders { stroke: var(--sand); stroke-width: 1; }
.v2-map .separator1 { stroke: var(--sandstone); stroke-width: 1.5; opacity: 0.35; }
.v2-map .dccircle { display: none; }
.v2-map .people-dot { fill: var(--sandstone); stroke: var(--jade-night); stroke-width: 1.5; }

/* buttons */
.pill {
  display: inline-block; border-radius: 999px; text-decoration: none;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.95rem 2.1rem; margin-top: 2rem;
  transition: transform 250ms var(--ease), background 250ms var(--ease);
}
.pill:hover { transform: translateY(-2px); }
.pill--solid { background: var(--sand); color: var(--jade-night); }
.pill--ink { background: var(--jade); color: var(--sand); }
.pill--ghost { border: 1.5px solid currentColor; }
.pill-row { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.slide--half .pill-row { justify-content: flex-start; }
@media (max-width: 48em) { .slide--half .pill-row { justify-content: center; } }

.board-reset { margin: 0.7rem 0 0; }
.board-reset button {
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  color: var(--jade); font-size: 0.85rem; font-weight: 600;
  border-bottom: 1px solid var(--jade-bright); padding: 0 0 1px;
}
.board-reset button:hover { color: var(--jade-night); }

/* Greenhouse panel inside a slide */
.board-panel {
  width: min(46rem, 92vw); max-height: 64svh; overflow-y: auto;
  background: var(--white); border-radius: 14px;
  box-shadow: 0 2px 8px rgba(26, 31, 29, 0.06), 0 22px 48px rgba(26, 31, 29, 0.10);
  padding: clamp(1.2rem, 3vw, 2.4rem); margin-top: 2rem; text-align: left;
}
.board-panel #grnhse_app { min-height: 3rem; }

/* progress dots */
.deck-dots {
  position: fixed; right: clamp(0.7rem, 2vw, 1.6rem); top: 50%; translate: 0 -50%; z-index: 40;
  display: flex; flex-direction: column; gap: 0.2rem;
}
.deck-dots a {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem;
  padding: 0.4rem 0.1rem; text-decoration: none;   /* generous hit area */
}
.deck-dots .dot {
  width: 11px; height: 11px; border-radius: 50%; flex: none;
  background: rgba(247, 243, 236, 0.85); box-shadow: 0 0 0 1.5px rgba(30, 44, 17, 0.55), 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 250ms var(--ease), background 250ms var(--ease);
}
.deck-dots a:hover .dot { transform: scale(1.25); }
.deck-dots a.is-active .dot { background: var(--sandstone); transform: scale(1.45); }
.deck-dots .dot-label {
  opacity: 0; translate: 6px 0; pointer-events: none;
  background: var(--sand); color: var(--jade-night); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.18rem 0.65rem; white-space: nowrap;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(26, 31, 29, 0.15);
  transition: opacity 220ms var(--ease), translate 220ms var(--ease);
}
.deck-dots a:hover .dot-label, .deck-dots a:focus-visible .dot-label,
.deck-dots a.is-active .dot-label { opacity: 1; translate: 0 0; }
@media (max-width: 36em) { .deck-dots .dot-label { display: none; } }

/* scroll hint on first slide */
.ww-hint {
  position: absolute; left: 50%; bottom: 1.4rem; translate: -50% 0; z-index: 2;
  color: rgba(247, 243, 236, 0.85); font-size: 1.5rem; line-height: 1;
  animation: hint 2.2s var(--ease) infinite;
}
@keyframes hint { 0%, 100% { transform: translateY(0); opacity: 0.85; } 55% { transform: translateY(8px); opacity: 0.4; } }
.slide--text .ww-hint, .slide--half .ww-hint { color: rgba(74, 85, 80, 0.75); }

/* footer microline (lives inside the outro slide) */
.microline {
  position: absolute; left: 0; right: 0; bottom: 1.1rem;
  display: flex; justify-content: center; align-items: center; gap: 1.4rem;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(247, 243, 236, 0.6);
}
.microline a { color: rgba(247, 243, 236, 0.8); text-decoration: none; display: inline-flex; align-items: center; }
.microline a:hover { color: var(--sand); }
.microline .ml-contact { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.microline--ink { color: rgba(26, 31, 29, 0.5); }
.microline--ink a { color: rgba(26, 31, 29, 0.65); }
.microline--ink a:hover { color: var(--jade-night); }

/* featured line above the Greenhouse board (the board iframe sorts alphabetically,
   so the General Interest Application gets surfaced here instead) */
/* contact routes (contact.html) */
.contact-routes { list-style: none; margin: 2.4rem auto 0; padding: 0; max-width: 30rem; text-align: left; }
.contact-routes li { border-top: 1px solid rgba(247, 243, 236, 0.25); }
.contact-routes li:last-child { border-bottom: 1px solid rgba(247, 243, 236, 0.25); }
.contact-routes a { display: block; padding: 1.05rem 0.3rem; text-decoration: none; color: var(--sand); transition: padding-left 250ms var(--ease); }
.contact-routes a:hover { padding-left: 0.9rem; }
.contact-routes .cr-title { display: block; font-family: var(--font-display); font-size: 1.2rem; }
.contact-routes .cr-sub { display: block; font-size: 0.85rem; color: rgba(247, 243, 236, 0.7); }

/* ---------- Interactive value-chain map (company slide 1) ---------- */
.slide--map .slide-inner--wide { width: 100%; max-width: 72rem; }
.segmap { position: relative; margin: 1.6rem auto 0; width: min(60rem, 92vw); }
/* layered diorama + mouse-tilt parallax (--tx/--ty set by ww.js, -0.5..0.5) */
.segmap--art, .segmap--film {
  aspect-ratio: 2400 / 996; overflow: hidden; border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 30px 60px rgba(0, 0, 0, 0.45);
  transform: perspective(1000px) rotateX(calc(var(--ty, 0) * 7deg)) rotateY(calc(var(--tx, 0) * -8deg));
  transition: transform 260ms ease-out;
}
/* film variant: MJ-animated diorama as the living background */
.segmap--film { width: min(54rem, 88vw, calc((100svh - 19.5rem) * 16 / 9)); aspect-ratio: 16 / 9; }
.seg-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* fly-in zoom: translate-then-scale puts the tracked point (--cx/--cy, %) at center */
  transform: scale(var(--z, 1)) translate(calc((50 - var(--cx, 50)) * 1%), calc((50 - var(--cy, 50)) * 1%));
  transform-origin: center; will-change: transform;
}
.seg-scrub {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--z, 1)) translate(calc((50 - var(--cx, 50)) * 1%), calc((50 - var(--cy, 50)) * 1%));
  transform-origin: center; will-change: transform;
  opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease);
}
.segmap[data-riding] .seg-scrub { opacity: 1; }
/* headline lives ON the film's dark sky, at every viewport */
.seg-title-overlay {
  position: absolute; top: clamp(0.8rem, 6.5%, 2.6rem); left: 0; right: 0; z-index: 4;
  margin: 0; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.6rem);
  color: var(--sand); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); pointer-events: none;
  text-align: center;
}
.segmap[data-zoomed] .seg-spot { opacity: 0; pointer-events: none; }
.seg-spot { transition: opacity 300ms var(--ease); }
@media (max-width: 36em) { .segmap--film, .seg-caption { width: 96vw; } }
/* immersive desktop: film swallows the freed headline space; h1 overlays the dark sky */
@media (min-width: 48em) {
  .slide--map .slide-inner--wide { max-width: none; padding: 0; }
  .slide--map { padding-top: 4.5rem; }   /* bias the centered stack below the fixed header */
  .segmap--film, .segmap--film + .seg-caption,
  .slide--map .seg-caption { width: min(85vw, calc((100svh - 15.6rem) * 16 / 9)); }
  .segmap--film { margin-top: 0; }
}
.seg-layer {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 260ms ease-out; will-change: transform;
}
.seg-base { transform: translate(calc(var(--tx, 0) * -44px), calc(var(--ty, 0) * -26px)) scale(1.08); }
.seg-fg { top: auto; height: auto; bottom: 0; object-fit: fill;
  transform: translate(calc(var(--tx, 0) * -95px), calc(var(--ty, 0) * -48px)) scale(1.1); }
/* tracked markers — buttons riding their objects through the film */
.seg-spot {
  position: absolute; left: var(--sx, 50%); top: var(--sy, 50%); translate: -50% -50%;
  display: grid; place-items: center;
  background: none; border: none; padding: 0.55rem; cursor: pointer;
  color: var(--sand); font-family: var(--font-body);
}
@media (pointer: coarse) { .seg-spot { padding: 0.9rem; } }   /* fat-finger hit area */
.seg-spot .seg-num {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 999px;
  background: var(--sand); color: var(--jade-night); border: 1.5px solid var(--sand);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  font-size: 0.8rem; font-weight: 600; position: relative;
  transition: background 250ms var(--ease), color 250ms var(--ease), transform 250ms var(--ease);
}
.seg-spot .seg-num::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit;
  border: 1.5px solid var(--sand); animation: segpulse 2.6s var(--ease) infinite;
}
@keyframes segpulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
.seg-spot:hover .seg-num { transform: scale(1.15); }
.seg-spot[aria-expanded="true"] .seg-num { background: var(--sandstone); color: var(--jade-night); }
.seg-spot[aria-expanded="true"] .seg-num::after { animation: none; opacity: 0; }
.seg-spot:focus-visible .seg-num { outline: 2px solid var(--sand); outline-offset: 3px; }
.segmap[data-active] .seg-spot[aria-expanded="false"] .seg-num { opacity: 0.65; }
.segmap[data-active=""] .seg-spot .seg-num { opacity: 1; }

/* still-mode info card — bottom-right ON the film */
.seg-card {
  position: absolute; right: clamp(0.7rem, 2%, 1.4rem); bottom: clamp(0.7rem, 2%, 1.4rem); z-index: 4;
  max-width: min(21rem, 62%); text-align: left;
  background: rgba(20, 28, 14, 0.88); border: 1px solid rgba(247, 243, 236, 0.16);
  border-radius: 12px; padding: 0.9rem 1.1rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  animation: segcard 260ms var(--ease);
}
.seg-card[hidden] { display: none; }
@keyframes segcard { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.seg-card .sc-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--sand); margin: 0 0 0.25rem; }
.seg-card .sc-copy { margin: 0; font-size: 0.85rem; line-height: 1.5; color: rgba(247, 243, 236, 0.82); }

/* A/B motion toggle — tiny segmented control, right-aligned under the film */
.seg-ab { display: flex; justify-content: flex-end; width: min(85vw, calc((100svh - 14rem) * 16 / 9)); margin: 0.5rem auto 0; }
.seg-ab button {
  background: none; border: 1px solid rgba(247, 243, 236, 0.3); cursor: pointer;
  color: rgba(247, 243, 236, 0.6); font-family: var(--font-body);
  font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.22rem 0.6rem;
}
.seg-ab button:first-child { border-radius: 999px 0 0 999px; border-right: none; }
.seg-ab button:last-child { border-radius: 0 999px 999px 0; }
.seg-ab button[aria-pressed="true"] { background: rgba(247, 243, 236, 0.16); color: var(--sand); }
.seg-ab button:hover { color: var(--sand); }
@media (max-width: 36em) {
  .slide--map .slide-inner--wide { padding: 0; }   /* let the 96vw film/toggle center instead of overflowing the padded box */
  .seg-ab { width: 96vw; }
  .seg-card { left: 0.6rem; right: 0.6rem; max-width: none; padding: 0.7rem 0.85rem; }
  .seg-card .sc-copy { font-size: 0.8rem; }
}

/* caption band — the words live under the film, never over the art */
.seg-caption {
  position: relative; width: min(54rem, 88vw, calc((100svh - 19.5rem) * 16 / 9));
  margin: 1rem auto 0; height: 6.9rem; text-align: center;
  /* FIXED height + absolute children: caption text changes must never re-center
     the slide stack (was shifting the film ~9px when copy line-counts differed) */
}
.seg-caption .sc-hint, .seg-caption .sc-body {
  position: absolute; left: 0; right: 0; top: 0.5rem; margin: 0;
}
.seg-caption .sc-hint {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(247, 243, 236, 0.55);
  transition: opacity 300ms var(--ease);
}
.seg-caption .sc-body { opacity: 0; transition: opacity 300ms var(--ease); }
.seg-caption .sc-title { font-family: var(--font-display); font-size: 1.25rem; color: var(--sand); margin: 0 0 0.25rem; }
.seg-caption .sc-copy { margin: 0 auto; max-width: 38rem; font-size: 0.92rem; color: rgba(247, 243, 236, 0.8); }
.seg-caption .sc-close {
  position: absolute; top: 0; right: 0;
  background: none; border: 1px solid rgba(247, 243, 236, 0.45); border-radius: 999px;
  color: rgba(247, 243, 236, 0.85); cursor: pointer; display: none;
  padding: 0.3rem 0.85rem; font-family: var(--font-body);
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease);
}
.seg-caption .sc-close:hover { background: var(--sand); color: var(--jade-night); border-color: var(--sand); }
.seg-caption[data-state="idle"] .sc-body { opacity: 0; }
.seg-caption[data-state="preview"] .sc-hint,
.seg-caption[data-state="active"] .sc-hint { opacity: 0; pointer-events: none; }
.seg-caption[data-state="preview"] .sc-body,
.seg-caption[data-state="active"] .sc-body { opacity: 1; }
.seg-caption[data-state="active"] .sc-close { display: block; }

/* WW motion: content rises in on slide entry (re-triggerable) */
.s-reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--ww-speed) var(--ease), transform var(--ww-speed) var(--ease); }
.slide.is-in .s-reveal { opacity: 1; transform: none; }
.slide.is-in .s-reveal:nth-child(2) { transition-delay: 90ms; }
.slide.is-in .s-reveal:nth-child(3) { transition-delay: 180ms; }

.home-li {
  position: fixed; right: 1.2rem; bottom: calc(1.1rem + env(safe-area-inset-bottom)); z-index: 40;
  color: rgba(247, 243, 236, 0.8);
}
.home-li:hover { color: var(--sand); }

/* ---------- One-viewport home (ported from v2.css, self-contained) ---------- */
.home-stage { position: relative; height: 100dvh; overflow: hidden; isolation: isolate; background: var(--jade-night); }
.home-stage video, .home-stage .hero-still { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
/* End-of-film still: sharp 4K-master frame faded over the frozen last video frame */
.home-stage .hero-end { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.home-stage.is-ended .hero-end { opacity: 1; transition: opacity 600ms ease; }
.home-stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 9rem; z-index: 1; background: linear-gradient(to top, rgba(20, 28, 14, 0.55), transparent); }
@media (max-width: 36em) {
  .home-li svg { width: 24px; height: 24px; }
  .microline a svg { width: 19px; height: 19px; }
  .microline { gap: 1rem; }
}

/* ---------- Reduced motion: everything settles instantly ---------- */
@media (prefers-reduced-motion: reduce) {
  .deck { scroll-behavior: auto; }
  body { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .s-reveal { opacity: 1; transform: none; transition: none; }
  .slide.is-in .tl-owl { animation: none; }               /* owl rests at the top of the line */
  .timeline li { opacity: 1; transform: none; transition: none; }
  .slide--image .slide-bg, .slide--outro .slide-bg, .slide--half .half-media img { transform: none; transition: none; }
  .ww-hint { animation: none; }
  .segmap--art { transform: none; }
  .seg-layer { transform: none; }
}

/* header legibility: top scrim on media slides; ink chrome over ivory slides */
.slide--image::after, .slide--outro::after {
  background: linear-gradient(to bottom, rgba(22, 30, 15, 0.42), transparent 160px),
              linear-gradient(rgba(22, 30, 15, 0.34), rgba(22, 30, 15, 0.34));
}
.slide--half::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: 2;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(22, 30, 15, 0.36), transparent);
}
.ww-header .logo-dark { display: none; }
.ww-header.on-light .logo-light { display: none; }
.ww-header.on-light .logo-dark { display: block; filter: none; }
.ww-header.on-light .ww-nav a { color: var(--jade-night); text-shadow: none; }
.ww-header.on-light .ww-nav a:hover, .ww-header.on-light .ww-nav a[aria-current="page"] { border-bottom-color: var(--jade); }
.ww-header.on-light .nav-login { border-color: var(--jade); }

/* late mobile overrides — must follow the base rules above to win by order */
@media (max-width: 36em) {
  .seg-caption { height: 8.2rem; }
  /* fuller timeline: compress to fit one phone viewport */
  .slide--text.alt .slide-inner--wide { padding-top: 3.6rem; }
  .timeline li { padding: 0.5rem 0; gap: 0.1rem; }
  .timeline .tl-year { font-size: 1.05rem; }
  .timeline p { font-size: 0.78rem; line-height: 1.4; }
  .tl-wrap { margin-top: 1.2rem; }
}

/* Room to roam legend */
.map-legend { display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap; margin-top: 0.9rem; }
.ml-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.ml-swatch { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.ml-dot { background: var(--sandstone); box-shadow: 0 0 0 1.5px var(--jade-night); }
.ml-state { background: var(--jade); border-radius: 3px; }

/* mobile: keep the Devils Tower (left of frame) in view on portrait crops */
@media (max-width: 48em) {
  .bg-left { object-position: 62% 50% !important; }
}

/* mobile: "Real scope" (hairlines) slide must fit one viewport */
@media (max-width: 36em) {
  .slide--text .slide-inner { padding-top: 4.2rem; }
  .slide--text .statement { font-size: 1.35rem; }
  .hairline-slide .slide-copy { display: none; }
  .hairlines { margin-top: 1rem; }
  .hairlines li { padding: 0.6rem 0.2rem; }
  .hairlines .hl-title { font-size: 0.95rem; }
  .hairlines p { font-size: 0.82rem; line-height: 1.45; }
  .hairlines { padding-right: 1.9rem; }   /* clear the deck dots */
}



/* ---------- Mobile header: let the brand menu carry navigation ----------
   Three text links plus the login pill overflow the viewport below ~48em
   (measured 25px over at 390, 95px at 320). The logo already opens a menu
   containing every page, so the links are redundant there — drop them and
   keep the login pill, which is the one destination the menu buries. */
@media (max-width: 48em) {
  /* Links restored across the top, typed like the owners header: sentence case
     with tight tracking rather than wide uppercase, which is what let four items
     fit beside the logo. Brand dropdown stays as the secondary route. */
  .ww-nav a { text-transform: none; letter-spacing: 0.03em; font-size: 0.78rem; font-weight: 600; }
  .ww-nav { gap: 0.55rem; }
  .ww-nav .nav-login { padding: 0.32rem 0.66rem; border-width: 1px; }
}
@media (max-width: 24em) {
  .ww-nav a { font-size: 0.66rem; }
  .ww-nav { gap: 0.36rem; }
  .ww-nav .nav-login { padding: 0.26rem 0.5rem; }
}
@media (max-width: 21em) {   /* 320px and narrower: shrink the logo too, nav alone cannot recover it */
  .ww-brand img { height: 2.3rem; }
  .ww-nav a { font-size: 0.6rem; }
  .ww-nav { gap: 0.28rem; }
  .ww-nav .nav-login { padding: 0.22rem 0.42rem; }
}