/**
 * GenerX homepage — section styles ported 1:1 from the approved playbook output
 * (cp-website-playbook/demos/generx/output/homepage.html).
 *
 * The approved page's brand custom-properties are re-mapped here to theme.json
 * tokens, so switching the brand style variation (GenerX / Grästen) recolors the
 * homepage too. Support shades the palette doesn't carry stay as literals — this
 * is exactly the "what theme.json can't express" layer.
 *
 * Body sections are scoped under .cp-home (front-page main / seeded Home page).
 * Header + footer use their own roots (.site-header / .footer) and are global.
 */

:root {
  --cardinal:        var(--wp--preset--color--primary);
  --cardinal-40:     rgba(204, 26, 47, 0.4);
  --zest:            #E3702C;
  --hot-cinnamon:    #E05C1A;
  --schedule-grad-1: #C93A31;
  --schedule-grad-2: #E7923D;
  --buttercup:       #FBBC05;
  --white:           var(--wp--preset--color--white);
  --spring-wood:     #FFF9F0;
  --athens-gray:     var(--wp--preset--color--on-surface);
  --cararra:         #E5E3DF;
  --desert-storm:    #F4F4F4;
  --mystic:          #E1E8ED;
  --geyser:          #CBD5E1;
  --boulder:         var(--wp--preset--color--contrast-2);
  --tundora:         #444444;
  --cod-gray:        #1C1C1C;
  --fuscous-gray:    #494947;
  --mine-shaft:      var(--wp--preset--color--text);
  --cloud-burst:     #1E2C44;
  --firefly:         #0D1B2A;
  --slate-text:      #64748B;
  --tara:            #D8F3DC;
  --form-text:       #4A4A4A;
  --listbox-bd:      #D7D7D7;
  --bd-form:         2px;
  --scrim-mine-shaft-70: rgba(37, 37, 37, 0.7);
  --font-display:    var(--wp--preset--font-family--barlow-condensed);
  --font-body:       var(--wp--preset--font-family--roboto);
  --font-form:       'Helvetica Neue', Helvetica, Arial, sans-serif;
  --content-max:     1100px;
  --section-px:      clamp(24px, 5vw, 80px);
  --section-py:      80px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-form: 12px;
}

/* The composed homepage removes default block spacing between full-bleed sections. */
.cp-home { --wp--style--block-gap: 0; }
.cp-home > .wp-block-group,
.cp-home > section { margin-block: 0; }
.cp-home img, .cp-home svg { display: block; max-width: 100%; }
.cp-home a { text-decoration: none; color: inherit; }
.cp-home h1, .cp-home h2, .cp-home h3, .cp-home h4 {
  font-family: var(--font-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.005em; margin: 0;
}
.cp-home p, .cp-home ol, .cp-home ul { margin: 0; }
.cp-home ol, .cp-home ul { padding: 0; list-style: none; }

.cp-home .container { max-width: var(--content-max); margin: 0 auto; }
.cp-home .section  { padding: var(--section-py) var(--section-px); }
.cp-home .eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 11px; line-height: 24px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--mine-shaft);
}
.cp-home .eyebrow--red { color: var(--cardinal); font-weight: 700; }

.cp-home .head { max-width: var(--content-max); margin: 0 auto; }
.cp-home .head h2 { font-weight: 800; font-size: 44px; line-height: 48.4px; color: var(--mine-shaft); margin-top: 11px; }
.cp-home .head h2 em { font-style: normal; color: var(--cardinal); }
.cp-home .head__lead { font-family: var(--font-body); font-size: 17px; line-height: 27.2px; color: var(--mine-shaft); margin-top: 12px; max-width: 760px; }

.cp-home .btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 13px 22px; border: 0; border-radius: var(--r-sm); text-decoration: none; gap: 8px; white-space: nowrap;
}
.cp-home .btn--primary  { background: var(--cardinal); color: var(--white); }
.cp-home .btn--primary:hover { filter: brightness(0.92); }

