/* ============================================================
   SOS Plumbing & Heating — design system
   Concept: "Send the Signal" — morse SOS structure,
   water (aqua) vs heat (copper) on deep indigo, porcelain relief.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('../fonts/spline-sans-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('../fonts/spline-sans-mono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --abyss: #0a0714;
  --abyss-2: #110b20;
  --ink: #1d1235;
  --ink-2: #271a47;
  --brand: #704c98;
  --iris: #a184cc;
  --iris-deep: #3d2854;
  --gold: #f0d353;
  --gold-bright: #f7e27e;
  --aqua: #f0d353; /* retired — aliased to gold (rev 4) */
  --copper: #d08a54;
  --copper-bright: #e8a76c;
  --porcelain: #f4f2f7;
  --porcelain-2: #e9e5f0;
  --text: #ece9f4;
  --text-muted: #a49dbf;
  --text-dark: #1c142b;
  --text-dark-muted: #5c5378;
  --line: rgba(161, 132, 204, .18);
  --line-light: rgba(28, 20, 43, .12);

  --font-display: 'Clash Display', 'Avenir Next', sans-serif;
  --font-body: 'General Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Spline Sans Mono', 'SF Mono', monospace;

  /* Trimmed from clamp(3rem, 9.5vw, 7.5rem): the headline is now a real
     sentence rather than a two-word brand line, so it needs to set smaller to
     stay readable and keep the CTAs above the fold. */
  --size-hero: clamp(2.6rem, 8vw, 6.4rem);
  --size-h2: clamp(2.1rem, 4.6vw, 3.6rem);
  --size-h3: clamp(1.35rem, 2.4vw, 1.8rem);
  --size-body: 1.0625rem;
  --size-small: .9rem;
  --size-mono: .8125rem;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(4.5rem, 10vw, 8.5rem);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--abyss);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--iris-deep); color: #fff; }

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--gold); color: #221a08;
  padding: .6rem 1rem; font-family: var(--font-mono); font-size: var(--size-mono);
}
.skip-link:focus { left: 0; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Morse signature ---------- */
.morse { display: inline-flex; align-items: center; gap: 7px; }
.morse i {
  display: block; height: 4px; border-radius: 999px;
  background: currentColor;
}
.morse .md { width: 4px; }
.morse .mD { width: 16px; }
.morse.is-live i { animation: morse-blink 3.6s infinite; }
/* SOS timing: dots(0,1,2) dashes(3,4,5) dots(6,7,8) */
.morse.is-live i:nth-child(1) { animation-delay: 0s; }
.morse.is-live i:nth-child(2) { animation-delay: .25s; }
.morse.is-live i:nth-child(3) { animation-delay: .5s; }
.morse.is-live i:nth-child(4) { animation-delay: .9s; }
.morse.is-live i:nth-child(5) { animation-delay: 1.35s; }
.morse.is-live i:nth-child(6) { animation-delay: 1.8s; }
.morse.is-live i:nth-child(7) { animation-delay: 2.3s; }
.morse.is-live i:nth-child(8) { animation-delay: 2.55s; }
.morse.is-live i:nth-child(9) { animation-delay: 2.8s; }
@keyframes morse-blink {
  0%, 12%, 100% { opacity: .35; }
  4%, 8% { opacity: 1; }
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .9rem;
  font-family: var(--font-mono); font-size: var(--size-mono);
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow .morse { color: var(--gold); opacity: .85; }
.eyebrow--copper, .eyebrow--copper .morse { color: var(--copper-bright); }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -.01em; }
/* Display leading must live here, not only on h1-h4: the keyword-H1 pattern
   renders the big brand line as a <p class="hero__display">, so it never
   matched the heading rule and inherited body leading (1.65). Harmless on
   desktop where it sets one line, but it split the two mobile lines apart. */
.h-display { font-size: var(--size-hero); font-weight: 700; letter-spacing: -.02em; line-height: 1.02; }
.h-section { font-size: var(--size-h2); }
.h-card { font-size: var(--size-h3); font-weight: 600; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--text); max-width: 56ch; }
.on-light .lede { color: var(--text-dark-muted); }

.section-head { display: grid; gap: 1.1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 780px; }
.section-head .h-section { text-wrap: balance; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.6rem;
  font-family: var(--font-mono); font-size: var(--size-mono);
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 10px;
  transition: transform .35s var(--ease-out), background .35s, color .35s, box-shadow .35s;
  will-change: transform;
}
.btn svg { width: 15px; height: 15px; flex: none; transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(.97); }

.btn--signal {
  background: var(--gold); color: #221a08;
  box-shadow: 0 0 0 0 rgba(240, 211, 83, 0);
}
.btn--signal:hover { background: var(--gold-bright); box-shadow: 0 8px 40px -8px rgba(240, 211, 83, .55); transform: translateY(-2px); }

.btn--ghost {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
  background: rgba(161, 132, 204, .06);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--iris); background: rgba(161, 132, 204, .12); transform: translateY(-2px); }
.on-light .btn--ghost { color: var(--text-dark); box-shadow: inset 0 0 0 1px rgba(20,22,43,.25); background: transparent; }
.on-light .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--text-dark); background: rgba(20,22,43,.05); }

/* Housecall Pro's script injects its own .hcp-button styles (blue pill) —
   re-assert the design system on any .btn carrying the class. */
