:root {
  --forest: #15391e;
  --forest-deep: #0d2816;
  --leaf: #9ad64c;
  --acid: #d3fa99;
  --paper: #fbfaf2;
  --cream: #f2efe4;
  --sage: #b8c8a8;
  --eucalyptus: #789b78;
  --clay: #95573e;
  --gold: #dfb867;
  --error: #9e3020;
  --ink: #18231a;
  --muted: #59614f;
  --line: rgba(24, 35, 26, 0.18);
  --line-light: rgba(251, 250, 242, 0.24);
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
  --container: 1240px;
  --section-space: 8rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--forest-deep);
}

/* The header is sticky (~84px desktop / ~73px mobile), so without this every
   in-page anchor lands its target underneath the header. */
:target,
[id] {
  scroll-margin-top: 6rem;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open {
  overflow: hidden;
}

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

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

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/* --gold measures ~1.8:1 on paper/cream against a 3:1 floor for focus
   indicators, so the ring was effectively invisible on light sections.
   Scoped by surface instead. */
button:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--forest);
  outline-offset: 4px;
}

.hero-section :focus-visible,
.proof-strip :focus-visible,
.ecosystem-section :focus-visible,
.shop-section :focus-visible,
.finder-panel :focus-visible,
.visit-section :focus-visible,
.site-footer :focus-visible,
.mobile-menu :focus-visible {
  outline-color: var(--acid);
}

/* Filled controls are ringed against their OWN fill, not the section behind
   them — otherwise an acid ring vanishes on an acid chip, and a forest ring
   vanishes on a forest button. */
.filter-button.is-active:focus-visible,
.filter-button:hover:focus-visible,
.finder-option:hover:focus-visible,
.button-acid:focus-visible,
.visit-card-note :focus-visible {
  outline-color: var(--forest);
}

.button-dark:focus-visible {
  outline-color: var(--acid);
}

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

.container {
  width: min(calc(100% - 3rem), var(--container));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--forest-deep);
  background: var(--acid);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Mono is reserved for things that encode data a reader could not otherwise
   know — an index, a coordinate, a stock state. It is no longer applied to
   ordinary words, running sentences, form labels, or the footer, where
   uppercase monospace at 9–11px destroys word-shape recognition and slows
   exactly the moments that matter most. */
.mono-label,
.filter-button,
.availability,
.proof-number,
.field-note-index,
.field-note-top,
.image-note,
.visit-card-top,
.finder-panel-head {
  font-family: var(--mono);
  font-size: 0.67rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  margin: 0 0 1.45rem;
  color: var(--clay);
}

.eyebrow::before {
  display: inline-block;
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  content: "";
}

.eyebrow-light {
  color: var(--acid);
}

.section {
  padding: var(--section-space) 0;
}

/* Section rhythm. Nine consecutive sections previously carried an identical
   128px frame, which reads as repetition rather than cadence. Sections whose
   content is a hairline grid already separate themselves — the full frame on
   top of that is redundant air, so they run tighter. Derived from the one
   token so the responsive stepping at 920/640px still applies. */
.departments-section,
.shop-section,
.gallery-section,
.grow-section {
  padding-block: calc(var(--section-space) * 0.65);
}

/* The visit section carried NO vertical padding at all — it is the one content
   section that never received the .section class, so its heading collided with
   the section above and its card with the footer. */
.visit-section {
  padding-block: var(--section-space);
}

.section-paper {
  background: var(--paper);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: -0.055em;
}

h1,
h2 {
  margin-bottom: 1.4rem;
}

/* Emphasis colour is scoped by surface. --leaf (#9ad64c) was used globally,
   which measures ~1.6:1 on the paper/cream sections — the loudest half of
   four headlines was effectively unreadable. Light is the default here
   because most sections are light; dark sections opt in below. */
h1 em,
h2 em {
  color: var(--forest);
  font-style: normal;
}

.hero-section h1 em,
.hero-section h2 em,
.ecosystem-section h2 em,
.shop-section h2 em,
.visit-section h2 em {
  color: var(--acid);
}

h2 {
  max-width: 13ch;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
}

h3 {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.02;
}

.lead {
  max-width: 37rem;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.45;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
}

.button {
  display: inline-flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: 0.82rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

/* The site suppresses -webkit-tap-highlight-color, so without an explicit
   pressed state nothing acknowledges a tap on touch at all. */
.button:active,
.button-small:active,
.filter-button:active,
.finder-option:active,
.product-card-ask:active,
.menu-toggle:active {
  transform: scale(0.975);
}

.button-small {
  min-height: 2.55rem;
  padding: 0.6rem 0.95rem;
  font-size: 0.75rem;
}

.button-acid {
  color: var(--forest-deep);
  background: var(--acid);
}

.button-acid:hover {
  background: var(--leaf);
}

.button-dark {
  color: var(--paper);
  background: var(--forest);
}

.button-dark:hover {
  background: var(--forest-deep);
}

.button-light {
  color: var(--forest);
  background: var(--paper);
  border-color: var(--line);
}

.button-light:hover {
  color: var(--forest-deep);
  background: var(--acid);
  border-color: var(--acid);
}

.text-link {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.25rem;
  font-size: 0.84rem;
  font-weight: 700;
}

.text-link:hover {
  color: var(--clay);
}

.text-link-light {
  color: var(--paper);
}

.text-link-light:hover {
  color: var(--acid);
}

.announcement-bar {
  color: var(--forest-deep);
  background: var(--acid);
  font-size: 0.8rem;
}

.announcement-inner {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  min-height: 2rem;
}

.announcement-inner p {
  margin: 0;
}

.announcement-inner a {
  margin-left: auto;
  font-weight: 700;
}

.announcement-inner a:hover {
  color: var(--clay);
}

.announcement-mark {
  font-size: 0.95rem;
}

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  color: var(--forest);
  background: rgba(251, 250, 242, 0.97);
  border-bottom: 1px solid var(--line);
}

.header-shell {
  display: flex;
  gap: 1.4rem;
  align-items: center;
  min-height: 5.2rem;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: 10.8rem;
}

.brand img {
  width: 100%;
  max-height: 4rem;
  object-fit: contain;
  object-position: left center;
}

/* Shown by script.js adding .is-visible when the logo image fails. It used to
   be revealed with an inline style, which the CSP blocks, so the fallback could
   never appear. */
.brand-fallback.is-visible {
  display: inline;
}

.brand-fallback {
  display: none;
  color: var(--forest);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.1em;
}

.brand-fallback span {
  color: var(--leaf);
}

