/* ==========================================================================
   Propvizer — site stylesheet
   Brand: C3 (navy + forest + mint), per SOT → Branding → brand-identity.html
          v2.0, 2026-08-15. Supersedes the blue-and-beige system.

   The three rules that shape everything below:
     1. Forest never sits on navy (1.91:1). Separate them with white or hairline.
     2. Mint is a fill color, never a text color on a light surface.
     3. The connective accent splits by surface: forest on light, mint on navy.
   ========================================================================== */

:root {
  /* Bases */
  --navy: #0A2540;          /* primary brand, dark surface */
  --navy-hover: #06192C;
  --forest: #165A47;        /* action: links, CTA, rules */
  --forest-hover: #0F4234;
  --green-mid: #2E8C6E;     /* charts only */

  /* Mints */
  --mint: #6FD3B0;          /* accent ON navy; fill only on light */
  --mint-pale: #B7E4D2;
  --mint-surf: #E7F4EF;     /* alternating band */
  --mint-surf-2: #CFE7DD;
  --hairline: #CFE0D8;

  /* Ink */
  --ink: #0A2540;           /* headings */
  --body: #44607D;          /* body on white */
  --body-green: #38564D;    /* body on mint surfaces */
  --on-dark-soft: #A6BBD1;  /* secondary text on navy */
  --white: #FFFFFF;

  /* Semantic */
  --success: #1E7A4F;
  --warning: #8A5200;
  --error: #B3261E;

  /* System */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max-width: 1160px;
  --gutter: 24px;
  --radius: 8px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { color: var(--ink); }
a { color: var(--forest); }
::selection { background: var(--mint-surf-2); color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 2px;
}
/* Focus on dark surfaces flips to mint; the ring is never removed. */
.band--navy a:focus-visible, .band--navy button:focus-visible,
.band--cta a:focus-visible, .band--cta button:focus-visible,
.site-header a:focus-visible, .site-header button:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--mint);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--white); color: var(--forest);
  padding: 10px 16px; border-radius: var(--radius); font-weight: 700;
  transition: top 0.15s;
}
.skip-link:focus { top: 8px; }

/* ---- Grid container ---- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---- Type scale (capped per brand spec) ---- */
.hero-title { font-size: 44px; font-weight: 700; line-height: 1.15; }
.hero-wordmark { font-size: 80px; font-weight: 700; line-height: 1.05; letter-spacing: -0.018em; }
h2, .section-title { font-size: 30px; font-weight: 700; line-height: 1.25; }
h3, .card-title { font-size: 19px; font-weight: 700; line-height: 1.35; }
.lead { font-size: 18px; }
.caption { font-size: 14px; color: var(--body); }
.band--mint .caption { color: var(--body-green); }
.band--navy .caption, .band--cta .caption { color: var(--on-dark-soft); }

@media (max-width: 720px) {
  .hero-title { font-size: 32px; }
  .hero-wordmark { font-size: 48px; }
  h2, .section-title { font-size: 26px; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s;
}
/* Primary on navy or forest */
.btn--pill {
  background: var(--white);
  color: var(--forest);
  border-radius: 999px;
  padding: 14px 32px;
}
.btn--pill:hover { background: var(--mint-surf-2); }
/* Primary on light */
.btn--solid {
  background: var(--forest);
  color: var(--white);
  border-radius: var(--radius);
  padding: 14px 32px;
}
.btn--solid:hover { background: var(--forest-hover); }
/* Secondary on dark */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--mint-pale);
  border-radius: 999px;
  padding: 12px 30px;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }

/* Text link with chevron */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--forest);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.link-more:hover { text-decoration: underline; }
.link-more .chev { width: 9px; height: 17px; fill: var(--forest); }

/* Brand chevron glyph: forest on light, mint on navy. */
.chev { display: inline-block; flex: none; fill: var(--forest); }
.band--navy .chev, .band--cta .chev { fill: var(--mint); }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
}
/* On navy the mark is mint and the name is white. Splitting them is what
   keeps the mark readable at 34px; sharing one color loses it. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--white);
  text-decoration: none;
}
/* Larger than the old lockup: the team flagged that the mark is hard to make
   out, and size is the half of that color can help with. */
.brand .logo-mark { width: 38px; height: 46px; fill: var(--mint); }
.brand .brand-name { font-size: 20px; font-weight: 700; letter-spacing: 0.01em; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--on-dark-soft);
  text-decoration: none;
  font-size: 16px;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--white); border-bottom-color: var(--mint); }
.site-nav a[aria-current="page"] {
  color: var(--white);
  font-weight: 700;
  border-bottom-color: var(--mint);
}

/* Apply — a button in the nav, not another text link. Overrides the
   underline treatment above, including the current-page state. */
