/* =========================================================
   HOT WATER GUYS — homepage
   Brand: Hot Water Guys (colour, type, copy)
   Layout / rhythm / motion DNA: Flowline
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* colour */
  --ink: #080331;
  --navy: #082D5A;
  --navy-deep: #06346B;
  --red: #E4392F;
  --white: #FFFFFF;
  --paper: #FAFBFC;
  --mist: #EEEEEE;

  --ink-72: rgba(8, 3, 49, .72);
  --ink-56: rgba(8, 3, 49, .56);
  --ink-12: rgba(8, 3, 49, .12);
  --white-88: rgba(255, 255, 255, .88);
  --white-64: rgba(255, 255, 255, .64);
  --white-16: rgba(255, 255, 255, .16);
  --white-08: rgba(255, 255, 255, .08);

  /* type */
  --display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --body: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;

  /* Flowline spacing scale (size tokens) */
  --s-025: .25rem;  --s-05: .5rem;   --s-075: .75rem; --s-0875: .875rem;
  --s-1: 1rem;      --s-1125: 1.125rem; --s-125: 1.25rem; --s-15: 1.5rem; --s-175: 1.75rem;
  --s-2: 2rem;      --s-225: 2.25rem; --s-25: 2.5rem; --s-275: 2.75rem;
  --s-3: 3rem;      --s-35: 3.5rem;  --s-375: 3.75rem;
  --s-4: 4rem;      --s-425: 4.25rem; --s-45: 4.5rem;
  --s-5: 5rem;      --s-5375: 5.375rem; --s-55: 5.5rem;
  --s-6: 6rem;      --s-7: 7rem;     --s-75: 7.5rem;
  --s-8: 8rem;      --s-85: 8.5rem;  --s-10: 10rem;   --s-15r: 15rem;

  /* Flowline utility rhythm (desktop → mobile via clamp) */
  --m-xsmall: 1rem;
  --m-small: clamp(1.25rem, 1.5vw, 1.5rem);
  --m-medium: clamp(1.5rem, 2vw, 2rem);
  --m-large: clamp(2rem, 2.6vw, 3rem);
  --m-xlarge: clamp(2.5rem, 3.4vw, 4rem);
  --m-xxlarge: clamp(3rem, 4.2vw, 5rem);
  --m-huge: clamp(3.5rem, 5vw, 6rem);
  --m-xhuge: clamp(4rem, 5.8vw, 7rem);

  /* section padding: Flowline padding-section-large 7rem → 6 → 4 */
  --section-y: clamp(4rem, 6.5vw, 7rem);
  --section-y-medium: clamp(3rem, 4.5vw, 5rem);

  /* containers */
  --container: 84rem;
  --container-medium: 64rem;
  --container-small: 48rem;
  --gutter: 3%;

  /* type scale — Oswald display; ratios borrowed from Flowline h0→h1→h2→h3 */
  --fs-h0: clamp(3rem, 6.15vw, 5.75rem);
  --fs-h1: clamp(2.5rem, 4.8vw, 4.5rem);
  --fs-h2: clamp(2.125rem, 3.5vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 2.2vw, 2rem);
  --fs-h4: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-stat: clamp(3rem, 5.2vw, 4.75rem);
  --fs-body: 1rem;
  --fs-body-lg: clamp(1.0625rem, 1.2vw, 1.125rem);
  --fs-small: .875rem;
  --fs-tiny: .75rem;

  --overlap: clamp(3rem, 6vw, 6rem); /* trust panel overlaps the hero by this much */
  --radius-btn: 8px;
  --ease-btn: cubic-bezier(.445, .05, .55, .95);
  --ease-out: cubic-bezier(.2, .6, .2, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.1;
  text-wrap: balance;
}
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--white); }
::selection { background: var(--red); color: var(--white); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 200;
  padding: .75rem 1.25rem; background: var(--red); color: var(--white);
  font-weight: 600; font-size: var(--fs-small); text-transform: uppercase; border-radius: var(--radius-btn);
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Layout primitives ---------- */
.padding-global { padding-left: var(--gutter); padding-right: var(--gutter); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; }
.container-medium { width: 100%; max-width: var(--container-medium); margin-inline: auto; }
.container-small { width: 100%; max-width: var(--container-small); margin-inline: auto; }
.section-pad { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.max-width-large { max-width: 52rem; }
.max-width-medium { max-width: 35rem; }
.max-width-small { max-width: 30rem; }
.align-center { margin-inline: auto; }
.text-center { text-align: center; }

/* ---------- 4. Typography ---------- */
.h0 { font-size: var(--fs-h0); line-height: .98; letter-spacing: 0; }
.h1 { font-size: var(--fs-h1); line-height: 1.05; }
.h2 { font-size: var(--fs-h2); line-height: 1.1; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; }
.h4 { font-size: var(--fs-h4); line-height: 1.2; }
.lead { font-size: var(--fs-body-lg); line-height: 1.55; }
.muted { color: var(--ink-72); }
.on-dark .muted, .muted-light { color: var(--white-64); }
.text-small { font-size: var(--fs-small); }

/* outline line (Flowline's "soft white" second line, brand-safe) */
.outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--white);
  paint-order: stroke fill;
}
@supports not (-webkit-text-stroke: 1px #fff) {
  .outline { color: var(--white-64); }
}

