/* ==========================================================================
   ELG Services — Landing
   Palette: navy base, brushed silver accent
   Type:    Space Grotesk (display) + Inter (body)
   ========================================================================== */

:root {
  /* Palette */
  --navy-deep:    #050A14;
  --navy:         #0B1426;
  --navy-1:       #0F1A2E;
  --navy-2:       #152440;
  --navy-3:       #1B2D4F;

  --silver:        #C8CDD4;
  --silver-bright: #EEF0F3;
  --silver-soft:   #9BA3AE;
  --silver-mute:   #5C6675;

  --ink:          #F4F5F7;
  --ink-mute:     #A7AEBA;
  --ink-dim:      #6B7280;

  --line:         rgba(200, 205, 212, 0.10);
  --line-strong:  rgba(200, 205, 212, 0.22);

  /* Brushed silver gradient */
  --silver-grad: linear-gradient(135deg,
    #9CA3AF 0%,
    #E8EAED 28%,
    #C8CDD4 50%,
    #8A94A6 72%,
    #D1D5DB 100%);

  /* Motion — tokens translated from Framer Motion spring presets */
  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);  /* wobbly spring (overshoots) */
  --ease-gentle:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-snap:     cubic-bezier(0.2, 0.9, 0.3, 1.4);   /* stiff + a touch of bounce */

  /* Cursor-tracked custom props (set by script.js) */
  --mx: 50%;
  --my: 50%;

  /* Layout */
  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--navy-deep);
}

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--navy-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--silver-bright); color: var(--navy-deep); }

/* Subtle grain overlay on the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 14px 0;
  transition: backdrop-filter .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(5, 10, 20, 0.72);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--line);
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: 0.14em;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.nav__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.nav__wordmark em {
  font-style: normal;
  color: var(--silver-soft);
  font-weight: 500;
}
.nav__links {
  display: flex;
  gap: 32px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.nav__links a {
  position: relative;
  padding: 6px 0;
  transition: color .25s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--silver-grad);
  transition: right .4s var(--ease-out);
}
.nav__links a:hover::after { right: 0; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  transition: border-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease);
}
.nav__cta:hover { border-color: var(--silver); transform: translateY(-1px); }
.nav__cta-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #22C55E;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.14); }
  50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.04); }
}

/* Hamburger button (mobile only) */
.nav__hamburger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color .25s var(--ease);
}
.nav__hamburger:hover { border-color: var(--silver); }
.nav__hamburger-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;                       /* integer pixel height — sub-pixel (e.g. 1.5px) renders blurry on mobile */
  background: var(--ink);
  transform-origin: center;
  transition: transform .3s var(--ease), opacity .25s var(--ease), top .3s var(--ease);
}
.nav__hamburger-bar:nth-child(1) { transform: translate(-50%, -7px); }
.nav__hamburger-bar:nth-child(2) { transform: translate(-50%, 0); }
.nav__hamburger-bar:nth-child(3) { transform: translate(-50%, 7px); }
.nav__hamburger.is-open .nav__hamburger-bar:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.nav__hamburger.is-open .nav__hamburger-bar:nth-child(2) { opacity: 0; }
.nav__hamburger.is-open .nav__hamburger-bar:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  visibility: hidden;
}
.mobile-nav.is-open {
  pointer-events: auto;
  visibility: visible;
}
.mobile-nav__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(5, 10, 20, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: 1;                          /* sits behind the menu panel */
}
.mobile-nav.is-open .mobile-nav__scrim { opacity: 1; }
.mobile-nav__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(86vw, 380px);
  height: 100%;
  background:
    linear-gradient(180deg, rgba(21, 36, 64, 0.98), rgba(11, 20, 38, 0.98)),
    var(--navy-deep);
  border-left: 1px solid var(--line);
  padding: 88px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  z-index: 2;                          /* renders above the scrim so menu items are crisp */
}
.mobile-nav.is-open .mobile-nav__panel { transform: translateX(0); }
.mobile-nav__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav__links a {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color .25s var(--ease), padding-left .25s var(--ease);
}
.mobile-nav__links a::after {
  content: "→";
  font-size: 18px;
  color: var(--silver-soft);
  transition: transform .25s var(--ease), color .25s var(--ease);
}
.mobile-nav__links a:hover { color: var(--ink); padding-left: 6px; }
.mobile-nav__links a:hover::after { color: var(--ink); transform: translateX(4px); }
.mobile-nav__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid var(--silver);
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.02);
}

body.is-nav-open { overflow: hidden; }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__hamburger { display: inline-flex; align-items: center; justify-content: center; }
}

/* ==========================================================================
   TYPE — display, titles, eyebrow
   ========================================================================== */
.display {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(3.25rem, 8.5vw, 7.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 24px 0 28px;
  color: var(--ink);
}
.display__line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0;
}
.display__line--accent {
  background: var(--silver-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: silverSweep 6s linear infinite;
}
@keyframes silverSweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-soft);
}
.eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--silver-grad);
}

.section__head { margin-bottom: clamp(40px, 7vw, 80px); }
.section__head--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
}
@media (max-width: 820px) {
  .section__head--split { grid-template-columns: 1fr; }
}

.section__num {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-soft);
  margin-bottom: 20px;
  padding-left: 28px;
  position: relative;
}
.section__num::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 20px; height: 1px;
  background: var(--silver-grad);
}

.section__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 5.5vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--ink);
}
.section__title-accent {
  background: var(--silver-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: silverSweep 8s linear infinite;
}
.section__lede {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--ink-mute);
  max-width: 52ch;
  margin-top: 24px;
}
.section__lede--right { max-width: 48ch; justify-self: end; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  border-radius: 2px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform .35s var(--ease), color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
  overflow: hidden;
  isolation: isolate;
}
.btn svg { transition: transform .4s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }

.btn--primary {
  background: var(--silver-grad);
  background-size: 200% 200%;
  color: var(--navy-deep);
  border: 1px solid transparent;
  animation: silverSweep 10s linear infinite;
}
/* translateY lift lives on :hover for non-magnetic primaries only.
   Magnetic primaries get their lift from the JS-driven --tx/--ty transform
   so the two transforms don't fight each other. */
.btn--primary:not([data-magnetic]):hover { transform: translateY(-2px); }
.btn--primary::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(5, 10, 20, 0.0);
  transition: background .3s var(--ease);
  z-index: -1;
}
.btn--primary:hover::after { background: rgba(5, 10, 20, 0.12); }

.btn--ghost {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--silver);
  transform: translateY(-2px);
}

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

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 120px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Background: slow-drifting gradient mesh + cursor spotlight */
.hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(600px 420px at var(--mx, 50%) var(--my, 35%), rgba(200, 205, 212, 0.06), transparent 60%),
    radial-gradient(1100px 620px at 72% 28%, rgba(27, 45, 79, 0.55), transparent 60%),
    radial-gradient(700px 400px at 14% 90%, rgba(21, 36, 64, 0.55), transparent 60%),
    radial-gradient(900px 500px at 50% 50%, rgba(36, 59, 102, 0.18), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: meshDrift 18s var(--ease) infinite alternate;
}
@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
  z-index: 1;
}

