/*
  LEO layout stylesheet
  ------------------------------------------------------------------
  Site chrome (header/nav/footer/CTA band) and the shared page-section
  patterns used by the eight static pages page-shell owns: hero, stats,
  quickfind, pillars, open seats, split/prose/sidecard, FAQ, agenda,
  date strip, legal notice/key-facts, contact form fields and the 404
  page. Reads only from tokens.css/base.css — no literal colour, radius
  or magic-number size lives here that isn't already a token.

  Explicitly NOT here (owned by later phases/agents, per PLAN.md):
    - the round table SVG (.table, .seatdot, .seatring, .tablecore,
      .tablehint) — `roundtable` agent, Phase 4. `.table-fallback` below
      is page-shell's own server-rendered placeholder only.
    - directory search UI (.searchbar, .cards, .card, .filters, .dirgrid,
      .empty, .indexbox, .panel, .modal, .overlay, .deet) — `directory`
      agent, Phase 4. `.directory-fallback .count` below is page-shell's
      own placeholder only (the `.cards-fallback`/`.card-fallback` stub
      markup that used to sit alongside it was removed once directory's
      real card UI shipped and it stopped rendering anywhere in dist/).
    - industry/member page panels — `industry-pages` agent, Phase 5.

  Load order: tokens.css, base.css, layout.css, then any page-specific
  stylesheet.
  ------------------------------------------------------------------
*/

/* ==========================================================
   1. HEADER / NAV / BRAND
   ========================================================== */
header.site {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: var(--space-6) 0;
  background: var(--header-backdrop);
  backdrop-filter: blur(10px);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  /* No-JS safety net (a11y-auditor fix, Phase 3 attempt 4): unconditional
     (not `.js`-gated) so the header row reflows instead of overflowing
     horizontally at narrow viewports when JavaScript is disabled and the
     .js-gated flyout collapse below never applies. Mirrors the flex-wrap
     pattern already used for .hero-cta, .qf-search, .chipwrap, .key-facts
     and .fbot elsewhere in this file. */
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  text-decoration: none;
}

.brand-mark {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r-circle);
  background: var(--accent);
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--font-heading-alt);
  font-weight: var(--weight-bold);
  font-size: 15px;
  letter-spacing: -0.02em;
}

.brand-txt strong {
  display: block;
  font-family: var(--font-heading-alt);
  font-weight: var(--weight-semibold);
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

.brand-txt span {
  display: block;
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

nav.main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  padding: 5px;
  box-shadow: var(--shadow);
  /* No-JS safety net (a11y-auditor fix, Phase 3 attempt 4): unconditional
     so the pill nav's own links wrap onto a second line instead of forcing
     horizontal overflow when the .js-gated column/flyout rules below don't
     apply (JS disabled). The .js nav.main / .js nav.main.open / .js
     .navtoggle rules in the 900px media query still own the enhanced
     mobile flyout for JS-enabled visitors and are unchanged. */
  flex-wrap: wrap;
}

nav.main a {
  text-decoration: none;
  padding: 9px var(--space-7);
  font-size: 15px;
  font-weight: var(--weight-medium);
  border-radius: var(--r-pill);
  transition: background var(--duration-fast), color var(--duration-fast);
}

nav.main a:hover {
  background: var(--accent-soft);
}

nav.main a.on {
  background: var(--accent);
  color: var(--white);
}

/* Hidden until JS confirms it works (see layout.mjs's inline no-js/js
   toggle) — a "Menu" button that does nothing is worse than no button.
   Without JS, nav.main above stays in normal flow and every link is
   reachable regardless of viewport width. */
.navtoggle {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 10px var(--space-7);
  font-weight: var(--weight-semibold);
}

/* ==========================================================
   2. BUTTONS
   ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-decoration: none;
  padding: var(--space-6) var(--space-10);
  border-radius: var(--r-pill);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  border: 1.5px solid transparent;
  transition: transform var(--duration-fast), background var(--duration-base), border-color var(--duration-base),
    color var(--duration-base), box-shadow var(--duration-base);
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-sun {
  background: var(--highlight);
  color: var(--highlight-ink);
  border-color: var(--highlight);
}

.btn-sun:hover {
  transform: translateY(-2px);
  background: var(--sun-dk);
}

/* ==========================================================
   3. TODO marker — distinct from `.missing` (base.css). `.missing` (red)
   is a known, EMPTY project fact. `.todo` (amber, dashed) is copy the
   content agent has not written yet. Never style these the same way.
   This is a structural fallback (see build/content.mjs), not a dev-only
   affordance — it renders in dist/ whenever content.md/microcopy.json is
   missing a key, so it must clear the same 12px legibility floor as any
   other visible text. --text-2xs (11px) fails that; bumped to --text-xs
   (13.5px), same fix already applied to .label/.missing (base.css),
   .rt-core-kicker/.rt-fallback-item span (roundtable.css) and
   .tag/.card-contact .dt/.deet dt/.chip .ct (directory.css).
   ========================================================== */
.todo {
  font-family: var(--font-heading-alt);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--sun-dk);
  background: var(--sun-bg);
  border: 1px dashed var(--sun-border);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-6);
  display: inline-block;
}

