/* ============================================================
   MODAL — Home (landing) page styles
   Hero, manifesto, MODAL system, discipline blocks.
   ============================================================ */

/* ---------- Hero scroll container ----------
   Tightened from 580/480 → 520/420 to shorten the dead-air buffer
   between the factory video being fully revealed and the manifesto
   ("A new way of thinking") sliding in. All scroll-mapped
   animations are fractional so they compress proportionally. */
.hero-section {
  position: relative;
  height: 520vh;
}
.scroll-spacer {
  height: 420vh;
  pointer-events: none;
}
.sticky-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  /* Lives BELOW the manifesto + every section after it so section-2
     can slide up and visibly overlap the factory video. See the
     negative margin-top on .section-2 for the overlap geometry. */
  z-index: 1;
}

/* ---------- Hero background (black + looping space video + earth canvas) ---------- */
.bg-black {
  position: fixed; inset: 0; z-index: 0;
  background: var(--color-black);
}
.earth-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  user-select: none;
  /* Pure black aura at 50% opacity — reads as a continuous dark
     extension of the earth's silhouette, fading into space. */
  filter:
    drop-shadow(0 0 14px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 80px rgba(0, 0, 0, 0.5));
}
@media (max-width: 768px) {
  /* Mobile: drop the 80px outer shadow — it's a fullscreen GPU
     compositor pass and the biggest single contributor to the "page
     feels janky" sensation on iOS Safari. The 10px aura still reads. */
  .earth-canvas {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.55));
  }
}

/* ---------- Australia callout (drawn over the earth at end of hero) ---------- */
.oz-callout {
  position: fixed;
  inset: 0;
  z-index: 2;             /* above earth-canvas (z=0), below hero text (z=10) */
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: visible;
}
.oz-line {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Hidden at rest — JS ramps opacity with the stroke-dashoffset draw so
     the round start-cap doesn't render as a stray dot at the Sydney anchor
     before the line is meant to appear. */
  opacity: 0;
  /* dashoffset/dasharray set inline by JS to drive the draw-on animation */
}
.oz-label {
  fill: var(--color-white);
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  opacity: 0;             /* JS fades this in once the line is drawn */
}
@media (min-width: 769px) {
  .oz-line { stroke-width: 1.5; }
  .oz-label { font-size: 13px; letter-spacing: 0.18em; }
}
.earth {
  position: fixed;
  z-index: 1;
  width: min(150vh, 169vw);
  height: min(150vh, 169vw);
  left: 50%;
  /* sit globe well below the fold so only a sliver of its top arc shows under the letters */
  top: 100%;
  transform: translate(-50%, -28%);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 80px rgba(60, 110, 180, 0.18));
  animation: earth-drift 24s ease-in-out infinite;
}

/* ---------- Hero stage layout ---------- */
.stage {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--space-10) var(--space-12);
}
@media (max-width: 760px) {
  .stage { padding: 0 var(--space-6) var(--space-8); }
}

/* ---------- Floating MODAL letters ---------- */
.modal-letters {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.08rem, 0.4vw, 0.44rem);
  pointer-events: none;
  /* Bottom padding shifts the flex centering up by half its value;
     top padding shifts it down. The top padding here drops the
     letters well below the viewport centre so they sit over the
     Middle East / Asia continents on the earth keystone instead of
     floating above them. */
  padding: clamp(14vh, 22vh, 28vh) var(--space-8) 0;
  perspective: 1200px;
}
.letter {
  height: clamp(78px, 14.4vw, 202px);
  width: auto;
  display: block;
  filter:
    drop-shadow(0 18px 28px rgba(40, 80, 140, 0.25))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 50%;
}
/* ---------- Headline + quote row ---------- */
.headline-block {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  max-width: calc(100% - 2 * var(--space-6));
  text-align: right;
  /* JS only translates this on scroll; anchoring transform-origin here in
     CSS lets the hot path skip a per-frame style write. */
  transform-origin: top right;
  will-change: transform, opacity;
}
.headline {
  font-family: var(--font-sans);
  /* Trimmed from clamp(2.11rem, 4vw, 4.6rem). The previous max felt
     oversized next to the top-left H2 — bringing both into a closer
     ratio (~1.2× headline / H2) reads more balanced on wide screens. */
  font-size: clamp(1.95rem, 3.3vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-white);
  font-weight: 500;
  max-width: none;
  white-space: nowrap;
  text-wrap: nowrap;
}
.headline em {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  /* Brighter brand green (same hue as #16704a) so the emphasis reads
     clearly against the dark earth/space hero background. */
  color: var(--color-green-bright);
}

.quote-row {
  display: inline-flex; align-items: center; gap: 0.85rem;
  width: max-content;
  margin-top: 1.5rem;
  color: rgba(var(--color-white-rgb), 0.55);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  /* Promote the layer at rest so the JS no longer needs to set
     transform:translate3d(0,0,0) every scroll frame just to keep it
     composited. */
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}
.quote-row .line {
  height: 1px; width: 40px;
  /* White dash beside MODAL CORPORATION — consistent with the
     ct-quote-row treatment on contact / portal / gate. */
  background: rgba(var(--color-white-rgb), 0.55);
}

