/* ==========================================================================
   JFX Lighting — shared stylesheet
   Brand: black / white / teal. Dark, premium, glow-accented.
   ========================================================================== */

:root {
  /* Brand colors */
  --black: #0a0a0a;
  --bg: #0a0a0a;
  --bg-2: #121313;
  --bg-3: #161717;
  --white: #ffffff;
  --text: #ffffff;
  --text-90: rgba(255, 255, 255, .9);
  --muted: #d1d1d6;
  --muted-2: #a0a0ab;
  --teal: #14d8c4;
  --teal-deep: #0fb3a3;
  --teal-dark: #0b8c80;
  --teal-light: #6ff5e6;
  --teal-05: rgba(20, 216, 196, .05);
  --teal-10: rgba(20, 216, 196, .1);
  --teal-20: rgba(20, 216, 196, .2);
  --teal-35: rgba(20, 216, 196, .35);

  /* Surfaces */
  --surface: rgba(255, 255, 255, .03);
  --surface-2: rgba(255, 255, 255, .05);
  --border: rgba(255, 255, 255, .1);
  --border-soft: rgba(255, 255, 255, .06);
  --border-strong: rgba(255, 255, 255, .2);
  --danger: #ff7a7a;

  /* Shape + layout */
  --radius-pill: 999rem;
  --radius-card: 1.25rem;
  --radius-md: 1rem;
  --radius-sm: .5rem;
  --container: 80rem;
  --gutter: 2.5rem;
  --section: 6rem;
  --header-h: 5.5rem;
  --gap: 2rem;

  /* Type scale for card / sub headings */
  --fs-h4: 1.5rem;
  --fs-h5: 1.15rem;

  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 767px) {
  :root { --gutter: 1.25rem; --section: 4rem; --gap: 1.5rem; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 7rem; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-90);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { color: var(--white); margin: 0 0 1rem; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: var(--fs-h4); }
h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); }
.h2-sm, .service-row h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }

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

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--teal); color: var(--black); font-weight: 700;
  padding: .75rem 1.25rem; border-radius: var(--radius-pill); text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

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

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: 50rem; }
.section { position: relative; padding-block: var(--section); }
.section-alt { background: var(--bg-2); border-block: 1px solid var(--border-soft); }
.hairline-top { border-top: 1px solid var(--border); }
.text-center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

.section-head { max-width: 46rem; margin-bottom: 3rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lead { color: var(--muted); }
.section-head-row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: end; justify-content: space-between; margin-bottom: 3rem; }
.section-head-row .section-head { margin-bottom: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--teal); font-weight: 600; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-90); }
.muted { color: var(--muted); }

