/* ==========================================================================
   DMG — component layer

   Vanilla CSS ports of the design system's React components. Every value is a
   token from tokens/*.css; nothing here invents a colour, radius or duration.

   Source of truth: "DMG Design System/components/**" and readme.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.dmg-container--wide {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--surface-page);
}
.section--tight  { padding-block: var(--section-y-tight); }
.section--flush  { padding-block: 0; }

.section--light   { background: var(--surface-page); }
.section--subtle  { background: var(--surface-subtle); }
.section--clinical{ background: var(--surface-subtle); }
.section--navy    { background: var(--navy-900); }
.section--deep    { background: var(--navy-950); }

/* Depth on navy bands comes from a low-opacity halo, never a pattern. */
.section--deep::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--halo-blue);
  pointer-events: none;
}
.section__inner { position: relative; z-index: 2; }

/* The horizontal entrances translate up to 64px before settling. Without a
   clip that travel is added to the document's scroll width and the whole page
   gains a horizontal scrollbar — most visibly on the partner grid, whose
   right-hand column starts 64px further right than it ends.

   `clip` rather than `hidden`: hidden on one axis forces the other to `auto`,
   which turns the section into a scroll container and would break any sticky
   positioning inside it. */
.section { overflow-x: clip; }

.section--navy,
.section--deep { color: var(--text-inverse-muted); }

/* Grids ------------------------------------------------------------------- */
.grid            { display: grid; gap: var(--space-6); }
.grid--2         { grid-template-columns: repeat(2, 1fr); }
.grid--3         { grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
.grid--4         { grid-template-columns: repeat(4, 1fr); }
.grid--gap-4     { gap: var(--space-4); }
.grid--gap-8     { gap: var(--space-8); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
/* Bleed variant -----------------------------------------------------------
   The artwork is painted as a layer that runs off the right edge of the
   viewport and dissolves into the page on its other three sides, so nothing
   frames it and the copy appears to sit on the same surface as the picture.

   Wide desktop only. Below 1200 the copy would have to sit on top of the
   artwork rather than beside it, so the framed panel stays the layout there -
   and it is also the fallback if this layer never paints. */
.split__bleed { display: none; }

@media (min-width: 1200px) {
  .section:has(.split--bleed) {
    padding-block: 70px;
    /* The layer is as tall as this band and the artwork is 3:2, so the band's
       height caps how wide the picture can be. Left to the copy alone that is
       about 890px, which on a wide screen stops short of the text and reads as
       two halves rather than one surface. This floor lets the picture keep
       pace with the viewport; it only engages where the copy stops being the
       taller of the two, and is capped so an ultrawide does not stretch the
       band indefinitely. */
    min-height: min(41vw, 820px);
  }
  /* Static, so the layer below measures itself against the section - which
     includes the band's padding - rather than against this inner box, which
     is only as tall as the copy. */
  .section:has(.split--bleed) > .section__inner { position: static; }

  .split--bleed { grid-template-columns: minmax(0, 47%); }
  .split--bleed > .split__panel { display: none; }
  /* Above the layer; both sit in the section's stacking context. */
  .split--bleed > .stack { position: relative; z-index: 1; }

  .split--bleed .split__bleed {
    /* Named once: fading a colour to the transparent keyword interpolates
       through transparent black in some engines, so both stops carry the
       same RGB. */
    --bleed-bed: #fff;
    --bleed-bed-0: rgba(255, 255, 255, 0);

    display: block;
    position: absolute;
    z-index: 0;
    inset-block: 0;
    right: 0;
    /* Shaped to the artwork, not to the space beside the copy: the height is
       the band's, and the ratio then sets the width. The fades are percentages
       of this box, so matching the artwork's ratio is what keeps them landing
       on the picture's own edges - and leaves cover nothing to crop. */
    left: auto;
    aspect-ratio: 3 / 2;

    background-image:
      linear-gradient(to right,  var(--bleed-bed) 0%, var(--bleed-bed-0) 44%),
      linear-gradient(to bottom, var(--bleed-bed) 0%, var(--bleed-bed-0) 15%),
      linear-gradient(to top,    var(--bleed-bed) 0%, var(--bleed-bed-0) 15%),
      var(--bleed-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    pointer-events: none;
  }
}

.split--start     { align-items: start; }
.split--text-wide { grid-template-columns: 1.1fr .9fr; }
.split--media-wide{ grid-template-columns: .9fr 1.1fr; }
.split--aside     { grid-template-columns: 1.1fr .9fr; align-items: start; }
.split--reverse > :first-child { order: 2; }

.stack        { display: grid; gap: var(--stack); align-content: start; }
.stack--tight { gap: var(--stack-tight); }
.stack--loose { gap: var(--stack-loose); }

.row-between {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-10);
}

/* --------------------------------------------------------------------------
   Icon
   -------------------------------------------------------------------------- */

.dmg-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
  color: currentColor;
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding-inline: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: var(--transition-control), transform var(--dur-instant) var(--ease-standard);
}
.btn:active { transform: scale(var(--press-scale)); }

.btn--sm { height: var(--control-h-sm); padding-inline: var(--space-4); font-size: var(--fs-xs); }
.btn--lg { height: var(--control-h-lg); padding-inline: var(--space-8); font-size: var(--fs-body); }
.btn--block { width: 100%; }

.btn--primary { background: var(--action-primary); color: var(--text-inverse); }
.btn--primary:hover { background: var(--action-primary-hover); color: var(--text-inverse); }

.btn--accent { background: var(--action-accent); color: var(--navy-900); box-shadow: var(--glow-accent-soft); }
.btn--accent:hover { background: var(--action-accent-hover); color: var(--white); }

.btn--outline { background: transparent; color: var(--text-strong); border-color: var(--border-default); }
.btn--outline:hover { border-color: var(--border-accent); color: var(--text-accent); }

.btn--ghost { background: transparent; color: var(--text-link); }
.btn--ghost:hover { background: var(--action-ghost-hover); color: var(--text-link); }

.btn--inverse {
  background: var(--surface-glass);
  color: var(--text-inverse);
  border-color: var(--border-inverse);
  backdrop-filter: blur(var(--blur-glass));
}
.btn--inverse:hover { background: rgba(255, 255, 255, .14); border-color: var(--border-accent); color: var(--text-inverse); }

.btn[disabled],
.btn.is-disabled {
  background: var(--state-disabled-bg);
  color: var(--state-disabled-fg);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Arrow nudges on hover, matching CategoryCard's "Explore" affordance. */
.btn .dmg-icon { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Icon-only button ---------------------------------------------------------*/
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  color: var(--text-strong);
  cursor: pointer;
  transition: var(--transition-control);
}
.icon-btn:hover { border-color: var(--border-accent); color: var(--text-accent); }
.icon-btn--sm { width: 32px; height: 32px; }
.icon-btn--lg { width: 48px; height: 48px; }
.icon-btn--ghost { border-color: transparent; color: var(--text-muted); }
.icon-btn--ghost:hover { background: var(--action-ghost-hover); color: var(--text-strong); }
.icon-btn--solid { background: var(--action-primary); border-color: transparent; color: var(--text-inverse); }
.icon-btn--solid:hover { background: var(--action-primary-hover); color: var(--text-inverse); }
.icon-btn--inverse {
  background: var(--surface-glass);
  border-color: var(--border-inverse);
  color: var(--text-inverse);
}
.icon-btn--inverse:hover { background: rgba(255, 255, 255, .14); border-color: var(--border-accent); color: var(--text-inverse); }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: var(--card-pad);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-surface);
}
.card--pad-sm { padding: var(--card-pad-sm); }
.card--pad-lg { padding: var(--space-10); }

