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

/* ============ TOKENS ============ */
/* Ital Roots commits to a warm, light, photo-led identity — this is a brand
   choice, not a light/dark toggle, so these tokens hold regardless of the
   viewer's system theme. Black and deep green stay in the palette as
   deliberate accents (the footer, a few small details) rather than as a
   whole alternate "dark mode" for the site. */
:root{
  --bg:#F8F3E8;
  --surface:#FFFFFF;
  --surface-2:#F0E9D8;
  --border:#E2D6B8;
  --text:#211B12;
  --text-muted:#6B5D46;
  --accent:#2E4B1E;      /* deep olive-green, from the logo's leaf green */
  --accent-ink:#F8F3E8;  /* text on accent */
  --accent-hover:#20350F;
  --gold:#AD8422;        /* warm gold from the logo ring, darkened for AA on cream */
  --terracotta:#9C4322;
  --success:#2F6B3A;
  --danger:#8C2E22;
  --focus:#AD8422;

  /* root-vegetable accents, lifted from the logo lettering */
  --root-a:#D9762E; /* carrot */
  --root-b:#8E2049; /* beet */
  --root-c:#C9AE79; /* taro */
  --root-d:#B85B52; /* rose */

  --brand-bg:#0A0806;
  --brand-bg-2:#000000;
  --brand-ink:#F5EFE1;
  --brand-muted:#C9BE9C;
  --brand-gold:#DCB94E;
  --brand-line:rgba(245,239,225,0.18);

  --radius-s:6px;
  --radius-m:12px;
  --radius-l:20px;
  --shadow-card:0 1px 2px rgba(33,27,18,0.05), 0 8px 24px -12px rgba(33,27,18,0.14);
  --shadow-sheet:0 -8px 30px -10px rgba(20,16,10,0.35);
  --font-display:'Fraunces', 'Iowan Old Style', ui-serif, Georgia, serif;
  --font-ui:'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;}
::selection{background:var(--gold);color:var(--brand-bg);}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}

/* ============ LAYOUT ============ */
.wrap{max-width:520px;margin:0 auto;padding:0 20px;}
@media (min-width:860px){ .wrap{max-width:920px;} }

section{scroll-margin-top:64px;}
.section{padding:52px 0;}
.section.alt{background:var(--surface-2);}
.section-head{margin-bottom:28px;max-width:560px;}
.eyebrow{
  font:600 12px/1 var(--font-display);letter-spacing:0.07em;text-transform:uppercase;
  color:var(--gold);margin:0 0 10px;
}
h2.section-title{
  font:600 clamp(1.6rem,4.8vw,2.15rem)/1.15 var(--font-display);
  text-wrap:balance;margin:0 0 8px;color:var(--text);
}
.section-sub{color:var(--text-muted);font-size:0.95rem;max-width:52ch;margin:0;}

/* ============ TOPBAR ============ */
.topbar{
  position:sticky;top:0;z-index:40;background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border);
}
.topbar-row{display:flex;align-items:center;justify-content:space-between;padding:8px 20px;max-width:520px;margin:0 auto;}
@media (min-width:860px){ .topbar-row{max-width:920px;} }
.topbar-logo{height:44px;width:auto;}
.basket-pill{
  display:flex;align-items:center;gap:7px;background:var(--accent);color:var(--accent-ink);
  border:none;border-radius:999px;padding:9px 14px;font:700 0.8rem/1 var(--font-ui);cursor:pointer;
}
.basket-pill .count{background:var(--accent-ink);color:var(--accent);border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;font-size:0.68rem;padding:0 4px;}

/* ============ BRAND BLOCKS (fixed palette — used deliberately, footer only) ============ */
.brand-block{background:var(--brand-bg);color:var(--brand-ink);}

