/* ═══════════════════════════════════════════════════════════
   SONDER — (n.) each passer-by a universe
   Design system mirrors the reference build: viewport-locked
   rem scale, difference-blended chrome, scaleY curtain reveals.
   ═══════════════════════════════════════════════════════════ */

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body,div,span,h1,h2,h3,h4,p,a,i,ul,li,form,label,input,button,figure,picture,img,section,header,footer,main{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}
ul{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{background:none;border:0;color:inherit;cursor:pointer;font:inherit}
input{background:none;border:0;color:inherit;font:inherit;outline:none}
::selection{background:var(--red);color:#fff}

/* ── tokens ────────────────────────────────────────────── */
:root{
  --red:#ed3833;
  --red-1:#eedfdf;
  --blue:#2ec8cd;
  --bg:#fff9f7;
  --black:#000;
  --white:#fff;
  --display:"Big Shoulders Display","Anton",sans-serif;
  --mono:"DM Mono","Courier New",monospace;
  --sans:"Inter",system-ui,sans-serif;
  --ease:cubic-bezier(.75,0,.25,1);
  --inner-vh:100vh;
  font-size:2.6666666667vw;                 /* 375px base */
}
/* dvh tracks the mobile URL bar; JS only fills in for browsers without it */
@supports (height:100dvh){:root{--inner-vh:100dvh}}
@media (min-width:768px) and (max-width:1023px){:root{font-size:1.3020833333vw}}
@media (min-width:1024px){:root{font-size:.6944444444vw}}   /* 1rem = 10px @1440 */

html{scroll-behavior:smooth;-webkit-text-size-adjust:none;text-size-adjust:none}
body{
  background:var(--bg);color:var(--black);
  font-family:var(--display);
  min-height:100vh;overflow-x:clip;          /* clip, not hidden — keeps the hero pin alive */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden;height:100vh}

/* pre-intro state — prevents a flash of finished copy before JS runs */
body.preloading .header{opacity:0}
body.preloading .hero-section__title,
body.preloading .hero-section__subtitle,
body.preloading .hero-section__text a,
body.preloading .hero-card__title{transform:scaleY(0);transform-origin:50% 100%}
body.preloading .hero-section__list>li:not(:first-child){transform:scaleY(0);transform-origin:50% 100%}

.container{padding:0 1.6rem;width:100%}
@media (min-width:768px){.container{padding:0 3.2rem}}
@media (min-width:1024px){.container{padding:0 3.5rem}}

.h2{color:var(--red);font-size:2rem;font-weight:500;line-height:2rem;text-transform:uppercase;font-family:var(--display);letter-spacing:.01em}

.button{
  align-items:center;display:flex;font-size:1.7rem;font-weight:600;gap:.2rem;
  height:6rem;justify-content:center;line-height:1.7rem;text-transform:uppercase;
  transition:opacity .4s;width:100%;
}
.button strong{font-weight:100}
.button--black{background:var(--black);color:#fff;position:relative;overflow:hidden}
.button--black::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--ease);z-index:-1}
.button--black:hover::after{transform:scaleY(1)}
.button--black>*{position:relative;z-index:1}

.link{
  color:var(--black);font-size:1.7rem;font-weight:600;line-height:1.7rem;
  text-transform:uppercase;display:inline-block;
}
.link>span{position:relative;display:inline-block;transition:transform .4s var(--ease)}
.link:hover>span{transform:scaleY(1.18)}

/* horizontal progress rail (their .scroll) */
.scroll{height:1.1rem;margin:-.5rem 0;overflow:hidden;pointer-events:none;position:relative}
.scroll::after{background:var(--red-1);content:"";height:1px;left:0;position:absolute;right:0;top:50%;transform:translateY(-50%);z-index:0}
.scroll__fill{position:absolute;top:50%;left:0;height:2px;width:20%;background:var(--red);transform:translateY(-50%);transform-origin:left center;z-index:1;transition:transform .1s linear}

/* drag/click cursor puck */
.cursor{
  display:flex;height:9rem;width:12.1rem;left:0;top:0;opacity:0;
  pointer-events:none;position:absolute;z-index:10;
  transition:opacity .3s;will-change:transform;
}
.cursor.visible{opacity:1}
.cursor::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--red);
  border-radius:50% 50% 48% 52%/56% 44% 56% 44%;
  transform:rotate(-8deg) scale(.86);
}
.cursor__text{
  color:#fff;display:flex;font-size:1.7rem;font-weight:500;justify-content:center;
  left:50%;line-height:1.7rem;position:absolute;text-transform:uppercase;top:50%;
  transform:translate(-50%,-50%) rotate(-10deg);z-index:2;gap:.4rem;
}
.cursor__text>span{display:block;height:1.7rem;overflow:hidden;width:4rem;position:relative}
.cursor__text>span>span{display:inline-block;position:absolute;inset:0;text-align:center}

