/**
 * Theme Name: Southern Roofing Co
 * Version: 1.0.0
 * template: twentytwentyfive
 * Description: Custom WordPress theme for Southern Roofing Co.
 * Author: Quickdraw Software LLC
 */

/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   
   1. Variables & Design Tokens
   2. Reset & Base Styles
   3. Layout & Utilities
   4. Components
      4.1 Buttons
      4.2 Site Header & Navigation
      4.3 Footer
      4.4 Icons
      4.5 Typography
   5. Page Styles
      5.1 Home
      5.2 Residential
      5.3 Residential Sub-Pages
      5.4 Commercial
      5.5 About
   6. WordPress Overrides
   
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES & DESIGN TOKENS
   ========================================================================== */

:root {
  --brand-red: #ed1c24;
  --brand-red-hover: #c9161d;
  --brand-slate: #2a2f36;
  --brand-slate-blue: #4a5d73;
  --brand-gray: #9ea3a8;
  --brand-cream: #f2f2f2;

  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;

  --font-sans: 'Montserrat', sans-serif;
  --font-serif: 'Merriweather', serif;

  /* Icon System using CSS masks */
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z'/%3E%3C/svg%3E");
  --icon-email: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75'/%3E%3C/svg%3E");
  --icon-location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 10.5a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z'/%3E%3C/svg%3E");
  --icon-tpo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z'/%3E%3C/svg%3E");
  --icon-epdm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z'/%3E%3C/svg%3E");
  --icon-bitumen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25'/%3E%3C/svg%3E");
  --icon-metal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z'/%3E%3C/svg%3E");

  --icon-care-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ed1c24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  --icon-care-droplet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ed1c24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'/%3E%3C/svg%3E");
  --icon-care-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ed1c24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  --icon-care-tool: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ed1c24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
  --icon-care-storm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ed1c24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 16.9A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25'/%3E%3Cpolyline points='16 16 12 20 8 16'/%3E%3C/svg%3E");
  --icon-care-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ed1c24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
  --icon-care-clipboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ed1c24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}


/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */

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

html {
  font-family: var(--font-sans);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  color: var(--brand-slate);
}

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

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font-sans);
  padding: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}


/* ==========================================================================
   3. LAYOUT & UTILITIES
   ========================================================================== */

/* Site wrapper for full-height layouts */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Hide/show utilities */
.hide-below-lg {
  display: none;
}

.hide-above-lg {
  display: flex;
}

@media (min-width: 1024px) {
  .hide-below-lg {
    display: block;
  }

  .hide-above-lg {
    display: none !important;
  }
}

/* Bullet dot utility */
.bullet-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand-red);
  flex-shrink: 0;
  margin-right: 0.75rem;
  vertical-align: middle;
}

/* Section backgrounds */
.bg-white { background: #fff; }
.bg-cream { background: var(--brand-cream); }
.bg-slate-blue { background: var(--brand-slate-blue); }
.bg-slate { background: var(--brand-slate); }


/* ==========================================================================
   4. COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 BUTTONS
   -------------------------------------------------------------------------- */

.btn-primary {
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--brand-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0.375rem;
  transition: background 0.15s;
  text-align: center;
  text-decoration: none;
}

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

.btn-outline-dark {
  display: inline-block;
  padding: 1rem 2rem;
  background: #fff;
  color: var(--brand-slate);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0.375rem;
  border: 2px solid var(--brand-slate);
  transition: background 0.2s, color 0.2s;
  text-align: center;
  text-decoration: none;
}

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

.btn-outline-white {
  display: inline-block;
  padding: calc(1rem - 2px) calc(2rem - 2px);
  background: #fff;
  color: var(--brand-slate);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0.375rem;
  border: 2px solid #fff;
  transition: background 0.2s, color 0.2s;
  text-align: center;
  text-decoration: none;
}

.btn-outline-white:hover {
  background: transparent;
  color: #fff;
}

/* --------------------------------------------------------------------------
   4.2 SITE HEADER & NAVIGATION
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Contact bar (desktop only) */
.contact-bar {
  display: none;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}

@media (min-width: 1024px) {
  .contact-bar {
    display: block;
  }
}

.contact-bar-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.625rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-bar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-600);
  font-size: 0.875rem;
  transition: color 0.15s;
}

.contact-bar-link:hover {
  color: var(--brand-red);
}

.contact-bar-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.btn-estimate-sm {
  display: inline-block;
  padding: 0.375rem 1.25rem;
  background: var(--brand-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 0.375rem;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-estimate-sm:hover {
  background: var(--brand-red-hover);
}

/* Legacy header link styles */
.contact-bar-inner a,
.site-nav-inner a {
  text-decoration: none;
}

/* Header contact links in block theme */
.header-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.header-contact-link::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.header-contact-link.icon-phone::before {
  -webkit-mask-image: var(--icon-phone);
  mask-image: var(--icon-phone);
}

.header-contact-link.icon-email::before {
  -webkit-mask-image: var(--icon-email);
  mask-image: var(--icon-email);
}

.header-contact-link,
.header-contact-link a,
.header-contact-link::before {
  text-decoration: none;
  color: var(--wp--preset--color--gray-600) !important;
}

.header-contact-link:hover,
.header-contact-link a:hover,
.header-contact-link:hover::before {
  color: var(--brand-red) !important;
}

/* Request Estimate - red text styling */
.wp-block-navigation-item__content[href*="request-estimate"],
.wp-block-navigation-item__content[href*="estimate"] {
  color: var(--brand-red) !important;
}

/* Request Estimate - darker red on hover */
.site-header .wp-block-navigation-item__content[href*="request-estimate"]:hover,
.site-header .wp-block-navigation-item__content[href*="estimate"]:hover {
  color: var(--brand-red-hover) !important;
}

/* Header navigation hover - no underline, dark gray color */
.site-header .wp-block-navigation-item__content:hover {
  text-decoration: none;
  color: var(--gray-900) !important;
}

/* Header submenu items - match main nav gray color */
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--gray-500) !important;
}

.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--gray-900) !important;
}

/* Hide Home in the inline desktop nav only — the logo links home; overlay keeps it */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item:first-child {
  display: none;
}

/* Legacy site nav */
.site-nav {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
}

.site-nav-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-nav-logo img {
  height: 6rem;
  width: auto;
  display: block;
  margin: -0.5rem 0;
}

/* Desktop navigation */
.nav-desktop {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
  }
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  transition: color 0.15s;
  white-space: nowrap;
  background: none;
  border: none;
  font-family: var(--font-sans);
  cursor: pointer;
}