/* ============ HERO — light, typographic, photo-led ============ */
.hero{padding:36px 0 0;}
.hero-grid{display:grid;gap:32px;}
@media (min-width:860px){ .hero-grid{grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:24px 0;} }
.hero-copy{animation:riseIn 0.6s ease-out both;}
.hero .eyebrow{display:block;text-align:center;}
@media (min-width:860px){ .hero .eyebrow{text-align:left;} }
.hero h1{margin:0 0 10px;text-align:center;}
@media (min-width:860px){ .hero h1{text-align:left;} }
.hero-wordmark{width:min(360px,78vw);height:auto;margin:0 auto;}
@media (min-width:860px){ .hero-wordmark{width:min(420px,100%);margin:0;} }
.hero-tagline{
  font:600 clamp(1.15rem,3.6vw,1.5rem)/1.3 var(--font-display);font-style:italic;color:var(--accent);
  margin:0 0 20px;text-align:center;
}
@media (min-width:860px){ .hero-tagline{text-align:left;} }
.hero-facts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:0 0 22px;padding:18px 0;
  list-style:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
@media (min-width:860px){ .hero-facts{justify-content:flex-start;} }
.hero-facts li{font:700 1.05rem/1.2 var(--font-ui);color:var(--text);}
.hero-facts li span{display:block;font:500 10.5px/1 var(--font-ui);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin-top:4px;}
.hero-sub{font:500 0.98rem/1.55 var(--font-ui);color:var(--text-muted);max-width:38ch;margin:0 auto 26px;text-align:center;}
@media (min-width:860px){ .hero-sub{margin:0 0 26px;text-align:left;} }
.hero-ctas{display:flex;flex-direction:column;gap:10px;max-width:340px;margin:0 auto;}
@media (min-width:520px){ .hero-ctas{flex-direction:row;} }
@media (min-width:860px){ .hero-ctas{margin:0;max-width:none;} }
.hero-photo{border-radius:var(--radius-l);overflow:hidden;box-shadow:var(--shadow-card);background:var(--surface-2);animation:riseIn 0.7s ease-out 0.1s both;}
/* Match the container to the photo's own aspect ratio (1400x1273) and use
   `contain` rather than `cover` — the full composition (container, hand,
   compartments, sleeve, kitchen background) must stay visible, never
   cropped to fill the box. */
.hero-photo img{width:100%;height:100%;object-fit:contain;aspect-ratio:1400/1273;}
@keyframes riseIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ============ BUTTONS ============ */
.btn{
  appearance:none;border:none;border-radius:999px;padding:15px 24px;font:700 0.95rem/1 var(--font-ui);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
  min-height:50px;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--gold);color:#211B12;}
.btn-primary:hover{background:var(--brand-gold);}
.btn-on-brand{background:var(--brand-gold);color:#1B1404;}
.btn-ghost{background:transparent;color:var(--brand-ink);border:1.5px solid var(--brand-line);}
.btn-ghost:hover{border-color:var(--brand-gold);}
.btn-solid{background:var(--accent);color:var(--accent-ink);width:100%;}
.btn-solid:hover{background:var(--accent-hover);}
.btn-solid:disabled{opacity:0.45;cursor:not-allowed;}
.btn-outline{background:transparent;color:var(--accent);border:1.5px solid var(--border);width:100%;}
.btn-outline:hover{border-color:var(--accent);}
.btn-link{background:none;border:none;color:var(--gold);font:700 0.85rem var(--font-ui);cursor:pointer;padding:6px 0;}
.btn-sm{padding:9px 14px;min-height:auto;font-size:0.8rem;border-radius:999px;}

/* ============ PHOTOGRAPHIC JOURNEY ============ */
/* Large, full-bleed photography carries this section — no cards, no icons.
   Mobile: full-width photo, caption below. Desktop: alternating image/text
   split, photo side flipping each stage for editorial rhythm. */
.journey-section{padding-bottom:8px;}
.journey-stages{display:flex;flex-direction:column;}
.journey-stage{display:grid;grid-template-columns:1fr;margin-bottom:44px;}
.journey-stage:last-child{margin-bottom:0;}
@media (min-width:860px){
  .journey-stage{grid-template-columns:1fr 1fr;align-items:center;gap:0;max-width:1180px;margin:0 auto 64px;}
  .journey-stage:nth-child(even) .journey-media{order:2;}
}
.journey-media{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--surface-2);}
@media (min-width:860px){ .journey-media{aspect-ratio:1/1;} }
.journey-media img{width:100%;height:100%;object-fit:cover;display:block;}
.journey-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(120% 100% at 50% 0%, #1B140C, var(--brand-bg) 70%);color:var(--brand-muted);
}
.journey-ph-num{font:400 3.2rem/1 var(--font-display);font-style:italic;color:var(--brand-gold);}
.journey-placeholder p{font:600 0.72rem/1 var(--font-ui);letter-spacing:0.08em;text-transform:uppercase;margin:0;}
.journey-text{padding:22px 20px 0;}
@media (min-width:860px){ .journey-text{padding:0 60px;} }
.journey-num{font:400 1.05rem/1 var(--font-display);font-style:italic;color:var(--gold);display:block;margin-bottom:8px;}
.journey-text h3{font:600 clamp(1.5rem,5vw,2rem)/1.1 var(--font-display);margin:0 0 10px;text-wrap:balance;}
.journey-text p{margin:0;color:var(--text-muted);font-size:0.95rem;max-width:38ch;}
.journey-text p em{font-style:normal;color:var(--text-muted);opacity:0.75;font-size:0.85rem;}

