:root{
    --orange:#EF5B25;
    --orange-deep:#D6480F;
    --orange-soft:#FBE3D4;
    --charcoal:#262523;
    --charcoal-soft:#4A4744;
    --cream:#FBF6F0;
    --white:#FFFFFF;
    --radius:28px;
    --radius-sm:18px;
    --shadow:0 18px 40px -18px rgba(38,37,35,.28);
    --maxw:1180px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Poppins',system-ui,-apple-system,sans-serif;
    background:var(--cream);color:var(--charcoal);
    -webkit-font-smoothing:antialiased;line-height:1.6;
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

  /* ---------- Wordmark ---------- */
  .mark{line-height:1;text-align:center;display:inline-block}
  .mark.left{text-align:left}
  .mark .q{font-weight:800;letter-spacing:.1em;font-size:1.28rem;display:block}
  .mark .sub{font-weight:200;letter-spacing:.24em;font-size:.47rem;display:block;margin-top:6px}
  .mark .estd{font-weight:300;letter-spacing:.3em;font-size:.42rem;display:block;margin-top:4px;opacity:.6}
  .logo-link{text-decoration:none;color:inherit}
  .icon-defs{position:absolute}

  /* ---------- Announcement ---------- */
  .ticker{
    background:var(--charcoal);color:var(--cream);font-size:.72rem;letter-spacing:.22em;
    text-transform:uppercase;font-weight:300;text-align:center;padding:11px 20px;
  }
  .ticker b{color:var(--orange);font-weight:600}

  /* ---------- Nav ---------- */
  header{
    position:sticky;top:0;z-index:50;background:rgba(251,246,240,.9);
    backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(38,37,35,.08);
  }
  nav{display:flex;align-items:center;justify-content:space-between;height:84px}
  .navlinks{display:flex;gap:34px;align-items:center}
  .navlinks a{
    text-decoration:none;color:var(--charcoal);font-size:.74rem;font-weight:500;
    letter-spacing:.16em;text-transform:uppercase;position:relative;padding:4px 0;
  }
  .navlinks a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--orange);transition:width .25s ease}
  .navlinks a:hover::after{width:100%}
  .btn{
    display:inline-block;background:var(--orange);color:var(--white);text-decoration:none;
    font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    padding:14px 26px;border-radius:100px;transition:transform .2s ease,background .2s ease;
    border:none;cursor:pointer;font-family:inherit;
  }
  .btn:hover{background:var(--orange-deep);transform:translateY(-2px)}
  .btn.ghost{background:transparent;color:var(--charcoal);border:1.5px solid rgba(38,37,35,.25)}
  .btn.ghost:hover{background:var(--charcoal);color:var(--cream);border-color:var(--charcoal)}
  .btn.light{background:var(--white);color:var(--orange)}
  .btn.light:hover{background:var(--cream)}
  .btn.sm{padding:11px 20px;font-size:.66rem}
  .burger{display:none;background:none;border:none;cursor:pointer;font-size:1.4rem;color:var(--charcoal)}

  /* ---------- Waffle texture (for photo placeholders) ---------- */
  .waffle{
    background-color:var(--orange-soft);
    background-image:
      linear-gradient(rgba(214,72,15,.16) 2px,transparent 2px),
      linear-gradient(90deg,rgba(214,72,15,.16) 2px,transparent 2px),
      radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),transparent 55%);
    background-size:34px 34px,34px 34px,100% 100%;
  }
  .waffle.cocoa{
    background-color:#8A5233;
    background-image:
      linear-gradient(rgba(50,25,10,.3) 2px,transparent 2px),
      linear-gradient(90deg,rgba(50,25,10,.3) 2px,transparent 2px),
      radial-gradient(circle at 35% 25%,rgba(255,255,255,.25),transparent 55%);
    background-size:34px 34px,34px 34px,100% 100%;
  }

  /* ---------- Hero ---------- */
  .hero{padding:70px 0 90px;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
  .eyebrow{
    display:inline-flex;align-items:center;gap:9px;font-size:.68rem;font-weight:600;
    letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:22px;
  }
  .eyebrow::before{content:'';width:26px;height:2px;background:var(--orange);display:block}
  h1{font-size:clamp(2.7rem,5.4vw,4.4rem);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin-bottom:22px}
  h1 .accent{color:var(--orange)}
  .lede{font-size:1.08rem;color:var(--charcoal-soft);max-width:32rem;margin-bottom:32px;font-weight:300}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px}
  .hero-meta{display:flex;gap:36px;flex-wrap:wrap;padding-top:26px;border-top:1px solid rgba(38,37,35,.12)}
  .hero-meta div span{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--charcoal-soft);font-weight:500;margin-bottom:4px}
  .hero-meta div strong{font-size:.95rem;font-weight:600}

  .hero-art{position:relative;display:grid;place-items:center;aspect-ratio:1/1}
  .hero-art .disc{
    position:absolute;inset:9%;border-radius:50%;background:var(--orange-soft);
    box-shadow:var(--shadow);
  }
  .hero-art .hero-waffle{position:relative;z-index:2;width:100%;filter:drop-shadow(0 26px 34px rgba(38,37,35,.26));animation:float 7s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(2deg)}}
  .hero-art .badge{
    position:absolute;z-index:3;background:var(--charcoal);color:var(--cream);border-radius:100px;
    padding:12px 22px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;box-shadow:var(--shadow);
  }
  .hero-art .badge.b1{top:2%;left:-2%}
  .hero-art .badge.b2{bottom:5%;right:-2%;background:var(--white);color:var(--orange)}

  /* ---------- Sections ---------- */
  section{padding:96px 0}
  .sec-head{text-align:center;max-width:44rem;margin:0 auto 56px}
  h2{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.015em;line-height:1.1;margin-bottom:16px}
  .sec-head p{color:var(--charcoal-soft);font-weight:300;font-size:1.02rem}
  .menu-strip{
    display:inline-flex;align-items:center;gap:14px;background:var(--orange-soft);color:var(--orange-deep);
    border-radius:100px;padding:9px 22px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
    font-weight:600;margin-bottom:18px;
  }

  /* ---------- FLAVOUR CARDS (Crumbl-style hover) ---------- */
  #menu{background:var(--white)}
  .flavours{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
  .flavours > .flavour{flex:0 0 calc(25% - 11px);max-width:calc(25% - 11px)}
  .flavour{
    position:relative;text-align:center;padding:14px 10px 46px;cursor:pointer;
    border:none;background:none;font-family:inherit;color:inherit;
  }
  /* the panel that rises behind the waffle — deliberately smaller than the waffle */
  .flavour .panel{
    position:absolute;left:11%;right:11%;top:12%;bottom:-4px;border-radius:26px;
    background:#F9DBC7;opacity:0;transform:scale(.86);
    transition:opacity .38s cubic-bezier(.2,.8,.3,1),transform .38s cubic-bezier(.2,.8,.3,1);
  }
  .flavour:hover .panel,.flavour:focus-visible .panel{opacity:1;transform:scale(1)}
  .flavour .tag{
    position:absolute;z-index:4;top:16px;left:50%;transform:translate(-50%,-6px);
    background:var(--charcoal);color:var(--cream);font-size:.54rem;letter-spacing:.18em;
    text-transform:uppercase;font-weight:600;padding:6px 13px;border-radius:100px;
    opacity:0;transition:opacity .3s ease,transform .3s ease;
  }
  .flavour:hover .tag{opacity:1;transform:translate(-50%,0)}
  .flavour-art{position:relative;z-index:2;display:block;width:100%;padding:0 2%}
  .flavour-art img{
    display:block;width:100%;height:auto;
    filter:drop-shadow(0 20px 26px rgba(38,37,35,.26));
    transition:transform .38s cubic-bezier(.2,.8,.3,1),filter .38s ease;
  }
  .flavour:hover .flavour-art img{transform:scale(1.12) rotate(-3deg);filter:drop-shadow(0 30px 34px rgba(38,37,35,.32))}
  .flavour-info{position:relative;z-index:3;margin-top:16px}
  .flavour-info h3{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;transition:color .3s ease}
  .flavour:hover .flavour-info h3{color:var(--orange-deep)}
  .flavour-info p{
    font-size:.8rem;color:var(--charcoal-soft);font-weight:300;margin:6px auto 0;max-width:15rem;
    min-height:4.4em;transition:color .3s ease;
  }
  .flavour-info .price{display:block;margin-top:12px;font-weight:700;color:var(--orange-deep);font-size:.98rem}
  .flavour .add{
    position:absolute;z-index:3;left:50%;bottom:8px;transform:translate(-50%,10px);
    opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;white-space:nowrap;
  }
  .flavour:hover .add{opacity:1;transform:translate(-50%,0);pointer-events:auto}

  .note{text-align:center;margin-top:56px;font-size:.86rem;color:var(--charcoal-soft);font-weight:300}

  /* ---------- Video / story ---------- */
  #story{background:var(--charcoal);color:var(--cream)}
  #story .sec-head p{color:rgba(251,246,240,.65)}
  .video{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
  .video::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,37,35,.15),rgba(38,37,35,.62))}
  .play{position:relative;z-index:2;width:92px;height:92px;border-radius:50%;background:var(--orange);display:grid;place-items:center;transition:transform .25s ease;box-shadow:0 10px 30px rgba(0,0,0,.3)}
  .video:hover .play{transform:scale(1.09)}
  .play::before{content:'';border-left:24px solid var(--white);border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
  .video-cap{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:34px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
  .video-cap h3{font-size:1.4rem;font-weight:700;color:var(--white)}
  .video-cap span{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.75);font-weight:500}
  .story-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:5}
  .impact{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:64px}
  .stat{border:1px solid rgba(251,246,240,.16);border-radius:var(--radius-sm);padding:34px 28px}
  .stat strong{display:block;font-size:2.4rem;font-weight:800;color:var(--orange);line-height:1;margin-bottom:10px}
  .stat span{font-size:.86rem;color:rgba(251,246,240,.7);font-weight:300}

  /* ---------- Order ---------- */
  .order-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  #hire{background:var(--white)}
  #hire .order-grid{grid-template-columns:repeat(2,1fr)}
  #hire .order-card{background:var(--cream)}
  .order-card{background:var(--white);border-radius:var(--radius);padding:38px 32px;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
  .order-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .order-card .num{
    width:46px;height:46px;border-radius:50%;background:var(--orange-soft);color:var(--orange-deep);
    display:grid;place-items:center;font-weight:800;font-size:1rem;margin-bottom:22px;
  }
  .order-card h3{font-size:1.15rem;font-weight:700;margin-bottom:10px}
  .order-card p{font-size:.88rem;color:var(--charcoal-soft);font-weight:300;flex:1;margin-bottom:20px}
  .order-card .meta{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--orange)}
  .promise{
    margin-top:34px;background:var(--orange);color:var(--white);border-radius:var(--radius);
    padding:52px 46px;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
  }
  .promise h3{font-size:1.7rem;font-weight:800;margin-bottom:10px;letter-spacing:-.01em}
  .promise p{font-weight:300;max-width:34rem;opacity:.93}

  /* ---------- Visit ---------- */
  #visit{background:var(--white)}
  #visit .lede{margin-bottom:0}
  .visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .hours{list-style:none;margin:28px 0}
  .hours li{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(38,37,35,.1);font-size:.92rem}
  .hours li span:first-child{font-weight:500}
  .hours li span:last-child{color:var(--charcoal-soft);font-weight:300}
  .hours li.closed span:last-child{color:rgba(38,37,35,.4)}
  .map{aspect-ratio:4/5;border-radius:var(--radius);display:grid;place-items:center;box-shadow:var(--shadow)}
  .pin{background:var(--white);border-radius:var(--radius-sm);padding:26px 30px;text-align:center;box-shadow:var(--shadow);max-width:78%}
  .pin strong{display:block;font-size:1.05rem;font-weight:700;margin-bottom:6px}
  .pin span{font-size:.84rem;color:var(--charcoal-soft);font-weight:300}

  /* ---------- Newsletter ---------- */
  #join{background:var(--cream);text-align:center}
  #join .sec-head{margin-bottom:34px}
  .signup{display:flex;gap:12px;max-width:30rem;margin:0 auto;flex-wrap:wrap;justify-content:center}
  .signup input{flex:1;min-width:15rem;padding:15px 22px;border-radius:100px;border:1.5px solid rgba(38,37,35,.18);font-family:inherit;font-size:.92rem;background:var(--white);color:var(--charcoal)}
  .signup input:focus{outline:none;border-color:var(--orange)}
  .signup-success{font-weight:500;color:var(--orange)}

  /* ---------- Footer ---------- */
  footer{background:var(--charcoal);color:var(--cream);padding:72px 0 34px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
  .foot-blurb{margin-top:20px;max-width:20rem}
  .foot-grid h4{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:18px;color:var(--orange)}
  .foot-grid a,.foot-grid p{display:block;color:rgba(251,246,240,.66);text-decoration:none;font-size:.88rem;font-weight:300;margin-bottom:11px}
  .foot-grid a:hover{color:var(--orange)}
  .foot-bottom{border-top:1px solid rgba(251,246,240,.14);padding-top:28px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.76rem;color:rgba(251,246,240,.45);font-weight:300}
  .foot-bottom a{color:var(--orange);text-decoration:none}



  /* ---------- ORANGE SPLASH HERO ---------- */
  body.splash{background:var(--cream)}
  header.over{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
  header.over .navlinks a{color:var(--cream)}
  header.over .navlinks a::after{background:var(--cream)}
  header.over .mark{color:var(--cream)}
  header.over .btn{background:var(--cream);color:var(--orange-deep)}
  header.over .btn:hover{background:#fff}
  header.over .burger{color:var(--cream)}
  header{transition:background .35s ease,border-color .35s ease}

  .splash-hero{
    position:relative;background:var(--orange);color:var(--cream);
    padding:96px 0 190px;margin-top:-84px;padding-top:180px;overflow:hidden;
  }
  .splash-hero::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 22% 18%,rgba(255,255,255,.22),transparent 52%),
               radial-gradient(circle at 82% 76%,rgba(120,32,0,.26),transparent 55%);
    pointer-events:none;
  }
  .splash-inner{position:relative;z-index:3;text-align:center}
  .splash-eyebrow{
    display:inline-flex;align-items:center;gap:12px;font-size:.68rem;font-weight:600;
    letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:30px;
  }
  .splash-eyebrow::before,.splash-eyebrow::after{content:'';width:30px;height:1.5px;background:rgba(255,255,255,.6)}
  .splash-hero h1{
    font-size:clamp(3.6rem,13vw,11rem);font-weight:800;line-height:1;letter-spacing:-.035em;
    color:var(--cream);margin-bottom:0;
  }
  .splash-hero h1 .line2{
    display:block;font-size:clamp(1.5rem,4.4vw,3.4rem);letter-spacing:.3em;font-weight:600;
    margin-top:22px;color:rgba(255,255,255,.92);
  }
  .splash-lede{
    max-width:34rem;margin:34px auto 0;font-size:clamp(1rem,1.5vw,1.16rem);font-weight:300;
    color:rgba(255,255,255,.92);
  }
  .splash-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px}
  .splash-cta .btn{background:var(--cream);color:var(--orange-deep)}
  .splash-cta .btn:hover{background:#fff}
  .splash-cta .btn.outline{background:transparent;color:var(--cream);border:1.5px solid rgba(255,255,255,.55)}
  .splash-cta .btn.outline:hover{background:var(--cream);color:var(--orange-deep);border-color:var(--cream)}

  /* floating waffles */
  .floaters{position:absolute;inset:0;z-index:2;pointer-events:none}
  .floaters img{position:absolute;height:auto;filter:drop-shadow(0 22px 30px rgba(120,40,10,.4))}
  .f1{width:19%;top:12%;left:3%;animation:drift 11s ease-in-out infinite}
  .f2{width:13%;top:58%;left:9%;animation:drift 9s ease-in-out infinite reverse}
  .f3{width:22%;top:8%;right:2%;animation:drift 13s ease-in-out infinite 1s}
  .f4{width:14%;bottom:16%;right:8%;animation:drift 10s ease-in-out infinite .6s}
  .f5{width:7%;bottom:19%;left:46%;animation:drift 8s ease-in-out infinite 1.4s;opacity:.5}
  @keyframes drift{
    0%,100%{transform:translate3d(0,0,0) rotate(-8deg)}
    50%{transform:translate3d(0,-26px,0) rotate(9deg)}
  }
  @media (prefers-reduced-motion:reduce){
    .floaters img{animation:none!important}
    .marquee-track{animation:none!important}
  }

  /* drippy bottom edge */
  .drip{position:absolute;left:0;right:0;bottom:-1px;z-index:4;line-height:0}
  .drip svg{display:block;width:100%;height:auto}

  /* marquee */
  .marquee{
    background:var(--charcoal);color:var(--cream);overflow:hidden;padding:16px 0;
    white-space:nowrap;position:relative;
  }
  .marquee-track{display:inline-flex;gap:0;animation:slide 26s linear infinite;will-change:transform}
  .marquee-track span{
    font-size:.82rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;padding:0 26px;
  }
  .marquee-track span em{color:var(--orange);font-style:normal}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* scroll reveal */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
  .reveal.in{opacity:1;transform:none}

  @media (max-width:640px){
    .splash-hero{padding-top:140px;padding-bottom:140px}
    .mark .sub,.mark .estd{display:none}
    .mark .q{font-size:.98rem;letter-spacing:.08em}
    nav{height:68px}
    nav > .btn{padding:11px 16px;font-size:.6rem}
    .splash-hero h1{font-size:clamp(3rem,17vw,5rem)}
    .splash-hero h1 .line2{font-size:1.35rem;letter-spacing:.24em;margin-top:14px}
    .f2,.f5{display:none}
    .f1{width:26%;top:15%;left:-7%}
    .f3{width:28%;top:12%;right:-8%}
    .f4{width:22%;bottom:14%;right:-5%}
  }

  /* ---------- Cart ---------- */
  .cart-pill{
    position:fixed;right:26px;bottom:26px;z-index:80;display:none;align-items:center;gap:12px;
    background:var(--charcoal);color:var(--cream);border:none;border-radius:100px;cursor:pointer;
    padding:15px 24px;font-family:inherit;font-size:.76rem;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;box-shadow:0 16px 34px -12px rgba(38,37,35,.55);transition:transform .2s ease;
  }
  .cart-pill:hover{transform:translateY(-3px)}
  .cart-pill.pulse{animation:pop .42s cubic-bezier(.2,.8,.3,1)}
  @keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.13)}100%{transform:scale(1)}}
  .cart-pill.show{display:flex}
  .cart-pill .count{
    background:var(--orange);color:#fff;border-radius:100px;min-width:22px;height:22px;
    display:grid;place-items:center;font-size:.68rem;padding:0 6px;
  }
  .scrim{
    position:fixed;inset:0;background:rgba(38,37,35,.5);z-index:90;opacity:0;pointer-events:none;
    transition:opacity .3s ease;backdrop-filter:blur(2px);
  }
  .scrim.open{opacity:1;pointer-events:auto}
  .drawer{
    position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--cream);z-index:95;
    transform:translateX(100%);transition:transform .38s cubic-bezier(.2,.8,.3,1);
    display:flex;flex-direction:column;box-shadow:-20px 0 50px -20px rgba(38,37,35,.4);
  }
  .drawer.open{transform:translateX(0)}
  .drawer-head{
    display:flex;align-items:center;justify-content:space-between;padding:26px 28px;
    border-bottom:1px solid rgba(38,37,35,.1);
  }
  .drawer-head h3{font-size:1.1rem;font-weight:700}
  .drawer-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--charcoal-soft);line-height:1}
  .drawer-body{flex:1;overflow-y:auto;padding:22px 28px}
  .empty{text-align:center;color:var(--charcoal-soft);font-weight:300;font-size:.92rem;padding:50px 0}
  .line{display:flex;gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid rgba(38,37,35,.08)}
  .line .nm{flex:1}
  .line .nm strong{display:block;font-size:.94rem;font-weight:600}
  .line .nm span{font-size:.78rem;color:var(--charcoal-soft);font-weight:300}
  .qty{display:flex;align-items:center;gap:10px}
  .qty button{
    width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(38,37,35,.2);background:var(--white);
    cursor:pointer;font-size:1rem;line-height:1;color:var(--charcoal);font-family:inherit;
  }
  .qty button:hover{border-color:var(--orange);color:var(--orange)}
  .qty span{min-width:18px;text-align:center;font-weight:600;font-size:.9rem}
  .line-total{min-width:56px;text-align:right}
  .fulfil{margin-top:26px;display:none}
  .fulfil h4{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--charcoal-soft);margin-bottom:12px}
  .opt{
    display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid rgba(38,37,35,.14);
    border-radius:14px;cursor:pointer;margin-bottom:10px;background:var(--white);transition:border-color .2s ease;
  }
  .opt:hover{border-color:rgba(239,91,37,.5)}
  .opt.sel{border-color:var(--orange);background:#FFF6F0}
  .opt input{margin-top:4px;accent-color:var(--orange)}
  .opt strong{display:block;font-size:.9rem;font-weight:600}
  .opt span{font-size:.76rem;color:var(--charcoal-soft);font-weight:300}
  .drawer-foot{padding:22px 28px 26px;border-top:1px solid rgba(38,37,35,.1);background:var(--white)}
  .row{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:8px;font-weight:300;color:var(--charcoal-soft)}
  .row.total{font-size:1.12rem;font-weight:700;color:var(--charcoal);margin:14px 0 18px}
  .drawer-foot .btn{width:100%;text-align:center}
  .payby{
    text-align:center;font-size:.66rem;letter-spacing:.1em;color:var(--charcoal-soft);
    font-weight:300;margin-top:12px;text-transform:uppercase;
  }

  /* ---------- Responsive ---------- */
  @media (max-width:1000px){
    .hero-grid,.visit-grid{grid-template-columns:1fr;gap:48px}
    .hero-art{max-width:420px;margin:0 auto}
    .flavours{gap:20px}
    .flavours > .flavour{flex:0 0 calc(50% - 10px);max-width:calc(50% - 10px)}
    .order-grid,.impact{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:640px){
    .navlinks{display:none}
    .burger{display:block}
    section{padding:68px 0}
    .foot-grid{grid-template-columns:1fr}
    .promise{padding:38px 28px}
    .hero{padding:48px 0 62px}
    .video{aspect-ratio:4/5}
    .play{width:64px;height:64px}
    .play::before{border-left-width:18px;border-top-width:11px;border-bottom-width:11px}
    .video-cap{padding:22px;flex-direction:column;align-items:flex-start;gap:8px}
    .video-cap h3{font-size:1.1rem}
    .hero-art .badge{font-size:.58rem;padding:10px 16px}
    .hero-art .badge.b1{left:0}
    .hero-art .badge.b2{right:0}
    /* touch devices: show the panel resting, since there is no hover */
    .flavour .panel{opacity:.55;transform:scale(1)}
    .flavour .add{position:static;transform:none;opacity:1;pointer-events:auto;display:inline-block;margin-top:14px}
  }