/* ==========================================================================
   Nikea Health Logistics — design system
   Concept: "the dossier". Paper, ink, hairline rules, numbered sections,
   monospace reference labels. Restraint reads as competence.
   ========================================================================== */

:root {
  /* ============================================================ ABYSSAL ==
     Dark, vast, one signal. Blue-black ground, a single green that means
     "cleared", and blue reserved for the requirement the page keeps
     returning to. Chosen 2026-08-26 from three directions.

     Role names only — never a hue name. --accent, never --green-400.
     ==================================================================== */

  /* Surfaces */
  --ground:     #071620;
  --ground-2:   #0c2230;
  --ground-3:   #112c3c;

  /* Ink */
  --ink:        #e8f1f3;
  --ink-2:      #b2c8ce;
  --muted:      #7e98a0;

  /* Accent — green is the signal, used sparingly. Blue is structural, and
     --accent-blue-2 exists because the darker blue drops under 4.5:1 on this
     ground at small sizes. */
  --accent:       #34d3a6;
  --accent-2:     #5ce0bb;
  --accent-ink:   #04222c;
  --accent-blue:  #2a7fb8;
  --accent-blue-2:#5aa8de;
  --accent-soft:  rgba(52, 211, 166, 0.40);   /* accent at rest, for hairlines */
  --ground-veil:  rgba(7, 22, 32, 0.82);      /* sticky header, over blurred content */

  /* Rules */
  --rule:        rgba(232, 241, 243, 0.10);
  --rule-soft:   rgba(232, 241, 243, 0.05);
  --rule-strong: rgba(232, 241, 243, 0.24);

  /* Type — Manrope carries the display voice, Inter the reading, Plex Mono
     the labels. Mono is the house label face across the Nikea sites. */
  --display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing — one 4px scale, shared across all Nikea sites. An arbitrary
     value is a bug, not a preference. See _foundation/tokens.css. */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 192px;

  /* Layout — 1200px is the shared Nikea container. */
  --container: 1200px;
  --gutter: clamp(24px, 4vw, 48px);
  --measure: 68ch;

  /* Motion — one curve, durations by weight. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-1: 150ms; --dur-2: 200ms; --dur-3: 300ms; --dur-reveal: 500ms;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- structure -- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.band {
  border-top: 1px solid var(--rule);
  padding: 96px 0;
}
.band--tint { background: var(--ground-2); }
.band--flush { border-top: 0; }
.band--tight { padding: 64px 0; }

/* Section label: "01 / CAPABILITIES" — the dossier index device */
.label {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 44px;
}
.label__n { color: var(--accent); }
.label__n::after {
  content: '';
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--accent);
  vertical-align: middle;
  margin-left: 14px;
}

/* --------------------------------------------------------------- nav ---- */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ground-veil);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 74px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand svg { width: 26px; height: 26px; flex: none; }
.brand b { font-weight: 500; }
.brand span { color: var(--muted); font-weight: 400; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  text-decoration: none;
  font-size: 15px;
  color: var(--ink-2);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav__cta {
  background: var(--accent);
  color: var(--accent-ink) !important;
  padding: 10px 20px !important;
  border-radius: 2px;
  font-size: 14.5px;
  border-bottom: 0 !important;
  transition: background .18s;
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 8px 13px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
}

/* --------------------------------------------------------------- hero --- */

.hero { padding: 108px 0 84px; }

.hero__kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
}
.hero__kicker b { color: var(--accent); font-weight: 500; }

.hero h1 {
  font-size: clamp(2.9rem, 9.4vw, 7rem);
  line-height: 0.97;
  letter-spacing: -0.045em;
  font-weight: 800;
  max-width: 14ch;
  margin-bottom: var(--s-7);
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero__lead {
  font-size: 19.5px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}

/* page intro (inner pages) */
.intro { padding: 92px 0 68px; }
.intro h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); max-width: 18ch; margin-bottom: 24px; }
.intro__lead { font-size: 19px; color: var(--ink-2); max-width: 60ch; }

