/* =========================================================
   New Ideas Landscaping - stylesheet
   Plain CSS, no framework. Mobile-first, breakpoints at
   700px (tablet) and 1020px (desktop).
   ========================================================= */

:root {
  /* Palette: warm neutral base, deep green primary, clay accent */
  --bg: #faf7f1;
  --bg-alt: #f0ebe0;
  --ink: #1c2a1f;
  --ink-soft: #4b5a4d;
  --ink-faint: #7c8a7d;
  --primary: #2f5233;
  --primary-dark: #203a24;
  --primary-tint: #e7ede7;
  --accent: #b5722f;
  --accent-tint: #f3e4d3;
  --border: #e0d9c8;
  --white: #ffffff;

  --font-head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-sm: 0 1px 2px rgba(28, 42, 31, 0.06), 0 1px 1px rgba(28, 42, 31, 0.04);
  --shadow-md: 0 8px 24px rgba(28, 42, 31, 0.10);
  --container: 1160px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; color: var(--ink); }
h1 { font-weight: 800; }
p { margin: 0 0 1em; color: var(--ink-soft); }
button { font-family: inherit; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 699px) {
  /* Nearly every phone (SE through Pro Max) falls in this range. 24px
     reads as text running right up to the edge of the screen, especially
     with bold hero text, so give mobile a bigger side gutter site-wide. */
  .container { padding-inline: 28px; }
}

/* ---------- Utility ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 0.75em;
}
.section { padding: 64px 0; }
.section-alt { background: var(--bg-alt); }

/* Services section: soft gradient wash + blurred colour blobs + a faint
   dot grid behind the cards, instead of a flat background. Cards
   themselves are untouched. */
.section-services {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(to bottom, var(--white) 0, rgba(255,255,255,0) 160px),
    linear-gradient(to top, var(--bg-alt) 0, rgba(240,235,224,0) 160px),
    linear-gradient(160deg, var(--bg) 0%, var(--bg-alt) 55%, var(--primary-tint) 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 160px, 100% 160px, 100% 100%;
  background-position: top, bottom, 0 0;
}
.section-services::before,
.section-services::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
  z-index: 0;
  pointer-events: none;
}
.section-services::before {
  top: -160px;
  left: -140px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(47, 82, 51, 0.30) 0%, transparent 70%);
}
.section-services::after {
  bottom: -180px;
  right: -160px;
  width: 580px;
  height: 580px;
  background: radial-gradient(circle, rgba(47, 82, 51, 0.34) 0%, transparent 70%);
}
.section-services .container { position: relative; z-index: 1; }

/* Dynamic dot backdrop, built from three composable pieces so it can
   sit either directly on a section (the closing CTA) or on an inner
   layer div (Services, which already uses its own ::before/::after
   for the blurred colour blobs and can't also own the dot pseudo-
   elements):
     .section-dots     structural host: positioning + custom props
     .dot-grid-fade     the dot pattern, faded top/bottom, breathing
   .dot-layer is a plain absolutely-positioned div for the cases where
   .dot-grid-fade can't go straight on the section. */
.section-dots {
  position: relative;
  overflow: hidden;
}
/* Only the CTA banner (which carries dot-grid-fade directly, unlike
   Services which uses an inner .dot-layer) sits right above the
   footer, so only it needs to absorb the footer's top margin into its
   own padding, symmetrically, so its content stays vertically centred. */
.section-dots.dot-grid-fade {
  padding-top: 84px;
  padding-bottom: 84px;
}
.section-dots.dot-grid-fade + .site-footer { margin-top: 0; }
.section-dots .container { position: relative; z-index: 1; }

.dot-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.dot-grid-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(47, 82, 51, 0.46) 1.8px, transparent 1.8px);
  background-size: 24px 24px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  animation: dots-breathe 6.5s ease-in-out infinite;
}
@keyframes dots-breathe {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .dot-grid-fade::before { animation: none; opacity: 0.75; }
}

