/* ============================================
   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-700); 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; }
/* The locations page uses h2 per suburb - each area is its own topic - so the
   heading styles have to match whichever level the card uses. */
.service-card h3,
.service-card h2 { 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; }

/* The Google mark keeps its own four colours rather than currentColor - the
   brand guidelines require it, and it reads as a Google link at a glance. */
.g-btn-glyph { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* Secondary line under a section's main button, for the smaller of two
   actions. Sits below rather than beside it so the primary stays alone. */
.cta-aside { margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--grey-600); }

/* ---------- 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-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
/* The "+ More" chip links through to the full list. flex:1 stretches the anchor
   across the rest of the chip so the whole tile is clickable, not just the text. */
.areas-list a { color: var(--blue-600); font-weight: 700; flex: 1; }
.areas-list a:hover { text-decoration: underline; }
.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;
}

/* ---------- Service areas ---------- */
.area-search {
  max-width: 560px;
  margin: 0 auto 2.6rem;
  text-align: center;
}
.area-search input {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--grey-100);
  border-radius: 999px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--off-white);
  color: var(--text-dark);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.area-search input:focus {
  outline: none;
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 4px rgba(53, 195, 232, 0.16);
}
.area-count {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: var(--grey-600);
}
.area-group { margin-bottom: 1.8rem; }
.area-letter {
  font-size: 1rem;
  color: var(--blue-600);
  letter-spacing: 0.12em;
  margin-bottom: 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 1.5px solid var(--grey-100);
}
.area-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 0.55rem;
  list-style: none;
}
.area-chips li {
  background: var(--white);
  border-radius: 9px;
  padding: 0.6rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy-700);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.area-chips li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-cyan);
  flex-shrink: 0;
}
/* Both set by js/main.js as the search filters */
.area-group[hidden], .area-chips li[hidden] { display: none !important; }
.area-empty {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem 1.8rem;
}
.area-empty p { color: var(--grey-600); margin-bottom: 0.8rem; }
.area-empty .btn { margin-top: 0.6rem; }

/* ---------- 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 { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }

  /* Service areas stay two across on a phone. The tiles tighten up so the
     longest labels ("The Hills District") still sit on one line in a
     half-width column. */
  .areas-list { gap: 0.5rem; }
  .areas-list li {
    padding: 0.6rem 0.7rem;
    font-size: 0.86rem;
    gap: 0.45rem;
  }
  .areas-list li::before { width: 7px; height: 7px; }
  .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;
  }
  /* The room the button needs sits *inside* the footer, not under the body.
     On the body it painted a white strip below the navy footer at full scroll. */
  .site-footer { padding: 2.4rem 0 6.75rem; font-size: 0.88rem; }

  /* One long stacked column made the footer taller than two phone screens.
     The two link lists pair up; the blurb and the contact details (long email)
     keep the full width. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1.2rem;
    padding-bottom: 1.6rem;
  }
  .footer-about, .footer-grid > :last-child { grid-column: 1 / -1; }
  .footer-grid h4 { font-size: 0.95rem; margin-bottom: 0.6rem; }
  .footer-grid li { margin-bottom: 0.4rem; }
  .footer-about p { margin: 0.7rem 0 0.9rem; }
  .footer-social a { width: 34px; height: 34px; }
  .footer-bottom { padding: 0.9rem 0; font-size: 0.8rem; }
  /* A few strings here are single unbreakable words - the email address and the
     Instagram handle. At narrow widths their min-content width was wider than
     the column, which stretched the page and let it scroll sideways. Wrapping
     only kicks in when they genuinely do not fit, so wider phones are unchanged. */
  .footer-contact a, .ci-item a { overflow-wrap: anywhere; }
  .btn { overflow-wrap: anywhere; max-width: 100%; }
  .contact-grid > *, .ci-item > div { min-width: 0; }

  .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; }
}

/* ---------- Accessibility ---------- */

/* Labels that screen readers announce but sighted users do not see: the form
   is designed around placeholders, which vanish as soon as someone types. */
/* `input.sr-only` is here so the hidden honeypot beats `.quote-card input`,
   which would otherwise stretch it to full width and push the page sideways. */
.sr-only,
input.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Jump straight past the nav. Only visible once it has keyboard focus. */
.skip-link {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--white);
  color: var(--navy-900);
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg);
  transition: transform 0.18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* The target takes focus programmatically; it should not draw a ring for it. */
[id="main"]:focus { outline: none; }

/* Keyboard users need to see where they are. :focus-visible keeps this off
   mouse clicks, so the design is unchanged for everyone else. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.skip-link:focus-visible {
  outline: 3px solid var(--cyan-400);
  outline-offset: 2px;
  border-radius: 4px;
}
.site-header a:focus-visible,
.site-footer a:focus-visible,
.topbar a:focus-visible {
  outline-color: var(--cyan-300);
}

/* ---------- Legal pages ---------- */
.legal {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem 0 3.5rem;
}
.legal h2 {
  font-size: 1.25rem;
  color: var(--navy-800);
  margin: 2.2rem 0 0.6rem;
}
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--grey-600); margin-bottom: 0.8rem; }
.legal ul { padding-left: 1.2rem; margin-bottom: 1rem; }
.legal li { margin-bottom: 0.35rem; }
.legal .updated {
  font-size: 0.9rem;
  color: var(--grey-600);
  border-left: 3px solid var(--cyan-500);
  padding-left: 0.9rem;
  margin-bottom: 2rem;
}

/* Suburb chips on the home page link through to their section on /locations */
.areas-list a { color: inherit; display: block; }
.areas-list li:hover { background: var(--grey-100); }