/* ====================================================================
   CABIN FLUX® — Bright Modern Design System  (cf.css)
   Shared across all pages. Clash Display + Satoshi. Off-white, alive.
   ==================================================================== */
:root{
  /* lululemon-aligned neutral system + CABIN FLUX orange (from DESIGN.md extraction) */
  --bg:#FFFFFF; --bg-2:#FFFFFF; --bg-3:#F4F3F1; --bg-ink:#101011;
  --ink:#1A1613; --ink-2:#57534E; --ink-3:#8C877F; --line:#E6E4E0; --line-2:#D8D5CF;
  --accent:#F4881F; --accent-2:#FF9E33; --accent-ink:#B5660F;
  --r-s:4px; --r-m:8px; --r-l:14px; --r-xl:22px;
  --shadow-s:0 2px 8px -2px rgba(20,18,12,.06);
  --shadow-m:0 18px 40px -18px rgba(20,18,12,.16);
  --shadow-l:0 40px 80px -30px rgba(20,18,12,.22);
  --maxw:1340px; --gut:clamp(18px,4vw,64px); --nav-h:72px;
  --sans:'General Sans','Helvetica Neue','Segoe UI',system-ui,sans-serif;
  --disp:'General Sans','Helvetica Neue','Segoe UI',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
html{overflow-x:clip}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;font-weight:500}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#cfcabd;border-radius:8px;border:2px solid var(--bg)}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.disp{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:.98}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--accent);border-radius:2px}
.muted{color:var(--ink-2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;
  padding:14px 26px;border-radius:100px;transition:transform .35s var(--ease),background .35s,color .35s,box-shadow .35s;
  will-change:transform}
.btn svg,.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:#000}
.btn--accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px -10px rgba(244,136,31,.7)}
.btn--accent:hover{background:var(--accent-2)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-2)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--sm{padding:11px 20px;font-size:14px}
.btn--lg{padding:17px 34px;font-size:16px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:600;display:flex;align-items:center;
  transition:background .4s var(--ease),box-shadow .4s,backdrop-filter .4s}
.nav.scrolled{background:rgba(251,250,247,.82);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 1px 0 var(--line)}
.nav__in{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav__logo{display:flex;align-items:center}
.nav__logo img{height:48px;width:auto;display:block}
@media(max-width:760px){ .nav__logo img{height:40px} }
.nav__menu{display:flex;gap:34px}
.nav__menu a{font-size:14.5px;font-weight:600;color:var(--ink-2);position:relative;padding:6px 0;transition:color .3s}
.nav__menu a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);transition:width .35s var(--ease)}
.nav__menu a:hover,.nav__menu a.active{color:var(--ink)}
.nav__menu a:hover::after,.nav__menu a.active::after{width:100%}
.nav__act{display:flex;align-items:center;gap:14px}
.nav__cart{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14px}
.burger{display:none;flex-direction:column;gap:5px;width:26px;padding:6px 0}
.burger span{height:2px;background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
/* ---------- mega menu (lululemon-style full-width dropdown) ---------- */
.mega{position:fixed;top:var(--nav-h);left:0;right:0;z-index:550;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 34px 50px -34px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega__in{max-width:var(--maxw);margin:0 auto;padding:36px var(--gut) 44px;
  display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:clamp(24px,3vw,52px)}
.mega__col h6{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:15px}
.mega__col a{display:block;font-size:15px;font-weight:500;color:var(--ink-2);padding:7px 0;transition:color .2s,padding-left .25s}
.mega__col a:hover{color:var(--accent-ink);padding-left:4px}
.mega__feat{position:relative;border-radius:var(--r-m);overflow:hidden;aspect-ratio:4/3.1;background:var(--bg-3);display:block}
.mega__feat img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mega__feat:hover img{transform:scale(1.05)}
.mega__feat::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,12,14,.6),transparent 55%)}
.mega__feat b{position:absolute;left:18px;bottom:32px;z-index:2;color:#fff;font-weight:600;font-size:19px;letter-spacing:-.01em}
.mega__feat span{position:absolute;left:18px;bottom:14px;z-index:2;color:rgba(255,255,255,.85);font-size:13px;font-weight:600}
@media(max-width:880px){ .mega{display:none} }

/* mobile drawer — lululemon-style: white panel from the right, logo + round X head, chevron rows */
.mobile-menu{position:fixed;inset:0;z-index:700;background:var(--bg);transform:translateX(100%);/* above .nav (600) — else the nav's white-filtered logo bleeds over the drawer logo */
  transition:transform .45s var(--ease);display:flex;flex-direction:column;justify-content:flex-start;
  padding:0 var(--gut) 30px;gap:0;overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mm__head{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);flex:none;margin-bottom:6px}
.mm__head img{height:36px;width:auto}
.mm__close{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);
  display:grid;place-items:center;color:var(--ink);cursor:pointer;margin-right:-4px;transition:background .3s}
