/* ============================================================
   Maoshen Group Farm — Organic Biophilic, Market-Fresh palette
   Tokens: semantic colors, type scale, spacing, radius, shadow
   ============================================================ */
:root {
  /* --- Semantic color tokens (Palette B: Market Fresh) --- */
  --color-primary:        #059669;
  --color-primary-strong: #047857;
  --color-primary-soft:   #d1fae5;
  --color-accent:         #d97706;
  --color-accent-soft:    #fff7ed;

  --color-background:     #f3fbf6;
  --color-background-2:   #ecfdf5;
  --color-surface:        #ffffff;
  --color-surface-elev:   rgba(255, 255, 255, 0.86);

  --color-foreground:     #0f172a;
  --color-muted:          #64748b;
  --color-muted-soft:     #94a3b8;
  --color-border:         #e1f2ed;
  --color-border-strong:  #c7e8d9;
  --color-ring:           #059669;

  /* --- Type scale --- */
  --font-heading: 'Lora', Georgia, serif;
  --font-body:    'Raleway', system-ui, -apple-system, Segoe UI, sans-serif;

  --fs-xs:  0.78rem;
  --fs-sm:  0.9rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.375rem;
  --fs-2xl: clamp(1.6rem, 2.4vw + 1rem, 2.4rem);
  --fs-3xl: clamp(2rem, 3vw + 1rem, 3rem);
  --fs-hero: clamp(2.6rem, 5.4vw + 1rem, 4.8rem);

  /* --- Spacing scale (4/8 pt rhythm) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  /* --- Radius --- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* --- Elevation / shadow --- */
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 32px rgba(5, 100, 70, 0.08), 0 2px 6px rgba(5, 100, 70, 0.05);
  --shadow-lg: 0 28px 64px rgba(5, 100, 70, 0.12), 0 4px 12px rgba(5, 100, 70, 0.06);

  /* --- Layout --- */
  --container: 1200px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:  cubic-bezier(0.6, 0, 0.85, 0.3);
  --dur-fast: 150ms;
  --dur-med:  240ms;
  --dur-slow: 420ms;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-foreground);
  background:
    radial-gradient(ellipse 80% 60% at 10% -10%, rgba(5, 150, 105, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 10%, rgba(217, 119, 6, 0.07), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--color-background) 30%, var(--color-background-2) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--color-primary-soft); color: var(--color-primary-strong); }

/* Accessible focus ring — visible for keyboard users */
:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--color-border);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.brand-mark {
  flex: none;           /* .brand sets min-width:0, so without this the logo squashes */
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--color-primary-soft), #ffffff);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}
.brand-text strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--color-foreground);
}
.brand-text small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  margin-top: 2px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-muted);
}
.nav a {
  position: relative;
  padding: 6px 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a:hover { color: var(--color-primary-strong); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;         /* a11y touch target */
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.28);
}
.btn-primary:hover { box-shadow: 0 14px 32px rgba(5, 150, 105, 0.36); }

.btn-ghost {
  color: var(--color-foreground);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
}

.btn-icon {
  transition: transform var(--dur-med) var(--ease-out);
}
.btn:hover .btn-icon { transform: translateX(3px); }

.btn-whatsapp {
  color: #0b3b28;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 46, 24, 0.22);
}
.btn-whatsapp:hover { background: #fff7ed; }

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: var(--space-8) 0 var(--space-7); overflow: hidden; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px 6px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
}

.pulse-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55);
  animation: pulse 2s var(--ease-out) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(5, 150, 105, 0); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

.hero h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: var(--space-4) 0 var(--space-5);
  max-width: 13ch;
}
.hero h1 em {
  font-style: italic;
  color: var(--color-primary-strong);
  font-weight: 500;
}

