/* ============================================================================
   Zambezi Trade Capital — the hero
   ----------------------------------------------------------------------------
   This is a reproduction of docs/mission.png, the approved brand design. It is
   not an interpretation: the geometry below was measured off that file pixel by
   pixel and every length inside the frame is a percentage of the composition's
   own width, so the whole thing scales as one unit.

   HOW THE FIT IS GUARANTEED
   -------------------------
   .hero__frame is an inline-size container, and *every* length inside it is in
   cqw — container query width units. That makes the rendered height a fixed
   multiple of the frame width: height = width x --frame-ratio, where the ratio
   is the composition's own aspect. Because the ratio is known, the frame can
   simply refuse to be wider than the viewport height allows:

       width = min(available width, available height / ratio)

   so the hero always fits 100dvh exactly, at any viewport, with no overflow and
   no media-query jumps. Introducing a px or rem length inside the frame would
   break that proportionality — if you need a floor, change the ratio instead.

   Each layout has its own measured ratio. After changing the composition, run
   `npm run hero:measure` and set --frame-ratio to what it reports; a ratio
   smaller than the truth is what makes the hero overflow.

   TYPE IS SIZED BY CAP HEIGHT, NOT BY EM
   --------------------------------------
   The faces here have different cap heights from the ones in the source, so
   every font-size below is the source's measured cap height divided by the
   face's own cap/em ratio:

       Mulish            0.7050      font-size = cap x 1.4184
       Roboto Condensed  0.7110      font-size = cap x 1.4065
       Jost              0.7000      font-size = cap x 1.4286

   REFERENCE GEOMETRY (docs/mission.png, 1536x1024)
   ------------------------------------------------
   The frame runs from the card row's left edge to its right edge, and from the
   mark's top ink to the foot of the footer strip:

       Frame           x   84..1439  (1355px)    y   59..1000  (941px)
       ratio 941 / 1355 = 0.6945

   Identity band      y   59..440
     logo mark        x  111..467   (26.27%)   y   59..438
     lockup column    x  518..1191  (49.67%)   y  143..440
       ZAMBEZI        cap  85       y  143..227     inline SVG, traced
       Trade Capital  cap  29       y  262..290     rules to the column edges
       sub-line       cap  16       y  329..344
       tagline        cap  21       y  388..408
       hairline       y  435, with a dot at x 1156
   Mission panel      x   95..1429  y  467..636  (169 tall)
     target icon      x  120..239   y  495..582
     dot matrix       y  599..613
     divider          x  250        y  470..640
     heading          cap  23       y  498..520
     body             cap  15       lines at y 538 / 567 / 597, pitch 29.5
   Card row           y  655..899  (244 tall)
     five cards, 255 wide, 19 apart: 84, 359, 631, 911, 1185
     icon             y  666..758  (93 tall)
     title            cap  15       y  775..790
     body             cap  13       lines at y 807 / 832 / 857, pitch 25
     accent rule      y  892..900, 44 wide, centred, on the bottom border
   Footer strip       x   71..1453  y  919..1000 (81 tall)
     dividers         x  460, 1014, 1231  ->  28.15% / 68.23% / 83.94%
     shield icon      x  101..144   y  935..987
     label            cap  11       y  939
     note             cap  10       lines at y 959 / 977, pitch 18
     motto line 1     cap  14       y  943..956
     motto line 2     cap  19       y  968..986
     mark labels      cap  10/11    lines at y 945 / 965, pitch 20

   THREE DELIBERATE DEPARTURES FROM THE SOURCE
   -------------------------------------------
   - The three panels are drawn at three different widths in mission.png —
     mission 1334, cards 1355, footer 1382 — all centred on x 762. That is a 3%
     spread with no design intent behind it, so all three are normalised to one
     container width here.
   - The composition sits 6px left of the image's centre line. Centred here.
   - The lockup's flanking rules are asymmetric in the source (36 left, 43
     right on the gold line; 36 and 70 on the sub-line). They are set to flex
     equally, which also lets the substituted sub-line copy change length
     without the rules needing new numbers.
   ============================================================================ */

