/* =============================================================================
   Garden Design Solutions — Core Stylesheet
   Vanilla CSS conversion of the Tailwind prototype (new/gds.html).
   Mobile-first. Design tokens via CSS Custom Properties. BEM-style naming.
   -----------------------------------------------------------------------------
   Contents
   0.  Design Tokens (:root)
   1.  Reset & Base
   2.  Layout helpers (.container)
   3.  Reusable components (.eyebrow, .btn, .tag, .card, .section-*)
   4.  Motion & effects (.reveal, .img-zoom, .nav-glass, .shimmer, pulse/ping)
   5.  Announcement bar
   6.  Site header / navigation
   7.  Hero slideshow
   8.  Projects showcase
   9.  Adelaide zone selector
   10. Value proposition
   11. Process (7-step)
   12. Reviews
   13. Plant store
   14. Guarantee
   15. Quote / contact form
   16. Footer
   17. Toast
   18. Responsive (min-width breakpoints: 640 / 768 / 1024)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand colours */
  --color-alabaster: #FAF9F6;
  --color-sandstone: #EFECE6;
  --color-charcoal:  #181A1B;
  /* GDS brand green (#898F65) family — olive/sage. */
  --color-forest-50:  #EEF0E6;
  --color-forest-100: #D9DCC4;
  --color-forest-600: #898F65;   /* the gds green */
  --color-forest-700: #7C8259;
  --color-forest-800: #898F65;   /* THE GDS green — default for all green surfaces (buttons, logo, sections) */
  --color-forest-900: #5C6142;   /* darker green — header top bar (.announcement) + footer only */
  --color-terracotta: #E8692C;   /* brighter burnt-orange — reads clearly on the olive greens */
  --color-terracotta-on-green: #F5A65A;  /* lighter orange for orange text/icons ON a green background (footer, guarantee eyebrow) — the burnt terracotta is too low-contrast there */
  --color-white: #FFFFFF;

  /* RGB triplets — for rgba() opacity variants */
  --rgb-alabaster: 250, 249, 246;
  --rgb-sandstone: 239, 236, 230;
  --rgb-charcoal:  24, 26, 27;
  --rgb-forest-50:  238, 240, 230;
  --rgb-forest-100: 217, 220, 196;
  --rgb-forest-600: 137, 143, 101;
  --rgb-forest-700: 124, 130, 89;
  --rgb-forest-800: 137, 143, 101;
  --rgb-forest-900: 92, 97, 66;
  --rgb-terracotta: 232, 105, 44;
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;

  /* Typography */
  --font-heading: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Layout */
  --container-max: 80rem;   /* max-w-7xl */
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-pill: 2rem;
  --radius-full: 9999px;

  /* Elevation (Tailwind default shadow scale) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Easing */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -----------------------------------------------------------------------------
   1. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

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

body {
  background-color: var(--color-alabaster);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: 100%;
}

ul {
  list-style: none;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

::selection {
  background: var(--color-forest-600);
  color: var(--color-alabaster);
}

/* -----------------------------------------------------------------------------
   2. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   3. REUSABLE COMPONENTS
   -------------------------------------------------------------------------- */

/* Eyebrow / section kicker label */
.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.eyebrow--terracotta { color: var(--color-terracotta); }
.eyebrow--forest { color: var(--color-forest-700); }

/* Buttons ------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-xl);
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
}

/* Primary — forest, terracotta on hover */
.btn--primary {
  background-color: var(--color-forest-800);
  color: var(--color-alabaster);
  box-shadow: var(--shadow-md);
}
/* Original hero & guarantee primary CTAs are shadow-md with NO hover:shadow —
   only the colour changes on hover. The XL submit button (below) is the one
   that elevates. */
.btn--primary:hover {
  background-color: var(--color-terracotta);
}

/* Secondary — translucent white on dark imagery */
.btn--secondary {
  background-color: rgba(var(--rgb-white), 0.8);
  color: var(--color-charcoal);
  border: 1px solid rgba(var(--rgb-black), 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.btn--secondary:hover { background-color: var(--color-white); }

/* Light — alabaster on dark sections */
.btn--light {
  background-color: var(--color-alabaster);
  color: var(--color-charcoal);
  box-shadow: var(--shadow-md);
}
.btn--light:hover {
  background-color: var(--color-terracotta);
  color: var(--color-white);
}

.btn--block { width: 100%; }
.btn--lg { padding: 1rem 1.5rem; }     /* py-4 px-6 */
.btn--xl {                             /* py-5, form submit: shadow-lg -> xl on hover */
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-lg);
}
.btn--xl:hover { box-shadow: var(--shadow-xl); }

/* -----------------------------------------------------------------------------
   Icons — premium inline SVG set (see inc/icons.php). Icons inherit currentColor
   and are sized per use via width/height; the rules below handle layout only.
   -------------------------------------------------------------------------- */
.gds-icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }

/* Announcement bar */
.announcement__phone { display: inline-flex; align-items: center; gap: 0.35rem; }
.announcement__guarantee .gds-icon { margin-right: 0.25rem; }

/* Zone selector tabs — icon + label */
.zone-tab { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Testimonial decorative icon */
.review-card__emoji { color: var(--color-forest-600); line-height: 0; display: inline-flex; }

/* Plant-card guarantee line */
.plant-card__guarantee { display: inline-flex; align-items: center; gap: 0.3rem; }

/* Footer contact + social */
.footer-brand__contact span .gds-icon { margin-right: 0.3rem; color: var(--color-terracotta-on-green); }
.site-footer__social a { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Quote CTA phone pill */
.quote-head__phone .gds-icon { margin-right: 0.3rem; vertical-align: -0.2em; }

/* Trailing arrow on inline "View Project" / "Read more" links */
.scope-label .gds-icon,
.entry-card__more .gds-icon { margin-left: 0.3em; }

/* Arrow chip inside the hero primary button */
.btn__chip { display: inline-flex; align-items: center; }

/* Zone panel feature rows — check icon + label */
.zone-panel__features > div { display: flex; align-items: center; gap: 0.5rem; }
.zone-panel__features .gds-icon { color: var(--color-forest-700); }

/* Small pill inside primary buttons (arrow chip) */
.btn__chip {
  color: var(--color-white);
  background-color: rgba(var(--rgb-alabaster), 0.1);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-full);
}

/* Tag / chip (forest bordered scope pills) ---------------------------------- */
.tag {
  display: inline-block;
  background-color: var(--color-forest-50);
  color: var(--color-forest-800);
  font-weight: 500;
  font-size: 11px;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-forest-100);
}
.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Generic card -------------------------------------------------------------- */
.card {
  background-color: var(--color-white);
  border: 1px solid rgba(var(--rgb-black), 0.05);
  border-radius: var(--radius-3xl);
}

/* Section header block ------------------------------------------------------ */
.section-title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.875rem;
  line-height: 1.2;        /* text-3xl LH (bumped to 1 at >=640 with text-5xl) */
  color: var(--color-charcoal);
}
.section-lead {
  color: rgba(var(--rgb-charcoal), 0.7);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
}
.rule-left {
  border-left: 2px solid var(--color-forest-600);
  padding-left: 1rem;
}

