/* ===================================================================
   GasTech Pro stylesheet — gastechpro.css
   Loaded AFTER style.css to win the cascade. Owns:
     • Nunito Sans @font-face + body font override
     • GasTech Pro palette (#1668A7 primary blue, #FF6600 accent orange)
     • The gastechpro layout (top bar, centered logo header, parallax hero,
       service tile grid, why-choose, comprehensive services, contact form,
       floating WhatsApp)
     • Footer palette overrides (template's purple → gastechpro's dark)
     • Per-page hero accents (compatible with template's --hero-accent system)
   =================================================================== */

/* ── @font-face: Nunito Sans (already in /css/) ─────────────────── */
@font-face {
  font-family: 'Nunito Sans';
  src: url('/css/400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/css/400i.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/css/700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/css/700i.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/css/900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('/css/900i.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ── Palette + base reset ───────────────────────────────────────── */
:root {
  --gtp-primary:        #1668A7;
  --gtp-primary-bright: #258ED7;
  --gtp-primary-hover:  #0F4F80;
  --gtp-accent:         #FF6600;
  --gtp-accent-hover:   #E55A00;
  --gtp-light-bg:       #E9F1F5;
  --gtp-card-bg:        #FFFFFF;
  --gtp-text-dark:      #0A1828;
  --gtp-text-muted:     #4B5B6B;
  --gtp-divider:        rgba(10, 24, 40, 0.10);
  --gtp-dark-base:      #1A1A1A;
  --gtp-topbar-bg:      #1F1F1F;
  --gtp-section-radius: clamp(24px, 4vw, 48px);
  --gtp-card-radius:    16px;
  --gtp-btn-radius:     4px;
  --gtp-shadow-card:    0 6px 24px rgba(15, 79, 128, 0.10);
  --gtp-shadow-hero:    0 24px 60px rgba(0, 0, 0, 0.30);
  --gtp-container:      1200px;
  --gtp-container-narrow: 800px;
  --gtp-page-pad-x:     30px;
  --gtp-page-pad-x-mobile: 20px;
  --gtp-section-pad-y:  clamp(48px, 6vw, 80px);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--gtp-light-bg);
}
html {
  background-color: var(--gtp-dark-base);
}
body {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--gtp-text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body * {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gtp-primary); text-decoration: none; }
a:hover { color: var(--gtp-primary-hover); }
*, *::before, *::after { box-sizing: border-box; }

.skip-nav {
  position: absolute; left: -9999px; top: -9999px;
}
.skip-nav:focus {
  left: 16px; top: 16px; z-index: 9999;
  background: var(--gtp-primary); color: #fff;
  padding: 8px 16px; border-radius: 4px;
  font-weight: 700;
}

/* ── Layout helpers ─────────────────────────────────────────────── */
.gtp-container {
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding-left: var(--gtp-page-pad-x);
  padding-right: var(--gtp-page-pad-x);
}
.gtp-container--narrow {
  max-width: var(--gtp-container-narrow);
  margin: 0 auto;
  padding-left: var(--gtp-page-pad-x);
  padding-right: var(--gtp-page-pad-x);
}
@media (max-width: 767px) {
  .gtp-container,
  .gtp-container--narrow {
    padding-left: var(--gtp-page-pad-x-mobile);
    padding-right: var(--gtp-page-pad-x-mobile);
  }
}

.gtp-section {
  padding-top: var(--gtp-section-pad-y);
  padding-bottom: var(--gtp-section-pad-y);
}
/* The "owner card + service tiles" white section under the intro band
   uses tighter padding so the top of the feature card sits closer to
   the intro band edge (matches the gap below it). */
.gtp-section--tight-top { padding-top: clamp(24px, 3vw, 40px); }
.gtp-section--tight-bottom { padding-bottom: clamp(24px, 3vw, 40px); }
.gtp-section--white { background: #FFFFFF; }
.gtp-section--light { background: var(--gtp-light-bg); }
.gtp-section--rounded-bottom { border-bottom-left-radius: var(--gtp-section-radius); border-bottom-right-radius: var(--gtp-section-radius); }
.gtp-section--rounded-top { border-top-left-radius: var(--gtp-section-radius); border-top-right-radius: var(--gtp-section-radius); }

.gtp-section-title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  color: var(--gtp-text-dark);
  margin: 0 0 1.25rem;
  line-height: 1.2;
}
.gtp-section-title--center { text-align: center; }
.gtp-section-title--light { color: #FFFFFF; }

.gtp-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gtp-primary);
  margin-bottom: 12px;
}
.gtp-eyebrow--light { color: #FFFFFF; opacity: 0.85; }

/* ── Buttons ────────────────────────────────────────────────────── */
.gtp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--gtp-btn-radius);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.gtp-btn--primary {
  background: var(--gtp-primary);
  border-color: var(--gtp-primary);
  color: #FFFFFF;
}
.gtp-btn--primary:hover {
  background: var(--gtp-primary-hover);
  border-color: var(--gtp-primary-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(22, 104, 167, 0.30);
}
.gtp-btn--accent {
  background: linear-gradient(135deg, #FF8533 0%, var(--gtp-accent) 50%, #E55A00 100%);
  border-color: var(--gtp-accent);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(255, 102, 0, 0.25);
}
.gtp-btn--accent:hover {
  background: linear-gradient(135deg, var(--gtp-accent) 0%, #E55A00 50%, #C24E00 100%);
  border-color: var(--gtp-accent-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 102, 0, 0.40);
}
.gtp-btn--whatsapp {
  background: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
}
.gtp-btn--whatsapp:hover {
  background: #1FB055;
  border-color: #1FB055;
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.30);
}
.gtp-btn--whatsapp img { filter: brightness(0) invert(1); width: 20px; height: 20px; }
.gtp-btn--ghost {
  background: transparent;
  border-color: var(--gtp-primary);
  color: var(--gtp-primary);
}
.gtp-btn--ghost:hover {
  background: var(--gtp-primary);
  color: #FFFFFF;
}
.gtp-btn--light {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.gtp-btn--light:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.80);
  color: #FFFFFF;
}
.gtp-btn--pill {
  border-radius: 999px;
  padding: 14px 36px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 14px;
}

/* ── Top bar ────────────────────────────────────────────────────── */
.gtp-header { position: sticky; top: 0; z-index: 200; }
.gtp-topbar {
  background: var(--gtp-topbar-bg);
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  padding: 6px 0;
  transition: padding 0.25s ease, font-size 0.25s ease;
  will-change: padding;
}
.gtp-topbar-inner {
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding: 0 var(--gtp-page-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.gtp-topbar-left,
.gtp-topbar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.gtp-topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.18s ease;
}
.gtp-topbar-link:hover { color: var(--gtp-primary-bright); }
/* Top-bar items use the brand orange for the icon glyph itself,
   no circle background. Text label sits in white next to the icon. */
.gtp-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}
.gtp-topbar-item:hover { color: var(--gtp-accent); }
.gtp-topbar-item:hover .gtp-topbar-svg { transform: scale(1.08); }
.gtp-topbar-svg {
  color: var(--gtp-accent);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.gtp-topbar-text { color: #FFFFFF; font-weight: 400; }
.gtp-topbar-item--icon .gtp-topbar-svg { width: 18px; height: 18px; }
.gtp-topbar-tagline {
  display: inline-block;
  color: #FFFFFF;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  margin-right: 8px;
}

@media (max-width: 767px) {
  .gtp-topbar { font-size: 12px; padding: 6px 0; }
  .gtp-topbar-inner { flex-wrap: wrap; gap: 12px; justify-content: center; }
  .gtp-topbar-left, .gtp-topbar-right { gap: 14px; }
  .gtp-topbar-text { display: none; }
  .gtp-topbar-tagline { display: none; }
}

/* ── Header main bar (white, compact, logo splits the nav) ─────── */
.gtp-mainbar {
  background: #FFFFFF;
  border-bottom: 1px solid var(--gtp-divider);
  padding: 4px 0;
  position: relative;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: padding 0.25s ease;
  will-change: padding;
}
.gtp-mainbar-inner {
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding: 0 var(--gtp-page-pad-x);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 56px;
  transition: min-height 0.25s ease;
  will-change: min-height;
}

/* Sticky-shrink header on scroll: logo, padding, nav font all reduce. */
.gtp-header.is-scrolled .gtp-topbar { padding: 3px 0; font-size: 12px; }
.gtp-header.is-scrolled .gtp-mainbar { padding: 0; }
.gtp-header.is-scrolled .gtp-mainbar-inner { min-height: 44px; }
.gtp-header.is-scrolled .gtp-logo--overlay {
  /* When scrolled: just a small badge that fits inside both bars,
     leaving a small margin from the page top, ending just above the
     header's bottom edge. */
  width: 64px;
  height: 64px;
  padding: 3px;
  top: 6px;
  box-shadow: 0 4px 12px rgba(15,79,128,0.18);
}
.gtp-header.is-scrolled .gtp-nav-link { padding: 8px 10px; font-size: 13px; }
.gtp-header.is-scrolled .gtp-nav-cta { padding: 7px 18px; font-size: 12px; }

/* Logo overlay: absolute, centred horizontally, overlaps the top bar
   AND the main bar, popping into the hero by a few px at default size. */
.gtp-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.gtp-logo--overlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  top: -4px;
  width: 138px;
  height: 138px;
  background: #FFFFFF;
  border-radius: 50%;
  padding: 6px;
  box-shadow: 0 8px 22px rgba(15,79,128,0.22);
  z-index: 50;
  /* GPU-promote so the resize doesn't trigger paint flashes */
  will-change: width, height, top;
  backface-visibility: hidden;
  transition: width 0.25s ease, height 0.25s ease, padding 0.25s ease, top 0.25s ease, box-shadow 0.25s ease;
}
.gtp-logo--overlay img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

/* Reserve a horizontal slot in the nav row wider than the logo so the
   left+right nav lists can never slip under the logo overlay. We use
   `flex: 0 0 X` (fixed) so the spacer DOES NOT grow to fill the nav
   — that's what was pushing the lists to the bar edges. With a fixed
   spacer and content-sized lists (`flex: 0 1 auto`) plus the parent's
   `justify-content: center`, the whole nav row stays clustered
   around the logo regardless of viewport width. The basis is wide
   enough to also cover the ~50px imbalance between left list and
   right list (right has the wider CTA pill), since the row's centre
   drifts when lists are uneven and the logo (positioned absolutely
   to the bar) stays at viewport centre. */
.gtp-nav-spacer {
  display: inline-block;
  flex: 0 0 220px; /* logo (138) + ~41 each side, covers imbalance + breathing */
  height: 1px;
}

.gtp-mobile-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  position: absolute;
  right: var(--gtp-page-pad-x);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.gtp-mobile-toggle span {
  display: block;
  width: 26px; height: 3px;
  background: var(--gtp-text-dark);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.gtp-mobile-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.gtp-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.gtp-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Compact desktop / tablet (~860–1199px): the right list is wider
   than the left (by ~40px due to the CTA pill). We shrink font /
   padding so the lists cluster around the logo instead of stretching
   to the bar edges, and the fixed spacer is sized to absorb the
   imbalance + breathing room around the logo. Sizes are tuned so
   the row fits without overflow at 860px (the bottom of this tier,
   below which the mobile menu kicks in). */
@media (max-width: 1199px) and (min-width: 860px) {
  .gtp-mainbar-inner,
  .gtp-topbar-inner { padding-left: 18px !important; padding-right: 18px !important; }
  .gtp-nav-link { padding: 6px 4px !important; font-size: 11px !important; letter-spacing: 0 !important; gap: 2px !important; }
  .gtp-nav-cta { padding: 6px 10px !important; font-size: 10.5px !important; margin-left: 5px !important; }
  .gtp-logo--overlay { width: 96px !important; height: 96px !important; }
  .gtp-nav-spacer { flex: 0 0 160px !important; } /* logo 96 + 32 each side covers imbalance + breathing */
  .gtp-topbar-text { font-size: 11.5px; }
  /* The dropdown chevron arrow eats space — shrink it too */
  .gtp-nav-link svg { width: 8px; height: 5px; }
  .gtp-nav-list { gap: 0 !important; }
}

/* Phone (≤ 859px): collapse to hamburger + small logo on the LEFT
   so it never overlaps the hamburger toggle on the right. */
@media (max-width: 859px) {
  .gtp-mainbar-inner { justify-content: flex-start !important; min-height: 64px !important; }
  .gtp-mobile-toggle { display: block !important; }
  .gtp-nav { display: none !important; }
  .gtp-logo--overlay {
    /* Move from centred to left-anchored. */
    left: var(--gtp-page-pad-x-mobile) !important;
    transform: none !important;
    width: 76px !important;
    height: 76px !important;
    top: 8px !important;
    padding: 4px !important;
  }
  .gtp-header.is-scrolled .gtp-logo--overlay {
    width: 52px !important;
    height: 52px !important;
    top: 4px !important;
  }
  .gtp-nav-spacer { display: none !important; }
}

/* ── Desktop nav (in-flow, white, with logo splitting left/right) ── */
.gtp-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  width: 100%;
}
.gtp-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}
/* Lists size to their content (so they stay clustered around the
   centred logo via `.gtp-nav { justify-content: center }`). The
   spacer absorbs any leftover row width via `flex: 1 1 X` so the
   bars hug the logo at narrow widths and breathe further at wide
   widths. The basis is sized so the logo always sits inside the
   spacer with at least 30px breathing each side. */
.gtp-nav-list--left { flex: 0 1 auto; justify-content: flex-end; }
.gtp-nav-list--right { flex: 0 1 auto; justify-content: flex-start; }
.gtp-nav-item { position: relative; display: inline-flex; }
.gtp-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* 9 nav items + CTA pill don't fit at the original 14px / 12px
     padding even at 1280 viewport (right list runs into the logo).
     A 13px / 9px baseline gives the right list enough headroom while
     still reading as a regular desktop nav. */
  padding: 9px 10px;
  color: var(--gtp-text-dark);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color 0.18s ease;
  font-family: inherit;
  white-space: nowrap;
}
.gtp-nav-link:hover,
.gtp-nav-link:focus-visible {
  color: var(--gtp-primary);
  outline: 0;
}
.gtp-nav-link.is-active {
  color: var(--gtp-primary);
}
.gtp-nav-link svg { transition: transform 0.18s ease; }
/* Hover-rotate the chevron only on real-pointer devices (matches the
   dropdown-open rule) and explicitly when the dropdown is click-open. */
