/* =============================================================
   THE SADAQAH BRAND — design system
   ink / bone / olive / watermelon · Big Shoulders × Instrument Serif
   ============================================================= */
:root{
  --ink:#0b0b0b; --ink-2:#141412; --ink-3:#1d1c19;
  --bone:#efe9df; --bone-2:#e3dbcc; --sand:#c9b48f;
  --olive:#4b5634; --olive-d:#2a3120; --forest:#1d2a21;
  --melon:#c2362c; --gold:#c8b07a;
  --line:rgba(239,233,223,.14); --line-d:rgba(11,11,11,.14);
  --f-display:"Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --f-serif:"Instrument Serif", Georgia, serif;
  --f-body:"Inter Tight", Inter, system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, monospace;
  --f-ar:"Reem Kufi", "Noto Kufi Arabic", sans-serif;
  --pad: clamp(18px, 4vw, 64px);
  --ease: cubic-bezier(.2,.75,.15,1);
  --ease-io: cubic-bezier(.75,0,.2,1);
  --nav-h: 76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--f-body);font-size:16px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--melon);color:var(--bone)}
main{outline:none;min-height:100vh}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.65}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}

/* ---------- film grain + cursor ---------- */
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:90;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.cursor{position:fixed;left:0;top:0;z-index:200;pointer-events:none;mix-blend-mode:difference;display:none}
.has-cursor .cursor{display:block}
.has-cursor, .has-cursor a, .has-cursor button{cursor:none}
.cursor__dot{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff}
.cursor__ring{position:absolute;width:38px;height:38px;margin:-19px;border-radius:50%;border:1px solid #fff;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s}
.cursor.is-hover .cursor__ring{width:76px;height:76px;margin:-38px;background:#fff}
.cursor__ring{display:grid;place-items:center}
.cursor__ring[data-label]::after{content:attr(data-label);font:600 10px/1 var(--f-mono);letter-spacing:.15em;color:#000;text-transform:uppercase}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:300;background:var(--ink);display:grid;place-items:center;transition:clip-path 1.1s var(--ease-io)}
.loader__arabic{position:absolute;font-family:var(--f-ar);font-weight:700;font-size:min(46vw,520px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(239,233,223,.09);user-select:none}
.loader__logo{width:min(220px,46vw);opacity:0;transform:translateY(20px) scale(.96);animation:lIn 1s .1s var(--ease) forwards}
.loader__bar{position:absolute;left:var(--pad);right:var(--pad);bottom:72px;height:1px;background:var(--line)}
.loader__bar span{display:block;height:100%;width:0;background:var(--bone);transition:width .2s linear}
.loader__count{position:absolute;right:var(--pad);bottom:84px;font-family:var(--f-display);font-weight:900;font-size:64px;line-height:1}
.loader__count em{font-style:normal;font-size:24px;opacity:.5;margin-left:2px}
.loader.is-done{clip-path:inset(0 0 100% 0)}
@keyframes lIn{to{opacity:1;transform:none}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);display:flex;align-items:center;gap:32px;padding:0 var(--pad);
  transition:background .4s, transform .5s var(--ease), border-color .4s;border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(11,11,11,.72);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-color:var(--line)}
.nav.is-hidden{transform:translateY(-100%)}
.nav__logo img{height:44px;width:auto}
.nav__links{display:flex;gap:28px;margin-left:16px}
.nav__links a{font-size:13px;font-weight:500;letter-spacing:.04em;position:relative;opacity:.85}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1);transform-origin:left}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav__impact{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:8px;opacity:.75}
.nav__impact i{width:7px;height:7px;border-radius:50%;background:var(--melon);box-shadow:0 0 0 0 rgba(194,54,44,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(194,54,44,0)}100%{box-shadow:0 0 0 0 rgba(194,54,44,0)}}
.nav__cart{font-size:13px;font-weight:600;padding:10px 16px;border:1px solid var(--line);border-radius:100px;display:flex;gap:10px;align-items:center;transition:background .3s,color .3s}
.nav__cart:hover{background:var(--bone);color:var(--ink)}
.nav__cart b{min-width:20px;height:20px;border-radius:20px;display:grid;place-items:center;background:var(--melon);color:#fff;font-size:11px}
.nav__cart.bump b{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.5)}}
.nav__menu{display:none;width:44px;height:44px;position:relative}
.nav__menu span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--bone);transition:transform .4s var(--ease)}
.nav__menu span:first-child{top:18px}.nav__menu span:last-child{top:25px}
.menu-open .nav__menu span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-open .nav__menu span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:95;background:var(--olive-d);clip-path:circle(0% at calc(100% - 40px) 38px);transition:clip-path .9s var(--ease-io);overflow:auto}
.menu-open .menu{clip-path:circle(150% at calc(100% - 40px) 38px)}
.menu__inner{min-height:100%;padding:calc(var(--nav-h) + 30px) var(--pad) 40px;position:relative}
.menu__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;position:relative;z-index:1}
.menu__big{display:block;font-family:var(--f-display);font-weight:900;font-size:clamp(40px,9vw,88px);line-height:.95;text-transform:uppercase;transition:color .3s,transform .4s var(--ease)}
.menu__big:hover{color:var(--sand);transform:translateX(10px)}
.menu .eyebrow{margin-bottom:10px}
.menu__ar{position:absolute;right:-2vw;bottom:-6vw;font-family:var(--f-ar);font-weight:700;font-size:44vw;line-height:1;color:rgba(0,0,0,.18);pointer-events:none}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:56px;padding:0 30px;border-radius:100px;overflow:hidden;font-weight:600;font-size:14px;letter-spacing:.04em;isolation:isolate;transition:transform .4s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--ease);z-index:-1}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.97)}
.btn--light{background:var(--bone);color:var(--ink)}
.btn--light::before{background:var(--melon)}
.btn--light:hover{color:var(--bone)}
.btn--ghost{border:1px solid currentColor}
.btn--ghost::before{background:var(--bone)}
.btn--ghost:hover{color:var(--ink)}
.btn--dark{background:var(--ink);color:var(--bone)}
.btn--dark::before{background:var(--olive)}
.btn--block{width:100%}
.btn .arr{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(5px)}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:14px;transition:background .3s,color .3s}
.icon-btn:hover{background:var(--bone);color:var(--ink)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.split.in .w>span{transform:none}

/* =============================================================
   HERO
   ============================================================= */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:
  radial-gradient(120% 80% at 70% 30%, #1b1a16 0%, var(--ink) 60%)}
.hero__back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}
.hero__back span{font-family:var(--f-display);font-weight:900;font-size:clamp(120px,23vw,420px);line-height:.8;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(239,233,223,.2);white-space:nowrap;transform:translateY(-8vh)}
.hero__ar{position:absolute;left:var(--pad);top:calc(var(--nav-h) + 4vh);font-family:var(--f-ar);font-size:clamp(28px,3vw,42px);color:var(--sand);opacity:.8;z-index:3}
.hero__ar small{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;color:var(--bone);opacity:.6;margin-top:4px;text-transform:uppercase}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero__fallback{position:absolute;inset:0;display:none;place-items:center;z-index:1}
.hero__fallback img{width:min(520px,70vw);filter:drop-shadow(0 40px 60px rgba(0,0,0,.6))}
.no-webgl .hero__fallback{display:grid}
.hero__front{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(28px,6vh,64px);z-index:3;display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px}
.hero__title{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(64px,11.5vw,210px);line-height:.82;letter-spacing:-.01em}
.hero__title .serif{font-size:.62em;display:inline-block;margin-right:.08em;color:var(--sand)}
.hero__side{max-width:340px;display:flex;flex-direction:column;gap:22px;padding-bottom:10px}
.hero__side p{font-size:15px;opacity:.82}
.hero__side .row{display:flex;gap:10px;flex-wrap:wrap}
.hero__scroll{position:absolute;left:50%;bottom:18px;z-index:3;transform:translateX(-50%);font-family:var(--f-mono);font-size:10px;letter-spacing:.3em;opacity:.5;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero__scroll i{width:1px;height:38px;background:linear-gradient(var(--bone),transparent);animation:drip 2s infinite var(--ease)}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__hint{position:absolute;right:var(--pad);top:calc(var(--nav-h) + 4vh);z-index:3;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;opacity:.5;text-transform:uppercase;text-align:right}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--ink);position:relative;z-index:2}
.marquee--melon{background:var(--melon);border:0;transform:rotate(-1.6deg) scale(1.03);margin:40px 0}
.marquee__track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee--rev .marquee__track{animation-direction:reverse}
.marquee__item{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,4vw,54px);text-transform:uppercase;padding:18px 0;display:flex;align-items:center;white-space:nowrap}
.marquee__item::after{content:"✦";font-size:.5em;margin:0 .9em;color:var(--sand)}
.marquee--melon .marquee__item::after{color:var(--ink)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- section heads ---------- */
.section{position:relative;padding:clamp(80px,12vw,160px) var(--pad)}
.sec-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;margin-bottom:clamp(36px,5vw,64px)}
.sec-title{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(52px,8vw,132px);line-height:.85}
.sec-title .serif{font-size:.7em;color:var(--sand)}
.sec-num{font-family:var(--f-mono);font-size:12px;opacity:.55;letter-spacing:.2em}
.light{background:var(--bone);color:var(--ink)}
.light .eyebrow{opacity:.6}
.light .sec-title .serif{color:var(--olive)}

