/* Five Sixteen Lighting Co.
   Palette from the logo: near-black, warm white and gold, plus the midnight blue
   of the snow scenes. Cinzel echoes the logo's serif; Jost matches "LIGHTING COMPANY". */

/* ---------- Tokens ---------- */
:root {
  --ink: #050608;
  --ink-2: #090b10;
  --night: #0b1424;
  --night-2: #111d33;
  --cream: #f6efe3;
  --cream-2: rgba(246, 239, 227, 0.78);
  --cream-3: rgba(246, 239, 227, 0.58);
  --gold: #d4a85f;
  --gold-hi: #f2d49b;
  --gold-deep: #a97b37;
  --glow: #ffc66b;
  --line: rgba(246, 239, 227, 0.12);
  --line-strong: rgba(246, 239, 227, 0.24);
  --danger: #ff9a8a;

  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --fs-eyebrow: 0.74rem;
  --fs-small: 0.9rem;
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0875rem);
  --fs-lede: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.6rem);
  --fs-h2: clamp(1.95rem, 1.3rem + 2.6vw, 3.5rem);
  --fs-h1: clamp(2.5rem, 1.45rem + 4.5vw, 6rem);
  --fs-display: clamp(2.9rem, 1.1rem + 7.2vw, 8.4rem);

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 1240px;
  --container-wide: 1480px;
  --container-narrow: 780px;
  --section: clamp(5rem, 3.4rem + 7vw, 10rem);
  --header-h: 5rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  color-scheme: dark;
}

@media (max-width: 67.4375em) {
  :root { --header-h: 4.25rem; }
}

/* ---------- Base ---------- */
/* Breakpoints are in em (16px each at the default text size), so a larger browser text setting moves
   the layout to the narrower design instead of overflowing it. */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--ink);
}
/* The fixed call bar covers the bottom of the screen on phones, so focused elements scroll clear of it. */
@media (max-width: 56.1875em) { html { scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom)); } }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--cream-2);
  font: 400 var(--fs-body)/1.65 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

[hidden] { display: none !important; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; }

::selection { background: rgba(212, 168, 95, 0.38); color: var(--cream); }

:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease-out);
}
.skip-link:focus { transform: none; }

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

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  margin: 0;
  color: var(--gold);
  font: 500 var(--fs-eyebrow)/1.3 var(--font-sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 2.2em;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}
.eyebrow--center::after {
  content: "";
  width: 2.2em;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
}
/* On small phones the longer centered eyebrows wrap, so they drop the side rules and break evenly. */
@media (max-width: 29.9375em) {
  .eyebrow--center { text-wrap: balance; }
  .eyebrow--center::before,
  .eyebrow--center::after { display: none; }
}

.display { font-size: var(--fs-display); line-height: 0.98; letter-spacing: 0.01em; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }

.lede {
  max-width: 38em;
  color: var(--cream-2);
  font-size: var(--fs-lede);
  line-height: 1.6;
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.text-gold { color: var(--gold-hi); }
.glow-text { color: var(--gold-hi); text-shadow: 0 0 28px rgba(255, 198, 107, 0.45); }
.muted { color: var(--cream-3); }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--container-narrow)); }

.section { position: relative; padding-block: var(--section); }
.section--flush-top { padding-top: 0; }
/* A soft pool of midnight blue that fades out before the section's edges, so bands never seam. */
.section--night {
  background:
    radial-gradient(90% 60% at 50% 38%, rgba(17, 29, 51, 0.72) 0%, rgba(5, 6, 8, 0) 72%),
    var(--ink);
}

.section-head {
  display: grid;
  gap: 1.1rem;
  max-width: 50rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.25rem);
}
.section-head h2 { font-size: var(--fs-h2); }
.section-head--center { justify-items: center; margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }
/* The eyebrow and heading wrapper keeps its spacing at every width, not only side by side. */
.section-head--split > div { display: grid; gap: 1.1rem; }
@media (min-width: 60em) {
  .section-head--split {
    grid-template-columns: 1.1fr 1fr;
    align-items: end;
    gap: 2rem 4rem;
    max-width: none;
  }
}


/* ---------- Buttons and links ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 54px;
  padding: 0 1.7em;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font: 500 0.8rem/1 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), background-color 0.3s, border-color 0.3s, color 0.3s;
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn .icon { width: 1.15em; height: 1.15em; }

/* Primary: a warm, lit-bulb gold with a glint that sweeps across on hover. */
.btn--glow {
  color: #1b1306;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 58%, var(--gold-deep) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 220, 0.7),
    inset 0 0 0 1px rgba(255, 220, 160, 0.35),
    0 12px 36px -14px rgba(255, 186, 84, 0.75);
}
.btn--glow::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.6) 46%, transparent 60%);
  transform: translateX(-130%);
  transition: transform 0.9s var(--ease-out);
}
.btn--glow:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 220, 0.8),
    inset 0 0 0 1px rgba(255, 220, 160, 0.45),
    0 18px 46px -12px rgba(255, 186, 84, 0.9),
    0 0 42px 0 rgba(255, 198, 107, 0.32);
}
.btn--glow:hover::before { transform: translateX(130%); }

.btn__bulb {
  width: 0.55em;
  height: 0.55em;
  flex: none;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 0 6px 2px rgba(255, 236, 190, 0.95), 0 0 16px 4px rgba(255, 206, 120, 0.55);
}

.btn--ghost {
  border-color: rgba(246, 239, 227, 0.34);
  background: rgba(5, 6, 8, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--gold); background: rgba(212, 168, 95, 0.1); color: var(--gold-hi); }