.site-nav a.nav-cta,
.site-nav a.nav-cta[aria-current="page"] {
  background: var(--white);
  color: var(--forest);
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 8px 20px;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.site-nav a.nav-cta:hover { background: var(--mint-surf-2); color: var(--forest); }
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.nav-toggle .bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--mint);
  margin: 5px 0;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: fixed;
    inset: 70px 0 0 0;
    background: var(--navy);
    padding: 32px var(--gutter);
    overflow-y: auto;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-nav a { font-size: 22px; padding: 10px 0; }
}

/* ---- Bands (sections) ---- */
.band { padding: 64px 0; }
.band--mint { background: var(--mint-surf); color: var(--body-green); }
.band--navy { background: var(--navy); color: var(--white); }
/* Forest covers a large area in exactly one place: the conversion moment. */
.band--cta { background: var(--forest); color: var(--white); padding: 50px 0; }
.band--hero { position: relative; overflow: hidden; padding: 88px 0 96px; }
@media (max-width: 720px) {
  .band { padding: 44px 0; }
  .band--hero { padding: 52px 0 56px; }
}

.band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4,
.band--cta h1, .band--cta h2, .band--cta h3, .band--cta h4 { color: var(--white); }
.band--navy p, .band--cta p { color: var(--white); }
/* Text links only. Buttons carry their own foreground, and a blanket `a` rule
   here would out-rank .btn--pill and erase its forest label. */
.band--navy a:not(.btn), .band--cta a:not(.btn) { color: var(--white); }

.section-title { color: var(--ink); margin-bottom: 16px; }
.section-intro { max-width: 720px; margin-bottom: 40px; }

/* Watermark cube-stack behind navy bands */
.watermark {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  height: 460px;
  fill: var(--mint);
  opacity: 0.10;
  pointer-events: none;
}
@media (max-width: 860px) { .watermark { display: none; } }

/* Hero */
.hero-kicker { color: var(--on-dark-soft); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
/* Mint bar under the wordmark: the accent's first appearance on the page. */
.hero-rule { width: 96px; height: 4px; background: var(--mint); margin: 0 0 28px; border: 0; }
.band--hero .hero-wordmark { color: var(--white); margin-bottom: 12px; }
.band--hero .hero-title { color: var(--white); margin-bottom: 20px; }
.band--hero .lead { max-width: 640px; color: var(--on-dark-soft); }

/* CTA band */
.cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cta-row h2 { font-size: 26px; color: var(--white); }

/* ---- Cards ---- */
/* The 3px forest top border is what carries the brand at card scale. */
.card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--forest);
  border-radius: var(--radius);
  padding: 30px 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(10, 37, 64, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}
.card h3 { color: var(--ink); margin-bottom: 10px; }
.card--mint { background: var(--mint-surf-2); color: var(--body-green); }
/* Forest on navy is forbidden, so the navy card's top border is mint. */
.card--navy {
  background: var(--navy);
  border-color: var(--navy);
  border-top-color: var(--mint);
  color: var(--white);
}
.card--navy h3 { color: var(--white); }
.card--navy p { color: var(--white); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 860px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Stat cards */
.stat-number { font-size: 44px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.band--navy .stat-number, .band--cta .stat-number { color: var(--mint); }
.stat-label { margin-top: 6px; }

/* Team */
.team-card { text-align: left; }
.team-head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.team-head img {
  width: 108px;
  height: 108px;
  flex: none;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: center 22%;
}
.team-card h3 { margin-bottom: 2px; }
.team-card .role { color: var(--forest); margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.team-card > p { font-size: 15px; }
.team-card .li-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; text-decoration: none; color: var(--forest); font-size: 15px;
}
.team-card .li-link:hover { text-decoration: underline; }
.team-card .li-icon { width: 18px; height: 18px; fill: var(--forest); }
@media (max-width: 480px) {
  .team-head { flex-direction: column; align-items: flex-start; }
}

/* Case study cards */
.case-card { display: flex; flex-direction: column; }
.case-card .case-art {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
  background: var(--mint-surf-2);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
/* Logo shows only as a fallback: cards with no image, or an image that fails to load (onerror adds .is-broken). */
.case-card .case-art svg { width: 96px; height: 118px; fill: var(--forest); opacity: 0.9; display: none; }
.case-card .case-art.is-broken svg { display: block; }
.case-card .case-art.is-broken img { display: none; }
.case-card .case-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-card p { flex: 1; }
.case-card .link-more { margin-top: 16px; }

/* ---- Photo figures ----
   Same treatment as .case-art (mint backing, brand radius, cover fit) so
   photography reads as part of the card system rather than a separate layer.
   One frame ratio everywhere, matched by the source files, so nothing is cropped
   at render time and every lead band on the site sizes identically. */
.figure { margin: 0; }
.figure-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--mint-surf-2);
  aspect-ratio: 17 / 10;
}
.figure-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.figure figcaption {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 3px solid var(--forest);
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
  max-width: 64ch;
}
.band--mint .figure figcaption { color: var(--body-green); }

/* Copy and image side by side. Every page's lead band uses this, so photography
   is part of the band's composition rather than something appended to it. */
.media-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 860px) {
  .media-split { grid-template-columns: 1fr; gap: 32px; }
}

