/* self-hosted fonts (OFL), latin + latin-ext */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-ext-5a947a.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-42078d.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-latin-ext-b219a4.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-latin-9bb717.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext-d9a6a0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/hanken-grotesk-latin-fe1634.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext-d9a6a0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-fe1634.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext-d9a6a0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-latin-fe1634.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:200;font-display:swap;src:url(fonts/outfit-latin-ext-f37fa5.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:200;font-display:swap;src:url(fonts/outfit-latin-c8e7a7.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/outfit-latin-ext-f37fa5.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/outfit-latin-c8e7a7.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/outfit-latin-ext-f37fa5.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/outfit-latin-c8e7a7.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/outfit-latin-ext-f37fa5.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/outfit-latin-c8e7a7.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/outfit-latin-ext-f37fa5.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/outfit-latin-c8e7a7.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* GENTE ESSENCE: one day, three scents. Tokens first. */
:root{--sa:.7;
  --bg:#EAE5DB; --bg2:#DFD7C8; --ink:#2B2820; --ink2:#5E584A;
  --accent:#554D3C; --warm:#C9A25B; --cta:#2B2820; --cta-ink:#F1ECE1;
  --line:rgba(43,40,32,.28);
  --e1:cubic-bezier(.2,.7,.1,1); --e2:cubic-bezier(.65,0,.35,1);
  --f-d:"Outfit",system-ui,sans-serif; --f-b:"Hanken Grotesk",system-ui,sans-serif; --f-m:"DM Mono",ui-monospace,monospace;
  --pad:max(clamp(20px,5vw,72px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); --nav-h:64px; --foil:#A88542; --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body[data-theme="home"]{--sa:.76}
body[data-theme="amalfi"]{--sa:.8;--bg:#E6EFEC;--bg2:#D2E4E2;--ink:#12313F;--ink2:#3F5C68;--accent:#0E5C8A;--warm:#F2C230;--cta:#0E5C8A;--cta-ink:#FFFFFF;--line:rgba(18,49,63,.3)}
body[data-theme="sunkissed"]{--sa:.8;--bg:#F1E4D4;--bg2:#E8CFB5;--ink:#3A271C;--ink2:#6B4F3E;--accent:#D9622B;--warm:#F3B25A;--cta:#3A271C;--cta-ink:#F8EDDF;--line:rgba(58,39,28,.3)}
body[data-theme="aftersunset"]{--foil:#C9A25B;--sa:.6;--bg:#1B0E13;--bg2:#2A1219;--ink:#F3E7E2;--ink2:#C7B0AA;--accent:#E04A3F;--warm:#C9A25B;--cta:#F3E7E2;--cta-ink:#1B0E13;--line:rgba(243,231,226,.34)}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:300 clamp(16px,1.05vw + 12px,19px)/1.65 var(--f-b);overflow-x:hidden;overflow-x:clip;opacity:0;transition:opacity .3s var(--e1)}
body.ready{opacity:1}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
body[data-theme="aftersunset"] :focus-visible{outline-color:var(--warm)}
body[data-theme="sunkissed"] :focus-visible{outline-color:var(--ink)}
body[data-theme] footer :focus-visible{outline-color:currentColor}
.skip{position:absolute;left:-999px;top:8px;background:var(--cta);color:var(--cta-ink);padding:10px 14px;z-index:100}
.skip:focus{left:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type: the logo principle, bold word then hairline word */
.dt{font-family:var(--f-d);text-transform:uppercase;letter-spacing:.01em;line-height:1.02}
.dt b{font-weight:800}.dt i{font-style:normal;font-weight:200}
.mono{font:500 11px/1.4 var(--f-d);letter-spacing:.24em;text-transform:uppercase}
h1,h2,h3{font-family:var(--f-d);font-weight:300}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);transition:background .5s var(--e1),color .5s var(--e1),transform .5s var(--e1)}
.nav .logo img{height:18px;width:auto}
.nav .logo .l-dark{display:none}
.nav .logo{display:flex;align-items:center;min-height:44px}
@media (max-width:760px){.nav .logo img{height:auto;width:153px;aspect-ratio:1920/188;max-width:100%}}
.nav{padding-inline:max(var(--pad),calc((100% - var(--grid-w,1440px))/2 + var(--pad)))}
.nav.solid{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.solid .logo .l-light{display:none}.nav.solid .logo .l-dark{display:block}
body[data-theme="aftersunset"] .nav.solid .logo .l-light{display:block}body[data-theme="aftersunset"] .nav.solid .logo .l-dark{display:none}
.nav:not(.solid){color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.nav ul{display:flex;gap:clamp(14px,3vw,38px);list-style:none}
.nav ul a{text-decoration:none;font:400 12px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;padding:14px 4px;display:inline-block;position:relative}
.nav ul a::after{content:"";position:absolute;left:4px;right:4px;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e1)}
.nav ul a:hover::after,.nav ul a[aria-current]::after{transform:scaleX(1)}
.cartbtn{display:inline-flex;align-items:center;gap:8px;font:400 12px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;padding:14px 4px}
.cartbtn .n{min-width:22px;height:22px;border-radius:11px;border:1px solid currentColor;display:grid;place-items:center;font-size:11px;letter-spacing:0;transition:background .4s var(--e1),color .4s var(--e1)}
.cartbtn .n.has{background:currentColor}.cartbtn .n.has span{color:var(--bg);mix-blend-mode:normal}
.nav:not(.solid) .cartbtn .n.has span{color:#222}
@media (max-width:760px){.nav ul{display:none}.nav .logo img{height:15px}}

/* HERO: the scroll film */
.hero{position:relative;height:600vh;background:#14100c}
.stage{position:sticky;top:0;height:100vh;height:100svh;width:100%;overflow:hidden;isolation:isolate}
.stage .poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage .poster{background-size:cover;background-position:center}
.stage video{opacity:0;transition:opacity .8s var(--e1);transform:translateZ(0);will-change:transform}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,8,6,0) 35%,rgba(10,8,6,.55) 100%)}
.ring{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 28px);width:34px;height:34px;margin-left:-17px;color:rgba(255,255,255,.85);transform:rotate(-90deg);transition:opacity .6s var(--e1)}
.ring circle{transition:stroke-dashoffset .12s linear}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}
.chev{position:absolute;left:50%;bottom:26px;width:22px;height:22px;margin-left:-11px;border-right:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(45deg);opacity:.8;animation:bob 2.4s var(--e2) 2 -1.2s}
@keyframes bob{50%{transform:rotate(45deg) translate(4px,4px)}}
.band{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--nav-h) + 12px) var(--pad) 8vh;opacity:0;pointer-events:none;color:#fff;--k:0;text-shadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.7),0 10px 44px rgba(5,5,10,.7);will-change:opacity}
.band::before{content:"";position:absolute;inset:-4%;z-index:-1;pointer-events:none;opacity:calc(.3 + .7*var(--k,1));background:radial-gradient(ellipse 96% 76% at 50% 50%,rgba(5,5,10,var(--sa)) 0%,rgba(5,5,10,calc(var(--sa)*.86)) 52%,rgba(5,5,10,0) 94%)}
.band.on{pointer-events:auto}
.band .btn,.band .btn *{text-shadow:none}
.band h2{font-weight:200;text-transform:uppercase;font-size:clamp(34px,8.2vw,112px);line-height:1;letter-spacing:.005em;max-width:15ch}
.band h2 .w b{font-weight:800}
.band .sub{margin-top:clamp(14px,2.4vh,26px);font-size:clamp(16px,1.9vw,22px);font-weight:300;max-width:34ch;opacity:var(--ks,1)}
.band .story{font-size:clamp(17px,2.15vw,25px);line-height:1.55;font-weight:400;max-width:34ch}
.band .story p+p{margin-top:.9em}
.band .tag{margin-bottom:18px;opacity:.85}
.w{display:inline-block;white-space:pre}
/* entrances: transform + opacity only, scrubbed by --k */
.fx-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-28px))}
.fx-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks2:clamp(0,(var(--k,0) - var(--th,0) - .1)*3.2,1);opacity:var(--kc);transform:scale(calc(.6 + .52*var(--kc) - .12*var(--ks2)))}
.fx-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*32px))}
.fx-rise .sub{--ks:clamp(0,(var(--k,0) - .62)*4,1);transform:translateY(calc((1 - var(--ks))*14px))}
.fx-rise .cta-row{--kb:clamp(0,(var(--k,0) - .76)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
.fx-part .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
.fx-fade{opacity:1}
.fx-fade .story,.fx-fade h2,.fx-fade .sub,.fx-fade .tag{--kc:clamp(0,var(--k,0)*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*16px))}
.cta-row{margin-top:clamp(18px,3vh,32px);display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.band.settle{justify-content:flex-start;padding-top:calc(var(--nav-h) + 6vh)}
.band.settle.solo{padding-bottom:0}

/* static (reduced motion): composed stills, no video */
.hero.is-static{height:auto}
.hero.is-static .stage{position:relative;height:auto;overflow:visible}
.hero.is-static .stage .poster{position:fixed;opacity:1}
.hero.is-static .band{position:relative;opacity:1 !important;min-height:100svh;pointer-events:auto;--k:1}
.hero.is-static .band .w,.hero.is-static .band .sub,.hero.is-static .band .cta-row,.hero.is-static .band .story{opacity:1;transform:none}
.hero.is-static .chev,.hero.is-static .ring,.hero.is-static video{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;border-radius:999px;background:var(--cta);color:var(--cta-ink);font:500 13px/1 var(--f-m);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;position:relative;overflow:hidden;transition:transform .5s var(--e1),box-shadow .5s var(--e1)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--e1)}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{transform:translateX(120%)}
.btn.ghost{background:transparent;color:inherit;border:1px solid currentColor}
.band .btn.ghost{color:#fff}
.band .btn:not(.ghost){background:#F4EEE2;color:#2B2820}
@media (pointer:coarse){.btn,.nav ul a,.cartbtn,.qty button{min-height:44px}}

/* sections */
section{position:relative}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
footer .wrap{max-width:calc(1296px + 2*var(--pad))}
.sec{padding:clamp(72px,12vw,160px) 0}
.eyebrow{display:block;margin-bottom:22px;color:var(--ink2)}
.big{font-size:clamp(34px,6.6vw,92px);line-height:1;font-weight:200;text-transform:uppercase;letter-spacing:.005em}
.big b{font-weight:800}
.lede{max-width:46ch;margin-top:26px;color:var(--ink2);font-size:clamp(17px,1.5vw + 8px,22px)}

/* reveal choreography */
.rv .r{opacity:0;transform:translateY(18px);transition:opacity .55s var(--e1),transform .55s var(--e1)}
.rv.in .r{opacity:1;transform:none}
.rv .r:nth-child(2){transition-delay:.05s}.rv .r:nth-child(3){transition-delay:.1s}.rv .r:nth-child(4){transition-delay:.15s}.rv .r:nth-child(5){transition-delay:.2s}
.rv.in.rvd .r{transition-delay:0s !important}

/* manifesto */
.mani{background:var(--bg)}
.mani .big{max-width:14ch}
.mani .cols{display:grid;gap:40px;margin-top:56px;grid-template-columns:1fr}
.mani .cols p{max-width:40ch;color:var(--ink2)}
@media (min-width:860px){.mani .cols{grid-template-columns:1fr 1fr;gap:80px}}

/* the three scents */
.three{background:var(--bg2)}
.cards{display:grid;gap:clamp(16px,2vw,28px);margin-top:56px;grid-template-columns:1fr}
@media (min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;min-height:560px;color:var(--cc-ink);background:linear-gradient(170deg,var(--cc-a),var(--cc-b));text-decoration:none;transition:transform .8s var(--e1),box-shadow .8s var(--e1);isolation:isolate}
.card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -30px rgba(0,0,0,.5)}
.card .glow{position:absolute;inset:auto -20% -30% -20%;height:70%;background:radial-gradient(closest-side,var(--cc-glow),transparent);opacity:.7;z-index:-1;animation:breathe 7s var(--e2) infinite -3s}
@keyframes breathe{50%{opacity:1;transform:scale(1.08)}}
.card .c-top{padding:26px 26px 0;display:flex;justify-content:space-between;align-items:flex-start}
.card .c-top .mono{opacity:.8}
.card img.bt{height:clamp(300px,40vw,360px);width:auto;margin:14px auto 0;filter:drop-shadow(0 22px 24px rgba(0,0,0,.35));transition:transform 1s var(--e1)}
.card:hover img.bt{transform:translateY(-10px) rotate(-1.5deg)}
.card .c-bot{margin-top:auto;padding:22px 26px 28px}
.card h3{font-size:clamp(28px,3vw,38px);line-height:1;text-transform:uppercase}
.card h3 b{font-weight:800}.card h3 i{font-style:normal;font-weight:200}
.card .notes{margin-top:12px;font-size:15px;opacity:.88}
.card .c-row{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.card .price{font:500 15px var(--f-m);letter-spacing:.06em}
.card .go{font:400 12px var(--f-m);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px}
.card.amalfi{--cc-a:#F3F1E6;--cc-b:#9CCFCB;--cc-ink:#12313F;--cc-glow:rgba(242,194,48,.55)}
.card.sunkissed{--cc-a:#F7E6D2;--cc-b:#EDA06A;--cc-ink:#3A271C;--cc-glow:rgba(255,200,120,.7)}
.card.aftersunset{--cc-a:#5B1A22;--cc-b:#150A0E;--cc-ink:#F3E7E2;--cc-glow:rgba(224,74,63,.55)}

/* how a scent unfolds: the explainer */
.how{background:var(--bg)}
.steps{display:grid;gap:0;margin-top:56px;border-top:1px solid var(--line)}
.step{display:grid;gap:10px;padding:34px 0;border-bottom:1px solid var(--line);grid-template-columns:1fr}
.step .mono{color:var(--ink2)}
.step h3{font-size:clamp(26px,3.4vw,44px);text-transform:uppercase;line-height:1.05}
.step h3 b{font-weight:800}
.step p{color:var(--ink2);max-width:46ch}
@media (min-width:860px){.step{grid-template-columns:200px 1fr 1fr;align-items:baseline;gap:40px}}

/* trust strip */
.facts{display:grid;gap:0;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fact{padding:30px 0;text-align:center;border-right:1px solid var(--line)}
.fact:nth-child(2n){border-right:0}
.fact:nth-child(n+3){border-top:1px solid var(--line)}
.fact b{display:block;font:800 clamp(24px,3.4vw,40px)/1 var(--f-d);text-transform:uppercase}
.fact span{display:block;margin-top:8px;color:var(--ink2)}
@media (min-width:860px){.facts{grid-template-columns:repeat(4,1fr)}.fact{border-right:1px solid var(--line)}.fact:nth-child(2n){border-right:1px solid var(--line)}.fact:last-child{border-right:0}.fact:nth-child(n+3){border-top:0}}

/* FAQ */
.faq details{border-bottom:1px solid var(--line);padding:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:22px 0;gap:20px;font:200 clamp(20px,2.4vw,28px)/1.2 var(--f-d);text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:200;font-size:1.4em;line-height:1;transition:transform .5s var(--e1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:-8px 0 0;padding-bottom:22px;max-width:56ch;color:var(--ink2)}

/* footer */
footer{background:var(--ink);color:var(--bg);padding:72px 0 40px}
body[data-theme="aftersunset"] footer{background:#0E0609;color:#F3E7E2}
footer .logo-f{height:22px;width:auto;margin-bottom:28px}
footer .fgrid{display:grid;gap:36px;grid-template-columns:1fr}
footer a{text-decoration:none;opacity:.85}footer a:hover{opacity:1;text-decoration:underline}
footer ul{list-style:none;display:grid;gap:8px}
footer .legal{margin-top:56px;font-size:13px;opacity:.65}
@media (min-width:760px){footer .fgrid{grid-template-columns:2fr 1fr 1fr}}

/* ===== scent page ===== */
.journey{background:var(--bg)}
.journey .lanes{display:grid;gap:0;margin-top:56px}
.lane{display:grid;gap:18px;padding:40px 0;border-top:1px solid var(--line);grid-template-columns:1fr;position:relative}
.lane .when{color:var(--ink2)}
.lane h3{font-size:clamp(30px,5vw,64px);text-transform:uppercase;line-height:1}
.lane h3 b{font-weight:800}
.lane .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.chip{padding:10px 18px;border:1px solid var(--line);border-radius:999px;font:400 13px/1 var(--f-m);letter-spacing:.1em;text-transform:uppercase;transition:background .5s var(--e1),color .5s var(--e1),border-color .5s var(--e1)}
.lane.lit .chip{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.lane p{color:var(--ink2);max-width:46ch}
.lane .bar{position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--e1)}
.lane.lit .bar{transform:scaleX(1)}
@media (min-width:860px){.lane{grid-template-columns:200px 1.1fr 1fr;gap:40px;align-items:start}}

/* ritual: hold to wear */
.ritual{background:var(--bg2);text-align:center;overflow:hidden}
.ritual .big{margin-inline:auto;max-width:12ch}
.holdbox{position:relative;margin:56px auto 0;width:min(78vw,340px);aspect-ratio:1}
.holdbtn{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--warm) 70%,#fff),color-mix(in srgb,var(--accent) 55%,var(--bg2)));box-shadow:inset 0 0 0 1px var(--line)}
.holdbtn .lbl{font:500 12px/1.6 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-align:center;padding:0 24px;mix-blend-mode:normal}
body[data-theme="aftersunset"] .holdbtn .lbl{color:#1B0E13}
.holdbox svg{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);transform:rotate(-90deg);pointer-events:none}
.holdbox circle{fill:none;stroke-width:2}
.holdbox .bg{stroke:var(--line)}
.holdbox .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:calc(1000 - 1000*var(--hp,0))}
body[data-theme="aftersunset"] .holdbox .fg{stroke:var(--warm)}
.rings span{position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);opacity:0;transform:scale(.9);pointer-events:none}
.holding .rings span{animation:ripple 3.2s var(--e1) infinite}
.holding .rings span:nth-child(2){animation-delay:-1.07s}.holding .rings span:nth-child(3){animation-delay:-2.13s}
@keyframes ripple{0%{opacity:.7;transform:scale(.92)}100%{opacity:0;transform:scale(1.9)}}
.rnotes{display:grid;gap:0;margin:48px auto 0;max-width:560px}
.rnote{padding:18px 0;border-top:1px solid var(--line);opacity:.28;transition:opacity .9s var(--e1);display:flex;justify-content:space-between;gap:18px;text-align:left}
.rnote.on{opacity:1}
.rnote .mono{color:var(--ink2);min-width:96px}
.rnote span:last-child{font:200 clamp(18px,2.4vw,24px)/1.3 var(--f-d);text-transform:uppercase;text-align:right}
.rdone{margin-top:30px;min-height:34px;font:200 clamp(22px,3vw,34px)/1.2 var(--f-d);text-transform:uppercase;opacity:0;transform:translateY(10px);transition:opacity 1s var(--e1),transform 1s var(--e1)}
.rdone.on{opacity:1;transform:none}

/* buy block */
.buy{background:var(--bg)}
.buygrid{display:grid;gap:40px;grid-template-columns:1fr}
@media (min-width:900px){.buygrid{grid-template-columns:1.1fr 1fr;gap:80px;align-items:start}.gal{position:sticky;top:calc(var(--nav-h) + 24px)}}
.gal{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:22px}
.gal::-webkit-scrollbar{display:none}
.gal figure{flex:0 0 100%;scroll-snap-align:center;border-radius:22px;overflow:hidden;background:linear-gradient(170deg,var(--bg2),color-mix(in srgb,var(--accent) 25%,var(--bg2)));aspect-ratio:4/5;display:grid;place-items:center}
.gal figure img{width:100%;height:100%;object-fit:cover}
.gal figure.cut img{width:auto;height:84%;object-fit:contain;filter:drop-shadow(0 26px 28px rgba(0,0,0,.3))}
.dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .4s var(--e1),transform .4s var(--e1)}
.dots i.on{background:var(--ink);transform:scale(1.3)}
.pbox h2{font-size:clamp(38px,5.4vw,72px);text-transform:uppercase;line-height:1}
.pbox h2 b{font-weight:800}.pbox h2 i{font-style:normal;font-weight:200}
.pbox .price{margin-top:18px;font:500 22px var(--f-m)}
.pbox .meta{margin-top:6px;color:var(--ink2)}
.pbox .list{margin:28px 0;display:grid;gap:12px;list-style:none}
.pbox .list li{padding:14px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px}
.pbox .list li span:first-child{color:var(--ink2)}
.pbox .list li span:last-child{text-align:right}
.buyrow{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin-top:8px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;height:48px}
.qty button{width:48px;height:100%;font-size:20px;line-height:1}
.qty output{min-width:28px;text-align:center;font:500 14px var(--f-m)}
.buyrow .btn{flex:1 1 220px}
.pbox .small{margin-top:16px;color:var(--ink2);font-size:14px}

/* others */
.others{background:var(--bg2)}
.orow{display:grid;gap:16px;margin-top:40px;grid-template-columns:1fr}
@media (min-width:700px){.orow{grid-template-columns:1fr 1fr}}
.orow .card{min-height:420px}
.orow .card img.bt{height:240px}

/* cart drawer */
.veil{position:fixed;inset:0;background:rgba(10,8,6,.55);opacity:0;pointer-events:none;transition:opacity .6s var(--e1);z-index:80}
.veil.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--bg);color:var(--ink);z-index:90;transform:translateX(104%);transition:transform .7s var(--e1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer .items{flex:1;overflow:auto;padding:8px 24px}
.ci{display:grid;grid-template-columns:72px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.ci img{width:72px;height:90px;object-fit:contain}
.ci h4{font:800 15px/1.1 var(--f-d);text-transform:uppercase}.ci h4 i{font-weight:200;font-style:normal}
.ci small{color:var(--ink2);display:block;margin-top:4px}
.ci .qty{height:36px;margin-top:10px}.ci .qty button{width:36px}
.ci .x{align-self:start;font:400 12px var(--f-m);color:var(--ink2);padding:6px}
.drawer footer{background:transparent;color:inherit;padding:20px 24px 26px;border-top:1px solid var(--line)}
.drawer .tot{display:flex;justify-content:space-between;font:500 16px var(--f-m);margin-bottom:14px}
.drawer .btn{width:100%}
.drawer .note{margin-top:12px;font-size:13px;color:var(--ink2)}
.empty{padding:60px 0;text-align:center;color:var(--ink2)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--cta);color:var(--cta-ink);padding:14px 22px;border-radius:999px;font:400 13px var(--f-m);letter-spacing:.08em;opacity:0;pointer-events:none;transition:all .6s var(--e1);z-index:100;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* one environment: a slow light that drifts behind the page */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60vmax 60vmax at 20% 10%,color-mix(in srgb,var(--warm) 18%,transparent),transparent 70%),radial-gradient(50vmax 50vmax at 90% 90%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%);animation:envdrift 70s var(--e2) infinite alternate -20s}
@keyframes envdrift{to{transform:translate3d(-3%,2%,0) scale(1.06)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv .r{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media (max-width:720px),(orientation:portrait){body[data-theme="amalfi"],body[data-theme="sunkissed"]{--sa:.9}body[data-theme="home"]{--sa:.8}.band::before{background:radial-gradient(ellipse 120% 70% at 50% 50%,rgba(5,5,10,var(--sa)) 0%,rgba(5,5,10,calc(var(--sa)*.88)) 58%,rgba(5,5,10,0) 96%)}}
@media (max-height:560px){.chev,.dots{display:none}}

/* ===== v2: printed-label language. Square corners, foil hairlines, real photography. ===== */
main section{background-image:var(--grain)}
.btn{border-radius:0;min-height:52px;padding:0 30px;font:500 12px/1 var(--f-d);letter-spacing:.22em;box-shadow:inset 0 0 0 1px transparent;transition:background .3s var(--e1),color .3s var(--e1),box-shadow .3s var(--e1),transform .3s var(--e1)}
.btn::after{display:none}
.btn:hover{transform:none}@media (hover:hover){.btn:hover{box-shadow:inset 0 0 0 1px var(--foil),0 8px 0 -6px var(--foil)}}
.btn.ghost{box-shadow:inset 0 0 0 1px currentColor}
@media (hover:hover){.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--foil)}}
@media (hover:hover){.band .btn:not(.ghost):hover{background:#fff}}
.nav ul a,.cartbtn{font:500 11px/1 var(--f-d);letter-spacing:.22em}
.cartbtn .n{border-radius:0;min-width:22px;height:22px}
.nav.solid{background:color-mix(in srgb,var(--bg) 94%,transparent);box-shadow:0 1px 0 var(--line)}
.eyebrow{display:none}
.big{font-size:clamp(36px,6.8vw,98px);line-height:.98;text-transform:none;font-weight:200;letter-spacing:-.01em}
.big b{font-weight:800;letter-spacing:-.015em}
.lede{font-size:clamp(17px,1.4vw + 9px,21px);line-height:1.6}

/* manifesto: one confident statement, ragged right, with an index of moments */
.mani .grid{display:grid;gap:48px;grid-template-columns:1fr}
.mani .big{max-width:11ch}
.mani .idx{list-style:none;border-top:1px solid var(--foil)}
.mani .idx li{border-bottom:1px solid var(--line)}
.mani .idx a{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:baseline;padding:22px 0;text-decoration:none;transition:padding .3s var(--e1)}
@media (hover:hover){.mani .idx a:hover{padding-left:12px}}
.mani .idx em{font:200 14px var(--f-d);font-style:normal;color:var(--ink2)}
.mani .idx strong{font:200 clamp(24px,3vw,38px)/1.1 var(--f-d)}
.mani .idx strong b{font-weight:800}
.mani .idx span{font-size:14px;color:var(--ink2)}
.mani .copy{max-width:44ch;color:var(--ink2);margin-top:28px}
@media (min-width:900px){.mani .grid{grid-template-columns:1.1fr 1fr;gap:96px;align-items:end}}

/* panels: the box art is the image */
.cards{gap:clamp(14px,2vw,28px);margin-top:48px;align-items:start}
.card{border-radius:0;min-height:0;background:none;color:var(--ink);display:block;overflow:visible}
.card:hover{transform:none;box-shadow:none}
.card .glow,.card .c-top{display:none}
.card .ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg2)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e1)}
.card:hover .ph img{transform:scale(1.045)}
.card .ph::after{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,#fff 62%,transparent);pointer-events:none;transition:inset .5s var(--e1)}
.card:hover .ph::after{inset:16px}
.card .ph .no{position:absolute;left:22px;top:20px;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.45);z-index:1}
.card .c-bot{padding:18px 2px 0}
.card h3{font-size:clamp(26px,2.6vw,34px);text-transform:none;line-height:1.05}
.card .notes{margin-top:6px;font-size:15px;opacity:.75}
.card .c-row{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.card .price{font:500 15px var(--f-d);letter-spacing:.04em}
.card .go{font:500 11px var(--f-d);letter-spacing:.22em;border-bottom:1px solid var(--foil)}
@media (min-width:900px){.cards .card:nth-child(2){margin-top:56px}}
.orow .card .ph{aspect-ratio:5/4}
.orow .card:nth-child(2){margin-top:0}

/* steps and lanes lose the pills */
.step h3,.lane h3{text-transform:none}
.step h3 b{font-weight:800}
.chips{gap:0 !important}
.chip{border:0;border-radius:0;padding:4px 14px 4px 0;margin-right:14px;border-right:1px solid var(--line);font:400 15px/1.2 var(--f-b);letter-spacing:0;text-transform:none;color:var(--ink2);background:none !important}
.chip:last-child{border-right:0}
.lane.lit .chip{color:var(--ink)}
.lane .bar{background:var(--foil)}
.fact b{text-transform:none}
.faq summary{text-transform:none;font-size:clamp(20px,2.2vw,26px)}

/* gallery + product: square, framed like the label */
.gal figure{border-radius:0}
.gal{border-radius:0;position:relative}
.gal figure{background:var(--bg2);position:relative}
.gal figure::after{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--foil) 80%,transparent);pointer-events:none}
.gal figure.cut{background:linear-gradient(180deg,var(--bg2),color-mix(in srgb,var(--bg2) 82%,var(--foil)))}
.dots i{border-radius:0;width:18px;height:2px;transform:none !important}
.pbox h2{text-transform:none}
.qty{border-radius:0}
.pbox .list li:first-child{border-top-color:var(--foil)}

/* ritual: a ring, nothing else */
.holdbtn{background:var(--bg);box-shadow:inset 0 0 0 1px var(--foil)}
.holdbtn .lbl{font:500 11px/1.8 var(--f-d);letter-spacing:.26em}
.holdbox .fg{stroke:var(--foil)}
.rings span{border-color:var(--foil)}
.rnote span:last-child{text-transform:none}
.rdone{text-transform:none}
.ritual .big{max-width:9ch}

body[data-theme="aftersunset"] .nav.solid{box-shadow:0 1px 0 rgba(243,231,226,.18)}
.card h3.dt,.pbox h2.dt{text-transform:uppercase}
.lane h3.dt,.step h3.dt{text-transform:none}

/* v3: packshots are cut out and stand on tinted, lit surfaces. No white boxes anywhere. */
.card.amalfi{--pa:#EEF3EE;--pb:#C9DDD9;--pi:#12313F}
.card.sunkissed{--pa:#F5E9DA;--pb:#E3C5A6;--pi:#3A271C}
.card.aftersunset{--pa:#4A1A24;--pb:#170A0F;--pi:#F3E7E2}
.card .ph{background:radial-gradient(120% 90% at 50% 38%,var(--pa),var(--pb));display:grid;place-items:end center}
.card .ph::before{content:"";position:absolute;left:12%;right:12%;bottom:7%;height:7%;background:radial-gradient(closest-side,rgba(0,0,0,.34),transparent);filter:blur(6px)}
.card .ph img{position:relative;width:auto;height:84%;max-width:88%;object-fit:contain;margin-bottom:9%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.28))}
.card .ph::after{border-color:color-mix(in srgb,var(--foil) 75%,transparent)}
.card .ph .no{color:var(--pi);text-shadow:none;opacity:.75}
.card:hover .ph img{transform:scale(1.035)}
.gal figure{background:radial-gradient(120% 90% at 50% 38%,var(--bg),var(--bg2))}
.gal figure.cut img{height:86%;margin-top:6%}
body[data-theme="aftersunset"] .gal figure{background:radial-gradient(120% 90% at 50% 38%,#4A1A24,#170A0F)}
/* keep bottle proportions: never fix a width next to a fixed height */

/* ===== v4: quieter type, full-bleed scenes instead of boxes ===== */
.big{font-size:clamp(30px,4.6vw,68px);font-weight:200;letter-spacing:-.005em;line-height:1.02}
.big b,.step h3 b,.lane h3 b,.mani .idx strong b,.fact b{font-weight:600}
.band h2 .w b{font-weight:600}
.dt b{font-weight:700}
.sec{padding:clamp(96px,14vw,200px) 0}
.mani .big{max-width:13ch}
.step h3,.lane h3{font-size:clamp(24px,2.8vw,38px)}
.step h3 i,.lane h3 i{font-weight:200}

/* the three scents: full-height scenes, the bottle stands in them */
.trio-sec{background:#14100c;padding:0}
.trio{display:flex;height:min(92vh,900px);min-height:560px}
.col{position:relative;flex:1 1 0;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;transition:flex-grow .7s var(--e1)}
.col+.col{border-left:1px solid rgba(255,255,255,.14)}
.col .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.02);transition:transform 1.4s var(--e1);z-index:-2}
.col::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,5,10,.5) 0%,rgba(5,5,10,.05) 38%,rgba(5,5,10,.72) 100%)}
.col.amalfi .bg{background-image:url(amalfi-poster-d.jpg)}.col.sunkissed .bg{background-image:url(sun-poster-d.jpg)}.col.aftersunset .bg{background-image:url(dusk-poster-d.jpg)}
.col .bt{position:absolute;left:50%;bottom:11%;height:56%;width:auto;transform:translateX(-50%);filter:drop-shadow(0 26px 30px rgba(0,0,0,.5));transition:transform .9s var(--e1)}
.col .tx{position:absolute;left:clamp(20px,2.4vw,40px);top:clamp(20px,3vh,36px);right:20px;display:grid;gap:8px;text-shadow:0 1px 16px rgba(0,0,0,.45)}
.col .no{font:300 13px var(--f-d);letter-spacing:.2em;opacity:.8}
.col .nm{font:200 clamp(24px,2.6vw,38px)/1.02 var(--f-d);text-transform:uppercase;letter-spacing:.02em}
.col .nm b{font-weight:700}
.col .tg{font-size:15px;opacity:.88}
.col .ft{position:absolute;left:clamp(20px,2.4vw,40px);right:clamp(20px,2.4vw,40px);bottom:clamp(18px,3vh,32px);display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid rgba(255,255,255,.35)}
.col .price{font:400 15px var(--f-d);letter-spacing:.06em}
.col .go{font:500 11px var(--f-d);letter-spacing:.22em;text-transform:uppercase}
@media (hover:hover){.trio:hover .col{flex-grow:.82}.trio .col:hover{flex-grow:1.5}.col:hover .bg{transform:scale(1.07)}.col:hover .bt{transform:translateX(-50%) translateY(-12px)}}
@media (max-width:760px),(orientation:portrait){
  .trio{flex-direction:column;height:auto;min-height:0}
  .col{flex:none;height:78svh;min-height:480px}
  .col+.col{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .col.amalfi .bg{background-image:url(amalfi-poster-m.jpg)}.col.sunkissed .bg{background-image:url(sun-poster-m.jpg)}.col.aftersunset .bg{background-image:url(dusk-poster-m.jpg)}
  .col .bt{height:50%;bottom:13%}
}
.others-sec{background:#14100c}
.trio.two{height:min(72vh,700px)}
@media (max-width:760px),(orientation:portrait){.trio.two{height:auto}}
.others-sec .sets{padding:34px var(--pad) 48px;color:#fff;text-align:center}

/* product stage: the bottle in its own scene, no frames, no boxes */
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative;aspect-ratio:4/5;background-color:#14100c;background-size:cover;background-position:center}
.gal.th-amalfi{background-image:linear-gradient(180deg,rgba(5,5,10,.25),rgba(5,5,10,.5)),url(amalfi-poster-m.jpg)}
.gal.th-sunkissed{background-image:linear-gradient(180deg,rgba(5,5,10,.2),rgba(5,5,10,.5)),url(sun-poster-m.jpg)}
.gal.th-aftersunset{background-image:linear-gradient(180deg,rgba(5,5,10,.25),rgba(5,5,10,.55)),url(dusk-poster-m.jpg)}
.gal figure{flex:0 0 100%;scroll-snap-align:center;position:relative;border-radius:0;background:none !important;aspect-ratio:auto;display:block}
.gal figure::after{display:none}
.gal figure img{position:absolute;left:12%;right:12%;top:9%;bottom:9%;width:76%;height:82%;margin:auto;object-fit:contain;filter:drop-shadow(0 28px 32px rgba(0,0,0,.5))}
.dots i{background:var(--line)}.dots i.on{background:var(--ink)}


/* ===== v5: bottles are grounded objects: contact shadow, floor reflection, scene-matched light ===== */
.bw{position:relative;display:block;aspect-ratio:444/1100;isolation:isolate;flex:none}
.bw img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(.94) contrast(1.04) saturate(.95)}
.bw::before{content:"";position:absolute;left:4%;right:4%;bottom:-1.2%;height:5.5%;z-index:-1;background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,0));filter:blur(4px)}
.bw::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(98deg,rgba(255,196,140,.14) 0%,rgba(0,0,0,0) 38%,rgba(8,3,2,.4) 100%),linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(8,3,2,.32) 100%);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}
.bw .rf{position:absolute;left:0;top:100%;width:100%;height:100%;transform:scaleY(-1);opacity:.2;filter:blur(.7px);-webkit-mask-image:linear-gradient(to top,#000,rgba(0,0,0,0) 40%);mask-image:linear-gradient(to top,#000,rgba(0,0,0,0) 40%);pointer-events:none}
.bw.amalfi{--m:url(img/amalfi-bottle.webp)}.bw.sunkissed{--m:url(img/sunkissed-bottle.webp)}.bw.aftersunset{--m:url(img/aftersunset-bottle.webp)}
body[data-theme="amalfi"] .band .bw::after,body[data-theme="sunkissed"] .band .bw::after{background:linear-gradient(98deg,rgba(255,236,200,.1) 0%,rgba(0,0,0,0) 40%,rgba(20,12,6,.3) 100%),linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(20,12,6,.22) 100%);-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat}

/* hero ending: three bottles, one baseline, one height */
.bottles{position:absolute;left:0;right:0;bottom:0;height:56%;display:flex;justify-content:center;align-items:flex-end;gap:clamp(14px,4vw,64px);pointer-events:none;padding-bottom:clamp(60px,13vh,150px)}
.bottles .bw{height:clamp(150px,29vh,310px);--kb:clamp(0,(var(--k,0) - var(--bt,.4))*3.4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*60px))}
.bottles .bw:nth-child(2){--bt:.5}.bottles .bw:nth-child(3){--bt:.6}
.band .bw.one{position:absolute;left:50%;bottom:clamp(60px,12vh,140px);height:clamp(190px,34vh,380px);transform:translateX(-50%) translateY(calc((1 - var(--kb,1))*70px));--kb:clamp(0,(var(--k,0) - .45)*3,1);opacity:var(--kb)}
.hero.is-static .bottles .bw{opacity:1;transform:none}.hero.is-static .band .bw.one{opacity:1;transform:translateX(-50%)}

/* scene columns and product stage */
.col .bw.bt{position:absolute;left:50%;bottom:15%;height:54%;transform:translateX(-50%);transition:transform .9s var(--e1)}
@media (hover:hover){.col:hover .bw.bt{transform:translateX(-50%) translateY(-10px)}}
@media (max-width:760px),(orientation:portrait){.col .bw.bt{height:48%;bottom:17%}}
.gal figure .bw{position:absolute;left:50%;top:9%;bottom:18%;height:73%;transform:translateX(-50%)}
.gal figure .bw.pk{aspect-ratio:1000/1200;height:73%}
.gal figure img{position:static;width:100%;height:100%;left:auto;right:auto;top:auto;bottom:auto;margin:0;filter:brightness(.95) contrast(1.03)}
.bottles .bw{height:clamp(140px,26vh,280px)}
.bottles{padding-bottom:clamp(54px,11vh,130px)}
.jgrid{display:grid;gap:48px;margin-top:56px}
.jgrid .lanes{margin-top:0}
.zut img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
@media (min-width:960px){.jgrid{grid-template-columns:1.2fr 1fr;gap:72px;align-items:start}.zut{position:sticky;top:calc(var(--nav-h) + 28px)}}

/* ===== v6: the story is told in pictures: short beats, a bottle that lives in the scene, drifting light ===== */
.band{z-index:3}
.stage canvas.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.hbottle{position:absolute;left:50%;bottom:clamp(50px,8vh,100px);height:clamp(170px,30vh,330px);z-index:2;pointer-events:none;opacity:var(--hb,0);transform:translateX(-50%) translateY(calc((1 - var(--hb,0))*70px)) scale(calc(1 + var(--hs,0)*.2));transform-origin:50% 100%}
.hbottle .bw{height:100%}
.hbottle .glint{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(104deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 64%);background-size:320% 100%;background-position:calc(100% - var(--gp,0)*100%) 0;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;mix-blend-mode:soft-light}
.band.beat{justify-content:flex-start;padding:calc(var(--nav-h) + clamp(36px,11vh,130px)) var(--pad) 0}
.band.beat::before{background:radial-gradient(ellipse 100% 62% at 50% 30%,rgba(5,5,10,var(--sa)) 0%,rgba(5,5,10,calc(var(--sa)*.86)) 55%,rgba(5,5,10,0) 96%)}
.band h2.beat-h{font-size:clamp(32px,6.2vw,92px);font-weight:200;text-transform:none;letter-spacing:-.012em;line-height:1.05;max-width:20ch}
.band h2.beat-h .ln{display:block}
.band h2.beat-h b{font-weight:600}
.band .rule{display:block;width:min(180px,36vw);height:1px;background:#E4C98E;margin:clamp(18px,3vh,30px) auto 0;transform:scaleX(clamp(0,(var(--k,0) - .3)*2.2,1));transform-origin:center}
.band.settle .sbt{display:none}
.band.title{justify-content:flex-start;padding-top:calc(var(--nav-h) + clamp(36px,11vh,130px))}
.band.title::before{background:radial-gradient(ellipse 100% 62% at 50% 30%,rgba(5,5,10,var(--sa)) 0%,rgba(5,5,10,calc(var(--sa)*.86)) 55%,rgba(5,5,10,0) 96%)}
@media (max-width:720px),(orientation:portrait){.band.beat::before,.band.title::before{background:radial-gradient(ellipse 125% 58% at 50% 28%,rgba(5,5,10,var(--sa)) 0%,rgba(5,5,10,calc(var(--sa)*.88)) 58%,rgba(5,5,10,0) 97%)}.hbottle{height:clamp(150px,27vh,260px)}}
.hero.is-static .hbottle,.hero.is-static canvas.fx{display:none}
.hero.is-static .band.settle .sbt{display:block;height:38svh;margin-top:28px}
.hero.is-static .band.settle .sbt .bw{height:100%}
.full{margin-top:56px;border-top:1px solid var(--foil);padding-top:22px;max-width:62ch}
.full summary{cursor:pointer;list-style:none;font:500 11px var(--f-d);letter-spacing:.24em;text-transform:uppercase;display:flex;justify-content:space-between;gap:16px}
.full summary::-webkit-details-marker{display:none}
.full summary::after{content:"+";font:200 22px/1 var(--f-d);transition:transform .4s var(--e1)}
.full[open] summary::after{transform:rotate(45deg)}
.full div{margin-top:20px;display:grid;gap:1em;color:var(--ink2)}

/* ===== v7: canvas film, review fixes ===== */
.stage .film{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s var(--e1);transform:translateZ(0);will-change:transform}
.stage.video-ready .film{opacity:1}
.stage.video-failed .film{display:none}
.stage.video-ready .ring{opacity:.0}
.stage:not(.film-loaded).video-ready .ring{opacity:.55;width:22px;height:22px;margin-left:-11px;bottom:calc(env(safe-area-inset-bottom) + 18px)}
.stage.film-loaded .ring,.stage.video-failed .ring{opacity:0}
.scrim{background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,8,6,0) 40%,rgba(10,8,6,.34) 100%)}
.env{display:none}
.pbox .price,.pbox .price.r{font:300 28px/1 var(--f-d);letter-spacing:.03em}
.big,.band h2,.band .sub,.lede,.card .notes{text-wrap:balance}
p,dd,li{text-wrap:pretty}
.ps-copy .big{max-width:12ch}
.band .sub{max-width:40ch}
body[data-theme="aftersunset"] .holdbtn{background:radial-gradient(circle at 50% 40%,#3A1620,#170A0F)}
body[data-theme="aftersunset"] .holdbtn .lbl{color:var(--foil)}
.col .bw.bt::before{bottom:-1%}
@media (max-width:600px){.band .cta-row{flex-direction:column;align-items:center}.band .cta-row .btn{width:min(300px,100%)}}
/* tighter, lighter text scrims: dim the words, not the picture */
body[data-theme="home"]{--sa:.6}body[data-theme="amalfi"]{--sa:.62}body[data-theme="sunkissed"]{--sa:.62}body[data-theme="aftersunset"]{--sa:.56}
.band::before{background:radial-gradient(ellipse 70% 48% at 50% 50%,rgba(5,5,10,var(--sa)) 0%,rgba(5,5,10,calc(var(--sa)*.8)) 50%,rgba(5,5,10,0) 100%)}
.band.beat::before,.band.title::before{background:radial-gradient(ellipse 82% 44% at 50% 26%,rgba(5,5,10,var(--sa)) 0%,rgba(5,5,10,calc(var(--sa)*.8)) 52%,rgba(5,5,10,0) 100%)}
@media (max-width:720px),(orientation:portrait){
  body[data-theme="home"]{--sa:.66}body[data-theme="amalfi"],body[data-theme="sunkissed"]{--sa:.7}body[data-theme="aftersunset"]{--sa:.56}
  .band::before{background:radial-gradient(ellipse 120% 44% at 50% 50%,rgba(5,5,10,var(--sa)) 0%,rgba(5,5,10,calc(var(--sa)*.82)) 55%,rgba(5,5,10,0) 100%)}
  .band.beat::before,.band.title::before{background:radial-gradient(ellipse 125% 42% at 50% 24%,rgba(5,5,10,var(--sa)) 0%,rgba(5,5,10,calc(var(--sa)*.82)) 56%,rgba(5,5,10,0) 100%)}
}
.band.settle::before{background:radial-gradient(ellipse 84% 50% at 50% 27%,rgba(5,5,10,min(.86,calc(var(--sa)*1.3))) 0%,rgba(5,5,10,calc(var(--sa)*1.0)) 55%,rgba(5,5,10,0) 100%)}
.band.title::before{background:radial-gradient(ellipse 86% 50% at 50% 27%,rgba(5,5,10,min(.86,calc(var(--sa)*1.3))) 0%,rgba(5,5,10,calc(var(--sa)*1.0)) 55%,rgba(5,5,10,0) 100%)}
@media (max-width:720px),(orientation:portrait){.band.settle::before,.band.title::before{background:radial-gradient(ellipse 130% 48% at 50% 25%,rgba(5,5,10,min(.88,calc(var(--sa)*1.3))) 0%,rgba(5,5,10,var(--sa)) 58%,rgba(5,5,10,0) 100%)}}

/* sound switch */
.snd{display:inline-flex;align-items:center;gap:9px;padding:14px 10px;margin-left:auto;margin-right:6px;font:500 11px/1 var(--f-d);letter-spacing:.22em;text-transform:uppercase;color:inherit}
.snd .bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.snd .bars i{width:2px;height:3px;background:currentColor;transition:height .4s var(--e1)}
.snd.on .bars i{animation:eq 1.1s var(--e2) infinite}
.snd.on .bars i:nth-child(2){animation-delay:-.3s}.snd.on .bars i:nth-child(3){animation-delay:-.6s}.snd.on .bars i:nth-child(4){animation-delay:-.9s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}
.snd.wait .sl::after{content:" ?"}
.nav{gap:14px}
@media (max-width:760px){.snd .sl{display:none}.snd{margin-right:0}}
/* scent mist while the ritual is held */
.holdbox .mist{position:absolute;inset:-10%;pointer-events:none;z-index:-1}
.holdbox .mist i{position:absolute;left:50%;bottom:44%;width:46%;aspect-ratio:1;margin-left:-23%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--warm) 70%,transparent),transparent);opacity:0;transform:translate3d(0,0,0) scale(.5)}
.holding .mist i{animation:mist 4.2s var(--e1) infinite}
.holding .mist i:nth-child(1){animation-delay:-.2s;margin-left:-32%}
.holding .mist i:nth-child(2){animation-delay:-1.1s;margin-left:-10%;width:56%}
.holding .mist i:nth-child(3){animation-delay:-2.0s;margin-left:-2%}
.holding .mist i:nth-child(4){animation-delay:-2.7s;margin-left:-24%;width:38%}
.holding .mist i:nth-child(5){animation-delay:-3.3s;margin-left:6%;width:42%}
.holding .mist i:nth-child(6){animation-delay:-3.8s;margin-left:-16%;width:50%}
@keyframes mist{0%{opacity:0;transform:translate3d(0,40%,0) scale(.5)}20%{opacity:.55}100%{opacity:0;transform:translate3d(6%,-160%,0) scale(2.1)}}
.holdbox{--mist:calc(.35 + var(--hp,0)*.65)}
.holdbox .mist{opacity:var(--mist)}
@media (prefers-reduced-motion:reduce){.holding .mist i,.snd.on .bars i{animation:none}}


