@font-face{font-family:PeperoncinoSansCustom;src:url("assets/reference/peperoncino.woff2") format("woff2"),url("assets/reference/peperoncino.woff?v=official-regular") format("woff");font-display:block;font-style:normal;font-weight:400}
@font-face{font-family:"Inter Tight";src:url("assets/reference/inter-tight.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:100 900}

:root{
  --ink:#100b06;
  --cream:#f5e4c7;
  --muted:#9a8a72;
  --gold:#be8d3f;
  --orange:#f15726;
  --red:#da1f27;
  --line:rgba(245,228,199,.3);
  --u:max(1px, calc(100vw / 1440));
  --display:PeperoncinoSansCustom;
  --body:"Inter Tight",Arial,sans-serif;
}

*{box-sizing:border-box;letter-spacing:-.02em}
/* Nothing on the page is selectable: the copy reads like placeholder text.
   Form fields keep selection, or you could not edit what you typed. */
html{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;-moz-user-select:text;user-select:text}
img,svg,a{-webkit-user-drag:none;user-drag:none}
.reviews>h2,.reviews>h2 *,.section-display strong,.section-display strong *,.feature-number,.feature-number *,.arched-title,.arched-title *{letter-spacing:normal}
h1,h2,h3,h4{line-height:1}
.reveal-char,.reveal-word{display:inline-block}
.sr-char,.sr-line{display:inline-block}
.sr-host .sr-char{opacity:0;transform:translateY(60px) scale(.8,.5);transition:opacity .28s cubic-bezier(.4,0,.2,1),transform .485s cubic-bezier(.34,1.56,.64,1)}
.sr-host .sr-line{opacity:0;transform:translateY(19.8px);transition:opacity .45s ease,transform .56s cubic-bezier(.16,1,.3,1)}
.sr-up{opacity:0;transform:translateY(14px);transition:opacity .42s ease,transform .42s cubic-bezier(.16,1,.3,1)}
.sr-char.sr-in,.sr-line.sr-in,.sr-up.sr-in{opacity:1!important;transform:none!important}
.has-reveal .reveal-char{opacity:0;transform:translateY(60px) scale(.8,.5);transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.34,1.56,.64,1)}
.has-reveal.is-revealed .reveal-char{opacity:1;transform:none}
.has-reveal .reveal-word{opacity:0;transform:translateY(19.8px);transition:opacity .45s ease,transform .77s cubic-bezier(.16,1,.3,1)}
.has-reveal .reveal-word--spring{transform:translateY(100px) scale(.5,1.5);transition:opacity .5s ease,transform 1.2s cubic-bezier(.34,1.46,.64,1)}
.has-reveal.is-revealed .reveal-word{opacity:1;transform:none}
html{scroll-behavior:smooth;background:var(--ink)}
.fluid-scale .subpage-main{zoom:var(--fluid,1)}
body{margin:0;overflow-x:clip;background:var(--ink);color:var(--cream);font-family:var(--body);font-size:16px;line-height:1.5;font-synthesis:none;-webkit-font-smoothing:antialiased}
body.is-loading,body.is-loading *{overflow:hidden;cursor:none}
button,input{font:inherit}
button,a{color:inherit}
button{border:0}
a{text-decoration:none}
img{display:block;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.loader{position:fixed;inset:0;z-index:10000;overflow:hidden;cursor:none;background:var(--ink);transition:opacity .65s cubic-bezier(.76,0,.24,1),visibility .65s}
/* will-change is what keeps the fly-out smooth: without it the logo is an SVG
   re-rasterised on the way to 4.53x, which cost a 195ms frame right at the
   handover to the page. Promoted, the same frames land at the refresh rate. */
.loader-zoom{position:absolute;inset:0;z-index:5;transform-origin:50% 50%;will-change:transform}
/* Production flies the intro content through the camera instead of fading it */
.loader.is-done .loader-zoom{animation:loader-fly .8s cubic-bezier(.6,0,.85,.35) forwards}
@keyframes loader-fly{to{transform:translateY(-1765px) scale(4.53)}}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease .5s,visibility .4s ease .5s}
.loader-disk{position:absolute;z-index:1;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;border-radius:50%;transform:scale(0);animation:loader-disk 2.2s cubic-bezier(.3,.12,.66,.88) forwards}
.loader-disk--gold{background:var(--gold);animation-delay:.2s}.loader-disk--orange{background:var(--orange);animation-delay:.5s}.loader-disk--red{background:var(--red);animation-delay:.8s}.loader-disk--black{background:var(--ink);animation-delay:1.1s}
.loader-logo{position:absolute;z-index:6;top:50%;left:50%;width:min(250px,45vw);height:auto;transform:translate(-50%,-50%) scale(.2);opacity:0;animation:loader-logo 1s cubic-bezier(.25,.6,.3,1) 1.3s both;will-change:transform,opacity}
.loader-food{position:absolute;z-index:3;width:clamp(70px,10vw,150px);opacity:0;animation:loader-food-in .5s ease forwards,loader-float 2.2s ease-in-out infinite alternate}
.loader-food--one{top:7%;left:29%;transform:rotate(-15deg);animation-delay:2.7s,3.2s}
.loader-food--two{top:16%;right:16%;animation-delay:2.85s,2.8s}
.loader-food--three{bottom:8%;left:15%;animation-delay:3s,2.55s}
.loader-food--four{right:22%;bottom:6%;animation-delay:3.15s,2.3s}
@keyframes loader-disk{to{transform:scale(1)}}
@keyframes loader-logo{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes loader-food-in{to{opacity:1}}
@keyframes loader-float{to{translate:0 14px;rotate:4deg}}
body.is-loading .site-header{opacity:0;translate:0 -200px}
.hero-title{transition:opacity .6s ease,translate .8s cubic-bezier(.22,1,.36,1)}
body.is-loading .hero-title{opacity:0;translate:0 190px}
.hero-product{transition:opacity .8s ease .25s,translate .95s cubic-bezier(.2,.8,.2,1) .25s}
body.is-loading .hero-product{opacity:0;translate:0 180px}
.hero-meta,.hero-controls,.primary-cta{transition:opacity .6s ease .75s}
body.is-loading .hero-meta,body.is-loading .hero-controls,body.is-loading .primary-cta{opacity:0}
.hero-title .cascade-letter{display:inline-block;opacity:0;transform:translateY(60px) scale(.8,.5);transition:opacity .28s cubic-bezier(.4,0,.2,1),transform .485s cubic-bezier(.34,1.56,.64,1)}
body:not(.is-loading) .hero-title .cascade-letter{opacity:1;transform:none}

body.cart-open .site-header .brand{opacity:0;pointer-events:none}
.site-header .brand{transition:opacity .3s ease,width .3s cubic-bezier(.215,.61,.355,1),height .3s cubic-bezier(.215,.61,.355,1),margin .3s cubic-bezier(.215,.61,.355,1)}
.site-header{position:fixed;z-index:1000;top:0;left:0;width:100%;display:flex;align-items:flex-start;justify-content:space-between;padding:10px;pointer-events:none;transition:transform .4s ease,opacity .55s ease,translate .55s ease}
/* Production never swaps two drawings here. One logo slides up inside the
   brand box while that box shrinks to a 45px slit, so what is left framed is
   the antlers. Measured off the reference: 160x193 to 144x45 over 300ms, the
   artwork riding up 28.95% of its own height. */
.brand{position:relative;z-index:2;width:160px;height:193px;overflow:hidden;color:var(--cream);pointer-events:auto;transition:width .3s cubic-bezier(.215,.61,.355,1),height .3s cubic-bezier(.215,.61,.355,1),margin .3s cubic-bezier(.215,.61,.355,1)}
/* Two copies of the same artwork share one box and one viewBox, so the antlers
   in each sit on exactly the same pixels. Fading the full drawing out leaves
   the antlers standing rather than cross-dissolving into a second picture —
   which is what production does by dropping the opacity of #text and #head
   inside its inline SVG. */
.brand img{position:absolute;top:0;left:0;width:100%;height:auto;transition:transform .3s cubic-bezier(.215,.61,.355,1),opacity .3s cubic-bezier(.215,.61,.355,1)}
.desktop-nav{display:flex;align-items:center;gap:40px;padding:0 2px;pointer-events:auto;margin-left:auto}
.desktop-nav a,.nav-cart{padding:0;background:transparent;color:var(--cream);font-family:var(--display);font-size:clamp(24px,2.05vw,39px);line-height:1.5;text-transform:uppercase;letter-spacing:-.02em;cursor:pointer}
.nav-roll{display:flex;flex-direction:column;height:.85em;overflow:hidden}
.nav-roll-line{display:block;line-height:.85}
.nav-roll-line--outline{color:var(--ink);-webkit-text-stroke:1px var(--cream)}
.nav-char{display:inline-block;transition:transform .4s cubic-bezier(.215,.61,.355,1);transition-delay:calc(var(--cr,0)*.025s)}
.roll-host:hover .nav-char{transition-delay:calc(var(--ci)*.025s)}
.roll-host:hover .nav-char{transform:translateY(-100%)}
.mobile-menu nav a .nav-char{transition-timing-function:cubic-bezier(.22,1.5,.5,1)}
.get-sauce{transition:background .3s,color .3s}
.get-sauce:hover{background:var(--ink);color:var(--cream)}
.primary-cta{border:2px solid var(--cream);box-sizing:border-box;transition:opacity .6s ease .75s,background .3s,color .3s}
.primary-cta:hover{background:var(--ink);color:var(--cream)}
.cart-empty a{transition:background .3s,color .3s}
.cart-empty a:hover{background:var(--cream);color:var(--ink)}
.cart-checkout>a{border:2px solid var(--cream);box-sizing:border-box;transition:background .3s,color .3s}
.cart-checkout>a:hover{background:var(--ink);color:var(--cream)}
.word-roll{position:relative;display:inline-block}
[data-busy="1"]{background:var(--ink)!important;color:var(--cream)!important;transition:background .2s ease,color .2s ease}
.word-roll-line{display:block;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s cubic-bezier(.4,0,.2,1)}
.word-roll-line--dup{position:absolute;inset:0;transform:translateY(16px);opacity:0;transition:transform .336s cubic-bezier(.2,2.0,.5,1) .095s,opacity .2s ease .095s}
.word-host:hover .word-roll-line:not(.word-roll-line--dup){transform:translateY(-16px);opacity:0}
.word-host:hover .word-roll-line--dup{transform:none;opacity:1}
.arrow-roll{position:absolute;inset:0}
.arrow-roll span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .3s cubic-bezier(.4,.1,.2,1),opacity .3s cubic-bezier(.4,.1,.2,1)}
.arrow-host--prev .arrow-roll span:last-child{transform:translateX(16px);opacity:0}
.arrow-host--prev:hover .arrow-roll span:first-child{transform:translateX(-16px);opacity:0}
.arrow-host--prev:hover .arrow-roll span:last-child{transform:none;opacity:1}
.arrow-host--next .arrow-roll span:last-child{transform:translateX(-16px);opacity:0}
.word-host:hover .arrow-host--next .arrow-roll span:first-child{transform:translateX(16px) scale(0);opacity:0}
.word-host:hover .arrow-host--next .arrow-roll span:last-child{transform:none;opacity:1}
.arrow-host--next:hover .arrow-roll span:first-child{transform:translateX(16px);opacity:0}
.arrow-host--next:hover .arrow-roll span:last-child{transform:none;opacity:1}
.icon-roll{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.icon-roll-copy{position:absolute;inset:0;display:grid;place-items:center;transition:transform .3s cubic-bezier(.4,.1,.2,1),opacity .3s cubic-bezier(.4,.1,.2,1)}
.icon-roll-copy--dup{transform:translateX(-16px) scale(0);opacity:0}
.icon-button:hover .icon-roll-copy:not(.icon-roll-copy--dup){transform:translateX(16px) scale(0);opacity:0}
.icon-button:hover .icon-roll-copy--dup{transform:none;opacity:1}
.meta-roll{display:inline-flex;flex-direction:column;height:16px;overflow:hidden;vertical-align:baseline}
.meta-roll span{display:block;height:16px;line-height:16px;transition:transform .895s cubic-bezier(.215,.61,.355,1),opacity .895s cubic-bezier(.215,.61,.355,1)}
.hero-meta span.meta-roll,.hero-meta .meta-roll span{margin:0;padding:0;background:transparent}
.compact-actions{position:absolute;top:10px;right:10px;display:flex;gap:4px;align-items:stretch;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-150px);transition:opacity .35s ease,visibility .35s,transform .35s cubic-bezier(.22,1,.36,1)}
.get-sauce,.icon-button{height:60px;border:2px solid var(--cream);border-radius:11px;display:grid;place-items:center;background:var(--ink);pointer-events:auto}
.get-sauce{min-width:193px;padding:0 38px;background:var(--cream);color:var(--ink);font-family:var(--display);font-size:20px;line-height:1.5;text-transform:uppercase}
.icon-button{position:relative;width:62px;cursor:pointer}
.menu-button{width:72px}
.action-mask{display:block;background:currentColor;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-position:center;mask-repeat:no-repeat;mask-size:contain}
.action-mask--cart{width:25px;height:22px;-webkit-mask-image:url("assets/reference/icon-cart.svg");mask-image:url("assets/reference/icon-cart.svg")}
.action-mask--menu{width:27px;height:22px;-webkit-mask-image:url("assets/reference/icon-menu.svg");mask-image:url("assets/reference/icon-menu.svg")}
.action-mask--close{width:20px;height:20px;-webkit-mask-image:url("assets/reference/icon-close.svg");mask-image:url("assets/reference/icon-close.svg")}
.action-mask--instagram{width:24px;height:24px;-webkit-mask-image:url("assets/reference/icon-instagram.svg");mask-image:url("assets/reference/icon-instagram.svg")}
.action-mask--facebook{width:14px;height:26px;-webkit-mask-image:url("assets/reference/icon-facebook.svg");mask-image:url("assets/reference/icon-facebook.svg")}
.cart-bubble{position:absolute;right:8px;top:8px;display:none;width:10px;height:10px;border-radius:50%;background:var(--cream);outline:3px solid var(--ink);font-size:0;color:transparent;pointer-events:none}
.cart-bubble:not(:empty){display:block}
/* the cart button is the only feedback when something goes in with the drawer
   closed, so it takes the hit */
[data-cart-count]{transition:transform .34s cubic-bezier(.34,1.56,.64,1)}
[data-cart-count].is-bumped{transform:scale(1.9)}
.cart-bubble.is-bumped{transform:scale(2.4)}
/* 45px is where production clips the antlers mid-stroke; 57 is the first
   height that lets them finish on their own tips, and nothing else moves. */
.site-header.is-compact .brand{width:144px;height:57px;margin:3px 0 0 8px}
.site-header.is-compact .brand img{transform:translateY(-26.1%)}
.site-header.is-compact .brand-full{opacity:0}
/* The right antler closes the 24-unit gap the head leaves behind. */
.site-header.is-compact .brand img.brand-horn--right{transform:translateY(-26.1%) translateX(-20.34%)}
.desktop-nav{transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.site-header.is-compact .desktop-nav{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-100px)}
.site-header.is-compact .compact-actions{opacity:1;visibility:visible;pointer-events:auto;transform:none}

.mobile-menu{position:fixed;z-index:1200;top:10px;right:10px;width:calc(50vw - 20px);height:calc(100dvh - 20px);box-sizing:border-box;display:flex;flex-direction:column;background:var(--cream);color:var(--ink);border-radius:10px;overflow:hidden;opacity:0;visibility:hidden;transform-origin:100% 0;transition:opacity .25s ease,visibility .6s ease}
.mobile-menu.is-open{opacity:1;visibility:visible}
.menu-head{display:none}
.panel-close{position:absolute;z-index:4;right:5px;top:5px;width:48px;height:48px;padding:0;border:2px solid var(--ink);border-radius:10px;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.mobile-menu nav{min-height:0;flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:100px 5px 5px}
.mobile-menu nav a{min-height:0;flex:0 0 auto;height:133px;display:flex;align-items:center;padding:10px 8px;border-top:1px dashed rgba(16,11,6,.2);box-sizing:border-box;color:var(--ink);font-family:var(--display);font-size:clamp(70px,10.42vw,100px);font-weight:400;line-height:.85;text-transform:uppercase;overflow:hidden;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1),color .35s ease}
.mobile-menu nav a:last-of-type{border-bottom:1px dashed rgba(16,11,6,.2)}
.mobile-menu.is-open nav a{opacity:1;transform:none}
.mobile-menu.is-open nav a:nth-child(1){transition-delay:.18s}.mobile-menu.is-open nav a:nth-child(2){transition-delay:.237s}.mobile-menu.is-open nav a:nth-child(3){transition-delay:.294s}.mobile-menu.is-open nav a:nth-child(4){transition-delay:.351s}.mobile-menu.is-open nav a:nth-child(5){transition-delay:.408s}
.mobile-menu nav a .nav-roll-line--outline{color:var(--cream);-webkit-text-fill-color:var(--cream);-webkit-text-stroke:2px var(--ink)}
.menu-thumb{width:0;height:.8em;flex:none;margin-right:0;border-radius:10px;overflow:hidden;transition:width .45s cubic-bezier(.16,1,.3,1),margin-right .45s cubic-bezier(.16,1,.3,1)}
.mobile-menu nav a:hover .menu-thumb{width:.8em;margin-right:16px}
.menu-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.mobile-social{height:72px;flex:none;display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;box-sizing:border-box;text-transform:uppercase}
.mobile-social a{height:100%;padding:0 20px;border:2px solid var(--ink);border-radius:10px;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;color:var(--ink);font-family:var(--display);font-size:25px;opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.mobile-social a{transition:background .3s,color .3s,opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.mobile-social a:hover{background:var(--ink);color:var(--cream)}
.mobile-menu.is-open .mobile-social a{opacity:1;transform:none}.mobile-menu.is-open .mobile-social a:first-child{transition-delay:.58s}.mobile-menu.is-open .mobile-social a:last-child{transition-delay:.65s}

.scrim{position:fixed;z-index:999;inset:0;background:rgba(16,11,6,.65);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
.scrim.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s ease,visibility .3s ease}
.cart-drawer{position:fixed;z-index:1100;top:10px;right:10px;width:min(704px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:0;display:flex;flex-direction:column;background:transparent;color:var(--ink);transform-origin:100% 0;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .6s ease}
.cart-drawer.is-open{opacity:1;visibility:visible}
.cart-inner{position:relative;flex:1;min-height:50px;display:flex;flex-direction:column;padding:10px;box-sizing:border-box;border-radius:10px;background:var(--cream);overflow:hidden}
.cart-drawer:has(.cart-checkout:not([hidden])) .cart-inner{border-radius:10px 10px 0 0}
.cart-empty[hidden]{display:none}
.cart-empty{height:100%;padding:44px 20px 38px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
/* cuando se vacia el carrito (o se abre ya vacio) la botella entra con rebote
   y las tres lineas la siguen escalonadas */
.cart-empty img,.cart-empty p,.cart-empty h2,.cart-empty a{transition:opacity .45s ease,transform .72s cubic-bezier(.34,1.56,.64,1)}
.cart-empty p{transition-delay:.08s}
.cart-empty h2{transition-delay:.15s}
.cart-empty a{transition-delay:.23s}
.cart-empty.is-entering img{opacity:0;transform:scale(.72) translateY(26px)}
.cart-empty.is-entering p{opacity:0;transform:translateY(20px)}
.cart-empty.is-entering h2{opacity:0;transform:translateY(24px) scale(.86)}
.cart-empty.is-entering a{opacity:0;transform:translateY(16px)}
.cart-empty.is-entering img,.cart-empty.is-entering p,.cart-empty.is-entering h2,.cart-empty.is-entering a{transition-duration:0s;transition-delay:0s}
.cart-empty img{height:min(34vh,285px);width:auto}
.cart-empty p{margin:34px 0 8px;font-family:var(--display);font-size:calc(30*var(--u));line-height:1.5;text-transform:uppercase}
.cart-empty h2{margin:0;font-family:var(--display);font-size:calc(100*var(--u));font-weight:400;line-height:.88;text-transform:uppercase}
.cart-empty a{margin-top:42px;border-radius:9px;padding:18px 22px;background:var(--ink);color:var(--cream);font-family:var(--display);font-size:calc(20*var(--u));line-height:1.5;text-transform:uppercase}
/* align-content:start or a single line stretches to fill the panel: the row
   was 343px tall on a phone against production's 115 */
.cart-lines{display:grid;align-content:start;gap:10px;flex:1;min-height:0;margin-top:48px;overflow-y:auto}
.cart-lines:empty{margin-top:0}
.cart-line{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;padding:0;overflow:hidden;max-height:520px;transition:max-height .42s cubic-bezier(.2,.8,.2,1),opacity .3s ease,transform .42s cubic-bezier(.2,.8,.2,1),padding-top .42s cubic-bezier(.2,.8,.2,1)}
/* una linea nueva entra desde la izquierda mientras se abre hueco */
.cart-line.is-entering{max-height:0;opacity:0;transform:translateX(-30px)}
/* y sale hacia la derecha cerrando el hueco antes de que el carrito repinte */
.cart-line.is-leaving{max-height:0!important;opacity:0;transform:translateX(30px);padding-top:0;border-top-width:0}
.cart-line + .cart-line{border-top:1px dashed rgba(16,11,6,.3);padding-top:10px}
.cart-step b{display:inline-block;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
/* al sumar o restar sin llegar a cero, el numero pega un salto */
.cart-step b.is-bumped{transform:scale(1.42)}
.cart-line img{width:200px;height:200px;object-fit:cover;border-radius:10px;background:rgba(16,11,6,.1)}
.cart-line strong{display:block;font-family:var(--display);font-size:30px;line-height:1;text-transform:uppercase}
.cart-line em{display:block;margin-top:6px;font-style:normal;font-size:20px}
.cart-line .cart-step{display:inline-flex;align-items:center;gap:12px;margin-top:16px;padding:8px 12px;border:1px solid var(--ink);border-radius:10px}
.cart-line .cart-step button{width:32px;height:32px;border-radius:8px;background:transparent;cursor:pointer;transition:background .3s}
.cart-line .cart-step button:hover{background:rgba(16,11,6,.05)}

.cart-summary[hidden]{display:none}
.cart-summary{flex:none;margin-top:10px}
.cart-summary>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px dashed rgba(16,11,6,.3)}
.cart-value{justify-content:flex-start!important}
.cart-value i{width:20px;height:20px;flex:none;display:grid;place-items:center;color:var(--orange);font-size:20px;line-height:1;font-style:normal}
.cart-value i::before{content:"\2605"}
.cart-value span{font-weight:500;font-size:20px;text-transform:uppercase}
.cart-value b{font-weight:500;font-size:20px}
.cart-ship span{font-size:20px}
.cart-total span{font-size:20px}
.cart-total strong{font-size:24px;font-weight:700}
.cart-checkout[hidden]{display:none}
.cart-checkout{flex:none;padding:10px;box-sizing:border-box;border:1px solid var(--cream);border-radius:0 0 10px 10px;background:var(--ink)}
.cart-checkout>a{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;height:76px;box-sizing:border-box;border-radius:10px;background:var(--cream);color:var(--ink);font-family:var(--display);font-size:calc(26*var(--u));line-height:1.5;text-transform:uppercase}
.cart-checkout>a::after{content:"→";font-family:var(--body)}

/* ---- the drawer on a phone: production drops every size here ---- */
@media(max-width:1023px){
  /* it insets by 5 and takes the full width below 1024, where the desktop
     keeps a 10px inset and a 704px cap */
  .cart-drawer{top:5px;right:5px;width:calc(100vw - 10px);max-height:calc(100dvh - 10px)}
  /* the bottle sits in a 288x270 box on contain, so what shows is the same
     132x270 bottle production shows */
  /* production's empty panel is a fixed 695 tall with the art pinned to the
     top, not centred in whatever height is left */
  .cart-empty{justify-content:flex-start;min-height:675px;padding-top:40px}
  .cart-empty img{width:min(288px,67vw);height:270px;object-fit:contain}
  .cart-empty p{margin:40px 0 0;font-size:24px;line-height:1.5}
  .cart-empty h2{font-size:52px;line-height:.88}
  .cart-empty a{width:51%;margin-top:40px;padding:17px 0;font-size:16px}
  /* the row photo is 29% of the drawer — 115px at 430, 217 at 768 — where ours
     held the desktop 200 and pushed the copy into a 403px tall line */
  /* the third column is the room production leaves for the close button, which
     is what lets its copy start at the top of the panel instead of 48px down */
  .cart-lines{margin-top:0}
  .cart-line{grid-template-columns:29% 1fr 86px;gap:10px}
  .cart-line img{width:100%;height:auto;aspect-ratio:1}
  .cart-line strong{font-size:24px;line-height:1}
  .cart-line em{font-size:18px;line-height:1.5}
  .cart-value span,.cart-value b,.cart-ship span,.cart-total span,.cart-total strong{font-size:18px}
  .cart-checkout>a{height:62px;font-size:16px}
}

/* production's hero is 1088 tall with its three dashed rules at 377, 702 and
   1056; ours ran 1313 with each rule sitting progressively lower because the
   bottle was 791 where theirs renders 714 */
.hero{position:relative;min-height:1188px;padding:100px 10px 50px;overflow:hidden}
.hero-title{position:relative;z-index:5;max-width:none;margin:0 auto;text-align:center;font-family:var(--display);font-size:clamp(62px,6.945vw,139px);font-weight:400;letter-spacing:-.02em;line-height:.88;text-transform:uppercase}
.hero-title--desktop .hero-row{white-space:nowrap}
.hero-title--mobile{display:none}
.hero-row{display:block}
.hero-title .outlined{color:transparent;-webkit-text-stroke:2px var(--cream);paint-order:stroke fill}
.hero-meta{position:absolute;z-index:2;top:477px;left:10px;right:10px;height:1px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;align-items:center;text-transform:uppercase}
.hero-meta span,.hero-meta strong{background:var(--ink);padding:0 8px;font-size:calc(14*var(--u));line-height:1;letter-spacing:.08em}
.hero-meta span{margin-left:139px}
.hero-meta span b{margin-left:0;font-weight:400;letter-spacing:inherit}
.hero-meta strong{margin-right:138px;font-weight:700}
.hero-product{position:absolute;z-index:3;top:386px;left:50%;width:600px;height:760px;transform:translateX(-50%)}
.hero-disc{position:absolute;top:260px;left:50%;width:420px;height:420px;border-radius:50%;background:#be8d3f;transform:translateX(-50%);transition:background .7s;animation:hero-disc-pulse 3.5s ease-in-out infinite}
@keyframes hero-disc-pulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(.9)}}
.hero-slide{position:absolute;inset:0}
.hero-slide--ghost{pointer-events:none}
.hero-sway{position:absolute;inset:0;pointer-events:none;animation:hero-bottle-sway 7.2s ease-in-out infinite}
@keyframes hero-bottle-sway{0%,100%{transform:translateY(18.5px) rotate(.5deg)}50%{transform:translateY(-18.5px) rotate(-.5deg)}}
.hero-bottle{position:absolute;z-index:2;top:27px;left:50%;height:695px;width:auto;max-width:none;object-fit:contain;transform:translateX(-50%) rotate(5deg);filter:drop-shadow(0 25px 25px rgba(0,0,0,.25));transition:opacity .22s,transform .45s cubic-bezier(.2,.8,.2,1)}
.hero-character-wrap{position:absolute;z-index:4;top:350px;left:50%;width:210px;height:190px;transform:translateX(-245px) rotate(-7deg);animation:hero-mascot-float 6s ease-in-out infinite}
@keyframes hero-mascot-float{0%,100%{transform:translateX(-245px) translateY(4px) rotate(-6.5deg)}50%{transform:translateX(-245px) translateY(-4px) rotate(-7.5deg)}}
/* The face rides over the ingredient photo; JS sizes and places it against
   the photo's rendered box, since object-fit letterboxes it. */
.food-face{position:absolute;z-index:3;pointer-events:none}
.food-face svg{display:block;width:100%;height:100%;overflow:visible}
.hero-character{width:100%;height:100%;object-fit:contain;transition:opacity .22s,transform .45s}




.hero-fruit{position:absolute;z-index:3;top:165px;left:50%;width:175px;height:170px;object-fit:contain;transform:translateX(120px) rotate(7deg);translate:0 0;transition:opacity .22s,transform .45s;animation:hero-ingredient-float 4.8s ease-in-out infinite}
.hero-controls{position:absolute;z-index:2;top:802px;left:10px;right:10px;height:1px;border-top:1px dashed var(--line);display:flex;justify-content:space-between;padding:0 139px}
.hero-controls button{position:relative;box-sizing:border-box;width:88px;height:88px;margin-top:-44px;border:2px solid var(--cream);border-radius:50%;background:var(--cream);color:var(--ink);font-size:30px;cursor:pointer;overflow:hidden;transition:transform .25s,background .3s,color .3s}
.hero-controls button:hover{transform:scale(1.1);background:var(--ink);color:var(--cream)}
.hero-cta-row{position:absolute;z-index:6;top:1156px;left:10px;right:10px;height:1px;border-top:1px dashed var(--line);display:flex;justify-content:center;align-items:center}
.primary-cta{min-width:300px;height:72px;padding:0 35px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:var(--cream);color:var(--ink);text-align:center;font-family:var(--display);font-size:26px;text-transform:uppercase;box-shadow:0 0 0 4px var(--ink)}

/* production sizes this to its four lines and spaces it with a top margin —
   160 here, 120 on a phone — instead of a fixed 576 floor plus padding */
.natural-section{min-height:0;margin-top:160px;padding:0 20px;display:flex;justify-content:center;align-items:flex-start}
.natural-section p{max-width:1050px;margin:0;text-align:center;font-size:clamp(35px,4.1667vw,80px);font-weight:400;line-height:1;letter-spacing:-.02em}
.natural-row{display:block;white-space:nowrap}
.natural-icon{display:inline-block;height:1em;width:auto;margin:0;object-fit:contain;vertical-align:baseline}
.natural-icon--splat,.natural-icon--chef{transform:none;transform-origin:center;animation:icon-wiggle 3.8s ease-in-out infinite}
.natural-icon--chef{animation-delay:-1.4s}
@keyframes icon-wiggle{0%,100%{rotate:-3deg;scale:1}50%{rotate:4deg;scale:1.06}}

.benefits{position:relative;height:calc(100vh + 1448px);padding:0;overflow-x:clip;overflow-y:visible}
.benefit-stage{position:sticky;top:0;height:100vh;overflow:hidden;padding:0 20px}
.benefit-foods{position:absolute;top:0;left:0;right:0;height:calc(100% - 600px);pointer-events:none}
.benefit-foods-pin{position:sticky;top:0;height:100vh}
.benefit-stack{position:relative;z-index:3;width:clamp(460px,32.5vw,640px);height:100%;margin:0 auto}
.benefit-card{position:absolute;top:clamp(24px,calc(100vh - 790px),110px);width:100%;color:var(--cream);transform-origin:center top;will-change:transform}
.benefit-card--one{z-index:1}
.benefit-card--two{z-index:2;transform:translate(-115px,560px) rotate(5deg)}
.benefit-card--three{z-index:3;transform:translate(115px,940px) rotate(-5deg)}
.benefit-card--four{z-index:4;transform:translate(-115px,1320px) rotate(5deg)}
.benefit-card h2{filter:brightness(calc(1 - var(--dim,0)))}
.benefit-card h2,.feature h3,.review-track h3{height:80px;font-size:calc(36*var(--u));line-height:1;margin:0;border-radius:11px;background:var(--cream);color:var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 27px;font-family:var(--display);font-size:34px;font-weight:400;text-transform:uppercase}
.benefit-card h2{font-size:calc(36*var(--u))}
.benefit-card h2 i,.feature h3 i,.review-track h3 i{width:12px;height:12px;border-radius:50%;background:var(--ink)}
.benefit-card>div{height:clamp(280px,min(28.8vw,100vh - 436px),555px);border:1px solid var(--cream);border-radius:11px;padding:45px 28px 35px;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:38px;text-align:center}
.benefit-card img{width:100px;height:100px}
.benefit-card p{max-width:none;margin:0;font-size:clamp(20px,1.35vw,25px);line-height:1.45}
.float-food{position:absolute;z-index:1;object-fit:contain;width:180px;translate:0 70px;filter:drop-shadow(0 18px 18px rgba(0,0,0,.3));will-change:translate,rotate;animation:ingredient-float 5.8s ease-in-out infinite}
.food-cherry{left:9%;top:0;width:202px;height:220px}
.food-habanero{right:12%;top:20px;width:226px;height:267px;animation-name:ingredient-float-alt;animation-delay:-1.7s}
.food-garlic{right:-2%;top:280px;width:209px;height:204px;filter:blur(7px);animation-delay:-3.1s}
.food-tomato{left:20%;top:520px;width:329px;height:294px;animation-name:ingredient-float-wide;animation-delay:-2.4s}
.food-chilli{right:22%;top:690px;width:189px;height:183px;animation-name:ingredient-float-alt;animation-duration:4.6s;animation-delay:-.8s}
.food-pineapple{left:40%;top:70%;width:302px;height:302px;filter:blur(6px);animation-name:ingredient-float;animation-duration:6.4s;animation-delay:-2s}
.food-onion{left:-2%;top:900px;width:304px;height:259px;filter:blur(8px);animation-name:ingredient-float-wide;animation-duration:7s;animation-delay:-4.4s}
@keyframes ingredient-float{0%,100%{translate:0 calc(70px + var(--scroll-y,0px));rotate:-4deg}50%{translate:14px calc(48px + var(--scroll-y,0px));rotate:5deg}}
@keyframes ingredient-float-alt{0%,100%{translate:0 calc(70px + var(--scroll-y,0px));rotate:5deg}50%{translate:-18px calc(92px + var(--scroll-y,0px));rotate:-6deg}}
@keyframes ingredient-float-wide{0%,100%{translate:0 calc(70px + var(--scroll-y,0px));rotate:-6deg}50%{translate:24px calc(42px + var(--scroll-y,0px));rotate:4deg}}
@keyframes hero-ingredient-float{0%,100%{translate:0 0}50%{translate:-10px -18px}}
@media(min-width:900px){.food-garlic{top:28vh}.food-tomato{top:52vh}.food-chilli{top:66vh}.food-onion{top:auto;bottom:-30px}}

/* production spends no vertical padding here: the ornament sits at the very
   top of the section and the card bottom is the section bottom */
.products{height:auto;padding:0 10px;overflow:hidden}
.section-display{text-align:center;font-family:var(--display);text-transform:uppercase}
.section-display>span:not(.weapon-ornament){display:block;font-size:9.7222vw;line-height:.8;letter-spacing:normal}
.section-display strong{display:block;color:transparent;-webkit-text-stroke:2px var(--cream);font-size:30vw;font-weight:400;line-height:.8;letter-spacing:normal;white-space:nowrap}
.weapon-ornament{position:relative!important;width:136px;height:57px;margin:0 auto 120px;display:block!important;background:var(--cream);opacity:.2;font-size:0;-webkit-mask:url("assets/reference/weapon-ornament.svg") center/contain no-repeat;mask:url("assets/reference/weapon-ornament.svg") center/contain no-repeat}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:48px}
/* Production draws one product card everywhere — home, shop and about — at
   621x727 with a 56px inset, a 66.11px title and a 408px bottle. */
/* 684, measured on the home, the shop, about and the related cards on a
   product page — all four agree */
.product-card{translate:0 var(--drift,0);height:684px;border-radius:12px;padding:10px;background:var(--gold);color:var(--cream)}
.product-card--habanero{background:var(--orange)}
.product-card--cherry{background:var(--red)}
.product-card-inner{position:relative;height:100%;border:1px dashed rgba(245,228,199,.3);border-radius:9px;padding:46px 46px 20px;overflow:hidden}
.product-card h3{position:relative;z-index:3;margin:0;text-align:center;font-family:var(--display);font-size:calc(50*var(--u));font-weight:400;line-height:.88;text-transform:uppercase;transition:font-size .35s ease}
.product-card h3{transform-origin:50% 0;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.product-card:hover h3{transform:translateY(-32px) scale(.7)}
.product-card p{position:relative;z-index:3;font-size:calc(20*var(--u));letter-spacing:-.02em;max-width:400px;margin-left:auto;margin-right:auto;text-align:center;font-weight:500;line-height:1.25;text-transform:none}
.product-card-inner>p{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
/* The title only shrinks visually, so its layout box still pushes the copy
   down onto the bottle. Production sits it at 164 from the top; this lifts
   it into that gap. */
.product-card:hover .product-card-inner>p{opacity:1;transform:translateY(-94px)}
.product-actions{overflow:hidden}
.product-actions>*{opacity:0;transform:translateY(36px);transition:opacity .4s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.product-actions>*:nth-child(2){transition-delay:.05s}
.card-arrow{position:relative;width:24px;height:24px;margin-left:12px;flex:none;display:inline-grid;place-items:center}
.card-arrow span{position:absolute;inset:0;display:grid;place-items:center;transition:transform .33s cubic-bezier(.4,0,.2,1),opacity .33s cubic-bezier(.4,0,.2,1)}
.card-arrow span:first-child{transform-origin:100% 0}
.card-arrow span:last-child{transform:translate(-16px,16px) scale(0);opacity:0;transform-origin:0 100%;transition:transform .38s cubic-bezier(.2,1.6,.5,1) .095s,opacity .2s ease .095s}
.word-host:hover .card-arrow span:first-child{transform:translate(16px,-16px) scale(0);opacity:0}
.word-host:hover .card-arrow span:last-child{transform:none;opacity:1}
.product-card:hover .product-actions>*{opacity:1;transform:none}
@media(max-width:899px){.product-card-inner>p,.product-actions>*{opacity:1;transform:none}}
.product-actions{position:absolute;z-index:4;left:20px;right:20px;bottom:20px;display:flex;gap:10px;align-items:center}
.product-actions button,.product-actions a{font-size:20px;line-height:1.5;height:72px;border:2px solid var(--cream);border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--display);text-transform:uppercase}
.product-actions button{flex:1.4;background:var(--cream);color:var(--ink);justify-content:space-between;padding:0 20px;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.product-actions button:hover{background:var(--ink);color:var(--cream);border-color:var(--cream)}
.product-actions a{flex:1;justify-content:space-between;padding:0 20px;transition:background .3s,color .3s}
.product-actions a:hover{background:var(--cream);color:var(--ink)}

.why{position:relative;padding-top:10px;padding-bottom:60px;overflow:hidden}
.features-line{display:none}
/* The arc is built from fixed per-letter rotations, so its width tracks the
   font size: 7.6px of arc per px of type. Tying both to the viewport keeps
   it inside the screen instead of running off both edges. */
.arched-title{height:min(35vw,380px);margin:0;display:flex;justify-content:center;align-items:flex-start;font-family:var(--display);font-size:min(12.9vw,168px);font-weight:400;letter-spacing:normal;text-transform:uppercase;white-space:nowrap}
.arched-title span{display:inline-block}
.arched-title span:nth-child(1){transform:translateY(75.6px) rotate(-15.66deg)}
.arched-title span:nth-child(2){transform:translateY(49.8px) rotate(-12.81deg)}
.arched-title span:nth-child(3){transform:translateY(32.7px) rotate(-10.45deg)}
.arched-title span:nth-child(4){transform:translateY(14.4px) rotate(-6.99deg)}
.arched-title span:nth-child(5){transform:translateY(5.9px) rotate(-4.51deg)}
.arched-title span:nth-child(6){transform:translateY(1.1px) rotate(-2.02deg)}
.arched-title span:nth-child(7){transform:translateY(0.0px) rotate(0.58deg)}
.arched-title span:nth-child(8){transform:translateY(3.0px) rotate(3.23deg)}
.arched-title span:nth-child(9){transform:translateY(13.6px) rotate(6.81deg)}
.arched-title span:nth-child(10){transform:translateY(26.3px) rotate(9.4deg)}
.arched-title span:nth-child(11){transform:translateY(42.7px) rotate(11.9deg)}
.arched-title span:nth-child(12){transform:translateY(61.6px) rotate(14.2deg)}
.arched-title span:nth-child(13){transform:translateY(82.7px) rotate(16.34deg)}
.arched-title span:nth-child(7){transform:translateY(0)}
.arched-title .space{margin-left:.25em}
.why-copy{margin:0 auto;text-align:center;color:var(--gold);font-size:25px;font-weight:600;line-height:1.2;text-transform:uppercase}
.why-copy strong{color:var(--cream)}
.garlic-character{position:relative;width:240px;height:210px;margin:32px auto 0}
/* The tilt and the float move to the wrapper so the face rides along with the
   clove instead of being placed against an untransformed box. */
.garlic-spin{position:relative;display:block;width:100%;height:100%;transform:rotate(9deg);translate:0 0;animation:garlic-float 4.2s ease-in-out infinite}
.garlic-character img{width:100%;height:100%;object-fit:contain}
@keyframes garlic-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:10px -16px;rotate:4deg}}
.feature-list{position:relative;margin-top:70px}
.feature{position:relative;min-height:750px;padding:0 8vw;text-align:center}
.feature::before{content:"";position:absolute;left:-5%;right:-5%;top:230px;border-top:3px dashed rgba(245,228,199,.25);transform:rotate(-4deg)}
.feature-number{position:relative;z-index:2;color:var(--ink);-webkit-text-fill-color:var(--ink);-webkit-text-stroke:2px var(--cream);font-family:var(--display);font-size:300px;line-height:.8}
.feature h3{position:relative;z-index:3;width:max-content;min-width:300px;margin:20px auto 0;padding:0 30px}
.feature p{position:relative;z-index:3;max-width:606px;margin:40px auto 0;text-align:center;font-size:40px;line-height:1.1;letter-spacing:-.02em}
.feature--one{text-align:left}
.feature--one h3{margin-left:8%}.feature--one p{margin-left:0;transform:rotate(-4deg)}
.feature--two{text-align:right}.feature--two h3{margin-right:8%}.feature--two p{margin-right:0;transform:rotate(3deg)}
.feature--three{min-height:650px}.feature--three p{max-width:606px;font-size:40px}
@media(min-width:900px){
.features-scroll{position:relative;height:calc(100vh + 1900px)}
.features-stage{position:sticky;top:0;height:100vh;overflow:hidden}
.features-stage .feature-list{position:absolute;inset:0;margin:0;will-change:transform}
.features-stage .feature{position:absolute;top:50%;left:50%;z-index:1;min-height:0;width:76vw;padding:0;margin:-370px 0 0 -38vw;text-align:center;will-change:transform}
.features-stage .feature::before{display:none}
.features-stage .feature h3,.features-stage .feature--one h3,.features-stage .feature--two h3{margin:20px auto 0;transform:none}
.features-stage .feature p,.features-stage .feature--one p,.features-stage .feature--two p,.features-stage .feature--three p{margin:40px auto 0;transform:none;max-width:606px;text-align:center;font-size:40px;line-height:1.1}
.features-stage .feature-number{font-size:300px;color:var(--ink)}
.features-stage .features-line{display:block;position:absolute;left:50%;top:50%;z-index:0;width:120vw;height:260px;margin:-260px 0 0 -60vw;color:rgba(245,228,199,.45)}
.features-stage .garlic-character{position:absolute;left:calc(50% + 210px);top:50%;z-index:0;margin:-290px 0 0 0}
}

@keyframes pack-float{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -12px;rotate:1deg}}

/* 8px each side, which is what production leaves the heading: the word needs
   414 of the 430 a phone gives it. */
.reviews{min-height:1210px;padding:390px 8px 20px;overflow-x:clip;overflow-y:visible}
.reviews .review-viewport{margin-top:36px}
/* The lifted heading overhangs the section above it; its letters were
   swallowing clicks on the pack button underneath. */
.reviews>h2{margin:0;color:var(--ink);-webkit-text-fill-color:var(--ink);-webkit-text-stroke:2px var(--cream);font-family:var(--display);font-size:min(28vw,560px);white-space:nowrap;font-weight:400;line-height:.8;letter-spacing:normal;text-transform:uppercase;pointer-events:none}
.reviews>h2 span{display:inline-block;will-change:transform}
@media(min-width:900px){
.reviews{padding-top:60px}
/* Production sizes this at a flat 28vw — the 190px floor we had turned it
   into two lines on a phone. */
.reviews>h2{font-size:min(28vw,560px);height:auto;padding:40px 0 0;display:flex;justify-content:center;align-items:flex-start}
.reviews .review-track article>div{height:430px}
}
.review-viewport{width:100%;overflow:hidden;margin-top:45px}
.review-track{display:flex;gap:9px;width:max-content;animation:review-scroll 45s linear infinite;cursor:grab;user-select:none;touch-action:pan-y}
.review-track.is-grabbing{cursor:grabbing}
.review-track img{-webkit-user-drag:none}
.review-track:hover{animation-play-state:paused}
.review-track article{width:460px;flex:none}
.review-track h3{font-size:36px}
.review-track article>div{position:relative;isolation:isolate;height:330px;border:1px solid var(--cream);border-radius:10px;padding:35px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#100b06;overflow:hidden}
@keyframes antler-scroll{from{background-position:0 0}to{background-position:95px 0}}
.review-track article>div::before{content:"";animation:antler-scroll 12s linear infinite;position:absolute;inset:0;z-index:-1;background:url("assets/reference/antler-pattern.webp") repeat;background-size:95px 158px;opacity:.1;pointer-events:none}
.review-track article>div>*{position:relative;z-index:1}
.review-track b{font-family:Georgia,serif;font-size:75px;line-height:.6}
.review-track strong{display:block;margin:25px 0 18px;font-family:var(--display);font-size:44px;font-weight:700;line-height:1.1;text-transform:uppercase;-webkit-text-stroke:.5px var(--cream);color:var(--ink);-webkit-text-fill-color:var(--ink)}
.review-track p{margin:0;font-size:calc(20*var(--u));line-height:1.5;font-weight:500}
@keyframes review-scroll{to{transform:translateX(-40%)}}

.site-footer{display:flex;flex-direction:column;gap:20px;margin-top:0;padding:20px 10px 0}
.footer-grid{display:grid;grid-template-columns:15fr 35fr 35fr 15fr;gap:10px;height:230px}
.foot-col{opacity:0;transform:translateY(64px);transition:opacity .5s ease,transform .5s cubic-bezier(.34,1.28,.64,1);transition-delay:calc(var(--foot-i,0)*50ms)}
.footer-grid.is-visible .foot-col{opacity:1;transform:none}
.footer-logo{min-height:225px;box-sizing:border-box;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;padding:32px 48px}.footer-logo img{width:135px;height:165px}
.site-footer nav{display:flex;flex-direction:column}.site-footer nav a{flex:1;display:flex;align-items:center;border-top:1px dashed var(--line);padding:5px;line-height:1.5;font-family:var(--display);font-size:calc(20*var(--u));text-transform:uppercase}
.site-footer nav a:last-child{border-bottom:1px dashed var(--line)}
@media(max-width:899px){.site-footer nav a{padding:10px 8px}}
.foot-play{width:16px;height:16px;background:currentColor;transform:scale(0);transform-origin:left center;transition:transform .3s cubic-bezier(.4,0,.2,1);-webkit-mask:url("assets/reference/play-icon.svg") center/contain no-repeat;mask:url("assets/reference/play-icon.svg") center/contain no-repeat}
.site-footer nav a:hover .foot-play{transform:scale(1)}
.foot-label{display:inline-block;transform:translateX(-16px);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.site-footer nav a:hover .foot-label{transform:translateX(10px)}
.club{display:flex;flex-direction:column}.club h2{margin:0;font-family:var(--display);font-size:calc(36*var(--u));line-height:1;font-weight:400;text-transform:uppercase}.club p{margin:26px 0 0;color:var(--muted)}
.club form{margin-top:auto}
.club form{position:relative;height:auto;display:block}.club input{width:100%;box-sizing:border-box;min-height:80px;border:1px dashed var(--line);border-radius:10px;outline:0;padding:24px 32px;background:transparent;color:var(--cream);font:20px/30px var(--body);transition:background-color .3s cubic-bezier(.4,0,.2,1),border-color .3s cubic-bezier(.4,0,.2,1)}
.club input::placeholder{color:rgba(245,228,199,.5);opacity:1}
.club input:hover,.club input:focus{background:rgba(245,228,199,.05)}
.club input:active{background:rgba(245,228,199,.1)}
.club input:focus{border-color:rgba(245,228,199,.5)}.club form button{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:64px;height:64px;border:1px dashed var(--line);border-radius:50%;background:transparent;color:var(--cream);font-size:25px;cursor:pointer;overflow:hidden;transition:background .3s,color .3s,border-color .3s}
.club form button:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.club form button:disabled,.club input:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.club-success{display:none;margin-top:8px;color:var(--gold);opacity:.6;font:700 14px/20px var(--body);text-transform:uppercase}.club-success.is-visible{display:block}
.social{display:grid;grid-template-rows:1fr 1fr;gap:12px}.social a{position:relative;min-height:107px;border:2px solid var(--cream);border-radius:10px;display:grid;place-items:center;overflow:hidden;color:var(--cream);transition:background .3s,color .3s}
.social a:hover{background:var(--cream);color:var(--ink)}
.social-icon-roll{position:relative;width:26px;height:26px}
.social-icon-roll .action-mask{position:absolute;inset:0;margin:auto;transition:transform .33s cubic-bezier(.4,0,.2,1),opacity .33s cubic-bezier(.4,0,.2,1)}
.social-icon-roll .action-mask:first-child{transform-origin:100% 50%}
.social-icon-roll .action-mask:last-child{transform:translateX(-16px) scale(0);opacity:0;transform-origin:0 50%;transition:transform .38s cubic-bezier(.2,1.6,.5,1) .095s,opacity .2s ease .095s}
.social a:hover .social-icon-roll .action-mask:first-child{transform:translateX(16px) scale(0);opacity:0}
.social a:hover .social-icon-roll .action-mask:last-child{transform:scale(1);opacity:1}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-top:1px dashed var(--line);font-size:16px;line-height:1.5}
.footer-bottom .wd-credit{font-family:inherit}
/* The signature catches like a fuse: each letter flares orange, lifts, and
   settles into ember gold. Releasing the cursor lets it cool right to left. */
.wd-name{display:inline-block;white-space:nowrap}
.wd-ch{display:inline-block;color:var(--cream);will-change:color,transform}

@media(max-width:899px){
  .site-header{align-items:flex-start;padding:5px}
  .mobile-menu{top:5px;right:5px;width:calc(100vw - 10px);height:calc(100dvh - 10px)}
  .mobile-menu nav{padding:96px 5px 5px}
  .mobile-menu nav a{height:72px;font-size:60px;line-height:1;padding:5px 8px}
  .mobile-social a{font-size:16px;height:59px}
  .panel-close{right:5px;top:5px}
  .desktop-nav{display:none}
  .compact-actions{position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none;margin-left:auto}
  .get-sauce,.icon-button{height:50px;border-radius:9px}.get-sauce{min-width:138px;padding:0 20px;font-size:20px}.icon-button{width:52px}.menu-button{width:70px}
  .site-header.is-compact .compact-actions{transform:none}
  .hero{min-height:970px;padding-top:101px}
  .hero-title--desktop{display:none}.hero-title--mobile{display:block}
  .hero-title{font-size:clamp(45px,10.8vw,72px);line-height:.9;letter-spacing:-.01em}
  .hero-meta{top:346px}.hero-meta>span{display:none}.hero-meta strong{margin:0 auto;font-size:14px;letter-spacing:.08em;text-align:center}.hero-meta strong .meta-roll{display:inline-flex}
  .hero-product{top:385px;width:390px;height:400px}.hero-disc{top:120px;width:161px;height:161px}.hero-bottle{top:0;height:365px}
  .hero-character-wrap{top:194px;width:122px;height:115px;transform:translateX(-177px) rotate(-8deg)}
  .hero-fruit{top:93px;width:105px;height:105px;transform:translateX(64px) rotate(5deg)}
  .hero-controls{top:570px;padding:0 16px}.hero-controls button{width:62px;height:62px;margin-top:-31px;font-size:23px}
  .hero-cta-row{top:auto;bottom:48px}.primary-cta{width:300px;padding:18px;font-size:21px}
  .natural-section{min-height:520px;padding:100px 20px}.natural-section p{font-size:clamp(28px,7.2vw,55px)}.natural-row{white-space:normal}
  .desktop-only{display:none}
  .benefit-card p{font-size:18px}
  .food-cherry{left:-3%;width:110px}.food-habanero{right:-8%;width:130px}.food-tomato{left:-12%}.food-garlic{right:-16%}
  .product-grid{grid-template-columns:1fr;margin-top:30px}.product-card{height:680px}.product-card--habanero,.product-card--cherry{margin-top:0}.product-card h3{font-size:46px}.products{height:auto;padding:120px 10px 100px}
  .why{padding-top:60px}  .why-copy{font-size:20px}.feature{min-height:720px;padding:0 20px}.feature-number{font-size:240px}.feature p{font-size:31px}.feature h3{font-size:27px}.feature--one,.feature--two{text-align:center}.feature--one h3,.feature--two h3,.feature--one p,.feature--two p{margin-left:auto;margin-right:auto}
  .reviews{min-height:0;padding-top:140px}.review-track article{width:340px}.review-track h3{font-size:26px}.review-track article>div{height:330px}.review-track strong{font-size:26px}
  .footer-grid{grid-template-columns:1fr 1fr;height:auto}.footer-logo{min-height:240px}/* production puts the socials beside the logo and drops the nav to its own
     full-width row underneath */
  .social{order:1}
  .site-footer nav{order:2;grid-column:1/-1}
  .club{grid-column:1/-1;order:3}.club h2{font-size:32px}.footer-bottom{font-size:14px;gap:20px}
}

@media(max-width:520px){
  .get-sauce{min-width:134px}.cart-button{width:50px}.menu-button{width:70px}
  .hero-title{font-size:42px}.hero-title .outlined{-webkit-text-stroke:1.3px var(--cream)}
  .hero{min-height:930px}.hero-meta{top:342px}.hero-product{top:392px}.hero-controls{top:570px}.hero-cta-row{bottom:42px}
  .natural-section{padding-left:12px;padding-right:12px}.natural-section p{font-size:35px}
  .benefit-card>div{padding:35px 20px}.benefit-card p{font-size:17px}
  .product-card{height:640px}.product-card h3{font-size:42px}.product-actions a{display:none}
  .feature-number{font-size:210px}.feature p{font-size:27px}.feature h3{min-width:270px}

  .review-track article{width:320px}
  .footer-grid{display:grid;grid-template-columns:1fr 1fr}.footer-logo img{width:115px}.site-footer nav a{font-size:18px}.social a{min-height:112px}.footer-bottom{flex-direction:column}
  .loader-food--one{left:14%}.loader-food--two{right:7%}.loader-food--three{left:6%}.loader-food--four{right:10%}
}

/* Interior routes */
.subpage-body{background:var(--ink)}
.subpage-header{opacity:0;translate:0 -200px;animation:header-drop .75s cubic-bezier(.22,1,.36,1) .1s forwards}
@keyframes header-drop{to{opacity:1;translate:0 0}}
.desktop-nav a.is-current{opacity:.5}
.subpage-header--product .desktop-nav{opacity:0;visibility:hidden;pointer-events:none}
.subpage-header--product .compact-actions{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.subpage-header--product .get-sauce,.subpage-header--shop .get-sauce{display:none}
.subpage-header--product .brand{width:144px;height:57px;margin:3px 0 0 8px}
.subpage-header--product .brand img{transform:translateY(-26.1%)}
.subpage-header--product .brand-full{opacity:0}
.subpage-header--product .brand img.brand-horn--right{transform:translateY(-26.1%) translateX(-20.34%)}
.subpage-main{padding-top:90px}
.page-hero{position:relative;min-height:760px;padding:100px 7vw 70px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.page-hero--center{align-items:center;text-align:center}
.page-title{position:relative;z-index:2;max-width:1150px;margin:0;font-family:var(--display);font-size:clamp(76px,10vw,150px);font-weight:400;line-height:.84;letter-spacing:-.025em;text-transform:uppercase}
.page-title .outlined{color:transparent;-webkit-text-stroke:2px var(--cream)}
.page-lede{position:relative;z-index:2;max-width:650px;margin:35px 0 0;font-size:26px;line-height:1.25}
.page-food{position:absolute;width:260px;filter:drop-shadow(0 20px 20px rgba(0,0,0,.3))}.page-food--left{left:2%;bottom:4%;transform:rotate(-12deg)}.page-food--right{right:3%;top:15%;transform:rotate(10deg)}
.route-products{height:auto;padding-top:80px;padding-bottom:150px}
.route-products .product-grid{margin-top:0}
.claims-strip{padding:100px 5vw 140px;text-align:center}.claims-strip h2{margin:0 0 60px;font-family:var(--display);font-size:70px;font-weight:400;text-transform:uppercase}.claims-strip>p{max-width:900px;margin:0 auto 70px;font-size:30px}
.claims-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.claim{min-height:235px;border:1px dashed var(--line);border-radius:11px;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;font-family:var(--display);font-size:27px;text-transform:uppercase}.claim img{width:90px;height:90px}
.pairings{max-width:1100px;margin:0 auto;padding:70px 25px 150px;text-align:center}.pairings h2{font:60px/1 var(--display);text-transform:uppercase}.pairings p{font-size:34px;line-height:1.2}
.split-story{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:860px;padding:10px}.split-story figure{margin:0;border-radius:11px;overflow:hidden}.split-story figure img{width:100%;height:100%;object-fit:cover}.story-copy{border:1px dashed var(--line);border-radius:11px;padding:8vw 6vw;display:flex;flex-direction:column;justify-content:center}.story-copy h2{margin:0;font:clamp(60px,7vw,100px)/.88 var(--display);text-transform:uppercase}.story-copy h3{margin:35px 0 8px;font:38px/1 var(--display);text-transform:uppercase}.story-copy p{font-size:23px;line-height:1.35}
.bullet-section{padding:100px 6vw}.bullet-section>h1,.bullet-section>h2{max-width:1100px;margin:0 auto 90px;text-align:center;font:clamp(72px,9vw,135px)/.88 var(--display);text-transform:uppercase}.bullet-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.bullet-panel{border:1px dashed var(--line);border-radius:11px;padding:50px}.bullet-panel h2{margin:0 0 35px;font:54px/.95 var(--display);text-transform:uppercase}.bullet-panel li{margin:18px 0;font-size:22px}
.form-section{padding:140px 6vw}.form-section h2{margin:0 0 60px;text-align:center;font:clamp(80px,10vw,145px)/.85 var(--display);text-transform:uppercase}.brand-form{max-width:850px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:12px}.brand-form label{display:flex;flex-direction:column;gap:8px;text-transform:uppercase}.brand-form label.full{grid-column:1/-1}.brand-form input,.brand-form select,.brand-form textarea{width:100%;border:1px dashed var(--line);border-radius:9px;padding:20px;background:transparent;color:var(--cream);outline:0}.brand-form textarea{min-height:160px}.brand-form button{grid-column:1/-1;padding:20px;border-radius:9px;background:var(--cream);color:var(--ink);font-family:var(--display);font-size:24px;text-transform:uppercase;cursor:pointer}
.faq-page{max-width:1200px;margin:0 auto;padding:120px 25px 170px}.faq-page>h1{margin:0 0 100px;font:clamp(90px,12vw,175px)/.82 var(--display);text-transform:uppercase}.faq-item{border-top:1px dashed var(--line)}.faq-item:last-child{border-bottom:1px dashed var(--line)}.faq-item button{width:100%;padding:32px 0;display:flex;justify-content:space-between;background:transparent;color:var(--cream);text-align:left;font:36px/1 var(--display);text-transform:uppercase;cursor:pointer}.faq-item button::after{content:"+"}.faq-item.is-open button::after{content:"−"}.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s}.faq-answer p{max-width:800px;margin:0;padding:0 0 35px;font-size:23px}.faq-item.is-open .faq-answer{max-height:300px}
.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;max-width:1200px;margin:0 auto;padding:130px 30px 180px}.contact-layout h1{margin:0;font:clamp(100px,12vw,180px)/.8 var(--display);text-transform:uppercase}.contact-details{margin-top:50px;font-size:28px}.contact-layout .brand-form{grid-template-columns:1fr}
.product-detail{min-height:920px;padding:120px 5vw 80px;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}.detail-gallery{position:relative;height:760px;border-radius:12px;background:var(--gold);display:grid;place-items:center}.detail-gallery>img{height:680px;width:auto;filter:drop-shadow(0 25px 20px rgba(0,0,0,.25))}.detail-friend{position:absolute!important;right:5%;bottom:15%;height:auto!important;width:180px!important}.detail-info h1{margin:0;font:clamp(70px,7.5vw,115px)/.84 var(--display);text-transform:uppercase}.detail-info>p{font-size:29px}.detail-info h2{margin:45px 0 10px;font:32px/1 var(--display);text-transform:uppercase}.detail-info ul{padding-left:20px;font-size:20px}.detail-buy{display:grid;grid-template-columns:120px 1fr;gap:10px;margin-top:35px}.detail-buy select,.detail-buy button{height:62px;border:1px solid var(--cream);border-radius:9px;background:transparent;color:var(--cream);padding:0 18px}.detail-buy button{background:var(--cream);color:var(--ink);font:20px var(--display);text-transform:uppercase;cursor:pointer}
.subpage-footer{margin-top:0}
.faq-page>h1{overflow-wrap:anywhere}.faq-page>h1 .outlined{color:transparent;-webkit-text-stroke:2px var(--cream)}

@media(max-width:899px){
  .subpage-main{padding-top:60px}.page-hero{min-height:660px;padding:90px 20px 60px}.page-title{font-size:72px}.page-lede{font-size:22px}.page-food{width:150px;opacity:.7}
  .route-products{padding-top:50px}.claims-row{grid-template-columns:1fr 1fr}.claims-strip h2{font-size:55px}.claims-strip>p,.pairings p{font-size:25px}
  .split-story{grid-template-columns:1fr;min-height:0}.split-story figure{height:600px}.story-copy{padding:80px 25px}.bullet-grid{grid-template-columns:1fr}.bullet-panel{padding:35px}.bullet-section{padding:80px 15px}
  .contact-layout{grid-template-columns:1fr;padding:110px 20px}.product-detail{grid-template-columns:1fr;padding:90px 15px}.detail-gallery{height:650px}.detail-gallery>img{height:580px}
  .faq-page{padding-left:15px;padding-right:15px}.faq-page>h1{font-size:75px}
  .brand-form{grid-template-columns:1fr}.brand-form label.full,.brand-form button{grid-column:1}.faq-item button{font-size:28px}
}

@media(max-width:520px){
  .page-title{font-size:56px}.page-hero{min-height:580px}.claims-row{grid-template-columns:1fr}.claim{min-height:190px}.split-story figure{height:420px}.story-copy h2{font-size:56px}.story-copy p{font-size:19px}.bullet-section>h1,.bullet-section>h2{font-size:60px}.bullet-panel h2{font-size:42px}.form-section{padding:90px 15px}.form-section h2{font-size:65px}.contact-layout h1{font-size:100px}.product-detail{padding-top:70px}.detail-gallery{height:500px}.detail-gallery>img{height:455px}.detail-info h1{font-size:65px}.detail-info>p{font-size:23px}.detail-buy{grid-template-columns:90px 1fr}
  .faq-page>h1{font-size:58px}
}
/* Below lg production stops scaling type with the viewport and pins fixed px. */
@media(max-width:1023px){
  .hero-title{font-size:52px;line-height:.88;letter-spacing:-.02em}
  /* the three rows are a desktop break; production wraps this line by itself,
     which is why it needs two lines at 768 where ours forced three */
  .hero-title--mobile .hero-row{display:inline}
  /* production sizes this block to its text — 170px at 430 — and spaces it
     with a top margin. Ours held a 520px floor plus 100px of padding, so a
     third of the block was empty. */
  .natural-section{min-height:0;padding:0 5px;margin-top:120px}
  .natural-section p{font-size:32px;line-height:1}
  .natural-row{display:inline}

  .section-display>span:not(.weapon-ornament){font-size:70px}
  .weapon-ornament{margin-bottom:60px}
  .product-card h3{font-size:40px;line-height:.88}
  .product-card p{font-size:18px;line-height:1.25}
  .feature p{font-size:28px;line-height:1.1}
  .feature-number{font-size:150px}
  
  .review-track strong{font-size:28px}
  /* production serves one cream pill for all three of these — the benefit
     labels, the review headers and the feature headers — at 30px in a 60-64px
     box with a 12px dot. Ours ran 25 to 28px in a 70-80px box. */
  .benefit-card h2{height:60px;font-size:30px;padding:0 24px}
  /* production pins this deck on a phone exactly like it does on a desktop:
     the stage sticks, each header lands 60px under the previous one and the
     bodies slide underneath. Ours had unpinned it into four cards spread down
     2100px. Card one stays in flow so the stack takes its height; the runway
     below is what the scroll drives. */
  /* the runway has to be real height, not padding: a sticky child only travels
     inside its parent's content box. Production's card is 82vw wide capped at
     632 with a body 1.111 times that wide, which lands the same 760px card it
     shows at 768. */
  .benefits{height:auto;min-height:calc(327px + min(82vw,632px)*1.111 + 1340px);padding:0}
  .benefit-stage{position:sticky;top:0;height:auto;overflow:hidden;padding:0 10px}
  .benefit-foods{position:absolute;height:calc(100% - 200px)}
  .benefit-foods-pin{position:sticky;top:0;height:auto}
  .benefit-stack{width:min(82vw,632px);height:auto;padding-bottom:267px;margin:0 auto}
  .benefit-card{position:absolute;top:87px;width:100%;transform:none}
  .benefit-card--one{position:relative}
  .benefit-card>div{height:auto;aspect-ratio:1/1.111}
  .review-track h3,.feature h3{height:64px;font-size:30px;padding:0 24px}
  .benefit-card h2 i,.review-track h3 i,.feature h3 i{width:12px;height:12px}
  /* the pack carousel kept its desktop 26px on a phone; production reads 18 */
  .sh-pack-add{font-size:18px;line-height:1.5}
  /* the footer ran 59px short of production's 818: a tighter column gap, a
     taller logo row, no air over the signup field and a legal bar that
     collapsed onto one line at 768 */
  .site-footer{gap:32px}
  .footer-logo{min-height:214px}
  .social a{min-height:101px}
  .club h2{font-size:30px;line-height:1}
  .club p{margin-top:32px}
  .club form{margin-top:40px}
  .club input{min-height:77px}
  .footer-bottom{flex-direction:column;gap:32px;font-size:16px}
}

/* Production keeps the roomier mark until Tailwind's lg breakpoint at 1024px;
   ours switched at 900, so every window between the two got the tighter desktop
   slit and the antlers lost their lower curve. */
@media(max-width:1023px){
  .brand,.site-header.is-compact .brand,.subpage-header--product .brand{width:118px;height:50px;margin:0}
  .brand img,.site-header.is-compact .brand img,.subpage-header--product .brand img{transform:translateY(-26.1%)}
  .brand-full,.site-header.is-compact .brand-full,.subpage-header--product .brand-full{opacity:0}
  .brand img.brand-horn--right,.site-header.is-compact .brand img.brand-horn--right,.subpage-header--product .brand img.brand-horn--right{transform:translateY(-26.1%) translateX(-20.34%)}
}

/* ---- Buy a pack: one carousel shared by the home and the shop ---- */
.sh-par{position:absolute;left:0;right:0;top:0;height:120%;will-change:transform}
.sh-par>img{width:100%;height:100%;object-fit:cover}
.sh-pack{margin:152px 10px 0;display:grid;grid-template-columns:1fr 1fr;gap:10px;height:100dvh;min-height:880px}
.sh-pack-photo{position:relative;border-radius:10px;overflow:hidden}
.sh-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateX(100%);transition:opacity .1s ease,transform .9s cubic-bezier(.65,.05,.36,1)}
.sh-photo-img.sh-cur{opacity:1;transform:none}
.sh-pack-panel{position:relative;border-radius:10px;background:rgb(39,33,25);padding:32px;display:flex;flex-direction:column}
.sh-pack-panel::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(245,228,199,.3);border-radius:10px;pointer-events:none}
.sh-pack-head{text-align:center;text-transform:uppercase}
.sh-pack-head h2{margin:0;font-family:var(--display);font-size:80px;font-weight:400;line-height:1}
.sh-pack-head h3{margin:0;font-family:var(--display);font-size:30px;font-weight:400;line-height:1}
.sh-pack-toggle{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:40px}
.sh-toggle{position:relative;width:112px;height:64px;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:0;color:var(--cream);font-family:var(--body);font-size:20px;line-height:1.5;text-transform:uppercase;cursor:pointer;opacity:.6;transition:opacity .3s}
.sh-toggle.is-active{opacity:1}
.sh-toggle-ell{position:absolute;inset:0;color:var(--cream);transform:scale(0);transition:transform .3s;pointer-events:none}
.sh-toggle.is-active .sh-toggle-ell{transform:scale(1)}
.sh-toggle-ell svg{display:block;width:100%;height:100%}
.sh-carousel{position:relative;margin-top:auto;height:50%}
.sh-carousel-frame{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden}
.sh-slide{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:20px;color:var(--cream);transition:transform .5s cubic-bezier(.65,.05,.36,1);will-change:transform}
.sh-slide--gold{background:#be8d3f}
.sh-slide--orange{background:#f15726}
.sh-slide h4{position:relative;z-index:2;margin:0 auto;max-width:620px;padding:0 20px;font-family:var(--display);font-size:50px;font-weight:400;line-height:1;text-align:center;text-transform:uppercase}
.sh-slide-packs{position:absolute;left:50%;bottom:-40px;width:50%;height:360px;transform:translateX(-50%)}
.sh-slide-packs{overflow:hidden}
.sh-slide-packs img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(20%);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.sh-slide-packs img.sh-cur{opacity:1;transform:none}
.sh-pack-char{position:absolute;top:15px;right:7px;z-index:10;width:186px;height:186px;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.sh-carousel:hover .sh-slide.sh-cur .sh-pack-char{transform:scale(1);transition-delay:.25s}
.sh-pack-char .food-face{position:absolute;inset:0;width:100%;height:100%}
.sh-pack-add{position:relative;z-index:3;transform:translateY(129.6px);display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:300px;height:72px;padding:0 40px;border:2px solid var(--cream);border-radius:12px;background:var(--cream);color:var(--ink);font-family:var(--display);font-size:26px;line-height:1;text-transform:uppercase;cursor:pointer;opacity:1;transition:transform .45s cubic-bezier(.22,1,.36,1),background .3s,color .3s}
.sh-carousel:hover .sh-pack-add{transform:none}
.sh-pack-add:hover{background:var(--ink);color:var(--cream)}
.sh-arrow{position:absolute;z-index:5;top:50%;width:80px;height:80px;margin-top:-40px;padding:0;border:2px solid var(--cream);border-radius:50%;background:var(--cream);color:var(--ink);display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:transform .25s,background .3s,color .3s}
.sh-arrow--prev{left:-10px}
.sh-arrow--next{right:-10px}
.sh-arrow::before{content:"";position:absolute;inset:0;border-radius:50%;background:transparent;transition:transform .3s,background .3s;z-index:-1}
.sh-arrow:hover::before{transform:scale(1.1);background:var(--ink)}
.sh-arrow:hover{color:var(--cream)}
.sh-arrow svg{display:block}
.sh-arrow--prev svg{transform:scaleX(-1)}
@media(max-width:899px){
  .sh-pack{grid-template-columns:1fr;height:auto;min-height:0;margin-top:100px}
  .sh-pack-photo{order:2;height:50vh}
  .sh-pack-panel{padding:20px}
  .sh-pack-head h2{font-size:56px}
  .sh-carousel{margin-top:40px;height:55vh}
  .sh-pack-add{opacity:1;transform:none}
  .sh-arrow{width:60px;height:60px;margin-top:-30px}
  .sh-pack-char{width:128px;height:128px}
  .sh-slide h4{font-size:36px}
}

/* The brand's own links go nowhere here, but they still have to feel like
   the links they are in the reference. */
.social a:not([href]),.mobile-social a:not([href]),.cart-checkout a:not([href]){cursor:pointer}

/* ---- Product card art: bottle, two cuts of the ingredient, antlers ---- */
.product-art{position:absolute;z-index:2;left:0;right:0;top:257px;height:408px;display:flex;justify-content:center;pointer-events:none}
.product-bottle{position:relative;z-index:2;height:408px;width:auto;filter:drop-shadow(0 20px 18px rgba(0,0,0,.28));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.product-card:hover .product-bottle{transform:translateY(-32px) scale(.92)}
/* our description keeps its space at rest (opacity 0, still in flow) where
   production's is absolute, so the bottle sat 44px lower than theirs. With the
   card at 684 that ate the room under it: theirs leaves 52px, ours left 8. */
@media(min-width:1024px){
  .product-bottle{margin-top:-44px}
}
/* production runs a 658px card below 1024 — ours had 680 and 640 at its own
   two steps — and lands the bottle 52px off the bottom at every width */
@media(max-width:1023px){
  .product-card{height:658px}
  .product-bottle{margin-top:-70px}
}
/* Two antlers, each filling its own 116x122 box the way production draws
   them — one mask holding both plus the gap between renders them tiny. */
.product-horn{position:absolute;z-index:1;width:116px;height:122px;background:var(--cream);opacity:0;transform:translateY(40px) scale(.6);transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}
.product-horn--left{left:157px;top:230px;-webkit-mask:url("assets/reference/horn-left.svg") center/contain no-repeat;mask:url("assets/reference/horn-left.svg") center/contain no-repeat}
.product-horn--right{left:340px;top:239px;-webkit-mask:url("assets/reference/horn-right.svg") center/contain no-repeat;mask:url("assets/reference/horn-right.svg") center/contain no-repeat}
.product-card:hover .product-horn{opacity:1;transform:none}
.product-fruit{position:absolute;width:119px;height:119px;object-fit:contain;opacity:0;transform-origin:50% 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.product-fruit--front{z-index:3;top:154px;left:25.3%;transform:rotate(10deg) scale(.7)}
.product-fruit--back{z-index:1;width:101px;height:101px;top:121px;left:59.9%;transform:rotate(-10deg) scale(.7)}
.product-card:hover .product-fruit{opacity:1}
.product-card:hover .product-fruit--front{transform:rotate(-8deg) scale(1)}
.product-card:hover .product-fruit--back{transform:rotate(8deg) scale(1)}

/* ---- Reasons below 1024: one at a time with arrows, as production does ---- */
.feature-arrow{display:none}
@media(max-width:1023px){
  .features-scroll{height:auto}
  .features-stage{position:static;height:auto;overflow:visible}
  .features-stage .feature-list{position:relative;inset:auto;margin:70px 0 0;min-height:620px}
  .features-stage .feature{position:absolute;left:0;top:0;width:100%;margin:0;padding:0 56px;min-height:0;opacity:0;visibility:hidden;transition:opacity .35s ease;text-align:center}
  .features-stage .feature.is-cur{position:relative;opacity:1;visibility:visible}
  .features-stage .features-line,.features-stage .garlic-character{display:none}
  .features-stage .feature-number{font-size:150px}
  /* the tilts belong to the desktop layout; production keeps this straight */
  .features-stage .feature p,.features-stage .feature--one p,.features-stage .feature--two p,.features-stage .feature--three p{transform:none;margin:32px auto 0;max-width:none;text-align:center}
  .features-stage .feature h3{margin:20px auto 0;transform:none}
  /* the divider bleeds past both edges on purpose; clip it here so the bleed
     stays out of the document's scroll width the way production's does */
  .features-scroll{overflow-x:clip}
  .features-stage .feature::before{display:block;left:-56px;right:-56px;top:auto;bottom:-24px;transform:none}
  .feature-arrow{position:absolute;z-index:3;top:96px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--cream);cursor:pointer;transition:background .3s,color .3s}
  .feature-arrow:hover{background:var(--cream);color:var(--ink)}
  .feature-arrow svg{width:20px;height:20px;display:block}
  .feature-arrow--prev{left:6px}
  .feature-arrow--next{right:6px}
}

/* The pack carousel is declared after the responsive blocks above, so its
   desktop type won the cascade there. Production reads 18px on the button and
   the price below 1024. */
@media(max-width:1023px){
  .sh-pack-add,.sh-pack-price{font-size:18px;line-height:1.5}
}