/*
Theme Name: Tennessee Air Pros
Theme URI: https://tennesseeairpros.com/
Author: Oliver Web Guy LLC
Description: Custom residential HVAC theme for Tennessee Air Pros. Built to the approved brand brief, style guide and homepage wireframe. Bright canvas, deep navy typography, restrained orange action colour.
Version: 2.2.4
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: tnairpros
*/

/* ==========================================================================
   1. Tokens. Locked in .factory/config/design-dna.json
   ========================================================================== */

/* Tokens taken from the client-supplied design file, 19 September 2026. */

/* Self-hosted, latin subset. Replaces the Google Fonts request.
   Brief section 4 asks for self-hosted, section 12 for subsetting.
   font-display: swap keeps text visible while these load. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/montserrat-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/montserrat-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("assets/fonts/montserrat-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/source-sans-3-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/source-sans-3-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/source-sans-3-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --navy: #082D4E;
  --navy-deep: #061F36;      /* utility strip and footer */
  --navy-tint: #12436C;      /* hairlines inside navy bands */
  --blue: #087EAE;
  --blue-hover: #0A6C94;
  --blue-light: #4FB3DC;     /* accent inside the navy hero */
  --orange: #F58A07;
  --orange-hover: #DC7B04;
  --orange-text: #A85C02;
  --white: #FFFFFF;
  --pale: #F3F7FA;
  --pale-blue: #EAF3F8;      /* the fee-waiver band */
  --pale-alt: #E7EFF5;
  --body: #263747;
  --muted: #6B7C8C;
  --muted-deep: #4A5D70;
  --link-ink: #334759;
  --border: #D8E3EA;
  --border-soft: #E8EEF3;
  --border-mid: #C3D6E2;
  --on-navy-body: #C8D9E6;
  --on-navy-muted: #B9CDDD;
  --on-navy-border: #12436C;
  --star: #F5B301;

  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1200px;   /* brief section 4: maximum content width */
  --read: 46em;
  --gutter: clamp(20px, 4vw, 40px);
  --sect-y: clamp(48px, 7vw, 76px);

  --r-btn: 9px;
  --r-card: 12px;
  --r-panel: 14px;
  --r-pill: 20px;

  --shadow-card: 0 2px 10px rgba(8, 45, 78, .06);
  --ease: cubic-bezier(.2,.7,.3,1);
}

@media (max-width: 780px) {
  :root { --sect-y: 48px; }
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

@media (max-width: 700px) { body { font-size: 17px; } }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0 0 .6em;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-weight: 800; font-size: clamp(30px, 4.3vw, 56px); line-height: 1.03; letter-spacing: -.02em; }
h2 { font-weight: 800; font-size: clamp(24px, 2.9vw, 38px); letter-spacing: -.015em; line-height: 1.08; }
h3 { font-weight: 700; font-size: 20px; }
h4 { font-weight: 700; font-size: 17px; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }

/* Focus. Visible on light and navy. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}
.band-navy :focus-visible { outline-color: var(--orange); }

::selection { background: var(--orange); color: var(--navy); }

/* Skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: var(--white);
  padding: 14px 20px; font-family: var(--font-display); font-weight: 700;
  border-radius: 0 0 var(--r-btn) 0;
}
.skip-link:focus { left: 0; color: var(--white); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-read { max-width: 1100px; }
.wrap-read { max-width: var(--read); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

.band { padding-block: var(--sect-y); }
.band-pale { background: var(--pale); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.band-navy { background: var(--navy); color: var(--on-navy-body); }
.band-navy h2, .band-navy h3 { color: var(--white); }
.band-navy a { color: var(--white); }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 44px;
  align-items: center;
}
.split-hero { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

@media (min-width: 900px) {
  .split-55 { grid-template-columns: 55fr 45fr; }
  .split-45 { grid-template-columns: 45fr 55fr; }
}

/* On mobile the copy always comes before the photo. */
@media (max-width: 899px) {
  .split .media-first { order: 2; }
  .split .copy-first { order: 1; }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
  display: block;
}
/* Contrast rule: blue fails 4.5:1 on pale (4.23:1). Drop to muted-deep. */
.band-pale .eyebrow { color: var(--muted-deep); }
.band-navy .eyebrow { color: var(--on-navy-muted); }

.lede { font-size: 1.1em; color: var(--muted-deep); }
.band-navy .lede { color: var(--on-navy-body); }
.small { font-size: 13px; color: var(--muted); }
.band-navy .small { color: var(--on-navy-muted); }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  text-decoration: none; cursor: pointer;
  padding: 13px 24px; border-radius: var(--r-btn); border: 2px solid transparent;
  min-height: 48px;
  transition: background-color .14s ease-out, transform .14s ease-out, border-color .14s ease-out;
}

/* Orange takes NAVY text. White on orange is 2.46:1 and fails at every size. */
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-hover); color: var(--white); transform: translateY(-1px); }

/* Secondary action is brand blue with white text at 4.56:1, lifting to a light blue
   fill with navy text on hover at 11.32:1. Both states verified, and the hover is
   lighter rather than darker so the two buttons swap emphasis on interaction. */
.btn-secondary { background: var(--white); color: var(--navy); border-color: var(--border-mid); }
.btn-secondary:hover { background: var(--white); color: var(--navy); border-color: var(--blue); transform: translateY(-1px); }

.band-navy .btn-secondary { background: var(--white); color: var(--navy); border-color: var(--border-mid); }
.band-navy .btn-secondary:hover { background: var(--blue-hover); color: var(--navy); border-color: var(--blue-hover); }

.btn-sm { font-size: 17px; padding: 12px 18px; }
.btn-lg { font-size: 19px; padding: 15px 26px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 16px; }

/* ==========================================================================
   5. Cards, panels, tiles
   ========================================================================== */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: 30px;
  box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: .4em; }

a.card { text-decoration: none; color: inherit; display: block; transition: border-color .16s ease-out, transform .16s ease-out; }
a.card:hover { border-color: var(--blue); transform: translateY(-1px); }
a.card .card-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--navy); margin-bottom: 8px; }
a.card p { color: var(--muted-deep); font-size: 16px; }

.panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: 28px;
}
.band-pale .panel { background: var(--white); }
.band-navy .panel { background: var(--navy-tint); border-color: var(--on-navy-border); }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Diagnostic price panel */
.price-flag {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px;
  background: var(--pale-alt); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 20px 22px; margin: 22px 0;
}
.price-flag .figure { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--navy); line-height: 1.1; }
.price-flag .note { color: var(--muted-deep); font-size: 15.5px; }

/* Price table */
.price-table { width: 100%; border-collapse: collapse; margin: 18px 0; }
.price-table th, .price-table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--border); }
.price-table th { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 15.5px; }
.price-table td.amount { font-family: var(--font-display); font-weight: 700; color: var(--navy); white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* Commitment quote */
.commitment {
  border-left: 4px solid var(--orange);
  padding: 4px 0 4px 20px;
  margin: 22px 0;
  font-size: 1.05em;
  color: var(--navy);
}
.band-navy .commitment { color: var(--white); border-left-color: var(--orange); }
.commitment .who { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }

/* Media placeholder, private preview only */
.media-ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--pale-alt); border: 1px dashed var(--border);
  border-radius: var(--r-card); padding: 28px; min-height: 240px; text-align: center;
}
.media-ph span {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--muted);
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 7px 10px;
}

figure { margin: 0; }
figure img { border-radius: var(--r-card); border: 1px solid var(--border); }
figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* ==========================================================================
   6. Header, to the supplied design
   ========================================================================== */

.utility { background: var(--navy-deep); color: var(--on-navy-body); font-size: 14px; letter-spacing: .04em; padding: 9px var(--gutter); }
.utility-inner { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; text-align: center; }
.utility-hours { color: var(--orange); }

/* Full bleed white bar, with the row of content capped to the page width inside it.
   Capping the header element itself left the sticky bar only 1200px wide. */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 12px var(--gutter);
}
.site-header__inner {
  position: relative;
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
}

/* WordPress pins its admin bar with position:fixed for logged in users, so a sticky
   header at top:0 slides underneath it and gets clipped. Offset by the admin bar
   height. Logged out visitors never see this rule. */
.admin-bar .site-header { top: 32px; }

/* Anchor jumps and the sticky sidebar need the same allowance. */
.admin-bar .page-aside { top: 128px; }
.admin-bar .page-body h2 { scroll-margin-top: 128px; }
.admin-bar .entry-content h2 { scroll-margin-top: 128px; }

/* The bar grows to 46px here, so the allowance grows with it. These have to sit
   after the unconditional rules above or the 128px would win on equal specificity. */
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .page-body h2,
  .admin-bar .entry-content h2 { scroll-margin-top: 142px; }
}

/* At 600px and below WordPress switches #wpadminbar to position:absolute, so it
   scrolls away with the page instead of staying pinned. Holding the sticky header
   46px down then leaves a 46px gap with page content sliding through above it.
   That is what a logged in visitor sees on a phone the moment they scroll, or when
   Back restores a scrolled position. Nothing occupies that space, so close it. */
@media screen and (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
  .admin-bar .page-body h2,
  .admin-bar .entry-content h2 { scroll-margin-top: 96px; }
}
.site-logo { flex: 0 0 auto; display: block; line-height: 0; }
.site-logo img { display: block; height: clamp(44px, 7vw, 62px); width: auto; }
.site-logo strong { font-family: var(--font-display); font-size: 22px; color: var(--navy); }

.main-nav { flex: 0 1 auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: 6px 20px; align-items: center; }
.main-nav li { margin: 0; }
.main-nav a {
  white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--navy); text-decoration: none; padding: 6px 0; display: inline-block;
  border-bottom: 2px solid transparent; transition: border-color .16s ease-out;
}
.main-nav a:hover, .main-nav .current-menu-item > a { border-bottom-color: var(--orange); }

/* Services dropdown. ui.js opens it on click only — hover never opens it, so it
   cannot flicker under the pointer — and closes it on Escape or an outside click.
   The parent link still goes to /services/ on its own, so the menu works even if
   the button is ignored entirely. */
.main-nav .has-sub { position: relative; display: flex; align-items: center; gap: 2px; }

.sub-toggle {
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  width: 18px; height: 30px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sub-toggle::after {
  content: ""; width: 7px; height: 7px;
  border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s var(--ease);
}
.sub-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(2px); }
.sub-toggle:hover::after { border-color: var(--blue); }
.sub-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.nav-sub { display: none; }
.nav-sub.is-open {
  display: block; position: absolute; top: calc(100% + 12px); left: -12px; z-index: 30;
  min-width: 252px; padding: 8px;
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(8, 45, 78, .14);
}
.nav-sub ul { display: block; margin: 0; padding: 0; list-style: none; }
.nav-sub li { border: 0; margin: 0; }
.nav-sub a {
  display: block; padding: 9px 12px; border-radius: 7px; border-bottom: 0;
  white-space: nowrap; font-size: 15.5px; color: var(--navy);
}
.nav-sub a:hover { background: var(--pale); border-bottom: 0; color: var(--blue); }
.nav-sub__all { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border); }
.nav-sub__all a { font-weight: 700; color: var(--blue); }

/* Service Areas sits further right, so its panel is right-aligned to the item to
   keep it inside the page rather than pushing a horizontal scrollbar. */
#sub-areas.is-open { left: auto; right: -12px; }

/* Services mega panel. The list item goes position:static so the absolute panel
   resolves against .site-header__inner and can span the whole 1200px row instead
   of hanging off a 70px wide nav item. */
.main-nav .has-sub--mega { position: static; }
.nav-sub--mega.is-open {
  left: 0; right: 0; min-width: 0;
  padding: 24px 26px 22px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 26px;
}
.nav-mega__col h3 {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-deep);
  margin: 0 0 10px; padding: 0 12px;
}
.nav-sub--mega ul { display: block; margin: 0; padding: 0; list-style: none; }
.nav-sub--mega li { border: 0; margin: 0; }
.nav-sub--mega a {
  display: block; padding: 7px 12px; border-radius: 7px; border-bottom: 0;
  font-size: 15px; color: var(--navy); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.nav-sub--mega a:hover { background: var(--pale); color: var(--blue); border-bottom: 0; }

.header-actions { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: flex-end; }
.header-phone { display: flex; flex-direction: column; line-height: 1.25; padding: 4px 0; min-width: 0; text-decoration: none; }
.header-phone .hp-num { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--navy); }
.header-phone .hp-sub { font-size: 14px; color: var(--muted-deep); }
.header-phone:hover .hp-num { color: var(--blue); }