.btn--sm { min-height: 44px; padding: 0 1.2em; font-size: 0.72rem; letter-spacing: 0.18em; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.btn-row--center { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  color: var(--gold-hi);
  font: 500 0.78rem/1.3 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.link-arrow .icon { width: 1.2em; height: 1.2em; transition: transform 0.45s var(--ease-out); }
@media (max-width: 23.6875em) { .link-arrow { letter-spacing: 0.16em; } }
/* The text is small, so an invisible margin gives fingers a 44px-tall target without moving anything. */
a.link-arrow { position: relative; }
a.link-arrow::after { content: ""; position: absolute; inset: -14px -6px; }
.link-arrow:hover .icon,
a:hover > .link-arrow .icon { transform: translateX(5px); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s, border-color 0.5s, -webkit-backdrop-filter 0.5s, backdrop-filter 0.5s;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -48px;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(5, 6, 8, 0.72), rgba(5, 6, 8, 0));
  pointer-events: none;
  transition: opacity 0.5s;
}
.site-header.is-solid {
  background: rgba(5, 6, 8, 0.8);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
.site-header.is-solid::before { opacity: 0; }
/* Without scripts nothing turns the header solid on scroll, so it starts solid. */
html:not(.js) .site-header {
  background: rgba(5, 6, 8, 0.8);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
html:not(.js) .site-header::before { opacity: 0; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(100% - 2 * var(--gutter), var(--container-wide));
  margin-inline: auto;
}

/* Logo lockup: roofline mark over the wordmark, like the original logo. */
.brand {
  display: inline-grid;
  justify-items: center;
  gap: 4px;
  color: var(--cream);
  line-height: 1;
  text-decoration: none;
}
.brand__mark { width: 116px; height: auto; overflow: visible; color: var(--cream); }
.brand__name {
  font: 600 1.02rem/1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__sub {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-left: 0.42em;
  color: var(--gold);
  font: 500 0.5rem/1 var(--font-sans);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__sub::before,
.brand__sub::after { content: ""; width: 1.3em; height: 1px; background: currentColor; opacity: 0.85; }

.brand--lg { gap: 8px; }
.brand--lg .brand__mark { width: 228px; }
.brand--lg .brand__name { font-size: 2rem; }
.brand--lg .brand__sub { font-size: 0.74rem; }

.bulb__halo { fill: var(--glow); opacity: 0.38; }
.bulb__core { fill: #ffe9bf; }
.mark__window rect { fill: #e9b866; }

/* The logo's bulbs switch on left to right after the page loads, then twinkle. */
.js .brand .bulb { opacity: 0.16; animation: bulb-on 0.5s var(--ease-out) forwards; animation-delay: calc(var(--i) * 40ms + 350ms); }
.js .brand .mark__window { opacity: 0.25; animation: bulb-on 0.8s var(--ease-out) 1.6s forwards; }
.brand .bulb__halo { animation: twinkle 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.41s); }

@keyframes bulb-on { to { opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: 0.38; } 50% { opacity: 0.16; } }

.nav { display: none; }
@media (min-width: 67.5em) {
  .nav { display: flex; gap: clamp(1.1rem, 2.1vw, 2.4rem); }
}
.nav a {
  position: relative;
  padding: 0.85em 0;
  color: var(--cream);
  font: 500 0.74rem/1 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.86;
  transition: opacity 0.3s, color 0.3s;
}
.nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 0.3em;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-hi), transparent);
  transform: scaleX(0);
  transition: transform 0.5s var(--ease-out);
}
.nav a:hover,
.nav a[aria-current="page"] { color: var(--gold-hi); opacity: 1; }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-phone {
  display: none;
  align-items: center;
  gap: 0.55em;
  color: var(--cream);
  font: 500 0.82rem/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-decoration: none;
}
.header-phone .icon { color: var(--gold); }
.header-phone:hover { color: var(--gold-hi); }
@media (min-width: 86.25em) { .header-phone { display: inline-flex; } }
/* On smaller laptops the number shrinks to a round call button; the number stays as its accessible name. */
@media (min-width: 75em) and (max-width: 86.1875em) {
  .header-phone { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; transition: border-color 0.3s, color 0.3s; }
  .header-phone:hover { border-color: var(--gold); }
  .header-phone__num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.header-cta { display: none; }
@media (min-width: 32.5em) { .header-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(5, 6, 8, 0.35);
  color: var(--cream);
  cursor: pointer;
}
.nav-toggle__lines { position: relative; display: block; width: 18px; height: 10px; }
.nav-toggle__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out);
}
.nav-toggle__lines span:first-child { top: 0; }
.nav-toggle__lines span:last-child { top: calc(100% - 1.5px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__lines span:first-child { top: calc(50% - 0.75px); transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__lines span:last-child { top: calc(50% - 0.75px); transform: rotate(-45deg); }
@media (min-width: 67.5em) { .nav-toggle { display: none; } }
html:not(.js) .nav-toggle { display: none; }

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 2rem;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background:
    radial-gradient(90% 60% at 80% 0%, rgba(17, 29, 51, 0.9), rgba(5, 6, 8, 0) 70%),
    rgba(5, 6, 8, 0.97);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.45s var(--ease-out); }
.menu__links { display: grid; align-content: start; gap: 0.2rem; padding: 0; list-style: none; }
.menu__links a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.55em 0;
  border-bottom: 1px solid var(--line);
  color: var(--cream);
  font: 600 clamp(1.55rem, 6.5vw, 2.4rem)/1.15 var(--font-display);
  letter-spacing: 0.04em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(16px);
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out), color 0.3s;
  transition-delay: calc(var(--i) * 55ms + 80ms);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu__links a[aria-current="page"],
.menu__links a:hover { color: var(--gold-hi); }
.menu__num { color: var(--gold); font: 500 0.7rem/1 var(--font-sans); letter-spacing: 0.2em; }
.menu__foot { display: grid; gap: 0.75rem; }
@media (min-width: 67.5em) { .menu { display: none; } }
body.menu-open { overflow: hidden; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 88vh;
  min-height: min(90svh, 980px);
  padding: calc(var(--header-h) + 4rem) 0 clamp(3.5rem, 9vh, 6.5rem);
  overflow: hidden;
}
.page-hero--short { min-height: 70vh; min-height: min(72svh, 780px); }
.page-hero__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--night); }
.page-hero__media img {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}
.js .page-hero__media img { animation: lights-on 2.4s var(--ease-out) 0.1s both; }
.js-late .page-hero__media img,
.js-late .brand .bulb,
.js-late .brand .mark__window { animation: none; opacity: 1; }
@keyframes lights-on {
  from { filter: brightness(0.25) saturate(0.55); }
  60% { filter: brightness(1.06) saturate(1.06); }
  to { filter: none; }
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(to top, var(--ink) 0%, rgba(5, 6, 8, 0.82) 20%, rgba(5, 6, 8, 0.3) 52%, rgba(5, 6, 8, 0.58) 100%),
    linear-gradient(to right, rgba(5, 6, 8, 0.6), rgba(5, 6, 8, 0) 60%);
  pointer-events: none;
}
.page-hero .snow { z-index: -1; }
.page-hero__content { position: relative; max-width: 52rem; }
.page-hero__content h1 { margin: 0.4em 0 0.32em; font-size: min(var(--fs-h1), 5.25rem); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45); }
.page-hero__content .lede { color: rgba(246, 239, 227, 0.88); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5); }
.page-hero__content .eyebrow { color: var(--gold-hi); text-shadow: 0 0 2px rgba(5, 6, 8, 0.9), 0 1px 12px rgba(5, 6, 8, 0.85); }
/* Some heroes put the eyebrow inside the h1 (service and area words), spaced as if it sat above it. */
.page-hero__content h1:has(> .eyebrow) { margin-top: 0; }
.page-hero__content h1 > .eyebrow { display: flex; width: fit-content; margin-bottom: calc(min(var(--fs-h1), 5.25rem) * 0.4); }
.page-hero__content .btn-row { margin-top: 2.2rem; }

.snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Home film: scrolling plays the lights-on film ---------- */
.film { position: relative; background: var(--ink); }
.film__sticky {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}
/* Scroll mode applies from first paint whenever JS is on, motion is allowed and the screen is tall
   enough for the chapters (a phone held sideways gets the still hero instead). */
@media (prefers-reduced-motion: no-preference) and (min-height: 35em) {
  .js .film { height: 460vh; }
  .js .film__sticky { position: sticky; top: 0; }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 35em) and (max-width: 47.9375em) {
  .js .film { height: 400vh; }
}