.mm__close:active{background:var(--bg-3)}
.mobile-menu a{font-family:var(--disp);font-size:19px;font-weight:600;padding:17px 0;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between}
.mobile-menu a::after{content:'';width:8px;height:8px;flex:none;margin-left:12px;
  border-top:1.6px solid var(--ink-3);border-right:1.6px solid var(--ink-3);transform:rotate(45deg)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:var(--bg-2)}
.marquee__t{display:inline-flex;gap:0;will-change:transform;animation:mq 28s linear infinite}
.marquee__t span{font-family:var(--disp);font-weight:600;font-size:clamp(20px,2.6vw,34px);padding:0 30px;color:var(--ink)}
.marquee__t span::after{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-left:60px;vertical-align:middle}
/* mobile: much calmer scroll speed + smaller type */
@media(max-width:880px){
  .marquee{padding:14px 0}
  .marquee__t{animation-duration:170s}
  .marquee__t span{font-size:17px;padding:0 22px}
  .marquee__t span::after{width:7px;height:7px;margin-left:44px}
}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- section shell ---------- */
/* vertical-only padding — a `padding: X 0` shorthand here would wipe .wrap's side gutters
   (content touched the screen edge on any viewport narrower than --maxw) */
.sec{padding-top:clamp(70px,10vh,128px);padding-bottom:clamp(70px,10vh,128px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(34px,5vh,58px)}
.sec-head h2{font-family:var(--disp);font-weight:600;font-size:clamp(30px,4.6vw,56px);letter-spacing:-.025em;line-height:1.02}
.sec-head h2 em{font-style:normal;color:var(--accent)}
.sec-head p{max-width:42ch;color:var(--ink-2);font-size:16px}

/* ---------- product card (shared) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,38px)}
.pcard{position:relative;display:flex;flex-direction:column;background:transparent;border:1px solid transparent;
  border-radius:var(--r-m);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.pcard:hover{transform:translateY(-4px)}
/* product sits directly on white — studio bg multiplies away, no frame (lululemon style) */
.pcard__media{position:relative;aspect-ratio:4/5;background:#fff;border-radius:var(--r-s);overflow:hidden}
.pcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10%;
  mix-blend-mode:multiply;/* white studio bg disappears into the white tile = clean cutout */
  transition:opacity .5s var(--ease),transform .7s var(--ease)}
.pcard__media img.alt{opacity:0}
.pcard:hover .pcard__media img.main{opacity:0}
.pcard:hover .pcard__media img.alt{opacity:1}
/* swatch preview: only ONE image visible — multiply blend would ghost both otherwise */
.pcard.sw-active .pcard__media img.main{opacity:1;transition:none}
.pcard.sw-active .pcard__media img.alt{opacity:0;transition:none}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__cat{position:absolute;top:12px;left:12px;z-index:2;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.8);backdrop-filter:blur(6px);padding:5px 10px;border-radius:100px}
.pcard__fav{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.85);display:grid;place-items:center;color:var(--ink-2);transition:.3s}
.pcard__fav:hover{color:var(--accent);transform:scale(1.1)}
.pcard__body{padding:18px 6px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.pcard__name{font-weight:700;font-size:19px;letter-spacing:-.015em;line-height:1.22}
.pcard__sub{font-size:14px;color:var(--ink-3);margin-top:-4px}
.pcard__sw{display:flex;gap:6px;margin-top:2px;flex-wrap:wrap}
.sw{width:16px;height:16px;border-radius:50%;background:var(--c,#ccc);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.08);cursor:pointer;transition:transform .2s}
.sw:hover,.sw.on{transform:scale(1.18);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12),0 0 0 2px var(--accent)}
.pcard__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:8px}
.pcard__price{font-weight:700;font-size:20px}
.pcard__price .cur{font-size:13px;color:var(--ink-3);font-weight:600}
.pcard__price .was{font-size:13px;color:var(--ink-3);text-decoration:line-through;font-weight:500;margin-left:6px}
.pcard__add{font-size:13px;font-weight:700;color:var(--accent-ink);display:inline-flex;gap:5px;align-items:center;transition:gap .3s}
.pcard:hover .pcard__add{gap:9px}
.pcard__oos{position:absolute;inset:0;background:rgba(251,250,247,.5);backdrop-filter:grayscale(.4)}
.badge-sale{position:absolute;bottom:12px;left:12px;z-index:2;background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  letter-spacing:.04em;padding:4px 10px;border-radius:100px}

/* ---------- category tiles ---------- */
.cattiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,20px)}
.cattile{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/5;display:flex;align-items:flex-end;
  padding:26px;color:#fff;background:#222;isolation:isolate}
.cattile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)}
.cattile::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 35%,rgba(15,14,18,.78) 100%)}
.cattile:hover img{transform:scale(1.07)}
.cattile h3{font-family:var(--disp);font-weight:600;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em}
.cattile span{font-size:13px;opacity:.85;display:flex;align-items:center;gap:7px;margin-top:4px}
.cattile__c{display:flex;flex-direction:column;gap:2px}
.cattile--wide{aspect-ratio:auto;grid-column:span 1}