/* ==========================================================
   4. SECTION RHYTHM
   ========================================================== */
section {
  padding: var(--space-17) 0;
}

.sec-head {
  max-width: 60ch;
  margin: 0 auto var(--space-14);
  text-align: center;
}

.sec-head h2 {
  font-size: var(--text-4xl);
}

.sec-head p {
  color: var(--text-secondary);
  font-size: var(--text-md);
  margin-top: var(--space-6);
}

.sec-head .label {
  display: block;
  margin-bottom: var(--space-6);
}

.page-head-center {
  text-align: center;
  margin-bottom: var(--space-14);
}

.page-h1-lg,
.page-h1-md {
  font-size: var(--text-6xl);
  max-width: 16ch;
  margin: var(--space-6) auto 0;
}

.page-h1-sm {
  font-size: var(--text-5xl);
  margin: var(--space-6) 0 var(--space-11);
}

.page-intro-lg,
.page-intro-md {
  color: var(--text-secondary);
  font-size: var(--text-md);
  max-width: 56ch;
  margin: var(--space-7) auto 0;
}

/* These wrap build/content.mjs's lede()/mc() output, which already
   supplies its own <p> — zero the inner paragraph's default bottom
   margin so the wrapper's own margin is the only spacing applied. */
.lede p:last-child,
.page-intro-lg p:last-child,
.page-intro-md p:last-child,
.prose-lede p:last-child {
  margin-bottom: 0;
}

/* ==========================================================
   5. HERO + ROUND-TABLE MOUNT + STATS
   ========================================================== */
.hero {
  padding: var(--space-14) 0 var(--space-9);
  text-align: center;
}

.hero h1 {
  font-size: var(--text-7xl);
  max-width: 16ch;
  margin: 0 auto;
  letter-spacing: var(--tracking-tighter);
}

.hero h1 span {
  color: var(--accent);
}

.hero .lede {
  font-size: var(--text-lg);
  max-width: 52ch;
  margin: var(--space-9) auto 0;
  color: var(--text-secondary);
}

.hero-cta {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-11);
}

.tablewrap {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin: var(--space-14) 0 0;
}

/* page-shell's own server-rendered fallback for the round table mount
   point (src/components/roundtable.mjs). The `roundtable` agent (Phase 4)
   owns the real SVG chart's styling in src/styles/roundtable.css. */
.table-fallback {
  width: min(640px, 100%);
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--space-10);
  text-align: left;
}

.table-fallback-count {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: var(--space-2) 0 var(--space-9);
}

.table-fallback-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.table-fallback-list a {
  display: block;
  padding: var(--space-5);
  border-radius: var(--r-md);
  text-decoration: none;
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
}

.table-fallback-list a:hover {
  border-color: var(--accent);
}

.table-fallback-list strong {
  display: block;
  font-family: var(--font-heading-alt);
  font-size: var(--text-sm);
}

/* NOTE: .table-fallback-list is currently orphaned — no template in
   src/templates/ or src/components/ emits this class; the round table's
   actual no-JS fallback list (src/components/roundtable.mjs) renders
   `.rt-fallback-item` markup instead (styled in roundtable.css, already
   at --text-xs). Bumped here anyway for consistency/safety in case this
   rule is ever wired up, since --text-2xs (11px) would fail the 12px
   legibility floor the moment it renders real member/industry text. */