@media (hover: hover) {
  .gtp-nav-item--has-dropdown:hover .gtp-nav-link svg {
    transform: rotate(180deg);
  }
}
.gtp-nav-item--has-dropdown.is-open .gtp-nav-link svg {
  transform: rotate(180deg);
}

/* Orange Contact Us pill at the right of the nav (gradient) */
.gtp-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  /* Trim the pill in step with the rest of the nav links so the
     right list fits at 1280 viewport. */
  padding: 9px 18px;
  background: linear-gradient(135deg, #FF8533 0%, var(--gtp-accent) 50%, #E55A00 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255, 102, 0, 0.25);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.gtp-nav-cta:hover,
.gtp-nav-cta:focus-visible,
.gtp-nav-cta.is-active {
  background: linear-gradient(135deg, var(--gtp-accent) 0%, #E55A00 50%, #C24E00 100%);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,102,0,0.45);
  outline: 0;
}

.gtp-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #FFFFFF;
  border: 1px solid var(--gtp-divider);
  list-style: none;
  margin: 0;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  box-shadow: 0 12px 24px rgba(0,0,0,0.10);
  z-index: 10;
  border-radius: 8px;
}
/* Hover open is gated to actual mouse pointers so touch devices don't
   latch the dropdown open after a click. :focus-within is dropped here
   in favour of explicit JS click-toggle (.is-open) — otherwise the
   button keeps focus after a click, leaving the dropdown stuck open. */
@media (hover: hover) {
  .gtp-nav-item--has-dropdown:hover .gtp-nav-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
}
.gtp-nav-item--has-dropdown.is-open .gtp-nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.gtp-nav-dropdown a {
  display: block;
  padding: 10px 18px;
  color: var(--gtp-text-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.gtp-nav-dropdown a:hover,
.gtp-nav-dropdown a:focus-visible,
.gtp-nav-dropdown a.is-active {
  background: var(--gtp-light-bg);
  color: var(--gtp-primary);
  outline: 0;
}

/* Header is sticky and flows naturally — no extra body padding needed */

/* ── Mobile menu ─────────────────────────────────────────────────
   Full-screen dark overlay. Links sit close to the top (just enough
   space below the closed header), no extra "region" / outer container
   styling that would push them down. Services entry expands a dropdown
   in place when tapped. */
/* Selector is body-scoped so it has the same specificity as the
   template's `body[data-service] .mobile-menu` overrides, and since
   our gastechpro.css loads after style.css, this wins the cascade. */
body[data-service] .mobile-menu {
  position: fixed !important;
  /* Start the panel directly below the closed header instead of
     covering it. Top bar (~32px) + main bar (~60px) + a small fudge =
     ~96px. With the menu starting here, the X close button in the
     header stays visible and clickable, and there's no large dark
     band of empty padding above the first menu item. Body scroll is
     locked while the menu is open, so the header height never
     shrinks underneath the menu. */
  top: 96px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(15, 15, 15, 0.97) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 250 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 0 32px !important;
  overflow-y: auto !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
}
.mobile-menu:not(.active) {
  transform: translateY(-100%) !important;
  visibility: hidden !important;
  opacity: 0 !important;
  transition: transform 0.3s ease, visibility 0.3s, opacity 0.3s ease !important;
}
.mobile-menu.active {
  transform: translateY(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: transform 0.3s ease, visibility 0.3s, opacity 0.3s ease !important;
}
.mobile-menu-item {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mobile-menu-item:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.mobile-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.mobile-menu-link.is-active,
.mobile-menu-link:hover {
  color: var(--gtp-accent);
  background: rgba(255,255,255,0.04);
}
.services-toggle .services-arrow {
  font-size: 0.6em;
  transition: transform 0.18s ease;
}
.services-toggle.is-open .services-arrow { transform: rotate(180deg); }
/* Beat the template's `max-height: 0; overflow: hidden` collapse rule.
   Padding is 0 in the collapsed state so the dark submenu strip
   doesn't protrude as a thin gray bar under "Boiler Services". The
   4px top/bottom breathing only kicks in once the submenu is open. */
.services-submenu {
  display: block !important;
  background: rgba(0,0,0,0.30) !important;
  padding: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease, padding 0.3s ease !important;
  margin-top: 0 !important;
}
.services-submenu.active {
  max-height: 600px !important;
  padding: 4px 0 !important;
}
.mobile-submenu-link {
  display: block;
  padding: 12px 24px 12px 44px;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-submenu-link:last-child { border-bottom: 0; }
.mobile-submenu-link.is-active,
.mobile-submenu-link:hover {
  color: var(--gtp-accent);
  background: rgba(255,255,255,0.03);
}
.mobile-menu-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 28px 24px 0;
}
.mobile-menu-cta-link {
  display: block;
  text-align: center;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 14px;
}
.mobile-menu-cta-link--call {
  background: linear-gradient(135deg, #FF8533 0%, var(--gtp-accent) 50%, #E55A00 100%);
  color: #FFFFFF;
}
.mobile-menu-cta-link--whatsapp { background: #25D366; color: #FFFFFF; }
@media (min-width: 860px) {
  .mobile-menu { display: none !important; }
}

/* ── Hero (slideshow + single-slide) ────────────────────────────── */
.gtp-hero {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 68vh, 620px);
  overflow: hidden;
}
.gtp-hero--slideshow { min-height: clamp(480px, 72vh, 680px); }
.gtp-hero-track {
  position: absolute; inset: 0;
}
.gtp-hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1A1A1A; /* fallback while transparent PNGs load */
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.gtp-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.gtp-hero-overlay {
  position: absolute; inset: 0;
  /* Strong left-side blue tint that fades right, so the photo behind
     reads as a textured backdrop rather than a portrait. Darker on left
     where the text sits, softer on right. */
  background:
    linear-gradient(90deg, rgba(15, 79, 128, 0.92) 0%, rgba(15, 79, 128, 0.55) 45%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.55));
  z-index: 1;
}
.gtp-hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: inherit;
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding: clamp(60px, 10vh, 110px) var(--gtp-page-pad-x);
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .gtp-hero-inner {
    padding-left: var(--gtp-page-pad-x-mobile);
    padding-right: var(--gtp-page-pad-x-mobile);
  }
}
.gtp-hero-text {
  max-width: 640px;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0,0,0,0.40);
}
.gtp-hero-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: 0.92;
}
.gtp-hero-title {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  line-height: 1.18;
  margin: 0 0 14px;
  color: #FFFFFF;
}
.gtp-hero-subtitle {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 28px;
  color: #FFFFFF;
  opacity: 0.95;
}
.gtp-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.gtp-hero-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}
.gtp-hero-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.gtp-hero-dot.is-active {
  background: #FFFFFF;
  transform: scale(1.2);
}

/* ── Floating WhatsApp button ───────────────────────────────────── */
.gtp-floating-whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  box-shadow: 0 10px 30px rgba(37,211,102,0.35);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gtp-floating-whatsapp img { width: 36px; height: 36px; filter: brightness(0) invert(1); }
.gtp-floating-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(37,211,102,0.45);
}
.gtp-floating-whatsapp-pulse {
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.30;
  z-index: -1;
  animation: gtp-whatsapp-pulse 2.4s ease-out infinite;
}
@keyframes gtp-whatsapp-pulse {
  0% { transform: scale(0.95); opacity: 0.30; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gtp-floating-whatsapp-pulse { animation: none; }
}

/* ── Intro band (light blue centred quote) ──────────────────────── */
.gtp-intro-band {
  background: var(--gtp-light-bg);
  padding: clamp(40px, 5vw, 64px) 0;
  border-bottom-left-radius: var(--gtp-section-radius);
  border-bottom-right-radius: var(--gtp-section-radius);
}
.gtp-intro-band-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--gtp-page-pad-x);
  text-align: center;
}
.gtp-intro-lead {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--gtp-text-dark);
  margin: 0;
  line-height: 1.35;
}
.gtp-intro-highlight {
  display: block;
  margin-top: 8px;
  color: var(--gtp-text-dark);
  font-weight: 400;
}
.gtp-intro-callout {
  margin-top: 18px;
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--gtp-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Owner / About card (image + text two-column) ──────────────── */
.gtp-feature-card {
  background: #FFFFFF;
  border-radius: var(--gtp-card-radius);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  box-shadow: var(--gtp-shadow-card);
  /* Smaller top gap (under intro band) so the section feels intentional;
     same gap below to the service tile grid. */
  margin: clamp(24px, 3vw, 40px) 0 clamp(24px, 3vw, 40px);
  position: relative;
}
.gtp-feature-card-media {
  background-size: cover;
  background-position: center center;
  min-height: 320px;
  position: relative;
  /* Brand-coloured gradient overlay on the image, fading from primary
     blue at the top-left to translucent at the bottom-right. */
}
.gtp-feature-card-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(22,104,167,0.55) 0%, rgba(22,104,167,0.20) 50%, rgba(22,104,167,0) 100%);
  pointer-events: none;
}
.gtp-feature-card-body {
  padding: clamp(32px, 4vw, 56px);
}
.gtp-feature-card-body h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 900;
  margin: 0 0 16px;
  color: var(--gtp-text-dark);
  line-height: 1.25;
}
.gtp-feature-card-body p {
  margin: 0 0 20px;
  color: var(--gtp-text-muted);
}
.gtp-feature-card--reverse .gtp-feature-card-media { order: 2; }
@media (max-width: 767px) {
  .gtp-feature-card { grid-template-columns: 1fr; }
  .gtp-feature-card-media { order: -1 !important; min-height: 220px; }
}

