/* ────────────────────────────────────────────────────────────────
   culloma.com v2 — shared stylesheet
   Brand tokens pulled from the 2026-04 mockup (~/projects/culloma/index.html):
   navy + orange, system sans stack, quiet card grammar.
   Structure follows the Enghouse layout model (hero → proof strip →
   product blocks → CTA rhythm). No copy lives in this file.
   ──────────────────────────────────────────────────────────────── */

:root {
  --navy: #1a1f6e;
  --navy-deep: #12174f;
  --navy-soft: rgba(26, 31, 110, 0.08);
  --orange: #ed7d17;
  --orange-deep: #c9650a;
  --orange-soft: rgba(237, 125, 23, 0.14);

  --bg: #ffffff;
  --bg-alt: #f7f6f2;
  --bg-card: #ffffff;
  --line: #e7e5df;
  --line-strong: #d4d2cb;

  --text: #12174f;
  --text-body: #3a3d52;
  --text-dim: #6e7182;
  --text-faint: #9a9ba6;

  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.container { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

/* The .copy placeholder-marker block was removed 2026-08-03: all copy has landed,
   zero ⟦COPY⟧ tokens remain across site/, and the class had no users left. */

/* ── NAV ── */
nav.site-nav {
  position: sticky; top: 0;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--line);
  z-index: 10;
}
nav.site-nav .container {
  display: flex; justify-content: space-between; align-items: center;
  height: 88px;
}
.logo img { height: 52px; display: block; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 14px; font-weight: 600;
  color: var(--navy); text-decoration: none;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--orange); }
.nav-links a.cta {
  padding: 10px 22px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  transition: border-color 0.2s, color 0.2s;
}
.nav-links a.cta:hover { border-color: var(--orange); color: var(--orange); }

/* ── HERO ──
   Banded tops site-wide (2026-08-03, Dan's read: "whitespace text at the top is the
   wrong track"): every page opens on a navy dot-grid band, headline in the band. */
