/* ===================================================
   METCALF PLUMBING — STYLES
   =================================================== */

/* ===================================================
   RESET & BASE
   =================================================== */
* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: clip;
  /* Reserves the scrollbar's gutter permanently so vw-based full-bleed blocks
     (WordPress core's own alignfull CSS, used throughout this theme) don't
     recompute width each time an overlay scrollbar shows/hides during scroll. */
  scrollbar-gutter: stable;
  /* scroll-behavior is set (with reduced-motion handling) in the Premium Polish section */
}

body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; }

/* (::selection lives in the Premium Polish section below — single source) */

/* ===================================================
   :::SECTION:Animations — Keyframes:::
   =================================================== */

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes accentLineGrow {
  from { width: 0; }
  to { width: 60px; }
}

@keyframes mobilePanelIn {
  from { opacity: 0.92; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* One-pass diagonal sheen sweep (hover flourish) */
@keyframes sheenSweep {
  0%   { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(220%) skewX(-18deg); }
}

/* ===================================================
   :::SECTION:Scroll Animations — Base:::
   =================================================== */

.animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

.js .animate-on-scroll:not(.is-visible) {
  opacity: 0;
  transform: translateY(30px);
}

.js .animate-on-scroll {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  filter: blur(0);
}

/* Staggered children delays */
.js .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.js .animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.js .animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }
.js .animate-on-scroll:nth-child(5) { transition-delay: 0.4s; }
.js .animate-on-scroll:nth-child(6) { transition-delay: 0.5s; }
.js .animate-on-scroll:nth-child(7) { transition-delay: 0.6s; }
.js .animate-on-scroll:nth-child(8) { transition-delay: 0.7s; }
.js .animate-on-scroll:nth-child(9) { transition-delay: 0.8s; }
.js .animate-on-scroll:nth-child(10) { transition-delay: 0.9s; }

/* ===================================================
   :::SECTION:Scroll Animations — Directional Variants:::
   =================================================== */

/* Fade-in-left */
.js .animate-on-scroll[data-animation="fade-left"]:not(.is-visible),
.js .animate-on-scroll.animate-from-left:not(.is-visible) {
  opacity: 0;
  transform: translateX(-40px);
}

/* Fade-in-right */
.js .animate-on-scroll[data-animation="fade-right"]:not(.is-visible),
.js .animate-on-scroll.animate-from-right:not(.is-visible) {
  opacity: 0;
  transform: translateX(40px);
}

/* Scale-in (cards) */
.js .animate-on-scroll[data-animation="scale-in"]:not(.is-visible),
.js .animate-on-scroll.animate-scale:not(.is-visible) {
  opacity: 0;
  transform: scale(0.92);
}

/* Blur-to-sharp (images) */
.js .animate-on-scroll[data-animation="blur-in"]:not(.is-visible) {
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.02);
}

/* Staggered children — parent triggers children animations */
.js .stagger-children > *:not(.is-visible) {
  opacity: 0;
  transform: translateY(20px);
}

.js .stagger-children > * {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .stagger-children.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.js .stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.js .stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.js .stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.js .stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.js .stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
.js .stagger-children.is-visible > *:nth-child(7) { transition-delay: 0.47s; }
.js .stagger-children.is-visible > *:nth-child(8) { transition-delay: 0.54s; }

.js .stagger-children.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================
   :::SECTION:Shared Components:::
   =================================================== */

.section-eyebrow {
  font-size: clamp(0.82rem, 0.78rem + 0.14vw, 0.95rem);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--accent-1);
  margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-post-content p[style*="text-transform:uppercase"][style*="letter-spacing"] {
  font-size: clamp(0.82rem, 0.78rem + 0.14vw, 0.95rem) !important;
  font-weight: 700 !important;
}

.section-title {
  font-family: var(--wp--preset--font-family--bodoni-moda);
  font-size: var(--wp--preset--font-size--huge);
  font-weight: 700;
  line-height: 1.1;
  color: var(--wp--preset--color--contrast);
  margin-bottom: var(--wp--preset--spacing--30);
}

.section-subtitle {
  font-size: var(--wp--preset--font-size--lg);
  color: var(--wp--preset--color--contrast-2);
  max-width: 560px;
  line-height: 1.7;
}

/* ===================================================
   :::SECTION:Button Enhancements:::
   =================================================== */

.btn-secondary {
  display: inline-block;
  background: linear-gradient(135deg, var(--wp--preset--color--accent-1) 0%, var(--wp--preset--color--accent-2) 100%);
  color: var(--wp--preset--color--base-4);
  text-decoration: none;
  padding: 0.875rem var(--wp--preset--spacing--40);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  border-radius: 6px;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(27, 94, 32, 0.2);
  position: relative;
  overflow: hidden;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--wp--preset--color--accent-2) 0%, var(--wp--preset--color--accent-1) 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(27, 94, 32, 0.3);
}

.btn-secondary:active {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(27, 94, 32, 0.25);
}

/* Primary button — WP button blocks */
.wp-block-button__link {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  position: relative;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.wp-block-button__link:active {
  transform: translateY(0);
}

/* Outline button — animated border fill */
.wp-block-button.is-style-outline .wp-block-button__link {
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease,
              transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base-4);
  border-color: var(--wp--preset--color--accent-1);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(27, 94, 32, 0.2);
}

/* ===================================================
   :::SECTION:Hero Section Enhancements:::
   =================================================== */

/* Parallax-lite for cover blocks used as heroes */
.wp-block-cover.hero-parallax {
  background-attachment: fixed;
}

.wp-block-cover.hero-parallax .wp-block-cover__image-background,
.wp-block-cover.hero-parallax video.wp-block-cover__video-background {
  will-change: transform;
}

/* Gradient overlay — bottom fade to theme color */
.wp-block-cover::after,
.hero-gradient-overlay::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, var(--wp--preset--color--base) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

.hero-gradient-overlay::after {
  opacity: 1;
}

/* Hero heading legibility */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover .wp-block-heading {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Disable parallax on touch / small screens */
@media (max-width: 1024px) {
  .wp-block-cover.hero-parallax {
    background-attachment: scroll;
  }
}

/* ===================================================
   :::SECTION:Card Hover Effects:::
   =================================================== */

/* Service card base */
.service-card,
.card-lift {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease;
  will-change: transform;
}

.wp-block-post-content .service-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 42%),
    var(--wp--preset--color--base-4);
}

.wp-block-post-content .service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(27, 94, 32, 0.08);
}

.service-card:hover,
.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06);
}

/* Cards with existing shadow */
[class*="has-shadow"],
.wp-block-group[style*="box-shadow"] {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

[class*="has-shadow"]:hover,
.wp-block-group[style*="box-shadow"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Image zoom inside cards */
.service-card .wp-block-image,
.image-zoom-container {
  overflow: hidden;
  border-radius: 8px;
}

.wp-block-post-content .service-card > .wp-block-image:first-child {
  width: calc(100% + 4rem);
  max-width: none;
  margin: 0 -2rem var(--wp--preset--spacing--30) !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: 0 14px 30px rgba(28, 28, 26, 0.08);
}

.service-card .wp-block-image img,
.image-zoom-container img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.wp-block-post-content .service-card > .wp-block-image:first-child img {
  width: 100%;
  min-height: 100%;
}

.service-card:hover .wp-block-image img,
.image-zoom-container:hover img {
  transform: scale(1.05);
}

/* Border-color transition on card hover */
.service-card {
  border: 1px solid transparent;
}

.service-card:hover {
  border-color: var(--wp--preset--color--accent-1);
}

.wp-block-post-content .service-card > p.has-accent-1-color:last-child {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 38px;
  margin-top: auto;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: rgba(27, 94, 32, 0.08);
  color: var(--wp--preset--color--accent-1) !important;
  line-height: 1.1 !important;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.wp-block-post-content .service-card:hover > p.has-accent-1-color:last-child {
  background: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base-4) !important;
  transform: translateX(2px);
}

/* The "View Service →" text is a plain <a> inside the pill above, not the pill
   element itself — `color: inherit` (styles.css line 32) should have picked up
   the pill's hover-state white, but something with higher priority keeps
   pinning the link to accent-1 green regardless, leaving it invisible against
   the pill's own solid-green hover background. Targeting the link directly
   settles it without needing to track down the competing rule. */
.wp-block-post-content .service-card:hover > p.has-accent-1-color:last-child a {
  color: var(--wp--preset--color--base-4) !important;
}

/* ===================================================
   :::SECTION:Section Transitions — Diagonal Dividers:::
   =================================================== */

.section-divider-top {
  position: relative;
}

.section-divider-top::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--wp--preset--color--base);
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);
  z-index: 2;
  pointer-events: none;
}

.section-divider-bottom {
  position: relative;
}

.section-divider-bottom::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--wp--preset--color--base);
  clip-path: polygon(0 100%, 100% 0%, 100% 100%);
  z-index: 2;
  pointer-events: none;
}

/* Wave SVG divider variant */
.section-wave-top {
  position: relative;
}

.section-wave-top::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23F5F0E8' d='M0,0 C360,60 1080,60 1440,0 L1440,0 L0,0 Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
}

.section-wave-bottom {
  position: relative;
}

.section-wave-bottom::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23F5F0E8' d='M0,60 C360,0 1080,0 1440,60 L1440,60 L0,60 Z'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
  pointer-events: none;
}

/* ===================================================
   :::SECTION:Image Treatments:::
   =================================================== */

/* Column images — subtle border-radius + hover shadow */
.wp-block-column .wp-block-image img {
  border-radius: 12px;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.wp-block-column .wp-block-image img:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Decorative accent corner — accent-1 border-left on featured images */
.accent-image-border {
  position: relative;
  padding-left: 8px;
}

.accent-image-border::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 4px;
  height: calc(100% - 24px);
  background: var(--wp--preset--color--accent-1);
  border-radius: 2px;
}

/* Top-left corner accent */
.accent-image-corner {
  position: relative;
}

.accent-image-corner::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  width: 40px;
  height: 40px;
  border-top: 3px solid var(--wp--preset--color--accent-1);
  border-left: 3px solid var(--wp--preset--color--accent-1);
  border-radius: 4px 0 0 0;
  z-index: 1;
  pointer-events: none;
}

.accent-image-corner::after {
  content: '';
  position: absolute;
  bottom: -6px;
  right: -6px;
  width: 40px;
  height: 40px;
  border-bottom: 3px solid var(--wp--preset--color--accent-1);
  border-right: 3px solid var(--wp--preset--color--accent-1);
  border-radius: 0 0 4px 0;
  z-index: 1;
  pointer-events: none;
}

/* ===================================================
   :::SECTION:Typography Polish:::
   =================================================== */

/* Letter-spacing adjustments per heading size */
h1, .has-huge-font-size, .has-xx-large-font-size {
  letter-spacing: -0.02em;
}

h2, .has-x-large-font-size {
  letter-spacing: -0.015em;
}

h3, .has-large-font-size {
  letter-spacing: -0.01em;
}

h4, h5, h6 {
  letter-spacing: 0;
}

/* Decorative accent line under section headings */
.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--wp--preset--color--accent-1);
  margin-top: 16px;
  border-radius: 2px;
}

.section-title.has-text-align-center::after {
  margin-left: auto;
  margin-right: auto;
}

/* Accent line animation on scroll */
.js .animate-on-scroll.section-title.is-visible::after {
  animation: accentLineGrow 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

/* Pull-quote / testimonial styling */
.wp-block-pullquote,
.testimonial-quote {
  border-left: 4px solid var(--wp--preset--color--accent-1);
  padding: 1.5rem 2rem;
  position: relative;
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.7;
}

.wp-block-pullquote::before,
.testimonial-quote::before {
  content: '\201C';
  font-family: var(--wp--preset--font-family--bodoni-moda), Georgia, serif;
  font-size: 4rem;
  color: var(--wp--preset--color--accent-1);
  opacity: 0.2;
  position: absolute;
  top: -10px;
  left: 12px;
  line-height: 1;
  pointer-events: none;
}

.wp-block-pullquote cite,
.testimonial-quote cite {
  font-style: normal;
  font-weight: 600;
  font-size: 0.875em;
  color: var(--wp--preset--color--accent-2);
  display: block;
  margin-top: 0.75rem;
}

/* ===================================================
   :::SECTION:Utility Classes:::
   =================================================== */

/* Accent border left */
.accent-border-left {
  border-left: 4px solid var(--wp--preset--color--accent-1);
  padding-left: 1.25rem;
}

/* Image zoom container */
.image-zoom-container {
  overflow: hidden;
  border-radius: 12px;
}

.image-zoom-container img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.image-zoom-container:hover img {
  transform: scale(1.05);
}

/* Gradient overlay for cover blocks */
.gradient-overlay {
  position: relative;
}

.gradient-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(28, 28, 26, 0) 30%, rgba(28, 28, 26, 0.85) 100%);
  pointer-events: none;
  z-index: 1;
}

.gradient-overlay > * {
  position: relative;
  z-index: 2;
}

/* Bento grid layout */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 1.25rem;
}

.bento-grid > *:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.bento-grid > *:nth-child(4) {
  grid-column: span 2;
}

/* Stat number — large Bodoni Moda */
.stat-number {
  font-family: var(--wp--preset--font-family--bodoni-moda), Georgia, serif;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--accent-1);
  letter-spacing: -0.03em;
}

/* Eyebrow text */
.eyebrow-text {
  font-size: clamp(0.82rem, 0.78rem + 0.14vw, 0.95rem);
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--accent-2);
}

/* Card lift — reusable hover effect */
.card-lift {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06);
}

/* ===================================================
   :::SECTION:Colored Section Texture & Atmosphere:::
   ---------------------------------------------------
   Light surfaces are deliberately plain: repeating dots, grids, and diagonal
   stripes made the site read like printed wrapping paper. Saturated section
   bands get one quiet, large-scale SVG drafting motif instead. These inline
   SVGs need no image request, no animation, and have a much lower visual
   frequency than the former 11–28px repeating patterns.
   =================================================== */

:root {
  /* Cream: a single, generous sweep for editorial breathing room. */
  --metcalf-pattern-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='460' viewBox='0 0 760 460'%3E%3Cg fill='none' stroke='%231B5E20' stroke-linecap='round'%3E%3Cpath d='M786 48C607 5 463 47 378 151c-80 99-199 140-397 111' stroke-opacity='.09' stroke-width='1.5'/%3E%3Cpath d='M787 105C629 63 508 96 431 191 349 293 220 329-17 295' stroke-opacity='.055' stroke-width='1.5'/%3E%3Cpath d='M682 268c-86-45-169-37-239 18-74 59-162 70-270 28' stroke-opacity='.065' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  /* Mint: airy orbit marks distinguish soft information bands from cream. */
  --metcalf-pattern-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='400' viewBox='0 0 620 400'%3E%3Cg fill='none' stroke='%231B5E20' stroke-linecap='round'%3E%3Cellipse cx='510' cy='64' rx='168' ry='78' stroke-opacity='.075' stroke-width='1.5' transform='rotate(-22 510 64)'/%3E%3Cellipse cx='510' cy='64' rx='112' ry='50' stroke-opacity='.055' stroke-width='1.5' transform='rotate(-22 510 64)'/%3E%3Cpath d='M322 302c76-49 161-51 255-5' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  /* Sand: simple radiating strokes give callouts a warmer, service-forward lift. */
  --metcalf-pattern-sand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='420' viewBox='0 0 620 420'%3E%3Cg fill='none' stroke='%235E5A52' stroke-linecap='round'%3E%3Cpath d='M-2 391C56 311 126 255 210 218' stroke-opacity='.08' stroke-width='1.5'/%3E%3Cpath d='M-17 332c74-75 151-127 237-158' stroke-opacity='.06' stroke-width='1.5'/%3E%3Cpath d='M-24 274C52 210 127 164 209 139' stroke-opacity='.07' stroke-width='1.5'/%3E%3Cpath d='M26 420c61-65 126-107 200-130' stroke-opacity='.055' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  /* Green: loose contour lines make a calm, crafted corner flourish. */
  --metcalf-pattern-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='440' viewBox='0 0 680 440'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M-70 110C76 8 237 12 340 96c111 90 208 82 410-30' stroke-opacity='.12' stroke-width='1.5'/%3E%3Cpath d='M-62 164c140-92 278-82 375 2 105 90 217 87 439-11' stroke-opacity='.08' stroke-width='1.5'/%3E%3Cpath d='M-54 220c132-82 260-72 357 5 103 82 221 89 452 4' stroke-opacity='.11' stroke-width='1.5'/%3E%3Cpath d='M42 350c102-58 205-49 289 12 81 59 176 60 294 16' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  /* Red: broad offset arcs give offer and CTA bands a warmer, distinct rhythm. */
  --metcalf-pattern-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='420' viewBox='0 0 620 420'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M662 12C502 7 371 91 338 217c-26 100-107 164-254 185' stroke-opacity='.13' stroke-width='1.5'/%3E%3Cpath d='M666 66c-132-4-241 63-273 169-31 103-111 142-237 164' stroke-opacity='.09' stroke-width='1.5'/%3E%3Cpath d='M671 120c-108-2-194 48-224 136-29 85-100 122-189 143' stroke-opacity='.11' stroke-width='1.5'/%3E%3Cpath d='M483 39c-18 39-20 80-5 119' stroke-opacity='.14' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
  /* Dark: quiet editorial strokes retain depth without becoming a grid. */
  --metcalf-pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='440' viewBox='0 0 700 440'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M-40 340C99 276 193 285 288 348c99 66 220 53 452-50' stroke-opacity='.08' stroke-width='1.5'/%3E%3Cpath d='M-42 286c135-57 232-49 327 16 104 70 230 58 460-35' stroke-opacity='.06' stroke-width='1.5'/%3E%3Cpath d='M394 -28c56 78 142 112 271 103' stroke-opacity='.07' stroke-width='1.5'/%3E%3Cpath d='M456 34c42 51 99 75 178 77' stroke-opacity='.10' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* White cards stay plain. Select light section groups get one non-repeating
   corner flourish, so they feel composed rather than patterned. */
.has-base-4-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background) {
  background-image: none;
}

.wp-block-group.has-base-background-color:not(.site-header):not(.site-footer):not(.wp-element-button):not(.wp-block-button__link),
.wp-block-group.has-base-2-background-color:not(.wp-element-button):not(.wp-block-button__link),
.wp-block-group.has-base-3-background-color:not(.wp-element-button):not(.wp-block-button__link) {
  background-repeat: no-repeat;
}

.wp-block-group.has-base-background-color:not(.site-header):not(.site-footer):not(.wp-element-button):not(.wp-block-button__link) {
  background-image: var(--metcalf-pattern-cream);
  background-position: right -185px top -110px;
  background-size: 760px 460px;
}

.wp-block-group.has-base-2-background-color:not(.wp-element-button):not(.wp-block-button__link) {
  background-image: var(--metcalf-pattern-mint);
  background-position: right -95px top -110px;
  background-size: 620px 400px;
}

.wp-block-group.has-base-3-background-color:not(.wp-element-button):not(.wp-block-button__link) {
  background-image: var(--metcalf-pattern-sand);
  background-position: left -85px bottom -115px;
  background-size: 620px 420px;
}

/* Green service bands: two quiet contour corners, never a repeated fill. */
.has-accent-1-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.has-accent-2-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background) {
  background-image: var(--metcalf-pattern-green), var(--metcalf-pattern-green);
  background-position: right -170px top -95px, left -250px bottom -180px;
  background-repeat: no-repeat;
  background-size: 680px 440px;
}

/* Red offers/CTA bands: one warm arc flourish, not dots. */
.has-accent-3-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.has-accent-4-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background) {
  background-image: var(--metcalf-pattern-red);
  background-position: right -130px top -70px;
  background-repeat: no-repeat;
  background-size: 620px 420px;
}

/* Dark sections carry a barely-there editorial accent; the marquee stays solid. */
.has-contrast-background-color:not(.marquee-bar):not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.dark-texture-section {
  background-image: var(--metcalf-pattern-dark);
  background-position: right -180px bottom -130px;
  background-repeat: no-repeat;
  background-size: 700px 440px;
}

/* --- Hover sheen flourish — opt-in via .sheen-on-hover --- */
.sheen-on-hover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.sheen-on-hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
  z-index: 3;
}

.sheen-on-hover:hover::after {
  animation: sheenSweep 0.85s ease-out;
}

/* ===================================================
   :::SECTION:Marquee Bar:::
   =================================================== */

/* Navigation — Parent-level rules (can't scope to nav block)
   -------------------------------------------------------------------------- */
.wp-block-template-part:has(.wp-block-navigation .is-menu-open),
header:has(.wp-block-navigation .is-menu-open) {
  z-index: 100001;
  position: relative;
}

footer.wp-block-template-part,
footer.wp-block-template-part > .wp-block-group {
  position: relative;
  z-index: 1;
}

[class*="site-footer"],
[class*="footer-section"] {
  margin-block-start: 0 !important;
}

/* ===================================================
   :::SECTION:Responsive Refinements:::
   =================================================== */

/* Tablet */
@media (max-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento-grid > *:nth-child(1) {
    grid-column: span 2;
    grid-row: span 1;
  }

  .bento-grid > *:nth-child(4) {
    grid-column: span 2;
  }

  .section-wave-top::before,
  .section-wave-bottom::after {
    height: 40px;
  }

  .section-divider-top::before,
  .section-divider-bottom::after {
    height: 50px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .wp-site-blocks,
  .wp-block-post-content,
  .wp-block-group,
  .wp-block-cover,
  .alignfull {
    max-width: 100%;
  }

  .wp-block-heading,
  .wp-block-cover h1,
  .wp-block-cover h2 {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Cards stack gracefully */
  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-grid > *:nth-child(1),
  .bento-grid > *:nth-child(4) {
    grid-column: span 1;
  }

  /* Hero text smooth reduction */
  .wp-block-cover h1,
  .wp-block-cover .has-huge-font-size {
    font-size: clamp(2rem, 8vw, 3.5rem);
  }

  .wp-block-cover h2,
  .wp-block-cover .has-x-large-font-size {
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  }

  .section-title {
    font-size: clamp(1.75rem, 7vw, var(--wp--preset--font-size--huge));
  }

  .stat-number {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  /* Touch-friendly spacing — larger tap targets */
  .wp-block-button__link,
  .btn-secondary {
    padding: 1rem 1.75rem;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .wp-block-navigation a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Reduce section divider height on mobile */
  .section-wave-top::before,
  .section-wave-bottom::after {
    height: 30px;
  }

  .section-divider-top::before,
  .section-divider-bottom::after {
    height: 40px;
  }

  /* Reduce decorative accent corners on mobile */
  .accent-image-corner::before,
  .accent-image-corner::after {
    width: 24px;
    height: 24px;
  }

  /* Disable hover effects on touch — rely on tap */
  .service-card:hover,
  .card-lift:hover {
    transform: none;
  }

  /* Pull-quote adjustments */
  .wp-block-pullquote,
  .testimonial-quote {
    padding: 1rem 1.25rem;
  }

  .wp-block-pullquote::before,
  .testimonial-quote::before {
    font-size: 3rem;
    top: -6px;
    left: 8px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .hero .hero-line-1 {
    font-size: 3.75rem !important;
    letter-spacing: 0;
  }

  .hero .hero-line-2 {
    font-size: 0.88rem !important;
    letter-spacing: 0.1em !important;
    line-height: 1.35 !important;
    max-width: 100%;
  }

  .hero .hero-region,
  .hero .hero-tagline,
  .hero .hero-side-sub {
    overflow-wrap: break-word;
  }

  .services-hero-title,
  .section-title {
    font-size: clamp(2.05rem, 10vw, 2.7rem) !important;
    line-height: 1.08 !important;
    max-width: calc(100vw - 2rem) !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  .services-hero-deck,
  .services-categories-header > p:not(.section-eyebrow) {
    max-width: calc(100vw - 2rem) !important;
    overflow-wrap: break-word;
    white-space: normal !important;
  }

  .wp-block-cover h1,
  .wp-block-cover .has-huge-font-size {
    font-size: clamp(1.75rem, 10vw, 2.5rem);
  }

  .eyebrow-text,
  .section-eyebrow {
    font-size: 0.75rem;
  }
}

/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
  .js .animate-on-scroll,
  .js .stagger-children > *,
  .service-card,
  .card-lift,
  .image-zoom-container img,
  .wp-block-button__link,
  .btn-secondary {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .wp-block-cover.hero-parallax {
    background-attachment: scroll;
  }

  /* Freeze the hover sheen for reduced-motion users */
  .sheen-on-hover:hover::after {
    animation: none !important;
  }
}

/* ===================================================
   :::SECTION:Static Visibility Guard (editor + no-JS fallback):::
   =================================================== */

html.js .animate-on-scroll:not(.is-visible),
.js .animate-on-scroll:not(.is-visible),
html.js .animate-on-scroll.animate-from-left:not(.is-visible),
.js .animate-on-scroll.animate-from-left:not(.is-visible),
html.js .animate-on-scroll.animate-from-right:not(.is-visible),
.js .animate-on-scroll.animate-from-right:not(.is-visible),
html.js .animate-on-scroll.animate-scale:not(.is-visible),
.js .animate-on-scroll.animate-scale:not(.is-visible),
.editor-styles-wrapper .animate-on-scroll:not(.is-visible),
.editor-styles-wrapper .animate-on-scroll.animate-from-left:not(.is-visible),
.editor-styles-wrapper .animate-on-scroll.animate-from-right:not(.is-visible),
.editor-styles-wrapper .animate-on-scroll.animate-scale:not(.is-visible) {
  opacity: 1 !important;
  transform: none !important;
}

/* ===================================================
   :::SECTION:Navigation Submenu / Dropdowns:::
   - Pure-CSS hover (no click needed)
   - Invisible hover bridge between trigger and dropdown
   - Mobile overlay forced at 1200px (not WP's default 600px)
   =================================================== */

/* Force horizontal nav links to render with proper spacing */
.site-nav-links .wp-block-navigation__container > .wp-block-navigation-item {
  position: relative;
}

.site-nav-links .wp-block-navigation-submenu {
  position: relative;
}

/* Top-level trigger styling */
.site-nav-links .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 1.5rem 0 1.5rem 0; /* vertical padding creates hover bridge area */
  cursor: pointer;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  color: var(--wp--preset--color--contrast);
  transition: color 0.2s ease;
}

.site-nav-links .wp-block-navigation-submenu > .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent-1);
}

/* Chevron icon */
.site-nav-links .wp-block-navigation__submenu-icon {
  width: 0.65rem;
  height: 0.65rem;
  transition: transform 0.25s ease;
}

/* Show dropdown on hover OR focus (keyboard) */
@media (min-width: 1201px) {
  .site-nav-links .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
  .site-nav-links .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-nav-links .wp-block-navigation-submenu:hover .wp-block-navigation__submenu-icon,
  .site-nav-links .wp-block-navigation-submenu:focus-within .wp-block-navigation__submenu-icon {
    transform: rotate(180deg);
  }
}

/* Dropdown container — sits below trigger with hover bridge */
.site-nav-links .wp-block-navigation__submenu-container {
  position: absolute !important;
  top: 100% !important; /* No gap — the trigger's bottom padding IS the bridge */
  left: 0 !important;
  right: auto !important;
  min-width: 280px !important;
  max-width: 320px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  margin-top: 0 !important;
  padding: 0.75rem 0 !important;
  background: var(--wp--preset--color--base-4) !important;
  border: 1px solid rgba(27, 94, 32, 0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.18), 0 8px 16px -4px rgba(0, 0, 0, 0.08) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.25s ease;
  z-index: 1000;
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  list-style: none !important;
}

/* The hover bridge — invisible ::before pseudo-element above dropdown */
.site-nav-links .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
}

/* Submenu item links */
.site-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item {
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}

.site-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 0.55rem 1.25rem !important;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--wp--preset--color--contrast);
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
  border-left: 3px solid transparent;
}

