/* ============================================================
   First Call Plumbing Co — Styles
   ============================================================ */

/* ---- Variables ---- */
:root {
  /* Force a light colour-scheme so OS/browser dark-mode does not
     re-tint backgrounds, form controls, scrollbars or images. The
     site is light-themed by design; this prevents Chrome/Firefox/
     Safari from auto-inverting inputs, selects, textareas, etc. */
  color-scheme: light;

  --navy:         #1a3a5c;
  --navy-dark:    #12293f;
  --navy-deeper:  #0d1f2e;
  --orange:       #e8a020;
  --orange-dark:  #d4911b;
  --blue-accent:  #5bb8ff;
  --white:        #ffffff;
  --gray-light:   #f5f6f8;
  --gray-mid:     #e4e6ea;
  --gray-text:    #6b7280;
  --body-text:    #2d3748;
  --font:         'Open Sans', sans-serif;
}

/* Belt-and-braces: even if a browser extension or user stylesheet
   tries to flip to dark, keep our key surfaces and form controls
   on the intended palette. (Branded buttons are left alone — their
   own class rules win the cascade.) */
html, body { background: #fff; color: var(--body-text); }
input, select, textarea {
  background-color: #fff;
  color: var(--body-text);
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--body-text);
  font-size: 16px;
  line-height: 1.6;
  background: #fff;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ---- Utility ---- */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: background 0.2s, color 0.2s, transform 0.15s;
  letter-spacing: 0.3px;
  font-family: var(--font);
}
.btn:hover { transform: translateY(-1px); }

.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover { background: var(--orange-dark); }