/* ── Service tile grid (8 dark hover tiles) ─────────────────────── */
.gtp-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: clamp(24px, 3vw, 40px) 0 clamp(24px, 3vw, 40px);
}
@media (max-width: 1099px) {
  .gtp-tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gtp-tile-grid { grid-template-columns: 1fr; }
}
.gtp-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  height: 200px;
  padding: 22px 24px;
  border-radius: var(--gtp-card-radius);
  overflow: hidden;
  text-decoration: none;
  color: #FFFFFF;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--gtp-primary);
}
.gtp-tile[data-mode="contain"] {
  background-size: contain;
}
.gtp-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,79,128,0.20) 0%, rgba(15,79,128,0.85) 100%);
  transition: background 0.25s ease;
}
/* Override the global `a:hover { color: var(--gtp-primary-hover) }` so
   the tile label stays white on hover instead of turning blue and
   blending into the dark-blue/orange overlay. */
.gtp-tile,
.gtp-tile:hover,
.gtp-tile:focus,
.gtp-tile:focus-visible { color: #FFFFFF; }
.gtp-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,79,128,0.30); }
.gtp-tile:hover::before { background: linear-gradient(180deg, rgba(22,104,167,0.20) 0%, rgba(255,102,0,0.78) 100%); }
.gtp-tile-label {
  position: relative;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  z-index: 1;
}
/* White circular badge anchoring the bottom-right of every tile.
   The PNG inside (`arrow-right.png`) is already an orange arrow on a
   transparent background, so no colour filter is needed — we just
   shrink the arrow to ~55% of the circle and centre it. */
