/* ═══════════════════════════════════════════════════════════════
   AMERICAN VET MRO — styles.css
   Structure mirrors ../../assets/css/styles.css (Bullchase) but this
   is a fully separate, own-brand stylesheet — patriotic navy/red/gold
   palette, not Bullchase's navy/orange. See american-vet-mro/README.md
   for the brand rationale.
═══════════════════════════════════════════════════════════════ */

/* @tokens:start — generated from src/css/tokens.css by build.mjs; do not edit here */
:root {
  /* Federal blue + Old Glory red, the patriotic core palette */
  --navy:         #0A1D3F;
  --navy-d:       #06132B;
  --red:          #B22234;
  --red-h:        #8F1B29;
  --red-light:    #F9E4E6;
  --white:        #ffffff;
  --off:          #F5F3EC;
  --dark:         #141414;
  --mid:          #444;
  --muted:        #888;
  --border:       #E1DDD2;
  --gold:         #C9A227;
  --font:         'Manrope', 'DM Sans', system-ui, sans-serif;

  /* RGB-channel triplets (no alpha) of the colors above, for building
     opacity variants as rgba(var(--x-rgb), alpha) at any call site — e.g.
     every text-shadow/overlay/vignette that wants "navy-d at some opacity"
     traces back to this one definition instead of restating 6,19,43
     everywhere. Keep each triplet in sync with its solid color above by
     hand (CSS has no color() function widely-supported enough yet to
     derive one from the other automatically). */
  --navy-rgb:   10, 29, 63;    /* --navy   #0A1D3F */
  --navy-d-rgb: 6, 19, 43;     /* --navy-d #06132B */
  --red-rgb:    178, 34, 52;   /* --red    #B22234 */
  --white-rgb:  255, 255, 255; /* --white  #ffffff */
  --off-rgb:    245, 243, 236; /* --off    #F5F3EC */

  /* One-off UI-state colors outside the core brand palette (placeholder-card
     treatment, form success state) — named so nothing in styles.css is a
     bare, unexplained hex literal. */
  --placeholder-stripe: #FAF9F5; /* .contract-card-placeholder's 2nd stripe color */
  --placeholder-border: #C9BFA8; /* .contract-card-placeholder border */
  --success-bg:         #E8F5E9; /* .form-success background */
  --success-text:       #256029; /* .form-success text */

  /* Heading & subtitle type scale (fluid clamps) — same structure as
     the Bullchase scale so components ported from there don't need
     re-tuning, values unchanged. */
  --fs-hero:            clamp(42px, 6vw,   78px);  /* .hero-h1 */
  --fs-hero-m:          clamp(38px, 8.5vw, 54px);  /* .hero-h1 @mobile */
  --fs-hero-sub:        17px;                        /* .hero-sub */
  --fs-section-h2:      clamp(33px, 3.8vw, 56px);  /* .section-h2 */
  --fs-eyebrow:         12px;                        /* .eyebrow */
  --fs-page-hero:       clamp(40px, 5.4vw, 66px);  /* .page-hero-h1 */
  --fs-page-hero-m:     clamp(31px, 7.5vw, 44px);  /* .page-hero-h1 @mobile */
  --fs-page-hero-sub:   19px;                        /* .page-hero-sub */
  --fs-page-hero-sub-m: 16px;                        /* .page-hero-sub @mobile */

  /* Small uppercase label/badge text — the shared 11px micro-copy pattern. */
  --fs-label: 11px; /* .stat-lbl, .trust-label, .cta-eyebrow, .certs-label,
                        .cert-badge, .contact-info-label, .contract-tag */

  /* Radius + shadow */
  --radius-pill: 100px;
  --radius-card: 18px;
  --shadow-card: 0 16px 48px rgba(0,0,0,0.10);
}
/* @tokens:end */


