/* ============================================================
   PrimeCare Gardening — Landing page styles
   Brand: deep forest green + bright leaf green
   ============================================================ */

:root {
  /* Brand palette */
  --forest:        #0c3d1a;   /* deep forest green (logo text) */
  --forest-2:      #114d22;
  --green:         #2f8f3e;   /* mid green */
  --leaf:          #66bf38;   /* bright leaf green (accent) */
  --leaf-bright:   #84d24c;
  --leaf-soft:     #eaf6e2;   /* very light green wash */
  --leaf-soft-2:   #f3faee;

  --ink:           #18241b;   /* near-black text */
  --body:          #4a5a4e;   /* muted body text */
  --muted:         #7c8a80;
  --line:          #e4ebe4;
  --white:         #ffffff;
  --cream:         #f7faf5;

  --radius:        18px;
  --radius-lg:     26px;
  --radius-sm:     12px;
  --shadow:        0 18px 50px rgba(12, 61, 26, .10);
  --shadow-sm:     0 8px 24px rgba(12, 61, 26, .08);
  --shadow-lg:     0 30px 70px rgba(12, 61, 26, .18);

  --container:     1200px;
  --ease:          cubic-bezier(.22, 1, .36, 1);

  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--white);
  line-height: 1.65;
  font-size: 16.5px;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--forest);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.015em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15.5px;
  padding: 15px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: var(--leaf);
  color: var(--forest);
  box-shadow: 0 12px 26px rgba(102, 191, 56, .35);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(102, 191, 56, .45); }