/* ---------- HERO ---------- */
.cp-home .hero {
  position: relative; color: var(--white); overflow: hidden; isolation: isolate;
  min-height: 620px; display: flex; align-items: center; padding: 80px var(--section-px);
}
.cp-home .hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: url('../images/hero-banner.jpg') center / cover no-repeat, var(--firefly);
}
.cp-home .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--scrim-mine-shaft-70); }
.cp-home .hero__grid {
  max-width: var(--content-max); margin: 0 auto; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.9fr); gap: 48px; align-items: center;
}
.cp-home .hero__copy { max-width: 601px; }
.cp-home .hero__eyebrow {
  font-family: var(--font-body); font-weight: 700; font-size: 11px; line-height: 24px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--white); margin-bottom: 18px;
}
.cp-home .hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 5.5vw, 60px); line-height: 1.02; margin-bottom: 22px; }
/* Hero H1 accent stays white. Cardinal over the hero scrim tops out around 3.1:1,
   and no scrim is dark enough to fix it -- #CC1A2F on pure black is only ~3.0:1 --
   so the accent can never clear AA on a dark hero. Red keeps its emphasis job on
   light surfaces. Matches cp-website-playbook@16a3419. */
.cp-home .hero h1 em { font-style: normal; color: var(--white); }
.cp-home .hero__trust { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.cp-home .hero__trust-item { display: flex; align-items: center; gap: 8px; }
.cp-home .hero__trust-item:not(:last-child)::after { content: ''; width: 1px; height: 18px; margin-left: 16px; background: rgba(255,255,255,0.32); }
.cp-home .hero__trust-icon { flex: none; width: 18px; height: 18px; color: var(--cardinal); }
.cp-home .hero__trust-icon svg { width: 100%; height: 100%; display: block; }
.cp-home .hero__trust-text { font-family: var(--font-body); font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--white); white-space: nowrap; }
/* Hero scheduling-portal column (cp-portal block replaces the static estimate card) */
.cp-home .hero__portal { justify-self: end; width: 100%; max-width: 500px; }
.cp-home .hero__portal .cps-portal, .cp-home .hero__portal .acf-block-preview { width: 100%; }

/* ---------- HOW IT WORKS ---------- */
.cp-home .services { background: var(--athens-gray); }
.cp-home .hiw-grid { max-width: var(--content-max); margin: 16px auto 0; display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); gap: 56px; align-items: stretch; }
.cp-home .hiw-media { position: relative; min-height: 380px; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(135deg, var(--firefly), var(--cloud-burst)); display: flex; align-items: center; justify-content: center; }
.cp-home .hiw-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-home .hiw-media__ph { display: block; max-width: 80%; text-align: center; font-family: var(--font-body); font-size: 13px; line-height: 20px; color: rgba(255,255,255,0.82); }
.cp-home .hiw-media__ph strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.4px; text-transform: uppercase; color: #fff; margin-bottom: 6px; }
.cp-home .hiw-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.cp-home .hiw-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding-bottom: 32px; }
.cp-home .hiw-step:last-child { padding-bottom: 0; }
.cp-home .hiw-step:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 54px; bottom: 0; width: 2px; background: var(--cararra); }
.cp-home .hiw-step__num { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--cardinal); color: var(--cardinal); background: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.cp-home .hiw-step__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--firefly); margin: 8px 0 8px; }
.cp-home .hiw-step__body { font-family: var(--font-body); font-size: 15px; line-height: 24px; color: var(--tundora); margin: 0; }

/* ---------- INSTALLATION PROCESS ---------- */
.cp-home .process-apart { background: var(--white); }
.cp-home .pa-row { max-width: var(--content-max); margin: 40px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cp-home .pa-row + .pa-row { margin-top: 48px; }
.cp-home .pa-row--reverse .pa-media { order: -1; }
.cp-home .pa-items { display: flex; flex-direction: column; gap: 26px; }
.cp-home .pa-item { display: flex; gap: 16px; align-items: flex-start; }
.cp-home .pa-item__icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--cardinal); margin-top: 2px; }
.cp-home .pa-item__icon svg { width: 100%; height: 100%; display: block; }
.cp-home .pa-item h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.2; color: var(--mine-shaft); }
.cp-home .pa-item__body { font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--tundora); margin-top: 6px; }
.cp-home .pa-media img { width: 100%; height: 100%; max-height: 440px; object-fit: cover; border-radius: var(--r-md); }
.cp-home .pa-item--placeholder .pa-item__icon { border: 1.5px dashed var(--geyser); border-radius: var(--r-sm); color: var(--boulder); display: flex; align-items: center; justify-content: center; }
.cp-home .pa-item--placeholder h3, .cp-home .pa-item--placeholder .pa-item__body { color: var(--boulder); }
.cp-home .img-placeholder { background: var(--athens-gray); border: 1px dashed var(--geyser); border-radius: var(--r-md); min-height: 340px; display: flex; align-items: center; justify-content: center; color: var(--tundora); font-family: var(--font-body); font-size: 13px; text-align: center; padding: 1rem; }