/* ─────────────────────────────────
   FONTS (self-hosted, copied from Bullchase's theme fonts — same
   Manrope/DM Sans faces, own site's font-face block)
───────────────────────────────── */
@font-face {
  font-family: 'Manrope';
  font-weight: 400 800;
  font-style: normal;
  font-display: optional;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-weight: 400 800;
  font-style: normal;
  font-display: optional;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: optional; src: url('../fonts/dmsans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: optional; src: url('../fonts/dmsans-500.woff2') format('woff2'); }


/* ─────────────────────────────────
   RESET / BASE
───────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-to-content {
  position: absolute; top: -100px; left: 16px; z-index: 1000;
  background: var(--white); color: var(--navy); padding: 12px 20px;
  border-radius: 8px; font-weight: 700; transition: top 0.2s ease;
}
.skip-to-content:focus { top: 16px; }

.content-wrap { max-width: 1180px; margin: 0 auto; padding: 100px 24px; }

.eyebrow {
  display: inline-block; font-size: var(--fs-eyebrow); font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; color: var(--red);
}

.section-h2 {
  font-size: var(--fs-section-h2); font-weight: 800; line-height: 1.1;
  color: var(--navy); margin-top: 10px; letter-spacing: -0.5px;
}

/* fade-up entrance animation */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.delay-1.visible { transition-delay: 0.08s; }
.delay-2.visible { transition-delay: 0.16s; }
.delay-3.visible { transition-delay: 0.24s; }
.delay-4.visible { transition-delay: 0.32s; }
.delay-5.visible { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ─────────────────────────────────
   BUTTONS
───────────────────────────────── */
.btn-red, .btn-glass, .btn-white-outline, .form-submit {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 28px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 15px; border: none; white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn-red, .form-submit {
  background: var(--red); color: var(--white);
  box-shadow: 0 10px 28px rgba(var(--red-rgb), 0.35);
}
.btn-red:hover, .form-submit:hover { background: var(--red-h); transform: translateY(-2px); }

.btn-glass {
  background: rgba(var(--white-rgb), 0.12); color: var(--white);
  border: 1.5px solid rgba(var(--white-rgb), 0.4); backdrop-filter: blur(6px);
}
.btn-glass:hover { background: rgba(var(--white-rgb), 0.22); transform: translateY(-2px); }

.btn-white-outline {
  background: transparent; color: var(--white);
  border: 1.5px solid rgba(var(--white-rgb), 0.5);
}
.btn-white-outline:hover { background: rgba(var(--white-rgb), 0.12); transform: translateY(-2px); }


/* ─────────────────────────────────
   FLAGS (shared partial — nav, hero, footer, mobile menu)
───────────────────────────────── */
.flag-pair { display: inline-flex; gap: 6px; align-items: center; }
.flag-icon {
  width: 26px; height: auto; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  transform-origin: left center; animation: flagIconWave 3.4s ease-in-out infinite;
}
.flag-icon.flag-tx { animation-delay: 0.3s; }
@keyframes flagIconWave {
  0%, 100% { transform: skewY(0deg) rotateZ(0deg); }
  50%      { transform: skewY(-3deg) rotateZ(-1deg); }
}
.hero-flags .flag-icon { width: 34px; }
.footer-flags { margin-top: 14px; }
.footer-flags .flag-icon { width: 28px; }


/* ─────────────────────────────────
   NAV
───────────────────────────────── */
/* Always position:fixed — not toggled with scroll, and not nested inside
   .hero-card (see index.html: nav is a body-level sibling before .page-wrap,
   same as every inner page). It used to live *inside* .hero-card with
   position:sticky, which only sticks within the nearest ancestor that
   establishes a scroll container — and .hero-card's own `overflow: hidden`
   qualifies as exactly that, so the nav could only stay pinned for the
   hero's own ~100vh and then scrolled away with it once you scrolled past
   the hero. Fixed positioning has no such ancestor-clipping gotcha, and
   (as a bonus) takes zero space in normal flow, so .hero-card can still
   start at the true top of the viewport with nav floating transparently
   over it — same visual, no negative-margin hacks needed. Only the
   background/blur/shadow (.nav-sticky, below) toggles with scroll now. */
/* Default background is SOLID — a safe fallback so inner pages never show
   invisible white-on-transparent nav text before main.js runs (previously
   nav.html hardcoded .nav-sticky in markup for that reason; now main.js is
   the single source of truth for the class, so this rule carries the same
   safety net via CSS instead). The home page's flag hero overrides it to
   transparent below via :has(), no JS required for that initial state —
   only the scroll-triggered switch back to solid needs JS. */
nav[role="navigation"] {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 20px 40px; position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(var(--navy-rgb), 0.92);
  backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}
body:has(.hero-card) nav:not(.nav-sticky) {
  background: transparent; backdrop-filter: none; box-shadow: none;
}
.nav-sticky {
  background: rgba(var(--navy-rgb), 0.92);
  backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0,0,0,0.15);
}

.nav-logo { display: flex; align-items: center; }
.nav-wordmark {
  font-weight: 800; font-size: 19px; letter-spacing: 0.5px; color: var(--white);
}
.nav-wordmark strong { color: var(--gold); }

.nav-links { display: flex; gap: 30px; }
.nav-links a {
  color: rgba(var(--white-rgb), 0.85); font-weight: 600; font-size: 14.5px;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--white); border-bottom-color: var(--gold); }

.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-cta {
  background: var(--red); color: var(--white); font-weight: 700; font-size: 14px;
  padding: 10px 22px; border-radius: var(--radius-pill); box-shadow: 0 6px 18px rgba(var(--red-rgb), 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.nav-cta:hover { background: var(--red-h); transform: translateY(-2px); }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px;
}
.nav-hamburger span { width: 24px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }


/* ─────────────────────────────────
   MOBILE MENU
───────────────────────────────── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200; background: var(--navy);
  display: flex; flex-direction: column; padding: 28px 32px;
  transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-logo { margin-bottom: 20px; }
.mobile-menu-close {
  position: absolute; top: 24px; right: 28px; background: none; border: none;
  color: var(--white); font-size: 32px; line-height: 1;
}
.mobile-menu a {
  color: var(--white); font-size: 22px; font-weight: 700; padding: 14px 0;
  border-bottom: 1px solid rgba(var(--white-rgb), 0.12);
}
.mobile-menu-footer { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.mobile-menu-footer .cta {
  background: var(--red); color: var(--white); text-align: center; font-weight: 700;
  padding: 14px; border-radius: var(--radius-pill); border-bottom: none;
}


/* ─────────────────────────────────
   HERO — patriotic skyline Ken Burns cross-fade
───────────────────────────────── */
/* min-height/overflow live on .page-wrap, not .hero-card, so .hero-card can
   be position:absolute and fill it — needed now that nav is a true sibling
   of .page-wrap rather than a child of .hero-card (see the nav comment
   above): .hero-card no longer needs to reserve flow space or act as nav's
   containing block, it just fills whatever box .page-wrap defines. */
.page-wrap { position: relative; min-height: 100vh; overflow: hidden; }
.hero-card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; background: var(--navy-d);
}
/* A full-hero top-to-bottom dark-gradient scrim was removed 2026-07-21 — it
   was muddying the flag artwork. In its place: a light, mostly-centered
   vignette (darkens only the far edges/corners, well clear of the headline)
   for a bit of photographic depth without washing out the flag's color —
   "a little of a filter over the top" per the follow-up ask. Text legibility
   still comes from per-element text-shadow (see .hero-eyebrow/.hero-h1/
   .hero-tagline/.hero-sub below), not from this. */
.hero-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(var(--navy-d-rgb), 0.4) 100%);
}
/* subtle grain, matches Bullchase's texture treatment */
.hero-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0.04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-skyline { position: absolute; inset: -20px; z-index: 0; }

