/* ============================================================
   File: assets/css/site.css
   Purpose: Columbus MBE Construction (columbusmbeconstruction.com)
            design system on Bootstrap 5.3 — bright, institutional
            aesthetic with navy as the authority accent. Site palette
            is bridged onto --bs-* tokens; all authored classes are
            purpose-named. Replaces the pre-Bootstrap style.css.
   Fonts: Inter (self-hosted woff2, assets/fonts/) — Regular 400,
          Medium 500, SemiBold 600. Replaces the former IBM Plex
          Google Fonts CDN import.
   Brand: iSpec teal #57c1b6 / deep navy #0a1628
   Used by: index.html, about.html, procurement.html,
            diversity-spend.html (loaded after bootstrap.min.css)
   Nav: .site-nav / .nav-link / .nav-toggle added 2026-08-10 for
        the top nav + mobile hamburger (public/assets/js/nav.js
        drives the open/close state via data-open on .site-nav).
   2026-08-10 design round: header decluttered (.logo-mark img +
        .header-certs/.cert-badge removed; hamburger breakpoint
        768px -> 992px; white-space: nowrap on the logo lines +
        .nav-link fixes the mid-width text-wrap bug) and a
        the fixed-background photo treatment lives on .lead-section
        (see LEAD FORM block; the interim .billboard-band was removed
        as redundant).
   2026-08-10 second design round: owner feedback that the site still
        reads too blue. .section-mid flipped from a second navy tone
        to a light/inverse band (--paper token) so pages alternate
        navy <-> light instead of navy <-> slightly-different-navy.
   2026-08-10 third design round: the photo washes (::before overlays
        on .hero/.lead-section/.section-engage) were deleted so the
        photo shows at full contrast; content sits in an opaque panel
        instead (.hero-panel/.engage-panel/.lead-inner).
   2026-09-27 BRIGHT-THEME INVERSION (owner call — "the page is too
        dark, do the inverse, navy as accents for the authority"):
        the whole page flips from a dark navy body to a white page
        with light --tint alternating bands; navy becomes the accent
        that carries authority (headings, section labels + their
        dash, eyebrow text, credential-card key values, table
        headers, badges, primary buttons, hairline borders at low
        alpha) instead of being the page background. Two navy anchors
        stay solid dark for authority: the trust bar and the footer
        (previously a hard-coded near-black #060f1a — now var(--navy)
        so it tracks the token). The site header flips to white with
        a navy wordmark and a solid navy bottom rule. Teal survives
        only as a secondary cue (logo "MBE" word — a logotype, exempt
        from body-text contrast like any brand wordmark — plus a
        handful of small interactive accents); anywhere teal renders
        as real text on a light surface it uses --teal-on-light
        (>=4.5:1), never the raw brand --teal (2.9:1 on white — fails
        as text). <html data-bs-theme="dark"> was removed from
        app/Views/layouts/public_main.php so Bootstrap's own dark-mode
        component defaults don't fight this file; :root alone now
        carries every token (see TOKENS block).
        Token re-tune (old -> new; contrast in the TOKENS comment
        below): --navy-mid/--navy-lt repointed from dark card fills to
        pale light-theme surfaces (fewer rule-body edits needed across
        both stylesheets); --paper renamed --tint (page-band bg);
        --border repointed from a white-alpha dark-theme hairline to a
        low-alpha navy hairline (was --border-on-light); --ink/--muted
        repointed from light-on-navy body text to dark-on-light body
        text (was --ink-on-light/--muted-on-light); --ink-on-light/
        --muted-on-light/--border-on-light retired as separate tokens
        (redundant with --ink/--muted/--border once the whole page is
        light) — --teal-on-light survives unchanged, it's still the
        only safe teal for text on a light surface. New tokens:
        --navy-tint (pale navy-blue chip surface — badges, table
        header rule, hover states) and --border-on-navy (light-alpha
        hairline for seams *inside* the two navy anchor bands).
        The whole "SECTION-MID INVERSE LIGHT BAND" override family
        (2026-08-10 second round) is deleted: it existed to make
        components readable when only *some* bands were light — now
        every band is light by default, so the override duplicated
        the base rule. See each component's rule for the current
        (single, unscoped) light-theme styling.
   Last Modified: 2026-09-27
   ============================================================ */