.nav-link:hover,
.nav-link-active {
  color: var(--gray-900);
}

.nav-link-red {
  color: var(--brand-red);
}

.nav-link-red:hover {
  color: var(--brand-red-hover);
}

.nav-chevron {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.nav-has-dropdown {
  position: relative;
}

.nav-has-dropdown:hover .nav-dropdown {
  display: block;
}

.nav-has-dropdown:hover .nav-chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 12rem;
  background: #fff;
  border: 1px solid var(--gray-200);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  border-radius: 0 0 0.375rem 0.375rem;
}

.nav-dropdown-link {
  display: block;
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-100);
  transition: color 0.15s, background 0.15s;
}

.nav-dropdown-link:last-child {
  border-bottom: none;
  border-radius: 0 0 0.375rem 0.375rem;
}

.nav-dropdown-link:hover {
  color: var(--gray-900);
  background: var(--gray-50);
}

/* Mobile actions */
.nav-mobile-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 1024px) {
  .nav-mobile-actions {
    display: none;
  }
}

.nav-mobile-toggle {
  padding: 0.5rem;
  color: var(--gray-700);
}

.nav-mobile-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Mobile drawer */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 40;
}

.mobile-overlay.is-open {
  display: block;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 18rem;
  background: #fff;
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.mobile-drawer.is-open {
  transform: translateX(0);
}

@media (min-width: 1024px) {
  .mobile-drawer {
    display: none;
  }
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
}

.mobile-drawer-header img {
  height: 4rem;
  width: auto;
}

.mobile-close-btn {
  padding: 0.5rem;
  color: var(--gray-500);
  transition: color 0.15s;
}

.mobile-close-btn:hover {
  color: var(--gray-900);
}

.mobile-close-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.mobile-drawer-nav {
  flex: 1;
  padding: 0.5rem 0;
}

.mobile-nav-link {
  display: block;
  padding: 0.875rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-700);
  transition: color 0.15s;
}

.mobile-nav-link:hover {
  color: var(--gray-900);
}

.mobile-nav-link-red {
  color: var(--brand-red);
}

.mobile-nav-link-red:hover {
  color: var(--brand-red-hover);
}

.mobile-nav-expandable {
  border-bottom: 1px solid var(--gray-100);
}

.mobile-nav-expand-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-700);
  transition: color 0.15s;
  font-family: var(--font-sans);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.mobile-nav-expand-btn:hover {
  color: var(--gray-900);
}

.mobile-nav-chevron {
  width: 0.75rem;
  height: 0.75rem;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.mobile-nav-expand-btn.is-expanded .mobile-nav-chevron {
  transform: rotate(180deg);
}

.mobile-dropdown {
  background: var(--gray-50);
}

.mobile-dropdown-link {
  display: block;
  padding: 0.625rem 2.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  border-bottom: 1px solid var(--gray-100);
  transition: color 0.15s;
}

.mobile-dropdown-link:last-child {
  border-bottom: none;
}

.mobile-dropdown-link:hover {
  color: var(--gray-900);
}

.mobile-drawer-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mobile-contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-600);
  transition: color 0.15s;
}

.mobile-contact-link:hover {
  color: var(--brand-red);
}

.mobile-contact-link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4.3 FOOTER
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--gray-900);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.site-footer a,
.site-footer .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer a:hover,
.site-footer .wp-block-navigation-item__content:hover {
  color: #ffffff !important;
}

.footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-brand-name {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}

.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
  transition: color 0.15s;
}

.footer-contact-link:last-child {
  margin-bottom: 0;
}

.footer-contact-link:hover {
  color: #fff;
}

p.footer-contact-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  margin: 0;
}

.footer-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand-red);
  flex-shrink: 0;
}

.footer-icon-circle svg {
  width: 1rem;
  height: 1rem;
  color: #fff;
}

.footer-col-heading {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.footer-col-rule {
  width: 3rem;
  height: 2px;
  background: var(--brand-red);
  margin-bottom: 1.5rem;
}

hr.wp-block-separator.footer-col-rule {
  width: 3rem !important;
  max-width: 3rem !important;
  height: 2px;
  border: none;
  margin: 0 0 1.5rem !important;
}

.footer-sitemap {
  font-size: 0.875rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.5rem;
  row-gap: 0.625rem;
}

.footer-sitemap .wp-block-navigation__container {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0.625rem;
  width: 100%;
}

@media (min-width: 1024px) {
  .footer-sitemap .wp-block-navigation__container {
    grid-template-columns: 1fr 1fr;
  }
}

.footer-sitemap .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, 0.7);
}

.footer-sitemap .wp-block-navigation-item__content:hover {
  color: #ffffff;
}

.footer-sitemap-link {
  color: rgba(255,255,255,0.7);
  font-size: 0.875rem;
  transition: color 0.15s;
}

.footer-sitemap-link:hover {
  color: #fff;
}

.footer-address {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255,255,255,0.7);
}

p.footer-address {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
}

.footer-address svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--brand-red);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.footer-address-icon {
  display: block;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.footer-address p {
  font-size: 0.875rem;
  line-height: 1.75;
}

.footer-address span:last-child {
  font-size: 0.875rem;
  line-height: 1.75;
}

.footer-copyright {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1rem 0;
}

.footer-copyright-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}

.footer-copyright span {
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
}

/* Footer specific icon styles */
.site-footer .footer-contact-link {
  position: relative;
  padding-left: 2.25rem;
}

.site-footer .footer-contact-link:not(.legacy-footer)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--brand-red);
  border-radius: 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.site-footer .icon-phone::before {
  -webkit-mask-image: var(--icon-phone);
  mask-image: var(--icon-phone);
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}

.site-footer .icon-email::before {
  -webkit-mask-image: var(--icon-email);
  mask-image: var(--icon-email);
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}

.site-footer .icon-location-block {
  position: relative;
  padding-left: 1.75rem;
}

.site-footer .icon-location-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: var(--icon-location);
  mask-image: var(--icon-location);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
}

.site-footer .icon-circle-red {
  position: relative;
  padding-left: 2.25rem;
}

.site-footer .icon-circle-red::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  background-color: var(--brand-red);
  border-radius: 50%;
}

.site-footer .icon-circle-red::after {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: white;
}

.site-footer .icon-phone-red::after {
  -webkit-mask-image: var(--icon-phone);
  mask-image: var(--icon-phone);
}

.site-footer .icon-email-red::after {
  -webkit-mask-image: var(--icon-email);
  mask-image: var(--icon-email);
}