.hero {
  padding: 96px 0 84px;
  text-align: center;
  background-color: var(--navy);
  /* layered underlay: dot grid over an orange corner glow over a vertical depth gradient */
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px),
    radial-gradient(circle at 78% 12%, rgba(237,125,23,0.20), transparent 46%),
    linear-gradient(180deg, #262c7c 0%, #1a1f6e 58%, #141a5f 100%);
  background-size: 20px 20px, auto, auto;
}
.hero h1 { color: #fff; }
.hero .btn.secondary { border-color: rgba(255,255,255,0.45); color: #fff; }
.hero .btn.secondary:hover { border-color: var(--orange); color: var(--orange); }
.hero.sub { padding: 72px 0 52px; position: relative; overflow: hidden; }  /* interior pages */
/* interior bands: the logo's 3x3 dot grid as a quiet constellation, right flank */
.hero.sub::after {
  content: '';
  position: absolute;
  right: 4%; top: 50%;
  transform: translateY(-50%) rotate(8deg);
  width: 230px; height: 230px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g fill='rgba(255,255,255,0.13)'><circle cx='20' cy='20' r='9'/><circle cx='60' cy='20' r='9'/><circle cx='100' cy='20' r='9'/><circle cx='20' cy='60' r='9'/><circle cx='60' cy='60' r='9'/><circle cx='100' cy='60' r='9'/><circle cx='20' cy='100' r='9'/><circle cx='60' cy='100' r='9'/></g><circle cx='100' cy='100' r='9' fill='rgba(237,125,23,0.75)'/></svg>") no-repeat center / contain;
  pointer-events: none;
}
.hero.sub .container { position: relative; z-index: 1; }
@media (max-width: 1000px) { .hero.sub::after { display: none; } }

/* index hero: copy left, stream art right */
.hero-split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
  text-align: left;
}
.hero-split h1 { margin-left: 0; margin-right: 0; font-size: clamp(38px, 4.4vw, 60px); }
.hero-split .lede { margin-left: 0; margin-right: 0; }
.hero-split .hero-ctas { justify-content: flex-start; }
.hero-art svg { width: 100%; height: auto; display: block; }
.hero-qualifier {
  margin-top: 48px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.02em;
}
/* contact: qualifier sits above the button - give the pair air (Dan 2026-08-11) */
.hero-qualifier + .hero-ctas { margin-top: 26px; }
@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; gap: 0; text-align: center; }
  /* the copy's children become grid items so the diagram can sit between the lede and
     the button (Dan 2026-08-12); spacing then comes from each element's own margin */
  .hero-copy { display: contents; }
  .hero-split h1 { order: 1; }
  .hero-split .lede { order: 2; }
  .hero-split .hero-ctas { order: 4; justify-content: center; }
  .hero-qualifier { order: 5; }
  /* the 520x360 diagram is the only picture of the product; at container width its
     labels fall under 9px, so it runs edge to edge and cancels the container padding */
  .hero-art { order: 3; margin: 0 -32px 32px; }
  /* About/Contact: the side fact-card carried no order, so at order 0 it jumped above
     the headline when the hero collapsed (found 2026-08-14 full-site review). It reads
     LAST on phones - company details are reference, not the pitch. */
  .hero-split > .fact-card { order: 6; margin-top: 32px; }
  .hero-split .kicker { order: 0; }
}
/* adrush: headline runs straight into the stream diagram; tight exit into how-it-works */
#diagram { padding-top: 12px; padding-bottom: 40px; }
#diagram .diagram { margin-top: 0; }
.hero.big h1 { font-size: clamp(46px, 6vw, 82px); }
.hero.big .kicker { font-size: 19px; letter-spacing: 0.16em; }
h1 {
  font-size: clamp(44px, 5.8vw, 76px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--navy);
  margin: 0 auto 28px;
  max-width: 980px;
}
h1 .accent { color: var(--orange); font-style: normal; }
.hero p.lede {
  font-size: 20px;
  color: rgba(255,255,255,0.85);
  max-width: 860px;
  line-height: 1.5;
  margin: 0 auto 40px;
  text-wrap: balance;
}
.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 15px 30px;
  font-weight: 700; font-size: 15px;
  text-decoration: none;
  border-radius: 8px;
  letter-spacing: -0.01em;
  transition: transform 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.btn.primary { background: var(--orange); color: #fff; }
.btn.primary:hover { transform: translateY(-1px); background: var(--orange-deep); }
.btn.secondary { border: 1px solid var(--line-strong); color: var(--navy); }
.btn.secondary:hover { border-color: var(--orange); color: var(--orange); }

/* ── PROOF / STAT STRIP (Enghouse credibility bar) ── */
.proof-strip {
  /* deep-navy layer so the strip reads as part of the hero band, one dark opening block */
  background: var(--navy-deep);
  background-image: radial-gradient(rgba(255,255,255,0.10) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  padding: 44px 0;
}
.proof-strip .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
.stat strong {
  display: block;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.stat strong .accent { color: var(--orange); }
/* four-stat variant (viamedia case study): 3-col grid orphans the 4th cell */
.proof-strip.cols-4 .container { grid-template-columns: repeat(4, 1fr); }
.stat span {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
}

/* ── SECTIONS ── */
section { padding: 124px 0; border-top: 1px solid var(--line); }
section.alt { background: var(--bg-alt); }
section.flush { border-top: none; }
h2 {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--navy);
  margin: 0 auto 22px;
  max-width: 920px;
  text-align: center;
}
p.section-lede {
  font-size: 20px;
  color: var(--text-body);
  max-width: 680px;
  margin: 0 auto 64px;
  line-height: 1.5;
  text-align: center;
  /* 2026-08-27 (Dan, issue 4): a centred lede was breaking mid-phrase ("control your /
     own playout"). balance evens the line lengths and keeps the break at a clause. */
  text-wrap: balance;
}
/* long-form variant (case studies): a centred paragraph stops working past ~4
   lines, so story sections keep the centred kicker + h2 but read left-aligned */
p.section-lede.read {
  text-align: left;
  max-width: 720px;
  font-size: 17px;
  line-height: 1.65;
}
h3 {
  font-size: 21px; font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.kicker {
  display: block;
  text-align: center;
  font-size: 12px; font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: 18px;
}

.prose h3 {
  font-size: 19px; font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.015em;
  margin: 30px 0 8px;
}
.prose h3:first-child { margin-top: 0; }

/* ── PROSE (multi-paragraph body copy: about #story, privacy #notice) ──
   Everything else on the site is centred, single-paragraph section ledes.
   This is the one block that runs as continuous left-aligned reading copy,
   so it gets its own measure rather than the full 1160px container. */
.prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
}
.prose p { margin-bottom: 22px; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { margin: 40px 0 12px; }
.prose ul { margin: 0 0 22px 22px; padding: 0; }
.prose li { margin-bottom: 12px; line-height: 1.6; }
.prose li::marker { color: var(--orange); }
.prose h3:first-child { margin-top: 0; }
.prose a { color: var(--navy); font-weight: 600; }
.prose a:hover { color: var(--orange); }

/* ── CARD GRIDS (benefits / audiences / steps) ── */
.cards { display: grid; gap: 20px; }
.cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  padding: 36px 30px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(18, 23, 79, 0.05), 0 4px 14px rgba(18, 23, 79, 0.04);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(18, 23, 79, 0.07), 0 10px 26px rgba(18, 23, 79, 0.08);
}
.card .card-num {
  font-size: 12px; font-weight: 700;
  color: var(--orange);
  margin-bottom: 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.card h3 { margin-bottom: 12px; }
.card p { font-size: 15px; color: var(--text-body); line-height: 1.6; text-wrap: pretty; }

/* ── PRODUCT BAND (home → AdRush pointer) ── */
.product-band {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.product-band .visual {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 13px;
  text-align: center;
  padding: 32px;
}
.product-band h2 { text-align: left; margin: 0 0 20px; }
.product-band p { font-size: 17px; margin-bottom: 28px; }

/* ── SIGNAL PATH (rendered from the deck's stage-by-stage slide) ──
   Recomposed 2026-08-14 (Dan's spec): the five cards + Verify strip must read as ONE
   rectangular unit at container width. Equal-column grid; the arrow glyphs live inside
   the gaps (pseudo-elements - the .arch-arrow markup is retired from flow); endpoint
   cards keep the grey treatment at full weight; section air cut ~25%. */
/* weighted columns (Dan 2026-08-14 second critique): equal widths said "five equal
   stages", but Feed in / Out are connection points and the orange centre IS the
   product. Endpoints are bookends (self-centred, natural height); the middle three
   share a faint orange field so the row reads your kit -> AdRush -> your kit. */
.arch {
  display: grid;
  /* 2026-08-27 (Dan, issue 2, second pass): "Video recognition and fingerprinting" must
     never break across lines - it is the claim. So the phrase is nowrap (below) and the
     Detect column is sized min-content-first: the column cannot be narrower than the
     phrase, whatever the window. No magic pixel number, so it survives a font or copy
     change. Consequence, accepted: Detect is now the widest card, where the 2026-08-14
     build had Select/Schedule widest as "the orange centre IS the product". */
  grid-template-columns: 0.72fr minmax(min-content, 1.30fr) 1.24fr 0.90fr 0.72fr;
  gap: 22px;
  margin-top: 36px;
}
.arch-stage {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 22px 20px;
  border-top: 3px solid var(--navy);
}
.arch-title { font-weight: 700; font-size: 18px; color: var(--navy); margin-bottom: 9px; letter-spacing: -0.01em; }
.arch-stage p { font-size: 14px; color: var(--text-body); line-height: 1.5; margin: 0; }
.arch-stage p b { color: var(--orange-deep); }
/* the claim never breaks: see the min-content note on .arch above */
.arch-stage.own p b { white-space: nowrap; }
.arch-stage.own { border-top-color: var(--orange); background: #fdf8f2; }
.arch-stage.own .arch-title { color: var(--orange-deep); }
.arch-stage.boundary { border-top-color: var(--line-strong); align-self: center; padding: 16px; }
.arch-stage.boundary .arch-title { font-size: 15px; color: var(--text-dim); }
.arch-stage.boundary p { font-size: 13px; }
.arch-stage:not(:last-of-type)::after {
  content: '→';
  position: absolute;
  right: -22px; top: 50%;
  transform: translateY(-50%);
  width: 22px;
  text-align: center;
  color: var(--orange);
  font-size: 19px; font-weight: 700;
}
.arch-arrow { display: none; }
/* tighter band: heading and lede pull in, the unit dominates the section */
#product { padding: 72px 0 64px; }
#product .section-lede { max-width: 750px; }
.arch-legend { display: flex; justify-content: center; gap: 30px; margin-top: 20px; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.arch-legend span { display: flex; align-items: center; gap: 8px; }
.lg-swatch { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.lg-orange { background: var(--orange); }
.lg-grey { background: var(--line-strong); }
/* 20px under the cards: Verify reads as running underneath the process, not a footer.
   Two cells (Dan 2026-08-27, issue 3): the Verify boxlet, then the onward button in a
   column of its own. Column 2 echoes the diagram gap above so the row still lines up
   with the stage grid. */
.arch-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 22px;
  align-items: stretch;
  margin-top: 20px;
}
.arch-loop { background: var(--navy); color: #fff; border-radius: 9px; padding: 16px 22px; font-size: 14.5px; line-height: 1.45; display: flex; align-items: center; gap: 20px; }
.arch-loop b { color: #fff; }
.arch-loop-label { flex-shrink: 0; font-weight: 800; font-size: 19px; color: var(--orange); }
/* Column 2: the onward signpost. Its own cell, not a tail on the Verify sentence -
   a reader who has just got interested in reporting should not read this as "more of
   that". Phones swap to the standalone .band-cta twin because the row is hidden there. */
.arch-next-cta {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 16px 20px;
  font-size: 14.5px; font-weight: 700; line-height: 1.35;
  color: var(--navy); text-decoration: none;
  /* 2026-08-27: was solid orange, and out on its own it carried more weight than the
     whole diagram above it. Ghost treatment - this is a signpost off the page, not the
     loudest claim on it. (Same reasoning as the 2026-08-14 note, which the move out of
     the slab had quietly dropped.) */
  background: transparent;
  border: 1.5px solid var(--line-strong);
  border-radius: 9px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.arch-next-cta:hover { background: var(--bg-card); border-color: var(--navy); transform: translateY(-1px); }
.band-cta { text-align: center; margin-top: 40px; }
@media (min-width: 601px) { #product .band-cta { display: none; } }

/* ── STAGE FLOW (adrush how-it-works: the four cards read as one pipeline) ── */
.stage-flow .card { position: relative; text-align: left; }
@media (min-width: 861px) {
  .stage-flow .card:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -19px; top: 50%;
    transform: translateY(-50%);
    color: var(--orange);
    font-size: 20px; font-weight: 700;
    z-index: 2;
  }
}
.stage-icon { height: 48px; margin-bottom: 16px; }
.stage-icon svg { height: 100%; width: auto; display: block; }

/* ── FLOW CHAIN (adrush commercial suite: the whole commercial flow as chips) ── */
.flow-chain {
  display: flex; flex-wrap: wrap; row-gap: 10px;
  align-items: center;
  margin-top: 20px;
}
/* the flow is an inline SVG process diagram (two rows of three, drawn wrap
   connector) - it scales with the card, so it can never wrap or overflow */
.flow-chain svg { width: 100%; height: auto; display: block; }

/* ── MINI SPLIT (adrush engine half: the index "UNSOLD" graphic, filled) ── */
.mini-split { margin-top: 20px; }
.mini-split svg { width: 100%; height: auto; display: block; }

/* ── STANDARDS ── */
.standards {
  display: grid;
  /* 3x2 so the six tiles fill the grid with no orphan row */
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 720px) { .standards { grid-template-columns: 1fr; } }
.standard {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: 10px;
  transition: border-color 0.2s, transform 0.2s;
}
.standard:hover { border-color: var(--orange); transform: translateY(-2px); }
.std-glyph { display: block; width: 40px; height: 26px; margin-bottom: 14px; }
.standard-tag {
  font-size: 15px; font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.standard-desc { font-size: 13px; color: var(--text-dim); line-height: 1.5; }

/* ── STREAM DIAGRAM (ported from mockup) ── */
.diagram {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 44px 48px 48px;
  box-shadow: 0 1px 3px rgba(26, 31, 110, 0.04);
  text-align: left;
}
.stream-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
}
.stream-row:last-of-type { margin-bottom: 0; }
.timeline {
  display: grid;
  grid-template-columns: 3fr 0.02fr 1.4fr 0.02fr 3fr;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 18px;
  margin-left: 188px; /* aligns with the stream column (label 170 + gap 18) */
}
.timeline span:nth-child(1) { text-align: left; }
.timeline span:nth-child(3) { text-align: center; color: var(--orange); font-weight: 700; }
.timeline span:nth-child(5) { text-align: right; }
.stream-label-side {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
  text-align: left;
}
/* the story beat between origin row and delivered rows */
.flow-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--navy);
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  margin: 16px 0 16px 188px;
}
.stream-label-side b {
  display: block;
  font-size: 15px;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 3px;
  text-transform: none;
}
.stream { display: flex; height: 56px; border-radius: 6px; overflow: hidden; position: relative; }
/* playhead sweep: one thin scanline crossing all three rows in sync - same break,
   one timeline, three outputs. Decorative only; parked under reduced-motion. */
.stream::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 10px rgba(237, 125, 23, 0.8);
  animation: playhead 8s linear infinite;
  pointer-events: none;
}
@keyframes playhead {
  from { left: 0; }
  to { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .stream::after { display: none; }
  .seg.ad-sub, .seg.ad-sub-alt { animation: none; }
}
.seg {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
}
.seg.prog { background: var(--navy); color: #fff; flex: 3; }
.seg.ad-orig { background: #6e7182; color: #fff; flex: 1.4; }
.seg.ad-sub {
  background: var(--orange); color: #fff; flex: 1.4;
  animation: segPulse 2.6s ease-in-out infinite;
}
.seg.ad-sub-alt {
  background: #0e7490; color: #fff; flex: 1.4;
  animation: segPulse 2.6s ease-in-out infinite;
  animation-delay: 0.6s;
}
@keyframes segPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
.cue { position: relative; width: 2px; background: var(--orange); margin: -4px 0; }
.cue::before, .cue::after {
  content: ''; position: absolute;
  left: 50%; width: 8px; height: 8px;
  background: var(--orange); border-radius: 50%;
  transform: translateX(-50%);
}
.cue::before { top: -8px; }
.cue::after { bottom: -8px; }
.cue-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--orange);
  letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center;
  font-weight: 700;
}
.diagram-legend {
  display: flex; gap: 28px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px; padding-top: 28px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--text-dim);
}
.legend-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; vertical-align: middle; margin-right: 8px;
}

/* ── PROBLEM MINI-GRAPHIC (index: the unsold break) ── */
.prob-art { max-width: 660px; margin: 44px auto 0; }
.prob-art svg { width: 100%; height: auto; display: block; }
/* 640-unit viewBox inside a padded phone container crushes the stamp to ~6px */
@media (max-width: 860px) { .prob-art { margin: 32px -32px 0; } }

/* ── ABOUT STORY GRID + FACT CARD ── */
.story-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; }
.fact-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: 12px;
  padding: 26px;
}
.fc-title { font-weight: 700; font-size: 16px; color: var(--navy); letter-spacing: -0.015em; margin-bottom: 14px; }
.fact-card dl { margin: 0; }
.fact-card dl div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.fact-card dl div:last-child { border-bottom: none; }
.fact-card dt {
  color: var(--text-dim); font-weight: 600;
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  flex-shrink: 0;
}
.fact-card dd { margin: 0; color: var(--text); text-align: right; }
@media (max-width: 860px) { .story-grid { grid-template-columns: 1fr; gap: 36px; } }
/* a light fact card sitting on a navy band: knocked back so it doesn't glare */
.hero .fact-card:not(.dark) {
  background: rgba(247, 246, 242, 0.82);
  border-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(3px);
}
/* dark variant: fact card sitting inside a navy band (about hero) */
.fact-card.dark {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.16);
  border-top-color: var(--orange);
  backdrop-filter: blur(2px);
}
.fact-card.dark .fc-title { color: #fff; }
.fact-card.dark dl div { border-bottom-color: rgba(255,255,255,0.14); }
.fact-card.dark dt { color: rgba(255,255,255,0.6); }
.fact-card.dark dd { color: #fff; }
/* the corner constellation collides with a split hero's right column - drop it there */
.hero.sub:has(.hero-split)::after { display: none; }
.hero.sub .hero-split .kicker { text-align: left; }

/* ── CASE-STUDY BAND LOGO ── */
.hero .cs-logo { display: block; margin: 4px auto 26px; height: 44px; width: auto; }
.hero .cs-logo.boxed { background: #fff; padding: 8px 12px; height: 64px; border-radius: 10px; }

/* ── HOW IT WORKS RAIL (howitworks.html: one long vertical signal path) ── */
.hiw-rail { max-width: 720px; margin: 0 auto; position: relative; }
.hiw-rail::before {
  content: '';
  position: absolute;
  left: 27px; top: 20px; bottom: 20px;
  border-left: 2px dashed var(--line-strong);
}
.hiw-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 26px;
  margin-bottom: 40px;
  position: relative;
}
.hiw-step:last-child { margin-bottom: 0; }
.hiw-dot {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  box-shadow: 0 1px 4px rgba(18, 23, 79, 0.08);
}
.hiw-dot svg { width: 26px; height: 26px; }
.hiw-dot.own { border-color: var(--orange); }
.hiw-step h3 {
  font-size: 21px; font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin: 12px 0 8px;
}
.hiw-step.boundary h3 { color: var(--text-dim); }
.hiw-tag {
  font-size: 11px; font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.09em; text-transform: uppercase;
  margin-left: 10px;
  /* the tag never breaks internally ("YOUR / KIT" on the narrow Feed-in bookend) */
  white-space: nowrap;
}
.hiw-step p { font-size: 16px; color: var(--text-body); line-height: 1.6; max-width: 58ch; }

/* ── COMPANY TIMELINE (about) ── */
.co-timeline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
}
.co-timeline::before {
  content: '';
  position: absolute;
  top: 7px; left: 6%; right: 6%;
  border-top: 2px dashed var(--line-strong);
}
.ct-item { flex: 1; text-align: center; position: relative; padding-top: 30px; }
.ct-item::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--orange);
}
.ct-item strong { display: block; font-size: 19px; font-weight: 700; color: var(--navy); letter-spacing: -0.015em; margin-bottom: 6px; }
.ct-item span { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; display: block; max-width: 22ch; margin: 0 auto; }
@media (max-width: 720px) {
  .co-timeline { flex-direction: column; gap: 28px; }
  .co-timeline::before { top: 4%; bottom: 4%; left: 7px; right: auto; border-top: none; border-left: 2px dashed var(--line-strong); }
  .ct-item { text-align: left; padding: 0 0 0 34px; }
  .ct-item::before { left: 0; top: 2px; transform: none; }
  .ct-item span { margin: 0; }
}

/* ── PEOPLE (about) ── */
.people-row { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; }
.person { max-width: 400px; text-align: center; }
.person img {
  width: 172px; height: 172px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 22px;
  border: 4px solid var(--bg-card);
  box-shadow: 0 3px 14px rgba(18, 23, 79, 0.16);
}
.person .avatar-fallback {
  width: 172px; height: 172px;
  border-radius: 50%;
  margin: 0 auto 22px;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; font-weight: 700; letter-spacing: 0.02em;
  border: 4px solid var(--bg-card);
  box-shadow: 0 3px 14px rgba(18, 23, 79, 0.16);
}
.person strong { display: block; font-size: 23px; color: var(--navy); letter-spacing: -0.015em; }
.person span {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--orange-deep);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin: 5px 0 14px;
}
.person p { font-size: 16px; color: var(--text-body); line-height: 1.6; }