.nav-toggle { display: none; }

@media (max-width: 1240px) {
  .header-phone .hp-sub { display: none; }
  .main-nav ul { gap: 6px 14px; }
}

/* The inline nav needs 1083px of header once Services and Service Areas carry a
   caret. At a 1200px viewport the row has 1120px, so the burger has to take over
   below that — measured against real Montserrat metrics, not estimated. The old
   1100px breakpoint was already 30px too low and wrapped without the carets. */
@media (max-width: 1200px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px; order: 2; margin-left: auto;
    background: var(--white); border: 2px solid var(--navy); color: var(--navy);
    font-family: var(--font-display); font-weight: 700; font-size: 17px;
    padding: 10px 18px; border-radius: var(--r-btn); cursor: pointer; min-height: 46px;
  }
  .main-nav { flex-basis: 100%; display: none; order: 10; }
  .main-nav ul { flex-wrap: wrap; }
  .main-nav.is-open { display: block; padding-bottom: 8px; }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .main-nav li { border-top: 1px solid var(--border); }
  .main-nav a { display: block; padding: 14px 0; font-size: 19px; border-bottom: 0; }
  .header-actions { order: 3; flex-basis: 100%; justify-content: flex-start; }

  /* Stacked nav: Services and its caret share a row, the panel drops below as a
     plain indented list rather than a floating card. */
  .main-nav .has-sub { flex-wrap: wrap; justify-content: space-between; gap: 0; }
  .main-nav .has-sub > a { flex: 1 1 auto; }
  .sub-toggle { width: 48px; height: 48px; flex: 0 0 auto; }
  .main-nav .nav-sub li { border-top: 0; }
  .nav-sub.is-open {
    position: static; flex-basis: 100%; min-width: 0;
    padding: 0 0 10px 14px; margin-top: -4px;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  .nav-sub a { padding: 11px 0; font-size: 17px; white-space: normal; border-radius: 0; }
  .nav-sub a:hover { background: none; }
  .nav-sub__all { margin-top: 2px; padding-top: 10px; }

  /* Inside the burger the mega panel is just a stacked list with its group
     headings kept, so all 20 services stay reachable on a phone. */
  .nav-sub--mega.is-open {
    grid-template-columns: 1fr; gap: 0; padding: 0 0 10px 14px;
  }
  .nav-mega__col h3 { padding: 0; margin: 12px 0 2px; }
  .nav-sub--mega a { white-space: normal; padding: 10px 0; font-size: 16.5px; }
}

/* ==========================================================================
   7. Hero. Real two column grid. Copy left, photo right. No overlay.
   ========================================================================== */

.hero-grid { background: var(--white); display: grid; }

.hero-copy { padding: 34px var(--gutter) 38px; }
.hero-copy h1 { margin-bottom: 16px; }
.hero-copy .eyebrow { margin-bottom: 12px; }
.hero-copy .lede { font-size: 1.1em; max-width: 34em; }

.hero-media { line-height: 0; background: var(--white); position: relative; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }

.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.hero-facts a { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--navy); text-decoration: none; border-bottom: 2px solid var(--orange); }
.hero-facts a:hover { color: var(--blue); }
.micro { font-size: 15px; color: var(--muted-deep); }

@media (max-width: 899px) {
  .hero-media { order: 2; aspect-ratio: 4 / 3; max-height: 380px; }
  .hero-media img { object-position: center 18%; }
  .hero-copy  { order: 1; padding-top: 32px; }
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch; }
  /* Copy column aligns to the 1200px page grid, never to the raw viewport edge. */
  /* Content-box plus justify-self:end made this box wider than its grid column, so
     the browser pushed it left of the page content edge and the hero text no longer
     lined up with the logo. Plain padding keeps it on the grid. */
  .hero-copy {
    padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
    padding-right: 48px;
    padding-block: 58px 52px;
    box-sizing: border-box;
    width: 100%;
  }
  .hero-copy > * { max-width: 34em; }
  .hero-copy h1 { max-width: 15em; }
  .hero-copy { align-self: start; }
  /* The photo is absolutely positioned so its intrinsic height cannot stretch the
     row. The copy decides the hero height; the photo crops to fit it. */
  .hero-media { align-self: stretch; min-height: 440px; }
  .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
}

@media (min-width: 1400px) {
  .hero-media { min-height: 480px; }
}

/* ==========================================================================
   7b. Trust strip. Even columns, facts only, no ratings or counts.
   ========================================================================== */

.trust-strip { background: var(--navy); color: var(--on-navy-body); padding-block: 34px; }

.trust-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 26px 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .trust-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust-list { grid-template-columns: repeat(4, 1fr); gap: 0 40px; } }

.trust-list li { margin: 0; }


.trust-list .t-title {
  display: block;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  text-transform: uppercase; letter-spacing: .045em; color: var(--orange);
  margin: 0 0 8px; line-height: 1.3;
}
.trust-list p {
  margin: 0; color: var(--white); font-size: 16px; line-height: 1.5;
  max-width: 26em;
}

/* Hairline rules between columns, like a printed table. */
@media (min-width: 1000px) {
  .trust-list { gap: 0; }
  .trust-list li { padding-right: 34px; }
  .trust-list li + li { padding-left: 34px; border-left: 1px solid rgba(255,255,255,.18); }
  .trust-list li:last-child { padding-right: 0; }
}

/* ==========================================================================
   7c. Process steps
   ========================================================================== */

.steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: step; }
.steps li { margin: 0; padding-top: 20px; border-top: 3px solid var(--border); counter-increment: step; }
.steps li:first-child { border-top-color: var(--orange); }
.steps .n {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .14em;
  color: var(--muted-deep); display: block; margin-bottom: 9px;
}
.steps h3 { font-size: 19px; margin-bottom: 8px; }
.steps p { font-size: 16px; color: var(--muted-deep); margin: 0; }

/* ==========================================================================
   7d. Reasons band
   ========================================================================== */

.why { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 8px; }
.why-item { padding-left: 20px; border-left: 3px solid var(--orange); }
.why-item h3 { font-size: 19px; margin-bottom: 9px; }
.why-item p { font-size: 16px; margin: 0; }
.band-navy .why-item { border-left-color: var(--orange); }
.band-navy .why-item p { color: var(--on-navy-body); }

/* ==========================================================================
   7e. Services index grid
   ========================================================================== */

.svc-cols { display: grid; gap: 26px 34px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 26px; }
.svc-col h3 { font-size: 17px; padding-bottom: 10px; border-bottom: 2px solid var(--orange); margin-bottom: 12px; }
.svc-col ul { list-style: none; margin: 0; padding: 0; }
.svc-col li { margin: 0 0 2px; }
.svc-col a {
  display: block; padding: 8px 10px; margin-left: -10px; border-radius: var(--r-pill);
  font-size: 16.5px; color: var(--body); text-decoration: none;
  transition: background-color .14s ease-out, color .14s ease-out;
}
.svc-col a:hover { background: var(--pale); color: var(--navy); }
.band-pale .svc-col a:hover { background: var(--white); }

/* ==========================================================================
   7f. Full bleed split bands. Image fills its half edge to edge.
   ========================================================================== */

.band-split { display: grid; align-items: stretch; }
.band-split .bs-media { line-height: 0; min-height: 300px; }
.band-split .bs-media img,
.band-split .bs-media .media-ph { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; border: 0; }
.band-split .bs-media .media-ph { min-height: 300px; }

.band-split .bs-copy { padding: var(--sect-y) var(--gutter); display: flex; align-items: center; }
.band-split .bs-copy > div { width: 100%; max-width: 600px; }

@media (min-width: 900px) {
  .band-split { grid-template-columns: 1fr 1fr; }
  .band-split .bs-media { min-height: 500px; }
  .band-split .bs-copy--right { padding-left: 56px; padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
  .band-split .bs-copy--left  { padding-right: 56px; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
  .band-split .bs-copy--right > div { margin-right: auto; }
  .band-split .bs-copy--left  > div { margin-left: auto; }
}

@media (max-width: 899px) {
  .band-split .bs-media { order: 2; aspect-ratio: 4 / 3; max-height: 320px; }
  .band-split .bs-copy  { order: 1; }
}

/* ==========================================================================
   8. FAQ
   ========================================================================== */

.faq-item { border-bottom: 1px solid var(--border); padding: 22px 0; }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item h3 { margin-bottom: 10px; }
.faq-item p:last-child { margin-bottom: 0; }

/* ==========================================================================
   9. Forms
   ========================================================================== */

.lf-title { font-size: 21px; margin-bottom: 6px; }
.lf-sub { font-size: 15.5px; color: var(--muted-deep); margin-bottom: 22px; }

.lf-grid { display: grid; gap: 0 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .lf-grid { grid-template-columns: 1fr 1fr; } .lf-grid .span-2 { grid-column: 1 / -1; } }

.lead-form .field { margin-bottom: 16px; }
.lead-form label {
  display: block; font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-deep); margin-bottom: 7px;
}
.lead-form .req { color: var(--orange-hover); }
.lead-form input, .lead-form select, .lead-form textarea {
  width: 100%; font-family: var(--font-body); font-size: 16.5px; color: var(--body);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card);
  padding: 13px 14px; min-height: 46px;
}
.lead-form textarea { min-height: 120px; resize: vertical; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--blue); }
.lead-form .hint { font-size: 14px; color: var(--muted); margin-top: 6px; }
.hint-inline { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted); text-transform: none; }
.lead-form .error { color: #A3311B; font-size: 14.5px; margin-top: 5px; font-weight: 600; }
.lead-form input[aria-invalid="true"], .lead-form select[aria-invalid="true"], .lead-form textarea[aria-invalid="true"] { border-color: #A3311B; border-width: 2px; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: 14.5px; color: var(--muted-deep); margin-top: 14px; }

.form-message { border-radius: var(--r-card); padding: 18px 20px; margin-bottom: 20px; font-size: 16px; }
.form-message.ok { background: #EAF4EC; border: 1px solid #BFD9C6; color: #1E4A2A; }
.form-message.bad { background: #FBEDEA; border: 1px solid #E5C2BA; color: #7E2616; }

/* ==========================================================================
   10. Service area list
   ========================================================================== */

.town-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.town-links li { margin: 0; }
.town-links a {
  display: block; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 14px 16px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--navy); text-decoration: none;
  transition: border-color .16s ease-out;
}
.town-links a:hover { border-color: var(--blue); }

/* ==========================================================================
   11. Breadcrumbs, related content
   ========================================================================== */

.breadcrumbs { font-size: 14.5px; color: var(--muted); padding-block: 16px 0; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--border); }
.breadcrumbs a { color: var(--muted-deep); }

.related h2 { font-size: 22px; }

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer { background: var(--navy); color: var(--on-navy-body); padding-block: 56px 28px; font-size: 16px; }
.site-footer h3 { font-size: 16px; color: var(--white); margin-bottom: 14px; font-family: var(--font-display); letter-spacing: .02em; }
.site-footer a { color: var(--on-navy-body); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.footer-grid { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer-logo { background: var(--white); border-radius: var(--r-card); padding: 14px 16px; display: inline-block; margin-bottom: 16px; }
.footer-logo img { width: 200px; }
.footer-phone { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--white); text-decoration: none; }
.footer-bottom { border-top: 1px solid var(--navy-tint); margin-top: 34px; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: 14.5px; color: var(--on-navy-muted); }
.footer-bottom a { color: var(--on-navy-muted); }
.footer-credit a { color: var(--on-navy-body); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--white); }

/* ==========================================================================
   13. Sticky mobile actions
   ========================================================================== */

.sticky-actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; gap: 10px; padding: 10px 12px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--white); border-top: 1px solid var(--border);
}
.sticky-actions .btn { flex: 1 1 0; font-size: 16px; padding: 14px 12px; }

