/* YourDataScouting -- site styles
   Palette: deep navy ground, single warm gold accent.
   Committed dark look. All backgrounds painted explicitly. */

:root {
  --navy-900: #0a1526;
  --navy-850: #0d1b30;
  --navy-800: #112339;
  --navy-700: #16304b;
  --line: #21395a;
  --line-soft: #1a2c46;

  --gold: #e0a530;
  --gold-dim: #b8842a;

  --text: #eef3fa;
  --text-mid: #b6c4d8;
  --text-dim: #8698b1;

  --max: 1120px;
  --pad: 20px;
  --radius: 10px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

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

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

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--gold);
  color: var(--navy-900);
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
}

/* ---------- Typography ---------- */

h1, h2, h3 {
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 6.4vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 4.2vw, 2.1rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
}

.lede {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  color: var(--text-mid);
  max-width: 62ch;
}

.section-note {
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 62ch;
}

/* ---------- Nav ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 21, 38, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.site-nav .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 62px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.02rem;
}
.brand:hover { text-decoration: none; color: var(--text); }
/* Original Fit mark: the plate fills only ~72% of its 100x100 box, so it
   needs a slightly larger box than the old square mark to read the same. */
.brand svg { width: 32px; height: 32px; flex: none; }
.brand .b-thin { font-weight: 400; color: var(--text-mid); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  font-size: 0.93rem;
}
.nav-links a { color: var(--text-mid); }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--text); font-weight: 650; }

/* The burger. No JavaScript on this site, so the open state is a checkbox:
   #nav-toggle sits between the brand and the nav, the label toggles it, and
   the panel is a sibling combinator away. Hidden and inert above 860px. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  overflow: hidden;
}

.nav-burger {
  display: none;
  margin-left: auto;
  margin-right: -12px;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  flex: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-burger-bar,
.nav-burger-bar::before,
.nav-burger-bar::after {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.18s ease, background-color 0.18s ease;
}
.nav-burger-bar { position: relative; }
.nav-burger-bar::before,
.nav-burger-bar::after { content: ""; position: absolute; left: 0; }
.nav-burger-bar::before { top: -7px; }
.nav-burger-bar::after { top: 7px; }

.nav-toggle:checked ~ .nav-burger .nav-burger-bar { background: transparent; }
.nav-toggle:checked ~ .nav-burger .nav-burger-bar::before {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle:checked ~ .nav-burger .nav-burger-bar::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* The checkbox is the real control: it is what the keyboard reaches and what
   Space toggles, so it stays in the tab order (1px, transparent) and the focus
   ring is drawn on the burger label sitting next to it. */
.nav-toggle:focus-visible ~ .nav-burger {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 8px;
  font-weight: 650;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    transform 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary {
  background: var(--gold);
  color: #17233a;
  border-color: var(--gold);
}
.btn-primary:hover { background: #eeb547; color: #17233a; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--gold-dim); color: var(--text); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---------- Sections ---------- */

section { padding: 64px 0; }
.section-alt { background: var(--navy-850); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.section-head { max-width: 66ch; margin-bottom: 36px; }
.section-head.narrow { max-width: 46ch; margin-bottom: 0; }

/* ---------- Hero ---------- */

.hero {
  padding: 68px 0 72px;
  background:
    radial-gradient(1100px 520px at 78% -8%, rgba(224, 165, 48, 0.07), transparent 62%),
    linear-gradient(180deg, #0b1728 0%, var(--navy-900) 100%);
  border-bottom: 1px solid var(--line-soft);
}

.hero-grid {
  display: grid;
  gap: 44px;
  align-items: center;
}

.hero h1 { max-width: 19ch; }
.hero .lede { margin-bottom: 0; }

/* The three-word pitch: affordable, customizable, repeatable. Uneven lines on
   purpose. A symmetrical card grid would read as a feature table. */
.pitch {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  max-width: 58ch;
}
.pitch li {
  color: var(--text-mid);
  font-size: 0.97rem;
  line-height: 1.55;
  margin-bottom: 12px;
}
.pitch li:last-child { margin-bottom: 0; }
.pitch strong { color: var(--text); font-weight: 700; }

.hero-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-dim);
  font-size: 0.95rem;
  max-width: 54ch;
}

/* The hero visual is a crop of a real report page, presented as a page
   fragment: light paper, thin border, soft shadow, tipped a degree and a half
   so it reads as something printed rather than something drawn. */
.hero-shot { margin: 0; }
.hero-shot img {
  width: 100%;
  background: #fff;
  border: 1px solid #cdd6e2;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
  transform: none;
}
.hero-shot figcaption {
  margin-top: 26px;
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.45;
  max-width: 46ch;
}

/* ---------- Bench Coach hero visual ----------
   Pure CSS composition: four file chips, straight connector lines, and the
   approved chat card underneath. No script, no raster image. It is decorative
   and marked aria-hidden; the canonical transcript is further down the page. */

.hero-lede {
  margin-top: 18px;
  color: var(--text-mid);
  max-width: 60ch;
}

.bc-viz {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* Chips and connectors share one grid so a line always lands on a chip
   center, whatever the column widths work out to. */
.bc-tree {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0;
  row-gap: 8px;
}

.bc-chip {
  justify-self: center;
  margin: 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--navy-850);
  color: var(--text-mid);
  font-size: 0.76rem;
  line-height: 1.2;
  white-space: nowrap;
}
.bc-doc {
  width: 11px;
  height: 13px;
  flex: none;
  color: var(--text-dim);
  overflow: visible;
}

/* One stub down from each chip, one horizontal collector built from half and
   full segments, one drop into the card. Borders, so every line stays true. */
.bc-wire {
  position: relative;
  height: 30px;
  margin-top: 4px;
}
.bc-wire:nth-child(n+7) { display: none; }
.bc-wire::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 15px;
  border-left: 1px solid var(--line);
}
.bc-wire::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  border-top: 1px solid var(--line);
}
.bc-wire:nth-child(5)::after { left: 50%; }
.bc-wire:nth-child(6)::after { right: 50%; }
.bc-tree::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 15px;
  border-left: 1px solid var(--line);
}

