/* ============================================================
   Miranium AI — stylesheet
   ============================================================ */

/* ============================================================
   THE THEME: an element data sheet.

   Miranium is named like an element, and the mark is a periodic-table tile,
   so the site is set like the reference sheet for one: warm paper, black ink,
   hairline rules, numbered entries, and figures in mono. Colour comes from
   mineral pigments rather than from light, one per product:
   verdigris (the brand), ochre, amethyst and cobalt, with cinnabar as the
   single signal colour. No glows, no gradients, no glass.
   ============================================================ */

:root {
  --bg:        #f2efe7;   /* paper */
  --bg-alt:    #e9e5da;   /* the deeper sheet a reference table sits on */
  --surface:   #f8f6f0;
  --surface-2: #fdfcf9;
  --ink-rgb:   21, 23, 26;
  --line:      rgba(21, 23, 26, 0.17);
  --line-soft: rgba(21, 23, 26, 0.10);
  /* THE BOUNDARY OF ANYTHING YOU CAN TYPE IN OR PRESS, and it is a third
     variable rather than a louder `--line` on purpose.

     WCAG 2.1 SC 1.4.11 asks 3:1 for the visual information needed to identify
     a control. A card's edge is decoration, 1.4.11 exempts it, so `--line`
     stays quiet; anything a user types into or presses uses this instead. */
  --line-field: rgba(21, 23, 26, 0.58);   /* >=3:1 on all three grounds */

  --text:      #15171a;
  --text-dim:  #474b51;
  /* 5.02:1 on --bg and 4.58:1 on --bg-alt: it is used at 0.68rem in
     .rowi small, .ledger time and .mira-id, so it is held to the 4.5:1 body
     floor (SC 1.4.3), not the large-text 3:1. */
  --text-mute: #62666d;

  --accent:      #0a6b57;   /* verdigris, the brand colour */
  --accent-deep: #07503f;
  --accent-rgb:  10, 107, 87;
  --signal:      #b23a1e;   /* cinnabar: the one warm mark on the page */

  /* The product pigments. Each clears 4.5:1 on --bg and on --bg-alt, because
     each is used for text (a kicker, a count, a link) on its own page. */
  --verdigris: #0a6b57;
  --ochre:     #95520a;
  --amethyst:  #5b3fb8;
  --cobalt:    #1d5a9e;
  --umber:     #7c4b28;   /* MiraOS, taken from its own mark */

  --ink-bg:    #15171a;     /* the footer and the few inverted panels */
  --on-ink:    #ece8de;
  --on-ink-dim:#a9aaa6;

  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1180px;
  --r:    3px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* THE INVERTED SHEET: the footer and the closing call to action are set in
   paper on ink. Rather than restyle every component inside them, the tokens
   are redefined in scope, so a button, a kicker or a link inside one of these
   is the same component with its colours turned over. */
.ink {
  --bg:        #15171a;
  --bg-alt:    #1c1f23;
  --surface:   #1c1f23;
  --surface-2: #23262b;
  --ink-rgb:   236, 232, 222;
  --line:      rgba(236, 232, 222, 0.18);
  --line-soft: rgba(236, 232, 222, 0.10);
  --line-field: rgba(236, 232, 222, 0.5);
  --text:      #ece8de;
  --text-dim:  #b9b9b3;
  --text-mute: #9c9d98;
  --accent:      #5fc9ad;
  --accent-deep: #5fc9ad;
  --accent-rgb:  95, 201, 173;
  background: var(--bg);
  color: var(--text);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { font-family: var(--serif); font-optical-sizing: auto; }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--text); color: var(--bg); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
  position: relative;
  z-index: 2;
}

/* ---------- navigation ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px max(24px, calc((100vw - var(--wrap)) / 2 + 24px));
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  padding-block: 12px;
  background: var(--bg);
  border-bottom-color: var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  margin-right: auto;
}
.brand-mark { width: 30px; height: 30px; color: var(--text); flex: none; }
.brand-ai {
  color: var(--accent);
  font-weight: 500;
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 0.82em;
}

.nav-links {
  position: relative;   /* the containing block the three dropdown panels hang from */
  display: flex;
  gap: 30px;
  font-size: 0.885rem;
  color: var(--text-dim);
}
.nav-links a {
  position: relative;
  transition: color 0.25s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 2px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }

