/* ============================================================================
   Internship Program Builder — application layer.
   Everything here references tokens from brand.css. No hardcoded hex values.
   ========================================================================= */

.skip {
  position: absolute; left: -9999px;
  background: var(--action); color: var(--action-text);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius); z-index: 20;
}
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* ---- Header --------------------------------------------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.site-header__inner {
  max-width: var(--container); margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-5);
}
@media (min-width: 768px) { .site-header__inner { padding-inline: var(--space-6); } }
.site-header .logo img { width: 148px; }
@media (min-width: 768px) { .site-header .logo img { width: 178px; } }

.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-left: auto; }
.site-nav .nav-link {
  color: var(--text-muted); text-decoration: none;
  padding: var(--space-2) 0; border-bottom: 2px solid transparent;
  min-height: 44px; display: inline-flex; align-items: center;
}
.site-nav .nav-link:hover { color: var(--text-strong); }
.site-nav .nav-link.is-current {
  color: var(--text-strong); border-bottom-color: var(--brand-teal);
}

/* ---- Shell: step rail + main --------------------------------------------- */
.shell {
  max-width: var(--container); margin-inline: auto;
  padding: 0 var(--space-4) var(--space-9);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5);
}
@media (min-width: 768px) { .shell { padding-inline: var(--space-6); } }
@media (min-width: 1024px) {
  .shell { grid-template-columns: 224px minmax(0, 1fr); gap: var(--space-6); }
}
/* Three columns once there is room: steps, the form, and the document the form
   is producing. Watching the Manual grow while you answer IS the product. */
@media (min-width: 1280px) {
  .shell--three { grid-template-columns: 212px minmax(0, 1fr) 380px; gap: var(--space-6); }
}
@media (min-width: 1440px) {
  .shell { max-width: 1440px; }
  .shell--three { grid-template-columns: 224px minmax(0, 1fr) 420px; gap: var(--space-7); }
}
.shell__main { min-width: 0; padding-top: var(--space-6); }
.container {
  max-width: var(--container); margin-inline: auto;
  padding: var(--space-6) var(--space-4) var(--space-9);
}
@media (min-width: 768px) { .container { padding-inline: var(--space-6); } }

/* Step rail: horizontal scroller on mobile, sticky column on desktop. */
.step-rail { padding-top: var(--space-4); }
.step-rail ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: var(--space-2); overflow-x: auto;
  padding-bottom: var(--space-2);
}
@media (min-width: 1024px) {
  .step-rail {
    position: sticky; top: 76px; align-self: start;
    max-height: calc(100vh - 96px); overflow-y: auto; padding-top: var(--space-6);
  }
  .step-rail ol { flex-direction: column; gap: 1px; overflow-x: visible; }
}
.step-rail a {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius); text-decoration: none;
  color: var(--text-muted); font-size: var(--step--1); line-height: 1.3;
  white-space: nowrap; min-height: 44px;
}
@media (min-width: 1024px) { .step-rail a { white-space: normal; } }
.step-rail a:hover { background: var(--surface-2); color: var(--text-strong); }
.step-rail a.is-current { background: var(--action); color: var(--action-text); font-weight: 600; }
.step-rail a.is-current .rail-num { color: var(--action-text); border-color: currentColor; }
.step-rail .rail-num {
  font-family: var(--font-mono); font-size: 11px;
  min-width: 22px; height: 22px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.step-rail a.is-wired .rail-num { border-color: var(--brand-teal); color: var(--brand-teal); }
.step-rail a.is-current.is-wired .rail-num { color: var(--action-text); }
.step-rail .rail-title { flex: 1 1 auto; }
.step-rail .rail-done { color: var(--ok); font-size: 13px; flex: 0 0 auto; }
.step-rail__label {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); margin: 0 0 var(--space-3);
}

/* ---- Step page ------------------------------------------------------------ */
.step-head { margin-bottom: var(--space-6); }
.step-head .eyebrow { color: var(--brand-teal); margin: 0 0 var(--space-2); }
.step-head h1 { font-size: var(--step-3); margin-bottom: var(--space-3); }
.step-head .guiding { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.step-head .guiding li {
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 500;
  letter-spacing: var(--tracking-display); color: var(--text-strong);
  padding-left: var(--space-4); border-left: 3px solid var(--brand-teal);
}

.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
  margin-bottom: var(--space-5); box-shadow: var(--shadow-sm);
}
.panel > :last-child { margin-bottom: 0; }
.panel__label {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brand-teal); margin: 0 0 var(--space-3);
}
.panel--learn { background: var(--teal-050); border-color: var(--teal-100); }
:root[data-theme="dark"] .panel--learn { background: var(--surface-2); border-color: var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel--learn { background: var(--surface-2); border-color: var(--line); }
}