/* ============ STATUS STRIP ============ */
.status-strip{background:var(--surface);border-bottom:1px solid var(--border);}
.status-scroll{display:flex;gap:10px;overflow-x:auto;padding:16px 20px;max-width:520px;margin:0 auto;scrollbar-width:none;}
.status-scroll::-webkit-scrollbar{display:none;}
@media (min-width:860px){ .status-scroll{max-width:920px;flex-wrap:wrap;overflow:visible;} }
.chip{
  flex:0 0 auto;padding:0 18px;min-width:140px;border-left:1px solid var(--border);
}
.chip:first-child{border-left:none;padding-left:0;}
.chip .k{font:700 9.5px/1 var(--font-ui);letter-spacing:0.07em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:5px;}
.chip .v{font:700 0.88rem/1.25 var(--font-ui);}
.chip.open .v{color:var(--gold);font-family:var(--font-display);font-weight:600;letter-spacing:0.02em;}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);margin-right:6px;}

/* ============ MENU DISPLAY ============ */
/* One "menu sheet" panel instead of five separate boxed cards — internal
   sections are divided by rules (top border on mobile, a vertical rule
   between the two columns on desktop) rather than repeated card chrome. */
.menu-sheet{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);
  padding:24px 20px;display:grid;gap:28px;
}
@media (min-width:860px){ .menu-sheet{grid-template-columns:1fr 1fr;padding:34px 36px;gap:36px;} }
.menu-sheet-col-divider{border-top:1px solid var(--border);padding-top:24px;}
@media (min-width:860px){
  .menu-sheet-col-divider{border-top:none;border-left:1px solid var(--border);padding-top:0;padding-left:36px;}
}
.menu-sheet-block + .menu-sheet-block{margin-top:22px;padding-top:22px;border-top:1px solid var(--border);}
.menu-sheet h3{font:600 13px/1 var(--font-display);letter-spacing:0.05em;text-transform:uppercase;color:var(--accent);margin:0 0 14px;}
.menu-photo{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:var(--radius-m);margin-bottom:14px;}
.main-item{padding:12px 0;border-top:1px solid var(--border);display:flex;gap:10px;align-items:flex-start;}
.main-item:first-of-type{border-top:none;padding-top:0;}
.main-item .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:7px;}
.main-item .name{font:700 1rem/1.3 var(--font-display);margin:0 0 3px;}
.main-item .desc{font-size:0.85rem;color:var(--text-muted);margin:0;}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;}
.tag{background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font:600 0.82rem var(--font-ui);}
.price-line{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--border);font-size:0.9rem;}
.price-line:first-of-type{border-top:none;}
.price-line b{font-variant-numeric:tabular-nums;color:var(--gold);}
.includes-note{margin-top:16px;padding:14px;background:var(--surface-2);border-radius:var(--radius-s);font-size:0.85rem;color:var(--text-muted);}
.includes-note b{color:var(--text);}

