/* ══════════════════════════════════════════════════════════════
   CRITICAL: iOS Safari white bar fix
   Root element background must be set explicitly, BEFORE the reset,
   otherwise iPhones paint a white strip below the footer when the
   Safari toolbar collapses on scroll (overflow area).
   Use the same navy as the footer background for seamless rendering.
   ══════════════════════════════════════════════════════════════ */
html {
  background-color: #0E2A47;
}

/* CSS Variables - EXACT from header.html and hero.html */
:root {
  --top-bar-height: 0px;
  /* Palette tokens */
  --color-primary: #1D5CAC;
  --color-secondary: #1F2937;
  --color-accent: #F37A1F;
  --color-dark-base: #0E2A47;
  --color-light-base: #F5F9FF;
  --color-highlight: #D9E7F7;
  --text-on-light: #0E2A47;
  --text-on-dark: #ffffff;
  --muted-on-dark: rgba(245, 241, 232, 0.7);
  --btn-primary-bg: #1D5CAC;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #174789;
  /* Hero accent (chevron color) — pages can override */
  --hero-accent: #1D5CAC;
  /* Brand accent for native reviews carousel (card glow, reviewer name) */
  --reviews-brand-accent: var(--color-accent);
  /* Hero CTA Variables */
  --btn-hero-bg: var(--color-primary);
  --btn-hero-hover: #174789;
  --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: #5B8FC9;
  --card-bg-light: var(--color-secondary);
  --card-icon-bg: rgba(245, 241, 232, 0.08);
  --card-icon-line: #f5f1e8;
  /* 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: #F37A1F;
  --accent-red-600: #F37A1F;
  --accent-red-700: #D86614;
  --blush-tint: #D9E7F7;
  --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: '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, 3.8vw, 16px);
  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, #1D5CAC 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, #1D5CAC 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: '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: '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: '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 - Trade Grow Footer Strategy v1
   Six zones: certifications strip, main grid, compact map, legal disclosure,
   bottom bar, JSON-LD schema (emitted from src/pages/index.astro).
   ========================================================================== */

.footer {
  background: var(--old-site-bg-dark);
  color: var(--white);
  padding: var(--section-pad-y) 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 ----------
   Three equal columns, all centred horizontally within their slots. */

.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;
}

/* Reset any globally-positioned tags (e.g. the header's `nav { position: absolute }`
   rule at line 247) so footer columns sit in the grid correctly. */
.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;
}

/* Row 1: phone / email / whatsapp / address — horizontal, centred. */
.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;
}

/* Row 2: opening hours label + 3 inline slots (Mon-Fri / Sat / Sun). */
.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-whatsapp {
  color: #25D366;
  font-weight: 600;
}

.footer-contact-whatsapp svg {
  fill: #25D366;
}

.footer-contact-whatsapp:hover {
  color: #20BA5A;
}

.footer-contact-address {
  max-width: none;
}

/* Hours: each slot is a small inline group (days + hours together).
   The gap between slots creates the visual breathing room the client
   asked for between Mon-Fri / Sat / Sun. */
.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;
}

/* Columns 3 & 4: Lists */
.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 (re-style; keeps .social-links / .social-link class names) */
.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-map {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

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

.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 4: Companies Act 2006 legal disclosure ---------- */

.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 5: Bottom bar ---------- */

.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;
}

.powered-by {
  margin: 0;
}

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

.powered-by a:hover {
  color: var(--white);
}

/* ---------- WhatsApp button (existing component, kept) ---------- */

.whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25D366;
  color: white !important;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.2s ease;
  margin: 8px 0 4px;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
  min-height: 44px;
  align-self: flex-start;
}

.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:focus-visible {
  outline: 2px solid var(--old-site-accent-cyan);
  outline-offset: 3px;
}

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

/* ==========================================================================
   Footer responsive breakpoints
   Mobile   <  640px
   Tablet   640-1023px
   Desktop  1024-1439px
   Wide     >=1440px
   ========================================================================== */

/* Tablet: 640-1023px - 2x2 grid, reduced cert gaps */
@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: 1.4fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }

  .footer-contact-bar {
    margin-bottom: 40px;
    padding: 24px 0;
  }

  .footer-contact-bar-inner {
    gap: 20px 28px;
    justify-content: flex-start;
  }

  .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, and
   reordered per client request: Certs → Brand (socials only) → Contact →
   Services → Areas → Map → Legal → Bottom bar.
   The logo is hidden on mobile because the sticky header already carries it. */