/* Carried-in facts: ask once, use everywhere, made visible. */
.carried { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.carried__row { display: flex; flex-direction: column; gap: 2px; }
.carried__from {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.carried__value { color: var(--text); }

/* ---- Questions ------------------------------------------------------------ */
.field { margin-bottom: var(--space-6); }
.field > label, .field__legend {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); letter-spacing: var(--tracking-display);
  color: var(--text-strong); margin: 0 0 var(--space-2); padding: 0;
}
.field .hint { display: block; color: var(--text-muted); font-size: var(--step--1); margin: 0 0 var(--space-3); max-width: var(--measure); }
.field .req { color: var(--brand-teal); font-weight: 400; }
.field fieldset { border: 0; margin: 0; padding: 0; }

.input, .textarea, select.input {
  font-family: var(--font-body); font-size: var(--step-0); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 11px 13px; width: 100%; max-width: 620px;
  min-height: 44px;
}
.textarea { min-height: 110px; resize: vertical; line-height: var(--leading-body); }
.input:focus, .textarea:focus { border-color: var(--brand-teal); }

.choices { display: grid; gap: var(--space-2); max-width: 620px; }
@media (min-width: 640px) { .choices--two { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
  cursor: pointer; min-height: 44px;
}
.choice:hover { border-color: var(--line-strong); }
.choice:has(input:checked) { border-color: var(--brand-teal); background: var(--teal-050); }
:root[data-theme="dark"] .choice:has(input:checked) { background: var(--surface-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .choice:has(input:checked) { background: var(--surface-2); }
}
.choice input { margin: 3px 0 0; accent-color: var(--brand-teal); flex: 0 0 auto; width: 18px; height: 18px; }

/* ---- Output --------------------------------------------------------------- */
.output__head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.output__head h2 { margin: 0; font-size: var(--step-2); }
.output__text {
  font-family: var(--font-body); font-size: var(--step-0);
  line-height: var(--leading-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: var(--space-4);
  width: 100%; min-height: 300px; resize: vertical; white-space: pre-wrap;
}
.output__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.output__meta { font-size: var(--step--1); color: var(--text-muted); margin-top: var(--space-3); }

/* ---- Documents ------------------------------------------------------------ */
.doc-head { margin-bottom: var(--space-6); padding-bottom: var(--space-5); border-bottom: 1px solid var(--line-strong); }
.doc-section { margin-bottom: var(--space-6); }
.doc-section h2 {
  font-size: var(--step-1); margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--line);
}
.doc-section .from-step {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 400;
  margin-left: var(--space-2);
}
.doc-body { white-space: pre-wrap; max-width: var(--measure); }
.doc-pending {
  color: var(--flag); background: var(--flag-surface);
  border: 1px dashed var(--flag-line); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); font-size: var(--step--1);
  max-width: var(--measure);
}
.doc-empty {
  border: 1px dashed var(--line-strong); border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5); text-align: center; color: var(--text-muted);
}

.progress { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.progress__bar { flex: 1 1 auto; max-width: 260px; height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; }
.progress__fill { height: 100%; background: var(--brand-teal); }
.progress__text { font-size: var(--step--1); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- Dependency map ------------------------------------------------------- */
.dep { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.dep__key { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.dep__flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--step--1); color: var(--text-muted); }
.dep__arrow { color: var(--brand-teal); }
.dep__to { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.dep__value { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }

/* ---- Notices -------------------------------------------------------------- */
.notice {
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5); border: 1px solid; font-size: var(--step-0);
  max-width: var(--measure);
}
.notice--ok { color: var(--ok); border-color: currentColor; background: var(--ok-surface); }
.notice--flag { color: var(--flag); border-color: var(--flag-line); background: var(--flag-surface); }
.notice strong { color: inherit; }


.muted { color: var(--text-muted); }
.stack-sm > * + * { margin-top: var(--space-3); }


/* ---- Live document panel -------------------------------------------------- */
.live { min-width: 0; padding-top: var(--space-6); }
@media (min-width: 1280px) {
  .live {
    position: sticky; top: 76px; align-self: start;
    max-height: calc(100vh - 96px); display: flex; flex-direction: column;
  }
}
.live__inner {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.live__head {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--line);
}
.live__label {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brand-teal); margin: 0 0 var(--space-3);
}
.live__head .progress { margin: 0; }

.live__tabs { display: flex; border-bottom: 1px solid var(--line); }
.live__tab {
  flex: 1 1 auto; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 600;
  color: var(--text-muted); padding: var(--space-3) var(--space-2);
  border-bottom: 2px solid transparent; min-height: 44px;
}
.live__tab:hover { color: var(--text-strong); }
.live__tab.is-active { color: var(--text-strong); border-bottom-color: var(--brand-teal); }

.live__doc { padding: var(--space-4); overflow-y: auto; min-height: 0; }
@media (min-width: 1280px) { .live__doc { flex: 1 1 auto; } }

.live__section { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.live__section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.live__section h3 {
  font-size: var(--step-0); font-weight: 600; margin: 0 0 var(--space-2);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
}
.live__section h3 span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); font-weight: 400; flex: 0 0 auto;
}
/* The section this step is producing, so the connection is unmissable. */
.live__section.is-current {
  background: var(--teal-050); margin-inline: calc(var(--space-3) * -1);
  padding-inline: var(--space-3); border-radius: var(--radius);
  border-bottom-color: transparent;
}
:root[data-theme="dark"] .live__section.is-current { background: var(--surface-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .live__section.is-current { background: var(--surface-2); }
}
.live__section.is-current h3 { color: var(--brand-teal); }
:root[data-theme="dark"] .live__section.is-current h3 { color: var(--teal-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .live__section.is-current h3 { color: var(--teal-300); }
}
.live__body {
  white-space: pre-wrap; font-size: var(--step--1);
  line-height: var(--leading-snug); color: var(--text-muted);
}
.live__pending {
  font-size: var(--step--1); color: var(--flag);
  background: var(--flag-surface); border: 1px dashed var(--flag-line);
  border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin: 0;
}
.live__empty {
  font-size: var(--step--1); color: var(--text-muted); margin: 0;
  padding: var(--space-5) var(--space-3); text-align: center;
}
.live__open {
  display: block; padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--line); font-size: var(--step--1); font-weight: 600;
  text-decoration: none; color: var(--link); flex: 0 0 auto;
}
.live__open:hover { background: var(--surface-2); }

/* ---- Documents: contents rail beside the body ----------------------------- */
.doc-shell {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6);
}
@media (min-width: 1024px) {
  .doc-shell { grid-template-columns: 232px minmax(0, 1fr); gap: var(--space-7); }
}
.doc-contents { min-width: 0; }
@media (min-width: 1024px) {
  .doc-contents {
    position: sticky; top: 76px; align-self: start;
    max-height: calc(100vh - 96px); overflow-y: auto;
  }
}
.doc-contents ol { list-style: none; margin: 0; padding: 0; }
.doc-contents li + li { margin-top: 1px; }
.doc-contents a {
  display: flex; gap: var(--space-2); align-items: baseline;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  text-decoration: none; color: var(--text-muted); font-size: var(--step--1);
  line-height: 1.3; border-left: 2px solid transparent;
}
.doc-contents a:hover { background: var(--surface-2); color: var(--text-strong); }
.doc-contents a .n {
  font-family: var(--font-mono); font-size: 10px; color: var(--brand-teal); flex: 0 0 auto;
}
.doc-meta {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--space-4); margin-bottom: var(--space-4);
}
.doc-meta dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.doc-meta dd { margin: 0 0 var(--space-3); font-size: var(--step--1); color: var(--text); }
.doc-meta dd:last-child { margin-bottom: 0; }

