/* Terrastack homepage v7, 25 Oct 2026. Film section and scroll motion added on top of v6. v6 notes follow. Institutional nav, eyebrow and intro added. Based on v5. Hero unchanged from v4b. Forest Strata palette from the deck (forest #142D27, cream #F5F3EB, strata orange #D4572A). Inter. Space does the structuring. */
:root {
  --forest: #142D27; --forest-2: #1B3A32; --cream: #F5F3EB; --stone: #E9E6DC; --moss: #55635A; --sage: #BFCABD;
  --strata: #D4572A; --rust: #B4471F; --strata-on-dark: #E8875F; --focus: #2F6BFF;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gutter: clamp(24px, 6vw, 96px); --max: 1120px;
  --gap: clamp(160px, 22vw, 280px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--forest); font-family: var(--font); font-size: 1.125rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; letter-spacing: -0.025em; font-weight: 500; }
p { text-wrap: pretty; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
::selection { background: color-mix(in oklab, var(--strata) 28%, transparent); }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--cream); color: var(--forest); padding: 8px 16px; }
.skip:focus { top: 16px; }

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; color: var(--cream); background: var(--forest); isolation: isolate; overflow: hidden; }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-video.on { opacity: 1; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, rgba(20,45,39,0.42) 0%, rgba(20,45,39,0) 22%, rgba(20,45,39,0) 42%, rgba(12,28,24,0.55) 70%, rgba(12,28,24,0.82) 100%),
  radial-gradient(ellipse 70% 55% at 18% 82%, rgba(12,28,24,0.45) 0%, rgba(12,28,24,0) 70%); }
.bar { display: flex; justify-content: space-between; align-items: center; padding-top: clamp(24px, 4vw, 44px); }
.brand img { height: 20px; width: auto; }
.bar-link { font-size: 0.9375rem; font-weight: 500; text-decoration: none; color: var(--cream); padding: 8px 0; border-bottom: 1px solid rgba(245,243,235,0.45); }
.bar-link:hover { border-bottom-color: var(--cream); }
.hero-copy { margin-top: auto; padding-bottom: clamp(72px, 12vh, 128px); }
.hero h1 { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 5rem); line-height: 1.04; max-width: 17ch; font-weight: 500; text-shadow: 0 1px 24px rgba(0,0,0,0.25); }
.button { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(32px, 4vw, 48px); padding: 16px 28px; background: var(--rust); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; border-radius: 999px; transition: background-color 200ms var(--ease), transform 200ms var(--ease); }
.button::after { content: ""; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: 2px; }
.button:hover { background: #9E3D19; transform: translateY(-1px); }
.hero-caption { position: absolute; left: 0; right: 0; bottom: 20px; font-size: 0.75rem; color: rgba(245,243,235,0.7); text-align: right; }


/* v6 authority layer */
.bar-nav { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.bar-nav a { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--cream); opacity: 0.88; padding: 8px 0; }
.bar-nav a:hover { opacity: 1; }
.bar-nav .bar-cta { opacity: 1; padding: 10px 20px; border: 1px solid rgba(245,243,235,0.6); border-radius: 999px; }
.bar-nav .bar-cta:hover { background: var(--cream); color: var(--forest); }
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 2vw, 26px); font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 16px rgba(0,0,0,0.35); }
.eyebrow::before { content: ""; width: 40px; height: 2px; background: var(--strata-on-dark); }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 16px 48px; align-items: baseline; padding-bottom: clamp(28px, 3.4vw, 44px); margin-bottom: clamp(28px, 3.4vw, 44px); border-bottom: 1px solid rgba(20,45,39,0.16); }
.kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rust); }
.intro h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); line-height: 1.14; font-weight: 600; letter-spacing: -0.03em; max-width: 30ch; }

/* Glance: four compact blocks */
.glance { padding-block: clamp(56px, 7vw, 88px) clamp(56px, 7vw, 80px); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px); }
.card { display: flex; flex-direction: column; min-width: 0; }
.label { display: flex; align-items: baseline; gap: 10px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; padding-top: 12px; border-top: 2px solid var(--forest); text-transform: uppercase; color: var(--moss); margin-bottom: 14px; }
.label span { color: var(--rust); font-variant-numeric: tabular-nums; }
.visual { position: relative; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--forest); isolation: isolate; }
.visual picture, .visual picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card h2 { margin-top: 16px; font-size: 1rem; line-height: 1.42; font-weight: 600; letter-spacing: -0.005em; color: var(--forest); text-wrap: pretty; }
.source { margin-top: 8px; font-size: 0.6875rem; line-height: 1.45; color: var(--moss); }

