@font-face{font-family:Archivo;src:url(assets/archivo.ttf);font-display:swap} @font-face{font-family:DM;src:url(assets/dm.ttf);font-display:swap;font-weight:400 700}
:root{--cream:#fff4df;--ink:#27272b;--turquoise:#12c9be;--petrol:#145658;--coral:#ff5878;--red:#ef3e42;--orange:#ff8a1c;--gold:#f5c84c;--line:rgba(39,39,43,.24);--space:clamp(24px,5vw,80px)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--cream);color:var(--ink);font-family:DM,'Arial',sans-serif;font-size:17px;line-height:1.5}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}button,a{touch-action:manipulation}button{cursor:pointer}img{display:block;max-width:100%;height:auto}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--petrol);outline-offset:5px}.skip{position:fixed;top:-100px;left:20px;background:var(--cream);padding:10px;z-index:100}.skip:focus{top:5px}.preview-bar{font-size:10px;letter-spacing:.12em;background:var(--ink);color:var(--cream);padding:7px var(--space);display:flex;justify-content:space-between}header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space);border-bottom:1px solid var(--ink);background:var(--cream)}.brand{width:156px}.brand img{width:100%}nav{display:flex;align-items:center;gap:36px;font-size:14px;font-weight:700}nav>a:not(.button):hover{text-decoration:underline;text-underline-offset:8px}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:30px;background:var(--ink);color:var(--cream);border:2px solid var(--ink);border-radius:30px;padding:13px 24px;font-size:15px;font-weight:600;min-height:50px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px);background:var(--petrol);color:var(--cream)}.button span{font-size:22px;line-height:1}.outline{background:transparent;color:var(--ink)}.menu{display:none}.kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.5}.hero{padding:28px var(--space) 0;background:var(--turquoise);overflow:hidden;position:relative}.hero-top,.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}.soon{display:flex;gap:10px;align-items:center;background:rgba(255,244,223,.45);border:1px solid rgba(39,39,43,.22);padding:8px 15px;border-radius:3px;font-size:13px;backdrop-filter:blur(10px)}.soon i{width:6px;height:6px;background:var(--ink);border-radius:50%}.hero-layout{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;min-height:650px;max-width:1500px;margin:auto}.hero h1{font-family:Archivo,'Arial Black',sans-serif;font-size:clamp(58px,6.4vw,100px);font-weight:400;line-height:.94;letter-spacing:-.065em;margin:30px 0 22px;position:relative;z-index:1}.hero-copy p{margin:0 0 28px;font-size:19px}.hero-art{position:relative;isolation:isolate}.hero-art .sun{position:absolute;inset:-18% 10% -2%;border-radius:50% 50% 0 0;background:var(--cream);z-index:-1}.hero-art img{width:118%;max-width:none;mix-blend-mode:multiply;margin-left:-8%}.art-caption{text-align:center;margin-top:26px;font-size:10px}.hero-bottom{padding:30px 0 23px;margin-top:28px;border-top:1px solid rgba(39,39,43,.35);font-size:12px}.hero-bottom>span:last-child{display:flex;gap:40px}.section{padding:100px var(--space);max-width:1600px;margin:auto}h2,h3{font-family:Archivo,'Arial Black',sans-serif;line-height:.98;letter-spacing:-.055em;font-weight:400;text-wrap:balance}h2{font-size:clamp(40px,4.7vw,70px);margin:18px 0 25px}h3{font-size:clamp(36px,4vw,60px);margin:20px 0 24px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:42px}.section-head p{max-width:350px;margin-bottom:28px}.tabs{border-block:1px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr)}.tabs button{position:relative;border:0;background:none;text-align:left;display:flex;gap:12px;align-items:center;font-size:14px;font-weight:700;min-height:74px;padding:12px 20px}.tabs button+button:before{content:'';position:absolute;left:0;top:22px;bottom:22px;border-left:1px solid var(--line)}.tabs button[aria-selected=true]{background:rgba(18,201,190,.1)}.tabs button[aria-selected=true]:after{content:'';position:absolute;height:4px;bottom:-1px;left:0;right:0;background:var(--turquoise)}.tabs i{width:13px;height:13px;border:1px solid var(--ink);background:var(--dot);border-radius:50%;flex-shrink:0}.flavour-detail{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding:55px 50px 35px;align-items:center}.flavour-visual{height:470px;position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate}.colour-disc{position:absolute;width:360px;height:360px;border-radius:50%;background:#f5c84c55;z-index:-1;transition:background .3s}.can-crop{position:relative;overflow:hidden;width:170px;height:440px;mix-blend-mode:multiply}.can-crop img{position:absolute;max-width:none;width:690px;height:auto;top:-5px;left:-508px}.can-crop.peach img{left:-46px}.can-crop.cherry img{left:-201px}.can-crop.passion img{left:-355px}.edition{position:absolute;bottom:0;left:0}.flavour-copy{max-width:410px}.flavour-copy>p{max-width:380px}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0}.chips span{border:1px solid var(--line);border-radius:20px;padding:5px 13px;font-size:13px}.small{font-size:12px;text-transform:uppercase;letter-spacing:.08em}.text-link{display:inline-flex;gap:28px;align-items:center;font-size:14px;font-weight:700;border-bottom:3px solid var(--turquoise);padding:9px 0}.text-link span{font-size:20px}.range-footer{display:flex;justify-content:space-between;gap:20px;padding-top:30px;margin-top:30px;border-top:1px solid var(--line);font-size:13px}.range-footer .kicker{font-size:11px}.feature{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--ink)}.feature-intro{padding:75px var(--space) 0;background:var(--coral);position:relative;overflow:hidden}.feature-intro h2{font-size:clamp(40px,4.7vw,72px);margin-bottom:30px}.feature-intro>p{margin-bottom:64px}.stripes{height:48px;display:flex;flex-direction:column;margin:0 calc(-1 * var(--space))}.stripes i{height:16px;background:var(--red)}.stripes i:nth-child(2){background:var(--orange)}.stripes i:nth-child(3){background:var(--gold)}.ingredients{padding:75px var(--space)}.ingredients>.kicker{margin-bottom:24px}details{border-top:1px solid var(--line)}details:nth-last-of-type(1){border-bottom:1px solid var(--line)}summary{display:flex;justify-content:space-between;gap:20px;padding:21px 0;cursor:pointer;font-weight:700;font-size:20px;list-style:none}summary::-webkit-details-marker{display:none}summary span{font-weight:400;transition:transform .2s}details[open] summary span{transform:rotate(45deg)}details p{margin:0 40px 22px 0;font-size:15px;line-height:1.7}.caffeine-note{font-size:11px;line-height:1.7;margin-top:28px;max-width:360px}.ticker{overflow:hidden;padding:17px 0;border-bottom:1px solid var(--ink);font-family:Archivo,sans-serif;font-size:24px;white-space:nowrap;background:var(--gold)}.ticker span{display:block;width:max-content;animation:drift 40s linear infinite}@keyframes drift{to{transform:translateX(-35%)}}.world{display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center}.world-copy p{max-width:400px}.world-logo{width:230px;margin-top:55px}.world figure{margin:0;position:relative}.world figure>img{width:100%;height:540px;object-fit:cover;object-position:center 65%}.world figcaption{position:absolute;bottom:0;left:0;right:0;padding:28px 25px 18px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:var(--cream);font-size:10px}.enquiry{border-top:1px solid var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:8vw}.enquiry h2{font-size:clamp(40px,4.2vw,62px)}.form-note{display:block;font-size:12px;margin-top:35px;font-style:italic}form{display:flex;flex-direction:column}label{font-size:12px;font-weight:700;margin-bottom:7px}input,select,textarea{width:100%;padding:12px 15px;background:transparent;border:1px solid var(--line);border-radius:0;margin-bottom:20px;min-height:50px}textarea{resize:vertical}form .button{width:100%}#form-status{font-size:13px;min-height:20px}footer{background:var(--ink);color:var(--cream);padding:60px var(--space) 25px}.footer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:50px}.footer-top>img{width:300px}.footer-top>p{font-family:Archivo,sans-serif;font-size:32px;line-height:1;margin:0;letter-spacing:-.04em}.footer-bottom{border-top:1px solid #ffffff40;padding-top:25px;display:flex;justify-content:space-between;gap:22px;font-size:11px}.footer-bottom a:hover{text-decoration:underline}
@media(min-width:1600px){.hero{padding-inline:max(var(--space),calc((100vw - 1440px)/2))}.feature{padding-inline:calc((100vw - 1600px)/2);background:var(--cream)}}
@media(max-width:950px){nav{gap:20px}.hero-layout{min-height:570px}.hero h1{font-size:70px}.hero-art img{width:130%;margin-left:-18%}.flavour-detail{gap:30px;padding-inline:0}.colour-disc{width:290px;height:290px}.feature-intro h2{font-size:52px}.world{gap:40px}.world figure>img{height:450px}}
@media(max-width:650px){.preview-bar{font-size:9px;justify-content:center}.preview-bar span{display:none}header{height:82px;position:relative}.brand{width:132px}.menu{display:flex;align-items:center;gap:18px;background:none;border:0;font-size:13px;font-weight:700;padding:12px 0}.menu span{font-size:23px}nav{display:none;position:absolute;z-index:20;top:81px;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--ink);padding:25px;align-items:start}nav.open{display:flex;flex-direction:column}.hero{padding-top:22px}.hero-top .kicker{font-size:9px;letter-spacing:.07em}.soon{font-size:11px;padding:6px 9px;gap:6px}.hero-layout{grid-template-columns:1fr;min-height:0}.hero h1{font-size:clamp(56px,14vw,80px);line-height:.96;margin-top:38px}.hero-copy p{font-size:16px;margin:18px 0 22px}.hero-art{margin:65px 4% 0}.hero-art .sun{inset:-8% 8% 0}.hero-art img{width:112%;margin-left:-6%}.art-caption{font-size:8px;margin-top:10px}.hero-bottom{font-size:9px;padding:22px 0 18px;margin-top:30px}.hero-bottom>span:last-child{gap:10px}.section{padding-block:65px}.section-head{display:block;margin-bottom:30px}.section-head p{font-size:15px;margin:20px 0 0}.kicker{font-size:10px}h2{font-size:43px}.tabs{display:grid;grid-template-columns:1fr 1fr}.tabs button{min-height:60px;padding:12px 9px;font-size:11px;gap:8px}.tabs button:nth-child(3){border-top:1px solid var(--line)}.tabs button:nth-child(4){border-top:1px solid var(--line)}.tabs button:nth-child(3):before{display:none}.tabs i{width:10px;height:10px}.flavour-detail{display:flex;flex-direction:column;gap:25px;padding:30px 0 10px}.flavour-visual{width:100%;height:380px}.can-crop{transform:scale(.8)}.colour-disc{width:280px;height:280px}.edition{font-size:9px;bottom:10px}.flavour-copy{width:100%;max-width:none}.flavour-copy h3{font-size:38px;margin-top:15px}.flavour-copy p{font-size:15px}.flavour-copy .small{font-size:10px}.range-footer{flex-direction:column;gap:12px;margin-top:30px;font-size:11px}.range-footer .kicker{font-size:9px}.feature{grid-template-columns:1fr}.feature-intro,.ingredients{padding:50px var(--space)}.feature-intro{padding-bottom:0}.feature-intro h2{font-size:48px}.feature-intro p{font-size:16px;margin-bottom:38px}.ingredients{padding-bottom:35px}summary{font-size:18px;padding:18px 0}.world{grid-template-columns:1fr;gap:35px}.world-logo{width:180px;margin-top:30px}.world figure>img{height:420px}.world-copy p{font-size:16px}.enquiry{grid-template-columns:1fr;gap:35px}.enquiry h2{font-size:43px}.enquiry p{font-size:15px}.form-note{margin-top:20px}footer{padding-top:40px}.footer-top{align-items:start;gap:30px;padding-bottom:30px}.footer-top>img{width:180px}.footer-top>p{font-size:18px}.footer-bottom{display:grid;grid-template-columns:1fr 1fr;font-size:10px}.ticker{font-size:19px}}
.hero-art{background:#fff;border-radius:48% 48% 0 0;padding-top:65px;overflow:hidden;isolation:auto}.hero-art .sun{display:none}.hero-art img{width:100%;margin-left:0;mix-blend-mode:normal}.art-caption{background:white;padding:8px 12px 22px;margin-top:0}.can-crop{mix-blend-mode:normal;border-radius:85px 85px 20px 20px;background:#fff}.colour-disc{z-index:-1}.footer-top>img{background:var(--cream);padding:10px;border-radius:5px}
@media(max-width:650px){.hero-art{padding-top:45px;margin-top:40px}.art-caption{font-size:8px}.flavour-visual{isolation:isolate}}
.hero-art{border-radius:200px 200px 0 0;padding:90px 25px 0}
@media(max-width:650px){.hero-art{border-radius:110px 110px 0 0;padding:55px 15px 0}}
.can-crop{width:150px;border-radius:0;background:transparent}.can-crop.peach img{left:-49px}.can-crop.cherry img{left:-205px}.can-crop.passion img{left:-358px}.can-crop.original img{left:-512px}
/* Hero lettering follows the approved cream/charcoal retro treatment. */
@font-face{font-family:'Archivo Black';src:url(assets/archivo.ttf) format('truetype');font-weight:400;font-style:normal;font-display:swap}
.hero h1,.feature-intro h2{font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-synthesis:none;color:var(--cream);-webkit-text-fill-color:var(--cream);-webkit-text-stroke:.085em var(--ink);paint-order:stroke fill;text-shadow:.06em .07em 0 var(--ink);letter-spacing:-.035em}
/* Supplied transparent artwork: CSS framing leaves every source pixel unchanged. */
.hero-art{padding:65px 0 0;overflow:visible;isolation:isolate;border-radius:0;background:transparent}
.hero-art .sun{display:block;inset:0 5% 30px;border-radius:50% 50% 0 0;background:var(--cream);z-index:-1}
.hero-art>img{width:100%;height:auto;aspect-ratio:1080/760;object-fit:cover;object-position:center;mix-blend-mode:normal}
.art-caption{background:transparent;padding:0 12px 20px}
.can-crop img{top:-195px}
.flavour-sticker{position:absolute;width:150px;height:auto;right:0;bottom:38px;z-index:2;filter:drop-shadow(0 5px 2px #27272b12)}
.flavour-sticker[hidden]{display:none}
@media(max-width:950px){.flavour-sticker{width:115px;right:-8px;bottom:25px}}
@media(max-width:650px){.hero-art{padding:45px 0 0}.flavour-sticker{width:105px;right:0;bottom:45px}.feature-intro h2{font-size:clamp(32px,8.8vw,48px)}}
/* Larger flavour circles and exact supplied sticker art beside each tab label. */
.colour-disc{width:min(440px,100%);height:auto;aspect-ratio:1}
.tabs button{gap:14px;min-height:104px;padding:14px 16px;line-height:1.3}
.tab-sticker{width:64px;height:64px;object-fit:contain;flex-shrink:0}
.ticker{background:var(--petrol);color:var(--cream);padding:14px 0}
.ticker-track{display:flex;width:max-content;animation:mello-ticker 55s linear infinite}
.ticker-group{display:flex;align-items:center;gap:30px;padding-right:30px;flex-shrink:0;min-width:100vw}
.ticker span{display:inline;width:auto;animation:none}
.ticker img{width:48px;height:44px;object-fit:contain;flex-shrink:0}
@keyframes mello-ticker{to{transform:translateX(-50%)}}
@media(max-width:950px){.tabs button{padding:12px 10px;gap:10px;font-size:12px}.tab-sticker{width:48px;height:48px}.colour-disc{width:min(400px,100%)}}
@media(max-width:650px){.colour-disc{width:min(340px,100%)}.tabs button{min-height:94px;padding:12px 9px;gap:9px;font-size:11px}.tab-sticker{width:48px;height:48px}.ticker-group{gap:22px;padding-right:22px}.ticker img{width:40px;height:36px}}
/* Restore the blue-turquoise hero; crop the supplied Cape Town artwork into its arch. */
.hero{background:var(--turquoise);isolation:isolate}
.hero::before{display:none}
.hero-art .sun{display:block;position:absolute;inset:0 5% 30px;border-radius:50% 50% 0 0;background:var(--cream) url('assets/cape-town-arch.jpg') center 65%/cover no-repeat;z-index:-1;pointer-events:none}
.hero-art{background:transparent;border-radius:0;isolation:isolate}
.hero-art>img{position:relative;z-index:1}
.hero-copy{position:relative;z-index:2}
.soon{background:rgba(255,244,223,.8)}
@media(max-width:650px){.hero-art .sun{background-position:center 65%}}
/* User refinement: align feature columns and run the retro stripe edge to edge. */
.feature{padding-inline:0;align-items:stretch}
.feature-intro{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:75px var(--space)}
.feature-intro>p{margin-bottom:0}
.feature>.stripes{grid-column:1/-1;width:100%;margin:0}
.ticker{background:var(--cream);color:var(--ink)}
@media(max-width:650px){.feature-intro{padding:50px var(--space)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}