/* ===================================================================
   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 equal to the logo width so
   the left+right nav lists clear the logo overlay. */
.gtp-nav-spacer {
  display: inline-block;
  flex: 0 0 158px; /* logo width (138) + 10px breathing room each side */
  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); }

/* Tablet (~860–1099px): keep desktop nav, just shrink it. */
@media (max-width: 1099px) and (min-width: 860px) {
  .gtp-nav-link { padding: 8px 8px !important; font-size: 12.5px !important; letter-spacing: 0 !important; }
  .gtp-nav-cta { padding: 8px 14px !important; font-size: 11.5px !important; margin-left: 8px !important; }
  .gtp-logo--overlay { width: 110px !important; height: 110px !important; }
  .gtp-nav-spacer { flex: 0 0 130px !important; }
  .gtp-topbar-text { font-size: 12px; }
}

/* 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;
}
.gtp-nav-list--left { flex: 1 1 0; justify-content: flex-end; }
.gtp-nav-list--right { flex: 1 1 0; justify-content: flex-start; }
.gtp-nav-item { position: relative; display: inline-flex; }
.gtp-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  color: var(--gtp-text-dark);
  font-weight: 700;
  font-size: 14px;
  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; }
.gtp-nav-item--has-dropdown:hover .gtp-nav-link svg,
.gtp-nav-item--has-dropdown:focus-within .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: 12px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #FF8533 0%, var(--gtp-accent) 50%, #E55A00 100%);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 14px;
  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;
}
.gtp-nav-item--has-dropdown:hover .gtp-nav-dropdown,
.gtp-nav-item--has-dropdown:focus-within .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. */
.mobile-menu {
  position: fixed !important;
  top: 0 !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;
  /* Top gap = top bar (32) + main bar (60) + 8px breathing = 100px-ish.
     The list starts right under the closed header, no inset padding. */
  padding: 100px 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. */
.services-submenu {
  display: block !important;
  background: rgba(0,0,0,0.30) !important;
  padding: 4px 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 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;
}
.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;
}
.gtp-tile-arrow {
  position: relative;
  width: 38px; height: 38px;
  flex-shrink: 0;
  z-index: 1;
}
.gtp-tile-arrow img { width: 100%; height: 100%; filter: brightness(0) invert(1); opacity: 0.95; }

/* ── 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);
}
.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 {
  max-width: 820px;
  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;
}
.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);
}
.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;
}
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;
  }
}