/* Persistent waving-flag base layer, and now the hero's only background —
   always opacity 1, never fades, its own slow zoom. The skyline-silhouette
   overlay band that used to sit in front of it was removed 2026-07-21 (read
   as blocky/messy rather than a clean skyline — see index.html's comment).
   The ripple itself is animated inside flag-waving.svg's own embedded
   <style>, independent of this outer zoom, so it keeps rippling regardless
   of this element's transform. */
.hero-flag-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center 38%;
  animation: heroFlagZoom 40s ease-in-out infinite;
  /* Softens any residual sub-pixel seam between the SVG's ripple columns —
     see flag-waving.svg's own comment for the column-seam fix itself; this
     is a small extra polish on top, not the primary fix. */
  filter: blur(0.7px);
}
@keyframes heroFlagZoom {
  0%   { transform: scale(1.00) translateX(0px); }
  50%  { transform: scale(1.08) translateX(-14px); }
  100% { transform: scale(1.16) translateX(14px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-flag-bg { animation: none; }
  .flag-icon { animation: none; }
}

.hero-body {
  position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 40px 24px; max-width: 900px; margin: 0 auto;
}
/* Scoped dark backdrop behind the text only — sized to its content, NOT
   .hero-body's full flex:1 box (which spans most of the hero's height) and
   NOT a full-hero scrim (that was removed 2026-07-21 for muddying the
   flag). A contrast audit measured the formal WCAG ratio when this text
   crosses the flag's white stripes: white text dropped to ~1.03:1, gold to
   ~1.5-2.2:1 — the per-element text-shadow reads fine to the eye but
   WCAG's contrast formula doesn't count shadows at all, so it still fails
   as authored. 0.85 alpha of --navy-d is the minimum that keeps every hero
   text color (white, gold, off-white) above 4.5:1 even against the single
   lightest pixel sampled from the flag artwork — see the contrast audit
   for the exact numbers. The flag stays fully vivid everywhere outside
   this panel, including behind .hero-flags, which sits above it. */
.hero-text-panel {
  background: rgba(var(--navy-d-rgb), 0.85); backdrop-filter: blur(8px);
  border-radius: 28px; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  padding: 44px 48px; max-width: 820px;
  display: flex; flex-direction: column; align-items: center;
}
.hero-flags { margin-bottom: 18px; }
/* Per-element text-shadow carries legibility now that .hero-card::before's
   full-frame darkening scrim is gone — needed most where text sits over the
   flag's bright white stripes, where plain white/gold text would otherwise
   nearly vanish. */
.hero-eyebrow {
  color: var(--gold); font-weight: 800; font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; margin-bottom: 18px; display: block;
  text-shadow: 0 2px 10px rgba(var(--navy-d-rgb), 0.9), 0 1px 2px rgba(var(--navy-d-rgb), 0.95);
}
.hero-h1 {
  font-size: var(--fs-hero); font-weight: 800; color: var(--white); line-height: 1.03;
  letter-spacing: -1px; margin: 0;
  text-shadow: 0 4px 20px rgba(var(--navy-d-rgb), 0.85), 0 2px 4px rgba(var(--navy-d-rgb), 0.9);
}
.hero-vet { color: var(--red); -webkit-text-stroke: 1px var(--gold); }
.hero-tagline {
  font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--white);
  margin-top: 18px; padding-bottom: 10px; border-bottom: 3px solid var(--red); display: inline-block;
  text-shadow: 0 3px 14px rgba(var(--navy-d-rgb), 0.85), 0 1px 3px rgba(var(--navy-d-rgb), 0.9);
}
.hero-sub {
  font-size: var(--fs-hero-sub); color: rgba(var(--off-rgb), 0.92); margin-top: 22px;
  max-width: 620px; line-height: 1.6;
  text-shadow: 0 2px 10px rgba(var(--navy-d-rgb), 0.8), 0 1px 3px rgba(var(--navy-d-rgb), 0.9);
}
.hero-btns { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }

/* Same scoped-backdrop reasoning as .hero-text-panel above — width hugs
   content (fit-content, centered via auto margins) rather than spanning
   the full hero edge-to-edge. */
.trust-bar {
  position: relative; z-index: 10; display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap; justify-content: center; color: var(--white);
  width: fit-content; max-width: calc(100% - 48px); margin: 0 auto 24px;
  padding: 14px 28px;
  background: rgba(var(--navy-d-rgb), 0.85); backdrop-filter: blur(8px);
  border-radius: var(--radius-pill); box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.trust-label {
  font-size: var(--fs-label); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 2px 8px rgba(var(--navy-d-rgb), 0.9), 0 1px 2px rgba(var(--navy-d-rgb), 0.95);
}
.trust-logos { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.trust-logo {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.5px; color: rgba(var(--white-rgb), 0.92);
  text-shadow: 0 2px 8px rgba(var(--navy-d-rgb), 0.9), 0 1px 2px rgba(var(--navy-d-rgb), 0.95);
}

.scroll-indicator {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 10;
  background: none; border: none; color: var(--white); opacity: 0.75;
  animation: scrollBounce 2s ease-in-out infinite; transition: opacity 0.3s ease;
}
@keyframes scrollBounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .scroll-indicator { animation: none; } }


/* ─────────────────────────────────
   WHY STRIP
───────────────────────────────── */
.why-strip { background: var(--off); padding: 70px 24px; }
.why-strip-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.why-item { text-align: center; }
.why-icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: var(--gold);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.why-item h3 { font-size: 19px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.why-item p { color: var(--mid); font-size: 14.5px; line-height: 1.6; }


/* ─────────────────────────────────
   STATS BAR
───────────────────────────────── */
.stats-bar {
  background: var(--navy); display: flex; justify-content: center; gap: 60px;
  flex-wrap: wrap; padding: 56px 24px; text-align: center;
}
.stat-num { font-size: clamp(34px, 4vw, 48px); font-weight: 800; color: var(--white); }
.stat-num sup { font-size: 0.5em; color: var(--gold); }
.stat-lbl { font-size: var(--fs-label); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(var(--white-rgb), 0.6); margin-top: 6px; }


/* ─────────────────────────────────
   SERVICES (home teaser + products/services detail share card look)
───────────────────────────────── */
.services-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 46px; }
.services-head p { max-width: 400px; color: var(--mid); font-size: 15px; line-height: 1.6; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.service-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 32px; box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 22px 56px rgba(0,0,0,0.14); }
.service-card-icon {
  width: 48px; height: 48px; border-radius: 12px; background: var(--red-light); color: var(--red);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.service-card-title { font-size: 19px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.service-card-desc { color: var(--mid); font-size: 14.5px; line-height: 1.6; }


/* ─────────────────────────────────
   VALUES / MOTTO SECTION
───────────────────────────────── */
.values-section { background: var(--navy-d); padding: 90px 24px; text-align: center; }
.values-inner { max-width: 1000px; margin: 0 auto; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; text-align: left; }
.value-card { background: rgba(var(--white-rgb), 0.05); border: 1px solid rgba(var(--white-rgb), 0.1); border-radius: var(--radius-card); padding: 30px; }
.value-num { font-size: 15px; font-weight: 800; color: var(--gold); letter-spacing: 1px; margin-bottom: 12px; }
.value-card h3 { font-size: 20px; font-weight: 800; color: var(--white); margin-bottom: 10px; }
.value-card p { color: rgba(var(--off-rgb), 0.7); font-size: 14.5px; line-height: 1.6; }


/* ─────────────────────────────────
   LEADERSHIP TEASER (home)
───────────────────────────────── */
.leader-teaser { display: grid; grid-template-columns: 280px 1fr; gap: 50px; align-items: center; }
.leader-teaser-photo img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); width: 100%; height: auto; object-fit: cover; }
.leader-teaser-body p { color: var(--mid); font-size: 16px; line-height: 1.7; margin: 18px 0 26px; }


/* ─────────────────────────────────
   CTA SECTION
───────────────────────────────── */
.cta-section { background: var(--red); padding: 90px 24px; text-align: center; }
.cta-inner { max-width: 700px; margin: 0 auto; }
/* 0.75 measured at 4.31:1 on the red CTA background — fails WCAG AA's 4.5:1
   for small text. 0.85 clears it at 5.15:1 (see contrast audit, 2026-07-21). */
.cta-eyebrow { color: rgba(var(--white-rgb), 0.85); font-weight: 800; font-size: var(--fs-label); letter-spacing: 1.5px; text-transform: uppercase; }
.cta-h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 800; color: var(--white); margin-top: 10px; line-height: 1.1; }
.cta-p { color: rgba(var(--white-rgb), 0.85); font-size: 16px; margin-top: 16px; line-height: 1.6; }
.cta-btns { display: flex; gap: 16px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cta-section .btn-red { background: var(--navy); box-shadow: 0 10px 28px rgba(var(--navy-d-rgb), 0.35); }
.cta-section .btn-red:hover { background: var(--navy-d); }


/* ─────────────────────────────────
   FOOTER
───────────────────────────────── */
footer { background: var(--navy-d); color: rgba(var(--off-rgb), 0.7); padding: 70px 24px 0; }
.footer-top { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(var(--white-rgb), 0.1); }
.footer-wordmark { font-size: 21px; }
.footer-brand-p { font-size: 14px; line-height: 1.6; margin-top: 14px; max-width: 280px; }
.footer-col h5 { color: var(--white); font-size: 14px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a { font-size: 14.5px; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--white); }
.footer-contact-row { margin-bottom: 14px; display: flex; flex-direction: column; gap: 2px; }
.footer-contact-row small { color: rgba(var(--off-rgb), 0.5); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-contact-row a, .footer-contact-row span { font-size: 14.5px; color: var(--white); }
.footer-bottom { max-width: 1180px; margin: 0 auto; padding: 26px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; }
.footer-motto { font-style: italic; color: rgba(var(--off-rgb), 0.55); }


/* ─────────────────────────────────
   PAGE HERO (inner pages — no motion, matches Bullchase's pattern)
───────────────────────────────── */
.page-hero {
  background: var(--navy); padding: 160px 24px 90px; text-align: center;
  background-image: radial-gradient(ellipse at top, rgba(var(--red-rgb), 0.18), transparent 60%);
}
.page-hero-content { max-width: 760px; margin: 0 auto; }
.page-hero-h1 { font-size: var(--fs-page-hero); font-weight: 800; color: var(--white); line-height: 1.08; letter-spacing: -0.5px; }
.page-hero-sub { font-size: var(--fs-page-hero-sub); color: rgba(var(--off-rgb), 0.8); margin-top: 18px; line-height: 1.6; }


/* ─────────────────────────────────
   ABOUT SECTION
───────────────────────────────── */
.about-section { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; }
.about-h2 { font-size: clamp(28px, 3.4vw, 44px); }
.about-desc { color: var(--mid); font-size: 16px; line-height: 1.7; margin-top: 18px; }
.about-features { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.about-feature { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--dark); font-weight: 600; }
.about-feature-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--red-light); color: var(--red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.about-cta-row { display: flex; align-items: center; gap: 26px; margin-top: 30px; flex-wrap: wrap; }
.call-inline { display: flex; align-items: center; gap: 10px; }
.call-inline-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--off); color: var(--navy); display: flex; align-items: center; justify-content: center; }
/* var(--muted) here measured 3.54:1 on white — fails AA's 4.5:1 for text
   (it's fine for large icons/UI controls, which only need 3:1 — see
   .quote-modal-close below, left as --muted on purpose). --mid clears it. */
.call-inline-text small { display: block; color: var(--mid); font-size: var(--fs-label); }
.call-inline-text strong a { color: var(--navy); font-size: 15px; }
.about-photo { position: relative; }
.about-photo img { border-radius: var(--radius-card); width: 100%; height: auto; object-fit: cover; box-shadow: var(--shadow-card); }
.about-float {
  position: absolute; bottom: -20px; left: -20px; background: var(--white); border-radius: 14px;
  padding: 16px 22px; box-shadow: var(--shadow-card); text-align: center;
}
.about-float-num { font-size: 26px; font-weight: 800; color: var(--red); }
.about-float-lbl { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mid); }


