/* ============================================================
   UNITED FOOD REPUBLIC — shared design system
   Retro / groovy concept by Claude. Brand: "Real. Creative. Food."
   Palette = the five brand dots: indigo · coral · sage · orchid · marigold
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Pacifico&display=swap');

/* ---------- Tokens ---------- */
:root{
  /* brand colours (the five dots) */
  --indigo:#2c2a5e;
  --indigo-deep:#211f4a;
  --coral:#ec5a45;
  --coral-deep:#d8412c;
  --sage:#a9ce6e;
  --sage-deep:#88b24c;
  --orchid:#dc9bc9;
  --marigold:#f6a81f;
  --marigold-deep:#e08f06;

  /* warm neutrals */
  --cream:#fbf2df;
  --cream-2:#f6e8cd;
  --paper:#fffaf0;
  --ink:#2c2a5e;            /* default text = indigo */
  --ink-soft:#5b5882;

  /* roles */
  --bg:var(--cream);

  /* type */
  --display:'Fredoka', system-ui, sans-serif;
  --script:'Pacifico', cursive;
  --serif:'Fraunces', Georgia, serif;
  --ui:'Fredoka', system-ui, sans-serif;

  /* shape */
  --r-pill:999px;
  --r-lg:34px;
  --r-md:22px;

  /* hard retro shadow */
  --shadow-hard:6px 6px 0 var(--indigo);
  --shadow-hard-sm:4px 4px 0 var(--indigo);
  --shadow-soft:0 22px 50px -22px rgba(44,42,94,.45);

  --maxw:1180px;
  --nav-h:74px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--serif);
  font-optical-sizing:auto;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  overflow-x:clip;
  position:relative;
  font-size:clamp(16px,1.05vw,18px);
}
img,svg,picture{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:3px solid var(--coral); outline-offset:3px; border-radius:6px; }

/* film grain for retro warmth */
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1; letter-spacing:-.01em; }
.display{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.9rem,8.5vw,7rem); line-height:.92; letter-spacing:-.02em;
}
.h2{ font-size:clamp(2.1rem,5vw,3.8rem); line-height:.98; }
.h3{ font-size:clamp(1.5rem,3vw,2.2rem); }
.script{ font-family:var(--script); font-weight:400; letter-spacing:0; }
.serif{ font-family:var(--serif); }
.lead{ font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.55; color:var(--ink-soft); font-weight:500; }
.eyebrow{
  font-family:var(--ui); font-weight:600; text-transform:uppercase;
  letter-spacing:.22em; font-size:.78rem; color:var(--coral);
  display:inline-flex; align-items:center; gap:.5rem;
}
.eyebrow::before{ content:""; width:26px; height:3px; border-radius:2px; background:currentColor; }
.eyebrow.center::after{ content:""; width:26px; height:3px; border-radius:2px; background:currentColor; }
.eyebrow.center{ justify-content:center; }
mark{ background:linear-gradient(180deg,transparent 55%, var(--marigold) 55%); color:inherit; padding:0 .04em; }
.u-coral{ color:var(--coral); } .u-sage{ color:var(--sage-deep); }
.u-orchid{ color:var(--orchid); } .u-marigold{ color:var(--marigold); }
.u-cream{ color:var(--cream); } .u-indigo{ color:var(--indigo); }

/* ---------- Layout ---------- */
.container{ width:min(100% - 2.4rem, var(--maxw)); margin-inline:auto; }
.container-wide{ width:min(100% - 2.4rem, 1340px); margin-inline:auto; }
section{ position:relative; }
.section{ padding-block:clamp(4rem,8vw,7rem); }
.section-sm{ padding-block:clamp(2.6rem,5vw,4rem); }
.center{ text-align:center; }
.stack{ display:grid; gap:1.4rem; }
.measure{ max-width:46ch; }
.measure-wide{ max-width:62ch; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--coral); --btn-fg:#fff;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ui); font-weight:600; font-size:1.02rem;
  padding:.92em 1.6em; border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg);
  border:2.5px solid var(--indigo);
  box-shadow:var(--shadow-hard-sm);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), box-shadow .14s;
  white-space:nowrap;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--indigo); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--indigo); }
