/* ==========================================================================
   Kimbrell Manufacturing — canonical stylesheet
   Wave 1 consolidation (2026-08-22): 14 pages previously each carried a
   near-duplicate inline <style> block (~178KB total, 21/33 drift-detector
   metrics out of sync). This file replaces every one of them.

   STRUCTURE
   ---------
   1. Design tokens (:root)              — canonical; --line/--shadow/
      --shadow-sm/--radius/--max were previously defined on index.html only.
   2. Base reset + typography            — unified site-wide (see "Wave 1
      normalizations" below).
   3. Shared site chrome                 — mobile hamburger + drawer + logo
      lockup were ALREADY byte-identical on every page pre-consolidation;
      one copy here.
   4. Four page-family blocks, each namespaced under a body class, because
      each family's hero/card/section/nav/footer treatment is a genuinely
      different design (not accidental drift) inherited from independent
      per-page builds:
        .pg-home        → index.html only
        .pg-capability  → capabilities, how-we-help, cnc-machining,
                           emergency-repair-reverse-engineering,
                           industrial-fabrication, oem-replacement-parts,
                           prototype-production-machining, waterjet-cutting
        .pg-info        → about, contact, faq
        .pg-gallery     → our-work, industries
      Every page ALSO carries an individual .pg-<page> class for the few
      values that differ within a family (hero photo crop position, a
      section-head max-width, etc).
   5. Preview-only block (design-system switch) — unchanged, kept for the
      duration of the preview build, clearly marked for removal at launch.

   WAVE 1 NORMALIZATIONS (deliberate, site-wide, documented per spec)
   --------------------------------------------------------------------------
   - Font stack: every page now uses index.html's stack,
     'Inter', Arial, Helvetica, sans-serif (body) and
     'DM Sans', 'Inter', Arial, sans-serif (headings). Previously each family
     had its own fallback list (fonts actually load fine everywhere via the
     shared Google Fonts link, so this is an invisible fix).
   - Body line-height: normalized to 1.6 everywhere (the capability-page
     family previously used 1.65 — a ~3% tighter line box, imperceptible
     in practice, but genuine unintentional drift, not a design choice).
   - BUTTON RADIUS CANON: the homepage pill (border-radius:999px) wins
     site-wide. Previously: 999px (home), 6px (capability pages), 4px
     (our-work/industries), 7px (about/contact/faq's .btn-red/.btn-outline).
     This is the one deliberately visible normalization Wave 1 makes — every
     primary/secondary button and the nav CTA pill are now the same friendly
     pill shape everywhere. Per spec, documented here rather than silently.
   - about.html, contact.html, faq.html: .btn-red/.btn-outline merged into
     .btn.btn-primary / .btn.btn-secondary (markup updated on all three
     pages). Behavior/appearance otherwise unchanged except the radius canon
     above.
   - html, body { overflow-x: clip } guard (previously overflow-x:hidden on
     html only, upgraded per spec + applied to body too).
   - Design tokens (--line, --shadow, --shadow-sm, --radius, --max) now
     resolve on every page's :root, not just index.html's. No page actually
     changes appearance from this (only index.html's own rules ever
     consumed these custom properties) — it only fixes the drift-detector's
     token-sync metrics.

   Everything else — hero designs, card radii/shadows, section padding,
   grid layouts, nav/topbar/footer chrome, per-page content sections — is
   preserved pixel-for-pixel per family via the namespacing above.
   ========================================================================== */

/* ---- 1. Design tokens (canonical) ---- */
:root {
  --navy: #103566;
  --navy-deep: #071F42;
  --red: #E30A17;
  --white: #FFFFFF;
  --ice: #F3F6FA;
  --ink: #1B2430;
  --ink-soft: #55606E;
  --line: rgba(16,53,102,.12);
  --shadow: 0 18px 45px rgba(7,31,66,.10);
  --shadow-sm: 0 4px 15px rgba(7,31,66,.08);
  --radius: 20px;
  --max: 1180px;
}

/* ---- 2. Base reset + typography (unified site-wide) ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  /* Wave 2: every in-page dropdown/anchor target (#start-here, #story, the
     8 #industries.html anchors, etc.) needs room for the sticky nav so the
     heading doesn't land underneath it. One site-wide value rather than
     per-element scroll-margin-top, since the sticky header height differs
     slightly per page family but this is generous enough for all of them. */
  scroll-padding-top: 110px;
}
body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: 'DM Sans', 'Inter', Arial, sans-serif; }
/* Wave 2 (spec 2a): text-wrap:balance site-wide on headings — kills widow/
   orphan words without touching copy. Browsers without support just ignore
   the declaration (graceful, no fallback needed). */
h1, h2, h3 { text-wrap: balance; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ==========================================================================
   3. Shared site chrome — identical on every page before consolidation.

   Wave 2 (2026-08-23): dropdown nav + mobile drawer, behavior ported from
   v2-kimbrell-manufacturing-site/main.js + styles.css, restyled entirely in
   V1's visual language (white panel, V1 --radius/--shadow, navy text, the
   existing red CTA untouched — see REVISION_SPEC.md Wave 2b).

   STRUCTURE CHANGE FROM WAVE 1: the mobile drawer used to be the SAME
   <ul id="navLinks"> as the desktop nav, repositioned fixed by media query.
   That's gone. There are now two separate elements:
     - #navLinks / .nav-links   — desktop only, in-flow, hidden below 1280px
     - #drawer / .drawer        — mobile only, a body-level SIBLING of #nav
   The drawer must NOT be a descendant of #nav: .pg-home #nav uses
   backdrop-filter, and a `filter`/`backdrop-filter` ancestor establishes a
   containing block for `position:fixed` descendants (CSS Filter Effects +
   Transforms specs), which would squash a nested fixed drawer into the
   header's own ~82px box instead of the full viewport. Sibling placement
   sidesteps that bug class entirely — verified open on every page, at
   both 1440 and 390, home included. Same reasoning is why the dropdown
   panels below aren't given their own filter/transform either.
   ========================================================================== */

/* Mobile hamburger button (opens #drawer) */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0}
.nav-toggle span{display:block;width:22px;height:3px;background:var(--navy);border-radius:2px;transition:transform .25s ease,opacity .25s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(7,31,66,.55);z-index:1000}
.nav-overlay.open{display:block}

/* Desktop nav-links: in-flow row, hidden below the drawer breakpoint */
@media (max-width:1280px){
  .nav-toggle{display:flex}
  #navLinks.nav-links{display:none}
}

/* Header dropdown (How We Help / Capabilities / Industries / Our Work /
   About) — shared skeleton; per-family color/type rules for the toggle
   live alongside that family's `.nav-links a` rule further down so the
   dropdown word reads identically to a plain nav link. */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{background:none;border:none;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.nav-dropdown-toggle .caret{font-size:.6em;line-height:1;transition:transform .18s ease;display:inline-block}
.nav-dropdown:hover .nav-dropdown-toggle .caret,
.nav-dropdown:focus-within .nav-dropdown-toggle .caret,
.nav-dropdown.open .nav-dropdown-toggle .caret{transform:rotate(180deg)}

.nav-dropdown-panel{
  position:absolute; top:100%; left:0; margin-top:14px; min-width:290px;
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:10px; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:250;
}
.nav-dropdown-panel.wide{min-width:340px}
.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel,
.nav-dropdown.open .nav-dropdown-panel{opacity:1; visibility:visible; transform:translateY(0)}
.nav-dropdown-panel a{
  padding:10px 14px; border-radius:10px; font-size:.9rem; font-weight:600;
  color:var(--ink-soft); white-space:nowrap;
}
.nav-dropdown-panel a:hover{background:var(--ice); color:var(--navy)}
.nav-dropdown-panel a.all-link{
  color:var(--navy); font-weight:800; border-bottom:1px solid var(--line);
  border-radius:0; margin-bottom:6px; padding-bottom:12px; white-space:normal;
}

/* Mobile drawer: fixed off-canvas panel, full viewport height, body-level
   sibling of #nav (see structural note above). */
.drawer{
  position:fixed; top:0; right:0; bottom:0; height:100dvh;
  width:min(84vw,320px); max-width:320px;
  background:var(--white);
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  padding:5.5rem 1.5rem 2rem; margin:0;
  transform:translateX(100%); transition:transform .3s ease;
  overflow-y:auto; overflow-x:visible;
  box-shadow:-8px 0 30px rgba(0,0,0,.18);
  z-index:1001;
}
.drawer.open{transform:translateX(0)}
.drawer > a{
  display:block; width:100%; padding:.9rem 0; border-bottom:1px solid #E7ECF2;
  white-space:normal; font-size:1rem; font-weight:700; color:var(--navy);
}
.drawer > a.cta-btn{
  margin-top:1rem; text-align:center; padding:.9rem 1.25rem; border-bottom:none;
  background:var(--red); color:var(--white); border-radius:999px; font-weight:800;
}
/* Group toggle ("Explore Capabilities +") — inline-expand accordion, one
   per dropdown group, immediately under that group's top-level link. */
.drawer-group-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  background:none; border:none; border-bottom:1px solid #E7ECF2;
  padding:.75rem 0; margin-top:-1px;
  font:inherit; font-size:.88rem; font-weight:700; color:var(--ink-soft);
  text-align:left; cursor:pointer;
}
.drawer-group-toggle .plus{color:var(--red); font-weight:800; font-size:1.1rem; flex-shrink:0}
.drawer-group-panel{display:none; flex-direction:column; padding-left:1rem}
.drawer-group-panel.open{display:flex}
.drawer-group-panel a{
  padding:.65rem 0; border-bottom:none; font-size:.9rem; font-weight:600;
  color:var(--ink-soft);
}
.drawer-group-panel a:hover{color:var(--red)}