.card--flat    { background: var(--surface-card-subtle); box-shadow: none; }
.card--inverse {
  background: var(--surface-inverse-2);
  border-color: var(--border-inverse);
  box-shadow: var(--shadow-inverse);
  color: var(--text-inverse-muted);
}
.card--glass {
  background: var(--surface-glass);
  border-color: var(--border-inverse);
  backdrop-filter: blur(var(--blur-glass));
  box-shadow: none;
  color: var(--text-inverse-muted);
}

.card--interactive { cursor: pointer; }
.card--interactive:hover {
  transform: var(--lift-hover);
  box-shadow: var(--shadow-md);
  border-color: var(--border-accent);
}
.card--inverse.card--interactive:hover,
.card--glass.card--interactive:hover { box-shadow: var(--glow-accent-soft); }

/* The 2px signal rule that marks a featured card. */
.card--accent-edge::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gradient-signal);
}

/* --------------------------------------------------------------------------
   Badge / Tag
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 24px;
  padding-inline: var(--space-3);
  background: var(--surface-sunken);
  color: var(--text-body);
  border-radius: var(--radius-xs);
  font: var(--type-caps);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.badge--brand   { background: var(--surface-brand-soft); color: var(--blue-600); }
.badge--accent  { background: var(--surface-accent-soft); color: var(--cyan-600); }
.badge--success { background: var(--status-success-soft); color: var(--status-success); }
.badge--warning { background: var(--status-warning-soft); color: #8A6207; }
.badge--danger  { background: var(--status-danger-soft); color: var(--status-danger); }
.badge--inverse { background: var(--surface-glass); color: var(--cyan-300); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding-inline: var(--space-4);
  background: transparent;
  color: var(--text-body);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-control);
}
.tag:hover { border-color: var(--border-accent); color: var(--text-body); }
.tag.is-selected,
.tag[aria-pressed="true"] {
  background: var(--navy-900);
  border-color: transparent;
  color: var(--text-inverse);
}

/* --------------------------------------------------------------------------
   SectionHeading
   -------------------------------------------------------------------------- */

.section-heading { display: grid; gap: var(--space-5); justify-items: start; }
.section-heading--center { justify-items: center; text-align: center; }

.section-heading__rule {
  display: block;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan-500);
}
.section-heading--inverse .section-heading__rule { background: var(--cyan-400); }