/* ---------- Body card (typing-effect blurb) ---------- */
.body-card {
  position: absolute;
  left: var(--space-10);
  /* Lifted from 6rem to 4.5rem so on shorter wide viewports there's
     more headroom above the card before the top-left tpl-heading
     sub-paragraph closes in. */
  bottom: 4.5rem;
  /* Portrait orientation — narrower envelope so the typed body wraps
     to ~6-8 lines and the card reads as taller-than-wide. Padding
     unchanged so the inner rhythm stays the same. */
  max-width: clamp(17rem, 16vw, 20rem);
  padding: clamp(1.2rem, 1.6vw, 1.6rem) clamp(1.4rem, 1.8vw, 1.8rem);
  border-radius: var(--radius-card);
  background: rgba(10, 12, 14, 0.55);
  border: 1px solid rgba(var(--color-white-rgb), 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(110%);
  backdrop-filter: blur(14px) saturate(110%);
  box-shadow: 0 1px 0 rgba(var(--color-white-rgb), 0.04) inset;
  color: rgba(var(--color-white-rgb), 0.85);
  font-size: clamp(0.95rem, 1.1vw, 1.2rem);
  line-height: 1.6;
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  will-change: transform, opacity;
  z-index: 9;
  pointer-events: none;
}
.body-card[data-active="1"] { pointer-events: auto; }
.body-card p {
  font-family: var(--font-sans);
  font-weight: 400;
}
.body-card p + p { margin-top: 0.75rem; }
.body-card .caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: rgba(var(--color-white-rgb), 0.85);
  vertical-align: -0.12em;
  margin-left: 0.08em;
  animation: caret-blink 0.95s steps(1, end) infinite;
}
/* Ultra-wide: widen the body card so the long blended copy wraps
   to fewer (shorter) lines. On a short ultra-wide window (e.g.
   2560×700) the card's height was pushing it up into the top-left
   tpl-heading area; a wider envelope shaves the height back down
   so the two blocks never collide. */
@media (min-width: 1700px) {
  .body-card { max-width: clamp(22rem, 18vw, 30rem); }
}

@media (max-width: 760px) {
  .body-card { left: var(--space-5); right: var(--space-5); max-width: none; bottom: 5rem; }

  /* Shrink hero letters so 5 of them fit in 375px viewport */
  .modal-letters { padding: 0 var(--space-3); gap: 0.05rem; }
  .letter { height: clamp(54px, 14vw, 92px); }

  /* Tpl overlay panels — single column, tighter */
  .tpl-heading { top: 5rem; left: var(--space-5); right: var(--space-5); max-width: none; }
  .tpl-heading h2 { font-size: clamp(1.4rem, 7vw, 2.2rem); }
  .tpl-specs { right: var(--space-5); left: var(--space-5); width: auto; top: auto; bottom: 14rem; transform: none; }
  .tpl-tags { right: var(--space-5); left: var(--space-5); justify-content: flex-start; bottom: 11rem; max-width: none; }
}

/* ============================================================
   Template-inspired hero overlay (heading, specs, tags)
   ============================================================ */
.tpl-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11;
}
.tpl-overlay > * { pointer-events: auto; }

.tpl-heading {
  position: absolute;
  /* 8rem leaves a comfortable gap from the floating nav (top: 1.25rem
     + ~3rem inner height); the .headline animates up to the same Y on
     the right so the two read as horizontally aligned brand labels. */
  top: 8rem;
  left: var(--space-10);
  max-width: 28rem;
  opacity: 0;
  transform: translate3d(-12px, 0, 0);
  will-change: transform, opacity;
}
.tpl-heading h2 {
  font-family: var(--font-display);
  /* Reduced from clamp(2rem, 3.4vw, 3.8rem) so the 4-line H2 doesn't
     dominate the top-left and crowd the body-card below it on shorter
     viewports. Smaller line height also tightens the stack. */
  font-size: clamp(1.7rem, 2.5vw, 2.85rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-white);
}
.tpl-heading h2 .slash { color: rgba(var(--color-white-rgb), 0.55); }
.tpl-heading p {
  margin-top: var(--space-3);
  max-width: 30rem;
  font-size: clamp(0.85rem, 1vw, 1.1rem);
  line-height: 1.5;
  color: rgba(var(--color-white-rgb), 0.6);
  letter-spacing: 0.01em;
}

.tpl-specs {
  position: absolute;
  right: var(--space-10);
  /* Was top: 50% (centred) — moved higher so the card sits in the
     upper-right area, leaving more breathing space above the .tpl-tags
     pills and the bottom-right body content. */
  top: 32%;
  transform: translate3d(12px, 0, 0);
  width: clamp(22rem, 22vw, 28rem);
  padding: var(--space-5) 1.4rem;
  opacity: 0;
  will-change: transform, opacity;
}
.tpl-specs .specs-title {
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 0.8vw, 0.92rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), 0.6);
  margin-bottom: 0.85rem;
}
.tpl-specs .row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(var(--color-white-rgb), 0.08);
  font-size: clamp(0.85rem, 1vw, 1.1rem);
}
.tpl-specs .row:first-of-type { border-top: 0; }
.tpl-specs .row .label { color: rgba(var(--color-white-rgb), 0.55); letter-spacing: 0.04em; }
.tpl-specs .row .value { color: rgba(var(--color-white-rgb), 0.95); font-weight: 500; }

