/* ==========================================================================
   Chiltern Garden Maintenance - Premium Stylesheet v2
   Designed for visual impact, performance and SEO.
   ========================================================================== */

:root {
  /* Brand palette - deepened and refined */
  --forest: #2d5a3d;
  --forest-deep: #1e3a2a;
  --forest-dark: #102019;  /* Premium luxury dark - v10 upgrade */
  --forest-night: #0a1410;  /* Even darker for deep contrast sections */
  --forest-light: #4a7c5c;
  --forest-mist: #7ba88a;
  --moss: #6b8e5a;
  --leaf: #8fb377;
  --leaf-bright: #a8c98f;
  --sage: #b5c9a8;
  --bark: #3d2f23;
  --bark-light: #5a4632;
  --stone: #8a8378;
  --stone-light: #b5aea3;
  --cream: #f7f3ea;
  --cream-warm: #f0ead8;
  --paper: #fdfbf6;
  --bone: #ffffff;
  --ink: #1a2118;
  --ink-soft: #2d3528;
  --muted: #5a6455;
  --muted-light: #8a9085;
  --border: #ddd6c4;
  --border-soft: #ebe5d2;
  --gold: #c8a45e;
  --gold-light: #e0bd75;
  --gold-deep: #a08343;
  --rust: #b85c38;
  --rust-light: #d4754e;
  --sky: #e8f0e6;
  --sky-deep: #d1e0cc;
  --shadow-color: 31, 42, 32;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.08), 0 1px 2px rgba(var(--shadow-color), 0.04);
  --shadow: 0 4px 12px rgba(var(--shadow-color), 0.08), 0 2px 4px rgba(var(--shadow-color), 0.04);
  --shadow-md: 0 8px 24px rgba(var(--shadow-color), 0.10), 0 4px 8px rgba(var(--shadow-color), 0.06);
  --shadow-lg: 0 16px 48px rgba(var(--shadow-color), 0.14), 0 8px 16px rgba(var(--shadow-color), 0.08);
  --shadow-xl: 0 24px 64px rgba(var(--shadow-color), 0.18), 0 12px 24px rgba(var(--shadow-color), 0.10);

  --container: 1200px;
  --container-narrow: 780px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; height: auto; }
a { color: var(--forest); text-decoration: none; transition: color var(--transition); }
a:hover { text-decoration: underline; color: var(--forest-deep); }
button { font: inherit; cursor: pointer; }
ul, ol { padding-left: 1.25rem; }
h1, h2, h3, h4, h5 {
  font-family: var(--serif);
  color: var(--forest-deep);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 600;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 500; }
h3 { font-size: 1.35rem; font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 600; font-family: var(--sans); letter-spacing: 0; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

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

/* ---------- Layout ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.section { padding: 3rem 0; }
.section-tight { padding: 2.5rem 0; }
.section-tinted { background: var(--cream); }
.section-dark {
  background: var(--forest-dark);
  color: #d8e4d2;
  position: relative;
  overflow: hidden;
}
.section-dark::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 10c-3 5-8 8-8 14s5 9 8 14c3-5 8-8 8-14s-5-9-8-14z' fill='%23ffffff' fill-opacity='0.02'/%3E%3C/svg%3E");
  pointer-events: none;
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: rgba(255,255,255,0.85); }

.grid { display: grid; gap: 1.75rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Nav visibility */
.nav-links { display: flex; gap: 0.2rem; align-items: center; flex-wrap: wrap; }
.mobile-menu-toggle { display: none; }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 600px) and (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Header / Nav ---------- */
.header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(253, 251, 246, 0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(221, 214, 196, 0.6);
  transition: all var(--transition);
}
/* Header is now position:sticky (see V3 fixes below) so it stays in normal
   document flow. No body padding-top offset is needed - the old 72px offset
   was creating an empty bar above the header on every page. */
body { padding-top: 0; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--forest-deep);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(184, 146, 67, 0.35);
  transition: box-shadow 0.3s ease;
}
.brand:hover .brand-logo {
  box-shadow: 0 0 0 2px rgba(184, 146, 67, 0.5);
}
.brand-title {
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
  line-height: 1.1;
}
.brand-title strong {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--forest-deep);
  letter-spacing: 0.06em;
}
.brand-title span {
  color: var(--gold-deep, #8a6d31);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 2px;
}

.nav-links {
  flex-wrap: wrap;
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.nav-links a {
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  position: relative;
}
.nav-links a:hover {
  text-decoration: none;
  background: var(--cream);
  color: var(--forest-deep);
}
.nav-links a.active {
  color: var(--forest);
  background: var(--sky);
}

/* Nav dropdown for Garden Knowledge */
.nav-dropdown {
  position: relative;
  display: inline-block;
}
.nav-dropdown-toggle {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 500;
  font-family: var(--sans);
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.nav-dropdown-toggle:hover {
  background: var(--cream);
  color: var(--forest-deep);
}
.nav-dropdown-toggle svg {
  transition: transform 0.2s;
}
.nav-dropdown:hover .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  min-width: 220px;
  z-index: 200;
  flex-direction: column;
  gap: 0;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  display: flex;
}
.nav-dropdown-menu a {
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 500;
  transition: all var(--transition);
  display: block;
}
.nav-dropdown-menu a:hover {
  background: var(--sky);
  color: var(--forest-deep);
  text-decoration: none;
}
.nav-dropdown-menu a.active {
  background: var(--sky);
  color: var(--forest);
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--forest);
}

.nav-cta { display: flex; gap: 0.5rem; align-items: center; }

/* Mobile menu toggle button (hamburger) */
.mobile-menu-toggle {
  display: none;
  background: var(--forest);
  color: #fff;
  border: none;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  z-index: 10001;
}
.mobile-menu-toggle:active {
  transform: scale(0.95);
}

/* Mobile menu - uses native hidden attribute */
.mobile-menu[hidden] {
  display: none !important;
}
.mobile-menu {
  flex-direction: column;
  background: var(--paper);
  border-top: 1px solid var(--border);
  padding: 0.5rem 1.5rem 1rem;
}
.mobile-menu a {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink);
  font-size: 0.95rem;
  text-decoration: none;
  display: block;
}
.mobile-menu a:active {
  background: var(--sky);
}
.mobile-menu-header {
  padding: 0.8rem 0 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--forest);
  border-bottom: 2px solid var(--forest-light);
  margin-top: 0.5rem;
}

/* Collapsible Garden Knowledge section in mobile menu */
.mobile-gk-section {
  border-bottom: 1px solid var(--border-soft);
}
.mobile-gk-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.7rem 0;
  background: none;
  border: none;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mobile-gk-toggle:active {
  background: var(--sky);
}
.mobile-gk-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.mobile-gk-toggle.gk-open .mobile-gk-chevron {
  transform: rotate(180deg);
}
.mobile-gk-items[hidden] {
  display: none !important;
}
.mobile-gk-items {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.3rem;
}
.mobile-gk-items a {
  padding: 0.6rem 0 0.6rem 1.2rem;
  border-bottom: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 0.9rem;
}
.mobile-gk-items a:last-child {
  border-bottom: none;
}
.mobile-gk-items a:active {
  background: var(--sky);
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-dropdown { display: none; }
  .nav-cta .btn:not(.mobile-menu-toggle) { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--forest);
  background: transparent;
  color: var(--forest-deep);
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--sans);
  text-decoration: none;
  transition: all var(--transition);
  line-height: 1.2;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
  pointer-events: none;
}
.btn:hover::before { left: 100%; }
.btn:hover {
  background: var(--forest);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary {
  background: linear-gradient(135deg, var(--forest), var(--forest-deep));
  color: #fff;
  border-color: var(--forest-deep);
  box-shadow: var(--shadow);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--forest-deep), var(--forest-dark));
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { background: var(--cream); color: var(--forest-deep); }
.btn-whatsapp {
  background: linear-gradient(135deg, #25D366, #1da851);
  border-color: #1da851;
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-whatsapp:hover {
  background: linear-gradient(135deg, #1da851, #128c7e);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  border-color: var(--gold-deep);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-deep), #8a6f3a);
  color: #fff;
  transform: translateY(-2px);
}
.btn-lg { padding: 0.9rem 1.8rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; text-align: center; }

/* Active (click) states - visual feedback when button is pressed */
.btn:active,
.btn:focus-visible {
  transform: translateY(1px);
  box-shadow: var(--shadow-sm);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.btn-primary:active {
  background: linear-gradient(135deg, var(--forest-dark), var(--forest-deep));
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.btn-whatsapp:active {
  background: linear-gradient(135deg, #128c7e, #0e6b62);
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.btn-gold:active {
  background: linear-gradient(135deg, #8a6f3a, var(--gold-deep));
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:active {
  background: var(--forest-mist);
  transform: translateY(0);
}
/* Calc submit button active state */
.calc-form .btn:active,
.calc-form button:active {
  transform: translateY(0) scale(0.98);
  box-shadow: var(--shadow-sm);
}
/* Calc option labels active state */
.calc-options label:active {
  transform: translateY(0) scale(0.97);
}
/* Contact float toggle active state */
.contact-float__toggle:active {
  transform: translateY(0) scale(0.97);
  box-shadow: var(--shadow);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 5rem 0 5.5rem;
  overflow: hidden;
  background: var(--forest-dark);
}
.hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}
.hero-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(21, 40, 28, 0.85), rgba(30, 58, 42, 0.75));
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.hero h1 {
  margin-bottom: 1rem;
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  line-height: 1.1;
  font-weight: 600;
}
.hero h1 .accent { color: var(--leaf-bright); font-style: italic; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf-bright);
  font-weight: 600;
  margin-bottom: 0.85rem;
  padding: 0.3rem 0.85rem;
  background: rgba(143, 179, 119, 0.15);
  border-radius: 999px;
  border: 1px solid rgba(143, 179, 119, 0.3);
}
.lede {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1.6rem;
  max-width: 560px;
  line-height: 1.65;
}
.hero-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.trust-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Side-by-side button pair (e.g. WhatsApp + Get a Quote on location,
   service, about and tips pages). Using flex with align-items:center
   prevents the button with a leading SVG icon from sitting on a
   different baseline to the button without one. */
.btn-pair {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.trust-pill svg { width: 14px; height: 14px; }

.hero-card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.hero-card h2 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--forest-deep);
}

/* Problem-led list on homepage hero */
.problem-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.problem-item {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  /* Match the white-box look used by .stat-compact in the
     "Why Chiltern Garden Maintenance?" row directly below, so the
     two rows of cards share the same uniform white background,
     border and shadow. */
  background: var(--bone);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: all var(--transition);
}
.problem-item:hover {
  background: var(--bone);
  border-color: var(--forest-light);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
  text-decoration: none;
}
.problem-item:active {
  transform: translateX(2px) scale(0.99);
}
.problem-item strong {
  color: var(--forest-deep);
  font-size: 0.88rem;
  line-height: 1.25;
}
.problem-item span {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}
/* On mobile: keep 2 columns but make items more compact */
@media (max-width: 600px) {
  .problem-list {
    gap: 0.4rem;
  }
  .problem-item {
    padding: 0.5rem 0.65rem;
  }
  .problem-item strong {
    font-size: 0.82rem;
  }
  .problem-item span {
    font-size: 0.72rem;
  }
}
/* On very small screens: single column for readability */
@media (max-width: 380px) {
  .problem-list {
    grid-template-columns: 1fr;
  }
}

.hero-card ul { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.hero-card li {
  font-family: var(--serif);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.94rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.hero-card li:last-child { border-bottom: none; }
.hero-card li svg {
  width: 18px;
  height: 18px;
  color: var(--forest);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- Cards ---------- */
.card {
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Popular article cards - completely fixed uniform size */
#popular-articles {
  align-items: stretch;
}
.article-card-popular {
  display: flex;
  flex-direction: column;
  height: 240px;
  overflow: hidden;
  padding: 1.5rem;
}
.article-card-popular h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  flex-shrink: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}
.article-card-popular p {
  flex-grow: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}
.article-card-popular .card-link {
  flex-shrink: 0;
  margin-top: auto;
  font-size: 0.88rem;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--forest), var(--leaf));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--forest-mist);
}
.card:hover::before { transform: scaleX(1); }
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--sky), var(--sky-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.card-icon svg {
  width: 28px;
  height: 28px;
  color: var(--forest);
}
.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
  color: var(--forest-deep);
}
.card p {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 1rem;
  line-height: 1.6;
}
.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  color: var(--forest);
  font-size: 0.9rem;
  transition: gap var(--transition);
}
/* Stretched link: makes the ENTIRE card clickable, not just the green text.
   .card-link must NOT have position:relative so the ::after positions
   relative to .card (which has position:relative). The ::after covers
   the full card area as an invisible clickable overlay. */
.card-link::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
/* Show pointer cursor on any card that contains a card-link */
.card:has(.card-link) {
  cursor: pointer;
}
.card-link:hover { gap: 0.6rem; text-decoration: none; }
.card-link svg { width: 16px; height: 16px; }

/* ---------- Section title ---------- */
.section-title { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.section-title h2 { margin-bottom: 0.7rem; }
.section-title p { color: var(--muted); font-size: 1.08rem; line-height: 1.6; }
.section-title .kicker { margin-bottom: 1rem; }

.hr-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.hr-title .line {
  flex: 1;
  max-width: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.hr-title .leaf-icon { color: var(--forest); display: flex; }
.hr-title .leaf-icon svg { width: 24px; height: 24px; }

/* ---------- Page header with image ---------- */
.page-header {
  position: relative;
  padding: 3.5rem 0 3rem;
  background: var(--forest-dark);
  color: #fff;
  overflow: hidden;
}
.page-header-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
}
.page-header-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.25;
}
.page-header-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(21, 40, 28, 0.8), rgba(30, 58, 42, 0.9));
}
.page-header .container { position: relative; z-index: 1; }
.page-header h1 {
  margin-bottom: 0.6rem;
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.8rem);
}
.page-header p {
  font-family: var(--serif);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  max-width: 760px;
  margin: 0;
  line-height: 1.6;
}

/* Breadcrumbs on dark backgrounds */
.page-header .breadcrumbs { color: rgba(255, 255, 255, 0.7); margin-bottom: 1rem; }
.page-header .breadcrumbs a { color: rgba(255, 255, 255, 0.7); }
.page-header .breadcrumbs a:hover { color: #fff; }
.page-header .breadcrumbs span { color: rgba(255, 255, 255, 0.4); }

/* ---------- Article / Tips ---------- */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  padding: 3rem 0;
}
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; }
}
.article-body {
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
}
@media (max-width: 600px) {
  .article-body { padding: 1.5rem; }
}
.article-body h2 {
  margin-top: 2.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-soft);
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  margin-top: 1.8rem;
  color: var(--forest);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.15rem;
}
.article-body p, .article-body li { font-size: 1.05rem; color: var(--ink); line-height: 1.8; font-family: var(--serif); }
.article-body ul, .article-body ol { margin: 0 0 1.3rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body blockquote {
  border-left: 4px solid var(--leaf);
  background: linear-gradient(135deg, var(--sky), var(--cream));
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--forest-deep);
  font-style: italic;
}
.article-body blockquote p:last-child { margin-bottom: 0; }

.article-meta {
  display: flex;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.article-meta svg { width: 15px; height: 15px; color: var(--forest); }

.toc {
  background: linear-gradient(135deg, var(--cream), var(--cream-warm));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
}
.toc h4 {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { padding: 0.25rem 0; font-size: 0.94rem; }

.sidebar { position: sticky; top: 100px; align-self: start; }
.sidebar-card {
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow-sm);
}
.sidebar-card h4 {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sidebar-card h4 svg { width: 16px; height: 16px; color: var(--forest); }
.sidebar-card ul { list-style: none; padding: 0; margin: 0; }
.sidebar-card li {
  padding: 0.35rem 0;
  font-size: 0.92rem;
  border-bottom: 1px solid var(--border-soft);
}
.sidebar-card li:last-child { border-bottom: none; }

/* ---------- Plant profile ---------- */
.plant-hero {
  background: linear-gradient(135deg, var(--cream), var(--cream-warm));
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  margin-bottom: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}
.plant-hero::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(143, 179, 119, 0.15), transparent);
  border-radius: 50%;
}
@media (max-width: 800px) { .plant-hero { grid-template-columns: 1fr; padding: 1.75rem; } }
.plant-hero h1 {
  margin-bottom: 0.4rem;
  font-size: clamp(2rem, 4vw, 2.8rem);
  position: relative;
  z-index: 1;
}
.plant-latin {
  font-style: italic;
  color: var(--muted);
  font-size: 1.15rem;
  margin-bottom: 1.1rem;
  font-family: var(--serif);
  position: relative;
  z-index: 1;
}
.plant-image {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background: var(--sky);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 1;
}
.plant-image img { width: 100%; height: 100%; object-fit: cover; }
.plant-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sky), var(--sage));
  flex-direction: column;
  gap: 0.5rem;
}
.plant-image-placeholder svg {
  width: 64px;
  height: 64px;
  color: var(--forest);
  opacity: 0.6;
}
.plant-image-placeholder span {
  font-size: 0.85rem;
  color: var(--forest-deep);
  font-weight: 500;
  text-align: center;
  padding: 0 1rem;
}

.fact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem;
  margin: 2rem 0;
}
@media (max-width: 600px) { .fact-grid { grid-template-columns: 1fr; } }
.fact {
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  transition: all var(--transition);
}
.fact:hover { border-color: var(--forest-mist); box-shadow: var(--shadow-sm); }
.fact dt {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.fact dt svg { width: 14px; height: 14px; color: var(--forest); }
.fact dd { margin: 0; font-size: 0.95rem; color: var(--ink); line-height: 1.5; }

.plant-section {
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.plant-section h2 { font-size: 1.4rem; margin-bottom: 0.9rem; }

/* ---------- Calculator ---------- */
.calc-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2.5rem;
  padding: 2.5rem 0;
}
@media (max-width: 1000px) { .calc-layout { grid-template-columns: 1fr; } }
.calc-form {
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
}
.calc-step {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border-soft);
}
.calc-step:last-of-type { border-bottom: none; }
.calc-step label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.6rem;
  color: var(--forest-deep);
  font-size: 0.98rem;
}
.calc-step .hint { font-weight: 400; color: var(--muted); font-size: 0.85rem; }
.calc-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem;
}
.calc-options label {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 0.95rem;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.92rem;
  text-align: center;
  transition: all var(--transition);
  margin-bottom: 0;
  color: var(--ink);
  /* Force every option to the same height and width so longer labels
     (e.g. "Garden Design Plan") don't render visually larger than
     shorter ones (e.g. "Fencing"). */
  min-height: 52px;
  height: 100%;
  line-height: 1.25;
  word-break: keep-all;
  hyphens: none;
}
.calc-options label:hover {
  border-color: var(--forest-light);
  background: var(--sky);
  transform: translateY(-1px);
}
.calc-options input[type="radio"] { display: none; }
.calc-options input[type="radio"]:checked + label {
  background: linear-gradient(135deg, var(--forest), var(--forest-deep));
  color: #fff;
  border-color: var(--forest-deep);
  box-shadow: var(--shadow-md);
}
/* Checkbox styling for specialist features */
.calc-options input[type="checkbox"] {
  margin-right: 0.4rem;
  width: 16px;
  height: 16px;
  accent-color: var(--forest);
  flex-shrink: 0;
}
.calc-options label {
  justify-content: flex-start;
  gap: 0.3rem;
  /* Checkbox labels (Specialist features etc.) shouldn't inherit the
     radio-button min-height - they're stacked vertically with shorter
     text and the extra height looked stretched. */
  min-height: unset;
  height: auto;
}
.calc-options input[type="checkbox"]:checked + label {
  background: var(--sky);
  border-color: var(--forest-light);
  color: var(--forest-deep);
}
.calc-number {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--paper);
  transition: all var(--transition);
  font-family: var(--sans);
}
.calc-number:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(74, 124, 92, 0.15);
}

.calc-result {
  background: linear-gradient(135deg, var(--forest-dark), var(--forest-deep));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: sticky;
  top: 100px;
  align-self: start;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.calc-result::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(200, 164, 94, 0.2), transparent);
  border-radius: 50%;
  pointer-events: none;
}
.calc-result h3 {
  color: #fff;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 1;
}
.calc-result .estimate-range {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0.6rem 0;
  color: var(--gold-light);
  line-height: 1.2;
  position: relative;
  z-index: 1;
}
.calc-result .estimate-low { font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.calc-result .disclaimer {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 0.9rem;
  margin-top: 1.1rem;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
.calc-result .btn {
  width: 100%;
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}

/* ---------- Calculator seed list + practical guidance ----------
   Used by the Lawn Renovation and Wildflower Seed calculators.
   Every recommended seed, cultivar, sowing rate and method step remains
   readable. The optional CTA offers site-specific help after the result. */
.calc-seed-list {
  margin: 0.6rem 0 0.8rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
}
.calc-seed-item {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
}
.calc-seed-item:last-child { border-bottom: none; }
.calc-seed-item--blurred,
.calc-method-step--blurred {
  /* Compatibility for older generated result markup: never hide guidance. */
  filter: none;
  user-select: text;
  pointer-events: auto;
}
.calc-seed-percent {
  font-weight: 700;
  color: var(--gold-light);
  min-width: 3rem;
  text-align: right;
  font-size: 0.85rem;
}
.calc-seed-name {
  color: rgba(255, 255, 255, 0.92);
  flex: 1;
}
.calc-seed-name em {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85em;
}

/* Method / how-to section */
.calc-method {
  margin-top: 1.2rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
}
.calc-method h4 {
  color: #fff;
  font-size: 1rem;
  margin: 0 0 0.6rem;
  font-family: var(--sans);
}
.calc-method-list {
  margin: 0;
  padding-left: 1.4rem;
  counter-reset: step;
}
.calc-method-list li {
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.88rem;
  line-height: 1.55;
  padding: 0.3rem 0;
}
/* Optional CTA after the complete result */
.calc-locked-cta {
  margin-top: 1rem;
  background: linear-gradient(135deg, rgba(200, 164, 94, 0.15), rgba(160, 131, 67, 0.1));
  border: 1.5px solid rgba(200, 164, 94, 0.4);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
}
.calc-locked-cta__content strong {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gold-light);
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}
.calc-locked-cta__content strong svg {
  width: 16px;
  height: 16px;
  stroke: var(--gold-light);
}
.calc-locked-cta__content p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}
.calc-locked-cta__actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.calc-locked-cta__actions .btn {
  width: auto;
  margin-top: 0;
  flex: 1;
  min-width: 140px;
}
.calc-locked-cta__actions .btn-ghost {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  background: transparent;
}
.calc-locked-cta__actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ---------- Premium calculator sections (Privacy Plant Planner + Lawn Recovery Predictor) ----------
   These tools render their results as a series of stacked "sections"
   inside the calc-result panel. Each section has a heading and content.
   The styling is designed to feel like a premium diagnosis report rather
   than a simple calculator output. */

/* Section wrapper - each output section (Best Options, Arrangement, etc.) */
.pp-section, .lr-section {
  margin: 1.5rem 0;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.pp-section:first-child, .lr-section:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.pp-section h4, .lr-section h4 {
  color: #fff;
  font-size: 1.05rem;
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-weight: 600;
}

/* --- Plant cards (Privacy Plant Planner) --- */
.pp-plant-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 0.75rem;
}
.pp-plant-card__header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.pp-plant-card__rank {
  background: var(--gold);
  color: var(--forest-dark);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.pp-plant-card__header h5 {
  color: #fff;
  margin: 0;
  font-size: 1.05rem;
  font-family: var(--serif);
}
.pp-plant-card__latin {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}
.pp-plant-card__score {
  background: rgba(200, 164, 94, 0.2);
  color: var(--gold-light);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-left: auto;
  flex-shrink: 0;
}
.pp-plant-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}
.pp-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(143, 179, 119, 0.2);
  color: var(--leaf-bright);
  border: 1px solid rgba(143, 179, 119, 0.3);
}
.pp-badge--evergreen { background: rgba(74, 124, 92, 0.25); color: var(--leaf-bright); }
.pp-badge--fast-growth { background: rgba(200, 164, 94, 0.2); color: var(--gold-light); }
.pp-badge--wildlife-friendly { background: rgba(143, 179, 119, 0.2); color: var(--leaf-bright); }
.pp-badge--low-maintenance { background: rgba(180, 174, 227, 0.2); color: #b4aee3; }
.pp-badge--narrow-space { background: rgba(143, 179, 119, 0.15); color: var(--leaf-bright); }
.pp-badge--premium-look { background: rgba(200, 164, 94, 0.25); color: var(--gold-light); }
.pp-badge--scented { background: rgba(212, 117, 78, 0.2); color: var(--rust-light); }
.pp-badge--seasonal-colour { background: rgba(184, 92, 56, 0.2); color: var(--rust-light); }
.pp-badge--shade-tolerant { background: rgba(138, 131, 120, 0.2); color: var(--stone-light); }
.pp-badge--security { background: rgba(180, 40, 40, 0.2); color: #e88080; }
.pp-plant-card__why {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  margin: 0 0 0.5rem;
}
.pp-plant-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 1rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
}
.pp-plant-card__grid strong { color: rgba(255, 255, 255, 0.9); }
.pp-warning {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(180, 40, 40, 0.12);
  border: 1px solid rgba(180, 40, 40, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: #e8a0a0;
}
@media (max-width: 500px) {
  .pp-plant-card__grid { grid-template-columns: 1fr; }
}

/* --- Arrangement diagram --- */
.pp-arrangement {
  margin: 0.5rem 0;
}
.pp-arrangement__layer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  margin-bottom: 0.3rem;
  border-radius: var(--radius-sm);
}
.pp-arrangement__layer--back {
  background: rgba(45, 90, 61, 0.35);
  border-left: 4px solid var(--forest-light);
}
.pp-arrangement__layer--middle {
  background: rgba(74, 124, 92, 0.25);
  border-left: 4px solid var(--leaf);
  margin-left: 1rem;
}
.pp-arrangement__layer--front {
  background: rgba(143, 179, 119, 0.15);
  border-left: 4px solid var(--leaf-bright);
  margin-left: 2rem;
}
.pp-arrangement__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  min-width: 80px;
  flex-shrink: 0;
}
.pp-arrangement__plants {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.9);
}
.pp-arrangement__details p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0.3rem 0;
}