.lede {
  font-size: var(--fs-lg);
  color: var(--color-muted);
  max-width: 52ch;
  margin: 0 0 var(--space-5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.hero-stats dt {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xl);
  color: var(--color-foreground);
  line-height: 1.1;
}
.hero-stats dd {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Hero visual --- */
.hero-visual {
  position: relative;
  min-height: 540px;
  display: grid;
  place-items: center;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}
.hero-blob-a {
  width: 320px; height: 320px;
  background: rgba(5, 150, 105, 0.22);
  top: 10%; left: 5%;
}
.hero-blob-b {
  width: 260px; height: 260px;
  background: rgba(217, 119, 6, 0.14);
  right: 4%; bottom: 8%;
}

.farm-card {
  position: relative;
  z-index: 2;
  width: min(100%, 480px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 251, 246, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
}
.farm-card::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5, 150, 105, 0.14), transparent 65%);
  pointer-events: none;
}
.farm-card-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  padding: 7px 14px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
}
.farm-card-badge svg { color: var(--color-accent); }

.mushroom-art {
  width: 100%;
  height: auto;
  max-height: 240px;
  margin: var(--space-2) 0;
}

.farm-card-foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: auto;
}
.farm-card-text .mini-label {
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.farm-card-text h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0;
  color: var(--color-foreground);
}

.sensor-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.sensor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  position: relative;
}
.sensor svg { color: var(--color-primary); }
.sensor span {
  font-size: 0.7rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sensor strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-foreground);
  font-variant-numeric: tabular-nums;
}
.sensor strong i {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--color-muted);
  margin-left: 1px;
}
.sensor-ok strong { color: var(--color-primary-strong); }

/* ============================================================
   Sections
   ============================================================ */
.section { padding: var(--space-9) 0; }
.section.muted {
  background: linear-gradient(180deg, rgba(236, 253, 245, 0.6), rgba(255, 255, 255, 0.9));
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section-tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.section-tag.on-dark { color: #a7f3d0; }

.section h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: var(--space-3) 0 var(--space-4);
  max-width: 18ch;
}

.section-head {
  max-width: 640px;
  margin-bottom: var(--space-7);
}
.section-lede {
  margin: 0;
  font-size: var(--fs-lg);
  color: var(--color-muted);
  max-width: 55ch;
}

/* Story */
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-7);
  align-items: start;
}
.story-body p {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
  color: var(--color-muted);
  max-width: 58ch;
}
.story-body p:last-child { margin-bottom: 0; }

/* ============================================================
   Cards (Offer + Tech)
   ============================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.product-media {
  position: relative;
  aspect-ratio: 16 / 10;           /* CLS-safe */
  background: linear-gradient(135deg, var(--color-primary-soft), #ffffff);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--color-border);
}
.product-media.alt {
  background: linear-gradient(135deg, var(--color-accent-soft), #ffffff);
}
.product-illus { width: 70%; height: auto; }

.product-body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card-icon {
  width: 40px; height: 40px;
  padding: 8px;
  border-radius: var(--radius-sm);
  color: var(--color-primary-strong);
  background: var(--color-primary-soft);
  margin-bottom: var(--space-2);
}
.product-card h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xl);
  margin: 0;
  line-height: 1.2;
}
.product-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* Customer entries.
   One entry has a photograph and the others do not, so they get different shapes
   rather than being forced into one grid: the photographed entry is a feature
   block, the rest are name-and-area bars. Earlier versions used equal cards,
   which left the photoless ones as empty image containers. */
.customer-feature {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: var(--space-6);
  align-items: center;
}
.customer-feature .customer-photo {
  /* The source is 4:3; crop to 16:10 here so the block keeps its proportions
     whatever ratio a future photo arrives in. */
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}
.customer-feature-body h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: 1.2;
  margin: 0 0 6px;
}
.customer-feature-body > p:last-child {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
  max-width: 52ch;
}

