:root {
  --navy-950: #041425;
  --navy-900: #071c31;
  --navy-850: #0a2743;
  --navy-800: #0d3154;
  --blue-650: #056dbf;
  --blue-600: #087dd8;
  --blue-500: #1199f2;
  --blue-100: #eaf6ff;
  --steel-800: #283d51;
  --steel-700: #40566c;
  --steel-500: #71869a;
  --steel-300: #bcc8d3;
  --steel-150: #dee6ed;
  --steel-100: #edf2f6;
  --white: #ffffff;
  --ink: #0a1b2d;
  --warning: #f4b740;
  --success: #53b847;
  --danger: #d94343;
  --border: rgba(10, 27, 45, 0.14);
  --border-dark: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 4px 18px rgba(5, 24, 42, 0.08);
  --shadow-md: 0 18px 50px rgba(5, 24, 42, 0.14);
  --radius: 8px;
  --radius-lg: 12px;
  --container-max: 1240px;
  --container-px: clamp(1rem, 4vw, 2rem);
  --section-py: clamp(2.5rem, 5vw, 4.75rem);
  --header-height: 70px;
  --font-heading: "Montserrat", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --transition: 180ms ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

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

.container {
  width: min(100%, var(--container-max));
  margin: 0 auto;
  padding: 0 var(--container-px);
}

.section { padding: var(--section-py) 0; }
.section--compact { padding: clamp(1.4rem, 3vw, 2.6rem) 0; }
.section--alt { background: var(--steel-100); }
.section--dark {
  background: linear-gradient(135deg, var(--navy-950), var(--navy-850));
  color: rgba(255, 255, 255, 0.82);
}
.section--dark h2,
.section--dark h3,
.section--dark p,
.section--dark a { color: var(--white); }

.eyebrow {
  margin: 0 0 0.8rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-600);
}

h1, h2, h3 {
  margin: 0 0 0.9rem;
  font-family: var(--font-heading);
  line-height: 1.08;
  color: var(--navy-950);
}

h1 { font-size: clamp(2.45rem, 6vw, 5rem); max-width: 12ch; }
/* h2 was clamp(1.9rem, 3.6vw, 3.4rem) = 51.8px at 1440 — a section heading
   almost as large as the 63px h1, and 30px above the h3 below it. The
   overflowing "recommendations" heading was a symptom of the same thing. */
h2 { font-size: clamp(1.6rem, 2.5vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.35vw, 1.5rem); }
p { margin: 0 0 1rem; color: var(--steel-700); }
ul { margin: 0; padding-left: 1.15rem; color: var(--steel-700); }
li + li { margin-top: 0.35rem; }
/* ⚠️ That base rule is for PROSE lists and leaks into any horizontal <ul>
   of <li>. In the nav it gave every item after the first a 5.6px
   margin-top; align-items:center centres the MARGIN box, so their border
   boxes sat 2.8px below the first — and it padded the <ul> to 49.6px.
   Any future flex/grid list of <li> needs the same reset. */
.nav-list li + li { margin-top: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.78rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 800;
  line-height: 1.1;
  transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}
.btn:focus-visible,
.nav-link:focus-visible,
.nav-trigger:focus-visible,
.nav-toggle:focus-visible,
.mobile-links a:focus-visible,
.mobile-group summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(17, 153, 242, 0.45);
  outline-offset: 3px;
}
.btn-sm { min-height: 40px; padding: 0.62rem 0.85rem; font-size: 0.88rem; }
.btn-full { width: 100%; }
.btn-primary { background: var(--blue-600); color: var(--white); }
.btn-primary:hover { background: var(--blue-650); }
.btn-secondary { background: var(--navy-900); color: var(--white); }
.btn-secondary:hover { background: var(--navy-800); }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.45); }
.btn-outline-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.1); }
.btn-emergency { background: var(--danger); color: var(--white); }
.btn-emergency:hover { background: #be3131; }

.emergency-bar {
  background: var(--navy-950);
  color: var(--white);
  border-bottom: 1px solid var(--border-dark);
  font-weight: 750;
}
.emergency-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
  font-size: 0.9rem;
}
.emergency-bar a { color: var(--white); }
.emergency-bar span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 5px rgba(83, 184, 71, 0.16);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7, 28, 49, 0.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-dark);
  transition: box-shadow var(--transition), background var(--transition);
}
.site-header.is-scrolled { box-shadow: 0 14px 40px rgba(5, 20, 37, 0.22); }
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-height);
}
.brand img { width: clamp(220px, 16vw, 250px); height: auto; }
.site-nav { justify-self: center; }
.nav-list,
.footer-links,
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
.nav-item { position: relative; }
.nav-link,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.62rem 0.7rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 700;
  font-size: 0.94rem;
}
.nav-link:hover,
.nav-trigger:hover,
.nav-link.is-active,
.has-dropdown.is-open > .nav-trigger { color: var(--white); background: rgba(255, 255, 255, 0.08); }
.nav-trigger svg,
.text-link svg,
.footer-contact svg,
.contact-list svg,
.social-links svg { width: 1rem; height: 1rem; flex: none; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) minmax(260px, 1.15fr);
  gap: 0.65rem;
  width: min(650px, calc(100vw - 2rem));
  padding: 0.75rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.nav-item:nth-last-child(-n+2) .dropdown-menu { right: 0; left: auto; }
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.dropdown-menu a {
  display: block;
  min-height: 44px;
  padding: 0.7rem 0.8rem;
  color: var(--navy-950);
  border-radius: var(--radius);
  font-weight: 750;
}
.dropdown-menu a:not(.dropdown-feature):hover,
.dropdown-menu a:not(.dropdown-feature):focus-visible { background: var(--steel-100); color: var(--blue-650); }
/* The feature card is dark; it must DARKEN on hover, never take the light
   list-item background, or its locked-white text is invisible. */