.hero__grid {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero__sub {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--ink-mute);
  max-width: 52ch;
  margin: 0 0 36px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Lottie slot */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
}
.hero-lottie {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hero-lottie::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 210deg at 50% 50%,
      rgba(200, 205, 212, 0.00),
      rgba(200, 205, 212, 0.12),
      rgba(200, 205, 212, 0.00) 60%);
  opacity: 0.6;
  animation: spin 22s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-lottie__placeholder {
  position: relative;
  width: 82%;
  height: 82%;
}
.hero-lottie__house path { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: drawHouse 3.2s var(--ease-out) 0.3s forwards; }
.hero-lottie__house path:nth-child(2) { animation-delay: 1.3s; }
.hero-lottie__house path:nth-child(3) { animation-delay: 1.8s; }
.hero-lottie__ring { fill: none; stroke: rgba(200, 205, 212, 0.12); stroke-dasharray: 4 8; animation: spin 60s linear infinite; transform-origin: 200px 200px; }
@keyframes drawHouse { to { stroke-dashoffset: 0; } }

.hero__framehint {
  position: absolute;
  bottom: -28px; left: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.6;
}
.hero__framehint em { color: var(--silver-soft); font-style: normal; }

.hero__scrollcue {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 2;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-soft);
}
.hero__scrollcue-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--silver) 0%, transparent 100%);
  animation: scrollLine 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.hero__ticker {
  position: relative;
  z-index: 2;
  margin-top: clamp(48px, 8vw, 96px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero__ticker-track {
  display: flex;
  gap: 32px;
  white-space: nowrap;
  animation: tick 45s linear infinite;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-soft);
}
.hero__ticker-track span { flex: 0 0 auto; }
@keyframes tick { to { transform: translateX(-50%); } }

/* Mobile: cities ticker scrolls faster to match the pace of the other
   marquees on phones. */
@media (max-width: 720px) {
  .hero__ticker-track { animation-duration: 30s; }
}

/* ==========================================================================
   SECTIONS (shared)
   ========================================================================== */
.section {
  position: relative;
  padding: clamp(80px, 11vw, 160px) 0;
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 960px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services__grid { grid-template-columns: 1fr; } }

.service {
  background: var(--navy-deep);
  padding: clamp(28px, 4vw, 48px);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: background .4s var(--ease);
}
.service::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 1px;
  background: var(--silver-grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease-out);
}
.service:hover { background: var(--navy-1); }
.service:hover::before { transform: scaleX(1); }

.service__num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-soft);
}
.service__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.service p {
  color: var(--ink-mute);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 34ch;
}

/* ==========================================================================
   WHY
   ========================================================================== */
.why__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) { .why__list { grid-template-columns: 1fr; } }

.why__item {
  background: var(--navy-deep);
  padding: clamp(22px, 3vw, 36px);
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "num title"
    ".   body";
  column-gap: 16px;
  row-gap: 6px;
  align-items: start;
}
.why__item .why__num { grid-area: num; align-self: start; }
.why__item h3       { grid-area: title; }
.why__item p        { grid-area: body; }
.why__num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--silver-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: silverSweep 8s linear infinite;
}
.why__item h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  margin: 0 0 4px;
  color: var(--ink);
}
.why__item p { color: var(--ink-mute); margin: 0; font-size: 0.88rem; line-height: 1.55; max-width: 46ch; }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-top: 56px;
}
.process__rail::before {
  content: "";
  position: absolute;
  top: 28px; left: 0; right: 0;
  height: 1px;
  background: var(--silver-grad);
  opacity: 0.5;
}
@media (max-width: 820px) {
  .process__rail { grid-template-columns: 1fr; gap: 32px; }
  .process__rail::before { display: none; }
}

.process__step {
  position: relative;
  padding-top: 28px;
}
.process__step::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 0;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: var(--silver-grad);
  box-shadow: 0 0 0 4px var(--navy-deep), 0 0 0 5px var(--line-strong);
  transform: translateY(-50%);
}
.process__num {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-soft);
  margin-bottom: 12px;
}
.process__step h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}
.process__step p { color: var(--ink-mute); margin: 0; font-size: 0.95rem; line-height: 1.65; }

/* ==========================================================================
   WORK (portfolio)
   ========================================================================== */
.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 1100px) { .work__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .work__grid { grid-template-columns: 1fr; } }

/* Single-image project (replaces the BA split). Renders a subtle empty
   slot until a real photo is wired in via inline style or background-image. */
.project__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--navy-1);
  background-image:
    linear-gradient(135deg, rgba(200, 205, 212, 0.04), rgba(200, 205, 212, 0.01) 70%),
    repeating-linear-gradient(45deg, rgba(200, 205, 212, 0.025) 0 1px, transparent 1px 16px);
  transition: transform .9s var(--ease-out), filter .6s var(--ease-out);
}
/* Camera glyph only shows when no real photo is set on .project__image[style] */
.project__image:not([style*="background-image"])::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239BA3AE' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='8.5' cy='10.5' r='1.6'/><path d='m21 17-5-5L5 21'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
}
.project:hover .project__image {
  transform: scale(1.04);
  filter: brightness(1.05);
}

.project__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--navy-1);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.project__ba {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.project__ba-before,
.project__ba-after {
  position: relative;
  overflow: hidden;
}
.project__ba-before {
  background:
    linear-gradient(135deg, rgba(5, 10, 20, 0.6), rgba(5, 10, 20, 0.2)),
    repeating-linear-gradient(45deg, #1A2438 0 14px, #1F2E4A 14px 28px);
  filter: grayscale(0.4) brightness(0.8);
}
.project__ba-after {
  background:
    linear-gradient(135deg, rgba(200, 205, 212, 0.18), transparent 70%),
    repeating-linear-gradient(135deg, #243B66 0 14px, #2E4A82 14px 28px);
}
.project__tag {
  position: absolute;
  top: 14px; left: 14px;
  padding: 6px 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(5, 10, 20, 0.7);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px);
}
.project__tag--after { left: auto; right: 14px; background: rgba(5, 10, 20, 0.5); }

.project__meta { padding: 20px 2px 0; }
.project__loc {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-soft);
  margin-bottom: 10px;
}
.project__meta h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.project__meta p { color: var(--ink-mute); margin: 0 0 14px; font-size: 0.9rem; line-height: 1.6; }
.project__duration {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-soft);
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: block;
}

/* ==========================================================================
   PROPERTY MANAGER
   ========================================================================== */
.pm {
  background:
    radial-gradient(800px 460px at 20% 10%, rgba(27, 45, 79, 0.6), transparent 60%),
    radial-gradient(700px 400px at 90% 90%, rgba(21, 36, 64, 0.6), transparent 60%),
    var(--navy-deep);
}
.pm__title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 12px 0 0;
  color: var(--ink);
}
.pm__lede {
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  color: var(--ink-mute);
  max-width: 64ch;
  margin: 0;
}

.pm__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

.contact__lede {
  color: var(--ink-mute);
  margin: 28px 0 44px;
  max-width: 48ch;
  font-size: 1rem;
}
.contact__info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 40px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.contact__info > div { min-width: 0; }
.contact__info dt {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-soft);
  margin-bottom: 8px;
}
.contact__info dd {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  color: var(--ink);
}
.contact__info a { border-bottom: 1px solid var(--line-strong); transition: border-color .3s var(--ease); }
.contact__info a:hover { border-color: var(--silver); }

/* Form */
.contact__form {
  padding: clamp(24px, 3.5vw, 44px);
  background: var(--navy-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  position: relative;
}
.contact__form::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--silver-grad);
  opacity: 0.5;
}
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-soft);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--navy-deep);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--silver);
  background: var(--navy);
}
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%239BA3AE' stroke-width='1.5' fill='none' stroke-linecap='square'/></svg>"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 42px; }