/* ── SELF-HOSTED FONTS ───────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}

/* ── TOKENS + BOOTSTRAP BRIDGE ───────────────────────────────
   Site palette bridged onto Bootstrap's variables so Bootstrap
   components (tables, forms, buttons) inherit the site identity.
   Contrast notes (WCAG AA, small text >= 4.5:1, large text >= 3:1) —
   2026-09-27 bright-theme inversion, verified with a WCAG relative-
   luminance script (see revamp artifacts):
     --ink #2d3748 on --white = 11.99:1 / on --tint = 10.98:1
     --muted #56687a on --white = 5.74:1 / on --tint = 5.26:1
     --teal-on-light #1c6f68 on --white = 5.96:1 / on --tint = 5.46:1
       (brand --teal #57c1b6 is only 2.9:1 on white — fails as text;
       --teal stays for non-text/logotype uses only, see note above)
     --navy on --white = 18.13:1 / on --tint = 16.61:1 / on
       --navy-tint = 16.01:1
     --white text on --navy = 18.13:1 / on --navy-mid = 15.96:1
     --muted-deep #74889f (footer/trust-bar secondary text) on the
       --navy anchor = 4.98:1
     --teal (icons/logo) on --navy anchor = 8.38:1
   --off-white (2026-08-10, unchanged) is the .article-panel reading-
   panel background — kept distinct from --tint since the two serve
   different roles (article reading panel vs. full-bleed alternating
   section) even though both are near-white. */
:root {
  --navy:       #0a1628;  /* authority accent: headings, footer/trust-bar
                             anchor bands, primary buttons, table headers */
  --navy-mid:   #142238;  /* button/link hover shade, one step off --navy */
  --navy-lt:    #f3f5f9;  /* 2026-09-27: repointed from a dark card fill
                             (#1e3450) to a pale recessed-card surface —
                             same role, inverted tone (nested form/list
                             cards: lead-form-card, blog/guide cards) */
  --navy-tint:  #eef1f6;  /* pale navy-blue chip surface — badges
                             (.exp-tag), stat chips (.cert-card), table
                             header hairline */
  --tint:       #f3f5f9;  /* alternating light section band (was --paper) */
  --teal:       #57c1b6;
  --teal-dk:    #3da89e;
  --teal-lt:    rgba(87, 193, 182, 0.08);
  --teal-on-light:   #1c6f68;
  --white:      #ffffff;
  --off-white:  #f4f5f7;
  --ink:        #2d3748;  /* primary body text on light surfaces (was the
                             light-on-navy --ink; --ink-on-light retired,
                             this token now carries that value) */
  --muted:      #56687a;  /* secondary/muted text on light surfaces (was
                             the light-on-navy --muted; --muted-on-light
                             retired, this token now carries that value) */
  --muted-deep: #74889f;  /* secondary text on the --navy anchor bands
                             (trust bar, footer) — the only remaining
                             "text on dark" tone in the file */
  --border:     rgba(10, 22, 40, 0.14); /* default hairline on light
                             surfaces (was --border-on-light; the old
                             white-alpha dark-theme --border is gone) */
  --border-on-navy: rgba(255, 255, 255, 0.14); /* hairlines *inside* the
                             --navy anchor bands (trust-bar top seam,
                             footer-inner divider) */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Bootstrap bridge */
  --bs-body-bg: var(--white);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-body-line-height: 1.7;
  --bs-border-color: var(--border);
  --bs-emphasis-color: var(--navy);
  --bs-secondary-color: var(--muted);
  --bs-link-color: var(--teal-on-light);
  --bs-link-hover-color: var(--navy);
  --bs-link-color-rgb: 28, 111, 104;
  --bs-link-hover-color-rgb: 10, 22, 40;
  --bs-heading-color: var(--navy);
}

html { scroll-behavior: smooth; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.2;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 600; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
a:hover { text-decoration: underline; }

/* Site measures 1100px wide — narrower than Bootstrap's default
   container breakpoints, so pin it. */
.container { max-width: 1100px; }

/* ── HEADER ──────────────────────────────────────────── */
/* 2026-09-27: flipped from a navy header to white — "navy wordmark,
   navy bottom rule" (owner). border-bottom is a solid 2px --navy rule
   (not the low-alpha --border hairline used elsewhere) so the header
   keeps a crisp anchor line under it while it's sticky over scrolling
   content. */
.site-header {
  background: var(--white);
  border-bottom: 2px solid var(--navy);
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  min-height: 64px;
}
.site-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
}
.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* white-space: nowrap (2026-08-10) — without it, the mid-width range
   (~900-1000px, after certs+nav but before the hamburger breakpoint)
   squeezed this line down to its longest word, wrapping the lockup
   to 3 lines and doubling the header height. */