.dropdown-feature:hover,
.dropdown-feature:focus-visible { background: var(--navy-950); border-color: rgba(255, 255, 255, 0.34); }
.dropdown-feature {
  min-height: 100%;
  background: var(--navy-900);
  color: var(--white) !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.dropdown-feature span,
.dropdown-feature em {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  font-style: normal;
}
.dropdown-feature strong {
  display: block;
  margin: 0.35rem 0;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 1.05rem;
}
.site-actions { display: flex; align-items: center; justify-content: flex-end; }
.utility-links { display: flex; align-items: center; gap: 0.85rem; white-space: nowrap; font-size: 0.85rem; color: rgba(255, 255, 255, 0.72); }
.emergency-bar__aside { display: flex; align-items: center; gap: 1.25rem; }
.emergency-bar__aside .utility-link { font-weight: 600; }
.emergency-bar__phone { font-weight: 750; }
.utility-link:hover { color: var(--white); }
/* flex: none + nowrap — putting .site-actions on one row made the buttons
   compete with the utility links for width and flex-shrink wrapped their
   labels to two lines (measured 165x40 -> 137x53). The buttons keep their
   intrinsic width; the utility links yield first if space is ever tight. */
.header-ctas { display: flex; align-items: center; gap: 0.55rem; flex: none; }
.header-ctas .btn { white-space: nowrap; }
.nav-toggle,
.mobile-nav { display: none; }

.hero {
  position: relative;
  color: var(--white);
  background: var(--navy-950);
  overflow: hidden;
}
.hero--video,
.hero--home { min-height: clamp(520px, 56vh, 650px); }
.hero--interior { min-height: clamp(360px, 38vh, 470px); }
.hero--compact { min-height: 300px; }
.hero-media,
.hero-image,
.hero-video,
.hero-overlay,
.hero-blueprint {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-image,
.hero-video { object-fit: cover; }
.hero-image[src*="hero-field-leader-chicago"] { object-position: 62% 42%; }
.hero-image[src*="hero-mechanical-room-team-v2"] { object-position: 58% 50%; }
.hero-image[src*="people-field-team"] { object-position: 50% 42%; }
.hero-image[src*="construction-field-installation"] { object-position: 50% 45%; }
.hero-image[src*="bim-coordination-model"] { object-position: 50% 48%; }
.hero-image[src*="fabrication-shop"] { object-position: 50% 46%; }
.hero-image[src*="flue-vent-stack-system"] { object-position: 56% 48%; }
.hero-image[src*="hvac-rooftop-crane-lift"] { object-position: 55% 45%; }
.hero-image[src*="piping-systems"],
.hero-image[src*="featured-mechanical-piping"] { object-position: 56% 50%; }
.hero-image[src*="fire-smoke-damper-inspection"] { object-position: 62% 50%; }
.hero-image[src*="steam-trap-survey"] { object-position: 45% 50%; }
.hero-image[src*="test-and-balance-flowhood"] { object-position: 50% 48%; }
.hero-image[src*="burner-retrofit-service"] { object-position: 54% 50%; }
.hero-image[src*="IMG_3990"] { object-position: 52% 38%; }
.hero-image[src*="20210831_102014"],
.hero-image[src*="20210831_095809"],
.hero-image[src*="20220907_095904"] { object-position: 50% 42%; }
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(4, 20, 37, 0.94) 0%, rgba(7, 28, 49, 0.74) 48%, rgba(7, 28, 49, 0.38) 100%),
    linear-gradient(0deg, rgba(4, 20, 37, 0.58), transparent 42%);
}
.hero-blueprint {
  background-image: url("/brand/roberts/hero/roberts-mechanical-blueprint-overlay.svg");
  background-size: min(900px, 80vw) auto;
  background-repeat: no-repeat;
  background-position: left -130px bottom -110px;
  opacity: 0.09;
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(520px, 56vh, 650px);
  max-width: 820px;
  padding-top: clamp(2.3rem, 5vw, 4.2rem);
  padding-bottom: clamp(2.3rem, 5vw, 4.2rem);
}
.hero--home h1 {
  max-width: 13.5ch;
  font-size: clamp(2.45rem, 5.1vw, 4.55rem);
}
.hero--home .hero-copy {
  max-width: 56ch;
}
.hero--interior .hero-content {
  min-height: clamp(360px, 38vh, 470px);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero--compact .hero-content {
  min-height: 300px;
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.hero--compact h1 {
  max-width: 22ch;
  font-size: clamp(2rem, 3.3vw, 3.15rem);
}
.hero--compact + .section {
  padding-top: clamp(2rem, 4vw, 3.5rem);
}
.hero h1,
.hero .hero-copy,
.hero .eyebrow { color: var(--white); }
.hero--interior h1 {
  max-width: 18ch;
  font-size: clamp(2.15rem, 4.4vw, 4rem);
}
.hero .eyebrow { color: var(--blue-100); }
.hero-copy { font-size: clamp(1.04rem, 1.7vw, 1.25rem); max-width: 66ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.25rem; }
.section-header {
  max-width: 820px;
  margin: 0 0 1.6rem;
}
.section-header--center { margin-inline: auto; text-align: center; }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
}
.split--wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.stack,
.button-stack { display: grid; gap: 1rem; }
.button-stack--center { justify-content: center; }

.proof-band {
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.proof-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: transparent;
}
.proof-tile {
  min-height: 104px;
  padding: 1rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-right: 0;
}
.proof-tile:last-child { border-right: 1px solid var(--border); }
.proof-tile strong {
  display: block;
  color: var(--navy-950);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1;
}
/* ⚠️ `>` is load-bearing. This styles the LABEL, but the tile also contains
   `<strong><span class="stat-number">50</span>+</strong>`, and the descendant
   selector `.proof-tile span` (0,1,1) beat `.stat-number` (0,1,0) on every
   shared property — so the counting number rendered as a BLOCK, which pushed
   the "+" and the " SF" onto their own line, in the label's grey at the
   label's weight with the label's top margin. The two animated tiles stood
   56px tall against 24px for "24/7" and "Union". */
.proof-tile > span {
  display: block;
  margin-top: 0.5rem;
  color: var(--steel-700);
  font-weight: 700;
}
/* Inside a tile the number is just text within the <strong>, which already
   owns the family, size, colour and line-height — without this "50" renders at
   32px beside a 24px "+", and the two counting tiles are taller than "24/7"
   and "Union". The class only marks the node main.js animates; on the `.stat`
   blocks elsewhere .stat-number keeps its own larger sizing. */
.proof-tile .stat-number {
  font: inherit;
  color: inherit;
}

.pathway-grid,
.card-grid,
.feature-grid,
.project-grid,
.team-grid,
.blog-grid,
.logo-grid,
.market-grid,
.capability-grid,
.detail-grid,
.cta-grid {
  display: grid;
  gap: 1.2rem;
}
.pathway-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.logo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.market-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.capability-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ⚠️ Was repeat(2, 1fr) while EVERY usage on the site has exactly THREE
   cards — so the third always orphaned onto its own row with a hole beside
   it, and the 2-up row stretched both cards to the taller one's height,
   leaving a large void in whichever had less content.
   Three across does not fit either: these grids live inside reading columns
   490-620px wide (a .split next to the sidebar CTA), which would give ~200px
   per card. One column is the honest answer at this width — no orphan, no
   forced equal height, and each card sizes to its own content. */
.detail-grid { grid-template-columns: 1fr; }
.cta-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.callout,
.sidebar-card,
.form-card,
.info-card,
.project-card,
.team-card,
.logo-card,
.blog-card,
.stat,
.pathway-card,
.feature-card,
.detail-card,
.market-card,
.cta-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.callout,
.sidebar-card,
.form-card,
.stat,
.detail-card,
.feature-card,
.cta-card { padding: clamp(1.1rem, 2vw, 1.45rem); }
.form-card--large { padding: clamp(1.25rem, 3vw, 2rem); }
.form-card__head {
  max-width: 760px;
  margin-bottom: 1.2rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(17, 153, 242, 0.16);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(5, 27, 53, 0.96), rgba(12, 63, 115, 0.92));
  color: var(--white);
}
.form-card__head h3 { margin-bottom: 0.45rem; color: var(--white); }
.form-card__head p { margin-bottom: 0; color: rgba(255, 255, 255, 0.78); }
.form-card__head .eyebrow { color: var(--blue-100); }
.form-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
}
.form-layout--request {
  grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.45fr);
}
.form-intro {
  position: sticky;
  top: calc(var(--header-height) + 58px);
  display: grid;
  gap: 0.9rem;
}
.form-intro h2 {
  font-size: clamp(1.9rem, 3vw, 3.05rem);
}
.form-intro .callout { box-shadow: none; }
.callout--alert { border-color: rgba(217, 67, 67, 0.5); background: #fff7f7; }
.sidebar-note { margin-top: 1rem; font-weight: 700; }
.section--dark .cta-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-dark);
  box-shadow: none;
}
.section--dark .feature-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
.section--dark .feature-card strong,
.section--dark .feature-card p { color: var(--white); }
.section--dark .cta-card p { color: rgba(255, 255, 255, 0.76); }
.section--dark .cta-card .eyebrow { color: var(--blue-100); }
.split .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pathway-card,
.info-card,
.project-card,
.blog-card,
.market-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cta-card,
.feature-card,
.detail-card,
.service-group-card,
.role-card {
  display: flex;
  flex-direction: column;
}
.pathway-card img,
.info-card img,
.project-card img,
.blog-card img,
.market-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.pathway-card img { aspect-ratio: 4 / 3; height: auto; }
.project-card img { aspect-ratio: 3 / 2; height: auto; }
.blog-card img { aspect-ratio: 16 / 9; height: auto; }
.info-card img { aspect-ratio: 4 / 3; height: auto; }
.market-card img { aspect-ratio: 16 / 8; height: auto; }
.pathway-card__body,
.info-card__body,
.project-card__body,
.blog-card__body,
.team-card__body,
.market-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.15rem;
}
.blog-card__body h3 {
  min-height: 3.2em;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.16;
}
.blog-card__body h3 a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.pathway-card ul,
.project-card__body ul { margin-top: 0.9rem; }
.pathway-card__body .text-link,
.info-card__body .text-link,
.project-card__body .text-link,
.cta-card .btn {
  margin-top: auto;
}
.pathway-card__body .text-link,
.project-card__body .text-link {
  padding-top: 1rem;
}
.pathway-card--dark {
  background: var(--navy-900);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
}
.pathway-card--dark h3,
.pathway-card--dark p,
.pathway-card--dark li,
.pathway-card--dark .text-link { color: var(--white); }
.market-card {
  background: var(--navy-900);
  border-color: rgba(10, 27, 45, 0.22);
}
.market-card img {
  filter: saturate(1.08) contrast(1.1) brightness(0.72);
}
.market-card__body {
  background: var(--navy-900);
}
.market-card h3 {
  color: var(--white);
}