/* Visually-hidden utility (a11y) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.is-hidden { display: none !important; }

/* Skip link — hidden until keyboard-focused, then revealed top-left. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: 0.75rem 1.25rem;
  background-color: var(--color-forest-800);
  color: var(--color-alabaster);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: var(--shadow-lg);
}
/* The skip-link target receives focus programmatically; suppress the ring. */
#primary:focus { outline: none; }

/* -----------------------------------------------------------------------------
   4. MOTION & EFFECTS
   -------------------------------------------------------------------------- */

/* Scroll reveal — the hidden state is gated behind html.js so that if the
   script fails to load/run, content stays fully visible (no blank storefront). */
.reveal {
  transition: opacity 0.7s var(--ease-reveal), transform 0.7s var(--ease-reveal);
}
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Image zoom on card hover */
.img-zoom {
  transition: transform 0.8s var(--ease-reveal);
}
.group:hover .img-zoom {
  transform: scale(1.06);
}

/* Frosted-glass sticky nav */
.nav-glass {
  background: rgba(var(--rgb-alabaster), 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Shimmer placeholder (image loading state) */
.shimmer {
  background: linear-gradient(90deg,
    var(--color-sandstone) 0%,
    var(--color-forest-50) 50%,
    var(--color-sandstone) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Pulse (announcement dot) */
.pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Ping (toast dot) */
.ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* -----------------------------------------------------------------------------
   5. ANNOUNCEMENT BAR
   -------------------------------------------------------------------------- */
.announcement {
  background-color: var(--color-forest-900);
  color: var(--color-alabaster);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--color-forest-800);
}
.announcement__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-align: center;
}
.announcement__tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.announcement__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--color-terracotta-on-green);
  display: inline-block;
  flex-shrink: 0;
}
.announcement__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.announcement__guarantee { display: none; }
.announcement__phone {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.025em;
  text-decoration: underline;
  text-decoration-color: rgba(var(--rgb-white), 0.5);
}
.announcement__phone:hover { text-decoration-color: var(--color-white); }

/* -----------------------------------------------------------------------------
   6. SITE HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(var(--rgb-black), 0.05);
  padding: 0.375rem 1.5rem;
  transition: all 0.3s;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.brand__mark {
  background-color: var(--color-forest-800);
  color: var(--color-alabaster);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}
/* Admin-set Custom Logo (renders its own <a class="custom-logo-link">).
   Sized for a wide wordmark lockup rather than a square icon. */
.custom-logo-link { display: inline-flex; align-items: center; flex-shrink: 0; }
/* Scoped to .site-header (specificity 0,2,0) so it beats WooCommerce's
   `.woocommerce img { height:auto; max-width:100% }` on shop/cart/etc. pages,
   which otherwise blows the header logo up to full size. */
.site-header .custom-logo {
  width: auto;
  height: 3.5rem; /* compact on phones; scaled up on wider screens below */
  max-width: 450px;
  object-fit: contain;
  display: block;
}
@media (min-width: 768px) {
  .site-header .custom-logo { height: 5rem; }
}
@media (min-width: 1024px) {
  .site-header .custom-logo { height: 6.75rem; }
}
.brand__text { display: flex; flex-direction: column; }
.brand__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--color-charcoal);
}
.brand__tagline {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-forest-600);
  font-weight: 700;
}

.main-nav {
  display: none;
  align-items: center;
  gap: 1.75rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
}
.nav-link {
  color: rgba(var(--rgb-charcoal), 0.8);
  transition: color 0.2s;
}
/* When populated by wp_nav_menu, the <ul> collapses so its <li>s become
   flex children of .main-nav (matches the prototype's bare-anchor layout). */
.main-nav-list { display: contents; }
.nav-link:hover { color: var(--color-terracotta); }
.nav-link.is-active,
.current-menu-item > .nav-link,
.current_page_item > .nav-link {
  color: var(--color-terracotta);
  font-weight: 700;
}

/* Dropdown submenus (Plants / Services) */
.main-nav-list .menu-item-has-children { position: relative; }
.main-nav-list .menu-item-has-children > .nav-link::after {
  content: "▾";
  margin-left: 0.3rem;
  font-size: 0.7em;
  opacity: 0.6;
}
.main-nav-list .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
}
@media (min-width: 1024px) {
  .main-nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 13rem;
    background: rgba(var(--rgb-alabaster), 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--rgb-black), 0.06);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 60;
  }
  .main-nav-list .menu-item-has-children:hover > .sub-menu,
  .main-nav-list .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .main-nav-list .sub-menu .nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 600;
  }
  .main-nav-list .sub-menu .nav-link:hover { background-color: var(--color-forest-50); }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.bag-btn {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background-color: var(--color-sandstone);
  padding: 0.625rem 1rem;
  border-radius: var(--radius-xl);
  transition: background-color 0.2s;
}
.bag-btn:hover { background-color: var(--color-forest-50); }
.bag-btn__count { color: var(--color-terracotta); font-weight: 800; }

.cta-quote {
  background-color: var(--color-forest-800);
  color: var(--color-alabaster);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all 0.3s;
}
.cta-quote:hover {
  background-color: var(--color-terracotta);
  box-shadow: var(--shadow-xl);
}