.gradient-text {
  background: linear-gradient(180deg, var(--teal-light), var(--teal-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
}
.emphasis { color: var(--teal-light); font-style: italic; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Placeholder marker (visible, so the client can spot missing info) */
.ph {
  display: inline-block;
  font-size: .85em; font-weight: 600; font-style: normal;
  color: var(--teal-light);
  background: var(--teal-10);
  border: 1px dashed var(--teal-35);
  border-radius: .35rem;
  padding: 0 .4em;
  line-height: 1.5;
}

/* ---------- Glow backgrounds ---------- */
.glow-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.glow {
  position: absolute; border-radius: 50%;
  /* radial gradient instead of filter:blur for smooth scrolling on low-end devices */
  background: radial-gradient(closest-side, rgba(20,216,196,.9), rgba(20,216,196,.35) 45%, rgba(20,216,196,0) 100%);
  opacity: .65;
}
.glow.center { width: 60rem; height: 50rem; left: 50%; top: -30rem; transform: translateX(-50%); }
.glow.left { width: 46rem; height: 34rem; left: -24rem; top: -16rem; opacity: .45; }
.glow.right { width: 46rem; height: 34rem; right: -24rem; top: -14rem; opacity: .45; }
.glow.left.mid, .glow.right.mid { top: 20%; }
.glow.bottom { width: 60rem; height: 28rem; left: 50%; bottom: -18rem; transform: translateX(-50%); opacity: .35; }
@media (max-width: 767px) {
  .glow.center { width: 34rem; height: 30rem; top: -17rem; }
}
.section > .container,
.hero-inner,
.page-hero > .container { position: relative; z-index: 1; }
.after-hero { padding-top: 2rem; }
.btn-row-spaced { margin-top: 1.75rem; }
.split-spaced { margin-top: 4rem; }
.split.split-top { align-items: start; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: 1rem 1.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out, color .2s, border-color .2s, transform .2s;
  white-space: nowrap;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--teal); color: #031412;
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 2px 40px rgba(20, 216, 196, .25);
}
.btn-primary:hover { background: var(--teal-light); box-shadow: 0 2px 60px rgba(20, 216, 196, .5); }
.btn-light { background: rgba(255,255,255,.92); color: var(--black); }
.btn-light:hover { background: #fff; box-shadow: 0 0 50px rgba(255,255,255,.2); }
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-outline:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-sm { padding: .7rem 1.25rem; font-size: .95rem; }
.btn-lg { padding: 1.15rem 2.1rem; font-size: 1.05rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.btn-row.center { justify-content: center; }

/* Animated glowing border for the hero CTA */
.btn-glow { position: relative; isolation: isolate; }
.btn-glow::before {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; z-index: -1;
  background: conic-gradient(from var(--angle, 0deg), var(--teal), transparent 30%, var(--teal-light), transparent 70%, var(--teal));
  filter: blur(8px); opacity: .8;
  animation: spin-glow 4s linear infinite;
}
/* Solid fill painted above the spinning conic so only the blurred ring shows */
.btn-glow::after {
  content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1;
  background: var(--teal); transition: background-color .2s;
}
.btn-glow:hover::after { background: var(--teal-light); }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin-glow { to { --angle: 360deg; } }

.text-link { color: var(--teal-light); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
.text-link svg { width: 1em; height: 1em; flex: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed; top: 1rem; left: 0; right: 0; z-index: 100;
  padding-inline: max(var(--gutter), 3vw);
}
.nav-bar {
  max-width: var(--container); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .6rem .6rem 1.5rem;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  transition: background-color .3s, box-shadow .3s;
}
.site-header.scrolled .nav-bar { background: rgba(0,0,0,.78); box-shadow: 0 10px 40px rgba(0,0,0,.4); }
/* Brand lockup: the client's italic "JFX" mark (vector) + a small teal "LIGHTING" wordmark */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; min-height: 2.75rem; }
.brand .logo-mark { height: 1.95rem; width: auto; filter: drop-shadow(0 0 8px rgba(20, 216, 196, .35)); }
.logo-word {
  color: var(--teal-light); font-weight: 600; font-size: .78rem; line-height: 1; letter-spacing: .32em; text-transform: uppercase;
  margin-right: -.32em; /* cancel trailing letter-spacing */ padding-top: .15rem; white-space: nowrap;
}
.nav-links { display: flex; gap: .25rem; list-style: none; }
.nav-links a {
  display: block; padding: .65rem 1.1rem; border-radius: var(--radius-pill);
  color: var(--text-90); text-decoration: none; font-weight: 500; font-size: .95rem;
  transition: background-color .2s, color .2s;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { background: rgba(255,255,255,.07); color: var(--white); }
.nav-links a[aria-current="page"] { position: relative; }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: .3rem; width: 4px; height: 4px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 8px var(--teal); transform: translateX(-50%);
}
.nav-actions { display: flex; align-items: center; gap: .5rem; }
.nav-phone {
  display: inline-flex; align-items: center; gap: .4rem; color: var(--white); text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: .6rem .9rem; border-radius: var(--radius-pill);
}
.nav-phone:hover { background: rgba(255,255,255,.07); }
.nav-phone svg { width: 1rem; height: 1rem; color: var(--teal); }
.nav-toggle {
  display: none; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 1px solid var(--border-strong); background: rgba(255,255,255,.05); cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute; left: 50%; width: 1.15rem; height: 2px; background: var(--white); border-radius: 2px;
  transform: translateX(-50%); transition: transform .25s var(--ease), opacity .2s, top .25s var(--ease);
}
.nav-toggle span:nth-child(1) { top: calc(50% - 6px); }
.nav-toggle span:nth-child(2) { top: calc(50% - 1px); }
.nav-toggle span:nth-child(3) { top: calc(50% + 4px); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: calc(50% - 1px); transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: calc(50% - 1px); transform: translateX(-50%) rotate(-45deg); }

/* Below 1024px the menu is a full-screen sheet. The pill's blur lives on ::before so .nav-bar itself has no
   backdrop-filter (which would otherwise become the containing block for the fixed sheet). The logo and the
   close button stay on top of the sheet as its header. */
@media (max-width: 1023px) {
  .nav-bar { position: relative; isolation: isolate; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav-bar::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    transition: background-color .3s;
  }
  .site-header.scrolled .nav-bar { background: transparent; }
  .site-header.scrolled .nav-bar::before { background: rgba(0,0,0,.78); }
  .brand, .nav-actions { position: relative; z-index: 2; }
  .nav-toggle { display: inline-block; }
  .nav-phone .label { display: none; }
  .nav-menu {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column;
    padding: calc(env(safe-area-inset-top) + 6.25rem) max(var(--gutter), 3vw) calc(1.25rem + env(safe-area-inset-bottom));
    background:
      radial-gradient(ellipse 90% 45% at 50% 0%, rgba(20,216,196,.16), transparent 70%),
      #080909;
    opacity: 0; visibility: hidden;
    transition: opacity .22s var(--ease), visibility 0s linear .22s;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .nav-menu.open { opacity: 1; visibility: visible; transition: opacity .22s var(--ease); }
  .nav-menu.open ~ .nav-actions .nav-phone { visibility: hidden; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links li { opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .nav-menu.open .nav-links li { opacity: 1; transform: none; }
  .nav-menu.open .nav-links li:nth-child(2) { transition-delay: .03s; }
  .nav-menu.open .nav-links li:nth-child(3) { transition-delay: .06s; }
  .nav-menu.open .nav-links li:nth-child(4) { transition-delay: .09s; }
  .nav-menu.open .nav-links li:nth-child(5) { transition-delay: .12s; }
  .nav-menu.open .nav-links li:nth-child(6) { transition-delay: .15s; }
  .nav-links li + li { border-top: 1px solid var(--border-soft); }
  .nav-links a {
    display: flex; align-items: center; min-height: 3.6rem; padding: .25rem .25rem;
    background: none; border-radius: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; color: var(--white);
  }
  .nav-links a:hover { background: none; color: var(--teal-light); }
  .nav-links a[aria-current="page"] { background: none; color: var(--teal-light); }
  .nav-links a[aria-current="page"]::after { left: auto; right: .5rem; bottom: 50%; width: 6px; height: 6px; transform: translateY(50%); }
  .nav-sheet-cta { display: grid; gap: .75rem; margin-top: auto; padding-top: 2rem; }
  .nav-menu .btn { width: 100%; margin: 0; }
  .nav-sheet-note { margin: .25rem 0 0; text-align: center; color: var(--muted-2); font-size: .875rem; }
}
@media (min-width: 1024px) {
  .nav-menu { display: flex; align-items: center; gap: .5rem; }
  .nav-menu .mobile-only { display: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-phone .label { display: none; }
  .nav-links a { padding: .6rem .85rem; }
}
@media (max-width: 479px) {
  .nav-actions .btn { display: none; }
  .nav-bar { padding-left: 1.1rem; }
  .brand { gap: .5rem; }
  .brand .logo-mark { height: 1.65rem; }
  .logo-word { font-size: .7rem; letter-spacing: .28em; margin-right: -.28em; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 60rem);
  display: flex; align-items: center;
  padding-top: 11rem; padding-bottom: 6rem;
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.72) 0%, rgba(10,10,10,.6) 45%, var(--bg) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(20,216,196,.18), transparent 60%);
}
.hero .glow-wrap { z-index: -1; }
.hero-inner { text-align: center; max-width: 52rem; margin-inline: auto; }
.hero .lead { max-width: 40rem; margin: 0 auto 2.25rem; }
.hero .btn-row { justify-content: center; }
.hero-proof { margin: 2rem 0 0; font-size: .875rem; color: var(--muted); }
.hero-proof a { color: inherit; text-underline-offset: 3px; }
.hero-proof a:hover { color: var(--white); }
.stars { color: var(--teal-light); text-shadow: 0 0 12px var(--teal-35); letter-spacing: .05em; }

/* Inner page hero */
.page-hero { position: relative; isolation: isolate; padding-top: 11rem; padding-bottom: 4.5rem; overflow: hidden; text-align: center; }
.page-hero .glow-wrap { z-index: -1; }
.page-hero .lead { max-width: 42rem; margin-inline: auto; color: var(--muted); }
.breadcrumb { display: flex; justify-content: center; gap: .5rem; list-style: none; font-size: .875rem; color: var(--muted-2); margin-bottom: 1.25rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb li + li::before { content: "/"; margin-right: .5rem; color: var(--muted-2); }

/* ---------- Stat / trust strip ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card);
  padding: 1.5rem; text-align: center;
  transition: background-color .2s, border-color .2s;
}
.stat:hover { background: var(--teal-05); border-color: var(--teal-20); }
.stat-num { display: block; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; color: var(--white); line-height: 1.1; }
.stat-label { display: block; margin-top: .35rem; color: var(--muted); font-size: .9rem; }
@media (max-width: 767px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem;
  transition: background-color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.card:hover { background: var(--teal-05); border-color: var(--teal-20); box-shadow: 0 2px 50px rgba(20,216,196,.12); }
.card h3 { font-size: var(--fs-h4); }
.card p { color: var(--muted); }
.icon-bubble {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: .9rem;
  background: var(--teal-10); border: 1px solid var(--teal-20); color: var(--teal-light); margin-bottom: 1.25rem;
}
.icon-bubble svg { width: 1.4rem; height: 1.4rem; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Service cards with photos */
.service-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-card); overflow: hidden;
  background: rgba(255,255,255,.025); border: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.service-card:hover { border-color: var(--teal-35); box-shadow: 0 2px 50px rgba(20,216,196,.2); transform: translateY(-3px); }
.service-card .media { aspect-ratio: 4 / 3; overflow: hidden; background: #0d1414; }
.service-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.service-card:hover .media img { transform: scale(1.04); }
.service-card .body { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.service-card h3 { font-size: var(--fs-h5); margin: 0; }
.service-card p { color: var(--muted); margin: 0; font-size: .95rem; }
.service-card .text-link { margin-top: auto; padding-top: .5rem; }

/* Service detail rows (services page) */
.service-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding-block: 3.5rem; border-top: 1px solid var(--border-soft); }
.service-row:first-child { border-top: 0; padding-top: 0; }
.service-row:nth-child(even) .service-media { order: 2; }
.service-media { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.service-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.check-list { list-style: none; display: grid; gap: .6rem; margin: 1.25rem 0 1.75rem; }
.check-list li { position: relative; padding-left: 1.9rem; color: var(--text-90); }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--teal-20) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ff5e6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
@media (max-width: 899px) {
  .service-row { grid-template-columns: 1fr; gap: 2rem; }
  .service-row:nth-child(even) .service-media { order: 0; }
}

/* ---------- Split / feature layouts ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 4rem; align-items: center; }
.split-media { position: relative; }
.split-media img { border-radius: var(--radius-card); border: 1px solid var(--border); width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.split-media .float-card {
  position: absolute; right: -1rem; bottom: -1.5rem;
  background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 1rem 1.25rem; max-width: 16rem;
}
.float-card strong { display: block; color: var(--white); font-size: var(--fs-h4); }
.float-card span { color: var(--muted); font-size: .875rem; }
@media (max-width: 899px) {
  .split { grid-template-columns: 1fr; gap: 3rem; }
  .split-media .float-card { right: .75rem; bottom: -1rem; }
}

/* ---------- Mission band ---------- */
.mission h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.3; font-weight: 600; max-width: 60rem; }
.mission h2 .dim { color: var(--muted-2); }

/* ---------- Process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); counter-reset: step; list-style: none; }
.step { position: relative; padding: 2rem 1.5rem 1.75rem; }
.step-num {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: var(--black); border: 1px solid var(--teal); color: var(--teal-light); font-weight: 800;
  box-shadow: 0 0 24px rgba(20,216,196,.35); margin-bottom: 1.25rem;
}
.step h3 { font-size: var(--fs-h5); }
.step p { color: var(--muted); margin: 0; font-size: .95rem; }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Scene previewer ---------- */
.previewer { display: grid; grid-template-columns: 1.45fr 1fr; gap: 3rem; align-items: center; }
.preview-stage {
  position: relative; border-radius: var(--radius-card); overflow: hidden; background: #000;
  border: 1px solid var(--border); aspect-ratio: 16 / 10;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(20,216,196,.08), 0 0 60px -10px rgba(20,216,196,.18);
}
.preview-svg { display: block; width: 100%; height: 100%; }
.pv-wash { mix-blend-mode: color; }
.pv-bloom { mix-blend-mode: screen; }
.pv-wash ellipse, .pv-bloom circle, .pv-cores circle { transition: fill .6s ease, opacity .25s linear; }
.preview-stage[data-effect="twinkle"] .pv-wash ellipse,
.preview-stage[data-effect="twinkle"] .pv-bloom circle,
.preview-stage[data-effect="twinkle"] .pv-cores circle { animation: pv-twinkle 2.4s ease-in-out infinite; }
@keyframes pv-twinkle { 0%, 100% { opacity: 1; } 45% { opacity: .3; } 55% { opacity: .45; } }
.preview-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22%, transparent 72%, rgba(0,0,0,.55) 100%);
}
.stage-hud {
  position: absolute; z-index: 1; top: 1rem; left: 1rem; display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .85rem .45rem .6rem; border-radius: var(--radius-pill);
  background: rgba(10,10,10,.55); border: 1px solid var(--border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .8rem; font-weight: 600; color: var(--white); letter-spacing: .02em;
}
.hud-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px currentColor; transition: background .4s; }
.preview-stage .stage-note { position: absolute; z-index: 1; right: 1rem; bottom: .8rem; font-size: .75rem; color: var(--muted); }
.pv-label { margin: 1.5rem 0 .6rem; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.scene-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.scene-btn {
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem .95rem; border-radius: var(--radius-pill);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--white);
  font-weight: 600; font-size: .875rem; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.scene-btn:hover { border-color: var(--border-strong); }
.scene-btn[aria-pressed="true"], .scene-custom.is-active { border-color: var(--teal); background: var(--teal-10); box-shadow: 0 0 20px rgba(20,216,196,.2); }
.scene-custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.scene-custom:focus-within { outline: 2px solid var(--teal); outline-offset: 2px; }
.custom-swatch { background: conic-gradient(#ff3b3b, #ffcf3b, #2bd46b, #14d8c4, #3b7bff, #9b4dff, #ff3b3b) !important; }
.swatch { display: inline-flex; gap: 2px; }
.swatch i { width: .65rem; height: .65rem; border-radius: 50%; display: block; box-shadow: 0 0 6px rgba(255,255,255,.25); }
.fx-toggle { display: inline-flex; padding: .25rem; gap: .25rem; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--border); }
.fx-btn {
  padding: .5rem 1.1rem; border-radius: var(--radius-pill); border: 0; background: transparent; color: var(--muted);
  font-weight: 600; font-size: .875rem; cursor: pointer; transition: background-color .2s, color .2s;
}
.fx-btn:hover:not(:disabled) { color: var(--white); }
.fx-btn[aria-pressed="true"] { background: var(--teal); color: #031412; }
.fx-btn:disabled { opacity: .4; cursor: not-allowed; }
@media (max-width: 899px) { .previewer { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 520px) { .preview-stage { aspect-ratio: 4 / 3; } .stage-hud { top: .6rem; left: .6rem; } .preview-stage .stage-note { right: .6rem; bottom: .5rem; font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .preview-stage[data-effect] .pv-wash ellipse, .preview-stage[data-effect] .pv-bloom circle, .preview-stage[data-effect] .pv-cores circle { animation: none; } }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gallery-grid.home { grid-template-columns: repeat(4, 1fr); }
.gallery-item {
  position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden; cursor: zoom-in; background: #0d1414;
  aspect-ratio: 4 / 3;
  transition: box-shadow .25s, border-color .25s;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .3s; }
.gallery-item:hover, .gallery-item:focus-visible { border-color: var(--teal-35); box-shadow: 0 2px 50px rgba(20,216,196,.25); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item .tag {
  position: absolute; left: .75rem; bottom: .75rem; padding: .25rem .7rem; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.65); border: 1px solid var(--border); font-size: .75rem; font-weight: 600; color: var(--white);
}
.gallery-item.wide { grid-column: span 2; aspect-ratio: auto; }
.gallery-item[hidden] { display: none; }
a.gallery-item { cursor: pointer; }
@media (max-width: 1023px) { .gallery-grid, .gallery-grid.home { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .gallery-grid, .gallery-grid.home { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .gallery-item.wide { grid-column: span 2; aspect-ratio: 16/9; } }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.5rem; }
.filter-btn {
  padding: .6rem 1.2rem; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-90); font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.filter-btn:hover { border-color: var(--border-strong); color: var(--white); }
.filter-btn[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #031412; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.92); padding: 4rem 1rem;
}
.lightbox.open { display: flex; }
.lightbox figure { margin: 0; max-width: min(90vw, 80rem); }
.lightbox img { max-height: 78vh; width: auto; margin-inline: auto; border-radius: var(--radius-sm); box-shadow: 0 0 80px rgba(20,216,196,.2); }
.lightbox figcaption { text-align: center; color: var(--muted); margin-top: 1rem; font-size: .9rem; }
.lb-btn {
  position: absolute; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--border-strong);
  background: rgba(0,0,0,.6); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.lb-btn:hover { border-color: var(--teal); }
.lb-btn svg { width: 1.25rem; height: 1.25rem; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- Testimonials ---------- */
.review-card { display: flex; flex-direction: column; gap: 1rem; }
.review-card blockquote { margin: 0; color: var(--white); font-size: var(--fs-h5); line-height: 1.55; }
.review-meta { display: flex; align-items: center; gap: .75rem; margin-top: auto; }
.avatar {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--teal-10); border: 1px solid var(--teal-20); color: var(--teal-light); font-weight: 700;
}
.review-meta strong { display: block; color: var(--white); }
.review-meta span { color: var(--muted-2); font-size: .875rem; }
.review-card.placeholder { border-style: dashed; border-color: var(--teal-20); }
.review-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2.5rem; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: .75rem; }
.faq-item {
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  transition: border-color .2s, background-color .2s;
}
.faq-item[open] { border-color: var(--teal-20); background: var(--teal-05); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.25rem 3.5rem 1.25rem 1.5rem; position: relative;
  color: var(--white); font-weight: 600; font-size: var(--fs-h5); border-radius: var(--radius-md);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 1.4rem; top: 50%; width: .7rem; height: .7rem;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-answer { padding: 0 1.5rem 1.4rem; color: var(--muted); }
.faq-answer p:last-child { margin: 0; }

/* ---------- Service area ---------- */
.area-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.chips li {
  padding: .5rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface); font-size: .9rem; color: var(--text-90);
}
.area-map {
  position: relative; aspect-ratio: 1 / 1; max-width: 26rem; margin-inline: auto; width: 100%;
  border-radius: 50%; border: 1px solid var(--border);
  background: radial-gradient(circle, rgba(20,216,196,.2), transparent 65%);
  display: grid; place-items: center; text-align: center;
}
.area-map::before, .area-map::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed var(--teal-20); }
.area-map::before { inset: 15%; }
.area-map::after { inset: 32%; border-style: solid; border-color: var(--teal-35); }
.area-map .pin { position: relative; z-index: 1; }
.area-map .pin-dot { width: 1rem; height: 1rem; border-radius: 50%; background: var(--teal); margin: 0 auto .75rem; box-shadow: 0 0 0 8px var(--teal-20), 0 0 40px var(--teal); }
.area-map strong { display: block; color: var(--white); font-size: 1.4rem; }
.area-map span { color: var(--muted); font-size: .9rem; }
@media (max-width: 899px) { .area-wrap { grid-template-columns: 1fr; } }

/* ---------- Forms ---------- */
.form-card {
  background: rgba(255,255,255,.03); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
  padding: 2.25rem; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .9rem; color: var(--white); }
.field label .req { color: var(--teal-light); }
.field label .opt { color: var(--muted-2); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: .9rem 1rem; border-radius: .75rem;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.4); color: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314d8c4' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; padding-right: 2.75rem; }
.field select option { background: #111; color: #fff; }
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #8a8a94; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-20); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .85rem; min-height: 0; }
.field-error:empty { display: none; }
.form-note { color: var(--muted-2); font-size: .85rem; margin: 1rem 0 0; }
.form-error { color: var(--danger); font-size: .9rem; margin: .75rem 0 0; }
.form-error a { color: inherit; text-decoration: underline; font-weight: 700; }
button[aria-busy="true"] { opacity: .7; cursor: progress; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .5rem; }
.form-success {
  display: none; text-align: center; padding: 2.5rem 1rem;
}
.form-success.show { display: block; }
.form-success .icon-bubble { width: 4rem; height: 4rem; border-radius: 50%; margin-inline: auto; }
.form-success h3 { margin-top: .5rem; }
.hp { position: absolute; left: -9999px; }
@media (max-width: 639px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 1.5rem; }
  .form-actions .btn { width: 100%; }
}

/* Contact info list */
.contact-list { list-style: none; display: grid; gap: 1rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; }
.contact-list .icon-bubble { margin: 0; flex: none; }
.contact-list strong { display: block; color: var(--white); }
.contact-list-spaced { margin-top: 2rem; }
.contact-list-block { margin: 2rem 0; }
.contact-list a { color: var(--text-90); text-decoration: none; }
.contact-list a:hover { color: var(--teal-light); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; text-align: center; border-top: 1px solid var(--border); }
.cta-band .cta-kicker { color: var(--muted); font-weight: 600; font-size: var(--fs-h4); line-height: 1.15; margin-bottom: .25rem; }
.cta-band h2 { font-style: italic; font-size: clamp(2.5rem, 7vw, 5rem); margin-bottom: 2rem; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; border-top: 1px solid var(--border); padding-top: 4.5rem; background: #070707; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3.5rem; position: relative; z-index: 1; }
.footer-brand .brand { margin-bottom: 1rem; gap: .7rem; }
.footer-brand .logo-mark { height: 2.4rem; width: auto; filter: drop-shadow(0 0 10px rgba(20, 216, 196, .3)); }
.footer-brand .logo-word { font-size: .85rem; }
.footer-brand p { color: var(--muted-2); max-width: 22rem; font-size: .95rem; }
.footer-col h2 { font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; color: var(--white); margin-bottom: 1rem; }
.footer-col ul { list-style: none; display: grid; gap: .6rem; }
.footer-col a { color: var(--muted-2); text-decoration: none; font-size: .925rem; font-weight: 500; }
.footer-col a:hover { color: var(--teal-light); }
.footer-col li { color: var(--muted-2); font-size: .925rem; }
.social { display: flex; gap: .6rem; margin-top: 1.25rem; list-style: none; }
.social a {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--white); transition: border-color .2s, color .2s, box-shadow .2s;
}
.social a:hover { border-color: var(--teal); color: var(--teal-light); box-shadow: 0 0 20px rgba(20,216,196,.3); }
.social svg { width: 1.1rem; height: 1.1rem; }
.footer-bottom {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  padding-block: 1.5rem; border-top: 1px solid var(--border); color: var(--muted-2); font-size: .85rem;
}
.footer-bottom a { color: var(--muted-2); }
@media (max-width: 1023px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .footer-top { grid-template-columns: 1fr; gap: 2.25rem; } }

/* Mobile sticky call/quote bar */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none; gap: .5rem;
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(0,0,0,.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
}
.mobile-cta .btn { flex: 1; padding: .85rem 1rem; }
@media (max-width: 767px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 4.5rem; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--delay, 0s); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .btn-glow::before { animation: none; }
}

/* ---------- Small-screen safety (no horizontal scroll at 360px) ---------- */
.ph { overflow-wrap: anywhere; }
.stat-num .ph { font-size: .5em; vertical-align: middle; }
@media (max-width: 479px) {
  .btn { white-space: normal; text-align: center; }
  .hero .btn-row .btn, .cta-band .btn-row .btn, .page-hero .btn { width: 100%; }
  .btn-lg { padding: 1rem 1.5rem; font-size: 1rem; }
  .hero { padding-top: 8.5rem; }
  .page-hero { padding-top: 8.5rem; }
  .card { padding: 1.5rem; }
}

/* ==========================================================================
   Client favorites: hero slideshow, featured showcase, teal feature,
   pinned gallery items, gallery videos
   ========================================================================== */

/* Hero slideshow (crossfade). The .hero-media::after overlay keeps text contrast AA on every slide. */
.hero-slides { background: var(--bg); }
.hero-slides .hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  opacity: 0; transition: opacity 1.8s var(--ease);
}
.hero-slides .hero-slide.is-active { opacity: 1; }
.hero-slides.animating .hero-slide.is-active { animation: hero-drift 7s ease-out both; }
@keyframes hero-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-slides::after { z-index: 1; }

/* Featured projects showcase */
.showcase-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}
.showcase-item {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-card); border: 1px solid var(--border);
  background: #0d1414; aspect-ratio: 4 / 5; text-decoration: none; color: var(--white);
  transition: border-color .25s, box-shadow .25s;
}
.showcase-item.sc-hero { grid-column: span 2; aspect-ratio: auto; }
.showcase-item.sc-tall { aspect-ratio: auto; }
.showcase-item img, .showcase-item video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.showcase-item::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.85) 100%);
}
.showcase-item:hover, .showcase-item:focus-visible { border-color: var(--teal-35); box-shadow: 0 2px 60px rgba(20,216,196,.25); }
.showcase-item:hover img { transform: scale(1.04); }
.showcase-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.25rem 1.4rem 1.3rem; display: grid; gap: .25rem;
}
.showcase-cap strong { font-size: var(--fs-h5); font-weight: 700; }
.showcase-cap span { color: var(--muted); font-size: .9rem; line-height: 1.45; max-width: 34rem; }
.sc-hero .showcase-cap strong { font-size: var(--fs-h4); }
.video-badge {
  position: absolute; top: .9rem; left: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem .3rem .55rem; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.65); border: 1px solid var(--teal-35); color: var(--teal-light);
  font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.video-badge svg { width: .85rem; height: .85rem; }