.header-context {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-left: 0.5rem;
  color: var(--muted);
  font-size: 0.67rem;
  line-height: 1.25;
}

.header-context .mono-label {
  color: var(--clay);
}

.desktop-nav {
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
  margin-left: auto;
  font-size: 0.76rem;
  font-weight: 600;
}

.desktop-nav a {
  position: relative;
  padding: 0.25rem 0;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 180ms ease;
}

.desktop-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.header-actions {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin-left: 0.8rem;
}

.menu-toggle {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.menu-lines,
.menu-lines i {
  display: block;
}

.menu-lines {
  width: 1rem;
  margin: auto;
}

.menu-lines i {
  height: 1px;
  margin: 0.28rem 0;
  background: currentColor;
  transition: transform 180ms ease;
}

.menu-toggle[aria-expanded="true"] .menu-lines i:first-child {
  transform: translateY(0.14rem) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-lines i:last-child {
  transform: translateY(-0.14rem) rotate(-45deg);
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--forest);
}

.mobile-menu[aria-hidden="false"] {
  display: block;
}

.mobile-menu-inner {
  display: grid;
  gap: 0.85rem;
  width: min(calc(100% - 3rem), var(--container));
  margin: 0 auto;
  padding: 1.5rem 0 2.1rem;
  color: var(--paper);
}

.mobile-menu-inner .mono-label {
  margin-bottom: 0.5rem;
  color: var(--acid);
}

.mobile-menu-inner a {
  display: flex;
  justify-content: space-between;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-light);
  font-size: 1.25rem;
  letter-spacing: -0.03em;
}

.hero-section {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  color: var(--paper);
  background: var(--forest-deep);
}

.hero-media,
.hero-media::after {
  position: absolute;
  inset: 0;
}

.hero-media {
  isolation: isolate;
  background: var(--forest-deep);
}

.hero-media::after {
  z-index: 2;
  background: rgba(10, 35, 18, 0.18);
  content: "";
  pointer-events: none;
}

.garden-canvas,
.hero-fallback-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.garden-canvas {
  z-index: 1;
  pointer-events: none;
}

.hero-fallback-image {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.7;
  filter: saturate(0.82) contrast(1.03);
  transition: opacity 400ms ease;
}

.hero-media[data-garden-ready="true"] .hero-fallback-image {
  opacity: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  min-height: 700px;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.hero-copy {
  max-width: 47rem;
}

.hero-copy h1 {
  max-width: 8ch;
  margin-bottom: 1.8rem;
  font-size: clamp(3.5rem, 7vw, 6rem);
  line-height: 0.9;
}

.hero-copy h1 em {
  display: block;
  color: var(--acid);
}

.hero-lede {
  max-width: 34rem;
  margin-bottom: 2rem;
  color: rgba(251, 250, 242, 0.82);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.45;
}

.field-note {
  align-self: end;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--acid);
  transform: rotate(1.5deg);
}

.field-note-top {
  display: flex;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  color: var(--forest);
  border-bottom: 1px solid var(--line);
}

.field-note-index {
  color: var(--clay);
}

.field-note-image {
  height: 11.5rem;
  overflow: hidden;
}

.field-note-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.field-note-body {
  padding: 1.2rem 1.3rem 1.4rem;
}

.field-note-body .mono-label {
  color: var(--clay);
}

.field-note-body h2 {
  max-width: none;
  margin: 0.55rem 0 0.85rem;
  color: var(--forest);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 0.95;
}

.field-note-body p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.hero-stamp {
  position: absolute;
  right: 1.8rem;
  bottom: 1.5rem;
  left: 1.8rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line-light);
  color: rgba(251, 250, 242, 0.72);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-stamp span {
  padding-top: 0.7rem;
}

.proof-strip {
  color: var(--paper);
  background: var(--forest);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.proof-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  min-height: 7.2rem;
  padding: 1.5rem 1.5rem 1.5rem 0;
  border-right: 1px solid var(--line-light);
}

.proof-item + .proof-item {
  padding-left: 1.5rem;
}

.proof-item:last-child {
  border-right: 0;
}

.proof-number {
  color: var(--acid);
}

.proof-item div {
  display: grid;
  gap: 0.35rem;
}

.proof-item strong {
  font-size: 1.05rem;
}

.proof-item div span:last-child {
  color: rgba(251, 250, 242, 0.63);
  font-size: 0.82rem;
}

.section-heading {
  margin-bottom: 4rem;
}

.section-heading-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: clamp(3rem, 9vw, 11rem);
  align-items: end;
}

.section-heading-split h2 {
  margin-bottom: 0;
}

.section-intro {
  max-width: 26rem;
  color: var(--muted);
}

.section-intro p {
  margin-bottom: 1.5rem;
}

.department-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
}

.department-card {
  position: relative;
  grid-column: span 1;
  min-width: 0;
  color: var(--ink);
}

.department-card-large {
  grid-column: span 2;
}

.department-card:nth-child(6) {
  grid-column: span 2;
}

/* The large card spans two rows, so six cards leave the last row two-thirds
   empty — which read as an unfinished grid rather than as negative space.
   The final card closes the row. 1 / -1 stays correct at the 1-column
   mobile breakpoint. */
.department-card:last-child {
  grid-column: 1 / -1;
}

.department-image {
  position: relative;
  inset: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--sage);
  border-radius: 1rem;
}

.department-image::after {
  position: absolute;
  inset: 0;
  background: rgba(13, 40, 22, 0.04);
  content: "";
}

.department-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.department-card:hover .department-image img {
  transform: scale(1.035);
}

.department-card-body {
  position: relative;
  min-height: 0;
  padding: 1.5rem 0.2rem 0.6rem;
}

.department-card-body .mono-label {
  color: var(--clay);
  font-size: 0.75rem;
  line-height: 1;
}

