/* =====================================================================
   WRIGHT CHOICE HEATING AND AIR CONDITIONING
   "Big Country Comfort, Engineered."
   Unified production stylesheet — one shared sheet for every page.
   Order: tokens -> base -> header -> hero -> buttons/forms -> sections
          -> cards -> reviews/faq -> cta/footer -> page-hero/utilities
          -> motion -> media queries -> reduced motion
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  /* ---- Core ink & text ---- */
  --ink: #0f1d31;
  --ink-soft: #455a76;
  --ink-mute: #5f7390;          /* ~4.5:1 on white; safe for fine-print + tiny labels */
  --orange-ink: #b65f08;        /* text-safe orange (~4.6:1) for eyebrows + reading copy */

  /* ---- On-dark text (canonical rgba(255,255,255,.XX) promotions) ---- */
  --on-dark: rgba(255,255,255,.92);
  --on-dark-soft: rgba(255,255,255,.82);
  --on-dark-mute: rgba(255,255,255,.72);
  --on-dark-line: rgba(255,255,255,.16);
  --footer-text: rgba(220,234,249,.82);
  --footer-faint: rgba(206,222,240,.74);

  /* ---- State / feedback ---- */
  --danger: #d4453f;
  --danger-ink: #b8332e;
  --danger-ring: rgba(212,69,63,.16);

  /* ---- Canonical live-dot green (unifies #7fe0b0 / #3ddc84 / #4ade80) ---- */
  --live: #36d27e;
  --live-ring: rgba(54,210,126,.55);

  /* ---- Hero focal point (subpage heroes can reuse) ---- */
  --hero-focus: 68% center;

  /* ---- Brand blues ---- */
  --blue: #075c9f;
  --blue-deep: #063d72;
  --blue-700: #0a4e88;
  --blue-900: #052b4f;
  --blue-night: #061a30;
  --blue-pale: #eaf5ff;
  --blue-pale-2: #dcefff;
  --blue-tint: #f1f8ff;

  /* ---- Warm orange ---- */
  --orange: #f28c18;
  --orange-deep: #c96609;
  --orange-bright: #ff9e2c;
  --orange-soft: #fff2e0;
  --amber: #ffb454;

  /* ---- Neutrals / surfaces ---- */
  --ice: #f6fbff;
  --paper: #fbfdff;
  --line: #d9e6f2;
  --line-soft: #e8f0f8;
  --surface: #ffffff;
  --surface-2: #f4f9fe;

  /* ---- Signature gradients ---- */
  --grad-hero: linear-gradient(104deg, rgba(6,18,36,.94) 0%, rgba(6,30,58,.78) 46%, rgba(7,60,114,.30) 78%, rgba(7,60,114,.10) 100%);
  --grad-hero-glow: radial-gradient(70% 90% at 16% 28%, rgba(242,140,24,.30), transparent 55%);
  --grad-blue: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 62%, #0a6cb8 100%);
  --grad-night: linear-gradient(160deg, var(--blue-night) 0%, #08233f 55%, var(--blue-900) 100%);
  --grad-sunset: linear-gradient(120deg, var(--orange) 0%, var(--orange-bright) 55%, var(--amber) 100%);
  --grad-cool: linear-gradient(180deg, #ffffff 0%, var(--ice) 100%);
  --grad-text: linear-gradient(100deg, var(--blue-deep), #0a6cb8);
  --grad-sheen: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));

  /* ---- Mesh / atmosphere ---- */
  --mesh-cool: radial-gradient(40% 60% at 80% 10%, rgba(10,108,184,.45), transparent 60%),
               radial-gradient(45% 55% at 12% 85%, rgba(242,140,24,.18), transparent 60%);

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(7,45,82,.08);
  --shadow-sm: 0 4px 14px rgba(7,45,82,.08);
  --shadow: 0 18px 50px rgba(7,45,82,.14);
  --shadow-md: 0 14px 34px rgba(7,45,82,.10), 0 4px 10px rgba(7,45,82,.06);
  --shadow-lg: 0 30px 70px -16px rgba(6,40,78,.30), 0 8px 24px rgba(7,45,82,.10);
  --shadow-orange: 0 14px 30px -6px rgba(242,140,24,.40);
  --shadow-blue: 0 14px 30px -6px rgba(7,92,159,.34);
  --shadow-ring: 0 0 0 1px rgba(255,255,255,.6) inset;
  --glow-focus: 0 0 0 4px rgba(7,92,159,.18);

  /* ---- Semantic shadow aliases (mapped onto primitives above) ---- */
  --shadow-card: var(--shadow-md);
  --shadow-card-hover: var(--shadow-lg);
  --shadow-header: 0 10px 30px -14px rgba(6,40,78,.26), 0 2px 8px rgba(7,45,82,.05);
  --shadow-brand: 0 0 0 1px rgba(7,92,159,.10), 0 6px 16px -8px rgba(6,40,78,.35), inset 0 0 0 1px rgba(255,255,255,.7);
  --shadow-brand-hover: 0 0 0 1px rgba(7,92,159,.18), 0 10px 22px -8px rgba(6,40,78,.42), inset 0 0 0 1px rgba(255,255,255,.8);
  --shadow-review: var(--shadow-ring), 0 18px 44px rgba(6,18,36,.32);
  --shadow-review-hover: var(--shadow-ring), 0 30px 62px -14px rgba(4,14,28,.55);

  /* ---- Button heights ---- */
  --btn-h: 48px;
  --btn-h-lg: 52px;
  --btn-h-sm: 44px;

  /* ---- Unified focus language (white offset ring + brand-tinted glow) ---- */
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 6px rgba(7,92,159,.45);
  --focus-ring-orange: 0 0 0 3px var(--surface), 0 0 0 6px rgba(242,140,24,.55);
  --btn-shine: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.40) 50%, transparent 100%);

  /* ---- Radii ---- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Type scale ---- */
  --fs-display: clamp(42px, 6.2vw, 76px);
  --fs-h1: clamp(40px, 6vw, 72px);
  --fs-h2: clamp(30px, 4vw, 48px);
  --fs-h3: 22px;
  --fs-card-title: 24px;
  --fs-lead: clamp(17px, 2vw, 21px);
  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 13px;
  --tracking-eyebrow: .14em;

  /* ---- Font families ---- */
  --font-sans: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: Merriweather, Georgia, "Times New Roman", serif;

  /* ---- Spacing rhythm ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 88px; --space-10: 120px;
  --section-y: clamp(72px, 9vw, 120px);
  --section-y-tight: clamp(60px, 7vw, 96px);

  /* ---- Layout ---- */
  --max: 1180px;
  --max-wide: 1320px;
  --max-text: 680px;
  --gutter: clamp(20px, 4vw, 40px);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .6s;
  --dur-reveal: .62s;
  --reveal-step: 52ms;       /* per-item stagger step */
  --reveal-step-cap: 260ms;  /* clamp cumulative stagger so tails stay snappy */

  /* ===================================================================
     ROUND-6 ELEVATION — "The Big Country Atmosphere"
     Additive depth + atmosphere system. Every var below is NEW; no
     existing token is renamed or removed. Other domains compose on top.
     =================================================================== */

  /* ---- Extended depth & atmosphere (true z-space floors) ---- */
  --blue-abyss: #04101f;            /* deeper than --blue-night for night floors */
  --blue-ink-2: #07213c;            /* mid atmospheric step */
  --sky-day: #f3f9ff;               /* daylight top of the continuous field */
  --sky-dusk: #eef4fb;              /* cooler dusk step */

  /* ---- Sunset accent system (warm temperature ramp) ---- */
  --sun-core: #ff8a1f;
  --sun-hot: #ff6a2c;               /* hottest point of the West-Texas sunset */
  --sun-glow: #ffb454;
  --sun-haze: rgba(255,138,31,.18);

  /* ---- Signature continuous-field background ---- */
  --field-dawn: linear-gradient(180deg, var(--sky-day) 0%, #ffffff 30%, var(--sky-dusk) 100%);
  --field-horizon: linear-gradient(180deg, rgba(7,60,114,.05) 0%, transparent 40%);

  /* ---- Cinematic hero stack (layered depth, replaces flat single scrim) ---- */
  --hero-veil-strong: linear-gradient(96deg, rgba(4,12,24,.90) 0%, rgba(4,14,28,.66) 32%, rgba(5,20,40,.18) 62%, transparent 84%);
  --hero-floor: linear-gradient(180deg, transparent 52%, rgba(4,12,24,.55) 82%, rgba(4,12,24,.82) 100%);
  --hero-sun: radial-gradient(58% 70% at 14% 26%, rgba(255,138,31,.28), transparent 56%);
  --hero-grain: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.05), transparent 60%);

  /* ---- Depth shadow ramp (directional; warm-on-dark / cool-on-light) ---- */
  --shadow-float: 0 2px 6px rgba(7,45,82,.06), 0 12px 28px -10px rgba(6,40,78,.18);
  --shadow-lift: 0 8px 18px -8px rgba(6,40,78,.20), 0 30px 60px -24px rgba(6,40,78,.34);
  --shadow-hero: 0 40px 90px -30px rgba(4,12,24,.62), 0 10px 30px -12px rgba(4,12,24,.45);
  --shadow-sun-glow: 0 18px 50px -14px rgba(255,106,44,.45), 0 0 0 1px rgba(255,180,84,.20) inset;
  --shadow-inset-ring: inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.85);

  /* ---- Editorial type scale (pushes display end; existing fs vars stay) ---- */
  --fs-mega: clamp(54px, 9vw, 118px);   /* ONE hero/section statement per page */
  --fs-stat: clamp(48px, 7vw, 92px);    /* dramatized data moment */
  --tracking-mega: -0.03em;
  --leading-mega: 0.98;

  /* ---- Refined easing additions ---- */
  --ease-cinematic: cubic-bezier(.16, 1, .3, 1);   /* long, confident settle */
  --ease-glide: cubic-bezier(.4, 0, .2, 1);
  --dur-cine: .9s;                                  /* hero/section signature reveals */

  /* ---- Accent gradient upgrades (warmer, more luminous sunset) ---- */
  --grad-sun: linear-gradient(118deg, var(--sun-hot) 0%, var(--sun-core) 46%, var(--sun-glow) 100%);
  --grad-horizon: linear-gradient(90deg, transparent, var(--sun-core) 30%, var(--sun-glow) 55%, transparent);

  /* ---- Semantic remap: elevate existing aliases onto the richer ramp ----
     (old names keep working; surfaces now read with directional depth) */
  --shadow-card: var(--shadow-float);
  --shadow-card-hover: var(--shadow-lift);
}

/* =====================================================================
   2. BASE / RESET
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--blue) var(--surface-2);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;

  /* ---- Continuous atmospheric field ----------------------------------
     One graded sky for the whole page so scrolling reads as moving
     through engineered air: a faint cool sun-haze top-right, a warm
     West-Texas ground glow bottom-left, a soft horizon band, and the
     dawn->dusk vertical field underneath. Transform-free, no CLS. */
  background-color: var(--paper);
  background-image:
    radial-gradient(62% 50% at 88% -4%, rgba(10, 108, 184, .06), transparent 60%),
    radial-gradient(52% 46% at 4% 104%, rgba(255, 138, 31, .05), transparent 62%),
    linear-gradient(180deg, rgba(7,60,114,.045) 0%, transparent 34%),
    linear-gradient(180deg, var(--sky-day) 0%, var(--paper) 30%, var(--sky-dusk) 100%);
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat;
  background-size: cover, cover, 100% 70vh, cover;
}

body.menu-open { overflow: hidden; }

img, picture, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

a {
  color: var(--blue);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--blue-deep); }

::selection { background: rgba(255, 138, 31, .26); color: var(--blue-deep); text-shadow: none; }
::-moz-selection { background: rgba(255, 138, 31, .26); color: var(--blue-deep); text-shadow: none; }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb {
  /* deep-navy thumb with a warm sunset cap — the atmosphere story, even in the chrome */
  background: linear-gradient(180deg, var(--blue-700) 0%, var(--blue-deep) 60%, var(--blue-night) 100%);
  border-radius: var(--radius-pill);
  border: 3px solid var(--surface-2);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--sun-core) 0%, var(--blue) 38%, var(--blue-700) 100%);
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* =====================================================================
   2b. GLOBAL DEPTH FOUNDATION (Round-6 — "Big Country Atmosphere")
   Additive utilities the other domains compose on top of. Background-
   layer / transform-only effects: no CLS, fully reduced-motion-safe.
   ===================================================================== */

/* Parallax contract: opted-in BACKGROUND/PHOTO layers only (never text).
   The JS domain sets --pll (a px offset) via rAF; this is the safe default
   so an un-hydrated or reduced-motion page is simply static, no jump. */
[data-parallax] {
  --pll: 0px;
  transform: translate3d(0, var(--pll), 0);
  will-change: transform;
}

/* Soft horizon divider — drop between bands so the eye carries across the
   continuous field instead of hitting a hard rectangle edge. */
.wc-horizon {
  position: relative;
  height: 0;
  border: 0;
  margin: 0;
}
.wc-horizon::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(92%, var(--max-wide));
  height: 1px;
  background: var(--grad-horizon);
  opacity: .5;
  pointer-events: none;
}

/* Editorial deck/lede: the magazine sentence after a mega headline. */
.wc-lede {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Eyebrow horizon hairline — ties any eyebrow into the one atmosphere
   story. Opt-in modifier so existing .eyebrow markup is untouched. */
.eyebrow.wc-eyebrow--rule { position: relative; }
.eyebrow.wc-eyebrow--rule::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  margin-top: 10px;
  background: var(--grad-horizon);
  border-radius: 1px;
}

/* Three-floor z-depth surface helpers (foundation owns the ramp). */
.wc-floor-1 { box-shadow: var(--shadow-float); }
.wc-floor-2 { box-shadow: var(--shadow-lift); }
.wc-floor-hero { box-shadow: var(--shadow-hero); }
.wc-glow { box-shadow: var(--shadow-sun-glow); }

/* ---- Typography system ---- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.06;
  text-wrap: balance;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
h1 {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.018em;
  max-width: 24ch;
  text-wrap: balance;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: -0.014em;
  line-height: 1.07;
  max-width: 24ch;
  text-wrap: balance;
}
h3 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.006em; line-height: 1.18; }
h4 { font-size: 19px; font-weight: 800; letter-spacing: -0.004em; line-height: 1.22; }
h5 { font-size: 16px; font-weight: 800; letter-spacing: 0; line-height: 1.3; }
h6 { font-size: 14px; font-weight: 800; letter-spacing: 0; line-height: 1.3; }

.section-head h2,
.reviews h2,
.cta-panel h2,
.page-hero h2 { max-width: 28ch; text-wrap: pretty; }

p { text-wrap: pretty; }

.grad-word {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grad-word.is-sunset,
.grad-word--warm {
  background: var(--grad-sunset);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad-word { color: var(--blue-deep); -webkit-text-fill-color: currentColor; }
}

.lead,
.hero p,
.page-hero p {
  font-size: var(--fs-lead);
  line-height: 1.5;
  letter-spacing: -0.006em;
  font-weight: 500;
}

.hero p { max-width: 60ch; }
.section-head p,
.reviews p,
.cta-panel p,
.page-hero p { max-width: min(var(--max-text), 64ch); }

.service-card p,
.proof-card p,
.area-card p,
.faq-item p,
.split p {
  font-size: var(--fs-body);
  line-height: 1.62;
  max-width: 62ch;
}

.eyebrow {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--orange-ink);
  font-feature-settings: "kern" 1, "case" 1;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-xs);
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ---- Containers ---- */
.topbar-inner,
.nav-inner,
.container {
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  margin: 0 auto;
}
.container--wide { width: min(var(--max-wide), calc(100% - 2 * var(--gutter))); }

