/* =============================================================
   GIMME FOODS — style.css
   Layout language: stacked colour panels with rounded bottoms
   that overlap the panel below, doodles that cross panel edges,
   dotted looping paths, lace doilies behind every pack.

   01 Tokens            08 Featured rows
   02 Base              09 Quality (etching)
   03 Panels & shared   10 Supply
   04 Buttons & bits    11 Campaign posters
   05 Header            12 Farm scene & kitchen
   06 Hero              13 Footer
   07 Product carousel  14 Inner pages
   ============================================================= */

/* ---------- 01 Tokens ---------- */
:root{
  --forest:#1E4D3A;
  --forest-2:#163B2C;
  --cream:#FCE8CC;
  --cream-2:#FFF6E9;
  --tangerine:#E8622E;
  --rust:#B8461C;
  --yolk:#FFC629;
  --yolk-soft:#FFE07A;
  --leaf:#6BB43F;
  --berry:#D41E7B;
  --sky:#1E8AD8;
  --rooster:#E1251B;
  --teal:#1BA99A;
  --cocoa:#3A2014;
  --ink:#2A1A10;
  --muted:#6B5646;

  --serif:'Fraunces', Georgia, serif;
  --script:'Caveat', 'Segoe Print', cursive;
  --sans:'Nunito', 'Segoe UI', sans-serif;

  --wrap:1200px;
  --gut:24px;
  --r:clamp(28px,4vw,56px);          /* panel corner radius = overlap depth */
  --sec:clamp(60px,8vw,112px);       /* vertical section padding */
  --shadow:0 20px 44px rgba(42,26,16,.16);
}

/* ---------- 02 Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--forest); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65; overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:600; line-height:1.02; margin:0 0 .45em;
  font-variation-settings:"SOFT" 100, "opsz" 96; letter-spacing:-.01em;
}
h1{font-size:clamp(2.6rem,6vw,4.8rem)}
h2{font-size:clamp(2.2rem,4.6vw,3.7rem)}
h3{font-size:clamp(1.3rem,2vw,1.7rem)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--yolk);outline-offset:3px;border-radius:6px}
.wrap{width:min(100% - 2*var(--gut), var(--wrap)); margin-inline:auto}
[hidden]{display:none !important}   /* filters hide cards with the hidden attribute */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 03 Panels ---------- */
/* Each panel rounds its bottom and slides UNDER the one above it.
   Earlier panels carry a higher --z (set by the build script). */
.panel{
  position:relative; z-index:var(--z,1);
  margin-top:calc(-1 * var(--r));
  padding:calc(var(--r) + var(--sec)) 0 var(--sec);
  border-radius:0 0 var(--r) var(--r);
}
.panel--first{margin-top:0; padding-top:var(--sec)}
.panel--flat{border-radius:0}
.bg-forest{background:var(--forest); color:var(--cream)}
.bg-cream{background:var(--cream)}
.bg-cream2{background:var(--cream-2)}
.bg-tangerine{background:var(--tangerine); color:var(--cream-2)}
.bg-berry{background:var(--berry); color:var(--cream-2)}
.bg-yolk{background:var(--yolk)}

.title-forest{color:var(--forest)}
.title-tangerine{color:var(--tangerine)}
.title-yolk{color:var(--yolk)}
.title-cream{color:var(--cream-2)}

.eyebrow{
  font-family:var(--sans); font-weight:800; font-size:.74rem;
  letter-spacing:.42em; text-transform:uppercase; margin:0 0 1rem;
}
.script{font-family:var(--script); font-weight:600; font-size:1.7rem; line-height:1.1}
.script--heart::after{content:' \2661'}
.center{text-align:center}

/* dotted looping paths */
.dots{position:absolute; pointer-events:none; z-index:0; overflow:visible}
.dots path{fill:none; stroke:var(--dot,var(--yolk)); stroke-width:3.4; stroke-linecap:round; stroke-dasharray:.1 11}

/* doodle that hangs over the panel edge */
.cross{position:absolute; z-index:5; pointer-events:none; filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}
.doodle{display:block; width:100%; height:auto; overflow:visible}