@media (max-width: 780px) {
  .sticky-actions { display: flex; }
  body { padding-bottom: 78px; }
}

@media print { .sticky-actions, .site-header, .utility { display: none; } }

/* ==========================================================================
   14. Motion. CSS only. See MOTION-PROFILE.md
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .42s var(--ease), transform .42s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
/* If the observer never runs, nothing stays hidden. */
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   15. Editor content
   ========================================================================== */

.entry-content > * { max-width: var(--read); }
.entry-content > .full { max-width: none; }
.entry-content h2 { margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }

/* Inline optional-field hint */
.hint-inline { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--muted); }

/* Hero image slot keeps a stable aspect so layout does not shift */
.hero .media-ph { min-height: 340px; }

/* Map embed. Responsive, lazy, no business pin. */
.map-embed { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--pale-alt); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }


/* ==========================================================================
   16. Maintenance plan panel
   ========================================================================== */

.plan-panel {
  background: var(--pale); border: 1px solid var(--border); border-radius: var(--r-panel);
  padding: 40px; display: grid; gap: 34px; align-items: center;
}
@media (min-width: 900px) {
  .plan-panel { grid-template-columns: 1.35fr 1fr; padding: 48px; gap: 48px; }
}
@media (max-width: 560px) { .plan-panel { padding: 26px; } }

.plan-copy .eyebrow { color: var(--orange-text); margin-bottom: 12px; }
.plan-copy h2 { margin-bottom: 16px; }
.plan-copy > p { color: var(--muted-deep); }

.benefit-list { list-style: none; margin: 22px 0 0; padding: 0; }
.benefit-list li {
  margin: 0; padding: 14px 0; display: flex; gap: 14px; align-items: flex-start;
  border-bottom: 1px solid var(--border); font-size: 16.5px; color: var(--body);
}
.benefit-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.benefit-list .tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--orange); position: relative; margin-top: 1px;
}
.benefit-list .tick::after {
  content: ""; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px;
  border-right: 2.5px solid var(--navy); border-bottom: 2.5px solid var(--navy); transform: rotate(45deg);
}

.plan-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-panel);
  padding: 34px 28px; text-align: center;
}
.plan-card .plan-kicker {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--orange-text); display: block; margin-bottom: 14px;
}
.plan-card .plan-price {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(52px, 6vw, 70px);
  color: var(--navy); line-height: 1; letter-spacing: -.02em; display: block;
}
.plan-card .plan-unit { display: block; color: var(--muted-deep); font-size: 16.5px; margin-top: 10px; }
.plan-card .btn { width: 100%; margin-top: 22px; }
.plan-card .plan-terms { font-size: 14.5px; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }


/* ==========================================================================
   17. Google rating badge
   ========================================================================== */

.hero-badge { display: block; margin: 0 0 12px; line-height: 0; }
.hero-badge img { width: 168px; height: auto; display: block; }

@media (max-width: 899px) {
  .hero-badge img { width: 146px; }
}

/* ==========================================================================
   18. Service matrix
   ========================================================================== */

.matrix-head { display: grid; gap: 18px 44px; align-items: end; margin-bottom: 34px; }
@media (min-width: 900px) { .matrix-head { grid-template-columns: 1.15fr 1fr; } }
.matrix-head h2 { margin-bottom: 0; }
.matrix-head p { color: var(--on-navy-body); margin: 0; font-size: 1.05em; }

.svc-matrix {
  display: grid; gap: 1px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-card);
  overflow: hidden;
  grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .svc-matrix { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .svc-matrix { grid-template-columns: repeat(4, 1fr); } }

.svc-cell {
  background: var(--navy);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column;
  text-decoration: none;
  transition: background-color .16s ease-out;
}
.svc-cell:hover { background: var(--navy-tint); }

.svc-cell h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 16px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--white);
  margin: 0 0 11px;
}
.svc-cell p {
  color: var(--on-navy-muted); font-size: 15.5px; line-height: 1.55;
  margin: 0 0 20px; flex: 1 1 auto;
}
.svc-cell .go {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--orange);
  display: inline-flex; align-items: center; gap: 7px;
}
.svc-cell:hover .go { color: var(--white); }
.svc-cell .go::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }


/* ==========================================================================
   19. Final request section
   ========================================================================== */

.form-split { display: grid; gap: 40px; align-items: start; }
@media (min-width: 940px) { .form-split { grid-template-columns: 1fr 1.05fr; gap: 56px; } }

.form-copy h2 { margin-bottom: 16px; }
.form-copy .lede { max-width: 30em; }

.mini-steps { list-style: none; margin: 28px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border); }
.mini-steps li { margin: 0 0 18px; display: flex; gap: 16px; align-items: baseline; font-size: 16.5px; color: var(--muted-deep); line-height: 1.55; }
.mini-steps li:last-child { margin-bottom: 0; }
.mini-steps .n { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 500; font-size: 14px; color: var(--orange-text); letter-spacing: .04em; }
.mini-steps strong { color: var(--navy); font-weight: 700; }

.form-aside { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 16px; color: var(--muted-deep); }
.form-panel { padding: 30px; }
@media (max-width: 560px) { .form-panel { padding: 22px; } }


/* ==========================================================================
   20. Interior page template
   ========================================================================== */

.page-answer { max-width: 44em; font-size: 1.12em; color: var(--muted-deep); }

.entry-content { padding-block: 8px 52px; }
.entry-content h2 { margin-top: 1.7em; }
.entry-content h3 { margin-top: 1.4em; font-size: 19px; }
.entry-content ul, .entry-content ol { padding-left: 1.15em; }
.entry-content li { margin-bottom: .5em; }
.entry-content .commitment { max-width: var(--read); }


/* ==========================================================================
   21. Interior trust row
   ========================================================================== */

