/* ==========================================================================
   Chupa Chups landing page. Concept by Black Duck.
   Scale system:
     desktop (>=1024px): --u = min(viewport, 1920px) / 1920  (1u = 1 Figma px)
     compact (<1024px) : --s = min(viewport / 390, 1.4px)    (1s = 1 px on a 390 phone)
   ========================================================================== */

@font-face{font-family:"Avenir Next";font-style:normal;font-weight:500;font-display:swap;
  src:local("Avenir Next Medium"),local("AvenirNext-Medium")}
@font-face{font-family:"Avenir Next";font-style:normal;font-weight:600;font-display:swap;
  src:local("Avenir Next Demi Bold"),local("AvenirNext-DemiBold")}

:root{
  --red:#db1a37; --red-dark:#901a1a; --yellow:#fcd62d; --yellow-d:#fdc61b;
  --ink:#2b1e03; --white:#fffffe; --pink:#e53963; --blue:#007ad7; --green:#4c994d;
  --fred:"Fredoka One","Fredoka",ui-rounded,system-ui,sans-serif;
  --ave:"Avenir Next","Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --vw:100vw;
  --u:calc(min(var(--vw),1920px) / 1920);
  --s:min(calc(var(--vw) / 390),1.4px);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--ave);font-weight:500;
  font-size:calc(17*var(--s));line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
img{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[hidden]{display:none!important}
.fred{font-family:var(--fred);font-weight:400;font-variant-ligatures:none;--c:.733;--hd:.369}
.ave{font-family:var(--ave);font-weight:500;--c:.708;--hd:.317}
.ave-b{font-weight:600}

:focus-visible{outline:calc(3*var(--s)) solid var(--ink);outline-offset:calc(3*var(--s));border-radius:6px}
.skip{position:fixed;left:12px;top:-120px;z-index:200;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:999px;transition:top .2s}
.skip:focus{top:12px}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;height:calc(64*var(--s));
  transition:background .35s,box-shadow .35s,height .35s}