.section-heading__title {
  font: var(--type-h2);
  letter-spacing: var(--ls-display);
  max-width: var(--measure-heading);
  color: var(--text-strong);
}
.section-heading--inverse .section-heading__title { color: var(--white); }

.section-heading__lead {
  font: var(--type-lead);
  max-width: var(--measure-lead);
  color: var(--text-muted);
}
.section-heading--inverse .section-heading__lead { color: var(--text-inverse-muted); }

/* Body copy inside sections ------------------------------------------------ */
.prose p { font: var(--type-body); color: var(--text-body); max-width: var(--measure-body); }
.prose p + p { margin-top: var(--space-4); }
.prose--muted p { color: var(--text-muted); }
.prose--inverse p { color: var(--text-inverse-muted); }
.prose--lead p { font: var(--type-lead); color: var(--text-strong); max-width: var(--measure-lead); }

/* A blank line the writer typed, standing in for itself. h.paragraphs emits one
   of these per blank line beyond the single one that ends a paragraph, so the
   spacing on the page matches the spacing in the editor.

   Its own top margin is zeroed - the paragraph that follows still carries the
   normal p + p gap, so one typed blank line reads as one line of extra space
   rather than a doubled paragraph break. Not scoped to .prose, because body
   copy is also rendered inside cards, accordions and tabs. */
.prose__blank {
  display: block;
  height: 1.6em;
  height: 1lh;
  margin: 0;
}
.prose p + .prose__blank,
.prose .prose__blank { margin-top: 0; }

/* --------------------------------------------------------------------------
   StatBlock
   -------------------------------------------------------------------------- */

.stat { display: grid; gap: var(--space-2); }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.stat__suffix { color: var(--cyan-500); }
.stat__label {
  font: var(--type-stat-label);
  letter-spacing: .01em;
  color: var(--text-muted);
}
.stat--inverse .stat__value { color: var(--white); }
.stat--inverse .stat__label { color: var(--text-inverse-muted); }

/* --------------------------------------------------------------------------
   FocusRow — "Compliance • Quality • Safety"
   -------------------------------------------------------------------------- */

.focus-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}
.focus-row__item {
  font: var(--type-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--cyan-600);
}
.focus-row__dot { width: 4px; height: 4px; border-radius: 9px; background: var(--cyan-500); }
.focus-row--inverse .focus-row__item { color: var(--cyan-300); }

/* --------------------------------------------------------------------------
   CategoryCard
   -------------------------------------------------------------------------- */

.category-card {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  min-height: 196px;
  padding: var(--card-pad-sm);
  text-decoration: none;
  color: inherit;
}
.category-card__head { display: flex; align-items: center; justify-content: space-between; }
.category-card__chip {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--surface-accent-soft);
  color: var(--cyan-600);
  transition: var(--transition-control);
}
.category-card:hover .category-card__chip { background: var(--navy-900); color: var(--cyan-300); }

.category-card__index {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--n-400);
}
.category-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}
.category-card__body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.category-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: var(--transition-control);
}
.category-card:hover .category-card__cta { color: var(--cyan-600); }
.category-card:hover .category-card__cta .dmg-icon { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Accordion
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--border-subtle); }
.accordion__row { border-bottom: 1px solid var(--border-subtle); }
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-6);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.accordion__num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--cyan-500);
}
.accordion__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}
.accordion__icon { color: var(--blue-600); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.accordion__row.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__body {
  padding: 0 0 var(--space-6) 52px;
  max-width: var(--measure-body);
  font: var(--type-body);
  color: var(--text-body);
}

.accordion--inverse { border-top-color: var(--border-inverse); }
.accordion--inverse .accordion__row { border-bottom-color: var(--border-inverse); }
.accordion--inverse .accordion__title { color: var(--white); }
.accordion--inverse .accordion__icon { color: var(--cyan-300); }
.accordion--inverse .accordion__body { color: var(--text-inverse-muted); }

/* --------------------------------------------------------------------------
   Tabs
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--space-8);
  border-bottom: 1px solid var(--border-subtle);
}
.tabs__tab {
  position: relative;
  padding: 0 0 var(--space-3);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: var(--transition-control);
}
.tabs__tab:hover { color: var(--text-strong); }
.tabs__tab[aria-selected="true"] { color: var(--text-strong); }
.tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gradient-signal);
}
.tabs--inverse { border-bottom-color: var(--border-inverse); }
.tabs--inverse .tabs__tab { color: var(--text-inverse-muted); }
.tabs--inverse .tabs__tab[aria-selected="true"] { color: var(--white); }

.tabs__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { display: grid; gap: var(--space-2); }
.field__label {
  font: var(--type-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.field__wrap { position: relative; display: block; }
/* Centred on the control rather than pushed down by a fixed `top`: a magic
   number only lines up at one control height and drifts everywhere else. */
.field__icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: var(--n-400);
  pointer-events: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.input,
.textarea,
.select {
  width: 100%;
  height: var(--control-h);
  padding-inline: var(--space-4);
  font: var(--type-body);
  color: var(--text-strong);
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  outline: none;
  transition: var(--transition-control);
}
.textarea {
  height: auto;
  min-height: calc(var(--control-h) * 2);
  padding-block: var(--space-3);
  resize: vertical;
  line-height: var(--lh-body);
}
.field__wrap:has(.field__icon) .input { padding-left: var(--space-10); }
.field__wrap:has(.field__icon) .textarea { padding-left: var(--space-10); }
.field__wrap:has(.textarea) .field__icon { top: calc(var(--space-3) + 0.81em); }

.input:focus, .textarea:focus, .select:focus {
  border-color: var(--border-accent);
  box-shadow: var(--glow-accent-soft);
}
.field__wrap:focus-within .field__icon { color: var(--cyan-600); }

.select {
  appearance: none;
  padding-right: var(--space-10);
  cursor: pointer;
}
.field__chevron {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: var(--n-400);
  pointer-events: none;
}

.field__hint  { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--text-muted); }
.field__error { font-family: var(--font-sans); font-size: var(--fs-xs); color: var(--status-danger); }
.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid .select { border-color: var(--status-danger); }