.site-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.site-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background-color: rgba(27, 94, 32, 0.05);
  color: var(--wp--preset--color--accent-1);
  border-left-color: var(--wp--preset--color--accent-1);
  padding-left: 1.5rem !important;
}

/* "View All" link in dropdowns — visually distinct */
.site-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item__content[href$="/services/"]:has(+ *),
.site-nav-links .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child > .wp-block-navigation-item__content {
  margin-top: 0.5rem;
  padding-top: 0.7rem !important;
  border-top: 1px solid rgba(27, 94, 32, 0.1);
  color: var(--wp--preset--color--accent-1);
  font-weight: 600;
}

/* Keep dropdown within viewport on right edge */
.site-nav-links > .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(-n+2) .wp-block-navigation__submenu-container {
  left: auto !important;
  right: 0 !important;
}

/* ===================================================
   :::SECTION:Mobile Navigation (≤1200px hamburger):::
   Olli Menu Designer handles the actual mobile menu content.
   This section styles the hamburger trigger + the Olli mobile shell.
   =================================================== */

@media (max-width: 1200px) {
  /* NOTE: stickiness is handled by the metcalf-plumbing/header block itself
     (sticky template-part wrapper + view.js). A second position:sticky here on
     the inner .site-header created nested/competing sticky contexts that made
     the marquee bar jump, overlap, and flicker on scroll — removed. */

  .site-header .site-header-inner {
    gap: 0.75rem !important;
    min-height: 64px;
    padding: 0.7rem 1rem !important;
  }

  .site-header .site-logo {
    flex: 0 1 auto;
    min-width: 0;
  }

  .site-header .site-logo img {
    width: auto !important;
    max-width: min(52vw, 205px) !important;
    max-height: 44px !important;
    object-fit: contain;
  }

  .site-header .site-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem !important;
    margin-left: auto;
  }

  .site-header .site-nav-phone-wrapper {
    display: none !important;
  }

  .site-header .site-social-icons {
    display: none !important;
  }

  /* Hamburger trigger button */
  .site-nav-links .wp-block-navigation__responsive-container-open {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 76px;
    background: rgba(27, 94, 32, 0.08);
    border: 1px solid rgba(27, 94, 32, 0.18);
    color: var(--wp--preset--color--contrast);
    cursor: pointer;
    padding: 0.55rem 0.75rem;
    width: auto;
    height: 46px;
    border-radius: 8px;
    font-family: var(--wp--preset--font-family--figtree);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(27, 94, 32, 0.08);
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  }
  .site-nav-links .wp-block-navigation__responsive-container-open::after {
    content: 'Menu';
  }
  .site-nav-links .wp-block-navigation__responsive-container-open:hover {
    background: var(--wp--preset--color--accent-1);
    border-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--base-4);
  }
  .site-nav-links .wp-block-navigation__responsive-container-open svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
  }

  /* Hide desktop nav items completely below breakpoint */
  .site-nav-links .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
    display: none !important;
  }

  /* Olli mobile menu container — slide in from right */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open,
  .site-nav-links .wp-block-navigation__responsive-container.has-modal-open {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(440px, 100vw) !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    background: var(--wp--preset--color--base-4) !important;
    box-shadow: -18px 0 48px rgba(28, 28, 26, 0.22);
    z-index: 100000;
    overflow: hidden !important;
    animation: mobilePanelIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Close button — branded green, white glyph */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 0.9rem !important;
    right: 1rem !important;
    z-index: 20;
    width: 46px;
    height: 46px;
    color: var(--wp--preset--color--base-4) !important;
    background: var(--wp--preset--color--accent-1) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.28) !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus {
    background: var(--wp--preset--color--accent-2) !important;
    transform: rotate(90deg) !important;
  }

  /* The Olli mobile menu template renders inside this container. WP core also
     wraps .responsive-dialog in an unstyled .responsive-close div (a backdrop
     wrapper, not just the close button despite the name) that had no explicit
     height — it defaulted to auto/content-sized, breaking the 100%-height chain
     between the panel and everything inside it, which is exactly why nothing
     below ever got properly bounded enough to scroll. */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__mobile-menu-content {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* Hide the default WP navigation items inside the Olli overlay (Olli renders its own) */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: none !important;
  }

  /* .mm-shell previously only had min-height:100%, so it grew to fit ALL of its
     content (nav sections + social row + footer CTAs) instead of being capped to
     the drawer's actual viewport — with nothing to constrain it, .mm-scroll's
     flex:1 had no bounded space to shrink into, so it never actually scrolled;
     the outer panel's overflow:hidden just silently clipped everything past the
     visible height with no way to reach it. height:100% caps the shell so
     .mm-scroll genuinely becomes the internal scroll region. */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-shell {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
    background: var(--wp--preset--color--base-4) !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-head {
    display: flex !important;
    align-items: center !important;
    min-height: 68px !important;
    padding: 0.85rem 4.25rem 0.85rem 1rem !important;
    background: var(--wp--preset--color--base) !important;
    border-bottom: 1px solid rgba(27, 94, 32, 0.12) !important;
  }

  /* Redundant "Menu" label removed — the logo + close button are enough. */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-head::after {
    content: none;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-head img {
    width: auto !important;
    max-width: 178px !important;
    max-height: 42px !important;
    object-fit: contain;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-scroll {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 1rem !important;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-section {
    margin: 0 0 1.1rem !important;
    padding: 0 0 1rem !important;
    border-bottom: 1px solid rgba(27, 94, 32, 0.1) !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-section:last-child {
    border-bottom: 0 !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-eyebrow {
    margin: 0 0 0.45rem !important;
    color: var(--wp--preset--color--accent-1) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links {
    display: grid !important;
    gap: 0.1rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-section-primary {
    margin-bottom: 1.35rem !important;
    padding: 0.85rem !important;
    background: rgba(27, 94, 32, 0.06) !important;
    border: 1px solid rgba(27, 94, 32, 0.12) !important;
    border-radius: 10px !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.45rem !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links a {
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 0.85rem 0.55rem !important;
    color: var(--wp--preset--color--contrast) !important;
    font-size: 1.06rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    border-left: 3px solid transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links-primary a {
    min-height: 46px !important;
    padding: 0.7rem 0.55rem !important;
    background: var(--wp--preset--color--base-4) !important;
    border: 1px solid rgba(27, 94, 32, 0.11) !important;
    border-left: 3px solid var(--wp--preset--color--accent-1) !important;
    font-size: 0.98rem !important;
    font-weight: 750 !important;
  }

  /* Chevron affordance — faint by default, slides in on hover/focus */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links a::after {
    content: '\203A';
    margin-left: auto;
    padding-left: 0.5rem;
    color: var(--wp--preset--color--accent-1);
    font-size: 1.35rem;
    line-height: 1;
    opacity: 0.25;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links a:hover,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links a:focus {
    padding-left: 0.7rem !important;
    background: rgba(27, 94, 32, 0.07) !important;
    color: var(--wp--preset--color--accent-1) !important;
    border-left-color: var(--wp--preset--color--accent-1) !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links a:hover::after,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links a:focus::after {
    opacity: 1;
    transform: translateX(0);
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-promo {
    margin: 0 1rem 0.9rem !important;
    padding: 0.9rem 1rem !important;
    background: rgba(27, 94, 32, 0.08) !important;
    border: 1px solid rgba(27, 94, 32, 0.14) !important;
    border-radius: 8px !important;
    color: var(--wp--preset--color--contrast) !important;
    font-size: 0.94rem !important;
    line-height: 1.45 !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
    padding: 0.8rem 1rem calc(0.9rem + env(safe-area-inset-bottom)) !important;
    background: var(--wp--preset--color--base) !important;
    border-top: 1px solid rgba(27, 94, 32, 0.12) !important;
  }

  /* .mm-call / .mm-book are plain <a> tags from a raw wp:html block, not Gutenberg
     button blocks — the .wp-block-button__link selector this used to target never
     matched anything, so these rendered as unstyled text links (and looked nothing
     like the same Call/Book pair on the sticky mobile-cta-bar, which IS styled).
     Match that bar's own color tokens (accent-3/accent-1) for real visual parity. */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-call,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-book {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.05rem !important;
    width: 100% !important;
    min-height: 54px !important;
    padding: 0.7rem 0.75rem !important;
    border-radius: 10px !important;
    color: var(--wp--preset--color--base-4) !important;
    text-align: center !important;
    text-decoration: none !important;
    line-height: 1.15 !important;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-call small,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-book small {
    font-size: 0.66rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    opacity: 0.82 !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-call strong,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-book strong {
    font-size: 0.98rem !important;
    font-weight: 700 !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-call {
    background: var(--wp--preset--color--accent-3) !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-book {
    background: var(--wp--preset--color--accent-1) !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-call:hover,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-call:focus {
    background: var(--wp--preset--color--accent-4) !important;
    color: var(--wp--preset--color--base-4) !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-book:hover,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot .mm-book:focus {
    background: var(--wp--preset--color--accent-2) !important;
    color: var(--wp--preset--color--base-4) !important;
  }

  /* Mobile menu social row — production hides its icons on mobile entirely; this
     gives mobile visitors here the same 5 links the desktop header now has. */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-social {
    display: flex !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    padding: 0.9rem 1rem 0.6rem !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-social a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(27, 94, 32, 0.16) !important;
    color: var(--wp--preset--color--contrast) !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-social svg {
    width: 18px !important;
    height: 18px !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-social a:hover,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-social a:focus-visible {
    background: var(--wp--preset--color--accent-1) !important;
    border-color: var(--wp--preset--color--accent-1) !important;
    color: var(--wp--preset--color--base-4) !important;
  }

  /* Backdrop dim when menu open */
  body:has(.site-nav-links .wp-block-navigation__responsive-container.is-menu-open)::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(28, 28, 26, 0.42);
    z-index: 99999;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    pointer-events: none;
  }

  body:has(.site-nav-links .wp-block-navigation__responsive-container.is-menu-open) .mobile-cta-bar {
    display: none !important;
  }
}

/* Small phones — full-width panel */
@media (max-width: 480px) {
  .site-header .site-header-inner {
    padding-inline: 0.8rem !important;
  }

  .site-header .site-logo img {
    max-width: 50vw !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container-open {
    min-width: 48px;
    padding-inline: 0.7rem;
  }

  .site-nav-links .wp-block-navigation__responsive-container-open::after {
    content: none;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open {
    width: 100vw !important;
  }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot {
    grid-template-columns: 1fr !important;
  }
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Section Edges:::
   =================================================== */

/* Decorative top accent line on sections — appears when section enters viewport */
.has-base-4-background-color.has-background + .has-base-background-color.has-background,
.has-base-background-color.has-background + .has-base-4-background-color.has-background {
  position: relative;
}

/* Faint gradient line between sections of different colors */
.has-base-4-background-color.has-background + .has-base-background-color.has-background::before,
.has-base-background-color.has-background + .has-base-4-background-color.has-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--wp--preset--color--accent-1), transparent);
  opacity: 0.3;
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Heading Underlines:::
   =================================================== */

/* Animated underline that draws in on H2 headings inside light sections */
.has-base-background-color h2.wp-block-heading,
.has-base-4-background-color h2.wp-block-heading {
  position: relative;
  display: inline-block;
}

.has-base-background-color h2.wp-block-heading.has-text-align-center,
.has-base-4-background-color h2.wp-block-heading.has-text-align-center {
  display: block;
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Glass Morphism Cards:::
   =================================================== */

/* Glass effect for cards over image backgrounds (use class .glass-card) */
.glass-card {
  background: rgba(254, 252, 249, 0.85) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(254, 252, 249, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Premium Button States:::
   =================================================== */

/* All buttons get a refined ripple-like inner highlight on hover */
.wp-block-button__link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.25s ease !important;
}

.wp-block-button__link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(27, 94, 32, 0.35);
}

.wp-block-button__link:hover::after {
  opacity: 1;
}

.wp-block-button__link:active {
  transform: translateY(0);
  transition-duration: 0.1s;
}

/* Outline button — animated fill on hover */
.is-style-outline .wp-block-button__link {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.is-style-outline .wp-block-button__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(254, 252, 249, 0.12);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}

.is-style-outline .wp-block-button__link:hover::before {
  transform: scaleX(1);
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Cover Block Refinements:::
   =================================================== */

/* All cover blocks get a subtle bottom-edge gradient fade for smoother transitions */
.wp-block-cover {
  position: relative;
}

/* (Removed a duplicate .wp-block-cover::after here — it was inert: the earlier
   rule sets opacity:0 on plain covers, so this dark-fade never rendered. The
   opt-in fade lives on .hero-gradient-overlay::after.) */

.wp-block-cover > .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
}

/* Slow Ken Burns zoom on cover backgrounds — subtle, premium */
@keyframes kenBurns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -1%); }
}

.wp-block-cover__image-background {
  animation: kenBurns 20s ease-out infinite alternate;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-cover__image-background { animation: none; }
}

/* Heading text shadow on covers — readability + premium feel */
.wp-block-cover h1,
.wp-block-cover h2 {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Image Refinements:::
   =================================================== */

/* All images in column layouts get refined treatment */
.wp-block-columns .wp-block-image img,
.wp-block-columns .wp-block-cover {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s ease;
}

.wp-block-columns .wp-block-image:hover img {
  transform: scale(1.02);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.2);
}

/* Service cards images — fill top edge with zoom on card hover */
.wp-block-group:has(> .wp-block-image:first-child) {
  overflow: hidden;
}

.wp-block-group:hover > .wp-block-image:first-child img {
  transform: scale(1.04);
}

.wp-block-group > .wp-block-image:first-child img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Scroll Progress:::
   =================================================== */

/* Top page-scroll progress bar */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-3));
  z-index: 99999;
  transition: width 0.05s linear;
  pointer-events: none;
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Focus States:::
   =================================================== */

/* Refined focus rings — accessible AND beautiful */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Smooth Scrolling:::
   =================================================== */

html {
  scroll-behavior: smooth;
  /* Offset hash-link targets so they clear the sticky header (promo bar &
     marquee are not sticky, so only the header height is accounted for). */
  scroll-padding-top: 6rem;
}

@media (max-width: 1200px) {
  html { scroll-padding-top: 4.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Selection Color:::
   =================================================== */

::selection {
  background: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--base-4);
}

::-moz-selection {
  background: var(--wp--preset--color--accent-2);
  color: var(--wp--preset--color--base-4);
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Custom Scrollbar:::
   =================================================== */

/* Subtle, branded scrollbar (webkit only) */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--wp--preset--color--base);
}

::-webkit-scrollbar-thumb {
  background: rgba(27, 94, 32, 0.3);
  border-radius: 6px;
  border: 3px solid var(--wp--preset--color--base);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(27, 94, 32, 0.5);
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Service Card Refinements:::
   =================================================== */

/* Cards with shadow get a refined hover lift + accent border reveal */
.has-md-shadow,
.has-lg-shadow {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
  position: relative;
}

.has-md-shadow::before,
.has-lg-shadow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 12px 12px 0 0;
  z-index: 2;
  pointer-events: none;
}

.has-md-shadow:hover::before,
.has-lg-shadow:hover::before {
  transform: scaleX(1);
}

.has-md-shadow:hover,
.has-lg-shadow:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.18) !important;
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Quote / Testimonial Styling:::
   =================================================== */

/* Italic quotes get a giant decorative quote mark */
.wp-block-group:has(p[style*="italic"]) > p[style*="italic"]::before,
p.is-style-italic::before {
  content: '"';
  font-family: var(--wp--preset--font-family--bodoni-moda);
  font-size: 4rem;
  line-height: 0.5;
  color: var(--wp--preset--color--accent-1);
  opacity: 0.25;
  display: block;
  margin-bottom: 0.5rem;
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Link Underlines:::
   =================================================== */

/* In-content links get animated underline */
.wp-block-post-content a:not(.wp-block-button__link),
.entry-content a:not(.wp-block-button__link) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s ease, color 0.2s ease;
  text-decoration: none;
  color: var(--wp--preset--color--accent-1);
  font-weight: 500;
}

.wp-block-post-content a:not(.wp-block-button__link):hover,
.entry-content a:not(.wp-block-button__link):hover {
  background-size: 100% 1px;
}

/* Plain content lists (wp:list with no custom className — the "feature
   list" pattern under service-page intros, present on 29 service pages)
   lost their bullets to the sitewide `ul { list-style: none; }` reset
   with nothing put back; restored here. Scoped to .entry-content so
   header/footer/nav lists are untouched, and excludes the site's other
   custom-styled lists (verified complete list of custom ul classNames
   in use, 2026-07-18) so they keep their own bullet/marker treatment. */
.entry-content .wp-block-list:not(.area-list):not(.loc-trust-list):not(.service-areas-town-list):not(.services-list-items):not(.svc-card-list):not(.water-heaters-decision-list):not(.water-heaters-type-pros) {
  padding-left: 1.25rem;
}
.entry-content .wp-block-list:not(.area-list):not(.loc-trust-list):not(.service-areas-town-list):not(.services-list-items):not(.svc-card-list):not(.water-heaters-decision-list):not(.water-heaters-type-pros) li {
  list-style: disc;
  margin-bottom: 0.4rem;
}
.entry-content .wp-block-list:not(.area-list):not(.loc-trust-list):not(.service-areas-town-list):not(.services-list-items):not(.svc-card-list):not(.water-heaters-decision-list):not(.water-heaters-type-pros) li::marker {
  color: var(--wp--preset--color--accent-1);
}

/* ===================================================
   :::SECTION:BLOG CONTENT SYSTEM:::
   =================================================== */

.wp-block-post-content .blog-related-services,
.wp-block-post-content .blog-callout {
  margin-block: var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--40);
  border-radius: 8px;
}

.wp-block-post-content .blog-related-services {
  background: var(--wp--preset--color--base);
  border: 1px solid rgba(27, 94, 32, 0.12);
  box-shadow: 0 12px 28px rgba(28, 28, 26, 0.05);
}

.wp-block-post-content .blog-callout {
  color: var(--wp--preset--color--base-4);
  background:
    linear-gradient(135deg, rgba(27, 94, 32, 0.96), rgba(46, 125, 50, 0.92)),
    var(--wp--preset--color--accent-1);
  box-shadow: 0 18px 44px rgba(28, 28, 26, 0.14);
}

.wp-block-post-content .blog-related-services h3,
.wp-block-post-content .blog-callout h3 {
  margin-block: 0 var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--bodoni-moda);
  line-height: 1.2;
}

.wp-block-post-content .blog-related-services p,
.wp-block-post-content .blog-callout p {
  margin-block: 0;
  line-height: 1.7;
}

.wp-block-post-content .blog-callout p,
.wp-block-post-content .blog-callout a:not(.wp-block-button__link) {
  color: rgba(254, 252, 249, 0.9);
}

.wp-block-post-content .blog-callout .wp-block-buttons {
  margin-block-start: var(--wp--preset--spacing--30);
  gap: var(--wp--preset--spacing--20);
}

.wp-block-post-content .blog-callout .is-style-outline .wp-block-button__link {
  color: var(--wp--preset--color--base-4);
  border-color: rgba(254, 252, 249, 0.72);
}

@media (max-width: 640px) {
  .wp-block-post-content .blog-related-services,
  .wp-block-post-content .blog-callout {
    padding: var(--wp--preset--spacing--30);
  }

  .wp-block-post-content .blog-callout .wp-block-button,
  .wp-block-post-content .blog-callout .wp-block-button__link {
    width: 100%;
  }
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Section Reveal Effects:::
   =================================================== */

/* When ANY section comes into view, fade up with delay */
.wp-block-group[class*="alignfull"] {
  opacity: 1;
  transform: none;
}

/* Mobile CTA bar — premium polish */
.mobile-cta-bar {
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  background: rgba(28, 28, 26, 0.92) !important;
}

/* Call + Book buttons must always match height. The grid already sets
   align-items:stretch (in the block's own embedded CSS, <=1200px) and
   align-self resolves to "stretch" on both buttons, but that alone doesn't
   equalize them in practice — confirmed live the two rendered 84px vs 52px
   despite single-line, unwrapped content in both, because .mcta-btn is
   itself a flex container with min-height, and stretch's computed "auto"
   height doesn't reliably override that combination. An explicit height
   tied to the grid row is unambiguous and actually equalizes them. */
.mobile-cta-bar a.mcta-btn {
  height: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .js .animate-on-scroll,
  .js .animate-on-scroll:not(.is-visible),
  .js .animate-on-scroll.is-visible,
  .js .animate-on-scroll[data-animation="fade-left"]:not(.is-visible),
  .js .animate-on-scroll[data-animation="fade-right"]:not(.is-visible),
  .js .animate-on-scroll[data-animation="scale-in"]:not(.is-visible),
  .js .animate-on-scroll[data-animation="blur-in"]:not(.is-visible),
  .js .animate-on-scroll.animate-from-left:not(.is-visible),
  .js .animate-on-scroll.animate-from-right:not(.is-visible),
  .js .animate-on-scroll.animate-scale:not(.is-visible),
  .js .stagger-children > *,
  .js .stagger-children > *:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .mobile-cta-bar {
    background: rgba(28, 28, 26, 0.98) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 0.45rem !important;
    padding: 0.5rem !important;
  }

  .mobile-cta-bar,
  .mobile-cta-bar * {
    transition: none !important;
  }

  .mobile-cta-bar a.mcta-btn {
    min-width: 0 !important;
    gap: 0.4rem !important;
    padding: 0.75rem 0.45rem !important;
  }

  .mobile-cta-bar a.mcta-btn svg {
    width: 16px !important;
    height: 16px !important;
  }

  .mobile-cta-bar a.mcta-btn .mcta-label {
    align-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-align: center !important;
  }

  .mobile-cta-bar a.mcta-btn .mcta-label small {
    display: none !important;
  }

  .mobile-cta-bar a.mcta-btn .mcta-label strong {
    display: block !important;
    max-width: 100% !important;
    font-size: 0.86rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open,
  .site-nav-links .wp-block-navigation__responsive-container.has-modal-open {
    animation: none !important;
  }

  .marquee-bar .marquee-track {
    animation: none !important;
  }
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Promo Bar Refinement:::
   =================================================== */

.promo-bar {
  background: linear-gradient(90deg, var(--wp--preset--color--contrast) 0%, #2a2a26 100%) !important;
}

.promo-bar .promo-bar-item.is-star {
  text-shadow: 0 0 12px rgba(46, 125, 50, 0.4);
}

/* The footer is the site's final high-intent CTA. Its phone mark is an inline
   SVG and only uses a gentle transform pulse; it creates no request or layout
   work, and stops completely for visitors who prefer reduced motion. */
.footer-cta-strip .footer-cta-text h2::before {
  content: '';
  display: inline-block;
  width: 1.14em;
  height: 1.14em;
  margin-right: 0.38em;
  vertical-align: -0.13em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23FEFCF9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.3' d='M8.2 4.8l3.4-.8 2.2 5.8-2.4 1.7c1.55 3.15 4.1 5.7 7.25 7.25l1.7-2.4 5.8 2.2-.8 3.4c-.34 1.43-1.8 2.32-3.23 1.98C13.28 21.76 6.24 14.72 4.22 6.03 3.88 4.6 4.77 3.14 6.2 2.8'/%3E%3Cpath fill='none' stroke='%23FEFCF9' stroke-linecap='round' stroke-width='1.8' d='M21.2 5.7c2.66.72 4.38 2.44 5.1 5.1M20.5 10.1c1.12.31 1.86 1.05 2.17 2.17'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .footer-cta-strip .footer-cta-text h2::before {
    animation: metcalf-answer-phone 5.5s ease-in-out infinite;
    transform-origin: 50% 70%;
  }
}

@keyframes metcalf-answer-phone {
  0%, 76%, 100% { transform: translateY(0) rotate(0); opacity: 0.94; }
  80% { transform: translateY(-2px) rotate(-7deg); opacity: 1; }
  84% { transform: translateY(-2px) rotate(7deg); opacity: 1; }
  88% { transform: translateY(0) rotate(0); opacity: 0.94; }
}

/* ===================================================
   :::SECTION:PREMIUM POLISH — Form Field Refinements:::
   =================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea {
  background: var(--wp--preset--color--base-4);
  border: 1.5px solid rgba(27, 94, 32, 0.15);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 1rem;
  color: var(--wp--preset--color--contrast);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus {
  border-color: var(--wp--preset--color--accent-1);
  box-shadow: 0 0 0 4px rgba(27, 94, 32, 0.1);
  outline: none;
  background: white;
}




/* ===================================================
   :::SECTION:Accessibility:::
   =================================================== */

/* Skip-to-content link — invisible until focused */
.skip-to-content {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999999;
  padding: 0.75rem 1.5rem;
  background: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base-4);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s ease;
  border: 2px solid var(--wp--preset--color--base-4);
}

.skip-to-content:focus {
  top: 0;
  outline: 2px solid var(--wp--preset--color--accent-2);
  outline-offset: 2px;
}

/* Ensure main is focusable but doesn't show outline by default */
main:focus { outline: none; }

/* ===================================================
   :::SECTION:Back to Top Button:::
   =================================================== */

.back-to-top {
  position: fixed;
  bottom: 8.5rem; /* clear of mobile CTA bar — bar measures ~101px in
    compact (<=768px) mode; this clears that plus the taller two-line
    label the bar uses between 769-1200px, with margin to spare */
  right: 1.25rem;
  z-index: 9997;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base-4);
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(27, 94, 32, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.85);
  transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0.3s ease,
              background-color 0.2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: var(--wp--preset--color--accent-2);
  transform: translateY(-2px) scale(1.05);
}

.back-to-top:active {
  transform: translateY(0) scale(0.95);
}

/* Move back-to-top above the desktop level since mobile CTA isn't shown */
@media (min-width: 1201px) {
  .back-to-top {
    bottom: 1.5rem;
    right: 1.5rem;
  }
}

/* ===================================================
   :::SECTION:Promo Bar (static, clean):::
   =================================================== */

.promo-bar .promo-bar-item.is-contest {
  color: var(--wp--preset--color--accent-2);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.promo-bar .promo-bar-item.is-contest:hover {
  color: var(--wp--preset--color--base-4);
  text-decoration: underline;
}

/* ===================================================
   :::SECTION:Print Stylesheet:::
   =================================================== */

@media print {
  /* Hide chrome on print */
  .promo-bar,
  .site-header,
  .site-footer,
  .footer-cta-strip,
  .mobile-cta-bar,
  .back-to-top,
  .skip-to-content,
  body::before,
  .wp-block-button,
  .wp-block-buttons,
  .wp-block-cover::after,
  .wp-block-navigation,
  .has-md-shadow::before,
  .has-lg-shadow::before { display: none !important; }

  body { background: white !important; color: black !important; font-size: 11pt; }
  a { color: black !important; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  .wp-block-cover {
    background: none !important;
    color: black !important;
    min-height: auto !important;
    padding: 1rem 0 !important;
  }
  .wp-block-cover__background,
  .wp-block-cover__image-background { display: none !important; }
  .wp-block-cover h1,
  .wp-block-cover h2,
  .wp-block-cover p { color: black !important; text-shadow: none !important; }
  h1, h2, h3 { page-break-after: avoid; }
  img { max-width: 100% !important; page-break-inside: avoid; }
  .wp-block-group { page-break-inside: avoid; }
}

/* ===================================================
   :::SECTION:Ollie Menu Designer — Clean Dropdown Style:::
   (Matches previous custom dropdown design)
   =================================================== */

/* Trigger: match our nav typography exactly */
.site-nav-links .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle {
  background: transparent;
  border: none;
  padding: 1.25rem 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  color: var(--wp--preset--color--contrast);
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1;
  transition: color 0.2s ease;
}

.site-nav-links .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle:hover {
  color: var(--wp--preset--color--accent-1);
}

/* Chevron */
.site-nav-links .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle-icon {
  width: 0.65em;
  height: 0.65em;
}

.site-nav-links .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle-icon svg {
  stroke: currentColor;
  stroke-width: 1.6;
  transition: transform 0.25s ease;
}

.site-nav-links .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] .wp-block-ollie-mega-menu__toggle-icon svg {
  transform: rotate(180deg);
}

/* Dropdown container — narrow, clean, white card */
@media (min-width: 1201px) {
  .site-nav-links .wp-block-ollie-mega-menu__menu-container {
    min-width: 280px !important;
    max-width: 320px !important;
    width: auto !important;
    background: var(--wp--preset--color--base-4) !important;
    border: 1px solid rgba(27, 94, 32, 0.08) !important;
    border-radius: 12px !important;
    box-shadow:
      0 20px 40px -8px rgba(0, 0, 0, 0.18),
      0 8px 16px -4px rgba(0, 0, 0, 0.08) !important;
    padding: 0.75rem 0 !important;
    margin-top: 0 !important;
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  /* Right-align the last dropdowns so they don't overflow */
  .site-nav-links > .wp-block-navigation__container > .wp-block-navigation-item:nth-last-child(-n+3) .wp-block-ollie-mega-menu__menu-container,
  .site-nav-links > .wp-block-navigation__container > .wp-block-navigation-item.wp-block-ollie-mega-menu:nth-last-child(-n+2) .wp-block-ollie-mega-menu__menu-container {
    left: auto !important;
    right: 0 !important;
  }
}

/* Hover bridge — invisible padding above dropdown so cursor can travel */
.site-nav-links .wp-block-ollie-mega-menu__menu-container::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
  background: transparent;
  pointer-events: auto;
}

/* Strip away padding from inner group so links go edge-to-edge */
.site-nav-links .wp-block-ollie-mega-menu__menu-container > .wp-block-group,
.site-nav-links .wp-block-ollie-mega-menu__menu-container > .wp-block-group > .wp-block-group {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* The simple link list inside dropdowns */
.omd-menu-links {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

.omd-menu-links li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.omd-menu-links li::marker { content: none; }

.omd-menu-links a {
  display: block;
  padding: 0.55rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease;
}

.omd-menu-links a:hover,
.omd-menu-links a:focus {
  background-color: rgba(27, 94, 32, 0.05);
  color: var(--wp--preset--color--accent-1);
  border-left-color: var(--wp--preset--color--accent-1);
  padding-left: 1.5rem;
}

/* "View All" link gets visual separator */
.omd-menu-links a[href$="/services/"],
.omd-menu-links a[href$="/service-areas/"],
.omd-menu-links li:last-child a {
  border-top: 1px solid rgba(27, 94, 32, 0.08);
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  color: var(--wp--preset--color--accent-1);
  font-weight: 600;
}

/* Featured "call us" CTA inside each mega-menu panel */
.omd-menu-cta {
  margin-top: 0.4rem;
  padding: 0.8rem 1.25rem 0.3rem;
  border-top: 1px solid rgba(27, 94, 32, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.omd-menu-cta-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--contrast-2);
  font-weight: 600;
}

.omd-menu-cta-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--bodoni-moda);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
  transition: color 0.15s ease;
}

.omd-menu-cta-call svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.omd-menu-cta-call:hover {
  color: var(--wp--preset--color--accent-2);
}

/* Mobile menu */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--base-4) !important;
  color: var(--wp--preset--color--contrast) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .omd-mobile-links {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .omd-mobile-links li {
  list-style: none;
}

.wp-block-navigation__responsive-container.is-menu-open .omd-mobile-links a {
  display: block;
  padding: 0.625rem 0 0.625rem 0.75rem;
  margin-left: -0.75rem;
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  font-size: 1.05rem;
  border-left: 3px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease;
}

.wp-block-navigation__responsive-container.is-menu-open .omd-mobile-links a:hover {
  color: var(--wp--preset--color--accent-1);
  border-left-color: var(--wp--preset--color--accent-1);
  padding-left: 1rem;
}

/* Hide native WP submenu container — Ollie handles all dropdowns */
.site-nav-links .wp-block-navigation__submenu-container {
  display: none !important;
}


/* ===================================================
   :::SECTION:WordPress Admin Bar Compatibility:::
   When logged in as admin, WP adds <body class="admin-bar">
   and pushes <html> down 32px (or 46px below 783px).
   Adjust any position:fixed elements that anchor to top.
   =================================================== */

/* Scroll progress bar — start below admin bar */
body.admin-bar::before {
  top: 32px;
}

/* Skip-to-content link focus position — clear admin bar */
body.admin-bar .skip-to-content:focus {
  top: 32px;
}

/* Mobile menu slide-in overlay — start below admin bar */
body.admin-bar .site-nav-links .wp-block-navigation__responsive-container.is-menu-open {
  top: 32px !important;
  height: calc(100vh - 32px) !important;
}

/* Body::after backdrop for mobile menu — clear admin bar */
body.admin-bar:has(.site-nav-links .wp-block-navigation__responsive-container.is-menu-open)::after {
  top: 32px;
}

/* Ollie mobile menu overlay (its own fixed positioning) */
body.admin-bar .wp-block-ollie-mega-menu__menu-container {
  /* Desktop dropdowns don't anchor to viewport top, no change needed */
}

/* Below 783px, admin bar grows to 46px */
@media screen and (max-width: 782px) {
  body.admin-bar::before { top: 46px; }
  body.admin-bar .skip-to-content:focus { top: 46px; }
  body.admin-bar .site-nav-links .wp-block-navigation__responsive-container.is-menu-open {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
  }
  body.admin-bar:has(.site-nav-links .wp-block-navigation__responsive-container.is-menu-open)::after {
    top: 46px;
  }
}

/* When admin bar is showing, ensure back-to-top button doesn't collide with
   admin bar dropdown menus that hang from the top. Already fine at bottom. */


/* Homepage stats banner — even native grid (columnCount 5) + responsive collapse */
.stats-grid {
  align-items: start;
}
@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: var(--wp--preset--spacing--40) !important;
  }
}
@media (max-width: 560px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* Location page polish */
.wp-block-cover .wp-block-cover__inner-container p.has-accent-2-color[style*="text-transform:uppercase"] {
  display: table;
  width: fit-content;
  margin-inline: auto;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: rgba(27, 94, 32, 0.84);
  color: var(--wp--preset--color--base-4) !important;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.loc-services .loc-services-head > p.has-accent-2-color {
  color: var(--wp--preset--color--accent-1) !important;
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem) !important;
  font-weight: 750 !important;
  letter-spacing: 0.14em !important;
}

.loc-services .loc-services-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--wp--preset--spacing--40) !important;
}

@media (max-width: 1100px) {
  .loc-services .loc-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

.loc-services .loc-svc-card {
  min-height: 100%;
  border-top: 0 !important;
  border-left: 4px solid var(--wp--preset--color--accent-1);
  border-radius: 8px !important;
  padding: var(--wp--preset--spacing--40) !important;
  box-shadow: 0 10px 24px rgba(28, 28, 26, 0.05);
}

.loc-services .loc-svc-name {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.55rem) !important;
  line-height: 1.2 !important;
}

.loc-services .loc-svc-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding-top: var(--wp--preset--spacing--20);
  font-size: 1rem;
}

@media (max-width: 760px) {
  .loc-services .loc-services-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===================================================
   LOCATION TEMPLATE — previously-unstyled sections
   Styles loc-trust / loc-services-inner / loc-testimonial /
   loc-band / loc-cta across all 9 location pages (125-133).
   Markup is baked into post_content; this is CSS-only.
   =================================================== */

/* Local Trust — 2-up text + image */
.loc-trust-inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--wp--preset--spacing--50);
  align-items: center;
}
.loc-trust-text {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
.loc-trust-title { margin: 0; }
.loc-trust-body { margin: 0; }
.loc-trust-list {
  margin: var(--wp--preset--spacing--20) 0 0;
  padding-left: 1.25rem;
}
.loc-trust-list li { margin-bottom: 0.5rem; }
.loc-trust-img { margin: 0; }
.loc-trust-img img { border-radius: 12px; }

/* Service-page intro images: min-height lived inline pre block-validity fix;
   core/image attrs can't express min-height, so it belongs here. */
/* min-height on a 16:9 source squashes it in the narrow mobile column (Lighthouse
   flagged a 348x400 box on a 768x432 image). Cover crops instead of distorting. */
.service-intro-image img { min-height: 400px; object-fit: cover; width: 100%; }

/* Utility classes replacing inline opacity/max-width that core block attrs
   can't express (block-validity fix; values from the site-wide census). */
.u-opacity-85 { opacity: 0.85; }
.u-opacity-90 { opacity: 0.9; }
.u-opacity-70 { opacity: 0.7; }
.u-maxw-600 { max-width: 600px; }
.u-overflow-hidden { overflow: hidden; }
.u-aspect-16-10 { aspect-ratio: 16/10; }

@media (max-width: 900px) {
  .loc-trust-inner {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
  }
  .loc-trust-img { order: -1; }
}

/* Services in area — constrain inner; activate the grid (columns rule was inert without display:grid) */
.loc-services-inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}
.loc-services-inner .loc-services-head { margin-bottom: var(--wp--preset--spacing--40); }
.loc-services .loc-services-grid { display: grid; }

/* Local testimonial — single centered card */
.loc-test-card {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
.loc-test-stars {
  margin: 0;
  color: var(--wp--preset--color--accent-3);
  letter-spacing: 0.25em;
  font-size: 1.25rem;
}
.loc-test-quote {
  margin: 0;
  font-family: var(--wp--preset--font-family--bodoni-moda);
  line-height: 1.45;
}
.loc-test-name {
  margin: 0;
  color: var(--wp--preset--color--contrast-2);
  font-weight: 600;
}

/* Trust band — 4-up stat grid on accent-1 */
.loc-band-inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--40);
  align-items: start;
}
.loc-band-stat { text-align: center; }
.loc-band-num {
  margin: 0;
  font-family: var(--wp--preset--font-family--bodoni-moda);
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.5rem);
  line-height: 1.05;
}
.loc-band-label {
  margin: 0.25rem 0 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
}

@media (max-width: 768px) {
  .loc-band-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  }
}

/* Local CTA — dark band, centered, layered bg/overlay fills */
.loc-cta {
  position: relative;
  background-color: var(--wp--preset--color--contrast);
  isolation: isolate;
}
.loc-cta-bg,
.loc-cta-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.loc-cta-overlay {
  background: linear-gradient(180deg, rgba(27, 94, 32, 0.18), rgba(28, 28, 26, 0));
}
.loc-cta-inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  align-items: center;
}
.loc-cta-title { margin: 0; }
.loc-cta-sub { margin: 0; opacity: 0.9; }
.loc-cta-actions { margin-top: var(--wp--preset--spacing--20); }
.loc-cta-primary .wp-block-button__link {
  background-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--base-4);
}
.loc-cta-secondary .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--base-4);
  border: 1px solid rgba(254, 252, 249, 0.5);
}
.loc-cta-secondary .wp-block-button__link:hover,
.loc-cta-secondary .wp-block-button__link:focus-visible {
  background: rgba(254, 252, 249, 0.1);
}

/* Catonsville page layout recovery */
.catonsville-hero {
  position: relative;
  overflow: hidden;
}

.catonsville-hero-header {
  position: relative;
  min-height: clamp(520px, 72vh, 760px);
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(28, 28, 26, 0.35), rgba(28, 28, 26, 0.58)),
    url('/wp-content/uploads/2026/05/catonsville-hero.webp') center 40% / cover no-repeat;
}

.catonsville-hero-header-inner {
  position: relative;
  width: min(100%, var(--wp--style--global--wide-size));
  min-height: inherit;
  margin-inline: auto;
  padding: var(--wp--preset--spacing--40);
  text-align: center;
}

.catonsville-hero-visual {
  display: contents !important;
}

.catonsville-hero-bg,
.catonsville-hero-overlay {
  display: none;
}

.catonsville-hero-breadcrumb,
.catonsville-hero-text {
  position: absolute;
  left: 50%;
  z-index: 5;
  width: min(880px, calc(100% - 4rem));
  transform: translateX(-50%);
}

.catonsville-hero-text {
  display: block !important;
  top: 36%;
  margin-block-start: 0;
  opacity: 1 !important;
  transform: translate(-50%, -50%);
  visibility: visible !important;
}

.catonsville-hero-breadcrumb {
  top: clamp(1.25rem, 3vw, 2.25rem);
  justify-content: center;
  margin-block-end: var(--wp--preset--spacing--30);
  color: rgba(254, 252, 249, 0.84) !important;
  font-size: 0.92rem;
}

.catonsville-hero-breadcrumb,
.catonsville-hero-breadcrumb *,
.catonsville-hero-breadcrumb a {
  color: inherit;
}

.catonsville-hero-breadcrumb a {
  color: rgba(254, 252, 249, 0.92) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.catonsville-hero-eyebrow {
  display: inline-flex;
  margin-block-end: var(--wp--preset--spacing--20);
  padding: 0.45rem 0.8rem;
  color: var(--wp--preset--color--base-4) !important;
  background: var(--wp--preset--color--accent-1);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1;
}

.catonsville-hero-title,
.catonsville-hero-deck {
  display: block !important;
  max-width: 880px;
  margin-inline: auto;
  color: var(--wp--preset--color--base-4) !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.32);
}

.catonsville-hero-deck {
  margin-block-start: var(--wp--preset--spacing--20);
  color: rgba(254, 252, 249, 0.9) !important;
}

.catonsville-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  margin-block-start: calc(var(--wp--preset--spacing--50) * -1);
  padding-inline: var(--wp--preset--spacing--40);
}

.catonsville-hero-content-inner {
  max-width: var(--wp--style--global--wide-size);
  box-sizing: border-box;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: var(--wp--preset--spacing--40);
  align-items: stretch;
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(27, 94, 32, 0.1);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(28, 28, 26, 0.12);
}

.catonsville-hero-intro {
  align-self: center;
}

.catonsville-hero-description {
  max-width: 780px;
  margin-block-end: var(--wp--preset--spacing--30);
}

.catonsville-hero-actions {
  gap: var(--wp--preset--spacing--20) !important;
}

.catonsville-hero-phone .wp-block-button__link {
  background: var(--wp--preset--color--accent-1);
}

.catonsville-hero-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--20);
}