.site-header__in{max-width:1920px;margin:0 auto;height:100%;padding:0 calc(20*var(--s));display:flex;align-items:center;justify-content:space-between}
.site-header.is-scrolled,.site-header.is-menu{background:rgba(255,255,254,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 6px 24px rgba(43,30,3,.12)}
.site-header.is-menu{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.brand{font-size:calc(26*var(--s));letter-spacing:.03em;color:var(--red);line-height:1;display:inline-block;transition:transform .3s var(--ease-pop)}
.site-header.is-menu .brand{color:var(--white)}
.brand:hover{transform:rotate(-3deg) scale(1.05)}
.brand:active{transform:scale(.96)}
.nav{display:none}
.nav__link{position:relative;font-size:calc(21*var(--s));letter-spacing:-.01em;padding:.45em .9em;border-radius:999px;transition:background .25s,color .25s,transform .3s var(--ease-pop)}
.nav__link:hover{background:var(--yellow);color:var(--red);transform:translateY(-2px) rotate(-2deg)}
.nav__link:active{transform:scale(.95)}
.burger{position:relative;width:calc(46*var(--s));height:calc(46*var(--s));border-radius:50%;background:var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(5*var(--s));transition:transform .3s var(--ease-pop),background .25s}
.burger:hover{transform:rotate(8deg) scale(1.06)}
.burger:active{transform:scale(.93)}
.burger__bar{display:block;width:calc(20*var(--s));height:calc(2.5*var(--s));background:var(--white);border-radius:2px;transition:transform .35s var(--ease-pop),opacity .2s}
.burger[aria-expanded="true"]{background:var(--yellow)}
.burger[aria-expanded="true"] .burger__bar{background:var(--red)}
.burger[aria-expanded="true"] .burger__bar:nth-child(1){transform:translateY(calc(7.5*var(--s))) rotate(45deg)}
.burger[aria-expanded="true"] .burger__bar:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__bar:nth-child(3){transform:translateY(calc(-7.5*var(--s))) rotate(-45deg)}

/* full-screen mobile menu */
.menu{position:fixed;inset:0;z-index:90;background:var(--red);display:flex;align-items:center;justify-content:center;
  clip-path:circle(0 at calc(100% - 44px) 36px);visibility:hidden;transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s .6s}
.menu.is-open{clip-path:circle(150% at calc(100% - 44px) 36px);visibility:visible;transition:clip-path .6s cubic-bezier(.7,0,.2,1),visibility 0s}
.menu__nav{display:flex;flex-direction:column;align-items:center;gap:calc(14*var(--s))}
.menu__link{font-size:calc(46*var(--s));letter-spacing:.03em;color:var(--white);line-height:1.15;padding:.1em .4em;border-radius:999px;
  opacity:0;transform:translateY(24px);transition:opacity .4s,transform .5s var(--ease-pop),background .25s,color .25s}
.menu.is-open .menu__link{opacity:1;transform:none}
.menu.is-open .menu__link:nth-child(1){transition-delay:.15s}.menu.is-open .menu__link:nth-child(2){transition-delay:.22s}
.menu.is-open .menu__link:nth-child(3){transition-delay:.29s}.menu.is-open .menu__link:nth-child(4){transition-delay:.36s}
.menu.is-open .menu__link:nth-child(5){transition-delay:.45s}
.menu__link:hover{background:var(--yellow);color:var(--red)}
.menu__link--small{font-family:var(--ave);font-size:16px;letter-spacing:0;margin-top:calc(26*var(--s));color:var(--yellow);padding:.5em 1em}
body.is-locked{overflow:hidden}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;border-radius:999px;
  transition:transform .3s var(--ease-pop),box-shadow .3s,background .25s;will-change:transform}
.btn__t{display:block;text-align:center;flex:none;white-space:nowrap}
.btn__arr{position:relative;display:block;flex:none;transition:transform .3s var(--ease-pop)}
.btn__arr img{position:absolute;left:0;top:0;max-width:none;transform:scaleX(-1)}
.btn--red{background:var(--red);color:var(--white)}
.btn--yellow{background:var(--yellow);color:var(--red)}
.btn:hover{transform:translateY(-4px) rotate(-1.5deg);box-shadow:0 12px 24px rgba(43,30,3,.22)}
.btn:hover .btn__arr{transform:translateX(6px)}
.btn:active{transform:translateY(0) scale(.96);box-shadow:none}
.btn--lg{height:calc(60*var(--s));padding:0 calc(26*var(--s));gap:calc(18*var(--s));font-size:calc(19*var(--s))}
.btn--lg .btn__t{font-size:calc(19*var(--s));line-height:1}
.btn--lg .btn__arr{width:calc(26*var(--s));height:calc(10*var(--s))}
.btn--lg .btn__arr img{width:calc(26*var(--s)*1.0353);height:auto;left:calc(-.7*var(--s));top:calc(-1.4*var(--s))}
.btn--sm{height:calc(46*var(--s));padding:0 calc(22*var(--s));gap:calc(14*var(--s))}
.btn--sm .btn__t{font-size:calc(15*var(--s));line-height:1}
.btn--sm .btn__arr{width:calc(22*var(--s));height:calc(10*var(--s))}
.btn--sm .btn__arr img{width:calc(23*var(--s));height:auto;top:calc(-1*var(--s))}

/* ---------- decorative blobs ---------- */
.blob{position:absolute;display:flex;align-items:center;justify-content:center;pointer-events:none;
  left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u))}
.blob img{flex:none;max-width:none;width:calc(var(--iw,var(--w))*var(--u));height:calc(var(--ih,var(--h))*var(--u));transform:rotate(var(--r,0deg)) skewX(var(--k,0deg))}
.blob--h1{--x:-24;--y:-121;--w:354.366;--h:366.905;--iw:310.338;--ih:325.198;--r:8.37deg}
.blob--h2{--x:24.97;--y:-114.25;--w:607.083;--h:497.371;--iw:551.597;--ih:416.976;--r:8.37deg}
.blob--h2 img{margin-bottom:calc(4.6*var(--u))}
.blob--h3{--x:-110;--y:393;--w:461.93;--h:625.456;--iw:332.541;--ih:540.585;--r:-18.42deg;--k:-2.7deg}
.blob--h4{--x:755.98;--y:285;--w:216;--h:238}
.blob--h5{--x:-16;--y:728;--w:231;--h:184.359}
.blob--h6{--x:1650;--y:-20.5;--w:447.001;--h:293.5}
.blob--h7{--x:1808.29;--y:152.36;--w:204.706;--h:160.641}
.blob--f1{--x:-57;--y:79;--w:416.768;--h:408.44;--iw:310.338;--ih:325.198;--r:-111.66deg}
.blob--f2{--x:-177;--y:-239;--w:595.374;--h:668.237;--iw:551.597;--ih:416.976;--r:-111.66deg}
.blob--f2 img{margin-bottom:calc(4.6*var(--u))}

