/* ==================================================================
   Grawlix HVAC Premium Blueprint v1 — structural stylesheet
   Palette tokens are injected from theme.json by build.py.
   ================================================================== */

:root {
  /* -------------------------------------------------- palette (theme.json) */
  --ink: #07141c;
  --ink-2: #0d2029;
  --ink-3: #17313b;
  --cream: #e9dfd2;
  --paper: #f5ede3;
  --accent: #e2683c;
  --accent-light: #f79262;
  --accent-deep: #a8481f;
  --accent-ink: #a34a22;
  --accent-rgb: 226,104,60;
  --cool: #5aa9c4;
  --cool-light: #8fcfe2;
  --cool-rgb: 90,169,196;
  --muted: #68767a;

  /* -------------------------------------------------- hairlines */
  --line: rgba(7, 20, 28, .10);
  --line-strong: rgba(7, 20, 28, .18);
  --white-line: rgba(255, 255, 255, .10);
  --white-line-strong: rgba(255, 255, 255, .20);

  /* -------------------------------------------------- elevation
     Two-layer shadows: a tight contact shadow plus a wide ambient one.
     Single large-blur shadows are what make a page read as "generated". */
  --shadow-xs: 0 1px 2px rgba(7, 20, 28, .05);
  --shadow-sm: 0 1px 2px rgba(7, 20, 28, .05), 0 4px 10px -4px rgba(7, 20, 28, .07);
  --shadow-md: 0 1px 3px rgba(7, 20, 28, .06), 0 10px 24px -12px rgba(7, 20, 28, .14);
  --shadow-lg: 0 2px 6px rgba(7, 20, 28, .07), 0 24px 48px -20px rgba(7, 20, 28, .22);
  --shadow-xl: 0 3px 10px rgba(7, 20, 28, .08), 0 44px 80px -32px rgba(7, 20, 28, .32);

  /* -------------------------------------------------- radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --radius: var(--r-lg);          /* legacy alias */

  /* -------------------------------------------------- fluid space scale */
  --s-1: clamp(.5rem, .4vw + .4rem, .7rem);
  --s-2: clamp(.85rem, .6vw + .65rem, 1.15rem);
  --s-3: clamp(1.25rem, 1vw + .95rem, 1.75rem);
  --s-4: clamp(1.9rem, 1.6vw + 1.4rem, 2.75rem);
  --s-5: clamp(2.75rem, 2.4vw + 2rem, 4rem);
  --s-6: clamp(3.75rem, 3.4vw + 2.7rem, 5.5rem);
  --s-7: clamp(4.75rem, 5vw + 3.2rem, 7.5rem);

  /* -------------------------------------------------- type scale */
  --t-display: clamp(2.9rem, 5.4vw, 5.05rem);
  --t-h2: clamp(2.05rem, 3.3vw, 3.35rem);
  --t-h3: clamp(1.3rem, 1.2vw + .95rem, 1.7rem);
  --t-lead: clamp(1.02rem, .35vw + .92rem, 1.18rem);
  --t-body: 1rem;
  --t-sm: .875rem;
  --t-xs: .78rem;
  --t-eyebrow: .7rem;

  /* -------------------------------------------------- motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.32, .72, 0, 1);

  /* -------------------------------------------------- layout */
  --container: 1180px;
  --header-h: 84px;

  /* -------------------------------------------------- inline assets
     A film grain and a stroked check, both inlined so the blueprint stays
     dependency-free. The grain is what keeps large flat gradients from
     looking like flat gradients. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ================================================================== base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--cream);
  background-image: var(--grain);
  background-size: 180px 180px;
  background-blend-mode: soft-light;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

/* The header is fixed and transparent over the hero, so main is NOT offset —
   .hero carries its own top padding. thank-you.html and 404.html have no
   header at all, which is why this is scoped to a main following one. */
.site-header + main { padding-top: 0; }

/* Fixed header would otherwise cover the target of every in-page anchor. */
section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
::selection { background: rgba(var(--accent-rgb), .22); color: var(--ink); }

.container { width: min(var(--container), calc(100% - 44px)); margin-inline: auto; }
.section { padding: var(--s-7) 0; }

.sr-only { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(1px,1px,1px,1px)!important; white-space:nowrap!important; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 999; padding: 12px 18px; border-radius: var(--r-xs); background: var(--accent); color: #fff; font-weight: 600; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; border-radius: 3px; }

/* ================================================================== type */
.hero h1,
.section h2,
.contact h2,
.financing h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.028em;
  text-wrap: balance;
  margin: 0;
}
.section h2, .contact h2 { font-size: var(--t-h2); }
.hero h1 { font-size: var(--t-display); line-height: .99; letter-spacing: -.035em; max-width: 15ch; }
.hero h1 em { color: var(--accent-light); font-style: normal; }

p { text-wrap: pretty; }

.eyebrow {
  display: flex; align-items: center; gap: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  color: var(--accent-light);
  margin-bottom: var(--s-3);
}
.eyebrow span { width: 30px; height: 1px; background: currentColor; opacity: .55; }
.eyebrow.dark { color: var(--accent-ink); }
.eyebrow.light { color: var(--accent-light); }

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ================================================================== buttons
   Solid fills, a 1px top highlight, and a real press state. Gradient fills
   with coloured glow shadows are the single loudest "template" signal. */
.button {
  display: inline-flex; justify-content: center; align-items: center; gap: 9px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; letter-spacing: .005em;
  text-align: center; cursor: pointer;
  transition: background-color .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}
.button-accent {
  background: var(--accent); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 1px 2px rgba(var(--accent-rgb), .28), 0 10px 22px -12px rgba(var(--accent-rgb), .70);
}
.button-accent:hover {
  background: var(--accent-deep); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 1px 2px rgba(var(--accent-rgb), .30), 0 16px 30px -14px rgba(var(--accent-rgb), .80);
}
.button-ghost { border-color: var(--white-line-strong); color: #fff; background: rgba(255,255,255,.05); }
.button-ghost:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.10); transform: translateY(-1px); }
.button-dark { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-sm); }
.button-dark:hover { background: #000; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-md); }
.button-ink { background: rgba(7,20,28,.94); color: #fff; border-color: rgba(255,255,255,.16); }
.button-ink:hover { background: var(--ink); border-color: rgba(255,255,255,.30); transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-full { width: 100%; }

.text-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: var(--s-4);
  color: var(--accent-light); font-weight: 600; font-size: .95rem;
}
.text-link span { transition: transform .3s var(--ease); }
.text-link:hover span { transform: translateX(5px); }

/* ================================================================== header */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  color: #fff;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease);
}
.site-header.scrolled {
  background: rgba(7, 20, 28, .78);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: rgba(255, 255, 255, .09);
}
.header-inner { height: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 34px; }

.brand { display: flex; align-items: center; gap: 12px; min-width: max-content; }
.brand img { width: 40px; height: 40px; }
.brand span { display: grid; line-height: 1.05; }
.brand strong { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.1rem; letter-spacing: -.01em; }
.brand small { color: var(--accent-light); text-transform: uppercase; letter-spacing: .2em; font-size: .58rem; font-weight: 500; margin-top: 5px; opacity: .9; }

.primary-nav { justify-self: center; display: flex; align-items: center; gap: 32px; font-size: .9rem; }
.primary-nav a { position: relative; color: rgba(255,255,255,.74); padding: 6px 0; transition: color .22s var(--ease); }
.primary-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent-light);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.primary-nav a:hover { color: #fff; }
.primary-nav a:hover::after { transform: scaleX(1); }

.header-call { display: grid; text-align: right; line-height: 1.2; }
.header-call span { color: rgba(255,255,255,.55); font-size: .66rem; text-transform: uppercase; letter-spacing: .14em; }
.header-call strong { color: #fff; font-size: 1rem; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; transition: color .22s var(--ease); }
.header-call:hover strong { color: var(--accent-light); }

.menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 11px; }
.menu-toggle span:not(.sr-only) { display: block; height: 1.5px; background: #fff; margin: 5px 0; border-radius: 2px; }

/* ================================================================== hero */
.hero {
  position: relative;
  min-height: 780px;
  color: #fff;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(90% 60% at 8% 10%, rgba(var(--accent-rgb), .16), transparent 62%),
    radial-gradient(70% 60% at 96% 78%, rgba(var(--cool-rgb), .20), transparent 60%),
    linear-gradient(158deg, #08151e 0%, #0c222c 52%, #091a22 100%);
}
/* Blueprint grid — held at a low enough opacity to be felt, not read. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 82%);
}
/* Grain over the gradient. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 140px;
  opacity: .16; mix-blend-mode: overlay;
}
.hero-grid { position: relative; z-index: 2; display: block; min-height: 780px; }
.hero-copy { position: relative; z-index: 2; max-width: 680px; padding: 188px 18px 112px; }
.hero-lead { font-size: var(--t-lead); color: rgba(255,255,255,.70); max-width: 52ch; margin: var(--s-3) 0 var(--s-4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: var(--s-5); max-width: 560px; }
.hero-proof div { padding-top: 16px; border-top: 1px solid var(--white-line-strong); }
.hero-proof strong {
  display: block; color: #fff;
  font-family: "Fraunces", serif; font-weight: 600; font-size: 1.95rem; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.hero-proof span { display: block; color: rgba(255,255,255,.52); font-size: var(--t-xs); margin-top: 8px; }

.hero-visual {
  position: absolute; z-index: 1; top: 0; bottom: 0; min-height: 0;
  left: calc((100% - 100vw) / 2);
  right: calc((100% - 100vw) / 2);
}
.hero-photo-wrap {
  position: absolute; inset: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}
.hero-photo-wrap::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7,20,28,.96) 0%, rgba(7,20,28,.78) 26%, rgba(7,20,28,.30) 62%, rgba(7,20,28,.12) 86%, rgba(7,20,28,.48) 100%),
    linear-gradient(0deg, rgba(7,20,28,.72) 0%, transparent 42%, rgba(7,20,28,.16) 100%);
}
.hero-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.96) contrast(1.05); }

.hero-card {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.hero-card small, .hero-card span { display: block; font-size: .7rem; color: var(--muted); line-height: 1.45; }
.hero-card strong { display: block; font-size: .88rem; font-weight: 600; letter-spacing: -.005em; }
.hero-card-top { top: calc(var(--header-h) + 24px); right: 5%; }
.hero-card-bottom { left: -6px; bottom: 8px; }
.status-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2d9b73; box-shadow: 0 0 0 4px rgba(45,155,115,.16); }
.shield-mini { flex: none; width: 30px; height: 30px; display: grid!important; place-items: center; border-radius: 50%; background: var(--accent); color: #fff!important; font-size: .8rem; font-weight: 700; }

/* Duct seam: a warm supply side and a cool return side meeting at a joint. */
.seam-line { position: absolute; left: 0; right: 0; bottom: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb),.7) 26%, rgba(var(--cool-rgb),.7) 74%, transparent); }
.seam-line::before, .seam-line::after { content: ""; position: absolute; top: -4px; width: 9px; height: 9px; border-radius: 2px; background: #0a1a22; }
.seam-line::before { left: 25%; border: 1px solid rgba(var(--accent-rgb),.85); }
.seam-line::after { right: 25%; border: 1px solid rgba(var(--cool-rgb),.85); }

/* ================================================================== emergency band */
.emergency-band { position: relative; color: #fff; background: var(--accent-deep); overflow: hidden; }
.emergency-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--accent-deep), var(--accent) 62%, var(--accent-light));
  opacity: .96;
}
.emergency-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 22px; padding: 19px 0; }
.emergency-pulse { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: emergency-pulse 2.4s infinite; }
@keyframes emergency-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 62% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } }
.emergency-copy { flex: 1 1 auto; display: grid; line-height: 1.35; }
.emergency-copy strong { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.25rem; letter-spacing: -.015em; }
.emergency-copy span { color: rgba(255,255,255,.82); font-size: var(--t-sm); }
.emergency-band .button { flex: none; min-height: 46px; padding: 0 22px; font-size: .9rem; }