/* ---------- lifestyle tiles (image-forward, lululemon style) ---------- */
.lifetiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lifetile{display:block;group:lifetile}
.lifetile__img{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-s);background:var(--bg-3)}
.lifetile__img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.lifetile:hover .lifetile__img img{transform:scale(1.04)}
.lifetile__tag{position:absolute;left:16px;bottom:16px;z-index:2;color:#fff;font-weight:600;
  font-size:clamp(20px,2.2vw,30px);letter-spacing:-.01em;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.lifetile__b{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 2px 0}
.lifetile__b h3{font-weight:600;font-size:18px;letter-spacing:-.01em}
.lifetile__b span{font-size:13.5px;font-weight:600;color:var(--accent-ink);display:inline-flex;align-items:center;gap:6px;transition:gap .3s}
.lifetile:hover .lifetile__b span{gap:10px}
@media(max-width:760px){.lifetiles{grid-template-columns:1fr;gap:14px}}

/* ---------- collection tiles ---------- */
.coltiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.coltile{display:flex;flex-direction:column;background:var(--bg-3);border-radius:var(--r-l);overflow:hidden;
  border:1px solid transparent;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.coltile:hover{transform:translateY(-6px);box-shadow:var(--shadow-m);border-color:var(--line)}
.coltile__img{position:relative;aspect-ratio:4/3;background:var(--bg-3);overflow:hidden}
.coltile__img img{width:100%;height:100%;object-fit:contain;padding:7%;mix-blend-mode:multiply;
  transition:transform .7s var(--ease)}
.coltile:hover .coltile__img img{transform:scale(1.05)}
.coltile__tag{position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.7);backdrop-filter:blur(6px);padding:5px 10px;border-radius:100px}
.coltile__b{padding:18px 22px 22px;display:flex;flex-direction:column;gap:3px;border-top:1px solid var(--line);background:var(--bg-2)}
.coltile__b h3{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:-.02em}
.coltile__b p{font-size:13.5px;color:var(--ink-2)}
.coltile__b .n{margin-top:7px;font-size:12px;font-weight:700;color:var(--accent-ink);letter-spacing:.03em;
  display:inline-flex;align-items:center;gap:6px;transition:gap .3s}
.coltile:hover .coltile__b .n{gap:10px}
@media(max-width:760px){.coltiles{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.coltiles{grid-template-columns:1fr}}

/* ---------- collection section header (shop) ---------- */
.colhead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:clamp(40px,6vh,72px) 0 22px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.colhead h2{font-family:var(--disp);font-weight:600;font-size:clamp(24px,3vw,38px);letter-spacing:-.02em}
.colhead p{font-size:13.5px;color:var(--ink-3);font-weight:600}
.colgroup.hide{display:none}
.colgroup:first-child .colhead{margin-top:8px}

/* ---------- reveal ---------- */
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---------- kinetic line headline (Build-in-Amsterdam style) ---------- */
.kin{display:block;overflow:hidden;padding-bottom:.04em}
.kin>span{display:block;transform:translateY(115%);transition:transform 1s var(--ease)}
.kin.in>span,.loaded .kin>span{transform:translateY(0)}
.kin:nth-child(2)>span{transition-delay:.1s}
.kin:nth-child(3)>span{transition-delay:.2s}

/* ---------- scroll image reveal (clip wipe + zoom, Audemars cinematic) ---------- */
.clipwipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
.clipwipe.in{clip-path:inset(0 0 0 0)}
.clipwipe img,.zoomimg{transform:scale(1.18);transition:transform 1.6s var(--ease)}
.clipwipe.in img,.zoomimg.in{transform:scale(1)}

/* ---------- full-bleed cinematic showcase ---------- */
.showcase{position:relative;min-height:min(84vh,660px);display:flex;align-items:flex-end;overflow:hidden;color:#fff}
@media(max-width:760px){.showcase{min-height:min(64vh,440px)}}
.showcase__bg{position:absolute;inset:0;z-index:-2}
.showcase__bg img{width:100%;height:100%;object-fit:cover}
.showcase::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(15,14,18,.7) 0%,rgba(15,14,18,.2) 45%,transparent 72%),
            linear-gradient(0deg,rgba(15,14,18,.55),transparent 50%)}
.showcase__in{width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(40px,7vw,90px) var(--gut)}
.showcase__eye{color:var(--accent-2)}
.showcase h2{font-family:var(--disp);font-weight:600;font-size:clamp(38px,6vw,84px);letter-spacing:-.03em;line-height:.96;margin:14px 0 16px;max-width:16ch}
.showcase p{max-width:46ch;color:#D7D5CD;font-size:17px;margin-bottom:26px}

/* ---------- footer ---------- */
.footer{background:var(--bg-ink);color:#E7E5DF;padding:clamp(54px,7vh,82px) 0 28px}
.footer__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__brand img.flogo{height:40px;width:auto;margin-bottom:16px}
.footer__brand h4{font-family:var(--disp);font-weight:600;font-size:24px;margin-bottom:14px}
.footer__brand h4 sup{color:var(--accent);font-size:.5em}
.footer__brand p{color:#9A988F;font-size:14px;max-width:34ch}
.footer__news{margin-top:20px;display:flex;gap:8px;max-width:340px}
.footer__news input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:100px;
  padding:12px 18px;color:#fff;font-size:14px}
.footer__news input::placeholder{color:#8c8a82}
.footer__col h5{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);margin-bottom:16px}
.footer__col li{margin-bottom:11px}
.footer__col a{color:#B6B4AC;font-size:14px;transition:color .3s}
.footer__col a:hover{color:#fff}
.footer__bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;color:#7d7b73;font-size:12.5px}
.footer__bot a{color:#7d7b73}.footer__bot a:hover{color:#bbb}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .nav__menu{display:none}.burger{display:flex}
  .nav__act .nav__cart,.nav__act .btn--accent{display:none}  /* keep only burger — was pushing it off-screen */
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .cattiles{grid-template-columns:1fr}
  /* footer: brand block (with the wide newsletter form) on its own full row,
     link columns below — minmax(0,1fr) so content can never blow the grid past the viewport */
  .footer__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}
  .footer__brand{grid-column:1 / -1}
  .footer__news{max-width:none}
  .footer__col h5{font-size:11px}
  .footer__col a{font-size:13.5px}
  .sec-head{flex-direction:column;align-items:flex-start}
}
@media(max-width:440px){ .pgrid{grid-template-columns:1fr 1fr;gap:10px} }
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.01s!important}
  [data-rv]{opacity:1;transform:none}
  .clipwipe{clip-path:none!important}
  .clipwipe img,.zoomimg{transform:none!important}
  .kin>span{transform:none!important}
}