/* ==========================================================================
   Charts & diagrams — flat 2-D, brand colors only
   ========================================================================== */

.chart-caption {
  margin-top: 16px;
  font-size: 14px;
  color: var(--body);
  text-align: center;
}
.band--mint .chart-caption { color: var(--body-green); }

/* ---- Chart A ---- */
.chart-a { margin-top: 8px; }
.chart-a-flow {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  align-items: stretch;
  gap: 0;
}
.chart-a-block { padding: 28px; border-radius: var(--radius); }
.chart-a-block .kicker { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
.chart-a-block h3 { margin-bottom: 10px; }
.chart-a-block--mint { background: var(--mint-surf-2); color: var(--body-green); }
.chart-a-block--mint h3 { color: var(--ink); }
.chart-a-block--mint .kicker { color: var(--forest); }
.chart-a-block--navy { background: var(--navy); color: var(--white); }
.chart-a-block--navy h3 { color: var(--white); }
.chart-a-block--navy .kicker { color: var(--mint); }
.chart-a-block p { font-size: 15px; line-height: 1.55; }
.chart-a-connector {
  display: flex; align-items: center; justify-content: center;
}
.chart-a-connector .chev { width: 14px; height: 27px; }
.chart-a-bracket {
  margin-top: 28px;
  border: 2px solid var(--forest);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  height: 18px;
}
.chart-a-bracket-label {
  text-align: center;
  margin-top: 14px;
  font-weight: 700;
  color: var(--ink);
}
@media (max-width: 860px) {
  .chart-a-flow { grid-template-columns: 1fr; }
  .chart-a-connector { padding: 6px 0; }
  .chart-a-connector .chev { transform: rotate(90deg); }
  .chart-a-bracket { display: none; }
}

/* ---- Chart F: three steps ---- */
.chart-f {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  gap: 0;
  align-items: start;
}
.chart-f-step { text-align: center; padding: 0 12px; }
.chart-f-num {
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-f-step h3 { color: var(--ink); margin-bottom: 8px; }
.chart-f-step p { font-size: 15px; text-align: left; }
.chart-f-connector {
  display: flex; justify-content: center;
  padding-top: 24px;
}
.chart-f-connector .chev { width: 12px; height: 23px; }
@media (max-width: 720px) {
  .chart-f { grid-template-columns: 1fr; }
  .chart-f-connector { padding: 10px 0; }
  .chart-f-connector .chev { transform: rotate(90deg); }
}

/* ---- Step cards: three-step process as cards ---- */
.step-cards {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  gap: 0;
  align-items: stretch;
}
.step-card { text-align: center; }
.step-card .chart-f-num {
  width: 64px;
  height: 64px;
  font-size: 21px;
  margin-bottom: 18px;
}
.step-card h3 { color: var(--ink); margin-bottom: 10px; }
.step-card p { font-size: 15px; }
.step-connector { display: flex; align-items: center; justify-content: center; }
.step-connector .chev { width: 12px; height: 23px; }
@media (max-width: 720px) {
  .step-cards { grid-template-columns: 1fr; }
  .step-connector { padding: 10px 0; }
  .step-connector .chev { transform: rotate(90deg); }
}

/* ---- Portfolio funnel ----
   An ordered narrowing, so it runs the sequential ramp light to dark and ends
   on navy. Every stage clears 4.5:1; green-mid is skipped because white on it
   reaches only 4.12:1. */
.funnel {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.funnel-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 2px;
  font-size: 16px;
  padding: 18px 12%;
  margin-bottom: 5px;
}
.funnel-stage strong { font-size: 17px; }
.funnel-count { font-size: 14px; }
/* Tapered sides: each stage's bottom edge meets the top of the next */
.funnel-stage:nth-child(1) {
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 87.5% 100%, 12.5% 100%);
  border-radius: 8px 8px 0 0;
  /* Ramp step 2, not step 1: mint surface 2 sits only 1.09:1 off the mint band
     it lands on, which erases the widest stage of the funnel. */
  background: var(--mint-pale);
  color: var(--ink);
}
.funnel-stage:nth-child(1) strong { color: var(--ink); }
.funnel-stage:nth-child(2) {
  width: 75%;
  clip-path: polygon(0.5% 0, 99.5% 0, 84% 100%, 16% 100%);
  background: var(--mint);
  color: var(--ink);
}
.funnel-stage:nth-child(3) {
  width: 51%;
  clip-path: polygon(1% 0, 99% 0, 76.5% 100%, 23.5% 100%);
  background: var(--forest);
  color: var(--white);
}
.funnel-stage:nth-child(3) strong, .funnel-stage:nth-child(3) .funnel-count { color: var(--white); }
.funnel-drop {
  padding: 6px 0 10px;
  line-height: 0;
}
.funnel-drop .chev {
  width: 12px;
  height: 23px;
  transform: rotate(90deg);
}
.funnel-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  background: var(--navy);
  color: var(--white);
  border-radius: 999px;
  padding: 16px 40px;
  min-width: 27%;
}
.funnel-result strong { font-size: 17px; color: var(--mint); }
.funnel-result .funnel-count { color: var(--white); }
@media (max-width: 720px) {
  .funnel-stage { padding: 14px 16%; font-size: 15px; }
  .funnel-stage strong, .funnel-result strong { font-size: 15px; }
  .funnel-stage:nth-child(2) { width: 80%; clip-path: polygon(0.5% 0, 99.5% 0, 84% 100%, 16% 100%); }
  .funnel-stage:nth-child(3) { width: 58%; clip-path: polygon(1% 0, 99% 0, 78% 100%, 22% 100%); }
}

