/* =========================================
   AMERICAN ENGINEERING — Design System
   Palette: Deep Navy + Crimson + Warm White
   Fonts: Playfair Display (headings) + DM Sans (body)
   ========================================= */

/* === FONTS (self-hosted, SIL OFL 1.1: assets/fonts/OFL.txt) ===
   The same latin-subset variable files Google Fonts served, so the look is unchanged, with no third-party
   request. One file per family covers every weight. No italic face is loaded; the few italic runs are
   body text in DM Sans, which never had an italic file either. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-v17-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(assets/fonts/playfair-display-v40-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched local fallbacks: while the web fonts load, Georgia / Arial are scaled to the same
   advance widths and line box, so text does not reflow (layout shift) when the web font swaps in. */
@font-face {
  font-family: 'Playfair Display Fallback';
  src: local('Georgia');
  font-weight: 400 500;
  size-adjust: 100.9%; ascent-override: 107.2%; descent-override: 24.9%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Playfair Display Fallback';
  src: local('Georgia Bold'), local('Georgia-Bold');
  font-weight: 600 900;
  size-adjust: 89.4%; ascent-override: 121.1%; descent-override: 28.1%; line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial'), local('ArialMT');
  font-weight: 300 500;
  size-adjust: 102.4%; ascent-override: 96.9%; descent-override: 30.3%; line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 600 900;
  size-adjust: 99.4%; ascent-override: 99.8%; descent-override: 31.2%; line-gap-override: 0%;
}

/* === DESIGN TOKENS === */
:root {
  /* Type scale — fluid, with capped maxima so headings stay in proportion on wide screens.
     Hierarchy: hero (home only) > 3xl (page H1) > 2xl (section H2) > xl (H3). */
  --text-xs:      clamp(0.75rem,  0.70rem + 0.25vw, 0.875rem);
  --text-sm:      clamp(0.875rem, 0.80rem + 0.35vw, 1rem);
  --text-base:    clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:      clamp(1.125rem, 1.00rem + 0.75vw, 1.5rem);
  --text-xl:      clamp(1.5rem,   1.20rem + 1.25vw, 2.25rem);  /* H3 */
  --text-2xl:     clamp(1.75rem,  1.25rem + 1.60vw, 2.5rem);   /* section H2: one size for .section-heading and .svc-h2 (was max 3) */
  --text-display: clamp(2.25rem,  1.50rem + 3.00vw, 3.25rem);  /* feature headings */
  --text-3xl:     clamp(2.25rem,  1.50rem + 2.60vw, 3.75rem);  /* page H1 (was max 5)   */
  --text-hero:    clamp(2.75rem,  1.90rem + 4.00vw, 5.25rem);  /* homepage hero (was max 8) */
  --text-stat:    clamp(2rem,     1.40rem + 2.00vw, 3rem);     /* data, not headline */

  /* Rhythm — line-height, tracking, prose measure (single source of truth) */
  --leading-display: 1.08;
  --leading-heading: 1.2;
  --leading-body:    1.65;
  --leading-prose:   1.7;
  --tracking-label:  0.1em;
  --measure:         65ch;
  --measure-tight:   46ch;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-9:  2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;
  /* Semantic radius — components point here, not at raw steps */
  --radius-control: var(--radius-md);
  --radius-card:    var(--radius-lg);
  --radius-panel:   var(--radius-xl);

  /* Layout */
  --header-h:    72px;
  --lift:        -3px;  /* shared hover lift */
  --section-pad: clamp(var(--space-16), 8vw, var(--space-24));

  /* Transitions */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(10,20,50,0.08), 0 1px 2px rgba(10,20,50,0.05);
  --shadow-md: 0 4px 16px rgba(10,20,50,0.10), 0 2px 6px rgba(10,20,50,0.06);
  --shadow-lg: 0 12px 40px rgba(10,20,50,0.14), 0 4px 12px rgba(10,20,50,0.08);

  /* Widths */
  --content-narrow:  640px;
  --content-default: 980px;
  --content-wide:    1220px;

  /* Fonts */
  --font-display: 'Playfair Display', 'Playfair Display Fallback', Georgia, serif;
  --font-body:    'DM Sans', 'DM Sans Fallback', 'Helvetica Neue', sans-serif;

  /* On-navy — text & surfaces on always-dark bands (navy/footer/stats/hero/cta).
     Theme-independent: navy stays dark in light & dark mode. Tuned for WCAG AA. */
  --on-navy-strong:   rgba(255,255,255,0.92);
  --on-navy:          rgba(255,255,255,0.74);  /* AA body on navy */
  --on-navy-muted:    rgba(255,255,255,0.60);  /* AA small labels on navy */
  --surface-on-navy:  rgba(255,255,255,0.07);
  --border-on-navy:   rgba(255,255,255,0.14);
  --hairline-on-navy: rgba(255,255,255,0.12);
}

/* === LIGHT MODE (default) === */
:root, [data-theme='light'] {
  --color-bg:              #F8F7F4;
  --color-surface:         #FFFFFF;
  --color-surface-2:       #F2F1EE;
  --color-surface-warm:    #EEEBE5;  /* alternate band on service pages: visibly warmer than white */
  --color-surface-offset:  #ECEAE5;
  --color-divider:         #DDD9D2;
  --color-border:          #D2CEC7;

  --color-text:            #1A1917;
  --color-text-muted:      #5B5A56;  /* ~5:1 on surface — was #6B6A66 (~4.3:1) */
  --color-text-faint:      #8C8B86;  /* decorative only — never load-bearing text */
  --color-text-inverse:    #F8F7F4;

  /* Navy */
  --color-navy:            #122140;
  --color-navy-dark:       #0B1628;
  --color-navy-light:      #1B2E55;

  /* Crimson accent */
  --color-primary:         #C41230;  /* fills, borders, large display accents */
  --color-primary-hover:   #A00E26;
  --color-primary-active:  #7D0B1D;
  --color-primary-bg:      #FEF2F4;
  --color-primary-text:    #A60E26;  /* small crimson TEXT (links/eyebrows) — AA on light */
  --color-primary-on-dark: #FF99A8;  /* crimson tint on navy (link underlines); small labels on navy use white */

  /* Gold accent (secondary) — decorative only; fails AA as body/link text */
  --color-gold:            #C8961A;

  /* Semantic */
  --color-success:         #2E7D32;
  --color-error:           #C62828;
}

/* === DARK MODE === */
[data-theme='dark'] {
  --color-bg:              #10131A;
  --color-surface:         #161B25;
  --color-surface-2:       #1C2232;
  --color-surface-offset:  #1A2030;
  --color-divider:         #252E42;
  --color-border:          #2E3A52;

  --color-text:            #E8E6E1;
  --color-text-muted:      #8A8D99;
  --color-text-faint:      #555B6E;
  --color-text-inverse:    #10131A;

  --color-navy:            #1E3260;
  --color-navy-dark:       #0E1A38;
  --color-navy-light:      #243A6E;

  --color-primary:         #E8415A;
  --color-primary-hover:   #D42E47;
  --color-primary-active:  #BD2039;
  --color-primary-bg:      #2A1017;
  --color-primary-text:    #FF6076;  /* brighter crimson for small text on dark surfaces */

  --color-gold:            #E8A820;

  --color-success:         #66BB6A;
  --color-error:           #EF9A9A;
}

/* Auto dark-mode intentionally removed — the site is locked to the light theme
   (data-theme="light" is hard-set on <html> and the theme toggle was removed). */

/* =========================================
   SHARED COMPONENTS
   ========================================= */

