/* Salad Bowls page — prototype-fidelity port (corporate.html).
 * All keyframes namespaced bw*/byo* to keep out of shared scope.
 * Material greens map to the site palette: #1B5E20→var(--sage), #43A047→var(--sage2).
 */

/* ============================ keyframes ============================ */
@keyframes bwFloat   { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
@keyframes bwFloatC  { 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(-10px) } }
@keyframes bwDriftA  { 0%,100%{ transform:translate(0,0) rotate(0deg) } 50%{ transform:translate(10px,-16px) rotate(8deg) } }
@keyframes bwDriftB  { 0%,100%{ transform:translate(0,0) rotate(0deg) } 50%{ transform:translate(-12px,12px) rotate(-10deg) } }
@keyframes bwDriftC  { 0%,100%{ transform:translate(0,0) rotate(0deg) } 50%{ transform:translate(8px,14px) rotate(6deg) } }
@keyframes bwRise    { 0%{ transform:translateY(30px) rotate(-8deg); opacity:0 } 14%{ opacity:.95 } 86%{ opacity:.95 } 100%{ transform:translateY(-54px) rotate(8deg); opacity:0 } }
@keyframes bwPulseDot{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.5); opacity:.5 } }
@keyframes bwSweep   { 0%{ stroke-dashoffset:1000; opacity:0 } 10%{ opacity:.95 } 82%{ opacity:.95 } 100%{ stroke-dashoffset:-70; opacity:0 } }
@keyframes bwDropIn  { 0%{ transform:translate(-50%,-30px) scale(.3); opacity:0 } 26%{ transform:translate(-50%,2px) scale(1.05); opacity:1 } 36%{ transform:translate(-50%,0) scale(1); opacity:1 } 86%{ transform:translate(-50%,0) scale(1); opacity:1 } 100%{ transform:translate(-50%,-30px) scale(.3); opacity:0 } }
@keyframes bwSpin    { from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }
@keyframes bwSpinC   { from{ transform:translateX(-50%) rotate(0deg) } to{ transform:translateX(-50%) rotate(360deg) } }
@keyframes bwSpinRev { from{ transform:rotate(0deg) } to{ transform:rotate(-360deg) } }
@keyframes bwPopSwap { 0%{ transform:scale(.45) translateY(-40px) rotate(-12deg); opacity:0 } 55%{ transform:scale(1.1) translateY(6px) rotate(4deg); opacity:1 } 78%{ transform:scale(.97) translateY(-2px) rotate(-1deg) } 100%{ transform:scale(1) translateY(0) rotate(0); opacity:1 } }
@keyframes bwBounceUp{ 0%{ transform:translateY(0) scale(1) } 45%{ transform:translateY(-14px) scale(1.12) } 100%{ transform:translateY(0) scale(1) } }
@keyframes bwFade    { from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:translateY(0) } }
@keyframes bwByoDrop { 0%{ transform:translateY(-46px) scale(.4) rotate(-12deg); opacity:0 } 18%{ opacity:1 } 30%{ transform:translateY(4px) scale(1.05) rotate(4deg); opacity:1 } 40%{ transform:translateY(0) scale(1) rotate(0); opacity:1 } 82%{ transform:translateY(0) scale(1); opacity:1 } 96%,100%{ transform:translateY(0) scale(.9); opacity:0 } }
@keyframes bwSteam   { 0%{ transform:translateY(0) scaleX(1); opacity:0 } 30%{ opacity:.55 } 100%{ transform:translateY(-22px) scaleX(1.5); opacity:0 } }
@keyframes bwPop     { 0%{ transform:scale(.6); opacity:0 } 60%{ transform:scale(1.12) } 100%{ transform:scale(1); opacity:1 } }
@keyframes bwBowlDrop{ 0%{ transform:translateY(-160px); opacity:0 } 60%{ opacity:1 } 78%{ transform:translateY(7px) } 90%{ transform:translateY(-3px) } 100%{ transform:translateY(0); opacity:1 } }
@keyframes bwReel{ 0%,14%{ transform:translateY(0) } 20%,33%{ transform:translateY(-16.666%) } 39%,52%{ transform:translateY(-33.333%) } 58%,71%{ transform:translateY(-50%) } 77%,90%{ transform:translateY(-66.666%) } 96%,100%{ transform:translateY(-83.333%) } }
@keyframes bwFloatRot{ 0%,100%{ transform:translateY(0) rotate(var(--rot,0deg)) } 50%{ transform:translateY(-14px) rotate(var(--rot,0deg)) } }

/* ===================== header mascot: fork & spoon drop-in =================
 * The bowls logo is layered: a base leaf holding empty hands, with the fork
 * and spoon overlaid. The whole lockup hops in via brandPop (style.css); the
 * fork and spoon additionally drop straight down into the hands, timed to land
 * as the mascot settles. Sprites are full 480×480 canvases, so inset:0 stacks
 * them exactly over the base. */
.site-head .brand .brand-mascot{
  position:relative; display:inline-block;
  width:var(--icon); height:var(--icon);
  margin-top:calc((var(--bar) - var(--icon)) * .24);
  margin-bottom:calc((var(--bar) - var(--icon)) * .76);
  margin-left:calc(var(--icon) * -.205);
  transform-origin:50% 80%;
  transition:transform .35s cubic-bezier(.34,1.4,.5,1);
  animation:brandPop .72s cubic-bezier(.34,1.4,.5,1) backwards;
}
.site-head .brand .brand-mascot img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block;
}
/* the utensils drop from above into the hands, staggered, landing with a small
   settle (overshoot easing) just as the hop finishes */