/* ═══════════════ HEADER ═══════════════ */
.header{opacity:0;transition:opacity .5s}
.header.is-in{opacity:1}
.header__inner{
  color:#fff;left:1.6rem;right:1.6rem;top:1.4rem;
  mix-blend-mode:difference;position:fixed;z-index:1000;
  transition:transform .5s var(--ease);
}
.header.is-hidden .header__inner{transform:translateY(-140%)}
.header__list{display:grid;gap:.7rem 10rem;grid-template-columns:1fr 1fr}
.header__list>li>a,
.header__list>li>button{
  align-items:flex-end;display:flex;font-family:var(--mono);font-size:1.2rem;
  font-weight:400;gap:.4rem;letter-spacing:-.06rem;line-height:1rem;
  text-transform:uppercase;transition:transform .4s var(--ease);
  width:max-content;
}
.header__list>li>a:hover,
.header__list>li>button:hover{transform:translateY(-.2rem)}
.header__list>li>a strong,.header__list>li>button strong{font-size:.9rem;letter-spacing:-.045rem;line-height:.8rem;margin-left:.1rem}
.header__list>li>a .dot,.header__list>li>button .dot{
  height:.8rem;width:.8rem;flex-shrink:0;border:1px solid currentColor;border-radius:50%;
  transition:background .3s;
}
.header__list>li>a:hover .dot,.header__list>li>button:hover .dot{background:currentColor}
.header__list>li:nth-of-type(3),.header__list>li:nth-of-type(6){display:none}
.header__list>li:nth-of-type(2),.header__list>li:nth-of-type(4){display:flex;justify-content:flex-end}
.header__list>li:nth-of-type(4){grid-column:2/3;grid-row:2/3}

.header__logo{
  display:block;left:50%;position:absolute;top:0;
  transform:translateX(-50%);transform-origin:top;width:16.8rem;
  transition:transform .6s var(--ease);
}
.header__logo-word{
  display:block;font-family:var(--display);font-weight:800;font-size:5.4rem;
  line-height:.8;letter-spacing:-.02em;text-align:center;text-transform:uppercase;
  white-space:nowrap;
}
.header__logo:hover{transform:translateX(-50%) scaleY(1.08)}
/* the dictionary tag that sits beside the wordmark */
.header__text{
  display:none;top:.6rem;font-size:1.4rem;font-weight:400;left:calc(50% + 9.4rem);
  line-height:1.4rem;opacity:.5;pointer-events:none;position:absolute;
  text-transform:uppercase;white-space:nowrap;
}

@media (min-width:768px){
  .header__inner{left:3.2rem;right:3.2rem;top:1.3rem}
  .header__list{gap:.8rem 10rem}
  .header__list>li>a,.header__list>li>button{font-size:1.3rem;line-height:1.3rem}
  /* odd items hug the left column, even items the right */
  .header__list>li:nth-of-type(3){display:flex;justify-content:flex-start}
  .header__list>li:nth-of-type(2),
  .header__list>li:nth-of-type(4),
  .header__list>li:nth-of-type(6){display:flex;justify-content:flex-end}
  .header__list>li:nth-of-type(4){grid-column:auto;grid-row:auto}
  .header__logo{top:.2rem;width:17.6rem}
  .header__logo-word{font-size:5.8rem}
  .header__text{display:block;left:calc(50% + 9.8rem)}
}
@media (min-width:1024px){
  .header__inner{left:3.4rem;right:3.5rem;top:3.1rem}
}

/* ═══════════════ 01 · HERO ═══════════════ */
/* sticky = the reference build's pinSpacing:false pin — later opaque
   sections simply scroll up over the held hero */
.hero-section{
  height:var(--inner-vh);overflow:hidden;position:sticky;top:0;width:100%;z-index:2;
  padding-top:8.5rem;padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px));
}
.hero-section .container{display:flex;flex-direction:column;height:100%;justify-content:space-between;position:relative}

.hero-section__download,
.hero-section__loader,
.hero-section__subtitle,
.hero-section__title{font-size:6.4rem;font-weight:800;line-height:5.1rem;text-transform:uppercase}

.hero-section__download{
  position:absolute;right:0;top:25rem;font-family:var(--display);
  color:var(--red);transform:translateY(25vh);
}
.hero-section__top{position:relative}
.hero-section__loader{
  align-items:flex-end;display:flex;left:0;position:absolute;top:0;gap:.6rem;
  color:var(--black);
}
.hero-section__loader .dot{
  display:block;height:1.1rem;width:1.1rem;margin-bottom:1.1rem;border-radius:50%;
  background:var(--red);
}
.hero-section__title{color:var(--black);letter-spacing:-.02em}
.hero-section__subtitle{
  color:#fff;mix-blend-mode:difference;text-align:right;letter-spacing:-.02em;
}
.hero-section__text{
  color:var(--white);font-size:2.2rem;font-weight:600;line-height:2.2rem;
  margin:0 auto;position:relative;text-align:center;text-transform:uppercase;
}
.hero-section__text a,.hero-section__text>span{mix-blend-mode:difference}
.hero-section__text a{display:block;transition:transform .4s var(--ease)}
.hero-section__text a:hover{transform:scaleY(1.2)}
.hero-section__text>span{display:block;position:absolute;inset:0;text-align:center;white-space:nowrap}

.hero-section__list{position:absolute;inset:0;z-index:-1}
.hero-section__list>li{position:absolute;inset:0;transform-origin:50% 100%;will-change:transform}