.btn .arrow{ transition:transform .2s; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--coral{ --btn-bg:var(--coral); }
.btn--marigold{ --btn-bg:var(--marigold); --btn-fg:var(--indigo); }
.btn--sage{ --btn-bg:var(--sage); --btn-fg:var(--indigo); }
.btn--orchid{ --btn-bg:var(--orchid); --btn-fg:var(--indigo); }
.btn--indigo{ --btn-bg:var(--indigo); --btn-fg:#fff; }
.btn--cream{ --btn-bg:var(--paper); --btn-fg:var(--indigo); }
.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--indigo); box-shadow:none; }
.btn--ghost:hover{ background:rgba(44,42,94,.06); box-shadow:none; transform:translateY(-1px); }
.btn--lg{ font-size:1.12rem; padding:1.05em 1.9em; box-shadow:var(--shadow-hard); }
.btn--lg:hover{ box-shadow:8px 8px 0 var(--indigo); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }

/* text link with squiggle */
.link-squiggle{ font-family:var(--ui); font-weight:600; color:var(--coral); display:inline-flex; align-items:center; gap:.4rem; }
.link-squiggle span{ background:linear-gradient(var(--coral),var(--coral)) bottom/100% 2px no-repeat; padding-bottom:3px; transition:background-size .25s; }
.link-squiggle:hover span{ background-size:100% 8px; }

/* ---------- Five-dot brand motif ---------- */
.dotstack{ display:inline-grid; gap:.34em; }
.dotstack.row{ grid-auto-flow:column; }
.dotstack i{ width:.78em; height:.78em; border-radius:50%; display:block; }
.dotstack i:nth-child(1){ background:var(--indigo); }
.dotstack i:nth-child(2){ background:var(--coral); }
.dotstack i:nth-child(3){ background:var(--sage); }
.dotstack i:nth-child(4){ background:var(--orchid); }
.dotstack i:nth-child(5){ background:var(--marigold); }

/* ---------- Top announcement ticker ---------- */
.ticker{
  background:var(--indigo); color:var(--cream); overflow:hidden;
  border-bottom:3px solid var(--indigo-deep); position:relative; z-index:60;
}
.ticker__track{ display:flex; gap:0; width:max-content; animation:ticker 32s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__group{ display:flex; align-items:center; }
.ticker span{ display:inline-flex; align-items:center; gap:.7rem; padding:.55rem 1.1rem;
  font-family:var(--ui); font-weight:500; font-size:.86rem; letter-spacing:.04em; white-space:nowrap; }
.ticker .star{ color:var(--marigold); }
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--cream) 86%, transparent);
  backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:2.5px solid var(--indigo);
}
.nav__inner{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:700; font-size:1.18rem; color:var(--indigo); letter-spacing:-.01em; }
.brand__mark{ flex:0 0 auto; }
.brand small{ display:block; font-family:var(--ui); font-weight:500; font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--coral); margin-top:2px; }
.nav__links{ display:flex; align-items:center; gap:.4rem; }
.nav__links a{ font-family:var(--ui); font-weight:500; font-size:1rem; padding:.5rem .85rem; border-radius:var(--r-pill); color:var(--indigo); position:relative; transition:background .2s,color .2s; }
.nav__links a:hover{ background:rgba(44,42,94,.07); }
.nav__links a.is-active{ background:var(--indigo); color:var(--cream); }
.nav__cta{ display:flex; align-items:center; gap:.6rem; }
.nav__toggle{ display:none; width:46px; height:46px; border-radius:14px; border:2.5px solid var(--indigo); background:var(--paper); align-items:center; justify-content:center; box-shadow:var(--shadow-hard-sm); }
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{ content:""; display:block; width:20px; height:2.5px; background:var(--indigo); border-radius:2px; position:relative; transition:.25s; }
.nav__toggle span::before{ position:absolute; top:-6px; } .nav__toggle span::after{ position:absolute; top:6px; }
body.nav-open .nav__toggle span{ background:transparent; }
body.nav-open .nav__toggle span::before{ top:0; transform:rotate(45deg); }
body.nav-open .nav__toggle span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:900px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:fixed; inset:calc(var(--nav-h)) 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--cream); border-bottom:3px solid var(--indigo); padding:1rem 1.2rem 1.6rem; gap:.2rem;
    transform:translateY(-130%); transition:transform .35s cubic-bezier(.4,1.3,.5,1); box-shadow:var(--shadow-soft);
  }
  body.nav-open .nav__links{ transform:translateY(0); }
  .nav__links a{ font-size:1.3rem; padding:.7rem .9rem; }
  .nav__cta .btn{ display:none; }
}