/* ---- Chart D: ground lease flow ---- */
.chart-d {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 300px) 1fr;
  gap: 0;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}
.chart-d-party {
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  font-weight: 700;
}
.chart-d-party--gov { background: var(--navy); color: var(--white); }
.chart-d-party--gov span { display: block; font-weight: 400; color: var(--on-dark-soft); font-size: 15px; margin-top: 6px; }
.chart-d-party--dev { background: var(--mint-surf-2); color: var(--ink); }
.chart-d-party--dev span { display: block; font-weight: 400; color: var(--body-green); font-size: 15px; margin-top: 6px; }
.chart-d-arrows { padding: 0 18px; }
.chart-d-arrow { text-align: center; font-size: 14px; font-weight: 700; color: var(--body); }
.chart-d-arrow svg { width: 100%; height: 24px; display: block; }
.chart-d-arrow + .chart-d-arrow { margin-top: 22px; }
.chart-d-note { text-align: center; margin-top: 24px; font-size: 14px; color: var(--body); }
@media (max-width: 720px) {
  .chart-d { grid-template-columns: 1fr; }
  .chart-d-arrows { padding: 20px 0; max-width: 260px; margin: 0 auto; }
}

/* ---- Chart B: lifecycle loop ---- */
.chart-b {
  display: grid;
  grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr;
  gap: 0;
  align-items: stretch;
}
.chart-b-node {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
}
.chart-b-node .node-icon { width: 44px; height: 44px; margin: 0 auto 12px; display: block; }
.chart-b-node .node-icon * { stroke: var(--mint); }
.chart-b-node h4 { color: var(--white); font-size: 17px; line-height: 1.35; margin-bottom: 6px; }
.chart-b-node p { font-size: 14px; line-height: 1.5; color: var(--white); }
.chart-b-connector { display: flex; align-items: center; justify-content: center; }
.chart-b-connector .chev { width: 11px; height: 21px; }
.chart-b-return {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  color: var(--body);
  font-size: 14px;
  font-weight: 700;
}
.chart-b-return svg { width: 130px; height: 16px; flex: none; }
@media (max-width: 860px) {
  .chart-b { grid-template-columns: 1fr; }
  .chart-b-connector { padding: 8px 0; }
  .chart-b-connector .chev { transform: rotate(90deg); }
}
@media (min-width: 861px) {
  /* Reserve two lines for every node heading so the body copy starts on the
     same baseline across the row, even when one heading wraps. */
  .chart-b-node h4 { min-height: 2.7em; }
}

/* ---- Chart E: four asset cards ---- */
.chart-e {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}
.chart-e-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--forest);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  transition: background-color 0.15s;
}
.chart-e-card:hover { background: var(--mint-surf); }
.chart-e-card .asset-icon { width: 46px; height: 46px; flex: none; }
.chart-e-card .asset-icon * { stroke: var(--forest); }
.chart-e-card h3 { margin-bottom: 6px; }
.chart-e-card p { font-size: 15px; }
@media (max-width: 720px) { .chart-e { grid-template-columns: 1fr; } }

/* ==========================================================================
   Services timeline — six steps on one literal through-line
   ========================================================================== */
