/* =========================================================================
   POWER PROFESSOR — "Live Current" design system
   Palette: near-black schematic ground · copper/amber trust accent ·
   electric cyan reserved for energy + live indicators.
   Type: Space Grotesk (display) · IBM Plex Sans (body) · IBM Plex Mono (spec)
   ========================================================================= */

:root {
  /* dark accent palette — reserved for "photo band" sections (hero,
     page-hero, cta-band) that stay intentionally dark over a photo so
     light-colored text stays legible. Rebound into scope below. */
  --ink-dark: #0a0d14;
  --ink-dark-2: #0f141f;
  --ink-dark-3: #151d2c;
  --ink-dark-4: #1c2637;
  --text-dark: #eef2f8;
  --muted-dark: #93a0b4;
  --muted-2-dark: #6a778c;
  --line-dark: rgba(255, 255, 255, .09);
  --line-2-dark: rgba(255, 255, 255, .05);
  --amber-text-dark: #326fee;

  /* tokens used throughout the site — default to the light theme, and
     rebound to the dark palette above inside .photo-band sections */
  --ink: #f7f8fb;
  --ink-2: #eef1f6;
  --ink-3: #e2e7ee;
  --ink-4: #d6dde7;
  --text: #12151d;
  --muted: #56607a;
  --muted-2: #7c869c;
  --line: rgba(15, 23, 42, .12);
  --line-2: rgba(15, 23, 42, .07);
  --amber-text: #326fee;

  --amber: #326fee;
  --amber-2: #326fee;
  --amber-deep: #e8941a;
  --current: #930b0b;
  --current-dim: #2a8aa3;
  --light-yellow: #ffd54a;
  --glow: 0 0 40px rgba(255, 176, 32, .18);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, .05), 0 16px 32px -18px rgba(15, 23, 42, .22);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1200px;
  --radius: 14px;
  --ease: linear;
  --topbar-h: 40px;
  --header-h: 72px;
}

/* Photo bands: hero, page-hero and the CTA band keep the original dark
   "Live Current" look (a photo behind a dark overlay, light text on top).
   Rebinding the same token names here means every existing component rule
   below — cards, eyebrows, borders — automatically renders correctly
   inside these sections without being duplicated. */
.hero, .page-hero.photo-band, .cta-band.photo-band, .photo-band {
  --ink: var(--ink-dark);
  --ink-2: var(--ink-dark-2);
  --ink-3: var(--ink-dark-3);
  --ink-4: var(--ink-dark-4);
  --text: var(--text-dark);
  --muted: var(--muted-dark);
  --muted-2: var(--muted-2-dark);
  --line: var(--line-dark);
  --line-2: var(--line-2-dark);
  --amber-text: var(--amber-text-dark);
  /* `color` is inherited as an already-resolved value, so rebinding the
     --text custom property above doesn't reach headings/text that never
     declare their own `color` (they'd keep inheriting body's light-theme
     ink). Setting it here, inside the same rebound scope, fixes that. */
  color: var(--text);
}

/* ---- reset ------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -.01em;
}

p {
  margin: 0 0 1em;
}

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wrap {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 200;
  background: var(--amber);
  color: #111;
  padding: 10px 16px;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--current);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- shared bits ------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber-text));
}

/* Homepage hero eyebrow only — bigger and white instead of the usual
   small accent-colored label used everywhere else. */
.hero .eyebrow {
  font-size: 1rem;
  color: #ffffff;
}

.btn-alert-icon {
  display: inline-flex;
  flex: none;
  color: #facc15;
}

.btn-alert-icon svg {
  width: 18px;
  height: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s linear;
  white-space: nowrap;
}

.btn-primary {
  background: var(--amber);
  color: #ffffff;
}

.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--amber-2);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}

.btn-ghost:hover {
  border-color: var(--amber-text);
  color: var(--amber-text);
  transform: translateY(-2px);
}

.btn svg {
  width: 36px;
  height: 36px;
}

/* ---- lightbulb hover animation for primary buttons ---------------------
   Every .btn-primary (see lib/components.js's primaryBtn()) carries a
   lightbulb icon that lights up — glow, filament, rays — on hover, while
   the button itself keeps its existing lift (.btn-primary:hover above). */
.btn-lightbulb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
}

.btn-lightbulb .btn-lightbulb__icon svg {
  width: 33px;
  height: 33px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-lightbulb__bulb {
  fill: transparent;
  transition: fill .3s linear, stroke .3s linear;
}

.btn-lightbulb__filament {
  opacity: .45;
  transition: opacity .3s linear, stroke .3s linear;
}

.btn-lightbulb__rays {
  opacity: 0;
  transform: scale(.55) rotate(-15deg);
  transform-origin: 16px 16px;
  transition: opacity .3s linear, transform .4s linear;
}

.btn-lightbulb:hover .btn-lightbulb__icon svg {
  filter:
    drop-shadow(0 0 3px var(--light-yellow))
    drop-shadow(0 0 8px var(--light-yellow))
    drop-shadow(0 0 14px rgb(255 213 74 / 65%));
}

.btn-lightbulb:hover .btn-lightbulb__bulb {
  fill: var(--light-yellow);
  stroke: var(--light-yellow);
}

.btn-lightbulb:hover .btn-lightbulb__filament {
  opacity: 1;
  stroke: var(--amber);
}

.btn-lightbulb:hover .btn-lightbulb__rays {
  opacity: 1;
  stroke: var(--light-yellow);
  transform: scale(1) rotate(0);
}

@media (prefers-reduced-motion: reduce) {
  .btn-lightbulb, .btn-lightbulb * {
    transition: none;
  }
}

/* ---- phone-call hover animation for "call us" icons ---------------------
   Any link/button showing the phone number (lib/components.js's
   phoneIcon()) carries this handset — it tilts and sound waves fade in on
   hover of the containing link/row, with a smooth, springy transition. */
.phone-icon-anim {
  overflow: visible;
}

.phone-icon-anim__handset {
  display: block;
  transform-origin: 68% 78%;
  transition: transform .4s linear;
}

.phone-icon-anim__wave {
  opacity: 0;
  transform: scale(.6);
  transform-origin: 15px 8px;
  transition: opacity .3s linear, transform .3s linear;
}

.phone-icon-anim__wave--2 {
  transition-delay: .06s;
}

.topbar a:hover .phone-icon-anim__handset,
.btn-ghost:hover .phone-icon-anim__handset,
.info-row:hover .phone-icon-anim__handset {
  transform: rotate(-16deg);
}

.topbar a:hover .phone-icon-anim__wave,
.btn-ghost:hover .phone-icon-anim__wave,
.info-row:hover .phone-icon-anim__wave {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .phone-icon-anim__handset, .phone-icon-anim__wave {
    transition: none;
  }
}

/* circuit-trace divider — the recurring schematic motif */
.trace {
  height: 1px;
  border: 0;
  margin: 0;
  background-image: linear-gradient(90deg, var(--line) 0 40%, transparent 40% 60%, var(--line) 60% 100%);
  position: relative;
}

/* ---- topbar (contact strip above the main nav) -------------------------
   Scrolls away normally with the page — only the header below it stays
   pinned once it reaches the top of the viewport. */
.topbar {
  position: relative;
  z-index: 2;
  height: var(--topbar-h);
  background: var(--ink-dark);
  border-bottom: 1px solid var(--line-dark);
}

.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 32px;
}