/* --- Score gauge --- */
.pp-score-gauge, .lr-score-gauge {
  position: relative;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem 0;
}
.pp-score-gauge__bar, .lr-score-gauge__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--forest-light), var(--leaf));
  border-radius: 999px;
  transition: width 0.5s ease;
}
.lr-score-gauge.lr-strong .lr-score-gauge__bar { background: linear-gradient(90deg, #4a7c5c, #6b9e7a); }
.lr-score-gauge.lr-good .lr-score-gauge__bar { background: linear-gradient(90deg, #8fb377, #a8c98f); }
.lr-score-gauge.lr-recoverable .lr-score-gauge__bar { background: linear-gradient(90deg, #c8a45e, #e0bd75); }
.lr-score-gauge.lr-difficult .lr-score-gauge__bar { background: linear-gradient(90deg, #d4754e, #e89070); }
.lr-score-gauge.lr-replacement .lr-score-gauge__bar { background: linear-gradient(90deg, #b85c38, #d4754e); }
.pp-score-gauge__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  color: #fff;
  font-size: 1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.pp-score-gauge__label span {
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.85;
}
.lr-score-gauge__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  color: #fff;
  font-size: 1.1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.pp-score-breakdown {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0.3rem 0 0;
}
.lr-score-category {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  margin: 0.5rem 0;
}
.lr-score-category.lr-strong { background: rgba(74, 124, 92, 0.25); color: var(--leaf-bright); }
.lr-score-category.lr-good { background: rgba(143, 179, 119, 0.2); color: var(--leaf-bright); }
.lr-score-category.lr-recoverable { background: rgba(200, 164, 94, 0.2); color: var(--gold-light); }
.lr-score-category.lr-difficult { background: rgba(212, 117, 78, 0.2); color: var(--rust-light); }
.lr-score-category.lr-replacement { background: rgba(180, 40, 40, 0.2); color: #e88080; }
.lr-personality, .lr-moss-risk {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0.3rem 0;
}
.lr-personality strong, .lr-moss-risk strong { color: var(--gold-light); }

/* --- Timeline --- */
.pp-timeline, .lr-timeline {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0;
  flex-wrap: wrap;
}
.pp-timeline__step, .lr-timeline__step {
  flex: 1;
  min-width: 120px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 0.6rem;
}
.pp-timeline__step strong, .lr-timeline__step strong {
  display: block;
  color: var(--gold-light);
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}
.pp-timeline__step span, .lr-timeline__step span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}
.lr-timeline-note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin: 0.5rem 0 0;
}

/* --- Enhancements / warnings / actions lists --- */
.pp-enhancements, .pp-warnings, .lr-diagnosis, .lr-action-list {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0.5rem 0;
}
.pp-enhancements li, .pp-warnings li, .lr-diagnosis li, .lr-action-list li {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
  margin-bottom: 0.3rem;
}
.lr-action-list { list-style: decimal; }

/* --- Seasonal calendar --- */
.pp-calendar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.pp-calendar__season {
  text-align: center;
  padding: 0.6rem 0.3rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
}
.pp-calendar__season strong {
  display: block;
  color: var(--gold-light);
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}
.pp-calendar__season span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

/* --- Mistakes / compatibility check --- */
.pp-mistakes h4 { color: var(--gold-light); }

/* --- QR plaque section --- */
.pp-qr {
  background: rgba(200, 164, 94, 0.08);
  border: 1px solid rgba(200, 164, 94, 0.2);
  border-radius: var(--radius-sm);
  padding: 1rem;
}
.pp-qr p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* --- Final recommendation --- */
.pp-final, .lr-final {
  background: rgba(200, 164, 94, 0.1);
  border: 1.5px solid rgba(200, 164, 94, 0.3);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
}
.pp-final p, .lr-final p {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
  margin: 0.4rem 0;
}
.pp-disclaimer, .lr-disclaimer {
  font-size: 0.8rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-style: italic;
  margin-top: 0.75rem !important;
}

/* --- CTAs --- */
.pp-ctas, .lr-ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.pp-ctas .btn, .lr-ctas .btn {
  flex: 1;
  min-width: 200px;
}
.pp-ctas .btn-ghost, .lr-ctas .btn-ghost {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  background: transparent;
}
.pp-ctas .btn-ghost:hover, .lr-ctas .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* --- Lawn Recovery seasonal maintenance --- */
.lr-maintenance {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 0.5rem 0;
}
.lr-season {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}
.lr-season h5 {
  color: var(--gold-light);
  font-size: 0.9rem;
  margin: 0 0 0.4rem;
  font-family: var(--sans);
}
.lr-season ul {
  list-style: disc;
  padding-left: 1.1rem;
  margin: 0;
}
.lr-season li {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.45;
  margin-bottom: 0.2rem;
}
@media (max-width: 600px) {
  .lr-maintenance { grid-template-columns: 1fr; }
  .pp-calendar { grid-template-columns: repeat(2, 1fr); }
}

/* --- Pet / shade / drainage / timing / alternative sections --- */
.lr-pet, .lr-shade, .lr-drain, .lr-timing {
  background: rgba(180, 40, 40, 0.08);
  border: 1px solid rgba(180, 40, 40, 0.2);
  border-radius: var(--radius-sm);
  padding: 1rem;
}
.lr-pet h4, .lr-shade h4, .lr-drain h4, .lr-timing h4 { color: #e8a0a0; }
.lr-pet p, .lr-shade p, .lr-drain p, .lr-timing p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  margin: 0.3rem 0;
}

/* ---------- Google Reviews section (portfolio page) ---------- */
.review-carousel {
  max-width: 700px;
  margin: 0 auto;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.review-carousel__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--cream);
}
.review-carousel__google-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.review-carousel__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.review-carousel__rating .google-stars {
  color: #FBBC05;
  font-size: 1rem;
  letter-spacing: 1px;
}
.review-carousel__rating-text {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
}
.review-carousel__viewport {
  overflow: hidden;
  position: relative;
}
.review-carousel__track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}
.review-carousel__slide {
  flex: 0 0 100%;
  padding: 2rem 2.5rem;
  text-align: center;
  box-sizing: border-box;
}
.review-carousel__stars {
  color: #FBBC05;
  font-size: 1.4rem;
  letter-spacing: 3px;
  margin-bottom: 1rem;
}
.review-carousel__text {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1rem;
}
.review-carousel__author {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--forest-deep);
  margin: 0;
}
.review-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  padding: 0 0 1rem;
}
.review-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: var(--border);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
}
.review-carousel__dot--active {
  background: var(--forest);
  transform: scale(1.25);
}
.review-carousel__link {
  display: block;
  text-align: center;
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  border-top: 1px solid var(--border-soft);
  background: var(--cream);
  transition: all var(--transition);
}
.review-carousel__link:hover {
  background: var(--forest-deep);
  color: #fff;
  text-decoration: none;
}
@media (max-width: 600px) {
  .review-carousel__slide { padding: 1.5rem 1.25rem; }
  .review-carousel__text { font-size: 1rem; }
}

/* ---------- Guide category cards (guides landing page) ---------- */
.guide-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}
.guide-cat-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  position: relative;
}
.guide-cat-card:hover {
  border-color: var(--forest-light);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
  text-decoration: none;
}
.guide-cat-card__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-radius: var(--radius-sm);
  margin-bottom: 0.8rem;
}
.guide-cat-card__icon svg {
  width: 18px;
  height: 18px;
  color: var(--forest);
}
.guide-cat-card__title {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--forest-deep);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.guide-cat-card__blurb {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 1rem;
  flex: 1;
}
.guide-cat-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.guide-cat-card__count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--cream);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.guide-cat-card__price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-deep);
}
.guide-cat-card__cta {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--forest);
  font-family: var(--sans);
  transition: gap var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.guide-cat-card:hover .guide-cat-card__cta {
  gap: 0.55rem;
  color: var(--forest-deep);
}
@media (max-width: 600px) {
  .guide-cat-grid { grid-template-columns: 1fr; }
}

/* ---------- Tips expand/collapse button ---------- */
.tip-expand-wrap {
  text-align: center;
  margin-top: 1.25rem;
}
.tip-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--sans);
  color: var(--forest-deep);
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition);
}
.tip-expand-btn:hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: #fff;
}
.tip-expand-btn--open {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: #fff;
}
.tip-expand-btn__chevron {
  transition: transform var(--transition);
}
.tip-expand-btn--open .tip-expand-btn__chevron {
  transform: rotate(180deg);
}
.tip-hidden-grid {
  animation: tip-expand-fade 0.3s ease;
}
@keyframes tip-expand-fade {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Homepage: explore bar ---------- */
.home-explore {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}
.home-explore__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.3s ease;
  min-width: 110px;
  flex: 1;
  max-width: 160px;
}
.home-explore__item:hover {
  border-color: var(--forest-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  text-decoration: none;
}
.home-explore__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-radius: var(--radius-sm);
}
.home-explore__icon svg { width: 22px; height: 22px; color: var(--forest); }
.home-explore__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest-deep);
  font-family: var(--sans);
  text-align: center;
}

/* ---------- Homepage: problem cards ---------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.75rem;
}
.problem-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}
.problem-card:hover {
  border-color: var(--forest-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.problem-card--full {
  grid-column: 1 / -1;
  background: var(--cream);
}
.problem-card__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.problem-card--full .problem-card__icon {
  background: var(--bone);
}
.problem-card__icon svg { width: 22px; height: 22px; color: var(--forest); }
.problem-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
}
.problem-card__content strong {
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 600;
  font-family: var(--sans);
}
.problem-card__content span {
  font-size: 0.82rem;
  color: var(--muted);
}
.problem-card__arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--forest);
  opacity: 0.4;
  transition: all var(--transition);
}
.problem-card__arrow svg { width: 18px; height: 18px; }
.problem-card:hover .problem-card__arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* ---------- Homepage: stats band ---------- */
.home-stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.home-stats-band__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.home-stats-band__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cream), var(--cream-warm));
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.home-stats-band__icon svg { width: 24px; height: 24px; color: var(--forest); }
.home-stats-band__text {
  display: flex;
  flex-direction: column;
}
.home-stats-band__text strong {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--forest-deep);
  line-height: 1.2;
}
.home-stats-band__text span {
  font-size: 0.78rem;
  color: var(--muted);
}
@media (max-width: 768px) {
  .home-stats-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .home-stats-band { grid-template-columns: 1fr; }
  .home-explore__item { min-width: 100px; max-width: none; }
}

/* ---------- Tool guide cards (calculators index) ---------- */
.tool-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.tool-guide-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.tool-guide-card:hover {
  border-color: var(--forest-light);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
  text-decoration: none;
}
.tool-guide-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.tool-guide-card__icon svg { width: 26px; height: 26px; color: var(--forest); }
.tool-guide-card h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--forest-deep);
  margin: 0 0 0.4rem;
  line-height: 1.25;
}
.tool-guide-card__output {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold-deep);
  margin: 0 0 0.75rem;
}
.tool-guide-card p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 1rem;
  flex: 1;
}
.tool-guide-card__levels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.tool-guide-card__levels span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--forest-deep);
  background: var(--sky);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.tool-guide-card__cta {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--forest);
  font-family: var(--sans);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: gap var(--transition);
}
.tool-guide-card:hover .tool-guide-card__cta {
  gap: 0.55rem;
  color: var(--forest-deep);
}
@media (max-width: 600px) {
  .tool-guide-grid { grid-template-columns: 1fr; }
}

/* ---------- Services page premium redesign ---------- */
/* Quick-start panel for "I just want a gardener" users */
.service-quickstart {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  background: linear-gradient(135deg, var(--forest-dark), var(--forest-deep));
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.service-quickstart__content {
  padding: 2.5rem 2.5rem 2rem;
  color: #fff;
}
.service-quickstart__content h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: #fff;
  margin: 0 0 1rem;
}
.service-quickstart__content p {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
  margin: 0 0 1rem;
}
.service-quickstart__content strong { color: var(--gold-light); }
.service-quickstart__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.service-quickstart__side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 2.5rem 2rem;
  background: rgba(0, 0, 0, 0.15);
}
.service-quickstart__stat {
  text-align: center;
}
.service-quickstart__stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold-light);
  line-height: 1;
}
.service-quickstart__stat span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 700px) {
  .service-quickstart { grid-template-columns: 1fr; }
  .service-quickstart__content { padding: 1.75rem 1.5rem 1.25rem; }
  .service-quickstart__side { flex-direction: row; padding: 1.25rem; gap: 1rem; }
  .service-quickstart__stat strong { font-size: 1.5rem; }
}

/* Service groups */
.service-group { margin-bottom: 2.5rem; }
.service-group:last-child { margin-bottom: 0; }
.service-group__header {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border-soft);
}
.service-group__header h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--forest-deep);
  margin: 0 0 0.3rem;
}
.service-group__header p {
  font-size: 0.92rem;
  color: var(--muted);
  margin: 0;
}
.service-group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

/* Premium service card */
.service-card-premium {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.service-card-premium:hover {
  border-color: var(--forest-light);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
  text-decoration: none;
}
.service-card-premium__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.service-card-premium__icon svg { width: 26px; height: 26px; color: var(--forest); }
.service-card-premium__body { flex: 1; min-width: 0; }
.service-card-premium__body h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--forest-deep);
  margin: 0 0 0.2rem;
}
.service-card-premium__body p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}
.service-card-premium__arrow {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--forest);
  opacity: 0.3;
  transition: all var(--transition);
}
.service-card-premium__arrow svg { width: 18px; height: 18px; }
.service-card-premium:hover .service-card-premium__arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* Process steps */
.service-process { text-align: center; }
.service-process h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--forest-deep);
  margin: 0 0 0.5rem;
}
.service-process__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
}
.service-process__step {
  text-align: center;
  padding: 1.5rem 1rem;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.service-process__num {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--forest), var(--forest-deep));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 50%;
  margin: 0 auto 0.75rem;
}
.service-process__step h4 {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--forest-deep);
  margin: 0 0 0.4rem;
}
.service-process__step p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}
@media (max-width: 700px) {
  .service-process__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .service-process__steps { grid-template-columns: 1fr; }
}

/* ---------- Editorial rows (Gardening Knowledge) ----------
   Premium editorial layout replacing card grids. Each article is a
   horizontal row with a visual element, title, intro, metadata pills
   and a "Read Guide" CTA. Inspired by Apple/RHS editorial layouts. */
.editorial-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.editorial-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.editorial-row:hover {
  border-color: var(--forest-light);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  text-decoration: none;
}
.editorial-row__visual {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cream), var(--cream-warm));
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.editorial-row__visual-icon svg { width: 28px; height: 28px; color: var(--forest); }
.editorial-row__body {
  flex: 1;
  min-width: 0;
}
.editorial-row__title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--forest-deep);
  margin: 0 0 0.3rem;
  line-height: 1.25;
}
.editorial-row__intro {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 0.5rem;
  font-family: var(--serif);
}
.editorial-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}
.editorial-row__pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--muted);
  white-space: nowrap;
  font-family: var(--sans);
}
.editorial-row__pill--easy { background: rgba(143, 179, 119, 0.15); color: var(--forest); }
.editorial-row__pill--intermediate { background: rgba(200, 164, 94, 0.15); color: var(--gold-deep); }
.editorial-row__pill--expert { background: rgba(184, 92, 56, 0.12); color: var(--rust); }
.editorial-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.editorial-row__tag {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.editorial-row__cta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--forest);
  font-family: var(--sans);
  white-space: nowrap;
  flex-shrink: 0;
  transition: gap var(--transition);
}
.editorial-row__cta svg { width: 16px; height: 16px; }
.editorial-row:hover .editorial-row__cta { gap: 0.55rem; }

.tip-featured-section { margin-bottom: 2rem; }
.tip-browse-header {
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--border-soft);
}
.tip-browse-header h2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--forest-deep);
  margin: 0;
}

/* Article metadata bar (on article detail pages) */
.article-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.article-meta-bar__pill {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--bone);
  color: var(--muted);
  font-family: var(--sans);
  white-space: nowrap;
}
.article-meta-bar__pill--easy { background: rgba(143, 179, 119, 0.15); color: var(--forest); }
.article-meta-bar__pill--intermediate { background: rgba(200, 164, 94, 0.15); color: var(--gold-deep); }
.article-meta-bar__pill--expert { background: rgba(184, 92, 56, 0.12); color: var(--rust); }
.article-meta-bar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  width: 100%;
  margin-top: 0.3rem;
}
.article-meta-bar__tag {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted);
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Estate note callout (on article detail pages) */
.estate-note {
  margin: 2rem 0 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, var(--forest-dark), var(--forest-deep));
  border-radius: var(--radius);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.estate-note::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(200, 164, 94, 0.1), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.estate-note__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
  font-family: var(--sans);
}
.estate-note__text {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
}

@media (max-width: 600px) {
  .editorial-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .editorial-row__visual { width: 44px; height: 44px; }
  .editorial-row__cta { align-self: flex-end; margin-top: 0.5rem; }
}

/* ---------- Reading progress bar ----------
   Thin vertical bar on the right edge of the viewport that fills from
   top to bottom as the user scrolls through an article. Only shows on
   article and plant detail pages (JS checks for .article-body or
   .plant-hero). */
.reading-progress {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: rgba(21, 40, 28, 0.12);
  z-index: 999;
  pointer-events: none;
}
.reading-progress__bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* Min-height keeps the bar visible even at 0% scroll so users
     immediately see the feature is present. */
  min-height: 4px;
  background: linear-gradient(to bottom, var(--forest-deep), var(--forest));
  transition: height 0.1s ease;
  box-shadow: 0 0 4px rgba(21, 40, 28, 0.2);
}
@media (max-width: 600px) {
  .reading-progress { width: 5px; }
}

/* ---------- Article table of contents ---------- */
.article-toc {
  margin: 0 0 1.5rem;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--border);
}
.article-toc__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 0 0 0.5rem;
  font-family: var(--sans);
}
.article-toc__nav {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.toc-item {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.2rem 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--transition);
  font-family: var(--sans);
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 0;
}
.toc-item:hover {
  color: var(--forest-deep);
  text-decoration: none;
}
.toc-item--h3 {
  padding-left: 1.25rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.toc-item--has-subs {
  font-weight: 500;
  cursor: pointer;
}
/* When the group is open, the H2 title gets a forest-deep colour so the
   user can see which groups are currently expanded. */
.toc-item--expanded {
  color: var(--forest-deep);
}
/* Row that holds the H2 link + chevron toggle side by side */
.toc-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
/* Chevron toggle button - sits at the end of the H2 row, independent of the link */
.toc-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform 0.18s ease;
  line-height: 1;
}
.toc-toggle:hover {
  background: var(--cream);
  color: var(--forest-deep);
  border-color: var(--forest);
}
.toc-toggle:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 1px;
}
/* Open state: chevron rotates 90deg to point down */
.toc-toggle--open {
  background: var(--forest);
  color: #fff;
  border-color: var(--forest);
  transform: rotate(90deg);
}
.toc-toggle--open:hover {
  background: var(--forest-deep);
  color: #fff;
}
.toc-group {
  display: flex;
  flex-direction: column;
}
.toc-subs {
  padding-left: 1.25rem;
  margin-top: 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
/* CRITICAL: [hidden] must override the flex display above so the subs
   actually disappear when collapsed. Without this rule the subs stay
   visible even when the hidden attribute is set. */
.toc-subs[hidden] {
  display: none !important;
}
.toc-sub-item {
  display: block;
  padding: 0.15rem 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition);
  font-family: var(--sans);
  line-height: 1.35;
}
.toc-sub-item:hover {
  color: var(--forest-deep);
  text-decoration: none;
}

/* ---------- Tables ---------- */
.table-wrap {
  overflow-x: auto;
  margin: 1rem 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--bone);
  overflow: hidden;
}
th, td {
  padding: 0.85rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}
th {
  background: linear-gradient(135deg, var(--forest), var(--forest-deep));
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--paper); }
tbody tr:hover { background: var(--sky); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 1rem 0;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--forest); }
.breadcrumbs span { margin: 0 0.45rem; color: var(--border); }

/* ---------- Footer ----------
   margin-top: 0 (was 3rem) so the footer sits flush against the green
   .cta-band-compact band above it - both are dark-green, so the previous
   3rem gap of page-background colour read as a visible seam. */
.footer {
  background: var(--forest-dark);
  color: #d8e4d2;
  padding: 4rem 0 1.75rem;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 15c-4 6-10 10-10 18s6 12 10 18c4-6 10-10 10-18s-6-12-10-18z' fill='%23ffffff' fill-opacity='0.015'/%3E%3C/svg%3E");
  pointer-events: none;
}
.footer .container { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 {
  color: #fff;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  font-weight: 600;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { padding: 0.3rem 0; }
.footer a {
  color: #c5d4bc;
  font-size: 0.92rem;
  transition: color var(--transition);
}
.footer a:hover { color: #fff; text-decoration: none; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  flex-wrap: wrap;
  gap: 0.5rem;
}
.footer-brand strong {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: #fff;
  font-weight: 600;
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 9999;
  background: rgba(21, 40, 28, 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  max-width: 900px;
  margin: 0 auto;
}
.cookie-banner[hidden] { display: none !important; }
.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  flex-wrap: wrap;
}
.cookie-banner p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 600px;
  color: rgba(255, 255, 255, 0.9);
}
.cookie-banner a { color: var(--leaf-bright); text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 0.5rem; }
.cookie-banner .btn { box-shadow: none; }
.cookie-banner #cookie-reject { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
@media (max-width: 680px) {
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; }
}

/* ---------- Misc ---------- */
.lead {
  font-size: 1.18rem;
  color: var(--muted);
  margin-bottom: 1.75rem;
  line-height: 1.65;
}
.tag {
  display: inline-block;
  background: var(--sky);
  color: var(--forest-deep);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;
  border: 1px solid var(--sky-deep);
  transition: all var(--transition);
  text-decoration: none;
}
.tag:hover { background: var(--forest); color: #fff; text-decoration: none; border-color: var(--forest); }
.tag-amber { background: #fff3d6; color: #8a6510; border-color: #f0d97a; }
.tag-rust { background: #fde2d4; color: #8c3d1a; border-color: #f5b89a; }

.callout {
  background: linear-gradient(135deg, var(--sky), var(--cream));
  border-left: 4px solid var(--forest);
  padding: 1.3rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1rem 0;
  box-shadow: var(--shadow-sm);
}
.callout-warning {
  background: linear-gradient(135deg, #fff8e8, #fff3d6);
  border-left-color: var(--gold);
}
.callout h4 { margin-top: 0; display: flex; align-items: center; gap: 0.5rem; }
.callout h4 svg { width: 20px; height: 20px; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 2.5rem 0;
}
@media (max-width: 800px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat {
  text-align: center;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-num {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--forest);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.stat-label { font-size: 0.85rem; color: var(--muted); }

.cta-band {
  background: linear-gradient(135deg, var(--forest-deep), var(--forest-dark));
  color: #fff;
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 20c-5 8-12 12-12 22s7 14 12 22c5-8 12-12 12-22s-7-14-12-22z' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin-bottom: 0.8rem; }
.cta-band p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}
.cta-band .btn-primary,
.cta-band .btn {
  background: #fff;
  color: var(--forest-deep);
  border-color: #fff;
}
.cta-band .btn:hover {
  background: var(--cream);
  color: var(--forest-deep);
  transform: translateY(-2px);
}
.cta-band .btn-whatsapp {
  background: linear-gradient(135deg, #25D366, #1da851);
  color: #fff;
  border-color: #1da851;
}

/* ---------- Decorative leaf divider ---------- */
.leaf-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 3rem 0;
}
.leaf-divider .line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.leaf-divider svg {
  width: 28px;
  height: 28px;
  color: var(--forest);
  opacity: 0.6;
}

/* ---------- Animations ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1, .hero .lede, .hero .hero-actions, .hero .trust-row {
  animation: fadeInUp 0.6s ease-out backwards;
}
.hero h1 { animation-delay: 0.1s; }
.hero .lede {
  font-family: var(--serif); animation-delay: 0.2s; }
.hero .hero-actions { animation-delay: 0.3s; }
.hero .trust-row { animation-delay: 0.4s; }

/* Print */
@media print {
  .header, .footer, .cookie-banner, .cta-band, .calc-result, .hero-bg { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { background: none; padding: 1rem 0; }
  .hero h1, .hero .lede {
  font-family: var(--serif); color: #000; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   V2 Additions: top-strip, contact-float, category jump boxes
   ========================================================================== */

/* Top strip */
.top-strip {
  background: var(--forest-dark);
  color: #d8e4d2;
  padding: 0.4rem 0;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.top-strip .strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.top-strip .strip-items {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}
.top-strip .pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.top-strip .pill a {
  color: #fff;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.top-strip .btn {
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
}
@media (max-width: 680px) {
  .top-strip .pill:not(:first-child) { display: none; }
  .top-strip .btn { display: none; }
}

/* Contact float widget */
.contact-float {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1000;
}
.contact-float[hidden] { display: none; }
.contact-float__toggle {
  background: linear-gradient(135deg, var(--forest), var(--forest-deep));
  color: #fff;
  border: none;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition);
  font-family: var(--sans);
}
.contact-float__toggle:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
.contact-float__panel {
  position: absolute;
  bottom: calc(100% + 0.75rem);
  right: 0;
  background: var(--bone);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  /* Top padding is larger than the other sides to give the close (x)
     button its own clear strip of space at the top of the panel,
     so it no longer overlaps the first action button (Get a Quote). */
  padding: 2.5rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-xl);
  min-width: 240px;
}
.contact-float__panel[hidden] { display: none; }
.contact-float__close {
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  z-index: 2;
}
.contact-float__close:hover {
  color: var(--forest-deep);
}
.contact-float__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
/* All three buttons (Get a Quote, WhatsApp, See Portfolio) MUST render at
   the exact same size. We force padding, font-size, line-height, min-height,
   border and box-sizing identically on every variant (primary, whatsapp,
   ghost, lg, block) so no inherited class can make one button larger than
   the others. SVG icons are also hidden - they were the original cause of
   WhatsApp/See Portfolio appearing wider than Get a Quote. */
.contact-float__actions .btn,
.contact-float__actions .btn.btn-primary,
.contact-float__actions .btn.btn-whatsapp,
.contact-float__actions .btn.btn-ghost,
.contact-float__actions .btn.btn-lg,
.contact-float__actions .btn.btn-block {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  box-sizing: border-box;
  padding: 0.65rem 1rem !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
  min-height: 44px;
  height: 44px;
  border-width: 1.5px;
  border-style: solid;
  font-weight: 600;
}
/* Hide any SVG icons inside panel buttons so the icon doesn't stretch the
   button width or pull the baseline. */
.contact-float__actions .btn svg {
  display: none;
}
/* Ghost buttons get a visible border + white background so they read the
   same physical width as the primary button. */
.contact-float__actions .btn-ghost {
  border-color: var(--border);
  background: var(--paper);
  color: var(--forest-deep);
}
.contact-float__actions .btn-ghost:hover {
  background: var(--cream);
  border-color: var(--forest-light);
  color: var(--forest-deep);
}

/* ---------- Back to top button ----------
   Appears bottom-left after the user scrolls down past 400px.
   Mirrors the contact-float's look (round, dark-green, fixed) so the
   two fixed elements feel like a pair without crowding each other. */
.back-to-top {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--forest), var(--forest-deep));
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  font-family: var(--sans);
  /* hidden attribute sets display:none; we override with !important only
     when JS removes the attribute so the button animates in cleanly. */
}
.back-to-top[hidden] { display: none; }
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
  background: linear-gradient(135deg, var(--forest-deep), var(--forest-dark));
}
.back-to-top:active {
  transform: translateY(0) scale(0.97);
}
.back-to-top svg { display: block; }

/* On very small screens, nudge the button slightly inward so it never
   overlaps content edge-to-edge. */
@media (max-width: 480px) {
  .back-to-top {
    bottom: 1rem;
    left: 1rem;
  }
}

/* Category jump boxes (white boxes, no hover effects) */
.jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: 2rem 0;
}
.jump-nav a {
  display: inline-block;
  background: var(--bone);
  color: var(--forest-deep);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition: none;
}
.jump-nav a:hover {
  text-decoration: none;
  color: var(--forest-deep);
  background: var(--bone);
  border-color: var(--border-soft);
}

/* Plant name larger than description */
.plant-card-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--forest-deep);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}
.plant-card-latin {
  font-style: italic;
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-family: var(--serif);
}
.plant-card-desc {
  font-family: var(--serif);
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 0.75rem;
}

/* ---------- Plant card image (Chiltern Plant Library index) ----------
   Royalty-free photo at the top of cards that have one. Plants without
   an image render text-only cards (no broken image icon). Image uses
   aspect-ratio + object-fit so cards in the same row stay equal height. */
.plant-card-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin: -1rem -1rem 0.75rem;  /* bleed to card edges */
  background: var(--cream);
}
.plant-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.plant-card:hover .plant-card-image img {
  transform: scale(1.04);
}

/* ---------- Plant detail page image (individual plant pages) ----------
   Larger version of the card image, rendered inside the .plant-image
   container on the plant detail page. Replaces the leaf-icon placeholder
   when an image is available. */
.plant-detail-image {
  margin: 0;
  width: 100%;
  height: 100%;
}
.plant-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}
.plant-detail-image figcaption {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  background: rgba(21, 40, 28, 0.75);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  text-align: center;
}

/* ---------- Premium Plant Library page redesign ----------
   Editorial/magazine-quality layout that replaces the old generic
   callout + jump-nav + card grid with:
   - A full-width hero strip with stats
   - A premium search bar with inline icon
   - Category filter chips (replaces the 90s jump-nav boxes)
   - Premium plant cards with image overlay, serif headings, and
     a "View profile" CTA that animates on hover */

/* Hero strip - sits between the page header and the main content */
.plant-library-hero {
  background: linear-gradient(135deg, var(--forest-dark), var(--forest-deep));
  color: #fff;
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
}
.plant-library-hero::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(200, 164, 94, 0.12), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.plant-library-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.plant-library-hero__title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.75rem;
  line-height: 1.2;
}
.plant-library-hero__lede {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
  margin: 0 0 1.5rem;
}
.plant-library-hero__stats {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.plant-library-hero__stat {
  display: flex;
  flex-direction: column;
}
.plant-library-hero__stat strong {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--gold-light);
  line-height: 1;
}
.plant-library-hero__stat span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.2rem;
}

/* Premium search bar - replaces the old cream-box search */
.plant-search-premium {
  margin: 0 0 2rem;
}
.plant-search-premium__wrap {
  position: relative;
  display: block;
}
/* Expand-on-focus: subtle shadow change only (no transform, which
   breaks absolute-positioned children like the dropdown) */
.plant-search-premium__wrap--focused {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.plant-search-premium__icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}
.plant-search-premium__icon svg { width: 20px; height: 20px; }
.plant-search-premium__input {
  width: 100%;
  padding: 1rem 3rem 1rem 3rem;
  font-size: 1.05rem;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  border: 2px solid var(--border);
  border-radius: 999px;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.plant-search-premium__input:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 4px rgba(74, 124, 92, 0.12), 0 2px 12px rgba(0, 0, 0, 0.06);
}
.plant-search-premium__input::placeholder {
  color: var(--muted-light);
}
.plant-search-premium__clear {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--border-soft);
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: all var(--transition);
  z-index: 1;
}
.plant-search-premium__clear:hover {
  background: var(--border);
  color: var(--forest-deep);
  transform: translateY(-50%) scale(1.05);
}
.plant-search-premium__status {
  margin: 0.6rem 0 0 1.2rem;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  min-height: 1.2rem;
}

/* Category filter chips - intelligent, collapsible, with active state */
.plant-cat-chips {
  margin: 0 0 2.5rem;
  position: relative;
}

/* Toggle button - visible on all screens, used to expand/collapse on mobile */
.plant-cat-chips__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--sans);
  color: var(--forest-deep);
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 0.6rem;
}
.plant-cat-chips__toggle:hover {
  border-color: var(--forest-light);
  background: var(--cream);
}
.plant-cat-chips__toggle--open {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: #fff;
}
.plant-cat-chips__chevron {
  transition: transform var(--transition);
}
.plant-cat-chips__toggle--open .plant-cat-chips__chevron {
  transform: rotate(180deg);
}

/* Chip list - hidden on mobile by default, shown when --open class is added */
.plant-cat-chips__list {
  display: none;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.plant-cat-chips__list--open {
  display: flex;
}

/* On desktop (768px+), always show the chip list and hide the toggle */
@media (min-width: 769px) {
  .plant-cat-chips__toggle {
    display: none;
  }
  .plant-cat-chips__list {
    display: flex;
  }
}

/* Individual category chip */
.plant-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--forest-deep);
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  transition: all var(--transition);
  font-family: var(--sans);
  white-space: nowrap;
}
.plant-cat-chip:hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 58, 42, 0.15);
}
/* Active state - highlights the chip for the section currently in view */
.plant-cat-chip--active {
  background: var(--forest);
  border-color: var(--forest);
  color: #fff;
  box-shadow: 0 2px 8px rgba(45, 90, 61, 0.25);
}
/* Count badge inside each chip */
.plant-cat-chip__count {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--cream);
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  min-width: 1.2rem;
  text-align: center;
  line-height: 1.4;
  transition: all var(--transition);
}
.plant-cat-chip:hover .plant-cat-chip__count,
.plant-cat-chip--active .plant-cat-chip__count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Category section header - clean, editorial */
.plant-cat-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border-soft);
}
.plant-cat-header h2 {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--forest-deep);
  margin: 0;
  line-height: 1.2;
}
.plant-cat-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--cream);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  min-width: 1.8rem;
  text-align: center;
}