.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100dvh;
  /* Fallback for browsers without dvh; dvh wins where supported. */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--hero-pad) var(--gutter);
  overflow: hidden;

  /* Vertical budget the frame may not exceed: the block padding, the row
     reserved for the scroll indicator, and the risk line beneath the strip.
     Kept as variables so the width calculation and the actual box always
     agree. */
  --hero-pad: clamp(0.75rem, 1.8vh, 2rem);
  --hero-scroll-h: 2.5rem;
  --hero-risk-h: 3.4rem;
  --hero-reserve: calc(var(--header-h) + 2 * var(--hero-pad) + var(--hero-scroll-h) + var(--hero-risk-h));
}

.hero__stage {
  align-self: center;
  width: 100%;
}

.hero__frame {
  /* Composition aspect (content height / content width), measured. */
  --frame-ratio: 0.7365;
  --frame-max: 1560px;

  width: min(100%, var(--frame-max), (100dvh - var(--hero-reserve)) / var(--frame-ratio));
  margin-inline: auto;
  container-type: inline-size;
}

/* ---------------------------------------------------------------------------
   Background motifs
   --------------------------------------------------------------------------- */

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__circuit {
  position: absolute;
  left: 0;
  top: 0;
  width: min(26%, 380px);
  height: 100%;
}

/* The world map is a coverage mask over a flat fill rather than an image —
   see scripts/trace-motifs.py for why. */
