/* =====================================================================
   HMS HEATING & AIR CONDITIONING — STYLESHEET
   ===================================================================== */


/* =========================================================
   TOKENS — design system variables
   ========================================================= */
:root{
  /* Surfaces */
  --bg: #FFFFFF;
  --surface: #F5F5F5;

  /* Brand */
  --brand-primary: #B50517;     /* red */
  --brand-primary-dark: #8A0411;
  --brand-accent: #00256E;      /* blue */
  --brand-accent-dark: #001C55;

  /* Text */
  --ink: #313131;
  --ink-soft: #5B5F66;

  /* Lines */
  --rule: rgba(0,0,0,.10);
  --rule-strong: rgba(0,0,0,.18);

  /* Type stacks */
  --heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --header-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --maxw: 1360px;
  --content-w: calc(var(--maxw) - 2 * var(--gut));
  --gut: clamp(20px, 4vw, 56px);
}


/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
#financing, #reviews, #service-areas, #contact, #heating, #cooling, #plumbing { scroll-margin-top: 220px; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The sticky header sits in normal flow, so condensing it on scroll
     removes ~71px of document height. Scroll anchoring would "helpfully"
     pull scrollY down to match, which drops the page back under the
     condense threshold and makes the header oscillate. Opting out keeps
     scroll position stable while the header resizes. */
  overflow-anchor: none;
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--brand-accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--brand-primary); }
h1, h2, h3, h4, h5, h6 { font-family: var(--heading); font-weight: 700; margin: 0; color: var(--ink); overflow-wrap: break-word; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  background: var(--brand-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  z-index: 1000;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.eyebrow {
  font-family: var(--heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 10px;
}
.eyebrow-light { color: #fff; opacity: .92; }

.section-lede {
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 60ch;
}



/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--heading);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn-md { padding: 12px 26px; font-size: 15px; }
.btn-lg { padding: 15px 32px; font-size: 16px; }

.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: var(--brand-primary-dark); color: #fff; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.btn-outline-light:hover { background: rgba(255,255,255,.15); color: #fff; }

.btn-white { background: #fff; color: var(--brand-primary); }
.btn-white:hover { background: #fff; color: var(--brand-primary-dark); }


/* =========================================================
   HEADER — topbar + nav
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 16px rgba(0,0,0,.12); }

.topbar { background: #fff; }

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px var(--gut);
  transition: padding .25s ease;
}
.site-header.is-scrolled .topbar-inner { padding: 16px var(--gut); }
.brand { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
/* Only the badge links home. The business name beside it is plain text,
   so it carries no link affordance and no hover state. */
.brand-mark { display: flex; flex-shrink: 0; text-decoration: none; }
/* The logo sits in a <picture> for its WebP source; keep the img the flex item. */
.brand-mark picture { display: contents; }
/* Extra link text for screen readers and crawlers, not shown on screen. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Brand lockup: the "Powered by" line and the business name beside the badge. */
.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 16px;
  border-left: 1px solid #DCDFE3;
  max-width: 260px;
}
.brand-powered {
  font-family: var(--header-font);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.brand-legal {
  font-family: var(--header-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-accent);
}
/* The badge holds its full 125px down to a 1100px viewport, then shrinks to
   the 96px it already uses on mobile as the window narrows toward 900px.
   Without this the brand block plus the header CTAs overrun the row by a few
   pixels just above the mobile breakpoint. */
.brand img {
  flex-shrink: 0;
  width: clamp(96px, 14.5vw - 34.5px, 125px);
  height: clamp(96px, 14.5vw - 34.5px, 125px);
  transition: width .25s ease, height .25s ease;
}
.site-header.is-scrolled .brand img { width: 72px; height: 72px; }
.site-header.is-scrolled .brand-powered { font-size: 8.5px; }
.site-header.is-scrolled .brand-legal { font-size: 12px; }

/* The three header CTAs (Customer Login, Business Hours, Call Us Now) size
   themselves off one set of fluid tokens rather than snapping at a
   breakpoint, so the strip condenses smoothly as the window narrows. Each
   clamp interpolates between its floor at a 900px viewport (just above the
   point where this strip is replaced by the mobile menu) and its ceiling at
   1440px. The scrolled header redeclares the same tokens a notch smaller,
   which is why every rule below reads from the token and never from a
   literal size. */
.topbar-info {
  display: flex;
  align-items: center;
  --hdr-label:     clamp(13px,   6.33px + 0.74vw, 17px);
  --hdr-detail:    clamp(11.5px, 6.50px + 0.56vw, 14.5px);
  --hdr-icon:      clamp(30px,   6.67px + 2.59vw, 44px);
  --hdr-gap:       clamp(9px,    0.67px + 0.93vw, 14px);
  --hdr-split:     clamp(14px,  -9.33px + 2.59vw, 28px);
  --hdr-cta-text:  clamp(10.5px, 6.00px + 0.50vw, 13.2px);
  --hdr-cta-pad-y: clamp(5px,    1.30px + 0.40vw, 7px);
  --hdr-cta-pad-x: clamp(11px,  -0.70px + 1.30vw, 18px);
}
/* Scrolled header: the same tokens one notch smaller. Because they are custom
   properties on the shared ancestor, every rule above picks the new values up
   by inheritance, so the scroll shrink and the width shrink compose rather
   than one overriding the other. */
.site-header.is-scrolled .topbar-info {
  --hdr-label:     clamp(12px,   5.00px + 0.69vw, 15px);
  --hdr-detail:    clamp(10.5px, 5.30px + 0.53vw, 13px);
  --hdr-icon:      clamp(26px,   8.00px + 2.08vw, 38px);
  --hdr-gap:       clamp(8px,    0.60px + 0.79vw, 12px);
  --hdr-split:     clamp(12px,  -8.00px + 2.22vw, 24px);
  --hdr-cta-text:  clamp(9.6px,  5.90px + 0.41vw, 11.8px);
  --hdr-cta-pad-y: clamp(4px,    1.00px + 0.36vw, 6px);
  --hdr-cta-pad-x: clamp(9px,    1.00px + 0.90vw, 14px);
}
/* Customer-portal CTA at the head of the header info strip. The divider to its
   right is the existing .topbar-item border-left, so it needs no rule of its
   own. Outlined in brand blue rather than filled in red, so the one red
   button in the header stays the "Make an Appointment" block in the nav row
   below: this is the secondary action. The 2px border is inside the padding
   box, so the box does not shift on hover. */
.topbar-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--header-font);
  font-weight: 700;
  font-size: var(--hdr-cta-text);
  /* Two stacked words ("Customer" / "Login"), so the line box is tighter and the
     vertical padding is trimmed to keep the button near the height of the
     header rows beside it. */
  line-height: 1.22;
  text-align: center;
  padding: var(--hdr-cta-pad-y) var(--hdr-cta-pad-x);
  border: 1px solid var(--brand-accent);
  border-radius: 8px;
  background: transparent;
  color: var(--brand-accent);
  text-decoration: none;
  /* Brand-blue lift rather than a neutral grey drop shadow, so the glow reads
     as part of the outline rather than as depth. Deepens on hover. */
  box-shadow: 0 2px 10px -2px rgba(0, 37, 110, .35);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.topbar-cta:hover {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
  box-shadow: 0 6px 16px -3px rgba(0, 37, 110, .5);
  transform: translateY(-1px);
}
.topbar-item {
  display: flex;
  align-items: center;
  gap: var(--hdr-gap);
  padding: 6px 0 6px var(--hdr-split);
  margin-left: var(--hdr-split);
  border-left: 1px solid #ECECEC;
}
.topbar-icon {
  flex-shrink: 0;
  width: var(--hdr-icon);
  height: var(--hdr-icon);
  color: var(--brand-accent);
  transition: width .25s ease, height .25s ease;
}
.topbar-icon svg { width: 100%; height: 100%; }
.topbar-item p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.topbar-label {
  font-family: var(--header-font);
  font-weight: 700;
  font-size: var(--hdr-label);
  color: var(--brand-accent);
}
.topbar-detail {
  font-family: var(--header-font);
  font-weight: 400;
  font-size: var(--hdr-detail);
  color: #434343;
}
.topbar-detail a { color: #434343; text-decoration: none; }
.topbar-detail a:hover { color: var(--brand-accent); }

.nav { background: var(--brand-accent); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--gut);
  min-height: 60px;
}

/* The icon itself is only 2px tall, so the padding is what makes the tap
   target: 44x44 here, with matching negative margins so the bar's layout
   doesn't change. At 8px it was 40x18, too small to hit reliably. */
.menu-btn {
  display: none;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 21px 10px;
  margin: -21px -10px;
}
.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  position: relative;
  transition: transform .15s ease, opacity .15s ease;
}
.menu-icon::before,
.menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -7px; }
.menu-icon::after { top: 7px; }
.nav-links[data-open="true"] ~ .menu-btn .menu-icon,
#nav .menu-btn[aria-expanded="true"] .menu-icon { background: transparent; }
#nav .menu-btn[aria-expanded="true"] .menu-icon::before { transform: translateY(7px) rotate(45deg); }
#nav .menu-btn[aria-expanded="true"] .menu-icon::after { transform: translateY(-7px) rotate(-45deg); }

.nav-links > ul {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
@media (min-width: 901px) {
  .nav-links > ul > li:first-child > a:not(.btn),
  .nav-links > ul > li:first-child > .subtoggle { padding-left: 0; }
}
.nav-links a:not(.btn),
.nav-links .subtoggle {
  display: block;
  padding: 20px 12px;
  font-family: var(--header-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  background: none;
  border: 0;
  white-space: nowrap;
  line-height: 1.2;
}
.nav-links a:not(.btn):hover,
.nav-links .subtoggle:hover { color: rgba(255,255,255,.75); }
/* Current page. A dropdown parent lights up when the page is one of its items
   (or, via .is-section-current, a page in that section with no item of its own). */
.nav-links a[aria-current="page"],
.nav-links .has-sub:has(.submenu a[aria-current="page"]) > .subtoggle,
.nav-links .subtoggle.is-section-current { color: #9EC6F7; }
@media (min-width: 901px) {
  .nav-links > ul > li > a[aria-current="page"],
  .nav-links .has-sub:has(.submenu a[aria-current="page"]) > .subtoggle,
  .nav-links .subtoggle.is-section-current {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
  }
}

/* Phone and booking shortcuts that only exist on small screens. */
.nav-call,
.nav-book { display: none; }

.has-sub { position: relative; }
.nav-links a.subtoggle { position: relative; display: inline-flex; align-items: center; gap: 5px; }
.nav-badge {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, calc(-100% - 2px));
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.subtoggle::after {
  content: "";
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .15s ease;
}
.subtoggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.submenu { display: none; }
.subtoggle[aria-expanded="true"] + .submenu { display: block; }

.nav-cta { flex-shrink: 0; }
.nav-cta .btn {
  border-radius: 0;
  font-family: var(--header-font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .4px;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 20px 24px;
}

@media (min-width: 901px) and (max-width: 1300px) {
  .nav-links > ul { gap: 2px; }
  .nav-links a:not(.btn),
  .nav-links .subtoggle { padding: 18px 6px; font-size: 14.5px; }
  .nav-cta .btn { padding: 16px 16px; font-size: 12px; }
}

@media (min-width: 901px) {
  .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    padding: 8px;
    z-index: 20;
  }
  .nav-links .submenu a {
    border-radius: 6px;
    color: var(--ink-soft);
    font-size: 13px;
    letter-spacing: .39px;
    text-transform: uppercase;
    padding: 10px 12px;
  }
  .nav-links .submenu a:hover { background: var(--surface); color: var(--ink); }
  .nav-links .submenu a[aria-current="page"] {
    background: var(--surface);
    color: var(--brand-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand-primary);
  }
  /* The service area menu lists the ten closest cities and then sends everyone
     else to the full page, so the last row gets a rule and the brand colour to
     read as an action rather than an eleventh city. */
  .submenu-all { border-top: 1px solid var(--rule); margin-top: 4px; padding-top: 4px; }
  .nav-links .submenu-all a { color: var(--brand-primary); font-weight: 700; }
}

/* Desktop shows the login CTA in the header strip; the drawer copy below is
   for the mobile menu only, since .topbar-info is hidden under 900px. */
.nav-login { display: none; }

@media (max-width: 900px) {
  .menu-btn { display: block; }
  .nav-login { display: block; }
  .brand img { width: 96px; height: 96px; }
  .brand-lockup { max-width: 178px; }
  .brand-legal { font-size: 13px; }
  .nav-links {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 86vw);
    background: #fff;
    padding: 24px;
    transform: translateX(100%);
    transition: transform .2s ease;
    overflow-y: auto;
    box-shadow: -12px 0 32px rgba(0,0,0,.15);
  }
  .nav-links[data-open="true"] { transform: translateX(0); }
  .nav-links > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a:not(.btn), .nav-links .subtoggle {
    padding: 12px 4px;
    border-bottom: 1px solid var(--rule);
    width: 100%;
    text-align: left;
    color: var(--ink);
  }
  .nav-links a:not(.btn):hover,
  .nav-links .subtoggle:hover { color: var(--brand-primary); }
  .nav-links .subtoggle::after { margin-left: auto; }
  .submenu { padding-left: 16px; }
  .submenu a { border-bottom: 1px solid var(--rule); color: #999; }
  .submenu-all a { color: var(--brand-primary); font-weight: 700; }
  /* Current page in the drawer: brand red, with a bar on the submenu item. */
  .nav-links a[aria-current="page"],
  .nav-links .has-sub:has(.submenu a[aria-current="page"]) > .subtoggle,
  .nav-links .subtoggle.is-section-current { color: var(--brand-primary); font-weight: 600; }
  .nav-links .submenu a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand-primary); padding-left: 12px; }
  .nav-cta { margin-left: auto; }
  .nav-cta .btn { padding: 10px 16px; font-size: 12.5px; }
}

/* Tablet (601px to 900px). The mobile menu is already in play here, but there
   is still room for the header strip, so the badge holds the left edge and the
   three CTAs hold the right rather than the strip dropping out entirely. Every
   size steps down again from the desktop floor; the tokens interpolate between
   601px and 900px exactly as the desktop set does between 900px and 1440px.
   The wordmark beside the badge is the one thing that goes: it is the widest
   part of the brand block and it already appears in the footer on every page. */
/* 901px to 999px is desktop (full nav, desktop header tokens) but the row is
   still tight, so the wordmark takes the same three-line stack it uses on
   tablet, at desktop type sizes. Narrowing it here frees about 110px, which is
   what keeps the three CTAs comfortable at the bottom of the desktop range. */
@media (min-width: 901px) and (max-width: 999px) {
  .brand-lockup { max-width: 124px; }
  .brand-legal { line-height: 1.25; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .topbar-inner { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .brand { gap: 0; }
  .brand img { width: clamp(58px, 9.36vw + 1.79px, 88px); height: clamp(58px, 9.36vw + 1.79px, 88px); }
  /* The wordmark stays beside the badge here, but stacked three lines deep
     ("Powered by" / "HMS Heating &" / "Air Conditioning") rather than the two
     it uses on desktop. The max-width is what forces the name to break after
     the ampersand; it is narrow enough that the block costs about half the
     width the one-line version would, which is what leaves room for the three
     CTAs on the right. */
  .brand-lockup { display: flex; padding-left: 10px; max-width: 108px; border-left: 0; }
  .brand-legal { font-size: 11.5px; line-height: 1.25; }
  .brand-powered { font-size: 8px; letter-spacing: .1em; }

  .topbar-info {
    --hdr-label:     clamp(10px,   3.98px + 1.00vw, 13px);
    --hdr-detail:    clamp(8.5px,  2.48px + 1.00vw, 11.5px);
    --hdr-icon:      clamp(18px,   -6.12px + 4.01vw, 30px);
    --hdr-gap:       clamp(4px,    -6.04px + 1.67vw, 9px);
    --hdr-split:     clamp(6px,    -10.07px + 2.68vw, 14px);
    --hdr-cta-text:  clamp(8.5px,  4.48px + 0.67vw, 10.5px);
    --hdr-cta-pad-y: clamp(3px,    -1.02px + 0.67vw, 5px);
    --hdr-cta-pad-x: clamp(6px,    -4.04px + 1.67vw, 11px);
  }
}

@media (max-width: 600px) {
  .topbar-info { display: none; }
  /* Badge holds the left edge and the menu button is lifted out of the blue
     bar into the top right of the white header row. The button still lives
     inside .nav in the markup (one drawer, one toggle), so it is positioned
     against .site-header; the topbar is a constant 108px tall at this width
     in both the resting and scrolled states, which is what makes a fixed
     height safe here. */
  .topbar-inner { justify-content: flex-start; }
  /* Spans the white row only: the header minus the 60px blue bar below it,
     so it stays centred on the logo row whether or not the header is scrolled. */
  .menu-btn {
    position: absolute;
    top: 0;
    bottom: 60px;
    right: 6px;
    z-index: 3;
    display: flex;
    align-items: center;
    /* 10px of side padding keeps the tap target at the 44px minimum while the
       bars themselves still read as 16px in from the edge. */
    padding: 0 10px;
    margin: 0;
  }
  /* On the white header it has to be brand blue, not the white it used
     against the blue nav bar. */
  .menu-icon,
  .menu-icon::before,
  .menu-icon::after { background: var(--brand-accent); }
  /* Call shortcut beside the menu button, so a phone call is always one tap
     away. It sits under the drawer (earlier in the DOM, no z-index), so the
     open menu covers it rather than the other way round. */
  .nav-call {
    position: absolute;
    top: calc((100% - 60px) / 2);
    right: 62px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand-accent);
    color: #fff;
    box-shadow: 0 3px 10px -2px rgba(0, 37, 110, .45);
  }
  .nav-call svg { width: 20px; height: 20px; }
  .nav-call:hover { background: var(--brand-primary); color: #fff; }
  /* The drawer's first row starts below the close button, which sits in the
     top-right corner of the header. */
  .nav-links { padding-top: 96px; }
}

@media (max-width: 480px) {
  .nav-cta { display: none; }
  /* The blue bar would hold nothing at this width, so it collapses to zero
     height. It is not display:none because the drawer lives inside it. The
     menu and call buttons then centre on the white header row, whatever its
     current (scrolled or resting) height. */
  .nav { background: none; }
  .nav-inner { min-height: 0; padding: 0; }
  .menu-btn { bottom: 0; }
  .nav-call { top: 50%; }
  /* Booking moves into the drawer as its last, most prominent item. */
  .nav-book { display: block; margin-top: 22px; }
  .nav-book .btn:hover { color: #fff; }
  .nav-book .btn {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 15px 18px;
    border-radius: 8px;
    font-family: var(--header-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    box-shadow: 0 6px 16px -4px rgba(181, 5, 23, .45);
  }
}


/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  color: #fff;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,14,20,.88) 0%, rgba(10,14,20,.62) 45%, rgba(10,14,20,.12) 100%);
}
/* Bottom fade so the photo dissolves into the badge bar (#121011) below it. */
.hero-bg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(140px, 24vh, 240px);
  z-index: 1;
  background: linear-gradient(to bottom, rgba(18,16,17,0) 0%, rgba(18,16,17,.55) 55%, #121011 100%);
}
.hero-bg picture { display: block; width: 100%; height: 100%; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  padding-top: clamp(72px, 11vw, 150px);
  padding-bottom: clamp(80px, 11vw, 150px);
}
.hero-content { max-width: 1100px; }
.hero-rating {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
}
.hero-rating-g { width: 46px; height: 46px; flex-shrink: 0; }
.hero-rating-detail { display: flex; flex-direction: column; gap: 3px; }
.hero-rating-stars { display: flex; gap: 3px; }
.hero-rating-stars svg { width: 19px; height: 19px; }
.hero-rating-label {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.hero h1 {
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
  margin: 0 0 24px;
}
.hero-lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
  max-width: 840px;
  margin: 0 0 36px;
}
.hero-checks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  column-gap: 32px;
  row-gap: 12px;
  margin: 0 0 20px;
  padding: 0;
  font-size: 17px;
}
.hero-checks li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-checks li::before {
  content: "";
  flex-shrink: 0;
  width: 17px;
  height: 22px;
  background:
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23B50517"><path d="M12 1.5a7.9 7.9 0 0 0-7.9 7.9c0 5.9 7.1 12.7 7.4 13a.7.7 0 0 0 1 0c.3-.3 7.4-7.1 7.4-13A7.9 7.9 0 0 0 12 1.5zm0 11.2a3.3 3.3 0 1 1 0-6.6 3.3 3.3 0 0 1 0 6.6z"/></svg>')
    center / contain no-repeat;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-accent { background: var(--brand-accent); color: #fff; }
.btn-accent:hover { background: var(--brand-accent-dark); color: #fff; }

@media (max-width: 600px) {
  /* Four cities wrap to two lines at this width. Denton is hidden rather than
     cut from the markup, so the desktop list and its SEO value stay whole. */
  .hero-checks { column-gap: 20px; font-size: 16px; }
  .hero-checks li:nth-child(3) { display: none; }

  .hero h1 { font-size: 40px; }

  /* Both hero buttons to one width, stacked and centred. */
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 300px; }
}
@media (max-width: 900px) {
  .hero-inner { padding-top: 64px; }
  .hero-bg::after { background: rgba(10,14,20,.6); }
}

/* Desktop only: lift the hero copy without changing the hero's overall height,
   by trading padding from the top to the bottom. Mobile keeps the padding set
   in the max-width: 900px block above. */
@media (min-width: 901px) {
  .hero-inner {
    padding-top: clamp(56px, 8.6vw, 118px);
    padding-bottom: clamp(96px, 13.4vw, 182px);
  }
}

/* Black band under the hero holding the certification badges: NATE, Veteran
   Owned Business, NCI, Texas-Best.biz. */
.badge-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(38px, 7vw, 92px);
  min-height: 120px;
  padding: 20px var(--gut);
  background: #121011;
}
.badge-bar-badge {
  display: block;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s ease, filter .35s ease;
}
.badge-bar-badge img { display: block; height: auto; }

/* Spotlight hover. Pointing at one badge dims the rest, so the hovered
   mark reads as picked out rather than merely enlarged. drop-shadow
   follows each badge's alpha, so the round seals get a real halo instead
   of a box. These are decorative images, not links, so there is nothing
   to focus and no keyboard state to mirror.

   The dim is keyed to :has(.badge-bar-badge:hover), not to the bar's own
   :hover. The bar is a wide flex row with large gaps, so hovering it
   would fire while the cursor sits in the gutters or merely passes
   through the row, dimming everything with nothing picked out. Browsers
   without :has simply never dim; the hovered badge still lifts. */
@media (hover: hover) {
  /* :not(:hover) matters. :has() carries the specificity of its argument,
     so without it this rule outranks the :hover rule below and dims the
     badge you are pointing at along with the rest. */
  .badge-bar:has(.badge-bar-badge:hover) .badge-bar-badge:not(:hover) { opacity: .42; }
  .badge-bar .badge-bar-badge:hover {
    opacity: 1;
    transform: translateY(-6px) scale(1.07);
    filter: drop-shadow(0 10px 20px rgba(255,255,255,.3));
  }
}
@media (prefers-reduced-motion: reduce) {
  .badge-bar-badge { transition: opacity .2s ease; }
  .badge-bar .badge-bar-badge:hover { transform: none; }
}
.badge-bar-veteran img { width: 110px; }
.badge-bar-nate img { width: 84px; }
.badge-bar-tdlr img { width: 86px; }
.badge-bar-nci img { width: 84px; }
/* 98% of its box is artwork vs NCI's 100%, so it runs 2px wider to match diameter. */
.badge-bar-texas-best img { width: 86px; }

@media (max-width: 640px) {
  .badge-bar { min-height: 100px; padding: 16px var(--gut); gap: 30px; }
  .badge-bar-veteran img { width: 88px; }
  .badge-bar-nate img { width: 68px; }
  .badge-bar-tdlr img { width: 70px; }
  .badge-bar-nci img { width: 68px; }
  .badge-bar-texas-best img { width: 70px; }
}


/* =========================================================
   WELCOME
   ========================================================= */
.welcome { padding: clamp(48px, 7vw, 80px) 0; text-align: center; background: #FAFAFA; }
.welcome-head { margin-bottom: clamp(30px, 4vw, 52px); }
.welcome-head h2 {
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0;
}

.service-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: clamp(36px, 6vw, 56px) 0 0;
}
.service-tile {
  position: relative;
  overflow: hidden;
  border-radius: 5px;
  min-height: clamp(300px, 34vw, 360px);
  padding: 0 28px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: center;
  isolation: isolate;
}
/* Background layers sit below the in-flow text (negative z-index within the
   tile's isolated stacking context) so the h3 link can stretch over the whole
   tile and make every part of it clickable. */
.service-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,.2) 60%, rgba(0,0,0,.1));
}
.service-tile-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.service-tile-bg picture { display: block; width: 100%; height: 100%; }
.service-tile-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.service-tile-hover-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.65) 65%, rgba(0,0,0,.25));
  transform: translateY(100%);
  transition: transform .4s ease;
  pointer-events: none;
}
.service-tile:hover .service-tile-hover-overlay,
.service-tile:focus-within .service-tile-hover-overlay {
  transform: translateY(0);
}
.service-tile-border {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}
.service-tile h3 { font-size: clamp(19px, 2vw, 22px); margin: 0; }
.service-tile h3 a { color: #fff; text-decoration: none; }
.service-tile h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 5px;
}
.service-tile h3 a:focus-visible { outline: none; }
.service-tile h3 a:focus-visible::after { outline: 3px solid #fff; outline-offset: -3px; }
.service-tile:hover h3 a { text-decoration: underline; text-underline-offset: 3px; }
.service-tile-body {
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  margin: 10px 0 0;
  transition: max-height .3s ease, opacity .3s ease;
}
.service-tile:focus-within .service-tile-body {
  max-height: 220px;
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .service-tile-body { max-height: 0; opacity: 0; overflow: hidden; }
  .service-tile:hover .service-tile-body { max-height: 220px; opacity: 1; }
  .service-tile:hover .service-tile-bg img,
  .service-tile:focus-within .service-tile-bg img { transform: scale(1.05); }
}

.welcome-actions { margin-top: clamp(28px, 4vw, 44px); }

@media (max-width: 700px) {
  .service-tiles { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; }
}

/* =========================================================
   TEXT US (floating CTA)
   ========================================================= */
.text-us-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--brand-accent);
  color: #fff;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 20px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.text-us-btn:hover { background: var(--brand-accent-dark); color: #fff; }
