/* California Electrical Solutions — site stylesheet.
   Structure follows the Cal Body "teal" concept; colors come from the previous
   calelectricalsolutions.com brand: blue #0568CB, gold #DCA500, charcoal, light grey. */

/* ================= FONTS (self-hosted) ================= */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/sora-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/sora-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/sora-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/sora-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/manrope-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/manrope-latin-700-normal.woff2') format('woff2'); }

:root {
  --white: #ffffff;
  --off-white: #f5f6f8;
  --light-gray: #e9ebef;
  --mid-gray: #c3c8d1;
  --text-light: #5f6670;      /* 6.1:1 on white */
  --text-body: #363a42;
  --text-dark: #16181d;
  --blue: #0568cb;            /* brand blue: accents, large display text (5.5:1 on white) */
  --blue-deep: #0556a8;       /* button fills, small blue text on light backgrounds */
  --blue-bright: #6fb1ff;     /* small blue text on dark backgrounds */
  --blue-dark: #04478c;       /* button hover */
  --blue-light: rgba(5,104,203,0.08);
  --blue-glow: rgba(5,104,203,0.22);
  --gold: #dca500;            /* brand gold: primary CTA fill, accents on dark */
  --gold-deep: #b98a00;       /* gold hover */
  --gold-bright: #f2c230;     /* gold eyebrow text on dark (10:1) */
  --gold-text: #8a6700;       /* gold-ish small text on white (5.3:1) */
  --dark: #24262b;            /* charcoal bands */
  --dark-2: #17181b;          /* footer / deepest band */
  --nav-bg: rgba(255,255,255,0.95);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
  --radius: 8px;
  --radius-lg: 16px;
  --container: 1200px;
  --ff-head: 'Sora', 'Segoe UI', Roboto, sans-serif;
  --ff-body: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* motion system */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-pop: cubic-bezier(0.3, 1.75, 0.55, 1);   /* stronger overshoot for the blue-band cards */
  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 500ms;
  --dur-reveal: 700ms; --dur-draw: 900ms; --dur-vt: 220ms;
  --dur-ambient: 22s; --dur-hero: 26s; --dur-marquee: 75s;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; scrollbar-gutter: stable; }   /* opening the menu (overflow: hidden) doesn't shift the layout */   /* WCAG 2.2 2.4.11: anchors and focused fields land below the 76px sticky nav */
@media (max-width: 900px) { html { scroll-padding-top: 84px; scroll-padding-bottom: 88px; } }   /* 68px nav; 72px mobile CTA bar */
body {
  font-family: var(--ff-body);
  background: var(--white);
  color: var(--text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
h1, h2, h3 { overflow-wrap: break-word; hyphens: manual; }
.prose a, .contact-value a, .foot-col a { overflow-wrap: anywhere; }   /* long emails and URLs never force sideways scrolling */
img, picture { max-width: 100%; display: block; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.todo { color: var(--gold-text); font-weight: 600; }
.section-dark .todo, .section-dark-2 .todo, footer .todo { color: var(--gold-bright); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= NAV ================= */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--light-gray);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  max-width: var(--container); margin: 0 auto;
  height: 76px;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-dark); }
.logo-img { width: auto; height: 44px; }
.nav-inner .logo-img { height: 52px; }   /* header shows the logo alone, no wordmark */
.logo-text {
  font-family: var(--ff-head);
  font-weight: 700; font-size: 15px;
  letter-spacing: -0.01em; line-height: 1.1;
  color: var(--text-dark);
}
.logo-text span {
  display: block;
  font-size: 10px; font-weight: 600;
  color: var(--blue-deep);
  letter-spacing: 0.14em; text-transform: uppercase; margin-top: 2px;
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: var(--text-body); text-decoration: none; font-size: 15px; font-weight: 600; transition: color 0.2s; }
.nav-links a:hover { color: var(--blue-deep); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: transparent;
  border: 1.5px solid var(--mid-gray);
  border-radius: var(--radius);
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  padding: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text-dark); transition: transform 0.2s, opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-panel-actions { display: none; }
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; }
.section-dark :focus-visible, .section-dark-2 :focus-visible, footer :focus-visible, .hero :focus-visible, .mobile-cta :focus-visible { outline-color: var(--gold-bright); }
.nav-phone { color: var(--text-dark); text-decoration: none; font-size: 14px; font-weight: 700; padding: 10px 4px; }

/* ================= BUTTONS ================= */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; line-height: inherit;   /* <button> defaults to line-height: normal, which left form buttons at 43px */
  padding: 12px 24px;
  background: var(--blue-deep);
  color: var(--white) !important;
  text-decoration: none;
  font-family: var(--ff-body);
  font-weight: 700; font-size: 14px;
  border: none; border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-gold { background: var(--gold); color: var(--text-dark) !important; }
.btn-gold:hover { background: var(--gold-deep); color: var(--text-dark) !important; }
.btn-outline { background: transparent; color: var(--blue-deep) !important; border: 1.5px solid var(--blue-deep); box-shadow: none; }
.btn-outline:hover { background: var(--blue-deep); color: var(--white) !important; }
.btn-outline-light { color: var(--white) !important; border-color: rgba(255,255,255,0.35); }
.btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: var(--white); }
.btn-block { width: 100%; justify-content: center; }
.btn-white { background: var(--white); color: var(--blue-deep) !important; }
.btn-white:hover { background: var(--off-white); }
.btn-arrow::after { content: " →"; }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* ================= HERO ================= */
.hero {
  position: relative;
  background: linear-gradient(165deg, var(--dark-2) 0%, var(--dark) 60%, #0b2a4d 100%);
  color: var(--white);
  overflow: hidden;
  padding: 100px 0 110px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 50% at 70% 40%, var(--blue-glow), transparent 70%);
  pointer-events: none; z-index: 1;
}
.hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.hero-eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 24px; padding: 6px 14px;
  background: rgba(220,165,0,0.12);
  border-radius: 100px;
}
h1.hero-title {
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.08; letter-spacing: -0.025em;
  margin-bottom: 24px; color: var(--white);
}
h1.hero-title .accent { color: var(--gold); }
.hero-sub { font-size: 18px; color: #b6bcc6; line-height: 1.7; max-width: 560px; margin-bottom: 36px; }
.hero-sub strong { color: var(--white); }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: 36px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.hero-stat-num { font-family: var(--ff-head); font-weight: 800; font-size: 42px; color: var(--white); line-height: 1; letter-spacing: -0.03em; }
.hero-stat-num .unit { font-size: 16px; color: var(--gold-bright); margin-left: 4px; font-weight: 700; }
.hero-stat-label { font-size: 13px; color: #9099a5; margin-top: 8px; line-height: 1.4; }
.hero-stat-divider { grid-column: 1 / -1; height: 1px; background: rgba(255,255,255,0.08); }
/* Home hero photo: a real <picture> layer (eager, high priority) so it can pan slowly; gradients sit on ::after */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg picture, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left 62%; }  /* Bay Bridge tower under the headline, skyline behind the stats card */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left 62%; opacity: 0; pointer-events: none; }
.hero-bg.is-playing .hero-video { opacity: 1; }
.hero-bg.is-playing img { visibility: hidden; }   /* still frame hands off to the footage */
@media (max-width: 900px) { .hero-video { display: none; } }
/* Ultrawide: cap the footage near its native width (no heavy upscale), fade its edges into the hero
   background, and give the home hero more height so the crop shows more bridge and sky. */