/* ================================================================== trust ribbon */
.trust-ribbon { background: #08161d; color: #fff; border-top: 2px solid rgba(230,106,58,.46); border-bottom: 1px solid rgba(255,255,255,.05); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-grid > div { position: relative; padding: 30px 30px 30px 0; border-right: 1px solid rgba(255,255,255,.07); }
.trust-grid > div + div { padding-left: 30px; }
.trust-grid > div:last-child { border-right: 0; }
.trust-grid svg { width: 17px; height: 17px; color: var(--accent); margin-bottom: 13px; }
.trust-grid strong { display: block; font-size: .92rem; font-weight: 600; letter-spacing: -.005em; }
.trust-grid small { display: block; color: rgba(255,255,255,.48); font-size: var(--t-xs); margin-top: 5px; }

/* ================================================================== section headings */
.review-rail { background: #08161d; color: #fff; border-top: 2px solid rgba(230,106,58,.46); border-bottom: 1px solid rgba(255,255,255,.08); }
.review-rail-inner { display: block; min-height: 190px; }
.review-rail-heading { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 25px 0 15px; text-align: left; }
.google-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: var(--accent-light); font-family: Arial, sans-serif; font-size: 1rem; font-weight: 700; }
.review-rail-heading strong { display: block; font-size: .94rem; font-weight: 600; }
.review-rail-heading small { display: block; margin-top: 5px; color: rgba(255,255,255,.48); font-size: .72rem; }
.review-rail-viewport { overflow: hidden; outline: none; }
.review-rail-viewport:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -2px; }
.review-rail-track { display: flex; width: max-content; padding: 0 0 25px; animation: review-rail-scroll 34s linear infinite; }
.review-rail-track:hover, .review-rail-viewport:focus-within .review-rail-track { animation-play-state: paused; }
.review-rail-track-group { display: flex; align-items: center; gap: 16px; padding-right: 16px; }
@keyframes review-rail-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.review-rail-card { flex: 0 0 min(410px, 72vw); padding: 17px 20px; border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); background: rgba(255,255,255,.045); }
.review-rail-card p { margin: 7px 0 0; color: rgba(255,255,255,.68); font-size: .86rem; line-height: 1.4; }
.review-rail-card > small { display: block; margin-top: 8px; color: rgba(255,255,255,.42); font-size: .7rem; }
.review-rail-rating { display: flex; align-items: center; gap: 8px; }
.review-rail-rating strong { font-family: "Fraunces", serif; color: var(--accent-light); font-size: 1.35rem; }
.review-rail-rating svg { width: 13px; height: 13px; color: var(--accent-light); }
.review-rail-placeholder > span { display: block; color: var(--accent-light); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.review-rail-placeholder > strong { display: block; margin-top: 5px; font-family: "Fraunces", serif; font-size: 1.22rem; }
@media (prefers-reduced-motion: reduce) { .review-rail-track { animation: none; } }
.section-heading { margin-bottom: var(--s-5); }
.split-heading, .work-heading { display: grid; grid-template-columns: 1.15fr .65fr; gap: var(--s-6); align-items: end; }
.section-heading p { margin: 0; color: var(--muted); max-width: 46ch; font-size: .97rem; }
.centered { text-align: center; max-width: 760px; margin-inline: auto; }
.centered .eyebrow { justify-content: center; }
.centered p { margin: var(--s-2) auto 0; }

/* ================================================================== services */
.services,
.plans,
.work,
.process,
.faq,
.thank-you {
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.24), transparent 38%),
    radial-gradient(circle at 84% 76%, rgba(125,104,85,.10), transparent 42%),
    var(--grain);
  background-size: 100% 100%, 100% 100%, 180px 180px;
  background-blend-mode: normal, normal, soft-light;
}