.catonsville-badge {
  padding: var(--wp--preset--spacing--30);
  text-align: center;
  box-shadow: 0 10px 24px rgba(28, 28, 26, 0.05);
}

.catonsville-badge-number,
.catonsville-badge-label {
  margin: 0;
}

.catonsville-badge-number {
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.2rem) !important;
}

.catonsville-badge-label {
  margin-block-start: 0.25rem;
}

.catonsville-story-inner,
.catonsville-services-inner,
.catonsville-why-inner,
.catonsville-team .ct-inner,
.catonsville-emergency-inner,
.catonsville-reviews-inner,
.catonsville-neighborhoods-inner,
.catonsville-cta-inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}

/* Catonsville — Meet the Team grid (cards were unstyled: .ct-grid/.ct-card had no rules) */
.catonsville-team .ct-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40);
  margin-block-start: var(--wp--preset--spacing--50);
}

.catonsville-team .ct-card {
  min-height: 100%;
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(27, 94, 32, 0.09);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(28, 28, 26, 0.05);
}

.catonsville-team .ct-info {
  padding: var(--wp--preset--spacing--40);
}

.catonsville-team .ct-name {
  margin-block: 0;
}

.catonsville-team .ct-role {
  margin-block: 0.35rem 0.6rem;
  font-weight: 600;
}

.catonsville-team .ct-bio {
  margin-block: 0;
}

@media (max-width: 880px) {
  .catonsville-team .ct-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }
}

.catonsville-story-body {
  max-width: 920px;
}

.catonsville-services-grid,
.catonsville-why-grid,
.catonsville-reviews-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
  margin-block-start: var(--wp--preset--spacing--40);
}

.catonsville-service-card,
.catonsville-why-card,
.catonsville-review-card {
  min-height: 100%;
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(27, 94, 32, 0.09);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(28, 28, 26, 0.05);
}

.catonsville-service-card--emergency {
  border-left: 4px solid var(--wp--preset--color--accent-3);
}

/* Service card icons — empty divs by design (mask-image supplies the glyph).
   Mask goes on a ::before layered over the circle, NOT on the circle itself —
   masking the div directly erases everything outside the glyph, including
   the circular background (confirmed visually: glyph floated with no badge). */
.catonsville-service-icon {
  position: relative;
  width: 48px;
  height: 48px;
  margin-block-end: var(--wp--preset--spacing--20);
  background-color: var(--wp--preset--color--accent-1);
  border-radius: 50%;
  flex-shrink: 0;
}
.catonsville-service-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--wp--preset--color--base-4);
  mask-size: 55%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: 55%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}
.catonsville-icon-waterheater::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202s-6%207-6%2011a6%206%200%200012%200c0-4-6-11-6-11z%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202s-6%207-6%2011a6%206%200%200012%200c0-4-6-11-6-11z%27%2F%3E%3C%2Fsvg%3E"); }
.catonsville-icon-drain::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202v10m0%200c-4%200-8-2-8-5m8%205c4%200%208-2%208-5M6%2017v3a2%202%200%20002%202h8a2%202%200%20002-2v-3%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202v10m0%200c-4%200-8-2-8-5m8%205c4%200%208-2%208-5M6%2017v3a2%202%200%20002%202h8a2%202%200%20002-2v-3%27%2F%3E%3C%2Fsvg%3E"); }
.catonsville-icon-pump::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278%27%2F%3E%3Cpath%20d%3D%27M12%208v4l3%203%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278%27%2F%3E%3Cpath%20d%3D%27M12%208v4l3%203%27%2F%3E%3C%2Fsvg%3E"); }
.catonsville-icon-toilet::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M6%204h10v5H6z%27%2F%3E%3Cpath%20d%3D%27M5%209h12a3%203%200%20013%203v2a3%203%200%2001-3%203H8a3%203%200%2001-3-3v-2a3%203%200%20013-3z%27%2F%3E%3Cpath%20d%3D%27M9%2017v2a2%202%200%20002%202h2a2%202%200%20002-2v-2%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M6%204h10v5H6z%27%2F%3E%3Cpath%20d%3D%27M5%209h12a3%203%200%20013%203v2a3%203%200%2001-3%203H8a3%203%200%2001-3-3v-2a3%203%200%20013-3z%27%2F%3E%3Cpath%20d%3D%27M9%2017v2a2%202%200%20002%202h2a2%202%200%20002-2v-2%27%2F%3E%3C%2Fsvg%3E"); }
.catonsville-icon-pipe::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M4%206h4v12H4zM16%206h4v12h-4zM8%2010h8M8%2014h8%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M4%206h4v12H4zM16%206h4v12h-4zM8%2010h8M8%2014h8%27%2F%3E%3C%2Fsvg%3E"); }
.catonsville-icon-gas::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202c-2%204-6%206-6%2010a6%206%200%200012%200c0-4-4-6-6-10z%27%2F%3E%3Cpath%20d%3D%27M12%2018a2%202%200%20002-2c0-2-2-3-2-3s-2%201-2%203a2%202%200%20002%202z%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202c-2%204-6%206-6%2010a6%206%200%200012%200c0-4-4-6-6-10z%27%2F%3E%3Cpath%20d%3D%27M12%2018a2%202%200%20002-2c0-2-2-3-2-3s-2%201-2%203a2%202%200%20002%202z%27%2F%3E%3C%2Fsvg%3E"); }
.catonsville-icon-leak::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M4%208h8%27%2F%3E%3Cpath%20d%3D%27M8%208v2c0%203%203%205%203%208a3%203%200%2001-6%200c0-3%203-5%203-8z%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M4%208h8%27%2F%3E%3Cpath%20d%3D%27M8%208v2c0%203%203%205%203%208a3%203%200%2001-6%200c0-3%203-5%203-8z%27%2F%3E%3C%2Fsvg%3E"); }
.catonsville-icon-emergency::before { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l10%2018H2z%27%2F%3E%3Cpath%20d%3D%27M12%2010v4%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2717%27%20r%3D%270.75%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l10%2018H2z%27%2F%3E%3Cpath%20d%3D%27M12%2010v4%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2717%27%20r%3D%270.75%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E"); }

/* "Why choose us" card accent — a separator block; without this it renders
   as a default full-width gray <hr>. */
.catonsville-why-card-accent {
  width: 40px;
  height: 3px;
  margin: 0 0 var(--wp--preset--spacing--20);
  background-color: var(--wp--preset--color--accent-1);
  border: none;
  opacity: 1;
}

.catonsville-service-name,
.catonsville-why-card-title {
  margin-block: var(--wp--preset--spacing--20) 0.35rem;
}

.catonsville-service-desc,
.catonsville-why-card-text,
.catonsville-review-text {
  margin-block: 0;
  color: var(--wp--preset--color--contrast-2);
  line-height: 1.65;
}

.catonsville-why-grid,
.catonsville-reviews-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catonsville-neighborhoods-inner,
.catonsville-cta-inner {
  text-align: center;
}

.catonsville-neighborhoods-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  margin-block-start: var(--wp--preset--spacing--40);
}