.logo-main {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}
/* "MBE" stays brand teal on the white header — a logotype accent,
   not body text (WCAG's text-contrast rule exempts logos/wordmarks;
   raw --teal is 2.9:1 on white, which is why it's never used as
   ordinary text anywhere else in this file). */
.logo-main span { color: var(--teal); }
.logo-sub {
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
}
.site-logo:hover { text-decoration: none; }

/* ── TOP NAV ─────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-link {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
/* Nav hover/active reads navy, not teal — the white header carries a
   navy wordmark + rule, so its interactions stay in the same accent
   (2026-09-27 bright-theme inversion; also clears 4.5:1 as ordinary
   text, which the raw brand teal would not on white). */
.nav-link:hover { color: var(--navy); text-decoration: none; }
.nav-link.is-active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
/* Hamburger toggle — hidden on desktop, shown at the mobile
   breakpoint below. Icon-only button; label carried via
   aria-label since it sits next to plain-text nav links. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--navy);
  font-size: 1rem;
}
.nav-toggle:hover { color: var(--navy-mid); border-color: var(--navy); }

.header-cta {
  display: flex;
  align-items: center;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 0 20px;
  letter-spacing: 0.04em;
  transition: background 0.2s;
  white-space: nowrap;
  /* Pins the CTA to the header's right edge; logo/nav stay grouped
     left with header-inner's gap between them. */
  margin-left: auto;
}
.header-cta:hover { background: var(--navy-mid); color: var(--white); text-decoration: none; }
/* Raised 768px -> 992px (2026-08-10): at 768-992px the 6 nav links
   plus the logo lockup no longer fit on one row without squeezing —
   collapsing to the hamburger here, before that squeeze ever starts,
   is what actually fixes the mid-width wrap (that + white-space:
   nowrap above, which stops the squeeze from silently wrapping text
   instead of just... squeezing). */
@media (max-width: 992px) {
  /* Nav drops to a full-width row under the logo/CTA/toggle row
     when open — data-open is set by assets/js/nav.js. */
  .header-inner { flex-wrap: wrap; }
  .site-nav {
    order: 10;
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav .nav-link { width: 100%; padding: 10px 2px; }
  .nav-toggle { display: inline-flex; }
}

/* ── HERO ────────────────────────────────────────────── */
/* Outer full-bleed photo section — --navy stays as the fallback/
   letterbox color behind hero-bg.jpg (unchanged 2026-09-27; only the
   opaque content card below it flips to white). */
.hero {
  background: var(--navy) url("../images/hero-bg.jpg") center center / cover no-repeat;
  padding: 80px 24px 72px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
/* Opaque content panel — white card over the photo (2026-09-27, was
   solid navy). A soft shadow gives it definition against a busy photo
   now that the card itself is light instead of naturally standing out
   as dark-on-photo. Reuses the .container 1100px cap, so the photo
   still shows above/below and past the viewport edges on wide
   screens. */
.hero-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 56px 48px;
  box-shadow: 0 12px 32px rgba(10, 22, 40, 0.12);
}
/* Eyebrow reads navy — "section labels + their dash, eyebrow text"
   are explicitly navy in the bright-theme inversion (2026-09-27). */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 20px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--navy);
}
.hero h1 { margin-bottom: 20px; max-width: 680px; }
/* The highlighted hero word keeps a teal cue but through the
   contrast-safe on-light variant (5.96:1 on white) — raw --teal fails
   at 2.9:1 as real text (2026-09-27). */
.hero h1 em { color: var(--teal-on-light); font-style: normal; }
.hero-sub {
  font-size: 1rem;
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 40px;
  font-weight: 400;
  line-height: 1.8;
}
.cert-strip {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}
/* Stat chips sit inside the now-white .hero-panel — pale navy-tint
   surface reads as a recessed card (2026-09-27, was a dark navy-mid
   card). */
.cert-card {
  background: var(--navy-tint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px 20px;
  min-width: 180px;
}
/* Cert-card children — names match the markup (.cert-label /
   .cert-value / .cert-sub). The old stylesheet defined these as
   .cert-card-label/-value/-num, so hero cert cards shipped
   unstyled on every page (PLAN.md §2 dead-CSS finding). */
.cert-label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}
/* Credential-card key values are navy — "key values in the
   credential cards" is explicitly navy in the bright-theme inversion
   (2026-09-27, was teal). */