.services { background-color: var(--cream); }
.service-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 18px; }
.service-card {
  position: relative;
  background: rgba(255, 250, 245, .78);
  border: 2px solid rgba(230,106,58,.28);
  border-radius: var(--r-lg);
  padding: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.service-card:hover { border-color: rgba(230,106,58,.44); box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* The featured card spans all three rows of the right column, so the photo — not
   the copy — absorbs the leftover height. Fixing the photo row instead leaves a
   dead white block under the bullets. */
.service-card.featured { grid-row: span 3; padding: 0; display: grid; grid-template-rows: minmax(330px, 1fr) auto; }
.service-card.featured:hover { transform: none; }
.service-photo { overflow: hidden; }
.service-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); transition: transform .8s var(--ease); }
.service-card.featured:hover .service-photo img { transform: scale(1.03); }
.service-content { padding: 36px; }

.service-number {
  color: var(--muted); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; font-variant-numeric: tabular-nums;
}
.service-content .service-number { display: block; margin-bottom: 14px; color: var(--accent-ink); }
.service-card:not(.featured) .service-number { position: absolute; top: 30px; right: 30px; opacity: .55; }

.service-card h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.85rem; line-height: 1.08; letter-spacing: -.022em; margin: 0 0 10px; text-wrap: balance; }
.service-card p { color: var(--muted); margin: 0 0 16px; font-size: .95rem; }
.service-card ul { padding: 0; margin: 20px 0 0; list-style: none; display: grid; gap: 10px; font-size: .93rem; }
.service-card ul li { position: relative; padding-left: 26px; }
.service-card ul li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px;
  background-color: var(--accent); mask: var(--check) center/contain no-repeat; -webkit-mask: var(--check) center/contain no-repeat;
}