/* ---------- WHO WE ARE ---------- */
.cp-home .who { background: var(--spring-wood); }
.cp-home .who__grid { max-width: var(--content-max); margin: 24px auto 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.cp-home .who__body p { font-family: var(--font-body); font-size: 16px; line-height: 27.2px; color: var(--mine-shaft); }
.cp-home .who__body p + p { margin-top: 16px; }
.cp-home .who__callout { display: flex; align-items: center; justify-content: center; padding: 8px 0; align-self: center; }
.cp-home .who__callout-img { display: block; width: 100%; max-width: 320px; height: auto; }

/* ---------- WHY DIFFERENT (6 icon cards) ---------- */
.cp-home .different { background: var(--athens-gray); }
.cp-home .why__grid { max-width: var(--content-max); margin: 40px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 48px; }
.cp-home .why-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 14px; }
.cp-home .why-card__icon { width: 64px; height: 64px; color: var(--cardinal); }
.cp-home .why-card__icon svg { width: 100%; height: 100%; display: block; }
.cp-home .why-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.15; color: var(--firefly); }
.cp-home .why-card__body { font-family: var(--font-body); font-size: 15px; line-height: 24px; color: var(--tundora); max-width: 360px; }
.cp-home .why-card__pill { align-self: stretch; margin-top: auto; background: var(--cloud-burst); color: var(--white); padding: 12px 20px; font-family: var(--font-body); font-weight: 600; font-size: 11px; line-height: 20px; letter-spacing: 0.5px; text-transform: uppercase; }

/* ---------- WARRANTY BAND ---------- */
.cp-home .warranty { background: var(--white); border-top: 1px solid var(--cararra); border-bottom: 1px solid var(--cararra); padding: 73px clamp(24px, 8vw, 286px); }
.cp-home .warranty__inner { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: center; }
.cp-home .warranty__badge { width: 220px; height: 202px; display: block; }
.cp-home .warranty__badge img { width: 100%; height: 100%; object-fit: contain; }
.cp-home .warranty__copy h2 { font-family: var(--font-display); font-weight: 800; font-size: 36px; line-height: 37.8px; text-transform: uppercase; color: var(--mine-shaft); margin: 0; }
.cp-home .warranty__copy h2 .red { color: var(--cardinal); display: block; }
.cp-home .warranty__lead { font-family: var(--font-body); font-size: 15px; line-height: 24.75px; color: var(--mine-shaft); margin-top: 13px; }
.cp-home .warranty__list { margin-top: 13px; display: flex; flex-direction: column; gap: 0; }
.cp-home .warranty__item { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--cod-gray); }
.cp-home .warranty__check { width: 18px; height: 18px; flex-shrink: 0; background: var(--cardinal); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 11px; font-weight: 700; line-height: 1; }
.cp-home .warranty__cta { margin-top: 16px; align-self: flex-start; background: var(--cardinal); color: var(--white); font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1; border: 0; border-radius: var(--r-sm); padding: 12px 20px; display: inline-flex; }

/* ---------- SERVICE / MAINTENANCE / REPAIR ---------- */
.cp-home .service-blk { background: var(--spring-wood); }
.cp-home .service-blk__grid { max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: center; }
.cp-home .service-blk__intro h2 { font-weight: 800; font-size: 36px; line-height: 1.1; color: var(--mine-shaft); }
.cp-home .service-blk__intro h2 em { font-style: normal; color: var(--cardinal); }
.cp-home .service-blk__lead { font-family: var(--font-body); font-size: 16px; line-height: 26px; color: var(--tundora); margin-top: 14px; }
.cp-home .service-blk__cta { margin-top: 22px; }
.cp-home .service-blk__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cp-home .svc-card { position: relative; background: var(--white); border: 1px solid var(--cararra); border-radius: var(--r-md); padding: 22px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.cp-home .svc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); border-color: var(--cardinal); }
.cp-home .svc-card__cta { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--cardinal); background: var(--spring-wood); transition: background 0.15s, color 0.15s; }
.cp-home .svc-card__cta svg { width: 12px; height: 12px; display: block; }
.cp-home .svc-card:hover .svc-card__cta { background: var(--cardinal); color: var(--white); }
.cp-home .svc-card__icon { width: 34px; height: 34px; color: var(--cardinal); }
.cp-home .svc-card__icon svg { width: 100%; height: 100%; display: block; }
.cp-home .svc-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.2; color: var(--mine-shaft); }
.cp-home .svc-card__body { font-family: var(--font-body); font-size: 13px; line-height: 21px; color: var(--tundora); }