/* Container */
.container {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container--default {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container--narrow {
  max-width: var(--content-narrow);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* === HEADER / NAV === */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 300;
  padding: var(--space-2) var(--space-4);
  background: var(--color-navy); color: #fff;
  font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); }
/* #site-header (the wrapper components.js renders into) is the sticky element. The inner
   .site-header is exactly as tall as that wrapper, so sticky on it never engaged. */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-h);      /* reserves the bar before components.js renders it: no layout shift */
}
.site-header {
  position: relative;               /* containing block for the full-width mega menu */
  background: var(--color-surface);
  box-shadow: inset 0 -1px 0 var(--color-border);   /* hairline drawn inside, so the bar is exactly --header-h */
  transition: box-shadow var(--transition-interactive);
}
.site-header--scrolled { box-shadow: inset 0 -1px 0 var(--color-border), var(--shadow-md); }
/* Light scrim behind the open mega menu (sits under the header, over the page; a press on it closes the menu) */
.mega-scrim { position: fixed; inset: 0; z-index: -1; background: rgba(11,22,40,0.22); }
.mega-scrim[hidden] { display: none; }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: var(--space-6);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo svg { width: 48px; height: 48px; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.nav-logo-text .brand-main {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
[data-theme='dark'] .nav-logo-text .brand-main { color: var(--color-text); }
.nav-logo-text .brand-sub {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}
.nav-links > li > a,
.nav-dropdown-toggle {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  background: none; border: none; cursor: pointer;
  border-radius: var(--radius-md);
}
.nav-links > li > a:hover,
.nav-dropdown-toggle:hover { color: var(--color-navy); background: var(--color-surface-2); }
/* Current page / current section: a straight crimson underline (a pseudo-element, so the
   button's rounded corners don't bend it into a curve) */
.nav-links > li > a[aria-current],
.nav-links > li > a.active,
.nav-dropdown-toggle.active {
  position: relative;
  color: var(--color-navy);
  font-weight: 600;
}
.nav-links > li > a[aria-current]::after,
.nav-links > li > a.active::after,
.nav-dropdown-toggle.active::after {
  content: '';
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
}
.nav-dropdown-toggle svg { transition: transform 200ms; }
.nav-dropdown-toggle[aria-expanded='true'] { color: var(--color-navy); background: var(--color-surface-2); }
.nav-dropdown-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }

/* Services mega menu — full-width panel under the header, one column per service group */
.nav-dropdown { position: static; }
.mega-menu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 200;
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 18px 40px rgba(10,20,50,0.14);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
}
.mega-menu[hidden] { display: none; }
.mega-menu-inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6) var(--space-6);
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: clamp(var(--space-5), 2.5vw, var(--space-10));
}
/* subgrid: every column's heading shares one row, so the link lists start on the same line */
.mega-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
.mega-heading {
  display: flex; align-items: flex-end;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-navy);
  text-decoration: none;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-divider);
}
.mega-heading svg { display: inline-block; vertical-align: -1px; margin-left: 6px; color: var(--color-primary); transition: transform 200ms; }
.mega-heading:hover { color: var(--color-primary-text); }
.mega-heading:hover svg { transform: translateX(3px); }
.mega-col.is-current .mega-heading { border-bottom-color: var(--color-primary); }
.mega-list { list-style: none; display: grid; gap: 2px; align-content: start; }
.mega-list a,
.mega-list .nav-soon {
  display: block;
  padding: var(--space-2);
  margin-inline: calc(-1 * var(--space-2));
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
/* Pages not built yet (components.js BUILT): shown as plain text, never as a dead link */
.nav-soon { color: var(--color-text-muted); cursor: default; }
.mega-list .nav-soon { color: var(--color-text-muted); }
.mega-heading.nav-soon { color: var(--color-navy); }
.mega-list a:hover { background: var(--color-surface-2); color: var(--color-navy); }
.mega-heading[aria-current='page'],
.mega-list a[aria-current='page'] { color: var(--color-navy); font-weight: 600; }
.mega-list a[aria-current='page'] {
  background: var(--color-primary-bg);
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.mega-footer {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.mega-all {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-primary-text); text-decoration: none;
}
.mega-all:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.mega-note { font-size: var(--text-sm); color: var(--color-text-muted); }
.mega-note a { color: var(--color-navy); font-weight: 600; text-underline-offset: 3px; }
.mega-note a:hover { color: var(--color-primary-text); }
/* 901-1100px: four columns get cramped; use a 2x2 grid (subgrid keeps each row's headings aligned) */
@media (min-width: 901px) and (max-width: 1100px) {
  .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; row-gap: var(--space-6); }
}
/* 901-1100px: the four primary links (Services, About Us, Past Work, News Room) plus the call icon need more
   than the bar has; tighter link padding and gaps keep every label on one line (measured: without this the
   links wrap at 1001-1030px) */
@media (min-width: 901px) and (max-width: 1100px) {
  .nav-inner { gap: var(--space-3); }
  .nav-links { gap: 0; }
  .nav-links > li > a,
  .nav-dropdown-toggle { padding-inline: var(--space-2); white-space: nowrap; }
  .nav-links > li > a[aria-current]::after,
  .nav-links > li > a.active::after,
  .nav-dropdown-toggle.active::after { left: var(--space-2); right: var(--space-2); }
  .nav-right .btn { padding-inline: var(--space-4); }
}
/* 901-960px: the narrowest desktop bars are about 40px short even with the icon-only call link; trim the
   remaining gaps and paddings (and the tagline's tracking) so nothing overflows or squeezes */
@media (min-width: 901px) and (max-width: 960px) {
  .nav-inner { gap: var(--space-2); }
  .site-header .nav-logo { gap: var(--space-2); }
  .site-header .nav-logo-text .brand-sub { letter-spacing: 0.05em; }
  .nav-right { gap: var(--space-1); }
  .nav-links > li > a,
  .nav-dropdown-toggle { padding-inline: 6px; }
  .nav-links > li > a[aria-current]::after,
  .nav-links > li > a.active::after,
  .nav-dropdown-toggle.active::after { left: 6px; right: 6px; }
  .nav-right .btn { padding-inline: var(--space-3); }
}

/* Nav right cluster */
.nav-right {
  display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0;
}
/* Click-to-call (components.js). The full number shows wherever the bar has room for it; where it
   doesn't (see the breakpoints below) only the icon shows, and the aria-label still reads the number. */
.nav-phone {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-width: 44px; min-height: 44px;            /* WCAG 2.5.8 target size, with room to spare */
  padding: 0 var(--space-2);
  font-size: var(--text-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-navy);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-md);
}
.nav-phone svg { flex-shrink: 0; color: var(--color-primary); }
.nav-phone:hover { background: var(--color-surface-2); color: var(--color-primary-text); }
.nav-phone:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* The number needs about 1141px of viewport beside the logo, links and button at normal spacing (measured);
   below 1150px only the icon shows */
@media (max-width: 1149px) {
  .nav-phone { padding: 0; }
  .nav-phone-num { display: none; }
}
/* Header button label: "Get in Touch", shortened to "Contact" on phones (below). Only one span is ever
   rendered and the other is display:none, so the link's accessible name is always the visible label
   (WCAG 2.5.3 Label in Name). */
.btn-label-short { display: none; }
/* Phones (below 620px): the call icon stays in the header at every width, beside the wordmark (the logo mark
   alone below 360px). To make room, the button reads "Contact" and the icon sits right against it: the icon
   keeps its 44x44 target, and the ~13px of empty target around the 18px glyph still separates it from the
   button. Measured (with the <=400px button padding below): one row and no sideways scroll at every width
   from 320 to 619px, with at least 9.5px to spare (the tightest is 360px, where the wordmark returns). */
@media (max-width: 619px) {
  .site-header .nav-right { gap: 0; }   /* beats the later <=900px gap rule */
  .nav-right .nav-phone:focus-visible { outline-offset: -2px; }   /* keep the ring off the touching button */
  .nav-right .btn-label-full { display: none; }
  .nav-right .btn-label-short { display: inline; }
}

/* Theme toggle */
.theme-toggle {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--color-text); background: var(--color-surface-offset); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-sm); font-weight: 600;
  border-radius: var(--radius-md);
  text-decoration: none; cursor: pointer; border: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); }

.btn-outline {
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
}
[data-theme='dark'] .btn-outline { color: var(--color-text); border-color: var(--color-border); }
.btn-outline:hover { background: var(--color-navy); color: #fff; }
[data-theme='dark'] .btn-outline:hover { background: var(--color-border); }

.btn-ghost-white {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(4px);
}
.btn-ghost-white:hover { background: rgba(255,255,255,0.25); }

.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  width: 44px; height: 44px; gap: 5px;
  margin-left: calc(-1 * var(--space-2));
  background: none; border: none; cursor: pointer;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--color-text);
  transition: transform 200ms, opacity 200ms;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav — grouped accordion; scrolls inside the sticky header when taller than the screen.
   Shown only at <=900px (see the responsive ladder) and only when not [hidden]. */
.mobile-nav {
  display: none;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav-list {
  list-style: none;
  padding: var(--space-2) var(--space-6) var(--space-6);
}
.mobile-nav-list > li > a {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-divider);
}
.mobile-nav-list > li:last-child > a { border-bottom: none; }
.mobile-nav-list > li > a[aria-current] { color: var(--color-navy); font-weight: 700; }
.mobile-services { border-bottom: 1px solid var(--color-divider); padding-bottom: var(--space-3); }
.mobile-nav-label {
  padding: var(--space-4) 0 var(--space-1);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-muted);
}
.mobile-group { border-bottom: 1px solid var(--color-divider); }
.mobile-group-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) 0;
  font-size: var(--text-base); font-weight: 600;
  color: var(--color-navy);
  text-align: left;
}
.mobile-group-toggle svg { flex-shrink: 0; transition: transform 200ms; }
.mobile-group-toggle[aria-expanded='true'] svg { transform: rotate(180deg); }
.mobile-group-list {
  list-style: none;
  margin: 0 0 var(--space-3) 2px;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-divider);
}
.mobile-group-list[hidden] { display: none; }
.mobile-group-list a,
.mobile-group-list .nav-soon {
  display: block;
  padding: 10px var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.mobile-group-list .nav-soon { color: var(--color-text-muted); }
.mobile-group-list a:hover { background: var(--color-surface-2); color: var(--color-navy); }
.mobile-group-list a[aria-current='page'] { background: var(--color-primary-bg); color: var(--color-navy); font-weight: 600; }
.mobile-nav-list .mobile-all {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: none;
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-primary-text); text-decoration: none;
}

/* === SECTION LABELS === */
.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-text);
  margin-bottom: var(--space-3);
}
.section-label--light { color: var(--on-navy); }

/* Section heading */
.section-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-navy);
  line-height: var(--leading-heading);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
[data-theme='dark'] .section-heading { color: var(--color-text); }
.section-heading--light { color: #fff; }
.section-heading--center { text-align: center; }
/* H3-level heading — replaces per-page inline `font-size:var(--text-xl)` overrides */
.section-heading--sm { font-size: var(--text-xl); margin-bottom: var(--space-5); }

.section-subheading {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: var(--measure);
  line-height: var(--leading-prose);
}
.section-subheading--center { text-align: center; margin-inline: auto; }
.section-subheading--light { color: var(--on-navy); }

/* Lede paragraph — canonical intro text (replaces ad-hoc inline line-height/measure) */
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-prose);
  color: var(--color-text);
  max-width: var(--measure);
}