@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 the brand-link (logo) on mobile — the sticky header already carries it. */
  .footer-brand .footer-brand-link {
    display: none;
  }

  /* Reorder content on mobile. We flatten .footer-top into the
     .footer-content flex flow using `display: contents`, which lets us
     interleave Contact Us between the Brand and Services sections.
     Final visual order (top-to-bottom):
       1) Brand (tagline + socials — logo hidden)
       2) Contact Us (contact bar)
       3) Services
       4) Areas We Cover
       5) Map
       6) Legal disclosure
     The Certifications strip is a sibling of .footer-content and stays
     pinned at the very top by the document flow (it precedes .footer-content
     in the DOM). */
  .footer-top {
    display: contents;
  }

  .footer-top > .footer-brand      { order: 1; }
  /* Hide the logo on mobile — the sticky header already carries it */
  .footer-brand-logo { display: none !important; }
  .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; }

  /* Each section now participates in the .footer-content flex layout directly. */
  .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;
  }

  /* Mobile footer lists — multi-column centered layout
     Services: lock to 2 per row + 1 below (longer labels).
     Areas: wrap naturally (short labels usually flow 3 + 2). */
  .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;
  }

  /* Services: force 2 columns so the 3rd item drops below, centered */
  .footer-quick-links li {
    flex: 0 0 calc(50% - 9px);
    max-width: calc(50% - 9px);
  }

  .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-bar-inner {
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }

  .footer-contact-item {
    min-height: 28px;
    font-size: 14px;
    width: auto;
    justify-content: center;
  }

  .footer-contact-address,
  .footer-contact-hours {
    align-items: center;
  }

  .footer-hours-inline {
    align-items: center;
  }

  .footer-hours-inline .footer-hours-row {
    font-size: 13px;
    justify-content: center;
  }

  .footer-map {
    margin: 0 0 20px;
  }

  .map-container {
    height: 140px;
    margin: 0;
    width: 100%;
  }

  .footer-legal {
    font-size: 12px;
    padding: 0 4px;
    margin-top: 8px;
    text-align: center;
  }

  .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;
  }
}

/* ===== 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, #F37A1F 0%, #D86614 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%, #D86614 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: clamp(500px, 72vh, 680px);
  justify-content: center;
}

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;
    max-height: calc(100dvh - 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, 6.8vw, 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(12px, 3.2vw, 15px) !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;
  min-height: 100dvh;
  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;
    min-height: 100dvh;
    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: 120px;
  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 buttons — SITE-WIDE BRAND RULE
   Active/clicked state MUST stay brand magenta (#1D5CAC) with
   white text. Hover uses a soft magenta-tinted highlight.
   See modifications.md for the full rule.
   ============================================================ */
.faq-filters .filter-btn {
  background: #ffffff !important;
  color: #1D5CAC !important;
  border-color: rgba(29, 92, 172, 0.25) !important;
}

/* Kill the legacy cyan slide-in so it doesn't bleed through */
.faq-filters .filter-btn::before {
  background: rgba(29, 92, 172, 0.08) !important;
}

/* Hover — soft magenta-tinted highlight, text stays magenta */
.faq-filters .filter-btn:hover,
.faq-filters .filter-btn:focus-visible {
  background: rgba(29, 92, 172, 0.08) !important;
  color: #1D5CAC !important;
  border-color: #1D5CAC !important;
}

/* Active/clicked — solid brand magenta with white text */
.faq-filters .filter-btn.active,
.faq-filters .filter-btn.active:hover,
.faq-filters .filter-btn.active:focus-visible {
  background: #1D5CAC !important;
  color: #ffffff !important;
  border-color: #1D5CAC !important;
}

.faq-filters .filter-btn.active::before {
  background: #1D5CAC !important;
}


/* ============================================================
   Footer link visibility — dark background, magenta was
   invisible. Use brighter palette tones and clear affordances
   (underline + glow) so every clickable item reads.
   ============================================================ */

/* Quick Links (Services) in footer — were missing a hover rule */
.footer .footer-quick-links a {
  color: rgba(255, 255, 255, 0.88) !important;
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease, padding-left 0.2s ease;
}
.footer .footer-quick-links a:hover,
.footer .footer-quick-links a:focus-visible {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-color: #D9E7F7;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-shadow: 0 0 14px rgba(232, 213, 245, 0.5);
}

/* Contact bar: phone, email, address */
.footer a.footer-contact-item:hover {
  color: #ffffff !important;
  text-shadow: 0 0 14px rgba(232, 213, 245, 0.55);
}
.footer a.footer-contact-item:hover svg {
  fill: #D9E7F7 !important;
}
.footer a.footer-contact-item:focus-visible {
  outline-color: #D9E7F7 !important;
}

/* WhatsApp keeps its brand green but gets a readable hover glow */
.footer .footer-contact-whatsapp:hover {
  color: #3BDC7C !important;
  text-shadow: 0 0 14px rgba(37, 211, 102, 0.55);
}
.footer .footer-contact-whatsapp:hover svg {
  fill: #3BDC7C !important;
}

/* Social icons — lighter highlight bg and lift */
.footer .footer-brand .social-link:hover {
  background: #D9E7F7 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232, 213, 245, 0.35);
}
.footer .footer-brand .social-link:hover svg {
  fill: #1D5CAC !important;
}
.footer .footer-brand .social-link:focus-visible {
  outline-color: #D9E7F7 !important;
}