/* ---------- 04 Buttons & bits ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.62rem 1.5rem; border-radius:999px;
  font-family:var(--sans); font-weight:800; font-size:.9rem; letter-spacing:.02em;
  background:var(--forest); color:var(--cream-2);
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-2px); background:var(--forest-2)}
.btn--yolk{background:var(--yolk); color:var(--forest)}
.btn--yolk:hover{background:#FFD24F}
.btn--rust{background:var(--rust); color:var(--cream-2)}
.btn--rust:hover{background:#9C3A15}
.btn--line{                          /* Vila-style square outline button */
  border-radius:2px; background:transparent; color:var(--forest);
  box-shadow:inset 0 0 0 1.5px currentColor; text-transform:uppercase;
  font-size:.74rem; letter-spacing:.24em; padding:.75rem 1.4rem;
}
.btn--line:hover{background:var(--forest); color:var(--cream-2)}
.btn--line.on-dark{color:var(--cream-2)}
.btn--line.on-dark:hover{background:var(--cream-2); color:var(--forest)}

.pill{
  display:inline-block; padding:.3rem .85rem; border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  background:var(--cream-2); color:var(--forest);
}

/* rotating round emblem */
.emblem{width:132px; height:132px; color:var(--forest); flex:none}
.emblem .ring{transform-origin:80px 80px; animation:spin 28s linear infinite}
.emblem text{font-family:var(--sans); font-weight:800; font-size:10px; fill:currentColor}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 05 Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:var(--cream-2);
  box-shadow:0 1px 0 rgba(42,26,16,.08);
}
.site-header .bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-height:72px; gap:1rem;
}
.nav{display:flex; gap:.2rem; align-items:center}
.nav--right{justify-content:flex-end}
.nav a{
  font-weight:800; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.5rem .8rem; border-radius:999px; color:var(--forest); transition:.18s;
}
.nav a:hover{background:var(--cream)}
.nav a.is-active{background:var(--forest); color:var(--cream-2)}
.logo-badge{
  position:relative; display:block; width:132px; height:72px;
}
.logo-badge img{
  position:absolute; left:50%; top:6px; transform:translateX(-50%);
  width:132px; height:auto; filter:drop-shadow(0 8px 12px rgba(30,77,58,.25));
  transition:transform .3s ease;
}
.logo-badge:hover img{transform:translateX(-50%) rotate(-6deg)}
.socials{display:flex; gap:.35rem; margin-left:.4rem}
.socials a{
  width:34px; height:34px; border-radius:50%; display:grid; place-content:center;
  background:var(--rooster); color:#fff; transition:.18s;
}
.socials a:hover{transform:translateY(-2px)}
.socials svg{width:16px; height:16px}
.burger{display:none; width:44px; height:44px; border-radius:12px; background:var(--cream)}
.burger span{display:block; width:20px; height:2.5px; margin:4px auto; background:var(--forest); border-radius:2px; transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-nav{display:none}

/* ---------- 06 Hero ---------- */
.hero{
  position:relative; z-index:var(--z,20); background:var(--cream-2);
}
/* Slideshow: banners keep their own 8:3 shape (2:3 portrait on phones), never cropped */
.slides{
  position:relative; overflow:hidden; border-radius:0 0 var(--r) var(--r);
  aspect-ratio:2000/750; background:var(--cream);
}
.slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .9s ease, visibility 0s linear .9s;
}
.slide.is-active{opacity:1; visibility:visible; transition:opacity .9s ease; z-index:1}
.slide a,.slide picture{display:block; width:100%; height:100%}
.slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.035); transition:transform 6.5s ease-out}
.slide.is-active img{transform:scale(1)}

.sl-arrow{
  position:absolute; top:50%; z-index:3; width:52px; height:52px; margin-top:-26px;
  display:grid; place-content:center; border-radius:50%;
  background:rgba(255,246,233,.82); color:var(--forest); box-shadow:0 8px 20px rgba(42,26,16,.18);
  opacity:0; transition:opacity .25s ease, transform .25s ease, background .2s;
}
.sl-arrow svg{width:16px; height:26px}
.sl-arrow.prev{left:clamp(12px,2vw,28px); transform:translateX(-8px)}
.sl-arrow.next{right:clamp(12px,2vw,28px); transform:translateX(8px)}
.hero:hover .sl-arrow,.sl-arrow:focus-visible{opacity:1; transform:none}
.sl-arrow:hover{background:var(--cream-2)}