/* ---------- nav dropdown ---------- */
/* CSS-only: opens on hover and on focus-within, so it works before hydration
   and for a keyboard. The trigger is a real link to /products, so a tap on a
   touch device navigates rather than dead-ending on a menu that never opens. */

.nav-drop > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-drop .caret {
  width: 10px; height: 10px;
  opacity: 0.6;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav-drop:hover .caret,
.nav-drop:focus-within .caret { transform: rotate(180deg); opacity: 1; }

.nav-menu {
  /* One rule for all three panels. They hang from the nav group rather than
     from their own trigger, so they open at the same place, at the same
     width, whichever one is hovered. Anchored from each trigger they landed
     at three different left edges, and the first one ran off the window at
     narrow desktop widths. The group's right edge is the Company trigger's,
     so the panel ends 22px past it, and all three triggers sit inside the
     panel's span, which keeps the pointer's way down to it unbroken. */
  position: absolute;
  top: 100%;
  right: -22px;
  padding-top: 14px;        /* bridges the gap so the pointer can travel */
  opacity: 0;
  visibility: hidden;
  transform: translateY(7px);
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.nav-drop:hover .nav-menu,
.nav-drop:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
/* Escape, from main.js. It has to out-specify the two rules above, which are
   still true at the moment it is set — the pointer is still over the menu, or
   focus is still on the trigger it just returned to. Without JavaScript the
   class is never applied and this rule never matches. */
.nav-drop.nav-drop-dismissed .nav-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.nav-menu-card {
  width: 352px;
  padding: 6px;
  border: 1px solid var(--text);
  border-radius: var(--r);
  background: var(--surface-2);
  box-shadow: 6px 6px 0 rgba(var(--ink-rgb), 0.08);
}
.nav-menu-card a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  padding: 11px 13px;
  border-radius: 2px;
  transition: background 0.2s;
}
.nav-menu-card a::after { display: none; }   /* the nav underline, not wanted here */
.nav-menu-card a:hover { background: var(--bg); }
.nav-menu-card a[aria-current="page"] { background: var(--bg-alt); }

.nav-menu-card .nm-ico {
  grid-row: span 2;
  width: 21px; height: 21px;
  margin-top: 3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* A real mark is artwork, not a stroked path: it brings its own colour and
   must not inherit the row's stroke rules. */
.nav-menu-card .nm-mark {
  stroke: none;
  fill: none;
  border-radius: 2px;
  object-fit: contain;
}

.nav-menu-card a[data-t="diagnosis"]  .nm-ico { color: var(--verdigris); }
.nav-menu-card a[data-t="cost"]       .nm-ico { color: var(--ochre); }
.nav-menu-card a[data-t="management"] .nm-ico { color: var(--amethyst); }
.nav-menu-card a[data-t="os"]         .nm-ico { color: var(--cobalt); }

.nav-menu-card strong {
  font-size: 0.895rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.4;
}
.nav-menu-card em {
  font-style: normal;
  font-size: 0.775rem;
  font-weight: 400;
  color: var(--text-mute);
  line-height: 1.5;
  margin-top: 2px;
}

.nav-menu-all {
  display: flex !important;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding-top: 14px !important;
  border-top: 1px solid var(--line-soft);
  border-radius: 0 !important;
  font-size: 0.83rem;
  color: var(--accent) !important;
}
.nav-menu-all:hover { background: none !important; }
.nav-menu-all svg { width: 14px; height: 14px; transition: transform 0.3s var(--ease); }
.nav-menu-all:hover svg { transform: translateX(3px); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: none;
  border: 1px solid var(--line-field);
  border-radius: var(--r);
  cursor: pointer;
  padding: 0;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--r);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }

.btn-primary {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  font-weight: 500;
}
.btn-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--text);
}

.btn-ghost {
  border-color: var(--line-field);
  color: var(--text);
  background: transparent;
}
.btn-ghost:hover {
  border-color: var(--text);
  background: var(--surface-2);
}
.btn:active { transform: none; box-shadow: none; }

/* ---------- hero ---------- */
/*
   Left: the claim. Right: the element tile the mark is drawn from, set at
   the size of a reference-sheet entry, with the company's properties listed
   under it the way an element's are. The two products sit beside it as the
   neighbouring elements in the row. */