/* Two-up question rows for short fields, so the form is never a lazy stack. */
.field-row { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .field-row--3 { grid-template-columns: repeat(3, 1fr); } }
.field-row .field { margin-bottom: 0; }
/* A half-width label must not wrap to three lines; step down the scale. */
.field-row--2 .field > label,
.field-row--2 .field .field__legend { font-size: var(--step-0); }
.field-row--3 .field > label { font-size: var(--step-0); }
/* Paired fields have hints of different lengths, so bottom-align the controls
   or the inputs sit at two different heights and the row looks broken. */
.field-row--2 .field, .field-row--3 .field { display: flex; flex-direction: column; }
.field-row--2 .field .input,
.field-row--2 .field .choices,
.field-row--3 .field .input { margin-top: auto; }
.field-row--2 .field .hint { margin-bottom: var(--space-3); }

.doc-body-col { min-width: 0; }
.doc-section { scroll-margin-top: 90px; }


/* ============================================================================
   HOME
   The home page carries the whole pitch, so it is full-bleed and image-led
   rather than a form on a grey field. Every colour is a brand token.
   ========================================================================= */
.is-home main.container { max-width: none; padding: 0; }
.home-section { padding-block: clamp(var(--space-7), 7vw, var(--space-9)); }

.section-head { max-width: 62ch; margin-bottom: var(--space-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--step-3); margin-bottom: var(--space-3); }
.section-head__lede { font-size: var(--step-1); color: var(--text-muted); margin: 0; }
.section-head .eyebrow { color: var(--brand-teal); margin: 0 0 var(--space-2); }

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  background: var(--surface-inv);
  color: #fff;
  padding-block: clamp(var(--space-7), 7vw, var(--space-9));
  overflow: hidden;
}
.hero__inner {
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--space-4);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7);
  align-items: center;
}
@media (min-width: 768px) { .hero__inner { padding-inline: var(--space-6); } }
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-8); }
}
.hero__eyebrow {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--teal-300); margin: 0 0 var(--space-4);
}
.hero h1 {
  color: #fff; font-size: clamp(2.2rem, 5.2vw, 3.5rem);
  line-height: 1.06; margin: 0 0 var(--space-5); max-width: 15ch;
}
.hero__lede { font-size: var(--step-1); color: var(--navy-100); max-width: 46ch; margin: 0 0 var(--space-4); }
.hero__note { color: var(--teal-300); font-size: var(--step-0); margin: 0 0 var(--space-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__resume { margin: var(--space-5) 0 0; color: var(--navy-100); font-size: var(--step--1); }
.hero__resume a { color: var(--teal-300); }

.btn-lg { padding: 15px 32px; font-size: var(--step-0); }
.btn-onDark { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-onDark:hover { border-color: var(--teal-300); color: var(--teal-300); }
/* On a navy ground the navy primary button disappears. Any dark band gets the
   teal button instead, which is the graphic use teal is for. */
.hero .btn-primary,
.build .btn-primary,
.band-navy .btn-primary { background: var(--brand-teal); color: #fff; border-color: var(--brand-teal); }
.hero .btn-primary:hover,
.build .btn-primary:hover,
.band-navy .btn-primary:hover { background: var(--teal-300); color: var(--navy-800); border-color: var(--teal-300); }

/* Photo with the real product card overlapping one corner of it. The photo is
   the subject; the card is proof, so the card must not eat the picture. */
.hero__proof { position: relative; padding-bottom: clamp(56px, 9vw, 96px); }
.hero__photo {
  width: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 40%;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.7);
}
@media (min-width: 1000px) { .hero__photo { aspect-ratio: 5 / 4; } }
.proofcard {
  position: absolute; left: 0; bottom: 0;
  width: min(320px, 76%);
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
}
@media (min-width: 1000px) {
  .proofcard { left: clamp(-56px, -4vw, -24px); width: min(340px, 62%); }
}
/* Only the first section fits in the card at this size; the rest is noise. */
.proofcard__section:nth-child(n+3) { display: none; }
.proofcard__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.proofcard__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.proofcard__title {
  margin-left: var(--space-2); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .05em; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proofcard__body { padding: var(--space-4); }
.proofcard__section + .proofcard__section { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.proofcard__section h3 { font-size: var(--step-0); margin: 0 0 4px; }
.proofcard__section p {
  margin: 0; font-size: var(--step--1); color: var(--text-muted);
  line-height: var(--leading-snug);
}
.proofcard__foot {
  padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line);
  background: var(--surface-2); font-size: 11px; color: var(--text-muted);
}

/* ---- Lifecycle ----------------------------------------------------------- */
.lifecycle { padding-block: clamp(var(--space-7), 7vw, var(--space-9)); background: var(--ground); }
.steps-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.steps-grid__item a {
  display: flex; align-items: flex-start; gap: var(--space-3);
  height: 100%; padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); text-decoration: none;
  color: var(--text-strong); transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.steps-grid__item a:hover { border-color: var(--brand-teal); transform: translateY(-2px); }
.steps-grid__n {
  font-family: var(--font-mono); font-size: 12px; flex: 0 0 auto;
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong); color: var(--text-muted);
}
.steps-grid__item.is-wired .steps-grid__n {
  background: var(--brand-teal); border-color: var(--brand-teal); color: #fff;
}
.steps-grid__t { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); line-height: 1.25; }

/* ---- Statement band ------------------------------------------------------ */
.statement { position: relative; isolation: isolate; padding-block: clamp(var(--space-8), 10vw, 128px); }
.statement__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
/* The photo is texture behind a statement, not a portrait. Keep the scrim
   heavy and on one hue so nobody in frame gets tinted an odd colour. */
.statement__img { filter: grayscale(.35); }
.statement__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(17,31,62,.97) 0%, rgba(17,31,62,.9) 52%, rgba(17,31,62,.78) 100%),
    linear-gradient(0deg, rgba(10,147,150,.22), rgba(10,147,150,.22));
}
.statement__inner { color: #fff; }
.statement__eyebrow {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--teal-300); margin: 0 0 var(--space-3);
}
.statement__line {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.06;
  letter-spacing: var(--tracking-display); color: #fff; margin: 0 0 var(--space-5);
}
.statement__sub { color: #fff; opacity: .92; max-width: 52ch; font-size: var(--step-1); margin: 0; }

/* ---- Pillars ------------------------------------------------------------- */
.pillars { padding-block: clamp(var(--space-7), 6vw, var(--space-8)); background: var(--surface); }
.pillars__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .pillars__grid { grid-template-columns: repeat(3, 1fr); } }
.pillar { padding-top: var(--space-4); border-top: 3px solid var(--brand-teal); }
.pillar h3 { font-size: var(--step-1); margin: 0 0 var(--space-2); }
.pillar p { color: var(--text-muted); margin: 0; }