/* 01 photo with figure */
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,28,24,0.15) 0%, rgba(12,28,24,0.2) 45%, rgba(12,28,24,0.78) 100%); }
.big { position: absolute; left: 18px; bottom: 14px; z-index: 1; color: var(--cream); font-size: clamp(2.25rem, 1.2rem + 2.2vw, 3.25rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.big small { display: block; margin-top: 6px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; color: var(--sage); }

/* 02 map with tiers */
.map::after { background: linear-gradient(180deg, rgba(12,28,24,0) 55%, rgba(12,28,24,0.55) 100%); }
.tiers { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.tiers rect { fill: none; stroke: rgba(245,243,235,0.32); stroke-width: 0.35; vector-effect: non-scaling-stroke; }
.tiers rect.t2 { fill: rgba(191,202,189,0.28); stroke: rgba(245,243,235,0.85); stroke-width: 1; }
.tiers rect.t1 { fill: rgba(212,87,42,0.55); stroke: #fff; stroke-width: 1.5; }
.legend { position: absolute; left: 14px; bottom: 12px; z-index: 2; display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 0.6875rem; font-weight: 500; color: var(--cream); }
.legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border: 1px solid #fff; vertical-align: -1px; }
.legend .k1 { background: rgba(212,87,42,0.9); } .legend .k2 { background: rgba(191,202,189,0.5); }
.pills { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.pills li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font-size: 0.8125rem; line-height: 1.45; color: var(--moss); }
.pills svg { width: 18px; height: 18px; fill: none; stroke: var(--rust); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; margin-top: 1px; }

/* 03 phasing */
.phase picture img { opacity: 0.38; filter: saturate(0.6); }
.phase::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(20,45,39,0.92) 0%, rgba(20,45,39,0.55) 100%); }
.timeline { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 18px 18px 18px 20px; list-style: none; display: flex; flex-direction: column; justify-content: space-between; color: var(--cream); }
.timeline li { position: relative; padding-left: 22px; font-size: 0.8125rem; line-height: 1.3; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--sage); background: var(--forest); }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 16px; width: 1px; height: calc(100% + 6px); background: rgba(191,202,189,0.4); }
.timeline .done::before { background: var(--sage); }
.timeline .next::before { border-color: var(--strata-on-dark); background: var(--strata); box-shadow: 0 0 0 4px rgba(212,87,42,0.25); }
.timeline b { display: block; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); margin-bottom: 1px; }
.timeline .next b { color: var(--strata-on-dark); }

/* 04 market circles */
.market { background: var(--stone); }
.market svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.market .outer { fill: rgba(212,87,42,0.14); stroke: var(--strata); stroke-width: 1.5; }
.market .inner { fill: var(--forest); }
.market text { text-anchor: middle; font-family: var(--font); }
.market .v { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.market .y { font-size: 11px; font-weight: 500; }
.market text:nth-of-type(1) { fill: var(--rust); } .market text:nth-of-type(2) { fill: var(--rust); }
.market text:nth-of-type(3), .market text:nth-of-type(4) { fill: var(--cream); }
.ring { position: absolute; right: 12px; bottom: 12px; font-size: 0.6875rem; font-weight: 600; color: var(--rust); background: var(--cream); border-radius: 999px; padding: 4px 10px; }

/* Contact close, compact */
.contact { position: relative; isolation: isolate; color: var(--cream); background: var(--forest); overflow: hidden; }
.contact-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; z-index: -2; }
.contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(16,22,18,0.84) 0%, rgba(16,22,18,0.5) 50%, rgba(16,22,18,0.12) 100%); }
.contact-copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding-block: clamp(48px, 6vw, 72px) clamp(32px, 4vw, 44px); }
.contact h2 { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.375rem); line-height: 1.16; font-weight: 600; letter-spacing: -0.03em; max-width: 26ch; }
.contact .button { margin-top: 0; }
.foot { position: relative; background: var(--forest); max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2)); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 18px 24px; border-top: 1px solid rgba(245,243,235,0.16); font-size: 0.75rem; color: var(--sage); }
.foot img { height: 14px; width: auto; }
.foot p { flex: 1; min-width: 16rem; }

/* Reveal */
.reveal .rv { opacity: 0; transform: translateY(14px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.reveal .cards .rv:nth-child(2) { transition-delay: 90ms; } .reveal .cards .rv:nth-child(3) { transition-delay: 180ms; } .reveal .cards .rv:nth-child(4) { transition-delay: 270ms; }
.reveal .rv.in { opacity: 1; transform: none; }
.reveal .tiers rect.t1, .reveal .tiers rect.t2 { opacity: 0; transition: opacity 600ms var(--ease); transition-delay: calc(400ms + var(--i) * 60ms); }
.reveal .in .tiers rect.t1, .reveal .in .tiers rect.t2 { opacity: 1; }

@media (max-width: 1080px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; } }
@media (max-width: 900px) { .bar-nav .hide-sm { display: none; } .intro { grid-template-columns: 1fr; } }
@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }
  .hero-caption { text-align: left; }
  .button { padding: 15px 24px; }
  .cards { grid-template-columns: 1fr; row-gap: 44px; }
  .card h2 { font-size: 1rem; }
  .visual { aspect-ratio: 3 / 2; }
  .phase { aspect-ratio: 4 / 3; }
  .contact::before { background: linear-gradient(180deg, rgba(12,28,24,0.55) 0%, rgba(12,28,24,0.85) 100%); }
  .contact-copy { padding-top: 64px; }
}
/* v7 sticky nav that tightens on scroll */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding-bottom: 12px; transition: padding 450ms var(--ease); }
.bar::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: rgba(20,45,39,0.84); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid rgba(245,243,235,0.1); opacity: 0; transition: opacity 450ms var(--ease); }
.bar .brand img { transition: height 450ms var(--ease); }
.bar.stuck { padding-top: 14px; padding-bottom: 14px; }
.bar.stuck::before { opacity: 1; }
.bar.stuck .brand img { height: 17px; }
.bar.stuck .bar-cta { padding: 8px 18px; }

/* v7 scroll progress */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--strata); transform: scaleX(0); transform-origin: 0 50%; }