.hero-card{display:block;height:100%;position:relative;width:100%;z-index:1}
.hero-card__img-bw,
.hero-card__img-color,
.hero-card__preloader-img{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  display:flex;flex-shrink:0;min-width:100%;aspect-ratio:16/9;
}
.hero-card__img-bw img,
.hero-card__img-color img,
.hero-card__preloader-img img{height:100%;width:100%;object-fit:cover;-webkit-user-drag:none}
.hero-card__img-bw{filter:grayscale(1) contrast(1.05);z-index:0}
.hero-card__img-bw .hero-card__title{color:#fff}
.hero-card__preloader-img{
  z-index:10;--p:0;
  -webkit-mask-image:conic-gradient(from 0deg,transparent 0deg calc(var(--p) * 1turn),#000 calc(var(--p) * 1turn) 1turn);
  mask-image:conic-gradient(from 0deg,transparent 0deg calc(var(--p) * 1turn),#000 calc(var(--p) * 1turn) 1turn);
  filter:grayscale(1);
}
/* organic torn-edge colour reveal (their mask_img.webp) */
.hero-card__img-color{
  z-index:1;
  -webkit-mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M10 6c14-5 22 4 34 2s18-8 30-4 18 14 16 26-12 16-10 28 8 22-2 30-24 4-38 6-26 6-34-2-4-20-6-32-6-22 0-32 4-18 10-22z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M10 6c14-5 22 4 34 2s18-8 30-4 18 14 16 26-12 16-10 28 8 22-2 30-24 4-38 6-26 6-34-2-4-20-6-32-6-22 0-32 4-18 10-22z'/%3E%3C/svg%3E");
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:cover;mask-size:cover;
}
/* centred with auto margins, not a transform — the curtain animation
   owns `transform` and would otherwise wipe the centring out */
.hero-card__title{
  bottom:calc(5rem + env(safe-area-inset-bottom,0px));color:var(--red);
  font-size:7.2rem;font-weight:800;left:0;right:0;margin:0 auto;
  line-height:80%;position:absolute;
  text-align:center;text-transform:uppercase;
  width:35rem;z-index:3;transform-origin:50% 100%;will-change:transform;
}

@media (max-width:767px){
  .hero-section__subtitle,.hero-section__title{display:none}
  .hero-section__download{right:0;top:22rem;transform:translateY(45vh)}
}
@media (min-width:768px){
  .hero-section__download,.hero-section__loader,
  .hero-section__subtitle,.hero-section__title{font-size:8rem;line-height:6.4rem}
  .hero-section__subtitle{margin-bottom:6%;margin-left:auto;width:34rem}
  .hero-section__download{top:25rem;transform:translateY(43vh)}
  .hero-card__title{font-size:9rem;width:52rem}
}
@media (min-width:1024px){
  .hero-section__download,.hero-section__loader,
  .hero-section__subtitle,.hero-section__title{font-size:11rem;line-height:8.6rem}
  .hero-section__subtitle{width:46rem}
  .hero-section__download{top:33.5rem}
  .hero-card__title{font-size:11rem;width:72rem;bottom:7rem}
  .hero-section__text{font-size:2.2rem;line-height:2.2rem}
}

/* ═══════════════ 02 · ARRIVALS ═══════════════ */
.arrivals-section{padding:9rem 0 6rem;position:relative;z-index:3;background:var(--bg)}
.arrivals-section .container{position:relative}
.arrivals-section__title{position:absolute;left:1.6rem;top:0}
@media (min-width:768px){.arrivals-section__title{left:3.2rem}}
@media (min-width:1024px){.arrivals-section__title{left:3.5rem}}
.arrivals-section__lang{display:none;font-family:var(--mono);font-size:1.3rem;letter-spacing:-.07rem;text-transform:uppercase;position:absolute;right:3.5rem;top:0}
.arrivals-section__text{display:none}

.arrivals-section__group{display:none}
@media (min-width:768px){
  .arrivals-section__lang{display:block}
  .arrivals-section__text{
    display:block;position:absolute;left:3.2rem;top:5rem;width:16rem;
    font-family:var(--mono);font-size:1.2rem;line-height:1.9rem;
    letter-spacing:-.06rem;text-transform:uppercase;color:var(--black);
  }
  .arrivals-section__text li{opacity:.35;transition:opacity .4s,color .4s}
  .arrivals-section__text li.is-on{opacity:1;color:var(--red)}
  .arrivals-section__group{
    display:grid;gap:1rem;grid-template-columns:24.2rem 24.2rem;
    margin-left:21rem;position:relative;cursor:none;
  }
  .arrivals-section__mob{display:none}
}
@media (min-width:1024px){
  .arrivals-section__group{grid-template-columns:33.5rem 33.5rem 33.5rem;margin-left:35.5rem}
  .arrivals-section__text{left:3.5rem;top:6rem;font-size:1.3rem;line-height:2.1rem}
}
.arrivals-section__group-swiper{position:relative;width:100%}
.arrivals-section__group-swiper.three{display:none}
@media (min-width:1024px){.arrivals-section__group-swiper.three{display:block}}
.arrivals-section__group-swiper>li{
  aspect-ratio:242/378;display:flex;pointer-events:none;transform:scaleX(0);
  transition:transform .6s var(--ease);width:100%;
}
.arrivals-section__group-swiper>li:not(:first-child){position:absolute;inset:0}
.arrivals-section__group-swiper>li.prev{transform-origin:left center}
.arrivals-section__group-swiper>li.next{transform-origin:right center}
.arrivals-section__group-swiper>li.active{pointer-events:auto;transform:scaleX(1)}
@media (min-width:1024px){.arrivals-section__group-swiper>li{aspect-ratio:343/528}}

/* mobile arrivals rail */
.arrivals-section__mob{margin-top:6.5rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.arrivals-section__mob::-webkit-scrollbar{display:none}
.arrivals-section__mob-track{display:flex;gap:1.2rem;padding-right:1.6rem;width:max-content}
.arrivals-section__mob-track>li{width:25.5rem;flex-shrink:0}

.arrivals-card{position:relative;width:100%;display:block;cursor:none;user-select:none;-webkit-user-drag:none}
.arrivals-card__inner{aspect-ratio:25.5/36.3;display:flex;margin-bottom:.8rem;overflow:hidden;position:relative;width:100%;z-index:1;background:var(--red-1)}
.arrivals-card__img{position:absolute;inset:0;height:100%;width:100%}
.arrivals-card__img img{height:100%;width:100%;object-fit:cover;transition:transform .8s var(--ease);-webkit-user-drag:none}
.arrivals-card:hover .arrivals-card__img img{transform:scale(1.04)}
.arrivals-card__best{
  position:absolute;left:.8rem;top:.8rem;z-index:5;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:1rem;letter-spacing:-.05rem;line-height:1;
  padding:.5rem .6rem .4rem;text-transform:uppercase;
}
.arrivals-card__title{
  font-family:var(--sans);font-size:1.1rem;font-weight:500;letter-spacing:-.02rem;
  line-height:1.1rem;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;
  white-space:nowrap;width:100%;
}
.arrivals-card__prices{display:flex;gap:.6rem;margin-top:.2rem}
.arrivals-card__price{font-family:var(--mono);font-size:1.3rem;font-weight:500;letter-spacing:-.07rem;line-height:1.2rem;text-transform:uppercase}
.arrivals-card__price--sale{text-decoration:line-through;opacity:.55}
.arrivals-card__price--base{color:var(--red)}
.arrivals-card__info{position:relative;overflow:hidden}
.arrivals-card__top{transform-origin:top center;transition:transform .4s .1s var(--ease)}
.arrivals-card__bottom{
  align-items:center;display:flex;justify-content:space-between;left:0;position:absolute;
  right:0;top:0;transform:scaleY(0);transform-origin:bottom center;transition:transform .4s var(--ease);
}
.arrivals-card:hover .arrivals-card__top{transform:scaleY(0)}
.arrivals-card:hover .arrivals-card__bottom{transform:scaleY(1);transition-delay:.1s}
.arrivals-card__size{align-items:center;display:flex;gap:.6rem}
.arrivals-card__size li{font-size:2.4rem;font-weight:800;line-height:1.9rem;text-transform:uppercase}
.arrivals-card__size li strong{font-weight:100}
@media (min-width:1024px){
  .arrivals-card__title{font-size:1.2rem;font-weight:600;line-height:1.2rem}
  .arrivals-card__price{font-size:1.4rem}
}

.arrivals-section__scroll{margin-top:4rem}
.arrivals-section__button{display:block;margin-top:3.2rem;text-align:center}
@media (min-width:768px){
  .arrivals-section__scroll{margin-top:5.4rem;margin-left:21rem}
  .arrivals-section__button{margin-top:3.6rem;text-align:right}
}
@media (min-width:1024px){.arrivals-section__scroll{margin-left:35.5rem}}

/* ═══════════════ 03 · CAMPAIGN ═══════════════ */
.campaign-section{aspect-ratio:37.5/65;display:flex;position:relative;width:100%;z-index:6}
@media (min-width:768px){.campaign-section{aspect-ratio:16/9}}
.campaign-section__content{display:flex;height:100%;width:100%;position:relative;overflow:hidden}
@media (min-width:1024px){.campaign-section__content{cursor:none}}
.campaign-section__bg{position:absolute;inset:0;overflow:hidden}
/* the reference build ran a looping video here; a slow drift on a still
   reads the same at this scale */
.campaign-section__bg img{height:100%;width:100%;object-fit:cover;transform:scale(1.06);animation:slow-drift 26s ease-in-out infinite alternate}
@keyframes slow-drift{
  0%{transform:scale(1.05) translate3d(-1.2%,.8%,0)}
  100%{transform:scale(1.14) translate3d(1.2%,-1.2%,0)}
}
.campaign-section__title{left:1.6rem;position:absolute;top:1.6rem;width:12rem;z-index:2}
.campaign-section__text{
  color:var(--white);font-family:var(--sans);font-size:1.2rem;font-weight:600;
  letter-spacing:-.02rem;line-height:1.35rem;mix-blend-mode:difference;position:absolute;
  right:1.6rem;text-align:right;text-transform:uppercase;top:1.6rem;width:18.8rem;z-index:2;
}
.campaign-section__text strong{color:var(--red)}
.campaign-section__subtitle{bottom:.5rem;color:var(--white);left:1.6rem;mix-blend-mode:difference;position:absolute;z-index:2;display:flex;flex-direction:column}
.campaign-section__subtitle>span{display:block;width:max-content}
.campaign-section__subtitle>span:first-child{font-size:8rem;font-weight:800;line-height:6.4rem;text-transform:uppercase;margin-bottom:1.4rem}
.campaign-section__subtitle>span:last-child{font-size:3rem;font-weight:800;line-height:2.4rem;text-transform:uppercase}
.campaign-section__subtitle>span:last-child strong{font-weight:300}
.campaign-section__lang,.campaign-section__size{
  color:var(--white);font-family:var(--mono);font-size:1.3rem;font-weight:500;
  letter-spacing:-.07rem;line-height:110%;mix-blend-mode:difference;position:absolute;
  text-align:right;text-transform:uppercase;z-index:2;
}
.campaign-section__lang{bottom:6.2rem;right:1rem}
.campaign-section__size{bottom:1.5rem;right:1rem}
.campaign-section__cursor{
  color:var(--white);font-size:2.2rem;font-weight:600;left:0;line-height:2.2rem;
  mix-blend-mode:difference;pointer-events:none;position:absolute;text-transform:uppercase;
  top:0;z-index:15;will-change:transform;
}
.campaign-section__cursor strong{font-weight:100}
.campaign-section__cursor>div{opacity:0;transform:translate(-50%,-50%) rotate(15deg);transition:opacity .3s,transform .3s}
.campaign-section__cursor.visible>div{opacity:1;transform:translate(-50%,-50%) rotate(0)}
@media (max-width:1023px){
  .campaign-section__cursor{left:50%;top:50%;transform:translate(-50%,-50%)}
  .campaign-section__cursor>div{opacity:1;transform:none}
}
@media (min-width:768px){
  .campaign-section__title{left:3.2rem;top:3.2rem}
  .campaign-section__text{bottom:3rem;right:3.2rem;top:auto;width:29rem}
  .campaign-section__subtitle{bottom:2.1rem;left:3.1rem}
  .campaign-section__lang,.campaign-section__size{font-size:1.4rem}
  .campaign-section__lang{bottom:auto;right:2.4rem;top:3.1rem}
  .campaign-section__size{bottom:auto;right:2.4rem;top:12.1rem}
}
@media (min-width:1024px){
  .campaign-section__title{left:3.5rem;top:3.4rem}
  .campaign-section__text{right:3.5rem;width:29.5rem}
  .campaign-section__subtitle{bottom:2.2rem;left:3.5rem}
  .campaign-section__lang{right:3.3rem;top:3.4rem}
  .campaign-section__size{right:3.3rem;top:12.5rem}
}

/* ═══════════════ 04 · CATEGORIES ═══════════════ */
.categories-section{padding:9rem 0 7rem;position:relative;z-index:6;background:var(--bg)}
.categories-section__title{margin-bottom:4.4rem}
.categories-section__inner{position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.categories-section__inner::-webkit-scrollbar{display:none}
@media (min-width:1024px){.categories-section__inner{cursor:none;overflow:hidden}}
.categories-section__list{display:flex;gap:1rem;width:max-content;padding-right:1.6rem}
@media (min-width:1024px){.categories-section__list{gap:1.4rem}}
.categories-section__list>li{width:20rem;flex-shrink:0}
@media (min-width:768px){.categories-section__list>li{width:24.2rem}}
@media (min-width:1024px){.categories-section__list>li{width:26.5rem}}
.categories-card{display:block;user-select:none}
.categories-card__img-wrapper{aspect-ratio:265/340;overflow:hidden;background:var(--red-1);margin-bottom:.9rem}
.categories-card__img-wrapper img{height:100%;width:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s;filter:grayscale(1);-webkit-user-drag:none}
.categories-card:hover .categories-card__img-wrapper img{transform:scale(1.05);filter:grayscale(0)}
.categories-card__title{font-size:3rem;font-weight:800;line-height:2.4rem;text-transform:uppercase}
.categories-card__text{font-family:var(--mono);font-size:1.3rem;font-weight:500;letter-spacing:-.07rem;line-height:1.4rem;margin-top:.4rem;color:var(--red)}
.categories-section__row{align-items:center;display:flex;gap:3rem;justify-content:space-between;margin-top:4.4rem}
.categories-section__scroll-wrapper{flex:1}

/* ═══════════════ 05 · COLLECTIONS ═══════════════ */
.best-section{position:relative;padding:9rem 0 0;z-index:6;background:var(--bg)}
.best-section__title{padding:0 1.6rem;margin-bottom:3rem}
@media (min-width:768px){.best-section__title{padding:0 3.2rem}}
@media (min-width:1024px){.best-section__title{padding:0 3.5rem}}
.best-section__inner{display:flex;flex-direction:column}
.best-card{
  background:var(--bg);display:flex;flex-direction:column;height:65rem;
  justify-content:space-between;padding:1.6rem 0 2.8rem;position:relative;
  width:100%;z-index:2;overflow:hidden;
}
@media (min-width:1024px){.best-card{cursor:none;height:78rem}}
.best-card__video{
  display:block;height:100%;width:100%;position:absolute;inset:0;object-fit:cover;z-index:-1;
  filter:grayscale(.35) contrast(1.05);transition:transform 1.2s var(--ease),filter .8s;
}
.best-card:hover .best-card__video{transform:scale(1.05);filter:grayscale(0) contrast(1.05)}
.best-card__text{
  color:#fff;font-family:var(--sans);font-size:1.2rem;font-weight:600;letter-spacing:-.02rem;
  line-height:1.4rem;margin:0 1.6rem;mix-blend-mode:difference;text-transform:uppercase;max-width:34rem;
}
.best-card__text strong{color:var(--blue)}
.best-card__button{
  color:var(--white);font-size:2.2rem;font-weight:600;line-height:2.2rem;text-align:center;
  text-transform:uppercase;width:100%;mix-blend-mode:difference;
  opacity:0;transform:scaleY(.4);transition:opacity .4s,transform .4s var(--ease);
}
.best-card:hover .best-card__button{opacity:1;transform:scaleY(1)}
.best-card__lang{
  bottom:8.6rem;color:var(--white);font-family:var(--mono);font-size:1.3rem;font-weight:500;
  letter-spacing:-.07rem;line-height:1.2rem;mix-blend-mode:difference;position:absolute;
  right:.9rem;text-align:right;text-transform:uppercase;z-index:2;
}
.best-card__bottom{
  align-items:flex-end;display:flex;justify-content:space-between;margin:0 1.6rem;
  mix-blend-mode:difference;color:#fff;
}
.best-card__title{font-size:8rem;font-weight:800;line-height:6.4rem;text-transform:uppercase;display:flex;align-items:flex-end;gap:.6rem}
.best-card__title i{font-size:3rem;line-height:2.4rem;font-weight:300;margin-bottom:.7rem}
.best-card__count{font-family:var(--mono);font-size:1.4rem;font-weight:500;letter-spacing:-.07rem;margin-bottom:.8rem}
@media (min-width:768px){
  .best-card__text,.best-card__bottom{margin:0 3.2rem}
  .best-card__lang{right:2.4rem}
}
@media (min-width:1024px){
  .best-card__text,.best-card__bottom{margin:0 3.5rem}
  .best-card__title{font-size:11rem;line-height:8.6rem}
  .best-card__lang{right:3.3rem}
}

/* ═══════════════ 06 · PHILOSOPHY ═══════════════ */
.bold-section{height:82rem;overflow:hidden;padding:1.9rem 0 1.4rem;position:relative;z-index:3}
.bold-section .container{display:flex;flex-direction:column;height:100%;justify-content:space-between}
.bold-section__bg{position:absolute;inset:0;z-index:-3}
.bold-section__bg img{height:100%;width:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.85);will-change:transform}
.bold-section__top,.bold-section__bottom{display:flex;flex-direction:column;gap:.8rem;mix-blend-mode:difference}
.bold-section__top-title,.bold-section__bottom-title{
  align-items:flex-end;color:var(--white);display:flex;font-size:8rem;font-weight:800;
  gap:.2rem;line-height:6.4rem;text-transform:uppercase;flex-wrap:wrap;
}
.bold-section__top-title>p,.bold-section__bottom-title>p{align-items:flex-end;display:flex;gap:.2rem}
.bold-section__top-title i,.bold-section__bottom-title i{font-size:3rem;line-height:2.4rem;margin-bottom:.7rem;font-weight:300}
.bold-section__top-text,.bold-section__bottom-text{
  color:var(--white);font-family:var(--sans);font-size:1.2rem;font-weight:600;
  letter-spacing:-.02rem;line-height:1.5rem;text-transform:uppercase;max-width:32rem;
}
.bold-section__top-text strong{color:var(--red)}
.bold-section__bottom-text strong{color:var(--blue)}
.bold-section__mid{align-items:center;display:flex;flex-direction:column;gap:2.6rem;justify-content:center}
.bold-section__img{width:22rem;aspect-ratio:3/4;overflow:hidden}
.bold-section__img img{height:100%;width:100%;object-fit:cover;will-change:transform}
.bold-section__link{color:#fff;mix-blend-mode:difference}
@media (min-width:768px){
  .bold-section__top-title,.bold-section__bottom-title{font-size:11rem;line-height:8.6rem}
  .bold-section__top-text,.bold-section__bottom-text{font-size:1.3rem;line-height:1.7rem;max-width:38rem}
  .bold-section__bottom{align-items:flex-end;text-align:right}
  .bold-section__img{width:28rem}
}
@media (min-width:1024px){
  .bold-section__top-title,.bold-section__bottom-title{font-size:14rem;line-height:11rem}
  .bold-section__img{width:32rem}
}

/* ═══════════════ 07 · FILM ═══════════════ */
.motion-section{padding:9rem 0 0;position:relative;z-index:6;background:var(--bg)}
.motion-section__top{align-items:flex-start;display:flex;justify-content:space-between;margin-bottom:5rem}
.motion-section__icons{display:flex;gap:.6rem}
.motion-section__icons i{display:block;height:1.1rem;width:1.1rem;background:var(--red);border-radius:50%;animation:pulse-dot 1.4s infinite}
.motion-section__icons i:nth-child(2){animation-delay:.2s}
.motion-section__icons i:nth-child(3){animation-delay:.4s}
@keyframes pulse-dot{0%,100%{opacity:.25}50%{opacity:1}}
.motion-section__mid{display:flex;flex-direction:column;gap:2.4rem}
@media (min-width:768px){.motion-section__mid{flex-direction:row;gap:6rem;align-items:flex-end;justify-content:space-between}}
.motion-section__subtitle{font-size:8rem;font-weight:800;line-height:6.4rem;text-transform:uppercase;max-width:20ch}
.motion-section__text{font-family:var(--sans);font-size:1.2rem;font-weight:500;letter-spacing:-.02rem;line-height:1.6rem;max-width:38rem;text-transform:uppercase}
.motion-section__text strong{color:var(--red);font-weight:600}
@media (min-width:1024px){
  .motion-section__subtitle{font-size:11rem;line-height:8.6rem}
  .motion-section__text{font-size:1.3rem;line-height:1.9rem;max-width:44rem}
}
.motion-section__pin{margin-top:6rem;position:relative}
.motion-section__bottom{
  aspect-ratio:16/9;overflow:hidden;position:relative;width:70%;margin:0 auto;
  transform:scale(.92);transform-origin:50% 50%;will-change:transform;
}
@media (min-width:1024px){.motion-section__bottom{cursor:none}}
.motion-section__video{height:100%;width:100%;object-fit:cover;transform:scale(1.1);will-change:transform}
.motion-section__cursor{
  color:#fff;font-size:2.2rem;font-weight:600;left:0;line-height:2.2rem;
  mix-blend-mode:difference;pointer-events:none;position:absolute;text-transform:uppercase;
  top:0;z-index:15;will-change:transform;
}
.motion-section__cursor>div{opacity:0;transform:translate(-50%,-50%) rotate(15deg);transition:opacity .3s,transform .3s}
.motion-section__cursor.visible>div{opacity:1;transform:translate(-50%,-50%) rotate(0)}
@media (max-width:1023px){
  .motion-section__cursor{left:50%;top:50%}
  .motion-section__cursor>div{opacity:1;transform:translate(-50%,-50%)}
}
.motion-section__scroll{
  font-family:var(--mono);font-size:1.2rem;letter-spacing:-.06rem;margin-top:2.4rem;
  text-align:center;text-transform:uppercase;padding-bottom:6rem;
}
.motion-section__scroll strong{color:var(--red)}

/* ═══════════════ FOOTER ═══════════════ */
.footer{position:relative;overflow:hidden;padding:9rem 0 2.4rem;color:#fff;background:var(--black);z-index:6}
.footer__bg{position:absolute;inset:0;z-index:0}
.footer__bg img{height:100%;width:100%;object-fit:cover;filter:grayscale(1) brightness(.32);will-change:transform}
.footer__img{display:none}
@media (min-width:1024px){
  .footer__img{display:block;position:absolute;right:3.5rem;top:9rem;width:26rem;aspect-ratio:3/4;overflow:hidden;z-index:1}
  .footer__img img{height:100%;width:100%;object-fit:cover;filter:grayscale(1)}
}
.footer .container{position:relative;z-index:2}
.footer__top{display:flex;gap:6rem;flex-wrap:wrap;margin-bottom:8rem}
.footer__nav li{margin-bottom:.6rem}
.footer__nav a{
  font-size:3rem;font-weight:800;line-height:2.4rem;text-transform:uppercase;
  display:inline-block;transition:transform .35s var(--ease),color .35s;
}
.footer__nav a:hover{transform:scaleY(1.15);color:var(--red)}
.footer__nav a.disable{opacity:.35;pointer-events:none}
.footer__nav:nth-child(2) a{font-size:1.3rem;font-family:var(--mono);font-weight:400;letter-spacing:-.07rem;line-height:1.9rem}
.footer__nav:nth-child(2) a:hover{transform:none}

.footer__mid{position:relative;margin-bottom:6rem}
.footer__title{font-size:3rem;font-weight:800;line-height:2.4rem;text-transform:uppercase;margin-bottom:1.6rem}
.footer__title i{font-size:1.6rem;font-weight:300}
.footer__form{display:flex;gap:1rem;align-items:flex-end;max-width:44rem;flex-wrap:wrap}
.footer__label{position:relative;flex:1;min-width:20rem;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:.7rem}
.footer__label input{width:100%;font-family:var(--mono);font-size:1.4rem;letter-spacing:-.07rem;color:#fff;text-transform:uppercase}
.input__label{
  position:absolute;left:0;bottom:.7rem;font-family:var(--mono);font-size:1.4rem;
  letter-spacing:-.07rem;text-transform:uppercase;opacity:.55;pointer-events:none;
  transition:transform .3s var(--ease),opacity .3s;
}
.footer__label input:focus + .input__label,
.footer__label input:not(:placeholder-shown) + .input__label{transform:translateY(-2rem) scale(.8);transform-origin:left;opacity:.3}
.input__error{
  position:absolute;left:0;top:calc(100% + .5rem);font-family:var(--mono);font-size:1.1rem;
  color:var(--red);opacity:0;transition:opacity .3s;text-transform:uppercase;
}
.footer__label.has-error{border-bottom-color:var(--red)}
.footer__label.has-error .input__error{opacity:1}
.footer__submit{
  font-size:1.7rem;font-weight:600;text-transform:uppercase;border-bottom:1px solid #fff;
  padding-bottom:.7rem;transition:color .3s,border-color .3s;
}
.footer__submit:hover{color:var(--red);border-color:var(--red)}
.footer__logo{
  font-size:18rem;font-weight:800;line-height:.78;text-transform:uppercase;
  margin-top:6rem;letter-spacing:-.03em;color:#fff;opacity:.95;
}
@media (min-width:768px){.footer__logo{font-size:30rem}}
@media (min-width:1024px){.footer__logo{font-size:38rem}}
.footer__bottom{
  align-items:center;display:flex;flex-wrap:wrap;gap:1.6rem 3rem;justify-content:space-between;
  font-family:var(--mono);font-size:1.2rem;letter-spacing:-.06rem;text-transform:uppercase;
  border-top:1px solid rgba(255,255,255,.18);padding-top:2rem;
}
.footer__bottom a:hover,.footer__dev:hover{color:var(--red)}

/* ═══════════════ OVERLAYS ═══════════════ */
.menu,.panel,.popup,.signup{
  position:fixed;z-index:2000;visibility:hidden;opacity:0;
  transition:opacity .45s var(--ease),visibility .45s;
}
.menu.is-open,.panel.is-open,.popup.is-open,.signup.is-open{visibility:visible;opacity:1}

.menu{inset:0;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding:9rem 1.6rem 3rem;overflow-y:auto}
@media (min-width:768px){.menu{padding:12rem 3.2rem 3.2rem}}
@media (min-width:1024px){
  .menu{padding:14rem 3.5rem 3.5rem;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:4rem}
  .menu__collection,.menu__text{margin-top:0;flex-shrink:0}
  .menu__text{max-width:30rem;text-align:right}
}
.menu__list li a{
  font-size:6.4rem;font-weight:800;line-height:5.4rem;text-transform:uppercase;
  display:inline-block;transition:transform .4s var(--ease),color .4s;
}
.menu__list li a:hover{transform:scaleY(1.12);color:var(--red)}
@media (min-width:1024px){.menu__list li a{font-size:9rem;line-height:7.4rem}}
.menu__contact-list{margin-top:3rem;font-family:var(--mono);font-size:1.3rem;letter-spacing:-.07rem;text-transform:uppercase;display:flex;gap:2.4rem;flex-wrap:wrap}
.menu__collection{margin-top:4rem;display:flex;flex-direction:column;gap:.8rem}
.menu__item-main{font-family:var(--mono);font-size:1.3rem;letter-spacing:-.07rem;text-transform:uppercase;color:var(--red)}
.menu__text{margin-top:4rem;font-family:var(--sans);font-size:1.2rem;line-height:1.6rem;max-width:34rem;text-transform:uppercase;opacity:.6}

.panel{top:0;right:0;bottom:0;width:100%;background:var(--bg);overflow-y:auto;padding:9rem 0 3rem;transform:translateX(4%);transition:opacity .45s var(--ease),visibility .45s,transform .45s var(--ease)}
.panel.is-open{transform:translateX(0)}
@media (min-width:768px){.panel{width:52rem;box-shadow:-2rem 0 6rem rgba(0,0,0,.12)}}
.panel__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:4rem}
.panel__label{font-size:3rem;font-weight:800;line-height:2.4rem;text-transform:uppercase}
.panel__label i{font-size:1.6rem;font-weight:300}
.panel__field{display:block;border-bottom:1px solid var(--red-1);padding-bottom:1rem;margin-bottom:4rem}
.panel__field input{width:100%;font-size:3rem;font-weight:600;text-transform:uppercase}
.panel__hint{font-family:var(--mono);font-size:1.3rem;letter-spacing:-.07rem;text-transform:uppercase;margin-bottom:2rem;color:var(--red)}
.panel__popular{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.panel__empty{font-family:var(--sans);font-size:1.3rem;line-height:1.8rem;text-transform:uppercase;margin-bottom:3rem;max-width:32rem}
.panel__close{
  font-family:var(--mono);font-size:1.2rem;letter-spacing:-.06rem;text-transform:uppercase;
  border:1px solid currentColor;border-radius:50%;height:4.4rem;width:4.4rem;flex-shrink:0;
  transition:background .3s,color .3s;
}
.panel__close:hover{background:var(--red);border-color:var(--red);color:#fff}
.menu>.panel__close{position:absolute;right:1.6rem;top:3rem}
@media (min-width:1024px){.menu>.panel__close{right:3.5rem;top:3.1rem}}

.popup{inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:1.6rem}
/* the newsletter prompt is a corner card, not a blocking modal */
.signup{inset:0;display:flex;align-items:flex-end;justify-content:flex-end;padding:1.6rem;pointer-events:none}
.signup .signup__inner{pointer-events:auto;border:1px solid var(--red-1);box-shadow:0 2rem 6rem rgba(0,0,0,.14)}
.signup{transform:translateY(3rem);transition:opacity .5s var(--ease),visibility .5s,transform .5s var(--ease)}
.signup.is-open{transform:translateY(0)}
.popup__inner,.signup__inner{background:var(--bg);padding:3.2rem;width:100%;max-width:52rem;position:relative;max-height:calc(100vh - 3.2rem);overflow-y:auto}
.popup__title,.signup__title{font-size:4rem;font-weight:800;line-height:3.2rem;text-transform:uppercase;margin-bottom:1.2rem}
.popup__text,.signup__text{font-family:var(--sans);font-size:1.3rem;line-height:1.8rem;text-transform:uppercase;margin-bottom:2.6rem}
.popup__text strong,.signup__text strong{color:var(--red)}
.popup__buttons{display:flex;flex-direction:column;gap:1.6rem}
.popup__label{font-family:var(--mono);font-size:1.2rem;letter-spacing:-.06rem;text-transform:uppercase;margin-bottom:.6rem;opacity:.6}
.popup .panel__close,.signup .panel__close{position:absolute;right:2rem;top:2rem}
.signup{align-items:flex-end;justify-content:flex-end}
.signup__img{display:none}
@media (min-width:768px){
  .signup{padding:3.2rem}
  .signup__inner{max-width:44rem}
}
.signup__top{display:flex;align-items:center;justify-content:space-between}
.signup__form{display:flex;flex-direction:column;gap:2.4rem}
.signup__form .footer__label{border-bottom-color:var(--black)}
.signup__form .footer__label input{color:var(--black)}

.cookie{
  position:fixed;left:1.6rem;right:1.6rem;bottom:1.6rem;z-index:1900;background:var(--bg);
  border:1px solid var(--red-1);padding:2.4rem;
  transform:translateY(140%);transition:transform .6s var(--ease);
}
.cookie.is-open{transform:translateY(0)}
@media (min-width:768px){.cookie{left:auto;right:3.2rem;bottom:3.2rem;width:42rem}}
.cookie__title{font-size:2.4rem;font-weight:800;line-height:2rem;text-transform:uppercase;margin-bottom:.8rem}
.cookie__text{font-family:var(--sans);font-size:1.2rem;line-height:1.6rem;text-transform:uppercase;margin-bottom:2rem}
.cookie__text strong{color:var(--red)}
.cookie__buttons{display:flex;gap:1rem}
.cookie__buttons .button{height:4.6rem;font-size:1.4rem}
.cookie__buttons .button:last-child{background:transparent;color:var(--black);border:1px solid var(--black)}

.toast{
  position:fixed;left:50%;bottom:3rem;transform:translate(-50%,200%);z-index:2500;
  background:var(--black);color:#fff;padding:1.4rem 2.4rem;
  font-family:var(--mono);font-size:1.2rem;letter-spacing:-.06rem;text-transform:uppercase;
  transition:transform .5s var(--ease);
}
.toast.is-on{transform:translate(-50%,0)}

/* ═══════════════ SCROLL REVEAL ═══════════════ */
[data-reveal]{opacity:0;transform:translateY(2.4rem);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-curtain]{transform:scaleY(0);transform-origin:50% 100%;transition:transform .8s var(--ease)}
[data-reveal-curtain].is-in{transform:scaleY(1)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}