/* ==========================================================================
   Jobson Garden — base styles
   Layout, components and type. Breakpoints live in responsive.css.
   Load order: tokens.css, main.css, responsive.css, animations.css.
   ========================================================================== */

/* ==========================================================================
   Jobson Garden — page styles
   Colour, type and spacing come from tokens.css. No hardcoded hex here
   except white/black overlays on photography.
   ========================================================================== */

/* --- Reset & base --------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden makes body a scroll container and breaks
     position: sticky for the header. */
  overflow-x: clip;
}

/* Belt and braces for phones: if anything ever pokes out sideways, the page
   still stays exactly the screen's width, so the fixed top bar and bottom
   menu keep their place. */
html { overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
figure { margin: 0; }
address { font-style: normal; }
table { border-collapse: collapse; }

h1, h2, h3 {
  font-family: var(--font-display);
  /* Comfortaa is geometric and open — 400 reads thin at display sizes. */
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--primary); color: var(--primary-foreground);
  padding: var(--space-3) var(--space-4); z-index: 100;
}
.skip:focus { left: var(--space-4); top: var(--space-4); }

/* Accessibility & SEO utility for screen readers and search engines */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Type helpers --------------------------------------------------------- */

/* DM Mono carries the technical register: labels, indices, small print.
   Never body copy — mono at paragraph length costs reading speed. */
.eyebrow, .fineprint, .compare, .step__num {
  font-family: var(--font-mono);
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--primary);          /* 7.5:1 — --leaf would fail at this size */
  margin-bottom: var(--space-4);
}
.eyebrow--light { color: var(--accent); }

.section { padding-block: var(--section-y); }
.section--tint {
  background: var(--secondary);
  position: relative;
  border-start-start-radius: 2.5rem;
  border-start-end-radius: 2.5rem;
}

.section__head { max-width: 44rem; margin-bottom: var(--space-16); }
.section__head--centre { margin-inline: auto; text-align: center; }

.section__title { font-size: clamp(2rem, 1.2rem + 3vw, var(--text-3xl)); color: var(--primary); }
.section__title em { font-style: italic; color: var(--leaf); }

.section__lede {
  margin-top: var(--space-6);
  max-width: 36rem;
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--muted-foreground);
}
.section__head--centre .section__lede { margin-inline: auto; }

.fineprint {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  color: var(--muted-foreground);
  max-width: 34rem;
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500;
  transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn--large {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
  font-weight: 600;
}
.btn:hover { transform: translateY(-1px); }
.btn--solid { background: var(--primary); color: var(--primary-foreground); }
.btn--pill  { background: var(--primary); color: var(--primary-foreground); }
.btn--ghost { border: 1px solid rgba(255,255,255,.45); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--primary);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.link-arrow::after { content: "→"; transition: transform var(--duration) var(--ease); }
.link-arrow:hover::after { transform: translateX(3px); }

/* --- Unified Floating Pill Header (Brand Colors & Reference Design) ------ */

.site-header {
  position: fixed;
  top: 1.1rem;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
  padding-inline: var(--gutter);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.site-header__inner {
  pointer-events: auto;
  max-width: 1080px;
  width: 100%;
  box-sizing: border-box;
  height: 4.25rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0 1.4rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(44, 95, 56, 0.16);
  box-shadow: 0 10px 30px -5px rgba(26, 35, 27, 0.08), 0 4px 12px rgba(26, 35, 27, 0.04);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header__inner {
    background: rgba(255, 255, 255, 0.98);
  }
}

/* Brand Wordmark / Logo */
.brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 150px;
  width: 150px;
  text-decoration: none;
}
.brand__logo {
  width: auto;
  height: 3.25rem; /* Increased size: prominent, clear, and perfectly legible */
  max-height: 52px;
  display: block;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.brand:hover .brand__logo {
  opacity: 0.88;
  transform: scale(0.99);
}

/* Primary Navigation Links (Center) */
.site-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  margin-inline: auto;
}
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: inline-block;
  padding: 0.45rem 1.05rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  border-radius: 999px;
  letter-spacing: 0.01em;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.site-nav a:hover {
  color: var(--leaf);
  background: rgba(44, 95, 56, 0.06);
}
.site-nav a.is-current,
.site-nav a[aria-current="page"] {
  color: #ffffff;
  font-weight: 600;
  background: var(--primary);
  box-shadow: 0 2px 8px rgba(44, 95, 56, 0.22);
}

/* Right-side Action Squircles */
.site-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  flex: 0 0 150px;
  width: 150px;
}

.nav-squircle-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(44, 95, 56, 0.07);
  border: 1px solid rgba(44, 95, 56, 0.14);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-squircle-btn:hover {
  background: rgba(44, 95, 56, 0.14);
  border-color: rgba(44, 95, 56, 0.25);
  transform: translateY(-1px);
}
.nav-squircle-btn:active {
  transform: translateY(0);
}

/* Language toggle button (Bilingual on blog) */
.lang-toggle.nav-squircle-btn {
  width: auto;
  height: 38px;
  padding-inline: 0.65rem;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
}
.lang-toggle__globe {
  color: var(--primary);
}
.lang-toggle__opt {
  color: var(--muted-foreground);
}
.lang-toggle__opt.is-active,
[data-lang="en"] .lang-toggle__opt[data-lang-opt="en"],
[data-lang="ml"] .lang-toggle__opt[data-lang-opt="ml"] {
  color: var(--primary);
  font-weight: 700;
}