/* Mobile navigation toggle (hamburger) — hidden at >=1024px */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-sandstone);
  transition: background-color 0.2s;
}
.nav-toggle:hover { background-color: var(--color-forest-50); }
.nav-toggle__bar {
  width: 1.25rem;
  height: 2px;
  background-color: var(--color-charcoal);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(4) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu panel: reveal .main-nav below the header when toggled open */
@media (max-width: 1023px) {
  .main-nav.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(var(--rgb-alabaster), 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(var(--rgb-black), 0.05);
    box-shadow: var(--shadow-lg);
    padding: 0.75rem 1.5rem 1.25rem;
    /* Long menus must scroll inside the panel — it's anchored to the fixed
       header, so the page can't scroll to reveal items past the fold. The
       fallback caps it below a tall (announcement + nav) header; JS refines
       max-height to the exact offset when the menu opens. */
    max-height: calc(100vh - 10rem);
    max-height: calc(100dvh - 10rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav.is-open .main-nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.9375rem;
  }
  .main-nav.is-open .nav-link {
    display: block;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(var(--rgb-black), 0.05);
  }
  .main-nav.is-open .menu-item:last-child .nav-link { border-bottom: 0; }
  /* Submenus expand inline (indented) on mobile */
  .main-nav.is-open .sub-menu { padding: 0 0 0 1rem; }
  .main-nav.is-open .menu-item-has-children > .nav-link::after { content: ""; margin: 0; }
  .main-nav.is-open .sub-menu .nav-link { font-size: 0.875rem; color: rgba(var(--rgb-charcoal), 0.75); }
}

/* -----------------------------------------------------------------------------
   6b. HOMEPAGE — transparent topbar overlaid on the hero (solidifies on scroll)
   -------------------------------------------------------------------------- */
/* Off the homepage the wrapper is layout-neutral, so header behaviour there is
   completely unchanged. On the homepage it becomes a fixed, transparent overlay
   sitting directly on the hero photo; JS adds .is-stuck past the fold to bring
   back the solid bar (announcement collapses, nav turns to frosted glass). */
.site-topbar { display: contents; }

body.home .site-topbar {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
body.admin-bar.home .site-topbar { top: 32px; }

/* Transparent state — over the hero */
body.home .site-topbar .announcement {
  background-color: transparent;
  border-bottom-color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
body.home .site-topbar .site-header {
  position: relative; /* stays the containing block for the mobile menu panel */
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body.home .site-topbar:not(.is-stuck) .custom-logo { filter: brightness(0) invert(1); }
body.home .site-topbar:not(.is-stuck) .brand__name { color: var(--color-white); }
body.home .site-topbar:not(.is-stuck) .brand__tagline { color: rgba(var(--rgb-white), 0.8); }
body.home .site-topbar:not(.is-stuck) .bag-btn {
  background-color: rgba(var(--rgb-white), 0.12);
  color: var(--color-white);
  border: 1px solid rgba(var(--rgb-white), 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.home .site-topbar:not(.is-stuck) .bag-btn:hover { background-color: rgba(var(--rgb-white), 0.22); }
body.home .site-topbar:not(.is-stuck) .bag-btn__count { color: var(--color-terracotta-on-green); }
body.home .site-topbar:not(.is-stuck) .nav-toggle {
  background-color: rgba(var(--rgb-white), 0.12);
  border: 1px solid rgba(var(--rgb-white), 0.3);
}
body.home .site-topbar:not(.is-stuck) .nav-toggle__bar { background-color: var(--color-white); }

/* Desktop inline nav sits on the photo, so light it up; the mobile menu panel
   is solid, so its links keep the default dark colour. */
@media (min-width: 1024px) {
  body.home .site-topbar:not(.is-stuck) .nav-link { color: rgba(var(--rgb-white), 0.92); }
  body.home .site-topbar:not(.is-stuck) .nav-link:hover,
  body.home .site-topbar:not(.is-stuck) .current-menu-item > .nav-link,
  body.home .site-topbar:not(.is-stuck) .current_page_item > .nav-link { color: var(--color-terracotta-on-green); }
  body.home .site-topbar:not(.is-stuck) .main-nav-list .menu-item-has-children > .nav-link::after { opacity: 0.85; }
  /* The dropdown submenu sits on a solid light panel even at the top of the
     page, so its links must stay dark rather than the bar's white. */
  body.home .site-topbar:not(.is-stuck) .sub-menu .nav-link { color: rgba(var(--rgb-charcoal), 0.8); }
  body.home .site-topbar:not(.is-stuck) .sub-menu .nav-link:hover,
  body.home .site-topbar:not(.is-stuck) .sub-menu .current-menu-item > .nav-link,
  body.home .site-topbar:not(.is-stuck) .sub-menu .current_page_item > .nav-link { color: var(--color-terracotta); }
}

/* Stuck state — scrolled past the hero: both bars turn solid/opaque and stay
   visible (the announcement keeps its green, the nav becomes frosted glass). */
body.home .site-topbar.is-stuck .announcement {
  background-color: var(--color-forest-900);
  border-bottom-color: var(--color-forest-800);
}
body.home .site-topbar.is-stuck .site-header {
  background: var(--color-alabaster);
  border-bottom: 1px solid rgba(var(--rgb-black), 0.05);
  box-shadow: var(--shadow-md);
}

/* On phones/tablets the fixed header is tall relative to the viewport, so start
   the hero content below it (and let the hero grow with its content). Desktop
   keeps the centred 85vh layout, where centring already clears the header. */
body.home .hero {
  height: auto;
  min-height: 100vh;
  align-items: flex-start;
  padding-top: 8.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 1024px) {
  body.home .hero {
    height: 85vh;
    min-height: 650px;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* -----------------------------------------------------------------------------
   7. HERO SLIDESHOW
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: 85vh;
  min-height: 650px;
  display: flex;
  align-items: center;
  background-color: var(--color-charcoal);
  overflow: hidden;
  border-bottom: 1px solid rgba(var(--rgb-black), 0.1);
}
.hero__slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 0;
  transition: opacity 1.2s ease-in-out;
}
.hero__slide.is-active {
  opacity: 1;
  z-index: 10;
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 7s ease-out;
}
.hero__slide.is-active img { transform: scale(1.05); }
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(var(--rgb-charcoal), 0.55),
    rgba(var(--rgb-charcoal), 0.28) 45%,
    rgba(var(--rgb-charcoal), 0.08));
}

/* Slider controls */
.hero__controls {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
}
.hero__nav { display: flex; gap: 0.5rem; }
.hero__arrow {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
  background-color: rgba(var(--rgb-alabaster), 0.1);
  color: var(--color-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(var(--rgb-white), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: var(--shadow-md);
}
.hero__arrow:hover { background-color: rgba(var(--rgb-alabaster), 0.3); }
.hero__arrow svg { width: 1.25rem; height: 1.25rem; }

/* Hero content card */
.hero__content {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 1.5rem;
  padding-top: 2rem;
}
.hero__card {
  max-width: 42rem;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  background-color: rgba(var(--rgb-white), 0.15);
  border: 1px solid rgba(var(--rgb-white), 0.3);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.25rem;
  color: var(--color-white);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 1.25rem;
  text-shadow: 0 2px 24px rgba(var(--rgb-charcoal), 0.45);
}
.hero__title-accent {
  color: var(--color-forest-100);
}
.hero__desc {
  color: rgba(var(--rgb-white), 0.92);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.625;
  margin-bottom: 2rem;
  border-left: 2px solid var(--color-terracotta-on-green);
  padding-left: 1rem;
  max-width: 32rem;
  text-shadow: 0 1px 12px rgba(var(--rgb-charcoal), 0.4);
}
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
}
.hero__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid rgba(var(--rgb-white), 0.25);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  color: var(--color-white);
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero__trust-item--wide { display: none; }
.check-badge {
  width: 1rem;
  height: 1rem;
  border-radius: var(--radius-full);
  background-color: var(--color-forest-600);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 8px;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   8. PROJECTS SHOWCASE
   -------------------------------------------------------------------------- */
.section {
  padding: 6rem 1.5rem;
}
.section--projects {
  background-color: rgba(var(--rgb-sandstone), 0.5);
  border-bottom: 1px solid rgba(var(--rgb-black), 0.05);
}
.section--zones {
  background-color: var(--color-white);
  border-bottom: 1px solid rgba(var(--rgb-black), 0.05);
  padding-block: 5rem;
}
.section--value {
  background-color: var(--color-alabaster);
  border-bottom: 1px solid rgba(var(--rgb-black), 0.05);
  padding-block: 5rem;
}
.section--reviews {
  background-color: var(--color-white);
  border-top: 1px solid rgba(var(--rgb-black), 0.05);
  border-bottom: 1px solid rgba(var(--rgb-black), 0.05);
}
.section--store {
  background-color: rgba(var(--rgb-sandstone), 0.5);
  border-top: 1px solid rgba(var(--rgb-black), 0.05);
}

.section-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.section-head__lead {
  margin-top: 0.5rem;
  max-width: 42rem;
}
.section-head--center {
  text-align: center;
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: 3rem;
}
.section-head--gap-lg { margin-bottom: 4rem; }  /* reviews header used mb-16 */

/* Filter tab groups (projects + store) */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-white);
  padding: 0.375rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(var(--rgb-black), 0.05);
  box-shadow: var(--shadow-sm);
}
.filter-tab {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-charcoal);
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-lg);
  transition: all 0.3s;
}
.filter-tab:hover { background-color: var(--color-forest-50); }
.filter-tab.is-active {
  background-color: var(--color-forest-800);
  color: var(--color-alabaster);
  box-shadow: var(--shadow-sm);
}
.filter-tab--sale { color: var(--color-terracotta); }
.filter-tab--sale:hover { background-color: var(--color-forest-50); }
.filter-tab--sale.is-active {
  background-color: var(--color-terracotta);
  color: var(--color-white);
}

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Project card */
.project-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid rgba(var(--rgb-black), 0.05);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.3s, opacity 0.3s;
}
.project-card:hover { box-shadow: var(--shadow-xl); }
.project-card__media {
  position: relative;
  height: 18rem;
  overflow: hidden;
  background-color: var(--color-sandstone);
}
.project-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  /* Keep the badge above the image, which becomes a stacking context on hover
     (transform: scale) and would otherwise paint over an un-layered badge. */
  z-index: 2;
  background-color: rgba(var(--rgb-forest-800), 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--color-alabaster);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-lg);
}
.media-badge--sale {
  background-color: var(--color-terracotta);
  color: var(--color-white);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
/* Plant badges originally used px-3 py-1 rounded-md (tighter than project badges) */
.media-badge--plant {
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
}
.project-card__body {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.project-card__location {
  font-size: 0.75rem;
  color: var(--color-forest-700);
  font-family: var(--font-heading);
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}
.project-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-charcoal);
  margin-bottom: 0.75rem;
  transition: color 0.2s;
}
.project-card:hover .project-card__title { color: var(--color-terracotta); }
.project-card__desc {
  color: rgba(var(--rgb-charcoal), 0.7);
  font-size: 0.75rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}