.trust-row {
  list-style: none; margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--border);
  display: grid; gap: 12px 30px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  max-width: 900px;
}
.trust-row li { margin: 0; font-size: 15px; color: var(--muted-deep); line-height: 1.45; }
.trust-row strong {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 15px; color: var(--navy);
}
.inline-request { margin-top: 8px; }








/* ==========================================================================
   22. Interior pages: split hero, two column body, sticky aside
   ========================================================================== */

.page-hero { background: var(--white); }
.page-hero__grid { display: grid; }
.page-hero__text .breadcrumbs { padding: 0 0 10px; }
.page-hero__text .breadcrumbs ol { padding: 0; }
.page-hero__text { padding-block: 30px 34px; }
.page-hero__text h1 { max-width: 17em; margin-bottom: 16px; }
.page-hero__text .eyebrow { margin-bottom: 12px; }
.page-answer { font-size: 1.12em; color: var(--muted-deep); max-width: 36em; }
.page-hero__actions { margin: 24px 0 12px; }

.page-hero__media { line-height: 0; background: var(--pale); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 899px) {
  .page-hero__media { margin-inline: calc(-1 * var(--gutter)); aspect-ratio: 16 / 9; order: -1; }
  .page-hero__text { padding-top: 20px; }
}

@media (min-width: 900px) {
  /* Copy stays on the page grid, the photo runs off the right edge of the screen. */
  .page-hero--split .page-hero__grid { grid-template-columns: 1.1fr 1fr; min-height: 420px; gap: 0; }
  .page-hero--split .page-hero__text { align-self: center; padding-block: 48px; padding-right: 44px; }
  .page-hero--split .page-hero__media {
    margin-right: calc(-1 * ((100vw - min(100vw, var(--wrap) + 2 * var(--gutter))) / 2 + var(--gutter)));
    min-height: 100%;
  }
}

/* Body and sticky sidebar */
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 38px 56px; }
.page-layout > * { min-width: 0; }
.page-body > * { max-width: var(--read); }

@media (min-width: 1040px) {
  .page-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
  .page-aside { position: sticky; top: 96px; display: grid; gap: 20px; }
}

/* On this page */
.page-toc { border-left: 3px solid var(--border); padding: 4px 0 4px 16px; }
.page-toc .toc-label {
  display: block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-deep); margin-bottom: 10px;
}
.page-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.page-toc li { margin: 0; }
.page-toc a { display: block; padding: 5px 0; font-size: 15.5px; line-height: 1.35; color: var(--body); text-decoration: none; }
.page-toc a:hover { color: var(--navy); }
@media (max-width: 1039px) { .page-toc { display: none; } }

/* Sidebar CTA card */
.aside-card {
  background: var(--navy); color: var(--on-navy-body);
  padding: 24px; border-top: 3px solid var(--orange);
  border-radius: 0 0 var(--r-card) var(--r-card);
  display: grid; gap: 12px;
}
.aside-card__title {
  font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.15;
  color: var(--white); margin: 0;
}
.aside-card__body { margin: 0; font-size: 15.5px; color: var(--on-navy-body); }
.aside-card__phone {
  display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 25px;
  color: var(--white); text-decoration: none; letter-spacing: -.01em;
}
.aside-card__phone:hover { color: var(--orange); }
.aside-card .btn { width: 100%; }
.aside-card .btn-secondary { background: var(--white); color: var(--navy); border-color: var(--border-mid); }
.aside-card .btn-secondary:hover { background: var(--blue-hover); color: var(--navy); border-color: var(--blue-hover); }
.aside-card__note {
  margin: 0; padding-top: 12px; border-top: 1px solid var(--navy-tint);
  font-size: 14px; color: var(--on-navy-muted);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.page-body h2 { scroll-margin-top: 96px; }

.mid-cta {
  max-width: var(--read); margin: 36px 0; padding: 26px;
  background: var(--navy); color: var(--on-navy-body); border-radius: var(--r-panel);
  display: grid; gap: 18px;
}
/* Single column on purpose. The card is capped at var(--read), 828px, and the two
   buttons need 480px of that side by side, which left the heading about 268px and
   wrapping every two words. Stacked, the copy gets the full 776px and the buttons
   still sit in one row beneath with room to spare. */
.mid-cta-actions { justify-content: flex-start; }
.mid-cta h2 { color: var(--white); font-size: 21px; margin: 0 0 8px; scroll-margin-top: 0; }
.mid-cta p { margin: 0; font-size: 16px; color: var(--on-navy-body); }
.mid-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mid-cta .btn-secondary { background: var(--white); color: var(--navy); border-color: var(--border-mid); }
.mid-cta .btn-secondary:hover { background: var(--blue-hover); color: var(--navy); border-color: var(--blue-hover); }

.review-note {
  max-width: var(--read); margin-top: 38px; padding-top: 18px;
  border-top: 1px solid var(--border); font-size: 14.5px; color: var(--muted);
}



/* ==========================================================================
   23. Homepage, built to the supplied design
   ========================================================================== */

.d-sect { padding: var(--sect-y) var(--gutter); }
.d-sect--pale { background: var(--pale); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.d-sect > .wrap { padding-left: 0; padding-right: 0; }
.d-sect__head { max-width: var(--wrap); margin: 0 auto 44px; }
.d-sect__head h2 { margin: 0 0 12px; }
.d-sub { margin: 0; font-size: 18px; color: var(--muted-deep); }
.d-sub--wide { max-width: 62em; margin-bottom: 32px; }
.d-actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.d-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 44px; align-items: center; }
.d-framed { position: relative; border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/3; width: 100%; }
.d-framed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* hero */
.d-hero { background: var(--navy); padding: clamp(32px, 5vw, 56px) var(--gutter) 0; }
.d-hero__grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 44px; align-items: center; }
.d-hero__badge { display: block; margin-bottom: 18px; line-height: 0; }
.d-hero__badge img { height: 44px; width: auto; display: block; }
.d-hero__eyebrow { color: var(--orange); margin-bottom: 16px; }
.d-hero h1 { color: var(--white); margin: 0 0 8px; }
.d-hero h1 .accent { color: var(--blue-light); }
.d-hero__tag { font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2vw, 23px); color: var(--white); margin: 0 0 18px; }
.d-hero__lede { font-size: 18px; line-height: 1.6; color: var(--on-navy-body); margin: 0 0 28px; max-width: 36em; }
.d-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.d-btn-call { display: flex; flex-direction: column; font-family: var(--font-display); background: var(--orange); color: var(--navy); padding: 13px 26px; border-radius: var(--r-btn); line-height: 1.3; text-decoration: none; }
.d-btn-call:hover { background: var(--orange-hover); color: var(--navy); text-decoration: none; }
.d-btn-call .n { font-weight: 800; font-size: 18px; }
.d-btn-call .s { font-weight: 600; font-size: 14px; }
.d-btn-ghost { background: transparent; color: var(--white); border: 2px solid var(--blue-light); font-size: 17px; }
.d-btn-ghost:hover { background: #0D3B63; color: var(--white); border-color: var(--blue-light); }
.d-hero__media { position: relative; border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--navy-tint); aspect-ratio: 4/5; max-height: 660px; margin: 0 auto; width: 100%; max-width: 560px; }
.d-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

