/* Green Pastures DESIGN PASS (Timmy 2026-11-05): tighter spacing, matching card sizes, hover life, soft reveals.
   Loaded last on the main page, so it only refines what is already there. */

/* ---------- rhythm: tighter, even section spacing ---------- */
section { padding:88px 48px; }
.process { padding:104px 48px; }
.head { margin-bottom:44px; }
.h2 { text-wrap:balance; }
.lede { text-wrap:pretty; }
.faq { padding:88px 40px; }
.reviews { padding-top:56px; padding-bottom:56px; }
footer { padding-top:80px; }
.fmark { margin:72px 0 56px; }

/* ---------- matching card sizes ---------- */
/* pricing: all three cards the same height, buttons on one line */
.plans { align-items:stretch; }
.plan, .plan.mid { min-height:0; height:100%; }
/* your brand: three equal photo cards, no step down in the middle */
.cups .tall, .cups .tall.mid { height:560px; margin-top:0; }
/* how it works: compact, equal cards, icon and words together */
.step { min-height:0; gap:28px; padding:30px; }
.step .h3 { margin-top:0; margin-bottom:10px; }
.step svg { width:44px; height:44px; padding:10px; border-radius:14px; background:#fff; box-shadow:var(--shadow); color:var(--olive); box-sizing:content-box; }
.process .head { margin-bottom:40px !important; }
/* reviews: equal height cards */
.rgrid { align-items:stretch; }
/* drink lab: no dead space on short pages */
.lwiz { min-height:0; }
.lpages { min-height:150px; }

/* ---------- hover life ---------- */
.step, .rcard, .plan, .tile, .cups .tall, .qa, .xb, .cartb, .stp, .gbox, .lprev, .lwiz {
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .35s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
@media (hover:hover) {
  .step:hover, .rcard:hover { transform:translateY(-5px); box-shadow:0 22px 40px rgba(30,34,24,.1); }
  .step:hover svg { animation:wiggle .6s ease; }
  .plan:hover { transform:translateY(-6px); box-shadow:0 28px 50px rgba(20,24,16,.22); }
  .cups .tall:hover { transform:translateY(-6px); box-shadow:0 26px 48px rgba(20,24,16,.2); }
  .cups .tall:hover .tph, .about-verse:hover .tph { transform:scale(1.05); }
  .about-verse .tph { transition:transform 1.4s cubic-bezier(.22,1,.36,1); }
  .cartb:hover, .xb:hover { transform:translateY(-3px); }
  .qa:hover { transform:translateX(4px); }
  .btn { transition:opacity .3s var(--ease), transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s var(--ease), background .3s var(--ease); }
  .btn:hover { opacity:1; transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,24,16,.18); }
  .btn:active { transform:translateY(0) scale(.98); }
  .nav a { position:relative; }
  .nav a::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px; border-radius:2px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.22,1,.36,1); }
  .nav a:hover::after { transform:scaleX(1); }
  .fl a:hover { opacity:1; color:var(--olive); }
  .rcard:hover .q { animation:wiggle .6s ease; }
}
@keyframes wiggle { 25% { transform:rotate(-8deg); } 60% { transform:rotate(6deg); } }

/* ---------- soft reveal on scroll (page is complete without it) ---------- */
.rvs { opacity:0; transform:translateY(18px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); transition-delay:var(--rd, 0ms); }
.rvs.rvs-on { opacity:1; transform:none; }

/* ---------- hero: gentle entrance + slow drift on the photo ---------- */
.hero .bg { animation:herodrift 26s ease-in-out infinite alternate; transform-origin:50% 60%; }
@keyframes herodrift { from { transform:scale(1.04); } to { transform:scale(1.12) translateY(-1.5%); } }
.hero .copy h1, .hero .side, .hero .top { animation:heroin 1.1s cubic-bezier(.22,1,.36,1) backwards; }
.hero .side { animation-delay:.18s; } .hero .top { animation-delay:.3s; animation-name:heroinfade; }
@keyframes heroin { from { opacity:0; transform:translateY(22px); filter:blur(6px); } }
@keyframes heroinfade { from { opacity:0; } }
.hero .copy h1 { text-shadow:0 2px 30px rgba(0,0,0,.18); }
.nav { box-shadow:0 8px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.35); }

/* ---------- tablet + phone ---------- */
@media (max-width:1199px) {
  section { padding:72px 40px; } .process { padding:80px 40px; }
  .cups .tall, .cups .tall.mid { height:440px; }
}
@media (max-width:809px) {
  section, .process, .faq { padding:56px 20px; }
  .head { margin-bottom:28px; }
  .cups .tall, .cups .tall.mid { height:300px; }
  .step { gap:18px; padding:20px; } .step svg { width:32px; height:32px; padding:8px; border-radius:12px; }
  .plan, .plan.mid { height:auto; }
  footer { padding-top:56px; } .fmark { margin:48px 0 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .rvs { opacity:1; transform:none; transition:none; }
  .hero .bg, .hero .copy h1, .hero .side, .hero .top { animation:none; }
}

/* merch cards + filters */
.prod .pic { transition:transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .35s var(--ease); }
@media (hover:hover) { .prod:hover .pic { transform:translateY(-5px); box-shadow:0 22px 40px rgba(30,34,24,.14); } .filters button:hover:not(.act) { background:#ecefe6; } }
.drop .in { gap:28px; }

/* ---------- pricing background options (no more faded photo) ---------- */
html[class*="pb-"] .band::before { display:none; }
.pb-1 .band { background:radial-gradient(900px 520px at 12% 0%, rgba(126,156,98,.55), transparent 62%), radial-gradient(800px 520px at 100% 100%, rgba(30,44,22,.55), transparent 60%), var(--olive); }
.pb-3 .band { background:linear-gradient(160deg, #2c3e22 0%, #486137 55%, #6a8655 100%); }
.pb-2 .band { background:var(--bg); color:var(--ink); }
.pb-2 .band > .in { background:var(--panel); border-radius:48px; padding:72px 56px; box-shadow:0 -8px 16px rgba(0,0,0,.02); }
.pb-2 .band .lede { color:var(--muted); }
.pb-2 .band .toggle .ui { color:var(--ink); }
.pb-2 .band .switch { background:#e4e5de; }
.pb-2 .band .note { color:var(--muted); } .pb-2 .band .note a { color:var(--olive); }
.pb-2 .plan:not(.mid) { background:#fff; box-shadow:var(--shadow), inset 0 0 0 1px var(--line); }
@media (max-width:809px) { .pb-2 .band > .in { border-radius:28px; padding:40px 18px; } }

/* ---------- cream cards preview: sections float as soft cream rounded panels on white ---------- */
section.cr { background:var(--bg); }
section.cr::before { display:none; }
section.cr > .in { background:var(--cream, #faf7f0); border-radius:48px; padding:72px 56px; box-shadow:0 1px 0 rgba(0,0,0,.02); }
section.cr .step, section.cr .rcard, section.cr .qa { background:#fff; }
section.cr.book { box-shadow:none; }
.pb-2 .band > .in { background:var(--cream, #faf7f0); }
@media (max-width:1199px) { section.cr > .in { padding:56px 36px; border-radius:40px; } }
@media (max-width:809px) { section.cr > .in { padding:36px 18px; border-radius:28px; } }
.cream-1 #menus .panel, .cream-2 #menus .panel { background:var(--cream, #faf7f0); }
.cream-1 .book.bk, .cream-2 .book.bk { background:var(--bg); }