.text-us-btn svg { width: 20px; height: 20px; flex-shrink: 0; }


/* =========================================================
   ABOUT
   ========================================================= */
.about { padding: clamp(48px, 7vw, 96px) 0; background: var(--bg); }

.about-head {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: 20px;
}
.about-head h2 { font-size: clamp(28px, 3.2vw, 42px); color: var(--brand-primary); white-space: nowrap; }
.about-head-rule { flex: 1; height: 1px; background: #eaeaea; }

.about-intro { color: #434343; font-size: 18px; line-height: 1.5; max-width: 105ch; margin: 0 0 40px; }

.about-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: start;
}

.about-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: 32px;
}
.about-feature-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.about-feature-text { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.about-feature-text p { color: #434343; font-size: 18px; line-height: 1.5; margin: 0; }

.about-highlight { background: var(--brand-accent); border-radius: 5px; padding: 30px 40px; margin-bottom: 32px; }
.about-highlight p { color: #fff; font-size: 18px; line-height: 1.5; margin: 0; }

.about-close { color: #434343; font-size: 18px; line-height: 1.5; margin: 0; }

.about-sidebar { display: flex; flex-direction: column; gap: 28px; }
.about-sidebar-van img { width: 100%; }

.about-card { border: 1px solid #eaeaea; border-radius: 5px; padding: clamp(24px, 3vw, 35px) clamp(24px, 3vw, 40px); }
.about-card-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.about-card-icon { flex-shrink: 0; width: 50px; height: 50px; }
.about-card-icon svg { width: 100%; height: 100%; fill: var(--brand-primary); }
.about-card-title { font-size: 19px; font-weight: 700; color: var(--brand-primary); margin: 0; }
.about-card-sub { font-size: 15px; color: #434343; margin: 4px 0 0; }
.about-card-divider { border: 0; border-top: 1px solid #eaeaea; margin: 0 0 22px; }
.about-card-phone { text-align: center; margin: 0 0 12px; }
.about-card-phone a { font-size: 24px; font-weight: 700; color: var(--brand-primary); text-decoration: none; }
.about-card-desc { text-align: center; font-size: 15px; color: #434343; margin: 0 0 22px; }
.about-card-inquiries { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.about-card-line { font-size: 17px; color: #434343; margin: 0 0 4px; }
.about-card-line strong { color: var(--brand-primary); }
.about-card-line a { color: #434343; text-decoration: none; }
.about-card-line a:hover { color: var(--brand-primary); }

.about-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 24px;
  border-radius: 5px;
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--header-font);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease;
}
.about-cta:hover { background: var(--brand-primary-dark); color: #fff; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-feature { grid-template-columns: 1fr; }
  .about-feature-media img { aspect-ratio: 16 / 10; }
  .about-head { flex-wrap: wrap; }
}


/* =========================================================
   BANNERS (emergency / financing / final CTA)
   ========================================================= */
.banner { padding: clamp(40px, 6vw, 64px) 0; color: #fff; }
.banner h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); }
.banner-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.banner-inner-center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }

.banner-financing {
  background-color: var(--brand-primary-dark);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 34px),
    linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
}
.banner-financing .banner-inner { justify-content: space-between; }
.banner-financing h2 { margin: 0; text-transform: uppercase; }
.banner-financing .btn { text-transform: uppercase; letter-spacing: .03em; }
.banner-final { background: var(--ink); }

@media (max-width: 700px) {
  .banner-inner { flex-direction: column; align-items: flex-start; }
}


/* =========================================================
   TAGLINE CTA
   ========================================================= */
.tagline-cta { position: relative; padding: clamp(64px, 10vw, 110px) 0 clamp(130px, 18vw, 190px); overflow: hidden; }
.tagline-bg { position: absolute; inset: 0; z-index: 0; }
.tagline-bg picture { display: block; width: 100%; height: 100%; }
.tagline-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
/* White copy sits straight on this photo, which is bright throughout, so the
   contrast comes from this scrim rather than from the picture.
   The copy block covers about half the frame on desktop but 73% at tablet and
   95% on a phone, so one gradient cannot serve all three: the scrim flattens
   and deepens as the text takes over the frame. Measured against the actual
   composited pixels, worst case behind the copy is 7.9:1 / 6.8:1 / 5.1:1. */
.tagline-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(10, 22, 48, .88) 0%,
    rgba(10, 22, 48, .82) 42%,
    rgba(10, 22, 48, .55) 65%,
    rgba(10, 22, 48, .30) 85%,
    rgba(10, 22, 48, .20) 100%);
}
@media (max-width: 1024px) {
  .tagline-bg::after {
    background: linear-gradient(to right,
      rgba(10, 22, 48, .90) 0%,
      rgba(10, 22, 48, .86) 50%,
      rgba(10, 22, 48, .62) 75%,
      rgba(10, 22, 48, .40) 100%);
  }
}
@media (max-width: 600px) {
  .tagline-bg::after {
    background: linear-gradient(to right,
      rgba(10, 22, 48, .92) 0%,
      rgba(10, 22, 48, .88) 55%,
      rgba(10, 22, 48, .70) 80%,
      rgba(10, 22, 48, .52) 100%);
  }
}
.tagline-inner { position: relative; z-index: 1; }
.tagline-copy { max-width: 620px; }
.tagline-copy h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 400; line-height: 1.2; color: #fff; margin: 0; }
.tagline-copy h2 strong { display: block; font-size: clamp(36px, 5.6vw, 65px); font-weight: 700; }
.tagline-copy p { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.92); max-width: 46ch; margin: 16px 0 28px; }


/* =========================================================
   COUPONS
   ========================================================= */
.coupons { padding: clamp(8px, 1.5vw, 20px) 0 clamp(48px, 7vw, 88px); background: var(--bg); }
.coupons-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.coupons-intro { position: relative; text-align: center; isolation: isolate; --copy-w: 270px; }
/* Price-tag icon PNG used as a mask so the brand red shows
   through. Sits centred behind the intro copy as an oversized watermark; capped
   at 320px so it stays inside the row rather than bleeding into the section above.
   Centred on the intro column, matching the centred copy in front of it. The translate offsets
   are the tag's optical centre inside its square PNG (the artwork sits slightly
   right of and above centre), so the shape lands on the copy rather than the box. */
.coupons-icon {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: clamp(200px, 22vw, 320px);
  height: clamp(200px, 22vw, 320px);
  transform: translate(-54.5%, -45.5%);
  opacity: .12;
  pointer-events: none;
  background: var(--brand-primary);
  -webkit-mask: url("images/discount-tag-icon.png") center / contain no-repeat;
  mask: url("images/discount-tag-icon.png") center / contain no-repeat;
}
/* Two-column layout only: nudge the intro off the column's left edge so it sits
   a little further into the row. A margin moves the watermark with it, since the
   icon is positioned against this box; padding would leave the icon behind. */
@media (min-width: 901px) {
  .coupons-intro { margin-left: clamp(16px, 2.5vw, 34px); }
}
.coupons-intro h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; margin-bottom: 16px; }
.coupons-intro p { color: #434343; font-size: 17px; line-height: 1.5; margin: 0 auto; max-width: var(--copy-w); }

.coupon-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease, opacity .15s ease;
}
.coupon-arrow svg { width: 26px; height: 26px; }
.coupon-arrow:hover:not(:disabled) { color: var(--brand-accent); transform: translateY(-50%) scale(1.15); }
.coupon-arrow:disabled { display: none; }

.coupon-slider { position: relative; min-width: 0; }
.coupon-arrow.coupon-prev,
.coupon-arrow.coupon-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.coupon-arrow.coupon-prev { left: -44px; }
.coupon-arrow.coupon-next { right: -44px; }
/* Between the stacked breakpoint and ~1100px the side gutter is narrower than
   44px, so the next arrow pushed the page up to 8px wider than the screen. */
@media (min-width: 901px) and (max-width: 1100px) {
  .coupon-arrow.coupon-prev { left: -36px; }
  .coupon-arrow.coupon-next { right: -36px; }
}
.coupon-track {
  --coupon-gap: clamp(20px, 3vw, 32px);
  display: flex;
  gap: var(--coupon-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 8px;
  margin: -4px -2px -8px;
  cursor: grab;
}
.coupon-track::-webkit-scrollbar { display: none; }
.coupon-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.coupon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: min(320px, 82vw);
  scroll-snap-align: start;
}
@media (min-width: 901px) {
  /* Size cards so 2 sit fully in view with half of the 3rd peeking past the
     edge — a visual cue that there's more to scroll to. */
  .coupon-card { width: calc((100% - 2 * var(--coupon-gap)) / 2.5); }
}
.coupon-face {
  width: 100%;
  border: 1px dashed #d9d9d9;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 24px;
  text-align: center;
}
.coupon-face-top { display: flex; align-items: center; justify-content: space-between; }
.coupon-logo img { display: block; width: 48px; height: 48px; border-radius: 50%; }
.coupon-scissors { width: 20px; height: 20px; color: #ccc; }
.coupon-scissors svg { width: 100%; height: 100%; }
.coupon-amount { font-family: var(--heading); font-weight: 700; font-size: 40px; line-height: 1; color: var(--brand-accent); margin: 22px 0 0; }
.coupon-currency { font-size: 22px; vertical-align: top; }
.coupon-off { color: var(--ink); margin-left: 8px; }
.coupon-title { font-family: var(--heading); font-weight: 700; font-size: 20px; color: var(--ink); margin: 10px 0 8px; }
.coupon-terms { font-size: 13px; color: var(--ink-soft); margin: 0 0 20px; }
.coupon-footer {
  width: 100%;
  border: 1px dashed #d9d9d9;
  border-radius: 0 0 8px 8px;
  background: var(--surface);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-soft);
}
.coupon-print { flex-shrink: 0; width: 16px; height: 16px; color: var(--ink-soft); }
.coupon-print svg { width: 100%; height: 100%; }
.coupon-cta { margin-top: 20px; padding: 14px 32px; font-size: 16px; border-radius: 8px; }

@media (max-width: 900px) {
  .coupons-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   REVIEWS
   ========================================================= */
.reviews { position: relative; padding: clamp(48px, 7vw, 96px) 0; text-align: center; overflow: hidden; }
.reviews-bg { position: absolute; inset: 0; z-index: 0; }
.reviews-bg img { width: 100%; height: 100%; object-fit: cover; }
.reviews-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.65); }
.reviews-inner { position: relative; z-index: 1; }
.reviews-cta { margin-top: clamp(30px, 4vw, 46px); }
.reviews h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 40px; }
.review-slider { position: relative; }
.review-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex-shrink: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
  transition: color .15s ease, transform .15s ease, opacity .15s ease;
}
.review-arrow svg { width: 26px; height: 26px; }
.review-arrow:hover:not(:disabled) { color: var(--brand-primary); transform: translateY(-50%) scale(1.15); }
.review-arrow:disabled { display: none; }
.review-arrow.review-prev,
.review-arrow.review-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.review-arrow.review-prev { left: -44px; }
.review-arrow.review-next { right: -44px; }

