/* CSS Variables — JR Legge Carpentry palette */
:root {
  --top-bar-height: 0px;
  /* Palette tokens */
  --color-primary: #00B8F0;
  --color-secondary: #1A1A2E;
  --color-accent: #0A2D4E;
  --color-dark-base: #0A2D4E;
  --color-light-base: #F8FAFC;
  --color-highlight: #E0F4FB;
  --text-on-light: #0A2D4E;
  --text-on-dark: #ffffff;
  --muted-on-dark: rgba(255, 255, 255, 0.75);
  --btn-primary-bg: #00B8F0;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #0099CC;
  /* Hero accent (chevron color) — pages can override */
  --hero-accent: #00B8F0;
  --hero-accent-rgb: 0,184,240;
  /* Hero CTA Variables */
  --btn-hero-bg: var(--color-primary);
  --btn-hero-hover: #0099CC;
  --btn-hero-text: #ffffff;
  --btn-secondary-bg: var(--color-light-base);
  --btn-secondary-text: var(--color-primary);
  --card-bg-dark: var(--color-dark-base);
  --card-bg-mid: var(--color-primary);
  --card-bg-accent: #5BCFFA;
  --card-bg-light: var(--color-secondary);
  --card-icon-bg: rgba(255, 255, 255, 0.08);
  --card-icon-line: #ffffff;
  /* Template variable mappings */
  --ink-dark: var(--text-on-light);
  --graphite: var(--color-dark-base);
  --aluminium: var(--color-light-base);
  --mist: var(--color-light-base);
  --accent-red-500: #00B8F0;
  --accent-red-600: #00B8F0;
  --accent-red-700: #0099CC;
  --blush-tint: #E0F4FB;
  --white: #ffffff;
  /* Old Site Colors */
  --old-site-bg-dark: var(--color-dark-base);
  --old-site-accent-cyan: var(--color-primary);
  --old-site-text-light: var(--color-light-base);
  /* Spacing scale */
  --space-0: 0px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  /* Global spacing */
  --inter-section-gap: clamp(24px, 3.5vw, 40px);
  --section-gap: var(--space-8);
  --section-pad-y: clamp(40px, 8vw, 120px);
  --section-pad-x: clamp(20px, 5vw, 50px);
  --content-gap: var(--space-4);
  --content-gap-tight: var(--space-2);
  /* Hero Spacing Variables - Responsive for desktop */
  --hero-spacing-unit: calc((100vh - 160px) / 12);
  --hero-headline-to-subtitle: calc(var(--hero-spacing-unit) * 0.8);
  --hero-subtitle-to-logo: calc(var(--hero-spacing-unit) * 0.6);
  --hero-logo-to-button: calc(var(--hero-spacing-unit) * 0.6);
  --hero-button-bottom-spacing: 0px;
  /* Hero Vertical Position */
  --hero-vertical-offset: 0px;
  /* Mobile Section Spacing */
  --mobile-section-spacing: 40px;
  --mobile-fallback-btn-margin-top: 74px;
  --mobile-fallback-btn-margin-bottom: 5px;
  --booking-visual-mobile-top-space: 40px;
  /* Reviews Section Symmetrical Spacing */
  --reviews-stack-gap: var(--content-gap);
  --reviews-top-spacing: var(--section-pad-y);
  --reviews-bottom-spacing: 10px;
  /* Adjustable spacing */
  --why-choose-desktop-image-gap-top: 40px;
  --why-choose-desktop-image-gap-bottom: 0px;
  --reviews-widget-bottom-gap: 35px;
  --rating-summary-bottom-gap: 10px;
  --reviews-widget-bottom-gap-mobile: 5px;
  --rating-summary-bottom-gap-mobile: 5px;
  --services-stack-gap: var(--content-gap);
  --services-title-gap: calc(var(--services-stack-gap) + var(--space-1));
  --services-bottom-gap: calc(var(--section-gap) + var(--space-1));
  --faq-stack-gap: var(--content-gap);
  --faq-title-gap: var(--section-gap);
  --faq-item-gap: var(--space-3);
  --why-choose-text-gap: 14px;
}

/* Reset - EXACT from both files */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', 'Inter', sans-serif;
  color: var(--ink-dark);
  line-height: 1.6;
  overflow-x: hidden;
  background-color: var(--white);
  padding-top: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) var(--old-site-bg-dark);
}

#main-content {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-bottom: 0;
}

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-track {
  background: var(--old-site-bg-dark);
}

body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.35);
  border-radius: 6px;
}

body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Skip navigation for accessibility */
.skip-nav {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 8px;
  background: var(--white);
  color: var(--ink-dark);
  text-decoration: none;
}

.skip-nav:focus {
  left: 6px;
  top: 7px;
}

/* Top Contact Bar - REMOVED (CTA moved to hero) */
.top-bar {
  display: none !important;
}

.top-bar a {
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.1px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: clamp(12px, 1.15vw, 14px);
  line-height: 1.2;
}

.top-bar .scroll-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: auto;
  max-width: 100%;
  clip-path: none;
  animation: none;
}

@keyframes reveal {

  0%,
  8% {
    clip-path: none;
  }

  50%,
  82% {
    clip-path: inset(0 0 0 0);
  }

  100% {
    clip-path: none;
  }
}

/* Header Styles - Desktop with scroll behavior */
.header {
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s ease;
  padding: 0;
}

.header.scrolled {
  background: rgba(11, 14, 31, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: none;
}

.header.hidden {
  transform: translateY(-110%);
}

.header-content {
  position: relative;
  height: auto;
  padding: 60px 0;
  display: flex;
  align-items: center;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.logo {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(calc(-50% + 12px));
  display: flex;
  align-items: center;
}

.logo a {
  display: flex;
  align-items: center;
  line-height: 0;
}

nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header-buttons {
  position: absolute;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.header.scrolled .header-content {
  padding: 12px 0;
  height: auto;
}

.logo img {
  display: block;
  height: 80px;
  width: auto;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  border-radius: 16px;
}

.header.scrolled .logo img {
  height: 42px;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 18px;
}

.nav-menu a {
  text-decoration: none;
  color: var(--white);
  font-weight: 500;
  position: relative;
  transition: color 0.3s ease;
}

.nav-menu a:visited {
  color: var(--white);
}

.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-red-600);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-menu a:hover {
  color: var(--accent-red-600);
}

.nav-menu a:hover::after {
  width: 100%;
}

/* Large desktop nav sizing */
@media (min-width: 1400px) {
  .nav-menu {
    gap: 24px;
  }

  .nav-menu a {
    font-size: 16px;
    letter-spacing: 0.1px;
  }
}

@media (min-width: 1680px) {
  .nav-menu {
    gap: 30px;
  }

  .nav-menu a {
    font-size: 17px;
  }
}

/* Services dropdown */
.nav-menu li {
  position: relative;
}

.services-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(30, 30, 30, 0.15);
  padding: 15px 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  margin-top: 10px;
  z-index: 1001;
}

.nav-menu li:hover .services-dropdown {
  opacity: 1;
  visibility: visible;
  margin-top: 5px;
}

.services-dropdown a {
  display: block;
  padding: 12px 20px;
  color: var(--ink-dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.services-dropdown a:visited {
  color: var(--ink-dark);
}

.services-dropdown a::after {
  display: none;
}

.services-dropdown a:hover {
  background: #2F7D32;
  color: var(--white);
  border-left-color: #245F27;
  padding-left: 25px;
}

.header-buttons {
  display: flex;
  gap: 8px;
}

.header-cta-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: none;
  color: var(--white);
  background: transparent;
  box-shadow: none;
  height: 40px;
  min-width: 130px;
}

.cta-pill.call {
  border-radius: 50%;
}

.cta-pill.whatsapp {
  border-radius: 50%;
}

.cta-pill img {
  height: 30px;
  width: auto;
  display: block;
}

/* Mobile: Hide all CTA buttons */
@media (max-width: 767px) {
  .header-cta-group {
    display: none;
  }
}

/* Medium screens: Show call and WhatsApp, hide quote button */
@media (min-width: 768px) and (max-width: 1099px) {
  .header-cta-group .btn-primary {
    display: none !important;
  }
}

.header-buttons .btn-primary {
  border-radius: 28px;
  padding: 10px 20px;
  font-size: 14px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent-red-500);
  color: var(--btn-primary-text);
  position: relative;
  overflow: hidden;
  border: 2px solid var(--accent-red-500);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(12, 15, 23, 0.08);
  transition: left 0.3s ease;
  z-index: -1;
}

.btn-primary:hover::before {
  left: 0;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--btn-primary-text) !important;
  border-color: var(--accent-red-600);
  background: var(--accent-red-600);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(12, 15, 23, 0.25);
  position: relative;
  z-index: 1;
}

.hero .btn-primary {
  background: var(--btn-hero-bg);
  color: var(--btn-hero-text);
  border-color: var(--btn-hero-bg);
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.hero .btn-primary::before {
  background: rgba(177, 13, 16, 0.12);
}

.hero .btn-primary:hover,
.hero .btn-primary:focus-visible {
  background: var(--btn-hero-hover);
  color: #ffffff !important;
  border-color: var(--btn-hero-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

/* Special rule for primary CTA button */
.header-buttons a[href="contact.html#contact"].btn-primary {
  background: var(--accent-red-500);
  color: var(--btn-primary-text);
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: 2px solid var(--accent-red-500);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.header-buttons a[href="contact.html#contact"].btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(12, 15, 23, 0.08);
  transition: left 0.3s ease;
  z-index: -1;
}

.header-buttons a[href="contact.html#contact"].btn-primary:hover::before {
  left: 0;
}

.header-buttons a[href="contact.html#contact"].btn-primary:hover {
  color: var(--btn-primary-text);
  border-color: var(--accent-red-600);
  background: var(--accent-red-600);
  box-shadow: 0 12px 28px rgba(12, 15, 23, 0.25);
}

/* Service Button - Bright Orange */
.btn-service {
  background: #FF6B35;
  /* Bright Sunset Orange */
  color: var(--white);
  border: 2px solid #FF6B35;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-service:hover,
.btn-service:focus-visible {
  background: #FF5211;
  /* Darker/Vivid Orange on hover */
  border-color: #FF5211;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 107, 53, 0.3);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.55);
  position: relative;
  overflow: hidden;
}

.btn-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--old-site-text-light);
  transition: left 0.3s ease;
  z-index: -1;
}

.btn-secondary:hover::before {
  left: 0;
}

.btn-secondary:hover {
  color: var(--old-site-bg-dark) !important;
  border-color: var(--old-site-text-light);
  position: relative;
  z-index: 1;
}

/* WhatsApp button - desktop only */
.btn-whatsapp {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(37, 211, 102, 0.6);
  position: relative;
  overflow: hidden;
}

.btn-whatsapp::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #25D366;
  transition: left 0.3s ease;
  z-index: -1;
}

.btn-whatsapp:hover::before {
  left: 0;
}

.btn-whatsapp:hover {
  color: var(--white) !important;
  border-color: #25D366;
  position: relative;
  z-index: 1;
}

/* Button improvements */
.header-buttons .btn {
  font-size: 14px;
  transition: font-size 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Tablet / mid-size: hide nav at 1100 and show hamburger while keeping CTA buttons visible */
@media (max-width: 1100px) {
  nav .nav-menu {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
    left: 20px !important;
    right: auto !important;
    top: 50%;
    transform: translateY(-50%) !important;
  }
}

.header.scrolled .header-buttons .btn {
  padding: 10px 18px;
  font-size: 13px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  z-index: 1001;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 28px;
  justify-content: center;
  align-items: center;
}

.mobile-menu-toggle span {
  width: 100%;
  height: 3px;
  background: var(--white);
  transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Menu - KFORD Style Overlay */
.mobile-menu {
  position: fixed;
  top: 90px;
  left: 0;
  width: 100%;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(30, 30, 30, 0.1);
  z-index: 1100;
  transform: translateY(-100%);
  overflow: hidden;
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.4s ease;
  clip-path: inset(0 0 0 0);
}

.mobile-menu.active {
  transform: translateY(0);
  visibility: visible;
}

.mobile-menu-item {
  border-bottom: 1px solid rgba(30, 30, 30, 0.6);
}

.mobile-menu-item:last-child {
  border-bottom: none;
}

.mobile-menu-item.services-expanded {
  border-bottom: none;
}

.services-submenu {
  border-bottom: 1px solid rgba(30, 30, 30, 0.6);
}

.mobile-menu-link {
  display: block;
  padding: 15px 20px;
  color: var(--white);
  background: var(--ink-dark);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.mobile-menu-link:visited {
  color: var(--white);
}

.mobile-menu-link:hover,
.mobile-menu-link.active {
  background: var(--accent-red-600);
  color: var(--white);
}

.mobile-menu-link.home-active {
  background: var(--accent-red-600);
  color: var(--white);
}

/* Services Submenu */
.services-submenu {
  background: var(--graphite);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin-top: -1px;
}

.services-submenu.expanded {
  max-height: 250px;
}

.services-submenu a {
  display: block;
  padding: 12px 40px;
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.services-submenu a:visited {
  color: var(--white);
}

.services-submenu a:hover {
  background: rgba(212, 37, 33, 0.18);
}

.services-submenu a:last-child {
  border-bottom: none;
}

.services-arrow {
  float: right;
}

.services-arrow.rotated {
  transform: rotate(180deg);
}

/* HERO SECTION CSS - EXACT from hero.html */
.hero {
  --hero-gap: clamp(40px, 6vh, 60px);
  --hero-top-gap: clamp(80px, 10vh, 100px);
  --hero-bottom-gap: clamp(60px, 8vh, 100px);
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service-1/service-1-01.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hero-top-gap) 50px 0;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  background-size: 110%;
  background-position: center;
  animation: heroZoom 20s ease-in-out infinite alternate;
  z-index: -1;
}

@keyframes heroZoom {
  0% {
    transform: scale(1) translateX(0);
  }

  50% {
    transform: scale(1.05) translateX(-2%);
  }

  100% {
    transform: scale(1) translateX(0);
  }
}

.hero-content {
  max-width: 80%;
  width: 100%;
  color: var(--white);
  text-align: center;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: clamp(500px, 72vh, 680px);
  gap: var(--hero-gap);
  padding: 0;
}

.hero h1 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  margin: 0;
  text-transform: none;
  color: var(--white);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 4px 8px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.hero .hero-subtitle {
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 700;
  margin: 0;
  background: none;
  color: var(--white);
  padding: 0;
  border-radius: 0;
  backdrop-filter: none;
  box-shadow: none;
  line-height: 1.4;
  max-width: clamp(450px, 50vw, 600px);
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-service-links {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 18px);
}

.hero-service-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.8vw, 20px);
  padding: clamp(16px, 2vw, 22px) clamp(14px, 1.8vw, 20px);
  border-radius: 28px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 36px rgba(13, 27, 42, 0.12);
  transition: all 0.3s ease;
  width: clamp(170px, 16vw, 210px);
  height: clamp(200px, 22vw, 230px);
  color: var(--ink-dark);
  border: none;
}

.hero-service-link:hover,
.hero-service-link:focus-visible {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Hover states for icons and text */
.hero-service-link:hover .hero-service-icon,
.hero-service-link:focus-visible .hero-service-icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.1);
}

.hero-service-link:hover .hero-service-icon img,
.hero-service-link:focus-visible .hero-service-icon img {
  filter: brightness(0) invert(1);
  transform: scale(1.1);
}

.hero-service-link:hover .hero-service-text,
.hero-service-link:focus-visible .hero-service-text {
  color: var(--color-primary);
}

.hero-service-icon {
  width: clamp(64px, 7vw, 90px);
  height: clamp(64px, 7vw, 90px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
}

.hero-service-link--aircon .hero-service-icon,
.hero-service-link--bathrooms .hero-service-icon,
.hero-service-link--roof-repairs .hero-service-icon {
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.hero-service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  transition: all 0.3s ease;
}

.hero-service-link--roof-repairs .hero-service-icon img {
  border-radius: 50%;
}

.hero-service-text {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.35;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  transition: color 0.3s ease;
}

.hero-service-text span {
  display: block;
}

.hero-service-link--install {
  background: linear-gradient(155deg, #1f2b36 0%, #0b0f14 100%);
  color: var(--text-on-dark);
}

.hero-service-link--repairs {
  background: linear-gradient(155deg, #5b6a75 0%, #1f2b36 100%);
  color: var(--text-on-dark);
}

.hero-service-link--aircon {
  background: linear-gradient(155deg, #b10d10 0%, #1f2b36 100%);
  color: var(--text-on-dark);
}

/* Hover effect for cards 1-3: turn white */
.hero-service-link--install:hover,
.hero-service-link--install:focus-visible,
.hero-service-link--repairs:hover,
.hero-service-link--repairs:focus-visible,
.hero-service-link--aircon:hover,
.hero-service-link--aircon:focus-visible {
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  color: var(--color-primary);
}

.hero-service-link--install:hover .hero-service-icon,
.hero-service-link--install:focus-visible .hero-service-icon,
.hero-service-link--repairs:hover .hero-service-icon,
.hero-service-link--repairs:focus-visible .hero-service-icon,
.hero-service-link--aircon:hover .hero-service-icon,
.hero-service-link--aircon:focus-visible .hero-service-icon {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.1);
}

.hero-service-link--bathrooms {
  background: linear-gradient(155deg, #d5dde4 0%, #f4f6f8 100%);
  color: var(--text-on-light);
}

.hero-service-link--bathrooms:hover,
.hero-service-link--bathrooms:focus-visible {
  background: linear-gradient(155deg, #1f2b36 0%, #0b0f14 100%);
  color: var(--text-on-dark);
}

.hero-service-link--bathrooms:hover .hero-service-text,
.hero-service-link--bathrooms:focus-visible .hero-service-text {
  color: #ffffff !important;
}

.hero-service-link--bathrooms:hover .hero-service-icon,
.hero-service-link--bathrooms:focus-visible .hero-service-icon {
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.hero-service-link--roof-repairs {
  background: linear-gradient(155deg, #b10d10 0%, #5b6a75 100%);
  color: var(--text-on-dark);
}

.hero-service-link.active {
  box-shadow: 0 22px 48px rgba(13, 20, 26, 0.28), 0 0 0 2px rgba(177, 13, 16, 0.45);
  transform: none;
}

/* Desktop: force five cards on one row */
@media (min-width: 1270px) {
  .hero-service-links {
    flex-wrap: nowrap;
  }

  .hero-service-link {
    flex: 1 1 19%;
    max-width: 19%;
    min-width: 160px;
  }
}

@media (min-width: 1024px) and (max-width: 1269px) {
  .hero-service-links {
    flex-wrap: wrap;
  }

  .hero-service-link {
    flex: 1 1 30%;
    max-width: 30%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-service-links {
    flex-wrap: wrap;
  }

  .hero-service-link {
    flex: 1 1 30%;
    max-width: 30%;
  }
}

.hero .btn {
  margin-bottom: clamp(24px, 3.4vw, 40px);
  font-size: clamp(13px, 1.6vw, 16px);
  padding: clamp(12px, 1.5vw, 16px) clamp(38px, 4.4vw, 64px);
  min-width: clamp(320px, 32vw, 460px);
  flex-shrink: 0;
}

/* Responsive scaling for larger screens */
@media (min-width: 1920px) {
  :root {
    --hero-spacing-unit: calc((100vh - 280px) / 8);
  }

  .hero h1 {
    font-size: clamp(48px, 6vw, 80px);
  }

  .hero .hero-subtitle {
    font-size: clamp(18px, 2.5vw, 28px);
    max-width: clamp(500px, 55vw, 700px);
  }

  .hero-service-link {
    width: clamp(220px, 20vw, 260px);
    height: clamp(260px, 30vw, 300px);
  }

  .hero .btn {
    font-size: clamp(16px, 2.5vw, 22px);
    padding: clamp(14px, 2vw, 20px) clamp(28px, 4vw, 40px);
  }
}

/* Increase hero card spacing on very large screens without affecting laptop sizing */
@media (min-width: 1400px) {
  .hero-service-links {
    gap: clamp(18px, 1.6vw, 26px);
  }

  .hero-service-link {
    width: clamp(190px, 15vw, 235px);
    height: clamp(210px, 22vw, 260px);
  }
}

@media (min-width: 1680px) {
  .hero-service-links {
    gap: clamp(22px, 1.4vw, 30px);
  }

  .hero-service-link {
    width: clamp(200px, 13vw, 250px);
    height: clamp(230px, 20vw, 280px);
  }
}

/* Animations - EXACT from hero.html */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

/* Hero load animation for subtle page-change cue */
@keyframes heroFloatIn {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }

  55% {
    opacity: 1;
    transform: translateY(-4px) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .fade-in {
  opacity: 0;
  animation: heroFloatIn 1s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.hero .hero-subtitle.fade-in {
  animation-delay: 0.14s;
}

.hero .hero-service-links.fade-in {
  animation-delay: 0.26s;
}

.hero .hero-service-link {
  opacity: 0;
  transform: translateY(18px) scale(0.99);
  animation: heroFloatIn 0.95s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.hero .hero-service-link:nth-of-type(1) {
  animation-delay: 0.28s;
}

.hero .hero-service-link:nth-of-type(2) {
  animation-delay: 0.34s;
}

.hero .hero-service-link:nth-of-type(3) {
  animation-delay: 0.4s;
}

.hero .hero-service-link:nth-of-type(4) {
  animation-delay: 0.46s;
}

.hero .btn-primary {
  opacity: 0;
  transform: translateY(20px) scale(0.99);
  animation: heroFloatIn 1.05s cubic-bezier(0.2, 0.6, 0.3, 1) 0.6s forwards;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {

  .hero .fade-in,
  .hero .hero-service-link,
  .hero .btn-primary {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* HOW WE WORK SECTION CSS - EXACT from how-we-work.html */
.divider {
  width: 60px;
  height: 3px;
  background: var(--old-site-bg-dark);
  margin: 15px 0 20px 0;
  border-radius: 2px;
}

.how-we-work {
  padding: var(--section-pad-y) var(--section-pad-x) 30px;
  background: var(--mist);
}

.how-we-work-container {
  max-width: 1200px;
  margin: 0 auto;
}

.work-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
}

.work-step {
  text-align: center;
  background: var(--white);
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(30, 30, 30, 0.1);
}

.work-step-icon {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--aluminium);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto 20px;
  font-size: 24px;
  color: var(--accent-red-600);
}

.work-step-icon img {
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
  background: transparent !important;
  border-radius: 50% !important;
}

.work-step h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: var(--ink-dark);
}

.work-step p {
  color: var(--graphite);
  line-height: 1.6;
}

/* Prevent mid-width overflow on How We Work */
@media (max-width: 1024px) and (min-width: 768px) {
  .how-we-work {
    padding: var(--section-pad-y) 24px 24px;
  }

  .how-we-work-container {
    max-width: 100%;
  }

  .work-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .work-step {
    padding: 24px;
  }

  .work-step-icon,
  .work-step-icon img {
    width: 160px !important;
    height: 160px !important;
  }
}

/* Desktop CTA Banner - Dark blue with barely visible light blue lines */
.desktop-cta-banner-container {
  text-align: center;
  margin: 0;
  background: var(--mist);
}

.desktop-cta-banner {
  display: none;
  /* Hidden on mobile by default */
  background: var(--old-site-bg-dark);
  padding: 18px 20px;
  /* Reduced height padding */
  margin: 0 auto;
  max-width: min(860px, calc(100vw - 40px));
  /* Wider banner with responsive scaling */
  width: 860px;
  /* Target width ~60px wider than 800px */
  border-radius: 20px;
  border: 1px solid rgba(145, 222, 255, 0.15);
  box-shadow: 0 2px 15px rgba(21, 33, 38, 0.3), 0 0 0 1px rgba(145, 222, 255, 0.1);
  position: relative;
  overflow: hidden;
}

/* Barely visible light blue geometric patterns */
.desktop-cta-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(45deg, transparent 40%, rgba(145, 222, 255, 0.03) 41%, rgba(145, 222, 255, 0.03) 43%, transparent 44%), linear-gradient(-45deg, transparent 40%, rgba(145, 222, 255, 0.03) 41%, rgba(145, 222, 255, 0.03) 43%, transparent 44%), radial-gradient(circle at 20% 80%, rgba(145, 222, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(145, 222, 255, 0.05) 0%, transparent 50%);
  background-size: 60px 60px, 60px 60px, 200px 200px, 200px 200px;
  pointer-events: none;
}

/* Animated sweep effect with light blue */
.desktop-cta-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(145, 222, 255, 0.05), transparent);
  animation: futuristicSweep 4s infinite;
  pointer-events: none;
}

@keyframes futuristicSweep {
  0% {
    left: -100%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

.cta-banner-content {
  text-align: center;
  position: relative;
  z-index: 2;
}

.desktop-cta-banner h3 {
  color: var(--white);
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 600;
  margin-bottom: 12px;
  /* Reduced for shorter height */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  line-height: 1.3;
  letter-spacing: 0.3px;
}

.cta-banner-btn {
  display: inline-block;
  background: var(--old-site-accent-cyan);
  color: var(--old-site-text-light);
  padding: 10px 24px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: border-color 0.3s ease;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}

.cta-banner-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--old-site-text-light);
  transition: left 0.3s ease;
  z-index: -1;
}

.cta-banner-btn:hover::before {
  left: 0;
}

.cta-banner-btn:hover {
  color: var(--old-site-bg-dark);
  border-color: var(--old-site-text-light);
}

.cta-banner-btn:hover {
  color: var(--old-site-accent-cyan) !important;
  border-color: var(--white);
  position: relative;
  z-index: 1;
}

/* Show banner on desktop only, hide mobile fallback */
@media (min-width: 768px) {
  body {
    background: var(--white) !important;
  }

  .desktop-cta-banner {
    display: block;
  }

  .desktop-cta-banner-container {
    background: var(--white) !important;
  }

  .desktop-cta-banner-container .desktop-cta-banner,
  .desktop-cta-banner-container {
    box-shadow: none !important;
  }

  .why-choose-container {
    align-items: stretch;
  }

  .why-choose-image {
    padding-top: 0;
    padding-bottom: var(--why-choose-desktop-image-gap-bottom);
    margin-bottom: 0;
    height: 100%;
    display: flex;
    max-width: none;
  }

  .why-choose-image img {
    height: 100%;
    width: 100%;
    max-width: none;
    min-height: 100%;
    object-fit: cover;
  }

  .mobile-fallback-btn {
    display: none;
  }

  .why-choose {
    box-shadow: none !important;
    /* remove separator shadow on white background */
  }

  .faq-section {
    background: var(--white) !important;
  }
}

/* Show mobile fallback on mobile, hide banner */
@media (max-width: 767px) {
  :root {
    --section-gap: var(--space-5);
    --faq-stack-gap: var(--content-gap-tight);
    --faq-title-gap: 80px;
    --faq-item-gap: var(--content-gap-tight);
    --services-stack-gap: var(--content-gap-tight);
    --services-title-gap: var(--services-stack-gap);
    --why-choose-mobile-top-padding: 80px;
    --why-choose-mobile-bottom-padding: 80px;
  }

  body {
    background: var(--white) !important;
  }

  .service-card {
    background: var(--white) !important;
  }

  .desktop-cta-banner-container {
    background: transparent !important;
    padding: 0 !important;
  }

  .desktop-cta-banner {
    display: none !important;
  }

  .mobile-fallback-btn {
    display: block;
    width: fit-content;
    margin: var(--mobile-fallback-btn-margin-top) auto var(--mobile-fallback-btn-margin-bottom);
    text-align: center;
  }

  /* Mobile Spacing Polish */
  .rating-summary {
    margin-bottom: 10px !important;
  }

  .why-choose-container {
    padding: var(--why-choose-mobile-top-padding) 24px var(--why-choose-mobile-bottom-padding) !important;
  }

  .why-choose-content {
    padding: 0;
    /* Container has padding now */
    text-align: center;
    gap: 24px;
  }

  .why-choose-heading {
    justify-content: center;
  }

  .why-choose-image {
    margin-top: 24px;
  }

  .faq-section .section-title {
    margin-bottom: 0 !important;
  }
}

/* Booking/Guarantees Section */
.booking-section {
  padding: var(--services-bottom-gap) var(--section-pad-x) var(--section-pad-y);
  margin-top: calc(-1 * var(--section-gap));
  /* Cancel flex gap for equal visual spacing */
  background: var(--old-site-bg-dark);
  color: var(--white);
}

.booking-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 4vw, 50px);
  align-items: stretch;
}

.booking-copy h3 {
  font-size: clamp(32px, 3vw, 44px);
  margin-bottom: 12px;
  line-height: 1.2;
}

.booking-copy p.lede {
  font-size: 18px;
  margin-bottom: 18px;
  color: var(--aluminium);
}

.booking-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 22px 0 24px 0;
  padding: 0;
}

.booking-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.booking-list li:last-child {
  border-bottom: none;
}

.booking-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(230, 126, 34, 0.16);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
}

.booking-list span {
  font-size: 16px;
  color: var(--white);
  line-height: 1.4;
}

.booking-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  width: 100%;
}

.booking-cta .btn {
  width: clamp(280px, 40vw, 420px);
  justify-content: center;
  padding: 16px 22px;
  font-size: 18px;
  border-radius: 14px;
}

.booking-ratings {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--white);
}

.rating-pill .stars {
  color: #F4B400;
  letter-spacing: 1px;
  font-size: 15px;
}

.booking-visual {
  background: var(--color-light-base);
  border-radius: 18px;
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 16px 40px rgba(11, 14, 31, 0.35);
}

.booking-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

.rating-pill .brand-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* REVIEWS SECTION CSS - EXACT from reviews.html */
.reviews-section {
  /* padding: var(--reviews-top-spacing) 50px var(--reviews-bottom-spacing);*/
  padding-top: 20px;
  padding-bottom: 0;
  margin-bottom: calc(-1 * var(--section-gap));
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.reviews-section::before {
  display: none;
}

.reviews-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--reviews-stack-gap);
}

.facebook-reviews-header {
  text-align: center;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  align-self: center;
}

.rating-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--rating-summary-bottom-gap);
}

.rating-summary h2 {
  font-size: 40px;
  font-weight: 700;
  margin: 0;
  color: var(--ink-dark);
  text-shadow: none;
  line-height: 1.1;
}

.recommend-text {
  font-size: 20px;
  font-weight: 500;
  color: var(--graphite);
  margin: 0;
  text-shadow: none;
  line-height: 1.4;
  font-style: italic;
}

.review-count {
  margin: 0;
}

.google-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 30px;
  font-weight: 700;
  font-family: 'Montserrat', 'Inter', sans-serif;
  letter-spacing: -0.5px;
}

.google-logo .g {
  color: #4285F4;
}

.google-logo .o1 {
  color: #EA4335;
}

.google-logo .o2 {
  color: #FBBC05;
}

.google-logo .g2 {
  color: #4285F4;
}

.google-logo .l {
  color: #34A853;
}

.google-logo .e {
  color: #EA4335;
}

@media (min-width: 992px) {

  .rating-summary h2,
  .rating-summary .recommend-text,
  .rating-summary .review-count {
    white-space: nowrap;
  }
}

.facebook-brand {
  font-size: 32px;
  font-weight: 700;
  color: #4267B2;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: -0.5px;
  margin: 0;
  text-shadow: 0 2px 4px rgba(66, 103, 178, 0.2);
  line-height: 1.1;
}

.reviews-carousel-container {
  position: relative;
  margin-bottom: 0;
}

.reviews-grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
  touch-action: pan-x;
  /* Enable horizontal touch scrolling */
  cursor: grab;
}

.reviews-grid::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.reviews-grid:active {
  cursor: grabbing;
}

.review-card {
  background: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(30, 30, 30, 0.1);
  position: relative;
  min-width: 280px;
  max-width: 280px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.review-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(30, 30, 30, 0.15);
  z-index: 10;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-red-600);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}

.review-author {
  flex-grow: 1;
}

.review-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-dark);
}

.review-stars {
  color: var(--accent-red-600);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.verified-check {
  width: 14px;
  height: 14px;
  background: #4267B2;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 9px;
}

.review-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-dark);
  margin-bottom: 5px;
}

.facebook-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--ink-dark);
  box-shadow: 0 2px 8px rgba(30, 30, 30, 0.15);
  transition: all 0.3s ease;
  z-index: 100;
}

.carousel-nav:hover {
  background: white;
  transform: translateY(-50%) scale(1.1);
}

.carousel-nav.prev {
  left: -20px;
}

.carousel-nav.next {
  right: -20px;
}

/* SERVICES SECTION CSS - EXACT from services-component.html */
.services-section {
  padding: var(--services-stack-gap) var(--section-pad-x) var(--services-bottom-gap);
  background: var(--white);
}

.services-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--services-title-gap);
}

.services-section .section-title {
  margin-bottom: 0;
}

.section-title {
  text-align: center;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  margin-bottom: 30px;
  color: var(--ink-dark);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.service-card.service-card--center {
  grid-column: 1 / -1;
  width: calc(50% - 20px);
  justify-self: center;
}

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(30, 30, 30, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card.tone-light {
  background: var(--aluminium);
}

.service-card.tone-secondary {
  background: rgba(91, 106, 117, 0.12);
}

.service-card.tone-accent {
  background: rgba(177, 13, 16, 0.12);
}

.service-card.tone-highlight {
  background: rgba(213, 221, 228, 0.55);
}

.service-card.tone-repairs {
  background: rgba(177, 13, 16, 0.08);
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(30, 30, 30, 0.15);
}

.service-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.service-card:hover .service-image img {
  transform: scale(1.05);
}

.service-content {
  padding: 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-content h3,
.service-content h4 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 15px;
  text-transform: capitalize;
  color: var(--ink-dark);
}

.service-content h3 a,
.service-content h4 a {
  color: var(--ink-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.service-content h3 a:hover,
.service-content h4 a:hover {
  color: var(--accent-red-600);
}

.divider {
  width: 60px;
  height: 3px;
  background: var(--old-site-bg-dark);
  margin: 15px 0 20px 0;
  border-radius: 2px;
}

.service-content p {
  margin-bottom: 20px;
  color: var(--graphite);
  line-height: 1.6;
  font-size: 14px;
}

.service-content ul {
  list-style: none;
  margin-bottom: 25px;
  flex: 1;
}

.service-content ul li {
  padding: 8px 0;
  padding-left: 25px;
  position: relative;
  color: var(--graphite);
  font-size: 14px;
  line-height: 1.5;
}

.service-content ul li:before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--old-site-bg-dark);
  font-weight: bold;
  font-size: 16px;
}

.service-content .btn {
  margin-top: auto;
}

/* WHY CHOOSE SECTION - redesigned */
.why-choose {
  padding: 0 var(--section-pad-x);
  background: var(--white);
  /* outer area white on mobile too */
  color: var(--ink-dark);
  border-radius: 28px;
  box-shadow: none;
  max-width: 1260px;
  margin: 0 auto;
  overflow: hidden;
}

.why-choose-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: stretch;
  background: var(--color-dark-base);
  border-radius: 24px;
  padding: 32px 32px 48px;
  box-shadow: none;
  color: var(--text-on-dark);
}

.why-choose-heading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}

.why-choose-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--text-on-dark);
  border-radius: 50%;
  box-shadow: 0 8px 18px rgba(177, 13, 16, 0.35);
  flex-shrink: 0;
}

.why-choose-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--why-choose-text-gap);
}

.why-choose-image {
  text-align: center;
}

.why-choose h2 {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 700;
  text-align: left;
  margin: 0;
  color: var(--text-on-dark);
  line-height: 1.15;
}

.why-choose p {
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted-on-dark);
}

.why-choose-image {
  max-width: 460px;
}

.why-choose-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* FAQ SECTION CSS */
.faq-section {
  padding: 0 var(--section-pad-x) var(--section-pad-y);
  background: var(--white);
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--faq-title-gap);
}

.faq-body {
  display: flex;
  flex-direction: column;
  gap: var(--faq-stack-gap);
}

.faq-section .section-title {
  margin-bottom: 0;
}

/* Modern FAQ Cards */
.faq-item {
  margin-bottom: 0;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(30, 30, 30, 0.08);
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 16px rgba(30, 30, 30, 0.12);
  transform: translateY(-1px);
}

.faq-question {
  padding: 24px;
  background: var(--white);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: var(--ink-dark);
  font-size: 16px;
  border-left: 4px solid transparent;
  transition: all 0.3s ease;
}

.faq-question:hover {
  border-left-color: var(--accent-red-600);
  background: var(--blush-tint);
}

.faq-item.active .faq-question {
  border-left-color: var(--old-site-accent-cyan);
  background: var(--blush-tint);
}

.faq-arrow {
  transition: all 0.3s ease;
  color: var(--old-site-bg-dark);
  font-size: 18px;
  font-weight: bold;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(246, 179, 87, 0.1);
}