.contact__disclaimer {
  margin: 18px 0 0;
  font-size: 12px;
  color: var(--ink-dim);
  text-align: center;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
  background: var(--navy-deep);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas:
    "brand tag    meta"
    ".     social .";
  gap: 24px 24px;
  align-items: center;
}
.footer__brand  { grid-area: brand; }
.footer__tag    { grid-area: tag; }
.footer__social { grid-area: social; }
.footer__meta   { grid-area: meta; }
@media (max-width: 800px) {
  .footer__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "tag"
      "social"
      "meta";
    text-align: center;
  }
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.12em;
  font-size: 13px;
}
.footer__brand img { width: 30px; height: 30px; object-fit: contain; }
.footer__brand em { font-style: normal; color: var(--silver-soft); font-weight: 500; }
.footer__tag {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0;
  text-align: center;
}
.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-end;
  font-size: 13px;
  color: var(--ink-mute);
}
@media (max-width: 800px) { .footer__meta { justify-content: center; } }

/* Footer social icons — Instagram / LinkedIn (and optional third).
   Sits centered in a second row of the footer grid. Hairline circular
   border around each icon, lifts and brightens on hover. */
.footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--silver-soft);
  border: 1px solid var(--line);
  background: rgba(200, 205, 212, 0.02);
  transition:
    color .25s var(--ease-out),
    border-color .25s var(--ease-out),
    background .25s var(--ease-out),
    transform .35s var(--ease-out);
}
.footer__social a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(200, 205, 212, 0.06);
  transform: translateY(-2px);
}

/* ==========================================================================
   SCROLL REVEALS
   Base states; JS adds .is-in to animate.
   ========================================================================== */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-animate].is-in { opacity: 1; transform: translateY(0); }

[data-animate="clip-reveal"] .display__line {
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-out);
}
[data-animate="clip-reveal"].is-in .display__line { transform: translateY(0); }
[data-animate="clip-reveal"].is-in .display__line:nth-child(1) { transition-delay: 0s; }
[data-animate="clip-reveal"].is-in .display__line:nth-child(2) { transition-delay: 0.12s; }
[data-animate="clip-reveal"].is-in .display__line:nth-child(3) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  [data-animate], [data-animate] * { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   HERO — trust strip (under CTA row)
   ========================================================================== */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 36px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-soft);
}
.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero__trust-dot {
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--silver-grad);
  box-shadow: 0 0 0 3px rgba(200, 205, 212, 0.06);
}

/* ==========================================================================
   MOTION — Framer Motion translated to vanilla
   - `whileHover` -> :hover
   - `whileTap` -> :active
   - Magnetic buttons + tilt cards: JS sets --tx/--ty/--rx/--ry vars
   ========================================================================== */

/* Magnetic button: JS sets --tx / --ty on mousemove within .btn[data-magnetic] */
.btn[data-magnetic] {
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition:
    transform .45s var(--ease-spring),
    background .3s var(--ease),
    border-color .3s var(--ease);
}
.btn[data-magnetic]:active {
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(0.97);
  transition-duration: .12s;
}

/* 3D tilt card — JS sets --rx / --ry on mousemove within [data-tilt] */
[data-tilt] {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform .5s var(--ease-out);
  will-change: transform;
}
[data-tilt].is-tilting {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .12s linear;
}

/* Cursor spotlight on cards — uses --mx/--my set by JS on mouseenter target */
.service,
.quote,
.fit__col {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.service::after,
.quote::after,
.fit__col::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(360px 220px at var(--mx, 50%) var(--my, 50%),
      rgba(200, 205, 212, 0.09),
      transparent 60%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.service:hover::after,
.quote:hover::after,
.fit__col:hover::after { opacity: 1; }

/* Keep card content above spotlight overlay */
.service > *,
.quote > *,
.fit__col > * { position: relative; z-index: 1; }

/* ==========================================================================
   REVIEWS / TESTIMONIALS
   ========================================================================== */
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 960px) { .reviews__grid { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto; } }

.quote {
  position: relative;
  padding: clamp(32px, 3.5vw, 44px);
  background:
    linear-gradient(180deg, rgba(21, 36, 64, 0.42), rgba(11, 20, 38, 0.28)),
    var(--navy-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .4s var(--ease), transform .5s var(--ease-out);
}
.quote::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--silver-grad);
  opacity: 0.4;
  transition: opacity .4s var(--ease);
}
.quote:hover { border-color: var(--line-strong); }
.quote:hover::before { opacity: 0.8; }

.quote__mark {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 0.6;
  background: var(--silver-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: silverSweep 8s linear infinite;
  user-select: none;
}
.quote blockquote {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.65;
  letter-spacing: -0.005em;
}
.quote blockquote p { margin: 0; }
.quote figcaption {
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quote__name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.quote__meta {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-soft);
}

/* ==========================================================================
   FIT CHECK + FAQ
   ========================================================================== */
.fit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 820px) { .fit__grid { grid-template-columns: 1fr; } }

.fit__col {
  position: relative;
  padding: clamp(32px, 4vw, 48px);
  background:
    linear-gradient(180deg, rgba(21, 36, 64, 0.35), rgba(11, 20, 38, 0.28)),
    var(--navy-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .4s var(--ease), transform .5s var(--ease-out);
}
.fit__col:hover { border-color: var(--line-strong); }
.fit__col::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  opacity: 0.5;
}
.fit__col--yes::before { background: linear-gradient(90deg, transparent, #22C55E 40%, #22C55E 60%, transparent); opacity: 1; }
.fit__col--no::before  { background: linear-gradient(90deg, transparent, #EF4444 40%, #EF4444 60%, transparent); opacity: 1; }

/* Soft outer glow — green for the qualifier, red for the disqualifier.
   Lifts on hover so the card feels reactive without overpowering. */
.fit__col--yes {
  box-shadow: 0 0 32px -10px rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.22);
}
.fit__col--no {
  box-shadow: 0 0 32px -10px rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.22);
}
.fit__col--yes:hover { box-shadow: 0 0 48px -6px rgba(34, 197, 94, 0.32);  border-color: rgba(34, 197, 94, 0.45); }
.fit__col--no:hover  { box-shadow: 0 0 48px -6px rgba(239, 68, 68, 0.32); border-color: rgba(239, 68, 68, 0.45); }

.fit__tag {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-soft);
  margin-bottom: 24px;
}
.fit__col--yes .fit__tag { color: #22C55E; }
.fit__col--no  .fit__tag { color: #EF4444; }

.fit__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fit__list li {
  position: relative;
  padding-left: 32px;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.55;
}
.fit__list li::before {
  position: absolute;
  left: 0; top: 0.05em;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1em;
  font-weight: 600;
}
.fit__col--yes .fit__list li::before {
  content: "+";
  color: #22C55E;
}
.fit__col--no .fit__list li::before {
  content: "\00d7";  /* × */
  color: #EF4444;
}

/* Small subtle pill linking down to the FAQ section.
   Scrolls smoothly via the existing a[href^="#"] handler in script.js. */
.fit__cta {
  margin-top: clamp(32px, 4vw, 52px);
  display: flex;
  justify-content: center;
}
.fit__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  color: var(--silver-soft);
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(200, 205, 212, 0.02);
  transition:
    color .25s var(--ease),
    border-color .25s var(--ease),
    background .25s var(--ease),
    transform .35s var(--ease);
}
.fit__cta-link:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(200, 205, 212, 0.06);
  transform: translateY(-1px);
}
.fit__cta-link svg {
  transition: transform .35s var(--ease);
}
.fit__cta-link:hover svg {
  transform: translateY(2px);
}

/* FAQ accordion */
.faq {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq__item:last-child { border-bottom: none; }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(22px, 2.5vw, 32px) 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--silver-bright); }