/* ---------- Marquee strip ---------- */
.marquee{ background:var(--coral); color:#fff; border-block:3px solid var(--indigo); overflow:hidden; padding:.7rem 0; }
.marquee.alt{ background:var(--marigold); color:var(--indigo); }
.marquee.sage{ background:var(--sage); color:var(--indigo); }
.marquee__track{ display:flex; gap:0; width:max-content; animation:marq 26s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee b{ font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,2.4vw,2rem); text-transform:uppercase; letter-spacing:.01em; padding:0 1.1rem; display:inline-flex; align-items:center; gap:1.1rem; }
.marquee b::after{ content:"✦"; font-size:.7em; opacity:.8; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ---------- Sunburst & blobs ---------- */
.sunburst{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sunburst::before{
  content:""; position:absolute; top:50%; left:50%; width:160vmax; height:160vmax; translate:-50% -50%;
  background:repeating-conic-gradient(from 0deg, var(--ray,rgba(246,168,31,.16)) 0deg 9deg, transparent 9deg 18deg);
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.sunburst.still::before{ animation:none; }
.blob{ position:absolute; z-index:0; filter:blur(2px); opacity:.5; pointer-events:none; }

/* floating doodles */
.float{ animation:float 6s ease-in-out infinite; }
.float.d1{ animation-delay:-1.5s; } .float.d2{ animation-delay:-3s; } .float.d3{ animation-delay:-4.5s; }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)); } 50%{ transform:translateY(-16px) rotate(var(--rot,0deg)); } }
.spin-slow{ }

/* ---------- Arch / photo frames ---------- */
.arch{
  position:relative; border-radius:50% 50% var(--r-md) var(--r-md)/ 38% 38% var(--r-md) var(--r-md);
  border:3px solid var(--indigo); overflow:hidden; box-shadow:var(--shadow-hard);
  background:linear-gradient(150deg,var(--orchid),var(--marigold));
}
.frame{ position:relative; border-radius:var(--r-lg); border:3px solid var(--indigo); overflow:hidden; box-shadow:var(--shadow-hard); background:linear-gradient(150deg,var(--sage),var(--marigold)); }
.frame--blob{ border-radius:42% 58% 60% 40% / 48% 42% 58% 52%; }
.photo{ position:relative; width:100%; height:100%; }
.photo img{ width:100%; height:100%; object-fit:cover; }
.photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%, rgba(44,42,94,.12)); pointer-events:none; }
.tape{ position:absolute; width:108px; height:30px; background:rgba(246,168,31,.72); border:1.5px dashed rgba(44,42,94,.4); top:-12px; left:50%; translate:-50% 0; rotate:-4deg; z-index:3; }

/* ---------- Cards ---------- */
.card{ background:var(--paper); border:3px solid var(--indigo); border-radius:var(--r-lg); box-shadow:var(--shadow-hard); padding:1.6rem; position:relative; transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; overflow:hidden; }
.card:hover{ transform:translate(-3px,-4px); box-shadow:9px 11px 0 var(--indigo); }
.card__icon{ width:62px; height:62px; border-radius:18px; border:2.5px solid var(--indigo); display:grid; place-items:center; margin-bottom:1rem; }
.card h3{ font-size:1.55rem; margin-bottom:.5rem; }
.card .tag{ font-family:var(--ui); font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.card ul.ticklist{ display:grid; gap:.5rem; margin-top:1rem; }
.ticklist li{ display:flex; gap:.6rem; align-items:flex-start; font-family:var(--ui); font-weight:400; font-size:1rem; color:var(--ink); }
.ticklist li::before{ content:""; flex:0 0 auto; width:20px; height:20px; margin-top:2px; border-radius:50%; background:var(--check,var(--sage)); border:2px solid var(--indigo);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c2a5e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size:13px; background-repeat:no-repeat; background-position:center; }
.grid{ display:grid; gap:1.4rem; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* split layout */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split.reverse .split__media{ order:-1; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } .split.reverse .split__media{ order:0; } }

/* badge stamp (rotating text seal) */
.stamp{ position:relative; width:var(--s,150px); height:var(--s,150px); display:grid; place-items:center; }
.stamp svg.ring{ position:absolute; inset:0; width:100%; height:100%; animation:spin 18s linear infinite; }
.stamp__core{ position:relative; z-index:2; text-align:center; font-family:var(--display); font-weight:700; line-height:.95; }

/* pill badge */
.pill{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--ui); font-weight:600; font-size:.82rem; letter-spacing:.04em;
  padding:.45em 1em; border-radius:var(--r-pill); border:2.5px solid var(--indigo); background:var(--paper); justify-self:start; }