/* v7 film */
.film { margin: 0 0 clamp(56px, 7vw, 96px); }
.film-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--forest) url("assets/film-poster-640.webp") center / cover no-repeat; transform-origin: 50% 20%; box-shadow: 0 40px 90px -50px rgba(12,28,24,0.6); }
.film-video { width: 100%; height: 100%; object-fit: cover; background: transparent; }
.film-sound { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border: 1px solid rgba(245,243,235,0.35); border-radius: 999px; background: rgba(20,45,39,0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--cream); font: 600 0.8125rem/1 var(--font); letter-spacing: 0.02em; cursor: pointer; transition: background-color 200ms var(--ease); }
.film-sound::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--strata-on-dark); }
.film-sound:hover { background: rgba(20,45,39,0.92); }
.film-sound[hidden] { display: none; }
.film figcaption { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 6px 48px; align-items: baseline; margin-top: 20px; }
.film-cap { font-size: 1.0625rem; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; }
.film .source { grid-column: 2; margin-top: 0; }

/* v7 reveals */
.label { border-top: 0; background: linear-gradient(var(--forest), var(--forest)) 0 0 / 100% 2px no-repeat; }
.reveal .rv .label { background-size: 0 2px; transition: background-size 1100ms var(--ease) 150ms; }
.reveal .rv.in .label { background-size: 100% 2px; }
.reveal .card .visual { clip-path: inset(14% 0 0 0 round 6px); transition: clip-path 1200ms var(--ease) 120ms; }
.reveal .card.in .visual { clip-path: inset(0 0 0 0 round 6px); }
.reveal .card .visual picture img { transform: scale(1.1); transition: transform 1800ms var(--ease) 120ms; }
.reveal .card.in .visual picture img { transform: none; }
.reveal .card h2, .reveal .card .source, .reveal .card .pills { opacity: 0; transform: translateY(10px); transition: opacity 800ms var(--ease) 380ms, transform 800ms var(--ease) 380ms; }
.reveal .card.in h2, .reveal .card.in .source, .reveal .card.in .pills { opacity: 1; transform: none; }
.reveal .timeline li { opacity: 0; transform: translateX(-8px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal .timeline li:nth-child(1) { transition-delay: 450ms; } .reveal .timeline li:nth-child(2) { transition-delay: 600ms; } .reveal .timeline li:nth-child(3) { transition-delay: 750ms; } .reveal .timeline li:nth-child(4) { transition-delay: 900ms; }
.reveal .in .timeline li { opacity: 1; transform: none; }
.reveal .market .outer { stroke-dasharray: 654; stroke-dashoffset: 654; transition: stroke-dashoffset 1800ms var(--ease) 300ms; }
.reveal .in .market .outer { stroke-dashoffset: 0; }
.reveal .market .inner { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0.5); opacity: 0; transition: transform 1200ms var(--ease) 350ms, opacity 700ms var(--ease) 350ms; }
.reveal .in .market .inner { transform: none; opacity: 1; }
.reveal .film figcaption { opacity: 0; transform: translateY(12px); transition: opacity 900ms var(--ease) 250ms, transform 900ms var(--ease) 250ms; }
.reveal .film.in figcaption { opacity: 1; transform: none; }
.photo picture, .phase picture, .contact-media img { will-change: transform; }

@media (max-width: 900px) { .film figcaption { grid-template-columns: 1fr; } .film .source { grid-column: 1; } }
@media (max-width: 40rem) { .film-sound { left: 10px; top: 10px; padding: 8px 14px 8px 12px; } }

@media (prefers-reduced-motion: reduce) {
  .bar, .bar::before, .bar .brand img { transition: none; }
  .film-frame { transform: none !important; }
  .reveal .rv .label { background-size: 100% 2px; transition: none; }
  .reveal .card .visual, .reveal .card .visual picture img, .reveal .card h2, .reveal .card .source, .reveal .card .pills, .reveal .timeline li, .reveal .market .outer, .reveal .market .inner, .reveal .film figcaption { clip-path: none; transform: none; opacity: 1; stroke-dashoffset: 0; transition: none; }
  html { scroll-behavior: auto; }
  .hero-video { display: none; }
  .reveal .rv, .reveal .tiers rect { opacity: 1; transform: none; transition: none; }
  .button, .mail, .hero-video { transition: none; }
}
#approach, #verification, #rails, #phasing, #market, #film, #contact { scroll-margin-top: 72px; }

/* v8, 25 Oct 2026. Compact editorial layout on a 12 column grid, thin rules, plain nav, outlined CTAs, graded hero. */
:root { --rule: rgba(20,45,39,0.16); --rule-strong: rgba(20,45,39,0.5); --cols: 12; --colgap: clamp(16px, 2vw, 32px); }

/* Nav, plain uppercase links */
.brand img { height: 17px; opacity: 0.92; }
.bar.stuck .brand img { height: 15px; }
.bar-nav { gap: clamp(20px, 2.6vw, 40px); }
.bar-nav a { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; opacity: 0.86; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 300ms var(--ease), opacity 200ms var(--ease); }
.bar-nav a:hover, .bar-nav a:focus-visible { opacity: 1; background-size: 100% 1px; }

/* Hero */
.hero-shade { background:
  linear-gradient(180deg, rgba(20,45,39,0.38) 0%, rgba(20,45,39,0) 20%, rgba(20,45,39,0) 46%, rgba(12,28,24,0.42) 74%, rgba(12,28,24,0.7) 100%),
  linear-gradient(90deg, rgba(20,45,39,0.62) 0%, rgba(20,45,39,0.34) 34%, rgba(20,45,39,0) 62%),
  radial-gradient(ellipse 72% 58% at 12% 86%, rgba(20,45,39,0.5) 0%, rgba(20,45,39,0) 72%); }
.hero h1 { font-size: clamp(2.25rem, 1rem + 4.2vw, 4.25rem); line-height: 1.14; font-weight: 500; letter-spacing: -0.025em; max-width: 960px; text-wrap: balance; }
.hero-sub { margin-top: clamp(18px, 1.8vw, 24px); max-width: 680px; font-size: clamp(1rem, 0.92rem + 0.35vw, 1.1875rem); line-height: 1.55; color: var(--cream); text-shadow: 0 1px 16px rgba(0,0,0,0.35); }
.br-lg { display: none; }
@media (min-width: 1100px) { .hero h1 { text-wrap: wrap; } .br-lg { display: inline; } }

/* Outlined CTAs */
.button { background: transparent; color: var(--cream); border: 1px solid rgba(245,243,235,0.72); padding: 15px 26px; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.06em; }
.button:hover { background: var(--cream); color: var(--forest); border-color: var(--cream); transform: none; }
.button::after { width: 7px; height: 7px; border-width: 1.5px; }

/* Intelligence block with stat strip */
.intel { padding-block: clamp(56px, 6vw, 88px) clamp(40px, 4vw, 56px); }
.intro { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--colgap); row-gap: 16px; align-items: start; padding: 0 0 clamp(32px, 3.6vw, 48px); margin: 0; border: 0; }
.intro .kicker { grid-column: 1 / span 3; padding-top: 6px; }
.glance-body { grid-column: 4 / -1; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: clamp(16px, 2vw, 24px) clamp(14px, 2vw, 28px); border-left: 1px solid var(--rule); }
.stats div:first-child { border-left: 0; padding-left: 0; }
.stats dd { margin: 0; font-size: clamp(2.75rem, 1.4rem + 4vw, 5.25rem); line-height: 0.92; font-weight: 500; letter-spacing: -0.045em; color: var(--forest); font-variant-numeric: tabular-nums; }
.stats dt { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); }
.intro h2.glance-cap { margin-top: clamp(16px, 1.8vw, 24px); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem); line-height: 1.42; font-weight: 500; letter-spacing: -0.015em; max-width: 60ch; color: var(--forest); }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--colgap); row-gap: 40px; border-top: 1px solid var(--rule); padding-top: clamp(24px, 2.6vw, 36px); }
.pillar { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card .label { margin: 0; padding: 0; background: none; color: var(--moss); font-size: 0.6875rem; letter-spacing: 0.16em; gap: 8px; }
.card .label em { font-style: normal; color: #8C988F; }
.pillar .visual { aspect-ratio: 16 / 9; border-radius: 2px; }
.pillar h2 { margin: 4px 0 0; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); line-height: 1.18; font-weight: 500; letter-spacing: -0.02em; color: var(--forest); text-wrap: balance; }
.card .body { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--forest); max-width: 62ch; }
.card .note { margin: 0; padding-left: 12px; border-left: 2px solid var(--strata); font-size: 0.8125rem; line-height: 1.55; color: var(--moss); }

