@font-face{font-family:Brandon;src:url('assets/fonts/brandon-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Brandon;src:url('assets/fonts/brandon-medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Brandon;src:url('assets/fonts/brandon-bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Brandon;src:url('assets/fonts/brandon-black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:SundayWalk;src:url('assets/fonts/sunday-walk.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Comfortaa;src:url('assets/fonts/comfortaa-regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Quicksand;src:url('assets/fonts/quicksand-bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}

:root{--gold:#cc9952;--gold-dark:#916736;--ink:#292622;--header-height:64px;--experience-height:min(163cqi,calc(100svh - var(--header-height)),1402px);--ease:cubic-bezier(.22,.68,0,1.01);color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 20px)}
body{margin:0;padding-top:var(--header-height);background:#fff;color:var(--ink);font-family:Brandon,Arial,sans-serif;font-size:20px;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
[hidden]{display:none!important}
button:focus-visible,a:focus-visible{outline:2px solid var(--gold-dark);outline-offset:6px}
main{margin-inline:auto;container-type:inline-size}
main:focus,h1:focus,h2:focus,.scene:focus{outline:none}
.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}
.skip-link{position:fixed;top:-100px;left:16px;z-index:200;background:white;padding:12px 20px;box-shadow:0 4px 12px #0002}
.skip-link:focus{top:8px}

.site-header{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;height:var(--header-height);z-index:100;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.brand{display:block;width:180px;line-height:0}
.brand img{width:100%;height:auto}
.menu-toggle{width:44px;height:44px;border:0;background:none;padding:12px 7px;display:flex;align-items:center;justify-content:center}
.menu-toggle img{width:25px;height:auto}
.menu-toggle[aria-expanded=true]{background:#f7eee3;border-radius:50%}
.site-menu{position:absolute;right:clamp(20px,4vw,64px);top:calc(100% + 10px);width:min(330px,calc(100vw - 40px));padding:18px 24px;background:#fff;box-shadow:0 12px 45px #61432220;border:1px solid #cda16b40}
.site-menu a{display:block;padding:13px 0;border-bottom:1px solid #cda16b2c;font-size:19px}
.site-menu a:last-child{border-bottom:0}
.site-menu a:hover{color:var(--gold-dark)}

.experience{position:relative;height:var(--experience-height);overflow:hidden;background:radial-gradient(ellipse at 28% 40%,#fffdf8 0,#f4e5d2 43%,#e6c79f 100%);isolation:isolate}
.ambient-light{display:none;position:absolute;inset:0;z-index:-1;overflow:hidden;opacity:.7}
.ambient-light span{position:absolute;left:-20%;top:8%;width:160%;height:18%;background:linear-gradient(180deg,#fff0,#fffc 35%,#fffb 65%,#fff0);transform:rotate(30deg);filter:blur(15px)}
.ambient-light span:nth-child(2){top:35%;height:10%;opacity:.8}
.ambient-light span:nth-child(3){top:56%;height:4%;opacity:.6}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .65s ease,visibility .65s;overflow:hidden}
.scene.is-active{opacity:1;visibility:visible;pointer-events:auto}
.portrait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(100vw,calc(var(--experience-height) * .616438),560px);aspect-ratio:2160 / 3504;max-height:100%;isolation:isolate}
#bottle-portrait{width:min(100vw,calc(var(--experience-height) * .556757904),560px);aspect-ratio:2624 / 4713}
.hero-background,.hero-background-image{position:absolute;inset:0;width:100%;height:100%}
/* Full-bleed artwork; the bottle rig keeps its original native coordinates. */
#scene-bottle{background:url('assets/images/hero-background-1280.webp') center / cover no-repeat}
.hero-background{visibility:hidden}
.hero-background-image{object-fit:cover;background:#fff;user-select:none;-webkit-user-drag:none;pointer-events:none}
.dropper-layer,.dropper-motion,.bottle-foreground{position:absolute;inset:0;width:100%;height:100%}
/* Native coordinates follow the 2624 × 4713 opening-flow reference. */
.dropper-motion{transform:translate3d(0,calc((1 - var(--lift,0)) * 30.447697857%),0);transform-origin:55.259146341% 18.077657543%;will-change:transform;isolation:isolate}
.bottle-foreground{z-index:2;pointer-events:none}
.dropper-layer{z-index:3;pointer-events:none;mask:url(#dropper-visibility);-webkit-mask:url(#dropper-visibility)}
.bottle-mask-defs{position:absolute;pointer-events:none}
.bottle-body-image,.dropper-closed-image{position:absolute;pointer-events:none;user-select:none;-webkit-user-drag:none}
.bottle-body-image{left:41.349085366%;top:38.404413325%;width:31.021341463%;height:39.889666879%}
.dropper-closed-image{left:41.692073171%;top:-1.082113304%;width:25.876524390%;height:19.371949926%}
.dropper-canvas{position:absolute;left:41.692073171%;top:-1.082113304%;width:25.876524390%;height:40.929344367%;opacity:0;pointer-events:none}
.portrait[data-cap-ready] .dropper-canvas{opacity:1}
.portrait[data-cap-ready] .dropper-closed-image{visibility:hidden}
.dropper-tip{position:absolute;left:53.582317073%;top:38.956078931%;width:1px;height:1px;pointer-events:none}
.instruction{position:absolute;top:calc(50% - var(--experience-height) * .42 - var(--lift,0) * 5.2%);left:4%;right:4%;margin:0;text-align:center;font-weight:900;font-size:clamp(17px,3.7vw,24px);letter-spacing:0;text-transform:uppercase;line-height:1.35;z-index:2;transition:opacity .25s}
.cap-control{position:absolute;left:55.030487805%;top:.827498409%;width:27.439024390%;height:19.371949926%;transform:translateX(-50%);background:none;border:0;padding:0;border-radius:36%;touch-action:none;cursor:grab;z-index:3;user-select:none;pointer-events:auto}
.cap-control:active,body[data-state=dragging] .cap-control{cursor:grabbing}
body[data-state=open] .cap-control{cursor:pointer}
body[data-state=open] .instruction,body[data-state=dispensing] .instruction{left:4%;right:4%;top:calc(50% - var(--experience-height) * .42);text-align:center;font-size:clamp(17px,3.7vw,24px)}
.cap-outline{position:absolute;inset:5% 2%;border:1px solid #cda16b00;border-radius:40%;transition:border-color .25s,box-shadow .25s}
.cap-control:focus-visible .cap-outline{border-color:#cda16b90;box-shadow:0 0 0 5px #fff2}
body[data-state=dragging] .instruction,body[data-state=opening] .instruction{opacity:calc(1 - var(--lift,0) * 3)}
.cap-control:disabled,.cap-control[aria-disabled=true]{pointer-events:none}
.gesture-cue{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:23px;height:38px;opacity:.75;animation:drag-cue 1.8s ease-in-out infinite}
.gesture-cue svg{width:100%;height:100%;fill:none;stroke:var(--gold-dark);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
body[data-state=dragging] .gesture-cue,body[data-state=opening] .gesture-cue,body[data-state=dispensing] .gesture-cue{opacity:0;animation:none}
body[data-state=open] .gesture-cue{animation:tap-cue 1.8s ease-in-out infinite;width:10px;height:10px;bottom:auto;left:112%;top:40%;border:1px solid var(--gold-dark);border-radius:50%}
body[data-state=open] .gesture-cue svg{display:none}

.scene--ingredients{background:url('assets/images/ingredients-background-1280.webp') center / cover no-repeat}
.ingredients-background{visibility:hidden;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.nutrient-drop{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:46%;height:auto;filter:drop-shadow(0 16px 20px #92632e14)}
.ingredient-label{position:absolute;color:white;text-align:center;font-family:Comfortaa,Arial,sans-serif;font-weight:400;font-size:clamp(15px,4.3vw,26px);line-height:1.15;margin:0;z-index:2}
.ingredient-label strong,.ingredient-label span{display:block}
.ingredient-label strong{font-family:Quicksand,Arial,sans-serif;font-size:1.25em;font-weight:700;margin:8px 0}
.ingredient-label--left{left:5%;top:35%;width:34%}
.ingredient-label--right{right:4%;top:49%;width:30%}
.ingredient-label--right span{font-family:Quicksand,Arial,sans-serif;font-size:1.25em;margin-top:6px;font-weight:700}

.scene--baby{background:linear-gradient(110deg,#fff,#ead7b5 38%,#d6b075)}
.baby-window{position:absolute;inset:0;background:image-set(url('assets/images/window-background-768.webp') 1x,url('assets/images/window-background-1280.webp') 2x) center top / cover no-repeat}
.baby-art{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);width:min(74vw,calc(var(--experience-height) * .456164),520px);aspect-ratio:1430 / 2250;isolation:isolate}
.baby-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1s ease;user-select:none;-webkit-user-drag:none;mask-image:linear-gradient(180deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
.baby-photo.is-current{opacity:1}
.more-button{position:absolute;top:8%;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;text-align:center;z-index:3}
.more-button{border:0;background:transparent;padding:8px 4px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(16px,3.7vw,22px);opacity:0;visibility:hidden;transition:opacity .6s,border-color .2s,visibility .6s}
.more-button:hover{border-color:var(--gold-dark)}
body[data-state=grown] .more-button{opacity:1;visibility:visible}
.baby-ripple{position:absolute;left:36.8%;top:78.65%;width:36px;height:36px;border:1px solid var(--gold);border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.baby-drop{position:absolute;width:28px;height:auto;z-index:4;pointer-events:none;will-change:transform,opacity}
.baby-message{position:absolute;left:12px;right:12px;bottom:3%;pointer-events:none}
.baby-message img{width:min(72%,360px);height:auto;margin-inline:auto}
.liquid-drop{position:absolute;left:0;top:0;width:28px;aspect-ratio:1280 / 2300;transform-origin:center center;pointer-events:none;z-index:80;will-change:transform,opacity;filter:drop-shadow(0 4px 6px #a27d4540)}
.liquid-drop img{display:block;width:100%;height:100%}

.product-information{margin-inline:auto;container-type:inline-size}
.information-anchor{height:0}
.section-wrap{width:84%;margin-inline:auto}
.berlin-copy{text-align:center;padding-block:16% 13%}
.berlin-copy h2{font-size:5.6cqi;line-height:1.2;font-weight:700;color:var(--gold);margin:0 0 7%}
.berlin-copy p{font-size:max(14px,3.4cqi);line-height:1.65;margin:0 0 5%}
.berlin-copy p:last-child{margin-bottom:0}
.berlin-copy strong{font-weight:700;color:var(--gold)}
.berlin-collage{width:100%;margin:0}
.berlin-collage img{width:100%;height:auto}
.values{display:grid;grid-template-columns:1fr 1fr;width:82%;padding-block:14% 16%}
.value{padding:6% 3%;text-align:center}
.value:nth-child(odd){border-right:1px dashed #cda16b70}
.value:nth-child(-n+2){border-bottom:1px dashed #cda16b70;padding-bottom:16%}
.value:nth-child(n+3){padding-top:14%}
.value:last-child h3{font-size:3.2cqi}
.value h3{font-size:3.45cqi;line-height:1.4;text-transform:uppercase;font-weight:700;margin:0 0 11%;white-space:nowrap}
.value h3 span{display:block;font-weight:400;color:var(--gold)}
.value-icon{width:6.1cqi;height:6.1cqi;margin:0 auto 3%}
.value p{font-size:2.55cqi;line-height:1.45;color:#3b3937;margin:0;min-height:7.4cqi}
.certification-row{display:flex;justify-content:center;gap:4%}
.certification-row>div{flex:1;min-width:0}
.organic-icons{height:6.1cqi;display:flex;align-items:center;justify-content:center;gap:3%;margin-bottom:3%}
.organic-icons img{width:5.8cqi;max-height:6.1cqi}
.philosophy{position:relative;width:100%;aspect-ratio:2147 / 3080;overflow:hidden}
.philosophy>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.philosophy-copy{position:absolute;right:8.5%;bottom:0;width:43.5%;height:68%;padding:3.5% 5.5%;background:#c79b61cf;color:white}
.philosophy h2{font-size:6.5cqi;font-weight:500;line-height:1.5;margin:0 0 13%;white-space:nowrap}
.philosophy p{font-size:3.55cqi;line-height:1.53;margin:0}
.site-footer{padding:32px 8%;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:auto}
.site-footer>img{width:145px;height:auto}
.text-link{display:inline-flex;align-items:center;gap:12px;background:none;border:0;border-bottom:1px solid #cda16b70;padding:8px 0;color:var(--gold-dark);font-size:16px}
.text-link:hover{border-color:var(--gold-dark)}
.text-link span{font-family:Arial,sans-serif}
.no-script-note{margin:25px;text-align:center;font-size:18px}

@keyframes drag-cue{0%,100%{transform:translate(-50%,4px);opacity:.4}50%{transform:translate(-50%,-6px);opacity:.9}}
@keyframes tap-cue{0%,100%{transform:translateX(-50%) scale(1);opacity:.7}70%{transform:translateX(-50%) scale(1.65);opacity:.1}}
@keyframes information-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media(max-width:767px){
  :root{--header-height:46px}
  body{font-size:18px}
  .brand{width:144px}
  .site-header{padding-inline:12px}
  .menu-toggle{margin-right:-7px}
  .menu-toggle img{width:17px}
  .portrait{width:min(100vw,calc(var(--experience-height) * .616438))}
  .site-footer{padding:25px 6%;gap:12px}
  .site-footer>img{width:130px}
  .site-footer .text-link{font-size:14px}
}
@media(max-height:640px){
  .instruction,body[data-state=open] .instruction,body[data-state=dispensing] .instruction{font-size:16px}
  .gesture-cue{height:26px;bottom:100%}
  .more-button{font-size:16px}
  .ingredient-label{font-size:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:0s!important}.scene,.baby-photo,.more-button{transition-duration:.12s!important}.gesture-cue{animation:none!important}.liquid-drop{will-change:auto}}

/* Kiosk first: scale the portrait design to the available screen width. */
@media (min-width:768px) and (orientation:portrait){
  :root{--header-height:clamp(64px,11.111vw,240px);--experience-height:min(163cqi,calc(100svh - var(--header-height)))}
  .site-header{padding-inline:3vw}
  .brand{width:34.074vw}
  .menu-toggle{width:6.667vw;height:6.667vw;padding:1.389vw}
  .menu-toggle img{width:3.889vw}
  .portrait{width:min(100cqi,calc(var(--experience-height) * .616438))}
  #bottle-portrait{width:100cqi;max-height:none}
  .baby-art{width:min(74cqi,calc(var(--experience-height) * .456164))}
  .baby-message img{width:72%}
  .instruction,body[data-state=open] .instruction,body[data-state=dispensing] .instruction{font-size:4cqi}
  .more-button{font-size:4cqi;padding:16px 8px;min-height:64px}
  .ingredient-label{font-size:4.3cqi}
  .gesture-cue{width:40px;height:64px}
}

@media(min-width:768px){
  .baby-window{background-image:url('assets/images/window-background-1280.webp')}
}