@font-face{font-family:"R7 Display";src:url(fonts/anton-latin-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/rubik-latin-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Rubik;src:url(fonts/rubik-latin-500.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---------- base = phone ---------- */
:root{--ink:#161717;--paper:#f7f5f0;--red:#e61420;--yellow:#ffd60a;--blue:#1747f5;--pad:clamp(1.1rem,5vw,5rem);--display:"R7 Display","Arial Narrow",Impact,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--red);color:var(--ink);font:400 1.0625rem/1.5 Rubik,ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}
img{display:block;width:100%;height:100%}
p,h1,h2,ul{margin:0}
.defs{position:absolute}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.progress{position:fixed;z-index:5;inset:0 0 auto 0;height:.3rem;background:var(--ink);transform-origin:0 50%}

.ch{position:relative;overflow:clip;min-height:100vh;min-height:100svh;display:grid;align-items:center;background:var(--bg);color:var(--fg)}
.in{width:min(100%,92rem);margin:0 auto;padding:clamp(3rem,8vh,6rem) var(--pad);display:grid;gap:1.6rem}
.kick{font-weight:500;font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.9rem}
h1,h2{font:400 clamp(2.5rem,11.6vw,4.4rem)/.96 var(--display);letter-spacing:.006em;text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(2.4rem,12.4vw,4.8rem)}
h1 span{display:block;white-space:nowrap}
em{font-style:normal;color:var(--hl,inherit)}
.sub{margin-top:.9rem;font-size:1.0625rem;line-height:1.45;max-width:30ch}
.copy{position:relative;z-index:1}
.shot{display:grid;place-items:center}
.fig{position:relative;width:min(100%,calc(56vh*var(--ar)));width:min(100%,calc(56svh*var(--ar)));aspect-ratio:var(--ar);container-type:inline-size;will-change:transform}
.fh{--ar:.8}
.clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 5%,#000 95%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.tag{position:absolute;font:400 3.05cqw/1 var(--display);letter-spacing:.07em;text-transform:uppercase;transform:translateY(-50%)}
.t-case{right:88.7%;top:22.1%}
.t-card{right:88.7%;top:71%}
.t-key{left:86.1%;top:85.5%}

.nfc .fig img{width:76%;margin-left:24%}
.phone{position:absolute;left:0;top:20%;width:27%;aspect-ratio:9/18.5;border:.8cqw solid #2b2b30;border-radius:4.4cqw;background:#0c0c0e;box-shadow:0 2.2cqw 4.5cqw rgba(0,0,0,.38);overflow:clip}
.pf{position:absolute;inset:0;display:grid;justify-items:center;align-content:start;gap:1.3cqw;padding:5.5cqw 1.6cqw 0;background:#fff;color:#161717;font-size:2.3cqw;line-height:1.1}
.av{display:grid;place-items:center;width:9.5cqw;height:9.5cqw;border-radius:50%;background:#161717}
.av svg{display:block;width:40%;fill:#e61420}
.pf b{font-weight:500;font-size:2.6cqw}
.pf i{font-style:normal;color:#5f5f5f;font-size:2cqw}
.fb{padding:1.1cqw 5.5cqw;border-radius:1.1cqw;background:#e61420;color:#fff;font-weight:500}
.gr{display:grid;grid-template-columns:repeat(3,1fr);gap:.45cqw;width:100%;margin-top:1.2cqw}
.gr u{aspect-ratio:1;background:#e61420}
.gr u:nth-child(2){background:#d9d9d6}.gr u:nth-child(3){background:#1747f5}.gr u:nth-child(4){background:#161717}.gr u:nth-child(5){background:#6b6f73}.gr u:nth-child(6){background:#b9bbbd}
.feat{list-style:none;padding:0;margin-top:1.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem .8rem;max-width:26rem}
.feat li{display:flex;align-items:center;gap:.65rem;font-weight:500;line-height:1.2}
.ic{flex:none;width:2.75rem;height:2.75rem;padding:.5rem;border-radius:50%;background:var(--fg);color:var(--bg)}
.soc{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.soc a{display:inline-flex;align-items:center;gap:.5em;min-height:3rem;padding:.55rem 1.25rem;border:.125rem solid var(--paper);border-radius:999px;color:inherit;text-decoration:none}
.soc b{font-weight:500}
.soc a:hover,.soc a:focus-visible{background:var(--paper);color:#1c1215}
.soc a:focus-visible{outline:.19rem solid #ff5a63;outline-offset:.19rem}
.c-red{--bg:var(--red);--fg:#fff;--seven:#fff;--ring:#fff;--hl:var(--yellow)}
.c-yellow{--bg:var(--yellow);--fg:var(--ink);--hl:var(--red)}
.c-blue{--bg:var(--blue);--fg:#fff}
.c-white{--bg:var(--paper);--fg:var(--ink)}
.c-dark{--bg:#1c1215;--fg:var(--paper);--seven:var(--red);--ring:var(--red)}

.top{position:absolute;z-index:2;inset:0 0 auto 0;display:flex;align-items:center;justify-content:space-between;padding:1.2rem var(--pad) 0}
.wm{display:block;width:clamp(8.5rem,15vw,13rem);height:auto;aspect-ratio:469/173;margin-left:-.45rem;color:var(--fg)}
.s7{fill:var(--seven,#e61420)}
.age{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:.125rem solid var(--ring,currentColor);border-radius:50%;font:400 1.05rem/1 var(--display);letter-spacing:.02em}
.hero .in{padding-top:5.6rem}
.hero{--res:min(32.5rem,calc(27rem + (100vw - 24.4rem)*.42))}
.hero .fig{width:min(100%,max(12rem,calc((100vh - var(--res))*var(--ar))));width:min(100%,max(12rem,calc((100svh - var(--res))*var(--ar))))}
.status{display:flex;align-items:center;gap:.65em;margin-bottom:1rem;font:400 1.1rem/1 var(--display);letter-spacing:.09em;text-transform:uppercase}
.status::before{content:"";flex:none;width:.6em;height:.6em;border-radius:50%;background:currentColor;animation:pulse 2.6s ease-in-out infinite}
.hero .top{justify-content:flex-end}
.hero h1 .wm{width:min(104%,clamp(15rem,84vw,30rem));margin:-.4rem 0 0 -4.6%;animation:rise .7s cubic-bezier(.2,.7,.1,1) both}
.tagline{margin-top:.5rem;font:400 clamp(2rem,11.6vw,4.2rem)/1 var(--display);letter-spacing:.02em;white-space:nowrap;animation:rise .7s cubic-bezier(.2,.7,.1,1) .12s both}
.hero .sub{margin-top:.7rem;font-weight:500}
.hero .shot{animation:boxup 1.1s cubic-bezier(.2,.7,.1,1) .2s both}
.cue{position:absolute;left:50%;bottom:1.1rem;width:1.1rem;height:1.1rem;margin-left:-.55rem;border:solid currentColor;border-width:0 .16rem .16rem 0;transform:rotate(45deg);opacity:.7;animation:nudge 1.8s ease-in-out infinite}

.colours{align-items:start}
.colours .head{width:min(100%,92rem);margin:0 auto;padding:clamp(3.5rem,9vh,7rem) var(--pad) 0}
.rail{overflow-x:auto;padding:1.5rem 0 clamp(3rem,8vh,6rem)}
.strip{display:flex;gap:.6rem;width:max-content;padding:0 var(--pad);list-style:none}
.strip li{flex:none;width:clamp(11.5rem,46vw,19rem);text-align:center}
.strip img{height:auto;aspect-ratio:4/5;object-fit:contain}
.strip span{display:block;margin-top:.4rem;font:400 1.2rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase}

.end .in{justify-items:center;text-align:center;gap:1.2rem}
.end .shot{width:100%}
.end .kick{margin:0;color:#ff5a63}
.end .wm{width:clamp(13rem,62vw,30rem);margin:0}
.end h2{font-size:clamp(3rem,15vw,8rem)}
.end .fig{width:min(100%,calc(44vh*var(--ar)));width:min(100%,calc(44svh*var(--ar)))}

footer{background:#151012;color:#cfc9c0;padding:1.6rem var(--pad) 2rem;text-align:center;font-size:.9375rem}
.mantra{font:400 clamp(1.5rem,7vw,2.5rem)/1.1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);white-space:nowrap}
.mantra em{color:#ff3b45}
.fine{margin-top:1rem;line-height:1.6}

/* ---------- 18+ gate: one checkbox, no script, nothing stored ---------- */
.gate{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:2rem var(--pad);background:#1c1215;color:var(--paper);text-align:center;--seven:var(--red)}
.gate-in{display:grid;justify-items:center;gap:1.15rem;max-width:26rem}
.gate .wm{width:clamp(11rem,52vw,16rem);margin:0;color:var(--paper)}
.gate-age{display:grid;place-items:center;width:5.75rem;height:5.75rem;border:.19rem solid var(--red);border-radius:50%;font:400 2.3rem/1 var(--display);letter-spacing:.02em}
.gate-h{font:400 clamp(2.5rem,11.6vw,3.8rem)/.96 var(--display);text-transform:uppercase}
.enter{display:inline-flex;align-items:center;justify-content:center;min-height:3.6rem;margin-top:.4rem;padding:.8rem 2.2rem;border-radius:999px;background:var(--red);color:#fff;font:400 1.4rem/1 var(--display);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent}
.enter:hover{background:#f02734}
#age:focus-visible~.gate .enter{outline:.19rem solid #fff;outline-offset:.22rem}
.gate-s{font-size:.9375rem;color:#cfc9c0}
#age:checked~.gate{display:none}
#age:not(:checked)~.site{display:none}

@keyframes rise{from{opacity:0;transform:translateY(.22em)}}
@keyframes boxup{from{opacity:0;transform:translateY(24%)}}
@keyframes pulse{50%{opacity:.35}}
@keyframes nudge{50%{transform:translateY(.35rem) rotate(45deg)}}

/* ---------- larger screens ---------- */
@media (min-width:56rem){
.in{grid-template-columns:minmax(0,11fr) minmax(0,13fr);align-items:center;gap:clamp(1.25rem,3vw,3.5rem);padding-block:clamp(3.5rem,9vh,7rem)}
.flip .in{grid-template-columns:minmax(0,13fr) minmax(0,11fr)}
.flip .copy{order:2}
h1,h2{font-size:clamp(3rem,7vw,7rem)}
h1{font-size:clamp(3.3rem,6.6vw,7.2rem)}
.sub{margin-top:clamp(1rem,2vw,1.6rem);font-size:clamp(1.0625rem,1.45vw,1.375rem);max-width:28ch}
.kick{margin-bottom:1.1rem}
.status{font-size:clamp(1.05rem,1.6vw,1.4rem);margin-bottom:1.2rem}
.top{padding-top:clamp(1.2rem,2.6vw,2.2rem)}
.hero .in{padding-top:clamp(3.5rem,9vh,7rem)}
.fig{width:min(100%,54rem,calc(88vh*var(--ar)));width:min(100%,54rem,calc(88svh*var(--ar)))}
.hero .fig{width:min(100%,max(16rem,calc((100vh - 11rem)*var(--ar))));width:min(100%,max(16rem,calc((100svh - 11rem)*var(--ar))))}
.hero h1 .wm{width:min(104%,clamp(20rem,36vw,40rem))}
.tagline{margin-top:clamp(.6rem,1.2vw,1.2rem);font-size:clamp(2.6rem,5.5vw,6rem)}
.hero .sub{margin-top:clamp(.9rem,1.6vw,1.4rem)}
.feat{margin-top:clamp(1.5rem,2.6vw,2.2rem);font-size:clamp(1rem,1.25vw,1.2rem)}
.strip{gap:clamp(.5rem,1.5vw,1.5rem)}
.strip li{width:clamp(11.5rem,21vw,19rem)}
.strip span{font-size:clamp(1.1rem,1.6vw,1.5rem)}
.end .in{grid-template-columns:1fr;gap:clamp(1rem,3vh,2.2rem)}
.end .wm{width:clamp(13rem,34vw,30rem)}
.end h2{font-size:clamp(3rem,9vw,8rem)}
.end .fig{width:min(100%,56rem,calc(60vh*var(--ar)));width:min(100%,56rem,calc(60svh*var(--ar)))}
.mantra{font-size:clamp(1.5rem,4.2vw,2.5rem)}
}

/* ---------- scroll-linked motion: only where supported and wanted; complete and static without it ---------- */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.progress{animation:grow linear both;animation-timeline:scroll(root)}
.hero .fig{animation:lift linear both;animation-timeline:scroll(root);animation-range:0 100vh}
.ch:not(.hero) .fig{animation:drift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
.ch:not(.hero) .copy>*,.colours .head>*{animation:reveal linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
.rail{overflow:clip}
.strip{animation:glide linear both;animation-timeline:view();animation-range:entry 20% exit 80%}
.end .fig{animation-name:bloom}
.nfc .phone{animation:tap linear both;animation-timeline:view();animation-range:entry 40% cover 46%}
.nfc .pf{animation:sheet linear both;animation-timeline:view();animation-range:cover 38% cover 54%}
@keyframes tap{from{transform:translateX(-30%) rotate(-10deg)}}
@keyframes sheet{from{transform:translateY(101%)}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes lift{to{transform:translateY(-14%) scale(1.07) rotate(-3deg)}}
@keyframes drift{from{transform:translateY(18%) scale(.9) rotate(-5deg)}50%{transform:none}to{transform:translateY(-12%) scale(1.04) rotate(3deg)}}
@keyframes reveal{from{opacity:0;transform:translateY(2.75rem)}}
@keyframes glide{from{transform:translateX(6vw)}to{transform:translateX(calc(100vw - 100% - 6vw))}}
@keyframes bloom{from{transform:scale(.78) rotate(-7deg)}60%{transform:none}to{transform:scale(1.03)}}
}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.clip{display:none}}
@media print{.progress,.cue{display:none}.ch{min-height:0}}
.f0{--ar:1.0566}.f1{--ar:0.9825}.f2{--ar:1.2206}.f3{--ar:0.9977}.f4{--ar:1.2534}.f5{--ar:1.3170}