.faq-item.active .faq-arrow {
  transform: rotate(180deg);
  background: var(--old-site-accent-cyan);
  color: var(--white);
}

.faq-answer {
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  background: var(--white);
}

.faq-item.active .faq-answer {
  padding: 0 24px 24px 24px;
  max-height: 500px;
}

.faq-answer p {
  color: var(--graphite);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--mist);
}

/* FAQ Filter Buttons */
.faq-filters {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 12px 24px;
  border-radius: 25px;
  border: 2px solid var(--aluminium);
  background: var(--white);
  color: var(--old-site-bg-dark);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-family: 'Montserrat', 'Inter', sans-serif;
  z-index: 1;
}

.filter-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--old-site-accent-cyan);
  transition: left 0.3s ease;
  z-index: -1;
}

.filter-btn:hover::before {
  left: 0;
}

.filter-btn:hover {
  color: var(--old-site-bg-dark);
  border-color: var(--old-site-accent-cyan);
  z-index: 2;
}

/* Active state - highlighted like Get a Quote button */
.filter-btn.active {
  background: var(--old-site-bg-dark);
  color: var(--white);
  border-color: var(--old-site-bg-dark);
}

.filter-btn.active::before {
  background: var(--old-site-bg-dark);
}

/* FAQ Category Title - Modern Design */
.faq-category-title {
  margin: 0;
  text-align: center;
}

.faq-items {
  display: flex;
  flex-direction: column;
  gap: var(--faq-item-gap);
  padding-bottom: 2px;
}

.faq-category-title h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ink-dark);
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-family: 'Montserrat', 'Inter', sans-serif;
  position: relative;
}

.faq-category-title h3::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--old-site-bg-dark);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* Mobile Styles - Combined from both files */
@media (max-width: 767px) {
  :root {
    --reviews-top-spacing: var(--section-pad-y);
    --reviews-bottom-spacing: var(--section-pad-y);
    --reviews-stack-gap: var(--content-gap-tight);
  }

  body {
    padding-top: 0;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    max-width: 100vw;
  }

  .faq-answer p {
    padding-top: 12px;
  }

  /* Mobile filter buttons */
  .faq-filters {
    gap: 10px;
    padding: 0 10px;
  }

  .filter-btn {
    padding: 10px 18px;
    font-size: 13px;
    border-radius: 20px;
  }

  /* Mobile category title */
  .faq-category-title {
    margin: 0;
  }

  .faq-category-title h3 {
    font-size: 20px;
  }

  .faq-category-title h3::after {
    width: 50px;
    height: 2px;
    margin: 10px auto 0;
  }

  /* Reviews Mobile Styles - EXACT from reviews.html */
  .reviews-section {
    padding: 40px 20px 0;
  }

  .reviews-container {
    gap: 0 !important;
  }

  .rating-summary {
    margin-bottom: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .facebook-reviews-header {
    margin: 0 !important;
    padding: 0 !important;
  }

  .review-count {
    margin: 0 !important;
  }

  .facebook-reviews-header {
    margin-bottom: 0;
  }

  .reviews-carousel-container {
    margin-bottom: 0;
  }

  .reviews-grid {
    scroll-snap-type: x mandatory;
    gap: 15px;
    padding: 10px 20px;
  }

  .review-card {
    scroll-snap-align: center;
    min-width: calc(100vw - 80px);
    max-width: calc(100vw - 80px);
    flex-shrink: 0;
    margin-right: 15px;
  }

  .carousel-nav {
    width: 35px;
    height: 35px;
    font-size: 16px;
  }

  .carousel-nav.prev {
    left: -15px;
  }

  .carousel-nav.next {
    right: -15px;
  }
}

/* Services Mobile Styles for smaller screens - EXACT from services-component.html */
@media (max-width: 480px) {
  .service-image {
    height: 320px;
  }
}

/* Footer - EXACT from footer.html */
.footer {
  background: var(--old-site-bg-dark);
  color: var(--white);
  padding: var(--section-pad-y) 0 30px;
}

.footer-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 50px;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 60px;
  align-items: flex-start;
  justify-items: center;
  margin-bottom: 40px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.footer-section {
  width: 100%;
  max-width: 260px;
}

.footer-section h2,
.footer-section h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: var(--old-site-accent-cyan);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.footer-section p {
  margin-bottom: 0;
  line-height: 1.6;
  color: var(--aluminium);
}

.footer-section a {
  color: var(--old-site-accent-cyan);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-section a:hover {
  color: var(--white);
}

.contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--aluminium);
}

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

.contact-item svg {
  width: 18px;
  height: 18px;
  margin-right: 24px;
  fill: var(--accent-red-500);
  stroke: none;
  flex-shrink: 0;
}

.contact-item a {
  color: var(--aluminium);
  white-space: nowrap;
  /* keep phone/email on a single line */
}

.contact-item a:hover {
  color: var(--accent-red-500);
}

.social-links {
  display: flex;
  gap: 15px;
  margin-top: 8px;
  justify-content: center;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(230, 126, 34, 0.1);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.social-link:hover {
  background: var(--accent-red-500);
  transform: translateY(-2px);
}

.social-link svg {
  width: 18px;
  height: 18px;
  fill: var(--white);
}

.social-link:hover svg {
  fill: var(--white);
}

.footer-map {
  width: 100%;
  max-width: 1100px;
  margin: 40px auto 20px auto;
}

.map-container {
  width: 100%;
  height: 350px;
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: 0;
}

.footer-bottom {
  text-align: center;
  padding: 30px 50px 20px;
  margin-top: 40px;
  color: var(--aluminium);
}

.footer-bottom p {
  margin-bottom: 15px;
  font-size: 14px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--aluminium);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 14px;
}

.footer-links a:hover {
  color: var(--old-site-accent-cyan);
}

.powered-by {
  margin-top: 15px;
}

.powered-by a {
  color: var(--old-site-accent-cyan);
  text-decoration: none;
  font-weight: 600;
}

/* WhatsApp Button Styles */
.whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25D366;
  color: white !important;
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  margin-top: 3px;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
  vertical-align: top;
}

.whatsapp-button:hover {
  background: #20BA5A;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  color: white !important;
}

.whatsapp-button:visited {
  color: white !important;
}

.whatsapp-button svg {
  width: 18px;
  height: 18px;
  fill: white;
}

/* Desktop alignment fix for WhatsApp button */
@media (min-width: 768px) {
  .whatsapp-button {
    margin-top: 1px;
    align-self: flex-start;
  }
}

/* Footer Mobile Styles - EXACT from footer.html */
@media (max-width: 767px) {
  .footer-content {
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-top {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 30px;
    text-align: center;
    max-width: none;
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  .footer-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .footer-section h2,
  .footer-section h3 {
    text-align: center;
    margin-bottom: 8px;
  }

  .contact-item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    text-align: center;
    width: 100%;
  }

  .map-container {
    height: 250px;
    margin: 0 20px;
    width: calc(100% - 40px);
  }

  .social-links {
    justify-content: center;
    margin-top: 8px;
    display: flex;
    align-items: center;
  }

  .whatsapp-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    text-align: center;
  }

  .whatsapp-button {
    margin-top: 3px;
  }

  .footer-links {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .footer-bottom {
    padding: 20px;
    text-align: center;
  }
}

/* ===== SITE OVERRIDES ===== */
/* (Palette variables are set in the FX Security overrides section near end of file) */

.hero h1 {
  white-space: nowrap;
}

.hero .hero-subtitle {
  max-width: clamp(520px, 55vw, 760px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .hero h1 {
    white-space: normal;
  }
}

.hero-service-link--aircon .hero-service-icon,
.hero-service-link--bathrooms .hero-service-icon,
.hero-service-link--roof-repairs .hero-service-icon,
.hero-service-link--gas .hero-service-icon,
.hero-service-link--plumbing .hero-service-icon {
  background: rgba(15, 34, 51, 0.3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.hero-service-link--install {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%);
  color: var(--text-on-dark);
}

.hero-service-link--repairs {
  background: linear-gradient(155deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  color: var(--text-on-dark);
}

.hero-service-link--aircon {
  background: linear-gradient(155deg, #F28C28 0%, #D97B1F 100%);
  color: var(--text-on-dark);
}

.hero-service-link--bathrooms {
  background: linear-gradient(155deg, #E0EDF7 0%, var(--color-light-base) 100%);
  color: var(--text-on-light);
}

.hero-service-link--roof-repairs {
  background: linear-gradient(155deg, var(--color-highlight) 0%, var(--color-primary) 100%);
  color: var(--text-on-dark);
}

.hero-service-link--gas {
  background: linear-gradient(155deg, var(--color-dark-base) 0%, #D97B1F 100%);
  color: var(--text-on-dark);
}

.hero-service-link--plumbing {
  background: linear-gradient(155deg, var(--color-secondary) 0%, var(--color-highlight) 100%);
  color: #ffffff;
}

.hero-service-link.active {
  box-shadow: 0 22px 48px rgba(15, 34, 51, 0.28), 0 0 0 2px rgba(31, 78, 121, 0.45);
  transform: none;
}

@media (min-width: 1270px) {
  .hero-service-links {
    flex-wrap: wrap;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-service-link {
    flex: 0 1 23%;
    max-width: 220px;
    min-width: 180px;
  }
}

.desktop-cta-banner-container {
  background: var(--white) !important;
}

.desktop-cta-banner {
  background: var(--old-site-bg-dark) !important;
  border: 1px solid rgba(145, 222, 255, 0.15);
  box-shadow: 0 8px 26px rgba(15, 34, 51, 0.26);
}

.desktop-cta-banner::before,
.desktop-cta-banner::after {
  content: none !important;
}

.desktop-cta-banner h3 {
  color: var(--white) !important;
  text-shadow: none !important;
}

.cta-banner-btn {
  background: var(--color-accent) !important;
  color: #ffffff !important;
}

.cta-banner-btn:hover {
  background: var(--btn-primary-hover) !important;
  color: #ffffff !important;
}

.hero {
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/newsection.webp') !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Service-specific hero photography */
body[data-service='boiler-installations'] .hero {
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service/33c25302-778e-419e-8a01-2b81828680ac-1-all-10988.jpg') !important;
}

body[data-service='boiler-servicing'] .hero {
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service/33c25302-778e-419e-8a01-2b81828680ac-1-all-11075.jpg') !important;
}

body[data-service='boiler-repairs'] .hero {
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service/33c25302-778e-419e-8a01-2b81828680ac-1-all-11138.jpg') !important;
}

body[data-service='central-heating'] .hero {
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/general/33c25302-778e-419e-8a01-2b81828680ac-1-all-7941.jpg') !important;
}

body[data-service='bathrooms'] .hero {
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/general/33c25302-778e-419e-8a01-2b81828680ac-1-all-15684.jpg') !important;
}

body[data-service='gas-services'] .hero {
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service/33c25302-778e-419e-8a01-2b81828680ac-1-all-16742.jpg') !important;
}

/* ===== SERVICE DETAIL LAYOUT FIXES ===== */
.about-service-description {
  padding: var(--service-content-gap, 80px) var(--section-pad-x);
  background: var(--white);
}

.about-service-description .section-title {
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 24px;
  line-height: 1.2;
  text-align: center;
}

.about-service-description-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: stretch;
}

.about-service-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: var(--graphite);
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 0;
}

.about-service-content p {
  margin: 0;
}

.mobile-why-choose-title {
  display: none;
}

.about-service-specs {
  display: flex !important;
  flex-direction: column;
  gap: var(--inter-section-gap);
  flex: 1 1 42%;
  max-width: 460px;
  width: 100%;
  margin-left: auto;
}

.about-specs-container {
  width: 100%;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.about-specs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
}

.about-specs-side {
  display: block;
  height: auto;
  row-gap: 0;
  text-align: left;
  background: #D0EFEA;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: rgba(18, 20, 31, 0.12) 0 4px 16px;
  border: 1px solid rgba(42, 45, 62, 0.24);
}

.about-specs-side::before {
  display: none;
}

.about-specs-highlight {
  background: linear-gradient(135deg, #133968 0%, #12141F 100%);
  color: #FFFFFF;
}

.about-specs-highlight .about-specs-main-value {
  color: #FFFFFF;
}

.about-specs-main-item {
  min-height: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-top: 0;
  margin-bottom: 10px;
}

.about-specs-main-label {
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2A2D3E;
  text-align: left;
  margin-bottom: 0;
}

.about-specs-secondary-label {
  flex: 1;
  font-size: 0.72rem;
  font-weight: 500;
  color: #2A2D3E;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.about-specs-main-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right !important;
  color: #12141F;
}

.about-specs-secondary {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-specs-secondary-item {
  display: flex;
  flex-direction: row !important;
  justify-content: space-between;
  align-items: center;
  min-height: 0;
  gap: 10px;
  text-align: left;
  padding-top: 13px;
  padding-bottom: 2px;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
}

.about-specs-secondary-value {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 700;
  color: #12141F;
  text-align: right !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.about-specs-highlight .about-specs-main-label,
.about-specs-highlight .about-specs-secondary-label {
  color: rgba(255, 255, 255, 0.76);
}

.about-specs-highlight .about-specs-main-value,
.about-specs-highlight .about-specs-secondary-value {
  color: #FFFFFF;
}

.about-specs-highlight .about-specs-secondary-item {
  border-top-color: rgba(255, 255, 255, 0.28);
}

.gallery-section {
  padding: var(--service-content-gap, 80px) 50px;
  background: #f7f0e0;
}

.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
}

.gallery-section .section-title {
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 24px;
  line-height: 1.2;
  text-align: center;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.gallery-item {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(13, 27, 42, 0.12);
  background: var(--white);
  position: relative;
  cursor: zoom-in;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.contact-main-section {
  padding: var(--service-content-gap, 80px) var(--section-pad-x) 0;
  background: var(--white);
}

.contact-main-container {
  max-width: 1200px;
  margin: 0 auto;
}

.contact-main-container .section-title {
  font-size: clamp(26px, 3vw, 38px);
  margin-bottom: 18px;
  line-height: 1.2;
  text-align: center;
}

.contact-intro {
  max-width: 840px;
  margin: 0 auto 28px;
  text-align: center;
  color: var(--ink-dark);
}

.contact-main-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--content-gap);
  margin-bottom: var(--service-content-gap, 80px);
}

.contact-main-card {
  background: var(--old-site-bg-dark);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 18px 36px rgba(11, 14, 31, 0.24);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.contact-main-card h3 {
  margin: 0;
  font-size: 24px;
  color: var(--white);
}

.contact-main-card p {
  margin: 0;
  color: var(--aluminium);
  line-height: 1.5;
}

.contact-main-card .contact-main-meta {
  font-size: 14px;
  opacity: 0.9;
}

.contact-main-card .btn {
  align-self: center;
}

.contact-main-map {
  text-align: center;
}

.contact-main-map h3 {
  font-size: clamp(24px, 2.8vw, 32px);
  margin-bottom: 8px;
  color: var(--ink-dark);
}

.contact-main-map p {
  margin-bottom: 20px;
  color: var(--ink-dark);
}

.map-container-main {
  width: 100%;
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(11, 14, 31, 0.22);
}

.map-container-main iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 767px) {
  .contact-main-grid {
    margin-bottom: 48px;
  }

  .map-container-main {
    height: 340px;
  }
}

/* ===== SERVICE PAGE - UNIFORM SECTION SPACING ===== */
/* One fixed value for ALL vertical gaps - consistency over responsiveness */
body[data-service] {
  --service-content-gap: 80px;
}

body[data-service] #main-content {
  gap: 0;
}

body[data-service] .hero {
  align-items: flex-end;
  padding-bottom: var(--service-content-gap);
}

body[data-service] .hero-content {
  min-height: 0;
  justify-content: flex-end;
}

body[data-service] .hero .btn {
  margin-bottom: 0;
}

body[data-service] .reviews-section {
  margin-bottom: 0;
  padding-top: var(--service-content-gap);
  padding-bottom: var(--service-content-gap);
}

body[data-service] .faq-section {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: var(--service-content-gap);
}

body[data-service] .footer {
  padding-top: var(--service-content-gap);
}

/* ===== HOME PAGE SPACING ===== */
/* Same 80px fixed gaps - following the color-change rule */
/* Remove flex gap between Google logo and iframe in reviews */
body[data-service] .reviews-container {
  gap: 0;
}

/* Reviews -> Services is same color (white->white): merge to one 80px */
body:is([data-service="home"], [data-service="services"]) .reviews-section {
  padding-bottom: 0;
}

/* Services gap override */
body:is([data-service="home"], [data-service="services"]) .services-section {
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: var(--inter-section-gap) !important;
}

/* Gap between "Our Services" title and the cards grid */
body:is([data-service="home"], [data-service="services"]) .services-container {
  gap: var(--inter-section-gap);
}

/* Booking: color change from services. Remove negative margin, set 80px top+bottom */
body:is([data-service="home"], [data-service="services"]) .booking-section {
  margin-top: 0;
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: var(--inter-section-gap) !important;
}

/* CTA banner container: 80px top, 0 bottom (same color as why-choose below - merge) */
body:is([data-service="home"], [data-service="services"]) .desktop-cta-banner-container {
  padding-top: var(--service-content-gap);
  padding-bottom: 0;
}

/* Why Choose: 80px top, 0 bottom (same color as FAQ below - merge) */
body:is([data-service="home"], [data-service="services"]) .why-choose {
  padding-top: var(--service-content-gap);
  padding-bottom: 0;
}

/* FAQ: 80px top+bottom (color changes on both sides) */
body:is([data-service="home"], [data-service="services"]) .faq-section {
  padding-top: var(--service-content-gap);
  padding-bottom: var(--service-content-gap);
}

/* Footer: 80px top padding */
body:is([data-service="home"], [data-service="services"]) .footer {
  padding-top: var(--service-content-gap);
}

/* Active service highlight requested by user */
.hero-service-link.active {
  border: 2px solid #ff2b2b !important;
  box-shadow: 0 0 0 2px rgba(255, 43, 43, 0.35), 0 0 24px rgba(255, 43, 43, 0.45), 0 18px 36px rgba(15, 34, 51, 0.22) !important;
  transform: none;
}

@media (max-width: 1100px) {
  .about-service-description-container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-specs-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-service-specs {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .mobile-why-choose-title {
    display: block;
    margin: 0;
    font-size: 22px;
    color: var(--color-primary);
  }
}

@media (max-width: 640px) {
  .about-service-content {
    font-size: 17px;
    line-height: 1.6;
  }

  .about-specs-main-value {
    font-size: 22px;
  }

  .gallery-section {
    padding: var(--service-content-gap, 80px) 20px;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }
}

body[data-service='faq'] .faq-section {
  padding-top: var(--service-content-gap);
  padding-bottom: var(--service-content-gap);
}

/* ===== UTILITY PAGES (NO HERO) ===== */
.utility-main {
  padding: calc(var(--service-content-gap, 80px) + 120px) var(--section-pad-x) var(--service-content-gap);
  background: linear-gradient(180deg, #2f343a 0%, #e2e5e9 100%);
}

.utility-container {
  max-width: 1100px;
  margin: 0 auto;
}

.utility-container--narrow {
  max-width: 780px;
}

.utility-card {
  background: var(--white);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 42px);
  box-shadow: 0 18px 38px rgba(11, 14, 31, 0.12);
}

.utility-card--center {
  text-align: center;
}

.utility-card--notfound {
  border: 1px solid rgba(36, 59, 83, 0.12);
}

/* Sitemap: keep grouped links left-aligned and full-width on mobile */
.utility-card--sitemap .utility-content {
  justify-items: stretch;
}

.utility-card--sitemap .utility-content h3,
.utility-card--sitemap .utility-content ul {
  width: 100%;
  text-align: left;
}

.utility-card--sitemap .utility-content ul {
  justify-self: stretch;
}

.utility-title {
  margin: 0 0 12px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  color: var(--ink-dark);
}

.utility-subtitle {
  margin: 0 0 28px;
  color: rgba(28, 35, 43, 0.82);
  font-size: clamp(17px, 2.1vw, 21px);
}

.utility-content {
  display: grid;
  gap: 18px;
  color: var(--ink-dark);
}

.utility-content h2 {
  margin: 8px 0 0;
  font-size: clamp(22px, 2.8vw, 28px);
  line-height: 1.25;
}

.utility-content p {
  margin: 0;
}

.utility-content ul {
  margin: 0;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}

.utility-content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.utility-actions {
  margin-top: 12px;
}

@media (max-width: 767px) {
  .utility-main {
    padding: calc(var(--service-content-gap, 80px) + 96px) 20px var(--service-content-gap);
  }

  .utility-subtitle {
    margin-bottom: 22px;
  }

  .utility-content {
    gap: 14px;
  }
}

/* Mobile header alignment override: keep logo + menu toggle on right */
@media (max-width: 1100px) {
  .header-content .logo {
    left: 20px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(calc(-50% + 4px)) !important;
  }

  .header-content .mobile-menu-toggle {
    left: auto !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 767px) {
  .header-content .logo {
    left: 20px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(calc(-50% + 4px)) !important;
  }

  .header-content .mobile-menu-toggle {
    left: auto !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* Mobile reliability fixes: show full services list + keep hero copy to max 2 lines */
@media (max-width: 1100px) {
  .mobile-menu {
    max-height: calc(100vh - var(--top-bar-height) - 80px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .services-submenu.expanded {
    max-height: 1000px !important;
  }
}

@media (max-width: 767px) {
  .hero h1 {
    font-size: clamp(26px, 7.2vw, 34px) !important;
    line-height: 1.15 !important;
    max-width: 15ch;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
  }

  .hero .hero-subtitle {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.35 !important;
    max-width: 32ch;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Hero copy: no truncation dots; render full text cleanly */
.hero h1,
.hero .hero-subtitle {
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 767px) {
  .hero h1 {
    display: block !important;
    max-width: none !important;
  }

  .hero .hero-subtitle {
    display: block !important;
    max-width: 34ch !important;
  }
}

/* Top CTA: separate desktop and mobile copy */
.top-bar .scroll-text-mobile {
  display: none;
}

@media (max-width: 767px) {
  .top-bar .scroll-text-desktop {
    display: none;
  }

  .top-bar .scroll-text-mobile {
    display: inline-block;
    width: auto;
    clip-path: none;
    animation: reveal 4.4s steps(16, end) infinite;
  }
}

/* ===== Home Hero Reference Rebuild ===== */
body[data-service="home"] .header.hero-reference-header {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  padding: 14px 22px 0;
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important;
}

body[data-service="home"] .header.hero-reference-header.scrolled {
  background: transparent !important;
  backdrop-filter: none !important;
  border: 0 !important;
}

@media (min-width: 768px) {
  body[data-service="home"] .header.hero-reference-header.hidden {
    transform: translateY(0) !important;
  }
}

body[data-service="home"] .hero-reference-header-content {
  position: static;
  max-width: 1480px;
  margin: 0 auto;
  min-height: 56px;
  border-radius: 8px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  background: linear-gradient(90deg, #7db71f 0%, #9acd32 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

body[data-service="home"] .hero-reference-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

body[data-service="home"] .hero-reference-header-content .logo {
  position: static;
  transform: none;
  display: flex;
  align-items: center;
  align-self: stretch;
}

body[data-service="home"] .hero-reference-header-content .logo a {
  display: flex;
  align-items: center;
  height: 100%;
}

body[data-service="home"] .hero-reference-header-content .logo img {
  width: auto;
  height: 100%;
  border-radius: 0;
}

body[data-service="home"] .hero-inline-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

body[data-service="home"] .hero-inline-phone:hover {
  opacity: 0.85;
}

body[data-service="home"] .hero-inline-phone-icon {
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body[data-service="home"] .hero-inline-phone-icon svg {
  width: 100%;
  height: 100%;
  fill: #ffffff;
}

body[data-service="home"] .header.hero-reference-header nav {
  position: static;
  transform: none;
  justify-self: center;
}

body[data-service="home"] .hero-reference-header-content .nav-menu {
  gap: 0;
  align-items: center;
}

body[data-service="home"] .hero-reference-header-content .nav-menu li {
  padding: 0 18px;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}

body[data-service="home"] .hero-reference-header-content .nav-menu li:first-child {
  border-left: 0;
}

body[data-service="home"] .hero-reference-header-content .nav-menu a {
  color: #f8f8f8;
  font-size: 15px;
  font-weight: 600;
}

body[data-service="home"] .hero-reference-header-content .nav-menu a::after {
  background: #ffffff;
}

body[data-service="home"] .hero-reference-header-content .nav-menu a.active::after {
  width: 100%;
}

body[data-service="home"] .header.hero-reference-header .header-buttons {
  position: static;
  right: auto;
}

body[data-service="home"] .header.hero-reference-header .header-cta-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-primary {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 22px;
  border-radius: 9px;
  border: 0;
  background: linear-gradient(180deg, #c8222f 0%, #ad1521 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 10px 20px rgba(82, 11, 17, 0.24);
}

body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-whatsapp {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 22px;
  border-radius: 9px;
  border: 0;
  background: linear-gradient(180deg, #25d366 0%, #1da851 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(13, 82, 40, 0.24);
  transition: opacity 0.2s ease;
}

body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-whatsapp:hover {
  opacity: 0.9;
}

body[data-service="home"] .hero-whatsapp-pill {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 9, 10, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.35);
  text-decoration: none;
}

body[data-service="home"] .hero-whatsapp-pill img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

body[data-service="home"] .home-hero-reference {
  min-height: 100vh;
  padding: 90px 0 28px !important;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 14% 34%, rgba(12, 15, 22, 0.72) 0%, rgba(12, 15, 22, 0.02) 44%),
    linear-gradient(112deg, rgba(8, 9, 12, 0.78) 0%, rgba(8, 9, 12, 0.45) 50%, rgba(8, 9, 12, 0.55) 100%),
    url('../pictures/general/2026-02-12.webp') center 40% / cover no-repeat !important;
}

body[data-service="home"] .home-hero-content {
  width: min(1480px, calc(100% - 64px));
  margin: 0 auto;
  max-width: 1480px;
  align-items: flex-start;
  text-align: left;
  min-height: auto;
  justify-content: flex-start;
  flex: 0 0 auto;
}

body[data-service="home"] .home-hero-content h1 {
  margin: 0;
  font-size: clamp(36px, 3.5vw, 50px);
  line-height: 1.08;
  color: #ffffff;
  text-shadow: 0 5px 24px rgba(0, 0, 0, 0.7);
}

body[data-service="home"] .home-hero-content .hero-subtitle {
  margin-top: 10px;
  max-width: 520px;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.35;
  color: rgba(245, 246, 244, 0.95);
}

body[data-service="home"] .hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

body[data-service="home"] .hero-actions .btn {
  min-height: 40px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 22px;
}

body[data-service="home"] .hero-actions .btn-call-now {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(160deg, rgba(79, 84, 94, 0.95) 0%, rgba(41, 44, 52, 0.95) 100%);
  color: #ffffff;
}

body[data-service="home"] .hero-actions .btn-get-quote {
  border: 0;
  background: linear-gradient(180deg, #d32534 0%, #b81524 100%);
  color: #ffffff;
}

body[data-service="home"] .hero-actions .hero-action-whatsapp {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.22);
}

body[data-service="home"] .hero-bottom-cards {
  width: min(1480px, calc(100% - 64px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body[data-service="home"] .hero-bottom-card {
  padding: 18px 24px 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(37, 41, 49, 0.86) 0%, rgba(18, 20, 28, 0.86) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body[data-service="home"] .hero-bottom-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.34);
}

body[data-service="home"] .hero-bottom-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: brightness(0) invert(1);
}

body[data-service="home"] .hero-bottom-card h3 {
  margin: 8px 0 0;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.15;
}

body[data-service="home"] .hero-card-divider {
  display: block;
  width: 100px;
  height: 3px;
  margin: 10px 0 8px;
  border-radius: 999px;
  background: #8ed237;
}

body[data-service="home"] .hero-bottom-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(245, 246, 244, 0.9);
}

@media (max-width: 1100px) {
  body[data-service="home"] .hero-reference-header-content {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  body[data-service="home"] .hero-inline-phone {
    font-size: 26px;
  }

  body[data-service="home"] .header.hero-reference-header nav {
    display: none;
  }

  body[data-service="home"] .header.hero-reference-header .mobile-menu-toggle {
    display: flex !important;
    position: static !important;
    transform: none !important;
    width: 36px;
    height: 30px;
  }

  body[data-service="home"] .mobile-menu {
    top: 96px !important;
  }

  body[data-service="home"] .home-hero-reference {
    min-height: 100vh;
    padding-top: 100px !important;
  }

  body[data-service="home"] .home-hero-content {
    width: calc(100% - 40px);
  }

  body[data-service="home"] .hero-bottom-cards {
    width: calc(100% - 40px);
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  body[data-service="home"] .header.hero-reference-header {
    padding: 14px 10px 0;
  }

  body[data-service="home"] .hero-reference-header-content {
    min-height: 66px;
    padding: 8px 14px;
  }

  body[data-service="home"] .hero-inline-phone {
    display: none;
  }

  body[data-service="home"] .header.hero-reference-header .header-cta-group .btn-primary {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 13px;
  }

  body[data-service="home"] .btn-whatsapp {
    display: none !important;
  }

  body[data-service="home"] .home-hero-reference {
    min-height: 760px;
    padding-top: 124px !important;
    padding-bottom: 28px !important;
  }

  body[data-service="home"] .home-hero-content h1 {
    font-size: clamp(44px, 11vw, 72px) !important;
  }

  body[data-service="home"] .home-hero-content .hero-subtitle {
    font-size: clamp(19px, 5.6vw, 29px) !important;
  }

  body[data-service="home"] .hero-actions {
    flex-wrap: wrap;
    gap: 12px;
  }

  body[data-service="home"] .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  body[data-service="home"] .hero-bottom-card {
    padding: 22px 20px;
  }
}


/* Forever Grass: service-page hero photography */
body[data-service='artificial-grass'] .hero {
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service/33c25302-778e-419e-8a01-2b81828680ac-1-all-11075.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

body[data-service='decking'] .hero {
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service/deck.webp') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

body[data-service='fencing'] .hero {
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service/fence.webp') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* TradeGrow fixes: center last services card + remove double gap */
@media (min-width: 992px) {
  body:is([data-service="home"], [data-service="services"]) .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }

  body:is([data-service="home"], [data-service="services"]) .services-grid .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 620px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

body:is([data-service="home"], [data-service="services"]) .services-section {
  padding-bottom: 0;
}

body:is([data-service="home"], [data-service="services"]) .reviews-section {
  padding-top: var(--service-content-gap);
}

/* About page: make inner spec cards visually equal height to side cards on desktop */
@media (min-width: 1101px) {
  body[data-service="about"] .about-specs-grid {
    align-items: stretch;
  }

  body[data-service="about"] .about-specs-side {
    height: 100%;
  }

  body[data-service="about"] .about-specs-secondary {
    flex: 1;
    display: grid;
    grid-template-rows: 1fr 1fr;
  }

  body[data-service="about"] .about-specs-secondary-item {
    min-height: 0;
    height: 100%;
    justify-content: center;
  }
}


/* ===== INDEX PREVIEW TWEAKS (REQUESTED) ===== */
@media (min-width: 992px) {

  /* Restore visible desktop gap below services cards on index only */
  body[data-service="home"] .services-section {
    padding-bottom: 0 !important;
  }
}

/* Blue "Get a Quote" buttons site-wide */
a.btn.btn-primary[href$="contact.html#contact"],
a.btn.btn-primary[href$="contact.html#contact"]:visited,
a.cta-banner-btn {
  background: #2f7fd3 !important;
  border-color: #2f7fd3 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(47, 127, 211, 0.28) !important;
}

a.btn.btn-primary[href$="contact.html#contact"]:hover,
a.btn.btn-primary[href$="contact.html#contact"]:focus-visible,
a.cta-banner-btn:hover,
a.cta-banner-btn:focus-visible {
  background: #256ab2 !important;
  border-color: #256ab2 !important;
  color: #ffffff !important;
}

/* FAQ page spacing: single gap FAQ->Reviews and single gap Reviews->Footer */
body[data-service='faq'] .faq-section {
  padding-bottom: 0 !important;
}

body[data-service='faq'] .reviews-section {
  padding-top: var(--service-content-gap) !important;
  padding-bottom: var(--service-content-gap) !important;
}

body[data-service='faq'] .footer {
  padding-top: var(--service-content-gap) !important;
}


/* Index why-choose image: prevent stretch and keep natural crop */
body[data-service="home"] .why-choose-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

body[data-service="home"] .why-choose-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gallery hover + button overlay */
.gallery-item:hover img,
.gallery-item:focus-within img {
  transform: scale(1.05);
}

.gallery-item button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
}




/* Blog Listing */
.blog-listing-section {
  padding: var(--section-pad-y) var(--section-pad-x);
}

.blog-listing-section .container {
  max-width: 1100px;
  margin: 0 auto;
}

.featured-post {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 60px;
  cursor: pointer;
}

.featured-post-image {
  height: 400px;
  overflow: hidden;
}

.featured-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.featured-post:hover .featured-post-image img {
  transform: scale(1.05);
}

.featured-post-content {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  color: var(--text-on-dark);
}

.featured-label {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-dark-base);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
}

.featured-post-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.3;
}

.featured-post-excerpt {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted-on-dark);
}

.featured-post-meta {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--muted-on-dark);
}

.featured-post-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-accent);
  color: var(--color-dark-base);
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  width: fit-content;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.featured-post-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.featured-post-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--color-dark-base);
}

.blog-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 60px;
}

.blog-card {
  display: grid;
  grid-template-columns: 350px 1fr;
  gap: 32px;
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.blog-card-image {
  position: relative;
  height: 240px;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-accent);
  color: var(--color-dark-base);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.blog-card-content {
  padding: 32px 32px 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.blog-card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

.blog-card-excerpt {
  font-size: 15px;
  color: var(--color-secondary);
  line-height: 1.7;
}

.blog-card-meta {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: var(--color-secondary);
}

.blog-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.2s ease;
}

.blog-card-btn:hover {
  transform: translateX(4px);
}

.blog-card-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--color-accent);
}

/* Blog Article */
.article-hero {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%);
  min-height: 480px;
  display: flex;
  align-items: center;
  padding: 180px 50px 80px;
  position: relative;
}

.article-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.article-breadcrumb {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  left: auto;
  transform: none;
}

.article-breadcrumb a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.3s ease;
}

.article-breadcrumb a:hover {
  color: var(--color-accent);
}

.article-breadcrumb span {
  color: rgba(255, 255, 255, 0.6);
}

.article-hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--white, #ffffff);
  line-height: 1.2;
  margin-bottom: 20px;
}

.article-meta {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted-on-dark);
}

.article-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.article-meta-item svg {
  width: 16px;
  height: 16px;
  fill: var(--color-accent);
}

@media (max-width: 600px) {
  .article-hero {
    padding: 150px 20px 80px;
    min-height: auto;
  }
}

.article-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px var(--section-pad-x) 48px;
}

@media (max-width: 1024px) {
  .article-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.toc-sidebar {
  align-self: start;
}

.toc-card {
  position: sticky;
  top: 160px;
  background: var(--color-light-base);
  border-radius: 16px;
  padding: 24px;
}

.toc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

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

.toc-list li {
  margin-bottom: 12px;
}

.toc-list a {
  font-size: 14px;
  color: var(--color-secondary);
  text-decoration: none;
  transition: all 0.3s ease;
  display: block;
  padding-left: 16px;
  border-left: 2px solid transparent;
}

.toc-list a:hover,
.toc-list a.active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
}

@media (max-width: 1024px) {
  .toc-sidebar {
    order: -1;
  }

  .toc-card {
    position: static;
    padding: 18px;
  }
}

.article-content {
  max-width: 720px;
  min-width: 0;
  overflow: hidden;
}

.article-hero-image {
  width: 100%;
  max-width: 100%;
  display: block;
  border-radius: 12px;
  margin-bottom: 40px;
}

.article-content h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 48px 0 20px;
}

.article-content h2:first-child {
  margin-top: 0;
}

.article-content h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 32px 0 16px;
}

.article-content p {
  font-size: 17px;
  color: var(--text-on-light);
  line-height: 1.8;
  margin-bottom: 20px;
}

.article-content ul,
.article-content ol {
  margin: 20px 0 20px 24px;
}

.article-content li {
  font-size: 17px;
  color: var(--text-on-light);
  line-height: 1.8;
  margin-bottom: 12px;
}

.article-content blockquote {
  background: var(--color-light-base);
  border-left: 4px solid var(--color-accent);
  padding: 24px 32px;
  margin: 32px 0;
  border-radius: 0 12px 12px 0;
}

.article-content blockquote p {
  font-size: 18px;
  font-style: italic;
  color: var(--color-primary);
  margin: 0;
}

.mid-article-cta {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
  margin: 48px 0;
}

.mid-article-cta h3 {
  font-size: 24px;
  color: var(--white, #ffffff);
  margin-bottom: 12px;
}

.mid-article-cta p {
  font-size: 16px;
  color: var(--muted-on-dark);
  margin-bottom: 24px;
}

.mid-article-cta .btn-primary {
  padding: 14px 32px;
}

/* Related Articles */
.related-articles {
  background: var(--color-light-base);
  padding: var(--section-pad-y) var(--section-pad-x);
}

.related-articles .container {
  max-width: 1200px;
  margin: 0 auto;
}

.related-articles h2 {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 48px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

.related-card {
  background: var(--white, #ffffff);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.related-card-image {
  height: 180px;
  overflow: hidden;
}

.related-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.related-card:hover .related-card-image img {
  transform: scale(1.05);
}

.related-card-content {
  padding: 24px;
}

.related-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 12px;
  line-height: 1.4;
}

.related-card-excerpt {
  font-size: 14px;
  color: var(--color-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
}

.related-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.related-card-link:hover {
  color: var(--btn-primary-hover);
  transform: translateX(4px);
}

.related-card-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* CTA Section */
.cta-section {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%);
  padding: 80px var(--section-pad-x);
  text-align: center;
}

.cta-section h2 {
  font-size: clamp(28px, 4vw, 40px);
  color: var(--white, #ffffff);
  margin-bottom: 16px;
}

.cta-section p {
  font-size: 18px;
  color: var(--muted-on-dark);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-section .btn-primary {
  padding: 16px 40px;
  font-size: 16px;
}

/* Blog Filter Bar */
.filter-btn {
  padding: 12px 24px;
  border: 2px solid var(--color-secondary);
  background: transparent;
  color: var(--color-primary);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--btn-primary-text);
}

/* Projects Listing */
.projects-listing-section {
  padding: var(--section-pad-y) var(--section-pad-x);
}

.projects-listing-section .container {
  max-width: 1100px;
  margin: 0 auto;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 48px;
}

.project-filter-btn {
  padding: 12px 24px;
  border: 2px solid var(--color-secondary);
  border-radius: 50px;
  background: transparent;
  color: var(--color-secondary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.project-filter-btn.active,
.project-filter-btn:hover {
  background: var(--color-accent);
  color: var(--color-dark-base);
  border-color: var(--color-accent);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}

.project-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.project-card-image {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-card:hover .project-card-image img {
  transform: scale(1.05);
}

.project-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-accent);
  color: var(--color-dark-base);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.project-card-content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}

.project-card-description {
  font-size: 15px;
  color: var(--color-secondary);
  line-height: 1.7;
}

.project-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.2s ease;
}

.project-card-btn:hover {
  transform: translateX(4px);
}

.project-card-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--color-accent);
}

/* Individual Project Page */
.project-hero {
  background: linear-gradient(135deg, rgba(22, 27, 18, 0.72), rgba(102, 167, 16, 0.62)), url('../pictures/service/33c25302-778e-419e-8a01-2b81828680ac-1-all-10988.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px var(--section-pad-x) 60px;
  color: var(--text-on-dark);
}

.project-hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.project-category {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-dark-base);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.project-hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}

.project-hero-subtitle {
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted-on-dark);
}

.quick-facts {
  background: var(--color-light-base);
  padding: 32px var(--section-pad-x);
}

.quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.quick-fact-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-secondary);
  margin-bottom: 8px;
}

.quick-fact-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary);
}

.project-content {
  padding: var(--section-pad-y) var(--section-pad-x);
}

.project-content .container {
  max-width: 900px;
  margin: 0 auto;
}

.content-section h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 32px 0 16px;
}

.content-section h2:first-child {
  margin-top: 0;
}

.content-section p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-secondary);
  margin-bottom: 20px;
}