/* =============================================================
   CATEGORIES — 3D rack
   ============================================================= */
.cats{background:linear-gradient(180deg,var(--ink) 0%,#12120f 100%)}
.cats__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;perspective:1600px}
.cat{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;position:relative;border-radius:22px;overflow:hidden;min-height:420px;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease);background:var(--c, #222);isolation:isolate}
.cat:nth-child(1){grid-column:span 5;min-height:560px}
.cat:nth-child(2){grid-column:span 4;min-height:560px}
.cat:nth-child(3){grid-column:span 3;min-height:560px}
.cat:nth-child(4),.cat:nth-child(5),.cat:nth-child(6),.cat:nth-child(7){grid-column:span 3}
.cat::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(90% 60% at 50% 18%, rgba(255,255,255,.22), transparent 60%),
  linear-gradient(180deg, transparent 50%, rgba(0,0,0,.5))}
.cat__glare{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(500px circle at var(--gx) var(--gy),rgba(255,255,255,.22),transparent 45%);opacity:0;transition:opacity .4s;mix-blend-mode:soft-light}
.cat:hover .cat__glare{opacity:1}
.cat__art{position:absolute;inset:8% 8% 22%;display:grid;place-items:center;transform:translateZ(70px);transition:transform .8s var(--ease)}
.cat__art .garment{width:100%;height:100%;filter:drop-shadow(0 30px 30px rgba(0,0,0,.45))}
.cat:hover .cat__art{transform:translateZ(110px) translateY(-8px) scale(1.04)}
.cat__ghost{position:absolute;left:-.04em;top:.1em;font-family:var(--f-display);font-weight:900;font-size:clamp(90px,10vw,170px);line-height:.8;text-transform:uppercase;color:rgba(255,255,255,.07);transform:translateZ(10px);white-space:nowrap}
.cat__meta{position:absolute;left:22px;right:22px;bottom:20px;display:flex;justify-content:space-between;align-items:flex-end;transform:translateZ(60px);gap:12px}
.cat__meta>div{min-width:0}
.cat__name{font-family:var(--f-display);font-weight:900;font-size:clamp(32px,2.8vw,50px);line-height:.9;text-transform:uppercase}
.cat__line{font-size:13px;opacity:.75;margin-top:6px;max-width:240px}
.cat__go{width:52px;height:52px;flex:none;border-radius:50%;background:var(--bone);color:var(--ink);display:grid;place-items:center;font-size:20px;transition:transform .5s var(--ease),background .3s}
.cat:hover .cat__go{transform:rotate(-45deg);background:var(--melon);color:var(--bone)}
.cat__count{position:absolute;top:18px;right:20px;font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;opacity:.7;transform:translateZ(40px)}
.cat.is-light{color:var(--ink)}
.cat.is-light .cat__ghost{color:rgba(0,0,0,.06)}
.cat.is-light .cat__go{background:var(--ink);color:var(--bone)}

/* =============================================================
   PRODUCT CARDS
   ============================================================= */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,24px)}