/* Icon + text logo lockup */
.logo{display:inline-flex!important;align-items:center;gap:10px;text-decoration:none}
.logo img{height:46px!important;width:46px!important;object-fit:contain;flex:0 0 auto;display:block}
.logo .brand-text{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:800;line-height:1.18;letter-spacing:.01em;color:var(--navy);white-space:nowrap;text-align:center}
.logo .brand-text b{color:var(--red);font-weight:800}
.logo .brand-text i{font-style:normal;font-weight:600;font-size:.72em;letter-spacing:.06em;color:var(--ink-soft);text-transform:uppercase}
@media (max-width:600px){
  .logo img{height:36px!important;width:36px!important}
  .logo .brand-text{font-size:11.5px}
}

/* Button radius canon — the homepage pill wins site-wide (see header note).
   Kept as one high-specificity rule per family below so it always beats
   that family's own historical radius; also applied to the nav CTA pill. */

/* ==========================================================================
   4a. HOME — index.html only (.pg-home)
   ========================================================================== */
.pg-home .container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

/* Topbar — unified site-wide to the V2 banner look (Dustin, 8/24):
   navy strip, centered, white bold phone, red pulsing status dot.
   V1's Inter stays (no V2 mono leakage); the LOOK is what carries over. */
.topbar {
  background: var(--navy-deep); /* matches .section.navy-deep bands (Dustin 8/24) */
  color: #DCE6F5;
  font-size: .8rem;
  font-weight: 600;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 20px;
  letter-spacing: .04em;
}
.topbar span { text-transform: uppercase; letter-spacing: .08em; }
.topbar a { color: var(--white); font-weight: 800; }
.topbar a:hover { color: var(--white); opacity: .82; }
.topbar .live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); margin-right: 8px; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(227,10,23,.6); animation: livePulse 2.4s ease-out infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(227,10,23,.55); }
  70% { box-shadow: 0 0 0 7px rgba(227,10,23,0); }
  100% { box-shadow: 0 0 0 0 rgba(227,10,23,0); }
}
@media (prefers-reduced-motion: reduce) { .topbar .live-dot { animation: none; } }

.pg-home #nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, padding .25s ease;
}
.pg-home #nav.scrolled { box-shadow: 0 8px 30px rgba(7,31,66,.10); }
.pg-home .nav-container {
  max-width: var(--max);
  margin: 0 auto;
  width: calc(100% - 40px);
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pg-home .nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 26px;
}
.pg-home .nav-links a {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  padding: 8px 0;
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.pg-home .nav-links a:hover, .pg-home .nav-links a.active { color: var(--red); border-bottom-color: var(--red); }
.pg-home .nav-dropdown-toggle {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  padding: 8px 0;
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.pg-home .nav-dropdown-toggle:hover,
.pg-home .nav-dropdown.open .nav-dropdown-toggle,
.pg-home .nav-dropdown-toggle.active { color: var(--red); border-bottom-color: var(--red); }
.pg-home .nav-links a.cta-btn {
  background: var(--red);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 999px;
  border-bottom: none;
  box-shadow: 0 10px 24px rgba(227,10,23,.25);
}
.pg-home .nav-links a.cta-btn:hover { color: var(--white); transform: translateY(-2px); border-bottom: none; }

/* Wave 2 (spec 2a): "Your Go-To Industrial Uptime Partner..." is Austin's
   #1 line — bumped larger/bolder/higher-contrast on all 4 page families and
   standardized (was drifting 600-800 weight, uppercase on 2 families only). */
.pg-home .positioning-strip {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(.85rem, 1.4vw, 1.05rem);
  font-weight: 800;
  letter-spacing: .09em;
  padding: 13px 16px;
}

.pg-home .hero {
  padding: 64px 0 60px;
  background: radial-gradient(circle at 80% 10%, rgba(227,10,23,.07), transparent 30%), linear-gradient(180deg, var(--white), var(--ice));
}
.pg-home .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.pg-home .eyebrow, .pg-home .pretitle {
  font-weight: 800;
  color: var(--red);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .82rem;
}
.pg-home .hero h1 {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.03em;
  margin: 14px 0 22px;
  color: var(--navy-deep);
}
.pg-home .hero h1 .red { color: var(--red); }
.pg-home .hero p { font-size: 1.08rem; color: var(--ink-soft); max-width: 640px; margin-bottom: 12px; }
.pg-home .hero p strong { color: var(--ink); }
.pg-home .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.pg-home .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .98rem;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pg-home .btn-primary { background: var(--red); color: var(--white); box-shadow: 0 12px 26px rgba(227,10,23,.25); }
.pg-home .btn-primary:hover { transform: translateY(-2px); }
.pg-home .btn-secondary { border: 2px solid var(--line); color: var(--navy); background: var(--white); }
.pg-home .btn-secondary:hover { border-color: var(--navy); }
.pg-home .btn-dark { background: var(--navy); color: var(--white); }
.pg-home .btn-dark:hover { background: var(--navy-deep); }
.pg-home .hero-media { position: relative; }
.pg-home .hero-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.pg-home .hero-note {
  position: absolute; left: -24px; bottom: 26px;
  background: var(--white); border-left: 6px solid var(--red);
  padding: 18px 22px; border-radius: 16px; box-shadow: var(--shadow);
  max-width: 270px;
}
.pg-home .hero-note strong { display: block; color: var(--navy); font-size: 1.02rem; }
.pg-home .hero-note span { display: block; color: var(--ink-soft); font-size: .88rem; margin-top: 4px; }

.pg-home .trust { padding: 0 0 0; background: var(--ice); }
.pg-home .trust-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: var(--white); box-shadow: var(--shadow-sm);
  transform: translateY(-38px); margin-bottom: -38px;
}
.pg-home .trust-item {
  min-height: 118px; padding: 18px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-right: 1px solid var(--line);
}
.pg-home .trust-item:last-child { border-right: none; }
.pg-home .trust-item strong { color: var(--navy); font-size: 1.22rem; font-family: 'DM Sans', sans-serif; }
.pg-home .trust-item span { text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); font-weight: 700; font-size: .72rem; margin-top: 5px; }

.pg-home .section { padding: 92px 0; }
.pg-home .section-tight { padding: 70px 0; }
.pg-home .section.white { background: var(--white); }
.pg-home .section.ice { background: var(--ice); }
.pg-home .section.navy-deep { background: var(--navy-deep); color: var(--white); }
.pg-home .section.navy-deep h2, .pg-home .section.navy-deep .pretitle { color: var(--white); }
.pg-home .section.navy-deep .lead { color: rgba(255,255,255,.75); }
.pg-home .section-head { max-width: 780px; margin-bottom: 40px; }
.pg-home .section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.pg-home .section h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -.02em; margin: 10px 0 16px; color: var(--navy-deep); }
.pg-home .lead { font-size: 1.08rem; color: var(--ink-soft); margin: 0; }

.pg-home .grid { display: grid; gap: 20px; }
.pg-home .grid-5 { grid-template-columns: repeat(5,1fr); }
.pg-home .grid-4 { grid-template-columns: repeat(4,1fr); }
.pg-home .grid-3 { grid-template-columns: repeat(3,1fr); }
.pg-home .grid-2 { grid-template-columns: repeat(2,1fr); }

.pg-home .card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
  opacity: 0;
}
.pg-home .card.vis { animation: pgHomeFadeUp .6s ease forwards; }
.pg-home .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.pg-home .card h3 { font-size: 1.2rem; margin: 6px 0 10px; color: var(--navy); }
.pg-home .card p { color: var(--ink-soft); margin: 0; }

.pg-home .problem-card { position: relative; min-height: 235px; padding-bottom: 52px; }
.pg-home .problem-card .num { font-weight: 800; color: var(--red); letter-spacing: .1em; font-size: .74rem; text-transform: uppercase; }
.pg-home .problem-card h3 { font-size: 1.25rem; }
.pg-home .problem-card .arrow { position: absolute; right: 22px; bottom: 18px; color: var(--red); font-size: 1.3rem; }

.pg-home .split { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
.pg-home .media-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; opacity: 0; }
.pg-home .media-grid.vis { animation: pgHomeFadeUp .6s ease forwards; }
.pg-home .media-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.pg-home .media-grid .tall { grid-row: span 2; min-height: 440px; }
/* Round 3 item 3: balanced 2x2 variant (4 equal photos, no spanning tile) for the
   "More than a machine shop" section, scoped so it doesn't affect other .media-grid uses. */