/* Spacing on inner pages so floating header never obscures content */
body:not(.page-index) #main {
  padding-top: 5.75rem;
}
body.page-about #main,
body.page-services #main,
body.page-blog #main {
  padding-top: 0;
}
/* The header is fixed and sits over the cover, so the cover's own copy is
   pushed clear of it rather than the page being padded down — the point of a
   cover is that the photograph runs under the bar. */
.page-cover__content {
  padding-top: 4.75rem;
}

/* --- Bottom navigation ----------------------------------------------------
   Phones only. A floating pill in the thumb arc carrying every page plus
   WhatsApp, icons alone.

   It is a pill with a margin rather than a slab pinned to the screen edge, so
   the photography still runs behind and past it — this site is built on
   full-bleed imagery and a full-height scrolling hero, and an opaque
   edge-to-edge bar would cut the bottom off every one of them.

   The active item is marked by a short rule under the icon, not by a filled
   pill: at 22px, with no labels, a background swatch closes up the space
   between neighbouring icons and the row stops reading as a row.
   -------------------------------------------------------------------------- */

.bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
  z-index: 100;
  width: calc(100% - 2 * var(--gutter));
  max-width: 26rem;
  display: none;             /* shown at the mobile breakpoint */

  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(26, 35, 27, 0.08);
  border-radius: var(--radius-pill);
  box-shadow:
    0 2px 8px rgba(26, 35, 27, 0.06),
    0 14px 34px -10px rgba(26, 35, 27, 0.24);
}

.bottom-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.bottom-nav__item {
  /* Equal shares, so the row stays evenly spaced whatever the item count. */
  flex: 1 1 0;
  min-width: 0;
}

.bottom-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 56px tall: comfortably over the 44px minimum without making the bar look
     like a tray. */
  height: 56px;
  color: var(--muted-foreground);
  transition: color 0.2s var(--ease);
}
.bottom-nav__link svg {
  width: 22px;
  height: 22px;
  display: block;
}
.bottom-nav__link:hover { color: var(--primary); }
.bottom-nav__link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -4px;
  border-radius: var(--radius-pill);
}

.bottom-nav__link.is-current { color: var(--primary); }

/* The underline. Drawn on every item and scaled to nothing, so appearing and
   disappearing is one transform rather than a layout change. */
.bottom-nav__marker {
  position: absolute;
  bottom: 9px;
  left: 50%;
  width: 18px;
  height: 2px;
  margin-left: -9px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 0.25s var(--ease);
}
.bottom-nav__link.is-current .bottom-nav__marker { transform: scaleX(1); }

/* WhatsApp is an action, not a page, so it never takes the current-page
   marker — and it carries the brand green to say so. */
.bottom-nav__link--wa { color: #1FA855; }
.bottom-nav__link--wa:hover { color: #17843F; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottom-nav { background: rgba(255, 255, 255, 0.97); }
}

/* --- Page cover -----------------------------------------------------------
   The photographic banner on About, Services and Garden Tips. Height comes
   from --cover-h so the three cannot drift apart; the settle-zoom and the
   staggered text reveal come from motion.css, which all three now load.
   -------------------------------------------------------------------------- */

.page-cover {
  position: relative;
  width: 100%;
  height: var(--cover-h);
  overflow: hidden;
  background: var(--primary);
}
.page-cover__media {
  position: relative;
  width: 100%;
  height: 100%;
}
.page-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-cover__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 35, 27, 0.38) 0%, rgba(26, 35, 27, 0.68) 100%);
}
.page-cover__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  padding-inline: var(--gutter);
}
.page-cover__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.65rem;
}
.page-cover__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* The optional upper line is a kicker, not a second heading — it reads as
   the quieter half of one title. */
.page-cover__title-top {
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.92;
}
.page-cover__title-main {
  font-size: clamp(2.5rem, 6vw, 5rem);
}
.page-cover__lede {
  max-width: 34rem;
  margin: 1rem 0 0;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

/* --- CTA band -------------------------------------------------------------- */

.cta-band { background: var(--primary); color: var(--primary-foreground); padding-block: var(--space-24); }
.cta-band__inner { display: grid; gap: var(--space-6); justify-items: start; max-width: 44rem; }
.cta-band__title { font-size: clamp(1.75rem, 1.2rem + 2.4vw, var(--text-2xl)); color: #fff; }
.cta-band p { color: rgba(255,255,255,.82); line-height: var(--leading-loose); }
.btn--accent { background: var(--accent); color: var(--accent-foreground); }


/* --- Light Theme Hero with Scroll Canvas & 3-Phase Story ------------------ */


/* Hero scroll container: 300vh gives 100vh of scrub per story phase */
.hero-scroll {
  position: relative;
  width: 100%;
  height: 300vh;
  background: var(--secondary);
}

/* Sticky viewport pin */
.hero-scroll__pin {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: center;
  will-change: transform;
}

/* Canvas background wrap */
.hero-scroll__canvas-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.hero-scroll__canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Soft light-theme daylight vignette */
.hero-scroll__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Light enough to let the orchard read. The card does its own lifting
     with backdrop-filter, so the scrim only has to soften, not hide. */
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0) 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0.18) 100%);
}