.pill--center{ justify-self:center; }
.pill .dot{ width:9px; height:9px; border-radius:50%; background:var(--coral); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.5); opacity:.55; } }

/* ---------- Section colour blocks ---------- */
.band{ position:relative; }
.band--indigo{ background:var(--indigo); color:var(--cream); }
.band--coral{ background:var(--coral); color:#fff; }
.band--sage{ background:var(--sage); color:var(--indigo); }
.band--orchid{ background:var(--orchid); color:var(--indigo); }
.band--marigold{ background:var(--marigold); color:var(--indigo); }
.band--paper{ background:var(--paper); }
.band--cream2{ background:var(--cream-2); }

/* wavy / zig dividers (svg via mask not needed; inline svg used in pages) */
.edge{ display:block; width:100%; height:auto; }
.edge-flip{ transform:scaleX(-1); }

/* ---------- Forms ---------- */
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--ui); font-weight:600; font-size:.92rem; }
.field input,.field select,.field textarea{
  font-family:var(--serif); font-size:1rem; color:var(--ink);
  padding:.8rem 1rem; border-radius:16px; border:2.5px solid var(--indigo); background:var(--paper);
  width:100%; transition:box-shadow .15s, transform .15s;
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; box-shadow:var(--shadow-hard-sm); transform:translate(-1px,-1px); }
.field input::placeholder,.field textarea::placeholder{ color:#a29fbc; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:620px){ .form-grid{ grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.footer{ background:var(--indigo); color:var(--cream); position:relative; overflow:hidden; }
.footer a{ color:var(--cream); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; padding-block:clamp(3rem,6vw,4.5rem); }
.footer h4{ font-family:var(--ui); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; color:var(--marigold); margin-bottom:1rem; }
.footer__links{ display:grid; gap:.6rem; font-family:var(--ui); font-weight:400; }
.footer__links a{ opacity:.86; transition:opacity .2s, padding-left .2s; }
.footer__links a:hover{ opacity:1; padding-left:5px; }
.footer__brand .script{ color:var(--marigold); font-size:2rem; }
.social{ display:flex; gap:.6rem; }
.social a{ width:44px; height:44px; border-radius:50%; border:2.5px solid var(--cream); display:grid; place-items:center; transition:.2s; }
.social a:hover{ background:var(--marigold); border-color:var(--marigold); color:var(--indigo); transform:translateY(-3px); }
.footer__bottom{ border-top:2px solid rgba(251,242,223,.18); padding-block:1.3rem; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; align-items:center; font-family:var(--ui); font-size:.84rem; opacity:.82; }
@media (max-width:860px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__top{ grid-template-columns:1fr; } }

/* newsletter inline */
.subscribe{ display:flex; gap:.6rem; flex-wrap:wrap; }
.subscribe input{ flex:1 1 200px; padding:.8rem 1rem; border-radius:var(--r-pill); border:2.5px solid var(--cream); background:transparent; color:var(--cream); font-family:var(--serif); }
.subscribe input::placeholder{ color:rgba(251,242,223,.6); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s;} .reveal.d2{ transition-delay:.16s;} .reveal.d3{ transition-delay:.24s;} .reveal.d4{ transition-delay:.32s;}

/* ---------- Hero shared ---------- */
.hero{ position:relative; overflow:hidden; padding-top:clamp(2.4rem,5vw,4rem); padding-bottom:clamp(3rem,6vw,5rem); }
.hero__inner{ position:relative; z-index:2; }
.page-hero{ padding-block:clamp(3rem,6vw,5rem); position:relative; overflow:hidden; text-align:center; }
@media (max-width:640px){ .page-hero > svg.float{ display:none; } }

/* helpers */
.rotate-l{ transform:rotate(-3deg); } .rotate-r{ transform:rotate(3deg); }
.mt-1{ margin-top:1rem;} .mt-2{ margin-top:1.6rem;} .mt-3{ margin-top:2.4rem;}
.mb-1{ margin-bottom:1rem;} .mb-2{ margin-bottom:1.6rem;}
.relative{ position:relative; z-index:2; }
.flexc{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.hide-sm{ } @media(max-width:620px){ .hide-sm{ display:none !important; } }

/* ============================================================
   v2 — Food Republic: real logo, veggie shapes, Dead nod,
   spot illustrations, menu, meal cards, cart, IG feed
   ============================================================ */

/* ---- Brand logo (real artwork) ---- */
.brand{ gap:.55rem; }
.brand__logo{ height:46px; width:auto; display:block; }
@media (max-width:520px){ .brand__logo{ height:40px; } }
.brand__veg{ height:54px; width:auto; display:block; }
.footer .brand{ align-items:center; gap:.7rem; }
.footer__wordmark{ font-family:var(--display); font-weight:700; font-size:1.25rem; color:var(--cream); line-height:1; }

/* ---- Vegetable-shaped photo frames (replace blobs) ---- */
.frame--tomato{ border-radius:50%; }
.frame--leaf{ border-radius:10% 90% 10% 90% / 90% 10% 90% 10%; }
.frame--seed{ border-radius:50% 50% 48% 52% / 62% 62% 40% 40%; }   /* tomato/onion body */
.frame--pepper{ border-radius:46% 54% 48% 52% / 64% 64% 40% 40%; }
.frame__stem{ position:absolute; top:-24px; left:50%; translate:-50% 0; width:74px; z-index:4; pointer-events:none; filter:drop-shadow(0 3px 0 rgba(44,42,94,.15)); }
.frame__stem.right{ left:auto; right:14%; translate:0 0; rotate:14deg; }

/* ---- Veggie spot illustrations ---- */
.veg-illo{ position:absolute; z-index:1; pointer-events:none; }
.veg-illo img{ width:100%; height:auto; }
@media (max-width:760px){ .hero > .veg-illo, .page-hero > .veg-illo{ display:none; } }
.veg-row{ width:min(94%,720px); opacity:.95; }
.veg-divider{ display:flex; justify-content:center; padding:1.4rem 0 .2rem; }
.veg-divider img{ width:min(90%,640px); height:auto; }

/* ---- Grateful Dead nod: tie-dye, bolt, roses, dancers ---- */
.sunburst.tiedye::before{
  background:repeating-conic-gradient(from 0deg,
    var(--coral) 0deg 18deg, var(--marigold) 18deg 36deg, var(--sage) 36deg 54deg,
    var(--orchid) 54deg 72deg, var(--indigo) 72deg 90deg);
  opacity:.2; filter:blur(1px);
}
/* static tie-dye (no spin) — concentric brand-colour rings */
.tiedye-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.tiedye-bg::before{ content:""; position:absolute; inset:-20%;
  background:repeating-radial-gradient(circle at 50% 42%,
    var(--coral) 0 26px, var(--marigold) 26px 52px, var(--sage) 52px 78px,
    var(--orchid) 78px 104px, var(--indigo) 104px 130px);
  opacity:.16; filter:blur(2px); }
.bolt{ display:inline-block; color:var(--marigold); }
.bolt svg{ display:block; }
.tiedye-disc{ background:conic-gradient(from 20deg, var(--coral), var(--marigold), var(--sage), var(--orchid), var(--indigo), var(--coral)); }

/* dancing veggies — a wink at the dancing bears */
.dancers{ display:flex; gap:clamp(.6rem,3vw,2rem); justify-content:center; align-items:flex-end; flex-wrap:wrap; }
.dancer{ height:clamp(96px,14vw,152px); width:auto; display:block; transform-origin:bottom center; animation:boogie 1.6s ease-in-out infinite; }
.dancer:nth-child(2){ animation-delay:-.4s } .dancer:nth-child(3){ animation-delay:-.8s }
.dancer:nth-child(4){ animation-delay:-1.2s } .dancer:nth-child(5){ animation-delay:-.6s }
@keyframes boogie{ 0%,100%{ transform:rotate(-7deg) translateY(0) } 50%{ transform:rotate(7deg) translateY(-8px) } }

/* ---- Cornerstore menu ---- */
.menu-board{ display:grid; gap:1.6rem; }
.menu-cat{ background:var(--paper); border:3px solid var(--indigo); border-radius:var(--r-lg); box-shadow:var(--shadow-hard); overflow:hidden; }
.menu-cat__head{ display:flex; align-items:center; gap:.8rem; padding:1rem 1.4rem; border-bottom:3px solid var(--indigo); }
.menu-cat__head h3{ font-size:1.7rem; }
.menu-cat__head .emoji{ font-size:1.8rem; }
.menu-cat__head .blurb{ margin-left:auto; font-family:var(--ui); font-size:.82rem; color:var(--ink-soft); text-align:right; max-width:42%; }
.menu-list{ display:grid; }
.menu-row{ display:grid; grid-template-columns:1fr auto; gap:.2rem 1rem; align-items:baseline; padding:1rem 1.4rem; border-bottom:1.5px dashed rgba(44,42,94,.18); }
.menu-row:last-child{ border-bottom:none; }
.menu-row__name{ font-family:var(--display); font-weight:600; font-size:1.18rem; display:flex; align-items:center; gap:.5rem; }
.menu-row__price{ font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--coral); white-space:nowrap; }
.menu-row__desc{ grid-column:1/2; color:var(--ink-soft); font-size:.96rem; margin-top:.1rem; }
.menu-row__add{ grid-column:2/3; grid-row:2; align-self:start; }
.tag-chip{ font-family:var(--ui); font-weight:600; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; padding:.18em .6em; border-radius:var(--r-pill); border:2px solid var(--indigo); }
.tag-v{ background:var(--sage); color:var(--indigo); } .tag-gf{ background:var(--marigold); color:var(--indigo); } .tag-spicy{ background:var(--coral); color:#fff; }
@media (max-width:560px){ .menu-cat__head .blurb{ display:none; } }

/* ---- Meal-prep cards ---- */
.meal-card{ background:var(--paper); border:3px solid var(--indigo); border-radius:var(--r-lg); box-shadow:var(--shadow-hard-sm); overflow:hidden; display:flex; flex-direction:column; transition:transform .16s, box-shadow .16s; }
.meal-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hard); }
.meal-card__media{ aspect-ratio:5/4; border-bottom:3px solid var(--indigo); background:linear-gradient(150deg,var(--sage),var(--marigold)); position:relative; }
.meal-card__media img{ width:100%; height:100%; object-fit:cover; }
.meal-card__tagrow{ position:absolute; top:.6rem; left:.6rem; display:flex; gap:.35rem; }
.meal-card__body{ padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.meal-card__body h3{ font-size:1.3rem; }
.meal-card__body p{ font-size:.92rem; color:var(--ink-soft); flex:1; }
.meal-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.2rem; }
.meal-card__price{ font-family:var(--display); font-weight:700; font-size:1.3rem; }
.meal-card__price small{ font-weight:500; font-size:.7rem; color:var(--ink-soft); }