.gtp-tile-arrow {
  position: relative;
  width: 38px; height: 38px;
  flex-shrink: 0;
  z-index: 1;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.gtp-tile-arrow img {
  width: 26px;
  height: 26px;
  opacity: 1;
}

/* ── Why Choose section (dark, 5 light cards) ───────────────────── */
.gtp-why-choose {
  position: relative;
  /* Same vertical padding as the gap above feature card → tile grid for
     a consistent rhythm site-wide. */
  padding: clamp(40px, 5vw, 64px) 0;
  background: var(--gtp-dark-base);
  color: #FFFFFF;
  overflow: hidden;
}
.gtp-why-choose-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0.18;
  z-index: 0;
}
.gtp-why-choose-inner {
  position: relative;
  z-index: 1;
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding: 0 var(--gtp-page-pad-x);
}
.gtp-why-choose-title {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 900;
  margin: 0 0 36px;
  text-align: center;
  color: #FFFFFF;
}
.gtp-why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
@media (max-width: 1099px) {
  .gtp-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gtp-why-grid { grid-template-columns: 1fr; }
}
.gtp-why-card {
  background: var(--gtp-primary);
  border-radius: 24px;
  padding: 28px 24px;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.gtp-why-card:hover { background: var(--gtp-primary-hover); transform: translateY(-4px); }
.gtp-why-card-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.gtp-why-card-icon img { width: 100%; height: 100%; filter: brightness(0) invert(1); }
.gtp-why-card h3 {
  font-size: 18px;
  font-weight: 900;
  margin: 0;
  line-height: 1.25;
  color: #FFFFFF;
}
.gtp-why-card p {
  font-size: 15px;
  margin: 0;
  color: rgba(255,255,255,0.92);
}

/* ── Comprehensive services (two-col text + side image) ─────────── */
.gtp-comprehensive {
  background-image: url('/pictures/hero-1.jpg');
  background-size: cover;
  background-position: center center;
  background-color: #F2F6F9;
  background-blend-mode: lighten;
  padding: clamp(48px, 6vw, 80px) 0;
}
.gtp-comprehensive-inner {
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding: 0 var(--gtp-page-pad-x);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.gtp-comprehensive-text h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  margin: 0 0 24px;
  color: var(--gtp-text-dark);
}
/* Breathing room between the "...is here to assist you." paragraph
   and the Contact Us CTA underneath it. Without this they sit
   shoulder-to-shoulder which the QA flagged as cramped. */
.gtp-comprehensive-text > .gtp-btn { margin-top: 16px; }
.gtp-comprehensive-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.gtp-comprehensive-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gtp-comprehensive-cols li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  font-weight: 700;
  color: var(--gtp-text-dark);
}
.gtp-comprehensive-cols li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 12px;
  background: var(--gtp-primary);
  border-radius: 3px;
}
.gtp-comprehensive-image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gtp-comprehensive-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gtp-card-radius);
}
@media (max-width: 767px) {
  .gtp-comprehensive-inner { grid-template-columns: 1fr; }
  .gtp-comprehensive-cols { grid-template-columns: 1fr; }
}

/* ── Contact / Form callout band ────────────────────────────────── */
.gtp-contact-band {
  background: linear-gradient(135deg, rgba(15,79,128,0.85), rgba(22,104,167,0.85)), url('/pictures/hero-2.jpg');
  background-size: cover;
  background-position: center center;
  padding: clamp(60px, 6vw, 96px) 0;
  border-top-left-radius: var(--gtp-section-radius);
  border-top-right-radius: var(--gtp-section-radius);
  color: #FFFFFF;
}
.gtp-contact-band-inner {
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding: 0 var(--gtp-page-pad-x);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.gtp-contact-band-text h2 {
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 900;
  color: #FFFFFF;
  margin: 0 0 18px;
}
.gtp-contact-band-text p {
  font-size: 17px;
  color: rgba(255,255,255,0.92);
  margin: 0 0 24px;
}
.gtp-form-card {
  background: var(--gtp-light-bg);
  color: var(--gtp-text-dark);
  border-radius: var(--gtp-card-radius);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.18);
}
.gtp-form-card h2 {
  text-align: center;
  margin: 0 0 20px;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
}
.gtp-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.gtp-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.gtp-form-field label {
  font-weight: 700;
  font-size: 14px;
}
.gtp-form-field input,
.gtp-form-field select,
.gtp-form-field textarea {
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.16);
  border-radius: 5px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  color: var(--gtp-text-dark);
}
.gtp-form-field textarea { min-height: 120px; resize: vertical; }
.gtp-form-field input:focus,
.gtp-form-field select:focus,
.gtp-form-field textarea:focus {
  outline: 2px solid var(--gtp-primary);
  outline-offset: 1px;
  border-color: var(--gtp-primary);
}
.gtp-form-submit { text-align: center; margin-top: 16px; }
@media (max-width: 767px) {
  .gtp-contact-band-inner { grid-template-columns: 1fr; }
  .gtp-form-row { grid-template-columns: 1fr; }
}

/* ── Generic prose (about, terms, privacy) ──────────────────────── */
.gtp-prose {
  /* Slight bump from 820 → 880 so service-page intros breathe on D/BD
     without the cramped feel the QA flagged. Still narrower than the
     full container so the line measure stays readable. */
  max-width: 880px;
  margin: 0 auto;
}
.gtp-prose h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  margin: 32px 0 12px;
  color: var(--gtp-text-dark);
}
.gtp-prose h3 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  margin: 24px 0 10px;
  color: var(--gtp-text-dark);
}
.gtp-prose p { margin: 0 0 16px; color: var(--gtp-text-dark); }
.gtp-prose ul, .gtp-prose ol { margin: 0 0 18px; padding-left: 22px; }
.gtp-prose li { margin-bottom: 8px; }

/* ── Pill list ──────────────────────────────────────────────────── */
.gtp-pill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gtp-pill-list li {
  background: var(--gtp-light-bg);
  color: var(--gtp-primary);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid rgba(22,104,167,0.20);
}

/* ── Process / step list ────────────────────────────────────────── */
.gtp-process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 24px 0;
}
@media (max-width: 767px) { .gtp-process-grid { grid-template-columns: 1fr; } }
.gtp-process-card {
  background: #FFFFFF;
  border-radius: var(--gtp-card-radius);
  padding: 22px 24px;
  border: 1px solid var(--gtp-divider);
  box-shadow: var(--gtp-shadow-card);
}
.gtp-process-card h3 {
  font-size: 17px;
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--gtp-primary);
}
.gtp-process-card p { margin: 0; color: var(--gtp-text-muted); }

/* ── Team grid ──────────────────────────────────────────────────── */
.gtp-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0;
}
@media (max-width: 767px) { .gtp-team-grid { grid-template-columns: 1fr; } }
.gtp-team-card {
  background: var(--gtp-light-bg);
  border-radius: var(--gtp-card-radius);
  padding: 24px;
  text-align: center;
}
/* Circular portrait at the top of each team card. The source images
   are portrait-oriented phone photos (~739x1600), so we center-crop
   into a circle via `background-position: center 25%` to focus on the
   subject's face. */