.bc-cardwrap { position: relative; }
.bc-cardwrap::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: -18px;
  bottom: -24px;
  background: radial-gradient(62% 58% at 50% 46%, rgba(224, 165, 48, 0.10), transparent 72%);
  pointer-events: none;
}

.bc-card {
  position: relative;
  background: rgba(13, 27, 48, 0.72);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 20px;
}
.bc-card .chat { gap: 14px; margin: 0; }
.bc-card .chat-turn { max-width: 94%; }
.bc-card .chat-bubble { padding: 11px 14px; }
.bc-card .chat-bubble p { font-size: 0.87rem; line-height: 1.5; }
.bc-card .chat-who { font-size: 0.66rem; }
.bc-card .chat-src { font-size: 0.74rem; }
.bc-card .chat-src-label { font-size: 0.66rem; }

.bc-cap {
  margin: 16px 0 0;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.82rem;
}

/* ---------- Cards ---------- */

.cards {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.card {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--navy-800);
  padding: 22px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-mid); font-size: 0.96rem; margin-bottom: 0; }

.card-shot {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--navy-800);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card-shot .shot {
  background: #f4f6f9;
  border-bottom: 1px solid var(--line-soft);
  height: 168px;
  overflow: hidden;
}
.card-shot .shot img {
  width: 100%;
  object-fit: cover;
  object-position: top center;
}
.card-shot .body { padding: 20px 22px 24px; }
.card-shot h3 { margin-bottom: 8px; }
.card-shot p { color: var(--text-mid); font-size: 0.95rem; margin-bottom: 0; }

/* who it's for: two short facts, not a card grid */
.facts {
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 26px;
  border-top: 1px solid var(--line-soft);
  padding-top: 28px;
}
.facts dt {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.facts dd {
  margin: 0;
  color: var(--text-mid);
  font-size: 0.96rem;
}

/* ---------- FAQ (visible, mirrors the FAQPage JSON-LD) ---------- */

.faq {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 74ch;
  border-top: 1px solid var(--line-soft);
}
.faq > div {
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--line-soft);
}
.faq dt {
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  font-size: 1.05rem;
}
.faq dd {
  margin: 0;
  color: var(--text-mid);
  font-size: 0.96rem;
}

/* ---------- Steps ---------- */

.steps {
  display: grid;
  gap: 18px;
  counter-reset: step;
  padding: 0;
  margin: 0;
  list-style: none;
}
.steps li {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--navy-800);
  padding: 22px 22px 24px;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--navy-700);
  border: 1px solid var(--line);
  color: var(--text-mid);
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 14px;
}
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--text-mid); font-size: 0.95rem; margin-bottom: 0; }