/* Premium plant grid - auto-fill, responsive, tighter gap */
.plant-grid-premium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

/* Premium plant card - magazine-quality with image, overlay, serif name */
.plant-card-premium {
  background: var(--bone);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
}
.plant-card-premium:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}
.plant-card-premium__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.plant-card-premium__link:hover {
  text-decoration: none;
}
/* Override the old plant-card-image to work inside the new card */
.plant-card-premium .plant-card-image {
  margin: 0;
  border-radius: 0;
  aspect-ratio: 16 / 11;
}
.plant-card-premium .plant-card-image img {
  transition: transform 0.5s ease;
}
.plant-card-premium:hover .plant-card-image img {
  transform: scale(1.06);
}
.plant-card-premium__body {
  padding: 1rem 1.1rem 1.1rem;
}
.plant-card-premium__name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--forest-deep);
  margin: 0 0 0.15rem;
  line-height: 1.25;
}
.plant-card-premium__latin {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 0.5rem;
  font-family: var(--serif);
}
.plant-card-premium__desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0.5rem 0 0.75rem;
  font-family: var(--serif);
}
.plant-card-premium__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest);
  font-family: var(--sans);
  transition: gap var(--transition), color var(--transition);
}
.plant-card-premium:hover .plant-card-premium__cta {
  gap: 0.55rem;
  color: var(--forest-deep);
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 700px) {
  .plant-grid-premium { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
  .plant-library-hero { padding: 2rem 0; }
  .plant-library-hero__stats { gap: 1.5rem; }
  .plant-library-hero__stat strong { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .plant-grid-premium { grid-template-columns: 1fr; }
  .plant-cat-chips { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ---------- Plant library search bar ----------
   Sticky-ish search input at the top of /plants/. Filters plant cards
   in real time as the user types. Sits in a tinted card so it stands
   apart from the rest of the page content. */
.plant-search {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.plant-search__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--forest-deep);
  margin-bottom: 0.6rem;
}
.plant-search__label svg { width: 18px; height: 18px; }
.plant-search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.plant-search__input {
  width: 100%;
  padding: 0.85rem 2.75rem 0.85rem 1rem;
  font-size: 1rem;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.plant-search__input:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(74, 124, 92, 0.15);
}
/* Clear (x) button - positioned inside the input on the right */
.plant-search__clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--border-soft);
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.plant-search__clear:hover {
  background: var(--border);
  color: var(--forest-deep);
}
.plant-search__status {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  min-height: 1.2rem;
}
/* "No results" message - shown when the filter matches zero cards */
.plant-no-results {
  margin: 1rem 0 2rem;
  padding: 1.5rem;
  background: var(--paper);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.plant-no-results h3 {
  margin: 0 0 0.4rem;
  color: var(--forest-deep);
  font-family: var(--serif);
  font-size: 1.2rem;
}
.plant-no-results p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.plant-no-results a { color: var(--forest); font-weight: 600; }

/* ---------- Gardening tips search bar (/tips/ index) ----------
   Same visual language as the plant library search bar so the two
   search experiences feel consistent across the site. Filters article
   cards in real time against a rich search index (title, intro, body
   text, plant names, problem types, months, services, locations and
   synonyms) so a search like "wet lawn" finds lawn AND drainage
   articles, not just articles containing the literal phrase "wet lawn". */
.tip-search {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.tip-search__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--forest-deep);
  margin-bottom: 0.6rem;
}
.tip-search__label svg { width: 18px; height: 18px; }
.tip-search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.tip-search__input {
  width: 100%;
  padding: 0.85rem 2.75rem 0.85rem 1rem;
  font-size: 1rem;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tip-search__input:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(74, 124, 92, 0.15);
}
.tip-search__clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--border-soft);
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.tip-search__clear:hover {
  background: var(--border);
  color: var(--forest-deep);
}
.tip-search__status {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  min-height: 1.2rem;
}
.tip-no-results {
  margin: 1rem 0 2rem;
  padding: 1.5rem;
  background: var(--paper);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.tip-no-results h3 {
  margin: 0 0 0.4rem;
  color: var(--forest-deep);
  font-family: var(--serif);
  font-size: 1.2rem;
}
.tip-no-results p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.tip-no-results a { color: var(--forest); font-weight: 600; }

/* ---------- Plant chips (article pages) ----------
   "Plants mentioned in this guide" section on tips/article pages.
   Each chip is a clickable card linking to the plant's profile in the
   Chiltern Plant Library. Shows plant name + short descriptor (light
   + drainage) + arrow icon. This creates the knowledge graph link
   from Tips -> Plant Library. */
.plant-chips-section {
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 2rem 0;
}
.plant-chips-section h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.3rem;
  color: var(--forest-deep);
  font-family: var(--serif);
  font-size: 1.25rem;
}
.plant-chips-section h3 svg { width: 20px; height: 20px; color: var(--forest); }
.plant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.plant-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--bone);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  transition: all var(--transition);
  font-family: var(--sans);
}
.plant-chip:hover {
  background: var(--forest);
  border-color: var(--forest-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.plant-chip:hover .plant-chip__name,
.plant-chip:hover .plant-chip__desc,
.plant-chip:hover .plant-chip__arrow {
  color: #fff;
}
.plant-chip:hover .plant-chip__arrow svg {
  stroke: #fff;
}
.plant-chip__name {
  font-weight: 700;
  color: var(--forest-deep);
  font-size: 0.92rem;
}
.plant-chip__desc {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}
.plant-chip__arrow {
  display: flex;
  align-items: center;
  color: var(--forest);
  transition: color var(--transition);
}
.plant-chip__arrow svg {
  width: 14px;
  height: 14px;
  stroke: var(--forest);
  transition: stroke var(--transition);
}

/* ---------- Guides mentioning plant (plant detail pages) ----------
   "CGM guides mentioning X" section on plant profile pages.
   Lists articles that mention this plant, creating the reverse
   knowledge graph link from Plant Library -> Tips. */
.guides-mentioning-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.6rem;
}
.guides-mentioning-list li {
  padding: 0;
  margin: 0;
}
.guides-mentioning-list a {
  display: block;
  padding: 0.7rem 1rem;
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  transition: all var(--transition);
}
.guides-mentioning-list a:hover {
  background: var(--sky);
  border-color: var(--forest-light);
  color: var(--forest-deep);
  text-decoration: none;
  transform: translateX(4px);
}
@media (max-width: 600px) {
  .guides-mentioning-list { grid-template-columns: 1fr; }
}

/* ---------- Location search bar (/locations/ index) ----------
   Sits below the "Browse by county" jump nav. If the user types a town
   we have a page for, we scroll to it and highlight it. If they type a
   town we DON'T have a page for (e.g. Longwick), we find the 5 nearest
   listed towns by Haversine distance and show them in a panel. */
.loc-search {
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.loc-search__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--forest-deep);
  margin-bottom: 0.6rem;
}
.loc-search__label svg { width: 18px; height: 18px; }
.loc-search__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.loc-search__input {
  width: 100%;
  padding: 0.85rem 2.75rem 0.85rem 1rem;
  font-size: 1rem;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.loc-search__input:focus {
  outline: none;
  border-color: var(--forest);
  box-shadow: 0 0 0 3px rgba(74, 124, 92, 0.15);
}
.loc-search__clear {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--border-soft);
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition: background var(--transition), color var(--transition);
}
.loc-search__clear:hover {
  background: var(--border);
  color: var(--forest-deep);
}
.loc-search__status {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
  min-height: 1.2rem;
}
.loc-search__status a { color: var(--forest); font-weight: 600; }

/* Autocomplete dropdown - appears below the search input as the user types.
   Shows matching towns (listed first with a page icon, then unlisted with
   a location pin). Keyboard navigable with arrow keys. */
.loc-search__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--bone);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
  width: 100%;
}
.loc-search__dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-soft);
  transition: background var(--transition);
  min-height: 56px;
}
.loc-search__dropdown-item:last-child { border-bottom: none; }
.loc-search__dropdown-item--highlighted,
.loc-search__dropdown-item:hover {
  background: var(--sky);
}
.loc-search__dropdown-icon {
  font-size: 1rem;
  line-height: 1.3;
  flex-shrink: 0;
}
.loc-search__dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}
.loc-search__dropdown-label {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.95rem;
}
.loc-search__dropdown-sub {
  font-size: 0.78rem;
  color: var(--muted);
}
.loc-search__dropdown-item--listed .loc-search__dropdown-label {
  color: var(--forest-deep);
}
.loc-search__dropdown-item--unlisted .loc-search__dropdown-label {
  color: var(--ink-soft);
}

/* Summary panel - shown when the user selects a town (Enter or click).
   Shows the selected town and its 5 nearest listed towns with links. */
.loc-summary {
  margin: 1.5rem 0 2rem;
}
.loc-summary__card {
  position: relative;
  background: var(--bone);
  border: 1.5px solid var(--forest-light);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-md);
}
.loc-summary__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--border-soft);
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  transition: background var(--transition), color var(--transition);
  z-index: 2;
}
.loc-summary__close:hover {
  background: var(--border);
  color: var(--forest-deep);
}
.loc-summary__card h3 {
  margin: 0 0 0.4rem;
  color: var(--forest-deep);
  font-family: var(--serif);
  font-size: 1.4rem;
}
.loc-summary__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}
.loc-summary__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--transition);
}
.loc-summary__item:hover {
  background: var(--sky);
  border-color: var(--forest-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
/* Primary town (the one the user searched for, when it's a listed town) */
.loc-summary__item--primary {
  background: linear-gradient(135deg, var(--forest), var(--forest-deep));
  border-color: var(--forest-deep);
}
.loc-summary__item--primary:hover {
  background: linear-gradient(135deg, var(--forest-deep), var(--forest-dark));
  transform: translateY(-2px);
}
.loc-summary__item--primary .loc-summary__name,
.loc-summary__item--primary .loc-summary__county,
.loc-summary__item--primary .loc-summary__dist {
  color: #fff;
}
.loc-summary__name {
  font-weight: 700;
  color: var(--forest-deep);
  font-size: 1.05rem;
  font-family: var(--serif);
}
.loc-summary__county {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.loc-summary__dist {
  font-size: 0.85rem;
  color: var(--forest);
  font-weight: 600;
  margin-top: 0.2rem;
}
@media (max-width: 600px) {
  .loc-summary__results { grid-template-columns: 1fr; }
}

/* ---------- Flowering period bar (Chiltern Plant Library index) ----------
   Compact 12-month strip showing relative flowering intensity per month.
   Each month is a fixed-width cell with 3-letter label and stacked blocks.
   A small "Flowering period" caption sits above the month cells so it's
   obvious what the graphic represents. */
.flower-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: flex-end;
  margin: 0.3rem 0 0.7rem;
  padding: 0.4rem 0.5rem 0.5rem;
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
/* Small "Flowering period" label that sits on its own row above the
   month cells. Takes full width so the months wrap to the next row. */
.flower-bar__caption {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--sans);
  line-height: 1;
  margin-bottom: 0.15rem;
}
/* Tiny leaf dot before the caption to signal it's about flowering */
.flower-bar__caption::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--leaf);
  flex-shrink: 0;
}
.flower-bar__month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 1.8rem;
}
.flower-bar__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
  line-height: 1;
  font-family: var(--sans);
}
.flower-bar__blocks {
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
  height: 0.85rem;
  justify-content: flex-start;
}
.flower-bar__block {
  width: 0.85rem;
  height: 0.25rem;
  border-radius: 1px;
  background: var(--leaf);
}
/* Intensity levels - block stays the same size, only opacity changes so
   the bar reads as "darker = more flowers" at a glance. */
.flower-bar__block--1 { background: rgba(143, 179, 119, 0.45); }
.flower-bar__block--2 { background: rgba(107, 142, 90, 0.75); }
.flower-bar__block--3 { background: var(--forest); }
/* Foliage-only plants (no flowering months) show this subtle note so the
   card layout stays consistent without inventing fake flowering data. */
.flower-bar__none {
  font-size: 0.72rem;
  color: var(--muted-light);
  font-style: italic;
  padding: 0.25rem 0;
  width: 100%;
  text-align: center;
}
@media (max-width: 600px) {
  .flower-bar { gap: 0.2rem; padding: 0.3rem 0.4rem 0.4rem; }
  .flower-bar__month { min-width: 1.6rem; }
  .flower-bar__label { font-size: 0.58rem; }
  .flower-bar__block { width: 0.7rem; }
  .flower-bar__caption { font-size: 0.6rem; }
}

/* ---------- Pruning time bar (Chiltern Plant Library index) ----------
   Same structure as the flowering bar but with WHITE blocks instead of
   green, so the two bars are visually distinct when stacked. Sits below
   the flowering bar on each plant card. The caption reads "Pruning time"
   with a small white dot before it. */
.prune-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: flex-end;
  margin: 0 0 0.7rem;
  padding: 0.4rem 0.5rem 0.5rem;
  background: #eef0f5;
  border: 1px solid #dfe3ec;
  border-radius: var(--radius-sm);
}
.prune-bar__caption {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a92a6;
  font-family: var(--sans);
  line-height: 1;
  margin-bottom: 0.15rem;
}
.prune-bar__caption::before {
  content: '';
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #9ca8c4;
  flex-shrink: 0;
}
.prune-bar__month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  min-width: 1.8rem;
}
.prune-bar__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8a92a6;
  text-transform: uppercase;
  line-height: 1;
  font-family: var(--sans);
}
.prune-bar__blocks {
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
  height: 0.85rem;
  justify-content: flex-start;
}
.prune-bar__block {
  width: 0.85rem;
  height: 0.25rem;
  border-radius: 1px;
  background: #9ca8c4;
}
/* Intensity levels - pastel blue/sage, darker = more pruning */
.prune-bar__block--1 { background: #cdd5e5; }
.prune-bar__block--2 { background: #9ca8c4; }
.prune-bar__block--3 { background: #6b7ba0; }
.prune-bar__none {
  font-size: 0.72rem;
  color: #8a92a6;
  font-style: italic;
  padding: 0.25rem 0;
  width: 100%;
  text-align: center;
}
@media (max-width: 600px) {
  .prune-bar { gap: 0.2rem; padding: 0.3rem 0.4rem 0.4rem; }
  .prune-bar__month { min-width: 1.6rem; }
  .prune-bar__label { font-size: 0.58rem; }
  .prune-bar__block { width: 0.7rem; }
  .prune-bar__caption { font-size: 0.6rem; }
}

/* Pollinator ranking badge */
.pollinator-rank {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--sky);
  color: var(--forest-deep);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--sky-deep);
}
.pollinator-rank svg { width: 14px; height: 14px; }

/* Quote page hero with garden background */
.quote-hero {
  position: relative;
  padding: 4rem 0;
  background: var(--forest-dark);
  color: #fff;
  overflow: hidden;
  border-radius: 0;
  margin-bottom: 2rem;
}
.quote-hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
}
.quote-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
.quote-hero-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(21,40,28,0.8), rgba(30,58,42,0.75));
}
.quote-hero .container { position: relative; z-index: 1; }
.quote-hero h1 { color: #fff; }
.quote-hero p { color: rgba(255,255,255,0.9); font-size: 1.1rem; max-width: 640px; }

/* File upload button */
.file-upload {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  transition: border-color var(--transition);
  font-size: 0.92rem;
  color: var(--muted);
}
.file-upload:hover { border-color: var(--forest); color: var(--forest-deep); }
.file-upload input[type="file"] { display: none; }
.file-upload svg { width: 20px; height: 20px; }

/* Guides grid (Chiltern Guides PDF store) */
.guides-category {
  margin-bottom: 2.5rem;
}
.guides-category h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-soft);
}
.guide-card {
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  height: 100%;
}
.guide-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--forest-mist);
}
.guide-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--gold), var(--gold-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.guide-card-icon svg { width: 20px; height: 20px; }
.guide-card h3 {
  font-size: 1.05rem;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--forest-deep);
  margin: 0;
}
.guide-card .guide-price {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold-deep);
}
.guide-card .btn { margin-top: auto; }

/* Quick facts box for location pages */
.quick-facts {
  background: linear-gradient(135deg, var(--cream), var(--cream-warm));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}
.quick-facts h2 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--forest-deep);
}
.quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 0;
}
@media (max-width: 600px) { .quick-facts-grid { grid-template-columns: 1fr; } }
.quick-fact {
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}
.quick-fact dt {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.quick-fact dt svg { width: 14px; height: 14px; color: var(--forest); }
.quick-fact dd { margin: 0; font-size: 0.95rem; color: var(--ink); }

/* Location card green text */
.locations-index .card h3,
.locations-index .card p {
  color: var(--forest-deep);
}
.locations-index .card p {
  color: var(--muted);
}

/* ==========================================================================
   V3: Mobile sticky menu, 10-item nav adjustments
   ========================================================================== */

/* Ensure header sticks on all devices */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Top strip scrolls away, header sticks */
.top-strip {
  position: relative;
  z-index: 999;
}

/* Nav with 10 items - reduce padding and font for desktop */
.nav-links a {
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
}

/* Mobile: compact header */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-dropdown { display: none; }
  .nav-cta .btn:not(.mobile-menu-toggle) { display: none; }
  .mobile-menu-toggle { display: inline-flex; }
  .brand-title strong { font-size: 1rem; }
  .brand-title span { font-size: 0.65rem; }
  .brand-logo { width: 36px; height: 36px; }
  .nav { padding: 0.5rem 0; }
}

/* Desktop: show all nav items for screens 1025px+ */
@media (min-width: 1025px) {
  .nav-links {
    display: flex;
    gap: 0.2rem;
  }
  .nav-links a {
    font-size: 0.82rem;
    padding: 0.4rem 0.55rem;
    white-space: nowrap;
  }
}

/* ==========================================================================
   V3 Fixes: sticky header, compact stats, compact CTA
   ========================================================================== */

/* Fix sticky header - works on all devices */
.header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1000;
}

/* Compact stat row for Why CGM section */
.stat-row-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 1.5rem 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.stat-compact {
  text-align: center;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.5rem;
  box-shadow: var(--shadow-sm);
}
.stat-compact .stat-label {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.3;
}
.stat-compact .stat-icon {
  width: 20px;
  height: 20px;
  color: var(--forest);
  margin-bottom: 0.2rem;
}
.stat-compact .stat-icon svg { width: 20px; height: 20px; }

@media (max-width: 600px) {
  .stat-row-compact { grid-template-columns: repeat(2, 1fr); }
}

/* Compact CTA band - two buttons side by side */
.cta-band-compact {
  background: linear-gradient(135deg, var(--forest-deep), var(--forest-dark));
  color: #fff;
  padding: 2rem 0;
  text-align: center;
}
.cta-band-compact .container { position: relative; z-index: 1; }
.cta-band-compact h2 { color: #fff; font-size: 1.4rem; margin-bottom: 0.5rem; }
.cta-band-compact p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  max-width: 500px;
  margin: 0 auto 1rem;
}
.cta-band-compact-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-band-compact .btn { padding: 0.55rem 1.2rem; font-size: 0.9rem; }
.cta-band-compact .btn-primary { background: #fff; color: var(--forest-deep); border-color: #fff; }
.cta-band-compact .btn-primary:hover { background: var(--cream); }
.cta-band-compact .btn-whatsapp { background: linear-gradient(135deg, #25D366, #1da851); color: #fff; border-color: #1da851; }

/* Hide top-strip entirely */
.top-strip { display: none !important; }

/* Mobile menu open state - fixed overlay, scrollable, safe area */
@media (max-width: 1024px) {
  .header {
    background: rgba(253, 251, 246, 0.98);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .mobile-menu:not([hidden]) {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
    background: var(--paper);
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  html.mobile-menu-open,
  html.mobile-menu-open body {
    overflow: hidden;
  }
}
@media (min-width: 1025px) {
  .mobile-menu-toggle { display: none; }
  .nav-links { display: flex; }
  .nav-dropdown { display: inline-block; }
  .mobile-menu { display: none !important; }
}

/* ==========================================================================
   V3: Clean accordion for service pages
   ========================================================================== */

.service-accordion {
  margin-bottom: 1.5rem;
}

.service-accordion > details {
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 0.6rem;
  overflow: hidden;
  transition: all var(--transition);
}

.service-accordion > details[open] {
  border-color: var(--forest-mist);
  box-shadow: var(--shadow-sm);
}

.service-accordion > details > summary {
  cursor: pointer;
  padding: 0.9rem 1.25rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--forest-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  counter-increment: none;
  outline: none;
  transition: background var(--transition);
  user-select: none;
}

/* Hide default marker on ALL browsers */
.service-accordion > details > summary::-webkit-details-marker,
.service-accordion > details > summary::marker {
  display: none;
  content: '';
}

.service-accordion > details > summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--forest);
  margin-left: 0.75rem;
  transition: transform 0.2s ease;
  line-height: 1;
}

.service-accordion > details[open] > summary::after {
  content: '\2212';
  transform: rotate(0deg);
}

.service-accordion > details > summary:hover {
  background: var(--cream);
}

.service-accordion .accordion-content {
  padding: 0 1.25rem 1.1rem;
  border-top: 1px solid var(--border-soft);
}

.service-accordion .accordion-content > p:first-child,
.service-accordion .accordion-content > ul:first-child,
.service-accordion .accordion-content > ol:first-child {
  margin-top: 0.8rem;
}

.service-accordion .accordion-content p,
.service-accordion .accordion-content li {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

/* Nested FAQ items - consistent with page styling */
.service-accordion .faq-item {
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
  overflow: hidden;
  transition: all var(--transition);
}

.service-accordion .faq-item[open] {
  border-color: var(--forest-mist);
}

.service-accordion .faq-item > summary {
  font-size: 0.98rem;
  font-family: var(--serif);
  font-weight: 500;
  padding: 0.75rem 1.1rem;
  color: var(--forest-deep);
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  transition: background var(--transition);
  user-select: none;
}

.service-accordion .faq-item > summary::-webkit-details-marker,
.service-accordion .faq-item > summary::marker {
  display: none;
  content: '';
}

.service-accordion .faq-item > summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--forest);
  margin-left: 0.5rem;
  line-height: 1;
}

.service-accordion .faq-item[open] > summary::after {
  content: '\2212';
}

.service-accordion .faq-item > summary:hover {
  background: var(--cream);
}

.service-accordion .faq-item .accordion-content {
  padding: 0 1.1rem 0.8rem;
  border-top: 1px solid var(--border-soft);
}

.service-accordion .faq-item .accordion-content > p:first-child {
  margin-top: 0.6rem;
}

.service-accordion .faq-item .accordion-content p {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--ink);
}

.service-accordion .faq-item > summary {
  font-size: 0.95rem;
  font-family: var(--sans);
  font-weight: 600;
  padding: 0.7rem 1rem;
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: pointer;
  transition: background var(--transition);
  user-select: none;
}

.service-accordion .faq-item > summary::-webkit-details-marker,
.service-accordion .faq-item > summary::marker {
  display: none;
  content: '';
}

.service-accordion .faq-item > summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--forest);
  margin-left: 0.5rem;
  line-height: 1;
}

.service-accordion .faq-item[open] > summary::after {
  content: '\2212';
}

.service-accordion .faq-item > summary:hover {
  background: var(--sky);
}

.service-accordion .faq-item .accordion-content {
  padding: 0 1rem 0.7rem;
  border-top: 1px solid var(--border-soft);
}

.service-accordion .faq-item .accordion-content p {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 0.6rem;
}

/* V3 Footer text consistency */
.footer-brand strong {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: #fff;
  font-weight: 600;
  display: block;
  margin-bottom: 0.35rem;
}
.footer-desc {
  color: #c5d4bc;
  font-size: 0.88rem;
  font-family: var(--sans);
  line-height: 1.5;
}
.footer-link {
  color: #c5d4bc;
  font-size: 0.88rem;
  font-family: var(--sans);
}
.footer-link:hover { color: #fff; }
.footer li a {
  font-size: 0.88rem;
  font-family: var(--sans);
}
.footer h4 {
  font-size: 0.82rem;
}
.footer-bottom {
  font-size: 0.82rem;
  font-family: var(--sans);
}

/* ---------- PREMIUM LOCATIONS PAGE ---------- */

/* ===== HERO (split: intro + map) ===== */
.locations-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr);
  min-height: 460px;
  background: var(--cream);
  overflow: hidden;
}
.locations-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 120px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 55%, #fff 100%);
  z-index: 4;
}
.locations-hero__content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 6vw, 90px);
  background: linear-gradient(90deg, var(--cream) 0%, rgba(238,232,219,0.95) 70%, rgba(238,232,219,0.3) 100%);
}
.locations-hero__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  margin: 0 0 1rem;
  font-family: var(--sans);
}
.locations-hero__title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--forest-dark);
  margin: 0 0 1.25rem;
  max-width: 560px;
}
.locations-hero__lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 2rem;
  max-width: 500px;
}
.locations-hero__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.loc-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--forest-deep);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.loc-btn-ghost:hover {
  border-color: var(--forest-deep);
  background: rgba(29, 90, 61, 0.06);
  text-decoration: none;
}
.loc-btn-ghost svg { width: 18px; height: 18px; }
.locations-hero__coverage-note {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 480px;
}
.locations-hero__coverage-note p { margin: 0 0 0.3rem; }
.locations-hero__coverage-note strong { color: var(--ink-soft); }

/* ===== Search bar ===== */
.location-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 540px;
  min-height: 60px;
  margin: 0 0 1.5rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(8,43,33,0.08);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.location-search:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(184,134,66,0.12), 0 8px 24px rgba(8,43,33,0.08);
}
.location-search__icon {
  position: absolute;
  left: 20px;
  display: flex;
  align-items: center;
  color: var(--muted);
  pointer-events: none;
}
.location-search__icon svg { width: 20px; height: 20px; }
.location-search__input {
  width: 100%;
  height: 60px;
  padding: 0 60px 0 54px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  border-radius: 999px;
}
.location-search__clear {
  position: absolute;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: var(--cream);
  border-radius: 50%;
  font-size: 1.2rem;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.location-search__clear:hover { background: var(--border-soft); color: var(--ink); }

.location-search__submit {
  position: absolute;
  right: 12px;
  width: 36px; height: 36px;
  border: 0;
  background: var(--forest-deep);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), transform var(--transition);
}
.location-search__submit:hover { background: var(--forest-dark); transform: scale(1.05); }
.location-search__submit svg { width: 18px; height: 18px; }
/* When both submit and clear buttons are visible, adjust positions */
.location-search__clear {
  right: 56px;
}

/* ===== Autosuggest panel ===== */
.autosuggest-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 30;
  padding: 8px;
  background: rgba(255,255,255,0.98);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(8,43,33,0.14);
  backdrop-filter: blur(18px);
  max-height: 400px;
  overflow-y: auto;
}
.autosuggest-panel[hidden] { display: none !important; }
.autosuggest-option {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 8px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.autosuggest-option:hover,
.autosuggest-option--highlighted {
  background: var(--sage-150, #E2E8DE);
  transform: translateX(2px);
}
.autosuggest-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest-deep);
  font-size: 0.9rem;
  font-weight: 700;
}
.autosuggest-option__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.autosuggest-option__primary { font-size: 0.95rem; font-weight: 600; color: var(--ink); font-family: var(--sans); }
.autosuggest-option__secondary { font-size: 0.8rem; color: var(--muted); font-family: var(--sans); }
.autosuggest-option__status {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--forest);
  white-space: nowrap;
  font-family: var(--sans);
}

/* ===== Map shell ===== */
.location-map-shell {
  position: relative;
  height: 460px;
  min-height: 460px;
  max-height: 460px;
  background: #fff;
  border-left: 1px solid var(--border);
  overflow: hidden;
}

/* ===== Custom inline SVG county map ===== */
.svg-map {
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
}
.svg-map__canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.svg-county {
  transition: fill 0.25s ease, stroke-width 0.25s ease;
}
.svg-badge circle {
  transition: r 0.2s ease;
}
.svg-badge:hover circle {
  r: 25;
}
.svg-town {
  transition: opacity 0.3s ease;
}
.svg-map__back {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--forest-deep);
  font-family: var(--sans);
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(8,43,33,0.08);
}
.svg-map__back:hover { background: #fff; border-color: var(--forest-deep); }
.svg-map__back[hidden] { display: none !important; }
.svg-map__back svg { width: 14px; height: 14px; }

.svg-map__info {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(8,43,33,0.1);
  display: none;
}
.svg-map__info[hidden] { display: none !important; }
@media (max-width: 768px) {
  .svg-map__info { display: block; }
}
.svg-map__info h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--forest-deep);
  margin: 0 0 0.2rem;
}
.svg-map__info p {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 0.6rem;
}
.svg-map__explore {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 1rem;
  background: var(--forest-deep);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: background var(--transition);
}
.svg-map__explore:hover { background: var(--forest-dark); }
.svg-map__explore svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .location-map-shell { height: 360px; min-height: 360px; max-height: 360px; }
}

