/* ==========================================================================
   TAD'S CONSTRUCTION INC. - Site Design System
   Brand: black + metallic blue + brushed steel (taken from the company logo)
   Everything is fluid. No fixed-width layouts, no unconstrained hero.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Brand - sampled from the Tad's logo (steel bar + azure bar) */
  --blue:        #1b8fd6;
  --blue-bright: #45b4f0;
  --blue-deep:   #0a4e7a;
  --blue-glow:   rgba(27, 143, 214, .28);
  --steel:       #aebccb;

  /* Dark surfaces */
  --ink:    #05080c;
  --ink-2:  #0a1017;
  --ink-3:  #101823;
  --line:   #1c2836;
  --line-2: #2a3b4e;

  /* Dark-surface text */
  --white: #ffffff;
  --text:  #d8e2ec;
  --muted: #93a3b4;
  --dim:   #6b7d90;

  /* Light surfaces (capability statement / procurement pages) */
  --paper:       #ffffff;
  --paper-2:     #f4f7fa;
  --paper-3:     #eaf0f6;
  --paper-line:  #dbe4ed;
  --paper-text:  #131c26;
  --paper-muted: #4d5f72;

  /* Fluid layout */
  --wrap:        1280px;
  --wrap-narrow: 1000px;
  --gutter:      clamp(18px, 4vw, 48px);
  --section-y:   clamp(60px, 7.5vw, 118px);
  --gap:         clamp(18px, 2.4vw, 34px);

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 16px;

  --shadow:    0 18px 44px rgba(0, 0, 0, .42);
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, .28);
  --ease:      cubic-bezier(.4, 0, .2, 1);

  --font-head: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --header-h: 68px;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-family: var(--font-body);
  scroll-behavior: smooth;
  /* keeps #anchor targets from hiding under the sticky header */
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  /* The closed mobile nav drawer sits just off the right edge. It is
     position: fixed, so body's overflow-x cannot contain it - the clip has to
     happen on the root.
     Must be `hidden`, NOT `clip`: when one axis is `clip`, the other axis
     computes to `clip` as well and the page loses vertical scrolling
     entirely. With `hidden`, the other axis resolves to `auto` and the
     document still scrolls normally. */
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: clamp(15px, .42vw + 14px, 17px);
  line-height: 1.68;
  color: var(--text);
  background: var(--ink);
  overflow-x: clip;            /* stops sideways scroll from full-bleed blocks */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

:focus-visible { outline: 3px solid var(--blue-bright); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--blue); color: #fff; }

/* ---------- 3. TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .005em;
  color: var(--white);
  text-wrap: balance;
}

/* Reusable text roles keep newly edited content on the same type scale. */
.display-kicker {
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
}
.overline {
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.text-link { color: var(--blue-bright); font-weight: 600; }
.text-link:hover { color: var(--white); }
.cs .text-link, .surface-paper .text-link, .surface-paper-2 .text-link { color: var(--blue-deep); }
.cs .text-link:hover, .surface-paper .text-link:hover, .surface-paper-2 .text-link:hover { color: var(--paper-text); }

.h-xl { font-size: clamp(2.5rem, 5.6vw, 5.1rem); font-weight: 800; text-transform: uppercase; letter-spacing: .012em; }
.h-lg { font-size: clamp(1.95rem, 3.5vw, 3.15rem); text-transform: uppercase; }
.h-md { font-size: clamp(1.45rem, 2.1vw, 2rem); }
.h-sm { font-size: clamp(1.15rem, 1.4vw, 1.4rem); }

p { text-wrap: pretty; }
.lead { font-size: clamp(1.02rem, .55vw + .9rem, 1.22rem); color: var(--muted); max-width: 68ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-head);
  font-size: clamp(.82rem, .9vw, .95rem);
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: clamp(22px, 3vw, 40px); height: 2px;
  background: var(--blue); flex: none;
}

/* ---------- 4. LAYOUT PRIMITIVES ---------- */
/* The container is the core liquid-layout fix: it grows with the viewport but
   stops at --wrap, so copy never stretches across an ultrawide monitor. */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 4.5vw, 72px); }

/* ---------- 4b. RULED SECTION RHYTHM ---------- */
/* Opt-in on <main>. Two problems it solves on long single-column pages:
   1. .section and .section.surface-ink resolve to the SAME colour (--ink is
      also the body background), so stacked blocks ran together with nothing
      marking the seam.
   2. --section-y tops out at 118px, which puts ~236px of empty ground between
      every block on a desktop screen.
   This tightens the rhythm and draws a hairline at each seam. Bands that carry
   their own border (.govband, .credbar) are left alone. */
.ruled-sections { --section-y: clamp(44px, 4.8vw, 76px); }
.ruled-sections .section-head { margin-bottom: clamp(24px, 2.6vw, 38px); }
.ruled-sections .section + .section:not(.govband),
.ruled-sections .pagehead + .section {
  border-top: 1px solid var(--line);
}

.surface-ink     { background: var(--ink); }
.surface-ink-2   { background: var(--ink-2); }
.surface-grad    { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); }
.surface-paper   { background: var(--paper); color: var(--paper-text); }
.surface-paper-2 { background: var(--paper-2); color: var(--paper-text); }