.faq__icon {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 1px;
  background: var(--silver);
  transform: translate(-50%, -50%);
  transition: transform .35s var(--ease-spring);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__item p {
  margin: 0 0 clamp(22px, 2.5vw, 32px);
  max-width: 72ch;
  color: var(--ink-mute);
  font-size: 0.98rem;
  line-height: 1.7;
  animation: faqReveal .5s var(--ease-out);
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   SERVICE CARDS — hover lift (Framer whileHover translated)
   ========================================================================== */
.service {
  transition:
    background .4s var(--ease),
    transform .5s var(--ease-out),
    border-color .4s var(--ease);
}
.service:hover { transform: translateY(-4px); }

/* Project cards — subtle lift to complement JS tilt */
.project {
  transition: transform .6s var(--ease-out);
}
.project__frame {
  transition: box-shadow .5s var(--ease);
}
.project:hover .project__frame {
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6),
              0 0 0 1px var(--line-strong);
}

/* PM card — add subtle grid glow behind */
.pm { position: relative; overflow: hidden; }
.pm::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 300px at var(--mx, 30%) var(--my, 20%), rgba(200, 205, 212, 0.05), transparent 70%);
  pointer-events: none;
  opacity: 0.8;
}

/* Subtle parallax on hero visual (JS updates --py) */
.hero__visual {
  transform: translate3d(0, var(--py, 0px), 0);
  transition: transform .2s linear;
  will-change: transform;
}

/* ==========================================================================
   Scroll progress bar (top of page)
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--sp, 0));
  background: var(--silver-grad);
  background-size: 200% 100%;
  z-index: 101;
  pointer-events: none;
  animation: silverSweep 6s linear infinite;
}


/* ==========================================================================
   HERO  —  Scroll-jacked frame sequence (Apple AirPods Pro pattern)
   100vh tall, full-bleed canvas (cover-cropped 4:3 → viewport).
   Body scroll is locked (see body.is-scrub-locked below) until the
   user has advanced through all 97 frames via wheel/touch/keys.
   ========================================================================== */
.hero--scrub {
  /* Standard 100vh hero. The animation is driven by scroll position over
     a short range (about 60vh of scroll), so by the time the user has
     scrolled most of the hero out of view, the final frame is already
     rendered. No sticky, no body-scroll lock. */
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding: 0;
  background: #07070B;
  position: relative;
  overflow: hidden;
  display: block;
}

/* Disable the navy mesh + cursor spotlight on the scrub variant */
.hero--scrub::before,
.hero--scrub::after {
  display: none;
  content: none;
}

/* Full-bleed canvas — JS draws each frame with cover-fit math */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #07070B;
}

/* Body lock — applied while the hero intro animation plays. Prevents the
   page from scrolling past the hero before the animation has finished.
   No wheel/touch events are captured. The body simply has overflow hidden
   for ~2 seconds, then the class is removed by JS and scrolling resumes. */
body.is-scrub-locked {
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}

/* ==========================================================================
   Scroll prompt — bouncing chevron at the bottom of the hero plus a pulse
   on the "Scroll to" word in the title. Both signal "this thing is waiting
   for you to act". The `.is-scrub-started` class is added to .hero--scrub
   by JS the moment playAnimation() fires, which fades both prompts out.
   ========================================================================== */
.hero__scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: clamp(72px, 10vw, 120px);
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--silver-soft);
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.6s var(--ease-out);
}
.hero__scroll-indicator-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
}
.hero__scroll-indicator svg {
  animation: scrollChevronBounce 1.8s ease-in-out infinite;
}
@keyframes scrollChevronBounce {
  0%, 100% { transform: translateY(0);  opacity: 0.55; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* Pulse the "Scroll to" word so the action verb in the title visibly
   breathes. Subtle opacity oscillation, doesn't move layout. */
@keyframes scrollWordPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.hero__title-line--lead {
  animation: scrollWordPulse 2.4s ease-in-out infinite;
}

/* Once the user has triggered the animation, both prompts fade out and
   stop animating — we're past the "please scroll" stage. */
.hero--scrub.is-scrub-started .hero__scroll-indicator,
.hero--scrub.is-scrub-complete .hero__scroll-indicator {
  opacity: 0;
}
.hero--scrub.is-scrub-started .hero__title-line--lead,
.hero--scrub.is-scrub-complete .hero__title-line--lead {
  animation: none;
  opacity: 1;
}

/* Respect users with prefers-reduced-motion: hold the prompts still
   (no bounce / pulse) and keep them visible. */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-indicator svg,
  .hero__title-line--lead {
    animation: none;
  }
}

/* Scrub progress bar — pinned to bottom of hero, fills 0..1 */
.hero__scrub-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.10);
  z-index: 4;
  transition: opacity .4s var(--ease-out);
}
.hero__scrub-progress-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--scrub, 0));
  background: linear-gradient(90deg,
    rgba(244, 245, 247, 0.4),
    rgba(244, 245, 247, 0.95));
  transition: transform .12s linear;
}
/* Fades out once scrub completes */
.hero--scrub.is-scrub-complete .hero__scrub-progress {
  opacity: 0;
}

/* Subtle vignette so overlay text reads cleanly over any frame */
.hero__gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(7, 7, 11, 0.55) 0%,
      rgba(7, 7, 11, 0)    24%,
      rgba(7, 7, 11, 0)    58%,
      rgba(7, 7, 11, 0.85) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, 92%);
  height: 100%;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.25rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  color: var(--ink);
  pointer-events: none;
}
.hero__overlay > * { pointer-events: auto; }

/* Top row: italic serif scroll hint pinned right */
.hero__overlay-top {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 1rem;
}

/* Centered cluster: title + CTAs vertically + horizontally centered */
.hero__overlay-center {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.hero__scroll-hint {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  letter-spacing: 0.01em;
  color: rgba(244, 245, 247, 0.92);
  padding-top: 6px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
  opacity: 1;
  transition: opacity .15s linear;
  /* opacity is set inline by JS during scrub */
}

/* Big anchored title — bottom-left of the hero */
.hero__title {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 8.4vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.025em;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55);
}
.hero__title-line { display: block; }

/* Small italic-serif lead-in: "Scroll to" — sits above the big headline */
.hero__title-line--lead {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.30em;
  letter-spacing: 0.04em;
  color: rgba(244, 245, 247, 0.92);
  margin-bottom: 0.25em;
  display: inline-block;
}
.hero__title-line--lead em { font-style: italic; }

.hero__title-line--em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.005em;
  /* Slight optical adjustment so italic serif reads at same visual size */
  font-size: 1.06em;
  color: rgba(244, 245, 247, 0.96);
}

/* Credibility — CTA cluster centered below the title.
   Fades in at end of scrub. opacity + transform set directly by JS. */
.hero__credibility {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .35s var(--ease-out),
    transform .35s var(--ease-out);
  pointer-events: auto;
  will-change: opacity, transform;
}
.hero--scrub .hero__credibility .btn {
  justify-content: center;
}
.hero--scrub .hero__credibility .btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--ink);
}