.customer-also {
  margin: var(--space-7) 0 var(--space-4);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.customer-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.customer-strip li {
  /* Pin the count per row rather than letting basis arithmetic pick it: four
     entries wrap to 3+1 at some widths, stranding one. Four, then two, then one
     -- never three. flex-grow stays 1 so any future odd entry fills its row
     instead of sitting short. */
  flex: 1 1 calc((100% - 3 * var(--space-3) - 1px) / 4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.customer-strip strong {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
}
.customer-strip span {
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

@media (max-width: 1099px) {
  .customer-strip li { flex-basis: calc((100% - var(--space-3) - 1px) / 2); }
}
@media (max-width: 799px) {
  .customer-feature { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 599px) {
  .customer-strip li { flex-basis: 100%; }
}

.customer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.customer-meta svg {
  flex: none;
  color: var(--color-primary-strong);
}

/* Tech cards */
.tech-card {
  position: relative;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.tech-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.tech-icon-wrap {
  width: 52px; height: 52px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  color: var(--color-primary-strong);
  background: linear-gradient(135deg, var(--color-primary-soft), #ffffff);
  border: 1px solid var(--color-border-strong);
  margin-bottom: var(--space-4);
}
.tech-card h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-xl);
  margin: 0 0 var(--space-2);
}
.tech-card p {
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.tech-chip {
  display: inline-block;
  padding: 5px 12px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(217, 119, 6, 0.2);
}

/* ============================================================
   CTA / Contact
   ============================================================ */
.cta-section { padding: var(--space-8) 0 var(--space-9); }
.cta-box {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-7);
  color: #ffffff;
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(217, 119, 6, 0.28), transparent 60%),
    linear-gradient(135deg, #065f46, #047857 55%, #059669 120%);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.cta-box::after {
  content: "";
  position: absolute;
  inset: auto -100px -150px auto;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 243, 208, 0.2), transparent 65%);
  pointer-events: none;
}
.cta-copy { position: relative; z-index: 1; }
.cta-box h2 {
  color: #ffffff;
  margin: var(--space-3) 0;
  max-width: 16ch;
}
.cta-box p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 48ch;
  font-size: var(--fs-lg);
  margin: 0 0 var(--space-5);
}
.cta-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.94);
}
.cta-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.tick {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  color: #a7f3d0;
  font-size: 12px;
  font-weight: 700;
}

.contact-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.contact-label {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a7f3d0;
}
.contact-card h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.8rem;
  margin: 0;
  line-height: 1.1;
}
.contact-number {
  margin: 0 0 var(--space-2);
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
}

/* Compact location row inside the contact card — under the WhatsApp button */
.contact-location {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: var(--fs-sm);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.contact-location:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}
.contact-location svg { color: #a7f3d0; flex: 0 0 auto; }
.contact-location span {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.contact-location strong {
  font-weight: 600;
  color: #ffffff;
}
.contact-location em {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: #a7f3d0;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  padding: var(--space-6) 0 var(--space-7);
  border-top: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.6);
}
.footer-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1.1fr 1fr;
  grid-template-areas:
    "brand address links"
    "legal legal  legal";
  gap: var(--space-5) var(--space-6);
  align-items: start;
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.footer-brand { grid-area: brand; }
.footer-address { grid-area: address; }
.footer-links { grid-area: links; }
.footer-legal {
  grid-area: legal;
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.footer-brand strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-foreground);
}
.footer-brand p { margin: 2px 0 0; }

/* Semantic <address> block */
.footer-address {
  font-style: normal;           /* reset <address> italic */
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.5;
}
.footer-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.footer-address-lines { color: var(--color-foreground); }

.footer-hours {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-border-strong);
  color: var(--color-primary-strong);
  align-self: flex-start;
}
.footer-hours svg { color: var(--color-primary); flex: 0 0 auto; }
.footer-hours > span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.footer-hours strong {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary-strong);
}
.footer-hours em {
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-foreground);
}
.footer-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-weight: 600;
  color: var(--color-primary-strong);
  transition: gap var(--dur-fast) var(--ease-out);
}
.footer-map-link:hover { gap: 10px; }

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-links a {
  display: inline-flex;
  padding: 2px 0;
}
.footer-links a:hover { color: var(--color-primary-strong); }