.section-head { max-width: 74ch; margin-bottom: clamp(30px, 3.6vw, 54px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head p { margin-top: 14px; color: var(--muted); }

/* About mission: intentionally restrained, but part of the site's dark visual rhythm. */
.about-mission {
  border-block: 1px solid var(--line);
}
.about-mission .section-head { max-width: 820px; }
.about-mission .section-head p { color: var(--text); }

/* Auto-fit grids: column count comes from available width, not media queries.
   Same rule behaves correctly on a phone and on a 4K display. */
.grid { display: grid; gap: var(--gap); }
.grid--auto   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--auto-l { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--2      { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

/* ---------- 5. BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head);
  font-size: clamp(.94rem, .5vw + .82rem, 1.06rem);
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: 14px clamp(20px, 2.4vw, 32px);
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease),
              color .25s var(--ease), transform .18s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 8px 26px var(--blue-glow); }
.btn--primary:hover { background: var(--blue-bright); box-shadow: 0 12px 32px var(--blue-glow); }

.btn--ghost { border-color: rgba(255,255,255,.32); color: #fff; backdrop-filter: blur(4px); }
.btn--ghost:hover { border-color: var(--blue-bright); background: rgba(27,143,214,.14); }

.btn--solid-light { background: #fff; color: var(--ink); }
.btn--solid-light:hover { background: var(--steel); }

.btn--dark { background: var(--paper-text); color: #fff; }
.btn--dark:hover { background: var(--blue-deep); }

.btn--outline-dark { border-color: var(--paper-line); color: var(--paper-text); background: #fff; }
.btn--outline-dark:hover { border-color: var(--blue); color: var(--blue-deep); }

.btn--sm { padding: 10px 18px; font-size: .88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* ---------- 6. TOP UTILITY BAR ---------- */
.topbar { background: var(--ink); border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.topbar__in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 22px; min-height: 40px; padding-block: 7px;
}
.topbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.topbar a { transition: color .2s var(--ease); }
.topbar a:hover { color: var(--blue-bright); }
.topbar strong { color: var(--steel); font-weight: 600; }
.topbar__sep { color: var(--line-2); }
@media (max-width: 860px) { .topbar__group--secondary { display: none; } }

/* ---------- 7. HEADER + NAV ---------- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(5, 8, 12, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.header.is-stuck { box-shadow: 0 10px 30px rgba(0,0,0,.5); background: rgba(5,8,12,.98); }
.header__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(14px, 2vw, 34px); min-height: var(--header-h);
}

/* Official Tad's Construction logo (transparent PNG, cropped tight).
   The artwork is white/metallic, so it is only ever placed on a dark
   surface - the header and footer are both near-black. */
.brand { display: flex; align-items: center; flex: none; }
.brand__img {
  height: clamp(30px, 3vw, 42px);
  width: auto;
  display: block;
  /* the source art has no drop shadow; this lifts it off the black slightly */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
  transition: opacity .2s var(--ease);
}
.brand:hover .brand__img { opacity: .86; }
.header .brand__img { height: clamp(38px, 3.8vw, 54px); }
.footer .brand__img { height: clamp(38px, 4vw, 52px); }

.nav { display: flex; align-items: center; gap: clamp(4px, 1vw, 8px); }
.nav__link {
  position: relative;
  font-family: var(--font-head);
  font-size: clamp(.92rem, .9vw, 1.02rem);
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text);
  padding: 10px clamp(8px, .9vw, 13px);
  border-radius: var(--radius-sm);
  transition: color .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.nav__link:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav__link[aria-current="page"] { color: var(--blue-bright); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px;
  height: 2px; background: var(--blue); border-radius: 2px;
}

.nav__item { position: relative; }
.nav__toggle { display: inline-flex; align-items: center; gap: 6px; }
.nav__caret { width: 9px; height: 9px; transition: transform .25s var(--ease); flex: none; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 268px;
  background: var(--ink-3); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav__item.is-open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a {
  display: block; padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: .93rem; color: var(--text);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav__menu a:hover { background: rgba(27,143,214,.15); color: #fff; }
.nav__menu a span { display: block; font-size: .76rem; color: var(--dim); margin-top: 2px; }

.header__cta { flex: none; }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); flex: none;
}
.burger span {
  display: block; width: 20px; height: 2px; margin-inline: auto;
  background: #fff; border-radius: 2px;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1040px) {
  .burger { display: flex; }
  .header__cta { display: none; }

  /* The drawer is position:fixed and has to resolve against the VIEWPORT.
     `backdrop-filter` makes an element the containing block for its fixed
     descendants, so the blurred header was trapping the open drawer inside
     its own 56px-tall box. The site is near-black anyway, so dropping the
     blur here costs nothing and also saves the phone a compositing pass. */
  .header, .header.is-stuck { backdrop-filter: none; background: var(--ink); }

  .nav {
    /* --drawer-top is measured off the real header bottom in site.js, so the
       panel clears the utility bar at the top of the page and sits flush
       under the header once it is stuck. The fallback covers a no-JS load. */
    position: fixed;
    top: var(--drawer-top, var(--header-h));
    right: 0; bottom: auto; left: auto;
    z-index: 1;
    /* An explicit height, not `bottom: 0`. Height wins over `bottom` when both
       are set, so the panel fills the screen even if some ancestor ever
       becomes the containing block for fixed children again (a transform or a
       backdrop-filter on the header does exactly that, and that is what used
       to squash this drawer down to the height of the header bar). */
    height: calc(100vh - var(--drawer-top, var(--header-h)));
    height: calc(100dvh - var(--drawer-top, var(--header-h)));
    max-height: none;
    width: min(340px, 88vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    background: var(--ink-2); border-left: 1px solid var(--line-2);
    padding: 6px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;       /* scrolling the drawer never drags the page */
    transform: translateX(100%);
    /* visibility keeps the closed drawer out of the keyboard tab order */
    visibility: hidden;
    transition: transform .3s var(--ease), visibility .3s;
    box-shadow: -18px 0 44px rgba(0,0,0,.6);
  }
  .nav.is-open { transform: translateX(0); visibility: visible; }

  .nav__link {
    display: flex; align-items: center;
    min-height: 52px;                   /* thumb-sized target on every row */
    padding: 12px 10px; font-size: 1.02rem; letter-spacing: .08em;
    border-bottom: 1px solid var(--line); border-radius: 0;
  }
  .nav__link:active { background: rgba(255,255,255,.06); }
  .nav__link[aria-current="page"]::after { display: none; }
  .nav__link[aria-current="page"] {
    background: rgba(27,143,214,.1);
    box-shadow: inset 3px 0 0 var(--blue);
  }

  .nav__toggle { justify-content: space-between; }
  .nav__caret { width: 12px; height: 12px; margin-left: 10px; }

  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line-2);
    border-radius: 0; background: rgba(255,255,255,.025);
    display: none; margin: 0 0 0 12px; padding: 2px 0; min-width: 0;
  }
  .nav__item.is-open .nav__menu { display: block; }
  .nav__menu a { padding: 12px 14px; font-size: .95rem; }
  .nav__menu a span { font-size: .78rem; line-height: 1.45; }

  .nav__mobile-cta {
    margin-top: 20px; width: 100%; padding-inline: 16px;
    white-space: normal; text-align: center;
  }
  .nav__mobile-cta:hover { transform: none; }
}
@media (min-width: 1041px) { .nav__mobile-cta { display: none; } }

.nav-scrim {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(0,0,0,.62); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* Scroll lock for the open drawer.
   `body { overflow: hidden }` did nothing here: html carries overflow-x:hidden,
   so the viewport scrolls the ROOT element and body's overflow is never
   propagated up to it. Pinning body is also the only variant iOS Safari
   honours; site.js stores and restores the scroll offset around it. */
html.has-nav-open { overflow: hidden; }
html.has-nav-open body {
  /* No overflow:hidden here on purpose - that would turn body into a scroll
     container and the sticky header, whose offset parent is then body rather
     than the viewport, would slide off screen with the burger on it. */
  position: fixed; left: 0; width: 100%;
}

/* ---------- 7b. PHONE HEADER ----------
   On a phone the utility bar + header were eating roughly a fifth of the
   screen before any content appeared. Everything here shrinks the chrome
   while keeping the logo balanced with clear space above and below it. */
@media (max-width: 640px) {
  :root { --header-h: 56px; }

  .topbar { font-size: .72rem; }
  .topbar__in { min-height: 30px; padding-block: 4px; gap: 4px 12px; }

  .header__in { padding-block: 6px; }          /* breathing room above + below the logo */
  .brand__img { height: 30px; }
  .header .brand__img { height: 36px; }

  .burger { width: 40px; height: 40px; }
  .burger span { width: 18px; }
}

/* Very small phones - trim once more so the hero headline is visible on load. */
@media (max-width: 380px) {
  :root { --header-h: 52px; }
  .brand__img { height: 27px; }
  .header .brand__img { height: 32px; }
  .topbar__in { min-height: 28px; }
}

.skip-link {
  position: absolute; left: 50%; translate: -50% -140%;
  z-index: 200; background: var(--blue); color: #fff;
  padding: 12px 22px; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600; transition: translate .2s var(--ease);
}
.skip-link:focus { translate: -50% 0; }

/* ==========================================================================
   8. HERO SLIDER
   Full-bleed photo, copy locked to .wrap. On a 3440px monitor the image keeps
   filling edge to edge while the text stays at a readable measure - this is
   the fix for the current slider stretching on wide displays.
   ========================================================================== */
.hero {
  position: relative;
  min-height: clamp(540px, 82vh, 860px);
  display: grid;
  isolation: isolate;
  background: var(--ink);
  overflow: hidden;
}

.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;              /* never letterboxed, never distorted */
  object-position: center 45%;
  transform: scale(1.06);
  transition: transform 8s linear;
}
.hero__slide.is-active img { transform: scale(1); }

/* Scrim is dark where the copy sits, clear over the photo, and it resolves
   into the page background at the bottom - so there is no white seam under
   the slider the way there is on the current site. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(5,8,12,.94) 0%, rgba(5,8,12,.82) 42%, rgba(5,8,12,.34) 72%, rgba(5,8,12,.55) 100%),
    linear-gradient(180deg, rgba(5,8,12,.72) 0%, rgba(5,8,12,0) 26%, rgba(5,8,12,0) 62%, var(--ink) 100%);
}
@media (max-width: 860px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(5,8,12,.84) 0%, rgba(5,8,12,.74) 45%, var(--ink) 100%); }
}

.hero__body { align-self: center; width: 100%; padding-block: clamp(72px, 11vh, 130px); }
.hero__content { max-width: 62ch; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(27,143,214,.16);
  border: 1px solid rgba(69,180,240,.42);
  color: var(--blue-bright);
  font-size: .8rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 100px; margin-bottom: 22px;
}
.hero__badge b { color: #fff; font-weight: 700; }

.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: normal; color: var(--blue-bright); display: block; }
.hero__text { font-size: clamp(1rem, .6vw + .88rem, 1.2rem); color: #c3d0dd; max-width: 58ch; margin-bottom: 30px; }
.hero .btn-row { margin-bottom: clamp(26px, 4vh, 44px); }

/* Credential chips - what a buyer scans for first */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm);
  padding: 8px 14px; font-size: .82rem; color: var(--steel);
  backdrop-filter: blur(6px);
}
.chip b { color: #fff; font-weight: 700; letter-spacing: .03em; }
.chip--blue { border-color: rgba(69,180,240,.5); background: rgba(27,143,214,.15); }

.hero__nav {
  position: absolute; z-index: 3;
  bottom: clamp(18px, 3vh, 34px); right: var(--gutter);
  display: flex; align-items: center; gap: 10px;
}
.hero__arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(5,8,12,.5); backdrop-filter: blur(6px);
  display: grid; place-items: center; color: #fff;
  transition: background .22s var(--ease), border-color .22s var(--ease);
}
.hero__arrow:hover { background: var(--blue); border-color: var(--blue); }
.hero__arrow svg { width: 16px; height: 16px; }

.hero__dots { display: flex; gap: 8px; margin-right: 6px; }
.hero__dot { width: 30px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.28);
  transition: background .25s var(--ease), width .25s var(--ease); }
.hero__dot.is-active { background: var(--blue-bright); width: 46px; }

@media (max-width: 620px) {
  .hero__nav { left: var(--gutter); right: var(--gutter); justify-content: space-between; }
}

/* ---------- 9. CREDENTIAL BAR (seamless - replaces the white separator) ---------- */
.credbar {
  background: linear-gradient(90deg, var(--ink-2) 0%, #0d1a26 50%, var(--ink-2) 100%);
  border-block: 1px solid var(--line);
  padding-block: clamp(18px, 2.2vw, 26px);
}
.credbar__grid {
  display: grid; gap: clamp(14px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 172px), 1fr));
  text-align: center;
}
.credbar__item { position: relative; padding-inline: 10px; }
.credbar__item + .credbar__item::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px; background: var(--line-2);
}
@media (max-width: 700px) { .credbar__item + .credbar__item::before { display: none; } }
.credbar__k { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); font-weight: 600; margin-bottom: 6px; }
.credbar__v { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.42rem); color: #fff; letter-spacing: .04em; }
.credbar__v small { display: block; font-family: var(--font-body); font-size: .72rem; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 3px; }