.catonsville-tag {
  margin: 0;
  padding: 0.6rem 0.95rem;
  color: var(--wp--preset--color--accent-1);
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(27, 94, 32, 0.1);
  border-radius: 999px;
  font-weight: 700;
}

.catonsville-emergency-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wp--preset--spacing--40);
  align-items: center;
}

.catonsville-emergency-actions,
.catonsville-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
}

@media (max-width: 1100px) {
  .catonsville-hero-content-inner,
  .catonsville-emergency-inner {
    grid-template-columns: 1fr;
  }

  .catonsville-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catonsville-why-grid,
  .catonsville-reviews-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .catonsville-hero-header {
    min-height: 560px;
  }

  .catonsville-hero-header-inner,
  .catonsville-hero-content {
    padding-inline: var(--wp--preset--spacing--30);
  }

  .catonsville-hero-content-inner {
    width: 100%;
    box-sizing: border-box;
    padding: var(--wp--preset--spacing--30);
  }

  .catonsville-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .catonsville-hero-actions .wp-block-button,
  .catonsville-hero-actions .wp-block-button__link {
    width: 100%;
    box-sizing: border-box;
  }

  .catonsville-hero-badges,
  .catonsville-services-grid {
    grid-template-columns: 1fr;
  }
}

.loc-local-details {
  background: var(--wp--preset--color--base-4);
}

.loc-local-details .loc-local-inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}

.loc-local-details .loc-local-kicker {
  margin-block-end: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--accent-2);
  font-size: clamp(0.9rem, 0.86rem + 0.16vw, 1rem);
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.loc-local-details .loc-local-title {
  max-width: 760px;
  margin-block: 0 var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--bodoni-moda);
  line-height: 1.1;
}

.loc-local-details .loc-local-intro {
  max-width: 780px;
  margin-block: 0 var(--wp--preset--spacing--50);
  color: var(--wp--preset--color--contrast-2);
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1.65;
}

.loc-local-details .loc-detail-grid,
.loc-local-details .loc-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
}

.loc-local-details .loc-detail-card,
.loc-local-details .loc-faq-card {
  min-height: 100%;
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--base);
  border: 1px solid rgba(27, 94, 32, 0.09);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(28, 28, 26, 0.05);
}

.loc-local-details .loc-detail-card h3,
.loc-local-details .loc-faq-card h3 {
  margin-block: 0 var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--bodoni-moda);
  font-size: clamp(1.25rem, 1.1rem + 0.35vw, 1.45rem);
  line-height: 1.2;
}

.loc-local-details .loc-detail-card p,
.loc-local-details .loc-faq-card p {
  margin-block: 0;
  color: var(--wp--preset--color--contrast-2);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.65;
}

.loc-local-details .loc-faq-title {
  margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
  font-family: var(--wp--preset--font-family--bodoni-moda);
  line-height: 1.15;
}

.loc-local-details .loc-nearby-links {
  margin-block: var(--wp--preset--spacing--50) 0;
  color: var(--wp--preset--color--contrast-2);
  line-height: 1.75;
}

.loc-local-details .loc-nearby-links a {
  color: var(--wp--preset--color--accent-1);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

@media (max-width: 900px) {
  .loc-local-details .loc-detail-grid,
  .loc-local-details .loc-faq-grid {
    grid-template-columns: 1fr;
  }
}

/* Shared native category-card component (Services hub + Homepage services).
   Card = real wp:image + body; equal-height in any native grid. Replaced the
   former nth-child ::before photos + CSS mask icons + per-block custom-CSS. */
.svc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.svc-card:hover {
  transform: translateY(-4px);
}

.svc-card .wp-block-image,
.svc-card .wp-block-image img {
  margin: 0;
  display: block;
  width: 100%;
}

.svc-card .svc-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.svc-card .svc-card-count {
  margin-top: auto;
}

/* Card title with accent underline (homepage service cards) */
.svc-card .svc-card-title {
  margin: 0;
  padding-bottom: var(--wp--preset--spacing--20);
  border-bottom: 2px solid var(--wp--preset--color--accent-1);
}

/* Branded bullet list inside cards */
.svc-card .svc-card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}
.svc-card .svc-card-list li {
  position: relative;
  padding-left: var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--contrast-2);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}
.svc-card .svc-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
}

/* Homepage "Where We Work" — area list city links */
.areas .area-list li a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.areas .area-list li a:hover,
.areas .area-list li a:focus-visible {
  color: var(--wp--preset--color--accent-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.services-full-list .services-list-group {
  border: 1px solid rgba(27, 94, 32, 0.1);
  border-radius: 8px;
  padding: clamp(1.5rem, 2vw, 2rem);
  box-shadow: 0 16px 34px rgba(28, 28, 26, 0.06);
}

.services-full-list .services-list-group-title {
  margin-block-end: 1rem;
}

.services-full-list .services-list-group ul,
.services-full-list .services-list-group ol {
  margin-block: 0;
  padding-inline-start: 1.2rem;
}

.services-full-list .services-list-group li + li {
  margin-block-start: 0.55rem;
}

.services-why .services-why-card {
  position: relative;
  overflow: hidden;
}

.services-why .services-why-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--wp--preset--color--accent-1), var(--wp--preset--color--accent-2));
  opacity: 0.82;
}

@media (max-width: 768px) {
  .services-full-list .services-list-group {
    padding: 1.25rem;
  }
}

/* === Motion layer (2026-06-12): tasteful keyframe enhancements, reduced-motion-guarded === */
/* Home hero — deliberately static. Transforming the entire background container
   during the Ken Burns animation made the image's compositor layer visibly
   shift after scrolling away from and back to the hero on some devices. The
   fixed background-position below still provides the intended team framing. */
.hero .hero-visual { overflow: hidden; }
.js .hero .hero-visual { animation: none; will-change: auto; }
/* Hero green accent rule draws in on load */
.js .hero .hero-accent-rule { animation: accentLineGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
/* Primary CTA — subtle light sheen sweep on hover */
.wp-block-button__link { position: relative; overflow: hidden; }
.wp-block-button__link::after {
  content: ""; position: absolute; top: 0; left: -125%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); pointer-events: none; opacity: 0;
}
.js .wp-block-button__link:hover::after { animation: ctaSheen 0.85s ease-out; }
@keyframes ctaSheen {
  0% { left: -125%; opacity: 1; }
  100% { left: 135%; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero .hero-visual,
  .js .hero .hero-accent-rule { animation: none; }
  .wp-block-button__link::after { display: none; }
}

/* ===================================================
   :::SECTION:Location Maps (OpenStreetMap embed):::
   Token-based map component. Real, keyless, interactive
   street map per location page. Lives in the loc-map shell.
   =================================================== */
.loc-map-wrap {
  max-width: 1100px;
  margin-inline: auto;
}
.loc-map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(28, 28, 26, 0.08);
  box-shadow: 0 18px 48px -16px rgba(28, 28, 26, 0.30);
  background: var(--wp--preset--color--base-2);
}
.loc-map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* gentle de-saturation so the map reads as on-brand, not a raw OSM tile */
  filter: saturate(0.92) contrast(1.02);
}
.loc-map-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 0.9rem;
  font-size: 0.95rem;
}
.loc-map-caption .loc-map-label { color: var(--wp--preset--color--contrast-2); margin: 0; }
.loc-map-caption a {
  color: var(--wp--preset--color--accent-1);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.loc-map-caption a:hover,
.loc-map-caption a:focus-visible { text-decoration: underline; }
@media (max-width: 600px) {
  .loc-map-embed { aspect-ratio: 4 / 3; }
}

/* ===================================================
   :::SECTION:Team — Featured Owner Card:::
   Horizontal "featured" card for the owner. Reuses the
   theme card system (has-md-shadow hover-lift + accent
   border). Layout-only here; no giant portrait.
   =================================================== */
.team-featured { overflow: hidden; }
.team-featured > .wp-block-columns {
  gap: 0 !important;
  align-items: stretch;
  margin: 0;
}
.team-featured .team-featured-media { padding: 0; }
.team-featured .team-featured-media figure,
.team-featured .team-featured-media img {
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.team-featured .team-featured-media img {
  object-fit: cover;
  aspect-ratio: auto;
  min-height: 340px;
  border-radius: 0;
}
.team-featured .team-featured-body {
  padding: clamp(1.5rem, 3vw, var(--wp--preset--spacing--60));
}
@media (max-width: 781px) {
  .team-featured .team-featured-media img { aspect-ratio: 4 / 3; min-height: 0; }
}

/* Hero image framing: push the photo up so the team sits higher in the frame
   and the headline lands on the emptier lower portion. Overrides the block's
   centered position via higher specificity. */
:root .hero .hero-visual {
  background-position: center 30%;
}

/* Hero overlay: strengthen the cream scrim so the headline reads against the
   team photo (the photo carries its own logo text). Top stays visible; the
   image fades to cream where the H1/subtext sit. Overrides the block's inline
   gradient via higher specificity (:root) — no !important needed. */
:root .hero .hero-visual-overlay {
  background: linear-gradient(
    to bottom,
    rgba(245, 240, 232, 0.05) 0%,
    rgba(245, 240, 232, 0.10) 42%,
    rgba(245, 240, 232, 0.50) 66%,
    rgba(245, 240, 232, 0.93) 84%,
    var(--wp--preset--color--base) 96%
  );
}

/* Header phone -> CTA button (matches the mobile "Call" button: accent-3 red,
   figtree UI font instead of the serif). Higher specificity overrides the
   header block's inline link styling. */
:root .site-header .site-nav-phone {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--wp--preset--color--base-4);
  background: var(--wp--preset--color--accent-3);
  padding: 0.6rem 1.05rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background-color 0.2s, transform 0.2s;
}
:root .site-header .site-nav-phone:hover {
  background: var(--wp--preset--color--accent-4);
  color: var(--wp--preset--color--base-4);
  transform: translateY(-1px);
}

/* Header social icons — links to Metcalf's real profiles (same URLs the theme's
   schema sameAs list already uses). Mirrors production's header treatment, which
   hides these on mobile — the mobile menu drawer gets its own icon row instead,
   see .mm-social below. */
:root .site-header .site-social-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
:root .site-header .site-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(27, 94, 32, 0.16);
  color: var(--wp--preset--color--contrast);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
:root .site-header .site-social-icons svg {
  width: 16px;
  height: 16px;
}
:root .site-header .site-social-icons a:hover,
:root .site-header .site-social-icons a:focus-visible {
  background: var(--wp--preset--color--accent-1);
  border-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base-4);
}

/* Marquee bar — scrolling trust ticker (readable + paint-stable).
   The track's scroll animation (marqueeScroll 40s linear infinite) lives in the
   block's own inline CSS. Here we only keep the bar's background solid and on
   its own compositing layer so it paints stably while the page scrolls.
   IMPORTANT: do NOT set `transform` on .marquee-track — a static transform
   overrides the animation and freezes the scroll (that was the earlier bug). */
.marquee-bar {
  position: relative;
  overflow: hidden;
  background-color: var(--wp--preset--color--contrast) !important;
  /* NOTE (2026-07-10): removed transform: translateZ(0) layer promotion here.
     Together with will-change on the track it forced a cached GPU backing
     store that rasterized once and got stuck at a shrunk size after scrolling
     to the page bottom and back, shrinking the marquee until refresh. */
  /* Hold the bar's height so it can never collapse/"shrink": this floor equals
     the natural height (small text + the top/bottom spacing-20 padding), so it
     changes nothing at rest. */
  min-height: calc(1.65rem + (var(--wp--preset--spacing--20) * 2));
}

/* Brand-green separators instead of the default faint white dots. */
.marquee-bar .marquee-sep {
  color: var(--wp--preset--color--accent-2) !important;
  opacity: 1;
}

/* The animated track is intentionally NOT force-promoted to a persistent GPU
   layer (2026-07-10). will-change: transform + backface-visibility rasterized
   the track once and reused that backing store; after scrolling to the bottom
   and back, the cached layer got stuck at a shrunk size until refresh. The
   infinite transform animation still composites fine without these hints. If
   sub-pixel text shimmer returns on some devices, prefer a lighter fix than
   will-change (e.g. transform: translateZ(0) only while animating). */

/* Premium edge-fade: the scrolling text dissolves into the bar at both ends
   instead of hard-clipping at the viewport edge. Solid bar is preserved.
   Sized with % (of .marquee-bar itself, its containing block) rather than vw:
   vw tracks the raw browser viewport, which shifts by the scrollbar's width
   whenever an overlay scrollbar shows/hides during scroll, making this fade
   visibly recompute at the left/right edges on every scroll event. % ties it
   to .marquee-bar's own (already scrollbar-stable) rendered width instead. */
.marquee-bar::before,
.marquee-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 7%, 110px);
  z-index: 2;
  pointer-events: none;
  /* Own stable compositing layer, independent of .marquee-track's lifecycle.
     .marquee-track's will-change is toggled on/off by an IntersectionObserver
     (see script.js) as the bar scrolls out of and back into view, tearing
     down and rebuilding its GPU layer each time. These pseudo-elements are a
     sibling's overlay painted on top (z-index 2) — without their own layer,
     that teardown/rebuild cycle can leave them stuck unpainted (correct
     computed styles, blank on screen) until something else forces a repaint.
     They're static (never change size/position/content), so — unlike the
     track's width:max-content sizing — persistently compositing them here
     carries none of the risk that caused the original stuck/shrunk-track bug. */
  transform: translateZ(0);
}

.marquee-bar::before {
  left: 0;
  background: linear-gradient(to right, var(--wp--preset--color--contrast), transparent);
}

.marquee-bar::after {
  right: 0;
  background: linear-gradient(to left, var(--wp--preset--color--contrast), transparent);
}

/* ===================================================
   :::SECTION:Mobile Menu — Polish & Bold Entrance:::
   ---------------------------------------------------
   Elevates the existing Ollie (.mm-*) slide-in panel:
   crafted texture, clean focus handling (no auto-focus
   box), and a staggered content cascade on open.
   =================================================== */
@media (max-width: 1200px) {

  /* Faint crafted dot-grid texture on the scroll body */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-scroll {
    background-image: radial-gradient(circle, rgba(27, 94, 32, 0.05) 1px, transparent 1.4px);
    background-size: 22px 22px;
    background-attachment: local;
  }

  /* Premium accent edge on the sliding panel */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-shell {
    border-left: 3px solid var(--wp--preset--color--accent-1) !important;
  }

  /* Kill the awkward green box when focus auto-lands on the first link
     (pointer/menu-open), but keep a clean ring for real keyboard nav. */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links a:focus:not(:focus-visible) {
    outline: none !important;
    background: transparent !important;
    color: var(--wp--preset--color--contrast) !important;
    border-left-color: transparent !important;
    padding-left: 0.25rem !important;
  }
  /* Keyboard focus: clean left-bar highlight, never a full outline box. */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links a:focus,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-links a:focus-visible {
    background: rgba(27, 94, 32, 0.07) !important;
    color: var(--wp--preset--color--accent-1) !important;
    border-left-color: var(--wp--preset--color--accent-1) !important;
    padding-left: 0.65rem !important;
  }

  /* --- Bold staggered entrance cascade --- */
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-scroll > * {
    opacity: 0;
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-scroll > *:nth-child(1) { animation-delay: 0.06s; }
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-scroll > *:nth-child(2) { animation-delay: 0.13s; }
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-scroll > *:nth-child(3) { animation-delay: 0.20s; }
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-scroll > *:nth-child(4) { animation-delay: 0.27s; }
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-scroll > *:nth-child(5) { animation-delay: 0.34s; }

  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot {
    opacity: 0;
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.30s forwards;
  }
}

@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-scroll > *,
  .site-nav-links .wp-block-navigation__responsive-container.is-menu-open .mm-foot {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* Button hover polish lives in the pre-existing "PREMIUM POLISH — Premium
   Button States" section above (corner highlight + lift). No duplicate here. */

/* ===================================================
   :::SECTION:Scroll Reveal + Hover Polish:::
   Progressive enhancement — without JS (or with reduced motion) the
   .reveal-ready class is never added, so all content stays fully visible.
   =================================================== */

html.reveal-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

html.reveal-ready .reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Service cards: add depth on the existing lift + subtle image zoom */
.svc-card:hover {
  box-shadow: 0 18px 40px -14px rgba(27, 94, 32, 0.22);
}

.svc-card .wp-block-image img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-card:hover .wp-block-image img {
  transform: scale(1.05);
}

/* Location & Catonsville cards were static — give them a tasteful hover lift */
.loc-local-details .loc-detail-card,
.loc-local-details .loc-faq-card,
.catonsville-why-card,
.catonsville-review-card,
.ct-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}

.loc-local-details .loc-detail-card:hover,
.loc-local-details .loc-faq-card:hover,
.catonsville-why-card:hover,
.catonsville-review-card:hover,
.ct-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -12px rgba(27, 94, 32, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .svc-card:hover,
  .svc-card:hover .wp-block-image img,
  .loc-local-details .loc-detail-card:hover,
  .loc-local-details .loc-faq-card:hover,
  .catonsville-why-card:hover,
  .catonsville-review-card:hover,
  .ct-card:hover { transform: none; }
}

/* ===================================================
   :::SECTION:Visible Breadcrumb (inner pages):::
   =================================================== */
.mp-breadcrumb {
  background: var(--wp--preset--color--base);
  border-bottom: 1px solid rgba(27, 94, 32, 0.08);
  padding: 0.6rem var(--wp--preset--spacing--40);
}

.mp-breadcrumb-list {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  list-style: none;
  padding: 0;
  font-size: var(--wp--preset--font-size--small);
}

.mp-breadcrumb-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

.mp-breadcrumb-list li:not(:first-child)::before {
  content: '/';
  color: rgba(27, 94, 32, 0.35);
}

.mp-breadcrumb-list a {
  color: var(--wp--preset--color--contrast-2);
  text-decoration: none;
  transition: color 0.15s ease;
}

.mp-breadcrumb-list a:hover {
  color: var(--wp--preset--color--accent-1);
}

.mp-breadcrumb-current {
  color: var(--wp--preset--color--contrast);
  font-weight: 500;
}

/* Homepage/hub category card titles are links — keep them on-brand, reveal on hover. */
.svc-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.svc-card-title a:hover,
.svc-card:hover .svc-card-title a {
  color: var(--wp--preset--color--accent-1);
}



/* ===================================================
   :::SECTION:Homepage Section Styles (migrated from inline blobs):::
   Moved out of page 16 per-block inline css so the homepage is editable in
   the block editor. Generated by the theme CSS compiler keyed on each
   section class; KSES-mangled % decoded (restores the intended noise
   textures that were silently broken).
   =================================================== */

/* ===== Marquee Bar (.marquee-bar) ===== */
:root :where(.marquee-bar) {
background: var(--wp--preset--color--contrast);
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
letter-spacing: 0.02em;
overflow: hidden;
white-space: nowrap;
}
:root :where(.marquee-bar) .marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 40s linear infinite;
}
:root :where(.marquee-bar) .marquee-content {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  padding-right: var(--wp--preset--spacing--40);
}
:root :where(.marquee-bar) .marquee-item {
  flex-shrink: 0;
}
:root :where(.marquee-bar) .marquee-sep {
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* ===== Hero Section (.hero) ===== */
:root :where(.hero) {
  min-height: 75vh;
  display: grid;
  grid-template-rows: minmax(18rem, 1fr) auto auto;
  gap: 0;
  background: var(--wp--preset--color--base);
}
:root :where(.hero) .hero-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
:root :where(.hero) .hero-visual-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(245, 240, 232, 0.15) 0%,
      rgba(245, 240, 232, 0.05) 15%,
      rgba(245, 240, 232, 0.35) 45%,
      rgba(245, 240, 232, 0.88) 72%,
      var(--wp--preset--color--base) 92%
    );
}
:root :where(.hero) .hero-text-area {
  position: relative;
  z-index: 2;
  padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  max-width: var(--wp--style--global--wide-size);
  width: 100%;
  margin: 0 auto;
  animation: heroReveal 0.9s ease-out both;
}
:root :where(.hero) .hero-accent-rule {
  width: 52px;
  height: 3px;
  background: var(--wp--preset--color--accent-1);
  border-radius: 2px;
  margin-bottom: var(--wp--preset--spacing--30);
}
:root :where(.hero) .hero-headline {
margin: 0;
}
:root :where(.hero) .hero-line-1 {
  display: block;
  font-size: var(--wp--preset--font-size--display);
  color: var(--wp--preset--color--accent-1);
  letter-spacing: -0.03em;
}
:root :where(.hero) .hero-line-2 {
  display: block;
  font-size: var(--wp--preset--font-size--display-sub);
  font-family: var(--wp--preset--font-family--figtree);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast-2);
  margin-top: var(--wp--preset--spacing--20);
}
:root :where(.hero) .hero-region {
margin-top: var(--wp--preset--spacing--30);
}
:root :where(.hero) .hero-content {
background: var(--wp--preset--color--base);
padding: var(--wp--preset--spacing--40);
animation: heroReveal 0.8s ease-out 0.2s both;
}
:root :where(.hero) .hero-content-inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1px 0.6fr;
  gap: var(--wp--preset--spacing--50);
  align-items: start;
}
:root :where(.hero) .hero-content-divider {
  background: var(--wp--preset--color--accent-1);
  opacity: 0.12;
  align-self: stretch;
  border-radius: 1px;
}
:root :where(.hero) .hero-intro {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
:root :where(.hero) .hero-tagline {
margin: 0;
max-width: 480px;
}
:root :where(.hero) :where(.hero-cta .wp-block-button__link) {
display: inline-block;
background: var(--wp--preset--color--accent-3);
color: var(--wp--preset--color--base-4);
text-decoration: none;
padding: 0.875rem var(--wp--preset--spacing--40);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
border-radius: 6px;
letter-spacing: 0.01em;
align-self: flex-start;
transition: background-color 0.25s, transform 0.2s;
}
:root :where(.hero) :where(.hero-cta:hover .wp-block-button__link) {
background: var(--wp--preset--color--accent-4);
transform: translateY(-2px);
}
:root :where(.hero) .hero-rating {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  margin-top: var(--wp--preset--spacing--20);
}
:root :where(.hero) .hero-side {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
:root :where(.hero) .hero-side-label {
margin: 0;
}
:root :where(.hero) .hero-side-detail {
margin: 0;
}
:root :where(.hero) .hero-side-sub {
margin: 0;
}
:root :where(.hero) .hero-usp-bar {
background: var(--wp--preset--color--accent-1);
padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
animation: heroReveal 0.7s ease-out 0.4s both;
}
:root :where(.hero) .hero-usp-inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: var(--wp--preset--spacing--40);
  flex-wrap: wrap;
}
:root :where(.hero) .hero-usp-item {
color: rgba(255, 255, 255, 0.95);
white-space: nowrap;
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--20);
}
:root :where(.hero) .hero-usp-item::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  background: var(--wp--preset--color--base);
  border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 1024px){
:root :where(.hero) .hero-content-inner {
    gap: var(--wp--preset--spacing--40);
  }
}
@media (max-width: 768px){
:root :where(.hero) {
    min-height: auto;
    grid-template-rows: minmax(48vh, auto) auto auto;
    --font-size-display: clamp(3.5rem, 16vw, 5rem);
    --font-size-display-sub: clamp(1rem, 2.5vw, 1.25rem);
  }
:root :where(.hero) .hero-text-area {
    padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
  }
:root :where(.hero) .hero-content {
padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
:root :where(.hero) .hero-content-inner {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
  }
:root :where(.hero) .hero-content-divider {
    display: none;
  }
:root :where(.hero) .hero-usp-bar {
padding: var(--wp--preset--spacing--30);
}
:root :where(.hero) .hero-usp-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--20);
  }
}
@media (max-width: 480px){
:root :where(.hero) {
    --font-size-display: clamp(3rem, 17vw, 4rem);
  }
:root :where(.hero) .hero-tagline {
font-size: var(--wp--preset--font-size--medium);
}
}