/* ---------- COVERAGE (state cards) ---------- */
.cp-home .coverage { background: var(--white); }
.cp-home .coverage__find-label { max-width: var(--content-max); margin: 36px auto 0; font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--mine-shaft); }
.cp-home .coverage__grid { max-width: var(--content-max); margin: 16px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cp-home .state-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--cararra); border-radius: var(--r-sm); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.cp-home a.state-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); border-color: var(--cardinal); }
.cp-home .state-card__media { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--cloud-burst), var(--firefly)); overflow: hidden; }
.cp-home .state-card__abbr { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: 1; letter-spacing: 2px; color: rgba(255,255,255,0.14); }
.cp-home .state-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cp-home .state-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cp-home .state-card__name { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.1; text-transform: uppercase; color: var(--mine-shaft); }
.cp-home .state-card__link { margin-top: 4px; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--cardinal); }

/* ---------- REVIEWS ---------- */
.cp-home .reviews { background: var(--spring-wood); }
.cp-home .reviews__placeholder { max-width: var(--content-max); margin: 32px auto 0; background: var(--white); border: 2px dashed var(--geyser); border-radius: var(--r-md); padding: 56px 32px; text-align: center; }
.cp-home .reviews__placeholder-badge { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--cardinal); background: var(--spring-wood); border: 1px solid var(--cararra); border-radius: 999px; padding: 6px 14px; }
.cp-home .reviews__stars { color: var(--cardinal); font-size: 20px; letter-spacing: 3px; margin-top: 16px; }
.cp-home .reviews__placeholder h3 { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--mine-shaft); margin-top: 12px; }
.cp-home .reviews__placeholder p { font-family: var(--font-body); font-size: 14px; line-height: 22px; color: var(--tundora); margin-top: 8px; max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---------- TESTIMONIAL VIDEO ---------- */
.cp-home .testimonial { background: var(--athens-gray); }
.cp-home .testimonial__video { max-width: 860px; margin: 32px auto 0; position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,0.16); background: var(--firefly); }
.cp-home .testimonial__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   HEADER (global — rendered by parts/header.html, outside .cp-home)
   ============================================================ */
/* The approved page these rules were ported from opens with a global
   `*, *::before, *::after { box-sizing: border-box }`. Without it every
   `width: 100%` that also carries padding overflows by that padding — which is
   what pushed the mobile menu's plain links 24px left of the dropdown parents.
   Scoped to the header rather than applied site-wide, so it can't move layout on
   pages that have already been reviewed. */
.site-header, .site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
/* The sticky has to sit on the block template-part wrapper, not on .site-header.
   A sticky element only travels inside its parent's box, and .site-header's
   parent — <header class="wp-block-template-part"> — is exactly as tall as the
   header, so sticking the inner element does nothing at all: it scrolls away
   with the wrapper. */
header.wp-block-template-part:has( .site-header ) { position: sticky; top: 0; z-index: 100; }
.site-header {
  /* Both header rows take their inline inset from here, so the topbar numbers
     and the nav's hamburger always share a right edge. */
  --header-px: var(--section-px);
  position: sticky; top: 0; z-index: 100; background: var(--white); box-shadow: 0 1px 0 rgba(0,0,0,0.04); font-family: var(--font-body);
}
.site-header a { text-decoration: none; color: inherit; }
.site-header .topbar { background: var(--cardinal); color: var(--white); font-size: 15px; font-weight: 600; }
.site-header .topbar__inner { --topbar-gap: 36px; display: flex; align-items: center; justify-content: flex-end; gap: var(--topbar-gap); padding: 10px var(--header-px); max-width: 1500px; margin: 0 auto; flex-wrap: wrap; }
.site-header .topbar__item { display: inline-flex; gap: 8px; align-items: baseline; white-space: nowrap; }
.site-header .topbar__label { font-weight: 700; }
/* cp-portal's stylesheet gives .cps-phone-number a #333 colour, a blue hover and
   flex centring, and .number its own size/weight — meant for the plugin's own
   phone block, not for header/footer chrome. The class has to stay: the plugin's
   script keys off it to rewrite the tracked number (and its tel: href) for a
   source id persisted in localStorage, which the server never sees. So keep the
   hook and take back the presentation. */