/* Checkbox — real input, visually replaced. */
.checkbox {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text-body);
  cursor: pointer;
}
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  transition: var(--transition-control);
}
.checkbox__box .dmg-icon { opacity: 0; color: var(--white); transition: opacity var(--dur-fast) var(--ease-standard); }
.checkbox input:checked + .checkbox__box { background: var(--action-primary); border-color: transparent; }
.checkbox input:checked + .checkbox__box .dmg-icon { opacity: 1; }
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* The consent checkbox has no .field ancestor, so it carries the invalid state
   itself — see forms() in /js/dmg.js. */
.checkbox.is-invalid .checkbox__box { border-color: var(--status-danger); }
.checkbox.is-invalid > span:last-child { color: var(--status-danger); }

/* The honeypot. Off-screen rather than display:none so bots still fill it. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Media — VideoBackground / ImagePanel / VideoPanel
   -------------------------------------------------------------------------- */

.video-bg {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  display: grid;
  align-items: center;
}
.video-bg--top { align-items: start; }
.video-bg__fallback {
  position: absolute;
  inset: 0;
  background: var(--navy-900);
  background-image: var(--halo-cyan);
}
.video-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--video-treatment);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.video-bg__video.is-ready { opacity: 1; }
.video-bg__scrim { position: absolute; inset: 0; background: var(--scrim-navy); }

/* --- joining a hero to the band beneath it --------------------------------
   A page hero and a dark band below it are one field, not two panels. Two
   things were drawing a visible seam between them:

     1. the hero's scrim finishes at 92% opacity, so a little of the video
        still shows at the very bottom edge, while the band below is solid;
     2. --halo-blue is centred at 20% down its section, which puts a blue
        bloom immediately under the join and lights one side of it.

   So: fade the last of the hero to the exact colour the next band starts
   with, and push that band's halo down out of the join. Scoped with :has()
   to heroes that actually sit above a dark band — where it is unsupported
   nothing is added and the previous appearance stands.
   ------------------------------------------------------------------------ */
.video-bg:has(+ .section--deep)::after,
.video-bg:has(+ .section--navy)::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px 0;
  height: 220px;
  z-index: 1;
  pointer-events: none;
}
.video-bg:has(+ .section--deep)::after {
  background: linear-gradient(180deg, rgba(4, 16, 31, 0) 0%, var(--navy-950) 92%);
}
.video-bg:has(+ .section--navy)::after {
  background: linear-gradient(180deg, rgba(7, 27, 58, 0) 0%, var(--navy-900) 92%);
}

/* The halo moves to the middle of the band, well clear of the top edge. */
.video-bg + .section--deep::before,
.video-bg + .section--navy::before {
  background-image: radial-gradient(58% 46% at 76% 58%, rgba(27, 111, 212, .24), transparent 72%);
}
.video-bg__scrim--side { background: var(--scrim-navy-side); }
.video-bg__content { position: relative; z-index: 2; width: 100%; }

.media-panel { margin: 0; display: grid; gap: var(--space-3); }
.media-panel__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--navy-900);
  border: 1px solid var(--border-inverse);
  box-shadow: var(--shadow-md);
}
.media-panel__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-media-veil);
  pointer-events: none;
}
.media-panel__fallback {
  position: absolute;
  inset: 0;
  background: var(--navy-900);
  background-image: var(--halo-blue);
}
.media-panel__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--video-treatment);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.media-panel__media.is-ready { opacity: 1; }

/* The system's only video control. */
.media-panel__toggle {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  z-index: 2;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(4, 16, 31, .55);
  backdrop-filter: blur(6px);
  color: var(--white);
  cursor: pointer;
  transition: var(--transition-control);
}
.media-panel__toggle:hover { border-color: var(--border-accent); }