.topbar-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--muted-dark);
  transition: color .2s;
}

.topbar a:hover {
  color: var(--amber-text-dark);
}

.topbar svg {
  width: 28px;
  height: 28px;
  flex: none;
}

.topbar-social {
  display: flex;
  align-items: center;
  gap: 14px;
  position: absolute;
  right: 0;
}

.topbar-social a {
  color: var(--muted-dark);
}

.topbar-social svg {
  width: 18px;
  height: 18px;
}

.topbar-social a:hover {
  color: var(--amber-text-dark);
}

/* ---- header ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 700;
}

.brand-logo {
  display: block;
  height: 38px;
  width: auto;
}

.foot-brand .brand-logo {
  height: 44px;
}

.primary-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-list>li>a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  font-size: .93rem;
  font-weight: 500;
  color: var(--muted);
  border-radius: 8px;
  transition: color .2s, background .2s;
}

.mega-chevron {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform .2s;
}

.has-mega.open-sub .mega-chevron {
  transform: rotate(180deg);
}

.nav-list>li>a:hover, .nav-list>li>a[aria-current="page"] {
  color: var(--text);
  background: var(--ink-2);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  transition: border-color .2s, transform .2s;
}

.nav-cta:hover {
  border-color: var(--amber-text);
  transform: translateY(-1px);
}

.nav-cta-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
}

.nav-cta strong {
  font-family: var(--font-display);
  font-size: .98rem;
  color: var(--text);
  line-height: 1;
  display: block;
}


/* mega menu */
.has-mega {
  position: static;
}

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--ink-2);
  border-top: 1px solid var(--amber-text);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s linear;
  box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .22);
}

.has-mega:hover .mega, .has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 32px;
  padding: 34px 0 40px;
}

.mega-state {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.mega-state span {
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--amber-text);
  letter-spacing: .1em;
}

.mega-state:hover {
  color: var(--amber-text);
}

.mega-col ul {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mega-col ul a {
  color: var(--muted);
  font-size: .9rem;
  padding: 4px 0;
  transition: color .18s, padding-left .18s;
}

.mega-col ul a:hover {
  color: var(--amber-text);
  padding-left: 6px;
}

.nav-toggle {
  display: none;
}

/* ---- hero pulled up under the sticky header -----------------------------
   .hero (home) and .page-hero.photo-band (every interior page with a photo
   banner) are always the first thing in <main>, so it's safe to pull them
   up under the topbar+header (which stay sticky/in-flow, just visually
   overlapped) unconditionally — the compensating padding-top keeps the
   actual content where it was; only the background now extends up behind
   the header. Plain .page-hero (blog posts, legal pages, 404) has no photo
   or dark rebind behind it, so it's deliberately left out here — light nav
   text over a light section wouldn't be legible. .header-transparent
   (toggled on scroll by main.js) is removed once the page scrolls even
   slightly, so the header reverts to its normal solid, dark-on-light look
   automatically without needing a second "restore" ruleset. The topbar
   (email/phone/social row) is deliberately excluded here — it stays solid
   dark always, transparent header or not. */
.hero, .page-hero.photo-band {
  margin-top: calc(-1 * (var(--topbar-h) + var(--header-h)));
}

.hero {
  padding-top: calc(var(--topbar-h) + var(--header-h));
}

.page-hero.photo-band {
  padding-top: calc(84px + var(--topbar-h) + var(--header-h));
}

body.header-transparent .site-header {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
}

body.header-transparent .nav-list>li>a {
  color: rgba(255, 255, 255, .85);
}

body.header-transparent .nav-list>li>a:hover,
body.header-transparent .nav-list>li>a[aria-current="page"] {
  color: #ffffff;
  background: rgba(255, 255, 255, .14);
}

body.header-transparent .nav-cta {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
}

body.header-transparent .nav-cta-label {
  color: rgba(255, 255, 255, .75);
}

body.header-transparent .nav-cta strong {
  color: #ffffff;
}

body.header-transparent .nav-toggle {
  /* A light glass pill (like .nav-cta) reads fine over the hero's darkened
     left side, but the toggle sits at the far right, where the gradient
     overlay fades to fully transparent — a bright slide (e.g. the kitchen
     photo) can wash white bars out against a white-ish background. Use a
     dark pill instead so the white bars always have contrast, regardless
     of which hero slide is showing. */
  background: rgba(10, 13, 20, .45);
  border-color: rgba(255, 255, 255, .3);
}

body.header-transparent .nav-toggle span {
  background: #ffffff;
}

body.header-transparent .brand-logo {
  filter: brightness(0) invert(1);
}

.site-header, .nav-list>li>a, .nav-cta, .nav-toggle, .brand-logo {
  transition: background .25s, border-color .25s, color .25s, filter .25s;
}

/* ---- hero -------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 30%, transparent 30%, rgba(10, 13, 20, .55) 70%, var(--ink) 100%),
    linear-gradient(90deg, var(--ink) 0%, rgba(10, 13, 20, .5) 42%, transparent 70%);
}

/* ---- hero background slideshow -----------------------------------------
   Six photos cross-fade in a loop, each with its own Ken Burns move (zoom
   in/out, pan left/right) baked into its own @keyframes — one shared
   animation-duration (72s = 6 slides × 12s) keeps them all in lockstep
   with no JS. Each slide's fade-in window is timed to exactly overlap the
   previous slide's fade-out window (both span the same percentage range),
   so one photo dissolves directly into the next — opacity never bottoms
   out on both at once, so the shared dark background never shows through.
   Each slide starts pre-scaled (>1) so panning never reveals an edge.
   .hero itself has overflow:hidden, so movement never escapes the
   section. */
.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ink);
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity, transform;
}

