/* ===================================================
   index.css — page-specific styles
   Imports common.css; only contains page-unique rules.
=================================================== */

@import "./common.css";


/* White body — cards read clearly against page */
  body { font-family: 'Inter', sans-serif; color: #1E1E16; background: #ffffff; line-height: 1.6; }

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

:root {
    /* Page backgrounds — white base, single light-grey alternate */
    --white: #ffffff;
    --grey-light: #F7F7F2;      /* alternate section bg — barely-there grey */
    --cream-accent: #FBF6EE;    /* accent panels only — product card tops etc */

    /* Text — high contrast */
    --ink: #1E1E16;             /* primary headings — near black */
    --ink-mid: #3A3A30;         /* body text */
    --muted: #6B6B5C;           /* secondary / captions */

    /* Brand colours */
    --orange: #C8590A;          /* primary CTA — from reference */
    --orange-light: #F5874A;    /* hover */
    --orange-tint: #FEF0E6;     /* icon bg tint */
    --green: #2D5F1F;           /* deep forest green — logo, nav CTA */
    --green-mid: #3D7A2A;       /* hover */
    --green-tint: #EBF4E5;      /* icon bg tint */

    /* Borders */
    --border: #E8E8E0;          /* card borders — visible but not heavy */
    --border-strong: #D0CFC4;   /* section dividers */

    /* Dark band — story section */
    --dark-band: #1A2E12;       /* deep forest from reference photo backdrop */

    --radius: 12px;
    --radius-lg: 18px;
    --max-w: 1040px;
    --serif: 'Playfair Display', serif;
  }

.serif { font-family: var(--serif); }

/* Typography */
  .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 12px; }

h2.section-title { font-family: var(--serif); font-size: 38px; font-weight: 700; color: var(--ink); line-height: 1.12; margin-bottom: 10px; }

.section-sub { font-size: 15px; color: var(--muted); line-height: 1.8; max-width: 600px; margin-bottom: 40px; }

.body-text { font-size: 15px; color: var(--ink-mid); line-height: 1.85; margin-bottom: 16px; }

/* Buttons */
  .btn-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--orange); color: #fff;
    padding: 13px 28px; border-radius: 28px;
    font-weight: 700; font-size: 14px; cursor: pointer; border: none;
    transition: background 0.2s;
  }

.btn-pill.ghost {
    background: transparent; border: 1.5px solid rgba(255,255,255,0.45);
    color: #fff;
  }

.btn-pill.ghost:hover { background: rgba(255,255,255,0.1); }

.btn-pill.ghost-dark {
    background: transparent; border: 1.5px solid var(--orange);
    color: var(--orange);
  }

.btn-pill.ghost-dark:hover { background: var(--orange-tint); }

.btn-pill.green { background: var(--green); }

.btn-pill.green:hover { background: var(--green-mid); }

/* ── NAV ── */
  nav { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; height: 85px; display: flex; align-items: center; box-shadow: 0 4px 24px rgba(0,0,0,0.10); }

.nav-links a:hover { color: var(--orange); }

.nav-links a.active {
  background: var(--green);
  color: #fff;
  padding: 7px 18px;
  border-radius: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.nav-links a.active:hover { color: #fff; }

.nav-wa { display: inline-flex; align-items: center; gap: 7px; background: var(--green); color: #fff; padding: 9px 20px; border-radius: 24px; font-size: 13px; font-weight: 700; transition: background 0.2s; }

.nav-wa svg { flex-shrink: 0; }

/* ── HERO ── */
  .hero {
    position: relative; overflow: hidden; min-height: 600px;
    display: flex; align-items: center;
  }

/* Full-bleed background image */
  .hero-bg {
    position: absolute; inset: 0; z-index: 0;
  }

.hero-bg img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
    display: block;
  }

/* Dark gradient overlay — stronger on left for text legibility, fades right */
  .hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(
      100deg,
      rgba(10,20,6,0.82) 0%,
      rgba(10,20,6,0.68) 40%,
      rgba(10,20,6,0.30) 70%,
      rgba(10,20,6,0.10) 100%
    );
  }

.hero::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 28px;
    background: #fff; z-index: 3;
    clip-path: polygon(0 60%,4% 30%,9% 65%,15% 25%,21% 60%,27% 35%,33% 70%,40% 30%,46% 60%,53% 28%,59% 65%,66% 32%,72% 62%,79% 28%,85% 60%,91% 33%,96% 65%,100% 35%,100% 100%,0 100%);
  }