/* ============================================================
   Responsive
   Breakpoints tuned for real-world laptops:
   - ≥1100px : full desktop (2-col hero, 3-col cards, full footer)
   - 880-1099: tight desktop (2-col hero, 2-col cards)
   - 640-879 : tablet / small laptop (1-col hero, 2-col cards, nav visible)
   - <640px  : mobile (everything 1-col, nav hidden)
   ============================================================ */

/* Tight desktop — cards drop from 3 to 2 but hero stays 2-col */
@media (max-width: 1099px) {
  /* Six nav links no longer fit beside the brand and the CTA on one line, and
     squeezing them made the brand name wrap into the links. Give the nav its
     own row instead: brand and CTA keep row one, nav centres underneath. */
  .nav-wrap { flex-wrap: wrap; }
  .brand { flex: none; }
  .nav { order: 3; width: 100%; justify-content: center; }

  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .section { padding: var(--space-8) 0; }
}

/* Tablet / small laptop — hero and story stack, cards stay 2-col, CTA stacks */
@media (max-width: 879px) {
  .hero-grid,
  .story-grid,
  .cta-box { grid-template-columns: 1fr; }

  .hero h1 { max-width: unset; }
  .hero-visual { min-height: auto; margin-top: var(--space-5); }

  .footer-wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "brand   address"
      "links   links"
      "legal   legal";
  }
}

/* Mobile — collapse everything, hide nav */
@media (max-width: 639px) {
  .nav { display: none; }
  .nav-wrap { flex-wrap: wrap; gap: var(--space-3); }
  .nav-cta { margin-left: auto; }

  .hero { padding-top: var(--space-6); }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stats > div:last-child { grid-column: span 2; }

  .cards-grid { grid-template-columns: 1fr; }
  .cards-grid > :last-child:nth-child(odd) { grid-column: auto; }

  .sensor-panel { grid-template-columns: 1fr 1fr 1fr; }

  .cta-box { padding: var(--space-5); }
  .cta-box h2 { font-size: clamp(1.75rem, 6vw, 2.4rem); }

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

  .footer-wrap {
    grid-template-columns: 1fr;
    grid-template-areas:
      "brand"
      "address"
      "links"
      "legal";
    text-align: left;
  }
  .footer-legal { text-align: left; }
}

@media (max-width: 420px) {
  .sensor-panel { grid-template-columns: 1fr; }
  .sensor { flex-direction: row; align-items: center; justify-content: space-between; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats > div:last-child { grid-column: auto; }
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .pulse-dot { box-shadow: none; }
}

/* ============================================================
   Photos (hero + product) & FAQ — added for SEO refresh
   ============================================================ */
.farm-card picture { display: block; }
.hero-photo {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: var(--space-2) 0;
  box-shadow: var(--shadow-sm);
}

.product-media picture { display: block; width: 100%; height: 100%; }
.product-photo { width: 100%; height: 100%; object-fit: cover; }

/* FAQ accordion */
.faq-list {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-sm);
}
.faq-item summary {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--color-foreground);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-primary);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
  margin: var(--space-3) 0 0;
  color: var(--color-muted);
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* Smart Farm banner (real grow-room photo) */
.tech-banner {
  position: relative;
  margin: 0 0 var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.tech-banner img {
  width: 100%;
  height: clamp(200px, 32vw, 400px);
  object-fit: cover;
  display: block;
}
.tech-banner figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-5) var(--space-5) var(--space-4);
  color: #ffffff;
  font-size: var(--fs-sm);
  font-weight: 500;
  background: linear-gradient(180deg, rgba(4, 47, 30, 0) 0%, rgba(4, 47, 30, 0.82) 100%);
}

/* Inside the Farm — gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.gallery-item {
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  background: var(--color-primary-soft);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.05); }
@media (max-width: 879px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gallery-grid { grid-template-columns: 1fr; } }