/* Stage wrapper */
.hero-scroll__wrap {
  position: relative;
  z-index: 5;
  width: 100%;
  padding-top: clamp(4rem, 8vh, 5rem);
}

/* Left-side transparent frosted glass card */
.hero-scroll__card {
  position: relative;
  z-index: 5;
  max-width: 42rem;
  width: 100%;
  padding: clamp(2.25rem, 4vw, 3.5rem);
  /* A lighter fill plus a heavier blur: the orchard stays visible as colour
     and movement, but local contrast behind the text drops far enough that
     forest-green type clears AA. Don't lower the fill without raising the
     blur, or the two stop cancelling. */
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0.34) 100%);
  backdrop-filter: blur(38px) saturate(160%) brightness(112%);
  -webkit-backdrop-filter: blur(38px) saturate(160%) brightness(112%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 1.75rem;
  box-shadow:
    0 30px 65px -20px rgba(44, 95, 56, 0.16),
    0 10px 30px -10px rgba(26, 35, 27, 0.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-scroll__card {
    background: rgba(255, 255, 255, 0.94);
  }
}

/* Botanical leaf illustration floating at card corner */
/* --- Falling leaves -------------------------------------------------------
   scroll-canvas.js writes --leaf-fall (0..1) on the section; every leaf
   inherits it and derives its own local progress from its own slice, so one
   scroll position puts each leaf at a different point in its fall.

   The layer sits above the canvas but BELOW the card (z 3 vs 5). Leaves
   drift across the photograph and pass behind the glass — they can never
   cross the text, which is why they don't have to be faint to stay readable.
   -------------------------------------------------------------------------- */

.hero-scroll__leaves {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Leaves travel past the frame edge; clip them here rather than letting
     them widen the page. */
  overflow: hidden;
}

.hero-scroll__leaf-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.hero-scroll__leaf {
  /* This leaf's own 0..1, mapped from its slice of the section's progress.
     Clamped so it sits still before its slice opens and after it closes. */
  --p: clamp(0, (var(--leaf-fall, 0) - var(--t0)) * var(--inv), 1);

  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 58px;
  height: 58px;
  opacity: calc(var(--o) * (1 - var(--p) * 0.3));
  transform:
    translate3d(calc(var(--p) * var(--dx)), calc(var(--p) * var(--dy)), 0)
    rotate(calc(var(--p) * var(--spin)))
    scale(var(--s));
  /* Neutral dark shadow, not a green one — green-on-green gave the leaves no
     edge against the canopy. */
  filter: drop-shadow(0 4px 9px rgba(20, 32, 18, 0.34));
  will-change: transform, opacity;
}

.hero-scroll__leaf svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Leaves tumbling down the page are pure decoration and a classic
   vestibular trigger. Drop them entirely; the canvas carries the motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll__leaves {
    display: none;
  }
}

/* 3-Phase Story Container.
   All three phases occupy the same grid cell, so the row is always as tall
   as the LONGEST phase and the card height never changes as you scroll.
   The old approach — absolute when inactive, relative when active — sized
   the container to whichever phase was showing, so the card grew and shrank
   mid-scroll and, because the pin centres vertically, slid up and down with
   it. Don't reintroduce position: absolute here. */
.hero-scroll__phases {
  display: grid;
  min-height: 22rem;
}
.hero-scroll__phase {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  /* visibility, not just pointer-events: an invisible phase's links would
     otherwise still take keyboard focus. Delayed so the fade still plays. */
  visibility: hidden;
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.45s;
}
.hero-scroll__phase.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s;
}

/* Eyebrow badge */
.hero-scroll__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  /* Not --leaf: tokens.css restricts that to 24px+ display text, and this is
     0.82rem. Forest green clears AA at this size. */
  color: var(--primary);
  margin-bottom: 1rem;
}

/* Big brand headline (Forest + Leaf dual-tone) */
.hero-scroll__title {
  font-family: var(--font-display);
  font-size: clamp(2.85rem, 5.8vw, 5.25rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
}
.hero-scroll__title-primary {
  color: var(--primary);
}
.hero-scroll__title-leaf {
  color: var(--leaf);
}

/* Phase 1 carries the brand twice over: the wordmark for wide screens, and
   the same words as set type for phones, where the type sits on the
   photograph itself (see responsive.css). Exactly one is on screen at a
   time, and the type is the accessible heading at both widths — when the
   wordmark is showing, the type is clipped rather than display:none, so it
   stays in the accessibility tree and the <h1> is never empty.

   Wordmark height is tuned to match the two-line text title used by the
   other phases, so the shared grid cell — and therefore the card — does not
   change size as the phases swap. */
.hero-scroll__title--brand {
  display: block;
  margin-block: 0 1.5rem;
}
.hero-scroll__title-logo {
  display: block;
  width: auto;
  /* ~= 2 lines x 0.94 line-height of the text title at the same viewport. */
  height: clamp(5.35rem, 10.9vw, 9.85rem);
  /* Never let the wordmark outgrow the card on a narrow screen. */
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.hero-scroll__title-type {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Lede / description */
.hero-scroll__lede {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.65;
  color: var(--foreground);
  margin-bottom: 2rem;
  font-style: italic;
  font-weight: 400;
}

/* The base .btn--ghost is white-on-transparent, built for the old dark-scrim
   hero. On light glass it was invisible. Restate it in ink. */
.hero-scroll__card .btn--ghost {
  color: var(--primary);
  border: 1.5px solid rgba(44, 95, 56, 0.45);
  background: rgba(255, 255, 255, 0.55);
  font-weight: 600;
}
.hero-scroll__card .btn--ghost:hover,
.hero-scroll__card .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.88);
  border-color: var(--primary);
  color: var(--primary);
}

/* Lifts the solid button off a busy, moving backdrop. */
.hero-scroll__card .btn--solid {
  box-shadow: 0 6px 18px rgba(44, 95, 56, 0.28);
}

/* Action buttons.
   margin-top: auto pins these to the bottom of the phase. Each phase is a
   grid item stretched to the full cell height, so the buttons land at the
   same y in all three — without it they rode on the copy above and shifted
   ~29px whenever a phase had a shorter lede. */
.hero-scroll__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: auto;
  margin-bottom: 2rem;
}