.department-card-body h3 {
  max-width: 13ch;
  margin: 0.75rem 0 0.65rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

.department-card-body p {
  max-width: 28rem;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.3;
}

.card-arrow {
  position: absolute;
  top: 1.35rem;
  right: 0.2rem;
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  color: var(--forest-deep);
  background: var(--acid);
  border-radius: 50%;
  font-weight: 700;
}

.ecosystem-section {
  color: var(--paper);
  background: var(--forest);
}

.ecosystem-grid {
  display: grid;
  grid-template-columns: minmax(17rem, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(3rem, 9vw, 10rem);
  align-items: center;
}

.ecosystem-art {
  position: relative;
  max-width: 36rem;
  aspect-ratio: 1;
  padding: 1rem;
  border: 1px solid var(--line-light);
}

/* Living garden explainer: one dedicated ecosystem asset, with the copy kept in HTML. */
.ecosystem-art {
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(211, 250, 153, 0.26);
  border-radius: 1rem 1rem 7rem 1rem;
  background:
    radial-gradient(circle at 68% 31%, rgba(211, 250, 153, 0.12), transparent 28%),
    linear-gradient(145deg, #0a2615 0%, #15391e 70%, #0b2a16 100%);
}

.ecosystem-art::before,
.ecosystem-art::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.ecosystem-art::before {
  inset: 0;
  opacity: 0.2;
  background-image: radial-gradient(rgba(251, 250, 242, 0.18) 0.6px, transparent 0.6px);
  background-size: 7px 7px;
  mix-blend-mode: screen;
}

.ecosystem-art::after {
  right: -15%;
  bottom: -30%;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(154, 214, 76, 0.13);
  filter: blur(42px);
}

.ecosystem-art-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.ecosystem-art-image {
  position: absolute;
  z-index: 0;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  opacity: 0.86;
  filter: saturate(0.9) contrast(1.06);
  transform: translate3d(0, 1.4rem, 0) scale(1.04);
  transition: opacity 850ms ease, transform 1100ms cubic-bezier(0.2, 0.75, 0.2, 1), filter 500ms ease;
}

/* The WebP remains the accessible/no-WebGL fallback. The canvas only takes over after
   Three.js has created a renderer successfully. */
.ecosystem-three-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 900ms ease;
}

.ecosystem-art-frame.ecosystem-three-ready .ecosystem-three-canvas {
  opacity: 1;
}

.ecosystem-art-frame.ecosystem-three-ready .ecosystem-art-image {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ecosystem-three-canvas {
    transition: none;
  }
}

.principle-list button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  width: 100%;
  padding: 0.9rem 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-light);
  cursor: pointer;
  transition: color 180ms ease, padding 220ms ease;
}

.principle-list button:first-child {
  border-top: 0;
}

.principle-list button:hover,
.principle-list button[aria-pressed="true"] {
  padding-left: 0.45rem;
  color: var(--acid);
}

.principle-list button > span:first-child {
  color: var(--acid);
  font-family: var(--mono);
  font-size: 0.65rem;
}

.principle-list button strong {
  font-size: 0.95rem;
  font-weight: 500;
}

.principle-arrow {
  color: rgba(251, 250, 242, 0.5);
  font-size: 1rem;
  transition: transform 180ms ease, color 180ms ease;
}

.principle-list button:hover .principle-arrow,
.principle-list button[aria-pressed="true"] .principle-arrow {
  color: var(--acid);
  transform: translate(0.12rem, -0.12rem);
}

.ecosystem-copy h2 {
  max-width: 10ch;
  margin-bottom: 2rem;
}

.ecosystem-copy .lead {
  color: var(--acid);
}

.ecosystem-copy > p:not(.eyebrow):not(.lead) {
  max-width: 35rem;
  color: rgba(251, 250, 242, 0.7);
}

.principle-list {
  display: grid;
  gap: 0;
  max-width: 35rem;
  margin: 2.5rem 0;
  border-top: 1px solid var(--line-light);
}

.principle-list div {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-light);
}

.principle-list span {
  color: var(--acid);
  font-family: var(--mono);
  font-size: 0.65rem;
}

.principle-list strong {
  font-size: 0.95rem;
  font-weight: 500;
}

.shop-section {
  color: var(--paper);
  background: var(--forest-deep);
}

.section-heading-shop {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
  gap: clamp(3rem, 9vw, 10rem);
  align-items: end;
}

.section-heading-shop h2 {
  margin-bottom: 0;
}

.section-intro-light {
  color: rgba(251, 250, 242, 0.68);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line-light);
}

.filter-button {
  padding: 0.65rem 0.9rem;
  color: rgba(251, 250, 242, 0.65);
  background: transparent;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.filter-button:hover,
.filter-button.is-active {
  color: var(--forest-deep);
  background: var(--acid);
  border-color: var(--acid);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
}

.product-card {
  min-width: 0;
  color: var(--paper);
  background: transparent;
}

.product-card[hidden] {
  display: none;
}

.product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--eucalyptus);
  border-radius: 1rem;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.product-card:hover .product-image img {
  transform: scale(1.04);
}

.product-index {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.45rem;
  color: var(--forest-deep);
  background: var(--acid);
}

.product-card-body {
  min-height: 0;
  padding: 1.5rem 0.2rem 0.8rem;
}

.product-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.product-card-meta .mono-label {
  color: var(--acid);
  font-size: 0.75rem;
  line-height: 1;
}

.availability {
  color: rgba(251, 250, 242, 0.46);
  font-size: 0.75rem;
  line-height: 1;
  text-align: right;
}