/* -------------------------------------------------------------- doors --- */

.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
  background: var(--ground);
}
.door {
  padding: 44px 40px 40px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background .2s;
}
.door + .door { border-left: 1px solid var(--rule); }

.door__tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}
.door h3 { font-size: 1.72rem; margin-bottom: 16px; }
.door p { font-size: 16px; color: var(--ink-2); margin-bottom: 26px; }
.door__go {
  margin-top: auto;
  font-size: 15px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.door__go span { transition: transform .2s; }

/* --------------------------------------------------------------- index -- */

/* Numbered capability rows — the dossier contents page */
.index { border-top: 1px solid var(--rule); }
.index__row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1.15fr) minmax(0, 1.35fr) 34px;
  gap: 28px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background .18s, padding-left .18s;
}
.index__n {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  padding-top: 8px;
  letter-spacing: .06em;
}
.index__row h3 { font-size: 1.5rem; }
.index__row p { font-size: 15.5px; color: var(--muted); margin: 0; padding-top: 4px; }
.index__go { color: var(--accent); padding-top: 6px; transition: transform .18s; }

/* ---------------------------------------------------------- split copy -- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: start;
}
.split h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); max-width: 16ch; }
.split__body { font-size: 17px; color: var(--ink-2); max-width: 58ch; }
.split__body p + p { margin-top: 1.05em; }

/* pull-out note — the "legal requirement" device */
.note {
  border-left: 2px solid var(--accent);
  background: var(--ground-2);
  padding: 24px 28px;
  margin: 30px 0 0;
  font-size: 16px;
  color: var(--ink-2);
}
.note__label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}

/* --------------------------------------------------------------- steps -- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule);
}
.step {
  padding: 30px 28px 34px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.step:nth-child(3n) { border-right: 0; }
.step:nth-last-child(-n+3) { border-bottom: 0; }
.step__n {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: 16px;
}
.step h4 { font-size: 1.22rem; margin-bottom: 10px; }
.step p { font-size: 15px; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------- deliverables */

.panel {
  border: 1px solid var(--rule);
  background: var(--ground-2);
}
.panel__head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 16px 24px;
  border-bottom: 1px solid var(--rule);
}
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li {
  padding: 14px 24px;
  font-size: 15.5px;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-2);
}
.panel li:last-child { border-bottom: 0; }

/* ----------------------------------------------------------------- faq -- */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 26px 40px 26px 0;
  font-family: var(--display);
  font-size: 1.32rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 22px;
  line-height: 1;
}
.faq details[open] summary::after { content: '\2212'; }
.faq__a {
  padding: 0 60px 28px 0;
  font-size: 16.5px;
  color: var(--ink-2);
  max-width: 70ch;
}

/* ----------------------------------------------------------------- cta -- */

.cta {
  background: var(--ground-2);
  color: var(--ink);
  padding: 84px 0;
}
.cta__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.cta h2 { font-size: clamp(2rem, 4vw, 3rem); max-width: 14ch; }
.cta a {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  padding-bottom: 4px;
}
.cta__sub { font-size: 15px; color: var(--ink-2); margin-top: 14px; }

/* -------------------------------------------------------------- buttons - */

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-size: 15.5px;
  padding: 14px 28px;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--sans);
  transition: background .18s;
}
.btn--line {
  background: none;
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}

.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; }

/* --------------------------------------------------------------- forms -- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 72px;
  align-items: start;
}

.details dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.details dd {
  margin: 0 0 26px;
  font-size: 16.5px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule-soft);
}
.details dd:last-child { border-bottom: 0; }
.details a { color: var(--accent); text-decoration: none; }

.field { margin-bottom: 26px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 16.5px;
  color: var(--ink);
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

.form-note { font-size: 14px; color: var(--muted); margin-top: 22px; }

/* -------------------------------------------------------------- footer -- */