/* Footer: progress track and scroll hint */
.hero-scroll__footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(44, 95, 56, 0.1);
}
.hero-scroll__progress-track {
  width: 100%;
  height: 3px;
  background: rgba(44, 95, 56, 0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.hero-scroll__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--leaf) 0%, var(--accent) 100%);
  border-radius: 3px;
  transition: width 0.1s linear;
}

/* Scroll hint indicator */
.hero-scroll__indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* --muted-foreground is a 4.9:1 grey on flat white; over moving glass it
     dropped below AA. Ink instead. */
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero-scroll__mouse {
  width: 14px;
  height: 22px;
  border: 1.5px solid var(--leaf);
  border-radius: 10px;
  position: relative;
  display: inline-block;
}
.hero-scroll__mouse::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 5px;
  background: var(--leaf);
  border-radius: 2px;
  animation: scrollMouse 1.8s infinite ease-in-out;
}
@keyframes scrollMouse {
  0% { transform: translate(-50%, 0); opacity: 1; }
  60% { transform: translate(-50%, 6px); opacity: 0; }
  61% { transform: translate(-50%, 0); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .hero-scroll {
    height: 220vh;
  }
  .hero-scroll__card {
    padding: 1.75rem 1.5rem;
    border-radius: 1.25rem;
    /* Slightly denser than desktop — the card spans the full frame on a
       phone, so there is no clear backdrop beside it to give context. */
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.54) 0%, rgba(255, 255, 255, 0.42) 100%);
  }
  .hero-scroll__phases {
    min-height: 24rem;
  }
  .hero-scroll__leaf {
    width: 44px;
    height: 44px;
  }
  .hero-scroll__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .hero-scroll__actions .btn {
    text-align: center;
    justify-content: center;
  }
}
/* The mobile card override above sits after the no-blur fallback, so on a
   browser without backdrop-filter it would win and leave the card
   transparent. Re-assert the opaque fill last. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-scroll__card { background: rgba(255, 255, 255, 0.94); }
  .hero-scroll__card .btn--ghost { background: rgba(255, 255, 255, 0.9); }
}

/* ==========================================================================
   Homepage Redesign — Lower Sections (Matched to Reference Image)
   Pill tags, Mission Split (3 tall cards), Initiatives Grid & Lime Callout
   ========================================================================== */

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.95rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.25rem;
}

.text-leaf {
  color: var(--leaf) !important;
}

/* --- Mission Split Section ----------------------------------------------- */

.home-mission {
  background: var(--background);
  padding-block: clamp(4rem, 8vw, 6.5rem);
}
.home-mission__grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.home-mission__left {
  display: flex;
  flex-direction: column;
}
.home-mission__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--foreground);
  margin: 0 0 1.5rem 0;
  letter-spacing: -0.02em;
}
.home-mission__lede {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.7;
  color: var(--muted-foreground);
  margin: 0 0 2.25rem 0;
}
.home-mission__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.home-mission__actions .btn {
  border-radius: 999px;
  padding: 0.85rem 1.85rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}

/* 3 Tall Cards */
.home-mission__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.mission-card {
  position: relative;
  height: clamp(22rem, 30vw, 28rem);
  border-radius: 1.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.75rem 1.35rem;
  color: #ffffff;
  box-shadow: 0 16px 36px -10px rgba(44, 95, 56, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: var(--primary);
}
.mission-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(44, 95, 56, 0.28);
}
.mission-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: transform 0.5s ease;
}
.mission-card:hover .mission-card__bg {
  transform: scale(1.06);
}
.mission-card__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(26, 35, 27, 0.1) 0%, rgba(26, 35, 27, 0.45) 45%, rgba(26, 35, 27, 0.9) 100%);
}
.mission-card__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
}
.mission-card__badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}
.mission-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}
.mission-card__text {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* --- Initiatives & Impact Container Section ------------------------------ */

.home-initiatives {
  background: var(--background);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.home-initiatives__card {
  background: var(--secondary); /* #F2F7EC */
  border: 1px solid var(--border);
  border-radius: 2rem;
  padding: clamp(2rem, 4.5vw, 4rem);
  box-shadow: 0 16px 40px -15px rgba(44, 95, 56, 0.08);
}
.home-initiatives__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: 1.5rem;
}

/* Left 3 Cards */
.home-initiatives__cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.initiative-card {
  display: flex;
  flex-direction: column;
}
.initiative-card__media {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  margin: 0 0 1.25rem 0;
  box-shadow: 0 8px 24px rgba(44, 95, 56, 0.1);
  background: var(--background);
}
.initiative-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.initiative-card:hover .initiative-card__media img {
  transform: scale(1.05);
}
.initiative-card__badge {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.initiative-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 0.5rem 0;
}
.initiative-card__text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0 0 1rem 0;
}