/* ===== Trust Band Section (.trust-band) ===== */
:root :where(.trust-band) {
background: var(--wp--preset--color--accent-1);
}
:root :where(.trust-band) .trust-band-inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
}
:root :where(.trust-band) .trust-band-headline {
text-align: center;
margin-bottom: var(--wp--preset--spacing--50);
}
:root :where(.trust-band) .trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--40);
}
:root :where(.trust-band) .trust-card {
  text-align: center;
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}
:root :where(.trust-band) .trust-number {
display: block;
line-height: 1;
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.trust-band) .trust-label {
display: block;
color: rgba(255, 255, 255, 0.9);
margin-bottom: var(--wp--preset--spacing--30);
}
:root :where(.trust-band) .trust-desc {
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
}
@media (max-width: 1024px){
:root :where(.trust-band) .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px){
:root :where(.trust-band) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.trust-band) .trust-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--30);
  }
:root :where(.trust-band) .trust-card {
    padding: var(--wp--preset--spacing--30);
  }
}
@media (max-width: 480px){
:root :where(.trust-band) .trust-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== About Section (.about) ===== */
:root :where(.about) {
background: var(--wp--preset--color--base-4);
position: relative;
}
:root :where(.about)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%27200%27%20height%3D%27200%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.025%27%2F%3E%3C%2Fsvg%3E");
  pointer-events: none;
  z-index: 0;
}
:root :where(.about) .about-inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--50);
  align-items: center;
  position: relative;
  z-index: 1;
}
:root :where(.about) .about-headline {
line-height: 1.15;
margin-bottom: var(--wp--preset--spacing--40);
}
:root :where(.about) .about-body {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
:root :where(.about) .about-body p {
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast-2);
  line-height: 1.75;
}
:root :where(.about) .about-image {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 420px;
}
:root :where(.about) .about-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(27, 94, 32, 0.85) 0%,
    rgba(27, 94, 32, 0.2) 50%,
    transparent 100%
  );
}
:root :where(.about) .about-image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--wp--preset--spacing--40);
  z-index: 2;
}
:root :where(.about) .about-caption-name {
display: block;
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.about) .about-caption-detail {
display: block;
}
@media (max-width: 768px){
:root :where(.about) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.about) .about-inner {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
  }
:root :where(.about) .about-image {
    min-height: 300px;
  }
}

/* ===== Testimonials Section (.testimonials) ===== */
:root :where(.testimonials) {
background: var(--wp--preset--color--base);
}
:root :where(.testimonials) .testimonials-inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
}
:root :where(.testimonials) .testimonials-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: var(--wp--preset--spacing--40);
  margin-top: var(--wp--preset--spacing--40);
}
:root :where(.testimonials) .testimonial-card {
  background: var(--wp--preset--color--base-4);
  border-radius: 8px;
  padding: var(--wp--preset--spacing--40);
  border: 1px solid rgba(27, 94, 32, 0.06);
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
:root :where(.testimonials) .testimonial-featured {
  border-left: 4px solid var(--wp--preset--color--accent-3);
}
:root :where(.testimonials) .testimonial-quote {
font-size: var(--wp--preset--font-size--medium);
font-style: italic;
}
:root :where(.testimonials) .testimonial-featured .testimonial-quote {
  font-size: var(--wp--preset--font-size--lg);
}
:root :where(.testimonials) .testimonial-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 768px){
:root :where(.testimonials) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.testimonials) .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }
}

/* ===== Service Areas Section (.areas) ===== */
:root :where(.areas) {
background: var(--wp--preset--color--base-4);
position: relative;
}
:root :where(.areas)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%27200%27%20height%3D%27200%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.025%27%2F%3E%3C%2Fsvg%3E");
  pointer-events: none;
  z-index: 0;
}
:root :where(.areas) .areas-inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--50);
  position: relative;
  z-index: 1;
}
:root :where(.areas) .areas-description {
margin-top: var(--wp--preset--spacing--30);
max-width: 520px;
}
:root :where(.areas) .areas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--40);
}
:root :where(.areas) .area-group-title {
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--30);
padding-bottom: var(--wp--preset--spacing--20);
border-bottom: 2px solid var(--wp--preset--color--accent-1);
}
:root :where(.areas) .area-list li {
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast-2);
  padding: var(--wp--preset--spacing--20) 0;
  border-bottom: 1px solid rgba(27, 94, 32, 0.06);
}
@media (max-width: 768px){
:root :where(.areas) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.areas) .areas-inner {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
  }
:root :where(.areas) .areas-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px){
:root :where(.areas) .areas-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }
}

/* ===== Contact Section (.contact) ===== */
:root :where(.contact) {
background: var(--wp--preset--color--accent-1);
position: relative;
}
:root :where(.contact)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, transparent 60%);
  pointer-events: none;
}
:root :where(.contact) .contact-inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--50);
  align-items: start;
  position: relative;
  z-index: 1;
}
:root :where(.contact) .contact-headline {
margin-bottom: var(--wp--preset--spacing--30);
}
:root :where(.contact) .contact-subtitle {
color: rgba(255, 255, 255, 0.8);
margin-bottom: var(--wp--preset--spacing--40);
}
:root :where(.contact) .contact-actions {
  display: flex;
  gap: var(--wp--preset--spacing--30);
  flex-wrap: wrap;
  margin-bottom: var(--wp--preset--spacing--50);
}
:root :where(.contact) .contact-meta {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
:root :where(.contact) .contact-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
:root :where(.contact) .contact-meta-label {
/* a11y: 0.6 opacity measured 3.95:1 on the Forest Green band; 0.75 clears
   AA at 5.22:1 while keeping the muted label treatment. */
color: rgba(255, 255, 255, 0.75);
}
:root :where(.contact) .contact-form-wrap {
background: var(--wp--preset--color--base-4);
border-radius: 8px;
padding: var(--wp--preset--spacing--40);
}
:root :where(.contact) .contact-form-title {
margin-bottom: var(--wp--preset--spacing--40);
}
:root :where(.contact) .contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
:root :where(.contact) .form-label {
display: flex;
flex-direction: column;
gap: 4px;
}
:root :where(.contact) .form-label span {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
}
:root :where(.contact) .form-input {
padding: 0.75rem var(--wp--preset--spacing--30);
border: 1px solid var(--wp--preset--color--base-3);
border-radius: 6px;
background: var(--wp--preset--color--base);
transition: border-color 0.2s;
outline: none;
}
:root :where(.contact) .form-input:focus {
  border-color: var(--wp--preset--color--accent-1);
}
:root :where(.contact) .form-textarea {
resize: vertical;
min-height: 100px;
}
:root :where(.contact) :where(.form-submit .wp-block-button__link) {
align-self: flex-start;
}
:root :where(.contact) .wp-block-button.form-submit {
margin-top: var(--wp--preset--spacing--20);
}
@media (max-width: 768px){
:root :where(.contact) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.contact) .contact-inner {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
  }
}
:root :where(.contact) .btn-primary .wp-block-button__link {
display: inline-block;
background: var(--wp--preset--color--accent-3);
color: var(--wp--preset--color--base-4);
text-decoration: none;
padding: 0.9375rem var(--wp--preset--spacing--40);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
font-family: var(--wp--preset--font-family--figtree);
border-radius: 6px;
border: none;
cursor: pointer;
letter-spacing: 0.01em;
transition: background-color 0.25s, transform 0.2s;
}
:root :where(.contact) .btn-primary:hover .wp-block-button__link {
background: var(--wp--preset--color--accent-4);
transform: translateY(-2px);
}
:root :where(.contact) .btn-outline .wp-block-button__link {
display: inline-block;
background: transparent;
color: var(--wp--preset--color--base-4);
text-decoration: none;
padding: 0.875rem var(--wp--preset--spacing--40);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
border-radius: 6px;
border: 2px solid rgba(255, 255, 255, 0.5);
transition: border-color 0.25s, background-color 0.25s;
}
:root :where(.contact) .btn-outline:hover .wp-block-button__link {
border-color: var(--wp--preset--color--base-4);
background: rgba(255, 255, 255, 0.1);
}


/* ===================================================
   :::SECTION:Service Page Section Styles (migrated from inline blobs):::
   Water Heaters / Drain / Garbage Disposals — moved out of per-block inline
   css so those pages are editable. Theme-compiler output; % decoded.
   =================================================== */

/* ===== water-heaters-hero (page 60) ===== */
:root :where(.water-heaters-hero) {
  background: var(--wp--preset--color--base);
}
:root :where(.water-heaters-hero) .water-heaters-hero-header {
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
:root :where(.water-heaters-hero) .water-heaters-hero-header-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.water-heaters-hero) .water-heaters-breadcrumb {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--contrast-2);
}
:root :where(.water-heaters-hero) .water-heaters-breadcrumb a {
  color: var(--wp--preset--color--contrast-2);
  text-decoration: none;
  transition: color 0.2s;
}
:root :where(.water-heaters-hero) .water-heaters-breadcrumb a:hover {
  color: var(--wp--preset--color--accent-1);
}
:root :where(.water-heaters-hero) .water-heaters-breadcrumb-sep {
  margin: 0 0.5em;
  opacity: 0.5;
}
:root :where(.water-heaters-hero) .water-heaters-breadcrumb-current {
  color: var(--wp--preset--color--contrast);
  font-weight: 600;
}
:root :where(.water-heaters-hero) .water-heaters-hero-visual {
  position: relative;
  min-height: 320px;
  max-height: 45vh;
  overflow: hidden;
  display: grid;
  align-items: end;
}
:root :where(.water-heaters-hero) .water-heaters-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
}
:root :where(.water-heaters-hero) .water-heaters-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(245, 240, 232, 0.08) 0%,
    rgba(245, 240, 232, 0.12) 25%,
    rgba(245, 240, 232, 0.35) 55%,
    rgba(245, 240, 232, 0.75) 80%,
    var(--wp--preset--color--base) 100%
  );
}
:root :where(.water-heaters-hero) .water-heaters-hero-text {
  position: relative;
  z-index: 2;
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
:root :where(.water-heaters-hero) .water-heaters-hero-eyebrow {
font-size: var(--wp--preset--font-size--small);
margin-bottom: var(--wp--preset--spacing--20);
display: flex;
align-items: center;
gap: 0.75em;
}
:root :where(.water-heaters-hero) .water-heaters-hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  background: var(--wp--preset--color--accent-1);
  border-radius: 2px;
}
:root :where(.water-heaters-hero) .water-heaters-hero-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
max-width: 680px;
}
:root :where(.water-heaters-hero) .water-heaters-hero-deck {
margin-top: var(--wp--preset--spacing--20);
max-width: 560px;
}
:root :where(.water-heaters-hero) .water-heaters-hero-content {
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  border-top: 1px solid rgba(27, 94, 32, 0.12);
}
:root :where(.water-heaters-hero) .water-heaters-hero-content-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--wp--preset--spacing--50);
  align-items: start;
}
:root :where(.water-heaters-hero) .water-heaters-hero-description {
max-width: 640px;
}
:root :where(.water-heaters-hero) .water-heaters-hero-actions {
  margin-top: var(--wp--preset--spacing--30);
  display: flex;
  gap: var(--wp--preset--spacing--30);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
:root :where(.water-heaters-hero) :where(.water-heaters-hero-cta .wp-block-button__link) {
display: inline-block;
background: var(--wp--preset--color--accent-3);
color: var(--wp--preset--color--base-4);
text-decoration: none;
padding: 0.9375rem var(--wp--preset--spacing--40);
font-family: var(--wp--preset--font-family--figtree);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
border-radius: 6px;
transition: background-color 0.25s, transform 0.2s;
}
:root :where(.water-heaters-hero) :where(.water-heaters-hero-cta:hover .wp-block-button__link) {
background: var(--wp--preset--color--accent-4);
transform: translateY(-2px);
}
:root :where(.water-heaters-hero) .water-heaters-hero-phone {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
  transition: color 0.2s;
}
:root :where(.water-heaters-hero) .water-heaters-hero-phone:hover {
  color: var(--wp--preset--color--accent-2);
}
:root :where(.water-heaters-hero) .water-heaters-hero-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
:root :where(.water-heaters-hero) .water-heaters-trust-badge {
background: var(--wp--preset--color--base-4);
border: 1px solid rgba(27, 94, 32, 0.1);
border-left: 3px solid var(--wp--preset--color--accent-1);
border-radius: 6px;
padding: var(--wp--preset--spacing--30);
display: flex;
flex-direction: column;
gap: 0.25rem;
}
@media (max-width: 1024px){
:root :where(.water-heaters-hero) .water-heaters-hero-content-inner {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
  }
:root :where(.water-heaters-hero) .water-heaters-hero-sidebar {
    flex-direction: row;
    gap: var(--wp--preset--spacing--30);
  }
:root :where(.water-heaters-hero) .water-heaters-trust-badge {
flex: 1;
}
}
@media (max-width: 768px){
:root :where(.water-heaters-hero) .water-heaters-hero-header {
    display: none;
  }
:root :where(.water-heaters-hero) .water-heaters-hero-visual {
    min-height: 240px;
  }
:root :where(.water-heaters-hero) .water-heaters-hero-text {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
  }
:root :where(.water-heaters-hero) .water-heaters-hero-content {
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  }
:root :where(.water-heaters-hero) .water-heaters-hero-sidebar {
    flex-direction: column;
  }
:root :where(.water-heaters-hero) .water-heaters-hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== water-heaters-types (page 60) ===== */
:root :where(.water-heaters-types) {
background: var(--wp--preset--color--base-4);
}
:root :where(.water-heaters-types) .water-heaters-types-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.water-heaters-types) .water-heaters-types-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.water-heaters-types) .water-heaters-types-subtitle {
max-width: 600px;
margin-bottom: var(--wp--preset--spacing--50);
}
:root :where(.water-heaters-types) .water-heaters-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}
:root :where(.water-heaters-types) .water-heaters-type-card {
background: var(--wp--preset--color--base);
border-radius: 8px;
padding: var(--wp--preset--spacing--40);
border: 1px solid rgba(27, 94, 32, 0.08);
transition: box-shadow 0.3s, transform 0.3s;
}
:root :where(.water-heaters-types) .water-heaters-type-card:hover {
  box-shadow: var(--wp--preset--shadow--lg);
  transform: translateY(-4px);
}
:root :where(.water-heaters-types) .water-heaters-type-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
  margin-bottom: var(--wp--preset--spacing--30);
  position: relative;
}
:root :where(.water-heaters-types) .water-heaters-type-icon::after {
  content: '';
  position: absolute;
  inset: 12px;
  background: var(--wp--preset--color--base-4);
  border-radius: 2px;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
:root :where(.water-heaters-types) .water-heaters-icon-gas::after {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%202C8%206%204%2010%204%2014a8%208%200%200016%200c0-4-4-8-8-12zm0%2018a6%206%200%2001-6-6c0-3%202.5-6.5%206-10%203.5%203.5%206%207%206%2010a6%206%200%2001-6%206z%27%2F%3E%3C%2Fsvg%3E");
}
:root :where(.water-heaters-types) .water-heaters-icon-electric::after {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M13%202L3%2014h8l-1%208%2010-12h-8l1-8z%27%2F%3E%3C%2Fsvg%3E");
}
:root :where(.water-heaters-types) .water-heaters-icon-tankless::after {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M12%203v18m-6-6l6%206%206-6M6%209l6-6%206%206%27%2F%3E%3C%2Fsvg%3E");
  background: transparent;
  border: 2px solid var(--wp--preset--color--base-4);
  border-radius: 0;
  mask-image: none;
}
:root :where(.water-heaters-types) .water-heaters-icon-tankless::after {
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27currentColor%27%3E%3Cpath%20d%3D%27M7%202h10v5h3l-5%206%205%206h-3v3H7v-3H4l5-6-5-6h3z%27%2F%3E%3C%2Fsvg%3E");
  background: var(--wp--preset--color--base-4);
  border: none;
  border-radius: 2px;
}
:root :where(.water-heaters-types) .water-heaters-type-name {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.water-heaters-types) .water-heaters-type-desc {
font-size: var(--wp--preset--font-size--medium);
margin-bottom: var(--wp--preset--spacing--30);
}
:root :where(.water-heaters-types) .water-heaters-type-pros {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--wp--preset--spacing--30) 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
:root :where(.water-heaters-types) .water-heaters-type-pros li {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--contrast);
  padding-left: 1.25em;
  position: relative;
  line-height: 1.5;
}
:root :where(.water-heaters-types) .water-heaters-type-pros li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
}
:root :where(.water-heaters-types) .water-heaters-type-best {
font-size: var(--wp--preset--font-size--small);
padding-top: var(--wp--preset--spacing--20);
border-top: 1px solid rgba(27, 94, 32, 0.1);
}
@media (max-width: 1024px){
:root :where(.water-heaters-types) .water-heaters-types-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px){
:root :where(.water-heaters-types) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.water-heaters-types) .water-heaters-types-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }
}
:root :where(.water-heaters-types) .animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* ===== water-heaters-decision (page 60) ===== */
:root :where(.water-heaters-decision) {
background: var(--wp--preset--color--accent-1);
}
:root :where(.water-heaters-decision) .water-heaters-decision-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.water-heaters-decision) .water-heaters-decision-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.water-heaters-decision) .water-heaters-decision-intro {
max-width: 680px;
margin-bottom: var(--wp--preset--spacing--50);
}
:root :where(.water-heaters-decision) .water-heaters-decision-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--40);
}
:root :where(.water-heaters-decision) .water-heaters-decision-col {
  background: rgba(254, 252, 249, 0.07);
  border-radius: 8px;
  overflow: hidden;
}
:root :where(.water-heaters-decision) .water-heaters-decision-header {
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
:root :where(.water-heaters-decision) .water-heaters-repair-header {
  background: rgba(46, 125, 50, 0.35);
}
:root :where(.water-heaters-decision) .water-heaters-replace-header {
  background: rgba(139, 26, 26, 0.35);
}
:root :where(.water-heaters-decision) .water-heaters-decision-header h3 {
  font-family: var(--wp--preset--font-family--bodoni-moda);
  font-size: var(--wp--preset--font-size--xl);
  font-weight: 700;
  color: var(--wp--preset--color--base-4);
  margin: 0;
}
:root :where(.water-heaters-decision) .water-heaters-decision-list {
  list-style: none;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
:root :where(.water-heaters-decision) .water-heaters-decision-list li {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--medium);
  color: rgba(254, 252, 249, 0.9);
  line-height: 1.5;
  padding-left: 1.5em;
  position: relative;
}
:root :where(.water-heaters-decision) .water-heaters-decision-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(254, 252, 249, 0.45);
}
:root :where(.water-heaters-decision) .water-heaters-decision-note {
margin-top: var(--wp--preset--spacing--40);
max-width: 760px;
font-style: italic;
}
@media (max-width: 768px){
:root :where(.water-heaters-decision) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.water-heaters-decision) .water-heaters-decision-columns {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }
}
:root :where(.water-heaters-decision) .animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* ===== water-heaters-signs (page 60) ===== */
:root :where(.water-heaters-signs) {
background: var(--wp--preset--color--base);
}
:root :where(.water-heaters-signs) .water-heaters-signs-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.water-heaters-signs) .water-heaters-signs-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--50);
max-width: 600px;
}
:root :where(.water-heaters-signs) .water-heaters-signs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--30);
}
:root :where(.water-heaters-signs) .water-heaters-sign-card {
background: var(--wp--preset--color--base-4);
padding: var(--wp--preset--spacing--40);
border: 1px solid rgba(27, 94, 32, 0.06);
position: relative;
transition: box-shadow 0.3s;
}
:root :where(.water-heaters-signs) .water-heaters-sign-card:hover {
  box-shadow: var(--wp--preset--shadow--md);
}
:root :where(.water-heaters-signs) .water-heaters-sign-number {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--wp--preset--color--accent-3);
font-size: var(--wp--preset--font-size--small);
margin-bottom: var(--wp--preset--spacing--30);
}
:root :where(.water-heaters-signs) .water-heaters-sign-name {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--20);
}
@media (max-width: 1024px){
:root :where(.water-heaters-signs) .water-heaters-signs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px){
:root :where(.water-heaters-signs) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.water-heaters-signs) .water-heaters-signs-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--20);
  }
:root :where(.water-heaters-signs) .water-heaters-sign-card {
padding: var(--wp--preset--spacing--30);
display: grid;
grid-template-columns: 36px 1fr;
grid-template-rows: auto auto;
column-gap: var(--wp--preset--spacing--30);
row-gap: 0.25rem;
}
:root :where(.water-heaters-signs) .water-heaters-sign-number {
grid-row: 1 / 3;
margin-bottom: 0;
align-self: start;
margin-top: 0.15rem;
}
:root :where(.water-heaters-signs) .water-heaters-sign-name {
margin-bottom: 0;
}
:root :where(.water-heaters-signs) .water-heaters-sign-desc {
grid-column: 2;
}
}
:root :where(.water-heaters-signs) .animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* ===== water-heaters-process (page 60) ===== */
:root :where(.water-heaters-process) {
background: var(--wp--preset--color--base-4);
}
:root :where(.water-heaters-process) .water-heaters-process-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.water-heaters-process) .water-heaters-process-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--50);
max-width: 560px;
}
:root :where(.water-heaters-process) .water-heaters-process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 720px;
}
:root :where(.water-heaters-process) .water-heaters-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--wp--preset--spacing--30);
}
:root :where(.water-heaters-process) .water-heaters-step-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
}
:root :where(.water-heaters-process) .water-heaters-step-num {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid var(--wp--preset--color--accent-1);
flex-shrink: 0;
}
:root :where(.water-heaters-process) .water-heaters-step-line {
  width: 2px;
  flex: 1;
  background: rgba(27, 94, 32, 0.15);
  margin: 0.5rem 0;
  min-height: 32px;
}
:root :where(.water-heaters-process) .water-heaters-step-body {
  padding-bottom: var(--wp--preset--spacing--40);
}
:root :where(.water-heaters-process) .water-heaters-step:last-child .water-heaters-step-body {
  padding-bottom: 0;
}
:root :where(.water-heaters-process) .water-heaters-step-name {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: 0.375rem;
}
@media (max-width: 768px){
:root :where(.water-heaters-process) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.water-heaters-process) .water-heaters-step {
    grid-template-columns: 48px 1fr;
    gap: var(--wp--preset--spacing--20);
  }
