/* =========================================================
   Spacious layout — sections get proper vertical rhythm,
   roomier cards and larger text. Same design, colours, fonts
   and effects; only spacing and arrangement change.
   Loaded last.
   ========================================================= */

@media (min-width: 901px) {
  :root { --section-y: 7rem; }

  /* ---------- Section heads ---------- */
  .section-head h2 { font-size: 3rem; line-height: 3.5rem; margin-top: .6rem; }
  .section-head.sm h2 { font-size: 2.8rem; line-height: 3.3rem; margin-top: .6rem; }
  .section-head p { font-size: 1.3rem; margin-top: .6rem; color: #4a4a4a; }

  /* ---------- Hero: airy copy, features in a glass strip under it ---------- */
  .hero { height: 47rem; }
  .eyebrow { top: 12.2rem; }
  .hero h1 { top: 13.8rem; line-height: 4.9rem; }
  .hero-lead { top: 24.4rem; line-height: 1.85rem; }
  .hero-btns { top: 31.6rem; gap: 1.4rem; }
  .btn-hero { width: 13.2rem; height: 3.4rem; font-size: 1.15rem; }
  .btn-hero2 { width: 15.4rem; height: 3.4rem; font-size: 1.12rem; }
  .hero-features {
    top: 37.6rem; left: 4.6rem; width: 59rem;
    display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
    padding: 1.15rem 1.4rem; border-radius: 1.3rem;
    background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
    -webkit-backdrop-filter: blur(16px) saturate(165%); backdrop-filter: blur(16px) saturate(165%);
    border: 1px solid rgba(255,255,255,.85);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(220,188,106,.22), 0 1.6rem 3rem -1.6rem rgba(15,59,28,.35);
  }
  .hero-features li {
    width: auto; margin: 0 !important; flex-direction: row; align-items: center; justify-content: center;
    gap: .9rem; text-align: left; font-size: 1rem; line-height: 1.3rem;
  }
  .hero-features li + li { border-left: 1px solid rgba(220,188,106,.35); }
  .hero-features .ring { margin-bottom: 0; width: 3.6rem; height: 3.6rem; flex: none; }
  .hero-features .ring svg { width: 1.8rem; height: 1.8rem; }
  .hero-features .ring .ic-cow, .hero-features .ring .ic-truck { width: 2.2rem; height: 1.6rem; }

  /* ---------- Products ---------- */
  .products { height: auto; padding: 5.5rem 0 var(--section-y); }
  /* five products: one even row */
  .product-grid { width: auto; margin: 3.4rem 3.3rem 0; gap: 1.6rem; grid-template-columns: repeat(5, 1fr); }
  .product-card { height: auto; padding-bottom: 1.7rem; border-radius: 1.1rem; }
  .pimg { height: 13rem; }
  .product-card h3 { font-size: 1.5rem; line-height: 1.8rem; margin-top: 1.15rem; }
  .product-card p { font-size: 1.08rem; margin-top: .35rem; }
  .round-btn {
    position: relative; left: auto; top: auto; transform: none;
    margin: 1.2rem auto 0; width: 2.9rem; height: 2.9rem;
  }
  .round-btn:hover { transform: scale(1.1); }
  .round-btn svg { width: 1.5rem; height: 1.5rem; }
  .leaf-l1 { top: 26rem; }
  .leaf-r1 { top: 25rem; }

  /* ---------- Our Farm: text column + photo, both centred ---------- */
  .farm { height: auto; padding: 3rem 0 var(--section-y); }
  .farm-img { top: calc(50% - 1rem); transform: translateY(-50%); }
  .farm-inner {
    height: auto; min-height: 38rem; padding-left: 6.7rem;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  }
  .farm h2, .farm p, .btn-know, .stats { position: static; }
  .farm h2 { font-size: 3.3rem; line-height: 3.6rem; }
  .farm p { width: auto; max-width: 35rem; margin-top: 1.6rem; font-size: 1.3rem; line-height: 1.9rem; }
  .farm p br.d { display: none; }
  .btn-know { margin-top: 2.2rem; width: auto; height: 3.4rem; padding: 0 2.2rem; font-size: 1.12rem; }
  .stats {
    display: grid; grid-template-columns: repeat(4, auto); gap: 2.6rem; margin-top: 3rem;
    padding-top: 2.2rem; border-top: 1px solid rgba(220,188,106,.4);
  }
  .stats li, .stats li:first-child, .stats li:nth-child(n) { width: auto; margin: 0; font-size: 1.02rem; line-height: 1.35rem; }
  .stats strong { font-size: 1.45rem; margin-top: .7rem; }
  .ring.sm { width: 3.6rem; height: 3.6rem; }
  .ring.sm svg { width: 1.8rem; height: 1.8rem; }
  .ring.sm .ic-cow { width: 2.2rem; height: 1.6rem; }
  .leaf-l3 { top: 12rem; }

  /* ---------- Goodness ---------- */
  .goodness { height: auto; padding: 1rem 0 var(--section-y); }
  .good-grid { grid-template-columns: repeat(4, 1fr); gap: 1.8rem; margin: 3.4rem 4rem 0; }
  .good-card { height: auto; padding: 2.4rem 1.6rem 2.3rem; border-radius: 1.2rem; }
  .good-card .ring { width: 5rem; height: 5rem; }
  .good-card .ring svg { width: 2.4rem; height: 2.4rem; }
  .good-card h3 { font-size: 1.4rem; margin-top: 1.3rem; }
  .good-card p { font-size: 1.1rem; line-height: 1.65rem; margin-top: .55rem; }
  .leaf-l2 { top: 2rem; }
  .leaf-r2 { top: 12rem; }

  /* ---------- Natural home banner ---------- */
  .natural-home { height: 30rem; }
  .nh-inner { display: flex; align-items: center; }
  .nh-copy { padding-left: 6.6rem; max-width: 46rem; }
  .nh-copy h2, .nh-copy p, .btn-gold-outline { position: static; }
  .nh-copy h2 { font-size: 3.1rem; line-height: 3.4rem; }
  .nh-copy p { width: auto; max-width: 36rem; margin-top: 1.4rem; font-size: 1.25rem; line-height: 1.8rem; }
  .nh-copy p br.d { display: none; }
  .btn-gold-outline { display: inline-flex; margin-top: 2.2rem; width: auto; height: 3.3rem; padding: 0 2.2rem; font-size: 1.1rem; }
  .watch { top: calc(50% - 3.6rem); left: 57rem; width: 12rem; font-size: 1.2rem; gap: .9rem; }
  .watch .play, .watch .play::after { width: 4.8rem; height: 4.8rem; }
  .watch .play svg { width: 2.1rem; height: 2.1rem; }

  /* ---------- Testimonials ---------- */
  .testimonials { height: auto; padding: var(--section-y) 0; }
  .testimonials .ornament { margin-top: 0; }
  .t-slider { margin-top: 3rem; }
  .t-card { height: auto; padding: 1.8rem 1.7rem 1.7rem; gap: 1.4rem; align-items: flex-start; border-radius: 1.1rem; }
  .t-card img { width: 5.2rem; height: 5.2rem; }
  .stars { margin-top: .1rem; }
  .stars svg { width: 1.15rem; height: 1.15rem; }
  .t-card blockquote { font-size: 1.06rem; line-height: 1.6rem; margin-top: .6rem; }
  .t-card blockquote br.d { display: none; }
  .t-card figcaption { font-size: .95rem; line-height: 1.3rem; margin-top: .9rem; }
  .t-card figcaption strong { font-size: 1.05rem; }
  .t-arrow { top: calc(50% - 1.9rem); width: 3.4rem; height: 3.4rem; }

  /* ---------- CTA banner ---------- */
  .cta { height: auto; min-height: 25rem; display: flex; align-items: center; }
  .cta-inner { height: auto; padding: 4.5rem 0; display: flex; flex-direction: column; align-items: center; }
  .cta h2 { padding-top: 0; font-size: 2.9rem; line-height: 3.3rem; }
  .btn-cta { margin-top: 2rem; width: auto; height: 3.5rem; padding: 0 2.6rem; font-size: 1.2rem; }
  .cans { width: 23rem; bottom: -1.2rem; }
  .signpost { top: calc(50% - 6rem); left: 74rem; width: 17rem; }
  .plank { height: 2.45rem; margin-bottom: .45rem; font-size: 1.1rem; gap: 1rem; }
  .plank i { width: 1.75rem; height: 1.75rem; }
  .plank i svg { width: 1.1rem; height: 1.1rem; }

  /* ---------- Footer: a little more air ---------- */
  .ft-features { margin-top: 2.4rem; }
  .footer-inner { padding-top: 3.6rem; padding-bottom: 4.6rem; }
}

/* ---------- Tablet / mobile: more space between sections ---------- */
@media (max-width: 900px) {
  .hero { padding-bottom: 40px; }
  .products { padding: 48px 0 56px; }
  .product-grid { margin-top: 28px; gap: 16px; }
  .farm { padding-bottom: 56px; }
  .farm p { margin-top: 16px; }
  .btn-know { margin-top: 22px; }
  .stats { margin-top: 30px; }
  .goodness { padding: 24px 0 56px; }
  .good-grid { margin-top: 28px; gap: 16px; }
  .good-card { padding: 24px 16px; }
  .natural-home { padding: 56px 0; }
  .testimonials { padding: 56px 0; }
  .t-slider { margin-top: 26px; }
  .cta { padding: 56px 0 48px; }
}

/* ---------- Product cards on tablet / mobile ---------- */
@media (max-width: 900px) {
  /* the 60px was room for the add-to-cart button, which is gone */
  .product-card { padding-bottom: 18px; }
}
@media (max-width: 560px) {
  /* five products in two columns: the last one sits centred on its own row */
  .product-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
}