.hero__map {
  position: absolute;
  right: 0;
  top: 0;
  width: min(38%, 560px);
  aspect-ratio: 406 / 470;
  background: var(--map-dot);
  /* Two masks intersected: the map itself, and a fade at the left and bottom so
     the mask box's own edges do not show as a tonal step across the hero. */
  -webkit-mask:
    url("/assets/world-map.png") no-repeat right top / contain,
    linear-gradient(100deg, transparent, #000 46%),
    linear-gradient(180deg, #000 55%, transparent 92%);
  mask:
    url("/assets/world-map.png") no-repeat right top / contain,
    linear-gradient(100deg, transparent, #000 46%),
    linear-gradient(180deg, #000 55%, transparent 92%);
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect, intersect;
}

.hero__arcs {
  position: absolute;
  right: 0;
  top: 0;
  width: min(42%, 640px);
  aspect-ratio: 406 / 470;
  filter: drop-shadow(0 0 6px rgb(255 255 255 / 0.95)) drop-shadow(0 0 14px var(--teal-glow));
  opacity: 0.9;
}

/* Africa sits at 79% across and 22% down in the source; the motif is built
   from four stacked layers so the glow reads through the dot fill. */
.hero__africa {
  position: absolute;
  left: 79.5%;
  top: 12.5%;
  width: min(7.4%, 112px);
  aspect-ratio: 96 / 173;
}

.hero__africa-dots,
.hero__africa-line {
  position: absolute;
  inset: 0;
}

/* A dot lattice clipped to the continent's silhouette. africa-fill.svg is the
   solid shape; africa.svg is the coastline stroke. Masking the dots with the
   stroke would put them on the coastline and nowhere else. */
.hero__africa-dots {
  background-image: radial-gradient(var(--teal-bright) 34%, transparent 35%);
  background-size: 6.2% 3.5%;
  opacity: 0.6;
  -webkit-mask: url("/assets/africa-fill.svg") no-repeat center / contain;
  mask: url("/assets/africa-fill.svg") no-repeat center / contain;
}

.hero__africa-line {
  background: var(--teal);
  -webkit-mask: url("/assets/africa.svg") no-repeat center / contain;
  mask: url("/assets/africa.svg") no-repeat center / contain;
  opacity: 0.8;
}

/* The glow at Zimbabwe's position, and the ripple rings beneath it. */
.hero__pin {
  position: absolute;
  left: 34%;
  top: 74%;
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fff 16%, var(--teal-glow) 42%, rgb(184 225 232 / 0) 74%);
  filter:
    drop-shadow(0 0 8px #fff)
    drop-shadow(0 0 16px var(--teal-glow))
    drop-shadow(0 0 30px var(--teal-bright));
}

.hero__ripples {
  position: absolute;
  left: -95%;
  top: 92%;
  width: 290%;
  aspect-ratio: 3 / 1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent 62%, rgb(255 255 255 / 0.95) 65%, transparent 68%),
    radial-gradient(closest-side, transparent 40%, var(--teal-glow) 44%, transparent 48%),
    radial-gradient(closest-side, transparent 18%, rgb(255 255 255 / 0.9) 22%, transparent 27%);
  filter: drop-shadow(0 0 4px rgb(255 255 255 / 0.8));
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Identity band — the mark and the lockup
   --------------------------------------------------------------------------- */

.hero__identity {
  display: grid;
  /* 111..467 and 518..1191, measured from the frame's left edge at x 84. */
  grid-template-columns: 26.27cqw 49.67cqw;
  gap: 3.76cqw;
  justify-content: start;
  align-items: start;
  padding-left: 1.99cqw;
}

.hero__mark {
  width: 100%;
  height: auto;
}

.lockup {
  /* The lockup is its own container so the wordmark, the two rule-flanked
     lines and the tagline can be sized against the column they share rather
     than against the whole frame. 100cqw in here is 673 source pixels. */
  container-type: inline-size;
  display: block;
  margin: 0;
  /* The wordmark's top ink sits 84px below the mark's, i.e. 6.20% of the FRAME
     width. This margin is on the container element itself, so it resolves
     against the frame, not against the lockup — everything *inside* .lockup is
     in lockup units, this one line is not. */
  margin-top: 6.2cqw;
  font-weight: 400;
}

.lockup__wordmark {
  display: block;
}

.lockup__wordmark img {
  width: 100%;
  height: auto;
}

/* --- The two rule-flanked lines ---
   Both are a flex row of rule / text / rule, with the rules flexing so the row
   always spans the full lockup width and the text stays centred. */
.lockup__line {
  display: flex;
  align-items: center;
  font-family: var(--font-lockup);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.lockup__rule {
  flex: 1;
  height: 0.22cqw;
  min-height: 1px;
}

/* letter-spacing adds a space after the LAST character too, which would push
   the text off-centre between the rules. The negative margin cancels it. */
.lockup__line-text {
  margin-right: -1em;
}

.lockup__line--gold {
  /* cap 29 of 673 -> 4.309cqw; Jost cap/em 0.70 -> font-size 6.156cqw */
  margin-top: 4.30cqw;
  font-size: 6.156cqw;
  letter-spacing: 0.467em;
  color: var(--gold);
}

.lockup__line--gold .lockup__rule {
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}

.lockup__line--gold .lockup__rule:last-child {
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
}

.lockup__line--gold .lockup__line-text {
  margin-inline: 5.13cqw calc(5.13cqw - 0.467em);
}

.lockup__line--sub {
  /* cap 16 of 673 -> 2.377cqw; font-size 3.397cqw */
  margin-top: 4.16cqw;
  font-size: 3.397cqw;
  letter-spacing: 0.4em;
  color: var(--ink);
}

.lockup__line--sub .lockup__rule {
  background: var(--rule);
}

.lockup__line--sub .lockup__line-text {
  margin-inline: 2.82cqw calc(2.82cqw - 0.4em);
}

.lockup__tagline {
  /* cap 21 of 673 -> 3.12cqw; Roboto Condensed cap/em 0.711 -> 4.389cqw */
  display: block;
  margin-top: 5.19cqw;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.389cqw;
  line-height: 1;
  letter-spacing: 0.112em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--teal);
}

/* A hairline under the lockup, fading out to the right and terminating in a
   dot — y 435, x 527..1133 with the dot at 1156 in the source. */
.lockup__hairline {
  display: block;
  position: relative;
  margin-top: 3.07cqw;
  height: 0.3cqw;
  min-height: 1px;
  background: linear-gradient(90deg, var(--teal-bright), rgb(14 124 134 / 0.15) 90%, transparent);
}

.lockup__hairline::after {
  content: "";
  position: absolute;
  right: 3.4cqw;
  top: 50%;
  width: 1.5cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: 0 -50%;
  background: var(--teal-bright);
}

/* ---------------------------------------------------------------------------
   Mission panel
   --------------------------------------------------------------------------- */

.mission {
  display: grid;
  grid-template-columns: auto 1px 1fr;
  align-items: start;
  /* 169 tall, starting 27px under the identity band. */
  margin-top: 1.99cqw;
  min-height: 12.47cqw;
  padding: 1.94cqw 3.5cqw 1.4cqw 2.66cqw;
  border: 1px solid var(--border-panel);
  border-radius: 1.03cqw;
  background: var(--panel);
  box-shadow: var(--shadow-s);
}

.mission__icon {
  position: relative;
  width: 8.78cqw;
}

.mission__icon svg {
  width: 6.42cqw;
  height: 6.42cqw;
  margin-left: 0.6cqw;
}

/* The 8x3 dot matrix under the target. */
.mission__dots {
  display: block;
  width: 5.2cqw;
  height: 1.1cqw;
  margin-top: 1.1cqw;
  background-image: radial-gradient(var(--teal-bright) 40%, transparent 41%);
  background-size: 12.5% 33.3%;
  opacity: 0.55;
}

.mission > :nth-child(2) {
  align-self: stretch;
}

.mission__body {
  padding-left: 2.29cqw;
}

.mission__title {
  /* cap 23 -> 2.388cqw */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.388cqw;
  line-height: 1;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--green);
}

.mission__text {
  /* cap 15 -> 1.570cqw; cap-line pitch 29.5 -> line-height 1.386 */
  max-width: 70.04cqw;
  margin-top: 0.20cqw;
  font-size: 1.570cqw;
  line-height: 1.386;
  color: var(--ink-body);
}

/* The panel carries a 1px vertical divider between the icon and the text. */
.mission::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 1px;
  align-self: stretch;
  background: var(--rule-soft);
}

/* ---------------------------------------------------------------------------
   The five cards
   --------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.4cqw;
  margin-top: 1.4cqw;
  list-style: none;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 18.01cqw;
  padding: 0.81cqw 1.5cqw 1.6cqw;
  border: 1px solid var(--border-card);
  border-radius: 0.74cqw;
  background: linear-gradient(180deg, var(--card-top), var(--card));
  text-align: center;
}

/* The short accent rule sits ON the bottom border, not above it. */
.card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.11cqw;
  width: 3.25cqw;
  height: 0.37cqw;
  border-radius: 0.2cqw;
  translate: -50% 0;
  background: var(--teal-bright);
}

/* Each icon sits inside a broken dotted ring — drawn as a conic mask so the
   dots stay circular and the gaps fall where they do in the source. */
.card__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 8cqw;
  height: 6.86cqw;
}