/* ---- Cart: fab, drawer, qty, toast ---- */
.cart-fab{ position:fixed; right:18px; bottom:18px; z-index:80; display:none; align-items:center; gap:.55rem;
  background:var(--coral); color:#fff; border:3px solid var(--indigo); border-radius:var(--r-pill);
  padding:.7rem 1.2rem; font-family:var(--ui); font-weight:600; box-shadow:var(--shadow-hard); cursor:pointer; transition:transform .15s; }
.cart-fab:hover{ transform:translateY(-2px); }
.cart-fab.show{ display:inline-flex; }
.cart-fab__count{ background:var(--marigold); color:var(--indigo); border:2px solid var(--indigo); border-radius:var(--r-pill); min-width:24px; height:24px; display:grid; place-items:center; font-size:.82rem; padding:0 .3em; }
.cart-backdrop{ position:fixed; inset:0; background:rgba(44,42,94,.5); z-index:90; opacity:0; pointer-events:none; transition:opacity .25s; }
.cart-backdrop.open{ opacity:1; pointer-events:auto; }
.cart-drawer{ position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); background:var(--cream); border-left:3px solid var(--indigo); z-index:95;
  transform:translateX(105%); transition:transform .32s cubic-bezier(.4,1.1,.5,1); display:flex; flex-direction:column; box-shadow:var(--shadow-soft); }
