/* CSS Variables - EXACT from header.html and hero.html */
:root {
  --top-bar-height: 0px;
  /* Palette tokens */
  --color-primary: #1f346d;
  --color-secondary: #1F2937;
  --color-accent: #4d91e1;
  --color-dark-base: #19213d;
  --color-light-base: #f5f8fd;
  --color-highlight: #e3edfa;
  --text-on-light: #19213d;
  --text-on-dark: #ffffff;
  --muted-on-dark: rgba(245, 241, 232, 0.7);
  --btn-primary-bg: #1f346d;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #152550;
  /**
   * --reviews-brand-accent, the colour used by the native reviews
   * carousel's card accent stripe (left edge) and reviewer name.
   * Inherits from --color-primary so it automatically tracks the
   * site's primary brand colour on any Trade Grow client. When
   * migrating this carousel to a new site, this line is the ONLY
   * thing that needs to change if the client wants a different
   * accent from their --color-primary (e.g. a complementary colour).
   * See src/components/reviews/ReviewCard.astro for how it's applied.
   */
  --reviews-brand-accent: var(--color-primary);
  /* Hero accent (chevron color), pages can override */
  --hero-accent: #1f346d;
  /* Hero CTA Variables */
  --btn-hero-bg: var(--color-primary);
  --btn-hero-hover: #152550;
  --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: #e3edfa;
  --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: #4d91e1;
  --accent-red-600: #4d91e1;
  --accent-red-700: #2f6dbd;
  --blush-tint: #e3edfa;
  --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-spacing-unit: calc((100dvh - 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;
}

/* iOS Safari: when the address bar + bottom toolbar collapse on scroll,
   the viewport grows taller than the rendered document. The browser
   fills that extra strip with the html element's background. Without
   this rule it defaults to white, creating the "white bar at the
   bottom" the client's iPhone 14 reported. Setting html bg to the
   footer's dark base makes the strip invisible. (Note:
   var-driven so it follows the build palette, never a stale gray.) */
html {
  background-color: var(--color-dark-base, #19213d);
}

/* 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);
  /* max() floor: never smaller than the original tuned value, but ALWAYS
     at least real-header-height + a visible gap so the h1/subtitle can
     never slide under the fixed header at any breakpoint. Root fix for
     the recurring mobile header-overlaps-hero defect. */
  --hero-top-gap: max(clamp(80px, 10vh, 100px), calc(var(--header-height, 80px) + clamp(24px, 4vh, 40px)));
  --hero-bottom-gap: clamp(60px, 8vh, 100px);
  background: linear-gradient(rgba(13, 20, 26, 0.64), rgba(13, 20, 26, 0.64)), url('../pictures/service-1/service-1-01.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hero-top-gap) 50px 0;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.hero-service-link--aircon {
  background: linear-gradient(155deg, #1f346d 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, #1f346d 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-spacing-unit: calc((100dvh - 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: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
  color: var(--old-site-bg-dark);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(246, 179, 87, 0.1);
  flex-shrink: 0;
}

/* Styled SVG chevron (replaced the raw ▼ ▼ glyph that rendered as an
   unstyled oversized triangle). currentColor tracks the
   .faq-arrow color incl. the active state. */
.faq-arrow svg {
  width: 12px;
  height: 12px;
  display: block;
}

.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;
  border-radius: 10px;
}

.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; }
  .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 overrides section near end of file) */

.hero h1 {
  white-space: nowrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== UTILITY PAGES (NO HERO) =====
 *
 * BATCH 10 CLEANUP (2026-04-11): The `.utility-main` class originally
 * drove padding + gradient background for the 404 page's inner <main>.
 * The padding was `calc(var(--service-content-gap, 80px) + 120px)` which
 * at mobile was 96+80 = 176 px top, stacking with the BaseLayout outer
 * main's own padding and making the 404 page "way longer than it should
 * be". The class has been removed from src/pages/404.astro so 404 now
 * uses the same structure as sitemap/privacy/terms/thank-you:
 * inner <main> with gradient background, outer <main#main-content>
 * handling the responsive padT/padB via the BATCH 10 rule further down
 * in this file. The `.utility-main` base rule and its mobile override
 * (previously at @media max-width:767px) have been removed since no
 * other page references them. Other utility-* classes (`.utility-card`,
 * `.utility-content`, etc.) stay because they style the article card
 * and other reusable pieces. (Note: 404 no longer uses `.utility-card`
 * either, it inlines its own article styles like the other support
 * pages, but the classes are kept in case any other page references
 * them later.)
 */

.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) {
  /* BATCH 10 CLEANUP: `.utility-main` mobile padding override removed
     (class no longer used on 404, see note above). */

  .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, 7.2vw, 34px) !important;
    line-height: 1.15 !important;
    max-width: 15ch;
    margin-left: auto;
    margin-right: auto;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

body[data-service="home"] .home-hero-reference {
  min-height: 100vh;
  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: 160px;
  background: var(--color-light-base);
  border-radius: 16px;
  padding: 24px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .filter-bar {
    gap: 8px;
  }

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

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



/* ===== BLOG ARTICLE LAYOUT HOTFIX ===== */
body[data-service="blogs"] .article-layout#blog-main {
  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"] .article-layout#blog-main>* {
  min-width: 0;
}

body[data-service="blogs"] .article-content {
  /* This blog .article-content highest-specificity rule
     was max-width:100%, defeating the design's 720px measure (.article-content
     :5202/:12945) → ~110–120ch lines + dead whitespace at ≥1100px on every
     article. Restore the 72ch measure; keep overflow:visible (sticky-TOC
     anchors must not clip). Nothing later re-sets max-width (13778/13907/13934
     are padding-only), so 720px is now effective. */
  max-width: 720px;
  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"] .article-layout#blog-main {
    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; /* locks image track to prevent overflow */
  }
}

@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 (#1f346d) 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: #1f346d !important;
  border-color: rgba(72, 1, 143, 0.25) !important;
}

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

/* Hover, soft magenta-tinted highlight, text stays magenta */
.faq-filters .filter-btn:hover,
.faq-filters .filter-btn:focus-visible {
  background: rgba(72, 1, 143, 0.08) !important;
  color: #1f346d !important;
  border-color: #1f346d !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: #1f346d !important;
  color: #ffffff !important;
  border-color: #1f346d !important;
}

.faq-filters .filter-btn.active::before {
  background: #1f346d !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: #e3edfa;
  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: #e3edfa !important;
}
.footer a.footer-contact-item:focus-visible {
  outline-color: #e3edfa !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: #e3edfa !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232, 213, 245, 0.35);
}
.footer .footer-brand .social-link:hover svg {
  fill: #1f346d !important;
}
.footer .footer-brand .social-link:focus-visible {
  outline-color: #e3edfa !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: #e3edfa;
  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: #e3edfa !important;
}