/* Right Sidebar */
.home-initiatives__sidebar {
  display: flex;
  flex-direction: column;
}
.home-initiatives__title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--foreground);
  margin: 0 0 1rem 0;
}
.home-initiatives__lede {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin: 0 0 1.5rem 0;
}
.home-initiatives__all-link {
  margin-bottom: 2rem;
}

/* Lime Green Callout Box */
.home-initiatives__callout {
  background: var(--accent); /* Lime Accent #B9DC7A */
  border-radius: 1.35rem;
  padding: 1.75rem 1.6rem;
  color: var(--accent-foreground);
  box-shadow: 0 10px 25px rgba(44, 95, 56, 0.12);
  display: flex;
  flex-direction: column;
}
.home-initiatives__callout-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-foreground);
  margin: 0 0 0.5rem 0;
}
.home-initiatives__callout-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(22, 36, 15, 0.88);
  margin: 0 0 1.25rem 0;
}
.btn--callout {
  background: var(--primary);
  color: #ffffff !important;
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 14px rgba(22, 36, 15, 0.2);
  transition: all 0.2s ease;
}
.btn--callout:hover {
  background: #1B4224;
  transform: translateY(-1px);
}
.callout-trust {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(22, 36, 15, 0.15);
}
.callout-trust__avatars {
  display: flex;
  gap: 2px;
}
.callout-trust__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.callout-trust__text {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent-foreground);
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .home-mission__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .home-initiatives__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .home-initiatives__cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .home-mission__cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .mission-card {
    height: 20rem;
  }
  .home-initiatives__cards-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .home-initiatives__card {
    padding: 1.5rem 1.25rem;
    border-radius: 1.25rem;
  }
}
/* --- Language switch ------------------------------------------------------
   Sits in the header on bilingual pages. Its face shows the script you get
   by pressing it — അ or A — so it needs no wording and works whichever
   language the reader arrived in.
   -------------------------------------------------------------------------- */

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* 44px minimum touch target. */
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.5rem 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.lang-toggle__globe { flex: none; color: var(--primary); }

/* Both options are always on screen. Only the fill moves, so the control
   reads as a choice between two alphabets even to someone who cannot read
   either of them. */
.lang-toggle__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.lang-toggle__opt.is-active {
  background: var(--primary);
  color: #fff;
}
.lang-toggle:hover { border-color: var(--leaf); background: var(--secondary); }
.lang-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- Floating WhatsApp ----------------------------------------------------
   Replaces the old nav-bar button. Fixed bottom-right so it is reachable at
   any scroll position and lands in the thumb zone on a phone.
   -------------------------------------------------------------------------- */

/* Wide screens only — a phone gets WhatsApp as the last item in the bottom
   bar instead, so this would be a second copy of the same action. Hidden at
   the breakpoint in responsive.css. */
.wa-fab {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.75rem);
  /* env() keeps it clear of the iOS home indicator; the fallback covers
     everything else. */
  bottom: clamp(0.9rem, 3vw, 1.75rem);
  bottom: calc(clamp(0.9rem, 3vw, 1.75rem) + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  /* The supplied PNG is a full squircle with its own green, so this element
     must not draw a second background behind it — just match its corner
     radius so the shadow follows the artwork. */
  border-radius: 23%;
  overflow: hidden;
  box-shadow:
    0 4px 10px rgba(18, 92, 46, .28),
    0 14px 30px -8px rgba(18, 92, 46, .40);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s var(--ease);
}
.wa-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 6px 14px rgba(18, 92, 46, .32),
    0 20px 40px -10px rgba(18, 92, 46, .46);
}
.wa-fab:active { transform: translateY(-1px) scale(1); }
.wa-fab img { width: 100%; height: 100%; display: block; }
.wa-fab:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .wa-fab, .lang-toggle, .bottom-nav__link { transition: none; }
  .wa-fab:hover { transform: none; }
}

/* ==========================================================================
   RESTORED BLOCK

   These rules were lost when the mobile drawer was removed: that deletion ran
   from the drawer's comment marker to the next one and took everything in
   between, which was most of the page furniture. Recovered from the earlier
   static build in site/css/main.css, with the pieces this build had since
   added — the plant card, the four-column footer — rebuilt to match what the
   templates were already rendering.
   ========================================================================== */

/* --- Trust strip ---------------------------------------------------------- */

.trust {
  position: relative;
  z-index: 4;
  margin-top: calc(var(--space-16) * -1);
  padding-bottom: var(--space-16);
}
.trust__grid {
  display: grid;
  grid-auto-flow: column;
  gap: var(--space-8);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-8);
  box-shadow: 0 18px 44px -22px rgba(26, 35, 27, .18);
}
.trust__item { display: flex; flex-direction: column; gap: var(--space-2); align-items: start; }
.trust__value {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, var(--text-2xl));
  color: var(--primary);
  line-height: 1;
}
.trust__value small { font-size: .5em; color: var(--muted-foreground); }
.trust__label { font-size: var(--text-sm); color: var(--muted-foreground); }

