/* === Red Barn Media Group - Plain View Solutions Heating & Air Conditioning === */


/* ========== WEB FONTS (self-hosted) ==========
   Replaced Adobe Typekit project syb6ryc (2026-08-24). Headings moved from
   clarendon-text-pro to Zilla Slab (SIL OFL, Google Fonts); body stays Inter.
   Files are WOFF2, Latin subset only (U+0000-00FF + punctuation) — the site is
   English-only and every HTML entity it uses falls inside that range.
   TO REGENERATE (sources are not kept in the repo — both families are open source):
     Zilla Slab  https://fonts.google.com/specimen/Zilla+Slab   (4 static TTFs)
     Inter       https://fonts.google.com/specimen/Inter        (2 variable TTFs)
   Zilla Slab converts straight to WOFF2. Inter must be INSTANCED from the variable
   font with opsz pinned to 18 (matches Adobe's old "inter-18pt" optical size) and
   wght pinned to 400/600/700 — e.g. fontTools instantiateVariableFont(f,
   {"opsz":18,"wght":N}), then subset to the Latin range above and save as WOFF2.
   Keep the same pinning if weights ever change, or the type will shift.
   font-display: swap — text paints immediately in the fallback, then swaps.
   (Typekit shipped font-display:auto, which blocked text for up to ~3s.) */