.gtp-team-photo {
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background-size: cover;
  background-position: center 25%;
  background-color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(15,79,128,0.18);
}
.gtp-team-card h3 {
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 4px;
  color: var(--gtp-text-dark);
}
.gtp-team-card .role {
  font-size: 13px;
  color: var(--gtp-primary);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.gtp-team-card p { margin: 0; color: var(--gtp-text-muted); font-size: 15px; }

/* ── Brand logo strip (boiler manufacturers) ────────────────────── */
.gtp-brand-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: center;
  margin: 24px 0;
}
@media (max-width: 767px) { .gtp-brand-strip { grid-template-columns: repeat(2, 1fr); } }
.gtp-brand-strip img {
  width: 100%;
  height: auto;
  max-height: 80px;
  object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.gtp-brand-strip a { display: flex; align-items: center; justify-content: center; padding: 8px; }
.gtp-brand-strip a:hover img { opacity: 1; }

/* ── Contact cards row (3-up: Call · Email · WhatsApp) ──────────── */
.gtp-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 32px 0;
}
@media (max-width: 767px) { .gtp-contact-cards { grid-template-columns: 1fr; } }
.gtp-contact-card {
  background: #FFFFFF;
  border-radius: var(--gtp-card-radius);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--gtp-shadow-card);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.gtp-contact-card h3 {
  font-size: 17px;
  font-weight: 900;
  margin: 0;
  color: var(--gtp-text-dark);
}
.gtp-contact-card p { margin: 0; font-size: 14px; color: var(--gtp-text-muted); }
.gtp-contact-card .gtp-btn { margin-top: 6px; }

/* ── CTA banner (used between sections) ─────────────────────────── */
.gtp-cta-banner {
  background: var(--gtp-primary);
  color: #FFFFFF;
  padding: clamp(36px, 4vw, 56px) 0;
}
.gtp-cta-banner-inner {
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding: 0 var(--gtp-page-pad-x);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.gtp-cta-banner h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  margin: 0;
  color: #FFFFFF;
  flex: 1 1 60%;
  min-width: 240px;
}
@media (max-width: 767px) {
  .gtp-cta-banner-inner { justify-content: center; text-align: center; }
}

/* ── Reviews section overrides (template's component) ──────────── */
.reviews-section {
  background: #FFFFFF;
  padding: clamp(48px, 5vw, 72px) 0 !important;
}
.reviews-section .rating-summary h2,
.reviews-section h2 {
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 900 !important;
  color: var(--gtp-text-dark) !important;
  text-align: center;
  margin-bottom: 24px;
}
.reviews-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--gtp-page-pad-x); }

/* ── FAQ section overrides ─────────────────────────────────────── */
.faq-section {
  background: var(--gtp-light-bg);
  padding: clamp(48px, 5vw, 72px) 0;
  position: relative;
  z-index: 1;
}
.faq-container {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--gtp-page-pad-x);
}
.faq-section .section-title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  text-align: center;
  margin: 0 0 24px;
  color: var(--gtp-text-dark);
}
.faq-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 700px;
  margin: 0 auto 18px;
}
.faq-filters .filter-btn {
  padding: 8px 16px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid rgba(22,104,167,0.20);
  color: var(--gtp-primary);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  font-family: inherit;
}
.faq-filters .filter-btn:hover { background: var(--gtp-light-bg); }
.faq-filters .filter-btn.active {
  background: var(--gtp-primary);
  color: #FFFFFF;
  border-color: var(--gtp-primary);
}

/* Override the template's site-wide FAQ filter rule (style.css ~5972)
   that hard-codes the legacy template magenta `#48018f`. We map every
   highlight (resting outline, hover tint, active solid) to our brand
   orange so the FAQ filters match the rest of the GasTech Pro palette. */
body[data-service] .faq-filters .filter-btn {
  background: #FFFFFF !important;
  color: var(--gtp-accent) !important;
  border-color: rgba(255, 102, 0, 0.30) !important;
}
body[data-service] .faq-filters .filter-btn::before {
  background: rgba(255, 102, 0, 0.08) !important;
}
body[data-service] .faq-filters .filter-btn:hover,
body[data-service] .faq-filters .filter-btn:focus-visible {
  background: rgba(255, 102, 0, 0.08) !important;
  color: var(--gtp-accent) !important;
  border-color: var(--gtp-accent) !important;
}
body[data-service] .faq-filters .filter-btn.active,
body[data-service] .faq-filters .filter-btn.active:hover,
body[data-service] .faq-filters .filter-btn.active:focus-visible {
  background: var(--gtp-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--gtp-accent) !important;
}
body[data-service] .faq-filters .filter-btn.active::before {
  background: var(--gtp-accent) !important;
}

/* The expand-toggle badge on each open FAQ row uses
   `var(--old-site-accent-cyan)` which the template aliases back to
   the magenta primary — repaint to orange too. */
body[data-service] .faq-item.active .faq-arrow {
  background: var(--gtp-accent) !important;
  color: #FFFFFF !important;
}
.faq-category-title h3 {
  text-align: center;
  margin: 12px 0 18px;
  font-size: 18px;
  color: var(--gtp-text-muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.faq-items { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--gtp-divider);
  overflow: hidden;
  display: none;
}
.faq-item.is-visible { display: block; }
.faq-question {
  padding: 16px 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--gtp-text-dark);
}
.faq-question:hover { background: rgba(22,104,167,0.04); }
.faq-arrow { transition: transform 0.2s ease; flex-shrink: 0; }
.faq-item.active .faq-arrow { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding: 0 20px;
}
.faq-item.active .faq-answer { max-height: 800px; padding: 0 20px 16px; }
.faq-answer p { margin: 0; color: var(--gtp-text-muted); }

/* ── Footer overrides — gastechpro palette over template structure ─ */
.footer {
  background: var(--gtp-dark-base) !important;
  color: #FFFFFF;
}
.footer .footer-bottom {
  background: #0A0A0A !important;
  color: rgba(255,255,255,0.8);
}
/* Removed the gray bar above the cert strip; clean dark surface only. */
.footer-certifications {
  background: transparent;
  padding: 28px 0 8px;
  border: 0;
}
.footer-certifications-inner {
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding: 0 var(--gtp-page-pad-x);
  text-align: center;
}
.footer-certifications-heading {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gtp-accent);
}
.footer-cert-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-cert-item img {
  max-height: 64px;
  width: auto;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 6px 12px;
}

.footer-content {
  max-width: var(--gtp-container);
  margin: 0 auto;
  /* Extra top padding pushes the 3-column grid clear of the cert strip
     above (the user reported the columns felt tight to the section). */
  padding: clamp(48px, 5vw, 72px) var(--gtp-page-pad-x) clamp(40px, 5vw, 64px);
}
.footer-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}
.footer-section h3 {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gtp-accent);
  margin: 0 0 14px;
  font-weight: 800;
}
/* Beat the template's `.footer .footer-section h3 { color: #fff !important }`
   override at the same specificity. Place at end so source-order wins. */