/* ─────────────────────────────────
   TEAM / LEADERSHIP BIO
───────────────────────────────── */
.team-head { text-align: center; max-width: 640px; margin: 0 auto 50px; }
.team-sub { color: var(--mid); font-size: 15px; margin-top: 14px; line-height: 1.6; }
.team-list { display: flex; flex-direction: column; gap: 50px; }
.team-bio-inner { display: grid; grid-template-columns: 200px 1fr; gap: 40px; }
.team-bio-photo img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.team-name { font-size: 24px; font-weight: 800; color: var(--navy); }
.team-role { color: var(--red); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; margin-bottom: 16px; }
.team-bio-body p { color: var(--mid); font-size: 15px; line-height: 1.75; margin-bottom: 14px; }


/* ─────────────────────────────────
   PRODUCTS GRID
───────────────────────────────── */
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 28px 22px; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.product-card-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--off); color: var(--navy); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.product-card h3 { font-size: 16px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.product-card p { color: var(--mid); font-size: 13.5px; line-height: 1.5; }


/* ─────────────────────────────────
   SERVICES DETAIL (services.html pillars)
───────────────────────────────── */
.services-detail-section { display: flex; flex-direction: column; gap: 50px; }
.service-detail { display: flex; gap: 30px; align-items: flex-start; padding-bottom: 46px; border-bottom: 1px solid var(--border); }
.service-detail:last-child { border-bottom: none; padding-bottom: 0; }
.service-detail-icon {
  width: 64px; height: 64px; border-radius: 16px; background: var(--navy); color: var(--gold);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.service-detail-body p { color: var(--mid); font-size: 16px; line-height: 1.75; margin-top: 14px; }


/* ─────────────────────────────────
   CONTRACTS GRID + PLACEHOLDER STYLING
   Deliberately visually distinct (dashed border, muted tag) so it never
   reads as an asserted fact — see README + content-integrity guardrails.
───────────────────────────────── */
.contracts-head { max-width: 720px; margin: 0 auto 46px; text-align: center; }
.contracts-intro { color: var(--mid); font-size: 15.5px; line-height: 1.7; margin-top: 16px; }
.contracts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.contract-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px; box-shadow: var(--shadow-card); }
.contract-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.contract-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--off); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contract-card h3 { font-size: 16.5px; font-weight: 800; color: var(--navy); }
.contract-card p { color: var(--mid); font-size: 14px; line-height: 1.6; }
.contract-tag { display: inline-block; margin-top: 14px; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; background: var(--off); color: var(--navy); padding: 5px 12px; border-radius: var(--radius-pill); }