/* eyebrow: Flowline text-style-tagline + dot */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; background: var(--red); flex: none;
}
.on-dark .eyebrow { color: var(--white); }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  padding: .875rem 1.5rem;
  font-family: var(--body); font-size: .875rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; line-height: 1;
  border-radius: var(--radius-btn);
  background: var(--red); color: var(--white);
  border: 1px solid var(--red);
  transition: transform .4s var(--ease-btn), background-color .4s var(--ease-btn), border-color .4s var(--ease-btn), color .4s var(--ease-btn);
  white-space: nowrap;
}
.btn:hover { transform: scale(.97); background: #cf2f26; border-color: #cf2f26; }
.btn svg { width: 1rem; height: 1rem; flex: none; }
.btn-ghost { background: transparent; border-color: var(--white-64); color: var(--white); }
.btn-ghost:hover { background: var(--white-16); border-color: var(--white); }
.btn-outline { background: transparent; border-color: var(--ink-12); color: var(--ink); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.btn-light { background: var(--white-16); border-color: transparent; color: var(--white); }
.btn-light:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn-small { padding: .625rem 1.125rem; font-size: .75rem; }
.button-group { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.button-group.is-center { justify-content: center; }

/* ---------- 6. Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 1.25rem var(--gutter);
  color: var(--white);
  transition: background-color .5s var(--ease-out), padding .5s var(--ease-out), box-shadow .5s var(--ease-out);
  will-change: transform;
}
.nav.is-solid { background: var(--ink); padding-block: .75rem; box-shadow: 0 1px 0 var(--white-08); }
.nav-inner {
  max-width: var(--container); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem;
  min-height: 3.75rem;
}
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { height: 3.75rem; width: auto; transition: height .5s var(--ease-out); }
.nav.is-solid .nav-logo img { height: 3rem; }
.nav-links { display: flex; gap: .25rem; }
.nav-links a {
  display: block; padding: .5rem .875rem;
  font-size: var(--fs-small); font-weight: 500; letter-spacing: .02em;
  position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: .875rem; right: .875rem; bottom: .25rem; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-right { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; }

/* Flowline .menu-icons hamburger, brand-coloured */
.menu-toggle {
  display: none; width: 48px; height: 48px; flex-direction: column; justify-content: center; align-items: center;
  background: var(--red); border-radius: var(--radius-btn); margin-right: -.25rem;
}
.menu-toggle span {
  display: block; width: 24px; height: 1.5px; background: var(--white);
  transition: transform .5s var(--ease-out), opacity .4s var(--ease-out), width .4s var(--ease-out);
}
.menu-toggle span + span { margin-top: 5px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { width: 0; opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--white);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 7rem var(--gutter) 2.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-2%);
  transition: opacity .5s var(--ease-out), transform .6s var(--ease-out), visibility 0s .6s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.mobile-menu nav a {
  display: block; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: 1.1; padding: .35rem 0;
  border-bottom: 1px solid var(--white-16);
}
.mobile-menu-foot { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu-foot .btn { align-self: flex-start; }
.mobile-menu-foot p { color: var(--white-64); font-size: var(--fs-small); }
body.menu-open { overflow: hidden; }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; color: var(--white); overflow: clip;
  background: var(--ink);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img {
  width: 100%; height: 118%; object-fit: cover; object-position: 60% 40%;
  position: absolute; top: -9%; left: 0;
  will-change: transform;
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 3, 49, .55) 0%, rgba(8, 3, 49, .62) 45%, rgba(8, 3, 49, .9) 100%);
}
.hero-content {
  position: relative; z-index: 1;
  min-height: min(100svh, 64rem);
  display: flex; align-items: flex-end;
}
.hero-grid {
  width: 100%;
  display: grid; grid-template-columns: 1fr minmax(385px, min-content); gap: var(--s-4);
  align-items: end;
  padding-top: var(--s-85); padding-bottom: calc(var(--overlap) + clamp(2.5rem, 4vw, 4rem));
}
.hero-copy { max-width: 62rem; min-width: 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--m-medium); }
.tag {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .75rem; border: 1px solid var(--white-16);
  font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--white-88);
}
.hero h1 { margin-bottom: var(--m-medium); }
.h0 .line { display: block; }
@media (min-width: 1025px) { .hero h1 .line { white-space: nowrap; } }
.hero .lead { max-width: 36rem; color: var(--white-88); margin-bottom: var(--m-large); }