button.btn.hcp-button {
  background: rgba(161, 132, 204, .06) !important;
  color: var(--text) !important;
  border: 0 !important;
  border-radius: 10px !important;
  font-family: var(--font-mono) !important;
  font-size: var(--size-mono) !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  line-height: inherit !important;
  padding: 1rem 1.6rem !important;
  display: inline-flex !important;
}
button.btn--ghost.hcp-button { box-shadow: inset 0 0 0 1px var(--line) !important; }
button.btn--ghost.hcp-button:hover { box-shadow: inset 0 0 0 1px var(--iris) !important; background: rgba(161, 132, 204, .12) !important; }
button.btn--signal.hcp-button { background: var(--gold) !important; color: #221a08 !important; }
button.btn--signal.hcp-button:hover { background: var(--gold-bright) !important; box-shadow: 0 8px 40px -8px rgba(240, 211, 83, .55) !important; }

/* ---------- Top bar + nav ---------- */
.topbar {
  position: relative; z-index: 60;
  background: linear-gradient(90deg, var(--ink) 0%, var(--iris-deep) 55%, var(--ink) 100%);
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em;
}
.topbar__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .5rem;
}
.topbar__note { display: flex; align-items: center; gap: .7rem; color: rgba(233, 234, 244, .85); text-transform: uppercase; }
.topbar__note .morse { color: var(--gold); }
.topbar a { color: #fff; font-weight: 500; white-space: nowrap; }
.topbar a:hover { color: var(--gold); }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7, 10, 24, .72);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(161, 132, 204, .12);
  transition: background .4s, box-shadow .4s;
}
.nav.is-scrolled { background: rgba(7, 10, 24, .88); box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .65); }
/* signal-strength scroll progress */
.nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--brand));
  transform-origin: left;
  transform: scaleX(var(--scroll-progress, 0));
  pointer-events: none;
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 76px; }
.brand { display: flex; align-items: center; gap: .8rem; }
.brand__mark { width: auto; height: 46px; flex: none; }
.brand__text { display: grid; line-height: 1.1; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: .02em; color: #fff; }
.brand__tag { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); }

.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__links > li { position: relative; }
.nav__links a:not(.btn) {
  font-size: .95rem; font-weight: 500; color: var(--text);
  padding-block: .4rem;
  position: relative;
}
.nav__links > li > a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav__links > li > a:not(.btn):hover::after,
.nav__links > li > a[aria-current="page"]::after { transform: scaleX(1); }

.nav__phone { display: inline-flex; align-items: center; gap: .55rem; padding: .7rem 1.15rem; }
button.btn.nav__book.hcp-button { padding: .7rem 1.15rem !important; }
@media (max-width: 1280px) { .nav__book { display: none !important; } }