/* =====================================================================
   3. HEADER & NAVIGATION
   ===================================================================== */
.site-header {
  --hdr-h: 78px;
  --hdr-h-shrunk: 64px;
  --topbar-h: 38px;
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid rgba(217, 230, 242, .8);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(251,253,255,.9));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  transition:
    box-shadow var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out);
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 18%, rgba(255,255,255,.9) 82%, transparent);
  opacity: .7;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: rgba(217, 230, 242, .95);
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-header);
}
.site-header.is-scrolled::after {
  background: linear-gradient(90deg, transparent, rgba(7,92,159,0) 8%, rgba(7,92,159,.28) 30%, rgba(242,140,24,.45) 50%, rgba(7,92,159,.28) 70%, rgba(7,92,159,0) 92%, transparent);
  opacity: 1;
}

/* ---- Topbar ---- */
.topbar {
  position: relative;
  background: var(--grad-night);
  color: #fff;
  font-size: var(--fs-xs);
  letter-spacing: .01em;
  overflow: hidden;
  max-height: var(--topbar-h);
  transition: max-height var(--dur) var(--ease-out), opacity calc(var(--dur) * .7) var(--ease-out);
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 2px,
    transparent 2px, transparent 9px,
    rgba(120,190,255,.07) 9px, rgba(120,190,255,.07) 10px,
    transparent 10px, transparent 26px
  );
  background-size: 220px 100%;
  opacity: .9;
  animation: hdrAirflow 24s linear infinite;
  pointer-events: none;
}
.topbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 160% at 4% 50%, rgba(242,140,24,.20), transparent 60%);
  pointer-events: none;
}
@keyframes hdrAirflow { from { background-position: 0 0; } to { background-position: 220px 0; } }

.site-header.is-scrolled .topbar { max-height: 0; opacity: 0; }

.topbar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 8px 0;
}
.topbar-inner > span { color: var(--on-dark-soft); font-weight: 600; }

.topbar a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 12px 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  color: #fff;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.topbar a::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(255,180,84,.6);
  animation: hdrLivePulse 2.6s var(--ease-out) infinite;
}
.topbar a:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}
@keyframes hdrLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,180,84,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(255,180,84,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,180,84,0); }
}

/* ---- Nav row ---- */
.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--hdr-h);
  transition: min-height var(--dur) var(--ease-out);
}
.site-header.is-scrolled .nav-inner { min-height: var(--hdr-h-shrunk); }

/* ---- Brand ---- */
.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 230px;
  border-radius: var(--radius-sm);
  transition: transform var(--dur) var(--ease-out);
}
.brand:hover { transform: translateY(-1px); }

.brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: radial-gradient(120% 120% at 30% 20%, #ffffff, var(--blue-tint));
  box-shadow: var(--shadow-brand);
  transition: width var(--dur) var(--ease-out), height var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.site-header.is-scrolled .brand img { width: 44px; height: 44px; }
.brand:hover img {
  box-shadow: var(--shadow-brand-hover);
}

.brand strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.006em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.brand span {
  display: block;
  font-family: var(--font-sans);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand > span { text-transform: none; letter-spacing: 0; color: inherit; }

/* ---- Primary nav links ---- */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
}
.nav-links a {
  position: relative;
  padding: 9px 14px;
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  border-radius: var(--radius-pill);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-sunset);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
.nav-links a:hover { color: var(--blue); background: var(--blue-pale); }
.nav-links a:hover::after { transform: scaleX(.5); }
.nav-links a[aria-current="page"] {
  color: var(--blue-deep);
  font-weight: 800;
  background: linear-gradient(180deg, rgba(223,239,255,.92), rgba(204,230,255,.96));
  box-shadow: inset 0 0 0 1px rgba(7,92,159,.14), var(--shadow-xs);
}
.nav-links a[aria-current="page"]:hover {
  background: linear-gradient(180deg, rgba(223,239,255,.92), rgba(204,230,255,.96));
}
.nav-links a[aria-current="page"]::after { height: 2.5px; transform: scaleX(1); }
.nav-links a:focus-visible { outline: none; box-shadow: var(--glow-focus); }

/* ---- Nav actions ---- */
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-actions .btn { position: relative; overflow: hidden; min-height: var(--btn-h-sm); padding: 0 18px; }
.nav-actions .btn-blue {
  position: relative;
  isolation: isolate;
}
.nav-actions .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Menu toggle ---- */
.menu-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: radial-gradient(120% 120% at 30% 20%, #ffffff, var(--blue-tint));
  color: var(--blue-deep);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,.6);
  cursor: pointer;
  transition: box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.menu-toggle:hover {
  border-color: rgba(7,92,159,.35);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,.7);
}
.menu-toggle:active { transform: scale(.96); }
.menu-toggle:focus-visible { outline: none; box-shadow: var(--glow-focus); }
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: currentColor;
  position: absolute;
  left: 0; right: 0;
  transition: transform .28s var(--ease-out), opacity .28s var(--ease-out), top .28s var(--ease-out);
}
.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 22px; }
.menu-toggle span:nth-child(3) { top: 28px; }
body.menu-open .menu-toggle { color: var(--orange-deep); border-color: rgba(242,140,24,.4); }
body.menu-open .menu-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.menu-open .menu-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

.nav-cta-mobile { display: none; }

/* =====================================================================
   4. HERO
   ===================================================================== */
.hero {
  position: relative;
  min-height: min(840px, 92vh);
  display: grid;
  align-items: center;
  overflow: hidden;
  color: #fff;
  background: var(--blue-night);
  isolation: isolate;
  /* Real hero photo (work-09): technician + rooftop unit sit center-right in
     the lower third under a bright sky. Bias the crop so heads/units aren't
     cut on tall viewports. */
  --hero-focus: 60% 58%;
}
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focus);
  z-index: 0;
  transform: scale(1.06);
  animation: heroKen 32s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
@keyframes heroKen {
  from { transform: translateY(var(--pll, 0px)) scale(1.055) translate3d(0, 0, 0); }
  to   { transform: translateY(var(--pll, 0px)) scale(1.10)  translate3d(-1%, -.7%, 0); }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Left-weighted darkening wash (NEW, top layer) keeps the white headline
     column solid over the bright sky while the technician on the right stays
     visible; existing brand glow/mesh/grad sit beneath it. */
  background:
    linear-gradient(100deg,
      rgba(5,16,32,.86) 0%,
      rgba(5,16,32,.62) 34%,
      rgba(6,24,46,.20) 60%,
      rgba(6,24,46,0) 82%),
    var(--grad-hero-glow),
    var(--mesh-cool),
    var(--grad-hero);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5,16,32,.42) 0%, rgba(5,16,32,0) 18%),
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg, transparent 58%, rgba(5,16,32,.72) 100%),
    repeating-linear-gradient(180deg,
      transparent 0, transparent 64px,
      rgba(146,200,255,.035) 64px, rgba(146,200,255,.035) 65px,
      transparent 65px, transparent 130px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 260px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  animation: heroAirflow 34s linear infinite;
  will-change: background-position;
}
@keyframes heroAirflow { to { background-position: 0 0, 0 0, 0 0, 0 260px; } }
/* Mobile single-column hero: text overlays the work-09 photo directly, so
   strengthen the full-height scrim and refocus so both the headline (over
   bright sky) and the quote card (over concrete) stay readable. */
@media (max-width: 860px) {
  .hero { --hero-focus: 58% 46%; }
  .hero::before {
    background:
      linear-gradient(180deg,
        rgba(5,16,32,.80) 0%,
        rgba(5,16,32,.58) 30%,
        rgba(6,24,46,.40) 60%,
        rgba(5,16,32,.78) 100%),
      var(--grad-hero-glow),
      var(--mesh-cool),
      var(--grad-hero);
  }
}

/* =====================================================================
   HERO — CINEMATIC LAYERED DEPTH STACK (additive; index hero only)
   A true element-based z-stack over the work-09 photo replaces the flat
   single-scrim look with foreground/midground/background separation:
     photo (parallax) -> sun glow (parallax) -> angled veil -> grain -> floor.
   The legacy ::before veil is dialed back so the new --hero-veil-strong
   carries the left-weighted darkening; ::after keeps the airflow grain.
   ===================================================================== */
.hero--cinematic { --hero-focus: 58% 60%; }
.hero--cinematic .hero__photo {
  /* slightly tighter base scale leaves room for the parallax drift */
  transform: scale(1.08) translate3d(0,0,0);
}
/* Soften the legacy pseudo-veil so the new layered stack reads cleanly. */
.hero--cinematic::before {
  background:
    linear-gradient(100deg,
      rgba(5,16,32,.30) 0%,
      rgba(5,16,32,.10) 40%,
      transparent 70%),
    var(--mesh-cool);
  opacity: .9;
}

.hero__layers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero__layers > span {
  position: absolute;
  inset: 0;
  display: block;
}
/* BACKGROUND: warm West-Texas sun glow, drifts subtly on scroll (parallax) */
.hero__sun {
  background: var(--hero-sun);
  /* one ambient breath — the page's single hero pulse lives on the badge dot,
     so this is a very slow, low-amplitude luminance shift, not a loop that
     competes for attention */
  opacity: .92;
  mix-blend-mode: screen;
  transform: translateY(var(--pll, 0px));
  animation: heroSunBreathe 12s var(--ease-in-out) infinite alternate;
  will-change: opacity, transform;
}
@keyframes heroSunBreathe {
  from { opacity: .78; }
  to   { opacity: 1; }
}
/* MIDGROUND: strong angled editorial veil — keeps the headline column solid */
.hero__veil { background: var(--hero-veil-strong); }
/* fine grain + top sheen for cinematic texture (no motion) */
.hero__grain {
  background: var(--hero-grain);
  opacity: .9;
}
/* FOREGROUND FLOOR: grounds the lower third so the quote-card + trust row
   sit on a confident dark base, carrying the eye toward the next section */
.hero__floor { background: var(--hero-floor); }

/* On phones the photo gets a full-height veil so text stays legible over
   both the bright sky (headline) and the concrete (quote card). */
@media (max-width: 860px) {
  .hero--cinematic { --hero-focus: 56% 48%; }
  .hero__veil {
    background:
      linear-gradient(180deg,
        rgba(4,12,24,.86) 0%,
        rgba(4,12,24,.60) 30%,
        rgba(5,20,40,.48) 58%,
        rgba(4,12,24,.82) 100%);
  }
  .hero__sun { opacity: .7; }
}

.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .82fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  padding: clamp(96px, 11vw, 132px) 0 clamp(88px, 10vw, 120px);
}
.hero-copy { max-width: 720px; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 12px;
  margin-bottom: 22px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-ring);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(255,255,255,.92);
  position: relative;
  overflow: hidden;
}
/* Sunset-horizon hairline ties the badge into the unified atmosphere system. */
.hero-badge::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--grad-horizon);
  opacity: .55;
}
.hero-badge .dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(255,180,84,.55);
  animation: heroPulse 2.6s var(--ease-out) infinite;
}
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,180,84,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(255,180,84,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,180,84,0); }
}

.hero h1 {
  font-size: var(--fs-display);
  max-width: 15ch;
  letter-spacing: -0.022em;
  line-height: 1.05;
  font-weight: 800;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(4,14,28,.32);
}
.hero h1 .grad-word {
  background: var(--grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* THE flagship statement: one oversized Merriweather anchor line per page.
   Set tight, on its own row, in the hottest sunset gradient. */
.hero--cinematic h1 {
  max-width: 16ch;
  letter-spacing: -0.024em;
}
.hero h1 .hero-h1__mega {
  display: block;
  margin: 2px 0 1px;
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: var(--leading-mega);
  letter-spacing: var(--tracking-mega);
  font-weight: 900;
  text-wrap: balance;
  background: var(--grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* hotter sunset clip + a faint warm bloom behind the glyphs */
  filter: drop-shadow(0 8px 30px rgba(255,106,44,.22));
}
.hero p {
  margin: 22px 0 0;
  max-width: 56ch;
  color: rgba(255,255,255,.92);
  font-size: var(--fs-lead);
  line-height: 1.55;
}
/* Editorial "deck" after the mega headline: slightly larger, wider measure,
   a touch softer — reads like a magazine lede, not body copy. */
.hero-lede {
  max-width: 54ch;
  color: var(--on-dark-soft);
  font-size: clamp(17px, 1.9vw, 21px);
  line-height: 1.6;
  text-wrap: pretty;
}
.hero-lede::first-line { color: #fff; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(28px, 3.4vw, 36px);
}

.hero .btn { position: relative; overflow: hidden; min-height: var(--btn-h-lg); padding: 0 26px; transition: transform var(--dur) var(--ease-glide), box-shadow var(--dur) var(--ease-glide); }
.hero .btn-primary {
  background: var(--grad-sun);
  box-shadow: var(--shadow-orange);
  /* animation handled by global .btn-primary (btnBreathe) — no second loop */
}
/* Magnetic warm lift: the hero primary blooms a sunset glow + a slow sheen
   sweep on hover/focus, signalling "this is the action" without a loop. */
.hero .btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: var(--btn-shine);
  transform: skewX(-18deg);
  pointer-events: none;
  opacity: 0;
}
.hero .btn-primary:hover,
.hero .btn-primary:focus-visible {
  box-shadow: var(--shadow-sun-glow), var(--shadow-orange);
}
.hero .btn-primary:hover::before,
.hero .btn-primary:focus-visible::before {
  animation: heroSheen 1.1s var(--ease-glide);
}
@keyframes heroSheen {
  0%   { left: -120%; opacity: 0; }
  12%  { opacity: .9; }
  100% { left: 140%; opacity: 0; }
}
.hero .btn-ghost {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.09);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
.hero .btn:hover { transform: translateY(-3px); }

/* ---- Trust ribbon ---- */
.trust-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(30px, 3.6vw, 40px);
  max-width: 720px;
}
.trust-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px 16px 15px 18px;
  min-height: 84px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
  box-shadow: var(--shadow-ring);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.trust-chip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--grad-sheen);
  opacity: .5;
  pointer-events: none;
}
.trust-chip:hover { transform: translateY(-3px); background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.32); }
/* Small sunset-tinted glyph in the chip corner — adds craft + scannability
   without competing with the live dot on <strong>. */
.trust-chip__icon {
  position: absolute;
  top: 12px; right: 12px;
  width: 20px; height: 20px;
  fill: none;
  stroke: var(--sun-glow);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
  filter: drop-shadow(0 1px 4px rgba(255,106,44,.35));
  transition: transform var(--dur) var(--ease-glide), opacity var(--dur) var(--ease-glide);
}
.trust-chip:hover .trust-chip__icon { transform: translateY(-1px) scale(1.06); opacity: 1; }
.trust-chip strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
  letter-spacing: .01em;
  line-height: 1.1;
  color: #fff;
}
/* Static halo (no competing pulse) — the badge dot is the hero's one pulse. */
.trust-chip strong::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 2px var(--live-ring);
  animation: none;
}
.trust-chip span { display: block; margin-top: 4px; color: rgba(255,255,255,.80); font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; }

/* =====================================================================
   5. BUTTONS & FORMS
   ===================================================================== */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--btn-h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .005em;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    background-position var(--dur-slow) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}