/* Flowline floating featured card → trust card */
.featured-card {
  display: grid; grid-template-columns: 10rem 1fr; align-items: stretch;
  background: var(--white); color: var(--ink);
  min-width: 385px;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.featured-card:hover { transform: translateY(-4px); }
.featured-card img { width: 10rem; height: 100%; min-height: 7.5rem; object-fit: cover; }
.featured-body { padding: 1rem 1rem 1rem 1.25rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; }
.featured-body .stars { color: var(--red); letter-spacing: .1em; font-size: .875rem; }
.featured-body strong { font-family: var(--display); text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; letter-spacing: .01em; display: block; margin-top: .25rem; }
.featured-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pill {
  font-size: .625rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .5rem; background: var(--paper); border: 1px solid var(--mist);
}
.arrow { width: 1.25rem; height: 1.25rem; color: var(--red); transition: transform .5s var(--ease-out); }
.featured-card:hover .arrow { transform: translateX(4px); }

/* ---------- 8. Trust + stats panel (Flowline dark inset) ---------- */
.trust { position: relative; z-index: 2; margin-top: calc(-1 * var(--overlap)); }
.trust-panel {
  background: var(--ink); color: var(--white);
  padding-top: clamp(4rem, 8vw, 10rem); padding-bottom: clamp(3.5rem, 6vw, 7.5rem);
  overflow: hidden;
}
.trust-header { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-bottom: var(--m-xhuge); }
.divider-line { width: 100%; border-top: 1px solid var(--white-16); }

.marquee {
  width: 100%; overflow: hidden; background: var(--ink); isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 5rem; width: max-content;
  background: var(--ink);
  animation: marquee 45s linear infinite;
  padding-inline: 2.5rem;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Source logos are RGB on white. invert → white bg becomes black, screen-blend → black disappears into the ink panel. */
.marquee-track img { height: 1.75rem; width: auto; filter: invert(1) grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: screen; opacity: .9; }
.marquee-track img.is-alpha { filter: brightness(0) invert(1); mix-blend-mode: normal; }
.marquee-track img.is-tall { height: 3.5rem; }
.marquee-track img.is-alpha { height: 1.5rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

.trust-grid {
  display: grid; grid-template-columns: minmax(310px, .65fr) 1fr; gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}
.trust-photo { position: relative; overflow: hidden; min-height: 26rem; }
.trust-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.badge {
  position: absolute; left: 1.25rem; bottom: 1.25rem;
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .875rem 1.125rem; background: var(--white); color: var(--ink);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.badge::before { content: ""; width: 8px; height: 8px; background: var(--red); }
.trust-copy { display: flex; flex-direction: column; justify-content: space-between; gap: var(--m-xlarge); padding-block: .5rem; }
.trust-copy h2 { max-width: 40rem; }
.stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 2rem; }
.stat { display: flex; flex-direction: column; gap: 1rem; }
.stat-num { white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: var(--fs-stat); line-height: .95; letter-spacing: 0; color: var(--white); }
.stat-num sup { font-size: .5em; vertical-align: top; top: .3em; position: relative; }
.stat .eyebrow { color: var(--white-64); font-weight: 500; }

/* ---------- 9. Why choose us (layout353) ---------- */
.why { background: var(--paper); }
.layout353 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-5); row-gap: var(--s-4); align-items: start; }
.layout353-left { position: sticky; top: 8rem; }
.layout353-left .eyebrow { margin-bottom: var(--m-xsmall); }
.layout353-left h2 { margin-bottom: var(--m-small); }
.layout353-left p { margin-bottom: var(--m-medium); max-width: 32rem; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink-12); border-left: 1px solid var(--ink-12); }
.feature {
  padding: clamp(1.5rem, 2.4vw, 2.5rem);
  border-right: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12);
  display: flex; flex-direction: column; gap: 1rem; min-height: 17rem;
}
.feature svg { width: 2.5rem; height: 2.5rem; color: var(--navy); }
.feature h3 { font-size: var(--fs-h4); margin-top: auto; }
.feature p { color: var(--ink-72); font-size: var(--fs-small); line-height: 1.55; }