.section-primary { background: var(--primary); color: var(--white); }
.section-primary h2, .section-primary p { color: var(--white); }
.text-center { text-align: center; }
.max-w-prose { max-width: 640px; }
.mx-auto { margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: #9c6027; }
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.55); }
.btn-outline:hover { background: rgba(255,255,255,0.12); }
.btn-dark { background: var(--primary); color: var(--white); }
.btn-dark:hover { background: var(--primary-dark); }
.btn-block { width: 100%; justify-content: center; }
.btn-outline-dark { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-outline-dark:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 241, 0.94);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 12px;
  min-height: 76px;
}
.logo {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}
.logo span { display: block; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-top: 2px; }
.site-header .logo-img { height: 72px; width: auto; display: block; }

.main-nav > ul { display: flex; gap: 32px; }
.main-nav a {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--primary); border-bottom-color: var(--accent); }

/* Dropdown submenus (Services / Gallery nav items) */
.nav-link-row { display: flex; align-items: center; justify-content: space-between; }
.has-dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.dropdown-toggle svg { transition: transform 0.2s ease; }
.has-dropdown.is-open > .nav-link-row .dropdown-toggle svg { transform: rotate(180deg); }
.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.28s ease;
}
.has-dropdown.is-open > .dropdown-menu { max-height: 680px; }
.main-nav.is-open .dropdown-menu a {
  padding: 10px 0 10px 18px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.main-nav.is-open .dropdown-menu li:last-child a { border-bottom: none; }
.dropdown-menu .view-all-link { color: var(--primary); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 18px; }
.header-contact { display: none; flex-direction: column; align-items: flex-start; gap: 1px; }
.header-phone { font-weight: 600; color: var(--primary); font-size: 0.92rem; }
.header-email { font-weight: 600; color: var(--ink-soft); font-size: 0.88rem; }
.header-cta { display: none; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; width: 18px; margin-inline: auto; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.main-nav {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  /* Isolate from the header's backdrop-filter: without this, iOS Safari
     can wash out/ghost solid-colour children (like the Get a Free Quote
     button below) that sit inside a blurred ancestor. */
  isolation: isolate;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: translateZ(0);
  transition: max-height 0.32s ease, visibility 0s linear 0.32s;
}
.main-nav.is-open {
  box-shadow: var(--shadow-md);
  visibility: visible;
  transition: max-height 0.32s ease, visibility 0s linear 0s;
}
.main-nav.is-open > ul { flex-direction: column; gap: 0; padding: 8px 24px 20px; }
.main-nav.is-open a { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); }
.main-nav.is-open .nav-cta { padding-top: 16px; border-bottom: none; }
.main-nav.is-open .nav-cta .btn { background: var(--accent); color: var(--white); border-color: transparent; display: flex; justify-content: center; text-align: center; }
.main-nav.is-open .nav-cta .btn:hover { background: #9c6027; }

/* ---------- Hero ---------- */
/* ---------- Hero: single full-bleed photo, dark overlay (LWA-inspired) ----------
   One strong background photo with a slow Ken Burns zoom, a dark gradient
   overlay for text contrast, and centered/left white text on top. Same
   treatment on mobile and desktop, just spacing changes at the breakpoint. */
.hero { position: relative; overflow: hidden; background: var(--primary-dark); }
.hero-bg-layers { position: absolute; inset: 0; z-index: 0; }
.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.8s ease;
  animation: heroZoom 24s ease-in-out infinite alternate;
}
.hero-bg-layer.is-active { opacity: 1; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,30,22,0.72) 0%, rgba(20,30,22,0.82) 60%, rgba(20,30,22,0.9) 100%);
  z-index: 1;
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
.hero .hero-inner { position: relative; z-index: 2; padding: 72px 0; }
.hero-text { max-width: 640px; }
.hero-text .eyebrow { color: var(--accent-tint); }
.hero h1 { color: var(--white); font-size: clamp(2rem, 5.5vw, 3.2rem); }
.hero-lede { font-size: 1.1rem; max-width: 46ch; color: rgba(255,255,255,0.88); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 12px; margin-top: 32px; }
.hero-stat strong { display: block; font-family: var(--font-head); font-size: 1.6rem; color: var(--white); }
.hero-stat span { font-size: 0.82rem; color: rgba(255,255,255,0.68); text-transform: uppercase; letter-spacing: 0.04em; }