@media (min-width: 2000px) {
  .hero-bg picture, .hero-video { left: 0; right: 0; width: min(100%, 2400px); margin-inline: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); }
}
@media (min-width: 2000px) and (min-height: 1000px) {
  .hero.has-bg:not(.page-hero) { display: flex; align-items: center; min-height: min(72vh, 1100px); }
  .hero.has-bg:not(.page-hero) > .container { width: 100%; }
}
.hero-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,16,20,0.86) 0%, rgba(14,16,20,0.72) 38%, rgba(5,40,80,0.42) 70%, rgba(5,40,80,0.30) 100%),
              linear-gradient(180deg, rgba(14,16,20,0.25) 0%, rgba(14,16,20,0) 30%, rgba(14,16,20,0.88) 100%); }
/* Gold circuit trace under the home eyebrow (decorative; draws once on load) */
.hero-circuit { display: block; width: min(100%, 360px); height: 24px; margin: -10px 0 18px; color: var(--gold); overflow: visible; }
.hero.has-bg .hero-card { background: rgba(23,24,27,0.5); border-color: rgba(255,255,255,0.12); }

/* ================= SECTION UTILITIES ================= */
.section { padding: 100px 0; }
.section-tight { padding: 64px 0; }
.section-alt { background: var(--off-white); }
.section-dark { background: var(--dark); color: var(--white); }
.section-dark-2 { background: var(--dark-2); color: var(--white); }
.section-blue { background: var(--blue-deep); color: var(--white); }
.section-label { font-size: 13px; font-weight: 700; color: var(--blue-deep); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.section-dark .section-label, .section-dark-2 .section-label, .section-blue .section-label { color: var(--gold-bright); }
/* Short gold rule with a node: the circuit motif as a section divider (draws on reveal) */
.circuit-rule { position: relative; width: 48px; height: 2px; margin: -6px 0 18px; }
.circuit-rule::before { content: ""; position: absolute; inset: 0; background: var(--gold); transform-origin: left; }
.circuit-rule::after { content: ""; position: absolute; right: -4px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(220,165,0,0.22); }
.section-header-centered .circuit-rule, .cta-simple .circuit-rule, .text-center .circuit-rule { margin-left: auto; margin-right: auto; }
.section-title {
  font-family: var(--ff-head);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.12; letter-spacing: -0.02em;
  color: var(--text-dark);
  margin-bottom: 20px;
}
.section-dark .section-title, .section-dark-2 .section-title, .section-blue .section-title { color: var(--white); }
.section-title .accent { color: var(--blue); }
.section-dark .section-title .accent, .section-dark-2 .section-title .accent, .section-blue .section-title .accent { color: var(--gold); }
.section-desc { font-size: 17px; color: var(--text-light); line-height: 1.7; max-width: 600px; }
.section-dark .section-desc, .section-dark-2 .section-desc { color: #b6bcc6; }
.section-blue .section-desc { color: rgba(255,255,255,0.85); }
.section-header { margin-bottom: 56px; }
.section-header-centered { text-align: center; }
.section-header-centered .section-desc { margin: 0 auto; }
.text-link { color: var(--blue-deep); font-weight: 700; text-decoration: none; }
/* WCAG 2.2 2.5.8: small inline links get a ≥24px-tall hit area. Vertical padding on an inline box grows the target without moving the text. */
.text-link, .foot-col a, .breadcrumb a, .contact-value a, .form-call a, .gal-body h3 a { padding-block: 4px; }
.section-header .text-link, .cap-card .text-link, .gal-body .text-link { padding-block: 2px; }   /* inline-block: keep spacing as before */
.text-link:hover { text-decoration: underline; }
.section-dark .text-link, .section-dark-2 .text-link { color: var(--gold-bright); }
.section-header .text-link { display: inline-block; margin-top: 10px; }
.section-foot { margin-top: 36px; text-align: center; }

/* ================= PROBLEM / SOLUTION BLOCKS ================= */
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ps-grid.reverse .ps-content { order: 2; }
.ps-grid.reverse .ps-visual { order: 1; }
.ps-content .section-desc { margin-bottom: 28px; }
.ps-features { list-style: none; margin-bottom: 32px; }
.ps-features li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--light-gray); font-size: 15px; color: var(--text-body); }
.section-dark .ps-features li { border-color: rgba(255,255,255,0.08); color: #d1d5db; }
.ps-features li:last-child { border-bottom: none; }
.ps-check { flex-shrink: 0; width: 22px; height: 22px; background: var(--blue-light); border-radius: 50%; display: grid; place-items: center; color: var(--blue-deep); font-size: 12px; font-weight: 700; margin-top: 1px; }
.section-dark .ps-check { background: rgba(220,165,0,0.15); color: var(--gold-bright); }
.ps-features li strong { font-weight: 700; color: var(--text-dark); display: block; }
.section-dark .ps-features li strong { color: var(--white); }
.ps-visual { position: relative; background: var(--light-gray); border-radius: var(--radius-lg); aspect-ratio: 4/3; overflow: hidden; display: grid; place-items: center; }
.ps-visual-caption { position: absolute; bottom: 20px; left: 24px; right: 24px; }
.ps-visual-caption .small { font-size: 11px; font-weight: 700; color: var(--blue-deep); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }
.ps-visual-caption .big { font-family: var(--ff-head); font-weight: 700; font-size: 15px; color: var(--text-dark); }
.ps-visual img, .gal-photo img, .gal-item img, .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-visual.has-photo, .gal-photo.has-photo { display: block; }
.ps-visual.has-photo::after, .gal-photo.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.62) 64%, rgba(0,0,0,0.9) 100%); }
.has-photo .ps-visual-caption, .gal-label { text-shadow: 0 1px 3px rgba(0,0,0,0.55); }   /* small gold labels stay legible on busy photos */
.ps-visual.has-photo .ps-visual-caption, .gal-photo.has-photo .ps-visual-caption { z-index: 2; }
.ps-visual.has-photo .ps-visual-caption .small, .gal-photo.has-photo .ps-visual-caption .small { color: var(--gold-bright); }
.ps-visual.has-photo .ps-visual-caption .big, .gal-photo.has-photo .ps-visual-caption .big { color: var(--white); }