/* --- Feature (image beside body copy) ------------------------------------- */

.feature { display: grid; gap: var(--space-16); grid-template-columns: 1fr 1fr; align-items: start; }
.feature__media { border-radius: var(--radius); overflow: hidden; position: sticky; top: 7rem; margin: 0; }
.feature__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.feature__body p { margin-bottom: var(--space-4); color: var(--muted-foreground); line-height: var(--leading-loose); }

/* --- Tick list ------------------------------------------------------------ */

.ticks { margin-block: var(--space-8); display: grid; gap: var(--space-3); list-style: none; padding: 0; }
.ticks li { display: flex; gap: var(--space-3); color: var(--muted-foreground); line-height: var(--leading-loose); }
.ticks li::before { content: "—"; color: var(--leaf); flex: none; }

/* --- Comparison table ----------------------------------------------------- */

.compare-card {
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}
.compare-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
}
.compare {
  width: 100%;
  font-size: var(--text-sm);
  text-align: left;
  border-collapse: collapse;
}
.compare__caption {
  display: block;
  text-align: left;
  color: var(--muted-foreground);
  margin-bottom: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.compare thead th {
  font-weight: 600;
  padding: 12px 14px;
  border-bottom: 2px solid var(--border);
  color: var(--foreground);
  background: #fbfdfa;
}
.compare thead th.col-ours {
  color: var(--primary);
  background: #eef7ee;
}
.compare thead th.col-theirs {
  color: var(--muted-foreground);
}
.compare tbody th {
  font-weight: 500;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--foreground);
  background: #fafbfa;
}
.compare tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--muted-foreground);
}
.compare__ours {
  color: #1e4526 !important;
  font-weight: 600 !important;
  background: rgba(43, 97, 53, 0.05);
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}
.compare__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  line-height: var(--leading-relaxed);
}

/* --- Plantation CTA & Separation ------------------------------------------ */
.plantation-cta {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.plantation-cta .btn {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.plantation-cta .fineprint {
  margin: 0;
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
}
.suits-label {
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  color: var(--foreground);
}
.plantation-suits .ticks {
  margin-top: var(--space-2);
  margin-bottom: var(--space-6);
}

/* --- Steps ---------------------------------------------------------------- */

.steps { display: grid; gap: var(--space-8); grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; }
.step { border-top: 1px solid var(--border); padding-top: var(--space-4); }
.step__num { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--leaf); margin-bottom: var(--space-3); }
.step__title { font-size: var(--text-lg); color: var(--primary); margin-bottom: var(--space-3); }
.step p { color: var(--muted-foreground); font-size: var(--text-sm); line-height: var(--leading-loose); }

/* --- Plant cards (Reduced Size, 4-in-a-row on Desktop) ----------------- */

.plants {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--space-12);
  list-style: none;
  padding: 0;
}
.plant {
  display: flex;
  flex-direction: column;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 20px -10px rgba(26, 35, 27, .14);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.plant:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(26, 35, 27, .2);
}
.plant__media { overflow: hidden; margin: 0; }
.plant__media img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