/* control pill hangs half over the panel below, like the doodles do */
.sl-controls{
  position:absolute; left:50%; bottom:0; z-index:4; transform:translate(-50%,50%);
  display:flex; align-items:center; gap:.7rem; padding:.55rem .9rem .55rem .6rem;
  background:var(--cream-2); border-radius:999px; box-shadow:0 10px 24px rgba(42,26,16,.22);
}
.sl-controls .sl-dots{display:flex; gap:.45rem; align-items:center}
.dot{
  position:relative; overflow:hidden; width:10px; height:10px; border-radius:999px;
  background:rgba(30,77,58,.22); transition:width .4s ease, background .3s;
}
.dot:hover{background:rgba(30,77,58,.4)}
.dot.is-active{width:52px; background:rgba(30,77,58,.14)}
.dot.is-active::after{
  content:''; position:absolute; inset:0; border-radius:inherit; background:var(--tint,var(--forest));
  transform-origin:left center; transform:scaleX(0);
  animation:slide-progress var(--slide-time,6s) linear forwards;
}
.hero.is-holding .dot.is-active::after{animation-play-state:paused}
@keyframes slide-progress{to{transform:scaleX(1)}}
.sl-pause{width:30px; height:30px; border-radius:50%; display:grid; place-content:center; background:var(--forest); color:var(--cream-2)}
.sl-pause:hover{background:var(--forest-2)}
.i-pause{display:block; width:8px; height:10px; border-left:3px solid currentColor; border-right:3px solid currentColor}
.i-play{display:none; width:0; height:0; margin-left:2px; border-left:9px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent}
.hero.is-paused .i-pause{display:none}
.hero.is-paused .i-play{display:block}

/* page hero (inner pages) — Vila style: title left, two photos right */
.page-hero{padding:clamp(2.6rem,6vw,4.5rem) 0 calc(var(--sec) * .8)}
.page-hero .grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
.page-hero h1{color:var(--forest)}
.page-hero p.lead{max-width:44ch; color:var(--muted); font-size:1.08rem}
.crumbs{font-size:.72rem; font-weight:800; letter-spacing:.3em; text-transform:uppercase; color:var(--tangerine); margin-bottom:1.1rem}
.crumbs a:hover{text-decoration:underline}
.photo-pair{display:grid; grid-template-columns:1.15fr .85fr; gap:1rem; align-items:end}
.photo-pair figure{margin:0; overflow:hidden; border-radius:4px; box-shadow:var(--shadow)}
.photo-pair figure:first-child{aspect-ratio:4/5}
.photo-pair figure:last-child{aspect-ratio:3/4; margin-bottom:-2.4rem}
.photo-pair img{width:100%; height:100%; object-fit:cover}

/* ---------- Intro ---------- */
.intro .grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; position:relative; z-index:1}
.intro p{color:var(--yolk); max-width:46ch; font-size:1.06rem}
.intro .ill{position:relative; aspect-ratio:1.2/1; margin-right:-4%}
.intro .ill .plate{position:absolute; left:-2%; bottom:6%; width:64%; z-index:2}
.intro .ill .basket{position:absolute; right:0; bottom:16%; width:50%}
.intro .ill .chai{position:absolute; left:44%; bottom:30%; width:17%; z-index:1}
.stat-row{display:flex; gap:clamp(1.2rem,3vw,2.6rem); flex-wrap:wrap; margin-top:1.8rem}
.stat-row div{border-left:2px dashed var(--yolk); padding-left:.9rem}
.stat-row b{display:block; font-family:var(--serif); font-size:2rem; line-height:1; color:var(--cream-2); font-variation-settings:"SOFT" 100}
.stat-row span{font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--cream)}

/* ---------- 07 Product carousel ---------- */
.carousel{position:relative; z-index:1; padding-inline:clamp(0px,4vw,56px)}
.carousel-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2*2rem)/3);
  gap:2rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:.4rem .2rem 1rem;
}
.carousel-track::-webkit-scrollbar{display:none}
.car-btn{
  position:absolute; top:34%; z-index:3; width:46px; height:46px; display:grid; place-content:center;
  color:var(--forest); border-radius:50%; transition:.18s;
}
.car-btn:hover{background:rgba(30,77,58,.08)}
.car-btn svg{width:22px; height:36px}
.car-btn.prev{left:0}
.car-btn.next{right:0}