/* ===== v8: review round 2 ===== */
.nav:not(.solid)::before{content:"";position:absolute;inset:0 0 -40px 0;z-index:-1;pointer-events:none;background:linear-gradient(rgba(8,10,14,.78),rgba(8,10,14,.46) 55%,rgba(8,10,14,0))}
.nav.solid{background:color-mix(in srgb,var(--bg) 88%,transparent)}
.stage::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.8;pointer-events:none;z-index:1}
.sec{padding:clamp(72px,9vw,130px) 0}
.mani{padding-bottom:clamp(56px,7vw,100px)}
.mani .big{max-width:14ch;font-size:clamp(38px,6vw,92px)}
.mani .copy{max-width:42ch;margin-top:32px}
.mani .grid{display:block}

/* bottles: grounded on every surface */
.bw::before{left:-2%;right:-2%;bottom:-2.4%;height:8%;background:radial-gradient(closest-side,rgba(0,0,0,.85),rgba(0,0,0,.35) 55%,rgba(0,0,0,0));filter:blur(5px)}
body[data-theme="sunkissed"] .bw::before{background:radial-gradient(closest-side,rgba(52,26,10,.85),rgba(52,26,10,.35) 55%,rgba(52,26,10,0))}
body[data-theme="amalfi"] .bw::before{background:radial-gradient(closest-side,rgba(8,20,28,.85),rgba(8,20,28,.35) 55%,rgba(8,20,28,0))}
body[data-theme="amalfi"] .bw .rf,body[data-theme="sunkissed"] .bw .rf{display:none}
.hbottle .bw img,.bottles .bw img{filter:brightness(.95) contrast(1.05) saturate(.96) drop-shadow(0 0 18px rgba(255,190,120,.16))}
.bottles .bw{height:clamp(160px,31vh,330px)}
.hbottle{height:clamp(200px,36vh,400px);bottom:clamp(54px,8vh,100px)}
@media (max-width:720px),(orientation:portrait){.hbottle{height:clamp(170px,30vh,300px)}.bottles .bw{height:clamp(150px,27vh,270px)}}