.service-card:not(.featured) { display: flex; flex-direction: column; min-height: 208px; }
.service-card:not(.featured) h3 { font-size: 1.4rem; }
.service-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 22px;
  border-radius: 13px;
  background: rgba(var(--accent-rgb), .09);
  border: 1px solid rgba(var(--accent-rgb), .18);
  color: var(--accent-ink);
  font-family: "Fraunces", serif; font-size: 1.15rem;   /* letter fallback */
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.service-icon svg { width: 22px; height: 22px; }
.service-card:hover .service-icon { background: var(--accent); border-color: var(--accent); color: #fff; }
.service-card a { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); font-weight: 600; font-size: .88rem; }
.service-card a span { transition: transform .3s var(--ease); }
.service-card a:hover span { transform: translateX(5px); }

/* ================================================================== maintenance plans */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.plan-card {
  position: relative; display: flex; flex-direction: column;
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(255, 250, 245, .78);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.plan-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.plan-card.featured {
  background: var(--ink); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-xl);
  padding-top: 40px;
}
.plan-flag {
  position: absolute; top: 22px; right: 26px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(var(--accent-rgb), .16); color: var(--accent-light);
  border: 1px solid rgba(var(--accent-rgb), .38);
  font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
}
.plan-card h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.7rem; letter-spacing: -.02em; margin: 0 0 6px; padding-right: 96px; }
.plan-summary { color: var(--muted); margin: 0 0 22px; font-size: .9rem; }
.plan-card.featured .plan-summary { color: rgba(255,255,255,.60); }
.plan-price { display: flex; align-items: baseline; gap: 8px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.plan-card.featured .plan-price { border-color: rgba(255,255,255,.13); }
.plan-price strong { font-family: "Fraunces", serif; font-weight: 600; font-size: 2.7rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.plan-card.featured .plan-price strong { color: #fff; }
.plan-price span { color: var(--muted); font-size: .8rem; }
.plan-card.featured .plan-price span { color: rgba(255,255,255,.5); }
.plan-card ul { flex: 1 1 auto; list-style: none; padding: 0; margin: 22px 0 26px; display: grid; gap: 11px; font-size: .91rem; }
.plan-card li { position: relative; padding-left: 27px; }
.plan-card li::before {
  content: ""; position: absolute; left: 0; top: .38em; width: 15px; height: 15px;
  background-color: var(--accent); mask: var(--check) center/contain no-repeat; -webkit-mask: var(--check) center/contain no-repeat;
}
.plan-card.featured li::before { background-color: var(--accent-light); }

/* ================================================================== standard */
.standard { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.standard::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 140px; opacity: .13; mix-blend-mode: overlay;
}
.standard-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .92fr 1.08fr; gap: var(--s-6); align-items: center; }
.standard-visual { position: relative; min-height: 600px; overflow: hidden; border-radius: var(--r-md); }
.standard-visual::after { content: ""; position: absolute; z-index: 2; inset: 0; border: 3px solid var(--accent); border-radius: var(--r-md); pointer-events: none; }
/* A simple accent frame keeps the photo grounded without competing with it. */
.standard-visual img {
  position: relative; z-index: 1;
  width: 100%; height: 600px; object-fit: cover;
  border-radius: var(--r-md);
  border: 0;
  display: block;
  filter: saturate(.88) contrast(1.05);
  box-shadow: 0 40px 80px -34px rgba(0,0,0,.7);
}
.accent-frame { display: none; }
.standard-copy h2 { color: #fff; }
.standard-copy > p { color: rgba(255,255,255,.66); font-size: var(--t-lead); margin: var(--s-3) 0 var(--s-4); max-width: 50ch; }
.standard-list { display: grid; gap: 0; }
.standard-list > div { display: grid; grid-template-columns: 46px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.11); }
.standard-list > div:last-child { border-bottom: 1px solid rgba(255,255,255,.11); }
.standard-list span { color: var(--accent-light); font-family: "Fraunces", serif; font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; padding-top: 2px; }
.standard-list strong { display: block; margin-bottom: 5px; font-weight: 600; letter-spacing: -.005em; }
.standard-list p { margin: 0; color: rgba(255,255,255,.52); font-size: .93rem; }

/* ================================================================== brands serviced */
.brands { background: var(--ink-2); color: #fff; border-top: 1px solid rgba(255,255,255,.06); }
.brands-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 48px; padding: 32px 0; }
.brands-head .eyebrow { margin-bottom: 7px; }
.brands-head strong { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.3rem; letter-spacing: -.015em; white-space: nowrap; }
.brand-row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.brand-row span {
  padding: 10px 19px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.025);
  color: rgba(255,255,255,.72);
  font-weight: 500; font-size: .87rem; letter-spacing: .02em;
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.brand-row span:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.06); color: #fff; }

/* ================================================================== work */
.gallery-grid { display: grid; grid-template-columns: 1.08fr .92fr; grid-template-rows: 330px 330px 250px; gap: 16px; }
.gallery-item { position: relative; margin: 0; overflow: hidden; border: 2px solid rgba(230,106,58,.28); border-radius: var(--r-lg); background: var(--cream); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.03); transition: transform .9s var(--ease); }
.gallery-item:hover { border-color: rgba(230,106,58,.44); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,20,28,.86), rgba(7,20,28,.10) 52%, transparent 70%); }
.gallery-large { grid-row: span 2; }
.gallery-wide { grid-column: 1 / -1; grid-row: 3; }
.gallery-item figcaption { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 24px; color: #fff; }
.gallery-item figcaption span { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .62rem; font-weight: 600; color: var(--accent-light); }
.gallery-item figcaption strong { display: block; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.32rem; letter-spacing: -.018em; margin-top: 6px; }

/* ================================================================== showcase band
   A full-bleed cinematic break between the gallery and the proof blocks. The
   photograph is the section; the copy sits in the shadowed lower-left of the
   frame. Paint order is explicit — media, scrim, copy — so no negative z-index
   is needed to keep the scrim off the text. */
.showcase {
  position: relative;
  display: grid; align-items: end;
  min-height: clamp(420px, 44vw, 620px);
  padding: var(--s-6) 0;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.showcase-media { position: absolute; inset: 0; z-index: 0; }
.showcase-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.86) contrast(1.06);
  /* Settles out of a slow push-in when the band scrolls into view. */
  transform: scale(1.08);
  transition: transform 2.4s var(--ease);
}
.showcase-media.visible img { transform: scale(1); }
/* Dark where the copy lands, clear over the lit windows on the right. */
.showcase::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(4, 12, 17, .92), rgba(4, 12, 17, .54) 38%, rgba(4, 12, 17, .08) 72%, rgba(4, 12, 17, .38)),
    linear-gradient(96deg, rgba(4, 12, 17, .66), rgba(4, 12, 17, .08) 58%);
}
.showcase::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grain); background-size: 140px;
  opacity: .14; mix-blend-mode: overlay;
}
.showcase-inner { position: relative; z-index: 2; max-width: 700px; }
.showcase h2 {
  font-family: "Fraunces", Georgia, serif; font-weight: 600;
  font-size: clamp(1.9rem, 3.1vw, 3rem); line-height: 1.04; letter-spacing: -.03em;
  text-wrap: balance; margin: 0;
}
.showcase p { color: rgba(255,255,255,.66); font-size: var(--t-lead); margin: var(--s-3) 0 0; max-width: 50ch; }