.film__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  transform: scale(var(--zoom, 1));
  transform-origin: 50% 60%;
  will-change: transform;
}
.film__media img,
.film__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.film__video { opacity: 0; transition: opacity 0.35s linear; }
@media (prefers-reduced-motion: no-preference) and (min-height: 35em) {
  .js .film.is-ready .film__video { opacity: 1; }
  .js .film.is-ready .film__poster { opacity: 0; transition: opacity 0.35s linear 0.1s; }
}

/* Without JavaScript or with reduced motion, the hero is the finished, lit home.
   In scroll mode it starts dark, and the lit frame fades in with scrolling until the film loads. */
.film__lit { opacity: 1; }
@media (prefers-reduced-motion: no-preference) and (min-height: 35em) {
  .js .film__lit { opacity: clamp(0, calc(var(--p, 0) * 1.35 - 0.2), 1); }
  .js .film.is-ready .film__lit { opacity: 0; }
}
/* film.js never started (blocked or failed): the head failsafe adds .is-static, and the hero falls
   back to the lit still, as with reduced motion (the stacked layout is further down). */
.js .film.is-static { height: auto; }
.js .film.is-static .film__sticky { position: relative; }
.js .film.is-static .film__lit { opacity: 1; }

.film .snow { z-index: -2; }
.film__scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.film__scrim--base {
  /* Ends in solid ink so the static frame (reduced motion) meets the next section without a seam. */
  background: linear-gradient(to bottom, rgba(5, 6, 8, 0.6) 0%, rgba(5, 6, 8, 0) 24%, rgba(5, 6, 8, 0) 68%, rgba(5, 6, 8, 0.82) 92%, rgb(5, 6, 8) 100%);
}
.film__scrim--center { background: radial-gradient(64% 58% at 50% 52%, rgba(5, 6, 8, 0.62), rgba(5, 6, 8, 0) 72%); opacity: var(--s-center, 1); }
.film__scrim--left { background: linear-gradient(to right, rgba(5, 6, 8, 0.86) 0%, rgba(5, 6, 8, 0.45) 30%, rgba(5, 6, 8, 0) 58%); opacity: var(--s-left, 0); }
.film__scrim--right { background: linear-gradient(to left, rgba(5, 6, 8, 0.86) 0%, rgba(5, 6, 8, 0.45) 30%, rgba(5, 6, 8, 0) 58%); opacity: var(--s-right, 0); }
.film__scrim--bottom { background: linear-gradient(to top, rgba(5, 6, 8, 0.95) 0%, rgba(5, 6, 8, 0.84) 24%, rgba(5, 6, 8, 0.6) 40%, rgba(5, 6, 8, 0) 62%); opacity: var(--s-bottom, 0); }
/* Below laptop widths the house fills the frame, so side chapters sit at the bottom instead. */
@media (max-width: 68.6875em) {
  .film__scrim--left,
  .film__scrim--right { background: linear-gradient(to top, rgba(5, 6, 8, 0.94) 0%, rgba(5, 6, 8, 0.6) 34%, rgba(5, 6, 8, 0) 62%); }
}
/* On phones the finale block is taller (stacked buttons), so the dark band reaches higher. */
@media (max-width: 47.9375em) {
  .film__scrim--bottom { background: linear-gradient(to top, rgba(5, 6, 8, 0.95) 0%, rgba(5, 6, 8, 0.82) 40%, rgba(5, 6, 8, 0.45) 58%, rgba(5, 6, 8, 0) 74%); }
}

.film__chapters { position: absolute; inset: 0; pointer-events: none; }
.chapter { position: absolute; pointer-events: auto; }
.chapter:not(.chapter--intro) { display: none; }
/* film.js adds .is-live and then drives each chapter's opacity inline. */
@media (prefers-reduced-motion: no-preference) and (min-height: 35em) {
  .js .chapter:not(.chapter--intro) { display: block; }
  .js .film .chapter { opacity: 0; pointer-events: none; }
  .js .film:not(.is-live) .chapter--intro { opacity: 1; pointer-events: auto; }
  .js .film .chapter.is-active { pointer-events: auto; }
}

.chapter--intro {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 1rem) var(--gutter) 7rem;
  text-align: center;
}
.chapter--intro .display { margin: 0 0 0.34em; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55); }
/* The eyebrow sits inside the h1 so the heading names the service and the area. */
.chapter--intro .display > .eyebrow { display: flex; justify-content: center; color: var(--gold-hi); text-shadow: 0 0 2px rgba(5, 6, 8, 0.9), 0 1px 12px rgba(5, 6, 8, 0.85); }
.chapter--intro .display__line { display: block; max-width: 11ch; margin: 0.32em auto 0; }
.chapter--intro .lede { max-width: 34rem; margin-inline: auto; color: rgba(246, 239, 227, 0.9); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6); }
.chapter--intro .btn-row { justify-content: center; margin-top: 2.2rem; }

.chapter--side { top: 50%; max-width: 31rem; translate: 0 -50%; }
.chapter--left { left: var(--gutter); }
.chapter--right { right: var(--gutter); }
/* The tree grows with viewport height, so on shorter-wide laptops the right column narrows to stay clear of it. */
.chapter--right { max-width: min(31rem, calc(50vw - var(--gutter) - 20vh)); }
.chapter--finale {
  bottom: clamp(3rem, 9vh, 6rem);
  left: 50%;
  width: min(100% - 2 * var(--gutter), 46rem);
  translate: -50% 0;
  text-align: center;
}
.chapter--finale .btn-row { justify-content: center; margin-top: 1.8rem; }
@media (max-width: 68.6875em) {
  .chapter--side {
    top: auto;
    right: var(--gutter);
    bottom: clamp(2.5rem, 8vh, 4.5rem);
    left: var(--gutter);
    max-width: 40rem;
    translate: none;
  }
}
@media (max-width: 47.9375em) {
  .chapter--side { max-width: none; }
  .chapter--finale { bottom: clamp(2.5rem, 8vh, 4.5rem); }
}

.chapter__num {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin: 0;
  color: var(--gold);
  font: 500 0.76rem/1 var(--font-sans);
  letter-spacing: 0.34em;
  text-shadow: 0 0 6px rgba(5, 6, 8, 0.9), 0 1px 16px rgba(5, 6, 8, 0.7);
}
.chapter__num::after { content: ""; width: 3rem; height: 1px; background: currentColor; opacity: 0.6; }
.chapter--finale .chapter__num { justify-content: center; }
.chapter--finale .chapter__num::before { content: ""; width: 3rem; height: 1px; background: currentColor; opacity: 0.6; }
.chapter h2 {
  margin: 0.55rem 0 0.8rem;
  font-size: clamp(1.85rem, 1.25rem + 2.4vw, 3.4rem);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.55);
}
.chapter p:not(.chapter__num):not(.eyebrow) {
  color: rgba(246, 239, 227, 0.9);
  font-size: var(--fs-lede);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.65);
}