/* Powered by, default must be legible; magenta was invisible */
.footer .powered-by a {
  color: #e3edfa !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: #e3edfa;
  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 #e3edfa;
  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'] .article-layout#blog-main {
  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 MUST fill its column ──
   The photo column and the text column are siblings in a grid whose height
   is driven by the (taller) text column. The image must stretch to that
   full height, full-bleed, never sit contained/top-aligned with a dark gap
   below it. The previous "constrain to natural proportions" rules
   (align-items:start, align-self:start, max-width:420px, object-fit:contain,
   max-height:480px) were exactly that bug and are deleted. NEVER reintroduce
   object-fit:contain or a max-height cap on this img. Fallback if a true
   fill is ever impossible: align-items:center (vertically centred, never
   top-aligned). Applies to home + services (same component, same defect). */
body:is([data-service="home"], [data-service="services"]) .why-choose-container {
  align-items: stretch !important;
}

body:is([data-service="home"], [data-service="services"]) .why-choose-image {
  align-self: stretch !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: unset !important;
  overflow: hidden;
}

body:is([data-service="home"], [data-service="services"]) .why-choose-image img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  max-height: none !important;
  border-radius: 12px;
}

/* CTA Banner: reduce text size on desktop */
.desktop-cta-banner h3,
.desktop-cta-banner .cta-banner-content h3 {
  font-size: 16px !important;
  white-space: nowrap;
}

/* CTA Banner: show on mobile with smaller text */
@media (max-width: 768px) {
  .desktop-cta-banner-container {
    display: block !important;
  }

  .desktop-cta-banner h3,
  .desktop-cta-banner .cta-banner-content h3 {
    font-size: 14px !important;
  }

  .cta-banner-btn {
    font-size: 13px !important;
    padding: 8px 16px !important;
  }
}

/* Fix: ensure inner CTA banner is also visible on mobile */
@media (max-width: 768px) {
  .desktop-cta-banner {
    display: flex !important;
  }
}