/* --- Zilla Slab — headings --- */
@font-face {
  font-family: "Zilla Slab";
  src: url("/fonts/zillaslab-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/fonts/zillaslab-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/fonts/zillaslab-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zilla Slab";
  src: url("/fonts/zillaslab-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* --- Inter — body. 600 is a REAL weight now (Typekit's Inter shipped 400/700
       only, so every semibold request used to render as 700). --- */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ========== CUSTOM PROPERTIES ========== */
:root {
  /* Brand Colors — Plain View Solutions (Figma node 2001-205) */
  --brand-rose:        #C54E57;
  --brand-ocean:       #415496;
  --brand-midnight:    #1B2959;
  --brand-periwinkle:  #91BBF5;
  --brand-white-crest: #F9F5EE;

  /* Page background — reviewer feedback 2026-07-13: tan removed, whole page reads white.
     (Was var(--brand-white-crest); this ONE token drives the sub-page base + matching bands.) */
  --pvs-page-bg: #fff;

  /* Semantic aliases — legacy class names now resolve to the PVS palette */
  --color-reliable-navy:            var(--brand-midnight);
  --color-reliable-navy-hover:      color-mix(in srgb, var(--brand-midnight) 82%, #fff);
  --color-slate:                    var(--brand-ocean);
  --color-slate-hover:              color-mix(in srgb, var(--brand-ocean) 82%, #fff);
  --color-steel-grey:               var(--brand-periwinkle);
  --color-steel-grey-hover:         color-mix(in srgb, var(--brand-periwinkle) 82%, #fff);
  --color-electric-highlight:       var(--brand-rose);
  --color-electric-highlight-hover: color-mix(in srgb, var(--brand-rose) 82%, #fff);
  --color-subtle-navy:              var(--brand-white-crest);

  /* Brand Gradients — Plain View Solutions (Figma) */
  --gradient-nighttime: linear-gradient(200.93deg, var(--brand-ocean) 14.44%, var(--brand-midnight) 85.57%);
  --gradient-daytime:   linear-gradient(200.93deg, var(--brand-midnight) 14.44%, var(--brand-periwinkle) 85.57%);
  --gradient-line:      linear-gradient(200.93deg, var(--brand-rose) 14.44%, var(--brand-ocean) 85.57%);
  /* legacy gradient aliases */
  --gradient-industrial-fade: var(--gradient-nighttime);
  --gradient-metalica:        var(--gradient-daytime);

  /* Generic */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Neutrals */
  --color-gray-50: #EEF0F5;
  --color-gray-100: #E5E7EA;
  --color-gray-200: #DDDEE1;
  --color-gray-300: #CCCED6;
  --color-gray-400: #C1C3CB;
  --color-gray-500: #A9ABB4;
  --color-gray-600: #8D919A;
  --color-gray-700: #656870;

  /* Dark Mode */
  --color-00dp: #121212;
  --color-01dp: #1E1E1E;
  --color-02dp: #222222;
  --color-03dp: #252525;
  --color-04dp: #272727;
  --color-06dp: #2C2C2C;
  --color-08dp: #2E2E2E;
  --color-12dp: #333333;
  --color-16dp: #353535;
  --color-24dp: #383838;

  /* Typography — self-hosted, see WEB FONTS block at the top of this file */
  --font-heading: "Zilla Slab", Rockwell, Charter, Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* legacy aliases — old class names now resolve to the PVS type system */
  --font-manifold-cf:          var(--font-heading);
  --font-manifold-extended-cf: var(--font-heading);
  --font-inter:                var(--font-body);
  --font-weight-heavy: 900;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;

  /* Layout */
  --menu-height: 7.5rem;
  --menu-height-shrink: 6rem;
  --hero-height: 500px;
  --transition-standard: 0.25s;
  --border-radius-standard: 1rem;
  --box-shadow-dropdown: 0 3rem 3rem rgba(0, 0, 0, 0.175);
  --overlay-opacity: 0.3;
  --overlay-opacity-sub: 0.75;
}
/* ========== END CUSTOM PROPERTIES ========== */


/* ========== BASE STYLES ========== */
html, body {
  width: 100%;
  height: 100%;
  overflow-x: clip;
}

body {
  color: var(--color-00dp);
  font-family: var(--font-inter);
  font-weight: var(--font-weight-regular);
  background-color: var(--color-white);
  position: relative;
}
/* ========== END BASE STYLES ========== */


/* ========== TYPOGRAPHY ========== */
/* Fluid type scale: sizes scale with viewport width.
   Reference viewport = 1600px (where 1vw = 16px = 1rem),
   so each Xrem target is paired with Xvw as the clamp preferred value.
   Line-heights are unitless ratios so they scale with the font-size. */

/* Heading Defaults — Manifold CF */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--font-manifold-cf);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

/* Body Defaults — Inter */
p, ul li, ol li, table {
  font-family: var(--font-inter);
  font-size: clamp(0.875rem, 1vw, 1rem);           /* 14→16 */
  line-height: 1.5;                                 /* 24/16 */
  font-weight: var(--font-weight-regular);
}

/* Display Utilities — Manifold CF */

 /* 32→64 / 72 */
 /* 28→56 / 64 */
 /* 28→40 / 48 */
 /* 24→32 / 40 */

/* Paragraph Size Utilities */
 /* 16→18 / 26 */
 /* 14→16 / 24 */
 /* 13→14 / 22 */
 /* 11→12 / 20 */

/* Legacy Size Utilities */
.fs-7 { font-size: clamp(0.8125rem, 0.875vw, 0.875rem); }
.fs-8 { font-size: clamp(0.6875rem, 0.75vw,  0.75rem);  }

/* Label Utilities — Manifold CF Bold, Uppercase */
.label-lg, .label-md, .label-sm, .label-xs {
  font-family: var(--font-manifold-cf);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}
 /* 14→16 / 18 */
.label-md { font-size: clamp(0.75rem,   0.875vw, 0.875rem); line-height: 1.143; } /* 12→14 / 16 */
 /* 11→12 / 14 */
 /*  9→10 / 12 */

/* Overline Utilities — Manifold Extended CF, Heavy, Uppercase */

 /* 12→14 / 20 */
 /* 11→12 / 20 */

/* Font Family Utilities */




/* Weight Utilities */

.bold     { font-weight: var(--font-weight-bold); }
.regular  { font-weight: var(--font-weight-regular); }

strong { font-weight: var(--font-weight-bold); }
/* ========== END TYPOGRAPHY ========== */


/* ========== MENU & NAVIGATION ========== */

/* Menu Container */
.menu-container {
  background: var(--color-white);
  margin-top: 0 !important;
}

.menu-container.shrink-menu {
  border-bottom: 1px solid var(--color-reliable-navy);
}

/* Shrink-on-scroll. custom.js adds .shrink-menu to .menu-container past 50px.
   NOTE: the inherited `.shrink-menu .navbar-nav` rules (just below, and again in
   the max-width:1200px block) are dead on this build — they came from the donor
   shell, where the desktop nav WAS a .navbar-nav. After the Figma rebuild the
   desktop header is .pvs-subnav + .pvs-mainnav, and the only .navbar-nav left is
   the offcanvas, which sits OUTSIDE .menu-container. The rules below are what
   actually drives the shrink. Desktop-only by construction: both bars are
   d-none d-xl-block, so mobile's fixed header/CTA-strip offsets are untouched. */
.shrink-menu .pvs-mainnav-inner > .row { min-height: 56px; }
.shrink-menu .pvs-nav-logo { transform: translate(-50%, -50%) scale(0.78); }

.navbar-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  /* legacy justify-content:center removed — it floated the offcanvas links to the
     panel's vertical middle (only .navbar-nav on the site is the offcanvas menu) */
  justify-content: flex-start;
  height: var(--menu-height);
  transition: height var(--transition-standard);
}

.shrink-menu .navbar-nav {
  height: var(--menu-height-shrink);
}

/* Navigation Links */
.menu-container .navbar-nav .nav-link {
  color: var(--color-reliable-navy);
  font-family: var(--font-manifold-cf);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
}

.menu-container .navbar-nav .nav-link:is(:hover, :active) {
  color: var(--color-electric-highlight);
}

/* Dropdown Toggle Resets */


.has-dropdown, .has-dropend {
  align-items: center;
  gap: 0.25em;
}

/* Dropdown Caret Icons (Font Awesome) */
.has-dropdown::after {
  content: '\f107'; /* angle-down */
  font-family: 'Font Awesome 7 Sharp';
  color: var(--color-reliable-navy);
  border: 0;
  margin-left: 0;
  font-size: inherit;
  vertical-align: middle;
}





/* Dropdown Items */




/* Dropdown Menus */










/* Mega Dropdown */
.pvs-mega-dropdown-row {
  background-color: var(--color-gray-50);
  border-radius: 0;
  transition-duration: var(--transition-standard);
  /* Normal card padding; the WHITE logo band is provided by the panel's top padding above this card. */
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

.pvs-mega-dropdown-row:is(:hover, :focus, :active) {
  background-color: var(--color-subtle-navy);
}

.pvs-mega-dropdown-group p {
  color: var(--color-00dp);
  margin-bottom: 0;
  transition-duration: var(--transition-standard);
}

.pvs-mega-dropdown-group:is(:hover, :focus, :active) p {
  color: var(--color-02dp);
}

/* Logo Row */


/* Callout Icon */


/* Nav Bar */


/* Nav Social Icons */


/* ========== MOBILE OFFCANVAS ========== */
.pvs-offcanvas {
  background: var(--color-reliable-navy);
  max-width: 85vw;
  width: 400px;
}

/* CTA strip above the offcanvas logo header — darker band so it reads as the utility strip */
.pvs-offcanvas-cta {
  background: var(--brand-midnight);
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12); /* strip sits at the panel bottom now */
}
.pvs-offcanvas-cta .btn { font-size: 0.85rem; padding: 0.5rem 0.5rem; white-space: nowrap; }
.pvs-offcanvas-cta .btn-electric-highlight,
.pvs-offcanvas-cta .btn-electric-highlight:is(:hover, :focus, :active) { color: #fff; }
.pvs-offcanvas .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.75rem 1rem;
}

.pvs-offcanvas-logo {
  max-height: 64px;
  width: auto;
}

.pvs-offcanvas-nav .nav-link {
  color: var(--color-gray-50);
  font-family: var(--font-manifold-cf);
  font-weight: var(--font-weight-heavy);
  font-size: 1rem;
  line-height: 1.125rem;
  text-transform: uppercase;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background var(--transition-standard), color var(--transition-standard);
}

.pvs-offcanvas-nav .nav-link:hover,
.pvs-offcanvas-nav .nav-link:focus,
.pvs-offcanvas-nav .nav-link[aria-expanded="true"] {
  color: var(--color-electric-highlight);
  background: rgba(255, 255, 255, 0.05);
}

.pvs-oc-chevron {
  font-size: 0.75rem;
  transition: transform var(--transition-standard);
}

.pvs-offcanvas-nav .nav-link[aria-expanded="true"] .pvs-oc-chevron {
  transform: rotate(180deg);
}

.pvs-offcanvas-subnav {
  background: rgba(0, 0, 0, 0.2);
}

.pvs-offcanvas-subnav > .nav-item > .nav-link {
  padding-left: 2rem;
  font-size: 0.9rem;
}


/* Offcanvas equipment-group label (mirrors the desktop mega-menu group headers) */
.pvs-oc-group-label {
  list-style: none;
  margin: 0;
  padding: 0.75rem 1rem 0.2rem 2rem;
  color: var(--brand-periwinkle);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
}
.pvs-oc-group-label i { margin-right: 0.4rem; }
.pvs-offcanvas-subnav > .nav-item > .nav-link.pvs-oc-sublink {
  padding-left: 3rem;
  font-size: 0.85rem;
}





/* ========== END MOBILE OFFCANVAS ========== */

/* ========== PVS HEADER (Figma: Sub Nav + centered-logo Main Nav) ========== */
/* Shared horizontal inset — 100px at wide (Figma 1600), responsive below */
.pvs-nav-inset {
  padding-left: clamp(1.5rem, 5vw, 6.25rem);
  padding-right: clamp(1.5rem, 5vw, 6.25rem);
}

/* --- Sub Nav (utility bar) --- */
.pvs-subnav { background-color: var(--brand-midnight); }
.pvs-subnav .pvs-nav-inset { padding-top: 4px; padding-bottom: 4px; }
.pvs-subnav-actions { gap: 1rem; }
.pvs-nav-logo-col { width: 160px; }

.pvs-subnav-callout {
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
}
.pvs-subnav-callout i { font-size: 16px; }

.pvs-subnav-link {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-standard);
}
.pvs-subnav-link:is(:hover, :focus) { color: var(--brand-periwinkle); }

.pvs-subnav-social { gap: 0.85rem; }
.pvs-subnav-social-link {
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: color var(--transition-standard);
}
.pvs-subnav-social-link:is(:hover, :focus) { color: var(--brand-periwinkle); }

/* Shared pill button (sub nav + hero CTAs) */
.pvs-btn,
.pvs-subnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 8px;
  border: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  color: #fff !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-standard);
}
.pvs-btn i,
.pvs-subnav-btn i { font-size: 16px; }
/* Small screens: long button labels wrap instead of overflowing narrow parents
   (e.g. "View Maintenance Plans" bursting out of the MF benefits panel at 390px). */
@media (max-width: 575.98px) {
  .pvs-btn { white-space: normal; }
}
.pvs-btn--rose,  .pvs-subnav-btn--rose  { background-color: var(--brand-rose); }
.pvs-btn--ocean, .pvs-subnav-btn--ocean { background-color: var(--brand-ocean); }
.pvs-btn--midnight { background-color: var(--brand-midnight); }
/* Each pvs button hovers to a slightly lighter tint of its OWN color (brand 82% + #fff); text stays white */
.pvs-btn--rose:is(:hover, :focus),  .pvs-subnav-btn--rose:is(:hover, :focus)  { background-color: var(--color-electric-highlight-hover); }
.pvs-btn--ocean:is(:hover, :focus), .pvs-subnav-btn--ocean:is(:hover, :focus) { background-color: var(--color-slate-hover); }
.pvs-btn--midnight:is(:hover, :focus) { background-color: var(--color-reliable-navy-hover); }

/* --- Main Nav (centered logo + split links) --- */
.pvs-mainnav { position: relative; background-color: #fff; padding: 0; border: 0; }
/* nav-bar row is the full 73px; align-items-center (on the row) then vertically centers the links.
   Scoped to the direct child row so the mega-dropdown rows are unaffected. */
.pvs-mainnav-inner > .row { min-height: 73px; transition: min-height var(--transition-standard); }

.pvs-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pvs-nav-links .nav-item { display: flex; align-items: center; }

.pvs-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  color: var(--brand-midnight);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color var(--transition-standard);
}
.pvs-nav-link:is(:hover, :focus, [aria-expanded="true"]) { color: var(--brand-rose); }
.pvs-nav-link.has-dropdown::after {
  content: '\f107';
  font-family: 'Font Awesome 7 Sharp';
  font-weight: 900;
  font-size: 12px;
  color: inherit;
  margin-left: 0;
}

/* Centered overhanging hexagon logo */
.pvs-nav-logo {
  position: absolute;
  left: 50%;
  top: 68%; /* center sits ~68% down the bar so the hexagon dips into the hero (matches Figma) */
  transform: translate(-50%, -50%);
  display: block;
  line-height: 0;
  z-index: 1005; /* above the open mega-dropdown (z 1000) so the overhanging hexagon sits ON TOP of it */
  /* transform (not width) so the shrink is composited, not a layout pass */
  transition: transform var(--transition-standard);
}
.pvs-nav-logo img { display: block; width: 139px; height: auto; }

/* Mega-dropdown panels — inset to the nav's own horizontal inset (NOT edge-to-edge); Heating & Cooling's
   .position-static li anchors this to the full-width nav, so left/right = the shared inset aligns the panel
   with the nav links above it. */
.pvs-mainnav .dropdown-menu.mega-dropdown {
  position: absolute;
  top: 100%; /* flush with the nav — no gap */
  left: clamp(1.5rem, 5vw, 6.25rem);
  right: clamp(1.5rem, 5vw, 6.25rem);
  width: auto;
  margin: 0;
  transform: none;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: var(--box-shadow-dropdown);
  /* Tall WHITE top padding = the padded band the overhanging centered logo sits in; the gray card + links
     start below it. ~3.5rem clears the logo's ~52px dip below the nav. */
  padding: 3.5rem 0.5rem 0.5rem;
}
/* Compact mega-dropdowns (Commercial / Gas Piping / Water Heaters) — 3-column panels that all open DEAD-CENTER
   on the navbar (under the centered logo), evenly centered regardless of which toggle was clicked.
   Each <li> carries .position-static so this anchors to the full-width .pvs-mainnav; left:50% + translateX(-50%)
   then centers the panel on the nav. A 690px panel centered on the viewport never overflows at the >=1200px
   desktop nav breakpoint. top:100% drops it from the nav's bottom edge (same as Heating & Cooling). */
.pvs-mainnav .dropdown-menu.mega-dropdown.mega-dropdown--auto {
  /* Content-width panel LEFT-ALIGNED under the clicked item (reviewer: come down from
     the nav item, no centering). The li is the positioning parent; ~16px tall centered
     in the 73px nav, so +28px drops the panel at the nav's bottom edge. */
  left: 0;
  right: auto;
  transform: none;
  top: calc(100% + 28px);
  width: max-content;
  min-width: 460px;
  max-width: min(680px, 94vw);
}
/* Columns size to their content and links never wrap — prevents the 50/50 grid from
   crunching/stacking the link text inside the content-width panel. */
.pvs-mainnav .mega-dropdown--auto .pvs-mega-dropdown-row .row {
  flex-wrap: nowrap;
  --bs-gutter-x: 3rem;
}
.pvs-mainnav .mega-dropdown--auto .pvs-mega-dropdown-row .row > .col {
  flex: 0 0 auto;
  width: auto;
}
.pvs-mainnav .mega-dropdown--auto .pvs-mega-dropdown-group a,
.pvs-mainnav .mega-dropdown--auto .pvs-mega-dropdown-group p,
.pvs-mainnav .mega-dropdown--auto h6 { white-space: nowrap; }

/* Uniform height across the three small dropdowns regardless of per-column link counts. */
.pvs-mainnav .mega-dropdown--auto .pvs-mega-dropdown-row {
  min-height: 172px;
}
.pvs-mainnav .mega-dropdown--auto .container-fluid { width: auto; }

/* --- Mobile bar (<1200px) --- */
/* Mobile CTA strip — FIXED to the viewport bottom (final placement) */
.pvs-mobile-strip {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background-color: var(--brand-midnight);
  padding-bottom: env(safe-area-inset-bottom); /* clear the iPhone home indicator */
}
.pvs-mobile-strip .btn { font-size: 0.85rem; padding: 0.5rem 0.5rem; white-space: nowrap; }
/* Narrow phones: shrink the CTA-strip labels so the phone number never stacks */
@media (max-width: 389.98px) {
  .pvs-mobile-strip .btn, .pvs-offcanvas-cta .btn { font-size: 0.75rem; padding: 0.5rem 0.25rem; }
  /* offcanvas panel is only ~85vw — let its two CTAs go full-width instead of squeezing */
  .pvs-offcanvas-cta .col-6 { width: 100%; }
}
/* Schedule Service in the strip: white label on the rose button (midnight label was ~3:1 on rose) */
.pvs-mobile-strip .btn-electric-highlight,
.pvs-mobile-strip .btn-electric-highlight:is(:hover, :focus, :active) { color: #fff; }

/* Desktop nav runs ≥1200px; between 1200-1350 the link row is too tight around the
   center logo — drop the Maintenance item (still reachable via the small dropdowns'
   Quick Links, the offcanvas menu, and the footer) and compact the row so the right
   group (Gas Piping…About Us) clears the centered logo. The right .col's min-content
   otherwise pushes the logo reserve off-center while the logo stays viewport-centered. */
@media (max-width: 1449.98px) {
  /* compaction runs to 1450 — at 1350-1450 the full row (incl. Maintenance) grazed the logo otherwise */
  .pvs-nav-inset { padding-left: 1rem; padding-right: 1rem; }
  .pvs-nav-links { gap: 0.75rem; }
  .pvs-nav-link { font-size: 0.9rem; }
  .pvs-nav-logo-col { width: 150px; } /* logo is 139px wide — keeps cover, frees 10px */
  .pvs-mainnav .dropdown-menu.mega-dropdown { left: 1rem; right: 1rem; } /* keep H&C panel aligned with the tightened inset */
}
@media (max-width: 1349.98px) {
  .pvs-nav-links .pvs-nav-item-maintenance { display: none; } /* out-specifies .pvs-nav-links .nav-item {display:flex} */
}
.pvs-mobile-bar { background-color: #fff; border-bottom: 1px solid var(--color-gray-100); }
.pvs-mobile-toggle,
.pvs-mobile-call {
  background: none;
  border: 0;
  color: var(--brand-midnight);
  padding: 0.4rem 0.6rem;
  text-decoration: none;
  line-height: 1;
}
.pvs-mobile-logo img { display: block; height: 68px; width: auto; }
/* The mobile fixed header's enlarged logo makes the bar taller than the per-section
   "clear the fixed nav" paddings assume — push content down by the growth delta.
   The CTA strip is fixed to the viewport BOTTOM, so the footer carries matching
   clearance (body height is constrained upstream, so it can't live on body). */
@media (max-width: 1199.98px) {
  main { padding-top: 26px; }
  footer { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}
.pvs-offcanvas .offcanvas-body { padding: 0; }

/* Midnight text/link helpers used in the PVS dropdowns */
.text-midnight { color: var(--brand-midnight) !important; }
a.link-midnight { color: var(--brand-midnight); text-decoration: none; }
a.link-midnight:is(:hover, :focus, :active) { color: var(--brand-rose); }

/* Ocean button (phone CTA / offcanvas) */
.btn-ocean { background-color: var(--brand-ocean); border-color: var(--brand-ocean); color: #fff; }
.btn-ocean:is(:hover, :focus, :active) {
  background-color: color-mix(in srgb, var(--brand-ocean) 85%, #000);
  border-color: color-mix(in srgb, var(--brand-ocean) 85%, #000);
  color: #fff;
}
/* ========== END PVS HEADER ========== */
/* ========== END MENU & NAVIGATION ========== */


/* ========== PVS HERO (Figma 28109:2158) ========== */
.pvs-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-top: clamp(4rem, 7vw, 6.4rem); /* clears the fixed nav */
}
/* Inner frame = the Figma 666px hero; content + hexagon both center in it so they align */
.pvs-hero-frame {
  position: relative;
  min-height: 666px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Background — client hero photo (blue-washed) + brand overlay; responsive per breakpoint */
.pvs-hero-bg {
  /* exact Figma overlay — 90% light→periwinkle→midnight vertical gradient over the photo */
  --pvs-hero-ov: linear-gradient(179.222deg, rgba(238, 245, 255, 0.9) 7.46%, rgba(185, 215, 255, 0.9) 66.54%, rgba(27, 41, 89, 0.9) 131.47%);
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--pvs-hero-ov), url('/img/pvs-hero-800-333.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 801px) {
  .pvs-hero-bg { background-image: var(--pvs-hero-ov), url('/img/pvs-hero-1200-500.webp'); }
}
@media (min-width: 1201px) {
  .pvs-hero-bg { background-image: var(--pvs-hero-ov), url('/img/pvs-hero-1600-666.webp'); }
}
@media (min-width: 1601px) {
  .pvs-hero-bg { background-image: var(--pvs-hero-ov), url('/img/pvs-hero-2560-1066.webp'); }
}

/* Hexagon overlay — exact Figma vector (pointy-top, gradient border ring) + frosted glass fill.
   Sized by width (Figma 1087/1600 = 68%), tall aspect, centered, overflows hero top/bottom. */
.pvs-hero-hex {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(1087px, 68%);
  aspect-ratio: 1087 / 1053;
  pointer-events: none;
}
.pvs-hero-hex-border { /* Figma gradient border ring (54% midnight→periwinkle) — no fill, just the ring */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 991.98px) {
  .pvs-hero-hex { width: min(1087px, 132%); } /* enlarge so content fits the middle band on small screens */
}

/* Content */
.pvs-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.pvs-hero-accred {
  gap: 28px;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.pvs-hero-badge { height: 55px; width: auto; }
.pvs-hero-reviews { gap: 12px; }
.pvs-hero-google { width: 28px; height: 28px; }
.pvs-hero-reviews-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.pvs-hero-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--brand-rose);
  font-size: 15px;
  line-height: 1;
}
.pvs-hero-reviews-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--brand-midnight);
}
.pvs-hero-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 22px;
}
.pvs-hero-wordmark-name    { width: min(620px, 84%); height: auto; }
.pvs-hero-wordmark-tagline { width: min(520px, 70%); height: auto; }
.pvs-hero-subhead {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.34;
  color: var(--brand-midnight);
  max-width: 600px;
  margin: 0 auto 20px;
}
.pvs-hero-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.45;
  color: var(--color-00dp, #121212);
  max-width: 814px;
  margin: 0 auto 28px;
}
.pvs-hero-ctas { gap: 20px; }

@media (max-width: 575.98px) {
  .pvs-hero-accred { gap: 16px; }
  .pvs-hero-ctas .pvs-btn { width: 100%; justify-content: center; }
}
/* ========== END PVS HERO ========== */


/* ========== PVS OPENER (Figma 28109:3355) ========== */
.pvs-opener {
  background-image: linear-gradient(86.58deg, #415496 0.29%, #1B2959 99.71%);
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 3.75rem);
}
.pvs-opener-main {
  --bs-gutter-x: 5rem; /* ~78px gap between form + content (Figma) */
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

/* Contact form card */
.pvs-form-card {
  background-image: linear-gradient(-63.66deg, #415496 13.8%, #1B2959 86.2%);
  border: 8px solid #EEF0F5;
  border-radius: 12px;
  padding: 28px;
}
.pvs-form-card-title {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 2rem;
  line-height: 2.5rem;
  margin-bottom: 20px;
}
.pvs-form-card .row { --bs-gutter-x: 0.75rem; }
.pvs-form-card label { /* visually hidden — Figma uses placeholders (kept for a11y) */
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.pvs-form-card .form-control {
  background-color: #EEF0F5 !important;
  border: 1px solid #E5E7EA !important;
  border-radius: 4px !important;
  color: var(--brand-midnight);
  font-family: var(--font-body);
  font-size: 0.875rem;
}
.pvs-form-card .form-control::placeholder { color: #A9ABB4; opacity: 1; }
.pvs-form-card #submit-form {
  background-color: var(--brand-rose);
  border-color: var(--brand-rose);
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
}
.pvs-form-card #submit-form:is(:hover, :focus) {
  background-color: color-mix(in srgb, var(--brand-rose) 86%, #000);
  border-color: color-mix(in srgb, var(--brand-rose) 86%, #000);
}
.pvs-form-card #submit-form i { color: #fff !important; }

/* Right column — overline / heading / body / CTAs */
.pvs-overline {
  color: var(--brand-periwinkle);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pvs-opener-heading {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 20px;
  text-transform: none; /* Figma is title case (override any global heading uppercase) */
}
.pvs-opener-body p {
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}
.pvs-opener-body p:last-child { margin-bottom: 0; }
.pvs-opener-ctas { gap: 20px; margin-top: 20px; }

/* Advantage hexagon tabs */
.pvs-adv-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
}
.pvs-adv-hex {
  position: relative;
  width: clamp(135px, 14vw, 200px);
  aspect-ratio: 217 / 240;
  flex: 0 0 auto;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background-color: #fff; /* white outer border (Figma 28109-2236: 7px white stroke ≈ 3%) → light periwinkle (hover) */
}
.pvs-adv-hex::before { /* rose ring, just inside the white border */
  content: '';
  position: absolute;
  inset: 3%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #B5555C;
}
.pvs-adv-hex-inner { /* white hexagon (fill) holding icon + label */
  position: absolute;
  inset: 12%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  padding: 0 14%;
}
.pvs-adv-icon {
  /* no badge box — the glyph itself sits 5px above the label, group centered in the hexagon */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-ocean);
  font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1;
}
.pvs-adv-label {
  color: var(--brand-ocean);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(12px, 1.1vw, 16px);
  line-height: 1.15;
}
/* Hover state: rose→slate border, white→periwinkle fill, icon glyph + label → midnight (no badge) */
.pvs-adv-hex,
.pvs-adv-hex::before,
.pvs-adv-hex-inner,
.pvs-adv-icon,
.pvs-adv-label { transition: background-color var(--transition-standard), color var(--transition-standard); }
.pvs-adv-hex:hover { background-color: #BCD5F7; }
.pvs-adv-hex:hover::before { background-color: #6376AD; }
.pvs-adv-hex:hover .pvs-adv-hex-inner { background-color: var(--brand-periwinkle); }
.pvs-adv-hex:hover .pvs-adv-icon { color: var(--brand-midnight); }
.pvs-adv-hex:hover .pvs-adv-label { color: var(--brand-midnight); }
/* ========== END PVS OPENER ========== */


/* ========== PVS SERVICES TABS (Figma 28109:3373) ========== */
.pvs-services {
  background-color: var(--brand-midnight);
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.pvs-services-header { max-width: 960px; margin: 0 auto clamp(2rem, 4vw, 2.75rem); }
.pvs-overline-light {
  color: var(--brand-periwinkle);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pvs-services-heading {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 1rem + 2.2vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 16px;
  text-transform: none;
}
.pvs-services-body {
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Tabs (gradient-line underline on active) */
.pvs-service-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3.5vw, 3.75rem);
  border: 0;
  padding: 0;
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  list-style: none;
}
.pvs-service-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 13px;
  background: none;
  border: 0;
  color: var(--brand-periwinkle); /* inactive = periwinkle (Figma) */
  cursor: pointer;
  transition: color var(--transition-standard);
}
.pvs-service-tab i { font-size: 36px; line-height: 1; }
.pvs-service-tab span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
}
.pvs-service-tab:hover, .pvs-service-tab.active { color: #fff; } /* active/hover = white */
.pvs-service-tab::after { /* full-width gradient-line underline */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--brand-rose), var(--brand-ocean));
  opacity: 0;
  transition: opacity var(--transition-standard);
}
.pvs-service-tab.active::after { opacity: 1; }

/* Service card */
.pvs-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.pvs-svc-card-img {
  position: relative;
  aspect-ratio: 400 / 168;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pvs-svc-card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(197, 78, 87, 0.5); /* rose 50% overlay */
}
 /* no photo yet → brand gradient */

/* Per-service photo, served responsively by DPR — 400px (1x) / 800px (2x); plain-url fallback first. */
.pvs-svc-card-img--air-conditioner {
  background-image: url('/img/pvs-service-air-conditioner.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-air-conditioner-400.webp') 1x, url('/img/pvs-service-air-conditioner.webp') 2x);
  background-image: image-set(url('/img/pvs-service-air-conditioner-400.webp') 1x, url('/img/pvs-service-air-conditioner.webp') 2x);
}
.pvs-svc-card-img--furnace {
  background-image: url('/img/pvs-service-furnace.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-furnace-400.webp') 1x, url('/img/pvs-service-furnace.webp') 2x);
  background-image: image-set(url('/img/pvs-service-furnace-400.webp') 1x, url('/img/pvs-service-furnace.webp') 2x);
}
.pvs-svc-card-img--heat-pump {
  background-image: url('/img/pvs-service-heat-pump.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-heat-pump-400.webp') 1x, url('/img/pvs-service-heat-pump.webp') 2x);
  background-image: image-set(url('/img/pvs-service-heat-pump-400.webp') 1x, url('/img/pvs-service-heat-pump.webp') 2x);
}
.pvs-svc-card-img--mini-split {
  background-image: url('/img/pvs-service-mini-split.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-mini-split-400.webp') 1x, url('/img/pvs-service-mini-split.webp') 2x);
  background-image: image-set(url('/img/pvs-service-mini-split-400.webp') 1x, url('/img/pvs-service-mini-split.webp') 2x);
}
.pvs-svc-card-img--package-unit {
  background-image: url('/img/pvs-service-package-unit.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-package-unit-400.webp') 1x, url('/img/pvs-service-package-unit.webp') 2x);
  background-image: image-set(url('/img/pvs-service-package-unit-400.webp') 1x, url('/img/pvs-service-package-unit.webp') 2x);
}
.pvs-svc-card-img--mobile {
  background-image: url('/img/pvs-service-mobile.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-mobile-400.webp') 1x, url('/img/pvs-service-mobile.webp') 2x);
  background-image: image-set(url('/img/pvs-service-mobile-400.webp') 1x, url('/img/pvs-service-mobile.webp') 2x);
}
.pvs-svc-card-img--tankless {
  background-image: url('/img/pvs-service-tank-water-heater.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-tank-water-heater-400.webp') 1x, url('/img/pvs-service-tank-water-heater.webp') 2x);
  background-image: image-set(url('/img/pvs-service-tank-water-heater-400.webp') 1x, url('/img/pvs-service-tank-water-heater.webp') 2x);
}
.pvs-svc-card-img--tank-wh {
  background-image: url('/img/pvs-service-water-heater-tank.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-water-heater-tank-400.webp') 1x, url('/img/pvs-service-water-heater-tank.webp') 2x);
  background-image: image-set(url('/img/pvs-service-water-heater-tank-400.webp') 1x, url('/img/pvs-service-water-heater-tank.webp') 2x);
}
.pvs-svc-card-img--gas-piping {
  background-image: url('/img/pvs-service-gas-piping.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-gas-piping-400.webp') 1x, url('/img/pvs-service-gas-piping.webp') 2x);
  background-image: image-set(url('/img/pvs-service-gas-piping-400.webp') 1x, url('/img/pvs-service-gas-piping.webp') 2x);
}
.pvs-svc-card-img--outdoor-fireplace {
  background-image: url('/img/pvs-service-outdoor-fireplace.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-outdoor-fireplace-400.webp') 1x, url('/img/pvs-service-outdoor-fireplace.webp') 2x);
  background-image: image-set(url('/img/pvs-service-outdoor-fireplace-400.webp') 1x, url('/img/pvs-service-outdoor-fireplace.webp') 2x);
}
.pvs-svc-card-img--commercial {
  background-image: url('/img/pvs-service-commercial-rtu.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-commercial-rtu-400.webp') 1x, url('/img/pvs-service-commercial-rtu.webp') 2x);
  background-image: image-set(url('/img/pvs-service-commercial-rtu-400.webp') 1x, url('/img/pvs-service-commercial-rtu.webp') 2x);
}
.pvs-svc-card-img--mini-split-unit {
  background-image: url('/img/pvs-service-mini-split-unit.webp');
  background-image: -webkit-image-set(url('/img/pvs-service-mini-split-unit-400.webp') 1x, url('/img/pvs-service-mini-split-unit.webp') 2x);
  background-image: image-set(url('/img/pvs-service-mini-split-unit-400.webp') 1x, url('/img/pvs-service-mini-split-unit.webp') 2x);
}

