/* SQXray — designed stylesheet (design.md). Markup contract: spinup_site_build.py.
   Visual language from logo.svg: monoline strokes, round caps, true circles,
   ~57 degree diagonals, and one teal beam that crosses things. */

:root {
  --film: #0B222C;
  --beam: #00A3AD;
  --deep: #006B72;
  --lumen: #5FE0E6;
  --ink: #12212A;
  --plate: #E8EDEE;

  --film-deep: #071820;
  --panel: #F2F6F6;
  --plate-hi: #FFFFFF;
  --rule: rgba(18, 33, 42, 0.16);
  --rule-soft: rgba(18, 33, 42, 0.09);
  --rule-film: rgba(95, 224, 230, 0.18);
  --on-film-dim: rgba(232, 237, 238, 0.76);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "IBM Plex Mono", Menlo, Consolas, monospace;

  /* Centred 940px column inside full-bleed bands. */
  --gutter: max(22px, calc(50% - 470px));
  /* The X's angle, as atmosphere on dark grounds. */
  --hatch: repeating-linear-gradient(57deg,
    rgba(95, 224, 230, 0.045) 0 1px, transparent 1px 13px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  background: var(--plate);
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.66;
  font-feature-settings: "kern" 1;
}

::selection { background: var(--beam); color: var(--film); }

a { color: var(--deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--film); }

img { max-width: 100%; }

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

/* --------------------------------------------------------------------------
   Prose defaults. :where() keeps these at zero specificity so every classed
   primitive below wins without !important.
   -------------------------------------------------------------------------- */

/* Reading order on the home page: hero, then the product thesis, and the
   client quote sits with the closing CTA rather than owning the whole screen
   below the hero. The builder emits the quote strip directly after the hero,
   so the running order is set here on body's flex column. */
.site-header { order: 0; }
.hero { order: 1; }
main { order: 2; }
.quote-strip { order: 3; }
.cta-band { order: 4; }
.site-footer { order: 5; }

main { flex: 1 0 auto; width: 100%; max-width: 940px; margin: 0 auto; padding: 46px 22px 8px; }

/* Lede: the first paragraph of a page carries the thesis, so it is set larger. */
main > p:first-child, main > h1 + p {
  font-size: clamp(1.06rem, 1.5vw, 1.16rem);
  line-height: 1.55;
  color: var(--film);
  max-width: 62ch;
  margin-bottom: 22px;
}

main :where(h1) {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.85rem, 4.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--film);
  max-width: 26ch;
  margin: 0 0 22px;
}
main :where(h2) {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.24rem, 2.2vw, 1.5rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--film);
  max-width: 32ch;
  margin: 46px 0 14px;
}
main :where(h3) {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 1.14rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--film);
  margin: 34px 0 10px;
}
/* Sub-heads take the beam inline, so they read above a bold run-in lead. */
main :where(h3)::before {
  content: "";
  display: inline-block;
  vertical-align: 0.22em;
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: var(--beam);
  margin-right: 10px;
}
main :where(h4) {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 24px 0 8px;
}

/* The beam: a round-capped stub entering every heading from the left. */
main :where(h1, h2)::before {
  content: "";
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--beam);
  margin-bottom: 16px;
}
main :where(h1)::before { width: 54px; }
main :where(h2)::before { width: 30px; height: 4px; margin-bottom: 12px; }

main :where(p) { margin: 0 0 16px; max-width: 68ch; }
main :where(ul, ol) { margin: 0 0 18px 20px; max-width: 68ch; }
main :where(li) { margin-bottom: 8px; }
main :where(strong) { font-weight: 600; color: var(--film); }
main :where(em) { font-style: italic; }
main :where(code) {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--deep);
  background: var(--panel);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 0 4px;
}

/* Rule as a beam, not a hairline. */
main :where(hr) {
  border: 0;
  height: 4px;
  width: 76px;
  border-radius: 2px;
  background: var(--beam);
  margin: 42px 0;
}