/* dropdown */
.nav__drop { position: relative; }
.nav__drop > button {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .95rem; font-weight: 500; padding-block: .4rem;
}
.nav__drop > button svg { width: 10px; height: 10px; transition: transform .3s; }
.nav__drop.is-open > button svg { transform: rotate(180deg); }
.drop {
  position: absolute; top: calc(100% + 14px); left: 50%;
  translate: -50% 0;
  min-width: 280px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .6rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.nav__drop.is-open .drop,
.nav__drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop a {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .8rem; border-radius: 9px;
  font-size: .92rem; color: var(--text);
}
.drop__item { position: relative; }
.drop__item > a .sub-arrow {
  margin-left: auto; width: 9px; height: 9px; opacity: .5; flex: none;
  transition: transform .25s, opacity .25s;
}
.drop__item:hover > a .sub-arrow, .drop__item:focus-within > a .sub-arrow { opacity: 1; transform: translateX(2px); color: var(--gold); }
.drop2 {
  position: absolute; left: calc(100% + 10px); top: -8px;
  min-width: 250px;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .6rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateX(6px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.drop2::before {
  content: ''; position: absolute; left: -12px; top: 0; bottom: 0; width: 12px;
}
.drop__item:hover .drop2, .drop__item:focus-within .drop2 {
  opacity: 1; visibility: visible; transform: translateX(0);
}
.drop--areas {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 .4rem; min-width: 460px;
}
.drop--areas .drop__all { grid-column: 1 / -1; }
.drop a:hover { background: rgba(161, 132, 204, .1); color: var(--gold); }
.drop a .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .7; flex: none; }
.drop a .dot--heat { background: var(--copper); }

/* mobile */
.nav__burger { display: none; width: 44px; height: 44px; position: relative; z-index: 70; }
.nav__burger span {
  position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform .4s var(--ease-out), opacity .3s, top .4s var(--ease-out);
}
.nav__burger span:nth-child(1) { top: 15px; }
.nav__burger span:nth-child(2) { top: 21px; }
.nav__burger span:nth-child(3) { top: 27px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: linear-gradient(160deg, var(--abyss) 0%, var(--ink) 100%);
  display: grid; align-content: safe center; gap: .4rem;
  padding: calc(var(--gutter) + 3rem) var(--gutter) var(--gutter);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__close {
  position: absolute; top: 1rem; right: 1.1rem;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
}
.mobile-menu__close:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.mobile-menu__close svg { width: 17px; height: 17px; }
.mobile-menu a {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  padding-block: .45rem;
  display: flex; align-items: baseline; gap: 1rem;
  transform: translateY(24px); opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s;
}
.mobile-menu.is-open a { transform: translateY(0); opacity: 1; }
.mobile-menu a small { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }
.mobile-menu a:hover { color: var(--gold); }
.mobile-menu__cta { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.mobile-menu__cta .btn { opacity: 0; transition: opacity .5s .25s; }
.mobile-menu.is-open .btn { opacity: 1; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(72vh, 760px);
  display: grid; align-items: end;
  overflow: clip;
  isolation: isolate;
}
.hero__gl, .hero__fallback {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
}
.hero__fallback {
  background:
    radial-gradient(120% 90% at 70% 0%, rgba(112, 76, 152, .5) 0%, transparent 55%),
    radial-gradient(100% 70% at 20% 100%, rgba(240, 211, 83, .10) 0%, transparent 50%),
    linear-gradient(180deg, var(--abyss-2), var(--abyss));
}
/* The crew photo replaces the WebGL water surface. Unlike the interior heroes,
   this composition puts its subject across the full width and the copy is
   bottom-anchored (.hero uses align-items: end), so the scrim is weighted to
   the bottom rather than the left. That keeps six faces visible and still
   gives the headline a solid ground to sit on. */
.hero__media {
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
  pointer-events: none;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,7,20,.78) 0%, rgba(10,7,20,.66) 30%, rgba(17,11,32,.80) 58%, rgba(10,7,20,.94) 82%, var(--abyss) 100%),
    linear-gradient(90deg, rgba(17,11,32,.50) 0%, rgba(17,11,32,.20) 45%, rgba(17,11,32,.12) 100%);
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero__media img { object-position: 58% 30%; }
  .hero__veil {
    background: linear-gradient(180deg, rgba(10,7,20,.70) 0%, rgba(17,11,32,.80) 40%, rgba(10,7,20,.94) 72%, var(--abyss) 100%);
  }
}
.hero__in {
  /* .container's auto inline margins make a grid item size to fit-content
     rather than stretch, so the homepage hero sat ~170px narrower than the
     nav. width:100% lets max-width do the work again. */
  width: 100%;
  padding-block: clamp(2.25rem, 4.5vh, 3.5rem) clamp(2.5rem, 5vh, 4rem);
  display: grid; gap: 2.2rem;
}
.hero__kicker { display: flex; align-items: center; gap: 1rem; }
.hero__copy { display: grid; gap: 1.4rem; }
.hero__display { display: block; color: #fff; text-wrap: balance; }
.hero__display em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px rgba(240, 211, 83, .9); }
.hero__sub {
  display: block;
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.55; letter-spacing: 0;
  color: var(--text); max-width: 52ch;
}
.hero__sub strong { color: var(--text); font-weight: 500; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: start; }
.hero__cta .or { font-family: var(--font-mono); font-size: .75rem; color: var(--text-muted); letter-spacing: .12em; text-transform: uppercase; padding-inline: .3rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.6rem;
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  font-family: var(--font-mono); font-size: var(--size-mono); letter-spacing: .05em;
  color: var(--text-muted);
}
.hero__meta b { color: #fff; font-weight: 500; }
.hero__meta .stars { color: var(--gold); letter-spacing: .18em; }

/* ---------- Ticker (trust marquee) ---------- */
.ticker {
  border-block: 1px solid rgba(61, 40, 84, .35);
  background: var(--gold);
  overflow: hidden; position: relative;
  padding-block: 1.05rem;
}
.ticker__track {
  display: flex; gap: 3.2rem; width: max-content;
  animation: ticker-scroll 36s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span {
  display: inline-flex; align-items: center; gap: 3.2rem;
  font-family: var(--font-mono); font-size: var(--size-mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--iris-deep);
  white-space: nowrap;
}
.ticker b { color: #2a1a3e; font-weight: 600; }
.ticker .sep { color: var(--brand); opacity: .8; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }

/* ---------- Services ---------- */
.section { padding-block: var(--section-pad); position: relative; }
.section--light { background: var(--porcelain); color: var(--text-dark); }
.section--light h2, .section--light h3 { color: var(--text-dark); }

.services__grid {
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(3, 1fr);
}
.svc {
  position: relative; border-radius: 18px; overflow: hidden;
  aspect-ratio: 3 / 3.8;
  display: flex; align-items: flex-end;
  background: var(--ink);
  transform: translateZ(0);
}
.svc__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter .6s;
  filter: saturate(.92);
}
.svc:hover .svc__img { transform: scale(1.055); filter: saturate(1.05); }
.svc::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(185deg, rgba(7,10,24,0) 30%, rgba(7,10,24,.38) 58%, rgba(7,10,24,.92) 100%);
  transition: background .5s;
}
.svc__body {
  position: relative; z-index: 2; padding: 1.6rem;
  display: grid; gap: .55rem; width: 100%;
}
.svc__label {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
}
.svc--water .svc__label { color: var(--gold); }
.svc--heat .svc__label { color: var(--copper-bright); }
.svc__label i { width: 22px; height: 1px; background: currentColor; opacity: .6; transition: width .45s var(--ease-out); }
.svc:hover .svc__label i { width: 44px; }
.svc h3 { color: #fff; font-size: 1.55rem; }
.svc p { font-size: .93rem; color: rgba(233, 234, 244, .78); line-height: 1.5; max-width: 34ch; }
.svc__go {
  position: absolute; top: 1.15rem; right: 1.15rem; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(7, 10, 24, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(233, 234, 244, .18);
  transition: background .35s, transform .45s var(--ease-spring), border-color .35s;
}
.svc__go svg { width: 15px; height: 15px; color: #fff; transition: transform .35s var(--ease-out); }
.svc:hover .svc__go { background: var(--aqua); border-color: var(--aqua); }
.svc--heat:hover .svc__go { background: var(--copper); border-color: var(--copper); }
.svc:hover .svc__go svg { color: var(--abyss); transform: rotate(45deg); }

/* ---------- Emergency band ---------- */
.sos-band {
  position: relative; overflow: clip;
  background: linear-gradient(120deg, #221540 0%, #3d2854 55%, #4a2f35 100%);
}
.sos-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 85% 50%, rgba(240, 211, 83, .2) 0%, transparent 60%);
}
.sos-band__in {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.sos-band h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); max-width: 22ch; color: #fff; }
.sos-band h2 em { font-style: normal; color: var(--gold); }
.sos-band__phone {
  display: grid; gap: .5rem; justify-items: start;
}
.sos-band__phone .phone-big {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  color: #fff; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 1rem;
}
.sos-band__phone .phone-big:hover { color: var(--gold); }
.sos-band__phone small {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-mono); font-size: .78rem; color: rgba(233,234,244,.7); letter-spacing: .14em; text-transform: uppercase;
}
.sos-band__phone small .morse { color: var(--gold); }

/* ---------- Process (pipe) ---------- */
.process { position: relative; }
.process__wrap { position: relative; display: grid; gap: 0; }
.process__pipe {
  position: absolute; left: 26px; top: 0; bottom: 0;
  width: 4px; border-radius: 4px;
  background: rgba(161, 132, 204, .15);
  overflow: hidden;
}
.process__pipe i {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--gold), var(--brand));
  transform-origin: top;
  transform: scaleY(var(--pipe-fill, 0));
}
.process__pipe .pipe-drop {
  position: absolute; left: 50%;
  top: calc(var(--pipe-fill, 0) * 100%);
  translate: -50% -50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px 3px rgba(240, 211, 83, .55);
}
.step {
  position: relative;
  display: grid; grid-template-columns: 56px 1fr; gap: 1.6rem;
  padding-block: clamp(1.6rem, 3.5vw, 2.6rem);
}
.step + .step { border-top: 1px dashed rgba(161, 132, 204, .14); }
.step__node {
  position: relative; z-index: 2;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink);
  border: 1px solid var(--line);
  transition: border-color .4s, box-shadow .4s;
}
.step__node svg { width: 22px; height: 22px; color: var(--gold); }
.step.is-lit .step__node { border-color: var(--gold); box-shadow: 0 0 24px -6px rgba(240, 211, 83, .5); }
.step__body { display: grid; gap: .5rem; max-width: 60ch; }
.step__num { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; color: var(--iris); text-transform: uppercase; }
.step h3 { font-size: 1.45rem; color: #fff; }
.step p { color: var(--text); }

/* ---------- Map section ---------- */
.areas { background: var(--abyss-2); overflow: clip; }
.areas__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.rimap { position: relative; aspect-ratio: .88; max-height: 640px; margin-inline: auto; width: 100%; }
.rimap canvas { width: 100%; height: 100%; display: block; }
.rimap__tip {
  position: absolute; pointer-events: none;
  background: var(--ink); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
  padding: .45rem .7rem; border-radius: 8px;
  transform: translate(-50%, -140%);
  opacity: 0; transition: opacity .25s;
  white-space: nowrap; color: var(--gold); text-transform: uppercase;
}
.rimap__tip.is-on { opacity: 1; }
.rimap__legend {
  position: absolute; left: 0; bottom: -.4rem;
  display: flex; gap: 1.4rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
}
.rimap__legend span { display: inline-flex; align-items: center; gap: .5rem; }
.rimap__legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.rimap__legend .hq i { background: var(--copper); }
.areas__list { display: grid; gap: .3rem; }
.area-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem .2rem;
  border-bottom: 1px solid rgba(161, 132, 204, .12);
  transition: padding .35s var(--ease-out), border-color .35s;
}
.area-link:hover { padding-left: .8rem; border-color: var(--gold); }
.area-link b { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: #fff; }
.area-link:hover b { color: var(--gold); }
.area-link span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.areas__note { margin-top: 1.4rem; font-size: .92rem; color: var(--text); max-width: 46ch; }

/* ---------- Reviews ---------- */
.reviews { overflow: clip; }
.reviews__rail { display: grid; gap: 1.2rem; }
.reviews__row { display: flex; gap: 1.2rem; width: max-content; }
.reviews__row--a { animation: rail-a 60s linear infinite; }
.reviews__row--b { animation: rail-b 74s linear infinite; }
.reviews:hover .reviews__row { animation-play-state: paused; }
@keyframes rail-a { to { transform: translateX(-50%); } }
@keyframes rail-b { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* Gold cards against the dark page: the review rail is the one block that gets
   to shout. Everything inside flips to the dark-on-light token pair, including
   the stars, which would otherwise be gold on gold and disappear. */
.review {
  width: clamp(300px, 34vw, 420px); flex: none;
  background: var(--gold);
  border: 1px solid rgba(28, 20, 43, .16);
  border-radius: 16px;
  padding: 1.6rem;
  display: grid; gap: .9rem; align-content: start;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .75);
}
.review__stars { color: var(--text-dark); font-size: 1.12rem; letter-spacing: .16em; line-height: 1; }
.review p { font-size: .95rem; line-height: 1.6; color: var(--text-dark); }
.review footer { display: flex; align-items: center; gap: .7rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dark-muted); }
.review footer i { width: 18px; height: 1px; background: var(--text-dark); opacity: .45; }
.reviews__cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.gbadge { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); letter-spacing: .05em; }
.gbadge b { color: #fff; font-size: 1.05rem; }

/* ---------- Heat spotlight ---------- */
.heat {
  position: relative; overflow: clip; isolation: isolate;
}
.heat__bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.6) saturate(1.05);
}
.heat::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7, 10, 24, .93) 0%, rgba(7, 10, 24, .55) 55%, rgba(7, 10, 24, .25) 100%);
}
.heat__in { display: grid; gap: 1.6rem; max-width: 620px; padding-block: clamp(5rem, 11vw, 9rem); }
.heat h2 { color: #fff; }
.heat p { color: rgba(233, 234, 244, .82); }
.heat__brands { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; margin-top: .6rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--copper-bright); }
.heat__brands span { display: inline-flex; align-items: center; gap: .6rem; }
.heat__brands i { width: 6px; height: 6px; border-radius: 50%; background: var(--copper); }