.cart-drawer.open{ transform:none; }
.cart-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:3px solid var(--indigo); background:var(--paper); }
.cart-drawer__head h3{ font-size:1.4rem; display:flex; align-items:center; gap:.5rem; }
.cart-close{ width:40px; height:40px; border-radius:12px; border:2.5px solid var(--indigo); background:var(--cream); display:grid; place-items:center; font-size:1.3rem; line-height:1; }
.cart-items{ flex:1; overflow-y:auto; padding:1rem 1.3rem; display:grid; gap:.8rem; align-content:start; }
.cart-empty{ text-align:center; color:var(--ink-soft); padding:2.4rem 1rem; }
.cart-line{ display:grid; grid-template-columns:1fr auto; gap:.2rem .8rem; padding:.8rem; border:2.5px solid var(--indigo); border-radius:16px; background:var(--paper); }
.cart-line__name{ font-family:var(--ui); font-weight:600; }
.cart-line__price{ font-family:var(--display); font-weight:600; color:var(--coral); }
.cart-line__rm{ grid-column:1/3; justify-self:start; font-size:.78rem; color:var(--ink-soft); text-decoration:underline; }
.qty{ display:inline-flex; align-items:center; border:2.5px solid var(--indigo); border-radius:var(--r-pill); overflow:hidden; background:var(--cream); }
.qty button{ width:30px; height:30px; font-weight:700; font-family:var(--ui); display:grid; place-items:center; color:var(--indigo); }
.qty button:hover{ background:var(--marigold); }
.qty span{ min-width:30px; text-align:center; font-family:var(--ui); font-weight:600; }
.cart-drawer__foot{ border-top:3px solid var(--indigo); padding:1.1rem 1.3rem 1.3rem; background:var(--paper); display:grid; gap:.8rem; }
.cart-total{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--display); font-weight:700; font-size:1.3rem; }
.cart-toast{ position:fixed; left:50%; bottom:84px; translate:-50% 0; z-index:120; background:var(--indigo); color:var(--cream); border:2.5px solid var(--indigo);
  padding:.7rem 1.2rem; border-radius:var(--r-pill); font-family:var(--ui); font-weight:600; box-shadow:var(--shadow-hard); opacity:0; transition:opacity .25s, translate .25s; }