/* will-change only while pressed/hovered so it isn't promoted at rest */
.btn:hover, .btn:active { will-change: transform; }
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;
  z-index: -1;
  background: var(--btn-shine);
  transform: skewX(-18deg);
  transition: left var(--dur-slow) var(--ease-out);
  pointer-events: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { left: 130%; }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
.btn > * { position: relative; z-index: 1; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled,
.btn[aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .55;
  filter: saturate(.85);
  box-shadow: var(--shadow-xs);
  transform: none;
}
.btn:disabled::after,
.btn[aria-disabled="true"]::after { display: none; }

.btn-primary {
  color: #fff;
  background: var(--grad-sunset);
  background-size: 140% 140%;
  background-position: 0% 50%;
  border-color: transparent;
  box-shadow: var(--shadow-orange);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-position var(--dur-slow) var(--ease-out);
  animation: btnBreathe 6s var(--ease-in-out) infinite;
}
.btn-primary:hover { background-position: 100% 50%; box-shadow: 0 18px 38px -8px rgba(201, 102, 9, .50); }
.btn-primary:focus-visible { box-shadow: var(--focus-ring-orange), var(--shadow-orange); }
@keyframes btnBreathe {
  0%, 100% { box-shadow: 0 12px 26px -8px rgba(242, 140, 24, .34); }
  50%      { box-shadow: 0 16px 40px -6px rgba(242, 140, 24, .52); }
}

.btn-blue {
  color: #fff;
  background: var(--grad-blue);
  background-size: 140% 140%;
  background-position: 0% 50%;
  border-color: transparent;
  box-shadow: var(--shadow-blue);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-position var(--dur-slow) var(--ease-out);
}
.btn-blue:hover { background-position: 100% 50%; box-shadow: 0 18px 38px -8px rgba(6, 40, 78, .46); }

.btn-outline {
  color: var(--blue);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.btn-outline::after { background: linear-gradient(100deg, transparent 0%, rgba(7,92,159,.12) 50%, transparent 100%); }
.btn-outline:hover { color: var(--blue-deep); border-color: var(--blue); background: var(--blue-tint); box-shadow: var(--shadow-sm); }

.btn-ghost {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .72); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); }

.btn[aria-busy="true"] {
  pointer-events: none;
  color: transparent !important;
  transition: none;
}
.btn[aria-busy="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px; height: 18px;
  z-index: 2;
  border: 2.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin .7s linear infinite;
}
.btn[aria-busy="true"]::after { display: none; }
.btn.is-success { background: var(--grad-blue) !important; box-shadow: var(--shadow-blue); animation: none; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ---- Lead form ---- */
.field-grid { display: grid; gap: var(--space-3); }
.quote-card .field-grid { gap: var(--space-4); margin-top: var(--space-2); }

.field-grid .field { position: relative; display: block; }

.field-grid input,
.field-grid select,
.field-grid textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  padding: 18px 15px 8px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field-grid > input,
.field-grid > select { padding: 15px; }

.field-grid input::placeholder,
.field-grid textarea::placeholder { color: var(--ink-mute); font-weight: 500; }
.field-grid .field input::placeholder,
.field-grid .field textarea::placeholder { color: transparent; }

.field-grid input:hover,
.field-grid select:hover,
.field-grid textarea:hover { border-color: #b9d3ea; background: #fff; }

.field-grid input:focus,
.field-grid select:focus,
.field-grid textarea:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(7,92,159,.16); }

.field-grid .field-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: var(--ink-mute);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  pointer-events: none;
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.field-grid .field input:focus + .field-label,
.field-grid .field select:focus + .field-label,
.field-grid .field textarea:focus + .field-label,
.field-grid .field input:not(:placeholder-shown) + .field-label,
.field-grid .field textarea:not(:placeholder-shown) + .field-label,
.field-grid .field select.has-value + .field-label {
  transform: translateY(-15px) scale(.78);
  color: var(--blue);
  font-weight: 800;
}

.field-grid select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23075c9f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 7 7l6-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 13px 9px;
  padding-right: 40px;
  cursor: pointer;
}
.field-grid .field select { padding-right: 40px; }
/* Caret turns blue-deep on focus to echo the active border. */
.field-grid select:focus {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23063d72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 7 7l6-5.5'/%3E%3C/svg%3E");
}
/* Placeholder select shows ONLY the floating label (blank option => no ghost text). */
.field-grid select.is-placeholder { color: transparent; }
.field-grid select.has-value { color: var(--ink); font-weight: 600; }

.field-grid button[type="submit"],
.field-grid .btn { width: 100%; margin-top: var(--space-1); min-height: var(--btn-h-lg); font-size: 15px; }

.field-grid .field input:user-invalid,
.field-grid .field select:user-invalid,
.field-grid .field input.is-invalid,
.field-grid .field select.is-invalid,
.field-grid .field [aria-invalid="true"] {
  border-color: var(--danger);
  background: #fff;
  box-shadow: 0 0 0 4px var(--danger-ring);
}
.field-grid .field input:user-invalid + .field-label,
.field-grid .field select:user-invalid + .field-label,
.field-grid .field input.is-invalid + .field-label,
.field-grid .field select.is-invalid + .field-label,
.field-grid .field [aria-invalid="true"] + .field-label { color: var(--danger-ink); }

.fine-print {
  margin: var(--space-3) 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  text-wrap: pretty;
  transition: color var(--dur) var(--ease-out);
}
.fine-print.is-error { color: var(--danger-ink); }
.fine-print.is-success {
  color: var(--blue-deep);
  font-weight: 700;
  padding-left: 22px;
  position: relative;
}
.fine-print.is-success::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--grad-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---- Frosted quote-card ---- */
.quote-card {
  position: relative;
  align-self: center;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #ffffff, rgba(255,255,255,.975));
  color: var(--ink);
  box-shadow: var(--shadow-lg), var(--shadow-ring);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: clamp(26px, 2.4vw, 32px);
  overflow: hidden;
}
.quote-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-sunset);
  opacity: .95;
}
/* In the cinematic hero, float the card harder off the dark photo and tie its
   top accent to the hotter --grad-sun so it reads as part of the sunset system. */
.hero .quote-card {
  box-shadow: var(--shadow-hero), var(--shadow-ring);
}
.hero .quote-card::before {
  height: 5px;
  background: var(--grad-sun);
  opacity: 1;
}
.quote-card h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-card-title);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.quote-card p { color: var(--ink-soft); font-size: var(--fs-sm); margin: 8px 0 20px; max-width: 40ch; line-height: 1.55; }
.quote-card .fine-print {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-soft);
}

/* =====================================================================
   6. SECTIONING & FEATURE BANDS
   ===================================================================== */
section { padding: var(--section-y) 0; }
section.section--tint { background: var(--grad-cool); }
section.section--divided { position: relative; }
section.section--divided::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}
.section-head .eyebrow { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.section-head .eyebrow::before {
  content: "";
  width: 26px; height: 2px;
  border-radius: var(--radius-pill);
  background: var(--grad-sunset);
}
.section-head h2 { letter-spacing: -0.014em; line-height: 1.07; }
.section-head > div { min-width: 0; }
.section-head p {
  flex: 1 1 clamp(280px, 32vw, 420px);
  min-width: min(280px, 100%);
  max-width: 46ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  text-wrap: pretty;
}

.band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(10, 108, 184, .07), transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--ice) 100%);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0, transparent 46px, rgba(7, 92, 159, .05) 46px, rgba(7, 92, 159, .05) 47px);
  -webkit-mask-image: radial-gradient(120% 70% at 92% 6%, #000, transparent 70%);
  mask-image: radial-gradient(120% 70% at 92% 6%, #000, transparent 70%);
  opacity: .5;
  z-index: 0;
}
/* Split bands lead with media on the left and copy on the right, so bias
   the airflow texture into the upper-left corner where the image sits —
   it never pools behind the text column. */
.band:has(.split)::after {
  -webkit-mask-image: radial-gradient(110% 70% at 8% 4%, #000, transparent 68%);
  mask-image: radial-gradient(110% 70% at 8% 4%, #000, transparent 68%);
}
.band > .container { position: relative; z-index: 1; }

.band--night { color: #fff; background: var(--grad-night); border-color: rgba(255, 255, 255, .08); }
.band--night::after {
  background: repeating-linear-gradient(180deg, transparent 0, transparent 54px, rgba(120, 190, 255, .10) 54px, rgba(120, 190, 255, .10) 55px);
  -webkit-mask-image: radial-gradient(110% 80% at 80% 40%, #000, transparent 78%);
  mask-image: radial-gradient(110% 80% at 80% 40%, #000, transparent 78%);
  animation: bandAirflow 26s linear infinite;
  opacity: 1;
}
.band--night h2, .band--night h3 { color: #fff; }
.band--night p { color: rgba(255, 255, 255, .82); }
.band--night .eyebrow { color: var(--amber); }
.band--night .split li { color: rgba(255, 255, 255, .82); }
@keyframes bandAirflow { from { background-position-y: 0; } to { background-position-y: 110px; } }

.split {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}
.split > div { min-width: 0; }
.split h2 { letter-spacing: -0.014em; line-height: 1.07; }
.split > div > p { color: var(--ink-soft); font-size: var(--fs-lead); }
.split .eyebrow { margin-bottom: 14px; }

.split ul { padding: 0; margin: var(--space-5) 0 0; list-style: none; line-height: 1.5; }
.split li {
  position: relative;
  padding-left: 30px;
  margin: 12px 0;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: 0;
}
.split li::before {
  content: "";
  position: absolute;
  top: .28em; left: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--orange-soft), #fff);
  box-shadow: inset 0 0 0 1.5px rgba(242, 140, 24, .45), var(--shadow-xs);
}
.split li::after {
  content: "";
  position: absolute;
  left: 5px; top: .5em;
  width: 8px; height: 5px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  border-radius: 1px;
  transform: rotate(-45deg);
  transform-origin: center;
}
.split .hero-actions { margin-top: var(--space-6); }

.media-frame {
  position: relative;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--shadow-ring);
  background: var(--blue-pale);
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.media-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 0 4px rgba(255, 255, 255, .08);
}
.media-frame img { border-radius: inherit; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.media-frame:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), var(--shadow-ring), 0 24px 50px -18px rgba(242,140,24,.34); }
.media-frame:hover img { transform: scale(1.035); }

.media-frame__tag {
  position: absolute;
  z-index: 3;
  left: 18px; bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.media-frame__tag::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(242, 140, 24, .2);
  animation: tagPulse 2.6s var(--ease-in-out) infinite;
}
@keyframes tagPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(242, 140, 24, .2); }
  50%      { box-shadow: 0 0 0 7px rgba(242, 140, 24, .05); }
}

/* ---- Stat strip ---- */
.stat-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 249, 254, .92));
  box-shadow: var(--shadow), var(--shadow-ring);
  overflow: hidden;
}
.stat-strip::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 30%, rgba(255, 255, 255, .9) 70%, transparent);
  z-index: 2;
}
.stat-strip div {
  position: relative;
  padding: clamp(24px, 3vw, 34px) clamp(20px, 2.4vw, 30px);
  border-right: 1px solid var(--line-soft);
  text-align: left;
  transition: background var(--dur) var(--ease-out);
}
.stat-strip div::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 64px;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(10, 108, 184, .10), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.stat-strip div:hover { background: rgba(234, 245, 255, .5); }
.stat-strip div:hover::before { opacity: 1; }
.stat-strip div:last-child { border-right: 0; }
.stat-strip strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--blue-deep);
  -webkit-text-fill-color: transparent;
}
.stat-strip span { display: block; margin-top: 10px; color: var(--ink-soft); font-size: var(--fs-sm); font-weight: 700; line-height: 1.45; max-width: 24ch; }
/* Count-up settle. While the number ticks it sits slightly compressed; when
   it lands it springs to full size — a perceptible, premium "snap into place"
   instead of the old barely-visible 2px nudge. transform-only so it never
   fights the strip's reveal translateY (the hook now lives on <strong>). */
.stat-strip strong { transform-origin: left bottom; }
.stat-strip strong.is-counting { transform: scale(.965); will-change: transform; }
.stat-strip strong.is-landed { animation: statLand .46s var(--ease-spring) both; will-change: transform; }
@keyframes statLand {
  0%   { transform: scale(.965); }
  55%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* =====================================================================
   7. SERVICE / AREA / PROOF CARDS
   ===================================================================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}
.proof-grid,
.area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.service-card,
.area-card,
.proof-card {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0)) padding-box,
    var(--surface) padding-box;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.service-card::before,
.area-card::before,
.proof-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 22%, rgba(255,255,255,.9) 78%, transparent);
  opacity: .9;
  pointer-events: none;
  z-index: 2;
}
.service-card::after,
.area-card::after,
.proof-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Composite-free paired inset rings (replaces the mask-composite gradient
     border that flashed/janked on slower GPUs). */
  box-shadow:
    0 0 0 1px rgba(7,92,159,.30) inset,
    0 0 0 4px rgba(7,92,159,.05) inset;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
/* :focus-within dropped for service/proof (no focusable child); kept for
   .area-card which contains a link. Base border BRIGHTENS on hover instead of
   going transparent, so there is no border "flash". */
.service-card:hover,
.area-card:hover,
.proof-card:hover,
.area-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(7,92,159,.34);
  box-shadow: var(--shadow-lg);
}
.service-card:hover::after,
.area-card:hover::after,
.proof-card:hover::after,
.area-card:focus-within::after { opacity: 1; }
.service-card > *,
.area-card > *,
.proof-card > * { position: relative; z-index: 2; }