.hero {
  position: relative;
  padding-block: 150px 88px;
  border-bottom: 1px solid var(--line);
  /* The sheet's ruling: a faint 24px grid, as on engineering paper. It is the
     only texture on the site and it stops at the hero. */
  background-image:
    linear-gradient(rgba(var(--ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--ink-rgb), 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: end;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-dim);
  margin-bottom: 30px;
}
.pulse {
  width: 8px; height: 8px;
  background: var(--signal);
  flex: none;
}

.hero-title {
  margin: 0 0 26px;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
/* The second line of the headline. It used to be a teal-to-violet gradient;
   now it is the same ink, in the serif's italic, underlined in the brand
   pigment like a marked term in a specification. */
.grad {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb), 0.35);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

.hero-sub {
  max-width: 600px;
  margin: 0 0 36px;
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  color: var(--text-dim);
  font-weight: 400;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- the element tile ---------- */

/* One row per product beside the tile: three products, three rows. With two
   rows the third tile wrapped under the big one. */
.element-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.element {
  grid-row: span 3;
  position: relative;
  aspect-ratio: 1;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--text);
  border-radius: var(--r);
  background: var(--surface-2);
  box-shadow: 8px 8px 0 rgba(var(--accent-rgb), 0.16);
}
.el-n, .el-q {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-mute);
  line-height: 1;
}
.el-q { position: absolute; top: 16px; right: 18px; color: var(--signal); }
.el-sym {
  margin: auto 0 0;
  font-family: var(--serif);
  font-size: clamp(5rem, 11vw, 8.2rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.el-sym i { font-style: normal; color: var(--accent); }
.el-name {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 600;
}
.el-mass {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
/* The neighbours: one small tile per product, linked. */
.el-small {
  display: flex;
  flex-direction: column;
  padding: 8px 9px;
  border: 1px solid var(--line-field);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--pc, var(--text));
  transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.el-small:hover { background: var(--surface-2); border-color: var(--pc, var(--text)); transform: translate(-2px, -2px); }
.el-small b {
  margin-top: auto;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
}
.el-small span {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.el-small small { font-family: var(--mono); font-size: 0.6rem; color: var(--text-mute); }

/* The properties under the tile. Rules between rows, no boxes around them. */
.hero-stats {
  margin: 0;
  border-top: 2px solid var(--text);
}
.hero-stats > div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.hero-stats dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.hero-stats dd {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text);
  font-weight: 500;
  text-wrap: balance;
}

/* ---------- registrations strip ---------- */
/*
   Was a scrolling marquee. A list of registrations is something a buyer reads
   for one item, and a moving one makes them wait for it to come round. Static,
   wrapped, separated by rules. */

.ticker {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  padding-block: 16px;
}
.ticker-track {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}
.ticker-run {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.ticker-run + .ticker-run { display: none; }
.ticker-run i { display: none; }
.ticker-run span + span::before {
  content: '';
  display: inline-block;
  width: 1px; height: 0.9em;
  margin-right: 18px;
  vertical-align: -0.1em;
  background: var(--line-field);
}

/* ---------- sections ---------- */

.section { padding-block: clamp(84px, 11vw, 140px); position: relative; z-index: 2; }
.section-alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--line);
}

.sec-head { max-width: 660px; margin-bottom: 56px; }
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
/* A small filled tile before every kicker: the element square, at the size of
   a bullet. It is what ties a section label back to the mark. */
.kicker::before {
  content: '';
  width: 9px; height: 9px;
  flex: none;
  background: currentColor;
}

.section h2 {
  margin: 0 0 18px;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.lede {
  margin: 0;
  color: var(--text-dim);
  font-size: 1.04rem;
  font-weight: 400;
  line-height: 1.72;
}

/* ---------- capability cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 20px;
}
/* four dense cards read better two-up than squeezed into a single row */
@media (min-width: 780px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* three products read as one row once there is room for three */
@media (min-width: 1040px) {
  .cards.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cards-3 .card { display: flex; flex-direction: column; }

.card {
  position: relative;
  padding: 30px 28px 26px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--text);
  border-radius: var(--r);
  background: var(--surface);
  overflow: hidden;
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card:hover {
  background: var(--surface-2);
  border-color: var(--text);
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 0 rgba(var(--accent-rgb), 0.18);
}

.card-num {
  position: absolute;
  top: 16px; right: 18px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-mute);
  letter-spacing: 0.04em;
}
.card-ico {
  width: 34px; height: 34px;
  margin-bottom: 22px;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card h3 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.card p {
  margin: 0 0 22px;
  color: var(--text-dim);
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.7;
}

/* The hand-off at the foot of a home capability card. These cards used to end
   in a four-item tag list that repeated what /services says at length, on a
   page a visitor reads first — so the detail moved there and the card now
   points at it instead of restating it. */
/* Scoped to the home capability cards — `.feature` was already on them and
   styled nothing — so `margin-top:auto` below pins the hand-off to the foot of
   a stretched grid cell without making every .card on the site flex.

   The whole card is the link: it goes one place, and a small target inside a
   large clickable-looking box is the commonest way a card row frustrates a
   pointer. The colours are reset because an <a> would otherwise inherit link
   blue and an underline. */
.card.feature {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.card-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  width: 100%;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.3s;
}
.card-more svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s var(--ease);
}
/* Driven from the card, not from itself — the whole card is the anchor now, so
   a :hover on the span would only fire on the last two words of it. */
.card.feature:hover .card-more { color: var(--accent); }
.card.feature:hover .card-more svg { transform: translateX(3px); }

/* Six cards rather than four, so three across beats the two-then-two that
   minmax(290px) produces at this width. */
@media (min-width: 900px) {
  .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
}
.tags li {
  position: relative;
  padding-left: 18px;
  font-size: 0.845rem;
  color: var(--text-mute);
}
.tags li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  background: var(--accent);
}

.sub-caps { margin-top: 50px; }
.sub-caps-title {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-mute);
  font-weight: 400;
}
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips span {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 0.83rem;
  color: var(--text-dim);
  background: var(--surface);
  transition: border-color 0.2s, color 0.2s;
}
.chips span:hover {
  border-color: var(--text);
  color: var(--text);
}

/* ---------- split / assurance ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 60px;
  align-items: start;
}
.split-copy { position: sticky; top: 118px; }
.split-copy .btn { margin-top: 28px; }

.assure {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.assure li {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color 0.2s, background 0.2s;
}
.assure li:hover {
  border-color: var(--text);
  border-left-color: var(--accent);
  background: var(--surface-2);
}
.assure h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.assure p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.66;
}

/* ---------- company data ---------- */

.cert {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 20px;
  padding: 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
/* The state's logo is a JPEG on white and is not to be recoloured, so it sits
   on a white plate, ruled so the plate reads as deliberate on the paper. */
.cert-logo {
  flex: 0 0 auto;
  display: block;
  width: 260px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.cert-logo img { display: block; width: 100%; height: auto; }
.cert-body h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cert-body p {
  margin: 0 0 14px;
  color: var(--text-dim);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.65;
  max-width: 560px;
}
.cert-link { color: var(--accent); font-size: 0.9rem; font-weight: 500; }
.cert-link { text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), 0.35); text-underline-offset: 3px; }
.cert-link:hover { text-decoration-color: currentColor; }
@media (max-width: 720px) {
  .cert { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cert-logo { width: min(100%, 300px); }
}

.datagrid {
  display: grid;
  /* Fixed at 3, not auto-fit: the facts in FACTS were written to fill whole
  rows of three. When the count is not a multiple of three the last cell
  takes the row (see `.datum:last-child` below). */
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 2px solid var(--text);
  border-radius: var(--r);
  overflow: hidden;
}
.datum {
  background: var(--surface);
  padding: 20px 22px;
}
.datum:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.datum dt {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.datum dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
}
/* Read by a screen reader, shown to nobody. `display:none` would hide it from
   both, which for a table caption means the table loses its accessible name. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mono { font-family: var(--mono); font-size: 0.88rem !important; letter-spacing: 0.02em; }

/* ---------- third-party credential mark ---------- */

/* eVA is navy and green on white, and its white ground is part of the mark.
   It keeps that ground on a ruled plate rather than being dropped onto the
   paper tone, which would be a modification of somebody else's trademark. */
.cred {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 28px 0 0;
}
.cred-badge {
  flex: none;
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 18px;
  /* The image is the only content, so the line box under it would otherwise
  show as a few pixels of white below the logo. */
  line-height: 0;
}
.cred-badge img {
  width: 112px;
  height: auto;
}
.cred-text {
  margin: 0;
  max-width: 440px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-dim);
}

.note {
  margin: 24px 0 0;
  font-size: 0.85rem;
  color: var(--text-mute);
  max-width: 620px;
  font-weight: 400;
}

/* ---------- contact ---------- */

.contact-card {
  position: relative;
  padding: clamp(40px, 6vw, 72px);
  border-radius: var(--r);
  overflow: hidden;
  text-align: center;
}
.contact-card .sec-head { margin-inline: auto; }
.contact-card .kicker { justify-content: center; }
.contact-card h2 { max-width: 680px; margin-inline: auto; }
.contact-card .lede { max-width: 560px; margin-inline: auto; }

.contact-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}
.contact-meta {
  display: flex;
  gap: 26px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

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

.footer {
  padding-block: 56px 40px;
  position: relative;
  z-index: 2;
}
/* The footer used to be one row: brand, links, copyright, centred against each
   other. The links are four columns now, so the row became a stack: brand on
   top, the map under it, the legal line last. `align-items: center` on a
   four-column block centred it against a one-line brand and left it floating. */
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 30px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.footer-links {
  display: flex;
  gap: 24px;
  font-size: 0.865rem;
  color: var(--text-dim);
  flex-wrap: wrap;
}
.footer-links a { transition: color 0.25s; }
.footer-links a:hover { color: var(--accent); }
.footer-legal {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-mute);
}

/* The copyright and the policy links share a row on a wide screen and stack on
   a narrow one. `column-gap` differs from `row-gap` on purpose: stacked, the
   two are separate things and want air; side by side they are one line. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 28px;
  row-gap: 10px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.footer-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.8rem;
}
.footer-policies a { color: var(--text-mute); transition: color 0.25s; }
.footer-policies a:hover { color: var(--accent); }

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: calc(var(--d, 0) * 90ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

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

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { max-width: 420px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-copy { position: static; }
}

@media (max-width: 760px) {
  .nav-links {
    position: fixed;
    inset: 0 0 auto 0;
    top: 0;
    flex-direction: column;
    gap: 4px;
    padding: 84px 24px 30px;
    background: var(--bg);
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.05rem;
    transform: translateY(-101%);
    transition: transform 0.45s var(--ease);
    z-index: -1;
    /* The panel is `position: fixed`, so anything past the bottom of the
       viewport is unreachable rather than merely below the fold — you cannot
       scroll a fixed box that overflows. It fit while one dropdown expanded to
       four items; a second one made the last four top-level links
       unreachable on a phone. `dvh` because mobile browser chrome moves.
       `contain` stops the page behind it scrolling once this hits its end. */
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-links a { padding-block: 12px; }
  .nav-links a::after { display: none; }

  /* no hover on a phone — the submenu is simply always open, indented */
  .nav-drop { display: block; }
  .nav-drop .caret { display: none; }
  .nav-menu {
    position: static;
    padding-top: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .nav-menu-card {
    width: auto;
    padding: 0 0 6px 16px;
    border: 0;
    border-left: 1px solid var(--line-soft);
    border-radius: 0;
    margin-left: 2px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .nav-menu-card a { padding: 9px 0; column-gap: 10px; }
  .nav-menu-card a:hover,
  .nav-menu-card a[aria-current="page"] { background: none; }
  .nav-menu-card em { display: none; }
  .nav-menu-card strong { font-size: 0.95rem; font-weight: 400; color: var(--text-dim); }
  .nav-menu-card a[aria-current="page"] strong { color: var(--text); }
  .nav-menu-all { margin-top: 4px; padding-top: 12px !important; }
  .nav.open .nav-links { transform: none; }
  .nav-toggle { display: flex; }

  .eyebrow { font-size: 0.68rem; }
  .hero-title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .datagrid { grid-template-columns: 1fr; }
  .contact-meta { gap: 14px; flex-direction: column; }
  .footer-inner { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- skip link ---------- */
/*
   Hidden by CLIPPING it to a 1px box, not by offsetting it off-screen.

   The offset version was `top: -60px`, which assumes the link is shorter than
   60px — and it was not. Absolutely positioned with no width it shrink-wrapped
   to 90px, "Skip to main content" wrapped onto three lines, and 97px of pill
   hung 37px into the top-left corner of every page on the site. A rule whose
   correctness depends on guessing how tall its own text renders is a rule that
   was going to be wrong on some viewport, in some font, in some language.

   Clipped, the footprint is 1px regardless of what the text does. It stays in
   the tab order — `display:none` and `visibility:hidden` would remove it and
   make this the accessibility feature that is not one — and `white-space:
   nowrap` keeps it on one line once focus restores it. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 200;
  border-radius: var(--r);
  background: var(--text);
  color: var(--bg);
  font-size: 0.92rem;
  font-weight: 600;
}
.skip-link:focus {
  top: 16px;
  left: 16px;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  padding: 12px 18px;
}
/* <main> takes focus programmatically when the skip link is followed, so the
   next Tab continues from the content. It is never a click target, so it must
   never paint a ring. */
main:focus { outline: none; }

/* ---------- footer columns ---------- */
/*
   The footer was a flat row of the same seven links as the header. Grouped, it
   does the job a footer is for: the whole map, so somebody at the bottom of a
   long page does not scroll back up to find out what else exists. */
.footer-links {
  display: grid;
  /* Two up on a phone, four on a desktop. `auto-fit` was leaving empty tracks
     at the end and bunching the four groups to the left of the container. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
  width: 100%;
}
@media (min-width: 760px) {
  .footer-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h2 {
  margin: 0 0 3px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.footer-col a { font-size: 0.86rem; color: var(--text-dim); transition: color 0.2s; }
.footer-col a:hover { color: var(--accent); }

/* ─────────────────────────  forms  ─────────────────────────
   The contact and application forms. See app/forms.py for what is being
   defended against and why there is no captcha. */

.wrap-narrow { max-width: 720px; }

.site-form { margin-top: 32px; }

.site-form .field { margin-bottom: 22px; }

.site-form label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--text-dim);
}

.site-form .optional { color: var(--text-mute); font-weight: 400; }

.site-form input[type="text"],
.site-form input[type="email"],
.site-form textarea {
  width: 100%;
  padding: 13px 15px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-field);
  border-radius: var(--r);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.site-form textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

.site-form input:focus,
.site-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: var(--surface-2);
  /* The global :focus rule draws an outline; inside a field the border already
     carries the state, and both together read as an error. */
  outline: none;
}

.site-form input[type="file"] {
  width: 100%;
  padding: 12px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px dashed var(--line-field);
  border-radius: var(--r);
  font: inherit;
  font-size: 0.9rem;
}

.site-form .form-fineprint {
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--text-mute);
}

.form-error {
  margin-bottom: 22px;
  padding: 13px 16px;
  border: 1px solid rgba(178, 58, 30, 0.45);
  border-left: 3px solid var(--signal);
  border-radius: var(--r);
  background: rgba(178, 58, 30, 0.06);
  color: #7d2410;
  font-size: 0.92rem;
}

/* THE HONEYPOT. Everything here is load-bearing.

   Not `display: none` and not `hidden`: some bots skip fields a browser would
   not render, which is exactly the ones worth catching. This is off-screen and
   inert instead — present in the DOM, submitted with the form, invisible and
   unreachable to a person.

   `aria-hidden` on the wrapper and `tabindex="-1"` on the input keep it away
   from screen readers and the tab order, so the trap never catches a human
   using either. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- the reference pages ---------- */
/*
   Privacy, terms, cookies, security, accessibility — see app/legal.py. Long
   prose read for a specific clause, so the rules here are all about the line:
   a measure that does not run past the eye, and space between sections big
   enough to find a heading by scrolling.
*/

.legal-updated {
  /* The lede below sets margin-top: 0, so the gap under the date has to come
     from here or the two run together as one block. */
  margin: 14px 0 22px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim);
}

.legal-body {
  max-width: 42em;          /* ~72 characters: the measure, not the container */
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-dim);
}
.legal-body h2 {
  margin: 48px 0 14px;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text);
  scroll-margin-top: 96px;  /* the fixed header, so a #fragment lands clear of it */
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 16px; }
.legal-body ul {
  margin: 0 0 16px;
  padding-left: 1.15em;
}
.legal-body li { margin-bottom: 10px; }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--bg-alt);
  color: var(--text);
}