/* Without the scrolling film, the hero is the lit still with the intro, and chapters 01 to 03 follow it
   as ordinary text. Three triggers share these rules: no JavaScript, .is-static (film.js did not start),
   and the media query (reduced motion, or a screen too short for the film). The !important chapter
   overrides beat inline styles film.js may already have set, for example when a phone is turned sideways. */
html:not(.js) .film__sticky, .film.is-static .film__sticky { height: auto; min-height: 0; overflow: visible; }
html:not(.js) .film__media, html:not(.js) .film__scrim, html:not(.js) .film .snow, .film.is-static .film__media, .film.is-static .film__scrim, .film.is-static .snow { bottom: auto; height: 100vh; height: 100svh; min-height: 560px; }
html:not(.js) .film__media, .film.is-static .film__media { transform: none; }
html:not(.js) .film__scrim--center, .film.is-static .film__scrim--center { background: radial-gradient(85% 42% at 50% 40%, rgba(5, 6, 8, 0.78), rgba(5, 6, 8, 0.35) 70%, rgba(5, 6, 8, 0) 100%); opacity: 1; }
html:not(.js) .film__scrim--left, html:not(.js) .film__scrim--right, html:not(.js) .film__scrim--bottom, .film.is-static .film__scrim--left, .film.is-static .film__scrim--right, .film.is-static .film__scrim--bottom { opacity: 0; }
html:not(.js) .film__chapters, .film.is-static .film__chapters { position: static; }
html:not(.js) .film .chapter, .film.is-static .chapter { opacity: 1 !important; transform: none !important; pointer-events: auto; }
html:not(.js) .chapter--intro, .film.is-static .chapter--intro { position: relative; min-height: 100vh; min-height: max(560px, 100svh); }
html:not(.js) .film .chapter:not(.chapter--intro), .film.is-static .chapter:not(.chapter--intro) { display: block; position: static; width: auto; max-width: 46rem; margin: 0 auto; padding: 2.5rem var(--gutter) 0; translate: none; text-align: center; }
html:not(.js) .film .chapter--finale, .film.is-static .chapter--finale { padding-bottom: clamp(4rem, 8vw, 6rem); }
html:not(.js) .film .chapter__num, .film.is-static .chapter__num { justify-content: center; }
html:not(.js) .film .chapter--side .chapter__num::before, .film.is-static .chapter--side .chapter__num::before { content: ""; width: 3rem; height: 1px; background: currentColor; opacity: 0.6; }
html:not(.js) .film__rail, html:not(.js) .film__cue, .film.is-static .film__rail, .film.is-static .film__cue { display: none; }
@media (prefers-reduced-motion: reduce), (max-height: 34.9375em) {
  .film__sticky { height: auto; min-height: 0; overflow: visible; }
  .film__media, .film__scrim, .film .snow { bottom: auto; height: 100vh; height: 100svh; min-height: 560px; }
  .film__media { transform: none; }
  .film__scrim--center { background: radial-gradient(85% 42% at 50% 40%, rgba(5, 6, 8, 0.78), rgba(5, 6, 8, 0.35) 70%, rgba(5, 6, 8, 0) 100%); opacity: 1; }
  .film__scrim--left, .film__scrim--right, .film__scrim--bottom { opacity: 0; }
  .film__chapters { position: static; }
  .film .chapter { opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .chapter--intro { position: relative; min-height: 100vh; min-height: max(560px, 100svh); }
  .film .chapter:not(.chapter--intro) { display: block; position: static; width: auto; max-width: 46rem; margin: 0 auto; padding: 2.5rem var(--gutter) 0; translate: none; text-align: center; }
  .film .chapter--finale { padding-bottom: clamp(4rem, 8vw, 6rem); }
  .film .chapter__num { justify-content: center; }
  .film .chapter--side .chapter__num::before { content: ""; width: 3rem; height: 1px; background: currentColor; opacity: 0.6; }
  .film__rail, .film__cue { display: none; }
}

.film__cue {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: var(--cream-2);
  font: 500 0.68rem/1 var(--font-sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  translate: -50% 0;
  pointer-events: none;
}
.film__cue::after {
  content: "";
  width: 1px;
  height: 38px;
  background: linear-gradient(to bottom, var(--gold-hi), rgba(242, 212, 155, 0));
  animation: cue 2.2s var(--ease-in-out) infinite;
  transform-origin: top;
}
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
html:not(.js) .film__cue { display: none; }
@media (prefers-reduced-motion: reduce), (max-height: 34.9375em) { .film__cue { display: none; } }

/* A vertical string of bulbs that lights up as the film plays. */
.film__rail {
  position: absolute;
  top: 50%;
  right: clamp(0.9rem, 2vw, 1.8rem);
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 6px 0;
  translate: 0 -50%;
}
.film__rail::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  background: rgba(246, 239, 227, 0.2);
}
.film__rail i {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(246, 239, 227, 0.28);
  transition: background 0.4s, box-shadow 0.4s;
}
.film__rail i.is-lit { background: #fff1d2; box-shadow: 0 0 8px 2px rgba(255, 214, 140, 0.9), 0 0 18px 4px rgba(255, 190, 90, 0.45); }
@media (min-width: 56.25em) and (prefers-reduced-motion: no-preference) and (min-height: 35em) { .js .film__rail { display: flex; } }

/* ---------- Services ---------- */
.services { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 56.25em) { .services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.service-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.75rem;
  min-height: clamp(380px, 62vw, 560px);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--cream);
  text-decoration: none;
}
@media (min-width: 56.25em) { .service-card { min-height: 620px; } }
.service-card__media { position: absolute; inset: 0; z-index: -2; background: var(--night); }
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72) saturate(0.92);
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out), filter 0.9s var(--ease-out);
}
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(5, 6, 8, 0.95) 0%, rgba(5, 6, 8, 0.55) 38%, rgba(5, 6, 8, 0.05) 70%);
}
/* The cards wrap their photo in <picture> for the cropped files; this keeps the img sized to the card. */
.service-card__media picture,
.page-hero__media picture { display: contents; }
.service-card:hover .service-card__media img { filter: brightness(0.9) saturate(1.05); transform: scale(1.07); }
.service-card__num { color: var(--gold); font: 500 0.76rem/1 var(--font-sans); letter-spacing: 0.32em; text-shadow: 0 0 6px rgba(5, 6, 8, 0.9), 0 1px 16px rgba(5, 6, 8, 0.7); }
.service-card__title { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem); }
/* Three narrow cards side by side: keep "Commercial" and "Residential" inside the card. */
@media (min-width: 56.25em) { .service-card__title { font-size: min(clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem), 3.2vw); } }
.service-card p { max-width: 24rem; color: var(--cream-2); }
.service-card .link-arrow { margin-top: 0.4rem; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 1.1rem; padding: 0; list-style: none; }
@media (min-width: 45em) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68.75em) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; } }
.step {
  position: relative;
  padding: 2rem 1.6rem 1.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17, 29, 51, 0.6), rgba(5, 6, 8, 0.25));
}
.step .icon { width: 42px; height: 42px; margin-bottom: 1.3rem; color: var(--gold); stroke-width: 1.25; }
.step__num { display: block; color: var(--gold); font: 500 0.7rem/1 var(--font-sans); letter-spacing: 0.3em; text-transform: uppercase; }
.step h3 { margin: 0.75rem 0 0.6rem; font-size: 1.18rem; letter-spacing: 0.05em; }
.step p { margin: 0; font-size: 0.98rem; }