/* ---------- FAQ ---------- */
.faq__list { max-width: 820px; display: grid; gap: 0; }
.faq-item { border-bottom: 1px solid var(--line-light); }
.section:not(.section--light) .faq-item { border-color: rgba(161, 132, 204, .14); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.35rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.18rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-x {
  flex: none; position: relative; width: 14px; height: 14px; align-self: center;
}
.faq-item summary .faq-x::before, .faq-item summary .faq-x::after {
  content: ''; position: absolute; background: currentColor; border-radius: 2px;
  transition: transform .35s var(--ease-out);
}
.faq-item summary .faq-x::before { left: 0; right: 0; top: 6px; height: 2px; }
.faq-item summary .faq-x::after { top: 0; bottom: 0; left: 6px; width: 2px; }
.faq-item[open] summary .faq-x::after { transform: scaleY(0); }
.faq-item .faq-a { padding-bottom: 1.5rem; max-width: 62ch; color: var(--text-dark-muted); }
.section:not(.section--light) .faq-item .faq-a { color: var(--text); }
.faq-item summary:hover { color: var(--brand); }
.section:not(.section--light) .faq-item summary:hover { color: var(--aqua); }

/* ---------- Final CTA ---------- */
.final-cta { text-align: center; position: relative; overflow: clip; }
.final-cta .h-section { max-width: 20ch; margin-inline: auto; }
.final-cta__in { display: grid; gap: 1.8rem; justify-items: center; position: relative; }
.final-cta .morse { color: var(--gold); }
.final-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.final-cta__ring {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 900px; height: 900px; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112, 76, 152, .25) 0%, transparent 60%);
  pointer-events: none;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid rgba(161, 132, 204, .14);
  background: var(--abyss-2);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  font-size: .95rem;
}
.footer__grid {
  display: grid; gap: 3rem;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  margin-bottom: 3.5rem;
}
.footer h4 { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--iris); margin-bottom: 1.1rem; }
.footer ul { display: grid; gap: .55rem; }
.footer a:hover { color: var(--aqua); }
.footer__brand { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.footer__brand p { color: var(--text); font-size: .92rem; max-width: 34ch; }
.footer__nap { display: grid; gap: .35rem; color: var(--text-muted); font-style: normal; }
.footer__nap a { color: var(--text); font-weight: 500; }
/* Hours moved into the sitewide NAP so every page carries name, address, phone
   and hours rather than only the 15 pages that spelled them out in body copy. */
.footer__hours { font-size: .82rem; line-height: 1.45; margin-top: .15rem; }
/* ---------- Footer partner block (Viessmann ViPRO) ---------- */
.footer__partners {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.6rem 2.4rem;
  padding: 1.8rem 0;
  border-top: 1px solid rgba(161, 132, 204, .12);
}
.footer__partners-copy { max-width: 46ch; display: grid; gap: .5rem; }
.footer__partners-copy h4 { margin-bottom: 0; }
.footer__partners-copy p { color: var(--text); font-size: .9rem; line-height: 1.55; }
.footer__partners-copy a { color: var(--gold); }
.partner-chip {
  display: grid; place-items: center; flex: none;
  background: #fff; border-radius: 14px;
  padding: .9rem 1.4rem;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7);
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.partner-chip img { width: 172px; height: auto; }
.partner-chip:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -16px rgba(240, 211, 83, .45); }
@media (max-width: 640px) { .footer__partners { justify-content: flex-start; } }