.site-head .brand .brand-mascot .bm-fork{
  animation:bwUtensilDrop .62s .12s cubic-bezier(.34,1.5,.5,1) backwards;
}
.site-head .brand .brand-mascot .bm-spoon{
  animation:bwUtensilDrop .62s .22s cubic-bezier(.34,1.5,.5,1) backwards;
}
.site-head .brand:hover .brand-mascot{ transform:translateY(-3px) rotate(-4deg) scale(1.04); }
@keyframes bwUtensilDrop{
  0%{   transform:translateY(-26%); opacity:0; }
  45%{  opacity:1; }
  100%{ transform:translateY(0);    opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .site-head .brand .brand-mascot{ animation:none; }
  .site-head .brand .brand-mascot .bm-fork,
  .site-head .brand .brand-mascot .bm-spoon{ animation:none; }
}

/* ============================ hero ============================ */
.bw-hero{
  background:radial-gradient(120% 90% at 80% 0%, rgba(251,243,228,.94) 0%, rgba(250,248,243,.55) 46%, rgba(242,246,238,.45) 100%);
  padding:56px 0 48px;
}
.bw-hero h1{ color:var(--sage-d); }
.bw-hero h1 em{ color:#E0930A; }
.bw-cutout{ position:absolute; pointer-events:none; }
.bw-cutout-leaf{ top:7%; left:4%; width:54px; height:54px; opacity:.9; animation:bwDriftA 9s ease-in-out infinite; }
.bw-cutout-seeds{ bottom:10%; right:44%; width:34px; height:34px; opacity:.85; animation:bwDriftA 8s ease-in-out infinite; }
.bw-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid #ece2cf; color:var(--sage-d);
  padding:8px 16px; border-radius:var(--r-pill); margin-bottom:18px;
  font:700 12px var(--font-b); letter-spacing:.08em; text-transform:uppercase;
  box-shadow:0 4px 14px rgba(160,130,60,.08);
}
.bw-eyebrow-dot{ width:8px; height:8px; border-radius:50%; background:#E0930A; animation:bwPulseDot 2s ease-in-out infinite; }
.bw-hero-art{ position:relative; display:flex; align-items:center; justify-content:center; min-height:440px; }
.bw-hero-halo{
  position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
  width:82%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,#eef6e2 0%,rgba(238,246,226,0) 68%);
}
.bw-hero-splash{
  position:relative; width:min(460px,94%); height:auto; display:block;
  filter:drop-shadow(0 26px 40px rgba(46,90,40,.2));
  animation:bwFloat 7s ease-in-out infinite;
}
.bw-drift{ position:absolute; pointer-events:none; }
.bw-d1{ top:8%;  left:16%; font-size:30px; animation:bwDriftA 6s ease-in-out infinite;        filter:drop-shadow(0 5px 8px rgba(46,90,40,.28)); }
.bw-d2{ top:16%; right:12%; font-size:26px; animation:bwDriftB 7.5s ease-in-out infinite -1.5s; filter:drop-shadow(0 5px 8px rgba(199,60,30,.28)); }
.bw-d3{ top:4%;  left:50%; font-size:24px; animation:bwRise 8s ease-in-out infinite; }
.bw-d4{ top:30%; left:6%;  font-size:22px; animation:bwRise 9s ease-in-out infinite -3s; }
.bw-d5{ top:26%; right:4%; font-size:22px; animation:bwDriftA 7s ease-in-out infinite -4s; }

/* ============================ three ways ============================ */
.bw-ways{ padding:38px 0 56px; position:relative; overflow:hidden; }
.bw-kicker{
  font:800 12px var(--font-b); letter-spacing:.16em; text-transform:uppercase;
  color:#E0930A; margin-bottom:12px;
}
.bw-ways-head{ text-align:center; max-width:560px; margin:0 auto 44px; }
.bw-ways-head h2{ font-size:clamp(30px,5vw,44px); }
.bw-ways-head h2 em{ color:#2E7D32; }
.bw-ways-head .sub{ margin-top:10px; font-size:14.5px; }
.bw-steps{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr);
  gap:26px; max-width:1060px; margin:0 auto;
}
.bw-vine{
  position:absolute; left:0; right:0; top:40px; width:100%; height:130px;
  z-index:1; overflow:visible; pointer-events:none;
}
.bw-vine-run{ animation:bwSweep 3.4s ease-in-out .4s infinite; }
.bw-vine-vert{ display:none; }
.bw-step{
  position:relative; z-index:2; text-align:center;
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.bw-ways.in .bw-step{ opacity:1; transform:translateY(0); }
.bw-steps .bw-step:nth-of-type(1){ transition-delay:.2s; }
.bw-steps .bw-step:nth-of-type(2){ transition-delay:.48s; }
.bw-steps .bw-step:nth-of-type(3){ transition-delay:.76s; }
.bw-step-art{
  height:124px; display:flex; align-items:center; justify-content:center;
  margin-bottom:18px; position:relative;
}
.bw-step-glow{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:120px; height:120px; border-radius:50%;
}
.bw-step-bowl{ position:relative; width:120px; height:110px; }
.bw-dot{
  position:absolute; top:28px; width:8px; height:8px; border-radius:50%;
  transform:translateX(-50%);
  animation:bwDropIn 3.4s ease-in-out infinite;
}
.bw-doodle{ position:absolute; left:0; bottom:0; overflow:visible; }
.bw-orbit-arrow{
  position:absolute; left:0; top:-5px; overflow:visible;
  animation:bwSpin 9s linear infinite; transform-origin:60px 60px;
}
.bw-step-num{ display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:10px; }
.bw-step-num span{ width:18px; height:1px; background:#c8dcc0; }
.bw-step-num em{
  font:italic 600 18px var(--font-d); letter-spacing:.08em; color:var(--n,#2E7D32);
}
.bw-step h3{ font-size:29px; letter-spacing:.2px; margin-bottom:8px; }
.bw-step p{ font:400 14px/1.6 var(--font-b); color:var(--ink2); margin:0 auto 18px; max-width:230px; }
.bw-step-btn{
  display:inline-flex; align-items:center; gap:8px;
  border-radius:var(--r-pill); padding:12px 22px;
  font:800 13px var(--font-b); text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.bw-step-btn:hover{ transform:translateY(-2px); }
.bw-step-btn.is-outline{ background:#fff; color:var(--sage-d); border:1.5px solid var(--sage); box-shadow:0 6px 16px rgba(92,122,80,.12); }
.bw-step-btn.is-outline:hover{ box-shadow:0 12px 24px rgba(92,122,80,.2); }
.bw-step-btn.is-solid{ background:var(--sage); color:#fff; border:1.5px solid var(--sage); box-shadow:0 10px 22px rgba(92,122,80,.26); }
.bw-step-btn.is-solid:hover{ box-shadow:0 14px 30px rgba(92,122,80,.34); }
.bw-step-btn.is-teal{ background:#fff; color:#0E7C7B; border:1.5px solid #0E7C7B; box-shadow:0 6px 16px rgba(14,124,123,.16); }
.bw-step-btn.is-teal:hover{ box-shadow:0 12px 24px rgba(14,124,123,.26); }

/* ============================ signature showcase ============================ */
.bw-menu{ position:relative; overflow:hidden; padding:44px 0 64px; }
.bw-cutout-leaf2{ top:8%; right:6%; width:50px; height:50px; opacity:.7; animation:bwDriftB 11s ease-in-out infinite; }
.bw-menu-head{ text-align:center; max-width:560px; margin:0 auto 24px; position:relative; z-index:2; }
.bw-menu-head h2{ font-size:clamp(28px,4.6vw,42px); }
.bw-menu-head h2 em{ color:var(--sage2); }
.bw-menu-head .sub{ margin-top:8px; font-size:14.5px; }
.bw-showcase{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center;
}
.bw-feat{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.bw-feat-stage{
  position:relative; width:300px; height:300px;
  margin:64px auto 44px;
  display:flex; align-items:center; justify-content:center;
}
.bw-feat-ring{
  position:absolute; inset:-14px; border-radius:50%;
  border:2px dashed; animation:bwSpin 26s linear infinite;
}
.bw-feat-orbit{
  position:absolute; left:50%; top:50%;
  width:352px; height:352px; margin-left:-176px; margin-top:-176px;
  animation:bwSpin 26s linear infinite; pointer-events:none; z-index:3;
}
/* perk pill slots at r=176px, angles -90° / 30° / 150° */
.bw-orbit-slot{ position:absolute; left:50%; top:50%; }
.bw-slot-a{ transform:translate(-50%,-50%) translate(0,-176px); }
.bw-slot-b{ transform:translate(-50%,-50%) translate(152px,88px); }
.bw-slot-c{ transform:translate(-50%,-50%) translate(-152px,88px); }
.bw-perk{
  display:inline-block; font:italic 600 16px var(--font-d); color:var(--pc,#2E7D32);
  background:#fff; border:1px solid color-mix(in srgb, var(--pc,#2E7D32) 18%, transparent);
  border-radius:var(--r-pill); padding:6px 14px; white-space:nowrap;
  box-shadow:0 8px 20px color-mix(in srgb, var(--pc,#2E7D32) 18%, transparent);
  animation:bwSpinRev 26s linear infinite;
}
.bw-feat-dish{
  position:relative; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--ac,#2E7D32) 50%, #fff), var(--ac,#2E7D32));
  box-shadow:0 30px 64px color-mix(in srgb, var(--ac,#2E7D32) 36%, transparent),
             inset 0 -16px 38px rgba(0,0,0,.16),
             inset 0 14px 30px rgba(255,255,255,.3);
  animation:bwFloat 7s ease-in-out infinite .55s;
}
.bw-feat-dish.bw-swap{ animation:bwPopSwap .55s cubic-bezier(.34,1.5,.5,1), bwFloat 7s ease-in-out infinite .55s; }
.bw-feat-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:50%;
}
.bw-feat-info{ display:flex; flex-direction:column; align-items:center; gap:8px; max-width:460px; }
.bw-feat-info.bw-fade{ animation:bwFade .35s ease; }
.bw-feat-info h3{ font-size:clamp(34px,4.4vw,46px); line-height:1; }
.bw-feat-desc{ font:400 15px/1.55 var(--font-b); color:var(--ink2); margin:4px 0 0; max-width:400px; }
.bw-feat-tags{ display:flex; align-items:center; gap:9px; margin-top:4px; }
.bw-feat-tag{
  display:inline-block; text-transform:capitalize;
  background:color-mix(in srgb, var(--ac,#2E7D32) 15%, transparent);
  color:var(--ac,#2E7D32);
  font:800 12px var(--font-b); letter-spacing:.02em;
  padding:6px 14px; border-radius:var(--r-pill);
}
.bw-feat-sig{
  display:inline-block; background:#23302A; color:#fff;
  font:800 10.5px var(--font-b); letter-spacing:.06em;
  padding:6px 12px; border-radius:var(--r-pill);
}
.bw-feat-tag[hidden], .bw-feat-sig[hidden]{ display:none; }
.bw-inside{
  background:#f5f8f1; border:1px solid #e4ecdd; border-radius:16px;
  padding:14px 18px; margin-top:8px; text-align:left; width:100%; max-width:420px;
}
.bw-inside-k{
  font:800 11px var(--font-b); letter-spacing:.14em; text-transform:uppercase;
  color:#2E7D32; margin-bottom:7px;
}
.bw-inside-list{ font:400 13.5px/1.55 var(--font-b); color:var(--ink2); }
.bw-feat-buy{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
.bw-feat-price{ font:700 36px var(--font-d); color:var(--ac,#2E7D32); }
.bw-thumbs{
  display:grid; grid-template-columns:repeat(3,max-content);
  gap:22px 26px; justify-content:center; align-content:center;
}
.bw-thumb-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; width:max-content; }
.bw-thumb{
  position:relative; width:92px; height:92px; border-radius:50%;
  border:none; padding:0; cursor:pointer;
  background:radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--ac,#2E7D32) 50%, #fff), var(--ac,#2E7D32));
  box-shadow:0 8px 18px color-mix(in srgb, var(--ac,#2E7D32) 22%, transparent);
  transition:box-shadow .2s ease;
}
.bw-thumb:hover{ box-shadow:0 12px 26px color-mix(in srgb, var(--ac,#2E7D32) 40%, transparent); }
.bw-thumb-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:50%;
}
.bw-thumb-ring{
  position:absolute; inset:-7px; border-radius:50%;
  border:2.5px solid var(--ac,#2E7D32);
  box-shadow:0 10px 22px color-mix(in srgb, var(--ac,#2E7D32) 30%, transparent);
  pointer-events:none; opacity:0; transition:opacity .15s ease;
}
.bw-thumb.is-active .bw-thumb-ring{ opacity:1; }
.bw-thumb.is-active{ animation:bwBounceUp .5s ease; }
.bw-thumb-label{
  font:600 11.5px/1.25 var(--font-b); color:var(--ink3);
  text-align:center; max-width:92px;
}

/* ============================ BYO promo band ============================ */
.bw-band-sec{ padding:26px 0 6px; }
.bw-band{
  position:relative; overflow:hidden; border-radius:30px;
  background:linear-gradient(135deg,#1f5c2e 0%,#184a24 62%,#123c1d 100%);
  box-shadow:0 30px 70px -34px rgba(18,60,29,.6);
  padding:46px 48px;
}
.bw-band-circle{ position:absolute; border-radius:50%; pointer-events:none; }
.bw-bc1{ top:-70px; right:-40px; width:260px; height:260px; background:rgba(255,255,255,.05); }
.bw-bc2{ bottom:-90px; left:-60px; width:220px; height:220px; background:rgba(255,255,255,.04); }
.bw-band-copy{ position:relative; z-index:2; max-width:440px; }
.bw-band-pill{
  display:inline-block; background:#E0930A; color:#fff;
  font:800 11px var(--font-b); letter-spacing:.12em;
  padding:7px 15px; border-radius:var(--r-pill);
}
.bw-band h2{
  font-size:clamp(34px,5vw,50px); line-height:.98; color:#fff; margin:14px 0 0;
}
.bw-band h2 em{ color:#9ed19a; }
.bw-band-copy p{ font:400 15.5px/1.6 var(--font-b); color:#cfe0cf; margin:18px 0 0; max-width:400px; }
.bw-band-btn{
  display:inline-block; margin-top:22px; background:#fff; color:var(--sage-d);
  border-radius:var(--r-pill); padding:14px 26px;
  font:800 15px var(--font-b); text-decoration:none;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
  transition:transform .15s ease, box-shadow .15s ease;
}
.bw-band-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -10px rgba(0,0,0,.5); }
.bw-band-trail{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; }
.bw-band-trail span{ display:inline-flex; align-items:center; gap:6px; font:700 12px var(--font-b); color:#dcecda; }
.bw-band-trail em{ color:#7fae7c; font-style:normal; }
.bw-band-scene{
  position:absolute; right:8%; top:50%; transform:translateY(-50%);
  z-index:2; width:210px; height:196px;
}
.bw-fall{ position:absolute; animation:bwByoDrop 3.6s ease-in-out infinite; }
.bw-wisp{
  position:absolute; width:8px; height:22px; border-radius:8px;
  background:rgba(255,255,255,.5); animation:bwSteam 2.8s ease-in-out infinite;
}
.bw-band-bowl{ position:absolute; left:0; bottom:0; animation:bwFloat 4.5s ease-in-out infinite; }

/* ============================ build your own ============================ */
.byo-sec{ background:var(--band); padding:60px 0 72px; margin-top:26px; }
.byo-head{ text-align:center; max-width:560px; margin:0 auto 40px; }
.byo-head .sub{ margin-top:10px; }
.byo-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:34px; align-items:start; }

.byo-stage{ position:sticky; top:96px; }
.byo-bowl-wrap{
  position:relative; max-width:380px; margin:0 auto;
  display:flex; align-items:flex-end; justify-content:center;
  min-height:330px; padding-top:40px;
}
.byo-scale{ transform:scale(1.42); transform-origin:bottom center; margin-bottom:30px; }
.byo-assembly{ position:relative; width:210px; height:176px; }
.byo-orbit{
  position:absolute; left:50%; bottom:-16px; transform:translateX(-50%);
  width:212px; height:212px; border-radius:50%;
  border:1.5px dashed rgba(176,141,87,.35);
  animation:bwSpinC 34s linear infinite; pointer-events:none;
}
.byo-glow{
  position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(232,240,220,.75), rgba(232,240,220,0) 70%);
  pointer-events:none;
}
.byo-float{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width:196px; animation:bwFloatC 7s ease-in-out infinite;
}
.byo-under-shadow{
  position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  width:150px; height:20px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(46,90,40,.2), rgba(46,90,40,0));
  filter:blur(2px); z-index:0; pointer-events:none;
}
.byo-rim{
  position:relative; z-index:60; height:24px; border-radius:50%;
  background:linear-gradient(180deg,#F3F8EE 0%,#E2F0D8 55%,#CFE6C2 100%);
  box-shadow:inset 0 4px 7px rgba(255,255,255,.75), inset 0 -3px 6px rgba(0,0,0,.1), 0 3px 9px rgba(0,0,0,.1);
}
.byo-interior{
  position:relative; margin-top:-12px; height:100px; overflow:hidden;
  border-radius:10px 10px 100px 100px/10px 10px 78px 78px;
  background:radial-gradient(120% 92% at 50% 8%, #F1F8EC 0%, #DEEED4 54%, #C8E2BB 100%);
  box-shadow:inset 0 -18px 34px rgba(60,110,60,.2), inset 0 12px 20px rgba(255,255,255,.45), 0 26px 46px rgba(46,90,40,.18);
}
.byo-mound{
  position:absolute; left:6px; right:6px; bottom:0; height:38px;
  background:radial-gradient(130% 100% at 50% 100%, #efe4c7 0%, rgba(239,228,199,0) 78%);
  border-radius:0 0 90px 90px/0 0 74px 74px;
}
.byo-pieces{ position:absolute; inset:0; pointer-events:none; }
.byo-piece{
  position:absolute;
  animation:bwBowlDrop .5s cubic-bezier(.3,1.35,.5,1) both;
}
.byo-piece i{
  display:block; width:100%; height:100%;
  border:1.4px solid rgba(30,60,32,.55);
  box-shadow:0 2px 4px rgba(0,0,0,.2), inset 0 2px 3px rgba(255,255,255,.32);
  transform:rotate(var(--rot,0deg));
}
.byo-dress{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  z-index:45; filter:drop-shadow(0 2px 2px rgba(0,0,0,.16));
  transition:bottom .45s ease;
}
.byo-empty{
  position:absolute; left:0; right:0; bottom:24px; margin:0;
  text-align:center; font:italic 500 15px/1.35 var(--font-d); color:#9c8f6f;
}
.byo-empty em{ color:var(--sage2); }
.byo-outline{
  position:absolute; left:0; top:0; z-index:70;
  pointer-events:none; overflow:visible;
}
.byo-sparkles{
  position:absolute; left:50%; top:-40px; transform:translateX(-50%);
  z-index:71; pointer-events:none; overflow:visible;
}
.byo-steam-g{ animation:bwFloat 5s ease-in-out infinite; }
.byo-spark{ transform-origin:center; transform-box:fill-box; }
.byo-spark-1{ animation:bwPop 2.6s ease-in-out infinite; }
.byo-spark-2{ animation:bwPop 3.2s ease-in-out infinite; }
.byo-spark-3{ animation:bwPop 2.2s ease-in-out infinite; }

.byo-summary{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-card);
  padding:20px 22px; margin-top:18px; max-width:380px; margin-inline:auto;
}
.byo-count{ font:600 13px var(--font-b); color:var(--ink3); min-height:1.4em; }
.byo-price-row{ display:flex; align-items:baseline; justify-content:space-between; margin-top:8px; }
.byo-price-label{ font:italic 500 16px var(--font-d); color:var(--ink2); }
.byo-price{ font:700 26px var(--font-b); color:var(--sage-d); }
.byo-add{ width:100%; margin-top:14px; }
.byo-add:disabled{ background:#CDD6C4; box-shadow:none; cursor:not-allowed; transform:none; }
.byo-fine{ font:400 12px/1.5 var(--font-b); color:var(--ink3); margin-top:10px; text-align:center; }

.byo-group{ margin-bottom:26px; }
.byo-group-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.byo-group-head h3{ font-size:19px; }
.byo-cap{
  font:700 11px var(--font-b); letter-spacing:.04em; color:var(--ink2);
  background:var(--sage-c1); border-radius:var(--r-pill); padding:4px 11px;
}
.byo-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.byo-chip{
  display:inline-flex; align-items:center; gap:7px;
  font:600 13.5px var(--font-b); color:var(--ink);
  background:var(--white); border:1.5px solid var(--line2);
  border-radius:var(--r-pill); padding:9px 16px;
  transition:all .15s ease;
}
.byo-chip:hover{ border-color:var(--sage2); }
.byo-chip[aria-pressed="true"]{
  background:var(--chip,var(--sage)); border-color:var(--chip,var(--sage));
  color:#fff; box-shadow:0 6px 16px -6px var(--chip,var(--sage));
}
.byo-chip .add-price{ font-weight:500; font-size:12px; opacity:.75; }
.byo-chip:disabled{ opacity:.45; cursor:not-allowed; }

/* ============================ signature strip (page) ============================ */
.bw-sig{ position:relative; overflow:hidden; padding:30px 0 10px; }
.bw-sigstrip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px 24px;
  position:relative; z-index:2; margin-top:6px;
}
.bw-sigcard{
  flex:0 0 auto; width:132px; border:none; background:none; cursor:pointer; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
.bw-sigcard-disc{
  position:relative; width:118px; height:118px; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--ac,#2E7D32) 50%, #fff), var(--ac,#2E7D32));
  box-shadow:0 12px 26px color-mix(in srgb, var(--ac,#2E7D32) 26%, transparent);
  transition:transform .2s ease, box-shadow .2s ease;
}
.bw-sigcard:hover .bw-sigcard-disc,
.bw-sigcard:focus-visible .bw-sigcard-disc{
  transform:translateY(-4px);
  box-shadow:0 18px 34px color-mix(in srgb, var(--ac,#2E7D32) 40%, transparent);
}
.bw-sigcard-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bw-sigcard-name{ font:700 13.5px var(--font-b); color:var(--ink); text-align:center; line-height:1.2; }
.bw-sigcard-price{ font:800 13px var(--font-b); color:var(--sage-d); }
.bw-sig-cta{ text-align:center; margin-top:20px; position:relative; z-index:2; }

/* ============================ order drawer ============================
 * Native <dialog> gives focus-trap + Esc; the slide-in / -out is pure CSS via
 * @starting-style + `allow-discrete` (browsers without it just open instantly).
 * The Signature | Build toggle slides a two-screen track, same trick as the
 * School Meals wizard. */
body.drawer-open{ overflow:hidden; }

.bw-drawer{
  position:fixed; inset:0 0 0 auto; margin:0;
  height:auto; max-height:100dvh; width:clamp(420px,50vw,760px); max-width:100vw;
  border:none; padding:0; overflow:hidden;
  color:var(--ink); font-family:var(--font-b);
  background:linear-gradient(160deg,#f4faef 0%,#eef6e6 52%,#f1f6ec 100%);
  border-radius:28px 0 0 28px;
  box-shadow:-34px 0 90px -30px rgba(20,50,25,.5);
  transform:translateX(100%);
  transition:transform .36s cubic-bezier(.22,.61,.36,1),
             overlay .36s allow-discrete, display .36s allow-discrete;
}
.bw-drawer[open]{ transform:translateX(0); }
@starting-style{ .bw-drawer[open]{ transform:translateX(100%); } }
.bw-drawer::backdrop{
  background:rgba(20,40,24,.45); backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .36s ease, overlay .36s allow-discrete, display .36s allow-discrete;
}
.bw-drawer[open]::backdrop{ opacity:1; }
@starting-style{ .bw-drawer[open]::backdrop{ opacity:0; } }

.bw-drawer-in{ position:relative; display:flex; flex-direction:column; height:100%; max-height:100dvh; overflow:hidden; }
.bw-drawer-close{
  position:absolute; top:14px; right:14px; z-index:6;
  width:38px; height:38px; border-radius:50%; cursor:pointer; line-height:1;
  background:#fff; border:1px solid rgba(92,122,80,.22); color:var(--ink2); font-size:15px;
  box-shadow:0 6px 16px -8px rgba(20,50,25,.4);
  transition:background .15s ease, color .15s ease, transform .2s ease;
}
.bw-drawer-close:hover{ background:#EEF4E6; color:var(--sage-d); transform:rotate(90deg); }

.bw-drawer-tabs{ flex:0 0 auto; display:flex; gap:6px; padding:20px 62px 14px 24px; }
.bw-drawer-tab{
  flex:1; border:none; cursor:pointer; border-radius:var(--r-pill); padding:11px 14px;
  font:800 13px var(--font-b); background:rgba(92,122,80,.09); color:var(--ink2);
  transition:background .18s ease, color .18s ease, box-shadow .18s ease;
}
.bw-drawer-tab.is-on{ background:var(--sage); color:#fff; box-shadow:0 8px 18px -8px rgba(92,122,80,.6); }

/* two screens on one track; toggle slides between them */
.bw-wiz{ display:flex; flex:1 1 auto; min-height:0; width:100%; transition:transform .42s cubic-bezier(.4,0,.2,1); }
.bw-wiz[data-tab="build"]{ transform:translateX(-100%); }
.bw-wiz-screen{ flex:0 0 100%; display:flex; flex-direction:column; min-height:0; position:relative; }
.bw-wiz[data-tab="signature"] #wizBuild,
.bw-wiz[data-tab="build"] #wizSignature{ visibility:hidden; }

.bw-scr-scroll{ flex:1 1 auto; overflow-y:auto; padding:6px 26px 20px; scrollbar-width:none; }
.bw-scr-scroll::-webkit-scrollbar{ width:0; }
.bw-scr-foot{
  flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:14px 24px;
  border-top:1px solid rgba(92,122,80,.16);
  background:rgba(255,255,255,.66); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.bw-scr-foot .btn{ flex:1; }
.bw-scr-foot .btn.is-added{ background:var(--sage2); box-shadow:none; }
.bw-drawer-eyebrow{
  font:800 11px var(--font-b); letter-spacing:.12em; text-transform:uppercase;
  color:#E0930A; margin:6px 0 12px;
}

/* the .bw-menu / .byo-sec classes now sit on the drawer screens, so shed the
   full-page section padding/background they carry — the scroll + foot own spacing */
.bw-drawer .bw-menu,
.bw-drawer .byo-sec{ padding:0; margin:0; background:transparent; overflow:visible; }

/* signature showcase, drawer-sized: thumbs scroll-row up top, then the bowl
   CENTRED with its copy directly below, the pair vertically centred in the
   panel so there's no dead space under it */
.bw-drawer .bw-thumbs{
  display:flex; flex-wrap:wrap; grid-template-columns:none;
  gap:12px 16px; justify-content:center; align-content:flex-start;
  padding:10px 6px 14px; /* room so the active ring/bounce never clips */
}
.bw-drawer .bw-thumb-wrap{ flex:0 0 auto; }

#wizSignature .bw-scr-scroll{ display:flex; flex-direction:column; }
.bw-drawer .bw-feat{
  /* auto margins centre the bowl+copy in the space under the thumbs, and
     collapse to 0 when the panel is short so it scrolls cleanly */
  flex:0 0 auto; margin:auto 0;
  flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; max-width:none;
}
/* disc + benefit pills orbiting the rim — top margin clears the highest pill */
.bw-drawer .bw-feat-stage{ flex:0 0 auto; width:196px; height:196px; margin:40px auto 22px; }
.bw-drawer .bw-feat-dish{ width:196px; height:196px; }
.bw-drawer .bw-feat-orbit{ width:244px; height:244px; margin-left:-122px; margin-top:-122px; }
.bw-drawer .bw-slot-a{ transform:translate(-50%,-50%) translate(0,-122px); }
.bw-drawer .bw-slot-b{ transform:translate(-50%,-50%) translate(106px,61px); }
.bw-drawer .bw-slot-c{ transform:translate(-50%,-50%) translate(-106px,61px); }
.bw-drawer .bw-perk{ font-size:12.5px; padding:4px 11px; }
.bw-perk:empty{ display:none; } /* bowls with fewer than three perks */
.bw-drawer .bw-feat-info{ align-items:center; text-align:center; max-width:440px; gap:8px; }
.bw-feat-top{ display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; }
.bw-drawer .bw-feat-info h3{ font-size:clamp(28px,6vw,36px); margin:0; }
.bw-drawer .bw-feat-desc{ font-size:13.5px; line-height:1.55; margin:0; max-width:400px; }

/* foot: total on the left, Customise + Add on the right (wraps on tight panels) */
.bw-scr-foot{ flex-wrap:wrap; }
.bw-foot-price{ flex:0 0 auto; display:flex; flex-direction:column; line-height:1.05; }
.bw-foot-lbl{ font:800 9.5px var(--font-b); letter-spacing:.09em; text-transform:uppercase; color:var(--ink3); }
.bw-drawer .bw-feat-price{ font:700 25px var(--font-d); color:var(--ac,#2E7D32); }
.bw-foot-btns{ flex:1 1 auto; display:flex; gap:10px; min-width:200px; }
.bw-foot-btns .btn{ flex:1 1 auto; padding-left:12px; padding-right:12px; }
.bw-cust-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }

/* build-your-own step titles in the drawer keep matching size */
.bw-drawer .byo-group-head h3{ font-size:18px; }

/* ---- customise sheet: dips + add-ons, slides up over the signature screen ---- */
.bw-cust{ position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; justify-content:flex-end; }
.bw-cust[hidden]{ display:none; }
.bw-cust-scrim{ position:absolute; inset:0; background:rgba(20,40,24,.42); opacity:0; transition:opacity .28s ease; }
.bw-cust.is-open .bw-cust-scrim{ opacity:1; }
.bw-cust-sheet{
  position:relative; z-index:1; max-height:94%; display:flex; flex-direction:column;
  background:#fff; border-radius:22px 22px 0 0;
  box-shadow:0 -20px 50px -20px rgba(20,50,25,.45);
  transform:translateY(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.bw-cust.is-open .bw-cust-sheet{ transform:translateY(0); }
.bw-cust-head{
  flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:18px 20px 13px; border-bottom:1px solid var(--line);
}
.bw-cust-kick{ font:800 10px var(--font-b); letter-spacing:.12em; text-transform:uppercase; color:#E0930A; }
.bw-cust-title{ font:600 21px var(--font-d); color:var(--ink); line-height:1.1; margin-top:2px; }
.bw-cust-x{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
  background:var(--sage-c1); color:var(--ink2); font-size:14px;
}
.bw-cust-body{ flex:1 1 auto; overflow-y:auto; padding:14px 20px 18px; scrollbar-width:none; }
.bw-cust-body::-webkit-scrollbar{ width:0; }
.bw-cust-note{ font:400 12.5px/1.5 var(--font-b); color:var(--ink3); margin:0 0 12px; }
.bw-cust-sectk{ font:800 10px var(--font-b); letter-spacing:.12em; text-transform:uppercase; color:var(--sage-d); margin:12px 0 9px; }
.bw-cust-list{ display:flex; flex-direction:column; gap:8px; }
.bw-cust-row{
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  border:1.5px solid var(--line2); border-radius:14px;
  transition:border-color .15s ease, background .15s ease;
}
.bw-cust-row.is-on{ border-color:var(--sage); background:color-mix(in srgb, var(--sage) 7%, #fff); }
.bw-cust-token{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%; line-height:1;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  background:radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--tk,#9bbf78) 45%, #fff), color-mix(in srgb, var(--tk,#9bbf78) 22%, #fff));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tk,#9bbf78) 34%, transparent);
}
.bw-cust-name{ flex:1 1 auto; min-width:0; font:700 13px var(--font-b); color:var(--ink); }
.bw-cust-price{ flex:0 0 auto; font:800 12px var(--font-b); color:var(--sage-d); }
.bw-cust-free{ flex:0 0 auto; font:700 11px var(--font-b); color:var(--ink3); }
.bw-cust-plus{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:none; cursor:pointer;
  background:var(--sage-c1); color:var(--sage-d); font-size:18px; font-weight:800; line-height:1;
}
.bw-cust-step{ flex:0 0 auto; display:flex; align-items:center; border:1.5px solid var(--sage); border-radius:999px; overflow:hidden; }
.bw-cust-step button{ width:28px; height:28px; border:none; background:#fff; color:var(--sage-d); font-size:15px; font-weight:800; cursor:pointer; line-height:1; }
.bw-cust-step button.plus{ background:var(--sage); color:#fff; }
.bw-cust-step .q{ min-width:20px; text-align:center; font:800 12px var(--font-b); color:var(--sage-d); }
.bw-cust-foot{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px; border-top:1px solid var(--line);
}
.bw-cust-sum{ font:700 12.5px var(--font-b); color:var(--ink2); }
.bw-cust-foot .btn{ flex:0 0 auto; }

@media (prefers-reduced-motion:reduce){
  .bw-cust-scrim, .bw-cust-sheet{ transition:none; }
}

/* build-your-own, drawer-sized. The label + bowl are pinned together as one
   full-width "stage" that DISSOLVES at its bottom edge (a mask fade) so the
   ingredients melt in as they scroll under it — no divider line. The spinning
   ring + steam are dropped in this compact form; faint leaves fill the sides. */
.bw-drawer #wizBuild .byo-pinned{
  position:sticky; top:0; z-index:6;
  /* bleed past the scroll's 26px side padding to the panel edges, pad back */
  margin:0 -26px 8px; padding:8px 26px 20px;
  background:
    radial-gradient(120% 96% at 50% 42%, rgba(255,255,255,0.7), rgba(255,255,255,0) 62%),
    linear-gradient(180deg,#eef6e5 0%,#ebf3e0 100%);
  /* the fade that makes the bottom dissolve instead of drawing a hard line */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%);
}
.bw-drawer #wizBuild .byo-pinned .bw-drawer-eyebrow{ position:relative; z-index:2; text-align:center; margin:0 0 2px; }
.bw-drawer #wizBuild .byo-bowl-wrap{
  position:relative; z-index:1;
  max-width:none; margin:0; padding:0; min-height:150px; align-items:center;
}
.bw-drawer #wizBuild .byo-orbit,
.bw-drawer #wizBuild .byo-sparkles{ display:none; }
.bw-drawer .byo-scale{ transform:scale(0.9); margin-bottom:0; }
.bw-drawer .byo-group{ margin-bottom:20px; }
.bw-drawer .byo-fine{ text-align:left; margin-top:4px; }

/* faint botanical accents filling the space either side of the pinned bowl */
.byo-pin-leaf{ position:absolute; z-index:0; pointer-events:none; opacity:.5; filter:drop-shadow(0 4px 6px rgba(46,90,40,.12)); }
.byo-pin-leaf.byo-pl1{ width:42px; height:42px; left:7%; bottom:30%; animation:bwDriftA 9s ease-in-out infinite; }
.byo-pin-leaf.byo-pl2{ width:52px; height:52px; right:6%; top:24%; animation:bwDriftB 11s ease-in-out infinite; }
.byo-pin-dot{ position:absolute; z-index:0; pointer-events:none; border-radius:50%; }
.byo-pin-dot.byo-pd1{ left:17%; top:30%; width:8px; height:8px; background:#E7B63A; opacity:.55; animation:bwFloat 5s ease-in-out infinite; }
.byo-pin-dot.byo-pd2{ right:16%; bottom:36%; width:7px; height:7px; background:#7cae3f; opacity:.55; animation:bwFloat 6s ease-in-out infinite -2s; }
@media (max-width:640px){ .byo-pin-leaf, .byo-pin-dot{ display:none; } }
.byo-foot-info{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.byo-foot-info #byoCount{ font:600 12px var(--font-b); color:var(--ink3); }
.byo-foot-info .byo-price{ font:700 22px var(--font-b); color:var(--sage-d); }
.bw-drawer .byo-add:disabled{ background:#CDD6C4; box-shadow:none; cursor:not-allowed; }

/* ============================ responsive ============================ */
@media (max-width:1120px){
  .bw-thumbs{ gap:18px; }
}
@media (max-width:960px){
  .bw-showcase{ grid-template-columns:1fr; gap:14px; }
  .bw-thumbs{ grid-template-columns:repeat(auto-fit,max-content); justify-content:center; }
}
@media (max-width:880px){
  .bw-hero-art{ min-height:340px; }
  .bw-hero-splash{ width:min(320px,80%); }
  .bw-cutout-leaf{ top:3%; }
  .bw-steps{ grid-template-columns:1fr; gap:40px; max-width:420px; }
  .bw-vine{ display:none; }
  .bw-vine-vert{
    display:block; position:absolute; left:50%; top:70px; bottom:70px; width:2px;
    transform:translateX(-50%);
    background:repeating-linear-gradient(#bcd6bc,#bcd6bc 5px,transparent 5px,transparent 12px);
  }
  .bw-band{ padding:40px 26px; text-align:center; }
  .bw-band-copy{ margin:0 auto; }
  .bw-band-copy p{ margin-inline:auto; }
  .bw-band-trail{ justify-content:center; }
  .bw-band-scene{ display:none; }
  .byo-grid{ grid-template-columns:1fr; }
  .byo-stage{ position:static; }
  .byo-scale{ transform:scale(1.2); margin-bottom:16px; }
  .byo-bowl-wrap{ min-height:280px; }
}
@media (max-width:620px){
  /* featured disc + orbit at phone scale (r=122px) */
  .bw-feat-stage{ width:196px; height:196px; margin:52px auto 40px; }
  .bw-feat-dish{ width:196px; height:196px; }
  .bw-feat-orbit{ width:244px; height:244px; margin-left:-122px; margin-top:-122px; }
  .bw-slot-a{ transform:translate(-50%,-50%) translate(0,-122px); }
  .bw-slot-b{ transform:translate(-50%,-50%) translate(106px,61px); }
  .bw-slot-c{ transform:translate(-50%,-50%) translate(-106px,61px); }
  .bw-perk{ font-size:13px; padding:4px 11px; }
  .bw-thumbs{ grid-template-columns:repeat(3,max-content); gap:14px; }
  .bw-thumb{ width:76px; height:76px; }
  .bw-thumb-label{ max-width:80px; }
}
@media (max-width:600px){
  /* full-bleed drawer on phones — a 420px panel would leave no backdrop to tap */
  .bw-drawer{ width:100vw; border-radius:0; }
  .bw-drawer-tabs{ padding:18px 58px 12px 18px; }
  .bw-scr-scroll{ padding:6px 18px 18px; }
  .bw-drawer #wizBuild .byo-pinned{ margin-left:-18px; margin-right:-18px; padding-left:18px; padding-right:18px; }
  .bw-scr-foot{ padding:12px 18px; }
  .bw-drawer .bw-feat{ gap:12px; }
  .bw-drawer .bw-feat-stage{ width:168px; height:168px; margin:34px auto 18px; }
  .bw-drawer .bw-feat-dish{ width:168px; height:168px; }
  .bw-drawer .bw-feat-orbit{ width:212px; height:212px; margin-left:-106px; margin-top:-106px; }
  .bw-drawer .bw-slot-a{ transform:translate(-50%,-50%) translate(0,-106px); }
  .bw-drawer .bw-slot-b{ transform:translate(-50%,-50%) translate(92px,53px); }
  .bw-drawer .bw-slot-c{ transform:translate(-50%,-50%) translate(-92px,53px); }
  .bw-drawer .bw-perk{ font-size:11px; padding:3px 9px; }
  .bw-drawer .bw-feat-info h3{ font-size:clamp(25px,7vw,30px); }
}

/* ============================ reduced motion ============================ */
@media (prefers-reduced-motion:reduce){
  .bw-hero-splash, .bw-drift, .bw-cutout, .bw-eyebrow-dot,
  .bw-vine-run, .bw-dot, .bw-orbit-arrow,
  .bw-feat-ring, .bw-feat-orbit, .bw-perk, .bw-feat-dish, .bw-thumb,
  .bw-fall, .bw-wisp, .bw-band-bowl,
  .byo-orbit, .byo-float, .byo-piece, .byo-steam-g, .byo-spark{
    animation:none !important;
  }
  .bw-step{ opacity:1; transform:none; transition:none; }
  .bw-drawer, .bw-drawer::backdrop, .bw-wiz{ transition:none; }
  .bw-drawer *{ animation:none !important; }
}

/* ============================ the leafy promise ============================
 * Kinetic reel — "Every bowl is [phrase]" cycles the five promises seamlessly
 * (6th item repeats the 1st). Ported from the prototype's leafyReel. */
.bw-promise{
  position:relative; overflow:hidden; text-align:center;
  padding:66px 0 70px;
  background:radial-gradient(120% 100% at 50% 0%, #f4f0e6 0%, #eef4e6 60%, #e8f0dd 100%);
}
.bw-promise .wrap{ position:relative; z-index:2; }
.bw-promise-line{
  display:flex; align-items:baseline; justify-content:center; gap:16px; flex-wrap:wrap;
  font:600 clamp(30px,4.8vw,52px)/1.1 var(--font-d); color:#23302A;
}
.bw-reel-mask{ display:inline-block; height:1.15em; overflow:hidden; vertical-align:bottom; }
.bw-reel{ display:flex; flex-direction:column; animation:bwReel 12s cubic-bezier(.7,0,.3,1) infinite; }
.bw-reel-item{ height:1.15em; font-style:italic; white-space:nowrap; color:var(--c,#2E7D32); }
.bw-promise-sub{ font:400 15px/1.6 var(--font-b); color:#6f7b71; max-width:440px; margin:20px auto 0; }

/* oversized faded produce flanking the reel + sparkles */
.bw-promise-big{ position:absolute; pointer-events:none; z-index:0; animation:bwFloatRot 8s ease-in-out infinite; }
.bw-promise-big1{ --rot:-12deg; left:2%;  bottom:-8%; font-size:118px; opacity:.16; }
.bw-promise-big2{ --rot:10deg;  right:3%; top:-8%;    font-size:96px;  opacity:.14; animation-delay:-3s; }
.bw-spark{ position:absolute; pointer-events:none; z-index:1; font-size:20px; animation:bwFloat 5.5s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .bw-reel{ animation:none; } }
@media (max-width:880px){ .bw-promise-big1{ font-size:96px; } .bw-promise-big2{ font-size:78px; } }

/* ===================== ambient decoration (fills the screens) ==============
 * Soft tonal orbs give depth to the negative space of each one-screen section,
 * and a few produce accents drift in the margins — so the page reads fresh and
 * full instead of plain. Content sits above the decoration via z-index. */
.bw-ways, .bw-sig, .bw-band-sec{ position:relative; overflow:hidden; }
.bw-ways > .wrap, .bw-sig > .wrap, .bw-band-sec > .wrap{ position:relative; z-index:3; }

.bw-orb{ position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.bw-orb-sage{  background:radial-gradient(circle, rgba(151,193,133,.30) 0%, rgba(151,193,133,0) 70%); }
.bw-orb-mint{  background:radial-gradient(circle, rgba(120,182,150,.24) 0%, rgba(120,182,150,0) 70%); }
.bw-orb-warm{  background:radial-gradient(circle, rgba(224,147,10,.14) 0%, rgba(224,147,10,0) 72%); }
.bw-orb-cream{ background:radial-gradient(circle, rgba(251,239,220,.95) 0%, rgba(251,239,220,0) 70%); }

.bw-ring{ position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  border:1.6px dashed rgba(122,174,124,.34); }

.bw-float{ position:absolute; pointer-events:none; z-index:1; line-height:1;
  filter:drop-shadow(0 6px 9px rgba(46,90,40,.16));
  animation:bwDriftA 9s ease-in-out infinite; }

@media (prefers-reduced-motion:reduce){ .bw-float{ animation:none; } }
@media (max-width:880px){ .bw-float, .bw-ring{ display:none; } .bw-orb{ opacity:.65; } }

/* ============================ bowl passes ============================
 * Prepaid salad-bowl passes, styled to the bowls page (clean white cards,
 * green primary + teal "best value", Fraunces headings). Buy buttons carry
 * data-add-pass — wired by the delegated handler in main.js. */
/* hero CTA that jumps to the bowl passes — teal to read as the pass option */
.bw-hero-passcta{ color:#0E7C7B; border-color:#0E7C7B; }
.bw-hero-passcta:hover{ background:#0E7C7B; border-color:#0E7C7B; color:#fff; }

.bw-passes{ padding:40px 0 52px; position:relative; overflow:hidden; }
.bw-passes > .wrap{ position:relative; z-index:3; }
/* ---- open editorial plans: circular "bowl" discs, no boxes.
       Sized compactly so the whole section settles into one screen. ---- */
.bw-passes .bw-ways-head{ margin-bottom:18px; }
.bw-passes .bw-ways-head h2{ font-size:clamp(26px,4vw,38px); }
.bwp-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px 40px;
  max-width:800px; margin:14px auto 0; position:relative;
}
.bwp-grid::before{ /* organic dashed divider between the two plans */
  content:""; position:absolute; top:12%; bottom:12%; left:50%; width:2px; transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,#cfe0cf,#cfe0cf 5px,transparent 5px,transparent 11px);
}
.bwp-plan-item{
  --pac:#2E7D32;
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:4px 8px;
}
.bwp-plan-item.is-featured{ --pac:#0E7C7B; }

.bwp-taghold{ min-height:26px; display:flex; align-items:center; margin-bottom:6px; }
.bwp-tag{
  display:inline-flex; align-items:center; gap:5px;
  background:linear-gradient(135deg,#F3C24E,#D9982B); color:#4a3410;
  font:800 10px var(--font-b); letter-spacing:.07em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--r-pill); box-shadow:0 8px 16px -5px rgba(180,130,40,.6);
}

/* the hero: the bowl count cradled in a Leafy leaf — the brand motif, gently
   floating, with veins + a sheen. No box, no circle. */
.bwp-leaf{
  position:relative; width:152px; height:152px; margin-bottom:6px;
  animation:bwFloat 7s ease-in-out infinite;
}
.bwp-leaf-svg{
  position:absolute; inset:0; width:100%; height:100%; color:var(--pac);
  filter:drop-shadow(0 15px 28px color-mix(in srgb, var(--pac) 32%, transparent));
  transition:transform .3s ease; transform-origin:50% 82%; /* sway from the stem */
}
.bwp-plan-item:hover .bwp-leaf-svg{ transform:rotate(-6deg) scale(1.04); }
.bwp-leaf-stem{ fill:none; stroke:currentColor; stroke-width:4.5; stroke-linecap:round; }
.bwp-leaf-blade{ fill:currentColor; }
.bwp-leaf-shine{ fill:#fff; opacity:.16; }
.bwp-leaf-vein{ fill:none; stroke:#fff; stroke-opacity:.42; stroke-width:1.8; stroke-linecap:round; }
.bwp-leaf-n{ position:absolute; left:0; right:0; top:45%; transform:translateY(-50%); text-align:center; z-index:1; font:600 46px/1 var(--font-d); color:#fff; text-shadow:0 3px 9px rgba(0,0,0,.24); }
.bwp-leaf-u{ position:absolute; left:0; right:0; top:61%; text-align:center; z-index:1; font:700 10px var(--font-b); letter-spacing:.14em; text-transform:uppercase; color:#fff; opacity:.92; }
@media (prefers-reduced-motion:reduce){ .bwp-leaf{ animation:none; } }

.bwp-name{ font:600 22px/1 var(--font-d); color:var(--ink); margin:0 0 5px; }
.bwp-name span{ font-style:italic; color:var(--pac); }
.bwp-blurb{ font:400 12.5px/1.5 var(--font-b); color:var(--ink2); margin:0 0 10px; max-width:260px; }

.bwp-priceline{ display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.bwp-price{ font:700 27px/1 var(--font-d); color:var(--ink); }
.bwp-per{ font:600 12px var(--font-b); color:var(--ink2); }
.bwp-save{ font:800 11px var(--font-b); color:var(--pac); background:color-mix(in srgb,var(--pac) 12%,#fff); border:1px solid color-mix(in srgb,var(--pac) 26%,transparent); border-radius:var(--r-pill); padding:5px 10px; }

.bwp-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:14px; }
.bwp-chip{ font:600 11.5px var(--font-b); color:var(--sage-d); background:#fff; border:1px solid #dfe8d7; border-radius:var(--r-pill); padding:5px 11px; box-shadow:0 5px 12px -7px rgba(63,82,54,.35); }

.bwp-buy{
  margin-top:auto; /* pin to the bottom so both plans' buttons line up */
  cursor:pointer; background:var(--pac); color:#fff; border:none;
  border-radius:var(--r-pill); padding:12px 26px; font:800 13.5px var(--font-b);
  box-shadow:0 12px 24px -8px color-mix(in srgb, var(--pac) 55%, transparent);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.bwp-buy:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 18px 32px -8px color-mix(in srgb, var(--pac) 62%, transparent); }
.bwp-buy.is-busy{ opacity:.7; cursor:default; transform:none; }
.bwp-vs{ font:400 11.5px var(--font-b); color:var(--ink3); text-align:center; margin:8px 0 0; }

@media (max-width:760px){
  .bwp-grid{ grid-template-columns:1fr; max-width:340px; gap:30px; }
  .bwp-grid::before{ display:none; }
}

/* "use my pass" toggle in the drawer footer — full-width row above the buttons
   (the footer is flex-wrap, so flex-basis:100% drops it onto its own line) */
.bw-redeem{
  flex:1 0 100%; display:flex; align-items:center; gap:10px; cursor:pointer;
  background:color-mix(in srgb, #0E7C7B 8%, #fff);
  border:1px solid color-mix(in srgb, #0E7C7B 24%, transparent);
  border-radius:14px; padding:10px 14px;
  font:600 13px var(--font-b); color:var(--sage-d);
}
.bw-redeem-cb{ width:18px; height:18px; accent-color:#0E7C7B; flex:none; cursor:pointer; }
.bw-redeem-txt b{ color:#0E7C7B; font-weight:800; }

/* ======================= one filled screen per section =====================
 * hero / ways / signature / build each fill one screen — but the content is
 * stretched or distributed to fill it, never left floating as a small block in
 * empty space. Gift + quote + footer are composed together as the final screen.
 * Desktop only; below 881px sections keep their natural stacked spacing. */
@media (min-width:881px){
  .bw-screen.bw-hero,
  .bw-screen.bw-ways,
  .bw-screen.bw-sig,
  .bw-screen.bw-passes,
  .bw-screen.bw-band-sec{
    min-height:calc(100vh - 75px);
    display:flex; flex-direction:column; justify-content:center;
    padding-top:clamp(16px,2.6vh,34px); padding-bottom:clamp(16px,2.6vh,34px);
  }
  /* .wrap carries margin:0 auto; as a flex item that cancels the stretch it had
     as a block and collapses full-width content (the band went square). Pin it. */
  .bw-screen.bw-hero > .wrap,
  .bw-screen.bw-ways > .wrap,
  .bw-screen.bw-sig  > .wrap,
  .bw-screen.bw-passes > .wrap,
  .bw-screen.bw-band-sec > .wrap{ width:100%; }

  /* signature has three blocks (head / bowls / cta) — spread them over the
     screen so it fills evenly */
  .bw-sig > .wrap{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly; }
  /* ways has two (head / steps) — spreading leaves a hole between them, so keep
     it a centred group with breathing room; the orbs + produce fill the margins */
  .bw-ways > .wrap{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:clamp(26px,4.5vh,58px); }

  /* build band sits at a comfortable size, centred in its screen; the orbs and
     drifting produce (decoration block) fill the space around it so the section
     still reads full rather than a giant box */
  .bw-band-sec .bw-band{
    min-height:clamp(420px,53vh,492px);
    display:flex; flex-direction:column; justify-content:center;
  }
  .bw-band-scene{ width:238px; height:224px; }

  /* the promise reel and the gift teaser are sized to share ONE screen together
     (promise ~480 + gift ~320 ≈ one screen), then the footer closes the page */
  .bw-screen.bw-promise{
    min-height:clamp(400px,52vh,486px);
    display:flex; flex-direction:column; justify-content:center;
    padding-top:clamp(28px,4vh,48px); padding-bottom:clamp(28px,4vh,48px);
  }
}