.site-footer .icon-location-indent {
  position: relative;
  padding-left: 1.75rem;
}

.site-footer :not(.footer-inner) .icon-location-indent::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: var(--icon-location);
  mask-image: var(--icon-location);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
}

.site-footer .icon-location-red {
  position: relative;
  padding-left: 1.75rem;
}

.site-footer .icon-location-red::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: var(--icon-location);
  mask-image: var(--icon-location);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--brand-red);
}

/* --------------------------------------------------------------------------
   4.4 ICONS
   -------------------------------------------------------------------------- */

.icon-phone,
.icon-email,
.icon-location {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-phone::before,
.icon-email::before,
.icon-location::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
}

.icon-phone::before {
  -webkit-mask-image: var(--icon-phone);
  mask-image: var(--icon-phone);
}

.icon-email::before {
  -webkit-mask-image: var(--icon-email);
  mask-image: var(--icon-email);
}

.icon-location::before {
  -webkit-mask-image: var(--icon-location);
  mask-image: var(--icon-location);
}

.icon-sm::before {
  width: 0.875rem;
  height: 0.875rem;
}

.icon-md::before {
  width: 1.125rem;
  height: 1.125rem;
}

.icon-lg::before {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-block {
  display: flex;
}

/* --------------------------------------------------------------------------
   4.5 TYPOGRAPHY
   -------------------------------------------------------------------------- */

.section-label {
  color: var(--brand-red);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.section-title-dark {
  font-family: var(--font-serif);
  color: var(--brand-slate);
  font-size: 1.875rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .section-title-dark {
    font-size: 2.25rem;
  }
}

.section-title-light {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.875rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .section-title-light {
    font-size: 2.25rem;
  }
}


/* ==========================================================================
   5. PAGE STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 HOME PAGE
   -------------------------------------------------------------------------- */

.split-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

@media (min-width: 768px) {
  .split-hero {
    flex-direction: row;
    height: 70vh;
  }
}

.split-hero a {
  text-decoration: none;
}

.split-hero-panel {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 3rem 2rem;
  overflow: hidden;
  cursor: pointer;
  min-height: 360px;
}

@media (min-width: 768px) {
  .split-hero-panel {
    padding: 5rem 4rem;
    min-height: 0;
  }
}

.split-hero-panel:hover .split-hero-bg {
  transform: scale(1.03);
}

.split-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1s ease-in-out;
}

.split-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.25) 100%);
}

.split-hero-content {
  position: relative;
  z-index: 10;
}

.split-hero-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.025em;
  line-height: 1;
  margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
  .split-hero-title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .split-hero-title {
    font-size: 4.5rem;
  }
}

.split-hero-subtitle {
  font-size: 1.125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .split-hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
  }
}

.split-hero-btn {
  display: inline-block;
  padding: 1rem 3.5rem;
  background: #fff;
  color: var(--brand-slate);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  border: 2px solid #fff;
  border-radius: 0.375rem;
  transition: background 0.2s, color 0.2s;
  text-align: center;
}

.split-hero-btn:hover {
  background: transparent;
  color: #fff;
}

.split-hero-divider {
  display: none;
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 20;
  width: 1px;
  background: rgba(255,255,255,0.4);
}

@media (min-width: 768px) {
  .split-hero-divider {
    display: block;
  }
}

.trust-bar {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 2.5rem 0;
}

.trust-bar-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .trust-bar-inner {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .trust-bar-inner {
    grid-template-columns: repeat(6, 1fr);
  }
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.trust-item svg {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--gray-400);
}

.trust-item p {
  color: var(--gray-700);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
}

.why-choose-us {
  background: var(--brand-slate-blue);
  padding: 5rem 1.5rem;
}

.why-choose-us-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.why-choose-us-title {
  font-family: var(--font-serif);
  font-weight: 900;
  color: #fff;
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .why-choose-us-title {
    font-size: 3rem;
  }
}

.why-choose-us-body {
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 48rem;
  margin-bottom: 2.5rem;
}

.why-choose-us-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.why-choose-us-list li {
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   5.2 RESIDENTIAL PAGE
   -------------------------------------------------------------------------- */

.res-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  padding: 8rem 1.5rem 4rem;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .res-hero {
    padding: 8rem 3rem 4rem;
  }
}

.res-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 47, 54, 0.65);
}

.res-hero-content {
  position: relative;
  z-index: 10;
  max-width: 48rem;
}

.res-hero-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .res-hero-title {
    font-size: 3.75rem;
  }
}

.res-hero-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.res-hero-body {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 42rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .res-hero-body {
    font-size: 1.125rem;
  }
}

.res-services {
  background: #fff;
  padding: 5rem 1.5rem;
}

.res-services-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.res-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .res-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .res-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   CARD COMPONENTS
   -------------------------------------------------------------------------- */

/* Base card - shared foundation for all card types */
.card {
  background: #fff;
  border: 1px solid var(--gray-200);
}

/* Card interactive variant - for clickable cards with hover effects */
.card--interactive {
  display: block;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  height: 100%;
  position: relative;
}