/* ── CAPABILITY HALVES (adrush: engine / commercial suite) ── */
.halves {
  display: grid; grid-template-columns: 1fr 1fr;
  /* shared rows: title / big card / small card - so the second-row cards line up
     horizontally across the two panels (Dan 2026-08-11); subgrid below does the sync */
  grid-template-rows: auto 1fr auto;
  gap: 28px; margin-top: 56px;
}
.half {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 20px;
}
.half .card { margin-bottom: 0; background: var(--bg-card); }
.half-title {
  font-size: 14px; font-weight: 700;
  color: var(--orange-deep);
  letter-spacing: 0.1em; text-transform: uppercase;
  text-align: center;
  margin-bottom: 0; /* the .half row-gap provides the spacing */
}
@media (max-width: 860px) { .halves { grid-template-columns: 1fr; } }

/* ── MOBILE DIAGRAM (adrush: compact vertical retelling for phones) ── */
.mobile-diagram { display: none; }
@media (max-width: 700px) {
  .diagram .timeline, .diagram .stream-row, .diagram .flow-note, .diagram .breakout-art,
  .diagram .cue-label, .diagram .diagram-legend { display: none; }
  .mobile-diagram { display: block; text-align: center; }
  .md-label {
    font-family: var(--mono);
    font-size: 11px; font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 12px;
  }
  .md-chip {
    height: 54px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: #fff;
    margin-bottom: 12px;
  }
  .md-chip.grey { background: #6e7182; }
  .md-chip.orange { background: var(--orange); }
  .md-chip.teal { background: #0e7490; }
  .md-note {
    font-family: var(--mono);
    font-size: 11px; font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.06em; text-transform: uppercase;
    margin: 16px 0;
  }
  .md-cap { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin-top: 6px; }
}

/* ── SOCIAL PROOF ── */
.logo-wall {
  display: grid;
  /* auto-fit, not a fixed track count: the wall carries two logos today and the
     third slot is reserved for a deployment that is not public yet. Empty tracks
     collapse, so two cells read as a balanced pair and a third drops in without
     a CSS change. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  margin-bottom: 56px;
  overflow: hidden;
}
.logo-cell {
  display: flex; align-items: center; justify-content: center;
  padding: 44px 28px;
  min-height: 150px;
  border-right: 1px solid var(--line);
}
.logo-cell:last-child { border-right: none; }
.logo-cell img {
  max-height: 52px; max-width: 200px; width: auto;
  filter: grayscale(1) contrast(0.85);
  opacity: 0.72;
  transition: filter 0.2s, opacity 0.2s;
}
.logo-cell:hover img { filter: grayscale(0) contrast(1); opacity: 1; }
/* square marks (AVS is 1:1): the 52px cap made it read as a thumbnail */
.logo-cell img.sq { max-height: 92px; }
/* white-on-dark brand marks (current viamedia.ai logo has no dark-on-light variant) */
.logo-cell.dark { background: var(--navy); }
.logo-cell.dark img { filter: none; opacity: 0.95; max-width: 230px; max-height: 64px; }
.logo-cell.dark:hover img { opacity: 1; }
.logo-cell.more { flex-direction: column; gap: 6px; text-align: center; }
.logo-cell.more strong {
  font-size: 20px; font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.logo-cell.more span {
  font-size: 11px; color: var(--text-faint);
  letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500;
}
.testi-grid {
  display: grid;
  /* Same reasoning as .logo-wall: two signed-off quotes now, a third slot held
     open. auto-fit balances the pair and absorbs a third without an edit. */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.testi-grid .testimonial { max-width: none; margin: 0; padding: 32px 30px; }
.testi-grid .testimonial blockquote { font-size: 17px; margin-bottom: 20px; }
.testimonial {
  padding: 44px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 12px;
  max-width: 760px;
  margin: 0 auto;
}
.testimonial blockquote::before {
  content: '\201C';
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 46px; line-height: 0.65;
  color: var(--orange);
  margin-bottom: 12px;
}
.testimonial blockquote {
  font-size: 21px; line-height: 1.4;
  color: var(--navy);
  margin-bottom: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.testimonial cite { font-style: normal; font-size: 14px; color: var(--text-dim); }
.testimonial cite strong {
  display: block; color: var(--navy);
  font-weight: 700; margin-bottom: 2px;
  font-size: 15px;
}

/* ── CTA CARD ── */
.contact-card {
  background: var(--navy);
  background-image:
    radial-gradient(circle at 20% 0%, rgba(237,125,23,0.22), transparent 50%),
    radial-gradient(rgba(255,255,255,0.07) 1.5px, transparent 1.5px);
  background-size: auto, 20px 20px;
  border-radius: 16px;
  padding: 88px 48px;
  text-align: center;
  color: #fff;
}
.contact-card h2 { color: #fff; margin: 0 auto 22px; }
.contact-card p {
  color: rgba(255,255,255,0.75);
  font-size: 18px;
  max-width: 580px;
  margin: 0 auto 40px;
}
.contact-email { margin-top: 20px; font-size: 14px; color: rgba(255,255,255,0.6); }
.contact-email a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.3);
}
.contact-email a:hover { color: #fff; }

/* ── CONTACT PAGE DETAILS ── */
.contact-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}
.contact-details .card h3 { font-size: 16px; margin-bottom: 10px; }
.contact-details .card p { font-size: 15px; }
.contact-details a { color: var(--navy); font-weight: 600; }
.contact-details a:hover { color: var(--orange); }

/* ── FOOTER ── */
footer { padding: 44px 0; border-top: 1px solid var(--line); }
footer .container {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: var(--text-faint);
}
footer a { color: var(--text-dim); text-decoration: none; }
footer a:hover { color: var(--orange); }
footer .foot-links { display: flex; gap: 20px; flex-wrap: wrap; row-gap: 8px; }
/* Supplier credit - quiet, sits in the legal line, not the nav links. */
footer a.ft-credit {
  color: var(--text-faint);
  border-bottom: 1px solid var(--line);
}
footer a.ft-credit:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* ── RESPONSIVE ── */
/* 2026-08-27: the five-across row stacks at 980, not 860. Below ~980 the min-content
   Detect column (which cannot shrink - the claim is nowrap) squeezed Select and Play to
   ~120px and the row read as one fat card and four slivers. Five across only when there
   is room for five. */
@media (max-width: 980px) {
  .arch { grid-template-columns: 1fr; gap: 8px; }
  .arch-stage:not(:last-of-type)::after { content: none; }
  .arch-stage.boundary { align-self: stretch; }
  .arch-after { grid-template-columns: 1fr; gap: 14px; }
  .arch-loop { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 860px) {
  nav.site-nav .container { height: 64px; }
  .logo img { height: 32px; }
  .hero { padding: 64px 0 64px; }
  .proof-strip .container, .proof-strip.cols-4 .container { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .cards.cols-2, .cards.cols-3, .cards.cols-4 { grid-template-columns: 1fr; }
  .product-band { grid-template-columns: 1fr; gap: 32px; }
  .product-band h2 { text-align: left; }
  /* .arch / .arch-after / .arch-loop stacking now lives in the 980 block above */
  .logo-wall, .testi-grid { grid-template-columns: 1fr; }
  .logo-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .logo-cell:last-child { border-bottom: none; }
  .contact-card { padding: 56px 24px; }
  .contact-details { grid-template-columns: 1fr; }
  section { padding: 84px 0; }
  .diagram { padding: 32px 20px; }
  .stream-row { grid-template-columns: 1fr; gap: 8px; }
  .flow-note { margin-left: 0; }
  .timeline { display: flex; justify-content: space-between; font-size: 10px; margin-left: 0; }
  .timeline span:nth-child(2), .timeline span:nth-child(4) { display: none; }
  .seg { font-size: 11px; }
  h1 { font-size: clamp(34px, 9vw, 52px); }
  .hero p.lede { font-size: 17px; }
}

/* Phone compaction (Dan 2026-08-12): the page ran ~10,000px on a 390 phone because every
   desktop grid collapses to one column and keeps its desktop breathing room. Nothing here
   changes copy or the desktop rendering - it takes the air out of the stack. */
@media (max-width: 600px) {
  section { padding: 56px 0; }
  h2 { font-size: clamp(27px, 7.6vw, 34px); }
  p.section-lede { font-size: 17.5px; margin-bottom: 32px; }
  .kicker { margin-bottom: 12px; }

  /* card chrome is what a 4-across grid needs; stacked, seven boxes in a row read as
     one repeated shape. Flat entries divided by a hairline say the same thing shorter. */
  .cards { gap: 0; }
  .card {
    padding: 24px 0;
    background: none;
    border: none;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .card:first-child { border-top: none; padding-top: 4px; }
  .card:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .card .card-num { margin-bottom: 8px; }
  .card h3 { margin-bottom: 8px; }

  /* Case studies: the long editorial headlines are good copy, so they get smaller
     phone type instead of a rewrite (full-site review 2026-08-14). Desktop unchanged. */
  body.case-study h1 { font-size: 32px; }
  body.case-study h2 { font-size: 28px; }

  .testi-grid { gap: 14px; }
  .testi-grid .testimonial { padding: 24px 22px; }
  .testi-grid .testimonial blockquote { font-size: 16px; margin-bottom: 14px; }
  .logo-cell { padding: 26px 24px; min-height: 104px; }

  /* Carousel, phones only. Two jobs: sets where the reader picks ONE (operator types,
     testimonials) and dense stacks that would otherwise read as a text wall (the four
     benefits - Dan 2026-08-12). Numbered or attributed items make it safe, because the
     reader can see how many there are and what is behind the swipe. */
  /* both selectors spelled out: a bare .carousel loses to .cards.cols-4 on specificity */
  .cards.carousel, .testi-grid.carousel {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 82%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 32px;
    margin: 0 -32px;
    padding: 4px 32px 18px;
    scrollbar-width: none;
  }
  .cards.carousel::-webkit-scrollbar, .testi-grid.carousel::-webkit-scrollbar { display: none; }
  .testi-grid.carousel .testimonial { scroll-snap-align: start; }
  .cards.carousel .card {
    scroll-snap-align: start;
    /* chrome comes back: side by side, cards need edges to read as separate cards */
    padding: 24px 22px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 12px;
  }

  /* Standards section dropped on phones (Dan 2026-08-14, round-2 review). The Select
     card on adrush carries SCTE-35/130/VAST for a phone reader; desktop keeps the band.
     Tried first as a carousel (2026-08-14, briefly live) - cut instead. */
  #standards { display: none; }
  /* With #standards gone, #deployments (alt since the 2026-08-14 reorder: testimonials
     moved to 5th, Dan's call) would sit tinted directly against tinted #audiences.
     Plain here restores the alternation phones actually see. */
  #deployments { background: transparent; }

  /* Stage rail (adrush): the signal path already reads left-to-right like the stream
     itself, and stacked it is ~2.5 screens of repeated shape. Dot on top, text below;
     the dashed connector runs per-step from the dot to the next card. */
  .hiw-rail {
    max-width: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 32px;
    margin: 0 -32px;
    padding: 4px 32px 18px;
    scrollbar-width: none;
  }
  .hiw-rail::-webkit-scrollbar { display: none; }
  .hiw-rail::before { display: none; }
  .hiw-step {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 0;
    scroll-snap-align: start;
  }
  .hiw-step::before {
    content: '';
    position: absolute;
    top: 27px; left: 56px; right: -14px;
    border-top: 2px dashed var(--line-strong);
  }
  .hiw-step:last-child::before { display: none; }
  .hiw-step h3 { margin-top: 0; }

  /* Gives-you halves (adrush): stacked normally on phones - only two panels, and a
     second swipe surface on the same page made "swipe to understand" the recurring
     interaction (full-site review 2026-08-14). The stage rail keeps the one carousel. */
  .halves { grid-template-rows: none; gap: 20px; margin-top: 40px; }
  .half { grid-template-rows: auto; grid-row: auto; padding: 22px; }

  /* The stage diagram is the AdRush page's own content, repeated here. On desktop that
     repetition earns its place - the band tells the story in line. On a phone it is ~900px
     of scroll the reader has to pass to reach the standards and the close, so the band
     becomes a pointer and adrush.html does the telling (Dan 2026-08-12). */
  #product .arch, #product .arch-legend, #product .arch-after { display: none; }
  /* stripped-down pointer band shouldn't keep its roomier desktop padding */
  #product { padding: 52px 0; }
  .only-wide { display: none; }
  .only-phone { display: inline; }
  .band-cta { margin-top: 8px; }
}

@media (max-width: 560px) {
  /* Phone nav: keep AdRush + Contact, drop the section anchors
     (their targets are one scroll away on the homepage anyway). */
  .nav-links { gap: 18px; }
  .nav-links a:not(.cta):not(:first-child) { display: none; }
}

/* Utility: hold hyphenated standards names (SCTE-35 etc.) on one line. */
.nowrap { white-space: nowrap; }

/* Utility: phone-only prose (counterpart of .only-wide; shown in the ≤600px block). */
.only-phone { display: none; }

/* ---- Card illustrations (imagery pass, 2026-08-22) -----------------------
   Navy dot-grid panels in the hero's grammar: white = the operator's plant,
   orange = the ad / the action. Inline SVG, no image files. ------------- */
.card-art {
  margin: -36px -30px 22px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  line-height: 0;
}
.card-art svg { width: 100%; height: auto; display: block; }
@media (max-width: 600px) {
  .card-art { margin: 0 0 14px; border-radius: 8px; }
}

/* ---- About: story + deployments panel ---------------------------------- */
.story-grid { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.deploy-panel {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.5px), linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  background-size: 10px 10px, 100% 100%;
  border-radius: 12px;
  padding: 28px 28px 24px;
  color: #fff;
}
.deploy-panel-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 16px;
}
.deploy-panel ul { list-style: none; margin: 0; padding: 0; }
.deploy-panel li {
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 600; padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.deploy-panel li:last-child { border-bottom: none; }
.deploy-panel .pin {
  width: 10px; height: 10px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 4px rgba(237,125,23,.25); flex: 0 0 auto;
}
.deploy-panel-foot { margin-top: 18px; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.7); }
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .deploy-panel { max-width: 420px; }
}

/* ---- Home: deployments world map --------------------------------------- */
/* 2026-08-27 (Dan): the navy dot map is back - the light version was worse - but it was
   "a little grand" at full container width, reading as a headline claim when six
   countries off two named customers is a footnote. So: same panel, much smaller, and
   moved BELOW the testimonials, where it closes the section as a fact rather than
   opening it as an argument. 420px against the old ~1040. */
.map-panel {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border-radius: 10px;
  padding: 16px 18px 12px;
  margin: 8px auto 0;
}
/* 2026-08-27 (Dan): "stretch the world map to the column width keep height the same".
   Full column width at the old 420px-panel height, so it reads as a wide, low band.
   This is a TRUE stretch, not a scale: the dots run y6-y411 of a 420 viewBox, so there
   is no dead ocean to crop and no way to get these proportions without distorting.
   preserveAspectRatio="none" on the SVG is what makes it fill rather than letterbox;
   the landmasses are horizontally elongated as a result. */
.map-panel img { width: 100%; height: 179px; display: block; }
.map-caption {
  margin-top: 9px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.6); text-align: center;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .map-panel { padding: 14px 12px 10px; }
  .map-panel img { height: 120px; }
  .map-caption { font-size: 9px; letter-spacing: .07em; }
}


/* ── CONTACT FORM (2026-08-27) ─────────────────────────────────────────────
   Replaced the prose "Useful to have before we talk" section. Deliberately four
   fields: this is a pamphlet site, not a lead funnel.
   Second pass, same day (Dan): the form takes the hero's card slot, where the company
   details used to sit, so the ask is in the first window rather than a button pointing
   at it. Same card treatment as .fact-card so the page keeps its shape. */
.form-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: 12px;
  padding: 26px;
}
.form-intro { font-size: 14px; color: var(--text-body); margin: -4px 0 18px; line-height: 1.5; }
.enquiry-form .field { margin-bottom: 14px; }
.enquiry-form label {
  display: block; margin-bottom: 7px;
  font-size: 14px; font-weight: 600; color: var(--navy);
}
.enquiry-form input,
.enquiry-form textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  font: inherit; font-size: 16px;   /* 16px stops iOS zooming the page on focus */
  color: var(--text-body);
  /* faint fill, not white: a white input on a white card is only a thin grey line away
     from the card, and the fields stopped reading as fields. Goes white on focus. */
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.enquiry-form textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.enquiry-form input:focus,
.enquiry-form textarea:focus {
  outline: none;
  background: var(--bg-card);
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-soft);
}
.enquiry-form input:user-invalid,
.enquiry-form textarea:user-invalid { border-color: var(--orange-deep); }
.enquiry-form button { margin-top: 4px; width: 100%; cursor: pointer; border: none; font: inherit; font-weight: 700; }
.enquiry-form button[disabled] { opacity: 0.55; cursor: default; }
/* honeypot: off-screen rather than display:none, which some bots detect */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 16px; font-size: 15px; min-height: 22px; }
.form-note.ok { color: var(--navy); font-weight: 600; }
.form-note.bad { color: var(--orange-deep); font-weight: 600; }

/* Company details, moved below the fold 2026-08-27 - reference, not the pitch. */
.detail-grid {
  margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 40px; max-width: 900px; margin: 0 auto;
}
.detail-grid > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.detail-grid dt {
  color: var(--text-dim); font-weight: 600;
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 5px;
}
.detail-grid dd { margin: 0; font-size: 15px; color: var(--text-body); line-height: 1.5; }
.detail-grid dd a { color: var(--navy); font-weight: 600; }
#details h2 { text-align: center; }
#details .section-lede.read { margin: 0 auto 44px; }

/* the hero card collapses last on phones, same as the fact-card it replaced */
@media (max-width: 860px) {
  .hero-split > .form-card { order: 6; margin-top: 32px; text-align: left; }
}

/* ── CONTACT HERO (Dan 2026-08-27) ───────────────────────────────────────────
   Tried stretching the copy column to the card's height with the qualifier pinned to
   its foot. Columns lined up, but Dan: "no there's a big gulf there" - it bought
   matching edges at the price of 360px of empty navy inside the copy. Reverted: the
   three bits stay together as one block and the block centres against the card.
   Kept as a class hook only, so index and about are unaffected either way. */
.contact-hero .hero-qualifier { margin-top: 34px; }

/* TRIAL 2026-08-27: company details moved into the hero's left column and the copy
   top-aligned, so the two columns carry similar weight instead of a short block centred
   against a tall card. On the navy ground the details need light ink, not the dark ink
   they used in the section they came from.
   REVERT: archive/site-css-BEFORE-details-in-hero-2026-08-27.css */
.contact-hero .hero-split { align-items: start; }
.hero-details {
  /* A card, for contrast (Dan 2026-08-27). Deliberately NOT a white card: two white
     cards side by side would compete, and these details are reference, not the ask.
     A translucent panel lifts them off the navy while staying recessive next to the
     form. */
  margin-top: 44px;
  padding: 24px 26px 8px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
}
.hd-note {
  font-size: 14.5px; line-height: 1.6; margin: 0 0 18px;
  color: rgba(255,255,255,0.80); max-width: 44em;
}
.hero-details .detail-grid { max-width: none; margin: 0; gap: 0 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.hero-details .detail-grid > div { padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
.hero-details .detail-grid > div:last-child { border-bottom: none; }
.hero-details .detail-grid dt { color: rgba(255,255,255,0.66); }
.hero-details .detail-grid dd { color: rgba(255,255,255,0.96); font-size: 14px; }
.hero-details .detail-grid dd a { color: #fff; font-weight: 600; }
@media (max-width: 860px) {
  /* .hero-copy is display:contents here, so this needs its own order or it jumps the card */
  .hero-details { order: 7; margin-top: 32px; text-align: left; }
}