/* ===== Custom circular zoomable map ===== */
.circle-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 460px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.circle-map__svg {
  width: 100%;
  flex: 1 1 auto;
  min-height: 380px;
}
.cm-county {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.cm-county:hover .cm-circle {
  filter: brightness(1.1);
}
.cm-county:hover {
  transform: scale(1.05);
  transform-origin: center;
}
.cm-circle {
  transition: filter 0.25s ease;
  cursor: pointer;
}
.cm-town {
  transition: opacity 0.4s ease, transform 0.2s ease;
}
.cm-town:hover .cm-town-dot {
  r: 11;
}
.cm-town-dot {
  transition: r 0.2s ease;
  cursor: pointer;
}
.circle-map__back {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.8rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--forest-deep);
  font-family: var(--sans);
  cursor: pointer;
  z-index: 600;
  transition: background var(--transition), border-color var(--transition);
  box-shadow: 0 2px 8px rgba(8,43,33,0.08);
}
.circle-map__back:hover { background: #fff; border-color: var(--forest-deep); }
.circle-map__back[hidden] { display: none !important; }
.circle-map__back svg { width: 14px; height: 14px; }
.circle-map__hint {
  position: absolute;
  bottom: 8px;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: var(--sans);
  padding: 0.3rem;
  z-index: 600;
  pointer-events: none;
  background: rgba(255,255,255,0.6);
}

/* ===== County count circles overlay ===== */
.county-counts {
  position: absolute;
  inset: 0;
  z-index: 500;
  pointer-events: none;
}
.county-count-circle {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  background: #174A39;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(8,43,33,0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.county-count-circle:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 6px 20px rgba(8,43,33,0.35);
}
.county-count-circle__num {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.county-count-circle__label {
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  line-height: 1;
}

/* Pulse line animation */
.pulse-line {
  animation: pulseLine 0.6s ease-in-out infinite alternate;
}
@keyframes pulseLine {
  from { opacity: 0.2; }
  to { opacity: 0.6; }
}

/* Tooltip styling */
.cgm-tooltip {
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 12px rgba(8,43,33,0.12) !important;
  font-family: var(--sans) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--forest-deep) !important;
  padding: 4px 10px !important;
}
.cgm-perm-label {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(8,43,33,0.08) !important;
  font-family: var(--sans) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: var(--ink-soft) !important;
  padding: 2px 6px !important;
  white-space: nowrap !important;
}
.cgm-perm-label::before { display: none !important; }
.cgm-map__legend {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  font-size: 0.8rem;
  font-family: var(--sans);
  color: var(--ink-soft);
}
.cgm-map__legend-item { display: flex; align-items: center; gap: 8px; }
.cgm-map__dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.cgm-map__dot--primary { background: #174A39; }
.cgm-map__dot--selected { background: #B88642; }
.cgm-map__loading {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  font-family: var(--sans);
  color: var(--muted);
  font-size: 0.9rem;
}

/* ===== Coverage stats strip ===== */
.coverage-stat-strip {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: rgba(255,255,255,0.94);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.coverage-stat {
  padding: 26px 28px;
  border-right: 1px solid var(--border);
  text-align: center;
}
.coverage-stat:last-child { border-right: 0; }
.coverage-stat__number {
  display: block;
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--forest-deep);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.coverage-stat__label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  font-family: var(--sans);
  line-height: 1.3;
}

/* ===== Town swiper ===== */
.town-swiper-section { padding: 4rem 0; }
.town-swiper-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
}
.town-swiper-header h2 {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--forest-deep);
  margin: 0.3rem 0 0;
  line-height: 1.2;
}
.town-swiper-controls { display: flex; gap: 0.5rem; }
.town-swiper__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--forest-deep);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.town-swiper__arrow:hover { background: var(--cream); border-color: var(--forest-deep); }
.town-swiper__arrow svg { width: 20px; height: 20px; }
.town-swiper-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.loc-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 1rem;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-family: var(--sans);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.loc-filter-chip:hover { border-color: var(--forest-light); background: var(--cream); }
.loc-filter-chip.is-active {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: #fff;
}
.loc-filter-chip__count {
  font-size: 0.72rem;
  padding: 1px 6px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
}
.loc-filter-chip:not(.is-active) .loc-filter-chip__count {
  background: var(--cream);
  color: var(--muted);
}
.town-swiper {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 12px 4px 24px;
  scroll-snap-type: x proximity;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;
  will-change: scroll-position;
}
.town-swiper::-webkit-scrollbar { display: none; }
.town-card {
  flex: 0 0 250px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 24px;
  background: linear-gradient(145deg, #FFFFFF 0%, #F4F0E7 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 35px rgba(8,43,33,0.06);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: pointer;
  user-select: none;
}
.town-card:hover {
  transform: translateY(-6px);
  border-color: rgba(184,134,66,0.5);
  box-shadow: 0 24px 70px rgba(8,43,33,0.14);
}
.town-card[aria-selected="true"] {
  background: linear-gradient(145deg, #123E30 0%, #082B21 100%);
  border-color: var(--gold);
  color: #fff;
}
.town-card__county {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-family: var(--sans);
  margin-bottom: 0.4rem;
}
.town-card[aria-selected="true"] .town-card__county { color: var(--gold-light); }
.town-card__name {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--forest-deep);
  margin: 0 0 0.2rem;
  line-height: 1.2;
}
.town-card[aria-selected="true"] .town-card__name { color: #fff; }
.town-card__region {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 0.6rem;
  font-family: var(--sans);
}
.town-card[aria-selected="true"] .town-card__region { color: rgba(255,255,255,0.7); }
.town-card__intro {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 1rem;
  flex: 1 1 auto;
  font-family: var(--sans);
}
.town-card[aria-selected="true"] .town-card__intro { color: rgba(255,255,255,0.8); }
.town-card__status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  font-family: var(--sans);
}
.town-card__status--primary {
  background: rgba(29,90,61,0.1);
  color: var(--forest-deep);
}
.town-card[aria-selected="true"] .town-card__status--primary {
  background: rgba(184,134,66,0.2);
  color: var(--gold-light);
}
.town-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  font-family: var(--sans);
  transition: color var(--transition);
}
.town-card[aria-selected="true"] .town-card__link { color: var(--gold-light); }
.town-card__link:hover { text-decoration: underline; }
.town-card__link svg { width: 16px; height: 16px; }
.town-swiper-progress {
  height: 3px;
  background: var(--border-soft);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.town-swiper-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--forest-deep);
  border-radius: 3px;
  transition: width 0.1s linear;
}

/* ===== Town intelligence panel ===== */
.town-intel-section { padding: 4rem 0; background: #fff; }
.town-data-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgba(8,43,33,0.14);
  overflow: hidden;
}
.town-data-panel__summary {
  padding: 42px;
  background: linear-gradient(160deg, var(--forest-deep), var(--forest-dark));
  color: #fff;
}
.town-data-panel__summary h3 {
  font-family: var(--serif);
  font-size: 1.8rem;
  margin: 0 0 0.5rem;
  color: #fff;
  line-height: 1.2;
}
.town-data-panel__summary p {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  margin: 0 0 1.5rem;
  font-family: var(--sans);
}
.town-data-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-light);
  text-decoration: none;
  font-family: var(--sans);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.town-data-panel__link:hover { border-bottom-color: var(--gold-light); text-decoration: none; }
.town-data-panel__link svg { width: 16px; height: 16px; }
.town-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}
.town-data-card {
  min-height: 140px;
  padding: 26px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.town-data-card--empty {
  grid-column: 1 / -1;
  min-height: 200px;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  font-family: var(--sans);
}
.town-data-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-family: var(--sans);
}
.town-data-card__value {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  font-family: var(--sans);
}
.town-intel-disclaimer {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 1.5rem auto 0;
  max-width: 760px;
  text-align: center;
  font-family: var(--sans);
}

/* ===== County browser ===== */
.county-browser-section { padding: 4rem 0; }
.county-browser-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.loc-county-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem 1.75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.loc-county-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(8,43,33,0.10);
  border-color: var(--forest-light);
}
.loc-county-card h3 {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--forest-deep);
  margin: 0 0 0.5rem;
}
.loc-county-card__count {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--forest-deep);
  line-height: 1;
  margin-bottom: 0.2rem;
}
.loc-county-card__label {
  font-size: 0.82rem;
  color: var(--muted);
  font-family: var(--sans);
  margin-bottom: 1rem;
}
.loc-county-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  font-family: var(--sans);
  margin-top: auto;
}
.loc-county-card__link:hover { text-decoration: underline; }
.loc-county-card__link svg { width: 16px; height: 16px; }

/* ===== Text list (accessible non-map alternative) ===== */
.loc-text-list-section { padding: 4rem 0; }
.loc-text-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.loc-text-list__county h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--forest-deep);
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--border-soft);
}
.loc-text-list__county ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.loc-text-list__county a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-family: var(--sans);
  transition: color var(--transition);
}
.loc-text-list__county a:hover { color: var(--forest-deep); text-decoration: underline; }

/* ===== Final CTA ===== */
.loc-cta {
  background: var(--forest-deep);
  color: #fff;
  padding: 4rem 0;
  text-align: center;
}
.loc-cta__inner { max-width: 640px; margin: 0 auto; }
.loc-cta h2 {
  font-family: var(--serif);
  font-size: 2.2rem;
  margin: 0 0 0.75rem;
  color: #fff;
  line-height: 1.2;
}
.loc-cta p {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.8);
  margin: 0 0 2rem;
  line-height: 1.5;
}
.loc-cta__form {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.loc-cta__input {
  flex: 1 1 280px;
  max-width: 320px;
  height: 52px;
  padding: 0 1.25rem;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  font-size: 1rem;
  font-family: var(--sans);
  outline: 0;
  transition: border-color var(--transition), background var(--transition);
}
.loc-cta__input::placeholder { color: rgba(255,255,255,0.5); }
.loc-cta__input:focus { border-color: var(--gold-light); background: rgba(255,255,255,0.15); }
.loc-cta__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gold-light);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--sans);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.loc-cta__whatsapp:hover { border-bottom-color: var(--gold-light); text-decoration: none; }
.loc-cta__whatsapp svg { width: 18px; height: 18px; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .locations-hero { grid-template-columns: 1fr; min-height: auto; }
  .location-map-shell { min-height: 460px; border-left: 0; border-top: 1px solid var(--border); }
  .coverage-stat-strip { grid-template-columns: repeat(2, 1fr); }
  .coverage-stat { border-right: none; border-bottom: 1px solid var(--border); }
  .coverage-stat:nth-child(odd) { border-right: 1px solid var(--border); }
  .town-data-panel { grid-template-columns: 1fr; }
  .county-browser-grid { grid-template-columns: repeat(2, 1fr); }
  .loc-text-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .locations-hero__content { padding: 36px 20px 60px; }
  .locations-hero__title { font-size: 1.8rem; }
  .location-map-shell { min-height: 360px; }
  .cgm-map { min-height: 360px; }
  .coverage-stat-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .coverage-stat { min-width: 180px; scroll-snap-align: start; border-right: 1px solid var(--border) !important; }
  .town-swiper { grid-auto-columns: 84%; }
  .town-data-grid { grid-template-columns: 1fr; }
  .county-browser-grid { grid-template-columns: 1fr; }
  .loc-text-list { grid-template-columns: 1fr; }
  .town-swiper-header { flex-direction: column; align-items: flex-start; }
  .loc-cta__form { flex-direction: column; }
  .loc-cta__input { max-width: 100%; }
}

/* ===== County tints for town cards ===== */
.town-card.tint-ivory { background: linear-gradient(145deg, #FFFFFF 0%, #F7F4EC 100%); }
.town-card.tint-sage { background: linear-gradient(145deg, #FFFFFF 0%, #E2E8DE 100%); }
.town-card.tint-stone { background: linear-gradient(145deg, #FFFFFF 0%, #E8E4DA 100%); }
.town-card.tint-cream { background: linear-gradient(145deg, #FFFFFF 0%, #EEE8DB 100%); }

/* Selected state overrides tint */
.town-card[aria-selected="true"] {
  background: linear-gradient(145deg, #123E30 0%, #082B21 100%) !important;
}

/* ===== Town card thumbnail ===== */
.town-card__thumb {
  width: 100%;
  height: 60px;
  background-size: cover;
  background-position: center;
  border-radius: 14px 14px 0 0;
  margin: -24px -24px 16px -24px;
  width: calc(100% + 48px);
  background-color: var(--cream);
}
.town-card__thumb--placeholder {
  background: linear-gradient(135deg, var(--sage-150, #E2E8DE) 0%, var(--cream) 100%);
  position: relative;
}
.town-card__thumb--placeholder::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
  background: rgba(29, 90, 61, 0.15);
  border-radius: 50%;
}
.town-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* ===== Featured (2x width) town card ===== */
.town-card--featured {
  grid-column: span 2;
  min-height: 240px;
}
.town-card--featured .town-card__thumb {
  height: 100px;
}
.town-card--featured .town-card__name {
  font-size: 1.6rem;
}

/* ===== Map: premium light style blending with white ===== */
.cgm-map {
  width: 100%;
  height: 460px;
  min-height: 460px;
  max-height: 460px;
  background: #fff !important;
}
.cgm-map .leaflet-container {
  background: #fff !important;
}
/* Premium map tiles: lightly desaturated to blend with the cream/white page.
   Not too aggressive - the map should still be visible as a map, just soft
   and minimal like a high-end editorial illustration. */
.leaflet-tile,
img.leaflet-tile.leaflet-tile-loaded {
  filter: brightness(1.05) saturate(0.75) contrast(0.95) !important;
}
/* Make the map container blend with the white page background */
.location-map-shell {
  background: #fff;
}
.cgm-map__legend {
  background: rgba(255,255,255,0.95);
}

/* ===== Town intelligence: visual widgets ===== */
.town-data-card--widget {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.town-data-card__sub {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
  font-family: var(--sans);
}

/* Soil pH gauge */
.ph-gauge {
  margin: 0.5rem 0 0.3rem;
}
.ph-gauge__track {
  position: relative;
  height: 12px;
  border-radius: 6px;
  overflow: visible;
  margin-bottom: 4px;
}
.ph-gauge__gradient {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(90deg, #f4a261 0%, #e9c46a 25%, #e8edcc 50%, #a8c98f 75%, #4a7c5c 100%);
}
.ph-gauge__marker {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 20px;
  background: var(--forest-dark);
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.ph-gauge__marker::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--forest-dark);
}
.ph-gauge__scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: var(--muted);
  font-family: var(--sans);
  padding: 0 2px;
}

/* Rainfall bar chart */
.rainfall-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0.5rem 0;
}
.rainfall-chart__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rainfall-chart__label {
  flex: 0 0 60px;
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rainfall-chart__bar {
  flex: 1 1 auto;
  height: 18px;
  background: var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
}
.rainfall-chart__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--forest), var(--forest-light));
  border-radius: 4px;
  transition: width 0.4s ease;
}
.rainfall-chart__fill--muted {
  background: linear-gradient(90deg, var(--stone-light), var(--stone));
}
.rainfall-chart__value {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  font-family: var(--sans);
  min-width: 50px;
  text-align: right;
}

/* Drainage icon */
.drainage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0.5rem 0;
}
.drainage-icon--well {
  background: rgba(29, 90, 61, 0.1);
  color: var(--forest-deep);
}
.drainage-icon--heavy {
  background: rgba(184, 92, 56, 0.1);
  color: var(--rust);
}
.drainage-icon--moderate {
  background: rgba(200, 164, 94, 0.1);
  color: var(--gold-deep);
}

/* Seasonal calendar strip */
.cal-strip {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  margin: 0.5rem 0;
}
.cal-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--sans);
  background: var(--cream);
  transition: transform var(--transition);
  cursor: default;
}
.cal-cell:hover { transform: scale(1.1); }
.cal-cell--frost {
  background: linear-gradient(135deg, #d4e8f0, #b8d4e8);
  color: #2d5a7a;
}
.cal-cell--flower {
  background: linear-gradient(135deg, #d4e8cc, #a8c98f);
  color: #2d5a3d;
}
.cal-cell--prune {
  background: linear-gradient(135deg, #f0e0c4, #cba35d);
  color: #6b4e1d;
}
.cal-cell--frost.cal-cell--prune {
  background: linear-gradient(135deg, #d4e8f0 0%, #f0e0c4 100%);
}
.cal-cell--flower.cal-cell--prune {
  background: linear-gradient(135deg, #d4e8cc 0%, #f0e0c4 100%);
}

/* ===== Data-driven calendar cell (4 category bars + month letter) =====
   Design notes:
   - Each cell is 64px tall, dominated by 4 stacked horizontal bars
     (one per category: Frost / Sow-Plant / Flowering / Prune).
   - Active bars use SATURATED colors so the calendar reads at a glance.
   - Inactive bars use a neutral light grey so the cell still looks structured.
   - The month letter sits in a thin band at the top of each cell.
   - The same component is used on town pages and on the locations summary panel.
*/
.cal-cell--data {
  display: flex;
  flex-direction: column;
  height: 96px;
  padding: 0;
  background: var(--cream);
  border-radius: 4px;
  overflow: hidden;
  transition: transform var(--transition);
  cursor: default;
  border: 1px solid rgba(45, 74, 56, 0.08);
}
.cal-cell--data:hover { transform: scale(1.08); z-index: 2; }
.cal-cell__month {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--forest-dark);
  line-height: 1;
  font-family: var(--sans);
  background: var(--cream);
  border-bottom: 1px solid rgba(45, 74, 56, 0.06);
  flex-shrink: 0;
}
.cal-cell__bars {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  gap: 1px;
  width: 100%;
  flex: 1;
  padding: 1px;
  background: var(--cream);
}
.cal-cell__bar {
  background: #e8e4d6; /* inactive fallback */
  border-radius: 1px;
  min-height: 4px;
  transition: background 0.2s ease;
}
/* Each bar type gets a DISTINCT light tint when inactive (so you can see
   which bar is which even when it's not active) and a saturated colour
   when active. This fixes the "all bars look the same" issue. */
.cal-cell__bar--frost   { background: rgba(58, 127, 181, 0.12); }
.cal-cell__bar--frost.is-active   { background: #3a7fb5; }
.cal-cell__bar--sow     { background: rgba(90, 154, 62, 0.12); }
.cal-cell__bar--sow.is-active     { background: #5a9a3e; }
.cal-cell__bar--flower  { background: rgba(217, 148, 31, 0.12); }
.cal-cell__bar--flower.is-active  { background: #d9941f; }
.cal-cell__bar--prune   { background: rgba(142, 95, 168, 0.12); }
.cal-cell__bar--prune.is-active   { background: #8e5fa8; }
.cal-cell__bar--lawn    { background: rgba(74, 124, 60, 0.12); }
.cal-cell__bar--lawn.is-active    { background: #4a7c3c; }
.cal-cell__bar--feed    { background: rgba(139, 111, 63, 0.12); }
.cal-cell__bar--feed.is-active    { background: #8b6f3f; }
.cal-cell__bar--water   { background: rgba(46, 134, 171, 0.12); }
.cal-cell__bar--water.is-active   { background: #2e86ab; }
.cal-cell__bar--pests   { background: rgba(196, 69, 54, 0.12); }
.cal-cell__bar--pests.is-active   { background: #c44536; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.cal-legend__item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--muted);
  font-family: var(--sans);
}
.cal-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.cal-dot--frost   { background: #3a7fb5; }
.cal-dot--sow     { background: #5a9a3e; }
.cal-dot--flower  { background: #d9941f; }
.cal-dot--prune   { background: #8e5fa8; }
.cal-dot--lawn    { background: #4a7c3c; }
.cal-dot--feed    { background: #8b6f3f; }
.cal-dot--water   { background: #2e86ab; }
.cal-dot--pests   { background: #c44536; }

/* ===== Responsive: featured card on mobile ===== */
@media (max-width: 640px) {
  .town-card--featured { grid-column: span 1; }
  .town-card--featured .town-card__thumb { height: 60px; }
  .town-card--featured .town-card__name { font-size: 1.4rem; }
  .cal-strip { grid-template-columns: repeat(12, 1fr); }
  .cal-cell { height: 28px; font-size: 0.62rem; }
  .cal-cell--data { height: 80px; }
  .cal-cell__month { height: 12px; font-size: 0.58rem; }
  .cal-cell__bar { min-height: 3px; }
}

/* ===== Map cluster markers ===== */
.map-cluster-wrap { background: transparent !important; border: none !important; }
.map-cluster {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest), var(--forest-deep));
  color: #fff;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(8,43,33,0.3);
  text-align: center;
}

/* ===== Recent search chips ===== */
.loc-recent-searches {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  max-width: 540px;
}
.loc-recent-searches[hidden] { display: none !important; }
.loc-recent-searches__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-family: var(--sans);
  white-space: nowrap;
}
.loc-recent-searches__chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.loc-recent-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--forest-deep);
  font-family: var(--sans);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.loc-recent-chip:hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: #fff;
}

/* ===== Town intelligence: interpretation card ===== */
.town-data-card--interpretation {
  grid-column: 1 / -1;
  min-height: auto;
  padding: 30px;
  background: linear-gradient(135deg, var(--cream) 0%, #fff 100%);
  border-top: 3px solid var(--gold);
}
.town-data-card--interpretation .town-data-card__label {
  color: var(--gold-deep);
  margin-bottom: 0.6rem;
}
.town-data-card__interpretation {
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
  font-family: var(--sans);
}
.town-data-card__interpretation strong {
  color: var(--forest-deep);
  font-weight: 600;
}

/* ===== Town card: actions row ===== */
.town-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}
.town-card__compare {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.7rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--sans);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.town-card__compare:hover {
  border-color: var(--forest-deep);
  color: var(--forest-deep);
}
.town-card__compare.is-active {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: #fff;
}
.town-card__compare svg { width: 14px; height: 14px; }

/* ===== Compare drawer (sticky bottom bar) ===== */
.compare-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  pointer-events: none;
}
.compare-drawer[hidden] { display: none !important; }
.compare-drawer__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 14px 20px;
  margin: 0 20px 20px;
  background: var(--forest-deep);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(8,43,33,0.3);
  pointer-events: auto;
  animation: compareSlideUp 0.3s ease;
}
@keyframes compareSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.compare-drawer__summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.compare-drawer__count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--gold);
  color: #fff;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: var(--sans);
}
.compare-drawer__label {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
  font-family: var(--sans);
}
.compare-drawer__chips {
  display: flex;
  gap: 0.4rem;
  flex: 1 1 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.compare-drawer__chips::-webkit-scrollbar { display: none; }
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem 0.3rem 0.75rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #fff;
  font-family: var(--sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
}
.compare-chip:hover { background: rgba(255,255,255,0.2); }
.compare-chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  font-size: 0.85rem;
  line-height: 1;
}
.compare-drawer__actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}
.compare-drawer__btn {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
}
.compare-drawer__btn--clear {
  background: transparent;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.2);
}
.compare-drawer__btn--clear:hover { background: rgba(255,255,255,0.1); color: #fff; }
.compare-drawer__btn--view {
  background: var(--gold);
  color: #fff;
}
.compare-drawer__btn--view:hover { background: var(--gold-deep); }
.compare-drawer__btn--view:disabled { opacity: 0.4; cursor: not-allowed; }
.compare-drawer__btn--close {
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-size: 1.2rem;
  padding: 0.5rem 0.6rem;
}
.compare-drawer__btn--close:hover { color: #fff; }

/* ===== Compare modal ===== */
.compare-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.compare-modal[hidden] { display: none !important; }
.compare-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,43,33,0.6);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.compare-modal__panel {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(8,43,33,0.3);
  max-width: 1100px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: modalSlide 0.3s ease;
}
@keyframes modalSlide {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.compare-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-soft);
}
.compare-modal__title {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--forest-deep);
  margin: 0;
}
.compare-modal__close {
  width: 36px; height: 36px;
  border: 0;
  background: var(--cream);
  border-radius: 50%;
  font-size: 1.3rem;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.compare-modal__close:hover { background: var(--border-soft); color: var(--ink); }
.compare-modal__body {
  padding: 1.5rem 2rem;
  overflow-y: auto;
}
.compare-modal__empty {
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  padding: 2rem 0;
  font-family: var(--sans);
}
.compare-table-wrap {
  overflow-x: auto;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
}
.compare-table th {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 2px solid var(--border);
  vertical-align: top;
}
.compare-table th a {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--forest-deep);
  text-decoration: none;
  font-weight: 600;
}
.compare-table th a:hover { text-decoration: underline; }
.compare-table__county {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 400;
}
.compare-table td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.5;
  vertical-align: top;
}
.compare-table__label {
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  background: var(--cream);
}

/* ===== Responsive: compare on mobile ===== */
@media (max-width: 640px) {
  .compare-drawer__bar { flex-wrap: wrap; padding: 12px; margin: 0 12px 12px; }
  .compare-drawer__label { display: none; }
  .compare-modal__panel { max-height: 90vh; border-radius: 14px; }
  .compare-modal__header { padding: 1rem 1.25rem; }
  .compare-modal__body { padding: 1rem 1.25rem; }
  .compare-table th, .compare-table td { padding: 0.5rem 0.6rem; font-size: 0.78rem; }
}

/* ===== A: Full-screen map toggle ===== */
.cgm-map__expand {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.9rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--forest-deep);
  font-family: var(--sans);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(8,43,33,0.1);
  transition: background var(--transition), transform var(--transition);
}
.cgm-map__expand:hover { background: #fff; transform: scale(1.03); }
.cgm-map__expand svg { width: 16px; height: 16px; }
.cgm-map__expand span { display: none; }
@media (min-width: 641px) {
  .cgm-map__expand span { display: inline; }
}

/* Full-screen map overlay */
.map-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.map-fullscreen[hidden] { display: none !important; }
.map-fullscreen__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--forest-deep);
  color: #fff;
  flex-shrink: 0;
}
.map-fullscreen__header h2 {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin: 0;
  color: #fff;
}
.map-fullscreen__close {
  width: 36px; height: 36px;
  border: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  font-size: 1.3rem;
  color: #fff;
  cursor: pointer;
  transition: background var(--transition);
}
.map-fullscreen__close:hover { background: rgba(255,255,255,0.25); }
.map-fullscreen__map {
  flex: 1 1 auto;
  min-height: 0;
}
.map-fullscreen__map .cgm-map {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.map-fullscreen__legend {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--cream);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ===== B: Stats strip swipe hint ===== */
.coverage-stat-strip__hint {
  display: none;
}
@media (max-width: 640px) {
  .coverage-stat-strip__hint {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gold-deep);
    font-family: var(--sans);
    white-space: nowrap;
    transition: opacity 0.4s ease;
  }
}

/* ===== C: Swiper position indicator ===== */
.town-swiper-bottom {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.town-swiper-progress {
  flex: 1 1 auto;
  height: 3px;
  background: var(--border-soft);
  border-radius: 3px;
  overflow: hidden;
}
.town-swiper-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--forest-deep);
  border-radius: 3px;
  transition: width 0.1s linear;
}
.town-swiper-position {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--sans);
  white-space: nowrap;
}

/* ===== D: Sticky mini-search ===== */
.loc-sticky-search {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 1rem;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.loc-sticky-search[hidden] { display: none !important; }
.loc-sticky-search.is-visible { transform: translateY(0); }
.loc-sticky-search__inner {
  display: flex;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}
.loc-sticky-search__icon {
  position: absolute;
  left: 14px;
  display: flex;
  align-items: center;
  color: var(--muted);
  pointer-events: none;
}
.loc-sticky-search__icon svg { width: 18px; height: 18px; }
.loc-sticky-search__input {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 42px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--cream);
  font-size: 0.92rem;
  font-family: var(--sans);
  color: var(--ink);
  outline: 0;
  transition: border-color var(--transition), background var(--transition);
}
.loc-sticky-search__input:focus {
  border-color: var(--forest-deep);
  background: #fff;
}
.loc-sticky-search__close {
  position: absolute;
  right: 8px;
  width: 28px; height: 28px;
  border: 0;
  background: transparent;
  font-size: 1.1rem;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loc-sticky-search__close:hover { color: var(--ink); }

/* ===== E: Sticky bottom CTA (mobile only) ===== */
.loc-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 850;
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(8,43,33,0.08);
}
.loc-sticky-cta[hidden] { display: none !important; }
.loc-sticky-cta__whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: #25D366;
  border-radius: 12px;
  color: #fff;
  flex-shrink: 0;
  text-decoration: none;
  transition: transform var(--transition);
}
.loc-sticky-cta__whatsapp:hover { transform: scale(1.05); text-decoration: none; }
.loc-sticky-cta__whatsapp svg { width: 24px; height: 24px; }
.loc-sticky-cta__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 1 1 auto;
  height: 48px;
  background: var(--forest-deep);
  border-radius: 12px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: var(--sans);
  text-decoration: none;
  transition: background var(--transition);
}
.loc-sticky-cta__main:hover { background: var(--forest-dark); text-decoration: none; }
.loc-sticky-cta__main svg { width: 18px; height: 18px; }

/* Show sticky CTA only on mobile */
@media (min-width: 641px) {
  .loc-sticky-cta { display: none !important; }
  .cgm-map__expand { display: none; }
}
/* Hide sticky search on desktop (the hero search is always visible there) */
@media (min-width: 961px) {
  .loc-sticky-search { display: none !important; }
}

/* ===== A: Viewport-synced town list (desktop only) ===== */
.cgm-map__townlist {
  display: none;
}
@media (min-width: 961px) {
  .cgm-map__townlist {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    width: 200px;
    max-height: calc(100% - 80px);
    background: rgba(255,255,255,0.95);
    border: 1px solid var(--border);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(8,43,33,0.08);
    overflow: hidden;
  }
  .cgm-map__townlist-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    padding: 10px 14px 6px;
    margin: 0;
    font-family: var(--sans);
  }
  .cgm-map__townlist-items {
    overflow-y: auto;
    max-height: 400px;
    padding: 0 6px 8px;
  }
  .cgm-map__townlist-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition);
    font-family: var(--sans);
  }
  .cgm-map__townlist-item:hover { background: var(--cream); }
  .cgm-map__townlist-item.is-selected { background: var(--forest-deep); }
  .cgm-map__townlist-item.is-selected .cgm-map__townlist-name { color: #fff; }
  .cgm-map__townlist-item.is-selected .cgm-map__townlist-county { color: rgba(255,255,255,0.7); }
  .cgm-map__townlist-name { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
  .cgm-map__townlist-county { font-size: 0.7rem; color: var(--muted); }
  .cgm-map__townlist-empty { font-size: 0.78rem; color: var(--muted); padding: 8px 10px; font-family: var(--sans); margin: 0; }
  .cgm-map__townlist-more { font-size: 0.72rem; color: var(--muted); padding: 6px 10px; font-family: var(--sans); margin: 0; text-align: center; }
}

/* ===== B: Hover preview card (desktop only) ===== */
.cgm-map__hover-card {
  display: none;
}
@media (min-width: 961px) {
  .cgm-map__hover-card {
    display: block;
    position: absolute;
    z-index: 20;
    min-width: 180px;
    max-width: 240px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.98);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(8,43,33,0.15);
    backdrop-filter: blur(8px);
    pointer-events: none;
    font-family: var(--sans);
  }
  .cgm-map__hover-card[hidden] { display: none; }
  .cgm-map__hover-name { font-size: 0.95rem; font-weight: 600; color: var(--forest-deep); margin-bottom: 2px; }
  .cgm-map__hover-county { font-size: 0.72rem; color: var(--muted); margin-bottom: 6px; }
  .cgm-map__hover-soil { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.4; margin-bottom: 6px; }
  .cgm-map__hover-link { font-size: 0.75rem; font-weight: 600; color: var(--forest); }
}

/* ===== C: Pin feature ===== */
.town-card__btn-group {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.town-card__pin {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.7rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--sans);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.town-card__pin:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}
.town-card__pin.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.town-card__pin svg { width: 14px; height: 14px; }

/* Split-view panel */
.pin-split-section { padding: 4rem 0; background: var(--cream); }
.pin-split-section[hidden] { display: none !important; }
.pin-split-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 30px rgba(8,43,33,0.08);
  overflow: hidden;
}
.pin-split-empty {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.95rem;
  font-family: var(--sans);
  margin: 0;
}
.pin-split-grid {
  display: grid;
  gap: 0;
}
.pin-split-col {
  padding: 0;
  border-right: 1px solid var(--border-soft);
}
.pin-split-col:last-child { border-right: 0; }
.pin-split-col__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem 0.5rem;
  background: var(--forest-deep);
}
.pin-split-col__header h3 {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: #fff;
  margin: 0;
}
.pin-split-col__remove {
  width: 28px; height: 28px;
  border: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  transition: background var(--transition);
}
.pin-split-col__remove:hover { background: rgba(255,255,255,0.3); }
.pin-split-col__county {
  padding: 0 1.5rem 1rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  font-family: var(--sans);
  background: var(--forest-deep);
}
.pin-split-col__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.7rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--sans);
}
.pin-split-col__label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.pin-split-col__row > span:last-child {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.pin-split-col__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.8rem 1.5rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  font-family: var(--sans);
}
.pin-split-col__link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .pin-split-grid { grid-template-columns: 1fr !important; }
  .pin-split-col { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .pin-split-col:last-child { border-bottom: 0; }
  .town-card__btn-group { flex-wrap: wrap; }
}