/* Responsive: Blog & Project */
@media (max-width: 900px) {
  .featured-post {
    grid-template-columns: 1fr;
  }

  .featured-post-image {
    height: 250px;
  }

  .featured-post-content {
    padding: 32px;
  }

  .blog-card {
    grid-template-columns: 1fr;
  }

  .blog-card-image {
    height: 200px;
  }

  .blog-card-content {
    padding: 24px;
  }

  .quick-facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .article-content blockquote {
    padding: 20px 24px;
  }

  .mid-article-cta {
    padding: 32px 20px;
  }
}

@media (max-width: 600px) {
  .quick-facts-grid {
    grid-template-columns: 1fr;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    gap: 8px;
  }

  .project-filter-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .filter-btn {
    padding: 10px 18px;
    font-size: 13px;
  }
}



/* ===== BLOG ARTICLE LAYOUT HOTFIX ===== */
body[data-service="blogs"] main.article-layout#main-content {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: 60px !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--service-content-gap, 80px) var(--section-pad-x) var(--service-content-gap, 80px);
  align-items: stretch;
}


body[data-service="blogs"] .toc-sidebar {
  align-self: stretch;
}

body[data-service="blogs"] .toc-card {
  position: sticky;
  top: 160px;
}

body[data-service="blogs"] main.article-layout#main-content>* {
  min-width: 0;
}

body[data-service="blogs"] .article-content {
  max-width: 100%;
  overflow: visible;
}

body[data-service="blogs"] .article-hero-image {
  margin-top: 0;
  margin-bottom: var(--service-content-gap, 80px);
}

@media (max-width: 1024px) {
  body[data-service="blogs"] main.article-layout#main-content {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}


/* ===== PROJECTS PAGE OVERRIDES ===== */
body[data-service="projects"] .projects-listing-section {
  padding: var(--service-content-gap, 80px) var(--section-pad-x) var(--service-content-gap, 80px);
  background: var(--white);
}

body[data-service="projects"] .projects-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

body[data-service="projects"] .project-card {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 32px;
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

body[data-service="projects"] .project-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

body[data-service="projects"] .project-card-image {
  height: 280px;
}

body[data-service="projects"] .project-card-content {
  padding: 32px 32px 32px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

body[data-service="projects"] .project-card-title {
  font-size: 24px;
}

body[data-service="projects"] .project-card-description {
  font-size: 16px;
  margin-bottom: 12px;
}

body[data-service="projects"] .project-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--color-accent);
  color: var(--color-dark-base);
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  width: fit-content;
}

body[data-service="projects"] .project-card-btn:hover {
  background: var(--btn-primary-hover);
  transform: translateX(4px);
}

body[data-service="projects"] .project-card-btn svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Project detail quick facts separators */
body[data-service="projects"] .quick-fact {
  position: relative;
  padding: 12px 16px;
}

body[data-service="projects"] .quick-fact:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 18%;
  width: 2px;
  height: 64%;
  background: rgba(102, 167, 16, 0.72);
}

/* Extra gap under project gallery */
body[data-service="projects"] .project-content .gallery-section {
  margin-bottom: var(--service-content-gap, 80px);
}

@media (max-width: 900px) {
  body[data-service="projects"] .project-card {
    grid-template-columns: 1fr;
    gap: 0;
  }

  body[data-service="projects"] .project-card-content {
    padding: 24px;
  }

  body[data-service="projects"] .project-card-image {
    height: 220px;
  }
}

@media (max-width: 768px) {
  body[data-service="projects"] .quick-facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body[data-service="projects"] .quick-fact:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 600px) {
  body[data-service="projects"] .quick-facts-grid {
    grid-template-columns: 1fr;
  }
}


/* Project hero layout polish */
body[data-service="projects"] .project-hero {
  padding-top: 170px;
  padding-bottom: 72px;
}

