/* Hero (#beranda): frontispiece with a pinned relief model (PLAN §3.1, §6, §12.4).
   Owner: A2. Uses tokens from tokens.css (A3). State attributes read here: data-phase, data-live,
   data-state, data-mode, html[data-hero]. Round 1 review: the model bleeds to the viewport edge
   behind a feathered mask, the phone copy sits over the plate, one poster per beat. */

.hero {
  --hero-head: 56px;
  --hero-pad: clamp(1.25rem, 3.2vh, 2.5rem);
  /* distance from the plate's right edge to the viewport's right edge */
  --bleed: calc(var(--gutter) + max(0px, (100vw - var(--maxw) - 2 * var(--gutter)) / 2));
  background: var(--paper);
  color: var(--ink);
}

.hero__stage {
  box-sizing: border-box;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  /* full bleed (review r2): the engine clips the stage, so a centred max-width stage cut the scene at
     its edge on screens wider than about 1456 px; the measure now lives in the padding, which keeps
     the grid aligned with .wrap */
  padding: calc(var(--hero-head) + var(--hero-pad)) max(var(--gutter), calc((100vw - var(--maxw)) / 2)) var(--hero-pad);
  max-width: none;
  margin-inline: 0;
  /* no position here: the engine makes the stage sticky, which also anchors the phone overlay */
}
.hero__scrim { display: none; }

/* ---- copy column ------------------------------------------------------- */
.hero__copy {
  grid-column: 1 / span 5;
  grid-row: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-height: 0;
  position: relative;
  z-index: 2;
}
.hero__title { grid-row: 1; grid-column: 1; }
.hero__intro,
.hero__cap { grid-row: 2; grid-column: 1; align-self: start; margin-top: var(--s-6); }

.hero__h1 {
  margin: 0;
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 300;
  font-size: min(var(--t-display), 7.6vh);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--ink);
  max-width: 12ch;
}
.hero__dek {
  margin: 0 0 var(--s-5);
  font: 400 var(--t-lede)/1.5 Lato, system-ui, sans-serif;
  color: var(--ink-2);
  max-width: 34ch;
  text-wrap: pretty;
}

.hero__cap p { margin: 0; }
.hero__cap > p:first-child {
  font: 400 1.0625rem/1.55 Lato, system-ui, sans-serif;
  color: var(--ink-2);
  max-width: 40ch;
  text-wrap: pretty;
}
.hero__cap > p + p { margin-top: var(--s-3); }
.hero__cap .meta { margin-top: var(--s-3); font: 500 0.75rem/1.3 Inter, system-ui, sans-serif; color: var(--ink-soft); }