.table-fallback-list span {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-15);
}

.stat {
  background: var(--surface);
  border-radius: var(--r);
  padding: var(--space-10) var(--space-9);
  text-align: center;
  box-shadow: var(--shadow);
}

.stat b {
  display: block;
  font-family: var(--font-heading-alt);
  font-size: 2.1rem;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tighter);
  line-height: 1;
  color: var(--accent);
}

.stat span {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: var(--space-3);
  line-height: var(--leading-normal);
}

@media (max-width: 820px) {
  .stats {
    grid-template-columns: 1fr 1fr;
  }
}

/* ==========================================================
   6. QUICKFIND (home page search entry point — a real GET form to
   /directory/, works with JS off; the directory agent's own search UI on
   /directory/ itself is a separate, richer component)
   ========================================================== */
.quickfind {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--space-14) var(--space-13);
  box-shadow: var(--shadow);
  text-align: center;
}

.quickfind-h2 {
  font-size: var(--text-2xl);
  margin: var(--space-5) 0 var(--space-9);
}

.qf-search,
.notfound-search {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
}

.qf-search input,
.notfound-search input {
  flex: 1 1 320px;
  padding: var(--space-9) var(--space-13) var(--space-9) 52px;
  font-size: var(--text-base);
  font-family: inherit;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border-strong);
  background: var(--surface-alt);
  color: var(--text);
}

/* Border/background swap only — deliberately does NOT set `outline: none`
   or its own box-shadow ring. The a11y-auditor flagged the previous
   `outline: none` + `--ring` glow here as a silent divergence from the
   site's one documented focus system (base.css's two-tone
   `:focus-visible` box-shadow). There is no layout reason these search
   inputs need a different indicator — the pill shape and the icon's
   absolute position both have room for the standard ring — so this is
   reconciled to the shared system rather than kept as a one-off: the
   global `:focus-visible` rule (untouched here) supplies the actual
   focus ring, and this rule only adds the extra border-colour/background
   affordance on top of it. */
.qf-search input:focus-visible,
.notfound-search input:focus-visible {
  border-color: var(--accent);
  background: var(--surface);
}

.qf-search .ico,
.notfound-search .ico {
  position: absolute;
  left: 20px;
  top: 27px;
  color: var(--text-muted);
  pointer-events: none;
}

.chipwrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-9);
}

.chip {
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-pill);
  padding: 9px 17px;
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--text);
  text-decoration: none;
  transition: all var(--duration-fast);
  display: inline-block;
}

.chip:hover {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ==========================================================
   7. PILLARS + OPEN SEATS
   ========================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.pillar {
  background: var(--surface);
  border-radius: var(--r);
  padding: var(--space-12) var(--space-11);
  box-shadow: var(--shadow);
}

.pillar .ic {
  width: 48px;
  height: 48px;
  border-radius: var(--r-circle);
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-8);
  color: var(--accent);
}

.pillar h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-4);
}

.pillar p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}

@media (max-width: 820px) {
  .pillars {
    grid-template-columns: 1fr;
  }
}

.seats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.seat {
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--r-md);
  padding: var(--space-8) var(--space-9);
  text-align: center;
}

.seat strong {
  display: block;
  font-family: var(--font-heading-alt);
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.seat span {
  font-family: var(--font-heading-alt);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  /* --highlight (--sun) only reaches ~2:1 as a foreground colour on
     --surface/--paper — use the contrast-safe --highlight-text alias
     (4.5:1+) instead. See tokens.css's --sun-text comment. */
  color: var(--highlight-text);
}

/* ==========================================================
   8. SPLIT LAYOUT / PROSE / SIDECARD (about, visit, contact)
   ========================================================== */
.split {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-14);
  align-items: start;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-12);
  }
}

.prose {
  max-width: 66ch;
}

.prose h2 {
  font-size: 1.32rem;
  margin: var(--space-12) 0 var(--space-5);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  color: var(--text-secondary);
}

.prose-lede {
  font-size: var(--text-lg);
  color: var(--text);
}

.sidecard {
  background: var(--surface);
  border-radius: var(--r);
  padding: var(--space-11);
  box-shadow: var(--shadow);
  position: sticky;
  top: var(--space-18);
}

.sidecard h2,
.sidecard h3 {
  font-size: 1.18rem;
  margin-bottom: var(--space-6);
}