.btn-orange-outline {
  background: transparent;
  color: var(--orange);
  border: 2px solid var(--orange);
}
.btn-orange-outline:hover { background: var(--orange); color: #fff; }

.btn-white { background: var(--white); color: var(--navy); }
.btn-white:hover { background: var(--gray-light); }

.btn-lg { padding: 18px 40px; font-size: 17px; }
.btn-full { width: 100%; text-align: center; display: block; }

.section { padding: 72px 0; }
.section-sm { padding: 48px 0; }
.section-title {
  font-size: 34px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 16px;
  line-height: 1.2;
}
.section-subtitle {
  font-size: 17px;
  color: var(--gray-text);
  max-width: 640px;
  margin-bottom: 48px;
  line-height: 1.7;
}
.text-center { text-align: center; }
.text-center .section-subtitle { margin-left: auto; margin-right: auto; }
.text-orange { color: var(--orange); }
.bg-gray { background: var(--gray-light); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  background: var(--navy-deeper);
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  padding: 8px 0;
  position: relative;
  z-index: 1001;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  letter-spacing: 0.3px;
}
.topbar-left i { color: var(--orange); font-size: 12px; }
.topbar-right a {
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Scrolled state: header stays visually identical to its initial state.
   The .scrolled class is still toggled by the scroll handler in case
   other behavior hooks off it, but no visual swap occurs. */

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.site-logo img {
  height: 81px;
  width: auto;
  display: block;
  max-height: 81px;
}
.logo-icon {
  width: 44px;
  height: 44px;
  background: var(--orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  transition: background 0.3s, color 0.3s;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-text span:first-child {
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.3px;
  transition: color 0.3s;
}
.logo-text span:last-child {
  font-size: 11px;
  color: var(--blue-accent);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Scrolled-only CTA (hidden by default) */
.scrolled-cta {
  display: none;
  align-items: center;
  gap: 16px;
}
.scrolled-cta a {
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scrolled-cta .btn {
  background: #fff;
  color: var(--orange);
  padding: 10px 24px;
  font-size: 14px;
}

/* Main nav */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 36px;
}
.nav-item { position: relative; }
.nav-link {
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  font-size: 14px;
  padding: 26px 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.active { color: var(--orange); }
.nav-link i.fa-chevron-down { font-size: 10px; transition: transform 0.2s; }
.nav-item.open .nav-link i.fa-chevron-down { transform: rotate(180deg); }
.nav-cta {
  margin-left: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background: #fff;
  min-width: 220px;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  overflow: hidden;
  border-top: 3px solid var(--orange);
}
.nav-item:hover .dropdown,
.nav-item.open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-link {
  display: block;
  padding: 11px 20px;
  color: var(--body-text);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  border-bottom: 1px solid var(--gray-light);
}
.dropdown-link:last-child { border-bottom: none; }
.dropdown-link:hover { background: var(--gray-light); color: var(--navy); }
.dropdown-link.view-all {
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================================
   MOBILE NAV DROPDOWN OVERLAY
   ============================================================ */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 31, 46, 0);
  z-index: 997; /* below header (1000) so the hamburger/X stays on top */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: background 0.28s ease, opacity 0.28s ease, visibility 0.28s ease;
}
.mobile-overlay.open {
  background: rgba(13, 31, 46, 0.45);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-overlay-panel {
  position: absolute;
  top: var(--mob-nav-top, 72px);
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--mob-nav-top, 72px) - 20px);
  max-height: calc(100dvh - var(--mob-nav-top, 72px) - 20px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--navy);
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
  box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.45);
  transform: translateY(-14px);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.mobile-overlay.open .mobile-overlay-panel {
  transform: translateY(0);
  opacity: 1;
}

.mob-phone-bar {
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%);
  padding: 16px 24px 14px;
  text-align: center;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
.mob-phone-bar a {
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  line-height: 1;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.mob-phone-bar a:active { transform: scale(0.98); }
.mob-phone-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.mob-phone-number {
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.mob-phone-bar p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-top: 8px;
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-overlay,
  .mobile-overlay-panel { transition: none; }
}

.mob-nav-item {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mob-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: 17px;
  cursor: pointer;
}
.mob-nav-link:hover { color: var(--orange); }
.mob-nav-link i { font-size: 12px; transition: transform 0.2s; }
.mob-nav-item.open .mob-nav-link i { transform: rotate(180deg); }

.mob-dropdown {
  background: rgba(0,0,0,0.25);
  display: none;
  padding: 8px 0;
}
.mob-nav-item.open .mob-dropdown { display: block; }
.mob-dropdown a {
  display: block;
  padding: 10px 40px;
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  transition: color 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.mob-dropdown a:hover { color: var(--orange); }
.mob-dropdown a.view-all { color: var(--orange); font-weight: 700; }
.mob-plain-link {
  display: block;
  padding: 16px 24px;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: 17px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mob-plain-link:hover { color: var(--orange); }

/* ============================================================
   HERO SECTION
   ============================================================ */
.home-hero {
  background: var(--navy);
  padding: 72px 0 60px;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 48px;
  align-items: center;
}
.hero-grid .hero-left { grid-column: 1; grid-row: 1; }
.hero-grid .hero-right { grid-column: 2; grid-row: 1; }

/* Left */
.hero-left {}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(91,184,255,0.12);
  border: 1px solid rgba(91,184,255,0.3);
  color: var(--blue-accent);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 20px;
  letter-spacing: 0.3px;
}
.hero-badge i { font-size: 12px; }

.hero-left h1 {
  font-size: 52px;
  font-weight: 900;
  color: var(--white);
  line-height: 1.05;
  margin-bottom: 16px;
  letter-spacing: -1px;
}

.hero-left h2 {
  font-size: 19px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  margin-bottom: 32px;
  line-height: 1.55;
  letter-spacing: 0.2px;
  text-wrap: balance;
}
.hero-left h2 .hero-sub-chunk {
  white-space: nowrap;
}
.hero-left h2 strong {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.hero-left h2 .hero-sub-dot {
  display: inline-block;
  margin: 0 0.45em;
  color: rgba(251, 146, 60, 0.6);
  font-weight: 700;
  font-size: 0.8em;
  transform: translateY(-0.08em);
  user-select: none;
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.hero-cta-group .btn-call {
  background: var(--orange);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  padding: 20px 36px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  font-family: var(--font);
  letter-spacing: 0.5px;
  align-self: flex-start;
}
.hero-cta-group .btn-call:hover { background: var(--orange-dark); transform: translateY(-2px); }
.hero-cta-group .btn-call i { font-size: 20px; }

.hero-form-link {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color 0.2s;
}
.hero-form-link:hover { color: var(--orange); }

/* Trust strip */
.hero-trust-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.trust-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  animation: trustChipIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  cursor: default;
}
.trust-chip:nth-child(1) { animation-delay: 0.05s; }
.trust-chip:nth-child(2) { animation-delay: 0.15s; }
.trust-chip:nth-child(3) { animation-delay: 0.25s; }
.trust-chip:nth-child(4) { animation-delay: 0.35s; }
.trust-chip:nth-child(5) { animation-delay: 0.45s; }

.trust-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(255,255,255,0.09);
  box-shadow: 0 10px 22px -12px rgba(74, 222, 128, 0.55);
}
.trust-chip-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 12px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4), inset 0 -1px 0 rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}
.trust-chip:hover .trust-chip-icon {
  transform: scale(1.1) rotate(-6deg);
}
.trust-chip-label {
  white-space: nowrap;
  color: rgba(255,255,255,0.72);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-feature-settings: "liga", "kern";
  -webkit-font-smoothing: antialiased;
}
.trust-chip-label strong {
  color: var(--orange); /* fallback for browsers without background-clip: text */
  font-weight: 800;
  letter-spacing: 1.2px;
  background-image: linear-gradient(135deg, #ffc278 0%, #f97316 50%, #fb923c 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 3px rgba(249, 115, 22, 0.35));
  transition: filter 0.25s ease;
}
.trust-chip:hover .trust-chip-label strong {
  filter: drop-shadow(0 2px 6px rgba(249, 115, 22, 0.55));
}

@keyframes trustChipIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .trust-chip { animation: none; }
  .trust-chip:hover { transform: none; }
  .trust-chip:hover .trust-chip-icon { transform: none; }
}

/* Right */
.hero-right {
  position: relative;
}
.hero-photo-wrap {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.hero-photo-wrap img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Google wordmark — shared by the reviews trust block below the hero. */
.badge-g {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}
.badge-g span:nth-child(1) { color: #4285F4; }
.badge-g span:nth-child(2) { color: #EA4335; }
.badge-g span:nth-child(3) { color: #FBBC05; }
.badge-g span:nth-child(4) { color: #4285F4; }
.badge-g span:nth-child(5) { color: #34A853; }
.badge-g span:nth-child(6) { color: #EA4335; }

/* ============================================================
   BOOKING FORM SECTION
   ============================================================ */
.booking-section {
  background: var(--gray-light);
  padding: 56px 0;
}
.booking-inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.booking-inner h2 {
  font-size: 28px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 6px;
}
.booking-inner p {
  color: var(--gray-text);
  font-size: 15px;
  margin-bottom: 28px;
}
.booking-form {
  background: #fff;
  border-radius: 10px;
  padding: 32px;
  border: 1.5px solid var(--gray-mid);
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group { margin-bottom: 16px; text-align: left; }
.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--gray-mid);
  border-radius: 6px;
  font-size: 15px;
  font-family: var(--font);
  color: var(--body-text);
  background: #fff;
  transition: border-color 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--orange);
}
.form-group textarea { resize: vertical; min-height: 90px; }
.form-submit-btn {
  width: 100%;
  padding: 18px;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s;
  font-family: var(--font);
  letter-spacing: 0.3px;
  margin-top: 4px;
}
.form-submit-btn:hover { background: var(--orange-dark); }
.form-privacy {
  text-align: center;
  font-size: 12px;
  color: var(--gray-text);
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* ---- Suburb autocomplete ---- */
.suburb-ac-wrap {
  position: relative;
}
.suburb-ac-wrap input.is-invalid,
.suburb-ac-wrap input.is-invalid:focus {
  border-color: #dc2626;
  background: #fff5f5;
}
.suburb-ac-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(13, 31, 46, 0.1);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(13, 31, 46, 0.14), 0 2px 6px rgba(13, 31, 46, 0.06);
  max-height: 280px;
  overflow-y: auto;
  z-index: 50;
}
.suburb-ac-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.suburb-ac-item:hover,
.suburb-ac-item.is-active {
  background: rgba(232, 160, 32, 0.1);
}
.suburb-ac-name {
  color: var(--navy);
  font-weight: 700;
  font-size: 14.5px;
}
.suburb-ac-postcode {
  color: var(--gray-text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}
.suburb-ac-error {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #fff5f5;
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 8px;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.form-success {
  display: none;
  background: #ecfdf5;
  border: 1.5px solid #10b981;
  border-radius: 8px;
  padding: 16px 20px;
  color: #065f46;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  margin-top: 12px;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-it-works {
  background: #fff;
  padding: 56px 0;
}
.how-it-works .section-subtitle { margin-bottom: 28px; }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
  margin-top: 0;
}
/* Thin orange connectors with a small chevron at the right end */
.step-connector {
  position: absolute;
  top: 18px;
  height: 2px;
  background: var(--orange);
  z-index: 0;
}
.step-connector:nth-of-type(1) {
  left: calc(16.66% + 26px);
  width: calc(33.33% - 52px);
}
.step-connector:nth-of-type(2) {
  left: calc(50% + 26px);
  width: calc(33.33% - 52px);
}
.step-connector::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  transform: translate(50%, -50%) rotate(45deg);
}
.step-card {
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}
.step-icon-wrap {
  width: 36px;
  height: 36px;
  background: #fff; /* knocks out the connector line where the icon sits */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 22px;
  color: var(--orange);
  line-height: 1;
}
.step-card h3 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: 0.4px;
  line-height: 1.3;
  margin-bottom: 0;
}
/* The 4th step card, 3rd connector, and step descriptions are
   desktop-only enhancements. Hidden by default so mobile and tablet
   keep their existing 3-step layout. */
.step-card-extra,
.step-connector-3,
.step-desc { display: none; }

/* ============================================================
   FIRST CALL DIFFERENCE
   ============================================================ */
.difference-section {
  background: var(--navy);
  padding: 80px 0;
}
.difference-section .section-title {
  color: #fff;
  margin-bottom: 0;
  letter-spacing: -0.5px;
}
.difference-header {
  max-width: 760px;
  margin: 0 auto 56px;
}

.diff-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 64px;
}
.diff-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 4px solid var(--orange);
  border-radius: 14px;
  padding: 32px 28px 32px 24px;
  transition: border-color 0.25s, background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.diff-card:hover {
  border-top-color: rgba(232,160,32,0.5);
  border-right-color: rgba(232,160,32,0.5);
  border-bottom-color: rgba(232,160,32,0.5);
  background: rgba(255,255,255,0.06);
  transform: translateY(-2px);
  box-shadow: -6px 0 18px -10px rgba(232,160,32,0.55);
}
.diff-card-icon {
  font-size: 24px;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 16px;
}
.diff-card h3 {
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}
.diff-card p {
  color: rgba(255,255,255,0.72);
  font-size: 15px;
  line-height: 1.75;
}

.diff-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--orange);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 28px 0;
}
.diff-stat {
  text-align: center;
  padding: 4px 16px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.diff-stat:last-child { border-right: none; }
.diff-stat-number {
  color: var(--orange);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}
.diff-stat-number i {
  font-size: 0.78em;
  vertical-align: 0.08em;
  margin-left: 2px;
}
.diff-stat-label {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* ============================================================
   SERVICES GRID (Photo tiles with label bars)
   ============================================================ */
.services-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
/* Desktop only: switch to a 6-column track so the bottom row of two
   tiles (when the total is 8) can be centered under the rows of three. */
@media (min-width: 1025px) {
  .services-tile-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .services-tile-grid > .service-tile { grid-column: span 2; }
  .services-tile-grid > .service-tile:nth-child(7):nth-last-child(2) {
    grid-column: 2 / span 2;
  }
}
.service-tile {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  height: 240px;
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.service-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.service-tile:hover img { transform: scale(1.06); }
.service-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,58,92,0.75) 0%, rgba(26,58,92,0.1) 60%);
}
.service-tile-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--orange);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 0.2s;
}
.service-tile:hover .service-tile-label { padding: 14px 20px; }
.service-tile-label span {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.2px;
}
.service-tile-label i {
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  transition: transform 0.2s;
}
.service-tile:hover .service-tile-label i { transform: translateX(4px); }

/* ============================================================
   GOOGLE REVIEWS TRUST BLOCK (below hero, desktop + mobile)
   Class name kept as .mobile-reviews-* for legacy; now shown on
   all viewports. Mobile-specific sizing overrides live in the
   max-width: 768px media query below.
   ============================================================ */
.mobile-reviews-section {
  display: block;
  background: var(--gray-light);
  padding: 88px 0;
}
.mobile-reviews-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mobile-reviews-title {
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  color: var(--navy);
  margin: 0 0 10px;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.mobile-reviews-subtitle {
  text-align: center;
  color: var(--gray-text);
  font-size: 18.5px;
  line-height: 1.6;
  max-width: 680px;
  margin: 0 auto 36px;
}
.mobile-reviews-subtitle strong { color: var(--navy); font-weight: 800; }

.mobile-reviews-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border-radius: 16px;
  padding: 22px 36px;
  box-shadow: 0 6px 20px rgba(13, 31, 46, 0.08);
  border: 1px solid rgba(13, 31, 46, 0.04);
}
.mobile-reviews-google-badge .badge-g { font-size: 44px; letter-spacing: -1px; }
.mobile-reviews-google-meta { display: flex; flex-direction: column; }
.mobile-reviews-stars { color: #fbbc04; font-size: 22px; letter-spacing: 2px; line-height: 1; }
.mobile-reviews-count { font-size: 15px; font-weight: 700; color: var(--navy); margin-top: 6px; }

/* ============================================================
   REVIEWS SECTION
   ============================================================ */
.reviews-section {
  display: none;
  background: var(--gray-light);
  padding: 72px 0;
}
.reviews-google-badge {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 10px;
  padding: 20px 28px;
  width: fit-content;
  margin-bottom: 40px;
  border: 1.5px solid var(--gray-mid);
}
.google-stars { color: #fbbc04; font-size: 22px; letter-spacing: 2px; }
.google-score { font-size: 36px; font-weight: 900; color: var(--navy); }
.google-count { color: var(--gray-text); font-size: 14px; }

.reviews-carousel-wrap { position: relative; overflow: hidden; }
.reviews-carousel {
  display: flex;
  gap: 24px;
  transition: transform 0.4s ease;
}
.review-card {
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  min-width: calc(33.33% - 16px);
  flex-shrink: 0;
  border: 1.5px solid var(--gray-mid);
}
.review-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.reviewer-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
}
.reviewer-info strong { display: block; font-size: 15px; font-weight: 700; color: var(--navy); }
.reviewer-info span { color: var(--gray-text); font-size: 13px; }
.review-stars { color: #fbbc04; font-size: 14px; margin-bottom: 10px; }
.review-text { color: var(--gray-text); font-size: 14px; line-height: 1.75; }

.carousel-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: transparent;
  color: var(--navy);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-btn:hover { background: var(--navy); color: #fff; }

/* ============================================================
   SUBURB COVERAGE
   ============================================================ */
.suburb-section {
  background: #fff;
  padding: 72px 0;
}
.suburb-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}
.suburb-chip {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 20px;
  border: 1.5px solid var(--navy);
  background: rgba(26, 58, 92, 0.06);
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
  box-shadow: 0 1px 2px rgba(26, 58, 92, 0.08);
  -webkit-tap-highlight-color: transparent;
}
.suburb-chip:hover,
.suburb-chip:focus-visible {
  border-color: var(--navy);
  background: var(--navy);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(26, 58, 92, 0.22);
  outline: none;
}
.suburb-chip:active {
  transform: translateY(0);
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: #fff;
  box-shadow: 0 1px 2px rgba(26, 58, 92, 0.18) inset;
}
.suburb-chip.priority { font-weight: 800; }
.suburb-chip.priority:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.suburb-not-listed {
  background: var(--gray-light);
  border-radius: 8px;
  padding: 18px 24px;
  font-size: 15px;
  color: var(--body-text);
  text-align: center;
}
.suburb-not-listed a { color: var(--orange); font-weight: 700; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-section { background: var(--gray-light); padding: 72px 0; }
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(26, 58, 92, 0.08);
  box-shadow: 0 2px 6px rgba(13, 31, 46, 0.04);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item:hover {
  border-color: rgba(232, 160, 32, 0.35);
  box-shadow: 0 6px 18px rgba(13, 31, 46, 0.08);
}
.faq-item.open {
  border-color: rgba(232, 160, 32, 0.55);
  box-shadow: 0 12px 30px rgba(232, 160, 32, 0.14), 0 2px 6px rgba(13, 31, 46, 0.05);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  min-height: 68px;
  box-sizing: border-box;
  cursor: pointer;
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--navy);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  transition: color 0.25s ease;
  gap: 18px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-question:hover { color: var(--orange); }
.faq-item.open .faq-question { color: var(--orange); }
.faq-q-text {
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
}
.faq-question i {
  font-size: 10px;
  line-height: 1;
  color: var(--orange);
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(232, 160, 32, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease, color 0.3s ease;
}
.faq-item:hover .faq-question i { background: rgba(232, 160, 32, 0.18); }
.faq-item.open .faq-question i {
  transform: rotate(180deg);
  background: var(--orange);
  color: #fff;
  box-shadow: 0 4px 10px rgba(232, 160, 32, 0.4);
}

/* Use grid-template-rows 0fr → 1fr so the panel animates to its
   natural height — no more max-height clipping on mobile.
   overflow: hidden on the container + box-sizing: border-box on the <p>
   ensures the collapsed track is truly 0 height (padding can't inflate
   intrinsic min-content size). */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer-inner {
  overflow: hidden;
  min-height: 0;
}
.faq-answer-inner > p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--gray-text);
  font-size: 15px;
  line-height: 1.75;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer-inner > p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .faq-answer,
  .faq-answer-inner > p,
  .faq-question i { transition: none; }
}

/* ============================================================
   BOTTOM CTA BAR
   ============================================================ */
.bottom-cta-bar {
  background: var(--navy-dark);
  padding: 48px 0;
}
.bottom-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.bottom-cta-text h2 {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 6px;
  line-height: 1.3;
}
.bottom-cta-text p {
  color: rgba(255,255,255,0.65);
  font-size: 15px;
}
.bottom-cta-btn {
  background: var(--orange);
  color: #fff;
  padding: 18px 40px;
  border-radius: 6px;
  font-size: 20px;
  font-weight: 900;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s, transform 0.15s;
}
.bottom-cta-btn:hover { background: var(--orange-dark); transform: translateY(-2px); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy-deeper);
  padding: 60px 0 0;
  text-align: center;
}
.footer-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-bottom: 48px;
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer-logo img {
  height: 96px;
  width: auto;
  display: block;
  max-width: 100%;
}
.footer-tagline {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin: 0;
}
.footer-license {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.9;
}
.footer-license strong { color: rgba(255,255,255,0.75); font-weight: 700; }

.footer-hours {
  margin-top: 18px;
  padding: 22px 28px 20px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  width: 100%;
  max-width: 340px;
  text-align: left;
}
.footer-hours-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.footer-hours-title i { color: var(--orange); font-size: 14px; }
.footer-hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer-hours-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.footer-hours-list li:last-child { border-bottom: 0; }
.footer-hours-day {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  letter-spacing: 0.2px;
}
.footer-hours-time {
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.footer-hours-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--orange);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.2px;
}

.footer-col h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--orange); }
.footer-links a.view-all { color: var(--orange); font-weight: 700; }

.footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}
.footer-contact-row i { color: var(--orange); font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.footer-contact-row a { color: var(--orange); font-weight: 700; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { color: rgba(255,255,255,0.35); font-size: 13px; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a {
  color: rgba(255,255,255,0.35);
  font-size: 13px;
  transition: color 0.2s;
}
.footer-bottom-links a:hover { color: var(--orange); }

/* ============================================================
   FLOATING CALL BUTTON (mobile)
   ============================================================ */
.float-call {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--orange);
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 995;
  text-decoration: none;
  transition: transform 0.2s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.float-call:hover { transform: scale(1.1); }

/* ============================================================
   TAWK.TO CHAT PLACEHOLDER
   ============================================================ */
.chat-placeholder {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--navy);
  border-radius: 50px;
  padding: 12px 18px 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 995;
  cursor: pointer;
  border: 2px solid var(--orange);
  transition: transform 0.2s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.chat-placeholder:hover { transform: translateY(-2px); }
.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-info { display: flex; flex-direction: column; }
.chat-info strong { color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; }
.chat-info span { color: rgba(255,255,255,0.6); font-size: 11px; }
.chat-online {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #4ade80;
  font-size: 11px;
  font-weight: 600;
}
.online-dot {
  width: 7px;
  height: 7px;
  background: #4ade80;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================
   MESSAGE US — sticky pill + modal
   Replaces .float-call and .chat-placeholder as the primary
   contact CTA on all screen sizes.
   ============================================================ */
.msg-pill {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 996;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 11px;
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow:
    0 10px 26px rgba(232, 140, 32, 0.42),
    0 2px 6px rgba(13, 31, 46, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.msg-pill:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(232, 140, 32, 0.5),
    0 3px 8px rgba(13, 31, 46, 0.22);
}
.msg-pill:active { transform: translateY(0); }
.msg-pill-icons {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
}
.msg-pill-icons i + i { margin-left: 6px; }
.msg-pill-label { white-space: nowrap; }

/* Modal — full screen on all devices */
.msg-modal[hidden] { display: none; }
.msg-modal {
  position: fixed;
  inset: 0;
  z-index: 1100; /* above sticky header (1000) and mobile nav (997) */
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  height: 100vh;
  height: 100dvh;
}
.msg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(13, 31, 46, 0.55);
  animation: msgFadeIn 0.25s ease;
}
@keyframes msgFadeIn { from { opacity: 0; } to { opacity: 1; } }

.msg-sheet {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  animation: msgSlideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes msgSlideUp {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.msg-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--navy);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
  flex-shrink: 0;
}
.msg-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 40px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.msg-header-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.msg-header h3 {
  flex: 1;
  margin: 0;
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.1px;
  color: #fff;
  line-height: 1.3;
}
.msg-close {
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.msg-close:hover { background: rgba(255,255,255,0.22); }

.msg-body {
  flex: 1;
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .msg-body { padding: 36px 24px 32px; gap: 18px; }
  .msg-header { padding: 20px 28px; }
}
.msg-intro {
  margin: 0;
  color: var(--gray-text);
  font-size: 13.5px;
  line-height: 1.55;
}
.msg-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.msg-channel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  background: #fff;
  border: 1.5px solid var(--gray-mid);
  border-radius: 999px;
  color: var(--navy);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.msg-channel i { font-size: 15px; line-height: 1; }
.msg-channel[data-channel="whatsapp"] i { color: #25d366; }
.msg-channel[data-channel="sms"] i { color: var(--orange); }
.msg-channel:hover { border-color: var(--orange); }
.msg-channel.is-active {
  border-color: var(--orange);
  background: rgba(232,160,32,0.08);
  color: var(--orange);
  box-shadow: 0 2px 8px rgba(232,160,32,0.15);
}
.msg-channel[data-channel="whatsapp"].is-active {
  border-color: #25d366;
  background: rgba(37,211,102,0.09);
  color: #0e8f43;
}
.msg-channel[data-channel="whatsapp"].is-active i { color: #25d366; }

.msg-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg-field { display: flex; flex-direction: column; gap: 6px; }
.msg-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--navy);
}
.msg-field input,
.msg-field textarea {
  font-family: var(--font);
  font-size: 16px; /* 16px prevents iOS zoom on focus */
  padding: 11px 14px;
  border: 1.5px solid var(--gray-mid);
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}
.msg-field textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.msg-field input:focus,
.msg-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232,160,32,0.15);
}

.msg-submit {
  margin-top: 2px;
  padding: 13px 18px;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.msg-submit:hover { background: var(--orange-dark); transform: translateY(-1px); }
.msg-submit:active { transform: translateY(0); }
.msg-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.msg-submit i { font-size: 13px; }

.msg-disclaimer {
  margin: 2px 0 0;
  color: var(--gray-text);
  font-size: 11.5px;
  line-height: 1.5;
}

/* Hide legacy sticky contact elements — replaced by .msg-pill */
.float-call,
.chat-placeholder { display: none !important; }

/* On very small screens, keep the pill compact */
@media (max-width: 380px) {
  .msg-pill { padding: 10px 14px 10px 10px; font-size: 13.5px; gap: 8px; }
  .msg-pill-icons { padding: 5px 7px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .msg-backdrop, .msg-sheet { animation: none; }
  .msg-pill, .msg-submit, .msg-channel { transition: none; }
}

/* ============================================================
   INNER PAGE STYLES (for other pages)
   ============================================================ */
.page-hero {
  background: var(--navy);
  padding: 72px 0 56px;
  text-align: center;
}
.page-hero h1 { color: #fff; font-size: 44px; font-weight: 800; margin-bottom: 12px; }
.page-hero p { color: rgba(255,255,255,0.75); font-size: 18px; max-width: 560px; margin: 0 auto 20px; }
.page-hero-badge {
  color: var(--orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Trust strip (used on inner pages) */
.trust-strip { background: var(--navy-dark); padding: 0; }
.trust-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 28px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.trust-item:last-child { border-right: none; }
.trust-item-icon {
  width: 48px; height: 48px;
  background: var(--orange);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; flex-shrink: 0;
}
.trust-item-text strong { display: block; color: #fff; font-size: 15px; font-weight: 700; }
.trust-item-text span { color: rgba(255,255,255,0.6); font-size: 13px; }

/* Licensed section */
.licensed-section { background: #fff; }
.licensed-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.licensed-img { border-radius: 12px; overflow: hidden; position: relative; }
.licensed-img img { width: 100%; height: 420px; object-fit: cover; }
.licensed-badge {
  position: absolute;
  bottom: 24px; left: 24px;
  background: var(--orange);
  color: #fff;
  border-radius: 8px;
  padding: 14px 20px;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
}
.licensed-badge span { display: block; font-size: 28px; font-weight: 900; }
.licensed-content p { color: var(--gray-text); margin-bottom: 16px; line-height: 1.8; font-size: 15px; }
.check-list { margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--body-text); }
.check-list li i { color: var(--orange); font-size: 17px; flex-shrink: 0; }

/* Area cards */
.areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.area-card { border-radius: 10px; overflow: hidden; position: relative; height: 200px; cursor: pointer; text-decoration: none; }
.area-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.area-card:hover img { transform: scale(1.05); }
.area-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(26,58,92,0.85) 0%, rgba(26,58,92,0.2) 100%);
  display: flex; align-items: flex-end; padding: 20px;
}
.area-card-overlay h3 { color: #fff; font-size: 20px; font-weight: 800; }
.area-card-overlay span { display: block; color: var(--orange); font-size: 13px; font-weight: 600; margin-top: 4px; }

/* Services page */
.services-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.service-page-card { background: #fff; border-radius: 10px; border: 1.5px solid var(--gray-mid); overflow: hidden; transition: border-color 0.2s, transform 0.2s; text-decoration: none; display: block; }
.service-page-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.service-page-card-img { height: 180px; background: var(--navy); display: flex; align-items: center; justify-content: center; font-size: 52px; color: var(--orange); }
.service-page-card-body { padding: 24px; }
.service-page-card-body h3 { color: var(--navy); font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.service-page-card-body p { color: var(--gray-text); font-size: 14px; line-height: 1.7; margin-bottom: 16px; }
.service-learn-more { color: var(--orange); font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }

/* Areas page */
.areas-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.area-page-card { background: #fff; border-radius: 10px; border: 1.5px solid var(--gray-mid); overflow: hidden; text-decoration: none; transition: border-color 0.2s, transform 0.2s; display: block; }
.area-page-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.area-page-card-img { height: 180px; overflow: hidden; }
.area-page-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.area-page-card:hover .area-page-card-img img { transform: scale(1.05); }
.area-page-card-body { padding: 24px; }
.area-page-card-body h3 { color: var(--navy); font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.area-page-card-body p { color: var(--gray-text); font-size: 14px; }

/* Review cards (inner pages) */
.reviews-full-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }

/* Values grid */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
.value-card { background: #fff; border-radius: 10px; padding: 32px 24px; text-align: center; border: 1.5px solid var(--gray-mid); }
.value-icon { width: 64px; height: 64px; background: var(--orange); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; color: #fff; }
.value-card h3 { color: var(--navy); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.value-card p { color: var(--gray-text); font-size: 14px; line-height: 1.7; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact-offices { display: grid; gap: 24px; margin-top: 32px; }
.contact-office-card { background: #fff; border: 1.5px solid var(--gray-mid); border-radius: 10px; padding: 24px; }
.contact-office-card h3 { color: var(--navy); font-size: 16px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.contact-office-card h3 i { color: var(--orange); }
.contact-office-card p { color: var(--gray-text); font-size: 14px; line-height: 1.6; }
.contact-form-wrap { background: #fff; border-radius: 10px; border: 1.5px solid var(--gray-mid); overflow: hidden; }
.contact-form-header { background: var(--navy); padding: 24px 28px; }
.contact-form-header h2 { color: #fff; font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.contact-form-header p { color: rgba(255,255,255,0.7); font-size: 14px; }
.contact-form-body { padding: 28px; }

/* Service area strip */
.service-area-strip { background: var(--navy-dark); padding: 40px 0; }
.service-area-inner { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.service-area-label { color: var(--orange); font-weight: 800; font-size: 18px; white-space: nowrap; }
.service-area-cities { display: flex; gap: 16px; flex-wrap: wrap; }
.city-tag { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; transition: background 0.2s, color 0.2s; }
.city-tag:hover { background: var(--orange); color: #fff; }

/* Pre-footer CTA (inner pages) */
.pre-footer-cta { background: var(--navy); padding: 72px 0; text-align: center; }
.pre-footer-cta h2 { color: #fff; font-size: 38px; font-weight: 800; margin-bottom: 12px; }
.pre-footer-cta p { color: rgba(255,255,255,0.7); font-size: 18px; margin-bottom: 36px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Social */
.footer-socials { display: flex; gap: 10px; }
.social-btn { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.2s, color 0.2s; cursor: pointer; }
.social-btn:hover { background: var(--orange); color: #fff; }

/* Why choose */
.why-choose { background: var(--navy); }
.why-choose .section-title { color: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.why-item { display: flex; gap: 16px; align-items: flex-start; }
.why-icon { width: 52px; height: 52px; background: var(--orange); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; }
.why-text h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: #fff; }
.why-text p { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.7; }

/* ============================================================
   DESKTOP POLISH — proportional scale-up + bounce animation
   Applies only at true desktop widths (1025px+). Tablet (≤1024px)
   and mobile (≤768px) rules further down are intentionally left
   alone so neither view is affected by this block.
   ============================================================ */
@media (min-width: 1025px) {

  /* ---- Header ---- */
  .site-logo img { height: 112px; max-height: 112px; }
  .nav-inner { padding: 18px 28px; }
  .nav-link { font-size: 17px; padding: 30px 18px; }
  .nav-link i.fa-chevron-down { font-size: 12px; }
  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    padding: 14px 24px;
    border-radius: 8px;
    white-space: nowrap;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 12px -2px rgba(249, 115, 22, 0.35);
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  }
  .nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px rgba(249, 115, 22, 0.5);
  }
  .nav-cta i { font-size: 15px; }
  .dropdown { min-width: 260px; }
  .dropdown-link { font-size: 16px; padding: 14px 24px; }
  .dropdown-link.view-all { font-size: 15px; }

  /* ---- Hero ---- */
  .home-hero { padding: 100px 0 88px; }
  .hero-grid { gap: 56px; }
  .hero-left h1 {
    font-size: 78px;
    line-height: 1.0;
    margin-bottom: 22px;
    letter-spacing: -1.5px;
  }
  .hero-left h2 {
    font-size: 25px;
    margin-bottom: 40px;
    line-height: 1.5;
  }
  .hero-cta-group { gap: 18px; margin-bottom: 40px; }
  .hero-cta-group .btn-call {
    font-size: 28px;
    padding: 26px 48px;
    border-radius: 10px;
  }
  .hero-cta-group .btn-call i { font-size: 26px; }
  .hero-form-link { font-size: 17px; gap: 8px; }

  /* Hero photo — taller container so tool belt stays in frame */
  .hero-photo-wrap { border-radius: 16px; }
  .hero-photo-wrap img {
    height: 680px;
    object-fit: cover;
    object-position: center 30%;
  }

  /* Trust chips */
  .hero-trust-strip { gap: 14px; padding-top: 30px; }
  .trust-chip { padding: 10px 22px 10px 10px; gap: 12px; border-radius: 999px; }
  .trust-chip-icon { width: 34px; height: 34px; font-size: 14px; }
  .trust-chip-label { font-size: 13.5px; letter-spacing: 1.3px; }
  .trust-chip-label strong { letter-spacing: 1.1px; }


  /* ---- Reviews trust block (above Book a Call) ---- */
  .mobile-reviews-section { padding: 72px 0 40px; }
  .mobile-reviews-title { font-size: 44px; letter-spacing: -0.5px; }

  /* ---- Book a Call ---- */
  .booking-section { padding: 40px 0 88px; }
  .booking-inner { max-width: 760px; }
  .booking-inner h2 {
    font-size: 44px;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
  }
  .booking-inner p { font-size: 18px; margin-bottom: 36px; }
  .booking-form { padding: 44px; border-radius: 14px; }
  .form-grid-2 { gap: 20px; }
  .form-group { margin-bottom: 22px; }
  .form-group label { font-size: 15px; margin-bottom: 8px; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    padding: 17px 20px;
    font-size: 16.5px;
    border-radius: 8px;
  }
  .form-submit-btn {
    padding: 22px;
    font-size: 20px;
    border-radius: 8px;
    letter-spacing: 0.2px;
  }
  .form-privacy { font-size: 14px; margin-top: 16px; }

  /* ---- Message pill ---- */
  .msg-pill {
    font-size: 17px;
    padding: 14px 22px 14px 14px;
    gap: 12px;
    bottom: 28px;
    right: 28px;
  }
  .msg-pill-icons {
    font-size: 16px;
    padding: 8px 12px;
  }

  /* ---- How It Works — 4 steps with descriptions ---- */
  .how-it-works { padding: 96px 0; }
  .how-it-works .section-subtitle { font-size: 17px; margin-bottom: 56px; }

  .steps-grid { grid-template-columns: repeat(4, 1fr); }
  .step-card-extra { display: block; }
  .step-connector-3 { display: block; }

  .step-card { padding: 0 24px; }
  .step-icon-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--orange);
    font-size: 30px;
    margin: 0 auto 22px;
    box-shadow: 0 10px 28px -12px rgba(249, 115, 22, 0.55);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
  }
  .step-card:hover .step-icon-wrap {
    transform: translateY(-4px);
    background: var(--orange);
    color: #fff;
    box-shadow: 0 16px 36px -14px rgba(249, 115, 22, 0.75);
  }
  .step-card h3 {
    font-size: 20px;
    letter-spacing: 0.2px;
    margin-bottom: 10px;
  }
  .step-desc {
    display: block;
    font-size: 15px;
    line-height: 1.55;
    color: var(--gray-text);
    max-width: 240px;
    margin: 0 auto;
  }

  /* Connector bar aligned to new 72px icon radius, 4-column layout.
     Column centers sit at 12.5%, 37.5%, 62.5%, 87.5%. Connectors span
     from one icon's right edge (36px) to the next icon's left edge. */
  .step-connector { top: 36px; height: 2px; }
  .step-connector:nth-of-type(1) {
    left: calc(12.5% + 36px);
    width: calc(25% - 72px);
  }
  .step-connector:nth-of-type(2) {
    left: calc(37.5% + 36px);
    width: calc(25% - 72px);
  }
  .step-connector:nth-of-type(3) {
    left: calc(62.5% + 36px);
    width: calc(25% - 72px);
  }
}

/* ------------------------------------------------------------
   Phone icon bounce on the hero CTA.
   ~2s delay on load, then a quick double-hop every ~2.8s.
   Plays at tablet + desktop widths (≥769px) so the jingle does not
   disappear when the window is resized below the 1025px break.
   Respects prefers-reduced-motion.
   ------------------------------------------------------------ */
@keyframes phoneBounce {
  0%, 20%, 100% { transform: translateY(0); }
  27%          { transform: translateY(-8px); }
  34%          { transform: translateY(0); }
  41%          { transform: translateY(-6px); }
  48%          { transform: translateY(0); }
}
@media (min-width: 769px) {
  .hero-cta-group .btn-call i {
    display: inline-block;
    animation: phoneBounce 2.8s ease-in-out 2s infinite;
    transform-origin: center;
    will-change: transform;
  }
  .hero-cta-group .btn-call:hover i {
    animation-play-state: paused;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta-group .btn-call i { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Medium desktop (1025–1199px) ---------------------------------
   The full-fat desktop styles (≥1025px) assume there is plenty of
   horizontal room. On a half-width 1080-ish window things get tight
   and the header CTA can wrap to multiple lines. This range tones
   down logo/nav/CTA sizing so everything still fits on one row. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .site-logo img { height: 88px; max-height: 88px; }
  .nav-inner { padding: 14px 24px; }
  .main-nav { margin-left: 18px; gap: 0; }
  .nav-link { font-size: 15px; padding: 26px 11px; }
  .nav-cta {
    font-size: 14px;
    padding: 11px 18px;
    margin-left: 6px;
    box-shadow: 0 3px 10px -2px rgba(249, 115, 22, 0.32);
  }
  .nav-cta i { font-size: 13px; }

  /* Slightly smaller hero photo so the right column does not push
     the H1 around at this width. */
  .hero-photo-wrap img { height: 560px; }
  .hero-left h1 { font-size: 64px; }
}

/* --- Tablet / narrow desktop (≤1024px) ---------------------------
   IMPORTANT: hero stays 2-column down to 901px so the plumber photo
   sits next to the headline instead of dropping below it. The
   "Why call us first" cards are kept readable and centred (rather
   than stretched the full container width). The header is also
   compacted so the CTA never wraps. */
@media (max-width: 1024px) {
  /* --- Header: compact so the orange CTA fits on one line --- */
  .site-logo img { height: 64px; max-height: 64px; }
  .nav-inner { padding: 10px 24px; }
  .main-nav { margin-left: 16px; gap: 0; }
  .nav-link { font-size: 13.5px; padding: 22px 9px; }
  .nav-link i.fa-chevron-down { font-size: 9px; }
  .nav-cta {
    font-size: 13px;
    padding: 10px 16px;
    margin-left: 6px;
    letter-spacing: 0.1px;
  }
  .nav-cta i { font-size: 12px; }

  /* --- Hero: keep image adjacent to text, just smaller --- */
  .hero-grid { grid-template-columns: 1fr 40%; gap: 28px; }
  .hero-grid .hero-left { grid-column: 1; grid-row: 1; }
  .hero-grid .hero-right { grid-column: 2; grid-row: 1; }
  .hero-left h1 { font-size: 44px; }
  .hero-photo-wrap img { height: 440px; }

  /* --- Services / "Why call us first" --- */
  .services-tile-grid { grid-template-columns: repeat(3, 1fr); }
  .diff-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 720px;        /* keep cards readable, not full-bleed */
    margin-left: auto;
    margin-right: auto;
  }
  .diff-card { padding: 24px 22px 24px 18px; }

  /* --- Inner-page grids --- */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .licensed-inner { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: none; }
}

/* --- Small desktop / large tablet (≤900px) -----------------------
   Below this width, two-column hero starts to crush the photo. Stack
   the hero (text, then photo) but keep the photo a sensible size. */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-grid .hero-left { grid-column: 1; grid-row: 1; }
  .hero-grid .hero-right { grid-column: 1; grid-row: 2; }
  .hero-left h1 { font-size: 40px; }
  .hero-photo-wrap img { height: 380px; }
}

@media (max-width: 768px) {
  .topbar { display: none; }
  .main-nav { display: none; }
  .scrolled-cta { display: none !important; }
  .hamburger { display: flex; }
  .float-call { display: flex; }

  /* Center the logo; keep hamburger pinned to the right */
  .nav-inner {
    position: relative;
    justify-content: center;
  }
  .nav-inner .hamburger {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
  }

  .home-hero { padding: 28px 0 32px; }

  /* Mobile hero: image sits next to H1, rest of content spans full width below */
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 44%;
    column-gap: 10px;
    row-gap: 10px;
    align-items: stretch;
  }
  .hero-left { display: contents; }
  .hero-grid .hero-left h1 {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 4px 0;
  }
  .hero-grid .hero-left h1 br { display: none; }
  .hero-grid .hero-left h1 span { white-space: nowrap; }
  .hero-grid .hero-right { grid-column: 2; grid-row: 1; align-self: stretch; }
  .hero-grid .hero-left h2,
  .hero-grid .hero-cta-group,
  .hero-grid .hero-trust-strip { grid-column: 1 / -1; }

  .hero-left h1 { font-size: clamp(36px, 11vw, 56px); letter-spacing: -1px; line-height: 1.0; }
  .hero-left h2 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 17px;
    text-align: center;
  }
  .hero-grid .hero-cta-group {
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .hero-cta-group .btn-call {
    font-size: 18px;
    padding: 16px 32px;
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    align-self: center;
    justify-content: center;
  }
  .hero-cta-group .hero-form-link {
    align-self: center;
    justify-content: center;
  }
  .hero-trust-strip { gap: 8px; }
  .trust-chip { padding: 5px 12px 5px 5px; gap: 8px; }
  .trust-chip-icon { width: 22px; height: 22px; font-size: 10px; }
  .trust-chip-label { font-size: 10.5px; letter-spacing: 1.1px; }
  .trust-chip-label strong { letter-spacing: 0.9px; }

  .faq-section { padding: 56px 0; }
  .faq-list { gap: 10px; }
  .faq-item { border-radius: 12px; }
  .faq-question {
    padding: 14px 18px;
    min-height: 60px;
    font-size: 15px;
    gap: 14px;
    letter-spacing: -0.15px;
    line-height: 1.3;
  }
  .faq-question i { width: 24px; height: 24px; font-size: 9px; }
  .faq-answer-inner > p { padding: 0 18px 18px; font-size: 14.5px; line-height: 1.7; }

  /* Mobile: hide the big carousel reviews section (only the trust
     block below the hero is shown). */
  .reviews-section { display: none; }

  /* Mobile overrides for the Google reviews trust block — preserved
     to exactly match the previously-approved mobile design. */
  .mobile-reviews-section { padding: 36px 0 24px; }
  .mobile-reviews-title { font-size: 28px; margin: 0 0 10px; letter-spacing: -0.3px; }
  .mobile-reviews-subtitle { font-size: 14.5px; max-width: 380px; margin: 0 auto 18px; }
  .mobile-reviews-google-badge { gap: 14px; padding: 12px 20px; }
  .mobile-reviews-google-badge .badge-g { font-size: 22px; }
  .mobile-reviews-stars { font-size: 14px; }
  .mobile-reviews-count { font-size: 12px; margin-top: 3px; }

  .hero-photo-wrap { border-radius: 0; background: transparent; box-shadow: none; height: 100%; display: flex; align-items: center; }
  .hero-photo-wrap img {
    height: auto;
    width: 100%;
    max-height: 50vh;
    object-fit: contain;
    display: block;
  }
  .section-title { font-size: 26px; }
  .services-tile-grid { grid-template-columns: repeat(2, 1fr); }
  .how-it-works { padding: 40px 0; }
  .how-it-works .section-subtitle { margin-bottom: 20px; font-size: 14.5px; }
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .step-card { padding: 0 6px; }
  .step-icon-wrap { width: 32px; height: 32px; font-size: 18px; margin-bottom: 8px; }
  .step-connector { top: 16px; }
  .step-connector:nth-of-type(1) { left: calc(16.66% + 20px); width: calc(33.33% - 40px); }
  .step-connector:nth-of-type(2) { left: calc(50% + 20px);    width: calc(33.33% - 40px); }
  .step-connector::after { width: 5px; height: 5px; }
  .step-card h3 { font-size: 12px; letter-spacing: 0.3px; }
  .difference-section { padding: 56px 0; }
  .difference-header { margin-bottom: 32px; }
  .diff-cards { margin-bottom: 40px; }
  .diff-card h3 { font-size: 17px; }
  .diff-card p { font-size: 14.5px; }
  .diff-stats {
    grid-template-columns: repeat(3, 1fr);
    padding: 18px 0;
  }
  .diff-stat {
    border-right: 1px solid rgba(255,255,255,0.1);
    border-bottom: none;
    padding: 6px 8px;
  }
  .diff-stat:last-child { border-right: none; }
  .diff-stat-number { font-size: 22px; margin-bottom: 4px; }
  .diff-stat-label  { font-size: 11.5px; line-height: 1.35; letter-spacing: 0.1px; }
  .review-card { min-width: calc(100% - 0px); }
  .reviews-full-grid { grid-template-columns: 1fr; }
  .areas-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .services-page-grid { grid-template-columns: 1fr; }
  .areas-page-grid { grid-template-columns: 1fr; }
  .bottom-cta-inner { flex-direction: column; text-align: center; }
  .bottom-cta-btn { justify-content: center; }
  .booking-form { padding: 24px 16px; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .trust-strip-inner { grid-template-columns: 1fr; }
  .trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .why-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .chat-placeholder { display: none; }
}

@media (max-width: 480px) {
  .services-tile-grid { grid-template-columns: 1fr; }
  .hero-trust-strip { gap: 6px; justify-content: flex-start; }
}

/* ============================================================
   SECTION HEADING CONSISTENCY (tablet + desktop)
   "Book a Call" and "Our Happy Customers" previously shipped at
   28px by default and 44px only at ≥1025px, while "How It Works"
   and "Why homeowners…" used .section-title at 34px. That made the
   first pair look smaller on narrow desktop and larger on full
   desktop. Pin them all to the .section-title scale from 769px up
   so every section heading reads at the same visual weight.
   Mobile (≤768px) keeps its intentionally smaller 26px headings.
   This rule sits AFTER the desktop overrides above so it wins the
   cascade by source order. Specific margins (e.g. the 10px gap
   under "Book a Call") are preserved because this block only sets
   font-size / weight / colour / spacing — not margins.
   ============================================================ */
@media (min-width: 769px) {
  .booking-inner h2,
  .mobile-reviews-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -0.3px;
    line-height: 1.2;
  }
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb-wrap {
  background: var(--navy-dark);
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  flex-wrap: wrap;
}
.breadcrumb-list li { display: flex; align-items: center; gap: 8px; }
.breadcrumb-list a { color: rgba(255,255,255,0.55); font-size: 13px; transition: color 0.2s; }
.breadcrumb-list a:hover { color: var(--orange); }
.breadcrumb-list i { color: rgba(255,255,255,0.3); font-size: 10px; }
.breadcrumb-list [aria-current="page"] { color: var(--orange); font-size: 13px; font-weight: 600; }

/* ============================================================
   SERVICE PAGE — SUB-SERVICES SECTION
   ============================================================ */
.sub-services-section { padding: 72px 0; background: #fff; }
.sub-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.sub-service-item {
  padding: 28px 24px;
  border-radius: 8px;
  border: 1.5px solid var(--gray-mid);
  transition: border-color 0.2s;
}
.sub-service-item:hover { border-color: var(--orange); }
.sub-service-item h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sub-service-item h3 i { color: var(--orange); font-size: 16px; }
.sub-service-item p { color: var(--gray-text); font-size: 14px; line-height: 1.75; }

/* ============================================================
   SERVICE PAGE — WHY CHOOSE (2-col text + photo)
   ============================================================ */
.why-choose-service {
  background: var(--gray-light);
  padding: 72px 0;
}
.why-choose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.why-choose-grid h2 { font-size: 28px; font-weight: 800; color: var(--navy); margin-bottom: 28px; }
.why-point {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.why-point-icon {
  width: 40px; height: 40px;
  background: var(--orange);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff; flex-shrink: 0;
}
.why-point-text strong { display: block; color: var(--navy); font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.why-point-text span { color: var(--gray-text); font-size: 14px; line-height: 1.6; }
.why-choose-photo { border-radius: 12px; overflow: hidden; }
.why-choose-photo img { width: 100%; height: 380px; object-fit: cover; }

/* ============================================================
   SERVICE PAGE — PRICING SECTION
   ============================================================ */
.pricing-section { background: #fff; padding: 56px 0; }
.pricing-box {
  background: rgba(91,184,255,0.07);
  border: 2px solid var(--blue-accent);
  border-radius: 10px;
  padding: 36px 40px;
  max-width: 800px;
  margin: 0 auto;
}
.pricing-box h2 { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 14px; }
.pricing-box p { color: var(--gray-text); font-size: 15px; line-height: 1.8; }
.pricing-box a { color: var(--orange); font-weight: 700; }

/* ============================================================
   SUBURB PAGE — HERO (compact, no image)
   ============================================================ */
.suburb-hero {
  background: var(--navy);
  padding: 56px 0 48px;
}
.suburb-hero h1 { font-size: 40px; font-weight: 900; color: #fff; margin-bottom: 12px; line-height: 1.1; }
.suburb-hero h2 { font-size: 18px; font-weight: 500; color: rgba(255,255,255,0.75); margin-bottom: 28px; line-height: 1.4; }

/* ============================================================
   SUBURB PAGE — INTRO
   ============================================================ */
.suburb-intro { background: #fff; padding: 56px 0; }
.suburb-intro-content { max-width: 820px; }
.suburb-intro-content p { color: var(--gray-text); font-size: 15px; line-height: 1.85; margin-bottom: 16px; }
.suburb-intro-content p:last-child { margin-bottom: 0; }

/* ============================================================
   SUBURB PAGE — SERVICES GRID (icon tiles, no photos)
   ============================================================ */
.suburb-services { background: var(--gray-light); padding: 56px 0; }
.suburb-services h2 { font-size: 24px; font-weight: 800; color: var(--navy); margin-bottom: 28px; }
.suburb-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.suburb-svc-card {
  background: #fff;
  border-radius: 8px;
  border: 1.5px solid var(--gray-mid);
  padding: 24px 20px;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: border-color 0.2s, transform 0.2s;
}
.suburb-svc-card:hover { border-color: var(--orange); transform: translateY(-3px); }
.suburb-svc-icon {
  width: 56px; height: 56px;
  background: var(--navy);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  font-size: 22px;
  color: var(--orange);
  transition: background 0.2s;
}
.suburb-svc-card:hover .suburb-svc-icon { background: var(--orange); color: #fff; }
.suburb-svc-card span { display: block; font-size: 14px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.suburb-svc-note { margin-top: 20px; font-size: 14px; color: var(--gray-text); }

/* ============================================================
   SUBURB PAGE — RESPONSE BOX
   ============================================================ */
.response-box {
  background: rgba(91,184,255,0.08);
  border: 2px solid var(--blue-accent);
  border-radius: 10px;
  padding: 28px 32px;
  margin-top: 48px;
}
.response-box h3 { font-size: 18px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.response-box p { color: var(--body-text); font-size: 15px; line-height: 1.75; }
.response-box .surrounding { color: var(--gray-text); font-size: 14px; margin-top: 10px; }
.response-box .surrounding a { color: var(--navy); font-weight: 600; transition: color 0.2s; }
.response-box .surrounding a:hover { color: var(--orange); }

/* ============================================================
   SUBURB PAGE — NEARBY SUBURBS
   ============================================================ */
.nearby-suburbs { background: #fff; padding: 56px 0; }
.nearby-suburbs h2 { font-size: 24px; font-weight: 800; color: var(--navy); margin-bottom: 20px; }

/* ============================================================
   ABOUT PAGE — HERO (two-column)
   ============================================================ */
.about-hero {
  background: var(--navy);
  padding: 64px 0 56px;
}
.about-hero-inner {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
.about-hero-left { display: flex; flex-direction: column; gap: 0; }
.about-hero-stats {
  display: flex;
  gap: 0;
  margin-top: 32px;
}
.about-stat {
  flex: 1;
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,0.2);
}
.about-stat:first-child { padding-left: 0; }
.about-stat:last-child { border-right: none; }
.about-stat-value { font-size: 28px; font-weight: 900; color: var(--orange); line-height: 1.1; }
.about-stat-label { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 4px; }
.about-hero-photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* Section accent labels (OUR STORY / OUR STANDARDS etc.) */
.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}

/* Orange pill badge (used in hero) */
.about-pill {
  display: inline-block;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 4px 14px;
  margin-bottom: 16px;
}

/* ============================================================
   ABOUT PAGE — STORY CARDS
   ============================================================ */
.story-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.story-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px;
  border-left-width: 4px;
}
.story-card.card-navy  { border-left-color: var(--navy); }
.story-card.card-orange { border-left-color: var(--orange); }
.story-card.card-blue  { border-left-color: #5bb8ff; }
.story-card.card-full  { grid-column: 1 / -1; }
.story-card h3 { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.story-card p  { font-size: 15px; line-height: 1.85; color: var(--gray-text); margin: 0; }

/* ============================================================
   ABOUT PAGE — STANDARDS (3-item visual)
   ============================================================ */
.standards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.standard-card {
  background: #fff;
  border: 1.5px solid var(--gray-mid);
  border-radius: 10px;
  padding: 28px;
}
.standard-icon {
  width: 48px; height: 48px;
  background: var(--navy);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--orange);
  margin-bottom: 16px;
}
.standard-card h3 { font-size: 17px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.standard-card p { color: var(--gray-text); font-size: 14px; line-height: 1.75; }
.standard-card a { color: var(--orange); font-weight: 700; text-decoration: underline; }

/* ============================================================
   ABOUT PAGE — COMMITMENT (4-item grid)
   ============================================================ */
.commitment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.commitment-item {
  background: rgba(232,160,32,0.06);
  border: 1.5px solid rgba(232,160,32,0.25);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.commitment-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  background: #fff5e6;
  border: 1.5px solid var(--orange);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--orange);
}
.commitment-text strong { display: block; color: var(--navy); font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.commitment-text span { color: var(--gray-text); font-size: 14px; line-height: 1.6; }

/* ============================================================
   ABOUT PAGE — CREDENTIALS STRIP (navy)
   ============================================================ */
.credentials-strip {
  background: var(--navy);
  padding: 32px 0;
}
.credentials-inner {
  display: flex;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 48px;
}
.credential-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 32px;
  border-right: 1px solid rgba(255,255,255,0.2);
}
.credential-item:first-child { padding-left: 0; }
.credential-item:last-child { border-right: none; }
.credential-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.credential-value {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-page { max-width: 680px; margin: 0 auto; padding: 64px 24px; }
.contact-page h1 { font-size: 38px; font-weight: 900; color: var(--navy); margin-bottom: 8px; }
.contact-page .contact-lead { color: var(--gray-text); font-size: 17px; margin-bottom: 36px; }
.contact-big-phone {
  display: block;
  background: var(--orange);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  text-align: center;
  padding: 22px;
  border-radius: 8px;
  margin-bottom: 10px;
  transition: background 0.2s;
}
.contact-big-phone:hover { background: var(--orange-dark); }
.contact-big-phone i { margin-right: 10px; }
.contact-tap-note { text-align: center; color: var(--gray-text); font-size: 13px; margin-bottom: 32px; }
.contact-or-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.contact-or-divider::before,
.contact-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gray-mid);
}
.contact-or-divider span {
  color: var(--gray-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}
.contact-response-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--gray-text);
  text-align: center;
  line-height: 1.7;
}
.contact-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
  background: var(--gray-light);
  border-radius: 10px;
  padding: 28px;
}
.contact-detail-row { font-size: 14px; color: var(--body-text); }
.contact-detail-row strong { display: block; color: var(--navy); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.contact-detail-row a { color: var(--orange); font-weight: 700; }

/* ============================================================
   ADDITIONAL RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .sub-services-grid { grid-template-columns: 1fr; }
  .why-choose-grid { grid-template-columns: 1fr; }
  .why-choose-photo { display: none; }
  .about-hero-inner { grid-template-columns: 1fr; }
  .about-hero-photo { aspect-ratio: 4/3; order: 2; }
  .about-hero-left { order: 1; }
  .about-stat { padding: 0 16px; }
  .story-cards { grid-template-columns: 1fr; }
  .story-card.card-full { grid-column: 1; }
  .standards-grid { grid-template-columns: 1fr; }
  .commitment-grid { grid-template-columns: 1fr; }
  .credentials-inner { flex-wrap: wrap; padding: 0 24px; gap: 20px; }
  .credential-item { border-right: none; padding: 0; flex: 0 0 calc(50% - 10px); }
  .suburb-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .credentials-inner { gap: 20px; }
  .contact-details-grid { grid-template-columns: 1fr; }
  .suburb-hero h1 { font-size: 28px; }
  .pricing-box { padding: 24px 20px; }
  .response-box { padding: 20px 20px; }
}
@media (max-width: 480px) {
  .suburb-svc-grid { grid-template-columns: 1fr 1fr; }
}