.hero-slide:nth-child(1) { animation: hero-kb-0 72s linear infinite; }
.hero-slide:nth-child(2) { animation: hero-kb-1 72s linear infinite; }
.hero-slide:nth-child(3) { animation: hero-kb-2 72s linear infinite; }
.hero-slide:nth-child(4) { animation: hero-kb-3 72s linear infinite; }
.hero-slide:nth-child(5) { animation: hero-kb-4 72s linear infinite; }
.hero-slide:nth-child(6) { animation: hero-kb-5 72s linear infinite; }

/* slide 1 — zoom in (fade-in wraps around the loop boundary, overlapping slide 6's fade-out) */
@keyframes hero-kb-0 {
  0%      { opacity: 1; transform: scale(1.08); }
  13.889% { opacity: 1; transform: scale(1.15); }
  16.667% { opacity: 0; transform: scale(1.18); }
  97.222% { opacity: 0; transform: scale(1.05); }
  100%    { opacity: 1; transform: scale(1.08); }
}

/* slide 2 — pan right (fade-in overlaps slide 1's fade-out) */
@keyframes hero-kb-1 {
  0%, 13.889% { opacity: 0; transform: scale(1.15) translateX(-3%); }
  16.667%     { opacity: 1; transform: scale(1.15) translateX(-2%); }
  30.556%     { opacity: 1; transform: scale(1.15) translateX(2%); }
  33.333%, 100% { opacity: 0; transform: scale(1.15) translateX(3%); }
}

/* slide 3 — zoom out */
@keyframes hero-kb-2 {
  0%, 30.556% { opacity: 0; transform: scale(1.2); }
  33.333%     { opacity: 1; transform: scale(1.15); }
  47.222%     { opacity: 1; transform: scale(1.08); }
  50%, 100%   { opacity: 0; transform: scale(1.05); }
}

/* slide 4 — pan left */
@keyframes hero-kb-3 {
  0%, 47.222% { opacity: 0; transform: scale(1.15) translateX(3%); }
  50%         { opacity: 1; transform: scale(1.15) translateX(2%); }
  63.889%     { opacity: 1; transform: scale(1.15) translateX(-2%); }
  66.667%, 100% { opacity: 0; transform: scale(1.15) translateX(-3%); }
}

/* slide 5 — zoom in, slight vertical drift */
@keyframes hero-kb-4 {
  0%, 63.889% { opacity: 0; transform: scale(1.06) translateY(2%); }
  66.667%     { opacity: 1; transform: scale(1.1) translateY(1%); }
  80.556%     { opacity: 1; transform: scale(1.16) translateY(-0.5%); }
  83.333%, 100% { opacity: 0; transform: scale(1.2) translateY(-1%); }
}

/* slide 6 — pan right (fade-out overlaps slide 1's fade-in wrap) */
@keyframes hero-kb-5 {
  0%, 80.556% { opacity: 0; transform: scale(1.15) translateX(-2%); }
  83.333%     { opacity: 1; transform: scale(1.15) translateX(-1%); }
  97.222%     { opacity: 1; transform: scale(1.15) translateX(1%); }
  100%        { opacity: 0; transform: scale(1.15) translateX(2%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    animation: none !important;
    opacity: 0;
    transform: scale(1.1);
  }
  .hero-slide:first-child {
    opacity: 1;
  }
}

.hero-inner {
  position: relative;
  z-index: 2;
  /* Bottom padding keeps clear of the floating stats-band card (see
     .stats-band), which is centered on the seam via translateY(-50%) — so
     content needs room for roughly half the card's height plus a fixed
     clearance. The card gets much taller as .stats-grid drops to 2 then 1
     column, so this is tuned per breakpoint below rather than fixed. */
  padding: 80px 0 120px;
}

.hero-content {
  max-width: 680px;
}

/* h1 sizes to its own content instead of being force-fit into hero-content's
   680px box — otherwise a wide word (e.g. "Professionalism.") gets silently
   chopped off by the .line overflow:hidden used for the reveal animation. */
.hero h1 {
  width: max-content;
}

.hero h1 {
  font-size: clamp(2.9rem, 8vw, 6.2rem);
  font-weight: 700;
  letter-spacing: -.03em;
}

.hero h1 .line {
  display: block;
  overflow: hidden;
}

.hero h1 .line>span {
  display: block;
  transform: translateY(110%);
  animation: rise .9s var(--ease) forwards;
}

.hero h1 .line:nth-child(1)>span {
  animation-delay: .15s;
}

.hero h1 .line:nth-child(2)>span {
  animation-delay: .30s;
  color: var(--amber);
}

.hero h1 .line:nth-child(3)>span {
  animation-delay: .45s;
}

@keyframes rise {
  to {
    transform: translateY(0);
  }
}

/* ---- hero rotating headline ---------------------------------------------
   JS-only enhancement (main.js's initHeroRotator): replaces the static
   3-line h1 above with a single line that cycles through the same words,
   animating one character at a time. Left untouched — and the .line rise
   animation above keeps running — when JS is unavailable or the visitor
   prefers reduced motion, so [data-rotate-words] always has a real,
   readable fallback. */
.hero-rotate {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.hero-rotate-char {
  display: inline-block;
  white-space: pre;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
}

.hero-rotate-accent {
  color: var(--amber);
}

.hero-sub {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 560px;
  margin: 26px 0 34px;
  opacity: 0;
  animation: fade .8s linear .7s forwards;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  opacity: 0;
  animation: fade .8s linear .85s forwards;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-top: 24px;
  opacity: 0;
  animation: fade .8s linear .95s forwards;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--muted);
}

.trust-badge svg {
  width: 30px;
  height: 30px;
  color: var(--amber);
  flex: none;
}

@keyframes fade {
  to {
    opacity: 1;
  }
}

/* ---- headline stat strip — a glass panel docked at the bottom of the
   hero, exactly as wide as the main content column (it's a plain child of
   .hero-inner, which is itself the .wrap). ------------------------------- */
.hero-stats {
  position: relative;
  z-index: 2;
  margin-top: 52px;
  opacity: 0;
  animation: fade .9s linear 1.1s forwards;
}

.hero-stats.glass {
  padding: 10px 8px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(15, 20, 31, .32);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5);
}

