/* =========================================================================
   Subcontractor Leads — global.css
   One canonical stylesheet, shared by the static index.html and the Astro build.
   Design idea: the estimator's go / no-go decision on an upcoming project.
   The recurring motif is the dog-eared corner — a project flagged worth a bid.
   ========================================================================= */

/* ----- Tokens ----------------------------------------------------------- */
:root {
  /* Neutrals pulled from the material world of the work: cured concrete,
     galvanized steel, chalk-line white. Deliberately cool, not cream. */
  --site:      #F1F3EF;   /* page — cool off-white, chalk on concrete       */
  --paper:     #FBFCFA;   /* raised working surfaces (the opportunity brief) */
  --ink:       #16201B;   /* deep green-black; a chosen dark, not #111       */
  --ink-soft:  #2C3833;   /* headings on light where full ink is too heavy  */
  --steel:     #55635D;   /* secondary text, field labels                   */
  --line:      #D5D9D1;   /* hairlines, field rules                          */
  --line-ink:  #33413A;   /* hairlines on dark surfaces                      */
  --concrete:  #E6E8E1;   /* wells, quiet fills                              */

  /* One action color. GO — the approval-stamp green of "released to bid". */
  --go:        #17663C;   /* primary action, on white ≈ 5.9:1               */
  --go-bright: #1E8A4E;   /* borders / focus / fold highlight               */
  --go-deep:   #0E3D24;   /* pressed, fold underside, text on pale green    */
  --go-pale:   #E4EFE6;   /* faint green well                               */

  --shadow: 0 1px 0 rgba(22,32,27,.04), 0 18px 40px -28px rgba(22,32,27,.30);

  --measure: 62ch;
  --wrap: 1180px;
  --wrap-wide: 1320px;

  /* Type. Barlow Semi Condensed = industrial signage lineage for display;
     Public Sans = plain civic legibility for reading. Distinct silhouettes. */
  --display: "Barlow Semi Condensed", "Arial Narrow", "Oswald", system-ui, sans-serif;
  --text: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

}

/* ----- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--site);
  color: var(--ink);
  font-family: var(--text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* belt-and-braces against 1px overflow; layout never relies on it */
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* ----- Focus + a11y ----------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--go-bright);
  outline-offset: 2px;
  border-radius: 3px;
}
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  background: var(--ink);
  color: var(--site);
  padding: 12px 18px;
  border-radius: 0 0 8px 8px;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .01em;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----- Layout primitives ------------------------------------------------ */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); }
.wrap--wide { max-width: var(--wrap-wide); }
.band { padding-block: clamp(60px, 8vw, 120px); }
.band--tight { padding-block: clamp(44px, 6vw, 84px); }
.band--ink { background: var(--ink); color: var(--site); }
.band--ink h2, .band--ink h3 { color: var(--site); }
.band--concrete { background: var(--concrete); }
.band + .band { border-top: 1px solid var(--line); }
.band--ink + .band, .band + .band--ink { border-top: 0; }

/* Section intro — a real heading + a real sentence, no tracked-out eyebrow. */
.lede { max-width: 34ch; }
.lede__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--go); letter-spacing: .005em; margin-bottom: 14px;
}
.band--ink .lede__kicker { color: #7FD3A2; }
.lede__kicker::before { /* the dog-ear tick */
  content: ""; width: 14px; height: 14px; flex: none;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%);
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -.01em; color: var(--ink); }
h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem); line-height: 1.0; }
h3 { font-size: 1.24rem; font-weight: 600; line-height: 1.14; letter-spacing: 0; }
p { max-width: var(--measure); }
.prose p + p { margin-top: 1.05em; }
strong { font-weight: 700; }