/* ---------- Feature grid ---------- */
.features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}
@media (min-width: 37.5em) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62.5em) {
  .features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.feature { padding: clamp(1.5rem, 2.6vw, 2.1rem); background: var(--ink); transition: background-color 0.4s; }
.feature:hover { background: #0a111d; }
.feature .icon { width: 36px; height: 36px; margin-bottom: 1.15rem; color: var(--gold); stroke-width: 1.3; }
.feature h3 { margin-bottom: 0.5rem; font-size: 1.02rem; line-height: 1.3; letter-spacing: 0.07em; }
.feature p { margin: 0; color: var(--cream-3); font-size: 0.96rem; }

/* ---------- Split (image + text) ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
@media (min-width: 60em) {
  .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .split--reverse .split__media { order: 2; }
}
.split__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--night);
}
.split__media--tall { aspect-ratio: 4 / 5; }
/* In the one-column tablet layout a 4:5 photo would fill the whole screen. */
@media (min-width: 37.5em) and (max-width: 59.9375em) { .split__media--tall { aspect-ratio: 4 / 3; } }
.split__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.split__body { display: grid; gap: 1.15rem; justify-items: start; }
.split__body > .areas,
.split__body > .check-list { justify-self: stretch; }
.split__body h2 { font-size: var(--fs-h2); }
/* Several paragraphs in a row: the grid gap alone spaces them, or they drift apart. */
.split__body--text > p { margin: 0; }

.check-list { display: grid; gap: 0.85rem; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 1.9rem; color: var(--cream-2); text-wrap: pretty; }
.check-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0.2rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #fff3d6;
  box-shadow: 0 0 6px 2px rgba(255, 214, 140, 0.8), 0 0 14px 3px rgba(255, 190, 90, 0.35);
}

/* ---------- Scripture band ---------- */
.verse {
  position: relative;
  isolation: isolate;
  padding-block: var(--section);
  overflow: hidden;
  text-align: center;
}
.verse__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.verse__bg img {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  opacity: 0.38;
  transform: translate3d(0, var(--parallax, 0px), 0);
}
.verse::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 70% at 50% 50%, rgba(5, 6, 8, 0.55), var(--ink) 92%);
}
.verse blockquote { max-width: 58rem; margin: 1.8rem auto 0; }
.verse blockquote p {
  margin: 0;
  color: var(--cream);
  font: italic 500 clamp(1.75rem, 1.15rem + 2.5vw, 3.35rem)/1.22 var(--font-serif);
  text-wrap: balance;
}
.verse cite {
  display: block;
  margin-top: 1.6rem;
  color: var(--gold);
  font: 500 0.78rem/1 var(--font-sans);
  font-style: normal;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}
.verse__note { max-width: 40rem; margin: 2.2rem auto 1.6rem; color: var(--cream-2); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.45rem 0;
  color: var(--cream);
  font: 500 clamp(1.04rem, 1rem + 0.3vw, 1.22rem)/1.4 var(--font-sans);
  list-style: none;
  text-wrap: pretty;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gold-hi); }
.faq__icon {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  margin: -0.75px 0 0 -5.5px;
  background: var(--gold-hi);
  transition: transform 0.4s var(--ease-out);
}
.faq__icon::after { transform: rotate(90deg); }
.faq details[open] .faq__icon::after { transform: rotate(0deg); }
.faq__answer { max-width: 48rem; padding: 0 0 1.6rem; color: var(--cream-2); }
.faq__answer a { color: var(--gold-hi); }

/* ---------- Call-to-action band ---------- */
.cta-band {
  --mx: 50%;
  --my: 0%;
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  background:
    radial-gradient(42rem 26rem at var(--mx) var(--my), rgba(255, 198, 107, 0.17), rgba(255, 198, 107, 0) 70%),
    linear-gradient(180deg, #0d172a 0%, #070a10 100%);
}
.cta-band .lightstring { position: absolute; top: 0; left: 0; right: 0; }
.cta-band h2 { max-width: 18ch; margin: 1.2rem auto 1rem; font-size: var(--fs-h2); }
.cta-band .lede { margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 2.2rem; }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: clamp(0.9rem, 1.6vw, 1.25rem); }
@media (min-width: 47.5em) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery figure { margin: 0; }
.gallery__frame { overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--radius); background: var(--night); }
.gallery__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { margin-top: 0.75rem; color: var(--cream-3); font-size: 0.92rem; text-wrap: pretty; }

/* ---------- Lights off / lights on: drag the line across the same house ---------- */
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.compare-lights {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 1600 / 894;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--night);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  transition: --pos 1.8s var(--ease-in-out) 0.3s;
}
/* It starts dark and the line sweeps across to switch the lights on as it scrolls into view. */
.js .compare-lights[data-reveal] {
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), --pos 2s var(--ease-in-out) 0.5s;
}
.js .compare-lights[data-reveal]:not(.is-in) { --pos: 100%; }
.compare-lights.is-touched,
.js .compare-lights.is-touched { transition: none; }
.compare-lights img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.compare-lights__off { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-lights__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, rgba(255, 230, 176, 0), #ffe6b0 16%, #ffe6b0 84%, rgba(255, 230, 176, 0));
  box-shadow: 0 0 14px 2px rgba(255, 198, 107, 0.6);
  pointer-events: none;
}
.compare-lights__knob {
  position: absolute;
  top: 50%;
  left: var(--pos);
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border: 1px solid rgba(255, 230, 176, 0.7);
  border-radius: 50%;
  background: rgba(5, 6, 8, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--gold-hi);
  box-shadow: 0 0 24px rgba(255, 198, 107, 0.45);
  pointer-events: none;
}
.compare-lights__knob .icon { width: 22px; height: 22px; }
.compare-lights:has(input:focus-visible) .compare-lights__knob { outline: 2px solid var(--gold-hi); outline-offset: 4px; }
.compare-lights__tag {
  position: absolute;
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: rgba(5, 6, 8, 0.62);
  color: var(--cream);
  font: 500 0.68rem/1 var(--font-sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
}
.compare-lights__tag--off { left: clamp(0.75rem, 2vw, 1.25rem); }
.compare-lights__tag--on { right: clamp(0.75rem, 2vw, 1.25rem); }
.compare-lights-caption { margin-top: 0.85rem; color: var(--cream-3); font-size: 0.92rem; text-align: center; }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 620px; border-collapse: collapse; }
.compare th,
.compare td { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare tr:last-child th,
.compare tr:last-child td { border-bottom: 0; }
.compare thead th { background: rgba(17, 29, 51, 0.6); color: var(--gold); font: 500 0.72rem/1.3 var(--font-sans); letter-spacing: 0.24em; text-transform: uppercase; }
.compare tbody th { width: 26%; color: var(--cream); font-weight: 500; }
.compare td { color: var(--cream-2); }
/* Phones fit all three columns instead of hiding the last one off-screen. */
@media (max-width: 39.9375em) {
  .compare { min-width: 0; table-layout: fixed; }
  .compare th,
  .compare td { padding: 0.85rem 0.7rem; font-size: 0.9rem; }
  .compare thead th { font-size: 0.7rem; letter-spacing: 0.12em; }
  .compare tbody th { width: 30%; }
}

/* ---------- Occasion switcher (permanent lighting) ---------- */
.occasions { display: grid; gap: 1.4rem; }
.occasions__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--night);
}
.occasions__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease-in-out);
}
.occasions__stage img.is-active { opacity: 1; }
/* site.js primes the switcher when it nears the screen; until then the hidden looks don't download. */
.js [data-occasions]:not(.is-primed) .occasions__stage img:not(.is-active) { display: none; }
.occasions__picker { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.occasion-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 46px;
  padding: 0 1.15rem 0 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(246, 239, 227, 0.03);
  color: var(--cream);
  font: 500 0.82rem/1 var(--font-sans);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.occasion-chip:hover { border-color: var(--gold); }
.occasion-chip[aria-pressed="true"] {
  border-color: var(--gold);
  background: rgba(212, 168, 95, 0.12);
  box-shadow: 0 0 0 1px var(--gold) inset, 0 8px 26px -12px rgba(255, 190, 90, 0.7);
}
.occasion-chip__dots { display: inline-flex; gap: 3px; }
.occasion-chip__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px 1px var(--c); }
.occasions__caption { min-height: 1.6em; margin: 0; color: var(--cream-3); font-size: 0.95rem; }