/* ---- stats band (homepage) — the same hero-stats panel, but as its own
   section between the hero and Services instead of docked inside the
   photo hero. The section itself has zero height — it's just a marker
   sitting exactly at the seam where the hero ends and Services begins,
   no gap and no color strip of its own. The card is taken out of flow
   (position: absolute) and centered on that seam with translateY(-50%),
   so it's the only thing straddling the two sections. It rebinds the
   dark-theme tokens on itself (the same trick .section-dark uses) so it
   reads correctly regardless of which section it's overlapping. */
.stats-band {
  position: relative;
  z-index: 3;
}

.stats-band .wrap {
  position: relative;
}

.stats-band .hero-stats {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(-50%);
  margin-top: 0;
  /* electric-border's ambient glow layer blurs+upscales past the card's
     own box (fine when it's over a photo, like on service/city heroes) —
     here the card floats over an otherwise-empty section, so that bleed
     would wash out as a pale halo. Clipping it to the card's own rounded
     rect keeps the crisp border glow but drops the wash. */
  overflow: hidden;
  --ink: var(--ink-dark);
  --ink-2: var(--ink-dark-2);
  --ink-3: var(--ink-dark-3);
  --ink-4: var(--ink-dark-4);
  --text: var(--text-dark);
  --muted: var(--muted-dark);
  --muted-2: var(--muted-2-dark);
  --line: var(--line-dark);
  --line-2: var(--line-2-dark);
  --amber-text: var(--amber-text-dark);
}

.stats-band .hero-stats.glass {
  background: var(--ink-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--amber-text);
}

.stats-band .stat-icon {
  width: 92px;
  height: 92px;
}

.stats-band .stat-icon svg {
  width: 46px;
  height: 46px;
}

/* Clearance below the seam card for Services' own content — same idea as
   .hero-inner's padding-bottom above, tuned per breakpoint alongside it
   (see the responsive section near the end of this file). Scoped to the
   section right after the stats band only, not every .section site-wide. */
.stats-band + section {
  padding-top: 121px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}

.stat:first-child {
  border-left: 0;
}

.stat-icon {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  background: rgba(30, 90, 180, 0.14);
  border: 1px solid rgba(32, 121, 255, 0.3);
  display: grid;
  place-items: center;
  color: var(--amber);
  flex: none;
}

.stat-icon svg {
  width: 42px;
  height: 42px;
}

.stat-text {
  display: block;
  min-width: 0;
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.stat-label {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- electric border ----------------------------------------------------
   Animated glow ring around the .hero-stats panel, ported from reactbits.dev
   ("Electric Border") to plain canvas + CSS — no React involved. The canvas
   line is drawn and animated by initElectricBorders() in assets/js/main.js;
   these rules position that canvas plus two static CSS glow layers behind
   it. Color comes from --electric-border-color, set inline per element
   (defaults to the site's theme accent color from src/content/theme.json).
   -------------------------------------------------------------------- */
.electric-border {
  --electric-border-color: var(--amber-text);
  --electric-light-color: oklch(from var(--electric-border-color) l c h);
  position: relative;
  border-radius: inherit;
  overflow: visible;
  isolation: isolate;
}

.eb-canvas-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.eb-canvas {
  display: block;
}

.eb-content {
  position: relative;
  border-radius: inherit;
  z-index: 1;
}

.eb-layers {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.eb-glow-1,
.eb-glow-2,
.eb-background-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-sizing: border-box;
}

.eb-glow-1 {
  border: 2px solid oklch(from var(--electric-border-color) l c h / 0.6);
  filter: blur(1px);
}

.eb-glow-2 {
  border: 2px solid var(--electric-light-color);
  filter: blur(4px);
}

.eb-background-glow {
  z-index: -1;
  transform: scale(1.1);
  filter: blur(32px);
  opacity: 0.3;
  background: linear-gradient(-30deg, var(--electric-light-color), transparent, var(--electric-border-color));
}

/* ---- section scaffolding ---------------------------------------------- */
.section {
  padding: 92px 0;
  position: relative;
}

.section-head {
  max-width: 620px;
  margin-bottom: 48px;
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.section-head p {
  color: var(--muted);
  margin-top: 16px;
  font-size: 1.08rem;
}

.section-alt {
  background:
    radial-gradient(var(--line) 1.2px, transparent 1.2px) 0 0 / 26px 26px,
    var(--ink-2);
}

/* Dark-theme section — same token-rebind trick as .photo-band above, minus
   the photo/overlay: every existing component underneath (cards, eyebrows,
   buttons, text) already reads these custom properties, so it re-colors
   for free. Used on the services showcase sections (homepage + services
   list page) so they read as a distinct dark band against the light theme. */
.section-dark {
  --ink: var(--ink-dark);
  --ink-2: var(--ink-dark-2);
  --ink-3: var(--ink-dark-3);
  --ink-4: var(--ink-dark-4);
  --text: var(--text-dark);
  --muted: var(--muted-dark);
  --muted-2: var(--muted-2-dark);
  --line: var(--line-dark);
  --line-2: var(--line-2-dark);
  --amber-text: var(--amber-text-dark);
  background: var(--ink);
  color: var(--text);
}

/* ---- decorative section backgrounds ------------------------------------
   Pure-CSS, no images — subtle enough that content stays the focus, but
   echoes the schematic/circuit motif used elsewhere (placeholders, .trace).
   .bg-dots  → faint blueprint dot-grid, for plain light sections.
   .bg-glow  → soft amber/cyan corner glows, for a showcase section.
   .bg-grid  → faint blueprint line-grid, fading toward the edges. */
.bg-dots {
  background-image: radial-gradient(var(--line) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
}

.bg-glow {
  position: relative;
  isolation: isolate;
}

.bg-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 60% at 8% 0%, rgba(32, 91, 255, 0.1), transparent 65%),
    radial-gradient(32% 55% at 96% 100%, rgba(11, 125, 147, .10), transparent 65%);
}

.bg-grid {
  position: relative;
  isolation: isolate;
}

.bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(85% 100% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(85% 100% at 50% 0%, #000 30%, transparent 100%);
}

/* reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---- intro / contact strip -------------------------------------------- */
.intro-strip {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}

.intro-strip > .intro-copy {
  position: sticky;
  top: 296px;
}

.intro-strip .lead {
  font-size: 1.15rem;
  color: var(--muted);
}

.intro-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.mini-form {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
}

/* ---- content card -------------------------------------------------------
   The one card design shared by the services, projects, and blog grids
   (and their "related items" sections) — see lib/components.js's
   contentCard(). Image, title, and the trailing link are three separate
   <a> tags to the same href, so any of the three opens the item; the
   link's color follows the site's accent so it always matches the theme
   set in the admin panel (src/content/theme.json), not a fixed color.
   -------------------------------------------------------------------- */
.card-grid, .proj-grid, .blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.content-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s linear;
}

.content-card:hover {
  transform: translateY(-6px);
  border-color: rgba(30, 90, 180, 0.4);
}

.content-card-media {
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}

.content-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

.content-card:hover .content-card-media img {
  transform: scale(1.05);
}

.content-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.content-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.content-card-meta .cat {
  color: var(--amber-text);
}

.content-card-body h3 {
  font-size: 1.24rem;
  margin-bottom: 10px;
}

.content-card-body p {
  color: var(--muted);
  font-size: .96rem;
  margin-bottom: 18px;
}

.content-card-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--amber-text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.content-card-link::after {
  content: "→";
  transition: transform .2s;
}

.content-card:hover .content-card-link::after {
  transform: translateX(4px);
}

/* ---- service card (photo tile, reveals on hover) ------------------------
   Idle: just the photo, category pill, and title. Hover (pointer devices
   only — see the media query below): the photo fades out to a flat card
   surface, and the excerpt + "Learn more" grow in beneath the title (a
   0fr → 1fr grid-row, same technique as the homepage project bento tiles)
   — which also reads as the title rising, since it sits above the
   growing block in a bottom-anchored column. */
.svc-card {
  position: relative;
  display: block;
  aspect-ratio: 8 / 5;
  border-radius: calc(var(--radius) - 4px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
  isolation: isolate;
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}

.svc-card:hover {
  border-color: var(--amber-text);
  transform: translateY(-3px);
}

.svc-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .45s var(--ease);
}

.svc-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 45%, rgba(6, 9, 15, .82) 100%);
}

.svc-card-cat {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--amber);
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--amber);
  box-shadow: 0 2px 10px rgba(50, 111, 238, .45);
}