.feature-card {
  border-top: 4px solid var(--blue-600);
}
.feature-card strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--navy-950);
  font-family: var(--font-heading);
  font-size: 1.05rem;
}
.client-actions {
  background:
    linear-gradient(90deg, rgba(4, 20, 37, 0.04), rgba(8, 125, 216, 0.08)),
    var(--white);
  border-block: 1px solid var(--border);
}
.client-actions__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1rem;
}
.client-actions__head h2 {
  max-width: 620px;
  margin-bottom: 0;
  font-size: clamp(1.55rem, 2.4vw, 2.35rem);
}
.client-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}
.client-action {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.9);
}
.client-action--urgent {
  border-color: rgba(217, 67, 67, 0.35);
  background: linear-gradient(180deg, #fffafa, #ffffff);
}
.client-action h3 {
  margin-bottom: 0.55rem;
  font-size: 1.1rem;
}
.client-action p {
  margin-bottom: 1rem;
  color: var(--steel-700);
}
.client-action .text-link { margin-top: auto; }
.detail-card h3 { margin-bottom: 0.65rem; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  color: var(--blue-650);
  font-weight: 800;
}
.pathway-card__body .text-link,
.info-card__body .text-link,
.project-card__body .text-link,
.cta-card .btn {
  margin-top: auto;
}
.pathway-card__body .text-link,
.project-card__body .text-link {
  padding-top: 1rem;
}

.image-panel {
  position: relative;
  min-height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.section--project-proof {
  background: linear-gradient(180deg, var(--white) 0%, #f7fafc 100%);
}
.fabrication-band .image-panel,
.fabrication-band .feature-card {
  box-shadow: none;
}
.fabrication-mosaic {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  grid-template-rows: repeat(2, minmax(160px, 1fr));
  gap: 0.75rem;
}
.fabrication-mosaic img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
}
.fabrication-mosaic img:first-child {
  grid-row: span 2;
}
.image-panel img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}
.image-panel__caption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  padding: 1rem;
  background: rgba(4, 20, 37, 0.84);
  color: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
}
.image-panel__caption p { color: rgba(255, 255, 255, 0.82); margin: 0; }