/* Section block */
.section {
  padding-block: var(--section-pad);
}
.section--tight {
  padding-block: clamp(var(--space-8), 5vw, var(--space-16));
}
.section--navy {
  background: var(--color-navy);
}
.section--navy-dark {
  background: var(--color-navy-dark);
}
.section--crimson {
  background: var(--color-primary);
}
.section--surface {
  background: var(--color-surface-2);
}

/* === SHARED LAYOUT UTILITIES === */
/* Centered section intro (eyebrow + heading + sub) */
.section-header {
  max-width: 640px;
  margin-bottom: clamp(var(--space-8), 6vw, var(--space-12));
}
.section-header--center { text-align: center; margin-inline: auto; }

/* Responsive card grid — single source for cards/projects/news/specs */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-6);
}

/* Vertical flow: consistent spacing between stacked content blocks */
.flow > * + * { margin-top: var(--space-6); }
.section-break {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-divider);
}

/* Shared hover-lift (replaces -2/-3px drift across card variants) */
.is-hoverable {
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.is-hoverable:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow-md); }

.btn--block { width: 100%; }

/* === SECTION BACKGROUND IMAGERY ===
   Two reusable patterns; set the image inline via the --bg-img custom property.
   Dark band:   <section class="section section--photo"   style="--bg-img:url('../assets/x.jpg')">
   Subtle texture: <section class="section section--texture" style="--bg-img:url('../assets/texture-blueprint.jpg')"> */
.section--photo {
  position: relative;
  isolation: isolate;
  background: var(--color-navy-dark);
  color: #fff;
}
.section--photo > * { position: relative; z-index: 2; }
.section--photo::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: var(--bg-pos, center);
}
.section--photo::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: var(--bg-overlay, linear-gradient(160deg, rgba(11,22,40,0.93) 0%, rgba(18,33,64,0.84) 100%));
}

/* Faint image behind a light section; dark body text stays readable */
.section--texture { position: relative; isolation: isolate; }
.section--texture > * { position: relative; z-index: 1; }
.section--texture::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: var(--bg-pos, center);
  opacity: var(--bg-opacity, 0.08);
  pointer-events: none;
}

/* Shared page-hero photo layers (for heroes that don't define their own inline) */
.page-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: var(--bg-pos, center);
  opacity: var(--bg-opacity, 0.55);
}
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 0;
  background: var(--bg-overlay, linear-gradient(105deg, rgba(11,22,40,0.92) 0%, rgba(18,33,64,0.65) 55%, rgba(18,33,64,0.35) 100%));
}

/* === DIVIDER === */
.divider {
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-navy));
  border: none;
}

/* === CARDS === */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;  /* cards are often anchors */
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(var(--lift)); }

.card-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
}

.card-body { padding: var(--space-6); }
.card-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary-text);
  margin-bottom: var(--space-2);
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-2);
  text-decoration: none;
  display: block;
}
[data-theme='dark'] .card-title { color: var(--color-text); }
.card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-4);
}
.card-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary-text);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-1);
}
.card-link:hover { color: var(--color-primary-hover); }
.card-link svg { transition: transform 200ms; }
.card-link:hover svg { transform: translateX(3px); }

/* === SERVICE CARD (icon + text) === */
.service-card {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(var(--lift)); border-color: var(--color-primary); }
.service-card-icon {
  width: 52px; height: 52px;
  background: var(--color-primary-bg);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--color-primary);
}
[data-theme='dark'] .service-card-icon { background: var(--color-primary-bg); }
.service-card-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}
[data-theme='dark'] .service-card-title { color: var(--color-text); }
.service-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}
.service-card-link {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-primary-text); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--space-1);
}
.service-card-link:hover { color: var(--color-primary-hover); }
.service-card-list { display: grid; gap: var(--space-1); margin-bottom: var(--space-5); }
.service-card-list li {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--text-sm); line-height: 1.5;
  color: var(--color-text);
}
.service-card-list li::before {
  content: '';
  position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
}

/* === TEAM CARD === */
.team-card {
  background: var(--surface-on-navy);
  border: 1px solid var(--border-on-navy);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-8);
  text-align: center;
  transition: background var(--transition-interactive);
}
.team-card:hover { background: rgba(255,255,255,0.11); }
.team-avatar {
  width: 64px; height: 64px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.15);
  margin-inline: auto;
  margin-bottom: var(--space-4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
}
.team-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-1);
  letter-spacing: 0.02em;
}
.team-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-navy-muted);
}

/* === STATS BAR === */
.stats-bar {
  background: var(--color-navy);
  padding-block: var(--space-12);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* predictable, balanced row */
  gap: 0;
}
.stat-item {
  text-align: center;
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--hairline-on-navy);
}
.stat-item:nth-child(4n) { border-right: none; }
.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-stat);          /* data scale — not the headline scale */
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums; /* shared baseline + equal digit widths */
  margin-bottom: var(--space-2);
}
.stat-unit {                            /* the ONE consistent accent role */
  font-size: 0.5em;
  font-weight: 600;
  vertical-align: 0.35em;
  margin-left: 0.06em;
  color: var(--color-primary);
}
.stat-number span { color: inherit; }   /* retire the overloaded generic accent */
.stat-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--on-navy);
}

/* === SERVICES STRIP === */
.services-strip {
  background: var(--color-navy);
  padding-block: var(--space-6);               /* harmonized with stats band */
  border-block: 1px solid var(--hairline-on-navy);
  overflow: hidden;
}
.services-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);           /* even row + column rhythm */
}
.strip-item {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-navy-strong);
}
/* Separator is tied to the item, so it can never orphan to a line start/end on wrap */
.strip-item + .strip-item::before {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--color-primary);
  margin-right: var(--space-6);
  flex-shrink: 0;
}
/* Legacy standalone dots (if any remain) collapse to nothing */
.strip-dot { display: none; }

/* === TESTIMONIAL === */
.testimonial {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: var(--space-8) var(--space-10);
  position: relative;
  box-shadow: var(--shadow-md);
}
.testimonial::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.8;
  color: var(--color-primary);
  opacity: 0.15;
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
  pointer-events: none;
}
.testimonial-text {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--color-text);
  font-style: italic;
  margin-bottom: var(--space-6);
  position: relative;
  z-index: 1;
}
.testimonial-author { display: flex; align-items: center; gap: var(--space-4); }
.testimonial-avatar {
  width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--color-navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff; font-size: var(--text-base);
  flex-shrink: 0;
}
.testimonial-name {
  font-weight: 700; font-size: var(--text-sm);
  color: var(--color-navy);
}
[data-theme='dark'] .testimonial-name { color: var(--color-text); }
.testimonial-role {
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary-text);
}

/* === BADGE / CERTIFICATION === */
.cert-badge {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4) var(--space-6);
  box-shadow: var(--shadow-sm);
}
.cert-badge img { width: 40px; height: 40px; object-fit: contain; }
.cert-badge-text { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.05em; line-height: 1.4; }
.cert-badge-text strong { display: block; color: var(--color-navy); font-size: var(--text-sm); }
[data-theme='dark'] .cert-badge-text strong { color: var(--color-text); }

/* === FORM === */
.form-group { display: flex; flex-direction: column; gap: var(--space-2); }
.form-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.form-input, .form-textarea {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-muted); opacity: 0.85; }

/* Form card — gives forms equal visual weight to adjacent panels (jobs/contact) */
.form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  box-shadow: var(--shadow-sm);
}
/* Contact page: intro line and the "Call us" row above the form */
.contact-intro { margin-top: var(--space-3); max-width: var(--measure); font-size: var(--text-base); line-height: var(--leading-prose); color: var(--color-text); }
.contact-call {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-base); font-weight: 600;
  color: var(--color-navy);
}
.contact-call svg { flex-shrink: 0; color: var(--color-primary); }
.contact-call a { white-space: nowrap; }
/* Paired fields (e.g. Email + Phone) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
/* Required-field marker */
.form-label[data-required]::after {
  content: ' *';
  color: var(--color-primary-text);
}
.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 0.15);
}
.form-textarea { resize: vertical; min-height: 140px; }

/* === PAGE HERO (inner pages) === */
.page-hero {
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 100%);
  padding-block: var(--section-pad);
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.page-hero-content { position: relative; z-index: 1; }
.page-hero-label {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--on-navy-strong); margin-bottom: var(--space-3);  /* white text + crimson rule: crimson text is 2.6:1 on navy */
}
.page-hero-label::before { content: ''; width: 28px; height: 2px; background: var(--color-primary); flex-shrink: 0; }
.page-hero-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: #fff;
  line-height: var(--leading-display);
  letter-spacing: -0.015em;
}
.page-hero-sub {
  font-size: var(--text-lg);
  color: var(--on-navy);
  line-height: var(--leading-prose);
  margin-top: var(--space-4);
  max-width: 52ch;
}

/* === CTA BANNER === */
.cta-banner {
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 60%, var(--color-navy-light) 100%);
  position: relative; overflow: hidden;
  padding-block: var(--section-pad);
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cta-banner-inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-8); flex-wrap: wrap;
}
.cta-banner-text { flex: 1 1 400px; }
.cta-banner-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl); font-weight: 700;
  color: #fff; line-height: var(--leading-heading);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
