/* ============ StormForce Pressure Washing — v3 ============
   Brand-derived scheme: their logo is charcoal + silver storm emblem w/ lightning.
   Palette: layered storm blues · electric cyan (lightning/water) · storm violet ·
   metallic silver. Type: Poppins / Open Sans. Bento structure, storm motion. */

:root {
  /* layered backgrounds — each section sits on its own tone (deepened so text pops) */
  --bg-deep: #070F1C;
  --bg-storm: #0A1628;
  --bg-steel: #0F1F38;
  --bg-foot: #050C17;
  --card: #12223D;
  --card-hi: #1A2F52;
  /* the three brand hues */
  --cyan: #38BDF8;
  --cyan-hi: #7DD3FC;
  --violet: #818CF8;
  --violet-deep: #6366F1;
  /* metal + neutrals (brightened so copy pops on the deep grounds) */
  --silver-hi: #EEF5FC;
  --silver: #BCCDE2;
  --ink: #F4F8FD;
  --muted: #B0C0D6;
  --line: rgba(148, 190, 233, 0.18);
  --danger: #F87171;
  --r-lg: 22px;
  --r-md: 14px;
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg-deep);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is mandatory — width/height attributes are presentational hints that
   otherwise force the intrinsic height and vertically stretch the image */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.14; text-wrap: balance; }
h1 { font-weight: 700; }
h2 { font-size: clamp(27px, 3.8vw, 40px); font-weight: 600; letter-spacing: -0.01em; color: #fff; }
h3 { font-size: 18.5px; font-weight: 600; }
.cta-band h2 { color: #06121F; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 13px;
}
.eyebrow.light { color: var(--cyan); }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 64px); }
.section-head { max-width: 660px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-sub { color: rgba(240, 246, 253, 0.82); margin-top: 12px; }

/* Diagonal section seams — storm energy between tones */
.slant { height: clamp(42px, 6vw, 84px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px; border-radius: 12px; border: 2px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden; will-change: transform;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.22s var(--ease), box-shadow 0.18s var(--ease);
}
.btn::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); pointer-events: none;
  transition: left 0.5s var(--ease);
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: scale(1.03); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; }
.btn-cyan {
  background: linear-gradient(120deg, var(--cyan), #4FC7FF); color: #06121F;
  box-shadow: 0 12px 30px -12px rgba(56, 189, 248, 0.65);
}
.btn-cyan:hover { background: linear-gradient(120deg, var(--cyan-hi), var(--cyan)); }
.btn-ghost { border-color: rgba(175, 194, 217, 0.45); color: var(--ink); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan-hi); }
.btn-outline { border-color: rgba(148, 190, 233, 0.4); color: var(--ink); }
.btn-outline:hover { border-color: var(--cyan); color: var(--cyan-hi); }
.btn-white { background: #fff; color: #0A1424; }
.btn-white:hover { background: var(--silver-hi); }
.btn-wide { width: 100%; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; gap: 26px;
  padding: 14px clamp(18px, 4vw, 44px);
  color: #fff;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.nav.scrolled {
  background: rgba(8, 15, 28, 0.94);
  box-shadow: 0 1px 0 var(--line), 0 12px 30px -18px rgba(0, 0, 0, 0.85);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand-bolt {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(140deg, var(--bg-steel), #0B1830);
  border: 1px solid rgba(148, 190, 233, 0.35);
  display: grid; place-items: center;
}
.brand-bolt svg { width: 20px; height: 20px; stroke: var(--cyan); fill: none; stroke-width: 2.2; filter: drop-shadow(0 0 5px rgba(56, 189, 248, 0.7)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.02; }
.brand-text strong {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.05em; font-size: 16.5px;
  background: linear-gradient(100deg, var(--silver-hi), var(--silver) 55%, var(--silver-hi));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-text em { font-style: normal; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; color: var(--silver); }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { text-decoration: none; font-family: var(--font-display); font-weight: 500; font-size: 14px; opacity: 0.92; }
.nav-links a:hover { opacity: 1; color: var(--cyan-hi); }
.nav-links .nav-cta {
  background: linear-gradient(120deg, var(--cyan), #4FC7FF); color: #06121F;
  padding: 9px 17px; border-radius: 10px; font-weight: 600;
}
.nav-links .nav-cta:hover { background: linear-gradient(120deg, var(--cyan-hi), var(--cyan)); color: #06121F; }
.nav-phone { font-family: var(--font-display); font-weight: 600; font-size: 14.5px; text-decoration: none; font-variant-numeric: tabular-nums; }
.nav-burger { display: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1000px 620px at 80% -12%, rgba(99, 102, 241, 0.42), transparent 65%),
    radial-gradient(900px 560px at -8% 110%, rgba(56, 189, 248, 0.26), transparent 60%),
    var(--bg-deep);
}
.hero-glow { position: absolute; inset: 0; pointer-events: none; }
.hero-glow::before {
  content: ""; position: absolute; top: -22%; right: -8%; width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.2), transparent 60%);
  animation: glowDrift 16s ease-in-out infinite alternate;
}
.hero-glow::after {
  content: ""; position: absolute; bottom: -28%; left: -10%; width: 48vw; height: 48vw;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.16), transparent 60%);
  animation: glowDrift 21s ease-in-out infinite alternate-reverse;
}
@keyframes glowDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-5%, 4%, 0) scale(1.08); }
}
/* Ambient rain — brand weather, transform-only */
.hero-rain { position: absolute; inset: -20% 0; pointer-events: none; opacity: 0.5; }
.hero-rain::before, .hero-rain::after {
  content: ""; position: absolute; inset: 0; height: 200%;
  background-image: repeating-linear-gradient(
    112deg,
    transparent 0 26px,
    rgba(125, 211, 252, 0.055) 26px 27.5px,
    transparent 27.5px 60px
  );
  animation: rainFall 7s linear infinite;
}
.hero-rain::after {
  background-image: repeating-linear-gradient(
    108deg,
    transparent 0 44px,
    rgba(148, 190, 233, 0.04) 44px 45.5px,
    transparent 45.5px 90px
  );
  animation-duration: 11s;
}
@keyframes rainFall { to { transform: translate3d(-6%, 46%, 0); } }