.card__icon::before {
  content: "";
  position: absolute;
  inset: -0.4cqw 0.5cqw;
  border-radius: 50%;
  border: 0.16cqw dotted var(--teal-bright);
  opacity: 0.45;
  /* Break the ring top-left and bottom-right, as in the source. */
  -webkit-mask: conic-gradient(from 20deg, #000 0 32%, transparent 0 44%, #000 0 82%, transparent 0 94%, #000 0);
  mask: conic-gradient(from 20deg, #000 0 32%, transparent 0 44%, #000 0 82%, transparent 0 94%, #000 0);
}

.card__icon svg {
  width: 6.4cqw;
  height: 6.4cqw;
}

.card__title {
  /* cap 15 -> 1.557cqw */
  margin-top: 0.89cqw;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.557cqw;
  line-height: 1;
  letter-spacing: 0.012em;
  text-transform: uppercase;
  color: var(--ink);
}

.card__text {
  /* cap 13 -> 1.361cqw; cap-line pitch 25 -> line-height 1.356 */
  margin-top: 0.65cqw;
  font-size: 1.361cqw;
  line-height: 1.356;
  color: var(--ink-body);
  text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   Footer strip
   --------------------------------------------------------------------------- */

.strip {
  display: grid;
  /* Dividers at 28.15% / 68.23% / 83.94% of the strip's width. */
  grid-template-columns: 28.15fr 40.08fr 15.71fr 16.06fr;
  /* The strip's contents are NOT vertically centred in the source — the left
     segment sits 20px below the top edge and 10px above the bottom, the motto
     24px and 14px. So the cells stretch and each one sets its own top padding
     from the measurement. */
  align-items: stretch;
  margin-top: 1.48cqw;
  min-height: 5.98cqw;
  border: 1px solid var(--border-panel);
  border-radius: 1.03cqw;
  background: var(--panel);
  box-shadow: var(--shadow-s);
}

.strip > * + * {
  border-left: 1px solid var(--rule);
}

.strip__seg {
  display: flex;
  align-items: flex-start;
  gap: 1.1cqw;
  /* The shield sits 16px below the strip's top edge in the source. */
  padding: 1.18cqw 2.2cqw 0.74cqw;
}

.strip__seg--mark .strip__mark-text {
  margin-top: 0.55cqw;
}

.strip__vision-text {
  margin-top: 0.09cqw;
}

.strip__icon {
  flex: none;
  display: block;
  width: 3.2cqw;
}

.strip__icon svg {
  width: 100%;
  height: auto;
}

.strip__vision-text,
.strip__mark-text {
  display: flex;
  flex-direction: column;
}

.strip__label {
  /* cap 11 -> 1.142cqw */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.142cqw;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--teal-mid);
}

.strip__note {
  /* cap 10 -> 1.045cqw; cap-line pitch 18 -> line-height 1.27 */
  margin-top: 0.18cqw;
  font-size: 1.045cqw;
  line-height: 1.27;
  color: var(--ink-muted);
}

.strip__motto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.32cqw;
  /* Motto line 1's cap sits 24px below the strip's top edge. */
  padding: 1.59cqw 1.5cqw 0.72cqw;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.strip__motto-a {
  /* cap 14 -> 1.453cqw */
  font-size: 1.453cqw;
  letter-spacing: 0.155em;
  color: var(--ink-body);
}

.strip__motto-b {
  /* cap 19 -> 1.972cqw */
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  font-size: 1.972cqw;
  letter-spacing: 0.075em;
  color: var(--teal-mid);
}

.strip__dash {
  width: 1.6cqw;
  height: 0.22cqw;
  min-height: 1px;
  background: var(--gold);
}

.strip__mark-text {
  /* cap 10 -> 1.045cqw; cap-line pitch 20 -> line-height 1.42 */
  gap: 0.35cqw;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.045cqw;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--teal-mid);
}

/* ---------------------------------------------------------------------------
   The risk line, and the scroll cue
   --------------------------------------------------------------------------- */

/* Not part of the reproduced composition and deliberately not in cqw: it has
   to stay legible at 320px, so it is set in rem and its height is reserved out
   of the frame's budget instead of scaling with it. */
.hero__risk {
  max-width: 72ch;
  margin: clamp(0.6rem, 1.4vh, 1.1rem) auto 0;
  font-size: clamp(0.75rem, 0.71rem + 0.18vw, 0.86rem);
  line-height: 1.4;
  text-align: center;
  text-wrap: pretty;
  color: var(--ink-muted);
}

.hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  justify-self: center;
  height: var(--hero-scroll-h);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal);
  opacity: 0.75;
  transition: opacity var(--dur-fast) var(--ease);
}