.footer {
  background: var(--ground-2);
  color: var(--ink-2);
  padding: 68px 0 34px;
  font-size: 15px;
}
.footer a { color: var(--ink-2); text-decoration: none; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 46px;
}
.footer__grid h5 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
  font-weight: 400;
}
.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { margin-bottom: 11px; }
.footer .brand { color: var(--ink); }
.footer .brand span { color: var(--muted); }
.footer__blurb { margin-top: 18px; font-size: 14.5px; color: var(--muted); max-width: 30ch; }
.footer__bottom {
  border-top: 1px solid var(--rule);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 940px) {
  .split { grid-template-columns: 1fr; gap: 34px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(3n) { border-right: 1px solid var(--rule); }
  .step:nth-child(2n) { border-right: 0; }
  .step:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
  .step:nth-last-child(-n+2) { border-bottom: 0; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 720px) {
  :root { --gutter: 22px; }
  body { font-size: 16.5px; }

  .menu-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
  .nav__cta { text-align: center; margin-top: 14px; }

  .hero { padding: 68px 0 56px; }
  .band { padding: 64px 0; }
  .label { margin-bottom: 32px; }

  .doors { grid-template-columns: 1fr; }
  .door + .door { border-left: 0; border-top: 1px solid var(--rule); }
  .door { padding: 34px 26px 32px; }

  .index__row {
    grid-template-columns: 40px 1fr;
    gap: 14px 16px;
    padding: 24px 0;
  }
  .index__row p { grid-column: 2; padding-top: 0; }
  .index__go { display: none; }

  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; }
  .step:last-child { border-bottom: 0 !important; }

  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .cta__inner { align-items: flex-start; }
  .faq summary { font-size: 1.16rem; }
  .faq__a { padding-right: 0; }
}

/* ------------------------------------------------------------- a11y ----- */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

::selection {
  /* Derived from the accent with color-mix so no raw colour value lives here.
     A retired brand colour once survived in this exact rule on another Nikea
     site, written in decimal and invisible to every hex sweep. */
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 12px 20px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* --- additions ---------------------------------------------------------- */

/* Reference rows: same grid as .index__row but not a link. */
.index__row--static { cursor: default; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and screen readers are kept out with aria-hidden + tabindex. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Email panel shown on /contact/ while no form handler is configured. */
.panel--cta { align-self: start; }
.panel__lead { margin: 4px 0 14px; }
.panel__mail {
  font-family: var(--display);
  font-size: clamp(22px, 3.4vw, 30px);
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

/* ------------------------------------------------------------------ hover --

   Every hover rule lives here, behind a pointer query, and nowhere else.

   On a touchscreen there is no cursor, so a tap synthesises hover and the state
   STAYS until you tap elsewhere. Two of these rules move layout (.index__row
   shifted 12px, .door__go opened its gap), so a tapped row stayed shifted and
   read as a broken page. The stylesheet's only queries were width-based, and
   width is not input type: a 1400px touchscreen laptop got the desktop layout
   and the stuck hover with it.

   Keep new hover rules inside this block.                                     */

@media (hover: hover) and (pointer: fine) {
  .nav a:hover {color: var(--ink); border-bottom-color: var(--rule-strong); }
  .nav__cta:hover {background: var(--accent-ink); }
  .door:hover {background: var(--ground-2); }
  .door:hover .door__go {gap: 15px; }
  .index__row:hover {background: var(--ground-2); padding-left: 12px; }
  .index__row:hover .index__go {transform: translateX(5px); }
  .cta a:hover {border-bottom-color: var(--accent); }
  .btn:hover {background: var(--accent-ink); }
  .btn--line:hover {background: var(--ground-2); }
  .details a:hover {text-decoration: underline; }
  .footer a:hover {color: var(--ink); }
  .index__row--static:hover {background: none; }
}

/* ----------------------------------------------------------- touch targets --

   44px is a fingertip figure (Apple HIG, WCAG AAA 2.5.5), not a mouse one — the
   AA minimum is 24px and every target here already cleared that. So the extra
   height is given to coarse pointers only, and the desktop layout keeps its
   density. Height comes from padding, never from font size.                   */

@media (pointer: coarse) {
  .brand { padding: 5px 0; }

  /* The contact page was never audited until the rendered sweep learned to read
     sitemap.xml — it had only ever visited each site's root. Four targets on it
     were under the 44px fingertip figure: the form's single-line fields at 41px,
     the enquiry select at 43px, and the two mailto links at 20px and 17px. The
     select is the one that mattered: a 43px dropdown is the first thing a phone
     visitor has to hit to say what they are enquiring about. */
  .field input,
  .field select { min-height: 44px; }
  /* Every mailto in the body, not an enumerated list of the classed ones. The
     two that survived the first attempt were plain <a> with no class at all —
     one inside a <dd>, one mid-sentence — so naming classes missed them. On this
     site the email address IS the call to action, so it is the last link that
     should be hard to hit. */
  main a[href^="mailto"] { display: inline-block; padding: 12px 0; }
  .menu-toggle { min-height: 44px; display: inline-flex; align-items: center; }
  .cta .container > div > a { display: inline-block; padding: 11px 0; }
  .footer__grid li { margin-bottom: 0; }
  .footer__grid li a { display: inline-block; padding: 12px 0; }
  .footer__bottom a { display: inline-block; padding: 12px 0; }
}

/* ------------------------------------------------------------- numerals --
   Digits that sit in a column or get compared use tabular figures.
   Proportional digits make aligned numbers look misaligned. */
.contact dd,
.footer__bottom,
.footer__grid li,
.hero-meta {
  font-variant-numeric: tabular-nums;
}

/* --- imagery -------------------------------------------------------------
   Added 2026-08-27. Two placements only, because Abyssal is a dark ground with
   one signal colour and photographs compete with that if you let them spread.

   The capability list is a row layout, not cards — so each image is a thumbnail
   column inside the row rather than a picture on top of a card. That keeps the
   scannable left-to-right reading of number, title, blurb, which is what the row
   layout is for.

   No text sits over any photograph on this site. Abyssal's body colour is
   #b2c8ce on #071620; over an image it needs a veil dark enough that the image
   stops being visible, which makes the image pointless. Side by side instead. */
.index--pics .index__row {
  grid-template-columns: 44px 140px minmax(0, 1fr) minmax(0, 1.25fr) 28px;
  gap: 24px;
  align-items: center;
}
.index__pic {
  display: block;
  line-height: 0;
  border-radius: 2px;
  overflow: hidden;
  background: var(--ground-3);
}
.index__pic img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

/* The requirement band: photograph beside the argument, full-bleed.
   .reqband__say replaces the .container that used to wrap this section, so it
   has to carry the gutter itself — the first attempt inherited nothing and the
   copy ran to the window edge. */
.reqband {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: stretch;
  padding: 0;
}
.reqband__pic { line-height: 0; display: flex; background: var(--ground-3); }
.reqband__pic img {
  width: 100%; height: 100%; min-height: 100%;
  object-fit: cover; display: block;
}
.reqband__say {
  padding: clamp(40px, 6vw, 88px) clamp(24px, 4vw, 64px);
  display: flex; flex-direction: column; justify-content: center;
}
/* Stacked, because the column is now half the page: the two-column split that
   worked across a full-width container would give each side about 300px. */
.split--stacked { grid-template-columns: 1fr; gap: var(--s-5); }

@media (max-width: 860px) {
  .reqband { grid-template-columns: 1fr; }
  .reqband__pic img { max-height: 40vh; }
}
@media (max-width: 760px) {
  /* The row collapses to number + content, so the thumbnail goes full width
     above the title rather than trying to hold a 140px column on a phone. */
  .index--pics .index__row { grid-template-columns: 40px 1fr; gap: 14px 16px; }
  .index__pic { grid-column: 1 / -1; order: -1; margin-bottom: 4px; }
  .index__pic img { aspect-ratio: 16 / 9; }
}