.svc-card-body {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.svc-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: #ffffff;
  font-size: 1.2rem;
  line-height: 1.25;
}

.svc-card-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease);
}

.svc-card-reveal-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
}

.svc-card-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: .68rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .82);
}

.svc-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.svc-card-link-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffffff;
}

.svc-card-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #ffffff;
  transition: transform .3s var(--ease), background .3s var(--ease);
}

.svc-card-link-icon svg {
  width: 12px;
  height: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .svc-card:hover img {
    opacity: 0;
  }

  .svc-card:hover .svc-card-reveal {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .svc-card:hover .svc-card-link-icon {
    transform: translate(2px, -2px);
    background: var(--amber);
    border-color: var(--amber);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card img, .svc-card-reveal, .svc-card-link-icon {
    transition: none;
  }
}

.center-cta {
  text-align: center;
  margin-top: 46px;
}

/* ---- projects bento grid (homepage teaser) -----------------------------
   One large feature tile (.bento-lg, the first project) plus smaller
   tiles, packed with grid-auto-flow: dense so they tile edge-to-edge with
   no gaps regardless of count. Photo tiles with a bottom-gradient caption,
   distinct from the plain contentCard() grid on /projects/. */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  grid-auto-flow: dense;
  gap: 18px;
}

.bento-item {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  isolation: isolate;
  transition: border-color .45s var(--ease), transform .45s var(--ease);
}

.bento-item:hover {
  border-color: var(--amber-text);
  transform: translateY(-4px);
}

.bento-lg {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}

.bento-item:hover img {
  transform: scale(1.06);
}

.bento-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(6, 9, 15, .82) 100%);
  transition: background .45s var(--ease);
}

.bento-item:hover .bento-overlay {
  background: linear-gradient(180deg, rgba(6, 9, 15, .25) 0%, rgba(6, 9, 15, .94) 100%);
}

.bento-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25);
}

.bento-body {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bento-title {
  font-family: var(--font-display);
  font-weight: 600;
  color: #ffffff;
  font-size: 1.05rem;
  line-height: 1.25;
}

.bento-lg .bento-title {
  font-size: 1.35rem;
}

.bento-loc {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: rgba(255, 255, 255, .72);
}

/* Excerpt — hidden by default, eases open under the title on hover
   (desktop/pointer devices only; see .bento-overlay above for the matching
   image darken). A 0fr → 1fr grid-row animates to the text's *actual*
   height with no guessed max-height to snap against — the jitter a
   max-height transition gets when the real content is shorter than the
   cap. .bento-desc itself just clips to it (min-height: 0 is what lets a
   grid track collapse all the way to 0). */
.bento-desc-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  transition: grid-template-rows .5s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease);
}

.bento-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  min-height: 0;
  font-size: .82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .82);
}

.bento-lg .bento-desc {
  font-size: .88rem;
}

@media (hover: hover) and (pointer: fine) {
  .bento-item:hover .bento-desc-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bento-item, .bento-item img, .bento-overlay, .bento-desc-wrap {
    transition: none;
  }
}

@media (max-width: 860px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
}

@media (max-width: 560px) {
  /* Same dense-pack bento as tablet, just narrower columns and smaller
     tiles/type — a flat single column loses the whole "bento" look, and
     two small photos side by side still read fine on a phone. .bento-lg
     keeps its inherited span (2 cols × 2 rows), which at 2 columns total
     means it becomes one full-width feature tile up top. */
  .bento-grid {
    grid-auto-rows: 120px;
    gap: 10px;
  }

  .bento-cat {
    top: 8px;
    left: 8px;
    font-size: .58rem;
    padding: 3px 7px;
  }

  .bento-body {
    left: 10px;
    right: 10px;
    bottom: 8px;
  }

  .bento-title {
    font-size: .82rem;
    line-height: 1.2;
  }

  .bento-lg .bento-title {
    font-size: 1.05rem;
  }

  .bento-loc {
    font-size: .6rem;
  }

  .bento-item:not(.bento-lg) .bento-loc {
    display: none;
  }

  .bento-desc-wrap {
    display: none;
  }
}