/* ----- Buttons + links -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  font-family: var(--display); font-weight: 600; font-size: 1.06rem; letter-spacing: .005em;
  border: 1.5px solid transparent; border-radius: 10px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .08s ease;
}
.btn:active { transform: translateY(1px); }
.btn--go { background: var(--go); color: #F4FBF6; }
.btn--go:hover { background: var(--go-deep); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--ink); }
.band--ink .btn--outline { color: var(--site); border-color: var(--line-ink); }
.band--ink .btn--outline:hover { border-color: var(--site); }
.btn--block { width: 100%; }

.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--go); font-weight: 600; text-decoration: none;
  box-shadow: inset 0 -1.5px 0 rgba(23,102,60,.32); padding-bottom: 1px;
}
.tlink:hover { box-shadow: inset 0 -1.5px 0 var(--go); }

/* ----- Header ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--site) 88%, transparent);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 70px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand__mark { width: 34px; height: 34px; flex: none; }
.brand__name {
  font-family: var(--display); font-weight: 700; font-size: 1.28rem;
  letter-spacing: -.005em; line-height: .95;
}
.brand__name span { display: block; color: var(--steel); font-weight: 600; font-size: .82rem; letter-spacing: .06em; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
  text-decoration: none; color: var(--ink-soft); font-weight: 500; border-radius: 8px;
}
.nav__link:hover { background: var(--concrete); color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-cta { min-height: 46px; padding: 11px 20px; font-size: 1rem; }

/* Mobile menu via <details> — no JS, keyboard-operable. */
.menu { position: relative; display: none; }
.menu__toggle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 16px;
  font-family: var(--display); font-weight: 600;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--paper);
}
.menu__toggle::-webkit-details-marker { display: none; }
.menu__bars { width: 18px; height: 12px; position: relative; }
.menu__bars::before, .menu__bars::after, .menu__bars span {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); border-radius: 2px;
}
.menu__bars::before { top: 0; } .menu__bars span { top: 5px; } .menu__bars::after { bottom: 0; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(80vw, 320px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 10px; display: grid; gap: 2px;
}
.menu__panel a {
  display: flex; align-items: center; min-height: 48px; padding: 0 14px;
  text-decoration: none; color: var(--ink); font-weight: 500; border-radius: 9px;
}
.menu__panel a:hover { background: var(--concrete); }
.menu__panel a.btn--go { color: #F4FBF6; justify-content: center; }
.menu__panel a.btn--go:hover { background: var(--go-deep); }
.menu__panel .btn { margin-top: 8px; }

/* ----- Hero ------------------------------------------------------------- */
.hero { padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(52px, 7vw, 104px); overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.status {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--steel); font-size: .95rem;
  padding: 7px 14px 7px 12px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 999px; margin-bottom: 26px;
}
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--go-bright); flex: none; }
.hero__title {
  font-size: clamp(2.7rem, 1.5rem + 5.2vw, 4.7rem);
  line-height: .96; letter-spacing: -.018em; text-wrap: balance;
}
.hero__title em { font-style: normal; color: var(--go); }
.hero__sub {
  margin-top: 22px; font-size: clamp(1.12rem, 1rem + 0.5vw, 1.36rem);
  line-height: 1.5; color: var(--ink-soft); max-width: 40ch;
}
.hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }
.hero__note { margin-top: 18px; font-size: .92rem; color: var(--steel); max-width: 44ch; }