/* Ticker pinned to bottom of the 220vh hero, sits BELOW the sticky pane */
.hero--scrub .hero__ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

/* ----- Mobile: keep scroll-jacked hero, retune for narrow viewports ----- */
@media (max-width: 720px) {
  .hero--scrub {
    height: 100vh;
    height: 100svh;
    min-height: 100svh;
  }
  .hero__overlay {
    width: 100%;
    padding: clamp(5rem, 16vw, 6.5rem) clamp(1rem, 4vw, 1.5rem) clamp(1.75rem, 5vw, 2.25rem);
  }
  .hero__overlay-top {
    justify-content: flex-end;
    gap: 0.75rem;
  }
  .hero__scroll-hint {
    font-size: 0.95rem;
    padding-top: 0;
  }
  .hero__overlay-center {
    gap: 1.5rem;
  }
  .hero__title {
    font-size: clamp(2.4rem, 12vw, 4.2rem);
  }
  .hero__title-line--lead {
    font-size: 0.32em;
  }
  .hero__credibility {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
  }
  .hero--scrub .hero__credibility .btn {
    width: 100%;
  }
}


/* ==========================================================================
   INTRO  —  positioning blurb + credentials, sits between hero and services
   ========================================================================== */
.intro {
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
  border-bottom: 1px solid var(--line);
}

.intro__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.intro__lead {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.intro__lead .section__num {
  margin-bottom: 0;
}

/* Body-weight statement, matched to site sans-serif system */
.intro__sub {
  margin: 0;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 38ch;
}

.intro__trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.intro__trust li {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 4px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(200, 205, 212, 0.025);
  transition:
    border-color .25s var(--ease-out),
    background .25s var(--ease-out),
    transform .35s var(--ease-out);
}
.intro__trust li:hover {
  border-color: var(--line-strong);
  background: rgba(200, 205, 212, 0.05);
  transform: translateY(-2px);
}
.intro__trust-icon {
  grid-row: 1 / -1;
  grid-column: 1;
  align-self: start;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg,
    rgba(200, 205, 212, 0.10),
    rgba(200, 205, 212, 0.02));
  border: 1px solid var(--line);
  color: var(--silver-bright);
  flex-shrink: 0;
}
.intro__trust-icon svg {
  width: 22px;
  height: 22px;
}
.intro__trust-label {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.intro__trust-meta {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.45;
  letter-spacing: 0.005em;
}

@media (max-width: 860px) {
  .intro__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 520px) {
  .intro__trust {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }
}

/* ==========================================================================
   SERVICE CATEGORIES — Residential / Exterior / Commercial
   Image on one side, text + bulleted list on the other.
   Reverses on alternating sections via .service-cat--reverse.
   ========================================================================== */
.service-cat {
  position: relative;
}
.service-cat__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.service-cat--reverse .service-cat__grid {
  grid-template-columns: 1fr 1.05fr;
}
.service-cat--reverse .service-cat__media {
  order: 2;
}
.service-cat--reverse .service-cat__content {
  order: 1;
}

.service-cat__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-1);
}
.service-cat__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
  transition: transform 1.2s var(--ease-out), filter .8s var(--ease-out);
  filter: saturate(0.92) contrast(1.02);
}
.service-cat__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 10, 20, 0) 50%, rgba(5, 10, 20, 0.45)),
    linear-gradient(90deg, rgba(5, 10, 20, 0.18), rgba(5, 10, 20, 0));
  pointer-events: none;
  z-index: 1;
}
.service-cat__media:hover .service-cat__image {
  transform: scale(1.08);
  filter: saturate(1.05) contrast(1.04);
}

.service-cat__content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.service-cat__content .section__title {
  margin: 0;
}
.service-cat__content .section__lede {
  max-width: 44ch;
}

.service-cat__list {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.service-cat__list li {
  position: relative;
  padding-left: 22px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.service-cat__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 1.5px;
  background: var(--silver-bright);
  opacity: 0.7;
}

.service-cat__cta {
  align-self: flex-start;
  margin-top: 10px;
}

@media (max-width: 920px) {
  .service-cat__grid,
  .service-cat--reverse .service-cat__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .service-cat--reverse .service-cat__media,
  .service-cat--reverse .service-cat__content {
    order: initial;
  }
  .service-cat__media {
    aspect-ratio: 16 / 11;
    max-height: 420px;
  }
}
@media (max-width: 560px) {
  .service-cat__list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ==========================================================================
   STATS BAR — full-bleed dark photo with stacked stats
   Sits between service category sections.
   ========================================================================== */
.stats-bar {
  position: relative;
  padding: clamp(80px, 11vw, 160px) 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-deep);
  color: var(--ink);
}
.stats-bar__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.stats-bar__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.6) contrast(1.05) brightness(0.55);
  transform: scale(1.05);
  transition: transform 1.4s var(--ease-out);
}
.stats-bar:hover .stats-bar__image { transform: scale(1.08); }
.stats-bar__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(5, 10, 20, 0.65) 0%,
      rgba(5, 10, 20, 0.55) 40%,
      rgba(5, 10, 20, 0.7) 100%),
    radial-gradient(ellipse at 50% 50%, rgba(5, 10, 20, 0) 30%, rgba(5, 10, 20, 0.6) 100%);
  z-index: 1;
}
.stats-bar__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(24px, 3vw, 36px);
  max-width: 720px;
}

.stats-bar__eyebrow {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--silver-soft);
  font-weight: 500;
}

.stats-bar__numbers {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.4vw, 6px);
  font-family: 'Space Grotesk', sans-serif;
}
.stats-bar__stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;                 /* long labels (e.g. "of completed GTA jobs") wrap below the number on narrow viewports instead of overflowing */
  gap: clamp(14px, 1.6vw, 22px);
  line-height: 1;
}
.stats-bar__number {
  font-size: clamp(3.75rem, 8.5vw, 6.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: var(--silver-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: silverSweep 10s linear infinite;
}
.stats-bar__label {
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
}

.stats-bar__copy {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.95rem, 1.15vw, 1.05rem);
  line-height: 1.7;
  color: var(--ink-mute);
  letter-spacing: -0.003em;
  max-width: 56ch;
}

@media (max-width: 600px) {
  .stats-bar__stat {
    gap: 10px;
  }
  .stats-bar__number { font-size: 4rem; }
  .stats-bar__label { font-size: 2.25rem; }
}

/* ==========================================================================
   WE BUILD GREEN — sustainability section
   Dark navy base + green-tinted overlay, centered content, photo background.
   ========================================================================== */
.build-green {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-deep);
  color: var(--ink);
}
.build-green__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.build-green__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 65%;        /* shift the crop window down to reveal more of the lower portion of GreenBG.jpg */
  /* Source image is already green, so no hue-rotate needed. Light
     saturation bump and a moderate brightness dim so the white text
     overlay stays readable. */
  filter: saturate(1.1) contrast(1.04) brightness(0.7);
  transform: scale(1.04);
  transition: transform 1.6s var(--ease-out);
}
.build-green:hover .build-green__image { transform: scale(1.08); }
.build-green__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.30);
  z-index: 1;
}
/* Subtle green hex texture (kept, slightly toned down for the thinner banner) */
.build-green::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(60deg, rgba(148, 216, 154, 0.02) 1px, transparent 1px),
    linear-gradient(-60deg, rgba(148, 216, 154, 0.02) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 85%);
}