.sidecard dl {
  margin: 0 0 var(--space-9);
}

.sidecard dt {
  font-family: var(--font-heading-alt);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-6);
}

.sidecard dd {
  margin: 4px 0 0;
  font-size: 15.5px;
}

.sidecard-address,
.sidecard-note {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.sidecard-note {
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-7);
  margin: var(--space-7) 0 0;
}

.sidecard-note a {
  color: var(--accent);
}

/* ==========================================================
   9. FAQ (about page)
   ========================================================== */
.faq details {
  background: var(--surface);
  border-radius: var(--r-md);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow);
}

.faq summary {
  padding: var(--space-9) var(--space-10);
  font-family: var(--font-heading-alt);
  font-weight: var(--weight-semibold);
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  align-items: center;
  letter-spacing: -0.02em;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-family: var(--font-body-alt);
  /* --highlight (--sun) fails 3:1 non-text contrast as this marker's
     foreground colour — use --highlight-text instead. See tokens.css's
     --sun-text comment and the .seat span rule above. */
  color: var(--highlight-text);
  font-size: 22px;
  font-weight: var(--weight-semibold);
  flex: none;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq details p {
  color: var(--text-secondary);
  padding: 0 var(--space-10) var(--space-9);
  margin: 0;
  max-width: 70ch;
}

/* ==========================================================
   10. AGENDA + DATE STRIP (visit page)
   ========================================================== */
.agenda-h2 {
  font-size: 1.5rem;
  margin: var(--space-13) 0 var(--space-7);
}

.agenda {
  list-style: none;
  padding: 0;
  margin: 0;
}

.agenda li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: var(--space-8);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--space-8) var(--space-9);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow);
}

.agenda .t {
  font-family: var(--font-heading-alt);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  color: var(--accent);
}

.agenda strong {
  font-family: var(--font-heading-alt);
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: var(--space-1);
}

.agenda p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.date-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-5);
}

.datestrip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--space-5);
}

.datechip {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--space-7) var(--space-8);
  box-shadow: var(--shadow);
  text-align: center;
}

.datechip span {
  font-family: var(--font-heading-alt);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--space-3);
}

.datechip time {
  font-family: var(--font-heading-alt);
  font-size: 1.08rem;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
}

.datechip.next {
  background: var(--accent);
  color: var(--white);
}

.datechip.next span {
  color: var(--on-teal-text-soft);
}

/* ==========================================================
   11. DIRECTORY MOUNT FALLBACK (page-shell's own — `directory` agent,
   Phase 4, owns the real search/filter/sort/card UI in directory.css)

   The `.cards-fallback`/`.card-fallback` placeholder rules that used to
   live here (Phase 3 stub markup, including a `.card-fallback .tag` rule
   hard-coded at 10.5px) were removed in the a11y-auditor sub-12px sweep:
   directory now owns real card markup in directory.css and neither class
   renders anywhere in dist/ (confirmed via grep before deletion).
   ========================================================== */
.directory-fallback .count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin: 0 0 var(--space-8);
}

/* ==========================================================
   12. CONTACT FORM
   ========================================================== */
.field {
  margin-bottom: var(--space-8);
}

.field label {
  display: block;
  font-family: var(--font-heading-alt);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: var(--space-6) var(--space-8);
  font: inherit;
  font-size: 16px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
}

/* Border-colour swap only — see the .qf-search/.notfound-search input
   focus comment above for why this no longer sets its own `outline: none`
   + `--ring` glow. The global two-tone `:focus-visible` ring (base.css)
   now supplies the actual indicator here too, matching every other
   form control site-wide. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  border-color: var(--accent);
}

.field textarea {
  min-height: 126px;
  resize: vertical;
}

.form-notice {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-6);
  max-width: 52ch;
}

/* ==========================================================
   13. LEGAL PAGES (privacy, terms, membership agreement)
   ========================================================== */
.notice {
  background: var(--sun-bg);
  border: 1px solid var(--sun-border);
  border-radius: var(--r-md);
  padding: var(--space-8) var(--space-9);
  margin-bottom: var(--space-12);
}

.notice p:last-child {
  margin-bottom: 0;
}

.key-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-10);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--space-8) var(--space-9);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-12);
}

