@font-face{font-family:UglyQua;src:url("UglyQua.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:UglyQua;src:url("UglyQua-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
:root{
 --lw:calc(clamp(150px,17vw,250px) + 44px);--tw:clamp(320px,37vw,620px);

 --char:#2b2927;--bark:#3a2e28;--brown:#512D1E;--cream:#f3ecdc;--paper:#ebe0c8;--ink:#2a1d15;--sand:#e8d9c0;--deep:#1f1a16;--gold:#d9a93f;
 --gin:#6f93e0;--hemp:#8fbf64;--lemon:#e6d65a;--vodka:#c28a6a;--berry:#d58ac0;--coffee:#b8946f;
 --disp:UglyQua,"Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:90px;scroll-behavior:smooth}
body{margin:0;background:var(--char);color:var(--sand);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html:not(.ok) body{overflow:hidden}
img,video{max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--disp);font-weight:400;margin:0;line-height:1.05}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--ink);padding:8px 14px;border-radius:6px;z-index:400}
.skip:focus{left:8px}
.voice{font-family:var(--disp);font-style:italic;font-size:1.35rem;line-height:1.3}
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 22px;border-radius:999px;font-family:var(--disp);font-size:1.12rem;text-decoration:none;cursor:pointer;border:2px solid transparent;line-height:1.2;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:#241a10}
.btn-gold:hover{background:#e8bb55}
.btn-line{background:rgba(0,0,0,.25);color:var(--cream);border-color:rgba(243,236,220,.6)}
.btn-line:hover{border-color:var(--cream)}
.btn-brown{background:var(--brown);color:var(--cream)}
.btn-brown:hover{background:#6a3b29}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.kicker{font-family:system-ui,sans-serif;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;opacity:.75;margin:0 0 8px}

/* age gate */
#age{position:fixed;inset:0;z-index:500;background:var(--cream);color:var(--ink);display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}
html.ok #age{display:none}
.gate{max-width:560px}
.gate img{width:220px;height:auto}
.gate h2{font-size:clamp(1.9rem,5vw,2.7rem);margin:14px 0 14px;color:var(--brown)}
.gate p{color:#5a4637;margin:0 0 22px}
.gate .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gate .btn-no{background:transparent;color:var(--brown);border-color:#b9a27e}
.gate small{display:block;margin-top:22px;color:#8a735c}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:150;background:#f3ecdc}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:var(--cream);color:var(--ink);box-shadow:0 2px 0 rgba(81,45,30,.15)}
.bar{max-width:none;margin:0 auto;padding-block:6px;min-height:64px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:16px;position:relative}
.logo{position:absolute;z-index:3;top:0;left:calc(max(24px,env(safe-area-inset-left,0px)) + max(0px,(var(--tw) - var(--lw))/2));display:block;line-height:0;background:var(--cream);padding:12px 22px 20px;border-radius:0 0 22px 22px;box-shadow:0 10px 22px rgba(0,0,0,.28);transition:padding .25s,box-shadow .25s}
.logo img{width:clamp(150px,17vw,250px);height:auto;transition:width .25s}
.top.small .logo{padding:4px 10px;box-shadow:none;border-radius:0}
.top.small .logo img{width:66px}
@media(min-width:1367px){.bar{padding-left:calc(var(--lw) + 16px + max(24px,env(safe-area-inset-left,0px)) + max(0px,(var(--tw) - var(--lw))/2))}.top.small .bar{padding-left:calc(110px + max(24px,env(safe-area-inset-left,0px)))}}
nav{margin-left:auto}
.menu{display:flex;gap:2px;list-style:none;margin:0;padding:0;align-items:center}
.menu>li{position:relative}
.menu>li>a,.menu>li>button{font-family:var(--disp);font-size:.98rem;color:var(--brown);background:none;border:0;padding:10px 5px;cursor:pointer;text-decoration:none;border-radius:6px;white-space:nowrap}
.menu>li>a:hover,.menu>li>button:hover{background:#e6dcc4}
.menu .here{box-shadow:inset 0 -3px 0 var(--gold)}
.caret{display:inline-block;width:.42em;height:.42em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:7px}
.dd{position:absolute;left:0;top:100%;background:var(--bark);color:var(--cream);border-radius:10px;padding:10px;display:none;grid-template-columns:1fr;gap:2px;min-width:300px;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.dd a{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:6px;text-decoration:none;font-family:var(--disp);font-size:1rem;line-height:1.2}
.dd a:hover{background:#4a3c34}
.dd svg{flex:none;width:28px;height:40px}
.dd img{flex:none;height:60px;width:auto;max-width:130px;object-fit:contain}
.menu>li.open>.dd,.menu>li:focus-within>.dd{display:grid}
@media(hover:hover){.menu>li:hover>.dd{display:grid}}
.soc{display:flex;gap:2px;padding-left:4px}
.soc a{display:inline-flex;padding:8px;color:var(--brown)}
.soc svg{width:20px;height:20px;fill:currentColor}
.burger{display:none;margin-left:auto;background:none;border:2px solid var(--brown);color:var(--brown);padding:7px 16px;border-radius:999px;font-family:var(--disp);font-size:1rem;cursor:pointer}
@media(max-width:1366px){
 .burger{display:block}
 nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;background:var(--cream);padding:6px 24px 18px;box-shadow:0 10px 20px rgba(0,0,0,.2);max-height:calc(100vh - 72px);overflow:auto}
 nav.open{display:block}
 .menu{flex-direction:column;align-items:stretch;gap:0}
 .menu>li>a,.menu>li>button{display:block;width:100%;text-align:left;padding:13px 4px;font-size:1.2rem}
 .dd{position:static;min-width:0;box-shadow:none;grid-template-columns:1fr;margin:0 0 8px}
 .menu>li:hover>.dd{display:none}
 .menu>li.open>.dd{display:grid}
 .soc{padding:10px 0 0}
}
@media(max-width:480px){.logo{padding:8px 14px 14px}.logo img{width:128px}}

/* hero */
.hero{position:relative;min-height:clamp(640px,62vw,860px);display:flex;align-items:flex-start;overflow:hidden;background:#3c4a22}
.hero video,.hero .hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,15,10,.8) 0%,rgba(20,15,10,.5) 24%,rgba(20,15,10,0) 40%,rgba(20,15,10,0) 66%,rgba(20,15,10,.35) 100%)}
.hero-in{position:relative;z-index:2;width:100%;padding-top:calc(clamp(150px,17vw,250px)*.85 + 70px);padding-bottom:60px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:24px}
.hero-txt{width:var(--tw);text-align:center}
.hero-txt .cta{justify-content:center}
.hero-txt .voice{margin-left:auto;margin-right:auto}
.hero h1{font-size:clamp(2.3rem,4.3vw,4rem);color:var(--cream);letter-spacing:-.01em;text-shadow:0 3px 18px rgba(0,0,0,.35)}
.hero h1 .amp{color:var(--gold);font-style:italic}
.hero .sub{font-family:var(--disp);font-size:clamp(1.15rem,1.8vw,1.6rem);color:var(--sand);margin:14px 0 6px}
.hero .voice{color:#f6e7c4;margin:0 0 26px;max-width:32ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:16px}
.eq i{width:3px;background:currentColor;height:30%;border-radius:2px}
.playing .eq i{animation:eq .9s ease-in-out infinite}
.playing .eq i:nth-child(2){animation-delay:-.3s}.playing .eq i:nth-child(3){animation-delay:-.6s}.playing .eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.coins{position:absolute;z-index:3;right:max(28px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:18px}
.coin.silver{order:-1}
.coin{display:block;text-decoration:none;text-align:center;color:var(--cream);font-family:var(--disp);font-size:.95rem;line-height:1.15;perspective:600px}
.coin img{display:block;margin:0 auto 8px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.coin:hover img{transform:rotateY(360deg)}
.coin.gold img{width:clamp(170px,21vw,300px);height:auto;animation:bob 5s ease-in-out infinite}
.coin.silver img{width:clamp(170px,21vw,300px);height:auto;animation:bob 5s ease-in-out -2.5s infinite}
.coin span{font-size:1.2rem}
.coin span{display:block;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.coin small{display:block;font-family:system-ui,sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media(max-width:820px){
 .hero{min-height:auto;display:block}
 .hero-in{padding-top:190px;padding-bottom:28px;padding-right:20px}
 .hero-txt{width:auto;text-align:left}
 .hero-txt .cta{justify-content:flex-start}
 .logo{left:max(16px,env(safe-area-inset-left,0px))}
 .hero::after{background:linear-gradient(0deg,rgba(20,15,10,.85),rgba(20,15,10,.35) 60%,rgba(20,15,10,.2))}
 .coins{position:relative;right:auto;top:auto;transform:none;flex-direction:row;justify-content:center;align-items:flex-end;padding:0 16px 34px}
 .coin.gold img,.coin.silver img{width:40vw;max-width:220px}
}

/* dividers (style is switched in the preview panel) */
.dv{display:block;width:100%;line-height:0;position:relative;z-index:4}
.dv svg{display:block;width:100%}

/* story */
.story{position:relative;background:var(--cream);color:var(--ink);padding:56px 0 70px;overflow:hidden}
.story::before{content:"";position:absolute;inset:0;background:url("misc/bushmen-sepia-1600.webp") center/cover;opacity:.5;filter:sepia(.9) contrast(1.05)}
.story .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;max-width:1300px}
.story-txt{background:rgba(243,236,220,.82);border-radius:16px;padding:28px 32px;box-shadow:0 10px 30px rgba(60,35,20,.18)}
.frame{position:relative;background:#fffaf0;padding:14px 14px 54px;box-shadow:0 18px 34px rgba(60,35,20,.28);transform:rotate(-3deg);max-width:600px;width:100%;justify-self:center}
.frame img{display:block;width:100%;height:auto;filter:sepia(.25)}
.frame figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:var(--disp);font-style:italic;font-size:1.2rem;color:var(--brown)}
.tape{position:absolute;width:110px;height:30px;background:rgba(232,214,170,.82);top:-12px;left:50%;transform:translateX(-50%) rotate(4deg);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.story h2{font-size:clamp(2.3rem,5vw,3.6rem);color:var(--brown)}
.story .kicker{color:var(--brown)}
.poem{font-family:var(--disp);font-style:italic;font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.45;margin:22px 0 0;color:#3b2a1e}
.poem p{margin:0 0 12px}
.stamp{display:inline-block;margin-top:10px;font-family:var(--disp);font-size:1.7rem;color:#9b2f1d;border:3px solid #9b2f1d;border-radius:8px;padding:2px 16px;transform:rotate(-6deg);opacity:.85}
@media(max-width:820px){.story .wrap{grid-template-columns:1fr;gap:40px}.frame{max-width:440px}.story-txt{padding:22px 20px}}

/* shelf */
.mob{background:var(--bark);padding:48px 0 54px;position:relative}
.mob-head{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:flex-end;justify-content:space-between;margin-bottom:12px}
.mob h2{font-size:clamp(2.2rem,5vw,3.3rem);color:var(--cream)}
.mob .voice{color:#e5cf9f;margin:6px 0 0;font-size:1.25rem}
.tabs{display:inline-flex;background:#2a211c;border-radius:999px;padding:4px}
.tabs button{border:0;background:none;color:var(--sand);font-family:var(--disp);font-size:1.05rem;padding:8px 18px;border-radius:999px;cursor:pointer;line-height:1.2}
.tabs button small{font-family:system-ui,sans-serif;font-size:.72rem;opacity:.75;margin-left:6px}
.tabs button[aria-selected=true]{background:var(--gold);color:#241a10}
.rail{position:relative}
.shelfrow{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:26px max(24px,env(safe-area-inset-left,0px)) 0;scrollbar-width:none;max-width:1440px;margin:0 auto}
.rowlbl{max-width:1440px;margin:34px auto 0;padding:0 max(24px,env(safe-area-inset-left,0px));font-family:var(--disp);font-size:1.5rem;color:var(--gold);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.rowlbl small{font-family:system-ui,sans-serif;font-size:.9rem;color:#cbb898}
.shelfrow::-webkit-scrollbar{display:none}
.btl{flex:0 0 clamp(210px,25vw,330px);scroll-snap-align:start;text-align:center;text-decoration:none;color:var(--cream);position:relative}
.btl img{display:block;width:100%;height:auto;margin:0 auto -16%;transition:transform .35s cubic-bezier(.2,.8,.2,1);transform-origin:50% 90%}
.btl:hover img{transform:translateY(-12px) rotate(-3deg)}
.btl .nm{display:block;font-family:var(--disp);font-size:1.5rem;line-height:1.15;margin-top:6px;color:var(--a)}
.btl .ft{display:block;font-size:.82rem;color:#cbb898}
.plank{height:22px;margin:-4px auto 0;max-width:1440px;background:linear-gradient(#8a5a36,#6b4126 40%,#4a2c19);border-radius:3px;box-shadow:0 12px 20px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,220,170,.25)}
.planklabel{max-width:1440px;margin:0 auto;padding:16px 24px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#cbb898;font-size:.92rem}
.arrows{display:flex;gap:8px}
.arrows button{width:44px;height:44px;border-radius:50%;border:2px solid #6b5a4d;background:none;color:var(--cream);font-size:1.2rem;cursor:pointer}
.arrows button:hover{border-color:var(--cream)}

/* pourer */
.pourer{background:var(--cream);color:var(--ink);padding:50px 0 64px}
.pr-head{max-width:760px;margin-bottom:28px}
.pourer h2{font-size:clamp(2.2rem,5vw,3.4rem);color:var(--brown)}
.pourer .voice{color:#5a4637;margin:8px 0 0}
.pourer .kicker{color:var(--brown)}
.pr-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:44px;align-items:start}
.demo{position:sticky;top:110px;text-align:center}
.demo-stage{position:relative;width:min(100%,340px);aspect-ratio:713/1301;margin:0 auto;transform-origin:50% 62%;transition:transform 1s cubic-bezier(.5,0,.3,1)}
.demo-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .5s}
.demo-stage .d-pourer{opacity:0}
.demo-stage[data-st=open] .d-pourer,.demo-stage[data-st=pour] .d-pourer{opacity:1}
.demo-stage[data-st=open] .d-closed,.demo-stage[data-st=pour] .d-closed{opacity:0}
.demo-stage[data-st=pour]{transform:rotate(-78deg) translate(10%,-6%)}
.stream{position:absolute;left:44%;top:-1%;width:5%;height:0;background:linear-gradient(rgba(255,244,214,.95),rgba(255,236,190,.55));border-radius:0 0 40% 40%;transform:rotate(78deg);transform-origin:50% 0;transition:height .6s .9s}
.demo-stage[data-st=pour] .stream{height:55%}
.demo-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.btn-ghost2{background:transparent;color:var(--brown);border-color:#b9a27e}
.btn-ghost2:disabled{opacity:.45;cursor:not-allowed;transform:none}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:st}
.steps li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:center;background:#fffaf0;border-radius:14px;padding:14px;box-shadow:0 6px 18px rgba(81,45,30,.1);counter-increment:st}
.steps img{display:block;width:100%;height:auto;border-radius:10px}
.steps li:nth-child(2){grid-template-columns:1fr}
.steps li:nth-child(2) div{padding:0 6px 6px}
.steps h3{font-size:1.6rem;color:var(--brown)}
.steps h3::before{content:counter(st) ". ";color:var(--gold)}
.steps p{margin:6px 0 0;color:#3e2f24}
@media(max-width:900px){.pr-grid{grid-template-columns:1fr}.demo{position:static}.steps li{grid-template-columns:1fr}}

/* wanted wall */
.wall{position:relative;background:#6e4a2f;padding:56px 0 70px;overflow:hidden}
.wall::before{content:"";position:absolute;inset:0;opacity:.5;background:
 repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 180px),
 repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),
 radial-gradient(ellipse at 30% 20%,rgba(255,210,150,.18),transparent 60%)}
.wall .wrap{position:relative;max-width:1600px}
.wall h2{font-size:clamp(2.4rem,6vw,4rem);color:var(--cream);text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.wall .voice{text-align:center;color:#f2dcae;margin:8px auto 34px;max-width:40ch}
.posters{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;align-items:start}
.pst{position:relative;display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1);transform:rotate(var(--r)) translateY(var(--y,0))}
.pst img{display:block;width:100%;height:auto;box-shadow:0 10px 18px rgba(0,0,0,.45)}
.pst::before{content:"";position:absolute;z-index:2;top:-7px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ff8a6a,#b3261a 60%,#5e120b);box-shadow:0 3px 4px rgba(0,0,0,.5)}
.pst:hover,.pst:focus-visible{transform:rotate(0) scale(1.08);z-index:5}
.pst .lbl{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);white-space:nowrap;font-family:var(--disp);color:var(--cream);font-size:1rem;opacity:0;transition:opacity .2s}
.pst:hover .lbl,.pst:focus-visible .lbl{opacity:1}
@media(max-width:980px){.posters{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 18px}}
@media(max-width:560px){.posters{grid-template-columns:repeat(2,minmax(0,1fr))}.pst .lbl{opacity:1;position:static;transform:none;display:block;text-align:center;margin-top:6px;white-space:normal}}

/* road sign + cocktails */
.pours{position:relative;background:var(--deep)}
.band{position:relative;height:clamp(300px,42vw,520px);overflow:hidden;display:flex;align-items:center}
.band video,.band img.bp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,13,9,.78),rgba(18,13,9,.25) 60%,rgba(18,13,9,.1))}
.band .wrap{position:relative;z-index:2;width:100%}
.band h2{font-size:clamp(2.6rem,7vw,5rem);color:var(--cream);line-height:1.1;padding-bottom:.08em}
.band .voice{color:#f2dcae;margin:14px 0 0;max-width:30ch}
.sign{height:auto;position:absolute;z-index:6;width:clamp(150px,18vw,240px);right:max(20px,calc(50% - 560px));top:-70px;transform-origin:50% 0;animation:swing 4s ease-in-out infinite;filter:drop-shadow(0 12px 14px rgba(0,0,0,.45))}
@media(max-width:700px){.sign{width:96px;top:-46px;right:12px}.band .wrap{padding-right:110px}.save .zone{width:22%;top:-9%;left:-2%}}
@keyframes swing{0%,100%{rotate:-3deg}50%{rotate:3deg}}
.serves{padding:44px 0 60px}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cc{display:block;text-decoration:none;color:var(--cream);background:#2c241f;border-radius:12px;overflow:hidden;transition:transform .2s}
.cc:hover{transform:translateY(-4px)}
.cc img{display:block;width:100%;height:auto;aspect-ratio:7/6;object-fit:cover}
.cc .cb{padding:12px 16px 16px;border-top:4px solid var(--a)}
.cc h3{font-size:1.45rem}
.cc .sp{display:block;font-size:.85rem;color:var(--a);margin-top:2px}
.allserves{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:26px}
.allserves p{margin:0;color:#cbb898}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.cards{gap:12px}.cc h3{font-size:1.2rem}}

/* video catalogues */
.vids{background:var(--cream);color:var(--ink);padding:54px 0 64px}
.vids h2{font-size:clamp(2.2rem,5vw,3.2rem);color:var(--brown)}
.vids .voice{color:#5a4637;margin:6px 0 26px}
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.vc{background:#fffaf0;border-radius:14px;overflow:hidden;box-shadow:0 10px 24px rgba(81,45,30,.15)}
.vbox{position:relative;aspect-ratio:16/9;background:#000}
.vbox video,.vbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vbox button{position:absolute;inset:0;border:0;background:rgba(0,0,0,.18);cursor:pointer;display:flex;align-items:center;justify-content:center}
.vbox button:hover{background:rgba(0,0,0,.05)}
.vbox button span{width:78px;height:78px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.vbox button span::before{content:"";border-left:24px solid #241a10;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
.vc .vt{padding:14px 18px 18px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.vc h3{font-size:1.5rem;color:var(--brown)}
.vc .meta{font-size:.9rem;color:#7a6550}
@media(max-width:780px){.vgrid{grid-template-columns:1fr}}

/* save the wombat */
.save{background:var(--paper);color:var(--ink);padding:60px 0 70px;position:relative;overflow:hidden}
.save .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.save .ph{position:relative}
.save .ph>img.main{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 16px 30px rgba(60,35,20,.25)}
.save .badge{height:auto;position:absolute;width:30%;right:-4%;bottom:-8%;filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
.save .zone{height:auto;position:absolute;width:26%;left:-5%;top:-12%;transform:rotate(-8deg);filter:drop-shadow(0 8px 12px rgba(0,0,0,.3))}
.save h2{font-size:clamp(2.3rem,5vw,3.4rem);color:var(--brown)}
.save .voice{color:#5a4637;margin:8px 0 14px}
.save p.body{margin:0 0 22px;max-width:52ch;color:#3e2f24}
@media(max-width:820px){.save .wrap{grid-template-columns:1fr;gap:56px}}

/* connect strip */
.talk{background:var(--brown);color:var(--cream);padding:36px 0}
.talk .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:space-between}
.talk img{width:230px;height:auto}
.talk h2{font-size:clamp(1.9rem,4vw,2.6rem)}
.talk p{margin:6px 0 0;color:#e2cfae}
.talk .btn{border-color:#d9b48f;color:var(--cream)}
.talk .btn:hover{background:#6a3b29}

/* footer */
.fband{position:relative;height:39vw;max-height:620px;min-height:220px;overflow:hidden;background:#140f0c}
.fband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.fband::before{content:"";position:absolute;inset:0;z-index:1;background:#7a4a2a;mix-blend-mode:multiply;opacity:.35;pointer-events:none}
footer{background:var(--cream);color:var(--ink);padding-block:34px 30px}
.f-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:40px;align-items:center}
.f-nav{order:1;justify-self:start}.f-brand{order:2;text-align:center}.f-side{order:3;justify-self:end}
.f-brand img{width:min(100%,320px);height:auto;display:block;margin:0 auto}
.f-brand p{margin:18px auto 0;color:#4a3627;font-family:var(--disp);font-size:1.3rem;line-height:1.45}
footer h3{font-size:1.35rem;color:var(--brown);margin-bottom:10px}
footer ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:8px;font-family:var(--disp);font-size:1.08rem}
footer a{text-decoration:none;color:var(--ink)}
footer a:hover{color:var(--brown);text-decoration:underline}
.f-soc{display:flex;flex-direction:column;gap:6px}
.f-soc a{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-size:1.08rem}
.f-soc svg{width:22px;height:22px;fill:var(--brown)}
.f-coin{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-size:1.08rem}
.f-coin img{width:44px;height:auto}
.f-coin img.tall{width:auto;height:72px;box-shadow:0 4px 10px rgba(0,0,0,.25)}
.f-coin img.wide{width:110px}
.legal{text-align:center;margin-top:28px;padding-top:16px;border-top:1px solid #d6c6a6;font-size:.88rem;color:#6b5847}
.legal p{margin:0 0 4px}
.signoff{background:var(--deep);text-align:center;padding:30px 16px 44px;font-family:var(--disp);color:var(--cream)}
.signoff svg{width:44px;height:54px;color:var(--gold);transform:rotate(-12deg)}
.signoff span{display:table;margin:0 auto;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.2;padding:2px 10px;border-bottom:1px solid rgba(243,236,220,.4)}
.signoff span:first-of-type{border-top:1px solid rgba(243,236,220,.4);margin-top:8px}
@media(max-width:860px){.f-in{grid-template-columns:1fr 1fr;align-items:start}.f-brand{grid-column:1/-1;order:0}.f-side{justify-self:start}}
@media(max-width:520px){.f-in{grid-template-columns:1fr}.f-brand img{width:220px}.f-brand p{font-size:1.15rem}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- shared sub-page components ---------- */
.page-hero{position:relative;background:var(--bark);color:var(--cream);padding-top:calc(clamp(150px,17vw,250px)*.85 + 40px);padding-bottom:48px;overflow:hidden}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.02}
.page-hero .voice{color:#f2dcae;margin:12px 0 0;max-width:40ch}
.crumb{margin:0 0 10px;font-size:.92rem;color:#cbb898}
.crumb a{color:inherit}
.sec{padding-block:52px 60px}
.sec h2{font-size:clamp(2.1rem,4.6vw,3.2rem)}
.sec-cream{background:var(--cream);color:var(--ink)}
.sec-cream h2,.sec-paper h2{color:var(--brown)}
.sec-cream .voice,.sec-paper .voice{color:#5a4637}
.sec-paper{background:var(--paper);color:var(--ink)}
.sec-bark{background:var(--bark);color:var(--cream)}
.sec-bark .voice{color:#e5cf9f}
.sec-deep{background:var(--deep);color:var(--cream)}
.sec-wood{position:relative;background:#6e4a2f;color:var(--cream);overflow:hidden}
.sec-wood::before{content:"";position:absolute;inset:0;opacity:.5;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 180px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),radial-gradient(ellipse at 30% 20%,rgba(255,210,150,.18),transparent 60%)}
.sec-wood>.wrap{position:relative}
.lead p{max-width:62ch;margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:20px 0}
.chips li{border:1px solid var(--a,var(--gold));color:var(--a,var(--gold));border-radius:999px;padding:4px 14px;font-size:.92rem}
.facts{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px;max-width:48ch}
.facts li{padding-left:24px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.6em;width:11px;height:11px;background:var(--a,var(--gold));border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.seg{display:inline-flex;border:1px solid rgba(243,236,220,.4);border-radius:999px;overflow:hidden}
.seg button{background:none;border:0;color:var(--cream);padding:8px 16px;font-family:var(--disp);font-size:1rem;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--a,var(--gold));color:#1d1a18}
dialog.lb{border:0;background:var(--char);color:var(--sand);border-radius:12px;padding:16px;width:min(94vw,980px)}
dialog.lb::backdrop{background:rgba(0,0,0,.75)}
dialog.lb img{width:100%;height:auto;display:block}
dialog.lb .close{position:absolute;right:14px;top:12px}
dialog.lb p{margin:8px 0 0;text-align:center;color:#b9ac92;font-size:.9rem}
.btn-ghost{background:transparent;color:var(--cream);border-color:rgba(243,236,220,.55)}
.btn-ghost:hover{border-color:var(--cream)}