/* ---------- NEW SERVICES PAGE (premium mockup) ---------- */

/* Outline light button (for dark backgrounds) */
.btn-outline-light {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
  transform: translateY(-2px);
  text-decoration: none;
}

/* Section title (centered) */
.section-title-center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 3rem;
}
.section-title-center h2 {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--forest-deep);
  margin: 0.5rem 0 1rem;
  line-height: 1.25;
}
.section-title-center p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}
.section-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  margin: 0;
  font-family: var(--sans);
}
.section-kicker--light { color: var(--gold-light); }
.section-lede { color: var(--muted); font-size: 1rem; }

/* ===== HERO ===== */
.svc-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
}
.svc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.svc-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(21, 40, 28, 0.88) 0%, rgba(21, 40, 28, 0.62) 55%, rgba(21, 40, 28, 0.4) 100%);
}
.svc-hero__container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 4rem 1.5rem;
}
.svc-hero__content { max-width: 580px; }
.svc-hero__kicker {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-light);
  margin: 0 0 1rem;
  font-family: var(--sans);
}
.svc-hero__content h1 {
  font-family: var(--serif);
  font-size: 2.8rem;
  line-height: 1.15;
  margin: 0 0 1.25rem;
  color: #fff;
  font-weight: 400;
}
.svc-hero__lede {
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 2rem;
  max-width: 500px;
}
.svc-hero__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.svc-hero__quote {
  background: rgba(21, 40, 28, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  backdrop-filter: blur(8px);
  max-width: 340px;
  margin-left: auto;
}
.svc-hero__quote p {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 1rem;
}
.svc-hero__quote cite {
  font-style: normal;
  font-size: 0.82rem;
  color: var(--gold-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--sans);
}

/* ===== STATS BAR ===== */
.svc-stats {
  background: var(--forest-deep);
  padding: 2.5rem 0;
}
.svc-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.svc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.3rem;
}
.svc-stat__icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-light);
  margin-bottom: 0.25rem;
}
.svc-stat__icon svg { width: 32px; height: 32px; }
.svc-stat__value {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
}
.svc-stat__label {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--sans);
  line-height: 1.3;
}

/* ===== SERVICE SELECTOR ===== */
.svc-selector-section {
  padding: 4rem 0;
}
.svc-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.svc-selector__kicker {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  margin: 0 0 0.5rem;
  font-family: var(--sans);
}
.svc-selector__left h2 {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--forest-deep);
  margin: 0 0 0.75rem;
  line-height: 1.25;
}
.svc-selector__intro {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
}
.svc-selector__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.svc-selector__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform var(--transition);
}
.svc-selector__option:hover {
  background: #fff;
  border-left-color: var(--forest-light);
  transform: translateX(2px);
}
.svc-selector__option.is-active {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  border-left-color: var(--gold);
  color: #fff;
}
.svc-selector__option-arrow {
  display: flex;
  align-items: center;
  color: var(--muted);
  transition: color var(--transition), transform var(--transition);
}
.svc-selector__option.is-active .svc-selector__option-arrow {
  color: var(--gold-light);
  transform: translateX(3px);
}
.svc-selector__option-arrow svg { width: 18px; height: 18px; }

.svc-selector__right {
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  min-height: 400px;
  box-shadow: var(--shadow-sm);
}
.svc-selector__panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.svc-selector__panel[hidden] { display: none !important; }
.svc-selector__panel-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0;
  font-family: var(--sans);
}
.svc-selector__panel-title {
  font-family: var(--serif);
  font-size: 1.9rem;
  color: var(--forest-deep);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.svc-selector__panel-blurb {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.svc-selector__panel-actions { margin-bottom: 1.5rem; }
.svc-selector__next-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 0.5rem;
  font-family: var(--sans);
}
.svc-selector__next-steps {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.svc-selector__next-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-family: var(--sans);
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.svc-selector__next-step:hover {
  border-color: var(--forest-light);
  background: var(--cream);
  transform: translateX(2px);
  text-decoration: none;
}
.svc-selector__next-step-icon {
  display: flex;
  align-items: center;
  color: var(--forest);
}
.svc-selector__next-step-icon svg { width: 18px; height: 18px; }
.svc-selector__next-step-name { flex: 1 1 auto; font-weight: 500; }
.svc-selector__next-step-arrow { color: var(--muted); }
.svc-selector__next-step-arrow svg { width: 16px; height: 16px; }
.svc-selector__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--forest-deep);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--sans);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.svc-selector__whatsapp:hover {
  border-bottom-color: var(--forest-deep);
  text-decoration: none;
}

/* ===== SERVICES GRID ===== */
.svc-grid-section { padding: 4rem 0; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.svc-grid-card {
  display: flex;
  flex-direction: column;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.svc-grid-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--forest-light);
  text-decoration: none;
}
.svc-grid-card__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-radius: 10px;
  color: var(--forest-deep);
  margin-bottom: 1rem;
}
.svc-grid-card__icon svg { width: 26px; height: 26px; }
.svc-grid-card h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--forest-deep);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.svc-grid-card p {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 1rem;
  flex: 1 1 auto;
}
.svc-grid-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--forest);
  font-family: var(--sans);
}
.svc-grid-card__link svg { width: 16px; height: 16px; transition: transform var(--transition); }
.svc-grid-card:hover .svc-grid-card__link svg { transform: translateX(3px); }

/* ===== FOUR PRINCIPLES (dark green) ===== */
.svc-principles {
  background: var(--forest-dark);
  color: #fff;
  padding: 4.5rem 0;
}
.svc-principles .section-title-center h2 { color: #fff; }
.svc-principles__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.svc-principle {
  text-align: left;
}
.svc-principle__num {
  display: block;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
  line-height: 1;
}
.svc-principle h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: #fff;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}
.svc-principle p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  margin: 0;
}

/* ===== GUIDES PREVIEW ===== */
.svc-guides-section { padding: 4rem 0; }
.svc-guides-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  gap: 1rem;
}
.svc-guides-header h2 {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--forest-deep);
  margin: 0.3rem 0 0;
  line-height: 1.25;
}
.svc-guides-viewall {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--forest);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--sans);
  transition: color var(--transition);
}
.svc-guides-viewall:hover { color: var(--forest-deep); text-decoration: none; }
.svc-guides-viewall svg { width: 16px; height: 16px; }
.svc-guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.svc-guide-card {
  display: flex;
  flex-direction: column;
  background: var(--bone);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}
.svc-guide-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.svc-guide-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-radius: 8px;
  color: var(--forest-deep);
  margin-bottom: 0.75rem;
}
.svc-guide-card__icon svg { width: 22px; height: 22px; }
.svc-guide-card h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--forest-deep);
  margin: 0 0 0.5rem;
  line-height: 1.3;
  flex: 1 1 auto;
}
.svc-guide-card__read {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
  font-family: var(--sans);
}
.svc-guide-card__read svg { width: 14px; height: 14px; }
.svc-guide-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--forest);
  font-family: var(--sans);
}
.svc-guide-card__link svg { width: 16px; height: 16px; }

/* ===== HOW WE WORK ===== */
.svc-how-section { padding: 4rem 0; }
.svc-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.svc-step {
  text-align: left;
  position: relative;
}
.svc-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--forest-deep);
  color: var(--gold-light);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.svc-step h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--forest-deep);
  margin: 0 0 0.5rem;
  line-height: 1.25;
}
.svc-step p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
}

/* ===== CTA ===== */
.svc-cta {
  background: var(--forest-deep);
  color: #fff;
  padding: 4rem 0;
  text-align: center;
}
.svc-cta__inner { max-width: 640px; margin: 0 auto; }
.svc-cta h2 {
  font-family: var(--serif);
  font-size: 2.2rem;
  margin: 0 0 0.75rem;
  color: #fff;
  line-height: 1.2;
}
.svc-cta p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 2rem;
  line-height: 1.5;
}
.svc-cta__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 960px) {
  .svc-hero__container { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 1.5rem; }
  .svc-hero__quote { margin-left: 0; max-width: 100%; }
  .svc-hero__content h1 { font-size: 2.2rem; }
  .svc-selector { grid-template-columns: 1fr; gap: 2rem; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-principles__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .svc-guides-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-how-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .svc-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 600px) {
  .svc-hero { min-height: auto; }
  .svc-hero__content h1 { font-size: 1.8rem; }
  .svc-hero__lede { font-size: 0.98rem; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-principles__grid { grid-template-columns: 1fr; }
  .svc-guides-grid { grid-template-columns: 1fr; }
  .svc-how-grid { grid-template-columns: 1fr; }
  .svc-guides-header { flex-direction: column; align-items: flex-start; }
  .svc-selector__right { padding: 1.5rem; min-height: auto; }
  .svc-cta h2 { font-size: 1.6rem; }
  .svc-cta__actions { flex-direction: column; }
  .svc-cta__actions .btn { width: 100%; }
}

/* ---------- Plant page: References and justification ---------- */
.plant-refs-intro {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.6;
  font-family: var(--sans);
}
.plant-refs-list {
  list-style: none;
  counter-reset: plant-ref;
  padding: 0;
  margin: 0 0 1.5rem;
}
.plant-ref {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border-soft);
}
.plant-ref:last-child {
  border-bottom: none;
}
.plant-ref__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--forest-deep);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--sans);
  line-height: 1;
}
.plant-ref__body {
  flex: 1 1 auto;
  min-width: 0;
}
.plant-ref__title {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.5;
  font-family: var(--sans);
  margin-bottom: 0.2rem;
  transition: color var(--transition);
}
.plant-ref__title:hover {
  color: var(--forest-deep);
  text-decoration: underline;
}
.plant-ref__just {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  font-family: var(--sans);
  margin: 0;
}
@media (max-width: 600px) {
  .plant-ref {
    gap: 0.5rem;
    padding: 0.7rem 0;
  }
  .plant-ref__num {
    width: 22px;
    height: 22px;
    font-size: 0.72rem;
  }
  .plant-ref__title {
    font-size: 0.82rem;
  }
  .plant-ref__just {
    font-size: 0.78rem;
  }
}

/* ---------- Inline citation markers ---------- */
.cite {
  display: inline;
  margin-left: 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--sans);
  vertical-align: super;
  line-height: 0;
}
.cite-link {
  display: inline-block;
  color: var(--forest-deep);
  text-decoration: none;
  padding: 0 1px;
  transition: color var(--transition), background var(--transition);
  border-radius: 2px;
}
.cite-link:hover {
  color: #fff;
  background: var(--forest-deep);
  text-decoration: none;
}
/* Highlight target reference when jumped to via inline citation */
.plant-ref:target {
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: 0 0 0 6px var(--cream);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ---------- Reference tag badges ---------- */
.plant-ref__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.35rem 0 0.5rem;
}
.plant-ref__tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--forest-deep);
  background: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  font-family: var(--sans);
  line-height: 1.4;
}
/* ==========================================================================
   CGM v5 Update Stylesheet — Instructions website.txt implementation
   Appended to styles.css to keep prior rules intact (additive layer).
   ========================================================================== */

/* ----- INSTR #20: Close large empty gap above mobile menu categories ----- */
@media (max-width: 1024px) {
  .mobile-menu:not([hidden]) {
    padding: 0.25rem 1.25rem 1.25rem !important;
    gap: 0 !important;
  }
  .mobile-menu > a,
  .mobile-menu > .mobile-gk-section,
  .mobile-menu > .mobile-gk-toggle {
    margin-top: 0 !important;
  }
  .mobile-menu a,
  .mobile-gk-toggle {
    padding: 0.85rem 0.25rem !important;
  }
  .mobile-menu a:first-child {
    padding-top: 0.6rem !important;
  }
}

/* ----- USER REQUEST: Visible scroller on mobile menu bar ----- */
@media (max-width: 1024px) {
  .mobile-menu:not([hidden]) {
    scrollbar-width: thin;
    scrollbar-color: var(--forest) rgba(30, 58, 42, 0.12);
  }
  .mobile-menu:not([hidden])::-webkit-scrollbar {
    width: 6px;
    -webkit-appearance: none;
    appearance: none;
  }
  .mobile-menu:not([hidden])::-webkit-scrollbar-track {
    background: rgba(30, 58, 42, 0.06);
    border-radius: 3px;
  }
  .mobile-menu:not([hidden])::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--forest), var(--forest-dark, #143524));
    border-radius: 3px;
    border: 1px solid rgba(184, 146, 67, 0.35);
  }
  .mobile-menu:not([hidden])::-webkit-scrollbar-thumb:hover {
    background: var(--gold, #b89243);
  }
  /* Also expose the scrollbar on the swipe-row at the top of the homepage */
  .swipe-row {
    scrollbar-width: thin !important;
    scrollbar-color: var(--forest) transparent !important;
  }
  .swipe-row::-webkit-scrollbar {
    display: block !important;
    height: 5px;
    -webkit-appearance: none;
    appearance: none;
  }
  .swipe-row::-webkit-scrollbar-track {
    background: rgba(30, 58, 42, 0.06);
    border-radius: 3px;
    margin: 0 1rem;
  }
  .swipe-row::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--forest), var(--gold, #b89243));
    border-radius: 3px;
  }
  .swipe-row__hint { display: none !important; }
}