/* Film, compact, caption left */
.film { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--colgap); align-items: end; margin: 0 auto; padding-block: clamp(24px, 3vw, 40px); }
.film figcaption { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 12px; margin: 0; padding-bottom: 4px; border-top: 1px solid var(--rule-strong); padding-top: 14px; }
.film .film-cap { font-size: 1.0625rem; line-height: 1.45; font-weight: 500; }
.film .source { grid-column: auto; margin: 0; }
.film-frame { grid-column: 5 / -1; border-radius: 2px; box-shadow: 0 30px 70px -50px rgba(12,28,24,0.6); }
.film-video:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Phasing and market side by side */
.pm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); padding-block: clamp(40px, 4vw, 56px) clamp(56px, 6vw, 80px); }
.half { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--rule-strong); padding-top: 14px; min-width: 0; }
.half h2.lead { margin: 4px 0 6px; font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem); line-height: 1.22; font-weight: 500; letter-spacing: -0.02em; color: var(--forest); max-width: 30ch; }
.half .timeline { position: static; inset: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; padding: 0; margin: 10px 0 0; color: var(--forest); border-top: 1px solid var(--rule-strong); }
.half .timeline li { padding: 18px 0 0; font-size: 0.875rem; line-height: 1.4; }
.half .timeline li::before { top: -5px; left: 0; width: 9px; height: 9px; border: 1.5px solid var(--forest); background: var(--cream); }
.half .timeline li:not(:last-child)::after { display: none; }
.half .timeline .done::before { background: var(--forest); }
.half .timeline .next::before { border-color: var(--strata); background: var(--strata); box-shadow: 0 0 0 4px rgba(212,87,42,0.18); }
.half .timeline b { color: var(--moss); margin-bottom: 6px; font-size: 0.6875rem; letter-spacing: 0.14em; }
.half .timeline .next b { color: var(--rust); }
.market-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.half .visual.market { aspect-ratio: 4 / 3; border-radius: 2px; }
.market-copy { display: flex; flex-direction: column; gap: 10px; }
.market-copy .source { margin: 0; }

/* Closing */
.contact-copy { padding-block: clamp(64px, 7vw, 96px) clamp(36px, 4vw, 52px); align-items: flex-end; }
.contact h2 { max-width: 24ch; font-weight: 500; font-size: clamp(1.625rem, 1.1rem + 1.7vw, 2.625rem); line-height: 1.12; }
.contact-sub { margin-top: 12px; max-width: 56ch; font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem); line-height: 1.55; color: var(--cream); opacity: 0.88; }