.card{--rx:0deg;--ry:0deg;--gx:50%;--gy:30%;position:relative;display:block;perspective:1200px}
.card__stage{position:relative;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--stage, #d9d1c2);transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .6s var(--ease),box-shadow .6s var(--ease);isolation:isolate}
.card__stage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(80% 60% at 50% 30%,rgba(255,255,255,.55),transparent 70%),radial-gradient(120% 50% at 50% 110%,rgba(0,0,0,.18),transparent 60%)}
.card:hover .card__stage{box-shadow:0 40px 70px -30px rgba(0,0,0,.55)}
.card__glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--gx) var(--gy),rgba(255,255,255,.45),transparent 45%);opacity:0;transition:opacity .4s;mix-blend-mode:overlay;z-index:4}
.card:hover .card__glare{opacity:1}
.card__art{position:absolute;inset:7%;transform:translateZ(50px);transition:transform .7s var(--ease)}
.card__art .garment, .card__art img{width:100%;height:100%;object-fit:contain}
.card__art .garment{filter:drop-shadow(0 24px 22px rgba(0,0,0,.3))}
.card__art .is-back{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.card:hover .card__art{transform:translateZ(80px) translateY(-6px)}
.card:hover .card__art .is-back{opacity:1}
.card:hover .card__art .is-front.has-back{opacity:0}
.card__art .is-front{transition:opacity .5s}
.card__badge{position:absolute;top:14px;left:14px;z-index:5;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:100px;background:var(--ink);color:var(--bone)}
.card__badge.b-limited{background:var(--melon)}
.card__badge.b-new{background:var(--olive)}
.card__quick{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;display:flex;gap:6px;justify-content:center;transform:translateY(130%);transition:transform .5s var(--ease)}
.card:hover .card__quick, .card:focus-within .card__quick{transform:none}
.card__quick button{flex:1;height:40px;border-radius:100px;background:rgba(11,11,11,.85);backdrop-filter:blur(8px);color:var(--bone);font-size:12px;font-weight:600;transition:background .25s}
.card__quick button:hover{background:var(--melon)}
.card__quick .sz{flex:0 0 40px;font-size:11px}
.card__info{display:flex;justify-content:space-between;gap:12px;padding:14px 4px 0}
.card__name{font-weight:600;font-size:15px;line-height:1.25}
.card__sub{font-size:12px;opacity:.6;margin-top:3px}
.card__price{font-family:var(--f-display);font-weight:800;font-size:22px;line-height:1}
.swatches{display:flex;gap:6px;margin-top:8px}
.swatches i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}