/* Mobile hero: the same dark overlay used on desktop hides the background
   photo almost completely on a small screen, so lighten the wash and lean
   on text-shadow for legibility instead. Also give each block real
   breathing room instead of letting heading/paragraph/buttons/stats all
   sit hard against each other, which is what actually reads as cramped. */
@media (max-width: 699px) {
  .hero-overlay {
    background: linear-gradient(180deg, rgba(20,30,22,0.5) 0%, rgba(20,30,22,0.64) 55%, rgba(20,30,22,0.84) 100%);
  }
  .hero h1 {
    text-shadow: 0 2px 14px rgba(0,0,0,0.6);
    margin-bottom: 18px;
    /* Smaller and more relaxed than the desktop clamp: the same size that
       reads fine on a laptop wraps to a cramped 3 lines on a phone, and
       tight 1.15 heading line-height makes it feel even tighter. Sized
       down a little further to suit the narrower centred column below. */
    font-size: clamp(1.55rem, 7.6vw, 2.05rem);
    line-height: 1.3;
  }
  .hero-lede {
    text-shadow: 0 1px 10px rgba(0,0,0,0.55);
    margin-bottom: 4px;
    font-size: 0.95rem;
    line-height: 1.65;
  }
  .hero .hero-inner { padding: 64px 0 48px; }
  .hero-actions { margin-top: 30px; }
  .hero-stats { gap: 20px 14px; margin-top: 40px; }
  /* Don't let the heading/paragraph stretch to fill the full screen width
     edge to edge, that reads as a dense wall of text. Narrowing the
     column so lines wrap a little earlier (taller block, more scrolling,
     but each line leaves real margin) reads as considered rather than
     cramped, same as the About page's shorter intro text already does. */
  /* Centre a narrower text column instead of just trimming the right
     edge, so there is real margin on both sides, not just one. */
  .hero-text { max-width: 84%; margin-inline: auto; }
}

/* Sticky quote bar: small pill fixed bottom-right, follows scroll */
.sticky-cta {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  padding: 6px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  max-width: calc(100vw - 32px);
}
.sticky-cta-phone {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticky-cta .btn.sticky-cta-btn { padding: 10px 20px; font-size: 0.88rem; white-space: nowrap; border-radius: 999px; }

/* Back-to-top button: injected by script.js on every page (see js/script.js),
   sits on the opposite side from the sticky quote button so the two never
   overlap. Hidden until the page has scrolled a bit. */
.back-to-top {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--primary-dark); }
.back-to-top svg { width: 20px; height: 20px; }

/* ---------- Gallery photo tiles (real photos, alongside placeholder tiles) ---------- */
.gallery-photo {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}
.gallery-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery-photo:hover img { transform: scale(1.05); }
.gallery-photo .caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(28,42,31,0.85), transparent);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 600;
}

/* ---------- Gallery hub (category tiles that link to per-service pages) ---------- */
.gallery-hub-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.gallery-hub-tile {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.gallery-hub-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.35s ease;
}
.gallery-hub-tile:hover img { transform: scale(1.06); }
.gallery-hub-tile.no-photo {
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-hub-tile.no-photo .icon-badge {
  width: 64px; height: 64px;
  background: var(--white);
}
.gallery-hub-tile.no-photo .icon-badge svg { width: 30px; height: 30px; }
.gallery-hub-tile .hub-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 18px 16px;
  background: linear-gradient(to top, rgba(28,42,31,0.92), rgba(28,42,31,0.05));
  color: var(--white);
}
.gallery-hub-tile.no-photo .hub-overlay {
  position: static;
  background: none;
  color: var(--ink);
  padding: 0;
  margin-top: 14px;
  text-align: center;
}
.hub-overlay h3 { color: inherit; font-size: 1.1rem; margin-bottom: 4px; }
.hub-overlay span { font-size: 0.82rem; opacity: 0.85; font-weight: 600; }
.gallery-hub-tile.no-photo .hub-overlay span { opacity: 0.65; color: var(--ink-faint); }