:root :where(.water-heaters-process) .water-heaters-step-num {
width: 40px;
height: 40px;
font-size: var(--wp--preset--font-size--small);
}
}
:root :where(.water-heaters-process) .animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* ===== water-heaters-pricing (page 60) ===== */
:root :where(.water-heaters-pricing) {
background: var(--wp--preset--color--base);
}
:root :where(.water-heaters-pricing) .water-heaters-pricing-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.water-heaters-pricing) .water-heaters-pricing-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.water-heaters-pricing) .water-heaters-pricing-desc {
max-width: 640px;
margin-bottom: var(--wp--preset--spacing--50);
}
:root :where(.water-heaters-pricing) .water-heaters-pricing-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--40);
  margin-bottom: var(--wp--preset--spacing--40);
}
:root :where(.water-heaters-pricing) .water-heaters-pricing-card {
background: var(--wp--preset--color--base-4);
padding: var(--wp--preset--spacing--40);
border: 1px solid rgba(27, 94, 32, 0.08);
border-top: 4px solid var(--wp--preset--color--accent-1);
}
:root :where(.water-heaters-pricing) .water-heaters-pricing-card-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.water-heaters-pricing) .water-heaters-pricing-range {
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.water-heaters-pricing) .water-heaters-pricing-disclaimer {
max-width: 720px;
padding-top: var(--wp--preset--spacing--30);
border-top: 1px solid rgba(27, 94, 32, 0.1);
}
@media (max-width: 768px){
:root :where(.water-heaters-pricing) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.water-heaters-pricing) .water-heaters-pricing-cards {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }
}
:root :where(.water-heaters-pricing) .animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* ===== water-heaters-faq (page 60) ===== */
:root :where(.water-heaters-faq) {
background: var(--wp--preset--color--base-4);
}
:root :where(.water-heaters-faq) .water-heaters-faq-inner {
  max-width: 800px;
  margin: 0 auto;
}
:root :where(.water-heaters-faq) .water-heaters-faq-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--50);
}
:root :where(.water-heaters-faq) .water-heaters-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
:root :where(.water-heaters-faq) .water-heaters-faq-item {
  border-bottom: 1px solid rgba(27, 94, 32, 0.1);
}
:root :where(.water-heaters-faq) .water-heaters-faq-item:first-child {
  border-top: 1px solid rgba(27, 94, 32, 0.1);
}
:root :where(.water-heaters-faq) .water-heaters-faq-question {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
  padding: var(--wp--preset--spacing--30) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  transition: color 0.2s;
}
:root :where(.water-heaters-faq) .water-heaters-faq-question::-webkit-details-marker {
  display: none;
}
:root :where(.water-heaters-faq) .water-heaters-faq-question::after {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--wp--preset--color--accent-1);
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272.5%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  transition: transform 0.3s;
}
:root :where(.water-heaters-faq) .water-heaters-faq-item[open] .water-heaters-faq-question::after {
  transform: rotate(45deg);
}
:root :where(.water-heaters-faq) .water-heaters-faq-question:hover {
  color: var(--wp--preset--color--accent-1);
}
:root :where(.water-heaters-faq) .water-heaters-faq-answer {
  padding: 0 0 var(--wp--preset--spacing--30) 0;
}
:root :where(.water-heaters-faq) .water-heaters-faq-answer p {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast-2);
  line-height: 1.7;
}
@media (max-width: 768px){
:root :where(.water-heaters-faq) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.water-heaters-faq) .water-heaters-faq-question {
    font-size: var(--wp--preset--font-size--medium);
  }
}
:root :where(.water-heaters-faq) .animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}
:root :where(.water-heaters-faq) .water-heaters-faq-item > summary {
font-family: var(--wp--preset--font-family--figtree);
font-size: var(--wp--preset--font-size--lg);
font-weight: 600;
color: var(--wp--preset--color--contrast);
padding: var(--wp--preset--spacing--30) 0;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--wp--preset--spacing--30);
transition: color 0.2s;
}
:root :where(.water-heaters-faq) .water-heaters-faq-item > summary::-webkit-details-marker {
display: none;
}
:root :where(.water-heaters-faq) .water-heaters-faq-item > summary::after {
content: '';
width: 20px;
height: 20px;
flex-shrink: 0;
background: var(--wp--preset--color--accent-1);
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272.5%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
mask-size: contain;
mask-repeat: no-repeat;
transition: transform 0.3s;
}
:root :where(.water-heaters-faq) .water-heaters-faq-item[open] > summary::after {
transform: rotate(45deg);
}
:root :where(.water-heaters-faq) .water-heaters-faq-item > summary:hover {
color: var(--wp--preset--color--accent-1);
}

/* ===== water-heaters-reviews (page 60) ===== */
:root :where(.water-heaters-reviews) {
background: var(--wp--preset--color--base);
}
:root :where(.water-heaters-reviews) .water-heaters-reviews-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.water-heaters-reviews) .water-heaters-reviews-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--50);
}
:root :where(.water-heaters-reviews) .water-heaters-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}
:root :where(.water-heaters-reviews) .water-heaters-review-card {
background: var(--wp--preset--color--base-4);
border-radius: 8px;
padding: var(--wp--preset--spacing--40);
border: 1px solid rgba(27, 94, 32, 0.06);
display: flex;
flex-direction: column;
}
:root :where(.water-heaters-reviews) .water-heaters-review-stars {
margin-bottom: var(--wp--preset--spacing--30);
}
:root :where(.water-heaters-reviews) .water-heaters-review-text {
flex: 1;
margin-bottom: var(--wp--preset--spacing--30);
}
:root :where(.water-heaters-reviews) .water-heaters-review-author {
  padding-top: var(--wp--preset--spacing--20);
  border-top: 1px solid rgba(27, 94, 32, 0.08);
}
:root :where(.water-heaters-reviews) .water-heaters-review-location {
margin-top: 0.125rem;
}
@media (max-width: 1024px){
:root :where(.water-heaters-reviews) .water-heaters-reviews-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px){
:root :where(.water-heaters-reviews) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.water-heaters-reviews) .water-heaters-reviews-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }
}
:root :where(.water-heaters-reviews) .animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* ===== water-heaters-cta (page 60) ===== */
:root :where(.water-heaters-cta) {
background: var(--wp--preset--color--accent-1);
}
:root :where(.water-heaters-cta) .water-heaters-cta-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
:root :where(.water-heaters-cta) .water-heaters-cta-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.water-heaters-cta) .water-heaters-cta-desc {
font-family: var(--wp--preset--font-family--figtree);
margin-bottom: var(--wp--preset--spacing--40);
}
:root :where(.water-heaters-cta) .water-heaters-cta-actions {
  display: flex;
  gap: var(--wp--preset--spacing--30);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
:root :where(.water-heaters-cta) :where(.water-heaters-cta-btn-primary .wp-block-button__link) {
display: inline-block;
background: var(--wp--preset--color--accent-3);
color: var(--wp--preset--color--base-4);
text-decoration: none;
padding: 0.9375rem var(--wp--preset--spacing--40);
font-family: var(--wp--preset--font-family--figtree);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
border-radius: 6px;
transition: background-color 0.25s, transform 0.2s;
}
:root :where(.water-heaters-cta) :where(.water-heaters-cta-btn-primary:hover .wp-block-button__link) {
background: var(--wp--preset--color--accent-4);
transform: translateY(-2px);
}
:root :where(.water-heaters-cta) :where(.water-heaters-cta-btn-phone .wp-block-button__link) {
display: inline-block;
color: var(--wp--preset--color--base-4);
text-decoration: none;
padding: 0.875rem var(--wp--preset--spacing--40);
font-family: var(--wp--preset--font-family--figtree);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
border-radius: 6px;
border: 2px solid rgba(254, 252, 249, 0.4);
transition: border-color 0.25s, background-color 0.25s;
}
:root :where(.water-heaters-cta) :where(.water-heaters-cta-btn-phone:hover .wp-block-button__link) {
border-color: var(--wp--preset--color--base-4);
background: rgba(254, 252, 249, 0.08);
}
@media (max-width: 768px){
:root :where(.water-heaters-cta) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.water-heaters-cta) .water-heaters-cta-actions {
    flex-direction: column;
  }
:root :where(.water-heaters-cta) .wp-block-button.water-heaters-cta-btn-primary {
width: 100%;
text-align: center;
}
:root :where(.water-heaters-cta) .water-heaters-cta-btn-phone {
    width: 100%;
    text-align: center;
  }
}
:root :where(.water-heaters-cta) .animate-on-scroll {
  opacity: 1;
  transform: translateY(0);
}

/* ===== before-after-section (page 91) ===== */
:root :where(.before-after-section) .before-after-card {overflow:hidden;align-items:flex-end;padding:0;}
:root :where(.before-after-section) .before-after-card .wp-block-cover__inner-container {width:100%;align-self:flex-end;}
:root :where(.before-after-section) .before-after-label {display:block;width:100%;box-sizing:border-box;margin:0;text-align:center;font-size:1rem !important;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;padding:0.85rem 1rem !important;}
:root :where(.before-after-section) .before-after-label-before {background:rgba(20,20,20,0.86) !important;color:var(--wp--preset--color--base-4) !important;}
:root :where(.before-after-section) .before-after-label-after {background:var(--wp--preset--color--accent-1) !important;color:var(--wp--preset--color--base-4) !important;}
@media (max-width: 640px){
:root :where(.before-after-section) .before-after-label {font-size:0.95rem !important;}
}

/* ===== gd-warn-grid (page 99) ===== */
:root :where(.gd-warn-grid) {display:grid;grid-template-columns:repeat(3,1fr);gap:var(--wp--preset--spacing--30);align-items:stretch;}
@media (max-width:900px){
:root :where(.gd-warn-grid) {grid-template-columns:repeat(2,1fr);}
}
@media (max-width:540px){
:root :where(.gd-warn-grid) {grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto;}
}


/* ===================================================
   :::SECTION:Services Hub + Company Section Styles (migrated):::
   =================================================== */

/* ===== services-hero (page 28) ===== */
:root :where(.services-hero) {
  background: var(--wp--preset--color--base);
}
:root :where(.services-hero) .services-hero-header {
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
:root :where(.services-hero) .services-hero-header-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.services-hero) .services-hero-breadcrumb {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--contrast-2);
}
:root :where(.services-hero) .services-hero-breadcrumb a {
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
  transition: color 0.2s;
}
:root :where(.services-hero) .services-hero-breadcrumb a:hover {
  color: var(--wp--preset--color--accent-2);
}
:root :where(.services-hero) .services-hero-breadcrumb-sep {
  margin: 0 0.5em;
  opacity: 0.5;
}
:root :where(.services-hero) .services-hero-visual {
  position: relative;
  min-height: 32vh;
  max-height: 45vh;
  display: grid;
  align-items: end;
  overflow: hidden;
}
:root :where(.services-hero) .services-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  z-index: 1;
}
:root :where(.services-hero) .services-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(245, 240, 232, 0.08) 0%,
    rgba(245, 240, 232, 0.12) 25%,
    rgba(245, 240, 232, 0.35) 55%,
    rgba(245, 240, 232, 0.75) 80%,
    var(--wp--preset--color--base) 100%
  );
}
:root :where(.services-hero) .services-hero-text {
  position: relative;
  z-index: 3;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}
:root :where(.services-hero) .services-hero-eyebrow {
font-size: var(--wp--preset--font-size--small);
margin-bottom: var(--wp--preset--spacing--20);
display: flex;
align-items: center;
gap: 0.75em;
}
:root :where(.services-hero) .services-hero-eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  background: var(--wp--preset--color--accent-1);
  border-radius: 2px;
}
:root :where(.services-hero) .services-hero-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-weight: 700;
margin: 0;
}
:root :where(.services-hero) .services-hero-deck {
margin-top: var(--wp--preset--spacing--20);
}
:root :where(.services-hero) .services-hero-content {
  padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
:root :where(.services-hero) .services-hero-content-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--wp--preset--spacing--50);
  align-items: start;
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid rgba(28, 28, 26, 0.1);
}
:root :where(.services-hero) .services-hero-description {
max-width: 620px;
}
:root :where(.services-hero) :where(.services-hero-cta .wp-block-button__link) {
display: inline-block;
background: var(--wp--preset--color--accent-3);
color: var(--wp--preset--color--base-4);
text-decoration: none;
padding: 0.9375rem var(--wp--preset--spacing--40);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
border-radius: 6px;
transition: background-color 0.25s, transform 0.2s;
}
:root :where(.services-hero) .wp-block-button.services-hero-cta {
margin-top: var(--wp--preset--spacing--30);
}
:root :where(.services-hero) :where(.services-hero-cta:hover .wp-block-button__link) {
background: var(--wp--preset--color--accent-4);
transform: translateY(-2px);
}
:root :where(.services-hero) .services-hero-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
:root :where(.services-hero) .services-hero-badge {
display: flex;
flex-direction: column;
padding: var(--wp--preset--spacing--30);
background: var(--wp--preset--color--base-3);
min-width: 180px;
}
:root :where(.services-hero) .services-hero-badge-label {
font-size: var(--wp--preset--font-size--small);
margin-top: 0.25rem;
}
@media (max-width: 1024px){
:root :where(.services-hero) .services-hero-content-inner {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
  }
:root :where(.services-hero) .services-hero-sidebar {
    flex-direction: row;
    gap: var(--wp--preset--spacing--30);
  }
:root :where(.services-hero) .services-hero-badge {
min-width: 0;
flex: 1;
}
}
@media (max-width: 768px){
:root :where(.services-hero) .services-hero-breadcrumb {
    display: none;
  }
:root :where(.services-hero) .services-hero-header {
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  }
:root :where(.services-hero) .services-hero-visual {
    min-height: 28vh;
  }
:root :where(.services-hero) .services-hero-text {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
  }
:root :where(.services-hero) .services-hero-title {
font-size: clamp(2rem, 8vw, 2.75rem);
}
:root :where(.services-hero) .services-hero-content {
    padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  }
:root :where(.services-hero) .services-hero-content-inner {
    padding-top: var(--wp--preset--spacing--30);
  }
:root :where(.services-hero) .services-hero-sidebar {
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
  }
:root :where(.services-hero) .services-hero-badge {
flex-direction: row;
align-items: center;
gap: var(--wp--preset--spacing--20);
padding: 0.75rem var(--wp--preset--spacing--30);
}
:root :where(.services-hero) .services-hero-badge-value {
font-size: var(--wp--preset--font-size--xl);
}
}

/* ===== services-full-list (page 28) ===== */
:root :where(.services-full-list) {
background: var(--wp--preset--color--base);
}
:root :where(.services-full-list) .services-full-list-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.services-full-list) .services-full-list-header {
  margin-bottom: var(--wp--preset--spacing--50);
  text-align: center;
}
:root :where(.services-full-list) .services-full-list-eyebrow {
font-size: var(--wp--preset--font-size--small);
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.services-full-list) .services-full-list-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
margin: 0;
}
:root :where(.services-full-list) .services-full-list-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}
:root :where(.services-full-list) .services-list-group-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
margin: 0 0 var(--wp--preset--spacing--30) 0;
padding-bottom: var(--wp--preset--spacing--20);
border-bottom: 2px solid var(--wp--preset--color--accent-1);
}
:root :where(.services-full-list) .services-list-items {
  padding: 0;
  margin: 0;
}
:root :where(.services-full-list) .services-list-item {
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(28, 28, 26, 0.06);
}
:root :where(.services-full-list) .services-list-item:last-child {
  border-bottom: none;
}
:root :where(.services-full-list) .services-list-item a {
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  transition: color 0.2s;
  display: block;
  line-height: 1.5;
}
:root :where(.services-full-list) .services-list-item a:hover {
  color: var(--wp--preset--color--accent-1);
}
@media (max-width: 1024px){
:root :where(.services-full-list) .services-full-list-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px){
:root :where(.services-full-list) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.services-full-list) .services-full-list-columns {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
  }
}

/* ===== Specialty & Additional Services (page 28) — centered to match headings ===== */
:root :where(.specialty-services) .wp-block-column {
  text-align: center;
}
:root :where(.specialty-services) .services-list-items {
  list-style: none;
  margin: var(--wp--preset--spacing--20) 0 0;
  padding: 0;
}
:root :where(.specialty-services) .services-list-item {
  padding: 0.375rem 0;
}
:root :where(.specialty-services) .services-list-item a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  transition: color 0.2s;
}
:root :where(.specialty-services) .services-list-item a:hover {
  color: var(--wp--preset--color--accent-1);
}

/* ===== services-why (page 28) ===== */
:root :where(.services-why) {
background: var(--wp--preset--color--accent-1);
}
:root :where(.services-why) .services-why-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.services-why) .services-why-header {
  margin-bottom: var(--wp--preset--spacing--50);
  text-align: center;
}
:root :where(.services-why) .services-why-eyebrow {
font-size: var(--wp--preset--font-size--small);
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.services-why) .services-why-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-size: var(--wp--preset--font-size--huge);
margin: 0;
}
:root :where(.services-why) .services-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--40);
}
:root :where(.services-why) .services-why-card {
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  border: 1px solid rgba(254, 252, 249, 0.15);
  border-radius: 8px;
  background: rgba(254, 252, 249, 0.05);
  transition: background 0.3s;
}
:root :where(.services-why) .services-why-card:hover {
  background: rgba(254, 252, 249, 0.1);
}
:root :where(.services-why) .services-why-card-number {
display: block;
font-size: var(--wp--preset--font-size--xx-large);
margin-bottom: var(--wp--preset--spacing--30);
}
:root :where(.services-why) .services-why-card-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-size: var(--wp--preset--font-size--xl);
font-weight: 700;
margin: 0 0 var(--wp--preset--spacing--20) 0;
}
@media (max-width: 1024px){
:root :where(.services-why) .services-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px){
:root :where(.services-why) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.services-why) .services-why-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }
:root :where(.services-why) .services-why-card {
    padding: var(--wp--preset--spacing--30);
  }
}

/* ===== services-areas (page 28) ===== */
:root :where(.services-areas) {
background: var(--wp--preset--color--base);
}
:root :where(.services-areas) .services-areas-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.services-areas) .services-areas-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--wp--preset--spacing--50);
  align-items: center;
}
:root :where(.services-areas) .services-areas-eyebrow {
font-size: var(--wp--preset--font-size--small);
margin-bottom: var(--wp--preset--spacing--20);
}
:root :where(.services-areas) .services-areas-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
font-size: var(--wp--preset--font-size--xxx-large);
font-weight: 700;
margin: 0 0 var(--wp--preset--spacing--30) 0;
}
:root :where(.services-areas) .services-areas-desc {
font-size: var(--wp--preset--font-size--medium);
}
:root :where(.services-areas) .services-areas-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
:root :where(.services-areas) .services-areas-tag {
  display: inline-block;
  padding: 0.625rem 1.25rem;
  background: var(--wp--preset--color--base-3);
  border-radius: 100px;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  color: var(--wp--preset--color--contrast);
  transition: background 0.2s, color 0.2s;
}
:root :where(.services-areas) .services-areas-tag:hover {
  background: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base-4);
}
:root :where(.services-areas) .services-areas-tag--more {
  background: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--base-4);
  font-weight: 600;
}
@media (max-width: 1024px){
:root :where(.services-areas) .services-areas-content {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--40);
  }
}
@media (max-width: 768px){
:root :where(.services-areas) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
}

/* ===== services-cta (page 28) ===== */
:root :where(.services-cta) {
background: var(--wp--preset--color--base-3);
}
:root :where(.services-cta) .services-cta-inner {
  max-width: 1280px;
  margin: 0 auto;
}
:root :where(.services-cta) .services-cta-content {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
:root :where(.services-cta) .services-cta-title {
font-family: var(--wp--preset--font-family--bodoni-moda);
color: var(--wp--preset--color--contrast);
margin: 0 0 var(--wp--preset--spacing--30) 0;
}
:root :where(.services-cta) .services-cta-desc {
margin-bottom: var(--wp--preset--spacing--40);
}
:root :where(.services-cta) .services-cta-phone {
  margin-bottom: var(--wp--preset--spacing--40);
}
:root :where(.services-cta) .services-cta-phone-link {
  font-family: var(--wp--preset--font-family--bodoni-moda);
  font-size: var(--wp--preset--font-size--xxx-large);
  font-weight: 700;
  color: var(--wp--preset--color--accent-1);
  text-decoration: none;
  transition: color 0.2s;
}
:root :where(.services-cta) .services-cta-phone-link:hover {
  color: var(--wp--preset--color--accent-2);
}
:root :where(.services-cta) .services-cta-buttons {
  display: flex;
  gap: var(--wp--preset--spacing--30);
  justify-content: center;
  flex-wrap: wrap;
}
:root :where(.services-cta) :where(.services-cta-btn .wp-block-button__link) {
display: inline-block;
text-decoration: none;
padding: 0.9375rem var(--wp--preset--spacing--40);
font-size: var(--wp--preset--font-size--medium);
font-weight: 600;
border-radius: 6px;
transition: background-color 0.25s, transform 0.2s;
}
:root :where(.services-cta) :where(.services-cta-btn--primary .wp-block-button__link) {
background: var(--wp--preset--color--accent-3);
color: var(--wp--preset--color--base-4);
}
:root :where(.services-cta) :where(.services-cta-btn--primary:hover .wp-block-button__link) {
background: var(--wp--preset--color--accent-4);
transform: translateY(-2px);
}
:root :where(.services-cta) :where(.services-cta-btn--secondary .wp-block-button__link) {
background: var(--wp--preset--color--accent-1);
color: var(--wp--preset--color--base-4);
}
:root :where(.services-cta) :where(.services-cta-btn--secondary:hover .wp-block-button__link) {
background: var(--wp--preset--color--accent-2);
transform: translateY(-2px);
}
@media (max-width: 768px){
:root :where(.services-cta) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.services-cta) .services-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
:root :where(.services-cta) .wp-block-button.services-cta-btn {
text-align: center;
}
}

/* ===== has-md-shadow (page 88) ===== */
:root :where(.has-md-shadow) { overflow: hidden; }


/* ===================================================
   :::SECTION:Services Pattern Styles (migrated):::
   =================================================== */

/* ===== services (pattern) ===== */
:root :where(.services) {
background: var(--wp--preset--color--base-4);
position: relative;
}
:root :where(.services)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%27200%27%20height%3D%27200%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.025%27%2F%3E%3C%2Fsvg%3E");
  pointer-events: none;
  z-index: 0;
}
:root :where(.services) .services-inner {
  max-width: var(--wp--style--global--wide-size);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
:root :where(.services) .services-header {
  margin-bottom: var(--wp--preset--spacing--50);
}
:root :where(.services) .services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
  margin-bottom: var(--wp--preset--spacing--50);
}
:root :where(.services) .service-category {
background: var(--wp--preset--color--base);
border-radius: 8px;
padding: var(--wp--preset--spacing--40);
border: 1px solid rgba(27, 94, 32, 0.06);
transition: border-color 0.3s, box-shadow 0.3s;
}
:root :where(.services) .service-category:hover {
  border-color: rgba(27, 94, 32, 0.15);
  box-shadow: 0 4px 20px rgba(27, 94, 32, 0.06);
}
:root :where(.services) .service-category-header {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  margin-bottom: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--30);
  border-bottom: 2px solid var(--wp--preset--color--accent-1);
}
:root :where(.services) .service-category-icon {
  width: 32px;
  height: 32px;
  background-color: var(--wp--preset--color--accent-1);
  border-radius: 6px;
  flex-shrink: 0;
}
:root :where(.services) .icon-heating { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202v4m0%2012v4M4.93%204.93l2.83%202.83m8.48%208.48l2.83%202.83M2%2012h4m12%200h4M4.93%2019.07l2.83-2.83m8.48-8.48l2.83-2.83%27%2F%3E%3C%2Fsvg%3E"); mask-size: 60%; mask-repeat: no-repeat; mask-position: center; }
:root :where(.services) .icon-drains { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202v10m0%200c-4%200-8-2-8-5m8%205c4%200%208-2%208-5M6%2017v3a2%202%200%20002%202h8a2%202%200%20002-2v-3%27%2F%3E%3C%2Fsvg%3E"); mask-size: 60%; mask-repeat: no-repeat; mask-position: center; }
:root :where(.services) .icon-pipes { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M4%206h4v12H4zM16%206h4v12h-4zM8%2010h8M8%2014h8%27%2F%3E%3C%2Fsvg%3E"); mask-size: 60%; mask-repeat: no-repeat; mask-position: center; }
:root :where(.services) .icon-fixtures { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202C8%202%205%205%205%208c0%202%201%203%202%204v2h10v-2c1-1%202-2%202-4%200-3-3-6-7-6zM9%2018h6v2a2%202%200%2001-2%202h-2a2%202%200%2001-2-2v-2z%27%2F%3E%3C%2Fsvg%3E"); mask-size: 60%; mask-repeat: no-repeat; mask-position: center; }
:root :where(.services) .icon-pumps { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278%27%2F%3E%3Cpath%20d%3D%27M12%208v4l3%203%27%2F%3E%3C%2Fsvg%3E"); mask-size: 60%; mask-repeat: no-repeat; mask-position: center; }
:root :where(.services) .icon-water { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202s-6%207-6%2011a6%206%200%200012%200c0-4-6-11-6-11z%27%2F%3E%3C%2Fsvg%3E"); mask-size: 60%; mask-repeat: no-repeat; mask-position: center; }
:root :where(.services) .icon-gas { mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%3E%3Cpath%20d%3D%27M12%202c-2%204-6%206-6%2010a6%206%200%200012%200c0-4-4-6-6-10z%27%2F%3E%3Cpath%20d%3D%27M12%2018a2%202%200%20002-2c0-2-2-3-2-3s-2%201-2%203a2%202%200%20002%202z%27%2F%3E%3C%2Fsvg%3E"); mask-size: 60%; mask-repeat: no-repeat; mask-position: center; }
:root :where(.services) .service-category-title {
font-weight: 700;
}
:root :where(.services) .service-list {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}
:root :where(.services) .service-list li {
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast-2);
  padding-left: var(--wp--preset--spacing--30);
  position: relative;
  line-height: 1.5;
}
:root :where(.services) .service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  background: var(--wp--preset--color--accent-1);
  border-radius: 50%;
}
:root :where(.services) .services-cta-row {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
  padding-top: var(--wp--preset--spacing--40);
  border-top: 1px solid rgba(27, 94, 32, 0.1);
}
@media (max-width: 1180px){
:root :where(.services) .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px){
:root :where(.services) {
    padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
  }
:root :where(.services) .services-grid {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--30);
  }
:root :where(.services) .services-cta-row {
    flex-direction: column;
    text-align: center;
  }
}
:root :where(.services) .section-eyebrow.section-eyebrow {
margin-block-end: var(--wp--preset--spacing--20);
}
:root :where(.services) .section-title.section-title {
margin-block-end: var(--wp--preset--spacing--30);
}

/* Footer utility row: keep last link clear of the back-to-top button */
.footer-legal-links {
  padding-right: 88px;
}
@media (max-width: 781px) {
  .footer-legal-links {
    padding-right: 0;
  }
}

/* Promo bar link: light green for contrast on the dark bar (was #2E7D32, ~2.4:1) */
.promo-inner a.promo-link {
  color: #81C784;
}

/* ===================================================
   :::SECTION:Gravity Forms (themed to match Metcalf):::
   =================================================== */
.gform_wrapper .gform_fields {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.gform_wrapper .gfield {
  margin: 0;
}
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
  font-family: var(--wp--preset--font-family--figtree);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--wp--preset--color--contrast);
  margin-bottom: 0.4rem;
}
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required .gfield_required_asterisk {
  color: var(--wp--preset--color--accent-3);
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper select,
.gform_wrapper textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #d8dce0;
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--wp--preset--color--contrast);
  /* background-color, not the `background` shorthand: the shorthand resets
     background-image and wiped out Gravity Forms' own select caret
     (--gf-ctrl-select-icon), leaving the dropdown looking like a text input. */
  background-color: var(--wp--preset--color--base-4);
  box-shadow: none;
  /* Padding (0.85rem x 2) plus a 1.4 line-height needs ~3.1rem. Without a floor
     the control can be squeezed shorter than its own text and the value clips. */
  min-height: 3.125rem;
}

/* The select still needs its own caret: Gravity Forms sets appearance:none via
   its theme framework, so with no indicator the control reads as a text field.
   Drawn here so it does not depend on a GF custom property staying put. */
.gform_wrapper select {
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231B5E20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.15rem;
  text-overflow: ellipsis;
}

.gform_wrapper select::-ms-expand {
  display: none;
}
.gform_wrapper textarea {
  resize: vertical;
  min-height: 110px;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
  border-color: var(--wp--preset--color--accent-1);
  box-shadow: 0 0 0 4px rgba(27, 94, 32, 0.12);
  outline: none;
}
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
  margin-top: 0.5rem;
  padding: 0;
}
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_button {
  display: inline-block;
  width: auto;
  padding: 1rem 2rem;
  background: var(--wp--preset--color--accent-3);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--figtree);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  filter: brightness(1.05);
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
  border-color: var(--wp--preset--color--accent-3);
}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  color: var(--wp--preset--color--accent-3);
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.85rem;
  font-weight: 600;
  background: none;
  border: none;
  padding: 0.25rem 0 0;
}
.gform_confirmation_message,
.gform_wrapper .gform_confirmation_message {
  background: var(--wp--preset--color--accent-1);
  color: #fff;
  padding: 1.5rem 1.75rem;
  border-radius: 10px;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Service category titles: keep every category label inside the same wide
   container as its card grid and make it a clear, centered section divider. */
.services-categories > .svc-cat-title {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1280px) !important;
  margin: var(--wp--preset--spacing--60) auto var(--wp--preset--spacing--40) !important;
  padding-inline: var(--wp--preset--spacing--30);
  text-align: center;
  line-height: 1.15;
}

