/* Daydream home — scoped under .dd */
html:has(.dd){scroll-behavior:smooth;overflow-x:clip}
body:has(.dd){margin:0;background:#0a0a12}
.dd{
  --u:calc(min(100vw,1728px)/1728);
  --gx:max(20px,calc(96*var(--u)));
  --ink:#0e0e10;--night:#0a0a12;--muted:#8c8c8c;--body:#4a4a4a;--lav:#8f8ca3;--mist:#c4c2d0;
  --pink:#ff2e93;--cyan:#3dcbff;--yellow:#ffe500;--purple:#7b4dff;--lime:#c9ec4a;
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.36,.5,1);
  --fd:"Unbounded",system-ui,sans-serif;--fb:"DM Sans",system-ui,sans-serif;
  margin:0!important;max-width:none!important;
  font-family:var(--fb);font-variation-settings:"opsz" 14;color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
.dd *,.dd *::before,.dd *::after{box-sizing:border-box}
.dd :where(h1,h2,h3,h4,p,ul,ol,li,figure){margin:0;padding:0}
.dd :where(ul,ol){list-style:none}
.dd :where(a){color:inherit;text-decoration:none}
.dd :where(img){display:block;max-width:none}
.dd :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.dd :focus{outline:none}
.dd :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
.dd-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.dd-eyebrow{font:500 12px/normal var(--fd);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:pre}
.dd-display{font-family:var(--fd);font-weight:900;letter-spacing:-.03em;line-height:.96}
.dd-lede{font-size:max(16px,calc(18*var(--u)));line-height:1.6;color:var(--body)}

/* buttons */
.dd-btn{--bg:#fff;--fg:var(--ink);position:relative;display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border-radius:999px;font:700 14px/normal var(--fb);font-variation-settings:"opsz" 14;white-space:nowrap;
  background:var(--bg);color:var(--fg);overflow:hidden;isolation:isolate;
  transform:translate3d(var(--bx,0),var(--by,0),0);transition:transform .5s var(--ease),color .35s var(--ease),border-color .35s}
.dd-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--fill,var(--pink));
  transform:translateY(101%);transition:transform .5s var(--ease)}
.dd-btn:hover::before,.dd-btn:focus-visible::before{transform:none}
.dd-btn--solid:hover,.dd-btn--solid:focus-visible{color:#fff}
.dd-btn__ar{display:inline-block;transition:transform .45s var(--ease)}
.dd-btn:hover .dd-btn__ar{transform:translateX(4px)}
.dd-btn--ghost{--bg:transparent;--fg:#fff;--fill:#fff;border:1.5px solid rgba(255,255,255,.5)}
.dd-btn--ghost:hover,.dd-btn--ghost:focus-visible{color:var(--ink);border-color:#fff}
.dd-btn--lg{padding:19px 30px;font-size:17px}

/* ---------------- NAV ---------------- */
.dd-nav{position:fixed;z-index:60;left:0;right:0;top:var(--wp-admin--admin-bar--height,0px);
  display:flex;align-items:center;justify-content:space-between;
  padding:max(16px,calc(36*var(--u))) var(--gx);transition:padding .5s var(--ease),transform .6s var(--ease)}
.dd-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(10,10,18,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transition:opacity .5s var(--ease)}
.dd-nav.is-scrolled{padding-block:14px}
.dd-nav.is-scrolled::before{opacity:1}
.dd-nav__logo{display:block;width:150px;height:46px;flex:none;transition:transform .5s var(--spring)}
.dd-nav__logo img{width:100%;height:100%;object-fit:contain}
.dd-nav__logo:hover{transform:rotate(-4deg) scale(1.06)}
.dd-nav__right{display:flex;align-items:center;gap:40px}
.dd-nav__links{display:flex;gap:44px;font:500 15px/normal var(--fb);color:#fff}
.dd-nav__links > a,.dd-dd__top{position:relative;padding:4px 0}
.dd-nav__links > a::after,.dd-dd__top::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--pink),var(--yellow),var(--cyan));transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.dd-nav__links > a:hover::after,.dd-dd__top:hover::after,.dd-dd.is-open .dd-dd__top::after{transform:scaleX(1);transform-origin:left}
.dd-nav__ctas{display:flex;gap:12px}
.dd-burger{display:none;width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);position:relative}
.dd-burger span{position:absolute;left:14px;right:14px;height:2px;background:#fff;border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.dd-burger span:nth-child(1){top:18px}.dd-burger span:nth-child(2){top:27px}
.is-menu .dd-burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.is-menu .dd-burger span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

.dd-menu{position:fixed;inset:0;z-index:55;background:var(--night);color:#fff;display:flex;flex-direction:column;justify-content:center;
  padding:120px var(--gx) 40px;gap:40px;clip-path:circle(0 at calc(100% - 44px) 44px);visibility:hidden;
  transition:clip-path .7s var(--ease),visibility 0s .7s}
.dd-menu.is-open{clip-path:circle(150% at calc(100% - 44px) 44px);visibility:visible;transition:clip-path .8s var(--ease),visibility 0s}
.dd-menu__links{display:flex;flex-direction:column;gap:8px}
.dd-menu__links a{font:900 clamp(34px,9vw,56px)/1.1 var(--fd);letter-spacing:-.03em;display:block;opacity:0;transform:translateY(30px);
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.dd-menu.is-open .dd-menu__links a{opacity:1;transform:none;transition-delay:calc(.15s + var(--i)*.06s)}
.dd-menu__ctas{display:flex;flex-wrap:wrap;gap:12px}
.dd-menu::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 40% at 90% 100%,rgba(123,77,255,.5),transparent),radial-gradient(60% 40% at 0% 0%,rgba(255,46,147,.4),transparent)}

/* ---------------- HERO ---------------- */
.dd-hero{position:relative;height:calc(1160*var(--u));min-height:600px;overflow:clip;background:var(--night);color:#fff;isolation:isolate}
.dd-hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.dd-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.dd-blob{position:absolute;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);
  left:calc(var(--x) - var(--rx));top:calc(var(--y) - var(--ry));width:calc(var(--rx)*2);height:calc(var(--ry)*2);
  animation:dd-drift var(--t,22s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);will-change:transform}
/* hero backgrounds: the same colour blobs, but on a slow looping orbit so the gradient visibly flows */
.dd-hero__bg .dd-blob{animation:dd-flow calc(var(--t,22s)*.72) ease-in-out infinite;animation-delay:calc(var(--dl,0s)*1.5)}
@keyframes dd-flow{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  25%{transform:translate3d(calc(var(--dx,4%)*4.2),calc(var(--dy,-3%)*-3.2),0) scale(1.2) rotate(10deg)}
  50%{transform:translate3d(calc(var(--dx,4%)*-3),calc(var(--dy,-3%)*4.2),0) scale(.9) rotate(-8deg)}
  75%{transform:translate3d(calc(var(--dx,4%)*-4.2),calc(var(--dy,-3%)*-2.2),0) scale(1.12) rotate(5deg)}}
@keyframes dd-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(var(--dx,4%),var(--dy,-3%),0) scale(1.08)}
  100%{transform:translate3d(calc(var(--dx,4%)*-.6),calc(var(--dy,-3%)*-.8),0) scale(.96)}}