/* ============ BUILDER ============ */
.progress-card{
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-l);
  padding:20px;margin-bottom:22px;
}
.progress-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:10px;}
.progress-count{font:700 1.3rem/1 var(--font-ui);font-variant-numeric:tabular-nums;}
.progress-count small{font-weight:500;color:var(--text-muted);font-size:0.7em;}
.progress-track{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:10px;}
.progress-fill{height:100%;background:var(--accent);border-radius:999px;transition:width 0.35s ease;}
.progress-msg{font-size:0.88rem;color:var(--text-muted);margin:0;}
.progress-msg.done{
  display:inline-flex;background:var(--gold);color:#211B12;font:700 0.78rem/1 var(--font-ui);
  letter-spacing:0.03em;text-transform:uppercase;padding:8px 14px;border-radius:999px;
}
.progress-stats{display:flex;gap:18px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.progress-stats div span{display:block;font:700 10px/1 var(--font-ui);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px;}
.progress-stats div b{font:700 1.05rem var(--font-ui);font-variant-numeric:tabular-nums;}

.builder-card{
  background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--gold);
  border-radius:var(--radius-l);padding:24px 20px;box-shadow:var(--shadow-card);
}
.builder-card h3{font:600 1.25rem var(--font-display);margin:0 0 18px;}
.field-label{font:700 11px/1 var(--font-ui);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 10px;display:block;}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:22px;}
.opt-card{
  position:relative;border:1.5px solid var(--border);border-radius:var(--radius-m);padding:12px 34px 12px 12px;text-align:left;
  background:var(--surface);cursor:pointer;font-family:var(--font-ui);color:var(--text);
  min-height:56px;display:flex;align-items:center;gap:9px;transition:border-color 0.12s ease, background 0.12s ease;
}
.opt-card .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.opt-card .name{font:700 0.92rem/1.25 var(--font-display);}
.opt-card::after{
  content:'';position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--border);background:var(--surface);
}
.opt-card.is-selected{border-color:var(--accent);border-width:2px;background:color-mix(in srgb, var(--accent) 10%, var(--surface));}
.opt-card.is-selected .name{color:var(--accent);}
.opt-card.is-selected::after{
  border-color:var(--accent);background:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E");
  background-size:11px 11px;background-position:center;background-repeat:no-repeat;
}

.seg{display:flex;border:1.5px solid var(--border);border-radius:999px;padding:3px;margin-bottom:22px;}
.seg button{flex:1;border:none;background:transparent;padding:10px;border-radius:999px;font:700 0.85rem var(--font-ui);color:var(--text-muted);cursor:pointer;}
.seg button.is-selected{background:var(--accent);color:var(--accent-ink);}

.qty-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.stepper{display:flex;align-items:center;gap:0;border:1.5px solid var(--border);border-radius:999px;overflow:hidden;}
.stepper button{width:40px;height:40px;border:none;background:var(--surface-2);font:700 1.1rem var(--font-ui);color:var(--text);cursor:pointer;}
.stepper button:active{background:var(--border);}
.stepper .qn{width:38px;text-align:center;font:700 1rem var(--font-ui);font-variant-numeric:tabular-nums;}

.your-week{margin-top:26px;}
.your-week h3{font:600 1.05rem var(--font-display);margin:0 0 12px;}
.combo-line{
  display:flex;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-m);padding:14px;margin-bottom:10px;
}
.combo-line .info b{font:700 0.92rem var(--font-display);display:block;margin-bottom:2px;}
.combo-line .info span{font-size:0.8rem;color:var(--text-muted);}
.combo-line .right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto;}
.combo-line .price{font:700 0.9rem var(--font-ui);font-variant-numeric:tabular-nums;}
.combo-actions{display:flex;align-items:center;gap:8px;}
.stepper.sm button{width:30px;height:30px;font-size:0.95rem;}
.stepper.sm .qn{width:26px;font-size:0.85rem;}
.remove-x{background:none;border:none;color:var(--text-muted);font-size:1.05rem;cursor:pointer;padding:4px;line-height:1;}
.remove-x:hover{color:var(--danger);}
.empty-note{font-size:0.87rem;color:var(--text-muted);padding:16px 0;text-align:center;}