/* ---- Deliverables -------------------------------------------------------- */
.deliverables { padding-block: clamp(var(--space-7), 7vw, var(--space-9)); background: var(--ground); }
.deliverables__lead { margin-bottom: var(--space-6); }
.deliverables__lead img {
  width: 100%; height: clamp(180px, 26vw, 300px); object-fit: cover;
  border-radius: var(--radius-lg); display: block;
}
.deliverables__grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .deliverables__grid { grid-template-columns: repeat(3, 1fr); } }
.deliverable {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.deliverable__for {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-teal); margin: 0 0 var(--space-2);
}
.deliverable h3 { font-size: var(--step-1); margin: 0 0 var(--space-3); }
.deliverable p { color: var(--text-muted); margin: 0; font-size: var(--step--1); }

/* ---- Build --------------------------------------------------------------- */
.build { padding-block: clamp(var(--space-7), 7vw, var(--space-9)); background: var(--surface-inv); }
.build__inner {
  display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start;
}
@media (min-width: 900px) {
  .build__inner { grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); gap: var(--space-8); }
}
.build__words .eyebrow { color: var(--teal-300); margin: 0 0 var(--space-2); }
.build__words h2 { color: #fff; font-size: var(--step-3); margin-bottom: var(--space-3); }
.build__words p { color: var(--navy-100); max-width: 44ch; }
.build__alt a { color: var(--teal-300); }
.build__form {
  background: var(--surface); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-lg);
}
.build__form .field { margin-bottom: var(--space-5); }
.build__form .field > label { font-size: var(--step-0); }
.build__form .input { max-width: none; }

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