/* ---------- Service cover (photo or icon box) on Services page ---------- */
.service-cover {
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.service-cover img { width: 100%; height: 100%; object-fit: cover; }
.service-cover.no-photo {
  background: var(--primary-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-cover.no-photo svg { width: 34px; height: 34px; color: var(--primary); }

.service-gallery-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--primary);
}

/* ---------- Footer "view all" link ---------- */
.footer-col .view-all { margin-top: 4px; font-weight: 700; color: var(--accent) !important; }

/* ---------- Intro / trust strip ---------- */
.trust-strip { border-top: 1px solid var(--border); background: var(--white); }
.trust-strip .container { display: grid; gap: 20px; padding-block: 24px; }
.trust-item { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); }
.trust-item .icon { color: var(--accent); flex-shrink: 0; }

/* ---------- Card grid (services) ---------- */
.card-grid { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 40px; }
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card .icon-badge { margin-bottom: 16px; margin-left: auto; margin-right: auto; }
.card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.card p { font-size: 0.94rem; margin-bottom: 0; }
.card-link { display: inline-block; margin-top: 14px; font-size: 0.88rem; font-weight: 600; color: var(--primary); }

.icon-badge {
  width: 48px; height: 48px;
  border-radius: var(--radius-sm);
  background: var(--primary-tint);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.icon-badge svg { width: 24px; height: 24px; }

/* Two "What We Do" cards per row on phones instead of one - the default
   single-column layout wastes the width on a narrow screen, so shrink
   the card's own padding/type/icon to suit two-up rather than just
   dropping the 700px tablet breakpoint's sizing onto a phone. */
@media (max-width: 699px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .card { padding: 16px; }
  .card .icon-badge { width: 38px; height: 38px; margin-bottom: 10px; }
  .card .icon-badge svg { width: 19px; height: 19px; }
  .card h3 { font-size: 0.95rem; margin-bottom: 6px; }
  .card p { font-size: 0.82rem; line-height: 1.45; }
  .card-link { font-size: 0.78rem; margin-top: 10px; }
}

/* ---------- Section heading block ---------- */
.section-head { max-width: 640px; margin-bottom: 8px; }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- Why-us full-bleed photo banner ---------- */
.why-banner {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  min-height: 560px;
  display: flex;
  align-items: center;
}
.why-banner-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 699px) {
  /* background-attachment: fixed renders blank on iOS Safari inside an
     overflow:hidden, position:relative section like this one. */
  .why-banner-layer { background-attachment: scroll; }
}
.why-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(15,24,17,0.38) 0%, rgba(15,24,17,0.66) 100%);
}
.why-banner .container { position: relative; z-index: 1; width: 100%; }
.why-banner .section-head { max-width: 640px; margin: 0 0 40px; }
.why-banner .eyebrow { color: var(--accent-tint); text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.why-banner h2 { color: var(--white); text-shadow: 0 2px 12px rgba(0,0,0,0.45); }
.checklist-photo { display: grid; gap: 16px; }
.checklist.checklist-photo li {
  background: rgba(10, 16, 11, 0.26);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.check-icon-photo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--white);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-icon-photo svg { width: 16px; height: 16px; }
.checklist.checklist-photo h4 { color: var(--white); font-size: 1.02rem; margin-bottom: 4px; text-shadow: 0 1px 8px rgba(0,0,0,0.65); }
.checklist.checklist-photo p { color: rgba(255,255,255,0.94); font-size: 0.92rem; margin-bottom: 0; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
@media (min-width: 700px) {
  .checklist-photo { grid-template-columns: 1fr 1fr; gap: 16px 20px; }
}
@media (min-width: 1020px) {
  .why-banner { padding: 150px 0; min-height: 680px; }
}

/* ---------- Why-us grid ---------- */
.why-layout { display: grid; gap: 32px; align-items: center; }
.why-media { position: relative; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.why-media img { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.why-media-dim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(15, 24, 17, 0.32) 0%, rgba(15, 24, 17, 0.58) 100%);
}
.why-content .section-head { text-align: left; margin: 0 0 24px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; }
.check-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-icon svg { width: 15px; height: 15px; }
.checklist h4 { font-size: 1.02rem; margin-bottom: 4px; }
.checklist p { font-size: 0.92rem; margin-bottom: 0; color: var(--ink-soft); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 48px 32px;
  text-align: center;
  margin-top: 24px;
}
.cta-banner h2, .cta-banner p { color: var(--white); }
.cta-banner .btn-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---------- Page header (interior pages) ---------- */
.page-header { background: var(--primary-tint); padding: 48px 0 40px; border-bottom: 1px solid var(--border); }
.page-header h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }
.page-header p { max-width: 60ch; font-size: 1.02rem; }
.breadcrumb { font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 14px; }
.breadcrumb a { color: var(--primary); font-weight: 600; }

/* Page header with a dimmed background photo (test: Artificial Turf gallery page) */
.page-header-photo {
  position: relative;
  overflow: hidden;
  border-bottom: none;
  padding: 96px 0 76px;
  min-height: 340px;
  display: flex;
  align-items: center;
}
.page-header-photo .header-photo-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: headerPhotoFadeIn 1.8s ease-out 0.1s forwards;
}
.page-header-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(20,32,22,0.68), rgba(20,32,22,0.76));
  z-index: 1;
}
.page-header-photo .container { position: relative; z-index: 2; }
.page-header-photo h1 { color: var(--white); }
.page-header-photo p { color: rgba(255,255,255,0.88); }
.page-header-photo .eyebrow { color: var(--accent-tint); }
.page-header-photo .breadcrumb { color: rgba(255,255,255,0.7); }