/* ---------- Gallery strip ---------- */

.strip {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
.strip a {
  display: block;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  background: #f4f6f9;
}
.strip a:hover { border-color: var(--gold-dim); }
.strip img { width: 100%; }

/* ---------- Two-up strip (consulting + rankings) ---------- */

.duo {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
.duo-card {
  display: block;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--navy-800);
  padding: 26px 24px 28px;
  color: var(--text);
}
.duo-card:hover { text-decoration: none; border-color: var(--gold-dim); }
.duo-card h3 { margin-bottom: 8px; }
.duo-card p { color: var(--text-mid); font-size: 0.95rem; margin-bottom: 12px; }
.duo-more { color: var(--gold); font-size: 0.92rem; font-weight: 600; }

/* ---------- Testimonial ---------- */

.quote {
  border-left: 3px solid var(--line);
  padding: 4px 0 4px 24px;
  max-width: 62ch;
  margin: 0;
}
.quote p {
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 16px;
}
.quote footer { color: var(--text-dim); font-size: 0.92rem; }

/* ---------- Pricing + CTA ---------- */

.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--navy-800);
  padding: 34px 26px 38px;
}
.panel h2 { margin-bottom: 10px; }
.panel p { color: var(--text-mid); max-width: 58ch; }

/* ---------- Samples page ---------- */

.sample {
  margin: 0 0 56px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--navy-800);
  overflow: hidden;
}
.sample .frame { background: #f4f6f9; padding: 0; }
.sample .frame img { width: 100%; }
.sample .cap { padding: 20px 22px 24px; }
.sample .cap h2 { font-size: 1.25rem; margin-bottom: 8px; }
.sample .cap p { color: var(--text-mid); font-size: 0.96rem; }
.sample .cap p:last-child { margin-bottom: 0; }
.sample .cap ul { color: var(--text-mid); font-size: 0.96rem; margin: 0 0 14px; padding-left: 20px; }
.sample .cap li { margin-bottom: 6px; }

.notice {
  border: 1px solid var(--line-soft);
  background: var(--navy-800);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: var(--text-mid);
  font-size: 0.95rem;
  margin-bottom: 44px;
}
.notice strong { color: var(--text); }

/* ---------- Projects page ---------- */

.projects-hero h1 { max-width: none; }
.projects-hero .lede { max-width: 64ch; }

.project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.project-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--navy-800);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

.project-media,
.project-gallery,
.project-placeholder {
  height: 220px;
  border-bottom: 1px solid var(--line-soft);
}

.project-media {
  overflow: hidden;
  background: var(--navy-850);
  padding: 10px;
  box-sizing: border-box;
}
.project-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.project-media.project-report img { object-fit: contain; }
.project-media-dark { background: #111; }

.project-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--navy-850);
}
.project-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.project-placeholder {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(224, 165, 48, 0.07), transparent 52%),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(182, 196, 216, 0.04) 31px 32px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(182, 196, 216, 0.04) 31px 32px),
    var(--navy-850);
}
.project-placeholder span {
  display: grid;
  place-items: center;
  min-width: 66px;
  height: 66px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--navy-800);
  color: var(--text-mid);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.project-placeholder-graph span { border-radius: 50%; }
.project-placeholder-queue span { transform: rotate(-2deg); }
.project-placeholder-hitl span { min-width: 78px; }

.project-body {
  flex: 1;
  padding: 22px 22px 25px;
}
.project-body h3 { margin-bottom: 9px; }
.project-body h3 a { color: var(--text); }
.project-body h3 a:hover { color: var(--gold); }
.project-body p {
  margin: 0;
  color: var(--text-mid);
  font-size: 0.95rem;
}

.footer-cta {
  margin-bottom: 34px;
  padding: 0 0 30px;
  border-bottom: 1px solid var(--line-soft);
}
.footer-cta p {
  max-width: 62ch;
  margin: 0;
  color: var(--text-mid);
  font-size: clamp(1.05rem, 2.6vw, 1.22rem);
}
.footer-cta strong { color: var(--text); }

/* ---------- Prose (about) ---------- */

.prose { max-width: 68ch; }
.prose h2 { margin-top: 44px; }
.prose h2.first { margin-top: 0; }
.prose p { color: var(--text-mid); }
.prose ul { color: var(--text-mid); padding-left: 20px; }
.prose li { margin-bottom: 8px; }

/* ---------- Bench Coach chat (benchcoach, scripted example) ---------- */