/* ---------- featured strip (drag) ---------- */
.drop{overflow:hidden}
.drop__rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:24px;margin:0 calc(var(--pad) * -1);padding-inline:var(--pad);scrollbar-width:none;cursor:grab;scroll-padding-inline:var(--pad)}
.drop__rail::-webkit-scrollbar{display:none}
.drop__rail .card{flex:0 0 clamp(260px,24vw,360px);scroll-snap-align:start}
.drop__ctrl{display:flex;gap:8px}
.drop__ctrl .icon-btn{width:52px;height:52px;border-color:var(--line-d)}
.drop__ctrl .icon-btn:hover{background:var(--ink);color:var(--bone)}
.progress{height:2px;background:var(--line-d);margin-top:8px;position:relative}
.progress span{position:absolute;left:0;top:0;bottom:0;background:var(--ink);width:20%;transition:transform .2s}

/* =============================================================
   IMPACT
   ============================================================= */
.impact{background:var(--olive-d);overflow:hidden}
.impact__pattern{position:absolute;inset:0;opacity:.16;pointer-events:none;background-image:var(--keffiyeh);background-size:84px 84px;mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent)}
.impact__wrap{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,100px);align-items:center}
.impact__big{font-family:var(--f-display);font-weight:900;font-size:clamp(180px,28vw,460px);line-height:.75;letter-spacing:-.03em;color:var(--bone);position:relative}
.impact__big sup{font-size:.32em;vertical-align:top;position:relative;top:.12em;color:var(--sand)}
.impact__big small{display:block;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(26px,3vw,44px);letter-spacing:0;line-height:1.1;margin-top:24px;color:var(--sand)}
.impact__copy h3{font-family:var(--f-display);font-weight:900;font-size:clamp(36px,4vw,64px);line-height:.92;text-transform:uppercase;margin-bottom:22px}
.impact__copy>p{opacity:.8;max-width:520px;margin-bottom:34px}
.meter{border-top:1px solid var(--line);padding:18px 0}
.meter__row{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;opacity:.75;margin-bottom:10px}
.meter__bar{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden}
.meter__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sand),var(--bone));border-radius:6px;transition:width 2s var(--ease)}
.in .meter__bar span{width:var(--w)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(60px,8vw,110px);position:relative}
.pillar{border:1px solid var(--line);border-radius:20px;padding:30px;background:rgba(0,0,0,.18);backdrop-filter:blur(6px);transition:transform .6s var(--ease),background .4s}
.pillar:hover{transform:translateY(-8px);background:rgba(0,0,0,.3)}
.pillar b{font-family:var(--f-display);font-weight:900;font-size:56px;line-height:1;color:var(--sand);display:block;margin-bottom:28px}
.pillar h4{font-family:var(--f-display);font-weight:800;font-size:28px;text-transform:uppercase;margin-bottom:8px}
.pillar p{opacity:.75;font-size:14px}