/* ----- The opportunity object (signature element) ----------------------- */
.opp {
  position: relative; background: var(--paper);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 24px 24px;
  max-width: 460px; margin-inline: auto;
}
/* the flagged dog-ear on the object itself */
.opp__fold { position: absolute; top: -1px; right: -1px; width: 62px; height: 62px; }
.opp__flag {
  position: absolute; top: 12px; right: 14px; text-align: right;
  font-family: var(--display); font-weight: 700; color: #EAF6EE;
  font-size: .82rem; letter-spacing: .04em; line-height: 1;
}
.opp__tag {
  display: inline-block; font-size: .78rem; font-weight: 600; color: var(--steel);
  letter-spacing: .02em; margin-bottom: 14px;
}
.opp__title { font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.02; padding-right: 54px; }
.opp__scope { color: var(--steel); font-size: .98rem; margin-top: 4px; }
.opp__rows { margin-top: 18px; border-top: 1px solid var(--line); }
.opp__row {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 10px 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.opp__k { color: var(--steel); font-size: .9rem; }
.opp__v { font-weight: 600; font-variant-numeric: tabular-nums; }
.opp__v .muted { color: var(--steel); font-weight: 400; }
.opp__decision {
  margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.opp__verdict { display: inline-flex; align-items: center; gap: 12px; }
.stamp {
  --stamp: var(--go);
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 1.2rem; letter-spacing: .04em;
  color: var(--stamp); border: 2.5px solid var(--stamp); border-radius: 9px;
  padding: 7px 15px; transform: rotate(-3deg); text-transform: uppercase;
}
.stamp::before { content: ""; width: 14px; height: 14px; background: var(--stamp); clip-path: polygon(0 0,100% 0,100% 52%,52% 100%,0 100%); }
.opp__toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.opp__toggle span { padding: 8px 12px; font-family: var(--display); font-weight: 600; font-size: .86rem; color: var(--steel); }
.opp__toggle span[data-on] { background: var(--go-pale); color: var(--go-deep); }

/* ----- Criteria: the estimator's checklist (editorial list, not cards) --- */
.criteria__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 72px); align-items: start; }
.checklist { display: grid; gap: 0; }
.check {
  display: grid; grid-template-columns: auto 1fr; gap: 16px 18px;
  padding: 22px 0; border-top: 1px solid var(--line);
}
.check:first-child { border-top: 0; }
/* A bare green check drawn straight on the page — the estimator's tick that a
   factor clears the bar. No colored square, no icon-in-a-box UI. */
.check__mark { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.check__mark svg { width: 26px; height: 26px; }
.check__body h3 { margin-bottom: 5px; }
.check__body p { color: var(--ink-soft); max-width: 52ch; }
.criteria__aside { position: sticky; top: 92px; }

/* ----- What we're building: a real sequence, so a real flow -------------- */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 34px); margin-top: 44px; counter-reset: step; }
.step { position: relative; padding-top: 26px; border-top: 2px solid var(--line-ink); }
.band--ink .step p { color: #C6CEC9; }
.step__num {
  position: absolute; top: -13px; left: 0; width: 26px; height: 26px;
  display: grid; place-items: center; background: var(--go); color: #EAF6EE;
  border-radius: 7px; font-family: var(--display); font-weight: 700; font-size: .95rem;
}
.step h3 { color: var(--site); margin-bottom: 7px; }
.build__cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,4vw,64px); align-items: start; }
.build__cols .prose p { color: #C6CEC9; }

/* ----- Why + Access (early access, non-submitting) ---------------------- */
.access__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: clamp(32px, 5vw, 72px); align-items: start; }
.reasons { display: grid; gap: 18px; margin-top: 26px; }
.reason { display: grid; grid-template-columns: auto 1fr; gap: 14px; }
/* The dog-ear flag — the same mark used to "flag a project worth bidding".
   Rendered bare, matching the section kickers; no colored square. */
.reason__k { width: 22px; height: 22px; flex: none; margin-top: 4px; background: var(--go); clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%); }
.reason__k svg { display: none; }
.reason h3 { margin-bottom: 3px; }
.reason p { color: var(--ink-soft); max-width: 46ch; }