.pg-home .media-grid.media-grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.pg-home .media-grid.media-grid-4 img { min-height: 210px; }
.pg-home .feature-list { display: grid; gap: 18px; margin: 24px 0; }
.pg-home .feature { display: grid; grid-template-columns: 42px 1fr; gap: 14px; }
.pg-home .feature .icon {
  width: 40px; height: 40px; border-radius: 12px; background: var(--ice);
  display: flex; align-items: center; justify-content: center; color: var(--navy); font-weight: 800; font-family: 'DM Sans', sans-serif;
}
.pg-home .feature strong { display: block; color: var(--navy); }
.pg-home .feature span { color: var(--ink-soft); }

.pg-home .cap-card { min-height: 235px; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); box-shadow: none; }
.pg-home .cap-card .cap-icon { font-size: 1.6rem; color: var(--red); }
.pg-home .cap-card h3 { color: var(--white); }
.pg-home .cap-card p { color: rgba(255,255,255,.75); }
.pg-home .cap-card a { display: inline-block; margin-top: 16px; color: var(--red); font-weight: 800; }
.pg-home .cap-card:nth-child(odd) { background: var(--white); border-color: var(--line); box-shadow: var(--shadow-sm); }
.pg-home .cap-card:nth-child(odd) h3 { color: var(--navy); }
.pg-home .cap-card:nth-child(odd) p { color: var(--ink-soft); }
.pg-home .cap-card:nth-child(even) a { color: #EF7B82; }

.pg-home .industry-card { min-height: 175px; }
.pg-home .industry-card h3 { font-size: 1.1rem; }

.pg-home .work-grid { display: grid; grid-template-columns: 2fr repeat(4,1fr); gap: 14px; }
/* Round 3 item 4: normalize the Fabrication row to 5 equal-width tiles (was 2fr-first),
   and cancel the first-tile row-span so all 5 tiles render the same height. */
.pg-home .work-grid.work-grid-even { grid-template-columns: repeat(5,1fr); }
.pg-home .work-grid.work-grid-even .work-card:first-child { grid-row: auto; }
.pg-home .work-card { position: relative; overflow: hidden; border-radius: 18px; min-height: 230px; opacity: 0; }
.pg-home .work-card.vis { animation: pgHomeFadeUp .6s ease forwards; }
.pg-home .work-card:first-child { grid-row: span 2; }
.pg-home .work-card img { width: 100%; height: 100%; object-fit: cover; }
.pg-home .work-card .label {
  position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 12px;
  border-radius: 10px; background: rgba(7,31,66,.9); color: var(--white); font-weight: 700; font-size: .82rem;
}

.pg-home .review-card { border-left: 4px solid var(--red); }
.pg-home .stars { color: var(--red); margin-bottom: 10px; font-size: 1.1rem; letter-spacing: 2px; }
.pg-home .review-card p.quote { color: var(--ink); font-style: italic; margin-bottom: 14px; line-height: 1.7; }
.pg-home .review-card p.no-quote { color: var(--ink-soft); font-style: italic; margin-bottom: 14px; }
.pg-home .review-who { font-weight: 800; color: var(--navy); font-size: .92rem; }
.pg-home .review-meta { color: var(--ink-soft); font-size: .82rem; margin-top: 2px; }

.pg-home .facility {
  display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line);
  border-radius: 24px; overflow: hidden; background: var(--white); box-shadow: var(--shadow);
}
.pg-home .facility img { height: 100%; min-height: 400px; width: 100%; object-fit: cover; }
.pg-home .facility-copy { padding: 40px; }
.pg-home .timeline-list { list-style: none; margin: 20px 0; display: grid; gap: 12px; }
.pg-home .timeline-list li { padding-left: 24px; position: relative; color: var(--ink-soft); }
.pg-home .timeline-list li strong { color: var(--navy); }
.pg-home .timeline-list li::before { content: '\2022'; position: absolute; left: 0; color: var(--red); font-weight: 900; }
.pg-home .stat-pair { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 24px; }
.pg-home .stat-box {
  background: var(--ice); border: 1px solid var(--line); border-radius: 16px;
  min-height: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.pg-home .stat-box strong { color: var(--navy); font-size: 1.15rem; font-family: 'DM Sans', sans-serif; }
.pg-home .stat-box span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }

.pg-home .callout {
  background: var(--navy); color: var(--white); border-radius: 26px; padding: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.pg-home .callout h2 { color: var(--white); font-size: clamp(1.9rem, 3vw, 2.7rem); margin: 0 0 8px; }
.pg-home .callout p { margin: 0; color: rgba(255,255,255,.78); }
.pg-home .callout-btn-secondary { border-color: rgba(255,255,255,.4); color: var(--white); background: transparent; }

.pg-home footer { background: var(--navy-deep); color: var(--white); padding: 56px 0 20px; }
.pg-home .footer-container { max-width: var(--max); margin: 0 auto; width: calc(100% - 40px); }
.pg-home .footer-grid { display: grid; grid-template-columns: 1.3fr .9fr .9fr .9fr; gap: 32px; margin-bottom: 36px; }
.pg-home .footer-section h3 { color: var(--white); font-size: 1.05rem; margin-bottom: 14px; font-family: 'DM Sans', sans-serif; }
.pg-home .footer-section ul { list-style: none; }
.pg-home .footer-section li { margin-bottom: 9px; }
.pg-home .footer-section a { color: rgba(255,255,255,.78); transition: color .2s ease; }
.pg-home .footer-section a:hover { color: var(--red); }
.pg-home .footer-contact { margin-bottom: 6px; color: rgba(255,255,255,.85); }
.pg-home .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; text-align: center;
  color: rgba(255,255,255,.6); font-size: .85rem;
}

.pg-home .actions-center { display: flex; justify-content: center; margin-top: 34px; }

@keyframes pgHomeFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1050px) {
  .pg-home .grid-5 { grid-template-columns: repeat(3,1fr); }
  .pg-home .grid-4 { grid-template-columns: repeat(2,1fr); }
  .pg-home .work-grid { grid-template-columns: repeat(2,1fr); }
  .pg-home .work-grid.work-grid-even { grid-template-columns: repeat(2,1fr); }
  .pg-home .work-card:first-child { grid-row: auto; }
  .pg-home .footer-grid { grid-template-columns: 1fr 1fr; }
  .pg-home .nav-links { gap: 16px; font-size: .88rem; }
}

@media (max-width: 768px) {
  .pg-home .hero-grid, .pg-home .split, .pg-home .facility { grid-template-columns: 1fr; }
  .pg-home .hero-media { margin-top: 20px; }
  .pg-home .hero-note { position: relative; left: auto; bottom: auto; margin: -30px 16px 0; }
  .pg-home .trust-grid { grid-template-columns: repeat(2,1fr); transform: none; margin-bottom: 0; margin-top: 30px; }
  .pg-home .trust-item { border-bottom: 1px solid var(--line); }
  .pg-home .grid-3, .pg-home .grid-5 { grid-template-columns: 1fr 1fr; }
  .pg-home .section { padding: 60px 0; }
  .pg-home .facility img { min-height: 280px; }
  .pg-home .callout { flex-direction: column; align-items: flex-start; }
  .pg-home .nav-container { min-height: 70px; flex-wrap: wrap; row-gap: 10px; padding: 12px 0; }
  .pg-home .nav-links { width: 100%; overflow-x: auto; justify-content: flex-start; gap: 18px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .pg-home .nav-links li { flex: 0 0 auto; }
  .pg-home .nav-links a { white-space: nowrap; }
  .pg-home .nav-links a.cta-btn { white-space: nowrap; }
}

@media (max-width: 600px) {
  .pg-home .grid-2, .pg-home .grid-3, .pg-home .grid-4, .pg-home .grid-5, .pg-home .work-grid, .pg-home .stat-pair { grid-template-columns: 1fr; }
  .pg-home .trust-grid { grid-template-columns: 1fr; }
  .pg-home .trust-item { border-right: none; }
  .pg-home .hero h1 { font-size: 2.3rem; }
  .pg-home .actions .btn { width: 100%; }
  .pg-home .callout { padding: 30px 24px; }
  .pg-home .footer-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; gap: 4px; padding: 8px 16px; text-align: center; }
}

/* ==========================================================================
   4b. CAPABILITY PAGES — .pg-capability
   (capabilities, how-we-help, cnc-machining,
    emergency-repair-reverse-engineering, industrial-fabrication,
    oem-replacement-parts, prototype-production-machining, waterjet-cutting)
   ========================================================================== */
/* This family's original body{line-height:1.65} is intentionally NOT
   reproduced here — it normalizes to the site-wide 1.6 set on body in the
   base rules above (Wave 1 font-stack/line-height normalization; see file
   header). The ~3% tighter line box is imperceptible at reading sizes and
   removing it also resolves the drift detector's "Body line-height" metric. */
.pg-capability .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }

/* per-family topbar overrides retired 8/24 — shared .topbar above is canon */