.footer .footer-section h2,
.footer .footer-section h3,
.footer .footer-contact-bar-heading {
  color: var(--gtp-accent) !important;
  font-weight: 800 !important;
}
.footer-brand .footer-brand-link img.footer-brand-logo {
  height: auto;
  max-height: 100px;
  width: auto;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 8px 14px;
  margin-bottom: 12px;
}
.footer-tagline {
  margin: 0 0 18px;
  color: rgba(255,255,255,0.85);
  font-size: 14px;
}
.social-links {
  display: flex;
  gap: 10px;
}
.social-link {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.10);
  border-radius: 8px;
  transition: background 0.18s ease;
}
.social-link:hover { background: var(--gtp-primary); }
.social-link svg { width: 18px; height: 18px; fill: #FFFFFF; }

.footer-quick-links,
.footer-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-quick-links a,
.footer-areas li {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-size: 15px;
}
.footer-quick-links a:hover { color: #FFFFFF; }
/* Areas We Cover: 2 (or 3) per row pill grid for compactness. */
.footer-areas {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  flex-direction: initial !important;
}
.footer-areas li {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  text-align: center;
  display: block;
  width: auto;
}
@media (min-width: 1100px) {
  .footer-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.footer-contact-bar {
  border-top: 1px solid rgba(255,255,255,0.20);
  border-bottom: 1px solid rgba(255,255,255,0.20);
  padding: 22px 0;
}
.footer-contact-bar-heading {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-align: center;
}
.footer-contact-bar-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 14px;
  font-style: normal;
}
.footer-contact-item svg {
  width: 16px; height: 16px;
  fill: var(--gtp-primary-bright);
}
.footer-contact-item:hover { color: #FFFFFF; }
/* WhatsApp footer item: green text + green icon (brand colour). */
.footer-contact-whatsapp,
.footer-contact-whatsapp:hover { color: #25D366 !important; }
.footer-contact-whatsapp svg { fill: #25D366 !important; }
.footer-contact-bar-row--hours {
  margin-top: 12px;
  border-top: 1px dashed rgba(255,255,255,0.18);
  padding-top: 12px;
  gap: 16px;
}
.footer-hours-label {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-hours-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
}
.footer-hours-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-hours-row dt {
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.footer-hours-row dd {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}

.footer-map {
  margin-top: 24px;
  border-radius: 12px;
  overflow: hidden;
}
.map-container { width: 100%; height: 200px; }
.map-container iframe { width: 100%; height: 100%; border: 0; display: block; }

.footer-legal {
  margin-top: 24px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-align: center;
  line-height: 1.5;
}

.footer-bottom-inner {
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding: 18px var(--gtp-page-pad-x);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.footer-copyright { margin: 0; color: rgba(255,255,255,0.7); }
.footer-policy-links {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-policy-links a { color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-policy-links a:hover { color: #FFFFFF; }
.powered-by { font-size: 12px; opacity: 0.7; }
.powered-by a { color: rgba(255,255,255,0.85); text-decoration: none; }
.powered-by a:hover { color: #FFFFFF; }

@media (max-width: 767px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-contact-bar-row { gap: 12px; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
}

/* ── Page top wrapper that pushes content below the absolute nav ─ */
.gtp-page {
  background: var(--gtp-light-bg);
  min-height: 50vh;
}

/* ── Reviews carousel (template component) tweaks ──────────────── */
.reviews-carousel {
  --reviews-brand-accent: var(--gtp-primary);
  padding-bottom: 40px; /* breathing room under the dots/arrows */
}
/* Replace the legacy multi-layer box-shadow with a soft uniform glow that
   disperses radially instead of looking like a hard rectangle around
   each card. */
.reviews-card,
.reviews-carousel .reviews-card,
.reviews-carousel article {
  border-radius: var(--gtp-card-radius) !important;
  background: #FFFFFF !important;
  box-shadow:
    0 0 0 1px rgba(15, 79, 128, 0.06),
    0 18px 40px -16px rgba(22, 104, 167, 0.18),
    0 30px 60px -30px rgba(22, 104, 167, 0.20) !important;
  border: 0 !important;
}
.reviews-section .reviews-controls,
.reviews-section .reviews-dots,
.reviews-section .reviews-pagination {
  margin-top: 28px;
}

/* ── Misc support pages ────────────────────────────────────────── */
.gtp-page-hero {
  background: linear-gradient(135deg, rgba(15,79,128,0.85), rgba(22,104,167,0.85)), url('/pictures/hero-1.jpg');
  background-size: cover;
  background-position: center center;
  color: #FFFFFF;
  padding: clamp(60px, 8vw, 110px) 0 clamp(40px, 5vw, 60px);
  text-align: center;
}
.gtp-page-hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  margin: 0 0 12px;
  color: #FFFFFF;
}
.gtp-page-hero p {
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(15px, 1.6vw, 18px);
  color: rgba(255,255,255,0.92);
}

/* ── Blog / project pages ──────────────────────────────────────── */
.gtp-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 32px 0;
}
@media (max-width: 767px) { .gtp-card-grid { grid-template-columns: 1fr; } }
.gtp-card {
  background: #FFFFFF;
  border-radius: var(--gtp-card-radius);
  overflow: hidden;
  box-shadow: var(--gtp-shadow-card);
  text-decoration: none;
  color: var(--gtp-text-dark);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: block;
}
.gtp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15,79,128,0.15);
}
.gtp-card-image {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center center;
}
.gtp-card-body {
  padding: 24px;
}
.gtp-card-tag {
  display: inline-block;
  background: var(--gtp-light-bg);
  color: var(--gtp-primary);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.gtp-card-title {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 8px;
  line-height: 1.3;
  color: var(--gtp-text-dark);
}
.gtp-card-excerpt {
  margin: 0 0 12px;
  color: var(--gtp-text-muted);
  font-size: 15px;
}
.gtp-card-meta {
  font-size: 13px;
  color: var(--gtp-text-muted);
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Article (blog post / project page) layout ──────────────────── */
.gtp-article {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--gtp-page-pad-x);
}
.gtp-article-hero-image {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center center;
  border-radius: var(--gtp-card-radius);
  margin-bottom: 24px;
}
.gtp-article-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  color: var(--gtp-text-muted);
  margin-bottom: 24px;
}

/* ── Sitemap ───────────────────────────────────────────────────── */
.gtp-sitemap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 32px 0;
}
@media (max-width: 767px) { .gtp-sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
.gtp-sitemap-col h3 {
  font-size: 15px;
  font-weight: 900;
  margin: 0 0 10px;
  color: var(--gtp-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gtp-sitemap-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gtp-sitemap-col a {
  color: var(--gtp-text-dark);
  text-decoration: none;
  font-weight: 400;
}
.gtp-sitemap-col a:hover { color: var(--gtp-primary); text-decoration: underline; }

/* ── Generic dark CTA section ──────────────────────────────────── */
.gtp-dark-cta {
  background: var(--gtp-dark-base);
  color: #FFFFFF;
  padding: clamp(40px, 5vw, 64px) 0;
  text-align: center;
}
.gtp-dark-cta h2 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: #FFFFFF;
}
.gtp-dark-cta p { margin: 0 auto 18px; max-width: 540px; opacity: 0.92; }

/* ============================================================
   Footer brand overrides — user feedback (post-port 2026-05-05)
   ============================================================
   - Orange section titles (Contact Us / Services / Areas We Cover)
   - Green WhatsApp text + icon in the contact bar
   - No grey separator above the cert strip
   - Areas pills wrap 2-3 per row instead of stacked
   - Gap above the 3-col grid (under "Fully certified and accredited")
   ============================================================ */

body[data-service] .footer h3,
body[data-service] .footer-contact-bar-heading,
body[data-service] .footer-certifications-heading {
  color: var(--gtp-accent) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 800;
}

body[data-service] .footer-contact-whatsapp {
  color: #25D366 !important;
}
body[data-service] .footer-contact-whatsapp svg path,
body[data-service] .footer-contact-whatsapp span {
  fill: #25D366 !important;
  color: #25D366 !important;
}

body[data-service] .footer-content {
  border-top: 0 !important;
  padding-top: clamp(28px, 4vw, 48px) !important;
}

body[data-service] .footer-certifications {
  margin-bottom: clamp(20px, 3vw, 36px);
}

body[data-service] .footer-areas {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 8px 12px !important;
  list-style: none;
  padding: 0;
  margin: 0;
}
body[data-service] .footer-areas li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 8px 14px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-align: center;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  min-width: 0 !important;
}

/* Hide the duplicate "WELCOME TO GASTECH PRO LTD" eyebrow that appears
   when the slideshow shows the second slide overlapping the first.
   This keeps the slideshow transition clean. */
body[data-service="home"] .gtp-hero-track .gtp-hero-slide:not(.is-active) {
  pointer-events: none;
  opacity: 0 !important;
}

/* ============================================================
   2026-05-05 (evening) — User feedback round 4
   ============================================================
   - Reviews iframe styling (replaced native carousel)
   - Home contact band now has an image instead of the form
   - Cert strip out of the dark footer into a lighter band
   - Footer Areas We Cover restructured to template-style pills
   - Tighter gap below the legal disclosure
   - Bottom bar: cleaner row layout with proper separators
   ============================================================ */

/* Reviews iframe */
body[data-service] .gtp-reviews-section {
  padding: clamp(40px, 5vw, 80px) 0;
  background: var(--gtp-light-bg);
}
body[data-service] .gtp-reviews-container {
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding: 0 var(--gtp-page-pad-x);
}
body[data-service] .gtp-reviews-section .rating-summary {
  text-align: center;
  margin-bottom: clamp(20px, 3vw, 32px);
}
body[data-service] .gtp-reviews-section .rating-summary h2 {
  font-size: clamp(26px, 3vw, 38px) !important;
  font-weight: 900 !important;
  color: var(--gtp-text-dark) !important;
  margin: 0 !important;
}
body[data-service] .gtp-reviews-iframe-wrap {
  background: #FFFFFF;
  border-radius: var(--gtp-card-radius);
  padding: clamp(8px, 1.4vw, 18px);
  box-shadow: var(--gtp-shadow-card);
  overflow: hidden;
}
body[data-service] .gtp-reviews-iframe-wrap iframe.lc_reviews_widget {
  display: block;
  min-height: 460px;
  border: 0;
}

/* Home contact band — image variant */
body[data-service="home"] .gtp-contact-band--image .gtp-contact-band-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 767px) {
  body[data-service="home"] .gtp-contact-band--image .gtp-contact-band-inner {
    grid-template-columns: 1fr;
  }
}
body[data-service="home"] .gtp-contact-band-cta-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(16px, 2vw, 24px);
}
body[data-service="home"] .gtp-contact-band-image-wrap {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30);
  position: relative;
}
body[data-service="home"] .gtp-contact-band-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body[data-service="home"] .gtp-contact-band-image-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,79,128,0.18) 0%, transparent 60%, rgba(255,102,0,0.18) 100%);
  pointer-events: none;
}

/* Cert strip — slightly lighter grey than the dark footer below.
   Reads as a subtle separate band, NOT a bright light section. */
body[data-service] .footer .footer-certifications {
  background: #262626 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 40px) !important;
  margin-bottom: 0 !important;
}
body[data-service] .footer .footer-certifications-heading {
  color: var(--gtp-accent) !important;
  text-align: center;
  margin: 0 0 14px !important;
  font-size: 13px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}
body[data-service] .footer .footer-cert-list {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px);
  justify-content: center; align-items: center;
  list-style: none; padding: 0; margin: 0;
}
body[data-service] .footer .footer-cert-item img {
  height: 56px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
}

/* Footer overall: visible top section starts BELOW the cert strip */
body[data-service] .footer-content {
  padding-top: clamp(40px, 5vw, 64px) !important;
  padding-bottom: clamp(12px, 1.8vw, 20px) !important;
}
body[data-service] .footer-map {
  margin-bottom: clamp(10px, 1.5vw, 16px);
}

/* Areas We Cover — template-style: centered pills, capped width, neat 2-3 per row */
body[data-service] .footer-areas {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 320px;
}
body[data-service] .footer-areas li {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
}

/* Legal disclosure — centered, tight under the map, no excess gap below */
body[data-service] .footer-legal {
  margin: clamp(10px, 1.4vw, 14px) auto 0 !important;
  padding: 0 !important;
  max-width: 920px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 1.5;
}

/* Bottom bar — items grouped together centred, template-style separators */
body[data-service] .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: clamp(12px, 1.6vw, 18px) 0 !important;
  margin-top: clamp(10px, 1.5vw, 16px);
}
body[data-service] .footer-bottom-inner {
  max-width: var(--gtp-container);
  margin: 0 auto;
  padding: 0 var(--gtp-page-pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
}
body[data-service] .footer-copyright {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}
body[data-service] .footer-policy-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 0;
  margin: 0;
}
body[data-service] .footer-policy-links a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
body[data-service] .footer-policy-links a:hover { color: var(--gtp-accent); }
body[data-service] .footer-bottom .powered-by a {
  color: var(--gtp-accent);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
}
body[data-service] .footer-bottom .powered-by a:hover { color: var(--gtp-accent-hover); }