.card--interactive:hover {
  border-color: var(--brand-red);
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.card--interactive a.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Card size variants */
.card--padding-md { padding: 1.5rem; }
.card--padding-lg { padding: 2rem; }

/* Card rule - red accent line */
.card-rule {
  width: 1.5rem;
  height: 2px;
  background: var(--brand-red);
  margin-bottom: 1rem;
}

.card--rule-lg .card-rule {
  width: 2rem;
  margin-bottom: 1.25rem;
}

/* Card title - interactive variant changes color on hover */
.card-title {
  color: var(--brand-slate);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  transition: color 0.15s;
}

.card--interactive:hover .card-title {
  color: var(--brand-red);
}

.card-desc {
  color: var(--gray-500);
  font-size: 0.875rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.card-cta {
  color: var(--brand-red);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Legacy card classes - DEPRECATED
   These are maintained for backward compatibility but should not be used
   in new code. Use .card classes instead. */
.res-service-card,
.res-service-card:hover,
.res-service-rule,
.res-service-title,
.res-service-card:hover .res-service-title,
.res-service-desc,
.res-service-cta,
.com-service-card,
.com-service-card:hover,
.com-service-rule,
.com-service-title,
.com-service-card:hover .com-service-title,
.com-service-desc,
.com-service-cta {
  all: inherit;
}

/* Legacy service-card - extends .card.card--interactive.card--padding-lg.card--rule-lg */
.service-card {
  display: block;
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 2rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none;
  height: 100%;
  position: relative;
  cursor: pointer;
}

.service-card:hover {
  border-color: var(--brand-red);
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

.service-card a.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.service-card-rule {
  width: 2rem;
  height: 2px;
  background: var(--brand-red);
  margin-bottom: 1.25rem;
}

.service-card-title {
  color: var(--brand-slate);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  transition: color 0.15s;
}

.service-card:hover .service-card-title {
  color: var(--brand-red);
}

.service-card-desc {
  color: var(--gray-500);
  font-size: 0.875rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.service-card-cta {
  color: var(--brand-red);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Legacy inspection-card - extends .card.card--padding-md */
.inspection-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  padding: 1.5rem;
}

.inspection-card-rule {
  width: 1.5rem;
  height: 2px;
  background: var(--brand-red);
  margin-bottom: 1rem;
}

.inspection-card p {
  color: var(--brand-slate);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
}

.res-why {
  background: var(--brand-slate-blue);
  padding: 5rem 1.5rem;
}

.res-why-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 768px) {
  .res-why-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

.res-why-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.875rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .res-why-title {
    font-size: 2.25rem;
  }
}

.res-why-body {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.res-why-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.res-why-list li {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  line-height: 1.75;
}

.res-why-image {
  aspect-ratio: 4 / 3;
  border-radius: 0.375rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.res-testimonials {
  background: var(--brand-cream);
  padding: 5rem 1.5rem;
}

.res-testimonials-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.res-testimonials-box {
  border: 1px solid var(--gray-300);
  padding: 3rem;
  text-align: center;
}

.res-testimonials-placeholder {
  color: var(--gray-400);
  font-size: 0.875rem;
  font-style: italic;
  margin-top: 1rem;
}

.res-care {
  background: var(--brand-slate);
  padding: 5rem 1.5rem;
}

.res-care-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 768px) {
  .res-care-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

.res-care-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.875rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .res-care-title {
    font-size: 2.25rem;
  }
}

.res-care-body {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.res-care-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: center;
}

.res-care-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.res-care-step-num {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 2px solid var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  color: var(--brand-red);
  font-weight: 700;
  font-size: 1.125rem;
}

.res-care-step-label {
  color: rgba(255,255,255,0.6);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.care-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--brand-slate);
  line-height: 1.4;
}

.care-feature::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.care-icon-calendar::before  { background-image: var(--icon-care-calendar); }
.care-icon-droplet::before   { background-image: var(--icon-care-droplet); }
.care-icon-search::before    { background-image: var(--icon-care-search); }
.care-icon-tool::before      { background-image: var(--icon-care-tool); }
.care-icon-storm::before     { background-image: var(--icon-care-storm); }
.care-icon-camera::before    { background-image: var(--icon-care-camera); }
.care-icon-clipboard::before { background-image: var(--icon-care-clipboard); }

.res-cta {
  position: relative;
  padding: 6rem 1.5rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.res-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 47, 54, 0.8);
}

.res-cta-content {
  position: relative;
  z-index: 10;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.res-cta-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.875rem;
  font-weight: 900;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .res-cta-title {
    font-size: 3rem;
  }
}

/* --------------------------------------------------------------------------
   5.3 RESIDENTIAL SUB-PAGES
   -------------------------------------------------------------------------- */

.rp-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  padding: 8rem 1.5rem 4rem;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .rp-hero {
    padding: 8rem 3rem 4rem;
  }
}

.rp-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rp-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 47, 54, 0.7);
}

.rp-hero-content {
  position: relative;
  z-index: 10;
  max-width: 48rem;
}

.rp-hero-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .rp-hero-title {
    font-size: 3.75rem;
  }
}

.rp-hero-subtitle {
  color: var(--brand-red);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.rp-hero-body {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 42rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .rp-hero-body {
    font-size: 1.125rem;
  }
}

.rp-hero-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

.rp-hero-buttons a {
  width: 100%;
}

@media (min-width: 640px) {
  .rp-hero-buttons {
    flex-direction: row;
    align-items: center;
  }
  .rp-hero-buttons a {
    width: auto;
  }
}

/* Hero with form card */
.rp-hero-form-wrapper {
  position: relative;
}

.rp-hero-form-card {
  background: #ffffff;
  padding: 2.5rem 1.5rem;
}

.rp-hero-form-card__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--brand-slate);
  line-height: 1.3;
  margin-bottom: 1.5rem;
}

@media (min-width: 1024px) {
  .rp-hero-form-wrapper .rp-hero-form-card {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 42%;
    overflow-y: auto;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    padding: 3rem 2.5rem;
  }

  .rp-hero-form-wrapper .rp-hero-form-card__title {
    font-size: 1.625rem;
  }

  .rp-hero-form-wrapper .rp-hero-form-card iframe {
    min-height: 0;
  }

  .rp-hero-form-wrapper .rp-hero--has-form .rp-hero-content {
    max-width: 56%;
  }
}

/* Sub-page sections */
.sub-section {
  padding: 5rem 1.5rem;
}

.sub-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.sub-inner-centered {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.sub-inner-2col {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 768px) {
  .sub-inner-2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sub-body {
  color: var(--gray-600);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.sub-body:last-child {
  margin-bottom: 0;
}

.sub-body-sm {
  color: var(--gray-600);
  font-size: 0.875rem;
  line-height: 1.75;
}

.sub-body-light {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

.sub-body-muted {
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
  line-height: 1.75;
}

.sub-italic {
  font-style: italic;
}

.sub-section a:not(.wp-block-button__link):not(.card-link):not(.btn-primary):not(.btn-outline-white):not(.btn-outline-dark) {
  color: var(--brand-red);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.sub-section a:not(.wp-block-button__link):not(.card-link):not(.btn-primary):not(.btn-outline-white):not(.btn-outline-dark):hover {
  color: var(--brand-red-hover);
}

.sub-slate-bold {
  color: var(--brand-slate);
  font-weight: 600;
}

.sub-label-sm {
  color: var(--brand-slate);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.home-trust-stats {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.75rem;
}

.home-trust-stat {
  padding: 0.875rem 0;
  border-bottom: 1px solid rgba(42, 47, 54, 0.12);
}

.home-trust-stat:first-child {
  border-top: 1px solid rgba(42, 47, 54, 0.12);
}

.home-trust-stat-number {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--brand-red);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.home-trust-stat-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-slate);
}

@media (max-width: 767px) {
  .home-trust-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .home-trust-stat {
    flex: 1 1 140px;
    border-top: 1px solid rgba(42, 47, 54, 0.12);
    padding: 0.75rem 0;
  }
}

.resi-service-nav {
  border-top: 3px solid var(--brand-slate);
  padding: 1.5rem 0;
}

.resi-service-nav-label {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-gray);
  margin: 0 0 0.75rem;
}

.resi-service-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--brand-slate);
  text-decoration: none;
  padding: 0.8125rem 0;
  border-bottom: 1px solid rgba(42, 47, 54, 0.1);
  transition: color 0.15s;
}

.resi-service-nav-link:last-child {
  border-bottom: none;
}

.resi-service-nav-link::after {
  content: '\2192';
  color: var(--brand-red);
  flex-shrink: 0;
}

.resi-service-nav-link:hover {
  color: var(--brand-red);
}

.resi-col-heading {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-slate);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--brand-red);
  margin-bottom: 1rem;
}