/* ---------- 10. Services ---------- */
.services { background: var(--white); border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); }
.section-head { margin-bottom: var(--m-xxlarge); }
.section-head .eyebrow { margin-bottom: var(--m-xsmall); }
.section-head.text-center .eyebrow { justify-content: center; }
.service-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--mist); border: 1px solid var(--mist); }
.service-card { grid-column: span 2; background: var(--white); display: flex; flex-direction: column; }
.service-card:nth-child(1), .service-card:nth-child(4) { grid-column: span 4; }
.service-card:nth-child(5), .service-card:nth-child(6) { grid-column: span 3; }
.service-media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); }
.service-card:nth-child(1) .service-media, .service-card:nth-child(4) .service-media { aspect-ratio: 8 / 3; }
.service-card:nth-child(5) .service-media, .service-card:nth-child(6) .service-media { aspect-ratio: 16 / 9; }
.service-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.service-card:hover .service-media img, .service-card:focus-within .service-media img { transform: scale(1.04); }
.service-body { padding: clamp(1.25rem, 2vw, 2rem); display: flex; flex-direction: column; gap: .875rem; flex: 1; }
.service-body h3 { font-size: var(--fs-h4); position: relative; padding-bottom: .75rem; }
.service-body h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
.service-card:hover h3::after, .service-card:focus-within h3::after { transform: scaleX(1); }
.service-body p { color: var(--ink-72); font-size: var(--fs-small); line-height: 1.55; }
.service-body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- 11. FAQ band (Flowline section_aeo) ---------- */
.faq { position: relative; color: var(--white); overflow: clip; background: var(--ink); }
.faq-bg { position: absolute; inset: 0; }
.faq-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.faq-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 3, 49, .7), var(--ink) 92%); }
.faq-content { position: relative; z-index: 1; min-height: 90svh; display: flex; align-items: flex-end; padding-block: clamp(5rem, 9vw, 9rem) clamp(3rem, 5vw, 5rem); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); width: 100%; align-items: start; }
.faq-left h2 { margin-bottom: var(--m-medium); }
.faq-list { display: flex; flex-direction: column; }
.faq-item { padding-block: 1.5rem; border-top: 1px solid var(--white-16); }
.faq-item:last-child { border-bottom: 1px solid var(--white-16); }
.faq-item h3 { font-size: var(--fs-h4); margin-bottom: .625rem; }
.faq-item p { color: var(--white-88); max-width: 34rem; }