.d-hero__facts { max-width: var(--wrap); margin: 48px auto 0; padding: 26px 0 34px; border-top: 1px solid var(--navy-tint); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.d-fact { display: flex; gap: 18px; align-items: center; }
.d-fact img { flex: 0 0 auto; width: clamp(54px, 9vw, 76px); height: clamp(54px, 9vw, 76px); object-fit: contain; }
.d-fact .t { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2vw, 22px); color: var(--white); }
.d-fact .b { display: block; font-size: 17px; line-height: 1.45; color: var(--on-navy-muted); }

/* fee waiver band */
.d-waiver { background: var(--pale-blue); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: stretch; }
.d-waiver__media { height: 100%; max-height: 480px; min-height: 340px; overflow: hidden; }
.d-waiver__media img { display: block; width: 100%; height: 100%; min-height: 340px; max-height: 480px; object-fit: cover; object-position: 50% 12%; }
.d-waiver__copy { padding: 44px clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.d-waiver__copy h2 { margin: 0 0 20px; }
.d-waiver__copy h2 .accent { color: var(--blue); }
.d-waiver__copy p { margin: 0 0 14px; max-width: 34em; font-size: 20px; line-height: 1.55; }
.d-waiver__copy p:last-child { margin-bottom: 0; }
.d-waiver__copy strong { color: var(--navy); }

/* how it works */
.d-head-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 34px; }
.d-head-row h2 { margin: 0 0 6px; }
.d-head-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.d-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.d-step { position: relative; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); padding: 34px 24px 26px; box-shadow: var(--shadow-card); }
.d-step .pill { position: absolute; top: -13px; left: 24px; background: var(--orange); color: var(--navy); font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .06em; padding: 5px 14px; border-radius: var(--r-pill); text-transform: uppercase; }
.d-step h3 { font-size: 20px; margin: 0 0 10px; }
.d-step p { margin: 0; font-size: 17.5px; }

/* callout */
.d-callout-wrap { padding: 0 var(--gutter) var(--sect-y); }
.d-callout-wrap > .wrap { padding-left: 0; padding-right: 0; }
.d-callout { max-width: var(--wrap); margin: 0 auto; background: var(--orange); border-radius: 18px; padding: 16px; }
.d-callout__inner { border: 2px dashed var(--navy); border-radius: 8px; padding: 34px clamp(18px, 3vw, 38px); display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; justify-content: space-between; }
.d-callout__copy { flex: 1 1 380px; min-width: 0; }
.d-callout__copy h2 { font-size: clamp(23px, 2.3vw, 33px); margin: 0 0 12px; }
.d-callout__copy p { margin: 0; font-size: 18px; line-height: 1.55; color: #3A2A10; max-width: 46em; }
.d-callout__action { flex: 0 1 auto; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.d-callout__btn { font-family: var(--font-display); font-weight: 800; font-size: 19px; background: var(--navy); color: var(--white); padding: 18px 32px; border-radius: var(--r-btn); text-decoration: none; }
.d-callout__btn:hover { background: var(--navy-deep); color: var(--white); text-decoration: none; }
.d-callout__note { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--navy); }

/* how we work split */
.d-split { background: var(--pale); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); align-items: stretch; }
.d-split__copy { max-width: 58em; padding: var(--sect-y) var(--gutter); justify-self: end; width: 100%; }
.d-split__copy h2 { margin: 0 0 26px; }
.d-split__media { position: relative; overflow: hidden; width: 100%; min-height: 420px; }
.d-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.d-minicards { display: flex; flex-direction: column; gap: 14px; }
.d-minicard { background: var(--white); border: 1px solid var(--border); border-radius: 11px; padding: 20px 22px; }
.d-minicard h3 { font-size: 18.5px; margin: 0 0 6px; }
.d-minicard p { margin: 0; font-size: 17.5px; }

/* services */
.d-svc-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }
@media (min-width: 620px)  { .d-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A row of four at desktop. auto-fit with a 300px floor needed 1260px and only had
   1120px, so it silently collapsed to two. Fixed count, explicit breakpoint. */
@media (min-width: 1000px) { .d-svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.d-svc { min-width: 0; }
.d-svc h3 { overflow-wrap: break-word; }
.d-svc { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-card); }
.d-svc__num { font-family: var(--font-mono); font-size: 14px; letter-spacing: .12em; color: var(--navy); display: block; margin-bottom: 10px; }
.d-svc h3 { font-size: 20px; margin: 0 0 8px; }
.d-svc > div > p { margin: 0; font-size: 17px; color: var(--muted-deep); }
.d-svc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.d-svc li { margin: 0; }
.d-svc li a { display: block; padding: 10px 0; font-size: 17px; color: var(--link-ink); border-top: 1px solid var(--border-soft); text-decoration: none; }
.d-svc li a:hover { color: var(--blue); }
.d-svc__more { margin-top: auto; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--blue); text-decoration: none; }
.d-svc__more:hover { color: var(--navy); }