.plant__media--empty {
  aspect-ratio: 1;
  background:
    repeating-linear-gradient(45deg, var(--border) 0 6px, transparent 6px 14px),
    var(--secondary);
}
.plant__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 0.9rem;
  gap: 0.25rem;
}
.plant__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary);
  background: var(--secondary);
  border-radius: var(--radius-pill);
  padding: .2rem .55rem;
  margin-bottom: 0.2rem;
}
.plant__name {
  font-size: 1.05rem;
  color: var(--primary);
  margin: 0;
  font-weight: 700;
  line-height: 1.25;
}
.plant__malayalam {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.2;
}
.plant__note {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plant__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--primary);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.plant__action:hover { color: var(--leaf); }
.plants__footer { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.plants__pricing { color: var(--muted-foreground); margin: 0; }
/* --- Footer --------------------------------------------------------------- */

/* --- Footer ---------------------------------------------------------------
   A photograph behind the footer, defocused and veiled so the type still
   reads over it.

   The blur is not decoration, it is what buys the picture its presence. The
   canopy shot carries specular highlights where sun hits wet leaves, and a
   single near-white pixel under a light veil is enough to strand white text
   at under 2:1. Blurring averages those peaks into their surroundings, which
   lets the veil come UP by roughly twenty points for the same contrast:
   measured on this image, white type holds 4.5:1 at 41% picture visibility
   unblurred, and at 62% with a 30px blur.

   --footer-veil is the alpha of the dark wash over the picture, so picture
   visibility is 1 minus that. It deepens down the footer because that is
   where the smallest type sits.

   The two are one dial: turn the veil down and the picture gets louder while
   the type gets weaker. Re-check contrast before moving it.
   -------------------------------------------------------------------------- */

.site-footer {
  --footer-veil:      0.55;   /* 45% of the picture showing at the top    */
  --footer-veil-deep: 0.65;   /* 35% at the foot, under the small print   */

  position: relative;
  isolation: isolate;   /* so the layers below sit above the base colour */
  overflow: hidden;     /* clips the blur, which bleeds past the element */
  background-color: var(--foreground);

  /* Was .78. The picture raises the floor under the text, and this is the
     cheapest contrast back — it costs nothing visually on a flat panel. */
  color: rgba(255, 255, 255, .90);
  padding-block: var(--space-16) var(--space-8);
  margin-top: var(--section-y);
}

/* Inset negatively so the blur samples real pixels at the edges instead of
   fading into transparency and leaving a pale halo round the footer. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: -3rem;
  z-index: -2;
  background: url("../images/photos/plantation-canopy.webp") center 45% / cover no-repeat;
  filter: blur(30px);
}
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(20, 28, 21, var(--footer-veil)) 0%,
    rgba(20, 28, 21, var(--footer-veil-deep)) 100%);
}

.site-footer a { color: rgba(255, 255, 255, .90); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__inner { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: 1.4fr 0.9fr 1.1fr 1.2fr; align-items: start; }
.site-footer__logo-link { display: inline-block; }
.site-footer__brand .brand__logo {
  height: 3rem;
  width: auto;
  background: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-6);
}
.site-footer__mission { font-size: 0.9rem; line-height: var(--leading-loose); color: rgba(255, 255, 255, .88); max-width: 32ch; }
.site-footer__heading {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  margin-bottom: var(--space-4);
}
.site-footer__links { list-style: none; padding: 0; margin: 0; }
.site-footer__links li { margin-bottom: var(--space-3); font-size: 0.92rem; }
.site-footer__wa-badge { color: var(--accent) !important; font-weight: 700; }
.site-footer__address { font-style: normal; margin-top: 1rem; font-size: 0.86rem; line-height: 1.6; color: rgba(255, 255, 255, 0.86); }
.site-footer__hours { margin-top: var(--space-3); font-size: 0.82rem; color: rgba(255, 255, 255, 0.84); }

/* --- Footer map -----------------------------------------------------------
   Sits under the address it belongs to rather than in a band of its own, so
   the whole "where we are" answer reads as one block.

   Fixed aspect ratio, not a fixed height: the column is a quarter of the
   footer on a desktop and full width on a phone, and a height that suits one
   is wrong for the other.
   -------------------------------------------------------------------------- */

.site-footer__map {
  margin-top: var(--space-4);
  aspect-ratio: 4 / 3;
  max-height: 15rem;
  border-radius: var(--radius);
  overflow: hidden;
  /* The map is a bright rectangle on a near-black footer. A pale hairline
     stops it reading as a hole punched in the page. */
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
}
.site-footer__map iframe { display: block; width: 100%; height: 100%; border: 0; }

.site-footer__directions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent) !important;
}
.site-footer__directions::after { content: "→"; }
.site-footer__legal {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.82);
}
.site-footer__legal p { margin: 0; }

/* --- Plantation Section: 3 in a Row on Desktop, Side-by-side on Mobile --- */
.plantation-section {
  padding-block: var(--space-12);
}
.plantation-grid-3 {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
}
@media (max-width: 900px) {
  .plantation-grid-3 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .plantation-col-intro {
    grid-column: 1 / -1 !important;
    margin-bottom: var(--space-4);
  }
}
.plantation-col-intro {
  display: flex;
  flex-direction: column;
}
.plantation-col-intro .section__title {
  font-size: clamp(1.85rem, 2.5vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: var(--space-3);
}
.plantation-intro p {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  line-height: 1.55;
  margin-bottom: var(--space-3);
  text-align: justify;
  text-justify: inter-word;
}
.plantation-intro p:last-child {
  margin-bottom: var(--space-4);
}
.plantation-suits {
  margin-top: 0.25rem;
}
.plantation-suits .suits-label {
  font-size: 0.8125rem;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}
.plantation-suits ul.ticks {
  margin: 0;
  padding-left: 1.1rem;
}
.plantation-suits ul.ticks li {
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-bottom: 0.35rem;
  text-align: justify;
  text-justify: inter-word;
}

/* Plan Cards: Clean, Uniform (No Highlight) */
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  box-sizing: border-box;
}
.plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.plan-card__head {
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
}
.plan-card__title {
  font-family: var(--font-display, Comfortaa, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0 0 0.25rem;
}
.plan-card__desc {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  line-height: 1.35;
  margin: 0 0 0.65rem;
  min-height: 2.3rem;
}
.plan-card__price-box {
  display: flex;
  align-items: baseline;
  gap: 3px;
  background: rgba(0, 0, 0, 0.035);
  padding: 6px 10px;
  border-radius: 6px;
}
.plan-card__currency {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
}
.plan-card__amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}
.plan-card__amount--text {
  font-size: 1.15rem;
  color: var(--foreground);
}
.plan-card__term {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  margin-left: 3px;
}