@media (max-width: 900px) {
  /* Stacked layout: the side gutters these arrows hang in on desktop are gone,
     so at -44px they sat past the edge of the screen (the coupon one widened
     the home page by 24px on phones, the review one was clipped out of sight).
     Both sliders park their arrows in a centred row under the track instead,
     and a disabled arrow stays as a faded placeholder so the pair doesn't jump
     sides at either end. */
  .coupon-slider,
  .review-slider { padding-bottom: 56px; }
  .coupon-arrow.coupon-prev,
  .coupon-arrow.coupon-next,
  .review-arrow.review-prev,
  .review-arrow.review-next { top: auto; bottom: 0; transform: none; }
  .coupon-arrow.coupon-prev,
  .review-arrow.review-prev { left: calc(50% - 46px); }
  .coupon-arrow.coupon-next,
  .review-arrow.review-next { right: calc(50% - 46px); }
  .coupon-arrow:disabled,
  .review-arrow:disabled { display: flex; opacity: .3; cursor: default; }
  .coupon-arrow:hover:not(:disabled),
  .review-arrow:hover:not(:disabled) { transform: scale(1.15); }
}

.review-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.review-track::-webkit-scrollbar { display: none; }
.review-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.review-page {
  flex: 0 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  text-align: left;
  scroll-snap-align: start;
}
.review-card {
  position: relative;
  background: #fff;
  border-radius: 5px;
  padding: 28px;
  margin: 0;
}
.review-quote-icon { position: absolute; top: 24px; right: 24px; width: 34px; height: 34px; }
.review-quote-icon svg { width: 100%; height: 100%; fill: var(--brand-primary); }
.review-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-right: 40px; }
.review-logo img { display: block; width: 48px; height: 48px; border-radius: 50%; }
.review-name { font-family: var(--heading); font-weight: 700; font-size: 17px; color: var(--ink); margin: 0 0 6px; }
.review-name span { font-weight: 400; color: var(--ink-soft); }
.review-stars { display: block; }
.review-card p { color: var(--ink); font-size: 15.5px; line-height: 1.6; margin: 0; }


/* =========================================================
   SERVICE AREAS
   ========================================================= */
/* Not --brand-primary: the map image carries the red itself, and this
   matches its ground colour so the
   section doesn't flash a darker red before the lazy-loaded map paints. */
.service-areas { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 88px) 0; background: #C43745; text-align: center; }
.service-areas-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* The map, not the wrapper, is what parallaxes: it drifts behind the city list
   as the section scrolls. Inset 200px past the top and bottom to give the
   translate room to travel without exposing a gap — PARA_RANGE in site.js
   must stay under that overhang. */
.service-areas-bg picture { position: absolute; inset: -200px 0; display: block; }
.service-areas-bg picture.is-parallax { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .service-areas-bg picture { inset: 0; transform: none; }
}
.service-areas-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Pinned to the section, not to the parallaxing map: a barely-there black
   wash that settles the whole panel down a step so the white city labels and
   heading sit up off it. */
.service-areas-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.12); }
.service-areas .wrap { position: relative; z-index: 1; }
.service-areas h2 { color: #fff; font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 32px; }
.area-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 20px;
  max-width: 960px;
  margin: 0 auto;
}
.area-grid li {
  color: rgba(255,255,255,.9);
  font-weight: 600;
  font-size: clamp(17px, 1.35vw, 19px);
  padding: 10px 0;
}
/* Each city links to its own page. The labels sit on a busy map, so hover
   lifts them off it rather than recolouring them: pure white, a step bolder,
   and a soft dark shadow behind the glyphs. Weight is not transitioned — these
   are static-weight faces, so it would snap rather than ease. */
.area-grid a {
  color: inherit;
  text-decoration: none;
  display: block;
  transition: color .18s ease, text-shadow .18s ease;
}
.area-grid a:hover,
.area-grid a:focus-visible {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 18px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.18);
}
/* Matches .reviews-cta so the two "see everything" buttons on the home page
   sit the same distance below their lists. Thinner than the 2px the button
   system defaults to: a hairline reads better against the map than a slab. */
.areas-cta {
  margin-top: clamp(30px, 4vw, 46px);
  border-width: 1px;
  border-color: rgba(255,255,255,.7);
}
@media (max-width: 700px) {
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding: clamp(48px, 7vw, 96px) 0; }
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}
.contact-info h2 { font-size: clamp(26px, 3.2vw, 34px); margin-bottom: 16px; }
.contact-info > p { color: var(--ink-soft); font-size: 16px; max-width: 46ch; }
.contact-list { margin: 28px 0 0; }
.contact-list > div { padding: 14px 0; border-top: 1px solid var(--rule); }
.contact-list dt { font-family: var(--heading); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-primary); margin: 0 0 4px; }
.contact-list dd { margin: 0; font-size: 16px; }
.contact-list dd a { color: var(--ink); text-decoration: none; }
.contact-list dd a:hover { color: var(--brand-primary); }

.contact-form-card {
  background: var(--surface);
  border-radius: 16px;
  padding: clamp(24px, 4vw, 36px);
}
.contact-form-card h3 { font-size: 22px; margin-bottom: 20px; }

/* GoHighLevel form embed. Pre-load height floor only; form_embed.js sets the
   real height after its postMessage handshake. Don't raise the floor. */
.qf-embed iframe {
  display: block;
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: 3px;
  background: transparent;
}
.form-row { margin-bottom: 16px; }
.form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  background: #fff;
  color: var(--ink);
}
.form-row textarea { resize: vertical; }
.form-row-checkbox { display: flex; gap: 10px; align-items: flex-start; }
.form-row-checkbox input { margin-top: 4px; flex-shrink: 0; }
.form-row-checkbox label { font-size: 12.5px; font-weight: 400; color: var(--ink-soft); line-height: 1.5; }
.form-submit { width: 100%; margin-top: 4px; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .form-row-split { grid-template-columns: 1fr; }
}


/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner { position: relative; overflow: hidden; background: var(--bg); padding: clamp(56px, 9vw, 90px) 0 clamp(32px, 5vw, 56px); }
.cta-banner-bg { position: absolute; inset: 0; z-index: 0; }
.cta-banner-bg picture { display: block; width: 100%; height: 100%; }
.cta-banner-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
/* The copy in this banner is dark type straight on the photo, which only works
   while the left of the photo is washed out. Three of the four banners use a
   shot that happens to be light there; /services uses a different one that is
   not, and the heading dropped to roughly 2:1 against it. This scrim puts the
   guarantee in the CSS instead of in the choice of photo, so any image can be
   swapped in. It fades out well before the subject on the right. */
.cta-banner-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(255,255,255,.90) 0%,
    rgba(255,255,255,.88) 42%,
    rgba(255,255,255,.45) 62%,
    rgba(255,255,255,0) 78%);
}
.cta-banner-wrap { position: relative; z-index: 1; }
.cta-banner-inner { max-width: 560px; }
/* Each half of this heading has to hold one line. "Services Repair &
   Maintenance" is the longer of the two at 29 characters, and the block
   stays 560px because anything wider pushes the type past the washed
   part of the photo and the contrast falls apart. That caps the size at
   about 36px on desktop, with negative tracking buying the extra room. */