.cart-toast.show{ opacity:1; translate:-50% -8px; }
.add-btn{ --btn-bg:var(--marigold); --btn-fg:var(--indigo); display:inline-flex; align-items:center; gap:.4rem; font-family:var(--ui); font-weight:600; font-size:.9rem;
  padding:.5em 1em; border-radius:var(--r-pill); background:var(--btn-bg); color:var(--btn-fg); border:2.5px solid var(--indigo); box-shadow:var(--shadow-hard-sm); transition:transform .12s, box-shadow .12s; }
.add-btn:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--indigo); }
.add-btn:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--indigo); }

/* ---- Instagram feed ---- */
.ig-head{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; justify-content:space-between; margin-bottom:1.3rem; }
.ig-handle{ display:flex; align-items:center; gap:.8rem; }
.ig-avatar{ width:60px; height:60px; border-radius:50%; border:3px solid var(--indigo); background:conic-gradient(from 30deg,var(--coral),var(--marigold),var(--sage),var(--orchid),var(--coral)); display:grid; place-items:center; }
.ig-avatar span{ width:46px; height:46px; border-radius:50%; background:var(--paper); display:grid; place-items:center; font-size:1.4rem; }
.ig-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:.6rem; }
.ig-cell{ position:relative; aspect-ratio:1; border:3px solid var(--indigo); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-hard-sm); background:var(--cream-2); }
.ig-cell img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.ig-cell:hover img{ transform:scale(1.08); }
.ig-cell__ov{ position:absolute; inset:0; background:rgba(44,42,94,.55); color:#fff; display:grid; place-items:center; gap:.3rem; opacity:0; transition:opacity .25s; font-family:var(--ui); font-weight:600; }
.ig-cell:hover .ig-cell__ov{ opacity:1; }
@media (max-width:900px){ .ig-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:460px){ .ig-grid{ grid-template-columns:repeat(2,1fr); } }

/* Order link shows only inside the mobile menu (desktop uses the CTA button) */
.nav__links .mobile-only{ display:none; }
@media (max-width:900px){ .nav__links .mobile-only{ display:block; } }

/* ============================================================
   v3 — finesse pass
   ============================================================ */

/* cards keep dark text even on dark bands (fixes unreadable cards) */
.card{ color:var(--ink); }

/* green outline behind indigo (purple) buttons so they pop on any bg */
.btn--indigo{ box-shadow:4px 4px 0 var(--sage); }
.btn--indigo:hover{ box-shadow:7px 7px 0 var(--sage); transform:translate(-2px,-2px); }
.btn--indigo:active{ box-shadow:2px 2px 0 var(--sage); }
.btn--lg.btn--indigo{ box-shadow:6px 6px 0 var(--sage); }
.btn--lg.btn--indigo:hover{ box-shadow:9px 9px 0 var(--sage); }

/* outline behind the brand dots so they read on matching backgrounds */
.dotstack i{ border:2px solid var(--indigo); box-sizing:border-box; }
.band--indigo .dotstack i, .band--coral .dotstack i{ border-color:var(--cream); }

/* nav fits 6 links + 2 buttons; hamburger kicks in sooner */
.nav__links{ gap:.1rem; }
.nav__links a{ padding:.5rem .68rem; }
.nav__cta{ gap:.5rem; }
@media (max-width:1040px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:fixed; inset:calc(var(--nav-h)) 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--cream); border-bottom:3px solid var(--indigo); padding:1rem 1.2rem 1.6rem; gap:.2rem;
    transform:translateY(-130%); transition:transform .35s cubic-bezier(.4,1.3,.5,1); box-shadow:var(--shadow-soft);
  }
  body.nav-open .nav__links{ transform:translateY(0); }
  .nav__links a{ font-size:1.3rem; padding:.7rem .9rem; }
  .nav__cta .btn{ display:none; }
}