/* repair or replace */
.d-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.d-compare__card { border: 1px solid var(--border); border-radius: var(--r-panel); padding: 28px; background: var(--white); }
.d-compare__card--alt { background: var(--pale); }
.d-compare__card h3 { font-size: 20px; margin: 0 0 14px; }
.d-compare__card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 17.5px; }

/* maintenance plan */
.d-plan { background: var(--navy); color: var(--on-navy-body); padding: clamp(48px, 7vw, 80px) var(--gutter); }
.d-plan .wrap { padding-left: 0; padding-right: 0; gap: 48px; }
.d-plan h2 { color: var(--white); margin: 0 0 18px; line-height: 1.1; }
.d-plan__lede { margin: 0; font-size: 18px; color: var(--on-navy-body); max-width: 40em; }
.d-plan__card { background: var(--white); color: var(--body); border-radius: var(--r-panel); padding: 32px; }
.d-plan__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; }
.d-plan__price .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(38px, 5vw, 50px); color: var(--navy); line-height: 1; }
.d-plan__price .u { font-size: 17px; color: var(--muted-deep); }
.d-plan__card ul { margin: 0 0 26px; padding: 22px 0 0; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 18px; border-top: 1px solid var(--border); }
.d-plan__card li { display: flex; gap: 12px; margin: 0; }
.d-plan__card .dash { color: var(--orange); font-weight: 700; }
.d-btn-orange { background: var(--orange); color: var(--navy); border-color: var(--orange); }
.d-btn-orange:hover { background: var(--orange-hover); color: var(--navy); border-color: var(--orange-hover); }

/* areas */
.d-two--areas { align-items: start; }
.d-more { margin-top: 18px; }

/* request */
.d-request { background: var(--navy); color: var(--on-navy-body); padding: var(--sect-y) var(--gutter); }
.d-request .wrap { padding-left: 0; padding-right: 0; align-items: start; }
.d-request h2 { color: var(--white); margin: 0 0 16px; }
.d-request .eyebrow { color: var(--orange); }
.d-request__lede { font-size: 18px; color: var(--on-navy-body); max-width: 36em; }
.d-request__phone { font-size: 19px; color: var(--white); }
.d-request__phone a { color: var(--white); font-family: var(--font-display); font-weight: 800; border-bottom: 2px solid var(--orange); text-decoration: none; }
.d-request__note { font-size: 17px; color: var(--on-navy-muted); }
.d-request__card { background: var(--white); border-radius: var(--r-panel); padding: 32px; }
@media (max-width: 560px) { .d-request__card { padding: 22px; } }

/* ==========================================================================
   24. Mobile. The homepage was built with fluid grids, which collapse correctly
   but keep desktop padding and type. These are the deliberate phone rules.
   ========================================================================== */

@media (max-width: 899px) {
  /* Hero: portrait 4/5 art is far too tall on a phone. */
  .d-hero { padding-top: 26px; }
  .d-hero__grid { gap: 28px; }
  .d-hero__media { aspect-ratio: 4 / 3; max-height: 380px; max-width: none; }
  .d-hero__media img { object-position: 50% 22%; }
  .d-hero__lede { font-size: 17px; margin-bottom: 22px; }
  .d-hero__actions { gap: 10px; }
  .d-btn-call, .d-btn-ghost { width: 100%; text-align: center; align-items: center; }
  .d-hero__facts { margin-top: 30px; padding: 22px 0 26px; gap: 18px; }
  .d-fact { gap: 14px; }
  .d-fact img { width: 52px; height: 52px; }
  .d-fact .t { font-size: 18px; }
  .d-fact .b { font-size: 16px; }

  /* Fee waiver band */
  .d-waiver__media { min-height: 220px; max-height: 260px; }
  .d-waiver__media img { min-height: 220px; max-height: 260px; }
  .d-waiver__copy { padding: 30px var(--gutter); }
  .d-waiver__copy p { font-size: 17.5px; }

  /* How it works */
  .d-head-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .d-head-actions { width: 100%; }
  .d-head-actions .btn { flex: 1 1 auto; }
  .d-step { padding: 30px 20px 22px; }

  /* Callout */
  .d-callout { padding: 10px; border-radius: 14px; }
  .d-callout__inner { padding: 24px 18px; gap: 20px; }
  .d-callout__copy p { font-size: 17px; }
  .d-callout__action { width: 100%; }
  .d-callout__btn { font-size: 18px; padding: 16px 20px; }
  .d-callout__note { font-size: 15px; }

  /* How we work split */
  .d-split__copy { padding: 34px var(--gutter); max-width: none; justify-self: stretch; }
  .d-split__media { min-height: 240px; order: -1; }
  .d-minicard { padding: 18px; }

  /* Services and comparison */
  .d-svc { padding: 22px; }
  .d-compare__card { padding: 22px; }

  /* Plan */
  .d-plan .wrap { gap: 28px; }
  .d-plan__card { padding: 24px; }
  .d-plan__card .btn { width: 100%; }

  /* Request */
  .d-request__card { padding: 22px; }
  .d-sect__head { margin-bottom: 30px; }
}

@media (max-width: 560px) {
  .d-hero__media { aspect-ratio: 3 / 2; max-height: 300px; }
  .d-hero__badge img { height: 38px; }
  .d-waiver__copy p { font-size: 17px; }
  .d-callout__inner { padding: 20px 14px; }
  .d-plan__price .n { font-size: 36px; }
  .d-svc li a { padding: 12px 0; }
}

/* Header on a phone. The sticky bottom bar already carries Call and Request, so the
   header actions are redundant there and only made the bar wrap onto three rows. */
@media (max-width: 780px) {
  .site-header { padding: 10px var(--gutter); }
  .site-header__inner { gap: 10px 14px; }
  .header-actions { display: none; }
  .utility { font-size: 13px; padding: 7px 0; }
  .utility-inner { gap: 2px 14px; padding: 0 var(--gutter); }
}

/* Between phone and desktop the actions stay, but need to fit. */
@media (min-width: 781px) and (max-width: 1200px) {
  .header-actions { flex-basis: auto; }
  .header-phone .hp-num { font-size: 17px; }
  .btn-sm { font-size: 16px; padding: 11px 16px; }
}