.contract-card-placeholder { background: repeating-linear-gradient(135deg, var(--white), var(--white) 10px, var(--placeholder-stripe) 10px, var(--placeholder-stripe) 20px); border: 1.5px dashed var(--placeholder-border); }
.placeholder-tag { color: var(--red); font-weight: 700; font-style: italic; }
.contract-tag-placeholder { background: var(--red-light); color: var(--red); }


/* ─────────────────────────────────
   CONTACT SECTION + FORMS
───────────────────────────────── */
.contact-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; }
.contact-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 28px; }
.contact-info-card { display: flex; align-items: center; gap: 14px; background: var(--off); border-radius: 14px; padding: 20px; }
.contact-info-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--white); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.contact-info-icon-emergency { color: var(--red); }
/* --muted (#888) on --off measured at 3.19:1 — fails WCAG AA's 4.5:1 for
   small text by a wide margin. --mid (#444) clears it at 8.77:1 (see
   contrast audit, 2026-07-21). */
.contact-info-label { font-size: var(--fs-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--mid); margin-bottom: 3px; }
.contact-info-value { font-size: 16px; font-weight: 700; color: var(--navy); }
.contact-info-address { line-height: 1.4; }
.contact-channels { margin-top: 30px; }
.contact-channels-label { font-size: 14px; color: var(--mid); margin-bottom: 10px; }
.contact-channel-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.channel-pill { background: var(--navy); color: var(--white); font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: var(--radius-pill); }