/* --------------------------------------------------------------------------
   Header + nav
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--film-deep);
  border-bottom: 1px solid rgba(95, 224, 230, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px var(--gutter);
  flex-wrap: wrap;
}
/* logo.svg letterforms are fill: currentColor — color must contrast the
   dark header ground. */
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--plate);
}
.site-logo svg { height: 27px; width: auto; display: block; }
.site-logo:hover { color: #fff; }
.site-logo-name {
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.site-nav a {
  position: relative;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.77rem;
  letter-spacing: 0.01em;
  color: var(--on-film-dim);
  text-decoration: none;
  padding: 9px 9px 10px;
  border-radius: 5px;
  white-space: nowrap;
}
.site-nav a:hover { color: #fff; }
/* Current page marked by the beam, round caps and all. */
.site-nav a[aria-current="page"] { color: #fff; }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 3px;
  height: 3px;
  border-radius: 2px;
  background: var(--beam);
}
.site-nav .nav-cta {
  background: var(--beam);
  color: var(--film);
  margin-left: 8px;
  padding: 9px 15px 10px;
}
.site-nav .nav-cta:hover { background: var(--lumen); color: var(--film); }
.site-nav .nav-cta::after { content: none; }

/* --------------------------------------------------------------------------
   Hero — the film plate, and the signature beam through the action row
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--film);
  background-image: var(--hatch);
  color: var(--plate);
  padding: 68px var(--gutter) 56px;
  overflow: hidden;
}
.hero h1 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(2.05rem, 5vw, 3.15rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: #fff;
  max-width: 21ch;
  margin: 0 0 20px;
  text-wrap: balance;
}
.hero p {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.55;
  color: var(--on-film-dim);
  max-width: 56ch;
  margin: 0;
}
/* The beam: enters the primary button (same teal stroke), is interrupted by
   the buttons beside it, and runs out to a round cap at the column edge. */
.hero::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 80px;
  height: 5px;
  border-radius: 3px;
  background: var(--beam);
}
.hero .contact-actions { position: relative; z-index: 1; margin-top: 34px; }

/* --------------------------------------------------------------------------
   Action buttons (hero + contact page)
   -------------------------------------------------------------------------- */

.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.action-btn {
  font-family: var(--display);
  font-stretch: 112%;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 12px 18px;
  color: var(--film);
  background: var(--plate-hi);
  white-space: nowrap;
}
.action-btn:hover { border-color: var(--deep); color: var(--deep); }
.action-primary {
  background: var(--beam);
  border-color: var(--beam);
  color: var(--film);
}
.action-primary:hover { background: var(--lumen); border-color: var(--lumen); color: var(--film); }
/* On the film ground the secondary buttons mask the beam. */
.hero .action-btn { background: var(--film); border-color: rgba(232, 237, 238, 0.34); color: var(--plate); }
.hero .action-btn:hover { border-color: var(--lumen); color: var(--lumen); }
.hero .action-primary { background: var(--beam); border-color: var(--beam); color: var(--film); }
.hero .action-primary:hover { background: var(--lumen); border-color: var(--lumen); color: var(--film); }

/* --------------------------------------------------------------------------
   Layout primitives (copy.md ':::' blocks)
   -------------------------------------------------------------------------- */

/* Callout: the beam entering from the left edge, round caps, drawn not filled. */
.site-callout {
  position: relative;
  background: var(--plate-hi);
  border: 1px solid var(--rule-soft);
  border-radius: 12px;
  padding: 22px 24px 22px 34px;
  margin: 34px 0;
}
.site-callout::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 22px;
  bottom: 22px;
  width: 5px;
  border-radius: 3px;
  background: var(--beam);
}
.site-callout p { max-width: 68ch; }
.site-callout p:last-child { margin-bottom: 0; }

/* Pull-quote: a film plate mid-page — the same surface as the hero. */
.site-pullquote {
  background: var(--film);
  background-image: var(--hatch);
  color: #fff;
  border-radius: 14px;
  padding: 30px 32px;
  margin: 40px 0;
  max-width: 100%;
}
.site-pullquote::before {
  content: "";
  display: block;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: var(--beam);
  margin-bottom: 18px;
}
.site-pullquote p {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(1.16rem, 2.1vw, 1.5rem);
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: #fff;
  max-width: 44ch;
  margin: 0;
}
.site-pullquote strong { color: #fff; }
.site-pullquote a { color: var(--lumen); }

/* Stats: each figure sits under its own beam. */
.stat-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 34px 0;
  padding: 0;
  max-width: none;
}
.stat-strip li { margin: 0; }
.stat-strip li::before {
  content: "";
  display: block;
  width: 34px;
  height: 4px;
  border-radius: 2px;
  background: var(--beam);
  margin-bottom: 12px;
}
.stat-strip strong {
  display: block;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.32rem, 2.1vw, 1.68rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--film);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}