.project-card__scope {
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--rgb-black), 0.05);
}
.scope-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  color: rgba(var(--rgb-charcoal), 0.5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

/* -----------------------------------------------------------------------------
   9. ADELAIDE ZONE SELECTOR
   -------------------------------------------------------------------------- */
.zone-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.zone-tab {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-xl);
  background-color: var(--color-sandstone);
  color: var(--color-charcoal);
  border: 1px solid rgba(var(--rgb-black), 0.05);
  transition: all 0.3s;
}
.zone-tab:hover { background-color: var(--color-forest-50); }
.zone-tab.is-active {
  background-color: var(--color-forest-800);
  color: var(--color-alabaster);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.zone-stage {
  background-color: rgba(var(--rgb-sandstone), 0.4);
  border-radius: var(--radius-3xl);
  padding: 2rem;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(var(--rgb-black), 0.05);
  max-width: 64rem;
  margin-inline: auto;
  transition: all 0.3s;
}
.zone-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
.zone-panel[hidden] { display: none; }
.zone-panel__body { display: flex; flex-direction: column; gap: 1rem; }
.zone-panel__region {
  align-self: flex-start;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-forest-700);
  background-color: var(--color-forest-50);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.zone-panel__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-charcoal);
}
.zone-panel__desc {
  color: rgba(var(--rgb-charcoal), 0.7);
  font-size: 0.875rem;
  line-height: 1.625;
}
.zone-panel__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--rgb-black), 0.05);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--color-charcoal);
}
.zone-panel__media {
  background-color: var(--color-sandstone);
  border-radius: var(--radius-2xl);
  height: 16rem;
  overflow: hidden;
}
.zone-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -----------------------------------------------------------------------------
   10. VALUE PROPOSITION
   -------------------------------------------------------------------------- */
.value {
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
}
.value__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.875rem;
  color: var(--color-charcoal);
  margin-bottom: 1.5rem;
}
.value__statement {
  color: var(--color-charcoal);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}
.value__body {
  color: rgba(var(--rgb-charcoal), 0.7);
  font-size: 1rem;
  line-height: 1.625;
}

/* -----------------------------------------------------------------------------
   11. PROCESS (7-STEP)
   -------------------------------------------------------------------------- */
.section--process {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 6rem 1.5rem;
}
.process-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 4rem;
}
.process-head__note {
  color: rgba(var(--rgb-charcoal), 0.7);
  max-width: 28rem;
  font-size: 0.875rem;
  margin-top: 1rem;
  border-left: 2px solid var(--color-forest-600);
  padding-left: 1rem;
}
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.process-card {
  background-color: var(--color-white);
  padding: 2rem;
  border-radius: var(--radius-3xl);
  border: 1px solid rgba(var(--rgb-black), 0.05);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s;
}
.process-card:hover { box-shadow: var(--shadow-md); }
.process-card__num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.875rem;
  color: var(--color-terracotta);
  margin-bottom: 0.75rem;
}
.process-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-charcoal);
  margin-bottom: 0.5rem;
}
.process-card__desc {
  color: rgba(var(--rgb-charcoal), 0.7);
  font-size: 0.75rem;
  line-height: 1.625;
}

.process-step7 {
  margin-top: 2rem;
  background-color: var(--color-forest-800);
  color: var(--color-alabaster);
  border-radius: var(--radius-3xl);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-forest-800);
}
.process-step7__eyebrow {
  color: var(--color-forest-100);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.process-step7__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  margin-top: 0.25rem;
  color: var(--color-white);
}
.process-step7__note {
  color: rgba(var(--rgb-alabaster), 0.8);
  font-size: 0.75rem;
  margin-top: 0.5rem;
}
.process-step7 .btn { padding: 1rem 2rem; white-space: nowrap; }  /* px-8 py-4 */

/* --- Process as an animated vertical timeline. Layout + scroll motion adapted
   from the redesign's "how we work" block; GDS colours/type kept. The card grid
   becomes a single-column timeline whose fill grows on scroll and whose nodes
   light up as they pass (driven by initProcessTimeline() in main.js). Without JS
   it degrades to a clean numbered list. --- */