.contact-form, .lead-form { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { display: flex; flex-direction: column; }
.form-group label span { color: var(--red); }
.form-group input, .form-group select, .form-group textarea {
  border: 1.5px solid var(--border); border-radius: 10px; padding: 13px 16px;
  font-family: inherit; font-size: 15px; color: var(--dark); background: var(--white);
  transition: border-color 0.2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--navy); }
.form-group textarea { resize: vertical; }
.lead-hp { position: absolute; left: -9999px; }
.form-submit { align-self: flex-start; }
.form-success { display: none; align-items: center; gap: 10px; background: var(--success-bg); color: var(--success-text); padding: 16px 20px; border-radius: 12px; font-weight: 600; }
.form-success.visible { display: flex; }


/* ─────────────────────────────────
   MODAL (quote / lead form)
───────────────────────────────── */
.quote-modal-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(var(--navy-d-rgb), 0.7);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.quote-modal-overlay.open { opacity: 1; pointer-events: auto; }
.quote-modal-inner {
  background: var(--white); border-radius: var(--radius-card); padding: 40px;
  max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative;
  transform: translateY(20px); transition: transform 0.25s ease;
}
.quote-modal-overlay.open .quote-modal-inner { transform: translateY(0); }
.quote-modal-close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 28px; color: var(--muted); }
.quote-modal-title { font-size: 24px; font-weight: 800; color: var(--navy); }
.quote-modal-sub { color: var(--mid); font-size: 14.5px; margin-top: 8px; }