.pg-capability #nav { background: var(--white); position: sticky; top: 0; z-index: 999; padding: .85rem 0; border-bottom: 1px solid rgba(16,53,102,.08); transition: box-shadow .25s ease, padding .25s ease; }
.pg-capability #nav.scrolled { box-shadow: 0 4px 20px rgba(7,31,66,.12); padding: .55rem 0; }
.pg-capability .nav-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.pg-capability .nav-links { display: flex; align-items: center; gap: 1.6rem; }
.pg-capability .nav-links a { font-weight: 700; font-size: .92rem; color: var(--ink); padding: .3rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.pg-capability .nav-links a:hover, .pg-capability .nav-links a.active { color: var(--navy); border-bottom-color: var(--red); }
.pg-capability .nav-dropdown-toggle { font-weight: 700; font-size: .92rem; color: var(--ink); padding: .3rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.pg-capability .nav-dropdown-toggle:hover,
.pg-capability .nav-dropdown.open .nav-dropdown-toggle,
.pg-capability .nav-dropdown-toggle.active { color: var(--navy); border-bottom-color: var(--red); }
.pg-capability .nav-links a.cta-btn { background: var(--red); color: #fff; padding: .65rem 1.35rem; border-radius: 999px; border-bottom: none; }
.pg-capability .nav-links a.cta-btn:hover { background: var(--navy); color: #fff; }

.pg-capability .positioning-strip { background: var(--navy); color: #fff; text-align: center; font-size: clamp(.82rem,1.3vw,.98rem); font-weight: 800; letter-spacing: .09em; padding: .8rem 1rem; text-transform: uppercase; }

.pg-capability .hero { background: var(--navy-deep); position: relative; min-height: 88vh; display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.pg-capability .hero-media { position: absolute; inset: 0; z-index: 0; }
.pg-capability .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.pg-capability .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(7,31,66,.95) 0%, rgba(7,31,66,.78) 30%, rgba(7,31,66,.35) 62%, rgba(7,31,66,.08) 100%); }
.pg-capability .hero-inner { position: relative; z-index: 2; padding: 6rem 2rem 4rem; max-width: 1200px; margin: 0 auto; width: 100%; }
.pg-capability .breadcrumbs { font-size: .82rem; color: rgba(255,255,255,.7); margin-bottom: 1.5rem; }
.pg-capability .breadcrumbs a:hover { color: #fff; }
.pg-capability .pretitle { color: var(--red); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .8rem; margin-bottom: .7rem; }
.pg-capability .hero .pretitle, .pg-capability .navy-deep .pretitle { color: rgba(255,255,255,.85); display: flex; align-items: center; gap: .6rem; }
.pg-capability .hero .pretitle::before, .pg-capability .navy-deep .pretitle::before { content: ''; width: 20px; height: 2px; background: var(--red); display: inline-block; }
.pg-capability .hero h1 { color: #fff; font-size: clamp(2.1rem,4vw,3.1rem); max-width: 820px; margin-bottom: 1.25rem; }
.pg-capability .hero p.lead { color: rgba(255,255,255,.88); font-size: 1.1rem; max-width: 660px; margin-bottom: 2rem; }
.pg-capability .actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.pg-capability .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .9rem 1.75rem; border-radius: 999px; font-weight: 700; font-size: .95rem; }
.pg-capability .btn-primary { background: var(--red); color: #fff; }
.pg-capability .btn-primary:hover { background: #c30810; }
.pg-capability .btn-secondary { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.55); }
.pg-capability .btn-secondary:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.pg-capability .btn-outline-navy { background: transparent; color: var(--navy); border: 2px solid var(--navy); }
.pg-capability .btn-outline-navy:hover { background: var(--navy); color: #fff; }

.pg-capability .section { padding: 5.5rem 0; }
.pg-capability .section.white { background: var(--white); }
.pg-capability .section.ice { background: var(--ice); }
.pg-capability .section.navy-deep { background: var(--navy-deep); color: #fff; }
.pg-capability .section.navy-deep h2, .pg-capability .section.navy-deep h3 { color: #fff; }
.pg-capability .section.navy-deep p { color: rgba(255,255,255,.82); }
.pg-capability .section-head { max-width: 700px; margin: 0 0 3rem; }
.pg-capability .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.pg-capability h2 { font-family: 'DM Sans','Inter',Arial,sans-serif; line-height: 1.12; color: var(--navy); font-weight: 800; font-size: clamp(2rem,3.6vw,3rem); margin-bottom: .85rem; }
.pg-capability h1, .pg-capability h3 { font-family: 'DM Sans','Inter',Arial,sans-serif; line-height: 1.15; color: var(--navy); font-weight: 800; }
.pg-capability .lead { color: var(--ink-soft); font-size: 1.05rem; }
.pg-capability .section.navy-deep .lead { color: rgba(255,255,255,.82); }

.pg-capability ul { list-style: none; }
.pg-capability .grid { display: grid; gap: 1.75rem; }
.pg-capability .grid-2 { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.pg-capability .card { background: #fff; border-radius: 12px; padding: 1.9rem 1.7rem; box-shadow: 0 6px 24px rgba(16,53,102,.07); border: 1px solid rgba(16,53,102,.06); transition: transform .25s ease, box-shadow .25s ease; }
.pg-capability .card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16,53,102,.13); }
.pg-capability .step { text-align: left; }
.pg-capability .step-no { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-family: 'DM Sans',sans-serif; margin-bottom: 1.1rem; }
/* Wave 2 (spec 2a): "Step 3 text fits one line at desktop". Measured: the
   3-col step grid gives each step a fixed 360px column at 1440 (and
   anywhere the container is at its 1200px max-width). The longest step-3
   heading across the 6 capability pages (industrial-fabrication's "Cut,
   form, machine, weld, assemble and deliver.") needs ~350px at .94rem in
   DM Sans 800 — under 360px with margin; the shortest (waterjet's "Cut,
   form and deliver.") needs far less. 1.15rem (the section-card h3 size)
   never fits any of them on one line; this is a deliberately smaller size
   for this specific 3-word-caption component, not a contradiction of the
   "bigger section headings" rule elsewhere, which targets page-level h2s. */
.pg-capability .step h3 { font-size: .94rem; line-height: 1.3; margin-bottom: .5rem; }
.pg-capability .step p { color: var(--ink-soft); font-size: .92rem; }

/* capabilities.html hub-only additions */
/* Wave 2 (spec 2a): "Card titles slightly larger and centered on capability
   cards". Centering only the h3 while the icon stayed left-anchored made
   the title float off-axis from everything around it, especially on
   2-line titles — so the icon is centered too, giving a coherent
   "centered icon+title header, left-aligned body copy" card, a common and
   legible pattern rather than a half-centered one. */
.pg-capability .cap-card .cap-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--ice); color: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; margin: 0 auto 1.1rem; }
.pg-capability .cap-card h3 { font-size: 1.18rem; font-weight: 800; margin-bottom: .55rem; text-align: center; }
.pg-capability .cap-card p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1.1rem; }
.pg-capability .cap-card .explore-link { color: var(--red); font-weight: 700; font-size: .9rem; }
.pg-capability .material-card h3 { font-size: 1.15rem; margin-bottom: .65rem; }
.pg-capability .material-card p { color: var(--ink-soft); font-size: .95rem; }
.pg-capability .grid-3 { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }

/* how-we-help.html-only additions */
.pg-capability .grid-5 { grid-template-columns: repeat(auto-fit,minmax(215px,1fr)); }

/* Wave 2 grid-balance fix (spec 2a): "no row layout that leaves a lone
   orphan card". Fixed 2026-08-23.
   Bug found in Wave 1: capabilities.html's 6-card grid uses
   class="grid grid-3 cap-grid-6" — .grid-3 (auto-fit, minmax 240px) and
   .cap-grid-6 (fixed 3 cols) were both single-class selectors of equal
   specificity, so whichever was declared later in the file won. Pre-Wave-1
   that was .grid-3, producing 4+2 instead of the intended 3+3.
   Fix: compound selectors matching the actual multi-class markup outrank
   either single-class rule regardless of source order, so this is no
   longer a source-order accident — it's an explicit rule.
   Reused verbatim for how-we-help.html's 5-card problem-grid (class="grid
   grid-5 cap-grid-6"): a fixed 3-column grid renders 5 cards as 3+2 today
   (a real but non-orphan short row — never a lone stranded card), and
   right after Wave 3 adds the 6th "Improve safety & access" card in the
   same wave that fixes copy, it becomes 3+3 automatically with no further
   CSS change needed. Adding that 6th card is explicitly Wave 3's job (per
   this wave's brief) — not done here. */
.pg-capability .grid-3.cap-grid-6,
.pg-capability .grid-5.cap-grid-6 { grid-template-columns: repeat(3,1fr); }
/* Wave 4 QA fix: same orphan-row problem, this time on capabilities.html's
   10-card "Extended Capability Network" grid (class="grid grid-3 cap-grid-10").
   Auto-fit at minmax(240px,1fr) rendered 4+4+2 with the last row left-aligned;
   spec calls for these boxes centered/evenly spaced. Fixed 5-column grid gives
   two full, centered rows of 5 instead. */
.pg-capability .grid-3.cap-grid-10 { grid-template-columns: repeat(5,1fr); }
.pg-capability .problem-card { display: block; border-top: 3px solid var(--red); }
.pg-capability .problem-card .num { color: var(--red); font-weight: 800; font-size: .72rem; letter-spacing: .06em; margin-bottom: .75rem; }
.pg-capability .problem-card h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.pg-capability .problem-card p { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1rem; }
.pg-capability .problem-card .arrow { color: var(--red); font-weight: 700; }
.pg-capability .split .eyebrow-line { font-weight: 700; }

.pg-capability .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.25rem; align-items: center; }
/* .split.reverse is scoped to .pg-capabilities only (not the shared family
   block): capabilities.html's original CSS defines it and its markup uses
   it, but how-we-help.html's markup ALSO carries class="split reverse" while
   its original stylesheet never defined .split.reverse at all — there the
   "reverse" class was always inert. Sharing this rule broke that page's
   mobile stack: .split.reverse (2 classes) beat the 900px ".split{1fr}"
   override (1 class) by specificity, leaving it two columns at 390px. */
.pg-capabilities .split.reverse { grid-template-columns: .95fr 1.05fr; }
.pg-capability .split .split-media img { border-radius: 14px; box-shadow: 0 20px 45px rgba(7,31,66,.28); }
.pg-capability .split p.strong { font-weight: 700; color: var(--navy); margin-top: 1rem; }
.pg-capability .section.navy-deep .split p.strong { color: #fff; }

.pg-capability .split-media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pg-capability .split-media-duo img { border-radius: 14px; box-shadow: 0 20px 45px rgba(7,31,66,.20); aspect-ratio: 3/4; object-fit: cover; width: 100%; height: 100%; }

.pg-capability .check-list { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.5rem; }
.pg-capability .check-list li { display: flex; gap: .65rem; align-items: flex-start; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.55; }
.pg-capability .check-list li::before { content: '\2713'; color: var(--red); font-weight: 800; flex-shrink: 0; }

.pg-capability .local-note { border-left: 4px solid var(--red); background: #fff; padding: 1.1rem 1.35rem; border-radius: 0 10px 10px 0; color: var(--ink-soft); font-size: .92rem; margin-top: 1.75rem; box-shadow: 0 6px 20px rgba(16,53,102,.06); }
.pg-capability .local-note strong { color: var(--navy); }

.pg-capability .faq-list { display: flex; flex-direction: column; gap: .9rem; margin-top: 1rem; }
.pg-capability .faq-item { background: #fff; border: 1px solid rgba(16,53,102,.08); border-radius: 12px; box-shadow: 0 6px 24px rgba(16,53,102,.05); overflow: hidden; }
.pg-capability .faq-item summary { cursor: pointer; list-style: none; padding: 1.15rem 1.5rem; font-weight: 700; font-family: 'DM Sans',sans-serif; color: var(--navy); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pg-capability .faq-item summary::-webkit-details-marker { display: none; }
.pg-capability .faq-item summary::after { content: '+'; color: var(--red); font-size: 1.3rem; font-weight: 800; flex-shrink: 0; }
.pg-capability .faq-item[open] summary::after { content: '\2212'; }
.pg-capability .faq-item p { margin: 0 1.5rem 1.25rem; color: var(--ink-soft); font-size: .95rem; }

.pg-capability .network-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: .85rem; margin-top: 1.5rem; }
.pg-capability .network-chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: .85rem 1.05rem; font-size: .9rem; font-weight: 600; color: #fff; }

.pg-capability .callout { background: var(--white); border: 1px solid var(--ice); border-left: 6px solid var(--red); border-radius: 16px; padding: 2.75rem; display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; justify-content: space-between; box-shadow: 0 10px 34px rgba(16,53,102,.08); }
.pg-capability .callout h2 { font-size: 1.7rem; margin-bottom: .4rem; }
.pg-capability .callout p { color: var(--ink-soft); }

.pg-capability footer { background: var(--navy-deep); color: #fff; padding: 3.5rem 2rem 1.5rem; }
.pg-capability .footer-container { max-width: 1200px; margin: 0 auto; }
.pg-capability .footer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 2rem; margin-bottom: 2.5rem; }
.pg-capability .footer-section h3 { color: #fff; font-size: 1.05rem; margin-bottom: 1rem; font-family: 'DM Sans',sans-serif; }
.pg-capability .footer-section ul li { margin-bottom: .65rem; }
.pg-capability .footer-section a { color: rgba(255,255,255,.8); }
.pg-capability .footer-section a:hover { color: var(--red); }
.pg-capability .footer-contact { margin-bottom: .5rem; color: rgba(255,255,255,.85); }
.pg-capability .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.75rem; text-align: center; color: rgba(255,255,255,.6); font-size: .85rem; }

.pg-capability .anim { opacity: 0; }
.pg-capability .anim.vis { animation: pgCapFadeUp .6s ease forwards; }
@keyframes pgCapFadeUp { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }

@media (max-width:900px) {
  .pg-capability .split { grid-template-columns: 1fr; }
  .pg-capability .split .split-media { order: -1; }
  /* Wave 4 QA fix: capabilities.html's body carries BOTH "pg-capability" and
     "pg-capabilities" (see line 697's .pg-capabilities .split.reverse rule),
     and that 3-class selector out-specifies the 2-class ".pg-capability .split"
     override above regardless of media query, so the Extended Capability
     Network's "split reverse" block stayed two columns at mobile — text
     truncated to a sliver on the right. Match its specificity here so the
     mobile collapse actually wins. */
  .pg-capabilities .split.reverse { grid-template-columns: 1fr; }
}
@media (max-width:768px) {
  /* compound selectors so this out-specifies the base 3-col rule above
     regardless of source order — see the grid-balance fix note there */
  .pg-capability .grid-3.cap-grid-6,
  .pg-capability .grid-5.cap-grid-6 { grid-template-columns: repeat(2,1fr); }
  .pg-capability .grid-3.cap-grid-10 { grid-template-columns: repeat(2,1fr); }
  .pg-capability .nav-container { flex-wrap: wrap; }
  .pg-capability .nav-links { width: 100%; overflow-x: auto; gap: 1.25rem; padding: .6rem 0 .2rem; justify-content: flex-start; }
  .pg-capability .nav-links::-webkit-scrollbar { display: none; }
  .pg-capability .hero { min-height: auto; }
  .pg-capability .hero-inner { padding: 5rem 1.25rem 3rem; }
  .pg-capability .section { padding: 3.5rem 0; }
  .pg-capability .container { padding: 0 1.25rem; }
  .pg-capability .callout { padding: 2rem; }
}
@media (max-width:600px) {
  /* covered by shared .topbar mobile rule */
  .pg-capability .logo img { height: 40px; }
  .pg-capability .grid-3.cap-grid-6,
  .pg-capability .grid-5.cap-grid-6 { grid-template-columns: 1fr; }
  .pg-capability .grid-3.cap-grid-10 { grid-template-columns: 1fr; }
  .pg-capability .positioning-strip { font-size: .74rem; letter-spacing: .06em; }
  .pg-capability .btn { width: 100%; justify-content: center; }
  .pg-capability .hero-inner .actions { flex-direction: column; }
  .pg-capability .split-media-duo { grid-template-columns: 1fr 1fr; gap: .6rem; }
}

/* Per-page hero photo crop (only real difference between the 6 capability
   subpages — each is a different real jobsite photo, so the vertical focal
   point differs). */
.pg-cnc-machining .hero-media img,
.pg-industrial-fabrication .hero-media img { object-position: center 38%; }
.pg-capabilities .hero-media img { object-position: center 42%; }
.pg-emergency-repair .hero-media img { object-position: center 45%; }
.pg-oem-replacement-parts .hero-media img,
.pg-waterjet-cutting .hero-media img { object-position: center 30%; }
.pg-prototype-production-machining .hero-media img,
.pg-how-we-help .hero-media img { object-position: center 40%; }

/* how-we-help.html's few other numeric deltas from the capability-family baseline */
.pg-how-we-help .hero p.lead { max-width: 640px; }
.pg-how-we-help .section-head { max-width: 680px; }
.pg-how-we-help .network-grid { grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); }

/* ==========================================================================
   4c. INFO PAGES — .pg-info (about, contact, faq)
   ========================================================================== */
.pg-info .container { max-width: 1200px; margin: 0 auto; }

/* pg-info topbar override retired 8/24 — shared .topbar is canon */
.pg-info #nav { position: sticky; top: 0; background: var(--white); z-index: 999; padding: .85rem 2rem; transition: box-shadow .3s ease; border-bottom: 1px solid #E7ECF2; }
.pg-info #nav.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.08); }
.pg-info .nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.pg-info .nav-container .logo img { height: 56px; width: auto; }
.pg-info .nav-links { display: flex; list-style: none; gap: 1.75rem; align-items: center; flex-wrap: wrap; }
.pg-info .nav-links a { color: var(--navy); font-size: .92rem; font-weight: 600; }
.pg-info .nav-links a:hover, .pg-info .nav-links a.active { color: var(--red); }
.pg-info .nav-dropdown-toggle { color: var(--navy); font-size: .92rem; font-weight: 600; }
.pg-info .nav-dropdown-toggle:hover,
.pg-info .nav-dropdown.open .nav-dropdown-toggle,
.pg-info .nav-dropdown-toggle.active { color: var(--red); }
.pg-info .nav-links a.cta-btn { background: var(--red); color: var(--white); padding: .65rem 1.25rem; border-radius: 999px; }
.pg-info .nav-links a.cta-btn:hover { background: #c00812; color: var(--white); }
/* .active on the CTA (you're on contact.html) never darkens the background —
   that's the :hover/:active-press state's job. It only needs to guarantee
   white text, same as the original li.active a.cta-btn rule it replaces. */
.pg-info .nav-links a.cta-btn.active { color: var(--white); }
.pg-info .positioning-strip { background: var(--navy); color: var(--white); text-align: center; text-transform: uppercase; font-size: clamp(.82rem,1.3vw,.98rem); font-weight: 800; letter-spacing: .09em; padding: .8rem 1rem; }

.pg-info .section { padding: 70px 2rem; }
.pg-info .section.white { background: var(--white); }
.pg-info .section.ice { background: var(--ice); }
.pg-info .section.navy-deep { background: var(--navy-deep); color: var(--white); }
.pg-info .section-head { max-width: 700px; margin: 0 auto 2.75rem; text-align: center; }
.pg-info .section-head .eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--red); font-weight: 700; margin-bottom: .6rem; }
.pg-info .section.navy-deep .section-head .eyebrow { color: #EF7B82; }
.pg-info .section-head h2 { font-size: clamp(2rem,3.4vw,2.8rem); font-weight: 800; color: var(--navy); line-height: 1.15; }
.pg-info .section.navy-deep .section-head h2 { color: var(--white); }
.pg-info .section-head p { color: var(--ink-soft); margin-top: .85rem; }
.pg-info .section.navy-deep .section-head p { color: rgba(255,255,255,.8); }
.pg-info h1, .pg-info h2, .pg-info h3 { font-family: 'DM Sans','Inter',Arial,sans-serif; }

.pg-info .btn { padding: .9rem 2rem; border-radius: 999px; font-weight: 700; display: inline-block; text-align: center; }
.pg-info .btn-primary { background: var(--red); color: var(--white); }
.pg-info .btn-primary:hover { background: #c00812; }
.pg-info .btn-secondary { background: transparent; color: var(--white); border: 2px solid var(--white); }
.pg-info .btn-secondary:hover { background: var(--white); color: var(--navy-deep); }

.pg-info footer { background: var(--navy-deep); color: var(--white); padding: 3rem 2rem 1.5rem; }
.pg-info .footer-container { max-width: 1200px; margin: 0 auto; }
.pg-info .footer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 2rem; margin-bottom: 2rem; }
.pg-info .footer-section h3 { color: var(--white); font-size: 1rem; margin-bottom: 1rem; font-family: 'DM Sans',sans-serif; }
.pg-info .footer-section ul { list-style: none; }
.pg-info .footer-section li { margin-bottom: .6rem; }
.pg-info .footer-section a, .pg-info .footer-contact { color: rgba(255,255,255,.75); font-size: .9rem; }
.pg-info .footer-section a:hover { color: var(--red); }
.pg-info .footer-contact { margin-bottom: .4rem; display: block; }
.pg-info .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; text-align: center; color: rgba(255,255,255,.6); font-size: .82rem; }

/* Wave 1 left a `.pg-info .nav-links{display:none}` rule here that was
   always dead: the shared #navLinks.nav-links{display:none} rule (section 3)
   outranks it by specificity (ID beats any number of classes) regardless of
   source order, so info pages' nav-links was already hidden below 1280px
   the same as every other family. Removed rather than carried forward. */

/* about.html-only hero (unique 2-col layout — different from contact/faq's centered stack) */
.pg-about .hero { background: linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%); color: var(--white); padding: 64px 2rem; }
.pg-about .hero-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.pg-about .hero .eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: #EF7B82; font-weight: 700; margin-bottom: .75rem; }
.pg-about .hero h1 { font-size: clamp(2rem,4vw,2.85rem); font-weight: 800; margin-bottom: 1rem; line-height: 1.15; }
.pg-about .hero p { font-size: 1.08rem; color: rgba(255,255,255,.88); max-width: 56ch; }
.pg-about .hero-facts { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.pg-about .hero-facts span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); padding: .5rem .9rem; border-radius: 30px; font-size: .82rem; font-weight: 600; }
.pg-about .hero-photo img { border-radius: 14px; box-shadow: 0 20px 45px rgba(0,0,0,.35); }

/* about.html-only sections */
.pg-about .timeline { display: grid; grid-template-columns: repeat(5,1fr); gap: 1.25rem; }
.pg-about .timeline-card { background: var(--white); border: 1px solid #E7ECF2; border-top: 4px solid var(--red); border-radius: 10px; padding: 1.5rem 1.25rem; box-shadow: 0 4px 15px rgba(16,53,102,.06); }
.pg-about .timeline-card .year { color: var(--red); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem; }
.pg-about .timeline-card h3 { color: var(--navy); font-size: 1.05rem; margin-bottom: .55rem; line-height: 1.3; }
.pg-about .timeline-card p { color: var(--ink-soft); font-size: .9rem; }

.pg-about .facility-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.pg-about .facility-split img { border-radius: 12px; box-shadow: 0 12px 30px rgba(16,53,102,.14); }
.pg-about .facility-copy h2 { font-size: clamp(1.9rem,3.2vw,2.6rem); font-weight: 800; color: var(--navy); margin-bottom: 1rem; line-height: 1.15; }
.pg-about .facility-copy p { color: var(--ink-soft); margin-bottom: 1.5rem; }
.pg-about .facility-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-bottom: 1.75rem; }
.pg-about .facility-stats .stat { background: var(--white); border-left: 4px solid var(--red); border-radius: 8px; padding: 1rem 1.1rem; box-shadow: 0 4px 15px rgba(16,53,102,.06); }
.pg-about .facility-stats .stat strong { display: block; color: var(--navy); font-size: 1.3rem; font-family: 'DM Sans',sans-serif; }
.pg-about .facility-stats .stat span { color: var(--ink-soft); font-size: .82rem; }

.pg-about .values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }
.pg-about .value-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 1.5rem 1.25rem; }
.pg-about .value-card h3 { font-size: 1.02rem; margin-bottom: .5rem; color: var(--white); }
.pg-about .value-card p { font-size: .88rem; color: rgba(255,255,255,.78); }

.pg-about .quotes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.pg-about .quote-card { background: var(--ice); border-radius: 12px; padding: 1.75rem 1.5rem; position: relative; }
.pg-about .quote-card .mark { color: var(--red); font-size: 2.5rem; font-family: 'DM Sans',sans-serif; line-height: 1; margin-bottom: .5rem; display: block; }
.pg-about .quote-card p { color: var(--navy); font-size: 1.02rem; font-style: italic; margin-bottom: 1rem; line-height: 1.5; }
.pg-about .quote-card .who { color: var(--ink-soft); font-size: .85rem; font-weight: 600; }

.pg-about .cta-band { background: var(--navy-deep); color: var(--white); padding: 60px 2rem; text-align: center; }
.pg-about .cta-band h2 { font-size: 1.75rem; margin-bottom: .75rem; }
.pg-about .cta-band p { max-width: 60ch; margin: 0 auto 1.5rem; color: rgba(255,255,255,.85); }
.pg-about .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@media (max-width:900px) {
  .pg-about .hero-grid { grid-template-columns: 1fr; }
  .pg-about .hero-photo { order: -1; }
  .pg-about .timeline { grid-template-columns: repeat(2,1fr); }
  .pg-about .facility-split { grid-template-columns: 1fr; }
  .pg-about .facility-split img { order: -1; }
  .pg-about .values-grid { grid-template-columns: repeat(2,1fr); }
  .pg-about .quotes-grid { grid-template-columns: 1fr; }
}
@media (max-width:600px) {
  .pg-about .timeline { grid-template-columns: 1fr; }
  .pg-about .facility-stats { grid-template-columns: 1fr; }
}
/* QA fix: the hero-photo's uncapped portrait aspect ratio (675x900) pushes
   the stacked hero h1 down far enough on phones that it lands under the
   fixed .ds-switch preview pill (bottom:20px) on initial load, before any
   scroll. Cap the photo height so the whole hero clears the pill's strip;
   object-position biased toward the top keeps the team's heads in frame. */
@media (max-width:520px) {
  .pg-about .hero-photo { height: 220px; }
  .pg-about .hero-photo img { object-position: center 18%; }
}

/* contact.html + faq.html shared centered hero (both "pg-info", differ only per-page below) */
.pg-contact .hero, .pg-faq .hero { background: linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%); color: var(--white); padding: 70px 2rem 60px; text-align: center; }
.pg-contact .hero-content, .pg-faq .hero-content { max-width: 760px; margin: 0 auto; }
.pg-contact .hero .eyebrow, .pg-faq .hero .eyebrow { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: #EF7B82; font-weight: 700; margin-bottom: .75rem; }
.pg-contact .hero h1 { font-size: clamp(2rem,4vw,3rem); font-weight: 800; margin-bottom: 1rem; line-height: 1.15; }
.pg-faq .hero h1 { font-size: clamp(2rem,4vw,2.75rem); font-weight: 800; margin-bottom: 1rem; line-height: 1.2; }
.pg-contact .hero p { font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 60ch; margin: 0 auto; }
.pg-faq .hero p { font-size: 1.1rem; color: rgba(255,255,255,.9); max-width: 62ch; margin: 0 auto; }

/* contact.html-only sections */
.pg-contact .info-section { padding: 50px 2rem; background: var(--ice); }
.pg-contact .info-container { max-width: 1100px; margin: 0 auto; }
.pg-contact .info-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1.25rem; }
.pg-contact .info-card { background: var(--white); padding: 1.75rem 1.5rem; border-radius: 10px; border-left: 4px solid var(--red); box-shadow: 0 4px 15px rgba(16,53,102,.06); }
.pg-contact .info-card h3 { font-size: .95rem; color: var(--navy); margin-bottom: .4rem; }
.pg-contact .info-card p, .pg-contact .info-card a { color: var(--ink-soft); font-size: .95rem; }
.pg-contact .info-card a:hover { color: var(--red); }

.pg-contact .form-section { padding: 70px 2rem; background: var(--white); }
.pg-contact .form-wrap { max-width: 760px; margin: 0 auto; }
.pg-contact .form-wrap h2 { font-size: clamp(1.8rem,3vw,2.3rem); font-weight: 800; color: var(--navy); margin-bottom: .5rem; text-align: center; }
.pg-contact .form-wrap > p.lede { text-align: center; color: var(--ink-soft); margin-bottom: 2.5rem; }
.pg-contact .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pg-contact .field { margin-bottom: 1.25rem; }
.pg-contact .field label { display: block; font-size: .85rem; font-weight: 600; color: var(--navy); margin-bottom: .4rem; }
.pg-contact .field input, .pg-contact .field select, .pg-contact .field textarea { width: 100%; padding: .75rem .9rem; border: 1px solid #D3DAE3; border-radius: 7px; font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--white); }
.pg-contact .field input:focus, .pg-contact .field select:focus, .pg-contact .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(16,53,102,.12); }
.pg-contact .field textarea { min-height: 140px; resize: vertical; }
.pg-contact .field-file { border: 2px dashed #D3DAE3; border-radius: 10px; padding: 1.5rem; text-align: center; background: var(--ice); }
.pg-contact .field-file label { font-weight: 600; color: var(--navy); margin-bottom: .5rem; display: block; }
.pg-contact .field-file small { color: var(--ink-soft); display: block; margin-top: .4rem; }
.pg-contact .submit-btn { width: 100%; background: var(--red); color: var(--white); border: none; padding: 1rem; border-radius: 999px; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: background .2s ease; }
.pg-contact .submit-btn:hover { background: #c00812; }
.pg-contact .form-note { text-align: center; font-size: .85rem; color: var(--ink-soft); margin-top: 1rem; }

.pg-contact .walkin-band { background: var(--navy-deep); color: var(--white); padding: 60px 2rem; text-align: center; }
.pg-contact .walkin-band h2 { font-size: 1.75rem; margin-bottom: .75rem; }
.pg-contact .walkin-band p { max-width: 60ch; margin: 0 auto 1.5rem; color: rgba(255,255,255,.85); }
.pg-contact .walkin-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@media (max-width:768px) { .pg-contact .field-row { grid-template-columns: 1fr; } }

/* faq.html-only sections */
.pg-faq .faq-section { padding: 70px 2rem; background: var(--ice); }
.pg-faq .faq-layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 230px 1fr; gap: 3rem; align-items: start; }
.pg-faq .faq-nav { position: sticky; top: 90px; background: var(--white); border-radius: 10px; padding: 1.5rem 1.25rem; box-shadow: 0 4px 15px rgba(16,53,102,.06); }
.pg-faq .faq-nav strong { display: block; color: var(--navy); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1rem; }
.pg-faq .faq-nav a { display: block; color: var(--ink-soft); font-size: .92rem; font-weight: 600; padding: .5rem 0; border-top: 1px solid #E7ECF2; }
.pg-faq .faq-nav a:first-of-type { border-top: none; }
.pg-faq .faq-nav a:hover { color: var(--red); }

.pg-faq .faq-group { margin-bottom: 2.75rem; scroll-margin-top: 100px; }
.pg-faq .faq-group:last-child { margin-bottom: 0; }
.pg-faq .faq-group h2 { color: var(--navy); font-size: 1.5rem; margin-bottom: 1.1rem; padding-bottom: .6rem; border-bottom: 2px solid var(--red); }
.pg-faq .faq-item { background: var(--white); border-radius: 10px; margin-bottom: .85rem; box-shadow: 0 3px 12px rgba(16,53,102,.05); overflow: hidden; }
.pg-faq .faq-item summary { list-style: none; cursor: pointer; padding: 1.1rem 1.4rem; font-weight: 700; color: var(--navy); font-size: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pg-faq .faq-item summary::-webkit-details-marker { display: none; }
.pg-faq .faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--red); font-weight: 700; flex-shrink: 0; transition: transform .2s ease; }
.pg-faq .faq-item[open] summary::after { transform: rotate(45deg); }
.pg-faq .faq-item p { padding: 0 1.4rem 1.25rem; color: var(--ink-soft); font-size: .95rem; }

.pg-faq .cta-band { background: var(--navy-deep); color: var(--white); padding: 60px 2rem; text-align: center; }
.pg-faq .cta-band h2 { font-size: 1.75rem; margin-bottom: .75rem; }
.pg-faq .cta-band p { max-width: 60ch; margin: 0 auto 1.5rem; color: rgba(255,255,255,.85); }
.pg-faq .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

@media (max-width:900px) {
  .pg-faq .faq-layout { grid-template-columns: 1fr; }
  .pg-faq .faq-nav { position: static; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
  .pg-faq .faq-nav strong { width: 100%; }
  .pg-faq .faq-nav a { border-top: none; padding: .25rem 0; }
}

/* ==========================================================================
   4d. GALLERY PAGES — .pg-gallery (our-work, industries)
   ========================================================================== */
.pg-gallery { line-height: 1.6; }
.pg-gallery .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.pg-gallery h1, .pg-gallery h2, .pg-gallery h3, .pg-gallery h4 { font-family: 'DM Sans','Inter',Arial,sans-serif; color: var(--navy); line-height: 1.2; }

/* pg-gallery topbar override retired 8/24 — shared .topbar is canon */

.pg-gallery #nav { position: sticky; top: 0; z-index: 999; background: var(--white); border-bottom: 1px solid rgba(16,53,102,.08); transition: box-shadow .25s ease; }
.pg-gallery #nav.scrolled { box-shadow: 0 4px 20px rgba(7,31,66,.12); }
.pg-gallery .nav-container { max-width: 1200px; margin: 0 auto; padding: .7rem 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; }
.pg-gallery .nav-links { display: flex; list-style: none; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.pg-gallery .nav-links a { font-size: .92rem; font-weight: 600; color: var(--navy); transition: color .2s ease; }
.pg-gallery .nav-links a:hover { color: var(--red); }
.pg-gallery .nav-links a.active { color: var(--red); }
.pg-gallery .nav-dropdown-toggle { font-size: .92rem; font-weight: 600; color: var(--navy); transition: color .2s ease; }
.pg-gallery .nav-dropdown-toggle:hover,
.pg-gallery .nav-dropdown.open .nav-dropdown-toggle,
.pg-gallery .nav-dropdown-toggle.active { color: var(--red); }
.pg-gallery .nav-links .cta-btn { background: var(--red); color: var(--white); padding: .65rem 1.3rem; border-radius: 999px; font-weight: 700; }
.pg-gallery .nav-links .cta-btn:hover { background: #b80811; }

.pg-gallery .positioning-strip { background: var(--navy); color: var(--white); text-align: center; text-transform: uppercase; font-size: clamp(.82rem,1.3vw,.98rem); font-weight: 800; padding: .8rem 1rem; letter-spacing: .09em; }

.pg-gallery .page-hero { background: var(--navy-deep); position: relative; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; }
.pg-gallery .page-hero .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pg-gallery .page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,31,66,.92) 10%, rgba(7,31,66,.55) 55%, rgba(7,31,66,.25) 100%); z-index: 1; }
.pg-gallery .hero-inner { position: relative; z-index: 2; padding: 3.5rem 0 3rem; }
.pg-gallery .breadcrumbs { font-size: .82rem; color: rgba(255,255,255,.75); margin-bottom: 1rem; }
.pg-gallery .breadcrumbs a { color: rgba(255,255,255,.85); }
.pg-gallery .breadcrumbs a:hover { text-decoration: underline; }
.pg-gallery .eyebrow { color: var(--red); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .75rem; }
.pg-gallery .page-hero .eyebrow { color: #EF7B82; }
.pg-gallery .page-hero h1 { color: var(--white); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; max-width: 780px; margin-bottom: 1rem; }
.pg-gallery .page-hero .hero-sub { font-size: 1.1rem; color: rgba(255,255,255,.9); max-width: 640px; }

.pg-gallery .section { padding: 5rem 0; }
.pg-gallery .section-tight { padding: 3.5rem 0; }
.pg-gallery .white { background: var(--white); }
.pg-gallery .ice { background: var(--ice); }
.pg-gallery .navy-deep { background: var(--navy-deep); color: var(--white); }
.pg-gallery .navy-deep h2, .pg-gallery .navy-deep h3 { color: var(--white); }
.pg-gallery .section-head { max-width: 700px; margin-bottom: 2.5rem; }
.pg-gallery .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.pg-gallery .section-head h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; margin-bottom: .75rem; }
.pg-gallery .lead { color: var(--ink-soft); font-size: 1.05rem; }

.pg-gallery .btn { display: inline-block; padding: .9rem 1.9rem; border-radius: 999px; font-weight: 700; font-size: .95rem; transition: all .2s ease; cursor: pointer; border: 2px solid transparent; }
.pg-gallery .btn-primary { background: var(--red); color: var(--white); }
.pg-gallery .btn-primary:hover { background: #b80811; transform: translateY(-2px); }
.pg-gallery .btn-secondary { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.pg-gallery .btn-secondary:hover { background: rgba(255,255,255,.12); }
.pg-gallery .btn-secondary.on-light { color: var(--navy); border-color: var(--navy); }
.pg-gallery .btn-secondary.on-light:hover { background: rgba(16,53,102,.06); }
.pg-gallery .actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.pg-gallery .callout { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.pg-gallery .callout h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: .5rem; }
.pg-gallery .callout p { color: rgba(255,255,255,.85); max-width: 480px; }

.pg-gallery footer { background: var(--navy-deep); color: var(--white); padding: 3.5rem 0 1.5rem; }
.pg-gallery .footer-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.pg-gallery .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; margin-bottom: 2.5rem; }
.pg-gallery .footer-section h3 { color: var(--white); font-size: 1rem; margin-bottom: 1rem; font-family: 'DM Sans',sans-serif; }
.pg-gallery .footer-section ul { list-style: none; }
.pg-gallery .footer-section li { margin-bottom: .6rem; }
.pg-gallery .footer-section a { color: rgba(255,255,255,.75); font-size: .92rem; transition: color .2s ease; }
.pg-gallery .footer-section a:hover { color: var(--red); }
.pg-gallery .footer-contact { color: rgba(255,255,255,.85); margin-bottom: .5rem; font-size: .92rem; }
.pg-gallery .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; text-align: center; color: rgba(255,255,255,.6); font-size: .82rem; }

@keyframes pgGalleryFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
  .pg-gallery .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-gallery .section { padding: 3.5rem 0; }
}
@media (max-width: 600px) {
  .pg-gallery .footer-grid { grid-template-columns: 1fr; }
  .pg-gallery .nav-links { gap: 1rem; font-size: .85rem; }
  .pg-gallery .container { padding: 0 1.25rem; }
  .pg-gallery .callout { flex-direction: column; align-items: flex-start; }
}

/* our-work.html-only */
.pg-our-work .page-hero { min-height: 58vh; }
.pg-our-work .page-hero .hero-bg { object-position: center 42%; }
.pg-our-work .category-head { margin: 3rem 0 1.25rem; display: flex; align-items: baseline; gap: .75rem; }
.pg-our-work .category-head:first-child { margin-top: 0; }
.pg-our-work .category-head h3 { font-size: 1.3rem; }
.pg-our-work .category-head span { color: var(--ink-soft); font-size: .9rem; }
.pg-our-work .work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.pg-our-work .work-card { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 16px rgba(7,31,66,.08); background: var(--white); cursor: pointer; opacity: 0; }
.pg-our-work .work-card.vis { animation: pgGalleryFadeUp .6s ease forwards; }
.pg-our-work .work-card .thumb { aspect-ratio: 4/3; overflow: hidden; }
.pg-our-work .work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.pg-our-work .work-card:hover img { transform: scale(1.06); }
.pg-our-work .work-card .label { padding: .75rem .9rem; font-size: .86rem; font-weight: 600; color: var(--navy); }

.pg-our-work .lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(7,31,66,.92); align-items: center; justify-content: center; padding: 2rem; }
.pg-our-work .lightbox.show { display: flex; }
.pg-our-work .lightbox img { max-width: 90vw; max-height: 80vh; object-fit: contain; border-radius: 6px; }
.pg-our-work .lightbox-caption { color: var(--white); text-align: center; margin-top: 1rem; font-size: .95rem; }
.pg-our-work .lightbox-close { position: absolute; top: 1.5rem; right: 2rem; color: var(--white); font-size: 2.2rem; cursor: pointer; line-height: 1; }
.pg-our-work .lightbox-close:hover { color: var(--red); }

