/* ============================================
   Straight Away Plumbing - Global Styles
   Palette from logo: dark navy, cyan/aqua, white
   ============================================ */

:root {
  --navy-900: #081120;
  --navy-800: #0b1a2e;
  --navy-700: #10233d;
  --navy-600: #16304f;
  --cyan-500: #35c3e8;
  --cyan-400: #4fd8f7;
  --cyan-300: #7ce4fb;
  --blue-600: #1e88e5;
  --blue-700: #1565c0;
  --white: #ffffff;
  --off-white: #f4f8fb;
  --grey-100: #e8eef4;
  --grey-600: #55637a;
  --text-dark: #142236;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(8, 17, 32, 0.10);
  --shadow-lg: 0 18px 50px rgba(8, 17, 32, 0.18);
  --grad-cyan: linear-gradient(135deg, var(--blue-600) 0%, var(--cyan-400) 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.65;
}

img { max-width: 100%; display: block; }

a { color: var(--blue-600); text-decoration: none; }

.container {
  width: min(1160px, 92%);
  margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* No border on any variant: a transparent border over a gradient composites
     as a visible ring at some zoom levels and pixel ratios. The outline variant
     draws its ring with an inset shadow, so every button keeps the same box
     size. The extra 2px of padding replaces the width the border used to add. */
  padding: calc(0.85rem + 2px) calc(1.7rem + 2px);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-primary {
  background: var(--grad-cyan);
  color: var(--white);
}
.btn-outline {
  background: transparent;
  color: var(--white);
  box-shadow: inset 0 0 0 2px var(--cyan-400);
}
.btn-outline:hover {
  background: rgba(79, 216, 247, 0.12);
  box-shadow: inset 0 0 0 2px var(--cyan-400), var(--shadow);
}
.btn-dark {
  background: var(--navy-800);
  color: var(--white);
}
/* Phone CTAs show the number normally and a short label on phones, where the
   number costs width and tapping the button dials anyway. */
.cta-callnow { display: none; }
/* An SVG rather than the 📞 emoji, which renders in the device's own emoji
   font and so came out black on some phones instead of red. */
.icon-phone {
  width: 1.15em;
  height: 1.15em;
  fill: #f6335a;
  flex-shrink: 0;
}

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy-900);
  color: var(--grey-100);
  font-size: 0.85rem;
  padding: 0.45rem 0;
}
.topbar .container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem 1.5rem;
  flex-wrap: wrap;
}
.topbar a { color: var(--cyan-400); font-weight: 600; }
.topbar .tb-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-weight: 700;
}

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--navy-800);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 18px rgba(8, 17, 32, 0.45);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0;
  gap: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--white);
}
.brand svg { flex-shrink: 0; }
.brand-name {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan-400);
  line-height: 1.25;
  white-space: nowrap;
}
.brand-name span { display: block; color: var(--white); font-size: 0.8rem; letter-spacing: 0.28em; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.main-nav a {
  color: var(--grey-100);
  font-weight: 600;
  font-size: 0.97rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.main-nav a:hover, .main-nav a.active {
  color: var(--cyan-400);
  border-bottom-color: var(--cyan-400);
}
.header-cta { display: flex; align-items: center; gap: 0.8rem; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--cyan-400);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(ellipse at 78% 18%, rgba(30, 136, 229, 0.35), transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(53, 195, 232, 0.18), transparent 50%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
  color: var(--white);
  padding: 4.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: 70px;
  background: var(--white);
  clip-path: polygon(0 100%, 100% 100%, 100% 30%, 0 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(79, 216, 247, 0.12);
  border: 1px solid rgba(79, 216, 247, 0.4);
  color: var(--cyan-300);
  padding: 0.35rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  margin-bottom: 1.1rem;
}
.hero h1 em { font-style: normal; color: var(--cyan-400); }
.hero p.lead {
  color: #c3d3e5;
  font-size: 1.08rem;
  max-width: 34rem;
  margin-bottom: 1.8rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.hero-usps {
  display: flex;
  gap: 0.7rem 1.8rem;
  margin-top: 2.2rem;
  flex-wrap: wrap;
}
.hero-usps .usp {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: #d7e5f2;
}
.usp-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan-400);
  box-shadow: 0 0 10px var(--cyan-400);
  flex-shrink: 0;
}

/* ---------- Quote form card ---------- */
.quote-card {
  background: var(--white);
  color: var(--text-dark);
  border-radius: var(--radius);
  padding: 1.8rem 1.7rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 2;
}
.quote-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}
.quote-card .sub { color: var(--grey-600); font-size: 0.9rem; margin-bottom: 1.1rem; }
.quote-card form { display: grid; gap: 0.75rem; }
.quote-card .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.quote-card input,
.quote-card select,
.quote-card textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--grey-100);
  border-radius: 9px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--off-white);
  color: var(--text-dark);
  transition: border-color 0.15s;
}
.quote-card input:focus,
.quote-card select:focus,
.quote-card textarea:focus {
  outline: none;
  border-color: var(--cyan-500);
}
.quote-card textarea { resize: vertical; min-height: 80px; }
.quote-card .btn { justify-content: center; width: 100%; }