.site-header .cps-phone-number,
.footer .cps-phone-number { display: inline; color: inherit; justify-content: inherit; }
.site-header .cps-phone-number:hover,
.footer .cps-phone-number:hover { color: inherit; }
.site-header .cps-phone-number .number,
.footer .cps-phone-number .number { font-size: inherit; font-weight: inherit; }
.site-header .topbar__sep { margin: 0 2px; }
/* A white hairline divides the Sales and Service groups. The pipe that used to
   sit between a label and its number went when the handset icons arrived, which
   left the two groups separated by whitespace alone. */
.site-header .topbar__item:not(:last-child)::after {
  content: ''; width: 1px; align-self: stretch; min-height: 14px;
  margin-left: calc(var(--topbar-gap, 36px) / 2 - 1px);
  background: rgba(255, 255, 255, 0.45);
}
/* The handset glyph between a phone's label and its number. Sized in em so
   it tracks the topbar's clamped font-size down to the small breakpoints,
   and nudged onto the text baseline -- the row aligns on baseline, which an
   svg does not sit on by default. */
.site-header .topbar__icon { width: 1em; height: 1em; flex: none; align-self: center; position: relative; top: 1px; margin-right: -2px; }
.site-header .nav__inner { display: flex; align-items: center; padding: 14px var(--header-px); max-width: 1500px; margin: 0 auto; gap: 24px; }
.site-header .nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-header .nav__logo img { display: block; height: 76px; width: auto; }
/* Fluid gap so the row keeps fitting as the viewport narrows — it is what sets
   the width at which the desktop nav has to give way to the overlay. */
.site-header .nav__links { display: flex; gap: clamp(14px, 1.6vw, 24px); margin-left: clamp(14px, 1.7vw, 36px); font-weight: 600; font-size: 16px; color: var(--mine-shaft); align-items: center; }
.site-header .nav__links > a { padding: 8px 0; white-space: nowrap; }
.site-header .nav__links > a:hover { color: var(--cardinal); }
.site-header .nav__cta { margin-left: auto; display: inline-flex; align-items: center; background: var(--cardinal); color: var(--white); font-weight: 600; font-size: 15px; line-height: 1; padding: 12px 22px; border: 0; border-radius: var(--r-sm); white-space: nowrap; cursor: pointer; }
.site-header .nav__cta:hover { filter: brightness(0.92); color: var(--white); }
.site-header .nav__hamburger { display: none; width: 40px; height: 40px; margin-left: 12px; background: transparent; border: 0; padding: 8px; flex-direction: column; justify-content: space-between; cursor: pointer; }
.site-header .nav__hamburger span { display: block; height: 3px; width: 100%; background: var(--mine-shaft); border-radius: 1px; }
.site-header .nav__mhead, .site-header .nav__mfoot { display: none; }
/* Set by assets/js/nav.js while the mobile overlay is open, so the page behind
   it cannot scroll away under the fixed panel. */
html.cp-nav-open, body.cp-nav-open { overflow: hidden; }
.site-header .nav__item { position: relative; display: inline-flex; align-items: center; }
.site-header .nav__row { display: inline-flex; align-items: center; gap: 2px; }
.site-header .nav__row > a { display: inline-flex; align-items: center; padding: 8px 0; white-space: nowrap; }
.site-header .nav__row > a:hover { color: var(--cardinal); }
.site-header .nav__toggle { display: inline-flex; align-items: center; justify-content: center; padding: 8px 4px; background: transparent; border: 0; color: inherit; cursor: pointer; }
.site-header .nav__caret { width: 10px; height: 6px; flex-shrink: 0; transition: transform 0.15s; }
.site-header .nav__sub { position: absolute; top: 100%; left: 0; min-width: 210px; background: var(--white); border: 1px solid var(--cararra); border-radius: var(--r-sm); box-shadow: 0 12px 28px rgba(0,0,0,0.12); padding: 8px 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; z-index: 120; }
/* Hover for pointers; .is-expanded for the toggle button (touch + keyboard). No
   :focus-within here — it would open the submenu without the button's
   aria-expanded ever saying so. */
.site-header .nav__item:hover > .nav__sub,
.site-header .nav__item.is-expanded > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.site-header .nav__item:hover .nav__caret,
.site-header .nav__item.is-expanded .nav__caret { transform: rotate(180deg); }
.site-header .nav__sub a { padding: 10px 18px; font-weight: 600; font-size: 15px; white-space: nowrap; color: var(--mine-shaft); }
.site-header .nav__sub a:hover { background: var(--spring-wood); color: var(--cardinal); }