.sub-img-4-3 {
  aspect-ratio: 4 / 3;
  border-radius: 0.375rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.sub-col-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sub-col-end {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.sub-order-1 { order: 1; }
.sub-order-2 { order: 2; }

@media (min-width: 768px) {
  .sub-order-1 { order: 1; }
  .sub-order-2 { order: 2; }
}

/* Lists */
/* Lists - combined selector to reset WordPress block list padding */
.dot-list.wp-block-list,
.dot-list-white.wp-block-list,
.dash-list.wp-block-list,
.dash-list-white.wp-block-list {
  padding-inline-start: 0;
  padding-inline-end: 0;
}

.dot-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.dot-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 0;
  margin-bottom: 0.75rem;
  color: var(--gray-600);
  font-size: 0.875rem;
  line-height: 1.75;
}

.dot-list li::before {
  content: '';
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: calc((1.75em - 0.5rem) / 2);
  border-radius: 50%;
  background: var(--brand-red);
}


.dot-list-white {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dot-list-white li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-left: 0;
  margin-bottom: 0.75rem;
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  line-height: 1.75;
}

.dot-list-white li::before {
  content: '';
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: calc((1.75em - 0.5rem) / 2);
  border-radius: 50%;
  background: var(--brand-red);
}

.wp-block-details {
  border-top: 1px solid #e5e7eb;
}

.wp-block-details + .wp-block-details {
  border-top: none;
}

.wp-block-details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-slate);
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid #e5e7eb;
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--brand-red);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.2s ease;
}

.wp-block-details[open] summary::after {
  content: '−';
}

.wp-block-details[open] summary {
  border-bottom-color: transparent;
}

.wp-block-details > *:not(summary) {
  padding: 0.75rem 0 1.25rem;
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.75;
}

.dash-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.dash-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
  color: var(--gray-600);
  font-size: 0.875rem;
  line-height: 1.75;
}

.dash-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 0.75rem;
  height: 2px;
  background: var(--brand-red);
}

.dash-list-white {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dash-list-white li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.75rem;
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  line-height: 1.75;
}

.dash-list-white li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 0.75rem;
  height: 2px;
  background: var(--brand-red);
}

/* Process grid */
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 2rem;
  column-gap: 3rem;
}

@media (min-width: 768px) {
  .process-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.process-step {
  display: flex;
  gap: 1rem;
}

.process-num {
  font-family: var(--font-serif);
  color: var(--brand-red);
  font-size: 1.875rem;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
}

.process-text {
  color: var(--brand-slate);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75;
  padding-top: 0.25rem;
}

/* Role box */
.role-box-section {
  padding: 4rem 1.5rem;
}

.role-box {
  background: var(--brand-slate-blue);
  padding: 2.5rem;
  border-radius: 0.5rem;
}

@media (min-width: 768px) {
  .role-box {
    padding: 3rem;
  }
}

.role-box-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .role-box-title {
    font-size: 1.875rem;
  }
}

.role-box-items {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .role-box-items {
    flex-direction: row;
    gap: 3rem;
  }
}

.role-box-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
}

.role-icon {
  flex-shrink: 0;
  color: var(--brand-red);
  width: 1.75rem;
  height: 1.75rem;
}

.role-icon svg {
  width: 100%;
  height: 100%;
}

.role-box-item p {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  padding-top: 0.125rem;
}

.materials-quote {
  font-family: var(--font-serif);
  color: var(--brand-slate);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.6;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .materials-quote {
    font-size: 1.125rem;
  }
}

/* Dark card */
.dark-card {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  background-size: cover;
  background-position: center;
  border-radius: 0.375rem;
}

@media (min-width: 768px) {
  .dark-card {
    padding: 2.5rem;
  }
}

.dark-card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 47, 54, 0.75);
}

.dark-card-content {
  position: relative;
  z-index: 10;
}

.dark-card-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .dark-card-title {
    font-size: 1.875rem;
  }
}

.dark-card-body {
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

/* Manufacturers */
.manufacturers {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.manufacturer-logos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 48rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .manufacturer-logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}

.manufacturer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.manufacturer-logo img {
  width: 200px;
  height: 120px;
  object-fit: contain;
}

.manufacturer-logo-name {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-slate);
  text-align: center;
}

.our-role-simple {
  border-top: 1px solid var(--gray-300);
  padding-top: 2.5rem;
}

.our-role-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

@media (min-width: 640px) {
  .our-role-items {
    flex-direction: row;
    gap: 1.5rem;
  }
}

.proactive-box {
  background: var(--brand-slate);
  padding: 2.5rem;
  text-align: center;
  border-radius: 0.375rem;
}

.proactive-box-eyebrow {
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.proactive-box-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.proactive-box-body {
  color: rgba(255,255,255,0.6);
  font-size: 0.875rem;
}

/* Inspection cards */
.inspection-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .inspection-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .inspection-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* CTA sections */
.sub-cta {
  position: relative;
  padding: 5rem 1.5rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.sub-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 47, 54, 0.85);
}

.sub-cta-content {
  position: relative;
  z-index: 10;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.sub-cta-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.875rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .sub-cta-title {
    font-size: 2.25rem;
  }
}

.sub-cta-body {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.sub-btn-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.sub-btn-group a {
  width: 100%;
}

@media (min-width: 640px) {
  .sub-btn-group {
    flex-direction: row;
    align-items: center;
  }
  .sub-btn-group a {
    width: auto;
  }
}

.sub-cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  justify-content: center;
}

.sub-cta-buttons a {
  width: 100%;
}

@media (min-width: 640px) {
  .sub-cta-buttons {
    flex-direction: row;
    align-items: center;
  }
  .sub-cta-buttons a {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   5.4 COMMERCIAL PAGE
   -------------------------------------------------------------------------- */

.com-hero {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: flex-end;
  padding: 8rem 1.5rem 4rem;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .com-hero {
    padding: 8rem 3rem 4rem;
  }
}

.com-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 47, 54, 0.72);
}