/* ============ EXTRAS ============ */
.extra-list{display:flex;flex-direction:column;gap:1px;background:var(--border);border-radius:var(--radius-m);overflow:hidden;border:1px solid var(--border);}
.extra-row{display:flex;justify-content:space-between;align-items:center;background:var(--surface);padding:14px;gap:12px;}
.extra-row .name{font:700 0.9rem var(--font-ui);}
.extra-row .price{font-size:0.8rem;color:var(--text-muted);font-variant-numeric:tabular-nums;}
.extras-drinks-grid{display:grid;gap:16px;grid-template-columns:1fr;}
@media (min-width:600px){ .extras-drinks-grid{grid-template-columns:160px 1fr;align-items:start;} }
.extras-drinks-photo{width:100%;height:auto;max-width:220px;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius-m);}
@media (min-width:600px){ .extras-drinks-photo{max-width:none;} }

/* ============ STICKY BAR ============ */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--accent);color:var(--accent-ink);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px -8px rgba(0,0,0,0.3);
  transform:translateY(110%);transition:transform 0.28s ease;
}
.sticky-bar.is-visible{transform:translateY(0);}
.sticky-inner{max-width:520px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;}
@media (min-width:860px){ .sticky-inner{max-width:920px;} }
.sticky-info b{display:block;font:700 1rem var(--font-ui);font-variant-numeric:tabular-nums;}
.sticky-info span{font-size:0.72rem;opacity:0.85;}
.sticky-bar .btn{background:var(--accent-ink);color:var(--accent);white-space:nowrap;}

/* ============ SHEET (basket) ============ */
.sheet-overlay{
  position:fixed;inset:0;background:rgba(15,12,8,0.5);z-index:60;opacity:0;pointer-events:none;transition:opacity 0.25s ease;
}
.sheet-overlay.is-open{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:61;background:var(--bg);border-radius:20px 20px 0 0;
  max-height:86vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 0.3s ease;
  box-shadow:var(--shadow-sheet);
}
.sheet-overlay.is-open .sheet{transform:translateY(0);}
.sheet-handle{width:36px;height:4px;background:var(--border);border-radius:999px;margin:10px auto 4px;}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:10px 20px 14px;border-bottom:1px solid var(--border);}
.sheet-head h3{font:600 1.15rem var(--font-display);margin:0;}
.sheet-close{background:none;border:none;font-size:1.3rem;color:var(--text-muted);cursor:pointer;padding:4px;}
.sheet-body{overflow-y:auto;padding:16px 20px;flex:1;}
.sheet-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--surface);}
.recap-row{display:flex;justify-content:space-between;font-size:0.9rem;padding:6px 0;}
.recap-row.total{font-weight:800;font-size:1.05rem;border-top:1px solid var(--border);margin-top:6px;padding-top:12px;font-variant-numeric:tabular-nums;}
.recap-row span:last-child{font-variant-numeric:tabular-nums;}
/* meal lines echo the builder's "Your Week" list (colour dot + serif name)
   so checkout reads as that same list's culmination, not a generic table row */
.recap-row.recap-meal{justify-content:flex-start;align-items:flex-start;gap:9px;padding:9px 0;}
.recap-meal .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;margin-top:6px;}
.recap-meal-text{flex:1;}
.recap-meal-text b{font:700 0.88rem/1.3 var(--font-display);display:block;}
.recap-meal-text small{color:var(--text-muted);font-size:0.78rem;}
.recap-meal-price{flex:0 0 auto;font-weight:700;font-variant-numeric:tabular-nums;}
.section-mini-title{font:700 11px/1 var(--font-ui);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin:18px 0 8px;}
.section-mini-title:first-child{margin-top:0;}
/* Checkout reads as clearly separate zones (fulfilment / details / allergy /
   opt-in / your week / payment) rather than one long flowing form. */
#checkoutFormBlock > .section-mini-title{border-top:1px solid var(--border);padding-top:24px;margin-top:28px;}
#checkoutFormBlock > .section-mini-title:first-child{border-top:none;padding-top:0;margin-top:0;}