.svc-line {
  position: relative;
  list-style: none;
  max-width: 960px;
  margin: 40px auto 0;
  padding: 8px 0 0;
}
.svc-line::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 12px;
  width: 3px;
  transform: translateX(-50%);
  background: var(--forest);
  border-radius: 2px;
}
.svc-step {
  position: relative;
  width: calc(50% - 56px);
  margin-bottom: 28px;
}
.svc-step:nth-child(odd) { margin-right: auto; }
.svc-step:nth-child(even) { margin-left: auto; margin-top: -64px; }
.svc-step:last-child { margin-bottom: 0; }
/* The white ring is structural: it keeps the navy disc off the forest line,
   which would otherwise be a 1.91:1 edge. */
.svc-num {
  position: absolute;
  top: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: 19px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid var(--white);
  z-index: 1;
}
.svc-step:nth-child(odd) .svc-num { right: -82px; }
.svc-step:nth-child(even) .svc-num { left: -82px; }
.svc-card {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--forest);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
}
.svc-card h3 { color: var(--ink); margin-bottom: 8px; }
.svc-card p { font-size: 15px; }
@media (max-width: 860px) {
  .svc-line::before { left: 26px; transform: none; }
  .svc-step,
  .svc-step:nth-child(even) {
    width: auto;
    margin: 0 0 20px;
    padding-left: 76px;
  }
  .svc-step:nth-child(odd) .svc-num,
  .svc-step:nth-child(even) .svc-num { left: 0; right: auto; }
  .svc-step:last-child { margin-bottom: 0; }
}

/* ==========================================================================
   Page-specific pieces
   ========================================================================== */

/* Two-column problem/approach */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

/* Interactive program-locations map */
.pa2w-map {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--hairline);
  /* Matches the panel so fractional column widths can't reveal a hairline
     of container background at the edges. */
  background: var(--white);
  position: relative;
  isolation: isolate; /* keep Leaflet's z-indexed panes below the sticky header */
}
.pa2w-map-canvas {
  min-height: 500px;
  background: var(--mint-surf-2);
}
/* The basemap is standard OpenStreetMap, which needs no API key but ships in full
   color. Desaturating and lightening the tile pane alone gives the quiet canvas the
   navy and forest markers need to read against, and because the filter is scoped to
   the tile pane, the markers, tooltips, attribution, and zoom controls above it keep
   their brand color. */
.pa2w-map-canvas .leaflet-tile-pane {
  filter: grayscale(1) contrast(0.82) brightness(1.12);
}
.pa2w-panel {
  background: var(--white);
  padding: 28px;
  border-left: 1px solid var(--hairline);
}
.pa2w-panel-tag {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--body);
}
.pa2w-panel h3 { color: var(--ink); margin: 6px 0 10px; font-size: 22px; }
.pa2w-panel-body { font-size: 15px; }
.pa2w-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 0 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--hairline);
}
.pa2w-chips button {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.pa2w-chips button:hover { background: var(--mint-surf-2); border-color: var(--forest); }
.pa2w-chips button[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
@media (max-width: 860px) {
  .pa2w-map { grid-template-columns: 1fr; }
  .pa2w-map-canvas { min-height: 340px; }
  .pa2w-panel { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* ---- Form ---- */
.form { max-width: 640px; }
.form-field { margin-bottom: 22px; }
.form-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ink);
}
.form-field input, .form-field textarea {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--body);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.form-field input:focus, .form-field textarea:focus {
  border-color: var(--forest);
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field .field-error {
  display: none;
  color: var(--error);
  font-size: 14px;
  margin-top: 6px;
}
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--error); }
.form-field.has-error .field-error { display: block; }
.form .btn { width: 100%; }
.form-success {
  display: none;
  margin-top: 24px;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--success);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-weight: 700;
  color: var(--ink);
}
.form-success.is-visible { display: block; }

/* ---- Form: application-length variants ---- */
.req-mark { color: var(--error); font-weight: 700; }
.field-hint {
  font-size: 14px;
  color: var(--body);
  margin-bottom: 8px;
}
.band--mint .field-hint, .band--mint .field-count { color: var(--body-green); }
.field-count {
  font-size: 13px;
  color: var(--body);
  margin-top: 6px;
}
.form-field label { line-height: 1.4; }
.form-field select {
  width: 100%;
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--body);
  border-radius: var(--radius);
  padding: 12px 14px;
}

/* Radio and checkbox groups */
.radio-group, .checkbox-group { border: 0; padding: 0; margin: 0; }
.radio-group legend, .checkbox-group legend {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  padding: 0;
  line-height: 1.4;
}
/* The hint sits under the legend, so it carries the legend's bottom margin
   rather than doubling it. */
.checkbox-group .field-hint { margin-top: -2px; }
/* Specificity note: must out-rank `.form-field label` above, which would
   otherwise force these options to bold blocks. */