/* ---------- 10. CARDS ---------- */
.card {
  background: var(--ink-3); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 32px);
  transition: border-color .28s var(--ease), transform .28s var(--ease), background .28s var(--ease);
  height: 100%;
}
.card:hover { border-color: var(--line-2); transform: translateY(-4px); background: #131d29; }
.card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  display: grid; place-items: center; margin-bottom: 18px;
  background: rgba(27,143,214,.14); border: 1px solid rgba(69,180,240,.3);
  color: var(--blue-bright);
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 10px; font-size: clamp(1.1rem, 1.25vw, 1.28rem); }
.card p { color: var(--muted); font-size: .95rem; }
.card ul.checks { margin-top: 16px; }

.card--step { position: relative; padding-top: 34px; }
.card__num {
  position: absolute; top: -1px; left: clamp(22px, 2.4vw, 32px);
  font-family: var(--font-head); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-2);
  translate: 0 -14px;
}

/* ---------- 11. SPLIT (fluid two-column) ---------- */
.split {
  display: grid; gap: clamp(28px, 4.5vw, 68px); align-items: center;
  /* minmax(0,..) is what stops a long word or wide image blowing the column out */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}
.split--reverse .split__media { order: -1; }
@media (max-width: 940px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media { order: 0; }
}
.split__body > * + * { margin-top: 16px; }
.split__body p { color: var(--muted); }
.split__body strong { color: var(--white); font-weight: 600; }