/* ================= CARDS (pillars, services, values) ================= */
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.caps-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cap-card { background: var(--white); border: 1px solid var(--light-gray); border-radius: var(--radius-lg); padding: 32px 28px; display: flex; flex-direction: column; align-items: flex-start; }
.section-blue .cap-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.cap-icon-wrap { width: 52px; height: 52px; background: var(--blue-light); border-radius: var(--radius); display: grid; place-items: center; margin-bottom: 20px; color: var(--blue-deep); }
.section-blue .cap-icon-wrap { background: rgba(255,255,255,0.12); color: var(--white); }
.cap-icon-wrap svg { width: 26px; height: 26px; }
.section-blue .cap-icon-wrap { position: relative; }
.section-blue .cap-icon-wrap::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--gold); border-radius: 12px; opacity: 0; pointer-events: none; }
.cap-icon-wrap img { width: 28px; height: auto; }
.cap-card h3 { font-family: var(--ff-head); font-weight: 700; font-size: 18px; color: var(--text-dark); margin-bottom: 10px; }
.section-blue .cap-card h3 { color: var(--white); }
.cap-card p { font-size: 14px; color: var(--text-light); line-height: 1.6; }
.section-blue .cap-card p { color: rgba(255,255,255,0.85); }
.cap-card .text-link { display: inline-block; margin-top: auto; font-size: 14px; }
.cap-card p:has(+ .text-link) { margin-bottom: 12px; }   /* gap above a bottom-pinned link */
.section-blue .cap-card .text-link { color: var(--gold-bright); }

/* ================= SERVICE TILES (photo mosaic) ================= */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-lg); overflow: hidden; background: var(--dark); display: block; text-decoration: none; color: var(--white); grid-column: span 2; }
.tile:nth-child(1), .tile:nth-child(2) { grid-column: span 3; aspect-ratio: 16/9; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.78) 100%); transition: background 0.3s; }
.tile:hover::after { background: linear-gradient(180deg, rgba(5,86,168,0.25) 20%, rgba(5,86,168,0.9) 100%); }
.tile-label { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; }
.tile-label h3 { font-family: var(--ff-head); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin-bottom: 4px; }
.tile-label p { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.5; max-width: 420px; }
.tile-label .more { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--gold-bright); }