/* ---------- hero (compact base) ---------- */
.hero{position:relative;margin-bottom:calc(52*var(--s))}
.hero__clip{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--yellow);
  border-radius:0 0 calc(44*var(--s)) calc(44*var(--s));padding:calc(96*var(--s)) calc(22*var(--s)) 0;min-height:calc(560*var(--s))}
.blob{z-index:0}
.hero .blob{--u:calc(var(--vw) / 1100)}
.hero .blob--h4,.hero .blob--h5,.hero .blob--h6,.hero .blob--h7{display:none}
.hero__art--bg{display:none}
.hero__art--fg{order:2;position:relative;z-index:2;width:calc(100% + 44*var(--s));max-width:none;height:auto;margin:calc(10*var(--s)) calc(-22*var(--s)) calc(46*var(--s));aspect-ratio:1360/926;object-fit:cover}
.hero__copy{order:1;position:relative;z-index:5;display:flex;flex-direction:column;align-items:flex-start}
.hero__title{display:flex;flex-direction:column}
.h1a{display:block;font-size:calc(41*var(--s));line-height:1.02;letter-spacing:.03em;color:var(--red)}
.h1b{display:block;font-size:calc(33*var(--s));line-height:1.1;letter-spacing:.03em;color:var(--white);margin-top:calc(4*var(--s))}
.hero__lead{max-width:calc(330*var(--s));margin-top:calc(16*var(--s));font-size:calc(19*var(--s));line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.hero__copy .btn{margin-top:calc(22*var(--s))}
.hero__tab{position:absolute;left:50%;z-index:0;--u:calc(var(--s) * .55);width:calc(543*var(--u));height:calc(200*var(--u));margin-left:calc(-271.5*var(--u));top:calc(100% - 100*var(--u))}
.hero__tab img{width:100%;height:100%}
.hero__clip{z-index:1}
.scroll-btn{position:absolute;z-index:3;left:50%;--u:calc(var(--s) * .55);width:calc(122*var(--u));height:calc(122*var(--u));margin-left:calc(-61*var(--u));top:calc(100% - 61*var(--u));
  border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;transition:transform .35s var(--ease-pop),box-shadow .3s;animation:bob 2.4s ease-in-out infinite}
.scroll-btn img{width:calc(38.4352*var(--u));height:calc(36*var(--u));transform:rotate(-90deg) translateX(calc(-1*var(--u)))}
.scroll-btn:hover{animation-play-state:paused;transform:scale(1.1) rotate(8deg);box-shadow:0 14px 30px rgba(219,26,55,.45)}
.scroll-btn:active{transform:scale(.94)}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 calc(8*var(--u))}}

/* ---------- section titles ---------- */
.h2{display:block;font-size:calc(34*var(--s));line-height:1.1;letter-spacing:.01em;color:var(--red)}
.h2 .reveal{display:block}
.flavours,.people{padding:0 calc(22*var(--s))}
.flavours{padding-top:calc(44*var(--s))}