.stat-strip span { display: block; font-size: 0.88rem; line-height: 1.45; color: rgba(18, 33, 42, 0.8); }

/* Split sections */
.section-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
  margin: 40px 0;
}
.section-split .site-figure { margin: 0; }
.section-split.flip .site-figure { order: 2; }
.split-copy > :first-child { margin-top: 0; }
.split-copy h2, .split-copy h3 { margin-top: 0; }
.split-copy p:last-child { margin-bottom: 0; }
.split-copy p { max-width: 60ch; }

/* Steps: monoline rings, the mark's true circles at 30px. */
.step-flow ol { list-style: none; margin: 34px 0; padding: 0; counter-reset: step; max-width: 76ch; }
.step-flow li {
  counter-increment: step;
  position: relative;
  padding-left: 48px;
  margin-bottom: 20px;
}
.step-flow li:last-child { margin-bottom: 0; }
.step-flow li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--beam);
  background: transparent;
  color: var(--deep);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  display: grid;
  place-items: center;
}
/* The flow itself: the beam running ring to ring, so the numbered list reads
   as the nightly pipeline rather than as an ordered list of paragraphs. */
.step-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 35px;
  bottom: -18px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(to bottom, var(--beam), rgba(0, 163, 173, 0.22));
}
.step-flow li strong { display: block; margin-bottom: 2px; }

/* Feature cards */
.card-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 26px 0 30px;
  padding: 0;
  max-width: none;
}
/* Even rows: divide the cards instead of letting auto-fit orphan them. */
.card-grid.cards-2, .card-grid.cards-4 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cards-3, .card-grid.cards-6 { grid-template-columns: repeat(3, 1fr); }
.card-grid li {
  margin: 0;
  background: var(--plate-hi);
  border: 1px solid var(--rule-soft);
  border-top: 3px solid var(--beam);
  border-radius: 3px 3px 12px 12px;
  padding: 20px;
  font-size: 0.97rem;
}
/* The two answers, side by side: the one place a card pair IS the comparison,
   so the pair is set as two films on the light plate — the question in white,
   the file that answers it in read-on-film grey. Built from type, not baked
   into a raster: it scales, it selects, it reads to a screen reader. */
.card-grid.cards-2 li {
  background: var(--film);
  background-image: var(--hatch);
  border-color: var(--rule-film);
  border-radius: 3px 3px 12px 12px;
  padding: 22px 24px;
  color: var(--on-film-dim);
}
.card-grid.cards-2 li strong { color: #fff; font-size: 1.06rem; margin-bottom: 9px; }

.card-grid li strong {
  display: block;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--film);
  margin-bottom: 7px;
}

/* Figures: every image is a film in a mat, and the mat is film — the images
   are dark radiographs, so a white card would read as a stock photo frame.
   --rule-film is the dark-ground counterpart of --rule-soft (the same hairline
   weight and intent, at a lumen tint that is actually visible on film). */
.site-figure {
  margin: 36px 0;
  background: var(--film);
  border: 1px solid var(--rule-film);
  border-radius: 12px;
  padding: 8px;
}
/* Every generated asset is 3:2. Declaring it reserves the box before the
   bytes land, so a lazy figure can never collapse to a zero-height pill and
   nothing below it shifts. */
.site-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 7px;
  background: var(--film-deep);
}

/* --------------------------------------------------------------------------
   Quote strip (home)
   -------------------------------------------------------------------------- */

.quote-strip { max-width: 940px; margin: 52px auto 0; padding: 0 22px; }
.quote-strip h2 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deep);
  margin: 0 0 18px;
}
.quote { position: relative; margin: 22px 0; padding-left: 22px; }
.quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 2px;
  background: var(--beam);
}
.quote blockquote {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--film);
  max-width: 66ch;
}
.quote-attr {
  margin-top: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(18, 33, 42, 0.66);
}

/* --------------------------------------------------------------------------
   Data dictionary — dense and scannable; the field list is the product
   -------------------------------------------------------------------------- */