/* footer: real Food Republic logo on a light chip */
.footer-logo{ display:inline-block; background:var(--cream); border:2.5px solid var(--indigo); border-radius:16px; padding:.55rem .85rem; box-shadow:var(--shadow-hard-sm); }
.footer-logo img{ height:44px; width:auto; display:block; }

/* step number badge (readable, on-brand) */
.step-num{ width:54px; height:54px; border-radius:50%; border:2.5px solid var(--indigo); display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:1.6rem; color:var(--indigo); margin-bottom:.7rem; }

/* line-icon helper (logo-style illustrations) */
.line-ico{ display:inline-grid; place-items:center; }
.line-ico svg{ display:block; }
.cat-ico svg{ width:30px; height:30px; }
.pill .line-ico svg{ width:18px; height:18px; }

/* IG avatar holds the Instagram glyph */
.ig-avatar span svg{ width:26px; height:26px; }

/* center the nav links between the logo and the CTAs (desktop) */
@media (min-width:1041px){
  .nav__inner{ display:grid; grid-template-columns:1fr auto 1fr; }
  .nav__inner > .brand{ justify-self:start; }
  .nav__inner > .nav__cta{ justify-self:end; }
}

/* faint food illustration sitting behind a heading */
.veg-bg{ position:absolute; inset:0; display:grid; place-items:center; z-index:0; pointer-events:none; }
.veg-bg img{ width:min(58%,420px); opacity:.1; }