/* ---- why / benefits ---------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.why-list {
  display: grid;
  gap: 2px;
}

.why-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.why-item:first-child {
  border-top: 1px solid var(--line);
}

.why-icon {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--amber-text);
  flex: none;
}

.why-icon svg {
  width: 40px;
  height: 40px;
}

.why-item p {
  margin: 0;
  color: var(--text);
}

/* Compact variant of .why-list — for use inline under a block of copy
   (the homepage's merged about/why-us section) instead of as its own
   full-width grid column. Same markup/icon-cycling as whyList(), just
   smaller icons and a two-up wrap instead of bordered full-width rows. */
.why-list-compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
  margin-top: 28px;
}

.why-list-compact .why-item {
  padding: 8px 0;
  border: 0;
}

.why-list-compact .why-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.why-list-compact .why-icon svg {
  width: 20px;
  height: 20px;
}

.why-list-compact .why-item p {
  font-size: .9rem;
}

/* light-theme card lift — a soft shadow to separate flat, similarly-toned
   card surfaces (border alone reads too flat once everything is light) */
.content-card, .tst, .reason, .state-card, .loc-card,
.aside-card, .mini-form, form.pp-form, .rail a, .spec-list {
  box-shadow: var(--shadow-card);
}

/* numbered reason cards (about) */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.reason {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.reason-icon {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--amber-text);
  margin-bottom: 16px;
}

.reason-icon svg {
  width: 44px;
  height: 44px;
}

/* ---- "problems we solve" grid ------------------------------------------- */
.problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.problem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.problem-icon {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--amber-text);
  flex: none;
}

.problem-icon svg {
  width: 40px;
  height: 40px;
}

.problem p {
  margin: 0;
  color: var(--text);
  font-size: .95rem;
}

/* ---- emergency callout --------------------------------------------------- */
.emergency-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}

.emergency-band h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin: 6px 0 14px;
}

.emergency-band > .wrap > .reveal > p {
  color: var(--muted);
  font-size: 1.05rem;
}

.emergency-list {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  padding: 26px 28px;
  backdrop-filter: blur(10px);
}

.emergency-list ul {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.emergency-list li {
  position: relative;
  padding-left: 20px;
  color: var(--text);
  font-size: .95rem;
}

.emergency-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--amber);
  transform: rotate(45deg);
}

.emergency-label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0;
}

/* ---- "how it works" steps ------------------------------------------------
   Every step styled identically, laid out as a connected timeline: a line
   runs behind the numbered markers (.steps-grid::before), each marker sits
   on a white/ink disc with a solid accent disc offset behind it, and only
   the text underneath gets a plain background — no border, no shadow. */
.steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.steps-grid::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--line);
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
}

.step-node {
  position: relative;
  width: 68px;
  height: 68px;
  margin-bottom: 20px;
}

.step-node-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--amber);
  transform: translate(7px, 7px);
}

.step-num-big {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--ink-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--amber-text);
  box-shadow: var(--shadow-card);
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
}

.step-text {
  background: var(--ink-2);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.step h3 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.step p {
  color: var(--muted);
  font-size: .92rem;
  margin: 0;
}

.reason h3 {
  font-size: 1.12rem;
  margin-bottom: 8px;
}

.reason p {
  color: var(--muted);
  font-size: .94rem;
  margin: 0;
}

/* values */
.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.value {
  background: var(--ink-2);
  padding: 30px 26px;
}

/* when the values grid sits inside a .photo-band, swap the seamless
   dark-divider grid for floating glass cards over the photo */
.photo-band .values {
  background: transparent;
  border: 0;
  gap: 16px;
}

.photo-band .value {
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
}

.value h3 {
  font-size: 1.1rem;
  color: var(--amber);
  margin-bottom: 10px;
}

.value p {
  color: var(--muted);
  font-size: .92rem;
  margin: 0;
}

/* ---- testimonials ------------------------------------------------------ */
.tst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tst {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.stars {
  color: var(--amber-text);
  letter-spacing: 2px;
  margin-bottom: 14px;
  font-size: .95rem;
}

.tst blockquote {
  margin: 0 0 20px;
  color: var(--text);
  font-size: .98rem;
}

.tst-who {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tst-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ink-4), var(--ink-3));
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--amber-text);
  border: 1px solid var(--line);
}

.tst-who b {
  font-family: var(--font-display);
  font-size: .95rem;
  display: block;
}

.tst-who span {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- client logos -------------------------------------------------------
   A static, wrapped row of logos (was an auto-scrolling marquee — removed
   in favor of a still row with a per-logo hover scale). Works with real
   logo files or the generated text-wordmark fallback. */
.client-marquee-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 22px 40px;
  min-height: 144px;
  transition: transform .25s var(--ease);
}

.client-logo:hover {
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .client-logo {
    transition: none;
  }
}

.client-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.client-logo img {
  max-height: 60px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* ---- faq --------------------------------------------------------------- */
.faq-list {
  max-width: 820px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 4px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.faq-q .fnum {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--amber-text);
  margin-right: 14px;
}

.faq-icon {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
}

.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--amber-text);
  transition: transform .25s var(--ease);
}

.faq-icon::before {
  top: 10px;
  left: 0;
  width: 22px;
  height: 2px;
}

.faq-icon::after {
  left: 10px;
  top: 0;
  width: 2px;
  height: 22px;
}

.faq-item[open] .faq-icon::after {
  transform: scaleY(0);
}

.faq-a {
  padding: 0 4px 26px;
  color: var(--muted);
  max-width: 68ch;
}

details.faq-item summary {
  list-style: none;
}

details.faq-item summary::-webkit-details-marker {
  display: none;
}

/* ---- big CTA band ------------------------------------------------------ */
.cta-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 96px 0;
}

.cta-band .wrap {
  position: relative;
  z-index: 2;
}