/* Media placeholder — used where DMG has not supplied a file yet. */
.media-slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  text-align: center;
  background: var(--navy-900);
  background-image: var(--halo-blue);
  color: var(--text-inverse-muted);
}
.media-slot__label {
  font: var(--type-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Dialog + Toast
   -------------------------------------------------------------------------- */

.dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background: rgba(4, 16, 31, .62);
  backdrop-filter: blur(var(--blur-glass));
}
.dialog[hidden] { display: none; }
.dialog__panel {
  width: 100%;
  max-width: 560px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dialog__edge { display: block; height: 2px; background: var(--gradient-signal); }
.dialog__body { padding: var(--space-8); display: grid; gap: var(--space-4); }
.dialog__head { display: flex; align-items: flex-start; gap: var(--space-6); }
.dialog__title { font: var(--type-h3); }
.dialog__foot { display: flex; gap: var(--space-3); justify-content: flex-end; padding-top: var(--space-2); }

.toast-stack {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 90;
  display: grid;
  gap: var(--space-3);
}
.toast {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  min-width: 320px;
  max-width: 420px;
  padding: var(--space-4) var(--space-5);
  background: var(--navy-900);
  color: var(--white);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inverse);
}
.toast__icon { margin-top: 2px; color: var(--cyan-500); }
.toast--success .toast__icon { color: var(--status-success); }
.toast--error .toast__icon { color: var(--status-danger); }
.toast__title { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.toast__body { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--text-inverse-muted); }
.toast__close { margin-left: auto; background: none; border: 0; color: var(--n-400); cursor: pointer; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.u-caps {
  font: var(--type-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.u-measure-display { max-width: var(--measure-display); }
.u-hairline { height: 1px; background: var(--border-subtle); border: 0; }
.u-hairline--inverse { background: var(--border-inverse); }
.u-mt-auto { margin-top: auto; }

.check-list { display: grid; gap: var(--space-3); }
.check-list__row { display: flex; gap: var(--space-3); align-items: center; }
.check-list__row .dmg-icon { color: var(--cyan-600); flex: 0 0 auto; }
.check-list__row span { font: var(--type-body); color: var(--text-body); }
.check-list--inverse .check-list__row .dmg-icon { color: var(--cyan-400); }
.check-list--inverse .check-list__row span { color: var(--text-inverse-muted); }

/* --------------------------------------------------------------------------
   Reveal vocabulary — scrubbed by scroll position

   These are not triggered animations. Each is a paused animation whose
   playhead is dragged by the scroll position: /js/dmg.js writes a negative
   animation-delay proportional to how far the element has travelled through
   the viewport, so 0% is the moment it appears at the bottom edge and 100% is
   the moment it reaches its resting line up the screen. Scroll back and the
   playhead runs backwards — the entrance reverses rather than replaying.

   `animation-play-state: paused` plus a negative delay is what makes that
   work: a paused animation renders the frame at |delay| into its timeline, so
   moving the delay scrubs it. One set of keyframes drives both directions.

   Four effects, chosen and kept. There is deliberately no default: an element
   with a bare `data-reveal` animates nothing and simply renders, so a missing
   variant fails safe rather than silently reintroducing a fifth effect.

     sweep     the signature. A cyan hairline passes and the content appears
               in its wake. Section headings.
     focus     a specimen resolving under a lens — blur and a slight zoom out.
     approach  scale, fade and rise together, as if arriving from further off.
     drift     arrival from the left or the right, for alternating grids.

   Timing is linear on purpose. When scroll is the clock, an eased timing
   function front-loads the motion — the element would be most of the way
   arrived a quarter into the range and then barely move, which reads as
   ignoring the scroll rather than following it. The damping that gives these
   their character lives in the keyframes: full opacity around 70%, then a
   small overshoot that settles over the last of the travel.

   Usage:  <div data-reveal="approach" data-reveal-delay="130">
   `data-reveal-delay` offsets where in the scroll range an element starts,
   which is what keeps a staggered row staggered when nothing is time-based.
   -------------------------------------------------------------------------- */

:root {
  /* The nominal timeline length. Never elapses — it is only ever scrubbed —
     but JS reads it so the two sides cannot drift apart. */
  --scrub-span: 1000ms;
}

@keyframes dmg-sweep-in { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes dmg-scanline { from { left: 0; opacity: 1; } to { left: 100%; opacity: 1; } }

/* A specimen resolving under a lens. Kept to smaller elements: scrubbing a
   blur across a large surface is the one effect here that can cost a frame. */
@keyframes dmg-focus {
  from { opacity: 0; filter: blur(9px); transform: scale(1.035); }
  70%  { opacity: 1; filter: blur(0); transform: scale(.999); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

@keyframes dmg-approach {
  from { opacity: 0; transform: translateY(34px) scale(.95); }
  70%  { opacity: 1; transform: translateY(-3px) scale(1.006); }
  to   { opacity: 1; transform: none; }
}

@keyframes dmg-drift-left {
  from { opacity: 0; transform: translateX(-64px); }
  74%  { opacity: 1; transform: translateX(4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dmg-drift-right {
  from { opacity: 0; transform: translateX(64px); }
  74%  { opacity: 1; transform: translateX(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Only once JS is driving the playhead. Without it every element is simply
   visible — nothing is hidden behind an animation that will never run. */
.js-scrub [data-reveal] {
  animation-duration: var(--scrub-span);
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: 0ms;
  will-change: transform, opacity;
}

.js-scrub [data-reveal="focus"]       { animation-name: dmg-focus; }
.js-scrub [data-reveal="approach"]    { animation-name: dmg-approach; }
.js-scrub [data-reveal="drift-left"]  { animation-name: dmg-drift-left; }
.js-scrub [data-reveal="drift-right"] { animation-name: dmg-drift-right; }

/* Sweep reveals by clipping, so the text never moves — it is uncovered. */
.js-scrub [data-reveal="sweep"] {
  animation-name: dmg-sweep-in;
  position: relative;
}
/* The hairline rides the same playhead: a pseudo-element inherits the inline
   animation-delay JS writes on its originating element, so the two stay in
   lockstep without JS knowing the pseudo exists. */
.js-scrub [data-reveal="sweep"]::after {
  content: "";
  position: absolute;
  inset-block: -6px;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--cyan-400) 22%, var(--cyan-400) 78%, transparent);
  box-shadow: 0 0 12px 1px rgba(34, 193, 227, .5);
  pointer-events: none;
  animation-name: dmg-scanline;
  animation-duration: var(--scrub-span);
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-delay: inherit;
}
/* Fully arrived: the scanner has left the element, so stop drawing it. The
   animation goes with it — `animation-fill-mode: both` above parks the
   keyframe's own `opacity: 1` on the pseudo, and an animated value outranks a
   plain declaration, so clearing the name is what lets the line below win. */
.js-scrub [data-reveal="sweep"][data-scrub="1"]::after {
  animation-name: none;
  opacity: 0;
}

/* A play-through sweep runs on the browser's clock, but the hairline is driven
   by the scrub playhead alone. With nothing scrubbing it, it parks at the left
   edge of the heading and stays there — which reads as a bracket beside the
   rule rather than as a scanner. These get the sweep without the line. */
.js-scrub [data-reveal="sweep"][data-reveal-play]::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .js-scrub [data-reveal] { animation: none; opacity: 1; transform: none; clip-path: none; filter: none; }
  .js-scrub [data-reveal="sweep"]::after { display: none; }
}

/* ---------------------------------------------------------------------------
   D · M · G — 3D letterforms on a shared orbit
   Each letter is a stack of copies pushed back along Z inside a preserve-3d
   box, so the extrusion turns with the letter and you see the side of the form
   rather than a painted shadow.

   Three nested transforms, one job each. Composed on a single element the
   orbit keyframes would have to carry the scale too, and the scale changes
   when a letter is opened:
     __letter  rides the orbit          (animation)
     __scale   grows open, shrinks shut (transition)
     __body    turns in 3D              (animation)
   ------------------------------------------------------------------------- */
.dmg3d {
  --orbit: 26s;
  --turn: 11s;
  /* Radius and letter size move together: doubling the type without pushing
     the ring out would have the three of them overlapping at the centre.
     Both are capped against the narrowest column the orbit sits in, which
     is 389px at the 1024 breakpoint. */
  --r: clamp(74px, 9vw, 136px);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / .82;
  max-width: 560px;
  margin-inline: auto;
  perspective: 1200px;
  perspective-origin: 50% 48%;
}

/* The path the letters travel, drawn faintly so the motion reads as an orbit
   rather than as three letters drifting independently. */
.dmg3d__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  transform: translate(-50%, -50%) rotateX(64deg);
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  opacity: .55;
}

.dmg3d__letter {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  /* rotate → push out → counter-rotate keeps the letter upright while the
     frame it sits in goes round. */
  animation: dmg3d-orbit var(--orbit) linear infinite;
  animation-delay: calc(var(--i) * (var(--orbit) / -3));
  will-change: transform;
}
.dmg3d__letter:focus-visible { outline: 2px solid var(--cyan-400); outline-offset: 6px; border-radius: 4px; }

@keyframes dmg3d-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(var(--r)) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg) translateX(var(--r)) rotate(-360deg); }
}

.dmg3d__scale {
  display: block;
  transform-style: preserve-3d;
  transform: scale(var(--s, 1));
  transition: transform 520ms cubic-bezier(.2, .7, .3, 1), filter 400ms ease;
}

.dmg3d__body {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(96px, 15vw, 190px);
  line-height: .96;
  letter-spacing: -.03em;
  animation: dmg3d-turn var(--turn) cubic-bezier(.45, 0, .55, 1) infinite;
  animation-delay: calc(var(--i) * (var(--turn) / -3.4));
}

@keyframes dmg3d-turn {
  0%, 100% { transform: rotateY(-24deg) rotateX(6deg); }
  50%      { transform: rotateY(24deg) rotateX(-4deg); }
}

.dmg3d__face {
  position: relative;
  display: block;
  background: linear-gradient(160deg, var(--blue-400) 0%, var(--blue-600) 55%, var(--navy-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity var(--dur-base) var(--ease-standard);
}

.dmg3d__depth {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--navy-800);
  transform: translateZ(calc(var(--d) * -1.5px));
  opacity: calc(1 - (var(--d) / 34));
}
.dmg3d__letter:nth-of-type(1) .dmg3d__depth { color: var(--navy-900); }
.dmg3d__letter:nth-of-type(2) .dmg3d__depth { color: var(--navy-800); }
.dmg3d__letter:nth-of-type(3) .dmg3d__depth { color: var(--navy-700); }

.dmg3d__glow {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 116%;
  height: 20px;
  transform: translateX(-50%) rotateX(78deg);
  background: radial-gradient(ellipse at center, rgba(4, 16, 31, .26) 0%, rgba(4, 16, 31, 0) 70%);
  pointer-events: none;
}

/* Open letter forward and lit; the other two step back so the difference is
   size as well as colour. */
.dmg3d__letter.is-active { --s: 1.32; z-index: 2; }
.dmg3d__letter:not(.is-active) { --s: .74; }
.dmg3d__letter.is-active .dmg3d__scale { filter: drop-shadow(0 14px 30px rgba(0, 163, 199, .4)); }
.dmg3d__letter.is-active .dmg3d__face {
  background: linear-gradient(160deg, var(--cyan-400) 0%, var(--cyan-600) 45%, var(--blue-600) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.dmg3d__letter:not(.is-active) .dmg3d__face { opacity: .5; }
.dmg3d__letter:not(.is-active) .dmg3d__depth { opacity: calc((1 - (var(--d) / 34)) * .55); }
.dmg3d__letter:hover:not(.is-active) { --s: .86; }

@media (max-width: 560px) {
  .dmg3d { --r: clamp(60px, 18vw, 88px); max-width: 340px; }
  .dmg3d__body { font-size: clamp(64px, 18vw, 110px); }
}

@media (prefers-reduced-motion: reduce) {
  .dmg3d__letter, .dmg3d__body { animation: none; }
  .dmg3d__letter { position: static; display: inline-block; transform: none; }
  .dmg3d { aspect-ratio: auto; display: flex; justify-content: center; align-items: center; gap: var(--space-6); padding-block: var(--space-8); }
  .dmg3d__ring { display: none; }
}

/* ---------------------------------------------------------------------------
   Tirana distribution map
   Real OSM road geometry, drawn in three weights so the city reads as a
   network rather than a tangle, with couriers running the lit arteries out of
   the depot. Everything scales with the viewBox, so there is no breakpoint
   where the streets and the vehicles disagree about where a road is.
   ------------------------------------------------------------------------- */
.citymap {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 42% 41%, rgba(0, 163, 199, .16) 0%, rgba(4, 16, 31, 0) 62%),
    linear-gradient(168deg, var(--navy-900) 0%, var(--navy-950) 100%);
  border: 1px solid rgba(127, 220, 242, .14);
}

/* The frame's ratio is set inline from the payload, so rebuilding the map with
   a different bounding box reshapes the figure rather than cropping it. */
.citymap__svg { display: block; width: 100%; height: 100%; }

/* The base network. Deliberately dim — it is context, not content. */
.citymap__minor path {
  stroke: rgba(127, 180, 245, .17);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.citymap__major path {
  stroke: rgba(127, 180, 245, .38);
  stroke-width: 2.1;
  stroke-linecap: round;
}

/* The routes a courier is actually on, lit and flowing. The dash march runs
   against the direction of travel, which reads as the road feeding the van. */
.citymap__routes path {
  stroke: var(--cyan-400);
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: .55;
  stroke-dasharray: 5 13;
  animation: citymap-flow 1.4s linear infinite;
  animation-delay: calc(var(--i) * -.35s);
}
@keyframes citymap-flow { to { stroke-dashoffset: -18; } }

.citymap__courier-dot { fill: var(--white); }
.citymap__courier-halo { fill: var(--cyan-400); opacity: .22; }
.citymap__courier { filter: drop-shadow(0 0 7px rgba(34, 193, 227, .85)); }

/* The depot. Two waves half a cycle apart so the pulse never fully clears. */
/* The depot has to be legible as a different kind of thing from a courier,
   so it carries a standing ring as well as the pulse. */
.citymap__hq-dot { fill: var(--white); stroke: var(--cyan-400); stroke-width: 3; }
.citymap__hq { filter: drop-shadow(0 0 10px rgba(34, 193, 227, .9)); }
.citymap__hq-wave {
  fill: none;
  stroke: var(--cyan-300);
  stroke-width: 2;
  /* transform-box defaults to view-box on SVG elements, so `center` would mean
     the middle of the map, not the middle of this circle - the pulse expanded
     from a point two kilometres from the depot. */
  transform-box: fill-box;
  transform-origin: center;
  animation: citymap-ping 3.2s cubic-bezier(.2, .6, .3, 1) infinite;
}
.citymap__hq-wave--late { animation-delay: -1.6s; }
@keyframes citymap-ping {
  0%   { transform: scale(.4); opacity: .9; }
  100% { transform: scale(3.1); opacity: 0; }
}

.citymap__credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .02em;
  color: rgba(198, 211, 226, .55);
}

@media (max-width: 767px) {
  /* Below this the minor network is pure noise at the width available. */
  .citymap__minor { display: none; }
  .citymap__major path { stroke-width: 3; }
  .citymap__routes path { stroke-width: 3.6; }
}

@media (prefers-reduced-motion: reduce) {
  .citymap__routes path, .citymap__hq-wave { animation: none; }
  .citymap__routes path { stroke-dasharray: none; opacity: .5; }
  .citymap__fleet { display: none; }
}

/* A rich_text block set to centre. The heading uses the partial's own
   --center modifier; what is left is the prose, whose paragraphs carry their
   own measure and would otherwise sit left inside a centred column. */
/* margin-inline centres the narrow column on the page; text-align centres
   its contents inside it. Both are needed - dropping the first leaves a
   neatly centred column pinned to the left edge of the section. */
.rich--center { margin-inline: auto; text-align: center; }
.rich--center .prose p { margin-inline: auto; }

/* Cards sit inside a reveal wrapper, so the stretch the grid applies lands on
   the wrapper and the card inside sizes to its own text - a row of cards ends
   up ragged whenever one has more copy. Pass the height through. */
.grid > [data-reveal] { display: flex; }
.grid > [data-reveal] > .card { flex: 1; }

/* ---------------------------------------------------------------------------
   rich_text — split statement
   The heading is held left at display scale against the copy on the right, so
   the block occupies the whole container instead of leaving a third of it
   empty either side of a narrow column. The hairline between the two is what
   makes it read as one composition rather than two stray columns.
   ------------------------------------------------------------------------- */
.rich--split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5.5vw, 88px);
  align-items: start;
  position: relative;
}

.rich__head { display: grid; gap: var(--space-5); align-content: start; }

.rich__rule {
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan-400) 0%, var(--blue-500) 100%);
}

.rich__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 3.5vw, 56px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--text-strong);
  text-wrap: balance;
}

/* The divider sits on the body rather than between the grid tracks, so it
   disappears with the same media query that stacks the columns. */
.rich__body {
  display: grid;
  gap: var(--space-6);
  padding-left: clamp(24px, 4vw, 64px);
  border-left: 1px solid var(--border-subtle);
}

.rich__lead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(21px, 1.7vw, 27px);
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--text-strong);
  text-wrap: pretty;
}