/* ============================================================================
   ROADMAP
   A spine with one marker per phase. State is carried by the marker and a
   badge, not by colour alone, so it survives a greyscale print.
   ========================================================================= */
.hero--slim { padding-block: clamp(var(--space-7), 6vw, var(--space-8)); }
.hero__inner--single { grid-template-columns: minmax(0, 1fr) !important; }
.hero--slim h1 { max-width: 18ch; }

.roadmap { padding-block: clamp(var(--space-7), 7vw, var(--space-9)); background: var(--ground); }
.rm { list-style: none; margin: 0; padding: 0; position: relative; }

.rm__phase {
  position: relative;
  display: grid; grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-7);
}
@media (min-width: 768px) { .rm__phase { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-5); } }

/* The spine, drawn per phase so it stops cleanly at the last one. */
.rm__marker { position: relative; display: flex; justify-content: center; }
.rm__marker::before {
  content: ""; position: absolute; top: 22px; bottom: calc(var(--space-7) * -1);
  width: 2px; background: var(--line-strong);
}
.rm__phase:last-child .rm__marker::before { display: none; }
.rm__dot {
  position: relative; z-index: 1;
  width: 18px; height: 18px; margin-top: 4px; border-radius: 50%;
  background: var(--ground); border: 3px solid var(--line-strong);
}
.rm__phase--done .rm__dot { background: var(--brand-teal); border-color: var(--brand-teal); }
.rm__phase--done .rm__marker::before { background: var(--brand-teal); }
.rm__phase--next .rm__dot { border-color: var(--brand-navy); }
.rm__phase--pilot .rm__dot { border-color: var(--flag); background: var(--flag-surface); }