.cta-band h2 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.cta-band p {
  color: var(--muted);
  max-width: 520px;
  margin: 16px auto 30px;
}

.cta-band .hero-actions {
  justify-content: center;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  animation: none;
  opacity: 1;
}

.cta-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(60% 100% at 50% 120%, rgba(30, 90, 180, 0.14), transparent 70%);
}

/* a real photo behind the band already supplies texture/light — the
   synthetic glow on top of it just muddies contrast against the text */
.photo-band .cta-glow {
  display: none;
}

/* ---- photo band: hero-style photo + dark overlay, reused on the CTA
   band and every interior page-hero that has a themed background photo -- */
.photo-band {
  position: relative;
  background-size: cover;
  background-position: center;
}

.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* flat, consistently dark — a gradient that dips lighter in the middle
     would collide with centered headline text sitting right on top of it */
  background: rgba(8, 11, 18, .84);
}

.photo-band > .wrap {
  position: relative;
  z-index: 1;
}

/* ---- page hero (interior) --------------------------------------------- */
.page-hero {
  padding: 84px 0 20px;
  position: relative;
}

.page-hero .eyebrow {
  margin-bottom: 20px;
}

.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  max-width: 16ch;
}

.page-hero p {
  color: var(--muted);
  max-width: 60ch;
  margin-top: 20px;
  font-size: 1.1rem;
}

.breadcrumbs {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 22px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.breadcrumbs a {
  color: var(--muted);
}

.breadcrumbs a:hover {
  color: var(--amber);
}

.breadcrumbs span {
  color: var(--muted-2);
}

/* ---- service detail ---------------------------------------------------- */
.detail-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: stretch;
}

.detail-body p {
  color: var(--muted);
  font-size: 1.06rem;
}

.detail-media img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  width: 100%;
}

.spec-list {
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.spec-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  font-size: .96rem;
}

.spec-list li:last-child {
  border-bottom: 0;
}

.spec-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--amber-text);
  transform: rotate(45deg);
  flex: none;
}

.aside-card {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  position: sticky;
  top: calc(var(--header-h) + 96px);
}

.aside-card h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.aside-card p {
  color: var(--muted);
  font-size: .95rem;
}

.aside-phone {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--amber-text);
  display: block;
  margin: 6px 0 20px;
}

/* project quick-facts (aside-card on a project detail page) */
.fact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 16px 0 22px;
}

.fact-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fact-ic {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--amber-text);
  display: grid;
  place-items: center;
  flex: none;
}

.fact-ic svg {
  width: 18px;
  height: 18px;
}

.fact-row .k {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.fact-row .v {
  display: block;
  font-family: var(--font-display);
  font-size: .96rem;
  font-weight: 600;
}

/* project "challenge" callout */
.challenge-box {
  margin-top: 30px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-text);
  border-radius: var(--radius);
  background: var(--ink-3);
}

.challenge-box h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  margin: 0 0 10px;
}

.challenge-box h2 svg {
  width: 20px;
  height: 20px;
  color: var(--amber-text);
  flex: none;
}

.challenge-box p {
  color: var(--muted);
  margin: 0;
}

/* project main photo (clickable to open the lightbox) */
.main-photo-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  text-align: left;
}

/* project photo gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.gallery-thumb {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 0;
  cursor: zoom-in;
  background: var(--ink-2);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}

.gallery-thumb:hover img {
  transform: scale(1.06);
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: rgba(5, 8, 14, .92);
  padding: 40px;
}

.lightbox[hidden] {
  display: none;
}

.lightbox-img {
  max-width: min(1100px, 90vw);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  cursor: pointer;
  transition: background .2s;
}

.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  background: rgba(255, 255, 255, .2);
}

.lightbox-close {
  top: 24px;
  right: 24px;
}

.lightbox-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .75);
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  margin: 0;
}

@media (max-width: 640px) {
  .lightbox { padding: 16px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; }
}

/* other services rail */
.rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.rail a {
  display: block;
  padding: 20px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .98rem;
  transition: border-color .2s, transform .2s;
}

.rail a:hover {
  border-color: var(--amber-text);
  transform: translateY(-3px);
  color: var(--amber-text);
}

/* ---- projects ---------------------------------------------------------- */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.filter-btn {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--muted);
  cursor: pointer;
  transition: all .2s;
}

.filter-btn:hover {
  color: var(--text);
}

.filter-btn.active {
  background: var(--amber);
  color: #14100a;
  border-color: var(--amber);
}

/* ---- blog -------------------------------------------------------------- */

/* article */
.article {
  max-width: 760px;
  margin-inline: auto;
}

.article .lede {
  font-size: 1.25rem;
  color: var(--text);
  margin-bottom: 32px;
}

.article p {
  color: var(--muted);
  font-size: 1.08rem;
  margin-bottom: 1.3em;
}

.article-hero-media {
  aspect-ratio: 21/9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  margin: 30px 0 40px;
}

.article-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- location grid ----------------------------------------------------- */
.loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.loc-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .2s, transform .2s;
}

.loc-card:hover {
  border-color: var(--amber-text);
  transform: translateY(-3px);
}

.loc-card b {
  font-family: var(--font-display);
  font-size: 1.02rem;
}

.loc-card span {
  font-family: var(--font-mono);
  font-size: .64rem;
  color: var(--current);
}

.state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.state-card {
  padding: 30px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s, transform .2s;
}

.state-card:hover {
  border-color: var(--amber-text);
  transform: translateY(-4px);
}

.state-card h3 {
  font-size: 1.4rem;
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.state-card h3 span {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--amber-text);
}

.state-card p {
  color: var(--muted);
  font-size: .92rem;
  margin-bottom: 16px;
}

.state-card .count {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted-2);
  letter-spacing: .06em;
}