/* ========== LEGAL PAGES (terms, privacy) — long-form prose ========== */
.pvs-legal { max-width: 880px; margin-inline: auto; }
.pvs-legal > p, .pvs-legal li { font-size: 1rem; line-height: 1.7; color: #3a3f4a; }
.pvs-legal > p { margin-bottom: 1rem; }
.pvs-legal h2 {
  font-family: var(--font-heading);
  color: var(--brand-midnight);
  font-size: 1.5rem;
  line-height: 1.25;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.pvs-legal h2:first-of-type { margin-top: 0.5rem; }
.pvs-legal h3 {
  font-family: var(--font-heading);
  color: var(--brand-ocean);
  font-size: 1.125rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.pvs-legal ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.pvs-legal li { margin-bottom: 0.45rem; }
.pvs-legal a { color: var(--brand-ocean); text-decoration: underline; }
.pvs-legal a:is(:hover, :focus) { color: var(--brand-midnight); }
.pvs-legal-updated { font-size: 0.95rem; color: var(--brand-ocean); margin-bottom: 1.75rem !important; }

/* ========== CONTACT PAGE — NAP list + form card ========== */
.pvs-contact-nap { margin: 1.5rem 0 1.75rem; }
.pvs-contact-nap li { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 1.1rem; }
.pvs-contact-nap li:last-child { margin-bottom: 0; }
.pvs-contact-nap i { color: var(--brand-rose); font-size: 1.2rem; line-height: 1.5; width: 1.4rem; text-align: center; flex: 0 0 auto; }
.pvs-contact-nap-label { font-family: var(--font-heading); color: var(--brand-midnight); font-weight: 700; margin-bottom: 0.1rem; font-size: 0.95rem; }
.pvs-contact-nap-val, .pvs-contact-nap a { color: #3a3f4a; text-decoration: none; }
.pvs-contact-nap a:is(:hover, :focus) { color: var(--brand-rose); }
.pvs-contact-form-card { border-radius: 16px; }
.pvs-contact-form-card .pvs-form-heading { font-family: var(--font-heading); color: var(--brand-midnight); font-size: 1.35rem; margin-bottom: 1.1rem; }
.pvs-svc-card-icon {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: linear-gradient(87.9deg, var(--brand-ocean), var(--brand-midnight));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36px;
}
.pvs-svc-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  flex: 1 1 auto;
  text-align: center;
}
.pvs-svc-card-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #000;
  margin: 0 0 8px;
  text-transform: none;
}
.pvs-svc-card-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-bottom: 8px;
}
.pvs-svc-tag {
  background: #CCCED6;
  color: #8D919A;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  padding: 4px 8px;
  border-radius: 300px;
}
.pvs-svc-card-desc {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  color: #000;
  margin: 0;
}
.pvs-svc-card-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: #656870;
  text-decoration: none;
  transition: color var(--transition-standard);
}
.pvs-svc-card-more:hover { color: var(--brand-rose); }
.pvs-svc-card-cta { align-self: center; }