.btn-dark {
  background: var(--forest);
  color: #fff;
  box-shadow: 0 12px 26px rgba(12, 61, 26, .28);
}
.btn-dark:hover { transform: translateY(-3px); background: var(--forest-2); }
.btn-ghost {
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.24); transform: translateY(-3px); }
.btn-white { background: #fff; color: var(--forest); }
.btn-white:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.btn .arrow {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(12,61,26,.14);
  transition: transform .3s var(--ease);
}
.btn-dark .arrow, .btn-ghost .arrow { background: rgba(255,255,255,.18); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Section helpers ---------- */
.section { padding: 100px 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--green);
  letter-spacing: .02em;
  margin-bottom: 16px;
}
.eyebrow svg { width: 18px; height: 18px; transform-box: fill-box; transform-origin: bottom center; }
/* The little leaf gives each section heading a gentle, on-brand sway once it scrolls in */
.reveal.in .eyebrow svg { animation: pcLeaf 4s ease-in-out infinite; }
@keyframes pcLeaf { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.section-head { max-width: 640px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head h2 {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 700;
  margin-bottom: 18px;
}
.section-head p { font-size: 17px; color: var(--body); }

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  background: var(--forest);
  color: #dbe9d8;
  font-size: 14px;
}
.topbar .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 46px;
  gap: 18px;
}
.tb-phone { grid-column: 1; justify-self: start; white-space: nowrap; }
.tb-area { display: inline-flex; align-items: center; gap: 8px; grid-column: 2; justify-self: center; white-space: nowrap; }
.topbar .socials { grid-column: 3; justify-self: end; }
.topbar a, .topbar span.item { display: inline-flex; align-items: center; gap: 8px; color: #dbe9d8; transition: color .2s; }
.topbar a:hover { color: var(--leaf-bright); }
.topbar svg { width: 16px; height: 16px; color: var(--leaf-bright); }
.topbar .socials { display: flex; gap: 14px; align-items: center; }
.topbar .socials span { color: #9fb89c; }
.topbar .socials a svg { width: 17px; height: 17px; color: #cfe2cb; }
.topbar .socials a:hover svg { color: var(--leaf-bright); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s;
}
.site-header.scrolled {
  box-shadow: 0 6px 30px rgba(12,61,26,.08);
  border-color: var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 98px;
}
.nav .logo { display: flex; align-items: center; gap: 13px; }
.nav .logo .logo-leaf { height: 58px; width: auto; }
.nav .logo .logo-text { height: 41px; width: auto; position: relative; top: 3px; }
.nav-links {
  display: flex;
  gap: 34px;
  align-items: center;
}
/* These blocks only appear inside the mobile/tablet slide-out menu */
.nav-contact,
.nav-quote-btn,
.nav-cards { display: none; }
.nav-links a {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--forest);
  position: relative;
  padding: 4px 0;
  transition: color .2s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--leaf);
  transition: width .3s var(--ease);
}
.nav-links a:hover { color: var(--green); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 26px; height: 2.5px; border-radius: 2px;
  background: var(--forest);
  transition: transform .3s, opacity .3s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 120px 0 128px;
  background: #143d1d;   /* solid fallback behind the photo/video */
}
/* The instant-load fallback photo, sitting under the video and framed the same */
.hero-bg-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  z-index: 0;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  z-index: 0; border: 0; pointer-events: none;
  /* Hidden until it's genuinely playing, then fades in over the photo. This
     means the iOS play-button overlay is never visible, and if autoplay is
     blocked the user just sees the static photo (no play button). */
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-video.is-playing { opacity: 1; }
/* Belt-and-braces: never show the native iOS/Safari play-button or controls. */
.hero-video::-webkit-media-controls,
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,40,18,.62) 0%, rgba(8,40,18,.30) 45%, rgba(8,40,18,.72) 100%);
}
.hero::after {
  /* soft curved transition into next section */
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 90px;
  background: var(--white);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: scaleX(1.5);
  z-index: 2;
}
.hero-inner { max-width: 760px; position: relative; z-index: 3; }
.hero .badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  margin-bottom: 26px;
}
.hero .badge svg { width: 16px; height: 16px; color: var(--leaf-bright); }
.hero h1 {
  color: #fff;
  font-size: clamp(40px, 6.2vw, 76px);
  font-weight: 700;
  line-height: 1.04;
  margin-bottom: 22px;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.hero h1 .accent { color: var(--leaf-bright); }
.hero p.lead {
  font-size: clamp(17px, 2vw, 20px);
  color: rgba(255,255,255,.92);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-trust {
  display: flex; gap: 26px; flex-wrap: wrap;
  margin-top: 40px;
}
.hero-trust .t {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500; color: rgba(255,255,255,.95);
}
.hero-trust svg { width: 22px; height: 22px; color: var(--leaf-bright); flex-shrink: 0; }

/* ============================================================
   SERVICES
   ============================================================ */
.services { background: var(--white); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 56px;
}
.service-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 32px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--leaf-soft-2), transparent 60%);
  opacity: 0; transition: opacity .35s;
}
.service-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 26px 50px rgba(20,61,29,.14);
  border-color: transparent;
}
.service-card:hover::before { opacity: 1; }
.service-card > * { position: relative; z-index: 1; }
.service-card .ic {
  width: 64px; height: 64px; border-radius: 18px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--green), var(--leaf));
  color: #fff;
  margin-bottom: 22px;
  box-shadow: 0 12px 24px rgba(102,191,56,.3);
}
.service-card .ic { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.service-card .ic svg { width: 30px; height: 30px; overflow: visible; }
.service-card:hover .ic {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 16px 30px rgba(102,191,56,.42);
}

/* ---- Animated service icons ----
   The moving part of each icon loops gently and continuously, but only once
   the card has scrolled into view (the .in class, added by the reveal observer)
   so nothing animates off-screen or competes with first paint. Hovering a card
   simply makes the whole tile grow and lift (see .service-card:hover above).
   Respects reduced-motion. */
.svc-mower .mower, .svc-shears .blade-a, .svc-shears .blade-b,
.svc-sprout .plant, .svc-spade .spade, .svc-rake .rake,
.svc-trailer .trailer { transform-box: view-box; }
.svc .wheel { transform-box: fill-box; transform-origin: center; }

/* Lawn mower: rolls forward, wheels spin */
.svc-mower .mower { transform-origin: 12px 17px; }
.service-card.in .svc-mower .mower { animation: pcRoll 1.8s ease-in-out infinite; }
.service-card.in .svc-mower .wheel { animation: pcSpin 1.8s linear infinite; }
@keyframes pcRoll { 0%,100% { transform: translateX(1px); } 50% { transform: translateX(-1.5px); } }
@keyframes pcSpin { to { transform: rotate(360deg); } }

/* Hedge shears: blades snip open and shut */
.svc-shears .blade-a, .svc-shears .blade-b { transform-origin: 12px 11px; }
.service-card.in .svc-shears .blade-a { animation: pcSnipA 2.2s ease-in-out infinite; }
.service-card.in .svc-shears .blade-b { animation: pcSnipB 2.2s ease-in-out infinite; }
@keyframes pcSnipA { 0%,55%,100% { transform: rotate(0); } 28% { transform: rotate(8deg); } }
@keyframes pcSnipB { 0%,55%,100% { transform: rotate(0); } 28% { transform: rotate(-8deg); } }

/* Weed/sprout: sways in the breeze */
.svc-sprout .plant { transform-origin: 12px 21px; }
.service-card.in .svc-sprout .plant { animation: pcSway 3s ease-in-out infinite; }
@keyframes pcSway { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* Spade: digs back and forth */
.svc-spade .spade { transform-origin: 12px 6px; }
.service-card.in .svc-spade .spade { animation: pcDig 2s ease-in-out infinite; }
@keyframes pcDig { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

/* Rake: sweeps side to side */
.svc-rake .rake { transform-origin: 12px 4px; }
.service-card.in .svc-rake .rake { animation: pcRake 2.4s ease-in-out infinite; }
@keyframes pcRake { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }

/* Trailer: rolls in, wheels spin */
.svc-trailer .trailer { transform-origin: 12px 17px; }
.service-card.in .svc-trailer .trailer { animation: pcRoll 1.8s ease-in-out infinite; }
.service-card.in .svc-trailer .wheel { animation: pcSpin 1.8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .svc *, .eyebrow svg { animation: none !important; }
}

.service-card h3 { font-size: 21px; margin-bottom: 10px; }
.service-card p { font-size: 15px; margin-bottom: 16px; }
.service-card .tag {
  display: inline-block;
  font-size: 13px; font-weight: 600;
  color: var(--green);
  font-family: var(--font-head);
}

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why { background: var(--cream); }
.why-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.why-list { margin-top: 30px; display: grid; gap: 22px; }
.why-item { display: flex; gap: 18px; }
.why-item .ic {
  flex-shrink: 0;
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--leaf-soft); color: var(--green);
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.why-item:hover .ic {
  transform: translateY(-3px) scale(1.08);
  background: linear-gradient(145deg, var(--green), var(--leaf));
  color: #fff;
}
.why-item .ic svg { width: 26px; height: 26px; }
.why-item h4 { font-size: 18px; margin-bottom: 4px; }
.why-item p { font-size: 14.5px; }
.why-media { position: relative; }
.why-media img {
  border-radius: var(--radius-lg);
  width: 100%;
  height: 520px;
  object-fit: cover;
  box-shadow: var(--shadow);
}
.why-badge {
  position: absolute;
  left: -28px; bottom: 40px;
  background: var(--forest);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px 28px;
  box-shadow: var(--shadow-lg);
  max-width: 230px;
}
.why-badge .num {
  font-family: var(--font-head);
  font-size: 40px; font-weight: 700; color: var(--leaf-bright);
  line-height: 1;
}
.why-badge p { font-size: 14px; color: #cfe2cb; margin-top: 6px; }
.why-badge .stars { color: #ffce3a; font-size: 16px; margin-top: 8px; letter-spacing: 2px; }

/* Faint image-preview toggle, tucked in the top-right corner of the photo */
.why-media .img-toggle {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.85);
  cursor: pointer;
  opacity: .4;
  transition: opacity .2s var(--ease), background .2s var(--ease);
  z-index: 2;
}
.why-media .img-toggle:hover { opacity: 1; background: rgba(255,255,255,.3); }
.why-media .img-toggle svg { width: 16px; height: 16px; }
.why-media .img-toggle.active { opacity: 1; background: var(--leaf-bright); color: #fff; }

/* ============================================================
   BEFORE / AFTER GALLERY
   ============================================================ */
.gallery { background: var(--white); }
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 56px;
}
.ba-item { }
.ba-item .ba-caption {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px;
}
.ba-item .ba-caption h3 { font-size: 19px; }
.ba-item .ba-caption span {
  font-size: 13px; font-weight: 600; color: var(--green);
  background: var(--leaf-soft); padding: 6px 14px; border-radius: 999px;
  font-family: var(--font-head);
}

/* Before/after slider — before on the left, after on the right */
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  user-select: none;
  cursor: ew-resize;
  touch-action: none;
  background: #e9efe6;
}
.ba-slider .ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* the "before" image sits on top and is clipped to the left of the handle */
.ba-slider .ba-before { clip-path: inset(0 50% 0 0); will-change: clip-path; }
.ba-slider .ba-label {
  position: absolute; top: 16px;
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
  background: rgba(12,61,26,.72);
  padding: 6px 14px; border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.ba-slider .ba-label.before { left: 16px; }
.ba-slider .ba-label.after  { right: 16px; background: rgba(102,191,56,.92); }
.ba-handle {
  position: absolute; top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  box-shadow: 0 0 14px rgba(0,0,0,.3);
  pointer-events: none;
}
.ba-handle .knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--forest);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.ba-handle .knob svg { width: 22px; height: 22px; }
.ba-hint { text-align: center; margin-top: 36px; color: var(--muted); font-size: 14.5px; }

/* ============================================================
   PROCESS
   ============================================================ */
.process { background: var(--cream); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 60px;
  position: relative;
}
.step {
  background: #fff;
  border-radius: var(--radius);
  padding: 40px 32px;
  text-align: center;
  border: 1px solid var(--line);
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.step .num {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(145deg, var(--green), var(--leaf));
  color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 26px;
  display: grid; place-items: center;
  margin: 0 auto 22px;
  box-shadow: 0 12px 24px rgba(102,191,56,.3);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover .num {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 16px 30px rgba(102,191,56,.42);
}
.step h3 { font-size: 20px; margin-bottom: 10px; }
.step p { font-size: 15px; }

/* ============================================================
   SERVICE AREAS
   ============================================================ */
.areas {
  position: relative;
  background: linear-gradient(rgba(10,45,20,.86), rgba(10,45,20,.92)),
              url('https://res.cloudinary.com/bakermedia/image/upload/f_auto,q_auto,w_1600/professional-garden-maintenance-adelaide.jpg') center / cover fixed no-repeat;
  color: #fff;
}
.areas .eyebrow { color: var(--leaf-bright); }
.areas .section-head h2 { color: #fff; }
.areas .section-head p { color: rgba(255,255,255,.85); }
.areas-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 40px;
  margin-top: 56px;
  align-items: stretch;
}
.areas-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
}
.areas-card h3 { color: #fff; font-size: 24px; margin-bottom: 8px; }
.areas-card .sub { color: rgba(255,255,255,.8); font-size: 15px; margin-bottom: 24px; }
.suburb-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px;
}
.suburb-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: rgba(255,255,255,.92);
}
.suburb-list svg { width: 17px; height: 17px; color: var(--leaf-bright); flex-shrink: 0; }
.areas-contact { margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 14px; }
.areas-contact a, .areas-contact div { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 15.5px; }
.areas-contact .ic { width: 40px; height: 40px; border-radius: 11px; background: rgba(102,191,56,.22); display: grid; place-items: center; flex-shrink: 0; }
.areas-contact svg { width: 19px; height: 19px; color: var(--leaf-bright); }
.areas-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 480px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.14);
}
.areas-map iframe { width: 100%; height: 100%; min-height: 480px; border: 0; display: block; filter: saturate(1.05); }
/* Service-area highlight overlay. The zone is nudged up-and-left
   (toward the coast) so it spans Hallett Cove across to Aberfoyle. */
.map-overlay { position: absolute; inset: 0; pointer-events: none; }
.map-overlay::before {
  /* dim the edges so the service zone stands out */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 54% 56% at 43% 45%, transparent 56%, rgba(8,40,18,.42) 100%);
}
.map-area {
  position: absolute;
  top: 45%; left: 43%;
  width: 68%; height: 70%;
  transform: translate(-50%, -50%);
  border: 2.5px dashed var(--leaf-bright);
  background: rgba(102,191,56,.16);
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(132,210,76,.25);
}
.map-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--forest); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  padding: 8px 15px; border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  white-space: nowrap;
}
.map-chip svg { width: 16px; height: 16px; color: var(--leaf-bright); }
.map-chip.area { top: 16px; left: 50%; transform: translateX(-50%); }
.map-chip.base {
  bottom: 36px; left: 16px;
  background: rgba(255,255,255,.96); color: var(--forest);
}
.map-chip.base svg { color: var(--green); }