/* ================================================================== reputation */
.reputation {
  background-color: #f1eae2;
  background-image:
    linear-gradient(150deg, rgba(241,234,226,.94), rgba(255,250,245,.94) 62%),
    var(--grain);
  background-size: 100% 100%, 180px 180px;
  background-blend-mode: normal, soft-light;
}
.reputation-grid { display: grid; grid-template-columns: .82fr 1.4fr .78fr; gap: 18px; align-items: stretch; }
.rating-block, .review-quote, .bbb-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px; box-shadow: var(--shadow-sm);
}
.rating-label { text-transform: uppercase; letter-spacing: .16em; font-size: .64rem; color: var(--accent-ink); font-weight: 600; }
.rating-value { font-family: "Fraunces", serif; font-weight: 600; font-size: 4.4rem; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 18px 0 12px; }
.stars { display: flex; gap: 3px; color: var(--accent); }
.stars svg { width: 16px; height: 16px; }
.rating-block p, .bbb-card p { color: var(--muted); margin: 14px 0 0; font-size: .9rem; }

.review-quote { position: relative; margin: 0; display: flex; flex-direction: column; }
.quote-mark { font-family: "Fraunces", serif; font-size: 2.6rem; line-height: .8; color: var(--accent); opacity: .35; }
.review-quote p {
  font-family: "Fraunces", serif; font-weight: 600;
  font-size: clamp(1.35rem, 1.5vw + .9rem, 1.85rem); line-height: 1.28; letter-spacing: -.02em;
  text-wrap: pretty; margin: 20px 0 auto;
}
.review-quote footer { color: var(--muted); font-size: .84rem; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }

.bbb-card { background: var(--ink); color: #fff; border-color: transparent; display: flex; flex-direction: column; }
.bbb-card span { display: block; color: rgba(255,255,255,.52); font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; }
.bbb-card strong {
  display: block; font-family: "Fraunces", serif; font-weight: 600;
  color: var(--accent-light); font-size: 2.1rem; line-height: 1.1; letter-spacing: -.025em;
  margin: 18px 0 0; text-wrap: balance;
}
.bbb-card p { color: rgba(255,255,255,.55); margin-top: auto; padding-top: 20px; }

/* ================================================================== financing */
.financing { position: relative; padding: var(--s-6) 0; background: linear-gradient(140deg, var(--ink), var(--ink-3)); color: #fff; overflow: hidden; }
.financing::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-light) 70%, transparent); }
.financing::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 140px; opacity: .12; mix-blend-mode: overlay; }
.financing-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.28fr .72fr; gap: var(--s-6); align-items: center; }
.financing h2 { font-size: clamp(1.85rem, 2.6vw, 2.65rem); }
.financing-copy p { color: rgba(255,255,255,.64); margin: var(--s-3) 0 0; max-width: 52ch; }
.financing-side ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 13px; }
.financing-side li { position: relative; padding-left: 27px; color: rgba(255,255,255,.80); font-size: .92rem; }
.financing-side li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 15px; height: 15px;
  background-color: var(--accent-light); mask: var(--check) center/contain no-repeat; -webkit-mask: var(--check) center/contain no-repeat;
}

/* ================================================================== process */
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: var(--s-5); }
.process-grid article {
  position: relative; padding: 34px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255,250,245,.82), rgba(244,239,232,.76));
  transition: border-color .3s var(--ease), box-shadow .35s var(--ease);
}
.process-grid article:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.process-grid span {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--accent-light);
  font-family: "Fraunces", serif; font-weight: 600; font-size: .88rem; font-variant-numeric: tabular-nums;
}
.process-grid h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.32rem; letter-spacing: -.018em; margin: 22px 0 9px; }
.process-grid p { color: var(--muted); margin: 0; font-size: .94rem; }