/* ─────────────────────────────────
   SCROLL PROGRESS / BACK TO TOP / MOBILE CALL BAR
───────────────────────────────── */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--red); z-index: 500; width: 0%; }
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 400; width: 46px; height: 46px;
  border-radius: 50%; background: var(--navy); color: var(--white); border: none;
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.2s ease; box-shadow: var(--shadow-card);
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-3px); }

.mobile-call-bar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
  background: var(--red); color: var(--white); align-items: center; justify-content: center;
  gap: 10px; padding: 14px; font-weight: 700; font-size: 15px;
}
.mobile-call-bar a { color: var(--white); }


/* ─────────────────────────────────
   RESPONSIVE
───────────────────────────────── */
@media (max-width: 1024px) {
  .about-section { grid-template-columns: 1fr; }
  .about-photo { max-width: 420px; margin: 0 auto; }
  .leader-teaser { grid-template-columns: 1fr; text-align: center; }
  .leader-teaser-photo { max-width: 240px; margin: 0 auto; }
  .contact-section { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid, .contracts-grid, .values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; }
  nav[role="navigation"] { padding: 18px 20px; }

  .hero-h1 { font-size: var(--fs-hero-m); }
  .hero-vet { -webkit-text-stroke: 0.6px var(--gold); }
  .page-hero-h1 { font-size: var(--fs-page-hero-m); }
  .page-hero-sub { font-size: var(--fs-page-hero-sub-m); }
  .page-hero { padding: 130px 20px 70px; }

  .why-strip-inner, .services-grid, .contracts-grid, .values-grid, .products-grid { grid-template-columns: 1fr; }
  .team-bio-inner { grid-template-columns: 1fr; text-align: center; }
  .team-bio-photo { margin: 0 auto; }
  .service-detail { flex-direction: column; align-items: center; text-align: center; }
  .contact-info-grid { grid-template-columns: 1fr; }
  .form-row-2col { grid-template-columns: 1fr; }
  .about-cta-row { flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr; gap: 34px; }
  .stats-bar { gap: 34px; }

  .content-wrap { padding: 70px 20px; }
  .mobile-call-bar { display: flex; }
  body { padding-bottom: 54px; }
}


/* ─────────────────────────────────
   PRINT — hide motion/decorative chrome, keep content readable
───────────────────────────────── */
@media print {
  .hero-skyline, .hero-card::before, .hero-card::after, .scroll-indicator,
  .scroll-progress, .back-to-top, .mobile-call-bar, .quote-modal-overlay,
  .nav-hamburger, .mobile-menu { display: none !important; }
  .hero-card { min-height: 0; background: var(--navy) !important; }
}