.com-hero-content {
  position: relative;
  z-index: 10;
  max-width: 52rem;
}

.com-hero-label {
  color: var(--brand-red);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.com-hero-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .com-hero-title {
    font-size: 3.75rem;
  }
}

.com-hero-body {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 42rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
  .com-hero-body {
    font-size: 1.125rem;
  }
}

.com-services {
  background: #fff;
  padding: 5rem 1.5rem;
}

.com-services-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.com-services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .com-services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.com-why {
  background: var(--brand-slate-blue);
  padding: 5rem 1.5rem;
}

.com-why-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: center;
}

@media (min-width: 768px) {
  .com-why-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

.com-why-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.875rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .com-why-title {
    font-size: 2.25rem;
  }
}

.com-why-body {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.com-why-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.com-why-list li {
  display: flex;
  align-items: center;
  color: rgba(255,255,255,0.8);
  font-size: 0.875rem;
  line-height: 1.75;
}

.com-why-image {
  aspect-ratio: 4 / 3;
  border-radius: 0.375rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.com-approach {
  background: var(--brand-cream);
  padding: 5rem 1.5rem;
}

.com-approach-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.com-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .com-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .com-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.com-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.com-step-num {
  font-family: var(--font-serif);
  color: var(--brand-red);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1;
}

.com-step-title {
  color: var(--brand-slate);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.com-step-body {
  color: var(--gray-500);
  font-size: 0.875rem;
  line-height: 1.75;
}

.com-testimonial {
  background: #fff;
  padding: 5rem 1.5rem;
  border-top: 1px solid var(--gray-200);
}

.com-testimonial-inner {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.com-testimonial-mark {
  color: var(--brand-red);
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 900;
  line-height: 0.5;
  margin-bottom: 1.5rem;
}

.com-testimonial-quote {
  color: var(--brand-slate);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .com-testimonial-quote {
    font-size: 1.25rem;
  }
}

.com-testimonial-attr {
  color: var(--gray-500);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.com-cta {
  position: relative;
  padding: 6rem 1.5rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.com-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 47, 54, 0.85);
}

.com-cta-content {
  position: relative;
  z-index: 10;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.com-cta-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.875rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .com-cta-title {
    font-size: 3rem;
  }
}

.com-cta-body {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 2.5rem;
}

.com-cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  justify-content: center;
}

.com-cta-buttons a {
  width: 100%;
}

@media (min-width: 640px) {
  .com-cta-buttons {
    flex-direction: row;
    align-items: center;
  }
  .com-cta-buttons a {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   5.5 ABOUT PAGE
   -------------------------------------------------------------------------- */

.about-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  padding: 8rem 1.5rem 4rem;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

@media (min-width: 768px) {
  .about-hero {
    padding: 8rem 3rem 4rem;
  }
}

.about-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 47, 54, 0.7);
}

.about-hero-content {
  position: relative;
  z-index: 10;
  max-width: 48rem;
}

.about-hero-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .about-hero-title {
    font-size: 3.75rem;
  }
}

.about-hero-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.about-hero-body {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 42rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .about-hero-body {
    font-size: 1.125rem;
  }
}

.about-story {
  background: #fff;
  padding: 5rem 1.5rem;
}

.about-story-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  align-items: start;
}

@media (min-width: 768px) {
  .about-story-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

.about-story-body {
  color: var(--gray-600);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.about-story-body:last-child {
  margin-bottom: 0;
}

.about-founder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
}

.about-founder-placeholder {
  background: var(--brand-cream);
  aspect-ratio: 4 / 3;
}

.about-promise {
  background: var(--brand-slate-blue);
  padding: 5rem 1.5rem;
}

.about-promise-inner {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 768px) {
  .about-promise-inner {
    grid-template-columns: 2fr 1fr;
  }
}

.about-promise-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.875rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .about-promise-title {
    font-size: 2.25rem;
  }
}

.about-promise-body {
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.about-promise-box {
  border: 1px solid rgba(255,255,255,0.2);
  padding: 2.5rem;
}

.about-promise-box-heading {
  color: #fff;
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.about-promise-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-promise-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.about-promise-dash {
  color: var(--brand-red);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  font-family: var(--font-sans);
}

.about-promise-item p {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  font-weight: 500;
}

.about-promise-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.about-values {
  background: #fff;
  padding: 5rem 1.5rem;
}

.about-values-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.about-values-intro {
  color: var(--gray-600);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 48rem;
  margin-bottom: 3rem;
}

.about-values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .about-values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.about-value-card {
  border: 1px solid var(--gray-200);
  padding: 2rem;
}

.about-value-icon {
  color: var(--brand-red);
  margin-bottom: 1.25rem;
}

.about-value-icon svg {
  width: 2rem;
  height: 2rem;
}

.about-value-title {
  color: var(--brand-slate);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.about-value-desc {
  color: var(--gray-500);
  font-size: 0.875rem;
  line-height: 1.75;
}

.about-values-cta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
}

@media (min-width: 640px) {
  .about-values-cta {
    flex-direction: row;
  }
}

.about-team {
  background: var(--brand-cream);
  padding: 5rem 1.5rem;
}

.about-team-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.about-team-intro {
  color: var(--gray-600);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 48rem;
  margin-bottom: 3rem;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.team-card {
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-sans);
}

.team-card-photo-wrap {
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.team-card-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  filter: grayscale(100%);
  transition: filter 0.3s;
}

.team-card:hover .team-card-photo {
  filter: grayscale(0%);
}

.team-card-name {
  color: var(--brand-slate);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
}

.team-card-title {
  color: var(--brand-gray);
  font-size: 0.75rem;
  margin-top: 0.125rem;
}

.team-card-cta {
  color: var(--brand-red);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.team-card:hover .team-card-cta {
  opacity: 1;
}

.team-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 768px) {
  .team-modal {
    align-items: center;
    padding: 1.5rem;
  }
}

.team-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(42, 47, 54, 0.8);
  backdrop-filter: blur(4px);
}

.team-modal-content {
  position: relative;
  z-index: 10;
  background: #fff;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 768px) {
  .team-modal-content {
    max-width: 48rem;
    max-height: 85vh;
    flex-direction: row;
  }
}

.team-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.75rem;
  z-index: 20;
  color: var(--brand-gray);
  background: rgba(255,255,255,0.8);
  border-radius: 0.25rem;
  padding: 0.25rem;
  transition: color 0.15s;
}

.team-modal-close:hover {
  color: var(--brand-slate);
}

.team-modal-close svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.team-modal-photo-wrap {
  height: 16rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .team-modal-photo-wrap {
    height: auto;
    width: 18rem;
  }
}

.team-modal-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

@media (min-width: 768px) {
  .team-modal-photo-wrap img {
    object-position: top;
  }
}

.team-modal-bio {
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

@media (min-width: 768px) {
  .team-modal-bio {
    padding: 2rem;
  }
}

.team-modal-member-title {
  color: var(--brand-red);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.team-modal-member-name {
  font-family: var(--font-serif);
  color: var(--brand-slate);
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 1.25rem;
}

.team-modal-bio-content p {
  color: var(--gray-600);
  font-size: 0.875rem;
  line-height: 1.75;
  margin-bottom: 1rem;
}

.team-modal-bio-content p:last-child {
  margin-bottom: 0;
}

.about-testimonials {
  background: #fff;
  padding: 5rem 1.5rem;
}

.about-testimonials-inner {
  max-width: 64rem;
  margin: 0 auto;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial-card {
  background: var(--brand-cream);
  border: 1px solid var(--gray-200);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 1.25rem;
}

.testimonial-stars svg {
  width: 1rem;
  height: 1rem;
  color: var(--brand-red);
}

.testimonial-quote {
  color: var(--brand-slate);
  font-size: 0.875rem;
  line-height: 1.75;
  flex: 1;
  margin-bottom: 1.5rem;
}

.testimonial-name {
  color: var(--brand-gray);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: right;
}

.about-cta {
  position: relative;
  padding: 5rem 1.5rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.about-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 47, 54, 0.85);
}

.about-cta-content {
  position: relative;
  z-index: 10;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.about-cta-title {
  font-family: var(--font-serif);
  color: #fff;
  font-size: 1.875rem;
  font-weight: 900;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .about-cta-title {
    font-size: 2.25rem;
  }
}

.about-cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  justify-content: center;
}

.about-cta-buttons a {
  width: 100%;
}

@media (min-width: 640px) {
  .about-cta-buttons {
    flex-direction: row;
    align-items: center;
  }
  .about-cta-buttons a {
    width: auto;
  }
}


/* ==========================================================================
   6. WORDPRESS OVERRIDES
   ========================================================================== */

/*
Source - https://stackoverflow.com/a/74963424
Posted by Piiit
Retrieved 2026-03-29, License - CC BY-SA 4.0
*/

/* Mobile nav breakpoint: switch from 600px to 1200px (full menu fits on one line at >=1200px) */
@media (min-width: 1200px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }

  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
    width: 100%;
    position: relative;
    z-index: auto;
    background-color: inherit;
  }
}

@media (min-width: 600px) and (max-width: 1199.98px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* Fix: wp:cover inside vertical flex card groups doesn't stretch to full width by default */
.wp-block-group.is-layout-flex .wp-block-cover {
  width: 100%;
}

/* Mobile header: match prototype px-6 (1.5rem) horizontal padding, strip hamburger default padding */
@media (max-width: 1199.98px) {
  .site-header .header-main {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .site-header .wp-block-navigation__responsive-container-open {
    padding: 0 !important;
    margin: 0 !important;
    color: var(--brand-slate) !important;
    background: none !important;
    border: none !important;
  }
}

/* WP Button block hover styles - removed to allow theme.json to handle button styles
   Previously included global overrides that conflicted with button variations */

/* Override WP core :where(.wp-block-group.has-background) padding on header */
.site-header :where(.wp-block-group.has-background) {
  padding: 0;
}

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 2147483647;
}

/* ==========================================================================
   BUTTON VARIATIONS
   ========================================================================== */

/* Button hover states - base styles defined in theme.json */
/* Using !important to override :where() selector specificity from WordPress core */

.wp-block-button.is-style-primary .wp-block-button__link {
  padding: 1rem 2rem;
}

.wp-block-button.is-style-alternate .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  padding: calc(1rem - 2px) calc(2rem - 2px);
}

.wp-block-button.is-style-primary .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--brand-red-hover) !important;
  transition: background-color 0.15s ease;
}