/* ================================================================== service area */
.service-area { background: var(--ink-2); color: #fff; overflow: hidden; }
.service-area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
.area-copy > p { color: rgba(255,255,255,.64); font-size: var(--t-lead); margin: var(--s-3) 0 var(--s-4); max-width: 46ch; }
.address-card {
  display: flex; align-items: center; gap: 16px; padding: 17px;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md);
  max-width: 420px; background: rgba(255,255,255,.035);
}
.address-card img { width: 44px; }
.address-card small, .address-card span { display: block; color: rgba(255,255,255,.5); font-size: .8rem; }
.address-card strong { display: block; margin: 3px 0; font-weight: 600; }

.area-map {
  position: relative; height: 480px;
  border-radius: var(--r-xl);
  border: 1px solid rgba(255,255,255,.09);
  overflow: hidden;
  isolation: isolate;                 /* keeps .map-photo's blend inside the card */
  background: linear-gradient(155deg, #143039, #0a1c24 70%);
}
/* A real aerial under the drawn map. Blended to luminosity so it picks up the
   card's teal rather than fighting it, and masked so the hairline grid and the
   range rings stay the thing you actually read. */
.map-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .72;
  filter: saturate(.45) contrast(1.18) brightness(1.02);
  mix-blend-mode: luminosity;
  mask-image: radial-gradient(82% 82% at 56% 44%, #000 26%, transparent 84%);
  -webkit-mask-image: radial-gradient(82% 82% at 56% 44%, #000 26%, transparent 84%);
}
/* Hairline grid + concentric range rings + one route line. */
.map-lines { position: absolute; inset: 0; }
.map-lines::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(70% 70% at 56% 44%, #000 30%, transparent 90%);
}
.map-lines::after {
  content: ""; position: absolute; left: 56%; top: 44%;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 70px, rgba(var(--accent-rgb),.16) 70px 71px, transparent 71px),
    radial-gradient(circle, transparent 0 130px, rgba(var(--accent-rgb),.11) 130px 131px, transparent 131px),
    radial-gradient(circle, transparent 0 195px, rgba(var(--accent-rgb),.07) 195px 196px, transparent 196px);
}
.map-pin { position: absolute; left: 56%; top: 44%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: grid; place-items: center; border-radius: 50%; animation: pulse 3.4s infinite; }
.map-pin span { width: 17px; height: 17px; background: var(--accent); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 6px 20px rgba(var(--accent-rgb), .55); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .18); } 55% { box-shadow: 0 0 0 26px rgba(var(--accent-rgb), 0); } }

.map-label {
  position: absolute; display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px;
  background: rgba(6, 18, 24, .78);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  font-size: .72rem; color: rgba(255,255,255,.76);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.map-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cool-light); }
.label-one { left: 17%; top: 24%; }
.label-two { right: 8%; bottom: 22%; }
.label-three { left: 10%; bottom: 15%; }

/* ================================================================== faq */
.faq { background: var(--cream); }
.faq-grid { display: grid; grid-template-columns: .68fr 1.32fr; gap: var(--s-6); align-items: start; }
.faq-intro { position: sticky; top: calc(var(--header-h) + 30px); }
.faq-intro p { color: var(--muted); margin: var(--s-3) 0 var(--s-4); font-size: .97rem; }
.faq-list { border-top: 1px solid var(--line-strong); }
details { border-bottom: 1px solid var(--line-strong); }
summary {
  cursor: pointer; list-style: none;
  padding: 24px 56px 24px 0;
  font-weight: 600; font-size: 1.02rem; letter-spacing: -.008em;
  position: relative;
  transition: color .22s var(--ease);
}
summary:hover { color: var(--accent-ink); }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 2px; top: 22px;
  width: 32px; height: 32px;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background:
    linear-gradient(var(--accent-ink), var(--accent-ink)) center/11px 1.5px no-repeat,
    linear-gradient(var(--accent-ink), var(--accent-ink)) center/1.5px 11px no-repeat;
  transition: transform .35s var(--ease), border-color .25s var(--ease), background-size .35s var(--ease);
}
details[open] summary::after {
  transform: rotate(90deg);
  border-color: var(--accent);
  background-size: 11px 1.5px, 0 11px;
}
details p { margin: 0; padding: 0 64px 26px 0; color: var(--muted); font-size: .96rem; }

/* Native disclosure animation where the engine supports it. */
@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .4s var(--ease), content-visibility .4s allow-discrete;
  }
  details[open]::details-content { block-size: auto; }
}

/* ================================================================== contact */
.contact {
  position: relative;
  padding: var(--s-7) 0;
  color: #fff;
  /* Directional rather than flat: heaviest under the copy on the left, lifted
     on the right so the warm pool in the photograph still reads behind the form. */
  background:
    linear-gradient(98deg, rgba(7,20,28,.95) 0%, rgba(7,20,28,.86) 44%, rgba(7,20,28,.60) 100%),
    linear-gradient(rgba(7,20,28,.30), rgba(7,20,28,.58)),
    url('assets/images/contact-bg.webp') center/cover;
}
.contact::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 140px; opacity: .13; mix-blend-mode: overlay; }
.contact-shell { position: relative; z-index: 2; display: grid; grid-template-columns: .82fr 1.18fr; gap: var(--s-6); align-items: center; }
.contact-copy > p { color: rgba(255,255,255,.64); font-size: var(--t-lead); margin: var(--s-3) 0; max-width: 42ch; }
.contact-phone { display: grid; padding: 20px 0; border-top: 1px solid var(--white-line-strong); border-bottom: 1px solid var(--white-line-strong); }
.contact-phone small { color: rgba(255,255,255,.55); font-size: .78rem; }
.contact-phone strong { color: var(--accent-light); font-family: "Fraunces", serif; font-weight: 600; font-size: 2rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 5px; transition: color .22s var(--ease); }
.contact-phone:hover strong { color: #fff; }
.contact-meta { display: grid; gap: 4px; color: rgba(255,255,255,.5); font-size: .84rem; margin-top: 20px; }

.contact-form {
  background: var(--paper); color: var(--ink);
  padding: 38px; border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255,255,255,.5);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 8px; font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  background: #fff; color: var(--ink);
  padding: 13px 14px;
  font-size: .95rem; letter-spacing: normal; text-transform: none; font-weight: 400;
  outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: color-mix(in srgb, var(--ink) 32%, transparent); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
}
.contact-form .button { margin-top: 4px; }
.form-note { color: var(--muted); font-size: .72rem; margin: 14px 0 0; }

