@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-600.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700.woff2') format('woff2');}
/* ==========================================================================
   Environmental Management Construction Inc. (EMC)
   Global stylesheet — design system, layout, components
   Colors: charcoal, construction orange, steel gray, deep green, earth tones
   ========================================================================== */

/* ---------------------------------------------------------------- Tokens */
:root {
  /* Brand */
  --orange: #f26d21;
  --orange-600: #d9541a;
  --orange-700: #b8430f;
  --charcoal: #1a1d21;
  --charcoal-800: #23272b;
  --charcoal-700: #2d3237;
  --steel: #6b7280;
  --steel-300: #b7bdc4;
  --steel-100: #e5e7eb;
  --green: #2f5d3a;
  --sand: #cbbfa6;
  --ink: #14171a;

  /* Neutrals */
  --white: #ffffff;
  --off-white: #f6f6f4;
  --paper: #fbfbf9;
  --line: #e3e4e2;
  --text: #23272b;
  --text-muted: #565d64;
  --text-invert: #f4f5f6;

  /* Type */
  --font-head: "Barlow Condensed", "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --wrap: 1200px;
  --wrap-narrow: 880px;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(20, 23, 26, .08);
  --shadow: 0 8px 26px rgba(20, 23, 26, .12);
  --shadow-lg: 0 20px 48px rgba(20, 23, 26, .22);
  --header-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--orange-600); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.15rem; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------------------------------------------------------------- Type */
h1, h2, h3, h4, h5 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--charcoal);
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); text-transform: uppercase; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); }
h4 { font-size: 1.18rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1rem; }
strong { font-weight: 700; color: var(--charcoal); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange-600);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 3px;
  background: var(--orange);
  display: inline-block;
}
.lead { font-size: 1.2rem; color: var(--text-muted); }