/* ---------- 12. Testimonials ---------- */
.testimonials { background: var(--ink); color: var(--white); }
.testi-row { display: flex; gap: 1rem; height: 30rem; }
.testi-card {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  background: var(--navy); cursor: pointer;
  transition: flex .7s cubic-bezier(.4, 0, .2, 1);
  outline-offset: -3px;
}
.testi-card:hover, .testi-card:focus-visible, .testi-card:focus-within, .testi-card.is-open { flex-grow: 2.2; }
.testi-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity .6s; }
.testi-card:hover img, .testi-card.is-open img, .testi-card:focus-visible img { transform: scale(1.04); }
.testi-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 3, 49, 0) 35%, rgba(8, 3, 49, .92) 100%); }
.testi-meta { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 3; transition: opacity .4s, transform .5s var(--ease-out); }
.testi-meta strong { display: block; font-size: var(--fs-small); font-weight: 600; }
.testi-meta span { display: block; font-size: var(--fs-small); color: var(--white-64); }
.testi-quote {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 2rem; padding-bottom: 5.5rem;
  background: linear-gradient(180deg, rgba(8, 3, 49, 0), rgba(8, 3, 49, .96) 30%);
  transform: translateY(100%); opacity: 0;
  transition: transform .7s var(--ease-out), opacity .5s;
}
.testi-quote p { font-family: var(--display); text-transform: uppercase; font-weight: 700; font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.25; letter-spacing: .005em; }
.testi-card:hover .testi-quote, .testi-card.is-open .testi-quote, .testi-card:focus-visible .testi-quote, .testi-card:focus-within .testi-quote { transform: none; opacity: 1; }
.rating-strip { margin-top: var(--m-xxlarge); display: flex; justify-content: center; }
.rating-card {
  display: inline-flex; align-items: center; gap: 1.25rem; padding: 1rem 1.5rem;
  background: var(--white); color: var(--ink);
}
.rating-card img { height: 2rem; width: auto; }
.rating-card strong { font-family: var(--display); text-transform: uppercase; font-size: 1.125rem; letter-spacing: .01em; }
.rating-card .stars { color: var(--red); letter-spacing: .12em; }

/* ---------- 13. Service area ---------- */
.areas { background: var(--paper); }
.county-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem 1.5rem; padding-block: var(--m-large); border-top: 1px solid var(--ink-12); border-bottom: 1px solid var(--ink-12); }
.county { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1; letter-spacing: 0; }
.county-row .dot { width: 8px; height: 8px; background: var(--red); flex: none; }
.city-list { margin-top: var(--m-large); columns: 4; column-gap: 2rem; }
.city-list li { break-inside: avoid; padding: .45rem 0; border-bottom: 1px solid var(--mist); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.city-list a { display: flex; justify-content: space-between; color: var(--ink-72); transition: color .3s; }
.city-list a:hover { color: var(--red); }
.areas-foot { margin-top: var(--m-medium); font-size: var(--fs-small); color: var(--ink-72); }

/* ---------- 14. How it works ---------- */
.steps { background: var(--white); border-top: 1px solid var(--mist); }
.steps-head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: end; margin-bottom: var(--m-xlarge); }
.steps-head .eyebrow { margin-bottom: var(--m-xsmall); }
.step { display: grid; grid-template-columns: 9rem 1fr 1.2fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; padding-block: clamp(1.75rem, 2.6vw, 2.5rem); border-top: 1px solid var(--ink-12); }
.step:last-child { border-bottom: 1px solid var(--ink-12); }
.step-num { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 5.5vw, 5rem); line-height: .9; color: var(--red); letter-spacing: 0; }
.step h3 { font-size: var(--fs-h3); }
.step p { color: var(--ink-72); }