/* scene columns: readable text on bright skies */
.col::after{background:linear-gradient(180deg,rgba(5,8,12,.62) 0%,rgba(5,8,12,.2) 34%,rgba(5,8,12,.05) 52%,rgba(5,8,12,.78) 100%)}
.col.aftersunset .bg{background-position:74% center}

/* product stage: even, full-bleed on phones, not sticky */
.gal{position:relative !important;top:auto !important;background-position:50% 72%}
@media (max-width:899px){.gal{margin-inline:calc(var(--pad)*-1)}.dots{margin-top:12px}}
.full{max-width:none}
footer ul{align-content:start}

/* ritual: a visible invitation, legible notes */
.holdbtn{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--warm) 42%,var(--bg2)),var(--bg2) 72%)}
body[data-theme="aftersunset"] .holdbtn{background:radial-gradient(circle at 50% 42%,#4A1A24,#170A0F 72%)}
.holdbtn::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--foil);opacity:0;pointer-events:none;animation:breath 4.2s var(--e2) infinite}
@keyframes breath{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.22)}}
.holdbox .bg{stroke-width:1}.holdbox .fg{stroke-width:1.5}
.holdbox .mist{opacity:.6}
.rnote{opacity:.8}.rnote.on{opacity:1}
.rnote span:last-child{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 .2em}
.rnote .n{white-space:nowrap}.rnote .n:not(:last-child)::after{content:" ·";opacity:.7}