/* ---------- Service areas ---------- */
.areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}
/* Just above the split breakpoint the text column is too narrow for two auto-fill columns. */
@media (min-width: 60em) and (max-width: 68.6875em) { .split .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(17, 29, 51, 0.38);
  color: var(--cream);
  font-weight: 500;
}
.area::before {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #fff3d6;
  box-shadow: 0 0 6px 2px rgba(255, 214, 140, 0.85), 0 0 14px 3px rgba(255, 190, 90, 0.35);
}

/* ---------- Pills and notes ---------- */

.card {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17, 29, 51, 0.5), rgba(5, 6, 8, 0.2));
}
.card h3 { margin-bottom: 0.6rem; font-size: var(--fs-h3); }
.card .btn-row { margin-top: 1.5rem; }
/* Text cards in a row share a height, so their links line up along the bottom. */
.services > .card { display: flex; flex-direction: column; align-items: flex-start; }
.services > .card .link-arrow { margin-top: auto; }

/* Service Area map. A button stands in for it until the visitor asks to load Google Maps. */
.map-embed {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--night);
}
/* A square on phones and a wide strip on big screens keep Dalton and Atlanta both in the frame. */
@media (max-width: 37.4375em) { .map-embed { aspect-ratio: 1 / 1; } }
@media (min-width: 75em) { .map-embed { aspect-ratio: 21 / 9; } }
/* Until the map loads, the frame fits the prompt, so large text never clips the button. */
.map-embed:has(> .map-embed__cover) { display: grid; aspect-ratio: auto; min-height: min(22rem, 100vw - 2.5rem); }
.map-embed:has(> iframe):focus-within { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
/* The button needs site.js, so the prompt stays hidden without it. */
html:not(.js) .map-embed { display: none; }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; filter: invert(0.92) hue-rotate(180deg) saturate(0.6) brightness(0.9); }
.map-embed__cover {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.7rem;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  background:
    radial-gradient(60% 70% at 50% 45%, rgba(212, 168, 95, 0.14), rgba(11, 20, 36, 0) 70%),
    radial-gradient(rgba(242, 212, 155, 0.16) 1px, transparent 1.6px) 0 0 / 22px 22px;
}
.map-embed__cover .icon { width: 34px; height: 34px; color: var(--gold); stroke-width: 1.3; }
.map-embed__cover h3 { margin: 0; font-size: var(--fs-h3); }
.map-embed__cover p { max-width: 26rem; margin: 0 0 0.5rem; color: var(--cream-3); font-size: 0.95rem; }