@media (min-width: 1024px) {
  /* Two-column: sticky heading aside on the left, timeline on the right. */
  .section--process:has(.gds-timeline) {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    column-gap: 5rem;
    align-items: start;
  }
  .section--process:has(.gds-timeline) .process-head {
    grid-column: 1;
    margin-bottom: 0;
    position: sticky;
    top: 9rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .section--process:has(.gds-timeline) .process-head__note { margin-top: 1rem; }
  .section--process:has(.gds-timeline) .gds-timeline { grid-column: 2; }
}

.process-grid.gds-timeline {
  display: block;
  position: relative;
  gap: 0;
}
.gds-timeline .gds-tl-track,
.gds-timeline .gds-tl-fill {
  position: absolute;
  left: calc(1.625rem - 1px);
  top: 1.625rem;
  width: 2px;
  height: 0;
}
.gds-timeline .gds-tl-track { background: rgba(var(--rgb-charcoal), 0.12); }
.gds-timeline .gds-tl-fill { background: var(--color-terracotta); transition: height 0.25s linear; z-index: 1; }

.gds-timeline .process-card {
  position: relative;
  display: block;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 2.5rem 4.75rem; /* room for the node + gap */
}
.gds-timeline .process-card:hover { box-shadow: none; }
.gds-timeline .process-card:last-child { padding-bottom: 0; }
/* Dim only the text until the fill reaches a step — never the card/node, so the
   opaque node keeps hiding the line that runs behind it. */
.gds-timeline.is-enhanced .process-card__title,
.gds-timeline.is-enhanced .process-card__desc { opacity: 0.5; transition: opacity 0.4s ease; }
.gds-timeline .process-card.is-active .process-card__title,
.gds-timeline .process-card.is-active .process-card__desc { opacity: 1; }

/* The step number becomes the timeline node. */
.gds-timeline .process-card__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid rgba(var(--rgb-forest-800), 0.3);
  color: var(--color-forest-800);
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.gds-timeline .process-card.is-active .process-card__num {
  background: var(--color-forest-800);
  border-color: var(--color-forest-800);
  color: var(--color-white);
}
.gds-timeline .process-card__title { margin-top: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .gds-timeline.is-enhanced .process-card__title,
  .gds-timeline.is-enhanced .process-card__desc { opacity: 1; }
}

/* "Book Onsite Quote" CTA, below the timeline steps (aligned under the copy). */
.process-cta { margin-top: 2rem; padding-left: 4.75rem; }
@media (min-width: 1024px) {
  .section--process:has(.gds-timeline) .process-cta { grid-column: 2; }
}

/* Aside figure — the process image, shown only in the desktop two-column aside. */
.process-aside-fig { display: none; }
@media (min-width: 1024px) {
  .section--process:has(.gds-timeline) .process-aside-fig {
    display: block;
    margin-top: 2rem;
    max-width: 22rem;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
  .section--process:has(.gds-timeline) .process-aside-fig img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* -----------------------------------------------------------------------------
   12. REVIEWS
   -------------------------------------------------------------------------- */
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.review-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgba(var(--rgb-sandstone), 0.5);
  padding: 2rem;
  border-radius: var(--radius-3xl);
  border: 1px solid rgba(var(--rgb-black), 0.05);
}
.review-card__stars {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-terracotta);
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.review-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-charcoal);
  margin-bottom: 0.75rem;
}
.review-card__quote {
  color: rgba(var(--rgb-charcoal), 0.7);
  font-size: 0.75rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}
.review-card__footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--rgb-black), 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.review-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-charcoal);
  display: block;
}
.review-card__loc {
  font-size: 11px;
  color: var(--color-forest-700);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.review-card__emoji { font-size: 1.5rem; }

/* -----------------------------------------------------------------------------
   13. PLANT STORE
   -------------------------------------------------------------------------- */
.store-head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
.store-head__lead {
  color: rgba(var(--rgb-charcoal), 0.7);
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.plant-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid rgba(var(--rgb-black), 0.05);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s, border-color 0.3s, opacity 0.3s;
}
.plant-card:hover {
  box-shadow: var(--shadow-xl);
  border-color: var(--color-forest-600);
}
.plant-card__media {
  position: relative;
  height: 16rem;
  overflow: hidden;
  /* White to match the plant photos' white background (overrides .shimmer). */
  background: var(--color-white);
}
.plant-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.75rem;
}
.plant-card__body {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.plant-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.25rem;
}
.plant-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-charcoal);
  transition: color 0.2s;
}
.plant-card:hover .plant-card__title { color: var(--color-terracotta); }
.plant-card__price {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-charcoal);
  white-space: nowrap;
}
.plant-card__price-group { text-align: right; }
.plant-card__price-old {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8; /* slate-400 */
  text-decoration: line-through;
}
.plant-card__price--sale {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-terracotta);
}
/* WooCommerce get_price_html() sale markup (homepage featured products) */
.plant-card__price del {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: line-through;
}
.plant-card__price ins {
  text-decoration: none;
  background: transparent;
  color: var(--color-terracotta);
  font-weight: 800;
}
.plant-card__price .woocommerce-Price-amount { font-family: var(--font-heading); }
/* "View Project →" link in a project card scope row */
.scope-label--link { color: var(--color-terracotta); }
.scope-label--link:hover { color: var(--color-charcoal); }
.plant-card__spec {
  display: block;
  font-size: 0.75rem;
  color: var(--color-forest-700);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.plant-card__desc {
  color: rgba(var(--rgb-charcoal), 0.7);
  font-size: 0.75rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}
.plant-card__footer {
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--rgb-black), 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.plant-card__guarantee {
  font-size: 11px;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-terracotta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.add-to-cart {
  background-color: var(--color-forest-800);
  color: var(--color-alabaster);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.3s;
  white-space: nowrap;
}
.add-to-cart:hover { background-color: var(--color-terracotta); }

/* Shipping / quality features bar */
.features-bar {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(var(--rgb-black), 0.05);
  padding-top: 3rem;
}
.feature-tile {
  background-color: var(--color-white);
  padding: 1.5rem;
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(var(--rgb-black), 0.05);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-charcoal);
}
.feature-tile__num {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
  color: var(--color-terracotta);
}
.feature-tile__label {
  display: block;
  font-weight: 800;
  font-size: 0.75rem;
}
.feature-tile__sub {
  display: block;
  font-size: 11px;
  color: rgba(var(--rgb-charcoal), 0.6);
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: normal;
  margin-top: 0.125rem;
}

/* -----------------------------------------------------------------------------
   14. GUARANTEE
   -------------------------------------------------------------------------- */
.guarantee {
  padding-block: 6rem;
  background-color: var(--color-forest-800);
  color: var(--color-white);
  border-top: 1px solid var(--color-forest-800);
}
.guarantee__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.guarantee__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
.guarantee__eyebrow {
  display: block;
  color: var(--color-terracotta-on-green);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}
.guarantee__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.875rem;
  color: var(--color-white);
  margin-bottom: 1.5rem;
}
.guarantee__intro {
  color: rgba(var(--rgb-alabaster), 0.9);
  font-size: 1rem;
  line-height: 1.625;
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.guarantee__terms {
  background-color: rgba(var(--rgb-forest-800), 0.8);
  padding: 2rem;
  border-radius: var(--radius-3xl);
  border: 1px solid var(--color-forest-700);
  color: rgba(var(--rgb-alabaster), 0.8);
  font-size: 0.75rem;
  line-height: 1.625;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.guarantee__terms-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-white);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-forest-700);
  padding-bottom: 0.75rem;
}
.guarantee__terms-list {
  list-style: disc;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.guarantee__terms-note {
  font-size: 11px;
  color: rgba(var(--rgb-alabaster), 0.6);
  font-style: italic;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-forest-700);
}

.guarantee__aside {
  display: flex;
  justify-content: center;
}
.guarantee-card {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  color: var(--color-charcoal);
  padding: 2.5rem;
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-2xl);
  border: 1px solid rgba(var(--rgb-white), 0.1);
  text-align: center;
  width: 100%;
  max-width: 28rem;
}
.guarantee-card__icon {
  width: 4rem;
  height: 4rem;
  background-color: var(--color-sandstone);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.875rem;
  color: var(--color-terracotta);
}
.guarantee-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-charcoal);
}
.guarantee-card__desc {
  color: rgba(var(--rgb-charcoal), 0.7);
  font-size: 0.75rem;
  line-height: 1.625;
  margin-bottom: 2rem;
}

/* -----------------------------------------------------------------------------
   15. QUOTE / CONTACT FORM
   -------------------------------------------------------------------------- */
.section--quote {
  max-width: 56rem;
  margin-inline: auto;
  padding: 6rem 1.5rem;
}
.quote-head {
  text-align: center;
  margin-bottom: 4rem;
}
.quote-head__lead {
  color: rgba(var(--rgb-charcoal), 0.7);
  font-size: 0.875rem;
  margin-top: 0.75rem;
  max-width: 28rem;
  margin-inline: auto;
}
.quote-head__phone {
  margin-top: 1rem;
  display: inline-block;
  background-color: var(--color-sandstone);
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-forest-800);
  border: 1px solid rgba(var(--rgb-black), 0.05);
}
.quote-head__phone a {
  color: var(--color-terracotta);
  text-decoration: underline;
}
.quote-head__phone a:hover { color: var(--color-charcoal); }