.tpl-tags {
  position: absolute;
  right: var(--space-10);
  bottom: 2.75rem;
  display: flex; gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 32rem;
}

@media (max-width: 980px) {
  .tpl-specs { display: none; }
  .tpl-heading { max-width: 18rem; top: 5rem; }
  .tpl-heading h2 { font-size: clamp(1.6rem, 5.5vw, 2.2rem); }
  .tpl-tags { display: none; }
  /* On tablet + mobile, the headline animates to the top-right and
     would overlap with the .tpl-heading that now spans full width.
     The tpl-heading already carries the brand statement at this
     breakpoint, so the secondary headline is hidden for clean
     stacking. The body card still types in below the earth.
     (Phones re-show it pinned at the bottom — see the 760px block.) */
  .headline-block { display: none; }
}

/* Phone: re-show the hero headline + MODAL Corporation row, pinned at
   the bottom and centred. The desktop fly-up transform is cancelled so
   it stays put instead of lifting into the top-left heading; it wraps
   to two lines and fades out naturally as the factory slides up. */
@media (max-width: 760px) {
  .headline-block {
    display: block;
    left: var(--space-5);
    right: var(--space-5);
    bottom: 2rem;
    max-width: none;
    text-align: center;
    transform: none !important;
    z-index: 11;
  }
  .headline {
    white-space: normal;
    text-wrap: balance;
    font-size: clamp(1.6rem, 7vw, 2.3rem);
  }
  .quote-row {
    justify-content: center;
    margin-top: 1rem;
  }
}

/* ============================================================
   Section 2 — Manifesto (white panel slides up)
   ============================================================ */
/* ---------- Section 2A: Factory (full-screen video, fades in over hero) ----------
   Section's BACKGROUND alpha is driven independently of the VIDEO opacity
   (both set inline by scroll-effects.js). The bg ramps to 1 fast so it
   covers the fixed hero bg-black + earth-canvas as soon as the factory
   transition begins — that stops the hero showing through the letterbox
   bars when object-fit: contain leaves spare room around the 16:9 video.
   The video then fades in on top at its own (slower) easing curve. */
.section-factory {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, var(--factory-bg-alpha, 0));
  will-change: background-color;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}
.section-factory[data-active="1"] { pointer-events: auto; }
.factory-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover fills the entire viewport with the video (any spare aspect
     gets cropped). The fullscreen control in the corner lets viewers
     who want the full 1280×720 frame open the native player. */
  object-fit: cover;
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
  user-select: none;
}
/* When opened fullscreen, the <video> becomes the fullscreen element. Beat
   the scroll-driven inline opacity and the chrome-less inline styling —
   without this it renders black with no usable native controls (the inline
   opacity and pointer-events:none carry into fullscreen). Letterbox (contain)
   so the full 16:9 frame shows. Separate rules per vendor pseudo so an
   unknown selector can't invalidate the whole group. */
.factory-video:fullscreen {
  opacity: 1 !important;
  pointer-events: auto !important;
  object-fit: contain;
  background: #000;
}
.factory-video:-webkit-full-screen {
  opacity: 1 !important;
  pointer-events: auto !important;
  object-fit: contain;
  background: #000;
}
/* Bottom-right control stack — fades in once the factory section
   is the active stage. Play/pause on top, mute below. Frosted-
   glass pills, brand-green tint when active. */