/* ================= STATS BAND ================= */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { padding: 28px 24px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); }
.trust-num { font-family: var(--ff-head); font-weight: 800; font-size: 46px; line-height: 1; letter-spacing: -0.03em; color: var(--white); }
.trust-num .unit { font-size: 22px; color: var(--gold-bright); margin-left: 2px; }
.stat-label { margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #9099a5; }

/* ================= GALLERY / PROJECTS ================= */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (min-width: 901px) {   /* 1 or 2 related projects: keep card size, centre the row under the centred heading */
  .gallery-grid.is-short { grid-template-columns: repeat(auto-fit, calc((100% - 40px) / 3)); justify-content: center; }
}
.gal-item { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--light-gray), #dde1e8); border-radius: var(--radius-lg); position: relative; overflow: hidden; display: block; text-decoration: none; color: var(--white); }
.gal-item .gal-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.78)); color: var(--white); z-index: 2; }
.gal-label .small { font-size: 11px; color: var(--gold-bright); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
.gal-label .big { font-family: var(--ff-head); font-weight: 700; font-size: 16px; line-height: 1.3; }
.gal-item img { transition: transform 0.5s ease; }
.gal-item:hover img { transform: scale(1.04); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { background: var(--off-white); border: 1px solid var(--light-gray); border-radius: 100px; padding: 11px 22px; font-size: 14px; font-weight: 600; color: var(--text-body); }
.filter-bar { position: sticky; top: 76px; z-index: 50; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--light-gray); padding: 14px 0; }
.filter-bar.is-stuck { box-shadow: 0 10px 30px -14px rgba(0,0,0,0.25); }
.filter-bar .chips { gap: 8px; }
.filter-bar .chip { cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; background: var(--off-white); }
.filter-bar .chip:hover { border-color: var(--blue-deep); color: var(--blue-deep); }
.filter-bar .chip[aria-pressed="true"] { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--white); }
.gallery-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gal-card { background: var(--white); border: 1px solid var(--light-gray); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.gal-card[hidden] { display: none; }
.gal-photo { aspect-ratio: 16 / 10; position: relative; background: linear-gradient(135deg, var(--light-gray), #dde1e8); }
.gal-photo .ps-visual-caption { bottom: 16px; left: 20px; right: 20px; }
.gal-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gal-body h3 { font-family: var(--ff-head); font-weight: 700; font-size: 17px; color: var(--text-dark); }
.gal-body h3 a { color: inherit; text-decoration: none; }
.gal-body h3 a:hover { color: var(--blue-deep); }
.gal-body p { font-size: 14px; color: var(--text-light); line-height: 1.6; }
.gal-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gal-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-deep); background: var(--blue-light); border-radius: 100px; padding: 4px 10px; }
.gal-body .text-link { margin-top: auto; font-size: 14px; }
.filter-empty { display: none; color: var(--text-light); padding: 32px 0; text-align: center; }
.filter-empty.show { display: block; }

/* Project photo grid + lightbox */
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.photo-grid button { position: relative; aspect-ratio: 4/3; border: none; padding: 0; background: var(--light-gray); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; }
.photo-grid button img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.photo-grid button:hover img { transform: scale(1.04); }
.photo-grid button:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 2px; }
.photo-grid button[hidden] { display: none; }
.photo-more-count { margin-top: 10px; font-size: 13px; color: var(--text-light); }
.lightbox { border: none; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; max-height: 100dvh; width: 100vw; height: 100vh; height: 100dvh; }
.lightbox::backdrop { background: rgba(10,11,13,0.94); }
.lightbox[open] { display: grid; place-items: center; }
html:has(.lightbox[open]) { overflow: hidden; }  /* page behind the viewer stays put */
.lb-figure { margin: 0; display: grid; grid-template-rows: 1fr auto; height: 100vh; height: 100dvh; width: 100vw; place-items: center; padding: 56px 72px 24px; }
.lb-figure img { max-width: 100%; max-height: calc(100vh - 120px); max-height: calc(100dvh - 120px); width: auto; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lb-caption { color: #b6bcc6; font-size: 14px; margin-top: 12px; text-align: center; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: var(--white); font-size: 22px; cursor: pointer; display: grid; place-items: center; }
.lb-btn:hover { background: rgba(255,255,255,0.18); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ================= CLIENT LOGOS ================= */
.logo-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.logo-cell { background: var(--white); border: 1px solid var(--light-gray); border-radius: var(--radius); height: 92px; display: grid; place-items: center; padding: 14px 20px; }
.logo-cell img { max-height: 56px; width: auto; max-width: 100%; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter 0.3s, opacity 0.3s; }
.logo-cell:hover img { filter: none; opacity: 1; }
/* Logo marquee: without JS or with reduced motion it is the same static grid as .logo-strip */
.logo-marquee .logo-track { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.logo-marquee .logo-track[aria-hidden="true"] { display: none; }
.marquee-controls { display: none; margin-top: 14px; text-align: right; }
.marquee-toggle { width: 44px; height: 44px; display: inline-grid; place-items: center; color: var(--blue-deep); background: var(--white); border: 1.5px solid var(--light-gray); border-radius: 50%; padding: 0; cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease; }
.marquee-toggle svg { width: 18px; height: 18px; }
.marquee-toggle svg[hidden] { display: none; }
.marquee-toggle:hover { border-color: var(--blue-deep); color: var(--blue-dark); transform: translateY(-1px); }
.marquee-toggle[aria-pressed="true"] { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--white); }

/* ================= PROSE / BLOCKS ================= */
.prose { max-width: 760px; }
.prose p { font-size: 17px; color: var(--text-body); line-height: 1.8; margin-bottom: 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-family: var(--ff-head); font-size: 24px; color: var(--text-dark); margin: 36px 0 12px; }
.prose h3 { font-family: var(--ff-head); font-size: 18px; color: var(--text-dark); margin: 28px 0 10px; }
.prose ul { padding-left: 22px; margin-bottom: 18px; color: var(--text-body); }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--blue-deep); font-weight: 600; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.values-grid .cap-card p { font-size: 15px; color: var(--text-body); }
.timeline { border-left: 2px solid var(--blue); padding-left: 28px; margin-left: 8px; }
.tl-item { margin-bottom: 28px; position: relative; }
.tl-item::before { content: ""; position: absolute; left: -36px; top: 8px; width: 14px; height: 14px; background: var(--blue); border-radius: 50%; border: 3px solid var(--white); box-shadow: 0 0 0 2px var(--blue); }
.tl-year { font-size: 12px; font-weight: 700; color: var(--blue-deep); letter-spacing: 0.08em; margin-bottom: 6px; text-transform: uppercase; }
.tl-text { font-family: var(--ff-head); font-weight: 600; font-size: 16px; color: var(--text-dark); line-height: 1.5; }
.facility-callout { background: var(--blue-deep); color: var(--white); border-radius: var(--radius-lg); padding: 40px 48px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-top: 48px; }
.facility-stat { font-family: var(--ff-head); font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -0.03em; }
.facility-stat .unit { font-size: 22px; opacity: 0.85; }
.facility-meta { text-align: right; }
.facility-meta .label { font-size: 12px; opacity: 0.85; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; font-weight: 700; }
.facility-meta .text { font-size: 16px; line-height: 1.4; max-width: 320px; opacity: 0.95; }

/* ================= CONTACT / FORMS (dark band) ================= */
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.cta-form { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 40px; }
.cta-form h3 { font-family: var(--ff-head); font-weight: 700; font-size: 20px; color: var(--white); margin-bottom: 24px; }
.contact-list { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.contact-item { display: flex; align-items: center; gap: 12px; }
.contact-icon { flex-shrink: 0; width: 40px; height: 40px; background: rgba(220,165,0,0.15); border-radius: var(--radius); display: grid; place-items: center; color: var(--gold-bright); }
.contact-icon svg { width: 20px; height: 20px; }
.contact-label { font-size: 13px; color: #9099a5; }
.contact-value, .contact-value a { color: var(--white); font-weight: 600; text-decoration: none; }
.contact-value a { font-size: 18px; }
.contact-value a.email { font-size: 16px; }
.contact-item > div:last-child { min-width: 0; }   /* lets the global overflow-wrap rule wrap long emails inside the flex row */
.contact-value.plain { font-size: 15px; }
.contact-panel { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 36px; }
.contact-panel .contact-list { margin-top: 0; }
.contact-panel h3 { font-family: var(--ff-head); font-weight: 700; font-size: 20px; color: var(--white); margin-bottom: 20px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: #b6bcc6; margin-bottom: 6px; }
.form-group label .req { color: var(--gold-bright); }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 12px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--ff-body); font-size: 16px;   /* 16px minimum: iOS Safari zooms the page on focus below it */
  transition: border-color 0.2s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #8a929b; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--gold-bright); outline: 2px solid var(--gold-bright); outline-offset: 1px; }
.form-group input[aria-invalid="true"], .form-group textarea[aria-invalid="true"] { border-color: #ff8a80; }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group select option { background: var(--dark-2); }
.form-group select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b6bcc6' stroke-width='1.75'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.form-group input[type="file"] { padding: 9px 12px; font-size: 14px; }
.form-group input[type="file"]::file-selector-button { background: rgba(255,255,255,0.12); color: var(--white); border: none; border-radius: 6px; padding: 6px 12px; margin-right: 12px; font: inherit; font-weight: 600; cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-error { font-size: 13px; color: #ffb4ab; margin-top: 6px; display: none; }
.form-group.has-error .form-error { display: block; }
.form-assurance { font-size: 13px; color: #9099a5; line-height: 1.5; margin: 4px 0 18px; }
.form-assurance a { color: var(--gold-bright); }
.form-note { font-size: 13px; color: #9099a5; line-height: 1.5; margin-top: 14px; }
.form-note a { color: var(--white); }
.form-status { font-size: 14px; color: var(--white); margin-top: 12px; min-height: 1.5em; }
.form-status:empty { opacity: 0; }
.form-call { margin-top: 20px; font-size: 14px; color: #b6bcc6; text-align: center; }
.form-call a { color: var(--white); font-weight: 700; text-decoration: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.form-success { display: none; text-align: center; padding: 24px 8px; }
.form-success .check { width: 64px; height: 64px; border-radius: 50%; background: rgba(220,165,0,0.15); color: var(--gold-bright); display: grid; place-items: center; margin: 0 auto 18px; font-size: 30px; }
.form-success h3 { margin-bottom: 10px; }
.form-success p { color: #b6bcc6; font-size: 15px; }
.cta-form.is-sent form { display: none; }
.cta-form.is-sent .form-success { display: block; }
.tip-block { margin-top: 32px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 24px; }
.tip-block h3 { font-family: var(--ff-head); font-weight: 700; font-size: 16px; color: var(--white); margin-bottom: 12px; }
.tip-block ol, .tip-block ul { padding-left: 20px; color: #d1d5db; font-size: 14px; line-height: 1.6; }
.tip-block li + li { margin-top: 6px; }
.tip-block p { margin-top: 12px; font-size: 13px; color: #9099a5; line-height: 1.5; }

/* ================= SIMPLE CTA BAND ================= */
.cta-simple { text-align: center; }
.cta-simple .section-desc { margin: 0 auto 28px; }
.cta-simple .hero-ctas { justify-content: center; }
.cta-address { font-size: 15px; color: #b6bcc6; margin-top: 20px; }
.cta-address a { color: var(--white); font-weight: 600; text-decoration: none; }

/* ================= FOOTER ================= */
footer { background: var(--dark-2); color: #9099a5; padding: 56px 0 32px; border-top: 1px solid rgba(255,255,255,0.06); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.foot-brand .logo { margin-bottom: 20px; }
.foot-brand .logo-img { background: var(--white); border-radius: 6px; padding: 4px 6px; height: 48px; }
.foot-brand .logo-text { color: var(--white); }
.foot-brand .logo-text span { color: var(--gold-bright); }
.foot-brand p { font-size: 14px; line-height: 1.65; max-width: 340px; color: #9099a5; }
.foot-license { margin-top: 14px; font-size: 13px; color: #d1d5db; }
/* Social profile links (footer + contact panel): icon-only, 44px targets, accessible name in .visually-hidden */
.social-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.social-link { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #d1d5db; transition: color 0.2s, background 0.2s; }
.social-link:hover { color: var(--gold-bright); background: rgba(255,255,255,0.1); }
.contact-value .social-list { margin-top: 6px; }
.contact-value a.social-link, .foot-col a.social-link { padding-block: 0; }
.foot-col h2 { font-size: 12px; color: var(--gold-bright); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; font-weight: 700; }
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 10px; }
.foot-col a, .foot-col p { color: #d1d5db; text-decoration: none; font-size: 14px; transition: color 0.2s; }
.foot-col a:hover { color: var(--gold-bright); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; display: flex; justify-content: space-between; font-size: 12px; color: #9099a5; flex-wrap: wrap; gap: 16px; }

/* ================= PAGE HERO (inner pages) ================= */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 200; background: var(--blue-deep); color: var(--white); padding: 10px 16px; border-radius: var(--radius); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 16px; outline: 2px solid var(--white); }
.nav-links a[aria-current="page"] { color: var(--blue-deep); }
.page-hero { padding: 80px 0 72px; }
.page-hero .hero-grid { grid-template-columns: 1.2fr 0.8fr; }
.page-hero-simple .hero-grid { grid-template-columns: 1fr; }
.page-hero h1.hero-title { font-size: clamp(32px, 4vw, 52px); }
.page-hero .hero-sub { max-width: 680px; }
.page-hero .ps-visual { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
.breadcrumb { font-size: 14px; font-weight: 600; color: #9099a5; margin-bottom: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.breadcrumb a { color: #d1d5db; text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-bright); }
.breadcrumb .sep { color: #6b7280; }
.breadcrumb [aria-current] { color: var(--gold-bright); }

/* Inner-page photo hero: dark on the left for the text, the photo fades in from the right */
.page-hero.has-bg { background: var(--dark-2); padding: 104px 0 100px; }
.page-hero.has-bg::before { background: radial-gradient(ellipse 50% 60% at 15% 30%, rgba(5,104,203,0.16), transparent 70%); }
.page-hero .hero-bg { left: auto; right: 0; width: 70%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.7) 14%, #000 32%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.7) 14%, #000 32%); }
/* Ultrawide: 70% of the window would blow the photo up 2x+; cap it near the file's size, keep it behind
   the content, and fade both edges into the hero background (same idea as the home hero) */
@media (min-width: 2000px) {
  .page-hero:not(.page-hero-center) .hero-bg { right: auto; left: calc(50% - 900px); width: 1800px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.7) 14%, #000 32%, #000 85%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,0.7) 14%, #000 32%, #000 85%, transparent 100%); }
  .page-hero-center .hero-bg { left: 50%; right: auto; width: 2000px; margin-left: -1000px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 15%, #000 85%, transparent 100%); }
}
.page-hero .hero-bg picture, .page-hero .hero-bg img { object-position: var(--hero-pos, center); }
.page-hero .hero-bg img { filter: contrast(1.05) saturate(1.08); }   /* photos at full brightness; the overlay below handles text contrast */
.page-hero .hero-bg::after { background:
  linear-gradient(90deg, rgba(23,24,27,0.7) 0%, rgba(23,24,27,0.45) 25%, rgba(23,24,27,0) 52%),
  linear-gradient(180deg, rgba(23,24,27,0.15) 0%, rgba(23,24,27,0) 30%, rgba(23,24,27,0.45) 100%); }
.page-hero.has-bg h1.hero-title { font-size: clamp(36px, 4.6vw, 60px); text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.page-hero.has-bg h1.hero-title .accent { display: block; }
.page-hero.has-bg .hero-sub { max-width: 560px; color: #c3c8d1; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.page-hero-center .hero-bg { width: 100%; -webkit-mask-image: none; mask-image: none; }
.page-hero-center .hero-bg::after { background: rgba(23,24,27,0.78); }

/* Quick links beside an inner hero (services) */
.hero-links { list-style: none; display: grid; gap: 12px; }
.hero-link { display: grid; grid-template-columns: 44px 1fr 20px; align-items: center; gap: 16px; padding: 16px 18px;
  background: rgba(23,24,27,0.62); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--white); text-decoration: none;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast); }
.hero-link:hover { border-color: rgba(242,194,48,0.6); background: rgba(23,24,27,0.8); transform: translateX(-4px); }
.hero-link-icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: rgba(220,165,0,0.14); color: var(--gold-bright); }
.hero-link-icon svg { width: 22px; height: 22px; }
.hero-link strong { display: block; font-family: var(--ff-head); font-size: 16px; font-weight: 700; }
.hero-link small { display: block; font-size: 13px; color: #9ca3af; margin-top: 2px; line-height: 1.4; }
.hero-link-arrow { color: #9ca3af; font-size: 18px; }

/* Narrow desktops: tighten the hero links to give the menu room */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero-links { gap: 8px; }
  .hero-link { grid-template-columns: 36px 1fr 16px; gap: 12px; padding: 11px 14px; }
  .hero-link-icon { width: 36px; height: 36px; }
  .hero-link small { font-size: 12.5px; }
}

/* 404 */
.err-code { font-family: var(--ff-head); font-weight: 800; font-size: clamp(80px, 14vw, 160px); line-height: 1; color: var(--gold); letter-spacing: -0.04em; }

/* ================= MOBILE CTA BAR ================= */
.mobile-cta { display: none; }

/* ================= TABLET / MOBILE ================= */
@media (max-width: 1024px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile:nth-child(1), .tile:nth-child(2) { grid-column: span 1; aspect-ratio: 4/3; }
  .tile:nth-child(5) { grid-column: span 2; aspect-ratio: 5/2; }   /* full-width last tile: keep it a banner, not a wall */
  .logo-strip, .logo-marquee .logo-track { grid-template-columns: repeat(4, 1fr); }
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
  .caps-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav-inner { padding: 0 20px; height: 68px; }
  .logo-img { height: 38px; }
  .nav-inner .logo-img { height: 44px; }
  .logo { padding: 8px 0; min-height: 44px; }
  .logo-text { display: none; }
  .nav-toggle { display: flex; }
  .nav-actions .nav-phone, .nav-actions .btn { display: none; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100vh - 68px); height: calc(100dvh - 68px);
    z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 24px 32px;
    background: var(--dark-2);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { display: flex; align-items: center; min-height: 56px; padding: 0 4px; font-size: 18px; color: var(--white); border-bottom: 1px solid rgba(255,255,255,0.08); }
  .nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { color: var(--gold-bright); }
  .nav-panel-actions { order: -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 0 20px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 8px; }
  .nav-links .nav-panel-actions a.nav-phone { display: inline-flex; color: var(--white); font-size: 17px; border-bottom: 0; min-height: 44px; }   /* not a list row: no divider */
  body.menu-open { overflow: hidden; }
  .filter-bar { top: 68px; }

  .hero { padding: 60px 0 72px; }
  .hero-bg img { object-position: 30% center; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(14,16,20,0.86) 0%, rgba(14,16,20,0.62) 45%, rgba(14,16,20,0.8) 75%, rgba(14,16,20,0.94) 100%); }
  .hero-grid, .ps-grid, .two-col, .cta-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ps-grid.reverse .ps-content { order: 1; }
  .ps-grid.reverse .ps-visual { order: 2; }
  .caps-grid, .caps-grid.cols-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .gallery-grid, .gallery-page-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .facility-callout { grid-template-columns: 1fr; text-align: left; }
  .facility-meta { text-align: left; }
  .cta-form { padding: 28px 24px; }
  .page-hero .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .page-hero.has-bg { padding: 64px 0 72px; }
  .hero-links { display: none; }   /* phones: the service tiles directly below cover the same links */
  .page-hero.has-bg .ps-visual { display: none; }   /* phones: the background already carries a photo; keep the hero short */
  .page-hero-center .hero-ctas { display: grid; grid-template-columns: 1fr 1fr; }   /* 404: even 2×2 buttons, no lone full-width row */
  .page-hero .hero-bg { width: 100%; -webkit-mask-image: none; mask-image: none; }
  .page-hero .hero-bg::after { background: linear-gradient(180deg, rgba(23,24,27,0.8) 0%, rgba(23,24,27,0.7) 45%, rgba(23,24,27,0.9) 100%); }
  .values-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .contact-panel { padding: 24px; }
  .filter-bar .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .filter-bar .chips::-webkit-scrollbar { display: none; }
  .filter-bar .chip { flex-shrink: 0; }
  .filter-bar .chips { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 40px; }  /* hints that the row scrolls */
  .logo-strip, .logo-marquee .logo-track { grid-template-columns: repeat(3, 1fr); }
  .lb-figure { padding: 64px 12px 20px; }
  .lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; }
  .lb-prev { left: 12px; } .lb-next { right: 12px; }

  .mobile-cta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(23,24,27,0.96);
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .mobile-cta .btn { justify-content: center; padding: 12px 10px; }
  body.has-mobile-cta { padding-bottom: 72px; }
  body.menu-open .mobile-cta { display: none; }
}
@media (max-width: 560px) {
  .container { padding: 0 16px; }
  .nav-inner { padding: 0 16px; }
  .section { padding: 72px 0; }
  .caps-grid, .caps-grid.cols-4, .gallery-grid, .gallery-page-grid, .foot-grid, .tiles { grid-template-columns: 1fr; }
  .tile:nth-child(5) { grid-column: span 1; aspect-ratio: 4/3; }
  .stats-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .stat { padding: 22px 16px; }
  .trust-num { font-size: clamp(30px, 9vw, 36px); }
  .hero-card { padding: 24px; }
  .hero-stats { gap: 20px; }
  .hero-stat-num { font-size: 34px; }
  .facility-callout { padding: 32px 24px; }
  .facility-stat { font-size: 44px; }
  .logo-strip, .logo-marquee .logo-track { grid-template-columns: repeat(2, 1fr); }
  .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .filter-bar { padding: 10px 0; }
}

/* ---- Polish: balanced headings, readable photo tiles, clearer tap targets ---- */
h1, h2, .hero-title, .section-title { text-wrap: balance; }
.tile::after { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.9) 100%); }
.tile-label h3, .tile-label p { text-shadow: 0 1px 10px rgba(0,0,0,0.6); }
.tile-label p { font-size: 14px; }
.form-call a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.directions-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
@media (max-width: 900px) {
  .cta-grid.form-first > .cta-form { order: -1; }     /* contact + apply: the form comes first on phones */
  .filter-bar + .section { padding-top: 32px; }
  .logo-img { height: 46px; }
  .mobile-cta .btn-outline-light { border-color: rgba(255,255,255,0.7); }
}
@media (max-width: 600px) {
  .hero-ctas > .btn { flex: 1 1 auto; justify-content: center; }   /* even, full-row buttons instead of ragged widths */
}

/* =====================================================================
   MOTION — opt-in by media query; only transform and opacity animate.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* ---- keyframes ---- */
  @keyframes ceRise      { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  /* Hero entrance keeps a hair of opacity so the headline counts as painted for LCP */
  @keyframes ceRiseHero  { from { opacity: 0.02; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes ceSlideHero { from { transform: translateY(18px); } to { transform: none; } }  /* images: transform only, so LCP is not delayed */
  @keyframes ceMenu      { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes ceDrift     { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-4%, 3%) scale(1.1); } }
  @keyframes ceKenBurns  { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-1.5%, 1%); } }
  @keyframes ceBridgePan { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.12) translate(-2.5%, -1.5%); } }  /* home hero: travel along the deck toward the city */
  @keyframes ceMarquee   { to { transform: translateX(-100%); } }
  @keyframes ceDrawX     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes ceDrawPath  { to { stroke-dashoffset: 0; } }  /* documented exception: the one-shot hero SVG trace */
  @keyframes cePop       { from { opacity: 0; transform: scale(0.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
  @keyframes ceGlowOnce  { from { opacity: 0.7; transform: scale(0.4); } to { opacity: 0; transform: scale(1.8); } }
  @keyframes ceFadeIn    { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ceFadeOut   { from { opacity: 1; } to { opacity: 0; } }
  @keyframes ceLbIn      { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
  @keyframes ceLbOut     { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.97); } }

  /* ---- scroll reveal: upward rise, directional for split layouts, staggered children ---- */
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .ps-grid > .ps-content.reveal { transform: translateX(-24px); }
  .js .ps-grid > .ps-visual.reveal { transform: translateX(24px); }
  .js .ps-grid.reverse > .ps-content.reveal { transform: translateX(24px); }
  .js .ps-grid.reverse > .ps-visual.reveal { transform: translateX(-24px); }
  .js .ps-grid > .ps-content.reveal.in, .js .ps-grid > .ps-visual.reveal.in { transform: none; }  /* beats the directional rules above */
  .js .ps-visual.reveal img { transform: scale(1.06); transition: transform 1.2s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
  .js .ps-visual.reveal.in img { transform: none; }
  .js .reveal .ps-features > li, .js .reveal .contact-list > .contact-item, .js .reveal.chips > .chip {
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--i-delay, 150ms); }  /* plain value (no calc) so the compositor can run it */
  .js .reveal.in .ps-features > li, .js .reveal.in .contact-list > .contact-item, .js .reveal.in.chips > .chip { opacity: 1; transform: none; }

  /* ---- circuit motif: section rule draws when its header reveals; hero trace draws on load ---- */
  .js .reveal .circuit-rule::before, .js .circuit-rule.reveal::before { transform: scaleX(0); }
  .js .reveal .circuit-rule::after, .js .circuit-rule.reveal::after { transform: scale(0); }
  .js .reveal.in .circuit-rule::before, .js .circuit-rule.reveal.in::before { animation: ceDrawX 0.6s var(--ease-out) 0.25s both; }
  .js .reveal.in .circuit-rule::after, .js .circuit-rule.reveal.in::after { animation: cePop 0.3s var(--ease-spring) 0.7s both; }
  .hero-circuit .trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ceDrawPath var(--dur-draw) var(--ease-out) 0.5s both; }
  .hero-circuit .node { transform-box: fill-box; transform-origin: center; animation: cePop 0.35s var(--ease-spring) 1.3s both; }
  .hero-circuit .glow { transform-box: fill-box; transform-origin: center; opacity: 0; animation: ceGlowOnce 0.9s ease-out 1.4s 1 both; }

  /* ---- nav, buttons, mobile bar, filters ---- */
  nav { transition: box-shadow var(--dur-base) ease; }
  nav.scrolled { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.45); }
  .nav-links.open { animation: ceMenu 0.25s ease-out both; }
  .nav-links a:not(.btn) { position: relative; }
  .nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease-out); }
  .nav-links a:not(.btn):hover::after, .nav-links a:not(.btn):focus-visible::after { transform: scaleX(1); }
  .btn-arrow::after { display: inline-block; transition: transform 0.2s ease; }
  .btn-arrow:hover::after { transform: translateX(3px); }
  .btn:active { transform: translateY(0) scale(0.98); }
  .mobile-cta { transition: transform var(--dur-base) ease; }
  .mobile-cta.is-hidden { transform: translateY(110%); }
  [data-category] { transition: opacity 0.25s ease, transform 0.25s ease; }
  [data-category].is-out { opacity: 0 !important; transform: scale(0.96) !important; transition-delay: 0ms !important; }
  .filter-bar { transition: box-shadow var(--dur-base) ease; }
  .filter-bar .chip { transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
  .trust-num, .hero-stat-num, .facility-stat { font-variant-numeric: tabular-nums; }

  /* ---- hover micro-interactions (pointer devices only; keyboard gets the same via focus-visible) ---- */
  @media (hover: hover) {
    .cap-card, .gal-card, .logo-cell { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
    .cap-card:hover, .gal-card:hover, .gal-card:focus-within, .logo-cell:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .tile img { transition: transform 0.6s var(--ease-out); }
    .tile:hover img, .tile:focus-visible img, .gal-item:focus-visible img, .photo-grid button:focus-visible img { transform: scale(1.04); }
    .tile-label .more { display: inline-block; transition: transform var(--dur-fast) ease; }
    .tile:hover .tile-label .more, .tile:focus-visible .tile-label .more { transform: translateX(3px); }
  }

  /* ---- "How we work" pillars: cards spring in with a wider stagger, icon tiles pop a beat later ---- */
  @keyframes ceRing { from { opacity: 1; transform: scale(0.75); } to { opacity: 0; transform: scale(1.6); } }
  .js .section-blue .cap-card.reveal { transform: translateY(40px) scale(0.9); transition-duration: 0.9s; transition-timing-function: var(--ease-pop), var(--ease-pop); }
  .js .section-blue .cap-card.reveal.in { transform: none; }
  .js .section-blue .cap-card.reveal .cap-icon-wrap { opacity: 0; transform: scale(0.2) rotate(-25deg); transition: opacity var(--dur-base) ease, transform 0.7s var(--ease-pop); transition-delay: calc(var(--reveal-delay, 0ms) + 260ms); }
  .js .section-blue .cap-card.reveal.in .cap-icon-wrap { opacity: 1; transform: none; }
  .js .section-blue .cap-card.reveal.in .cap-icon-wrap::after { animation: ceRing 0.8s ease-out both; animation-delay: calc(var(--reveal-delay, 0ms) + 700ms); }
  .js .section-blue .cap-card.reveal .h3, .js .section-blue .cap-card.reveal h3, .js .section-blue .cap-card.reveal p { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--reveal-delay, 0ms) + 320ms); }
  .js .section-blue .cap-card.reveal p { transition-delay: calc(var(--reveal-delay, 0ms) + 400ms); }
  .js .section-blue .cap-card.reveal.in h3, .js .section-blue .cap-card.reveal.in p { opacity: 1; transform: none; }
  @media (hover: hover) {
    .section-blue .cap-icon-wrap { transition: transform var(--dur-base) var(--ease-spring), background var(--dur-base) ease, color var(--dur-base) ease; }
    .section-blue .cap-card:hover .cap-icon-wrap { transform: translateY(-3px) rotate(-6deg) scale(1.08); background: var(--gold); color: var(--text-dark); }
    .section-blue .cap-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(0,0,0,0.5); }
  }

  /* ---- lightbox: fade/scale in, reverse out, cross-fade on photo swap ---- */
  .lightbox[open] { animation: ceFadeIn var(--dur-base) var(--ease-out) both; }
  .lightbox[open] .lb-figure img { animation: ceLbIn var(--dur-base) var(--ease-out) both; }
  .lightbox[open]::backdrop { animation: ceFadeIn var(--dur-base) ease both; }
  .lightbox.is-closing, .lightbox.is-closing .lb-figure img { animation: ceLbOut var(--dur-fast) ease-in both; }
  .lightbox.is-closing::backdrop { animation: ceFadeOut var(--dur-fast) ease-in both; }
  .lb-figure img { transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease; }
  .lightbox.is-swapping .lb-figure img { opacity: 0; transform: scale(0.98); }
  .lb-btn { transition: background var(--dur-fast) ease, transform var(--dur-fast) ease; }
  .lb-btn:active { transform: scale(0.94); }
  .lb-prev:active, .lb-next:active { transform: translateY(-50%) scale(0.94); }

  /* ---- forms ---- */
  .cta-form.is-sent .form-success { animation: ceRise var(--dur-slow) var(--ease-out) both; }
  .cta-form.is-sent .form-success .check { animation: cePop 0.6s var(--ease-spring) 0.15s both; }
  .form-status { transition: opacity var(--dur-base) ease; }

  /* ---- client logo marquee (only when the script runs; pauses on hover, focus, the button, and off-screen) ---- */
  .js .logo-marquee { display: flex; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .js .logo-marquee .logo-track { display: flex; gap: 16px; flex: none; padding-right: 16px; will-change: transform; animation: ceMarquee var(--dur-marquee) linear infinite; }
  .js .logo-marquee .logo-track[aria-hidden="true"] { display: flex; }
  .js .logo-marquee .logo-cell { width: 180px; flex: none; }
  .js .logo-marquee:hover .logo-track, .js .logo-marquee:focus-within .logo-track,
  .js .logo-marquee.is-paused .logo-track, .js .logo-marquee:not(.is-visible) .logo-track { animation-play-state: paused; }
  .js .marquee-controls { display: block; }

  /* ---- Ken Burns on hero photos: desktop only, runs only while in view ---- */
  @media (min-width: 901px) {
    .js .hero-bg img, .js .page-hero .ps-visual.has-photo img { transform-origin: 60% 40%; animation: ceKenBurns var(--dur-ambient) var(--ease-in-out) infinite alternate; animation-play-state: paused; }
    .js .hero-bg img { transform-origin: 28% 55%; animation-name: ceBridgePan; animation-duration: var(--dur-hero); }
    .js .page-hero .hero-bg img { transform-origin: 60% 40%; animation-name: ceKenBurns; animation-duration: var(--dur-ambient); }
    .js .hero-bg.is-visible img, .js .page-hero .ps-visual.has-photo.is-visible img { animation-play-state: running; }
  }

  /* ---- hero entrance ---- */
  .hero-video { transition: opacity 1.2s ease; }
  .hero::before { animation: ceDrift 14s ease-in-out infinite alternate; }
  .js .hero:not(.is-visible)::before { animation-play-state: paused; }   /* glow drifts only while the hero is on screen */
  .hero .hero-eyebrow, .hero h1, .hero .hero-sub, .hero .hero-ctas, .hero .breadcrumb, .hero-circuit { animation: ceRiseHero var(--dur-reveal) var(--ease-out) both; }
  .hero .hero-card, .hero .ps-visual { animation: ceSlideHero var(--dur-reveal) var(--ease-out) both; }
  .hero h1 { animation-delay: 0.08s; }
  .hero .hero-sub { animation-delay: 0.16s; }
  .hero .hero-ctas { animation-delay: 0.24s; }
  .hero .hero-card, .hero .ps-visual { animation-delay: 0.2s; }
  .hero .hero-stat-item { animation: ceRiseHero 0.6s var(--ease-out) both; }
  .hero .hero-stat-item:nth-child(1) { animation-delay: 0.35s; }
  .hero .hero-stat-item:nth-child(2) { animation-delay: 0.42s; }
  .hero .hero-stat-item:nth-child(4) { animation-delay: 0.49s; }
  .hero .hero-stat-item:nth-child(5) { animation-delay: 0.56s; }
  .vt .page-hero .ps-visual { animation: none; }  /* arriving via a page transition: the morph target must be in its final place */

  /* ---- cross-document view transitions (progressive enhancement) ---- */
  /* the @view-transition opt-in itself is inline in base.njk <head> (it must be known before this file applies) */
  nav { view-transition-name: site-nav; }
  .mobile-cta { view-transition-name: mobile-cta; }
  .gal-item, .gal-photo, .tile, .page-hero .ps-visual, .page-hero .hero-bg { view-transition-class: media; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-vt); animation-timing-function: var(--ease-out); }
  ::view-transition-group(.media) { animation-duration: 280ms; animation-timing-function: var(--ease-out); }
  ::view-transition-old(.media), ::view-transition-new(.media) { width: 100%; height: 100%; object-fit: cover; }

  @media (max-width: 900px) {
    .nav-links a:not(.btn)::after { display: none; }
    .js .ps-grid > .ps-content.reveal, .js .ps-grid > .ps-visual.reveal,
    .js .ps-grid.reverse > .ps-content.reveal, .js .ps-grid.reverse > .ps-visual.reveal { transform: translateY(18px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:hover { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .marquee-controls { display: none !important; }
  .cap-card:hover, .gal-card:hover, .logo-cell:hover { transform: none; }
  .hero-video { display: none !important; }
}
@media print {
  nav, .mobile-cta, footer .foot-grid, .hero::before, .hero-bg, .marquee-controls { display: none; }
  .hero { background: none; color: #000; padding: 20px 0; }
  h1.hero-title { color: #000; }
}
@media (prefers-reduced-motion: reduce) { .hero-link:hover { transform: none; } }