.quote-panel {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: var(--radius-3xl);
  padding: 2rem;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(var(--rgb-black), 0.05);
}
.quote-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.field { display: flex; flex-direction: column; }
.field__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-charcoal);
  margin-bottom: 0.5rem;
}
.field__control {
  width: 100%;
  background-color: rgba(var(--rgb-sandstone), 0.5);
  border: 1px solid rgba(var(--rgb-black), 0.1);
  border-radius: var(--radius-xl);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
  color: var(--color-charcoal);
  font-weight: 400;
  transition: border-color 0.2s, background-color 0.2s;
}
.field__control:focus {
  outline: none;
  border-color: var(--color-terracotta);
  background-color: var(--color-white);
}
select.field__control { font-weight: 500; }
textarea.field__control { resize: vertical; min-height: 7rem; }

/* -----------------------------------------------------------------------------
   Gravity Forms — restyle the "orbital" theme to the GDS design system.
   Applies on the homepage quote panel and the contact page. High specificity +
   !important because GF's own stylesheet loads after the theme CSS.
   -------------------------------------------------------------------------- */
.gform_wrapper { --gf-color-primary: var(--color-forest-800); }
.gform_wrapper .gform_required_legend { display: none; }
.gform_wrapper .gform_fields { row-gap: 1.5rem !important; column-gap: 1.25rem !important; }

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-charcoal);
  margin-bottom: 0.5rem;
}
.gform_wrapper .gfield_required { color: var(--color-terracotta); }

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
  width: 100% !important;
  height: auto !important;      /* override GF's fixed 38px height that clips the padded text */
  min-height: 3rem !important;
  background-color: rgba(var(--rgb-sandstone), 0.5) !important;
  border: 1px solid rgba(var(--rgb-black), 0.1) !important;
  border-radius: var(--radius-xl) !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  color: var(--color-charcoal) !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
}
/* Room for GF's dropdown chevron on the right of the select. */
.gform_wrapper select { padding-right: 2.5rem !important; }
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
  outline: none !important;
  border-color: var(--color-terracotta) !important;
  background-color: var(--color-white) !important;
}
.gform_wrapper textarea { min-height: 7rem !important; resize: vertical; }
.gform_wrapper select { font-weight: 500 !important; }
.gform_wrapper ::placeholder { color: rgba(var(--rgb-charcoal), 0.45); }

.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer { margin: 1.5rem 0 0 !important; padding: 0 !important; }
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper button.gform_button,
.gform_wrapper input.gform_button {
  width: 100% !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--color-alabaster) !important;
  background-color: var(--color-forest-800) !important;
  border: none !important;
  border-radius: var(--radius-xl) !important;
  padding: 1.15rem 1.5rem !important;
  box-shadow: var(--shadow-lg) !important;
  cursor: pointer;
  transition: background-color 0.3s, box-shadow 0.3s !important;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper button.gform_button:hover,
.gform_wrapper input.gform_button:hover {
  background-color: var(--color-terracotta) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* Validation + confirmation */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select { border-color: var(--color-terracotta) !important; }
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-terracotta);
  background: none;
  border: none;
  padding: 0.25rem 0 0;
}
.gform_wrapper .gform_validation_errors {
  background: rgba(var(--rgb-terracotta), 0.08);
  border: 1px solid rgba(var(--rgb-terracotta), 0.3);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.gform_confirmation_message {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-forest-800);
  padding: 1.5rem 0;
}

/* -----------------------------------------------------------------------------
   Contact page — branded info panel + form card
   -------------------------------------------------------------------------- */
/* The default article width (.entry-content 46rem) is too narrow — widen the
   wrapper for any page that contains a .contact-grid. */
.entry-wrap:has(.contact-grid) { max-width: 72rem; }
.entry-content:has(.contact-grid) { max-width: none; font-size: 1rem; }

.contact-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; text-align: left; }
/* Info panel is the lighter/secondary block, so the form (primary) gets more room. */
@media (min-width: 900px) {
  .contact-grid--split { grid-template-columns: 5fr 7fr; gap: 2.5rem; }
}

/* Branded green info panel */
.contact-info {
  background-color: var(--color-forest-800);
  color: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
}
/* Prefixed with .entry-content to beat the `.entry-content h3` charcoal rule. */
.entry-content .contact-info__title { font-family: var(--font-heading); font-weight: 800; font-size: 1.5rem; color: var(--color-white); margin: 0 0 0.75rem; }
.contact-info__lead { color: var(--color-white); line-height: 1.7; font-size: 0.9375rem; margin: 0 0 1.5rem; }
.contact-info__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info__item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-info__item .gds-icon { flex: 0 0 auto; color: var(--color-white); margin-top: 0.15rem; }
.contact-info__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.contact-info__label { font-family: var(--font-heading); font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-white); }
.contact-info__body span:not(.contact-info__label):not(.contact-info__meta) { color: var(--color-white); line-height: 1.5; }
/* Prefixed with .entry-content to beat the `.entry-content a` colour rule that loads later. */
.entry-content .contact-info__body a { color: var(--color-white); text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: 1.125rem; width: fit-content; }
.entry-content .contact-info__body a:hover { color: var(--color-terracotta); }
.contact-info__meta { font-size: 0.8125rem; color: var(--color-white); margin-top: 0.15rem; }

/* Form card (primary) */
.contact-col--form {
  background-color: var(--color-white);
  border: 1px solid rgba(var(--rgb-black), 0.05);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}
.contact-col--form > h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.375rem;
  color: var(--color-charcoal);
  margin: 0 0 1.5rem;
}
@media (min-width: 900px) {
  .contact-info { padding: 2.75rem; }
  .contact-col--form { padding: 2.5rem; }
}

/* -----------------------------------------------------------------------------
   Page / project sidebar — content + sticky "Get in touch" card
   -------------------------------------------------------------------------- */
.page-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.page-main { min-width: 0; }
.page-main .entry-content { max-width: none; margin-inline: 0; }
@media (min-width: 900px) {
  .entry-wrap:has(.page-layout) { max-width: 72rem; }
  .page-layout { grid-template-columns: minmax(0, 1fr) 19rem; gap: 3rem; align-items: start; }
  .page-sidebar { position: sticky; top: 9rem; } /* clear the ~7.5rem sticky header + a gap */
}

.aside-card {
  background-color: var(--color-forest-900);
  color: var(--color-white);
  border-radius: var(--radius-2xl);
  padding: 1.75rem;
}
.aside-card .gds-icon { flex: 0 0 auto; color: var(--color-terracotta-on-green); }
.aside-card__eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-terracotta-on-green);
  margin-bottom: 1.25rem;
}
.aside-card__label { display: block; font-size: 0.8125rem; color: rgba(var(--rgb-white), 0.8); }
.aside-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-white);
  margin: 0.35rem 0 0.15rem;
}
.aside-card__phone:hover { color: var(--color-terracotta-on-green); }
.aside-card__hours { display: block; font-size: 0.8125rem; color: rgba(var(--rgb-white), 0.7); }
.aside-card__cta { margin-top: 1.5rem; }
.aside-card__facts {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(var(--rgb-white), 0.15);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.aside-card__facts li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(var(--rgb-white), 0.92);
}
.aside-card__facts .gds-icon { margin-top: 0.1rem; }