/* Horizontal banner layout: eyebrow | title | copy | cta-right */
.build-green__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2.5vw, 32px);
  text-align: left;
}

.build-green__eyebrow {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #94D89A;
  font-weight: 500;
  white-space: nowrap;
  flex: 0 0 auto;
}
.build-green__eyebrow-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #94D89A, transparent);
  opacity: 0.85;
}

.build-green__title {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  white-space: nowrap;
  flex: 0 0 auto;
}
.build-green__title-accent {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(135deg, #B5E8B9 0%, #6FBF73 50%, #4A9E5A 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: silverSweep 12s linear infinite;
}

.build-green__copy {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.9rem, 1.05vw, 1rem);
  line-height: 1.6;
  color: rgba(232, 240, 234, 0.78);
  letter-spacing: -0.003em;
  flex: 1 1 320px;
  max-width: 64ch;
  min-width: 0;
}

.build-green__cta {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 auto;            /* pushes CTA to the right edge of the flex row */
  padding: 10px 18px;
  color: var(--ink);
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid rgba(148, 216, 154, 0.4);
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(76, 175, 110, 0.06);
  flex: 0 0 auto;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .35s var(--ease);
}
.build-green__cta svg {
  color: #94D89A;
  transition: transform .35s var(--ease);
}
.build-green__cta:hover {
  color: #B5E8B9;
  background: rgba(76, 175, 110, 0.14);
  border-color: rgba(181, 232, 185, 0.55);
}
.build-green__cta:hover svg {
  transform: translateX(3px);
  color: #B5E8B9;
}

/* Tablet — let the copy wrap below the headline; keep CTA on the right */
@media (max-width: 880px) {
  .build-green__copy { flex-basis: 100%; order: 3; }
  .build-green__cta  { order: 2; margin-left: auto; }
}

/* Phone — fully stacked, centered */
@media (max-width: 600px) {
  .build-green { padding: 28px 0; }
  .build-green__container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .build-green__title { font-size: 1.7rem; white-space: normal; }
  .build-green__cta   { margin: 4px 0 0; }
}

/* ==========================================================================
   CLIENT LOGOS — horizontal scrolling marquee under Commercial Services
   Text wordmarks as placeholders. Swap to <img> when real logos are available.
   ========================================================================== */
.client-logos {
  position: relative;
  padding: clamp(64px, 8vw, 112px) 0 clamp(48px, 6vw, 88px);
  background: var(--navy-deep);
  overflow: hidden;
}
.client-logos__head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.client-logos__eyebrow {
  margin: 0 0 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--silver-soft);
  font-weight: 500;
}
.client-logos__title {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.client-logos__title-accent {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  background: var(--silver-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: silverSweep 10s linear infinite;
}

.client-logos__marquee {
  position: relative;
  padding: 8px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%);
}
.client-logos__track {
  display: flex;
  gap: clamp(48px, 6vw, 88px);
  width: max-content;
  align-items: center;
  padding: 18px 0;
  animation: clientLogosScroll 30s linear infinite;
  will-change: transform;
}
.client-logos__marquee:hover .client-logos__track {
  animation-play-state: paused;
}
@keyframes clientLogosScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.client-logos__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  min-width: 100px;
  padding: 0 clamp(20px, 2vw, 28px);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.55;
  white-space: nowrap;
  filter: grayscale(1);
  transition: opacity .35s var(--ease), filter .35s var(--ease), transform .35s var(--ease);
  user-select: none;
}
.client-logos__item:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-1px);
}
.client-logos__item img,
.client-logos__item svg {
  display: block;
  height: 100%;
  width: auto;
  max-height: 56px;
  object-fit: contain;
}

/* Per-brand text styling so wordmarks read distinctly even without real logos */
.client-logos__item[data-brand="subway"]      { font-weight: 800; letter-spacing: 0.06em; font-style: italic; }
.client-logos__item[data-brand="rbc"]         { font-weight: 700; letter-spacing: 0.12em; font-size: clamp(1.1rem, 1.7vw, 1.55rem); }
.client-logos__item[data-brand="cibc"]        { font-weight: 700; letter-spacing: 0.12em; font-size: clamp(1.1rem, 1.7vw, 1.55rem); }
.client-logos__item[data-brand="shn"]         { font-weight: 700; letter-spacing: 0.16em; font-size: clamp(1.1rem, 1.7vw, 1.55rem); }
.client-logos__item[data-brand="tim-hortons"] { font-weight: 700; font-style: italic; }
.client-logos__item[data-brand="wendys"]      { font-weight: 700; font-style: italic; }
.client-logos__item[data-brand="dollarama"]   { font-weight: 700; }
.client-logos__item[data-brand="shoppers"]    { font-weight: 500; letter-spacing: 0.005em; }
.client-logos__item[data-brand="canadian-tire"] { font-weight: 700; }
.client-logos__item[data-brand="giant-tiger"]   { font-weight: 700; }
.client-logos__item[data-brand="food-basics"]   { font-weight: 700; }
.client-logos__item[data-brand="service-ontario"] { font-weight: 500; letter-spacing: 0.01em; }

/* Spotlight: applied via JS (IntersectionObserver) as each logo crosses
   the centre band of the viewport. Same visual as hover but driven by
   scroll-and-marquee position, so the centre of the bar is always lit
   and the edges stay desaturated. Works on touch devices too, since
   the marquee is always animating. */
.client-logos__item.is-spotlighted {
  opacity: 1;
  filter: grayscale(0);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .client-logos__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   SERVICE CATEGORY GALLERY AFFORDANCE
   Subtle hover overlay on .service-cat__media that signals it's clickable.
   ========================================================================== */
.service-cat__media[data-gallery-trigger] {
  cursor: pointer;
}
.service-cat__gallery-affordance {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(5, 10, 20, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(200, 205, 212, 0.18);
  border-radius: 4px;
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .25s var(--ease);
  pointer-events: none;
}
.service-cat__gallery-affordance svg { color: var(--silver-bright); }
.service-cat__gallery-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(200, 205, 212, 0.18);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.service-cat__media[data-gallery-trigger]:hover .service-cat__gallery-affordance,
.service-cat__media[data-gallery-trigger]:focus-visible .service-cat__gallery-affordance {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(200, 205, 212, 0.4);
}
/* On touch devices show the affordance always so users know they can tap */
@media (hover: none) {
  .service-cat__gallery-affordance {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   LIGHTBOX
   Full-screen modal with main image + thumbnail strip + prev/next nav.
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-areas:
    "topbar topbar topbar"
    "prev   main   next"
    ".      thumbs .";
  grid-template-columns: minmax(56px, 88px) 1fr minmax(56px, 88px);
  grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 36px);
  background: rgba(5, 10, 20, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 56px 0 8px;
  font-family: 'Space Grotesk', sans-serif;
}
.lightbox__title {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-soft);
  font-weight: 500;
}
.lightbox__counter {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--silver-soft);
  font-variant-numeric: tabular-nums;
}

.lightbox__close {
  position: absolute;
  top: clamp(20px, 2.4vw, 32px);
  right: clamp(20px, 2.4vw, 32px);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 205, 212, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
  z-index: 2;
}
.lightbox__close:hover {
  background: rgba(200, 205, 212, 0.12);
  border-color: var(--silver);
  transform: rotate(90deg);
}

.lightbox__nav {
  width: clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
  align-self: center;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(200, 205, 212, 0.06);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.lightbox__nav:hover {
  background: rgba(200, 205, 212, 0.14);
  border-color: var(--silver);
}
.lightbox__nav--prev { grid-area: prev; }
.lightbox__nav--prev:hover { transform: translateX(-3px); }
.lightbox__nav--next { grid-area: next; }
.lightbox__nav--next:hover { transform: translateX(3px); }

.lightbox__main {
  grid-area: main;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}
.lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  background: var(--navy-1);
  transition: opacity .25s var(--ease);
}
.lightbox.is-changing .lightbox__image { opacity: 0; }

.lightbox__thumbs {
  grid-area: thumbs;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 4px 8px;
  scrollbar-width: thin;
}
.lightbox__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--navy-1);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.lightbox__thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.lightbox__thumb.is-active {
  opacity: 1;
  border-color: var(--silver);
}
.lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.is-lightbox-open { overflow: hidden; }