.hero__scroll:hover {
  opacity: 1;
}

.hero__scroll svg {
  width: 1.1rem;
  height: 1.1rem;
  animation: hero-nudge 2.4s var(--ease) infinite;
}

@keyframes hero-nudge {
  0%, 70%, 100% { translate: 0 0; }
  35% { translate: 0 0.22rem; }
}

/* ===========================================================================
   Below the desktop breakpoint
   ---------------------------------------------------------------------------
   The mark moves above the lockup and both centre; the cards go to 3+2. Each
   layout has its own measured --frame-ratio — see the header of this file.
   =========================================================================== */

@media (max-width: 1023px) {
  .hero__frame {
    --frame-ratio: 1.9594;
    --frame-max: 760px;
  }

  .hero__identity {
    grid-template-columns: 1fr;
    justify-items: center;
    justify-content: center;
    gap: 2cqw;
    padding-left: 0;
  }

  .hero__mark {
    width: 30cqw;
  }

  .lockup {
    width: 88cqw;
    margin-top: 0;
    text-align: center;
  }

  .mission {
    grid-template-columns: auto 1px 1fr;
    padding: 3cqw;
  }

  .mission__icon {
    width: 12cqw;
  }

  .mission__icon svg {
    width: 9cqw;
    height: 9cqw;
  }

  .mission__dots {
    width: 7.2cqw;
    height: 1.5cqw;
  }

  .mission__title {
    font-size: 3.6cqw;
  }

  .mission__text {
    max-width: none;
    margin-top: 1.8cqw;
    font-size: 2.5cqw;
    line-height: 1.4;
  }

  /* 3 + 2: a six-column grid where each card spans two, and the last row's two
     cards are offset by one column so they centre under the three above. */
  .cards {
    grid-template-columns: repeat(6, 1fr);
    gap: 1.8cqw;
    margin-top: 2cqw;
  }

  .card {
    grid-column: span 2;
    min-height: 0;
    padding: 1.8cqw 1.6cqw 2.6cqw;
  }

  .card:nth-child(4) {
    grid-column: 2 / span 2;
  }

  .card__icon {
    width: 13cqw;
    height: 11cqw;
  }

  .card__icon svg {
    width: 10cqw;
    height: 10cqw;
  }

  .card__title {
    margin-top: 1.8cqw;
    font-size: 2.5cqw;
  }

  .card__text {
    margin-top: 1.4cqw;
    font-size: 2.2cqw;
  }

  .card::after {
    width: 5.5cqw;
    height: 0.6cqw;
  }

  .strip {
    grid-template-columns: 1fr 1fr;
    margin-top: 2cqw;
    min-height: 0;
  }

  /* With a 2x2 strip only the right-hand cell carries a vertical divider, and
     a horizontal rule separates the rows. */
  .strip > * + * {
    border-left: 0;
  }

  .strip > :nth-child(2n) {
    border-left: 1px solid var(--rule);
  }

  .strip > :nth-child(n + 3) {
    border-top: 1px solid var(--rule);
  }

  .strip__seg,
  .strip__motto {
    padding: 2.2cqw;
  }

  .strip__icon {
    width: 5.5cqw;
  }

  .strip__label,
  .strip__mark-text {
    font-size: 1.9cqw;
  }

  .strip__note {
    font-size: 1.8cqw;
  }

  .strip__motto-a {
    font-size: 2.4cqw;
  }

  .strip__motto-b {
    font-size: 3.2cqw;
  }
}