body[data-service="projects"] .project-hero-content {
  max-width: 900px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

body[data-service="projects"] .project-hero .article-breadcrumb {
  justify-content: center;
  margin-bottom: 18px;
}

body[data-service="projects"] .project-hero h1 {
  margin-bottom: 12px;
}

body[data-service="projects"] .project-hero-subtitle {
  max-width: 760px;
  margin: 0 auto;
}

body[data-service="projects"] .project-hero-subtitle {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

body[data-service="projects"] .desktop-cta-banner-container {
  padding-top: 0;
  padding-bottom: var(--service-content-gap, 80px);
}

body[data-service="projects"] .reviews-section {
  padding-top: 0;
}

@media (max-width: 767px) {
  body[data-service="projects"] .project-hero {
    padding-top: 148px;
  }
}

/* Global header responsive overlap fix (match index behavior on all pages) */
@media (max-width: 1199px) {
  .header .header-cta-group .btn-primary {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .header .mobile-menu-toggle {
    display: flex !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

@media (max-width: 767px) {
  .header .mobile-menu-toggle {
    left: auto !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

body[data-service="about"] .about-specs-secondary-item:last-child .about-specs-secondary-value {
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  word-break: break-word;
}

body[data-service="projects"] .footer .footer-top {
  margin-bottom: var(--service-content-gap, 80px);
}



/* FAQ filter active text contrast fix */
.faq-filters .filter-btn:hover,
.faq-filters .filter-btn.active,
.faq-filters .filter-btn:focus-visible,
.faq-filters .filter-btn:active {
  color: #ffffff !important;
}


/* Specs card text alignment handled in section-specific rules */
.about-specs-main-value,
.about-specs-secondary-value {
  text-align: inherit;
}


/* About page: keep section title in left column like service layout */
body[data-service='about'] .about-service-description .about-service-content .section-title {
  text-align: left;
}


/* Mobile: center 'Key project/company details' heading */
@media (max-width: 1100px) {
  .mobile-why-choose-title {
    text-align: center;
    width: 100%;
  }
}




/* Hero subtitle contrast: projects + blogs */
body[data-service='projects'] .project-hero-subtitle,
body[data-service='projects'] .hero-subtitle,
body[data-service='blogs'] .hero-subtitle,
body[data-service='blogs'] .article-hero-subtitle {
  color: #ffffff;
}


/* Blog article spacing + TOC stop alignment fix */
body[data-service='blogs'] main.article-layout#main-content {
  padding-bottom: 0 !important;
}

body[data-service='blogs'] .article-content .mid-article-cta {
  margin-bottom: 0;
}


/* CTA card subtitle contrast for blogs and projects */
body[data-service='blogs'] .mid-article-cta p,
body[data-service='blogs'] .cta-section p,
body[data-service='projects'] .desktop-cta-banner p,
body[data-service='projects'] .cta-section p {
  color: #ffffff !important;
}


/* Blog related section spacing: white gap before grey, then one gap before title */
body[data-service='blogs'] .related-articles {
  margin-top: var(--service-content-gap, 80px);
  padding-top: var(--service-content-gap, 80px);
}


body[data-service='new-boiler-installations'] .hero {
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/newsection.webp') !important;
}


/* Home hero cards: mirror index_template layout in new architecture */
body:is([data-service='home'], [data-service='services']) .hero-service-links {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 1.2vw, 16px);
  width: 100%;
  max-width: 960px;
  margin: 26px auto 18px;
}

body:is([data-service='home'], [data-service='services']) .hero-service-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 1vw, 16px);
  padding: clamp(12px, 1.2vw, 18px) clamp(14px, 1.4vw, 22px);
  border-radius: 18px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: left;
  width: auto;
  height: auto;
  min-width: 0;
  border: 0;
  box-shadow: 0 16px 36px rgba(13, 27, 42, 0.12);
  transition: all 0.3s ease;
}

body:is([data-service='home'], [data-service='services']) .hero-service-link:hover,
body:is([data-service='home'], [data-service='services']) .hero-service-link:focus-visible {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

body:is([data-service='home'], [data-service='services']) .hero-service-icon {
  width: clamp(48px, 4.5vw, 64px);
  height: clamp(48px, 4.5vw, 64px);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
}

body:is([data-service='home'], [data-service='services']) .hero-service-link .hero-service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.3s ease;
}

body:is([data-service='home'], [data-service='services']) .hero-service-text {
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 1px;
  letter-spacing: 0.8px;
  text-align: left;
  align-items: flex-start;
  transition: color 0.3s ease;
}

body:is([data-service='home'], [data-service='services']) .hero-service-text span {
  display: block;
}

body:is([data-service='home'], [data-service='services']) .hero-service-link:hover .hero-service-icon,
body:is([data-service='home'], [data-service='services']) .hero-service-link:focus-visible .hero-service-icon {
  background: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  transform: scale(1.08);
}

body:is([data-service='home'], [data-service='services']) .hero-service-link:hover .hero-service-icon img,
body:is([data-service='home'], [data-service='services']) .hero-service-link:focus-visible .hero-service-icon img {
  filter: brightness(0) invert(1);
}

body:is([data-service='home'], [data-service='services']) .hero-service-link:hover .hero-service-text,
body:is([data-service='home'], [data-service='services']) .hero-service-link:focus-visible .hero-service-text {
  color: var(--color-primary);
}

body:is([data-service='home'], [data-service='services']) .hero-service-link--install {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%) !important;
  color: var(--text-on-dark);
}

body:is([data-service='home'], [data-service='services']) .hero-service-link--repairs {
  background: linear-gradient(155deg, var(--color-highlight) 0%, var(--color-secondary) 100%) !important;
  color: var(--text-on-dark);
  box-shadow: 0 16px 36px rgba(14, 25, 36, 0.2), inset 0 0 0 1px rgba(246, 244, 240, 0.22);
}

body:is([data-service='home'], [data-service='services']) .hero-service-link--aircon {
  background: linear-gradient(155deg, var(--color-accent) 0%, var(--color-secondary) 100%) !important;
  color: var(--text-on-dark);
}

body:is([data-service='home'], [data-service='services']) .hero-service-link--bathrooms {
  background: linear-gradient(155deg, color-mix(in srgb, var(--color-light-base) 78%, var(--color-highlight) 22%) 0%, var(--color-light-base) 100%) !important;
  color: var(--text-on-light);
}

body:is([data-service='home'], [data-service='services']) .hero-service-link--aircon .hero-service-icon,
body:is([data-service='home'], [data-service='services']) .hero-service-link--bathrooms .hero-service-icon {
  background: var(--color-dark-base);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

body:is([data-service='home'], [data-service='services']) .hero-service-link--install:hover,
body:is([data-service='home'], [data-service='services']) .hero-service-link--install:focus-visible,
body:is([data-service='home'], [data-service='services']) .hero-service-link--repairs:hover,
body:is([data-service='home'], [data-service='services']) .hero-service-link--repairs:focus-visible,
body:is([data-service='home'], [data-service='services']) .hero-service-link--aircon:hover,
body:is([data-service='home'], [data-service='services']) .hero-service-link--aircon:focus-visible {
  background: var(--color-light-base) !important;
  color: var(--color-primary);
}

body:is([data-service='home'], [data-service='services']) .hero-service-link--bathrooms:hover,
body:is([data-service='home'], [data-service='services']) .hero-service-link--bathrooms:focus-visible {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%) !important;
  color: var(--text-on-dark);
}

body:is([data-service='home'], [data-service='services']) .hero-service-link--bathrooms:hover .hero-service-text,
body:is([data-service='home'], [data-service='services']) .hero-service-link--bathrooms:focus-visible .hero-service-text {
  color: #ffffff !important;
}

body:is([data-service='home'], [data-service='services']) .hero-service-link.active {
  border: 0 !important;
  box-shadow:
    0 22px 48px rgba(14, 25, 36, 0.35),
    0 0 0 4px rgba(255, 0, 0, 0.95),
    0 0 20px rgba(75, 107, 135, 0.35) !important;
  transform: none !important;
}

body:is([data-service='home'], [data-service='services']) .hero-service-link--bathrooms.active {
  box-shadow:
    0 22px 48px rgba(14, 25, 36, 0.35),
    0 0 0 5px rgba(255, 0, 0, 0.98),
    0 0 32px rgba(255, 0, 0, 0.5) !important;
}

body:is([data-service='home'], [data-service='services']) .hero .btn-primary {
  margin-top: 8px;
}

@media (min-width: 1270px) {
  body:is([data-service='home'], [data-service='services']) .hero-service-links {
    max-width: 960px;
  }

  body:is([data-service='home'], [data-service='services']) .hero-service-link {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

@media (min-width: 1024px) and (max-width: 1269px) {
  body:is([data-service='home'], [data-service='services']) .hero-service-links {
    max-width: 860px;
  }

  body:is([data-service='home'], [data-service='services']) .hero-service-link {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body:is([data-service='home'], [data-service='services']) .hero-service-links {
    max-width: 700px;
  }

  body:is([data-service='home'], [data-service='services']) .hero-service-link {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 767px) {
  body:is([data-service='home'], [data-service='services']) .hero-service-links {
    max-width: min(360px, 100%);
    gap: 12px;
    margin-top: 18px;
  }

  body:is([data-service='home'], [data-service='services']) .hero-service-link {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 12px 14px;
  }

  body:is([data-service='home'], [data-service='services']) .hero-service-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }

  body:is([data-service='home'], [data-service='services']) .hero-service-text {
    font-size: 13px;
    line-height: 1.25;
  }
}

/* Home services grid: enforce 2x2 desktop layout and stable spacing */
@media (min-width: 992px) {
  body[data-service="home"] .services-section {
    padding-top: var(--inter-section-gap) !important;
    padding-bottom: var(--inter-section-gap) !important;
  }

  body[data-service="home"] .services-container {
    gap: clamp(32px, 4vw, 56px);
  }

  body[data-service="home"] .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
    margin-top: 0;
    margin-bottom: 0;
  }

  body[data-service="home"] .services-grid .service-card,
  body[data-service="home"] .services-grid .service-card.service-card--center {
    grid-column: auto !important;
    width: 100% !important;
    justify-self: stretch;
    margin: 0;
  }

  body:is([data-service="home"], [data-service="services"]) .services-grid .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    max-width: 620px;
    width: 100% !important;
    justify-self: center !important;
    margin-left: auto;
    margin-right: auto;
  }
}



/* Desktop fix: keep Services section pure white on home/services */
@media (min-width: 992px) {

  body:is([data-service="home"], [data-service="services"]) .services-section,
  body:is([data-service="home"], [data-service="services"]) .services-container,
  body:is([data-service="home"], [data-service="services"]) .services-grid {
    background: #ffffff !important;
    background-image: none !important;
  }

  body:is([data-service="home"], [data-service="services"]) .services-section {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
}


/* Header CTA breakpoint tuning: call+WA >=1200, +quote >=1490, tablet <1200 */
@media (min-width: 1200px) {
  .header .header-cta-group {
    display: flex !important;
  }

  .header .header-cta-group .cta-pill.call,
  .header .header-cta-group .cta-pill.whatsapp {
    display: inline-flex !important;
  }

  .header .header-cta-group .btn-primary {
    display: none !important;
  }
}
@media (min-width: 1490px) {
  .header .header-cta-group .btn-primary {
    display: inline-flex !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .header .header-cta-group {
    display: flex !important;
  }

  .header .header-cta-group .btn-primary {
    display: none !important;
  }

  .header .header-cta-group .cta-pill.call,
  .header .header-cta-group .cta-pill.whatsapp {
    display: inline-flex !important;
  }
}

/* Unified hero service card styling across all main hero pages */
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-links {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 20px);
  width: 100%;
  max-width: 980px;
  margin: 26px auto 18px;
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  min-height: 112px;
  padding: 14px 18px;
  border-radius: 18px;
  text-decoration: none;
  text-align: left;
  box-shadow: 0 16px 36px rgba(13, 20, 26, 0.2);
  flex: 1 1 calc(50% - 10px);
  max-width: calc(50% - 10px);
  min-width: 0;
  border: 0;
  position: relative;
  overflow: hidden;
  height: auto !important;
  max-height: none !important;
  transition: all 0.3s ease;
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link:hover,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link:focus-visible {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-icon {
  width: clamp(48px, 4.5vw, 64px);
  height: clamp(48px, 4.5vw, 64px);
  flex-shrink: 0;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link .hero-service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.3s ease;
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-text {
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-text span {
  display: block;
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link:hover .hero-service-icon,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link:focus-visible .hero-service-icon {
  background: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  transform: scale(1.08);
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link:hover .hero-service-icon img,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link:focus-visible .hero-service-icon img {
  filter: brightness(0) invert(1);
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link:hover .hero-service-text,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link:focus-visible .hero-service-text {
  color: var(--color-primary);
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--install {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%) !important;
  color: var(--text-on-dark);
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--repairs {
  background: linear-gradient(155deg, var(--color-highlight) 0%, var(--color-secondary) 100%) !important;
  color: var(--text-on-dark);
  box-shadow: 0 16px 36px rgba(14, 25, 36, 0.2), inset 0 0 0 1px rgba(246, 244, 240, 0.22);
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--aircon {
  background: linear-gradient(155deg, var(--color-accent) 0%, var(--color-secondary) 100%) !important;
  color: var(--text-on-dark);
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--bathrooms {
  background: linear-gradient(155deg, color-mix(in srgb, var(--color-light-base) 78%, var(--color-highlight) 22%) 0%, var(--color-light-base) 100%) !important;
  color: var(--text-on-light);
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--aircon .hero-service-icon,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--bathrooms .hero-service-icon {
  background: var(--color-dark-base);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--install:hover,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--install:focus-visible,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--repairs:hover,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--repairs:focus-visible,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--aircon:hover,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--aircon:focus-visible {
  background: var(--color-light-base) !important;
  color: var(--color-primary);
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--bathrooms:hover,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--bathrooms:focus-visible {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%) !important;
  color: var(--text-on-dark);
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--bathrooms:hover .hero-service-text,
body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--bathrooms:focus-visible .hero-service-text {
  color: #ffffff !important;
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link.active {
  border: 0 !important;
  box-shadow:
    0 22px 48px rgba(14, 25, 36, 0.35),
    0 0 0 4px rgba(255, 0, 0, 0.95),
    0 0 20px rgba(75, 107, 135, 0.35) !important;
  transform: none !important;
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link--bathrooms.active {
  box-shadow:
    0 22px 48px rgba(14, 25, 36, 0.35),
    0 0 0 5px rgba(255, 0, 0, 0.98),
    0 0 32px rgba(255, 0, 0, 0.5) !important;
}

body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero .btn-primary {
  margin-top: 8px;
}

@media (min-width: 1270px) {
  body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-links {
    max-width: 960px;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

@media (min-width: 1024px) and (max-width: 1269px) {
  body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-links {
    max-width: 860px;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-links {
    max-width: 700px;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}

@media (max-width: 767px) {
  body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-links {
    max-width: min(360px, 100%);
    gap: 12px;
    margin-top: 18px;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-link {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 12px 14px;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='testimonials'], [data-service='new-boiler-installations'], [data-service='boiler-repairs'], [data-service='gas-safety-inspections'], [data-service='plumbing']) .hero-service-text {
    font-size: 13px;
    line-height: 1.25;
  }
}

/* Fix hero card text alignment on contact, faq, about pages to match services page */
body:is([data-service='contact'], [data-service='faq'], [data-service='about']) .hero-service-text {
  text-align: left;
  align-items: flex-start;
}

body:is([data-service='contact'], [data-service='faq'], [data-service='about']) .hero-service-link {
  align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 1.2vw, 16px);
}

/* Hero cards: larger layout + SVG icon sizing */
body[data-service] .hero-service-links {
  width: 100%;
  max-width: min(1080px, 92vw);
  margin-left: auto;
  margin-right: auto;
  gap: clamp(14px, 1.5vw, 22px);
  align-self: stretch;
}

body[data-service] .hero-service-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: clamp(12px, 1.3vw, 18px);
  width: 100%;
  min-height: clamp(118px, 10vw, 142px);
  height: auto;
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 2vw, 28px);
  border-radius: 24px;
  flex: 1 1 calc(50% - 12px);
  max-width: calc(50% - 12px);
}

body[data-service] .hero-service-icon {
  width: clamp(88px, 6.4vw, 120px);
  height: clamp(88px, 6.4vw, 120px);
  flex: 0 0 clamp(88px, 6.4vw, 120px);
  border-radius: 18px;
}

body[data-service] .hero-service-icon img {
  width: clamp(74px, 5.4vw, 108px);
  height: clamp(74px, 5.4vw, 108px);
  object-fit: contain;
  object-position: center;
}

/* Keep these service icons contained within the hero icon square */
body[data-service] .hero-service-icon img[src$='service1.svg'],
body[data-service] .hero-service-icon img[src$='service2.svg'] {
  width: clamp(66px, 4.8vw, 92px);
  height: clamp(66px, 4.8vw, 92px);
}

body[data-service] .hero-service-text {
  text-align: left;
  align-items: flex-start;
  font-size: clamp(17px, 1.65vw, 21px);
  line-height: 1.25;
}

/* Keep active hero cards aligned in-flow so mobile gaps remain consistent */
body[data-service] .hero-service-link.active {
  transform: none !important;
}

@media (max-width: 767px) {
  body[data-service] .hero-service-links {
    max-width: min(390px, 100%);
    gap: 12px;
  }

  body[data-service] .hero-service-link {
    flex: 1 1 100%;
    max-width: 100%;
    min-height: 104px;
    padding: 14px 16px;
    gap: 12px;
  }

  body[data-service] .hero-service-icon {
    width: 70px;
    height: 70px;
    flex-basis: 70px;
    border-radius: 14px;
  }

  body[data-service] .hero-service-icon img {
    width: 62px;
    height: 62px;
  }

  body[data-service] .hero-service-icon img[src$='service1.svg'],
  body[data-service] .hero-service-icon img[src$='service2.svg'] {
    width: 54px;
    height: 54px;
  }

  body[data-service] .hero-service-text {
    font-size: 14px;
    line-height: 1.2;
  }
}


/* Home reviewability widget spacing fix (remove extra space under widget) */
body[data-service='home'] .reviews-container [data-bid='141665'] {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

body[data-service='home'] .reviews-container [data-bid='141665'] .revwid-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body[data-service='home'] .reviews-container [data-bid='141665'] iframe {
  display: block;
  margin: 0 !important;
  vertical-align: top;
}

body[data-service='home'] .reviews-container [data-bid='141665'] .revwid-powered-by-text,
body[data-service='home'] .reviews-container [data-bid='141665'] p.revwid-powered-by-text {
  margin-bottom: 0 !important;
}


/* ===== FAQ PAGE REVIEWS + DESKTOP HEADER FIT ===== */
body[data-service='faq'] .faq-page-reviews {
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 1200px) {
  .header .header-content {
    justify-content: center;
  }

  .header nav {
    left: 50%;
    transform: translateX(-50%);
  }

  .header .nav-menu {
    justify-content: center;
    gap: 16px;
  }
}

@media (min-width: 1200px) and (max-width: 1489px) {
  .header .header-cta-group .btn-primary {
    display: none !important;
  }
}

@media (min-width: 1490px) {
  .header .header-cta-group .btn-primary {
    display: inline-flex !important;
  }
}

/* Contact cards alignment tweak */
body[data-service='contact'] .contact-main-card {
  align-items: center;
}

body[data-service='contact'] .contact-main-card>p:first-of-type {
  min-height: 1.6em;
  text-align: center;
  white-space: nowrap;
}

body[data-service='contact'] .contact-main-card .contact-main-meta {
  display: none;
}


/* Back-to-home button text color */
.utility-actions a.btn.btn-primary,
.utility-actions a.btn.btn-primary:visited,
.utility-actions a.btn.btn-primary:hover,
.utility-actions a.btn.btn-primary:focus-visible {
  color: #ffffff !important;
}


/* ===== Quote/Button Contrast + Width Fixes (Mar 2026) ===== */
@media (min-width: 768px) {

  body:is([data-service='home'], [data-service='services']) .booking-cta .btn,
  body:is([data-service='home'], [data-service='services']) .booking-cta a.btn.btn-primary {
    width: 215px !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ensure CTA banner button text stays readable on hover */
a.cta-banner-btn:hover,
a.cta-banner-btn:focus-visible {
  color: #0b1320 !important;
}

/* Home desktop: match booking quote button width to Google/Facebook pills */
@media (min-width: 992px) {

  body[data-service='home'] .booking-ratings .rating-pill {
    width: 215px !important;
    justify-content: center;
    text-align: center;
  }
}

/* Mobile: center main-content bullet lists and keep bullets away from screen edge */
@media (max-width: 767px) {
  main ul:not(.booking-list):not(.nav-menu):not(.services-submenu):not(.social-links) {
    max-width: min(620px, calc(100% - 40px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.35rem;
    padding-right: 0.5rem;
  }

  main ul:not(.booking-list):not(.nav-menu):not(.services-submenu):not(.social-links) li {
    text-align: left;
  }
}

/* Home desktop: requested update - double booking quote button width */
@media (min-width: 992px) {

  body[data-service='home'] .booking-cta .btn,
  body[data-service='home'] .booking-cta a.btn.btn-primary {
    width: 430px !important;
    max-width: 100%;
  }
}

/* Home desktop: center quote CTA above the two rating pills */
@media (min-width: 992px) {
  body[data-service='home'] .booking-cta {
    justify-content: center;
    width: 100%;
  }

  body[data-service='home'] .booking-ratings {
    justify-content: center;
    width: 100%;
  }
}

/* Home desktop: align booking CTA and rating pills to the left */
@media (min-width: 992px) {
  body[data-service='home'] .booking-cta {
    justify-content: flex-start;
    width: 100%;
  }

  body[data-service='home'] .booking-ratings {
    justify-content: flex-start;
    width: 100%;
  }

  body[data-service='home'] .booking-cta .btn,
  body[data-service='home'] .booking-cta a.btn.btn-primary {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Why-choose image: remove 4:3 crop, show more of Kevin's body */
body[data-service="home"] .why-choose-image {
  aspect-ratio: unset !important;
  overflow: hidden;
  max-width: none !important;
}

body[data-service="home"] .why-choose-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30% !important;
}

/* Why-choose image: constrain to text height, keep natural proportions */
body[data-service="home"] .why-choose-container {
  align-items: start !important;
}

body[data-service="home"] .why-choose-image {
  align-self: start !important;
  max-width: 420px !important;
}

body[data-service="home"] .why-choose-image img {
  height: auto !important;
  width: 100%;
  object-fit: contain !important;
  object-position: center top !important;
}

/* Cap why-choose image height to text container */
body[data-service="home"] .why-choose-image img {
  max-height: 480px !important;
  border-radius: 12px;
}

/* CTA Banner: reduce text size on desktop */
.desktop-cta-banner h3,
.desktop-cta-banner .cta-banner-content h3 {
  font-size: 16px !important;
  white-space: nowrap;
}

/* CTA Banner: show on mobile with smaller text */
@media (max-width: 768px) {
  .desktop-cta-banner-container {
    display: block !important;
  }

  .desktop-cta-banner h3,
  .desktop-cta-banner .cta-banner-content h3 {
    font-size: 14px !important;
  }

  .cta-banner-btn {
    font-size: 13px !important;
    padding: 8px 16px !important;
  }
}

/* Fix: ensure inner CTA banner is also visible on mobile */
@media (max-width: 768px) {
  .desktop-cta-banner {
    display: flex !important;
  }
}

/* Why-choose image: no border */
body[data-service="home"] .why-choose-image img {
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Make header logo bigger */
.header .logo img {
  max-height: 80px !important;
  width: auto !important;
}

/* Force header logo bigger on desktop */
.header .logo,
.header .logo a {
  max-width: 220px !important;
  width: 220px !important;
  max-height: none !important;
}

.header .logo img {
  max-width: 220px !important;
  max-height: 120px !important;
  width: 220px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Mobile fixes: reviews heading + spacing symmetry + CTA centering */
body[data-service='home'] .facebook-reviews-header {
  width: 100%;
  text-align: center;
  margin-bottom: 24px;
}

body[data-service='home'] .facebook-reviews-header .rating-summary h2 {
  margin: 0;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.2;
  color: var(--ink-dark);
}

@media (max-width: 767px) {
  body[data-service='home'] .services-section {
    padding-top: 24px !important;
    padding-bottom: 0 !important;
  }

  body[data-service='home'] .services-container {
    gap: 24px;
  }

  body[data-service='home'] .services-grid .service-card {
    padding-left: 12px;
    padding-right: 24px;
  }

  body[data-service='home'] .services-grid .service-content {
    padding: 24px 8px 0;
  }

  body[data-service='home'] .booking-section {
    margin-top: 24px !important;
    padding-top: var(--mobile-section-spacing) !important;
    padding-bottom: var(--mobile-section-spacing) !important;
  }

  body[data-service='home'] .mobile-fallback-btn {
    margin: var(--mobile-section-spacing) auto 0 !important;
  }

  body[data-service='home'] .desktop-cta-banner-container {
    padding-top: var(--mobile-section-spacing) !important;
  }

  body[data-service='home'] .why-choose {
    padding-top: var(--mobile-section-spacing) !important;
  }

  body[data-service='home'] .why-choose-container {
    padding-top: var(--mobile-section-spacing) !important;
    padding-bottom: var(--mobile-section-spacing) !important;
  }

  body[data-service='home'] .faq-section {
    padding-top: var(--mobile-section-spacing) !important;
    padding-bottom: var(--mobile-section-spacing) !important;
  }

  body[data-service='home'] .faq-container {
    gap: 32px;
  }

  body[data-service='home'] .desktop-cta-banner .cta-banner-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    width: 100%;
  }

  body[data-service='home'] .desktop-cta-banner h3,
  body[data-service='home'] .desktop-cta-banner .cta-banner-content h3 {
    text-align: center !important;
    width: 100%;
  }

  body[data-service='home'] .desktop-cta-banner .cta-banner-btn {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Header logo fit: use logo.jpg and keep left alignment stable */
.header .logo {
  left: 20px !important;
  right: auto !important;
  width: auto !important;
  max-width: none !important;
}

.header .logo a {
  display: flex !important;
  align-items: center;
  width: clamp(136px, 15vw, 220px) !important;
  max-width: 220px !important;
  height: auto !important;
}

.header .logo img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

@media (max-width: 1100px) {
  .header .logo {
    left: 16px !important;
  }

  .header .logo a {
    width: 132px !important;
    max-width: 132px !important;
  }

  .header .mobile-menu-toggle {
    left: auto !important;
    right: 16px !important;
  }
}

/* Final header/logo sizing pass (desktop + tablet) */
@media (min-width: 1200px) {
  .header .logo {
    left: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .header .logo a {
    width: clamp(270px, 22vw, 360px) !important;
    max-width: 360px !important;
  }

  .header .logo img {
    width: 100% !important;
    height: auto !important;
  }

  .header.scrolled .logo {
    transform: translateY(-50%) !important;
  }

  .header.scrolled .logo a {
    width: clamp(230px, 19vw, 320px) !important;
    max-width: 320px !important;
  }
}

@media (max-width: 1199px) {
  .header .logo {
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .header .logo a {
    width: 160px !important;
    max-width: 160px !important;
  }

  .header .mobile-menu-toggle {
    right: 14px !important;
  }
}

@media (max-width: 767px) {
  .header .logo a {
    width: 150px !important;
    max-width: 150px !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .top-bar,
  .header,
  .mobile-menu,
  #main-content,
  .footer {
    max-width: 100vw !important;
  }
}

/* Logo size uplift: remove old 220px cap and enlarge */
@media (min-width: 1200px) {
  .header .logo a {
    width: clamp(320px, 25vw, 460px) !important;
    max-width: 460px !important;
  }

  .header.scrolled .logo a {
    width: clamp(280px, 22vw, 400px) !important;
    max-width: 400px !important;
  }

  .header .logo img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }
}

@media (max-width: 1199px) {
  .header .logo a {
    width: 170px !important;
    max-width: 170px !important;
  }
}

@media (max-width: 767px) {
  .header .logo a {
    width: min(240px, calc(100vw - 82px)) !important;
    max-width: calc(100vw - 82px) !important;
  }
}

/* Rounded header logo corners */
.header .logo img {
  border-radius: 10px !important;
}

/* Service pages: footer top gap restored */
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .footer {
  padding-top: var(--service-content-gap) !important;
}

/* Service pages: hero subtitle and card sizing alignment */
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero .hero-subtitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-width: min(760px, 84vw) !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
}

/* Keep boiler installations subtitle capped to 2 lines */
body[data-service='boiler-installations'] .hero .hero-subtitle {
  max-width: min(760px, 80vw) !important;
}

/* Service pages: tune about/spec text and headings */
body[data-service='boiler-installations'] .about-service-content {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

body[data-service='boiler-installations'] .about-specs-main-value {
  font-size: 18px !important;
}

body[data-service='boiler-installations'] .about-specs-secondary-value {
  font-size: 14px !important;
}

/* Service pages: prevent oversized single-image galleries */
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .gallery-grid {
  justify-items: center;
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .gallery-item {
  width: 100%;
  max-width: 320px;
}

@media (min-width: 1024px) {

  body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .about-service-description .section-title {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(23px, 1.95vw, 30px) !important;
  }
}

@media (max-width: 767px) {
  body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .gallery-item {
    max-width: 100% !important;
  }
}

@media (max-width: 1023px) {
  body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .about-service-description .section-title {
    white-space: normal;
    width: auto;
    max-width: 100%;
  }
}


/* Home reviews: Google wordmark under title */
body[data-service='home'] .facebook-reviews-header .rating-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

body[data-service='home'] .facebook-reviews-header .review-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

body[data-service='home'] .facebook-reviews-header .google-logo {
  display: inline-flex;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(24px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

body[data-service='home'] .facebook-reviews-header .google-logo .g {
  color: #4285F4;
}

body[data-service='home'] .facebook-reviews-header .google-logo .o1 {
  color: #EA4335;
}

body[data-service='home'] .facebook-reviews-header .google-logo .o2 {
  color: #FBBC05;
}

body[data-service='home'] .facebook-reviews-header .google-logo .g2 {
  color: #4285F4;
}

body[data-service='home'] .facebook-reviews-header .google-logo .l {
  color: #34A853;
}

body[data-service='home'] .facebook-reviews-header .google-logo .e {
  color: #EA4335;
}

@media (max-width: 767px) {
  body[data-service='home'] .facebook-reviews-header .rating-summary {
    gap: 8px;
  }
}


/* Enforce title-to-google-logo spacing in reviews */
body[data-service='home'] .reviews-section .facebook-reviews-header .review-count {
  margin-top: 10px !important;
}

@media (max-width: 767px) {
  body[data-service='home'] .reviews-section .facebook-reviews-header .review-count {
    margin-top: 8px !important;
  }
}

/* Services page parity with standardized service-page hero layout */
body[data-service='services'] .hero .hero-subtitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-width: min(760px, 84vw) !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
}

body[data-service='services'] .services-section .section-title {
  width: 100% !important;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

@media (min-width: 1024px) {
  body[data-service='services'] .hero-service-links {
    width: 100% !important;
    max-width: min(1000px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  body[data-service='services'] .hero-service-link {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

@media (max-width: 1023px) {
  body[data-service='services'] .services-section .section-title {
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  body[data-service='services'] .hero-service-links {
    width: min(100%, 335px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body[data-service='services'] .hero-service-link {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* ===== RECENT WORK PAGE ===== */
.recent-work-section {
  padding: 60px 20px 80px;
  background: #f5f5f5;
  min-height: 70vh;
}

.recent-work-container {
  max-width: 1200px;
  margin: 0 auto;
}

.recent-work-title {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 12px;
}

.recent-work-subtitle {
  text-align: center;
  color: #555;
  font-size: 1.05rem;
  margin-bottom: 36px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Filter tabs */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.filter-tab {
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 30px;
  padding: 8px 22px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: 'Montserrat', 'Inter', sans-serif;
}

.filter-tab:hover {
  border-color: #e67e22;
  color: #e67e22;
}

.filter-tab.active {
  background: #e67e22;
  border-color: #e67e22;
  color: #fff;
}

/* Project grid */
.recent-work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.project-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.35s ease;
  cursor: pointer;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}

.project-card-image {
  width: 100%;
  aspect-ratio: 400 / 516;
  overflow: hidden;
}

.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.project-card:hover .project-card-image img {
  transform: scale(1.05);
}

.project-card-info {
  padding: 16px 18px 20px;
}

.project-card-info h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 6px;
}

.project-category-tag {
  display: inline-block;
  font-size: 0.78rem;
  color: #888;
  font-weight: 400;
}

/* Responsive grid */
@media (max-width: 1024px) {
  .recent-work-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .recent-work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .recent-work-title {
    font-size: 1.8rem;
  }

  .filter-tab {
    padding: 6px 16px;
    font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .recent-work-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* Push recent work section below fixed header */
.recent-work-section {
  padding-top: 80px !important;
}

/* ===== LIGHTBOX GALLERY ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.lightbox-container {
  position: relative;
  max-width: 720px;
  width: 92vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.lightbox-close {
  position: absolute;
  top: -10px;
  right: -10px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.4rem;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  padding: 6px 12px;
  transition: color 0.2s;
}

.lightbox-close:hover {
  color: #e67e22;
}

.lightbox-title {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 16px;
  text-align: center;
}

.lightbox-image-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 16px;
}

.lightbox-img {
  max-width: calc(100% - 140px);
  max-height: 70vh;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

button.lightbox-nav {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  z-index: 10;
  padding: 0;
}

button.lightbox-nav:hover {
  background: rgba(230, 126, 34, 0.8);
  transform: scale(1.1);
}

.lightbox-counter {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  margin-top: 14px;
  text-align: center;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .lightbox-container {
    width: 96vw;
    padding: 12px;
  }

  button.lightbox-nav {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }

  .lightbox-close {
    top: -8px;
    right: 0;
    font-size: 2rem;
  }

  .lightbox-img {
    max-height: 60vh;
  }
}

/* ===== MINI HERO for sub-pages ===== */
.hero--mini {
  min-height: 280px !important;
  height: 280px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero--mini .hero-content {
  text-align: center;
}

.hero--mini .hero-content h1 {
  font-size: 2.4rem;
  margin-bottom: 12px;
}

.hero--mini .hero-subtitle {
  font-size: 1.05rem;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
}

.recent-work-section {
  padding-top: 80px !important;
}

.project-card {
  cursor: pointer;
}

@media (max-width: 768px) {
  .hero--mini {
    min-height: 220px !important;
    height: 220px !important;
  }

  .hero--mini .hero-content h1 {
    font-size: 1.8rem;
  }
}

/* Hide all floating elements when lightbox is open */
body.lightbox-open .header,
body.lightbox-open .floating-whatsapp,
body.lightbox-open .floating-phone,
body.lightbox-open .whatsapp-float,
body.lightbox-open .phone-float,
body.lightbox-open .mobile-menu-overlay,
body.lightbox-open [class*="float"],
body.lightbox-open .scroll-indicator {
  display: none !important;
}

/* All-breakpoint white services section on home and services */
body:is([data-service='home'], [data-service='services']) .services-section,
body:is([data-service='home'], [data-service='services']) .services-container,
body:is([data-service='home'], [data-service='services']) .services-grid {
  background: #ffffff !important;
  background-image: none !important;
}

/* Hero repairs card - keep gradient parity with install card */
body[data-service] .hero-service-link--repairs {
  background: linear-gradient(155deg, #6f97b6 0%, #8f959b 100%) !important;
  color: var(--text-on-dark) !important;
  box-shadow: 0 16px 36px rgba(14, 25, 36, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}

body[data-service] .hero-service-link--repairs .hero-service-text,
body[data-service] .hero-service-link--repairs .hero-service-text span {
  color: var(--text-on-dark) !important;
}

body[data-service] .hero-service-link--repairs .hero-service-icon {
  background: var(--color-dark-base) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

/* Footer contrast update - avoid blue on blue */
.footer .footer-section h2,
.footer .footer-section h3,
.footer .footer-section a,
.footer .footer-links a,
.footer .powered-by a,
.footer .footer-bottom p {
  color: #ffffff !important;
}

.footer .footer-section h2,
.footer .footer-section h3,
.footer .footer-section a,
.footer .footer-links a,
.footer .powered-by a {
  font-weight: 700 !important;
}

/* Hero Get a Quote buttons - brand red */
body[data-service] .hero a.btn.btn-primary[href$="contact.html#contact"],
body[data-service] .hero .btn.btn-primary {
  background: #B71C1C !important;
  border-color: #B71C1C !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(183, 28, 28, 0.38) !important;
}

body[data-service] .hero a.btn.btn-primary[href$="contact.html#contact"]::before,
body[data-service] .hero .btn.btn-primary::before {
  background: #8B1515 !important;
}

body[data-service] .hero a.btn.btn-primary[href$="contact.html#contact"]:hover,
body[data-service] .hero a.btn.btn-primary[href$="contact.html#contact"]:focus-visible,
body[data-service] .hero .btn.btn-primary:hover,
body[data-service] .hero .btn.btn-primary:focus-visible {
  background: #8B1515 !important;
  border-color: #8B1515 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(139, 21, 21, 0.42) !important;
}

/* Services page desktop: keep services section pure white and remove separator line artifact */
@media (min-width: 992px) {

  body[data-service='services'] .services-section,
  body[data-service='services'] .services-container,
  body[data-service='services'] .services-grid {
    background: #ffffff !important;
    background-image: none !important;
  }

  body[data-service='services'] .services-section {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
  }

  body[data-service='services'] .reviews-section {
    padding-top: 0 !important;
    background: #ffffff !important;
    border-top: 0 !important;
    box-shadow: none !important;
  }
}

/* Home + Services desktop: widen service card content area while keeping centered layout */
@media (min-width: 992px) {

  body:is([data-service='home'], [data-service='services']) .services-container,
  body:is([data-service='home'], [data-service='services']) .services-grid {
    max-width: min(1320px, calc(100vw - 48px)) !important;
  }

  body:is([data-service='home'], [data-service='services']) .services-grid {
    column-gap: 28px !important;
    row-gap: 32px !important;
  }

  body:is([data-service='home'], [data-service='services']) .service-content {
    padding: 28px 22px 30px !important;
  }

  body:is([data-service='home'], [data-service='services']) .service-content ul li {
    padding-left: 22px !important;
  }
}

/* Contact page: single-gap rhythm between map, reviews, FAQ, and footer */
body[data-service='contact'] .reviews-section {
  margin-bottom: 0 !important;
  padding-top: var(--service-content-gap) !important;
  padding-bottom: var(--service-content-gap) !important;
}

body[data-service='contact'] .faq-section {
  padding-top: 0 !important;
  padding-bottom: var(--service-content-gap) !important;
}

body[data-service='contact'] .footer {
  padding-top: var(--service-content-gap) !important;
}


/* Lightbox modal behavior for service galleries */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.lightbox[hidden] {
  display: none !important;
}

.lightbox.open,
.lightbox[aria-hidden='false'] {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.lightbox-content {
  position: relative;
  width: min(92vw, 980px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px;
}

.lightbox-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  width: auto;
  max-width: 100%;
  max-height: 75vh;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  display: block;
}

.lightbox .lightbox-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  padding: 0 10px;
  background: transparent;
  border: 0;
  width: 100%;
  height: auto;
  border-radius: 0;
}

.lightbox .lightbox-prev,
.lightbox .lightbox-next {
  pointer-events: auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.lightbox .lightbox-prev:hover,
.lightbox .lightbox-next:hover {
  background: rgba(230, 126, 34, 0.8);
  transform: scale(1.08);
}

.lightbox .lightbox-prev.hidden,
.lightbox .lightbox-next.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lightbox .lightbox-close {
  position: absolute;
  top: -8px;
  right: -4px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.lightbox .lightbox-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.lightbox .lightbox-counter {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  margin-top: 0;
}

.lightbox .lightbox-caption {
  color: #ffffff;
  text-align: center;
  font-size: 0.98rem;
}

@media (max-width: 600px) {
  .lightbox-content {
    width: 96vw;
    padding: 14px;
  }

  .lightbox .lightbox-prev,
  .lightbox .lightbox-next {
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
  }

  .lightbox .lightbox-close {
    top: -6px;
    right: 0;
    font-size: 2rem;
  }

  .lightbox-image {
    max-height: 65vh;
  }
}



/* No separation between top CTA bar and header */
:root {
  --header-top-gap: 0px;
}

.header {
  top: calc(var(--top-bar-height) + var(--header-top-gap)) !important;
}

.mobile-menu {
  top: calc(var(--top-bar-height) + var(--header-top-gap) + 90px);
}

@media (max-width: 1024px) {
  .header {
    top: calc(var(--top-bar-height) + var(--header-top-gap)) !important;
  }

  .mobile-menu {
    top: calc(var(--top-bar-height) + var(--header-top-gap) + 80px) !important;
  }
}


/* Service detail pages: keep the shared hero card sizing and add page-specific themes/highlights */
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link:hover,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link:focus-visible {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link:hover .hero-service-icon,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link:focus-visible .hero-service-icon {
  background: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  transform: scale(1.08);
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link:hover .hero-service-icon img,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link:focus-visible .hero-service-icon img {
  filter: brightness(0) invert(1);
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link:hover .hero-service-text,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link:focus-visible .hero-service-text {
  color: var(--color-primary);
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--install {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%) !important;
  color: var(--text-on-dark);
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--repairs {
  background: linear-gradient(155deg, var(--color-highlight) 0%, var(--color-secondary) 100%) !important;
  color: var(--text-on-dark);
  box-shadow: 0 16px 36px rgba(14, 25, 36, 0.2), inset 0 0 0 1px rgba(246, 244, 240, 0.22);
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--aircon {
  background: linear-gradient(155deg, var(--color-accent) 0%, var(--color-secondary) 100%) !important;
  color: var(--text-on-dark);
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--bathrooms {
  background: linear-gradient(155deg, color-mix(in srgb, var(--color-light-base) 78%, var(--color-highlight) 22%) 0%, var(--color-light-base) 100%) !important;
  color: var(--text-on-light);
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--aircon .hero-service-icon,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--bathrooms .hero-service-icon {
  background: var(--color-dark-base);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--install:hover,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--install:focus-visible,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--repairs:hover,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--repairs:focus-visible,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--aircon:hover,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--aircon:focus-visible {
  background: var(--color-light-base) !important;
  color: var(--color-primary);
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--bathrooms:hover,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--bathrooms:focus-visible {
  background: linear-gradient(155deg, var(--color-primary) 0%, var(--color-dark-base) 100%) !important;
  color: var(--text-on-dark);
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--bathrooms:hover .hero-service-text,
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--bathrooms:focus-visible .hero-service-text {
  color: #ffffff !important;
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link.active {
  border: 0 !important;
  box-shadow:
    0 22px 48px rgba(14, 25, 36, 0.35),
    0 0 0 4px rgba(255, 0, 0, 0.95),
    0 0 20px rgba(75, 107, 135, 0.35) !important;
  transform: none !important;
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-link--bathrooms.active {
  box-shadow:
    0 22px 48px rgba(14, 25, 36, 0.35),
    0 0 0 5px rgba(255, 0, 0, 0.98),
    0 0 32px rgba(255, 0, 0, 0.5) !important;
}

@media (max-width: 767px) {
  body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero-service-links {
    width: 100%;
  }
}

/* Tablet-only: keep hamburger centered so it does not overlap CTA pills */
@media (min-width: 768px) and (max-width: 1100px) {

  .header .mobile-menu-toggle,
  .header-content .mobile-menu-toggle {
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}


/* Tablet-only: keep booking image frame wrapped to image content (no stretched tail) */
@media (min-width: 768px) and (max-width: 1100px) {
  .booking-inner {
    align-items: start;
  }

  .booking-visual {
    align-self: start;
    height: auto;
  }
}

/* Tablet alignment fix: center reviews heading (home/services) + services hero content */
@media (min-width: 768px) and (max-width: 1100px) {
  body:is([data-service='home'], [data-service='services']) .reviews-section .facebook-reviews-header {
    width: min(500px, 100%);
    max-width: min(500px, 100%);
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    align-self: center;
  }

  body:is([data-service='home'], [data-service='services']) .reviews-section .rating-summary {
    align-items: center;
    justify-content: center;
  }

  body:is([data-service='home'], [data-service='services']) .reviews-section .rating-summary h2,
  body:is([data-service='home'], [data-service='services']) .reviews-section .review-count {
    width: 100%;
    text-align: center;
  }

  body[data-service='services'] .hero .hero-content {
    align-items: center;
    text-align: center;
  }

  body[data-service='services'] .hero .hero-service-links {
    justify-content: center;
  }

  body[data-service='services'] .hero .hero-service-link {
    justify-content: center;
    text-align: center;
  }

  body[data-service='services'] .hero .hero-service-text {
    align-items: center;
    text-align: center;
  }
}

/* Tablet iPad fix: keep services hero block centered, but keep card internals left-aligned */
@media (min-width: 768px) and (max-width: 1100px) {
  body[data-service='services'] .hero .hero-service-link {
    justify-content: flex-start;
    text-align: left;
  }

  body[data-service='services'] .hero .hero-service-text {
    align-items: flex-start;
    text-align: left;
  }
}

/* iPad/services hero fix: lock 2-card layout and prevent overflow drift around 1024px */
@media (min-width: 980px) and (max-width: 1100px) {
  body[data-service='services'] .hero .hero-service-links {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px auto 18px !important;
    gap: 14px !important;
  }

  body[data-service='services'] .hero .hero-service-link {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: initial !important;
  }
}

/* Service 1/2 mobile menu palette parity: remove bluish menu tone */
body:is([data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .mobile-menu {
  background: #303030;
}

body:is([data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .mobile-menu-link {
  background: #303030;
  color: #ffffff;
}

body:is([data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .services-submenu {
  background: #3a3a3a;
}

body:is([data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .services-submenu a {
  background: #3a3a3a;
  color: #ffffff;
}

body:is([data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .mobile-menu-link:hover,
body:is([data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .mobile-menu-link.active,
body:is([data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .mobile-menu-link.home-active {
  background: #B01E1B;
}

/* Mobile layout fix: stack home content blocks in one column */
@media (max-width: 767px) {

  body:is([data-service='home'], [data-service='services']) .services-section,
  body:is([data-service='home'], [data-service='services']) .services-container,
  body:is([data-service='home'], [data-service='services']) .services-grid,
  body:is([data-service='home'], [data-service='services']) .services-grid .service-card {
    background: #ffffff !important;
    background-image: none !important;
  }

  body:is([data-service='home'], [data-service='services']) .services-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body[data-service='home'] .why-choose-container,
  body[data-service='home'] .booking-inner {
    grid-template-columns: 1fr !important;
  }

  body[data-service='home'] .why-choose-container {
    gap: 24px !important;
  }

  body[data-service='home'] .why-choose-image,
  body[data-service='home'] .booking-visual {
    width: 100%;
    max-width: 100% !important;
    justify-self: center;
    align-self: center;
  }

  body[data-service='home'] .booking-visual {
    margin-top: var(--booking-visual-mobile-top-space);
  }
}

/* Home hero mobile compaction: keep quote CTA visible higher on first screen */
@media (max-width: 767px) {
  body[data-service='home'] .hero {
    align-items: flex-start !important;
    min-height: clamp(530px, 71svh, 650px) !important;
    padding-top: clamp(128px, 17svh, 152px) !important;
    padding-bottom: 26px !important;
  }

  body[data-service='home'] .hero .hero-content {
    width: min(100%, calc(100% - 24px)) !important;
    max-width: 430px !important;
    min-height: 0 !important;
    gap: 26px !important;
    justify-content: flex-start !important;
  }

  body[data-service='home'] .hero h1 {
    font-size: clamp(24px, 6.6vw, 30px) !important;
    line-height: 1.18 !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-wrap: balance;
  }

  body[data-service='home'] .hero .hero-subtitle {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    line-height: 1.32 !important;
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body[data-service='home'] .hero .hero-service-links {
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
    gap: 20px !important;
  }

  body[data-service='home'] .hero .hero-service-link {
    width: 100% !important;
    max-width: none !important;
    min-height: 82px !important;
    padding: 10px 14px !important;
    gap: 20px !important;
    border-radius: 16px !important;
  }

  body[data-service='home'] .hero .hero-service-icon {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 11px !important;
  }

  body[data-service='home'] .hero .hero-service-icon img {
    width: 46px !important;
    height: 46px !important;
  }

  body[data-service='home'] .hero .hero-service-icon img[src$='service1.svg'],
  body[data-service='home'] .hero .hero-service-icon img[src$='service2.svg'] {
    width: 40px !important;
    height: 40px !important;
  }

  body[data-service='home'] .hero .hero-service-text {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
  }

  body[data-service='home'] .hero .btn.btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin-top: 4px !important;
    padding: 10px 18px !important;
  }
}

/* Home/index mobile menu: place below header + gray palette parity */
@media (max-width: 767px) {
  body[data-service='home'] .mobile-menu {
    top: calc(var(--top-bar-height) + 84px) !important;
    background: #303030 !important;
  }

  body[data-service='home'] .mobile-menu-link {
    background: #303030 !important;
    color: #ffffff !important;
  }

  body[data-service='home'] .services-submenu {
    background: #3a3a3a !important;
  }

  body[data-service='home'] .services-submenu a {
    background: #3a3a3a !important;
    color: #ffffff !important;
  }

  body[data-service='home'] .mobile-menu-link:hover,
  body[data-service='home'] .mobile-menu-link.active,
  body[data-service='home'] .mobile-menu-link.home-active {
    background: #B01E1B !important;
    color: #ffffff !important;
  }
}

/* Hero pages mobile parity: mirror index hero spacing/card/menu behavior */
@media (max-width: 767px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero {
    align-items: flex-start !important;
    min-height: clamp(530px, 71svh, 650px) !important;
    padding-top: clamp(128px, 17svh, 152px) !important;
    padding-bottom: 26px !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-content {
    width: min(100%, calc(100% - 24px)) !important;
    max-width: 430px !important;
    min-height: 0 !important;
    gap: 26px !important;
    justify-content: flex-start !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero h1 {
    font-size: clamp(24px, 6.6vw, 30px) !important;
    line-height: 1.18 !important;
    max-width: 100% !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-wrap: balance;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-subtitle {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    line-height: 1.32 !important;
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-links {
    width: 100% !important;
    max-width: 100% !important;
    margin: 2px 0 0 !important;
    gap: 20px !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-link {
    width: 100% !important;
    max-width: none !important;
    min-height: 82px !important;
    padding: 10px 14px !important;
    gap: 20px !important;
    border-radius: 16px !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-icon {
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    border-radius: 11px !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-icon img {
    width: 46px !important;
    height: 46px !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-icon img[src$='service1.svg'],
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-icon img[src$='service2.svg'] {
    width: 40px !important;
    height: 40px !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-text {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .btn.btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin-top: 4px !important;
    padding: 10px 18px !important;
  }
}

@media (max-width: 767px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .mobile-menu {
    top: calc(var(--top-bar-height) + 84px) !important;
    background: #303030 !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .mobile-menu-link {
    background: #303030 !important;
    color: #ffffff !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .services-submenu {
    background: #3a3a3a !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .services-submenu a {
    background: #3a3a3a !important;
    color: #ffffff !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .mobile-menu-link:hover,
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .mobile-menu-link.active,
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .mobile-menu-link.home-active {
    background: #B01E1B !important;
    color: #ffffff !important;
  }
}

/* Hero text rule (mobile): title one line, subtitle max two lines, no ellipsis dots */
@media (max-width: 767px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero h1 {
    font-size: clamp(20px, 5.8vw, 27px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    display: block !important;
    text-wrap: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-subtitle {
    display: block !important;
    font-size: clamp(13px, 3.8vw, 15px) !important;
    line-height: 1.32 !important;
    max-height: calc(1.32em * 2) !important;
    overflow: hidden !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
}

/* Hero bottom-gap rule (mobile): keep fixed post-CTA spacing while hero height adapts to content */
@media (max-width: 767px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero {
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: var(--service-content-gap) !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-content {
    min-height: 0 !important;
  }
}

/* Hero pages mobile offset: shift full hero stack down by 60px while keeping internal gaps unchanged */
@media (max-width: 767px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero {
    padding-top: calc(clamp(128px, 17svh, 152px) + 60px) !important;
  }
}

/* Hero desktop alignment rule: keep title/subtitle baselines and typography consistent across hero pages */
@media (min-width: 1101px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero {
    padding-bottom: var(--service-content-gap) !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-content {
    min-height: 509px !important;
    justify-content: flex-end !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero h1 {
    font-size: clamp(26px, 3vw, 38px) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-subtitle {
    font-size: clamp(14px, 1.8vw, 20px) !important;
    line-height: 1.4 !important;
    max-width: clamp(520px, 55vw, 760px) !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .btn.btn-primary {
    margin-bottom: 0 !important;
  }
}

/* Hero desktop spacing parity: normalize internal stack spacing and active-card geometry */
@media (min-width: 1101px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-links {
    margin: 26px 0 18px !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .btn.btn-primary {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-link {
    box-sizing: border-box !important;
    border: 2px solid transparent !important;
  }
}

/* Hero desktop top-gap reduction: reduce title top gap by ~50% while preserving internal spacing */
@media (min-width: 1101px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero {
    min-height: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding-top: 165px !important;
    padding-bottom: var(--service-content-gap) !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-content {
    min-height: 0 !important;
    justify-content: flex-start !important;
  }
}

/* Hero desktop horizontal centering: keep current sizing/gaps, center all hero elements */
@media (min-width: 1101px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-content {
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-links {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-link {
    text-align: center !important;
    justify-content: center !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-text {
    align-items: center !important;
    text-align: center !important;
  }
}

/* Hero service-card content rule (desktop): keep icon/text left-aligned inside cards */
@media (min-width: 1101px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-link {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-text {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* Desktop hero: center only the final odd card (single card on last row) */
@media (min-width: 1024px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='full-garden-care-maintenance'], [data-service='fencing'], [data-service='pressure-washing'], [data-service='commercial-grounds-maintenance'], [data-service='soft-landscaping-and-turfing']) .hero .hero-service-links .hero-service-link:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(100%, 520px) !important;
  }
}

/* Hero active-card highlight visibility: bright white highlight for current service cards */
body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='heating-engineer'], [data-service='legionella-risk-assessments']) .hero .hero-service-link.active {
  border: 2px solid #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.52), 0 0 24px rgba(255, 255, 255, 0.42), 0 18px 36px rgba(15, 34, 51, 0.22) !important;
}


/* Header Quote Button Standout */
.header .header-cta-group .btn.btn-primary {
  background: #2B7A9E !important;
  border-color: #2B7A9E !important;
  color: #FFFFFF !important;
}

.header .header-cta-group .btn.btn-primary:hover,
.header .header-cta-group .btn.btn-primary:focus-visible {
  background: #1A5066 !important;
  border-color: #1A5066 !important;
  color: #FFFFFF !important;
}


/* Session override: hero service cards use highlighted green style */
body[data-service] .hero .hero-service-link {
  border-color: rgba(47, 125, 50, 0.55) !important;
}

body[data-service] .hero .hero-service-link .hero-service-text,
body[data-service] .hero .hero-service-link .hero-service-text span {
  color: #2F7D32 !important;
}

body[data-service] .hero .hero-service-link .hero-service-icon {
  background: #2F7D32 !important;
  border-color: #2F7D32 !important;
}

body[data-service] .hero .hero-service-link .hero-service-icon img {
  filter: brightness(0) invert(1) !important;
}

/* Session override: bring back stronger hero card hover effect */
body[data-service] .hero .hero-service-link:hover,
body[data-service] .hero .hero-service-link:focus-visible {
  background: linear-gradient(155deg, #2F7D32 0%, #245F27 100%) !important;
  border-color: #E8F6E9 !important;
  box-shadow: 0 10px 24px rgba(15, 61, 30, 0.38) !important;
  transform: translateY(-3px) !important;
}

body[data-service] .hero .hero-service-link:hover .hero-service-text,
body[data-service] .hero .hero-service-link:hover .hero-service-text span,
body[data-service] .hero .hero-service-link:focus-visible .hero-service-text,
body[data-service] .hero .hero-service-link:focus-visible .hero-service-text span {
  color: #FFFFFF !important;
}

body[data-service] .hero .hero-service-link:hover .hero-service-icon,
body[data-service] .hero .hero-service-link:focus-visible .hero-service-icon {
  background: #1F7A2F !important;
  border-color: #E8F6E9 !important;
}


/* Session override: remove permanent active glow on hero cards */
body[data-service] .hero .hero-service-link.active {
  box-shadow: none !important;
  border-color: rgba(47, 125, 50, 0.7) !important;
  transform: none !important;
}




.footer-follow {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-follow .social-links {
  margin-top: 3px;
  gap: 18px;
  justify-content: center;
  align-items: center;
}


/* Service detail pages: make current hero service card clearly highlighted in red */
body:is([data-service='full-garden-care-maintenance'], [data-service='fencing'], [data-service='pressure-washing'], [data-service='commercial-grounds-maintenance'], [data-service='soft-landscaping-and-turfing']) .hero .hero-service-link.active {
  border: 3px solid #D62828 !important;
  box-shadow: 0 0 0 2px rgba(214, 40, 40, 0.2), 0 12px 28px rgba(15, 34, 51, 0.22) !important;
}

body:is([data-service='full-garden-care-maintenance'], [data-service='fencing'], [data-service='pressure-washing'], [data-service='commercial-grounds-maintenance'], [data-service='soft-landscaping-and-turfing']) .hero .hero-service-link.active:hover,
body:is([data-service='full-garden-care-maintenance'], [data-service='fencing'], [data-service='pressure-washing'], [data-service='commercial-grounds-maintenance'], [data-service='soft-landscaping-and-turfing']) .hero .hero-service-link.active:focus-visible {
  border-color: #D62828 !important;
}

/* Mobile header menu palette parity: use green highlight across all pages */
@media (max-width: 767px) {

  body[data-service] .mobile-menu-link:hover,
  body[data-service] .mobile-menu-link.active,
  body[data-service] .mobile-menu-link.home-active {
    background: #2F7D32 !important;
    color: #FFFFFF !important;
  }

  body[data-service] .services-submenu a:hover,
  body[data-service] .services-submenu a:focus-visible {
    background: rgba(47, 125, 50, 0.34) !important;
    color: #FFFFFF !important;
  }
}

/* P&P session override: mobile hero text + CTA order/size baseline */
@media (max-width: 767px) {
  body[data-service] .hero .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Mobile hero title: single line, no dots */
  body[data-service] .hero h1 {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    text-wrap: normal !important;
    max-width: 100% !important;
  }

  /* Mobile hero subtitle: max 2 lines, no dots */
  body[data-service] .hero .hero-subtitle {
    display: block !important;
    line-height: 1.32 !important;
    max-height: calc(1.32em * 2) !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    text-wrap: balance !important;
    max-width: 100% !important;
  }

  /* Mobile hero CTA comes first and matches service-card footprint */
  body[data-service] .hero .btn.btn-primary {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 82px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    margin: 0 !important;
    background: #B71C1C !important;
    border-color: #B71C1C !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body[data-service] .hero .hero-service-links {
    order: 2 !important;
    margin-top: -6px !important;
    gap: 20px !important;
  }
}

/* P&P session override: desktop hero subtitle max 2 lines */
@media (min-width: 1101px) {
  body[data-service] .hero .hero-subtitle {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-wrap: balance !important;
  }
}

/* (MW Installation overrides fully removed — FX Security palette below) */

/* FX Security Ltd final overrides (2026-03-13) */
:root {
  --color-primary: #B71C1C;
  --color-secondary: #212121;
  --color-accent: #FF5252;
  --color-dark-base: #0A0A0F;
  --color-light-base: #EEEEEE;
  --color-highlight: #FFCDD2;
  --text-on-light: #0A0A0F;
  --text-on-dark: #FFFFFF;
  --btn-primary-bg: #B71C1C;
  --btn-primary-hover: #8B1515;
  --btn-hero-bg: #B71C1C;
  --btn-hero-hover: #8B1515;
  --btn-hero-text: #FFFFFF;
  --accent-red-500: #B71C1C;
  --accent-red-600: #8B1515;
  --accent-red-700: #7A1111;
  --mist: #F3F3F5;
}

body[data-service] .top-bar,
body[data-service] .footer,
body[data-service] .footer .footer-bottom {
  background: #0F172A !important;
  color: #FFFFFF !important;
}

body[data-service] .header {
  background: transparent !important;
  border-bottom: none !important;
}

body[data-service] .header.scrolled {
  background: rgba(11, 14, 31, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body[data-service] .header .nav-menu a,
body[data-service] .header .nav-menu a:visited {
  color: #F0F2F5 !important;
}

body[data-service] .header .nav-menu a::after {
  background: #B71C1C !important;
}

body[data-service] .header .nav-menu a:hover,
body[data-service] .header .nav-menu a:focus-visible,
body[data-service] .header .nav-menu a[aria-current='page'] {
  color: #FFCDD2 !important;
  text-shadow: none;
}

body[data-service] .header .services-dropdown {
  background: #212121 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body[data-service] .header .services-dropdown a,
body[data-service] .header .services-dropdown a:visited {
  color: #F0F2F5 !important;
}

body[data-service] .header .services-dropdown a:hover,
body[data-service] .header .services-dropdown a:focus-visible {
  background: #B71C1C !important;
  border-left-color: #FFCDD2 !important;
  color: #FFFFFF !important;
}

body[data-service] .btn.btn-primary,
body[data-service] .btn.btn-service,
body[data-service] .cta-banner-btn {
  background: #B71C1C !important;
  border-color: #B71C1C !important;
  color: #FFFFFF !important;
}

body[data-service] .btn.btn-primary:hover,
body[data-service] .btn.btn-service:hover,
body[data-service] .cta-banner-btn:hover,
body[data-service] .btn.btn-primary:focus-visible,
body[data-service] .btn.btn-service:focus-visible,
body[data-service] .cta-banner-btn:focus-visible {
  background: #8B1515 !important;
  border-color: #8B1515 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ——— Kill template ::before pseudo-element orange overlay on buttons ——— */
body[data-service] .btn.btn-primary::before,
body[data-service] .btn.btn-service::before,
body[data-service] .cta-banner-btn::before {
  background: transparent !important;
  opacity: 0 !important;
}

/* ——— Header overflow fix (needed for logo sizing) ——— */
body[data-service] .header {
  overflow: visible !important;
}

/* ——— Logo sizing — desktop (≥1101px) ——— */
@media (min-width: 1101px) {
  body[data-service] .header .logo a {
    height: 88px !important;
    max-height: 88px !important;
    width: auto !important;
    max-width: none !important;
  }

  body[data-service] .header.scrolled .logo a {
    height: 54px !important;
    max-height: 54px !important;
    width: auto !important;
    max-width: none !important;
  }

  body[data-service] .header .logo img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* ——— Logo sizing — mobile (≤1100px) ——— */
@media (max-width: 1100px) {
  body[data-service] .header .logo a {
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
    max-width: none !important;
  }

  body[data-service] .header .logo img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* ——— Header CTA button red ——— */
body[data-service] .header .header-cta-group .btn.btn-primary {
  background: #B71C1C !important;
  border-color: #B71C1C !important;
  color: #FFFFFF !important;
}

body[data-service] .header .header-cta-group .btn.btn-primary:hover,
body[data-service] .header .header-cta-group .btn.btn-primary:focus-visible {
  background: #8B1515 !important;
  border-color: #8B1515 !important;
  color: #FFFFFF !important;
}

@media (max-width: 767px) {
  body[data-service] .header {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
  }

  body[data-service] .mobile-menu {
    background: #212121 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  body[data-service] .mobile-menu-link:hover,
  body[data-service] .mobile-menu-link.active,
  body[data-service] .mobile-menu-link.home-active {
    background: #B71C1C !important;
    color: #FFFFFF !important;
  }

  body[data-service] .services-submenu a:hover,
  body[data-service] .services-submenu a:focus-visible {
    background: rgba(183, 28, 28, 0.34) !important;
    color: #FFFFFF !important;
  }
}

body[data-service] .hero .hero-service-link.active {
  border: 3px solid #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 14px 30px rgba(0, 0, 0, 0.28) !important;
}

/* Hero service cards — palette override: MW blue → FX red */
body[data-service] .hero .hero-service-link {
  border-color: rgba(183, 28, 28, 0.35) !important;
}

body[data-service] .hero .hero-service-link:hover,
body[data-service] .hero .hero-service-link:focus-visible {
  background: linear-gradient(155deg, #B71C1C 0%, #8B1515 100%) !important;
  border-color: #FFCDD2 !important;
  box-shadow: 0 10px 24px rgba(140, 10, 10, 0.4) !important;
}

body[data-service] .hero .hero-service-link .hero-service-icon {
  background: #B71C1C !important;
  border-color: #B71C1C !important;
}

body[data-service] .hero .hero-service-link .hero-service-text,
body[data-service] .hero .hero-service-link .hero-service-text span {
  color: #B71C1C !important;
}

body[data-service] .hero .hero-service-link:hover .hero-service-icon,
body[data-service] .hero .hero-service-link:focus-visible .hero-service-icon {
  background: #3A3A3A !important;
  border-color: #3A3A3A !important;
}

body[data-service] .hero .hero-service-link:hover .hero-service-text,
body[data-service] .hero .hero-service-link:hover .hero-service-text span,
body[data-service] .hero .hero-service-link:focus-visible .hero-service-text,
body[data-service] .hero .hero-service-link:focus-visible .hero-service-text span {
  color: #FFFFFF !important;
}

/* ——— Service page: Hero CTA button (override template orange) ——— */
body[data-service] .hero .btn,
body[data-service] .hero .btn.btn-primary,
body[data-service] .hero-content .btn,
body[data-service] .hero-content .btn.btn-primary {
  background: #B71C1C !important;
  border-color: #B71C1C !important;
  color: #FFFFFF !important;
}

body[data-service] .hero .btn:hover,
body[data-service] .hero .btn.btn-primary:hover,
body[data-service] .hero-content .btn:hover,
body[data-service] .hero-content .btn.btn-primary:hover {
  background: #8B1515 !important;
  border-color: #8B1515 !important;
}

/* ——— Service page: About Spec cards (override template teal/green) ——— */
body[data-service] .about-specs-side.about-specs-highlight {
  background: linear-gradient(145deg, #1A1A2E 0%, #0A0A0F 100%) !important;
  border: 1px solid rgba(183, 28, 28, 0.3) !important;
  color: #FFFFFF !important;
}

body[data-service] .about-specs-side.about-specs-highlight .about-specs-main-label,
body[data-service] .about-specs-side.about-specs-highlight .about-specs-secondary-label {
  color: #FFCDD2 !important;
}

body[data-service] .about-specs-side.about-specs-highlight .about-specs-main-value,
body[data-service] .about-specs-side.about-specs-highlight .about-specs-secondary-value {
  color: #FFFFFF !important;
}

body[data-service] .about-specs-side:not(.about-specs-highlight) {
  background: #F5F5F5 !important;
  border: 1px solid #E0E0E0 !important;
  color: #0A0A0F !important;
}

body[data-service] .about-specs-side:not(.about-specs-highlight) .about-specs-main-label,
body[data-service] .about-specs-side:not(.about-specs-highlight) .about-specs-secondary-label {
  color: #B71C1C !important;
}

body[data-service] .about-specs-side:not(.about-specs-highlight) .about-specs-main-value,
body[data-service] .about-specs-side:not(.about-specs-highlight) .about-specs-secondary-value {
  color: #0A0A0F !important;
}

/* ——— Service page: Gallery grid (auto-fill to avoid empty space) ——— */
body[data-service] .gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

/* footer-follow and social-links are now visible — see rules at end of file */

.map-placeholder,
.footer-map-placeholder {
  color: #EEEEEE;
  font-size: 0.95rem;
  margin-top: 8px;
}

.contact-main-map .map-placeholder {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 24px;
}

@media (max-width: 767px) {
  body[data-service] .hero .btn.btn-primary {
    background: #B71C1C !important;
    border-color: #B71C1C !important;
    color: #FFFFFF !important;
  }

  body[data-service] .mobile-menu-link:hover,
  body[data-service] .mobile-menu-link.active,
  body[data-service] .mobile-menu-link.home-active {
    background: #B71C1C !important;
    color: #FFFFFF !important;
  }
}

/* Mobile: Services section and cards must be white, no card borders/shadows */
@media (max-width: 768px) {
  .services-section {
    background: #FFFFFF !important;
  }

  .services-section .service-card {
    background: #FFFFFF !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
  }
}

/* Booking section: rating pills, CTA width, image border */
.booking-ratings {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
}

.booking-ratings .rating-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.10);
}

.booking-ratings .rating-pill .brand-icon {
  display: inline-flex;
  align-items: center;
}

.booking-ratings .rating-pill .stars {
  color: #F4B400;
  letter-spacing: 1px;
}

.booking-cta,
.booking-ratings {
  max-width: 100%;
}

.booking-cta {
  display: block !important;
}

.booking-cta-btn {
  display: block !important;
  width: 100% !important;
  min-width: 445px !important;
  text-align: center;
  box-sizing: border-box;
}

.booking-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.booking-visual img {
  border-radius: 16px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Mobile booking: stack pills vertically, fix overflow */
@media (max-width: 768px) {
  .booking-ratings {
    flex-direction: column !important;
    align-items: stretch;
    gap: 10px;
  }

  .booking-ratings .rating-pill {
    justify-content: center;
  }

  .booking-section .booking-inner {
    overflow: hidden;
  }

  .booking-visual img {
    max-height: 260px;
    width: 100%;
  }

  .booking-cta-btn {
    min-width: 0 !important;
  }
}

/* Footer: Follow Us Google logo white/red */
.footer-follow {
  display: block !important;
}

.footer-follow .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: background 0.2s ease;
}

.footer-follow .social-link:hover {
  background: #B71C1C;
}

.footer-follow .social-link svg {
  width: 24px;
  height: 24px;
  fill: #B71C1C;
  transition: fill 0.2s ease;
}

.footer-follow .social-link:hover svg {
  fill: #FFFFFF;
}

/* ——— Mobile header: semi-transparent grey background for menu visibility ——— */
@media (max-width: 1100px) {

  .header,
  body[data-service] .header {
    background: rgba(11, 14, 31, 0.55) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* ——— Gallery Section ——— */
body[data-service="recent-work"] .gallery-section {
  padding-top: var(--service-content-gap, 80px);
  padding-bottom: 0;
  background: #ffffff;
}

body[data-service="recent-work"] .gallery-section .section-title {
  color: #1a1a2e;
}

.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.gallery-subtitle {
  color: #555;
  font-size: 1.05rem;
  margin-bottom: 40px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
  background: #f5f5f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.gallery-item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

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

.gallery-item figcaption {
  padding: 14px 16px;
  color: #1a1a2e;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  background: rgba(245, 245, 245, 0.95);
}

.gallery-item button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
}

/* ——— Lightbox ——— */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-close {
  position: fixed;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.4rem;
  cursor: pointer;
  z-index: 10001;
  line-height: 1;
  padding: 8px;
  transition: opacity 0.2s;
}

.lightbox-close:hover {
  opacity: 0.7;
}

.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 85vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 10000;
}

.lightbox-prev,
.lightbox-next {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 1.8rem;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s;
  margin: 0 12px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox-meta {
  margin-top: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  display: flex;
  gap: 16px;
  align-items: center;
}

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

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .gallery-item img {
    height: 240px;
  }

  .lightbox-image {
    max-width: 95vw;
    max-height: 75vh;
  }

  .lightbox-prev,
  .lightbox-next {
    font-size: 1.4rem;
    padding: 8px 12px;
    margin: 0 6px;
  }
}

/* Desktop services cards: darker background and stronger text contrast on home/services */
@media (min-width: 992px) {
  body:is([data-service='home'], [data-service='services']) .services-grid .service-card.tone-secondary {
    background: linear-gradient(160deg, rgba(54, 58, 67, 0.96) 0%, rgba(29, 32, 40, 0.96) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
  }

  body:is([data-service='home'], [data-service='services']) .services-grid .service-card.tone-secondary .service-content h3,
  body:is([data-service='home'], [data-service='services']) .services-grid .service-card.tone-secondary .service-content h4,
  body:is([data-service='home'], [data-service='services']) .services-grid .service-card.tone-secondary .service-content h3 a,
  body:is([data-service='home'], [data-service='services']) .services-grid .service-card.tone-secondary .service-content h4 a,
  body:is([data-service='home'], [data-service='services']) .services-grid .service-card.tone-secondary .service-content p,
  body:is([data-service='home'], [data-service='services']) .services-grid .service-card.tone-secondary .service-content ul li {
    color: #F5F7FA !important;
  }

  body:is([data-service='home'], [data-service='services']) .services-grid .service-card.tone-secondary .divider,
  body:is([data-service='home'], [data-service='services']) .services-grid .service-card.tone-secondary .service-content ul li:before {
    background: #FFCDD2 !important;
    color: #FFCDD2 !important;
  }
}

/* Final UI parity fixes (Mar 2026): header CTA breakpoint */
@media (min-width: 768px) and (max-width: 1489px) {

  .header .header-cta-group .btn.btn-primary,
  .header .header-cta-group .btn-primary {
    display: none !important;
  }
}

@media (min-width: 1490px) {

  .header .header-cta-group .btn.btn-primary,
  .header .header-cta-group .btn-primary {
    display: inline-flex !important;
  }
}

body:is([data-service='home'], [data-service='services']) .services-grid .service-card .service-content ul li:before {
  content: '' !important;
  width: 6px;
  height: 10px;
  top: 9px;
  left: 2px;
  border-right: 2px solid #FFCDD2 !important;
  border-bottom: 2px solid #FFCDD2 !important;
  background: transparent !important;
  transform: rotate(45deg);
  font-size: 0 !important;
}

body[data-service='home'] .booking-ratings .rating-pill {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}


/* Final UI parity follow-up: keep header quote hidden below 1490px */
@media (min-width: 768px) and (max-width: 1489px) {

  .header .header-cta-group .btn.btn-primary,
  .header .header-cta-group .btn-primary {
    display: none !important;
  }
}

@media (min-width: 1490px) {

  .header .header-cta-group .btn.btn-primary,
  .header .header-cta-group .btn-primary {
    display: inline-flex !important;
  }
}

body:is([data-service='home'], [data-service='services']) .services-grid .service-card.tone-secondary .service-content ul li:before {
  background: transparent !important;
  color: transparent !important;
}

/* Global header CTA visibility rule (all root pages): hide below 1490, show from 1490+ */
@media (min-width: 768px) and (max-width: 1489px) {
  header.header .header-cta-group>a.btn.btn-primary[href*='contact.html#contact'] {
    display: none !important;
  }
}

@media (min-width: 1490px) {
  header.header .header-cta-group>a.btn.btn-primary[href*='contact.html#contact'] {
    display: inline-flex !important;
  }
}


/* Mobile + desktop parity pass (Mar 2026): solid red top bar and aligned service hero stack */
.top-bar,
body[data-service] .top-bar {
  background: #B71C1C !important;
  color: #FFFFFF !important;
}

.top-bar a,
.top-bar .scroll-text,
body[data-service] .top-bar a,
body[data-service] .top-bar .scroll-text {
  color: #FFFFFF !important;
}

@media (max-width: 767px) {
  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero {
    align-items: flex-start !important;
  }

  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-content {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
  }

  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-links {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 20px !important;
    gap: 20px !important;
    order: 2 !important;
  }

  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link {
    width: 100% !important;
    min-height: 82px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
  }

  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .btn.btn-primary {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 767px) {
  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .btn.btn-primary {
    min-width: 0 !important;
  }
}

/* Final mobile hero parity (Mar 2026): no title truncation + service heroes match index baseline */
@media (max-width: 767px) {
  body:is([data-service='home'], [data-service='services'], [data-service='recent-work'], [data-service='about'], [data-service='contact'], [data-service='faq'], [data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero h1 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
    text-wrap: balance !important;
  }

  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-content {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
    gap: 26px !important;
  }

  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .btn.btn-primary {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-links {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: -6px !important;
    gap: 20px !important;
  }

  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link {
    width: 100% !important;
    min-height: 82px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
  }
}

/* Home mobile spacing parity adjustments (Mar 2026) */
@media (max-width: 767px) {
  body[data-service='home'] .services-grid .service-card {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body[data-service='home'] .services-grid .service-content {
    padding-bottom: 24px !important;
  }

  body[data-service='home'] .services-section {
    padding-bottom: 0 !important;
  }

  body[data-service='home'] .booking-section {
    margin-top: 0 !important;
  }

  body[data-service='home'] .why-choose-image img {
    display: block;
  }

  body[data-service='home'] .faq-section {
    padding-bottom: var(--service-content-gap, 80px) !important;
  }
}

/* Prevent iOS safe-area white strip under dark footer */
body[data-service] .footer {
  padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
}

/* About specs: never truncate card labels/values on service pages */
body[data-service] .about-specs-main-label,
body[data-service] .about-specs-secondary-label,
body[data-service] .about-specs-main-value,
body[data-service] .about-specs-secondary-value {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

body[data-service] .about-specs-secondary-item {
  align-items: flex-start;
}

/* About description titles: centered on core service pages and about page */
body:is([data-service='about'], [data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .about-service-description .about-service-content .section-title {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

/* Home desktop booking ratings fit fix (Mar 2026) */
@media (min-width: 992px) {
  body[data-service='home'] .booking-ratings {
    gap: 12px !important;
  }

  body[data-service='home'] .booking-ratings .rating-pill {
    width: 240px !important;
    min-width: 240px !important;
    justify-content: center !important;
    text-align: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body[data-service='home'] .booking-cta .btn,
  body[data-service='home'] .booking-cta a.btn.btn-primary,
  body[data-service='home'] .booking-cta-btn {
    width: 492px !important;
    min-width: 492px !important;
    max-width: 100% !important;
  }
}

/* Home mobile: lock Why-Choose image bottom gap to FAQ title top gap parity */
@media (max-width: 767px) {
  body[data-service='home'] {
    --home-mobile-why-faq-gap: 40px;
  }

  body[data-service='home'] .why-choose-container {
    padding-bottom: var(--home-mobile-why-faq-gap) !important;
  }

  body[data-service='home'] .faq-section {
    padding-top: var(--home-mobile-why-faq-gap) !important;
  }
}

/* Mobile hero card/button geometry parity: home + core service pages */
@media (max-width: 767px) {
  body:is([data-service='home'], [data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-content {
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    align-items: stretch !important;
    gap: 26px !important;
  }

  body:is([data-service='home'], [data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .btn.btn-primary {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  body:is([data-service='home'], [data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-links {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: -6px !important;
    gap: 20px !important;
  }

  body:is([data-service='home'], [data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link {
    width: 100% !important;
    height: 82px !important;
    min-height: 82px !important;
    max-height: 82px !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
  }

  body:is([data-service='home'], [data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    flex: 0 0 54px !important;
  }

  /* Service detail pages must match index mobile icon/text geometry exactly */
  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link {
    gap: 20px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-icon {
    border-radius: 11px !important;
  }

  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-icon img {
    width: 46px !important;
    height: 46px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-text {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
}

/* Service detail hero active-card behavior: filled state + inverse-on-hover */
body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active {
  background: linear-gradient(155deg, #B71C1C 0%, #8B1515 100%) !important;
  border: 3px solid #FFD84D !important;
  box-shadow: 0 0 0 2px rgba(255, 216, 77, 0.45), 0 14px 30px rgba(0, 0, 0, 0.28) !important;
  transform: none !important;
}

body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active .hero-service-icon {
  background: #3A3A3A !important;
  border-color: #3A3A3A !important;
}

body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active .hero-service-text,
body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active .hero-service-text span {
  color: #FFFFFF !important;
}

/* Hover/focus on the active card inverts back to the normal card appearance */
body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active:hover,
body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active:focus-visible {
  background: none !important;
  border: 0 none transparent !important;
  box-shadow: 0 16px 36px rgba(13, 27, 42, 0.12) !important;
  transform: none !important;
}

body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active:hover .hero-service-icon,
body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active:focus-visible .hero-service-icon {
  background: #B71C1C !important;
  border-color: #B71C1C !important;
}

body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active:hover .hero-service-text,
body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active:hover .hero-service-text span,
body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active:focus-visible .hero-service-text,
body:is([data-service='access-control'], [data-service='cctv-systems'], [data-service='intruder-alarms']) .hero .hero-service-link.active:focus-visible .hero-service-text span {
  color: #B71C1C !important;
}

/* ============================================================
   HERO v2 — OMB-STYLE ANIMATIONS & FEATURE CARDS
   ============================================================ */

/* ── Hero Layout ── */
.hero.hero--left {
  position: relative;
  overflow: hidden;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0 !important;
}

.hero.hero--left .hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(40px, 6vh, 60px) clamp(20px, 5vw, 60px) 10px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.hero-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero-intro h1 {
  margin-bottom: 0;
}

.hero-intro .hero-subtitle {
  margin-top: clamp(12px, 2vw, 20px);
}

/* ── Hero CTA Row ── */
.hero-cta-row {
  display: flex;
  gap: clamp(10px, 1.5vw, 18px);
  margin-top: clamp(18px, 3vw, 32px);
  flex-wrap: wrap;
  justify-content: center;
}

.hero-cta-row .btn {
  padding: clamp(12px, 1.5vw, 16px) clamp(24px, 3vw, 40px);
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 600;
  border-radius: 50px;
  letter-spacing: 0.3px;
  min-width: 200px;
  text-align: center;
  text-decoration: none;
}

/* Outline-light button (Call CTA) */
.btn-outline-light {
  background: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ── Directional Slide Keyframes ── */
@keyframes heroSlideFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-70px) scale(0.97);
  }

  60% {
    opacity: 1;
    transform: translateX(6px) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes heroSlideFromRight {
  0% {
    opacity: 0;
    transform: translateX(70px) scale(0.97);
  }

  60% {
    opacity: 1;
    transform: translateX(-6px) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes heroSlideFromTop {
  0% {
    opacity: 0;
    transform: translateY(-65px) scale(0.97);
  }

  60% {
    opacity: 1;
    transform: translateY(5px) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroSlideFromBottom {
  0% {
    opacity: 0;
    transform: translateY(65px) scale(0.97);
  }

  60% {
    opacity: 1;
    transform: translateY(-5px) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Base float-in (fallback) */
@keyframes heroFloatIn {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.985);
  }

  55% {
    opacity: 1;
    transform: translateY(-4px) scale(1);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glow pulse on feature cards */
@keyframes heroGlowPulse {
  0% {
    box-shadow: 0 0 0 0 var(--hero-glow, rgba(183, 28, 28, 0.5));
  }

  50% {
    box-shadow: 0 0 22px 4px var(--hero-glow, rgba(183, 28, 28, 0.35));
  }

  100% {
    box-shadow: 0 0 0 0 var(--hero-glow, rgba(183, 28, 28, 0));
  }
}

/* ── Base Hero Animations ── */
.hero.hero--left .fade-in {
  opacity: 0;
  animation: heroFloatIn 1.2s cubic-bezier(0.16, 0.7, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.hero.hero--left .hero-subtitle.fade-in {
  animation-delay: 0.15s;
}

.hero.hero--left .hero-cta-row.fade-in {
  animation-delay: 0.30s;
}

.hero.hero--left .hero-feature-grid.fade-in {
  animation-delay: 0.42s;
}

/* ── Per-Page Accent Variables ── */
body[data-service="home"] {
  --hero-accent: #B71C1C;
  --hero-accent-rgb: 183, 28, 28;
}

body[data-service="access-control"] {
  --hero-accent: #1565C0;
  --hero-accent-rgb: 21, 101, 192;
}

body[data-service="cctv-systems"] {
  --hero-accent: #E65100;
  --hero-accent-rgb: 230, 81, 0;
}

body[data-service="intruder-alarms"] {
  --hero-accent: #2E7D32;
  --hero-accent-rgb: 46, 125, 50;
}

body[data-service="contact"] {
  --hero-accent: #6A1B9A;
  --hero-accent-rgb: 106, 27, 154;
}

body[data-service="faq"] {
  --hero-accent: #F57F17;
  --hero-accent-rgb: 245, 127, 23;
}

body[data-service="about"] {
  --hero-accent: #00838F;
  --hero-accent-rgb: 0, 131, 143;
}

/* ── HOME: slide from LEFT, cards from BOTTOM ── */
body[data-service="home"] .hero.hero--left .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

body[data-service="home"] .hero.hero--left .hero-subtitle.fade-in {
  animation-delay: 0.18s;
}

body[data-service="home"] .hero.hero--left .hero-cta-row.fade-in {
  animation-delay: 0.34s;
}

body[data-service="home"] .hero.hero--left .hero-feature-grid.fade-in {
  animation-name: heroSlideFromBottom;
  animation-delay: 0.46s;
}

body[data-service="home"] .hero.hero--left .hero-feature-card {
  --hero-glow: rgba(183, 28, 28, 0.45);
  border-left: 3px solid #B71C1C;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

body[data-service="home"] .hero.hero--left .hero-feature-card .hero-feature-divider {
  background: #B71C1C;
}

/* ── ACCESS CONTROL: slide from RIGHT ── */
body[data-service="access-control"] .hero.hero--left .fade-in {
  animation-name: heroSlideFromRight;
}

body[data-service="access-control"] .hero.hero--left .hero-feature-grid.fade-in {
  animation-name: heroSlideFromLeft;
  animation-delay: 0.46s;
}

body[data-service="access-control"] .hero.hero--left .hero-feature-card {
  --hero-glow: rgba(21, 101, 192, 0.45);
  border-left: 3px solid #1565C0;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

body[data-service="access-control"] .hero.hero--left .hero-feature-card .hero-feature-divider {
  background: #1565C0;
}

/* ── CCTV: slide from TOP ── */
body[data-service="cctv-systems"] .hero.hero--left .fade-in {
  animation-name: heroSlideFromTop;
}

body[data-service="cctv-systems"] .hero.hero--left .hero-feature-grid.fade-in {
  animation-name: heroSlideFromRight;
  animation-delay: 0.46s;
}

body[data-service="cctv-systems"] .hero.hero--left .hero-feature-card {
  --hero-glow: rgba(230, 81, 0, 0.45);
  border-left: 3px solid #E65100;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

body[data-service="cctv-systems"] .hero.hero--left .hero-feature-card .hero-feature-divider {
  background: #E65100;
}

/* ── INTRUDER ALARMS: slide from BOTTOM ── */
body[data-service="intruder-alarms"] .hero.hero--left .fade-in {
  animation-name: heroSlideFromBottom;
}

body[data-service="intruder-alarms"] .hero.hero--left .hero-feature-grid.fade-in {
  animation-name: heroSlideFromTop;
  animation-delay: 0.46s;
}

body[data-service="intruder-alarms"] .hero.hero--left .hero-feature-card {
  --hero-glow: rgba(46, 125, 50, 0.45);
  border-left: 3px solid #2E7D32;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

body[data-service="intruder-alarms"] .hero.hero--left .hero-feature-card .hero-feature-divider {
  background: #2E7D32;
}

/* ── CONTACT: slide from LEFT ── */
body[data-service="contact"] .hero.hero--left .fade-in {
  animation-name: heroSlideFromLeft;
}

body[data-service="contact"] .hero.hero--left .hero-feature-grid.fade-in {
  animation-name: heroSlideFromRight;
  animation-delay: 0.46s;
}

body[data-service="contact"] .hero.hero--left .hero-feature-card {
  --hero-glow: rgba(106, 27, 154, 0.45);
  border-left: 3px solid #6A1B9A;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

body[data-service="contact"] .hero.hero--left .hero-feature-card .hero-feature-divider {
  background: #6A1B9A;
}

/* ── FAQ: slide from RIGHT ── */
body[data-service="faq"] .hero.hero--left .fade-in {
  animation-name: heroSlideFromRight;
}

body[data-service="faq"] .hero.hero--left .hero-feature-grid.fade-in {
  animation-name: heroSlideFromLeft;
  animation-delay: 0.46s;
}

body[data-service="faq"] .hero.hero--left .hero-feature-card {
  --hero-glow: rgba(245, 127, 23, 0.45);
  border-left: 3px solid #F57F17;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

body[data-service="faq"] .hero.hero--left .hero-feature-card .hero-feature-divider {
  background: #F57F17;
}

/* ── ABOUT: slide from TOP ── */
body[data-service="about"] .hero.hero--left .fade-in {
  animation-name: heroSlideFromTop;
}

body[data-service="about"] .hero.hero--left .hero-feature-grid.fade-in {
  animation-name: heroSlideFromBottom;
  animation-delay: 0.46s;
}

body[data-service="about"] .hero.hero--left .hero-feature-card {
  --hero-glow: rgba(0, 131, 143, 0.45);
  border-left: 3px solid #00838F;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

body[data-service="about"] .hero.hero--left .hero-feature-card .hero-feature-divider {
  background: #00838F;
}

/* ── SVG Underline Draw Animation ── */
@keyframes heroUnderlineDraw {
  0% {
    stroke-dashoffset: 320;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.hero-underline-svg {
  display: block;
  width: clamp(180px, 40%, 320px);
  height: 8px;
  margin-top: 6px;
  overflow: visible;
}

.hero-underline-svg line {
  stroke: var(--hero-accent, #B71C1C);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: heroUnderlineDraw 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

/* ── Scroll Indicator ── */
@keyframes scrollMouseDot {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(8px);
    opacity: 0.3;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes scrollMouseBounce {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(6px);
  }
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 5;
  transition: opacity 0.5s ease;
  animation: scrollMouseBounce 2.4s ease-in-out infinite;
}

.hero-scroll-indicator.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hero-scroll-mouse {
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  position: relative;
}

.hero-scroll-mouse::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  animation: scrollMouseDot 1.8s ease-in-out infinite;
}

.hero-scroll-arrow {
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  border-bottom: 2px solid rgba(255, 255, 255, 0.7);
  transform: rotate(45deg);
  opacity: 0.8;
  margin-top: -2px;
}

/* ── Ambient Breathing Gradient Orb ── */
@keyframes heroOrbBreathe {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.18;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 0.28;
  }
}

.hero.hero--left::before {
  content: '';
  position: absolute;
  top: 45%;
  left: 30%;
  width: clamp(360px, 50vw, 700px);
  height: clamp(360px, 50vw, 700px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hero-accent-rgb, 183, 28, 28), 0.35) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(1);
  animation: heroOrbBreathe 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* ── Glassmorphism Feature Cards ── */
.hero-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
  width: 100%;
  max-width: 1000px;
}

.hero-feature-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(10px, 1.2vw, 16px);
  padding: clamp(16px, 2vw, 24px);
  border-radius: 14px;
  text-decoration: none;
  color: #ffffff;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(160deg, rgba(34, 38, 45, 0.78) 0%, rgba(17, 19, 24, 0.82) 100%);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-left: 3px solid var(--hero-accent, #B71C1C);
}

.hero-feature-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 18px 2px rgba(var(--hero-accent-rgb, 183, 28, 28), 0.18);
  color: #ffffff;
}

.hero-feature-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-feature-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.hero-feature-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.hero-feature-body h3 {
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #ffffff;
}

.hero-feature-divider {
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--hero-accent, #B71C1C);
}

.hero-feature-body p {
  font-size: clamp(12px, 1.1vw, 14px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

/* ── Responsive: Tablet ── */
@media (max-width: 1024px) {
  .hero-feature-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}

/* ── Responsive: Mobile ── */
@media (max-width: 767px) {
  .hero.hero--left .hero-content {
    padding: 80px 16px 40px;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .hero-cta-row .btn {
    min-width: 260px;
  }

  .hero-scroll-indicator {
    bottom: 14px;
  }

  .hero-scroll-mouse {
    width: 22px;
    height: 36px;
  }

  .hero-scroll-arrow {
    width: 10px;
    height: 10px;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {

  .hero.hero--left .fade-in,
  .hero.hero--left .hero-feature-card {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .hero-underline-svg line {
    animation: none !important;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .hero-scroll-indicator,
  .hero-scroll-mouse::before {
    animation: none !important;
  }

  .hero.hero--left::before {
    animation: none !important;
    opacity: 0.2;
  }
}

/* ============================================================
   FXSE GLOBAL OVERRIDES — Header, Spacing, Page Layouts
   ============================================================ */

/* ── Header: Vertical centering + logo-driven height ── */
.header .header-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 90px !important;
  padding: 0 30px !important;
  position: relative !important;
}
.header.scrolled .header-content {
  min-height: 64px !important;
  padding: 0 30px !important;
}
.header .logo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.header .logo a {
  display: flex !important;
  align-items: center !important;
}
.header .logo img {
  height: 56px !important;
  width: auto !important;
  border-radius: 8px !important;
  object-fit: contain !important;
  transition: height 0.3s ease !important;
}
.header.scrolled .logo img {
  height: 48px !important;
}
.header .header-buttons {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
}
@media (min-width: 1200px) {
  .header nav {
    display: flex !important;
    align-items: center !important;
  }
  .header .nav-menu {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
  }
}
@media (max-width: 1199px) {
  .header .header-content {
    min-height: 64px !important;
    padding: 0 16px !important;
  }
  .header .logo img {
    height: 48px !important;
  }
  .header.scrolled .logo img {
    height: 40px !important;
  }
  .header .mobile-menu-toggle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    order: 3 !important;
  }
  .header .header-buttons {
    order: 2 !important;
  }
  .header .logo {
    order: 1 !important;
  }
}

/* ── Section Gaps: var(--inter-section-gap) top + bottom = consistent visual gap ── */
.reviews-section,
.services-section,
.booking-section,
.why-choose,
.faq-section,
.about-service-description,
.gallery-section {
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: 0 !important;
}

/* Reviews: 0 gap between Google logo and iframe */
.reviews-container {
  gap: 0 !important;
}
.rating-summary {
  margin-bottom: 0 !important;
}
.facebook-reviews-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.review-count {
  margin-bottom: 0 !important;
}

/* CTA Banner gap */
.desktop-cta-banner-container {
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: var(--inter-section-gap) !important;
}
.desktop-cta-banner {
  padding: 24px 0;
}

/* Mobile override no longer needed — --inter-section-gap: clamp(24px, 3.5vw, 40px) scales automatically */

/* ── About page layout ── */
body[data-service="about"] .about-service-description {
  padding-top: calc(var(--header-height, 80px) + 60px);
}

/* ── Contact page layout ── */
body[data-service="contact"] .contact-main-section {
  padding-top: calc(var(--header-height, 80px) + 60px);
}

/* ── FAQ page layout ── */
body[data-service="faq"] .faq-section:first-child,
body[data-service="faq"] > div:first-child {
  padding-top: calc(var(--header-height, 80px) + 48px);
}

/* ── Blog pages ── */
body[data-service="blogs"] .article-hero {
  padding-top: calc(var(--header-height, 80px) + 80px);
}
body[data-service="blogs"] .article-layout {
  padding-top: 48px;
  padding-bottom: 80px;
}

/* ── Project pages ── */
body[data-service="projects"] .project-hero {
  padding-top: calc(var(--header-height, 80px) + 60px);
  padding-bottom: 60px;
}

/* ── Utility pages (404, privacy, terms, thank-you, sitemap) ── */
body[data-service="404"] .utility-main,
body[data-service="privacy"] main,
body[data-service="terms"] main,
body[data-service="thank-you"] main,
body[data-service="sitemap"] main {
  padding-top: calc(var(--header-height, 80px) + 60px);
}

/* ── Active hero feature card ── */
.hero-feature-card.active {
  box-shadow: 0 0 0 3px var(--hero-accent, #B71C1C),
              0 0 20px rgba(var(--hero-accent-rgb, 183, 28, 28), 0.4) !important;
  transform: translateY(-3px);
}
.hero-feature-card.active:hover {
  transform: translateY(-5px);
}

/* ── Feature card grid consistent gap ── */
.hero-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 960px;
}
@media (max-width: 640px) {
  .hero-feature-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 0 auto;
  }
}

/* ── Hero feature card styling ── */
.hero-feature-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.hero-feature-card:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.hero-feature-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}
.hero-feature-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.hero-feature-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.hero-feature-body p {
  font-size: 13px;
  margin: 0;
  opacity: 0.8;
  line-height: 1.4;
}
.hero-feature-divider {
  width: 32px;
  height: 2px;
  background: var(--hero-accent, #B71C1C);
  margin: 6px 0;
  border-radius: 2px;
}

/* ── Spec card text wrapping fix ── */
.about-specs-main-value,
.about-specs-secondary-value {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
}

/* ── Call Pill (HTML/SVG) ── */
.cta-pill.call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #DC2626;
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 30px;
  white-space: nowrap;
  transition: background 0.3s ease;
}
.cta-pill.call:hover { background: #B91C1C; }
.call-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  flex-shrink: 0;
}
.call-pill-icon svg { width: 14px; height: 14px; fill: #FFFFFF !important; }
.call-pill-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.call-pill-label {
  font-size: 10px;
  opacity: 0.95;
  letter-spacing: 0.3px;
  color: #FFFFFF;
}
.call-pill-number {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #FFFFFF;
}

/* ── WhatsApp Pill (HTML/SVG) ── */
.cta-pill.whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 30px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.3s ease;
}
.cta-pill.whatsapp:hover { background: #1da851; }
.whatsapp-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.whatsapp-pill-icon svg { width: 18px; height: 18px; }
.whatsapp-pill-text { font-size: 14px; font-weight: 600; }

@media (max-width: 1100px) {
  .call-pill-text { display: none; }
  .cta-pill.call { padding: 8px; border-radius: 50%; }
  .whatsapp-pill-text { display: none; }
  .cta-pill.whatsapp { padding: 8px; border-radius: 50%; }
}

/* ── Blog/Project card hover ── */
.blog-card,
.project-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover,
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* ── FINAL: Hero gap fixes (must be last to win specificity) ── */
.hero,
.hero.hero--left,
section.hero,
section.hero.hero--left {
  padding-top: clamp(150px, 18vw, 200px) !important;
  padding-bottom: 0 !important;
}
.hero.hero--left .hero-content {
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}

/* ── (logo positioning moved to UX POLISH block below) ── */

/* ── FIX: Left-align hero content to logo x-position (30px from left) ── */
.hero.hero--left {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body[data-service] .hero.hero--left .hero-content {
  align-items: flex-start !important;
  text-align: left !important;
  max-width: 100% !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body[data-service] .hero .hero-intro {
  align-items: flex-start !important;
  text-align: left !important;
}
body[data-service] .hero .hero-cta-row {
  justify-content: flex-start !important;
}

/* ── FIX: Call button same size as Get Free Quote button ── */
.hero-cta-row .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: auto !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  height: auto !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-outline-light,
body[data-service] .hero .hero-cta-row .btn.btn-primary {
  padding: 16px 40px !important;
  font-size: 17px !important;
  height: 53px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.hero-cta-row .btn-outline-light svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: 0;
}

/* ── (moved to UX POLISH block below) ── */

/* ── FIX: Align feature card grid to the right ── */
body[data-service] .hero .hero-feature-grid {
  width: auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* ── FIX: Reduce gap above "Our Services" title ── */
.services-section .section-title,
.services-section .services-title,
.services-section h2:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   REDESIGN: Cleaner hero (no feature cards) + compact services
   ══════════════════════════════════════════════════════════════ */

/* ── Hero: content sits at bottom, no forced min-height ── */
body[data-service="home"] .hero.hero--left .hero-content {
  gap: clamp(16px, 2.5vw, 28px) !important;
  min-height: auto !important;
  justify-content: flex-end !important;
}
body[data-service="home"] .hero .hero-intro {
  max-width: 680px !important;
}
body[data-service="home"] .hero .hero-subtitle {
  font-size: clamp(15px, 1.6vw, 20px) !important;
  line-height: 1.5 !important;
  max-width: 560px !important;
  opacity: 0.9;
}

/* ── (reviews background moved to UX POLISH block — now white) ── */

/* ── Compact Service Cards: 2 x 2 grid for 4 services ── */
body[data-service] .services-section .services-grid.services-grid--compact {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  max-width: 1100px !important;
}
body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact {
  grid-column: auto !important;
}

.service-card-compact {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card-compact:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.service-card-compact__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}
.service-card-compact__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.service-card-compact:hover .service-card-compact__image img {
  transform: scale(1.05);
}

.service-card-compact__body {
  padding: clamp(16px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.service-card-compact__body h3 {
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 700;
  color: var(--text-on-light, #0A0A0F);
  margin: 0;
  line-height: 1.25;
}
.service-card-compact__body p {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.5;
  color: #555;
  margin: 0;
  flex: 1;
}
.service-card-compact__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary, #B71C1C);
  margin-top: 4px;
  transition: gap 0.2s ease;
}
.service-card-compact:hover .service-card-compact__link {
  gap: 10px;
}
.service-card-compact__link svg {
  transition: transform 0.2s ease;
}
.service-card-compact:hover .service-card-compact__link svg {
  transform: translateX(2px);
}

/* Responsive: compact cards */
@media (max-width: 900px) {
  body[data-service] .services-section .services-grid.services-grid--compact {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  body[data-service] .services-section .services-grid.services-grid--compact {
    grid-template-columns: 1fr !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   UX POLISH: Modern refinements for a cleaner, more premium feel
   ══════════════════════════════════════════════════════════════ */

/* ── Header: Lower the logo so it sits a bit lower than center ── */
.header .logo {
  align-self: flex-start !important;
  margin-top: 34px !important;
  top: auto !important;
  transform: none !important;
}
.header.scrolled .logo {
  align-self: center !important;
  margin-top: 0 !important;
  top: auto !important;
  transform: none !important;
}

/* ── Hero: refined typography and layout ── */
body[data-service="home"] .hero.hero--left {
  min-height: auto !important;
}
body[data-service="home"] .hero h1 {
  font-size: clamp(32px, 4vw, 56px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
body[data-service="home"] .hero .hero-underline-svg {
  width: clamp(80px, 12vw, 140px) !important;
  height: 4px !important;
  margin-top: clamp(12px, 1.5vw, 20px) !important;
  margin-bottom: clamp(12px, 1.5vw, 20px) !important;
}
body[data-service="home"] .hero .hero-underline-svg line {
  stroke: var(--color-primary, #B71C1C) !important;
  stroke-width: 4 !important;
}
body[data-service="home"] .hero .hero-subtitle {
  margin-top: 0 !important;
  letter-spacing: 0.01em !important;
}
body[data-service="home"] .hero .hero-cta-row {
  margin-top: clamp(16px, 2.5vw, 28px) !important;
  gap: 14px !important;
}
body[data-service] .hero .hero-cta-row .btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.25s ease !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-primary {
  box-shadow: 0 4px 14px rgba(var(--hero-accent-rgb, 183,28,28), 0.35) !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(var(--hero-accent-rgb, 183,28,28), 0.5) !important;
  transform: translateY(-1px) !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-outline-light {
  border-width: 2px !important;
  border-color: var(--hero-accent, rgba(255,255,255,0.5)) !important;
  backdrop-filter: blur(4px) !important;
  background: rgba(255,255,255,0.06) !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-outline-light:hover {
  background: rgba(var(--hero-accent-rgb, 183,28,28), 0.15) !important;
  border-color: var(--hero-accent, rgba(255,255,255,0.8)) !important;
  transform: translateY(-1px) !important;
}

/* ── Hero: reduce bottom gap (was 107px, now ~40px) ── */
body[data-service="home"] .hero.hero--left .hero-content {
  min-height: auto !important;
  justify-content: flex-end !important;
}
.hero,
.hero.hero--left,
section.hero,
section.hero.hero--left {
  padding-bottom: var(--inter-section-gap) !important;
}

/* ── Scroll indicator: two chevrons in the hero bottom area ── */
.hero-scroll-indicator {
  bottom: 12px !important;
  top: auto !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: -4px !important;
  opacity: 0.9 !important;
  animation: none !important;
  z-index: 10 !important;
}
.hero-scroll-indicator .scroll-chevrons:last-child {
  margin-top: -10px;
}
/* Old mouse/arrow hidden — replaced by chevrons */
.hero-scroll-mouse,
.hero-scroll-arrow {
  display: none !important;
}

/* ── Animated double-chevron scroll indicator (uses page accent) ── */
.scroll-chevrons {
  display: block;
}
/* White glow backing chevrons — behind the colored ones */
.scroll-chevron-glow {
  stroke: #ffffff !important;
  opacity: 0.7;
  filter: none !important;
}
.scroll-chevron {
  stroke: var(--hero-accent, white) !important;
  filter: none !important;
}
.scroll-chevron--1 {
  animation: chevronBounce 1.8s ease-in-out infinite;
}
.scroll-chevron--2 {
  animation: chevronBounce 1.8s ease-in-out 0.3s infinite;
}
@keyframes chevronBounce {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* ── Section titles: clean modern styling, NO underline decoration ── */
body[data-service="home"] .section-title,
body[data-service="home"] .services-section h2,
body[data-service="home"] .reviews-section h2 {
  font-size: clamp(26px, 3vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-on-light, #0A0A0F) !important;
  position: relative !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}
/* Remove any ::after underlines from section titles */
body[data-service="home"] .services-section .section-title::after,
body[data-service="home"] .reviews-section h2::after {
  content: none !important;
  display: none !important;
}

/* ── Reviews section: white, no bottom padding (services section has its own top) ── */
.reviews-section {
  background: #ffffff !important;
  border-top: none !important;
  border-bottom: none !important;
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Pull the reviews title down so it layers above the iframe area */
body[data-service="home"] .reviews-section .facebook-reviews-header,
body[data-service="services"] .reviews-section .facebook-reviews-header {
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: -20px !important;
  padding-bottom: 0 !important;
}
body[data-service="home"] .reviews-section .facebook-reviews-header .rating-summary,
body[data-service="services"] .reviews-section .facebook-reviews-header .rating-summary {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body[data-service="home"] .reviews-section .lc_reviews_widget,
body[data-service="services"] .reviews-section .lc_reviews_widget {
  position: relative !important;
  z-index: 1 !important;
}

/* ── Services section: clean gaps, no border ── */
body[data-service="home"] .services-section,
body[data-service="services"] .services-section {
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px) var(--inter-section-gap) !important;
  background: #ffffff !important;
}
body[data-service="home"] .services-section .services-container,
body[data-service="services"] .services-section .services-container {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--inter-section-gap) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
/* Services title: no extra margins */
body[data-service="home"] .services-section .section-title,
body[data-service="services"] .services-section .section-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: clamp(24px, 2.8vw, 36px) !important;
}

/* ── Service cards: elevated polish ── */
.service-card-compact {
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
.service-card-compact:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-6px) !important;
  border-color: rgba(183, 28, 28, 0.12) !important;
}
.service-card-compact__body {
  text-align: left !important;
}
.service-card-compact__body h3 {
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
.service-card-compact__body p {
  color: #666 !important;
  line-height: 1.55 !important;
}

/* ── Standardized inter-section gaps (40px everywhere, all pages) ── */
body[data-service] .booking-section {
  border-top: none !important;
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: var(--inter-section-gap) !important;
}
/* Remove bottom padding when next section has same bg (avoid double gaps) */
body[data-service] .reviews-section {
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: 0 !important;
}
body[data-service] .desktop-cta-banner-container {
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: 0 !important;
}
body[data-service] .why-choose {
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: 0 !important;
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
}
body[data-service] .why-choose .why-choose-container {
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: var(--inter-section-gap) !important;
  gap: var(--inter-section-gap) !important;
}
body[data-service] .why-choose .why-choose-heading {
  margin-bottom: 0 !important;
}

/* Service page sections: standardize gaps */
body[data-service] .about-service-description {
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: var(--space-5) !important;
}
body[data-service] .service-gallery,
body[data-service] .gallery-section {
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: var(--inter-section-gap) !important;
}

/* Reviews on service pages: gap above (matches gallery rhythm), no bottom (FAQ has top) */
body[data-service]:not([data-service="home"]):not([data-service="services"]) .reviews-section {
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: 0 !important;
}

/* Footer: use inter-section-gap instead of 80px service-content-gap */
body[data-service] .footer {
  padding-top: var(--inter-section-gap) !important;
}

/* FAQ section — all pages */
body[data-service] .faq-section {
  padding-top: var(--inter-section-gap) !important;
  padding-bottom: var(--inter-section-gap) !important;
  padding-left: clamp(16px, 3vw, 32px) !important;
  padding-right: clamp(16px, 3vw, 32px) !important;
  background: #ffffff !important;
}
body[data-service] .faq-section .faq-container {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--inter-section-gap) !important;
}
body[data-service] .faq-section .section-title {
  margin-bottom: 0 !important;
}
body[data-service] .faq-section .faq-body {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--inter-section-gap) !important;
}
body[data-service] .faq-section .faq-filters {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, auto) !important;
  justify-content: center !important;
  gap: 12px !important;
}
@media (max-width: 560px) {
  body[data-service] .faq-section .faq-filters {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
body[data-service] .faq-section .faq-category-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body[data-service] .faq-section .faq-items {
  margin-top: 0 !important;
}

/* Footer — all pages */
body[data-service] .footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px) clamp(16px, 2vw, 24px) !important;
}

/* ── Smooth scroll behavior ── */
html {
  scroll-behavior: smooth;
}

/* ── Better focus styles for accessibility ── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-primary, #B71C1C) !important;
  outline-offset: 3px !important;
}

/* ── Scroll indicator: pulse animation ── */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   TABLET / RESPONSIVE FIXES
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Switch to hamburger menu at 1200px (was 1100px) to prevent nav overlap ── */
@media (max-width: 1199px) {
  nav .nav-menu {
    display: none !important;
  }
  .mobile-menu-toggle {
    display: flex !important;
    position: absolute !important;
    right: 20px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* ── 2. Tablet CTA pills: proper pill shapes (not circles) ── */
@media (max-width: 1199px) {
  .cta-pill.call {
    padding: 8px 14px !important;
    border-radius: 30px !important;
    gap: 6px !important;
  }
  .call-pill-text {
    display: flex !important;
  }
  .call-pill-label {
    display: none !important;
  }
  .call-pill-number {
    font-size: 13px !important;
  }
  .cta-pill.whatsapp {
    padding: 8px 14px !important;
    border-radius: 30px !important;
  }
  .whatsapp-pill-text {
    display: inline !important;
    font-size: 13px !important;
  }
}

/* Narrower tablets: show icon-only pills */
@media (max-width: 900px) {
  .call-pill-text { display: none !important; }
  .cta-pill.call { padding: 10px !important; border-radius: 50% !important; min-width: auto !important; }
  .whatsapp-pill-text { display: none !important; }
  .cta-pill.whatsapp { padding: 10px !important; border-radius: 50% !important; min-width: auto !important; }
  .call-pill-icon { width: 24px !important; height: 24px !important; background: none !important; }
  .whatsapp-pill-icon svg { width: 22px !important; height: 22px !important; }
}

/* ── 3. Logo centered vertically on tablet with breathing room ── */
@media (max-width: 1199px) {
  .header .logo {
    align-self: center !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
}

/* ── 4. Mobile menu positioning ── */
/* 1100-1199px: transparent header, big logo — menu below logo */
@media (min-width: 1100px) and (max-width: 1199px) {
  .mobile-menu {
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    top: 96px !important;
  }
  .header:not(.scrolled) .header-content {
    min-height: 80px !important;
  }
  /* When scrolled at this width, tuck under the header */
  .header.scrolled + .mobile-menu,
  .header.scrolled ~ .mobile-menu {
    top: 64px !important;
  }
}
/* <1100px: solid header, small logo — menu right under header, no gap */
@media (max-width: 1099px) {
  .mobile-menu,
  body[data-service] .mobile-menu,
  body[data-service="home"] .mobile-menu {
    position: fixed !important;
    left: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    top: 64px !important;
  }
}

/* ── 5. Hide scroll mouse icon on tablet and mobile ── */
@media (max-width: 1199px) {
  .hero-scroll-indicator {
    display: none !important;
  }
}

/* ── 6. FINAL: Hide "Get a Free Quote" below 1490px (must be last to win) ── */
@media (max-width: 1489px) {
  .header .header-cta-group .btn.btn-primary,
  .header .header-buttons .header-cta-group .btn.btn-primary,
  .header-buttons .btn-primary,
  .header-cta-group .btn-primary {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE & TABLET POLISH
   ══════════════════════════════════════════════════════════════ */

/* ── 7. Mobile hero: center title, subtitle, buttons ── */
@media (max-width: 767px) {
  body[data-service] .hero.hero--left .hero-content {
    align-items: center !important;
    text-align: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body[data-service] .hero .hero-intro {
    align-items: center !important;
    text-align: center !important;
  }
  body[data-service] .hero .hero-cta-row {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  body[data-service] .hero .hero-underline-svg {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── 8. Mobile: hide booking "Get a Free Quote" button ── */
@media (max-width: 767px) {
  .booking-cta {
    display: none !important;
  }
}

/* ── 9. Tablet booking: stack vertically below 1200px ── */
@media (max-width: 1199px) {
  body[data-service] .booking-section .booking-inner {
    grid-template-columns: 1fr !important;
    gap: var(--inter-section-gap) !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body[data-service] .booking-copy {
    text-align: center !important;
  }
  body[data-service] .booking-copy h3 {
    font-size: clamp(26px, 3.5vw, 36px) !important;
  }
  body[data-service] .booking-list {
    text-align: left !important;
    display: inline-block !important;
  }
  body[data-service] .booking-cta {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }
  body[data-service] .booking-ratings {
    justify-content: center !important;
  }
  body[data-service] .phone-mockup-section {
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL PAGE STYLES: Buttons, header, footer, nav — all pages
   ══════════════════════════════════════════════════════════════ */

/* ── CSS variables for all pages ── */
body[data-service] {
  --header-top-gap: 0px;
  --color-primary: #B71C1C;
  --color-secondary: #212121;
  --color-accent: #FF5252;
  --color-dark-base: #0A0A0F;
  --color-light-base: #EEEEEE;
  --color-highlight: #FFCDD2;
  --text-on-light: #0A0A0F;
  --text-on-dark: #FFFFFF;
  --muted-on-dark: rgba(255, 255, 255, 0.75);
  --btn-primary-bg: #B71C1C;
  --btn-primary-hover: #8B1515;
  --btn-hero-bg: #B71C1C;
  --btn-hero-hover: #8B1515;
  --btn-hero-text: #FFFFFF;
  --accent-red-500: #B71C1C;
  --accent-red-600: #8B1515;
  --accent-red-700: #6D1010;
}

/* ── Footer dark background on all pages ── */
body[data-service] .footer,
body[data-service] .footer .footer-bottom {
  background: #0F172A !important;
  color: #FFFFFF !important;
}

/* ── Nav hover: always uses palette primary (not per-page accent) ── */
body[data-service] .header .nav-menu > li > a:hover,
body[data-service] .header .nav-menu > li > a:focus-visible,
body[data-service] .header .nav-menu > li > a[aria-current="page"] {
  color: var(--color-primary) !important;
}
body[data-service] .header .nav-menu > li > a:hover::after,
body[data-service] .header .nav-menu > li > a[aria-current="page"]::after {
  width: 100% !important;
  background: var(--color-primary) !important;
}

/* ── Primary buttons: use page accent color on all pages ── */
body[data-service] .btn.btn-primary,
body[data-service] .cta-banner-btn,
body[data-service] .btn.btn-service {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  filter: none !important;
}
body[data-service] .btn.btn-primary::before,
body[data-service] .cta-banner-btn::before,
body[data-service] .btn.btn-service::before {
  background: transparent !important;
  opacity: 0 !important;
}
body[data-service] .btn.btn-primary:hover,
body[data-service] .cta-banner-btn:hover,
body[data-service] .btn.btn-service:hover {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ── Header CTA button colors on all pages ── */
body[data-service] .header .header-cta-group .btn.btn-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #FFFFFF !important;
}
body[data-service] .header .header-cta-group .btn.btn-primary:hover,
body[data-service] .header .header-cta-group .btn.btn-primary:focus-visible {
  background: var(--btn-primary-hover) !important;
  border-color: var(--btn-primary-hover) !important;
  color: #FFFFFF !important;
}

/* ── Logo sizing: consistent across all pages ── */
@media (min-width: 1200px) {
  body[data-service] .header .logo a {
    height: 88px !important;
    max-height: 88px !important;
    width: auto !important;
    max-width: none !important;
  }
  body[data-service] .header.scrolled .logo a {
    height: 54px !important;
    max-height: 54px !important;
    width: auto !important;
    max-width: none !important;
  }
  body[data-service] .header .logo img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    display: block !important;
  }
}
@media (max-width: 1199px) {
  body[data-service] .header .logo a {
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
    max-width: none !important;
  }
  body[data-service] .header .logo img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   HERO ANIMATIONS & PER-PAGE ACCENT HIGHLIGHTS
   ══════════════════════════════════════════════════════════════ */

/* ── Animation Keyframes ── */
@keyframes heroSlideFromLeft {
  0%   { opacity: 0; transform: translateX(-70px) scale(0.97); }
  60%  { opacity: 1; transform: translateX(6px) scale(1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes heroSlideFromRight {
  0%   { opacity: 0; transform: translateX(70px) scale(0.97); }
  60%  { opacity: 1; transform: translateX(-6px) scale(1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes heroSlideFromTop {
  0%   { opacity: 0; transform: translateY(-65px) scale(0.97); }
  60%  { opacity: 1; transform: translateY(5px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroSlideFromBottom {
  0%   { opacity: 0; transform: translateY(65px) scale(0.97); }
  60%  { opacity: 1; transform: translateY(-5px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroFloatIn {
  0%   { opacity: 0; transform: translateY(22px) scale(0.985); }
  55%  { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroUnderlineDraw {
  0%   { stroke-dashoffset: 320; opacity: 0; }
  15%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes heroOrbBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.18; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 0.28; }
}

/* ── Base hero animation: staggered float-in ── */
.hero .fade-in {
  opacity: 0;
  animation: heroFloatIn 1.2s cubic-bezier(0.16, 0.7, 0.3, 1) forwards;
  will-change: transform, opacity;
}
.hero .hero-subtitle.fade-in { animation-delay: 0.15s; }
.hero .hero-cta-row.fade-in  { animation-delay: 0.30s; }

/* ── SVG underline draw animation ── */
.hero-underline-svg {
  display: block;
  overflow: visible;
}
.hero-underline-svg line {
  stroke: var(--hero-accent, #B71C1C);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: heroUnderlineDraw 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

/* ── Ambient breathing orb (uses per-page accent) ── */
.hero.hero--left {
  position: relative;
  overflow: hidden;
}
.hero.hero--left::before {
  content: '';
  position: absolute;
  top: 45%;
  left: 30%;
  width: clamp(360px, 50vw, 700px);
  height: clamp(360px, 50vw, 700px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hero-accent-rgb, 183,28,28), 0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(1);
  animation: heroOrbBreathe 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.hero.hero--left .hero-content {
  position: relative;
  z-index: 1;
}
.hero.hero--left .hero-scroll-indicator {
  z-index: 1;
}

/* ── Call button outline uses accent color ── */
.hero .hero-cta-row .btn.btn-outline-light {
  border-color: var(--hero-accent, rgba(255,255,255,0.5)) !important;
}
.hero .hero-cta-row .btn.btn-outline-light:hover {
  border-color: var(--hero-accent, rgba(255,255,255,0.8)) !important;
  background: rgba(var(--hero-accent-rgb, 183,28,28), 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   PER-PAGE ACCENT COLORS & ANIMATION DIRECTIONS
   ══════════════════════════════════════════════════════════════ */

/* ── HOME: Red, slides from left ── */
body[data-service="home"] {
  --hero-accent: #B71C1C;
  --hero-accent-rgb: 183, 28, 28;
}
body[data-service="home"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── ACCESS CONTROL: Blue, slides from right ── */
body[data-service="access-control"] {
  --hero-accent: #1565C0;
  --hero-accent-rgb: 21, 101, 192;
}
body[data-service="access-control"] .hero .fade-in {
  animation-name: heroSlideFromRight;
  animation-duration: 1.2s;
}

/* ── CCTV SYSTEMS: Teal, slides from top ── */
body[data-service="cctv-systems"] {
  --hero-accent: #00897B;
  --hero-accent-rgb: 0, 137, 123;
}
body[data-service="cctv-systems"] .hero .fade-in {
  animation-name: heroSlideFromTop;
  animation-duration: 1.2s;
}

/* ── INTRUDER ALARMS: Amber, slides from bottom ── */
body[data-service="intruder-alarms"] {
  --hero-accent: #E65100;
  --hero-accent-rgb: 230, 81, 0;
}
body[data-service="intruder-alarms"] .hero .fade-in {
  animation-name: heroSlideFromBottom;
  animation-duration: 1.2s;
}

/* ── SERVICES: Green, slides from left ── */
body[data-service="services"] {
  --hero-accent: #2E7D32;
  --hero-accent-rgb: 39, 125, 50;
}
body[data-service="services"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── ABOUT: Purple, slides from top ── */
body[data-service="about"] {
  --hero-accent: #6A1B9A;
  --hero-accent-rgb: 106, 27, 154;
}
body[data-service="about"] .hero .fade-in {
  animation-name: heroSlideFromTop;
  animation-duration: 1.2s;
}

/* ── CONTACT: Deep blue, slides from right ── */
body[data-service="contact"] {
  --hero-accent: #283593;
  --hero-accent-rgb: 40, 53, 147;
}
body[data-service="contact"] .hero .fade-in {
  animation-name: heroSlideFromRight;
  animation-duration: 1.2s;
}

/* ── FAQ: Warm amber, slides from bottom ── */
body[data-service="faq"] {
  --hero-accent: #F57F17;
  --hero-accent-rgb: 245, 127, 23;
}
body[data-service="faq"] .hero .fade-in {
  animation-name: heroSlideFromBottom;
  animation-duration: 1.2s;
}

/* ── BLOGS: Cyan, slides from left ── */
body[data-service="blogs"] {
  --hero-accent: #0097A7;
  --hero-accent-rgb: 0, 151, 167;
}
body[data-service="blogs"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── PROJECTS: Deep orange, slides from right ── */
body[data-service="projects"] {
  --hero-accent: #D84315;
  --hero-accent-rgb: 216, 67, 21;
}
body[data-service="projects"] .hero .fade-in {
  animation-name: heroSlideFromRight;
  animation-duration: 1.2s;
}

/* ── PRIVACY/TERMS/SITEMAP: Slate, slides from top ── */
body[data-service="privacy"],
body[data-service="terms"],
body[data-service="sitemap"] {
  --hero-accent: #546E7A;
  --hero-accent-rgb: 84, 110, 122;
}
body[data-service="privacy"] .hero .fade-in,
body[data-service="terms"] .hero .fade-in,
body[data-service="sitemap"] .hero .fade-in {
  animation-name: heroSlideFromTop;
  animation-duration: 1.2s;
}

/* ── Reduced motion: disable all hero animations ── */
@media (prefers-reduced-motion: reduce) {
  .hero .fade-in,
  .hero .btn-primary {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .hero-underline-svg line {
    animation: none !important;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .hero.hero--left::before {
    animation: none !important;
    opacity: 0.2;
  }
}

/* ══════════════════════════════════════════════════════════════
   BLOG & PROJECT LISTING PAGES
   ══════════════════════════════════════════════════════════════ */

/* ── Blog listing ── */
.blog-listing-section {
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px) !important;
  background: #ffffff;
}
.blog-listing-container {
  max-width: 1100px;
  margin: 0 auto;
}
.blog-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: clamp(20px, 2.5vw, 32px) !important;
  margin-bottom: 0 !important;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.blog-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}
.blog-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-primary, #B71C1C);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 1;
}
.blog-card-content {
  padding: clamp(16px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.blog-card-title {
  font-size: clamp(17px, 1.5vw, 21px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0A0A0F !important;
  margin: 0 !important;
}
.blog-card-excerpt {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.55;
  color: #555;
  margin: 0;
  flex: 1;
}
.blog-card-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: #888;
}
.blog-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary, #B71C1C);
  margin-top: 4px;
  transition: gap 0.2s ease;
}
.blog-card:hover .blog-card-btn {
  gap: 10px;
}

/* ── Project listing ── */
.projects-listing-section {
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px) !important;
  background: #ffffff;
}
.projects-listing-container {
  max-width: 900px;
  margin: 0 auto;
}
.projects-grid {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 28px);
}

/* Desktop: horizontal card (image left, content right) */
body[data-service="projects"] .project-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 200px;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
body[data-service="projects"] .project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

/* Image: square, fills full height of card */
body[data-service="projects"] .project-card .project-card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: auto;
  height: 100%;
}
body[data-service="projects"] .project-card .project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
body[data-service="projects"] .project-card:hover .project-card-image img {
  transform: scale(1.05);
}
.project-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--color-primary, #B71C1C);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 6px;
  z-index: 1;
}

/* Content: left-aligned with breathing room */
body[data-service="projects"] .project-card .project-card-content {
  padding: clamp(20px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.project-card-title {
  font-size: clamp(18px, 1.6vw, 22px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #0A0A0F !important;
  margin: 0 !important;
}
.project-card-description {
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.6;
  color: #555;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.project-card-meta {
  display: flex;
  gap: 6px;
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}
body[data-service="projects"] .project-card .project-card-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--color-primary, #B71C1C) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin-top: 4px !important;
  transition: gap 0.2s ease !important;
}
body[data-service="projects"] .project-card:hover .project-card-btn {
  gap: 10px !important;
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
  body[data-service="projects"] .project-card {
    grid-template-columns: 1fr;
  }
  body[data-service="projects"] .project-card .project-card-image {
    aspect-ratio: 16 / 10;
    height: auto;
  }
}

/* ── Blog/Project listing gaps ── */
/* Remove bottom padding when followed by same-bg section; keep when last before footer */
body[data-service] .blog-listing-section {
  padding-bottom: var(--inter-section-gap) !important;
}
body[data-service] .projects-listing-section {
  padding-bottom: var(--inter-section-gap) !important;
}

/* ══════════════════════════════════════════════════════════════
   ARTICLE & PROJECT DETAIL PAGES
   ══════════════════════════════════════════════════════════════ */

/* ── Article Hero (blog posts) ── */
.article-hero {
  background: var(--color-secondary, #212121);
  padding: clamp(120px, 15vw, 180px) clamp(16px, 3vw, 32px) var(--inter-section-gap);
  color: #fff;
}
.article-hero-content {
  max-width: 800px;
  margin: 0 auto;
}
.article-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.08);
  padding: 6px 14px;
  border-radius: 20px;
}
.article-breadcrumb a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
}
.article-breadcrumb a:hover { color: #fff; }
.article-breadcrumb span[aria-current] {
  color: rgba(255,255,255,0.5);
}
.article-hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 16px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.article-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255,255,255,0.75);
}
.article-meta-item svg {
  opacity: 0.6;
}

/* ── Article Layout (sidebar + content) ── */
.article-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--inter-section-gap);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px);
}
@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
  }
  .toc-sidebar { order: -1; }
}

/* ── TOC Sidebar ── */
.toc-card {
  position: sticky;
  top: 100px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.toc-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #333;
  margin-bottom: 12px;
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.toc-list li {
  margin-bottom: 8px;
}
.toc-list a {
  font-size: 13px;
  color: #555;
  text-decoration: none;
  line-height: 1.4;
  display: block;
  padding: 4px 0;
  border-left: 2px solid transparent;
  padding-left: 10px;
  transition: color 0.2s, border-color 0.2s;
}
.toc-list a:hover {
  color: var(--color-primary, #B71C1C);
  border-left-color: var(--color-primary, #B71C1C);
}

/* ── Article Content ── */
.article-content {
  max-width: 720px;
}
.article-content h2 {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--color-primary, #B71C1C);
  margin: var(--inter-section-gap) 0 16px;
  letter-spacing: -0.01em;
}
.article-content h2:first-of-type {
  margin-top: 0;
}
.article-content p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin: 0 0 16px;
}
.article-content ul, .article-content ol {
  margin: 0 0 16px;
  padding-left: 20px;
}
.article-content li {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 8px;
}
.article-hero-image {
  margin-bottom: var(--inter-section-gap);
  border-radius: 14px;
  overflow: hidden;
}
.article-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Mid-article CTA ── */
.mid-article-cta {
  background: var(--color-secondary, #212121);
  color: #fff;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 14px;
  margin: var(--inter-section-gap) 0;
}
.mid-article-cta h3 {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  margin: 0 0 10px;
}
.mid-article-cta p {
  color: rgba(255,255,255,0.85) !important;
  margin-bottom: 16px !important;
}
.mid-article-cta .btn {
  border-radius: 8px !important;
}

/* ── Related Articles ── */
.related-articles {
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px);
  background: #f9f9f9;
}
.related-articles-container {
  max-width: 1100px;
  margin: 0 auto;
}
.related-articles h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  text-align: center;
  margin: 0 0 var(--inter-section-gap);
  letter-spacing: -0.02em;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* ── Article Bottom CTA ── */
.article-bottom-cta {
  background: var(--color-primary, #B71C1C);
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px);
  text-align: center;
}
.article-bottom-cta h2 {
  color: #fff;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}
.article-bottom-cta p {
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  margin: 0 0 24px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.article-cta-btn {
  background: #fff !important;
  color: var(--color-primary, #B71C1C) !important;
  border-color: #fff !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  border-radius: 8px !important;
}
.article-cta-btn:hover {
  background: rgba(255,255,255,0.9) !important;
}

/* ── Project Hero ── */
.project-hero {
  background: var(--color-secondary, #212121);
  padding: clamp(120px, 15vw, 180px) clamp(16px, 3vw, 32px) var(--inter-section-gap);
  color: #fff;
}
.project-hero-content {
  max-width: 800px;
  margin: 0 auto;
}
.project-hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
}
.project-hero-subtitle {
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255,255,255,0.8);
  margin: 0 0 24px;
}

/* ── Quick Facts ── */
.quick-facts {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: clamp(16px, 2vw, 24px);
  backdrop-filter: blur(8px);
}
.quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 600px) {
  .quick-facts-grid { grid-template-columns: 1fr; }
}
.quick-fact-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  display: block;
  margin-bottom: 2px;
}
.quick-fact-value {
  font-size: 15px;
}

/* ── Project Content ── */
.project-content {
  background: #fff;
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px) !important;
}
.project-content .project-content-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.project-content-container {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px);
}
.project-content h2 {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--color-primary, #B71C1C);
  margin: var(--inter-section-gap) 0 16px;
  letter-spacing: -0.01em;
}
.project-content h2:first-of-type {
  margin-top: 0;
}
.project-content p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin: 0 0 16px;
}
.project-content ul, .project-content ol {
  margin: 0 0 16px;
  padding-left: 20px;
}
.project-content li {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 8px;
}

/* ══════════════════════════════════════════════════════════════
   IMPHS-DERIVED FIXES (cross-template quality checks)
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Blog card border-radius consistency: 14px everywhere ── */
.blog-card {
  border-radius: 14px !important;
}
.blog-card-image {
  border-radius: 14px 14px 0 0 !important;
}
.blog-card-image img {
  border-radius: 0 !important;
}

/* ── 2. Mobile: reviews header visible on all pages ── */
@media (max-width: 767px) {
  body[data-service] .reviews-section .facebook-reviews-header {
    display: block !important;
  }
}

/* ── 3. Gallery items: consistent rounded corners ── */
.gallery-item {
  border-radius: 14px !important;
  overflow: hidden !important;
}
.gallery-item img {
  border-radius: 0 !important;
}

/* ── 4. Services dropdown: use primary color on all pages ── */
body[data-service] .services-dropdown a:hover,
body[data-service] .services-dropdown a:focus-visible {
  background: var(--color-primary, #B71C1C) !important;
  border-left-color: var(--color-highlight, #FFCDD2) !important;
  color: #FFFFFF !important;
}

/* ── 5. Footer contact icon gap: tighter spacing ── */
body[data-service] .footer .contact-item svg {
  margin-right: 12px !important;
}

/* ── 6. Mobile hero subtitle: no ellipsis, natural wrap ── */
@media (max-width: 767px) {
  body[data-service] .hero .hero-subtitle {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
  }
}

/* ── 7. Project gallery section: rounded container ── */
.gallery-section,
.service-gallery {
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* ── 8. Article hero image: rounded corners ── */
.article-hero-image {
  border-radius: 14px !important;
  overflow: hidden !important;
}
.article-hero-image img {
  border-radius: 0 !important;
}

/* ── 9. Project hero: white text, glass quick-facts ── */
body[data-service="projects"] .project-hero {
  background-size: cover !important;
  background-position: center !important;
  padding: clamp(140px, 16vw, 200px) clamp(16px, 3vw, 32px) var(--inter-section-gap) !important;
  color: #FFFFFF !important;
}
body[data-service="projects"] .project-hero h1,
body[data-service="projects"] .project-hero-subtitle,
body[data-service="projects"] .project-hero .article-breadcrumb,
body[data-service="projects"] .project-hero .article-breadcrumb a,
body[data-service="projects"] .project-hero .article-breadcrumb span {
  color: #FFFFFF !important;
}
body[data-service="projects"] .project-hero .article-breadcrumb a {
  opacity: 0.75;
}
body[data-service="projects"] .project-hero .article-breadcrumb a:hover {
  opacity: 1;
}
/* Quick facts: glass card inside hero */
body[data-service="projects"] .project-hero .quick-facts {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin-top: 24px !important;
}
body[data-service="projects"] .project-hero .quick-facts-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  text-align: center !important;
}
body[data-service="projects"] .project-hero .quick-fact-label {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 11px !important;
}
body[data-service="projects"] .project-hero .quick-fact-value {
  color: #FFFFFF !important;
  font-size: 15px !important;
}
@media (max-width: 600px) {
  body[data-service="projects"] .project-hero .quick-facts-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BLOG ARTICLE PAGE FIXES
   ══════════════════════════════════════════════════════════════ */

/* ── Lead image pair: two side-by-side, smaller ── */
.article-hero-image-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: var(--inter-section-gap) !important;
  border-radius: 14px;
  overflow: hidden;
}
.article-hero-image-pair img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
@media (max-width: 600px) {
  .article-hero-image-pair {
    grid-template-columns: 1fr;
  }
  .article-hero-image-pair img {
    max-height: 200px;
  }
}

/* ── Article layout: standardize gaps to 40px ── */
body[data-service="blogs"] main.article-layout#main-content {
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px) !important;
  gap: var(--inter-section-gap) !important;
}

/* ── Article h2 spacing: use 40px gap ── */
.article-content h2 {
  margin-top: var(--inter-section-gap) !important;
  margin-bottom: 16px !important;
}
.article-content h2:first-of-type {
  margin-top: 0 !important;
}

/* ── Related articles: 40px gaps ── */
.related-articles {
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px) !important;
  background: #fff !important;
}
.related-articles h2 {
  margin: 0 0 var(--inter-section-gap) !important;
}
.related-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

/* ── Article bottom CTA: 40px gaps ── */
.article-bottom-cta {
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px) !important;
}

/* ── Remove double gaps between blog sections ── */
body[data-service="blogs"] .related-articles {
  padding-bottom: 0 !important;
}

/* ── TOC: stop at FAQ (align-self: start keeps it within article bounds) ── */
.toc-sidebar {
  align-self: stretch !important;
}
.toc-card {
  position: sticky !important;
  top: 100px !important;
}

/* ── AFSP: Services section background consistency ── */
body[data-service="home"] .services-section,
body[data-service="services"] .services-section {
  background: #ffffff !important;
  background-image: none !important;
}
/* Services container: clean, no border */
body[data-service="home"] .services-section .services-container,
body[data-service="services"] .services-section .services-container {
  background: #ffffff !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body[data-service="home"] .services-section .services-grid,
body[data-service="services"] .services-section .services-grid {
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════
   BATCH FIX: Section titles, specs spacing, hero overflow,
   mobile button removal, section gap consistency
   ══════════════════════════════════════════════════════════════ */

/* ── Task 1: Service page section titles — left on desktop, centered on mobile ── */
body[data-service] .about-service-description .section-title {
  text-align: left !important;
  white-space: nowrap !important;
}
@media (max-width: 767px) {
  body[data-service] .about-service-description .section-title {
    text-align: center !important;
    white-space: normal !important;
  }
}

/* ── Task 3: Gap below last About Specs card ── */
body[data-service] .about-service-specs {
  margin-bottom: 0 !important;
}

/* ── Task 5: Emergency call-outs hero title — prevent mobile overflow ── */
body[data-service='emergency-callouts'] .hero h1 {
  overflow: visible !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  padding: 0 clamp(16px, 4vw, 32px) !important;
}
@media (max-width: 767px) {
  body[data-service='emergency-callouts'] .hero h1 {
    font-size: clamp(28px, 7vw, 42px) !important;
    line-height: 1.15 !important;
    margin-top: var(--space-5) !important;
  }
}

/* ── Task 6: Remove mobile "Get a Free Quote" button in booking section (index) ── */
body[data-service='home'] .mobile-fallback-btn {
  display: none !important;
}

/* ── Task 7: Index mobile section spacing consistency ── */
@media (max-width: 767px) {
  body[data-service='home'] .why-choose {
    padding-top: var(--inter-section-gap) !important;
    padding-bottom: var(--inter-section-gap) !important;
  }
  body[data-service='home'] .why-choose .why-choose-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BATCH 3: About page layout, reviews title mobile, FAQ gap
   ══════════════════════════════════════════════════════════════ */

/* ── About page: right column — specs card + image stacked ── */
body[data-service="about"] .about-page-right-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--space-5) !important;
  max-width: 460px !important;
  margin-left: auto !important;
  align-self: start !important;
}
body[data-service="about"] .about-page-image {
  border-radius: 16px;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 6 / 5;
}
/* About page title: prevent overflow into right column */
body[data-service="about"] .about-service-description .section-title {
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

/* ── About page mobile: single column, correct order ── */
@media (max-width: 767px) {
  body[data-service="about"] .about-page-right-col {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-items: center !important;
  }
  body[data-service="about"] .about-page-image {
    max-width: 480px;
  }
}

/* ── About page: gap above reviews ── */
body[data-service="about"] .reviews-section {
  padding-top: var(--inter-section-gap) !important;
}

/* ── FAQ page: gap below reviews section before footer ── */
body[data-service="faq"]:not([data-service="home"]):not([data-service="services"]) .reviews-section {
  padding-bottom: var(--inter-section-gap) !important;
}

/* ── CTA banner mobile: center alignment ── */
@media (max-width: 767px) {
  .desktop-cta-banner .cta-banner-content {
    text-align: center !important;
    align-items: center !important;
  }
  .desktop-cta-banner .cta-banner-content h3 {
    text-align: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BATCH 4: Mobile consistency — hero titles, reviews title,
   Why Choose internal gaps
   ══════════════════════════════════════════════════════════════ */

/* ── Task 1: Reviews title font size — match index on ALL pages (mobile) ── */
@media (max-width: 767px) {
  .rating-summary h2 {
    font-size: clamp(22px, 5.5vw, 28px) !important;
    line-height: 1.2 !important;
  }
}

/* ── Task 2: Hero title — prevent overflow, allow 2-line wrap on ALL pages (mobile) ── */
@media (max-width: 767px) {
  body[data-service]:not([data-service="home"]) .hero h1 {
    font-size: clamp(26px, 6.8vw, 34px) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    padding-left: clamp(16px, 4vw, 24px) !important;
    padding-right: clamp(16px, 4vw, 24px) !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
  }
}

/* ── Task 3: Hero padding — mobile only (desktop uses base .hero rule) ── */
@media (max-width: 767px) {
  body[data-service]:not([data-service="home"]) .hero {
    padding-top: clamp(70px, 12vh, 90px) !important;
  }
}

/* ── Tasks 4 & 5: Why Choose internal gaps on mobile (dark blue background) ── */
@media (max-width: 767px) {
  body[data-service='home'] .why-choose .why-choose-container {
    padding-top: var(--inter-section-gap) !important;
    padding-bottom: var(--inter-section-gap) !important;
  }
  body[data-service='home'] .why-choose {
    padding-top: var(--inter-section-gap) !important;
    padding-bottom: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BATCH 5: Desktop hero fix, section title standardization
   ══════════════════════════════════════════════════════════════ */

/* ── Task 4: Standardize ALL section title font sizes (site-wide rule) ── */
/* Desktop: all section titles below the hero use the same size */
body[data-service] .section-title,
body[data-service] .rating-summary h2 {
  font-size: clamp(26px, 2.8vw, 36px) !important;
  font-weight: 700 !important;
}
/* Mobile: all section titles use a consistent smaller size */
@media (max-width: 767px) {
  body[data-service] .section-title,
  body[data-service] .rating-summary h2 {
    font-size: clamp(22px, 5.5vw, 28px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BATCH 6: Contact page restructure + service page spacing
   ══════════════════════════════════════════════════════════════ */

/* ── Contact page layout ── */
.contact-main-section {
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px) !important;
  background: #ffffff;
}
.contact-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--inter-section-gap);
}
.contact-subtitle {
  color: #555;
  font-size: 16px;
  margin: -16px 0 0;
  line-height: 1.5;
  text-align: center;
}

/* Contact cards grid — 3 cards in a row */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.contact-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.contact-card h3 {
  margin: 0;
  font-size: 1.1rem;
}
.contact-card-btn {
  display: inline-block !important;
  padding: 10px 24px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.contact-card-btn--email {
  font-size: 0.8rem !important;
  word-break: break-all;
  white-space: normal;
}
.contact-card-btn--green {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: #fff !important;
}
.contact-card-btn--green:hover {
  background: #1da851 !important;
  border-color: #1da851 !important;
}
.contact-card-sub {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
  line-height: 1.4;
}
@media (max-width: 767px) {
  .contact-cards-grid {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* Service Areas pills */
.contact-service-areas {
  text-align: center;
}
.contact-areas-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-on-light, #0A0A0F);
  margin-bottom: 16px;
}
.contact-area-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.contact-area-pill {
  display: inline-block;
  padding: 8px 18px;
  background: var(--color-light-base, #F8FAFC);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-on-light, #0A0A0F);
  white-space: nowrap;
}

/* Map wrapper */
.contact-map-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Contact page: standard gap above reviews */
body[data-service="contact"] .reviews-section {
  padding-top: var(--inter-section-gap) !important;
}

/* ── Task 4: About page hero — position to show person's face ── */
body[data-service="about"] .hero {
  background-position: center 40% !important;
}

/* ── Task 5: Support/legal pages — dark background behind fixed header ── */
body[data-service="terms"],
body[data-service="privacy"],
body[data-service="sitemap"] {
  background: #0a0a0f !important;
}
body[data-service="terms"] .header,
body[data-service="privacy"] .header,
body[data-service="sitemap"] .header {
  background: transparent !important;
}
body[data-service="terms"] .header.scrolled,
body[data-service="privacy"] .header.scrolled,
body[data-service="sitemap"] .header.scrolled {
  background: #0a0a0f !important;
}

/* ── Task 6: Sitemap — spacing below main content ── */
body[data-service="sitemap"] main {
  padding-bottom: var(--space-5) !important;
}

/* ── Task 7: Terms/privacy — indent numbered sub-items ── */
body[data-service="terms"] ol,
body[data-service="privacy"] ol {
  padding-left: 1.5rem;
}
body[data-service="terms"] ol li,
body[data-service="privacy"] ol li {
  margin-bottom: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════
   BATCH 2: CTA buttons, blog images, sticky TOC, spacing
   ══════════════════════════════════════════════════════════════ */

/* ── Task 2 & 6: CTA button — white on red background (override btn-primary) ── */
.article-bottom-cta .article-cta-btn.btn.btn-primary {
  background: #fff !important;
  color: var(--color-primary, #B71C1C) !important;
  border: 2px solid #fff !important;
  font-weight: 700 !important;
}
.article-bottom-cta .article-cta-btn.btn.btn-primary:hover {
  background: rgba(255,255,255,0.9) !important;
}
/* CTA section: standard gap below button before footer */
.article-bottom-cta {
  padding-bottom: var(--space-5) !important;
}

/* ── Task 3: Blog images — reduce height ── */
body[data-service="blogs"] .article-hero-image {
  max-height: 400px !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}
body[data-service="blogs"] .article-hero-image img {
  width: 100% !important;
  height: 400px !important;
  object-fit: cover !important;
}

/* ── Task 4: Sticky TOC — constrained within article ── */
body[data-service="blogs"] .toc-sidebar {
  align-self: stretch !important;
}
body[data-service="blogs"] .toc-card {
  position: sticky !important;
  top: 120px !important;
}

/* ── Task 5: Blog spacing + smaller Related Articles ── */
/* Gap between article content end and Related Articles */
body[data-service="blogs"] .article-content {
  padding-bottom: var(--space-5) !important;
}
/* Smaller Related Articles section */
body[data-service="blogs"] .related-articles {
  padding: var(--inter-section-gap) clamp(16px, 3vw, 32px) !important;
}
body[data-service="blogs"] .related-articles h2 {
  font-size: clamp(20px, 2.5vw, 28px) !important;
  margin-bottom: 20px !important;
}
body[data-service="blogs"] .related-grid {
  gap: 16px !important;
}
body[data-service="blogs"] .blog-card-image {
  max-height: 160px !important;
}
body[data-service="blogs"] .blog-card-image img {
  height: 160px !important;
  object-fit: cover !important;
}
/* Gap between Related Articles and CTA */
body[data-service="blogs"] .related-articles {
  margin-bottom: var(--inter-section-gap) !important;
}
/* FAQ section on blog pages — no bottom margin (related-articles padding-top handles gap) */
body[data-service="blogs"] .faq-section {
  margin-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   BATCH 3: Blog fixes, about mobile, project CTA, content audit
   ══════════════════════════════════════════════════════════════ */

/* ── Task 3: Blog image gap on mobile ── */
@media (max-width: 767px) {
  body[data-service="blogs"] .article-hero-image {
    margin-bottom: var(--space-5) !important;
  }
}

/* ── Task 4: Blog FAQ gap on mobile ── */
@media (max-width: 767px) {
  body[data-service="blogs"] .faq-section {
    margin-bottom: var(--space-5) !important;
    padding-bottom: var(--space-5) !important;
  }
}

/* ── Task 5: Gap between article end and Related Articles ── */
body[data-service="blogs"] .article-layout {
  margin-bottom: var(--space-5) !important;
}

/* ── Task 6: Related Articles half width on desktop ── */
@media (min-width: 768px) {
  body[data-service="blogs"] .related-articles-container {
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── Task 7: Blog CTA section symmetrical spacing ── */
.article-bottom-cta {
  padding-top: var(--space-5) !important;
  padding-bottom: var(--space-5) !important;
}

/* ── Task 8: CTA button hover — readable text ── */
.article-bottom-cta .article-cta-btn.btn.btn-primary:hover {
  background: rgba(255,255,255,0.9) !important;
  color: #0A0A0F !important;
}

/* ── Task 9: About page mobile — specs card same width as image ── */
@media (max-width: 767px) {
  body[data-service="about"] .about-page-right-col {
    max-width: 100% !important;
    width: 100% !important;
  }
  body[data-service="about"] .about-page-right-col .about-specs-side {
    width: 100% !important;
    max-width: 100% !important;
  }
  body[data-service="about"] .about-page-image {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ── Task 10: About page mobile — center CTA banner ── */
@media (max-width: 767px) {
  body[data-service="about"] .desktop-cta-banner-container {
    text-align: center !important;
  }
  body[data-service="about"] .desktop-cta-banner .cta-banner-content {
    align-items: center !important;
    text-align: center !important;
  }
  body[data-service="about"] .desktop-cta-banner .cta-banner-content h3 {
    text-align: center !important;
  }
}

/* ── Task 11: Project pages mobile — CTA symmetrical spacing ── */
@media (max-width: 767px) {
  body[data-service="projects"] .article-bottom-cta {
    padding-top: var(--space-5) !important;
    padding-bottom: var(--space-5) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BATCH 4: Blog gap cleanup — remove excessive stacking margins
   ══════════════════════════════════════════════════════════════ */

/* Override the 80px hero image margin-bottom (line 5193) */
body[data-service="blogs"] .article-hero-image {
  margin-bottom: var(--space-5) !important;
}

/* Override article-layout padding-bottom (match #main-content specificity) */
body[data-service="blogs"] main.article-layout#main-content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Zero out article-content bottom spacing (layout pb already 0) */
body[data-service="blogs"] .article-content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Zero out FAQ section bottom spacing inside blog articles */
body[data-service="blogs"] .article-content .faq-section {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Related Articles: exactly 40px above title, 40px below cards */
body[data-service="blogs"] .related-articles {
  margin-top: 0 !important;
  padding-top: var(--space-5) !important;
  padding-bottom: var(--space-5) !important;
  margin-bottom: 0 !important;
}

/* CTA section: exactly 40px above and below */
body[data-service="blogs"] .article-bottom-cta,
body[data-service="projects"] .article-bottom-cta {
  padding-top: var(--space-5) !important;
  padding-bottom: var(--space-5) !important;
}

/* Article content: no extra bottom padding (grid gap handles it) */
body[data-service="blogs"] .article-content {
  padding-bottom: 0 !important;
}

/* ── Header "Get a Free Quote" button: blue on ALL pages ── */
body[data-service] .header .header-cta-group .btn.btn-primary {
  background: #1E40AF !important;
  border-color: #1E40AF !important;
  color: #FFFFFF !important;
}
body[data-service] .header .header-cta-group .btn.btn-primary:hover,
body[data-service] .header .header-cta-group .btn.btn-primary:focus-visible {
  background: #1E3A8A !important;
  border-color: #1E3A8A !important;
  color: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════
   BATCH MMEH-MIGRATION (2026-04-10)
   Footer Strategy v1 six-zone layout, hero 2-line clamp,
   FAQ filter brand-primary cyan override, mobile menu palette.
   Ported from mmeh-website-tradegrow with palette adapted to
   JRLC cyan (#00B8F0) and navy (#0A2D4E).
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Six-zone footer (desktop) ────────────────────────────── */

.footer {
  background: var(--old-site-bg-dark);
  color: var(--white);
  padding: var(--space-5) 0 0;
}

.footer-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 0;
}

/* Zone 1: Certifications / Accreditations strip */
.footer-certifications {
  background: rgba(255, 255, 255, 0.04);
  padding: 32px 24px;
  text-align: center;
  width: 100%;
}

.footer-certifications-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.footer-certifications-heading {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 20px;
  font-weight: 600;
}

.footer-cert-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 64px;
}

.footer-cert-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-cert-item a {
  display: inline-block;
  line-height: 0;
  border-radius: 4px;
}

.footer-cert-item img {
  display: block;
  height: 64px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.footer-cert-item a:hover img,
.footer-cert-item a:focus-visible img,
.footer-cert-item img:hover {
  opacity: 1;
}

.footer-cert-item a:focus-visible {
  outline: 2px solid var(--old-site-accent-cyan);
  outline-offset: 4px;
}

/* Zone 2: Main grid — Brand / Services / Areas */
.footer-top {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px;
  align-items: flex-start;
  justify-items: center;
  margin: 0 auto 48px;
  max-width: 1100px;
  text-align: center;
}

/* Neutralise header's global `nav { position: absolute }` rule that bleeds
   into any <nav> in the footer and stretches columns full-width. */
.footer-section {
  position: static;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 260px;
  text-align: center;
}

.footer-section h3 {
  font-size: 18px;
  margin: 0 0 16px;
  color: var(--old-site-accent-cyan);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.footer-section p {
  margin: 0;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}

.footer-section a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-section a:hover {
  color: var(--old-site-accent-cyan);
}

.footer-section a:focus-visible {
  outline: 2px solid var(--old-site-accent-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Column 1: Brand */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-brand-link {
  display: inline-block;
  line-height: 0;
  margin-bottom: 16px;
  border-radius: 4px;
}

.footer-brand-link:focus-visible {
  outline: 2px solid var(--old-site-accent-cyan);
  outline-offset: 4px;
}

.footer-brand-logo {
  height: 56px;
  width: auto;
  max-width: 220px;
  display: block;
}

.footer-tagline {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 20px;
  max-width: 280px;
  text-align: center;
}

/* Zone 3: Contact bar (two rows: main + hours) */
.footer-contact-bar {
  margin: 0 auto 48px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-contact-bar-heading {
  font-size: 18px;
  margin: 0 0 20px;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

.footer-contact-bar-row--main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 40px;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-contact-bar-row--hours {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  width: 100%;
  max-width: 1100px;
  margin: 18px auto 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.footer-hours-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-right: 4px;
}

.footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  min-height: 32px;
  font-style: normal;
  flex: 0 1 auto;
}

.footer-contact-item svg {
  width: 16px;
  height: 16px;
  fill: var(--old-site-accent-cyan);
  flex-shrink: 0;
}

a.footer-contact-item:hover {
  color: var(--old-site-accent-cyan);
}

a.footer-contact-item:focus-visible {
  outline: 2px solid var(--old-site-accent-cyan);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer-contact-address {
  max-width: none;
}

.footer-hours-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.footer-hours-inline .footer-hours-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
  line-height: 1.4;
}

.footer-hours-inline dt {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  margin: 0;
}

.footer-hours-inline dd {
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}

/* Lists (services & areas columns) */
.footer-quick-links,
.footer-areas {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-quick-links li,
.footer-areas li {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.footer-quick-links li:last-child,
.footer-areas li:last-child {
  margin-bottom: 0;
}

.footer-quick-links a {
  color: rgba(255, 255, 255, 0.9);
  display: inline-block;
  padding: 2px 0;
  min-height: 24px;
}

/* Socials row (brand column) */
.footer-brand .social-links {
  display: flex;
  gap: 12px;
  margin: 4px 0 0;
  justify-content: center;
}

.footer-brand .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transition: background 0.2s ease, transform 0.2s ease;
  color: var(--white);
}

.footer-brand .social-link:hover {
  background: var(--old-site-accent-cyan);
  transform: translateY(-2px);
}

.footer-brand .social-link:focus-visible {
  outline: 2px solid var(--old-site-accent-cyan);
  outline-offset: 3px;
}

.footer-brand .social-link svg {
  width: 18px;
  height: 18px;
  fill: var(--white);
}

.footer-brand .social-link:hover svg {
  fill: var(--white);
}

/* Zone 4: Compact map */
.footer .footer-map {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.footer .footer-map .map-container {
  width: 100%;
  height: 180px;
}

.footer .footer-map .map-container iframe {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
  border: 0;
  display: block;
}

/* Zone 5: Legal disclosure (unused on JRLC but kept so the class works if later added) */
.footer-legal {
  max-width: 900px;
  margin: 32px auto 0;
  padding: 0 16px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
}

/* Zone 6: Bottom bar */
.footer .footer-bottom {
  padding: 24px 0;
  margin-top: 32px;
  color: rgba(255, 255, 255, 0.75);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.footer-copyright {
  text-align: center;
}

.footer-policy-links {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-policy-links li {
  margin: 0;
}

.footer-policy-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 0;
}

.footer-policy-links a:hover {
  color: var(--old-site-accent-cyan);
}

.footer-policy-links a:focus-visible {
  outline: 2px solid var(--old-site-accent-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

.footer .powered-by {
  margin: 0;
}

.footer .powered-by a {
  color: var(--old-site-accent-cyan);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
}

.footer .powered-by a:hover {
  color: var(--white);
}

/* ── 2. Dark surface unification (rule #4 from mmeh modifications.md) ── */
body[data-service] .footer,
body[data-service] .footer .footer-bottom,
body[data-service] .booking-section,
body[data-service] .why-choose-container {
  background: #0A2D4E !important;
  color: #FFFFFF !important;
}

/* ── 3. Footer responsive breakpoints ──────────────────────────── */

/* Tablet: 640-1023px */
@media (min-width: 640px) and (max-width: 1023px) {
  .footer-content {
    padding: 48px 48px 0;
  }
  .footer-certifications {
    padding: 28px 48px;
  }
  .footer-cert-list {
    gap: 48px;
  }
  .footer-cert-item img {
    height: 56px;
    max-width: 140px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }
  .footer-contact-bar {
    margin-bottom: 40px;
    padding: 24px 0;
  }
  .footer-bottom-inner {
    padding: 0 48px;
  }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
  .footer-content {
    padding: 48px 80px 0;
  }
  .footer-certifications {
    padding: 32px 80px;
  }
  .footer-bottom-inner {
    padding: 0 80px;
  }
}

/* Wide: 1440px+ */
@media (min-width: 1440px) {
  .footer-content {
    padding: 48px 120px 0;
  }
  .footer-certifications {
    padding: 32px 120px;
  }
  .footer-bottom-inner {
    padding: 0 120px;
  }
}

/* Mobile: <640px — single stacked column, all content centred, reordered.
   Flow: Certs → Brand (tagline + socials, no logo) → Contact → Services →
   Areas → Map → Legal → Bottom bar. */
@media (max-width: 639px) {
  .footer {
    padding-top: 32px;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    padding: 32px 24px 0;
    max-width: 100%;
    text-align: center;
  }

  .footer-certifications {
    padding: 20px 16px;
  }

  .footer-certifications-heading {
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
  }

  .footer-cert-list {
    gap: 24px;
  }

  .footer-cert-item img {
    height: 48px;
    max-width: 120px;
  }

  /* Hide footer brand logo on mobile — sticky header already carries it. */
  .footer-brand .footer-brand-link {
    display: none;
  }

  /* Flatten .footer-top into the flex flow so we can reorder sections. */
  .footer-top {
    display: contents;
  }

  .footer-top > .footer-brand      { order: 1; }
  .footer-content > .footer-contact-bar { order: 2; }
  .footer-top > .footer-nav        { order: 3; }
  .footer-top > .footer-areas-col  { order: 4; }
  .footer-content > .footer-map    { order: 5; }
  .footer-content > .footer-legal  { order: 6; }

  .footer-content > .footer-top > .footer-section,
  .footer-content > .footer-contact-bar,
  .footer-content > .footer-map,
  .footer-content > .footer-legal {
    margin-bottom: 24px;
  }

  .footer-section {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-section h3 {
    text-align: center;
    margin-bottom: 12px;
  }

  .footer-brand {
    align-items: center;
  }

  .footer-tagline {
    text-align: center;
    max-width: 320px;
  }

  .footer-brand .social-links {
    justify-content: center;
    margin-top: 8px;
  }

  .footer-quick-links,
  .footer-areas {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 18px;
    padding: 0;
    margin: 0;
  }

  .footer-quick-links li,
  .footer-areas li {
    text-align: center;
    margin: 0;
    flex: 0 0 auto;
  }

  .footer-contact-bar {
    margin: 0 0 24px;
    padding: 20px 0;
    text-align: center;
  }

  .footer-contact-bar-heading {
    font-size: 16px;
    margin-bottom: 14px;
    text-align: center;
  }

  .footer-contact-item {
    min-height: 28px;
    font-size: 14px;
    width: auto;
    justify-content: center;
  }

  .footer-contact-address {
    align-items: center;
  }

  .footer-hours-inline {
    align-items: center;
  }

  .footer-hours-inline .footer-hours-row {
    font-size: 13px;
    justify-content: center;
  }

  .footer .footer-map {
    margin: 0 0 20px;
  }

  .footer .footer-map .map-container {
    height: 140px;
    margin: 0;
    width: 100%;
  }

  .footer-legal {
    font-size: 12px;
    padding: 0 4px;
    margin-top: 8px;
    text-align: center;
  }

  .footer .footer-bottom {
    padding: 20px 0;
    margin-top: 24px;
  }

  .footer-bottom-inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 0 24px;
  }

  .footer-policy-links {
    justify-content: center;
    gap: 14px;
  }
}

/* ── 4. Extra footer mobile refinements (BATCH 7 from mmeh) ── */
@media (max-width: 639px) {
  .footer .footer-quick-links li {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  .footer .footer-quick-links li a {
    white-space: nowrap !important;
    display: inline-block !important;
  }

  .footer .footer-section,
  .footer .footer-content > .footer-top > .footer-section,
  .footer .footer-contact-bar,
  .footer .footer-map,
  .footer .footer-legal {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer .footer-tagline {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer .footer-certifications-inner {
    text-align: center !important;
  }

  .footer .footer-cert-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer .footer-cert-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* ── 5. Hero 2-line silent clamp (rule #5 from mmeh modifications.md) ──
   Title & subtitle must NATURALLY fit ≤ 2 lines at mobile widths.
   If someone extends copy beyond that, it's hard-clipped (no ellipsis).
   The subtitle → CTA gap is pinned so it can never collapse. */
@media (max-width: 767px) {
  body[data-service] .hero h1 {
    display: block !important;
    overflow: hidden !important;
    max-height: calc(1.2em * 2) !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  body[data-service] .hero .hero-subtitle {
    display: block !important;
    overflow: hidden !important;
    max-height: calc(1.4em * 2) !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  body[data-service] .hero .hero-intro .hero-cta-row {
    margin-top: clamp(18px, 4vw, 28px) !important;
  }
}

/* ── 6. FAQ filter brand-primary state model (rule #13) ──
   Default white, tinted-8%-alpha cyan hover, solid cyan active.
   Overrides the legacy cyan slide-in block earlier in this file. */
.faq-filters .filter-btn {
  background: #ffffff !important;
  color: #00B8F0 !important;
  border-color: rgba(0, 184, 240, 0.25) !important;
}

.faq-filters .filter-btn::before {
  background: rgba(0, 184, 240, 0.08) !important;
}

.faq-filters .filter-btn:hover,
.faq-filters .filter-btn:focus-visible {
  background: rgba(0, 184, 240, 0.08) !important;
  color: #00B8F0 !important;
  border-color: #00B8F0 !important;
}

.faq-filters .filter-btn.active,
.faq-filters .filter-btn.active:hover,
.faq-filters .filter-btn.active:focus-visible {
  background: #00B8F0 !important;
  color: #ffffff !important;
  border-color: #00B8F0 !important;
}

.faq-filters .filter-btn.active::before {
  background: #00B8F0 !important;
}

/* ── 7. Mobile menu palette — neutral dark grey with cyan active ──
   Unifies the mobile menu across all pages. Neutral greys for the container,
   resting links and submenu; cyan for active/hover states. */
@media (max-width: 767px) {
  body[data-service] .mobile-menu {
    background: #212121 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  body[data-service] .mobile-menu-link {
    background: #303030 !important;
    color: #ffffff !important;
  }

  body[data-service] .mobile-menu-item,
  body[data-service] .services-submenu {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  }

  body[data-service] .services-submenu {
    background: #3a3a3a !important;
  }

  body[data-service] .services-submenu a {
    background: #3a3a3a !important;
    color: #ffffff !important;
  }

  body[data-service] .mobile-menu-link:hover,
  body[data-service] .mobile-menu-link:focus-visible,
  body[data-service] .mobile-menu-link.active,
  body[data-service] .mobile-menu-link.home-active {
    background: #00B8F0 !important;
    color: #ffffff !important;
  }

  body[data-service] .services-submenu a:hover,
  body[data-service] .services-submenu a:focus-visible,
  body[data-service] .services-submenu a.active {
    background: #00B8F0 !important;
    color: #ffffff !important;
  }
}
/* ══════════════════════════════════════════════════════════════
   End BATCH MMEH-MIGRATION (2026-04-10)
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   BATCH HEADER/HERO/FAQ/FOOTER FIXES (2026-04-11)
   1. Header: WhatsApp green pill + red Get a Free Quote button
   2. Hero: both Call and Get a Free Quote buttons solid cyan #00B8F0
   3. FAQ filter buttons: flex-wrap + justify-content center (true centering)
   4. Footer Areas We Cover: 4-row centered grid
   5. Footer column height equalisation (brand / services / areas)
   ══════════════════════════════════════════════════════════════ */

/* ── 1a. WhatsApp pill — mmeh reference pattern (single "WhatsApp" label) ──
   Values ported verbatim from mmeh-website-tradegrow public/css/style.css
   lines 11076-11098. No number shown in the pill — just a single text label
   next to the green icon. Base green #25D366, hover #1da851. */
.cta-pill.whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 30px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.3s ease;
}
.cta-pill.whatsapp:hover {
  background: #1da851;
}
.whatsapp-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.whatsapp-pill-icon svg {
  width: 18px;
  height: 18px;
}
.whatsapp-pill-text {
  font-size: 14px;
  font-weight: 600;
}

/* ── 1c. Header CTA breakpoint tuning (mmeh reference pattern, JRLC-adapted) ──
   mmeh thresholds ported verbatim for the call/quote/WhatsApp visibility
   matrix; the low end uses JRLC's own `max-width: 1100px` mobile-menu-toggle
   breakpoint (JRLC switches to the hamburger mobile menu at 1100, not 768
   like mmeh). The visibility matrix is:
   - ≥ 1490px : call pill + Get a Free Quote + WhatsApp pill (all three)
   - 1101-1489px : call pill + WhatsApp pill only (quote button hidden)
   - ≤ 1100px  : header-cta-group hides, mobile menu toggle takes over
   Inside the 1101-1489 range the call pill shows only the number (tablet
   rule) so the header isn't cramped. */
@media (min-width: 1101px) {
  .header .header-cta-group {
    display: flex !important;
  }
  .header .header-cta-group .cta-pill.call,
  .header .header-cta-group .cta-pill.whatsapp {
    display: inline-flex !important;
  }
  .header .header-cta-group .btn.btn-primary {
    display: none !important;
  }
}
@media (min-width: 1490px) {
  .header .header-cta-group .btn.btn-primary {
    display: inline-flex !important;
  }
}

/* Tablet 1101-1489: shrink the call pill to number-only (hide the label)
   so the call + quote-or-not-present + WA row sits comfortably. */
@media (min-width: 1101px) and (max-width: 1489px) {
  .cta-pill.call {
    padding: 8px 14px !important;
    border-radius: 30px !important;
    gap: 6px !important;
  }
  .call-pill-label {
    display: none !important;
  }
  .call-pill-number {
    font-size: 13px !important;
  }
  .cta-pill.whatsapp {
    padding: 8px 14px !important;
    border-radius: 30px !important;
  }
  .whatsapp-pill-text {
    display: inline !important;
    font-size: 13px !important;
  }
}

/* ── 1b. Header "Get a Free Quote" button — red on every page ──
   Beats every per-page inline override (navy #0A2D4E) via source order. */
body[data-service] .header .header-cta-group .btn.btn-primary {
  background: #DC2626 !important;
  border-color: #DC2626 !important;
  color: #FFFFFF !important;
}
body[data-service] .header .header-cta-group .btn.btn-primary:hover,
body[data-service] .header .header-cta-group .btn.btn-primary:focus-visible {
  background: #B91C1C !important;
  border-color: #B91C1C !important;
  color: #FFFFFF !important;
}

/* ── 2. Hero buttons — per-page accent colour ──
   The Call button is an outline-light style with a transparent tinted
   background and a 2px border in the page's `--hero-accent` colour.
   The Get a Free Quote button is a solid filled button in the same
   `--hero-accent` colour with an accent-matched glow.
   Both inherit from `--hero-accent` / `--hero-accent-rgb` which each page
   sets on its `body[data-service="..."]` selector — see section 8 below
   for the full palette. Home uses the brand cyan `#00B8F0`. */
body[data-service] .hero .hero-cta-row .btn.btn-outline-light {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 2px solid var(--hero-accent, #00B8F0) !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-outline-light:hover,
body[data-service] .hero .hero-cta-row .btn.btn-outline-light:focus-visible {
  background: rgba(var(--hero-accent-rgb, 0, 184, 240), 0.18) !important;
  border-color: var(--hero-accent, #00B8F0) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
}
/* Filled Get a Free Quote button — background is always JRLC brand cyan
   (#00B8F0) on every page so the primary CTA stays visually consistent.
   The GLOW follows the per-page `--hero-accent-rgb` so each hero's
   accent colour still shows through on the button halo. */
body[data-service] .hero .hero-cta-row .btn.btn-primary {
  background: #00B8F0 !important;
  border-color: #00B8F0 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(var(--hero-accent-rgb, 0, 184, 240), 0.40) !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-primary:hover,
body[data-service] .hero .hero-cta-row .btn.btn-primary:focus-visible {
  background: #0099CC !important;
  border-color: #0099CC !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 20px rgba(var(--hero-accent-rgb, 0, 184, 240), 0.55) !important;
}

/* ── 2d. Hero spacing — replicate afsp-website-tradegrow-v2 pattern ──
   Reference spacing from afsp-v2 public/css/style.css lines 9470-9492:
     .hero-intro h1 { margin-bottom: 0 }
     .hero-intro .hero-subtitle { margin-top: clamp(12px, 2vw, 20px) }
     .hero-cta-row { margin-top: clamp(18px, 3vw, 32px) }
   Previous JRLC state had 0px gap between underline and subtitle (too
   cramped on desktop). These rules restore comfortable breathing room
   on desktop without affecting mobile (the clamp low end is 12/18px
   which still works at 375-767px widths). */
body[data-service] .hero .hero-intro h1 {
  margin-bottom: 0 !important;
}
body[data-service] .hero .hero-intro .hero-subtitle {
  margin-top: clamp(12px, 2vw, 20px) !important;
}
body[data-service] .hero .hero-intro .hero-cta-row {
  margin-top: clamp(18px, 3vw, 32px) !important;
}

/* ── 2b. Home hero title + underline — match non-home sizing ──
   The older home-specific block at line 10685 was forcing the h1 to
   clamp(32px, 4vw, 56px)/800 and the underline to a tiny 80-140px wide ×
   4px tall line. We override that here so home uses the same
   clamp(26px, 3vw, 38px)/700 h1 and the same clamp(180px, 40%, 320px) × 8px
   underline as every other page. */
body[data-service="home"] .hero h1 {
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}
body[data-service="home"] .hero .hero-underline-svg {
  width: clamp(180px, 40%, 320px) !important;
  height: 8px !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}
body[data-service="home"] .hero .hero-underline-svg line {
  stroke: var(--hero-accent, #00B8F0) !important;
  stroke-width: 4 !important;
}

/* ── 2c. Scroll chevron colour follows per-page --hero-accent ──
   The base rule at line 9854 already reads from var(--hero-accent), but
   some pages had per-page overrides forcing it cyan. This line ensures
   every page's chevrons inherit from the page's --hero-accent. */
body[data-service] .hero .scroll-chevron {
  stroke: var(--hero-accent, #00B8F0) !important;
}

/* ── 3. FAQ filter buttons — true centering via flex-wrap ──
   The earlier rule used `grid-template-columns: repeat(3, auto)` which
   left-aligns the final (incomplete) row of an odd-count filter set.
   Switching to flex-wrap + justify-content: center keeps every button at
   its natural width and centres incomplete rows. */
body[data-service] .faq-section .faq-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  grid-template-columns: none !important;
}
@media (max-width: 560px) {
  body[data-service] .faq-section .faq-filters {
    gap: 10px !important;
    grid-template-columns: none !important;
  }
}

/* ── 4. Footer "Areas We Cover" — 4-row centered grid ──
   JRLC currently ships 10 areas. A 3-col grid lays them out as 3/3/3/1
   (four rows). Contents are centred under the heading via `justify-content`
   and the last-row orphan is centred visually via `place-items: center`. */
.footer-areas-col .footer-areas {
  display: grid !important;
  grid-template-columns: repeat(3, auto) !important;
  column-gap: 18px;
  row-gap: 6px;
  justify-content: center !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.footer-areas-col .footer-areas li {
  text-align: center !important;
  margin: 0 !important;
  white-space: nowrap;
}
/* Centre the lone last-row item directly under the central column. */
.footer-areas-col .footer-areas li:nth-child(10):last-child {
  grid-column: 2 / 3;
}

/* ── 5. Footer column height equalisation ──
   Brand / Services / Areas columns must reach approximately the same
   height so the footer feels balanced. Stretch the grid rows and set a
   min-height on each column so the shortest (Services, 4 items) catches
   up to the tallest (Areas, 10 items in a 4-row grid). */
.footer .footer-top {
  align-items: stretch !important;
}
.footer .footer-top > .footer-section {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Brand column already stretches via its logo + tagline + social row.
   Give the services list a bit of vertical breathing room so its four
   items fill the same vertical space as the 4-row areas grid. */
.footer .footer-nav .footer-quick-links li {
  margin: 0 0 14px !important;
}
.footer .footer-nav .footer-quick-links li:last-child {
  margin-bottom: 0 !important;
}

/* Mobile (<640px): columns stack — height equalisation not needed, reset
   the min-height to avoid a visually ragged stack of fixed-height blocks. */
@media (max-width: 639px) {
  .footer .footer-top > .footer-section {
    min-height: 0;
  }
  .footer-areas-col .footer-areas {
    grid-template-columns: repeat(3, auto) !important;
    column-gap: 14px !important;
  }
}

/* ── 6. Header Call Josh today pill — blue (not red) ──
   The legacy `.cta-pill.call` base rule inherited red from a sister site's
   FX Security template (`#DC2626`). Client wants the call pill in the JRLC
   brand blue (cyan `#00B8F0`). This rule applies to every page. */
body[data-service] .header .cta-pill.call {
  background: #00B8F0 !important;
  color: #FFFFFF !important;
}
body[data-service] .header .cta-pill.call:hover,
body[data-service] .header .cta-pill.call:focus-visible {
  background: #0099CC !important;
}
body[data-service] .header .cta-pill.call .call-pill-label,
body[data-service] .header .cta-pill.call .call-pill-number,
body[data-service] .header .cta-pill.call svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* ── 7. WhatsApp icon colour safety net ──
   Force the WhatsApp SVG path to always render white regardless of any
   inherited `fill: currentColor` or sister-site dark-on-green bleed. */
body[data-service] .header .cta-pill.whatsapp svg {
  fill: #FFFFFF !important;
}
body[data-service] .header .cta-pill.whatsapp svg path {
  fill: #FFFFFF !important;
}

/* ══════════════════════════════════════════════════════════════
   8. Per-page hero accent colours
   Each page with a hero section sets its own `--hero-accent` +
   `--hero-accent-rgb` pair. The colour drives:
   - the hero title underline SVG line stroke
   - the hero "Call …" button border (outline-light)
   - the hero "Get a Free Quote" button background and glow
   - the hero scroll-down chevron stroke
   Home uses the JRLC brand cyan #00B8F0; every other page with a hero
   gets a visually distinct accent colour so each page has its own
   personality while the header/footer/copy stays consistent.
   ══════════════════════════════════════════════════════════════ */

body[data-service="home"] {
  --hero-accent: #00B8F0 !important;
  --hero-accent-rgb: 0, 184, 240 !important;
}
body[data-service="services"] {
  --hero-accent: #7C3AED !important;
  --hero-accent-rgb: 124, 58, 237 !important;
}
body[data-service="contact"] {
  --hero-accent: #4338CA !important;
  --hero-accent-rgb: 67, 56, 202 !important;
}
body[data-service="faq"] {
  --hero-accent: #BE185D !important;
  --hero-accent-rgb: 190, 24, 93 !important;
}
body[data-service="about"] {
  --hero-accent: #B45309 !important;
  --hero-accent-rgb: 180, 83, 9 !important;
}
body[data-service="projects"] {
  --hero-accent: #D84315 !important;
  --hero-accent-rgb: 216, 67, 21 !important;
}
body[data-service="blog"] {
  --hero-accent: #0097A7 !important;
  --hero-accent-rgb: 0, 151, 167 !important;
}
body[data-service="bespoke-storage-solutions"] {
  --hero-accent: #0F766E !important;
  --hero-accent-rgb: 15, 118, 110 !important;
}
body[data-service="fencing"] {
  --hero-accent: #166534 !important;
  --hero-accent-rgb: 22, 101, 52 !important;
}
body[data-service="bathrooms"] {
  --hero-accent: #0369A1 !important;
  --hero-accent-rgb: 3, 105, 161 !important;
}
body[data-service="kitchens"] {
  --hero-accent: #DC2626 !important;
  --hero-accent-rgb: 220, 38, 38 !important;
}

/* ══════════════════════════════════════════════════════════════
   End BATCH HEADER/HERO/FAQ/FOOTER FIXES (2026-04-11)
   ══════════════════════════════════════════════════════════════ */

/* ── Reviews brand accent variable for native carousel ──
   Hardcoded to JRLC cyan rather than var(--color-primary) because a
   legacy FX Security :root block at line 8349 overrides --color-primary
   to #B71C1C (red) via source order. Using the literal hex here
   guarantees the review card glow is always JRLC cyan. */
:root { --reviews-brand-accent: #00B8F0; }

/* ══════════════════════════════════════════════════════════════
   BATCH 8 (2026-04-10): Home mobile hero parity with contact reference.
   Site-wide rule: the hero title Y position on mobile must be IDENTICAL
   on every page (reference = /contact). Title starts at the same Y
   regardless of whether it's 1 line or 2 lines; all inter-element gaps
   and the bottom gap under the CTA must match. Previously `/` was 60px
   lower than every other page because a home-only rule set
   padding-top: clamp(128px, 17svh, 152px) and a base rule at
   ~line 11119 overrode to clamp(150px, 18vw, 200px). Home also had
   custom hero-content gap (16 vs 26), custom subtitle margin-top (0),
   custom cta-row margin-top (clamp 16-28 vs 18-32), and custom
   hero-underline-svg margins (12/12 vs 6/0). This block forces home
   onto the same values as every other page.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Hero padding — match non-home pages exactly */
  body[data-service='home'] .hero {
    padding-top: clamp(70px, 12vh, 90px) !important;
    padding-bottom: 24px !important;
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
  }

  /* Hero content stack — match contact's gap + justification.
     Selector specificity bumped to (0,4,1) with `.hero.hero--left`
     so it beats the site-wide rules at style.css:11206 / 11468 which
     set `gap: clamp(16px, 2.5vw, 28px); justify-content: flex-end`. */
  body[data-service='home'] .hero.hero--left .hero-content,
  body[data-service='home'] .hero .hero-content {
    gap: 26px !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
  }

  /* Underline SVG — match base `.hero-underline-svg` vertical rhythm
     (margin-top: 6px, no margin-bottom). Home's `clamp(12px, 1.5vw, 20px)`
     top+bottom was making the h1→subtitle gap 32px instead of the
     canonical ~18px (6 + 8 svg height + 12 subtitle margin-top). */
  body[data-service='home'] .hero .hero-underline-svg {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
  }

  /* Subtitle margin — match base `.hero-intro .hero-subtitle`
     (clamp 12px, 2vw, 20px). Home's `margin-top: 0` was collapsing
     the svg→subtitle space. */
  body[data-service='home'] .hero .hero-subtitle {
    margin-top: clamp(12px, 2vw, 20px) !important;
  }

  /* CTA row top margin — match base `.hero-cta-row`
     (clamp 18px, 3vw, 32px). Home's `clamp(16px, 2.5vw, 28px)` was
     slightly tighter. This also stays in sync with BATCH 7's locked
     gap rule at `.hero-intro .hero-cta-row`. */
  body[data-service='home'] .hero .hero-cta-row {
    margin-top: clamp(18px, 3vw, 32px) !important;
  }

  /* ──────────────────────────────────────────────────────────────
     SITE-WIDE GAP RHYTHM (mobile only, every page)

     All gaps below use the SAME token expression:
         calc(var(--inter-section-gap) + 16px)
     which resolves to 40px at 390px (24 + 16) and scales naturally
     on larger mobile widths because `--inter-section-gap` is itself
     `clamp(24px, 3.5vw, 40px)`.

     Scope is EVERY page on mobile. Selectors for sections that only
     exist on some pages (.booking-section, .why-choose) are harmlessly
     broad: they just don't match on pages that don't contain those
     classes.

     ── SPECIFICITY NOTE ──
     There are earlier rules in this file at style.css:11675,
     style.css:13231 etc. of the form
        `body[data-service]:not([data-service="home"]):not([data-service="services"]) .reviews-section`
     with specificity (0, 4, 1) that beat a plain `body[data-service] ...`
     (0, 2, 1) selector. To definitively win the cascade on EVERY page
     including home, services, about, contact, faq, and every service
     page, every rule below uses a three-`:not()` prefix that gives
     specificity (0, 5, 1). The `:not([data-service="__"])` arguments
     are intentionally impossible values so the filter never excludes
     any real page.

     This block defines the FULL set of "major section boundary" gaps.
     To replicate on another site that uses this template, copy this
     block + the `--inter-section-gap` custom property definition.
     ──────────────────────────────────────────────────────────────── */

  /* (a) Above the reviews-section title ("What Our Customers Say"). */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .reviews-section {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (a2) Below the reviews section — REPLICATES THE `afsp` REFERENCE
     TEMPLATE RHYTHM.
     Reference: on the `afsp-website-tradegrow-v2` sibling template,
     `.reviews-section` renders with `padding-bottom: 0` on every
     page at every mobile width. The reviews iframe sits flush
     against whatever section follows it (services on home, faq on
     service/contact/faq pages, desktop-cta-banner on about, footer
     on faq, etc.) with zero box-to-box gap. The LeadConnector
     `.lc_reviews_widget` iframe carries its own internal bottom
     whitespace inside the widget so no additional CSS padding is
     needed — stacking a 24 or 40 px `padding-bottom` on top of that
     internal whitespace produces a visibly over-large gap that
     doesn't match the rest of the site rhythm.
     Mirroring that afsp reference explicitly here: `padding-bottom: 0`
     on every page, overriding earlier per-page rules (e.g. the
     `body[data-service="faq"]:not(...) .reviews-section { padding-bottom: var(--inter-section-gap) }`
     rule at style.css:13231 which gives specificity (0, 4, 1) —
     our (0, 5, 1) triple-`:not()` prefix beats it definitively).
     Mobile only; desktop reviews rhythm is untouched. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .reviews-section {
    padding-bottom: 0 !important;
  }

  /* (b) Below the hero (under the CTA / phone buttons). */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .hero {
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (c) "Our Services" title → first service card. `.services-container`
     is a flex column with two children (title h2 + `.services-grid`
     wrapper) so its `gap` controls the title→first-card spacing only.
     The inner `.services-grid { gap: 16px }` is untouched (card-to-card
     rhythm stays intact). */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .services-section .services-container {
    gap: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (d) Below the last service card — services section bottom padding. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .services-section {
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (d2) STANDING RULE — mobile-only, SITE-WIDE:
     Pull whatever section immediately follows `.reviews-section`
     upward by 63 px to hide the uncontrollable internal bottom
     whitespace inside the LeadConnector `.lc_reviews_widget`
     cross-origin iframe. That whitespace is the widget's own
     "Powered by LeadConnector" footer strip + trailing padding,
     which we cannot style or remove from the host side.

     Rule (a2) already sets `.reviews-section { padding-bottom: 0 }`
     so the two sections sit flush box-to-box. This rule then
     physically pulls the next sibling up by 63 px, overlapping the
     iframe's bottom 63 px with the next section's own background,
     visually hiding the LeadConnector strip. The iframe's bounding
     box is unchanged — only the empty padding area is covered.
     No review-card content is clipped because the actual review
     cards render well above the overlap zone.

     Why `.reviews-section + *` (adjacent-sibling combinator):
     different pages have different elements following the reviews
     section:
       - `/`                         → `.services-section`
       - `/about`                    → `.desktop-cta-banner-container`
       - `/contact`                  → `.faq-section`
       - `/services`                 → `.faq-section`
       - `/boiler-installation`      → `.faq-section`
       - `/boiler-service-repair`    → `.faq-section`
       - `/commercial-service`       → `.faq-section`
       - `/faq`                      → (no next sibling — reviews
                                        is the last section before
                                        the footer, which is outside
                                        the main wrapper; rule has
                                        no effect here, which is
                                        correct)
     Using `.reviews-section + *` instead of naming each section
     explicitly means the rule applies uniformly regardless of page
     structure, and it doesn't need to be updated when new pages or
     section combinations are added.

     Value history:
     - 2026-04-11 (initial):    -40px (home only, scoped to `.services-section`)
     - 2026-04-11 (tightened):  -60px (home only)
     - 2026-04-11 (generalised): -63px, SITE-WIDE via adjacent-sibling
                                 selector. Ash confirmed via visual
                                 review: "remove three pixels more"
                                 from the -60 and "apply this to all
                                 the pages that have the reviews
                                 section". The final value hides the
                                 iframe's internal bottom whitespace
                                 exactly; going larger pulls review
                                 cards under the overlap.

     Specificity: `body[data-service]:not(__a__):not(__b__):not(__c__) .reviews-section + *`
     → (0, 5, 1), which beats every earlier (0, 4, 1) override on
     `.faq-section`, `.services-section`, etc. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .reviews-section + * {
    margin-top: -63px !important;
  }

  /* (e) Above the booking title ("Plan your project with a local expert"). */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .booking-section {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (f) Below the phone mockup — booking section bottom padding. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .booking-section {
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (g) Above the dark "Why Choose" container (gap in the white section
     bg, above the dark card). */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .why-choose {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (h) Inside the Why Choose container, above the title. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .why-choose .why-choose-container {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (i) Inside the Why Choose container, below the image. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .why-choose .why-choose-container {
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (j) Above the FAQ title ("Frequently Asked Questions").
     Value history:
     - 2026-04-11 (initial): calc(var(--inter-section-gap) + 16px) = 40 px
     - 2026-04-11 (iframe-era override): 0 — the GHL `.lc_reviews_widget`
       iframe had its own ~40 px of internal bottom whitespace inside the
       cross-origin widget, so stacking a host-side padding-top on top
       produced a double gap. Zeroing it let the iframe's internal space
       be the single gap above the FAQ title.
     - 2026-04-11 (reviews-widget migration): back to 40 px — with the
       iframe replaced by a native ReviewsCarousel component (see
       reviews_widget_details.md + BATCH 9 below), there's no more
       internal widget whitespace to compensate for. The 40 px gap is
       now purely host-side and matches the site-wide rhythm.

     Applies site-wide via the three-`:not()` specificity prefix EXCEPT
     on `/faq` — see rule (j2) immediately below — where the FAQ section
     is preceded by the hero (hero padding-bottom 40) rather than by the
     reviews section, and 40 + 40 = 80 would double-stack. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .faq-section {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (j2) `/faq` only: zero the FAQ section padding-top. On `/faq` the
     FAQ section is the first section after the hero (not after reviews),
     so rule (j)'s 40 px stacks on top of the hero's 40 px padding-bottom
     and produces an 80 px gap. Zeroing it here lets the hero's own
     padding-bottom be the single 40 px gap above the FAQ title.
     Specificity bumped to (0, 5, 1) to match rule (j) via the same
     three-`:not()` pattern — later source order then wins. */
  body[data-service='faq']:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .faq-section {
    padding-top: 0 !important;
  }

  /* (k) FAQ title → filter chips / faq-body. `.faq-container` is a
     flex column with title h2 + `.faq-body` wrapper, so its `gap`
     controls the title→body spacing only. The inner `.faq-body`
     and `.faq-items` gaps are untouched. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .faq-section .faq-container {
    gap: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (l) Below the last FAQ card — faq section bottom padding. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .faq-section {
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (l2) `.faq-section` stacking context — fix for Chrome OOPIF
     (out-of-process iframe) compositing bug.

     Rule (a3) pulls `.faq-section` upward by -63 px when it follows
     `.reviews-section` (every service page + contact). This lands
     the FAQ title 63 px above the reviews iframe's bottom edge,
     which is inside the `.lc_reviews_widget` iframe's Y range.
     DOM painting order says `.faq-section` (a later sibling) should
     paint on top of `.reviews-section`'s descendants, including the
     iframe — but Chrome promotes cross-origin iframes to their own
     compositor layer for security, and a later DOM sibling without
     its own stacking context paints BEHIND the iframe's pixels.
     The net effect: the FAQ title is fully rendered in the DOM
     (`visibility: visible`, `opacity: 1`, correct position) but
     invisible on screen because the cross-origin iframe paints on
     top of it.

     Fix: give `.faq-section` its own stacking context via
     `position: relative; z-index: 1`. This promotes the section to
     the same compositor layer hierarchy as the iframe, and the
     later-sibling painting order is then respected by the
     compositor — `.faq-section`'s white background + FAQ title
     paint above the iframe pixels.

     Mobile only because the OOPIF overlap only occurs on mobile
     (rule (a3)'s -63 margin is mobile-only; on desktop there's no
     overlap so no compositing issue). Site-wide because the same
     fix is needed on every page that has both `.reviews-section`
     and `.faq-section` in sequence. `/faq` (FAQ preceded by hero)
     and `/` home (FAQ preceded by why-choose) don't have the
     overlap but also don't need the rule disabled — giving them
     a stacking context is harmless. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .faq-section {
    position: relative !important;
    z-index: 1 !important;
  }

  /* (l3) HOME-ONLY: 40 px of white breathing room above the FAQ
     title at the Why-Choose → FAQ color change.

     On home, `.faq-section` is NOT preceded by `.reviews-section`
     (it follows `.why-choose`, which ends in the dark
     `.why-choose-container`). Rule (a3) doesn't apply (no -63
     margin), and rule (j) (`padding-top: 0` site-wide) puts the
     FAQ title flush at the color boundary where the dark
     why-choose-container (`#2B2B2E`) meets the white FAQ section —
     which reads as visually cramped because the color change is
     sharp with no breathing room.

     Adding `padding-top: 40 px` scoped to home-only via
     `body[data-service='home']` (same (0, 5, 1) specificity as the
     base rule (j), later in source order → wins the cascade) moves
     the FAQ title 40 px into the white section, giving the color
     change visual separation. Other pages are unaffected — rule (j)
     keeps `.faq-section padding-top: 0` on every non-home page. */
  body[data-service='home']:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .faq-section {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (m) Footer top: 40px breathing gap above the certifications block.
     `border-top` is also zeroed so there's no hair-line separator
     inside the new gap. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .footer {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
    border-top: 0 !important;
  }

  /* (n) Flatten the `.footer-certifications` panel so it visually
     dissolves into the footer background. Originally the cert block
     rendered with `background: rgba(255, 255, 255, 0.04)` (a lighter
     overlay on the dark footer bg) + its own `padding: 20px 16px`
     (top + bottom), which created a visible "lighter stripe" inside
     the footer. Setting background transparent + zeroing vertical
     padding merges the cert block into the rest of the footer and
     lets the 40px gap from rule (m) be the single visible gap above
     the cert heading. Horizontal padding is preserved so the content
     still has side margins. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .footer .footer-certifications {
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ──────────────────────────────────────────────────────────────
     Service-page extensions (o–t).

     These rules extend the gap system onto the sections that only
     appear on the service pages — `.about-service-description`
     (service content + spec card) and `.gallery-section` (Our Work).
     Same token, same specificity prefix, same rhythm: 40 px at 390.
     Rules are selector-broad (`body[data-service]`) so they
     harmlessly skip pages that don't have these sections. On
     `/projects` — which also uses `.gallery-section` — the same
     rhythm applies, keeping the site visually consistent.
     ──────────────────────────────────────────────────────────── */

  /* (o) Above the service title in .about-service-description
     (section padding-top). Bottom padding is asserted to the same
     value for symmetry with the site rhythm. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .about-service-description {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (p) Below the service title in .about-service-description.
     The title lives inside `.about-service-content`, which is a flex
     column with `gap: 18px`. In flex, the gap is added on top of
     margins, so a plain `margin-bottom: 40px` on the title would
     produce a 58 px visible gap (40 + 18). We convert the flex
     column to block layout at mobile so the title's `margin-bottom`
     is the single source of spacing, then re-assert the 18 px
     paragraph rhythm via explicit `p { margin-bottom: 18px }`
     with `p:last-of-type { margin-bottom: 0 }` to match the
     original rhythm exactly. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .about-service-description .about-service-content {
    display: block !important;
    gap: 0 !important;
  }
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .about-service-description .about-service-content .section-title {
    margin-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .about-service-description .about-service-content p {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .about-service-description .about-service-content p:last-of-type {
    margin-bottom: 0 !important;
  }

  /* (q) Between the .about-service-content (description card) and
     the .about-service-specs (specs card). On mobile the
     `.about-service-description-container` is a single-column grid
     with `gap: 32px` (from the `(max-width: 1100px)` breakpoint at
     style.css:3957). This widens the row-gap to 40 px. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .about-service-description .about-service-description-container {
    gap: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (r) Above the "Our Work" title — .gallery-section padding-top.
     (s) Below the last image — .gallery-section padding-bottom.
     Both in one block for clarity. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .gallery-section {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* (t) Below the "Our Work" title — gallery section title
     margin-bottom. `.gallery-container` uses block layout (no flex
     gap) so a plain margin-bottom produces the exact gap. */
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .gallery-section .section-title {
    margin-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BATCH 9 (2026-04-11): Native ReviewsCarousel migration — neutralise
   all the CSS that was specifically there to mitigate the GHL
   `.lc_reviews_widget` cross-origin iframe quirks. With the iframe
   replaced by a native Astro component (see reviews_widget_details.md),
   those workarounds become visual bugs — they would either overlap the
   native card's bottom with the next section (a3), or pull the h2
   title UP into the first review card (the -20 margin-bottom trick at
   line 11559).

   These rules apply at ALL widths because the iframe is gone at every
   width, not just mobile. The mobile gap system above still controls
   the rhythm around `.reviews-section` via rules (a) (padding-top 40)
   and (a2) (padding-bottom 0).
   ══════════════════════════════════════════════════════════════ */

/* (u) Neutralise the iframe-era "pull title down over iframe top" trick.
   `style.css:11559-11575` set `.facebook-reviews-header` to
   `margin-bottom: -20px; position: relative; z-index: 2` on home and
   services pages so the heading would visually layer ABOVE the iframe's
   top 20 px of whitespace. With the native carousel, the heading sits
   in normal flow above the first card, and the -20 margin would
   instead pull the h2's baseline DOWN into the first card's top
   padding. Reset to zero. */
body[data-service="home"] .reviews-section .facebook-reviews-header,
body[data-service="services"] .reviews-section .facebook-reviews-header {
  margin-bottom: 0 !important;
  z-index: auto !important;
}
body[data-service="home"] .reviews-section .reviews-carousel,
body[data-service="services"] .reviews-section .reviews-carousel {
  /* z-index: 1 was on `.lc_reviews_widget` to layer it below the title;
     native carousel needs no stacking context. */
  z-index: auto !important;
}

/* (v) Neutralise rule (a3) on mobile — the `-63 px` overlap was there
   to hide the iframe's internal bottom "Powered by" strip. With a
   native carousel, pulling the next section up by 63 px would
   overlap the last review card's shadow/padding. Reset to zero.

   The mobile rhythm is now driven by rule (a) `padding-top: 40px` on
   the NEXT section's own padding (already part of the site-wide gap
   system) and rule (a2) `padding-bottom: 0` on `.reviews-section`.
   The two together produce a single clean 40 px gap between the last
   review card and whatever comes after, exactly matching the rest of
   the site. */
@media (max-width: 767px) {
  body[data-service]:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .reviews-section + * {
    margin-top: 0 !important;
  }
}

/* (w) Breathing room below the "What Our Customers Say" h2.
   Matches the 40 px gap ABOVE the heading (which comes from rule (a)
   `.reviews-section padding-top`) so the heading has symmetric
   vertical breathing room — 40 px above from the section padding,
   40 px below from this h2 margin-bottom, before the carousel.

   Needs `!important` to beat two earlier legacy rules:
     - `.rating-summary { margin-bottom: 0 !important }` at style.css:10879
       (originally for the old iframe layout where the h2 was layered
       over the iframe's top padding)
     - `body[data-service='home'] .facebook-reviews-header .rating-summary h2 { margin: 0 }`
       at style.css:7058-7063 (shorthand zero, not `!important`, but
       has higher specificity than a plain `.reviews-section h2` rule)

   Tracks the hero's own `padding-bottom` value so the gap above
   the title (hero padB) and the gap below the title (this h2 mB)
   are always visually identical — Ash's explicit "symmetry
   everywhere" request.

   Desktop (≥ 1100 px): `var(--inter-section-gap)` (which is 40 px
     when the clamp saturates) — same value hero uses via a
     site-wide late-rule override.
   Tablet (768–1099 px): `var(--inter-section-gap)` — scales with
     the clamp, matches hero's value at the same width.
   Mobile (< 768 px): `calc(var(--inter-section-gap) + 16px)` =
     40 px — matches hero's mobile value (BATCH 8 rule b).

   Specificity note: must beat
   `body[data-service="home"] .reviews-section h2 { margin-bottom: 0 !important }`
   at style.css:7058 which has specificity (0, 2, 2). Our selector
   `body[data-service] .reviews-section .facebook-reviews-header h2`
   is (0, 3, 2) which wins among !important declarations. */
body[data-service] .reviews-section .facebook-reviews-header h2,
body[data-service] .reviews-section .rating-summary h2 {
  margin-top: 0 !important;
  margin-bottom: var(--inter-section-gap) !important;
}
@media (max-width: 767px) {
  body[data-service] .reviews-section .facebook-reviews-header h2,
  body[data-service] .reviews-section .rating-summary h2 {
    margin-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }
}

/* (x) Horizontal centering for the carousel + header block inside
   the `.reviews-container` flex column.

   The legacy iframe layout had `.reviews-container { gap: 0 !important }`
   (style.css:10876) so the Google-logo header sat directly on the
   iframe's top edge. With the native carousel we still want the
   flex-column container, but we need to explicitly centre its
   children horizontally — both the full-width header block and the
   max-width-constrained carousel root.

   The carousel has `max-width: 480 / 760 / 1200 px` depending on
   viewport (from its component's own media queries). `align-items:
   center` on the container ensures those constrained widths are
   centred inside the container's own 1200 px max-width. */
.reviews-section .reviews-container {
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Header block spans the full container width so the centred h2
   text aligns with the viewport centre rather than with the
   narrower carousel box. */
.reviews-section .facebook-reviews-header {
  width: 100% !important;
  text-align: center !important;
}

/* (y) Belt-and-braces carousel horizontal centering. The component
   already has `margin: 0 auto` in its own scoped styles, but we
   re-assert it here via an unscoped rule in case a future legacy
   rule accidentally overrides the component-level one. */
.reviews-section .reviews-carousel {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* (z) Reserved — was previously a `.hero + .reviews-section
   { padding-top: 0 }` override that zeroed the reviews-section's
   top padding when it directly followed the hero. Removed
   2026-04-11 per Ash's instruction that the h2 "What Our Customers
   Say" should have an equal gap BOTH above AND below, measured
   from the hero section's box edge (not from the hero's CTA
   buttons).

   Restoring the reviews-section's own `padding-top` (40 px on
   mobile / desktop via BATCH 8 rule (a) and the pre-existing
   site-wide rule) means:

     [ hero CTA buttons ]
           ↕ 40 px — .hero padding-bottom (inside hero box)
     [ hero section BOX ENDS here ]
           ↕ 40 px — .reviews-section padding-top (inside reviews box)
     [ "What Our Customers Say" h2 ]
           ↕ 40 px — h2 margin-bottom (rule w)
     [ first review card ]

   The h2 is perfectly sandwiched with equal 40 px gaps on both
   sides measured from the adjacent section's box edge. Total
   distance from hero's CTA to the h2 is 80 px (two independent
   40 px gaps), but visually that reads as "two matched breathing
   rooms, one each side of the section boundary" — which is what
   Ash wants. */

/* (aa) `.services-section` top padding tracks the hero-rhythm
   token so the gap ABOVE the "Our Services" title matches the
   gap BELOW the carousel controls (which is set by the adjacent
   sections' natural padding).

   Mobile (< 768): was 24 from an override at style.css:7066,
     now `calc(var(--inter-section-gap) + 16px)` = 40 px to match
     the hero/reviews rhythm.
   Desktop (≥ 768): `var(--inter-section-gap)` = 40 px at the
     clamp max, 28 at 800 px, etc. Tracks the other section gaps.

   Specificity: `body[data-service="home"] .services-section`
   + `!important` at (0, 2, 1) → we need (0, 2, 2) to beat it. */
@media (max-width: 767px) {
  body[data-service="home"] .services-section,
  body[data-service="services"] .services-section {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
  }
}

/* (ab) Carousel track vertical padding: gives the brand-accent
   glow from `.reviews-card box-shadow` room to extend above the
   first card and below the last card without being clipped by
   the `.reviews-carousel__viewport { overflow: hidden }` that the
   translate-based slider requires.
   Value history:
   - 2026-04-11 (initial): `padding: 0` to keep the h2 margin-bottom
     as the exact visual gap to the first card.
   - 2026-04-11 (glow update): `padding: 14px 0` to accommodate the
     24 px magenta glow blur (10 px offset + 24 px blur → ~34 px
     total reach past the card edge, but the shadow is already
     heavily faded at the outer 20 px, so 14 px of track padding is
     enough to keep the visually significant portion unclipped).
     Rule (w2) below compensates by reducing `.reviews-section h2
     margin-bottom` so the TOTAL visual gap from h2 bottom to the
     first card top stays 40 / 28 / 40 (mobile / tablet / desktop). */
.reviews-section .reviews-carousel__track {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* (w2) H2 margin-bottom compensation. Rule (ab) above restored
   14 px of top padding inside the carousel track so the box-shadow
   glow has room to extend without being clipped. Without this rule,
   the visible gap from h2 bottom to the first card top would be
   `h2.margin-bottom + track padding-top` = 40 + 14 = 54 px.
   Subtracting 14 from the h2 margin-bottom gets us back to 40 px
   visually (26 + 14 = 40), while preserving the symmetric 40 px
   ABOVE the h2 (from .reviews-section padding-top).

   Specificity + selector matches rule (w) exactly — same
   (0, 3, 2) with `body[data-service]` prefix — and lives later in
   source order so it wins the cascade. */
body[data-service] .reviews-section .facebook-reviews-header h2,
body[data-service] .reviews-section .rating-summary h2 {
  margin-bottom: calc(var(--inter-section-gap) - 14px) !important;
}
@media (max-width: 767px) {
  body[data-service] .reviews-section .facebook-reviews-header h2,
  body[data-service] .reviews-section .rating-summary h2 {
    margin-bottom: calc(var(--inter-section-gap) + 16px - 14px) !important;
  }
}

/* (ac) Mobile card inset: shrink the visible card width by 40 px
   (20 px of slide horizontal padding on each side).

   Value history:
   - 2026-04-11 (initial): 10 px each side — Ash said the cards were
     still a bit too close to the viewport edges.
   - 2026-04-11 (doubled): 20 px each side. Card now has 20 px of
     visible breathing room from each edge on phones.

   Mobile only (< 768 px). Tablet and desktop don't need this
   because those viewports are wider and perView > 1 already gives
   the cards visual breathing room via the inter-card spacing. */
@media (max-width: 767px) {
  .reviews-section .reviews-carousel__slide {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BATCH 10 (2026-04-11): Per-page gap normalisation — mobile only.

   Ash audited several pages and found gaps that either don't
   exist yet or stack twice. This block normalises everything to
   the same 40 px reference gap (the hero's own `padding-bottom`
   on mobile via `calc(var(--inter-section-gap) + 16px)`).

   All rules are inside `@media (max-width: 767px)` so desktop
   layout is completely untouched. All selectors start with
   `body[data-service='X']` to scope to the specific page.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── /faq page ────────────────────────────────────────────────
     Three fixes:
     1. Restore `.faq-section padding-top: 40` — was forced to 0
        by BATCH 8 rule (j2) on /faq. Ash wants the gap back so
        there are TWO separate 40 px breathing rooms around the
        hero→faq section boundary (hero padB inside hero + faq
        padT inside faq-section). Same pattern as the home page's
        hero→reviews transition.
     2. Zero `.faq-section padding-bottom` — collapses the double
        40+40 gap between the last FAQ card and the reviews
        section (currently 82 visible) down to a single 40 gap
        which comes from the reviews-section's own padding-top.
     3. Set `.reviews-section padding-bottom: 40` — currently 0
        from BATCH 8 rule (a2). On /faq the reviews section is
        followed by the footer, and the carousel dots (controls)
        end flush with the footer top. Ash said "under the
        selector / carousel dots we want another gap, it's too
        close to the margin". Adding 40 px pushes the footer
        down so the dots have proper breathing room.
        This rule is ONLY applied on /faq — on other pages the
        reviews section is followed by a different section
        (services, faq, cta-banner, etc.) and the BATCH 8 a2
        rule (padding-bottom: 0) is correct. Hence the scoped
        `body[data-service='faq']` selector. */
  /* Specificity bumped to (0, 5, 1) via the three-`:not()` trick to
     beat BATCH 8 rules (j2), (l), (a2) which use the same pattern.
     This rule pattern matches the `.faq-section padding-top: 40 !important`
     restoration on mobile only — desktop already had the correct
     padding-top from the BATCH 8 site-wide rule. The padding-bottom
     is moved OUTSIDE this media query below (rule (ae)) so it also
     applies on desktop, collapsing the desktop double gap Ash
     spotted between the last FAQ card and the reviews h2. */
  body[data-service='faq']:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .faq-section {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
  }
  body[data-service='faq']:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .reviews-section {
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* ── /about page ──────────────────────────────────────────────
     Fix 1: Zero `.about-service-description padding-bottom` —
     currently 40, stacks with `.reviews-section padding-top: 40`
     giving 80 visible between the owner image (end of specs
     side) and the "What Our Customers Say" title. Ash said "we
     have two gaps, we only want one". Collapsing about's padB
     leaves the reviews-section's own padT 40 as the single gap.

     Fix 2: Center the `.desktop-cta-banner-container` contents
     on mobile. The `.desktop-cta-banner` is `display: flex` with
     `justify-content: normal` (= flex-start), so the single
     child `.cta-banner-content` (~296 wide inside a 350 wide
     parent) sits flush-left with ~54 px empty on the right. Ash
     said the title, text, and button aren't centered on mobile.
     Setting `justify-content: center` on the flex parent centres
     the content block horizontally. The child `.cta-banner-content`
     already has `text-align: center` so the title + button
     (which are text inside that child) also centre within their
     container. Two layers of centering: (1) flex parent centres
     the content block; (2) text-align centres text inside it. */
  /* The `.about-service-description padding-bottom: 0` rule is
     moved OUTSIDE this media query below (rule (ae)) so it applies
     at both mobile and desktop, collapsing the double gap Ash
     spotted between the owner image and the reviews h2. */
  body[data-service='about'] .desktop-cta-banner {
    justify-content: center !important;
  }

  /* ── /projects listing page ───────────────────────────────────
     `.projects-listing-section` currently has `padding: 24px 0`,
     so the gap from hero bottom to first card is 24 and from
     last card to footer is also ~24. Ash wants both to be 40. */
  body[data-service='projects'] .projects-listing-section {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* ── /projects/{slug} project detail pages ────────────────────
     `.project-content` wraps everything below the `.project-hero`
     (title / breadcrumb / subtitle / quick-facts) and above the
     `.article-bottom-cta`. Currently has `padding: 24px 0`. Ash
     wants 40 on both sides so the gap under the hero (above the
     brief/first content) is 40, and the gap under the gallery
     (before the article-bottom-cta) is also 40.

     Applied via the same `body[data-service='projects']` scope
     because both the listing page AND every project detail page
     share this `data-service` attribute (verified in the page
     front matter). The `.projects-listing-section` doesn't exist
     on detail pages and `.project-content` doesn't exist on the
     listing page, so the two rules don't collide. */
  body[data-service='projects'] .project-content {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* ── /blogs listing page ──────────────────────────────────────
     Same as /projects: `.blog-listing-section` currently has
     `padding: 24px 0`, Ash wants 40 / 40. */
  body[data-service='blog'] .blog-listing-section {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* ── /blogs/{slug} blog detail pages ──────────────────────────
     The gap from `.article-meta` bottom to `.toc-sidebar` top
     is currently 48 px (meta bot 314 → toc top 362). Ash wants
     40. Source: `.article-hero padding-bottom: 24` (inside the
     hero section, below the meta) + `.article-layout padding-top:
     24` (inside the main grid, above the TOC) = 48.

     Fix: reduce `.article-layout padding-top` to 16 so the total
     becomes 24 (hero padB, unchanged) + 16 (layout padT) = 40.
     This keeps the hero's own breathing room intact and only
     tightens the first row of the article layout grid. Same
     `body[data-service='blog']` scope.

     Ash also said "above related articles title. One gap. Seems
     to be okay" — already 40 from existing rules, not touched. */
  body[data-service='blog'] .article-layout {
    padding-top: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   BATCH 10 EXTENSION — Desktop double-gap collapse (all widths).

   Ash reviewed the DESKTOP layouts for /services, /contact, /faq,
   and /about and reported "we have a double gap before What Our
   Customers Say, please remove that" on each. Pattern confirmed
   on all four pages:

     preceding section padding-bottom: 40  (inside preceding box)
   + reviews section  padding-top: 40       (inside reviews box)
   = 80 px visible gap from last content to reviews h2

   The user wants this collapsed to a single 40 px gap. Same fix
   applied on all four pages: zero the preceding section's
   padding-bottom so only the reviews section's padding-top
   provides the gap. This matches the mobile `/about` fix pattern
   that was already approved in BATCH 10.

   These rules live OUTSIDE the `@media (max-width: 767px)` block
   so they apply at BOTH mobile and desktop — Ash only complained
   about desktop, but the mobile pages have the same pattern, and
   the fix is harmless (the user previously approved the same
   collapse on mobile /about).
   ══════════════════════════════════════════════════════════════ */

/* (ae) Zero the preceding section's padding-bottom on the four
   pages where `.reviews-section` follows a full-width content
   section. Specificity matches BATCH 8's three-`:not()` trick
   (0, 5, 1) where needed to beat the `!important` defaults. */

body[data-service='faq']:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .faq-section {
  padding-bottom: 0 !important;
}

body[data-service='about']:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .about-service-description {
  padding-bottom: 0 !important;
}

/* /services and /contact use simpler selectors because the
   preceding section classes (`.services-section`, `.contact-main-section`)
   don't have higher-specificity overrides to beat. */
body[data-service='services']:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .services-section {
  padding-bottom: 0 !important;
}

body[data-service='contact']:not([data-service="__a__"]):not([data-service="__b__"]):not([data-service="__c__"]) .contact-main-section {
  padding-bottom: 0 !important;
}

/* (af) Gallery centering for incomplete rows. Ash said "when we
   have 1, 2, or 3 images not 4, center them" (on the gallery
   section of service pages) and "when we have 3 on top + 1 on
   bottom, center the bottom one" (on project detail pages with
   4-ish images in a grid).

   Both requests collapse to: "center the gallery row(s) when they
   don't fill the grid". The cleanest CSS for this is switching
   `.gallery-grid` from `display: grid` to `display: flex` with
   `flex-wrap: wrap` + `justify-content: center`. Flex-wrap centers
   items in rows AND centers rows with fewer items automatically
   — no media query or item-count detection needed.

   Applies at all widths. The per-card flex-basis keeps the same
   visual sizing as the grid version (the columns were already
   ~260-300 px wide at desktop, matching `minmax(260px, 1fr)`
   from the old grid). On mobile the cards wrap to 1 per row
   naturally because the flex-basis makes them too wide to fit 2. */
.gallery-section .gallery-grid,
body[data-service='projects'] .gallery-grid,
body[data-service='recent-work'] .gallery-grid,
main.project-content .gallery-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  /* gap is kept from the existing rule (18 px desktop, 12 px ≤ 640 px) */
}
.gallery-section .gallery-grid > *,
body[data-service='projects'] .gallery-grid > *,
body[data-service='recent-work'] .gallery-grid > *,
main.project-content .gallery-grid > * {
  /* Fixed flex-basis so cards keep their intended width. min()
     + max-width guard against overflow on very narrow viewports.
     260 px matches the old grid's `minmax(260px, 1fr)` floor exactly
     — at 260 three cards (+ 2×18 gap = 816) fit inside the project
     detail page's ~836 px gallery container, preserving the original
     3-on-top + 1-on-bottom layout for 4-image galleries. Dropping
     from 280 → 260 because 280 reduced bournemouth-2026 from 3+1 to
     2+2 (3×280 + 2×18 = 876 > 836). */
  flex: 0 0 min(260px, 100%);
  max-width: 100%;
}