/* caption B: the readout (one number, one caption) */
.hero__readout { max-width: 30rem; }
.hero__words {
  margin: 0 0 var(--s-3);
  font: 500 0.75rem/1.3 Inter, system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.hero__words > span { transition: color 240ms var(--ease-out); }
.hero__words > span[data-state="on"] { color: var(--ink); }
.hero__words > span[data-state="done"] { color: var(--ink-soft); }
.hero__readout .hero__lead {
  font: 400 1.0625rem/1.5 Lato, system-ui, sans-serif;
  color: var(--ink-2);
  max-width: 40ch;
}
.hero__counter {
  margin: var(--s-4) 0 var(--s-2);
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--t-figure);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hero__value { display: inline-block; font-variant-numeric: tabular-nums; }
.hero__counter .u {
  font: 500 0.875rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  margin-left: -0.45em; /* the space before it is set in the 4rem figure font */
}
.hero__caption {
  font: 400 0.875rem/1.55 Lato, system-ui, sans-serif;
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero__stock > p:not(.meta) { margin-top: var(--s-3); }
.hero__readout .meta { margin-top: var(--s-2); }
/* soil carbon is drawn going into the ground but is not in the figure: said once the soil beat starts */
.hero__soilnote {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font: 500 0.75rem/1.3 Inter, system-ui, sans-serif;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
/* the soil swatch is the hatched tail of the stock bar: drawn, but not counted in the figure */
.hero__soilnote::before,
.hero__bar-soil {
  background: repeating-linear-gradient(135deg, #6d594a 0 1.5px, transparent 1.5px 4px) var(--paper);
  box-shadow: inset 0 0 0 1px #6d594a;
}
.hero__soilnote::before {
  content: "";
  flex: none;
  width: 18px;
  height: 6px;
}
.hero__soilnote[data-state="on"] { opacity: 1; }

/* review r3: the stock bar under the figure fills with the words (index.js --bar-a/--bar-b), so the flow
   has a measurable answer without printing numbers that are not in the data. Segment widths follow the
   figure's own root:shoot ratio (--share-a = 1 / (1 + r)); soil is a hatched swatch outside the bar. */
.hero__bar {
  --share-a: 0.787;
  display: flex;
  align-items: center;
  gap: 3px;
  width: min(100%, 21rem);
  height: 6px;
  margin: 0 0 var(--s-3);
}
.hero__bar[hidden] { display: none; }
.hero__bar-a,
.hero__bar-b {
  height: 100%;
  min-width: 0;
  background:
    linear-gradient(to right, var(--forest) 0, var(--forest) calc(var(--fill, 0) * 100%), transparent calc(var(--fill, 0) * 100%)) var(--forest-tint);
}
.hero__bar-a { flex: var(--share-a) 1 0; --fill: var(--bar-a, 1); }
.hero__bar-b { flex: calc(1 - var(--share-a)) 1 0; --fill: var(--bar-b, 1); }
.hero__bar-soil {
  flex: 0 0 auto;
  width: 18px;
  height: 100%;
  margin-left: var(--s-2);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.hero__bar[data-soil="on"] .hero__bar-soil { opacity: 1; }

/* caption E: the resolve. The title stays; the three services as a statement and a linked key. */
.hero__services {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 300;
  font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
.hero__cap > .hero__services { margin-top: var(--s-5); }
.hero__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: hero-key;
  font: 500 0.8125rem/1.3 Inter, system-ui, sans-serif;
  letter-spacing: 0.01em;
}
.hero__key li { counter-increment: hero-key; }
.hero__key a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.25em;
}
.hero__key a::before {
  content: counter(hero-key);
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font: 500 11px/20px Inter, system-ui, sans-serif;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) {
  .hero__key a:hover { color: var(--ink); text-decoration-color: var(--forest); }
}
.hero__cta-end { margin-top: var(--s-5); }

/* ---- the plate --------------------------------------------------------- */
.hero__plate {
  grid-column: 6 / -1;
  grid-row: 1;
  margin: 0;
  min-height: 0;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}
.hero__plate > picture { display: contents; }
/* the scene layers run past the plate to the viewport's right edge; a feathered mask melts every
   edge into the paper, so the model is never a cropped image in a box */
.hero__poster,
.hero__canvas,
.hero__labels {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
  contain: size;
  width: calc(100% + var(--bleed));
  max-width: none;
  height: 100%;
  min-height: 0;
  min-width: 0;
}
.hero__poster,
.hero__canvas {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, var(--ink) 8%, var(--ink) 97%, transparent 100%),
    linear-gradient(to bottom, transparent 0, var(--ink) 7%, var(--ink) 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, var(--ink) 8%, var(--ink) 97%, transparent 100%),
    linear-gradient(to bottom, transparent 0, var(--ink) 7%, var(--ink) 93%, transparent 100%);
  mask-composite: intersect;
}
.hero__poster {
  display: block;
  object-fit: contain;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 200ms linear;
}
.hero__poster[data-hero-poster="0"] { opacity: 1; }
.hero__canvas {
  display: block;
  opacity: 0;
  transition: opacity 200ms linear;
}
.hero__labels {
  position: relative;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.hero__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero__leader {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}
.hero__anchor { fill: var(--ink); opacity: 0; transition: opacity 240ms var(--ease-out); }
.hero__leader[data-state="on"], .hero__anchor[data-state="on"] { opacity: 1; }
.hero__label {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font: 500 0.75rem/1.3 Inter, system-ui, sans-serif;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 2px 6px;
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
  will-change: transform;
}
.hero__label[data-state="on"] { opacity: 1; }
/* the air stream's chip: no leader, it names the marks falling past it */
.hero__label--air { color: var(--ink-2); border-style: dashed; }

.hero__credit {
  grid-row: 2;
  grid-column: 1;
  padding-top: var(--s-2);
  font: 400 0.75rem/1.4 Inter, system-ui, sans-serif;
  color: var(--ink-faint);
  text-wrap: pretty;
  position: relative;
  z-index: 2;
}
.hero__credit a { color: inherit; }

/* ---- modes --------------------------------------------------------------- */
/* webgl: the poster bridge shows the poster for the current beat until the first frame */
html[data-hero="webgl"] .hero__poster[data-state="on"] { opacity: 1; }
html[data-hero="webgl"] .hero__poster[data-state="off"] { opacity: 0; }
.hero[data-live="true"] .hero__canvas { opacity: 1; }
html[data-hero="webgl"] .hero[data-live="true"] .hero__poster { opacity: 0; }

/* posters: one still per beat, switched at the beat boundaries from the act's progress (no JS).
   Review r3: neighbouring stills are different camera views, so they never overlap: the old still fades
   to paper over 0.015 ending at the boundary and the new one fades in from it (a clean cut on paper).
   Boundaries follow phases.js POSTERS `from` + 0.02: 0.17, 0.30, 0.60, 0.86. */
html[data-hero="posters"] .hero__canvas { display: none; }
html[data-hero="posters"] .hero__poster { transition: none; }
html[data-hero="posters"] .hero__poster[data-hero-poster="0"] { opacity: clamp(0, (0.17 - var(--sc-p, 0)) / 0.015, 1); }
html[data-hero="posters"] .hero__poster[data-hero-poster="1"] { opacity: min(clamp(0, (var(--sc-p, 0) - 0.17) / 0.015, 1), clamp(0, (0.30 - var(--sc-p, 0)) / 0.015, 1)); }
html[data-hero="posters"] .hero__poster[data-hero-poster="2"] { opacity: min(clamp(0, (var(--sc-p, 0) - 0.30) / 0.015, 1), clamp(0, (0.60 - var(--sc-p, 0)) / 0.015, 1)); }
html[data-hero="posters"] .hero__poster[data-hero-poster="3"] { opacity: min(clamp(0, (var(--sc-p, 0) - 0.60) / 0.015, 1), clamp(0, (0.86 - var(--sc-p, 0)) / 0.015, 1)); }
html[data-hero="posters"] .hero__poster[data-hero-poster="4"] { opacity: clamp(0, (var(--sc-p, 0) - 0.86) / 0.015, 1); }
html[data-hero="posters"] .hero__labels { display: none; }

/* Before the engine mounts (main.js writes data-sc-cue), the page matches the p = 0 frame: only the title
   and the intro show, not six captions in one cell. visibility, not opacity, keeps the hidden links out of
   the tab order and unclickable (review r3). */
html.js:not(.sc-ready):not(.sc-failed):not([data-hero="static"]) #beranda [data-hero-cue]:not([data-hero-cue="title"]):not([data-hero-cue="intro"]) { visibility: hidden; }

/* static (reduced motion, short landscape, failed engine: boot.js sets data-hero="static") and no-JS:
   one flowing column */
html[data-hero="static"] .hero__stage,
html.no-js .hero__stage { height: auto; align-items: start; }
html[data-hero="static"] .hero__copy,
html.no-js .hero__copy { grid-template-rows: none; display: block; }
html[data-hero="static"] :is(.hero__intro, .hero__cap),
html.no-js :is(.hero__intro, .hero__cap) { margin-top: var(--s-6); }
html[data-hero="static"] .hero__cap + .hero__cap,
html.no-js .hero__cap + .hero__cap { padding-top: var(--s-6); border-top: 1px solid var(--rule); }
html[data-hero="static"] .hero__soilnote,
html.no-js .hero__soilnote { opacity: 1; }
html[data-hero="static"] .hero__plate,
html.no-js .hero__plate {
  position: sticky;
  top: calc(var(--hero-head) + var(--s-5));
  height: min(calc(100svh - var(--hero-head) - 2 * var(--s-5)), 46rem);
  align-self: start;
}
html[data-hero="static"] .hero__canvas,
html[data-hero="static"] .hero__labels,
html.no-js :is(.hero__canvas, .hero__labels) { display: none; }
/* static: the sticky plate shows the poster of the caption being read (index.js); before (or without) the
   hero script, the rest poster */
html[data-hero="static"] .hero__poster { opacity: 0; transition: opacity 160ms linear; }
html[data-hero="static"] .hero__poster[data-state="on"],
html[data-hero="static"] .hero__poster[data-hero-poster="0"]:not([data-state]) { opacity: 1; }
html.no-js .hero__poster:not([data-hero-poster="0"]) { display: none; }
html.no-js .hero__cta-end { display: none; }

/* ---- tablet: wider copy column -------------------------------------------- */
@media (min-width: 861px) and (max-width: 1099px) {
  .hero__copy { grid-column: 1 / span 6; }
  .hero__plate { grid-column: 7 / -1; }
}

/* short desktop viewports: keep caption B inside the stage (it ran 40-60px past the fold at
   1366x768, 1280x800 and 1280x720). Steps: drop the lead line; then the word row, which the
   plate already labels beside the tree; then a smaller figure and title. */
@media (min-width: 861px) and (max-height: 820px) {
  .hero__readout .hero__lead { display: none; }
  .hero__counter { margin-top: var(--s-2); }
  .hero__intro, .hero__cap { margin-top: var(--s-5); }
  .hero__cap > .hero__services { margin-top: var(--s-4); }
}
@media (min-width: 861px) and (max-height: 760px) {
  .hero__readout > .hero__words { display: none; }
}
@media (min-width: 861px) and (max-height: 720px) {
  .hero__h1 { font-size: min(var(--t-display), 6.8vh); }
  .hero__counter { font-size: 2.75rem; }
  .hero__cta-end { margin-top: var(--s-4); }
}

/* ---- phone (engine mobile) ------------------------------------------------- */
@media (max-width: 860px) {
  .hero { --hero-head: 48px; --hero-pad: var(--s-3); }
  .hero__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(46svh, 1fr);
    padding: calc(var(--hero-head) + var(--s-4)) var(--gutter) var(--s-3);
    row-gap: var(--s-3);
  }
  .hero__copy {
    grid-column: 1;
    grid-row: 1;
    /* row 2 is flexible so the caption stack (rows 1-2) grows the region below the CTA,
       not the gap between the h1 and the dek */
    grid-template-rows: auto 1fr;
  }
  .hero__title { grid-row: 1; }
  .hero__intro { grid-row: 2; margin-top: var(--s-4); }
  /* after p 0.09 the captions take the whole copy region (same cell as title + intro) */
  .hero__cap { grid-row: 1 / span 2; margin-top: 0; }
  .hero__h1 { font-size: clamp(1.875rem, 8.4vw, 2.25rem); max-width: none; line-height: 1.08; }
  .hero__dek { font-size: 1rem; line-height: 1.5; margin-bottom: var(--s-4); max-width: none; }
  .hero__intro .btn,
  .hero__cta-end { display: flex; width: 100%; min-height: 48px; justify-content: center; align-items: center; box-sizing: border-box; }
  .hero__cap > p:first-child { font-size: 0.9375rem; line-height: 1.5; max-width: none; }
  .hero__readout { max-width: none; }
  .hero__words { margin-bottom: var(--s-2); }
  .hero__readout .hero__lead { font-size: 0.875rem; line-height: 1.45; }
  .hero__counter { margin: var(--s-2) 0 var(--s-1); font-size: 2rem; }
  .hero__caption { font-size: 0.8125rem; line-height: 1.45; max-width: none; }
  .hero__readout .meta { margin-top: var(--s-1); }
  .hero__soilnote { margin-top: var(--s-2); }
  .hero__services { font-size: 1.25rem; max-width: none; }
  .hero__cap > .hero__services { margin-top: var(--s-3); }
  .hero__key { margin-top: var(--s-3); gap: var(--s-1) var(--s-4); font-size: 0.75rem; }
  .hero__key a { min-height: 28px; }
  .hero__key a::before { width: 18px; height: 18px; line-height: 18px; }
  .hero__cta-end { margin-top: var(--s-4); }
  .hero__plate { grid-column: 1; grid-row: 2; }
  /* the scene layers run edge to edge on a phone */
  .hero__poster,
  .hero__canvas,
  .hero__labels { width: calc(100% + 2 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); }
  .hero__poster,
  .hero__canvas {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--ink) 6%, var(--ink) 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, var(--ink) 6%, var(--ink) 94%, transparent 100%);
  }
  .hero__credit { font-size: 0.6875rem; line-height: 1.35; }

  /* webgl and posters: the copy sits over the plate instead of reserving a band for its tallest caption;
     the camera frames the model in the free area under the active caption (index.js inset), the phone
     posters are baked with the same framing (review r3), and a paper scrim keeps the copy legible over
     anything that rises into it */
  html:is([data-hero="webgl"], [data-hero="posters"]) .hero__stage {
    grid-template-rows: minmax(0, 1fr);
    padding-top: var(--hero-head);
  }
  /* the copy's containing block starts at the stage's left gutter (the grid line) but ends at the padding
     edge on the right, so only the right side takes the gutter: the copy sits on 17-373 at 390, like the
     logo and every section (review r3, it was 33-373) */
  html:is([data-hero="webgl"], [data-hero="posters"]) .hero__copy {
    position: absolute;
    z-index: 3;
    top: calc(var(--hero-head) + var(--s-4));
    left: 0;
    right: var(--gutter);
  }
  /* until the engine mounts (a slow connection can take seconds) the stage is not sticky yet, so it is
     made the copy's anchor here; scoped to the pre-mount state so it never overrides the engine's sticky */
  html.js:not(.sc-ready):not(.sc-failed):is([data-hero="webgl"], [data-hero="posters"]) .hero__stage { position: relative; }
  html:is([data-hero="webgl"], [data-hero="posters"]) .hero__plate { grid-row: 1; }
  html:is([data-hero="webgl"], [data-hero="posters"]) .hero__poster { object-position: 50% 100%; }
  html:is([data-hero="webgl"], [data-hero="posters"]) .hero__scrim {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 0;
    height: calc(var(--hero-copy-b, 45%) + 28px);
    background: linear-gradient(to bottom, var(--paper) 0, var(--paper) calc(100% - 28px), color-mix(in oklab, var(--paper) 0%, transparent) 100%);
    pointer-events: none;
  }

  /* numbered dots on the model at the measure beat (short leaders only when relaxed apart); the
     regrowth chip stays a text chip */
  .hero__label[data-mode="dot"] {
    width: 18px; height: 18px; padding: 0;
    border-radius: 50%;
    font-size: 0; line-height: 18px;
    background: var(--ink); border-color: var(--ink);
    display: grid; place-items: center;
  }
  .hero__label[data-mode="dot"]::before { font: 500 11px/1 Inter, system-ui, sans-serif; color: var(--paper); }
  .hero__label[data-mode="dot"][data-hero-label="restorasi"]::before { content: "1"; }
  .hero__label[data-mode="dot"][data-hero-label="karbon"]::before { content: "2"; }
  .hero__label[data-mode="dot"][data-hero-label="ukur"]::before { content: "3"; }

  /* static: title and intro, then the plate sticks under the head while the captions pass under it,
     switching its poster per caption */
  html[data-hero="static"] .hero__stage { grid-template-rows: none; row-gap: 0; }
  html[data-hero="static"] .hero__copy { display: contents; }
  html[data-hero="static"] .hero__title { grid-row: auto; }
  html[data-hero="static"] .hero__intro { grid-row: auto; margin-top: var(--s-4); }
  html[data-hero="static"] .hero__cap { grid-row: auto; margin-top: var(--s-6); order: 3; }
  html[data-hero="static"] .hero__plate {
    grid-row: auto;
    order: 2;
    position: sticky;
    z-index: 3;
    top: var(--hero-head);
    height: 40svh;
    margin-top: var(--s-5);
    background: var(--paper);
    box-shadow: 0 1px 0 var(--rule);
  }
  html[data-hero="static"] .hero__cap + .hero__cap { padding-top: var(--s-5); }
  html.no-js .hero__stage { grid-template-rows: auto auto; }
  html.no-js .hero__plate { position: relative; top: 0; height: 70svh; grid-row: 2; }
  /* the phone rest poster is framed for the copy overlay (model in its lower half): show that half */
  html.no-js .hero__poster { object-fit: cover; object-position: 50% 100%; }
  html.no-js .hero__cap { margin-top: var(--s-5); }
}
/* portrait tablets (600-860 px): the phone overlay, but set as a page, not a stretched phone (review r3) */
@media (min-width: 600px) and (max-width: 860px) {
  .hero__h1 { font-size: var(--t-display); max-width: 14ch; line-height: 1.04; }
  .hero__dek { max-width: 38ch; }
  .hero__cap > p:first-child, .hero__caption { max-width: 46ch; }
  .hero__readout { max-width: 32rem; }
  .hero__intro .btn,
  .hero__cta-end { display: inline-flex; width: auto; padding-inline: var(--s-5); }
}

/* landscape phones (static mode, short-landscape): the desktop static layout, copy left and the sticky
   plate right, instead of an 80 px relief in a 156 px strip (review r3) */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
  html[data-hero="static"] .hero__stage {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-5);
    padding-top: calc(var(--hero-head) + var(--s-3));
  }
  html[data-hero="static"] .hero__copy { display: block; grid-column: 1 / span 6; grid-row: 1; }
  html[data-hero="static"] .hero__cap { order: 0; }
  html[data-hero="static"] .hero__h1 { font-size: 1.75rem; }
  html[data-hero="static"] .hero__plate {
    grid-column: 7 / -1;
    grid-row: 1;
    order: 0;
    position: sticky;
    top: var(--hero-head);
    height: calc(100svh - var(--hero-head) - 2 * var(--s-3));
    margin-top: 0;
    align-self: start;
    box-shadow: none;
  }
  html[data-hero="static"] .hero__poster { width: 100%; margin-left: 0; }
}

@media (max-width: 860px) and (max-height: 700px) {
  .hero__readout .hero__lead { display: none; }
  .hero__dek { font-size: 0.9375rem; }
  /* 360x640 and 375x667: the EN landing (three-line h1, longer dek) ran 14-25 px into the plate */
  .hero__stage { padding-top: calc(var(--hero-head) + var(--s-3)); }
  .hero__intro { margin-top: var(--s-3); }
  .hero__dek { margin-bottom: var(--s-3); }
  html[lang="en"] .hero__dek { font-size: 0.875rem; line-height: 1.45; }
  html[lang="en"] .hero__h1 { line-height: 1.04; }
  .hero__caption { font-size: 0.75rem; }
  .hero__services { font-size: 1.125rem; }
}
@media (max-width: 860px) and (max-height: 600px) {
  .hero__stage { grid-template-rows: auto minmax(40svh, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__poster, .hero__canvas, .hero__label, .hero__leader, .hero__soilnote, .hero__words > span { transition-duration: 1ms; }
}