@media (min-width: 900px) {
  .showcase-item.sc-hero { min-height: 34rem; }
}
@media (max-width: 899px) {
  .showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-item.sc-hero { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .showcase-item.sc-tall { aspect-ratio: 4 / 5; }
}
@media (max-width: 559px) {
  .showcase-grid { grid-template-columns: 1fr; gap: .75rem; }
  .showcase-item.sc-hero { aspect-ratio: 4 / 3.4; }
  .showcase-cap { padding: 1rem 1.1rem 1.1rem; }
}

/* Teal feature (home) + owner photo (about) */
.teal-photo, .owner-photo { position: relative; margin: 0; }
.teal-photo img, .owner-photo img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%;
  border-radius: var(--radius-card); border: 1px solid var(--teal-35);
  box-shadow: 0 0 0 1px rgba(20,216,196,.08), 0 30px 120px rgba(20,216,196,.28);
}
.owner-photo figcaption { margin-top: 1rem; color: var(--muted-2); font-size: .875rem; text-align: center; }
.owner-photo .float-card { position: absolute; right: -1rem; top: 1.5rem; bottom: auto; }
@media (max-width: 899px) { .owner-photo .float-card { right: .75rem; } }

/* Gallery: pinned favorites (larger tiles) on a row grid sized from the container width */
.gallery-grid.pinned {
  --cols: 4; --g: 1rem;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-auto-rows: 13rem;
  grid-auto-rows: calc((100cqi - (var(--cols) - 1) * var(--g)) / var(--cols) * .75);
  grid-auto-flow: row dense; gap: var(--g);
}
/* cqi resolves against the nearest ancestor container, so the wrapping .container is the query container */
.container:has(> .gallery-grid.pinned) { container-type: inline-size; }
.gallery-grid.pinned .gallery-item { aspect-ratio: auto; height: 100%; }
.gallery-grid.pinned .gallery-item img { position: absolute; inset: 0; }
.gallery-grid.pinned .gallery-item.tall { grid-row: span 2; }
.gallery-grid.pinned .gallery-item.big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 1023px) { .gallery-grid.pinned { --cols: 3; } }
@media (max-width: 767px) { .gallery-grid.pinned { --cols: 2; --g: .6rem; } }
.gallery-item.featured { border-color: var(--teal-35); }
.gallery-item.featured .tag { background: var(--teal); border-color: var(--teal); color: #031412; }
.gallery-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-item .video-badge { pointer-events: none; }

/* Lightbox video */
.lightbox video { display: block; max-height: 78vh; max-width: 100%; width: auto; margin-inline: auto; border-radius: var(--radius-sm); box-shadow: 0 0 80px rgba(20,216,196,.2); background: #000; }
.lightbox video[hidden], .lightbox img[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-slides .hero-slide { transition: none; }
  .hero-slides.animating .hero-slide.is-active { animation: none; }
  .showcase-item img { transition: none; }
}

/* Reviews: real Nextdoor recommendation + review links */
.reviews-grid { align-items: stretch; max-width: 60rem; margin-inline: auto; }
figure.review-card { margin: 0; }
.review-card blockquote p { margin: 0; }
.review-cta { display: flex; flex-direction: column; gap: .5rem; }
.review-cta h3 { margin: 0; }
.review-links.review-links-left { justify-content: flex-start; margin-top: auto; padding-top: 1rem; }
.chips li.chip-accent { border-color: var(--teal-35); background: var(--teal-10); color: var(--teal-light); font-weight: 600; }
.review-source { color: var(--teal-light); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* Services: secondary "also available" line (seasonal holiday installs) */
.services-also {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem .75rem;
  margin: 2rem 0 0; text-align: center; color: var(--muted); font-size: .95rem;
}
.services-also .chip-accent {
  padding: .3rem .8rem; border-radius: var(--radius-pill); border: 1px solid var(--teal-35);
  background: var(--teal-10); color: var(--teal-light); font-size: .8rem; font-weight: 700; letter-spacing: .04em;
}
.chips.service-also { margin: -.75rem 0 1.75rem; }

/* ---------- QA fixes (visual e2e pass) ---------- */
/* Float card styling applies wherever the card is used (About owner photo lacked it) */
.float-card {
  background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  padding: 1rem 1.25rem; max-width: 16rem; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
/* Better crops on portrait / busy service photos */
#electrical .service-media img { object-position: 50% 50%; }
#interior .service-media img { object-position: 50% 25%; }
/* Even spacing after the last service row */
.service-row:last-child { padding-bottom: 0; }
/* Gallery tiles that are mostly night sky: bias the crop toward the house */
.gallery-item[data-full$="featured-1-farmhouse.jpg"] img,
.gallery-item[data-video$="boardbatten-gables-pan.mp4"] video { object-position: 50% 72%; }
/* Value-card titles start their body copy at the same height */
.grid-4 > .card h3 { min-height: 2.4em; }
@media (max-width: 767px) {
  /* Reserve space for the fixed mobile CTA inside the footer, not as a body seam */
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: 4.5rem; }
  .services-also .chip-accent, .chips.service-also .chip { border-radius: .9rem; }
  .eyebrow { letter-spacing: .08em; font-size: .72rem; }
  .grid-4 > .card h3 { min-height: 0; }
}
/* Home QA: caption legibility on bright photos, soft glow edges, balanced wrapping */
.showcase-item::after { background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.9) 100%); }
.showcase-cap span { color: rgba(255,255,255,.85); }
.showcase-cap { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.glow-wrap { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12rem); mask-image: linear-gradient(180deg, transparent 0, #000 12rem); }
h1, h2, h3 { text-wrap: balance; }
.lead, .hero p, .section-head p { text-wrap: pretty; }
.nowrap { white-space: nowrap; }
@media (max-width: 559px) { .showcase-item.sc-hero { aspect-ratio: 4 / 4.4; } }
/* Home QA round 2 */
ol.steps { padding: 0; margin: 0; }
.area-map strong { text-shadow: 0 0 14px #0a0a0a, 0 0 6px #0a0a0a, 0 0 2px #0a0a0a; position: relative; z-index: 1; }
.card p { text-wrap: pretty; }
.gallery-item { background: linear-gradient(135deg, #0d1414, #0a1f1d); }
@media (max-width: 767px) { .stat { min-height: 7.5rem; display: flex; flex-direction: column; justify-content: center; } }
/* Gallery: zoom mostly-sky tiles toward the house (crop position alone can't, tiles are taller than the media) */
.gallery-item[data-full$="featured-1-farmhouse.jpg"] img,
.gallery-item[data-full$="featured-2-board-batten.jpg"] img,
.gallery-item[data-video$="boardbatten-gables-pan.mp4"] video { transform: scale(1.3); transform-origin: 50% 85%; }
.gallery-item[data-full$="featured-1-farmhouse.jpg"]:hover img,
.gallery-item[data-full$="featured-2-board-batten.jpg"]:hover img { transform: scale(1.36); }

/* ==========================================================================
   Featured reviews (home), review quotes (services + about),
   permanent lighting timeline, commercial proof
   ========================================================================== */

/* Shared review bits */
.rv-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.rv-stars { display: inline-flex; gap: .12rem; color: var(--teal-light); font-size: 1rem; line-height: 1; letter-spacing: 0; text-shadow: 0 0 10px var(--teal-35), 0 0 2px var(--teal); }
.rv-stars-lg { font-size: 1.35rem; }
.rv-source, .rv-badge {
  display: inline-flex; align-items: center; padding: .25rem .65rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
}
.rv-badge { border-color: var(--teal-35); background: var(--teal-10); color: var(--teal-light); }

/* Glow review card (builds on .card + .review-card) */
.rv-card {
  gap: 1.1rem; padding: 1.75rem; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,216,196,.07), rgba(255,255,255,.02) 45%);
  border-color: rgba(20,216,196,.18);
  box-shadow: 0 24px 60px -34px rgba(20,216,196,.45);
}
.rv-card::before {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent); opacity: .7;
}
.rv-card:hover { border-color: var(--teal-35); box-shadow: 0 2px 50px rgba(20,216,196,.18); }
.rv-card blockquote { font-size: 1rem; line-height: 1.65; color: var(--text-90); }
.rv-card blockquote p { text-wrap: pretty; }
.rv-card-nd blockquote { font-size: var(--fs-h5); color: var(--white); font-weight: 600; line-height: 1.5; }

/* Hero quote */
.rv-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
  margin: 0 0 var(--gap); padding: clamp(2rem, 5vw, 3.75rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: 1.75rem; border: 1px solid var(--teal-35);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(20,216,196,.2), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(20,216,196,.08), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow: 0 0 0 1px rgba(20,216,196,.08), 0 40px 120px -40px rgba(20,216,196,.5);
}
.rv-mark {
  width: clamp(4rem, 9vw, 7.5rem); height: auto; color: var(--teal);
  filter: drop-shadow(0 0 18px rgba(20,216,196,.55)) drop-shadow(0 0 2px rgba(111,245,230,.8));
}
.rv-hero-body { display: flex; flex-direction: column; gap: 1.5rem; max-width: 56rem; }
.rv-hero-body .rv-top { justify-content: flex-start; }
.rv-hero blockquote { margin: 0; }
.rv-hero blockquote p {
  margin: 0; color: var(--white); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.25rem, 2.3vw, 1.85rem); line-height: 1.42; text-wrap: pretty;
}
.rv-hero .review-meta { margin-top: 0; }
.rv-hero .avatar { width: 3.1rem; height: 3.1rem; box-shadow: 0 0 20px rgba(20,216,196,.3); }
@media (max-width: 639px) {
  .rv-hero { grid-template-columns: 1fr; gap: 1rem; }
  .rv-mark { width: 3.5rem; }
}

/* 9-card grid (3 x 3). Below 1024px it becomes a scroll-snap row: no JS, keyboard scrollable, no autoplay. */
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.rv-grid:focus-visible { outline: 2px solid var(--teal-light); outline-offset: 6px; border-radius: var(--radius-card); }
.rv-hint { display: none; }
@media (max-width: 1023px) {
  .rv-grid {
    display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding: .25rem var(--gutter) 1.25rem;
    scrollbar-width: thin; scrollbar-color: var(--teal-35) transparent;
  }
  .rv-grid > .rv-card { flex: 0 0 min(24rem, 46%); scroll-snap-align: start; }
  .rv-grid:focus-visible { outline-offset: -2px; border-radius: 0; }
  .rv-hint {
    display: flex; align-items: center; justify-content: flex-end; gap: .35rem;
    margin: 0 0 .75rem; color: var(--muted-2); font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  }
  .rv-hint svg { width: .95rem; height: .95rem; color: var(--teal-light); }
}
@media (max-width: 639px) { .rv-grid > .rv-card { flex-basis: 84%; } }

/* Summary bar */
.rv-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem;
  margin-top: 2.5rem; padding: 1.4rem 1.75rem; border-radius: var(--radius-card);
  border: 1px solid var(--border); background: rgba(255,255,255,.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.rv-summary-text { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.rv-summary-text p { margin: 0; color: var(--muted); }
.rv-summary-text strong { color: var(--white); }
.rv-dot { color: var(--teal); margin-inline: .2rem; }
.rv-summary-links { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 767px) {
  .rv-summary { padding: 1.4rem; }
  .rv-summary-links { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .rv-summary-links .rv-primary { grid-column: 1 / -1; }
}

/* Row of 3 review cards (services + about) */
.rv-row { align-items: stretch; }
@media (min-width: 640px) and (max-width: 1023px) {
  /* 3 cards on a 2-col grid would orphan the last one: let it span the row */
  .rv-row > .rv-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Inline quote (services: electrical) */
.rv-inline {
  margin: 0 0 1.75rem; padding: 1.25rem 1.4rem; border-radius: var(--radius-md);
  border: 1px solid rgba(20,216,196,.2); border-left: 3px solid var(--teal);
  background: linear-gradient(90deg, rgba(20,216,196,.08), rgba(255,255,255,.02));
  display: grid; gap: .75rem;
}
.rv-inline blockquote { margin: 0; }
.rv-inline blockquote p { margin: 0; color: var(--text-90); line-height: 1.6; text-wrap: pretty; }
.rv-inline figcaption { font-size: .9rem; color: var(--muted-2); }
.rv-inline figcaption strong { color: var(--white); margin-right: .25rem; }

/* ---------- Permanent lighting timeline (home) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.tl-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tl-marker {
  position: relative; z-index: 1; flex: none; display: grid; place-items: center;
  width: 4.5rem; height: 4.5rem; margin-bottom: 1.5rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #10302c, #0a0a0a 70%);
  border: 1px solid var(--teal); color: var(--teal-light);
  box-shadow: 0 0 0 6px rgba(20,216,196,.07), 0 0 32px rgba(20,216,196,.4);
}
.tl-marker svg { width: 1.7rem; height: 1.7rem; }
.tl-num {
  position: absolute; top: -.3rem; right: -.3rem; display: grid; place-items: center;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  background: var(--teal); color: #031412; font-size: .8rem; font-weight: 800;
  box-shadow: 0 0 0 3px var(--bg), 0 0 14px rgba(20,216,196,.6);
}
/* Teal connector from this marker to the next one */
.tl-step:not(:last-child)::after {
  content: ""; position: absolute; top: 2.25rem; height: 2px;
  left: calc(50% + 2.25rem + .5rem); width: calc(100% + var(--gap) - 4.5rem - 1rem);
  background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--teal));
  box-shadow: 0 0 12px rgba(20,216,196,.55); border-radius: 2px;
}
.tl-body {
  flex: 1; width: 100%; padding: 1.5rem 1.4rem 1.6rem; border-radius: var(--radius-card);
  background: rgba(255,255,255,.025); border: 1px solid var(--border);
  transition: background-color .25s, border-color .25s, box-shadow .25s;
}
.tl-step:hover .tl-body { background: var(--teal-05); border-color: var(--teal-20); box-shadow: 0 2px 50px rgba(20,216,196,.12); }
.tl-body h3 { font-size: var(--fs-h5); margin-bottom: .5rem; }
.tl-body p { margin: 0; color: var(--muted); font-size: .95rem; text-wrap: pretty; }
.tl-body a { color: var(--teal-light); text-decoration: none; font-weight: 600; }
.tl-body a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tl-cta { margin-top: 2.75rem; gap: 1rem 1.5rem; }
@media (max-width: 1023px) {
  .timeline { grid-template-columns: 1fr; gap: 1.25rem; max-width: 40rem; margin-inline: auto; }
  .tl-step { flex-direction: row; align-items: stretch; gap: 1.25rem; text-align: left; }
  .tl-marker { width: 3.5rem; height: 3.5rem; margin: .5rem 0 0; }
  .tl-marker svg { width: 1.35rem; height: 1.35rem; }
  .tl-step:not(:last-child)::after {
    top: calc(.5rem + 3.5rem + .4rem); bottom: calc(-1.25rem - .5rem + .4rem); left: calc(1.75rem - 1px);
    width: 2px; height: auto;
    background: linear-gradient(180deg, var(--teal), var(--teal-light), var(--teal));
  }
  .tl-body { padding: 1.25rem 1.25rem 1.35rem; }
}
@media (max-width: 479px) {
  .tl-step { gap: 1rem; }
  .tl-marker { width: 3rem; height: 3rem; }
  .tl-marker svg { width: 1.15rem; height: 1.15rem; }
  .tl-num { width: 1.4rem; height: 1.4rem; font-size: .72rem; }
  .tl-step:not(:last-child)::after { top: calc(.5rem + 3rem + .4rem); left: calc(1.5rem - 1px); }
  .tl-cta .btn { width: 100%; }
}

/* ---------- Commercial proof (home + services) ---------- */
.commercial-proof {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem 3rem; align-items: center;
  margin-top: 4rem; padding: 2rem 2.25rem; border-radius: var(--radius-card);
  border: 1px solid var(--teal-20);
  background: radial-gradient(ellipse at 100% 0%, rgba(20,216,196,.12), transparent 60%), rgba(255,255,255,.025);
}
.cp-intro .eyebrow { margin-bottom: .6rem; }
.cp-intro h3 { font-size: var(--fs-h4); margin-bottom: .6rem; }
.cp-intro p:last-child { margin: 0; color: var(--muted); text-wrap: pretty; }
.cp-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cp-item {
  display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.15rem; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: rgba(0,0,0,.35);
}
.cp-item .icon-bubble { margin: 0; flex: none; }
.cp-item strong { display: block; color: var(--white); line-height: 1.3; }
.cp-item span:not(.icon-bubble) { display: block; color: var(--muted-2); font-size: .875rem; }
@media (max-width: 899px) {
  .commercial-proof { grid-template-columns: 1fr; padding: 1.75rem 1.5rem; }
}
@media (max-width: 559px) { .cp-list { grid-template-columns: 1fr; } }

/* ---------- Services: permanent eave extras ---------- */
.svc-kicker { margin: 0 0 .5rem; color: var(--teal-light); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.svc-extra { grid-column: 1 / -1; order: 3; display: grid; gap: var(--gap); }
.svc-extra .commercial-proof { margin-top: 0; }
.svc-extra-block {
  padding: 1.75rem 2rem; border-radius: var(--radius-card);
  border: 1px solid var(--border); background: rgba(255,255,255,.025);
}
.svc-extra-title { font-size: var(--fs-h5); margin-bottom: 1.25rem; }
.mini-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.mini-steps li { position: relative; display: flex; gap: .8rem; align-items: flex-start; }
.mini-num {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--black); border: 1px solid var(--teal); color: var(--teal-light); font-weight: 800; font-size: .85rem;
  box-shadow: 0 0 16px rgba(20,216,196,.35);
}
.mini-steps strong { display: block; color: var(--white); line-height: 1.3; margin: .2rem 0 .3rem; }
.mini-steps span:not(.mini-num):not(.visually-hidden) { display: block; color: var(--muted); font-size: .9rem; line-height: 1.5; }
@media (max-width: 1023px) { .mini-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) {
  .mini-steps { grid-template-columns: 1fr; gap: 1rem; }
  .svc-extra-block { padding: 1.5rem 1.25rem; }
}
@media (max-width: 767px) {
  .rv-dot { display: none; }
  .rv-summary-text p > .nowrap { display: block; }
}

/* ---------- Mobile-first pass ---------- */
/* Phone-first rhythm, tap targets (44px+), thumb-friendly controls and touch patterns.
   Rules here are scoped to phones unless noted. */

/* Hero rating line: flex row of two unbreakable groups (gap + separator rules are in the
   "Hero rating line: always a clear gap" block at the end of this file) */
.hero-proof { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .55rem; }
.sc-hint { display: none !important; }

/* Sticky quote bar: slides away while the menu is open or the on-page quote form is in view (js/main.js) */
.mobile-cta { transition: transform .3s var(--ease), visibility 0s linear 0s; }
.mobile-cta.is-hidden, html.menu-open .mobile-cta {
  transform: translateY(110%); visibility: hidden;
  transition: transform .3s var(--ease), visibility 0s linear .3s;
}
/* Scroll lock while the menu sheet is open */
html.menu-open, html.menu-open body { overflow: hidden; }

/* Lightbox close button clears the notch / status bar */
.lb-close { top: calc(.75rem + env(safe-area-inset-top)); right: calc(.75rem + env(safe-area-inset-right)); }
.rv-row:focus-visible { outline: 2px solid var(--teal-light); outline-offset: -2px; }

@media (max-width: 1023px) {
  .nav-phone { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
}

@media (max-width: 899px) {
  /* Previewer: heading first, then the stage, then the controls (text column flattens into the grid) */
  .previewer { gap: 0; }
  .previewer > .reveal:not(.preview-stage) { display: contents; }
  .previewer .eyebrow, .previewer h2, .previewer h2 + .muted { order: -1; }
  .previewer .preview-stage { margin: .5rem 0 0; }
}

@media (max-width: 767px) {
  /* Rhythm */
  :root { --section: 3.25rem; --gap: 1rem; }
  html { scroll-padding-top: 5.5rem; }
  .site-header { top: .75rem; }
  h1 { font-size: clamp(2.15rem, 10.2vw, 2.75rem); }
  h2 { font-size: clamp(1.7rem, 7.6vw, 2.1rem); }
  .mission h2 { font-size: 1.45rem; line-height: 1.35; }
  .eyebrow { font-size: .78rem; margin-bottom: .6rem; }
  .lead { font-size: 1.05rem; }
  .section-head, .section-head-row { margin-bottom: 1.75rem; }
  .section-head-row { gap: 1.25rem; }
  .after-hero { padding-top: .5rem; }
  .split { gap: 2rem; }
  .split-spaced { margin-top: 2.5rem; }
  .btn-row-spaced { margin-top: 1.35rem; }
  .card { padding: 1.35rem; }

  /* Hero: small-viewport units so iOS toolbars do not make it jump; CTA well above the fold */
  .hero { min-height: 88vh; min-height: 88svh; padding-top: 7rem; padding-bottom: 3.5rem; }
  .hero .lead { margin-bottom: 1.75rem; }
  .hero-proof { margin-top: 1.4rem; font-size: .9rem; }
  .page-hero { padding-top: 7.5rem; padding-bottom: 2.25rem; }
  .breadcrumb { margin-bottom: .75rem; }

  /* Tap targets: 44px minimum. Inline links in running text get a taller hit area without moving the text. */
  .btn { min-height: 2.75rem; }
  .btn-sm { padding: .75rem 1.2rem; }
  .text-link { min-height: 2.75rem; }
  main p a:not(.btn):not(.text-link), .breadcrumb a, .footer-bottom a { padding-block: .85rem; }
  .breadcrumb a { padding-inline: .2rem; }
  .section-head-row > .btn { padding: .8rem 1.3rem; }

  /* Stats + icon cards: compact, icon beside the text */
  .stat-grid { gap: .75rem; margin-bottom: 1rem; }
  .stat { padding: 1rem .75rem; min-height: 5.75rem; }
  .card:has(> .icon-bubble:first-child) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.1rem 1.2rem; }
  .card:has(> .icon-bubble:first-child) > .icon-bubble { grid-row: 1 / span 2; margin: 0; width: 2.6rem; height: 2.6rem; }
  .card:has(> .icon-bubble:first-child) > h3 { font-size: 1.08rem; margin: .15rem 0 .25rem; }
  .card:has(> .icon-bubble:first-child) > p { margin: 0; font-size: .95rem; }
  .steps { gap: .75rem; }
  .step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; padding: 1.1rem 1.2rem; }
  .step-num { grid-row: 1 / span 2; margin: 0; width: 2.4rem; height: 2.4rem; }
  .step h3 { margin: .3rem 0 .25rem; }

  /* Teal feature photo: a little less tall */
  .teal-photo img { aspect-ratio: 1 / 1; }

  /* Previewer: full-bleed stage so the lights read, thumb-friendly controls */
  .previewer .preview-stage { margin: .75rem calc(-1 * var(--gutter)) 0; border-radius: 0; border-left: 0; border-right: 0; aspect-ratio: 4 / 3; }
  .pv-label { margin: 1.25rem 0 .5rem; }
  .scene-buttons {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--gutter)); padding: .3rem var(--gutter) .45rem; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
  }
  .scene-buttons::-webkit-scrollbar { display: none; }
  .scene-btn { flex: none; min-height: 2.75rem; padding: .6rem 1rem; font-size: .9rem; white-space: nowrap; scroll-snap-align: start; }
  .fx-toggle { display: flex; width: 100%; }
  .fx-btn { flex: 1; min-height: 2.75rem; font-size: .9rem; }
  .previewer .btn-row .btn { width: 100%; }
  .preview-stage .stage-note { font-size: .75rem; }

  /* Process timeline + commercial block */
  .tl-body { padding: 1rem 1.1rem 1.1rem; }
  .tl-cta { margin-top: 1.75rem; }
  .tl-cta .text-link { justify-content: center; }
  .commercial-proof { margin-top: 2.5rem; padding: 1.4rem 1.2rem; gap: 1.25rem; }
  .cp-list { gap: .75rem; }

  /* Reviews */
  .rv-hero { padding: 1.5rem 1.25rem; gap: .75rem; margin-bottom: 1.25rem; }
  .rv-hero-body { gap: 1rem; }
  .rv-hero blockquote p { font-size: 1.12rem; line-height: 1.5; }
  .rv-mark { width: 2.75rem; }
  .rv-card { padding: 1.35rem; }
  .rv-hint { font-size: .85rem; }
  .rv-summary { margin-top: 1.25rem; }

  /* Service area */
  .area-wrap { gap: 1.75rem; }
  .area-map { max-width: 15rem; }
  .area-map strong { font-size: 1.15rem; }
  .chips li { padding: .45rem .9rem; font-size: .875rem; }

  /* FAQ: full-width 56px tap rows */
  .faq-list { gap: .6rem; }
  .faq-item summary { display: flex; align-items: center; min-height: 3.5rem; padding: .9rem 3rem .9rem 1.1rem; font-size: 1.02rem; line-height: 1.35; }
  .faq-item summary::after { right: 1.15rem; }
  .faq-answer { padding: 0 1.1rem 1.1rem; }

  /* Forms: 16px+ inputs (no iOS focus zoom), roomy fields, full-width submit */
  .form-card { padding: 1.25rem; }
  .form-grid { gap: 1rem; }
  .field input, .field select, .field textarea { font-size: 1rem; }
  .field input, .field select { min-height: 3rem; }
  .form-actions { flex-direction: column; align-items: stretch; gap: .25rem; }
  .form-actions .btn { width: 100%; }
  .form-actions .text-link { justify-content: center; }
  .form-note { font-size: .875rem; }
  .form-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .form-grid > .field { grid-column: 1 / -1; }
  .form-grid > .field:has([autocomplete="address-level2"]), .form-grid > .field:has([data-zip]) { grid-column: auto; }
  .contact-list-spaced { margin-top: 1.25rem; }
  .contact-list a { padding-block: .75rem; } /* taller hit area, same layout */

  /* Gallery */
  .filters { gap: .5rem; margin-bottom: 1.5rem; }
  .filter-btn { min-height: 2.75rem; padding: .6rem 1.1rem; }

  /* Lightbox: big image, prev/next in thumb reach at the bottom, safe-area aware */
  .lightbox { padding: calc(4.25rem + env(safe-area-inset-top)) .5rem calc(5.5rem + env(safe-area-inset-bottom)); touch-action: pan-y pinch-zoom; background: rgba(4, 5, 5, .97); }
  .lightbox figure { max-width: 100%; }
  .lightbox img, .lightbox video { max-height: 70vh; max-height: calc(100svh - 11rem); }
  .lb-prev, .lb-next { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: none; width: 3.25rem; height: 3.25rem; }
  .lb-prev { left: calc(1rem + env(safe-area-inset-left)); }
  .lb-next { right: calc(1rem + env(safe-area-inset-right)); }
  .lightbox figcaption { font-size: .875rem; padding-inline: 1rem; }

  /* Services page */
  .service-row { padding-block: 2.25rem; gap: 1.25rem; }
  .svc-extra { gap: 1rem; }
  .check-list { margin: 1rem 0 1.25rem; }

  /* Footer: tidy two-column link lists instead of one long column; 44px rows */
  .site-footer { padding-top: 2.75rem; padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  .footer-top { grid-template-columns: 1fr; gap: 1.5rem; padding-bottom: 1.5rem; }
  .footer-brand p { margin-bottom: 0; }
  .footer-col h2 { font-size: .8rem; margin-bottom: .25rem; color: var(--muted); }
  .footer-col ul { grid-template-columns: 1fr 1fr; column-gap: 1rem; row-gap: 0; }
  .footer-col:last-child ul { grid-template-columns: 1fr; }
  .footer-col li { display: flex; flex-wrap: wrap; align-items: center; column-gap: .35rem; min-height: 2.75rem; font-size: .95rem; line-height: 1.35; }
  .footer-col li:not(:has(a)) { min-height: 2rem; }
  .footer-col a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; font-size: .95rem; }
  .social { gap: .75rem; }
  .social a { width: 2.75rem; height: 2.75rem; }
  .footer-bottom { font-size: .875rem; padding-block: 1.1rem; }

  /* Sticky bar */
  .mobile-cta { padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
  .mobile-cta .btn { min-height: 3rem; }
}

@media (max-width: 639px) {
  /* Featured projects: one swipeable row with a peek of the next photo */
  .sc-hint { display: flex !important; }
  .showcase-grid {
    display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .25rem;
    scrollbar-width: none;
  }
  .showcase-grid::-webkit-scrollbar { display: none; }
  .showcase-item, .showcase-item.sc-hero, .showcase-item.sc-tall { flex: 0 0 86%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .showcase-item.sc-hero img { object-position: 50% 60%; }

  /* Service cards: compact rows, photo on the left */
  .services-grid { gap: .75rem; }
  .services-grid .service-card { flex-direction: row; }
  .services-grid .service-card .media { flex: 0 0 36%; aspect-ratio: auto; min-height: 8rem; }
  .services-grid .service-card .body { padding: 1rem 1.1rem; gap: .3rem; justify-content: center; }
  .services-grid .service-card h3 { font-size: 1.05rem; }
  .services-grid .service-card p { font-size: .9rem; line-height: 1.45; }
  .services-grid .service-card .text-link { min-height: 0; margin-top: 0; padding-top: .15rem; font-size: .875rem; }

  /* Review rows (services + about): swipe like the home page */
  .rv-row {
    display: flex; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(-1 * var(--gutter)); padding: .25rem var(--gutter) 1rem;
    scrollbar-width: thin; scrollbar-color: var(--teal-35) transparent;
  }
  .rv-row > .rv-card { flex: 0 0 84%; scroll-snap-align: start; }
}
/* Hero rating line: always a clear gap between the two groups; stack cleanly on phones */
.hero-proof .proof-group { white-space: nowrap; }
.hero-proof .proof-trust { margin-left: 0; }
.hero-proof .proof-trust::before { content: "\00B7"; margin-right: .55rem; }
@media (max-width: 559px) {
  .hero-proof { flex-direction: column; gap: .15rem; }
  .hero-proof .proof-trust { margin-left: 0; }
  .hero-proof .proof-trust::before { content: none; }
}

/* ---------- Quote page: compact form + contact options ---------- */
.addr-toggle { display: block; width: 100%; grid-column: 1 / -1; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.addr-toggle > summary > * { flex: none; }
.addr-toggle > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem;
  min-height: 3rem; padding: .75rem 1rem; font-weight: 600; font-size: .95rem; color: var(--white);
}
.addr-toggle > summary::-webkit-details-marker { display: none; }
.addr-toggle > summary::before {
  /* plus drawn with two centred bars (a text "+" never sits optically centred) */
  content: ""; display: block; width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%;
  background:
    linear-gradient(var(--teal-light), var(--teal-light)) center / .7rem 2px no-repeat,
    linear-gradient(var(--teal-light), var(--teal-light)) center / 2px .7rem no-repeat,
    var(--teal-10);
  transition: transform .2s;
}
.addr-toggle[open] > summary::before { transform: rotate(45deg); }
.addr-toggle > summary .opt { color: var(--muted-2); font-weight: 500; }
.addr-grid { display: grid; grid-template-columns: 2fr 1fr; gap: .75rem; padding: 0 1rem 1rem; }
.addr-grid .field.full { grid-column: 1 / -1; }
.talk-actions { display: none; }

@media (max-width: 767px) {
  /* Short header so the form starts near the top */
  .contact-page .page-hero, body:has(.addr-toggle) .page-hero { padding-top: 6.25rem; padding-bottom: 1.25rem; }
  body:has(.addr-toggle) .page-hero .breadcrumb,
  body:has(.addr-toggle) .page-hero .eyebrow { display: none; }
  body:has(.addr-toggle) .page-hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.3rem); margin-bottom: .5rem; }
  body:has(.addr-toggle) .page-hero .lead { font-size: 1rem; margin: 0; }
  body:has(.addr-toggle) .after-hero { padding-top: .75rem; }
  /* Tighter form */
  .form-card { padding: 1.1rem; }
  .form-grid { gap: .8rem; }
  .field { gap: .3rem; }
  .field label { font-size: .85rem; }
  .field input, .field select { min-height: 3rem; }
  .field textarea { min-height: 6.5rem; }
  .form-actions { margin-top: .25rem; }
  .form-note { font-size: .8rem; margin-top: .6rem; }
  /* Contact options: 3 tap buttons + compact area/hours, no duplicate socials */
  body:has(.addr-toggle) .split-top { gap: 2rem; }
  .talk-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0 1.25rem; }
  .talk-actions .btn { width: 100%; padding-inline: .5rem; min-height: 3rem; font-size: .95rem; }
  .talk-list { margin: 0; gap: .75rem; }
  .talk-list li:nth-child(-n+3) { display: none; }
  .talk-list .icon-bubble { width: 2.25rem; height: 2.25rem; }
  .talk-list li { font-size: .9rem; }
  .talk-follow, .talk-social { display: none; }
}
/* The address toggle contains the ZIP field; keep it full width despite the city/ZIP half-width rule */
.form-grid > .field.addr-toggle { grid-column: 1 / -1; }