.service-card {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.area-card, .proof-card { padding: var(--space-6); }

.service-card .icon,
.proof-card .icon {
  position: relative;
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(135% 135% at 28% 18%, #ffffff 0%, var(--blue-pale) 52%, var(--blue-pale-2) 100%);
  color: var(--blue);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(7,92,159,.10),
    0 8px 18px -9px rgba(7,92,159,.42);
  font-size: 0;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.service-card .icon::after,
.proof-card .icon::after {
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--orange);
  /* Quiet static premium accent (was a 10px glow that read as a notification). */
  box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 1px rgba(255,255,255,.55);
}
.service-card .icon svg,
.proof-card .icon svg {
  width: 28px; height: 28px;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  overflow: visible;
  shape-rendering: geometricPrecision;
  transform: translateZ(0);
  transition: transform var(--dur) var(--ease-out);
}
.service-card:hover .icon svg,
.proof-card:hover .icon svg,
.service-card:focus-within .icon svg,
.proof-card:focus-within .icon svg {
  transform: scale(1.06);
}
.service-card:hover .icon,
.proof-card:hover .icon,
.service-card:focus-within .icon,
.proof-card:focus-within .icon {
  transform: translateY(-1px) scale(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(7,92,159,.16), 0 12px 22px -8px rgba(7,92,159,.50);
}

.service-card h3,
.proof-card h3 { margin-top: var(--space-5); }
.service-card p,
.proof-card p,
.area-card p { color: var(--ink-soft); }

.service-card ul {
  padding: 0;
  margin: auto 0 0;            /* bottom-anchored so last lines align across the row */
  padding-top: var(--space-5);
  list-style: none;
  display: grid;
  gap: 10px;
}
.service-card li {
  position: relative;
  padding-left: 30px;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
}
.service-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: var(--radius-pill);
  background: radial-gradient(120% 120% at 30% 25%, #ffffff, var(--blue-pale));
  box-shadow: inset 0 0 0 1px rgba(7,92,159,.14);
}
.service-card li::after {
  content: "";
  position: absolute;
  left: 6px; top: 6px;
  width: 8px; height: 5px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
  border-radius: 1px;
}

.service-card[data-accent="warm"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,0)) padding-box,
    linear-gradient(165deg, var(--orange-soft) 0%, #ffffff 72%) padding-box;
  border-color: rgba(242,140,24,.26);
}
/* Deliberate "featured" rail (recognized emphasis signal) overrides the shared
   white hairline so the lone warm card reads as intent, not an error. */
.service-card[data-accent="warm"]::before {
  background: linear-gradient(90deg, transparent, var(--orange) 22%, var(--orange-bright) 78%, transparent);
  height: 3px;
  opacity: .9;
}
.service-card[data-accent="warm"] .icon {
  background: radial-gradient(120% 120% at 30% 22%, #fff 0%, var(--orange-soft) 60%, #ffe2bd 100%);
  color: var(--orange-deep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(242,140,24,.18), 0 6px 16px -8px rgba(242,140,24,.45);
}
.service-card[data-accent="warm"] .icon::after {
  background: var(--blue);
  box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 1px rgba(255,255,255,.5);
}
/* Keep the brightened hover ring on-theme (amber, not blue). */
.service-card[data-accent="warm"]:hover { border-color: rgba(242,140,24,.42); }
.service-card[data-accent="warm"]:hover::after {
  box-shadow:
    0 0 0 1px rgba(242,140,24,.32) inset,
    0 0 0 4px rgba(242,140,24,.06) inset;
}
.service-card[data-accent="cool"] {
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0)) padding-box,
    linear-gradient(165deg, var(--blue-pale) 0%, #ffffff 62%) padding-box;
  border-color: rgba(7,92,159,.24);
}

.area-card { display: flex; flex-direction: column; gap: 10px; }
.area-card h3 { position: relative; padding-left: 30px; display: flex; align-items: center; }
.area-card h3::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 18px; height: 18px;
  transform: translateY(-55%);
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C7.6 2 4 5.6 4 10c0 5.4 7 11.5 7.3 11.8a1 1 0 0 0 1.4 0C13 21.5 20 15.4 20 10c0-4.4-3.6-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C7.6 2 4 5.6 4 10c0 5.4 7 11.5 7.3 11.8a1 1 0 0 0 1.4 0C13 21.5 20 15.4 20 10c0-4.4-3.6-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z'/></svg>") center / contain no-repeat;
}
.area-card a {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  color: var(--blue);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  border-radius: var(--radius-xs);
  transition: gap var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.area-card a::after { content: "→"; font-weight: 900; transition: transform var(--dur) var(--ease-out); }
.area-card:hover a,
.area-card a:focus-visible { color: var(--blue-deep); gap: 10px; }
.area-card:hover a::after { transform: translateX(3px); }

.area-card a:focus-visible,
.service-card a:focus-visible,
.proof-card a:focus-visible { outline: none; box-shadow: var(--glow-focus); }

/* =====================================================================
   8. REVIEWS & FAQ
   ===================================================================== */
.reviews {
  color: #fff;
  background: var(--blue-night);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Real-photo trust background: work-14 (American Standard condenser with
     the visible Wright Choice QR sticker against siding). Stronger left-
     weighted navy scrim keeps the headline, copy, and 5.0 rating legible. */
  background:
    var(--grad-night),
    var(--mesh-cool),
    linear-gradient(90deg, rgba(6,26,48,.95) 0%, rgba(6,26,48,.86) 42%, rgba(6,26,48,.60) 100%),
    url("gallery/work-14.jpg") right center / cover no-repeat;
  background-blend-mode: normal, screen, multiply, normal;
}
/* Push the branded sticker toward the right edge (away from left-aligned
   copy) on wide viewports so the Wright Choice tag reads as a trust cue. */
@media (min-width: 921px) {
  .reviews::before { background-position: 0 0, 0 0, 0 0, 78% center; }
}
/* On phones the band stacks tall; center the unit and darken the scrim. */
@media (max-width: 920px) {
  .reviews::before {
    background:
      var(--grad-night),
      var(--mesh-cool),
      linear-gradient(180deg, rgba(6,26,48,.92) 0%, rgba(6,26,48,.84) 55%, rgba(6,26,48,.92) 100%),
      url("gallery/work-14.jpg") center 30% / cover no-repeat;
    background-blend-mode: normal, screen, multiply, normal;
  }
}
.reviews::after {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(96deg, transparent 0, transparent 38px, rgba(255,255,255,.05) 38px, rgba(255,255,255,.05) 39px, transparent 40px, transparent 92px);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 20%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 70% 20%, #000 30%, transparent 78%);
  animation: reviews-airflow 24s linear infinite;
  opacity: .9;
}
@keyframes reviews-airflow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-92px, 0, 0); } }

.reviews .container { position: relative; z-index: 1; }
.reviews .eyebrow { color: var(--amber); }
.reviews-head { max-width: var(--max-text); }
.reviews-head h2 { max-width: var(--max-text); }
.reviews p { color: rgba(255,255,255,.88); max-width: var(--max-text); }
.reviews-head > p { margin-bottom: 4px; }

.reviews-rating {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow-ring), 0 10px 30px rgba(6,18,36,.35);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.reviews-rating .rr-score {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  color: #fff;
}
.reviews-rating .stars { font-size: 16px; }
.reviews-rating .rr-meta { display: block; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; color: rgba(255,255,255,.9); }
.reviews-rating .rr-divider { width: 1px; height: 26px; background: linear-gradient(180deg, transparent, rgba(255,255,255,.4), transparent); }
.reviews-rating .rr-live {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 var(--live-ring);
  animation: rr-live-pulse 2.4s var(--ease-out) infinite;
  vertical-align: middle;
}
@keyframes rr-live-pulse {
  0%   { box-shadow: 0 0 0 0 var(--live-ring); }
  70%  { box-shadow: 0 0 0 8px rgba(54,210,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(54,210,126,0); }
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 24px;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: var(--shadow-review);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.review-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  pointer-events: none;
}
.review-card::after {
  content: "\201D";
  position: absolute;
  top: -16px; right: 14px;
  font-family: Merriweather, Georgia, serif;
  font-weight: 900;
  font-size: 92px;
  line-height: 1;
  color: var(--amber);
  opacity: .16;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.review-card:hover,
.review-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.34);
  box-shadow: var(--shadow-review-hover);
}
.review-card:hover::after,
.review-card:focus-within::after { opacity: .4; }
.review-card p {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.94) !important;
  font-size: 16px;
  line-height: 1.6;
  margin: 14px 0 18px;
  flex: 1 1 auto;
}
.review-card strong {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: #fff;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.14);
}
/* Subtle role chip so the three 5-star cards don't read as templated. */
.review-card strong[data-role]::after {
  content: attr(data-role);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--amber);
  padding: 5px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255,180,84,.14);
  box-shadow: inset 0 0 0 1px rgba(255,180,84,.32);
}

.stars {
  position: relative;
  z-index: 1;
  display: inline-block;
  letter-spacing: 3px;
  line-height: 1;
  background: linear-gradient(180deg, #ffe39a 0%, #ffc94d 48%, var(--amber) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--amber);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

/* ---- FAQ ---- */
.faq-list { display: grid; gap: var(--space-3); max-width: 900px; }
.faq-item {
  position: relative;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.faq-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad-sunset);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.faq-item:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }
.faq-item:hover::before { opacity: .4; }
.faq-item.is-open { border-color: rgba(7,92,159,.35); background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.faq-item.is-open::before,
.faq-item.is-open:hover::before { opacity: 1; }

.faq-item > h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  padding: 22px 24px;
}
.faq-item > p { margin: 0; padding: 0 24px 22px; color: var(--ink-soft); }

.faq-item .faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 20px 22px 20px 24px;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  border-radius: var(--radius);
}
.faq-item .faq-trigger h3 { padding: 0; font-size: 18px; }
.faq-item .faq-trigger:focus-visible { outline: none; box-shadow: var(--glow-focus); }

.faq-item .faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue-pale);
  box-shadow: inset 0 0 0 1px rgba(7,92,159,.16);
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.faq-item .faq-icon::before,
.faq-item .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 12px; height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.faq-item .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.is-open .faq-icon { background: var(--orange-soft); box-shadow: inset 0 0 0 1px rgba(242,140,24,.3); }
.faq-item.is-open .faq-icon::before,
.faq-item.is-open .faq-icon::after { background: var(--orange-deep); }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq-item .faq-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.faq-item.is-open .faq-panel { opacity: 1; }
.faq-item .faq-panel p { margin: 0; padding: 2px 24px 22px; color: var(--ink-soft); }

/* =====================================================================
   9. CLOSING CTA + FOOTER + STICKY MOBILE
   ===================================================================== */
@keyframes wc-airflow-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 1200px 0, -1200px 0; }
}
@keyframes wc-live-pulse {
  0%   { box-shadow: 0 0 0 0 var(--live-ring); }
  70%  { box-shadow: 0 0 0 7px rgba(54,210,126,0); }
  100% { box-shadow: 0 0 0 0 rgba(54,210,126,0); }
}

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--grad-night);
  color: #fff;
  padding: var(--section-y-tight) 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 90% at 82% 12%, rgba(10,108,184,.42), transparent 60%),
    radial-gradient(55% 80% at 10% 96%, rgba(242,140,24,.20), transparent 62%);
  pointer-events: none;
}
.cta-band::after {
  content: "";
  position: absolute;
  inset: -20% 0;
  z-index: -1;
  opacity: .5;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 118px, rgba(150,205,255,.10) 118px, rgba(150,205,255,.10) 119px, transparent 120px, transparent 240px),
    repeating-linear-gradient(90deg, transparent 0, transparent 80px, rgba(255,176,84,.06) 80px, rgba(255,176,84,.06) 81px, transparent 82px, transparent 200px);
  background-size: 1200px 100%, 1200px 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  animation: wc-airflow-drift 26s linear infinite;
}

.cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
}
.cta-panel > div:first-child { max-width: 640px; }
@media (max-width: 1100px) {
  .cta-panel { gap: clamp(20px, 3vw, 32px); }
  .cta-panel > div:first-child { max-width: 540px; }
  .cta-panel h2 { font-size: clamp(28px, 3.6vw, 40px); }
}
.cta-panel h2 { font-size: var(--fs-h2); line-height: 1.07; letter-spacing: -0.014em; text-wrap: balance; }
.cta-panel .grad-word {
  background: var(--grad-sunset);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cta-panel p { color: rgba(231,242,255,.80); margin: 14px 0 0; max-width: 600px; font-size: var(--fs-lead); }
.cta-panel .cta-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 7px 14px 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: rgba(231,242,255,.92);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.cta-panel .cta-note::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 0 var(--live-ring);
  animation: wc-live-pulse 2.4s var(--ease-out) infinite;
}
.cta-panel .hero-actions { margin-top: 0; flex-shrink: 0; }
/* No breathing here — the hero primary owns the only looping button gesture.
   The CTA primary gets a richer static elevation + a sharper hover lift instead. */
.cta-band .btn-primary { box-shadow: var(--shadow-orange), 0 0 26px -2px rgba(255,158,44,.28); }
.cta-band .btn-primary:hover { box-shadow: var(--shadow-orange), 0 0 36px 0 rgba(255,158,44,.42); }
.cta-band .btn-ghost {
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }

/* ---- Footer ---- */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--blue-night);
  color: #fff;
  padding: clamp(56px, 7vw, 80px) 0 88px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(7,92,159,0) 6%, var(--blue) 30%, var(--orange) 60%, rgba(242,140,24,0) 94%, transparent);
  opacity: .7;
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 70% at 84% 0%, rgba(10,108,184,.30), transparent 60%),
    radial-gradient(40% 60% at 4% 8%, rgba(242,140,24,.10), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0, transparent 140px, rgba(150,205,255,.05) 140px, rgba(150,205,255,.05) 141px, transparent 142px, transparent 280px);
  background-size: auto, auto, 1400px 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent);
  animation: wc-airflow-drift 34s linear infinite;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 44px);
}
.footer-grid > div:first-child { max-width: 360px; }

.site-footer h2 {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 14px;
  color: #fff;
}
.site-footer h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
}
.site-footer p, .site-footer a { color: var(--footer-text); font-size: 14px; letter-spacing: 0; }
.site-footer p { line-height: 1.65; margin: 0 0 14px; }
.site-footer p:last-child { margin-bottom: 0; }

.footer-grid > div:first-child p:last-child a {
  display: inline-block;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.9;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-grid > div:first-child p:last-child a:hover { color: var(--amber); }

.area-more { margin-top: var(--space-6); }
.area-more h3 { color: var(--ink); margin-bottom: var(--space-2); }
.area-more p { color: var(--ink-soft); margin-bottom: var(--space-4); }
.area-more-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.area-more-links a {
  color: var(--blue-deep);
  font-weight: 600;
  white-space: nowrap;
}
.area-more-links a:hover,
.area-more-links a:focus-visible { text-decoration: underline; }

.footer-links { display: grid; gap: 10px; }
.footer-links a {
  position: relative;
  width: fit-content;
  padding: 1px 0;
  color: var(--footer-text);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.footer-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  height: 1.5px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  transition: transform var(--dur) var(--ease-out);
}
.footer-links a:hover,
.footer-links a:focus-visible { color: #fff; transform: translateX(2px); }
.footer-links a:hover::after,
.footer-links a:focus-visible::after { transform: scaleX(1); }

.site-footer a:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 0 0 5px rgba(255,176,84,.45);
}

.footer-bottom {
  grid-column: 1 / -1;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--footer-faint);
  font-size: 13px;
}
.footer-bottom span:first-child { font-weight: 500; }

/* ---- Sticky mobile dock ---- */
.sticky-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 90;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.97));
  -webkit-backdrop-filter: saturate(160%) blur(18px);
          backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid rgba(217,230,242,.9);
  box-shadow: 0 -12px 34px rgba(6,40,78,.16);
}
.sticky-mobile::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, transparent, var(--blue) 25%, var(--orange) 75%, transparent);
  opacity: .9;
}
.sticky-mobile .btn {
  min-height: 50px;
  padding-left: 8px;
  padding-right: 8px;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.sticky-mobile .btn-primary { box-shadow: var(--shadow-orange); }
/* btn-ghost lives on a LIGHT dock here, so give it a readable blue treatment
   instead of the dark-surface translucent style it carries elsewhere. */
.sticky-mobile .btn-ghost {
  color: var(--blue-deep);
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: var(--shadow-xs);
}
.sticky-mobile .btn-ghost:hover {
  color: var(--blue-deep);
  background: var(--blue-tint);
  border-color: var(--blue);
}

/* =====================================================================
   10. SUBPAGE HOOKS (page-hero, local-map, callout)
   ===================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
  background: var(--grad-blue);
  color: #fff;
}
.page-hero h1, .page-hero h2 { color: #fff; }
.page-hero > img { object-position: var(--hero-focus); }
.page-hero p { max-width: 760px; color: rgba(255,255,255,.86); font-size: var(--fs-lead); }
.page-hero .eyebrow { color: var(--amber); }

.local-map { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

.callout {
  padding: var(--space-6);
  border-left: 5px solid var(--orange);
  border-radius: var(--radius);
  background: var(--blue-pale);
  box-shadow: var(--shadow-sm);
}

/* =====================================================================
   11. MOTION — scroll reveals + stat count-up
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  /* Lighter blur than before: softens media without smearing body text on
     low-DPI mid-transition. Text-led variants (--soft) drop blur entirely. */
  filter: blur(2px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out),
    filter var(--dur-reveal) var(--ease-out);
  /* Stagger step, clamped so a 6-card row never tails past --reveal-step-cap. */
  transition-delay: min(calc(var(--i, 0) * var(--reveal-step)), var(--reveal-step-cap));
  will-change: opacity, transform;
}
/* Text-heavy reveals: no blur (keeps headings crisp through the transition). */
.reveal--soft { transform: translateY(12px); filter: none; }
/* Paired band columns now both RISE instead of sliding toward center, which
   read as a "closing" motion. The text column (carrying --i:1) follows the
   image by one stagger step, so the eye lands on the image first. */