.cta-banner-sub {
  font-size: var(--text-lg);
  color: var(--on-navy);
  line-height: var(--leading-prose);
  margin-bottom: var(--space-6);
}
/* In-text links on the navy band (e.g. "or call (530) 682-7679"): white, with the crimson-tint underline */
.cta-banner-sub a {
  color: #fff; font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--color-primary-on-dark);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.cta-banner-sub a:hover { text-decoration-color: #fff; text-decoration-thickness: 2px; }
.cta-banner-accent {
  flex-shrink: 0;
  width: 4px; height: 80px;
  background: var(--color-primary);
  border-radius: 2px;
  align-self: center;
}

/* === FOOTER === */
.site-footer {
  background: var(--color-navy-dark);
  color: var(--on-navy);
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-10);
}
.footer-brand-desc {
  font-size: var(--text-sm); line-height: var(--leading-prose);
  color: var(--on-navy-muted);
  margin-top: var(--space-4); max-width: 32ch;
}
.footer-heading {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--on-navy-muted); margin-bottom: var(--space-4);
}
.footer-links { display: flex; flex-direction: column; gap: var(--space-2); list-style: none; }
.footer-links a {
  font-size: var(--text-sm); color: var(--on-navy);
  text-decoration: none;
}
.footer-links a:hover { color: #fff; }
.footer-links .nav-soon { font-size: var(--text-sm); color: var(--on-navy-muted); }
.footer-links a[download] {
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.footer-links a[download]:hover { color: #e8374f; }
.footer-bottom {
  border-top: 1px solid var(--hairline-on-navy);
  margin-top: var(--space-10); padding-top: var(--space-6);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
}
.footer-copy { font-size: var(--text-xs); color: var(--on-navy-muted); }
.footer-powered { font-size: var(--text-xs); color: var(--on-navy-muted); }
.footer-powered a { color: var(--on-navy); text-decoration: none; }
.footer-powered a:hover { color: #fff; }
/* Crawlable fallback footer: server.js puts this plain link list inside <div id="site-footer">, and
   renderFooter() replaces it with the full footer. Styled so it still reads as a footer if the script fails. */
.footer-fallback {
  background: var(--color-navy-dark);
  color: var(--on-navy);
  padding: var(--space-10) var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.footer-fallback p,
.footer-fallback ul { max-width: var(--content-wide); margin-inline: auto; }
.footer-fallback p { margin-bottom: var(--space-4); }
.footer-fallback strong { color: var(--on-navy-strong); }
.footer-fallback ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding: 0; }
.footer-fallback a { color: var(--on-navy-strong); text-underline-offset: 3px; }
.footer-fallback a:hover { color: #fff; }
.footer-fallback :focus-visible { outline-color: #fff; }

/* === DVBE BADGE strip === */
.dvbe-strip {
  background: var(--color-primary);
  padding-block: var(--space-3);
  text-align: center;
}
.dvbe-strip-text {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}

/* === SPECIALTIES LIST === */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--space-3);
}
.spec-item {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-control);
  border-left: 3px solid var(--color-primary);
}
.spec-icon { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.spec-text { font-size: var(--text-sm); color: var(--color-text); font-weight: 500; }

/* === SERVICE INTRO (overview text + supporting image) === */
.service-intro {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(var(--space-6), 4vw, var(--space-10));
  align-items: center;
  margin-bottom: var(--space-10);
}
.service-intro-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
  .service-intro { grid-template-columns: 1fr; gap: var(--space-6); }
  .service-intro-img { aspect-ratio: 16 / 9; }
}

/* About intro: heading + body copy beside a tall supporting image */
.about-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  align-items: center;
}
.about-intro-img {
  width: 100%; height: 100%;
  min-height: 340px; max-height: 480px;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
@media (max-width: 768px) {
  .about-intro { grid-template-columns: 1fr; gap: var(--space-6); }
  .about-intro-img { min-height: 0; max-height: none; aspect-ratio: 16 / 9; }
}

/* === CAPABILITY / CLASSIFICATION CODES === */
.code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: var(--space-3);
}
.code-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: var(--space-4) var(--space-5);
}
.code-card--primary {
  border-left-color: var(--color-primary);
  background: var(--color-primary-bg);
}
.code-sys {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary-text);
}
.code-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); color: var(--color-navy);
  line-height: 1.1; margin: 2px 0;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.01em;
}
[data-theme='dark'] .code-num { color: var(--color-text); }
.code-label { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.45; }
.code-tag {
  position: absolute; top: var(--space-3); right: var(--space-4);
  font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-primary-text);
}

/* === SIDEBAR LAYOUT (service pages) === */
.sidebar-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-10);
  align-items: start;
}
.sidebar-nav {
  position: sticky; top: calc(var(--header-h) + var(--space-4));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sidebar-nav-header {
  background: var(--color-navy);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.sidebar-nav-links { padding: var(--space-2); list-style: none; }
.sidebar-nav-links li a {
  display: block; padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--color-text-muted); text-decoration: none;
  border-radius: var(--radius-md);
}
.sidebar-nav-links li a:hover { background: var(--color-surface-2); color: var(--color-navy); }
[data-theme='dark'] .sidebar-nav-links li a:hover { color: var(--color-text); }
.sidebar-nav-links li a.active {
  background: var(--color-primary-bg);
  color: var(--color-primary); font-weight: 600;
  border-left: 3px solid var(--color-primary);
}
[data-theme='dark'] .sidebar-nav-links li a.active { background: var(--color-primary-bg); }

/* === PROJECT CARD === */
.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.project-card:hover { box-shadow: var(--shadow-md); transform: translateY(var(--lift)); }
.project-card-img { width: 100%; aspect-ratio: 4/3; background: var(--color-navy); object-fit: cover; display: flex; align-items: center; justify-content: center; }
.project-card-body { padding: var(--space-5); }
.project-cat {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary-text); margin-bottom: var(--space-2);
}
.project-name {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; color: var(--color-navy);
}
[data-theme='dark'] .project-name { color: var(--color-text); }

/* === ROLE CARD === */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-4);
}
.role-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: flex-start; gap: var(--space-4);
}
.role-icon {
  width: 44px; height: 44px;
  background: var(--color-primary-bg);
  border-radius: var(--radius-control);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary); flex-shrink: 0;
}
.role-title {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 700; color: var(--color-navy); margin-bottom: var(--space-1);
}
[data-theme='dark'] .role-title { color: var(--color-text); }
.role-type { font-size: var(--text-xs); font-weight: 600; color: var(--color-primary-text); text-transform: uppercase; letter-spacing: var(--tracking-label); }

/* On-navy variant — role cards sitting inside a navy panel (jobs page) */
.role-card--on-navy {
  background: var(--surface-on-navy);
  border-color: var(--border-on-navy);
  box-shadow: none;
}
.role-card--on-navy .role-icon { background: rgba(196,18,48,0.18); color: #fff; }
.role-card--on-navy .role-title { color: #fff; }
.role-card--on-navy .role-type { color: var(--on-navy); }

/* === ARTICLE / LONG-FORM PROSE === */
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-sm); font-weight: 500; color: var(--on-navy);
}
.article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary); }

.prose { max-width: 70ch; }
.prose > * + * { margin-top: var(--space-5); }
.prose p, .prose li { font-size: var(--text-lg); line-height: var(--leading-prose); color: var(--color-text); }
.prose h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl); line-height: var(--leading-heading);
  color: var(--color-navy); margin-top: var(--space-10);
}
[data-theme='dark'] .prose h2 { color: var(--color-text); }
.prose h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-lg); color: var(--color-navy); margin-top: var(--space-8);
}
[data-theme='dark'] .prose h3 { color: var(--color-text); }
.prose ul { padding-left: var(--space-6); display: grid; gap: var(--space-2); list-style: disc; }
.prose li::marker { color: var(--color-primary); }
.prose a { color: var(--color-primary-text); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { font-weight: 700; }

/* "Back to" link */
.back-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-text);
  text-decoration: none; margin-bottom: var(--space-6);
}
.back-link:hover { color: var(--color-primary-hover); }

/* Sources block */
.article-sources { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-divider); max-width: 70ch; }
.article-sources-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-text-muted); }
.article-sources ul { list-style: none; padding: 0; display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.article-sources a { font-size: var(--text-sm); color: var(--color-primary-text); text-decoration: none; }
.article-sources a:hover { text-decoration: underline; }

/* Compact external-resource link list */
.resource-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--space-3); }
.resource-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-control); text-decoration: none;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text);
}
.resource-link:hover { border-color: var(--color-primary); color: var(--color-primary-text); box-shadow: var(--shadow-sm); }
.resource-link svg { color: var(--color-primary); flex-shrink: 0; }

/* Article card meta (newsroom grid) */
.card-meta {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.card-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-text-faint); }

/* Featured (lead) article card — spans full width, image left / text right */
.featured-card {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm);
  text-decoration: none; margin-bottom: var(--space-6);
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.featured-card:hover { box-shadow: var(--shadow-md); transform: translateY(var(--lift)); }
.featured-card img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.featured-card .card-body { padding: clamp(var(--space-6), 4vw, var(--space-10)); align-self: center; }
.featured-card .card-title { font-size: var(--text-xl); }
@media (max-width: 768px) {
  .featured-card { grid-template-columns: 1fr; }
  .featured-card img { min-height: 0; aspect-ratio: 16/9; }
}