/* Motion, layered on the v7 reveal system */
.reveal .card .visual { clip-path: inset(14% 0 0 0 round 2px); }
.reveal .card.in .visual { clip-path: inset(0 0 0 0 round 2px); }
.reveal .card .body, .reveal .card .note, .reveal .market-copy, .reveal .card .label { opacity: 0; transform: translateY(10px); transition: opacity 800ms var(--ease) 420ms, transform 800ms var(--ease) 420ms; }
.reveal .card.in .body, .reveal .card.in .note, .reveal .card.in .market-copy, .reveal .card.in .label { opacity: 1; transform: none; }
.reveal .card .label { transition-delay: 100ms; }
.reveal .half .timeline li { transform: translateY(8px); }
.reveal .half.in .timeline li { transform: none; }
.reveal .pillars .rv:nth-child(2) { transition-delay: 100ms; } .reveal .pillars .rv:nth-child(3) { transition-delay: 200ms; }
.reveal .stats div { opacity: 0; transform: translateY(12px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.reveal .stats div:nth-child(2) { transition-delay: 120ms; } .reveal .stats div:nth-child(3) { transition-delay: 240ms; }
.reveal .in .stats div { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars .pillar:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--colgap); align-content: start; }
  .pillars .pillar:nth-child(3) .label { grid-column: 1 / -1; }
  .pillars .pillar:nth-child(3) .visual { grid-row: 2 / span 2; }
  .pm { grid-template-columns: 1fr; row-gap: 48px; }
}
@media (max-width: 900px) {
  .intro .kicker, .glance-body { grid-column: 1 / -1; }
  .film figcaption, .film-frame { grid-column: 1 / -1; }
  .film figcaption { order: 2; margin-top: 16px; }
}
@media (max-width: 40rem) {
  .bar-nav { gap: 0; }
  .intel { padding-block: 48px 32px; }
  .stats div { padding: 14px 8px 14px 12px; gap: 8px; }
  .stats dd { font-size: 2.5rem; }
  .stats dt { font-size: 0.5625rem; letter-spacing: 0.1em; }
  .pillars { grid-template-columns: 1fr; row-gap: 36px; }
  .pillars .pillar:nth-child(3) { display: flex; }
  .pillar .visual { aspect-ratio: 2 / 1; }
  .half .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; border-top: 0; }
  .half .timeline li { border-top: 1px solid var(--rule-strong); }
  .market-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 16px; }
  .contact-copy { padding-top: 72px; }
  .film { padding-block: 16px 24px; }
  .film-frame { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal .card .body, .reveal .card .note, .reveal .market-copy, .reveal .card .label, .reveal .stats div { opacity: 1; transform: none; transition: none; }
  .bar-nav a { transition: none; }
}
/* iteration 2 */
.hero { z-index: 50; }
@media (max-width: 40rem) { .market-row { grid-template-columns: 1fr; } .half .visual.market { aspect-ratio: 16 / 10; } }
/* debug pass fixes */
@media (max-width: 40rem) {
  .eyebrow { font-size: 0.6875rem; letter-spacing: 0.12em; }
  .eyebrow::before { display: none; }
  .hero-shade { background:
    linear-gradient(180deg, rgba(20,45,39,0.38) 0%, rgba(20,45,39,0) 18%, rgba(20,45,39,0.12) 38%, rgba(20,45,39,0.52) 58%, rgba(12,28,24,0.74) 100%),
    linear-gradient(90deg, rgba(20,45,39,0.4) 0%, rgba(20,45,39,0) 80%); }
}
/* Typography as interface. Editorial text link CTAs, no button treatments */
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: clamp(24px, 2.6vw, 34px); }
.cta-label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(234,236,229,0.66); }
.cta-link { display: inline-flex; align-items: baseline; gap: 8px; padding-bottom: 7px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: #EAECE5; text-decoration: none;
  background: linear-gradient(#EAECE5, #EAECE5) 0 100% / 100% 1px no-repeat, linear-gradient(rgba(234,236,229,0.45), rgba(234,236,229,0.45)) 0 100% / 100% 1px no-repeat;
  background-size: 0 1px, 100% 1px; transition: background-size 220ms var(--ease); }
.cta-link:hover, .cta-link:focus-visible { background-size: 100% 1px, 100% 1px; }
.cta-arrow { font-size: 0.875em; line-height: 1; }
.contact .cta { margin-top: 0; }
.contact-copy { align-items: flex-end; }
.ring { background: none; border-radius: 0; padding: 0; font-weight: 500; color: var(--moss); right: 12px; bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .cta-link { transition: none; } }
/* Footer without the contact band */
.site-foot { background: var(--forest); }
.site-foot .foot { border-top: 0; }

/* Contact page */
.page-contact { background: var(--forest); color: #EAECE5; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.page-contact .bar::before { opacity: 1; }
.page-contact .bar-nav a[aria-current="page"] { opacity: 1; background-size: 100% 1px; }
.cpage { flex: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--colgap); row-gap: 32px; align-items: end; padding-block: clamp(128px, 16vh, 176px) clamp(56px, 8vh, 96px); }
.cpage-photo { grid-column: 1 / span 4; margin: 0; }
.cpage-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; filter: saturate(0.85); }
.cpage-copy { grid-column: 6 / -1; display: flex; flex-direction: column; gap: 20px; padding-bottom: 4px; }
.page-contact .kicker { color: var(--strata-on-dark); }
.cpage h1 { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); line-height: 1.14; font-weight: 500; letter-spacing: -0.025em; max-width: 24ch; color: var(--cream); }
.cpage-details { margin: 12px 0 0; padding: 0; border-top: 1px solid rgba(234,236,229,0.22); }
.cpage-details div { display: grid; grid-template-columns: minmax(7rem, 0.4fr) 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(234,236,229,0.12); }
.cpage-details dt { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(234,236,229,0.68); }
.cpage-details dd { margin: 0; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); font-weight: 500; letter-spacing: 0.005em; color: #EAECE5; }
.cpage-details a { color: #EAECE5; text-decoration: none; padding-bottom: 3px; background: linear-gradient(#EAECE5, #EAECE5) 0 100% / 0 1px no-repeat, linear-gradient(rgba(234,236,229,0.45), rgba(234,236,229,0.45)) 0 100% / 100% 1px no-repeat; transition: background-size 220ms var(--ease); }
.cpage-details a:hover, .cpage-details a:focus-visible { background-size: 100% 1px, 100% 1px; }
@media (max-width: 900px) { .cpage-photo { grid-column: 1 / span 5; } .cpage-copy { grid-column: 1 / -1; } .cpage { align-items: start; } }
@media (max-width: 40rem) { .cpage { padding-top: 104px; row-gap: 28px; } .cpage-photo { grid-column: 1 / span 8; } .cpage-details div { grid-template-columns: 6rem 1fr; } }
@media (prefers-reduced-motion: reduce) { .cpage-details a { transition: none; } }
/* Contact page is text only */
.cpage { align-items: end; }
.cpage-copy { grid-column: 1 / span 8; }
@media (max-width: 900px) { .cpage-copy { grid-column: 1 / -1; } }
/* Contact form, underline only */
.cpage { align-items: start; }
.cpage-copy { grid-column: 1 / span 6; }
.cform { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 14px; margin: 0; padding-top: 6px; }
.cform-title { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(234,236,229,0.68); margin: 0 0 2px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(234,236,229,0.68); }
.field .opt { text-transform: none; letter-spacing: 0.02em; color: rgba(234,236,229,0.5); margin-left: 4px; }
.field input, .field textarea { width: 100%; margin: 0; padding: 6px 0 8px; border: 0; border-bottom: 1px solid rgba(234,236,229,0.32); border-radius: 0; background: transparent; color: #EAECE5; font: 500 1rem/1.4 var(--font); letter-spacing: 0.005em; transition: border-color 220ms var(--ease); -webkit-appearance: none; appearance: none; }
.field textarea { resize: vertical; min-height: 4.4em; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: #EAECE5; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; box-shadow: 0 1px 0 0 #EAECE5; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cform-send { align-self: flex-start; margin-top: 10px; border: 0; padding: 0 0 7px; cursor: pointer; font-family: var(--font); background-color: transparent; }
.cform-error { font-size: 0.875rem; color: #F2A07E; }
.cform-done { font-size: 0.9375rem; line-height: 1.5; color: #EAECE5; max-width: 44ch; }
@media (max-width: 900px) { .cpage-copy, .cform { grid-column: 1 / -1; } .cform { padding-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .field input, .field textarea { transition: none; } }
/* Larger, high contrast logo, no glow and no box */
.brand img { height: 30px; width: auto; opacity: 1; }
.bar.stuck .brand img { height: 24px; }
@media (max-width: 40rem) { .brand img { height: 26px; } .bar.stuck .brand img { height: 22px; } }
/* Capacity graphic, annual report style */
.cap { margin: 6px 0 0; display: flex; flex-direction: column; gap: 22px; }
.cap-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); }
.cap-fig { display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 0 0; }
.cap-fig + .cap-fig { border-left: 1px solid rgba(20,45,39,0.14); padding-left: 14px; }
.cap-k { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); }
.cap-n { font-size: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem); line-height: 1; font-weight: 300; letter-spacing: -0.035em; color: var(--forest); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.cap-n small { font-size: 0.34em; font-weight: 500; letter-spacing: 0.04em; margin-left: 0.3em; color: var(--moss); }
.cap-fig-grow .cap-n { color: var(--rust); }
.cap-fig-grow .cap-n small { color: var(--rust); }
.cap-chart { padding-top: 4px; }
.cap-plot { position: relative; padding: 0 34px 26px 48px; display: flex; flex-direction: column; gap: 18px; }
.cap-tick { position: absolute; top: -6px; bottom: 0; left: calc(48px + (100% - 82px) * var(--x)); width: 0; border-left: 1px solid rgba(20,45,39,0.16); }
.cap-tick:first-child { border-left-color: var(--forest); }
.cap-tick b { position: absolute; bottom: 0; left: 0; transform: translateX(-50%); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; color: var(--moss); white-space: nowrap; }
.cap-plot::after { content: ""; position: absolute; left: 48px; right: 0; bottom: 20px; border-top: 1px solid rgba(20,45,39,0.28); }
.cap-row { position: relative; display: flex; align-items: center; height: 30px; }
.cap-yr { position: absolute; left: -48px; width: 40px; font-size: 0.75rem; font-weight: 500; color: var(--forest); font-variant-numeric: tabular-nums; }
.cap-track { position: relative; flex: 1; height: 100%; }
.cap-seg { position: absolute; top: 0; bottom: 0; left: calc(var(--l, 0) * 100%); width: calc(var(--w) * 100%); transform-origin: left center; }
.cap-base { background: var(--forest); }
.cap-grow { background: var(--strata); }
.cap-end { position: absolute; top: 50%; left: calc(var(--x) * 100% + 8px); transform: translateY(-50%); font-style: normal; font-size: 0.8125rem; font-weight: 500; color: var(--forest); font-variant-numeric: tabular-nums; }
.cap-brace { position: absolute; top: -12px; left: calc(var(--l) * 100%); width: calc(var(--w) * 100%); height: 7px; border: 1px solid var(--rust); border-bottom: 0; }
.cap-brace span { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--rust); white-space: nowrap; }
.cap-row:last-child { margin-top: 12px; }
.cap-src { font-size: 0.75rem; line-height: 1.5; color: var(--moss); margin: 0; }
.half .cap + .body { margin: 0; }
/* Draw in on scroll */
.reveal .cap .cap-seg { transform: scaleX(0); transition: transform 1300ms var(--ease) 350ms; }
.reveal .cap .cap-grow { transition-delay: 1100ms; }
.reveal .in .cap .cap-seg { transform: none; }
.reveal .cap .cap-end, .reveal .cap .cap-brace { opacity: 0; transition: opacity 600ms var(--ease) 1700ms; }
.reveal .cap .cap-row:first-child .cap-end { transition-delay: 1300ms; }
.reveal .in .cap .cap-end, .reveal .in .cap .cap-brace { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .reveal .cap .cap-seg, .reveal .cap .cap-end, .reveal .cap .cap-brace { transform: none; opacity: 1; transition: none; } }
@media (max-width: 40rem) {
  .cap-fig { padding-right: 6px; } .cap-fig + .cap-fig { padding-left: 10px; }
  .cap-n { font-size: 2rem; } .cap-k { font-size: 0.625rem; letter-spacing: 0.1em; }
  .cap-plot { padding-left: 40px; padding-right: 30px; } .cap-tick { left: calc(40px + (100% - 70px) * var(--x)); } .cap-plot::after { left: 40px; } .cap-yr { left: -40px; }
}
.cform [hidden] { display: none !important; } .cform-done:focus { outline: none; }
/* First load intro, once per session. Content stays in the DOM, hidden with opacity only */
.intro-mark { display: none; }
html.tsi .intro-mark { display: grid; position: absolute; inset: 0; z-index: 3; place-items: center; pointer-events: none; }
html.tsi .intro-mark img { width: min(46vw, 540px); height: auto; opacity: 0; clip-path: inset(0 100% 0 0); animation: introIn 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 100ms forwards; }
@keyframes introIn { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 35% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
html.tsi .bar, html.tsi .hero-copy > * { opacity: 0; transform: translateY(10px); }
html.tsi .hero-shade { opacity: 0.55; }
html.tsi .hero-shade, html.tsi-end .hero-shade { transition: opacity 900ms var(--ease); }
html.tsi-out .intro-mark img, html.tsi-skip .intro-mark img { animation: none; clip-path: none; opacity: 0; transition: opacity 400ms var(--ease); }
html.tsi-skip .intro-mark img { transition-duration: 200ms; }
html.tsi-out .hero-shade, html.tsi-skip .hero-shade { opacity: 1; }
html.tsi-out .bar, html.tsi-out .hero-copy > *, html.tsi-skip .bar, html.tsi-skip .hero-copy > * { opacity: 1; transform: none; transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
html.tsi-out .bar { transition-delay: 200ms; }
html.tsi-out .hero-copy > :nth-child(1) { transition-delay: 260ms; }
html.tsi-out .hero-copy > :nth-child(2) { transition-delay: 330ms; }
html.tsi-out .hero-copy > :nth-child(3) { transition-delay: 420ms; }
html.tsi-out .hero-copy > :nth-child(4) { transition-delay: 500ms; }
html.tsi-skip .bar, html.tsi-skip .hero-copy > * { transition-duration: 350ms; }
@media (max-width: 40rem) { html.tsi .intro-mark img { width: 68vw; } }
@media (prefers-reduced-motion: reduce) { html.tsi .intro-mark { display: none; } html.tsi .bar, html.tsi .hero-copy > * { opacity: 1; transform: none; } }
/* Editorial contact link on light sections */
.cta-ink { margin-top: clamp(20px, 2.4vw, 30px); }
.cta-ink .cta-link { color: var(--forest); background-image: linear-gradient(var(--forest), var(--forest)), linear-gradient(rgba(20,45,39,0.4), rgba(20,45,39,0.4)); }
/* Contrast fix for the optional tag on the contact form */
.field .opt { color: rgba(234,236,229,0.66); }
/* ===== Mobile pass (phones and small tablets only, desktop untouched) ===== */
@media (max-width: 768px) {
  :root { --gutter: 22px; }
  .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .hero { min-height: 100vh; min-height: 100svh; }
  .bar { padding-top: calc(env(safe-area-inset-top) + 10px); }
  .hero-copy { padding-bottom: calc(env(safe-area-inset-bottom) + 44px); }
  html.tsi .intro-mark { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .foot { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
  /* tap targets of at least 44px */
  .brand, .bar-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .cta-link { min-height: 44px; align-items: flex-end; padding-top: 12px; }
  .cta { margin-top: 12px; }
  .film-sound { min-height: 44px; }
  .cpage-details a { position: relative; }
  .cpage-details a::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
  .field input, .field textarea { min-height: 44px; font-size: 16px; }
  .cform-send { min-height: 44px; }
}
@media (max-width: 40rem) {
  .hero-sub { font-size: 1rem; line-height: 1.5; }
  /* Pillars become a calm horizontal snap row */
  .pillars { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 22px var(--gutter) 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; border-top: 0; }
  .pillars::-webkit-scrollbar { display: none; }
  .pillars .pillar, .pillars .pillar:nth-child(3) { flex: 0 0 84%; display: flex; scroll-snap-align: start; gap: 12px; }
  .pillars .pillar .visual { aspect-ratio: 16 / 9; }
  .pillar .body { font-size: 0.9375rem; line-height: 1.55; }
  .pillar .note { font-size: 0.8125rem; }
  .pillars-hint { display: flex; gap: 6px; padding: 10px 0 0; }
  .pillars-hint i { width: 18px; height: 2px; background: rgba(20,45,39,0.2); transition: background-color 220ms var(--ease); }
  .pillars-hint i.on { background: var(--forest); }
  .intel { padding-block: 40px 20px; }
  .intro { padding-bottom: 24px; }
  .film { padding-block: 8px 20px; }
  .pm { row-gap: 40px; padding-block: 32px 48px; }
  .cap { gap: 18px; }
  .cpage { padding-block: calc(env(safe-area-inset-top) + 104px) 48px; row-gap: 40px; }
}
@media (min-width: 40.0625rem) { .pillars-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .pillars-hint i { transition: none; } }
/* Edge to edge. Dark canvas so Safari status bar, overscroll and toolbar areas are never white */
html, body { background: var(--forest); }
main { background: var(--cream); }
.page-contact main { background: transparent; }
@media (max-width: 768px) { .film-sound { height: 44px; padding-block: 0; } }
/* ===== Mobile fix 26 Oct 2026 (phones and small tablets only, desktop untouched) =====
   iOS 26 Safari tints the status bar strip with the background of any fixed element touching the top edge.
   Keep nothing fixed at the top until the nav sticks, so the hero video runs up under the status bar.
   Raise the hero copy clear of Safari's floating bottom toolbar. */
@media (max-width: 768px) {
  .bar:not(.stuck) { position: absolute; }
  .progress { display: none; }
  body:has(.bar.stuck) .progress { display: block; }
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero-copy { padding-bottom: calc(env(safe-area-inset-bottom) + clamp(104px, 16svh, 150px)); }
}
@media (max-width: 40rem) {
  .hero-shade { background:
    linear-gradient(180deg, rgba(20,45,39,0.38) 0%, rgba(20,45,39,0) 16%, rgba(20,45,39,0.18) 32%, rgba(20,45,39,0.56) 48%, rgba(12,28,24,0.76) 100%),
    linear-gradient(90deg, rgba(20,45,39,0.4) 0%, rgba(20,45,39,0) 80%); }
}


/* SEO/GEO doc pages v10 + contrast fix 28 Oct 2026: light cream pages, dark forest text (WCAG AA) */
.entity-line { margin: 0 0 18px; max-width: 52ch; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); line-height: 1.45; color: rgba(20,45,39,0.78); font-weight: 500; }
.page-doc { background: var(--cream); color: var(--forest); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.page-doc .bar::before { opacity: 1; background: rgba(245,243,235,0.92); border-bottom: 1px solid rgba(20,45,39,0.12); }
.page-doc .bar-nav a { color: var(--forest); opacity: 0.78; background-image: linear-gradient(var(--forest), var(--forest)); }
.page-doc .bar-nav a[aria-current="page"] { opacity: 1; background-size: 100% 1px; }
.page-doc .bar-nav a:hover { opacity: 1; }
.doc { flex: 1; padding-block: clamp(120px, 14vh, 160px) clamp(56px, 8vh, 96px); max-width: 720px; }
.doc .kicker { color: var(--rust); margin: 0 0 12px; }
.doc h1 { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem); line-height: 1.14; font-weight: 500; letter-spacing: -0.025em; color: var(--forest); margin: 0 0 28px; max-width: 22ch; }
.doc-body { font-size: 1.0625rem; line-height: 1.65; color: var(--forest); }
.doc-body .lede { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.35rem); line-height: 1.45; color: var(--forest); margin: 0 0 28px; font-weight: 500; }
.doc-body h2 { margin: 36px 0 12px; font-size: 1.25rem; font-weight: 600; color: var(--forest); letter-spacing: -0.01em; }
.doc-body h3 { margin: 28px 0 10px; font-size: 1.0625rem; font-weight: 600; color: var(--forest); }
.doc-body p, .doc-body li { margin: 0 0 14px; color: var(--forest); }
.doc-body ul, .doc-body ol { padding-left: 1.25rem; margin: 0 0 18px; color: var(--forest); }
.doc-body a { color: var(--forest); text-decoration: none; border-bottom: 1px solid rgba(20,45,39,0.35); }
.doc-body a:hover { border-bottom-color: var(--forest); }
.doc-body .src { margin-top: 32px; font-size: 0.875rem; color: var(--moss); }
.doc-body strong { color: var(--forest); font-weight: 600; }
.doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 0.9375rem; color: var(--forest); }
.doc-body th, .doc-body td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(20,45,39,0.14); vertical-align: top; }
.doc-body caption { caption-side: bottom; text-align: left; margin-top: 8px; font-size: 0.8125rem; color: var(--moss); }
.crumbs { margin: 0 0 24px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--moss); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: 0.5; }
.crumbs a { color: var(--moss); text-decoration: none; }
.crumbs a:hover { color: var(--forest); }
.faq-item { border-top: 1px solid rgba(20,45,39,0.14); padding: 16px 0; }
.faq-item:last-of-type { border-bottom: 1px solid rgba(20,45,39,0.14); }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--forest); list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { margin: 12px 0 0; color: var(--forest); }
.page-doc .cta-link { color: var(--forest); background-image: linear-gradient(var(--forest), var(--forest)), linear-gradient(rgba(20,45,39,0.35), rgba(20,45,39,0.35)); }
.page-doc .cta-arrow { color: var(--rust); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 16px; }
.foot-nav a { color: rgba(234,236,229,0.7); text-decoration: none; font-size: 0.8125rem; letter-spacing: 0.04em; }
.foot-nav a:hover { color: var(--cream); }
@media (max-width: 40rem) {
  .doc { padding-top: calc(env(safe-area-inset-top) + 104px); }
}