.form-field .radio-option,
.form-field .checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  margin-bottom: 8px;
  cursor: pointer;
}
.form-field .radio-option input,
.form-field .checkbox-option input {
  width: auto;
  accent-color: var(--forest);
}
.form-field .checkbox-option input { width: 17px; height: 17px; flex: none; }

/* Error summary */
.form-error-summary {
  background: var(--white);
  border: 2px solid var(--error);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 28px;
}
.form-error-summary__title { font-weight: 700; color: var(--error); margin-bottom: 8px; }
.form-error-summary ul { margin: 0; padding-left: 20px; }
.form-error-summary li { margin-bottom: 4px; font-size: 15px; }
.form-error-summary a { color: var(--error); }

.form .btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---- Footer ---- */
.site-footer {
  background: var(--navy);
  color: var(--white);
  padding: 56px 0 28px;
}
.footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--gutter);
  margin-bottom: 40px;
}
.site-footer .brand { margin-bottom: 14px; }
.footer-tagline { font-size: 15px; max-width: 260px; color: var(--on-dark-soft); }
.site-footer h4 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--mint);
  margin-bottom: 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--white); text-decoration: none; font-size: 15px; }
.site-footer a:hover { text-decoration: underline; }
/* Specificity note: must out-rank `.site-footer a` above. */
.site-footer a.footer-cta {
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  color: var(--mint);
  border-bottom: 2px solid var(--mint);
  padding-bottom: 2px;
}
.site-footer a.footer-cta:hover { color: var(--white); text-decoration: none; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  padding-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--on-dark-soft);
}
@media (max-width: 720px) {
  .footer-cols { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Press / In the News ---- */
.news-subhead {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--forest); margin: 8px 0 16px;
}
.news-card h3 { margin-bottom: 6px; }
.news-card h3 a { color: var(--forest); text-decoration: none; }
.news-card h3 a:hover { text-decoration: underline; }
.news-card .caption { margin-bottom: 8px; }
.news-card p:last-child { font-size: 15px; margin: 0; }
.news-rest[hidden] { display: none; }
.news-rest > .grid-3 { margin-top: var(--gutter); }
.news-rest:not([hidden]) { animation: newsFade 0.28s ease; }
@keyframes newsFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .news-rest:not([hidden]) { animation: none; }
}
.news-toggle-wrap { margin-top: 28px; }
.news-toggle {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--forest);
  background: transparent;
  border: 2px solid var(--forest);
  border-radius: 999px;
  padding: 11px 28px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background-color 0.15s;
}
.news-toggle:hover { background: var(--mint-surf-2); }
.news-toggle .chev { width: 8px; height: 15px; transform: rotate(90deg); transition: transform 0.2s; }
.news-toggle[aria-expanded="true"] .chev { transform: rotate(-90deg); }

/* Writing group — boxed out in a white panel to set it apart from the case studies */
.writing-panel {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 32px;
  margin-top: 24px;
}
.writing-panel > .news-subhead:first-child { margin-top: 0; }
.writing-panel .card { background: var(--mint-surf); }
@media (max-width: 720px) { .writing-panel { padding: 22px; } }

/* ---- Home announcement bar ----
   Sits between the navy header and the hero. Mint surface with the same forest
   rule the cards carry, so it reads as one more band rather than an insert.
   Static markup: no dismissal, no animation. */
.announce {
  background: var(--mint-surf-2);
  border-bottom: 3px solid var(--forest);
}
.announce-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.announce-copy {
  flex: 1 1 460px;
  font-size: 16px;
  color: var(--body-green);
  max-width: 76ch;
}
.announce-lead { color: var(--ink); font-weight: 700; }
/* Its own line at every width, so the deadline never orphans a stray word
   next to the headline on a narrow phone. */
.announce-deadline { display: block; margin-top: 2px; }
.announce-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 30px;
  background: var(--forest);
  color: var(--white);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.announce-link:hover { background: var(--forest-hover); }
@media (max-width: 720px) {
  .announce-inner { align-items: flex-start; gap: 12px; }
  .announce-copy { flex-basis: 100%; font-size: 15px; line-height: 1.5; }
}

/* ---- Key dates ----
   Used on the application page so the deadlines the home banner promises are
   visible without scrolling. */
.key-dates {
  background: var(--mint-surf);
  border-left: 3px solid var(--forest);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px;
  color: var(--body-green);
  max-width: 800px;
}

/* ---- Section eyebrow ----
   Navy label led by a short forest rule. The rule is what carries the accent,
   so the label itself can stay navy and hold full heading contrast. */
.teaser-kicker {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--ink); margin-bottom: 12px;
}
.teaser-kicker::before {
  content: ""; width: 28px; height: 3px; flex: none; background: var(--forest);
}
.band--navy .teaser-kicker, .band--cta .teaser-kicker { color: var(--white); }
.band--navy .teaser-kicker::before, .band--cta .teaser-kicker::before { background: var(--mint); }