/* Text content — sits above overlay */
  .hero-text-panel {
    position: relative; z-index: 2;
    max-width: var(--max-w); margin: 0 auto; width: 100%;
    padding: 100px 28px 120px;
  }

.hero h1 { font-family: var(--serif); font-size: 60px; font-weight: 700; color: #fff; line-height: 1.08; margin-bottom: 20px; max-width: 580px; }

.hero h1 em { font-style: italic; color: #F5C96A; }

.hero-sub { font-size: 16px; color: rgba(255,255,255,0.80); line-height: 1.8; max-width: 460px; margin-bottom: 32px; }

.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }

.hero-tags { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 32px; }

.hero-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 24px; padding: 6px 14px;
  font-size: 12px; font-weight: 600; color: #E5DDD0;
}

.hero-tag i { font-size: 13px; color: #F0B97A; }

/* ── HERO CERTIFIED HUMANE BADGE PILL ── */
.hero-cert-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 10, 8, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 10px 20px 10px 10px;
  margin-bottom: 28px;
}
.hero-cert-badge-logo {
  width: 64px;
  height: 44px;
  background: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}
.hero-cert-badge-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 4px;
}
.hero-cert-badge-seal {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.hero-cert-badge-seal svg { width: 52px; height: 52px; }
.hero-cert-badge-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hero-cert-badge-text span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #F0B97A;
  line-height: 1.5;
}

/* ── TRUST BADGES ── */
  .badges-strip { padding: 48px 28px; border-bottom: 1px solid var(--border); background: #fff; }

.badges-grid {
    max-width: var(--max-w); margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
    gap: 0;
  }

.badge-item {
    flex: 1; text-align: center; padding: 12px 24px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    position: relative;
  }

/* Vertical pipe divider between items */
  .badge-item + .badge-item::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 56px; background: #D8E8D0;
  }

/* Large light-green circle — matching reference */
  .badge-icon {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: #EBF5E5;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }

/* Outlined SVG icons drawn to match the reference style */
  .badge-icon svg { width: 42px; height: 42px; }

.badge-item h3 {
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
    color: var(--ink); line-height: 1.4; letter-spacing: -0.1px;
  }

/* ── CHOOSE YOUR EGG ── */
  .products-section { padding: 72px 28px; background: var(--grey-light); }

.products-head { max-width: var(--max-w); margin: 0 auto; text-align: center; }

.products-head .section-sub { margin-left: auto; margin-right: auto; }

.products-grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.product-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
  }

.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }

.product-img { height: 200px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 56px; }

.product-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.pi-freerange { background: #E0EDD4; }

.pi-cagefree  { background: #FBF0DC; }

.pi-liquid    { background: #EEF5FC; }

.product-body { padding: 22px 20px; flex: 1; display: flex; flex-direction: column; }

.product-body h3 { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }

.product-tagline { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }

.product-body p { font-size: 13.5px; color: var(--muted); line-height: 1.75; margin-bottom: 16px; flex: 1; }

.product-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--orange); }

.product-link .arrow-svg { transition: transform 0.22s ease; flex-shrink: 0; }

.product-card:hover .product-link .arrow-svg { transform: translateX(4px); }

/* ── WHERE TO BUY ── */
  .buy-section { background: #fff; padding: 80px 28px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.buy-head { max-width: var(--max-w); margin: 0 auto; text-align: center; margin-bottom: 44px; }

.buy-head .section-sub { margin-left: auto; margin-right: auto; }

.buy-infographic { max-width: var(--max-w); margin: 0 auto 56px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.07); }

.buy-infographic img { display: block; width: 100%; height: auto; }

/* ── JOURNEY — Desktop horizontal (≥ 700px) ── */
  .journey-steps {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    gap: 0;
  }

/* Horizontal dashed line sits exactly at icon vertical centre (icon = 56px → centre = 28px) */
  .journey-steps::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--green) 0, var(--green) 7px, transparent 7px, transparent 16px);
    z-index: 0;
  }