/* ---------- About: the owners ---------- */
.owners { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
@media (min-width: 48em) { .owners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.owner { display: flex; flex-direction: column; align-items: flex-start; }
.owner__mono {
  display: grid;
  place-items: center;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 0 1.4rem;
  border: 1px solid rgba(212, 168, 95, 0.55);
  border-radius: 50%;
  color: var(--gold-hi);
  font: italic 500 1.55rem/1 var(--font-serif);
  letter-spacing: 0.06em;
  box-shadow: 0 0 22px rgba(255, 198, 107, 0.16), inset 0 0 18px rgba(255, 198, 107, 0.1);
}
.owner h3 { margin-bottom: 0.2rem; }
.owner__role { margin: 0 0 1.1rem; color: var(--gold); font: 500 0.74rem/1.3 var(--font-sans); letter-spacing: 0.24em; text-transform: uppercase; }
.owner p:not([class]) { color: var(--cream-2); }
/* Text flow, not flex: the label may wrap, but the number and its arrow stay together on one line. */
.owner .link-arrow { display: block; margin-top: auto; padding-top: 0.75rem; }
.owner .link-arrow .icon { display: inline-block; margin-left: 0.75em; vertical-align: -0.3em; }

/* ---------- Long-form text ---------- */
.prose { max-width: 46rem; }
.prose h2 { margin: 2.4em 0 0.7em; font-size: 1.45rem; letter-spacing: 0.04em; }
.prose h2:first-child { margin-top: 0; }
.prose p,
.prose li { color: var(--cream-2); }
.prose ul { display: grid; gap: 0.5rem; margin: 0 0 1.2em; padding-left: 1.2rem; }
.prose a { color: var(--gold-hi); }

/* ---------- Decorative string lights ---------- */
.lightstring { width: 100%; height: 72px; pointer-events: none; }
.lightstring svg { width: 100%; height: 100%; overflow: visible; }
.ls-wire { fill: none; stroke: rgba(246, 239, 227, 0.22); stroke-width: 1.3; }
.ls-socket { fill: #22301f; }
.ls-glass { fill: rgba(246, 239, 227, 0.14); transition: fill 0.5s ease var(--d, 0s); }
.ls-halo { opacity: 0; transition: opacity 0.8s ease var(--d, 0s); }
.lightstring.is-lit .ls-glass { fill: #ffe6b0; }
.lightstring.is-lit .ls-halo { opacity: 0.85; }
.site-footer > .lightstring { position: absolute; top: 0; right: 0; left: 0; }

/* ---------- Quote page ---------- */
.quote-layout { display: grid; min-height: 100vh; }
@media (min-width: 64em) { .quote-layout { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }

.quote-aside {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 62vh;
  padding: calc(var(--header-h) + 3rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
  overflow: hidden;
}
@media (min-width: 64em) {
  .quote-aside { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 640px; }
}
.quote-aside__media { position: absolute; inset: 0; z-index: -3; background: var(--night); }
.quote-aside__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.quote-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to top, rgba(5, 6, 8, 0.96) 0%, rgba(5, 6, 8, 0.8) 45%, rgba(5, 6, 8, 0.62) 62%, rgba(5, 6, 8, 0.2) 84%, rgba(5, 6, 8, 0.45) 100%);
}
/* Stacked above the form, the photo is short, so the text reaches up into the lit porch. */
@media (max-width: 63.9375em) {
  .quote-aside::after { background: linear-gradient(to top, rgba(5, 6, 8, 0.96) 0%, rgba(5, 6, 8, 0.8) 40%, rgba(5, 6, 8, 0.66) 72%, rgba(5, 6, 8, 0.72) 100%); }
}
.quote-aside .snow { z-index: -1; }
.quote-aside .eyebrow { text-shadow: 0 0 8px rgba(5, 6, 8, 0.9), 0 1px 18px rgba(5, 6, 8, 0.7); }
.quote-aside h1 { margin: 0.45em 0 0.35em; font-size: clamp(2.3rem, 1.5rem + 3vw, 4.2rem); text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45); }
.quote-aside .lede { color: rgba(246, 239, 227, 0.88); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5); }

.next-steps { display: grid; gap: 0.8rem; margin: 1.8rem 0 0; padding: 0; list-style: none; counter-reset: next; }
.next-steps li { display: flex; align-items: baseline; gap: 0.9rem; color: var(--cream-2); counter-increment: next; text-wrap: pretty; }
.next-steps li::before {
  content: counter(next);
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid rgba(212, 168, 95, 0.6);
  border-radius: 50%;
  color: var(--gold-hi);
  font: 500 0.8rem/1 var(--font-sans);
}
.quote-aside__call { margin-top: 1.8rem; color: var(--cream-3); }
.quote-aside__call a { color: var(--gold-hi); font-weight: 500; text-decoration: none; }

.quote-main { padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) clamp(4rem, 8vw, 6rem); }
@media (min-width: 64em) { .quote-main { padding-top: calc(var(--header-h) + 3.5rem); } }
.quote-card { width: 100%; max-width: 42rem; margin-inline: auto; }

.form-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 2.4rem; padding: 0; list-style: none; }
.form-progress li { display: grid; gap: 0.7rem; color: var(--cream-3); font: 500 0.68rem/1.2 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; }
.form-progress li::before { content: ""; height: 3px; border-radius: 3px; background: rgba(246, 239, 227, 0.12); transition: background 0.5s, box-shadow 0.5s; }
.form-progress li.is-current,
.form-progress li.is-done { color: var(--cream); }
.form-progress li.is-current::before,
.form-progress li.is-done::before { background: linear-gradient(90deg, var(--gold-deep), var(--gold-hi)); box-shadow: 0 0 12px rgba(255, 198, 107, 0.55); }
/* Keyed on the class quote.js sets itself, so the form works even if site.js is late and the
   head failsafe has removed .js. */
.quote-card:not(.is-enhanced) .form-progress { display: none; }

.form-step { min-width: 0; margin: 0 0 2.5rem; padding: 0; border: 0; }
.quote-form.is-enhanced .form-step { display: none; margin-bottom: 0; }
.quote-form.is-enhanced .form-step.is-active { display: block; animation: step-in 0.6s var(--ease-out); }
@keyframes step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.form-step legend { margin-bottom: 0.45rem; padding: 0; color: var(--cream); font: 600 var(--fs-h3)/1.2 var(--font-display); letter-spacing: 0.03em; }
.form-step legend:focus { outline: none; }
.form-step__hint { margin-bottom: 1.9rem; color: var(--cream-3); }
.field__hint { margin: 0; color: var(--cream-3); font-size: 0.85rem; }