/* ----- INSTR #21: Premium mobile menu redesign ----- */
@media (max-width: 1024px) {
  .mobile-menu:not([hidden]) {
    background: linear-gradient(180deg, #fdfbf6 0%, #f6efe2 100%) !important;
    box-shadow: inset 0 1px 0 rgba(184, 146, 67, 0.25);
    border-top: 2px solid var(--gold, #b89243) !important;
  }
  .mobile-menu a {
    font-family: var(--serif, Georgia, serif) !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    color: var(--forest-deep, #143524) !important;
    border-bottom: 1px solid rgba(30, 58, 42, 0.08) !important;
    padding: 0.9rem 0.5rem !important;
    position: relative;
    transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }
  .mobile-menu a::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold, #b89243);
    opacity: 0.5;
    transition: opacity 0.18s ease, transform 0.18s ease;
    flex-shrink: 0;
  }
  .mobile-menu a:hover,
  .mobile-menu a:active,
  .mobile-menu a:focus-visible {
    background: rgba(184, 146, 67, 0.08) !important;
    padding-left: 0.85rem !important;
    color: var(--forest, #1e3a2a) !important;
  }
  .mobile-menu a:hover::before,
  .mobile-menu a:active::before {
    opacity: 1;
    transform: scale(1.4);
  }
  .mobile-gk-toggle {
    font-family: var(--serif, Georgia, serif) !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    color: var(--forest-deep, #143524) !important;
    padding: 0.9rem 0.5rem !important;
    position: relative;
  }
  .mobile-gk-toggle::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold, #b89243);
    opacity: 0.5;
    margin-right: 0.55rem;
    flex-shrink: 0;
  }
  .mobile-gk-items a {
    font-size: 0.92rem !important;
    font-family: var(--sans, system-ui, sans-serif) !important;
    font-weight: 500 !important;
    color: var(--forest, #1e3a2a) !important;
    padding: 0.7rem 1.4rem !important;
    background: rgba(255, 255, 255, 0.55);
    border-bottom: 1px dashed rgba(30, 58, 42, 0.12) !important;
  }
  .mobile-gk-items a::before {
    content: ">";
    color: var(--gold, #b89243);
    font-size: 1rem;
    opacity: 0.8;
  }
  .mobile-menu-toggle {
    background: linear-gradient(135deg, var(--forest, #1e3a2a), var(--forest-dark, #143524)) !important;
    border: 1px solid var(--gold, #b89243) !important;
    box-shadow: 0 2px 6px rgba(30, 58, 42, 0.25) !important;
  }
}

/* ----- INSTR #21 (cont): Premium desktop nav redesign ----- */
@media (min-width: 1025px) {
  .nav {
    padding: 0.5rem 0 !important;
    border-bottom: 2px solid transparent;
    background: linear-gradient(180deg, rgba(253, 251, 246, 1), rgba(253, 251, 246, 0.92));
    transition: border-bottom-color 0.25s ease, box-shadow 0.25s ease;
  }
  .nav:hover {
    border-bottom-color: var(--gold, #b89243);
  }
  .nav-links a {
    position: relative;
    transition: color 0.2s ease;
  }
  .nav-links a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 70%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold, #b89243), transparent);
    transition: transform 0.25s ease;
  }
  .nav-links a:hover::after,
  .nav-links a:focus-visible::after,
  .nav-links a[aria-current="page"]::after {
    transform: translateX(-50%) scaleX(1);
  }
  .nav-dropdown-menu {
    border-top: 2px solid var(--gold, #b89243) !important;
    box-shadow: 0 14px 36px rgba(30, 58, 42, 0.18) !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden;
  }
  .nav-dropdown-menu a {
    transition: background 0.18s ease, padding-left 0.18s ease, color 0.18s ease;
  }
  .nav-dropdown-menu a:hover {
    background: linear-gradient(90deg, rgba(184, 146, 67, 0.14), transparent) !important;
    padding-left: 1.4rem !important;
    color: var(--forest, #1e3a2a) !important;
  }
  .nav-cta .btn-primary {
    background: linear-gradient(135deg, var(--forest, #1e3a2a), var(--forest-dark, #143524)) !important;
    border: 1px solid var(--gold, #b89243) !important;
    box-shadow: 0 4px 12px rgba(30, 58, 42, 0.25) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }
  .nav-cta .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(30, 58, 42, 0.32) !important;
  }
}

/* ----- INSTR #2: Gardening fork icon styling ----- */
.hero-proof span img.fork-icon,
.hero-proof span svg.fork-icon {
  vertical-align: middle;
}

/* ----- INSTR #3: Premium mobile swipe-row boxes ----- */
@media (max-width: 768px) {
  .cgm-scroll-dock.swipe-row,
  .swipe-row {
    padding-top: 0.4rem !important;
    padding-bottom: 0.7rem !important;
  }
  .swipe-row__item {
    background: linear-gradient(135deg, #ffffff 0%, #f8f3e8 100%) !important;
    border: 1px solid rgba(184, 146, 67, 0.28) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 14px rgba(30, 58, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.8) !important;
    font-weight: 600 !important;
    color: var(--forest-deep, #143524) !important;
    letter-spacing: 0.01em;
    transition: transform 0.25s cubic-bezier(.2,.7,.3,1), box-shadow 0.25s ease, background 0.25s ease !important;
  }
  .swipe-row__item:active,
  .swipe-row__item:focus-visible {
    background: linear-gradient(135deg, var(--forest, #1e3a2a), var(--forest-dark, #143524)) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px rgba(30, 58, 42, 0.28), 0 0 0 2px var(--gold, #b89243) !important;
  }
  .swipe-row__item::after {
    background: linear-gradient(115deg, transparent 28%, rgba(184, 146, 67, 0.35) 50%, transparent 72%) !important;
  }
}

/* ----- INSTR #4: Mobile horizontal whitespace fix ----- */
html, body {
  overflow-x: clip;
  max-width: 100vw;
}
body { width: 100%; }
img, video, svg, iframe, table, pre {
  max-width: 100%;
}
section, header, footer, main, aside, nav, .container, .editorial-feature,
.editorial-card-grid, .editorial-service-grid, .proof-strip, .hero {
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .editorial-feature__media img,
  .photo-interlude__img,
  .editorial-service-grid__cell img,
  .before-after img {
    max-width: 100%;
    height: auto;
  }
}

/* ----- INSTR #9: Lawn care / PRINCIPLED METHOD colour punch ----- */
.photo-interlude__kicker {
  color: var(--gold, #b89243) !important;
  letter-spacing: 0.18em !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.photo-interlude__title {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}
.photo-interlude__caption {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
}
.photo-interlude::before {
  background: linear-gradient(180deg, rgba(20, 53, 36, 0.72) 0%, rgba(30, 58, 42, 0.55) 60%, rgba(184, 146, 67, 0.32) 100%) !important;
}

/* ----- INSTR #12: Premium style for "Right plant, right place" section ----- */
.method-title-premium {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  font-family: var(--serif, Georgia, serif);
  font-weight: 600;
  line-height: 1.1;
}
.method-title-premium span {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: linear-gradient(135deg, rgba(184, 146, 67, 0.18), rgba(184, 146, 67, 0.06));
  border-left: 3px solid var(--gold, #b89243);
  border-radius: 2px;
  color: var(--forest-deep, #143524);
  letter-spacing: -0.01em;
}
@media (max-width: 768px) {
  .method-title-premium span {
    font-size: 1.4rem;
    padding: 0.25rem 0.65rem;
  }
}

/* ----- INSTR #13.5: Mobile gardening-intelligence boxes — 2-column ----- */
@media (max-width: 768px) {
  .editorial-card-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }
  .editorial-card-grid__cell {
    padding: 0.9rem 0.95rem !important;
    min-height: 0;
    border: 1px solid rgba(184, 146, 67, 0.35) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #ffffff, #faf5e9) !important;
    box-shadow: 0 4px 12px rgba(30, 58, 42, 0.08), inset 0 1px 0 rgba(255,255,255,0.8);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
    position: relative;
  }
  .editorial-card-grid__cell::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold, #b89243), transparent 80%);
  }
  .editorial-card-grid__cell:active,
  .editorial-card-grid__cell:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(30, 58, 42, 0.18), 0 0 0 2px var(--gold, #b89243);
  }
  .editorial-card-grid__cell h3 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--forest-deep, #143524) !important;
    margin-bottom: 0.35rem !important;
    line-height: 1.2;
  }
  .editorial-card-grid__cell p {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    color: var(--muted, #5a6b5e) !important;
    margin-bottom: 0.4rem !important;
    text-decoration: none !important;
    border-bottom: none !important;
  }
  .editorial-card-grid__arrow {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    color: var(--gold, #b89243) !important;
    text-transform: uppercase;
    border-bottom: none !important;
    text-decoration: none !important;
  }
  .editorial-card-grid__cell:hover .editorial-card-grid__arrow,
  .editorial-card-grid__cell:active .editorial-card-grid__arrow {
    text-decoration: underline !important;
  }
  .editorial-card-grid__cell p:hover,
  .editorial-card-grid__cell p:active {
    text-decoration: none !important;
    border-bottom: none !important;
  }
}

/* ----- INSTR #14: What is happening — premium restyle ----- */
.problem-diagnosis {
  background: linear-gradient(180deg, #ffffff 0%, #faf5e9 100%) !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  border-radius: 8px !important;
  padding: 1rem !important;
  box-shadow: 0 6px 22px rgba(30, 58, 42, 0.10) !important;
}
.problem-diagnosis__option {
  border: 1px solid rgba(30, 58, 42, 0.15) !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #ffffff, #fcf8ef) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-weight: 500 !important;
}
.problem-diagnosis__option:hover,
.problem-diagnosis__option:focus-visible,
.problem-diagnosis__option[aria-pressed="true"],
.problem-diagnosis__option.is-active {
  transform: translateY(-1px);
  border-color: var(--gold, #b89243) !important;
  box-shadow: 0 8px 18px rgba(30, 58, 42, 0.15) !important;
  background: linear-gradient(135deg, var(--forest-deep, #143524), var(--forest, #1e3a2a)) !important;
  color: #fff !important;
}
.problem-diagnosis__option[aria-pressed="true"] .problem-diagnosis__option-num,
.problem-diagnosis__option.is-active .problem-diagnosis__option-num {
  color: var(--gold, #b89243) !important;
}
.problem-diagnosis-accordion__summary {
  background: linear-gradient(135deg, var(--forest-deep, #143524), var(--forest, #1e3a2a)) !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 0.85rem 1.1rem !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}
.problem-diagnosis-accordion__chevron {
  color: var(--gold, #b89243) !important;
}
.problem-diagnosis-accordion[open] .problem-diagnosis-accordion__summary {
  border-bottom: 2px solid var(--gold, #b89243) !important;
}

/* ----- INSTR #14.2: Mobile diagnosis — keep result in view ----- */
@media (max-width: 768px) {
  .problem-diagnosis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .problem-diagnosis__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .problem-diagnosis__option {
    padding: 0.6rem 0.5rem !important;
    font-size: 0.85rem !important;
    flex-direction: column !important;
    text-align: center;
  }
  .problem-diagnosis__option-num {
    font-size: 0.7rem !important;
    margin-bottom: 0.2rem;
  }
  .problem-diagnosis__result {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, rgba(253, 251, 246, 0.4) 0%, #fdfbf6 30%);
    padding: 0.85rem !important;
    border: 1px solid var(--gold, #b89243) !important;
    border-radius: 6px;
    box-shadow: 0 -4px 16px rgba(30, 58, 42, 0.12);
    z-index: 5;
  }
}

/* ----- INSTR #15: Nine services premium ----- */
.editorial-service-grid__cell {
  transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  border: 1px solid rgba(184, 146, 67, 0.25);
  position: relative;
  overflow: hidden;
}
.editorial-service-grid__cell::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), transparent 90%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.editorial-service-grid__cell:hover,
.editorial-service-grid__cell:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(30, 58, 42, 0.18) !important;
  border-color: var(--gold, #b89243) !important;
}
.editorial-service-grid__cell:hover::after,
.editorial-service-grid__cell:focus-visible::after {
  transform: scaleX(1);
}
.editorial-service-grid__num {
  color: var(--gold, #b89243) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
}

/* ----- INSTR #18: Mobile — Nine services show 3 then scroll ----- */
@media (max-width: 768px) {
  .editorial-service-grid {
    display: flex !important;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--gold, #b89243) rgba(30, 58, 42, 0.08);
    padding-right: 0.25rem;
    border: 1px solid rgba(184, 146, 67, 0.25);
    border-radius: 6px;
    padding: 0.5rem;
    background: linear-gradient(180deg, #faf5e9, #fdfbf6);
  }
  .editorial-service-grid::-webkit-scrollbar { width: 5px; }
  .editorial-service-grid::-webkit-scrollbar-track { background: rgba(30, 58, 42, 0.06); border-radius: 3px; }
  .editorial-service-grid::-webkit-scrollbar-thumb { background: var(--gold, #b89243); border-radius: 3px; }
  .editorial-service-grid::after {
    content: "Scroll for more";
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    text-align: center;
    font-family: var(--sans, system-ui, sans-serif);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--gold, #b89243);
    background: linear-gradient(180deg, transparent, #fdfbf6 60%);
    padding: 0.4rem 0 0.1rem;
    pointer-events: none;
    text-transform: uppercase;
    font-weight: 700;
  }
  .editorial-service-grid__cell {
    flex-shrink: 0;
  }
}

/* ----- INSTR #19: Mobile — Popular right now side-by-side ----- */
@media (max-width: 768px) {
  .article-card-popular-grid,
  .popular-articles-grid,
  .article-card-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .article-card-popular,
  .tip-card {
    padding: 0.7rem !important;
    font-size: 0.85rem !important;
    border: 1px solid rgba(184, 146, 67, 0.22) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #ffffff, #faf5e9) !important;
    box-shadow: 0 3px 10px rgba(30, 58, 42, 0.08) !important;
  }
  .article-card-popular h3,
  .tip-card h3,
  .article-card-popular .tip-card__title {
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
  }
  .article-card-popular img,
  .tip-card img {
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 3px !important;
  }
}

/* ----- INSTR #24: Custom curved scrollbar refinement ----- */
.cgm-page-scrollbar {
  width: 8px !important;
  background: linear-gradient(180deg, rgba(30, 58, 42, 0.05), rgba(184, 146, 67, 0.05)) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 0 4px rgba(30, 58, 42, 0.12) !important;
}
.cgm-page-scrollbar__thumb {
  background: linear-gradient(180deg, var(--forest, #1e3a2a), var(--gold, #b89243)) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 2px 8px rgba(30, 58, 42, 0.25) !important;
}

/* ----- INSTR #27: Service page — first details box NOT open by default ----- */
.service-accordion > details:first-child summary {
  border-bottom: 1px solid var(--border-soft);
}

/* ----- INSTR #31: Plant library — tighter section spacing + square category boxes ----- */
.plant-library-section,
.plants-index-section {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.plant-category-card,
.plant-cat-card,
.plants-cat-card {
  border-radius: 4px !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  background: linear-gradient(135deg, #ffffff, #faf5e9) !important;
  box-shadow: 0 4px 14px rgba(30, 58, 42, 0.10), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
  overflow: hidden;
  position: relative;
}
.plant-category-card:hover,
.plant-cat-card:hover,
.plants-cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold, #b89243) !important;
  box-shadow: 0 10px 22px rgba(30, 58, 42, 0.18) !important;
}

/* ----- INSTR #32: Plant row scroll progress bar ----- */
.plant-row-progress {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 4px;
  width: 100%;
  background: rgba(30, 58, 42, 0.08);
  border-radius: 2px;
  overflow: hidden;
}
.plant-row-progress__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--forest, #1e3a2a), var(--gold, #b89243));
  border-radius: 2px;
  transition: width 0.15s ease-out;
}

/* ----- INSTR #35: Biodiversity / Seasonal / Pollinator — square ranking boxes ----- */
.plant-rank-box,
.plant-score-box,
.rank-box,
.pollinator-rank,
.biodiversity-value,
.seasonal-highlight {
  border-radius: 4px !important;
  border: 1px solid rgba(30, 58, 42, 0.18) !important;
  background: linear-gradient(135deg, #ffffff, #f3f7f0) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(30, 58, 42, 0.08) !important;
  padding: 0.7rem 0.85rem !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
}
.plant-rank-box__bar,
.rank-box__bar,
.pollinator-rank__bar {
  background: linear-gradient(90deg, var(--forest-light, #4a6b58), var(--forest, #1e3a2a)) !important;
  border-radius: 2px !important;
  height: 6px !important;
  overflow: hidden;
}
.plant-rank-box__label,
.rank-box__label {
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--forest-deep, #143524) !important;
  font-weight: 700 !important;
  margin-bottom: 0.3rem !important;
}
.plant-rank-box__score,
.rank-box__score {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--forest, #1e3a2a) !important;
}

/* ----- INSTR #36: Plant relationships — premium highlight ----- */
.plant-relationships,
.plant-relations,
.plant-companions {
  background: linear-gradient(135deg, rgba(184, 146, 67, 0.08), rgba(30, 58, 42, 0.05)) !important;
  border: 1px solid var(--gold, #b89243) !important;
  border-left: 5px solid var(--gold, #b89243) !important;
  border-radius: 6px !important;
  padding: 1.4rem 1.5rem !important;
  box-shadow: 0 8px 24px rgba(30, 58, 42, 0.12) !important;
  position: relative;
  overflow: hidden;
}
.plant-relationships::before,
.plant-relations::before,
.plant-companions::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle at top right, rgba(184, 146, 67, 0.18), transparent 70%);
  pointer-events: none;
}
.plant-relationships h2,
.plant-relationships h3,
.plant-relations h2,
.plant-relations h3,
.plant-companions h2,
.plant-companions h3 {
  color: var(--forest-deep, #143524) !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-weight: 700 !important;
  position: relative;
}
.plant-relationships h2::after,
.plant-relations h2::after,
.plant-companions h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), transparent);
  margin-top: 0.4rem;
  border-radius: 2px;
}

/* ----- INSTR #38: Locations — town chips enlarged ----- */
@media (max-width: 768px) {
  .towns-grid,
  .towns-list,
  .locations-towns {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .town-card,
  .town-chip,
  .locations-town-card {
    min-height: 80px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 0.7rem !important;
    border-radius: 4px !important;
    border: 1px solid rgba(184, 146, 67, 0.3) !important;
    background: linear-gradient(135deg, #ffffff, #faf5e9) !important;
    color: var(--forest-deep, #143524) !important;
    box-shadow: 0 3px 10px rgba(30, 58, 42, 0.10) !important;
  }
  .town-card:hover,
  .town-chip:hover {
    border-color: var(--gold, #b89243) !important;
    transform: translateY(-1px);
  }
}

/* ----- INSTR #41: Garden passport — clean card refinement ----- */
.editorial-calc-card {
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 18px rgba(30, 58, 42, 0.10) !important;
}

/* ----- INSTR #28: Article byline refinement ----- */
.article-byline-block {
  border-left: 3px solid var(--gold, #b89243);
  padding-left: 0.85rem;
  margin: 1rem 0;
}
.article-byline-block p {
  margin-bottom: 0.4rem;
}

/* ----- INSTR #30: Article premium uplift ----- */
.article-body,
article p,
.editorial-body {
  font-family: var(--serif, Georgia, serif);
  line-height: 1.7;
  color: #2a3a30;
}
article h2,
article h3 {
  font-family: var(--serif, Georgia, serif);
  color: var(--forest-deep, #143524);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 2rem;
  margin-bottom: 0.7rem;
  position: relative;
}
article h2 {
  border-bottom: 2px solid rgba(184, 146, 67, 0.3);
  padding-bottom: 0.3rem;
}
article h3 {
  border-left: 3px solid var(--gold, #b89243);
  padding-left: 0.6rem;
}
article blockquote {
  border-left: 4px solid var(--gold, #b89243);
  background: linear-gradient(90deg, rgba(184, 146, 67, 0.08), transparent);
  padding: 0.7rem 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: var(--forest-deep, #143524);
  border-radius: 0 4px 4px 0;
}
article ul,
article ol {
  background: rgba(184, 146, 67, 0.04);
  padding: 0.8rem 1rem 0.8rem 2.2rem;
  border-radius: 4px;
  border-left: 3px solid rgba(184, 146, 67, 0.4);
}
article li {
  margin-bottom: 0.35rem;
}

/* ----- INSTR #16: Predictive search dropdown premium ----- */
.predictive-results,
.cgm-predictive-results {
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 30px rgba(30, 58, 42, 0.15) !important;
  background: #fff !important;
  overflow: hidden;
}
.predictive-results__item,
.cgm-predictive-results__item {
  padding: 0.6rem 0.9rem !important;
  border-bottom: 1px solid rgba(30, 58, 42, 0.06) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  transition: background 0.15s ease, padding-left 0.15s ease !important;
}
.predictive-results__item:hover,
.predictive-results__item.is-active,
.cgm-predictive-results__item:hover,
.cgm-predictive-results__item.is-active {
  background: linear-gradient(90deg, rgba(184, 146, 67, 0.12), transparent) !important;
  padding-left: 1.2rem !important;
}
.predictive-results__item--matched,
.cgm-predictive-results__item--matched {
  color: var(--gold, #b89243) !important;
  font-weight: 700 !important;
}

/* ----- Misc: touch up service-list-mobile ----- */
@media (max-width: 768px) {
  .service-card-mobile,
  .service-list-mobile .service-card-mobile {
    border-radius: 4px !important;
    border: 1px solid rgba(184, 146, 67, 0.25) !important;
    background: linear-gradient(135deg, #ffffff, #faf5e9) !important;
    box-shadow: 0 4px 12px rgba(30, 58, 42, 0.10) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  }
  .service-card-mobile:active {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(30, 58, 42, 0.18) !important;
  }
}

/* ----- INSTR #37: Estimator popup consistency ----- */
.calc-result-modal,
.calc-results-modal,
.estimator-result-modal {
  border: 1px solid rgba(184, 146, 67, 0.4) !important;
  border-radius: 8px !important;
  box-shadow: 0 20px 50px rgba(30, 58, 42, 0.25) !important;
  background: linear-gradient(180deg, #ffffff, #fdfbf6) !important;
}
.calc-result-modal__title,
.calc-results-modal__title {
  color: var(--forest-deep, #143524) !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-weight: 700 !important;
  border-bottom: 2px solid var(--gold, #b89243) !important;
  padding-bottom: 0.5rem;
}

/* ----- INSTR #34: Plant pages — premium polish ----- */
.plant-page-hero,
.plant-hero {
  border-bottom: 3px solid var(--gold, #b89243);
}

/* ----- INSTR #23: Locations carousel — premium refinements ----- */
.carousel__item {
  border-radius: 8px !important;
}
.carousel__nav button {
  background: linear-gradient(135deg, var(--forest, #1e3a2a), var(--forest-dark, #143524)) !important;
  color: #fff !important;
  border: 1px solid var(--gold, #b89243) !important;
  border-radius: 30px !important;
  padding: 0.6em 1.2em !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 4px 12px rgba(30, 58, 42, 0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.carousel__nav button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(30, 58, 42, 0.28) !important;
}

/* ----- Reduced motion safety ----- */
@medi=========================================================================
   CGM v6 Update Stylesheet — Round-2 amendments
   Appended to styles.css. Additive only — does not override existing logic
   except where explicitly corrected (the swipe-row first-item-hidden bug,
   spacing corrupt above Garden Clearance, before/after slider, card hover
   enlarge, and the new Cotswolds hedge photo).
   ========================================================================== */

/* ==========================================================================
   ISSUE 1 & 1.2 — Thin out the swipe-row + fix first-item-hidden bug
   Root cause: editorial.css line 4512 has `padding: .35rem 42% .55rem;` on
   .swipe-row__inner, which pushes the first item off-screen left.
   ========================================================================== */
@media (max-width: 768px) {
  /* Thinner, slicker swipe-row container */
  .cgm-scroll-dock.swipe-row,
  .swipe-row {
    margin: .05rem -1rem .25rem !important;
    padding: .35rem 1rem .45rem !important;
    scroll-padding-inline: 1rem !important;
  }

  /* Fix the first-item-hidden bug: use small left padding instead of 42% */
  .cgm-scroll-dock .swipe-row__inner,
  .swipe-row__inner {
    gap: .42rem !important;
    padding: .15rem .15rem .25rem !important;
    width: max-content;
  }

  /* Slim, premium item style */
  .cgm-scroll-dock .swipe-row__item,
  .swipe-row__item {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: .42rem .7rem !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
    border-radius: 3px !important;
    --dock-scale: .92 !important;
    --dock-opacity: .85 !important;
    --dock-blur: 0px !important;
  }

  /* Focused (centered) item still gets the strong treatment but slimmer */
  .cgm-scroll-dock .swipe-row__item.is-dock-focus {
    --dock-scale: 1 !important;
    --dock-opacity: 1 !important;
  }

  /* Tighter hint, removed by default in v5 but make sure it's hidden */
  .swipe-row__hint { display: none !important; }

  /* The 5px visible scrollbar from v5 stays, but slimmer */
  .swipe-row::-webkit-scrollbar { height: 4px !important; }
}

/* ==========================================================================
   ISSUE 2 — Before/After draggable slider (mobile touch + desktop mouse)
   Replaces the two-panel .before-after with a single layered .ba-slider
   ========================================================================== */
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #15281c;
  box-shadow: 0 8px 24px rgba(21, 40, 28, 0.18), inset 0 0 0 1px rgba(184, 146, 67, 0.3);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y; /* allow vertical page scroll, capture horizontal drag */
  cursor: ew-resize;
}
.ba-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}
/* AFTER image is the base layer (right side, revealed as you drag right) */
.ba-slider__img--after {
  z-index: 1;
}
/* BEFORE image is clipped to the left of the handle */
.ba-slider__img--before {
  z-index: 2;
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.05s linear;
}
.ba-slider__label {
  position: absolute;
  top: 0.7rem;
  z-index: 5;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 3px;
  background: rgba(21, 40, 28, 0.78);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  border: 1px solid rgba(184, 146, 67, 0.45);
}
.ba-slider__label--before { left: 0.7rem; }
.ba-slider__label--after  { right: 0.7rem; background: rgba(184, 146, 67, 0.88); color: #15281c; border-color: #fff; }

/* The draggable handle (vertical line + circle) */
.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 4;
  width: 3px;
  background: linear-gradient(180deg, var(--gold, #b89243), #fff, var(--gold, #b89243));
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
  cursor: ew-resize;
}
.ba-slider__handle-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--gold, #b89243);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--forest, #1e3a2a);
  font-size: 1.2rem;
  font-weight: 700;
  pointer-events: none; /* the parent .ba-slider handles pointer events */
}
.ba-slider__handle-knob svg {
  width: 22px;
  height: 22px;
}

/* Hint chip below the slider */
.ba-slider__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 0.55rem;
  letter-spacing: 0.05em;
}
.ba-slider__hint svg { width: 14px; height: 14px; color: var(--gold, #b89243); }

/* On focus/hover, highlight the handle knob */
.ba-slider:focus-visible,
.ba-slider:hover {
  box-shadow: 0 12px 32px rgba(21, 40, 28, 0.28), inset 0 0 0 2px var(--gold, #b89243);
}
.ba-slider:hover .ba-slider__handle-knob,
.ba-slider:active .ba-slider__handle-knob {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 0 3px var(--gold, #b89243);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Mobile sizing tweaks */
@media (max-width: 768px) {
  .ba-slider { aspect-ratio: 4 / 3; border-radius: 4px; }
  .ba-slider__label { font-size: 0.65rem; padding: 0.22rem 0.5rem; top: 0.5rem; }
  .ba-slider__label--before { left: 0.5rem; }
  .ba-slider__label--after  { right: 0.5rem; }
  .ba-slider__handle-knob { width: 38px; height: 38px; }
  .ba-slider__handle-knob svg { width: 18px; height: 18px; }
  .ba-slider__hint { font-size: 0.68rem; }
}

/* ==========================================================================
   ISSUE 3 — Cards enlarge on hover/click ready for transfer
   Applied to homepage editorial-card-grid + editorial-service-grid cells
   ========================================================================== */
.editorial-card-grid__cell,
.editorial-service-grid__cell {
  position: relative;
  transition: transform 0.32s cubic-bezier(.2,.7,.3,1),
              box-shadow 0.32s ease,
              border-color 0.32s ease,
              background 0.32s ease !important;
  will-change: transform;
}
.editorial-card-grid__cell:hover,
.editorial-card-grid__cell:focus-visible,
.editorial-service-grid__cell:hover,
.editorial-service-grid__cell:focus-visible {
  transform: translateY(-6px) scale(1.035) !important;
  box-shadow: 0 18px 36px rgba(21, 40, 28, 0.22), 0 0 0 2px var(--gold, #b89243) !important;
  border-color: var(--gold, #b89243) !important;
  z-index: 5;
}
/* Active (click-hold) — feels like the card is being "lifted into the page" */
.editorial-card-grid__cell:active,
.editorial-service-grid__cell:active {
  transform: translateY(-3px) scale(0.99) !important;
  box-shadow: 0 8px 18px rgba(21, 40, 28, 0.28) !important;
  transition-duration: 0.08s !important;
}
/* The arrow nudges right on hover, signalling the transfer */
.editorial-card-grid__cell:hover .editorial-card-grid__arrow,
.editorial-service-grid__cell:hover .editorial-service-grid__arrow,
.editorial-card-grid__cell:focus-visible .editorial-card-grid__arrow,
.editorial-service-grid__cell:focus-visible .editorial-service-grid__arrow {
  transform: translateX(6px);
  color: var(--gold, #b89243) !important;
}
.editorial-card-grid__arrow,
.editorial-service-grid__arrow {
  transition: transform 0.32s ease, color 0.32s ease;
  display: inline-block;
}
/* Subtle "ready to transfer" pulse on the gold top stripe when hovered */
.editorial-service-grid__cell::after {
  transform-origin: left;
}
.editorial-service-grid__cell:hover::after,
.editorial-service-grid__cell:focus-visible::after {
  transform: scaleX(1) !important;
}

/* Mobile: tap-to-enlarge (active state) */
@media (max-width: 768px) {
  .editorial-card-grid__cell:active,
  .editorial-service-grid__cell:active {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 10px 22px rgba(21, 40, 28, 0.22), 0 0 0 2px var(--gold, #b89243) !important;
  }
}

/* Reduced motion: still enlarge, just no transition */
@media (prefers-reduced-motion: reduce) {
  .editorial-card-grid__cell,
  .editorial-service-grid__cell { transition: none !important; }
}

/* ==========================================================================
   ISSUE 4 — Fix corrupt spacing above 'Garden Clearance' / 'Garden Maintenance'
   The section-editorial-loose + section-tinted transition was creating a
   double-margin stack with the editorial-feature--reverse block. Collapse
   the dead space.
   ========================================================================== */
.section-editorial-loose + .section-editorial,
.section-editorial-loose + .section-tinted,
.section-editorial-loose + .section-editorial.section-tinted {
  margin-top: 0 !important;
  padding-top: 2rem !important;
}
.section-editorial-loose {
  padding-bottom: 2rem !important;
}
.editorial-feature--reverse {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.editorial-feature--reverse + .section-editorial,
.editorial-feature--reverse + section {
  margin-top: 0 !important;
}
/* Ensure the photo-interlude (dark band) and the following section don't
   stack extra padding on top of each other. */
.photo-interlude + .section-editorial-loose {
  padding-top: 2rem !important;
  margin-top: 0 !important;
}
.photo-interlude {
  margin-bottom: 0 !important;
}
/* Make sure the editorial-feature__media (the hedge image) doesn't have
   a stray min-height creating dead space below it. */
.editorial-feature--reverse .editorial-feature__media {
  margin-bottom: 0 !important;
}
.editorial-feature--reverse .editorial-feature__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  border-radius: 4px;
}
.editorial-feature--reverse .editorial-feature__caption {
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
}

/* ==========================================================================
   ISSUE 5 — Cotswolds hedge photo (new image already in /images/project/)
   Just bump the cache-buster on the homepage so the new image is fetched.
   ========================================================================== */
/* (no CSS needed — handled by replacing the src in index.html) */

/* ==========================================================================
   Reduce vertical dead space across all top-of-page editorial sections so
   the homepage reads tighter overall (per Issue 1 "thinned out, slicker").
   ========================================================================== */
.section-editorial { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.section-editorial-tight { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.section-editorial-loose { padding-top: 2.5rem; padding-bottom: 2.5rem; }
@media (max-width: 768px) {
  .section-editorial { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  .section-editorial-tight { padding-top: 0.9rem; padding-bottom: 0.9rem; }
  .section-editorial-loose { padding-top: 1.5rem; padding-bottom: 1.5rem; }
}
/* ==========================================================================
   CGM v7 Update Stylesheet — Round-3 amendments (10 issues)
   Appended to styles.css. Additive only.
   ========================================================================== */

/* ==========================================================================
   ISSUE 1 — Shorten gap between hero title and top of page
   Root cause: inline style on .hero has min-height:78vh + padding:6rem top.
   The 6rem top padding creates a huge gap above the title.
   ========================================================================== */
.hero {
  min-height: 56vh !important;
  padding: 0 !important;
}
.hero .container {
  padding: 2.5rem 1.5rem 3rem !important;
}
@media (max-width: 768px) {
  .hero {
    min-height: 52vh !important;
  }
  .hero .container {
    padding: 1.5rem 1rem 2rem !important;
  }
  .hero h1.editorial-h1 {
    margin-top: 0.5rem !important;
  }
  .hero-actions {
    margin-top: 1.2rem !important;
  }
  .hero-proof {
    margin-top: 1rem !important;
  }
}

/* ==========================================================================
   ISSUE 2 — Swipe-row button colors to fit theme + shorten gap to CGM EST.
   Current: cream/white buttons that clash with the dark hero above.
   Fix: forest-dark background with gold accents, matching the site theme.
   Also reduce the gap between swipe-row and the "CGM · Est. Chilterns" section.
   ========================================================================== */
@media (max-width: 768px) {
  .cgm-scroll-dock.swipe-row,
  .swipe-row {
    background: linear-gradient(180deg, var(--forest-dark, #143524) 0%, var(--forest, #1e3a2a) 100%) !important;
    padding: .35rem .5rem .45rem !important;
    margin: 0 -1rem .1rem !important;
    border-bottom: 1px solid rgba(184, 146, 67, 0.3);
  }
  .swipe-row__item,
  .cgm-scroll-dock .swipe-row__item {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(184, 146, 67, 0.35) !important;
    color: #f5e9c8 !important;
    box-shadow: none !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .swipe-row__item:active,
  .swipe-row__item:focus-visible,
  .cgm-scroll-dock .swipe-row__item.is-dock-focus {
    background: linear-gradient(135deg, var(--gold, #b89243), #d4a85a) !important;
    color: var(--forest-dark, #143524) !important;
    border-color: #fff !important;
  }
  /* Scrollbar matches the dark theme */
  .swipe-row::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06) !important;
  }
  .swipe-row::-webkit-scrollbar-thumb {
    background: var(--gold, #b89243) !important;
  }
}

/* Shorten the gap between swipe-row and "CGM · Est. Chilterns" */
.section-editorial {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
@media (max-width: 768px) {
  .section-editorial {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* ==========================================================================
   ISSUE 3 — "Six tools" cards: change to premium forest/gold theme
   Current: cream background that doesn't blend with the page.
   Fix: dark forest gradient with gold accents, matching the premium theme.
   Also applies to all similar cards site-wide.
   ========================================================================== */
.editorial-card-grid {
  background: var(--forest-dark, #143524) !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  border-radius: 6px !important;
  gap: 1px !important;
}
.editorial-card-grid__cell {
  background: linear-gradient(160deg, var(--forest-dark, #143524) 0%, var(--forest, #1e3a2a) 100%) !important;
  color: #f5e9c8 !important;
  border: 1px solid rgba(184, 146, 67, 0.2) !important;
  position: relative;
  overflow: hidden;
}
.editorial-card-grid__cell::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), transparent 80%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.editorial-card-grid__cell:hover::before {
  transform: scaleX(1);
}
.editorial-card-grid__cell h3 {
  color: #fff !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-weight: 600 !important;
}
.editorial-card-grid__cell p {
  color: rgba(245, 233, 200, 0.78) !important;
}
.editorial-card-grid__arrow {
  color: var(--gold, #b89243) !important;
}
.editorial-card-grid__cell:hover {
  background: linear-gradient(160deg, var(--forest, #1e3a2a) 0%, #2a4a36 100%) !important;
}
/* The plant passport card was already dark — keep it but align styling */
.editorial-card-grid__cell[style*="forest-dark"] {
  background: linear-gradient(160deg, #0d2818, var(--forest-dark, #143524)) !important;
  border: 1px solid var(--gold, #b89243) !important;
}

/* Mobile: keep 2-col but with the premium dark theme */
@media (max-width: 768px) {
  .editorial-card-grid__cell {
    padding: .85rem .9rem !important;
    background: linear-gradient(160deg, var(--forest-dark, #143524) 0%, var(--forest, #1e3a2a) 100%) !important;
    border: 1px solid rgba(184, 146, 67, 0.25) !important;
    border-radius: 4px !important;
  }
  .editorial-card-grid__cell h3 {
    font-size: .92rem !important;
    color: #fff !important;
  }
  .editorial-card-grid__cell p {
    font-size: .76rem !important;
    color: rgba(245, 233, 200, 0.72) !important;
  }
}

/* ==========================================================================
   ISSUE 4 — Nine services: fix broken links, scroll-for-more text bleed, lag
   Root causes:
   a) The ::after "Scroll for more" pseudo-element bleeds through cards.
   b) card-tilt.js + v6 hover transform conflict causes render lag.
   c) Links may appear broken due to the lag delaying navigation.
   Fix: remove the ::after pseudo, remove tilt from service cards, simplify
   the hover transform to a single lightweight property.
   ========================================================================== */

/* Remove the "Scroll for more" pseudo-element that bleeds through cards */
.editorial-service-grid::after {
  content: none !important;
  display: none !important;
}

/* Add a clean "Scroll for more" hint BELOW the grid, not inside it */
.editorial-service-grid-wrap {
  position: relative;
}
.editorial-service-grid-wrap__hint {
  display: none;
  text-align: center;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold, #b89243);
  font-weight: 700;
  margin-top: 0.5rem;
}
@media (max-width: 768px) {
  .editorial-service-grid-wrap__hint {
    display: block;
  }
}

/* Fix card lag: remove the heavy transform + box-shadow on hover.
   Use only border-color + background change for a snappy, lag-free response.
   Also disable the 3D tilt on these cards via will-change override. */
.editorial-service-grid__cell {
  transition: border-color 0.15s ease, background 0.15s ease !important;
  will-change: auto !important;
  transform: none !important;
}
.editorial-service-grid__cell:hover,
.editorial-service-grid__cell:focus-visible,
.editorial-service-grid__cell:active {
  transform: none !important;
  border-color: var(--gold, #b89243) !important;
  background: linear-gradient(160deg, var(--forest-dark, #143524) 0%, var(--forest, #1e3a2a) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(21, 40, 28, 0.15) !important;
}
.editorial-service-grid__cell:hover h3,
.editorial-service-grid__cell:hover p,
.editorial-service-grid__cell:active h3,
.editorial-service-grid__cell:active p {
  color: #fff !important;
}
.editorial-service-grid__cell:hover .editorial-service-grid__arrow,
.editorial-service-grid__cell:active .editorial-service-grid__arrow {
  color: var(--gold, #b89243) !important;
  transform: none !important;
}
/* Remove the gold top-stripe animation that causes layout thrashing */
.editorial-service-grid__cell::after {
  transform: none !important;
  display: none !important;
}

/* Make sure links work — ensure cards have pointer cursor and no overlay */
.editorial-service-grid__cell {
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(184, 146, 67, 0.2);
}

/* Mobile: remove the max-height scroll container that was causing issues.
   Instead, show all 9 cards in a simple list. */
@media (max-width: 768px) {
  .editorial-service-grid {
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column;
    gap: 0.5rem !important;
    padding: 0.5rem !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .editorial-service-grid__cell {
    flex-shrink: 1 !important;
    padding: 0.8rem 1rem !important;
    background: linear-gradient(135deg, #ffffff, #faf5e9) !important;
    border: 1px solid rgba(184, 146, 67, 0.25) !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(21, 40, 28, 0.06) !important;
  }
  .editorial-service-grid__cell:hover,
  .editorial-service-grid__cell:active {
    background: linear-gradient(160deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
  }
  .editorial-service-grid__cell:hover h3,
  .editorial-service-grid__cell:active h3,
  .editorial-service-grid__cell:hover p,
  .editorial-service-grid__cell:active p {
    color: #fff !important;
  }
  /* Featured cell with image */
  .editorial-service-grid__cell--featured {
    padding: 0 !important;
    overflow: hidden !important;
  }
  .editorial-service-grid__cell--featured img {
    width: 100% !important;
    height: 120px !important;
    object-fit: cover !important;
  }
  .editorial-service-grid__cell--featured .editorial-service-grid__content {
    padding: 0.8rem 1rem !important;
  }
}

/* ==========================================================================
   ISSUE 5 — Popular right now cards: fix mobile proportions
   Current: cards are 240px tall, too long for the text content.
   Fix: auto height based on content, tighter padding.
   ========================================================================== */
@media (max-width: 768px) {
  .article-card-popular {
    height: auto !important;
    min-height: 0 !important;
    padding: 0.65rem 0.7rem !important;
    font-size: 0.82rem !important;
    border: 1px solid rgba(184, 146, 67, 0.2) !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #ffffff, #faf5e9) !important;
    box-shadow: 0 2px 8px rgba(21, 40, 28, 0.06) !important;
  }
  .article-card-popular h3 {
    font-size: 0.88rem !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    margin: 0 0 0.3rem 0 !important;
  }
  .article-card-popular p {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    margin: 0 0 0.35rem 0 !important;
  }
  .article-card-popular .card-link {
    font-size: 0.72rem !important;
    margin-top: 0.3rem !important;
  }
  .article-card-popular__meta {
    gap: 0.3rem !important;
    margin-bottom: 0.3rem !important;
  }
  .article-card-popular__tag,
  .article-card-popular__level {
    font-size: 0.6rem !important;
    padding: 0.15rem 0.4rem !important;
  }
  /* Grid: 2 columns on mobile */
  #popular-articles.grid.grid-3 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
}

/* ==========================================================================
   ISSUE 6 — Menu: ALL sections in CAPITAL LETTERS (mobile + desktop)
   ========================================================================== */
/* Desktop nav */
.nav-links a,
.nav-dropdown-toggle {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
}
.nav-dropdown-menu a {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
}
/* Mobile menu */
.mobile-menu a,
.mobile-gk-toggle {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
}
.mobile-gk-items a {
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 500 !important;
  font-size: 0.82rem !important;
}

/* ==========================================================================
   ISSUE 7 — Mobile menu: scrollable with visible scrollbar even when content
   fits. The menu should always allow finger-scrolling.
   ========================================================================== */
@media (max-width: 1024px) {
  .mobile-menu:not([hidden]) {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth;
    /* Always show scrollbar (even when content fits) */
    scrollbar-width: thin !important;
    scrollbar-color: var(--gold, #b89243) rgba(30, 58, 42, 0.12) !important;
    /* Force the scrollbar to always be present */
    overflow-y: scroll !important;
  }
  .mobile-menu:not([hidden])::-webkit-scrollbar {
    width: 6px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .mobile-menu:not([hidden])::-webkit-scrollbar-track {
    background: rgba(30, 58, 42, 0.06) !important;
    border-radius: 3px !important;
  }
  .mobile-menu:not([hidden])::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--forest, #1e3a2a), var(--gold, #b89243)) !important;
    border-radius: 3px !important;
    min-height: 40px !important;
  }
  .mobile-menu:not([hidden])::-webkit-scrollbar-thumb:hover {
    background: var(--gold, #b89243) !important;
  }
}

/* ==========================================================================
   ISSUE 8 — Garden Knowledge: left-aligned + remove '>' from expanded items
   ========================================================================== */
@media (max-width: 1024px) {
  .mobile-gk-toggle {
    justify-content: flex-start !important;
    gap: 0.55rem !important;
    text-align: left !important;
  }
  .mobile-gk-toggle .mobile-gk-chevron {
    margin-left: auto !important;
  }
  /* Remove the '>' content from sub-items */
  .mobile-gk-items a::before {
    content: "" !important;
    width: 0 !important;
    height: 0 !important;
    margin-right: 0 !important;
    background: transparent !important;
  }
  /* Keep the dot indicator consistent with main items */
  .mobile-gk-items a {
    padding-left: 1.2rem !important;
    position: relative !important;
  }
  .mobile-gk-items a::after {
    content: "" !important;
    position: absolute !important;
    left: 0.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: var(--gold, #b89243) !important;
    opacity: 0.4 !important;
  }
}

/* ==========================================================================
   ISSUE 9 (CRITICAL) — Fix large empty gap at top of mobile menu showing the
   page behind it when opened after scrolling.
   Root cause: menu is position:fixed; top:60px but the header height on
   mobile is ~50px, leaving a 10px gap. Also, the menu's opaque background
   doesn't extend above top:60px.
   Fix: make the menu cover the FULL viewport (top:0; bottom:0) with
   padding-top equal to the header height. Set z-index BELOW the header so
   the header (with close button) stays visible and clickable on top.
   ========================================================================== */
@media (max-width: 1024px) {
  /* Header stays on top of the menu */
  .header {
    z-index: 10001 !important;
    background: #fdfbf6 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Menu covers full viewport, below the header */
  .mobile-menu:not([hidden]) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important;
    padding-top: 56px !important; /* header height on mobile */
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    padding-bottom: 2rem !important;
    background: linear-gradient(180deg, #fdfbf6 0%, #f6efe2 100%) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* When menu is open, lock body scroll */
  html.mobile-menu-open body {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   ISSUE 10 — Locations compare modal: fix mobile display
   Current: on mobile the compare table overflows, modal appears as empty
   white box.
   Fix: make the modal full-screen on mobile with a scrollable body, and
   render the comparison as stacked cards instead of a wide table.
   ========================================================================== */
@media (max-width: 640px) {
  .compare-modal {
    padding: 0 !important;
  }
  .compare-modal__panel {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .compare-modal__header {
    padding: 0.85rem 1rem !important;
    border-bottom: 2px solid var(--gold, #b89243) !important;
    background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
    color: #fff !important;
  }
  .compare-modal__title {
    color: #fff !important;
    font-size: 1.1rem !important;
  }
  .compare-modal__close {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    width: 32px !important;
    height: 32px !important;
  }
  .compare-modal__body {
    padding: 1rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Convert the wide table to stacked cards on mobile */
  .compare-table-wrap {
    overflow-x: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }
  .compare-table {
    display: block !important;
  }
  .compare-table thead {
    display: none !important;
  }
  .compare-table tbody {
    display: block !important;
  }
  .compare-table tr {
    display: block !important;
    margin-bottom: 1rem !important;
    border: 1px solid rgba(184, 146, 67, 0.3) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  .compare-table td {
    display: block !important;
    padding: 0.6rem 0.85rem !important;
    border-bottom: 1px solid rgba(30, 58, 42, 0.08) !important;
    font-size: 0.85rem !important;
    text-align: left !important;
  }
  .compare-table td:first-child {
    background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-family: var(--serif, Georgia, serif) !important;
    font-size: 1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }
  .compare-table td:not(:first-child) {
    position: relative !important;
    padding-left: 0.85rem !important;
  }
  .compare-table td:not(:first-child)::before {
    content: attr(data-label) ": ";
    font-weight: 600 !important;
    color: var(--gold, #b89243) !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    margin-bottom: 0.15rem !important;
  }
  /* The compare drawer bar at the bottom should also be more mobile-friendly */
  .compare-drawer {
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
  .compare-drawer__bar {
    flex-wrap: wrap !important;
    padding: 0.6rem 0.85rem !important;
    gap: 0.4rem !important;
  }
  .compare-drawer__chips {
    flex: 1 1 100% !important;
    order: 3 !important;
  }
  .compare-drawer__actions {
    flex: 1 1 100% !important;
    order: 4 !important;
    display: flex !important;
    justify-content: stretch !important;
    gap: 0.4rem !important;
  }
  .compare-drawer__btn {
    flex: 1 !important;
    padding: 0.55rem 0.5rem !important;
    font-size: 0.78rem !important;
  }
}

/* ==========================================================================
   General premium polish for the editorial-service-grid cells to match the
   new dark card theme from Issue 3.
   ========================================================================== */
.editorial-service-grid__cell {
  background: linear-gradient(135deg, #ffffff, #faf5e9) !important;
  border: 1px solid rgba(184, 146, 67, 0.25) !important;
  border-radius: 4px !important;
}
.editorial-service-grid__num {
  color: var(--gold, #b89243) !important;
  font-weight: 700 !important;
}
.editorial-service-grid__arrow {
  color: var(--forest, #1e3a2a) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.75rem !important;
}

/* Featured service cell (with image) — premium treatment */
.editorial-service-grid__cell--featured {
  border: 1px solid var(--gold, #b89243) !important;
  overflow: hidden !important;
}
.editorial-service-grid__cell--featured .editorial-service-grid__content {
  background: linear-gradient(160deg, rgba(20, 53, 36, 0.92), rgba(30, 58, 42, 0.88)) !important;
  padding: 1.2rem 1.4rem !important;
}
.editorial-service-grid__cell--featured h3 {
  color: #fff !important;
}
.editorial-service-grid__cell--featured p {
  color: rgba(245, 233, 200, 0.85) !important;
}
.editorial-service-grid__cell--featured .editorial-service-grid__num {
  color: var(--gold, #b89243) !important;
}

/* ==========================================================================
   Reduced motion safety
   ========================================================================== */
@medi=========================================================================
   CGM v8 Update Stylesheet — Round-4 amendments (10 issues)
   Appended to styles.css. Additive only.
   ========================================================================== */

/* ==========================================================================
   ISSUE 4 — Compare modal on mobile: fix white box taking over screen
   Root cause: the compare-drawer (sticky bottom bar) and the compare-modal
   were both rendering with white backgrounds that filled the screen on
   mobile. The modal was already full-screen but the drawer was appearing
   ON TOP of it, creating a "white box" effect.
   Fix: hide the compare-drawer when the modal is open, and make the modal
   scroll properly with a max-height on the body.
   ========================================================================== */
@media (max-width: 640px) {
  /* When modal is open, hide the drawer so it doesn't overlay */
  .compare-modal:not([hidden]) ~ .compare-drawer,
  body.compare-modal-open .compare-drawer {
    display: none !important;
  }
  /* Modal panel: full screen but scrollable body */
  .compare-modal__panel {
    max-height: 100dvh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .compare-modal__header {
    flex-shrink: 0 !important;
  }
  .compare-modal__body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem !important;
    background: linear-gradient(180deg, #fdfbf6, #f6efe2) !important;
  }
  /* Compare drawer: make it a clean floating bar, not full-width white */
  .compare-drawer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 998 !important;
    background: linear-gradient(180deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
    color: #fff !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
  }
  .compare-drawer__bar {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.65rem 0.85rem !important;
    gap: 0.4rem !important;
  }
  .compare-drawer__count {
    color: var(--gold, #b89243) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
  }
  .compare-drawer__label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.78rem !important;
  }
  .compare-drawer__btn {
    background: var(--gold, #b89243) !important;
    color: var(--forest-dark, #143524) !important;
    border: none !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.85rem !important;
    border-radius: 3px !important;
  }
  .compare-drawer__btn:disabled {
    background: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.5) !important;
  }
  .compare-drawer__btn--clear {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
  }
  .compare-drawer__btn--close {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
}

/* ==========================================================================
   ISSUE 5 — "Four counties" cards: premium upgrade (match homepage cards)
   Current: plain cards with just text. Apply the dark forest + gold theme.
   ========================================================================== */
.county-browser-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
}
@media (max-width: 900px) {
  .county-browser-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }
}
.loc-county-card {
  background: linear-gradient(160deg, var(--forest-dark, #143524) 0%, var(--forest, #1e3a2a) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  border-radius: 6px !important;
  padding: 1.4rem 1.2rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  min-height: 180px !important;
}
.loc-county-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), transparent 80%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.loc-county-card:hover::before {
  transform: scaleX(1);
}
.loc-county-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(21, 40, 28, 0.22) !important;
  border-color: var(--gold, #b89243) !important;
}
.loc-county-card h3 {
  color: #fff !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}
.loc-county-card__count {
  color: var(--gold, #b89243) !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  margin-top: 0.3rem !important;
}
.loc-county-card__label {
  color: rgba(245, 233, 200, 0.75) !important;
  font-size: 0.78rem !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.loc-county-card__link {
  color: var(--gold, #b89243) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  margin-top: auto !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid rgba(184, 146, 67, 0.2) !important;
  transition: gap 0.2s ease !important;
}
.loc-county-card__link:hover {
  gap: 0.55rem !important;
  color: #fff !important;
}
.loc-county-card__link svg {
  width: 14px !important;
  height: 14px !important;
}

/* ==========================================================================
   ISSUE 6 — Town intelligence section: premium style upgrade
   Current: plain white panel. Apply premium dark forest + gold theme.
   Also applies to individual town pages (covered by .town-data-card rules).
   ========================================================================== */
.town-intel-section {
  background: linear-gradient(180deg, #fdfbf6 0%, #f6efe2 100%) !important;
  padding: 3rem 0 !important;
  border-top: 2px solid var(--gold, #b89243) !important;
}
.town-intel-section .section-title-center h2 {
  font-family: var(--serif, Georgia, serif) !important;
  color: var(--forest-deep, #143524) !important;
  font-weight: 700 !important;
}
.town-intel-section .section-kicker {
  color: var(--gold, #b89243) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.town-data-panel {
  background: linear-gradient(160deg, var(--forest-dark, #143524) 0%, var(--forest, #1e3a2a) 100%) !important;
  border: 1px solid rgba(184, 146, 67, 0.35) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 32px rgba(21, 40, 28, 0.18) !important;
}
.town-data-panel__summary {
  background: linear-gradient(135deg, rgba(184, 146, 67, 0.12), rgba(184, 146, 67, 0.04)) !important;
  padding: 1.5rem 1.75rem !important;
  border-bottom: 1px solid rgba(184, 146, 67, 0.25) !important;
  position: relative !important;
}
.town-data-panel__summary::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--gold, #b89243);
}
.town-data-panel__summary h3 {
  color: #fff !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.4rem 0 !important;
  letter-spacing: -0.01em;
}
.town-data-panel__summary p {
  color: rgba(245, 233, 200, 0.85) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  margin: 0 0 0.8rem 0 !important;
}
.town-data-panel__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  color: var(--gold, #b89243) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  padding: 0.5rem 0.85rem !important;
  border: 1px solid var(--gold, #b89243) !important;
  border-radius: 3px !important;
  background: rgba(184, 146, 67, 0.08) !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.town-data-panel__link:hover {
  background: var(--gold, #b89243) !important;
  color: var(--forest-dark, #143524) !important;
}

.town-data-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: rgba(184, 146, 67, 0.15) !important;
}
@media (max-width: 768px) {
  .town-data-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  .town-data-grid {
    grid-template-columns: 1fr !important;
  }
}

.town-data-card {
  background: rgba(255, 255, 255, 0.04) !important;
  padding: 1rem 1.1rem !important;
  border: none !important;
  position: relative !important;
  transition: background 0.2s ease !important;
}
.town-data-card:hover {
  background: rgba(184, 146, 67, 0.08) !important;
}
.town-data-card--empty {
  grid-column: 1 / -1 !important;
  padding: 2.5rem 1.5rem !important;
  text-align: center !important;
  color: rgba(245, 233, 200, 0.6) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.9rem !important;
}
.town-data-card h4,
.town-data-card__label,
.town-data-card strong {
  color: var(--gold, #b89243) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 0.4rem 0 !important;
  display: block !important;
}
.town-data-card p,
.town-data-card__value,
.town-data-card span {
  color: rgba(245, 233, 200, 0.9) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
}
.town-data-card--ph .ph-bar {
  background: rgba(255, 255, 255, 0.1) !important;
}
.town-data-card--ph .ph-marker {
  background: var(--gold, #b89243) !important;
}

.town-intel-disclaimer {
  color: var(--muted, #5a6b5e) !important;
  font-size: 0.78rem !important;
  font-style: italic !important;
  margin-top: 1.5rem !important;
  padding: 0.85rem 1rem !important;
  border-left: 3px solid rgba(184, 146, 67, 0.4) !important;
  background: rgba(184, 146, 67, 0.04) !important;
  border-radius: 0 4px 4px 0 !important;
}

/* Individual town pages premium upgrade */
.town-page .town-hero,
.town-page .town-data-card,
.locations-page .town-data-card {
  /* covered by rules above */
}

/* ==========================================================================
   ISSUE 7 — Gardening Knowledge: article cards premium upgrade
   Current: .tip-card with plain styling. Apply premium theme.
   ========================================================================== */
.tip-card.editorial-row {
  background: linear-gradient(160deg, #ffffff 0%, #faf5e9 100%) !important;
  border: 1px solid rgba(184, 146, 67, 0.25) !important;
  border-radius: 6px !important;
  padding: 1rem 1.1rem !important;
  transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 0.7rem !important;
}
.tip-card.editorial-row::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), transparent 80%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.tip-card.editorial-row:hover::before {
  transform: scaleX(1);
}
.tip-card.editorial-row:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 28px rgba(21, 40, 28, 0.16) !important;
  border-color: var(--gold, #b89243) !important;
}
.tip-card.editorial-row .editorial-row__title {
  font-family: var(--serif, Georgia, serif) !important;
  color: var(--forest-deep, #143524) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
}
.tip-card.editorial-row .editorial-row__intro {
  color: var(--muted, #5a6b5e) !important;
  font-size: 0.88rem !important;
  line-height: 1.45 !important;
}
.tip-card.editorial-row .editorial-row__pill {
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 3px !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  background: rgba(184, 146, 67, 0.06) !important;
  color: var(--forest-deep, #143524) !important;
}
.tip-card.editorial-row .editorial-row__pill--easy {
  background: rgba(74, 119, 76, 0.1) !important;
  border-color: rgba(74, 119, 76, 0.4) !important;
  color: #2e5a36 !important;
}
.tip-card.editorial-row .editorial-row__pill--intermediate {
  background: rgba(184, 146, 67, 0.15) !important;
  border-color: var(--gold, #b89243) !important;
  color: #8a6a2a !important;
}
.tip-card.editorial-row .editorial-row__pill--hard {
  background: rgba(139, 30, 30, 0.1) !important;
  border-color: rgba(139, 30, 30, 0.4) !important;
  color: #6b1818 !important;
}
.tip-card.editorial-row .editorial-row__tag {
  font-size: 0.7rem !important;
  color: var(--forest, #1e3a2a) !important;
  background: rgba(30, 58, 42, 0.06) !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: 3px !important;
  border: 1px solid rgba(30, 58, 42, 0.12) !important;
}
.tip-card.editorial-row .editorial-row__cta {
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--gold, #b89243) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}
.tip-card.editorial-row .editorial-row__cta svg {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.2s ease !important;
}
.tip-card.editorial-row:hover .editorial-row__cta svg {
  transform: translateX(4px) !important;
}
.tip-card.editorial-row .editorial-row__visual-icon {
  background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
  color: var(--gold, #b89243) !important;
  border-radius: 4px !important;
}

/* Category navigation buttons (desktop) */
.tip-category-nav {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  gap: 0.5rem;
}
@media (min-width: 769px) {
  .tip-category-nav {
    display: flex;
  }
}
.tip-category-nav__btn {
  background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
  color: #fff !important;
  border: 1px solid var(--gold, #b89243) !important;
  border-radius: 30px !important;
  padding: 0.45rem 1rem !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(21, 40, 28, 0.15) !important;
}
.tip-category-nav__btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(21, 40, 28, 0.22) !important;
}
.tip-category-nav__btn:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}
.tip-category-nav__btn svg {
  width: 14px !important;
  height: 14px !important;
}
.tip-category-nav__label {
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--forest-deep, #143524) !important;
}

/* ==========================================================================
   ISSUE 8 — Garden tools and planners: cards premium upgrade
   Current: .editorial-calc-card plain. Apply premium dark theme.
   ========================================================================== */
.editorial-calc-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
}
@media (max-width: 900px) {
  .editorial-calc-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.7rem !important;
  }
}
@media (max-width: 600px) {
  .editorial-calc-grid {
    grid-template-columns: 1fr !important;
  }
}
.editorial-calc-card {
  background: linear-gradient(160deg, var(--forest-dark, #143524) 0%, var(--forest, #1e3a2a) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  border-radius: 6px !important;
  padding: 1.4rem 1.3rem !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  min-height: 200px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.editorial-calc-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), transparent 80%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.editorial-calc-card:hover::before {
  transform: scaleX(1);
}
.editorial-calc-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(21, 40, 28, 0.22) !important;
  border-color: var(--gold, #b89243) !important;
}
.editorial-calc-card__num {
  color: var(--gold, #b89243) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.editorial-calc-card__title {
  color: #fff !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em;
}
.editorial-calc-card__body {
  color: rgba(245, 233, 200, 0.78) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.editorial-calc-card__cta {
  color: var(--gold, #b89243) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-top: auto !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid rgba(184, 146, 67, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
}
.editorial-calc-card:hover .editorial-calc-card__cta {
  color: #fff !important;
}

/* ==========================================================================
   ISSUE 9 — Nine services mobile: restore to original (only show .service-
   list-mobile on mobile, hide .editorial-service-grid).
   v7 broke this by forcing .editorial-service-grid to display:flex on mobile.
   ========================================================================== */
@media (max-width: 768px) {
  /* Hide the desktop grid on mobile — use the original mobile-only list */
  .editorial-service-grid {
    display: none !important;
  }
  /* Show the mobile-only list (was set to display:none inline) */
  .service-list-mobile {
    display: flex !important;
    flex-direction: column;
    gap: 0.6rem !important;
  }
  /* Restore the premium card styling for mobile service cards */
  .service-card-mobile {
    background: linear-gradient(135deg, #ffffff, #faf5e9) !important;
    border: 1px solid rgba(184, 146, 67, 0.25) !important;
    border-radius: 4px !important;
    padding: 0.9rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.6rem !important;
    text-decoration: none !important;
    color: var(--forest-deep, #143524) !important;
    box-shadow: 0 2px 8px rgba(21, 40, 28, 0.06) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  }
  .service-card-mobile:active {
    transform: translateY(-2px) scale(0.99) !important;
    border-color: var(--gold, #b89243) !important;
    box-shadow: 0 8px 18px rgba(21, 40, 28, 0.18) !important;
  }
  .service-card-mobile__title {
    font-family: var(--serif, Georgia, serif) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--forest-deep, #143524) !important;
  }
  .service-card-mobile__sub {
    font-family: var(--sans, system-ui, sans-serif) !important;
    font-size: 0.78rem !important;
    color: var(--muted, #5a6b5e) !important;
    margin-top: 0.15rem !important;
  }
  .service-card-mobile__arrow {
    color: var(--gold, #b89243) !important;
    flex-shrink: 0 !important;
  }
  .service-card-mobile__arrow svg {
    width: 18px !important;
    height: 18px !important;
  }
  /* The "View six more services" disclosure */
  .service-list-mobile-more > summary {
    background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
    color: var(--gold, #b89243) !important;
    padding: 0.7rem 1rem !important;
    border-radius: 4px !important;
    font-family: var(--sans, system-ui, sans-serif) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    cursor: pointer !important;
    list-style: none !important;
    border: 1px solid var(--gold, #b89243) !important;
  }
  .service-list-mobile-more > summary::-webkit-details-marker {
    display: none !important;
  }
  .service-list-mobile-more[open] > summary {
    border-bottom: 1px solid var(--gold, #b89243) !important;
  }
  .service-list-mobile-more__items {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    padding: 0.7rem 0 0 0 !important;
  }
}

/* ==========================================================================
   ISSUE 10 — "What do you need?" multi-select with numbered ordering
   Replace radio buttons with checkboxes + numbered badges.
   ========================================================================== */
.calc-options--multi {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem !important;
}
@media (max-width: 600px) {
  .calc-options--multi {
    grid-template-columns: 1fr !important;
  }
}
.calc-options--multi input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}
.calc-options--multi label {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.7rem 0.9rem !important;
  background: linear-gradient(135deg, #ffffff, #faf5e9) !important;
  border: 1px solid rgba(184, 146, 67, 0.25) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--forest-deep, #143524) !important;
  transition: all 0.2s ease !important;
  position: relative !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
.calc-options--multi label::before {
  content: "";
  width: 18px !important;
  height: 18px !important;
  border: 2px solid rgba(184, 146, 67, 0.4) !important;
  border-radius: 3px !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}
.calc-options--multi label::after {
  content: "";
  position: absolute !important;
  left: 0.9rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--gold, #b89243) !important;
  border-radius: 3px !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.calc-options--multi label .order-badge {
  margin-left: auto !important;
  background: var(--gold, #b89243) !important;
  color: var(--forest-dark, #143524) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: 12px !important;
  min-width: 22px !important;
  text-align: center !important;
  display: none !important;
}
.calc-options--multi input[type="checkbox"]:checked + label {
  background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
  color: #fff !important;
  border-color: var(--gold, #b89243) !important;
  box-shadow: 0 4px 12px rgba(21, 40, 28, 0.18) !important;
}
.calc-options--multi input[type="checkbox"]:checked + label::before {
  border-color: var(--gold, #b89243) !important;
  background: var(--gold, #b89243) !important;
}
.calc-options--multi input[type="checkbox"]:checked + label::after {
  opacity: 1 !important;
  background: transparent !important;
}
.calc-options--multi input[type="checkbox"]:checked + label::after {
  /* Checkmark */
  content: "✓" !important;
  color: var(--forest-dark, #143524) !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  background: var(--gold, #b89243) !important;
  opacity: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.calc-options--multi input[type="checkbox"]:checked + label .order-badge {
  display: inline-block !important;
}
.calc-options--multi label:hover {
  border-color: var(--gold, #b89243) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(21, 40, 28, 0.1) !important;
}

/* Summary chip showing selected services in order */
.service-multi-summary {
  background: rgba(184, 146, 67, 0.06) !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  border-radius: 4px !important;
  padding: 0.7rem 0.9rem !important;
  margin-top: 0.6rem !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.82rem !important;
  color: var(--forest-deep, #143524) !important;
  display: none;
}
.service-multi-summary:not(:empty) {
  display: block;
}
.service-multi-summary__label {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--gold, #b89243) !important;
  font-size: 0.72rem !important;
  display: block !important;
  margin-bottom: 0.3rem !important;
}
.service-multi-summary__list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem !important;
}
.service-multi-summary__chip {
  background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
  color: #fff !important;
  padding: 0.25rem 0.55rem !important;
  border-radius: 12px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
}
.service-multi-summary__chip-num {
  background: var(--gold, #b89243) !important;
  color: var(--forest-dark, #143524) !important;
  font-weight: 700 !important;
  padding: 0 0.35rem !important;
  border-radius: 8px !important;
  font-size: 0.68rem !important;
  min-width: 16px !important;
  text-align: center !important;
}

/* ==========================================================================
   ISSUE 3 — Town search popup box ("Select town" button)
   ========================================================================== */
.town-search-popup {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: linear-gradient(160deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
  border: 1px solid var(--gold, #b89243) !important;
  border-radius: 6px !important;
  box-shadow: 0 14px 30px rgba(21, 40, 28, 0.25) !important;
  padding: 1rem !important;
  margin-top: 0.5rem !important;
  display: none;
}
.town-search-popup:not([hidden]) {
  display: block;
}
.town-search-popup__name {
  color: #fff !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.2rem 0 !important;
}
.town-search-popup__county {
  color: var(--gold, #b89243) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin: 0 0 0.7rem 0 !important;
}
.town-search-popup__intro {
  color: rgba(245, 233, 200, 0.85) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  margin: 0 0 0.8rem 0 !important;
}
.town-search-popup__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  background: var(--gold, #b89243) !important;
  color: var(--forest-dark, #143524) !important;
  border: none !important;
  padding: 0.55rem 1rem !important;
  border-radius: 3px !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.town-search-popup__btn:hover {
  background: #fff !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   Reduced motion safety
   ========================================================================== */
@medi=========================================================================
   CGM v9 Update Stylesheet — Round-5 amendments (9 issues)
   Appended to styles.css. Additive only.
   ========================================================================== */

/* ==========================================================================
   ISSUE 1 — Unified photo upload + editor at top of form
   Replaces the two-step upload + advanced disclosure with a single upload
   zone that auto-opens the full-screen editor on file selection.
   The editor has a side toolbar (pen / label / erase) always visible.
   ========================================================================== */

/* Hide the old advanced disclosure and edit button */
.quote-advanced,
.quote-photo-edit-button {
  display: none !important;
}

/* New unified upload zone at the top of the form */
.quote-photo-upload-zone {
  background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
  border: 2px dashed var(--gold, #b89243) !important;
  border-radius: 8px !important;
  padding: 1.5rem 1.2rem !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 1rem !important;
  color: #fff !important;
}
.quote-photo-upload-zone:hover {
  border-color: #fff !important;
  background: linear-gradient(135deg, var(--forest, #1e3a2a), #2a4a36) !important;
}
.quote-photo-upload-zone svg {
  color: var(--gold, #b89243) !important;
  width: 36px !important;
  height: 36px !important;
  margin-bottom: 0.5rem !important;
}
.quote-photo-upload-zone__title {
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 0 0.3rem 0 !important;
}
.quote-photo-upload-zone__hint {
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  color: rgba(245, 233, 200, 0.75) !important;
  margin: 0 !important;
}
.quote-photo-upload-zone input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  width: 100% !important;
  height: 100% !important;
}

/* Photo thumbnails row (compact, above the form) */
.quote-photo-thumbs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin-bottom: 1rem !important;
}
.quote-photo-thumb {
  position: relative !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  border: 2px solid rgba(184, 146, 67, 0.3) !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}
.quote-photo-thumb:hover {
  border-color: var(--gold, #b89243) !important;
  transform: scale(1.05) !important;
}
.quote-photo-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.quote-photo-thumb__edit-badge {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  background: var(--gold, #b89243) !important;
  color: var(--forest-dark, #143524) !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  padding: 0.1rem 0.3rem !important;
  border-radius: 2px !important;
  display: none !important;
}
.quote-photo-thumb--edited .quote-photo-thumb__edit-badge {
  display: block !important;
}
.quote-photo-thumb__remove {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  background: rgba(139, 30, 30, 0.85) !important;
  color: #fff !important;
  border: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  font-size: 0.7rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Full-screen editor modal (unified, opens on upload) */
.photo-editor-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  background: rgba(0, 0, 0, 0.92) !important;
  display: flex !important;
  flex-direction: column !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.photo-editor-modal[hidden] { display: none !important; }
.photo-editor-modal__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 1rem !important;
  background: linear-gradient(180deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
  border-bottom: 1px solid var(--gold, #b89243) !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}
.photo-editor-modal__title {
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin: 0 !important;
}
.photo-editor-modal__counter {
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.75rem !important;
  color: var(--gold, #b89243) !important;
  font-weight: 600 !important;
}
.photo-editor-modal__close {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(184, 146, 67, 0.4) !important;
  color: #fff !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 4px !important;
  font-size: 1.3rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease !important;
}
.photo-editor-modal__close:hover {
  background: rgba(184, 146, 67, 0.3) !important;
}

.photo-editor-modal__body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Canvas area */
.photo-editor-modal__canvas-wrap {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  overflow: hidden !important;
  position: relative !important;
}
.photo-editor-modal__canvas-wrap canvas {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  cursor: crosshair !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* Side toolbar (desktop: right side, mobile: bottom) */
.photo-editor-modal__toolbar {
  flex-shrink: 0 !important;
  background: linear-gradient(180deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
  border-left: 1px solid rgba(184, 146, 67, 0.3) !important;
  padding: 1rem 0.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  width: 64px !important;
  align-items: center !important;
}
.photo-editor-modal__tool {
  width: 44px !important;
  height: 44px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(184, 146, 67, 0.25) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(245, 233, 200, 0.7) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}
.photo-editor-modal__tool:hover {
  border-color: var(--gold, #b89243) !important;
  color: #fff !important;
  background: rgba(184, 146, 67, 0.12) !important;
}
.photo-editor-modal__tool.is-active {
  background: var(--gold, #b89243) !important;
  color: var(--forest-dark, #143524) !important;
  border-color: #fff !important;
  box-shadow: 0 0 0 2px rgba(184, 146, 67, 0.4) !important;
}
.photo-editor-modal__tool svg {
  width: 20px !important;
  height: 20px !important;
}
.photo-editor-modal__tool-label {
  position: absolute !important;
  right: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-right: 8px !important;
  background: var(--forest-dark, #143524) !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 3px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
}
.photo-editor-modal__tool:hover .photo-editor-modal__tool-label {
  opacity: 1 !important;
}
.photo-editor-modal__tool-divider {
  width: 70% !important;
  height: 1px !important;
  background: rgba(184, 146, 67, 0.2) !important;
  margin: 0.2rem 0 !important;
}
.photo-editor-modal__color-picker {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
  align-items: center !important;
}
.photo-editor-modal__color {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, border-color 0.15s ease !important;
}
.photo-editor-modal__color:hover {
  transform: scale(1.15) !important;
}
.photo-editor-modal__color.is-active {
  border-color: #fff !important;
  transform: scale(1.15) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3) !important;
}

/* Mobile: toolbar moves to bottom, horizontal */
@media (max-width: 768px) {
  .photo-editor-modal__body {
    flex-direction: column !important;
  }
  .photo-editor-modal__toolbar {
    flex-direction: row !important;
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid rgba(184, 146, 67, 0.3) !important;
    padding: 0.5rem 0.75rem !important;
    gap: 0.4rem !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .photo-editor-modal__tool {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
  }
  .photo-editor-modal__tool-label {
    display: none !important;
  }
  .photo-editor-modal__tool-divider {
    width: 1px !important;
    height: 70% !important;
    margin: 0 0.2rem !important;
  }
  .photo-editor-modal__color-picker {
    flex-direction: row !important;
  }
  .photo-editor-modal__canvas-wrap {
    padding: 0.5rem !important;
  }
}

/* Photo navigation (prev/next) for multiple photos */
.photo-editor-modal__nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(21, 40, 28, 0.8) !important;
  border: 1px solid rgba(184, 146, 67, 0.4) !important;
  color: #fff !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  transition: background 0.2s ease !important;
}
.photo-editor-modal__nav:hover {
  background: var(--gold, #b89243) !important;
  color: var(--forest-dark, #143524) !important;
}
.photo-editor-modal__nav--prev { left: 0.5rem !important; }
.photo-editor-modal__nav--next { right: 0.5rem !important; }
.photo-editor-modal__nav svg {
  width: 20px !important;
  height: 20px !important;
}

/* ==========================================================================
   ISSUE 2 — Bottom WhatsApp section: compact, professional
   Replace the bulky sidebar cards with a slim, inline strip.
   ========================================================================== */
.quote-bottom-cta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.6rem !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem 1.2rem !important;
  background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
  border-radius: 6px !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  margin: 1.5rem 0 !important;
}
.quote-bottom-cta__label {
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--gold, #b89243) !important;
  margin-right: 0.5rem !important;
}
.quote-bottom-cta__btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: 3px !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: 1px solid rgba(184, 146, 67, 0.4) !important;
  background: transparent !important;
  color: #fff !important;
}
.quote-bottom-cta__btn:hover {
  background: var(--gold, #b89243) !important;
  color: var(--forest-dark, #143524) !important;
  border-color: #fff !important;
  transform: translateY(-1px) !important;
}
.quote-bottom-cta__btn--primary {
  background: var(--gold, #b89243) !important;
  color: var(--forest-dark, #143524) !important;
  border-color: #fff !important;
}
.quote-bottom-cta__btn--primary:hover {
  background: #fff !important;
}
.quote-bottom-cta__btn svg {
  width: 14px !important;
  height: 14px !important;
}

/* Hide the old bulky sidebar on the quote page */
.quote-page .sidebar,
.booking-page .sidebar {
  display: none !important;
}
/* Make the article full-width since sidebar is hidden */
.quote-page .article-layout,
.booking-page .article-layout {
  display: block !important;
}
.quote-page .article-body,
.booking-page .article-body {
  max-width: 100% !important;
}

/* ==========================================================================
   ISSUE 3 — Service page "everything we do" cards premium upgrade
   ========================================================================== */
.svc-grid-card {
  background: linear-gradient(160deg, var(--forest-dark, #143524) 0%, var(--forest, #1e3a2a) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  border-radius: 6px !important;
  padding: 1.4rem 1.3rem !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  min-height: 200px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.3s cubic-bezier(.2,.7,.3,1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.svc-grid-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), transparent 80%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
.svc-grid-card:hover::before {
  transform: scaleX(1);
}
.svc-grid-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px rgba(21, 40, 28, 0.22) !important;
  border-color: var(--gold, #b89243) !important;
}
.svc-grid-card__icon {
  background: rgba(184, 146, 67, 0.12) !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
  border-radius: 4px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gold, #b89243) !important;
}
.svc-grid-card__icon svg {
  width: 22px !important;
  height: 22px !important;
}
.svc-grid-card h3 {
  color: #fff !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}
.svc-grid-card p {
  color: rgba(245, 233, 200, 0.78) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.svc-grid-card__link {
  color: var(--gold, #b89243) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-top: auto !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid rgba(184, 146, 67, 0.2) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
}
.svc-grid-card__link svg {
  width: 14px !important;
  height: 14px !important;
  transition: transform 0.2s ease !important;
}
.svc-grid-card:hover .svc-grid-card__link svg {
  transform: translateX(4px) !important;
}

/* ==========================================================================
   ISSUE 4 — Gardening Knowledge desktop arrows: larger, visible, fix hover
   Current: tiny arrows at bottom, cards "stick" on hover preventing scroll.
   Fix: large floating arrows on left/right edges, disable pointer-events
   on card hover tilt to prevent scroll-jam.
   ========================================================================== */

/* Fix: remove the pointermove tilt handler that causes scroll-jam */
.tip-card.editorial-row.cgm-tilt {
  will-change: auto !important;
}
.tip-card.editorial-row {
  pointer-events: auto !important;
}

/* Replace the small bottom nav with large floating side arrows */
.tip-category-nav {
  position: sticky !important;
  top: 60px !important;
  z-index: 50 !important;
  background: linear-gradient(180deg, rgba(253, 251, 246, 0.98), rgba(253, 251, 246, 0.92)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  padding: 0.6rem 0 !important;
  margin-bottom: 1rem !important;
  border-bottom: 1px solid rgba(184, 146, 67, 0.2) !important;
}
.tip-category-nav__btn {
  background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
  color: #fff !important;
  border: 1px solid var(--gold, #b89243) !important;
  border-radius: 30px !important;
  padding: 0.6rem 1.2rem !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(21, 40, 28, 0.2) !important;
}
.tip-category-nav__btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 18px rgba(21, 40, 28, 0.28) !important;
}
.tip-category-nav__btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}
.tip-category-nav__btn svg {
  width: 18px !important;
  height: 18px !important;
}
.tip-category-nav__label {
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--forest-deep, #143524) !important;
}

/* Large floating side arrows (desktop) */
.tip-floating-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: none;
}
@media (min-width: 769px) {
  .tip-floating-nav {
    display: flex;
  }
}
.tip-floating-nav--left {
  left: 0.5rem;
}
.tip-floating-nav--right {
  right: 0.5rem;
}
.tip-floating-nav__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a));
  border: 2px solid var(--gold, #b89243);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(21, 40, 28, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}
.tip-floating-nav__btn:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 8px 22px rgba(21, 40, 28, 0.35);
}
.tip-floating-nav__btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
  transform: none;
}
.tip-floating-nav__btn svg {
  width: 24px;
  height: 24px;
}

/* ==========================================================================
   ISSUE 5 — Featured / Newest / Most popular: sideways scroll + condense
   Make these sections horizontally scrollable like the category sections.
   ========================================================================== */
.tip-featured-section .editorial-list,
.tip-popular-section .editorial-list,
.tip-newest-section .editorial-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 0.75rem !important;
  padding: 0.35rem 0.5rem 1rem !important;
  margin-inline: -0.5rem !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--gold, #b89243) rgba(30, 58, 42, 0.08) !important;
  cursor: grab;
  touch-action: pan-x pan-y;
}
.tip-featured-section .editorial-list.is-dragging,
.tip-popular-section .editorial-list.is-dragging,
.tip-newest-section .editorial-list.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.tip-featured-section .editorial-list .tip-card.editorial-row,
.tip-popular-section .editorial-list .tip-card.editorial-row,
.tip-newest-section .editorial-list .tip-card.editorial-row {
  flex: 0 0 min(31rem, calc((100% - 2rem) / 3));
  min-width: 280px;
  scroll-snap-align: start;
}
@media (max-width: 1050px) {
  .tip-featured-section .editorial-list .tip-card.editorial-row,
  .tip-popular-section .editorial-list .tip-card.editorial-row,
  .tip-newest-section .editorial-list .tip-card.editorial-row {
    flex-basis: min(29rem, calc((100% - 1rem) / 2));
  }
}
@media (max-width: 640px) {
  .tip-featured-section .editorial-list .tip-card.editorial-row,
  .tip-popular-section .editorial-list .tip-card.editorial-row,
  .tip-newest-section .editorial-list .tip-card.editorial-row {
    flex-basis: 85%;
    min-width: 250px;
  }
}
.tip-featured-section .editorial-list::-webkit-scrollbar,
.tip-popular-section .editorial-list::-webkit-scrollbar,
.tip-newest-section .editorial-list::-webkit-scrollbar {
  height: 5px;
  -webkit-appearance: none;
}
.tip-featured-section .editorial-list::-webkit-scrollbar-track,
.tip-popular-section .editorial-list::-webkit-scrollbar-track,
.tip-newest-section .editorial-list::-webkit-scrollbar-track {
  background: rgba(30, 58, 42, 0.06);
  border-radius: 3px;
}
.tip-featured-section .editorial-list::-webkit-scrollbar-thumb,
.tip-popular-section .editorial-list::-webkit-scrollbar-thumb,
.tip-newest-section .editorial-list::-webkit-scrollbar-thumb {
  background: var(--gold, #b89243);
  border-radius: 3px;
}
.tip-featured-section .tip-card.editorial-row,
.tip-popular-section .tip-card.editorial-row,
.tip-newest-section .tip-card.editorial-row {
  flex: 0 0 min(78vw, 340px) !important;
  width: min(78vw, 340px) !important;
  min-width: 0 !important;
  max-width: 340px !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: normal !important;
}
@media (min-width: 769px) {
  .tip-featured-section .tip-card.editorial-row,
  .tip-popular-section .tip-card.editorial-row,
  .tip-newest-section .tip-card.editorial-row {
    flex: 0 0 min(45vw, 380px) !important;
    width: min(45vw, 380px) !important;
    max-width: 380px !important;
  }
}

/* ==========================================================================
   ISSUE 6 — Mobile menu: Garden Knowledge alignment fix
   The word is slightly right of other items. Fix: ensure consistent padding.
   ========================================================================== */
@media (max-width: 1024px) {
  .mobile-gk-toggle {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
  }
  .mobile-gk-toggle::before {
    margin-right: 0.55rem !important;
    width: 4px !important;
    min-width: 4px !important;
  }
  /* Ensure the toggle text aligns with the link text */
  .mobile-menu > a,
  .mobile-gk-toggle {
    padding-left: 0.5rem !important;
  }
}

/* ==========================================================================
   ISSUE 7 — Plant passport cards: fix unreadable text on dark background
   The v8 .editorial-calc-card upgrade made cards dark forest, but inline
   styles on cards 1 and 3 use color:var(--forest-dark) for price text,
   which is dark on dark = unreadable.
   Fix: override inline styles for price/value text to use gold or white.
   ========================================================================== */
.editorial-calc-card p[style*="forest-dark"] {
  color: var(--gold, #b89243) !important;
}
.editorial-calc-card p[style*="color:var(--forest-dark)"] {
  color: var(--gold, #b89243) !important;
}
.editorial-calc-card p[style*="font-size:0.82rem"] {
  color: rgba(245, 233, 200, 0.8) !important;
}
.editorial-calc-card ul {
  color: rgba(245, 233, 200, 0.85) !important;
}
.editorial-calc-card ul li {
  color: rgba(245, 233, 200, 0.85) !important;
}
.editorial-calc-card ul li::marker {
  color: var(--gold, #b89243) !important;
}

/* ==========================================================================
   ISSUE 8 — Town intelligence 12-month calendar: fix month header visibility
   The cal-cell__month uses cream background + dark text, but v8 made the
   town-data-card dark. The cal-cell itself has cream bg so it should work,
   but the month text is too small and the contrast with the inactive bars
   is poor.
   Fix: make month header bold gold on dark, increase size.
   ========================================================================== */
.town-data-card--widget .cal-cell__month {
  background: var(--gold, #b89243) !important;
  color: var(--forest-dark, #143524) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  height: 18px !important;
  border-bottom: none !important;
}
.town-data-card--widget .cal-cell--data {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(184, 146, 67, 0.3) !important;
}
.town-data-card--widget .cal-cell__bars {
  background: #fff !important;
}
.town-data-card--widget .cal-cell__bar {
  background: #e0d9c8 !important;
}
.town-data-card--widget .cal-legend__item {
  color: rgba(245, 233, 200, 0.85) !important;
  font-size: 0.68rem !important;
}
.town-data-card--widget .town-data-card__label {
  margin-bottom: 0.5rem !important;
}

/* ==========================================================================
   ISSUE 9 — Compare modal on mobile: fix white box takeover
   Root cause: the compare-drawer (bottom bar) renders correctly, but when
   the user clicks "Compare" in the drawer, showCompareModal() opens a
   full-screen white modal. The user wants the bottom bar only on mobile,
   and the full comparison table should render as a bottom sheet, not a
   full-screen white box.
   Fix: make the compare-modal a bottom sheet on mobile (not full-screen
   white), and ensure the drawer stays as a slim bar.
   Also: the v8 rule `body.compare-modal-open .compare-drawer` was supposed
   to hide the drawer when modal opens, but the MutationObserver may not
   be firing. Use a CSS-only approach: hide drawer when modal is visible
   using :has() or adjacent sibling.
   ========================================================================== */
@media (max-width: 768px) {
  /* Compare drawer: slim floating bar, NOT full-width */
  .compare-drawer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 998 !important;
    background: transparent !important;
    padding: 0 !important;
    pointer-events: none !important;
  }
  .compare-drawer__bar {
    margin: 0 0.5rem 0.5rem !important;
    padding: 0.6rem 0.85rem !important;
    background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
    border: 1px solid var(--gold, #b89243) !important;
    border-radius: 8px !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
    pointer-events: auto !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }
  .compare-drawer__count {
    color: var(--gold, #b89243) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
  }
  .compare-drawer__label {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 0.72rem !important;
  }
  .compare-drawer__chips {
    flex: 1 1 100% !important;
    order: 3 !important;
  }
  .compare-drawer__actions {
    flex: 1 1 100% !important;
    order: 4 !important;
    display: flex !important;
    gap: 0.4rem !important;
  }
  .compare-drawer__btn {
    flex: 1 !important;
    padding: 0.5rem 0.6rem !important;
    font-size: 0.75rem !important;
    border-radius: 4px !important;
    border: none !important;
    font-weight: 600 !important;
  }
  .compare-drawer__btn--view {
    background: var(--gold, #b89243) !important;
    color: var(--forest-dark, #143524) !important;
  }
  .compare-drawer__btn--clear {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  .compare-drawer__btn--close {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    flex: 0 0 36px !important;
  }

  /* Compare modal: bottom sheet, NOT full-screen white */
  .compare-modal {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .compare-modal__overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
  }
  .compare-modal__panel {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 85vh !important;
    height: auto !important;
    border-radius: 12px 12px 0 0 !important;
    border: none !important;
    border-top: 2px solid var(--gold, #b89243) !important;
    background: linear-gradient(180deg, #fdfbf6, #f6efe2) !important;
    animation: bottomSheetSlide 0.3s ease !important;
  }
  @keyframes bottomSheetSlide {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }
  .compare-modal__header {
    padding: 0.85rem 1rem !important;
    background: linear-gradient(135deg, var(--forest-dark, #143524), var(--forest, #1e3a2a)) !important;
    color: #fff !important;
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 2px solid var(--gold, #b89243) !important;
  }
  .compare-modal__title {
    color: #fff !important;
    font-size: 1.05rem !important;
  }
  .compare-modal__close {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
  }
  .compare-modal__body {
    padding: 1rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: linear-gradient(180deg, #fdfbf6, #f6efe2) !important;
  }

  /* Hide the drawer when the modal is open (CSS-only, no JS needed) */
  .compare-modal:not([hidden]) {
    z-index: 1000 !important;
  }
  /* When modal is open, push drawer behind it */
  body.compare-modal-open .compare-drawer {
    z-index: 997 !important;
    opacity: 0.3 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================================
   Reduced motion safety
   ========================================================================== */


/* ==========================================================================
   v10 PREMIUM UPGRADE — Luxury dark theme + card modernisation
   Brand colour: #102019 (deep premium forest-night)
   Applied to: Popular right now cards, Services page cards, Plant pages,
   CTA bands, dark sections. Maintains classiness, no garish effects.
   ========================================================================== */

/* ---- Premium dark gradient backgrounds (reusable) ---- */
.bg-premium-dark {
  background: linear-gradient(155deg, var(--forest-dark) 0%, var(--forest-night) 100%);
  color: #fff;
}
.bg-premium-dark h2, .bg-premium-dark h3 { color: #fff; }
.bg-premium-dark p { color: rgba(255, 255, 255, 0.78); }
.bg-premium-dark a { color: var(--gold-light, #d4a851); }

/* ---- "Popular right now" cards: dark premium treatment ----
   Reuses the editorial-card-grid__cell visual language but scoped to
   #popular-articles so the JS-rebuilt cards inherit it automatically. */
#popular-articles .article-card-popular {
  background: linear-gradient(155deg, var(--forest-dark) 0%, var(--forest-night) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(184, 146, 67, 0.22) !important;
  border-radius: var(--radius, 8px) !important;
  padding: 1.5rem 1.5rem 1.25rem !important;
  height: 280px !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 2px 12px rgba(16, 32, 25, 0.18);
}
#popular-articles .article-card-popular::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), var(--gold-light, #d4a851));
  opacity: 0;
  transition: opacity 0.3s ease;
}
#popular-articles .article-card-popular:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 146, 67, 0.5) !important;
  box-shadow: 0 8px 28px rgba(16, 32, 25, 0.35);
}
#popular-articles .article-card-popular:hover::before { opacity: 1; }

#popular-articles .article-card-popular h3 {
  color: #fff !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  margin: 0 0 0.5rem 0 !important;
}
#popular-articles .article-card-popular p {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
}
#popular-articles .article-card-popular .card-link {
  color: var(--gold, #b89243) !important;
  font-family: var(--sans, system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(184, 146, 67, 0.2);
  display: block;
}
#popular-articles .article-card-popular .card-link:hover {
  color: var(--gold-light, #d4a851) !important;
}

/* Meta chips (tag + level + read-time) restyled for dark bg */
#popular-articles .article-card-popular .article-card-popular__meta,
#popular-articles .article-card-popular .article-meta {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
#popular-articles .article-card-popular [class*="article-card-popular__tag"],
#popular-articles .article-card-popular [class*="article-card-popular__level"],
#popular-articles .article-card-popular [class*="article-meta__"] {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(184, 146, 67, 0.3);
  background: rgba(184, 146, 67, 0.1);
  color: var(--gold-light, #d4a851) !important;
}
#popular-articles .article-card-popular [class*="--easy"] {
  background: rgba(90, 154, 62, 0.18);
  border-color: rgba(90, 154, 62, 0.4);
  color: #a8d68a !important;
}
#popular-articles .article-card-popular [class*="--intermediate"] {
  background: rgba(217, 148, 31, 0.18);
  border-color: rgba(217, 148, 31, 0.4);
  color: #e8b25e !important;
}
#popular-articles .article-card-popular [class*="--hard"] {
  background: rgba(196, 69, 54, 0.18);
  border-color: rgba(196, 69, 54, 0.4);
  color: #e88a7d !important;
}

/* ---- Services page: premium guide cards ---- */
.svc-guide-card {
  background: linear-gradient(155deg, var(--forest-dark) 0%, var(--forest-night) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(184, 146, 67, 0.22) !important;
  border-radius: var(--radius, 8px) !important;
  padding: 1.5rem !important;
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 2px 12px rgba(16, 32, 25, 0.18);
  min-height: 200px;
}
.svc-guide-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), var(--gold-light, #d4a851));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.svc-guide-card:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 146, 67, 0.5) !important;
  box-shadow: 0 8px 28px rgba(16, 32, 25, 0.35);
}
.svc-guide-card:hover::before { opacity: 1; }
.svc-guide-card h3 {
  color: #fff !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-weight: 500 !important;
}
.svc-guide-card p, .svc-guide-card [class*="read"] {
  color: rgba(255, 255, 255, 0.72) !important;
}
.svc-guide-card .svc-guide-card__icon {
  background: linear-gradient(135deg, var(--gold, #b89243), var(--gold-deep, #8a6d31)) !important;
  color: var(--forest-dark) !important;
}
.svc-guide-card [class*="link"], .svc-guide-card a {
  color: var(--gold, #b89243) !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* ---- Services principles: add subtle card framing on dark bg ---- */
.svc-principle {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(184, 146, 67, 0.18);
  border-radius: var(--radius, 8px);
  padding: 1.5rem 1.25rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.svc-principle:hover {
  border-color: rgba(184, 146, 67, 0.45);
  background: rgba(255, 255, 255, 0.07);
}
.svc-principle__num {
  color: var(--gold, #b89243) !important;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.8rem;
  font-weight: 500;
  opacity: 0.9;
}
.svc-principle h3 {
  color: #fff !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-weight: 500 !important;
}
.svc-principle p {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ---- Services how-we-work steps: light cream/gold cards ---- */
.svc-step {
  background: linear-gradient(155deg, var(--bone, #faf8f3), var(--cream, #f7f3ea));
  border: 1px solid rgba(184, 146, 67, 0.25);
  border-radius: var(--radius, 8px);
  padding: 1.5rem 1.25rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.svc-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), var(--gold-light, #d4a851));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.svc-step:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 146, 67, 0.5);
  box-shadow: 0 6px 20px rgba(16, 32, 25, 0.12);
}
.svc-step:hover::before { opacity: 1; }
.svc-step [class*="num"] {
  color: var(--gold-deep, #8a6d31);
  font-family: var(--serif, Georgia, serif);
  font-weight: 500;
}

/* ---- Premium CTA band (darker, more luxurious) ---- */
.cta-band, .cta-band-compact, .section-dark {
  background: linear-gradient(155deg, var(--forest-dark) 0%, var(--forest-night) 100%) !important;
  position: relative;
  overflow: hidden;
}
.cta-band::before, .cta-band-compact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold, #b89243), transparent);
  opacity: 0.5;
}

/* ---- Plant page: premium "Plant relationships" cards ---- */
.plant-relationships {
  background: linear-gradient(155deg, var(--bone, #faf8f3), var(--cream, #f7f3ea)) !important;
  border: 1px solid rgba(184, 146, 67, 0.25) !important;
  border-radius: var(--radius, 8px);
  padding: 1.5rem !important;
  margin-top: 1.5rem;
}
.plant-relationships > h3 {
  color: var(--forest-dark) !important;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(184, 146, 67, 0.2);
}
.plant-relationships > h3:first-child { margin-top: 0 !important; }
.plant-relationships > p {
  font-size: 0.85rem !important;
  color: var(--muted) !important;
  margin-bottom: 0.5rem !important;
}
.plant-relationships ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem 0;
}
.plant-relationships ul li {
  background: #fff;
  border: 1px solid rgba(45, 90, 61, 0.12);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.plant-relationships ul li:hover {
  border-color: var(--gold, #b89243);
  transform: translateY(-1px);
}
.plant-relationships ul li a {
  color: var(--forest-dark);
  text-decoration: none;
  font-weight: 500;
}
.plant-relationships ul li a:hover {
  color: var(--gold-deep, #8a6d31);
}

/* ---- Plant page: fact grid premium upgrade ---- */
.fact-grid {
  gap: 0.75rem;
}
.fact-grid .fact {
  background: linear-gradient(155deg, var(--bone, #faf8f3), #fff) !important;
  border: 1px solid rgba(184, 146, 67, 0.2) !important;
  border-radius: var(--radius, 8px) !important;
  padding: 1rem !important;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.fact-grid .fact::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold, #b89243), var(--gold-light, #d4a851));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fact-grid .fact:hover {
  border-color: rgba(184, 146, 67, 0.45) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(16, 32, 25, 0.1);
}
.fact-grid .fact:hover::before { opacity: 1; }

/* ---- Plant page: hero premium upgrade ---- */
.plant-hero {
  background: linear-gradient(155deg, var(--forest-dark) 0%, var(--forest-night) 100%) !important;
  color: #fff !important;
  border-radius: var(--radius, 8px);
  overflow: hidden;
  position: relative;
}
.plant-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), var(--gold-light, #d4a851));
}
.plant-hero h1, .plant-hero h2 { color: #fff !important; }
.plant-hero p { color: rgba(255, 255, 255, 0.8) !important; }

/* ---- Editorial quick answer callout: premium dark ---- */
.editorial-quick-answer {
  background: linear-gradient(155deg, var(--forest-dark) 0%, var(--forest-night) 100%) !important;
  color: #fff !important;
  border-left: 4px solid var(--gold, #b89243) !important;
  border-radius: var(--radius, 8px);
  padding: 1.5rem !important;
}
.editorial-quick-answer h2, .editorial-quick-answer h3 {
  color: var(--gold-light, #d4a851) !important;
}
.editorial-quick-answer p { color: rgba(255, 255, 255, 0.85) !important; }
.editorial-quick-answer strong { color: #fff; }

/* ---- Town page: premium sidebar cards ---- */
.sidebar-card {
  background: linear-gradient(155deg, var(--bone, #faf8f3), #fff) !important;
  border: 1px solid rgba(184, 146, 67, 0.2) !important;
  border-radius: var(--radius, 8px) !important;
  padding: 1.25rem !important;
  box-shadow: 0 2px 10px rgba(16, 32, 25, 0.06);
  transition: box-shadow 0.3s ease;
}
.sidebar-card:hover {
  box-shadow: 0 4px 18px rgba(16, 32, 25, 0.1);
}
.sidebar-card h3 {
  color: var(--forest-dark) !important;
  font-family: var(--serif, Georgia, serif);
  font-weight: 600;
}

/* ---- Quick facts grid: premium upgrade ---- */
.quick-facts {
  background: linear-gradient(155deg, var(--forest-dark) 0%, var(--forest-night) 100%) !important;
  border-radius: var(--radius, 8px);
  padding: 1.5rem !important;
  color: #fff;
}
.quick-facts h2 { color: #fff !important; }
.quick-facts h2 svg { color: var(--gold, #b89243); }
.quick-facts-grid {
  gap: 0.75rem;
}
.quick-fact {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(184, 146, 67, 0.2) !important;
  border-radius: 6px;
  padding: 0.85rem !important;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.quick-fact:hover {
  border-color: rgba(184, 146, 67, 0.45) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}
.quick-fact dt {
  color: var(--gold-light, #d4a851) !important;
}
.quick-fact dt svg { color: var(--gold, #b89243); }
.quick-fact dd {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ---- Editorial principles (town pages): premium upgrade ---- */
.editorial-principles {
  gap: 1rem;
}
.editorial-principles__item {
  background: linear-gradient(155deg, var(--bone, #faf8f3), #fff) !important;
  border: 1px solid rgba(184, 146, 67, 0.2) !important;
  border-radius: var(--radius, 8px) !important;
  padding: 1.5rem 1.25rem !important;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.editorial-principles__item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #b89243), var(--gold-light, #d4a851));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.editorial-principles__item:hover {
  border-color: rgba(184, 146, 67, 0.45) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(16, 32, 25, 0.1);
}
.editorial-principles__item:hover::before { opacity: 1; }
.editorial-principles__num {
  color: var(--gold, #b89243) !important;
  font-family: var(--serif, Georgia, serif) !important;
  font-size: 1.6rem !important;
  font-weight: 500 !important;
}
.editorial-principles__title {
  color: var(--forest-dark) !important;
  font-family: var(--serif, Georgia, serif) !important;
}
.editorial-principles__body {
  color: var(--muted) !important;
  font-size: 0.92rem !important;
  line-height: 1.5 !important;
}

/* ---- Page header: subtle premium gold accent line ---- */
.page-header-editorial {
  position: relative;
}
.page-header-editorial::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold, #b89243), transparent);
}

/* ---- Footer: deeper premium dark ---- */
.footer {
  background: var(--forest-night, #0a1410) !important;
}

/* ---- Buttons: premium gold hover ---- */
.btn-primary {
  background: linear-gradient(135deg, var(--forest, #2d5a3d), var(--forest-dark, #102019));
  border: 1px solid rgba(184, 146, 67, 0.3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--forest-dark, #102019), var(--forest-night, #0a1410));
  border-color: var(--gold, #b89243);
}

/* ---- Brand logo: premium subtle gold ring ---- */
.brand-logo {
  border-radius: 6px;
  transition: box-shadow 0.3s ease;
}
.brand:hover .brand-logo {
  box-shadow: 0 0 0 2px rgba(184, 146, 67, 0.4);
}

/* ---- Section dividers: premium gold accent ---- */
.section-title h2::after,
.editorial-h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold, #b89243), transparent);
  margin-top: 0.5rem;
}