.form-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: clamp(22px, 3vw, 30px);
}
.form-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.form-card__head h3 { font-size: 1.28rem; }
.field { display: grid; gap: 7px; margin-top: 16px; }
.field > label { font-weight: 600; font-size: .95rem; }
.field__hint { color: var(--steel); font-weight: 400; }
.input, .select {
  min-height: 50px; padding: 12px 14px; width: 100%;
  background: var(--site); border: 1.5px solid var(--line); border-radius: 10px;
  color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2355635D' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.input:focus, .select:focus { border-color: var(--go-bright); box-shadow: 0 0 0 3px rgba(30,138,78,.16); outline: none; }
.input::placeholder { color: #8B968F; }
.form-card .btn { margin-top: 20px; }
.form-note {
  margin-top: 14px; font-size: .86rem; color: var(--steel);
  display: flex; gap: 9px; align-items: flex-start; line-height: 1.45;
}
.form-note svg { flex: none; margin-top: 2px; }
/* Keep the prose + link as one flowing text run (never separate flex items). */
.form-note__text { flex: 1 1 auto; min-width: 0; }

/* ----- Undecided: honesty, set as a plain readable ledger of open calls -- */
.open-calls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 40px; margin-top: 32px; border-top: 1px solid var(--line-ink); }
.open-call { padding: 18px 0; border-bottom: 1px solid var(--line-ink); display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.open-call__dot { width: 11px; height: 11px; margin-top: 7px; border: 2px solid #7FD3A2; border-radius: 50%; flex: none; }
.open-call h3 { color: var(--site); font-size: 1.06rem; margin-bottom: 2px; }
.open-call p { color: #AEB7B2; font-size: .96rem; max-width: 40ch; }

/* ----- FAQ -------------------------------------------------------------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(28px,4vw,64px); align-items: start; }
.qa { border-top: 1px solid var(--line); }
.qa__item { border-bottom: 1px solid var(--line); }
.qa__q {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 0; font-family: var(--display); font-weight: 600; font-size: 1.18rem; color: var(--ink);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__sign { width: 22px; height: 22px; flex: none; position: relative; }
.qa__sign::before, .qa__sign::after { content: ""; position: absolute; background: var(--go); border-radius: 2px; }
.qa__sign::before { left: 0; right: 0; top: 10px; height: 2px; }
.qa__sign::after { top: 0; bottom: 0; left: 10px; width: 2px; transition: transform .2s ease; }
.qa__item[open] .qa__sign::after { transform: scaleY(0); }
.qa__a { padding: 0 0 24px; color: var(--ink-soft); max-width: 68ch; }
.qa__a p + p { margin-top: .9em; }

/* ----- Footer ----------------------------------------------------------- */
.site-footer { background: var(--ink); color: #C2CBC5; padding-block: clamp(48px, 6vw, 76px); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
.footer__brand .brand__name { color: var(--site); }
.footer__brand p { margin-top: 14px; max-width: 42ch; color: #9FA9A3; font-size: .96rem; }
.footer__col h2 { font-family: var(--display); font-weight: 600; color: var(--site); font-size: .98rem; letter-spacing: .04em; margin-bottom: 14px; }
.footer__col a { display: block; padding: 6px 0; text-decoration: none; color: #AEB7B2; }
.footer__col a:hover { color: var(--site); }
.footer__base {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-ink);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center;
  font-size: .86rem; color: #8B958F;
}

/* ----- Motion: one orchestrated reveal, opt-in only --------------------- */
@media (prefers-reduced-motion: no-preference) {
  .opp { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .opp__fold { transform-origin: top right; animation: fold .6s .35s cubic-bezier(.3,.8,.3,1) both; }
  .stamp { animation: stamp .45s .62s cubic-bezier(.2,1.4,.4,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes fold { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes stamp { 0% { opacity: 0; transform: rotate(-3deg) scale(1.5); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(-3deg) scale(1); } }
}

/* ----- Responsive ------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__lead { max-width: 640px; }
  .opp { margin-inline: 0; }
  .criteria__grid { grid-template-columns: 1fr; gap: 30px; }
  .criteria__aside { position: static; }
  .access__grid { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; gap: 8px; }
  .build__cols { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav, .header-cta { display: none; }
  .menu { display: block; }
  .flow { grid-template-columns: 1fr; gap: 30px; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .open-calls { grid-template-columns: 1fr; gap: 0; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(2.5rem, 2rem + 8vw, 3.2rem); }
  .btn { width: 100%; }
  .hero__actions .btn { width: 100%; }
  .opp__row { grid-template-columns: 7.5rem 1fr; }
}
@media (max-width: 380px) {
  .opp__row { grid-template-columns: 1fr; gap: 2px; }
  .opp__title { padding-right: 44px; }
}

/* ----- Photography -----------------------------------------------------
   Real, licensed construction photos (see PROVENANCE.md). Each one carries
   a piece of the story: the trade in the example, the work the checklist is
   about, the plan review we're speeding up. Never decorative filler. */
.hero__object { position: relative; }
.hero__photo {
  position: relative; margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--concrete); aspect-ratio: 4 / 3;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,32,27,0) 45%, rgba(22,32,27,.22)); }
.hero__object .opp { margin-top: -88px; margin-inline: clamp(10px, 3vw, 34px) 0; }

.photo-band { position: relative; width: 100%; min-height: clamp(240px, 34vw, 400px); overflow: hidden; background: var(--ink); display: flex; }
.photo-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,18,16,.88), rgba(14,18,16,.52) 58%, rgba(14,18,16,.32)); }
.photo-band__inner { position: relative; z-index: 2; width: 100%; display: flex; align-items: flex-end; padding-block: clamp(28px, 4vw, 48px); }
.photo-band__cap { max-width: 30ch; }
.photo-band__cap h2 { color: var(--site); font-size: clamp(1.5rem, 1rem + 2.4vw, 2.35rem); }
.photo-band__cap p { color: #C7CFCA; margin-top: 12px; max-width: 46ch; }

.aside-photo { margin-top: 24px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--concrete); aspect-ratio: 4 / 5; }
.aside-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.aside-photo figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.build__media { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-ink); box-shadow: var(--shadow); background: #0d120f; aspect-ratio: 3 / 4; }
.build__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: saturate(.92) contrast(1.02) brightness(.9); }

@media (max-width: 1000px) {
  .hero__object .opp { margin-inline: auto; }
  .hero__photo { aspect-ratio: 16 / 10; }
  .aside-photo { aspect-ratio: 16 / 9; max-width: 520px; }
  .build__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .hero__object .opp { margin-top: -60px; }
  .photo-band__inner { align-items: flex-end; }
}

/* =========================================================================
   Production extensions — global nav dropdown, editorial pages, content
   patterns (breadcrumbs, tables, checklists, decision rules), resource lists,
   and the reusable early-access CTA. These EXTEND the approved system above;
   the tokens, palette, type, and homepage composition are unchanged.
   ========================================================================= */

/* ----- Desktop "Guides" nav dropdown (no JS, keyboard-operable) --------- */
.navdrop { position: relative; }
.nav__drop-toggle { list-style: none; cursor: pointer; }
.nav__drop-toggle::-webkit-details-marker { display: none; }
.nav__drop-toggle::after {
  content: ""; width: 8px; height: 8px; margin-left: 2px;
  border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel);
  transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
}
.navdrop[open] .nav__drop-toggle::after { transform: translateY(1px) rotate(225deg); }
.navdrop__panel {
  position: absolute; left: 0; top: calc(100% + 10px); width: max(260px, 100%);
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px; display: grid; gap: 2px; z-index: 30;
}
.navdrop__panel a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  text-decoration: none; color: var(--ink); font-weight: 500; border-radius: 8px;
}
.navdrop__panel a:hover { background: var(--concrete); }
.navdrop__panel a[aria-current="page"] { color: var(--go); }

/* ----- Breadcrumbs ------------------------------------------------------ */
.crumbs { margin-bottom: 22px; }
.crumbs__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 0; font-size: .9rem; }
.crumbs__item { display: inline-flex; align-items: center; gap: 10px; color: var(--steel); }
.crumbs__item + .crumbs__item::before { content: "/"; color: var(--line); }
.crumbs__item a { color: var(--steel); text-decoration: none; }
.crumbs__item a:hover { color: var(--go); text-decoration: underline; }
.crumbs__item [aria-current="page"] { color: var(--ink-soft); font-weight: 600; }