/* ============================================================
   FOOTER (global — rendered by parts/footer.html)
   ============================================================ */
.footer { background: var(--white); color: var(--mine-shaft); border-top: 1px solid #e5e5e5; font-family: var(--font-body); }
.footer a { text-decoration: none; color: inherit; }
.footer__main { max-width: 1500px; margin: 0 auto; padding: 64px var(--section-px) 56px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: start; }
.footer__brand { display: inline-block; }
.footer__brand img { display: block; height: 88px; width: auto; margin-bottom: 20px; }
.footer__endorse { display: block; margin-bottom: 22px; font-weight: 700; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cardinal); }
.footer__phones { display: flex; flex-direction: column; gap: 14px; font-size: 18px; color: var(--mine-shaft); }
.footer__phone-label { font-weight: 700; }
.footer__phone-sep { color: var(--tundora); margin: 0 8px; }
/* Prefixed with .footer so these beat `.footer a { color: inherit }` above — a
   bare .footer__cta is (0,1,0) and loses to that rule's (0,1,1), which is what
   left the button with the footer's dark body text on the red fill (2.7:1).
   Any future button in this chrome needs the same prefix. */
.footer .footer__cta { margin-top: 24px; display: inline-flex; align-items: center; justify-content: center; background: var(--cardinal); color: var(--white); font-weight: 600; font-size: 15px; line-height: 1; padding: 13px 22px; border: 0; border-radius: var(--r-sm); }
.footer .footer__cta:hover { filter: brightness(0.92); color: var(--white); }
.footer__col h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--mine-shaft); margin: 0 0 32px; }
.footer__col ul { display: flex; flex-direction: column; gap: 24px; list-style: none; padding: 0; margin: 0; }
.footer__col a { font-size: 16px; color: var(--mine-shaft); }
.footer__col a:hover { color: var(--cardinal); }
.footer__bottom { background: var(--cardinal); color: var(--white); }
.footer__bottom-inner { max-width: 1500px; margin: 0 auto; padding: 14px var(--section-px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer__socials { display: inline-flex; gap: 10px; align-items: center; }
/* Social chips.

   All three tiles are the same 24px box, and box-sizing keeps them that way —
   without it the padding on the Facebook chip added to its width and rendered a
   38px tile next to two 28px ones.

   The inset is per-network on purpose. Each brand mark covers a different share
   of its 24-unit viewBox — Instagram's ink fills it edge to edge, LinkedIn's
   fills about five-sixths, Facebook's "f" is narrow and tall — so one shared
   size renders three visibly different icons. Insetting each to a common ink
   height of ~13px is what actually makes them look like a set. */
.footer__social {
  width: 24px; height: 24px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; padding: var(--social-inset, 0);
}
.footer__social svg { width: 100%; height: 100%; display: block; fill: var(--white); }
.footer__social--instagram { --social-inset: 5.5px; }
.footer__social--linkedin { --social-inset: 3px; }
.footer__social--youtube { --social-inset: 3px; }
.footer__social--x { --social-inset: 4px; }
.footer__social--facebook { --social-inset: 3.2px; background: var(--white); }
.footer__social--facebook svg { fill: var(--cardinal); }
.footer__legal { margin-left: auto; display: inline-flex; gap: 24px; font-size: 14px; color: var(--white); }
.footer__legal a { color: var(--white); }
.footer__legal a:hover { text-decoration: underline; }

/* ============================================================
   RESPONSIVE (mirrors the approved breakpoints)
   ============================================================ */
@media (max-width: 1100px) {
  .cp-home .why__grid { grid-template-columns: 1fr 1fr; }
  .cp-home .coverage__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 980px) {
  .cp-home .hero { min-height: 0; padding-top: 48px; padding-bottom: 48px; }
  .cp-home .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .cp-home .hero__copy { order: 2; max-width: none; }
  .cp-home .hero__portal { order: 1; max-width: none; justify-self: stretch; }
}
@media (max-width: 900px) {
  .cp-home .hiw-grid { grid-template-columns: 1fr; gap: 32px; }
  .cp-home .hiw-media { min-height: 240px; }
  .cp-home .pa-row, .cp-home .pa-row--reverse { grid-template-columns: 1fr; gap: 28px; }
  .cp-home .pa-row--reverse .pa-media { order: 0; }
  .cp-home .pa-row:not(.pa-row--reverse) .pa-media { order: -1; }
  .cp-home .img-placeholder { min-height: 220px; }
  .cp-home .who__grid { grid-template-columns: 1fr; gap: 32px; }
  .cp-home .why__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .cp-home .warranty__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cp-home .service-blk__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__main { grid-template-columns: 1fr; gap: 48px; justify-items: center; text-align: center; }
  .footer__phones { align-items: center; }
  .footer__bottom-inner { flex-direction: column; align-items: center; gap: 12px; }
  .footer__legal { margin-left: 0; flex-wrap: wrap; gap: 16px; justify-content: center; }
}
/* Header — mobile overlay menu.
   Switches at 1280px, not the 980px the rest of the page uses. The desktop nav
   row — logo, six items, Schedule Now — plus the container's 5vw inset only fits
   from 1280px up (measured, with the fluid gap above). Below that the CTA
   overran the inset and stopped lining up with the topbar numbers. Keep this in
   step with the matchMedia query in assets/js/nav.js. */
@media (max-width: 1279px) {
  /* Both numbers stay on one centred row. The items are nowrap, so the row is
     kept inside the viewport by scaling the type, gap and inset together rather
     than by letting it wrap to two lines: at 320px that lands ~261px of text in
     ~290px of space, and it only gets roomier from there. */
  .site-header .topbar { font-size: clamp(11px, 3.1vw, 15px); }
  .site-header .topbar__inner {
    flex-wrap: nowrap; justify-content: flex-end;
    --topbar-gap: clamp(10px, 4.5vw, 36px); gap: var(--topbar-gap);
  }
  .site-header .nav__inner { gap: 12px; }
  .site-header .nav__logo img { height: 56px; }
  .site-header .nav__links { display: none; }
  .site-header .nav__links.is-open {
    display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0;
    position: fixed; inset: 0; background: var(--white); z-index: 200; overflow-y: auto;
    /* The desktop rule centres the row on the cross axis; as a column that would
       shrink-wrap every child and centre it, which is what left the panel's
       header/footer strips floating and their rules stopping short. */
    align-items: stretch;
  }
  .site-header .nav__links.is-open .nav__mhead { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--section-px); border-bottom: 1px solid var(--cararra); }
  .site-header .nav__links.is-open .nav__mhead-logo img { height: 52px; width: auto; }
  .site-header .nav__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; font-size: 34px; line-height: 1; color: var(--mine-shaft); cursor: pointer; }
  /* One row = one tap target: plain links stand alone, dropdown parents pair a
     hub link with a toggle button. Both indent to --section-px so the column
     reads as a single list. */
  .site-header .nav__links.is-open > a { padding: 18px var(--section-px); font-size: 18px; border-bottom: 1px solid var(--cararra); width: 100%; }
  .site-header .nav__links.is-open .nav__item { flex-direction: column; align-items: flex-start; width: 100%; }
  .site-header .nav__links.is-open .nav__row { display: flex; align-items: stretch; width: 100%; gap: 0; border-bottom: 1px solid var(--cararra); }
  .site-header .nav__links.is-open .nav__row > a { flex: 1; padding: 18px 8px 18px var(--section-px); font-size: 18px; }
  /* The approved design's mobile affordance is a +/– glyph, not the desktop
     chevron. It rides the toggle button rather than the label so the section hub
     stays tappable on touch, where there is no hover. */
  .site-header .nav__links.is-open .nav__toggle { flex-shrink: 0; min-width: 56px; padding: 0 var(--section-px) 0 8px; justify-content: flex-end; }
  .site-header .nav__links.is-open .nav__caret { display: none; }
  .site-header .nav__links.is-open .nav__toggle::after { content: '+'; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1; color: var(--cardinal); }
  .site-header .nav__links.is-open .nav__item.is-expanded > .nav__row .nav__toggle::after { content: '–'; }
  .site-header .nav__links.is-open .nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; min-width: 0; display: none; background: var(--spring-wood); width: 100%; }
  .site-header .nav__links.is-open .nav__item.is-expanded > .nav__sub { display: flex; padding: 6px var(--section-px) 14px calc(var(--section-px) + 14px); }
  .site-header .nav__links.is-open .nav__sub a { padding: 13px 0; font-size: 16px; }
  .site-header .nav__mfoot { display: none; }
  .site-header .nav__links.is-open .nav__mfoot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px var(--section-px) 40px; text-align: center; border-top: 1px solid var(--cararra); }
  .site-header .nav__links.is-open .nav__mfoot-logo img { height: 64px; width: auto; }
  .site-header .nav__links.is-open .nav__mfoot-phones { display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: var(--mine-shaft); }
  .site-header .nav__links.is-open .nav__mfoot-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 4px; padding: 12px 28px; background: var(--cardinal); color: var(--white); font-weight: 600; font-size: 16px; border-radius: var(--r-sm); }
  .site-header .nav__links.is-open .nav__mfoot-cta:hover { filter: brightness(0.92); color: var(--white); }
  .site-header .nav__cta { font-size: 14px; padding: 10px 14px; }
  .site-header .nav__hamburger { display: inline-flex; }
}
/* Narrow phones: logo + Schedule Now + hamburger overrun the row, and the
   hamburger — the only way into the menu — is what gets pushed off the edge.
   Tighten the row rather than drop a control. */