/* =============================================================
   LOOKBOOK / QUOTES (horizontal pinned)
   ============================================================= */
.look{position:relative;height:420vh;background:var(--ink)}
.look__pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.look__track{display:flex;gap:6vw;padding-left:var(--pad);will-change:transform}
.look__intro{flex:0 0 min(80vw,560px);display:flex;flex-direction:column;justify-content:center}
.look__slide{flex:0 0 min(78vw,720px);height:min(72vh,640px);border-radius:26px;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;background:var(--c)}
.look__slide .garment{width:100%;height:100%}
.look__art{position:relative;padding:8%;display:grid;place-items:center}
.look__art::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 40%,rgba(255,255,255,.28),transparent 70%)}
.look__text{padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;justify-content:space-between;position:relative}
.look__text q{font-family:var(--f-serif);font-style:italic;font-size:clamp(28px,3.2vw,50px);line-height:1.02;quotes:"“" "”"}
.look__text .eyebrow{opacity:.7}
.look__slide.is-light{color:var(--ink)}
.look__n{font-family:var(--f-display);font-weight:900;font-size:120px;line-height:.8;opacity:.12;position:absolute;right:20px;bottom:10px}

/* =============================================================
   COMMUNITY / JOIN
   ============================================================= */
.join{background:var(--bone);color:var(--ink);overflow:hidden}
.join__wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.join h2{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(56px,8vw,140px);line-height:.84}
.join h2 .serif{color:var(--melon);font-size:.68em}
.join__form{margin-top:36px;display:flex;border-bottom:2px solid var(--ink);max-width:560px}
.join__form input{flex:1;background:none;border:0;outline:0;font:500 20px var(--f-body);padding:18px 0;color:var(--ink)}
.join__form input::placeholder{color:rgba(11,11,11,.4)}
.join__form button{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:0 6px;font-weight:600}
.join__links{display:grid;gap:10px}
.jl{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-radius:18px;border:1px solid var(--line-d);transition:background .4s,color .4s,transform .5s var(--ease)}
.jl:hover{background:var(--ink);color:var(--bone);transform:translateX(-8px)}
.jl strong{font-family:var(--f-display);font-weight:800;font-size:26px;text-transform:uppercase;display:block;line-height:1}
.jl span{font-size:13px;opacity:.65}
.jl em{font-style:normal;font-size:22px;transition:transform .4s var(--ease)}
.jl:hover em{transform:rotate(-45deg)}

/* =============================================================
   FOOTER
   ============================================================= */
.footer{background:var(--ink);padding:clamp(70px,9vw,120px) var(--pad) 28px;position:relative;overflow:hidden}
.footer__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;padding-bottom:60px;border-bottom:1px solid var(--line)}
.footer__top h5{font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;font-weight:400;margin-bottom:16px}
.footer__top a{display:block;padding:4px 0;opacity:.85;transition:opacity .3s,transform .3s}
.footer__top a:hover{opacity:1;transform:translateX(4px)}
.footer__brand img{width:140px;margin-bottom:22px}
.footer__brand p{max-width:320px;opacity:.7;font-size:14px}
.footer__word{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:21.5vw;line-height:.78;letter-spacing:-.02em;margin:40px 0 10px;color:transparent;-webkit-text-stroke:1px rgba(239,233,223,.25);white-space:nowrap;user-select:none;transition:color .8s}
.footer__word:hover{color:var(--bone)}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;opacity:.55;text-transform:uppercase;flex-wrap:wrap}