.dd-hero__vignette{position:absolute;inset:0;background:radial-gradient(100% 100% at 50% 50%,rgba(10,10,18,0) 55%,rgba(10,10,18,.85) 100%)}

.dd-stage{position:absolute;left:50%;top:0;width:calc(1728*var(--u));height:calc(1160*var(--u));transform:translateX(-50%);pointer-events:none}
.dd-at{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h,var(--w))*var(--u))}
.dd-ring{translate:-50% -50%}
.dd-ring img{width:100%;height:100%}
.dd-ring--outer{animation:dd-breathe 9s ease-in-out infinite}
.dd-ring--inner img{animation:dd-spin 140s linear infinite}
@keyframes dd-breathe{50%{transform:scale(1.025);opacity:.7}}
@keyframes dd-spin{to{transform:rotate(360deg)}}

.dd-hero__copy{position:absolute;left:0;right:0;top:calc(150*var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(20*var(--u));text-align:center}
.dd-hero .dd-eyebrow{color:rgba(255,255,255,.6)}
.dd-hero__h1{font:900 calc(112*var(--u))/1.1 var(--fd);letter-spacing:-.04em;white-space:nowrap}

/* packs */
.dd-pack{--d:14;--ds:36;translate:-50% -50%;z-index:2;
  transform:translate3d(calc(var(--mx,0)*var(--d)*1px),calc(var(--my,0)*var(--d)*1px - var(--sy,0)*var(--ds)*1px),0);will-change:transform}
.dd-pack__in{width:100%;height:100%;animation:dd-fan 1.5s var(--spring) both;animation-delay:var(--dl,.2s)}
.dd-pack__float{width:100%;height:100%;animation:dd-bob var(--bt,6s) ease-in-out infinite alternate;animation-delay:var(--bd,0s)}
.dd-pack img{width:100%;height:100%;object-fit:cover;rotate:var(--r,0deg);filter:drop-shadow(0 calc(30*var(--u)) calc(30*var(--u)) rgba(0,0,0,.35))}
@keyframes dd-fan{
  from{opacity:0;transform:translate(calc((864 - var(--x))*var(--u)),calc((700 - var(--y))*var(--u))) rotate(calc(var(--r,0deg)*-1)) scale(.5)}
  35%{opacity:1}
  to{opacity:1;transform:none}}
@keyframes dd-bob{from{transform:translateY(calc(-10*var(--u))) rotate(-.8deg)}to{transform:translateY(calc(12*var(--u))) rotate(.8deg)}}
.dd-pack--baja{--d:30;--ds:70;z-index:3}
.dd-pack--cherry,.dd-pack--mango{--d:20;--ds:50;--dl:.38s}
.dd-pack--lemon,.dd-pack--strawkiwi{--d:12;--ds:34;--dl:.55s}
.dd-pack--mango{--bd:-2s;--bt:7s}.dd-pack--lemon{--bd:-3.5s;--bt:6.5s}.dd-pack--strawkiwi{--bd:-1.2s;--bt:7.5s}.dd-pack--cherry{--bd:-4s}

.dd-star{translate:-50% -50%;z-index:4;transform:translate3d(calc(var(--mx,0)*-40px),calc(var(--my,0)*-40px),0)}
.dd-star img{width:100%;height:100%;rotate:var(--r);animation:dd-pop .9s var(--spring) both,dd-twinkle 3.2s ease-in-out infinite;animation-delay:calc(1s + var(--dl,0s)),calc(2s + var(--dl,0s))}
@keyframes dd-pop{from{transform:scale(0) rotate(-120deg);opacity:0}}
@keyframes dd-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(18deg)}}