.cta-banner-inner h2 { font-size: clamp(21px, 2.9vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 16px; }
.cta-banner-accent { display: block; color: var(--brand-primary); white-space: nowrap; }
.cta-banner-line2 { display: block; color: var(--ink); white-space: nowrap; }
.cta-banner-inner p { color: #434343; font-size: 17px; line-height: 1.5; margin: 0 0 28px; max-width: 56ch; }
.cta-banner-btn { text-transform: uppercase; letter-spacing: .03em; }

@media (max-width: 900px) {
  .cta-banner-bg img { object-position: 85% 50%; opacity: .35; }
  .cta-banner-inner { max-width: none; }
}
/* Below this the viewport is narrower than the line needs, so let it wrap
   rather than overflow the screen. */
@media (max-width: 560px) {
  .cta-banner-accent,
  .cta-banner-line2 { white-space: normal; }
}


/* =========================================================
   MAP EMBED
   ========================================================= */
.map-embed { line-height: 0; background: #1C1E22; padding: 20px; }
.map-embed iframe { display: block; width: 100%; height: clamp(320px, 40vw, 480px); border: 0; }


/* =========================================================
   BOOKING MODAL
   ========================================================= */
/* Hosts the Sera scheduling widget over the current page. Hidden until
   site.js opens it, and absent entirely for anyone without JS, who follows
   the CTA through to /schedule-appointment instead. */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(12px, 4vh, 48px) clamp(12px, 4vw, 32px);
  padding-top: max(clamp(12px, 4vh, 48px), env(safe-area-inset-top, 0px));
  padding-bottom: max(clamp(12px, 4vh, 48px), env(safe-area-inset-bottom, 0px));
  background: rgba(0,0,0,.55);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.booking-modal[data-open="true"] { display: flex; }
body.booking-open { overflow: hidden; }

.booking-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
}
.booking-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
}
.booking-modal__close:hover { background: rgba(0,0,0,.12); }
.booking-modal__close:focus-visible { outline: 3px solid var(--brand-accent); outline-offset: 2px; }
/* The widget paints its own chrome, so the body is just a padded well. The
   min-height keeps the dialog from collapsing in the beat before it mounts. */
.booking-modal__body { min-height: 420px; padding: 44px 0 8px; }
.booking-modal__body schedule-appointment { display: block; }

/* Embedded form on /schedule-appointment itself. */
.booking-embed { max-width: 680px; margin: 0 auto; min-height: 420px; }
.booking-embed schedule-appointment { display: block; }
.booking-embed__fallback { text-align: center; color: var(--ink-soft); }

@media (max-width: 600px) {
  .booking-modal__dialog { border-radius: 10px; }
  .booking-modal__body { min-height: 360px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: linear-gradient(to bottom, #1c1e22, #000); color: rgba(255,255,255,.82); }
/* Six visually equal footer columns. The services block is one grid item that
   spans three tracks and re-splits them with the same 40px gutter, so its three
   lists line up on the outer grid instead of bunching together. */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 40px;
  padding: clamp(48px, 6vw, 72px) var(--gut) 40px;
}
.footer-col--services { grid-column: span 3; }
.footer-col h3 { color: #fff; font-size: 16px; margin-bottom: 16px; }
.footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 50%;
  margin-bottom: 16px;
}
.footer-logo img { display: block; width: 64px; height: 64px; }
.footer-col ul { display: flex; flex-direction: column; gap: 0; }
.footer-col a { color: rgba(255,255,255,.75); text-decoration: none; font-size: 14.5px; }
.footer-col a:hover { color: #fff; }
.footer-col p { font-size: 14.5px; color: rgba(255,255,255,.75); margin: 0 0 14px; }
.footer-col p a { color: rgba(255,255,255,.9); }
/* Emergency-response disclaimer under the footer hours line. Smaller and
   dimmer than the contact lines above it, since it is fine print. */
.footer-col p.footer-note { font-size: 11.5px; font-style: italic; line-height: 1.45; color: rgba(255,255,255,.55); margin: -8px 0 14px; }

.footer-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 40px;
}
.footer-services__group a { font-size: 14px; }

.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: filter .15s ease;
}
.footer-social-link svg { width: 16px; height: 16px; fill: #fff; }
.footer-social-facebook { background: #1877F2; }
.footer-social-youtube { background: #FF0000; }
.footer-social-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.footer-social-link:hover { filter: brightness(1.12); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.footer-bottom-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  padding: 18px var(--gut);
  font-size: 13px;
  color: rgba(255,255,255,.6);
}
.footer-bottom-logo { position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%); margin-bottom: 0; }
.footer-bottom-text { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.footer-bottom-text p { margin: 0; }
.footer-license { color: rgba(255,255,255,.6); }
.footer-license span { color: rgba(255,255,255,.85); font-weight: 600; letter-spacing: .02em; }
.footer-legal a { color: rgba(255,255,255,.6); }
.footer-legal a:hover { color: #fff; }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-col--services { grid-column: 1 / -1; order: 1; }
  .footer-services { gap: 20px 40px; }
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-services { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom-inner { flex-direction: column; gap: 16px; }
  .footer-bottom-logo { position: static; transform: none; }
}


/* =========================================================
   INNER PAGES — shared (About / Services / Financing / Contact)
   ========================================================= */
.page-header {
  background: linear-gradient(135deg, var(--brand-accent) 0%, #001238 100%);
  padding: clamp(44px, 7vw, 76px) 0 clamp(36px, 5vw, 56px);
  text-align: center;
}
.breadcrumb {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.breadcrumb a { color: rgba(255,255,255,.9); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.page-header h1 { color: #fff; font-size: clamp(32px, 5vw, 50px); line-height: 1.15; margin: 0 0 14px; }
.page-header-lede { color: rgba(255,255,255,.85); font-size: 17px; line-height: 1.6; max-width: 640px; margin: 0 auto; }

.page-section { padding: clamp(48px, 7vw, 88px) 0; }
.page-section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 5vw, 48px); }
.page-section-head h2 { font-size: clamp(26px, 3.2vw, 36px); margin-bottom: 12px; }
.page-section-head p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.6; margin: 0; }
/* Section head in the sv- type system (eyebrow + sv-h2), shared with the
   About page. The --left modifier lines it up with the grid underneath. */
.sv-sec-head { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 5vw, 48px); }
.sv-sec-head .sv-h2 { margin: 0; color: var(--ink); }
.sv-sec-head__sub { color: var(--ink-soft); font-size: 17px; line-height: 1.65; margin: 16px 0 0; }
.sv-sec-head--left { text-align: left; max-width: 720px; margin-inline: 0; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.info-card { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 26px; }
.info-card-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}
.info-card h3 { font-size: 18px; margin: 0 0 8px; }
.info-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0; }

.service-category:nth-of-type(even) { background: var(--surface); }
.service-sub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 36px; }
.service-sub-item { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 20px 22px; }
.service-sub-item h3 { font-size: 16px; margin: 0 0 6px; }
.service-sub-item p { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin: 0; }

.cert-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.cert-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--rule);
  font-family: var(--heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--ink);
}
.cert-chip svg { width: 16px; height: 16px; color: var(--brand-primary); flex-shrink: 0; }
.service-sub-item h3 a { color: inherit; text-decoration: none; }
.service-sub-item h3 a:hover { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }


/* =========================================================
   SERVICE PAGES — sv- layout system
   Container/gutters aligned to .wrap via --content-w/--gut,
   64/112 section rhythm.
   ========================================================= */
.sv-container { max-width: var(--content-w); margin-inline: auto; }

.sv-h1 {
  font-size: 72px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sv-h1 strong { font-weight: 700; }
.sv-h2 {
  font-size: 48px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sv-h2 strong { font-weight: 700; }
.sv-h2-center { text-align: center; }

/* ---- Hero ---- */
.sv-hero { position: relative; overflow: hidden; background: #fff; }
.sv-hero__bg { position: absolute; inset: 0; z-index: 0; }
.sv-hero__bg picture { width: 100%; height: 100%; }
.sv-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
.sv-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(10,14,20,.85) 0%, rgba(10,14,20,.6) 45%, rgba(10,14,20,.15) 100%);
}
.sv-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 128px var(--gut) 80px;
}
.sv-hero__inner > * { max-width: var(--content-w); }
.sv-hero__content { width: 100%; max-width: var(--content-w); margin-inline: auto; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.sv-hero__eyebrow {
  font-family: var(--heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #C9CDD3;
  margin: 0 0 -8px;
}
.sv-hero__eyebrow span { color: var(--brand-primary); padding: 0 6px; font-family: var(--header-font); font-weight: 400; }
/* Wrapper for the city that drops off small screens; it is a span too, so
   it has to opt out of the separator styling above. */
.sv-hero__eyebrow .sv-hero__eyebrow-opt { color: inherit; padding: 0; font-family: inherit; font-weight: inherit; }
.sv-hero__title { margin: 0; color: #fff; }
.sv-hero__sub { font-size: 20px; line-height: 1.6; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.92); margin: 0; }
/* The hero content is a 24px flex stack; the sub reads as part of the
   title, so pull it back to a tighter 10px off the h1. */
.sv-hero__title + .sv-hero__sub { margin-top: -14px; }
.sv-stars { display: inline-flex; gap: 2px; }
.sv-stars svg { width: 16px; height: 16px; fill: #F6B01E; }
.sv-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.sv-hero__actions .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.sv-hero__actions .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
.sv-btn-phone svg { width: 20px; height: 20px; flex-shrink: 0; }
.sv-hero--about .sv-hero__bg img { object-position: 62% 78%; }
.sv-hero--about .sv-hero__inner { padding-bottom: 132px; }
.sv-hero--contact .sv-hero__bg img { object-position: 50% 42%; }
.sv-hero--contact .sv-hero__inner { padding-bottom: 132px; }
.sv-hero--financing .sv-hero__bg img { object-position: 50% 58%; }
.sv-hero--furnace-attic .sv-hero__bg img { object-position: 62% 55%; }
.sv-hero--attic-duct .sv-hero__bg img { object-position: 50% 90%; }
.sv-hero--ac-repair-hms .sv-hero__bg img { object-position: 50% 25%; }
.sv-hero--ac-maint-hms .sv-hero__bg img { object-position: 50% 40%; }
.sv-hero--disposal .sv-hero__bg img { object-position: 60% 100%; }
.sv-hero--duct-clean .sv-hero__bg img { object-position: 50% 60%; }
.sv-hero--financing .sv-hero__inner { padding-bottom: 132px; }

/* ---- Owner letter (About) ---- */
.sv-owner { background: var(--surface); padding: clamp(64px, 7vw, 104px) var(--gut); }
.sv-owner__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
/* The photo is portrait and the source is only 474px wide, so the frame is
   capped at its natural width and centred in the column rather than stretched
   to fill it. */
.sv-owner__media { position: relative; margin: 0; max-width: 474px; margin-inline: auto; }
/* Offset tile behind the photo, same treatment as the About/Why photos and the
   coverage stage: pushed to the outer edge, away from the text column. */
.sv-owner__media::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(-28px, 28px);
  background: rgba(0,37,110,.16);
  border-radius: 8px;
}
.sv-owner__media picture { position: relative; z-index: 1; display: block; }
.sv-owner__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.sv-owner__title,
.sv-stand__title { margin: 0 0 26px; color: var(--ink); }
/* Seal sits inside the photo near the bottom-right corner. It is almost black,
   so the faint white glow traces the scalloped edge and keeps it off the mulch
   behind it. */
.sv-owner__media .sv-owner__badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  width: clamp(96px, 28%, 136px);
}
.sv-owner__media .sv-owner__badge img {
  width: 100%;
  height: auto;
  border-radius: 0;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)) drop-shadow(0 0 2px rgba(255,255,255,.6));
}
.sv-owner__copy p:not(.sv-eyebrow) { font-size: 18px; line-height: 1.75; color: #434343; margin: 0 0 22px; }
.sv-owner__copy p.sv-owner__signoff { margin-bottom: 6px; }
.sv-owner__copy p.sv-owner__signature {
  font-family: "Yellowtail", "Snell Roundhand", "Segoe Script", cursive;
  font-size: clamp(52px, 5.8vw, 72px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--brand-accent);
  /* The face sits high in its box; the negative margins keep the signature
     optically tied to "Sincerely," above and the role line below. */
  margin: -6px 0 8px;
}
/* ---- Stand behind our work (About) ---- */
/* Two photos stacked with the second offset down and to the right, overlapping
   the first. The stack's bottom padding is the room that offset needs. */
.sv-stand { background: var(--bg); padding: clamp(64px, 7vw, 104px) var(--gut); }
.sv-stand__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
.sv-stand__stack { position: relative; padding-bottom: 39%; }
.sv-stand__shot { margin: 0; }
.sv-stand__shot picture { display: block; }
.sv-stand__shot img {
  display: block;
  width: 100%;
  height: auto;
  /* Both photos render at the same box size, so the two sources are cropped to
     a shared 4:5 rather than each keeping its own aspect ratio. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(12,14,18,.24), 0 3px 10px rgba(12,14,18,.10);
}
/* Stack mirrors the layout: back photo to the outer (right) edge, front photo
   offset down and in toward the text column. */
.sv-stand__shot--back { width: 64%; margin-left: auto; }
.sv-stand__shot--front { position: absolute; left: 0; bottom: 0; width: 64%; }
/* White edge keeps the front photo readable where it sits over the back one. */
.sv-stand__shot--front img { border: 2px solid #fff; }
.sv-stand__copy p:not(.sv-eyebrow) { font-size: 18px; line-height: 1.75; color: #434343; margin: 0 0 22px; }
.sv-stand__copy p:last-child { margin-bottom: 0; }

/* ---- Process accordion (About) ---- */
.sv-howto { background: var(--surface); padding: clamp(64px, 7vw, 104px) var(--gut); }
.sv-howto__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 84px);
  align-items: center;
}
.sv-howto__intro { position: relative; text-align: center; }
/* Brand mark blown up as a watermark behind the intro column. */
.sv-howto__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(420px, 92%);
  transform: translate(-50%, -50%);
  /* Full brand colour, held back by opacity alone so the copy stays readable
     over it. */
  opacity: .05;
  pointer-events: none;
}
.sv-howto__mark img { display: block; width: 100%; height: auto; }
.sv-howto__title,
.sv-howto__sub,
.sv-howto__intro .sv-eyebrow,
.sv-howto__intro .btn { position: relative; z-index: 1; }
.sv-howto__title { position: relative; z-index: 1; margin: 0 0 24px; color: var(--ink); }
.sv-howto__sub {
  position: relative;
  z-index: 1;
  max-width: 30ch;
  margin: 0 auto 32px;
  font-size: 18px;
  line-height: 1.7;
  color: #434343;
}

.sv-howto__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sv-howto__step {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.sv-howto__step[open] { border-color: var(--rule); box-shadow: 0 2px 10px rgba(12,14,18,.05); }
.sv-howto__step summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px clamp(20px, 2vw, 28px);
  cursor: pointer;
  font-family: var(--heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  list-style: none;
}
.sv-howto__step summary::-webkit-details-marker { display: none; }
/* Custom marker in place of the browser triangle. */
.sv-howto__step summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--brand-primary);
}
.sv-howto__step[open] summary::after { content: "\2212"; }
.sv-howto__step summary:hover { color: var(--brand-primary); }
.sv-howto__step summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -3px; border-radius: 10px; }
.sv-howto__body { padding: 0 clamp(20px, 2vw, 28px) 26px; }
.sv-howto__body p { font-size: 17px; line-height: 1.7; color: #434343; margin: 0; }

/* ---- Featured testimonial (About) ---- */
.sv-quote { background: var(--bg); padding: clamp(64px, 7vw, 100px) var(--gut); }
.sv-quote__inner { max-width: 1120px; margin-inline: auto; text-align: center; }
.sv-quote__card { position: relative; margin: 0 0 40px; }
.sv-quote__mark {
  display: block;
  width: 46px;
  margin: 0 auto 22px;
  color: var(--brand-primary);
  opacity: .22;
}
.sv-quote__mark svg { display: block; width: 100%; height: auto; fill: currentColor; }
.sv-quote__text { margin: 0; }
.sv-quote__text p {
  font-size: clamp(24px, 2.9vw, 33px);
  line-height: 1.5;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  margin: 0;
}

/* ---- Core values band (About) ---- */
/* Editorial band rather than cards: navy ground, hairline dividers between the
   columns, and an oversized ghost numeral behind each icon. */
.sv-values {
  /* Dark grey running into the brand navy, left to right. The flat colour is a
     fallback for anything that cannot paint the gradient. */
  background: #22262B;
  background: linear-gradient(105deg, #22262B 0%, #1E2A45 55%, #00256E 100%);
  padding: clamp(64px, 6.5vw, 96px) var(--gut);
}
.sv-values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.sv-value {
  position: relative;
  padding: 4px clamp(28px, 3.4vw, 52px);
}
.sv-value + .sv-value { border-left: 1px solid rgba(255,255,255,.18); }
.sv-value:first-child { padding-left: 0; }
.sv-value:last-child { padding-right: 0; }
.sv-value__num {
  position: absolute;
  top: -46px;
  left: clamp(28px, 3.4vw, 52px);
  font-family: var(--heading);
  font-size: clamp(120px, 11vw, 156px);
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,.028);
  pointer-events: none;
}
.sv-value:first-child .sv-value__num { left: 0; }
.sv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sv-value__icon {
  position: relative;
  display: block;
  width: 68px;
  height: 68px;
  margin: 0 0 28px;
  /* Paint-server stroke with a flat fallback colour, in case the gradient
     reference cannot be resolved. */
  color: #DCE1E7;
  stroke: url(#svValueIcon) #DCE1E7;
}
/* Overrides the stroke-width presentation attribute on the inline SVGs, which
   CSS outranks. */
.sv-value__icon svg { display: block; width: 100%; height: 100%; stroke: inherit; stroke-width: 1.15; }
.sv-value h3 {
  position: relative;
  font-family: var(--heading);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  margin: 0 0 14px;
}
.sv-value p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.76); margin: 0; }

.sv-owner__copy p.sv-owner__role {
  font-family: var(--heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}


/* ---- Credentials strip (press-logo ticker equivalent) ---- */
.sv-press {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 64px 0 72px;
  text-align: center;
  /* Full-bleed band, so only the top and bottom edges of the shadow show.
     Two offsets rather than one keeps it reading as a raised strip. */
  box-shadow: 0 -6px 26px rgba(17,17,17,.07), 0 8px 30px rgba(17,17,17,.09);
}
.sv-press__eyebrow {
  font-family: var(--heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 768px;
  margin: 0 auto 24px;
}
.sv-press__ticker { position: relative; overflow: hidden; }
.sv-press__ticker::before,
.sv-press__ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 118px;
  z-index: 2;
  pointer-events: none;
}
.sv-press__ticker::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.sv-press__ticker::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.sv-press__track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  padding-right: 64px;
  animation: sv-marquee 60s linear infinite;
}
.sv-press__track img { height: 48px; width: auto; }
.sv-press__chip {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.sv-press__grid { display: none; }
@keyframes sv-marquee { to { transform: translateX(-50%); } }

/* ---- Intro ---- */
.sv-intro { background: #fff; padding: 80px var(--gut) 96px; }
.sv-intro .sv-h2 { margin: 0 0 36px; }
.sv-intro__body {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-soft);
  /* Full container width, no capped measure here. */
  max-width: 100%;
  margin-inline: auto;
}
.sv-intro__body p { margin: 0 0 20px; }
.sv-intro__body p:last-child { margin-bottom: 0; }
.sv-intro .sv-btn-row { margin-top: 36px; }
/* ---- Process ---- */
.sv-process { background: #FAFAFA; padding: 96px var(--gut) 112px; }
.sv-process__head { text-align: center; max-width: 900px; margin: 0 auto 56px; }
/* Shared section eyebrow: centred label with a rule on each side. */
.sv-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 18px;
}
.sv-eyebrow::before,
.sv-eyebrow::after { content: ""; width: 44px; height: 2px; background: var(--brand-primary); }
/* Left-aligned variant for headings that sit in a column rather than centred. */
.sv-eyebrow--left { justify-content: flex-start; }
.sv-eyebrow--left::after { display: none; }
/* Reviews has no side padding of its own, so match the heading's inset. */
.sv-reviews .sv-eyebrow { padding: 0 32px; }
.sv-process__head .sv-h2 { margin: 0; }
.sv-process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Column-major: 1-2-3 fill the left column, 4-5-6 the right. Needs explicit
     rows, otherwise auto-flow column would spill into implicit columns. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 20px;
}
.sv-process__step {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 28px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(17,17,17,.07);
  box-shadow: 0 1px 2px rgba(17,17,17,.04);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sv-process__step:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(17,17,17,.11); }
.sv-process__num {
  position: absolute;
  top: 8px;
  right: 24px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 152px;
  line-height: 1;
  color: rgba(0,37,110,.07);
  transition: opacity .25s ease, color .25s ease;
}
/* Gradient fill, brand blue running into dark gray. Guarded because the
   transparent text-fill would hide the numeral entirely where background-clip
   on text is unsupported; the flat colour above is the fallback. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sv-process__num {
    color: var(--brand-accent);
    background-image: linear-gradient(145deg, var(--brand-accent) 10%, #4B515C 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .1;
  }
  .sv-process__step:hover .sv-process__num { opacity: .95; }
}
.sv-process__thumb {
  width: 128px;
  height: 128px;
  border-radius: 14px;
  overflow: hidden;
  transform: rotate(-2deg);
  box-shadow: 0 12px 26px rgba(17,17,17,.14);
  transition: transform .3s ease;
}
.sv-process__step:nth-child(even) .sv-process__thumb { transform: rotate(2deg); }
.sv-process__step:hover .sv-process__thumb { transform: rotate(0) scale(1.04); }
.sv-process__thumb picture { display: block; width: 100%; height: 100%; }
.sv-process__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sv-process__body { padding-right: 116px; }
.sv-process__body h3 { font-size: 22px; line-height: 1.35; font-weight: 600; margin: 0 0 8px; }
.sv-process__body p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ---- About split ---- */
.sv-about { position: relative; overflow: hidden; background: #FAFAFA; padding: 64px var(--gut) 112px; }
.sv-about__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 44px;
  justify-content: center;
  align-items: center;
}
.sv-about__media { position: relative; aspect-ratio: 1; }
/* Offset colour tile behind the photo, pushed to the outer edge away from the
   text column. The ::before keeps z-index auto and the picture is lifted to
   z-index 1, so the photo layers over it without needing a negative z-index
   (which would drop behind the section background). */
.sv-about__media::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(-28px, 28px);
  background: rgba(28,32,38,.17);
  border-radius: 8px;
}
.sv-about__media picture { position: relative; z-index: 1; width: 100%; height: 100%; }
.sv-about__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.sv-about__content .sv-h2 { margin: 0; }
.sv-about__body { font-size: 18px; line-height: 1.75; color: #434343; margin: 24px 0 0; }
.sv-about__checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 48px auto 0;
  max-width: 580px;
}
.sv-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: 0 1px 2px rgba(17,17,17,.05);
  font-family: var(--heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sv-check:hover {
  transform: translateY(-2px);
  border-color: rgba(181,5,23,.28);
  box-shadow: 0 12px 24px rgba(17,17,17,.09);
}
.sv-check svg {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* ---- Why / signs list ---- */
/* overflow-x clipped like .sv-about: the offset tile behind the photo sits
   28px outside the grid, which is past the gutter on mid-size screens and
   would otherwise scroll the page sideways. */
.sv-why { background: #fff; padding: 64px var(--gut) 112px; overflow-x: clip; }
.sv-why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px;
  justify-content: center;
  align-items: center;
  margin-top: 64px;
}
.sv-why__item { display: flex; align-items: flex-start; gap: 24px; padding: 24px 0; }
.sv-why__item svg { width: 48px; height: 48px; color: var(--brand-primary); flex-shrink: 0; }
.sv-why__item p { font-size: 18px; line-height: 1.75; color: #434343; margin: 0; }
.sv-why__item strong { color: var(--ink); font-weight: 700; }
.sv-why__media { position: relative; }
.sv-why__media::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(28px, 28px);
  background: rgba(0,37,110,.16);
  border-radius: 8px;
}
.sv-why__media picture { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 1; }
.sv-why__media img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.sv-btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 64px; }
.sv-why .sv-btn-row { margin-top: 64px; }

/* ---- Coverage index (interactive) ---- */
.sv-cov { position: relative; background: #0C0E12; padding: 96px var(--gut) 112px; overflow: hidden; isolation: isolate; }
.sv-cov__atmo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 640px at 8% -4%, rgba(181,5,23,.30), transparent 62%),
    radial-gradient(900px 720px at 102% 104%, rgba(181,5,23,.17), transparent 60%),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
}
.sv-cov__atmo::after {
  content: ""; position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sv-cov__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 72px; }