/* the scent journey: each layer gets a picture */
.lane.has-img{grid-template-columns:1fr;gap:28px;align-items:center}
.lane.has-img .when{order:0}
.lanefig{overflow:hidden;background:var(--bg2)}
.lanefig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--e1)}
.lane.lit .lanefig img{transform:scale(1)}
@media (min-width:900px){
  .lane.has-img{grid-template-columns:1fr 1fr;gap:72px;padding:56px 0}
  .lane.has-img .when{position:absolute;top:22px;left:0}
  .lane.has-img:nth-child(even) .lt{order:2}
}
@media (prefers-reduced-motion:reduce){.holdbtn::before{animation:none}}
.lane.has-img h3{font-size:clamp(34px,4vw,60px)}
.lane.has-img .lt p{font-size:clamp(16px,1.3vw + 8px,20px);margin-top:14px}
.lane.has-img .chip{font-size:16px}


/* ===== v9: the bottle is in the film. Scenes are stills or films that already contain it. ===== */
.col .bg{background-size:cover;background-position:center bottom}
.col::after{background:linear-gradient(180deg,rgba(5,8,12,.55) 0%,rgba(5,8,12,.12) 30%,rgba(5,8,12,0) 55%,rgba(5,8,12,.7) 100%)}
.gal figure.scene{background:none}
.gal figure.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none}
.gal{background-image:none !important;background-color:#14100c}
.band.title,.band.beat,.band.settle{justify-content:flex-start}

/* settle on the home page: headline high, buttons below the bottles that are already in the film */
.band.homefin h2{font-size:clamp(34px,5.8vw,88px);max-width:none;white-space:nowrap}
.band.homefin .cta-row{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 4vh);margin:0}
/* phones: "Drei Düfte." / "Ab 1. November." (the fourth child of the line is the blank between the second and third word, see initHero) */
@media (max-width:720px),(orientation:portrait){.band.homefin h2{white-space:normal;max-width:none;font-size:clamp(34px,10vw,64px)}.band.homefin h2 .ln>span:nth-child(4){display:block}}
.band h2.beat-h{font-size:clamp(30px,5.3vw,80px)}
.band.title h2{font-size:clamp(34px,6.6vw,96px)}