.cert-value {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
}
.cert-sub {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}

/* ── SECTIONS ────────────────────────────────────────── */
.section { padding: 72px 24px; }
/* Light/inverse alternating band — 2026-09-27: renamed --paper to
   --tint (still the same near-white token; every other component in
   a .section-mid now uses the same unscoped light-theme rule as a
   plain .section, so no per-component override block is needed here
   any more — see the removal note in the file header comment). */
.section-mid { background: var(--tint); }
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 12px;
}
.section-label::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--navy);
}
/* Muted intro paragraph under a section heading — replaces the
   inline styles the old pages carried (PLAN.md §2). */
.section-intro {
  color: var(--muted);
  max-width: 600px;
  margin-top: 8px;
  font-size: 15px;
}

/* ── CREDENTIAL GRID ─────────────────────────────────── */
/* 2026-09-27 bright-theme defect fix: the old "gap: 1px + parent
   background: var(--border)" trick faked hairlines between cards by
   showing the container's own background through a 1px seam — but
   when a row doesn't fill every column (auto-fit leaves the last row
   short whenever the item count isn't a multiple of the column
   count, which most of this site's cred-grids are), that same
   container background fills the whole empty cell, not just a 1px
   seam — invisible on the old dark theme's near-black gap color,
   very visible as a solid grey block on the light --border tint.
   Each .cred-item now carries its own border instead, so an empty
   grid cell is simply transparent (nothing renders there) whatever
   the item count. */
.cred-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 36px;
}
.cred-item {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 24px 22px;
}
.cred-label {
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}
/* Credential-card key values are navy (2026-09-27, was white text on
   a navy card). */
.cred-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}
.cred-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ── FEATURE LIST ────────────────────────────────────── */
.feature-list { margin-top: 32px; display: flex; flex-direction: column; }
.feature-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.feature-row:last-child { border-bottom: none; }
/* Decorative row number — navy at reduced opacity reads as a subtle
   watermark digit on a light background (2026-09-27, was full-opacity
   teal, tuned for a dark card). */
.feature-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy);
  opacity: 0.35;
  min-width: 36px;
  line-height: 1;
  padding-top: 2px;
}
/* h3 at h4's base size — card titles were demoted h4→h3 in the
   2026-08-15 SEO pass (no skipped heading levels) with no visual
   change, so the base h4 1rem size is pinned here. */
.feature-body h3 { color: var(--navy); margin-bottom: 4px; font-size: 1rem; }
.feature-body p { color: var(--muted); font-size: 14px; margin: 0; }

/* ── EXPERIENCE TABLE (Bootstrap .table + overrides) ─── */
/* Scroll container so wide tables never force horizontal page
   scroll on narrow phones (PLAN.md §2 responsive finding). */
.table-scroll { overflow-x: auto; }
.exp-table {
  margin-top: 28px;
  margin-bottom: 0;
  font-size: 14px;
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--border);
  --bs-table-hover-bg: rgba(10, 22, 40, 0.03);
  --bs-table-hover-color: var(--ink);
}
/* Table headers are navy — "table headers" is explicitly navy in the
   bright-theme inversion (2026-09-27, was muted grey). */
.exp-table th {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 600;
}
.exp-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  vertical-align: top;
}
.exp-table tr:last-child td { border-bottom: none; }
/* Badge treatment — pale navy-tint chip + navy text/border
   (2026-09-27, was a pale teal chip; "badges: navy-tint background +
   navy text or navy outline" per the bright-theme brief). */
.exp-tag {
  display: inline-block;
  background: var(--navy-tint);
  color: var(--navy);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 2px;
}

/* ── INFO BOXES ──────────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
/* White card + teal-on-light accent — this is the same treatment the
   2026-08-10 .section-mid override used (proven safe on a light
   band); 2026-09-27 promotes it to the only (unscoped) rule, since
   every section is a light band now regardless of .section-mid. */
.info-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 24px 22px;
  border-left: 3px solid var(--teal-on-light);
}
.info-box h3 { color: var(--teal-on-light); margin-bottom: 8px; font-size: 0.95rem; }
.info-box p { font-size: 14px; color: var(--muted); margin: 0; }