.egg-card{scroll-snap-align:start; text-align:center; display:flex; flex-direction:column; align-items:center}
.egg-card .stage{position:relative; width:min(100%,300px); aspect-ratio:1; margin-bottom:.6rem}
.egg-card .stage .doodle{position:absolute; inset:0; width:100%; height:100%}
.egg-card .stage img{
  position:absolute; left:50%; top:50%; width:var(--w,84%); transform:translate(-50%,-50%) rotate(var(--tilt,-4deg));
  filter:drop-shadow(0 16px 18px rgba(42,26,16,.28)); transition:transform .35s ease;
}
.egg-card:hover .stage img{transform:translate(-50%,-54%) rotate(0deg) scale(1.04)}
.egg-card h3{color:var(--tint); margin:.2rem 0 .1rem}
.egg-card .sub{font-size:.84rem; color:var(--muted); margin:0 0 .9rem}

/* ---------- 08 Featured rows (Vila) ---------- */
.feature{
  display:grid; grid-template-columns:34px 1fr 1.1fr .75fr 34px; gap:clamp(1rem,3vw,2.6rem);
  align-items:center; padding:clamp(2rem,5vw,3.6rem) 0; position:relative;
}
.feature + .feature{border-top:1px solid rgba(30,77,58,.18)}
.feature .side{
  writing-mode:vertical-rl; transform:rotate(180deg); justify-self:center;
  font-size:.66rem; font-weight:800; letter-spacing:.38em; text-transform:uppercase; color:var(--muted);
}
.feature .side--r{transform:none}
.feature h3{font-size:clamp(2rem,3.6vw,3rem); color:var(--forest); text-transform:lowercase; margin-bottom:.6rem}
.feature .copy p{color:var(--muted); max-width:36ch}
.feature .meta-line{
  display:flex; gap:.8rem; align-items:center; margin-top:1.1rem;
  font-size:.72rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--forest);
}
.feature .meta-line i{width:1px; height:14px; background:currentColor; opacity:.5}
.feature .visual{position:relative; aspect-ratio:1/1; display:grid; place-items:center}
.feature .visual svg.scribble{position:absolute; inset:0; width:100%; height:100%}
.feature .visual svg.scribble path{fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round}
.feature .visual img{position:relative; width:calc(var(--w,84%) * .92); filter:drop-shadow(0 22px 22px rgba(42,26,16,.3)); transform:rotate(var(--tilt,-5deg))}
.feature .facts{display:grid; gap:1.2rem; justify-items:start}
.feature .facts dl{margin:0; display:grid; gap:.15rem}
.feature .facts dt{font-family:var(--serif); font-size:1.6rem; color:var(--forest); line-height:1; font-variation-settings:"SOFT" 100}
.feature .facts dd{margin:0 0 .7rem; font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.feature--flip .copy{order:4}
.feature--flip .facts{order:2}
.feature--flip .visual{order:3}
.feature--flip .side--r{order:5}

/* ---------- 09 Quality (etching) ---------- */
.quality{overflow:hidden}
.quality .grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; position:relative; z-index:1}
.quality .etch{margin:0 0 calc(-1 * var(--sec)) calc(-1 * clamp(0px,3vw,40px)); align-self:end}
.quality .etch img{width:100%; height:auto}
.quality h2{color:var(--yolk)}
.quality p{max-width:44ch}
.checks{display:grid; gap:.5rem; margin:1.2rem 0 1.8rem}
.checks li{display:flex; gap:.6rem; align-items:flex-start; font-weight:700}
.checks li::before{content:''; flex:none; width:16px; height:20px; margin-top:.2rem; background:var(--yolk); border-radius:50% 50% 50% 50%/60% 60% 40% 40%}

/* ---------- 10 Supply ---------- */
.supply .grid{display:grid; grid-template-columns:1fr .8fr 1.1fr; gap:clamp(1.2rem,3vw,2.6rem); align-items:center; position:relative; z-index:1}
.supply h2{color:var(--yolk)}
.supply .cols{columns:2; column-gap:2rem; font-size:.95rem; line-height:1.9; color:var(--cream)}
.supply .cols li{break-inside:avoid}
.supply .tray{position:relative; z-index:6; align-self:end; margin-bottom:calc(-1 * (var(--sec) + var(--r) + 20px))}
.supply .tray img{width:100%; filter:drop-shadow(0 26px 30px rgba(0,0,0,.4)); transform:rotate(4deg)}
.route{position:relative; width:100%; aspect-ratio:1/1.05}
.route > svg{width:100%; height:100%; overflow:visible}
.route .lbl{font-family:var(--script); font-size:21px; font-weight:700; fill:var(--cream)}
.route .lbl--farm{fill:var(--yolk); font-size:24px}