.pg-our-work .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pg-our-work .card { background: var(--white); border-radius: 10px; padding: 1.75rem; box-shadow: 0 4px 18px rgba(7,31,66,.06); opacity: 0; }
.pg-our-work .card.vis { animation: pgGalleryFadeUp .6s ease forwards; }
.pg-our-work .card .num { color: var(--red); font-weight: 700; font-size: .8rem; letter-spacing: .05em; margin-bottom: .6rem; }
.pg-our-work .card h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.pg-our-work .card p { color: var(--ink-soft); font-size: .94rem; }

@media (max-width: 768px) {
  .pg-our-work .work-grid { grid-template-columns: repeat(2, 1fr); }
  .pg-our-work .grid-3 { grid-template-columns: 1fr; }
  .pg-our-work .page-hero { min-height: 52vh; }
}
@media (max-width: 600px) { .pg-our-work .work-grid { grid-template-columns: 1fr; } }

/* industries.html-only */
.pg-industries .page-hero { min-height: 62vh; }
.pg-industries .page-hero .hero-bg { object-position: center 40%; }
.pg-industries .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.pg-industries .card { background: var(--white); border-radius: 10px; padding: 1.75rem; box-shadow: 0 4px 18px rgba(7,31,66,.06); opacity: 0; }
.pg-industries .card.vis { animation: pgGalleryFadeUp .6s ease forwards; }
.pg-industries .card h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.pg-industries .card p { color: var(--ink-soft); font-size: .94rem; }