/* -----------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-forest-900);
  color: var(--color-alabaster);
  padding: 4rem 1.5rem 3rem;
  border-top: 1px solid var(--color-forest-900);
}
.site-footer__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-brand__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  display: block;
  margin-bottom: 1rem;
  color: var(--color-white);
}
.footer-brand__desc {
  color: rgba(var(--rgb-alabaster), 0.7);
  font-size: 0.875rem;
  max-width: 24rem;
  margin-bottom: 1.5rem;
  line-height: 1.625;
}
.footer-brand__contact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(var(--rgb-alabaster), 0.9);
  font-weight: 500;
}
.footer-brand__contact a {
  color: var(--color-terracotta-on-green);
  font-weight: 700;
  text-decoration: underline;
}
.footer-brand__contact a:hover { color: var(--color-white); }

.footer-col__title {
  font-size: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-terracotta-on-green);
  display: block;
  margin-bottom: 1rem;
}
.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: rgba(var(--rgb-alabaster), 0.7);
}
.footer-col__list a { transition: color 0.2s; }
.footer-col__list a:hover { color: var(--color-white); }

.site-footer__bottom {
  max-width: var(--container-max);
  margin-inline: auto;
  border-top: 1px solid var(--color-forest-800);
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  color: rgba(var(--rgb-alabaster), 0.5);
}
.site-footer__social {
  display: flex;
  gap: 1.5rem;
}
.site-footer__social a { transition: color 0.2s; }
.site-footer__social a:hover { color: var(--color-white); }

/* -----------------------------------------------------------------------------
   17. TOAST
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--color-forest-800);
  color: var(--color-white);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  border: 1px solid var(--color-forest-700);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transform: translateY(6rem);
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
}
.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.toast__dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--color-terracotta-on-green);
  display: inline-block;
  flex-shrink: 0;
}

/* =============================================================================
   18. RESPONSIVE — mobile-first min-width breakpoints
   sm = 640px, md = 768px, lg = 1024px
   ========================================================================== */

/* --- sm: 640px ------------------------------------------------------------ */
@media (min-width: 640px) {
  .section { padding-inline: 3rem; }
  .section--process { padding-inline: 3rem; }
  .section--quote { padding-inline: 3rem; }
  .guarantee__inner { padding-inline: 3rem; }
  .site-header { padding-inline: 3rem; }
  .hero__content { padding-inline: 3rem; }
  .site-footer { padding-inline: 3rem; }

  .announcement__inner { flex-direction: row; text-align: left; }
  .announcement__tagline { justify-content: flex-start; }
  .announcement__meta { justify-content: flex-end; }

  .section-title { font-size: 3rem; line-height: 1; }   /* text-5xl LH = 1 */
  .value__title { font-size: 2.25rem; }
  .guarantee__title { font-size: 3rem; line-height: 1; } /* text-5xl LH = 1 */
  .zone-panel__title { font-size: 1.875rem; }
  .process-step7__title { font-size: 1.875rem; }

  .hero__controls { bottom: 2.5rem; right: 3rem; }
  .hero__title { font-size: 3.75rem; }
  .hero__desc { font-size: 1rem; }
  .hero__badge { font-size: 0.75rem; }
  .hero__actions { flex-direction: row; align-items: center; }
  .hero__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 0.75rem; }
  .hero__trust-item--wide { display: flex; }

  .bag-btn { display: inline-flex; }

  /* Plants & the form row use sm:grid-cols-2 in the original;
     projects/reviews/process/features jump at md (see 768 block). */
  .plant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .process-step7 { flex-direction: row; padding: 3rem; }
  .zone-stage { padding: 3rem; }
  .quote-panel { padding: 3.5rem; }
  .guarantee__terms { padding: 2.5rem; font-size: 0.875rem; }  /* sm:text-sm inherited by list */

  .site-footer__bottom { flex-direction: row; }               /* sm:flex-row */

  /* Responsive type-scale steps (sm:) that mirror the original */
  .value__statement { font-size: 1.25rem; }                   /* text-lg -> sm:text-xl */
  .process-step7__note { font-size: 0.875rem; }               /* text-xs -> sm:text-sm */
  .process-card__desc,
  .review-card__quote { font-size: 0.875rem; }
  .process-head__note,
  .quote-head__lead { font-size: 1rem; }
  .review-card__title { font-size: 1.25rem; }
}

/* --- md: 768px ------------------------------------------------------------ */
@media (min-width: 768px) {
  .announcement__guarantee { display: inline; }

  /* Original: projects md:grid-cols-2, reviews md:grid-cols-3,
     process md:grid-cols-2, features-bar md:grid-cols-4 */
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .process-head { flex-direction: row; align-items: flex-end; }
  .process-head__note { margin-top: 0; }

  .site-footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .footer-brand { grid-column: span 5; }
  .footer-col--services { grid-column: span 3; }
  .footer-col--nursery { grid-column: span 4; }

  .zone-panel { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .zone-panel__body { grid-column: span 7; }
  .zone-panel__media { grid-column: span 5; }
}

/* --- lg: 1024px ----------------------------------------------------------- */
@media (min-width: 1024px) {
  .main-nav { display: flex; }
  .nav-toggle { display: none; }

  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plant-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .section-head { flex-direction: row; align-items: flex-end; }
  .store-head { flex-direction: row; align-items: flex-end; }

  .guarantee__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .guarantee__main { grid-column: span 7; }
  .guarantee__aside {
    grid-column: span 5;
    position: sticky;
    top: 8rem;
  }
}

/* =============================================================================
   19. CONTENT TEMPLATES (blog index, single page/post) — theme-only
   ========================================================================== */
.entry-wrap { max-width: 64rem; }

.entry-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
@media (min-width: 768px) {
  .entry-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.entry-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.3s;
}
.entry-card:hover { box-shadow: var(--shadow-xl); }
.entry-card__media {
  display: block;
  height: 16rem;
  overflow: hidden;
  background-color: var(--color-sandstone);
}
.entry-card__media img { width: 100%; height: 100%; object-fit: cover; }
.entry-card__body { padding: 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.entry-card__meta {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-forest-700);
}
.entry-card__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--color-charcoal);
}
.entry-card__title a { transition: color 0.2s; }
.entry-card__title a:hover { color: var(--color-terracotta); }
.entry-card__excerpt { color: rgba(var(--rgb-charcoal), 0.7); font-size: 0.9375rem; line-height: 1.625; }
.entry-card__more {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-terracotta);
  margin-top: 0.5rem;
}

/* Single page / post */
.entry__media {
  border-radius: var(--radius-3xl);
  overflow: hidden;
  margin: 2rem 0;
  background-color: var(--color-sandstone);
}
.entry__media img { width: 100%; height: auto; display: block; }