.prose,
.article { max-width: 780px; }
.prose h2 + p,
.article h2 + p { margin-top: 0.25rem; }
.article {
  font-size: 1.06rem;
}
.bullet-list,
.check-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.1rem;
  padding: 0;
  list-style: none;
}
.check-list li,
.bullet-list li {
  position: relative;
  padding-left: 1.55rem;
}
.check-list li::before,
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-600);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.stat {
  text-align: left;
  border-left: 4px solid var(--blue-600);
}
.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--navy-950);
  line-height: 1;
}

.contact-list,
.social-links { display: grid; gap: 0.9rem; }
.contact-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}
.contact-list li,
.footer-contact li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.form-grid .full { grid-column: 1 / -1; }
.form-grid label,
.radio-fieldset { display: grid; gap: 0.45rem; }
.form-grid span,
.radio-fieldset legend {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--navy-950);
}
input,
textarea,
select {
  width: 100%;
  min-height: 52px;
  padding: 0.92rem 1rem;
  border: 1px solid #ccd6e1;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #ffffff, #f8fbfd);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
input[type="radio"],
input[type="checkbox"] {
  width: auto;
  min-width: 16px;
}
select {
  min-height: 48px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--steel-700) 50%),
    linear-gradient(135deg, var(--steel-700) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.3rem;
}
textarea { resize: vertical; }
input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(17, 153, 242, 0.16);
  border-color: var(--blue-600);
  background: #fff;
}
.has-error input,
.has-error textarea,
.has-error select {
  border-color: #c62828;
  background: #fffafa;
  box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.1);
}
.field-error {
  margin: 0;
  color: #a12626;
  font-size: 0.82rem;
  font-weight: 800;
}
.radio-fieldset {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid #ccd6e1;
  border-radius: var(--radius);
  background: #fbfcfd;
}
.radio-fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 1rem;
}
.sms-consent {
  padding: 0.95rem 1rem;
  border: 1px solid #d7e0ea;
  border-radius: var(--radius);
  background: #f7fafc;
}
.sms-consent__check {
  display: flex !important;
  align-items: flex-start;
  gap: 0.75rem !important;
}
.sms-consent__check input {
  width: auto;
  margin-top: 0.2rem;
  flex: 0 0 auto;
}
.sms-consent__check span {
  font-size: 0.84rem;
  line-height: 1.35;
  font-weight: 800;
  color: var(--navy-950);
}
.sms-consent__copy {
  margin: 0.65rem 0 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--steel-700);
}
.sms-consent__copy a {
  color: var(--navy-950);
  font-weight: 800;
}
.form-status:empty { display: none; }
.form-status {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  font-weight: 700;
}
.form-status.is-success { background: #e9f8ef; color: #0b6b38; border: 1px solid #bfe7cc; }
.form-status.is-error { background: #fff0f0; color: #a12626; border: 1px solid #f0c7c7; }
.form-status a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.form-status strong { color: inherit; }
.hp-field {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  min-width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.is-emergency { border-color: #d84747; box-shadow: 0 0 0 3px rgba(216, 71, 71, 0.12); }
.btn.is-loading,
.btn:disabled {
  cursor: wait;
  opacity: 0.78;
}
.confirmation-panel {
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid rgba(17, 153, 242, 0.18);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 252, 0.98)),
    radial-gradient(circle at 12% 0%, rgba(17, 153, 242, 0.16), transparent 38%);
  box-shadow: var(--shadow-sm);
}
.confirmation-panel h2 { margin-bottom: 0.8rem; }
.confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

.team-card { overflow: hidden; }
.team-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.team-roster {
  display: grid;
  gap: 1rem;
  margin-top: 0;
}
.team-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.65fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.team-card--compact {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: start;
  min-height: 154px;
}
.team-card--compact img {
  width: 132px;
  height: 154px;
  min-height: 0;
  aspect-ratio: auto;
  filter: grayscale(1) contrast(1.08);
}
.team-card--compact .team-card__body {
  display: grid;
  align-content: center;
  padding: 1.15rem 1.3rem;
}
.team-card--compact .team-card__body > p:last-child {
  margin-bottom: 0;
}
.team-card__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}
.team-card details summary {
  cursor: pointer;
  color: var(--blue-650);
  font-weight: 800;
}
.logo-card {
  display: grid;
  place-items: center;
  padding: 1rem;
  min-height: 168px;
  text-align: center;
}
.affiliation-groups {
  display: grid;
  gap: 1.4rem;
}
.affiliation-group {
  padding: clamp(1rem, 2vw, 1.35rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.affiliation-group h3 {
  margin-bottom: 1rem;
}

.service-group-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.service-group-card,
.role-card {
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.service-group-card {
  border-top: 4px solid var(--blue-600);
}
.service-group-card ul {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
}
.service-group-card a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--blue-650);
  font-weight: 800;
}
.service-group-card svg {
  width: 0.95rem;
  height: 0.95rem;
}
.service-image-strip {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1.2rem;
}
.service-image-strip img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
}
.service-image-strip img:first-child { height: 280px; }
.role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.role-card {
  border-left: 4px solid var(--blue-600);
}
.logo-card img {
  max-height: 82px;
  object-fit: contain;
  margin-bottom: 0.75rem;
}

.blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.blog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.blog-tab {
  min-height: 42px;
  padding: 0.62rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy-950);
  font-weight: 800;
}
.blog-tab.is-active { background: var(--navy-900); color: var(--white); }
.blog-search input { min-width: 260px; }
.meta { font-size: 0.88rem; color: var(--blue-650); font-weight: 800; }
.gallery-stack { display: grid; gap: 1rem; }
.gallery-stack img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.project-case {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.72fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
}
.project-aside {
  display: grid;
  gap: 1rem;
}
.project-meta-strip,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1rem;
}
.project-meta-strip span,
.tag-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--navy-950);
  background: var(--steel-100);
  font-size: 0.78rem;
  font-weight: 800;
}
.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  margin-bottom: 0.55rem;
  color: var(--blue-650);
  font-size: 0.8rem;
  font-weight: 800;
}
.project-facts {
  display: grid;
  gap: 0.9rem;
  margin: 1rem 0 0;
}
.project-facts div {
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
}
.project-facts dt {
  color: var(--steel-700);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.project-facts dd {
  margin: 0.2rem 0 0;
  color: var(--navy-950);
  font-weight: 800;
}
.case-flow {
  display: grid;
  gap: 1rem;
}
.case-flow section {
  padding: 1.15rem 0 1.15rem 1rem;
  border-left: 4px solid var(--blue-600);
  border-bottom: 1px solid var(--border);
}
.case-flow h2 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}
.gallery-stack__image { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.form-card .btn-full { margin-top: 1rem; }
.breadcrumb {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  color: var(--blue-650);
  font-weight: 800;
}

.site-footer {
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: rgba(255, 255, 255, 0.82);
}
.footer-contact {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.25rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.1fr;
  gap: 2rem;
  /* ⚠️ `padding-block`, NOT the `padding` shorthand. These two classes are used
     AS `class="container footer-grid"`, and a shorthand here overrides
     `.container`'s `padding: 0 var(--container-px)` — which it did, silently,
     zeroing the footer's side padding at every width below 1240px. The footer
     ran flush to the screen edge on every phone, and the rotated disclosure
     caret then overhung it by 2px, giving the whole site a 2px horizontal
     scroll (measured: documentElement.scrollWidth 392 against a 390 viewport,
     on all 42 pages). */
  padding-block: 3rem;
}
.site-footer h3,
.site-footer a,
.site-footer strong,
.footer-bottom p { color: var(--white); }
.site-footer p { color: rgba(255, 255, 255, 0.72); }
.footer-logo { width: 190px; margin-bottom: 1rem; }
.footer-links { display: grid; gap: 0.7rem; }
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
.social-links a {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 1rem;   /* see .footer-grid — shorthand would wipe .container's side padding */
}
.footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.footer-bottom__inner div {
  display: flex;
  gap: 1rem;
}

.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: none;
  gap: 0.75rem;
  padding: 0.8rem var(--container-px) calc(0.8rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -12px 30px rgba(5, 24, 42, 0.14);
  transform: translateY(120%);
  transition: transform var(--transition);
}
.mobile-cta.is-visible { transform: translateY(0); }
.quick-assist {
  position: fixed;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 110;
}
.quick-assist__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--navy-950), var(--blue-650));
  color: var(--white);
  box-shadow: 0 16px 42px rgba(4, 20, 37, 0.28);
  font: 800 0.92rem var(--font-body);
  cursor: pointer;
}
.quick-assist__toggle svg {
  width: 18px;
  height: 18px;
}
.quick-assist__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: min(360px, calc(100vw - 2rem));
  padding: 1rem;
  border: 1px solid rgba(10, 27, 45, 0.16);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 22px 65px rgba(4, 20, 37, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.quick-assist.is-open .quick-assist__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.quick-assist__head {
  padding: 0.9rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
  color: var(--white);
}
.quick-assist__head h2 {
  margin-bottom: 0.35rem;
  color: var(--white);
  font-size: 1.3rem;
}
.quick-assist__head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
}
.quick-assist__head .eyebrow {
  color: var(--blue-100);
}
.quick-assist__options {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.75rem;
}
.quick-assist__option {
  display: grid;
  gap: 0.15rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fbfcfd;
  color: var(--navy-950);
}
.quick-assist__option:hover {
  border-color: rgba(8, 125, 216, 0.45);
  background: var(--blue-100);
}
.quick-assist__option strong {
  color: var(--navy-950);
  font-size: 0.95rem;
}
.quick-assist__option span {
  color: var(--steel-700);
  font-size: 0.8rem;
}
.quick-assist__option--urgent {
  border-color: rgba(217, 67, 67, 0.35);
  background: #fff5f5;
}
.legal-header {
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--steel-100);
  border-bottom: 1px solid var(--border);
}
.legal-header h1 {
  max-width: 16ch;
  font-size: clamp(2.1rem, 4vw, 3.3rem);
}
.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease, transform 420ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .site-header__inner { grid-template-columns: auto 1fr auto; }
  .site-nav,
  .site-actions { display: none; }
  .nav-toggle {
    display: inline-grid;
    gap: 5px;
    width: 44px;
    height: 44px;
    align-content: center;
    justify-items: center;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius);
    background: transparent;
    justify-self: end;
  }
  .nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
  }
  .mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(4, 20, 37, 0.64);
    padding: 5rem 1rem 1rem;
  }
  .mobile-nav.is-open { display: block; }
  .mobile-nav__panel {
    height: calc(100vh - 6rem);
    overflow: auto;
    padding: 1.1rem;
    background: var(--white);
    border-radius: var(--radius-lg);
  }
  .mobile-links,
  .mobile-submenu,
  .mobile-utility { display: grid; gap: 0.7rem; }
  .mobile-links > a,
  .mobile-submenu a,
  .mobile-utility a,
  .mobile-group summary {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--navy-950);
    font-weight: 800;
  }
  .mobile-group summary { cursor: pointer; }
  .feature-grid,
  .card-grid,
  .client-action-grid,
  .capability-grid,
  .blog-grid,
  .service-group-grid,
  .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-layout,
  .form-layout--request { grid-template-columns: 1fr; }
  .form-intro { position: static; }
  .pathway-grid { grid-template-columns: 1fr; }
  .logo-grid,
  .market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-case { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --section-py: 2.6rem; }
  .emergency-bar__inner {
    min-height: 42px;
    font-size: 0.82rem;
  }
  .brand img { width: 184px; }
  h1 { font-size: clamp(2.25rem, 12vw, 3.4rem); }
  h2 { font-size: clamp(1.75rem, 8vw, 2.55rem); }
  .hero--video,
  .hero--home { min-height: 560px; }
  .hero-content { min-height: 560px; padding-top: 2.3rem; padding-bottom: 2.3rem; }
  .hero--interior,
  .hero--interior .hero-content { min-height: 340px; }
  .proof-band__grid,
  .team-page-grid,
  .split,
  .split--wide,
  .stats-grid,
  .project-grid,
  .team-grid,
  .footer-grid,
  .form-grid,
  .client-action-grid,
  .form-layout,
  .form-layout--request,
  .blog-grid,
  .card-grid,
  .feature-grid,
  .capability-grid,
  .detail-grid,
  .service-group-grid,
  .role-grid,
  .service-image-strip,
  .fabrication-mosaic,
  .project-case,
  .cta-grid { grid-template-columns: 1fr; }
  .market-grid,
  .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-tile { min-height: auto; }
  .image-panel { min-height: 320px; }
  .fabrication-mosaic { grid-template-rows: none; }
  .fabrication-mosaic img,
  .fabrication-mosaic img:first-child {
    grid-row: auto;
    height: 220px;
  }
  .service-image-strip img,
  .service-image-strip img:first-child { height: 210px; }
  body { padding-bottom: 0; }
  body[data-mobile-cta="true"] { padding-bottom: 5.5rem; }
  body[data-mobile-cta="true"] .mobile-cta { display: grid; grid-template-columns: 0.75fr 1.25fr; }
  .form-intro { position: static; }
  .client-actions__head {
    display: grid;
    align-items: start;
  }
  .client-action { min-height: auto; }
  .quick-assist {
    right: 1rem;
    bottom: 1rem;
  }
  body[data-mobile-cta="true"] .quick-assist {
    bottom: calc(5.7rem + env(safe-area-inset-bottom));
  }
  .quick-assist__toggle span {
    display: none;
  }
  .quick-assist__toggle {
    width: 54px;
    height: 54px;
    justify-content: center;
    padding: 0;
  }
  .quick-assist__panel {
    width: min(340px, calc(100vw - 2rem));
    max-height: calc(100vh - 8.5rem);
    overflow: auto;
  }
  .blog-toolbar,
  .footer-bottom__inner { flex-direction: column; align-items: start; }
  .blog-search,
  .blog-search input { width: 100%; min-width: 0; }
  .footer-bottom__inner div { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .emergency-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.45rem var(--container-px);
  }
  .market-grid,
  .logo-grid { grid-template-columns: 1fr; }
  .pathway-card img,
  .info-card img,
  .project-card img,
  .blog-card img { height: 190px; }
  .blog-card__body h3 {
    min-height: auto;
    font-size: clamp(1.25rem, 7vw, 1.6rem);
  }
  .btn { width: 100%; }
  .hero-actions { width: 100%; }
  .hero--home { min-height: 520px; }
  .hero-content { min-height: 520px; }
  .hero .hero-copy { font-size: 1rem; }
  .team-card--compact {
    grid-template-columns: 86px minmax(0, 1fr);
    min-height: 132px;
  }
  .team-card--compact img {
    width: 86px;
    height: 96px;
    min-height: 0;
  }
  .team-card--compact .team-card__body {
    padding: 0.95rem;
  }
  .team-card--compact .team-card__head {
    align-items: start;
  }
  .team-card--compact .team-card__head a {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Footer link groups — collapsible on mobile only.
   The footer holds 19 links; stacked on a phone it ran longer than the page
   content above it. They are <details open> in the markup and main.js closes
   them below the mobile breakpoint, so with JS off the footer keeps today's
   fully-expanded behaviour rather than becoming an unopenable stub.
   --------------------------------------------------------------------------- */
.footer-group > summary { list-style: none; cursor: default; }
/* ⚠️ Above the breakpoint the summary is a heading, so it must not be a
   POINTER TARGET either — otherwise it is a 20px-tall interactive element
   (WCAG 2.5.8 wants 24px) that looks like plain text. The keyboard path is
   handled in main.js, which restores `open` if Enter toggles it. */
@media (min-width: 769px) {
  .footer-group > summary { pointer-events: none; }
}
.footer-group > summary::-webkit-details-marker { display: none; }
.footer-group > summary h3 { margin: 0; }

@media (max-width: 768px) {
  /* Only on mobile is the summary an actual control, so only here does it get
     a pointer, a real touch target and a disclosure caret. */
  .footer-group > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.35rem 0;
  }
  .footer-group > summary::after {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.7;
    flex: none;
  }
  .footer-group[open] > summary::after { transform: rotate(-135deg); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-group > summary::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   Headings must not overhang a narrow column.
   Measured on /service-maintenance/test-and-balance/: the h2 sits in a 490px
   .prose column while its font-size is clamp()ed against the VIEWPORT, so at
   1440/1920 the single word "recommendations" renders 500px/524px — wider than
   its own box. overflow is visible, so it does not clip or scroll the page; it
   simply spills over whatever sits beside it.
   This is a safety net, not a restyle: break/hyphenate only engages when a word
   genuinely does not fit, so nothing that fits today changes appearance.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  /* ⚠️ `hyphens: auto` was here and was WRONG. It engages on every wrap, not
     only on overflow, so ordinary headings broke mid-word — "Start the esti-
     / mating / conversation." on /request-estimate/ and similar across the
     site. It was added as an overflow safety net; that is not what it does.
     `overflow-wrap: break-word` IS the safety net: it breaks a word only when
     the word cannot fit the line at all, and never hyphenates a normal wrap. */
  overflow-wrap: break-word;
}

/* Utility link for the page you are already on — mirrors the primary nav's
   is-active, so a self-link reads as "you are here" instead of a dead repeat. */
.utility-link.is-current { color: var(--white); font-weight: 750; }

/* Effective date on the legal pages — sits under the intro, muted but findable.
   A policy with no date cannot be relied on, and it is the first thing anyone
   auditing it looks for. */
.legal-effective {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--steel-500, var(--steel-700));
}
.legal-effective strong { font-weight: 750; }