.dict-intro { max-width: 72ch; font-size: 1.05rem; }
.dict-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 8px;
}
.dict-toc a {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--deep);
  background: var(--plate-hi);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 7px 13px;
}
.dict-toc a:hover { border-color: var(--deep); background: #fff; }

.dict-section { margin: 44px 0; }
/* File names are long single tokens; they wrap rather than push the page. */
.dict-section h2 { margin-top: 0; overflow-wrap: anywhere; }
.dict-toc a { overflow-wrap: anywhere; }
.dict-note { font-size: 0.92rem; color: rgba(18, 33, 42, 0.78); max-width: 72ch; margin-bottom: 16px; }

.dict-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  line-height: 1.5;
  display: block;
  overflow-x: auto;
  border-top: 3px solid var(--beam);
}
.dict-table thead th {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--deep);
  padding: 10px 16px 8px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.dict-table th, .dict-table td { text-align: left; vertical-align: top; }
.dict-table tbody th, .dict-table tbody td {
  padding: 9px 16px 9px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.dict-table tbody tr:hover th, .dict-table tbody tr:hover td { background: var(--panel); }
.dict-table tbody th { font-weight: 400; white-space: nowrap; }
.dict-table tbody th code {
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--film);
  background: none;
  border: 0;
  padding: 0;
  font-weight: 500;
}
.dict-table td:nth-child(2) {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: rgba(18, 33, 42, 0.7);
  white-space: nowrap;
}
.dict-table td:nth-child(3) { min-width: 32ch; }
.dict-table code { font-family: var(--mono); }

/* --------------------------------------------------------------------------
   Charts / sparklines — data marks only. No axes, gridlines or legend.
   (.chart-* is what the builder emits; .series-*/.sparkline are the same
   contract under its documented aliases.)
   -------------------------------------------------------------------------- */

.chart-panel, .series-panel { margin: 34px 0; max-width: 660px; }
.chart-caption, .series-caption {
  font-size: 0.92rem;
  color: rgba(18, 33, 42, 0.78);
  margin: 0 0 14px;
  max-width: 66ch;
}
.chart-row, .series-row {
  display: grid;
  grid-template-columns: minmax(9ch, 20ch) 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.chart-label, .series-label {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--film);
}
.chart-mark, .sparkline { width: 100%; height: 28px; overflow: visible; display: block; }
.chart-mark polyline, .sparkline polyline {
  fill: none;
  stroke: var(--film);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-mark .chart-bar, .sparkline .chart-bar { fill: rgba(11, 34, 44, 0.72); }
.chart-mark .chart-last, .sparkline .chart-last, .sparkline .series-last { fill: var(--beam); stroke: none; }
.chart-value, .series-value {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--film);
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.team-grid {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
  max-width: none;
}
.team-card {
  margin: 0;
  background: var(--plate-hi);
  border: 1px solid var(--rule-soft);
  border-top: 3px solid var(--beam);
  border-radius: 3px 3px 12px 12px;
  padding: 22px;
}
.team-card h2 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
  color: var(--film);
  margin: 0 0 4px;
  max-width: none;
}
.team-card h2::before { content: none; }
.team-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--deep);
  margin: 0 0 12px;
}
.team-card p { font-size: 0.95rem; max-width: none; }
.team-link {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--deep);
}

/* --------------------------------------------------------------------------
   CTA band + footer — the dark bookend
   -------------------------------------------------------------------------- */

.cta-band {
  background: var(--film);
  background-image: var(--hatch);
  color: var(--plate);
  margin-top: 64px;
}
.cta-band .cta-inner {
  max-width: 984px;
  margin: 0 auto;
  padding: 40px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band p {
  margin: 0;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(1.04rem, 1.8vw, 1.24rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 46ch;
}
.cta-band .cta-btn {
  display: inline-block;
  background: var(--beam);
  color: var(--film);
  text-decoration: none;
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 14px 26px;
  border-radius: 7px;
  white-space: nowrap;
}
.cta-band .cta-btn:hover { background: var(--lumen); }

.site-footer { background: var(--film-deep); color: var(--plate); }
.site-footer .footer-inner {
  max-width: 984px;
  margin: 0 auto;
  padding: 30px 22px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}
.site-footer a { color: var(--lumen); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .footer-brand {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.site-footer .footer-meta { color: rgba(232, 237, 238, 0.6); font-size: 0.82rem; }

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 660px;
  margin-top: 30px;
  background: var(--plate-hi);
  border: 1px solid var(--rule-soft);
  border-radius: 14px;
  padding: 26px;
}
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--deep);
}
.contact-form input, .contact-form textarea {
  font-family: var(--body);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  background: var(--plate-hi);
  border: 1px solid var(--rule);
  border-radius: 7px;
  padding: 11px 13px;
}
.contact-form textarea { resize: vertical; }
.contact-form input:hover, .contact-form textarea:hover { border-color: var(--deep); }
.contact-form input:focus-visible, .contact-form textarea:focus-visible {
  outline: 3px solid var(--beam);
  outline-offset: 1px;
  border-color: var(--beam);
}
.contact-form button {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--beam);
  color: var(--film);
  border: 0;
  border-radius: 7px;
  padding: 14px 28px;
  cursor: pointer;
  align-self: flex-start;
}
.contact-form button:hover { background: var(--lumen); }
.contact-form button:disabled { opacity: 0.65; cursor: wait; }