.factory-controls {
  position: absolute;
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  right: clamp(1.25rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.section-factory[data-active="1"] .factory-controls {
  opacity: 1;
  pointer-events: auto;
}
.factory-play,
.factory-sound,
.factory-fullscreen {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  backdrop-filter: blur(10px) saturate(110%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.factory-play:hover,
.factory-sound:hover,
.factory-fullscreen:hover {
  background: rgba(0, 0, 0, 0.65);
  transform: scale(1.04);
}
.factory-play:focus-visible,
.factory-sound:focus-visible,
.factory-fullscreen:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 3px;
}

/* Fullscreen toggle — visible across every breakpoint. Mobile users
   get a dedicated affordance to escape the constrained viewport, and
   desktop / ultra-wide users get a one-click way to push the factory
   reel out to the full screen rather than hunting in the native
   media-controls overflow. */
.factory-fullscreen {
  display: flex;
}
.factory-fullscreen svg {
  width: 20px;
  height: 20px;
}

/* Play / pause icon swap — driven by [data-state] on the button. */
.factory-play-icon,
.factory-sound-icon {
  width: 20px;
  height: 20px;
}
.factory-play[data-state="playing"] .factory-play-icon--paused  { display: none; }
.factory-play[data-state="paused"]  .factory-play-icon--playing { display: none; }
.factory-sound[data-state="muted"]   .factory-sound-icon--unmuted { display: none; }
.factory-sound[data-state="unmuted"] .factory-sound-icon--muted   { display: none; }

/* Active states pick up the brand-green tint. */
.factory-sound[data-state="unmuted"] {
  background: rgba(22, 112, 74, 0.65);
  border-color: rgba(22, 112, 74, 0.9);
}
.factory-sound[data-state="unmuted"]:hover {
  background: rgba(22, 112, 74, 0.85);
}

/* ---------- Section 2B: Manifesto — slides up over the factory video ----------
   `margin-top: -100vh` pulls the section into the last 100vh of the
   hero-section's scroll range. Because the sticky-stage is still
   pinned there (sticky range = 0 → heroH − 100vh) and section-2
   stacks at a higher z-index, the manifesto slides up from the
   bottom of the viewport and visibly covers the factory video as
   the user scrolls. Every section after this also runs at z-index
   ≥ 2 so the overlay continues cleanly. */
.section-2 {
  position: relative;
  background: var(--color-white);
  color: var(--color-ink);
  min-height: 100vh;
  margin-top: -100vh;
  z-index: 2;
  overflow: hidden;
}

.s2-wrap {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 9rem clamp(1.5rem, 6vw, 6rem) 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--content-max);
  margin: 0 auto;
  box-sizing: border-box;
}
.s2-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 var(--space-10) 0;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.s2-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: var(--color-green);
}
.s2-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  /* Font size scaled by vw so the longest line
     ("most universal product on Earth,") always fits on one line at
     any browser width without breaking — pairs with .s2-line nowrap
     below to lock the headline at six strict lines. */
  font-size: clamp(1.3rem, 5vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  margin: 0 0 clamp(2rem, 4vw, 3.5rem) 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.1rem, 0.3vw, 0.4rem);
  max-width: none;
}
.s2-headline em      { font-style: italic; color: var(--color-ink); }
.s2-headline .em-not { font-style: italic; color: var(--color-green); }

/* Each headline sentence sits on its own line, locked at six lines
   regardless of viewport width. white-space:nowrap pairs with the
   vw-driven font-size on .s2-headline above so resizing the browser
   never re-flows the headline into a different shape. Animation in
   animations.css shoots each line in from the right. */
.s2-line {
  display: block;
  white-space: nowrap;
}

/* MODAL changes that. — the climactic punch line.
   Bigger than the headline, brand green, italic, sets in display weight.
   The "O" is replaced by a slowly spinning green logo (img.s2-modal-o). */
.s2-changes {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(2.8rem, 6vw, 6.4rem);
  line-height: 1.1;
  color: var(--color-green);
  margin: 0 0 var(--space-12) 0;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.s2-changes strong {
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.01em;
  /* inline-flex so the spinning logo aligns to the text baseline
     without dragging the line-box around. */
  display: inline-flex;
  align-items: center;
  gap: 0.04em;
}
/* The spinning green logo — sits inside <strong> between M and DAL,
   sized to the capital-letter height so it reads as the O glyph. */
.s2-modal-o {
  display: inline-block;
  height: 0.86em;
  width: auto;
  margin: 0 0.02em;
  /* Nudge down a hair so the optical centre matches the M / DAL bowl. */
  transform-origin: 50% 50%;
  animation: s2-modal-o-spin 9s linear infinite;
  /* GPU layer so the rotation doesn't jank the surrounding text. */
  will-change: transform;
}
@keyframes s2-modal-o-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .s2-modal-o { animation: none; }
}
.s2-support {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.7;
  color: rgba(var(--color-ink-rgb), 0.72);
  max-width: 56ch;
  margin: 0;
}
@media (max-width: 760px) {
  .s2-wrap { padding-top: 7rem; }
}

/* ============================================================
   Section 3 — The MODAL system (two streams: AOD + DCM)
   Replaced the 1-image-left + 1-copy-right grid with a centered
   intro block + two stream cards side-by-side. Each stream now
   carries its 3 disciplines as compact list items, collapsing
   the six standalone 03.1–03.6 sections that used to follow.
   ============================================================ */
.section-3 {
  position: relative;
  background: var(--color-white);
  color: var(--color-ink);
  padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 6rem);
  box-sizing: border-box;
  z-index: 5;
  overflow: hidden;
}
.s3-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
}
.s3-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 var(--space-8) 0;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.s3-eyebrow .num {
  color: rgba(var(--color-ink-rgb), 0.45);
  font-weight: 500;
}
.s3-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: var(--color-green);
}
.s3-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  margin: 0 0 var(--space-6) 0;
  max-width: 22ch;
  text-wrap: balance;
}
.s3-headline em {
  font-style: italic;
  color: var(--color-green);
}
.s3-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.7;
  color: rgba(var(--color-ink-rgb), 0.72);
  margin: 0 0 clamp(3rem, 5vw, 4.5rem) 0;
  max-width: 60ch;
}
.s3-sub strong { color: var(--color-ink); font-weight: 600; }