/* ================================================================== footer */
.site-footer { background: #040a0e; color: #fff; padding: var(--s-6) 0 22px; }
.footer-grid { display: grid; grid-template-columns: 1.15fr .85fr .95fr 1.05fr; gap: var(--s-5); }
.footer-grid > div { display: grid; align-content: start; gap: 7px; color: rgba(255,255,255,.5); font-size: .84rem; }
.footer-grid > div strong { color: #fff; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 10px; }
.footer-grid a { transition: color .22s var(--ease); }
.footer-grid a:hover { color: var(--accent-light); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: var(--s-5); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.34); font-size: .73rem; }
.mobile-call { display: none; }

/* ================================================================== chatbot */
.chatbot { position: fixed; right: 24px; bottom: 24px; z-index: 130; display: grid; justify-items: end; gap: 12px; }
.chatbot-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 19px; border: 1px solid rgba(var(--accent-rgb), .48); border-radius: 999px; background: var(--cream); color: var(--ink); box-shadow: 0 16px 36px -14px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.72); cursor: pointer; font-size: .84rem; font-weight: 700; }
.chatbot-toggle:hover { background: var(--paper); border-color: var(--accent); transform: translateY(-2px); }
.chatbot-toggle svg { width: 20px; height: 20px; color: var(--accent-ink); }
.chatbot-panel { width: min(350px, calc(100vw - 30px)); overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .42); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: 0 28px 70px -24px rgba(0,0,0,.68); }
.chatbot-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; background: var(--ink); color: #fff; border-bottom: 2px solid var(--accent); }
.chatbot-header strong { display: block; font-size: .9rem; }
.chatbot-header small { display: block; margin-top: 3px; color: rgba(255,255,255,.52); font-size: .68rem; }
.chatbot-close { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.20); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; font-size: 1.25rem; line-height: 1; }
.chatbot-close:hover { border-color: var(--accent-light); color: var(--accent-light); }
.chatbot-messages { display: grid; gap: 10px; padding: 18px 18px 10px; }
.chatbot-bubble { max-width: 90%; margin: 0; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--cream); color: var(--ink); font-size: .86rem; line-height: 1.45; }
.chatbot-bubble.is-reply { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--accent); color: #fff; }
.chatbot-options { display: grid; gap: 8px; padding: 8px 18px 16px; }
.chatbot-options button { padding: 10px 12px; border: 1px solid rgba(var(--accent-rgb), .30); border-radius: var(--r-xs); background: transparent; color: var(--accent-ink); cursor: pointer; text-align: left; font-size: .78rem; font-weight: 600; }
.chatbot-options button:hover { background: rgba(var(--accent-rgb), .10); border-color: var(--accent); }
.chatbot-note { margin: 0; padding: 10px 18px 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: .66rem; line-height: 1.4; }
[hidden] { display: none !important; }