@keyframes headerPhotoFadeIn {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}
@media (min-width: 700px) {
  .page-header-photo { min-height: 400px; padding: 120px 0 90px; }
}
.page-header-photo .breadcrumb a { color: var(--white); }

/* ---------- Lightbox (click a gallery photo to view larger) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 20, 15, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,0.18); }

/* ---------- About page ---------- */
.about-grid { display: grid; gap: 40px; align-items: center; }
.about-visual {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--accent-tint), var(--bg-alt));
  border: 1px solid var(--border);
  overflow: hidden;
}
.about-visual img { width: 100%; height: 100%; object-fit: cover; }
.about-intro-grid { display: grid; gap: 40px; }

/* Decorative stat panel filling the empty column beside the About text.
   Dark card, blurred colour blobs, big stat numbers with icons - same
   visual language as the services section background. */
.about-stat-panel {
  position: relative;
  overflow: hidden;
  background: var(--primary-dark);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  min-height: 320px;
}
.about-stat-panel-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.about-stat-panel-blob-a {
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(181, 114, 47, 0.35) 0%, transparent 70%);
}
.about-stat-panel-blob-b {
  bottom: -100px;
  left: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.10) 0%, transparent 70%);
}
.about-stat-item { position: relative; z-index: 1; color: var(--white); }
.about-stat-item svg { color: var(--accent-tint); margin-bottom: 10px; }
.about-stat-item strong { display: block; font-family: var(--font-head); font-size: 2.2rem; line-height: 1.1; }
.about-stat-item span { display: block; font-size: 0.88rem; color: rgba(255,255,255,0.75); margin-top: 4px; }
.about-stat-divider { height: 1px; background: rgba(255,255,255,0.14); position: relative; z-index: 1; }

/* Areas-panel variant: heading + 2-col suburb list + footnote instead of
   stacked stats. */
.about-areas-panel { justify-content: flex-start; gap: 0; }
.about-areas-heading {
  position: relative;
  z-index: 1;
  color: var(--accent-tint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0 20px;
}
.about-areas-list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}
.about-areas-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 0.95rem;
}
.about-areas-list svg { color: var(--accent-tint); flex-shrink: 0; }
.about-areas-note {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
}

/* Checklist-panel variant: same dark panel/blob background, now holding
   the "why work with us" checklist content instead of stats/areas. */