/* ---- Two-way connector: communication runs in both directions ---- */
.chart-a-flow--two-way { grid-template-columns: 1fr 84px 1fr 84px 1fr; }
.chart-a-connector--two-way { flex-direction: column; gap: 12px; }
.chart-a-connector--two-way .arrow-2way { width: 60px; height: 12px; flex: none; }
@media (max-width: 860px) {
  .chart-a-flow--two-way { grid-template-columns: 1fr; }
  .chart-a-connector--two-way { flex-direction: row; gap: 28px; height: 64px; }
  .chart-a-connector--two-way .arrow-2way { transform: rotate(90deg); }
}

/* ==========================================================================
   Data color — sequential ramp, categorical set, and map markers.
   Consumed by pa2w-map.js and available to any chart added later.
   ========================================================================== */
:root {
  --ramp-1: #E7F4EF;
  --ramp-2: #B7E4D2;
  --ramp-3: #6FD3B0;
  --ramp-4: #2E8C6E;
  --ramp-5: #165A47;
  --ramp-6: #0A2540;

  /* Categorical: three, and only three. */
  --cat-1: #0A2540;
  --cat-2: #165A47;
  --cat-3: #6FD3B0;

  /* Map markers */
  --pin: #0A2540;
  --pin-active: #165A47;
  --pin-ring: #FFFFFF;
}

/* ==========================================================================
   Accelerator application — comparison table, disclosures, and wizard.
   Scoped to /accelerator-application. Reuses the existing .form vocabulary
   above; everything here is additive.
   ========================================================================== */

/* ---- Secondary button on a light surface ----
   .btn--ghost is white-on-dark and disappears on white, so the wizard's Back
   control needs its own light-surface variant. */
.btn--quiet {
  background: transparent;
  color: var(--forest);
  border: 2px solid var(--hairline);
  border-radius: var(--radius);
  padding: 12px 30px;
}
.btn--quiet:hover { background: var(--mint-surf); border-color: var(--forest); }

/* ---- Key dates ---- */
.key-dates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 32px;
  max-width: 900px;
}
.key-dates-card {
  background: var(--mint-surf);
  border-left: 3px solid var(--forest);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  color: var(--body-green);
}
.key-dates-card h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.key-dates-card dl { margin: 0; display: grid; grid-template-columns: auto; gap: 2px; }
.key-dates-card dt { font-weight: 700; color: var(--ink); font-size: 14px; }
.key-dates-card dd { margin: 0 0 10px; font-size: 15px; }

/* ---- Option comparison table ---- */
.table-scroll { overflow-x: auto; margin-top: 28px; -webkit-overflow-scrolling: touch; }
.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 15px;
}
.compare-table th, .compare-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
}
.compare-table thead th {
  background: var(--navy);
  color: var(--white);
  font-size: 15px;
  line-height: 1.4;
}
.compare-table tbody th {
  width: 200px;
  color: var(--ink);
  background: var(--mint-surf);
  font-weight: 700;
}
.compare-table tbody td { color: var(--body); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-tag {
  display: block;
  color: var(--mint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}

/* ---- Disclosure ----
   The source document's boundary language is long and mostly relevant to a
   minority of readers, so it collapses rather than pushing the form below
   three screens of caveats. */
.disclosure {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-top: 12px;
  max-width: 900px;
}
.disclosure summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::before {
  content: "";
  width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--forest);
  border-bottom: 2px solid var(--forest);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.disclosure[open] summary::before { transform: rotate(45deg); }
.disclosure__body { padding: 0 20px 20px 40px; color: var(--body); font-size: 16px; }
.disclosure__body ul { margin: 12px 0 0; padding-left: 20px; }
.disclosure__body li { margin-bottom: 8px; }

/* ---- Wizard progress rail ---- */
.wiz-rail { margin: 36px 0 8px; }
.wiz-rail ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.wiz-rail__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--body);
  cursor: pointer;
}
.wiz-rail__btn:disabled { opacity: 0.5; cursor: default; }
.wiz-rail__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mint-surf);
  color: var(--ink);
  font-weight: 700;
  font-size: 12px;
  flex: none;
}
.wiz-rail__btn.is-done { border-color: var(--mint-pale); color: var(--ink); }
.wiz-rail__btn.is-done .wiz-rail__num { background: var(--mint-pale); }
.wiz-rail__btn.is-current {
  border-color: var(--forest);
  background: var(--forest);
  color: var(--white);
  font-weight: 700;
}
.wiz-rail__btn.is-current .wiz-rail__num { background: var(--white); color: var(--forest); }
/* The ROAD Sprint step stays in the rail for every applicant so the sequence
   never appears to skip a number. When it doesn't apply it reads as struck
   through and badged rather than vanishing. */