/* ================================================================== standalone pages */
.thank-you, .error-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; text-align: center; }
.thank-you { background: var(--cream); color: var(--ink); }
.thank-you > div, .error-page > div { max-width: 540px; display: grid; justify-items: center; gap: 4px; }
.thank-you img { width: 56px; margin-bottom: 18px; }
.thank-you .eyebrow { justify-content: center; }
.thank-you h1 { font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; margin: 6px 0 12px; }
.thank-you p { color: var(--muted); margin: 0 0 26px; }
.thank-you .button, .error-page .button { min-width: 240px; margin: 5px 0; }
.error-page { background: var(--ink); color: #fff; }
.error-page strong { font-family: "Fraunces", serif; font-weight: 600; color: var(--accent-light); font-size: clamp(4.5rem, 12vw, 7rem); line-height: 1; letter-spacing: -.05em; }
.error-page h1 { font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; margin: 10px 0 12px; }
.error-page p { color: rgba(255,255,255,.6); margin: 0 0 26px; }

/* ================================================================== motion
   Short travel, long easing, and an index-driven stagger. Uniform fade-ups on
   every block at identical timing is the motion equivalent of a stock layout. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--r, 0) * 80ms);
}
.reveal-delay { transition-delay: 110ms; }
.reveal.visible { 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; transition-delay: 0ms!important; }
  .reveal { opacity: 1; transform: none; }
}

/* ================================================================== responsive */
@media (max-width: 1050px) {
  .primary-nav { gap: 20px; }
  .hero-grid { gap: var(--s-5); }
  .split-heading, .work-heading { gap: var(--s-5); }
  .reputation-grid { grid-template-columns: .85fr 1.15fr; }
  .bbb-card { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 28px; }
  .bbb-card strong { margin: 0; flex: none; }
  .bbb-card p { margin-top: 0; padding-top: 0; }
  .brands-inner { grid-template-columns: 1fr; gap: 20px; }
  .brand-row { justify-content: flex-start; }
  .financing-inner { gap: var(--s-5); }
}

@media (max-width: 860px) {
  .site-header { background: rgba(7, 20, 28, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  :root { --header-h: 72px; }
  .header-inner { grid-template-columns: auto auto; justify-content: space-between; }
  .menu-toggle { display: block; }
  .primary-nav {
    position: absolute; left: 22px; right: 22px; top: calc(var(--header-h) + 4px);
    /* The desktop rule centres this as a grid item. Box alignment also applies to
       absolutely-positioned boxes, so without this reset the panel shrinks to
       fit-content and floats mid-header instead of spanning left/right. */
    justify-self: stretch;
    display: none; padding: 22px;
    background: #0a1b23; border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-md);
    flex-direction: column; align-items: flex-start; gap: 16px;
    box-shadow: 0 30px 60px -24px rgba(0,0,0,.7);
  }
  .primary-nav.open { display: flex; }
  .header-call { display: none; }
  .hero { min-height: 760px; }
  .hero-grid, .standard-grid, .service-area-grid, .contact-shell, .faq-grid, .financing-inner { grid-template-columns: 1fr; }
  .hero-grid { min-height: 760px; }
  .hero-copy { max-width: 620px; padding: 350px 16px 40px; }
  .hero-card-top { top: calc(var(--header-h) + 18px); right: 15px; }
  .emergency-inner { flex-wrap: wrap; }
  .emergency-copy { flex: 1 1 220px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid > div { padding: 26px 26px 26px 0; }
  .trust-grid > div:nth-child(odd) + div { padding-left: 26px; }
  .trust-grid > div:nth-child(2) { border-right: 0; }
  .trust-grid > div:nth-child(3) { padding-left: 0; }
  .trust-grid > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.07); }
  .split-heading, .work-heading { grid-template-columns: 1fr; gap: var(--s-3); }
  .service-grid { grid-template-columns: 1fr; }
  .service-card.featured { grid-row: auto; }
  .plan-grid { grid-template-columns: 1fr; gap: 24px; }
  .standard-visual { min-height: 500px; }
  .standard-visual img { height: 500px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 280px 230px; }
  /* The 21:9 frame gets tall and thin here, so the scrim leans vertical. */
  .showcase { min-height: 460px; padding: var(--s-5) 0; }
  .showcase::before { background: linear-gradient(to top, rgba(4,12,17,.95), rgba(4,12,17,.66) 44%, rgba(4,12,17,.28)); }
  .reputation-grid { grid-template-columns: 1fr 1fr; }
  .review-quote { grid-column: 1 / -1; grid-row: 1; }
  .bbb-card { grid-column: auto; flex-direction: column; }
  .bbb-card p { margin-top: auto; padding-top: 20px; }
  .process-grid { grid-template-columns: 1fr; }
  .faq-intro { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .container { width: min(100% - 30px, var(--container)); }
  .brand strong { font-size: 1rem; }
  .brand small { font-size: .54rem; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.3rem); }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .hero-proof { gap: 12px; }
  .hero-proof strong { font-size: 1.5rem; }
  .hero-proof span { font-size: .7rem; }
  .hero { min-height: 720px; }
  .hero-grid { min-height: 720px; }
  .hero-copy { padding: 155px 15px 32px; }
  .hero-photo-wrap::after {
    background:
      linear-gradient(180deg, rgba(7,20,28,.18) 0%, rgba(7,20,28,.28) 34%, rgba(7,20,28,.92) 82%),
      linear-gradient(90deg, rgba(7,20,28,.48) 0%, transparent 70%, rgba(7,20,28,.34) 100%);
  }
  .hero-photo-wrap img { object-position: 62% center; }
  .hero-card { padding: 12px 14px; }
  .hero-card-top { display: none; }
  .hero-card-bottom { left: -2px; }
  .emergency-inner { display: grid; gap: 15px; padding: 22px 0; }
  .emergency-pulse { display: none; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-grid > div,
  .trust-grid > div + div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); padding: 22px 0; }
  .trust-grid > div:last-child { border-bottom: 0; }
  .service-card.featured { grid-template-rows: 240px 1fr; }
  .service-content, .service-card { padding: 26px; }
  .service-card:not(.featured) { min-height: auto; }
  .service-card:not(.featured) .service-number { top: 26px; right: 26px; }
  .plan-card { padding: 32px 26px; }
  .brand-row span { padding: 9px 15px; font-size: .82rem; }
  .standard-visual { min-height: 400px; }
  .standard-visual img { height: 400px; border-radius: var(--r-md); }
  .gallery-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .gallery-item, .gallery-large, .gallery-wide { grid-column: auto; grid-row: auto; height: 300px; }
  .reputation-grid { grid-template-columns: 1fr; }
  .review-quote, .bbb-card { grid-column: auto; grid-row: auto; }
  .rating-block, .review-quote, .bbb-card, .contact-form { padding: 26px; }
  .showcase { min-height: 400px; }
  .showcase h2 { font-size: clamp(1.65rem, 7.4vw, 2.1rem); }
  .area-map { height: 360px; }
  .map-label { font-size: .68rem; padding: 6px 11px 6px 9px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .summary { font-size: .96rem; }
  details p { padding-right: 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .mobile-call {
    position: fixed; z-index: 120; left: 12px; right: 12px; bottom: 12px;
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 20px; border-radius: 999px;
    background: var(--accent); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 34px -12px rgba(0,0,0,.6);
  }
  .mobile-call span { font-size: .73rem; font-weight: 600; }
  .mobile-call strong { font-size: .88rem; font-variant-numeric: tabular-nums; }
  body { padding-bottom: 80px; }
  .chatbot { right: 15px; bottom: 84px; }
  .chatbot-toggle { min-height: 46px; padding: 0 16px; }
  .thank-you .button, .error-page .button { min-width: 0; width: 100%; }
}