.wp-block-button.is-style-alternate .wp-block-button__link:hover {
  background-color: transparent !important;
  color: var(--wp--preset--color--white) !important;
  border-color: var(--wp--preset--color--white) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--white) !important;
  color: var(--wp--preset--color--brand-slate) !important;
  border-color: var(--wp--preset--color--white) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button.is-style-outline-dark .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--brand-slate) !important;
  border: 2px solid var(--wp--preset--color--brand-slate);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button.is-style-outline-dark .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--brand-slate) !important;
  color: var(--wp--preset--color--white) !important;
  border-color: var(--wp--preset--color--brand-slate) !important;
}

.systems-cards .wp-block-column {
  display: flex;
  flex-direction: column;
}

.systems-cards .wp-block-column > .wp-block-group {
  flex: 1;
}

.wp-block-list {
  padding-inline-start: 1.5em;
  list-style-position: outside;
}

.wp-block-list li::marker {
  color: currentColor;
  font-size: 0.75em;
}

/* --------------------------------------------------------------------------
   6.1 BLOG POST PROSE
   Restores readable typography for single post content, compensating for the
   global resets (no margins, no list style, links inherit color) that keep
   custom page layouts clean but make long-form post content unreadable.
   Scoped to .single-post .entry-content so it never leaks into the header,
   footer, hero cover, or "More Posts" section.
   -------------------------------------------------------------------------- */

.single-post .entry-content {
  --wp--style--block-gap: 1.5rem;
}