.footer__base {
  border-top: 1px solid rgba(161, 132, 204, .12);
  padding-top: 1.6rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--text-muted);
}
.footer__base .morse { color: var(--iris); }

/* ---------- Interior pages ---------- */
.page-hero {
  position: relative; overflow: clip;
  /* Top padding trimmed (was clamp(5rem,10vw,8rem), up to 128px) so the phone
     number and CTA row clear the fold on a laptop. */
  padding-block: clamp(3rem, 6vw, 4.75rem) clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(90% 100% at 85% 0%, rgba(112, 76, 152, .38) 0%, transparent 55%),
    radial-gradient(60% 80% at 10% 100%, rgba(240, 211, 83, .06) 0%, transparent 55%),
    var(--abyss-2);
}
.page-hero--heat {
  background:
    radial-gradient(90% 100% at 85% 0%, rgba(208, 138, 84, .28) 0%, transparent 55%),
    radial-gradient(60% 80% at 10% 100%, rgba(112, 76, 152, .28) 0%, transparent 55%),
    var(--abyss-2);
}
/* Hero spans the full container, matching the nav's logo-to-button width.
   The headline then sets on one line instead of two, which lifts the phone
   number and CTAs above the fold. Prose stays readable because .hero__sub
   and .lede keep their own ch-based caps. */
.page-hero__in { display: grid; gap: 1.05rem; position: relative; z-index: 1; }
/* 56ch pushed the longest ledes to three lines and dropped one page's CTAs
   below the fold. 62ch stays inside the 65-75 character comfort range and
   holds every hero to two. */
.page-hero__in .lede { max-width: 62ch; }

/* ---------- Location hero photography ----------
   The photo sits behind the copy and bleeds off the right edge. Two scrims do
   the work: a horizontal one so the left column stays readable over whatever
   the photo is doing, and a vertical one to seat the hero into the offer band
   below. Contrast is verified against the darkest scrim value, not the photo. */
.page-hero--photo { background: var(--abyss-2); }
.page-hero__media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
}
.page-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 72% center;
}
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--abyss-2) 0%, rgba(17,11,32,.95) 34%, rgba(17,11,32,.86) 55%, rgba(17,11,32,.70) 78%, rgba(17,11,32,.34) 100%),
    linear-gradient(180deg, rgba(10,7,20,.55) 0%, rgba(10,7,20,0) 30%, rgba(10,7,20,.35) 78%, var(--abyss-2) 100%);
}
@media (max-width: 900px) {
  /* On a narrow screen the copy spans the full width, so the photo becomes a
     texture behind it rather than a subject beside it. */
  .page-hero__media img { object-position: 68% center; }
  .page-hero__media::after {
    background:
      linear-gradient(180deg, rgba(10,7,20,.86) 0%, rgba(17,11,32,.92) 45%, var(--abyss-2) 100%);
  }
}
.page-hero__in > * {
  opacity: 0; transform: translateY(22px);
  animation: ph-in .85s var(--ease-out) forwards;
}
.page-hero__in > *:nth-child(2) { animation-delay: .09s; }
.page-hero__in > *:nth-child(3) { animation-delay: .18s; }
.page-hero__in > *:nth-child(4) { animation-delay: .27s; }
.page-hero__in > *:nth-child(5) { animation-delay: .36s; }
@keyframes ph-in { to { opacity: 1; transform: none; } }
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); color: #fff; text-wrap: balance; }
/* Keyword-H1 pattern (spec §11): the brand line is the visual headline
   (.hero__display); the <h1> carries the keyword at kicker scale beneath it.
   Google reads the tag, not the font size — nothing shrinks visually. */
.page-hero .hero__display {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.04; letter-spacing: -.01em;
  color: #fff; text-wrap: balance;
}
.page-hero h1.hero__h1, .hero h1.hero__h1 {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(.85rem, 1.2vw, .95rem);
  letter-spacing: .18em; text-transform: uppercase;
  line-height: 1.5; color: var(--iris); text-wrap: balance;
}
.page-hero__in > *:nth-child(6) { animation-delay: .40s; }
.page-hero__in > *:nth-child(7) { animation-delay: .48s; }
.page-hero__in > *:nth-child(8) { animation-delay: .56s; }
.page-hero__in > *:nth-child(9) { animation-delay: .62s; }

/* ---------- proof-bar (spec §2.1) ---------- */
/* Google "G" inside the proof bar: the rating is Google's, so it should say so
   visually rather than only in words. Sized to the cap height of the line. */
.proof-g { display: inline-flex; align-items: center; gap: .42rem; }
.proof-g svg { width: .95em; height: .95em; flex: none; display: block; }
.proof-bar {
  display: flex; flex-wrap: wrap; gap: .35rem .7rem; align-items: center;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em;
  /* Near-white rather than the muted lavender: this line now sits over hero
     photography, and on the night-shot service heroes the muted tone failed
     AA against porch light and headlights. Whitening the text fixes it without
     darkening the photograph, which the alternative (a heavier scrim) would. */
  text-transform: uppercase; color: var(--text);
}
.proof-bar b { color: var(--gold); font-weight: 500; }
.proof-bar .sep { color: var(--iris-deep); }