.sv-cov__eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--heading); font-size: 13px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin: 0 0 18px;
}
.sv-cov__eyebrow-rule { width: 44px; height: 2px; background: var(--brand-primary); }
.sv-cov__title { color: #fff; margin: 0; }
.sv-cov__title strong { color: #FF6470; }
.sv-cov__shield {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  max-width: 260px;
  padding: 16px 26px 16px 20px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.11);
}
.sv-cov__shield-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  color: #FF4D5E;
}
.sv-cov__shield-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,77,94,.26), transparent 68%);
}
.sv-cov__shield-icon svg { position: relative; width: 100%; height: 100%; }
.sv-cov__shield-copy { min-width: 0; }
.sv-cov__shield-title {
  font-family: var(--heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  margin: 0;
}
.sv-cov__layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 88px); align-items: start; }

/* stage */
.sv-cov__stage {
  position: sticky; top: 32px; aspect-ratio: 4 / 5; max-height: 660px;
  border-radius: 20px; overflow: hidden; background: #14171C;
  border: 1px solid rgba(255,255,255,.08);
  /* Same offset tile as the About/Why photos, in white for the dark section.
     A hard box-shadow rather than a ::before because the stage clips its own
     overflow to crop the shots, which would eat an offset pseudo-element. */
  box-shadow: -28px 28px 0 rgba(255,255,255,.55);
}
.sv-cov__shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .5s ease; }
.sv-cov__shot picture { display: block; width: 100%; height: 100%; }
.sv-cov__shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 6s cubic-bezier(.22,.61,.36,1); }
.sv-cov__shot::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,14,18,0) 42%, rgba(12,14,18,.74) 100%),
    linear-gradient(120deg, rgba(181,5,23,.20), transparent 55%);
}
.sv-cov__shot--1 { opacity: 1; }
.sv-cov__readout {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px;
  border-radius: 999px; background: rgba(10,12,16,.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.16); color: #fff;
  font-family: var(--heading); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
}
.sv-cov__point {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: #FF4D5E;
  flex-shrink: 0;
  animation: sv-cov-point 2.2s ease-in-out infinite;
}
.sv-cov__point svg { width: 100%; height: 100%; display: block; }
@keyframes sv-cov-point {
  0%, 100% { transform: translateX(0); opacity: .7; }
  50% { transform: translateX(3px); opacity: 1; }
}
.sv-cov__bracket { position: absolute; z-index: 2; width: 26px; height: 26px; border: 2px solid rgba(255,255,255,.55); }
.sv-cov__bracket--tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.sv-cov__bracket--br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

/* index rows */
.sv-cov__index { list-style: none; margin: 0; padding: 0; }
.sv-cov__row {
  position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px;
  gap: 0 24px; align-items: start; padding: 26px 10px 26px 22px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: background .3s ease;
}
.sv-cov__row:first-child { border-top: 1px solid rgba(255,255,255,.12); }
.sv-cov__row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #FF4D5E, var(--brand-primary));
  transform: scaleY(0); transform-origin: top; transition: transform .4s ease;
}
.sv-cov__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin-top: 2px; border-radius: 14px;
  color: rgba(255,255,255,.46);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease;
}
.sv-cov__icon svg { width: 27px; height: 27px; display: block; }
.sv-cov__name { margin: 0; }
.sv-cov__name a {
  font-family: var(--heading); font-size: 26px; font-weight: 600; line-height: 1.25;
  color: #fff; text-decoration: none;
}
.sv-cov__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sv-cov__arrow {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); color: #fff;
  transform: rotate(45deg);
  transition: transform .35s ease, background .3s ease, border-color .3s ease;
}
.sv-cov__arrow svg { width: 18px; height: 18px; }
.sv-cov__reveal { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1); }
.sv-cov__reveal-in { overflow: hidden; min-height: 0; }
.sv-cov__reveal-in p { margin: 14px 0 0; font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.72); max-width: 560px; }
.sv-cov__go {
  display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 4px;
  font-family: var(--heading); font-size: 13px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #FF6470;
}
.sv-cov__go svg { width: 15px; height: 15px; }
.sv-cov__thumb { display: none; }

@media (min-width: 992px) {
  .sv-cov__reveal { grid-template-rows: 0fr; }
  /* active row: default = first, else the hovered/focused one */
  .sv-cov__index:not(:has(.sv-cov__row:is(:hover, :focus-within))) .sv-cov__row:first-child,
  .sv-cov__row:is(:hover, :focus-within) {
    background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0) 72%);
  }
  .sv-cov__index:not(:has(.sv-cov__row:is(:hover, :focus-within))) .sv-cov__row:first-child::before,
  .sv-cov__row:is(:hover, :focus-within)::before { transform: scaleY(1); }
  .sv-cov__index:not(:has(.sv-cov__row:is(:hover, :focus-within))) .sv-cov__row:first-child .sv-cov__icon,
  .sv-cov__row:is(:hover, :focus-within) .sv-cov__icon {
    color: #fff; background: var(--brand-primary); border-color: transparent; transform: scale(1.06);
  }
  .sv-cov__index:not(:has(.sv-cov__row:is(:hover, :focus-within))) .sv-cov__row:first-child .sv-cov__reveal,
  .sv-cov__row:is(:hover, :focus-within) .sv-cov__reveal { grid-template-rows: 1fr; }
  .sv-cov__index:not(:has(.sv-cov__row:is(:hover, :focus-within))) .sv-cov__row:first-child .sv-cov__arrow,
  .sv-cov__row:is(:hover, :focus-within) .sv-cov__arrow { transform: rotate(0deg); background: var(--brand-primary); border-color: transparent; }
  /* stage shot swapping */
  .sv-cov__layout:has(.sv-cov__row:not(:first-child):is(:hover, :focus-within)) .sv-cov__shot--1 { opacity: 0; }
  .sv-cov__layout:not(:has(.sv-cov__row:is(:hover, :focus-within))) .sv-cov__shot--1 img,
  .sv-cov__layout:has(.sv-cov__row:nth-child(1):is(:hover, :focus-within)) .sv-cov__shot--1 img { transform: scale(1.02); }
  .sv-cov__layout:has(.sv-cov__row:nth-child(2):is(:hover, :focus-within)) .sv-cov__shot--2 { opacity: 1; z-index: 2; }
  .sv-cov__layout:has(.sv-cov__row:nth-child(2):is(:hover, :focus-within)) .sv-cov__shot--2 img { transform: scale(1.02); }
  .sv-cov__layout:has(.sv-cov__row:nth-child(3):is(:hover, :focus-within)) .sv-cov__shot--3 { opacity: 1; z-index: 2; }
  .sv-cov__layout:has(.sv-cov__row:nth-child(3):is(:hover, :focus-within)) .sv-cov__shot--3 img { transform: scale(1.02); }
  .sv-cov__layout:has(.sv-cov__row:nth-child(4):is(:hover, :focus-within)) .sv-cov__shot--4 { opacity: 1; z-index: 2; }
  .sv-cov__layout:has(.sv-cov__row:nth-child(4):is(:hover, :focus-within)) .sv-cov__shot--4 img { transform: scale(1.02); }
  .sv-cov__layout:has(.sv-cov__row:nth-child(5):is(:hover, :focus-within)) .sv-cov__shot--5 { opacity: 1; z-index: 2; }
  .sv-cov__layout:has(.sv-cov__row:nth-child(5):is(:hover, :focus-within)) .sv-cov__shot--5 img { transform: scale(1.02); }
  .sv-cov__layout:has(.sv-cov__row:nth-child(6):is(:hover, :focus-within)) .sv-cov__shot--6 { opacity: 1; z-index: 2; }
  .sv-cov__layout:has(.sv-cov__row:nth-child(6):is(:hover, :focus-within)) .sv-cov__shot--6 img { transform: scale(1.02); }
}

