/* ═══════════════════════════════════════════════════════════════
   Aquatech Pressure Cleaning — Shared Site-Wide Stylesheet
   Used by every page on the site (service pages, home, reviews, etc.)
   Page-specific content lives in each page's HTML; this file only
   contains the shared layout/component/responsive system.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Poppins', sans-serif; color: #222; background: #fff; }

/* Buttons shouldn't have selectable/highlightable text — applies site-wide since every
   page shares this stylesheet. Covers native <button> elements plus every button-styled
   class used across the site (CTAs, form submits, nav toggles, quote-form pickers). */
button,
.btn-primary,
.btn-outline,
.btn-outline-light,
.form-submit,
.contact-form-submit,
.nav-toggle,
.nav-dropdown-toggle,
.mobile-nav-dropdown-toggle,
.quick-action-item,
.service-chip,
.pill-option {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ── HEADER ── */
.site-header-wrap {
  position: sticky;
  top: 0;
  z-index: 200;
}
header {
  background: #fff;
  padding: 12px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
  transition: background-color 0.3s ease;
}
header.header-scrolled {
  background: rgba(255,255,255,0.3);
}
header.menu-open {
  background: #fff !important;
}
header img.logo { height: 56px; width: auto; }
.site-nav { display: flex; gap: 26px; align-items: center; }
.site-nav a {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
  border-bottom: 2px solid transparent;
  padding: 6px 4px 4px;
}
.site-nav a:hover, .site-nav a.active { color: #34A5EB; }
.site-nav a:hover { border-bottom-color: #34A5EB; }
.site-nav-phone { display: inline-flex !important; align-items: center; gap: 6px; color: #34A5EB !important; font-weight: 700 !important; }
.site-nav .site-nav-phone { padding: 0 !important; border-bottom: none !important; }
.site-nav-phone svg { width: 15px; height: 15px; flex-shrink: 0; }
.site-nav-phone:hover { color: #6dc0f5 !important; }
.nav-toggle {
  display: none;
  background: none;
  border: 2px solid #34A5EB;
  color: #34A5EB;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.mobile-nav-panel {
  display: none;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}
.mobile-nav-panel.open { display: flex; }
.mobile-nav-panel a {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
}
.mobile-nav-panel a.active { color: #34A5EB; }

/* ── SERVICES NAV DROPDOWN (desktop: hover / mobile: click) ── */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-dropdown-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.14);
  padding: 10px 0;
  min-width: 240px;
  z-index: 50;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: none !important;
}
.nav-dropdown-menu a:hover { color: #34A5EB; background: #f5f7fa; }
.nav-dropdown-menu a.nav-dropdown-viewall {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid #eee;
  color: #34A5EB;
}

.mobile-nav-dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 14px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}
.mobile-nav-dropdown-toggle span { pointer-events: none; }
.mobile-nav-dropdown-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.mobile-nav-dropdown-toggle.active { color: #34A5EB; }
.mobile-nav-dropdown-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-nav-dropdown-menu {
  display: none;
  flex-direction: column;
  background: #f9fafb;
}
.mobile-nav-dropdown-menu.open { display: flex; }
.mobile-nav-dropdown-menu a {
  padding: 12px 20px 12px 32px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
}
.mobile-nav-dropdown-menu a.nav-dropdown-viewall { color: #34A5EB; }

.btn-primary {
  background: #34A5EB;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
}
.btn-primary:hover { background: #1e8fd4; }
.btn-outline {
  background: #34A5EB;
  color: #fff;
  border: 2px solid #34A5EB;
  border-radius: 12px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s;
}
.btn-outline:hover { background: #1e8fd4; border-color: #1e8fd4; }

/* ── BREADCRUMB (overlaid on hero image) ── */
.breadcrumb-hero {
  max-width: 560px;
  margin-left: 0;
  margin-right: auto;
  margin-bottom: 26px;
  text-align: left;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}
.breadcrumb-hero a { color: rgba(255,255,255,0.6); text-decoration: none; }
.breadcrumb-hero a:hover { color: #fff; }
.breadcrumb-hero span[aria-current] { color: #fff; font-weight: 600; }

/* ── HERO ──
   Note: .hero background-image is page-specific and must be set via an
   inline <style> override or inline style="" on each page (see SKILL notes). */
.hero {
  min-height: 380px;
  display: flex;
  align-items: flex-start;
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 40px 60px;
}
.hero-text { color: #fff; max-width: 560px; margin-right: auto; text-align: left; }
.hero-badge { justify-content: flex-start; }
.hero-btns { display: flex; justify-content: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-locations {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  font-weight: 500;
  transform: scale(0.75);
  transform-origin: left top;
}
.hero-locations-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  flex-shrink: 0;
}
.hero-locations-icon svg { width: 14px; height: 14px; }
.hero-locations-text { white-space: nowrap; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #262624;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.hero-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
.hero-badge-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #34A5EB;
}
.hero-text h1 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero-text p {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.5;
  opacity: 0.95;
  margin-bottom: 24px;
}

/* ── HERO: centered variant (used on pages without a breadcrumb, e.g. Services.html) ── */
.hero-center .hero-text { max-width: 640px; margin: 0 auto; text-align: center; }
.hero-center .hero-badge { justify-content: center; }
.hero-center .hero-btns { justify-content: center; }
.hero-center .hero-locations { justify-content: center; margin: 0 auto; transform-origin: center top; }
.hero-center .final-cta-badges { justify-content: center; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 20px 28px; color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600; }
.trust-badges span { display: inline-flex; align-items: center; gap: 7px; }
.trust-badges svg { width: 15px; height: 15px; flex-shrink: 0; color: #6dc4ff; }
.hero-center .trust-badges { justify-content: center; }

/* ── SECTION BASE ── */
section { padding: 70px 40px; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-label {
  font-size: 14px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.section-title {
  font-size: 36px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.2;
  margin-bottom: 40px;
}
.section-title.center { text-align: center; }

/* ── REVIEWS ── */
.reviews-section { background: #f5f7fa; padding-top: 40px; }
#reviews-carousel { overflow: hidden; }
.reviews-grid {
  display: flex;
  gap: 20px;
  will-change: transform;
}
.review-card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.review-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.review-name { font-weight: 700; font-size: 14px; color: #222; }
.review-date { font-size: 12px; color: #999; }
.review-stars { color: #f5a623; font-size: 14px; }
.review-text { font-size: 13px; color: #444; line-height: 1.6; }
.review-location { font-size: 12px; color: #999; margin-top: auto; padding-top: 10px; }
.reviews-badges-bottom { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.mini-badge {
  display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #dadce0;
  border-radius: 999px; padding: 5px 12px; font-size: 11px; font-weight: 600; color: #444;
}
#review-prev { left: -20px; }
#review-next { right: -20px; }
.review-dots { display: none; justify-content: center; gap: 7px; margin-top: 14px; }
.review-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; transition: background 0.25s, transform 0.25s; display: inline-block; cursor: pointer; }
.review-dot.active { background: #34A5EB; transform: scale(1.25); }

/* ── SERVICES (full grid, links to other pages) ── */
.services-section { background: #fff; }
.services-section .section-title { text-align: center; }
.services-full-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service-card-full {
  background: #34A5EB;
  border-radius: 12px;
  padding: 22px 22px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
}
.service-card-full:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.25); }
.service-card-full-icon { width: 18px; height: 18px; margin-bottom: 10px; }
.service-card-full-icon svg { width: 100%; height: 100%; }
.service-card-full h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.service-card-full p { color: rgba(255,255,255,0.9); font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; flex: 1; }
.service-card-full .learn-more {
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}
.service-card-full:hover .learn-more { text-decoration: underline; }

/* ── SERVICES (rich directory cards — Services.html only) ── */
.services-rich-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card-rich {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 26px 24px 22px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
}
.service-card-rich:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); border-color: #c7e3fa; }
.service-card-rich-icon {
  width: 48px; height: 48px; border-radius: 12px; background: #34A5EB;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; flex-shrink: 0;
}
.service-card-rich-icon svg { width: 24px; height: 24px; }
.service-card-rich h3 { font-size: 19px; font-weight: 800; color: #1a1a2e; margin-bottom: 8px; }
.service-card-rich-desc { font-size: 13.5px; color: #666; line-height: 1.5; margin-bottom: 16px; }
.service-card-rich-list { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; }
.service-card-rich-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #333; font-weight: 500; line-height: 1.4; }
.service-card-rich-list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.service-card-rich .learn-more {
  margin-top: auto; color: #34A5EB; font-weight: 700; font-size: 13.5px;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.service-card-rich:hover .learn-more { text-decoration: underline; }

/* ── BENEFITS ── */
.benefits-section { background: #fff; }
.benefits-title { font-size: 28px; font-weight: 800; color: #1a1a2e; margin-bottom: 8px; }
.benefits-sub { font-size: 15px; color: #666; margin-bottom: 30px; }
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 36px;
}
.benefit-item { display: flex; align-items: center; gap: 14px; }
.benefit-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.benefit-item span { font-size: 15px; font-weight: 600; color: #222; }
.why-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 12px;
  padding: 20px 0 0;
  border-top: 1px solid #eee;
}
.why-badge {
  width: 162px;
  text-align: center;
  background: #f7fafc;
  border: 1px solid #e7edf3;
  border-radius: 12px;
  padding: 12px 8px;
  box-sizing: border-box;
}
.why-badge-label { white-space: nowrap; }
.why-badge-label { font-size: 16px; font-weight: 800; color: #1a1a2e; }
.why-badge-sub { font-size: 12px; color: #777; margin-top: 2px; }
.about-checklist {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.about-checklist li {
  display: flex; align-items: center; gap: 12px;
  background: #f7f9fc; border: 1px solid #eee; border-radius: 12px;
  padding: 16px;
}
.about-checklist svg { width: 22px; height: 22px; flex-shrink: 0; }
.about-checklist span { font-size: 14.5px; font-weight: 600; color: #222; line-height: 1.3; }

/* ── STEPS ── */
.steps-section { background: #262624; position: relative; }
.steps-section .section-inner { position: relative; z-index: 1; }
.steps-label { color: #6dc4ff; font-size: 13px; font-weight: 700; text-align: center; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 10px; }
.steps-title { color: #fff; font-size: 38px; font-weight: 800; text-align: center; margin-bottom: 28px; }
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.step-card { text-align: center; color: #fff; position: relative; height: 100%; display: flex; flex-direction: column; }
.step-card:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 42px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, rgba(255,255,255,0.4), rgba(255,255,255,0.05));
  z-index: -1;
}
.step-num-wrap { display: flex; justify-content: center; margin-bottom: 20px; }
.step-num {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, #34A5EB, #1e8fd4);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800; color: #fff;
  box-shadow: 0 8px 24px rgba(52,165,235,0.4);
}
.step-card-body {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 22px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.step-card p { font-size: 14px; opacity: 0.85; line-height: 1.6; }

/* ── PROJECTS / CAROUSEL ── */
.projects-section { background: #fff; }
.carousel-outer { position: relative; margin-bottom: 12px; }
#proj-carousel { overflow: hidden; }
#proj-track { display: flex; will-change: transform; }
.proj-slide { flex-shrink: 0; position: relative; overflow: hidden; border-radius: 8px; box-sizing: border-box; padding: 0 7px; }
.proj-slide img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; display: block; border-radius: 6px; cursor: pointer; }
.proj-slide .ba-line { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3px; height: 100%; background: #00d4ff; z-index: 2; pointer-events: none; }

/* ── LIGHTBOX ── */
.lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 2000; align-items: center; justify-content: center; }
.lightbox-overlay.active { display: flex; }
.lightbox-img { max-width: 88vw; max-height: 85vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 50px rgba(0,0,0,0.5); }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(255,255,255,0.12); border: none; color: #fff;
  cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: background 0.2s;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-close { top: 20px; right: 24px; width: 48px; height: 48px; font-size: 30px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; font-size: 40px; }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.52); color: #fff; border: none; border-radius: 50%;
  width: 48px; height: 48px; font-size: 28px; line-height: 1; cursor: pointer; z-index: 10;
  display: flex; align-items: center; justify-content: center; transition: background 0.2s, opacity 0.2s;
}
.carousel-btn:hover { background: #34A5EB; }
.carousel-outer .carousel-btn { opacity: 0; pointer-events: none; }
.carousel-outer:hover .carousel-btn { opacity: 1; pointer-events: auto; }
#proj-prev { left: -20px; }
#proj-next { right: -20px; }
.proj-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; margin-bottom: 4px; }
.proj-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; transition: background 0.25s, transform 0.25s; display: inline-block; cursor: pointer; }
.proj-dot.active { background: #34A5EB; transform: scale(1.3); }


/* ── FINAL CTA ── */
.final-cta-section { background: #262624; text-align: center; }
.final-cta-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #6dc4ff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  padding: 6px 16px; border-radius: 999px; margin-bottom: 18px;
}
.final-cta-title { color: #fff; font-size: 40px; font-weight: 800; margin-bottom: 14px; line-height: 1.2; }
.final-cta-sub { color: rgba(255,255,255,0.8); font-size: 17px; margin-bottom: 30px; }
.final-cta-btns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 34px; }
.btn-outline-light {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.4); border-radius: 12px;
  padding: 10px 22px; font-size: 15px; font-weight: 600; font-family: 'Poppins', sans-serif;
  text-decoration: none; display: inline-block; transition: all 0.2s;
}
.btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.final-cta-badges { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 600; }

/* ── FAQ ── */
.faq-section { background: #f5f7fa; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; align-items: start; }
.faq-item {
  background: #fff; border-radius: 10px; padding: 24px 24px 24px 20px; border-left: 4px solid #34A5EB;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); cursor: pointer;
}
.faq-item summary {
  font-size: 16px; font-weight: 700; color: #1a1a2e; line-height: 1.35; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex-shrink: 0; font-size: 22px; font-weight: 700; color: #34A5EB; transition: transform 0.25s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { font-size: 14px; color: #555; line-height: 1.75; margin: 12px 0 0; }

/* ── CONTACT PAGE ── */

.quick-info-section { background: #fff; padding-top: 18px; padding-bottom: 12px; }
.quick-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.quick-info-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 16px 12px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.quick-info-icon {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(52,165,235,0.1); color: #34A5EB;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 8px;
}
.quick-info-icon svg { width: 16px; height: 16px; }
.quick-info-card h4 { font-size: 10.5px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.quick-info-card .quick-info-value { font-size: 13px; font-weight: 700; color: #1a1a2e; text-decoration: none; display: block; margin-bottom: 2px; line-height: 1.3; }
.quick-info-card .quick-info-value:hover { color: #34A5EB; }
.quick-info-card .quick-info-sub { font-size: 11px; color: #999; line-height: 1.3; }

.contact-section { background: #f5f7fa; }
.contact-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: start; }
.contact-card { background: #fff; border-radius: 16px; padding: 36px; box-shadow: 0 8px 30px rgba(0,0,0,0.06); }
.contact-card h3 { font-size: 19px; font-weight: 800; color: #1a1a2e; margin-bottom: 4px; }
.contact-card .contact-card-sub { font-size: 13.5px; color: #888; margin-bottom: 22px; }

.contact-form-card label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 4px; }
.contact-form-card label:not(.service-chip) svg { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; color: #34A5EB; }
/* Vertical rhythm between field groups (a standalone label+input, or a .form-row pair) is
   driven by "gap" on this wrapper instead of margin-top on individual labels. Gap only cares
   about direct children, so it doesn't matter how deeply a label is nested inside one of
   them — this is what makes it immune to the old ":first-of-type per-parent" bug, where a
   field wrapped in its own <div> inside a .form-row could get silently mistaken for "first"
   and lose its spacing. Every field (bare or paired) just needs to be one direct child of
   this wrapper; internal label-to-input spacing still comes from the label's margin-bottom. */
.contact-form-card .field-stack { display: flex; flex-direction: column; gap: 16px; }
.required-mark,
.contact-form-card .required-mark { color: #e04b4b; font-weight: 700; }
.contact-form-card input, .contact-form-card textarea, .contact-form-card select {
  width: 100%; border: 1.5px solid #dbe6f0; border-radius: 8px; padding: 11px 13px; font-size: 14px;
  font-family: 'Poppins', sans-serif; background: #fafcff; color: #333; outline: none; transition: border-color 0.2s;
  box-sizing: border-box;
}
.contact-form-card select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334A5EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.contact-form-card input:focus, .contact-form-card textarea:focus, .contact-form-card select:focus { border-color: #34A5EB; background-color: #fff; }
.contact-form-card textarea { height: 120px; resize: vertical; }
.contact-form-card .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* SMS/10DLC opt-in checkbox — used on any form that collects a phone number.
   Scoped as ".contact-form-card .sms-consent-check ..." (2+ classes) so it
   reliably beats the generic ".contact-form-card label"/"input" rules above,
   regardless of where in the cascade it's declared. Input and its <label>
   are siblings (not nested) on purpose: nesting a <label> around an <input>
   AND clickable <a> links inside it causes clicking a link to also toggle
   the checkbox in most browsers. */
.sms-consent-check { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; }
/* Inside a .field-stack the surrounding "gap" already provides the space above this, so no
   margin of its own is needed there (avoids doubling up on top of the 16px gap). */
.contact-form-card .field-stack .sms-consent-check { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.sms-consent-check input[type="checkbox"],
.contact-form-card .sms-consent-check input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 16px; margin: 2px 0 0; padding: 0; flex-shrink: 0;
  accent-color: #34A5EB; cursor: pointer; border-radius: 4px;
}
.sms-consent-check label,
.contact-form-card .sms-consent-check label {
  display: block; font-size: 12px; font-weight: 400; line-height: 1.5; color: #777; cursor: pointer; margin: 0;
}
.sms-consent-check label a,
.contact-form-card .sms-consent-check label a { color: #1e8fd4; text-decoration: underline; }

.contact-form-submit { margin-top: 24px; width: 100%; padding: 15px; font-size: 16px; font-weight: 700; border-radius: 10px; }
.contact-form-note { text-align: center; font-size: 12px; color: #888; margin-top: 14px; }

/* Sidebar: quick actions, hours, social */
.contact-sidebar { display: flex; flex-direction: column; gap: 20px; }
.contact-sidebar .contact-card { padding: 26px; }
.quick-action-item {
  display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; margin-bottom: 10px;
  text-decoration: none; border: 1.5px solid #eef2f6; transition: border-color 0.2s, background 0.2s;
}
.quick-action-item:last-child { margin-bottom: 0; }
.quick-action-item:hover { border-color: #a9d3f5; background: #fafcff; }
.quick-action-icon {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(52,165,235,0.1); color: #34A5EB;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.quick-action-icon svg { width: 18px; height: 18px; }
.quick-action-item h5 { font-size: 14px; font-weight: 700; color: #1a1a2e; margin-bottom: 1px; }
.quick-action-item span { font-size: 12px; color: #888; }
.hours-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: #444; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.hours-row:last-child { border-bottom: none; }
.hours-row span:first-child { font-weight: 600; color: #1a1a2e; }

/* ── FOOTER ── */
footer { background: #fff; color: #222; padding: 56px 40px 24px; border-top: 1px solid #eee; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-logo-row img { height: 40px; width: auto; }
.footer-brand-name { font-size: 16px; font-weight: 700; color: #1a1a2e; line-height: 1.3; }
.footer-brand-tag { display: block; font-size: 12px; color: #888; font-weight: 500; margin-top: 2px; }
.footer-desc { font-size: 13px; color: #666; line-height: 1.7; margin: 0 0 18px; }
.footer-col h4 { font-size: 14px; font-weight: 700; margin-bottom: 16px; color: #1a1a2e; text-transform: uppercase; letter-spacing: 0.3px; }
.footer-col p { font-size: 13px; color: #666; line-height: 1.7; margin-bottom: 6px; }
.footer-col a { display: block; font-size: 13px; color: #666; text-decoration: none; margin-bottom: 10px; }
.footer-col a:hover { color: #34A5EB; }
.footer-contact-item { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-contact-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; background: rgba(52,165,235,0.1); border-radius: 8px; color: #34A5EB; }
.footer-contact-icon svg { width: 15px; height: 15px; }
.footer-hours-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #666; margin-bottom: 8px; }
.footer-hours-row span:first-child { color: #444; font-weight: 600; }
.footer-social-title { font-size: 12px; font-weight: 700; color: #1a1a2e; text-transform: uppercase; letter-spacing: 0.3px; margin: 18px 0 10px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { display: inline-flex; }
.footer-bottom {
  max-width: 1200px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid #eee;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #999;
}
.footer-bottom a { color: #999; text-decoration: none; }
.footer-bottom a:hover { color: #34A5EB; }

/* ── RESPONSIVE: TABLET ── */
@media (max-width: 900px) {
  .hero { background-image: url('https://aquatech-pressurecleaning.com/images/bg_3.jpg'); min-height: auto; }

  header { padding: 10px 16px; gap: 10px; }
  header img.logo { height: 46px; }
  .site-nav { display: none; }
  .nav-toggle { display: flex; }

  .hero-inner { padding: 16px 20px 32px; }
  .hero-text { max-width: 100%; margin-right: auto; text-align: left; }
  .hero-text h1 { font-size: 32px; }
  .hero-text p { font-size: 17px; }
  .hero-badge { justify-content: flex-start; }
  .hero-btns { justify-content: flex-start; }
  .breadcrumb-hero { max-width: 100%; margin: 0 0 16px; text-align: left; }

  section { padding: 50px 20px; }
  .section-title { font-size: 28px; }

  .services-full-grid { gap: 14px; }
  .service-card-full { padding: 16px 14px 14px; border-radius: 10px; }
  .service-card-full h3 { font-size: 15px; margin-bottom: 8px; }
  .service-card-full p { font-size: 12px; line-height: 1.5; margin-bottom: 10px; }
  .service-card-full .learn-more { font-size: 12px; }

  .services-rich-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .service-card-rich { padding: 20px 18px 18px; }
  .service-card-rich h3 { font-size: 17px; }

  .benefits-grid { grid-template-columns: 1fr; }
  .about-checklist { grid-template-columns: 1fr; }
  .benefits-title { font-size: 22px; }

  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .steps-title { font-size: 31px; }
  .step-num { width: 60px; height: 60px; font-size: 24px; }
  .step-num-wrap { margin-bottom: 12px; }
  .step-card-body { padding: 16px 12px; }
  .step-card h3 { font-size: 15px; margin-bottom: 8px; }
  .step-card p { font-size: 12px; }
  .step-card::after { display: none; }

  .final-cta-title { font-size: 30px; }

  .proj-slide img { height: auto; }
  .carousel-btn { width: 38px; height: 38px; font-size: 22px; }
  #proj-prev { left: 4px; }
  #proj-next { right: 4px; }

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

  .quick-info-section { padding-top: 14px; padding-bottom: 8px; }
  .quick-info-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .quick-info-card { padding: 14px 10px; }

  .contact-layout { grid-template-columns: 1fr; gap: 20px; }
  .contact-card { padding: 26px 22px; }
  .contact-form-card .form-row { grid-template-columns: 1fr; }
  .contact-sidebar { flex-direction: row; flex-wrap: wrap; }
  .contact-sidebar .contact-card { flex: 1 1 260px; }

  .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ── RESPONSIVE: MOBILE ── */
@media (max-width: 480px) {
  header { justify-content: space-between; padding: 8px 16px; gap: 8px; }
  header img.logo { height: 50px; }

  .hero-inner { padding: 8px 16px 24px; }
  .hero-text h1 { font-size: 26px; }
  .hero-text p { font-size: 15px; }

  section { padding: 40px 16px; }
  .section-title { font-size: 22px; }
  .section-label { font-size: 12px; }
  .breadcrumb-hero { max-width: 100%; margin: 0 0 16px; text-align: left; }

  .why-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; justify-content: unset; }
  .why-badge { width: auto; }

  /* Reviews — swipeable carousel on mobile */
  .review-dots { display: flex; }
  .reviews-grid {
    flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 14px; padding-bottom: 12px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .reviews-grid::-webkit-scrollbar { display: none; }
  .review-card { flex: 0 0 85% !important; width: auto !important; scroll-snap-align: start; padding: 16px; }

  .steps-title { font-size: 26px; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .step-num { width: 52px; height: 52px; font-size: 20px; }
  .step-num-wrap { margin-bottom: 10px; }
  .step-card-body { padding: 14px 10px; }
  .step-card h3 { font-size: 13px; margin-bottom: 6px; }
  .step-card p { font-size: 11px; line-height: 1.4; }

  .projects-section { padding-left: 0; padding-right: 0; padding-top: 24px; padding-bottom: 24px; }
  .projects-section .section-inner { padding: 0 10px; max-width: 100%; box-sizing: border-box; }
  .proj-slide img { height: auto; aspect-ratio: 4/3; border-radius: 14px; }
  .carousel-outer { margin-bottom: 8px; width: 100%; }
  .carousel-btn { display: none; }
  #proj-carousel { overflow-x: scroll; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; display: flex; }
  #proj-carousel::-webkit-scrollbar { display: none; }
  #proj-track { transform: none !important; transition: none !important; display: contents; }
  .proj-slide { flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; padding: 0 !important; border-radius: 0; scroll-snap-align: start; }

  .services-full-grid { gap: 8px; }
  .service-card-full { padding: 14px 10px 12px; border-radius: 8px; }
  .service-card-full-icon { margin-bottom: 4px; }
  .service-card-full h3 { font-size: 13px; line-height: 1.3; margin-bottom: 0; }
  .service-card-full p { display: none; }
  .service-card-full .learn-more { font-size: 10px; gap: 3px; padding-top: 10px; }

  .services-rich-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-card-rich { padding: 18px 16px 16px; }

  .quick-info-section { padding-top: 10px; padding-bottom: 6px; }
  .quick-info-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick-info-card { padding: 12px 8px; }
  .quick-info-icon { width: 30px; height: 30px; margin-bottom: 6px; }
  .quick-info-icon svg { width: 14px; height: 14px; }
  .quick-info-card .quick-info-value { font-size: 12px; }
  .quick-info-card .quick-info-sub { font-size: 10px; }

  /* Single column on phones — at 2-up, columns like "Services" (7 links, some multi-word)
     only get half the screen width and wrap to two lines per link, which makes that row
     much taller than its neighbor and inflates the whole footer's height. Full width lets
     every link sit on one line, so the footer actually ends up shorter overall. */
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: auto; }
}

/* ── WHY CHOOSE US (Contact page) ── */
.why-choose-section { background: #262624; padding: 50px 40px; }
.why-choose-label { color: #6dc4ff; font-size: 13px; font-weight: 700; text-align: center; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 10px; }
.why-choose-header { text-align: center; max-width: 560px; margin: 0 auto 32px; }
.why-choose-header h2 { font-size: 30px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.why-choose-header p { font-size: 14px; color: rgba(255,255,255,0.7); }
.why-choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-choose-card { text-align: center; padding: 24px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; }
.why-choose-icon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #6dc4ff; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.why-choose-icon svg { width: 24px; height: 24px; }
.why-choose-card h4 { font-size: 14.5px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.why-choose-card p { font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.4; }
@media (max-width: 900px) {
  .why-choose-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
}
@media (max-width: 480px) {
  .why-choose-section { padding: 36px 20px; }
  .why-choose-header h2 { font-size: 21px; }

  .contact-card { padding: 20px 16px; }
  .contact-sidebar { flex-direction: column; }
  .contact-sidebar .contact-card { flex: none; }

}