/* ===== v10: text lives in the sky, the bottle lives in the film, buttons live below it ===== */
.band.title,.band.beat,.band.settle{padding-top:calc(var(--nav-h) + clamp(14px,4.5vh,56px))}
.band h2.beat-h{font-size:clamp(26px,4.3vw,62px);line-height:1.06}
.band.title h2,.band.settle h2{font-size:clamp(30px,5vw,72px)}
.band .sub{font-size:clamp(15px,1.35vw,19px);margin-top:clamp(8px,1.4vh,16px)}
.band.settle .cta-row{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 3.4vh);margin:0;padding:0 var(--pad)}
.band.title .tag{margin-bottom:10px}
@media (max-width:720px),(orientation:portrait){
  .band.title,.band.beat,.band.settle{padding-top:calc(var(--nav-h) + clamp(10px,3vh,40px))}
  .band h2.beat-h{font-size:clamp(25px,7.2vw,44px)}
  .band.title h2,.band.settle h2{font-size:clamp(28px,8.2vw,54px)}
  .band.settle .cta-row{flex-direction:row;flex-wrap:wrap;gap:8px}
  .band.settle .cta-row .btn{min-height:46px;padding:0 18px;font-size:11px}
  .band.settle .cta-row .btn{width:auto}
}
.nav .logo{margin-right:clamp(20px,3.2vw,56px)}
@media (max-width:760px){.nav .logo{margin-right:0}}


/* ritual: the bottle sits in the ring */
.holdbtn .hb{height:76%;width:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35));pointer-events:none;transition:transform .8s var(--e1)}
.holding .holdbtn .hb{transform:translateY(-4px) scale(1.04)}
.holdhint{margin-top:18px;color:var(--ink2)}
.rnote{opacity:1;transition:none}.rnote .n{transition:opacity .9s var(--e1)}.rnote:not(.on) .n{opacity:.85}
.rnote .mono{color:var(--ink2)}