.partner-callout {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  margin-top: 24px; padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid rgba(69,180,240,.3); border-left: 4px solid var(--blue-bright);
  border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(27,143,214,.14), rgba(255,255,255,.025));
}
.partner-callout > div { min-width: 0; }
.partner-callout__label { display: block; margin-bottom: 6px; color: var(--blue-bright); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.partner-callout h3 { color: var(--white); font-family: var(--font-head); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.05; }
.partner-callout p { margin-top: 8px; color: var(--muted); font-size: .92rem; }
.partner-callout .btn { flex: 0 0 auto; }
@media (max-width: 620px) {
  .partner-callout { align-items: flex-start; flex-direction: column; }
  .partner-callout .btn { width: 100%; }
}

.split__media { position: relative; }
.split__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.media-plate {
  position: absolute; right: -6px; bottom: -22px;
  background: var(--blue); color: #fff;
  border-radius: var(--radius-sm); padding: 16px 22px;
  box-shadow: var(--shadow-sm);
}
.media-plate b { font-family: var(--font-head); font-size: 2.1rem; font-weight: 800; line-height: 1; display: block; }
.media-plate span { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; opacity: .92; }
@media (max-width: 560px) { .media-plate { position: static; margin-top: 14px; display: inline-block; } }

.stats {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
}
.stats__item { background: var(--ink-3); padding: clamp(18px, 2.2vw, 26px); text-align: center; }
.stats__n { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.7rem); color: var(--blue-bright); line-height: 1; }
.stats__l { font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

.checks { display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--muted); font-size: .95rem; }
.checks svg { width: 20px; height: 20px; color: var(--blue-bright); margin-top: 3px; }
.checks strong { color: var(--white); font-weight: 600; }