.about-checklist-panel { justify-content: center; gap: 0; align-self: center; }
.about-checklist { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.about-checklist li { display: flex; gap: 14px; align-items: flex-start; }
.check-icon-dark {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.12);
  color: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-icon-dark svg { width: 19px; height: 19px; }
.about-checklist strong { display: block; color: var(--white); font-size: 0.98rem; margin-bottom: 2px; }
.about-checklist p { margin: 0; font-size: 0.92rem; color: rgba(255,255,255,0.75); }

/* Light suburb list, replacing the value-list in the text column. */
.about-areas-inline { margin-top: 32px; }
.about-areas-inline-heading {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 16px;
}
.about-areas-list-light {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 12px;
}
.about-areas-list-light li { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 0.95rem; }
.about-areas-list-light svg { color: var(--primary); flex-shrink: 0; }
.about-areas-note-light { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

/* How a job runs - numbered process list filling the About page intro gap */
.about-process { margin-top: 32px; }
.about-process-heading { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--accent); margin-bottom: 18px; }
.about-process-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.about-process-list::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 34px; width: 2px; background: var(--border); z-index: 0; }
.about-process-list li { position: relative; z-index: 1; display: flex; gap: 16px; align-items: flex-start; }
.about-process-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(181, 114, 47, 0.35);
}
.about-process-list strong { display: block; color: var(--ink); font-size: 0.95rem; margin-bottom: 2px; }
.about-process-list p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

.value-list { display: grid; gap: 18px; margin-top: 32px; }
.value-list li { display: flex; gap: 14px; align-items: flex-start; }
.value-list .icon-badge { flex-shrink: 0; width: 38px; height: 38px; }
.value-list .icon-badge svg { width: 19px; height: 19px; }
.value-list strong { display: block; color: var(--ink); font-size: 0.98rem; margin-bottom: 2px; }
.value-list p { margin: 0; font-size: 0.92rem; }

.scope-box {
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 28px;
  margin-top: 16px;
}
.scope-box h3 { font-size: 1.05rem; }
.scope-cols { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 18px; }
.scope-cols h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.scope-cols.do h4 { color: var(--primary); }
.scope-cols.dont h4 { color: var(--ink-faint); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-weight: 600;
}
.tag.tag-muted { background: var(--bg-alt); color: var(--ink-faint); }

/* ---------- Services page ---------- */
.service-group { padding-block: 20px; scroll-margin-top: 100px; }
.service-group + .service-group { border-top: 1px solid var(--border); }
.service-group-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
.service-group-head h2 { font-size: 1.4rem; margin-bottom: 0; }
.service-group-head .eyebrow { margin-bottom: 0; }
.service-detail-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
.service-detail {
  scroll-margin-top: 100px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
}
.service-detail h3 { font-size: 1.08rem; display: flex; align-items: center; gap: 12px; }
.service-detail p { font-size: 0.94rem; margin-bottom: 0; }

/* ---------- Gallery ---------- */
.gallery-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filter-btn {
  border: 1px solid var(--border);
  background: var(--white);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.filter-btn.is-active { background: var(--primary); border-color: var(--primary); color: var(--white); }

.gallery-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); }
.placeholder-tile {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--border);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 16px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.placeholder-tile:hover { border-color: var(--accent); background: var(--accent-tint); }
.placeholder-tile .icon-badge { background: var(--white); }
.placeholder-tile span { font-size: 0.82rem; color: var(--ink-faint); font-weight: 600; max-width: 20ch; }
.gallery-note {
  margin-top: 36px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  font-size: 0.9rem;
}
.gallery-note strong { color: var(--ink); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 40px; grid-template-columns: 1fr; }
.contact-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px;
}
.contact-info-list { display: grid; gap: 22px; margin-top: 24px; }
.contact-info-item { display: flex; gap: 14px; }
.contact-info-item h4 { font-size: 0.95rem; margin-bottom: 2px; }
.contact-info-item p { font-size: 0.92rem; margin-bottom: 0; }
.contact-info-item a { color: var(--primary); font-weight: 600; }