/* ---- two streams: AOD + DCM ---- */
.s3-streams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.s3-stream {
  position: relative;
  padding: clamp(1.75rem, 2.8vw, 2.5rem);
  border: 1px solid rgba(var(--color-ink-rgb), 0.10);
  border-radius: var(--radius-card);
  background: rgba(var(--color-ink-rgb), 0.015);
  display: flex;
  flex-direction: column;
  /* Hover responds instantly — no transition delay/ramp on the
     border / background / lift. */
}
.s3-stream:hover {
  border-color: rgba(22, 112, 74, 0.55);
  background: rgba(var(--color-ink-rgb), 0.03);
  transform: translateY(-3px);
  /* Soft brand-green outer glow so the green border reads as lit
     rather than just a colour change. */
  box-shadow: 0 0 28px rgba(22, 112, 74, 0.32);
}
.s3-stream-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--color-ink-rgb), 0.55);
  margin: 0 0 0.6rem 0;
}
.s3-stream-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  letter-spacing: -0.03em;
  color: var(--color-ink);
  margin: 0 0 0.25rem 0;
  line-height: 1;
}
.s3-stream-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: var(--color-ink);
  margin: 0 0 0.5rem 0;
}
.s3-stream-claim {
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.4;
  color: var(--color-green);
  margin: 0 0 clamp(1.5rem, 2.5vw, 2rem) 0;
  max-width: 28ch;
}
.s3-stream-disciplines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.10);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
}
.s3-discipline-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0 0 0.3rem 0;
}
.s3-discipline-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.9rem, 1.0vw, 1rem);
  line-height: 1.55;
  color: rgba(var(--color-ink-rgb), 0.72);
  margin: 0;
  max-width: 42ch;
}

/* ---- system platform visual sits under the two streams ---- */
.s3-visual {
  margin: clamp(3rem, 5vw, 4.5rem) 0 0 0;
  text-align: center;
  /* Perspective enables the monitor flip-up — see animations.css.
     transform-style preserves the 3D rotation on the inner <img>. */
  perspective: 1400px;
  perspective-origin: 50% 100%;
  transform-style: preserve-3d;
}
.s3-visual-img {
  width: 100%;
  max-width: 1100px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius-card);
  user-select: none;
  -webkit-user-drag: none;
  /* Rotate around the bottom edge so the monitor "stands up" from
     the page — animations.css drives the in-view transition. */
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}
@media (max-width: 880px) {
  .s3-streams { grid-template-columns: 1fr; }
}

/* ============================================================
   Section Technology — 5 IP pillars, editorial list layout
   Reads top-to-bottom as a sequence: number, name, body.
   ============================================================ */
.section-tech {
  position: relative;
  background: var(--color-white);
  color: var(--color-ink);
  padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 6rem);
  box-sizing: border-box;
  overflow: hidden;
  z-index: 5;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.06);
}
.s-tech-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}
.s-tech-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 var(--space-8) 0;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.s-tech-eyebrow .num {
  color: rgba(var(--color-ink-rgb), 0.45);
  font-weight: 500;
}
.s-tech-eyebrow::before {
  content: ""; display: inline-block;
  width: 2.2rem; height: 1px; background: var(--color-green);
}
.s-tech-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  margin: 0 0 var(--space-6) 0;
  max-width: 26ch;
  text-wrap: balance;
}
.s-tech-headline em {
  font-style: italic;
  color: var(--color-green);
}
.s-tech-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.7;
  color: rgba(var(--color-ink-rgb), 0.72);
  margin: 0 0 clamp(3rem, 6vw, 5rem) 0;
  max-width: 60ch;
}

/* Editorial sequence: number on the left, name + body on the right.
   Each pillar separated by a hairline. */
.s-tech-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.12);
}
.s-tech-pillar {
  display: grid;
  grid-template-columns: minmax(60px, 90px) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: baseline;
  padding: clamp(1.75rem, 2.8vw, 2.5rem) 0;
  border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.12);
}
.s-tech-num {
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 0.9vw, 0.9rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0;
}
.s-tech-content {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 0.5rem;
  align-items: baseline;
}
.s-tech-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--color-ink);
  margin: 0;
}
.s-tech-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.6;
  color: rgba(var(--color-ink-rgb), 0.72);
  margin: 0;
  max-width: 52ch;
}

@media (max-width: 880px) {
  .s-tech-pillar { grid-template-columns: 1fr; row-gap: 0.5rem; }
  .s-tech-content { grid-template-columns: 1fr; }
}

/* ============================================================
   Section Audience — three client groups, three cards.
   Lighter institutional treatment than the Technology editorial
   list — these are CTAs to "this is for you", not deep IP.
   ============================================================ */
.section-audience {
  position: relative;
  /* White stage — matches the system / technology sections above for
     a continuous light-band reading experience. */
  background: var(--color-white);
  color: var(--color-ink);
  padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 6rem);
  box-sizing: border-box;
  overflow: hidden;
  z-index: 5;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.06);
}
.s-aud-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}
.s-aud-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-8) 0;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.s-aud-eyebrow::before {
  content: ""; display: inline-block;
  width: 2.2rem; height: 1px; background: var(--color-green);
}
.s-aud-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  margin: 0 0 var(--space-6) 0;
  max-width: 22ch;
  text-wrap: balance;
}
.s-aud-headline em {
  font-style: italic;
  color: var(--color-green);
}
.s-aud-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.7;
  color: rgba(var(--color-ink-rgb), 0.72);
  margin: 0 0 clamp(3rem, 6vw, 5rem) 0;
  max-width: 60ch;
}