/* ==========================================================================
   12. PROJECT STORY - photos arranged as a build sequence, each captioned.
   ========================================================================== */
.phase { display: grid; gap: clamp(24px, 3vw, 40px); }
.phase + .phase { margin-top: clamp(46px, 6vw, 86px); padding-top: clamp(46px, 6vw, 86px); border-top: 1px solid var(--line); }

.phase__head { display: grid; gap: 16px; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; }
@media (max-width: 760px) { .phase__head { grid-template-columns: minmax(0, 1fr); } }
.phase__step {
  display: inline-flex; align-items: baseline; gap: 10px;
  font-family: var(--font-head); text-transform: uppercase; letter-spacing: .18em;
  font-size: .8rem; font-weight: 600; color: var(--blue-bright);
}
.phase__step b { font-size: 2.4rem; font-weight: 800; letter-spacing: 0; color: #fff; line-height: 1; }
.phase__title { font-size: clamp(1.5rem, 2.3vw, 2.15rem); text-transform: uppercase; }
.phase__lead { color: var(--muted); max-width: 76ch; }

.shots { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 920px) { .shots--feature > :first-child { grid-column: span 2; } }

.shot {
  position: relative; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--ink-3);
  display: flex; flex-direction: column;
  transition: border-color .28s var(--ease), transform .28s var(--ease);
}
.shot:hover { border-color: var(--line-2); transform: translateY(-4px); }
.shot__img { position: relative; overflow: hidden; background: var(--ink-2); }
.shot__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s var(--ease); }
.shots--feature > :first-child .shot__img img { aspect-ratio: 16 / 9; }
.shot:hover .shot__img img { transform: scale(1.05); }
.shot__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: rgba(5,8,12,.82); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 100px;
  padding: 6px 13px; font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.shot__tag b { color: var(--blue-bright); }
.shot__body { padding: 18px clamp(16px, 1.6vw, 22px) 22px; flex: 1; }
.shot__body h4 { font-size: clamp(1.02rem, 1.15vw, 1.16rem); margin-bottom: 8px; }
.shot__body p { font-size: .89rem; color: var(--muted); }
.shot__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tagx {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel); background: rgba(255,255,255,.05);
  border: 1px solid var(--line); border-radius: 4px; padding: 4px 9px;
}

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(26px, 3vw, 40px); }
.filter {
  font-family: var(--font-head); font-size: .92rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 100px;
  border: 1px solid var(--line-2); color: var(--muted);
  transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.filter:hover { color: #fff; border-color: var(--blue); }
.filter.is-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.shot.is-hidden { display: none; }

/* Checkpoint card: fills a grid cell with a written hold-point instead of a
   photo, so a phase row completes without padding it out with stock imagery. */
.shot--note {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(47,128,237,.14), transparent 62%),
    var(--ink-2);
  border-color: var(--line-2);
}
.shot--note .shot__body { padding-top: clamp(20px, 2vw, 26px); display: flex; flex-direction: column; }
.shot__badge {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start; margin-bottom: 12px;
  background: rgba(5,8,12,.55);
  border: 1px solid rgba(255,255,255,.16); border-radius: 100px;
  padding: 6px 13px; font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue-bright);
}
.shot__badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-bright); flex: none;
}
.shot__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.shot__list li {
  position: relative; padding-left: 20px;
  font-size: .85rem; color: var(--muted); line-height: 1.5;
}
.shot__list li::before {
  content: ""; position: absolute; left: 2px; top: .52em;
  width: 7px; height: 7px; border-radius: 2px;
  border: 1px solid var(--blue); background: rgba(47,128,237,.28);
}
.shot--note .shot__meta { margin-top: auto; padding-top: 18px; }

/* ---------- 13. PAGE BANNER (interior pages) ---------- */
.pagehead {
  position: relative; isolation: isolate;
  padding-block: clamp(58px, 8vw, 104px);
  background: var(--ink-2); border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.pagehead__bg { position: absolute; inset: 0; z-index: -2; }
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; }
.pagehead::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(5,8,12,.96) 0%, rgba(5,8,12,.84) 55%, rgba(5,8,12,.62) 100%);
}
.pagehead h1 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); text-transform: uppercase; }
.pagehead p { color: var(--muted); max-width: 66ch; margin-top: 14px; }


/* ---------- 13b. SERVICE-AREA MAP BACKDROP (locations index) ---------- */
/* The map poster sits behind the banner AND the region cards. It is anchored
   to the container (not sticky/fixed) so it scrolls with the content instead
   of drifting against it. */