/* ---------- Sections ---------- */
section { padding: 4.5rem 0; }
.section-head { max-width: 640px; margin: 0 auto 2.8rem; text-align: center; }
.section-head.left { text-align: left; margin-left: 0; }
.eyebrow {
  color: var(--blue-600);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8rem;
  display: block;
  margin-bottom: 0.5rem;
}
.section-head h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.2;
  color: var(--navy-800);
}
.section-head p { color: var(--grey-600); margin-top: 0.8rem; }
/* Shared by every section that ends in a centred button, so the gap above
   them is identical throughout the page */
.section-cta { text-align: center; margin-top: 2.4rem; }

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.about-visual {
  background: var(--navy-900);
  border-radius: var(--radius);
  aspect-ratio: 5 / 4;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-visual img { width: 100%; height: 100%; object-fit: cover; }
.about-visual::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(8, 17, 32, 0.9), transparent);
  z-index: 1;
  pointer-events: none;
}
.about-stats {
  position: absolute;
  z-index: 2;
  bottom: 1.1rem;
  left: 1.1rem;
  right: 1.1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
.stat-chip {
  background: rgba(203, 203, 203, 0.22);
  backdrop-filter: blur(4px);
  border-radius: 10px;
  padding: 0.65rem 0.4rem;
  text-align: center;
  color: var(--white);
}
.stat-chip strong { display: block; color: var(--cyan-400); font-size: 1.15rem; }
.stat-chip small { font-size: 0.68rem; color: #b8cade; letter-spacing: 0.03em; }
.about-copy h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--navy-800); margin-bottom: 1rem; }
.about-copy p { color: var(--grey-600); margin-bottom: 1rem; }
.about-copy .btn { margin-top: 0.7rem; }

/* ---------- Why choose us ---------- */
.alt-bg { background: var(--off-white); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.why-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.7rem 1.5rem;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--cyan-500);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.why-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.why-icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(53, 195, 232, 0.14);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.why-icon svg { width: 28px; height: 28px; stroke: var(--blue-600); }
.why-card h3 { font-size: 1.08rem; color: var(--navy-800); margin-bottom: 0.5rem; }
.why-card p { color: var(--grey-600); font-size: 0.93rem; }

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.service-card {
  background: var(--navy-800);
  color: var(--white);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.service-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 216, 247, 0.22), transparent 70%);
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.service-icon {
  width: 54px; height: 54px;
  border-radius: 12px;
  background: var(--grad-cyan);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.1rem;
}
.service-icon svg { width: 30px; height: 30px; stroke: var(--white); }
/* PNG icons sit a little smaller than the SVGs: their artwork runs edge to edge,
   where the SVG shapes carry margin inside their own viewBox. */
.service-icon img { width: 24px; height: 24px; }
.service-card h3 { font-size: 1.12rem; margin-bottom: 0.55rem; color: var(--cyan-300); }
.service-card p { color: #b9c9db; font-size: 0.92rem; margin-bottom: 1rem; }
.service-card .link {
  color: var(--cyan-400);
  font-weight: 700;
  font-size: 0.9rem;
}

/* ---------- Emergency banner ---------- */
.emergency {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(30, 136, 229, 0.35), transparent 60%),
    linear-gradient(120deg, var(--navy-900), var(--navy-700));
  color: var(--white);
  text-align: center;
  padding: 3.6rem 0;
}
.emergency .eyebrow { color: var(--cyan-400); }
.emergency h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 0.7rem; }
.emergency p { color: #b9c9db; max-width: 40rem; margin: 0 auto 1.6rem; }
.emergency .btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Reviews ---------- */

/* Real Google reviews in a swipeable carousel */
.reviews-carousel { position: relative; }
.reviews-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2.8rem) / 3);
  gap: 1.4rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 0.3rem;
  margin: -0.3rem;
}
.reviews-track::-webkit-scrollbar { display: none; }
.rv-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-800);
  box-shadow: 0 6px 18px rgba(8, 17, 32, 0.22);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.rv-arrow svg { width: 22px; height: 22px; }