/* ---------- Service area map ---------- */
.area-map-wrap { width: 100%; }
.service-map {
  position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 32rem; margin-inline: auto;
  border-radius: var(--radius-card); overflow: hidden; background: #0d1111;
  border: 1px solid var(--border); box-shadow: 0 30px 80px -30px rgba(0,0,0,.9), 0 0 60px -14px rgba(20,216,196,.22);
  display: grid; place-items: center; z-index: 0;
}
.service-map .map-fallback { border: 0; max-width: none; width: 100%; height: 100%; border-radius: 0; }
.service-map.map-ready .map-fallback { display: none; }
.service-map.leaflet-container { font-family: inherit; background: #0d1111; }
/* Dark theme for the standard OpenStreetMap tiles */
.service-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.35); }
.service-map .leaflet-control-attribution { background: rgba(10,10,10,.7); color: var(--muted-2); font-size: .65rem; border-top-left-radius: .4rem; }
.service-map .leaflet-control-attribution a { color: var(--muted); }
.service-map .leaflet-bar { border: 1px solid var(--border-strong); box-shadow: none; }
.service-map .leaflet-bar a { background: rgba(10,10,10,.8); color: #fff; border-bottom-color: var(--border); width: 2.25rem; height: 2.25rem; line-height: 2.25rem; }
.service-map .leaflet-bar a:hover { background: #111; color: var(--teal-light); }
.map-label.leaflet-tooltip {
  background: rgba(10,10,10,.82); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: .2rem .6rem; font-size: .75rem; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.5); white-space: nowrap;
}
.map-label.leaflet-tooltip::before { display: none; }
.map-label-home.leaflet-tooltip { border-color: var(--teal); color: var(--teal-light); font-size: .8rem; }
.map-label em { font-style: normal; color: var(--muted); font-weight: 500; margin-left: .25rem; }
.map-home span {
  display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 6px rgba(20,216,196,.25), 0 0 24px rgba(20,216,196,.8); animation: map-pulse 2.2s ease-out infinite;
}
@keyframes map-pulse { 0% { box-shadow: 0 0 0 0 rgba(20,216,196,.55), 0 0 24px rgba(20,216,196,.8); } 100% { box-shadow: 0 0 0 16px rgba(20,216,196,0), 0 0 24px rgba(20,216,196,.8); } }
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1rem; margin-top: .85rem; font-size: .8rem; color: var(--muted); }
.map-legend .lg-line { display: inline-block; width: 1.4rem; height: 0; border-top: 2.5px dashed #ff3b3b; margin-right: -.55rem; }
.map-legend .lg-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--teal); margin-right: -.55rem; }
@media (max-width: 767px) {
  .service-map { aspect-ratio: 4 / 3.6; max-width: none; }
  .map-label.leaflet-tooltip { font-size: .68rem; padding: .15rem .5rem; }
}
@media (prefers-reduced-motion: reduce) { .map-home span { animation: none; } }
.service-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.15); }
.service-map .leaflet-control-attribution { color: #b4b4bc !important; padding: .1rem .45rem; line-height: 1.5; }
.service-map .leaflet-control-attribution a { color: #d6d6dc !important; }
/* Leaflet's own CSS loads after this file, so these need extra specificity */
.service-map.leaflet-container .leaflet-control-attribution { background: rgba(10,10,10,.72); color: #b4b4bc; }
.service-map.leaflet-container .leaflet-control-attribution a { color: #d6d6dc; }
.service-map.leaflet-container .leaflet-bar a { background: rgba(10,10,10,.8); color: #fff; }
.service-map.leaflet-container .map-label { font-family: inherit; }
/* Lightbox: our own swipe handling, so no browser panning/fling that could swallow the next tap */
#lightbox { touch-action: pinch-zoom; overscroll-behavior: contain; }

/* ---------- E2E visual QA pass (desktop + mobile) ---------- */
/* Map: label-free dark tiles, no colour filter needed */
.service-map .leaflet-tile-pane { filter: none; }
/* Gallery tags readable on bright photos */
.gallery-item .tag { background: rgba(0,0,0,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 1; }
.gallery-item::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(transparent, rgba(0,0,0,.5)); pointer-events: none; }
/* Captions and credits: no single-word last lines */
.owner-photo figcaption, .rv-inline figcaption, figcaption { text-wrap: balance; }
/* Nextdoor review card: centre its short quote */
.rv-card-nd blockquote { margin-block: auto; }
@media (min-width: 900px) {
  /* Header: the teal CTA already says Free Quote */
  .nav-links a[href="contact.html"] { display: none; }
  /* Balance photo/text splits */
  .teal-feature .teal-photo img { aspect-ratio: 1 / 1; }
  .about-commitment-img, .split-spaced .split-media img { aspect-ratio: 4 / 3; object-fit: cover; }
  .previewer { align-items: start; }
  .preview-stage { aspect-ratio: 4 / 3; }
  /* Mission band: centred statement, less empty space */
  .mission { padding-block: 4.5rem; }
  .mission .container { text-align: center; }
  .mission h2 { margin-inline: auto; }
  /* Stacked section paddings */
  #services, #area { padding-top: 3.5rem; }
}
@media (max-width: 767px) {
  /* Hero no longer forces near-full height */
  .hero { min-height: 78svh; }
  /* Consistent full-width buttons in stacked rows */
  .section .btn-row .btn, .service-body .btn-row .btn, .service-row .btn-row .btn { width: 100%; justify-content: center; }
  .talk-actions .btn { padding-inline: .5rem; }
  .footer-col li { align-items: flex-start; }
  .chips.service-also .chip-accent { border-radius: 1rem; }
  .showcase { padding-bottom: 2.5rem; }
}
/* Service area without the map: one centred block */
.area-wrap.area-solo { grid-template-columns: 1fr; max-width: 52rem; text-align: center; }
.area-solo .chips { justify-content: center; }
.area-solo .eyebrow { justify-content: center; }

/* ==========================================================================
   Batch 2 photos (2026-09-29): interior service crop, holiday modes strip
   (Services > Permanent Eave), "Our crew at work" strip (About)
   ========================================================================== */
/* New interior photo is already a 4:3 crop; centre it */
#interior .service-media img { object-position: 50% 50%; }

/* Services: Christmas / Halloween modes on permanent lights */
.holiday-modes { margin: -.5rem 0 1.75rem; max-width: 26rem; }
.holiday-modes-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.holiday-modes img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%;
  border-radius: var(--radius-md); border: 1px solid var(--border);
}
.holiday-modes figcaption { margin-top: .5rem; color: var(--muted-2); font-size: .8rem; text-align: left; text-wrap: pretty; }

/* About: crew at work */
.crew-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.crew-strip img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--radius-card); border: 1px solid var(--border);
}
@media (max-width: 767px) { .crew-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } }
/* Gallery: batch 2 video tiles with a lot of night sky, bias the crop toward the house */
.gallery-item[data-video$="gray-farmhouse-roofline-pan.mp4"] video { object-position: 50% 85%; }
.gallery-item[data-video$="stucco-garage-roofline-pan.mp4"] video { object-position: 50% 90%; }

/* ---------- Short home page on phones (most customers are on mobile) ---------- */
.faq-more { display: none; }
@media (max-width: 767px) {
  /* Sections that repeat content found elsewhere */
  .mission, .teal-feature, #work, #why .grid-3, .reviews-featured .rv-hero { display: none; }
  /* Services: compact 2-column tiles (title + arrow), photos and blurbs on the services page */
  #services .services-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  #services .service-card { min-height: 0; }
  #services .service-card .media, #services .service-card .body p { display: none; }
  #services .service-card .body { padding: .9rem 1rem; gap: .35rem; justify-content: space-between; min-height: 5.25rem; }
  #services .service-card h3 { font-size: 1rem; line-height: 1.25; }
  #services .service-card .text-link { font-size: .8rem; }
  #services .section-head .lead, #services .services-also { display: none; }
  /* Why us: just the 4 stats */
  #why .stat-grid { margin-bottom: 0; }
  #why .section-head .lead { display: none; }
  /* Process: tighter steps */
  #process .tl-step { padding-bottom: .9rem; }
  #process .tl-body p { font-size: .9rem; }
  #process .tl-cta .text-link { display: none; }
  /* FAQ: top 4 + link to the full list */
  #faq .faq-item:nth-of-type(n+5) { display: none; }
  .faq-more { display: flex; justify-content: center; margin: 1.25rem 0 0; }
  /* Quote: form only (phone/email are in the sticky bar and footer) */
  #quote .contact-list { display: none; }
  #quote .split { gap: 1.25rem; }
  /* Slightly tighter section rhythm */
  main > .section { padding-block: 3rem; }
}
@media (max-width: 767px) { .hero { min-height: 0; padding-bottom: 2.75rem; } }
/* Previewer: quote button sits under the intro */
.pv-cta { margin: 1.1rem 0 .35rem; }
.pv-cta + .form-note { margin: 0 0 .5rem; }

/* ---------- Permanent eave lights: track install option ---------- */
.track-option { border: 1px solid var(--teal-35); border-radius: var(--radius-card); padding: 1.5rem; background: linear-gradient(160deg, rgba(20,216,196,.07), rgba(255,255,255,.02)); }
.track-option .eyebrow { margin-bottom: .35rem; }
.track-option > .muted { margin: .5rem 0 1rem; max-width: 46rem; }
.track-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.track-media figure { margin: 0; position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: #0d1111; }
.track-media img, .track-media video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.track-media figcaption { position: absolute; left: .5rem; bottom: .5rem; right: .5rem; font-size: .75rem; font-weight: 600; color: #fff; padding: .25rem .55rem; border-radius: var(--radius-pill); background: rgba(0,0,0,.72); width: fit-content; max-width: calc(100% - 1rem); }
.track-quote { margin: 1.1rem 0 1rem; padding-left: 1rem; border-left: 3px solid var(--teal); }
.track-quote p { margin: 0; color: var(--white); font-size: 1.05rem; font-weight: 500; }
.track-quote cite { display: block; margin-top: .35rem; font-style: normal; font-size: .82rem; color: var(--muted-2); }
@media (max-width: 767px) {
  .track-option { padding: 1.1rem; }
  .track-media { grid-template-columns: 1fr 1fr; }
  .track-media .track-video { grid-column: 1 / -1; }
  .track-media .track-video video { aspect-ratio: 4 / 3; object-position: 50% 60%; }
}