.pg-industries .split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.pg-industries .split img { border-radius: 10px; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }
.pg-industries .pill-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.pg-industries .pill { background: var(--ice); color: var(--navy); font-size: .85rem; font-weight: 600; padding: .5rem 1rem; border-radius: 999px; }

@media (max-width: 768px) {
  .pg-industries .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pg-industries .split { grid-template-columns: 1fr; }
  .pg-industries .split .split-media { order: -1; }
  .pg-industries .page-hero { min-height: 56vh; }
}
@media (max-width: 600px) { .pg-industries .grid-4 { grid-template-columns: 1fr; } }

/* ---- Wave 3 promotions (from about.html scoped block) ---- */
.pg-about .team-card { transition: none; }
  @media (max-width: 900px) {
    .pg-about .team-grid { grid-template-columns: repeat(2,1fr) !important; }
  }
  @media (max-width: 560px) {
    .pg-about .team-grid { grid-template-columns: 1fr !important; }
    .pg-about .org-logos { gap: 1.25rem !important; }
  }

/* media-slot hero variant — full-bleed slot inside hero containers */
.media-slot.hero-fill{height:100%;width:100%;border-radius:0}

/* Wave 4 close-out: on phones, hero-background media-slots suppress their
   label text — the dashed grey box alone signals "placeholder", and the
   wrapped label was colliding with bottom-anchored hero headlines (QA2 #1,
   partial fix only possible in markup; ::before needs CSS). */