/* Equal-height cards: uniform image ratio so every card's image + content line up,
   and pin the "Learn More" CTA to the bottom of the (already equal-height) card. */
.service-card > .wp-block-image:first-child img,
.wp-block-post-content .service-card > .wp-block-image:first-child img {
  aspect-ratio: 3 / 2 !important;
  height: auto !important;
  min-height: 0 !important;
  object-fit: cover;
}
.service-card > p.has-accent-1-color:last-child,
.wp-block-post-content .service-card > p.has-accent-1-color:last-child {
  margin-top: auto;
}

/* Gravity Forms — reinforce the themed look over Gravity's orbital defaults */
.gform_wrapper .gfield input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
  border: 1px solid #d8dce0 !important;
  border-radius: 8px !important;
  padding: 0.85rem 1rem !important;
  font-family: var(--wp--preset--font-family--figtree) !important;
  font-size: 1rem !important;
  color: var(--wp--preset--color--contrast) !important;
  background-color: var(--wp--preset--color--base-4) !important;
  box-shadow: none !important;
  /* Padding (0.85rem x 2) plus a 1.4 line-height needs ~3.1rem. Declared at the
     same weight as the padding above, otherwise Gravity Forms' own sizing wins
     and the control renders shorter than its own text. */
  min-height: 3.125rem !important;
}

/* The reinforcement rule above sets padding with !important, so the clearance
   the select caret needs has to be declared at the same weight or the value
   text runs underneath the arrow. */
.gform_wrapper .gfield select {
  padding-right: 2.75rem !important;
  /* A native select clips its value to the line box. Gravity Forms leaks a 38px
     line-height into some forms, which overflows the ~21px content box and cuts
     the text off. Pin it to something that fits the field at every form. */
  line-height: 1.2 !important;
}

.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus {
  border-color: var(--wp--preset--color--accent-1) !important;
  box-shadow: 0 0 0 4px rgba(27, 94, 32, 0.12) !important;
  outline: none !important;
}
.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
  font-family: var(--wp--preset--font-family--figtree) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: var(--wp--preset--color--contrast) !important;
  margin-bottom: 0.4rem !important;
}
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required .gfield_required_asterisk {
  color: var(--wp--preset--color--accent-3) !important;
}
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_button,
.gform_wrapper button.gform_button {
  background: var(--wp--preset--color--accent-3) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 1rem 2rem !important;
  font-family: var(--wp--preset--font-family--figtree) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  width: auto !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper .gform_button:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}
/* even field spacing */
.gform_wrapper .gform_fields { row-gap: 1.25rem !important; }

/* Sitewide request-service CTA — one reusable conversion point for customer
   pages and articles. It remains a real Gravity Form, not a visual mockup. */
.metcalf-sitewide-form-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* This CTA is the final section of a page, not a floating card. Keep its
     background visually connected to the section immediately above it. */
  margin-top: 0;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: clamp(3.5rem, 6vw, 5.75rem) var(--wp--preset--spacing--40);
  background: #173d32;
  color: var(--wp--preset--color--base-4);
}
.metcalf-sitewide-form-cta::before {
  content: '';
  position: absolute;
  inset: -25% 44% -35% -12%;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='500' viewBox='0 0 820 500'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M-17 460C143 401 247 310 304 203 372 75 516 13 738 37' stroke-opacity='.18' stroke-width='2'/%3E%3Cpath d='M51 479c131-53 216-129 271-230C387 129 497 78 663 85' stroke-opacity='.12' stroke-width='2'/%3E%3Cpath d='M185 481c91-52 150-113 193-196 52-101 143-144 271-144' stroke-opacity='.16' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") left center / min(820px, 72vw) auto no-repeat;
}
.metcalf-sitewide-form-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(380px, 0.92fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  width: min(100%, var(--wp--style--global--wide-size));
  margin-inline: auto;
}
.metcalf-sitewide-form-cta-copy {
  max-width: 33rem;
}
.metcalf-sitewide-form-cta-eyebrow {
  margin: 0 0 0.8rem;
  color: rgba(254, 252, 249, 0.74);
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.metcalf-sitewide-form-cta h2 {
  margin: 0;
  color: var(--wp--preset--color--base-4);
  font-size: clamp(2.25rem, 4vw, 3.55rem);
  line-height: 1.02;
}
.metcalf-sitewide-form-cta-copy > p:not(.metcalf-sitewide-form-cta-eyebrow) {
  margin: 1.3rem 0 1.8rem;
  color: rgba(254, 252, 249, 0.86);
  font-size: 1.08rem;
  line-height: 1.65;
}
.metcalf-sitewide-form-cta-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--wp--preset--color--base-4);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(254, 252, 249, 0.55);
  padding-bottom: 0.3rem;
  /* a11y: measured 177x34 at 390px — under the ~44px tap-target bar on a
     primary conversion link that appears sitewide. padding-top only, so the
     underline stays tight against the text; this just grows the invisible
     hit area above it. */
  padding-top: 0.65rem;
}
.metcalf-sitewide-form-cta-phone:hover,
.metcalf-sitewide-form-cta-phone:focus-visible {
  color: #fff;
  border-bottom-color: #fff;
}

/* The CTA is appended inside the_content, so it lands inside .wp-block-post-content
   and inherits the in-content link colour (accent-1 forest green) at specificity
   (0,2,1). On this dark green panel that renders at 1.52:1 and is effectively
   invisible, so the panel's own link colours are restated above that weight. */
.wp-block-post-content .metcalf-sitewide-form-cta a:not(.wp-block-button__link),
.entry-content .metcalf-sitewide-form-cta a:not(.wp-block-button__link),
.metcalf-sitewide-form-cta a:not(.wp-block-button__link) {
  color: var(--wp--preset--color--base-4);
}

.wp-block-post-content .metcalf-sitewide-form-cta a:not(.wp-block-button__link):hover,
.entry-content .metcalf-sitewide-form-cta a:not(.wp-block-button__link):hover,
.metcalf-sitewide-form-cta a:not(.wp-block-button__link):hover {
  color: #fff;
}
.metcalf-sitewide-form-cta-callout {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-left: 1rem;
  border-left: 2px solid #8cba73;
}
.metcalf-sitewide-form-cta-callout-label {
  color: rgba(254, 252, 249, 0.68);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.metcalf-sitewide-form-cta-form {
  padding: clamp(1.6rem, 3vw, 2.65rem);
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 20px;
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.22);
}
.metcalf-sitewide-form-cta-form-intro {
  margin-bottom: 1.55rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(23, 61, 50, 0.14);
}
.metcalf-sitewide-form-cta-form-intro span {
  display: block;
  color: var(--wp--preset--color--accent-1);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.metcalf-sitewide-form-cta-form-intro p {
  margin: 0.35rem 0 0;
  color: var(--wp--preset--color--contrast-2);
  font-size: 0.92rem;
  line-height: 1.45;
}
.metcalf-sitewide-form-cta-form .gform_wrapper {
  margin: 0;
}
.metcalf-sitewide-form-cta-form #gform_fields_4 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1rem;
  row-gap: 1.05rem !important;
}
.metcalf-sitewide-form-cta-form #gform_fields_4 > .gfield {
  grid-column: auto !important;
}
.metcalf-sitewide-form-cta-form #field_4_3,
.metcalf-sitewide-form-cta-form #field_4_4 {
  grid-column: 1 / -1 !important;
}
.metcalf-sitewide-form-cta-form #field_4_4 textarea {
  min-height: 7.25rem;
}
.metcalf-sitewide-form-cta-form .gform_footer,
.metcalf-sitewide-form-cta-form .gform-footer {
  margin-top: 1.25rem;
}
.metcalf-sitewide-form-cta-form .gform_button,
.metcalf-sitewide-form-cta-form button.gform_button {
  width: 100% !important;
  min-height: 3.45rem;
  border-radius: 10px !important;
}
.metcalf-sitewide-form-cta-form .gform_footer,
.metcalf-sitewide-form-cta-form .gform-footer {
  margin-bottom: 0;
}
.metcalf-sitewide-form-cta-note {
  margin: 0.9rem 0 0;
  color: var(--wp--preset--color--contrast-2);
  font-size: 0.82rem;
  line-height: 1.45;
}
@media (max-width: 780px) {
  .metcalf-sitewide-form-cta {
    padding-inline: var(--wp--preset--spacing--30);
  }
  .metcalf-sitewide-form-cta-inner {
    grid-template-columns: 1fr;
  }
  .metcalf-sitewide-form-cta-form #gform_fields_4 {
    grid-template-columns: 1fr;
  }
  .metcalf-sitewide-form-cta-form #field_4_3,
  .metcalf-sitewide-form-cta-form #field_4_4 {
    grid-column: auto !important;
  }
}

/* The homepage had a visual-only "Send a Message" card that led to the
   contact page. Keep the useful call, hours and address panel, but remove the
   duplicate pseudo-form now that the real Gravity Form follows it. */
.home .contact-inner {
  grid-template-columns: minmax(0, 46rem) !important;
  justify-content: center;
  text-align: center;
}
.home .contact-content {
  align-items: center;
}
.home .contact-actions,
.home .contact-meta {
  justify-content: center;
}
.home .contact-meta {
  width: 100%;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 1.4rem 3.25rem;
}
.home .contact-form-wrap {
  display: none !important;
}
@media (max-width: 780px) {
  .home .contact-meta {
    align-items: center;
    flex-direction: column !important;
    gap: 1.15rem;
  }
}

/* ===================================================
   Canonical Ellicott City plumber hub
   Uses the services-hub rhythm with local service cards and map proof.
   =================================================== */
.page-id-815 .wp-block-post-title {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 calc(50% - 50vw) !important;
  padding: clamp(1.4rem, 3vw, 2.35rem) var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--base-4);
  background: #173d32;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.06;
  text-align: center;
}
.ec-hub {
  width: 100vw !important;
  max-width: none !important;
  margin: 0 calc(50% - 50vw) !important;
  overflow: hidden;
  color: var(--wp--preset--color--contrast);
}
.ec-hub-shell {
  width: min(100% - 3rem, var(--wp--style--global--wide-size, 1280px));
  margin-inline: auto;
}
.ec-hub-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 7vw, 7rem) 0;
  overflow: hidden;
  color: var(--wp--preset--color--base-4);
  background: #143b31;
}
.ec-hub-hero::before {
  position: absolute;
  inset: auto -8rem -13rem auto;
  z-index: -1;
  width: min(60vw, 760px);
  aspect-ratio: 1;
  content: '';
  border: 1px solid rgba(232, 240, 224, 0.2);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(232, 240, 224, 0.04), 0 0 0 100px rgba(232, 240, 224, 0.035);
}
.ec-hub-hero-grid,
.ec-hub-intro-grid,
.ec-hub-local-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 7vw, 7.5rem);
  align-items: center;
}
.ec-hub-eyebrow {
  margin: 0 0 0.85rem;
  color: #a6cd91;
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ec-hub-eyebrow-dark { color: var(--wp--preset--color--accent-1); }

/* The light sage above is tuned for the dark hero. On the cream services section
   the same class renders at 1.57:1, so light sections take the dark variant. */
.ec-hub-services .ec-hub-eyebrow,
.ec-hub-section-heading .ec-hub-eyebrow {
  color: var(--wp--preset--color--accent-1);
}
.ec-hub-hero h1,
.ec-hub-hero h2,
.ec-hub-intro h2,
.ec-hub-services h2,
.ec-hub-local h2 {
  margin: 0;
  font-size: clamp(2rem, 4.5vw, 4.35rem);
  line-height: 1.04;
}
.ec-hub-lead {
  max-width: 39rem;
  margin: 1.4rem 0 2rem;
  color: rgba(254, 252, 249, 0.86);
  font-size: clamp(1.05rem, 1.5vw, 1.23rem);
  line-height: 1.65;
}
.ec-hub-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.ec-hub-button {
  display: inline-flex;
  min-height: 3.1rem;
  align-items: center;
  padding: 0.75rem 1.2rem;
  color: #fff;
  background: var(--wp--preset--color--accent-3);
  border-radius: 7px;
  font-weight: 800;
  text-decoration: none;
}
.ec-hub-button:hover { color: #fff; filter: brightness(1.07); }
.ec-hub-text-link { color: #fff; font-weight: 700; text-underline-offset: 0.25em; }
.ec-hub-text-link:hover { color: #c6e2b7; }

/* The hub is a wp:html block, so its hero sits inside .wp-block-post-content and
   the in-content link colour (accent-1, specificity (0,2,1)) overrode the white
   declared above: the Call button rendered green-on-dark-red at 1.18:1 and the
   text link green-on-dark-green at 1.57:1. Restate above that weight. */
.wp-block-post-content .ec-hub-hero a,
.entry-content .ec-hub-hero a {
  color: #fff;
}
.wp-block-post-content .ec-hub-hero .ec-hub-button:hover,
.entry-content .ec-hub-hero .ec-hub-button:hover {
  color: #fff;
}
.wp-block-post-content .ec-hub-hero .ec-hub-text-link:hover,
.entry-content .ec-hub-hero .ec-hub-text-link:hover {
  color: #c6e2b7;
}
.ec-hub-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.3rem;
  margin: 2.25rem 0 0;
  padding: 0;
  color: rgba(254, 252, 249, 0.78);
  font-size: 0.88rem;
  list-style: none;
}
.ec-hub-trust li::before { margin-right: 0.42rem; color: #9dca83; content: '✓'; }
.ec-hub-hero-media { position: relative; margin: 0; }
.ec-hub-hero-media::after { position: absolute; inset: 1rem -1rem -1rem 1rem; z-index: -1; content: ''; border: 1px solid rgba(166, 205, 145, 0.7); border-radius: 16px; }
.ec-hub-hero-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.24); }
.ec-hub-intro { padding: clamp(4rem, 8vw, 8rem) 0; background: var(--wp--preset--color--base-4); }
.ec-hub-intro h2 { max-width: 30rem; }
.ec-hub-prose { max-width: 39rem; font-size: 1.07rem; line-height: 1.7; }
.ec-hub-prose p { margin: 0 0 1rem; }
.ec-hub-services { padding: clamp(4rem, 8vw, 7rem) 0; background: var(--wp--preset--color--base); }
.ec-hub-section-heading { max-width: 48rem; margin: 0 auto clamp(2.25rem, 5vw, 4rem); text-align: center; }
.ec-hub-section-heading h2 { font-size: clamp(2rem, 4vw, 3.6rem); }
.ec-hub-section-heading > p:last-child { margin: 1rem auto 0; line-height: 1.6; }
.ec-hub-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ec-hub-service-grid a {
  display: flex;
  min-height: 7rem;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  color: var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(23, 61, 50, 0.12);
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(23, 61, 50, 0.06);
  font-family: var(--wp--preset--font-family--figtree);
  font-size: 1.04rem;
  font-weight: 750;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.ec-hub-service-grid a:hover,
.ec-hub-service-grid a:focus-visible { color: var(--wp--preset--color--accent-1); border-color: rgba(23, 61, 50, 0.45); box-shadow: 0 14px 28px rgba(23, 61, 50, 0.13); transform: translateY(-3px); }
.ec-hub-service-grid b { color: var(--wp--preset--color--accent-1); font-size: 1.35rem; line-height: 1; }
.ec-hub-local { padding: clamp(4rem, 8vw, 7.5rem) 0; background: #edf4e9; }
.ec-hub-map-wrap { position: relative; overflow: hidden; min-height: 27rem; border-radius: 14px; box-shadow: 0 16px 32px rgba(23, 61, 50, 0.12); }
.ec-hub-map { display: block; width: 100%; height: 100%; min-height: 27rem; border: 0; filter: saturate(0.72) contrast(0.98); }
.ec-hub-map-attribution { position: absolute; right: 0.8rem; bottom: 0.8rem; padding: 0.4rem 0.55rem; color: #173d32; background: rgba(254, 252, 249, 0.92); border-radius: 4px; font-size: 0.72rem; font-weight: 700; text-decoration: none; }
.ec-hub-local-copy { max-width: 34rem; }
.ec-hub-local-copy > p:not(.ec-hub-eyebrow) { margin: 1.25rem 0 1.8rem; line-height: 1.7; }
.ec-hub-nearby { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.ec-hub-nearby a { padding: 0.55rem 0.8rem; color: #173d32; border: 1px solid rgba(23, 61, 50, 0.3); border-radius: 999px; font-size: 0.86rem; font-weight: 700; text-decoration: none; }
.ec-hub-nearby a:hover { color: #fff; background: #173d32; }
@media (max-width: 900px) {
  .ec-hub-hero-grid,
  .ec-hub-intro-grid,
  .ec-hub-local-grid { grid-template-columns: 1fr; }
  .ec-hub-hero-media { max-width: 44rem; }
  .ec-hub-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-hub-local-copy { max-width: none; }
}
@media (max-width: 600px) {
  .ec-hub-shell { width: min(100% - 2rem, var(--wp--style--global--wide-size, 1280px)); }
  .ec-hub-hero { padding-block: 3.25rem; }
  .ec-hub-service-grid { grid-template-columns: 1fr; }
  .ec-hub-service-grid a { min-height: 5.4rem; }
  .ec-hub-map-wrap,
  .ec-hub-map { min-height: 20rem; }
}

/* ===================================================
   SERVICE AREAS PAGE (/service-areas/)
   Entire page shipped with class names but no CSS (confirmed via git
   history: never existed). Layout mirrors the catonsville-* / loc-*
   conventions already established elsewhere in this file.
   =================================================== */

/* --- Hero (same technique as .catonsville-hero) --- */
.service-areas-hero {
  position: relative;
  overflow: hidden;
}
.service-areas-hero-header {
  position: relative;
  min-height: clamp(520px, 72vh, 760px);
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(28, 28, 26, 0.35), rgba(28, 28, 26, 0.58)),
    url('/wp-content/uploads/2026/05/service-areas-hero.webp') center 40% / cover no-repeat;
}
.service-areas-hero-header-inner {
  position: relative;
  width: min(100%, var(--wp--style--global--wide-size));
  min-height: inherit;
  margin-inline: auto;
  padding: var(--wp--preset--spacing--40);
  text-align: center;
}
.service-areas-hero-visual { display: contents !important; }
.service-areas-hero-overlay { display: none; }
.service-areas-hero-breadcrumb,
.service-areas-hero-text {
  position: absolute;
  left: 50%;
  z-index: 5;
  width: min(880px, calc(100% - 4rem));
  transform: translateX(-50%);
}
.service-areas-hero-text {
  display: block !important;
  top: 36%;
  margin-block-start: 0;
  transform: translate(-50%, -50%);
}
.service-areas-hero-breadcrumb {
  top: clamp(1.25rem, 3vw, 2.25rem);
  justify-content: center;
  margin-block-end: var(--wp--preset--spacing--30);
  font-size: 0.92rem;
}
.service-areas-hero-breadcrumb,
.service-areas-hero-breadcrumb *,
.service-areas-hero-breadcrumb a {
  color: rgba(254, 252, 249, 0.84);
}
.service-areas-hero-breadcrumb a {
  color: rgba(254, 252, 249, 0.92);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.service-areas-hero-eyebrow {
  display: inline-flex;
  margin-block-end: var(--wp--preset--spacing--20);
  padding: 0.45rem 0.8rem;
  color: var(--wp--preset--color--base-4) !important;
  background: var(--wp--preset--color--accent-1);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1;
}
.service-areas-hero-title {
  max-width: 880px;
  margin-inline: auto;
  color: var(--wp--preset--color--base-4) !important;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.32);
}
.service-areas-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  margin-block-start: calc(var(--wp--preset--spacing--50) * -1);
  padding-inline: var(--wp--preset--spacing--40);
}
.service-areas-hero-content-inner {
  max-width: var(--wp--style--global--wide-size);
  box-sizing: border-box;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.8fr);
  gap: var(--wp--preset--spacing--40);
  align-items: stretch;
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(27, 94, 32, 0.1);
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(28, 28, 26, 0.12);
}
.service-areas-hero-intro { align-self: center; }
.service-areas-hero-description {
  max-width: 780px;
  margin-block-end: var(--wp--preset--spacing--30);
}
.service-areas-hero-actions { gap: var(--wp--preset--spacing--20) !important; }
.service-areas-hero-phone { color: var(--wp--preset--color--accent-1); font-weight: 600; }
.service-areas-hero-sidebar { align-self: center; }
.service-areas-hero-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
}
.service-areas-hero-badge { text-align: center; }
.service-areas-hero-badge-value { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

@media (max-width: 1100px) {
  .service-areas-hero-content-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .service-areas-hero-header { min-height: 620px; }
  .service-areas-hero-header-inner,
  .service-areas-hero-content { padding-inline: var(--wp--preset--spacing--30); }
  .service-areas-hero-content-inner { padding: var(--wp--preset--spacing--30); }
}

/* --- "Choose Your Area" quick-nav card grid (sa-*) --- */
.sa-inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}
.sa-head { text-align: center; margin-block-end: var(--wp--preset--spacing--40); }
.sa-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
}
@media (max-width: 1100px) { .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sa-grid { grid-template-columns: 1fr; } }

/* --- Coverage: county cards --- */
.service-areas-coverage-inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}
.service-areas-coverage-header { text-align: center; margin-block-end: var(--wp--preset--spacing--40); }
.service-areas-coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
}
.service-areas-county-card {
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(27, 94, 32, 0.09);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(28, 28, 26, 0.05);
}
.service-areas-county-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--20);
  margin-block-end: var(--wp--preset--spacing--20);
}
.service-areas-town-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-areas-town-item { margin: 0; }
.service-areas-town-link { color: inherit; text-decoration: none; }
.service-areas-town-link:hover { color: var(--wp--preset--color--accent-1); }
.service-areas-hq-tag {
  margin-inline-start: 0.4em;
  padding: 0.1rem 0.5rem;
  color: var(--wp--preset--color--accent-1);
  background: rgba(27, 94, 32, 0.08);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) { .service-areas-coverage-grid { grid-template-columns: 1fr; } }