/* scene columns: the image stops above the footer line, so price and link never sit on the bottle */
.col{background:#0e0b0a}
.col .bg{inset:0 0 9% 0;-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}
.col .ft{bottom:clamp(14px,2.4vh,26px)}

/* product stage: bottle larger in the frame */
.gal figure.scene img{transform:scale(1.28);transform-origin:50% 74%}
@media (max-width:899px){.ritual.sec{padding-bottom:clamp(40px,7vw,80px)}.buy.sec{padding-top:clamp(32px,6vw,72px)}}

/* v11: ritual bottle contained in the ring; sky scrim is a soft top gradient, not a slab */
.holdbtn .hb{position:absolute;left:50%;top:11%;height:78%;width:auto;transform:translateX(-50%);display:block}
.holding .holdbtn .hb{transform:translateX(-50%) translateY(-4px) scale(1.04)}
.band.title::before,.band.beat::before,.band.settle::before{inset:-2% 0 auto 0;height:62%;background:linear-gradient(180deg,rgba(5,5,10,var(--sa3,.6)) 0%,rgba(5,5,10,calc(var(--sa3,.6)*.78)) 34%,rgba(5,5,10,calc(var(--sa3,.6)*.3)) 64%,rgba(5,5,10,0) 100%)}
body[data-theme="amalfi"],body[data-theme="sunkissed"]{--sa3:.64}
body[data-theme="aftersunset"]{--sa3:.5}
body[data-theme="home"]{--sa3:.56}
@media (max-width:720px),(orientation:portrait){
  .band.title::before,.band.beat::before,.band.settle::before{height:54%;background:linear-gradient(180deg,rgba(5,5,10,var(--sa3,.6)) 0%,rgba(5,5,10,calc(var(--sa3,.6)*.8)) 40%,rgba(5,5,10,0) 100%)}
  body[data-theme="amalfi"],body[data-theme="sunkissed"]{--sa3:.58}
}
/* v12: sky scrim strong enough for every state of every film */
.band.title::before,.band.beat::before,.band.settle::before{height:68%;background:linear-gradient(180deg,rgba(5,5,10,var(--sa3,.7)) 0%,rgba(5,5,10,calc(var(--sa3,.7)*.9)) 40%,rgba(5,5,10,calc(var(--sa3,.7)*.4)) 72%,rgba(5,5,10,0) 100%)}
body[data-theme="amalfi"],body[data-theme="sunkissed"]{--sa3:.8}
body[data-theme="aftersunset"]{--sa3:.74}
body[data-theme="home"]{--sa3:.72}
@media (max-width:720px),(orientation:portrait){
  .band.title::before,.band.beat::before,.band.settle::before{height:60%;background:linear-gradient(180deg,rgba(5,5,10,var(--sa3,.7)) 0%,rgba(5,5,10,calc(var(--sa3,.7)*.9)) 44%,rgba(5,5,10,calc(var(--sa3,.7)*.35)) 76%,rgba(5,5,10,0) 100%)}
  body[data-theme="amalfi"],body[data-theme="sunkissed"]{--sa3:.78}
}

/* ===== pre-launch one-pager ===== */
.th-amalfi{--bg:#E6EFEC;--bg2:#D2E4E2;--ink:#12313F;--ink2:#3F5C68;--accent:#0E5C8A;--warm:#F2C230;--cta:#0E5C8A;--cta-ink:#FFFFFF;--line:rgba(18,49,63,.3);--sa3:.8}
.th-sunkissed{--bg:#F1E4D4;--bg2:#E8CFB5;--ink:#3A271C;--ink2:#6B4F3E;--accent:#D9622B;--warm:#F3B25A;--cta:#3A271C;--cta-ink:#F8EDDF;--line:rgba(58,39,28,.3);--sa3:.8}
.th-aftersunset{--bg:#1B0E13;--bg2:#2A1219;--ink:#F3E7E2;--ink2:#C7B0AA;--accent:#E04A3F;--warm:#C9A25B;--foil:#C9A25B;--cta:#F3E7E2;--cta-ink:#1B0E13;--line:rgba(243,231,226,.34);--sa3:.74}
.chap{position:relative}
.desc{background-color:var(--bg);color:var(--ink);background-image:var(--grain)}
.desc .big{max-width:none}
.desc .lede{max-width:40ch}
.desc .lanes{margin-top:48px}
.desc .descgo{margin-top:56px}
.desc .full{margin-top:48px}
.desc details.full div{color:var(--ink2)}

/* hero in static mode: every poster stays inside its own film */
.hero.is-static .stage .poster{position:absolute;inset:0}
.hero.is-static .stage{background:#14100c}

/* nav: the one action */
.btn.mini{min-height:38px;padding:0 18px;font-size:11px;letter-spacing:.2em}
.nav:not(.solid) .btn.mini{background:#F4EEE2;color:#2B2820}
.nav{gap:14px}
.nav ul{margin-right:auto;margin-left:clamp(12px,2vw,32px)}
.snd{margin-left:0}
@media (max-width:760px){.btn.mini{padding:0 14px}.nav ul{display:none}.snd{margin-left:auto}}

/* intro with countdown */
.pre-intro{background-color:var(--bg);background-image:var(--grain)}
.pre-intro .big{font-size:clamp(40px,7.4vw,112px);max-width:12ch;margin-top:10px}
.pre-intro .copy{max-width:46ch;margin-top:30px;color:var(--ink2)}
.cd{display:grid;grid-template-columns:repeat(4,1fr);max-width:720px;margin-top:56px;border-top:1px solid var(--foil);border-bottom:1px solid var(--line)}
.cd>div{padding:26px 0;text-align:left;border-right:1px solid var(--line);padding-left:clamp(10px,2.4vw,28px)}
.cd>div:last-child{border-right:0}
.cd b{display:block;font:200 clamp(38px,7vw,92px)/1 var(--f-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cd span{display:block;margin-top:8px;font:500 11px var(--f-d);letter-spacing:.24em;text-transform:uppercase;color:var(--ink2)}
.cd .opened{grid-column:1/-1;padding:30px;font:200 clamp(28px,4vw,52px) var(--f-d)}
.pre-intro .facts{margin-top:56px}

/* the list */
.presave{position:relative;background:#14090d;color:var(--ink);padding:clamp(80px,12vw,170px) 0;overflow:hidden;isolation:isolate}
.presave .ps-bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#14090d 0%,rgba(20,9,13,.78) 40%,rgba(20,9,13,.92) 100%),url(img/trio-scene-d.jpg) center bottom/cover}
@media (max-width:760px){.presave .ps-bg{background:linear-gradient(180deg,#14090d 0%,rgba(20,9,13,.8) 45%,rgba(20,9,13,.94) 100%),url(img/trio-scene-m.jpg) center bottom/cover}}
.ps{display:grid;gap:clamp(36px,5vw,72px);align-items:start}
@media (min-width:980px){.ps{grid-template-columns:1fr 1.05fr}}
.ps-copy .big{font-size:clamp(38px,6vw,84px);max-width:11ch;margin-top:12px}
.ps-copy .lede{max-width:40ch}
.ps-points{list-style:none;margin-top:30px;display:grid;gap:0;border-top:1px solid var(--foil)}
.ps-points li{padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.ps-points li::before{content:"";display:inline-block;width:18px;height:1px;background:var(--foil);vertical-align:middle;margin-right:14px}
.ps-card{background:rgba(20,9,13,.72);border:1px solid color-mix(in srgb,var(--foil) 55%,transparent);padding:clamp(22px,3.4vw,44px);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ps-form{display:grid;gap:22px}
.fld{display:grid;gap:6px}
.fld>span,.cc>span,.ph>span{font:500 11px var(--f-d);letter-spacing:.22em;text-transform:uppercase;color:var(--ink2)}
.fld em,.chk em{font-style:normal;opacity:.7;text-transform:none;letter-spacing:0}
.ps-form input[type=text],.ps-form input[type=email],.ps-form input[type=tel],.ps-form select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:300 18px/1.2 var(--f-b);padding:12px 0;border-radius:0;outline:0;transition:border-color .4s var(--e1)}
.ps-form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:24px}
.ps-form select option{color:#111}
.ps-form input:focus,.ps-form select:focus{border-bottom-color:var(--foil)}
.ps-form input[aria-invalid=true]{border-bottom-color:var(--accent)}
.fld.two{grid-template-columns:116px 1fr;gap:18px}
.cc,.ph{display:grid;gap:6px}
.picks{border:0;display:flex;flex-wrap:wrap;gap:10px}
.picks legend{font:500 11px var(--f-d);letter-spacing:.22em;text-transform:uppercase;color:var(--ink2);margin-bottom:12px;padding:0}
.pick{position:relative}
.pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pick span{display:block;padding:11px 16px;border:1px solid var(--line);font:400 13px/1 var(--f-d);letter-spacing:.08em;transition:background .35s var(--e1),color .35s var(--e1),border-color .35s var(--e1)}
.pick input:checked+span{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.pick input:focus-visible+span{outline:2px solid var(--warm);outline-offset:3px}
.chk{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;font-size:14px;line-height:1.5;color:var(--ink2);cursor:pointer}
.chk input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1px solid var(--line);margin-top:2px;position:relative;cursor:pointer;background:transparent}
.chk input:checked{background:var(--cta);border-color:var(--cta)}
.chk input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--cta-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk input:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
.chk a{color:var(--ink)}
.ps-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ps-form .msg{padding:12px 14px;border:1px solid var(--accent);color:var(--ink);font-size:14px}
.ps-form .btn{width:100%;min-height:58px;margin-top:4px}
.ps-form .btn.busy{opacity:.6;pointer-events:none}
.done{text-align:left}
.done h3{font:200 clamp(38px,5.4vw,72px)/1 var(--f-d);margin-top:10px}
.done h3 b{font-weight:600}
.done .no{font:200 clamp(54px,9vw,120px)/1 var(--f-d);margin:26px 0;letter-spacing:-.02em;border-top:1px solid var(--foil);border-bottom:1px solid var(--line);padding:18px 0}
.done .no b{font-weight:600;font-variant-numeric:tabular-nums}
.done p{color:var(--ink2)}.done p b{color:var(--ink);font-weight:400;overflow-wrap:anywhere}
.done .demo{margin-top:16px;font-size:13px;opacity:.8}
.ps-card[hidden],.ps-form[hidden],.done[hidden]{display:none}
@media (max-width:520px){.fld.two{grid-template-columns:100px 1fr}.cd>div{padding:18px 0 18px 10px}}
.hero .stage .poster{background-position:center bottom}
.btn.mini{white-space:nowrap}
@media (max-width:520px){.btn.mini{padding:0 12px;font-size:10px;letter-spacing:.14em;min-height:36px}.nav{gap:8px}}

/* legal pages (impressum, datenschutz, kontakt) */
.legal-page main{padding-top:calc(var(--nav-h) + clamp(44px,8vw,120px));padding-bottom:clamp(72px,11vw,150px)}
.legal-doc .wrap{max-width:860px}
.legal-doc .mono{color:var(--ink2)}
.legal-doc h1{font:200 clamp(38px,7vw,92px)/1.02 var(--f-d);text-transform:uppercase;letter-spacing:.005em;margin:14px 0 clamp(24px,4vw,40px);overflow-wrap:anywhere}
.legal-doc .stand{padding-bottom:clamp(24px,4vw,40px);margin-bottom:clamp(8px,2vw,20px);border-bottom:1px solid var(--foil);color:var(--ink2);font-size:14px}
.legal-doc h1+h2{margin-top:clamp(24px,4vw,40px)}
.legal-doc h2{font:500 clamp(19px,1.5vw + 12px,25px)/1.3 var(--f-d);margin:clamp(34px,5vw,54px) 0 12px;letter-spacing:.005em}
.legal-doc p,.legal-doc li,.legal-doc address{max-width:70ch;color:var(--ink)}
.legal-doc p+p,.legal-doc p+ul,.legal-doc ul+p,.legal-doc p+address,.legal-doc address+p{margin-top:1em}
.legal-doc ul{margin:1em 0 1em 1.15em}
.legal-doc li{margin:.55em 0}
.legal-doc strong{font-weight:500}
.legal-doc address{font-style:normal}
.legal-doc a{color:var(--ink);text-underline-offset:3px;overflow-wrap:anywhere}
.legal-doc h1.long{font-size:clamp(24px,6.6vw,76px);overflow-wrap:break-word}
.legal-doc .callout{border:1px solid var(--foil);padding:clamp(20px,3vw,32px);margin:0 0 clamp(24px,4vw,40px)}
.legal-doc .callout h2{margin-top:0}
.legal-doc .callout .btn{margin-top:6px}
.legal-doc .note{padding:14px 18px;border-left:2px solid var(--foil);background:color-mix(in srgb,var(--bg2) 55%,transparent);color:var(--ink);margin:0 0 clamp(18px,3vw,30px);max-width:70ch}
.legal-doc .small{font-size:14px;color:var(--ink2)}
.legal-doc h3{font:500 clamp(17px,1vw + 12px,20px)/1.3 var(--f-d);margin:1.6em 0 .5em}
.legal-doc ol{margin:1em 0 1em 1.25em}
.legal-doc .btn{text-decoration:none;color:var(--cta-ink)}
.legal-doc .btn.ghost{color:var(--ink)}
.legal-doc .wf{margin-top:clamp(20px,3vw,32px);max-width:70ch}
.legal-doc .wf-row{display:grid;gap:22px;grid-template-columns:1fr 1fr}
@media (max-width:640px){.legal-doc .wf-row{grid-template-columns:1fr}}
.legal-doc .ps-form textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:300 18px/1.5 var(--f-b);padding:10px 0;resize:vertical;border-radius:0}
.legal-doc .ps-form input[type=date],.legal-doc .ps-form input[type=tel]{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:300 18px/1.5 var(--f-b);padding:10px 0;border-radius:0}
.legal-doc .ps-form input:focus,.legal-doc .ps-form textarea:focus{outline:none;border-bottom-color:var(--ink)}
.legal-doc .ps-form input:focus-visible,.legal-doc .ps-form textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.legal-doc .ps-form ::placeholder{color:var(--ink2);opacity:1}
.legal-doc .ps-form .msg{color:var(--ink)}

/* slim pop-up strip in the intro */
.popup{margin-top:clamp(36px,5vw,64px);padding-top:20px;border-top:1px solid var(--foil);display:grid;gap:8px 28px;grid-template-columns:1fr;align-items:center}
.popup .mono{color:var(--ink2)}
.pu-line{color:var(--ink);max-width:60ch}
.popup .btn.mini{min-height:40px;padding:0 20px;font-size:11px;justify-self:start;margin-top:6px}
@media (min-width:860px){.popup{grid-template-columns:auto 1fr auto}.popup .btn.mini{margin-top:0}}
/* one product block with a scent switcher */
.prod{background-color:var(--bg);background-image:var(--grain);color:var(--ink);padding:clamp(48px,8vw,104px) 0;transition:background-color .6s var(--e1),color .6s var(--e1)}
.ptabs{display:grid;grid-template-columns:repeat(3,1fr);max-width:640px;margin-bottom:clamp(20px,3.4vw,40px);border-bottom:1px solid var(--line)}
.ptabs button{appearance:none;-webkit-appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 4px 12px;color:var(--ink2);font:500 11px/1.45 var(--f-d);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-align:left;transition:color .3s,border-color .3s}
.ptabs button span{display:block}
.ptabs button:hover{color:var(--ink)}
.ptabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--foil)}
.ptabs button:focus-visible{outline:2px solid var(--warm);outline-offset:-2px}
.pgrid{display:grid;gap:clamp(20px,4vw,64px);grid-template-columns:1fr;align-items:center}
.pstage{position:relative;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--bg2) 72%,transparent);touch-action:pan-y}
.pglow{position:absolute;inset:0;background:radial-gradient(58% 52% at 50% 42%,color-mix(in srgb,var(--warm) 40%,transparent),transparent 72%);transition:background .6s}
.pimg{grid-area:1/1;position:relative;z-index:1;width:min(74%,500px);height:auto;max-height:90%;object-fit:contain;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .5s var(--e1),transform .7s var(--e1);filter:drop-shadow(0 24px 28px rgba(0,0,0,.22))}
.pimg.is-on{opacity:1;transform:none}
.pfloor{position:absolute;left:50%;bottom:7%;width:54%;height:5%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.3),transparent);filter:blur(4px)}
.ppanes{display:grid}
.pane{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .4s var(--e1),visibility 0s .4s}
.pane.is-on{opacity:1;visibility:visible;transition-delay:0s}
.pane .mono{color:var(--ink2)}
.pane h3{font:200 clamp(34px,4.6vw,62px)/1.02 var(--f-d);text-transform:uppercase;margin:10px 0 14px;letter-spacing:.005em}
.pane h3 b{font-weight:800}
.plede{max-width:42ch;color:var(--ink2);margin-bottom:22px}
.pyr{border-top:1px solid var(--line);margin-bottom:26px}
.pyr>div{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.pyr p{font-size:16px;line-height:1.5;color:var(--ink)}
.pbuy{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pprice{font:600 clamp(24px,2.4vw,30px)/1 var(--f-d)}
.pnote{color:var(--ink2);flex-basis:100%;margin-top:-8px}
@media (min-width:860px){.pnote{flex-basis:auto;margin:0}}
@media (min-width:860px){.pgrid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.pstage{max-height:620px}}
@media (prefers-reduced-motion:reduce){.pimg,.pane,.prod,.ptabs button{transition:none}}
/* tighter form copy */
.ps-form .chk{font-size:13px;line-height:1.5}
.presave .ps-notice{font-size:12px;color:var(--ink2)}
.presave .ps-notice a{color:var(--ink)}
.presave .ps-form .chk{color:var(--ink)}
.ps-sub{font-size:13px;line-height:1.5;color:var(--ink2);text-align:center;margin-top:-10px}
.picks legend em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.8}

/* drop line, live stats, share card */
.pdrop{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:-4px 0 22px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pdrop .mono{color:var(--ink2)}
.pdrop b{font:500 15px/1.4 var(--f-d);letter-spacing:.02em}
.pcd{font:500 14px/1.4 var(--f-m);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink2);margin-left:auto}
.pcd.live{color:var(--accent);font-weight:500}
.pstat{margin-top:18px;color:var(--ink2)}
.pstat[hidden]{display:none}
.done{position:relative}
.done.burst::before{content:"";position:absolute;left:-10%;top:-10%;width:120%;height:60%;pointer-events:none;background:radial-gradient(closest-side,rgba(201,162,91,.34),rgba(201,162,91,0));opacity:0;animation:mist 1.6s var(--e1) both}
@keyframes mist{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
.dshare{margin-top:28px;display:grid;gap:18px;justify-items:start}
#pkCanvas{width:min(220px,56vw);height:auto;aspect-ratio:9/16;border:1px solid var(--line);background:#14090d}
.dbtns{display:flex;flex-wrap:wrap;gap:12px}
.dbtns .btn{min-height:44px;padding:0 22px;font-size:12px}
.dnote{font-size:14px;color:var(--ink2);max-width:46ch}
.dnote[hidden]{display:none}
.dnote a{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.done.burst::before{animation:none;display:none}}

/* access page */
.legal-doc .zrows{display:grid;border-top:1px solid var(--line);margin:8px 0 14px;max-width:70ch}
.legal-doc .zrow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.legal-doc .zrow b{display:block;font:500 clamp(18px,1vw + 12px,22px)/1.3 var(--f-d)}
.legal-doc .zat{display:block;color:var(--ink2);font-size:15px;margin-top:2px}
.legal-doc .zst{font:500 15px/1.3 var(--f-m);font-variant-numeric:tabular-nums;color:var(--ink2);text-align:right;white-space:nowrap}
.legal-doc .zst.live{color:var(--accent)}
.legal-doc .zst .btn{min-height:42px;padding:0 20px;font-size:11px}
.legal-doc .zlink{display:flex;flex-wrap:wrap;gap:10px;align-items:center;max-width:70ch}
.legal-doc .zlink input{flex:1 1 220px;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--ink);font:300 15px/1.5 var(--f-b);padding:10px 0}
.legal-doc .zlink .btn{min-height:44px;padding:0 20px;font-size:12px}
@media (max-width:520px){.legal-doc .zrow{flex-direction:column;align-items:flex-start}.legal-doc .zst{text-align:left}}

/* ===== critique pass (2026-10-07) ===== */
[hidden]{display:none !important}
:root{--sec-y:clamp(48px,8vw,112px)}
.pre-intro,.prod,.presave{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.pre-intro .cd{margin-top:clamp(24px,4vw,40px)}
.pre-intro .mono{display:block}
.hero-pre{height:320vh}
@media (max-width:720px){.hero-pre{height:270vh}}
.hero.is-static{height:auto !important}
.hero.is-static .band:not(.homefin){display:none}
.hero.is-static .stage .poster{background-image:url(img/trio-scene-m.jpg) !important;background-position:center bottom}
@media (min-width:721px) and (orientation:landscape){.hero.is-static .stage .poster{background-image:url(img/trio-scene-d.jpg) !important}}
.hero:not(.is-static) .band:not(.on) a{visibility:hidden}
.band .kick{margin-bottom:clamp(10px,1.8vh,18px);font:500 11px/1.4 var(--f-d);letter-spacing:.22em;text-transform:uppercase}
.stage>.chev{opacity:0;pointer-events:none;transition:opacity .6s var(--e1);bottom:calc(env(safe-area-inset-bottom) + 34px);animation:none}
.stage.video-ready:not(.scrolled)>.chev,.stage.video-failed:not(.scrolled)>.chev{opacity:.8;animation:bob 2.2s var(--e2) 2}
/* product block */
.pstage{touch-action:pan-y pinch-zoom}
.prod{scroll-margin-top:32px}
.ps-card{scroll-margin-top:calc(var(--nav-h) + 12px)}
.presave{scroll-margin-top:var(--nav-h)}
[tabindex="-1"]:focus{outline:none}
.pane{display:flex;flex-direction:column}
.pyr{margin-bottom:0}
.pbuy{margin-top:auto;padding-top:28px;display:grid;grid-template-columns:auto 1fr;column-gap:28px;row-gap:4px;align-items:center}
.pbuy .pprice{grid-column:1;grid-row:1}
.pbuy .pnote{grid-column:1;grid-row:2;margin:0;font-size:10px;flex-basis:auto}
.pbuy .btn{grid-column:2;grid-row:1/3;justify-self:end;width:100%;max-width:300px;min-height:58px}
@media (max-width:859px){.ptabs{margin-bottom:16px}.pane .plede{margin-bottom:16px}.pane .pbuy{order:1;margin-top:0;padding-top:0;margin-bottom:24px;grid-template-columns:1fr auto}.pbuy .btn{width:auto;min-width:156px;max-width:none}.pane .pyr{order:2}}
.pane h3{font-size:clamp(40px,4.6vw,62px)}
.ptabs{max-width:none}
.ptabs button{font-size:12px;letter-spacing:.16em;color:color-mix(in srgb,var(--ink) 58%,var(--bg))}
.ptabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.ptabs button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.prod :focus-visible{outline-color:var(--ink)}
.nav:not(.solid) :focus-visible{outline-color:#fff}
.pglow{display:none}
.pstage{background:var(--bg2);background:radial-gradient(72% 62% at 50% 46%,color-mix(in srgb,var(--warm) 26%,var(--bg)) 0%,color-mix(in srgb,var(--bg2) 70%,var(--bg)) 56%,var(--bg) 100%)}
.pimg{width:min(64%,440px);max-height:80%}
.pfloor{background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 38%,transparent),transparent)}
.prod.th-aftersunset{--bg:#14090d;--bg2:#221017;--warm:#C8453A}
.prod.th-aftersunset .pfloor{background:radial-gradient(closest-side,rgba(200,69,58,.5),transparent)}
.prod.th-aftersunset .pimg{filter:drop-shadow(0 28px 36px rgba(0,0,0,.65))}
.pimg{transition:opacity .22s var(--e1),transform .7s var(--e1)}
.pimg.is-on{transition:opacity .45s var(--e1) .16s,transform .8s var(--e1) .16s}
.pane{transition:opacity .2s var(--e1),visibility 0s .2s}
.pane.is-on{transition:opacity .4s var(--e1) .18s,visibility 0s 0s}
.th-amalfi{--cta:#12313F;--cta-ink:#EAF2F0}
body[data-theme="amalfi"]{--cta:#12313F;--cta-ink:#EAF2F0}
/* theme colours fade together */
@property --bg{syntax:"<color>";inherits:true;initial-value:#EAE5DB}
@property --bg2{syntax:"<color>";inherits:true;initial-value:#DFD7C8}
@property --ink{syntax:"<color>";inherits:true;initial-value:#2B2820}
@property --ink2{syntax:"<color>";inherits:true;initial-value:#5E584A}
@property --warm{syntax:"<color>";inherits:true;initial-value:#C9A25B}
@property --cta{syntax:"<color>";inherits:true;initial-value:#2B2820}
@property --cta-ink{syntax:"<color>";inherits:true;initial-value:#F1ECE1}
.prod{transition:--bg .45s var(--e1),--bg2 .45s var(--e1),--ink .45s var(--e1),--ink2 .45s var(--e1),--warm .45s var(--e1),--cta .45s var(--e1),--cta-ink .45s var(--e1)}
@media (prefers-reduced-motion:reduce){.prod,.pimg,.pimg.is-on,.pane,.pane.is-on{transition:none}}
/* nav takes the tone of the section underneath */
.nav.solid{background:var(--bg);background:color-mix(in srgb,var(--bg) 96%,transparent);transition:background .45s var(--e1),color .45s var(--e1),transform .5s var(--e1)}
.nav.solid[data-tone=amalfi]{--bg:#E6EFEC}
.nav.solid[data-tone=sunkissed]{--bg:#F1E4D4}
.nav.solid[data-tone=aftersunset],.nav.solid[data-tone=dark]{--bg:#14090d;color:#F3E7E2}
.nav.solid[data-tone=aftersunset] .logo .l-light,.nav.solid[data-tone=dark] .logo .l-light{display:block}
.nav.solid[data-tone=aftersunset] .logo .l-dark,.nav.solid[data-tone=dark] .logo .l-dark{display:none}
.nav.solid[data-tone=aftersunset] .btn.mini,.nav.solid[data-tone=dark] .btn.mini{background:#F3E7E2;color:#14090d}
/* form */
.picks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:640px){.picks{grid-template-columns:repeat(4,1fr)}}
.pick span{display:grid;place-items:center;min-height:48px;padding:6px;text-align:center;font-size:11px;letter-spacing:.1em;line-height:1.25;text-transform:uppercase}
.chk input[aria-invalid=true]{border-color:var(--accent)}
.ps-form .msg{scroll-margin-top:90px}
.done h3:focus{outline:none}
.presave{color-scheme:dark}
.presave .ps-form{--line:rgba(243,231,226,.42)}
.presave .ps-form ::placeholder{color:var(--ink2);opacity:.7}
.ps-form .chk,.ps-notice{font-weight:400}
@media (forced-colors:active){.ptabs button[aria-selected="true"]{border-bottom-color:Highlight}.pick input:checked+span{outline:2px solid Highlight;outline-offset:-3px}}
/* touch targets */
@media (max-width:520px){.btn.mini{min-height:44px}}
.popup .btn.mini{min-height:44px}
.snd{min-height:44px}
@media (pointer:coarse){footer ul a{display:inline-block;padding:11px 0}}
/* countdown */
.cd>div:first-child{padding-left:0}
@media (max-width:520px){.cd>div{padding:18px 8px 18px 12px}.cd>div:first-child{padding-left:0}.cd span{font-size:10px;letter-spacing:.1em}.cd b{font-size:clamp(34px,10vw,48px)}}
/* buttons, footer, pop-up strip, sound icon */
.btn.ghost{border:0}
body[data-theme=home] footer{background:#0E0609;color:#F3E7E2}
@media (max-width:759px){footer .fgrid>p{display:none}footer ul{grid-template-columns:1fr 1fr}footer ul .mono{grid-column:1/-1}}
.popup{border-top:0;padding-top:0;margin-top:clamp(24px,3.4vw,40px);align-items:center}
.pu-line{max-width:none;font-size:clamp(15px,1.25vw,17px);text-wrap:balance}
@media (min-width:860px){.popup{grid-template-columns:auto minmax(0,1fr) auto;gap:8px 32px}}
@media (max-width:859px){.popup{grid-template-columns:1fr auto}.popup .mono{grid-column:1/-1}.popup .btn.mini{margin-top:0}}
.snd:not(.on) .bars i:nth-child(1){height:5px}
.snd:not(.on) .bars i:nth-child(2){height:9px}
.snd:not(.on) .bars i:nth-child(3){height:6px}
.snd:not(.on) .bars i:nth-child(4){height:11px}
.snd:not(.on) .bars i{opacity:.6}

/* ===== SITE CHROME: one header, one menu, one footer on every page (site_chrome.py) ===== */
.nav ul.nl{display:flex}
.nav .btn.mini{flex:none}
.mbtn{display:none;align-items:center;gap:12px;min-height:38px;padding:0 2px 0 8px;font:500 11px/1 var(--f-d);letter-spacing:.22em;text-transform:uppercase;color:inherit;flex:none}
.mb-i{position:relative;width:22px;height:10px;display:block}
.mb-i i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--e1),top .5s var(--e1)}
.mb-i i:nth-child(1){top:0}.mb-i i:nth-child(2){top:8px}
.mbtn[aria-expanded="true"] .mb-i i:nth-child(1){top:4px;transform:rotate(45deg)}
.mbtn[aria-expanded="true"] .mb-i i:nth-child(2){top:4px;transform:rotate(-45deg)}
@media (max-width:959px){.nav ul.nl{display:none}.mbtn{display:inline-flex}.nav .snd{margin-left:auto}.nav .logo{margin-right:auto}.nav .snd+.btn.mini{margin-left:0}}
@media (max-width:520px){.mbtn .mb-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.mbtn{padding:0 2px;min-width:44px;min-height:44px;justify-content:center}}
.menu{position:fixed;inset:0;z-index:60;background:#14100c;color:#F1ECE1;opacity:0;visibility:hidden;transition:opacity .45s var(--e1),visibility 0s linear .45s;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.menu.open{opacity:1;visibility:visible;transition:opacity .45s var(--e1)}
.menu[hidden]{display:none}
.menu-in{min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,4.5vh,44px);padding:calc(var(--nav-h) + 20px) var(--pad) 28px;max-width:1240px;margin:0 auto}
.menu-big{list-style:none;display:grid;gap:0}
.menu-big a{display:block;overflow:hidden;text-decoration:none;font:200 clamp(38px,9vw,92px)/1.08 var(--f-d);text-transform:uppercase;letter-spacing:-.01em;padding:4px 0;border-bottom:1px solid rgba(241,236,225,.14)}
.menu-big a[aria-current]{color:var(--warm)}
.menu-big .mi{display:inline-block;transform:translateY(110%);transition:transform .85s var(--e1)}
.menu.open .menu-big .mi{transform:none}
.menu.open .menu-big li:nth-child(1) .mi{transition-delay:.10s}.menu.open .menu-big li:nth-child(2) .mi{transition-delay:.16s}.menu.open .menu-big li:nth-child(3) .mi{transition-delay:.22s}.menu.open .menu-big li:nth-child(4) .mi{transition-delay:.28s}
.menu .btn{align-self:flex-start;background:#F4EEE2;color:#2B2820}
@media (hover:hover){.menu .btn:hover{box-shadow:inset 0 0 0 1px var(--warm),0 8px 0 -6px var(--warm)}}
.menu-foot{display:grid;gap:16px;font-size:14px;color:rgba(241,236,225,.7)}
.menu-small{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px}
.menu-small a{text-decoration:none;font:500 11px/1 var(--f-d);letter-spacing:.2em;text-transform:uppercase;padding:14px 0;display:inline-block;color:rgba(241,236,225,.82)}
.menu-small a:hover{color:#fff}
.menu-foot p{max-width:44ch}
.menu a:focus-visible,.menu button:focus-visible{outline:2px solid var(--warm);outline-offset:4px}
body.menu-open .nav{z-index:70;color:#F1ECE1;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;text-shadow:none}
body.menu-open .nav::before{display:none}
body.menu-open .nav .logo .l-light{display:block!important}body.menu-open .nav .logo .l-dark{display:none!important}
body.menu-open .nav .btn.mini,body.menu-open .nav .snd,body.menu-open .nav ul.nl{visibility:hidden}
html.menu-lock,html.menu-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.menu,.menu .mi,.mb-i i{transition:none!important}}
footer .fgrid{align-items:start}
@media (min-width:760px){footer .fgrid{grid-template-columns:2fr 1fr 1fr}}
/* ===== Sign-up script (14 Oct 2026) ===== */
.ps-form input,.ps-form .fld,.ps-form .chk{scroll-margin-top:calc(var(--nav-h) + 24px)}
.ps-form .msg button{font:inherit;background:none;border:0;border-bottom:1px solid currentColor;color:inherit;padding:10px 2px;margin:4px 16px 0 0;min-height:44px;cursor:pointer}
.done .dnote{margin-top:14px}
@media (max-height:500px) and (orientation:landscape){.menu-in{gap:14px}.menu-big a{font-size:clamp(28px,7vh,44px);padding:6px 0}}
#card{scroll-margin-top:calc(var(--nav-h) + 16px)}   /* a CTA lands on the form card, below the fixed header */
@media (forced-colors:active){.mb-i i{forced-color-adjust:none;background:CanvasText}.mbtn{background:Canvas}}

/* very short viewports (400 % zoom on a laptop): nothing waits for a scroll reveal */
@media (max-height:260px){.rv .r{opacity:1;transform:none}}
/* browsers without color-mix(): flat colours instead of lost borders and a transparent nav */
@supports not (color:color-mix(in srgb,red,blue)){.nav.solid{background:var(--bg)}.ps-card{border:1px solid rgba(201,162,91,.55)}.legal-doc .note{background:rgba(223,215,200,.55)}}
/* print: legal pages without the fixed header, plain black on white */
@media print{.nav,.menu,.skip,.mbtn,.hero,.chev,.ring,.presave .ps-bg{display:none!important}body{opacity:1!important;background:#fff!important;color:#000!important}body[data-theme]{--bg:#fff;--bg2:#fff;--ink:#000;--ink2:#444}.rv .r,.js [data-rv]{opacity:1!important;transform:none!important;transition:none!important}footer{background:none!important;color:#000!important}footer .logo-f{display:none}main{padding-top:0!important}.btn{color:#000!important;border:1px solid #000}}
/* short laptops: headline sizes follow the height too, so title, bottle cap and buttons keep their air */
@media (min-width:721px) and (max-height:800px){.band.title h2,.band.settle h2{font-size:clamp(28px,min(5vw,8vh),72px)}}

/* the navigation over the evening chapters of the light film */
.nav.solid[data-film=dark]{--bg:#14090d;color:#F3E7E2}
.nav.solid[data-film=dark] .logo .l-light{display:block}
.nav.solid[data-film=dark] .logo .l-dark{display:none}
.nav.solid[data-film=dark] .btn.mini{background:#F3E7E2;color:#14090d}