/* Affiliation card without a logo on file — a text plate rather than a broken
   image. Used for union locals we list before their logo is supplied. */
.logo-card--text {
  display: grid;
  place-content: center;
  min-height: 96px;
  text-align: center;
}
.logo-card__note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--steel-700);
}

/* A linked affiliation card keeps the card's own look — the anchor is a plain
   wrapper, not a text link, so the logo grid stays visually uniform. */
.logo-card a {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  align-content: center;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.logo-card a:hover figcaption,
.logo-card a:focus-visible figcaption { color: var(--blue-650); }

/* ---------------------------------------------------------------------------
   Careers
   --------------------------------------------------------------------------- */
/* Second line on a role card — what the job is really like, set apart from the
   scope sentence above it so the card reads as two thoughts, not one long one. */
.role-card__detail {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border);
  font-size: 0.94rem;
  color: var(--steel-700);
}

/* Application form. Renders only once careersApplyEndpoint is set; until then
   the page shows the email route instead. */
.careers-form { margin-top: 1.2rem; }
.careers-form .form-grid { margin-bottom: 1.1rem; }
.careers-form .full { grid-column: 1 / -1; }
.careers-form input[type="file"] {
  padding: 0.6rem;
  background: var(--steel-100);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  width: 100%;
}
.field-hint {
  font-weight: 400;
  color: var(--steel-700);
}