/* ============ CHECKOUT ============ */
.hint-note{font-size:0.82rem;color:var(--text-muted);margin:10px 0 0;}
.fulfil-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.fulfil-grid.single-option{grid-template-columns:1fr;}
.fulfil-card{
  position:relative;border:1.5px solid var(--border);border-radius:var(--radius-m);padding:16px 40px 16px 14px;background:var(--surface);
  cursor:pointer;text-align:left;
}
.fulfil-card::after{
  content:'';position:absolute;top:14px;right:14px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--border);background:var(--surface);
}
.fulfil-card.is-selected{border-color:var(--accent);border-width:2px;background:color-mix(in srgb, var(--accent) 10%, var(--surface));}
.fulfil-card.is-selected::after{
  border-color:var(--accent);background:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E");
  background-size:11px 11px;background-position:center;background-repeat:no-repeat;
}
.fulfil-card .name{font:700 0.95rem var(--font-ui);display:block;margin-bottom:3px;}
.fulfil-card .price{font-size:0.8rem;color:var(--text-muted);}
.fulfil-card.is-selected .price{color:var(--accent);font-weight:700;}

.field{margin-bottom:16px;}
.field label{display:block;font:700 11px/1 var(--font-ui);letter-spacing:0.05em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;}
.field input,.field textarea{
  width:100%;border:1.5px solid var(--border);border-radius:var(--radius-s);padding:13px 14px;
  font:500 0.95rem var(--font-ui);background:var(--surface);color:var(--text);
}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:none;}
.field textarea{resize:vertical;min-height:70px;}
.field-row{display:flex;gap:10px;}
.field-row .field{flex:1;}
.postcode-row{display:flex;gap:10px;}
.postcode-row input{flex:1;}
.zone-result{margin-top:10px;padding:12px 14px;border-radius:var(--radius-s);font-size:0.87rem;display:none;}
.zone-result.show{display:block;}
.zone-result.ok{background:color-mix(in srgb, var(--success) 15%, var(--surface));color:var(--success);border:1px solid color-mix(in srgb, var(--success) 35%, transparent);}
.zone-result.no{background:color-mix(in srgb, var(--danger) 12%, var(--surface));color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 30%, transparent);}
.check-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;}
.check-row input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);}
.check-row label{font-size:0.87rem;color:var(--text-muted);font-weight:500;text-transform:none;letter-spacing:0;}

.pay-methods{display:flex;justify-content:center;gap:8px;margin-bottom:10px;}
.pay-method{padding:5px 0;text-align:center;font:700 0.78rem var(--font-ui);color:var(--text-muted);}
.pay-method + .pay-method::before{content:'·';margin-right:8px;color:var(--border);}
.demo-note{font-size:0.78rem;color:var(--text-muted);text-align:center;margin:4px 0 16px;}

.checkout-recap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:16px;margin:20px 0;}
.error-box{background:color-mix(in srgb, var(--danger) 12%, var(--surface));border:1px solid color-mix(in srgb, var(--danger) 30%, transparent);color:var(--danger);border-radius:var(--radius-s);padding:12px 14px;font-size:0.85rem;margin-bottom:16px;display:none;}
.error-box.show{display:block;}

/* ============ CONFIRMATION ============ */
.confirm{text-align:center;padding:10px 0 20px;}
.confirm .big{font:600 1.7rem/1.2 var(--font-display);margin:14px 0 6px;}
.confirm .order-no{font-size:0.85rem;color:var(--text-muted);margin-bottom:26px;}
.confirm-summary{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:18px;margin-bottom:20px;}
.next-steps{list-style:none;padding:0;margin:0 0 24px;text-align:left;display:flex;flex-direction:column;gap:12px;}
.next-steps li{display:flex;gap:12px;font-size:0.9rem;align-items:flex-start;}
.next-steps .n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font:700 0.75rem var(--font-ui);}

/* ============ STORY / PHILOSOPHY ============ */
/* A single strategic root-artwork accent — not a border, not everywhere —
   bleeding gently off the top corner. Clipped to the section so it can
   never cause horizontal scroll or sit over the text/buttons. */