.entry-content {
  max-width: 46rem;
  margin-inline: auto;
  color: rgba(var(--rgb-charcoal), 0.85);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.entry-content > * + * { margin-top: 1.25rem; }
.entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--color-charcoal);
  line-height: 1.2;
  margin-top: 2.5rem;
}
.entry-content h2 { font-size: 1.875rem; }
.entry-content h3 { font-size: 1.5rem; }
.entry-content h4 { font-size: 1.25rem; }
.entry-content a { color: var(--color-forest-700); text-decoration: underline; text-decoration-color: rgba(var(--rgb-forest-600), 0.4); }
.entry-content a:hover { color: var(--color-terracotta); }
.entry-content ul, .entry-content ol { padding-left: 1.5rem; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: 0.5rem; }
.entry-content img { max-width: 100%; height: auto; border-radius: var(--radius-2xl); }
.entry-content blockquote {
  border-left: 3px solid var(--color-forest-600);
  padding-left: 1.5rem;
  font-style: italic;
  color: rgba(var(--rgb-charcoal), 0.75);
}

/* -----------------------------------------------------------------------------
   Migrated service pages — legacy .row/.col-md grid → clean editorial layout
   -----------------------------------------------------------------------------
   The Design & Landscaping / Rooftop Gardens content was imported with Bootstrap
   grid classes this theme never styled, so it collapsed into full-width stacked
   blocks: an orphaned centred heading, a floating guarantee stamp and sparse
   gaps. Restyle those legacy hooks — no copy changes — into an aside + body
   layout, a stepped process list and a self-contained guarantee card. */
.entry-content .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem 2.5rem;
}
.entry-content .row .col-md-3,
.entry-content .row .col-md-9 { flex: 1 1 100%; min-width: 0; }
/* First element in a column sits flush with the top — strip the heading's top
   margin so it doesn't stack on the card padding (over-padded card top). */
.entry-content .row .col-md-3 > :first-child,
.entry-content .row .col-md-9 > :first-child { margin-top: 0; }
/* Drop the empty spacer column (one row holds only &nbsp;). */
.entry-content .row .col-md-3:not(:has(img)):not(:has(h2)) { display: none; }
@media (min-width: 768px) {
  .entry-content .row .col-md-3 { flex: 0 0 13.5rem; }
  .entry-content .row .col-md-9 { flex: 1 1 0; }
}

/* Aside heading ("Select with confidence.") — a left-aligned accent tagline,
   overriding the imported inline centre + oversized inline font-size. */
.entry-content .col-md-3 .side-heading {
  text-align: left !important;
  font-size: 2.25rem !important;
  line-height: 1.1 !important;
  margin: 0;
  color: var(--color-forest-800);
}

/* The intro sentence was imported as an <h2>; it's really a lead paragraph, so
   right-size it (the row with no list/image is the intro row) — section titles
   keep the larger heading size. */
.entry-content .row:not(:has(ol)):not(:has(img)) .col-md-9 > .side-heading {
  font-size: 1.375rem;
  line-height: 1.4;
  margin-top: 0;
}

/* A bit of breathing room under the "The process – quotations" and guarantee
   headings, between them and the copy that follows. */
.entry-content .row:has(ol) .col-md-9 > .side-heading,
.entry-content .row:has(.col-md-3 img) .col-md-9 > .side-heading {
  margin-bottom: 0.85rem;
}

/* Stepped process list (the numbered "quotations" list). */
.entry-content .row ol {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
  counter-reset: gds-step;
  display: grid;
  gap: 0.7rem;
}
.entry-content .row ol li {
  counter-increment: gds-step;
  position: relative;
  margin: 0;
  padding: 0.15rem 0 0.15rem 2.75rem;
}
.entry-content .row ol li::before {
  content: counter(gds-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--color-forest-800);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.8125rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Guarantee row → a self-contained highlight card with the stamp beside it. */
.entry-content .row:has(.col-md-3 img) {
  background: var(--color-sandstone);
  border: 1px solid rgba(var(--rgb-forest-800), 0.15);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  align-items: center;
  gap: 1.5rem 2.5rem;
}
.entry-content .row:has(.col-md-3 img) .col-md-3 img {
  border-radius: 0;
  max-width: 11rem;
  display: block;
}
/* Guarantee fine print. */
.entry-content .row p[class*="small"] {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(var(--rgb-charcoal), 0.6);
  margin-top: 0.4rem;
}

/* Branded content separator. */
.entry-content .wp-block-separator {
  border: 0;
  border-top: 1px solid rgba(var(--rgb-forest-800), 0.2);
  max-width: none;
  margin: 2.5rem 0;
}

/* Pagination + search */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  border: 1px solid rgba(var(--rgb-black), 0.08);
  color: var(--color-charcoal);
  transition: background-color 0.2s, color 0.2s;
}
.pagination .page-numbers:hover { background-color: var(--color-forest-50); }
.pagination .page-numbers.current {
  background-color: var(--color-forest-800);
  color: var(--color-alabaster);
  border-color: transparent;
}
.entry-search { max-width: 30rem; margin: 2rem auto 0; }
.entry-search input[type="search"] {
  width: 100%;
  background-color: rgba(var(--rgb-sandstone), 0.5);
  border: 1px solid rgba(var(--rgb-black), 0.1);
  border-radius: var(--radius-xl);
  padding: 0.875rem 1rem;
  font-size: 0.875rem;
}

/* Projects portfolio — case-study galleries */
.project-gallery { max-width: 64rem; margin: 3.5rem auto 0; }
.project-gallery__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-charcoal);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-forest-600);
}
.project-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px)  { .project-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .project-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.project-gallery__item {
  margin: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background-color: var(--color-sandstone);
  aspect-ratio: 4 / 3;
}
.project-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gallery images open in the lightbox */
.project-gallery__link { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.project-gallery__link img { transition: transform 0.5s var(--ease-reveal, cubic-bezier(0.16, 1, 0.3, 1)); }
.project-gallery__link:hover img { transform: scale(1.05); }
.project-gallery__link:focus-visible { outline: 3px solid var(--color-terracotta); outline-offset: 3px; }

/* -----------------------------------------------------------------------------
   Lightbox — full-screen image viewer for project galleries
   -------------------------------------------------------------------------- */
html.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(var(--rgb-charcoal), 0.94);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: 92vw;
  max-height: 88vh;
}
.lightbox__img {
  max-width: 92vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.97);
  transition: transform 0.25s var(--ease-reveal, cubic-bezier(0.16, 1, 0.3, 1));
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__caption {
  color: rgba(var(--rgb-alabaster), 0.85);
  font-family: var(--font-body);
  font-size: 0.875rem;
  text-align: center;
  max-width: 60ch;
}
.lightbox__caption[hidden] { display: none; }
.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(var(--rgb-white), 0.12);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(var(--rgb-white), 0.25); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
.lightbox__close { top: 1.25rem; right: 1.25rem; width: 2.75rem; height: 2.75rem; font-size: 1.75rem; line-height: 1; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 2rem; line-height: 1; }
.lightbox__nav[hidden] { display: none; }
.lightbox__prev { left: 1.25rem; }
.lightbox__next { right: 1.25rem; }
.lightbox__counter {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(var(--rgb-alabaster), 0.7);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.lightbox__counter[hidden] { display: none; }
@media (max-width: 640px) {
  .lightbox__nav { width: 2.5rem; height: 2.5rem; font-size: 1.5rem; }
  .lightbox__prev { left: 0.5rem; }
  .lightbox__next { right: 0.5rem; }
  .lightbox__close { top: 0.75rem; right: 0.75rem; }
}

.project-back {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 3.5rem;
}