/* Skip link — the first focusable thing on the page.
   ⚠️ Off-screen, NOT display:none. A hidden element is not focusable, so
   `display:none` here produces a skip link that can never be reached, which is
   worse than none: it looks like the box is ticked. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--navy-900);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--blue-500);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Touch target minimums (WCAG 2.5.8, AA — 24x24 CSS px).

   Measured across the site on 2026-09-11 at 390px and 768px: almost every
   navigational link failed. The footer's legal row was **15px tall**, the
   footer nav links 20px, the utility links 22px, breadcrumbs 20px — and the
   emergency-bar phone number, which is the single most important tap on a
   mechanical contractor's phone site, was **21px**.

   ⚠️ These rules raise the TARGET, not the type. Every fix is `min-height`
   plus `inline-flex` centring, so the text keeps its size, weight and
   baseline; only the hit area grows. Adding padding instead would reflow the
   rows and change the design.

   ⚠️ Scoped to navigational regions on purpose. A blanket `a { min-height }`
   would hit links inside body copy, where an inline-flex link breaks the
   line box and pushes the paragraph apart.
   --------------------------------------------------------------------------- */
.utility-link,
.emergency-bar__phone,
.footer-links a,
.footer-contact a,
.footer-bottom a,
.breadcrumb a,
.breadcrumb span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* The phone number is the conversion action on mobile: give it a comfortable
   target rather than the bare minimum. */
@media (max-width: 768px) {
  .emergency-bar__phone,
  .footer-contact a[href^="tel:"] {
    min-height: 32px;
  }
}

/* A 16px checkbox is a 16px target however tall its row is. Scale the control
   itself — `transform` would not move the hit area, only the paint. */
input[type="checkbox"],
input[type="radio"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex: none;
}
/* ⚠️ EXCEPT the honeypot, which is meant to be 1px and invisible to people.
   Enlarging it would hand bots a visible field and break the spam trap. */
input.hp-field {
  width: 1px;
  height: 1px;
  min-width: 0;
}