/* ---------- hero phone (spec §3.1) ---------- */
.hero-phone-wrap { display: grid; gap: .4rem; justify-items: start; margin-top: .3rem; }
.hero-phone {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  color: #fff; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: .8rem;
}
.hero-phone svg { width: .62em; height: .62em; color: var(--gold); flex: none; }
.hero-phone:hover { color: var(--gold); }
.hero-phone__sub {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
.hero-phone__sub .morse { color: var(--gold); }

/* ---------- offer-band (spec §2.2) ---------- */
.offer-band {
  background: linear-gradient(90deg, var(--ink) 0%, var(--iris-deep) 55%, var(--ink) 100%);
  border-block: 1px solid var(--line);
}
.offer-band__in { display: grid; grid-template-columns: repeat(3, 1fr); }
.offer {
  display: grid; gap: .3rem; align-content: start; text-align: left;
  padding: 1.15rem 1.5rem;
  border-left: 1px solid var(--line);
  transition: background .3s;
}
.offer-band__in .offer:first-child { border-left: 0; }
.offer b { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: #fff; line-height: 1.25; }
.offer > span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.offer:hover { background: rgba(240, 211, 83, .07); }
/* The HCP-button overrides that used to live here are gone with the tile:
   every offer cell is a plain link now, so there is no injected style to fight. */
@media (max-width: 900px) {
  .offer-band__in { grid-template-columns: 1fr; }
  .offer { border-left: 0; border-top: 1px solid var(--line); }
  .offer-band__in .offer:first-child { border-top: 0; }
}

/* ---------- trust-strip (spec §2.3) ---------- */
.trust-strip {
  border-top: 1px solid rgba(161, 132, 204, .14);
  background: var(--abyss-2);
  padding-block: 1.25rem;
}
.trust-strip__in { display: flex; flex-wrap: wrap; gap: .7rem 1.9rem; align-items: center; justify-content: center; }
.tbadge {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-muted); opacity: .85;
  transition: color .3s, opacity .3s;
}
.tbadge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: .55; }
.tbadge:hover { color: var(--gold); opacity: 1; }
/* The BBB badge is the one badge in the row that links out. It keeps the row's
   look rather than reading as body-copy link, with a faint underline so it is
   discoverable as a link and not colour alone. */
.tbadge--link { text-decoration: none; border-bottom: 1px solid rgba(240, 200, 96, .35); padding-bottom: 1px; }
.tbadge--link:hover { border-bottom-color: var(--gold); }
.tbadge--link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ---------- pricing-policy (spec §2.5) ---------- */
.pricing-policy {
  margin-top: 2.4rem; padding: 1.3rem 1.6rem;
  border-left: 3px solid var(--gold);
  background: rgba(240, 211, 83, .05);
  border-radius: 0 14px 14px 0;
  display: grid; gap: .65rem; max-width: 66ch;
}
.pricing-policy h3 { font-size: 1.08rem; }
.pricing-policy ul { display: grid; gap: .45rem; }
.pricing-policy li { position: relative; padding-left: 1.5rem; color: var(--text); font-size: .96rem; }
.pricing-policy li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 4px; border-radius: 4px; background: var(--gold);
}
.financing-note { font-size: .88rem; color: var(--text-muted); }
.financing-note a { color: var(--gold); }