/* Why-choose image: no border */
body[data-service="home"] .why-choose-image img {
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Make header logo bigger */
.header .logo img {
  max-height: 80px !important;
  width: auto !important;
}

/* Force header logo bigger on desktop */
.header .logo,
.header .logo a {
  max-width: 220px !important;
  width: 220px !important;
  max-height: none !important;
}

.header .logo img {
  max-width: 220px !important;
  max-height: 120px !important;
  width: 220px !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Mobile fixes: reviews heading + spacing symmetry + CTA centering */
body[data-service='home'] .facebook-reviews-header {
  width: 100%;
  text-align: center;
  margin-bottom: 24px;
}

body[data-service='home'] .facebook-reviews-header .rating-summary h2 {
  margin: 0;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.2;
  color: var(--ink-dark);
}

@media (max-width: 767px) {
  body[data-service='home'] .services-section {
    padding-top: 24px !important;
    padding-bottom: 0 !important;
  }

  body[data-service='home'] .services-container {
    gap: 24px;
  }

  body[data-service='home'] .services-grid .service-card {
    padding-left: 12px;
    padding-right: 24px;
  }

  body[data-service='home'] .services-grid .service-content {
    padding: 24px 8px 0;
  }

  body[data-service='home'] .booking-section {
    margin-top: 24px !important;
    padding-top: var(--mobile-section-spacing) !important;
    padding-bottom: var(--mobile-section-spacing) !important;
  }

  body[data-service='home'] .mobile-fallback-btn {
    margin: var(--mobile-section-spacing) auto 0 !important;
  }

  body[data-service='home'] .desktop-cta-banner-container {
    padding-top: var(--mobile-section-spacing) !important;
  }

  body[data-service='home'] .why-choose {
    padding-top: var(--mobile-section-spacing) !important;
  }

  body[data-service='home'] .why-choose-container {
    padding-top: var(--mobile-section-spacing) !important;
    padding-bottom: var(--mobile-section-spacing) !important;
  }

  body[data-service='home'] .faq-section {
    padding-top: var(--mobile-section-spacing) !important;
    padding-bottom: var(--mobile-section-spacing) !important;
  }

  body[data-service='home'] .faq-container {
    gap: 32px;
  }

  body[data-service='home'] .desktop-cta-banner .cta-banner-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    width: 100%;
  }

  body[data-service='home'] .desktop-cta-banner h3,
  body[data-service='home'] .desktop-cta-banner .cta-banner-content h3 {
    text-align: center !important;
    width: 100%;
  }

  body[data-service='home'] .desktop-cta-banner .cta-banner-btn {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Header logo fit: use logo.jpg and keep left alignment stable */
.header .logo {
  left: 20px !important;
  right: auto !important;
  width: auto !important;
  max-width: none !important;
}

.header .logo a {
  display: flex !important;
  align-items: center;
  width: clamp(136px, 15vw, 220px) !important;
  max-width: 220px !important;
  height: auto !important;
}

.header .logo img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

@media (max-width: 1100px) {
  .header .logo {
    left: 16px !important;
  }

  .header .logo a {
    width: 132px !important;
    max-width: 132px !important;
  }

  .header .mobile-menu-toggle {
    left: auto !important;
    right: 16px !important;
  }
}

/* Final header/logo sizing pass (desktop + tablet) */
@media (min-width: 1200px) {
  .header .logo {
    left: 24px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .header .logo a {
    width: clamp(270px, 22vw, 360px) !important;
    max-width: 360px !important;
  }

  .header .logo img {
    width: 100% !important;
    height: auto !important;
  }

  .header.scrolled .logo {
    transform: translateY(-50%) !important;
  }

  .header.scrolled .logo a {
    width: clamp(230px, 19vw, 320px) !important;
    max-width: 320px !important;
  }
}

@media (max-width: 1199px) {
  .header .logo {
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .header .logo a {
    width: 160px !important;
    max-width: 160px !important;
  }

  .header .mobile-menu-toggle {
    right: 14px !important;
  }
}

@media (max-width: 767px) {
  .header .logo a {
    width: 150px !important;
    max-width: 150px !important;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .top-bar,
  .header,
  .mobile-menu,
  #main-content,
  .footer {
    max-width: 100vw !important;
  }
}

/* Logo size uplift: remove old 220px cap and enlarge */
@media (min-width: 1200px) {
  .header .logo a {
    width: clamp(320px, 25vw, 460px) !important;
    max-width: 460px !important;
  }

  .header.scrolled .logo a {
    width: clamp(280px, 22vw, 400px) !important;
    max-width: 400px !important;
  }

  .header .logo img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }
}

@media (max-width: 1199px) {
  .header .logo a {
    width: 170px !important;
    max-width: 170px !important;
  }
}

@media (max-width: 767px) {
  .header .logo a {
    width: min(240px, calc(100vw - 82px)) !important;
    max-width: calc(100vw - 82px) !important;
  }
}

/* Rounded header logo corners */
.header .logo img {
  border-radius: 10px !important;
}

/* Service pages: footer top gap restored */
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .footer {
  padding-top: var(--service-content-gap) !important;
}

/* Service pages: hero subtitle and card sizing alignment */
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .hero .hero-subtitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-width: min(760px, 84vw) !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
}

/* Keep boiler installations subtitle capped to 2 lines */
body[data-service='boiler-installations'] .hero .hero-subtitle {
  max-width: min(760px, 80vw) !important;
}

/* Service pages: tune about/spec text and headings */
body[data-service='boiler-installations'] .about-service-content {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

body[data-service='boiler-installations'] .about-specs-main-value {
  font-size: 18px !important;
}

body[data-service='boiler-installations'] .about-specs-secondary-value {
  font-size: 14px !important;
}

/* Service pages: prevent oversized single-image galleries */
body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .gallery-grid {
  justify-items: center;
}

body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .gallery-item {
  width: 100%;
  max-width: 320px;
}

@media (min-width: 1024px) {

  body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .about-service-description .section-title {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 18px;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(23px, 1.95vw, 30px) !important;
  }
}

@media (max-width: 767px) {
  body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .gallery-item {
    max-width: 100% !important;
  }
}

@media (max-width: 1023px) {
  body:is([data-service='boiler-installations'], [data-service='boiler-repairs'], [data-service='boiler-servicing'], [data-service='ashp-service-and-repair']) .about-service-description .section-title {
    white-space: normal;
    width: auto;
    max-width: 100%;
  }
}


/* Home reviews: Google wordmark under title */
body[data-service='home'] .facebook-reviews-header .rating-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

body[data-service='home'] .facebook-reviews-header .review-count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
}

body[data-service='home'] .facebook-reviews-header .google-logo {
  display: inline-flex;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(24px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

body[data-service='home'] .facebook-reviews-header .google-logo .g {
  color: #4285F4;
}

body[data-service='home'] .facebook-reviews-header .google-logo .o1 {
  color: #EA4335;
}

body[data-service='home'] .facebook-reviews-header .google-logo .o2 {
  color: #FBBC05;
}

body[data-service='home'] .facebook-reviews-header .google-logo .g2 {
  color: #4285F4;
}

body[data-service='home'] .facebook-reviews-header .google-logo .l {
  color: #34A853;
}

body[data-service='home'] .facebook-reviews-header .google-logo .e {
  color: #EA4335;
}

@media (max-width: 767px) {
  body[data-service='home'] .facebook-reviews-header .rating-summary {
    gap: 8px;
  }
}


/* Enforce title-to-google-logo spacing in reviews */
body[data-service='home'] .reviews-section .facebook-reviews-header .review-count {
  margin-top: 10px !important;
}

@media (max-width: 767px) {
  body[data-service='home'] .reviews-section .facebook-reviews-header .review-count {
    margin-top: 8px !important;
  }
}

/* Services page parity with standardized service-page hero layout */
body[data-service='services'] .hero .hero-subtitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-width: min(760px, 84vw) !important;
  font-size: clamp(14px, 1.1vw, 16px) !important;
}

body[data-service='services'] .services-section .section-title {
  width: 100% !important;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

@media (min-width: 1024px) {
  body[data-service='services'] .hero-service-links {
    width: 100% !important;
    max-width: min(1000px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }

  body[data-service='services'] .hero-service-link {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

@media (max-width: 1023px) {
  body[data-service='services'] .services-section .section-title {
    width: auto;
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  body[data-service='services'] .hero-service-links {
    width: min(100%, 335px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body[data-service='services'] .hero-service-link {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* ===== RECENT WORK PAGE ===== */
.recent-work-section {
  padding: 60px 20px 80px;
  background: #f5f5f5;
  min-height: 70vh;
}

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

.recent-work-title {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 12px;
}

.recent-work-subtitle {
  text-align: center;
  color: #555;
  font-size: 1.05rem;
  margin-bottom: 36px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Filter tabs */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.filter-tab {
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 30px;
  padding: 8px 22px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #444;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: '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: #1f346d !important;
  border-color: #1f346d !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(31, 52, 109, 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: #152550 !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: #152550 !important;
  border-color: #152550 !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;
}

/* Nav band spans the whole stage. The prev/next buttons are anchored
   INDEPENDENTLY (absolute left / absolute right) below, NOT via
   flex+space-between. Reason:
   space-between positionally couples prev↔next, so on the FIRST image
   (prev hidden) or LAST image (next hidden) the lone remaining button
   collapses to the wrong side, the "first image's Next arrow on the
   LEFT" bug. Independent anchoring makes prev ALWAYS left and next
   ALWAYS right regardless of how the other is hidden (visibility,
   display:none, removed, or a duplicate controller). */
.lightbox .lightbox-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transform: none;
  display: block;
  pointer-events: none;
  padding: 0;
  background: transparent;
  border: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.lightbox .lightbox-prev,
.lightbox .lightbox-next {
  pointer-events: auto;
  position: absolute !important;
  top: 50% !important;
  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;
}
/* Independent anchors: prev ALWAYS left edge, next ALWAYS right edge.
   Neither's position depends on the other being present, so hiding one
   (first/last image) can never move the other. */
.lightbox .lightbox-prev {
  left: 10px !important;
  right: auto !important;
  transform: translateY(-50%) !important;
}
.lightbox .lightbox-next {
  right: 10px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
}

.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: #2f6dbd;
}

/* 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: #2f6dbd !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: #2f6dbd !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 #4d91e1 !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: #4d91e1 !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: #1f346d !important;
    border-color: #1f346d !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;
  }
}

/* (Earlier overrides removed, palette below) */

/* Final palette overrides */
:root {
  --color-primary: #1f346d;
  --color-secondary: #212121;
  --color-accent: #4d91e1;
  --color-dark-base: #19213d;
  --color-light-base: #f5f8fd;
  --color-highlight: #e3edfa;
  --text-on-light: #19213d;
  --text-on-dark: #FFFFFF;
  --btn-primary-bg: #1f346d;
  --btn-primary-hover: #152550;
  --btn-hero-bg: #1f346d;
  --btn-hero-hover: #152550;
  --btn-hero-text: #FFFFFF;
  --accent-red-500: #1f346d;
  --accent-red-600: #152550;
  --accent-red-700: #7A1111;
  --mist: #F3F3F5;
}

body[data-service] .top-bar,
body[data-service] .footer,
body[data-service] .footer .footer-bottom {
  background: var(--color-dark-base, #19213d) !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: #1f346d !important;
  border-left-color: #e3edfa !important;
  color: #FFFFFF !important;
}

body[data-service] .btn.btn-primary,
body[data-service] .btn.btn-service,
body[data-service] .cta-banner-btn {
  background: #1f346d !important;
  border-color: #1f346d !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: #152550 !important;
  border-color: #152550 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  filter: none !important;
}

/* --- Kill template ::before pseudo-element orange overlay on buttons --- */
body[data-service] .btn.btn-primary::before,
body[data-service] .btn.btn-service::before,
body[data-service] .cta-banner-btn::before {
  background: transparent !important;
  opacity: 0 !important;
}

/* --- Header overflow fix (needed for logo sizing) --- */
body[data-service] .header {
  overflow: visible !important;
}

/* --- Logo sizing, desktop (≥1101px) --- */
@media (min-width: 1101px) {
  body[data-service] .header .logo a {
    height: 88px !important;
    max-height: 88px !important;
    width: auto !important;
    max-width: none !important;
  }

  body[data-service] .header.scrolled .logo a {
    height: 54px !important;
    max-height: 54px !important;
    width: auto !important;
    max-width: none !important;
  }

  body[data-service] .header .logo img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* --- Logo sizing, mobile (≤1100px) --- */
@media (max-width: 1100px) {
  body[data-service] .header .logo a {
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
    max-width: none !important;
  }

  body[data-service] .header .logo img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* --- Header CTA button red --- */
body[data-service] .header .header-cta-group .btn.btn-primary {
  background: #1f346d !important;
  border-color: #1f346d !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: #152550 !important;
  border-color: #152550 !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: #1f346d !important;
    color: #FFFFFF !important;
  }

  body[data-service] .services-submenu a:hover,
  body[data-service] .services-submenu a:focus-visible {
    background: rgba(31, 52, 109, 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 */
body[data-service] .hero .hero-service-link {
  border-color: rgba(31, 52, 109, 0.35) !important;
}

body[data-service] .hero .hero-service-link:hover,
body[data-service] .hero .hero-service-link:focus-visible {
  background: linear-gradient(155deg, #1f346d 0%, #152550 100%) !important;
  border-color: #e3edfa !important;
  box-shadow: 0 10px 24px rgba(140, 10, 10, 0.4) !important;
}

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

body[data-service] .hero .hero-service-link .hero-service-text,
body[data-service] .hero .hero-service-link .hero-service-text span {
  color: #1f346d !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: #1f346d !important;
  border-color: #1f346d !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: #152550 !important;
  border-color: #152550 !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%, #19213d 100%) !important;
  border: 1px solid rgba(31, 52, 109, 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: #e3edfa !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: #19213d !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: #1f346d !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: #19213d !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: #f5f8fd;
  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: #1f346d !important;
    border-color: #1f346d !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: #1f346d !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: #1f346d;
}

.footer-follow .social-link svg {
  width: 24px;
  height: 24px;
  fill: #1f346d;
  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: #e3edfa !important;
    color: #e3edfa !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 #e3edfa !important;
  border-bottom: 2px solid #e3edfa !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: #1f346d !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;
}

/* 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']) .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;
  }
}

/* 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, original rule
   removed (padding-bottom: calc(30px + env(safe-area-inset-bottom))
   was overridden by the !important shorthand at line ~11850:
   padding: var(--inter-section-gap) 0 env(safe-area-inset-bottom, 0px) !important
   Keeping comment for traceability. */

/* 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']) .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']) .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']) .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']) .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']) .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']) .hero .hero-service-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    flex: 0 0 54px !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(31, 52, 109, 0.5));
  }

  50% {
    box-shadow: 0 0 22px 4px var(--hero-glow, rgba(31, 52, 109, 0.35));
  }

  100% {
    box-shadow: 0 0 0 0 var(--hero-glow, rgba(31, 52, 109, 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 (Hollis) ── */
body[data-service="home"] {
  --hero-accent: #EFBC46;
  --hero-accent-rgb: 239, 188, 70;
}

body[data-service="services"] {
  --hero-accent: #0EA5E9;
  --hero-accent-rgb: 14, 165, 233;
}

body[data-service="about"] {
  --hero-accent: #06B6D4;
  --hero-accent-rgb: 6, 182, 212;
}

body[data-service="contact"] {
  --hero-accent: #14B8A6;
  --hero-accent-rgb: 20, 184, 166;
}

body[data-service="faq"] {
  --hero-accent: #84CC16;
  --hero-accent-rgb: 132, 204, 22;
}

body[data-service="blogs"] {
  --hero-accent: #A855F7;
  --hero-accent-rgb: 168, 85, 247;
}

body[data-service="projects"] {
  --hero-accent: #F97316;
  --hero-accent-rgb: 249, 115, 22;
}

body[data-service="boiler-service"] {
  --hero-accent: #0BBA60;
  --hero-accent-rgb: 11, 186, 96;
}

body[data-service="landlord-gas-safety-check"] {
  --hero-accent: #EF4444;
  --hero-accent-rgb: 239, 68, 68;
}

body[data-service="boiler-installation"] {
  --hero-accent: #3B82F6;
  --hero-accent-rgb: 29, 78, 216;
}

body[data-service="air-source-heat-pumps"] {
  --hero-accent: #6366F1;
  --hero-accent-rgb: 99, 102, 241;
}

body[data-service="underfloor-heating"] {
  --hero-accent: #FBBF24;
  --hero-accent-rgb: 251, 191, 36;
}

body[data-service="bathroom-installation"] {
  --hero-accent: #10B981;
  --hero-accent-rgb: 16, 185, 129;
}

body[data-service="privacy"],
body[data-service="terms"],
body[data-service="sitemap"],
body[data-service="form"],
body[data-service="thank-you"],
body[data-service="404"] {
  --hero-accent: #64748B;
  --hero-accent-rgb: 100, 116, 139;
}


/* ── 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(239, 188, 70, 0.45);
  border-left: 3px solid #EFBC46;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

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

/* ── CONTACT: slide from LEFT ── */
body[data-service="contact"] .hero.hero--left .fade-in {
  animation-name: heroSlideFromLeft;
}

body[data-service="contact"] .hero.hero--left .hero-feature-grid.fade-in {
  animation-name: heroSlideFromRight;
  animation-delay: 0.46s;
}

body[data-service="contact"] .hero.hero--left .hero-feature-card {
  --hero-glow: rgba(106, 27, 154, 0.45);
  border-left: 3px solid #6A1B9A;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

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

/* ── FAQ: slide from RIGHT ── */
body[data-service="faq"] .hero.hero--left .fade-in {
  animation-name: heroSlideFromRight;
}

body[data-service="faq"] .hero.hero--left .hero-feature-grid.fade-in {
  animation-name: heroSlideFromLeft;
  animation-delay: 0.46s;
}

body[data-service="faq"] .hero.hero--left .hero-feature-card {
  --hero-glow: rgba(245, 127, 23, 0.45);
  border-left: 3px solid #F57F17;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

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

/* ── ABOUT: slide from TOP ── */
body[data-service="about"] .hero.hero--left .fade-in {
  animation-name: heroSlideFromTop;
}

body[data-service="about"] .hero.hero--left .hero-feature-grid.fade-in {
  animation-name: heroSlideFromBottom;
  animation-delay: 0.46s;
}

body[data-service="about"] .hero.hero--left .hero-feature-card {
  --hero-glow: rgba(0, 131, 143, 0.45);
  border-left: 3px solid #00838F;
  animation: heroGlowPulse 1.8s ease-out 0.9s 1 forwards;
}

body[data-service="about"] .hero.hero--left .hero-feature-card .hero-feature-divider {
  background: #00838F;
}

/* ── SVG Underline Draw Animation ── */
@keyframes heroUnderlineDraw {
  0% {
    stroke-dashoffset: 320;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Hero underline: 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, #1f346d);
  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, 31, 52, 109), 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, #1f346d);
}

.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, 31, 52, 109), 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, #1f346d);
}

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

/* ============================================================
   GLOBAL OVERRIDES, Header, Spacing, Page Layouts
   ============================================================ */

/* ── Real --header-height token ──
   Previously --header-height was only ever a fallback (every usage was
   `var(--header-height, 80px)`), so about/contact/faq/support content
   offsets silently assumed 80px regardless of the real header. Define it
   for real, matching the header below: 90px desktop, ~76px ≤1199px
   (min-height:64px + 48px logo + breathing). The hero clearance + the
   existing support-page offsets now track the ACTUAL header height, which
   is the root fix for the recurring mobile header-overlaps-hero defect. */
:root {
  --header-height: 90px;
}
@media (max-width: 1199px) {
  :root {
    --header-height: 76px;
  }
}

/* ── 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) ──
 *
 * BATCH 10 FIX (2026-04-11): the client requested that support pages have "one gap
 * from where the header ends" and "one gap at the bottom". The previous rule
 * used `calc(var(--header-height, 80px) + 60px)` → 140 px, and each support
 * page's inline-styled inner <main> ALSO set `padding-top:140px`, producing
 * a 280 px stacked pad above the article and a visible 206 px gap below the
 * fixed header.
 *
 * Fix is in several parts:
 *   1. The inline `padding-top:140px;padding-bottom:80px;min-height:100vh;`
 *      was removed from the inner <main> in each support .astro file
 *      (sitemap/privacy/terms/thank-you) so only the BaseLayout outer
 *      <main#main-content> drives the top/bottom spacing, and the min-
 *      height:100vh stretch that was creating a 350 px empty-gradient band
 *      below short pages like /thank-you is gone.
 *   2. This rule targets the outer main via `main#main-content` explicitly
 *      (specificity 0,1,1,2, beats the default `#main-content {padding-
 *      bottom:0}` at (0,1,0,0)) and the attribute selector disambiguates
 *      across support pages. This ensures the rule never bleeds into the
 *      inner nested <main>. Padding-top is responsive to match the actual
 *      rendered header height (68 / 80 / 122 px across breakpoints) + a
 *      40 px gap below the header; padding-bottom is set to 40 px.
 *   3. To replace the removed `min-height:100vh` (which was preventing the
 *      footer from floating mid-page when content is short), the body on
 *      these pages becomes a flex column with `min-height:100vh` and the
 *      outer main gets `flex:1 0 auto`. This pushes the footer to the
 *      viewport bottom and expands the main to fill available space,
 *      content stays where it was relative to the header, but the "fake
 *      gradient filler" below short content is gone.
 *
 * Header heights measured on 2026-04-11 at 390/768/1050/1100/1200/1280 →
 * 68 / 68 / 68 / 80 / 122 / 122 px. Breakpoints chosen accordingly.
 */
body[data-service="privacy"],
body[data-service="terms"],
body[data-service="thank-you"],
body[data-service="sitemap"],
body[data-service="404"],
body[data-service="form"] {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body[data-service="privacy"] > main#main-content,
body[data-service="terms"] > main#main-content,
body[data-service="thank-you"] > main#main-content,
body[data-service="sitemap"] > main#main-content,
body[data-service="404"] > main#main-content,
body[data-service="form"] > main#main-content {
  flex: 1 0 auto;
  /* BATCH 10 EXTENSION (2026-04-11):
   *
   * Gradient background moved HERE from the inner <main>s so the
   * padT/padB area of the outer main, which extends above and below
   * the inner main's content, shows the gradient instead of the body
   * dark bg (`#0a0a0f`). This fixes the "black bar" the client saw at the
   * bottom of /sitemap between the content and the footer: previously
   * the inner main's gradient ended at its own bottom edge and the
   * outer main's 40 px padB revealed the body background.
   *
   * Horizontal padding 5 px so the article card has a ~5 px gap from
   * the viewport edges on mobile (the client asked for "5 pixel on each side
   * on mobile"). At larger widths the article's own max-width (600-
   * 800 px) keeps it centered with more breathing room so the 5 px
   * here is invisible, but leaving it across all widths is harmless
   * and keeps the rule simple.
   */
  background: linear-gradient(180deg, rgba(10, 10, 15, 0.9) 0%, #EEEEEE 100%);
  padding-left: 5px;
  padding-right: 5px;
}
body[data-service="404"] main#main-content,
body[data-service="privacy"] main#main-content,
body[data-service="terms"] main#main-content,
body[data-service="thank-you"] main#main-content,
body[data-service="sitemap"] main#main-content,
body[data-service="form"] main#main-content {
  padding-top: 108px;      /* 68 header + 40 gap */
  padding-bottom: 40px;
}
@media (min-width: 1100px) {
  body[data-service="404"] main#main-content,
  body[data-service="privacy"] main#main-content,
  body[data-service="terms"] main#main-content,
  body[data-service="thank-you"] main#main-content,
  body[data-service="sitemap"] main#main-content,
  body[data-service="form"] main#main-content {
    padding-top: 120px;    /* 80 header + 40 gap */
  }
}
@media (min-width: 1200px) {
  body[data-service="404"] main#main-content,
  body[data-service="privacy"] main#main-content,
  body[data-service="terms"] main#main-content,
  body[data-service="thank-you"] main#main-content,
  body[data-service="sitemap"] main#main-content,
  body[data-service="form"] main#main-content {
    padding-top: 162px;    /* 122 header + 40 gap */
  }
}

/* ── Active hero feature card ── */
.hero-feature-card.active {
  box-shadow: 0 0 0 3px var(--hero-accent, #1f346d),
              0 0 20px rgba(var(--hero-accent-rgb, 31, 52, 109), 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, #1f346d);
  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: #4d91e1;
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 30px;
  white-space: nowrap;
  transition: background 0.3s ease;
}
.cta-pill.call:hover { background: #1f346d; }
.call-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  flex-shrink: 0;
}
.call-pill-icon svg { width: 14px; height: 14px; fill: #FFFFFF !important; }
.call-pill-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.call-pill-label {
  font-size: 10px;
  opacity: 0.95;
  letter-spacing: 0.3px;
  color: #FFFFFF;
}
.call-pill-number {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #FFFFFF;
}

/* ── WhatsApp Pill (HTML/SVG) ── */
.cta-pill.whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #25D366;
  color: #FFFFFF;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 30px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.3s ease;
}
.cta-pill.whatsapp:hover { background: #1da851; }
.whatsapp-pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.whatsapp-pill-icon svg { width: 18px; height: 18px; }
.whatsapp-pill-text { font-size: 14px; font-weight: 600; }

@media (max-width: 1100px) {
  .call-pill-text { display: none; }
  .cta-pill.call { padding: 8px; border-radius: 50%; }
  .whatsapp-pill-text { display: none; }
  .cta-pill.whatsapp { padding: 8px; border-radius: 50%; }
}

/* ── Blog/Project card hover ── */
.blog-card,
.project-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover,
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* ── FINAL: Hero gap fixes (must be last to win specificity) ── */
.hero,
.hero.hero--left,
section.hero,
section.hero.hero--left {
  padding-top: clamp(150px, 18vw, 200px) !important;
  padding-bottom: 0 !important;
}
.hero.hero--left .hero-content {
  padding-top: 10px !important;
  padding-bottom: 0 !important;
}

/* ── (logo positioning moved to UX POLISH block below) ── */

/* ── FIX: Left-align hero content to logo x-position (30px from left) ── */
.hero.hero--left {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body[data-service] .hero.hero--left .hero-content {
  align-items: flex-start !important;
  text-align: left !important;
  max-width: 100% !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body[data-service] .hero .hero-intro {
  align-items: flex-start !important;
  text-align: left !important;
}
body[data-service] .hero .hero-cta-row {
  justify-content: flex-start !important;
}

/* ── FIX: Call button same size as Get Free Quote button ── */
.hero-cta-row .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: auto !important;
  margin-bottom: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  height: auto !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-outline-light,
body[data-service] .hero .hero-cta-row .btn.btn-primary {
  padding: 16px 40px !important;
  font-size: 17px !important;
  height: 53px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.hero-cta-row .btn-outline-light svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: 0;
}

/* ── (moved to UX POLISH block below) ── */

/* ── FIX: Align feature card grid to the right ── */
body[data-service] .hero .hero-feature-grid {
  width: auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* ── FIX: Reduce gap above "Our Services" title ── */
.services-section .section-title,
.services-section .services-title,
.services-section h2:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════
   REDESIGN: Cleaner hero (no feature cards) + compact services
   ══════════════════════════════════════════════════════════════ */

/* ── Hero: content sits at bottom, no forced min-height ── */
body[data-service="home"] .hero.hero--left .hero-content {
  gap: clamp(16px, 2.5vw, 28px) !important;
  min-height: auto !important;
  justify-content: flex-end !important;
}
body[data-service="home"] .hero .hero-intro {
  max-width: 680px !important;
}
body[data-service="home"] .hero .hero-subtitle {
  font-size: clamp(15px, 1.6vw, 20px) !important;
  line-height: 1.5 !important;
  max-width: 560px !important;
  opacity: 0.9;
}

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

/* ── Compact Service Cards: data-driven row arrangement.
   MAX 4 per row. ALL cards EQUAL width. Every row
   centered, including the final partial row, which is CENTERED, NOT
   stretched to fill (its cards keep the same width as the rows above).

   `ServicesGrid.astro` computes `cols` per the exact user table and
   emits `services-grid--cols-{1..4}`:
     1→[1] one larger centred card   2→[2] two larger, fill the row
     3→[3]  4→[2,2]  5→[3,2]  6→[3,3]  7→[4,3]  8→[4,4]
     9→[3,3,3]  10→[4,4,2]  >10→4-up balanced
   Each card's width is FIXED to (100% - (cols-1)*gap)/cols, so the
   bottom row's cards are identical width to the rows above and merely
   centred by the container's justify-content:center. Never 5+/row;
   never a stretched/left-aligned orphan row; never unequal widths.
   (Supersedes the old 5-card-hardcoded grid AND the single-clamp flex
   that could yield 5/row at some widths. The later @media
   grid-template-columns rules for this selector remain INERT no-ops
   under flex, left in place, verifiably harmless.) Tablet ≤900px
   collapses to 2-up, mobile ≤560px to 1-up, regardless of cols. ── */
body[data-service] .services-section .services-grid.services-grid--compact {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: clamp(16px, 2vw, 24px) !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact {
  /* no-shrink/no-grow → exact equal widths; last row centred by parent */
  flex: 0 0 auto !important;
  max-width: none !important;
}
/* cols-1: a single, slightly-larger card, centred (can't fill a row) */
body[data-service] .services-section .services-grid--cols-1 .service-card-compact {
  width: min(440px, 100%) !important;
}
/* cols-2: two larger cards that fill the row (also n=4 → 2+2) */
body[data-service] .services-section .services-grid--cols-2 .service-card-compact {
  width: calc((100% - clamp(16px, 2vw, 24px)) / 2) !important;
}
/* cols-3: 3 per row (5→3+2, 6→3+3, 9→3+3+3) */
body[data-service] .services-section .services-grid--cols-3 .service-card-compact {
  width: calc((100% - 2 * clamp(16px, 2vw, 24px)) / 3) !important;
}
/* cols-4: 4 per row (7→4+3, 8→4+4, 10→4+4+2, >10 balanced) */
body[data-service] .services-section .services-grid--cols-4 .service-card-compact {
  width: calc((100% - 3 * clamp(16px, 2vw, 24px)) / 4) !important;
}
/* Tablet: at most 2 per row regardless of desktop cols (cols-1 stays a
   single centred card via min() above). Mobile: 1 per row. */
@media (max-width: 900px) {
  body[data-service] .services-section .services-grid--cols-2 .service-card-compact,
  body[data-service] .services-section .services-grid--cols-3 .service-card-compact,
  body[data-service] .services-section .services-grid--cols-4 .service-card-compact {
    width: calc((100% - clamp(16px, 2vw, 24px)) / 2) !important;
  }
}
@media (max-width: 560px) {
  body[data-service] .services-section .services-grid.services-grid--compact .service-card-compact {
    width: 100% !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, #19213d);
  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, #1f346d);
  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;
}

/* Per-service card accent — DATA-DRIVEN from each card's inline `--card-accent`
   (set in ServicesGrid.astro from site.json services[].accent, with a rotating
   palette fallback so every card is coloured even if accents aren't set).
   Add/rename services freely; no per-slug CSS to maintain. color-mix darkens
   the accent for readable title/link text on white. */
.service-card-compact {
  border-top: 4px solid var(--card-accent, #1A56B0) !important;
}
.service-card-compact .service-card-compact__link {
  color: color-mix(in srgb, var(--card-accent, #1A56B0) 80%, #000);
}
.service-card-compact .service-card-compact__body h3 {
  color: color-mix(in srgb, var(--card-accent, #1A56B0) 78%, #000) !important;
}
.service-card-compact:hover {
  box-shadow: 0 12px 32px color-mix(in srgb, var(--card-accent, #1A56B0) 20%, transparent) !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="home"] .hero .hero-subtitle {
  margin-top: 0 !important;
  letter-spacing: 0.01em !important;
}
body[data-service="home"] .hero .hero-cta-row {
  margin-top: clamp(16px, 2.5vw, 28px) !important;
  gap: 14px !important;
}
body[data-service] .hero .hero-cta-row .btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.25s ease !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-primary {
  box-shadow: 0 4px 14px rgba(var(--hero-accent-rgb, 31, 52, 109), 0.35) !important;
}
body[data-service] .hero .hero-cta-row .btn.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(var(--hero-accent-rgb, 31, 52, 109), 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, 31, 52, 109), 0.15) !important;
  border-color: var(--hero-accent, rgba(255,255,255,0.8)) !important;
  transform: translateY(-1px) !important;
}

/* ── Hero: reduce bottom gap (was 107px, now ~40px) ── */
body[data-service="home"] .hero.hero--left .hero-content {
  min-height: auto !important;
  justify-content: flex-end !important;
}
.hero,
.hero.hero--left,
section.hero,
section.hero.hero--left {
  padding-bottom: var(--inter-section-gap) !important;
}

/* ── Scroll indicator: two chevrons in the hero bottom area ── */
.hero-scroll-indicator {
  bottom: 12px !important;
  top: auto !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: -4px !important;
  opacity: 0.9 !important;
  animation: none !important;
  z-index: 10 !important;
}
.hero-scroll-indicator .scroll-chevrons:last-child {
  margin-top: -10px;
}
/* Old mouse/arrow hidden, replaced by chevrons */
.hero-scroll-mouse,
.hero-scroll-arrow {
  display: none !important;
}

/* ── Animated double-chevron scroll indicator (uses page accent) ── */
.scroll-chevrons {
  display: block;
}
/* White glow backing chevrons, behind the colored ones */
.scroll-chevron-glow {
  stroke: #ffffff !important;
  opacity: 0.7;
  filter: none !important;
}
.scroll-chevron {
  stroke: var(--hero-accent, white) !important;
  filter: none !important;
}
.scroll-chevron--1 {
  animation: chevronBounce 1.8s ease-in-out infinite;
}
.scroll-chevron--2 {
  animation: chevronBounce 1.8s ease-in-out 0.3s infinite;
}
@keyframes chevronBounce {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* ── Section titles: clean modern styling, NO underline decoration ── */
body[data-service="home"] .section-title,
body[data-service="home"] .services-section h2,
body[data-service="home"] .reviews-section h2 {
  font-size: clamp(26px, 3vw, 40px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-on-light, #19213d) !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;
}
/* DATA-DRIVEN per-service accent stripe. ServicesGrid.astro sets an inline
   --card-accent on EVERY card (from services[].accent, else a rotating palette
   fallback), and this generic rule paints the 4px coloured top bar + the
   "Learn more" link from it. No per-slug CSS to maintain: add, remove or rename
   services freely and they auto-colour, and it auto-matches each client's palette.
   Falls back to the brand primary if --card-accent is somehow unset.
   NOTE: this consumer rule was described in 02-build-pipeline.md but had never
   actually been added to the template, so builds set --card-accent and nothing
   painted it — cards shipped with a flat grey top border (the recurring "service
   card colours" bug). Added 2026-06-25. Heading text intentionally stays the
   default dark for guaranteed WCAG contrast against any palette colour. */
.services-grid .service-card-compact {
  border-top: 4px solid var(--card-accent, var(--color-primary, #0E7C7B)) !important;
}
.services-grid .service-card-compact .service-card-compact__link {
  color: var(--card-accent, var(--color-primary, #0E7C7B)) !important;
}
.services-grid .service-card-compact:hover {
  box-shadow: 0 12px 32px color-mix(in srgb, var(--card-accent, var(--color-primary, #0E7C7B)) 22%, transparent) !important;
}
/* Safety fallback: a card with no modifier class still gets the accent bar. */
.service-card-compact:not([class*="--"]) {
  border-top: 4px solid var(--card-accent, var(--color-primary, #0E7C7B)) !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(31, 52, 109, 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;
}
@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, #1f346d) !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: #1f346d;
  --color-secondary: #212121;
  --color-accent: #4d91e1;
  --color-dark-base: #19213d;
  --color-light-base: #f5f8fd;
  --color-highlight: #e3edfa;
  --text-on-light: #19213d;
  --text-on-dark: #FFFFFF;
  --muted-on-dark: rgba(255, 255, 255, 0.75);
  --btn-primary-bg: #1f346d;
  --btn-primary-hover: #152550;
  --btn-hero-bg: #1f346d;
  --btn-hero-hover: #152550;
  --btn-hero-text: #FFFFFF;
  --accent-red-500: #1f346d;
  --accent-red-600: #152550;
  --accent-red-700: #6D1010;
}

/* ── Footer + Booking + Why-Choose: ONE dark surface on all pages.
   All dark-surface sections resolve to var(--color-dark-base) so a
   palette swap recolors every one of them together (D.2 dark-surface
   unification; the old hardcoded #2B2B2E gray left
   booking/why-choose stuck off-brand on every non-gray build). ── */
body[data-service] .footer,
body[data-service] .footer .footer-bottom,
body[data-service] .booking-section,
body[data-service] .why-choose-container {
  background: var(--color-dark-base, #19213d) !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: 88px !important;
    max-height: 88px !important;
    width: auto !important;
    max-width: none !important;
  }
  body[data-service] .header.scrolled .logo a {
    height: 54px !important;
    max-height: 54px !important;
    width: auto !important;
    max-width: none !important;
  }
  body[data-service] .header .logo img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    display: block !important;
  }
}
@media (max-width: 1199px) {
  body[data-service] .header .logo a {
    height: 56px !important;
    max-height: 56px !important;
    width: auto !important;
    max-width: none !important;
  }
  body[data-service] .header .logo img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    border-radius: 12px !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   HERO ANIMATIONS & PER-PAGE ACCENT HIGHLIGHTS
   ══════════════════════════════════════════════════════════════ */

/* ── Animation Keyframes ── */
@keyframes heroSlideFromLeft {
  0%   { opacity: 0; transform: translateX(-70px) scale(0.97); }
  60%  { opacity: 1; transform: translateX(6px) scale(1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes heroSlideFromRight {
  0%   { opacity: 0; transform: translateX(70px) scale(0.97); }
  60%  { opacity: 1; transform: translateX(-6px) scale(1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes heroSlideFromTop {
  0%   { opacity: 0; transform: translateY(-65px) scale(0.97); }
  60%  { opacity: 1; transform: translateY(5px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroSlideFromBottom {
  0%   { opacity: 0; transform: translateY(65px) scale(0.97); }
  60%  { opacity: 1; transform: translateY(-5px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroFloatIn {
  0%   { opacity: 0; transform: translateY(22px) scale(0.985); }
  55%  { opacity: 1; transform: translateY(-4px) scale(1); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes heroUnderlineDraw {
  0%   { stroke-dashoffset: 320; opacity: 0; }
  15%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes heroOrbBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.18; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 0.28; }
}

/* ── Base hero animation: staggered float-in ── */
.hero .fade-in {
  opacity: 0;
  animation: heroFloatIn 1.2s cubic-bezier(0.16, 0.7, 0.3, 1) forwards;
  will-change: transform, opacity;
}
.hero .hero-subtitle.fade-in { animation-delay: 0.15s; }
.hero .hero-cta-row.fade-in  { animation-delay: 0.30s; }

/* ── SVG underline draw animation ── */
.hero-underline-svg {
  display: block;
  overflow: visible;
}
.hero-underline-svg line {
  stroke: var(--hero-accent, #1f346d);
  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, 31, 52, 109), 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, 31, 52, 109), 0.15) !important;
}

/* ══════════════════════════════════════════════════════════════
   PER-PAGE ACCENT COLORS & ANIMATION DIRECTIONS (Hollis)
   Each public route gets its own hero accent with matching
   RGB companion. Update this block AND the :root-level block
   above in lockstep.
   ══════════════════════════════════════════════════════════════ */

/* ── Home ── */
body[data-service="home"] {
  --hero-accent: #EFBC46 !important;
  --hero-accent-rgb: 239, 188, 70 !important;
}
body[data-service="home"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── Services ── */
body[data-service="services"] {
  --hero-accent: #0EA5E9 !important;
  --hero-accent-rgb: 14, 165, 233 !important;
}
body[data-service="services"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── About ── */
body[data-service="about"] {
  --hero-accent: #06B6D4 !important;
  --hero-accent-rgb: 6, 182, 212 !important;
}
body[data-service="about"] .hero .fade-in {
  animation-name: heroSlideFromTop;
  animation-duration: 1.2s;
}

/* ── Contact ── */
body[data-service="contact"] {
  --hero-accent: #14B8A6 !important;
  --hero-accent-rgb: 20, 184, 166 !important;
}
body[data-service="contact"] .hero .fade-in {
  animation-name: heroSlideFromRight;
  animation-duration: 1.2s;
}

/* ── Faq ── */
body[data-service="faq"] {
  --hero-accent: #84CC16 !important;
  --hero-accent-rgb: 132, 204, 22 !important;
}
body[data-service="faq"] .hero .fade-in {
  animation-name: heroSlideFromBottom;
  animation-duration: 1.2s;
}

/* ── Blogs ── */
body[data-service="blogs"] {
  --hero-accent: #A855F7 !important;
  --hero-accent-rgb: 168, 85, 247 !important;
}
body[data-service="blogs"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── Projects ── */
body[data-service="projects"] {
  --hero-accent: #F97316 !important;
  --hero-accent-rgb: 249, 115, 22 !important;
}
body[data-service="projects"] .hero .fade-in {
  animation-name: heroSlideFromRight;
  animation-duration: 1.2s;
}

/* ── Boiler Service ── */
body[data-service="boiler-service"] {
  --hero-accent: #0BBA60 !important;
  --hero-accent-rgb: 11, 186, 96 !important;
}
body[data-service="boiler-service"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── Landlord Gas Safety Check ── */
body[data-service="landlord-gas-safety-check"] {
  --hero-accent: #EF4444 !important;
  --hero-accent-rgb: 239, 68, 68 !important;
}
body[data-service="landlord-gas-safety-check"] .hero .fade-in {
  animation-name: heroSlideFromRight;
  animation-duration: 1.2s;
}

/* ── Boiler Installation ── */
body[data-service="boiler-installation"] {
  --hero-accent: #3B82F6 !important;
  --hero-accent-rgb: 29, 78, 216 !important;
}
body[data-service="boiler-installation"] .hero .fade-in {
  animation-name: heroSlideFromRight;
  animation-duration: 1.2s;
}

/* ── Air Source Heat Pumps ── */
body[data-service="air-source-heat-pumps"] {
  --hero-accent: #6366F1 !important;
  --hero-accent-rgb: 99, 102, 241 !important;
}
body[data-service="air-source-heat-pumps"] .hero .fade-in {
  animation-name: heroSlideFromLeft;
  animation-duration: 1.2s;
}

/* ── Underfloor Heating ── */
body[data-service="underfloor-heating"] {
  --hero-accent: #FBBF24 !important;
  --hero-accent-rgb: 251, 191, 36 !important;
}
body[data-service="underfloor-heating"] .hero .fade-in {
  animation-name: heroSlideFromTop;
  animation-duration: 1.2s;
}

/* ── Bathroom Installation ── */
body[data-service="bathroom-installation"] {
  --hero-accent: #10B981 !important;
  --hero-accent-rgb: 16, 185, 129 !important;
}
body[data-service="bathroom-installation"] .hero .fade-in {
  animation-name: heroSlideFromBottom;
  animation-duration: 1.2s;
}

/* ── Support pages (privacy, terms, sitemap, form, thank-you, 404) ── */
body[data-service="privacy"],
body[data-service="terms"],
body[data-service="sitemap"],
body[data-service="form"],
body[data-service="thank-you"],
body[data-service="404"] {
  --hero-accent: #64748B !important;
  --hero-accent-rgb: 100, 116, 139 !important;
}
body[data-service="privacy"] .hero .fade-in,
body[data-service="terms"] .hero .fade-in,
body[data-service="sitemap"] .hero .fade-in,
body[data-service="form"] .hero .fade-in,
body[data-service="thank-you"] .hero .fade-in,
body[data-service="404"] .hero .fade-in {
  animation-name: heroSlideFromTop;
  animation-duration: 1.2s;
}

/* ══════════════════════════════════════════════════════════════════════
   BATCH (2026-07-03) — Hollis: kill browser-default underline on card
   anchors on /blogs and /projects index pages. Both .blog-card and
   .project-card wrap their entire content in an <a>, so without an
   explicit text-decoration:none the browser paints an underline under
   every child heading/paragraph/meta line. Also inherit text color so
   the links do not appear as default browser blue.
   ══════════════════════════════════════════════════════════════════════ */
a.blog-card,
a.project-card,
a.blog-card:hover,
a.project-card:hover,
a.blog-card:focus,
a.project-card:focus {
  text-decoration: none !important;
  color: inherit !important;
}
a.blog-card *,
a.project-card * {
  text-decoration: none !important;
}