.rv-arrow:hover:not([disabled]) { background: var(--cyan-300); }
.rv-arrow[disabled] { opacity: 0.3; cursor: default; }
.rv-prev { left: -14px; }
.rv-next { right: -14px; }
.review-card {
  scroll-snap-align: start;
  background: var(--navy-800);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.review-card::before {
  content: "";
  position: absolute;
  top: -45px; right: -45px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 216, 247, 0.16), transparent 70%);
}
.review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.rc-head { display: flex; align-items: center; gap: 0.75rem; position: relative; }
.rc-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--white);
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.rc-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rc-who strong { color: var(--white); font-size: 0.97rem; }
.rc-who small { color: #8ba3bd; font-size: 0.76rem; }
.rc-google { width: 20px; height: 20px; flex-shrink: 0; }
.rc-stars { color: #f5b400; letter-spacing: 0.1em; font-size: 1rem; position: relative; }
.review-card p {
  color: #bccbdc;
  font-size: 0.92rem;
  margin: 0;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.review-card.is-open p { -webkit-line-clamp: unset; overflow: visible; }
/* Added by js/main.js only on reviews long enough to be clipped */
.rc-more {
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  background: none;
  border: none;
  color: var(--cyan-400);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  position: relative;
}
.rc-more:hover { text-decoration: underline; }

/* ---------- Instagram ---------- */
.insta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.insta-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy-800);
  box-shadow: var(--shadow);
}
.insta-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.insta-tile:hover img { transform: scale(1.06); }
.insta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 17, 32, 0.78), rgba(8, 17, 32, 0.06));
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.insta-tile:hover .insta-overlay,
.insta-tile:focus-visible .insta-overlay { opacity: 1; }
.insta-overlay svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.7;
}
.insta-overlay .dot { fill: var(--white); stroke: none; }
/* Marks carousel and video posts, the way Instagram's own grid does */
.insta-badge {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  width: 19px;
  height: 19px;
  pointer-events: none;
  filter: drop-shadow(0 1px 3px rgba(8, 17, 32, 0.85));
}
.insta-badge svg { width: 100%; height: 100%; display: block; }
.ig-btn-glyph {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.ig-btn-glyph .dot { fill: currentColor; stroke: none; }

/* ---------- Service areas ---------- */
.areas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.areas-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  list-style: none;
}
.areas-list li {
  background: var(--white);
  border-radius: 9px;
  padding: 0.7rem 1rem;
  font-weight: 600;
  color: var(--navy-700);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.94rem;
}
.areas-list li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--grad-cyan);
  flex-shrink: 0;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  background:
    radial-gradient(ellipse at 80% 30%, rgba(30, 136, 229, 0.3), transparent 55%),
    linear-gradient(150deg, var(--navy-900), var(--navy-700));
  color: var(--white);
  padding: 3.6rem 0;
  text-align: center;
}
.page-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 0.5rem; }
.page-hero p { color: #b9c9db; max-width: 38rem; margin: 0 auto; }

/* ---------- Values ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: start;
}
.contact-info-card {
  background: var(--navy-800);
  color: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
}
.contact-info-card h3 { color: var(--cyan-400); margin-bottom: 1.2rem; font-size: 1.25rem; }
.ci-item {
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  align-items: flex-start;
}
.ci-item:last-of-type { border-bottom: none; }
.ci-item svg { width: 22px; height: 22px; stroke: var(--cyan-400); flex-shrink: 0; margin-top: 3px; }
.ci-item strong { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: #8ba3bd; margin-bottom: 0.15rem; }
.ci-item a, .ci-item span { color: var(--white); font-weight: 600; }
.ci-item a:hover { color: var(--cyan-400); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-900);
  color: #a9bdd2;
  padding: 3.5rem 0 0;
  font-size: 0.93rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.footer-grid h4 {
  color: var(--white);
  font-size: 1rem;
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
}
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 0.55rem; }
.footer-grid a { color: #a9bdd2; transition: color 0.15s; }
.footer-grid a:hover { color: var(--cyan-400); }
.footer-about p { margin: 0.9rem 0 1.2rem; }
.footer-social { display: flex; gap: 0.7rem; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--navy-700);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.footer-social a:hover { background: var(--blue-600); }
.footer-social svg { width: 18px; height: 18px; fill: var(--white); }
.footer-social svg.ig { fill: none; stroke: var(--white); stroke-width: 1.8; }
.footer-social svg.ig .dot { fill: var(--white); stroke: none; }
.footer-contact li { display: flex; gap: 0.6rem; align-items: flex-start; }
.footer-contact svg { width: 18px; height: 18px; stroke: var(--cyan-400); flex-shrink: 0; margin-top: 3px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.2rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: #6e86a1;
}
/* NSW requires the contractor licence number in advertising, so it sits in the
   footer and therefore on every page */
.footer-legal { margin-bottom: 0.35rem; }

/* ---------- FAQ ---------- */
/* Native <details>, so it opens without JavaScript and stays keyboard accessible */
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 0.85rem;
}
.faq-item {
  background: var(--white);
  border: 1.5px solid var(--grey-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: border-color 0.18s ease;
}
.faq-item[open] { border-color: var(--cyan-500); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 1.4rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-800);
  transition: color 0.15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue-600); }