/* Mobile layout */
@media (max-width: 720px) {
  .lightbox {
    grid-template-areas:
      "topbar topbar topbar"
      "main   main   main"
      "prev   thumbs next";
    grid-template-columns: 56px 1fr 56px;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    padding: 16px;
  }
  .lightbox__topbar { padding: 0 56px 0 0; }
  .lightbox__thumbs { padding: 0 4px; }
  .lightbox__nav { width: 44px; height: 44px; }
}

/* PROCESS — feature image band above the rail */
.process__feature {
  margin: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 64px);
  position: relative;
  z-index: 1;
}
.process__feature-image {
  width: 100%;
  aspect-ratio: 35 / 9;                /* slimmer banner — 60% of the old 21/9 height */
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  filter: saturate(0.95) contrast(1.02);
  position: relative;
}
.process__feature-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 10, 20, 0.05) 50%, rgba(5, 10, 20, 0.4));
  pointer-events: none;
  border-radius: inherit;
}
@media (max-width: 720px) {
  .process__feature-image { aspect-ratio: 80 / 33; }  /* 60% of the old 16/11 height */
}

/* PROPERTY MANAGERS — feature image (wide banner) + 4-pillar grid */
.pm__feature {
  margin: clamp(36px, 4.5vw, 56px) 0 clamp(40px, 5vw, 64px);
  position: relative;
  z-index: 1;
}
.pm__feature-image {
  width: 100%;
  aspect-ratio: 21 / 9;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  filter: saturate(0.95) contrast(1.02);
  position: relative;
  overflow: hidden;
  transform: scale(1.01);
  transition: transform 1.6s var(--ease-out);
}
.pm__feature:hover .pm__feature-image { transform: scale(1.04); }
.pm__feature-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 10, 20, 0.05) 50%, rgba(5, 10, 20, 0.4));
  pointer-events: none;
  border-radius: inherit;
}
@media (max-width: 720px) {
  .pm__feature-image { aspect-ratio: 16 / 11; }
}

/* PM pillars: 4-up grid mirroring .why__list, with silver-gradient
   numerals so each value prop reads as a distinct card instead of a
   flat run-on bullet list. */
.pm__pillars {
  list-style: none;
  margin: 0 0 clamp(32px, 4vw, 48px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 1;
}
@media (max-width: 960px) { .pm__pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pm__pillars { grid-template-columns: 1fr; } }

.pm__pillar {
  background: var(--navy-deep);
  padding: clamp(22px, 3vw, 36px);
}
.pm__pillar-num {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  display: inline-block;
  background: var(--silver-grad);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: silverSweep 8s linear infinite;
  margin-bottom: 14px;
}
.pm__pillar h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  margin: 0 0 6px;
  color: var(--ink);
}
.pm__pillar p {
  color: var(--ink-mute);
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
}

/* Why ELG — GTA service-area callout (used inside merged Why section) */
/* GTA callout — horizontal banner-style row */
.why__geo {
  margin: clamp(20px, 2.5vw, 32px) 0 clamp(20px, 2.5vw, 32px);
  padding: clamp(14px, 2vw, 22px) clamp(20px, 2.5vw, 32px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--silver-bright);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(200, 205, 212, 0.04), rgba(200, 205, 212, 0.01) 60%),
    rgba(200, 205, 212, 0.015);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(12px, 2vw, 28px);
  position: relative;
  z-index: 1;
}
.why__geo-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-soft);
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}
.why__geo-headline {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  flex: 0 0 auto;
}
.why__geo-meta {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-mute);
  letter-spacing: -0.003em;
  flex: 1 1 280px;
  min-width: 0;
}