/* =========================================
   RESPONSIVE — standardized ladder: 1024 / 900 / 768 / 600 / 520
   Pages should re-key any local media queries onto these widths.
   ========================================= */

/* ≤1024px — collapse the service-page sidebar before its 240px rail eats tablet width */
@media (max-width: 1024px) {
  .sidebar-layout { grid-template-columns: 1fr; }
  .sidebar-nav { position: static; }
}

/* ≤900px — primary nav collapses to the hamburger; tablet grids reflow */
@media (max-width: 900px) {
  /* Hamburger on the LEFT, then the logo; the call icon and a compact contact button stay visible on the right */
  .nav-primary { display: none; }
  .mobile-nav:not([hidden]) { display: block; }
  .nav-right { gap: var(--space-2); }
  .nav-right .btn { padding: var(--space-2) var(--space-4); }
  .nav-inner { gap: var(--space-3); }
  .nav-hamburger { display: flex; }          /* first in the DOM, so tab order matches what you see */
  .nav-logo { margin-right: auto; }

  /* Footer: brand spans full width above 3 link columns */
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid > :first-child { grid-column: 1 / -1; }

  /* Stats: clean 2-up, row dividers only (no orphan vertical borders) */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid var(--hairline-on-navy); }
  .stat-item:nth-last-child(-n+2) { border-bottom: none; }
}

/* ≤768px — primary tablet breakpoint: single-column content, scrollable strip */
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }

  /* Services strip → one horizontally scrollable row instead of a ragged wrap */
  .services-strip-inner {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: var(--space-1);
  }
  .strip-item { scroll-snap-align: start; flex-shrink: 0; }
}

/* ≤560px — header: drop the long tagline, stack the wordmark */
@media (max-width: 560px) {
  .site-header .nav-logo { gap: var(--space-2); }
  .site-header .nav-logo img { width: 44px; height: 37px; }
  .site-header .nav-logo-text .brand-sub { display: none; }
  .site-header .nav-logo-text .brand-main { font-size: 0.8125rem; width: min-content; line-height: 1.05; }
}
@media (max-width: 400px) {
  .site-header .container { padding-inline: var(--space-4); }
  .mobile-nav-list { padding-inline: var(--space-4); }
  .nav-inner { gap: var(--space-2); }
  .nav-right .btn { padding: var(--space-2) 10px; }   /* 10px sides: room for the call icon at 360px */
}
@media (max-width: 359px) {
  .site-header .nav-logo-text { display: none; }
}

/* ≤600px — phones */
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > :first-child { grid-column: auto; }

  .cta-banner-inner { flex-direction: column; align-items: flex-start; }
  .cta-banner-accent { display: none; }

  .testimonial { padding: var(--space-6); }
}


/* =========================================================================
   === Service page template (2026) ===
   Service pages (pages/<slug>.html) and group hubs. Section order and class
   names are documented in TEMPLATE-GUIDE.md. Reuses the tokens above; no new
   fonts. Prefix: .svc-* (service page), .hub-* (hub-only pieces).
   Type rule: Playfair Display for H1, H2 and link-card titles only; every
   in-page H3 (cards, steps, rules, sub-blocks) is DM Sans 700.
   ========================================================================= */

/* Small text on navy: white. Crimson stays as a rule/accent (crimson text fails AA on navy). */
.cta-banner .section-label,
.section--navy .section-label,
.section--navy-dark .section-label,
.svc-section--navy .section-label,
.page-hero .section-label { color: var(--on-navy-strong); }

/* Focus ring on dark bands: crimson measures under 3:1 on navy; white passes */
.site-footer :focus-visible,
.section--navy :focus-visible,
.section--navy-dark :focus-visible,
.page-hero :focus-visible,
.svc-hero :focus-visible,
.svc-section--navy :focus-visible,
.cta-banner :focus-visible { outline-color: #fff; }

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }

/* ---- Breadcrumb (sits at the top of the hero) ---- */
.svc-breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center;
  row-gap: var(--space-1);
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.svc-breadcrumb li {
  display: inline-flex; align-items: center;
  max-width: none;
  color: var(--on-navy);
}
.svc-breadcrumb li:not(:last-child)::after {  /* chevron trails its crumb, so a wrapped line never starts with one */
  content: '';
  width: 6px; height: 6px;
  margin-inline: var(--space-3);
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.75;
}
.svc-breadcrumb a { color: var(--on-navy); text-decoration: none; text-underline-offset: 3px; }
.svc-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.svc-breadcrumb [aria-current='page'] { color: var(--on-navy-strong); font-weight: 600; }

/* ---- Hero ----
   Desktop (>900px): real <picture> behind the text; the navy overlay is dense (>=0.88) over the text
   column and fades to ~0.3 to its right, where the photo's subject should sit (make_images.py --zoom /
   --focus-x). --edge tracks the text column's right edge: container gutter + 40rem of text.
   Phones/tablets (<=900px): the photo is an unobstructed 16:9 band and the text sits on solid navy. */
.svc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(480px, 64vh, 660px);
  background: var(--color-navy-dark);
  color: #fff;
}
.svc-hero-media { position: absolute; inset: 0; z-index: -2; }
.svc-hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--hero-pos, 50% 35%);
}
.svc-hero::before {
  --edge: max(690px, calc(50% + 80px));
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,22,40,0.45) 0%, rgba(11,22,40,0) 22%),
    linear-gradient(90deg, rgba(11,22,40,0.93) 0%, rgba(11,22,40,0.88) var(--edge),
                    rgba(11,22,40,0.32) calc(var(--edge) + 300px), rgba(11,22,40,0.26) 100%);
}
.svc-hero > .container {
  flex: 1;
  display: flex; flex-direction: column;
  width: 100%;
  padding-block: var(--space-6) clamp(var(--space-12), 6vw, var(--space-16));
}
.svc-hero-content { margin-top: auto; padding-top: clamp(var(--space-12), 7vw, var(--space-16)); max-width: 40rem; }
.svc-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--on-navy-strong);
  margin-bottom: var(--space-4);
}
.svc-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--color-primary); }
.svc-hero-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-display);
  letter-spacing: -0.015em;
  color: #fff;
  overflow-wrap: break-word;
}
.svc-hero-sub {
  margin-top: var(--space-5);
  max-width: 52ch;
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem);
  line-height: var(--leading-prose);
  color: var(--on-navy-strong);
}
.svc-hero-actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-4) var(--space-8);
  margin-top: var(--space-8);
}
.svc-hero-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.45);
  text-underline-offset: 5px;
}
.svc-hero-link:hover { text-decoration-color: #fff; }
.svc-hero--hub { min-height: clamp(420px, 56vh, 580px); }

/* ---- Section shells: white / warm alternate; one navy band ("How it works") breaks the scroll ---- */
.svc-section { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); background: var(--color-surface); }
.svc-section--alt { background: var(--color-surface-warm); }
.svc-section--navy { background: var(--color-navy); color: var(--on-navy); }
.svc-section-head { max-width: 46rem; margin-bottom: clamp(var(--space-6), 4vw, var(--space-10)); }
.svc-section-head .section-label { margin-bottom: var(--space-2); }
.svc-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: -0.01em;
  color: var(--color-navy);
  margin-bottom: var(--space-4);
}
.svc-section--navy .svc-h2 { color: #fff; }
.svc-h3 {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-navy);
}
.svc-lead { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); line-height: var(--leading-prose); color: var(--color-text-muted); max-width: 60ch; }
.svc-section--navy .svc-lead { color: var(--on-navy); }
.svc-prose > * + * { margin-top: var(--space-4); }
.svc-prose p { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--color-text); }
.svc-prose a,
.svc-lead a,
.svc-inline-link { color: var(--color-primary-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.svc-prose a:hover,
.svc-lead a:hover,
.svc-inline-link:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
.svc-section--navy .svc-inline-link { color: #fff; text-decoration-color: var(--color-primary-on-dark); }
.svc-section--navy .svc-inline-link:hover { color: #fff; }
.svc-definition,
.svc-prose .svc-definition {                  /* the quotable definition: the one enlarged callout */
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.6;
  max-width: 58ch;
  color: var(--color-text);
  padding-left: var(--space-5);
  border-left: 3px solid var(--color-primary);
}
.svc-reviewed { margin-top: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); }

/* Split layout: heading/intro left, content right */
.svc-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}
.svc-split-head { position: sticky; top: calc(var(--header-h) + var(--space-8)); }
.svc-split-head .svc-section-head { margin-bottom: 0; }

/* ---- Intro + "At a glance" ---- */
.svc-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}
.svc-glance {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.svc-glance-title {
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  padding: var(--space-4) var(--space-6);
}
.svc-glance dl { padding: var(--space-1) var(--space-6); }
.svc-glance dl > div { padding-block: var(--space-4); border-bottom: 1px solid var(--color-divider); }
.svc-glance dl > div:last-child { border-bottom: none; }
.svc-glance dt {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary-text);
  margin-bottom: var(--space-1);
}
.svc-glance dd { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text); }
.svc-glance-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg);
  border-top: 1px solid var(--color-divider);
}
.svc-glance-foot p { max-width: none; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---- What's included: deliverable cards ---- */
.svc-included {                                /* 4 or 8 items: 4 / 2 / compact rows */
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.svc-included--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 3, 6 or 9 items */
.svc-included > li {
  max-width: none;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.svc-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  margin-bottom: var(--space-2);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-control);
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.svc-included h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--color-navy); }
.svc-included p { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }

/* ---- When you need it: a check list with dividers (no boxes) ---- */
.svc-uses { list-style: none; display: grid; }
.svc-uses > li {
  max-width: none;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.svc-uses > li:first-child { padding-top: 0; }
.svc-uses > li:last-child { border-bottom: none; padding-bottom: 0; }
.svc-uses svg { color: var(--color-primary); margin-top: 4px; }
.svc-uses strong { display: block; font-size: var(--text-base); font-weight: 700; color: var(--color-navy); margin-bottom: 2px; }
.svc-uses p { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }

/* ---- How it works: numbered timeline (on the navy band) ---- */
.svc-steps { list-style: none; counter-reset: svc-step; }
.svc-steps > li {
  counter-increment: svc-step;
  position: relative;
  max-width: none;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--space-5);
  padding-bottom: var(--space-8);
}
.svc-steps > li:last-child { padding-bottom: 0; }
.svc-steps > li::before {
  content: counter(svc-step);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.25rem; font-weight: 700;
  font-variant-numeric: lining-nums;
}
.svc-steps > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 23px; top: 56px; bottom: 8px;
  width: 2px;
  background: var(--color-border);
}
.svc-steps h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--color-navy); margin: 11px 0 var(--space-1); }
.svc-steps p { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--color-text-muted); }
.svc-section--navy .svc-steps > li::before { background: var(--color-primary); }
.svc-section--navy .svc-steps > li:not(:last-child)::after { background: var(--border-on-navy); }
.svc-section--navy .svc-steps h3 { color: #fff; }
.svc-section--navy .svc-steps p { color: var(--on-navy); }

/* ---- California requirements ---- */
.svc-rules {                                   /* 2, 4 or 6 rules: 2 / 1 columns */
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.svc-rules > li {
  max-width: none;
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-card);
}
.svc-section--alt .svc-rules > li { background: var(--color-surface); }
.svc-rule-ref {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary-bg);
  color: var(--color-primary-text);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.03em;
}
.svc-rules h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: var(--color-navy); margin-bottom: var(--space-2); }
.svc-rules p { font-size: var(--text-sm); line-height: 1.65; color: var(--color-text); }
.svc-rules p + p { margin-top: var(--space-2); }
.svc-rules a { color: var(--color-primary-text); text-decoration: underline; text-underline-offset: 2px; }
.svc-note {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-navy);
  background: var(--color-bg);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  font-size: var(--text-sm); line-height: 1.6; color: var(--color-text);
}
.svc-section--alt .svc-note { background: var(--color-surface); }
/* Sources: <details class="svc-sources" open>; components.js collapses it on phones */
.svc-sources {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.svc-sources summary {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 32px;
  list-style: none;
  cursor: pointer;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-muted);
}
.svc-sources summary::-webkit-details-marker { display: none; }
.svc-sources summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 200ms;
}
.svc-sources[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.svc-sources summary:hover { color: var(--color-text); }
.svc-sources ol {
  display: grid; gap: var(--space-2);
  margin-top: var(--space-3);
  padding-left: 1.25rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.svc-sources li { max-width: 80ch; }
.svc-sources li::marker { color: var(--color-text-muted); font-weight: 600; }
.svc-sources a { color: var(--color-primary-text); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* ---- Optional sub-services (e.g. Improvement Plans: Subdivision / Street frontage / ...) ---- */
.svc-jump { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.svc-jump li { max-width: none; }
.svc-jump a {
  display: inline-flex; align-items: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
}
.svc-jump a:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
.svc-subs {                                    /* 2 columns, 1 on small screens */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.svc-sub {
  padding: var(--space-6) var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy);
  border-radius: var(--radius-card);
}
.svc-sub:target { border-top-color: var(--color-primary); box-shadow: var(--shadow-md); }
.svc-sub h3 { margin-bottom: var(--space-3); }
.svc-sub p { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--color-text); }
.svc-sub ul { list-style: disc; display: grid; gap: var(--space-1); margin-top: var(--space-3); padding-left: 1.15rem; }
.svc-sub li { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.svc-sub li::marker { color: var(--color-primary); }

/* ---- FAQ (native <details>/<summary>) ---- */
.svc-faq { display: grid; gap: var(--space-3); max-width: 54rem; }
.svc-faq details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.svc-faq details[open] { box-shadow: var(--shadow-sm); }
.svc-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  list-style: none;
  cursor: pointer;
  font-size: var(--text-base); font-weight: 600; line-height: 1.45;
  color: var(--color-navy);
  border-radius: var(--radius-card);
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after {                     /* plus / minus */
  content: '';
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) center / 12px 2px no-repeat,
    linear-gradient(var(--color-primary), var(--color-primary)) center / 2px 12px no-repeat,
    var(--color-primary-bg);
}
.svc-faq details[open] summary::after {
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) center / 12px 2px no-repeat,
    var(--color-primary-bg);
}
.svc-faq summary:hover { color: var(--color-primary-text); }
.svc-faq summary:focus-visible { outline-offset: -2px; }
.svc-faq-answer { padding: 0 var(--space-6) var(--space-6); }
.svc-faq-answer p { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--color-text); }
/* "Further reading": 1-2 related newsroom articles under the FAQ */
.svc-reading { max-width: 54rem; margin-top: var(--space-8); }
.svc-reading-title {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-muted);
}
.svc-reading ul { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.svc-reading li { font-size: var(--text-sm); line-height: 1.5; }
.svc-reading a { color: var(--color-primary-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.svc-reading a:hover { color: var(--color-primary-hover); }

/* ---- Related services + hub cards: the title link is stretched over the whole card, so each card is
   one short link ("Boundary Surveying") instead of 25 words read out as the link name ---- */
.svc-related {                                 /* 4 cards (add --3 for 3): 4 / 2 / 1 columns */
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.svc-related--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-related > li { max-width: none; }
.svc-related-card,
.hub-card {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.svc-section--alt .svc-related-card { background: var(--color-surface); }
.svc-related-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(var(--lift)); }
.svc-related-tag {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary-text);
}
.svc-related-title { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--color-navy); }
.svc-related-title a,
.hub-card-title a { color: inherit; text-decoration: none; }
.svc-related-title a::after,
.hub-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
@supports selector(:has(a)) {                  /* ring the whole card, not just the title */
  .svc-related-title a:focus-visible,
  .hub-card-title a:focus-visible { outline: none; }
  .svc-related-card:has(a:focus-visible),
  .hub-card:has(a:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 3px; }
}
.svc-related-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.svc-related-more {
  margin-top: auto; padding-top: var(--space-2);
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-primary-text);
}
.svc-related-card:hover .svc-related-more svg,
.hub-card:hover .svc-related-more svg { transform: translateX(3px); }
.svc-related-more svg { transition: transform 200ms; }
.svc-hub-row { margin-top: var(--space-8); max-width: none; }
.svc-hub-link {
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-primary);
}
.svc-hub-link::after { content: '\00a0\2192'; content: '\00a0\2192' / ''; }   /* no-break space: the arrow never wraps alone */
.svc-hub-link:hover { color: var(--color-primary-text); }

/* ---- CTA band (extends .cta-banner) ---- */
.cta-banner-eyebrow {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--on-navy-strong);
  margin-bottom: var(--space-3);
}
.cta-banner-eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--color-primary); flex-shrink: 0; }
.cta-banner-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.cta-banner-text .cta-banner-sub { max-width: 52ch; }

/* ---- Hub variant (group landing pages): column count follows the number of services ---- */
.hub-grid {                                    /* 4 services: 2 x 2 */
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.hub-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 5-6 services: 3 + 2 / 3 + 3 */
.hub-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* 7-8 services: 4 + 3 / 4 + 4 */
.hub-card {
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6) var(--space-6);
  background: var(--color-surface);
  border-top: 3px solid var(--color-navy);
  box-shadow: var(--shadow-sm);
}
.hub-card:hover { border-top-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(var(--lift)); }
.hub-card-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--color-navy); }
.hub-card-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }

/* A lone last card in a 2-column grid spans the row instead of sitting half-empty */
.svc-rules > li:last-child:nth-child(odd),
.svc-subs > .svc-sub:last-child:nth-child(odd),
.hub-grid:not(.hub-grid--3):not(.hub-grid--4) > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---- Contact page: which service a quote request is for (inserted by components.js) ---- */
.quote-for {
  max-width: none;
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary-bg);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.quote-for strong { color: var(--color-navy); }