/* ---- Reviews marquee ---- */
.sv-reviews { background: #fff; padding: 64px 0 112px; overflow: hidden; }
.sv-reviews .sv-h2 { margin: 0 32px 64px; }
.sv-reviews__marquee { position: relative; display: grid; gap: 24px; }
.sv-reviews__marquee::before,
.sv-reviews__marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 143px;
  z-index: 2;
  pointer-events: none;
}
.sv-reviews__marquee::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.sv-reviews__marquee::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255,255,255,0)); }
.sv-reviews__row {
  display: flex;
  gap: 24px;
  width: max-content;
  padding-right: 24px;
  animation: sv-marquee 240s linear infinite;
}
.sv-reviews__row--reverse { animation-direction: reverse; }
/* Pause only the row under the cursor; the other keeps scrolling. */
.sv-reviews__row:hover { animation-play-state: paused; }
.sv-reviews__card {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 360px;
  background: #fff;
  border: 1px solid rgba(17,17,17,.05);
  border-radius: 16px;
  box-shadow: rgba(17,17,17,.1) 0 1px 4px;
  padding: 24px;
  text-align: left;
}
.sv-reviews__card blockquote { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.sv-reviews__meta { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; }
.sv-reviews__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-accent);
  color: #fff;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 16px;
  display: grid;
  place-items: center;
}
.sv-reviews__name { font-size: 16px; font-weight: 600; color: #3C3A37; margin: 0; }
.sv-reviews__city { font-size: 14px; color: var(--ink-soft); margin: 0; }
.sv-reviews__meta .sv-stars { margin-left: auto; }
.sv-reviews__meta .sv-stars svg { width: 16px; height: 16px; }
.sv-reviews__slider { display: none; }
.sv-reviews__cta { display: table; margin: 40px auto 0; }

/* ---- FAQ ---- */
.sv-faq { position: relative; background: #FAFAFA; padding: 64px var(--gut) 112px; overflow: hidden; isolation: isolate; }
.sv-faq::before {
  content: ""; position: absolute; z-index: -1; top: 48px; right: -130px;
  width: 560px; height: 560px; transform: rotate(-8deg);
  background: url(images/hms-logo.webp) center / contain no-repeat;
  opacity: .06; pointer-events: none;
}
.sv-faq .sv-h2 { margin-bottom: 48px; }
.sv-faq__list { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.sv-faq__item {
  background: #fff;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 8px;
  padding: 0 24px;
}
.sv-faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.sv-faq__item summary::-webkit-details-marker { display: none; }
.sv-faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--brand-primary);
  border-bottom: 2px solid var(--brand-primary);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.sv-faq__item[open] summary::after { transform: rotate(225deg); }
.sv-faq__item p { font-size: 18px; line-height: 1.75; color: #434343; margin: 0; padding: 0 0 20px; }

/* ---- Final CTA banner ----
   The gradient banner deliberately straddles the footer: the section pulls
   the footer up 112px underneath it, and the
   footer's top padding is bumped on pages carrying .sv-cta via :has(). */
/* Carries the FAQ's #FAFAFA down to where the footer starts, so there is no
   white band between them. The bottom 112px stays transparent because the
   negative margin below pulls the dark footer up under the banner. */
.sv-cta {
  background: linear-gradient(#FAFAFA 0, #FAFAFA calc(100% - 112px), transparent calc(100% - 112px));
  padding: 0 var(--gut);
  margin-bottom: -112px;
  position: relative;
  z-index: 2;
}
main:has(.sv-cta) + .site-footer .footer-grid { padding-top: 160px; }
.sv-cta__banner {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 64px 32px;
  background: linear-gradient(360deg, #DCE9FB 0%, #9EC6F7 100%);
  text-align: center;
  /* Lifts the banner off the light section above and the dark footer below. */
  box-shadow: 0 18px 44px rgba(17,17,17,.16), 0 4px 12px rgba(17,17,17,.08);
}
.sv-cta__wave {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -12%;
  z-index: 1;
  pointer-events: none;
}
/* Heater-coil warm-up. The wave strokes glow red first, then the panel tint
   follows a beat later, then both cool back to blue. A CSS `stroke` beats the
   element's stroke="url(#svWave)" presentation attribute, so the coils can be
   recoloured without touching the gradient in the markup. */
.sv-cta__wave path {
  animation: sv-cta-coils 11s ease-in-out infinite;
}
@keyframes sv-cta-coils {
  0%, 14% { stroke: #ffffff; filter: none; }
  40%, 64% {
    stroke: #FF4A24;
    filter: drop-shadow(0 0 7px rgba(255,86,44,.9)) drop-shadow(0 0 18px rgba(255,60,20,.55));
  }
  90%, 100% { stroke: #ffffff; filter: none; }
}
/* Warm tint over the blue gradient. Delayed so the coils lead the colour shift. */
.sv-cta__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(360deg, #FBE2DA 0%, #F5A88F 100%);
  opacity: 0;
  animation: sv-cta-warm 11s ease-in-out infinite;
}
@keyframes sv-cta-warm {
  0%, 24% { opacity: 0; }
  48%, 64% { opacity: 1; }
  88%, 100% { opacity: 0; }
}
/* ---- Plumbing variant: moving water, not a heating coil ----
   The default banner animates a coil warming up, which is right on a
   furnace or water heater page and meaningless on drain or pipe work.
   This version animates nothing but transform and opacity: the two
   wave strokes swell and drift out of phase like a water surface, and
   a soft highlight drifts across the panel the way light moves over
   moving water. No stroke-dasharray, so there is no marching-ants
   texture and no snap when the loop restarts. The warm tint is off,
   so the panel holds its water blue the whole way through. */
.sv-cta--flow .sv-cta__wave path {
  stroke: #ffffff;
  filter: none;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform, opacity;
}
.sv-cta--flow .sv-cta__wave path:nth-of-type(1) {
  animation: sv-cta-swell-a 11s ease-in-out infinite;
}
.sv-cta--flow .sv-cta__wave path:nth-of-type(2) {
  animation: sv-cta-swell-b 14s ease-in-out infinite;
}
/* Both start and end on the same frame, so every loop is seamless. */
@keyframes sv-cta-swell-a {
  0%, 100% { transform: translate3d(0, 0, 0) scaleY(1); opacity: .92; }
  50%      { transform: translate3d(-4px, -2.5px, 0) scaleY(1.02); opacity: 1; }
}
@keyframes sv-cta-swell-b {
  0%, 100% { transform: translate3d(0, 0, 0) scaleY(1); opacity: .58; }
  50%      { transform: translate3d(5px, 2px, 0) scaleY(.98); opacity: .68; }
}
/* Light travelling across the surface. Wider than the panel so it enters
   and leaves off-frame instead of appearing at the edge. */
.sv-cta--flow .sv-cta__banner::after {
  inset: 0 -55%;
  background: linear-gradient(104deg,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,.42) 50%,
    rgba(255,255,255,0) 58%);
  opacity: 1;
  transform: translate3d(-45%, 0, 0);
  animation: sv-cta-sheen 9s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes sv-cta-sheen {
  0%, 8%   { transform: translate3d(-45%, 0, 0); }
  62%, 100% { transform: translate3d(45%, 0, 0); }
}

.sv-cta__wave svg { width: 110%; height: auto; }
.sv-cta__inner { position: relative; z-index: 1; max-width: 740px; margin-inline: auto; }
.sv-cta__inner .sv-h2 { margin: 0; }
.sv-cta__accent { display: block; color: var(--brand-accent); }
.sv-cta__inner p { font-size: 18px; line-height: 1.75; color: var(--ink); margin: 24px 0 0; }
.sv-cta__inner .sv-btn-row { margin-top: 48px; }

/* =========================================================
   SCROLL REVEAL
   The hidden state is scoped to .js-reveal, which site.js only sets when
   IntersectionObserver exists. Without JS the page renders fully visible.
   site.js strips data-reveal once an element has finished animating, so the
   transform here can never fight a component's own hover transform.
   ========================================================= */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1),
              transform .75s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0s);
}
.js-reveal [data-reveal="left"] { transform: translate3d(-34px, 0, 0); }
.js-reveal [data-reveal="right"] { transform: translate3d(34px, 0, 0); }
.js-reveal [data-reveal="scale"] { transform: scale(.95); }
.js-reveal [data-reveal="fade"] { transform: none; }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* A [data-reveal="right"] starts 34px to the right of where it lands, which
   extends the scrollable area and hands a phone a horizontal scrollbar for the
   three quarters of a second the animation runs. ("left" needs no guard:
   overflow past the left edge is never scrollable in LTR.) Sections that pair a
   copy column with a media column this way clip on the x axis instead. `clip`
   rather than `hidden` on purpose, so no new scroll container is created and
   sticky/parallax behaviour elsewhere is untouched. */
.contact,
.service-category { overflow-x: clip; }

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

/* ---- Service-page responsive ---- */
@media (max-width: 991px) {
  .sv-h1 { font-size: 62px; }
  .sv-h2 { font-size: 40px; }
  .sv-cov__head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 48px; }
  .sv-cov__shield { max-width: none; width: 100%; }
  .sv-values__grid { grid-template-columns: minmax(0, 1fr); }
  .sv-value { padding: 4px 0; }
  .sv-value + .sv-value {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.18);
    margin-top: 44px;
    padding-top: 48px;
  }
  .sv-value__num,
  .sv-value:first-child .sv-value__num { left: 0; }
  .sv-value + .sv-value .sv-value__num { top: 14px; }
  .sv-howto__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .sv-howto__mark { width: min(320px, 70%); }
  .sv-stand__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sv-stand__stack { max-width: 620px; margin-inline: auto; }
  .sv-owner__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sv-owner__media { max-width: 420px; }
  .sv-owner__media::before { transform: translate(-20px, 20px); }
  .sv-cov__layout { display: block; }
  .sv-cov__stage { display: none; }
  .sv-cov__index { display: grid; gap: 16px; }
  .sv-cov__row {
    grid-template-columns: auto minmax(0, 1fr) 44px;
    gap: 0 16px; align-items: center; padding: 22px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.11); border-radius: 16px;
  }
  .sv-cov__row:first-child { border-top: 1px solid rgba(255,255,255,.11); }
  .sv-cov__row::before { display: none; }
  .sv-cov__icon { width: 42px; height: 42px; margin-top: 0; color: #fff; background: var(--brand-primary); border-color: transparent; }
  .sv-cov__icon svg { width: 22px; height: 22px; }
  .sv-cov__body { display: contents; }
  .sv-cov__name a { font-size: 21px; }
  .sv-cov__thumb { display: block; grid-column: 1 / -1; margin-top: 18px; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
  .sv-cov__thumb picture { display: block; width: 100%; height: 100%; }
  .sv-cov__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .sv-cov__reveal { grid-column: 1 / -1; }
  .sv-cov__reveal-in p { max-width: none; }
  /* .sv-cov__body is display:contents here, so the arrow is a sibling of the
     name/thumb/reveal in the row grid. Pin it to the third column beside the
     title, or auto-placement drops it below the copy as a stray button. */
  .sv-cov__arrow { grid-column: 3; grid-row: 1; }
  .sv-hero__inner { padding-top: 96px; }
  /* Stacked, the 44px gap is the only space between the photo and the
     "About HMS" eyebrow, and the offset tile behind the photo reaches
     20px into it, leaving ~24px. Widen the row gap to separate them. */
  .sv-about__grid { grid-template-columns: minmax(0, 600px); row-gap: 76px; }
  .sv-process__steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .sv-why__grid { grid-template-columns: minmax(0, 600px); }
  .sv-why__media { order: 2; }
  .sv-about__media::before { transform: translate(-20px, 20px); }
  .sv-why__media::before { transform: translate(20px, 20px); }
  .sv-reviews__marquee { display: none; }
  .sv-reviews__slider { display: block; position: relative; padding: 0 var(--gut); }
  .sv-reviews__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 8px;
  }
  .sv-reviews__track::-webkit-scrollbar { display: none; }
  .sv-reviews__track .sv-reviews__card { width: min(360px, 88vw); scroll-snap-align: start; }
  .sv-reviews__nav { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
  .sv-reviews__arrow {
    width: 48px;
    height: 36px;
    border-radius: 999px;
    background: #F7F7F8;
    border: 1px solid #E7E7EA;
    display: grid;
    place-items: center;
    color: var(--ink);
  }
  .sv-reviews__arrow svg { width: 16px; height: 16px; }
  .sv-reviews__arrow:hover { color: var(--brand-primary); }
}
@media (max-width: 767px) {
  .sv-h1 { font-size: 52px; }
  .sv-h2 { font-size: 32px; }
  .sv-intro { padding: 64px var(--gut) 48px; }
  .sv-intro .sv-h2 { margin-bottom: 28px; }
  .sv-intro__body { font-size: 17px; }
  /* Stacked, these three run tighter than the desktop rhythm: the section
     head sits closer to the list it introduces, and the trailing padding
     under the last element in each section comes down. */
  .sv-why__grid { margin-top: 40px; }
  .sv-faq { padding-bottom: 72px; }
  .sv-about__body,
  .sv-why__item p,
  .sv-faq__item p,
  .sv-cta__inner p { font-size: 17px; }
  /* Keep the auto-scrolling ticker on phones rather than swapping to the
     static grid. Retuned for a narrow viewport: smaller logos and a tighter
     gap put more than one brand on screen at a time, and the edge fades
     shrink because 118px each would have veiled most of a 390px strip.
     The gap and padding-right must stay equal - the track is two identical
     halves and the -50% translate is only seamless while they match. */
  .sv-press__ticker::before,
  .sv-press__ticker::after { width: 48px; }
  .sv-press__track { gap: 40px; padding-right: 40px; animation-duration: 45s; }
  .sv-press__track img { height: 36px; }
  .sv-press__grid {
    /* kept for the reduced-motion fallback below */
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: center;
    justify-items: center;
    padding: 0 var(--gut);
  }
  .sv-press__grid img { height: 48px; width: auto; }
  .sv-process__step { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px; }
  /* Sit fully inside the full-width photo; at top:2px the numeral straddled
     the photo's top edge and read as a stray grey sliver above it. */
  .sv-process__num { font-size: 96px; top: 30px; right: 34px; z-index: 1; }
  .sv-process__thumb { width: 100%; height: 180px; transform: none; }
  .sv-process__step:nth-child(even) .sv-process__thumb { transform: none; }
  .sv-process__step:hover .sv-process__thumb { transform: none; }
  .sv-process__body { padding-right: 0; }
  .sv-about__checks { grid-template-columns: minmax(0, 1fr); max-width: none; }
  /* Stacked, centring each icon+label group puts the icons at ragged x
     positions down the column, so align them to a common left edge. */
  .sv-check { justify-content: flex-start; }
}
@media (max-width: 479px) {
  .sv-h1 { font-size: 40px; }
  /* The eyebrow is one flex line: rule + label + rule. At 44px rules and a
     14px label the longest ones ("Professional HVAC Repair", "Anywhere in
     Our Area") overran the content box and the label wrapped under the
     rules. Shorter rules, a tighter gap and a slightly smaller label keep
     every eyebrow on one line. The city pages then added longer labels in a
     narrower box ("Located Just South of You" wrapped at 390px), so the label
     is 12px/.08em and the rules 20px; measured single-line on all 44 pages
     at 320, 360, 375, 390 and 414px. */
  .sv-eyebrow { font-size: 12px; letter-spacing: .08em; gap: 10px; }
  .sv-eyebrow::before,
  .sv-eyebrow::after { width: 20px; }
  .sv-h2 { font-size: 28px; }
  .sv-cov { padding: 72px var(--gut) 88px; }
  .sv-cov__row { padding: 18px; }
  .sv-cov__name a { font-size: 19px; }
  .sv-cov__arrow { width: 38px; height: 38px; }
  .sv-faq::before { width: 380px; height: 380px; right: -120px; top: 24px; }
  .sv-hero__actions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 359px) {
  /* 320px-class phones: the rules have to give up more room again. */
  .sv-eyebrow { gap: 6px; }
  .sv-eyebrow::before,
  .sv-eyebrow::after { width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-press__track,
  .sv-reviews__row { animation: none; }
  .sv-cta__wave path,
  .sv-cta--flow .sv-cta__wave path,
  .sv-cta__banner::after,
  .sv-cta--flow .sv-cta__banner::after { animation: none; opacity: 0; }
  .sv-cov__point { animation: none; opacity: 1; }
  .sv-cov__shot img { transition: none; transform: none; }
  .sv-cov__shot, .sv-cov__reveal, .sv-cov__arrow, .sv-cov__row, .sv-cov__row::before { transition: none; }
  .sv-press__ticker { overflow-x: auto; }
  .sv-reviews__marquee { overflow-x: auto; }
}

/* With the animation off, a phone-width ticker would just be a cropped row
   that has to be swiped, so show the static grid there instead. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .sv-press__ticker { display: none; }
  .sv-press__grid { display: grid; }
}


/* =========================================================
   SERVICE AREA PAGE — /service-area
   Opening statement, Leaflet city map synced to a card grid,
   a three-card services strip, then the shared CTA banner.
   ========================================================= */
.sv-hero--area .sv-hero__bg img { object-position: 50% 60%; }
/* Krugerville's hero is a portrait photo; 60% cropped it to the technician's
   legs. 34% keeps his head, hands and the condenser in the band. */
.sv-hero--area.sv-hero--kv-tech .sv-hero__bg img { object-position: 50% 34%; }
.sv-hero--area .sv-hero__inner { padding-bottom: 132px; }
/* The city name is set huge here, so its own leading already reads as a gap;
   pull the eyebrow in tighter than the shared hero spacing. */
.sv-hero--area .sv-hero__eyebrow { margin-bottom: -22px; }

/* ---- Opening statement ---- */
/* Top padding is deliberately lighter than the section's own rhythm would
   suggest: this block always sits directly under the hero, so the hero's
   bottom padding is already doing part of the work and the full 128px left the
   eyebrow floating. */
.sa-intro { background: var(--bg); padding: clamp(48px, 6.5vw, 92px) var(--gut) clamp(16px, 2vw, 32px); }
.sa-intro__inner { width: 85%; max-width: 1200px; text-align: center; }
.sa-intro .sv-h2 { margin: 0; color: var(--ink); }
/* The head above stays centred; the copy itself reads left. */
.sa-intro__body { max-width: 100%; margin: clamp(20px, 2.4vw, 32px) auto 0; text-align: left; }
.sa-intro__body p { margin: 0 0 clamp(16px, 1.8vw, 24px); font-size: 18px; line-height: 1.75; color: #434343; }
.sa-intro__body p:last-child { margin-bottom: 0; }
/* Location map, same width as the copy above it so the section reads as one
   column. Framed like the service-area map for consistency. */
.sa-intro__map {
  margin: clamp(32px, 4vw, 48px) auto 0;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 37, 110, .16);
  overflow: hidden;
  line-height: 0;
}
.sa-intro__map iframe { display: block; width: 100%; height: clamp(300px, 38vw, 460px); border: 0; }

/* ---- City map + grid ---- */
.sa-cities { padding: clamp(8px, 1vw, 16px) var(--gut) clamp(64px, 8vw, 120px); background: var(--bg); }

/* Interactive city map (Leaflet + OpenStreetMap tiles). Full width of .wrap,
   same as the city grid below it, so the two line up. */
.sa-map {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 460;
  margin: 0 auto clamp(32px, 4vw, 48px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 37, 110, .16);
  overflow: hidden;
  z-index: 0;
}
@media (min-width: 901px) {
  .sa-map { aspect-ratio: 21 / 8; }
}
.sa-map.leaflet-container { font-family: var(--sans); }

.sa-map .sa-dfw-label {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font-family: var(--heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .6;
  white-space: nowrap;
}
.sa-map .sa-dfw-label::before { display: none; }

.sa-map .sa-marker-label {
  background: var(--ink);
  border: 0;
  box-shadow: 0 2px 6px rgba(0,37,110,.35);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--heading);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.sa-map .sa-marker-label::before { border-top-color: var(--ink); }

/* Markers carry the HMS logo. The logo art is its own colored ring on a
   white field, so the badge is a plain white disc behind it and the
   hover/home states are signaled with rings rather than fill swaps. */
.sa-marker { background: none; border: 0; }
.sa-marker-badge {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(0,37,110,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sa-marker-badge picture,
.sa-marker-badge img { display: block; width: 100%; height: 100%; }
.sa-marker.is-linked .sa-marker-badge {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-primary), 0 3px 9px rgba(0,37,110,.4);
}
.sa-marker--home .sa-marker-badge {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brand-accent), 0 2px 6px rgba(0,37,110,.35);
}
.sa-marker--home.is-linked .sa-marker-badge {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-accent), 0 3px 9px rgba(0,37,110,.4);
}

.sa-map .leaflet-popup-content-wrapper { border-radius: 8px; }
.sa-map .leaflet-popup-content {
  margin: 8px 12px;
  font-family: var(--heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.sa-map .leaflet-control-attribution {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-soft);
  background: rgba(255,255,255,.75);
}

.sa-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 20px);
}
.sa-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: clamp(22px, 2.4vw, 28px) clamp(18px, 2vw, 22px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.sa-card:hover { border-color: var(--brand-primary); transform: translateY(-2px); }
.sa-card.is-linked { border-color: var(--brand-primary); transform: translateY(-2px); background: #fff; }
.sa-card.is-pinged { animation: saCardPulse .9s ease; }
@keyframes saCardPulse {
  0%   { box-shadow: 0 0 0 0 rgba(181,5,23,.35); }
  70%  { box-shadow: 0 0 0 10px rgba(181,5,23,0); }
  100% { box-shadow: 0 0 0 0 rgba(181,5,23,0); }
}
.sa-card-icon { color: var(--brand-primary); margin: 0 0 12px; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; }
/* City names link to their own page where one exists; the rest stay plain
   text, so this only styles the anchor when it is present. */
.sa-card-name a { color: inherit; text-decoration: none; }
.sa-card-name a::after { content: ""; position: absolute; inset: 0; }
.sa-card:hover .sa-card-name a,
.sa-card-name a:focus-visible { color: var(--brand-primary); }
.sa-card-name {
  font-family: var(--heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
}
.sa-card-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 6px 0 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.sa-card:hover .sa-card-note,
.sa-card:focus-within .sa-card-note,
.sa-card.is-linked .sa-card-note { opacity: 1; }
/* Touch screens have no hover, so the note would never appear and each card
   read as a name floating over an empty box. */
@media (hover: none) {
  .sa-card-note { opacity: 1; }
}
.sa-card--more { background: var(--brand-accent); border-color: var(--brand-accent); }
.sa-card--more .sa-card-icon,
.sa-card--more .sa-card-name { color: #fff; }
.sa-card--more .sa-card-note { color: rgba(255,255,255,.78); }
.sa-card--more .sa-card-note a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.sa-card--more .sa-card-note a:hover { color: #FF6470; }

/* ---- Services strip (the three trades) ---- */
.sa-strip { background: var(--surface); padding: clamp(56px, 7vw, 100px) var(--gut); }
.sa-strip__head { text-align: center; max-width: 720px; margin: 0 auto clamp(32px, 4vw, 48px); }
.sa-strip__head .sv-h2 { margin: 0; color: var(--ink); }
.sa-strip__sub { margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: var(--ink-soft); }
.sa-strip__list {
  list-style: none;
  margin: 0 0 clamp(28px, 3.5vw, 40px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.sa-strip__card {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 30px) clamp(20px, 2.2vw, 26px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
  transition: border-color .25s ease, transform .25s ease;
}
.sa-strip__card:hover { border-color: var(--brand-primary); transform: translateY(-2px); }
.sa-strip__icon { color: var(--brand-primary); margin: 0 0 14px; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sa-strip__name { margin: 0 0 8px; font-family: var(--heading); font-weight: 600; font-size: 18px; color: var(--ink); }
.sa-strip__desc { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.sa-strip__link {
  margin-top: auto;
  font-family: var(--heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-primary);
  text-decoration: none;
}
.sa-strip__link::after { content: " \2192"; }
.sa-strip__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Two actions in the CTA banner on this page (appointment + phone). */
.cta-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-banner-actions .btn-ghost { border-color: var(--ink); }
.cta-banner-actions .sv-btn-phone svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .sa-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .sa-strip__list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .sa-intro__inner { width: 100%; }
}
@media (max-width: 640px) {
  .sa-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  /* One line down to 320px: drop Pilot Point and tighten the type. */
  .sv-hero__eyebrow .sv-hero__eyebrow-opt { display: none; }
  .sv-hero__eyebrow { font-size: 12px; letter-spacing: .08em; }
  .sv-hero__eyebrow span { padding: 0 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-card.is-pinged { animation: none; }
}


/* =========================================================
   ABOUT HMS — layered depth intro
   ========================================================= */
.alayer {
  position: relative;
  padding: clamp(64px, 9vw, 128px) 0;
  background: #fff;
  overflow: hidden;
}
/* Accent slab bleeding off the left edge, sitting behind the photo. */
.alayer-slab {
  position: absolute;
  left: 0;
  top: clamp(24px, 4.5vw, 68px);
  bottom: clamp(24px, 4.5vw, 68px);
  width: min(30vw, 380px);
  background: var(--brand-primary);
  border-radius: 0 24px 24px 0;
  z-index: 0;
}
.alayer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}
.alayer-tag { grid-column: 1 / -1; margin-bottom: 0; }

.alayer-media { position: relative; }
.alayer-photo {
  display: block;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.45);
}
.alayer-photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Frosted stat chips floating over the photo edge. */
.alayer-chip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 22px;
  border-radius: 16px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,.35);
}
.alayer-chip strong {
  font-family: var(--heading);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--brand-accent);
}
.alayer-chip > span {
  font-family: var(--heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #4A4E54;
}
.alayer-chip strong span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
/* Both stat chips centre their own contents; the rating chip also carries a
   five-star row under the label, so score, label and stars share one axis. */
.alayer-chip-years,
.alayer-chip-rating { align-items: center; text-align: center; }
.alayer-chip-stars { display: flex; gap: 2px; margin-top: 6px; }
.alayer-chip-stars svg { width: 15px; height: 15px; fill: var(--brand-primary); }
.alayer-chip-years { left: clamp(-18px, -1.4vw, 0px); bottom: 9%; }
.alayer-chip-rating { right: clamp(-18px, -1.4vw, 0px); top: 12%; }
.alayer-text h2 {
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: .98;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
}
.alayer-kicker {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  max-width: 26ch;
  margin: 0 0 20px;
}
.alayer-rule { display: block; width: 64px; height: 3px; background: var(--brand-primary); border-radius: 2px; margin: 0 0 22px; }
.alayer-text > p { font-size: 17px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 22px; max-width: 52ch; }
/* Desktop only: the body paragraph gets a slightly wider measure than the
   52ch default. Still well inside the text column, which is ~569px at 1360. */
@media (min-width: 901px) {
  .alayer-text > p:not([class]) { max-width: 58ch; }
}
.alayer-list { display: flex; flex-direction: column; gap: 11px; margin: 0 0 30px; }
.alayer-list li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  color: var(--ink);
}
.alayer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(181,5,23,.14);
}
.alayer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.alayer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--brand-accent);
  text-decoration: none;
}
.alayer-link svg { width: 18px; height: 18px; transition: transform .25s ease; }
.alayer-link:hover { color: var(--brand-primary); }
.alayer-link:hover svg { transform: translateX(5px); }

@media (max-width: 900px) {
  .alayer-inner { grid-template-columns: 1fr; }
  .alayer-slab { width: 46%; top: 0; bottom: auto; height: clamp(220px, 34vw, 340px); }
  .alayer-media { margin-bottom: 34px; }
  .alayer-chip-years { left: 0; }
  .alayer-chip-rating { right: 0; }
}

/* On a phone the stat chips break the photo's edge instead of tucking inside
   it: years out to the left, rating out to the right. The photo keeps a 20px
   gutter each side at 390px, so a 14px overhang still clears the viewport. */
@media (max-width: 600px) {
  .alayer-chip-years { left: -14px; }
  .alayer-chip-rating { right: -14px; }
}
@media (max-width: 560px) {
  .alayer-chip { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .alayer-link svg { transition: none; }
}

/* Brand lockup on the smallest phones: shrink the mark so the registered
   name still fits on one header row. */
@media (max-width: 430px) {
  .brand { gap: 10px; }
  .brand img { width: 78px; height: 78px; }
  .site-header.is-scrolled .brand img { width: 62px; height: 62px; }
  .brand-lockup { padding-left: 10px; max-width: 152px; }
  .brand-powered { font-size: 8.5px; letter-spacing: .1em; }
  .brand-legal { font-size: 12px; }
}
/* 320px-class phones: the call button needs the room the name was using. */
@media (max-width: 350px) {
  .brand img { width: 70px; height: 70px; }
  .brand-lockup { max-width: 104px; }
  .nav-call { width: 38px; height: 38px; right: 58px; }
  .nav-call svg { width: 18px; height: 18px; }
}

/* =========================================================
   REVIEWS PAGE
   Reviews come from the GoHighLevel Reputation widget iframe; its
   script sets the iframe height to fit the content.
   ========================================================= */
.sv-hero--reviews .sv-hero__bg img { object-position: 50% 58%; }
.sv-hero--reviews .sv-hero__inner { padding-bottom: 132px; }

.rv-all { background: #FAFAFA; padding: clamp(56px, 7vw, 96px) var(--gut) clamp(72px, 9vw, 112px); }
.rv-widget { max-width: var(--content-w); margin: clamp(28px, 4vw, 44px) auto 0; }
.rv-widget iframe { display: block; border: 0; min-height: 400px; }


/* =========================================================
   LEGAL PAGES (privacy policy)
   Deliberately plain: a legal page is a reading surface, not a
   design surface, so it borrows the site shell and nothing else.
   ========================================================= */
.legal-hero { background: var(--brand-accent); color: #fff; padding: 56px var(--gut) 48px; }
.legal-hero h1 { font-family: var(--heading); font-size: clamp(34px, 5vw, 52px); line-height: 1.1; margin: 0; color: #fff; }
.legal-crumbs { font-size: 14px; color: rgba(255,255,255,.72); margin-bottom: 14px; }
.legal-crumbs a { color: rgba(255,255,255,.72); }
.legal-crumbs a:hover { color: #fff; }
.legal-crumbs span { padding: 0 4px; }
.legal-updated { margin: 14px 0 0; font-size: 15px; color: rgba(255,255,255,.8); }

.legal { background: #fff; padding: 56px var(--gut) 88px; }
/* ~75 characters a line at 17px, the comfortable range for long prose. */
.legal-body { max-width: 720px; margin-inline: auto; }
.legal-body h2 {
  font-family: var(--heading); font-size: 24px; line-height: 1.3;
  margin: 44px 0 14px; color: var(--ink);
}
.legal-body h2:first-of-type { margin-top: 32px; }
.legal-body h3 { font-family: var(--heading); font-size: 18px; margin: 26px 0 8px; color: var(--ink); }
.legal-body p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.legal-body li { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 8px; }
.legal-body strong { color: var(--ink); }
.legal-body a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--brand-accent); }
.legal-contact { border-left: 3px solid var(--brand-primary); padding-left: 16px; }

@media (max-width: 640px) {
  .legal-hero { padding: 40px var(--gut) 34px; }
  .legal { padding: 40px var(--gut) 64px; }
  .legal-body h2 { font-size: 21px; margin-top: 36px; }
  .legal-body p, .legal-body li { font-size: 16px; }
}

.legal-body ol { margin: 0 0 16px; padding-left: 22px; list-style: decimal; }
.legal-body ol li { padding-left: 4px; }

/* =========================================================
   BLOG (/blog and /blog/<slug>)
   The index and posts reuse the legal hero band and the
   .legal-body reading column; this block adds the card grid,
   the post figure, and the pager.
   ========================================================= */
.blog-hero__lede,
.blog-meta { margin: 14px 0 0; font-size: 17px; color: rgba(255,255,255,.85); }
.blog-hero h1 { max-width: 24ch; font-size: clamp(30px, 4.2vw, 46px); }
.blog-card__title a, .blog-post__pager-link, .blog-post__back a { text-decoration: none; }
.blog-meta { font-size: 15px; }
.blog-meta span { padding: 0 6px; }

.blog-list { background: var(--surface); padding: clamp(40px, 6vw, 72px) var(--gut) clamp(56px, 8vw, 96px); }
.blog-grid {
  list-style: none; margin: 0 auto; padding: 0; max-width: var(--content-w);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px);
}
.blog-card {
  display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,37,110,.22);
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 30px -12px rgba(0,37,110,.32); }
.blog-card[hidden] { display: none; }
.blog-card__media { display: block; aspect-ratio: 16 / 10; background: #e9ecf2; overflow: hidden; }
.blog-card__media picture { display: contents; }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.blog-card__date { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-primary); }
.blog-card__title { font-family: var(--heading); font-size: 20px; line-height: 1.3; margin: 0 0 10px; color: var(--ink); }
.blog-card__title a { color: inherit; }
.blog-card__title a:hover { color: var(--brand-accent); }
/* The title link covers the whole card, so the card is one tap target
   without nesting links. */
.blog-card { position: relative; }
.blog-card__title a::after { content: ""; position: absolute; inset: 0; }
.blog-card__title a:focus-visible { outline: none; }
.blog-card:has(.blog-card__title a:focus-visible) { outline: 3px solid var(--brand-accent); outline-offset: 3px; }
.blog-card__excerpt { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.blog-card__more { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--brand-primary); }

.blog-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(32px, 4vw, 48px); }
.blog-pager[hidden] { display: none; }
.blog-pager button {
  min-width: 44px; height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--rule-strong);
  background: #fff; color: var(--ink); font: 600 15px var(--sans); cursor: pointer;
}
.blog-pager button:hover:not(:disabled) { border-color: var(--brand-accent); color: var(--brand-accent); }
.blog-pager button[aria-current="page"] { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.blog-pager button:disabled { opacity: .4; cursor: default; }

.blog-post { background: #fff; padding: clamp(32px, 5vw, 56px) var(--gut) clamp(48px, 7vw, 80px); }
.blog-post__inner { max-width: 880px; margin-inline: auto; }
.blog-post__figure { margin: 0 0 clamp(28px, 4vw, 44px); border-radius: 10px; overflow: hidden; background: #e9ecf2; }
.blog-post__figure picture { display: contents; }
.blog-post__figure img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.blog-post__body h2:first-child { margin-top: 0; }
.blog-post__pager {
  max-width: 720px; margin: 48px auto 0; padding-top: 28px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.blog-post__pager-link { display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.blog-post__pager-link--next { grid-column: 2; text-align: right; }
.blog-post__pager-label { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-primary); }
.blog-post__pager-title { font-family: var(--heading); font-size: 17px; line-height: 1.35; }
.blog-post__pager-link:hover .blog-post__pager-title { color: var(--brand-accent); }
.blog-post__back { max-width: 720px; margin: 28px auto 0; font-weight: 600; }
.blog-post__back a { color: var(--brand-accent); }

.blog-related { background: var(--surface); padding: clamp(44px, 6vw, 72px) var(--gut); }
.blog-related__title { font-family: var(--heading); font-size: clamp(24px, 3vw, 32px); text-align: center; margin: 0 0 clamp(24px, 3vw, 36px); color: var(--ink); }

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-grid--related .blog-card:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-grid--related .blog-card:nth-child(3) { display: flex; }
  .blog-card__title { font-size: 19px; }
  .blog-post__pager { grid-template-columns: 1fr; }
  .blog-post__pager-link--next { grid-column: 1; text-align: left; }
}

/* Employment: the application form card sits in the legal reading column. */
.job-apply { margin-top: 36px; padding: 28px; border-radius: 10px; background: var(--surface); }
.job-apply h2:first-of-type { margin-top: 0; }


/* =========================================================
   404 / NOT FOUND
   ========================================================= */
.nf { background: #fff; padding: 72px var(--gut) 96px; text-align: center; }
.nf-inner { max-width: 720px; margin-inline: auto; }
.nf-code {
  font-family: var(--heading); font-weight: 700; font-size: 14px;
  letter-spacing: .22em; color: var(--brand-primary); margin: 0 0 14px;
}
.nf-title { font-family: var(--heading); font-size: clamp(34px, 6vw, 56px); line-height: 1.08; margin: 0 0 18px; color: var(--ink); }
.nf-lede { font-size: 18px; line-height: 1.7; color: var(--ink-soft); margin: 0 auto 32px; max-width: 30em; }
.nf-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* The phone icon has no width/height attributes, so without this it collapsed
   to 0px on desktop and blew up to 112px on phones. */
.nf-actions .btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.nf-links { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--rule); }
.nf-links-label {
  font-family: var(--heading); font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 16px;
}
.nf-links ul { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; list-style: none; }
.nf-links a { font-weight: 600; color: var(--brand-accent); }
.nf-links a:hover { color: var(--brand-primary); }

@media (max-width: 640px) {
  .nf { padding: 48px var(--gut) 64px; }
  .nf-lede { font-size: 16.5px; }
  .nf-actions .btn { width: 100%; justify-content: center; }
}


/* =========================================================
   CITY PAGE: NEARBY TOWNS
   ========================================================= */
.kv-near { background: var(--surface); padding: 72px var(--gut) 80px; text-align: center; }
.kv-near__sub {
  max-width: 60ch; margin: 0 auto 32px;
  font-size: 17px; line-height: 1.7; color: var(--ink-soft);
}
.kv-near__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  list-style: none; margin: 0 0 28px; padding: 0;
}
.kv-near__list a {
  display: inline-block; padding: 10px 20px; border-radius: 999px;
  background: #fff; border: 1px solid var(--rule);
  font-family: var(--heading); font-weight: 600; font-size: 15px;
  color: var(--ink); text-decoration: none;
  transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.kv-near__list a:hover {
  border-color: var(--brand-primary); color: var(--brand-primary); transform: translateY(-2px);
}
.kv-near__all { margin: 0; font-size: 16px; }
.kv-near__all a { color: var(--brand-primary); font-weight: 600; }

@media (max-width: 640px) {
  .kv-near { padding: 56px var(--gut) 64px; }
  .kv-near__sub { font-size: 16px; }
  .kv-near__list a { font-size: 14px; padding: 9px 16px; }
}


/* =========================================================
   CITY PAGE: FAQ
   Asymmetric split: the head and call card sit in a narrow left
   column, the questions in a wider right one, both scrolling with
   the page. Rows are hairline separated rather than boxed, which
   reads calmer than a stack of cards at this length.
   ========================================================= */
.kvfaq { background: var(--bg); padding: clamp(72px, 9vw, 128px) var(--gut) clamp(80px, 10vw, 136px); }
.kvfaq__grid {
  display: grid;
  grid-template-columns: minmax(250px, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(32px, 3.4vw, 52px);
  align-items: start;
}
/* The question list runs several times the height of the aside beside it, so
   the aside rides along instead of leaving a screen of empty column. Offset
   clears the sticky site header. Only above 900px, where the two are actually
   side by side; below that they stack and sticky would be wrong. */
@media (min-width: 901px) {
  .kvfaq__aside { position: sticky; top: 190px; }
}
.kvfaq__h2 {
  font-family: var(--heading);
  font-size: clamp(34px, 3.4vw, 50px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.kvfaq__h2 strong { display: block; font-weight: 700; color: var(--brand-primary); }
.kvfaq__lede {
  margin: 20px 0 0;
  max-width: 34ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.kvfaq__call {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(28px, 3vw, 40px);
  padding: 14px 22px 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  text-decoration: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.kvfaq__call:hover {
  border-color: rgba(181, 5, 23, .35);
  box-shadow: 0 12px 28px rgba(181, 5, 23, .14);
  transform: translateY(-2px);
}
.kvfaq__call-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
}
.kvfaq__call-icon svg { width: 18px; height: 18px; }
.kvfaq__call-text { display: grid; gap: 2px; }
.kvfaq__call-label {
  font-family: var(--heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.kvfaq__call-num { font-family: var(--heading); font-size: 19px; font-weight: 700; color: var(--ink); }

.kvfaq__list { display: grid; }
.kvfaq__item { border-top: 1px solid var(--rule); }
.kvfaq__item:last-child { border-bottom: 1px solid var(--rule); }
.kvfaq__item summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(22px, 2.4vw, 30px) 0;
  cursor: pointer;
  list-style: none;
}
.kvfaq__item summary::-webkit-details-marker { display: none; }
.kvfaq__item summary:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 4px; border-radius: 4px; }
.kvfaq__q {
  font-family: var(--heading);
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color .25s ease;
  text-wrap: pretty;
}
/* Plus that rotates into a minus. Drawn from two bars so the stroke
   weight matches the type rather than a chevron glyph. */
.kvfaq__mark {
  position: relative;
  align-self: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: background-color .25s ease, border-color .25s ease, transform .3s ease;
}
.kvfaq__mark::before,
.kvfaq__mark::after {
  content: "";
  position: absolute;
  inset: 50% 10px auto;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--ink);
  transition: background-color .25s ease, transform .3s ease, opacity .2s ease;
}
.kvfaq__mark::after { transform: rotate(90deg); }
.kvfaq__item:hover .kvfaq__q { color: var(--brand-primary); }
.kvfaq__item:hover .kvfaq__mark { border-color: rgba(181, 5, 23, .35); }
.kvfaq__item[open] .kvfaq__mark { background: var(--brand-primary); border-color: var(--brand-primary); transform: rotate(180deg); }
.kvfaq__item[open] .kvfaq__mark::before { background: #fff; }
.kvfaq__item[open] .kvfaq__mark::after { opacity: 0; transform: rotate(90deg) scaleX(.2); }
.kvfaq__a {
  padding: 0 clamp(50px, 6vw, 62px) clamp(24px, 2.6vw, 32px) 0;
  animation: kvfaqIn .32s cubic-bezier(.22, .61, .36, 1) both;
}
.kvfaq__a p { margin: 0; font-size: 17px; line-height: 1.8; color: #434343; }
.kvfaq__a a { color: var(--brand-primary); font-weight: 600; }
@keyframes kvfaqIn {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .kvfaq__grid { grid-template-columns: 1fr; gap: 36px; }
  .kvfaq__lede { max-width: none; }
  .kvfaq__a { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kvfaq__a { animation: none; }
  .kvfaq__call:hover { transform: none; }
}


/* =========================================================
   CITY PAGE: CTA
   Full-bleed photo band closing the page: a warm interior shot
   under a dark scrim with a brand-blue glow rising from the bottom,
   and centred type. The glow needs a higher alpha than a red one
   would: --brand-accent is dark enough that below roughly .25 it
   stops reading as a glow and just deepens the scrim.
   ========================================================= */
.kvcta {
  position: relative;
  isolation: isolate;
  padding: clamp(76px, 9vw, 132px) var(--gut);
  overflow: hidden;
}
.kvcta__bg { position: absolute; inset: 0; z-index: -2; }
.kvcta__bg img { width: 100%; height: 100%; object-fit: cover; }
.kvcta__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(80% 120% at 50% 100%, rgba(0,37,110,.28) 0%, rgba(0,37,110,0) 62%),
    linear-gradient(180deg, rgba(8,10,13,.82) 0%, rgba(8,10,13,.74) 45%, rgba(8,10,13,.88) 100%);
}
.kvcta__inner { max-width: 860px; margin-inline: auto; text-align: center; }
.kvcta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 7px 18px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  font-family: var(--heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  background: rgba(255,255,255,.07);
}
.kvcta__h2 {
  margin: 0;
  font-size: clamp(36px, 4.6vw, 62px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #fff;
  text-wrap: balance;
}
/* Light tint of the brand blue: --brand-accent itself is far too dark to read
   against the scrim, so the CTA uses the same #9EC6F7 as the banner gradients. */
.kvcta__h2 strong { font-weight: 700; color: #9EC6F7; }
.kvcta__lede {
  max-width: 54ch;
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 1.75;
  color: rgba(255,255,255,.8);
}
.kvcta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: clamp(30px, 3.4vw, 42px);
}
.kvcta__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  font-family: var(--heading);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,.08);
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.kvcta__phone svg { width: 19px; height: 19px; }
.kvcta__phone:hover {
  background: rgba(255,255,255,.18);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 560px) {
  .kvcta__actions .btn,
  .kvcta__phone { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .kvcta__phone:hover { transform: none; }
}

/* =========================================================
   CITY PAGE: REVIEWS
   Dark bento between the white "why us" section and the grey
   nearby-towns strip, so the proof reads as its own block
   rather than another card grid. One spotlight tile carries a
   full service story; the rest are short hits. Tile heights are
   driven by the grid, not the copy, so the bento stays square
   even though the quotes are uneven lengths.
   ========================================================= */
.kvrev {
  background: linear-gradient(180deg, #0E1014 0%, #14171C 100%);
  padding: clamp(72px, 9vw, 128px) var(--gut) clamp(76px, 9.5vw, 132px);
}
.kvrev__inner { max-width: var(--content-w); margin-inline: auto; }

/* ---- Head: headline left, rating card right ---- */
.kvrev__head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr);
  align-items: end;
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: clamp(36px, 4.2vw, 56px);
}
.kvrev__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.kvrev__eyebrow::before {
  content: "";
  width: 40px;
  height: 2px;
  background: var(--brand-primary);
}
.kvrev__h2 {
  margin: 0;
  font-family: var(--heading);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.kvrev__h2 strong { font-weight: 700; color: #9EC6F7; }
.kvrev__lede {
  max-width: 72ch;
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(255,255,255,.70);
}
.kvrev__score {
  justify-self: end;
  min-width: 216px;
  padding: 26px 28px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  text-align: center;
}
.kvrev__score-num {
  margin: 0;
  font-family: var(--heading);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}
.kvrev__score .sv-stars { margin-top: 10px; }
.kvrev__score .sv-stars svg { width: 18px; height: 18px; }
.kvrev__score-label {
  margin: 10px 0 0;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.62);
}
.kvrev__score-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.13);
  width: 100%;
  justify-content: center;
  font-family: var(--heading);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: color .2s ease;
}
.kvrev__score-link svg { width: 15px; height: 15px; transition: transform .25s ease; }
.kvrev__score-link:hover { color: #9EC6F7; }
.kvrev__score-link:hover svg { transform: translateX(3px); }

/* ---- Bento ----
   The spotlight holds the left column across both rows; the four
   short quotes fill a 2x2 to its right. */
.kvrev__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(14px, 1.3vw, 20px);
}
.kvrev__card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.kvrev__card:hover {
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.07);
  transform: translateY(-3px);
}
.kvrev__card blockquote {
  margin: 0 0 auto;
  font-size: 16px;
  line-height: 1.72;
  color: rgba(255,255,255,.86);
}
.kvrev__card--spotlight {
  grid-row: span 2;
  position: relative;
  overflow: hidden;
  border-color: rgba(158,198,247,.22);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(0,37,110,.85) 0%, rgba(0,37,110,0) 70%),
    linear-gradient(150deg, #062056 0%, #001338 100%);
}
.kvrev__card--spotlight:hover {
  border-color: rgba(158,198,247,.42);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(0,37,110,.85) 0%, rgba(0,37,110,0) 70%),
    linear-gradient(150deg, #062056 0%, #001338 100%);
}
.kvrev__quotemark {
  font-family: var(--heading);
  font-size: 88px;
  font-weight: 700;
  line-height: .8;
  color: rgba(158,198,247,.34);
  /* The glyph carries a lot of side bearing; pull it back to the text edge. */
  margin: -8px 0 8px -6px;
}
.kvrev__card--spotlight blockquote {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.62;
  color: #fff;
}

/* ---- Attribution ---- */
.kvrev__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: clamp(22px, 2.2vw, 28px);
  padding-top: clamp(18px, 1.8vw, 22px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.kvrev__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.kvrev__card--spotlight .kvrev__avatar { background: var(--brand-primary); }
.kvrev__who { display: grid; gap: 1px; min-width: 0; }
.kvrev__name {
  font-family: var(--heading);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.kvrev__src {
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.58);
}
.kvrev__meta .sv-stars svg { width: 13px; height: 13px; }

@media (max-width: 1100px) {
  .kvrev__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Spotlight goes full width and stops stretching to a second row. */
  .kvrev__card--spotlight { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 900px) {
  .kvrev__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .kvrev__score { justify-self: start; width: 100%; max-width: 320px; }
  .kvrev__lede { max-width: none; }
}
@media (max-width: 640px) {
  /* Stacked, equal-height rows left the short reviews with a tall empty gap. */
  .kvrev__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .kvrev__quotemark { font-size: 66px; }
  .kvrev__score { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kvrev__card:hover { transform: none; }
  .kvrev__score-link:hover svg { transform: none; }
}


/* =========================================================
   SERVICES INDEX — /services
   A "pick your system" page. The organising idea is temperature:
   heating owns the brand red, cooling an ice blue, plumbing a
   neutral grey, and that colour threads through the chooser panel,
   the section numeral, the figure frame and the row hover, so the
   visitor always knows which of the three zones they are in.
   Every colour below clears AA against white and against its own
   fill (7.0 / 6.8 / 8.3 : 1).
   ========================================================= */
.svc-cat--heating  { --cat: #B50517; --cat-ink: #8A0411; }
.svc-cat--cooling  { --cat: #0A5BA8; --cat-ink: #07406F; }
.svc-cat--plumbing { --cat: #4A4F55; --cat-ink: #2A2E33; }
.svc-door--heating  { --cat: #B50517; }
.svc-door--cooling  { --cat: #0A5BA8; }
/* Plumbing runs neutral rather than coloured. The section uses a mid-dark
   grey (8.3 : 1 on white, and the same white-on-grey), but that same grey
   only reaches 2.4 : 1 against the near-black card, so the door takes a
   lighter grey to keep the hover flood visible. */
.svc-door--plumbing { --cat: #6B7078; }

/* ---- Chooser ---- */
.svc-choose {
  position: relative;
  padding: clamp(28px, 3.4vw, 48px) 0 clamp(60px, 8vw, 110px);
  background:
    radial-gradient(80% 120% at 50% 0%, #FFFFFF 0%, #F4F6F9 60%, #EEF1F6 100%);
  overflow: hidden;
}
.svc-choose::before {
  /* Faint engineering grid. Atmosphere without an image request. */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,37,110,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,37,110,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
          mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 100%);
  pointer-events: none;
}
.svc-choose > .wrap { position: relative; z-index: 1; }
.svc-choose__head { text-align: center; max-width: 680px; margin: 0 auto clamp(22px, 3vw, 36px); }
.svc-choose__eyebrow {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0 0 14px;
}
.svc-choose__title {
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.svc-choose__sub { color: var(--ink-soft); font-size: 17.5px; line-height: 1.6; margin: 0; }

.svc-doors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 30px);
  align-items: stretch;
}
/* The li stretches to the tallest card in the row and the link fills it,
   so all three stay level even when one description wraps a line further. */
.svc-door { position: relative; display: flex; }
.svc-door__link {
  position: relative;
  flex: 1 1 auto;
  /* Flex column with aspect-ratio on an auto height: the ratio sets the
     card's preferred height, but a long description can still push it
     taller rather than being clipped by overflow:hidden. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #0A0E14;
  box-shadow: 0 10px 30px rgba(10,14,20,.16);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
/* The global `a:hover { color: var(--brand-primary) }` outranks the #fff
   above on hover, and .svc-door__name has no colour of its own, so the
   heading inherited brand red. Hold the card's inherited colour at white. */
.svc-door__link:hover,
.svc-door__link:focus,
.svc-door__link:focus-visible { color: #fff; }
.svc-door__media { position: absolute; inset: 0; z-index: 0; display: block; }
.svc-door__media picture, .svc-door__media img { display: block; width: 100%; height: 100%; }
.svc-door__media img {
  object-fit: cover;
  transform: scale(1.04);
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.svc-door__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(6,9,14,.92) 6%, rgba(6,9,14,.55) 42%, rgba(6,9,14,.18) 100%);
  transition: opacity .4s ease;
}
.svc-door__veil::after {
  /* The category colour floods up from the base on hover. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--cat) 0%, rgba(0,0,0,0) 72%);
  opacity: 0;
  transition: opacity .45s ease;
}
.svc-door__num {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 24px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .16em;
  color: rgba(255,255,255,.72);
}
.svc-door__num::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--cat);
  margin-bottom: 12px;
  transition: width .45s cubic-bezier(.2,.7,.3,1);
}
.svc-door__body {
  position: relative;
  z-index: 2;
  display: block;
  /* Top padding keeps the copy clear of the absolutely-placed numeral
     when it wraps to many lines on a narrow card. */
  margin-top: auto;
  padding: clamp(64px, 7vw, 88px) clamp(20px, 2vw, 28px) clamp(22px, 2.4vw, 30px);
}
.svc-door__name {
  display: block;
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(32px, 3.3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.svc-door__desc {
  display: block;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
  margin-bottom: 16px;
  transition: color .3s ease;
}
.svc-door__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svc-door__count {
  font-family: var(--heading);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  transition: color .3s ease;
}
.svc-door__meta .svc-arrow {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 7px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.42);
  transition: transform .4s cubic-bezier(.2,.7,.3,1), background-color .3s ease, border-color .3s ease;
}

@media (hover: hover) {
  .svc-door__link:hover { transform: translateY(-8px); box-shadow: 0 22px 48px rgba(10,14,20,.3); }
  .svc-door__link:hover .svc-door__media img { transform: scale(1.11); }
  .svc-door__link:hover .svc-door__veil::after { opacity: .82; }
  .svc-door__link:hover .svc-door__desc,
  .svc-door__link:hover .svc-door__count { color: #fff; }
  .svc-door__link:hover .svc-door__num::before { width: 60px; }
  .svc-door__link:hover .svc-arrow { transform: translateX(5px); background: #fff; border-color: #fff; color: var(--cat); }
}
.svc-door__link:focus-visible {
  outline: 3px solid var(--cat);
  outline-offset: 4px;
}
.svc-door__link:focus-visible .svc-door__desc,
.svc-door__link:focus-visible .svc-door__count { color: #fff; }

/* ---- Category sections ---- */
.svc-cat {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 116px) 0;
  background: #fff;
}
.svc-cat--cooling { background: #FAFBFC; }
.svc-cat__glow {
  position: absolute;
  z-index: 0;
  top: -16%;
  right: -12%;
  width: min(760px, 62vw);
  height: min(760px, 62vw);
  border-radius: 50%;
  background: radial-gradient(circle, var(--cat) 0%, transparent 68%);
  opacity: .07;
  pointer-events: none;
}
.svc-cat__ghost {
  position: absolute;
  z-index: 0;
  top: clamp(8px, 2vw, 26px);
  left: -0.06em;
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(150px, 24vw, 340px);
  line-height: .78;
  letter-spacing: -0.05em;
  color: var(--cat);
  opacity: .06;
  pointer-events: none;
  user-select: none;
}
.svc-cat > .wrap { position: relative; z-index: 1; }

.svc-cat__head { margin: 0 0 clamp(36px, 5vw, 60px); }
.svc-cat__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cat);
  margin: 0 0 16px;
}
.svc-cat__icon {
  width: 1.55em;
  height: 1.55em;
  flex-shrink: 0;
  /* Optical alignment: the caps sit above the baseline, the glyph centre
     of an icon does not, so nudge it back up to match the lettering. */
  margin-top: -0.12em;
}
.svc-cat__title {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.svc-cat__lede { color: var(--ink-soft); font-size: 17.5px; line-height: 1.65; margin: 0; }

.svc-cat__body {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 68px);
  align-items: start;
}
.svc-cat__figure { position: relative; }
.svc-cat__frame {
  /* Offset rule box behind the photo: cheap depth, category coloured. */
  position: absolute;
  z-index: 0;
  inset: 18px -18px -18px 18px;
  border: 2px solid var(--cat);
  border-radius: 12px;
  opacity: .32;
  pointer-events: none;
}
.svc-cat__media { position: relative; z-index: 1; display: block; }
.svc-cat__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
}

.svc-cat__list { list-style: none; margin: 0; padding: 0; }
.svc-row { border-top: 1px solid var(--rule); }
.svc-row:last-child { border-bottom: 1px solid var(--rule); }
.svc-row__link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px clamp(14px, 1.6vw, 22px) 20px clamp(10px, 1.4vw, 18px);
  text-decoration: none;
  color: inherit;
  transition: background-color .3s ease, padding-left .35s cubic-bezier(.2,.7,.3,1);
}
.svc-row__link::before {
  /* Category-coloured spine that grows in on hover. */
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: var(--cat);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.svc-row__text { display: block; min-width: 0; }
.svc-row__name {
  display: block;
  margin: 0 0 5px;
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  transition: color .25s ease;
}
.svc-row__desc { display: block; margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }
.svc-row__link .svc-arrow {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 50%;
  color: var(--cat);
  background: color-mix(in srgb, var(--cat) 10%, transparent);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), background-color .3s ease, color .3s ease;
}
@media (hover: hover) {
  .svc-row__link:hover { background: color-mix(in srgb, var(--cat) 5%, transparent); padding-left: clamp(20px, 2.2vw, 30px); }
  .svc-row__link:hover::before { transform: scaleY(1); }
  .svc-row__link:hover .svc-row__name { color: var(--cat-ink); }
  .svc-row__link:hover .svc-arrow { transform: translateX(4px); background: var(--cat); color: #fff; }
}
.svc-row__link:focus-visible { outline: 3px solid var(--cat); outline-offset: -3px; border-radius: 6px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .svc-cat__body { grid-template-columns: 1fr; gap: clamp(28px, 4vw, 44px); }
  .svc-cat__figure { max-width: 520px; }
  .svc-cat__media img { aspect-ratio: 16 / 10; }
}
@media (max-width: 880px) {
  .svc-doors { grid-template-columns: 1fr; gap: 18px; max-width: 460px; margin-inline: auto; }
  .svc-door__link { aspect-ratio: 16 / 11; }
}
@media (max-width: 560px) {
  /* A fixed ratio would clip the copy up into the numeral on narrow phones
     (overflow:hidden turns off the content-based minimum height), so the
     card grows with its copy instead, from a floor near the old 4:3 size. */
  .svc-door__link { aspect-ratio: auto; min-height: 262px; }
  .svc-door__body { padding-top: 78px; }
  .svc-cat__figure { max-width: none; }
  .svc-row__link { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding-block: 17px; }
}

/* Browsers without color-mix get a plain neutral wash instead of a
   category-tinted one. Everything else in the component still applies. */
@supports not (background: color-mix(in srgb, red 5%, transparent)) {
  .svc-row__link .svc-arrow { background: var(--surface); }
  @media (hover: hover) { .svc-row__link:hover { background: var(--surface); } }
}

@media (prefers-reduced-motion: reduce) {
  .svc-door__link,
  .svc-door__media img,
  .svc-door__veil::after,
  .svc-door__num::before,
  .svc-door__desc,
  .svc-door__count,
  .svc-row__link,
  .svc-row__link::before,
  .svc-arrow { transition: none !important; }
  .svc-door__link:hover { transform: none; }
  .svc-door__link:hover .svc-door__media img { transform: scale(1.04); }
}

/* =========================================================
   COVERAGE INDEX — blue variant (plumbing pages)
   The panel ships red. Plumbing runs the same component in
   blue so the trade reads apart from heating and cooling.
   Mirrors the red set's lightness relationships: a light tint
   for type on the dark panel, a mid tint for small accents,
   and the saturated fill behind white icons. Contrast on the
   #0C0E12 panel is 8.9 / 7.4 : 1, and white on the fill is
   6.8 : 1, all at or above the red set it replaces.
   ========================================================= */
.sv-cov--blue .sv-cov__atmo {
  background:
    radial-gradient(1100px 640px at 8% -4%, rgba(10,91,168,.34), transparent 62%),
    radial-gradient(900px 720px at 102% 104%, rgba(10,91,168,.19), transparent 60%),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: auto, auto, 72px 72px, 72px 72px;
}
.sv-cov--blue .sv-cov__eyebrow-rule { background: #0A5BA8; }
.sv-cov--blue .sv-cov__title strong { color: #6FB6F5; }
.sv-cov--blue .sv-cov__shot::after {
  background:
    linear-gradient(180deg, rgba(12,14,18,0) 42%, rgba(12,14,18,.74) 100%),
    linear-gradient(120deg, rgba(10,91,168,.24), transparent 55%);
}
.sv-cov--blue .sv-cov__row::before { background: linear-gradient(180deg, #4DA3FF, #0A5BA8); }
.sv-cov--blue .sv-cov__point { color: #4DA3FF; }
.sv-cov--blue .sv-cov__go { color: #6FB6F5; }
.sv-cov--blue .sv-cov__shield-icon { color: #4DA3FF; }
/* The icon colour alone left the halo behind it red — it is painted by a
   ::before on the same element, not by currentColor. */
.sv-cov--blue .sv-cov__shield-icon::before {
  background: radial-gradient(circle, rgba(77,163,255,.26), transparent 68%);
}
@media (hover: hover) {
  /* The base sheet lights the first row by default and on hover, in one
     combined selector. Both halves need the blue fill, or row one stays
     red until you point at something else. */
  .sv-cov--blue .sv-cov__index:not(:has(.sv-cov__row:is(:hover, :focus-within))) .sv-cov__row:first-child .sv-cov__icon,
  .sv-cov--blue .sv-cov__row:is(:hover, :focus-within) .sv-cov__icon { background: #0A5BA8; }
  .sv-cov--blue .sv-cov__index:not(:has(.sv-cov__row:is(:hover, :focus-within))) .sv-cov__row:first-child .sv-cov__arrow,
  .sv-cov--blue .sv-cov__row:is(:hover, :focus-within) .sv-cov__arrow { background: #0A5BA8; }
}
/* Under 991px the icons are always filled, not just on hover. */
@media (max-width: 991px) {
  .sv-cov--blue .sv-cov__icon { background: #0A5BA8; }
}