/* ----- Editorial header + article prose --------------------------------- */
.ehead { padding-top: clamp(30px, 5vw, 56px); padding-bottom: clamp(20px, 3vw, 32px); }
.ehead__title { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.3rem); line-height: 1.02; letter-spacing: -.015em; max-width: 20ch; text-wrap: balance; }
.ehead__lede { margin-top: 18px; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }
.ehead__meta { margin-top: 18px; font-size: .9rem; color: var(--steel); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ehead__meta time { color: var(--ink-soft); font-weight: 600; }
.ehead__meta span { color: var(--ink-soft); font-weight: 600; }

.article { padding-top: clamp(8px, 2vw, 20px); padding-bottom: clamp(48px, 7vw, 96px); }
.article__body { max-width: 72ch; }
.article__body > h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.08; margin-top: 2em; margin-bottom: .5em; }
.article__body > h2:first-child { margin-top: 0; }
.article__body > h3 { font-size: 1.2rem; margin-top: 1.7em; margin-bottom: .35em; }
.article__body > p { margin-bottom: 1.05em; color: var(--ink-soft); }
.article__body > p:first-of-type { color: var(--ink); }
.article__body a { color: var(--go); text-decoration: none; box-shadow: inset 0 -1.5px 0 rgba(23,102,60,.32); }
.article__body a:hover { box-shadow: inset 0 -1.5px 0 var(--go); }
.article__body ul, .article__body ol { margin: 0 0 1.15em; padding-left: 1.3em; color: var(--ink-soft); }
.article__body li { margin-bottom: .5em; }
.article__body li::marker { color: var(--go); }
.article__body strong { color: var(--ink-soft); }
.article__figure { margin: 1.6em 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--concrete); }
.article__figure img { width: 100%; height: auto; display: block; }
.article__figure figcaption { padding: 10px 14px; font-size: .86rem; color: var(--steel); background: var(--paper); border-top: 1px solid var(--line); }
.note { color: var(--steel); font-size: .95rem; font-style: italic; }