@media (max-width: 400px) {
  .site-header { --header-px: 14px; }
  .site-header .topbar { font-size: 10.5px; }
  .site-header .topbar__inner { --topbar-gap: 6px; gap: var(--topbar-gap); }
  .site-header .nav__inner { gap: 8px; }
  .site-header .nav__logo img { height: 46px; }
  .site-header .nav__cta { font-size: 13px; padding: 9px 11px; }
  .site-header .nav__hamburger { width: 36px; height: 36px; margin-left: 4px; }
}
@media (max-width: 640px) {
  .cp-home { --section-py: 56px; }
  .cp-home .hero h1 { font-size: 36px; }
  .cp-home .head h2 { font-size: 28px; line-height: 1.15; }
  .cp-home .warranty__copy h2 { font-size: 28px; line-height: 1.15; }
  .cp-home .hero__trust { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cp-home .hero__trust-item::after { display: none; }
  .cp-home .why__grid { grid-template-columns: 1fr; }
  .cp-home .coverage__grid { grid-template-columns: 1fr; }
  .cp-home .service-blk__cards { grid-template-columns: 1fr; }
  .cp-home .state-card__abbr { font-size: 60px; }
}

/* --------------------------------------------------------------------------
   Footer, as core blocks (parts/footer.html).
   The footer was one <!-- wp:html --> blob; it is now real blocks so it can be
   edited in the Site Editor. Core wraps things differently, so these rules
   re-point the existing design at the block markup rather than restyling it.
   -------------------------------------------------------------------------- */
/* wp:site-logo renders .wp-block-site-logo > a > img, where .footer__brand was the <a>. */
.footer .wp-block-site-logo { display: inline-block; margin: 0; }
.footer .wp-block-site-logo a { display: inline-block; }
.footer .wp-block-site-logo img { display: block; height: 88px; width: auto; margin-bottom: 20px; }
/* The CTA now sits in a paragraph so it can live among core blocks. */
.footer .footer__cta-wrap { margin: 0; }
/* Core list adds its own class and default padding. */
.footer__col .wp-block-list { display: flex; flex-direction: column; gap: 24px; list-style: none; padding: 0; margin: 0; }
/* wp:social-links is a <ul> of <li>, where .footer__socials was a flex row of <a>. */
.footer .wp-block-social-links { margin: 0; padding: 0; gap: 10px; }
.footer .wp-block-social-links .wp-social-link { margin: 0; padding: 0; }
.footer .wp-block-social-links .wp-social-link a { padding: 0; display: block; }
.footer .wp-block-social-links .wp-social-link svg { width: 22px; height: 22px; display: block; }
/* The design puts each glyph in a white-on-red circle; core paints the icon only. */
.footer .wp-block-social-links .wp-social-link {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Chip colours live here, not on the block. Setting `iconColor` in the block
   makes core emit an INLINE style="color:…" on every <li>, which beats any
   stylesheet rule whatever its specificity — that is why the Facebook glyph
   stayed white on its white circle. With the attribute gone there is no inline
   style and these rules win normally. */
.footer .wp-block-social-links .wp-social-link { color: var(--white); }
.footer .wp-block-social-links .wp-social-link svg { fill: currentColor; }
/* No per-service treatment: all three are plain white glyphs on the red bar.
   The 30px box stays for hit area and even spacing, with no background. */
/* The legal links are a paragraph now, not a flex container of divs. */
.footer p.footer__legal { margin: 0 0 0 auto; display: inline-flex; gap: 24px; font-size: 14px; color: var(--white); }
.footer .cp-phone { display: block; }