.reveal--left  { transform: translateY(18px); filter: none; }
.reveal--right { transform: translateY(18px); filter: none; }
.reveal--scale { transform: translateY(14px) scale(.985); filter: none; }
.reveal.is-visible { opacity: 1; transform: none; filter: none; will-change: auto; }

/* First-paint entrance: elements already in view still animate, just faster
   with a tight uniform stagger so the above-the-fold block resolves quickly
   instead of snapping or dragging. */
.reveal.reveal-quick {
  transition-duration: .46s, .46s, .46s;
  transition-delay: min(calc(var(--i, 0) * 36ms), 144ms);
}

/* ---------------------------------------------------------------------
   11b. SIGNATURE MOTION LAYER  (motion domain — additive)
   Cinematic reveal, horizon-parallax composition, magnetic hover bloom.
   Transform/opacity only; every effect is disabled under reduced motion
   in section 14. No existing selector is overridden destructively.
   --------------------------------------------------------------------- */

/* Cinematic entrance - reserve for hero-tier section openers. Longer,
   confident settle (no bounce) with a deeper rise + soft focus pull.
   Opt-in modifier on top of .reveal, so the IO system still drives it. */
.reveal.reveal--cine {
  transform: translateY(26px);
  filter: blur(4px);
  transition:
    opacity var(--dur-cine) var(--ease-cinematic),
    transform var(--dur-cine) var(--ease-cinematic),
    filter var(--dur-cine) var(--ease-cinematic);
  transition-delay: min(calc(var(--i, 0) * var(--reveal-step)), var(--reveal-step-cap));
}
.reveal.reveal--cine.is-visible { transform: none; filter: none; }

/* Horizon parallax composition --------------------------------------
   The engine writes only --pll (a px offset). The base [data-parallax]
   rule already maps that onto `transform`. But the hero photo also runs
   the heroKen animation on `transform`, which would win - so for any
   parallax PHOTO we route the drift through the independent CSS
   `translate` property instead, letting Ken Burns (transform) and the
   parallax (translate) compose cleanly with zero conflict and zero CLS. */
.hero > img[data-parallax],
img[data-parallax],
.hero__photo[data-parallax] {
  transform: none;                 /* let the photo's own animation own transform */
  translate: 0 var(--pll, 0px);    /* parallax drift rides here, composes w/ Ken Burns */
  will-change: transform, translate;
}
/* Give the hero photo a touch of vertical slack so a drifting layer can
   never reveal an edge (it is already over-scaled by Ken Burns; this just
   guarantees headroom for the parallax range). Transform/translate only. */
.hero > img[data-parallax] { top: -4%; height: 108%; }

/* =====================================================================
   BUTTONS & CTAs — AWARD-GRADE ELEVATION (additive, in-lane)
   Tactile press, magnetic glide lift, slow cinematic sheen, premium
   sunset-glow primaries, and a cohesive depth language across EVERY
   .btn variant. Purely additive: never renames a class, never changes
   the transform PATH's value (only its easing), never breaks busy /
   success / disabled / focus states. Disabled wholesale under
   prefers-reduced-motion by the existing reduced-motion block. ========= */

/* ---- 1. Cohesive magnetic glide for the whole .btn family --------------
   Every variant lifts on the confident glide easing (no bounce); the sheen
   blade is wider, softer, and sweeps on a longer cinematic pass so the
   whole family shares one luxe motion signature. */
.btn {
  transition:
    transform var(--dur-fast) var(--ease-glide),
    box-shadow var(--dur) var(--ease-glide),
    background-color var(--dur) var(--ease-glide),
    background-position var(--dur-slow) var(--ease-out),
    border-color var(--dur) var(--ease-glide),
    color var(--dur) var(--ease-glide);
}
.btn::after {
  width: 58%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.46) 50%, transparent 100%);
  transition: left var(--dur-cine) var(--ease-glide);
}
.btn:hover::after { left: 142%; }

/* Refined magnetic lift + crisp tactile press: the button rises a touch
   more on the glide, then sinks and tightens under the finger on click. */
.btn:hover { transform: translateY(-3px); }
.btn:active {
  transform: translateY(-1px) scale(.97);
  transition-duration: .09s;
  transition-timing-function: var(--ease-glide);
}

/* Lit-surface inset highlight on the filled variants so each gradient
   reads as a dimensional, top-lit surface rather than a flat fill.
   Layered into box-shadow — never disturbs layout or the focus ring. */
.btn-primary { box-shadow: var(--shadow-orange), var(--shadow-inset-ring); }
.btn-blue    { box-shadow: var(--shadow-blue),   var(--shadow-inset-ring); }

/* ---- 2. Premium PRIMARY — signature sunset-glow bloom ------------------
   Hover blooms the warm sun-glow ring (the page's hottest CTA moment) over
   a deeper warm cast; focus keeps that bloom WITH the orange focus ring;
   press settles back to the grounded resting shadow. */
.btn-primary {
  transition:
    transform var(--dur-fast) var(--ease-glide),
    box-shadow var(--dur) var(--ease-glide),
    background-position var(--dur-slow) var(--ease-out);
}
.btn-primary:hover {
  box-shadow:
    var(--shadow-sun-glow),
    0 20px 44px -10px rgba(201, 102, 9, .52),
    var(--shadow-inset-ring);
}
.btn-primary:focus-visible {
  box-shadow: var(--focus-ring-orange), var(--shadow-sun-glow), var(--shadow-inset-ring);
}
.btn-primary:active {
  box-shadow: var(--shadow-orange), var(--shadow-inset-ring);
}
.btn-primary:hover::after { transition-duration: var(--dur-cine); }

/* ---- 3. BLUE — the cool twin of the primary's bloom -------------------
   Mirrors the magnetic language with a cool depth bloom so secondary
   filled CTAs read as the same family, never an afterthought. */
.btn-blue:hover {
  box-shadow:
    0 22px 46px -10px rgba(6, 40, 78, .50),
    0 0 28px -4px rgba(10, 108, 184, .42),
    var(--shadow-inset-ring);
}
.btn-blue:focus-visible {
  box-shadow: var(--focus-ring), var(--shadow-blue), var(--shadow-inset-ring);
}
.btn-blue:active { box-shadow: var(--shadow-blue), var(--shadow-inset-ring); }

/* ---- 4. OUTLINE — calm at rest, warm-cool depth on intent -------------
   Stays trustworthy white at rest, then gains a soft branded lift so it
   harmonizes with the warm primary beside it. */
.btn-outline:hover {
  box-shadow:
    var(--shadow-sm),
    0 12px 26px -12px rgba(7, 92, 159, .34);
}
.btn-outline:active { box-shadow: var(--shadow-xs); }

/* ---- 5. GHOST — luminous glass lit by the same sunset ----------------
   On dark sections the ghost gains a faint warm inner glow on hover so it
   feels lit from the sunset rather than a plain translucent panel. */
.btn-ghost:hover {
  box-shadow:
    0 14px 32px -10px rgba(0, 0, 0, .50),
    inset 0 0 0 1px rgba(255,255,255,.20),
    inset 0 18px 40px -22px rgba(255,180,84,.30);
}

/* ---- 6. Magnetic cursor-tracking (opt-in, JS-driven) -----------------
   site.js may set --mx/--my (0-1) on a [data-magnetic] filled button; we
   slide the lit gradient highlight toward the cursor for a premium "alive"
   feel. Background-position only — the transform path stays untouched, and
   it falls back to the resting centered fill when JS / the vars are absent. */
.btn-primary[data-magnetic],
.btn-blue[data-magnetic] {
  background-position: calc(var(--mx, .5) * 100%) calc(var(--my, .5) * 100%);
}

/* Magnetic card lift - service / proof / area cards rise with a warm
   depth bloom on the confident glide easing. Scoped to hover; the
   existing focus-within + reduced-motion handling stays authoritative. */
.service-card,
.proof-card,
.area-card,
.media-frame,
.review-card {
  transition-timing-function: var(--ease-glide);
}
.service-card:hover,
.proof-card:hover,
.area-card:hover {
  box-shadow: var(--shadow-lift);
}

/* Slow sheen sweep for magnetic CTAs - extends the existing .btn::after
   shine into a longer, cinematic pass on the warm buttons only. */
.btn-primary:hover::after { transition-duration: var(--dur-cine); }

/* =====================================================================
   12. RESPONSIVE
   ===================================================================== */
@media (max-width: 980px) {
  .menu-toggle { display: block; margin-left: auto; }
  .nav-actions { display: none; }

  .nav-links {
    position: fixed;
    inset: calc(var(--topbar-h) + var(--hdr-h)) 0 auto 0;
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 2px;
    padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,251,255,.99));
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .28s var(--ease-out), transform .32s var(--ease-out), visibility 0s linear .32s;
    max-height: calc(100dvh - var(--topbar-h) - var(--hdr-h));
    overflow-y: auto;
  }
  .site-header.is-scrolled .nav-links {
    inset: var(--hdr-h-shrunk) 0 auto 0;
    max-height: calc(100dvh - var(--hdr-h-shrunk));
  }
  body.menu-open .nav-links {
    display: grid;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: opacity .3s var(--ease-out), transform .36s var(--ease-out), visibility 0s linear 0s;
  }
  .nav-links a {
    padding: 14px 16px;
    font-size: 16px;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--line-soft);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), color var(--dur-fast) ease, background var(--dur-fast) ease;
  }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links a::after { left: 16px; right: auto; width: 22px; bottom: 10px; }
  body.menu-open .nav-links a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(.06s + var(--i, 0) * .04s);
  }

  .nav-cta-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s var(--ease-out) .34s, transform .4s var(--ease-out) .34s;
  }
  body.menu-open .nav-cta-mobile { opacity: 1; transform: translateY(0); }

  .hero { min-height: auto; }
  .hero .container { grid-template-columns: 1fr; }
  .quote-card { max-width: 560px; }
  .hero h1 { max-width: 18ch; }

  .split,
  .local-map { grid-template-columns: 1fr; }

  .service-grid,
  .proof-grid,
  .review-grid,
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-strip div:nth-child(2) { border-right: 0; }
  .stat-strip div:nth-child(1),
  .stat-strip div:nth-child(2) { border-bottom: 1px solid var(--line-soft); }

  .cta-panel { flex-direction: column; align-items: flex-start; text-align: left; }
  .cta-panel .hero-actions { width: 100%; }

  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid > div:first-child {
    grid-column: 1 / -1;
    max-width: 520px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .footer-bottom { flex-direction: row; }

  .section-head { align-items: start; flex-direction: column; }
  .section-head p { flex: 0 1 auto; max-width: 60ch; }

  /* Sticky conversion dock now covers the whole tablet range (no desktop
     nav actions are visible below 980px, so the dock is the call path). */
  .sticky-mobile { display: grid; }
  .site-footer { padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 700px) {
  .site-header { --topbar-h: 0px; }
  .topbar { display: none; }
  .nav-links { inset: var(--hdr-h) 0 auto 0; }
  .site-header.is-scrolled .nav-links { inset: var(--hdr-h-shrunk) 0 auto 0; }
  .brand { min-width: 0; gap: 10px; }
  .brand strong { font-size: 14px; }
  /* Keep a balanced two-line lockup on phones rather than an orphaned bold word. */
  .brand > span > span { font-size: 9.5px; letter-spacing: .03em; line-height: 1.2; }

  body { line-height: 1.58; }
  h1 { letter-spacing: -0.014em; line-height: 1.1; }
  h2 { letter-spacing: -0.012em; line-height: 1.12; }
  .hero h1 { letter-spacing: -0.018em; line-height: 1.08; }
  .hero p, .page-hero p { max-width: 100%; }

  .hero .container { padding: 64px 0 76px; gap: 30px; }
  .hero-actions .btn { width: 100%; }
  .trust-row { grid-template-columns: 1fr; }
  .hero h1 { max-width: 100%; }

  .field-grid input,
  .field-grid select,
  .field-grid textarea { font-size: 16px; }

  .service-card,
  .area-card,
  .proof-card { padding: var(--space-5); }
  .service-card { min-height: 0; }

  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip div {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
    padding: 22px;
  }
  .stat-strip div::before { left: 50%; }
  .stat-strip span { margin-left: auto; margin-right: auto; }
  .stat-strip div:last-child { border-bottom: 0; }
  .media-frame__tag { left: 12px; bottom: 12px; padding: 8px 13px; }

  .service-grid,
  .proof-grid,
  .review-grid,
  .area-grid { grid-template-columns: 1fr; }

  .review-card { padding: 26px 22px 22px; }
  .faq-item > h3,
  .faq-item .faq-trigger { padding-left: 20px; padding-right: 18px; }
  .faq-item > p,
  .faq-item .faq-panel p { padding-left: 20px; padding-right: 20px; }
  .reviews-rating { flex-wrap: wrap; row-gap: 8px; }

  .cta-band { padding: 56px 0; }
  .cta-panel { gap: 22px; }
  .cta-panel h2 { font-size: clamp(28px, 8vw, 36px); }
  .cta-panel p { font-size: 16px; }
  .cta-panel .hero-actions { flex-direction: column; align-items: stretch; }
  .cta-panel .hero-actions .btn { width: 100%; }
  .cta-panel .cta-note { width: fit-content; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; max-width: none; text-align: left; }
  .site-footer h2 { font-size: 17px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }

  .local-map { grid-template-columns: 1fr; }

  section { padding: 64px 0; }
  .page-hero { padding: 62px 0; }
}

@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-grid > div:first-child { padding-bottom: 16px; }
}

/* =====================================================================
   13. ENTRANCE ANIMATION (hero) — separate so reduced-motion can override
   ===================================================================== */