/* Credentials strip inside Why ELG — 4-up on wide screens, 2-up tablet, 1-up phone */
.why__credentials {
  margin-bottom: clamp(28px, 3.5vw, 44px);
  position: relative;
  z-index: 1;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.why__credentials li {
  padding: 14px;
}
.why__credentials .intro__trust-label { font-size: 0.88rem; }
.why__credentials .intro__trust-meta  { font-size: 0.75rem; line-height: 1.4; }
@media (max-width: 1024px) {
  .why__credentials { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .why__credentials { grid-template-columns: 1fr; }
}


/* ==========================================================================
   SERVICES  —  stock-image background per card
   ========================================================================== */
.service {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.service__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  opacity: 0.18;
  filter: saturate(0.85) contrast(1.05);
  transition:
    opacity .55s var(--ease-out),
    transform 1.1s var(--ease-out),
    filter .55s var(--ease-out);
  transform: scale(1.04);
  pointer-events: none;
}
.service::after {
  /* Layered scrim — keeps text legible even as image fades up on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(5, 10, 20, 0.55) 0%,
    rgba(5, 10, 20, 0.78) 60%,
    rgba(5, 10, 20, 0.92) 100%
  );
  z-index: 1;
  pointer-events: none;
  transition: opacity .45s var(--ease-out);
}
.service__content {
  position: relative;
  z-index: 2;
}
.service:hover .service__image {
  opacity: 0.42;
  transform: scale(1);
  filter: saturate(1) contrast(1.02);
}
.service:hover::after {
  opacity: 0.85;
}


/* ==========================================================================
   SECTION BACKGROUNDS  —  Layered radial atmospheres (PM section family)
   Each section gets a unique gradient composition so they feel related but
   not identical. Cursor-follow ::after sheen optional per section.
   ========================================================================== */

.intro,
.why,
.process,
.reviews,
.fit,
.contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Lift section content above the gradient layers */
.intro > .container,
.why > .container,
.process > .container,
.reviews > .container,
.fit > .container,
.contact > .container {
  position: relative;
  z-index: 2;
}

/* INTRO — top-warmth, sun-down-after-the-build feel */
.intro {
  background:
    radial-gradient(900px 520px at 18% 6%, rgba(36, 59, 102, 0.42), transparent 62%),
    radial-gradient(720px 420px at 88% 92%, rgba(21, 36, 64, 0.45), transparent 60%),
    var(--navy-deep);
}
.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 240px at var(--mx, 28%) var(--my, 22%),
      rgba(200, 205, 212, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* WHY ELG — diagonal split, sharper navy */
.why {
  padding: clamp(56px, 7vw, 104px) 0;     /* compressed from .section default */
  background:
    radial-gradient(1100px 600px at 82% 18%, rgba(36, 59, 102, 0.36), transparent 65%),
    radial-gradient(620px 420px at 8% 78%, rgba(27, 45, 79, 0.42), transparent 60%),
    var(--navy-deep);
}
.why .section__head { margin-bottom: clamp(24px, 3.5vw, 40px); }
.why::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(380px 220px at var(--mx, 80%) var(--my, 24%),
      rgba(200, 205, 212, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* PROCESS — top-down spotlight, suggests a roadmap */
.process {
  background:
    radial-gradient(1200px 640px at 50% -4%, rgba(27, 45, 79, 0.48), transparent 60%),
    radial-gradient(560px 380px at 4% 62%, rgba(21, 36, 64, 0.42), transparent 60%),
    var(--navy-deep);
}
.process::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 240px at var(--mx, 50%) var(--my, 18%),
      rgba(200, 205, 212, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* REVIEWS — softer, balanced left/right */
.reviews {
  background:
    radial-gradient(820px 480px at 22% 28%, rgba(36, 59, 102, 0.40), transparent 65%),
    radial-gradient(900px 500px at 78% 80%, rgba(27, 45, 79, 0.36), transparent 60%),
    var(--navy-deep);
}
.reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(440px 260px at var(--mx, 50%) var(--my, 50%),
      rgba(200, 205, 212, 0.045), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* FIT — vertical bookends, frames the yes/no split */
.fit {
  background:
    radial-gradient(800px 460px at 50% -2%, rgba(27, 45, 79, 0.42), transparent 60%),
    radial-gradient(1000px 540px at 50% 102%, rgba(21, 36, 64, 0.46), transparent 60%),
    var(--navy-deep);
}
.fit::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 240px at var(--mx, 50%) var(--my, 80%),
      rgba(200, 205, 212, 0.045), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* CONTACT — anchored, deeper, conversion-focused */
.contact {
  background:
    radial-gradient(1000px 600px at 28% 50%, rgba(36, 59, 102, 0.45), transparent 65%),
    radial-gradient(720px 420px at 92% 24%, rgba(27, 45, 79, 0.36), transparent 60%),
    radial-gradient(640px 380px at 80% 92%, rgba(21, 36, 64, 0.40), transparent 60%),
    var(--navy-deep);
}
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(440px 260px at var(--mx, 30%) var(--my, 50%),
      rgba(200, 205, 212, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

/* ==========================================================================
   SECTION BACKGROUND PALETTE — three alternating variants

   Three distinct dark-navy backgrounds rotate across the main numbered
   sections so each one reads as its own environment instead of "the same
   gradient repeating". All variants stay on the brand --navy-deep base;
   only the radial-gradient positions, sizes, and warmth shift. Pattern
   is A-B-C-A-B-C-A-B-C-A-B across sections 01 through 11 so adjacent
   sections never share a variant. Defined after the per-section rules
   above so they win via source order.
   ========================================================================== */

/* Variant A: warm upper-right ember + cool lower-left counterweight */
#services,
#mechanical,
.reviews,
.contact {
  background:
    radial-gradient(1100px 700px at 85% 12%, rgba(48, 75, 122, 0.55), transparent 62%),
    radial-gradient(700px 420px at 12% 78%, rgba(15, 28, 50, 0.38), transparent 60%),
    var(--navy-deep);
}

/* Variant B: cool lower-left depth + warm upper-right counterweight */
#exterior,
.why,
.pm,
.faq-section {
  background:
    radial-gradient(1000px 620px at 14% 88%, rgba(30, 48, 84, 0.52), transparent 60%),
    radial-gradient(700px 420px at 92% 15%, rgba(18, 30, 52, 0.42), transparent 60%),
    var(--navy-deep);
}

/* Variant C: symmetric centre spotlight + soft floor wash */
#commercial,
.process,
.fit {
  background:
    radial-gradient(1300px 800px at 50% 45%, rgba(40, 65, 110, 0.48), transparent 68%),
    radial-gradient(900px 500px at 50% 100%, rgba(15, 28, 50, 0.45), transparent 65%),
    var(--navy-deep);
}

/* Service-section containers and the faq-section need overflow/position
   set so any cursor-spotlight or texture overlay still stacks correctly. */
#services,
#exterior,
#commercial,
#mechanical,
.faq-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


/* Fine grid texture — subtle topographic noise on all enhanced sections.
   Makes the navy feel like material, not flat fill. */
.intro::after,
.why::after,
.process::after,
.reviews::after,
.fit::after,
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(200, 205, 212, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200, 205, 212, 0.022) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 90%);
}

/* ==========================================================================
   REVIEWS — Google reviews marquee
   ========================================================================== */
.reviews__rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}
@media (max-width: 760px) {
  .reviews__rating { align-items: flex-start; text-align: left; }
}
.reviews__stars {
  display: inline-flex;
  gap: 3px;
  color: #FFC83D;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.3));
}
.reviews__stars svg {
  width: 18px;
  height: 18px;
}
.reviews__rating-line {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--silver-soft);
}
.reviews__rating-line strong {
  color: var(--ink);
  font-weight: 600;
}
.reviews__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 205, 212, 0.18);
  padding-bottom: 4px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.reviews__link:hover {
  color: var(--ink);
  border-bottom-color: rgba(200, 205, 212, 0.55);
}
.reviews__link svg { transition: transform .25s var(--ease); }
.reviews__link:hover svg { transform: translateX(3px); }

/* Relocated "See all on Google" link — sits in its own container under
   the marquee, left-aligned within the container. */
.reviews__foot {
  margin-top: clamp(24px, 3vw, 40px);
  display: flex;
  justify-content: flex-start;
}
.reviews__link--foot {
  /* default .reviews__link styling is enough; container handles position */
}

/* Marquee container — full-bleed, edge-faded */
.reviews__marquee {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 12px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%);
  mask-image: linear-gradient(to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%);
  z-index: 1;
}

.reviews__track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 14px 0;
  animation: reviewsScroll 35s linear infinite;
  will-change: transform;
}
.reviews__track--reverse {
  animation-direction: reverse;
  animation-duration: 42s;
}
.reviews__marquee:hover .reviews__track {
  animation-play-state: paused;
}

@keyframes reviewsScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .reviews__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .reviews__track--reverse { display: none; }
}

/* Individual review card */
.review-card {
  flex: 0 0 auto;
  width: clamp(280px, 28vw, 360px);
  padding: 26px 28px;
  background:
    linear-gradient(180deg, rgba(21, 36, 64, 0.42), rgba(11, 20, 38, 0.28)),
    var(--navy-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color .35s var(--ease), transform .35s var(--ease-out);
}
.review-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}

.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.review-card__stars {
  display: inline-flex;
  gap: 2px;
  color: #FFC83D;
}
.review-card__stars svg {
  width: 14px;
  height: 14px;
}
.review-card__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-soft);
}
.review-card__source-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75% 100%);
  flex-shrink: 0;
}
.review-card__text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink);
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-card__foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}
.review-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--silver-grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--navy-deep);
  flex-shrink: 0;
}
.review-card__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.review-card__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.review-card__name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-card__date {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-soft);
}

/* Empty / loading state */
.reviews__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-soft);
  opacity: 0.6;
}
.reviews__marquee.is-loaded .reviews__empty { display: none; }
.reviews__marquee:not(.is-loaded) .reviews__track { visibility: hidden; }

@media (max-width: 720px) {
  .review-card { width: 78vw; padding: 22px 22px; }
  .reviews__track { gap: 18px; animation-duration: 28s; }
  .reviews__track--reverse { animation-duration: 32s; }
}