.single-post .entry-content a {
  color: var(--brand-red);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.single-post .entry-content a:hover {
  color: var(--brand-red-hover);
}

.single-post .entry-content h1 {
  margin-bottom: 1.5rem;
}

.single-post .entry-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

.single-post .entry-content h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.single-post .entry-content h4 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.single-post .entry-content h5 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.single-post .entry-content h6 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.single-post .entry-content p {
  margin-bottom: 1.25rem;
  line-height: 1.75;
}

.single-post .entry-content ul {
  list-style: disc;
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.single-post .entry-content ol {
  list-style: decimal;
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.single-post .entry-content li {
  margin-bottom: 0.5rem;
  line-height: 1.75;
}

.single-post .entry-content blockquote {
  border-left: 4px solid var(--brand-red);
  margin: 1.5rem 0;
  padding: 1rem 1.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gray-600);
}

.single-post .entry-content blockquote p {
  margin-bottom: 0;
}

.single-post .entry-content img {
  border-radius: 0.375rem;
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   5.6 Gallery
   ========================================================================== */

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.gallery-filter-btn {
  background: #ffffff;
  border: 1px solid var(--gray-300);
  color: var(--brand-slate);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.5rem 1.25rem;
  border-radius: 0.375rem;
  text-transform: uppercase;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.gallery-filter-btn:hover {
  background: var(--brand-cream);
  border-color: var(--brand-slate);
}

.gallery-filter-btn.active {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #ffffff;
}

.gallery-filter-btn.active:hover {
  background: var(--brand-red-hover);
  border-color: var(--brand-red-hover);
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery-item {
  border-radius: 0.375rem;
  overflow: hidden;
  position: relative;
}

.gallery-item img {
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease;
  width: 100%;
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-item-overlay {
  background: rgba(42, 47, 54, 0.8);
  bottom: 0;
  left: 0;
  opacity: 0;
  padding: 0.75rem 1rem;
  position: absolute;
  right: 0;
  transition: opacity 0.2s ease;
}

.gallery-item:hover .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-overlay span {
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.latest-post {
    width: 100%;
}

/* ==========================================================================
   5.9 Blog Posts Page (home.html) - Query Pagination
   ========================================================================== */

/* Previous/Next button spacing - margin instead of padding */
.wp-block-query-pagination .wp-block-query-pagination-previous {
    margin-right: 1rem !important;
}

.wp-block-query-pagination .wp-block-query-pagination-next {
    margin-left: 1rem !important;
}

/* Pagination numbers - light gray like header nav links */
.wp-block-query-pagination .page-numbers {
    color: var(--gray-500);
    transition: color 0.15s ease;
}

/* Pagination numbers hover - red */
.wp-block-query-pagination .page-numbers:hover {
    color: var(--brand-red);
}

/* Current page - brand slate with underline */
.wp-block-query-pagination .page-numbers.current {
    color: var(--brand-slate);
    font-weight: 600;
    text-decoration: underline;
}

/* Previous/Next links - light gray (targets both the element and links) */
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next,
.wp-block-query-pagination .wp-block-query-pagination-previous a,
.wp-block-query-pagination .wp-block-query-pagination-next a {
    color: var(--gray-500) !important;
    transition: color 0.15s ease;
}

/* Previous/Next links hover - red */
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination .wp-block-query-pagination-next a:hover {
    color: var(--brand-red) !important;
}

/* =============================================================================
   Estimate Drawer
   ============================================================================= */

.est-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    font-family: var(--font-sans);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.est-drawer-bar {
    background: var(--brand-red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.est-drawer-bar:hover {
    background: var(--brand-red-hover);
}

.est-drawer-bar-label {
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.est-drawer-chevron {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: white;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.est-drawer.is-open .est-drawer-chevron {
    transform: rotate(0deg);
}

.est-drawer-panel {
    background: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    border-top: 2px solid var(--brand-red);
}

.est-drawer.is-open .est-drawer-panel {
    max-height: var(--est-panel-height, calc(100svh - 162px));
    overflow: hidden;
}

.est-drawer-panel-inner {
    padding: 1rem 1.5rem;
    max-width: 48rem;
    margin: 0 auto;
    height: var(--est-panel-height, calc(100svh - 162px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.est-drawer-panel-inner iframe {
    flex: 1;
    min-height: 0;
    width: calc(100% - 8px);
    height: 0;
    border: none;
    display: block;
}

@media (min-width: 1024px) {
    .est-drawer.is-open .est-drawer-panel {
        max-height: 65vh;
    }

    .est-drawer-panel-inner {
        height: 65vh;
    }
}

.est-drawer-panel-inner h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--brand-slate);
    margin: 0 0 0.375rem;
}

.est-drawer-panel-inner p {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 1rem;
    line-height: 1.6;
}

.wp-block-rank-math-toc-block {
    display: none;
}

#ez-toc-container,
.ez-toc-container,
.ez-toc-v2_0_84,
nav.ez-toc-container-direction {
    display: none !important;
}

/* =============================================================================
   Project Proof block (src/project-proof)
   First-hand before/after proof for service-area pages.
   ============================================================================= */

.project-proof-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.5rem;
}

@media (min-width: 768px) {
    .project-proof-images {
        grid-template-columns: 1fr 1fr;
    }
}

.project-proof-figure {
    position: relative;
    margin: 0;
    border-radius: 0.375rem;
    overflow: hidden;
}

.project-proof-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

.project-proof-tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--brand-slate);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
}

.project-proof-meta {
    margin-top: 1.25rem;
    font-family: var(--font-sans);
    font-weight: 700;
    color: var(--brand-slate);
}

.project-proof-narrative {
    margin-top: 0.5rem;
    font-family: var(--font-sans);
    color: var(--brand-slate);
    line-height: 1.7;
}

/* =============================================================================
   Cluster page feature images (core image, is-style-rounded)
   Standalone rounded photos on service-area city pages render at full intrinsic
   size — cap their width and center them.
   ============================================================================= */

.entry-content .wp-block-image.is-style-rounded {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

.entry-content .wp-block-image.is-style-rounded img {
    width: 100%;
    height: auto;
}

/* =============================================================================
   Service Areas hub (service-areas page + service-area-cards block)
   ============================================================================= */

.sa-hub-header {
    padding-bottom: 0;
}

.sa-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.5rem;
}

.sa-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.sa-card a.card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sa-card:hover {
    border-color: var(--brand-red);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

.sa-card-media {
    margin: 0;
}

.sa-card-media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.sa-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.sa-card-title {
    margin: 0 0 0.5rem;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--brand-slate);
    transition: color 0.15s;
}

.sa-card:hover .sa-card-title {
    color: var(--brand-red);
}

.sa-card-excerpt {
    color: var(--gray-500);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.sa-card-excerpt p {
    margin: 0 0 1rem;
}

.sa-card-cta {
    margin: 0;
    color: var(--brand-red);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Nashville anchor banner (home-city feature above the city grid) */
.sa-nashville-feature {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--brand-red);
    border-radius: 0.5rem;
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
}

.sa-nashville-title {
    margin: 0.5rem 0 0.75rem;
    color: var(--brand-slate);
    font-family: var(--font-serif);
    font-weight: 900;
    font-size: 1.75rem;
    line-height: 1.15;
}

.sa-nashville-body {
    margin: 0 0 1.5rem;
    max-width: 40rem;
    color: var(--gray-600);
    line-height: 1.7;
}

@media (min-width: 768px) {
    .sa-nashville-feature {
        padding: 2.5rem 3rem;
    }
}