/* Phones are proportionally far taller than tablets, so the same composition is
   set larger relative to the frame — otherwise it fits inside 100dvh with a
   third of the viewport left empty beneath it. Cards go to 2 + 2 + 1. */
@media (max-width: 700px) {
  .hero__frame {
    --frame-ratio: 2.8573;
    --frame-max: 560px;
  }

  .hero__mark {
    width: 34cqw;
  }

  .lockup {
    width: 96cqw;
  }

  .mission {
    padding: 3.5cqw;
  }

  .mission__title {
    font-size: 4.4cqw;
  }

  .mission__text {
    font-size: 3.1cqw;
  }

  .mission__icon {
    width: 14cqw;
  }

  .mission__icon svg {
    width: 11cqw;
    height: 11cqw;
  }

  /* 2 + 2 + 1 on a four-column grid; the fifth card centres on the last row. */
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }

  .card:nth-child(4) {
    grid-column: span 2;
  }

  .card:nth-child(5) {
    grid-column: 2 / span 2;
  }

  .card__icon {
    width: 20cqw;
    height: 16cqw;
  }

  .card__icon svg {
    width: 14cqw;
    height: 14cqw;
  }

  .card__title {
    font-size: 3.4cqw;
  }

  .card__text {
    font-size: 3cqw;
  }

  .strip__label,
  .strip__mark-text {
    font-size: 2.6cqw;
  }

  .strip__note {
    font-size: 2.5cqw;
  }

  .strip__motto-a {
    font-size: 3.2cqw;
  }

  .strip__motto-b {
    font-size: 4.2cqw;
  }

  .strip__icon {
    width: 7cqw;
  }
}