/* Plan Card Features */
.plan-card__features {
  list-style: none;
  padding: 0;
  margin: 0.65rem 0 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.plan-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding-block: 0.55rem;
  border-bottom: 1px dashed var(--border);
  font-size: 0.78rem;
}
.plan-card__feature:last-child {
  border-bottom: none;
}
.plan-icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.plan-icon--check {
  background: #eef7ee;
  color: var(--primary);
}
.plan-icon--cross {
  background: #f4f4f4;
  color: #8c9689;
}
.plan-icon--client {
  background: #f0f4ee;
  color: #4c7255;
}
.plan-icon--share {
  background: #fef7ea;
  color: #b58117;
}
.plan-feature-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.3;
}
.feature-label {
  color: var(--foreground);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.feature-value {
  color: var(--muted-foreground);
  font-size: 0.78rem;
}
.feature-value--ours {
  color: var(--primary);
  font-weight: 600;
}
.feature-value--theirs {
  color: var(--muted-foreground);
}

/* Common Section Footer */
.plantation-common-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

/* Reduced size WhatsApp button */
.btn--compact {
  padding: 8px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--radius-pill);
}

.plantation-common-footer .compare__note {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  line-height: var(--leading-relaxed);
  text-align: justify;
  text-justify: inter-word;
  max-width: 860px;
  margin-inline: auto;
  margin-top: var(--space-1);
}


/* ==========================================================================
   Google Maps 5-Star Reviews Infinite Marquee Section
   ========================================================================== */

.g-reviews-section {
  padding: var(--space-12) 0 var(--space-10);
  background: linear-gradient(180deg, rgba(244, 247, 243, 0.65) 0%, rgba(255, 255, 255, 0.95) 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.g-reviews-header {
  margin-bottom: var(--space-6);
}

.g-reviews-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(44, 95, 56, 0.18);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--space-3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.g-reviews-header__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.g-reviews-title-wrap {
  flex: 1;
  min-width: 280px;
}

.g-reviews-header__title {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  color: var(--foreground);
  margin-bottom: var(--space-2);
}

.g-reviews-header__subtitle {
  font-size: var(--text-base);
  color: var(--muted-foreground);
  max-width: 580px;
  line-height: var(--leading-relaxed);
}

.g-reviews-score-card {
  background: #ffffff;
  border: 1.5px solid rgba(44, 95, 56, 0.16);
  border-radius: var(--radius-lg);
  padding: 1rem 1.4rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.g-reviews-score-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.g-reviews-score-num {
  font-size: 1.85rem;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--foreground);
  line-height: 1;
}

.g-reviews-stars {
  color: #FBBC04;
  letter-spacing: 2px;
  font-size: 1.2rem;
  line-height: 1;
}

.g-reviews-score-label {
  font-size: 12px;
  color: var(--muted-foreground);
  font-weight: 500;
}

.g-reviews-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.g-reviews-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}

.g-reviews-btn--outline {
  border: 1px solid var(--primary);
  color: var(--primary);
  background: transparent;
}

.g-reviews-btn--outline:hover {
  background: rgba(44, 95, 56, 0.08);
  transform: translateY(-1px);
}

.g-reviews-btn--fill {
  background: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary);
}

.g-reviews-btn--fill:hover {
  background: #234c2d;
  transform: translateY(-1px);
}

/* Marquee Viewport & Track */
.g-marquee-viewport {
  width: 100%;
  position: relative;
  overflow: hidden;
  padding: 1.25rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  cursor: grab;
}

.g-marquee-viewport:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.g-marquee-track {
  display: flex;
  width: max-content;
  gap: 1.25rem;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  animation: marqueeScrollRTL 65s linear infinite;
}

/* Hover and focus pause */
.g-marquee-viewport:hover .g-marquee-track,
.g-marquee-viewport:focus-within .g-marquee-track {
  animation-play-state: paused;
}

.g-marquee-group {
  display: flex;
  gap: 1.25rem;
  flex-shrink: 0;
}

/* Review Card Styling */
.g-review-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 350px;
  min-width: 350px;
  max-width: 350px;
  background: #ffffff;
  border: 1.5px solid rgba(44, 95, 56, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.35rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  user-select: none;
}

.g-review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(44, 95, 56, 0.14);
  border-color: var(--primary);
}

.g-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0.65rem;
}

.g-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 13.5px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.g-card-meta {
  flex: 1;
  min-width: 0;
}

.g-card-author {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g-card-time {
  display: block;
  font-size: 12px;
  color: var(--muted-foreground);
}

.g-card-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0.9;
}

.g-card-stars {
  color: #FBBC04;
  letter-spacing: 2px;
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
  line-height: 1;
}

.g-card-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: #2e332c;
  margin-bottom: 1rem;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.g-card-footer {
  border-top: 1px dashed rgba(44, 95, 56, 0.14);
  padding-top: 0.65rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.g-card-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  transition: color 0.2s ease;
}

.g-review-card:hover .g-card-footer-link {
  color: #1b4224;
}

.g-reviews-tap-hint {
  font-size: 12.5px;
  color: var(--muted-foreground);
}

/* Right-to-Left Infinite Animation */
@keyframes marqueeScrollRTL {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .g-reviews-header__content {
    flex-direction: column;
    align-items: flex-start;
  }
  .g-reviews-score-card {
    width: 100%;
  }
  .g-review-card {
    width: 290px;
    min-width: 290px;
    max-width: 290px;
    padding: 1.1rem;
  }
  .g-marquee-track {
    animation-duration: 48s;
  }
  .g-marquee-viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  }
}

/* Accessibility: Prefers-reduced-motion branch */
@media (prefers-reduced-motion: reduce) {
  .g-marquee-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .g-marquee-track {
    animation: none;
  }
}