/* ---- Template responsive ladder (selectors repeat the specificity of the rules they override) ---- */
@media (max-width: 1140px) {
  .svc-included:not(.svc-included--3),
  .svc-related:not(.svc-related--3) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .svc-included--3,
  .hub-grid--3,
  .hub-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-included--3 > li:last-child:nth-child(odd),
  .hub-grid--3 > li:last-child:nth-child(odd),
  .hub-grid--4 > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .svc-intro,
  .svc-split { grid-template-columns: minmax(0, 1fr); }
  .svc-split-head { position: static; }

  /* Stacked hero: unobstructed photo band, then the text on solid navy (contrast guaranteed) */
  .svc-hero,
  .svc-hero--hub { min-height: 0; }
  .svc-hero::before { display: none; }
  .svc-hero-media { position: relative; inset: auto; z-index: auto; width: 100%; aspect-ratio: 16 / 9; max-height: 360px; }
  .svc-hero-media img { object-position: var(--hero-pos-mobile, 50% 25%); }
  .svc-hero-media::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 36%;
    background: linear-gradient(180deg, rgba(11,22,40,0) 0%, var(--color-navy-dark) 100%);
  }
  .svc-hero > .container { padding-block: var(--space-4) var(--space-12); }
  .svc-hero-content { max-width: none; padding-top: var(--space-6); }
}
@media (max-width: 700px) {
  .svc-rules,
  .svc-subs,
  .svc-related--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .hub-grid,
  .hub-grid--3,
  .hub-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .svc-hero-actions .btn { flex: 1 1 100%; }
  .svc-rules > li,
  .svc-related-card,
  .hub-card { padding: var(--space-5); }
  .svc-sub { padding: var(--space-5); }
  .svc-faq summary { padding: var(--space-4) var(--space-5); }
  .svc-faq-answer { padding: 0 var(--space-5) var(--space-5); }
  .svc-glance dl,
  .svc-glance-title,
  .svc-glance-foot { padding-inline: var(--space-5); }
  .svc-definition { padding-left: var(--space-4); }
  .cta-banner-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .svc-included:not(.svc-included--3),
  .svc-included--3,
  .svc-related:not(.svc-related--3) { grid-template-columns: minmax(0, 1fr); }
  /* "What's included" as compact rows: icon left, title + one line right, one shared card */
  .svc-included:not(.svc-included--3),
  .svc-included--3 {
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .svc-included > li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--space-4); row-gap: 2px;
    padding: var(--space-4);
    border: none; border-radius: 0; background: none;
  }
  .svc-included > li + li { border-top: 1px solid var(--color-divider); }
  .svc-included .svc-icon { grid-row: span 2; margin: 2px 0 0; }
}

/* ---- Windows High Contrast / forced colors: keep controls and state visible ---- */
@media (forced-colors: active) {
  .nav-hamburger span { forced-color-adjust: none; background: CanvasText; }
  .svc-faq summary::after {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
    background:
      linear-gradient(CanvasText, CanvasText) center / 12px 2px no-repeat,
      linear-gradient(CanvasText, CanvasText) center / 2px 12px no-repeat;
  }
  .svc-faq details[open] summary::after { background: linear-gradient(CanvasText, CanvasText) center / 12px 2px no-repeat; }
  .nav-links > li > a[aria-current]::after,
  .nav-dropdown-toggle.active::after,
  .svc-eyebrow::before,
  .cta-banner-eyebrow::before { forced-color-adjust: none; background: CanvasText; }
  .mega-list a[aria-current],
  .mobile-group-list a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
  .svc-steps > li::before { border: 2px solid CanvasText; }
  .btn { border: 2px solid ButtonText; }     /* filled buttons lose their fill in forced colors */
}

/* =========================================================================
   === Project case study (2026) ===
   Past Work hub (pages/projects.html) and project pages (pages/project-<slug>.html).
   Builds on the Service page template section above and reuses it wherever it fits:
   .svc-hero, .svc-breadcrumb, .svc-section(--alt|--navy), .svc-intro, .svc-glance, .svc-split,
   .svc-steps, .svc-rules, .svc-note, .svc-related, .svc-hub-row, .svc-reviewed, .cta-banner,
   .hub-card-title. This block adds only what case studies need:
     hero photo note + H1 kicker, glance figures and service chips, scope lists on the navy band,
     diagram figures with a numbered key + an SVG drawing vocabulary (.d-*), engineering points,
     sources band, procurement-code line, hub project cards.
   Prefix: .proj-* (drawing classes inside <svg class="proj-svg">: .d-*).
   Section order, markup and SVG rules: PROJECT-GUIDE.md in the build folder.
   ========================================================================= */

/* ---- Hero: kicker line inside the H1 (long official project names) + the visible photo note ---- */
.proj-hero-kicker {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.92rem + 0.45vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--on-navy-strong);
}
/* <div class="svc-hero-media proj-hero-media"><picture>...</picture><p class="proj-photo-note">...</p></div> */
.proj-hero-media picture { display: block; width: 100%; height: 100%; }
.proj-photo-note {
  position: absolute;
  right: var(--space-4); bottom: var(--space-4);
  z-index: 1;
  max-width: calc(100% - 2 * var(--space-4));
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(11,22,40,0.84);
  color: #fff;
  font-size: 0.75rem; font-weight: 500; line-height: 1.45;
  letter-spacing: 0.01em;
}