/* ══════════════════════════════════════════════════════════════
   ABOUT — ENGAGE SECTION PHOTO BAND — 2026-08-10 second design round

   ROLE: The about page's last section before the footer ("How to
         Engage") gets a warm wood-shavings photo band. Applied as a
         .section-engage modifier alongside the existing .section
         .section-mid classes (about.php).
   2026-09-27: retoned for the bright-theme inversion — the band's
         fallback/letterbox color is --tint (was --paper, same hex);
         the opaque content card flips from --paper to --white to
         match every other "opaque card over a photo" panel in this
         file (.hero-panel/.lead-inner/.page-hero-panel), with the
         same soft shadow for definition against the photo.
   USED BY: about.php "How to Engage" section only.
   ══════════════════════════════════════════════════════════════ */
.section-engage {
  position: relative;
  overflow: hidden;
  background: var(--tint) url("../images/engage-bg.jpg") center center / cover no-repeat;
}
.engage-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 56px 48px;
  box-shadow: 0 12px 32px rgba(10, 22, 40, 0.12);
}

/* ── LEAD FORM ───────────────────────────────────────────────
   The inquiry form sits on the site's fixed-background photo band.
   background-attachment: fixed parks the image so the last content
   section scrolls into it — but iOS Safari never paints fixed
   backgrounds correctly, so the media query below falls back to
   scroll on touch/no-hover devices.
   2026-09-27 bright-theme inversion: .lead-inner (the outer card)
   flips from solid navy to white, matching every other opaque
   photo-panel in this file; .lead-form-card (the nested form itself)
   flips from --navy-lt to the same token — --navy-lt is now a pale
   --tint surface (see TOKENS), so the form reads as a recessed
   light-grey card one step in from the white outer card, the same
   two-tier depth relationship as before, just inverted light-for-
   dark. */
.lead-section {
  position: relative;
  overflow: hidden;
  background: var(--navy) url("../images/billboard-bg.jpg") center center / cover no-repeat;
  background-attachment: fixed;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 88px 24px;
}
@media (hover: none), (max-width: 768px) {
  .lead-section { background-attachment: scroll; }
}
@media (max-width: 640px) {
  .lead-section { padding: 64px 20px; }
}
.lead-inner {
  max-width: 580px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 48px 40px;
  box-shadow: 0 12px 32px rgba(10, 22, 40, 0.12);
}
.lead-inner h2 { margin-bottom: 8px; }
.lead-inner h2 em { color: var(--teal-on-light); font-style: normal; }
.lead-inner > p { color: var(--muted); margin-bottom: 32px; font-size: 15px; }
.lead-form-card {
  background: var(--navy-lt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px;
}
/* Form state machine — form.js sets data-state on .lead-form-card
   ('sending' | 'error' | 'success'); CSS owns the visibility so no
   script ever touches element.style. */
.form-error {
  display: none;
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.35);
  border-radius: 3px;
  padding: 10px 14px;
  font-size: 13px;
  color: #b42318;
  margin-bottom: 12px;
}
.lead-form-card[data-state="error"] .form-error { display: block; }
.form-success { display: none; text-align: center; padding: 24px 0; }
.lead-form-card[data-state="success"] .form-success { display: block; }
.lead-form-card[data-state="success"] .lead-form { display: none; }
.form-success .success-icon { font-size: 2rem; color: var(--teal-on-light); margin-bottom: 12px; }
.form-success h3 { color: var(--teal-on-light); }
.form-success p { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* Honeypot — visually removed anti-bot field; humans never see it,
   the handler fake-succeeds when bots fill it. Replaces the old
   inline style="display:none" (PLAN.md §2). */
.honeypot-field { display: none; }

/* Field spacing + tighter gutters than Bootstrap's default so the
   two-column rows keep the original 12px rhythm. */
.lead-form .row { --bs-gutter-x: 12px; }
.form-group { margin-bottom: 14px; }
/* Field labels are navy — "navy labels" per the bright-theme brief
   (2026-09-27, was muted grey). */
.lead-form .form-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 5px;
}
/* Light inputs — white fields nested inside the --navy-lt (pale
   tint) form card, so the field boundary stays visible (2026-09-27,
   was a frosted-glass white-on-navy input). */