.chat {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 26px 0 34px;
}
.chat-turn {
  display: flex;
  flex-direction: column;
  max-width: 88%;
}
.chat-turn-coach { align-self: flex-end; align-items: flex-end; text-align: left; }
.chat-turn-asst { align-self: flex-start; align-items: flex-start; }

.chat-who {
  margin: 0 0 5px;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-dim);
}
.chat-turn-asst .chat-who { color: var(--text-mid); }

.chat-bubble {
  background: var(--navy-850);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.chat-turn-coach .chat-bubble { border-bottom-right-radius: 3px; }
.chat-turn-asst .chat-bubble {
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy-700);
  border-bottom-left-radius: 3px;
}
.chat-bubble p {
  margin: 0 0 10px;
  color: var(--text-mid);
  font-size: 0.96rem;
  line-height: 1.55;
}
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-turn-coach .chat-bubble p { color: var(--text); }

.chat-note { color: var(--text) !important; font-weight: 600; }

.chat-tag {
  display: inline-block;
  margin-top: 4px !important;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--navy-850);
  font-size: 0.72rem !important;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-dim) !important;
}

.chat-src {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: var(--text-dim);
  word-break: break-word;
}
.chat-src-label { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; }

@media (min-width: 620px) {
  .chat-turn { max-width: 82%; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-850);
  border-top: 1px solid var(--line-soft);
  padding: 44px 0 52px;
  font-size: 0.92rem;
  color: var(--text-dim);
}
.footer-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
.site-footer h3 {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--text-mid); }
.site-footer a:hover { color: var(--gold); }
.footer-bottom {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
}

/* ---------- 404 ---------- */

.center-page {
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding: 72px 0;
}

/* ---------- Responsive ---------- */

@media (min-width: 620px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 26px 40px; }
  .duo { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .panel { padding: 44px 40px 48px; }

  .bc-tree { grid-template-columns: repeat(4, 1fr); }
  .bc-wire:nth-child(n+7) { display: block; }
  .bc-wire:nth-child(5)::after { left: 50%; right: 0; }
  .bc-wire:nth-child(6)::after { left: 0; right: 0; }
  .bc-wire:nth-child(8)::after { left: 0; right: 50%; }
}

@media (min-width: 900px) {
  body { font-size: 17.5px; }
  section { padding: 88px 0; }
  .hero { padding: 96px 0 100px; }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
  .cards { grid-template-columns: repeat(4, 1fr); }
  .project-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .strip { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Phone and tablet header: one row, brand left, burger right. The links become
   a full width panel under the header when #nav-toggle is checked. Above 980px
   the inline row fits and the burger is gone. */
@media (max-width: 979px) {
  .site-nav .wrap {
    flex-wrap: nowrap;
    gap: 12px;
    min-height: 60px;
  }
  .brand { font-size: 0.97rem; gap: 8px; min-width: 0; }
  .brand svg { width: 28px; height: 28px; }
  .brand span { white-space: nowrap; }

  .nav-burger { display: flex; }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--pad) 18px;
    background: var(--navy-900);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4);
    font-size: 1rem;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }

  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--text);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-links a[aria-current="page"] { color: var(--text); font-weight: 700; }
  .nav-links a:nth-last-child(2) { border-bottom: 0; }

  .nav-links .nav-cta {
    justify-content: center;
    margin-top: 14px;
    border-bottom: 0;
    border-radius: 8px;
    background: var(--gold);
    color: #17233a;
    font-weight: 650;
  }
  .nav-links .nav-cta:hover { color: #17233a; }
}


/* ---------- Help page (benchcoach/help, invited staffs, noindex) ----------
   Scoped under .helpdoc so nothing here can reach another page. The page is
   long, mostly text, and read on a phone in a dugout, so the rules are: one
   column, wide-enough measure, and anything that cannot shrink scrolls
   inside its own box rather than pushing the body sideways. */

.helpdoc { max-width: 74ch; }
.helpdoc h2 { margin-top: 48px; scroll-margin-top: 24px; }
.helpdoc h2.first { margin-top: 0; }
.helpdoc h3 {
  margin-top: 32px;
  margin-bottom: 8px;
  font-size: 1.05rem;
  scroll-margin-top: 24px;
}
.helpdoc p, .helpdoc li { color: var(--text-mid); }
.helpdoc ul, .helpdoc ol { padding-left: 22px; }
.helpdoc li { margin-bottom: 8px; }
.helpdoc ol { counter-reset: none; }
.helpdoc strong { color: var(--text); }