.story-section{position:relative;overflow:hidden;}
.story-section .wrap{position:relative;z-index:1;}
.root-accent{position:absolute;z-index:0;pointer-events:none;user-select:none;}
.root-accent-story{top:-14px;right:-42px;width:70px;height:auto;opacity:0.85;}
@media (min-width:600px){ .root-accent-story{width:120px;right:-30px;top:-16px;} }
.story-grid{display:grid;gap:26px;align-items:start;}
@media (min-width:860px){ .story-grid{grid-template-columns:1.1fr 0.9fr;} }
.story-lede{font:500 1.25rem/1.4 var(--font-display);font-style:italic;color:var(--text);margin:0 0 16px;text-wrap:balance;}
.founders{display:flex;}
.founder{flex:1;padding:0 20px;}
.founder:first-child{padding-left:0;}
.founder:last-child{padding-right:0;border-left:1px solid var(--border);}
.founder .yrs{display:block;font:400 2.1rem/1 var(--font-display);color:var(--gold);}
.founder .yrs small{display:block;font:600 9.5px/1 var(--font-ui);letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin:6px 0 10px;}
.founder .who{font:700 0.88rem var(--font-ui);}

.philosophy-grid{display:grid;gap:28px;}
@media (min-width:700px){ .philosophy-grid{grid-template-columns:0.8fr 1.2fr;align-items:center;gap:48px;} }
.philosophy-photo{width:170px;max-width:52vw;height:auto;margin:0 auto;display:block;}
@media (min-width:700px){ .philosophy-photo{width:100%;max-width:none;} }
.philosophy-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border);}
.philosophy-list li{padding:14px 0;border-bottom:1px solid var(--border);font-size:0.95rem;color:var(--text-muted);}
.philosophy-list b{font:700 0.95rem var(--font-ui);color:var(--text);}

/* ============ FAQ ============ */
.faq-list{border-top:1px solid var(--border);}
.faq-list details{border-bottom:1px solid var(--border);padding:16px 0;}
.faq-list summary{
  font:700 0.92rem var(--font-ui);cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:12px;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:'+';font-size:1.3rem;color:var(--gold);flex:0 0 auto;}
.faq-list details[open] summary::after{content:'–';}
.faq-list p{margin:12px 0 0;font-size:0.88rem;color:var(--text-muted);max-width:60ch;}
.faq-list p em{color:var(--terracotta);font-style:normal;font-weight:600;}

/* ============ PROOF ============ */
.proof-box{
  border:1.5px dashed var(--border);border-radius:var(--radius-l);padding:36px 24px;text-align:center;
}
.proof-box p{color:var(--text-muted);font-size:0.9rem;max-width:42ch;margin:8px auto 0;}
.proof-box .mark{font:600 1.1rem var(--font-display);}

/* ============ FOOTER ============ */
/* Warm cream, matching the rest of the site — a step deeper (--surface-2)
   than the section above it, so it still reads as its own closing zone. */
.footer{position:relative;background:var(--surface-2);border-top:1px solid var(--border);padding:0 0 calc(90px + env(safe-area-inset-bottom));overflow:hidden;}
.root-accent-footer{position:relative;width:100%;max-width:560px;height:auto;margin:0 auto;display:block;opacity:0.92;}
.footer .wrap{padding-top:30px;}
.footer-top{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:26px;}
.footer-logo{height:70px;width:auto;flex:none;}
.footer-tag{font-size:0.8rem;color:var(--text-muted);letter-spacing:0.02em;}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:22px;list-style:none;padding:0;}
.footer-links a,.footer-links button{
  background:none;border:none;color:var(--text);font:600 0.82rem var(--font-ui);cursor:pointer;padding:0;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border);
}
.footer-legal{font-size:0.74rem;color:var(--text-muted);border-top:1px solid var(--border);padding-top:18px;}
.legal-panel{display:none;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);padding:16px;margin-bottom:18px;font-size:0.82rem;color:var(--text-muted);}
.legal-panel.show{display:block;}
.legal-panel b{color:var(--text);display:block;margin-bottom:6px;}