.dd-hero__foot{position:absolute;left:var(--gx);right:var(--gx);top:calc(1040*var(--u));display:flex;justify-content:space-between;align-items:flex-start;z-index:5}
.dd-hero__foot p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.8);margin-top:0}
.dd-hero__ctas{display:flex;gap:12px;margin-top:calc(10*var(--u))}

/* hero load choreography */
.dd-hero .dd-eyebrow{animation:dd-fadeup 1s var(--ease) .1s both}
.dd-hero__h1 .dd-wi{animation:dd-rise 1.1s var(--ease) both;animation-delay:calc(.15s + var(--i)*.09s)}
.dd-hero__foot > *{animation:dd-fadeup 1s var(--ease) both;animation-delay:1s}
.dd-hero__foot > *+*{animation-delay:1.1s}
.dd-nav{animation:dd-fadedown 1s var(--ease) .05s both}
@keyframes dd-fadeup{from{opacity:0;transform:translateY(24px)}}
@keyframes dd-fadedown{from{opacity:0;translate:0 -20px}}
@keyframes dd-rise{from{transform:translateY(105%) rotate(4deg)}}

/* word split */
.dd-js [data-split]:not(.is-split){opacity:0}
.dd-w{display:inline-block;overflow:clip;vertical-align:top;padding:.02em .12em .16em;margin:-.02em -.12em -.16em}
.dd-wi{display:inline-block;transform-origin:0 100%}

/* ---------------- LINEUP ---------------- */
.dd-lineup{background:#fff;padding-block:max(96px,calc(200*var(--u)));display:flex;flex-direction:column;gap:max(80px,calc(140*var(--u)));overflow:clip}
.dd-lineup__head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-inline:var(--gx)}
.dd-lineup__title{display:flex;flex-direction:column;gap:28px}
.dd-h2{font:900 max(36px,calc(72*var(--u)))/.96 var(--fd);letter-spacing:-.03em;color:var(--ink)}
.dd-lineup__head .dd-lede{width:420px;max-width:100%}
.dd-lineup__title{flex:none}
.dd-lineup__title .dd-h2{white-space:nowrap}

.dd-cat{display:flex;flex-direction:column;gap:48px}
.dd-cat__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-inline:var(--gx)}
.dd-cat__intro{display:flex;flex-direction:column;gap:16px}
.dd-cat__tag{display:flex;align-items:center;gap:10px}
.dd-cat__tag img{width:10px;height:10px}
.dd-cat__name{display:flex;gap:16px;align-items:flex-start;white-space:nowrap}
.dd-cat__name h3{font:900 max(34px,calc(56*var(--u)))/normal var(--fd);letter-spacing:-.02em;color:var(--ink)}
.dd-cat__name span{font:500 18px/normal var(--fd);color:var(--muted);padding-top:.2em}
.dd-cat__intro .dd-lede{width:520px;max-width:100%}
.dd-arrows{display:flex;gap:12px;flex:none}
.dd-arrow{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font:700 22px/1 var(--fb);
  border:1.5px solid var(--ink);background:var(--ink);color:#fff;transition:transform .4s var(--spring),background .3s,color .3s,border-color .3s}
.dd-arrow:hover:not(:disabled){transform:scale(1.08)}
.dd-arrow:active:not(:disabled){transform:scale(.94)}
.dd-arrow:disabled{background:transparent;border-color:rgba(14,14,16,.2);color:rgba(14,14,16,.3);cursor:default}

.dd-car{position:relative}
.dd-car__vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gx);scrollbar-width:none;
  overscroll-behavior-x:contain;cursor:grab;padding-block:10px 20px;margin-block:-10px 0}
.dd-car__vp::-webkit-scrollbar{display:none}
.dd-car__vp.is-drag{cursor:grabbing;scroll-snap-type:none}
.dd-car__vp.is-drag *{pointer-events:none}
.dd-car__track{display:flex;gap:24px;padding-inline:var(--gx);width:max-content}
.dd-car__item{flex:none;scroll-snap-align:start;width:min(600px,82vw)}