/* --- Why Local: 3-up cards with accent stripe --- */
.service-areas-why-local-inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}
.service-areas-why-local-header { text-align: center; margin-block-end: var(--wp--preset--spacing--40); }
.service-areas-why-local-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
}
.service-areas-why-local-card {
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(27, 94, 32, 0.09);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(28, 28, 26, 0.05);
}
.service-areas-why-local-card-accent {
  width: 40px;
  height: 3px;
  margin: 0 0 var(--wp--preset--spacing--20);
  background-color: var(--wp--preset--color--accent-1);
  border: none;
  opacity: 1;
}
@media (max-width: 900px) { .service-areas-why-local-grid { grid-template-columns: 1fr; } }

/* --- Full-service list: left intro / right link tiles --- */
.service-areas-services-inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--wp--preset--spacing--50);
  align-items: start;
}
.service-areas-services-left { align-self: center; }
.service-areas-services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--20);
}
.service-areas-service-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--20);
  padding: var(--wp--preset--spacing--30);
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(27, 94, 32, 0.09);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.service-areas-service-tile:hover {
  border-color: rgba(27, 94, 32, 0.25);
  box-shadow: 0 8px 20px rgba(28, 28, 26, 0.06);
}
.service-areas-service-tile--emergency { border-left: 4px solid var(--wp--preset--color--accent-3); }
.service-areas-service-tile-name { font-weight: 600; }
.service-areas-service-tile-arrow { transition: transform 0.3s; }
.service-areas-service-tile:hover .service-areas-service-tile-arrow { transform: translateX(4px); }
@media (max-width: 1100px) {
  .service-areas-services-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .service-areas-services-grid { grid-template-columns: 1fr; }
}

/* --- Featured location image + fade --- */
.service-areas-featured-inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--wp--preset--spacing--50);
  align-items: center;
}
.service-areas-featured-image-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(28, 28, 26, 0.12);
}
.service-areas-featured-image {
  min-height: 360px;
  height: 100%;
}
.service-areas-featured-image-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 28, 26, 0) 60%, rgba(28, 28, 26, 0.25));
}
@media (max-width: 900px) {
  .service-areas-featured-inner { grid-template-columns: 1fr; }
  .service-areas-featured-image { min-height: 260px; }
}

/* --- Reviews: 3-up cards --- */
.service-areas-reviews-inner {
  max-width: var(--wp--style--global--wide-size);
  margin-inline: auto;
}
.service-areas-reviews-header { text-align: center; margin-block-end: var(--wp--preset--spacing--40); }
.service-areas-reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--30);
}
.service-areas-review-card {
  padding: var(--wp--preset--spacing--40);
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(27, 94, 32, 0.09);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(28, 28, 26, 0.05);
}
.service-areas-review-stars {
  margin: 0 0 var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--accent-3);
  letter-spacing: 0.25em;
  font-size: 1.1rem;
}
.service-areas-review-author { margin-block-start: var(--wp--preset--spacing--20); }
@media (max-width: 900px) { .service-areas-reviews-grid { grid-template-columns: 1fr; } }

/* ===================================================
   :::SECTION:Accessibility — Contrast Fixes:::
   ---------------------------------------------------
   Targeted overrides for text/background combinations that fail WCAG AA
   (4.5:1 normal text / 3:1 large text). Each rule is scoped to the exact
   context that fails; accent-3 (Deep Red) and accent-1 (Forest Green) keep
   their normal contrast everywhere else on light surfaces.
   =================================================== */

/* accent-3 (Deep Red #8B1A1A) eyebrows/numerals inside the dark Charcoal
   band measured 1.84:1. Swap to accent-5 (Sage Light), the token theme.json
   already reserves for text on dark surfaces. Core's .has-accent-3-color
   ships `color: ... !important`, so this needs matching specificity. */
.has-contrast-background-color .has-accent-3-color {
  color: var(--wp--preset--color--accent-5) !important;
}

/* /service-areas/ "The Local Advantage" eyebrow inherits Charcoal body text
   color onto the Forest Green (accent-1) band: 2.17:1. Base-4 solid gives
   7.68:1 on that background. */
.service-areas-why-local-eyebrow {
  color: var(--wp--preset--color--base-4);
}

/* /water-heaters/ "Know Your Options" eyebrow ships an inline
   rgba(254,252,249,0.6) (faded Off White) on the accent-1 Forest Green
   band: 3.88:1. Force full opacity — 7.68:1 — without touching
   .section-eyebrow's other (light-background) usages. */
.water-heaters-decision .section-eyebrow {
  color: var(--wp--preset--color--base-4) !important;
}

/* Homepage .contact-meta-label contrast fix lives at its original rule,
   below in :::SECTION:Contact Page:::, to avoid a duplicate declaration. */

/* ===================================================
   :::SECTION:Selective SVG Flourishes:::
   ---------------------------------------------------
   Decorative SVG belongs to a few memorable moments, not every color token.
   Reset the broad surface-treatment experiment, then give conversion and trust
   components their own visual signature. Every animated layer is transform /
   opacity only and respects reduced-motion preferences.
   =================================================== */

/* Keep ordinary color fields calm. This explicitly replaces the former global
   texture rules so cards and routine content never read as wallpaper. */
.has-base-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.has-base-2-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.has-base-3-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.has-base-4-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.has-accent-1-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.has-accent-2-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.has-accent-3-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.has-accent-4-background-color:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.has-contrast-background-color:not(.marquee-bar):not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-cover__background),
.dark-texture-section {
  background-image: none !important;
}

/* Trust band — slow water-ripple line art gives the proof section movement and
   depth without resorting to plumbing icons or a repeating pattern. */
:root :where(.trust-band) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
:root :where(.trust-band)::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1080' height='620' viewBox='0 0 1080 620'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M-90 469C102 303 289 307 460 432c180 131 363 111 721-94' stroke-opacity='.13' stroke-width='1.7'/%3E%3Cpath d='M-93 524C98 356 291 361 455 482c177 131 367 106 724-93' stroke-opacity='.09' stroke-width='1.7'/%3E%3Cpath d='M-72 579C107 430 290 432 447 545c165 119 354 95 638-66' stroke-opacity='.11' stroke-width='1.7'/%3E%3Cpath d='M678 -57c73 76 175 114 311 109' stroke-opacity='.10' stroke-width='1.7'/%3E%3C/g%3E%3C/svg%3E") center / cover no-repeat;
  transform: translate3d(0, 0, 0);
}
:root :where(.trust-band) .trust-band-inner {
  position: relative;
  z-index: 1;
}

/* Testimonials — a single oversized quotation flourish, deliberately static. */
:root :where(.testimonials) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
:root :where(.testimonials)::before {
  content: '';
  position: absolute;
  top: -3rem;
  right: clamp(1rem, 6vw, 7rem);
  width: min(32vw, 310px);
  height: min(32vw, 310px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cpath d='M91 91c-37 27-55 64-55 111 0 26 12 43 36 43 22 0 39-17 39-40 0-18-12-33-30-36 4-20 18-40 41-60l-31-18zm132 0c-37 27-55 64-55 111 0 26 12 43 36 43 22 0 39-17 39-40 0-18-12-33-30-36 4-20 18-40 41-60l-31-18z' fill='none' stroke='%231B5E20' stroke-opacity='.08' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
:root :where(.testimonials) .testimonials-inner {
  position: relative;
  z-index: 1;
}

/* Footer CTA — the call promise gets a large, subtle signal field. The layer
   drifts only on capable devices; its animation is composited and isolated. */
.footer-cta-strip::after {
  content: '';
  position: absolute;
  inset: -18% -8% -26% 42%;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='500' viewBox='0 0 820 500'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M817 37C635 15 475 91 399 228c-63 114-169 184-342 223' stroke-opacity='.17' stroke-width='2'/%3E%3Cpath d='M817 106c-151-17-285 47-353 164-66 113-169 170-307 201' stroke-opacity='.11' stroke-width='2'/%3E%3Cpath d='M817 175c-123-12-232 38-294 137-58 92-150 137-260 162' stroke-opacity='.14' stroke-width='2'/%3E%3Cpath d='M640 53c-26 45-31 94-14 141' stroke-opacity='.19' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") right center / min(820px, 74vw) auto no-repeat;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: no-preference) {
  :root :where(.trust-band)::before {
    animation: metcalf-ripple-drift 18s ease-in-out infinite alternate;
  }
  .footer-cta-strip::after {
    animation: metcalf-signal-drift 14s ease-in-out infinite alternate;
  }
}
@keyframes metcalf-ripple-drift {
  from { transform: translate3d(-1.5%, 1%, 0) scale(1.01); opacity: 0.86; }
  to { transform: translate3d(1.5%, -1%, 0) scale(1.04); opacity: 1; }
}
@keyframes metcalf-signal-drift {
  from { transform: translate3d(-1.5%, 1.5%, 0) scale(1); opacity: 0.78; }
  to { transform: translate3d(1.5%, -1.5%, 0) scale(1.04); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :root :where(.trust-band)::before,
  .footer-cta-strip::after {
    animation: none;
  }
}

/* ===================================================
   :::SECTION:Connected Page Language:::
   ---------------------------------------------------
   The site should feel composed as a whole: a visitor moving from the home
   page into a service or location page keeps seeing the same hand-drawn,
   route-like line language. These are large, one-off illustrations (not
   tiled textures), each chosen for the job of its section.
   =================================================== */

/* Inner-page trail — a deliberately designed transition rather than a plain
   utility row. The light contour line keeps the breadcrumb readable while
   visually echoing the broad water lines used in the home-page trust band. */
.mp-breadcrumb {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 0.78rem;
  background-color: var(--wp--preset--color--base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='104' viewBox='0 0 820 104'%3E%3Cg fill='none' stroke='%231B5E20' stroke-linecap='round'%3E%3Cpath d='M398 102c87-63 161-77 245-36 65 32 120 27 213-29' stroke-opacity='.14' stroke-width='1.4'/%3E%3Cpath d='M520 106c72-45 136-52 203-23 47 21 89 14 136-15' stroke-opacity='.10' stroke-width='1.4'/%3E%3Cpath d='M692 3c17 23 46 36 83 36' stroke-opacity='.13' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: min(760px, 68vw) auto;
  border-top: 1px solid rgba(27, 94, 32, 0.10);
  border-bottom: 1px solid rgba(27, 94, 32, 0.12);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.76);
}
.mp-breadcrumb-list {
  position: relative;
  z-index: 1;
}
.mp-breadcrumb-list li:not(:first-child)::before {
  content: '›';
  color: var(--wp--preset--color--accent-3);
  font-family: Georgia, serif;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1;
}
.mp-breadcrumb-list a {
  color: var(--wp--preset--color--accent-1);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(27, 94, 32, 0.25);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.mp-breadcrumb-list a:hover {
  color: var(--wp--preset--color--accent-3);
  text-decoration-color: currentColor;
}
.mp-breadcrumb-current {
  color: var(--wp--preset--color--contrast);
  font-weight: 700;
}

/* Several cornerstone pages have an authored hero breadcrumb rather than the
   shared nav above. Treat those as the same navigational component so the
   visitor never drops out of the visual system between hubs and detail pages. */
:root :where(.water-heaters-hero) .water-heaters-breadcrumb,
:root :where(.services-hero) .services-hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 0.48rem 0.72rem;
  background: rgba(232, 240, 232, 0.72);
  border: 1px solid rgba(27, 94, 32, 0.13);
  border-left: 3px solid var(--wp--preset--color--accent-3);
  border-radius: 0 999px 999px 0;
  box-shadow: 0 5px 18px rgba(28, 28, 26, 0.04);
}
:root :where(.water-heaters-hero) .water-heaters-breadcrumb a,
:root :where(.services-hero) .services-hero-breadcrumb a {
  color: var(--wp--preset--color--accent-1);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(27, 94, 32, 0.25);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
:root :where(.water-heaters-hero) .water-heaters-breadcrumb-current,
:root :where(.services-hero) .services-hero-breadcrumb-current {
  color: var(--wp--preset--color--contrast);
  font-weight: 700;
}
:root :where(.water-heaters-hero) .water-heaters-breadcrumb-sep,
:root :where(.services-hero) .services-hero-breadcrumb-sep {
  margin-inline: 0.5em;
  color: var(--wp--preset--color--accent-3);
  font-family: Georgia, serif;
  font-size: 1.15em;
  font-weight: 700;
  opacity: 1;
}

/* Photography heroes need the inverse treatment: an intentional glass-like
   waypoint retains contrast without fighting the image or becoming a banner. */
.catonsville-hero-breadcrumb,
.service-areas-hero-breadcrumb {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.48rem 0.72rem;
  background: rgba(28, 28, 26, 0.44);
  border: 1px solid rgba(254, 252, 249, 0.22);
  border-left: 3px solid rgba(254, 252, 249, 0.92);
  border-radius: 0 999px 999px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.catonsville-hero-breadcrumb a,
.service-areas-hero-breadcrumb a {
  color: var(--wp--preset--color--base-4) !important;
  font-weight: 700;
}
.catonsville-hero-breadcrumb-sep,
.service-areas-hero-breadcrumb-sep {
  margin-inline: 0.5em;
  color: rgba(254, 252, 249, 0.72);
  font-family: Georgia, serif;
  font-size: 1.15em;
  font-weight: 700;
}

/* Home hero — the team photo remains fixed (avoiding the prior compositor
   shift), while this separate line illustration gives the content panel a
   quiet sense of motion and links it to the rest of the system. */
:root :where(.hero) .hero-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
:root :where(.hero) .hero-content::before {
  content: '';
  position: absolute;
  inset: -54% -8% -44% 42%;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='430' viewBox='0 0 760 430'%3E%3Cg fill='none' stroke='%231B5E20' stroke-linecap='round'%3E%3Cpath d='M720 28C541 3 394 80 324 206c-56 102-150 161-287 190' stroke-opacity='.15' stroke-width='1.6'/%3E%3Cpath d='M757 84C587 64 448 122 381 237c-52 90-138 143-254 166' stroke-opacity='.10' stroke-width='1.6'/%3E%3Cpath d='M738 145c-133-8-244 40-305 138-48 77-123 116-221 140' stroke-opacity='.13' stroke-width='1.6'/%3E%3Ccircle cx='582' cy='100' r='4.5' fill='%238B1A1A' fill-opacity='.38' stroke='none'/%3E%3C/g%3E%3C/svg%3E") right center / min(760px, 60vw) auto no-repeat;
  transform: translate3d(0, 0, 0);
}
:root :where(.hero) .hero-content-inner {
  position: relative;
  z-index: 1;
}

/* A stronger, non-repeating field behind the core-service cards. The paths
   intentionally start and end off-canvas so the section reads as one scene,
   not as a printed pattern. */
:root :where(.services#services) {
  isolation: isolate;
  overflow: hidden;
}
:root :where(.services#services)::before {
  inset: -4% 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='830' viewBox='0 0 1440 830'%3E%3Cg fill='none' stroke='%231B5E20' stroke-linecap='round'%3E%3Cpath d='M-36 694C190 494 375 486 590 636c210 147 445 131 899-103' stroke-opacity='.11' stroke-width='1.8'/%3E%3Cpath d='M-54 772C176 574 366 569 579 714c207 140 459 116 916-103' stroke-opacity='.075' stroke-width='1.8'/%3E%3Cpath d='M1022 -21c76 103 191 152 353 142' stroke-opacity='.12' stroke-width='1.8'/%3E%3Ccircle cx='1067' cy='132' r='6' fill='%238B1A1A' fill-opacity='.24' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

/* The story section gets a single, warm sunburst/contour mark instead of the
   old paper-like noise. It makes the family-and-company content feel more
   human without adding another plumbing illustration. */
:root :where(.about) {
  isolation: isolate;
  overflow: hidden;
}
:root :where(.about)::before {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640' viewBox='0 0 640 640'%3E%3Cg fill='none' stroke='%238B1A1A' stroke-linecap='round'%3E%3Cpath d='M551 28C408 65 319 164 299 297c-17 115-95 209-236 278' stroke-opacity='.105' stroke-width='1.6'/%3E%3Cpath d='M623 77C488 109 404 197 385 314c-17 105-86 188-205 251' stroke-opacity='.075' stroke-width='1.6'/%3E%3Cpath d='M641 145c-118 25-196 98-211 200-13 83-66 150-159 203' stroke-opacity='.11' stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-position: right -5rem center;
  background-repeat: no-repeat;
  background-size: min(510px, 48vw) auto;
}

/* The request section gets the clearest animated signal: service is available
   and a person will respond. This is separate from the footer's signal field
   so it is visible in the page body where the contact decision is made. */
:root :where(.contact) {
  isolation: isolate;
  overflow: hidden;
}
:root :where(.contact)::before {
  inset: -18% -5% -22% 46%;
  z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='510' viewBox='0 0 760 510'%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M746 38C555 5 413 93 350 225c-50 105-151 182-309 235' stroke-opacity='.20' stroke-width='2'/%3E%3Cpath d='M755 112C601 85 483 142 422 249c-49 87-132 149-257 188' stroke-opacity='.12' stroke-width='2'/%3E%3Cpath d='M745 184c-128-17-224 25-278 116-43 73-115 121-213 151' stroke-opacity='.17' stroke-width='2'/%3E%3Ccircle cx='576' cy='107' r='7' fill='%23fff' fill-opacity='.35' stroke='none'/%3E%3C/g%3E%3C/svg%3E") right center / min(760px, 65vw) auto no-repeat;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: no-preference) {
  :root :where(.hero) .hero-content::before {
    animation: metcalf-content-drift 16s ease-in-out infinite alternate;
  }
  :root :where(.contact)::before {
    animation: metcalf-contact-signal 13s ease-in-out infinite alternate;
  }
}
@keyframes metcalf-content-drift {
  from { transform: translate3d(-1%, 1%, 0) scale(1); opacity: 0.82; }
  to { transform: translate3d(1%, -1%, 0) scale(1.03); opacity: 1; }
}
@keyframes metcalf-contact-signal {
  from { transform: translate3d(-1.5%, 1%, 0) scale(1); opacity: 0.84; }
  to { transform: translate3d(1.5%, -1%, 0) scale(1.035); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  :root :where(.hero) .hero-content::before,
  :root :where(.contact)::before {
    animation: none;
  }
}

/* --- Bottom CTA (same technique as .loc-cta-inner) --- */
.service-areas-bottom-cta-inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.service-areas-bottom-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--20);
  margin-block-start: var(--wp--preset--spacing--30);
}
.service-areas-bottom-cta-phone { margin-block-start: var(--wp--preset--spacing--20); }

/* ===================================================
   :::SECTION:Shared Service FAQ (mp-service-faq):::
   Reusable native Details FAQ for service pages. The "faq-item" class is what
   metcalf_plumbing_output_faq_schema() parses to emit FAQPage JSON-LD, so keep
   it on the <details> element. Generalised from the water-heaters treatment.
   =================================================== */

/* The list sits inside a constrained group, which gives every child auto side
   margins. Left as-is those margins shrink-wrap each <details> to its summary
   width and the divider rules come out ragged, so reset them to full width. */
:root :where(.mp-service-faq) .mp-service-faq-list > * {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

:root :where(.mp-service-faq) .mp-faq-item {
  border-bottom: 1px solid rgba(27, 94, 32, 0.12);
}

:root :where(.mp-service-faq) .mp-faq-item:first-child {
  border-top: 1px solid rgba(27, 94, 32, 0.12);
}

:root :where(.mp-service-faq) .mp-faq-item > summary {
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
  padding: var(--wp--preset--spacing--30) 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  transition: color 0.2s ease;
}

:root :where(.mp-service-faq) .mp-faq-item > summary::-webkit-details-marker {
  display: none;
}

:root :where(.mp-service-faq) .mp-faq-item > summary::after {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: var(--wp--preset--color--accent-1);
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27currentColor%27%20stroke-width%3D%272.5%27%3E%3Cpath%20d%3D%27M12%205v14M5%2012h14%27%2F%3E%3C%2Fsvg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  transition: transform 0.3s ease;
}

:root :where(.mp-service-faq) .mp-faq-item[open] > summary::after {
  transform: rotate(45deg);
}

:root :where(.mp-service-faq) .mp-faq-item > summary:hover,
:root :where(.mp-service-faq) .mp-faq-item > summary:focus-visible {
  color: var(--wp--preset--color--accent-1);
}

:root :where(.mp-service-faq) .mp-faq-answer {
  margin: 0 0 var(--wp--preset--spacing--30);
  padding-right: var(--wp--preset--spacing--40);
  font-family: var(--wp--preset--font-family--figtree);
  font-size: var(--wp--preset--font-size--medium);
  color: var(--wp--preset--color--contrast-2);
}

@media (max-width: 768px) {
  :root :where(.mp-service-faq) .mp-faq-item > summary {
    font-size: var(--wp--preset--font-size--medium);
  }

  :root :where(.mp-service-faq) .mp-faq-answer {
    padding-right: 0;
  }
}

/* ===================================================
   :::SECTION:Booking card (mp-booking-card):::
   Replaces the embedded Housecall Pro iframe on /contact-us/. HCP's booking app
   is a client-side app that will not initialise in a cross-origin iframe (the
   same reason assets/js/booking-modal.js retired the on-site modal) — it hung on
   a loading skeleton, which rendered as a large empty grey panel. Booking now
   opens in a new tab from a real call-to-action.
   =================================================== */

.mp-booking-card {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  background: var(--wp--preset--color--base-4);
  border: 1px solid rgba(27, 94, 32, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.12);
}

.mp-booking-card__eyebrow {
  margin: 0 0 var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--accent-1);
  font-family: var(--wp--preset--font-family--figtree);
  font-size: clamp(0.82rem, 0.78rem + 0.14vw, 0.95rem);
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mp-booking-card__lead {
  max-width: 46ch;
  margin: 0 auto var(--wp--preset--spacing--40);
  color: var(--wp--preset--color--contrast-2);
  font-size: 1.05rem;
  line-height: 1.7;
}

.mp-booking-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  align-items: center;
  justify-content: center;
  margin: 0;
}

.mp-booking-card__btn {
  display: inline-flex;
  align-items: center;
  min-height: 3.1rem;
  padding: 0.9rem 2rem;
  color: var(--wp--preset--color--base-4);
  background: var(--wp--preset--color--accent-3);
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.2s ease;
}

/* This card renders inside .wp-block-post-content, where the in-content link
   colour would otherwise repaint both links forest green. */
.wp-block-post-content a.mp-booking-card__btn,
.entry-content a.mp-booking-card__btn {
  color: var(--wp--preset--color--base-4);
}

.wp-block-post-content a.mp-booking-card__alt,
.entry-content a.mp-booking-card__alt {
  color: var(--wp--preset--color--accent-1);
}

.mp-booking-card__btn:hover {
  filter: brightness(1.08);
}

.mp-booking-card__alt {
  display: inline-flex;
  align-items: center;
  min-height: 3.1rem;
  color: var(--wp--preset--color--accent-1);
  font-weight: 700;
  text-underline-offset: 0.25em;
}

@media (max-width: 480px) {
  .mp-booking-card__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .mp-booking-card__btn {
    justify-content: center;
  }

  .mp-booking-card__alt {
    justify-content: center;
  }
}

/* ===================================================
   :::SECTION:Service page hero alignment:::
   The core service pages were authored with a left-aligned hero heading and lead
   but centred hero buttons, so the hero read as misaligned. Centring the copy
   matches the buttons, the /drain-services/ and /toilets/ heroes that were already
   centred, and the Ellicott City service pages. Scoped to the `mp-service-page`
   body class (see metcalf_plumbing_service_page_body_class) so location, company
   and hub heroes, which have their own deliberate layouts, are untouched.
   =================================================== */

/* Matched by contents, not position: functions.php prepends the breadcrumb <nav>
   to the_content, so the hero cover is not :first-child. The closing CTA cover on
   these pages holds an h2, so :has(h1) isolates the hero. */
.mp-service-page .wp-block-post-content > .wp-block-cover:has(h1) :is(h1, h2, p) {
  text-align: center;
}

/* The hero lead often carries a max-width utility; without auto margins the box
   stays pinned left even once its text is centred. */
.mp-service-page .wp-block-post-content > .wp-block-cover:has(h1) p[class*="u-maxw"],
.mp-service-page .wp-block-post-content > .wp-block-cover:has(h1) p[style*="max-width"] {
  margin-left: auto;
  margin-right: auto;
}

.mp-service-page .wp-block-post-content > .wp-block-cover:has(h1) .wp-block-buttons {
  justify-content: center;
}