/* ---------- 15. Blog ---------- */
.blog { background: var(--paper); }
.blog-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: var(--m-xxlarge); }
.blog-head .eyebrow { margin-bottom: var(--m-xsmall); }
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.post { display: block; }
.post-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--mist); margin-bottom: 1.25rem; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out), filter .6s var(--ease-out), opacity .6s; }
.post:hover .post-media img, .post:focus-visible .post-media img { transform: scale(1.03); filter: blur(2px); opacity: .7; }
.post-media .btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); opacity: 0; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.post:hover .post-media .btn, .post:focus-visible .post-media .btn { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.post-meta { font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-56); margin-bottom: .5rem; display: flex; gap: .75rem; }
.post h3 { font-size: var(--fs-h4); margin-bottom: .5rem; }
.post p { color: var(--ink-72); font-size: var(--fs-small); max-width: 32rem; }

/* ---------- 16. Closing CTA ---------- */
.cta { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--white); padding-top: var(--section-y); padding-bottom: calc(var(--section-y) + 6rem); }
.cta .h0 { display: block; }
.cta .button-group { margin-top: var(--m-large); }
.cta-sub { margin-top: var(--m-small); color: var(--white-64); }

/* ---------- 17. Footer ---------- */
.footer { background: var(--ink); color: var(--white); position: relative; }
.footer-wm-wrap { overflow: hidden; }
.footer-top { display: grid; grid-template-columns: minmax(300px, .7fr) 1.5fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.footer-card { position: relative; overflow: hidden; min-height: 30rem; margin-top: -8rem; display: flex; }
.footer-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.footer-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 3, 49, .1), rgba(8, 3, 49, .85)); }
.footer-card-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 1.5rem; width: 100%; }
.footer-card-inner img { position: static; width: auto; height: 3rem; object-fit: contain; }
.footer-card-inner h2 { font-size: var(--fs-h3); margin-bottom: 1rem; }
.footer-right { display: flex; flex-direction: column; gap: var(--m-xlarge); padding-top: var(--section-y-medium); }
.footer-menus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.footer-menus h3 { font-family: var(--body); font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--white-64); margin-bottom: 1rem; }
.footer-menus li { padding: .25rem 0; }
.footer-menus a { font-size: var(--fs-small); color: var(--white-88); transition: color .3s; }
.footer-menus a:hover { color: var(--red); }
.footer-menus .two-col ul { columns: 2; column-gap: 1rem; }
.footer-legal { border-top: 1px solid var(--white-16); border-bottom: 1px solid var(--white-16); padding-block: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; font-size: var(--fs-small); color: var(--white-64); }
.footer-legal a:hover { color: var(--white); }
.footer-contact { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; }
.footer-contact svg { width: 1.125rem; height: 1.125rem; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem 0; font-size: var(--fs-small); color: var(--white-64); }
.footer-bottom a:hover { color: var(--white); }
.watermark {
  display: block; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.5rem, 13.2vw, 12rem); line-height: .8; letter-spacing: -.01em; text-align: center;
  color: var(--white); opacity: .045; white-space: nowrap;
  margin-top: var(--m-large); transform: translateY(.18em); pointer-events: none; user-select: none;
}

/* ---------- 18. Motion helpers ---------- */
[data-anim] { will-change: opacity, transform; }
.js [data-anim="button"] { opacity: 0; }
.js .hero [data-anim="hero"] { opacity: 0; }
.split-line { display: block; }