.product-card h3 {
  max-width: 14ch;
  margin-bottom: 0.7rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

.product-card p {
  min-height: 4.2rem;
  margin-bottom: 1rem;
  color: rgba(251, 250, 242, 0.63);
  font-size: 1rem;
  line-height: 1.3;
}

.product-card a {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  color: var(--acid);
  font-size: 0.875rem;
  font-weight: 700;
}

.product-card a:hover {
  color: var(--paper);
}

.filter-empty {
  margin: 2rem 0 0;
  color: var(--acid);
}

/* Growing-condition chips — only on the plant ranges, where conditions are
   genuinely useful. Deliberately not forced onto pots/soil/eggs cards. */
.grow-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.grow-tags span {
  padding: 0.2rem 0.5rem;
  color: var(--sage);
  border: 1px solid var(--line-light);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.grow-section {
  background: var(--paper);
}

.grow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.grow-card {
  padding: 2rem 1.75rem 2.25rem;
  background: var(--paper);
}

.grow-card h3 {
  max-width: 20ch;
  margin-bottom: 0.9rem;
  font-size: 1.35rem;
}

.grow-card > p {
  margin-bottom: 1.1rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.grow-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.grow-list li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  line-height: 1.5;
}

.grow-list li::before {
  position: absolute;
  top: 0.6rem;
  left: 0;
  color: var(--clay);
  content: "—";
}

.finder-form {
  display: grid;
  gap: 1.9rem;
  padding: 1.5rem 1.3rem 1.6rem;
}

/* No rule between questions. A <legend> renders inside its fieldset's border
   box, so a border-top on .finder-q drew the line straight through the question
   text — three broken rules in a panel this small. Spacing separates the groups
   just as well and removes the defect with the decoration. */
.finder-q {
  padding: 0;
  margin: 0;
  border: 0;
}

.finder-q legend {
  padding: 0;
  margin-bottom: 0.75rem;
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 500;
}

.finder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.finder-chips label {
  position: relative;
}

/* The radio stays in the layout (not display:none) so it remains focusable
   and announced; it's visually clipped and the chip renders the state. */
.finder-chips input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.finder-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.5rem 0.85rem;
  color: rgba(251, 250, 242, 0.72);
  border: 1px solid var(--line-light);
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.finder-chips label:hover span {
  color: var(--paper);
  border-color: var(--acid);
}

.finder-chips input:checked + span {
  color: var(--forest-deep);
  background: var(--acid);
  border-color: var(--acid);
  font-weight: 700;
}

.finder-chips input:focus-visible + span {
  outline: 3px solid var(--acid);
  outline-offset: 3px;
}

.finder-chips input:checked:focus-visible + span {
  outline-color: var(--forest);
}

.finder-notes {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.finder-notes li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.05rem;
  border-top: 1px solid var(--line-light);
  color: rgba(251, 250, 242, 0.72);
  font-size: 0.88rem;
  line-height: 1.5;
}

.finder-notes li::before {
  position: absolute;
  left: 0;
  color: var(--acid);
  content: "—";
}

.faq-section {
  background: var(--cream);
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 9vw, 8rem);
  align-items: start;
}

.faq-copy h2 {
  max-width: 12ch;
}

.faq-copy .lead {
  margin: 1.2rem 0 1.4rem;
  color: var(--muted);
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.15rem 0;
  font-size: 1.02rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color 180ms ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  flex-shrink: 0;
  color: var(--clay);
  content: "+";
  font-family: var(--mono);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 180ms ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover {
  color: var(--clay);
}

.faq-answer {
  padding: 0 0 1.3rem;
  max-width: 58ch;
}

.faq-answer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
}

@media (max-width: 920px) {
  .grow-grid {
    grid-template-columns: 1fr;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }
}

.finder-section {
  background: var(--cream);
}

.finder-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1.2fr);
  gap: clamp(3rem, 9vw, 10rem);
  align-items: start;
}

.finder-copy h2 {
  max-width: 9ch;
}

.finder-copy .lead {
  color: var(--muted);
}

.mono-note {
  color: var(--muted);
  font-size: 0.88rem;
  font-style: italic;
}

.finder-panel {
  color: var(--paper);
  background: var(--forest);
}

.finder-panel-head {
  display: flex;
  justify-content: space-between;
  padding: 1.15rem 1.3rem;
  color: var(--acid);
  border-bottom: 1px solid var(--line-light);
}

.finder-panel > h3 {
  padding: 0 1.3rem;
  margin: 1.6rem 0 1.1rem;
  font-size: 1.75rem;
}

.finder-options {
  display: grid;
}

.finder-option {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.8rem;
  align-items: center;
  padding: 1rem 1.3rem;
  color: var(--paper);
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-light);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.finder-option:hover,
.finder-option:focus-visible {
  color: var(--forest-deep);
  background: var(--acid);
}

.finder-option-icon {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  color: var(--forest-deep);
  background: var(--gold);
  border-radius: 50%;
  font-size: 0.9rem;
}

.finder-option span:nth-child(2) {
  display: grid;
  gap: 0.22rem;
}

.finder-option strong {
  font-size: 0.95rem;
}

.finder-option small {
  color: rgba(251, 250, 242, 0.58);
  font-size: 0.72rem;
}

.finder-option:hover small,
.finder-option:focus-visible small {
  color: rgba(13, 40, 22, 0.7);
}

.finder-result {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem 1.3rem 1.75rem;
  background: var(--forest-deep);
  border-top: 1px solid var(--line-light);
}

.finder-result h3 {
  max-width: 15ch;
  margin: 0.5rem 0 0.7rem;
  color: var(--acid);
  font-size: 2rem;
}

.finder-result p {
  max-width: 30rem;
  margin-bottom: 0;
  color: rgba(251, 250, 242, 0.7);
  font-size: 0.88rem;
}

.finder-reset {
  padding: 0;
  color: var(--paper);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.landscape-section {
  background: var(--paper);
}

.landscape-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
  gap: clamp(3rem, 10vw, 11rem);
  align-items: center;
}

.landscape-image-wrap {
  position: relative;
}

.landscape-image {
  position: relative;
  aspect-ratio: 0.95;
  overflow: hidden;
  background: var(--sage);
  border: 1px solid var(--forest);
}

.landscape-image::after {
  position: absolute;
  inset: 0;
  background: rgba(21, 57, 30, 0.1);
  content: "";
}

.landscape-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-note {
  position: absolute;
  right: -1.5rem;
  bottom: 1.6rem;
  display: grid;
  gap: 0.5rem;
  min-width: 11rem;
  padding: 0.9rem;
  color: var(--paper);
  background: var(--forest);
  border: 1px solid var(--acid);
}

.image-note .mono-label {
  color: var(--acid);
}

.landscape-copy h2 {
  margin-bottom: 2rem;
}

.landscape-copy > p:not(.eyebrow):not(.lead) {
  max-width: 34rem;
  color: var(--muted);
}

.landscape-services {
  display: grid;
  /* min() lets the track shrink below 15rem on narrow screens — without it
     auto-fit holds a 2-column floor and forces horizontal scroll under 504px. */
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1.5rem;
  max-width: 34rem;
  margin: 2rem 0;
}