.hero-bento {
  position: relative; z-index: 2;
  display: grid; gap: 16px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(150px, auto);
  padding-block: 118px 84px;
}
.hero-copy { grid-column: 1 / 8; grid-row: 1 / 3; align-self: center; padding-right: clamp(0px, 2vw, 28px); }
.hero h1 { font-size: clamp(34px, 4.6vw, 58px); letter-spacing: -0.02em; margin-bottom: 16px; perspective: 700px; }
/* Metallic silver shimmer — matches their silver logo */
.hero h1 .shine {
  background: linear-gradient(100deg, var(--silver) 0%, #FFFFFF 28%, var(--silver) 52%, var(--silver-hi) 78%, var(--silver) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 5.5s var(--ease) infinite;
}
@keyframes shimmer { 0% { background-position: 130% 0; } 55%, 100% { background-position: -70% 0; } }
/* Split-headline entrance (chars injected by JS) */
.hero h1 .word { display: inline-block; white-space: nowrap; }
.hero h1 .ch { display: inline-block; will-change: transform; }
.split-in .ch:not(.shine) { opacity: 0; transform: translateY(22px) rotateX(-40deg); animation: charIn 0.6s var(--ease) forwards; animation-delay: calc(var(--i) * 18ms); }
@keyframes charIn { to { opacity: 1; transform: none; } }
.hero-sub { font-size: clamp(15.5px, 1.6vw, 18px); max-width: 50ch; opacity: 0.9; margin-bottom: 26px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-tile {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  will-change: transform;
}
.hero-tile:hover {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 30px 62px -22px rgba(56, 189, 248, 0.4);
}
.hero-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.45s var(--ease);
}
.hero-tile:hover img { transform: scale(1.07); }
.tile-caption {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  background: rgba(7, 16, 32, 0.82); color: #fff; border: 1px solid rgba(148, 190, 233, 0.25);
  font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  padding: 7px 14px; border-radius: 999px;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.hero-tile:hover .tile-caption { background: var(--cyan); border-color: var(--cyan); color: #06121F; }
.ht-house { grid-column: 8 / 13; grid-row: 1 / 3; min-height: 320px; }
.ht-rating { grid-column: 1 / 4; }
.ht-prices { grid-column: 4 / 8; }
.ht-action { grid-column: 8 / 13; min-height: 170px; }
.ht-pad { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ht-rating b {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1; font-variant-numeric: tabular-nums; color: #fff;
}
.ht-rating b i { font-style: normal; color: var(--cyan); font-size: 0.72em; text-shadow: 0 0 14px rgba(56, 189, 248, 0.8); }
.ht-rating span { font-size: 13.5px; opacity: 0.8; }
.ht-prices h3 { font-size: 17px; }
.tile-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; opacity: 0.94; }
.tile-list li { display: flex; align-items: center; gap: 9px; }
.tile-list li b { margin-left: auto; font-family: var(--font-display); color: var(--cyan-hi); font-variant-numeric: tabular-nums; }
.tile-list svg { width: 14px; height: 14px; flex: none; stroke: var(--violet); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tile-link {
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--cyan); text-decoration: none; margin-top: 2px;
}
.tile-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Reveal (directional variants) ---------- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
[data-reveal="left"] { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].in { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: 0.07s; }
[data-delay="2"] { transition-delay: 0.14s; }
[data-delay="3"] { transition-delay: 0.21s; }
[data-delay="4"] { transition-delay: 0.28s; }

/* ---------- Services (storm tone) ---------- */
.services {
  padding: 20px 0 90px;
  background:
    radial-gradient(900px 480px at 50% 0%, rgba(56, 189, 248, 0.18), transparent 70%), radial-gradient(700px 500px at 100% 100%, rgba(99, 102, 241, 0.14), transparent 60%),
    var(--bg-storm);
}
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; margin-top: 40px; }
.card {
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  will-change: transform;
}
.card:hover {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 28px 58px -24px rgba(56, 189, 248, 0.35);
}
.card-img { aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.card-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 20, 36, 0.55));
}
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.card:hover .card-img img { transform: scale(1.06); }
.price-chip {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(7, 16, 32, 0.85); color: #fff; border: 1px solid rgba(148, 190, 233, 0.3);
  font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  padding: 6px 13px; border-radius: 999px; font-variant-numeric: tabular-nums;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.card:hover .price-chip { background: var(--cyan); border-color: var(--cyan); color: #06121F; }
.card-body { padding: 19px 21px 21px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { color: var(--ink); }
.card-body p { color: var(--muted); font-size: 14.5px; flex: 1; }
.card-link {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--cyan); text-decoration: none;
}
.card-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Pricing (violet storm cell) ---------- */
.pricing {
  padding: 92px 0; color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(900px 500px at 92% 18%, rgba(99, 102, 241, 0.34), transparent 62%),
    radial-gradient(700px 420px at 4% 92%, rgba(56, 189, 248, 0.1), transparent 60%),
    var(--bg-steel);
  border-block: 1px solid var(--line);
}
/* Faint photo texture + dark vignette so the bright cards pop against it */
.pricing::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 16, 32, 0.55), rgba(7, 16, 32, 0.75)),
    url("img/bento-action.jpg") center 40% / cover no-repeat;
  opacity: 0.55; pointer-events: none;
}
.pricing .wrap { position: relative; z-index: 2; }
.price-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 46px; }
.price-card {
  position: relative; text-align: left;
  background: linear-gradient(180deg, #1E3560, #10203C);
  border: 1px solid rgba(56, 189, 248, 0.32); border-radius: var(--r-lg);
  padding: 24px 24px 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  will-change: transform;
}
.price-card:hover {
  transform: translateY(-5px); border-color: rgba(125, 211, 252, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 28px 56px -22px rgba(56, 189, 248, 0.5);
}
.price-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.price-head h3 { font-size: 17px; color: #fff; }
.price-icon {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: rgba(56, 189, 248, 0.18); border: 1px solid rgba(56, 189, 248, 0.45);
  display: grid; place-items: center;
}
.price-icon svg { width: 20px; height: 20px; stroke: var(--cyan-hi); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.price-amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 3.8vw, 50px); line-height: 1;
  color: #DDF4FF; font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(56, 189, 248, 0.65), 0 0 44px rgba(56, 189, 248, 0.3);
  margin-bottom: 10px;
}
.price-card > p { font-size: 14px; color: #BCCBDF; line-height: 1.55; }
.price-card.popular { border-color: rgba(129, 140, 248, 0.7); background: linear-gradient(180deg, rgba(38, 43, 94, 0.85), rgba(17, 24, 54, 0.95)); }
.pop-tag {
  position: absolute; top: 14px; right: 14px;
  font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(120deg, var(--violet), var(--violet-deep)); color: #fff;
  border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.pricing .section-head h2 { color: #fff; }

/* ---------- About ---------- */
.about-outer {
  background:
    radial-gradient(800px 520px at 0% 30%, rgba(56, 189, 248, 0.17), transparent 60%),
    var(--bg-deep);
}
.about {
  display: grid; grid-template-columns: minmax(270px, 400px) 1fr;
  gap: clamp(30px, 5vw, 66px); align-items: center;
  /* padding-block, NOT the shorthand — `padding: 92px 0` reset .wrap's
     padding-inline to 0 and ran this section's text into both screen edges. */
  padding-block: 92px;
}
.about-frame {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.8);
}
.about-copy blockquote {
  border-left: 3px solid var(--cyan); padding-left: 18px; margin: 18px 0;
  font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--ink);
}
.about-copy cite { display: block; font-style: normal; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 7px; }
.about-copy > p { color: var(--muted); margin-bottom: 16px; }
.about-points { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 9px; }
.about-points li { padding-left: 30px; position: relative; font-size: 15px; }
.about-points li svg {
  position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  stroke: var(--cyan); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Reviews ---------- */
.reviews {
  padding: 88px 0;
  background:
    radial-gradient(820px 480px at 100% 100%, rgba(99, 102, 241, 0.2), transparent 60%),
    var(--bg-storm);
  border-top: 1px solid var(--line);
}
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 38px 0 28px; }
.review {
  background: linear-gradient(180deg, var(--card-hi), var(--card));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px; display: flex; flex-direction: column; gap: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.review:hover { transform: translateY(-4px); border-color: rgba(56, 189, 248, 0.5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 44px -22px rgba(56, 189, 248, 0.32); }
.review-stars { color: var(--cyan-hi); letter-spacing: 2.5px; font-size: 14px; text-shadow: 0 0 12px rgba(56, 189, 248, 0.55); }
.review blockquote { font-size: 15px; flex: 1; }
.review figcaption { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.review figcaption span { font-weight: 400; color: var(--muted); }
.review-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Quote ---------- */
.quote-outer { background: var(--bg-deep); }
.quote { padding: 92px 0; display: grid; grid-template-columns: 1fr 1fr; max-width: 1180px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 64px); }
.quote-panel {
  background:
    radial-gradient(500px 400px at 90% 0%, rgba(99, 102, 241, 0.32), transparent 60%),
    linear-gradient(160deg, var(--bg-steel), var(--bg-deep));
  color: #fff; border: 1px solid var(--line); border-right: 0;
  padding: clamp(30px, 4vw, 50px); border-radius: var(--r-lg) 0 0 var(--r-lg);
  display: flex; flex-direction: column; gap: 15px;
}
.quote-panel h2 { color: #fff; }
.quote-sub { opacity: 0.86; font-size: 15px; max-width: 44ch; }
.contact-list { list-style: none; padding: 0; margin-top: 6px; display: flex; flex-direction: column; gap: 14px; }
.contact-list li { display: flex; flex-direction: column; }
.contact-list span { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em; opacity: 0.62; }
.contact-list a, .contact-list b { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: #fff; text-decoration: none; }
.contact-list a:hover { color: var(--cyan-hi); }
.quote-form {
  background: var(--card); border: 1px solid var(--line); border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  padding: clamp(30px, 4vw, 50px);
  display: flex; flex-direction: column; gap: 14px;
}
.quote-form h3 { font-size: 22px; color: var(--ink); }
.quote-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-display); font-size: 12.5px; font-weight: 500; color: var(--ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.quote-form input, .quote-form select, .quote-form textarea {
  font: 15px var(--font-body); padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-steel); color: var(--ink);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.quote-form input::placeholder, .quote-form textarea::placeholder { color: rgba(151, 169, 193, 0.6); }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
}
.form-note { font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---------- Closing CTA band — the lightning strike ---------- */
.cta-band {
  background: linear-gradient(115deg, var(--cyan) 0%, #5EAFFB 55%, var(--violet-deep) 100%);
  color: #06121F; padding: 84px 0; text-align: center;
}
.cta-inner h2 { color: #06121F; font-size: clamp(30px, 4.4vw, 48px); }
.cta-inner p { margin: 12px auto 28px; max-width: 48ch; opacity: 0.88; font-size: 16.5px; font-weight: 600; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cta-band .btn-white { background: #0A1424; color: #fff; }
.cta-band .btn-white:hover { background: #101F38; }
.cta-band .btn-ghost { border-color: rgba(7, 18, 31, 0.5); color: #06121F; }
.cta-band .btn-ghost:hover { border-color: #06121F; }
.cta-band .btn::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent); }

/* ---------- Footer ---------- */
.footer { background: var(--bg-foot); color: #fff; padding: 56px clamp(20px, 5vw, 64px) 86px; }
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; max-width: 1100px; margin: 0 auto 36px; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.foot-tag { opacity: 0.72; font-size: 14px; }
.foot-head { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--cyan); margin-bottom: 10px; }
.footer a { color: #fff; text-decoration: none; line-height: 2; }
.footer a:hover { color: var(--cyan-hi); }
.footer p { opacity: 0.9; }
.foot-legal { text-align: center; font-size: 12.5px; opacity: 0.5; }

/* ---------- Persistent CTAs ---------- */
.side-cta {
  position: fixed; right: 0; top: 50%; z-index: 55;
  transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl;
  background: linear-gradient(180deg, var(--cyan), #4FC7FF); color: #06121F;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; letter-spacing: 0.05em;
  padding: 18px 11px; border-radius: 0 11px 11px 0; text-decoration: none;
  box-shadow: -6px 0 18px -8px rgba(56, 189, 248, 0.5);
  transition: padding 0.18s var(--ease), filter 0.18s var(--ease);
}
.side-cta:hover { filter: brightness(1.12); padding-right: 16px; }
.mobile-cta { display: none; }

/* ---------- Tablet / Mobile ---------- */
@media (max-width: 1020px) {
  .hero-bento { grid-template-columns: repeat(6, 1fr); padding-top: 104px; }
  .hero-copy { grid-column: 1 / 7; grid-row: auto; padding-right: 0; }
  .ht-house { grid-column: 1 / 7; grid-row: auto; min-height: 260px; }
  .ht-rating { grid-column: 1 / 3; }
  .ht-prices { grid-column: 3 / 7; }
  .ht-action { display: none; }
}
@media (max-width: 960px) {
  .about { grid-template-columns: 1fr; }
  .quote { grid-template-columns: 1fr; }
  .quote-panel { border-radius: var(--r-lg) var(--r-lg) 0 0; border-right: 1px solid var(--line); border-bottom: 0; }
  .quote-form { border-left: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
}
@media (max-width: 860px) {
  .nav-links, .nav-phone { display: none; }
  .nav-burger { display: flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; color: inherit; }
  .nav-burger span { width: 24px; height: 2.5px; background: currentColor; border-radius: 2px; transition: transform 0.2s var(--ease), opacity 0.2s var(--ease); }
  .nav.open .nav-links {
    display: flex; flex-direction: column; position: fixed; inset: 0; z-index: -1;
    background: var(--bg-deep); color: #fff; justify-content: center; align-items: center;
    gap: 30px; font-size: 20px;
  }
  .nav.open .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav.open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.open .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .side-cta { display: none; }
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: grid; grid-template-columns: 1fr 1.5fr;
    background: rgba(7, 16, 32, 0.98);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px;
  }
  .mobile-cta a {
    text-align: center; padding: 14px 6px; border-radius: 10px; text-decoration: none;
    color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
  }
  .mobile-cta a.orange { background: linear-gradient(120deg, var(--cyan), #4FC7FF); color: #06121F; border-color: transparent; }
  body { padding-bottom: 70px; }
  .field-row { grid-template-columns: 1fr; }
  .hero-bento { grid-template-columns: 1fr; gap: 13px; }
  .hero-copy, .ht-house, .ht-rating, .ht-prices { grid-column: 1 / -1; }
  .ht-house { min-height: 220px; }
  .hero-rain { display: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn, .card, .hero-tile, .hero-tile img, .review, .price-card, .card-img img { transition: none; }
  .btn::after { display: none; }
  .hero-glow::before, .hero-glow::after { animation: none; }
  .hero-rain { display: none; }
  .hero h1 .shine { animation: none; }
  .split-in .ch { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   v13 — ONE continuous background. Sections are transparent;
   color comes from aurora fields behind the whole page + grain
   (grain kills gradient banding). No section seams possible.
   ============================================================ */
body { position: relative; }
main { position: relative; z-index: 1; }
.page-bg {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  background: linear-gradient(180deg, #070F1C 0%, #0B1730 22%, #0A1426 48%, #0D1B36 74%, #070F1C 100%);
}
.pb { position: absolute; border-radius: 50%; pointer-events: none; }
.pb-1 { top: -6%; right: -12%; width: 62vw; height: 62vw;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.34), transparent 62%); }
.pb-2 { top: 9%; left: -16%; width: 55vw; height: 55vw;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22), transparent 60%); }
.pb-3 { top: 34%; right: -14%; width: 58vw; height: 58vw;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.16), transparent 60%); }
.pb-4 { top: 55%; left: -14%; width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.24), transparent 62%); }
.pb-5 { top: 78%; right: -10%; width: 52vw; height: 52vw;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 60%); }
.pb-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px; opacity: 0.05; mix-blend-mode: overlay;
}

/* Strip every per-section background & hairline — the backdrop does the work now */
.hero { background: transparent; }
.hero-glow { display: none; }               /* replaced by page-level aurora */
.services { background: transparent; border-top: 0; }
.pricing { background: transparent; border-block: 0; }
.pricing::before { display: none; }          /* full-bleed photo caused a seam */
.about-outer { background: transparent; }
.reviews { background: transparent; border-top: 0; }
.footer { background: transparent; }
.cta-band { position: relative; z-index: 1; }  /* the one deliberate color break */

/* A touch more breathing room now that spacing, not color, separates sections */
.services { padding-top: 40px; }

/* ============================================================
   v14 — Dark ↔ light rhythm with wave transitions.
   Storm-dark where we talk power (hero, pricing, quote panel,
   footer); clean bright where we show results (services, about,
   reviews). Waves stitch the two worlds — no hard seams.
   ============================================================ */

.wave { position: relative; z-index: 1; line-height: 0; margin-top: -1px; }
.wave svg { display: block; width: 100%; height: clamp(38px, 5.5vw, 72px); }

/* ---- LIGHT sections ---- */
.services, .about-outer, .reviews {
  background: #F3F7FB;
}
.reviews { background: #E9F1F9; }
.services { padding-top: 56px; margin-top: -1px; }
.about-outer { }
.reviews { border-top: 0; }

/* typography flips to dark ink on light ground */
.services h2, .about-outer h2, .reviews h2 { color: #0E1B2C; }
.services .section-sub, .reviews .section-sub { color: #4E617A; }
.services .eyebrow, .about-outer .eyebrow, .reviews .eyebrow { color: #0271B8; }

/* service cards become clean white */
.services .card {
  background: #FFFFFF; border: 1px solid #DBE6F1;
  box-shadow: 0 14px 34px -18px rgba(15, 40, 74, 0.18);
}
.services .card:hover {
  border-color: #38BDF8;
  box-shadow: 0 26px 52px -22px rgba(2, 113, 184, 0.28);
}
.services .card-body h3 { color: #0E1B2C; }
.services .card-body p { color: #51647C; }
.services .card-link { color: #0271B8; }

/* about flips to dark ink */
.about-outer .about-copy blockquote { color: #12233C; }
.about-outer .about-copy cite { color: #5A6D85; }
.about-outer .about-copy > p { color: #51647C; }
.about-points li { color: #22374F; }
.about-points li svg { stroke: #0271B8; }
.about-frame { border-color: #DBE6F1; box-shadow: 0 24px 48px -24px rgba(15, 40, 74, 0.3); }

/* review cards become white */
.reviews .review {
  background: #FFFFFF; border: 1px solid #D8E4F0;
  box-shadow: 0 12px 30px -18px rgba(15, 40, 74, 0.16);
}
.reviews .review:hover { border-color: #38BDF8; box-shadow: 0 22px 44px -20px rgba(2, 113, 184, 0.25); }
.reviews .review blockquote { color: #22374F; }
.reviews .review figcaption { color: #0E1B2C; }
.reviews .review figcaption span { color: #5A6D85; }
.reviews .review-stars { color: #F1A93B; text-shadow: none; }
.reviews .btn-outline { border-color: #B9CCDF; color: #12233C; }
.reviews .btn-outline:hover { border-color: #0271B8; color: #0271B8; }

/* ---- Pricing stays a storm cell, framed by light neighbors ---- */
.pricing {
  background:
    radial-gradient(900px 500px at 92% 18%, rgba(99, 102, 241, 0.3), transparent 62%),
    radial-gradient(700px 420px at 4% 92%, rgba(56, 189, 248, 0.14), transparent 60%),
    #0B1730;
  margin-top: -1px;
}

/* ---- Quote: dark panel + white form on light ground ---- */
.quote-outer, main > .quote { background: #F3F7FB; }
.quote-form { background: #FFFFFF; border-color: #DBE6F1; }
.quote-form h3, .quote-form label { color: #0E1B2C; }
.quote-form input, .quote-form select, .quote-form textarea {
  background: #F3F7FB; border-color: #C9D9E8; color: #12233C;
}
.quote-form input::placeholder, .quote-form textarea::placeholder { color: #8CA0B5; }
.form-note { color: #5A6D85; }

/* ---- Footer back to solid storm ---- */
.footer { background: #050C17; }

/* mobile nav overlay must stay dark and opaque over light sections */
@media (max-width: 860px) {
  .nav.open .nav-links { background: #070F1C; }
}

/* ============================================================
   v15 — Self-organizing scroll choreography + full-bleed quote.
   Entrances come from different directions with a settle-snap;
   headers sharpen from a blur; grids stagger item by item.
   All IO-triggered CSS transitions — zero per-frame JS.
   ============================================================ */

/* Quote section: light ground spans the full page width */
.quote { display: block; max-width: none; margin: 0; padding: 92px 0; background: #F3F7FB; }
.quote-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: 1180px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 64px);
}
@media (max-width: 960px) { .quote-grid { grid-template-columns: 1fr; } }

/* Choreographed entrances */
[data-reveal] {
  opacity: 0; transform: translateY(38px) scale(0.97);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal="left"]  { transform: translateX(-56px) rotate(-1.5deg) scale(0.97); }
[data-reveal="right"] { transform: translateX(56px) rotate(1.5deg) scale(0.97); }
[data-reveal="tilt-l"] { transform: translateX(-46px) translateY(24px) rotate(-3deg) scale(0.94); }
[data-reveal="tilt-r"] { transform: translateX(46px) translateY(24px) rotate(3deg) scale(0.94); }
[data-reveal="scale"] { transform: scale(0.88); }
/* Section headers assemble from a blur */
.section-head[data-reveal] { filter: blur(9px); transform: translateY(26px) scale(0.99); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }
/* Cards snap into place with a slight overshoot */
.card[data-reveal].in, .price-card[data-reveal].in, .hero-tile[data-reveal].in, .review[data-reveal].in {
  transition-timing-function: cubic-bezier(0.34, 1.45, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], .section-head[data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ============================================================
   v16 — Everything clickable: tiles, card images, and price
   cards are real links into the booking page.
   ============================================================ */
a.hero-tile, a.price-card, a.card-img { display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.card-img { aspect-ratio: 16 / 10; }
.book-hint {
  display: inline-block; margin-top: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  color: var(--cyan-hi);
  transition: transform 0.2s var(--ease);
}
.price-card:hover .book-hint { transform: translateX(4px); }
.ht-rating { cursor: pointer; }

/* ============================================================
   v18 — Real client logo: emblem mark in the nav, full logo
   showcased in the footer.
   ============================================================ */
.brand-mark {
  width: 44px; height: 44px; border-radius: 11px; object-fit: cover; flex: none;
  border: 1px solid rgba(148, 190, 233, 0.35);
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.6);
}
.foot-logo {
  width: 210px; height: auto; border-radius: 16px;
  border: 1px solid rgba(148, 190, 233, 0.22);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  margin-bottom: 14px;
}

/* ============================================================
   v19 — Rating tile at proper scale + balanced footer
   ============================================================ */
.ht-rating { gap: 4px; }
.ht-rating .rating-score {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(42px, 4vw, 54px); line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.ht-rating .rating-stars {
  color: var(--cyan-hi); font-size: 17px; letter-spacing: 3.5px;
  text-shadow: 0 0 14px rgba(56, 189, 248, 0.65);
}
.ht-rating .rating-label { font-size: 13px; color: var(--muted); line-height: 1.45; }
.foot-grid { align-items: start; }
.foot-grid p { font-size: 14.5px; line-height: 1.9; }
.footer a { font-size: 14.5px; }

/* v21 — belt-and-suspenders on footer link visibility */
.footer .foot-grid a { color: #EAF0F8; font-size: 14.5px; display: inline-block; line-height: 2; }
.footer .foot-grid a:hover { color: var(--cyan-hi); }

/* ============================================================
   v22 — Two real bug fixes:
   1. Backdrop painted OVER the footer (positioned layer beats
      static content) and swallowed clicks page-wide.
   2. The rating "5.0" digits live in an inner span still caught
      by the old 13.5px rule.
   ============================================================ */
.page-bg { pointer-events: none; }
.footer { position: relative; z-index: 1; }
.ht-rating .rating-score span { font: inherit; color: inherit; }

/* v23 — booking page kept reachable on phones: the nav phone stays visible
   there (it has no burger menu), plus its own sticky call bar. */
@media (max-width: 860px) {
  .nav-book .nav-phone { display: inline-block; font-size: 13.5px; }
  .nav-book .back-link { font-size: 13px; }
  .nav-book { gap: 12px; }
}

/* ============================================================
   v24 — MOBILE FIXES
   1. a.hero-tile{display:block} (added when tiles became links) was
      beating .ht-action{display:none}, so that tile kept spanning
      grid cols 8-13 → 11 phantom tracks + 176px of phantom gaps
      crushed the hero into ~half the screen. Force every bento
      child to a single full-width column on phones.
   2. "Free Estimate" landed on the info panel with the form still
      offscreen — form now comes first on mobile, with scroll-margin
      so the fixed nav never covers it.
   ============================================================ */

@media (max-width: 1020px) {
  a.ht-action, .ht-action { display: none !important; }
}

@media (max-width: 860px) {
  .hero-bento {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    gap: 14px;
    padding-block: 92px 44px;
  }
  /* every child full-width, no phantom tracks */
  .hero-bento > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .hero-copy { padding-right: 0; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 40px); margin-bottom: 12px; }
  .hero-sub { font-size: 15.5px; margin-bottom: 20px; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .ht-house { min-height: 210px; }
  .ht-rating, .ht-prices { min-height: 0; }

  /* Free Estimate: show the actual form first */
  .quote-grid { display: flex; flex-direction: column; }
  .quote-form { order: 1; border-radius: var(--r-lg) var(--r-lg) 0 0; border: 1px solid #DBE6F1; border-bottom: 0; }
  .quote-panel { order: 2; border-radius: 0 0 var(--r-lg) var(--r-lg); border: 1px solid var(--line); border-top: 0; }
}

/* Fixed nav must never cover an anchored section */
#quote, #services, #pricing, #about, #reviews { scroll-margin-top: 84px; }

/* v25 — tighter quote section on phones so more of the form is
   above the fold when "Free Estimate" is tapped */
@media (max-width: 860px) {
  .quote { padding-block: 46px 40px; }
  .quote-form { padding: 26px 22px; }
  .quote-panel { padding: 26px 22px; }
}

/* ============================================================
   v26 — Condensed pricing on phones.
   Tall stacked cards (icon → big price → desc) become compact
   rows: icon | name+desc | price. Cuts the section's height
   roughly in half so all six prices are a short scroll.
   ============================================================ */
@media (max-width: 860px) {
  .pricing { padding: 54px 0 48px; }
  .price-table { gap: 10px; margin-top: 26px; }

  .price-card {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    grid-template-areas:
      "tag  tag   tag"
      "icon title price"
      "icon desc  price";
    align-items: center;
    column-gap: 12px; row-gap: 1px;
    padding: 13px 16px;
    border-radius: var(--r-md);
  }
  /* let the icon and title become direct grid items */
  .price-head { display: contents; }
  .price-icon { grid-area: icon; width: 42px; height: 42px; border-radius: 10px; }
  .price-icon svg { width: 19px; height: 19px; }
  .price-head h3 { grid-area: title; font-size: 15.5px; line-height: 1.25; }
  .price-card > p { grid-area: desc; font-size: 12.5px; line-height: 1.4; }
  .price-amount {
    grid-area: price; margin: 0;
    font-size: 27px; text-shadow: 0 0 14px rgba(56, 189, 248, 0.5);
  }
  /* tag sits on its own row; collapses to zero height on other cards */
  .pop-tag {
    position: static; grid-area: tag; justify-self: start;
    font-size: 9.5px; padding: 2px 8px; margin-bottom: 5px;
  }
  .book-hint { display: none; }
  .price-card:hover { transform: none; }
}

/* v27 — the compact row layout above lost to a.price-card{display:block}
   (element+class beats a bare class). Re-declare with higher specificity. */
@media (max-width: 860px) {
  .price-table a.price-card,
  .price-table .price-card {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    grid-template-areas:
      "tag  tag   tag"
      "icon title price"
      "icon desc  price";
    align-items: center;
    column-gap: 12px; row-gap: 1px;
    padding: 13px 16px;
  }
}

/* ============================================================
   v28 — Kill sideways drift while scrolling.
   Un-revealed elements sit at translateX(±56px), which pushed the
   document 57px wider than the viewport. With reveals toggling on
   scroll-up, that overflow flickered in and out → page slid
   side to side. Fix: clip the axis, and use vertical-only
   entrances on phones.
   ============================================================ */
html { overflow-x: hidden; overflow-x: clip; }   /* clip preserves position:sticky */
body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }

@media (max-width: 860px) {
  /* no horizontal travel on small screens — vertical fade/rise only */
  [data-reveal],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="tilt-l"],
  [data-reveal="tilt-r"],
  [data-reveal="scale"] {
    transform: translateY(20px) !important;
    filter: none !important;
  }
  [data-reveal].in { transform: none !important; }
}

/* ============================================================
   v29 — Footer stays a single row on desktop.
   auto-fit + minmax(220px, 1fr) needed 970px of track before it
   would keep four columns, so any window under ~1075px wrapped
   the footer into a 2x2 block. Explicit fractional tracks hold
   one row down to tablet width, then step down deliberately.
   ============================================================ */
.foot-grid {
  grid-template-columns: minmax(170px, 1.05fr) minmax(120px, 0.85fr)
                         minmax(140px, 1.05fr) minmax(160px, 1.25fr);
  gap: clamp(18px, 2.6vw, 34px);
  max-width: 1140px;
}
.foot-logo { width: min(210px, 100%); }

@media (max-width: 820px) {
  /* tablet — two balanced pairs rather than a squeezed row */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px 24px; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   v30 — The call CTA carries the number itself.
   If a browser refuses the tel: handoff (iOS restrictions, a
   content blocker, an in-app webview), "Call" alone is a dead
   end. Showing the digits means the visitor can still long-press
   to copy or read it out. Also gives calling the wider column,
   which suits a trade where the phone converts best.
   ============================================================ */
@media (max-width: 860px) {
  .mobile-cta { grid-template-columns: 1.5fr 1fr; }
  .mobile-cta a.cta-call { font-size: 14px; letter-spacing: 0.01em; white-space: nowrap; padding-inline: 4px; }
  .mobile-cta a { font-size: 14.5px; }
}
@media (max-width: 360px) {
  .mobile-cta a.cta-call { font-size: 13px; }
  .mobile-cta a { font-size: 13.5px; }
}

/* ============================================================
   v32 — Kill the headline reflow on first load.
   Poppins renders ~5.8% wider than the system fallback, so the
   hero h1 laid out on 2 lines before the webfont arrived and
   reflowed to 3 the instant it did — "results." jumped a full
   line down and 138px across, and the hero grew 36px taller
   under it. A metric-matched fallback makes the pre-swap layout
   identical, so the swap becomes invisible. Vertical rhythm is
   already pinned by explicit line-heights, so size-adjust alone
   is enough — no ascent/descent overrides needed.

   size-adjust ALONE cannot fix this: per word, Poppins runs
   4.7%–14.5% wider than the fallback, so no single ratio
   reproduces its line breaks. The guarantee comes from
   display=optional on the font link — the browser either has
   Poppins ready at first paint or uses the fallback for the
   whole page load. It never swaps mid-view, so nothing reflows.
   This size-adjust is what makes that fallback path look right.
   ============================================================ */
@font-face {
  font-family: "Poppins Fallback";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 106.5%;
}
@font-face {
  font-family: "Open Sans Fallback";
  src: local("Arial"), local("Helvetica"), local("Roboto");
  size-adjust: 104.5%;
}
:root {
  --font-display: "Poppins", "Poppins Fallback", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Open Sans Fallback", "Segoe UI", system-ui, sans-serif;
}

/* ============================================================
   v34 — Phones: the headline and buttons own the first screen.
   The house tile used to poke up under the CTAs. Because the
   fixed call bar covers the bottom 77px, the amount of photo
   showing depended on device height — roughly half of it on a
   660px Safari viewport, which pulled the eye straight off the
   heading. Sizing the copy block to the visible viewport pushes
   the photo fully below the fold: it is either out of sight or
   completely in view once you scroll, never a sliver.

   svh, not vh — in Safari vh means the toolbars-hidden height,
   which is precisely the case that leaks the photo back in.
   The vh line above it is the fallback for pre-15.4 browsers.
   ============================================================ */
@media (max-width: 860px) {
  .hero-copy {
    /* 92px hero padding-top + 14px grid gap + 70px, which lands the tile's
       top edge ~5px under the 75px call bar — measured, not guessed. */
    min-height: calc(100vh - 176px);
    min-height: calc(100svh - 176px);
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* ============================================================
   v36 — The headline now ships pre-split in index.html, so the
   `split-in` class is present at first paint instead of being
   added by JS. That means CSS alone must honour reduced motion:
   previously main.js simply skipped splitting for those users.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .split-in .ch:not(.shine) { animation: none; opacity: 1; transform: none; }
  .hero h1 .shine { animation: none; }
}

/* ============================================================
   v37 — Character-split headline entrance retired.
   The `.word` / `.ch` / `.split-in` / `charIn` rules above are now
   inert: no element carries those classes any more. Kept rather
   than deleted so the v36 reduced-motion guard stays valid if the
   effect is ever reinstated. The headline now uses the standard
   [data-reveal] whole-block fade + rise, which cannot separate
   "results." from "Spotless" because the entire h1 moves as one.
   ============================================================ */