.dd-card{--k:calc(100cqw/600);position:relative;container-type:inline-size;aspect-ratio:600/780;border-radius:clamp(24px,6vw,36px);overflow:hidden;color:#fff;
  isolation:isolate;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease),box-shadow .6s var(--ease);
  background:radial-gradient(60% 45% at 90% 95%,var(--glow),transparent),radial-gradient(55% 40% at 30% 20%,rgba(255,255,255,.35),transparent),linear-gradient(127.57deg,var(--g1),var(--g2))}
.dd-card.is-tilt,.dd-js .dd-car.is-in .dd-car__item .dd-card.is-tilt{transition:transform .15s linear,box-shadow .6s var(--ease)}
.dd-card:hover{box-shadow:0 40px 80px -30px var(--g2)}
.dd-card::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(40% 30% at var(--gx2,50%) var(--gy2,30%),rgba(255,255,255,.28),transparent 70%);mix-blend-mode:soft-light}
.dd-card:hover::after{opacity:1}
.dd-card--baja{--g1:#37d8cb;--g2:#2b2fa8;--glow:rgba(123,77,255,.7)}
.dd-card--cherry{--g1:#ff5a6a;--g2:#6a1b9a;--glow:rgba(255,46,147,.7)}
.dd-card--mango{--g1:#ffc21f;--g2:#ff2e6e;--glow:rgba(255,122,31,.7)}
.dd-card--lemon{--g1:#e4f53c;--g2:#12a36b;--glow:rgba(255,229,0,.7)}
.dd-card--strawkiwi{--g1:#ff7a95;--g2:#5b3fd9;--glow:rgba(139,212,72,.7)}
.dd-card--soon{--g2:#7b4dff;background:radial-gradient(60% 50% at 95% 90%,rgba(123,77,255,.6),transparent),radial-gradient(60% 50% at 20% 15%,rgba(201,236,74,.45),transparent),var(--night)}
.dd-card__ring{position:absolute;left:calc(50*var(--k));top:calc(90*var(--k));width:calc(500*var(--k));height:calc(500*var(--k));transition:transform 1.2s var(--ease)}
.dd-card__ring img{width:100%;height:100%}
.dd-card:hover .dd-card__ring{transform:scale(1.08)}
/* spinning category badges — centred where the Figma splatter dot (518,468) and orb (465,225) sat */
.dd-card__dot,.dd-card__orb{position:absolute;z-index:2;translate:-50% -50%;width:max(84px,calc(120*var(--k)));aspect-ratio:1}
.dd-card__dot{left:calc(518*var(--k));top:calc(468*var(--k));animation:dd-spin 16s linear infinite}
.dd-card__orb{left:calc(465*var(--k));top:calc(225*var(--k));animation:dd-spin 22s linear infinite reverse}
.dd-badge{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.dd-badge text{font:700 11px var(--fd);fill:#fff}
.dd-card__pack{position:absolute;z-index:1;left:calc(300*var(--k));top:calc(305*var(--k));width:calc(695.652*var(--k));height:calc(695.652*var(--k));
  translate:-50% -50%;transform:translate3d(calc(var(--px,0)*18*var(--k)),calc(var(--py,0)*18*var(--k)),0);transition:transform .6s var(--ease)}
.dd-card__pack img{width:100%;height:100%;object-fit:cover;rotate:var(--r);transition:rotate .8s var(--spring),scale .8s var(--spring);filter:drop-shadow(0 20px 30px rgba(0,0,0,.25))}
.dd-card:hover .dd-card__pack img{rotate:calc(var(--r)*-.5);scale:1.06}
.dd-card__cloud{position:absolute;z-index:1;left:calc(300*var(--k));top:calc(300*var(--k));width:calc(300*var(--k));height:calc(237*var(--k));translate:-50% -50%;
  animation:dd-cloudbob 5s ease-in-out infinite alternate}
.dd-card__cloud img{width:100%;height:100%;object-fit:contain;rotate:8deg;transition:rotate .6s var(--spring),scale .6s var(--spring)}
.dd-card:hover .dd-card__cloud img{rotate:-6deg;scale:1.1}
@keyframes dd-cloudbob{from{transform:translateY(calc(-10*var(--k)))}to{transform:translateY(calc(12*var(--k)))}}
.dd-card__top{position:absolute;z-index:3;left:0;right:0;top:0;padding:calc(32*var(--k)) calc(32*var(--k)) 0;display:flex;justify-content:space-between;align-items:center}
.dd-card__num{font:500 max(11px,calc(13*var(--k)))/normal var(--fd);letter-spacing:.14em;color:rgba(255,255,255,.8)}
.dd-pill{padding:max(6px,calc(8*var(--k))) max(10px,calc(14*var(--k)));border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.16);
  font:700 max(10px,calc(12*var(--k)))/normal var(--fb);letter-spacing:.08em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dd-card__info{position:absolute;z-index:3;left:0;right:0;top:calc(586*var(--k));padding:0 calc(32*var(--k)) calc(32*var(--k));display:flex;flex-direction:column;gap:calc(10*var(--k))}
.dd-card__info h4{font:900 calc(46*var(--k))/normal var(--fd);letter-spacing:-.02em;white-space:nowrap}
.dd-card__info p{font-size:max(14px,calc(17*var(--k)));color:rgba(255,255,255,.85);white-space:nowrap}
.dd-card__row{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid rgba(255,255,255,.25);padding-top:calc(14*var(--k))}
.dd-card__row > span:not(.dd-view){font:500 max(12px,calc(14*var(--k)))/normal var(--fb);color:rgba(255,255,255,.85);white-space:nowrap}
.dd-view{display:inline-flex;align-items:center;gap:10px;padding:6px 6px 6px 18px;border-radius:999px;background:#fff;color:var(--ink);font:700 14px/normal var(--fb);white-space:nowrap;
  transition:gap .45s var(--ease),padding .45s var(--ease)}
.dd-view i{font-style:normal;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:15px;transition:transform .5s var(--spring),background .3s}
.dd-view:hover,.dd-card:hover .dd-view{gap:16px;padding-left:22px}
.dd-view:hover i,.dd-card:hover .dd-view i{transform:rotate(-45deg);background:var(--g2,var(--pink))}
.dd-card__link{position:absolute;inset:0;z-index:4;border-radius:inherit}

.dd-prog{display:flex;align-items:center;gap:24px;padding-inline:var(--gx)}
.dd-prog__bar{position:relative;flex:1;height:3px;border-radius:2px;background:rgba(14,14,16,.1);overflow:hidden}
.dd-prog__on{position:absolute;left:0;top:0;bottom:0;width:var(--w,30%);border-radius:2px;background:var(--ink);transform:translateX(var(--o,0%));transition:transform .35s var(--ease),width .35s var(--ease)}
.dd-prog__n{font:500 13px/normal var(--fd);letter-spacing:.1em;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------------- HOW ---------------- */
.dd-how{position:relative;isolation:isolate;overflow:clip;background:var(--night);color:#fff;padding:max(96px,calc(200*var(--u))) var(--gx);display:flex;flex-direction:column;gap:max(64px,calc(100*var(--u)))}
.dd-how__bg,.dd-foot__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.dd-how .dd-eyebrow,.dd-foot .dd-eyebrow{color:var(--lav)}
.dd-how__title{display:flex;flex-direction:column;gap:28px}
.dd-how .dd-h2,.dd-foot .dd-h2{color:#fff}
.dd-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:max(40px,calc(96*var(--u)))}
.dd-rule{display:flex;flex-direction:column;gap:24px}
.dd-rule__ic{width:90px;height:84px}
.dd-rule__ic img{width:90px;height:84px}
.dd-rule:nth-child(1) .dd-rule__ic img{animation:dd-pulse 3s ease-in-out infinite;transform-origin:36px 36px}
.dd-rule:nth-child(2) .dd-rule__ic img{animation:dd-spin 14s linear infinite;transform-origin:40px 38px}
.dd-rule:nth-child(3) .dd-rule__ic img{animation:dd-sunrise 3.6s ease-in-out infinite;transform-origin:42px 42px}
@keyframes dd-pulse{50%{transform:scale(.82)}}
@keyframes dd-sunrise{0%,100%{transform:translateY(8px)}50%{transform:translateY(-6px)}}
.dd-rule:hover .dd-rule__ic img{animation-duration:1.2s}
.dd-rule__n{font:500 13px/normal var(--fd);letter-spacing:.1em;color:var(--lav)}
.dd-rule h3{font:900 max(30px,calc(40*var(--u)))/normal var(--fd);letter-spacing:-.02em}
.dd-rule p{font-size:max(16px,calc(18*var(--u)));line-height:1.6;color:var(--mist)}

/* ---------------- TESTED ---------------- */
.dd-tested{background:#fff;padding:max(96px,calc(200*var(--u))) var(--gx);display:flex;flex-direction:column;gap:max(48px,calc(80*var(--u)));overflow:clip}
.dd-tested__word{font:900 calc(240*var(--u))/.9 var(--fd);letter-spacing:-.06em;white-space:nowrap;color:transparent;
  background:url(/wp-content/uploads/2026/09/dd-tested-splatter-2048x1152.jpg) 0% 50%/150% auto;-webkit-background-clip:text;background-clip:text;
  animation:dd-pan 16s ease-in-out infinite alternate;padding-block:.05em;width:max-content}
@keyframes dd-pan{to{background-position:100% 40%}}
.dd-tested__row{display:flex;justify-content:space-between;align-items:flex-start;gap:48px}
.dd-tested__row .dd-lede{width:460px;max-width:100%;flex:none}
.dd-checks{width:calc(820*var(--u));min-width:0;flex:0 1 auto}
.dd-check{position:relative;display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid rgba(14,14,16,.12)}
.dd-check:first-child{border-top:1px solid rgba(14,14,16,.12)}
.dd-check::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--c),transparent);transform:scaleX(0);transform-origin:left}
.dd-check b{font:700 max(18px,calc(22*var(--u)))/normal var(--fd);letter-spacing:-.01em;color:var(--ink)}
.dd-check__st{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--body)}
.dd-check__st img{width:8px;height:8px}
.dd-check__st span{position:relative}

/* ---------------- FOOTER ---------------- */
.dd-foot{position:relative;isolation:isolate;overflow:clip;background:var(--night);color:#fff;padding:max(80px,calc(120*var(--u))) var(--gx) 64px;display:flex;flex-direction:column;gap:72px}
.dd-foot__cta{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-bottom:72px;border-bottom:1px solid rgba(255,255,255,.14)}
.dd-foot__cta > div:first-child{display:flex;flex-direction:column;gap:24px}
.dd-foot__side{display:flex;flex-direction:column;align-items:flex-end;gap:28px}
.dd-foot__side p{width:420px;max-width:100%;font-size:18px;line-height:1.6;color:var(--mist)}
.dd-foot__ctas{display:flex;gap:12px;flex-wrap:wrap}
.dd-foot__mid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.dd-foot__brand{display:flex;flex-direction:column;gap:28px}
.dd-foot__cloud{width:120px;height:95px;animation:dd-cloudfloat 4.5s ease-in-out infinite alternate;transform-origin:50% 80%}
.dd-foot__cloud img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--spring)}
.dd-foot__cloud:hover img{transform:rotate(-12deg) scale(1.12)}
@keyframes dd-cloudfloat{from{transform:translateY(-6px) rotate(-3deg)}to{transform:translateY(8px) rotate(3deg)}}
.dd-foot__tag{font:900 max(28px,calc(40*var(--u)))/normal var(--fd);letter-spacing:-.02em}
.dd-foot__cols{display:flex;gap:96px}
.dd-foot__col{display:flex;flex-direction:column;gap:14px;font:500 16px/normal var(--fb)}
.dd-foot__col .dd-eyebrow{margin-bottom:0}
.dd-foot__col a{position:relative;width:max-content;transition:color .3s,transform .4s var(--ease)}
.dd-foot__col a:hover{color:var(--yellow);transform:translateX(4px)}
.dd-foot__base{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.dd-foot__base img{width:150px;height:46px;object-fit:contain}
.dd-foot__base p{font-size:12px;color:var(--lav);white-space:pre-wrap;text-align:right}

/* ---------------- REVEALS (only when JS is running) ---------------- */
.dd-js .dd-rv{opacity:0;transform:translateY(48px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i,0)*.1s)}
.dd-js .dd-rv.is-in{opacity:1;transform:none}
.dd-js .dd-split .dd-wi{transform:translateY(105%) rotate(4deg);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i)*.07s)}
.dd-js .dd-split.is-in .dd-wi{transform:none}
.dd-js .dd-car__item .dd-card{opacity:0;translate:140px 0;scale:.94;transition:opacity .9s var(--ease) calc(var(--i)*.12s),translate 1.3s var(--ease) calc(var(--i)*.12s),scale 1.3s var(--ease) calc(var(--i)*.12s),transform .6s var(--ease),box-shadow .6s var(--ease)}
.dd-js .dd-car.is-in .dd-car__item .dd-card{opacity:1;translate:0 0;scale:1}
.dd-js .dd-tested__word{opacity:0;transform:translateY(.25em) skewX(-8deg);filter:blur(14px);transform-origin:0 100%;transition:opacity 1.2s var(--ease),transform 1.4s var(--ease),filter 1.2s var(--ease)}
.dd-js .dd-tested__word.is-in{opacity:1;transform:none;filter:none}
.dd-js .dd-check b,.dd-js .dd-check__st{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.dd-js .dd-check__st{transform:translateX(-12px)}
.dd-js .dd-checks.is-in .dd-check b{opacity:1;transform:none;transition-delay:calc(var(--i)*.16s)}
.dd-js .dd-checks.is-in .dd-check::after{animation:dd-scan 1s var(--ease) both;animation-delay:calc(var(--i)*.16s + .1s)}
.dd-js .dd-checks.is-in .dd-check__st{opacity:1;transform:none;transition-delay:calc(var(--i)*.16s + .7s)}
.dd-js .dd-checks.is-in .dd-check__st img{animation:dd-ping .7s var(--spring) both;animation-delay:calc(var(--i)*.16s + .7s)}
@keyframes dd-scan{0%{transform:scaleX(0);opacity:1}70%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes dd-ping{from{transform:scale(0)}60%{transform:scale(2)}to{transform:scale(1)}}
.dd-js .dd-rule{opacity:0;transform:translateY(60px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:calc(var(--i)*.14s)}
.dd-js .dd-rules.is-in .dd-rule{opacity:1;transform:none}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1100px){
  .dd-nav__links,.dd-nav__ctas{display:none}
  .dd-burger{display:block}
  .dd-nav__logo{width:120px;height:37px}
}
@media (max-width:900px){
  .dd{--hu:calc(100vw/1100)}
  .dd-hero{height:auto;min-height:0;display:flex;flex-direction:column;padding:calc(110px + var(--wp-admin--admin-bar--height,0px)) 0 48px}
  .dd-hero__copy{position:relative;top:auto;padding-inline:var(--gx);gap:16px}
  .dd-hero__h1{font-size:clamp(40px,12vw,84px);white-space:normal;line-height:1}
  .dd-stage{--u:var(--hu);position:relative;margin:calc(-330*var(--hu)) 0 calc(-120*var(--hu));flex:none}
  .dd-hero__foot{position:relative;top:auto;left:auto;right:auto;padding-inline:var(--gx);flex-direction:column;gap:24px;align-items:flex-start}
  .dd-hero__foot p{font-size:16px}
  .dd-hero__foot p br{display:none}
  .dd-hero__ctas{flex-wrap:wrap;margin-top:0}
  .dd-lineup__head,.dd-cat__head,.dd-foot__cta,.dd-foot__mid,.dd-tested__row{flex-direction:column;align-items:flex-start}
  .dd-cat__name{white-space:normal;flex-wrap:wrap}
  .dd-lineup__title,.dd-lineup__title .dd-h2{white-space:normal;flex:initial}
  .dd-arrows{align-self:flex-end;margin-top:-8px}
  .dd-arrow{width:52px;height:52px;font-size:19px}
  .dd-rules{grid-template-columns:1fr;gap:56px}
  .dd-tested__word{font-size:20vw}
  .dd-cat__intro,.dd-foot__side,.dd-lineup__head > *,.dd-foot__cta > div{align-self:stretch;max-width:100%}
  .dd-checks{width:100%}
  .dd-foot__side{align-items:flex-start}
  .dd-foot__cols{gap:56px}
  .dd-foot__base{flex-direction:column;align-items:flex-start}
  .dd-foot__base p{text-align:left;white-space:normal}
}
@media (max-width:560px){
  .dd-btn--lg{padding:16px 24px;font-size:16px}
  .dd-view{font-size:12px;padding-left:12px}
  .dd-view i{width:30px;height:30px}
  .dd-prog{gap:16px}
}
@media (hover:none){.dd-car__vp{cursor:auto}}

@media (prefers-reduced-motion:reduce){
  .dd *,.dd *::before,.dd *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  html:has(.dd){scroll-behavior:auto}
  .dd-js .dd-rv,.dd-js .dd-rule,.dd-js .dd-car__item .dd-card,.dd-js .dd-check b,.dd-js .dd-check__st{opacity:1;transform:none}
  .dd-js .dd-split .dd-wi{transform:none}
  .dd-js .dd-car__item .dd-card{translate:none;scale:none}
  .dd-js .dd-tested__word{opacity:1;transform:none;filter:none}
  .dd-pack,.dd-star,.dd-card__pack{transform:none!important}
}

/* carousel: room for the card hover shadow (0 40px 80px -30px reaches ~90px below, ~50px to the sides) without shifting layout */
.dd-car__vp{padding-block:40px 110px;margin-block:-40px -90px}

/* 2026-10-03: card text anchored to the bottom with real breathing room under "View flavor" */
.dd-card__info{top:auto;bottom:0;padding-bottom:max(26px,calc(40*var(--k)))}

/* ---------------- NAV: PRODUCTS DROPDOWN (2026-10-05) ---------------- */
@property --dd-dd-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.dd-dd{position:relative;display:flex;align-items:center;gap:4px}
.dd-dd__tg{-webkit-appearance:none;appearance:none;display:grid;place-items:center;width:22px;height:22px;margin-right:-6px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:background .3s var(--ease)}
.dd-dd__tg:hover,.dd-dd.is-open .dd-dd__tg{background:rgba(255,255,255,.12)}
.dd-dd__tg:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.dd-dd__tg svg{width:10px;height:10px;transition:transform .5s var(--spring)}
.dd-dd.is-open .dd-dd__tg svg{transform:rotate(180deg)}
.dd-dd__panel{position:absolute;top:100%;left:50%;z-index:5;width:580px;padding-top:24px;transform:translateX(-50%);visibility:hidden;pointer-events:none;transition:visibility 0s .45s}
.dd-dd.is-open .dd-dd__panel{visibility:visible;pointer-events:auto;transition:visibility 0s}
.dd-dd__in{position:relative;padding:12px;border-radius:28px;background:rgba(14,14,24,.86);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:0 34px 90px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);opacity:0;transform:translateY(-12px) scale(.95);transform-origin:50% 0;
  transition:opacity .3s var(--ease),transform .45s var(--ease)}
.dd-dd.is-open .dd-dd__in{opacity:1;transform:none;transition:opacity .35s var(--ease),transform .6s var(--spring)}
.dd-dd__in::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--dd-dd-a),var(--pink),var(--yellow),var(--lime),var(--cyan),var(--purple),var(--pink));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.75;animation:dd-dd-spin 6s linear infinite}
.dd-dd__in::after{content:"";position:absolute;top:-6px;left:calc(50% - 6px);width:12px;height:12px;border-radius:3px 0 0 0;background:rgba(14,14,24,.86);transform:rotate(45deg);box-shadow:-1px -1px 0 rgba(255,255,255,.18)}
@keyframes dd-dd-spin{to{--dd-dd-a:360deg}}
.dd-dd__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dd-dd__card{--g1:#ff2e93;--g2:#5b2bd1;--glow:rgba(255,46,147,.55);position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:236px;padding:18px 18px 16px;
  border-radius:20px;overflow:hidden;isolation:isolate;color:#fff;text-decoration:none;
  background:radial-gradient(90% 70% at 15% 0%,rgba(255,255,255,.28),transparent 60%),linear-gradient(155deg,var(--g1),var(--g2));
  opacity:0;translate:0 16px;transition:opacity .35s var(--ease),translate .6s var(--spring),scale .5s var(--spring),box-shadow .45s var(--ease)}
.dd-dd__card--mu{--g1:#c9ec4a;--g2:#0f8f9b;--glow:rgba(201,236,74,.45)}
.dd-dd.is-open .dd-dd__card{opacity:1;translate:0 0;transition-delay:calc(.08s + var(--i)*.07s),calc(.08s + var(--i)*.07s),0s,0s}
.dd-dd__card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 38%,rgba(10,10,18,.62))}
.dd-dd__card::after{content:"";position:absolute;inset:-20%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.35) 50%,transparent 58%);transform:translateX(-80%);transition:transform .9s var(--ease)}
.dd-dd__card:hover,.dd-dd__card:focus-visible{scale:1.025;box-shadow:0 22px 50px var(--glow)}
.dd-dd__card:hover::after,.dd-dd__card:focus-visible::after{transform:translateX(80%)}
.dd-dd__card:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dd-dd__packs{position:absolute;inset:0;z-index:-2}
.dd-dd__packs img{position:absolute;top:8px;left:50%;width:150px;height:auto;margin-left:-75px;filter:drop-shadow(0 16px 18px rgba(0,0,0,.35));
  transform:translate(var(--tx),var(--ty)) rotate(var(--r));transition:transform .7s var(--spring)}