/* ---------- Coupons ---------- */
.coupon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 1.6rem; }
.coupon {
  display: grid; grid-template-columns: 150px 1fr;
  border: 2px dashed var(--gold); border-radius: 18px;
  background: linear-gradient(180deg, rgba(240,211,83,.07), rgba(240,211,83,.02));
  overflow: hidden;
}
.coupon__stub {
  display: grid; align-content: center; justify-items: center; gap: .5rem;
  padding: 1.6rem 1rem; text-align: center;
  background: rgba(240, 211, 83, .12);
  border-right: 2px dashed var(--gold);
}
.coupon__amount { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; color: var(--gold); line-height: 1; }
.coupon__tag { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.coupon__body { padding: 1.7rem; display: grid; gap: .8rem; align-content: start; }
.coupon__title { font-size: 1.4rem; color: #fff; }
.coupon__body p { color: var(--text); font-size: .95rem; }
.coupon__expiry { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.coupon__expiry strong { color: var(--gold); }
.coupon__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .2rem; }
.coupon__terms { font-size: .78rem; color: var(--text-muted); opacity: .8; line-height: 1.5; }
@media (max-width: 560px) {
  .coupon { grid-template-columns: 1fr; }
  .coupon__stub { border-right: 0; border-bottom: 2px dashed var(--gold); padding: 1.1rem; }
}
@media print {
  .topbar, .nav, .mobile-menu, .callfab, .offer-band, .trust-strip,
  .footer, .final-cta, .lead-grid, .proof-bar, .hero-phone-wrap { display: none !important; }
  body { background: #fff; color: #000; }
  .coupon { border-color: #000; break-inside: avoid; }
  .coupon__amount, .coupon__expiry strong { color: #000; }
  .coupon__title, .coupon__body p, .coupon__terms { color: #000; }
  .coupon__stub { background: #f2f2f2; border-color: #000; }
  .coupon__actions { display: none; }
}

/* ---------- Real-work photo gallery ---------- */
.work-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.wg__item {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink);
  transition: transform .35s var(--ease-out), border-color .35s;
}
.wg__item:hover { transform: translateY(-4px); border-color: var(--gold); }
.wg__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.wg__item figcaption {
  padding: .85rem 1.1rem;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
}
.on-light .wg__item { background: #fff; border-color: var(--line-light); }
.on-light .wg__item figcaption { color: var(--text-dark-muted); }
@media (max-width: 900px) { .work-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work-gallery { grid-template-columns: 1fr; } }

/* ---------- Comparison table (in prose) ---------- */
.prose .cmp-wrap { overflow-x: auto; margin: 1.4rem 0; border: 1px solid var(--line); border-radius: 12px; }
.prose table.cmp { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 540px; }
.prose table.cmp th, .prose table.cmp td { text-align: left; padding: .8rem 1.05rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose table.cmp thead th { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); background: rgba(240, 211, 83, .05); }
.prose table.cmp tbody th { color: var(--text); font-weight: 600; font-family: var(--font-body); white-space: nowrap; }
.prose table.cmp td { color: var(--text); }
.prose table.cmp tbody tr:last-child th, .prose table.cmp tbody tr:last-child td { border-bottom: 0; }

/* ---------- Contrast "vs" block (why-sos) ---------- */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.vs-card { border: 1px solid var(--line-light); border-radius: 16px; padding: 1.7rem; background: #fff; }
.on-light .vs-card { box-shadow: 0 24px 60px -34px rgba(20, 22, 43, .22); }
.vs-card h3 { font-size: 1.25rem; margin-bottom: 1.1rem; color: var(--text-dark); }
.vs-card ul { display: grid; gap: .7rem; }
.vs-card li { position: relative; padding-left: 1.9rem; color: var(--text-dark-muted); line-height: 1.5; }
.vs-card li::before { position: absolute; left: 0; top: -.05em; font-weight: 700; }
.vs-card--them li::before { content: '\2715'; color: #b3402f; }
.vs-card--us { border-color: var(--brand); background: linear-gradient(180deg, rgba(112,76,152,.05), #fff); }
.vs-card--us li::before { content: '\2713'; color: var(--brand); }
@media (max-width: 640px) { .vs-grid { grid-template-columns: 1fr; } }

/* ---------- Safety banner (gas lines) ---------- */
.safety-banner {
  display: flex; gap: .9rem; align-items: flex-start;
  margin-top: 1.4rem; padding: 1rem 1.3rem;
  border: 1px solid var(--copper); border-left-width: 3px;
  border-radius: 12px; background: rgba(208, 138, 84, .1);
  max-width: 60ch;
}
.safety-banner__icon { color: var(--copper-bright); font-size: 1.2rem; line-height: 1.4; flex: none; }
.safety-banner p { color: var(--text); font-size: .95rem; line-height: 1.5; }

/* ---------- SAP NAP block ---------- */
.sap-nap {
  display: inline-grid; gap: .2rem; margin-top: 1.2rem;
  padding: 1rem 1.4rem; border: 1px solid var(--line);
  border-radius: 12px; font-size: .92rem; justify-self: start;
}

/* ---------- inline lead form (spec §2.4) ---------- */
.lead-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 6vw, 5rem); align-items: start;
}
@media (max-width: 900px) { .lead-grid { grid-template-columns: 1fr; } }
.form__fallback {
  display: none;
  padding: 1.4rem; border-radius: 12px;
  border: 1px solid var(--copper);
  background: rgba(208, 138, 84, .08);
  color: var(--text);
}
.form.is-failed .form__fallback { display: block; }
.form.is-failed .form__hideonsent { display: none; }
.crumbs {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted);
}
.crumbs a:hover { color: var(--aqua); }
.crumbs .sep { color: var(--iris); }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .15rem; align-items: start; }
/* Each CTA carries a byline saying what happens after the press: one gets a
   person now, the other is asynchronous. Stack them so the note belongs to its
   button rather than floating under the pair. */
.cta-opt { display: grid; gap: .4rem; justify-items: start; }
.cta-opt__note { font-size: .82rem; line-height: 1.35; color: var(--text-muted); padding-inline: .15rem; }
@media (max-width: 560px) {
  .page-hero__cta, .hero__cta { flex-direction: column; align-items: stretch; }
  .cta-opt { width: 100%; justify-items: stretch; }
  .cta-opt .btn { justify-content: center; }
  .cta-opt__note { text-align: center; }
}

.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.prose { display: grid; gap: 1.15rem; max-width: 66ch; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 1.2rem; }
.prose h3 { font-size: 1.25rem; margin-top: .8rem; }
.prose p, .prose li { color: var(--text); }
.section--light .prose p, .section--light .prose li { color: var(--text-dark-muted); }
.prose ul { display: grid; gap: .6rem; }
.prose ul li { position: relative; padding-left: 1.6rem; }
.prose ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 8px; height: 4px; border-radius: 4px; background: var(--gold);
}
.prose--heat ul li::before { background: var(--copper); }
.prose strong { color: inherit; font-weight: 600; }
.section--light .prose strong { color: var(--text-dark); }

.sidecard {
  position: sticky; top: 106px;
  display: grid; gap: 1.1rem;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.8rem;
}
.section--light .sidecard { background: #fff; border-color: var(--line-light); box-shadow: 0 24px 60px -30px rgba(20, 22, 43, .25); }
.sidecard h3 { font-size: 1.3rem; }
.sidecard p { font-size: .93rem; color: var(--text); }
.section--light .sidecard p { color: var(--text-dark-muted); }
.sidecard .phone-line {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
  color: var(--gold);
}
.section--light .sidecard .phone-line { color: var(--brand); }
.sidecard ul { display: grid; gap: .5rem; font-size: .88rem; color: var(--text-muted); }
.section--light .sidecard ul { color: var(--text-dark-muted); }
.sidecard ul li { display: flex; gap: .6rem; align-items: baseline; }
.sidecard ul li::before { content: '···'; color: var(--gold); letter-spacing: .1em; font-family: var(--font-mono); }

.svc-figure { border-radius: 18px; overflow: hidden; position: relative; }
.svc-figure img { width: 100%; height: 100%; object-fit: cover; }

.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.related a {
  display: grid; gap: .5rem;
  padding: 1.4rem; border-radius: 14px;
  background: var(--ink); border: 1px solid var(--line);
  transition: transform .35s var(--ease-out), border-color .35s;
}
.related a:hover { transform: translateY(-4px); border-color: var(--gold); }
.related b { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #fff; }
.related span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* area cards on hub */
.area-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.area-card {
  display: grid; gap: .6rem; align-content: start;
  background: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.6rem;
  transition: transform .35s var(--ease-out), border-color .35s;
}
.area-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.area-card b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: #fff; }
.area-card p { font-size: .9rem; color: var(--text-muted); }
.area-card span { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: .4rem; }

/* contact form */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }
/* Dark-form rule (spec decision 2): fields sit at a LIGHTER surface than
   their container, with a visible 1px border at rest — never border-on-focus
   only. Labels always above the field, placeholders at --text-muted minimum. */
.field input, .field select, .field textarea {
  font: inherit; color: var(--text);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .85rem 1rem;
  transition: border-color .3s, background .3s;
}
.field ::placeholder { color: var(--text-muted); opacity: 1; }
/* Keep the gold ring. An earlier `outline: none` here outranked the global
   :focus-visible rule (0-2-1 vs 0-1-0), so keyboard users got no focus
   indicator on the lead form at all. Mouse focus still gets the quieter
   border+tint treatment; only keyboard focus draws the ring. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold); background: rgba(240, 211, 83, .05);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23f0d353' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.form__note { font-size: .82rem; color: var(--text-muted); }
.form__success {
  display: none;
  padding: 1.4rem; border-radius: 12px;
  border: 1px solid var(--gold);
  background: rgba(240, 211, 83, .07);
  color: var(--text);
}
.form.is-sent .form__success { display: block; }
.form.is-sent .form__hideonsent { display: none; }

/* ---------- Mobile sticky call button ---------- */
.callfab {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 55;
  display: none; gap: .6rem;
  opacity: 0; translate: 0 18px; pointer-events: none;
  transition: opacity .4s var(--ease-out), translate .4s var(--ease-out);
}
.callfab .btn {
  flex: 1; justify-content: center; padding-inline: 1rem;
  box-shadow: 0 18px 44px -12px rgba(240, 211, 83, .5), 0 4px 16px rgba(0, 0, 0, .4);
}
/* spec §2.8: the call button is visually dominant, not equal weight */
.callfab .callfab__call { flex: 1.9; font-size: .9rem; }
.callfab button.btn.hcp-button {
  flex: 1;
  background: var(--ink-2) !important;
  box-shadow: inset 0 0 0 1px var(--iris), 0 4px 16px rgba(0, 0, 0, .4) !important;
}
/* Housecall Pro injects `button.hcp-button { outline: 0 }` at runtime, which
   stripped the focus ring from the primary booking CTA on every page.
   !important is the only way to win against an injected inline stylesheet. */
button.hcp-button:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px !important;
}
.callfab.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }
@media (max-width: 900px) {
  html.js .callfab { display: flex; }
  /* The bar is fixed, so the last rows of the footer sat underneath it and
     could not be tapped. Reserve its height (56px) plus its 1rem inset. */
  html.js body { padding-bottom: calc(56px + 2rem); }

  /* Housecall Pro's chat loader appends #proChatIframeContainer with inline
     styles: bottom:0, right:0, width:110px, z-index:1200. That lands it right
     on top of the sticky call bar, covering the Request button. Lift it clear
     on mobile. !important is required because the widget writes the inline
     style attribute on load, on resize, and on every open/close.

     The [style*="width:110px"] test matches the collapsed bubble only. When
     the chat opens, the widget rewrites width to 100% (or 400px) and takes
     height:100vh, so this rule stops applying and the panel fills the screen
     as intended rather than being pushed up and clipped. */
  #proChatIframeContainer[style*="width:110px"] { bottom: 5.5rem !important; }

  /* BBB seal, same story on the other side: #bbb-badge is position:fixed,
     z-index:1000, bottom-left, so it lands on the sticky call bar. Lift it to
     match the chat bubble's height so the two sit level. */
  #bbb-badge { bottom: 5.5rem !important; }
}

/* --- BBB seal: desktop-only switch ---
   The seal, the chat bubble and the sticky call bar all want the bottom of a
   phone screen. If three is too many, uncomment this to keep the seal on
   desktop only. Nothing else needs changing. */
/* @media (max-width: 900px) { #bbb-badge { display: none !important; } } */

/* ---------- Reveal animations (gated on .js so no-JS visitors see everything) ----------
   Spec §1.7: reveal must never clip content. Smaller travel + main.js marks
   anything already inside the viewport (or missed by the observer) as in. */
html.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
html.js .rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; }
.rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; }
.rv-d4 { transition-delay: .32s; }

/* char-split hero headline */
.split-chars .ch {
  display: inline-block;
  opacity: 0; transform: translateY(.55em) rotate(2deg);
  animation: ch-in .8s var(--ease-out) forwards;
  animation-delay: calc(var(--ci) * 28ms + .15s);
}
@keyframes ch-in { to { opacity: 1; transform: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .areas__grid { grid-template-columns: 1fr; }
  .rimap { max-width: 520px; }
  .related, .area-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .split { grid-template-columns: 1fr; }
  .sidecard { position: static; }
}
@media (max-width: 640px) {
  .services__grid { grid-template-columns: 1fr; }
  .svc { aspect-ratio: 3 / 3.4; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .related, .area-cards { grid-template-columns: 1fr; }
  .topbar__note span.hide-s { display: none; }
  .hero__meta { gap: .9rem 1.6rem; }
}

/* ---------- Mobile hero density (client feedback) ----------
   On a phone the top of a service page spent most of the first screen on
   chrome: a full breadcrumb trail, then an eyebrow, then the headline. The
   breadcrumb shrinks and tightens, the eyebrow goes (the H1 says the same
   thing one line later), and the one thing worth tapping gets bigger. */
@media (max-width: 640px) {
  .topbar__in a[href^="tel:"] { font-size: .92rem; letter-spacing: .04em; }
  .crumbs {
    font-size: .62rem; gap: .3rem; letter-spacing: .06em;
    margin-bottom: -.2rem;
  }
  .page-hero__in > .eyebrow { display: none; }
}

/* ---------- Touch targets (mobile) ----------
   Footer and top-bar links rendered ~19-20px tall. They cleared WCAG 2.2
   SC 2.5.8 on the spacing exemption, but sat well under the 44px comfort
   target, and the top-bar number is the only call action above the fold on a
   short phone. Grow the hit area without changing the visual type or rhythm:
   the padding absorbs the old list gap, so column height barely moves. */
@media (max-width: 900px) {
  .footer ul { gap: 0; }
  .footer ul a,
  .footer__nap a {
    display: flex; align-items: center;
    min-height: 44px;
  }
  .topbar__in a[href^="tel:"] {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-inline: .25rem;
  }
  .topbar { padding-block: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .split-chars .ch { opacity: 1; transform: none; animation: none; }
  .ticker__track, .reviews__row { animation: none; }
  .reviews__row { flex-wrap: wrap; width: auto; }
  .hero__gl { display: none; }
}