/* A single column of cards only when the viewport is tall enough to carry it.
   Below this height the 2+2+1 grid stays, because five stacked cards inside
   100dvh would set the body text below the point of legibility. */
@media (max-width: 560px) and (min-height: 700px) {
  .hero__frame {
    --frame-ratio: 2.8275;
  }

  .cards {
    grid-template-columns: 1fr;
    gap: 2.2cqw;
  }

  .card,
  .card:nth-child(4),
  .card:nth-child(5) {
    grid-column: 1;
  }

  /* One column is wide enough to set the icon beside the words rather than
     above them, which is what keeps five cards inside the viewport. */
  .card {
    flex-direction: row;
    align-items: center;
    gap: 3cqw;
    padding: 2.6cqw 3cqw;
    text-align: left;
  }

  .card__icon {
    width: 13cqw;
    height: 11cqw;
  }

  .card__icon svg {
    width: 10cqw;
    height: 10cqw;
  }

  .card__title {
    margin-top: 0;
    font-size: 3.2cqw;
  }

  .card__text {
    margin-top: 0.8cqw;
    font-size: 2.9cqw;
    text-wrap: pretty;
  }

  .card::after {
    left: 3cqw;
    bottom: -0.16cqw;
    translate: 0 0;
  }

  .strip {
    grid-template-columns: 1fr;
  }

  .strip > * + * {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .strip > :nth-child(2n) {
    border-left: 0;
  }

  .strip__seg,
  .strip__motto {
    padding: 3cqw;
  }

  .strip__motto {
    align-items: flex-start;
  }

  .strip__label,
  .strip__mark-text,
  .strip__note {
    font-size: 3cqw;
  }

  .strip__motto-a {
    font-size: 3.4cqw;
  }

  .strip__motto-b {
    font-size: 4.4cqw;
  }

  .strip__icon {
    width: 8cqw;
  }
}

/* The risk line wraps to four or five lines on a narrow viewport, so the height
   reserved for it has to grow — it is set in rem and cannot scale itself down,
   which is the point of it. */
@media (max-width: 480px) {
  .hero {
    --hero-risk-h: 5rem;
  }
}

/* On a short viewport the scroll cue is the first thing to go: it is an
   affordance, not part of the composition, and the composition is what may not
   be cut. Below this height the arrow would be costing the hero 40px it does
   not have. */
@media (max-height: 640px) {
  .hero {
    --hero-scroll-h: 0rem;
  }

  .hero__scroll {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll svg {
    animation: none;
  }
}