.dd-dd__card:hover .dd-dd__packs img,.dd-dd__card:focus-visible .dd-dd__packs img{transform:translate(calc(var(--tx)*1.3),calc(var(--ty) - 12px)) rotate(calc(var(--r)*1.5)) scale(1.06)}
.dd-dd__txt{position:relative;z-index:2;padding-right:46px}
.dd-dd__txt small{display:block;font:500 10.5px/1 var(--fd);letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.dd-dd__txt b{display:block;margin-top:7px;font:900 22px/1.02 var(--fd);letter-spacing:-.03em}
.dd-dd__dots{display:flex;gap:5px;margin-top:11px}
.dd-dd__dots i{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.dd-dd__ar{position:absolute;right:14px;bottom:14px;z-index:2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);font:700 16px/1 var(--fb);
  transform:rotate(-45deg) scale(.82);transition:transform .55s var(--spring)}
.dd-dd__card:hover .dd-dd__ar,.dd-dd__card:focus-visible .dd-dd__ar{transform:none}
.dd-dd__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 8px 2px}
.dd-dd__foot p{margin:0;font:500 10.5px/1 var(--fd);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.dd-nav__links .dd-dd__all{font:700 13px/1 var(--fb);color:#fff;padding:4px 0}
.dd-dd__all span{display:inline-block;margin-left:6px;transition:transform .45s var(--ease)}
.dd-dd__all:hover span{transform:translateX(4px)}
/* mobile menu: collection pills under "Products" */
.dd-menu__links .dd-msub{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 10px;opacity:0;transform:translateY(30px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.dd-menu.is-open .dd-menu__links .dd-msub{opacity:1;transform:none;transition-delay:calc(.15s + var(--i)*.06s)}
.dd-menu__links .dd-msub a{display:inline-flex;align-items:center;gap:9px;padding:11px 16px 11px 12px;border-radius:999px;font:700 15px/1 var(--fb);letter-spacing:0;opacity:1;transform:none;
  color:#fff;background:linear-gradient(135deg,var(--g1),var(--g2));box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.dd-menu__links .dd-msub a i{width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.dd-menu__links .dd-msub a small{font:500 11px/1 var(--fd);opacity:.75}
.dd-msub__d9{--g1:#ff2e93;--g2:#5b2bd1}
.dd-msub__mu{--g1:#9fc21f;--g2:#0f8f9b}
@media (prefers-reduced-motion:reduce){.dd-dd__in::before{animation:none}.dd-dd__card,.dd-dd__packs img,.dd-dd__in{transition:none}}