.hero .hero-badge,
.hero h1,
.hero-copy > p,
.hero-actions,
.trust-row,
.quote-card {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  animation: heroRise var(--dur-reveal) var(--ease-out) forwards;
}
.hero .hero-badge   { animation-delay: .06s; }
.hero h1            { animation-delay: .16s; }
.hero-copy > p      { animation-delay: .26s; }
.hero-actions       { animation-delay: .36s; }
.trust-row          { animation-delay: .46s; }
.quote-card         { animation-delay: .54s; }
@keyframes heroRise { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* Cinematic hero: longer, confident settle on a single signature easing; the
   mega anchor word rises a touch later for a "headline lands last" beat, and
   the layered depth stack clarifies in behind the copy. */
.hero--cinematic .hero-badge,
.hero--cinematic h1,
.hero--cinematic .hero-copy > p,
.hero--cinematic .hero-actions,
.hero--cinematic .trust-row,
.hero--cinematic .quote-card {
  transform: translateY(26px);
  animation-name: heroRiseCine;
  animation-duration: var(--dur-cine);
  animation-timing-function: var(--ease-cinematic);
}
@keyframes heroRiseCine { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
.hero--cinematic .hero-h1__mega {
  display: block;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  animation: heroMegaIn var(--dur-cine) var(--ease-cinematic) .30s forwards;
}
@keyframes heroMegaIn {
  to { opacity: 1; transform: translateY(0); filter: drop-shadow(0 8px 30px rgba(255,106,44,.22)); }
}
.hero--cinematic .hero__layers > span {
  opacity: 0;
  animation: heroLayerIn 1.2s var(--ease-cinematic) .05s forwards;
}
.hero--cinematic .hero__sun   { animation-delay: .02s; }
.hero--cinematic .hero__veil  { animation-delay: .08s; }
.hero--cinematic .hero__grain { animation-delay: .14s; }
.hero--cinematic .hero__floor { animation-delay: .18s; }
@keyframes heroLayerIn { to { opacity: 1; } }
/* keep the sun's own breathing loop after the intro resolves */
.hero--cinematic .hero__sun {
  animation:
    heroLayerIn 1.2s var(--ease-cinematic) .02s forwards,
    heroSunBreathe 12s var(--ease-in-out) 1.2s infinite alternate;
}

/* If the hero copy/card carry .reveal (motion specialist), the IO system
   drives them instead — keep them visible by default so nothing hangs. */
.hero .hero-copy.reveal,
.hero .quote-card.reveal { animation: none; }

/* =====================================================================
   14. REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { background-attachment: scroll, scroll, scroll, scroll; }
  /* Round-6: kill horizon parallax — content stays static & legible. */
  [data-parallax] { --pll: 0px !important; transform: none !important; translate: none !important; will-change: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  h1, h2, h3, p { text-wrap: initial; }

  .hero > img { transform: scale(1.04); animation: none !important; }
  .hero--cinematic .hero__photo { transform: scale(1.04) !important; }
  .hero::after,
  .hero .btn-primary,
  .hero .btn-primary::before,
  .hero__sun,
  .hero-badge .dot,
  .trust-chip strong::before { animation: none !important; }
  /* Layered depth + mega word appear instantly, fully legible. */
  .hero--cinematic .hero__layers > span { opacity: 1 !important; animation: none !important; }
  .hero--cinematic .hero__sun { opacity: .85 !important; }
  .hero .hero-badge,
  .hero h1,
  .hero .hero-h1__mega,
  .hero-copy > p,
  .hero-actions,
  .trust-row,
  .quote-card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .hero .btn::after,
  .hero .btn-primary::before { display: none; }

  .topbar::before,
  .topbar a::before,
  .band--night::after,
  .media-frame__tag::before,
  .reviews::after,
  .reviews-rating .rr-live,
  .cta-band::after,
  .site-footer::after,
  .cta-band .btn-primary,
  .cta-panel .cta-note::before,
  .btn,
  .btn-primary,
  .stat-strip strong.is-counting,
  .stat-strip strong.is-landed { animation: none !important; transform: none !important; }

  .btn::after,
  .nav-actions .btn::after { display: none; }
  .btn:hover,
  .btn:active { transform: none; }
  .btn[aria-busy="true"]::before { animation: none; }

  .service-card:hover,
  .area-card:hover,
  .proof-card:hover,
  .media-frame:hover,
  .review-card:hover,
  .review-card:focus-within { transform: none; }
  .service-card:hover .icon,
  .proof-card:hover .icon,
  .service-card:hover .icon svg,
  .proof-card:hover .icon svg,
  .service-card:focus-within .icon svg,
  .proof-card:focus-within .icon svg { transform: none; }
  .media-frame:hover img { transform: none; }

  .reveal,
  .reveal--soft,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal.reveal--cine,
  .reveal.reveal-quick {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    transition-delay: 0s !important;
    will-change: auto;
  }
}

/* =====================================================================
   WRIGHT CHOICE — REAL WORK SLIDING GALLERY + LIGHTBOX
   Consolidated from the gallery component, interaction, visual-polish,
   performance, a11y/mobile, and lightbox lanes into ONE clean set.
   Scoped to .wc-gallery* / .wc-lightbox*; token-driven; honors
   prefers-reduced-motion. No shared selectors touched.
   ===================================================================== */
.wc-gallery {
  --wc-gap: clamp(14px, 2vw, 24px);
  --wc-peek: clamp(30px, 9.5vw, 150px);   /* neighbor peek on desktop */
  --wc-radius: var(--radius-lg);
  --wc-dim: rgba(6, 18, 36, .34);
  position: relative;
  margin-top: clamp(28px, 4vw, 44px);
  max-width: 100%;
}

/* Viewport masks overflow; the track translates inside it */
.wc-gallery__viewport {
  overflow: hidden;
  max-width: 100%;
  border-radius: var(--wc-radius);
  contain: layout paint;
  box-shadow:
    0 0 0 1px rgba(7, 92, 159, .08),
    var(--shadow-lg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
@media (max-width: 720px) {
  .wc-gallery__viewport { -webkit-mask-image: none; mask-image: none; }
}

.wc-gallery__track {
  display: flex;
  gap: var(--wc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 100%;
  will-change: transform;
  transition: transform var(--dur-slow) var(--ease-out);
  touch-action: pan-y;            /* allow vertical scroll, we handle horizontal */
}
.wc-gallery.is-dragging .wc-gallery__track { transition: none; }

/* Each slide shows one main frame + a peek of neighbors */
.wc-gallery__slide {
  flex: 0 0 calc(100% - (2 * var(--wc-peek)) - (2 * var(--wc-gap)));
  min-width: 0;
}
@media (min-width: 721px) and (max-width: 1024px) {
  .wc-gallery { --wc-peek: clamp(20px, 5vw, 64px); }
}
@media (max-width: 720px) {
  .wc-gallery { --wc-peek: 0px; }
  .wc-gallery__slide { flex-basis: 100%; }
  .wc-gallery__track { scroll-snap-type: none; }
}

/* Offscreen render cost: skip painting far, inactive slides. Width still
   flexes so the JS slideStep()/centering math stays correct. */
.wc-gallery__slide:not(.is-active) {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}
.wc-gallery__slide:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--wc-radius);
}

.wc-gallery__figure {
  position: relative;
  margin: 0;
  border-radius: var(--wc-radius);
  overflow: hidden;
  /* CLS guard: reserve the frame height before the image decodes, with a
     brand-tinted placeholder so streaming images never flash white. */
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, var(--surface-2) 0%, var(--blue-pale) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    var(--shadow-lg);
  isolation: isolate;
}
@media (max-width: 720px) {
  .wc-gallery__figure { aspect-ratio: 3 / 4; }   /* portraits shine on phones */
}
.wc-gallery__slide:not(.is-active) .wc-gallery__figure {
  box-shadow: var(--shadow-md);                  /* recede slightly vs active */
}
/* Depth comes from the inner 1px white ring (inset box-shadow on the figure
   above). The figure's ::before pseudo-element is reserved for the lightbox
   expand glyph (see .wc-gallery__figure--zoomable) so there is no clash. */

/* Fixed aspect-ratio frame normalizes the portrait/landscape mix */
.wc-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 46%;
  transform: scale(1.03);
  filter: saturate(1.04) contrast(1.02);
  transition:
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur) var(--ease-out);
}
@media (max-width: 720px) {
  .wc-gallery__img { aspect-ratio: 3 / 4; }
}
.wc-gallery__slide.is-active .wc-gallery__img {
  transform: scale(1.06);
  filter: saturate(1.06) contrast(1.03);
}

/* Per-orientation focal tuning (integrator adds data-orient on the <li>;
   falls back to the portrait default above if absent). */
.wc-gallery__slide[data-orient="landscape"] .wc-gallery__img { object-position: center 58%; }
.wc-gallery__slide[data-orient="square"]    .wc-gallery__img { object-position: center 50%; }
.wc-gallery__img[src*="work-16"] { object-position: center 64%; }
.wc-gallery__img[src*="work-22"] { object-position: center 60%; }
.wc-gallery__img[src*="work-09"] { object-position: center 56%; }

/* Inactive veil: graceful tint + slight desaturation so the focused frame pops */
.wc-gallery__slide:not(.is-active) .wc-gallery__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(6,18,36,.16) 0%, rgba(6,18,36,.40) 100%);
  -webkit-backdrop-filter: saturate(.86);
          backdrop-filter: saturate(.86);
  transition: opacity var(--dur) var(--ease-out);
}

/* Caption overlay: hidden on inactive, staggered reveal on active */
.wc-gallery__cap {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 3.2vw, 30px);
  color: var(--on-dark);
  background:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(6,18,36,.06) 26%,
      rgba(6,18,36,.46) 64%,
      rgba(6,18,36,.86) 100%);
  transform: translateY(14px);
  opacity: 0;
  transition:
    transform var(--dur) var(--ease-out),
    opacity var(--dur) var(--ease-out);
}
.wc-gallery__slide.is-active .wc-gallery__cap { transform: translateY(0); opacity: 1; }

.wc-gallery__tag {
  align-self: flex-start;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-sunset);
  padding: 6px 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-orange), 0 1px 0 rgba(255,255,255,.25) inset;
  transform: translateY(6px);
  opacity: 0;
  transition:
    transform var(--dur) var(--ease-out) 60ms,
    opacity var(--dur) var(--ease-out) 60ms;
}
.wc-gallery__slide.is-active .wc-gallery__tag { transform: translateY(0); opacity: 1; }

.wc-gallery__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.35;
  max-width: 46ch;
  text-shadow: 0 1px 14px rgba(6,18,36,.55), 0 1px 2px rgba(6,18,36,.4);
  transform: translateY(6px);
  opacity: 0;
  transition:
    transform var(--dur) var(--ease-out) 110ms,
    opacity var(--dur) var(--ease-out) 110ms;
}
.wc-gallery__slide.is-active .wc-gallery__text { transform: translateY(0); opacity: 1; }

/* Arrow controls: glass + animated sheen, brand hover */
.wc-gallery__btn {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.86));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: var(--blue-deep);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.9);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.wc-gallery__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-shine);
  background-size: 220% 100%;
  background-position: 140% 0;
  opacity: 0;
  transition:
    background-position var(--dur-slow) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.wc-gallery__btn svg { width: 24px; height: 24px; transition: transform var(--dur-fast) var(--ease-out); }
.wc-gallery__btn--prev { left: clamp(6px, 1.4vw, 16px); }
.wc-gallery__btn--next { right: clamp(6px, 1.4vw, 16px); }
.wc-gallery__btn:hover {
  background: var(--grad-blue);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
  box-shadow: var(--shadow-blue), inset 0 1px 0 rgba(255,255,255,.22);
}
.wc-gallery__btn:hover::after { opacity: 1; background-position: -40% 0; }
.wc-gallery__btn--prev:hover svg { transform: translateX(-2px); }
.wc-gallery__btn--next:hover svg { transform: translateX(2px); }
.wc-gallery__btn:active { transform: translateY(-50%) scale(.97); }
.wc-gallery__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.wc-gallery__btn:disabled { opacity: .4; cursor: default; }
@media (max-width: 720px) {
  .wc-gallery__btn { width: 46px; height: 46px; }
}
@media (max-width: 420px) {
  .wc-gallery__btn { width: 44px; height: 44px; }
  .wc-gallery__btn--prev { left: 8px; }
  .wc-gallery__btn--next { right: 8px; }
}

/* Dots / pagination — gradient pill active state + 44px hit target */
.wc-gallery__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(18px, 2.5vw, 26px);
}
.wc-gallery__dot {
  position: relative;
  width: 10px;
  min-width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--line);
  box-shadow: inset 0 0 0 1px rgba(7,45,82,.06);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), width var(--dur) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* Invisible 44px hit-area so the visual pill stays 10px (WCAG 2.5.5) */
.wc-gallery__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
}
.wc-gallery__dot:hover { background: var(--blue); transform: scale(1.18) translateY(-1px); }
.wc-gallery__dot.is-active {
  width: 32px;
  background: var(--grad-sunset);
  box-shadow: var(--shadow-orange);
}
.wc-gallery__dot:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (max-width: 480px) {
  .wc-gallery__dots { gap: 14px; padding-inline: 4px; }
}

/* Visually-hidden live region for SR announcements */
.wc-gallery__live {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}

@media (pointer: coarse) {
  .wc-gallery__track { touch-action: pan-y; }
  .wc-gallery__img { -webkit-user-drag: none; user-select: none; }
}

/* Reduced motion: no slide animation, no zoom/sheen; captions stay readable */
@media (prefers-reduced-motion: reduce) {
  .wc-gallery__track { transition: none; }
  .wc-gallery__img { transform: none; transition: none; }
  .wc-gallery__slide.is-active .wc-gallery__img { transform: none; }
  .wc-gallery__cap,
  .wc-gallery__tag,
  .wc-gallery__text {
    transform: none;
    opacity: 1;
    transition: none;
  }
  .wc-gallery__slide:not(.is-active) .wc-gallery__cap { opacity: .96; }
  .wc-gallery__btn,
  .wc-gallery__btn svg,
  .wc-gallery__dot { transition: none; }
  .wc-gallery__btn::after { display: none; }
}

/* =====================================================================
   ABOUT PAGE — portrait media-frame variant (vertical work photo)
   ===================================================================== */
.media-frame--portrait img {
  aspect-ratio: 4 / 5;
  object-position: center 38%;
}
@media (max-width: 760px) {
  .media-frame--portrait img { aspect-ratio: 4 / 4; }
}

/* =====================================================================
   WC LIGHTBOX — fullscreen accessible viewer for the work gallery
   Sits above the header (z 80) and skip-link (z 1000).
   ===================================================================== */

/* Affordance on the gallery figures that open the lightbox */
.wc-gallery__figure--zoomable { cursor: zoom-in; }
.wc-gallery__figure--zoomable:focus-visible {
  outline: none;
  box-shadow: var(--shadow-lg), var(--focus-ring);
}
.wc-gallery__figure--zoomable::before {
  /* The figure ::before becomes the lightbox "expand" affordance glyph. It
     fully replaces the decorative sheen on zoomable figures (every gallery
     figure is made zoomable at runtime), so there is no pseudo-element clash. */
  content: "";
  position: absolute;
  z-index: 5;
  inset: clamp(12px, 2vw, 18px) clamp(12px, 2vw, 18px) auto auto;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background:
    rgba(255,255,255,.92)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23063d72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/g%3E%3C/svg%3E")
    center / 18px no-repeat;
  box-shadow: var(--shadow-sm);
  mix-blend-mode: normal;
  opacity: 0;
  transform: scale(.85);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  pointer-events: none;
}
.wc-gallery__slide.is-active .wc-gallery__figure--zoomable::before,
.wc-gallery__figure--zoomable:hover::before,
.wc-gallery__figure--zoomable:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.wc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out);
}
.wc-lightbox[hidden] { display: none; }
.wc-lightbox.is-open { opacity: 1; visibility: visible; }

.wc-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 24, .82);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
}

.wc-lightbox__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1100px, 100%);
  max-height: 100%;
  transform: translateY(10px) scale(.985);
  opacity: .4;
  transition: transform var(--dur) var(--ease-spring), opacity var(--dur) var(--ease-out);
}
.wc-lightbox.is-open .wc-lightbox__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.wc-lightbox__figure {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100%;
  min-height: 0;
}

.wc-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - clamp(120px, 18vh, 180px));
  width: auto;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--blue-night);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.10) inset;
  object-fit: contain;
}
.wc-lightbox__img.is-in { animation: wcLbImgIn var(--dur) var(--ease-out) both; }
@keyframes wcLbImgIn {
  from { opacity: 0; transform: scale(.992); }
  to   { opacity: 1; transform: scale(1); }
}