@media (max-width: 767px) {
  body[data-service] .footer-bottom-inner {
    justify-content: center;
    text-align: center;
  }
  body[data-service] .footer-policy-links { justify-content: center; }
}

/* ============================================================
   2026-05-05 (round 5) — Reviews carousel brand styling
   ============================================================ */
body[data-service] .reviews-carousel {
  --review-bg: #FFFFFF;
  --review-border: #E9F1F5;
  --review-primary: #0A1828;
  --review-secondary: #4B5B6B;
  --star-color: #FF6600;
}
body[data-service] .reviews-carousel__arrow {
  background: #FFFFFF;
  border-color: var(--gtp-divider);
  color: var(--gtp-primary);
}
body[data-service] .reviews-carousel__arrow:hover,
body[data-service] .reviews-carousel__arrow:focus-visible {
  background: var(--gtp-primary) !important;
  border-color: var(--gtp-primary) !important;
  color: #FFFFFF !important;
}
body[data-service] .reviews-carousel__dot {
  background: rgba(22, 104, 167, 0.20);
}
body[data-service] .reviews-carousel__dot:hover,
body[data-service] .reviews-carousel__dot:focus-visible {
  background: rgba(22, 104, 167, 0.55);
}
body[data-service] .reviews-carousel__dot[aria-selected="true"] {
  background: var(--gtp-primary);
}
/* Review CARD only — not its children (the [class*="reviews-card"] selector
   was matching .reviews-card__source / __name / __date / __header /
   __header-text / __comment etc., applying the 28px padding + border to
   the Google G icon, the name, the date — totally breaking the header
   layout. Tightened to the article element itself. */
body[data-service] article.reviews-card {
  background: #FFFFFF;
  border: 1px solid #E9F1F5;
  border-radius: var(--gtp-card-radius);
  padding: clamp(20px, 2.5vw, 28px);
  box-shadow:
    0 1px 0 rgba(15, 79, 128, 0.06),
    0 12px 32px -10px rgba(22, 104, 167, 0.20),
    0 4px 12px -2px rgba(22, 104, 167, 0.08);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
body[data-service] article.reviews-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(15, 79, 128, 0.06),
    0 18px 42px -10px rgba(22, 104, 167, 0.32),
    0 6px 16px -2px rgba(22, 104, 167, 0.14);
}

/* ============================================================
   2026-05-05 (round 6) — colorful Why Choose + bigger cert logo
   + contact band list + fixes
   ============================================================ */

/* Cert logo bigger — Gas Safe Register reads at glance */
body[data-service] .footer .footer-cert-item img {
  height: 88px !important;
  max-width: 220px !important;
}
@media (max-width: 767px) {
  body[data-service] .footer .footer-cert-item img {
    height: 72px !important;
  }
}

/* Why Choose — colorful cards with per-item tones (no dark navy slab) */
body[data-service] .gtp-why-choose {
  background: var(--gtp-light-bg);
  position: relative;
}
body[data-service] .gtp-why-choose-bg {
  opacity: 0.10 !important;
  filter: saturate(1.1);
}
body[data-service] .gtp-why-choose-title {
  color: var(--gtp-text-dark) !important;
  position: relative;
  z-index: 2;
}
body[data-service] .gtp-why-grid {
  position: relative;
  z-index: 2;
}
body[data-service] .gtp-why-card {
  border-radius: 22px !important;
  padding: 28px 22px !important;
  color: #FFFFFF !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 14px 36px rgba(15, 22, 38, 0.18) !important;
}
body[data-service] .gtp-why-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}
body[data-service] .gtp-why-card:hover {
  transform: translateY(-6px) !important;
  filter: brightness(1.05);
  box-shadow: 0 22px 48px rgba(15, 22, 38, 0.30) !important;
}
body[data-service] .gtp-why-card-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  position: relative;
  z-index: 1;
}
body[data-service] .gtp-why-card-icon img {
  filter: brightness(0) invert(1) !important;
  width: 100% !important;
  height: 100% !important;
}
body[data-service] .gtp-why-card h3 {
  font-size: clamp(17px, 1.4vw, 19px) !important;
  font-weight: 800 !important;
  margin: 0 !important;
  color: #FFFFFF !important;
  position: relative;
  z-index: 1;
  line-height: 1.25;
}
body[data-service] .gtp-why-card p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  position: relative;
  z-index: 1;
}

