:root{
  --navy:#10233f;
  --navy-2:#173e5c;
  --foam:#f6f1e6;
  --gold:#d4a23d;
  --accent:#16395c;
  --glass:rgba(8,28,43,.38);
  --glass-strong:rgba(7,23,37,.56);
  --line:rgba(224,244,243,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:auto;background:#061523;scrollbar-width:none;overflow-x:hidden;overflow-x:clip;max-width:100%}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0}
body{margin:0;background:#061523;color:var(--foam);font-family:'Inter',system-ui,sans-serif;overflow-x:hidden;overflow-x:clip;max-width:100%;cursor:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,canvas{image-rendering:auto}
body.is-loading{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;max-width:100%}
a,button,.product-tab,.collection-node,.circle-btn,.btn,.text-link,.nav a{cursor:pointer}

/* Intro */
#intro{position:fixed;inset:0;z-index:9999;background:#000;opacity:1;visibility:visible;transition:opacity .85s ease,visibility .85s ease}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
#introCanvas{display:block;width:100%;height:100%}

/* Header */
.site-header{position:fixed;z-index:150;left:0;right:0;top:0;height:76px;padding:0 clamp(18px,4vw,54px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid transparent;transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease}
.site-header.scrolled{background:rgba(4,18,30,.46);backdrop-filter:blur(18px);border-color:rgba(255,255,255,.07)}
.header-brand{position:relative;width:48px;height:58px;padding:3px;border:0;background:none;display:grid;place-items:center;opacity:0;transform:translateY(15px) scale(1.12);transition:opacity .7s ease,transform .7s ease,filter .25s ease}
body.intro-complete .header-brand{opacity:1;transform:none;transition-delay:.7s}
.header-brand img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))}
.header-brand--mascot{border-radius:12px}
.header-brand--mascot.cursor-active{filter:drop-shadow(0 0 8px rgba(133,220,224,.42)) drop-shadow(0 8px 16px rgba(0,0,0,.32))}
.header-brand--mascot.cursor-active:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;right:-2px;bottom:9px;background:#a8e5df;box-shadow:0 0 9px rgba(154,235,229,.9)}
.nav{display:flex;gap:29px;align-items:center;font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.nav a{position:relative;padding:9px 0;cursor:pointer}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .3s ease}
.nav a:hover:after,.nav a.active:after{right:0}
.nav a.active{color:#fff}
.nav-toggle{display:none;border:0;background:none;font:600 11px 'Barlow Condensed';letter-spacing:.14em}

/* One continuous scroll track. The viewport itself never leaves the underwater stage. */
.experience{position:relative;height:1100svh;background:#061523}
.experience-sticky{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;background:#0a2539;touch-action:none}
.experience-ocean{position:absolute;inset:0;width:100%;height:100%;z-index:-6}
.experience-shade{position:absolute;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(circle at 50% 35%,rgba(174,220,223,.025),transparent 35%),linear-gradient(180deg,rgba(2,14,24,.01),rgba(2,14,24,.12) 55%,rgba(2,12,21,.35))}
.experience-watermark{position:absolute;left:50%;top:55%;z-index:-2;transform:translate(-50%,-50%) rotate(-7deg);white-space:nowrap;font:700 clamp(90px,18vw,300px)/.8 'Fraunces',serif;letter-spacing:-.06em;color:rgba(240,246,240,.022);pointer-events:none}
.scene-stack{position:absolute;inset:0}
.scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;will-change:opacity,transform;transform:translate3d(0,40px,0) scale(.98)}
.scene.is-active{visibility:visible;pointer-events:auto}
.scene-inner{position:relative;width:min(1180px,calc(100% - 44px));height:100%;margin:auto;padding:98px 0 58px}

/* Organic floating content */
.float-shell,.float-note,.quality-bubble,.trade-blob,.float-capsule,.product-copy{position:relative;background:linear-gradient(150deg,rgba(10,32,47,.72),rgba(5,20,33,.46));border:1.75px solid rgba(226,244,242,.2);box-shadow:0 22px 58px rgba(0,8,17,.25),0 8px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.055);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.float-shell:before,.float-note:before,.quality-bubble:before,.trade-blob:before,.product-copy:before{content:"";position:absolute;inset:8px;border:1.4px solid rgba(255,255,255,.06);border-radius:inherit;pointer-events:none}
.float-shell{padding:clamp(30px,4vw,58px);border-radius:28px 42px 30px 38px}
.float-shell--hero{width:min(690px,90vw);text-align:center;border-radius:34px 52px 36px 48px;background:linear-gradient(150deg,rgba(9,34,50,.58),rgba(5,20,34,.32))}
.float-shell--wide{width:min(730px,90vw);border-radius:30px 46px 32px 42px}
.float-shell--legend{width:min(700px,72vw);margin-left:7%;border-radius:32px 48px 28px 42px}
.float-shell--story{width:min(650px,68vw);margin-left:auto;margin-right:2%;border-radius:32px 42px 30px 46px}
.float-note{width:min(380px,52vw);padding:25px 30px;border-radius:24px 34px 22px 30px}
.float-note span{font:600 10px 'Barlow Condensed';letter-spacing:.2em;color:#e8c574}
.float-note p{margin:11px 0 0;color:rgba(255,255,255,.7);line-height:1.55;font-size:14px}

@keyframes driftA{0%,100%{transform:translate3d(0,-5px,0) rotate(-.25deg)}50%{transform:translate3d(5px,7px,0) rotate(.35deg)}}
@keyframes driftB{0%,100%{transform:translate3d(-4px,6px,0) rotate(.3deg)}50%{transform:translate3d(5px,-7px,0) rotate(-.25deg)}}
@keyframes driftC{0%,100%{transform:translate3d(4px,-3px,0) rotate(.2deg)}50%{transform:translate3d(-5px,8px,0) rotate(-.35deg)}}
.drift-a{animation:driftA 7.4s ease-in-out infinite}
.drift-b{animation:driftB 8.8s ease-in-out infinite}
.drift-c{animation:driftC 6.9s ease-in-out infinite}

.eyebrow{font:600 11px/1 'Barlow Condensed',sans-serif;letter-spacing:.23em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
h1,h2,h3,p{position:relative}
h1,h2{font-family:'Fraunces',serif;letter-spacing:-.045em}
em{font-weight:500;color:#e8cb91}
.btn{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 21px;border-radius:999px;font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.13em;text-transform:uppercase;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--gold);color:#11243a;box-shadow:0 13px 30px rgba(0,0,0,.15)}
.btn-ghost{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.035);color:#fff}

/* Hero */
.hero-layout{display:grid;place-items:center}
.hero-logo{width:clamp(170px,20vw,270px);margin:0 auto 5px;filter:drop-shadow(0 22px 30px rgba(0,0,0,.25))}
.scene-hero h1{font-size:clamp(50px,7.4vw,92px);line-height:.84;margin:16px 0 21px;color:#fffaf0}
.scene-hero p{max-width:600px;margin:0 auto;color:rgba(255,255,255,.78);font-size:clamp(15px,1.4vw,18px);line-height:1.7}
.hero-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero-depth-label{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font:600 9px 'Barlow Condensed';letter-spacing:.22em;color:rgba(255,255,255,.48)}
.hero-depth-label span{width:42px;height:1px;background:linear-gradient(90deg,transparent,#e8cb91)}

/* Collection intro */
.intro-cluster{display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,72px)}
.scene-product-intro h2{font-size:clamp(48px,7vw,88px);line-height:.9;margin:0;color:#fffaf0}

/* Product scene */
.product-layout{display:grid;grid-template-columns:minmax(300px,.84fr) minmax(420px,1.16fr);align-items:center;gap:40px;padding-bottom:100px}
.product-copy{width:min(465px,42vw);justify-self:start;padding:38px 42px 42px;border-radius:37% 63% 52% 48% / 49% 38% 62% 51%;transition:opacity .22s ease,filter .22s ease}
.product-copy.switching{opacity:.35;filter:blur(4px)}
.product-count{font:600 10px 'Barlow Condensed';letter-spacing:.19em;color:#edcb84;margin-bottom:18px}
.product-label{font:600 10px 'Barlow Condensed';letter-spacing:.18em;color:rgba(255,255,255,.54);text-transform:uppercase}
.product-copy h2{font:600 clamp(47px,5.3vw,74px)/.91 'Fraunces';margin:10px 0 15px;color:#fff9ef}
.product-tagline{font:500 23px/1.2 'Fraunces';font-style:italic;color:#efcf8d;margin:0 0 14px}
.product-description{font-size:15px;line-height:1.68;color:rgba(255,255,255,.72);margin:0}
.product-controls{display:flex;gap:9px;align-items:center;margin-top:25px}
.product-controls>span{margin-left:8px;font:600 8px 'Barlow Condensed';letter-spacing:.16em;color:rgba(255,255,255,.4)}
.circle-btn{width:45px;height:45px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.035);color:#fff;cursor:pointer;font-size:19px;transition:.22s ease}
.circle-btn:hover{background:#fff;color:#10233f}
.product-visual{position:relative;height:min(72svh,650px);display:grid;place-items:center;perspective:1200px;pointer-events:none}
.product-pack-wrap{position:relative;z-index:3;width:min(560px,48vw);height:100%;display:grid;place-items:center;transform:translate3d(var(--pack-x,0),var(--pack-y,0),0) rotate(var(--pack-r,0deg)) scale(var(--pack-s,1));opacity:var(--pack-o,1);transition:filter .2s ease}
#featuredProduct{max-height:92%;max-width:88%;width:auto;height:auto;filter:drop-shadow(0 42px 40px rgba(0,0,0,.34));animation:packFloat 5.4s ease-in-out infinite}
@keyframes packFloat{0%,100%{transform:translateY(-5px) rotate(-.8deg)}50%{transform:translateY(8px) rotate(.7deg)}}
.product-color-orbit{position:absolute;z-index:0;width:min(570px,47vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 44%,transparent) 0,color-mix(in srgb,var(--accent) 18%,transparent) 34%,transparent 70%);filter:blur(13px);opacity:.68;animation:orbitPulse 5s ease-in-out infinite}
@keyframes orbitPulse{50%{transform:scale(1.08);opacity:.83}}
.product-shadow{position:absolute;bottom:9%;width:250px;height:34px;border-radius:50%;background:rgba(0,0,0,.32);filter:blur(17px)}
.product-empty{width:min(390px,36vw);aspect-ratio:.68;display:grid;place-items:center;align-content:center;gap:10px;border:1px solid color-mix(in srgb,var(--accent) 55%,rgba(255,255,255,.3));border-radius:42% 58% 46% 54% / 34% 45% 55% 66%;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 23%,rgba(4,20,32,.62)),rgba(4,20,32,.38));box-shadow:inset 0 0 65px color-mix(in srgb,var(--accent) 18%,transparent),0 32px 60px rgba(0,0,0,.2);backdrop-filter:blur(12px)}
.product-empty[hidden]{display:none}
.product-empty strong{font:600 clamp(72px,9vw,130px)/.8 'Fraunces';color:color-mix(in srgb,var(--accent) 58%,white);opacity:.34}
.product-empty span{font:600 11px 'Barlow Condensed';letter-spacing:.24em;color:rgba(255,255,255,.68)}
.product-rail{position:absolute;left:50%;bottom:23px;transform:translateX(-50%);z-index:10;display:flex;align-items:center;gap:5px;padding:7px 9px;border-radius:999px;background:rgba(4,19,31,.35)}
.product-tab{width:31px;height:31px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.025);color:rgba(255,255,255,.54);font:600 8px 'Barlow Condensed';cursor:pointer;transition:.22s ease}
.product-tab:hover,.product-tab.active{background:color-mix(in srgb,var(--accent) 55%,white 25%);color:#071827;border-color:rgba(255,255,255,.5);transform:translateY(-2px) scale(1.08)}

/* Deep transition */
.deep-layout{display:grid;place-items:center}
.deep-whisper{text-align:center;max-width:780px}
.deep-whisper h2{font:600 clamp(76px,12vw,160px)/.77 'Fraunces';margin:0;color:#fffaf1;text-shadow:0 20px 45px rgba(0,0,0,.16)}
.deep-whisper p{font:500 17px 'Fraunces';font-style:italic;color:rgba(255,255,255,.65)}

/* Legend + story */
.legend-layout,.story-layout{display:flex;align-items:center;justify-content:space-between;gap:50px}
.legend-mark{width:min(360px,29vw);opacity:.24;filter:drop-shadow(0 18px 30px rgba(0,0,0,.24)) brightness(.92);margin-left:3%}
.legend-mark img{width:100%}
.scene-legend h2,.scene-story h2{font:600 clamp(47px,5.8vw,78px)/.94 'Fraunces';margin:0 0 19px;color:#fffaf0}
.serif-line{font:500 20px 'Fraunces';font-style:italic;color:rgba(255,255,255,.7)}
.text-link{border:0;background:none;padding:0;margin-top:10px;cursor:pointer;font:600 11px 'Barlow Condensed';letter-spacing:.14em;text-transform:uppercase;color:#e9c77e}
.text-link span{margin-left:8px}
.story-medallion{width:min(320px,26vw);aspect-ratio:1;display:grid;place-items:center;background:none;border:0;backdrop-filter:none}
.story-medallion img{width:82%;filter:drop-shadow(0 22px 25px rgba(0,0,0,.22))}
.float-shell--story>p{color:rgba(255,255,255,.66);font-size:15px;line-height:1.7}
.story-lead{font:500 20px/1.48 'Fraunces'!important;color:rgba(255,255,255,.83)!important;margin:22px 0 17px}

/* Quality */
.quality-layout{position:relative}
.quality-title{position:absolute;left:2%;top:24%;max-width:520px}
.quality-title h2{font:600 clamp(48px,6vw,80px)/.92 'Fraunces';margin:0;color:#fffaf0}
.quality-bubble{position:absolute;width:265px;min-height:208px;padding:31px 32px;border-radius:26px 34px 24px 32px}
.quality-bubble--one{right:22%;top:17%;transform:rotate(-2deg)}
.quality-bubble--two{right:3%;top:40%;border-radius:30px 22px 34px 26px;transform:rotate(2deg)}
.quality-bubble--three{right:27%;bottom:10%;border-radius:24px 34px 22px 36px;transform:rotate(-1deg)}
.quality-bubble span{font:600 10px 'Barlow Condensed';letter-spacing:.18em;color:#e8c574}
.quality-bubble h3{font:600 29px 'Fraunces';margin:25px 0 9px;color:#fff8eb}
.quality-bubble p{margin:0;color:rgba(255,255,255,.66);font-size:14px;line-height:1.55}

/* Collection cloud */
.collection-layout{display:flex;align-items:center;gap:35px}
.collection-title{width:32%;align-self:center}
.collection-title h2{font:600 clamp(50px,6.5vw,83px)/.9 'Fraunces';margin:0 0 15px;color:#fffaf0}
.collection-title p{color:rgba(255,255,255,.62);line-height:1.55;font-size:14px}
.collection-cloud{position:relative;width:68%;height:78%;min-height:520px}
.collection-node{position:absolute;width:118px;height:118px;border:1.4px solid rgba(255,255,255,.15);background:linear-gradient(145deg,rgba(9,32,47,.54),rgba(5,20,33,.28));backdrop-filter:blur(12px);box-shadow:0 18px 42px rgba(0,0,0,.18);border-radius:24px 32px 22px 30px;display:grid;place-items:center;align-content:center;gap:4px;cursor:pointer;color:#fff;transition:transform .25s ease,border-color .25s ease,background .25s ease;animation:nodeDrift 6s ease-in-out infinite;animation-delay:var(--delay,0s)}
.collection-node:hover{transform:scale(1.1)!important;border-color:color-mix(in srgb,var(--node-accent) 60%,white);background:color-mix(in srgb,var(--node-accent) 18%,rgba(5,20,33,.5))}
.collection-node img{max-width:74px;max-height:78px;filter:drop-shadow(0 10px 10px rgba(0,0,0,.2));pointer-events:none}
.collection-node strong{font:600 10px 'Barlow Condensed';letter-spacing:.08em;max-width:90px;text-align:center;line-height:1.05}
.collection-node small{font:600 8px 'Barlow Condensed';letter-spacing:.15em;color:color-mix(in srgb,var(--node-accent) 65%,white)}
.collection-node--soon{border-style:dashed;background:linear-gradient(145deg,color-mix(in srgb,var(--node-accent) 10%,rgba(9,32,47,.5)),rgba(5,20,33,.25))}
.collection-node--soon .soon-num{font:600 34px 'Fraunces';color:color-mix(in srgb,var(--node-accent) 58%,white);opacity:.68}
@keyframes nodeDrift{0%,100%{margin-top:-5px}50%{margin-top:7px}}

/* Trade */
.trade-layout{display:flex;align-items:center;justify-content:center;gap:75px}
.trade-blob{width:min(680px,66vw);padding:55px 62px;border-radius:30px 46px 32px 40px;background:linear-gradient(140deg,rgba(196,145,45,.28),rgba(85,64,30,.18) 42%,rgba(7,26,40,.48));border-color:rgba(232,196,124,.3)}
.trade-blob h2{font:600 clamp(51px,6vw,82px)/.9 'Fraunces';margin:0 0 20px;color:#fff7e6}
.trade-blob p{max-width:490px;color:rgba(255,255,255,.72);line-height:1.65}
.trade-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.end-mark{width:190px;text-align:center;color:rgba(255,255,255,.58);font:600 9px 'Barlow Condensed';letter-spacing:.18em}
.end-mark img{width:135px;margin:0 auto 13px;opacity:.92;filter:drop-shadow(0 16px 24px rgba(0,0,0,.24))}
.end-mark strong,.end-mark span{display:block}.end-mark span{margin-top:7px;opacity:.45}

/* Global progress */
.experience-progress{position:absolute;right:18px;top:50%;height:180px;width:2px;transform:translateY(-50%);background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.experience-progress__fill{display:block;width:100%;height:100%;transform-origin:top;transform:scaleY(0);background:linear-gradient(180deg,#e9c77e,#7bb3bd)}
.depth-counter{position:absolute;right:12px;bottom:17px;font:600 9px 'Barlow Condensed';letter-spacing:.16em;color:rgba(255,255,255,.36);writing-mode:vertical-rl}

@media(max-width:900px){
  .nav{display:none}.nav-toggle{display:block}
  .scene-inner{width:min(100% - 28px,1180px);padding-top:82px;padding-bottom:48px}
  .product-layout{grid-template-columns:1fr;gap:0;align-content:center}
  .product-copy{position:absolute;left:2%;top:18%;z-index:5;width:min(390px,48vw);padding:29px 31px}
  .product-visual{height:66svh;margin-left:25%}.product-pack-wrap{width:min(520px,62vw)}
  .product-rail{bottom:15px}
  .legend-layout,.story-layout{gap:25px}.float-shell--legend,.float-shell--story{width:min(650px,72vw)}
  .quality-title{left:2%;top:16%}.quality-bubble{width:225px;min-height:180px;padding:26px}.quality-bubble--one{right:18%;top:12%}.quality-bubble--two{right:2%;top:42%}.quality-bubble--three{right:25%;bottom:7%}
  .collection-layout{gap:16px}.collection-title{width:28%}.collection-cloud{width:72%}.collection-node{width:102px;height:102px}.collection-node img{max-height:67px}
}

@media(max-width:620px){
  .site-header{height:66px;padding-inline:14px}.header-brand{width:58px}
  .experience{height:1250svh}
  .experience-watermark{font-size:32vw}
  .float-shell{padding:28px 25px}.float-shell--hero{width:94vw}.hero-logo{width:175px}.scene-hero h1{font-size:50px}.scene-hero p{font-size:14px}
  .intro-cluster{flex-direction:column;justify-content:center}.float-shell--wide{width:94vw}.float-note{width:75vw;margin-left:14vw}.scene-product-intro h2{font-size:49px}
  .product-layout{display:block;padding-top:70px}
  .product-copy{left:0;top:auto;bottom:82px;width:83vw;padding:25px 28px;z-index:8;background:linear-gradient(145deg,rgba(7,29,44,.66),rgba(4,19,31,.44))}
  .product-copy h2{font-size:42px}.product-tagline{font-size:19px}.product-description{font-size:13px;line-height:1.55}.product-controls{margin-top:18px}.product-controls>span{display:none}
  .product-visual{height:58svh;margin:10px 0 0}.product-pack-wrap{width:88vw;height:100%;align-items:start;padding-top:2vh}#featuredProduct{max-height:58vh;max-width:86%}.product-empty{width:48vw}.product-shadow{bottom:24%}
  .product-rail{bottom:17px;width:calc(100% - 18px);justify-content:center;gap:3px;padding:6px}.product-tab{width:25px;height:25px;font-size:7px}
  .deep-whisper h2{font-size:82px}
  .legend-layout,.story-layout{display:grid;place-items:center}.legend-mark,.story-medallion{position:absolute;width:60vw;opacity:.16}.float-shell--legend,.float-shell--story{width:94vw;margin:0}.scene-legend h2,.scene-story h2{font-size:45px}.story-lead{font-size:18px!important}
  .quality-title{position:absolute;left:4%;top:11%;max-width:78vw}.quality-title h2{font-size:47px}.quality-bubble{width:47vw;min-height:155px;padding:21px;border-radius:22px 28px 20px 30px}.quality-bubble h3{font-size:23px;margin-top:18px}.quality-bubble p{font-size:12px}.quality-bubble--one{left:3%;right:auto;top:42%}.quality-bubble--two{right:3%;top:48%}.quality-bubble--three{left:25%;right:auto;bottom:4%}
  .collection-layout{display:block}.collection-title{position:absolute;width:80%;left:3%;top:10%;z-index:4}.collection-title h2{font-size:51px}.collection-title p{display:none}.collection-cloud{position:absolute;left:0;right:0;bottom:4%;width:100%;height:68%;min-height:0}.collection-node{width:76px;height:76px}.collection-node img{max-height:46px;max-width:49px}.collection-node strong{font-size:8px;max-width:62px}.collection-node small{font-size:6px}.collection-node--soon .soon-num{font-size:23px}
  .trade-layout{display:grid;place-items:center}.trade-blob{width:94vw;padding:40px 31px}.trade-blob h2{font-size:50px}.end-mark{position:absolute;right:3%;bottom:2%;width:120px;opacity:.55}.end-mark img{width:70px}
  .experience-progress{right:7px;height:135px}.depth-counter{display:none}
}

@media(prefers-reduced-motion:reduce){
  .drift-a,.drift-b,.drift-c,.collection-node,#featuredProduct,.product-color-orbit{animation:none!important}
}

/* =========================================================
   V6 — refined framed typography, free artwork, slower dive
   ========================================================= */
:root{
  --glass:rgba(6,25,39,.56);
  --glass-strong:rgba(5,20,33,.70);
  --line:rgba(214,238,239,.30);
  --line-strong:rgba(224,244,243,.42);
  --panel-shadow:0 20px 48px rgba(0,7,15,.30),0 7px 18px rgba(0,7,15,.18),inset 0 1px 0 rgba(255,255,255,.055);
}

/* More scroll distance: same scenes, much calmer progression. */
.experience{height:1750svh}

/* Text belongs in designed panels, not bubbles. */
.float-shell,
.float-note,
.quality-bubble,
.trade-blob,
.float-capsule{
  background:linear-gradient(145deg,rgba(8,31,46,.72),rgba(4,19,31,.54));
  border:1.5px solid var(--line);
  box-shadow:var(--panel-shadow);
  backdrop-filter:blur(18px) saturate(112%);
  -webkit-backdrop-filter:blur(18px) saturate(112%);
}
.float-shell:before,
.float-note:before,
.quality-bubble:before,
.trade-blob:before{
  inset:6px;
  border:1px solid rgba(230,247,247,.08);
  border-radius:inherit;
}
.float-shell,
.float-shell--hero,
.float-shell--wide,
.float-shell--legend,
.float-shell--story,
.product-copy,
.float-note,
.quality-bubble,
.quality-bubble--two,
.quality-bubble--three,
.trade-blob{
  border-radius:18px 6px 18px 6px;
}
.float-shell:after,
.float-note:after,
.quality-bubble:after,
.trade-blob:after{
  content:"";
  position:absolute;
  left:18px;
  top:-2px;
  width:74px;
  height:3px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--gold),rgba(212,162,61,0));
  opacity:.82;
  pointer-events:none;
}
.float-shell--hero{width:min(650px,72vw);text-align:left;padding:38px 46px 42px}
.float-shell--wide{width:min(700px,72vw)}
.float-shell--legend{width:min(660px,68vw);margin-left:3%}
.float-shell--story{width:min(640px,66vw);margin-left:auto;margin-right:1%}
.float-note{width:min(350px,34vw);padding:23px 26px}
.product-copy{width:min(455px,40vw);padding:34px 38px 38px}
.trade-blob{width:min(650px,62vw);padding:50px 56px}

/* Hero artwork is now free in the water instead of trapped inside a panel. */
.hero-layout{
  display:grid;
  grid-template-columns:minmax(190px,.55fr) minmax(480px,1.1fr);
  align-items:center;
  justify-content:center;
  gap:clamp(28px,5vw,80px);
}
.hero-brand-free{justify-self:end;position:relative;z-index:3}
.hero-logo{width:clamp(190px,24vw,330px);margin:0;filter:drop-shadow(0 25px 35px rgba(0,0,0,.34))}
.scene-hero h1{font-size:clamp(48px,6.5vw,82px);line-height:.86}
.scene-hero p{margin:0;max-width:560px}
.hero-actions{justify-content:flex-start}

/* Artwork / logos / packshots float freely: no bubble-shaped container. */
.story-medallion{
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:0;
}
.story-medallion img{width:78%;filter:drop-shadow(0 22px 30px rgba(0,0,0,.30))}
.legend-mark{opacity:.23;filter:none}
.legend-mark img{filter:drop-shadow(0 22px 28px rgba(0,0,0,.30))}
.end-mark img{filter:drop-shadow(0 15px 22px rgba(0,0,0,.28))}

/* Quality cards: compact, readable rectangular panels. */
.quality-bubble{width:270px;min-height:190px;padding:28px 30px}
.quality-bubble--one{right:23%;top:16%}
.quality-bubble--two{right:3%;top:41%}
.quality-bubble--three{right:27%;bottom:9%}
.quality-bubble h3{margin:22px 0 9px}

/* Collection product artwork has no enclosing bubble. Only its label is framed. */
.collection-node,
.collection-node--soon{
  width:128px;
  height:142px;
  border:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-radius:0;
  overflow:visible;
  gap:8px;
}
.collection-node:hover{
  background:none;
  border-color:transparent;
  transform:translateY(-4px) scale(1.07)!important;
}
.collection-node img{
  max-width:88px;
  max-height:94px;
  filter:drop-shadow(0 15px 15px rgba(0,0,0,.30));
}
.collection-node strong,
.collection-node small,
.collection-node .soon-num{
  position:relative;
  z-index:2;
}
.collection-node strong{
  max-width:118px;
  padding:6px 10px;
  border:1.25px solid rgba(220,241,241,.28);
  border-radius:9px 3px 9px 3px;
  background:rgba(5,22,35,.68);
  box-shadow:0 8px 18px rgba(0,7,15,.22);
}
.collection-node small{margin-top:-4px}
.collection-node--soon .soon-num{
  display:grid;
  place-items:center;
  width:72px;
  height:72px;
  border:1.25px solid color-mix(in srgb,var(--node-accent) 46%,rgba(255,255,255,.28));
  border-radius:13px 4px 13px 4px;
  background:color-mix(in srgb,var(--node-accent) 12%,rgba(4,20,32,.55));
  box-shadow:0 14px 24px rgba(0,0,0,.18);
}

/* Product selector is a thin control strip, not a blob. */
.product-rail{
  border-radius:10px 3px 10px 3px;
  border:1.25px solid rgba(220,241,241,.20);
  background:rgba(4,19,31,.48);
  box-shadow:0 11px 28px rgba(0,0,0,.20);
}
.product-tab{border-radius:7px 2px 7px 2px}
.product-color-orbit{opacity:.78;filter:blur(16px)}

/* Custom Calmarino cursor — desktop/fine pointer only. */
.mascot-cursor{
  position:fixed;
  left:0;
  top:0;
  z-index:10000;
  width:42px;
  height:54px;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-100px,-100px,0) translate(-50%,-50%);
  transform-origin:50% 50%;
  transition:opacity .16s ease,filter .16s ease;
  will-change:transform;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.34));
}
.mascot-cursor img{width:100%;height:100%;object-fit:contain}
.mascot-cursor:after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:3px;height:3px;
  margin:-1.5px 0 0 -1.5px;
  border-radius:50%;
  background:rgba(255,255,255,.78);
  box-shadow:0 0 6px rgba(121,219,224,.8);
}
html.has-mascot-cursor,html.has-mascot-cursor *{cursor:none!important}
.mascot-cursor.is-visible{opacity:.92}
.mascot-cursor.is-hovering{filter:drop-shadow(0 7px 11px rgba(0,0,0,.4)) drop-shadow(0 0 7px rgba(151,223,224,.2))}

@media(max-width:900px){
  .experience{height:1600svh}
  .hero-layout{grid-template-columns:1fr;gap:16px;place-items:center}
  .hero-brand-free{justify-self:center}
  .float-shell--hero{width:min(690px,92vw);text-align:center;padding:32px 28px}
  .hero-actions{justify-content:center}
  .float-shell--wide,.float-shell--legend,.float-shell--story{width:92vw}
  .float-note{width:min(420px,78vw)}
  .product-copy{width:min(460px,90vw)}
  .quality-bubble{width:235px}
  .trade-blob{width:92vw}
}

@media(max-width:560px){
  .experience{height:1500svh}
  .hero-logo{width:190px}
  .float-shell--hero{width:94vw;padding:27px 23px}
  .float-note{width:78vw;margin-left:10vw}
  .quality-bubble{width:46vw;min-height:150px;padding:20px}
  .collection-node{width:82px;height:100px}
  .collection-node img{max-height:52px;max-width:56px}
  .collection-node strong{max-width:78px;padding:4px 6px;font-size:8px}
  .collection-node--soon .soon-num{width:48px;height:48px;font-size:21px}
}

@media(pointer:coarse),(prefers-reduced-motion:reduce){
  .mascot-cursor{display:none!important}
  html.has-mascot-cursor,html.has-mascot-cursor *{cursor:auto!important}
}
body.is-loading .mascot-cursor{opacity:0!important}

/* =========================================================
   V8 — brand morph + stronger product colour staging
   ========================================================= */
:root{
  --calmarino-rgb:22,57,92;
  --product-accent-rgb:22,57,92;
}

/* Home frame: the complete logo stands free in the water. */
.hero-home{
  display:grid;
  grid-template-columns:1fr !important;
  grid-template-rows:1fr;
  place-items:center;
  justify-content:center;
  align-content:center;
}
.hero-home-content{
  grid-column:1 / -1;
  grid-row:1;
  justify-self:center;
  align-self:center;
  width:min(930px,92vw);
  display:grid;
  place-items:center;
  text-align:center;
  transform:translate3d(0,-1.5vh,0);
}
.hero-home .hero-logo{
  width:clamp(280px,34vw,430px); /* ~30% larger than the previous 330px cap */
  max-width:82vw;
  margin:0 auto 18px;
  filter:drop-shadow(0 28px 42px rgba(0,0,0,.38));
  transform-origin:center center;
  will-change:transform,opacity,filter;
  transition:transform .76s cubic-bezier(.2,.72,.18,1),opacity .58s ease,filter .58s ease;
}
.hero-home-text{
  width:min(720px,90vw);
  transition:opacity .42s ease,transform .54s cubic-bezier(.2,.72,.18,1),filter .42s ease;
}
.hero-home .eyebrow{margin-bottom:14px}
.hero-home h1{
  font-size:clamp(52px,7.7vw,96px);
  line-height:.84;
  margin:14px 0 20px;
}
.hero-home p{
  max-width:620px;
  margin:0 auto;
  font-size:clamp(15px,1.45vw,18px);
  line-height:1.68;
}

/* The mini mascot in the navbar only appears after the first dive trigger. */
.site-header .header-brand{
  opacity:0!important;
  transform:translateY(10px) scale(.72)!important;
  pointer-events:none;
  transition:opacity .34s ease,transform .46s cubic-bezier(.2,.72,.18,1),filter .25s ease!important;
}
body.hero-collapsed .site-header .header-brand{
  opacity:1!important;
  transform:none!important;
  pointer-events:auto;
  transition-delay:.30s!important;
}

/* First wheel gesture: logo travels toward the navigation, text dissolves. */
body.hero-collapsing .hero-home .hero-logo,
body.hero-collapsed .hero-home .hero-logo{
  transform:translate3d(calc(-50vw + 92px),calc(-50vh + 94px),0) scale(.17);
  opacity:0;
  filter:drop-shadow(0 10px 15px rgba(0,0,0,.24));
}
body.hero-collapsing .hero-home-text,
body.hero-collapsed .hero-home-text{
  opacity:0;
  transform:translate3d(0,16px,0) scale(.985);
  filter:blur(4px);
}
body.hero-collapsing .hero-depth-label,
body.hero-collapsed .hero-depth-label{opacity:0;transition:opacity .25s ease}

/* Product information panel: Calmarino blue -> flavour colour, diagonally. */
.product-copy{
  background:
    linear-gradient(135deg,
      rgba(var(--calmarino-rgb),.86) 0%,
      rgba(var(--calmarino-rgb),.70) 28%,
      rgba(var(--product-accent-rgb),.48) 68%,
      rgba(var(--product-accent-rgb),.66) 100%);
  border-color:rgba(var(--product-accent-rgb),.52);
  box-shadow:
    0 25px 66px rgba(var(--product-accent-rgb),.28),
    0 16px 34px rgba(0,8,17,.34),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:opacity .22s ease,filter .22s ease,background .46s ease,border-color .46s ease,box-shadow .46s ease;
}
.product-copy:before{border-color:rgba(255,255,255,.09)}
.product-copy h2{
  background:linear-gradient(118deg,
    #fffaf0 0%,
    #f8efe1 34%,
    color-mix(in srgb,rgb(var(--product-accent-rgb)) 62%,white 38%) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:0 8px 22px rgba(0,0,0,.12);
}
.product-label,
.product-tagline{transition:color .4s ease}
.product-tagline{color:color-mix(in srgb,rgb(var(--product-accent-rgb)) 48%,#f2d694 52%)}

/* Stronger flavour shadow around the free packshot, Natural stays Calmarino blue. */
#featuredProduct{
  filter:
    drop-shadow(0 42px 40px rgba(0,0,0,.36))
    drop-shadow(0 0 34px rgba(var(--product-accent-rgb),.30))
    drop-shadow(0 18px 52px rgba(var(--product-accent-rgb),.22));
  transition:filter .42s ease;
}
.product-color-orbit{
  opacity:1;
  transform:scale(1.10);
  filter:blur(20px);
  background:radial-gradient(circle,
    rgba(var(--product-accent-rgb),.54) 0%,
    rgba(var(--product-accent-rgb),.27) 30%,
    rgba(var(--product-accent-rgb),.10) 53%,
    transparent 73%);
}
.product-shadow{
  background:rgba(var(--product-accent-rgb),.20);
  box-shadow:0 0 48px rgba(var(--product-accent-rgb),.18);
}

@media(max-width:900px){
  .hero-home .hero-logo{width:clamp(260px,48vw,390px)}
  body.hero-collapsing .hero-home .hero-logo,
  body.hero-collapsed .hero-home .hero-logo{
    transform:translate3d(calc(-50vw + 74px),calc(-50vh + 83px),0) scale(.15);
  }
}
@media(max-width:560px){
  .hero-home .hero-logo{width:min(78vw,350px)}
  .hero-home h1{font-size:52px}
  .hero-home p{font-size:14px}
  body.hero-collapsing .hero-home .hero-logo,
  body.hero-collapsed .hero-home .hero-logo{
    transform:translate3d(calc(-50vw + 60px),calc(-50vh + 72px),0) scale(.14);
  }
}

/* --- Feedback layer: passive tactile response on every interaction (V10) --- */
.click-feedback{
  position:fixed;z-index:9998;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(244,229,190,.85) 0%,rgba(212,162,61,.55) 42%,rgba(212,162,61,0) 72%);
  box-shadow:0 0 0 1px rgba(244,229,190,.35);
  transform:scale(.4);opacity:.9;
  animation:clickFeedbackPulse .62s cubic-bezier(.2,.72,.18,1) forwards;
  will-change:transform,opacity;
}
@keyframes clickFeedbackPulse{
  0%{transform:scale(.3);opacity:.85}
  55%{opacity:.5}
  100%{transform:scale(3.4);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .click-feedback{animation-duration:.01ms;opacity:0}
}

/* subtle "engaged" glow reinforcing hover -> click loop on core controls */
.circle-btn:active,.product-tab:active,.collection-node:active,.btn:active,.text-link:active{
  filter:brightness(1.18);
}

/* --- V11: Engagement, Content & Design-Erweiterungen --- */

/* Header tools */
.header-tools{display:flex;align-items:center;gap:12px}
@media(max-width:900px){.header-tools{margin-right:8px}}

.discovery-badge{display:flex;align-items:center;gap:5px;font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.08em;color:rgba(255,255,255,.82);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 12px;transition:border-color .3s ease,background .3s ease}
.discovery-badge__icon{color:var(--gold);font-size:9px;transform:translateY(-1px)}
.discovery-badge.is-complete{border-color:color-mix(in srgb,var(--gold) 60%,white);background:color-mix(in srgb,var(--gold) 18%,rgba(255,255,255,.05))}
@media(max-width:620px){.discovery-badge{display:none}}

.sound-toggle{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035);color:rgba(255,255,255,.85);display:grid;place-items:center;transition:.22s ease}
.sound-toggle:hover{background:rgba(255,255,255,.1)}
.sound-toggle svg{width:17px;height:17px}
.sound-toggle .icon-sound-off{display:none}
.sound-toggle[aria-pressed="true"] .icon-sound-on{display:block}
.sound-toggle[aria-pressed="true"] .icon-sound-off{display:none}
.sound-toggle:not([aria-pressed="true"]) .icon-sound-on{display:none}
.sound-toggle:not([aria-pressed="true"]) .icon-sound-off{display:block}
.sound-toggle[aria-pressed="true"]{border-color:color-mix(in srgb,var(--gold) 55%,white);color:var(--gold)}

/* Reward toast */
.reward-toast{position:fixed;left:50%;bottom:34px;z-index:400;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.2,.72,.18,1),opacity .5s ease}
.reward-toast.show{transform:translate(-50%,0);opacity:1}
.reward-toast__inner{display:flex;flex-direction:column;gap:3px;padding:16px 22px;border-radius:16px;background:linear-gradient(150deg,rgba(10,32,47,.92),rgba(5,20,33,.85));border:1px solid color-mix(in srgb,var(--gold) 50%,rgba(255,255,255,.2));box-shadow:0 20px 50px rgba(0,0,0,.4);max-width:320px;text-align:center}
.reward-toast__inner strong{font:600 15px 'Fraunces',serif;color:var(--gold)}
.reward-toast__inner span{font-size:12.5px;color:rgba(255,255,255,.78)}

/* Share toast */
.share-toast{position:fixed;left:50%;bottom:34px;z-index:400;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:transform .4s ease,opacity .4s ease;padding:11px 20px;border-radius:999px;background:rgba(10,26,40,.92);border:1px solid rgba(255,255,255,.18);font:600 12px 'Barlow Condensed',sans-serif;letter-spacing:.06em;color:#fff}
.share-toast.show{transform:translate(-50%,0);opacity:1}

/* Nutrition toggle & panel */
.nutrition-toggle{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.3);padding:0 0 3px;font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);cursor:pointer;transition:color .2s ease,border-color .2s ease}
.nutrition-toggle:hover{color:var(--gold);border-color:var(--gold)}
.nutrition-toggle__chevron{transition:transform .25s ease;font-size:10px}
.nutrition-toggle[aria-expanded="true"] .nutrition-toggle__chevron{transform:rotate(180deg)}
.nutrition-panel{margin-top:12px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.nutrition-panel__note{margin:0 0 8px;font-size:10.5px;letter-spacing:.03em;color:rgba(255,255,255,.5);font-style:italic}
.nutrition-panel__ingredients{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.nutrition-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:11.5px;color:rgba(255,255,255,.78)}
.nutrition-grid div{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(255,255,255,.12);padding:2px 0}
.nutrition-grid div b{color:#fff;font-weight:600}

/* Share button */
.share-btn{margin-left:auto;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.03);color:#fff;display:grid;place-items:center;transition:.22s ease}
.share-btn:hover{background:#fff;color:#10233f}
.product-controls{flex-wrap:wrap}

/* Progress marker (diver) */
.experience-progress{overflow:visible}
.experience-progress__marker{position:absolute;left:50%;top:0;width:11px;height:11px;margin-left:-5.5px;margin-top:-5.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(212,162,61,.22),0 2px 8px rgba(0,0,0,.35);transition:top .12s linear}

/* Footer: Wo kaufen + FAQ */
.site-footer-extra{position:relative;z-index:5;background:#050f1a;padding:80px clamp(20px,6vw,80px) 60px;display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:800px){.site-footer-extra{grid-template-columns:1fr;padding:56px 20px 44px;gap:44px}}
.footer-section h2{font:600 clamp(24px,3vw,32px)/1.1 'Fraunces',serif;margin:6px 0 14px}
.footer-section .eyebrow{font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.18em;color:var(--gold);text-transform:uppercase}
.footer-section p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 18px}

.stockist-search label{display:block;font:600 10.5px 'Barlow Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:6px}
.stockist-search__row{display:flex;gap:10px}
.stockist-search__row input{flex:1;min-width:0;padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#fff;font:500 13px 'Inter',sans-serif}
.stockist-search__row input:focus{outline:2px solid var(--gold);outline-offset:2px}
.stockist-search__hint{margin:12px 0 0;font-size:12.5px;color:rgba(255,255,255,.6)}

.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:2px 18px;background:rgba(255,255,255,.03)}
.faq-item summary{cursor:pointer;list-style:none;padding:14px 0;font:600 13.5px 'Inter',sans-serif;color:#fff;display:flex;justify-content:space-between;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:18px;color:var(--gold);transition:transform .25s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0 0 16px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.7)}

/* Focus visibility for keyboard users */
a:focus-visible,button:focus-visible,input:focus-visible,.collection-node:focus-visible,.product-tab:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}


/* =========================================================
   V11E — mobile hardening merged onto engagement build
   ========================================================= */
.legal-links{
  display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);font:600 10px 'Barlow Condensed',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58);
}
.legal-links a{padding:6px 0;transition:color .2s ease}.legal-links a:hover{color:#fff}
.footer-legal{grid-column:1/-1;margin-top:0;justify-content:center}
.experience-sticky{touch-action:pinch-zoom}

@media(max-width:900px){
  .site-header{
    padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));
    padding-top:env(safe-area-inset-top);height:calc(66px + env(safe-area-inset-top));
  }
  .header-tools{gap:8px;margin-left:auto;margin-right:8px}
  .sound-toggle{width:40px;height:40px;flex:0 0 40px}
  .nav-toggle{
    display:grid;place-items:center;min-width:52px;min-height:44px;padding:0 10px;
    border:1px solid rgba(255,255,255,.12);border-radius:10px 3px 10px 3px;
    background:rgba(4,19,31,.38);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  }
  .nav{
    display:none;position:fixed!important;left:14px!important;right:14px!important;
    top:calc(72px + env(safe-area-inset-top))!important;padding:12px!important;
    border:1px solid rgba(220,241,241,.18)!important;border-radius:14px 4px 14px 4px;
    background:rgba(4,18,30,.94)!important;box-shadow:0 20px 50px rgba(0,0,0,.32);
    backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;
    flex-direction:column!important;align-items:stretch!important;gap:2px!important;
  }
  .nav.is-open{display:flex!important}
  .nav a{display:flex;align-items:center;min-height:46px;padding:0 14px;border-radius:9px 3px 9px 3px;font-size:12px}
  .nav a:active{background:rgba(255,255,255,.07)}
  .scene-inner{
    width:min(calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)),1180px);
    padding-top:calc(76px + env(safe-area-inset-top));padding-bottom:calc(42px + env(safe-area-inset-bottom));
  }
  .experience-sticky{height:100dvh;min-height:100svh}
  .experience-progress{right:max(6px,env(safe-area-inset-right))}
  .reward-toast,.share-toast{bottom:calc(22px + env(safe-area-inset-bottom))}
}

/* Phones (any orientation up to 900px): packshot above/beside, information below —
   never overlapping. Orientation-independent on purpose: some mobile browsers report
   orientation inconsistently, which was the root cause of the overlap bug. */
@media(max-width:900px){
  .scene-products .scene-inner{padding-top:calc(70px + env(safe-area-inset-top));padding-bottom:calc(54px + env(safe-area-inset-bottom))}
  .product-layout{
    display:grid!important;grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr) auto;
    align-content:stretch!important;align-items:stretch!important;gap:8px!important;height:100%;
  }
  .product-visual{
    position:relative;grid-column:1;grid-row:1;height:auto!important;min-height:0;margin:0!important;
    align-self:stretch;display:grid;place-items:center;
  }
  .product-pack-wrap{width:100%!important;height:100%!important;min-height:0;padding:0!important;align-items:center!important}
  #featuredProduct{max-height:min(42dvh,380px)!important;max-width:min(72vw,325px)!important}
  .product-empty{width:min(46vw,210px)!important}
  .product-color-orbit{width:min(82vw,430px)!important;max-height:42dvh}
  .product-shadow{bottom:5%!important;width:42vw;max-width:210px}
  .product-copy{
    position:relative!important;grid-column:1;grid-row:2;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    justify-self:center;width:min(100%,520px)!important;margin:0 auto!important;padding:14px 17px 15px!important;
    border-radius:14px 4px 14px 4px!important;z-index:8;max-height:38dvh;overflow-y:auto;overscroll-behavior:contain;
  }
  .product-count{margin-bottom:6px;font-size:9px}.product-label{font-size:9px;letter-spacing:.14em}
  .product-copy h2{font-size:clamp(27px,8.2vw,37px)!important;line-height:.93;margin:5px 0 7px!important}
  .product-tagline{font-size:15px!important;margin-bottom:6px!important}
  .product-description{font-size:11px!important;line-height:1.42!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .nutrition-toggle{margin-top:9px;font-size:9.5px}
  .nutrition-panel{margin-top:8px;padding:10px 12px;max-height:22dvh;overflow-y:auto}
  .nutrition-panel__note{font-size:9px}.nutrition-panel__ingredients{font-size:10.5px}
  .nutrition-grid{font-size:10px;gap:4px 10px}
  .product-controls{margin-top:8px!important;gap:7px!important}.circle-btn{width:38px;height:38px;font-size:17px}
  .product-controls>span{display:none!important}.share-btn{width:38px;height:38px;margin-left:0}
  .product-rail{
    left:50%;bottom:calc(8px + env(safe-area-inset-bottom))!important;
    width:calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right))!important;max-width:520px;
    justify-content:flex-start!important;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;touch-action:pan-x pinch-zoom;contain:inline-size;padding:6px!important;gap:4px!important;
  }
  .product-rail::-webkit-scrollbar{display:none}.product-tab{flex:0 0 30px;width:30px!important;height:30px!important;font-size:8px!important;scroll-snap-align:center}
  .product-tab.active{transform:none}
  .reward-toast__inner{width:min(88vw,320px)}
}

@media(max-width:390px){
  .header-tools{gap:5px;margin-right:5px}.sound-toggle{width:36px;height:36px;flex-basis:36px}.nav-toggle{min-width:48px}
  .hero-home .hero-logo{width:min(74vw,300px)}.hero-home h1{font-size:44px!important}.hero-home p{font-size:12px!important;line-height:1.5}
  #featuredProduct{max-height:min(38dvh,310px)!important;max-width:68vw!important}
  .product-copy{padding:11px 14px 12px!important;max-height:40dvh}.product-copy h2{font-size:26px!important}.product-tagline{font-size:14px!important}.product-description{font-size:10.5px!important}
  .circle-btn{width:36px;height:36px}.share-btn{width:36px;height:36px}
  .quality-bubble{padding:15px!important}.quality-bubble h3{font-size:20px!important;margin-top:12px!important}.quality-bubble p{font-size:10.5px!important}
  .scene-legend h2,.scene-story h2{font-size:38px!important}.trade-blob{padding:30px 22px!important}.trade-blob h2{font-size:42px!important}
  .stockist-search__row{flex-direction:column}.stockist-search__row .btn{width:100%}
}

/* Landscape phones: compact side-by-side product layout. */
@media(max-width:920px) and (max-height:560px) and (orientation:landscape){
  .site-header{height:56px;padding-top:env(safe-area-inset-top)}.header-brand{width:44px;height:48px}
  .scene-inner{padding-top:calc(58px + env(safe-area-inset-top));padding-bottom:34px}
  .product-layout{display:grid!important;grid-template-columns:minmax(250px,.9fr) minmax(280px,1.1fr)!important;grid-template-rows:1fr;gap:18px!important;align-items:center!important;height:100%}
  .product-copy{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;padding:15px 18px!important;margin:0!important;max-height:72dvh;overflow-y:auto}
  .product-copy h2{font-size:32px!important;margin:5px 0 7px!important}.product-tagline{font-size:15px!important;margin-bottom:5px!important}
  .product-description{font-size:10.5px!important;line-height:1.35!important;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .nutrition-toggle{margin-top:7px}.nutrition-panel{max-height:28dvh;overflow-y:auto;padding:10px 12px}
  .product-controls{margin-top:8px!important}.product-visual{height:calc(100dvh - 105px)!important;margin:0!important}.product-pack-wrap{width:100%!important;height:100%!important}
  #featuredProduct{max-height:76%;max-width:70%}.product-rail{bottom:6px!important;max-width:58vw;overflow-x:auto;justify-content:flex-start!important;scrollbar-width:none}
  .product-tab{flex:0 0 27px;width:27px!important;height:27px!important}.scene-legend h2,.scene-story h2{font-size:34px!important}
  .float-shell--legend,.float-shell--story,.trade-blob{max-height:72dvh;overflow:hidden}.quality-title h2{font-size:38px!important}
  .quality-bubble{min-height:130px!important;padding:16px!important}.quality-bubble h3{font-size:20px!important;margin:12px 0 6px!important}.quality-bubble p{font-size:10.5px!important}
}

@media(pointer:coarse){
  .btn:hover,.circle-btn:hover,.collection-node:hover,.sound-toggle:hover,.share-btn:hover{transform:none}
  .click-feedback{width:18px;height:18px;margin:-9px 0 0 -9px}
}