/* =============================================================
   SHOP PAGE
   ============================================================= */
.page-top{padding:calc(var(--nav-h) + clamp(40px,7vw,90px)) var(--pad) 0;position:relative;overflow:hidden}
.shop-hero{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.shop-hero h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(70px,13vw,230px);line-height:.8}
.shop-hero p{max-width:300px;opacity:.75}
.shop-hero .ghost-ar{position:absolute;right:-3vw;top:2vw;font-family:var(--f-ar);font-size:22vw;color:rgba(239,233,223,.035);pointer-events:none;line-height:1}
.filters{position:sticky;top:var(--nav-h);z-index:20;display:flex;align-items:center;gap:10px;padding:16px var(--pad);background:rgba(11,11,11,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.chip{flex:none;height:40px;padding:0 18px;border-radius:100px;border:1px solid var(--line);font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:all .3s}
.chip:hover{border-color:var(--bone)}
.chip.is-on{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.chip sup{font-family:var(--f-mono);font-size:9px;opacity:.6}
.filters select{margin-left:auto;flex:none;height:40px;padding:0 36px 0 16px;border-radius:100px;border:1px solid var(--line);background:transparent;color:var(--bone);font:500 13px var(--f-body);appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--bone) 50%),linear-gradient(135deg,var(--bone) 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.filters select option{color:#000}
.shop-grid{padding:36px var(--pad) clamp(80px,10vw,140px)}
.shop-grid .card__stage{--stage:#1a1916}
.shop-grid .card__stage::before{background:radial-gradient(80% 60% at 50% 30%,rgba(255,255,255,.13),transparent 70%)}
.shop-grid .card__name{color:var(--bone)}
.empty{padding:80px 0;text-align:center;opacity:.6}
.card.enter{animation:cardIn .9s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(40px) scale(.97)}}

/* =============================================================
   PRODUCT PAGE
   ============================================================= */
.pdp{display:grid;grid-template-columns:1.25fr 1fr;min-height:100vh}
.pdp__stage{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden;background:radial-gradient(70% 60% at 50% 38%, #2a2924, #0e0e0c 75%);perspective:1600px;cursor:grab;user-select:none;touch-action:pan-y}
.pdp__stage:active{cursor:grabbing}
.pdp__stage::after{content:"";position:absolute;left:10%;right:10%;bottom:10%;height:22%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),transparent 70%);z-index:0}
.pdp__spot{position:absolute;inset:0;background:radial-gradient(40% 35% at var(--lx,50%) var(--ly,30%),rgba(255,240,215,.16),transparent 70%);pointer-events:none;z-index:2;mix-blend-mode:screen}
.spinner{position:relative;width:min(70%,560px);aspect-ratio:400/470;transform-style:preserve-3d;z-index:1;transition:transform .08s linear}
.spinner .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.spinner .face--back{transform:rotateY(180deg)}
.spinner .garment{width:100%;height:100%;filter:drop-shadow(0 50px 40px rgba(0,0,0,.5))}
.spinner .face img{width:100%;height:100%;object-fit:contain}
.pdp__ghost{position:absolute;inset:auto 0 6% 0;text-align:center;font-family:var(--f-display);font-weight:900;font-size:16vw;line-height:.8;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px rgba(239,233,223,.08);white-space:nowrap;z-index:0}
.pdp__hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;opacity:.55;text-transform:uppercase;display:flex;gap:10px;align-items:center;z-index:3}
.pdp__views{position:absolute;top:calc(var(--nav-h) + 20px);left:var(--pad);display:flex;gap:6px;z-index:3}
.pdp__views button{height:34px;padding:0 14px;border-radius:100px;border:1px solid var(--line);font-size:12px;transition:.3s}
.pdp__views button.is-on{background:var(--bone);color:var(--ink)}
.pdp__info{padding:calc(var(--nav-h) + 50px) var(--pad) 80px;display:flex;flex-direction:column;gap:28px}
.crumbs{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.crumbs a:hover{opacity:1;text-decoration:underline}
.pdp h1{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(46px,5vw,84px);line-height:.88}
.pdp__price{display:flex;align-items:baseline;gap:16px}
.pdp__price b{font-family:var(--f-display);font-weight:800;font-size:40px}
.pdp__price span{font-size:13px;color:var(--sand)}
.pdp__desc{opacity:.8;max-width:520px}
.opt h6{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;opacity:.6;margin-bottom:12px;display:flex;justify-content:space-between}
.opt h6 b{font-weight:500;opacity:1;color:var(--bone)}
.colors{display:flex;gap:10px;flex-wrap:wrap}
.colors button{width:44px;height:44px;border-radius:50%;position:relative;box-shadow:inset 0 -6px 12px rgba(0,0,0,.3),inset 0 4px 8px rgba(255,255,255,.2);transition:transform .3s var(--ease)}
.colors button::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid transparent;transition:.3s}
.colors button.is-on::after{border-color:var(--bone)}
.colors button:hover{transform:scale(1.08)}
.sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px}
.sizes button{height:50px;border-radius:12px;border:1px solid var(--line);font-weight:600;font-size:14px;transition:.25s}
.sizes button:hover{border-color:var(--bone)}
.sizes button.is-on{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px;height:56px}
.qty button{width:48px;height:100%;font-size:18px}
.qty span{min-width:28px;text-align:center;font-weight:600}
.buy{display:flex;gap:10px}
.buy .btn{flex:1}
.give-note{display:flex;gap:14px;align-items:center;padding:18px 20px;border-radius:16px;background:rgba(75,86,52,.28);border:1px solid rgba(201,180,143,.2);font-size:14px}
.give-note b{font-family:var(--f-display);font-size:34px;font-weight:900;color:var(--sand);line-height:1}
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;padding:20px 0;font-weight:600;display:flex;justify-content:space-between;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-weight:300;font-size:22px;line-height:1;transition:transform .3s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details p,.acc details ul{padding:0 0 20px;opacity:.75;font-size:14px}
.acc ul{list-style:none;display:grid;gap:6px}
.related{padding:clamp(70px,9vw,120px) var(--pad);border-top:1px solid var(--line)}
.related .card__stage{--stage:#1a1916}
.related .card__stage::before{background:radial-gradient(80% 60% at 50% 30%,rgba(255,255,255,.13),transparent 70%)}

/* =============================================================
   MISSION + CONTACT PAGES
   ============================================================= */
.manifesto{font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(38px,5.4vw,96px);line-height:.95;max-width:1400px}
.manifesto .serif{color:var(--sand)}
.manifesto .dim{opacity:.25;transition:opacity .6s}
.manifesto .dim.lit{opacity:1}
.mission-meaning{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,6vw,100px);align-items:center;margin-top:clamp(70px,10vw,140px);padding-top:clamp(50px,7vw,90px);border-top:1px solid var(--line)}
.mission-meaning .ar{font-family:var(--f-ar);font-weight:700;font-size:clamp(110px,16vw,260px);line-height:1;color:var(--sand)}
.mission-meaning p{font-size:clamp(18px,1.6vw,24px);opacity:.85;max-width:620px}
.mission-meaning p+p{margin-top:16px;font-size:16px;opacity:.6}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);padding:0 var(--pad) clamp(80px,10vw,140px)}
.contact__mail{font-family:var(--f-display);font-weight:900;font-size:clamp(28px,3.4vw,58px);text-transform:uppercase;line-height:1;word-break:break-all;border-bottom:2px solid var(--bone);display:inline-block;padding-bottom:6px}
.contact form{display:grid;gap:14px}
.field{display:grid;gap:8px}
.field label{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.field input,.field textarea,.field select{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:16px 18px;color:var(--bone);font:500 15px var(--f-body);outline:none;transition:border-color .3s,background .3s}
.field select option{color:#000}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--sand);background:rgba(255,255,255,.06)}
.field textarea{min-height:150px;resize:vertical}

/* =============================================================
   DRAWER / MODAL / TOAST
   ============================================================= */
.scrim{position:fixed;inset:0;z-index:150;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .5s}
.drawer-open .scrim{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:10px;right:10px;bottom:10px;z-index:160;width:min(460px,calc(100vw - 20px));background:var(--ink-2);border:1px solid var(--line);border-radius:24px;display:flex;flex-direction:column;transform:translateX(calc(100% + 20px));transition:transform .7s var(--ease)}
.drawer-open .drawer{transform:none}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer__head h3{font-family:var(--f-display);font-weight:900;font-size:32px;text-transform:uppercase}
.drawer__give{padding:16px 24px;border-bottom:1px solid var(--line);font-size:13px}
.drawer__give .meter__bar{margin-top:10px;height:4px}
.drawer__give .meter__bar span{width:var(--w);transition:width .8s var(--ease)}
.drawer__items{flex:1;overflow:auto;padding:10px 24px}
.line{display:grid;grid-template-columns:84px 1fr auto;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.line__img{width:84px;height:96px;border-radius:12px;background:#22211d;padding:6px}
.line__img .garment{width:100%;height:100%}
.line__name{font-weight:600;font-size:14px}
.line__meta{font-size:12px;opacity:.6;margin:2px 0 8px}
.line__qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;height:30px}
.line__qty button{width:28px;height:100%}
.line__qty span{min-width:18px;text-align:center;font-size:13px}
.line__right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.line__right b{font-family:var(--f-display);font-size:20px}
.line__rm{font-size:11px;opacity:.5;text-decoration:underline}
.drawer__empty{padding:60px 0;text-align:center;opacity:.7}
.drawer__empty .serif{font-size:32px;display:block;margin-bottom:12px;opacity:1}
.drawer__foot{padding:20px 24px 24px;border-top:1px solid var(--line)}
.drawer__row{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.drawer__row b{font-family:var(--f-display);font-size:30px}
.drawer__note{font-size:12px;opacity:.55;margin:6px 0 16px}
.modal{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .4s}
.modal.is-open{opacity:1;pointer-events:auto}
.modal__card{position:relative;width:min(520px,100%);background:var(--bone);color:var(--ink);border-radius:24px;padding:40px;transform:translateY(30px) scale(.97);transition:transform .6s var(--ease)}
.modal.is-open .modal__card{transform:none}
.modal__x{position:absolute;top:16px;right:16px;border-color:var(--line-d)}
.modal h3{font-family:var(--f-display);font-weight:900;font-size:44px;text-transform:uppercase;line-height:.9;margin-bottom:14px}
.modal p{opacity:.75;margin-bottom:20px}
.toast{position:fixed;left:50%;bottom:24px;z-index:260;transform:translate(-50%,calc(100% + 60px));background:var(--bone);color:var(--ink);padding:14px 22px;border-radius:100px;font-weight:600;font-size:14px;display:flex;gap:12px;align-items:center;box-shadow:0 20px 50px rgba(0,0,0,.4);transition:transform .6s var(--ease)}
.toast.is-on{transform:translate(-50%,0)}
.toast i{width:22px;height:22px;border-radius:50%;background:var(--olive);color:var(--bone);display:grid;place-items:center;font-style:normal;font-size:12px}

/* page transition */
.wipe{position:fixed;inset:0;z-index:120;background:var(--olive-d);transform:translateY(100%);pointer-events:none}
.wipe.go{animation:wipe 1s var(--ease-io)}
@keyframes wipe{0%{transform:translateY(100%)}45%,55%{transform:translateY(0)}100%{transform:translateY(-100%)}}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1100px){
  .nav__links{display:none}
  .nav__menu{display:block}
  .grid{grid-template-columns:repeat(3,1fr)}
  .cat:nth-child(n){grid-column:span 6;min-height:440px}
  .cat:nth-child(1){grid-column:span 12}
  .impact__wrap,.join__wrap,.contact{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr 1fr}
  .pdp{grid-template-columns:1fr}
  .pdp__stage{position:relative;height:78vh}
}
@media (max-width:720px){
  :root{--nav-h:64px}
  .nav__logo img{height:36px}
  .nav__impact{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .cat:nth-child(n){grid-column:span 12;min-height:380px}
  .hero__front{grid-template-columns:1fr}
  .hero__hint{display:none}
  .hero__fallback{place-items:start center;padding-top:20vh}
  .hero__fallback img{width:62vw}
  .sec-head{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .look{height:auto}
  .look__pin{position:relative;height:auto;padding:80px 0}
  .look__track{flex-direction:column;padding:0 var(--pad);transform:none!important}
  .look__slide{flex:none;width:100%;height:auto;grid-template-columns:1fr}
  .look__art{height:340px}
  .footer__top{grid-template-columns:1fr}
  .shop-hero{grid-template-columns:1fr}
  .mission-meaning{grid-template-columns:1fr}
  .card__quick{transform:none}
  .card__quick .sz{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}