/* ---- contact / forms --------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.contact-info .info-row {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: flex-start;
}

.contact-info .info-row:first-of-type {
  border-top: 1px solid var(--line);
}

.info-ic {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: var(--ink-3);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--amber-text);
  flex: none;
}

.info-ic svg {
  width: 40px;
  height: 40px;
}

.info-row .k {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  display: block;
  margin-bottom: 4px;
}

.info-row a, .info-row .v {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text);
}

.info-row a:hover {
  color: var(--amber-text);
}

form.pp-form {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px;
}

.field {
  margin-bottom: 18px;
}

.field label {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}

.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 15px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color .2s;
}

.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--amber-text);
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-note {
  font-size: .85rem;
  color: var(--muted-2);
  margin-top: 14px;
}

.form-status {
  margin-top: 16px;
  font-size: .95rem;
  min-height: 1.2em;
}

.form-status.ok {
  color: #16a34a;
}

.form-status.err {
  color: var(--amber-2);
}

/* ---- footer ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--ink-2);
  padding-top: 70px;
  margin-top: 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding: 44px;
  margin-bottom: 40px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.foot-brand p {
  color: var(--muted);
  font-size: .92rem;
  margin: 18px 0;
  max-width: 34ch;
}

.foot-social {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.foot-social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  transition: all .2s;
}

.foot-social a svg {
  width: 28px;
  height: 28px;
}

.foot-social a:hover {
  color: var(--amber-text);
  border-color: var(--amber-text);
}

.foot-col h3 {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 18px;
}

.foot-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foot-col ul a {
  color: var(--muted);
  font-size: .92rem;
  transition: color .2s;
}

.foot-col ul a:hover {
  color: var(--amber-text);
}

.foot-contact a {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .92rem;
}

.foot-contact a:hover {
  color: var(--amber-text);
}

.foot-phone {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text) !important;
}

.foot-licenses {
  margin-top: 20px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.lic strong {
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber-text);
  margin-bottom: 6px;
}

.lic span {
  display: block;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--muted-2);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--muted-2);
  flex-wrap: wrap;
  gap: 12px;
}

.foot-legal {
  display: flex;
  gap: 20px;
}

.foot-legal a:hover {
  color: var(--amber-text);
}

/* ---- back-to-top button -------------------------------------------------
   Hidden until the page has been scrolled a bit; #top on .site-header
   gives it a working no-JS fallback too. */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--amber);
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s, visibility .25s, background .2s;
  z-index: 90;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--amber-2);
}

.back-to-top svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 640px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

/* ---- legal pages ------------------------------------------------------- */
.legal {
  max-width: 760px;
  margin-inline: auto;
}

.legal h2 {
  font-size: 1.4rem;
  margin: 36px 0 14px;
}

.legal p {
  color: var(--muted);
}

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1024px) {
  .card-grid, .tst-grid, .proj-grid, .blog-grid, .reasons, .rail, .problems-grid, .steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* The stats-band card gets noticeably taller once it drops to 2 columns
     here, so Hero/Services need more clearance to keep the card from
     overlapping their own content (see .hero-inner and .stats-band +
     section for the desktop values). */
  .hero-inner {
    padding-bottom: 200px;
  }

  .stats-band + section {
    padding-top: 220px;
  }

  .stat {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }

  .stat:nth-child(-n+2) {
    border-top: 0;
  }

  .values {
    grid-template-columns: repeat(2, 1fr);
  }

  .intro-strip > .intro-copy {
    position: static;
  }

  .why-grid, .intro-strip, .detail-grid, .contact-grid, .emergency-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .aside-card {
    position: static;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    padding: 32px;
  }

  .mega-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .topbar-inner {
    justify-content: center;
  }

  .topbar a:first-child {
    display: none;
  }

  .topbar-social {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
  }

  .nav-toggle span {
    width: 20px;
    height: 2px;
    background: var(--text);
    margin-inline: auto;
    transition: transform .25s, opacity .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);
  }

  .primary-nav {
    /* anchored to .site-header (a sticky positioning context), not the
       viewport — so this lands right below the header whether the header
       is still in flow under the topbar or already stuck to the top */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--line);
    padding: 12px 20px 24px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s, transform .25s, visibility .25s;
  }

  .primary-nav.open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list>li>a {
    padding: 14px 6px;
    border-bottom: 1px solid var(--line-2);
    border-radius: 0;
  }

  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: none;
  }

  .has-mega.open-sub .mega {
    display: block;
  }

  .mega-grid {
    grid-template-columns: 1fr 1fr;
    padding: 8px 0 16px;
    gap: 16px;
  }

  .nav-cta {
    margin: 16px 0 0;
    justify-content: center;
  }

  /* .header-transparent's white-on-photo text only makes sense while the
     nav sits directly over the hero — once the mobile menu drops open, it
     sits on .primary-nav's own light panel background instead, so it needs
     its normal dark-on-light colors regardless of header-transparent. */
  body.header-transparent .primary-nav .nav-list>li>a {
    color: var(--muted);
  }

  body.header-transparent .primary-nav .nav-list>li>a:hover,
  body.header-transparent .primary-nav .nav-list>li>a[aria-current="page"] {
    color: var(--text);
    background: var(--ink-3);
  }

  body.header-transparent .primary-nav .nav-cta {
    background: var(--ink-2);
    border-color: var(--line);
  }

  body.header-transparent .primary-nav .nav-cta-label {
    color: var(--muted);
  }

  body.header-transparent .primary-nav .nav-cta strong {
    color: var(--text);
  }

  .hero-stat {
    position: static;
    margin-top: 30px;
    display: inline-flex;
  }

  .hero::after {
    background: linear-gradient(180deg, rgba(10, 13, 20, .3), var(--ink) 78%);
  }
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }

  .section {
    padding: 64px 0;
  }

  .card-grid, .tst-grid, .proj-grid, .blog-grid, .reasons, .values, .rail, .field-row, .problems-grid, .steps-grid, .why-list-compact {
    grid-template-columns: 1fr;
  }

  /* Service tiles are small photo cards designed for a dense grid (see
     .svc-card) — two per row still reads fine at phone width and beats a
     single tall column of tiny-looking cards. */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* All 4 stats stack into a single column here, so the card gets tall
     enough (~490px) that it needs real room on both sides to stay clear
     of Hero's and Services' own content. */
  .hero-inner {
    padding-bottom: 425px;
  }

  .stats-band + section {
    padding-top: 425px;
  }

  .stat {
    border-top: 1px solid rgba(255, 255, 255, .14);
  }

  .stat:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .footer-grid, .mega-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    padding: 28px;
  }

  .hero h1 {
    font-size: clamp(2.6rem, 13vw, 4rem);
  }
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .hero h1 .line>span {
    transform: none;
  }

  .hero-sub, .hero-actions, .hero-stat {
    opacity: 1;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}