/* "Outside this area" personal note in the areas card */
.areas-note {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 22px; padding: 14px 16px;
  background: rgba(102,191,56,.12);
  border: 1px solid rgba(132,210,76,.3);
  border-radius: var(--radius-sm);
  font-size: 14px; color: rgba(255,255,255,.92); line-height: 1.5;
}
.areas-note svg { width: 18px; height: 18px; color: var(--leaf-bright); flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta {
  padding: 90px 0;
  background: var(--white);
}
.cta-inner {
  background: linear-gradient(135deg, var(--forest) 0%, var(--green) 100%);
  border-radius: var(--radius-lg);
  padding: 70px 60px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-inner::before, .cta-inner::after {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(132,210,76,.18);
}
.cta-inner::before { width: 320px; height: 320px; top: -140px; right: -80px; }
.cta-inner::after  { width: 240px; height: 240px; bottom: -120px; left: -60px; }
.cta-inner > * { position: relative; z-index: 1; }
.cta-inner h2 { color: #fff; font-size: clamp(28px, 4vw, 44px); margin-bottom: 14px; }
.cta-inner p { color: rgba(255,255,255,.9); font-size: 18px; max-width: 540px; margin: 0 auto 32px; }
.cta-phone {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(32px, 5vw, 50px);
  color: var(--leaf-bright);
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 30px;
}
.cta-phone svg { width: 38px; height: 38px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--forest);
  color: #b9cdb5;
  padding: 70px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
}
.footer .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.footer .brand img { height: 42px; }
.footer .brand .name { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: #fff; }
.footer .brand .name span { color: var(--leaf-bright); }
.footer .col p { font-size: 14.5px; color: #9fb89c; max-width: 320px; }
.footer .col h4 { color: #fff; font-size: 16px; margin-bottom: 20px; font-family: var(--font-head); }
.footer .col ul { display: grid; gap: 11px; }
.footer .col ul li a, .footer .col ul li { font-size: 14.5px; color: #b9cdb5; transition: color .2s; display: inline-flex; align-items: center; gap: 9px; }
.footer .col ul li a:hover { color: var(--leaf-bright); }
.footer .col ul svg { width: 16px; height: 16px; color: var(--leaf); flex-shrink: 0; }
.footer .socials { display: flex; gap: 12px; margin-top: 22px; }
.footer .socials a {
  width: 40px; height: 40px; border-radius: 11px;
  background: rgba(255,255,255,.08);
  display: grid; place-items: center;
  transition: background .25s, transform .25s;
}
.footer .socials a:hover { background: var(--leaf); transform: translateY(-3px); }
.footer .socials svg { width: 18px; height: 18px; color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 24px 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 13.5px; color: #8aa386;
}
.footer-bottom a:hover { color: var(--leaf-bright); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Desktop only: sit the hero photo + video a little lower so more of the
   grass shows. Tablet + mobile keep the higher framing (looks good there). */
@media (min-width: 1025px) {
  .hero-bg-image,
  .hero-video { object-position: center 55%; }
}

@media (max-width: 1024px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-media img { height: 420px; }
  /* Centre the Why text column on tablet + mobile (desktop stays left-aligned) */
  .why-grid > div:first-child { text-align: center; max-width: 640px; margin-inline: auto; }
  .why-item { flex-direction: column; align-items: center; text-align: center; }
  .areas-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .section { padding: 72px 0; }
  .topbar .container { display: flex; justify-content: space-between; }
  .topbar .tb-area { display: none; }
  .topbar a, .topbar span.item { white-space: nowrap; }
}

/* Nav collapses to the slide-out menu on tablet + mobile (incl. iPad portrait) */
@media (max-width: 1024px) {
  .nav-links {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    background: linear-gradient(180deg, #fff 0%, var(--leaf-soft-2) 100%);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 92px 24px calc(28px + env(safe-area-inset-bottom));
    transform: translateX(100%);
    transition: transform .4s var(--ease);
    z-index: 90;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Centre the menu content on the full-screen panel */
  .nav-links > * { width: 100%; max-width: 440px; margin-inline: auto; }
  .nav-links.open { transform: translateX(0); }
  .nav-links a::after { display: none; }

  /* Quote CTA button */
  .nav-links .nav-quote-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 22px;
    background: var(--green);
    color: #fff;
    border-radius: 999px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .2px;
    box-shadow: 0 14px 28px rgba(47,143,62,.30);
  }
  .nav-links .nav-quote-btn svg { width: 18px; height: 18px; }

  /* Service image cards */
  .nav-cards { display: block; margin: 26px 0 20px; }
  .nav-section-label {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 12px;
  }
  .nav-links .nav-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 82px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 14px 16px;
    background-image: var(--img);
    background-size: cover;
    background-position: center;
    box-shadow: var(--shadow-sm);
  }
  .nav-links .nav-card:last-child { margin-bottom: 0; }
  .nav-links .nav-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(12,61,26,.82) 0%, rgba(12,61,26,.32) 62%, rgba(12,61,26,.12) 100%);
  }
  .nav-links .nav-card span {
    position: relative;
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .2px;
  }
  .nav-links .nav-card:active span { transform: translateX(3px); transition: transform .15s var(--ease); }

  /* Section text links */
  .nav-link--hide-mobile { display: none; }
  .nav-links > .nav-link {
    font-size: 17px;
    font-weight: 600;
    color: var(--forest);
    width: 100%;
    padding: 15px 2px;
    border-bottom: 1px solid var(--line);
    transition: color .2s var(--ease), padding-left .2s var(--ease);
  }
  .nav-links > .nav-link:hover,
  .nav-links > .nav-link:active { color: var(--green); padding-left: 8px; }

  /* Get in Touch block, sitting directly under the menu links */
  .nav-contact {
    display: block;
    width: 100%;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .nav-contact-title {
    display: block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 10px;
  }
  .nav-contact a,
  .nav-contact .nav-loc {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 0;
    border: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--body);
    white-space: nowrap;
    transition: color .2s var(--ease);
  }
  .nav-contact a:hover { color: var(--green); }
  .nav-contact svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; }
  .nav-toggle { display: flex; z-index: 95; }
  .nav-cta .btn:not(.nav-toggle) { display: none; }
}

@media (max-width: 768px) {
  .hero { padding: 80px 0 92px; }
  .services-grid { grid-template-columns: 1fr; }
  .ba-grid { grid-template-columns: 1fr; gap: 30px; }
  .steps { grid-template-columns: 1fr; }
  .suburb-list { grid-template-columns: 1fr; }
  .why-badge { left: 16px; right: auto; bottom: 16px; max-width: 175px; padding: 15px 18px; }
  .why-badge .num { font-size: 30px; }
  .why-badge p { font-size: 12px; margin-top: 4px; }
  .why-badge .stars { font-size: 13px; margin-top: 5px; }
  .cta-inner { padding: 50px 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .areas { background-attachment: scroll; }

  /* On phones the map is portrait, which squeezes the highlight circle into a
     tall narrow shape that misses the east/west suburbs. The map is also
     zoomed out a step (see main.js), so widen + flatten the overlay to sit
     more naturally over the whole service area. */
  .areas-map { min-height: 420px; }
  .areas-map iframe { min-height: 420px; }
  .map-overlay::before {
    background: radial-gradient(ellipse 62% 44% at 50% 49%, transparent 60%, rgba(8,40,18,.42) 100%);
  }
  .map-area {
    top: 49%; left: 50%;
    width: 92%; height: 58%;
  }
}

@media (max-width: 420px) {
  .container { padding: 0 18px; }
  .hero-trust { gap: 14px; }
}

/* iPad portrait: keep his photo square so his face always shows in full,
   and tuck the "100%" badge inside the image so it doesn't run off the edge */
@media (min-width: 769px) and (max-width: 1024px) {
  .why-media { max-width: 520px; margin-inline: auto; }
  .why-media img { aspect-ratio: 1 / 1; height: auto; object-position: center; }
  /* badge overhangs outside the photo, like desktop (image is now centred with room beside it) */
}