/* ---------- 11 Campaign posters ---------- */
.campaign h2{color:var(--cream-2)}
.campaign .head{display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(2rem,4vw,3rem)}
.campaign .head .script{color:var(--yolk)}
.posters{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,3vw,2.4rem); align-items:start}
.poster{
  display:block; background:var(--cream-2); padding:12px 12px 4px; border-radius:4px; box-shadow:0 24px 40px rgba(60,0,30,.35);
  transform:rotate(var(--rot,0deg)); transition:transform .3s ease;
}
.poster:hover{transform:rotate(0) translateY(-8px)}
.poster img{width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:2px}
.poster figcaption{font-family:var(--script); font-size:1.45rem; font-weight:700; color:var(--berry); text-align:center; padding:.3rem 0 .4rem}
.poster:nth-child(2){margin-top:3rem}

/* ---------- 12 Farm scene & kitchen ---------- */
.kitchen{background:var(--yolk); padding-top:0; overflow:hidden}
.scene{position:relative; height:clamp(260px,30vw,400px); background:var(--cream-2); margin-bottom:-2px}
.scene .hills{position:absolute; inset:auto 0 0 0; width:100%; height:78%}
.scene .sun{position:absolute; right:16%; top:18%; width:clamp(90px,11vw,160px); aspect-ratio:1; border-radius:50%; background:var(--yolk-soft)}
.scene .barn{position:absolute; left:12%; bottom:31%; width:clamp(70px,8vw,120px); color:var(--forest); --barn-line:var(--cream-2)}
.scene .windmill{position:absolute; left:22%; bottom:30%; width:clamp(40px,4.4vw,66px); color:var(--forest)}
.scene .windmill .blades{animation:spin 14s linear infinite}
.scene .wheat{position:absolute; bottom:6%; width:clamp(26px,3vw,42px)}
.kitchen .inner{position:relative; padding:clamp(1rem,3vw,2rem) 0 calc(var(--sec) + 40px)}
.kitchen h2{color:var(--forest)}
.kitchen .head{display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; margin-bottom:2rem}
.kitchen .head .script{color:var(--rust)}
.recipe-pair{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,3vw,2.4rem)}
.rcard{display:grid; grid-template-rows:auto 1fr; background:var(--cream-2); border-radius:4px; overflow:hidden; box-shadow:0 18px 34px rgba(120,80,0,.18)}
.rcard .art{position:relative; aspect-ratio:16/9; background:var(--tint,var(--cream))}
.rcard .art svg{position:absolute; inset:14%; width:72%; height:72%; margin:auto}
.rcard .body{display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; align-items:end; padding:1.1rem 1.2rem 1.3rem}
.rcard .body small{grid-column:1/-1; font-size:.68rem; font-weight:800; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)}
.rcard h3{margin:0; font-size:1.35rem; color:var(--forest)}
.hens{position:absolute; right:4%; bottom:var(--r); display:flex; gap:.6rem; align-items:end; color:var(--forest); pointer-events:none}
.hens svg{width:78px; height:auto}
.hens svg:nth-child(2){width:58px; transform:scaleX(-1)}
.hens svg:nth-child(3){width:40px}

/* ---------- 13 Footer ---------- */
.site-footer{background:var(--forest); color:var(--cream); position:relative; z-index:0; margin-top:calc(-1 * var(--r)); padding:calc(var(--r) + 3.5rem) 0 0}
.footer-grid{display:grid; grid-template-columns:1.1fr .8fr 1.5fr; gap:clamp(1.5rem,4vw,3.5rem)}
.site-footer h4{font-family:var(--sans); font-size:.72rem; font-weight:800; letter-spacing:.32em; text-transform:uppercase; color:var(--yolk); margin-bottom:1rem}
.site-footer p,.site-footer li{font-size:.94rem}
.site-footer li{margin-bottom:.4rem}
.site-footer a:hover{color:var(--yolk)}
.f-logo{width:96px; margin-bottom:1rem}
.line-form{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.4rem}
.line-form .full{grid-column:1/-1}
.line-form label{display:block; font-size:.66rem; font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:var(--cream); opacity:.8; margin-bottom:.2rem}
.line-form input,.line-form textarea,.line-form select{
  width:100%; font:inherit; font-size:.95rem; color:var(--cream-2); background:transparent;
  border:0; border-bottom:1.5px solid rgba(252,232,204,.45); padding:.45rem 0; border-radius:0;
}
.line-form select option{color:var(--ink)}
.line-form textarea{min-height:80px; resize:vertical}
.line-form input:focus,.line-form textarea:focus,.line-form select:focus{outline:none; border-bottom-color:var(--yolk)}
.form-note{font-size:.88rem; color:var(--yolk); min-height:1.3em; margin:.6rem 0 0}
.f-bottom{margin-top:3rem; padding:1.1rem 0 1.4rem; border-top:1px solid rgba(252,232,204,.16); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; opacity:.85}
.fssai{display:inline-block; margin-top:.8rem; font-size:.74rem; letter-spacing:.06em; padding:.35rem .7rem; border:1px dashed rgba(252,232,204,.4); border-radius:6px}