.s-aud-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.s-aud-card {
  padding: clamp(2rem, 3vw, 2.5rem);
  /* Light stage now — subtle ink-tinted card chrome instead of the
     white-on-dark glass it used to be. */
  background: rgba(var(--color-ink-rgb), 0.025);
  border: 1px solid rgba(var(--color-ink-rgb), 0.10);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  /* Hover responds instantly — no transition delay/ramp on the
     border / background / lift / shadow. */
}
.s-aud-card:hover {
  background: rgba(var(--color-ink-rgb), 0.04);
  border-color: rgba(22, 112, 74, 0.55);
  transform: translateY(-3px);
  /* Layered: brand-green glow + the existing soft drop-shadow. */
  box-shadow:
    0 0 28px rgba(22, 112, 74, 0.32),
    0 10px 30px rgba(0, 0, 0, 0.12);
}
.s-aud-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 1.5rem 0;
}
.s-aud-name {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  margin: 0 0 0.65rem 0;
}
.s-aud-claim {
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.3;
  color: var(--color-green);
  margin: 0 0 1.25rem 0;
  max-width: 24ch;
  text-wrap: balance;
}
.s-aud-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.9rem, 1.0vw, 1rem);
  line-height: 1.6;
  color: rgba(var(--color-ink-rgb), 0.72);
  margin: 0;
}

@media (max-width: 980px) {
  .s-aud-list { grid-template-columns: 1fr; }
  .s-aud-card { padding: 1.75rem; }
}

/* ============================================================
   Section 4 — The MODAL Advantage (metrics grid)
   ============================================================ */
.section-4 {
  position: relative;
  /* White stage — matches the surrounding sections; brand green is
     reserved for accents and emphasis on the metric tiles. */
  background: var(--color-white);
  color: var(--color-ink);
  padding: clamp(5rem, 9vw, 9rem) clamp(1.5rem, 6vw, 6rem);
  box-sizing: border-box;
  overflow: hidden;
  z-index: 5;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.06);
}
.s4-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}
.s4-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-8) 0;
  display: inline-flex; align-items: center; gap: 0.85rem;
}
.s4-eyebrow::before {
  content: ""; display: inline-block;
  width: 2.2rem; height: 1px; background: var(--color-green);
}
.s4-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  margin: 0 0 var(--space-6) 0;
  max-width: 26ch;
  text-wrap: balance;
}
.s4-headline em {
  font-style: italic;
  color: var(--color-green);
}
.s4-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.7;
  color: rgba(var(--color-ink-rgb), 0.72);
  margin: 0 0 clamp(3rem, 6vw, 5rem) 0;
  max-width: 56ch;
}

/* Title row — headline left, factory gripper right. The claw image
   is cropped down to just the end-effector and reads as a sharp
   accent next to the headline, not a full machine illustration.
   Static (no float animation). */
.s4-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0 0 var(--space-6) 0;
}
.s4-title-row .s4-headline {
  margin: 0;
  flex: 1 1 auto;
}
.s4-claw {
  flex: 0 0 auto;
  margin: 0;
  /* The headline sets the row height; the claw centers within it. */
}
.s4-claw-img {
  display: block;
  width: auto;
  /* Whole robot — arm + gripper + mobile base — at a readable size
     beside the headline. Aspect is ~0.91 (510×560 source). */
  height: clamp(150px, 17vw, 240px);
  user-select: none;
  -webkit-user-drag: none;
  /* Soft grounding shadow + faint brand-tinted halo so it doesn't
     read as a pasted cutout. */
  filter:
    drop-shadow(0 14px 26px rgba(0, 0, 0, 0.20))
    drop-shadow(0 0 34px rgba(22, 112, 74, 0.10));
}
@media (max-width: 760px) {
  /* Stack: robot above the headline, smaller, no overflow. */
  .s4-title-row {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1rem;
  }
  .s4-claw-img { height: clamp(120px, 30vw, 180px); }
}

.s4-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(3rem, 6vw, 5rem) 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}
@media (max-width: 1099px) {
  .s4-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .s4-grid { grid-template-columns: 1fr; }
}

.s4-metric {
  padding-top: clamp(1rem, 1.5vw, 1.5rem);
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.s4-value {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-ink);
  margin: 0;
}
.s4-value .pct {
  font-weight: 500;
  margin-left: 0.04em;
}
.s4-value .dash {
  font-weight: 400;
  margin: 0 0.06em;
}
.s4-value--text {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.02em;
  /* Brand-green accent — the one tile that gets the colour pop. */
  color: var(--color-green);
}
.s4-unit {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: var(--color-green);
  margin: 0 0 0.3rem 0;
}
.s4-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(var(--color-ink-rgb), 0.72);
  margin: 0;
}

.s4-closing {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  line-height: 1.4;
  color: rgba(var(--color-ink-rgb), 0.92);
  margin: 0;
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.14);
  text-wrap: balance;
}

/* ============================================================
   SECTION 5: THE MODAL FLEET — closing section before the footer
   Clean white block: the truck (.s5-truck-img, absolutely centred)
   floats over white with the copy in named grid cells around it.
   The misty pine band (.hp-tree-band) is a separate sibling below.
   ============================================================ */