.journey-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 8px;
  }

.journey-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    flex-shrink: 0;
  }

.journey-icon i { font-size: 21px; color: var(--green); }

.journey-step h3 { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; line-height: 1.3; }

.journey-step p { font-size: 12px; color: var(--muted); line-height: 1.6; }

.buy-tagline { max-width: var(--max-w); margin: 44px auto 0; text-align: center; }

.buy-tagline-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--green-tint); border-radius: 32px; padding: 12px 28px; font-size: 14px; font-weight: 600; color: var(--green); }

/* ── WHY FAMILIES CHOOSE FFG ── */
  .why-section { padding: 80px 28px; background: var(--grey-light); }

.why-grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.why-card {
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 26px 24px; display: flex; gap: 18px; align-items: flex-start;
    transition: transform 0.2s, box-shadow 0.2s;
  }

.why-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.07); }

.why-card-icon { width: 50px; height: 50px; min-width: 50px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }

.wi-1 { background: var(--green-tint); }

.wi-1 i { color: var(--green); }

.wi-2 { background: var(--orange-tint); }

.wi-2 i { color: var(--orange); }

.wi-3 { background: #FEF0E6; }

.wi-3 i { color: var(--orange); }

.wi-4 { background: #E5F0F8; }

.wi-4 i { color: #2468A0; }

.why-card-icon i { font-size: 24px; }

.why-card h3 { font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }

.why-card p  { font-size: 13.5px; color: var(--muted); line-height: 1.7; margin-bottom: 10px; }

.why-link { font-size: 12.5px; font-weight: 700; color: var(--orange); display: inline-flex; align-items: center; gap: 5px; }

.why-link i { font-size: 12px; }

.why-link:hover { text-decoration: underline; }

/* ── CERTIFIED HUMANE BANNER ── */
.cert-banner {
  background: #fff;
  overflow: hidden;
}

.cert-banner-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6fr 4fr;
  align-items: stretch;
  min-height: 260px;
}

.cert-banner-text {
  padding: 44px 52px 44px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.cert-banner-logo-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.cert-banner-logo {
  height: 60px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.cert-banner-heading {
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 700;
  color: var(--green);
  line-height: 1.18;
  margin: 0;
}

.cert-banner-heading sup {
  font-size: 0.52em;
  vertical-align: super;
  font-weight: 700;
}

.cert-banner-sub {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

.cert-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
  align-self: flex-start;
}
.cert-banner-btn:hover { background: var(--green-mid); }
.cert-banner-btn i { font-size: 15px; line-height: 1; }

.cert-banner-img-col {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  background: #ffffff;
}

.cert-banner-img-col img {
  width: 375px;
  height: 147px;
  object-fit: none;
  display: block;
}

.cert-banner-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 260px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
}

/* ── OUR STORY ── */
  .story-section {
    background: var(--dark-band);
    padding: 80px 28px; position: relative; overflow: hidden;
  }

.story-section::before {
    content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 24px;
    background: var(--grey-light);
    clip-path: polygon(0 0,100% 0,100% 35%,95% 70%,89% 30%,83% 65%,76% 28%,70% 62%,63% 30%,57% 68%,50% 32%,44% 65%,37% 28%,31% 62%,24% 30%,18% 68%,11% 32%,5% 65%,0 35%);
  }

.story-grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }

.story-section .eyebrow { color: #F5A84A; }

.story-section h2 { font-family: var(--serif); font-size: 34px; font-weight: 700; color: #fff; line-height: 1.18; margin-bottom: 18px; }

.story-section .body-text { color: rgba(255,255,255,0.68); }

.story-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.story-stat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 22px 20px; }

.story-stat-num { font-family: var(--serif); font-size: 30px; font-weight: 700; color: #F5A84A; }

.story-stat-label { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 4px; line-height: 1.5; }

.story-section .cert-banner-btn { background: #F5A84A; color: #1A2E12; margin-top: 20px; }
.story-section .cert-banner-btn:hover { background: #e89a3a; }

/* ── FARMS — new three-card + map layout ── */
.farms-section {
  padding: 40px 28px 88px;
  background-color: var(--grey-light);
  background-image: url('../images/south-india-map.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 50%;
  position: relative;
  overflow: hidden;
}

.farms-header {
  text-align: center;
  margin-bottom: 48px;
}
.farms-header .section-sub { max-width: 520px; }

/* Outer wrapper: three columns — left cards | map gap | right card */
.farms-map-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px 1fr;
  gap: 0;
  align-items: center;
  position: relative;
}

/* Left & right columns */
.farms-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── New farm card style ── */
.farm-card-new {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 0.22s, box-shadow 0.22s;
}
.farm-card-new:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

/* Illustration header */
.farm-card-img {
  width: 100%;
  height: 140px;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink: 0;
}
.farm-card-img svg { width: 100%; height: 100%; display: block; }

.fci-1 { background: #2D5F1F; }
.fci-2 { background: #41702d; }
.fci-2 img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.fci-3 { background: #6e4b22; }
.fci-3 img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Equalise illustration heights across both farm cards */
.fci-2,
.fci-3 { height: 160px; }

.farm-card-body { padding: 18px 20px 22px; }

.farm-card-body h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.farm-loc {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.farm-loc.fk  { color: var(--green); }
.farm-loc.fkk { color: #7A5228; }

.farm-card-body p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

/* ── Map center column — transparent spacer showing background map ── */
.farms-map-center {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 440px;
}

/* Hide the img — background image on section does the job */
.farms-map-img {
  display: none;
}

/* Karnataka card fills vertical space on right */
.farms-col-right {
  justify-content: center;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .farms-map-layout {
    grid-template-columns: 1fr 240px 1fr;
  }
  .farm-card-img { height: 120px; }
  .fci-2, .fci-3 { height: 120px; }
}

@media (max-width: 700px) {
  /* Stack vertically; hide map background */
  .farms-section {
    background-image: none;
  }
  .farms-map-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .farms-col { gap: 16px; }
  .farms-map-center { display: none; }
}

/* ── FINAL CTA ── */
  .cta-section { background: var(--grey-light); border-top: 1px solid var(--border); padding: 80px 28px; text-align: center; }

.cta-section h2 { font-family: var(--serif); font-size: 36px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }

.cta-section p { font-size: 15px; color: var(--muted); max-width: 480px; margin: 0 auto 30px; line-height: 1.8; }

.cta-logo-btn {
  background: #fff;
  border: 1.5px solid var(--border);
  padding: 8px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  height: 48px;
}

.cta-logo-btn:hover { background: #f5f5f5; }

.cta-platform-logo {
  height: 28px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ── FOOTER ── */
  footer { background: #111A0A; padding: 52px 28px 28px; }

.footer-logo { font-family: var(--serif); font-weight: 700; font-size: 17px; color: #F5A84A; margin-bottom: 12px; }

.footer-desc { font-size: 12px; line-height: 1.8; color: rgba(255,255,255,0.38); }

.footer-col h4 { font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 14px; }

.footer-links li a { font-size: 12.5px; color: rgba(255,255,255,0.45); transition: color 0.2s; }

.footer-links li a:hover { color: #F5A84A; }

.footer-contact { font-size: 12.5px; line-height: 1.9; color: rgba(255,255,255,0.45); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 18px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

.footer-copy { font-size: 11px; color: rgba(255,255,255,0.25); }

.f-badge { font-size: 10px; font-weight: 600; border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.35); padding: 4px 12px; border-radius: 14px; }

/* ── WHATSAPP FLOAT ── */
  .wa-float { position: fixed; bottom: 24px; right: 24px; z-index: 200; width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,0.25); transition: transform 0.2s; }

/* ── BURGER BUTTON ── */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 0.2s;
}
.burger:hover { background: var(--grey-light); }
.burger span {
  display: block; width: 100%; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
  transform-origin: center;
}
/* Animate to X when open */
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE MENU ── */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 12px 24px 20px;
  position: sticky;
  top: 85px;
  z-index: 99;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-size: 15px; font-weight: 500; color: var(--ink-mid);
  padding: 11px 14px;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
}
.mobile-menu a:hover { background: var(--grey-light); color: var(--ink); }
.mobile-menu a.active {
  background: var(--green); color: #fff;
  font-weight: 600;
}

/* ── RESPONSIVE ── */
  @media (max-width: 860px) {
    .hero { min-height: 440px; }
    .hero-text-panel { padding: 40px 28px 68px; }

    /* H1 — tablet */
    .hero h1 { font-size: 42px; line-height: 1.18; }

    /* H2 — tablet: consistent size + line-height for all section h2s */
    h2.section-title          { font-size: 28px; line-height: 1.22; }
    .story-section h2         { font-size: 28px; line-height: 1.22; }
    .cta-section h2           { font-size: 28px; line-height: 1.22; }

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

    .cert-banner-inner { grid-template-columns: 1fr; min-height: auto; }
    .cert-banner-text { padding: 36px 24px; gap: 12px; }
    .cert-banner-heading { font-size: 26px; }
    .cert-banner-img-col { min-height: 220px; }
    .cert-banner-img-placeholder { min-height: 220px; border-left: none; border-top: 2px dashed var(--border-strong); }

    /* ── Compact badge list — fires at all mobile/tablet widths ≤860px ──
       2-column grid: icon left, label right, divider lines between rows. */
    .badges-strip { padding: 20px 24px; }
    .badges-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
    .badge-item {
      flex-direction: row; align-items: center; justify-content: flex-start;
      gap: 12px; padding: 12px 8px; text-align: left;
      border-bottom: 1px solid var(--border);
    }
    /* Right column items get a left border as vertical divider */
    .badge-item:nth-child(odd) { border-right: 1px solid var(--border); padding-right: 16px; }
    .badge-item:nth-child(even) { padding-left: 16px; }
    /* Remove bottom border from last row (last 2 items) */
    .badge-item:nth-last-child(-n+2):nth-child(odd),
    .badge-item:nth-last-child(-n+2):nth-child(even),
    .badge-item:last-child { border-bottom: none; }
    .badge-item + .badge-item::before { display: none; }
    .badge-icon { width: 40px; height: 40px; min-width: 40px; }
    .badge-icon svg { width: 20px; height: 20px; }
    .badge-item h3 { font-size: 13px; font-weight: 600; line-height: 1.3; }
    .nav-links { display: none; }
    .burger { display: flex; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .why-grid, .story-grid { grid-template-columns: 1fr; }
    /* Tablet: shrink icon & text slightly, keep horizontal row */
    .journey-icon { width: 44px; height: 44px; }
    .journey-icon i { font-size: 17px; }
    .journey-step h3 { font-size: 11px; }
    .journey-step p { font-size: 10px; }
    .journey-steps::before { top: 21px; }

    /* ── HERO LOGO BUTTONS — tablet / wider mobile ── */
    .hero-btns .cta-logo-btn {
      max-width: 148px;
      flex: 0 0 auto;
    }
    .hero-btns .cta-platform-logo {
      height: 24px;
      max-width: 120px;
      width: auto;
    }
  }

/* ── Mobile: vertical single-column layout with vertical connector ── */
  @media (max-width: 700px) {
    .buy-section { padding: 52px 20px; }

    /* Flip to single-column vertical list, centred */
    .journey-steps {
      flex-direction: column;
      align-items: stretch;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
      gap: 0;
    }

    /* Vertical dashed connector — left: 23px puts it at horizontal centre of 48px icon */
    .journey-steps::before {
      top: 24px;       /* start at centre of first icon */
      bottom: 24px;    /* end at centre of last icon */
      left: 23px;      /* (48px icon / 2) - (2px line / 2) */
      right: auto;
      width: 2px;
      height: auto;
      background: repeating-linear-gradient(
        180deg,
        var(--green) 0,
        var(--green) 7px,
        transparent 7px,
        transparent 16px
      );
    }

    /* Each step: icon left, text right */
    .journey-step {
      flex-direction: row;
      align-items: flex-start;
      text-align: left;
      padding: 0 0 28px 0;
      gap: 16px;
    }
    .journey-step:last-child { padding-bottom: 0; }

    /* Icon sits above the vertical line (z-index) with white bg masking the line */
    .journey-icon {
      width: 48px;
      height: 48px;
      min-width: 48px;
      margin-bottom: 0;
      flex-shrink: 0;
      background: #fff;
      position: relative;
      z-index: 2;
    }
    .journey-icon i { font-size: 18px; }

    .journey-step h3 { font-size: 14px; margin-bottom: 5px; }
    .journey-step p { font-size: 12.5px; }

    .buy-tagline { margin-top: 36px; }
    .buy-tagline-pill { font-size: 12.5px; padding: 10px 18px; }
  }

/* ── Mobile alignment fixes ── */
@media (max-width: 700px) {
  /* Consistent left-edge alignment — remove any inherited indent that shifts titles */
  .products-head,
  .buy-head,
  .why-section > .eyebrow,
  .farms-header,
  .cta-section {
    padding-left: 0;
    padding-right: 0;
  }

  /* Section padding normalised so titles all start at the same x offset */
  .section,
  .products-section,
  .buy-section,
  .why-section,
  .story-section,
  .farms-section,
  .cta-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Hero text also aligns to same 20px rail */
  .hero-text-panel { padding-left: 20px; padding-right: 20px; }

  /* Eyebrow label — consistent spacing above heading */
  .eyebrow { margin-bottom: 8px; }

  /* Story h2 doesn't need extra top gap on mobile */
  .story-section h2 { margin-bottom: 14px; }
}

@media (max-width: 480px) {
    .footer-top { grid-template-columns: 1fr; }
    .story-stats { grid-template-columns: 1fr; }

    /* H2 — mobile: unified size + line-height across ALL section h2s */
    h2.section-title          { font-size: 26px; line-height: 1.28; }
    .story-section h2         { font-size: 26px; line-height: 1.28; }
    .cta-section h2           { font-size: 26px; line-height: 1.28; }
  }

/* ══════════════════════════════════════════════════════════════
   MOBILE MINIMALIST LAYER  (≤ 480px)
   Goal: clean, airy, image-first layout — generous whitespace,
   less surface decoration, clear typographic hierarchy.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── NAV — slimmer profile ── */
  nav { height: 60px; }
  nav .logo img { height: 40px; }
  .mobile-menu { top: 60px; }

  /* ── HERO — image-first, text top-padded ── */
  .hero { min-height: 440px; }
  .hero-text-panel { padding: 40px 20px 68px; width: 100%; }
  .hero h1 { font-size: 41px; line-height: 1.20; margin-bottom: 12px; max-width: 100%; }
  .hero-sub { font-size: 13.5px; line-height: 1.70; max-width: 100%; margin-bottom: 20px; }
  .hero-btns {
    gap: 10px;
    margin-bottom: 20px;
    align-items: flex-start;
  }
  .hero-btns .cta-logo-btn {
    min-width: 0;
    max-width: 148px;
    height: 44px;
    padding: 8px 14px;
    flex: 0 0 auto;
    align-self: flex-start;
  }
  .hero-btns .cta-platform-logo {
    height: 22px;
    max-width: 110px;
    width: auto;
  }
  .hero-tags { gap: 6px; padding-top: 24px; }
  .hero-tag { font-size: 11px; padding: 5px 11px; }
  .hero-cert-badge { gap: 10px; padding: 8px 14px 8px 8px; }
  .hero-cert-badge-logo { width: 52px; height: 36px; }
  .hero-cert-badge-text span { font-size: 10px; letter-spacing: 1.4px; }

  /* ── TRUST BADGES — centred icon-over-label, clean 2-col ── */
  .badges-strip { padding: 32px 20px; }
  .badges-grid { grid-template-columns: 1fr 1fr; }
  .badge-item {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 10px;
    padding: 18px 8px;
    border-bottom: 1px solid var(--border);
    border-right: none;
  }
  .badge-item:nth-child(odd) {
    border-right: 1px solid var(--border);
    padding-left: 8px;
    padding-right: 8px;
  }
  .badge-item:nth-child(even) { padding-left: 8px; padding-right: 8px; }
  .badge-item:nth-last-child(-n+2) { border-bottom: none; }
  .badge-item + .badge-item::before { display: none; }
  .badge-icon { width: 52px; height: 52px; min-width: 52px; }
  .badge-icon svg { width: 26px; height: 26px; }
  .badge-item h3 { font-size: 12px; font-weight: 600; }

  /* ── PRODUCTS ── */
  .products-section { padding: 56px 20px; }
  .products-head { margin-bottom: 28px; }
  .products-grid { gap: 14px; }
  .product-img { height: 170px; }
  .product-body { padding: 20px 18px 22px; }
  .product-body h3 { font-size: 19px; }
  .product-body p { font-size: 13px; }

  /* ── WHERE TO BUY ── */
  .buy-section { padding: 56px 20px; }
  .buy-head { margin-bottom: 28px; }
  .buy-infographic { margin-bottom: 36px; border-radius: 10px; }
  .buy-tagline { margin-top: 32px; }
  .buy-tagline-pill { font-size: 12px; padding: 10px 16px; }

  /* ── WHY FAMILIES CHOOSE ── */
  .why-section { padding: 56px 20px; }
  .why-section > .container { margin-bottom: 24px; }
  .why-grid { gap: 12px; }
  .why-card { padding: 18px 16px; border-radius: 14px; }
  .why-card-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; }
  .why-card-icon i { font-size: 20px; }
  .why-card h3 { font-size: 15px; margin-bottom: 4px; }
  .why-card p { font-size: 13px; line-height: 1.65; }

  /* ── STORY — remove clip-path top wave, tighten stats ── */
  .story-section { padding: 56px 20px 64px; }
  .story-section::before { display: none; }
  .story-section h2 { font-size: 23px; }
  .story-stat { padding: 14px 12px; border-radius: 10px; }
  .story-stat-num { font-size: 20px; }
  .story-stat-label { font-size: 10.5px; }

  /* ── FARMS ── */
  .farms-section { padding: 56px 20px 72px; }
  .farms-header { margin-bottom: 24px; }
  .farm-card-new { border-radius: 14px; }
  .farm-card-body { padding: 16px 16px 20px; }
  .farm-card-body h3 { font-size: 18px; }
  .farm-card-body p { font-size: 13px; }

  /* ── FINAL CTA — stacked full-width buttons ── */
  .cta-section { padding: 60px 20px; }
  .cta-section p { font-size: 13.5px; margin-bottom: 24px; }
  .cta-btns {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .cta-btns .btn-pill {
    width: 100%;
    justify-content: center;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 14px;
  }
  /* Logo buttons should NOT go full-width — override the rule above */
  .cta-btns .cta-logo-btn {
    width: auto;
    max-width: 160px;
    height: 44px;
    padding: 8px 16px;
    border-radius: 28px;
    align-self: center;
  }

  /* ── FOOTER ── */
  footer { padding: 44px 20px 28px; }
  .footer-col h4 { margin-top: 24px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-badges { display: flex; flex-wrap: wrap; gap: 6px; }

  /* ── WHATSAPP FLOAT — pull in from edge ── */
  .wa-float { width: 50px; height: 50px; bottom: 16px; right: 16px; }
  .wa-float i { font-size: 22px; }
}