.field { display: grid; gap: 0.55rem; margin-bottom: 1.35rem; }
.field-label,
.field label:not(.choice):not(.chip):not(.consent) {
  color: var(--cream);
  font: 500 0.74rem/1.3 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.field-label .optional,
.field label .optional { color: var(--cream-3); font-size: 0.82rem; letter-spacing: 0.04em; text-transform: none; }
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 38.75em) { .field-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.input,
.quote-form select,
.quote-form textarea {
  width: 100%;
  min-height: 56px;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(246, 239, 227, 0.42);
  border-radius: 12px;
  background: rgba(246, 239, 227, 0.04);
  color: var(--cream);
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}
.quote-form textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.quote-form select {
  padding-right: 2.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4A85F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-repeat: no-repeat;
  background-size: 1.1rem;
  appearance: none;
}
.quote-form select option { background: var(--night); color: var(--cream); }
.input::placeholder,
.quote-form textarea::placeholder { color: var(--cream-3); }
.input:hover,
.quote-form select:hover,
.quote-form textarea:hover { border-color: rgba(246, 239, 227, 0.6); }
.input:focus,
.quote-form select:focus,
.quote-form textarea:focus {
  border-color: var(--gold);
  background-color: rgba(246, 239, 227, 0.06);
  box-shadow: 0 0 0 4px rgba(212, 168, 95, 0.2);
  outline: none;
}
[aria-invalid="true"] { border-color: var(--danger) !important; }
/* quote.js marks the whole group of cards, so the cards themselves show the error. */
.choices[aria-invalid="true"] .choice__box { border-color: var(--danger); }
.field__error { margin: 0; color: var(--danger); font-size: 0.9rem; }
.field__error:empty { display: none; }

/* Card-style radio and checkbox choices */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: 0.7rem; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice__box {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  padding: 1.05rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(246, 239, 227, 0.03);
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.choice__box .icon { width: 28px; height: 28px; margin-bottom: 0.35rem; color: var(--gold); stroke-width: 1.35; }
.choice__title { color: var(--cream); font-weight: 500; line-height: 1.3; }
.choice__desc { color: var(--cream-3); font-size: 0.86rem; line-height: 1.45; text-wrap: balance; }
.choice:hover .choice__box { border-color: rgba(212, 168, 95, 0.7); }
.choice input:checked + .choice__box {
  border-color: var(--gold);
  background: rgba(212, 168, 95, 0.1);
  box-shadow: inset 0 0 0 1px var(--gold), 0 10px 28px -16px rgba(255, 190, 90, 0.7);
}
.choice input:focus-visible + .choice__box { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
/* On phones the cards stack as compact rows, icon beside the text, so no card sits alone. */
@media (max-width: 34.9375em) {
  .choices { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .choice__box {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.15rem 0.95rem;
    padding: 0.9rem 1rem;
  }
  .choice__box .icon { grid-row: span 2; margin-bottom: 0; }
}

.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip { position: relative; display: inline-block; cursor: pointer; }
.chip input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 1.05rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--cream);
  font-size: 0.94rem;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
}
.chip span::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(246, 239, 227, 0.25);
  transition: background 0.3s, box-shadow 0.3s;
}
.chip:hover span { border-color: rgba(212, 168, 95, 0.7); }
.chip input:checked + span { border-color: var(--gold); background: rgba(212, 168, 95, 0.12); }
.chip input:checked + span::before { background: #fff3d6; box-shadow: 0 0 6px 2px rgba(255, 214, 140, 0.9); }
.chip input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.consent { display: flex; align-items: flex-start; gap: 0.85rem; color: var(--cream-2); font-size: 0.92rem; line-height: 1.55; cursor: pointer; }
.consent input { flex: none; width: 1.3rem; height: 1.3rem; margin: 0.12rem 0 0; accent-color: var(--gold); cursor: pointer; }

.form-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.form-nav__right { display: flex; gap: 0.75rem; margin-left: auto; }
.btn--back { min-height: 50px; padding: 0 1.2em; border-color: var(--line-strong); }
/* On phones Back stays compact on the left and the main button fills the rest of the row. When the
   two don't fit side by side (the long submit label on narrow phones), the main button takes the full
   width on top and Back sits under it. */
@media (max-width: 34.9375em) {
  .form-nav { flex-wrap: wrap-reverse; gap: 0.75rem 0.6rem; }
  .form-nav__right { flex: 1 1 auto; min-width: 0; margin-left: 0; }
  .form-nav__right .btn { flex: 1 1 auto; min-width: 0; padding-inline: 1em; white-space: normal; text-wrap: balance; letter-spacing: 0.14em; }
  .form-nav .btn--back { flex: none; padding: 0 1.1em; letter-spacing: 0.14em; }
}
.btn--back:hover { border-color: var(--gold); color: var(--gold-hi); }
.quote-form:not(.is-enhanced) .form-nav [data-back],
.quote-form:not(.is-enhanced) .form-nav [data-next] { display: none; }
.form-status { margin: 1.2rem 0 0; padding: 1rem 1.2rem; border: 1px solid rgba(255, 154, 138, 0.45); border-radius: 12px; background: rgba(255, 154, 138, 0.08); color: var(--cream); }
.form-status a { color: var(--gold-hi); }
.form-fineprint { margin-top: 1.4rem; color: var(--cream-3); font-size: 0.85rem; }
.form-fineprint a { color: var(--cream-2); }

.form-success { display: grid; justify-items: center; gap: 1.1rem; padding: 2rem 0; text-align: center; }
.form-success:focus { outline: none; }
.form-success__bulb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 0 12px 4px rgba(255, 230, 170, 0.95), 0 0 40px 12px rgba(255, 190, 90, 0.5);
  animation: bulb-pulse 2.4s ease-in-out infinite;
}
@keyframes bulb-pulse { 50% { box-shadow: 0 0 16px 6px rgba(255, 230, 170, 1), 0 0 60px 18px rgba(255, 190, 90, 0.55); } }
.form-success h2 { font-size: var(--fs-h2); overflow-wrap: anywhere; }
.form-success .lede { margin-inline: auto; }

/* Never rendered, so browsers and password managers leave it alone. Bots reading the HTML still fill it. */
.is-hidden-field { display: none !important; }

/* ---------- Simple centered pages (thank you, 404) ---------- */
.center-page {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 3rem) 0 4rem;
  overflow: hidden;
  text-align: center;
  background: radial-gradient(60rem 36rem at 50% 42%, rgba(17, 29, 51, 0.85), rgba(5, 6, 8, 0) 70%), var(--ink);
}
.center-page .snow { z-index: -1; }
.center-page h1 { margin: 0.5em 0 0.4em; font-size: var(--fs-h1); }
.center-page .lede { margin-inline: auto; }
.center-page .btn-row { justify-content: center; margin-top: 2rem; }
/* Numbered steps stay left-aligned beside their numbers inside centered layouts. */
.center-page .next-steps li,
.form-success .next-steps li { text-align: left; }
/* A centered row of plain links (the 404 page). */
.link-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem 1.2rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0 calc(2rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(17, 29, 51, 0.65), rgba(5, 6, 8, 0) 70%),
    var(--ink);
}
@media (max-width: 56.1875em) { .site-footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); } }
/* The call bar never shows on the quote or thank-you pages, so their footers need no room for it. */
.page-quote .site-footer,
.page-thanks .site-footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.footer-top { display: grid; gap: 3rem; }
/* The contact column gets extra room for two phone numbers and the email address. */
@media (min-width: 45em) { .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 67.5em) { .footer-top { grid-template-columns: 1.4fr minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1.4fr); } .footer-brand { grid-column: auto; } }
.footer-brand { display: grid; justify-items: start; gap: 1.8rem; }
.footer-verse { max-width: 22rem; margin: 0; color: var(--cream-2); font: italic 500 1.2rem/1.45 var(--font-serif); }
.footer-verse span { display: block; margin-top: 0.6rem; color: var(--gold); font: 500 0.7rem/1 var(--font-sans); font-style: normal; letter-spacing: 0.34em; text-transform: uppercase; }
.footer-title { margin-bottom: 1.2rem; color: var(--gold); font: 500 0.72rem/1 var(--font-sans); letter-spacing: 0.3em; text-transform: uppercase; }
.footer-col ul { display: grid; gap: 0; padding: 0; list-style: none; }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream-2); text-decoration: none; transition: color 0.3s; }
.footer-col a:hover { color: var(--gold-hi); }
.footer-contact a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; }
.footer-contact .icon { color: var(--gold); }
.footer-contact__who { margin-left: 0.3rem; color: var(--cream-3); font-size: 0.88em; }
/* Phone numbers stay on one line; a long line wraps before the number instead. */
.nowrap { white-space: nowrap; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  color: var(--cream-3);
  font-size: 0.86rem;
}
.footer-bottom__tag { font-family: var(--font-serif); font-size: 1.05rem; font-style: italic; }

/* ---------- Mobile call / quote bar ---------- */
.mobile-cta {
  position: fixed;
  right: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  left: 0.75rem;
  z-index: 50;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem;
  padding: 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(5, 6, 8, 0.84);
  box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transform: translateY(calc(100% + 2rem));
  transition: transform 0.55s var(--ease-out);
}
.mobile-cta.is-visible,
.js .mobile-cta:focus-within { transform: none; }
/* Without scripts nothing slides the bar in, so it simply stays on screen (phones have no menu then). */
html:not(.js) .mobile-cta { transform: none; }
.mobile-cta .btn { min-height: 50px; }
.mobile-cta__call { width: 50px; padding: 0; }
@media (min-width: 56.25em) { .mobile-cta { display: none; } }
.page-quote .mobile-cta,
.page-thanks .mobile-cta { display: none; }
/* On tablets the bar is a centered pill instead of a full-width banner. */
@media (min-width: 32.5em) {
  .mobile-cta { right: auto; left: 50%; width: min(24rem, 100% - 1.5rem); translate: -50% 0; }
}

/* ---------- Reveal on scroll ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in,
.js [data-reveal]:focus-within,
.js-late [data-reveal] { opacity: 1; transform: none; }
.js [data-reveal]:focus-within { transition: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .snow { display: none; }
  .page-hero__media img,
  .verse__bg img { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}