.mapscape {
  position: relative; isolation: isolate;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mapscape__bg { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.mapscape__bg img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  opacity: .58;
}
/* Soft vignette only - the middle of the map stays uncovered. */
.mapscape::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(88% 54% at 50% 46%,
    rgba(5,8,12,0) 0%, rgba(5,8,12,.34) 58%, rgba(5,8,12,.78) 100%);
}
.mapscape .pagehead { background: transparent; border-bottom: 0; }
.mapscape .pagehead::after {
  background: linear-gradient(100deg,
    rgba(5,8,12,.94) 0%, rgba(5,8,12,.82) 40%, rgba(5,8,12,.34) 72%, rgba(5,8,12,.04) 100%);
}
/* Cards float over the map instead of hiding it. */
.mapscape .card {
  background: rgba(10,16,23,.72);
  -webkit-backdrop-filter: blur(9px) saturate(118%);
  backdrop-filter: blur(9px) saturate(118%);
  border-color: var(--line-2);
}
.mapscape .card:hover { background: rgba(19,29,41,.86); }

@media (max-width: 720px) {
  .mapscape__bg img { opacity: .38; }
  .mapscape .card { background: rgba(10,16,23,.86); }
}
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8rem; color: var(--dim); margin-bottom: 16px; }
.crumbs a:hover { color: var(--blue-bright); }
.crumbs span { color: var(--line-2); }

/* ---------- 14. GOVERNMENT / PROCUREMENT BAND ---------- */
.govband {
  background: linear-gradient(120deg, var(--blue-deep) 0%, #0a2f4d 48%, var(--ink-2) 100%);
  border-block: 1px solid var(--line-2);
}
.govband__grid {
  display: grid; gap: clamp(26px, 4vw, 54px); align-items: center;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
}
@media (max-width: 940px) { .govband__grid { grid-template-columns: minmax(0, 1fr); } }
.govband p { color: #c6d5e3; }
.govband .chips { margin-top: 22px; }

/* ---------- 15. CONTACT / FORM ---------- */
.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.field { display: grid; gap: 7px; }
.field label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field label .req { color: var(--blue-bright); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .96rem;
  background-color: var(--ink-2); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 13px 15px;
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
/* The native select arrow sits hard against the right border, and Firefox
   ignores padding-right on it, so it cannot be moved. Draw the site caret
   instead (same glyph as .nav__caret) and place it with an explicit offset. */
.field select {
  -webkit-appearance: none; appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4.5 6 8.5l4-4' stroke='%2393a3b4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 17px center;
  background-size: 12px 12px;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); background-color: var(--ink-3);
  box-shadow: 0 0 0 3px var(--blue-glow);
}
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.form__note { font-size: .82rem; color: var(--dim); }
.photo-upload { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px; display: grid; gap: 14px; }
.photo-upload legend { padding: 0 8px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-bright); font-weight: 700; }
.drop-upload { display: grid; gap: 12px; }
.drop-upload__input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.drop-upload__zone {
  min-height: 154px; padding: 24px; display: flex; align-items: center; justify-content: center; gap: 16px;
  border: 2px dashed var(--line-2); border-radius: var(--radius); background: var(--ink-2);
  color: var(--muted); text-align: left; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.drop-upload__zone:hover, .drop-upload__zone.is-dragging { border-color: var(--blue-bright); background: rgba(27,143,214,.1); color: var(--white); }
.drop-upload__zone.is-dragging { transform: scale(1.01); }
.drop-upload__input:focus-visible + .drop-upload__zone { outline: 3px solid var(--blue-bright); outline-offset: 3px; }
.drop-upload__zone svg { width: 38px; height: 38px; flex: none; color: var(--blue-bright); }
.drop-upload__zone strong { display: block; color: var(--white); font-family: var(--font-head); font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; }
.drop-upload__zone small { display: block; margin-top: 3px; font-size: .84rem; }
.drop-upload__status { color: var(--dim); font-size: .82rem; }
.drop-upload__list { display: grid; gap: 8px; }
.drop-upload__item { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ink-2); font-size: .84rem; }
.drop-upload__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.drop-upload__size { color: var(--dim); white-space: nowrap; }
.drop-upload__remove { color: #ffaaa4; padding: 2px 5px; font-size: 1.1rem; line-height: 1; }
.drop-upload__remove:hover { color: #fff; }
@media (max-width: 520px) { .drop-upload__zone { flex-direction: column; text-align: center; } }
.consent-field { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .82rem; line-height: 1.55; cursor: pointer; }
.consent-field input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--blue); }

/* Marketing opt-in and the privacy notice read as one block before the
   buttons, so they sit closer together than the form's 16px grid gap. */
.form__consent { display: grid; gap: 10px; }
.form__privacy a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
.form__privacy a:hover { color: #fff; }

.infocard { background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 2.4vw, 32px); }
.infolist { display: grid; gap: 4px; }
.infolist a, .infolist div.infolist__row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 12px 10px; border-radius: var(--radius-sm);
  transition: background .2s var(--ease);
}
.infolist a:hover { background: rgba(27,143,214,.12); }
.infolist .ic {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: rgba(27,143,214,.14); border: 1px solid rgba(69,180,240,.28); color: var(--blue-bright);
}
.infolist .ic svg { width: 18px; height: 18px; }
/* Google Map embed - fluid, never taller than it needs to be */
.map-embed {
  margin-top: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-2);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.25) contrast(1.05); }