/* The address, and anything else that must be copied exactly. */
.helpdoc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.94em;
  color: var(--text);
  background: var(--navy-800);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 1px 5px;
}
/* A long address inside a sentence or a list item wraps rather than pushing
   the page sideways on a phone. The CSV blocks below are the exception and
   they scroll inside their own box. */
.helpdoc p code,
.helpdoc li code {
  overflow-wrap: anywhere;
}
.address {
  display: block;
  background: var(--navy-800);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 10px;
  overflow-x: auto;
}
.address code {
  border: 0;
  background: none;
  padding: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  word-break: break-all;
}

/* CSV examples. They overflow on a phone on purpose: a wrapped CSV line is
   a lie about the file. The box scrolls, the page does not. */
.helpdoc pre {
  background: var(--navy-850);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text-mid);
}
.helpdoc pre code {
  border: 0;
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre;
}

.helpdoc blockquote {
  margin: 0 0 16px;
  padding: 16px 18px;
  border-left: 3px solid var(--line);
  background: var(--navy-850);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-mid);
}
.helpdoc blockquote p:last-child { margin-bottom: 0; }

/* The jump list above the four walkthroughs. Links, so gold, which is the
   one place gold is allowed on this page. */
.jump {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.jump li { margin: 0; }

.helpdoc .faq { margin-top: 24px; }

/* The scoping line at the very top, and the closing line at the bottom. */
.scope {
  border: 1px solid var(--line);
  background: var(--navy-800);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 36px;
}
.scope p { margin-bottom: 0; color: var(--text); }
.scope p + p { margin-top: 10px; color: var(--text-mid); }

/* ---------- The public Get started form (index.html #get-started) ----------

   The form lives inside the existing .panel in that section. It ships no
   script of any kind: every check it makes, the browser's `required` included,
   is made again on the server, and a visitor with script off loses nothing.
   The gold asterisk and the legend under the button are the same pair the
   private coach intake uses, so the two forms read the same way. */

.start-form {
  margin-top: 26px;
  max-width: 42rem;
}
.start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}
.start-field { margin-bottom: 0; }
.start-field.wide { grid-column: 1 / -1; }
.start-field label {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
}
.start-form input[type=text],
.start-form input[type=email],
.start-form select,
.start-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--navy-850);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
.start-form textarea { min-height: 5.5em; resize: vertical; }
.start-form input:focus,
.start-form select:focus,
.start-form textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: var(--gold-dim);
}

/* The required mark. Gold rather than red: red is not in this palette, and a
   warm mark next to a label reads as "needed" without reading as "wrong".
   Hidden from assistive tech, because the `required` attribute is what a
   screen reader announces and an asterisk read aloud on top of it is noise. */
.start-req { color: var(--gold); font-weight: 700; margin-left: 3px; }
.start-legend { color: var(--text-dim); font-size: 0.92rem; margin: 12px 0 0; }
.start-form .btn-row { margin-top: 22px; }

/* The trap. A person never sees this and never tabs into it; something
   filling in every input it finds does, and a filled one is written nowhere.
   Moved off screen rather than display:none so it stays a real focusable
   field to anything reading the DOM. */
.start-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Where the one script on the site says what happened. Empty and invisible
   until it has something to say, so a visitor with JavaScript off, who never
   sees it at all, loses nothing: the Function answers that submit with a 303
   to /thanks instead. */
.start-notice { display: none; }
.start-notice.show {
  display: block;
  margin-top: 18px;
  border: 1px solid var(--line);
  background: var(--navy-850);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--text-mid);
  font-size: 0.95rem;
}
.start-notice.show.ok { border-color: var(--gold-dim); }
.start-notice.show b { color: var(--text); }
.start-notice.show a { color: var(--gold); }

/* The server-rendered answers: the missing-field page and the over-quota
   page. Same box the intake page uses for the same job. */
.start-note {
  border: 1px solid var(--gold-dim);
  background: var(--navy-850);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 24px;
}
.start-note p:first-child { color: var(--text); font-weight: 600; }
.start-note p:last-child { margin-bottom: 0; }
.start-note ul { color: var(--text-mid); margin: 0 0 12px; padding-left: 20px; }

@media (max-width: 640px) {
  .start-grid { grid-template-columns: minmax(0, 1fr); }
}