.rm__body {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.rm__phase--done .rm__body { border-color: var(--teal-100); }
:root[data-theme="dark"] .rm__phase--done .rm__body { border-color: var(--line-strong); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rm__phase--done .rm__body { border-color: var(--line-strong); }
}

.rm__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.rm__when {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.rm__badge {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); color: var(--text-muted);
}
.rm__phase--done  .rm__badge { background: var(--brand-teal); border-color: var(--brand-teal); color: #fff; }
.rm__phase--next  .rm__badge { border-color: var(--brand-navy); color: var(--text-strong); }
:root[data-theme="dark"] .rm__phase--next .rm__badge { border-color: var(--navy-300); color: var(--navy-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rm__phase--next .rm__badge { border-color: var(--navy-300); color: var(--navy-300); }
}
.rm__phase--pilot .rm__badge { border-color: var(--flag-line); color: var(--flag); background: var(--flag-surface); }

.rm__body h2 { font-size: var(--step-2); margin: 0 0 var(--space-2); }
.rm__lede { color: var(--text-muted); margin: 0 0 var(--space-4); max-width: 56ch; }

.rm__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
@media (min-width: 900px) { .rm__items { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-5); } }
.rm__items li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--space-2);
  margin: 0; font-size: var(--step--1); color: var(--text-muted); line-height: 1.4;
}
.rm__items li.is-done { color: var(--text); }
.rm__tick { color: var(--line-strong); font-size: 13px; line-height: 1.5; text-align: center; }
.rm__items li.is-done .rm__tick { color: var(--brand-teal); font-weight: 700; }

/* ---- Out of scope --------------------------------------------------------- */
.rm-scope { padding-block: clamp(var(--space-7), 6vw, var(--space-8)); background: var(--surface); }
.rm-scope__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 800px) { .rm-scope__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); } }
.rm-scope h2 { font-size: var(--step-2); margin: 0 0 var(--space-3); }
.rm-scope .eyebrow { color: var(--brand-teal); margin: 0 0 var(--space-2); }
.rm-scope__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rm-scope__list li {
  margin: 0; padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  color: var(--text-muted); font-size: var(--step--1);
}
.build__inner--single { grid-template-columns: minmax(0, 1fr) !important; }

/* ============================================================================
   FOOTER
   A navy band, which is where the reversed lockup belongs. Four link columns
   plus the brand, then a quiet bottom bar carrying the lifecycle line.
   ========================================================================= */
.site-footer {
  /* Deeper than the navy sections above it, plus a brand rule on top, so the
     footer reads as a distinct band rather than merging into a navy section. */
  background: var(--surface-foot);
  border-top: 3px solid var(--brand-teal);
  color: var(--navy-100);
  padding-block: clamp(var(--space-7), 6vw, var(--space-8)) var(--space-5);
  margin-top: var(--space-8);
  font-size: var(--step--1);
}
.is-home .site-footer { margin-top: 0; }

.site-footer__top {
  display: grid; gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
@media (min-width: 720px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-7); }
}
@media (min-width: 1100px) {
  .site-footer__top { grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: var(--space-8); }
}

.site-footer__logo { width: 190px; height: auto; display: block; margin-bottom: var(--space-4); }
.site-footer__line {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-1); letter-spacing: var(--tracking-display);
  color: #fff; margin: 0 0 var(--space-3); max-width: 18ch;
}
.site-footer__blurb { color: var(--navy-100); opacity: .85; margin: 0; max-width: 40ch; }

.site-footer__nav {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .site-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.site-footer__col h2 {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--teal-300); margin: 0 0 var(--space-3);
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col li { margin: 0; }
.site-footer__col a {
  display: block; padding: 7px 0; color: var(--navy-100);
  text-decoration: none; line-height: 1.35;
}
.site-footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-5);
}
.site-footer__bottom p { margin: 0; color: var(--navy-100); opacity: .75; max-width: none; }
.site-footer__note {
  margin-left: auto !important;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-300) !important; opacity: 1 !important;
}
.site-footer a:focus-visible { outline-color: var(--teal-300); }