/* ---------- 14 Inner pages ---------- */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:2.6rem; position:relative; z-index:1}
.chip{padding:.5rem 1.1rem; border-radius:999px; font-weight:800; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--forest); box-shadow:inset 0 0 0 1.5px var(--forest); transition:.18s}
.chip:hover{background:rgba(30,77,58,.08)}
.chip.is-active{background:var(--forest); color:var(--cream-2)}
.egg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2.6rem 2rem; position:relative; z-index:1}

/* product hero */
.p-hero .grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; position:relative; z-index:1}
.p-hero .blob{position:relative; aspect-ratio:1; display:grid; place-items:center}
.p-hero .blob::before{
  content:''; position:absolute; inset:2%; background:var(--tint);
  border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
}
.p-hero .blob .doodle{position:absolute; inset:9%; width:82%; height:82%; --doily-ink:rgba(0,0,0,.08)}
.p-hero .blob img{position:relative; width:calc(var(--w,84%) * .95); transform:rotate(-5deg); filter:drop-shadow(0 26px 26px rgba(42,26,16,.35))}
.p-hero h1{color:var(--forest); text-transform:none}
.p-hero .lead{color:var(--muted); font-size:1.1rem; max-width:44ch}
.methods{display:inline-flex; gap:1.1rem; flex-wrap:wrap; padding:.8rem 1.1rem; margin:1rem 0 1.4rem; border:1.5px dashed rgba(30,77,58,.4); border-radius:14px}
.methods div{display:grid; justify-items:center; gap:.3rem; color:var(--forest)}
.methods svg{width:32px; height:32px}
.methods span{font-size:.64rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase}
.p-hero .pills{display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.6rem}
.p-hero .pills .pill{background:var(--cream); }

/* how to cook */
.howto{background:var(--yolk); padding-top:0; padding-bottom:0; overflow:hidden}
.howto .in{display:grid; grid-template-columns:minmax(150px,17%) 1fr; position:relative}
.howto .tag{
  background:var(--rooster); color:var(--cream-2); display:grid; align-content:center;
  padding:calc(var(--r) + 2rem) 1.6rem 3rem clamp(1rem,4vw,3rem);
  clip-path:polygon(0 0, 100% 0, 78% 100%, 0 100%); margin-right:-3rem;
}
.howto .tag h2{font-size:clamp(2rem,3.4vw,3rem); margin:0}
.howto .cols{display:grid; grid-template-columns:repeat(3,1fr) minmax(170px,.8fr); gap:clamp(1rem,2.4vw,2rem); padding:calc(var(--r) + 2.4rem) clamp(1rem,3vw,3rem) calc(var(--r) + 2.4rem) 4rem}
.mcol svg.ic{display:block; width:54px; height:54px; margin:0 auto .4rem; color:var(--forest)}
.mcol h3{text-align:center; color:var(--forest); font-size:1.25rem; margin-bottom:.9rem}
.steps{display:grid; gap:.55rem}
.steps li{display:grid; grid-template-columns:auto 1fr; gap:.5rem; font-size:.9rem; line-height:1.45}
.steps b{background:var(--cream-2); border-radius:6px; padding:.08rem .45rem; font-size:.72rem; white-space:nowrap; height:fit-content}
.note{background:var(--rooster); color:var(--cream-2); padding:1.3rem 1.2rem; transform:skewX(-6deg); align-self:start; text-align:center}
.note > div{transform:skewX(6deg)}
.note p{font-weight:700; font-size:.9rem; margin:0}
.note .t{font-family:var(--script); font-size:1.6rem; color:var(--yolk); margin-bottom:.4rem}
.note hr{border:0; border-top:1.5px dashed var(--yolk); margin:.8rem 0}