.form-row { display: grid; gap: 18px; margin-bottom: 18px; }
.field label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}
.field-hint { font-size: 0.8rem; color: var(--ink-faint); margin-top: 4px; }
.hp-field { position: absolute; left: -9999px; }

.form-status { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; display: none; }
.form-status.is-success { display: block; background: var(--primary-tint); color: var(--primary-dark); }
.form-status.is-error { display: block; background: #f7e2df; color: #8a2f22; }

.map-note {
  margin-top: 28px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 22px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--primary-dark); color: rgba(255,255,255,0.86); padding: 56px 0 24px; margin-top: 40px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer-brand .logo { color: var(--white); }
.footer-brand .logo span { color: var(--accent); }
.footer-brand p { color: rgba(255,255,255,0.7); margin-top: 12px; font-size: 0.9rem; max-width: 32ch; }
.footer-col h5 { font-family: var(--font-body); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { font-size: 0.92rem; color: rgba(255,255,255,0.86); }
.footer-col a:hover { color: var(--accent); }
.footer-col p { color: rgba(255,255,255,0.86); font-size: 0.92rem; margin-bottom: 6px; }
.footer-bottom { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.55); }

/* =========================================================
   Breakpoints
   ========================================================= */
@media (min-width: 700px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .why-layout { grid-template-columns: 1fr 1.15fr; }
  .service-detail-grid { grid-template-columns: repeat(2, 1fr); }
  /* Fencing section has a single merged card (Fencing & Gates) - keep it from
     stretching full-width and looking like an empty half-filled row */
  #fencing .service-detail-grid { grid-template-columns: 1fr; max-width: 480px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-hub-grid { grid-template-columns: repeat(2, 1fr); }
  .scope-cols { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .form-row.two-col { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
  .trust-strip .container { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1020px) {
  .about-intro-grid { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
  .main-nav { display: block !important; position: static; background: none; border: none; box-shadow: none; max-height: none !important; overflow: visible !important; visibility: visible !important; }
  .main-nav > ul { flex-direction: row; padding: 0; }
  .main-nav a { border-bottom: 2px solid transparent; padding: 6px 0; }
  .main-nav .nav-cta { display: none; }
  .nav-toggle { display: none; }
  .header-contact { display: flex; }
  .header-cta { display: inline-flex; }
  .site-header .logo-img { height: 80px; }

  /* Desktop hero: taller banner, more breathing room around the text. */
  .hero-inner { min-height: 560px; display: flex; align-items: center; padding: 90px 0; }
  .hero-stats { display: flex; gap: 28px; flex-wrap: wrap; }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .about-grid.reverse { direction: rtl; }
  .about-grid.reverse > * { direction: ltr; }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  /* "What We Do" cards in a 4-col grid: center a leftover last row instead
     of hugging the left. Handles either a lone last card (centered under
     columns 2-3) or a pair (centered under columns 2 and 3).
     (Card text/icon are centered sitewide now, see .card rule above.) */
  .card-grid a.card:last-child:nth-child(4n+1) { grid-column: 2 / 4; }
  .card-grid a.card:nth-last-child(2):nth-child(4n+1) { grid-column: 2 / 3; }
  .card-grid a.card:nth-last-child(2):nth-child(4n+1) ~ a.card:last-child { grid-column: 3 / 4; }
  .why-layout { grid-template-columns: 1fr 1.15fr; }
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; }
  .gallery-hub-grid { grid-template-columns: repeat(3, 1fr); }

  /* Dropdown submenus: desktop hover/click flyout panel instead of mobile accordion */
  .nav-link-row { gap: 2px; }
  .dropdown-toggle { width: 20px; height: 20px; margin-left: 2px; }
  .has-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px;
  }
  .dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    max-height: none;
    min-width: 250px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 60;
  }
  .dropdown-menu a {
    display: block;
    padding: 9px 12px;
    border-bottom: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink-soft);
  }
  .dropdown-menu a:hover { background: var(--primary-tint); color: var(--primary); }
  .has-dropdown:hover > .dropdown-menu,
  .has-dropdown.is-open > .dropdown-menu,
  .has-dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
}