/* Card hover (Figma): white panel rolls up from the bottom, revealing the service's sub-offerings */
.pvs-svc-card-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.pvs-svc-card:hover .pvs-svc-card-hover,
.pvs-svc-card:focus-within .pvs-svc-card-hover { transform: translateY(0); }
.pvs-svc-sublist {
  list-style: none;
  margin: 12px auto 0;
  padding: 0;
  width: fit-content;       /* shrink to widest row, then center the block */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}
.pvs-svc-sublist li { display: flex; align-items: center; gap: 12px; width: 100%; }
.pvs-svc-subicon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-periwinkle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
}
.pvs-svc-sublist a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--brand-midnight);
  text-decoration: none;
  transition: color var(--transition-standard);
}
.pvs-svc-sublist a:hover { color: var(--brand-rose); }
/* ========== END PVS SERVICES TABS ========== */


/* ========== PVS ABOUT / OUR STORY ========== */
.pvs-about {
  background: #fff;
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.pvs-overline-rose {
  color: var(--brand-rose);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
  margin-bottom: 13px;
}
.pvs-about-heading {
  color: var(--brand-ocean);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  line-height: 1.2;
  margin-bottom: 20px;
  text-transform: none;
}
.pvs-about-body p {
  color: #121212;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}
.pvs-about-body p:last-child { margin-bottom: 0; }
.pvs-about-ctas { margin-top: 32px; }

/* Right panel — "Why Choose our Team?" feature grid (no card/shadow — sits flat on the section) */
.pvs-about-advantages {
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
.pvs-about-adv-heading {
  color: var(--brand-ocean);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  text-transform: none;
  margin-bottom: 40px;
}
.pvs-team-card {
  padding: clamp(1.25rem, 1.8vw, 1.5rem);
  border: 1px solid transparent;
  border-radius: 16px;
  background-color: transparent;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition: background-color var(--transition-standard), box-shadow var(--transition-standard), border-color var(--transition-standard), transform var(--transition-standard);
}
.pvs-team-card:hover {
  background-color: #fff;
  border-color: rgba(27, 41, 89, 0.10);
  box-shadow: 0 0 40px 6px rgba(27, 41, 89, 0.25);
  transform: translateY(-4px);
}
.pvs-team-icon {
  display: block;
  width: fit-content;
  color: var(--pvs-icon, var(--brand-ocean)); /* icon-context safety net — adapts to the parent surface */
  font-size: 46px;
  line-height: 1;
  margin: 0 auto 16px; /* auto inline margins center the block icon over the centered card text */
}
.pvs-team-title {
  color: #383838;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  text-transform: none;
  margin-bottom: 12px;
}
.pvs-team-text {
  color: #383838;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.25rem;
  margin-bottom: 0;
}
/* ========== END PVS ABOUT / OUR STORY ========== */


/* ========== PVS MAINTENANCE + FINANCING ========== */
.pvs-mf {
  background: var(--brand-periwinkle);
  padding-top: clamp(4.5rem, 9vw, 8.75rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.pvs-mf-card {
  position: relative;
  background: var(--brand-midnight);
  border: 8px solid #fff;
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  padding: clamp(3.5rem, 6vw, 4rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 4vw, 2.5rem);
}
.pvs-mf-card + .pvs-mf-card { margin-top: clamp(3.5rem, 6.5vw, 6.5rem); }

/* Hexagon badge straddling the top edge */
.pvs-mf-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 104px;
  aspect-ratio: 125 / 137;
  z-index: 3;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}
/* 3 stacked hexagons: white outer frame -> rose ring -> white fill -> ocean icon */
.pvs-mf-badge-frame,
.pvs-mf-badge-ring,
.pvs-mf-badge-inner {
  position: absolute;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.pvs-mf-badge-frame { inset: 0; background: #fff; }
.pvs-mf-badge-ring { inset: 6%; background: #B5555C; }
.pvs-mf-badge-inner {
  inset: 17%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pvs-mf-badge-inner i { color: var(--brand-ocean); font-size: 40px; line-height: 1; }

/* Left/right text column */
.pvs-mf-content { padding: clamp(0.5rem, 1.5vw, 1.25rem); }
.pvs-mf-heading {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.625rem, 1rem + 1.4vw, 2rem);
  line-height: 1.25;
  text-transform: none;
  margin: 0 0 20px;
}
.pvs-mf-body {
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 0;
}
.pvs-mf-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}
.pvs-mf-optimus { height: 42px; width: auto; } /* native 1:1 so the tagline in the wordmark stays legible */

/* Benefits panel (ocean) */
.pvs-mf-panel {
  height: 100%;
  background: var(--brand-ocean);
  border-radius: 16px;
  padding: 20px 20px 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pvs-mf-panel-heading {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;
  text-transform: none;
  margin: 0;
}
.pvs-mf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pvs-mf-list li { display: flex; align-items: flex-start; gap: 20px; }
.pvs-mf-list i {
  flex: 0 0 auto;
  color: var(--brand-periwinkle);
  font-size: 1rem;
  line-height: 1.5rem;
}
.pvs-mf-list span {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5rem;
}
.pvs-mf-btn { align-self: flex-start; margin-top: 4px; }
/* ========== END PVS MAINTENANCE + FINANCING ========== */


/* ========== PVS SERVICE AREAS ========== */
.pvs-sa {
  background: var(--brand-ocean);
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.pvs-sa-heading {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  line-height: 1.2;
  text-transform: none;
  margin: 8px 0 20px;
}
.pvs-sa-body {
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 0 0 38px;
}

/* Location pills */
.pvs-sa-locations { margin-bottom: 38px; }
.pvs-sa-loc {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.pvs-sa-loc-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-rose);
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-standard);
}
.pvs-sa-loc-icon--home { background: var(--brand-periwinkle); }
.pvs-sa-loc:hover .pvs-sa-loc-icon { transform: scale(1.08); }
.pvs-sa-loc-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  color: #fff;
}

/* "Additional Communities" callout */
.pvs-sa-callout {
  background: var(--brand-midnight);
  border-radius: 20px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  padding: 28px;
}
.pvs-sa-callout-heading {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 1vw, 2rem);
  line-height: 1.25;
  text-transform: none;
  margin: 0 0 8px;
}
.pvs-sa-callout-body {
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.375rem;
  margin: 0 0 20px;
}

/* Map + pins */
.pvs-sa-map {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.pvs-sa-map > img { display: block; width: 100%; height: auto; }
/* (city + HQ pins are baked into the map image — no overlay pins) */
/* ========== END PVS SERVICE AREAS ========== */


/* ========== PVS FAQ ========== */
.pvs-faq {
  background: #fff;
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.pvs-faq-header { margin-bottom: clamp(2rem, 4vw, 2.5rem); }
.pvs-faq-heading {
  color: var(--brand-ocean);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  line-height: 1.2;
  text-transform: none;
  margin: 0;
}
.pvs-faq-row--second { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Category heading */
.pvs-faq-cat {
  color: var(--brand-rose);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-transform: none;
  margin: 0 0 8px;
  padding-bottom: 8px;
}

/* Accordion item */
.pvs-faq-item { border-bottom: 1px solid var(--brand-periwinkle); }
.pvs-faq-item + .pvs-faq-item { margin-top: 8px; }
.pvs-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 0 0 8px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: #121212;
  cursor: pointer;
}
.pvs-faq-icon {
  flex: 0 0 auto;
  color: var(--pvs-icon, var(--brand-ocean)); /* icon-context safety net */
  font-size: 16px;
  line-height: 1;
  transition: transform var(--transition-standard);
}
.pvs-faq-q[aria-expanded="true"] .pvs-faq-icon { transform: rotate(45deg); }
.pvs-faq-a {
  padding: 4px 32px 12px 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #383838;
}
.pvs-faq-a p { margin: 0; }
.pvs-faq-a a { color: var(--brand-ocean); font-weight: 600; }
.pvs-faq-a a:is(:hover, :focus) { color: var(--brand-rose); }
/* ========== END PVS FAQ ========== */


/* ========== PVS TRUST / WHY TRUST US ========== */
.pvs-trust {
  background: linear-gradient(85.37deg, var(--brand-ocean) 0.29%, var(--brand-midnight) 99.71%);
  padding-top: clamp(3rem, 5vw, 5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.pvs-trust-heading {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
  line-height: 1.2;
  text-transform: none;
  margin: 8px 0 0;
}
.pvs-trust-items {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: 30px;
}
.pvs-trust-item { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.875rem); }
.pvs-trust-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: #fff;
}

/* Small hexagon badge: periwinkle frame -> white-crest band -> periwinkle center -> ocean icon */
.pvs-trust-badge {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  aspect-ratio: 72 / 78;
}
.pvs-trust-badge-frame,
.pvs-trust-badge-ring,
.pvs-trust-badge-inner {
  position: absolute;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.pvs-trust-badge-frame { inset: 0; background: var(--brand-periwinkle); }
.pvs-trust-badge-ring { inset: 7%; background: var(--brand-white-crest); }
.pvs-trust-badge-inner {
  inset: 18%;
  background: var(--brand-periwinkle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pvs-trust-badge-inner i { color: var(--brand-ocean); font-size: 20px; line-height: 1; }

/* Story + CTAs */
.pvs-trust-story p {
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 1rem;
}
.pvs-trust-story p:last-child { margin-bottom: 0; }
.pvs-trust-ctas { margin-top: 32px; }
/* ========== END PVS TRUST / WHY TRUST US ========== */


/* ========== PVS FOOTER ========== */
.pvs-footer { background: var(--brand-midnight); }
.pvs-footer > .container {
  padding-top: clamp(2.5rem, 5vw, 3.75rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
}
.pvs-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
  text-decoration: none;
}
.pvs-footer-hex { width: auto; height: 96px; }
.pvs-footer-name { width: auto; height: 30px; filter: brightness(0) invert(1); }
.pvs-footer-tagline { width: auto; height: 22px; filter: brightness(0) invert(1); }

.pvs-footer-heading {
  color: var(--brand-rose);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  text-transform: none;
  margin: 0 0 12px;
}
.pvs-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pvs-footer-link {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #fff;
  text-decoration: none;
  transition: color var(--transition-standard);
}
.pvs-footer-link:is(:hover, :focus) { color: var(--brand-periwinkle); }

.pvs-footer-contact { display: flex; flex-direction: column; gap: 8px; }
.pvs-footer-contact-item { display: flex; flex-direction: column; gap: 4px; }
.pvs-footer-contact-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.125rem;
  color: #fff;
  margin: 0;
}
.pvs-footer-address {
  font-style: normal;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5rem;
  margin: 0;
}
/* ========== END PVS FOOTER ========== */


/* ========== HERO ========== */
.pvs-hero-intro {
  background: var(--color-gray-200);
  width: 100%;
  height: fit-content;
  background-size: cover;
  background-position: center;
  padding-top: 6rem;
  padding-bottom: 0;
}


















/* Sub Page Hero — image background */




/* Home Hero Background — mobile-first (800×600) */
.pvs-hero-intro { background-image: url('../img/pvs-hero-800-600.webp'); }

/* Sub-page callout icon — circular badge (replaces inline style) */


/* Hero Background Images — tablets (1200×800) */
@media (min-width: 801px) {
  .pvs-hero-intro { background-image: url('../img/pvs-hero-1200-800.webp'); }
}

/* Hero Background Images — desktops (2560×1000) */
@media (min-width: 1201px) {
  .pvs-hero-intro { background-image: url('../img/pvs-hero-2560-1000.webp'); }
}

/* ========== END HERO ========== */


/* ========== OPENING CONTENT ========== */








/* Opening section (Figma 30066:1792) — heading + copy + contact form + trust badges */


/* Form card — steel-grey bg with navy offset border via box-shadow */




/* Shared form input skin (used by short-form.php) */


/* Advantage badge — <fa-stack shape="square" size="lg"> renders .icon-stacked.lg.square
   Default: electric-highlight square bg + navy icon. Hover: colors swap. */








/* Sub-page Why Us — read more / read less toggle */


/* Sub-page Service Areas — pin cards on dark bg with expandable descriptions */


/* ========== END OPENING CONTENT ========== */


/* ========== SERVICES SECTION ========== */


/* Services section wrapper */



/* Left col — vertical nav tabs */


/* Right col — image + icon badge */


/* Right col — content panel */


/* Right col — accordion (flat, navy bottom-border, plus/minus) */


/* CTA dropdown — sub-page picker under Explore button */


/* ========== END SERVICES SECTION ========== */


/* ========== FINANCING ========== */


/* Shared finance + maintenance block styling */


/* Benefit cards (shared by both blocks) */


/* Apply-button brand prefix (Wells Fargo / GreenSky) */


/* ========== END FINANCING ========== */


/* ========== ABOUT US ========== */


/* Infinite-scroll ticker */
@keyframes reliable-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


.pvs-about-reliable-track {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
  animation: reliable-scroll 60s linear infinite;
  will-change: transform;
  font-family: var(--font-manifold-extended-cf);
  font-weight: var(--font-weight-heavy);
  font-size: clamp(2.5rem, 4vw, 4rem);
  line-height: 1.125;
  text-transform: uppercase;
}


.pvs-about-reliable-track span     { color: var(--color-gray-50); }


/* Accolade card sits above the decorative curl */


/* Decorative navy curl — bottom-right corner (Figma node 30066:2291). */


/* Decorative navy-hover curl — transitions service-area section into navy-hover CTA */

/* ========== END ABOUT US ========== */


/* ========== MAINTENANCE PLAN ========== */


/* ========== END MAINTENANCE PLAN ========== */


/* ========== SERVICE AREA ========== */







/* New Service Area block (Figma 30066:2413) */


/* City location cards */


/* Don't-see-your-location callout */


/* Map image */

/* ========== END SERVICE AREA ========== */


/* ========== FAQS (HOME) ========== */


/* Flat accordion — bottom-border only, no bg, no rounded corners */
.pvs-faqs .accordion-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-gray-400);
  border-radius: 0;
  margin-bottom: 0.5rem;
}

.pvs-faqs .accordion-button,
.pvs-faqs .accordion-button:not(.collapsed) {
  background: transparent;
  color: var(--color-reliable-navy);
  font-family: var(--font-inter);
  font-weight: var(--font-weight-semibold);
  font-size: 1.125rem;
  line-height: 1.444;
  padding: 0.5rem 0;
  box-shadow: none;
  border-radius: 0;
}

.pvs-faqs .accordion-button::after { display: none; }

.pvs-faqs .accordion-button .pvs-faqs-plus,
.pvs-faqs .accordion-button .pvs-faqs-minus {
  color: var(--color-steel-grey);
  font-size: 1rem;
  margin-left: auto;
  flex-shrink: 0;
  transition: color var(--transition-standard);
}

.pvs-faqs .accordion-button:hover .pvs-faqs-plus,
.pvs-faqs .accordion-button:hover .pvs-faqs-minus,
.pvs-faqs .accordion-button:not(.collapsed) .pvs-faqs-minus {
  color: var(--color-reliable-navy);
}

.pvs-faqs .accordion-button .pvs-faqs-minus { display: none; }
.pvs-faqs .accordion-button:not(.collapsed) .pvs-faqs-plus  { display: none; }
.pvs-faqs .accordion-button:not(.collapsed) .pvs-faqs-minus { display: inline-block; }

.pvs-faqs .accordion-body {
  padding: 0.25rem 0 1rem;
  color: var(--color-00dp);
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: 1.5;
}

.pvs-faqs .accordion-body a {
  color: var(--color-reliable-navy);
  text-decoration: underline;
}

.pvs-faqs .accordion-body a:hover {
  color: var(--color-reliable-navy-hover);
}
/* ========== END FAQS (HOME) ========== */


/* ========== FAQ ========== */


/* ========== END FAQ ========== */


/* ========== BUTTONS ========== */
.btn {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-family: var(--font-manifold-cf);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  border-radius: 0;
  margin-bottom: 0.5rem;
}




/* Reliable Navy */
.btn-reliable-navy {
  color: var(--color-white);
  background: var(--color-reliable-navy);
  border-color: var(--color-reliable-navy);
}
.btn-reliable-navy:is(:hover, :focus, :active) {
  color: var(--color-white);
  background: var(--color-reliable-navy-hover);
  border-color: var(--color-reliable-navy);
}



/* Slate */





/* Electric Highlight (light mint — navy text for contrast) */
.btn-electric-highlight {
  color: var(--color-reliable-navy);
  background: var(--color-electric-highlight);
  border-color: var(--color-electric-highlight);
}
.btn-electric-highlight:is(:hover, :focus, :active) {
  color: var(--color-reliable-navy);
  background: var(--color-electric-highlight-hover);
  border-color: var(--color-electric-highlight);
}



/* White */





/* 00dp (Dark) */




/* ========== END BUTTONS ========== */


/* ========== COLOR UTILITIES ========== */

/* Reliable Navy */





/* Slate */




/* Steel Grey */




/* Electric Highlight */
.text-electric-highlight { color: var(--color-electric-highlight); }



/* Brand Gradients */



/* White / Black */

.bg-white { background-color: var(--color-white); }





/* Gray 50 */

.bg-gray-50 { background-color: var(--color-gray-50); }


/* Gray 500 */




/* Gray 100 */




/* Gray 700 */




/* Dark Mode */




/* Misc Utilities */
.text-666 { color: #666666; }
/* ========== END COLOR UTILITIES ========== */


/* ========== COMPONENTS ========== */

/* Images */


/* Lists, Cards, Tables */









ul li strong {
  color: var(--color-reliable-navy);
}

/* Accordion */
.accordion-button [class*="fa-"] {
  transition: transform 0.3s ease-in-out;
}

.accordion-button:not(.collapsed) [class*="fa-"] {
  transform: rotate(180deg);
}

.accordion-item, .accordion-header, .accordion-button {
  background: transparent;
  border: none;
  color: var(--color-reliable-navy);
}

.accordion-item {
  border-bottom: 0.25px solid var(--color-reliable-navy-hover);
}

.accordion-button { font-size: 1rem; }
.accordion-body { font-size: 0.8rem; }

.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-button,
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion-button:not(.collapsed) {
  color: var(--color-reliable-navy);
  box-shadow: none;
}

.accordion-button::after {
  display: none !important;
}

/* Accordion Icon Toggle — collapsed: show plus, hide minus */




/* Accordion Icon Toggle — expanded: show minus, hide plus */




/* Icon Stacked */
.icon-stacked {
  display: inline-flex;
  position: relative;
  width: 2em;
  height: 2em;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 50%;
  transition: box-shadow var(--transition-standard);
  color: var(--color-white);
}

.icon-stacked::before {
  font-family: "Font Awesome 7 Sharp";
  font-weight: 900;
  content: "\f111";
  font-size: 2em;
  position: absolute;
  line-height: 1;
  color: var(--color-reliable-navy);
}

.icon-stacked > i,
.icon-stacked > svg {
  position: relative;
  z-index: 1;
  font-size: 1em;
}

/* Light base */
.icon-stacked.light-base {
  color: var(--color-reliable-navy);
}

.icon-stacked.light-base::before {
  color: var(--color-white);
}

/* Square shape — swaps fa-circle backdrop for fa-square */
.icon-stacked.square {
  border-radius: 0;
}

.icon-stacked.square::before {
  content: "\f0c8"; /* fa-square */
}

/* Sizes */
.icon-stacked.xs  { font-size: 0.5rem; }
.icon-stacked.sm  { font-size: 0.75rem; }
.icon-stacked.md  { font-size: 1rem; }
.icon-stacked.lg  { font-size: 1.5rem; }
.icon-stacked.xl  { font-size: 2rem; }
.icon-stacked.xxl { font-size: 3rem; }

.icon-stacked.shadow::before {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}


.icon-stacked.hoverable {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.icon-stacked.hoverable:hover {
  transform: scale(1.1);
}

.icon-stacked.hoverable:active {
  transform: scale(0.95);
}



/* ========== END COMPONENTS ========== */

/* ========== LINK UTILITIES ========== */
em, u {
  font-style: inherit !important;
  text-decoration: inherit !important;
}

a { text-decoration: none; }


/* Brand Links */












/* Generic Links */



/* Neutral Links */






/* Dark Mode Links */




[id] {
  scroll-margin-top: 200px; /* based on menu height */
}


/* ========== FOOTER ========== */


.pvs-footer-copyright {
  margin-top: 5rem;
}

@media (max-width: 991.98px) {
  
  
  .pvs-footer-copyright { margin-top: 3rem; }
}
/* ========== END FOOTER ========== */


/* ========== MEDIA QUERIES ========== */

/* --- Large Desktop Down (max-width: 1400px) --- */
@media (max-width: 1400px) {
  .navbar-nav .nav-link { font-size: 0.85rem; }

}

/* --- Tablet / Mobile (max-width: 1200px) --- */
@media (max-width: 1200px) {
  .pvs-hero-intro {
    padding-bottom:0;
  }
  /* Mobile nav bar: white bg with navy bottom border */
  

  /* Menu */
  
  

  /* Mobile button bar gradient */
  

  .navbar-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* legacy center removed — floated offcanvas links mid-panel */
    height: fit-content;
    transition: height var(--transition-standard);
  }

  .menu-container .navbar-nav .nav-link {
    color: var(--color-black);
  }

  .shrink-menu .navbar-nav {
    height: fit-content;
  }

  .navbar-nav .nav-link { font-size: 1.25rem; }

  

  /* Dropend override — angle-down instead of angle-right on mobile */
  


  /* Logo */
  

  
}

/* --- Medium Screens (max-width: 991px) --- */
/* (legacy .navbar-nav .nav-link 1.35rem bump removed — it inflated the offcanvas links
   past their designed 1rem and made "Heating & Cooling" / "Financing Options" wrap) */

/* --- Extra Small Mobile (max-width: 450px) --- */
@media (max-width: 450px) {
  /* Logo */
  

  
  
}


/* ========== TRUST SIGNALS (CONCLUDING BLOCK) ========== */


.pvs-trust-card {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  background-color: var(--color-reliable-navy);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem;
  padding-bottom: 5rem;
  color: var(--color-white);
  height: 100%;
  cursor: pointer;
  transition: background-color var(--transition-standard);
}

/* Industrial-fade gradient (Slate → Navy) that eases in on expand */
.pvs-trust-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--color-slate) 0%, var(--color-reliable-navy) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

.pvs-trust-card.is-expanded::before { opacity: 1; }


.pvs-trust-card-toggle {
  position: absolute;
  left: 1.25rem;
  bottom: 0;
  z-index: 4;
  width: 48px;
  height: 48px;
  background-color: var(--color-reliable-navy);
  color: var(--color-electric-highlight);
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-standard);
}

.pvs-trust-card-toggle:is(:hover, :focus-visible) {
  background-color: var(--color-electric-highlight);
  color: var(--color-reliable-navy);
}


/* Expanded state */


.pvs-trust-card.is-expanded { justify-content: flex-start; }

.pvs-trust-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: color var(--transition-standard);
}

.pvs-trust-card-link:is(:hover, :focus-visible) {
  color: var(--color-white);
}


/* ========== END TRUST SIGNALS ========== */


/* ========== SUB-PAGE TEMPLATE ========== */

/* --- Breadcrumbs --- */










/* --- Sub-page section vertical rhythm --- */


/* Services Hub cards on service-index pages — same visual language as Why-Choose */


/* Why-Choose cards reuse .pvs-advantage-card but are informational, not clickable */


/* --- Related services list (FORM-SECTION column) --- */




/* WCAG: chevron icons render on white body — pale cyan fails contrast.
   Scope override so .text-electric-highlight inside this list reads navy. */


/* Exception: inside a navy button, .text-electric-highlight stays pale cyan —
   the navy bg gives it 7.41:1 contrast, and this protects icon arrows from
   any broader override that recolors electric-highlight on light surfaces. */
.btn-reliable-navy .text-electric-highlight {
  color: var(--color-electric-highlight);
}





/* --- Process step bullet list (inside Process tab panes) --- */


/* --- Shared card shell for Areas and Other-Services cards --- */







/* --- Final CTA (dark split) --- */


/* Lift service-area container above the decorative curl */


/* Related Services cards — tighter padding and icon shift on hover */






/* ========== END SUB-PAGE TEMPLATE ========== */


/* ========== WCAG AA CONTRAST GUARDS ==========
   --color-electric-highlight (#9CEDEA) and its hover (#b6f1ef)
   fail 4.5:1 against every light surface in the palette
   (white, subtle-navy, gray-50…gray-700, steel-grey,
   steel-grey-hover, slate-hover). Within those parents, swap
   .text-electric-highlight / .border-electric-highlight
   utility children to reliable-navy so foreground stays
   readable. Existing exception at .btn-reliable-navy keeps
   electric-highlight on dark surfaces. */
/* Parent classes wrapped in :where() so this override sits at
   specificity (0,1,0). That keeps the .btn-reliable-navy
   .text-electric-highlight exception above (0,1,1) — and any
   .btn-* color modifier — winning over this rule, so icons
   inside dark buttons are never recolored. */


/* ========== END WCAG AA CONTRAST GUARDS ========== */


/* ========== DEFAULT LINK COLOR BY PARENT BG ==========
   Anchors with no color rule inherit the right contrast pair
   from their nearest bg-bearing ancestor. :where() keeps
   specificity at (0,0,1), so any class on the link itself
   (e.g. .link-electric-highlight, .btn-*) wins automatically. */

/* Light surfaces — navy text. body is included as the site-wide default
   (body bg is white); darker bg-* and component classes below override
   via source order, so a bare <a> inside .bg-reliable-navy still wins
   the dark treatment. */


/* Mid surfaces (gray-500/700, slate) — white text, electric on hover */


/* Dark/navy surfaces — electric-highlight text. Includes the
   image-darkened hero and brand component classes that paint navy. */


/* Electric-highlight surface — navy text, slate on hover */


/* ========== END DEFAULT LINK COLOR BY PARENT BG ========== */


/* ========== END MEDIA QUERIES ========== */


/* ========== PVS SUB-PAGE: AC REPAIR (repair-type template) ========== */

/* Shared sub-page section header */
.pvs-section-head { max-width: 760px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.pvs-section-heading {
  color: var(--brand-ocean);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  text-transform: none;
}
.pvs-section-heading--light { color: #fff; }

/* Sub-page hero (gradient) */
.pvs-subhero {
  background: linear-gradient(86.58deg, var(--brand-ocean), var(--brand-midnight));
  padding: clamp(4.5rem, 8vw, 7.5rem) 0 clamp(3rem, 7vw, 6rem);
}
.pvs-subhero-title {
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  line-height: 1.1;
  text-transform: none;
  margin-bottom: 0.5rem;
}
.pvs-subhero-tagline {
  color: var(--brand-periwinkle);
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  margin-bottom: 1rem;
}
.pvs-subhero-body { color: rgba(255, 255, 255, 0.9); font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; }
.pvs-subhero-ctas { gap: 0.75rem; }

/* Section paddings + backgrounds */




/* Mid CTA band (FORM-SECTION) */


.pvs-subcta-body { color: #383838; max-width: 640px; margin: 0.75rem auto 1.25rem; }
/* Left-anchored variant for split layouts (replaces the banned `mx-0` + text-start utilities) */
.pvs-subcta-body--flush { margin-left: 0; margin-right: 0; text-align: left; }





/* Warning-signs cards */
.pvs-warn-card { background: #fff; border-radius: 16px; padding: clamp(1.5rem, 2.5vw, 2rem); box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); }
.pvs-warn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 14px; margin-bottom: 1rem;
  background: var(--brand-ocean); color: #fff; font-size: 1.4rem;
}
.pvs-warn-title { color: var(--brand-midnight); font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; text-transform: none; margin-bottom: 0.6rem; }
.pvs-warn-card p { color: #383838; font-size: 0.95rem; line-height: 1.55; margin: 0; }
.pvs-warn-card > :last-child { margin-bottom: 0; }

/* Process steps (dark band) */


.pvs-process-step { display: flex; gap: 1.25rem; align-items: flex-start; }
.pvs-process-num {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-rose); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem;
}
.pvs-process-title { color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; text-transform: none; margin-bottom: 0.5rem; }
.pvs-process-content > p { color: rgba(255, 255, 255, 0.88); font-size: 0.98rem; line-height: 1.6; }
.pvs-process-points { margin: 0.5rem 0 0; padding-left: 1.1rem; color: var(--brand-periwinkle); }
.pvs-process-points li { margin-bottom: 0.3rem; font-size: 0.92rem; }
/* In-text link color inside the dark process steps comes from the
   link-by-parent-surface system at the end of this file (.pvs-process is a dark surface). */

/* Repair cards */
.pvs-repair-card { background: #fff; border: 1px solid rgba(27, 41, 89, 0.08); border-radius: 16px; padding: clamp(1.4rem, 2.2vw, 1.75rem); display: flex; flex-direction: column; box-shadow: 0 0 8px rgba(0, 0, 0, 0.04); transition: box-shadow var(--transition-standard), transform var(--transition-standard); }
.pvs-repair-card:hover { box-shadow: 0 10px 28px rgba(27, 41, 89, 0.12); transform: translateY(-3px); }
.pvs-repair-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--brand-periwinkle); color: var(--brand-midnight); font-size: 1.25rem; margin-bottom: 0.9rem; }
.pvs-repair-title { color: var(--brand-midnight); font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; text-transform: none; margin-bottom: 0.55rem; }
.pvs-repair-card p { color: #383838; font-size: 0.9rem; line-height: 1.5; }
.pvs-repair-cta { margin-top: auto; padding-top: 0.75rem; color: var(--brand-rose); font-weight: 700; font-size: 0.92rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.pvs-repair-cta:hover { text-decoration: underline; }

/* Related services */
.pvs-related-card { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border-radius: 16px; padding: 1.25rem; text-decoration: none; box-shadow: 0 0 8px rgba(0, 0, 0, 0.05); transition: box-shadow var(--transition-standard), transform var(--transition-standard); }
.pvs-related-card:hover { box-shadow: 0 10px 28px rgba(27, 41, 89, 0.12); transform: translateY(-3px); }
.pvs-related-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-ocean); color: #fff; font-size: 1.25rem; }
.pvs-related-text { color: #383838; font-size: 0.9rem; line-height: 1.5; }
.pvs-related-text strong { display: block; color: var(--brand-ocean); font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; margin-bottom: 0.25rem; }

/* Final CTA band */







/* ========== END PVS SUB-PAGE: AC REPAIR ========== */


/* ========== PVS SUB-PAGE: REUSED HOMEPAGE BLOCKS (service nav + trust strip) ========== */

/* Repair Process as pill-tabs — reuses .pvs-service-tab pills on the dark process band */
.pvs-process-panes { max-width: 880px; margin: 0 auto; }

/* Trust badges strip — light band so the hexagon badges read cleanly */
.pvs-trust-strip { background: var(--pvs-page-bg); padding: clamp(3rem, 6vw, 5rem) 0; }
/* Inside an opener panel the strip is a bare row — no band padding/background.
   (Replaces the banned `p-0` utility + inline style that used to do this.) */
.pvs-trust-strip--in-panel { padding: 0; background: transparent; }
/* Keep all 5 hexagons on ONE row inside the narrower magazine opener panel
   (smaller than the homepage's; still flex-wraps on mobile). */
.pvs-trust-strip .pvs-adv-hex { width: clamp(96px, 11.5vw, 170px); }
.pvs-trust-strip .pvs-adv-hex-inner { padding: 0 9%; gap: 5px; }
.pvs-trust-strip .pvs-adv-label { font-size: clamp(11px, 1vw, 13.5px); line-height: 1.1; }
.pvs-trust-strip .pvs-adv-icon { font-size: clamp(16px, 1.5vw, 22px); }
/* Mobile: at the small clamp floors the labels wrap to 3-4 lines and spill past the
   hexagon's sloped edges into the ring. Bigger hexes + slightly tighter inner padding
   keep every label to <=2 lines inside the safe middle band (rows wrap 2-up). */
@media (max-width: 767.98px) {
  .pvs-adv-hex, .pvs-trust-strip .pvs-adv-hex { width: 150px; }
  .pvs-adv-hex-inner, .pvs-trust-strip .pvs-adv-hex-inner { padding: 0 10%; }
  .pvs-adv-label, .pvs-trust-strip .pvs-adv-label { font-size: 12px; }
}

/* ========== END PVS SUB-PAGE: REUSED HOMEPAGE BLOCKS ========== */


/* ========== PVS CENTERED-CONTAINER MAGAZINE SUB-PAGE ========== */
/* Light page bg; content lives in a centered column of contained rounded panels. */
.pvs-mag { background: var(--pvs-page-bg); }

/* Contained rounded panel — the magazine "card" each section sits in */





/* Full-bleed section bands — break the contained magazine-card flow edge-to-edge.
   The section escapes the .pvs-mag-wrap column; content stays inside a Bootstrap .container,
   only the background bleeds to the viewport edges. */
.pvs-band { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.pvs-band--white { background: #fff; }
.pvs-band--tint  { background: color-mix(in srgb, var(--brand-periwinkle) 15%, #fff); }
.pvs-band--dark  { background: var(--gradient-nighttime); }
.pvs-band--periwinkle { background: var(--brand-periwinkle); }

.pvs-band .pvs-section-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* Centered hero variant (page header — no form). Extra top padding so the centered
   overline/H1 clears the nav's hanging hexagon logo. */




/* Split variant — text over the base blue gradient; a wide condenser photo (desktop only)
   masked to dissolve into the blue on its left; a hexagon frame that recenters:
   over the image on desktop, behind the text as a watermark on mobile. */
.pvs-subhero--split { position: relative; overflow: hidden; padding: 0; min-height: 420px; }
.pvs-subhero-inner {
  position: relative;
  z-index: 2;                 /* text always above the photo + hexagon */
  /* generous top clearance so the text sits well below the fixed nav + its overhanging logo */
  padding-top: clamp(8rem, 11.5vw, 12rem);
  padding-bottom: clamp(3rem, 5vw, 4rem);
}
.pvs-subhero--split .pvs-subhero-content { max-width: 640px; }
.pvs-subhero--split .pvs-subhero-body { max-width: 600px; }
.pvs-subhero--split .pvs-subhero-ctas .pvs-btn--ocean { border: 1.5px solid rgba(145, 187, 245, 0.55); }

/* accreditation row — Heil badge + Google reviews on white chips so they read on the dark hero */
.pvs-subhero-accred { gap: 14px; margin-bottom: clamp(1.25rem, 2.6vw, 1.75rem); }
.pvs-subhero-badge-chip { display: inline-flex; align-items: center; background: #fff; border-radius: 10px; padding: 7px 12px; }
.pvs-subhero-badge { height: 40px; width: auto; display: block; }
.pvs-subhero-reviews { gap: 10px; background: #fff; border-radius: 10px; padding: 7px 12px; text-decoration: none; }
.pvs-subhero-google { width: 26px; height: 26px; }
.pvs-subhero-reviews-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pvs-subhero-stars { display: inline-flex; gap: 2px; color: var(--brand-rose); font-size: 14px; line-height: 1; }
.pvs-subhero-reviews-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 1;
  color: var(--brand-midnight);
}

/* below xl the image is gone — center the text + CTAs over the hexagon watermark */
@media (max-width: 1199.98px) {
  .pvs-subhero--split .pvs-subhero-content { margin-left: auto; margin-right: auto; text-align: center; }
  .pvs-subhero--split .pvs-subhero-body { margin-left: auto; margin-right: auto; }
  .pvs-subhero--split .pvs-subhero-accred { justify-content: center; }
  .pvs-subhero--split .pvs-subhero-ctas { justify-content: center; }
}

/* Sub-page hero photo — full-bleed on the right; masked to fade left into the section gradient.
   PER PAGE: set --subhero-photo (image url) and optionally --subhero-photo-pos (focal point) on
   the `.pvs-subhero--split` <section>. The panel fades on its LEFT, so the image subject should
   sit toward the RIGHT of the photo (flip the source if the subject is on the left). Desktop-only. */
.pvs-subhero-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  z-index: 0;
  display: none;              /* desktop only (see >=1200 below) */
  background-image:
    linear-gradient(90deg, rgba(27, 41, 89, 0.4) 0%, rgba(27, 41, 89, 0.12) 100%),
    var(--subhero-photo, url('/img/pvs-hero-ac-condenser-1400.webp'));
  background-size: cover;
  background-position: var(--subhero-photo-pos, center);
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
          mask-image: linear-gradient(to right, transparent 0%, #000 42%);
}

/* hexagon — mobile: centered watermark behind the text; desktop: over the image, a bit wider than it */
.pvs-subhero-hex {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(540px, 92%);
  aspect-ratio: 1087 / 1053;
  pointer-events: none;
  opacity: 0.55;              /* subtle behind the text on mobile */
}
.pvs-subhero-hex-border {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* light-variant SVG already reads full over dark + photo; just a soft shadow for edge depth */
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.4));
}
@media (min-width: 1200px) {
  .pvs-subhero--split { min-height: 520px; }
  .pvs-subhero-photo { display: block; }
  .pvs-subhero-hex {
    left: 75%;                /* centered over the right 50% image */
    /* centered + never clipped: cap at the original size (680w = 659h) but shrink on
       shorter heroes so it always fits the VISIBLE band — the fixed nav overlays the
       hero's top ~121px, so the center is nudged down by half that overlay. */
    top: calc(50% + 60px);
    height: min(calc(100% - 160px), 659px);
    width: auto;              /* width follows aspect-ratio from the height */
    opacity: 0.8;
  }
}

/* Crumbs — breadcrumb / family quick-nav strip directly below the sub-page hero, left-aligned */
.pvs-crumbs { background: #fff; border-bottom: 1px solid var(--color-gray-100); padding: 0.65rem 0; }
.pvs-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; }
.pvs-crumbs li { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; }
.pvs-crumbs li + li::before { content: "/"; color: var(--color-gray-400); margin: 0 0.65rem; }
.pvs-crumbs a { color: var(--brand-ocean); text-decoration: none; }
.pvs-crumbs a:is(:hover, :focus-visible) { text-decoration: underline; }
.pvs-crumbs [aria-current="page"] { color: var(--color-gray-700); }

/* Opener: image + content/form side by side (inside a panel) */
.pvs-opener-img {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 320px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
/* Section content images are responsive <img srcset> (RBMG standard); the img
   fills the box via object-fit, replacing the old inline background-size:cover. */
.pvs-opener-img > img,
.pvs-callout-img > img,
.pvs-closer-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Callout panel — content + image, on a brand gradient */
.pvs-callout { overflow: hidden; }
.pvs-callout-img {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 240px;
}
.pvs-callout-heading { color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); text-transform: none; margin-bottom: 0.75rem; }
.pvs-callout-body { color: rgba(255, 255, 255, 0.9); line-height: 1.6; margin-bottom: 1.25rem; }
/* .pvs-callout always sits on .pvs-panel--dark — link color comes from the
   link-by-parent-surface system at the end of this file. */

/* Closer panel — content + image */
.pvs-closer-img {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 300px;
}

/* Inside the magazine column, neutralize the full-bleed band paddings on reused
   sections so they read as panels (bg + radius come from .pvs-panel wrappers). */


/* ========== END PVS CENTERED-CONTAINER MAGAZINE SUB-PAGE ========== */
/* ==========================================================================
   DEFAULT IN-TEXT LINK COLOR BY PARENT SURFACE (WCAG safety net)
   Each surface publishes --pvs-link / --pvs-link-hover; bare (unclassed) links
   consume the nearest ancestor's pair, so a white card inside a dark band
   correctly flips back to ocean. Component links (nav, footer, cards, buttons)
   carry their own classed rules, which always win — this base is
   zero-specificity via :where(). Keep this block LAST: .pvs-panel--dark must
   out-cascade .pvs-panel on the same element.
   ========================================================================== */
/* Light surfaces — page default, white panels/bands + light cards that can nest in dark bands */
:where(body, .pvs-panel, .pvs-band--white, .pvs-band--tint,
       .pvs-svc-card, .pvs-svc-card-hover, .pvs-warn-card, .pvs-repair-card,
       .pvs-related-card, .pvs-sub-related-card, .pvs-team-card, .pvs-faq,
       .pvs-contact-form-card, .pvs-mega-dropdown-row) {
  --pvs-link: var(--brand-ocean);
  --pvs-link-hover: var(--brand-midnight);
  --pvs-icon: var(--brand-ocean);
}
/* Periwinkle panels are LIGHT blue (#91BBF5): white fails (~2:1) and ocean (~3.4:1) — midnight holds 7:1 */
:where(.pvs-panel--periwinkle, .pvs-band--periwinkle) {
  --pvs-link: var(--brand-midnight);
  --pvs-link-hover: var(--brand-midnight);
  --pvs-icon: var(--brand-midnight);
}
/* Dark blue surfaces — white with underline (worst-case gradient stop = solid ocean #415496) */
:where(.pvs-panel--dark, .pvs-panel--ocean, .pvs-band--dark, .pvs-band--ocean, .pvs-subhero, .pvs-process, .pvs-cta-final,
       .pvs-mf-card, .pvs-mf-panel, .pvs-sa, .pvs-sa-callout, .pvs-trust,
       .pvs-footer, .pvs-subnav, .pvs-offcanvas) {
  --pvs-link: var(--color-white);
  --pvs-link-hover: var(--color-gray-100);
  --pvs-icon: var(--color-white);
}
/* Bare in-text links — underlined site-wide so links never rely on color alone */
a:where(:not([class])) {
  color: var(--pvs-link, var(--brand-ocean));
  text-decoration: underline;
}
a:where(:not([class])):where(:hover, :focus-visible) {
  color: var(--pvs-link-hover, var(--brand-midnight));
}
/* Image-only anchors (logo/credit marks) — suppress the underline stub under the image */
a:where(:not([class])):has(img) { text-decoration: none; }

/* Card/footer last-line flushing — zero-value utilities (mb-0 etc.) are banned in markup */

.pvs-footer-copyright { margin-bottom: 0; }