/* Bottom bar policy links (Terms, Privacy, Sitemap) */
.footer .footer-policy-links a {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.footer .footer-policy-links a:hover,
.footer .footer-policy-links a:focus-visible {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-color: #D9E7F7;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-shadow: 0 0 14px rgba(232, 213, 245, 0.5);
}
.footer .footer-policy-links a:focus-visible {
  outline-color: #D9E7F7 !important;
}

/* Powered by — default must be legible; magenta was invisible */
.footer .powered-by a {
  color: #D9E7F7 !important;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.footer .powered-by a:hover,
.footer .powered-by a:focus-visible {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-color: #D9E7F7;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-shadow: 0 0 14px rgba(232, 213, 245, 0.6);
}

/* Brand logo link focus ring */
.footer .footer-brand-link:focus-visible {
  outline: 2px solid #D9E7F7;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Certifications strip — if any logos are wrapped in links, ditto */
.footer .footer-cert-item a:hover img {
  filter: brightness(1.15) drop-shadow(0 0 10px rgba(232, 213, 245, 0.55));
  transition: filter 0.2s ease;
}


/* 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(160px, 17vw, 260px) !important;
  max-width: 260px !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: 150px !important;
    max-width: 150px !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(310px, 24vw, 400px) !important;
    max-width: 400px !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: '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,
.footer .footer-contact-bar-heading {
  color: #ffffff !important;
}

.footer .footer-section h2,
.footer .footer-section h3,
.footer .footer-section a,
.footer .footer-links a,
.footer .powered-by a,
.footer .footer-contact-bar-heading {
  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: #1D5CAC !important;
  border-color: #1D5CAC !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: #174789 !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: #174789 !important;
  border-color: #174789 !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: #D86614;
}

/* 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 {
    /* Match the non-home mobile size (see ~line 13100) so every hero
       title is the same on mobile. Previously 24-30px, now 26-34px. */
    font-size: clamp(26px, 6.8vw, 34px) !important;
    line-height: 1.15 !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 {
    /* Match the global mobile subtitle size (see ~line 4155). */
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.35 !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: #D86614 !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: #D86614 !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 #F37A1F !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: #F37A1F !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: #1D5CAC !important;
    border-color: #1D5CAC !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: #1D5CAC;
  --color-secondary: #212121;
  --color-accent: #F37A1F;
  --color-dark-base: #0E2A47;
  --color-light-base: #F5F9FF;
  --color-highlight: #D9E7F7;
  --text-on-light: #0E2A47;
  --text-on-dark: #FFFFFF;
  --btn-primary-bg: #1D5CAC;
  --btn-primary-hover: #174789;
  --btn-hero-bg: #1D5CAC;
  --btn-hero-hover: #174789;
  --btn-hero-text: #FFFFFF;
  --accent-red-500: #1D5CAC;
  --accent-red-600: #174789;
  --accent-red-700: #7A1111;
  --mist: #F3F3F5;
}

body[data-service] .top-bar,
body[data-service] .footer,
body[data-service] .footer .footer-bottom {
  background: #0E2A47 !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: #ffffff !important;
}

/* Nav link hover/focus: lighter highlight for readability over any
   hero background. No permanent highlight for the current page —
   users find it confusing and hard to read at the same time. The
   current-page link simply looks like every other nav link. */
body[data-service] .header .nav-menu a:hover,
body[data-service] .header .nav-menu a:focus-visible {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
/* Explicitly match the default light nav link colour — do NOT use
   `inherit` because body color is dark navy on this site. */
body[data-service] .header .nav-menu a[aria-current='page'] {
  color: rgb(240, 242, 245) !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: #1D5CAC !important;
  border-left-color: #D9E7F7 !important;
  color: #FFFFFF !important;
}

body[data-service] .btn.btn-primary,
body[data-service] .btn.btn-service,
body[data-service] .cta-banner-btn {
  background: #1D5CAC !important;
  border-color: #1D5CAC !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: #174789 !important;
  border-color: #174789 !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: 100px !important;
    max-height: 100px !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: #1D5CAC !important;
  border-color: #1D5CAC !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: #174789 !important;
  border-color: #174789 !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: #1D5CAC !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, #1D5CAC 0%, #174789 100%) !important;
  border-color: #D9E7F7 !important;
  box-shadow: 0 10px 24px rgba(140, 10, 10, 0.4) !important;
}

body[data-service] .hero .hero-service-link .hero-service-icon {
  background: #1D5CAC !important;
  border-color: #1D5CAC !important;
}

body[data-service] .hero .hero-service-link .hero-service-text,
body[data-service] .hero .hero-service-link .hero-service-text span {
  color: #1D5CAC !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: #1D5CAC !important;
  border-color: #1D5CAC !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: #174789 !important;
  border-color: #174789 !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%, #0E2A47 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: #D9E7F7 !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: #0E2A47 !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: #1D5CAC !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: #0E2A47 !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: #F5F9FF;
  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: #1D5CAC !important;
    border-color: #1D5CAC !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: #1D5CAC !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: #1D5CAC;
}

.footer-follow .social-link svg {
  width: 24px;
  height: 24px;
  fill: #1D5CAC;
  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: #D9E7F7 !important;
    color: #D9E7F7 !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 #D9E7F7 !important;
  border-bottom: 2px solid #D9E7F7 !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: #1D5CAC !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, #1D5CAC 0%, #174789 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: #1D5CAC !important;
  border-color: #1D5CAC !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: #1D5CAC !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 moved to unified block below) */

/* ── 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 #1D5CAC;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

body[data-service="home"] .hero.hero--left .hero-feature-card .hero-feature-divider {
  background: #1D5CAC;
}

/* ── 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 #F37A1F;
  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: #F37A1F;
}

/* ── 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 #1D5CAC;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

body[data-service="contact"] .hero.hero--left .hero-feature-card .hero-feature-divider {
  background: #1D5CAC;
}

/* ── 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: long + bold across every page, stroke color follows
   the per-page --hero-accent. User wants this consistent site-wide. */
.hero-underline-svg {
  display: block;
  width: clamp(220px, 50%, 360px);
  height: 8px;
  margin-top: 6px;
  overflow: visible;
}

.hero-underline-svg line {
  stroke: var(--hero-accent, #1D5CAC);
  stroke-width: 5;
  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, #1D5CAC);
}

.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, #1D5CAC);
}

.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, #1D5CAC),
              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, #1D5CAC);
  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: #F37A1F;
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 30px;
  white-space: nowrap;
  transition: background 0.3s ease;
}
.cta-pill.call:hover { background: #1D5CAC; }
.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 (site-wide) ── */
body[data-service] .hero.hero--left .hero-content {
  gap: clamp(16px, 2.5vw, 28px) !important;
  min-height: auto !important;
  justify-content: flex-end !important;
}
body[data-service] .hero .hero-intro {
  max-width: 680px !important;
}
body[data-service] .hero .hero-subtitle {
  font-size: clamp(15px, 1.6vw, 20px) !important;
  line-height: 1.5 !important;
  max-width: 660px !important;
  opacity: 0.9;
}

/* ── (reviews background moved to UX POLISH block — now white) ── */

/* ── Compact Service Cards: 3 top + 2 centered bottom (same size) ── */
body[data-service] .services-section .services-grid.services-grid--compact {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  max-width: 1200px !important;
}
/* Top row: 3 cards each span 2 of 6 columns */
body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact:nth-child(-n+3) {
  grid-column: span 2 !important;
}
/* Bottom row: 2 cards same width (span 2), offset by 1 column to center */
body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact:nth-child(4) {
  grid-column: 2 / 4 !important;
}
body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact:nth-child(5) {
  grid-column: 4 / 6 !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, #0E2A47);
  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, #1D5CAC);
  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);
}

/* Per-service accent colours — coloured top border on each card plus
   matching h3 + "Learn more" link, so each card is visually distinct.
   Uses !important to win over the "elevated polish" shorthand border
   override defined later in the file. */
.service-card-compact {
  position: relative;
}

.service-card-compact--boiler-installation {
  border-top: 4px solid #1D5CAC !important;
}
.service-card-compact--boiler-installation .service-card-compact__link {
  color: #1D5CAC;
}
.service-card-compact--boiler-installation .service-card-compact__body h3 {
  color: #1D5CAC !important;
}

.service-card-compact--aga-rayburn-servicing {
  border-top: 4px solid #F37A1F !important;
}
.service-card-compact--aga-rayburn-servicing .service-card-compact__link {
  color: #F37A1F;
}
.service-card-compact--aga-rayburn-servicing .service-card-compact__body h3 {
  color: #F37A1F !important;
}

.service-card-compact--underfloor-heating {
  border-top: 4px solid #1D5CAC !important;
}
.service-card-compact--underfloor-heating .service-card-compact__link {
  color: #1D5CAC;
}
.service-card-compact--underfloor-heating .service-card-compact__body h3 {
  color: #1D5CAC !important;
}

.service-card-compact--water-softeners {
  border-top: 4px solid #1D5CAC !important;
}
.service-card-compact--water-softeners .service-card-compact__link {
  color: #1D5CAC;
}
.service-card-compact--water-softeners .service-card-compact__body h3 {
  color: #1D5CAC !important;
}

.service-card-compact--hot-water-cylinders {
  border-top: 4px solid #1D5CAC !important;
}
.service-card-compact--hot-water-cylinders .service-card-compact__link {
  color: #1D5CAC;
}
.service-card-compact--hot-water-cylinders .service-card-compact__body h3 {
  color: #1D5CAC !important;
}

/* Subtle coloured glow on hover matching the service accent */
.service-card-compact--boiler-installation:hover,
.service-card-compact--underfloor-heating:hover,
.service-card-compact--water-softeners:hover,
.service-card-compact--hot-water-cylinders:hover {
  box-shadow: 0 12px 32px rgba(29, 92, 172, 0.18) !important;
}
.service-card-compact--aga-rayburn-servicing:hover {
  box-shadow: 0 12px 32px rgba(243, 122, 31, 0.22) !important;
}

/* Responsive: compact cards */
@media (max-width: 900px) {
  body[data-service] .services-section .services-grid.services-grid--compact {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact:nth-child(-n+3),
  body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact:nth-child(4),
  body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact:nth-child(5) {
    grid-column: auto !important;
  }
  body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    max-width: 340px !important;
    justify-self: center !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;
  }
  body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact:nth-child(-n+3),
  body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact:nth-child(4),
  body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact:nth-child(5),
  body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact:last-child:nth-child(odd) {
    grid-column: auto !important;
    max-width: none !important;
    justify-self: stretch !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 {
  /* Match contact/global baseline — user wants uniform hero titles site-wide.
     Previously: clamp(32px, 4vw, 56px) + weight 800. */
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}
/* Home hero underline uses the default long/bold style
   (see .hero-underline-svg at ~line 10342). The override below only
   adjusts vertical rhythm, NOT width or thickness — the user wants
   the same wide underline as the other pages. */
body[data-service="home"] .hero .hero-underline-svg {
  margin-top: clamp(12px, 1.5vw, 20px) !important;
  margin-bottom: clamp(12px, 1.5vw, 20px) !important;
}
body[data-service] .hero .hero-subtitle {
  margin-top: 0 !important;
  letter-spacing: 0.01em !important;
}
body[data-service] .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) — site-wide ── */
body[data-service] .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, #0E2A47) !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-right: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-left: 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;
}
/* Default top border — transparent by default so per-service modifier
   classes (.service-card-compact--slug) can paint a coloured top bar. */
.service-card-compact:not([class*="--"]) {
  border-top: 1px solid rgba(0, 0, 0, 0.05) !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: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  /* RULE: FAQ filter buttons must wrap symmetrically (3+3, 4+2, never 5+1).
     max-width constrains so 6 buttons split into two balanced rows. */
  max-width: 620px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 560px) {
  body[data-service] .faq-section .faq-filters {
    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. Horizontal padding moved to .footer-content and
   .footer-bottom-inner so Zone 1 (certifications strip) can span full width.
   Bottom uses env(safe-area-inset-bottom) to prevent iOS white strip. */
body[data-service] .footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: var(--inter-section-gap) 0 env(safe-area-inset-bottom, 0px) !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, #1D5CAC) !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: #1D5CAC;
  --color-secondary: #212121;
  --color-accent: #F37A1F;
  --color-dark-base: #0E2A47;
  --color-light-base: #F5F9FF;
  --color-highlight: #D9E7F7;
  --text-on-light: #0E2A47;
  --text-on-dark: #FFFFFF;
  --muted-on-dark: rgba(255, 255, 255, 0.75);
  --btn-primary-bg: #1D5CAC;
  --btn-primary-hover: #174789;
  --btn-hero-bg: #1D5CAC;
  --btn-hero-hover: #174789;
  --btn-hero-text: #FFFFFF;
  --accent-red-500: #1D5CAC;
  --accent-red-600: #174789;
  --accent-red-700: #6D1010;
}

/* ── Footer + Booking + Why-Choose: dark gray on all pages (MME Heating
   brand palette: white / magenta / gray / black). All dark-surface
   sections use the same #0E2A47 tone for a consistent look. ── */
body[data-service] .footer,
body[data-service] .footer .footer-bottom,
body[data-service] .booking-section,
body[data-service] .why-choose-container {
  background: #0E2A47 !important;
  color: #FFFFFF !important;
}

/* ── Nav hover: white text + subtle shadow for readability over any hero.
   Aria-current (current page) matches the default nav link colour exactly
   — no permanent highlight because dark-coloured highlights are unreadable
   against the dark hero. Only the hover underline grows. ── */
body[data-service] .header .nav-menu > li > a:hover,
body[data-service] .header .nav-menu > li > a:focus-visible {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
body[data-service] .header .nav-menu > li > a[aria-current="page"] {
  color: rgb(240, 242, 245) !important;
  text-shadow: none;
}
body[data-service] .header .nav-menu > li > a:hover::after,
body[data-service] .header .nav-menu > li > a:focus-visible::after {
  width: 100% !important;
  background: #ffffff !important;
}
body[data-service] .header .nav-menu > li > a[aria-current="page"]::after {
  width: 0 !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: 100px !important;
    max-height: 100px !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, #1D5CAC);
  stroke-width: 5;
  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
   Each page gets a unique hero accent so the "Get a Free Quote" button
   glow (defined elsewhere via rgba(var(--hero-accent-rgb), 0.35))
   picks up that colour automatically.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Per-page hero accents — each page gets a DISTINCT color.
   RULE: Every hero page must have its own unique accent colour.
   This affects ONLY: hero underline stroke, call-button border,
   arrow/dot hover colour, and "Get a Quote" button glow shadow.
   Header buttons (call pill, quote) and hero quote-button
   background (#1D5CAC) stay constant across all pages.
   ══════════════════════════════════════════════════════════════ */

/* ── HOME — brand orange ── */
body[data-service="home"] {
  --hero-accent: #F37A1F !important;
  --hero-accent-rgb: 243, 122, 31 !important;
}
body[data-service="home"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── BOILER INSTALLATION — red ── */
body[data-service="boiler-installation"] {
  --hero-accent: #E53935 !important;
  --hero-accent-rgb: 229, 57, 53 !important;
}
body[data-service="boiler-installation"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── AGA & RAYBURN SERVICING — purple ── */
body[data-service="aga-rayburn-servicing"] {
  --hero-accent: #8E24AA !important;
  --hero-accent-rgb: 142, 36, 170 !important;
}
body[data-service="aga-rayburn-servicing"] .hero .fade-in {
  animation-name: heroSlideFromRight;
  animation-duration: 1.2s;
}

/* ── UNDERFLOOR HEATING — teal ── */
body[data-service="underfloor-heating"] {
  --hero-accent: #00897B !important;
  --hero-accent-rgb: 0, 137, 123 !important;
}
body[data-service="underfloor-heating"] .hero .fade-in {
  animation-name: heroSlideFromTop;
  animation-duration: 1.2s;
}

/* ── WATER SOFTENERS — blue ── */
body[data-service="water-softeners"] {
  --hero-accent: #1E88E5 !important;
  --hero-accent-rgb: 30, 136, 229 !important;
}
body[data-service="water-softeners"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── HOT WATER CYLINDERS — rose ── */
body[data-service="hot-water-cylinders"] {
  --hero-accent: #D81B60 !important;
  --hero-accent-rgb: 216, 27, 96 !important;
}
body[data-service="hot-water-cylinders"] .hero .fade-in {
  animation-name: heroSlideFromRight;
  animation-duration: 1.2s;
}

/* ── SERVICES listing — green ── */
body[data-service="services"] {
  --hero-accent: #43A047 !important;
  --hero-accent-rgb: 67, 160, 71 !important;
}
body[data-service="services"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── ABOUT — cyan ── */
body[data-service="about"] {
  --hero-accent: #00ACC1 !important;
  --hero-accent-rgb: 0, 172, 193 !important;
}
body[data-service="about"] .hero .fade-in {
  animation-name: heroSlideFromTop;
  animation-duration: 1.2s;
}

/* ── CONTACT — indigo ── */
body[data-service="contact"] {
  --hero-accent: #5C6BC0 !important;
  --hero-accent-rgb: 92, 107, 192 !important;
}
body[data-service="contact"] .hero .fade-in {
  animation-name: heroSlideFromRight;
  animation-duration: 1.2s;
}

/* ── FAQ — amber ── */
body[data-service="faq"] {
  --hero-accent: #F9A825 !important;
  --hero-accent-rgb: 249, 168, 37 !important;
}
body[data-service="faq"] .hero .fade-in {
  animation-name: heroSlideFromBottom;
  animation-duration: 1.2s;
}

/* ── BLOGS — violet ── */
body[data-service="blogs"] {
  --hero-accent: #5E35B1 !important;
  --hero-accent-rgb: 94, 53, 177 !important;
}
body[data-service="blogs"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── PROJECTS — sky blue ── */
body[data-service="projects"] {
  --hero-accent: #039BE5 !important;
  --hero-accent-rgb: 3, 155, 229 !important;
}
body[data-service="projects"] .hero .fade-in {
  animation-name: heroSlideFromRight;
  animation-duration: 1.2s;
}

/* ── PRIVACY/TERMS/SITEMAP — primary blue ── */
body[data-service="privacy"],
body[data-service="terms"],
body[data-service="sitemap"] {
  --hero-accent: #1D5CAC;
  --hero-accent-rgb: 29, 92, 172;
}
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, #1D5CAC);
  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: #0E2A47 !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, #1D5CAC);
  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).
   Fixed height so every card (current and future) matches regardless
   of source image intrinsic aspect ratio — images are cropped via
   object-fit: cover to fill the locked column. */
body[data-service="projects"] .project-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 260px;
  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, #1D5CAC);
  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: #0E2A47 !important;
  margin: 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.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, #1D5CAC) !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 — release the fixed desktop height */
@media (max-width: 600px) {
  body[data-service="projects"] .project-card {
    grid-template-columns: 1fr;
    height: auto;
  }
  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, #1D5CAC);
  border-left-color: var(--color-primary, #1D5CAC);
}

/* ── Article Content ── */
.article-content {
  max-width: 720px;
}
.article-content h2 {
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--color-primary, #1D5CAC);
  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, #1D5CAC);
  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, #1D5CAC) !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, #1D5CAC);
  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, #1D5CAC) !important;
  border-left-color: var(--color-highlight, #D9E7F7) !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)
   Covers HOME too now (previously excluded via :not(home)) so every hero matches
   the contact page baseline — per user request to make all hero titles uniform. ── */
@media (max-width: 767px) {
  body[data-service] .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;
  }
  /* Also standardise the hero subtitle on mobile so home matches contact. */
  body[data-service] .hero .hero-subtitle {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.35 !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, #0E2A47);
  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, #F5F9FF);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-on-light, #0E2A47);
  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 gray background (not black) ── */
body[data-service="terms"],
body[data-service="privacy"],
body[data-service="sitemap"],
body[data-service="form"],
body[data-service="thank-you"] {
  background: #2D3748 !important;
}
body[data-service="terms"] .header,
body[data-service="privacy"] .header,
body[data-service="sitemap"] .header,
body[data-service="form"] .header,
body[data-service="thank-you"] .header {
  background: transparent !important;
}
body[data-service="terms"] .header.scrolled,
body[data-service="privacy"] .header.scrolled,
body[data-service="sitemap"] .header.scrolled,
body[data-service="form"] .header.scrolled,
body[data-service="thank-you"] .header.scrolled {
  background: rgba(45, 55, 72, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !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, #1D5CAC) !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: #0E2A47 !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: magenta (#1D5CAC) on ALL pages ── */
body[data-service] .header .header-cta-group .btn.btn-primary {
  background: #1D5CAC !important;
  border-color: #1D5CAC !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: #174789 !important;
  border-color: #174789 !important;
  color: #FFFFFF !important;
}

/* ── Header "Call us today" pill: brand orange (#F37A1F) on ALL pages ──
   Stansted Heating Solutions brand accent. */
body[data-service] .header .header-cta-group .cta-pill.call {
  background: #F37A1F !important;
}
body[data-service] .header .header-cta-group .cta-pill.call:hover,
body[data-service] .header .header-cta-group .cta-pill.call:focus-visible {
  background: #D86614 !important;
}

/* ══════════════════════════════════════════════════════════════
   BATCH 7 (2026-04-10): Mobile hero 2-line clamps, footer services
   single-line layout, unified mobile menu palette.
   These rules live at the very end of the file so they win on
   source order over every earlier mobile override.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Hero title & subtitle: 2-line cap via silent overflow safety net ──
   The rule is: title and subtitle must NATURALLY fit in ≤ 2 lines at every
   mobile width. Copy is shortened in site.json / page front matter to make
   sure that's the case. These CSS rules are a silent safety net — no
   -webkit-line-clamp (which would render a visible "…" ellipsis), just a
   max-height + overflow:hidden cap so that if someone ever extends the copy
   beyond 2 lines in the future the extra line is hard-clipped without an
   ugly trailing ellipsis. The gap between subtitle and CTA is pinned to a
   minimum 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;
  }

  /* Non-negotiable gap between subtitle and the CTA row. */
  body[data-service] .hero .hero-intro .hero-cta-row {
    margin-top: clamp(18px, 4vw, 28px) !important;
  }
}

/* ── 2. Footer services list: each service on ONE line, stack when it doesn't fit ──
   Previously forced `flex: 0 0 calc(50% - 9px)` so every item was 121px
   wide → long labels like "Boiler Service & Repair" wrapped internally to
   2 rows. Now each <li> sizes to its content and the flex container wraps
   items to a new row only when they can't share one. `white-space: nowrap`
   on the anchor guarantees the label never breaks mid-word. */
@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;
  }

  /* Centre the whole brand column (tagline, socials, etc) within the
     footer content area. `.footer-section` has max-width:260px which would
     otherwise leave it flush-left inside the 272px content area on a
     320px viewport. margin auto does the horizontal centering. */
  .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;
  }

  /* Centre the tagline ("Family-run heating and plumbing…") and the
     certification logos on every mobile page. Belt-and-braces — earlier
     rules already do this, but some page-specific overrides were
     un-centering them on service pages. */
  .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;
  }
}

/* ── 3. Mobile menu palette: unify ALL pages to the home/index palette ──
   Home uses:
     - menu container  #212121 (neutral dark)
     - resting link bg #303030
     - active/hover    #1D5CAC (brand magenta)
     - submenu bg      #3a3a3a
     - submenu link bg #3a3a3a
   Service pages were inheriting `.mobile-menu-link { background: var(--ink-dark) }`
   which resolved to #0E2A47 (brand dark purple) — different from home.
   This block forces every `body[data-service]` page (home included) to
   use the home palette so the menu looks identical everywhere. */
@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;
  }

  /* Active + hover states keep the brand magenta from earlier rules,
     but re-declare here so they win over the #303030 rule above. */
  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: #1D5CAC !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: #1D5CAC !important;
    color: #ffffff !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   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;
  }

  /* (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").
     ── Overridden 2026-04-11: originally `calc(var(--inter-section-gap)
     + 16px)` to match the rest of the site rhythm, but the
     `.lc_reviews_widget` iframe that immediately precedes the FAQ
     section already has its own built-in bottom whitespace inside the
     cross-origin LeadConnector widget content. Stacking a 40 px
     `.faq-section padding-top` on top of that produced a visibly
     over-large gap between the reviews card and the FAQ title. Ash
     confirmed mobile-only this should be flush. Setting padding-top
     to 0 lets the iframe's internal bottom space be the single visual
     gap above the FAQ title. The BATCH 7/8 `.faq-container gap`
     (rule k) still controls the title → filters spacing, so the
     internal FAQ rhythm is unchanged. */
  body[data-service]: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;
  }

  /* (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) Footer certifications panel on mobile — transparent background,
     natural top padding (0 keeps it close to what's above), but a proper
     padding-bottom so there's a clear gap between the cert logos and the
     separator line above the brand column (matches the desktop rhythm
     and prevents the cert strip from visually colliding with the Brand
     column text). */
  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: calc(var(--inter-section-gap) + 16px) !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: Native ReviewsCarousel migration — neutralise
   iframe-era CSS workarounds now that the GHL iframe is replaced
   by native Astro components. Ported from the MMEH template.
   ══════════════════════════════════════════════════════════════ */

/* (u) Neutralise the iframe-era "pull title into iframe" trick. */
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: auto !important;
}

/* (v) Mobile: reset the -63px overlap that hid the iframe's
   "Powered by" strip. Native carousel needs no overlap. */
@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) H2 margin-bottom below "What Customers Say" heading.
   Symmetrical 40px gap above (from section padding-top) and
   below (from this margin-bottom). */
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) Centre the carousel + header inside the flex container. */
.reviews-section .reviews-container {
  align-items: center !important;
  justify-content: flex-start !important;
}
.reviews-section .facebook-reviews-header {
  width: 100% !important;
  text-align: center !important;
}

/* (y) Belt-and-braces carousel horizontal centering. */
.reviews-section .reviews-carousel {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* (ab) Track padding for brand-accent glow breathing room. */
.reviews-section .reviews-carousel__track {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* (w2) H2 margin-bottom compensation for the 14px track padding
   so visible gap stays 40px (26 + 14 = 40). */
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: 20px breathing room from viewport edges. */
@media (max-width: 767px) {
  .reviews-section .reviews-carousel__slide {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* (aa) Services section top padding tracks hero rhythm on mobile. */
@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;
  }
}

/* ══════════════════════════════════════════════════════════════
   BATCH 10: JRLC structural fixes ported to SSHS.
   Hero spacing, footer column equalization, areas grid layout,
   footer content-padding reduction, gallery centering, hero
   button styles, and per-page gap normalization.
   ══════════════════════════════════════════════════════════════ */

/* (2a) Hero spacing: underline→subtitle gap + subtitle→CTA gap.
   Ported from JRLC/AFSP-v2 hero spacing pattern. */
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) Footer content padding-top reduction (88px → 0, gap comes
   from footer's own padding-top). */
.footer .footer-content {
  padding-top: 0 !important;
}

/* (2c) Footer column height equalization — all 3 columns stretch
   to the same height at desktop. */
.footer .footer-top {
  align-items: stretch;
}
.footer .footer-top > .footer-section {
  min-height: 180px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 640px) {
  .footer .footer-top > .footer-section {
    min-height: 0;
  }
}

/* (2d) Footer areas — centered pill rows (not columns).
   Flexbox wrap keeps areas flowing naturally in rows. */
.footer-areas-col .footer-areas {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-areas-col .footer-areas li {
  display: inline-flex !important;
  padding: 6px 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* (2e) Gallery grid centering — orphan images center instead
   of left-aligning. */
.gallery-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
}

/* (2f) Hero quote button → always brand blue bg, per-page glow.
   Keeps primary conversion button visually consistent. */
body[data-service] .hero .hero-cta-row .btn.btn-primary {
  background: #1D5CAC !important;
  border-color: #1D5CAC !important;
  color: #FFFFFF !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-primary:hover {
  background: #174789 !important;
  border-color: #174789 !important;
  box-shadow: 0 4px 14px rgba(var(--hero-accent-rgb), 0.40) !important;
}

/* (2g) Hero call button → outline-light with per-page accent border. */
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, #F37A1F) !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(4px) !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-outline-light:hover {
  background: rgba(var(--hero-accent-rgb), 0.18) !important;
}

/* (2h) Reviews carousel: center track when fewer than perView cards.
   When there are only 1-3 reviews on desktop (perView=4), the cards
   left-align by default. This centers them. */
.reviews-carousel__track {
  justify-content: center;
}

/* (2i) Per-page gap normalization (BATCH 10 from MMEH).
   Scoped to mobile only — desktop layout untouched. */
@media (max-width: 767px) {

  /* /faq: restore faq-section padding-top, zero padding-bottom,
     add reviews-section padding-bottom for footer breathing room. */
  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;
    padding-bottom: 0 !important;
  }
  body[data-service='faq'] .reviews-section {
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }

  /* /about: CTA banner centering. */
  body[data-service='about'] .desktop-cta-banner-container {
    text-align: center !important;
  }
  body[data-service='about'] .desktop-cta-banner {
    display: inline-flex !important;
    justify-content: center !important;
  }

  /* /projects + /blogs listing: padding normalization. */
  body[data-service='projects'] .projects-listing-section,
  body[data-service='blogs'] .blog-listing-section {
    padding-top: calc(var(--inter-section-gap) + 16px) !important;
    padding-bottom: calc(var(--inter-section-gap) + 16px) !important;
  }
}

/* Desktop double-gap collapse: zero preceding section padding-bottom
   so only the reviews-section padding-top provides a single gap. */
body[data-service='faq'] .faq-section,
body[data-service='about'] .about-service-description,
body[data-service='services'] .services-section,
body[data-service='contact'] .contact-main-section {
  padding-bottom: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   Footer certifications strip — taller logos + separator line.
   Google icon lives in the Brand column, not here.
   ══════════════════════════════════════════════════════════════ */
/* Gas Safe / Checkatrade logo sizing — taller for more visual weight */
.footer-cert-item img[src*="gas_safe"],
.footer-cert-item img[src*="checkatrade"] {
  height: 76px !important;
  max-width: 200px !important;
  opacity: 1 !important;
}

/* Separator line between the certifications strip and the 3-column grid,
   matching the existing line above the Contact Us bar. */
.footer-content .footer-top {
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding-top: 28px !important;
}

/* ── Google icon under the brand tagline ── */
.footer-brand-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 6px;
  line-height: 0;
  border-radius: 50%;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.85;
}
.footer-brand-google:hover,
.footer-brand-google:focus-visible {
  opacity: 1;
  transform: scale(1.08);
}
.footer-brand-google img {
  width: 32px !important;
  height: 32px !important;
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   BATCH 11: Hero breathing room + mobile 2-line clamp.
   Ported from JRLC afsp-v2 pattern and MMEH BATCH 7 silent clamps.
   ══════════════════════════════════════════════════════════════ */

/* Desktop breathing room — remove zero gap between h1/subtitle/CTA and
   let each element have its own consistent top margin. */
body[data-service] .hero .hero-intro h1,
body[data-service] .hero h1 {
  margin-bottom: 0 !important;
}
body[data-service] .hero .hero-subtitle {
  margin-top: clamp(12px, 2vw, 20px) !important;
}
body[data-service] .hero .hero-cta-row {
  margin-top: clamp(18px, 3vw, 32px) !important;
}

/* Mobile 2-line silent clamp on hero title + subtitle.
   Uses overflow hidden + max-height (no ellipsis). Copy should
   still be written to naturally fit 2 lines — this is a safety net. */
@media (max-width: 767px) {
  body[data-service] .hero h1,
  body[data-service] .hero .hero-intro h1 {
    display: block !important;
    overflow: hidden !important;
    max-height: calc(1.2em * 2) !important;
    line-height: 1.2 !important;
  }
  body[data-service] .hero .hero-subtitle {
    display: block !important;
    overflow: hidden !important;
    max-height: calc(1.4em * 2) !important;
    line-height: 1.4 !important;
    margin-top: clamp(10px, 3vw, 16px) !important;
  }
  body[data-service] .hero .hero-cta-row {
    margin-top: clamp(18px, 4vw, 28px) !important;
  }
}