/* ----- Checklist list pattern (green ticks, no icon squares) ------------- */
.checks { list-style: none; padding: 0; margin: 1.2em 0; display: grid; gap: 0; max-width: 72ch; }
.checks__item { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: start; }
.checks__item:first-child { border-top: 0; }
.checks__mark { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.checks__mark svg { width: 22px; height: 22px; }
.checks__body { color: var(--ink-soft); }
.checks__body strong { color: var(--ink); }

/* ----- Decision rule callout (the go / no-go idea, in prose) ------------- */
.decision { max-width: 72ch; margin: 1.6em 0; background: var(--go-pale); border-left: 4px solid var(--go); border-radius: 0 12px 12px 0; padding: 18px 22px; }
.decision__label { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 700; color: var(--go-deep); font-size: .98rem; margin-bottom: 8px; }
.decision__label::before { content: ""; width: 14px; height: 14px; background: var(--go); clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%); }
.decision__body { color: var(--ink-soft); }
.decision__body p { margin-bottom: .6em; }
.decision__body p:last-child { margin-bottom: 0; }
.decision__body strong { color: var(--go-deep); }

/* ----- Data / comparison tables ----------------------------------------- */
.tablewrap { max-width: 100%; overflow-x: auto; margin: 1.5em 0; border: 1px solid var(--line); border-radius: 12px; }
.datatable { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--paper); }
.datatable caption { caption-side: top; text-align: left; padding: 12px 16px; font-size: .88rem; color: var(--steel); background: var(--concrete); border-bottom: 1px solid var(--line); }
.datatable th, .datatable td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.datatable thead th { font-family: var(--display); font-weight: 700; color: var(--ink); background: var(--site); position: sticky; top: 0; }
.datatable tbody th { font-weight: 700; color: var(--ink); background: color-mix(in srgb, var(--concrete) 45%, transparent); min-width: 11rem; }
.datatable tbody tr:last-child th, .datatable tbody tr:last-child td { border-bottom: 0; }
.datatable td { color: var(--ink-soft); }