/* ---------------------------------------------------------------- Layout */
.wrap { width: min(100% - 2.6rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.6rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding: clamp(3.2rem, 7vw, 6rem) 0; }
.section-sm { padding: clamp(2.2rem, 4vw, 3.4rem) 0; }
.section--alt { background: var(--off-white); }
.section--charcoal { background: var(--charcoal); color: var(--text-invert); }
.section--charcoal h1, .section--charcoal h2, .section--charcoal h3 { color: #fff; }
.section--charcoal .lead { color: #c7ccd1; }
.section-head { max-width: 760px; margin-bottom: 2.4rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Buttons */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .85rem 1.6rem;
  border: 2px solid var(--btn-bg);
  border-radius: var(--radius);
  transition: transform .18s var(--ease), background .18s, box-shadow .18s;
  text-decoration: none;
  line-height: 1.1;
}
.btn:hover { background: var(--orange-600); border-color: var(--orange-600); color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn--dark { --btn-bg: var(--charcoal); border-color: var(--charcoal); }
.btn--dark:hover { background: #000; border-color: #000; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--charcoal); border-color: var(--charcoal); }
.btn--outline:hover { background: var(--charcoal); color: #fff; }
.btn--lg { font-size: 1.15rem; padding: 1rem 2rem; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------------------------------------------------------------- Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(26, 29, 33, .98);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow .25s;
}
.site-header.is-stuck { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.topbar {
  background: var(--charcoal-800);
  color: #c7ccd1;
  font-size: .82rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .4rem 0; min-height: 34px; }
.topbar a { color: #dfe3e7; }
.topbar-areas { color: #9aa1a9; }
.topbar-cta { display: inline-flex; gap: 1.2rem; align-items: center; }
.topbar-cta .phone { color: #fff; font-weight: 700; }
@media (max-width: 780px) { .topbar-areas { display: none; } }

/* Header gets a wider container than body content so the full nav fits on laptops */
.site-header > .wrap, .topbar .wrap { width: min(100% - 2.6rem, 1440px); }
.navbar { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 1rem; }

/* Logo lockup */
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: .9;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, #33383d, #23272b);
  border: 2px solid #3a4046;
  border-left: 5px solid var(--orange);
  padding: .28rem .5rem .2rem;
  border-radius: 4px;
}
.brand-mark .m { color: var(--orange); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text .b1 { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 1.06rem; letter-spacing: .02em; text-transform: uppercase; }
.brand-text .b2 { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); font-weight: 700; margin-top: 2px; }
@media (max-width: 480px) { .brand-text .b1 { font-size: .92rem; } }

/* Primary nav */
.nav { display: flex; align-items: center; gap: .2rem; }
.nav > ul { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav a { color: #e7eaed; text-decoration: none; }
.nav > ul > li { position: relative; }
.nav > ul > li > a, .nav > ul > li > .navlink {
  display: inline-flex; align-items: center; gap: .28rem;
  font-family: var(--font-head); font-weight: 500; font-size: .97rem; letter-spacing: .02em;
  text-transform: uppercase;
  padding: .5rem .58rem; border-radius: 4px;
  color: #e7eaed; background: none; border: 0; white-space: nowrap;
}
.nav > ul > li > a:hover, .nav > ul > li.open > .navlink, .nav > ul > li > a[aria-current="page"] {
  color: #fff; background: rgba(255,255,255,.08);
}
.nav a[aria-current="page"] { color: var(--orange); }
.nav .caret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .8; }

/* Dropdown */
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 300px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: .55rem; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.nav li.has-menu:hover > .dropdown, .nav li.open > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown.wide { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; }
.dropdown.mega { min-width: 720px; display: grid; grid-template-columns: repeat(3, 1fr); gap: .1rem; }
@media (min-width: 1201px) { .dropdown.mega { left: auto; right: 0; } }
.dropdown a {
  display: block; color: var(--text); padding: .55rem .7rem; border-radius: var(--radius);
  font-size: .96rem; font-weight: 500;
}
.dropdown a small { display: block; color: var(--text-muted); font-weight: 400; font-size: .8rem; }
.dropdown a:hover { background: var(--off-white); color: var(--orange-700); text-decoration: none; }

/* Header actions */
.nav-actions { display: flex; align-items: center; gap: .6rem; }
.nav-actions .btn { padding: .58rem 1rem; font-size: .92rem; white-space: nowrap; gap: 0; }
.nav-phone { color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; letter-spacing: .03em; white-space: nowrap; display: none; }
.nav-phone:hover { color: var(--orange); text-decoration: none; }
/* The top bar carries the phone; the header keeps the Estimate button as the primary CTA. */
@media (min-width: 1560px) { .nav-phone { display: inline; } }
/* Collapse the long brand wordmark to just the EMC block on laptop widths so the nav always fits */
@media (max-width: 1399px) and (min-width: 1201px) { .brand-text { display: none; } }

/* Hamburger */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; }
.nav-toggle span { width: 26px; height: 3px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1200px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(380px, 86vw);
    background: var(--charcoal); flex-direction: column; align-items: stretch;
    padding: calc(var(--header-h) + 1rem) 1.1rem 2rem;
    transform: translateX(100%); transition: transform .3s var(--ease);
    overflow-y: auto; box-shadow: var(--shadow-lg); gap: 0;
  }
  .nav.open { transform: translateX(0); }
  .nav > ul { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav > ul > li > a, .nav > ul > li > .navlink { width: 100%; justify-content: space-between; padding: .9rem .4rem; font-size: 1.1rem; }
  .dropdown, .dropdown.wide, .dropdown.mega {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; background: rgba(255,255,255,.04); display: none;
    min-width: 0; grid-template-columns: 1fr;   /* single column on mobile — no overflow */
    padding: .2rem .2rem .5rem;
  }
  .nav li.open > .dropdown { display: block; }
  .dropdown a { color: #d7dbdf; }
  .dropdown a small { color: #9aa1a9; }
  .dropdown a:hover { background: rgba(255,255,255,.08); color: #fff; }
  .nav-actions .btn span.hide-sm { display: none; }
}
.nav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: .3s; z-index: 90; }
.nav-scrim.show { opacity: 1; visibility: visible; }

/* ---------------------------------------------------------------- Hero */
.hero {
  position: relative;
  color: #fff;
  background: linear-gradient(115deg, #16181b 0%, #202429 55%, #2a2f34 100%);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 500px at 88% -10%, rgba(242,109,33,.20), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 26px);
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 2;
  background: linear-gradient(90deg, var(--orange), var(--orange-700));
}
.hero-inner { position: relative; z-index: 1; padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3.5rem, 8vw, 6rem); max-width: 830px; }
.hero h1 { color: #fff; }
.hero h1 .accent { color: var(--orange); }
.hero .lead { color: #d3d8dd; font-size: clamp(1.1rem, 2vw, 1.35rem); max-width: 640px; }
.hero .btn-row { margin-top: 1.8rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14); }
.hero-badge { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: #cfd4d9; }
.hero-badge .ico { color: var(--orange); flex: none; }

/* Capability strip (below hero) */
.cap-strip { background: var(--orange); color: #fff; }
.cap-strip-list { list-style: none; margin: 0; padding: .55rem 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .2rem .1rem; }
.cap-strip-list li { display: flex; align-items: center; }
.cap-strip-list li::after { content: "•"; color: rgba(255,255,255,.55); margin: 0 .35rem; }
.cap-strip-list li:last-child::after { content: ""; }
.cap-strip-list a { color: #fff; font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .95rem; padding: .25rem .5rem; border-radius: 4px; }
.cap-strip-list a:hover { background: rgba(0,0,0,.16); text-decoration: none; }

/* page hero (interior) */
.page-hero {
  position: relative; color: #fff; overflow: hidden; isolation: isolate;
  background: linear-gradient(120deg, #16181b, #262b31);
  padding: clamp(2.8rem, 6vw, 4.6rem) 0 clamp(2.4rem, 5vw, 3.6rem);
}
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 380px at 92% 0%, rgba(242,109,33,.18), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 24px);
}
.page-hero h1 { color: #fff; max-width: 18ch; }
.page-hero .lead { color: #d3d8dd; max-width: 62ch; margin-top: .6rem; }
.page-hero::after { content: ""; position: absolute; left:0; right:0; bottom:0; height: 4px; background: var(--orange); }

/* Breadcrumbs */
.breadcrumbs { font-size: .84rem; color: #aab0b7; margin-bottom: 1rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; }
.breadcrumbs a { color: #cfd4d9; }
.breadcrumbs li::after { content: "/"; margin-left: .35rem; color: #6b7078; }
.breadcrumbs li:last-child::after { content: ""; }
.breadcrumbs li:last-child { color: #fff; }
.section .breadcrumbs { color: var(--text-muted); }
.section .breadcrumbs a { color: var(--orange-600); }
.section .breadcrumbs li:last-child { color: var(--text); }
.section .breadcrumbs li::after { color: var(--steel); }

/* ---------------------------------------------------------------- Cards */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s, border-color .2s;
  height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d5d7d4; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--text-muted); margin-bottom: .8rem; }
.card .card-ico {
  width: 52px; height: 52px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #2d3237, #1a1d21); color: var(--orange); margin-bottom: 1rem;
}
.card-link { font-family: var(--font-head); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; font-size: .92rem; color: var(--orange-600); display: inline-flex; gap: .35rem; align-items: center; }
.card-link:hover { gap: .6rem; text-decoration: none; }
.card--service { display: flex; flex-direction: column; }
.card--service .card-link { margin-top: auto; }

/* Service card as link */
a.card { text-decoration: none; color: inherit; }
a.card:hover { text-decoration: none; }

/* Feature list w/ checks */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.checklist li { position: relative; padding-left: 1.9rem; color: var(--text); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .35em;
  width: 18px; height: 10px; border-left: 3px solid var(--orange); border-bottom: 3px solid var(--orange);
  transform: rotate(-45deg);
}
.checklist.two { grid-template-columns: 1fr 1fr; }
.checklist.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .checklist.two, .checklist.three { grid-template-columns: 1fr; } }

/* Stat / number band */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 720px) { .stat-band { grid-template-columns: repeat(2,1fr); } }
.stat { text-align: center; padding: 1rem; }
.stat .n { font-family: var(--font-head); font-weight: 700; font-size: 2.6rem; color: var(--orange); line-height: 1; }
.stat .l { font-size: .9rem; color: var(--text-muted); margin-top: .4rem; text-transform: uppercase; letter-spacing: .06em; }
.section--charcoal .stat .l { color: #b7bdc4; }

/* Pillars / icon rows */
.pillar { display: flex; gap: 1rem; }
.pillar .card-ico { flex: none; margin-bottom: 0; }
.pillar h3 { font-size: 1.25rem; }
.pillar p { color: var(--text-muted); margin: .35rem 0 0; }
.section--charcoal .pillar p { color: #c3c9cf; }

/* Image placeholder blocks (until real photography supplied) */
.ph {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 12px, rgba(0,0,0,.02) 12px 24px),
    linear-gradient(135deg, #3a3f45, #23272b);
  color: #cfd4d9; min-height: 260px; display: grid; place-items: center; text-align: center;
  border: 1px solid rgba(0,0,0,.1);
}
.ph::after { content: ""; position: absolute; inset: 0; border: 2px dashed rgba(255,255,255,.14); border-radius: inherit; margin: 10px; }
.ph .ph-label { position: relative; z-index: 1; padding: 1rem 1.2rem; max-width: 80%; }
.ph .ph-label b { display: block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em; color: #fff; font-size: 1.05rem; }
.ph .ph-label span { font-size: .82rem; color: #aab0b7; }
.ph .ph-tag { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--orange); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .55rem; border-radius: 4px; }
.ph--tall { min-height: 360px; }
.ph--wide { min-height: 320px; }

/* Split media/content */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }
.split.reverse .split-media { order: 2; }
@media (max-width: 860px) { .split, .split.reverse { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } }

/* CTA band */
.cta-band { background: linear-gradient(115deg, var(--charcoal), var(--charcoal-700)); color: #fff; border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 3.4rem); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(242,109,33,.35), transparent 70%); }
.cta-band h2 { color: #fff; position: relative; }
.cta-band .lead { color: #c9ced3; position: relative; }
.cta-band .btn-row { position: relative; margin-top: 1.4rem; }
.cta-full { text-align: center; }
.cta-full .btn-row { justify-content: center; }

/* Notices / callouts */
.notice {
  border-left: 4px solid var(--orange); background: #fff7f1; border-radius: var(--radius);
  padding: 1rem 1.2rem; color: #6b4a33; font-size: .95rem;
}
.notice.info { border-color: var(--steel); background: #f2f4f6; color: #454b52; }
.placeholder-note {
  border: 1px dashed var(--orange-600); background: #fff7f1; border-radius: var(--radius);
  padding: .85rem 1.1rem; font-size: .9rem; color: #8a4a1f;
}
.placeholder-note b { color: var(--orange-700); }

/* Chips / tags */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--charcoal); color: #fff; padding: .3rem .7rem; border-radius: 999px; }
.chip.light { background: var(--off-white); color: var(--charcoal); border: 1px solid var(--line); }

/* ---------------------------------------------------------------- Forms */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.4rem, 3vw, 2.2rem); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.2rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-weight: 600; font-size: .92rem; color: var(--charcoal); }
.field .req { color: var(--orange-600); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .98rem; color: var(--text);
  padding: .7rem .8rem; border: 1px solid #cfd2d6; border-radius: var(--radius);
  background: #fff; width: 100%; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242,109,33,.15); }
.field textarea { min-height: 120px; resize: vertical; }
.field .hint { font-size: .8rem; color: var(--text-muted); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #c0392b; }
.field .err { color: #c0392b; font-size: .8rem; display: none; }
.field.invalid .err { display: block; }
.field-file input[type=file] { padding: .5rem; background: var(--off-white); }
.check-row { display: flex; gap: .6rem; align-items: flex-start; }
.check-row input { width: auto; margin-top: .3rem; }
.check-row label { font-weight: 400; font-size: .9rem; color: var(--text-muted); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
fieldset legend { font-weight: 700; padding: 0 .4rem; color: var(--charcoal); font-size: .95rem; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem .8rem; }
@media (max-width: 640px) { .checkbox-grid { grid-template-columns: 1fr; } }
.checkbox-grid label { display: flex; gap: .5rem; align-items: center; font-weight: 400; font-size: .92rem; }
.checkbox-grid input { width: auto; }
.form-status { margin-top: 1rem; padding: .8rem 1rem; border-radius: var(--radius); font-size: .92rem; border: 1px solid transparent; }
.form-status a { font-weight: 600; }
.form-status.pending { background: #f2f4f6; border-color: #d5dae0; color: #454b52; }
.form-status.ok { background: #eef7f0; border-color: #bfe0c8; color: #1f5130; }
.form-status.error { background: #fdeceb; border-color: #f3c2bd; color: #8a2a1f; }
.form-status.error a { color: #8a2a1f; }
.form-success { display: none; text-align: center; padding: 1.5rem; }
.form-success.show { display: block; }
.form-success .ok { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; margin: 0 auto 1rem; font-size: 2rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- Projects filter */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.filter-btn {
  font-family: var(--font-head); font-weight: 500; letter-spacing: .03em; text-transform: uppercase;
  font-size: .92rem; padding: .5rem 1rem; border: 1px solid var(--line); background: #fff; color: var(--charcoal);
  border-radius: 999px; transition: .15s;
}
.filter-btn:hover { border-color: var(--charcoal); }
.filter-btn.active { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.project-card { overflow: hidden; padding: 0; }
.project-card .ph { border-radius: 0; min-height: 210px; }
.project-card .pc-body { padding: 1.3rem 1.4rem 1.5rem; }
.project-card .pc-meta { font-size: .82rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem; }
.project-card h3 { font-size: 1.3rem; }
.is-hidden { display: none !important; }

/* ---------------------------------------------------------------- Service-area map */
.areamap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1.6rem; align-items: start; }
@media (max-width: 820px) { .areamap { grid-template-columns: 1fr; } }
.areamap-grid {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "pa pa oh wv"
    "ky ky va va"
    "nc nc sc sc"
    "ga ga al fl";
}
.areamap-state {
  border: 1px solid var(--line); background: #fff; border-radius: var(--radius); padding: .7rem .4rem;
  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--charcoal); line-height: 1;
  display: flex; flex-direction: column; align-items: center; gap: .2rem; cursor: pointer; transition: .15s;
}
.areamap-state span { font-family: var(--font-body); font-weight: 500; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.areamap-state.core { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.areamap-state.core span { color: #b7bdc4; }
.areamap-state:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.areamap-state[aria-selected="true"] { outline: 3px solid var(--orange); outline-offset: 2px; background: var(--orange); color: #fff; border-color: var(--orange); }
.areamap-state[aria-selected="true"] span { color: #ffe4d2; }
.areamap-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); min-height: 180px; }
.areamap-panel h3 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.areamap-panel .chip { font-size: .68rem; }
.areamap-legend { margin-top: 1rem; font-size: .85rem; color: var(--text-muted); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.areamap-legend .lg { width: 16px; height: 16px; border-radius: 4px; display: inline-block; vertical-align: middle; }
.areamap-legend .lg.core { background: var(--charcoal); }
.areamap-legend .lg.exp { background: #fff; border: 1px solid var(--line); }

/* ---------------------------------------------------------------- FAQ / accordion */
.accordion { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion details:last-child { border-bottom: 0; }
.accordion summary { cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 700; font-family: var(--font-head); font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--charcoal); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-size: 1.5rem; color: var(--orange); font-weight: 400; }
.accordion details[open] summary::after { content: "\2013"; }
.accordion .acc-body { padding: 0 1.3rem 1.2rem; color: var(--text-muted); }

/* ---------------------------------------------------------------- Process timeline */
.proc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: proc; }
.proc-step { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; padding: 0 0 1.6rem; position: relative; }
.proc-step:not(:last-child) > .proc-num::after { content: ""; position: absolute; left: 50%; top: 46px; bottom: -6px; width: 2px; background: var(--line); transform: translateX(-50%); }
.proc-num {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--charcoal); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; z-index: 1;
}
.proc-step:hover > .proc-num { background: var(--orange); }
.proc-step > div h3 { margin-bottom: .3rem; }
.proc-step > div p { color: var(--text-muted); margin: 0; }
.proc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2.4rem; }
@media (max-width: 760px) { .proc-grid { grid-template-columns: 1fr; } }

/* Leadership / role cards */
.role-card { text-align: left; }
.role-card .role-title { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--charcoal); font-size: 1.15rem; }
.role-card .role-name { color: var(--orange-600); font-weight: 600; font-size: .92rem; margin: .2rem 0 .5rem; }
.role-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg,#2d3237,#1a1d21); color:#fff; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; margin-bottom: .8rem; }

/* News / article cards */
.article-meta { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: .5rem; }
.article-cat { background: var(--orange); color: #fff; padding: .18rem .55rem; border-radius: 4px; font-weight: 700; font-size: .68rem; }

/* Media gallery */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .media-grid { grid-template-columns: 1fr; } }
.media-item .ph { min-height: 200px; }
.media-item.video .ph::before { content: "▶"; position: absolute; z-index: 3; font-size: 2.4rem; color: #fff; opacity: .9; }

/* Portal coming-soon */
.portal-hero { text-align: center; }
.portal-features { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; margin-top: 1.5rem; }
@media (max-width: 760px) { .portal-features { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .portal-features { grid-template-columns: 1fr; } }
.portal-feature { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; font-weight: 600; color: var(--charcoal); display: flex; align-items: center; gap: .5rem; }
.portal-feature::before { content: "✓"; color: var(--orange); font-weight: 700; }

/* ---------------------------------------------------------------- Footer */
.site-footer { background: var(--charcoal); color: #b8bec5; font-size: .95rem; }
.footer-cta { background: var(--orange); color: #fff; }
.footer-cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.8rem 0; }
.footer-cta h2 { color: #fff; font-size: 1.7rem; margin: 0; }
.footer-cta p { margin: 0; color: rgba(255,255,255,.9); }
.footer-cta .btn { background: #fff; color: var(--charcoal); border-color: #fff; }
.footer-cta .btn:hover { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.footer-main { padding: 3rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: #fff; text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-head); font-weight: 600; font-size: 1rem; margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-grid a { color: #b8bec5; }
.footer-grid a:hover { color: #fff; text-decoration: none; }
.footer-brand .brand-mark { font-size: 1.7rem; }
.footer-about { margin: 1rem 0; color: #9aa1a9; font-size: .92rem; line-height: 1.6; }
.footer-tagline { color: var(--orange); font-family: var(--font-head); font-weight: 600; font-size: 1.02rem; letter-spacing: .01em; margin: 0 0 1rem; }
.footer-links-mini { margin-top: 1rem; font-size: .85rem; color: #8b929a; }
.footer-links-mini a { color: #b8bec5; }
.footer-contact li { display: flex; gap: .55rem; align-items: flex-start; }
.footer-contact .ico { color: var(--orange); flex: none; margin-top: 3px; }
.footer-phone { font-family: var(--font-head); font-size: 1.5rem; color: #fff; font-weight: 700; }
.footer-phone:hover { color: var(--orange); text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.3rem 0; font-size: .84rem; color: #8b929a; }
.footer-bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem; }
.footer-bottom a { color: #b8bec5; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------------------------------------------------------------- Cookie notice */
.cookie {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 200; max-width: 640px; margin-inline: auto;
  background: var(--charcoal-800); color: #dfe3e7; border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.1rem 1.3rem;
  display: none; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.cookie.show { display: flex; }
.cookie p { margin: 0; font-size: .88rem; flex: 1 1 280px; }
.cookie a { color: var(--orange); }
.cookie .btn { padding: .5rem 1rem; font-size: .85rem; }

/* ---------------------------------------------------------------- Reveal animation */
/* Hidden ONLY when JS is confirmed present (html.js), so no-JS users and crawlers
   always see content. The inline head script adds the `js` class before first paint. */
.reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------------------------------------------------------------- Utilities */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.2rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.muted { color: var(--text-muted); }
.hidden { display: none; }
.orange { color: var(--orange-600); }
.divider { height: 1px; background: var(--line); border: 0; margin: 2rem 0; }
.badge-line { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; color: var(--text-muted); font-size: .9rem; }
.tri-list { columns: 2; column-gap: 2rem; }
@media (max-width: 600px) { .tri-list { columns: 1; } }
.tri-list li { break-inside: avoid; margin-bottom: .4rem; }
/* ============================================================
   ELEVATION OVERRIDES — refined construction brand system.
   Loaded last so it wins the cascade. Orange is demoted to a
   controlled accent (buttons, ticks, icons, rules, highlights);
   grounds alternate charcoal / concrete / warm-white / deep-green.
   ============================================================ */

:root{
  --paper:#f7f6f3;            /* warm white */
  --concrete:#e9e8e3;         /* concrete gray (light) */
  --concrete-2:#dedcd4;
  --steel-700:#3d454d;
  --green:#274b34;            /* deep green secondary */
  --green-700:#1d3a28;
  --green-100:#e8efe9;
  --navy:#182a3d;             /* deep navy alt secondary */
  --accent:#f26d21;
  --text:#22262b;
  --text-muted:#586069;
}

/* ---- Type: bigger, calmer display hierarchy ---- */
h1,h2,h3{letter-spacing:.006em;}
.section-head h2{font-size:clamp(2.05rem,3.9vw,3.15rem);}
.section-head .lead{margin-top:.5rem;}
.lead{font-size:1.22rem;line-height:1.6;}
.eyebrow{color:var(--steel);letter-spacing:.2em;}
.eyebrow::before{background:var(--accent);width:26px;height:3px;}
.section--charcoal .eyebrow,.imgband .eyebrow{color:#a7b4c0;}

/* ---- Grounds for alternating rhythm ---- */
.section--paper{background:var(--paper);}
.section--concrete{background:var(--concrete);}
.section--green{background:linear-gradient(160deg,var(--green),var(--green-700));color:#eaf1ec;}
.section--green h2,.section--green h3,.section--green h4{color:#fff;}
.section--green .lead{color:#cadcd0;}
.section--green .checklist li{color:#e6efe9;}
.section--green .checklist li::before{border-color:#8fd3a5;}
.section--green .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#eaf1ec;}
.section--green .card h3{color:#fff;}
.section--green .card p{color:#c7d8cd;}

/* ---- Buttons: orange primary (allowed), add steel/green/light variants ---- */
.btn--green{--btn-bg:var(--green);border-color:var(--green);--btn-fg:#fff;}
.btn--green:hover{background:var(--green-700);border-color:var(--green-700);}
.btn--light{--btn-bg:#fff;--btn-fg:var(--charcoal);border-color:#fff;}
.btn--light:hover{background:var(--charcoal);color:#fff;border-color:var(--charcoal);}

/* ---- HERO: centered horizontally + vertically, cinematic scene ---- */
.hero{min-height:clamp(580px,84vh,780px);display:grid;align-items:center;}
.hero::before{display:none!important;}          /* drop old orange radial/stripe overlay */
.hero-inner{max-width:940px;margin-inline:auto;text-align:center;padding-block:clamp(3rem,8vh,5.5rem);}
.hero .eyebrow{justify-content:center;color:#f2b590;}
.hero h1{font-size:clamp(2.7rem,6vw,4.7rem);letter-spacing:.01em;}
.hero h1 .accent{color:var(--accent);}
.hero .lead{margin-inline:auto;max-width:760px;color:#e2e7ec;font-size:clamp(1.12rem,1.9vw,1.34rem);}
.hero .btn-row{justify-content:center;margin-top:2rem;}
.hero-phone{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.4rem;font-family:var(--font-head);font-weight:700;font-size:1.5rem;letter-spacing:.03em;color:#fff;}
.hero-phone .ico{color:var(--accent);}
.hero-phone:hover{color:var(--accent);text-decoration:none;}
.hero-badges{justify-content:center;border-color:rgba(255,255,255,.18);margin-top:2.2rem;}
.page-hero::before{display:none!important;}
.page-hero .breadcrumbs{position:relative;}

/* ---- Capability strip: dark steel band (not full orange) ---- */
.cap-strip{background:linear-gradient(90deg,#1c2126,#2a323a);border-bottom:4px solid var(--accent);}
.cap-strip-list li::after{color:var(--accent);opacity:.7;}
.cap-strip-list a{color:#e7ebef;}
.cap-strip-list a:hover{background:rgba(255,255,255,.08);color:#fff;}

/* ---- Image panels: from dashed boxes → art-directed "photos" ---- */
.ph{border:0!important;min-height:300px;box-shadow:var(--shadow-sm);}
.ph::after{display:none!important;}
.ph .ph-label{position:absolute;left:0;right:0;bottom:0;top:auto;z-index:2;text-align:left;
  padding:2.2rem 1.2rem 1rem;max-width:100%;
  background:linear-gradient(0deg,rgba(11,13,15,.9),rgba(11,13,15,.35) 60%,transparent);}
.ph .ph-label b{font-size:1.02rem;letter-spacing:.03em;}
.ph .ph-label span{color:#c4ccd3;font-size:.8rem;}
.ph .ph-tag{background:rgba(13,15,17,.66);border:1px solid rgba(255,255,255,.28);color:#fff;
  backdrop-filter:blur(2px);font-size:.62rem;}
.ph--tall{min-height:400px;}
.ph--sky{--x:0;} /* reserved */

/* ---- Full-bleed image band (new composition device) ---- */
.imgband{position:relative;color:#fff;padding:clamp(3.2rem,8vw,6rem) 0;overflow:hidden;isolation:isolate;}
.imgband .wrap{position:relative;z-index:1;}
.imgband h2{color:#fff;}
.imgband .lead{color:#dfe4e9;}
.imgband--center{text-align:center;}
.imgband--center .eyebrow{justify-content:center;}
.imgband--center .btn-row{justify-content:center;}
.imgband::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent);z-index:2;}

/* ---- Stat band: refined, orange only on the numeral ---- */
.stat-band.framed{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  box-shadow:var(--shadow-sm);padding:1.4rem;}
.stat{border-right:1px solid rgba(0,0,0,.07);}
.stat:last-child{border-right:0;}
.section--charcoal .stat,.imgband .stat{border-color:rgba(255,255,255,.12);}
.stat .n{font-size:3rem;color:var(--accent);}
.imgband .stat .n{color:#fff;}
.imgband .stat .n .u{color:var(--accent);}
.stat .l{color:var(--text-muted);}
.imgband .stat .l{color:#b9c2cb;}
@media (max-width:720px){.stat{border-right:0;border-bottom:1px solid rgba(0,0,0,.07);padding-bottom:1rem;}}

/* ---- Feature-row (icon-supported, replaces some card grids) ---- */
.frow{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 2rem;}
@media (max-width:900px){.frow{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.frow{grid-template-columns:1fr;}}
.frow .fitem{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;}
.frow .fico{width:46px;height:46px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,#2d3237,#1a1d21);color:var(--accent);font-size:1.2rem;}
.frow h3{font-size:1.2rem;margin-bottom:.25rem;}
.frow p{color:var(--text-muted);margin:0;}
.section--charcoal .frow p{color:#c3c9cf;}

/* ---- Numbered lifecycle rail (distinct from cards) ---- */
.lifecycle{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;counter-reset:lc;}
@media (max-width:900px){.lifecycle{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.lifecycle{grid-template-columns:1fr;}}
.lifecycle .lc{position:relative;padding:1.3rem 1rem 1.2rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);border-top:3px solid var(--accent);}
.section--charcoal .lifecycle .lc{background:var(--charcoal-800);border-color:#33383d;border-top-color:var(--accent);}
.lifecycle .lc .step{font-family:var(--font-head);font-weight:700;color:var(--accent);font-size:.9rem;letter-spacing:.14em;}
.lifecycle .lc h3{font-size:1.12rem;margin:.3rem 0 .3rem;}
.lifecycle .lc p{color:var(--text-muted);font-size:.92rem;margin:0;}
.section--charcoal .lifecycle .lc p{color:#c3c9cf;}

/* ---- Section eyebrow tick already orange; keep card icons orange (accent) ---- */
.card .card-ico{color:var(--accent);}
.stat .n .u{color:var(--accent);font-size:.6em;vertical-align:.05em;}

/* ---- Footer CTA: charcoal w/ orange accent (was full orange) ---- */
.footer-cta{background:linear-gradient(115deg,#1c2127,#2a323a);border-top:4px solid var(--accent);}
.footer-cta h2{color:#fff;}
.footer-cta .btn{background:var(--accent);color:#fff;border-color:var(--accent);}
.footer-cta .btn:hover{background:var(--orange-600);border-color:var(--orange-600);}

/* ---- Focus ring uses accent (unchanged) but ensure visible on scenes ---- */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}
/* IMAGE MANIFEST — single source of truth for site imagery.
   Placeholders now. Real photos are ingested by the pipeline:
   licensed originals → assets/images/_intake/<slot>.<ext> → `npm run images:build`
   → responsive WebP/JPG under /assets/images/. The generated
   assets/images/_manifest.generated.css block (WebP + JPG via image-set())
   is then pasted over the :root block below.
   See docs/IMAGE-ACQUISITION-WORKSHEET.md (download brief),
   docs/IMAGE-SOURCES.md (licenses) and docs/IMAGE-MANIFEST.md (pipeline). */
:root{
  --img-hero: url("/assets/images/homepage-hero.jpg");
  --img-aerial: url("/assets/images/aerial-474.jpg");
  --img-excavation: url("/assets/images/excavation-474.jpg");
  --img-demolition: url("/assets/images/demolition-474.jpg");
  --img-grading: url("/assets/images/grading-474.jpg");
  --img-utility: url("/assets/images/utility-474.jpg");
  --img-watersewer: url("/assets/images/watersewer-474.jpg");
  --img-drainage: url("/assets/images/drainage-474.jpg");
  --img-concrete: url("/assets/images/concrete-474.jpg");
  --img-asphalt: url("/assets/images/asphalt-474.jpg");
  --img-markets: url("/assets/images/markets-474.jpg");
  --img-industrial: url("/assets/images/industrial-474.jpg");
  --img-locations: url("/assets/images/locations-474.jpg");
  --img-equipment: url("/assets/images/equipment-474.jpg");
  --img-fleet: url("/assets/images/fleet-474.jpg");
  --img-survey: url("/assets/images/survey-474.jpg");
  --img-safety: url("/assets/images/safety-474.jpg");
  --img-civil: url("/assets/images/civil-474.jpg");
  --img-finished: url("/assets/images/finished-474.jpg");
  /* Owner-supplied approved temporary review media (~474px preview res) —
     replace with full-resolution originals for launch via assets/images/_intake. */
}
/* ============================================================
   PROFESSIONAL PALETTE + REAL PHOTOGRAPHY (loaded last — wins).
   Removes orange/black as brand colors → deep navy primary,
   slate blue-gray secondary, warm white / concrete grounds,
   sage & forest restrained accents, bronze as a limited highlight.
   Photographic treatment replaces the SVG scenes: image slots now
   pull real construction photography by URL (locally bundled placeholders via a CSS image manifest; replace
   with EMC's own project photography before launch).
   ============================================================ */

:root{
  /* Brand darks → navy */
  --charcoal:#132844; --charcoal-800:#1b3454; --charcoal-700:#274063; --ink:#0e1c30;
  /* Neutrals → warm white / concrete */
  --white:#ffffff; --off-white:#efeee9; --paper:#f7f5f1; --concrete:#e8e6e0; --concrete-2:#dedcd4;
  --line:#e2e0d9; --text:#1c2a3a; --text-muted:#586a7c; --text-invert:#eef2f6;
  /* Secondary + accents */
  --steel:#6b7f96; --steel-300:#aab6c4; --steel-100:#e7eaee;
  --navy:#132844; --navy-700:#274063; --slate:#3f5772; --slate-400:#6b7f96;
  --green:#33513c; --forest:#33513c; --sage:#6f8a72; --bronze:#b0824f;
  /* Neutralize every former-orange token to the slate family (NOT a new vivid color) */
  --orange:#3f5772; --orange-600:#33495f; --orange-700:#26384a;
  /* Accent = bronze, used only in small doses */
  --accent:#b0824f;
}

/* Links: slate blue */
a{ color:#31506f; }
.section .breadcrumbs a{ color:#cfd8e2; }

/* ---- Buttons: navy primary, slate/sage secondaries, no orange, no empty-outline spam ---- */
.btn{ --btn-bg:var(--navy-700); --btn-fg:#fff; border-color:var(--navy-700); box-shadow:0 1px 2px rgba(15,28,48,.16); }
.btn:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
.btn--sage{ --btn-bg:var(--sage); border-color:var(--sage); --btn-fg:#12251a; }
.btn--sage:hover{ background:var(--forest); border-color:var(--forest); color:#fff; }
.btn--green{ --btn-bg:var(--forest); border-color:var(--forest); --btn-fg:#fff; }
.btn--light{ --btn-bg:#fff; --btn-fg:var(--navy); border-color:#fff; }
.btn--light:hover{ background:var(--concrete); color:var(--navy); border-color:var(--concrete); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:#fff; border-color:rgba(255,255,255,.7); }
.btn--ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.btn--outline{ --btn-bg:transparent; --btn-fg:var(--navy); border-color:var(--slate); }
.btn--outline:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* ---- Accents: retire orange, dial in bronze/slate/sage sparingly ---- */
.eyebrow{ color:var(--slate); }
.eyebrow::before{ background:var(--bronze); }               /* tiny bronze tick */
.section--charcoal .eyebrow, .imgband .eyebrow{ color:#9fb2c6; }
.hero .eyebrow{ color:#cdb79a; }
.checklist li::before{ border-color:var(--sage); }          /* sage ticks */
.card .card-ico{ background:linear-gradient(135deg,#274063,#132844); color:#cdd8e4; }
.frow .fico{ background:linear-gradient(135deg,#274063,#132844); color:#cdd8e4; }
.stat .n{ color:var(--navy); }
.section--charcoal .stat .n, .imgband .stat .n{ color:#fff; }
.stat .n .u{ color:var(--bronze); }
.card-link{ color:#31506f; }
.filter-btn.active{ background:var(--navy); border-color:var(--navy); }
.areamap-state[aria-selected="true"]{ outline-color:var(--bronze); background:var(--navy); border-color:var(--navy); }
.areamap-state.core{ background:var(--navy); border-color:var(--navy); }
.proc-step:hover > .proc-num{ background:var(--bronze); }
.proc-num{ background:var(--navy); }
.accordion summary::after{ color:var(--bronze); }
.article-cat{ background:var(--slate); }
.chip{ background:var(--navy); }
:focus-visible{ outline:3px solid var(--bronze); }
.notice{ border-left-color:var(--bronze); background:#f6f1ea; color:#5a4a34; }
.lifecycle .lc{ border-top-color:var(--bronze); }
.lifecycle .lc .step{ color:var(--bronze); }
.orange{ color:#31506f; }

/* ---- Header / nav / cap-strip: navy, slate separators ---- */
.site-header{ background:rgba(15,28,48,.98); }
.topbar{ background:#0e1c30; }
.brand-mark{ background:linear-gradient(135deg,#274063,#1b3454); border-color:#31506f; border-left:5px solid var(--bronze); }
.brand-mark .m{ color:var(--bronze); }
.brand-text .b2{ color:var(--steel-300); }
.nav a[aria-current="page"]{ color:var(--bronze); }
.cap-strip{ background:linear-gradient(90deg,#132844,#1b3454); border-bottom:3px solid var(--slate); }
.cap-strip-list li::after{ color:var(--slate-400); }

/* ---- Footer: navy w/ bronze hairline ---- */
.footer-cta{ background:linear-gradient(115deg,#132844,#274063); border-top:3px solid var(--bronze); }
.footer-cta .btn{ background:#fff; color:var(--navy); border-color:#fff; }
.footer-cta .btn:hover{ background:var(--concrete); color:var(--navy); border-color:var(--concrete); }
.footer-contact .ico, .footer-tagline{ color:var(--bronze); }
.footer-phone:hover, .cookie a{ color:var(--bronze); }

/* ---- Green section stays as forest, sage ticks ---- */
.section--green{ background:linear-gradient(160deg,#33513c,#25412e); }
.section--green .checklist li::before{ border-color:#9ec6a8; }

/* ============================================================
   REAL PHOTOGRAPHY — replaces SVG scenes.
   Overlay is deep navy (not black) for readable text.
   Fallback color #132844 shows if an image is slow/unavailable.
   ============================================================ */
.hero{
  min-height:clamp(600px,88vh,820px);
  background:
    linear-gradient(180deg, rgba(19,40,68,.55) 0%, rgba(14,28,48,.72) 60%, rgba(14,28,48,.86) 100%),
    var(--img-hero) center 40%/cover no-repeat,
    #132844 !important;
}
.hero::after{ background:var(--bronze) !important; }
.hero h1 .accent{ color:#fff; }                              /* no accent color in headline */

.page-hero{
  background:
    linear-gradient(180deg, rgba(19,40,68,.62), rgba(14,28,48,.85)),
    var(--page-photo, var(--img-civil)) center 42%/cover no-repeat,
    #132844 !important;
  padding-block:clamp(3.4rem,7vw,5.4rem) clamp(2.6rem,5vw,3.6rem);
}
.page-hero::after{ background:var(--bronze); }

/* Photographic panels: real photo + bottom navy gradient for the caption */
.ph{ border:0 !important; }
.ph, [class*="ph--"]{
  background:
    linear-gradient(0deg, rgba(12,24,42,.88) 0%, rgba(12,24,42,.12) 55%, rgba(12,24,42,.05) 100%),
    var(--photo, var(--img-civil)) center/cover no-repeat,
    #132844 !important;
}
.ph--excavation{ --photo:var(--img-excavation); }
.ph--utility{ --photo:var(--img-utility); }
.ph--paving{ --photo:var(--img-asphalt); }
.ph--grading{ --photo:var(--img-grading); }
.ph--concrete{ --photo:var(--img-concrete); }
.ph--aerial{ --photo:var(--img-aerial); }
.ph--fleet{ --photo:var(--img-fleet); }
.ph--civil{ --photo:var(--img-civil); }
.ph--drainage{ --photo:var(--img-drainage); }
.ph--equipment{ --photo:var(--img-equipment); }
.ph--safety{ --photo:var(--img-safety); }
.ph--markets{ --photo:var(--img-markets); }
.ph--locations{ --photo:var(--img-locations); }
.ph--concrete2{ --photo:var(--img-concrete); }
.ph--watersewer{ --photo:var(--img-watersewer); }
.ph--demolition{ --photo:var(--img-demolition); }
.ph--industrial{ --photo:var(--img-industrial); }
.ph--survey{ --photo:var(--img-survey); }
.ph--finished{ --photo:var(--img-finished); }

/* Full-bleed bands: real photo + even navy overlay */
.imgband.scene-aerial, .scene-aerial{
  background:
    linear-gradient(180deg, rgba(19,40,68,.72), rgba(14,28,48,.82)),
    var(--img-aerial) center/cover no-repeat,
    #132844 !important;
}

/* Hero secondary row: invite text-link + phone */
.hero-sub{ display:flex; gap:1.2rem 2rem; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:1.4rem; }
.hero-textlink{ color:#dfe6ee; font-family:var(--font-head); font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:1rem; }
.hero-textlink:hover{ color:#fff; text-decoration:none; }
.hero-phone{ margin-top:0; }
/* ============================================================
   REPRESENTATIVE-PAGE LAYOUT LIBRARY
   Distinct section patterns so category pages compose differently
   (not the same card grid everywhere). Navy/slate/warm-white system.
   ============================================================ */

/* ---- Mobile header: logo (left) · Estimate (TRUE-centered in full header) · hamburger (far right) ----
   3-column grid with equal side columns (1fr auto 1fr) centers the Estimate
   button in the whole header width, not just the leftover space. The off-canvas
   .nav is position:fixed (out of flow) so it does not take a grid cell. */
@media (max-width: 1200px){
  .navbar{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem; }
  /* min-width:0 lets the two side columns stay EQUAL (1fr) even when the brand
     text is long, so the centered Estimate button is centered in the full header */
  .navbar > *{ min-width:0; }
  .brand{ order:1; justify-self:start; margin:0; min-width:0; }
  .nav-actions{ order:2; justify-self:center; margin:0; }
  .nav-toggle{ order:3; justify-self:end; margin:0; }
  .nav-actions .nav-phone{ display:none; }
  .nav-actions .btn{ padding:.5rem .95rem; font-size:.9rem; }
  /* Mobile nav panel: above the scrim (z-index 90) and FULL height. The grid's
     align-items:center would otherwise shrink the fixed panel to its content
     height and hide the links below the fold — force full height + stretch. */
  .nav{ z-index:200; align-self:stretch; height:100vh; height:100dvh; }
  /* Hide the cookie notice while the menu is open so bottom links stay tappable */
  body.nav-open .cookie{ display:none; }
}
/* Hide the long wordmark on phones so the EMC mark stays left and the Estimate
   button is perfectly centered at 320–480px (logo · Estimate · hamburger) */
@media (max-width: 480px){ .brand-text{ display:none; } }
@media (max-width: 380px){
  .nav-actions .btn{ padding:.46rem .72rem; font-size:.84rem; }
}

/* ---- Large lead-in paragraph ---- */
.leadin{ font-size:clamp(1.2rem,2.3vw,1.5rem); line-height:1.5; color:var(--text); max-width:60ch; }
.section--charcoal .leadin{ color:#dbe3ec; }

/* ---- Horizontal numbered process (distinct from vertical timeline) ---- */
.hsteps{ display:grid; grid-template-columns:repeat(var(--n,4),1fr); gap:0; counter-reset:hs; }
.hsteps .hstep{ position:relative; padding:1.5rem 1.3rem 1.4rem; border-top:3px solid var(--slate-400); }
.hsteps .hstep::before{ counter-increment:hs; content:counter(hs,decimal-leading-zero); display:block;
  font-family:var(--font-head); font-weight:700; font-size:1.5rem; color:var(--bronze); line-height:1; margin-bottom:.5rem; letter-spacing:.06em; }
.hsteps .hstep h3{ font-size:1.12rem; margin-bottom:.3rem; }
.hsteps .hstep p{ color:var(--text-muted); font-size:.94rem; margin:0; }
.section--charcoal .hsteps .hstep{ border-top-color:var(--bronze); }
.section--charcoal .hsteps .hstep p{ color:#c3ccd6; }
@media (max-width:820px){ .hsteps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .hsteps{ grid-template-columns:1fr; } }

/* ---- Grouped applications (columns w/ category headers) ---- */
.grouped{ display:grid; grid-template-columns:repeat(var(--n,3),1fr); gap:1.4rem; }
.grouped .grp{ background:#fff; border:1px solid var(--line); border-top:3px solid var(--bronze); border-radius:var(--radius-lg); padding:1.4rem 1.4rem 1.5rem; box-shadow:var(--shadow-sm); }
.grouped .grp h3{ font-size:1.2rem; margin-bottom:.7rem; }
.grouped .grp .tag{ font-family:var(--font-body); font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); display:block; margin-bottom:.5rem; }
@media (max-width:860px){ .grouped{ grid-template-columns:1fr; } }

/* ---- Two-panel comparison ---- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.compare .col{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.5rem; box-shadow:var(--shadow-sm); }
.compare .col.alt{ background:var(--navy); color:#eef2f6; border-color:var(--navy); }
.compare .col.alt h3{ color:#fff; } .compare .col.alt p{ color:#c3ccd6; }
.compare .col.alt .checklist li{ color:#e6ecf2; } .compare .col.alt .checklist li::before{ border-color:#9ec6a8; }
.compare .col h3{ display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; }
@media (max-width:760px){ .compare{ grid-template-columns:1fr; } }

/* ---- Alternating market rows ---- */
.mrows{ display:grid; gap:0; }
.mrow{ display:grid; grid-template-columns:14rem 1fr 1fr; gap:1.6rem; padding:1.6rem 0; border-bottom:1px solid var(--line); align-items:start; }
.mrow:last-child{ border-bottom:0; }
.mrow .mhead h3{ font-size:1.3rem; }
.mrow .mhead .mkr{ font-family:var(--font-head); font-weight:700; color:var(--bronze); font-size:.85rem; letter-spacing:.14em; }
.mrow .mcol h4{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-bottom:.5rem; font-family:var(--font-body); }
@media (max-width:820px){ .mrow{ grid-template-columns:1fr; gap:.8rem; } }

/* ---- Case-study facts panel ---- */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--navy); border-radius:var(--radius-lg); overflow:hidden; }
.facts .fact{ padding:1.3rem 1.4rem; border-right:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
.facts .fact .k{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#9fb2c6; margin-bottom:.35rem; }
.facts .fact .v{ font-family:var(--font-head); font-weight:700; font-size:1.35rem; color:#fff; line-height:1.1; }
.facts .fact .v em{ font-style:normal; color:var(--bronze); font-size:.72rem; display:block; letter-spacing:.08em; text-transform:uppercase; margin-top:.3rem; }
@media (max-width:820px){ .facts{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .facts{ grid-template-columns:1fr; } }

/* ---- Three-stage gallery (before / progress / completion) ---- */
.gallery3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery3 figure{ margin:0; }
.gallery3 .ph{ min-height:230px; border-radius:var(--radius-lg); }
.gallery3 figcaption{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); margin-top:.5rem; font-weight:700; }
@media (max-width:760px){ .gallery3{ grid-template-columns:1fr; } }

/* ---- Equipment category grid (image-led) ---- */
.eqcats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.eqcats .eqcat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.eqcats .eqcat .ph{ min-height:180px; border-radius:0; }
.eqcats .eqcat .body{ padding:1.2rem 1.3rem 1.4rem; }
.eqcats .eqcat h3{ font-size:1.15rem; margin-bottom:.5rem; }
.eqcats .eqcat p{ color:var(--text-muted); font-size:.92rem; }
@media (max-width:860px){ .eqcats{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .eqcats{ grid-template-columns:1fr; } }

/* ---- Technical diagram figure ---- */
.diagram{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.2rem; box-shadow:var(--shadow-sm); }
.diagram img{ width:100%; height:auto; }
.diagram figcaption{ font-size:.85rem; color:var(--text-muted); margin-top:.6rem; text-align:center; }

/* ---- Compact CTA plate ---- */
.cta-plate{ background:linear-gradient(115deg,var(--navy),var(--navy-700)); color:#fff; border-radius:var(--radius-lg); border-left:5px solid var(--bronze); padding:1.6rem 1.8rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem; }
.cta-plate h3{ color:#fff; margin:0; font-size:1.4rem; }
.cta-plate p{ color:#c3ccd6; margin:.3rem 0 0; }

/* ---- Multi-column checklist ---- */
.cols-3{ columns:3; column-gap:2.2rem; }
.cols-2{ columns:2; column-gap:2.2rem; }
@media (max-width:760px){ .cols-3{ columns:2; } }
@media (max-width:500px){ .cols-3,.cols-2{ columns:1; } }
.cols-3 li,.cols-2 li{ break-inside:avoid; }

/* ---- Owner-supplied placeholder chip (honest labelling) ---- */
.owner-tag{ display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8a6a3a; background:#f6f1ea; border:1px dashed var(--bronze); border-radius:4px; padding:.2rem .5rem; }

/* ---- Scope index (big-number list, distinct from cards) ---- */
.scope-list{ display:grid; gap:0; counter-reset:sc; }
.scope-list .si{ display:grid; grid-template-columns:auto 1fr; gap:1.2rem; padding:1.1rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.scope-list .si::before{ counter-increment:sc; content:counter(sc,decimal-leading-zero); font-family:var(--font-head); font-weight:700; color:var(--slate-400); font-size:1.2rem; }
.scope-list .si h3{ font-size:1.15rem; margin-bottom:.2rem; }
.scope-list .si p{ margin:0; color:var(--text-muted); }

/* ============================================================
   HOMEPAGE HERO BACKGROUND VIDEO (progressive enhancement).
   The still image (CSS --img-hero on .hero) is the DEFAULT and the
   fallback for mobile, slow/data-saver connections, blocked autoplay,
   reduced-motion, and no-JS. The video only fades in on capable desktops
   once js/main.js promotes it (data-hero-video="ready").
   ============================================================ */
.hero{ position:relative; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s ease; will-change:opacity; }
.hero.hero--video-on .hero-video{ opacity:1; }
/* Readability overlay above the video (matches the still's overlay) */
.hero.hero--video-on .hero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(19,40,68,.55) 0%, rgba(14,28,48,.72) 60%, rgba(14,28,48,.86) 100%); }
.hero .hero-inner{ position:relative; z-index:2; }
.hero::after{ z-index:2; }
/* Never load or show the video on tablet/mobile — still image only */
@media (max-width:1023px){ .hero-media{ display:none; } }
/* Respect reduced-motion — still image only */
@media (prefers-reduced-motion: reduce){ .hero-video{ display:none !important; } }

/* ============================================================
   PREMIUM HOME / REPRESENTATIVE-PAGE VISUALS
   Full-bleed image statement + CTA bands, real-facts stat strip,
   and alternating edge-to-edge image/text feature rows.
   Image areas use the --img-* slots (real photos on ingest).
   ============================================================ */
/* Full-bleed scene backgrounds (navy overlay + slot photo) */
.scene-civil{ background:linear-gradient(180deg,rgba(19,40,68,.70),rgba(14,28,48,.88)),var(--img-civil) center/cover no-repeat,#132844 !important; }
.scene-fleet{ background:linear-gradient(180deg,rgba(19,40,68,.72),rgba(14,28,48,.90)),var(--img-fleet) center/cover no-repeat,#132844 !important; }
.scene-markets{ background:linear-gradient(180deg,rgba(19,40,68,.72),rgba(14,28,48,.90)),var(--img-markets) center/cover no-repeat,#132844 !important; }

.bleed{ position:relative; color:#fff; padding:clamp(4rem,10vw,7.5rem) 0; }
.bleed .wrap{ position:relative; z-index:2; text-align:center; }
.bleed .eyebrow{ justify-content:center; color:#cdb79a; }
.bleed h2{ color:#fff; font-size:clamp(2rem,4.2vw,3.2rem); }
.bleed p{ color:#dce3ea; }
.bleed .lead{ margin-inline:auto; max-width:66ch; }

/* Impact strip — countable, factual (no fabricated performance numbers) */
.statstrip{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(2rem,4vw,3rem);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-lg); overflow:hidden; }
.statstrip .s{ padding:1.5rem 1.2rem; border-right:1px solid rgba(255,255,255,.14); }
.statstrip .s:last-child{ border-right:0; }
.statstrip .s .n{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.9rem,3.4vw,2.8rem); color:#fff; line-height:1; }
.statstrip .s .n .u{ color:var(--bronze); }
.statstrip .s .k{ color:#a7b7c8; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; margin-top:.55rem; }
@media(max-width:720px){ .statstrip{ grid-template-columns:1fr 1fr; } .statstrip .s:nth-child(2){ border-right:0; } .statstrip .s:nth-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.14); } }

/* Alternating edge-to-edge image/text feature rows */
.feature{ display:grid; grid-template-columns:1.05fr .95fr; align-items:stretch;
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); background:#fff; }
.feature + .feature{ margin-top:1.6rem; }
.feature .f-media{ position:relative; min-height:clamp(320px,36vw,440px); border:0 !important; border-radius:0; }
.feature .f-body{ padding:clamp(1.8rem,3.4vw,3rem); display:flex; flex-direction:column; justify-content:center; }
.feature .f-body h3{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:.5rem; }
.feature.rev .f-media{ order:2; }
@media(max-width:820px){ .feature{ grid-template-columns:1fr; } .feature.rev .f-media{ order:0; } .feature .f-media{ min-height:250px; } }

/* Capability grid — photo + heading + copy + Learn More, equal-height cards */
.capgrid{ margin-top:clamp(1.6rem,3vw,2.4rem); }
a.capcard{ text-decoration:none; color:inherit; }
a.capcard:hover{ text-decoration:none; }
.capcard{ display:flex; flex-direction:column; height:100%; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; }
.capcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#d5d7d4; }
.capcard .capcard-media{ width:100%; aspect-ratio:16/10; min-height:0 !important; border-radius:0; }
.capcard .capcard-body{ display:flex; flex-direction:column; flex:1 1 auto; padding:1.35rem 1.4rem 1.45rem; }
.capcard .capcard-body h3{ font-size:1.2rem; line-height:1.25; margin-bottom:.5rem; }
.capcard .capcard-body p{ color:var(--text-muted); margin:0 0 1.1rem; max-width:42ch; }
.capcard .card-link{ margin-top:auto; }
@media(max-width:620px){ .capgrid{ gap:1.1rem; } .capcard .capcard-media{ aspect-ratio:16/9; } }

/* Active nav parent (top-level dropdown toggle) when a child page is current */
.nav > ul > li.has-menu > .navlink.is-active{ color:var(--bronze); }