/* Card tones — alternating brand-blue and brand-orange variants */
body[data-service] .gtp-why-card--primary {
  background: linear-gradient(160deg, #1668A7 0%, #0F4F80 100%) !important;
}
body[data-service] .gtp-why-card--accent {
  background: linear-gradient(160deg, #FF8533 0%, #FF6600 60%, #E55A00 100%) !important;
}
body[data-service] .gtp-why-card--bright {
  background: linear-gradient(160deg, #258ED7 0%, #1668A7 100%) !important;
}
body[data-service] .gtp-why-card--deep {
  background: linear-gradient(160deg, #1F2937 0%, #0A1828 100%) !important;
}

/* Home contact band — extra info list */
body[data-service="home"] .gtp-contact-band-list {
  list-style: none;
  padding: 0;
  margin: clamp(20px, 3vw, 28px) 0 0;
  display: grid;
  gap: 10px;
}
body[data-service="home"] .gtp-contact-band-list li {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 12px;
  padding: 12px 16px;
  color: #FFFFFF;
}
body[data-service="home"] .gtp-contact-band-list strong {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
}
body[data-service="home"] .gtp-contact-band-list span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

/* Cert wrappers were constraining img height — force the chain to grow */
body[data-service] .footer .footer-cert-item,
body[data-service] .footer .footer-cert-item a {
  height: auto !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
body[data-service] .footer .footer-cert-item a {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

/* ============================================================
   Round 7 (2026-05-06) — small targeted fixes
   ============================================================
   - CONTACT US pill: more visible diagonal gradient
   - Tighter intro-band → owner-card gap (was 120-180px combined)
   - Reviews padding/border CSS tightened to article only (above)
   - Contact band list items now links (phone/email/wa.me)
   ============================================================ */

/* Stronger gradient on the orange Contact Us pill (header + footer + buttons) */
body[data-service] .gtp-nav-cta,
body[data-service] .gtp-btn--accent {
  background: linear-gradient(135deg, #FFB070 0%, #FF8533 35%, #FF6600 65%, #C24E00 100%) !important;
  background-size: 180% 180%;
  background-position: 0% 0%;
  transition: background-position 0.35s ease, transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
body[data-service] .gtp-nav-cta:hover,
body[data-service] .gtp-nav-cta:focus-visible,
body[data-service] .gtp-btn--accent:hover,
body[data-service] .gtp-btn--accent:focus-visible {
  background-position: 100% 100% !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(255, 102, 0, 0.50);
  filter: brightness(1.04);
}

/* Tighter gap between intro band and the white "Your Trusted Gas Engineers" section */
body[data-service="home"] .gtp-intro-band {
  padding: clamp(28px, 4vw, 44px) 0 !important;
}
body[data-service="home"] .gtp-intro-band + .gtp-section--white {
  padding-top: clamp(20px, 2.5vw, 32px) !important;
}
body[data-service="home"] .gtp-intro-band + .gtp-section--white .gtp-feature-card {
  margin-top: 0 !important;
}

/* Contact band list — now anchor links */
body[data-service="home"] .gtp-contact-band-list {
  list-style: none;
  padding: 0;
  margin: clamp(20px, 3vw, 28px) 0 0;
  display: grid;
  gap: 10px;
}
body[data-service="home"] .gtp-contact-band-list li { padding: 0; background: none; border: 0; }

body[data-service="home"] .gtp-contact-band-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  text-decoration: none;
  color: #FFFFFF;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
body[data-service="home"] .gtp-contact-band-link:hover,
body[data-service="home"] .gtp-contact-band-link:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.40);
  transform: translateY(-1px);
}
body[data-service="home"] .gtp-contact-band-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
body[data-service="home"] .gtp-contact-band-link--whatsapp .gtp-contact-band-icon {
  background: #25D366;
  color: #FFFFFF;
}
body[data-service="home"] .gtp-contact-band-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body[data-service="home"] .gtp-contact-band-text-wrap strong {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
}
body[data-service="home"] .gtp-contact-band-text-wrap span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   Round 8 (2026-05-06) — symmetric section gaps + floating WA
   ============================================================ */

/* Single source of truth for inter-section padding so the gap below
   one section equals the gap above the next. Token already exists at
   --gtp-section-pad-y = clamp(48px, 6vw, 80px). */

/* Intro band uses the SAME padding as a regular .gtp-section so the
   band's bottom gap equals the white section's top gap. */
body[data-service="home"] .gtp-intro-band {
  padding-top: var(--gtp-section-pad-y) !important;
  padding-bottom: var(--gtp-section-pad-y) !important;
}

/* The white section right after the intro band: standard padding
   (was tightened in round 7 — restore so it matches intro band's
   bottom padding). */
body[data-service="home"] .gtp-intro-band + .gtp-section--white {
  padding-top: var(--gtp-section-pad-y) !important;
  padding-bottom: var(--gtp-section-pad-y) !important;
}
body[data-service="home"] .gtp-intro-band + .gtp-section--white .gtp-feature-card {
  margin-top: 0 !important;
  margin-bottom: var(--gtp-section-pad-y) !important;
}

/* Why Choose: same padding above and below */
body[data-service] .gtp-why-choose {
  padding-top: var(--gtp-section-pad-y) !important;
  padding-bottom: var(--gtp-section-pad-y) !important;
}

/* Comprehensive section: same */
body[data-service] .gtp-comprehensive {
  padding-top: var(--gtp-section-pad-y) !important;
  padding-bottom: var(--gtp-section-pad-y) !important;
}

/* Reviews section: match */
body[data-service] .gtp-reviews-section,
body[data-service] .reviews-section {
  padding-top: var(--gtp-section-pad-y) !important;
  padding-bottom: var(--gtp-section-pad-y) !important;
}

/* Contact band: match */
body[data-service] .gtp-contact-band {
  padding-top: var(--gtp-section-pad-y) !important;
  padding-bottom: var(--gtp-section-pad-y) !important;
}

/* Tile grid spacing inside the white section: keep the gap below the
   tile grid (before why-choose) equal to one section pad. */
body[data-service] .gtp-tile-grid {
  margin-top: var(--gtp-section-pad-y) !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   Floating WhatsApp button
   ============================================================ */
body[data-service] .gtp-floating-whatsapp {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}
/* Hide the floating WA button while the mobile menu is open — the
   menu already has its own "Chat on WhatsApp" entry, and at z:9999
   the floating button would otherwise punch a hole through the
   overlay in the bottom-right corner. */
body.gtp-menu-open .gtp-floating-whatsapp {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body[data-service] .gtp-floating-whatsapp:hover,
body[data-service] .gtp-floating-whatsapp:focus-visible {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 18px 36px rgba(37, 211, 102, 0.60);
  filter: brightness(1.05);
  outline: 0;
}
body[data-service] .gtp-floating-whatsapp-icon {
  position: relative;
  z-index: 2;
}
body[data-service] .gtp-floating-whatsapp-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: #25D366;
  opacity: 0.30;
  z-index: 1;
  animation: gtp-wa-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes gtp-wa-pulse {
  0%   { transform: scale(0.95); opacity: 0.30; }
  100% { transform: scale(1.50); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-service] .gtp-floating-whatsapp-pulse { animation: none; }
}
@media (max-width: 767px) {
  body[data-service] .gtp-floating-whatsapp {
    width: 54px;
    height: 54px;
    right: 14px;
    bottom: 14px;
  }
}

/* ============================================================
   Round 9 (2026-05-06)
   ============================================================ */

/* Tighten the gap between Reviews and Contact band on home so the
   visual gap from the carousel buttons to the contact image equals
   the gap under the buttons within the reviews section. */
body[data-service="home"] .gtp-reviews-section {
  padding-bottom: clamp(20px, 2.5vw, 30px) !important;
}
body[data-service="home"] .gtp-reviews-section + .gtp-contact-band {
  padding-top: clamp(20px, 2.5vw, 30px) !important;
}

/* Ensure CTA banners between Reviews and FAQ on inner pages don't
   pile up extra padding — the banner is the meaningful gap. */
body[data-service]:not([data-service="home"]) .gtp-reviews-section + .gtp-cta-banner {
  margin-top: 0 !important;
}
body[data-service]:not([data-service="home"]) .gtp-cta-banner + .faq-section {
  padding-top: var(--gtp-section-pad-y) !important;
}

/* ============================================================
   Round 10 (2026-05-06)
   ============================================================
   - Support pages (sitemap / privacy / terms / 404 / thank-you /
     form) inherited a fixed-header `padding-top: 108-162px` and a
     dark `linear-gradient(180deg, rgba(10,10,15,0.9), #EEE)` from
     style.css. Our header is sticky and takes its own document
     space, so that 100-160px of dark bg shows above the hero as a
     visible black bar. Neutralise it.
   ============================================================ */
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: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}
@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: 0 !important;
  }
}
@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: 0 !important;
  }
}

/* ============================================================
   Round 11 (2026-05-06) — QA fixes
   ============================================================
   The template's style.css carries a high-specificity rule:
     main ul:not(.booking-list):not(.nav-menu):not(.services-submenu):not(.social-links) {
       max-width: min(620px, 100% - 40px);
       margin: 0 auto;
       padding-left: 1.35rem;
     }
   It's intended for prose articles but it grabs every <ul> in <main>,
   including the homepage "Comprehensive Services" bullet columns and
   the contact-band link list. The result is a 21.6px left padding
   AND auto-centering with 20px side margins, which makes those lists
   look indented from their headings/buttons (QA issues 7 & 9).
   We can't easily extend the :not() chain from outside the template,
   so override at higher specificity. */
body[data-service] main .gtp-comprehensive-cols ul,
body[data-service] main ul.gtp-contact-band-list {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}