/* ---------- 19. Breakpoints ---------- */
@media (max-width: 1440px) {
  :root { --gutter: 4%; }
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-right .btn { display: none; }
  .menu-toggle { display: flex; }
  .nav-inner { grid-template-columns: 1fr auto; }

  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .featured-card { min-width: 0; max-width: 32rem; }

  .trust-grid { grid-template-columns: 1fr; }
  .trust-photo { min-height: 22rem; aspect-ratio: 16 / 9; }
  .stats { gap: 1.5rem; }

  .layout353 { grid-template-columns: 1fr; row-gap: var(--s-3); }
  .layout353-left { position: static; }

  .service-grid { grid-template-columns: 1fr 1fr; }
  .service-card, .service-card:nth-child(n) { grid-column: span 1; }
  .service-card:nth-child(1) { grid-column: span 2; }
  .service-card:nth-child(n) .service-media { aspect-ratio: 4 / 3; }
  .service-card:nth-child(1) .service-media { aspect-ratio: 16 / 7; }

  .faq-grid { grid-template-columns: 1fr; }
  .faq-content { min-height: 0; }

  .steps-head { grid-template-columns: 1fr; gap: 1rem; }
  .step { grid-template-columns: 6rem 1fr; }
  .step p { grid-column: 2; }

  .city-list { columns: 3; }

  .footer-top { grid-template-columns: 1fr; }
  .footer-card { margin-top: -6rem; max-width: 36rem; min-height: 24rem; }
  .footer-right { padding-top: 0; }
  .footer-menus { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
}

@media (max-width: 768px) {
  .hero-content { min-height: 100svh; max-height: none; }
  .hero-grid { padding-top: 7rem; }
  .featured-card { grid-template-columns: 7rem 1fr; }
  .featured-card img { width: 7rem; }
  .featured-body strong { font-size: 1.05rem; }

  .marquee-track { gap: 3rem; }
  .stats { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .stat { gap: .625rem; }
  .stat .eyebrow { font-size: .625rem; letter-spacing: .06em; }

  .feature-grid { grid-template-columns: 1fr; }
  .feature { min-height: 0; }

  .service-grid { grid-template-columns: 1fr; }
  .service-card:nth-child(n) { grid-column: span 1; }
  .service-card:nth-child(n) .service-media { aspect-ratio: 16 / 9; }

  .testi-row { flex-direction: column; height: auto; }
  .testi-card { flex: none; height: 22rem; }
  .testi-card .testi-quote { transform: none; opacity: 1; padding: 1.5rem; padding-bottom: 4.75rem; }
  .testi-card .testi-meta { left: 1.5rem; bottom: 1.5rem; }
  .testi-card:hover img { transform: none; }

  .city-list { columns: 2; }

  .step { grid-template-columns: 4.5rem 1fr; gap: 1.25rem; }

  .blog-head { flex-direction: column; align-items: flex-start; }
  .blog-grid { grid-template-columns: 1fr; gap: 3rem; }
  .post-media .btn { opacity: 1; transform: translate(-50%, -50%); }

  .cta { padding-bottom: calc(var(--section-y) + 4rem); }
  .footer-card { margin-top: -4rem; }
  .footer-legal, .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  :root { --gutter: 5%; }
  .nav { padding-block: 1rem; }
  .nav-logo img { height: 2.75rem; }
  .hero-grid { padding-top: 6rem; }
  .tag-row { gap: .375rem; }
  .tag { font-size: .625rem; padding: .3rem .55rem; }
  .button-group .btn { width: 100%; }
  .featured-card { grid-template-columns: 1fr; }
  .featured-card img { width: 100%; height: 9rem; }
  .featured-body { padding: 1rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:last-child { grid-column: span 2; }
  .marquee-track img.is-tall { height: 2.75rem; }
  .marquee-track img.is-alpha { height: 1.25rem; }
  .county { font-size: clamp(1.5rem, 8.5vw, 2.25rem); }
  .city-list { columns: 2; column-gap: 1.25rem; }
  .city-list li { font-size: .72rem; }
  .footer-menus { grid-template-columns: 1fr 1fr; }
  .footer-menus .two-col ul { columns: 2; }
  .rating-card { flex-direction: column; text-align: center; gap: .75rem; }
}

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; gap: 2rem 3rem; }
  .marquee-track > *:nth-child(n+9) { display: none; }
  .hero-bg img { height: 100%; top: 0; transform: none !important; }
  .testi-card { transition: none; }
  .js [data-anim="button"], .js .hero [data-anim="hero"] { opacity: 1; }
}