/* ---------- flavours (compact) ---------- */
.fgrid{margin-top:calc(26*var(--s));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(34*var(--s)) calc(16*var(--s))}
.fcard{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.fcard__media{position:relative;width:100%;aspect-ratio:282/360;container-type:normal}
.fcard__img{position:absolute;inset:0;transition:transform .45s var(--ease-pop)}
.fcard__img img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.stars{width:calc(var(--star)*5);height:var(--star);background:url(assets/star.svg) 0 0/var(--star) var(--star) repeat-x;--star:calc(17*var(--s));margin-top:calc(12*var(--s))}
.fname{display:block;margin-top:calc(8*var(--s));font-size:calc(21*var(--s));line-height:1.25;letter-spacing:.03em;color:#000}
.go{display:inline-flex;vertical-align:calc(-9*var(--s));width:calc(28*var(--s));height:calc(28*var(--s));margin-left:calc(8*var(--s));transition:transform .4s var(--ease-pop)}
.go img{width:100%;height:100%}
.fprice{margin-top:calc(6*var(--s));font-size:calc(21*var(--s));line-height:1.25;letter-spacing:.03em;color:#000}
.card-hit{position:absolute;inset:0;z-index:2;border-radius:calc(30*var(--s));cursor:pointer}
.card-hit:focus-visible{outline-offset:calc(4*var(--s))}
.fcard:hover .fcard__img{transform:translateY(calc(-12*var(--s))) rotate(-2.5deg) scale(1.03)}
.fcard:hover .go{transform:translateX(5px) rotate(-45deg)}
.fcard:active .fcard__img{transform:scale(.97)}

/* ---------- promo (compact) ---------- */
.promo-wrap{padding:calc(70*var(--s)) calc(18*var(--s)) 0}
.promo{position:relative;overflow:hidden;border-radius:calc(60*var(--s)) calc(60*var(--s)) calc(36*var(--s)) calc(60*var(--s));background:var(--red-dark);display:flex;flex-direction:column}
.promo__bg{position:relative;width:100%;height:calc(250*var(--s));object-fit:cover;object-position:35% 50%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.promo:hover .promo__bg{transform:scale(1.05)}
.promo__panel{display:none}
.promo__copy{position:relative;z-index:2;background:var(--red);padding:calc(32*var(--s)) calc(26*var(--s)) calc(36*var(--s));display:flex;flex-direction:column;align-items:flex-start}
.h2p{display:block;font-size:calc(40*var(--s));line-height:1.1;letter-spacing:.01em;color:var(--white)}
.promo__bar{display:block;width:calc(52*var(--s));height:calc(3*var(--s));background:var(--yellow);margin:calc(18*var(--s)) 0}
.promo__p{font-size:calc(19*var(--s));line-height:1.32;letter-spacing:-.02em;color:var(--white)}
.promo__copy .btn{margin-top:calc(26*var(--s))}

/* ---------- people (compact: swipe row) ---------- */
.people{padding-top:calc(64*var(--s));padding-inline:0}
.people .h2{padding-inline:calc(22*var(--s))}
.pgrid{margin-top:calc(24*var(--s));display:flex;gap:calc(16*var(--s));overflow-x:auto;scroll-snap-type:x mandatory;padding:0 calc(22*var(--s)) calc(10*var(--s));-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pgrid::-webkit-scrollbar{display:none}
.pcard{position:relative;flex:0 0 min(78%,calc(300*var(--s)));scroll-snap-align:center;padding-bottom:calc(10*var(--s))}
.pcard__photo{aspect-ratio:511/589;border-radius:calc(44*var(--s)) calc(88*var(--s)) calc(22*var(--s)) calc(44*var(--s));overflow:hidden;transition:transform .5s var(--ease-pop)}
.pcard__photo img{width:100%;height:100%;object-fit:cover}
.pcard__panel{position:relative;z-index:1;width:78%;margin:-17% 0 0 11%;padding:calc(20*var(--s)) calc(22*var(--s)) calc(22*var(--s));
  border-radius:calc(20*var(--s)) calc(70*var(--s)) calc(14*var(--s)) calc(48*var(--s));display:flex;flex-direction:column;align-items:flex-start;background:var(--pink);transition:transform .5s var(--ease-pop)}
.pcard--pink .pcard__panel{background:var(--pink)}.pcard--pink .btn{color:var(--pink)}
.pcard--blue .pcard__panel{background:var(--blue)}.pcard--blue .btn{color:var(--blue)}
.pcard--green .pcard__panel{background:var(--green)}.pcard--green .btn{color:var(--green)}
.pcard__title{display:block;font-size:calc(25*var(--s));line-height:1.25;letter-spacing:.03em;color:var(--white)}
.pcard .btn{position:relative;z-index:3;margin-top:calc(14*var(--s))}
.pcard:hover .pcard__photo{transform:scale(1.025) rotate(-1deg)}
.pcard:hover .pcard__panel{transform:translateY(calc(-8*var(--s)))}
.pcard .card-hit{border-radius:calc(44*var(--s))}

/* ---------- banner / footer (compact) ---------- */
.banner{position:relative;margin-top:calc(130*var(--s))}
.banner__red{position:relative;overflow:hidden;background:var(--red);padding:calc(110*var(--s)) calc(24*var(--s)) calc(46*var(--s));text-align:center}
.banner .blob{--u:calc(var(--vw) / 1100)}
.banner__copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
.h2b{display:block;font-size:calc(31*var(--s));line-height:1.1;letter-spacing:.01em;color:var(--white)}
.banner__sub{margin-top:calc(14*var(--s));font-size:calc(22*var(--s));line-height:1.2;letter-spacing:-.02em;color:var(--white)}
.banner__lolli{position:absolute;z-index:3;left:50%;top:calc(-78*var(--s));width:calc(240*var(--s));height:auto;margin-left:calc(-120*var(--s));transition:transform .5s var(--ease-pop);transform-origin:50% 40%}
.banner__lolli.reveal.in:hover{transform:rotate(-6deg) scale(1.05)}
.banner__strip{background:var(--yellow);padding:calc(22*var(--s)) 16px;text-align:center}
.credit{display:inline-block;font-size:14px;line-height:1;letter-spacing:.01em;color:var(--red-dark);padding:8px 10px;border-radius:999px;opacity:.85;transition:opacity .2s,transform .3s var(--ease-pop),background .25s}
.credit:hover{opacity:1;background:var(--white);transform:translateY(-2px) rotate(-1.5deg)}
.credit:active{transform:scale(.96)}

/* ---------- reveal ---------- */
.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .reveal:not(.in){opacity:0;transform:translateY(34px)}
.js .promo.reveal:not(.in){transform:translateY(50px) scale(.97)}
.js .banner__lolli.reveal:not(.in){transform:rotate(6deg) scale(.78);transform-origin:50% 30%}

/* ---------- hero entrance ---------- */
.js .hero__art{opacity:0}
.js .is-ready .hero__art{animation:float-in 1.3s cubic-bezier(.2,.9,.25,1) .15s both}
.js .hero__title .t,.js .hero__lead,.js .hero__copy .btn,.js .scroll-btn{opacity:0}
.js .is-ready .hero__title .t{animation:rise .9s cubic-bezier(.2,.9,.25,1) both}
.js .is-ready .hero__title .t:nth-child(1){animation-delay:.1s}
.js .is-ready .hero__title .t:nth-child(2){animation-delay:.28s}
.js .is-ready .hero__lead{animation:rise .9s cubic-bezier(.2,.9,.25,1) .45s both}
.js .is-ready .hero__copy .btn{animation:pop-in .9s var(--ease-pop) .6s both}
.js .is-ready .scroll-btn{animation:pop-in .8s var(--ease-pop) .85s both,bob 2.4s ease-in-out 1.8s infinite}
.js .is-ready .blob{animation:drift 9s ease-in-out infinite alternate}
.js .is-ready .blob--h2,.js .is-ready .blob--f2{animation-duration:12s;animation-direction:alternate-reverse}
@keyframes float-in{0%{opacity:0;transform:translate(8%,12%) rotate(4deg) scale(.94)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes pop-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes drift{from{translate:0 0}to{translate:calc(10*var(--u)) calc(14*var(--u))}}

/* ---------- modal ---------- */
.modal{border:0;padding:0;background:transparent;color:var(--ink);max-width:none;max-height:none;width:min(94vw,980px);margin:auto;overflow:visible}
.modal::backdrop{background:rgba(43,30,3,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.modal[open]{animation:modal-in .5s var(--ease-pop) both}
.modal[open]::backdrop{animation:fade .35s ease both}
@keyframes modal-in{from{opacity:0;transform:translateY(40px) scale(.9) rotate(-2deg)}to{opacity:1;transform:none}}
.modal__card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);background:var(--white);border-radius:36px 96px 30px 60px;overflow:hidden;max-height:92vh;overflow-y:auto}
.modal__media{background:var(--yellow);display:flex;align-items:flex-end;justify-content:center;min-height:0;overflow:hidden}
.modal__media img{width:auto;max-width:100%;height:min(46vh,420px);object-fit:contain;margin:0 auto}
.modal__body{padding:26px 26px 32px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.modal__eyebrow{font-size:16px;letter-spacing:-.01em;color:var(--ink);opacity:.7}
.modal__title{font-size:clamp(30px,6vw,52px);line-height:1.1;letter-spacing:.02em;color:var(--red)}
.stars--modal{--star:26px;margin-top:2px}
.modal__price{font-size:32px;letter-spacing:.03em;color:#000}
.modal__cta{margin-top:10px;height:56px;padding:0 28px;gap:22px}
.modal__cta .btn__t{font-size:20px}
.modal__cta .btn__arr{width:28px;height:12px}
.modal__cta .btn__arr img{width:28.2px;top:-.5px}
.modal__close{position:absolute;top:24px;right:30px;z-index:5;width:46px;height:46px;border-radius:50%;background:var(--red);transition:transform .3s var(--ease-pop),background .25s}
.modal__close span{position:absolute;left:13px;top:22px;width:20px;height:2.5px;background:var(--white);border-radius:2px}
.modal__close span:first-child{transform:rotate(45deg)}.modal__close span:last-child{transform:rotate(-45deg)}
.modal__close:hover{transform:rotate(90deg) scale(1.08);background:var(--ink)}
.modal__close:active{transform:scale(.92)}
.modal[data-kind="person"] .modal__media{background:var(--accent,var(--pink))}
.modal[data-kind="person"] .modal__media img{height:min(56vh,520px);width:100%;object-fit:cover}
.modal[data-kind="person"] .modal__title{color:var(--accent,var(--pink))}
.modal[data-kind="person"] .modal__cta{color:var(--accent,var(--pink))}

/* ---------- tablet 768-1023 ---------- */
@media (min-width:768px) and (max-width:1023px){
  .site-header{height:calc(60*var(--s))}
  .nav{display:flex;gap:4px}
  .burger{display:none}
  .nav__link{font-size:calc(14*var(--s))}
  .brand{font-size:calc(22*var(--s))}
  .menu{display:none}
  .hero__clip{padding:calc(110*var(--s)) calc(40*var(--s)) 0;min-height:0}
  .hero__art--fg{width:calc(100% + 80*var(--s));margin:calc(-10*var(--s)) calc(-40*var(--s)) calc(46*var(--s))}
  .h1a{font-size:calc(52*var(--s))}.h1b{font-size:calc(43*var(--s))}
  .hero__lead{font-size:calc(22*var(--s));max-width:calc(420*var(--s))}
  .flavours,.people{padding-inline:calc(40*var(--s))}
  .fgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(28*var(--s)) calc(14*var(--s))}
  .fname,.fprice{font-size:calc(15*var(--s))}
  .go{width:calc(22*var(--s));height:calc(22*var(--s));margin-left:calc(6*var(--s));vertical-align:calc(-6*var(--s))}
  .stars{--star:calc(14*var(--s))}
  .h2{font-size:calc(40*var(--s))}
  .promo-wrap{padding-inline:calc(40*var(--s))}
  .promo__bg{height:calc(330*var(--s))}
  .promo__copy{padding:calc(38*var(--s)) calc(40*var(--s)) calc(44*var(--s))}
  .people{padding-inline:calc(40*var(--s))}
  .people .h2{padding-inline:0}
  .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(18*var(--s));overflow:visible;padding:0}
  .pcard{flex:none}
  .pcard__title{font-size:calc(16*var(--s))}
  .pcard__panel{width:88%;margin-left:6%;padding:calc(14*var(--s)) calc(14*var(--s)) calc(16*var(--s))}
  .pcard .btn{height:38px;padding:0 12px;gap:8px}
  .pcard .btn .btn__t{font-size:14px}
  .pcard .btn .btn__arr{width:20px}
  .pcard .btn .btn__arr img{width:21px}
  .banner__red{padding:calc(120*var(--s)) calc(40*var(--s)) calc(56*var(--s))}
  .banner__lolli{width:calc(300*var(--s));margin-left:calc(-150*var(--s));top:calc(-90*var(--s))}
  .h2b{font-size:calc(36*var(--s))}
  .banner__sub{font-size:calc(22*var(--s))}
}

/* ---------- desktop >= 1024: pixel-matched to the 1920 Figma frame ---------- */
@media (min-width:1024px){
  html{scroll-padding-top:calc(60*var(--u))}
  body{font-size:calc(30*var(--u))}
  .page{max-width:1920px;margin:0 auto;position:relative}
  .menu,.burger{display:none}
  .nav{display:flex;gap:calc(14*var(--u))}

  /* cap-height text trim, so type positions match Figma's text boxes exactly */
  .t{font-size:calc(var(--fs)*var(--u));line-height:calc(var(--lh)*var(--u));letter-spacing:var(--ls,0);
     margin-top:calc(var(--u)*(var(--fs)*(var(--c) - var(--hd)) - var(--lh)/2 + var(--gap,0)));
     margin-bottom:calc(var(--u)*(var(--fs)*var(--hd) - var(--lh)/2))}

  .site-header{height:calc(100*var(--u))}
  .site-header.is-scrolled{height:calc(76*var(--u))}
  .site-header__in{padding:0 calc(150*var(--u))}
  .brand{font-size:calc(38*var(--u))}
  .nav__link{font-size:calc(23*var(--u))}

  .blob,.hero .blob,.banner .blob{--u:calc(min(var(--vw),1920px) / 1920)}

  /* hero */
  .hero{height:calc(878*var(--u));margin-bottom:0}
  .hero__clip{position:absolute;inset:0;display:block;min-height:0;padding:0;border-radius:0 0 calc(100*var(--u)) calc(100*var(--u))}
  .hero .blob--h4,.hero .blob--h5,.hero .blob--h6,.hero .blob--h7{display:flex}
  .hero__art,.hero__art--bg{display:block;position:absolute;left:calc(632*var(--u));top:0;width:calc(1288*var(--u));height:calc(878*var(--u));margin:0;max-width:none;aspect-ratio:auto;object-fit:fill}
  .hero__art--bg{z-index:1}
  .hero__art--fg{z-index:3}
  .blob{z-index:0}
  .blob--h6,.blob--h7{z-index:2}
  .hero__copy{position:absolute;left:calc(150*var(--u));top:calc(225*var(--u));display:flex}
  .hero__title{display:flex;flex-direction:column}
  .h1a{--fs:90;--lh:87;--ls:.03em}
  .h1b{--fs:80;--lh:87;--ls:.03em;--gap:15}
  .hero__lead{--fs:30;--lh:35;--ls:-.02em;--gap:36.36;width:calc(581*var(--u));max-width:none;margin-left:calc(3*var(--u))}
  .btn--lg{width:calc(286*var(--u));height:calc(80*var(--u));padding:0 calc(50*var(--u));gap:calc(30*var(--u));margin-top:calc(39.76*var(--u))!important;font-size:calc(26*var(--u))}
  .btn--lg .btn__t{--fs:26;--lh:35;--ls:-.02em;width:calc(122*var(--u))}
  .btn--lg .btn__arr{width:calc(34*var(--u));height:calc(12*var(--u))}
  .btn--lg .btn__arr img{width:calc(35.2071*var(--u));height:calc(13*var(--u));left:calc(-.7*var(--u));top:calc(-.5*var(--u))}
  .btn--yellow.btn--lg .btn__arr img{width:calc(36.4142*var(--u));height:calc(14*var(--u));left:calc(-1.4*var(--u));top:calc(-1*var(--u))}
  .btn--yellow.btn--lg .btn__t{width:calc(123*var(--u))}
  .btn--yellow.btn--lg .btn__t{margin-left:0}
  .hero__tab{--u:calc(min(var(--vw),1920px) / 1920);left:calc(689*var(--u));margin-left:0;top:calc(778*var(--u));width:calc(543*var(--u));height:calc(200*var(--u))}
  .scroll-btn{--u:calc(min(var(--vw),1920px) / 1920);left:calc(899*var(--u));margin-left:0;top:calc(817*var(--u));width:calc(122*var(--u));height:calc(122*var(--u))}
  .scroll-btn img{width:calc(38.4352*var(--u));height:calc(36*var(--u))}

  /* section titles */
  .h2{--fs:60;--lh:87;--ls:.01em;font-size:calc(60*var(--u))}
  .flavours{padding:0 calc(150*var(--u))}
  .flavours .h2{margin-top:calc(200*var(--u) + var(--u)*(var(--fs)*(var(--c) - var(--hd)) - var(--lh)/2))}
  .people{padding:0 calc(150*var(--u))}

  /* flavours */
  .fgrid{margin-top:calc(70*var(--u));grid-template-columns:repeat(4,minmax(0,1fr));gap:0 calc(120*var(--u))}
  .fcard__media{aspect-ratio:auto;height:calc(420*var(--u))}
  .fcard__img{inset:auto;left:var(--il,0);top:0;width:var(--iw);height:calc(420*var(--u));overflow:hidden}
  .fcard__media--1{--iw:calc(344*var(--u))}
  .fcard__media--2{--iw:calc(325*var(--u))}
  .fcard__media--3{--iw:calc(282*var(--u));--il:calc(13*var(--u))}
  .fcard__media--4{--iw:calc(295*var(--u))}
  .fcard__img img{object-fit:fill}
  .fcard__media--1 .fcard__img img{left:-.58%;top:-1.67%;width:100.9%;height:102.16%}
  .fcard__media--2 .fcard__img img{left:-.05%;top:-1.2%;width:100.09%;height:101.2%}
  .stars{--star:calc(27*var(--u));margin-top:calc(30*var(--u))}
  .fname{--fs:31;--lh:45;--ls:.03em;--gap:25;display:block;font-size:calc(31*var(--u))}
  .fprice{--fs:31;--lh:45;--ls:.03em;--gap:35.28}
  .go{width:calc(38*var(--u));height:calc(38*var(--u));margin-left:calc(18*var(--u));vertical-align:calc(-11.3*var(--u))}
  .card-hit{border-radius:calc(40*var(--u));inset:0 0 calc(-4*var(--u)) 0}
  .fcard:hover .fcard__img{transform:translateY(calc(-14*var(--u))) rotate(-2.5deg) scale(1.03)}

  /* promo */
  .promo-wrap{padding:calc(200.3*var(--u)) calc(150*var(--u)) 0}
  .promo{display:block;height:calc(910*var(--u));border-radius:calc(200*var(--u)) calc(200*var(--u)) calc(100*var(--u)) calc(200*var(--u))}
  .promo__bg{position:absolute;left:0;top:calc(-1*var(--u));width:100%;height:calc(912*var(--u));object-position:50% 50%}
  .promo__panel{display:block;position:absolute;left:calc(910*var(--u));top:calc(-62*var(--u));width:calc(758.5*var(--u));height:calc(994*var(--u));max-width:none}
  .promo__copy{position:absolute;left:calc(1063*var(--u));top:calc(139*var(--u));background:none;padding:0}
  .h2p{--fs:75;--lh:77;--ls:.01em}
  .promo__bar{width:calc(52*var(--u));height:calc(3*var(--u));margin:calc(50*var(--u)) 0 0}
  .promo__p{--fs:33;--lh:39;--ls:-.02em;--gap:50;margin-top:calc(var(--u)*(var(--fs)*(var(--c) - var(--hd)) - var(--lh)/2 + var(--gap)))}
  .promo__p span{display:block;white-space:nowrap}
  .promo__copy .btn{margin-top:calc(59.6*var(--u))!important}

  /* people */
  .people .h2{padding-inline:0;margin-top:calc(120*var(--u) + var(--u)*(var(--fs)*(var(--c) - var(--hd)) - var(--lh)/2))}
  .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(44*var(--u));overflow:visible;padding:0;margin-top:calc(70*var(--u));scroll-snap-type:none}
  .pcard{flex:none;height:calc(710*var(--u));padding:0}
  .pcard__photo{height:calc(589*var(--u));aspect-ratio:auto;border-radius:calc(100*var(--u)) calc(200*var(--u)) calc(50*var(--u)) calc(100*var(--u))}
  .pcard__panel{position:absolute;left:calc(57*var(--u));top:calc(468*var(--u));width:calc(397*var(--u));height:calc(242*var(--u));margin:0;padding:calc(40*var(--u)) 0 0 calc(60*var(--u));border-radius:calc(40*var(--u)) calc(150*var(--u)) calc(30*var(--u)) calc(100*var(--u))}
  .pcard__title{--fs:36;--lh:45;--ls:.03em;font-size:calc(36*var(--u))}
  .btn--sm{width:calc(224*var(--u));height:calc(63*var(--u));padding:0 calc(40*var(--u));gap:calc(23*var(--u));margin-top:calc(27.6*var(--u))!important}
  .btn--sm .btn__t{--fs:20;--lh:35;--ls:-.02em;width:calc(94*var(--u))}
  .btn--sm .btn__arr{width:calc(27*var(--u));height:calc(12*var(--u))}
  .btn--sm .btn__arr img{width:calc(28.2071*var(--u));height:calc(13*var(--u));left:calc(-.7*var(--u));top:calc(-.5*var(--u))}
  .pcard .card-hit{border-radius:calc(100*var(--u)) calc(200*var(--u)) calc(50*var(--u)) calc(100*var(--u))}
  .pcard:hover .pcard__panel{transform:translateY(calc(-10*var(--u)))}

  /* banner */
  .banner{margin-top:calc(170*var(--u))}
  .banner__red{height:calc(351*var(--u));padding:0;text-align:left}
  .banner__copy{position:absolute;left:calc(773*var(--u));top:calc(80*var(--u));display:flex;align-items:flex-start}
  .h2b{--fs:75;--lh:77;--ls:.01em}
  .banner__sub{--fs:43;--lh:35;--ls:-.02em;--gap:29;width:calc(581*var(--u))}
  .banner__lolli{left:calc(77*var(--u));top:calc(-50*var(--u));width:calc(651*var(--u));height:calc(434*var(--u));margin:0;object-fit:contain}
  .banner__strip{height:calc(71*var(--u));padding:0;display:flex;align-items:center;justify-content:center}
  .credit{font-size:max(14px,calc(15*var(--u)))}
  .modal__card{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-radius:48px 140px 40px 90px}
  .modal__media img{height:min(64vh,560px)}
  .modal__close{top:44px;right:56px}
  .modal__body{padding:56px 48px 48px;justify-content:center;gap:14px}
  .modal[data-kind="person"] .modal__media img{height:100%;min-height:min(64vh,560px)}
  .modal[data-kind="person"] .modal__media{align-items:stretch}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .reveal:not(.in){transform:none}
  .js .hero__art,.js .hero__title .t,.js .hero__lead,.js .hero__copy .btn,.js .scroll-btn,.js .hero__tab{opacity:1}
}
/* optical kerning of the "ff" pair, to match the Figma text render */
.kern-ff{letter-spacing:-.1em}