/* The prose measure is set for a full-width column; inside this one it would
   wrap two words to a line. */
.rich--split .prose p { max-width: none; }
.rich__act { margin-top: var(--space-4); justify-self: start; }

.rich--inverse .rich__title,
.rich--inverse .rich__lead { color: var(--white); }
.rich--inverse .rich__body { border-left-color: var(--border-inverse); }

@media (max-width: 1023px) {
  .rich--split { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .rich__body { padding-left: 0; border-left: 0; }
}

/* ---------------------------------------------------------------------------
   rich_text — company statement
   Design system throughout: DS type tokens, DS cyan, DS spacing, DS buttons.
   What makes it distinct from every other block is the arrangement, not new
   ornament — a single cyan rule holding the whole statement, and running text
   set in two columns, which nothing else on the site does.
   ------------------------------------------------------------------------- */
.stmt {
  display: grid;
  gap: var(--space-8);
  border-left: 3px solid var(--cyan-400);
  padding-left: clamp(22px, 3.6vw, 54px);
}

.stmt__head { display: grid; gap: var(--space-5); max-width: 46ch; }

.stmt__title {
  margin: 0;
  font: var(--type-h2);
  letter-spacing: -.022em;
  color: var(--text-strong);
  text-wrap: balance;
}

.stmt__lead {
  margin: 0;
  font: var(--type-lead);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* The two columns. column-fill: balance keeps them level rather than filling
   the first to the section's full height and leaving the second short. */
.stmt__body {
  columns: 2;
  column-gap: clamp(28px, 4vw, 72px);
  column-fill: balance;
}
.stmt__body p {
  font: var(--type-body);
  color: var(--text-body);
  max-width: none;
  margin: 0;
  /* A paragraph broken across the column boundary is unreadable. */
  break-inside: avoid;
}
.stmt__body p + p { margin-top: var(--space-4); }

.stmt__acts { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.stmt__acts .btn { gap: 10px; }

.section--navy .stmt__title,
.section--deep .stmt__title { color: var(--white); }
.section--navy .stmt__body p,
.section--deep .stmt__body p { color: var(--text-inverse-muted); }

@media (max-width: 880px) {
  /* Two columns of body text need real width; below this they become a pair
     of narrow gutters and the reader's eye has to jump on every line. */
  .stmt__body { columns: 1; }
}