.landscape-service {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.landscape-service .mono-label {
  color: var(--clay);
}

.landscape-service h3 {
  margin: 0.5rem 0 0.4rem;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.landscape-service p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.landscape-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.button-ghost-dark {
  color: var(--forest);
  background: transparent;
  border-color: var(--forest);
}

.button-ghost-dark:hover {
  color: var(--paper);
  background: var(--forest);
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 2rem 0;
}

.service-tags span {
  padding: 0.5rem 0.7rem;
  color: var(--forest);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gallery-section {
  background: var(--cream);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 16rem 16rem;
  gap: 1px;
  background: var(--line);
}

.gallery-tile {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--sage);
}

.gallery-tile-tall {
  grid-row: span 2;
}

.gallery-tile-wide {
  grid-column: span 2;
}

.gallery-tile::after {
  position: absolute;
  inset: 0;
  background: rgba(13, 40, 22, 0.14);
  content: "";
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}

.gallery-tile:hover img {
  transform: scale(1.04);
}

.gallery-tile figcaption {
  position: absolute;
  z-index: 1;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  color: var(--paper);
}

.gallery-tile figcaption .mono-label {
  color: var(--acid);
}

.gallery-tile figcaption span:last-child {
  font-size: 0.76rem;
  font-weight: 700;
  text-align: right;
}

.product-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
}

.product-card-ask {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 0;
  color: rgba(251, 250, 242, 0.62);
  background: none;
  border: 0;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}

.product-card-ask span {
  border-bottom: 1px solid rgba(251, 250, 242, 0.3);
  padding-bottom: 0.15rem;
}

/* The card link sits 7.2px from the "Ask about this" button. At ~19px tall it
   was both a mis-tap risk on touch and visually mismatched against the 44px
   button beside it. */
.product-card-actions a {
  min-height: 2.75rem;
  align-items: center;
}

.product-card-ask:hover,
.product-card-ask:focus-visible {
  color: var(--acid);
  border-bottom-color: currentColor;
}

.enquire-section {
  background: var(--paper);
}

.enquire-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(20rem, 1.2fr);
  gap: clamp(3rem, 9vw, 10rem);
  align-items: start;
}

.enquire-copy h2 {
  max-width: 11ch;
}

.enquire-copy .lead {
  margin-top: 1.2rem;
  max-width: 34ch;
  color: var(--muted);
}

.enquire-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem 1.5rem;
}

.enquire-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.enquire-field-wide {
  grid-column: 1 / -1;
}

.enquire-field label {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
}

.enquire-field label .mono-note {
  font-size: 0.84rem;
  font-style: normal;
  color: var(--muted);
  opacity: 0.75;
}

.enquire-field input,
.enquire-field textarea {
  width: 100%;
  padding: 0.7rem 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: 0.95rem;
  transition: border-color 180ms ease;
}

.enquire-field textarea {
  resize: vertical;
  min-height: 3.4rem;
}

.enquire-field input:focus-visible,
.enquire-field textarea:focus-visible {
  outline: 3px solid var(--clay);
  outline-offset: 3px;
  border-bottom-color: var(--clay);
}

/* Error styling is driven by aria-invalid, set by JS after submit — never on
   first paint. The :invalid:not(:placeholder-shown) idiom silently always
   matches when no placeholder attribute exists, which flagged every empty
   required field as an error before the user had typed anything. */
.enquire-field input[aria-invalid="true"],
.enquire-field textarea[aria-invalid="true"] {
  border-bottom: 2px solid var(--error);
}

.enquire-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
}

.enquire-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.5rem;
}

.enquire-note {
  color: var(--muted);
  font-size: 0.85rem;
}

.enquire-note a {
  border-bottom: 1px solid currentColor;
}

.enquire-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.85rem 1rem;
  color: var(--forest);
  background: var(--sage);
  border-radius: 0.4rem;
  font-size: 0.88rem;
}

.enquire-status.is-error {
  color: var(--paper);
  background: var(--error);
}

/* An author `display` beats the user-agent `[hidden]{display:none}` rule, so
   any element given a display value needs its own [hidden] guard. */
.finder-result[hidden] {
  display: none;
}

/* Stops the label swap to "Sending…" collapsing the button and yanking the
   adjacent phone-number note sideways mid-submit. */
#enquire-submit {
  min-width: 11rem;
}

.button:disabled,
.button[disabled] {
  opacity: 0.55;
  transform: none;
  cursor: progress;
  pointer-events: none;
}

@media (max-width: 640px) {
  .enquire-form {
    grid-template-columns: 1fr;
  }
}

.visit-section {
  color: var(--paper);
  background: var(--forest);
}

.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.8fr);
  gap: clamp(3rem, 10vw, 11rem);
  align-items: center;
}

.visit-copy h2 {
  max-width: 8ch;
  margin-bottom: 2rem;
}

.visit-copy > p:not(.eyebrow) {
  max-width: 31rem;
  color: rgba(251, 250, 242, 0.72);
  font-size: 1.1rem;
}

.visit-card {
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--acid);
}

.visit-card-top {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  color: var(--forest);
  border-bottom: 1px solid var(--line);
}

.visit-pulse {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--leaf);
  border-radius: 50%;
}

.visit-card address {
  padding: 1.6rem 1.2rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1.05;
}

.hours-list {
  border-top: 1px solid var(--line);
}

.hours-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
}

.hours-list strong {
  font-weight: 700;
}

.visit-card-note {
  padding: 1.2rem;
  background: var(--acid);
}

.visit-card-note .mono-label {
  color: var(--clay);
}

.visit-card-note p {
  max-width: 23rem;
  margin: 0.5rem 0 0;
  font-size: 0.84rem;
}

.site-footer {
  color: var(--paper);
  background: var(--forest-deep);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.65fr 0.65fr;
  gap: 4rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.brand-footer {
  width: 12rem;
  margin-bottom: 1.3rem;
}

.footer-brand > p {
  max-width: 15rem;
  color: rgba(251, 250, 242, 0.62);
  font-size: 0.86rem;
}

.footer-brand .text-link {
  margin-top: 1rem;
  font-size: 0.75rem;
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  font-size: 0.8rem;
}

.footer-column .mono-label {
  margin-bottom: 0.45rem;
  color: var(--acid);
}

.footer-column a {
  color: rgba(251, 250, 242, 0.72);
}

.footer-column a:hover {
  color: var(--acid);
}

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  /* 0.46 measured 4.27:1 on --forest-deep at 0.8rem — under the 4.5:1 floor for
     normal text, so the copyright and studio credit lines were failing AA.
     0.52 clears it at 5.04:1 and is still visibly the quietest row on the page. */
  color: rgba(251, 250, 242, 0.52);
  border-top: 1px solid var(--line-light);
  font-size: 0.8rem;
}

.footer-base a {
  color: var(--acid);
}

.toast {
  position: fixed;
  z-index: 50;
  right: 1.25rem;
  bottom: 1.25rem;
  max-width: min(24rem, calc(100% - 2.5rem));
  padding: 0.85rem 1rem;
  color: var(--forest-deep);
  background: var(--acid);
  border: 1px solid var(--forest);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 1120px) {
  .header-context {
    display: none;
  }

  .desktop-nav {
    gap: 1rem;
  }

  .hero-grid {
    gap: 3rem;
  }
}