.wiz-rail__btn.is-skipped { opacity: 0.55; border-style: dashed; }
.wiz-rail__btn.is-skipped .wiz-rail__label { text-decoration: line-through; }
.wiz-rail__skip {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--body);
  border-left: 1px solid var(--hairline);
  padding-left: 8px;
  margin-left: 2px;
}

/* Sub-heading inside a step that merges two source sections. */
.wiz-subhead {
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 18px;
}

/* ---- Address autocomplete ---- */
.addr-wrap { position: relative; }
.addr-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--forest);
  border-radius: var(--radius);
  box-shadow: 0 10px 22px rgba(10, 37, 64, 0.14);
  max-height: 260px;
  overflow-y: auto;
}
.addr-option {
  padding: 9px 12px;
  font-size: 15px;
  color: var(--ink);
  border-radius: calc(var(--radius) - 4px);
  cursor: pointer;
}
.addr-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.addr-option:hover, .addr-option.is-active { background: var(--mint-surf); }
.addr-verified {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--success);
}
.wiz-rail__progress { font-size: 14px; color: var(--body); margin-top: 16px; }
.wiz-rail__bar {
  height: 4px;
  background: var(--mint-surf);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 8px;
  max-width: 640px;
}
.wiz-rail__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--forest);
  transition: width 0.25s ease;
}

/* ---- Wizard steps ---- */
.form--wizard { max-width: 760px; margin-top: 28px; }
.wiz-step__kicker {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--forest);
  margin-bottom: 6px;
}
.wiz-step__title { font-size: 26px; margin-bottom: 24px; outline: none; }
.wiz-step__title:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.wiz-note {
  background: var(--mint-surf);
  border-radius: var(--radius);
  padding: 14px 18px;
  color: var(--body-green);
  font-size: 15px;
  margin-bottom: 22px;
}
.wiz-callout {
  background: var(--white);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--forest);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--body);
  margin-top: 8px;
}
.wiz-callout--terms { max-height: 260px; overflow-y: auto; margin-bottom: 24px; }
.wiz-divider { border: 0; border-top: 1px solid var(--hairline); margin: 32px 0; }

.optional-mark {
  font-weight: 400;
  font-size: 13px;
  color: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 6px;
}

/* Radio cards for the four program options — each is a paragraph, not a word,
   so they need room to breathe rather than sitting on one line. */
.form-field .radio-option--card {
  align-items: flex-start;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.form-field .radio-option--card:hover { border-color: var(--forest); background: var(--mint-surf); }
.form-field .radio-option--card input { margin-top: 3px; }

.option-inline { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.option-inline .radio-option { margin-bottom: 0; }

.checkbox-option--standalone { align-items: flex-start; }
.checkbox-option--standalone input { margin-top: 4px; }

.asset-row {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px 20px 4px;
  margin-bottom: 16px;
}
.asset-row legend {
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  padding: 0 8px;
}
.textarea--short { min-height: 84px; }

.field-count.is-over { color: var(--error); font-weight: 700; }

.form-field input[type="file"] {
  padding: 10px;
  background: var(--mint-surf);
  border-style: dashed;
}
.file-list { list-style: none; margin: 10px 0 0; padding: 0; font-size: 14px; color: var(--body); }
.file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}
.file-list__name { overflow-wrap: anywhere; }
.file-list__remove {
  flex: none;
  background: transparent;
  border: 0;
  padding: 4px 6px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: var(--error);
  cursor: pointer;
  text-decoration: underline;
}
.file-list__remove:hover { color: var(--ink); }

/* ---- Review panel ---- */
.review-panel {
  background: var(--mint-surf);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin-bottom: 28px;
  color: var(--body-green);
}
.review-panel__title { font-size: 18px; margin-bottom: 16px; }
.review-group__title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--forest);
  margin: 20px 0 8px;
}
.review-group__title:first-of-type { margin-top: 0; }
.review-list { margin: 0; display: grid; grid-template-columns: 220px 1fr; gap: 6px 20px; }
.review-list dt { font-weight: 700; color: var(--ink); font-size: 14px; }
.review-list dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .review-list { grid-template-columns: 1fr; gap: 2px; }
  .review-list dd { margin-bottom: 10px; }
}

/* ---- Wizard navigation ---- */
.wiz-nav {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.form--wizard .wiz-nav .btn { width: auto; min-width: 160px; }
@media (max-width: 520px) {
  .wiz-nav { flex-direction: column-reverse; }
  .form--wizard .wiz-nav .btn { width: 100%; }
}
.wiz-saved { font-size: 13px; color: var(--body); margin-top: 12px; }