.section-5 {
  position: relative;
  z-index: 1;
  /* Truck + text read as their own clean white block. The misty
     pine band is a SEPARATE sibling below (.hp-tree-band) — same
     standalone-band pattern as About / Team / Projects — so the two
     are visually separated rather than the trees sitting behind the
     truck. Section stays fully opaque white so the fixed black-space
     hero backdrop never leaks through. */
  background-color: var(--color-white);
  color: var(--color-ink);
  /* Tight vertical rhythm — headline, truck, side copy and closing
     italic all read as one composition. Top padding trimmed hard to
     close the gap between the previous section and the eyebrow /
     headline; bottom padding stays small so the trees + closing
     italic land just past the truck silhouette. */
  padding: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 5vw, 5rem) clamp(2rem, 4vw, 4rem);
  box-sizing: border-box;
  overflow: hidden;
  /* z-index:1 lifts this white block above the fixed black-space hero
     (.hero-bg, z-index:0) so its background covers it. The tree band
     below sits at z-index:2 so it renders above this block rather
     than being clipped by it. */
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.06);
  /* Tightened upper cap so ultra-wide (2560×1080 ≈ 1080×0.85=918) and
     desktop (1440×900 ≈ 765, min wins → 780) land in a similar
     envelope — keeps the composition compact across both viewports
     instead of letting section-5 sprawl on wide monitors. */
  min-height: clamp(780px, 85vh, 940px);
}

/* Ultra-wide override — extends the section taller at the TOP with
   a larger white retainer above the eyebrow / headline, pushing the
   whole composition (truck, side text, tree image at center bottom)
   slightly down so the lower portion reads as more grounded against
   the forest. Padding-top alone grows the section's overall height
   while keeping the content's relative arrangement intact. */
@media (min-width: 1700px) {
  .section-5 {
    padding-top: clamp(7rem, 8vw, 10rem);
    /* Section min-height bumped so the truck silhouette + headline +
       side copy + closing italic all have comfortable vertical
       clearance on ultra-wide / short-window combinations (e.g. a
       1920×800 browser window). The previous 95vh/1080 cap left the
       truck silhouette overlapping the multi-line headline once the
       headline wrapped to two lines at certain widths. */
    min-height: clamp(1000px, 100vh, 1200px);
  }
}

/* Tree band — same misty pine band used on About / Team / Projects.
   A standalone full-width sibling BELOW the Fleet section, so the
   truck/text block and the trees read as separated. See the inline
   note below for the z-index layering. */
.hp-tree-band {
  position: relative;
  display: block;
  /* Full forest sits directly below the white Fleet block. z-index:2
     keeps it ABOVE section-5 (z-index:1) AND the fixed black-space
     hero (.hero-bg, z-index:0), so the whole band renders instead of
     being clipped to a sliver. No negative top margin — the old
     -22rem pulled the band UP behind section-5 (z-index:1 > 0), which
     is exactly what cut the trees off. The foggy image top blends
     into the section's white above; the green canopy meets the
     green footer below. */
  margin: 0 calc(50% - 50vw) 0;
  width: 100vw;
  background: var(--color-white);
  line-height: 0;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.hp-tree-band img {
  display: block;
  width: 100%;
  height: auto;
}
.s5-wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: inherit;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto 1fr auto;
  /* Eyebrow stays top-left on its own row; headline drops to row 2
     centred so it no longer reads as horizontally aligned with the
     "05. End to end" eyebrow. Side copy + closing italic carry on
     below. */
  grid-template-areas:
    "eyebrow  .        ."
    ".        headline ."
    "left     .        right"
    ".        bottom   .";
  column-gap: clamp(1rem, 2vw, 2.5rem);
  row-gap: clamp(1.5rem, 3vw, 2.5rem);
}
.s5-eyebrow {
  grid-area: eyebrow;
  align-self: start;
  justify-self: start;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0;
  display: inline-flex; align-items: center; gap: 0.85rem;
}
.s5-eyebrow::before {
  content: ""; display: inline-block;
  width: 2.2rem; height: 1px; background: var(--color-green);
}
.s5-headline {
  grid-area: headline;
  align-self: start;
  justify-self: center;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.s5-headline em {
  font-style: italic;
  color: var(--color-green);
}
.s5-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.9rem, 1.0vw, 1.05rem);
  line-height: 1.65;
  color: rgba(var(--color-ink-rgb), 0.82);
  margin: 0;
  max-width: 26ch;
}
.s5-body--left {
  grid-area: left;
  /* Vertically centred in the flexible row so the side copy
     scales with the section and consistently flanks the truck
     cabin across breakpoints — the text and the truck read as
     one composition rather than copy-then-truck stacked. */
  align-self: center;
  justify-self: end;
  text-align: right;
}
.s5-body--right {
  grid-area: right;
  align-self: center;
  justify-self: start;
  text-align: left;
}
.s5-body--bottom {
  grid-area: bottom;
  align-self: end;
  justify-self: center;
  text-align: center;
  font-style: italic;
  max-width: 56ch;
  /* Lifts the closing italic off the section's bottom edge so it
     sits closer to the truck silhouette above — scales with vw so
     the shift feels proportional across desktop and ultra-wide. */
  margin-bottom: clamp(2.5rem, 5vw, 6rem);
  /* Sits on the section's white block now (trees are a separate band
     below), so dark ink reads cleanly — no shadow needed. */
  color: rgba(var(--color-ink-rgb), 0.82);
  position: relative;
  z-index: 7;
}