.key-facts dt {
  font-family: var(--font-heading-alt);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.key-facts dd {
  margin: var(--space-2) 0 0;
}

.legal-clause {
  margin-bottom: var(--space-13);
}

.legal-clause h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-6);
}

.legal-clause h3 {
  font-size: 1.15rem;
  margin: var(--space-9) 0 var(--space-4);
}

.legal-clause p,
.legal-clause li {
  color: var(--text-secondary);
}

.legal-clause ul {
  padding-left: 1.4em;
  list-style: disc;
}

.legal-clause li {
  margin-bottom: var(--space-3);
}

/* ==========================================================
   14. CLOSING CTA BAND + FOOTER
   ========================================================== */
.band {
  padding: 0 0 var(--space-17);
}

.band .inner {
  background: var(--accent);
  color: var(--white);
  border-radius: var(--r-xl);
  padding: var(--space-15) var(--space-13);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.band .inner::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: var(--r-circle);
  background: var(--tint-white-soft);
  right: -90px;
  bottom: -140px;
}

.band h2 {
  font-size: var(--text-4xl-band);
  margin-bottom: var(--space-6);
  position: relative;
}

.band p {
  color: var(--on-teal-text);
  font-size: var(--text-md);
  margin: 0 auto var(--space-9);
  max-width: 52ch;
  position: relative;
}

.band .hero-cta {
  position: relative;
}

.band .btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--on-teal-border);
}

.band .btn-ghost:hover {
  background: var(--on-teal-bg-hover);
  color: var(--white);
  border-color: var(--white);
}

footer.site {
  background: var(--surface);
  padding: var(--space-15) 0 var(--space-10);
  font-size: 15px;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-soft);
}

.fgrid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: var(--space-13);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--border-soft);
}

@media (max-width: 820px) {
  .fgrid {
    grid-template-columns: 1fr;
    gap: var(--space-11);
  }
}

.foot-heading {
  font-family: var(--font-heading-alt);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-7);
  font-weight: var(--weight-semibold);
}

footer.site ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-4);
}

footer.site a {
  text-decoration: none;
}

footer.site a:hover {
  color: var(--accent);
}

.fbrand strong {
  font-family: var(--font-heading-alt);
  font-size: 17px;
  color: var(--text);
  display: block;
  margin-bottom: var(--space-5);
}

.fbrand p {
  max-width: 40ch;
  font-size: 14.5px;
}

.fmeta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-13);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--border-soft);
}

@media (max-width: 820px) {
  .fmeta {
    grid-template-columns: 1fr;
    gap: var(--space-9);
  }
}

.fcontact {
  display: grid;
  gap: var(--space-3) var(--space-6);
  grid-template-columns: auto 1fr;
  align-items: baseline;
  margin: 0;
}

.fcontact dt {
  font-family: var(--font-heading-alt);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.fcontact dd {
  margin: 0;
}

.fbot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-top: var(--space-10);
  font-size: 13px;
  color: var(--text-muted);
}

.fbot a {
  color: inherit;
}

/* ==========================================================
   15. 404 PAGE
   ========================================================== */
.notfound {
  text-align: center;
}

.notfound-search {
  margin-top: var(--space-11);
}

/* ==========================================================
   16. RESPONSIVE — mobile nav collapse, gated behind `.js`
   ========================================================== */
@media (max-width: 900px) {
  nav.main a {
    padding: 13px var(--space-7);
    font-size: 16.5px;
    text-align: center;
  }

  /* Only collapses/hides behind a working toggle once JS has actually
     run — see layout.mjs's inline no-js/js class swap and header.mjs's
     comment. Without JS, nav.main stays visible and in normal flow. */
  .js nav.main {
    position: fixed;
    left: 16px;
    right: 16px;
    top: 80px;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--r-nav-mobile);
    padding: var(--space-5);
    display: none;
  }

  .js nav.main.open {
    display: flex;
  }

  .js .navtoggle {
    display: block;
  }

  .hdr-cta {
    display: none;
  }

  section {
    padding: var(--space-15) 0;
  }

  .quickfind {
    padding: var(--space-12) var(--space-9);
    border-radius: var(--r-mobile);
  }

  .band .inner {
    padding: var(--space-14) var(--space-10);
    border-radius: var(--r-mobile);
  }
}