.faq-item summary::after {
  content: "";
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-right: 2.5px solid var(--blue-600);
  border-bottom: 2.5px solid var(--blue-600);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq-item p {
  margin: 0;
  padding: 0 1.4rem 1.3rem;
  color: var(--grey-600);
  font-size: 0.95rem;
}

/* ---------- Form confirmation modal ---------- */
.form-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 17, 32, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 1rem;
}
.form-modal {
  background: var(--white);
  border-radius: var(--radius);
  max-width: 420px;
  width: 100%;
  padding: 2.2rem 1.9rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.form-modal .fm-icon { font-size: 2.6rem; margin-bottom: 0.6rem; }
.form-modal h3 { color: var(--navy-800); margin-bottom: 0.5rem; font-size: 1.3rem; }
.form-modal p { color: var(--grey-600); font-size: 0.95rem; margin-bottom: 1.4rem; }

/* ---------- Floating call button (mobile) ---------- */
.float-call {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 200;
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: var(--grad-cyan);
  color: var(--white);
  font-weight: 800;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  box-shadow: 0 8px 25px rgba(30, 136, 229, 0.5);
  /* Revealed by js/main.js once the page banner is scrolled past */
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.6rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.float-call.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid, .about-grid, .areas-grid, .contact-grid { grid-template-columns: 1fr; }
  .why-grid, .services-grid, .values-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .reviews-track { grid-auto-columns: calc((100% - 1.4rem) / 2); }
}

/* The full nav stops fitting alongside the logo and call button well before 640px */
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--navy-800);
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0 1rem;
    display: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 24px rgba(8, 17, 32, 0.5);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 0.8rem 1.6rem; width: 100%; border-bottom: none; }
}

@media (max-width: 640px) {
  .why-grid, .services-grid, .values-grid, .areas-list, .footer-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .reviews-track { grid-auto-columns: 100%; }
  .rv-prev { left: -8px; }
  .rv-next { right: -8px; }
  .quote-card .row-2 { grid-template-columns: 1fr; }
  section { padding: 3.2rem 0; }

  /* Full-width call bar pinned to the bottom, with room so it never hides the footer */
  .float-call {
    display: flex;
    justify-content: center;
    left: 1rem;
    right: 1rem;
    bottom: 2.25rem;
  }
  body { padding-bottom: 5.75rem; }

  .topbar { font-size: 0.78rem; }

  .cta-number { display: none; }
  .cta-callnow { display: inline; }

  /* The floating "Call Now" button is the phone CTA on mobile */
  .header-cta .btn { display: none; }
  .brand img { height: 38px !important; }
  .brand-name { font-size: 0.95rem; }

  .hero { padding: 2.6rem 0 3.5rem; }
  .hero h1 { font-size: 1.7rem; }
  .hero p.lead { font-size: 1rem; }
  .hero-usps { gap: 0.55rem 1.2rem; margin-top: 1.6rem; }
  .hero-usps .usp { font-size: 0.86rem; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}