/* Inline truck image — on desktop / ultra-wide, the truck floats
   absolutely over the section centred horizontally, anchored at 56%
   from the top so the headline above gets clear air and the lower
   half drops into the misty forest behind it. Width capped so the
   canvas height stays within the section's min-height envelope (no
   vertical overflow into the headline area). z-index sits above the
   .hp-tree-band (z-index 6) so the silhouette is never clipped by
   the forest — instead the forest reads as a misty backdrop behind
   the truck's wheels. Mobile (below) overrides to flow inline. */
.s5-truck-img {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -60%);
  /* Default desktop / wide truck width — capped tighter at ultra-wide
     in the @media below so the silhouette doesn't grow into the
     headline above or the closing italic below. */
  width: clamp(560px, 52%, 1280px);
  height: auto;
  z-index: 8;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Ultra-wide truck cap — placed AFTER the base .s5-truck-img rule
   so source order makes this override stick. Combined with the
   section min-height bump above (clamp(1000px, 100vh, 1200px)) the
   silhouette has comfortable clearance from both the multi-line
   headline above and the closing italic below at any ultra-wide /
   short-window combination. Truck moved slightly lower in the
   section (top 60% → 65%) to favour the lower half where the trees
   read as the backdrop, leaving more white air above for the
   headline. */
@media (min-width: 1700px) {
  .s5-truck-img {
    top: 65%;
    transform: translate(-50%, -65%);
    width: clamp(560px, 40%, 1000px);
  }
}

/* Mobile: drop the side-flanking layout. Inline truck sits between
   the right-side copy and the closing italic, no overlap.
   Stacked order: eyebrow → headline → left → right → truck → bottom. */
@media (max-width: 768px) {
  .section-5 {
    min-height: auto;
    padding: clamp(3rem, 8vw, 5rem) 1.25rem clamp(6rem, 10vw, 10rem);
  }
  .s5-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "eyebrow"
      "headline"
      "left"
      "right"
      "truck"
      "bottom";
    row-gap: clamp(1rem, 3vw, 1.75rem);
  }
  .s5-eyebrow { justify-self: center; }
  .s5-body--left,
  .s5-body--right,
  .s5-body--bottom {
    justify-self: center;
    text-align: center;
    max-width: 48ch;
  }
  .s5-body--bottom {
    /* Trees are a separate band below on mobile too, so the italic
       sits on white — dark ink from the base rule reads cleanly. */
    margin-bottom: 0;
  }
  .s5-truck-img {
    /* Reset desktop absolute positioning so the truck flows in the
       single-column mobile stack. */
    position: static;
    transform: none;
    top: auto;
    left: auto;
    grid-area: truck;
    justify-self: center;
    width: clamp(260px, 80vw, 460px);
    height: auto;
    margin: clamp(1rem, 4vw, 2rem) 0;
    z-index: auto;
  }
}

/* The floating MODAL cube was relocated to the contact page —
   see .claw-float in css/contact.css + the physics loop in
   js/main.js. */

/* ============================================================
   SECTION INVITE — landowner / JV call to action.
   Sits between the Fleet section and the closing tree band. Kept a
   solid white block (z-index:1 over the fixed hero) so the forest's
   misty top still blends into its white bottom. Centred copy with a
   filled green pill as the single, obvious "contact us" affordance.
   ============================================================ */
.section-invite {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  color: var(--color-ink);
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.10);
  padding: clamp(4rem, 9vw, 8rem) clamp(1.5rem, 5vw, 5rem);
  box-sizing: border-box;
  text-align: center;
}
.invite-wrap {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.invite-eyebrow {
  font-family: var(--font-mono), monospace;
  font-size: clamp(0.72rem, 0.82vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 clamp(1.1rem, 2vw, 1.6rem);
}
.invite-headline {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0;
  text-wrap: balance;
}
.invite-headline em { font-style: normal; color: var(--color-green); }
.invite-sub {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.65;
  color: rgba(var(--color-ink-rgb), 0.74);
  margin: clamp(1.25rem, 2.4vw, 1.9rem) 0 0;
  max-width: 56ch;
  text-wrap: pretty;
}
.invite-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  padding: 1rem 1.9rem;
  background: var(--color-green);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-pill);
  box-shadow: 0 10px 30px rgba(22, 112, 74, 0.25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.invite-cta:hover {
  transform: translateY(-2px);
  background: var(--color-green-bright);
  box-shadow: 0 14px 38px rgba(22, 112, 74, 0.34);
}
.invite-cta-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform .25s ease;
}
.invite-cta-arrow svg { width: 1.05em; height: 1.05em; }
.invite-cta:hover .invite-cta-arrow { transform: translateX(0.3rem); }