@media (max-width: 920px) {
  :root {
    --section-space: 6rem;
  }

  .desktop-nav,
  .header-actions .button {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
  }

  .hero-grid,
  .ecosystem-grid,
  .finder-grid,
  .landscape-grid,
  .enquire-grid,
  .visit-grid {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    min-height: auto;
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .hero-copy {
    max-width: 41rem;
  }

  .field-note {
    width: min(100%, 23rem);
    justify-self: end;
  }

  .department-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .department-card,
  .department-card-large,
  .department-card:nth-child(6) {
    grid-column: span 1;
    grid-row: auto;
  }

  .ecosystem-art {
    max-width: 32rem;
  }

  .ecosystem-copy {
    max-width: 43rem;
  }

  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 18rem 18rem 18rem;
  }

  .gallery-tile-tall {
    grid-row: span 2;
  }

  .gallery-tile-wide {
    grid-column: span 1;
  }

  .visit-card {
    max-width: 34rem;
  }

  .footer-grid {
    gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  :root {
    --section-space: 4.8rem;
  }

  .container {
    width: min(calc(100% - 2rem), var(--container));
  }

  .announcement-inner {
    min-height: 2.3rem;
  }

  .announcement-inner p {
    max-width: 16rem;
  }

  .announcement-inner a {
    text-align: right;
  }

  .header-shell {
    min-height: 4.5rem;
  }

  .brand {
    width: 8.9rem;
  }

  .brand img {
    max-height: 3.3rem;
  }

  .hero-section,
  .hero-grid {
    min-height: 0;
  }

  .hero-grid {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }

  .hero-copy h1 {
    font-size: clamp(3.25rem, 14vw, 4.5rem);
  }

  .hero-lede {
    font-size: 1rem;
  }

  .hero-stamp {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(calc(100% - 2rem), var(--container));
    margin: -1.5rem auto 0;
    padding-bottom: 1.2rem;
  }

  .hero-stamp span {
    max-width: 6.5rem;
  }

  .section-heading,
  .section-heading-shop {
    display: block;
    margin-bottom: 2.7rem;
  }

  h2 {
    font-size: 2rem;
    line-height: 1.1;
  }

  .section-intro {
    margin-top: 2rem;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }

  .proof-item,
  .proof-item + .proof-item {
    min-height: auto;
    padding: 1.15rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-light);
  }

  .proof-item:last-child {
    border-bottom: 0;
  }

  .department-grid,
  .product-grid {
    grid-template-columns: 1fr;
  }

  .department-card-body {
    padding-top: 1.25rem;
  }

  .product-image {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .product-card-body {
    min-height: auto;
  }

  .product-card p {
    min-height: 0;
  }

  .finder-option {
    grid-template-columns: 1.8rem 1fr auto;
    padding: 0.95rem 1rem;
  }

  .finder-panel-head,
  .finder-panel > h3 {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .finder-result {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .landscape-image {
    aspect-ratio: 0.9;
  }

  .image-note {
    right: 0.75rem;
    bottom: 0.75rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 17rem);
  }

  .gallery-tile-tall,
  .gallery-tile-wide {
    grid-row: span 1;
    grid-column: span 1;
  }

  .visit-card address {
    font-size: 1.7rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-base {
    align-items: flex-start;
    flex-direction: column;
    padding: 1rem 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Ecosystem composition: the living garden is the visual anchor, not a card. */
.ecosystem-section {
  padding-block: clamp(7rem, 11vw, 12rem);
}

.ecosystem-grid {
  grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}

.ecosystem-art {
  width: 100%;
  max-width: none;
  min-height: clamp(36rem, 49vw, 52rem);
  aspect-ratio: 1.08 / 1;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ecosystem-art::before {
  inset: 4% 0 2%;
  z-index: 0;
  opacity: 0.34;
  background: radial-gradient(circle at 48% 56%, rgba(211, 250, 153, 0.12), transparent 46%);
  mix-blend-mode: screen;
}

.ecosystem-art::after {
  right: 7%;
  bottom: 1%;
  z-index: 0;
  width: 46%;
  opacity: 0.42;
  background: radial-gradient(circle, rgba(154, 214, 76, 0.2), transparent 70%);
  filter: blur(46px);
}

/* The art frame bleeds 8% past its parent on purpose (inset: -7% -8% below).
   At >=1024px the container's side margins absorb that; below it the container
   is full-bleed, so the overflow pushed the whole page sideways — 414px wide at
   a 375px viewport. `clip` contains it at the section edge while keeping the
   effect where there is room. `clip` not `hidden`: hidden would create a scroll
   container and break the sticky header and scroll-margin-top anchoring. */
.ecosystem-section {
  overflow-x: clip;
}

.ecosystem-art-frame {
  inset: -7% -8%;
  overflow: visible;
  background: transparent;
}

.ecosystem-art-frame::before,
.ecosystem-art-frame::after {
  display: none;
}

.ecosystem-art-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.94;
  filter: saturate(0.92) contrast(1.05);
  transform: translate3d(0, 1rem, 0) scale(1.01);
}

.ecosystem-section.is-in-view .ecosystem-art-image {
  transform: translate3d(0, 0, 0) scale(1);
}

.ecosystem-copy {
  width: 100%;
  max-width: 31rem;
  justify-self: end;
}

.ecosystem-copy h2 {
  max-width: 12ch;
  margin-bottom: 1.8rem;
  color: var(--paper);
  font-size: clamp(2.8rem, 4.4vw, 5rem);
  line-height: 0.98;
}

.ecosystem-copy h2 em {
  color: var(--acid);
}

.ecosystem-copy .lead {
  max-width: 29rem;
  color: var(--paper);
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.45;
}

.ecosystem-copy > p:not(.eyebrow):not(.lead) {
  max-width: 29rem;
  color: rgba(251, 250, 242, 0.84);
  line-height: 1.6;
}

.principle-list {
  max-width: none;
  margin-block: 2.4rem;
  border-top-color: rgba(251, 250, 242, 0.32);
}

.principle-list button {
  min-height: 3.7rem;
  color: var(--paper);
  border-bottom-color: rgba(251, 250, 242, 0.32);
}

.principle-list button strong {
  color: var(--paper);
  font-size: clamp(0.96rem, 1.2vw, 1.08rem);
}

.principle-arrow {
  color: rgba(251, 250, 242, 0.78);
}

@media (max-width: 920px) {
  .ecosystem-section {
    padding-block: 6rem;
  }

  .ecosystem-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .ecosystem-art {
    min-height: clamp(30rem, 82vw, 43rem);
    aspect-ratio: 1.12 / 1;
  }

  .ecosystem-copy {
    max-width: 43rem;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .ecosystem-section {
    padding-block: 4.8rem;
  }

  .ecosystem-art {
    min-height: 25rem;
    aspect-ratio: 1 / 1.05;
  }

  .ecosystem-art-frame {
    inset: -3% -4%;
  }

  .ecosystem-copy h2 {
    font-size: clamp(2.6rem, 12vw, 4rem);
  }
}

/* ==========================================================================
   SOCIAL PROOF, LOCAL AUTHORITY, LANDSCAPING PATHWAY
   Added 2026-08-16. Kept as one block at the end rather than interleaved into
   the nine existing media queries above, so the three new areas can be read,
   reviewed or removed as a unit.
   ========================================================================== */

/* `hidden` has to win here: .enquire-field and .landscape-project both set a
   display value, and a UA-sheet [hidden] { display: none } loses to ANY author
   class rule regardless of specificity. Without this the landscaping-only
   fields and the disabled project panel would render for everyone.

   .enquire-field[hidden] must be listed in its own right, not covered by
   [data-landscaping-field]: #enquire-field-item is the field hidden in the
   OTHER direction (visible by default, hidden in landscaping mode), so it
   carries no data-landscaping-field and was still painting — a stray "What are
   you after" input sitting above the service radios. */
.enquire-field[hidden],
[data-landscaping-field][hidden],
.local-roots[hidden],
.landscape-project[hidden] {
  display: none;
}

/* --- Reviews ------------------------------------------------------------- */

/* A dark band between two light sections. It reads as a pause rather than more
   page, which is the point: trust should land as a beat, not as extra length. */
.reviews-section {
  color: var(--paper);
  background: var(--forest);
  padding-block: calc(var(--section-space) * 0.7);
}

.reviews-section h2 em {
  color: var(--acid);
}

.reviews-section :focus-visible {
  outline-color: var(--acid);
}

.reviews-lead {
  margin: 1.4rem 0 0;
  max-width: 46ch;
  color: rgba(251, 250, 242, 0.72);
  font-size: 1.02rem;
}

/* --- Reviews marquee -----------------------------------------------------

   Ported from thetasteofvillage.agniora.com: a continuous drift with the cards
   stripped of all chrome — a hairline rule above each quote and nothing else.
   No panels, no borders, no controls.

   Two deliberate departures from that build:

   1. Typography. That site sets its quotes in italic Cormorant Garamond. This
      one loads DM Sans and Space Mono only, so an italic here would be a
      synthesised oblique. The layout language is carried across; the type stays
      native to this site.

   2. Reachability. There, the track is `overflow: hidden` with the animation
      behind `prefers-reduced-motion: no-preference` — so a visitor who asks for
      reduced motion gets a frozen row with the later reviews permanently
      offscreen and no way to reach them. Here the same media query hands back a
      scrollable track instead, so every review stays reachable either way.
   ------------------------------------------------------------------------ */

.reviews-slider {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  overflow: hidden;
}

/* Cards dissolve into the section rather than stopping at a hard edge. */
.reviews-slider::before,
.reviews-slider::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: clamp(2.5rem, 7vw, 6rem);
  pointer-events: none;
}

.reviews-slider::before {
  left: 0;
  background: linear-gradient(90deg, var(--forest), transparent);
}

.reviews-slider::after {
  right: 0;
  background: linear-gradient(-90deg, var(--forest), transparent);
}

.reviews-slider:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 6px;
}

.reviews-track {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  width: max-content;
}

.reviews-dup {
  display: contents;
}

/* The clone only exists once script.js has made it, so the loop is gated on
   that. Ten cards rather than the reference's six, so the duration is scaled to
   keep the drift at the same speed rather than the same lap time. */
@media (prefers-reduced-motion: no-preference) {
  .reviews-slider.is-looping .reviews-track {
    animation: reviewsLoop 75s linear infinite;
  }

  .reviews-slider.is-looping:hover .reviews-track,
  .reviews-slider.is-looping:focus-within .reviews-track {
    animation-play-state: paused;
  }

  @keyframes reviewsLoop {
    to {
      transform: translateX(calc(-50% - clamp(0.75rem, 1.5vw, 1.5rem)));
    }
  }
}

/* No clone, or motion turned down: a plain scrollable row. Without this the
   overflow above would simply hide every review after the third. */
.reviews-slider:not(.is-looping),
.reviews-slider.is-static {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.reviews-slider:not(.is-looping)::-webkit-scrollbar,
.reviews-slider.is-static::-webkit-scrollbar {
  display: none;
}

.reviews-slider:not(.is-looping) .review-card,
.reviews-slider.is-static .review-card {
  scroll-snap-align: start;
}

.review-card {
  flex-shrink: 0;
  width: clamp(17rem, 26vw, 25rem);
  margin: 0;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line-light);
  transition: border-color 500ms ease;
}

.review-card:hover {
  border-top-color: var(--leaf);
}

.review-stars {
  color: var(--leaf);
  font-size: 0.9rem;
  letter-spacing: 0.2em;
}

.review-card p {
  margin: 1rem 0 0;
  color: var(--paper);
  font-size: clamp(1.02rem, 1.3vw, 1.15rem);
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.review-card footer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: 1.3rem;
}

.review-card footer b {
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 500;
}

.review-card footer span {
  color: rgba(251, 250, 242, 0.62);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The aggregate reads as one sentence at the foot of the section rather than as
   a scoreboard at the top. */
.reviews-aggregate {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.1rem;
  align-items: baseline;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  color: rgba(251, 250, 242, 0.72);
  font-size: 0.95rem;
}

.reviews-aggregate b {
  color: var(--paper);
  font-weight: 500;
}

.reviews-aggregate-link {
  margin-left: auto;
  color: var(--paper);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reviews-aggregate-link:hover {
  color: var(--acid);
}

/* Two stacked star rows, the filled one clipped to the average. Kept from the
   previous build rather than the reference's half-star gradient: this shows the
   true 4.8 instead of rounding to the nearest half. */
.reviews-stars {
  position: relative;
  display: inline-block;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  line-height: 1;
}

.reviews-stars-base {
  color: rgba(251, 250, 242, 0.26);
}

.reviews-stars-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  overflow: hidden;
  width: 100%;
  color: var(--leaf);
  white-space: nowrap;
}

.reviews-stars[data-rating="30"] .reviews-stars-fill { width: 60%; }
.reviews-stars[data-rating="31"] .reviews-stars-fill { width: 62%; }
.reviews-stars[data-rating="32"] .reviews-stars-fill { width: 64%; }
.reviews-stars[data-rating="33"] .reviews-stars-fill { width: 66%; }
.reviews-stars[data-rating="34"] .reviews-stars-fill { width: 68%; }
.reviews-stars[data-rating="35"] .reviews-stars-fill { width: 70%; }
.reviews-stars[data-rating="36"] .reviews-stars-fill { width: 72%; }
.reviews-stars[data-rating="37"] .reviews-stars-fill { width: 74%; }
.reviews-stars[data-rating="38"] .reviews-stars-fill { width: 76%; }
.reviews-stars[data-rating="39"] .reviews-stars-fill { width: 78%; }
.reviews-stars[data-rating="40"] .reviews-stars-fill { width: 80%; }
.reviews-stars[data-rating="41"] .reviews-stars-fill { width: 82%; }
.reviews-stars[data-rating="42"] .reviews-stars-fill { width: 84%; }
.reviews-stars[data-rating="43"] .reviews-stars-fill { width: 86%; }
.reviews-stars[data-rating="44"] .reviews-stars-fill { width: 88%; }
.reviews-stars[data-rating="45"] .reviews-stars-fill { width: 90%; }
.reviews-stars[data-rating="46"] .reviews-stars-fill { width: 92%; }
.reviews-stars[data-rating="47"] .reviews-stars-fill { width: 94%; }
.reviews-stars[data-rating="48"] .reviews-stars-fill { width: 96%; }
.reviews-stars[data-rating="49"] .reviews-stars-fill { width: 98%; }
.reviews-stars[data-rating="50"] .reviews-stars-fill { width: 100%; }

/* --- Local roots (authority) --------------------------------------------- */

/* Sits inside the growing-advice section rather than owning one, so the page
   gains trust without gaining a section. */
.local-roots {
  display: grid;
  grid-template-columns: minmax(11rem, 0.7fr) minmax(0, 2.3fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
}

.local-roots-head .mono-label {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--clay);
}

.local-roots-head h3 {
  margin: 0;
  max-width: 14ch;
}

.local-roots-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hairline rules instead of bullets or logos: quiet, and it keeps the strip
   reading as editorial rather than as a credentials wall. */
.local-roots-list li {
  padding: 0.15rem 1.4rem;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Editorial citation, not a badge. The source is named in running text at the
   same size as the statement it supports, linked and nothing more — no logo,
   no card, no "as seen in" rail. --clay measures 5.41:1 on paper. */
.local-roots-list li a {
  color: var(--clay);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.05rem;
  font-weight: 500;
}

.local-roots-list li a:hover {
  color: var(--forest);
}

/* --- Landscaping ladder --------------------------------------------------- */

/* Same hairline grid as .grow-grid on purpose — the four services should read
   as the same kind of object as the growing advice, not as a new component. */
.landscape-ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
}

.landscape-step {
  padding: clamp(1.5rem, 2.4vw, 2.1rem);
  background: var(--paper);
}

.landscape-step .proof-number {
  display: block;
  margin-bottom: 1rem;
  color: var(--clay);
}

.landscape-step h3 {
  margin: 0 0 0.6rem;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.15;
}

.landscape-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.landscape-note {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.landscape-note-item .mono-label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--clay);
}

.landscape-note-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.landscape-note-item .text-link {
  font-size: 0.8rem;
  vertical-align: baseline;
  background: none;
  border-width: 0 0 1px;
  padding: 0 0 0.1rem;
  cursor: pointer;
}

/* --- Landscaping project story (disabled until real material exists) ------ */

.landscape-project {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--line);
}

.landscape-project-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.landscape-project-shot {
  position: relative;
}

.landscape-project-shot .mono-label {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.3rem 0.6rem;
  color: var(--forest-deep);
  background: var(--acid);
  border-radius: 999px;
}

.landscape-project-shot img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1rem;
  background: var(--cream);
}

.landscape-project-copy .mono-label {
  display: block;
  margin-bottom: 0.8rem;
  color: var(--clay);
}

.landscape-project-steps {
  margin: 1.5rem 0 0;
}

.landscape-project-steps dt {
  color: var(--clay);
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.landscape-project-steps dd {
  margin: 0.35rem 0 1.1rem;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* --- Nursery customer to landscaping prompt ------------------------------- */

.finder-bigger {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-light);
  color: rgba(251, 250, 242, 0.72);
  font-size: 0.9rem;
  line-height: 1.55;
}

.finder-bigger strong {
  color: var(--paper);
}

.finder-bigger a {
  color: var(--acid);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1rem;
}

/* --- Landscaping enquiry fields ------------------------------------------- */

.enquire-choice {
  margin: 0;
  padding: 0;
  min-width: 0;
  border: 0;
}

.enquire-choice legend {
  padding: 0;
  margin-bottom: 0.7rem;
  color: var(--muted);
  font-size: 0.84rem;
}

.enquire-choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.enquire-choice-options label {
  position: relative;
}

/* Clipped, not display:none — the radio must stay focusable and announced. */
.enquire-choice-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.enquire-choice-options span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.enquire-choice-options label:hover span {
  border-color: var(--forest);
}

/* Checked state carries weight and a border change as well as colour, so it is
   not signalled by colour alone. */
.enquire-choice-options input:checked + span {
  color: var(--paper);
  background: var(--forest);
  border-color: var(--forest);
  font-weight: 700;
}

.enquire-choice-options input:focus-visible + span {
  outline: 3px solid var(--forest);
  outline-offset: 3px;
}

/* --clay, not --leaf. --leaf measures 1.66:1 on paper — the same reason this
   sheet already scopes it away from headings on light surfaces. A 2px rule at
   that contrast is not a quiet accent, it is an invisible one. */
.enquire-reassure {
  margin: 0.9rem 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--clay);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 920px) {
  .local-roots {
    grid-template-columns: minmax(0, 1fr);
  }

  .landscape-ladder {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landscape-project {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .reviews-section {
    padding-block: 4.8rem;
  }

  /* One card per view with the next just showing, so the row still reads as a
     row rather than as a single quote. */
  .review-card {
    width: 78vw;
  }

  /* The link drops under the rating instead of being pushed to the far edge. */
  .reviews-aggregate-link {
    margin-left: 0;
  }

  .local-roots-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .landscape-ladder {
    grid-template-columns: minmax(0, 1fr);
  }

  .landscape-note {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .landscape-project-media {
    gap: 0.6rem;
  }

  .enquire-choice-options span {
    min-height: 2.9rem;
  }
}

/* The global reduced-motion block above kills transitions and animations, but
   not programmatic smooth scrolling — the slider would still glide. */
@media (prefers-reduced-motion: reduce) {
  .reviews-track {
    scroll-behavior: auto;
  }
}