.form-note { font-size: 0.82rem; color: rgba(18, 33, 42, 0.7); max-width: 56ch; }
.form-success {
  background: var(--film);
  background-image: var(--hatch);
  color: #fff;
  border-radius: 14px;
  padding: 26px 28px;
  max-width: 660px;
}
.form-success h2 {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 700;
  color: #fff;
  font-size: 1.3rem;
  margin: 0 0 10px;
}
.form-success h2::before { content: none; }
.form-success p { color: var(--on-film-dim); margin: 0; }
.form-error { color: #B3261E; font-weight: 500; }
.form-error a { color: #B3261E; }

/* --------------------------------------------------------------------------
   Motion — one 120ms change, and nothing at all when reduced motion is asked for
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .site-nav a, .action-btn, .cta-band .cta-btn, .contact-form button,
  .dict-toc a, .site-logo, a {
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
  }
}

/* --------------------------------------------------------------------------
   Narrow viewports
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

@media (max-width: 760px) {
  /* Eight destinations do not fit one narrow row, and three wrapped rows eat
     the fold. Two rows instead: the logo row carries the Contact pill, parked
     at the same coordinates on every page, and the seven destinations sit in
     one horizontally scrolling strip below it at full size with 44px tap
     targets. The pill is positioned against the header, not the strip, so it
     never scrolls over a link. */
  .site-header {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 13px 20px 11px;
  }
  .site-nav {
    width: 100%;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0 -11px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .site-nav::-webkit-scrollbar { height: 0; }
  .site-nav a {
    flex: 0 0 auto;
    font-size: 0.85rem;
    line-height: 20px;
    padding: 12px 11px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .site-nav a[aria-current="page"]::after { left: 11px; right: 11px; bottom: 5px; }
  .site-nav .nav-cta {
    position: absolute;
    top: 11px;
    right: 20px;
    margin: 0;
    padding: 12px 17px;
  }

  .hero { padding: 62px 20px 44px; }
  .hero h1 { max-width: none; }
  .hero p { max-width: none; }
  /* Buttons stack, so the beam becomes the stub above the headline. */
  .hero::after { top: 30px; bottom: auto; left: 20px; right: auto; width: 52px; }
  .hero .contact-actions { margin-top: 28px; }
  .hero .action-btn { width: 100%; text-align: center; }

  main { padding: 34px 20px 4px; }
  .quote-strip { padding: 0 20px; margin-top: 42px; }

  .section-split { grid-template-columns: 1fr; gap: 24px; }
  .section-split.flip .site-figure { order: 0; }
  .card-grid, .card-grid.cards-2, .card-grid.cards-3,
  .card-grid.cards-4, .card-grid.cards-6 { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }

  .site-pullquote { padding: 26px 22px; border-radius: 12px; }
  .site-callout { padding: 20px 20px 20px 30px; }
  .site-callout::before { left: 14px; }

  .contact-form { padding: 20px; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .contact-form button { align-self: stretch; text-align: center; }

  .cta-band .cta-inner, .site-footer .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 20px;
  }
  .cta-band .cta-btn { align-self: stretch; text-align: center; }

  .chart-row, .series-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .chart-row .chart-mark, .series-row .sparkline { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  .stat-strip { grid-template-columns: 1fr; gap: 18px; }
  .site-figure { padding: 5px; border-radius: 9px; }
  .dict-toc a { font-size: 0.76rem; padding: 6px 10px; }
  .step-flow li { padding-left: 42px; }
}