@media (max-width:600px){
  .hero-media .media-slot::before,
  .page-hero .media-slot::before,
  .hero .media-slot::before{content:''}
}

/* 4-person team grid: 2x2 desktop, 1-col mobile (inline grid style would defeat the mobile query) */
@media (max-width:700px){ .team-grid{grid-template-columns:1fr !important} }

/* horizontal team cards stack on small screens */
@media (max-width:640px){
  .team-card{flex-direction:column !important;align-items:center !important;text-align:center}
  .team-card img{width:200px !important}
  .team-card h3, .team-card h3 + div{text-align:center}
}

/* Meet the Team: one person per row, portrait alternating sides */
.team-rows{display:flex;flex-direction:column;gap:2.5rem;max-width:980px;margin:0 auto}
.team-row{display:flex;gap:2.5rem;align-items:center}
.team-row img{flex:0 0 auto}
@media (max-width:700px){
  .team-row{flex-direction:column !important;text-align:center}
  .team-row img{max-width:260px !important}
  .team-row h3, .team-row h3 + div{text-align:center}
}

/* Home hero carousel: 3 frames crossfading every 3s. First frame is the LCP
   (eager + fetchpriority high); others lazy. Reduced-motion users get frame 1
   static -- rotation JS checks the media query and simply never starts. */
.hero-carousel{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.hero-carousel .hc-frame{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hero-carousel .hc-frame.is-active{opacity:1}
.hero-carousel .hc-frame img{width:100%;height:100%;object-fit:cover;display:block}