/* label & gallery */
.label-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; position:relative; z-index:1}
.ntable{width:100%; border-collapse:collapse; font-size:.92rem; background:#fff; border-radius:10px; overflow:hidden; box-shadow:var(--shadow)}
.ntable caption{caption-side:top; text-align:left; font-family:var(--serif); font-size:1.4rem; color:var(--forest); padding:0 0 .6rem; font-variation-settings:"SOFT" 100}
.ntable th,.ntable td{padding:.55rem .9rem; text-align:left; border-bottom:1px solid #F1E6D6}
.ntable thead th{background:var(--tint); color:#fff; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase}
.ntable tbody tr:nth-child(even){background:#FFFAF2}
.small-note{font-size:.8rem; color:var(--muted); margin-top:.8rem}
.empty-label{background:#fff; border-radius:10px; padding:1.6rem; box-shadow:var(--shadow); border:2px dashed var(--tint)}
.gallery .main{border-radius:6px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/5; background:#fff; max-width:520px}
.gallery .main img{width:100%; height:100%; object-fit:cover}
.thumbs{display:flex; gap:.6rem; margin-top:.8rem; flex-wrap:wrap}
.thumbs button{width:84px; aspect-ratio:1; border-radius:6px; overflow:hidden; opacity:.65; transition:.18s; box-shadow:0 0 0 2px transparent}
.thumbs button.is-active,.thumbs button:hover{opacity:1; box-shadow:0 0 0 3px var(--tint)}
.thumbs img{width:100%; height:100%; object-fit:cover}

/* steps / process */
.process{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,3vw,2.4rem); position:relative; z-index:1}
.process .step{text-align:center}
.process .step .art{height:150px; display:grid; place-items:center; margin-bottom:.6rem}
.process .step .art svg,.process .step .art img{height:150px !important; width:auto !important; max-width:85%}
.process .num{font-family:var(--script); font-size:2rem; color:var(--tangerine); line-height:1}
.process h3{color:var(--forest)}
.process p{color:var(--muted); font-size:.95rem; max-width:30ch; margin-inline:auto}

.recipe-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; position:relative; z-index:1}

.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,4vw,3.5rem); position:relative; z-index:1}
.addr h3{font-size:1.25rem; color:var(--forest); margin-bottom:.3rem}
.addr .b{margin-bottom:1.5rem}
.addr a{font-weight:800; color:var(--rust)}
.map-slot{margin-top:1rem; height:240px; border-radius:8px; display:grid; place-content:center; text-align:center; gap:.3rem; background:repeating-linear-gradient(45deg,#F6E3C6 0 12px,#F2DBB9 12px 24px); color:var(--muted); font-size:.88rem}
.form-card{background:var(--forest); color:var(--cream); padding:clamp(1.4rem,3vw,2.4rem); border-radius:6px}
.form-card h2{color:var(--yolk); font-size:clamp(1.8rem,3vw,2.4rem)}
.faq{max-width:820px; margin-inline:auto; display:grid; gap:.7rem; position:relative; z-index:1}
.faq details{background:var(--cream-2); border-radius:6px; padding:1rem 1.2rem}
.faq summary{cursor:pointer; list-style:none; font-family:var(--serif); font-size:1.2rem; color:var(--forest); font-variation-settings:"SOFT" 100; display:flex; justify-content:space-between; gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; font-family:var(--sans); font-weight:800}
.faq details[open] summary::after{content:'\2013'}
.faq p{margin:.6rem 0 0; color:var(--muted); font-size:.95rem}

/* reveal */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* Home: all five eggs in one row under the slideshow */
.egg-row{display:flex; flex-wrap:wrap; justify-content:center; gap:2.2rem 1.4rem; position:relative; z-index:1}
.egg-row .egg-card{flex:0 1 calc((100% - 4*1.4rem)/5); min-width:0}
.egg-row .egg-card h3{font-size:clamp(1.1rem,1.6vw,1.4rem)}
.egg-row .egg-card .btn{padding:.5rem 1.1rem; font-size:.82rem}

/* filtered grids: stop the browser's scroll anchoring from shifting the page while cards animate */
.egg-grid,.recipe-grid{overflow-anchor:none}
html:has(.chips){overflow-anchor:none}