/* ---- Glance box: headline figures (owner-stated numbers only) + service chips ---- */
.proj-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-divider);
}
.proj-stat {
  max-width: none;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.proj-stat:nth-child(-n+2) { border-top: none; }
.proj-stat:nth-child(even) { border-left: 1px solid var(--color-divider); }
.proj-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.proj-stat-num {
  font-family: var(--font-display);
  font-size: var(--text-stat);
  font-weight: 700;
  line-height: 1.05;
  color: var(--color-navy);
  font-variant-numeric: lining-nums;
}
.proj-stat-label { font-size: var(--text-sm); line-height: 1.4; color: var(--color-text); }
.proj-stat-src {                               /* hub only: which project the figure belongs to */
  margin-top: 2px;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-primary-text);
}
.proj-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.proj-chips li { max-width: none; }
.proj-chip {
  display: inline-flex; align-items: center;
  min-height: 32px;
  padding: 4px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-xs); font-weight: 600; line-height: 1.3;
  color: var(--color-navy);
  text-decoration: none;
}
a.proj-chip { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
a.proj-chip:hover { border-color: var(--color-primary); color: var(--color-primary-text); text-decoration-color: currentColor; }
span.proj-chip { min-height: 28px; padding: 2px 10px; background: var(--color-surface-2); border-color: transparent; }

/* ---- Our scope (navy band, .svc-steps): the owner's scope items, then a generic "why" line ---- */
.proj-scope-list { list-style: none; display: grid; gap: var(--space-2); margin-top: var(--space-1); }
.proj-scope-list > li {
  position: relative;
  max-width: 62ch;
  padding-left: var(--space-5);
  font-size: var(--text-base); font-weight: 500; line-height: 1.55;
  color: var(--color-text);
}
.proj-scope-list > li::before {
  content: '';
  position: absolute; left: 1px; top: 0.72em;
  width: 9px; height: 2px;
  background: var(--color-primary);
}
.svc-steps .proj-scope-list + p { margin-top: var(--space-2); font-size: var(--text-sm); }
.svc-section--navy .proj-scope-list > li { color: var(--on-navy-strong); }
.svc-section--navy .proj-scope-list > li::before { background: var(--color-primary-on-dark); }

/* ---- Diagrams: the explanation (H3 + text) comes first in the source, then the figure, so heading navigation
   lands before the drawing. A single-panel figure sets its numbered key beside the drawing above 1000px;
   a 2-panel figure (.proj-diagram--wide) keeps each panel's key under its drawing. ---- */
.proj-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.proj-diagram + .proj-diagram { margin-top: clamp(var(--space-10), 6vw, var(--space-16)); }
.proj-diagram-text { max-width: 46rem; }
.proj-diagram-text > * + * { margin-top: var(--space-3); }
.proj-diagram-text p { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--color-text); }
.proj-figure {
  margin: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-sm);
}
.proj-figure-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.proj-figure-title { max-width: none; font-size: var(--text-sm); font-weight: 700; line-height: 1.4; color: var(--color-navy); }
.proj-figure-tag {                             /* "Illustrative diagram — not to scale" (required on every figure) */
  max-width: none;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-primary-text);
}
.proj-panels { display: grid; gap: var(--space-6); }
.proj-panels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
.proj-panel { min-width: 0; }
.proj-panel-label {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-navy);
}
.proj-panel-label--before { background: var(--color-primary-bg); color: var(--color-primary-text); }
.proj-panel-label--after { background: #E6F0E7; color: #1E5B23; }
.proj-svg { display: block; width: 100%; height: auto; max-width: 30rem; margin-inline: auto; }
.proj-panels--2 .proj-svg { max-width: none; }
/* Numbered key under a drawing: the numbers match the .d-badge numbers drawn in the SVG */
.proj-key { list-style: none; display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.proj-key > li {
  max-width: none;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  font-size: var(--text-sm); line-height: 1.5;
  color: var(--color-text);
}
.proj-key-num {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-size: 0.75rem; font-weight: 700;
  font-variant-numeric: lining-nums;
}
.proj-key-num--accent { background: var(--color-primary); }
.proj-figcaption {
  max-width: none;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  font-size: var(--text-xs); line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---- SVG drawing vocabulary. Draw each panel in a 400-unit-wide viewBox; text >= 17 units (about 12.2px
   on a 320px phone, where the figure sits 8px from the screen edge). Colours are scoped tokens so every project's diagrams match.
   Red (--d-accent) marks only the problem or risk; ordinary locations use .d-marker--ink. ---- */
.proj-svg {
  --d-ink: var(--color-navy);
  --d-ink-muted: var(--color-text-muted);
  --d-accent: var(--color-primary);
  --d-accent-ink: var(--color-primary-text);
  --d-ground: #EFE8DA;   --d-ground-line: #B6A98F;
  --d-fill: #DDCFB3;     --d-fill-line: #9A8866;
  --d-road: #B09A72;     --d-road-line: #7E6B4C;
  --d-water: #3E7BAE;    --d-water-soft: #D3E3F0;  --d-water-ink: #1D5687;
  --d-sediment: #A7A69F; --d-rock: #8D8F93;
  --d-pipe: #FFFFFF;     --d-pipe-line: #354052;
  --d-veg: #7F9B6C;      --d-snag: #6A5C48;
  --d-concrete: #C9CCD1; --d-paving: #6F747C;
}
.proj-svg text { font-family: var(--font-body); font-size: 18px; font-weight: 600; fill: var(--d-ink); }
.proj-svg .d-t-lg { font-size: 21px; font-weight: 700; }
.proj-svg .d-t-sm { font-size: 17px; font-weight: 500; fill: var(--d-ink-muted); }
.proj-svg .d-t-accent { fill: var(--d-accent-ink); }
.proj-svg .d-t-water { fill: var(--d-water-ink); }
.proj-svg .d-t-white { fill: #fff; }
.proj-svg .d-halo { paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.proj-svg .d-ground    { fill: var(--d-ground); stroke: var(--d-ground-line); stroke-width: 1.5; }
.proj-svg .d-contour   { fill: none; stroke: var(--d-ground-line); stroke-width: 1; opacity: 0.55; }
.proj-svg .d-fill      { fill: var(--d-fill); stroke: var(--d-fill-line); stroke-width: 1.5; stroke-linejoin: round; }
.proj-svg .d-road      { fill: var(--d-road); stroke: var(--d-road-line); stroke-width: 1.5; }
.proj-svg .d-road-line { fill: none; stroke: var(--d-road-line); stroke-width: 4; stroke-linecap: round; }
.proj-svg .d-paving    { fill: var(--d-paving); }
.proj-svg .d-concrete  { fill: var(--d-concrete); stroke: #8E939B; stroke-width: 1.5; }
.proj-svg .d-water     { fill: var(--d-water-soft); stroke: var(--d-water); stroke-width: 2; }
.proj-svg .d-water-fill { fill: var(--d-water-soft); }
.proj-svg .d-outline   { fill: none; stroke: var(--d-pipe-line); stroke-width: 2.5; stroke-linejoin: round; }
.proj-svg .d-stream    { fill: none; stroke: var(--d-water); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.proj-svg .d-waterline { fill: none; stroke: var(--d-water); stroke-width: 2.5; stroke-dasharray: 7 5; }
.proj-svg .d-sediment  { fill: var(--d-sediment); stroke: #77766F; stroke-width: 1; }
.proj-svg .d-rock      { fill: var(--d-rock); stroke: #5C5E63; stroke-width: 1; }
.proj-svg .d-log       { fill: #8A6A48; stroke: #5E4630; stroke-width: 1.5; }
.proj-svg .d-pipe      { fill: var(--d-pipe); stroke: var(--d-pipe-line); stroke-width: 2.5; stroke-linejoin: round; }
.proj-svg .d-post      { fill: none; stroke: var(--d-pipe-line); stroke-width: 5; stroke-linecap: round; }
.proj-svg .d-veg       { fill: var(--d-veg); }
.proj-svg .d-snag      { fill: none; stroke: var(--d-snag); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.proj-svg .d-leader    { fill: none; stroke: var(--d-ink-muted); stroke-width: 1.5; }
.proj-svg .d-dim       { fill: none; stroke: var(--d-ink); stroke-width: 1.5; }
.proj-svg .d-arrow     { fill: none; stroke: var(--d-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.proj-svg .d-arrow--water { stroke: var(--d-water); }
.proj-svg .d-arrowhead { fill: var(--d-accent); }
.proj-svg .d-arrowhead--water { fill: var(--d-water); }
.proj-svg .d-arrowhead--ink { fill: var(--d-ink); }
.proj-svg .d-eroded    { fill: #fff; stroke: var(--d-accent); stroke-width: 2; stroke-dasharray: 5 4; }
.proj-svg .d-marker    { fill: var(--d-accent); stroke: #fff; stroke-width: 2; }   /* red: the problem location */
.proj-svg .d-marker--ink { fill: var(--d-ink); }                                   /* navy: an ordinary location */
.proj-svg .d-ring      { fill: none; stroke: var(--d-ink); stroke-width: 2; }
.proj-svg .d-ring--accent { stroke: var(--d-accent); stroke-width: 2.5; }
.proj-svg .d-badge     { fill: var(--d-ink); stroke: #fff; stroke-width: 2; }
.proj-svg .d-badge--accent { fill: var(--d-accent); }
.proj-svg .d-badge-num { font-size: 17px; font-weight: 700; fill: #fff; text-anchor: middle; dominant-baseline: central; }

/* ---- Engineering considerations: short cards, framed generally (never claims about unverified specifics) ---- */
.proj-points {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.proj-points > li {
  max-width: none;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-navy);
  border-radius: var(--radius-card);
}
.proj-point-title { display: block; margin-bottom: var(--space-1); font-size: var(--text-base); font-weight: 700; line-height: 1.4; color: var(--color-navy); }
.proj-points p { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.proj-points > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.proj-subhead { margin-top: clamp(var(--space-10), 6vw, var(--space-16)); }

/* ---- Procurement-code line (under "Services used on this project") ---- */
.proj-codes {
  max-width: 90ch;
  margin-top: var(--space-6);
  font-size: var(--text-xs); line-height: 1.65;
  color: var(--color-text-muted);
}
.proj-codes strong { color: var(--color-text); font-weight: 700; }

/* ---- Sources band: a plain numbered list (project pages cite more sources than service pages) ---- */
.proj-refs { padding-block: clamp(var(--space-10), 5vw, var(--space-16)); }
.proj-refs-title {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-muted);
}
.proj-refs-lead { margin-top: var(--space-2); font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.proj-refs ol {
  display: grid; gap: var(--space-2);
  margin-top: var(--space-4);
  padding-left: 1.4rem;
  font-size: var(--text-sm); line-height: 1.55;
  color: var(--color-text-muted);
}
.proj-refs li { max-width: 92ch; }
.proj-refs li::marker { color: var(--color-text-muted); font-weight: 600; }
.proj-refs a { color: var(--color-primary-text); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.proj-refs a:hover { color: var(--color-primary-hover); }

/* ---- Hub: project cards (image, type, title, location/client, chips), grouped by kind of work ---- */
.proj-group + .proj-group { margin-top: clamp(var(--space-10), 5vw, var(--space-12)); }
.proj-group-title {
  display: flex; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-text-muted);
}
.proj-group-title::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.proj-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.proj-card {
  position: relative;
  max-width: none;
  height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.proj-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(var(--lift)); }
.proj-card-media {                             /* navy placeholder shows until the photo exists */
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-navy-dark) 0%, var(--color-navy) 100%);
}
.proj-card-media img { width: 100%; height: 100%; object-fit: cover; }
.proj-card-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); }
.proj-card-type {
  max-width: none;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-primary-text);
}
.proj-card-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--color-text-muted); }
.proj-card-meta { display: grid; gap: var(--space-1); font-size: var(--text-sm); line-height: 1.45; }
.proj-card-meta > div { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--space-3); }
.proj-card-meta dt {
  padding-top: 2px;
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.proj-card-meta dd { color: var(--color-text); }
.proj-card-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-2); }
.proj-card .svc-related-more { margin-top: 0; padding-top: 0; }
.proj-card:hover .svc-related-more svg { transform: translateX(3px); }
@supports selector(:has(a)) {
  .proj-card:has(a:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 3px; }
}
.proj-disclaimer {
  max-width: none;
  margin-top: var(--space-6);
  font-size: var(--text-xs); line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---- Case study responsive ladder (same widths as the service template) ---- */
@media (min-width: 1001px) {
  /* single-panel figure: drawing left, numbered key + caption centred beside it */
  .proj-diagram:not(.proj-diagram--wide) .proj-figure {
    display: grid;
    grid-template-columns: minmax(0, 32rem) minmax(16rem, 1fr);
    grid-template-rows: auto 1fr auto auto 1fr;
    grid-template-areas: "head head" "svg ." "svg key" "svg cap" "svg .";
    column-gap: clamp(var(--space-6), 3vw, var(--space-10));
  }
  .proj-diagram:not(.proj-diagram--wide) .proj-figure-head { grid-area: head; }
  .proj-diagram:not(.proj-diagram--wide) .proj-figure > .proj-svg { grid-area: svg; align-self: center; max-width: none; }
  .proj-diagram:not(.proj-diagram--wide) .proj-figure > .proj-key { grid-area: key; margin-top: 0; }
  .proj-diagram:not(.proj-diagram--wide) .proj-figure > .proj-figcaption { grid-area: cap; }
}
@media (max-width: 760px) {
  .proj-panels--2 { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .proj-points { grid-template-columns: minmax(0, 1fr); }
  .proj-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .proj-figure {                              /* bleed to 8px from the screen edge (container gutter is 24px) so drawings stay legible */
    margin-inline: calc(var(--space-2) - var(--space-6));
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-card);
  }
  .proj-figure-head,
  .proj-key,
  .proj-figcaption,
  .proj-panel-label { margin-inline: var(--space-1); }
  .proj-figure-head { margin-bottom: var(--space-3); }
  .proj-stat { padding: var(--space-4) var(--space-5); }
  .proj-points > li { padding: var(--space-4) var(--space-5); }
  .proj-card-body { padding: var(--space-5); }
  .proj-photo-note { right: var(--space-3); bottom: var(--space-3); font-size: 0.6875rem; }
}
@media (forced-colors: active) {
  .proj-scope-list > li::before,
  .proj-group-title::after { forced-color-adjust: none; background: CanvasText; }
  .proj-key-num,
  .proj-photo-note { border: 1px solid CanvasText; }
}