.wc-lightbox__cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: clamp(14px, 2vw, 20px);
  padding: 0 clamp(8px, 4vw, 56px);
  text-align: center;
  color: var(--on-dark);
}
.wc-lightbox__tag {
  align-self: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #fff;
  background: var(--grad-sunset);
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-orange);
}
.wc-lightbox__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.4;
  max-width: 60ch;
  color: #fff;
  text-shadow: 0 1px 12px rgba(6,18,36,.5);
}

.wc-lightbox__btn,
.wc-lightbox__close {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.wc-lightbox__btn svg,
.wc-lightbox__close svg { width: 26px; height: 26px; }
.wc-lightbox__btn:hover,
.wc-lightbox__close:hover {
  background: var(--grad-blue);
  border-color: transparent;
  transform: scale(1.06);
  box-shadow: var(--shadow-blue);
}
.wc-lightbox__btn:focus-visible,
.wc-lightbox__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.wc-lightbox__btn {
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
}
.wc-lightbox__btn:hover { transform: translateY(-50%) scale(1.06); }
.wc-lightbox__btn--prev { left: clamp(6px, 2vw, 28px); }
.wc-lightbox__btn--next { right: clamp(6px, 2vw, 28px); }
.wc-lightbox__btn[hidden] { display: none; }
.wc-lightbox__close {
  top: clamp(4px, 1.5vw, 12px);
  right: clamp(4px, 1.5vw, 12px);
  width: 48px;
  height: 48px;
}
.wc-lightbox__counter {
  margin: clamp(10px, 1.6vw, 16px) 0 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-mute);
}
.wc-lightbox__live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

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

@media (max-width: 720px) {
  .wc-lightbox__btn { width: 46px; height: 46px; top: auto; bottom: 18px; transform: none; }
  .wc-lightbox__btn:hover { transform: scale(1.06); }
  .wc-lightbox__btn--prev { left: 18px; }
  .wc-lightbox__btn--next { right: 18px; }
  .wc-lightbox__img { max-height: calc(100vh - 220px); }
}

@media (prefers-reduced-motion: reduce) {
  .wc-lightbox,
  .wc-lightbox__dialog,
  .wc-lightbox__btn,
  .wc-lightbox__close,
  .wc-gallery__figure--zoomable::before { transition: none; }
  .wc-lightbox__dialog { transform: none; opacity: 1; }
  .wc-lightbox__img,
  .wc-lightbox__img.is-in { animation: none; }
}

/* =====================================================================
   15. CLOSING EXPERIENCE — "Dusk Horizon" (Round-6 elevation)
   Domain: reviews-cta-footer-mobile. Additive only — new hooks
   (.wc-night--abyss, .wc-cta--dusk) already present in markup; no
   existing selector renamed. Composes on the unified atmosphere story:
   the page descends from dawn-white into a deep navy night, then closes
   on a luminous West-Texas dusk. All new motion is reduced-motion-safe.
   ===================================================================== */

/* ---- Night-sky theater: deepen any band toward the true abyss floor ----
   Layered radial "stars" + a faint horizon glow give the reviews/CTA/footer
   real z-depth instead of a flat rectangle. Background-layer only (no CLS). */
.wc-night--abyss {
  background: var(--blue-abyss);
}
.wc-night--abyss::before {
  /* deepen the existing photo/scrim stack toward abyss without hiding it */
  background:
    linear-gradient(180deg, rgba(4,16,31,.30) 0%, transparent 26%, transparent 72%, rgba(4,16,31,.55) 100%),
    var(--grad-night),
    var(--mesh-cool),
    linear-gradient(90deg, rgba(4,16,31,.96) 0%, rgba(5,20,38,.88) 42%, rgba(5,22,42,.62) 100%),
    url("gallery/work-14.jpg") right center / cover no-repeat;
  background-blend-mode: normal, normal, screen, multiply, normal;
}
@media (min-width: 921px) {
  .reviews.wc-night--abyss::before { background-position: 0 0, 0 0, 0 0, 0 0, 78% center; }
}
@media (max-width: 920px) {
  .reviews.wc-night--abyss::before {
    background:
      linear-gradient(180deg, rgba(4,16,31,.40), transparent 30%, transparent 70%, rgba(4,16,31,.60)),
      var(--grad-night),
      var(--mesh-cool),
      linear-gradient(180deg, rgba(4,16,31,.94) 0%, rgba(5,20,38,.86) 55%, rgba(4,16,31,.94) 100%),
      url("gallery/work-14.jpg") center 30% / cover no-repeat;
    background-blend-mode: normal, normal, screen, multiply, normal;
  }
}
/* Soft overhead "night glow" — a single calm luminance that lifts the
   testimonial cards off the floor; pointer-safe, behind the container. */
.wc-night--abyss > .container { position: relative; z-index: 1; }

/* ---- Reviews band: "calm night-sky testimonial theater" --------------- */
.reviews.wc-night--abyss { padding: var(--section-y) 0; }

/* Dramatized 5.0 — promote the rating chip into a quiet hero stat. */
.reviews.wc-night--abyss .reviews-rating {
  gap: 16px;
  padding: 14px 22px 14px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  border-color: rgba(255,255,255,.20);
  box-shadow:
    var(--shadow-inset-ring),
    0 18px 48px -16px rgba(4,12,24,.66);
}
.reviews.wc-night--abyss .reviews-rating .rr-score {
  font-size: clamp(34px, 5.2vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: .92;
  background: linear-gradient(180deg, #ffffff 0%, #ffe7c2 70%, var(--sun-glow) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  filter: drop-shadow(0 6px 20px rgba(255,138,31,.30));
}
.reviews.wc-night--abyss .reviews-rating .stars { font-size: 19px; letter-spacing: 2px; }
.reviews.wc-night--abyss .reviews-rating .rr-divider { height: 34px; }
.reviews.wc-night--abyss .reviews-rating .rr-meta { color: var(--on-dark); }

/* Float the glass cards with stronger directional depth (--shadow-lift). */
.reviews.wc-night--abyss .review-card {
  background: linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.14);
  box-shadow:
    var(--shadow-inset-ring),
    0 10px 24px -12px rgba(4,12,24,.55),
    0 34px 64px -28px rgba(4,12,24,.62);
}
.reviews.wc-night--abyss .review-card::after { color: var(--sun-glow); }
.reviews.wc-night--abyss .review-card:hover,
.reviews.wc-night--abyss .review-card:focus-within {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.30);
  box-shadow:
    var(--shadow-inset-ring),
    0 16px 30px -12px rgba(4,12,24,.58),
    0 48px 88px -30px rgba(4,12,24,.70);
}

/* ---- Closing CTA: "luminous dusk horizon" moment ---------------------- */
.cta-band.wc-cta--dusk {
  padding: clamp(80px, 10vw, 132px) 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
/* A wide sun-glow horizon blooms behind the headline — the West-Texas dusk.
   Sits on its own background layer (z-index:-2), so zero layout impact. */
.cta-band.wc-cta--dusk::before {
  background:
    radial-gradient(70% 130% at 50% 122%, rgba(255,106,44,.34), rgba(255,138,31,.10) 38%, transparent 62%),
    radial-gradient(54% 80% at 84% 6%, rgba(10,108,184,.40), transparent 60%),
    radial-gradient(48% 70% at 8% 0%, rgba(255,180,84,.12), transparent 60%);
}
/* A thin glowing horizon line low in the band — the sun just under the edge. */
.cta-band.wc-cta--dusk::after {
  /* keep the drifting airflow texture, but add a luminous horizon rule */
  background-image:
    radial-gradient(120% 60% at 50% 116%, rgba(255,138,31,.22), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0, transparent 118px, rgba(150,205,255,.10) 118px, rgba(150,205,255,.10) 119px, transparent 120px, transparent 240px),
    repeating-linear-gradient(90deg, transparent 0, transparent 80px, rgba(255,176,84,.06) 80px, rgba(255,176,84,.06) 81px, transparent 82px, transparent 200px);
  background-size: cover, 1200px 100%, 1200px 100%;
}
.cta-band.wc-cta--dusk .cta-panel h2 {
  text-shadow: 0 2px 40px rgba(4,12,24,.45);
}
/* The "today" sunset clip reads hotter to match the dusk glow behind it. */
.cta-band.wc-cta--dusk .cta-panel h2 .grad-word {
  background: var(--grad-sun);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 6px 22px rgba(255,106,44,.30));
}
/* Magnetic warm primary: the closing call blooms a sunset glow on hover. */
.cta-band.wc-cta--dusk .btn-primary {
  box-shadow: var(--shadow-orange), 0 0 30px -2px rgba(255,158,44,.34);
}
.cta-band.wc-cta--dusk .btn-primary:hover,
.cta-band.wc-cta--dusk .btn-primary:focus-visible {
  box-shadow: var(--shadow-sun-glow), var(--shadow-orange), 0 0 44px 0 rgba(255,158,44,.50);
}

/* ---- Footer: deepen toward the night floor, keep the airflow ---------- */
.site-footer {
  background:
    linear-gradient(180deg, var(--blue-night) 0%, #051527 58%, var(--blue-abyss) 100%);
}
/* Brighten the brand glow seam + add a faint warm hearth at the base so the
   footer feels grounded rather than abruptly cut. */
.site-footer::before {
  background: linear-gradient(90deg, transparent, rgba(7,92,159,0) 6%, var(--blue) 26%, var(--sun-core) 54%, var(--sun-glow) 64%, rgba(242,140,24,0) 92%, transparent);
  opacity: .8;
  height: 2px;
  box-shadow: 0 0 18px -2px rgba(255,138,31,.28);
}
.site-footer h2 {
  background: linear-gradient(100deg, #ffffff 0%, #d8ecff 70%, var(--sun-glow) 130%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
}

/* ---- Mobile: equally-premium closing experience ----------------------- */
@media (max-width: 920px) {
  /* Sun-glow horizon recenters under the stacked headline on tablet/phone. */
  .cta-band.wc-cta--dusk::before {
    background:
      radial-gradient(90% 120% at 50% 118%, rgba(255,106,44,.30), rgba(255,138,31,.08) 42%, transparent 64%),
      radial-gradient(60% 70% at 80% 4%, rgba(10,108,184,.36), transparent 62%);
  }
}
@media (max-width: 700px) {
  .reviews.wc-night--abyss { padding: clamp(56px, 13vw, 72px) 0; }
  .reviews.wc-night--abyss .reviews-rating {
    width: 100%;
    justify-content: flex-start;
    padding: 14px 18px;
  }
  .reviews.wc-night--abyss .reviews-rating .rr-score { font-size: clamp(30px, 9vw, 40px); }

  .cta-band.wc-cta--dusk { padding: clamp(56px, 14vw, 72px) 0; }
  /* Keep the dusk glow tasteful + contained on small screens. */
  .cta-band.wc-cta--dusk::before {
    background:
      radial-gradient(120% 90% at 50% 114%, rgba(255,106,44,.26), transparent 60%),
      radial-gradient(80% 60% at 78% 2%, rgba(10,108,184,.30), transparent 64%);
  }
}

/* ---- Reduced-motion: every new ambient effect resolves to static ------ */
@media (prefers-reduced-motion: reduce) {
  .cta-band.wc-cta--dusk::after { animation: none !important; }
  .reviews.wc-night--abyss .review-card:hover,
  .reviews.wc-night--abyss .review-card:focus-within { transform: none !important; }
}

/* =====================================================================
   12b. SECTIONING ELEVATION — "The Big Country Atmosphere"
   Editorial layout domain (additive only, appended last so cascade is
   intentional). Continuous-field section grades + soft horizon dividers,
   a dramatized stat band, an editorial asymmetric service grid with a
   real-photo feature tile, and abyss-deep night bands. No existing class
   renamed; all hooks (.band/.split/.stat-strip/.section--tint/--divided/
   .reviews/.cta-band) preserved.
   ===================================================================== */

/* ---- Continuous-field section grades (transparent->tint; no CLS) ---- */
.wc-section--dawn {
  background-image:
    radial-gradient(60% 42% at 84% -8%, rgba(10,108,184,.05), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(243,249,255,.30) 46%, transparent 100%);
}
.wc-section--dusk {
  background-image:
    radial-gradient(54% 46% at 8% 108%, rgba(255,138,31,.05), transparent 62%),
    linear-gradient(180deg, transparent 0%, rgba(238,244,251,.55) 70%, rgba(228,238,249,.75) 100%);
}

/* ---- Soft horizon divider as a flow element (extends foundation hook) ---- */
.wc-horizon {
  position: relative;
  height: clamp(34px, 6vw, 72px);
  overflow: hidden;
}
.wc-horizon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(70%, 760px);
  height: 220px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, rgba(255,138,31,.06), transparent 70%);
  opacity: .9;
}
.wc-horizon--into-night {
  height: clamp(40px, 6vw, 80px);
  background: linear-gradient(180deg, transparent 0%, rgba(228,238,249,.6) 40%, rgba(7,33,60,.10) 100%);
}
.wc-horizon--into-night::before {
  opacity: .7;
  background: linear-gradient(90deg, transparent, var(--sun-hot) 28%, var(--sun-glow) 55%, transparent);
}
.wc-horizon--into-night::after {
  background: radial-gradient(52% 64% at 50% 60%, rgba(255,106,44,.12), transparent 72%);
  opacity: 1;
}

/* ---- Dramatized data moment: "By the numbers" stat band ---- */
.wc-statband { position: relative; }
.wc-statband__intro {
  max-width: 56ch;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.wc-statband__title {
  font-size: clamp(30px, 4.2vw, 52px);
  letter-spacing: -0.018em;
  line-height: 1.06;
  max-width: 20ch;
}
.wc-statband__rule {
  display: block;
  height: 2px;
  width: 100%;
  margin: 0 0 clamp(24px, 3vw, 38px);
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  position: relative;
  overflow: hidden;
}
.wc-statband__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-horizon);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .85;
  animation: wcRuleSweep 1.4s var(--ease-cinematic) .25s forwards;
}
@keyframes wcRuleSweep { to { transform: scaleX(1); } }

/* Editorial numerals + Merriweather micro-unit (sans/serif contrast). */
.stat-strip--editorial {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(244,249,254,.88));
}
.stat-strip--editorial div { padding-block: clamp(28px, 3.4vw, 40px); }
.stat-strip--editorial strong {
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: -0.03em;
  line-height: .96;
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-strip--editorial div:nth-child(3) strong {
  background: var(--grad-sun);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wc-stat__unit {
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--orange-ink);
  line-height: 1;
}
.stat-strip--editorial .wc-stat__unit + span { margin-top: 6px; }

/* ---- Editorial asymmetric service grid + real-photo feature tile ---- */
.service-grid--editorial { grid-auto-flow: dense; }
.service-card--feature {
  grid-column: span 2;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border-color: rgba(242,140,24,.30);
  box-shadow: var(--shadow-lift);
}
.service-card--feature:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift), 0 26px 60px -24px rgba(242,140,24,.40);
}
.service-card--feature__media {
  position: relative;
  flex: 0 0 42%;
  min-height: 100%;
  overflow: hidden;
  background: var(--blue-pale);
}
.service-card--feature__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transition: transform var(--dur-slow) var(--ease-glide);
}
.service-card--feature:hover .service-card--feature__media img { transform: scale(1.05); }
.service-card--feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4,12,24,.10), transparent 40%),
              linear-gradient(0deg, rgba(255,138,31,.14), transparent 46%);
}
.service-card--feature__tag {
  position: absolute;
  z-index: 2;
  left: 16px; top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: var(--grad-sun);
  color: #3a1c02;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 8px 20px -8px rgba(255,106,44,.6), inset 0 0 0 1px rgba(255,255,255,.4);
}
.service-card--feature__tag::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.45);
}
.service-card--feature__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
}
.service-card--feature__body h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  margin-top: var(--space-4);
}
.service-card--feature__body ul { margin-top: var(--space-5); }
.service-card--feature__link {
  margin-top: var(--space-5);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--orange-deep);
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-sm);
  border-radius: var(--radius-xs);
  transition: gap var(--dur) var(--ease-glide), color var(--dur) var(--ease-out);
}
.service-card--feature__link::after { content: "\2192"; font-weight: 900; transition: transform var(--dur) var(--ease-glide); }
.service-card--feature:hover .service-card--feature__link { gap: 11px; color: var(--orange-ink); }
.service-card--feature:hover .service-card--feature__link::after { transform: translateX(3px); }
.service-card--feature__link:focus-visible { outline: none; box-shadow: var(--focus-ring-orange); }