@media (max-width: 560px) { .map-embed { aspect-ratio: 3 / 2; } }

.infolist .k { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.infolist .v { display: block; color: #fff; font-weight: 500; font-size: .97rem; overflow-wrap: anywhere; }

/* ---------- 16. FOOTER ---------- */
.footer { background: #030507; border-top: 1px solid var(--line); padding-top: clamp(48px, 6vw, 80px); }
.footer__grid {
  display: grid; gap: clamp(28px, 3.4vw, 52px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom: clamp(34px, 4vw, 56px);
}
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer h4 {
  font-size: .84rem; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; margin-bottom: 18px; font-family: var(--font-head); font-weight: 600;
}
.footer__links { display: grid; gap: 11px; }
.footer__links a { color: var(--muted); font-size: .93rem; transition: color .2s var(--ease); }
.footer__links a:hover { color: var(--blue-bright); }
.footer__about p { color: var(--muted); font-size: .92rem; margin-top: 16px; max-width: 46ch; }
.footer .brand { margin-bottom: 4px; }
.footer__bar {
  border-top: 1px solid var(--line); padding-block: 22px;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: center; justify-content: space-between;
  font-size: .82rem; color: var(--dim);
}
.footer__bar a:hover { color: var(--blue-bright); }
.footer__lic { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* ---------- PRIVACY POLICY ---------- */
.pagehead--legal .legal-updated { color: var(--dim); font-size: .9rem; margin-top: 18px; }
.legal-layout { display: grid; grid-template-columns: minmax(190px, 250px) minmax(0, 760px); gap: clamp(36px, 7vw, 96px); align-items: start; }
.legal-nav { position: sticky; top: 110px; display: grid; gap: 10px; padding: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.legal-nav .eyebrow { margin-bottom: 5px; }
.legal-nav a { color: var(--muted); font-size: .9rem; }
.legal-nav a:hover { color: var(--blue-bright); }
.legal-content { display: grid; gap: clamp(36px, 5vw, 56px); }
.legal-content section { scroll-margin-top: 120px; }
.legal-content h2 { margin-bottom: 14px; }
.legal-content p + p { margin-top: 14px; }
.legal-content a { color: var(--blue-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal-contact { padding: clamp(24px, 4vw, 38px); border-left: 3px solid var(--blue); background: rgba(27,143,214,.08); }
@media (max-width: 760px) { .legal-layout { grid-template-columns: 1fr; } .legal-nav { position: static; } }

/* ==========================================================================
   17. CAPABILITY STATEMENT - procurement-focused, in the shared dark theme.
   ========================================================================== */
.cs {
  background:
    radial-gradient(circle at 84% 8%, rgba(27,143,214,.11), transparent 28rem),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 58%, var(--ink) 100%);
  color: var(--text);
}
.cs h1, .cs h2, .cs h3, .cs h4 { color: var(--white); }
.cs > .section { padding-top: clamp(24px, 3vw, 42px) !important; }
.cs .crumbs { color: var(--dim); }

.cs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5,8,12,.97) 0%, rgba(5,8,12,.9) 58%, rgba(5,8,12,.72) 100%),
    url("/assets/img/projects/bf656cf62b21428784e0b17acb7e2d9c.webp") center 54% / cover;
  color: #fff;
  border: 1px solid var(--line-2);
  border-left: 6px solid var(--blue);
  border-radius: var(--radius);
  padding: clamp(26px, 3.6vw, 46px);
  box-shadow: var(--shadow);
}
.cs-hero h1 { color: #fff; font-size: clamp(2.1rem, 4vw, 3.3rem); text-transform: uppercase; margin-bottom: 6px; }
.cs-hero__tag { font-family: var(--font-head); font-size: .86rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 12px; }
.cs-hero p { color: #c2d0dd; max-width: 88ch; font-size: clamp(.98rem, .5vw + .86rem, 1.08rem); }

/* The identifier strip - CAGE / UEI / CSLB / NAICS in one glance */
.cs-ids {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr));
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-block: clamp(22px, 2.6vw, 32px);
}
.cs-ids__i { background: #0c141d; padding: 16px 18px; }
.cs-ids__k { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: #7b8fa3; font-weight: 700; margin-bottom: 5px; }
.cs-ids__v { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.15rem, 1.6vw, 1.5rem); letter-spacing: .06em; color: #fff; }
.cs-ids__v small { display: block; font-family: var(--font-body); font-size: .72rem; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 3px; }

.cs-section { margin-top: clamp(34px, 4vw, 58px); }
.cs-title {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem); text-transform: uppercase; letter-spacing: .05em;
  padding-bottom: 10px; margin-bottom: 20px;
  border-bottom: 2px solid var(--blue);
}
.cs-grid { display: grid; gap: clamp(22px, 3vw, 44px); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 940px) { .cs-grid { grid-template-columns: minmax(0, 1fr); } }

.cs-card {
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  border-radius: var(--radius-sm); background: var(--ink-3);
  padding: clamp(18px, 2vw, 26px);
  box-shadow: var(--shadow-sm);
}
.cs-card + .cs-card { margin-top: 16px; }
.cs-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cs-card__head h3 { font-size: clamp(1.05rem, 1.3vw, 1.24rem); text-transform: uppercase; letter-spacing: .03em; }
.cs-pill {
  background: var(--ink); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: .84rem;
  letter-spacing: .08em; padding: 5px 12px; border-radius: 4px; flex: none;
}
.cs-list { display: grid; gap: 9px; }
.cs-list li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 11px;
  font-size: .93rem; color: var(--muted); line-height: 1.6;
}
.cs-list li::before { content: ""; width: 7px; height: 7px; margin-top: 8px; background: var(--blue); border-radius: 1px; }

.cs-box {
  background: var(--ink-3); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: clamp(18px, 2vw, 26px);
  box-shadow: var(--shadow-sm);
}
.cs-box + .cs-box { margin-top: 18px; }
.cs-box h3 { font-size: .88rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.cs-table { width: 100%; border-collapse: collapse; }
.cs-table tr + tr td { border-top: 1px solid var(--line); }
.cs-table td { padding: 9px 0; font-size: .89rem; vertical-align: top; }
.cs-table .k { color: var(--muted); white-space: nowrap; padding-right: 14px; }
.cs-table .v { font-weight: 600; color: var(--text); text-align: right; overflow-wrap: anywhere; }

.cs-diff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.cs-diff__i {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.cs-diff__i:first-child { border-top: 3px solid var(--blue); padding-top: 18px; }
.cs-diff__i h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 5px; }
.cs-diff__i p { font-size: .91rem; color: var(--muted); }
@media (max-width: 680px) {
  .cs-diff { grid-template-columns: minmax(0, 1fr); }
}

.cs-poc { background: var(--ink); color: #fff; border-radius: var(--radius-sm); padding: clamp(18px, 2vw, 26px); }
.cs-poc h3 { color: #fff; border-bottom-color: rgba(255,255,255,.16); }
.cs-poc__name { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cs-poc__role { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-bright); margin-bottom: 16px; }
.cs-poc a, .cs-poc .cs-poc__row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 9px 0; font-size: .93rem; color: #d8e2ec; overflow-wrap: anywhere;
}
.cs-poc a:hover { color: var(--blue-bright); }
.cs-poc svg { width: 17px; height: 17px; color: var(--blue-bright); }

/* The download button gets its own quiet band so it cannot be missed */
.cs-download {
  margin-top: clamp(30px, 3.4vw, 46px);
  background: linear-gradient(120deg, rgba(27,143,214,.18), var(--ink-3) 58%);
  border: 1px solid var(--line-2);
  border-left: 5px solid var(--blue);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 40px);
  display: grid; gap: clamp(18px, 2.4vw, 34px);
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  align-items: center;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 760px) { .cs-download { grid-template-columns: minmax(0, 1fr); } }
.cs-download h2 { font-size: clamp(1.4rem, 2vw, 1.9rem); text-transform: uppercase; margin-bottom: 8px; }
.cs-download p { color: var(--muted); font-size: .95rem; max-width: 62ch; }

.cs .text-link { color: var(--blue-bright); }
.cs .text-link:hover { color: var(--white); }
.cs .btn--outline-dark { border-color: var(--line-2); color: var(--white); }
.cs .btn--outline-dark:hover { border-color: var(--blue); background: var(--blue); }

/* NAICS / PSC code tables */
.codes { width: 100%; border-collapse: collapse; font-size: .92rem; }
.codes caption {
  text-align: left; font-family: var(--font-head); font-weight: 700;
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em;
  padding-bottom: 12px; color: var(--white);
}
.codes th, .codes td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.codes th {
  font-family: var(--font-head); font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-bright); font-weight: 600;
  border-bottom: 1px solid var(--line-2);
}
.codes td:first-child { font-weight: 700; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.codes td { color: var(--muted); }
.codes tbody tr:hover td { background: rgba(27,143,214,.07); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- 18. SCROLL REVEAL ----------
   Content is VISIBLE by default and only hidden once the inline head script
   has confirmed JavaScript is running (html.js). If the script is blocked -
   which happens inside some Wix / WordPress embeds - the page still renders
   fully instead of going blank below the fold. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- 19. PLACEHOLDER MARKER ----------
   Every value the owner still has to supply is wrapped in .ph so it is
   impossible to publish by accident. Replace the whole tag with the value. */
.ph {
  background: rgba(240, 178, 60, .16);
  border: 1px dashed #e0a83c;
  color: #f0c477;
  border-radius: 4px;
  padding: 1px 7px;
  font-weight: 600;
  font-family: var(--font-body);
  font-size: .92em;
  letter-spacing: .02em;
  white-space: nowrap;
}
.cs .ph, .surface-paper .ph, .surface-paper-2 .ph { color: #8a5a00; background: rgba(240,178,60,.22); border-color: #c88f28; }

/* ---------- 20. MOTION / PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero__slide img { transform: none; }
}

@media print {
  .topbar, .header, .footer, .hero__nav, .no-print, .nav-scrim, .skip-link { display: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 10.5pt; }
  .section { padding-block: 12pt !important; }
  a { color: #000 !important; }
  .cs-hero, .cs-poc, .cs-ids__i, .cs-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cs-card, .cs-box, .cs-download { break-inside: avoid; }
  .ph { border: 1px dashed #999; color: #000; background: none; }
}