.lead-form .form-control,
.lead-form .form-select {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.2s;
}
.lead-form .form-control::placeholder { color: var(--muted); }
.lead-form .form-control:focus,
.lead-form .form-select:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--teal);
  background-color: rgba(87, 193, 182, 0.05);
}
/* 2026-09-27: the var(--navy) option background rule (dark dropdown
   to match a dark input) is gone — the select now uses the browser's
   default light dropdown, correct for a white field. */
.lead-form textarea.form-control { min-height: 80px; resize: vertical; }
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0;
  padding-left: 0;
}
.consent-row .form-check-input {
  margin-top: 2px;
  margin-left: 0;
  flex-shrink: 0;
  float: none;
}
.consent-row .form-check-input:checked {
  background-color: var(--teal);
  border-color: var(--teal);
}
.consent-row .form-check-label { color: var(--muted); }
/* Primary button — navy background, white text, hover --navy-mid
   ("navy submit" per the bright-theme brief; 2026-09-27, was teal). */
.form-submit {
  width: 100%;
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 3px;
  padding: 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.2s;
}
.form-submit:hover { background: var(--navy-mid); color: var(--white); }
.form-submit:disabled { background: var(--navy-tint); color: var(--muted); opacity: 1; }
.form-note {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0;
}

/* ── TRUST BAR ───────────────────────────────────────── */
/* One of the two navy authority anchors kept solid dark (2026-09-27
   — was a hard-coded near-black #060f1a; now tracks var(--navy)). The
   top hairline uses --border-on-navy (light-alpha) since it's drawn
   on the navy band's own edge. */
.trust-bar {
  background: var(--navy);
  padding: 14px 24px;
  border-top: 1px solid var(--border-on-navy);
}
.trust-items {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}
.trust-item {
  font-size: 11px;
  color: var(--muted-deep);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.trust-item span { color: var(--teal); }

/* ── ENGAGE CTA (about page) ─────────────────────────── */
/* Navy background, white text, hover --navy-mid — same primary-button
   treatment as .header-cta/.form-submit (2026-09-27, was teal). */
.engage-cta {
  display: inline-flex;
  align-items: center;
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 12px 24px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  transition: background 0.2s;
  white-space: nowrap;
  margin-top: 20px;
}
.engage-cta:hover { background: var(--navy-mid); color: var(--white); text-decoration: none; }

/* ── FOOTER (Bootstrap grid inside) ──────────────────── */
/* The other navy authority anchor kept solid dark (2026-09-27 — was
   a hard-coded near-black #060f1a; now tracks var(--navy)). The teal
   top rule stays — a small secondary-teal cue right at the seam
   where the page goes dark. */
.site-footer {
  background: var(--navy);
  padding: 48px 24px 24px;
  border-top: 2px solid var(--teal);
}
.footer-inner {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-on-navy);
}
.footer-logo {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 10px;
}
/* "MBE" logotype accent on navy — same brand-teal exception as the
   header logo, and it's on --navy here anyway (8.38:1, no exception
   needed). */
.footer-logo span { color: var(--teal); }
.footer-brand p { font-size: 13px; color: var(--muted-deep); max-width: 280px; line-height: 1.7; }
/* Footer column labels are nav labels, not document structure —
   demoted h5→p in the 2026-08-15 SEO pass (no skipped heading
   levels); .footer-col-title carries the identical look. */
.footer-col .footer-col-title {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-deep);
  margin-bottom: 14px;
  font-weight: 600;
  font-family: var(--font-body);
}
.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--muted-deep);
  margin-bottom: 8px;
  transition: color 0.15s;
}
.footer-col a:hover { color: var(--teal); text-decoration: none; }
.footer-bottom {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--muted-deep);
}
@media (max-width: 767.98px) {
  .footer-col { margin-top: 28px; }
}

@media (max-width: 640px) {
  .hero { padding: 52px 20px 48px; }
  .hero-panel { padding: 32px 24px; }
  .section { padding: 52px 20px; }
  .lead-form-card { padding: 22px 18px; }
  .lead-inner { padding: 28px 24px; }
  .engage-panel { padding: 32px 24px; }
  .cert-strip { gap: 10px; }
}

/* ── CI4 CONVERSION ADDITIONS (2026-08-06) ──────────────────
   The footer's iSpec LLC column gained a second "Resources"
   heading (Guides / Blog links) so the CMS pages added by the
   CI4 conversion are reachable from every page. Glossary link
   removed 2026-08-10 (page delisted — see public.css header). */
.footer-col-gap { margin-top: 24px; }