.toast{
  position:fixed;left:50%;bottom:100px;transform:translate(-50%,10px);background:var(--text);color:var(--bg);
  padding:11px 18px;border-radius:999px;font:700 0.82rem var(--font-ui);opacity:0;pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;z-index:70;white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0);}

.hidden{display:none !important;}
[hidden]{display:none !important;}

/* ============ FIRST-ORDER OFFER POPUP ============ */
.offer-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(20,16,10,0.5);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;pointer-events:none;transition:opacity 0.3s ease;
}
.offer-overlay.is-open{opacity:1;pointer-events:auto;}
.offer-modal{
  position:relative;background:var(--surface);border-radius:var(--radius-l);
  max-width:760px;width:100%;max-height:90vh;overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(20,16,10,0.45);
  display:flex;flex-direction:column;
  transform:scale(0.92) translateY(16px);opacity:0;
  transition:transform 0.35s cubic-bezier(.2,.8,.2,1), opacity 0.3s ease;
}
.offer-overlay.is-open .offer-modal{transform:scale(1) translateY(0);opacity:1;}
@media (min-width:700px){ .offer-modal{flex-direction:row;max-height:560px;} }

.offer-close{
  position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:0.95rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.18);
}

/* The photo bleeds slightly past its own box (scale + rotate) rather than
   sitting inside a plain rectangle — a corner-entering, editorial feel
   without needing a second cropped asset. */
.offer-photo{position:relative;overflow:hidden;height:190px;flex:none;background:var(--surface-2);}
@media (min-width:700px){ .offer-photo{height:auto;flex:0 0 44%;} }
.offer-photo img{
  width:100%;height:100%;object-fit:cover;object-position:60% 35%;
  transform:scale(1.14) rotate(-3deg);
}
@media (min-width:700px){
  .offer-photo img{transform:scale(1.22) rotate(-4deg);object-position:52% 42%;}
}

.offer-body{padding:24px 22px 22px;overflow-y:auto;}
@media (min-width:700px){ .offer-body{padding:38px 34px;flex:1;display:flex;flex-direction:column;justify-content:center;} }
.offer-body .eyebrow{margin-bottom:8px;}
.offer-body h3{font:600 clamp(1.25rem,4.5vw,1.55rem)/1.2 var(--font-display);margin:0 0 10px;text-wrap:balance;color:var(--text);}
.offer-sub{font-size:0.9rem;color:var(--text-muted);margin:0 0 18px;}
.offer-fineprint{font-size:0.76rem;color:var(--text-muted);text-align:center;margin:10px 0 0;}

.offer-emoji{font-size:2rem;margin:0 0 6px;line-height:1;}
.offer-code-label{font-size:0.8rem;color:var(--text-muted);margin:0 0 10px;}
.offer-code-label em{color:var(--terracotta);font-style:normal;font-weight:600;}
.offer-code{
  font:700 1.5rem/1 var(--font-ui);letter-spacing:0.06em;color:var(--accent);
  background:var(--surface-2);border:1.5px dashed var(--border);border-radius:var(--radius-m);
  padding:14px;text-align:center;margin:0 0 20px;
}

/* Collapsed corner tab — shown/hidden via [hidden] when fully out of the
   flow, animated in/out via .is-visible while it's actually mounted. */
.offer-tab{
  position:fixed;right:16px;bottom:16px;z-index:88;
  background:var(--gold);color:#211B12;border:none;border-radius:999px;
  padding:13px 18px;font:700 0.8rem var(--font-ui);letter-spacing:0.02em;cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(20,16,10,0.4);
  transform:scale(0.5);opacity:0;
  transition:transform 0.3s cubic-bezier(.34,1.4,.64,1), opacity 0.25s ease, bottom 0.2s ease;
}
.offer-tab.is-visible{transform:scale(1);opacity:1;}
.offer-tab.above-sticky{bottom:88px;}
@media (prefers-reduced-motion: reduce){
  .offer-modal,.offer-tab{transition:opacity 0.15s ease !important;transform:none !important;}
}