/* ---- Abyss-deep night bands (additive overlay; photos untouched) ---- */
.wc-night--abyss { background-color: var(--blue-abyss); }
.reviews.wc-night--abyss::before {
  background:
    linear-gradient(180deg, rgba(4,16,31,.55) 0%, transparent 22%, transparent 72%, rgba(4,16,31,.78) 100%),
    var(--grad-night),
    var(--mesh-cool),
    linear-gradient(90deg, rgba(5,22,42,.95) 0%, rgba(5,22,42,.86) 42%, rgba(5,22,42,.58) 100%),
    url("gallery/work-14.jpg") right center / cover no-repeat;
  background-blend-mode: normal, normal, screen, multiply, normal;
}
@media (min-width: 921px) {
  .reviews.wc-night--abyss::before { background-position: 0 0, 0 0, 0 0, 0 0, 78% center; }
}
.wc-cta--dusk::before {
  background:
    radial-gradient(70% 96% at 22% 120%, rgba(255,106,44,.30), transparent 62%),
    radial-gradient(60% 88% at 84% 6%, rgba(10,108,184,.40), transparent 60%),
    radial-gradient(50% 70% at 12% 96%, rgba(255,138,31,.16), transparent 62%);
}
.wc-cta--dusk .cta-panel { position: relative; }
.wc-cta--dusk .cta-panel h2 { text-shadow: 0 2px 30px rgba(4,12,24,.5); }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .service-card--feature { grid-column: span 2; flex-direction: column; }
  .service-card--feature__media { flex-basis: auto; aspect-ratio: 16 / 9; min-height: 0; }
}
@media (max-width: 700px) {
  .service-card--feature { grid-column: 1 / -1; }
  .service-card--feature__media { aspect-ratio: 3 / 2; }
  .wc-statband__rule { margin-bottom: 24px; }
}

/* ---- Reduced motion: neutralize THIS block's only animation ---- */
@media (prefers-reduced-motion: reduce) {
  .wc-statband__rule::after {
    animation: none !important;
    transform: scaleX(1) !important;
  }
  .service-card--feature__media img,
  .service-card--feature__link,
  .service-card--feature__link::after { transition: none !important; }
}

/* =====================================================================
   16. EDITORIAL TYPOGRAPHY ELEVATION (typography domain — additive)
   Reserve ONE --fs-mega statement per page (the hero h1 anchor already
   carries it). Adds a magazine "lede" deck, an opt-in .h2--mega section
   opener, a hotter sunset clip on warm grad-words, an eyebrow horizon
   hairline, and a serif/sans stat-label contrast. No font load, no
   class renamed, no new motion (so nothing to disable beyond wraps).
   ===================================================================== */
:root { --fs-deck: clamp(18px, 2.1vw, 23px); }

/* ---- The flagship statement: hotter clip on the hero mega anchor + a
        general hot-sunset clip for warm grad-words used site-wide. ---- */
.grad-word.is-sunset,
.grad-word--warm,
.cta-panel .grad-word,
.section-head h2 .grad-word {
  background-image: var(--grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Opt-in mega section opener (ONE h2 per page may add .h2--mega). ---- */
.h2--mega {
  font-size: var(--fs-mega);
  line-height: var(--leading-mega);
  letter-spacing: var(--tracking-mega);
  font-weight: 800;
  text-wrap: balance;
  max-width: 16ch;
}
.h2--mega .grad-word {
  background: var(--grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .h2--mega .grad-word { color: var(--orange-deep); -webkit-text-fill-color: currentColor; }
}

/* ---- Editorial lede / magazine deck — opt-in via .lede.
        Larger measure, ink-soft, between caption and body weight. ---- */
.lede {
  font-family: var(--font-sans);
  font-size: var(--fs-deck);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
  max-width: 56ch;
  text-wrap: pretty;
}
.lede strong { color: var(--ink); font-weight: 800; }
.lede--rule { position: relative; padding-top: 18px; }
.lede--rule::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 2px;
  border-radius: var(--radius-pill);
  background: var(--grad-horizon);
}
.hero .lede,
.reviews .lede,
.cta-panel .lede,
.band--night .lede { color: var(--on-dark-soft); }
.hero .lede strong,
.band--night .lede strong { color: #fff; }

/* ---- Eyebrow horizon hairline — ties EVERY eyebrow to the one
        atmosphere story (the .wc-eyebrow--rule modifier keeps its own
        below-rule; this trailing inline rule reads on the baseline). ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::after {
  content: "";
  flex: 0 0 auto;
  width: 34px; height: 1px;
  background: var(--grad-horizon);
  opacity: .85;
}
/* Block-level eyebrows that should stay full-width keep their layout: the
   .wc-eyebrow--rule modifier already renders its own below-rule, so suppress
   the trailing inline rule there to avoid a double hairline. */
.eyebrow.wc-eyebrow--rule::after { display: none; }
.hero-badge.eyebrow::after { display: none; }
.band--night .eyebrow::after,
.reviews .eyebrow::after { opacity: .9; }

/* ---- Dramatized data: serif label under the sans numeral (the
        engineered + human contrast). Numerals already scaled in 12b. ---- */
.stat-strip span {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}
.stat-strip .wc-stat__unit { font-family: var(--font-display); }

/* Reviews 5.0 reads as a quiet hero stat (serif meta label). */
.reviews-rating .rr-meta { font-family: var(--font-display); font-weight: 700; }

/* ---- Optical refinements: tighten the display end only; body untouched. ---- */
.h2--mega { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }

/* ---- Reduced motion + mobile safety for the oversized type. ---- */
@media (prefers-reduced-motion: reduce) {
  .h2--mega, .hero h1 .grad-word { text-wrap: initial; }
}
@media (max-width: 600px) {
  .h2--mega { font-size: clamp(40px, 11vw, 62px); max-width: 100%; }
}

/* =====================================================================
   17. NAV-HEADER FLAGSHIP POLISH (nav-header domain — additive)
   Refines materials only on existing header selectors: deeper glass with
   an atmospheric underglow, a scrolled hairline that resolves into the
   site-wide sunset horizon rule, a brand wordmark that warms on hover, a
   gliding active-pill sheen, and a graded dawn-to-dusk mobile panel.
   Every new motion is disabled under prefers-reduced-motion. Local token
   fallbacks keep it graceful if a shared var is ever absent.
   ===================================================================== */
.site-header {
  --hdr-grad-horizon: var(--grad-horizon);
  --hdr-ease-glide: var(--ease-glide);
  --hdr-ease-cine: var(--ease-cinematic);
  background:
    linear-gradient(180deg, rgba(255,255,255,.965), rgba(250,253,255,.9)),
    radial-gradient(120% 180% at 50% -60%, rgba(7,92,159,.05), transparent 60%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  transition:
    box-shadow var(--dur) var(--hdr-ease-cine),
    background var(--dur) var(--hdr-ease-cine),
    border-color var(--dur) var(--hdr-ease-cine);
}
.site-header.is-scrolled {
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,252,255,.92)),
    radial-gradient(120% 200% at 50% -80%, rgba(7,92,159,.06), transparent 62%);
  box-shadow: var(--shadow-lift);
}
.site-header.is-scrolled::after {
  background: var(--hdr-grad-horizon);
  opacity: 1;
  height: 1.5px;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

/* Brand lockup → warm hover bloom + wordmark re-clip to the hot sunset. */
.brand img {
  transition:
    width var(--dur) var(--hdr-ease-cine),
    height var(--dur) var(--hdr-ease-cine),
    box-shadow var(--dur) var(--hdr-ease-glide),
    transform var(--dur) var(--hdr-ease-glide);
}
.brand:hover img {
  box-shadow: var(--shadow-brand-hover), 0 10px 26px -12px rgba(255,106,44,.45);
  transform: rotate(-1.5deg) scale(1.02);
}
.brand strong { letter-spacing: -.012em; }
.brand:hover strong {
  background: var(--grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Active indicator → gliding sunset underline + a one-shot sheen sweep. */
.nav-links a::after {
  background: var(--grad-sun);
  box-shadow: 0 1px 6px -1px rgba(255,106,44,.5);
  transition: transform var(--dur) var(--hdr-ease-cine), opacity var(--dur) var(--hdr-ease-glide);
}
.nav-links a:hover::after { transform: scaleX(.55); }
.nav-links a[aria-current="page"]::after {
  height: 2.5px;
  transform: scaleX(1);
  transform-origin: center;
}
.nav-links a[aria-current="page"] { position: relative; overflow: hidden; }
.nav-links a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-16deg);
  transition: transform .8s var(--hdr-ease-glide);
  pointer-events: none;
}
.nav-links a[aria-current="page"]:hover::before { transform: translateX(130%) skewX(-16deg); }

/* Magnetic nav micro-lift + tactile toggle. */
.nav-links a {
  transition:
    color var(--dur-fast) var(--hdr-ease-glide),
    background var(--dur-fast) var(--hdr-ease-glide),
    transform var(--dur-fast) var(--hdr-ease-glide);
}
.nav-links a:hover { transform: translateY(-1px); }
.menu-toggle {
  transition:
    box-shadow var(--dur-fast) var(--hdr-ease-glide),
    border-color var(--dur-fast) var(--hdr-ease-glide),
    transform var(--dur-fast) var(--hdr-ease-glide);
}
.menu-toggle:hover { transform: translateY(-1px); }
.menu-toggle span {
  transition:
    transform .34s var(--hdr-ease-cine),
    opacity .26s var(--hdr-ease-glide),
    top .34s var(--hdr-ease-cine),
    background .26s var(--hdr-ease-glide);
}
body.menu-open .menu-toggle {
  color: var(--orange-deep);
  border-color: rgba(255,106,44,.45);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,.7), 0 8px 22px -10px rgba(255,106,44,.4);
}

/* Mobile menu → graded dawn-to-dusk atmospheric panel with a leading-edge
   sunset horizon rule and a warm active-item accent. Inside the existing
   max-width:980px range so it composes with the established drawer. */
@media (max-width: 980px) {
  .nav-links {
    background:
      linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(244,250,255,.99) 70%, rgba(238,244,251,.99) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    box-shadow: var(--shadow-lift);
  }
  .nav-links::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1.5px;
    background: var(--grad-horizon);
    opacity: 0;
    transition: opacity .3s var(--ease-out);
    pointer-events: none;
  }
  body.menu-open .nav-links::after { opacity: 1; }
  .nav-links a {
    transition:
      opacity .42s var(--ease-cinematic),
      transform .42s var(--ease-cinematic),
      color var(--dur-fast) ease,
      background var(--dur-fast) ease;
  }
  body.menu-open .nav-links a:hover { transform: translateY(0); background: var(--blue-pale); }
  .nav-links a[aria-current="page"] {
    box-shadow: inset 3px 0 0 0 var(--sun-core), inset 0 0 0 1px rgba(7,92,159,.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand:hover img { transform: none; }
  .nav-links a:hover,
  .menu-toggle:hover { transform: none; }
  .nav-links a[aria-current="page"]::before { display: none; }
}

/* =====================================================================
   18. GALLERY AS "FIELD EVIDENCE" CENTERPIECE (gallery-imagery domain)
   Surrounds only — no .wc-* engine hook, markup, or lightbox behavior is
   altered. New class names + decorative pseudo-elements (pointer-events:
   none) frame the working slider: an editorial real-stat intro row, a dusk
   film-strip surround, a deeper double-ringed viewport, a hotter active
   caption tag, and a richer inactive veil. Nothing animates → reduced
   motion honored by construction.
   ===================================================================== */
.wc-evidence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  margin-top: clamp(20px, 3vw, 30px);
  padding: clamp(18px, 2.6vw, 26px) clamp(20px, 3vw, 30px);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(7,33,60,.045) 0%, rgba(255,138,31,.05) 100%),
    var(--surface);
  box-shadow: var(--shadow-float);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.wc-evidence::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--grad-horizon);
  opacity: .8;
}
.wc-evidence__stat {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex: 0 0 auto;
}
.wc-evidence__num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(40px, 6vw, var(--fs-stat));
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: .92;
  background: var(--grad-sun);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.wc-evidence__label {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(12px, 1.3vw, 14px);
  letter-spacing: .01em;
  color: var(--ink-soft);
}
.wc-evidence__lede {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.55;
  color: var(--ink);
}
.wc-evidence__divider {
  align-self: stretch;
  width: 1px;
  flex: 0 0 auto;
  background: linear-gradient(180deg, transparent, rgba(7,45,82,.18), transparent);
}
@media (max-width: 640px) {
  .wc-evidence__divider { display: none; }
  .wc-evidence { gap: clamp(14px, 4vw, 22px); }
}

/* Dusk film-strip frame around the viewport (decorative, pointer-safe). */
.wc-gallery::before {
  content: "";
  position: absolute;
  inset: clamp(-14px, -2vw, -22px) clamp(-10px, -1.4vw, -18px) clamp(-18px, -2.4vw, -28px);
  z-index: 0;
  border-radius: calc(var(--radius-lg) + 10px);
  background:
    radial-gradient(120% 90% at 12% 0%, var(--sun-haze), transparent 58%),
    linear-gradient(180deg, rgba(238,244,251,0) 0%, rgba(7,33,60,.05) 100%);
  pointer-events: none;
}
.wc-gallery__viewport { position: relative; z-index: 1; }
.wc-gallery::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: clamp(-8px, -1.2vw, -14px);
  height: 2px;
  z-index: 0;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg,
      rgba(7,45,82,.16) 0 10px,
      transparent 10px 22px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}
@media (max-width: 720px) {
  .wc-gallery::after { display: none; }
}

/* Deepen the viewport ring toward the night-sky palette for true z-depth. */
.wc-gallery__viewport {
  box-shadow:
    0 0 0 1px rgba(7, 92, 159, .10),
    0 0 0 6px rgba(255,255,255,.55),
    var(--shadow-lift);
}

/* Hotter active caption tag (--grad-sun) + warm glow; deeper inactive veil. */
.wc-gallery__slide.is-active .wc-gallery__tag {
  background: var(--grad-sun);
  box-shadow:
    var(--shadow-sun-glow),
    0 1px 0 rgba(255,255,255,.3) inset;
  letter-spacing: var(--tracking-eyebrow);
}
.wc-gallery__slide:not(.is-active) .wc-gallery__figure::after {
  background:
    linear-gradient(180deg,
      rgba(4,16,31,.22) 0%,
      rgba(4,16,31,.50) 100%);
  -webkit-backdrop-filter: saturate(.82) brightness(.96);
          backdrop-filter: saturate(.82) brightness(.96);
}