/* ----- Resource links (readable rows, not cards) ------------------------ */
.resources { margin-top: clamp(24px, 3vw, 36px); }
.resources__title { font-size: 1.05rem; font-family: var(--display); font-weight: 600; color: var(--steel); letter-spacing: .02em; margin-bottom: 6px; }
.resources__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.resource { padding: 20px 0; border-bottom: 1px solid var(--line); }
.resource__link { font-family: var(--display); font-weight: 700; font-size: 1.16rem; line-height: 1.12; color: var(--ink); text-decoration: none; display: inline-block; }
.resource__link:hover { color: var(--go); }
.resource__blurb { margin-top: 6px; color: var(--ink-soft); font-size: .96rem; max-width: 48ch; }

/* ----- Reusable early-access CTA band ----------------------------------- */
.cta-band { background: var(--ink); color: var(--site); padding-block: clamp(40px, 6vw, 72px); }
.cta-band__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 40px; align-items: center; }
.cta-band__copy { position: relative; padding-left: 26px; }
.cta-band__flag { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; background: #2E9E5F; clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%); }
.cta-band__copy h2 { color: var(--site); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.06; max-width: 24ch; }
.cta-band__copy p { color: #C6CEC9; margin-top: 12px; max-width: 60ch; }
.cta-band .btn--go { background: #2E9E5F; color: #08160E; }
.cta-band .btn--go:hover { background: #43B473; }

/* ----- Homepage: resource head + early-access panel --------------------- */
.learn__head { max-width: 60ch; }
.access__panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: clamp(22px, 3vw, 30px); }
.access__panel h3 { font-size: 1.28rem; }
.access__panel > p { margin-top: 8px; color: var(--ink-soft); }
.access__points { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; gap: 10px; }
.access__points li { position: relative; padding-left: 24px; color: var(--ink-soft); font-size: .96rem; }
.access__points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 12px; background: var(--go); clip-path: polygon(0 0, 100% 0, 100% 55%, 55% 100%, 0 100%); }

/* ----- Responsive: production extensions -------------------------------- */
@media (max-width: 860px) {
  .navdrop { display: none; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band .btn { width: 100%; }
}
@media (max-width: 620px) {
  .resources__list { grid-template-columns: 1fr; }
  .tablewrap { border-radius: 10px; }
}

/* Stacked table format for narrow screens: each row becomes a labeled block so
   no column is hidden inside a horizontal scroller. Desktop keeps a real table;
   here we only change presentation (table semantics are preserved via the DOM,
   with the header row visually hidden but still exposed to assistive tech). */
@media (max-width: 600px) {
  .tablewrap { overflow-x: visible; border: 0; border-radius: 0; }
  .datatable { display: block; background: transparent; font-size: 1rem; }
  .datatable caption { border: 1px solid var(--line); border-radius: 10px 10px 0 0; }
  .datatable thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .datatable tbody { display: block; }
  .datatable tbody tr {
    display: block; background: var(--paper);
    border: 1px solid var(--line); border-top: 0;
  }
  .datatable tbody tr:first-child { border-top: 1px solid var(--line); }
  .datatable tbody tr:last-child { border-radius: 0 0 10px 10px; }
  .datatable tbody th, .datatable tbody td { display: block; min-width: 0; border-bottom: 1px solid var(--line); }
  .datatable tbody th[scope="row"] {
    background: var(--concrete); font-family: var(--display); font-size: 1.14rem;
    padding: 12px 16px 13px;
  }
  .datatable tbody th[scope="row"]::before,
  .datatable tbody td::before {
    content: attr(data-label);
    display: block; font-family: var(--text); font-weight: 700;
    font-size: .78rem; color: var(--steel); margin-bottom: 3px;
  }
  .datatable tbody td { padding: 11px 16px; }
  .datatable tbody tr:last-child td:last-child { border-bottom: 0; }
}