/* Combo page = index look (style.css) + direction 9 (3D wall that unfurls on scroll) + direction 5 (draggable before/after slider). */

/* nav: links sit next to the logo so the diagonal gallery never covers them */
nav{justify-content:flex-start;gap:46px} nav .pill{margin-inline-start:auto}
nav .links{opacity:.9}

/* ---------- 3D wall that unfurls (from direction 9) ---------- */
.unf{position:relative;height:240vh;background:#050505}   /* was 380vh: the wall now opens after a shorter scroll (users found it tiring) */
.unf .pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.unf .ban{position:relative;width:var(--bw,90vw);height:var(--bh,80vh);border-radius:var(--br,48px);border:var(--bb,4px) solid #2c2738;overflow:hidden;background:#000;max-width:1920px}
.unf .persp{position:absolute;inset:0;display:grid;place-items:center;perspective:1000px}
.unf .wall{display:flex;gap:18px;justify-content:center;align-items:center;width:120vw;height:150vh;transform-style:preserve-3d;transform:translateZ(var(--tz,-800px)) rotateX(var(--rx,25deg)) rotateY(var(--ry,-45deg)) rotateZ(var(--rz,15deg));direction:ltr}
.unf .ucol{display:flex;flex-direction:column;gap:18px;width:22vw;min-width:200px;transform:translateY(var(--y,0%))}
.unf .ucol img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;opacity:.88}
.unf .shade{position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 100px 150px -50px #000,inset 0 -100px 150px -50px #000,inset 150px 0 150px -50px #000,inset -150px 0 150px -50px #000}
.unf .copy{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;padding:0 24px;pointer-events:none}
.unf .copy>div{opacity:var(--co,1);transform:translateY(calc((1 - var(--co,1)) * -30px))}
.unf h2{font-size:clamp(46px,8vw,120px);line-height:.95;font-weight:900;letter-spacing:-4px;text-shadow:0 8px 50px #000;margin:0} .unf h2 em{font-style:normal;color:var(--yellow)}
.unf .copy p{font-size:21px;color:#e8e2da;margin:18px auto 0;max-width:540px;text-shadow:0 2px 20px #000}
.unf .end{position:absolute;inset:auto 0 9vh 0;z-index:5;display:grid;justify-items:center;gap:14px;text-align:center;opacity:var(--eo,0);transform:translateY(calc((1 - var(--eo,0)) * 30px));pointer-events:none}
.unf .end b{font-size:clamp(30px,4.4vw,60px);font-weight:900;letter-spacing:-2px;text-shadow:0 6px 40px #000} .unf .end .pill{pointer-events:auto}

/* ---------- before/after slider (from direction 5, dark version) ---------- */
.cmpwrap{width:min(430px,100%);margin-inline:auto}
.cmp{position:relative;aspect-ratio:2/3;border-radius:30px;overflow:hidden;background:#222;box-shadow:0 34px 70px rgba(0,0,0,.5);border:5px solid #fff;user-select:none;touch-action:pan-y;--p:50%}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.cmp .before{object-fit:cover;background:#d9d4cd}   /* the garment photo is pre-aligned to each result (assets/G_*.jpg): same size and position as the dress on the model */ .cmp .top{clip-path:inset(0 0 0 var(--p))}
.cmp .cline{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:#fff;transform:translateX(-1.5px);box-shadow:0 0 12px rgba(0,0,0,.4);pointer-events:none}
.cmp .knob{position:absolute;top:50%;left:var(--p);width:56px;height:56px;border-radius:50%;background:var(--yellow);color:#17171d;border:3px solid #17171d;transform:translate(-50%,-50%);display:grid;place-items:center;font-weight:900;pointer-events:none}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp:focus-within .knob{outline:3px solid #fff;outline-offset:3px}
.cmp .ctag{position:absolute;top:14px;background:#fff;color:#17171d;border-radius:999px;padding:5px 14px;font-weight:800;font-size:14px;z-index:3}
.cmp .ctag.b{inset-inline-end:14px} .cmp .ctag.a{inset-inline-start:14px;background:var(--yellow)}
.pick{display:flex;gap:10px;justify-content:center;margin-top:16px}
.pick button{min-height:44px;padding:0 22px;border-radius:999px;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:700 16px Heebo;cursor:pointer}
.pick button[aria-pressed=true]{background:#fff;color:#17171d;border-color:#fff}
.ba .hintline{color:var(--yellow);font-weight:800;font-size:15px;margin-top:22px;letter-spacing:.5px}

/* New York background: keep the head in view */
.ny{background-position:center 18%!important}

@media (prefers-reduced-motion:reduce){
 .unf{height:auto}.unf .pin{position:relative;height:auto;padding:90px 0}.unf .ban{--bw:100vw;--bh:90vh;--br:0px;--bb:0px}.unf .wall{transform:none!important}
 .unf .end{position:relative;--eo:1;inset:auto;margin-top:24px}
}
@media (max-width:760px){.unf .ucol{min-width:150px}}

/* ---------- small additions for real links / buttons / form fields ---------- */
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.links a{min-height:44px;display:inline-flex;align-items:center}
.pill{border:0;font-family:Heebo,Arial,sans-serif;cursor:pointer}
.pill.line{border:1.5px solid rgba(255,255,255,.45)} .pill.y{border:0}
button.tab{background:transparent;font:700 16px Heebo,Arial,sans-serif;color:#d6d6de;min-height:44px}
.lpause{min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:700 15px Heebo,Arial,sans-serif;cursor:pointer}
.form label{display:grid;gap:4px;font-weight:700;font-size:14px;color:#333;margin-bottom:12px}
.form label.chk{display:flex;gap:10px;font-weight:400;font-size:14px;color:#666;margin:6px 0 18px}
.form input,.form select{font:400 17px Heebo,Arial,sans-serif;padding:11px 13px;border:1.5px solid #d8d4cc;border-radius:12px;min-height:48px;background:#f4f1ec;color:#17171d}
.form .chk input{min-height:0;width:20px;height:20px;margin-top:3px;flex:none}
.form .pill{width:100%;justify-content:center;background:var(--ink)} #ok{display:none;color:#17171d;font-weight:700;margin-top:10px}
@media (max-width:760px){.f2{grid-template-columns:1fr!important}}

/* overflow-x:hidden on html/body (style.css) breaks position:sticky; clip hides the overflow without making body a scroll container */
html,body{overflow-x:clip}
.unf .end{inset:auto 0 0 0;padding:110px 0 9vh;background:linear-gradient(transparent,rgba(0,0,0,.82) 60%)}

/* looks carousel: a slide with four pictures (the "locations" tab) */
.slide.x4{grid-template-columns:repeat(4,1fr)}
.slide.x4 .c:nth-child(n){margin-top:0;margin-bottom:0}   /* four pictures: all on the same line */
@media (max-width:900px){.slide.x4{grid-template-columns:1fr 1fr}}

/* ---------- "try it yourself" demo ---------- */
.try{padding-top:90px}
.trygrid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start;margin-top:30px}
.tryctl h3{font-size:15px;color:#bdb8b2;font-weight:700;letter-spacing:1px;margin:0 0 10px}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
.tg{position:relative;display:grid;grid-template-rows:1fr auto;gap:6px;padding:8px;border-radius:18px;border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#fff;font:700 15px Heebo,Arial,sans-serif;cursor:pointer;text-align:center}
.tg img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block;background:#d9d4cd}
.tg[aria-pressed=true]{border-color:var(--yellow);background:rgba(255,201,51,.12)}
.tchips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.tl{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:700 16px Heebo,Arial,sans-serif;cursor:pointer}
.tl[aria-pressed=true]{background:#fff;color:#17171d;border-color:#fff}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)} .dot.ok{background:#3ddc97}
.trymsg{min-height:52px;font-size:17px;color:#dcd6cf} .trymsg.ok{color:#9be8c8} .trymsg.warn{color:#ffb4a2}
.tryleft{font-size:14px;color:#a9a39b;margin-top:10px}
#tryAct{margin-top:8px} #tryAct:disabled,.tryup .pill:disabled{opacity:.5;cursor:not-allowed}
.tryout{position:relative;aspect-ratio:2/3;max-width:420px;width:100%;margin-inline:auto;border-radius:30px;overflow:hidden;border:5px solid #fff;background:#1b1b22;box-shadow:0 34px 70px rgba(0,0,0,.5)}
.tryout img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ttag{position:absolute;bottom:14px;inset-inline-start:14px;z-index:3;background:rgba(13,13,18,.72);backdrop-filter:blur(8px);border-radius:999px;padding:6px 16px;font-weight:700;font-size:14px}
.tryempty,.tryspin{position:absolute;inset:0;display:none;place-items:center;text-align:center;z-index:4;padding:24px;font-weight:800;font-size:20px}
.tryout.empty img{opacity:.0} .tryout.empty .tryempty{display:grid;background:linear-gradient(160deg,#241c14,#0d0d12)}
.tryout.loading .tryempty{display:none}
.tryout.loading img{opacity:.25} .tryout.loading .tryspin{display:grid;background:rgba(13,13,18,.6)}
.tryspin::after{content:"";width:52px;height:52px;border-radius:50%;border:5px solid rgba(255,255,255,.25);border-top-color:var(--yellow);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media (max-width:900px){.trygrid{grid-template-columns:1fr}.tgrid{grid-template-columns:repeat(3,1fr)}#upForm .f2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tryspin::after{animation:none}}


.pick{flex-wrap:wrap}.pick button{white-space:nowrap}

/* contact form: honeypot field (hidden from people and screen readers) + footer links */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .chk a{color:#17171d;text-decoration:underline}
footer a{text-decoration:underline}

/* =====================================================================================================
   PHONE (up to 760px wide). Everything for small screens lives in this one block, so desktop never changes.
   style.css was written for desktop only; these rules stack columns, hide the nav links and fix tap sizes.
   ===================================================================================================== */
@media (max-width:760px){
 .wrap{padding:0 20px}
 section{padding:64px 0 24px}
 h2{font-size:38px;letter-spacing:-1px}
 .final h2{font-size:42px}

 /* nav: logo + one button (the page is short enough to scroll, the links are not needed) */
 nav{padding:16px 18px;gap:10px}
 nav .links{display:none}
 .logo{font-size:30px}
 nav .pill{min-height:44px;padding:0 20px;font-size:15px}

 /* hero: text first, the diagonal galleries as a band underneath */
 .hero{display:block;min-height:0;padding-bottom:26px}
 .hero-shade{background:linear-gradient(rgba(24,15,12,.82),rgba(24,15,12,.55) 55%,rgba(13,13,18,.92))}
 .hero-text{margin:0;padding:104px 20px 22px;max-width:none}
 .tag-y{font-size:14px;padding:7px 16px}
 h1{font-size:42px;letter-spacing:-1.5px;margin:18px 0 14px}
 .lead{font-size:18px}
 .cta{margin-top:22px;flex-wrap:wrap}
 .stats{gap:24px;margin-top:26px;flex-wrap:wrap}
 .stats b{font-size:34px}
 .hero-gal{height:360px;margin:6px 0 0;transform:rotate(-4deg) scale(1.12)}
 .col{width:132px;gap:12px}
 .col img{border-radius:18px}
 .tickwrap{margin-top:-10px}

 /* New York background: iOS ignores "fixed" backgrounds and the whole .ny block is very tall, so the picture
    goes behind the first section only */
 .ny{background:none!important}
 #how{background:linear-gradient(rgba(13,13,18,.55),rgba(13,13,18,.82)),url(assets/bg_newyork.jpg) 62% 10%/cover no-repeat;padding-bottom:48px}
 .ba{grid-template-columns:1fr;gap:34px}
 .ba p{font-size:18px}

 /* looks carousel: swipe sideways through big pictures instead of three thin columns */
 .looks{margin:50px 12px 0;padding:46px 0;border-radius:28px}
 .slides{height:500px}
 .slide,.slide.x4{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
 .slide::-webkit-scrollbar{display:none}
 .slide .c,.slide.x4 .c:nth-child(n){flex:0 0 66%;scroll-snap-align:center;margin:0}

 .steps{grid-template-columns:1fr;gap:26px;margin-top:34px}
 .step .n{font-size:84px}
 .who{grid-template-columns:1fr;gap:16px;margin-top:34px}
 .wc{height:360px;padding:22px}
 .wc b{font-size:28px}

 .try{padding-top:56px}
 .final{margin:56px 12px 12px;border-radius:28px;padding:44px 0}
 .final .wrap{grid-template-columns:1fr;gap:28px}
 .final p{font-size:18px}
 .form{padding:22px}

 footer{flex-direction:column;gap:2px;padding:28px 20px;text-align:center}
 footer a{display:inline-block;padding:12px 8px}
}

/* the orange ticker strip was removed: fade the bottom of the hero into the dark wall section instead of a hard edge */
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;background:linear-gradient(transparent,#050505);z-index:6;pointer-events:none}

/* the wall section starts inside the fade at the bottom of the hero, so there is no empty dark gap between them (all screen sizes) */
.unf{margin-top:-200px;background:linear-gradient(rgba(5,5,5,0) 0,#050505 200px,#050505 100%)}

/* demo: on a wide screen the result frame stays in view beside the form/upload window while the page scrolls */
@media (min-width:901px){ .trygrid{align-items:start} .tryout{position:sticky;top:24px} }
/* demo: download button on the result picture + the place picker inside the upload window */
.tdl{position:absolute;bottom:14px;inset-inline-end:14px;z-index:6;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--yellow);color:#17171d;font:800 15px Heebo,Arial,sans-serif;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:pointer}
.tdl[hidden]{display:none}
.tdl:hover{filter:brightness(1.06)} .tdl:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (max-width:900px){.tdl{bottom:auto;top:14px}}

/* digits: the serif font draws a "1" like a letter I, so numbers use the page's main font (clear in every size) */
.stats b{font-family:Heebo,"Segoe UI",Arial,sans-serif;font-weight:800;font-size:40px;letter-spacing:-1px}
.step .n{font-family:Heebo,"Segoe UI",Arial,sans-serif;font-weight:900;font-size:130px;letter-spacing:-4px;-webkit-text-stroke:2px var(--gold)}
@media (max-width:760px){.stats b{font-size:32px}.step .n{font-size:84px}}

/* demo: "ask for one more picture" + visitor code; the hidden attribute must win over the .pill display rule */
[hidden]{display:none!important}
#tryMore{margin-top:6px}
.trycode{font-size:13px;color:#a9a39b;margin-top:8px;line-height:1.5}
/* ================= demo: upload window (always open), phone layout ================= */
.tryctl>*,.trygrid>*{min-width:0}
.upcard{display:grid;gap:16px;margin-top:30px;padding:22px;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.04));border:1px solid rgba(217,179,106,.38);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.uphead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.uphead h3{font-size:22px;color:#fff;letter-spacing:0;margin:0}
.upbadge{font-size:13px;font-weight:800;background:var(--gold);color:#17120a;border-radius:999px;padding:4px 14px}
.drop{position:relative;display:grid;place-items:center;min-height:150px;padding:18px;border:2px dashed rgba(217,179,106,.6);border-radius:20px;background:rgba(0,0,0,.28);cursor:pointer;text-align:center;transition:background .2s,border-color .2s}
.drop:hover,.drop.over{background:rgba(217,179,106,.12);border-color:var(--gold)}
.drop:focus-within{outline:3px solid var(--gold);outline-offset:3px}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.dropempty{display:grid;gap:6px;justify-items:center;pointer-events:none} .dropempty svg{color:var(--gold)} .dropempty b{font-size:18px}
.dropempty small,.dropfull small{color:#bdb8b2;font-size:13px}
.dropfull{display:flex;align-items:center;gap:14px;text-align:start;max-width:100%;pointer-events:none}
.dropfull img{width:72px;height:96px;object-fit:cover;border-radius:12px;border:2px solid rgba(255,255,255,.4);flex:none;background:#d9d4cd}
.dropfull>span{display:grid;min-width:0} .dropfull b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:ltr;text-align:start}
.upfield{display:grid;gap:8px} .uplabel{font-weight:700;font-size:14px;color:#cfc9c2}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff;font:700 15px Heebo,Arial,sans-serif;cursor:pointer}
.seg button[aria-checked=true]{background:#fff;color:#17171d;border-color:#fff}
/* model chooser for the visitor's own garment: 4 small portraits (2 women, 2 men), the chosen one has a yellow frame */
.mpick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:208px}
.mpick button{display:grid;grid-template-rows:auto auto;gap:0;padding:0;overflow:hidden;border-radius:10px;border:2px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;font:700 11px Heebo,Arial,sans-serif;cursor:pointer;text-align:center}
.mpick img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:top;opacity:.78}
.mpick span{padding:5px 2px 6px;line-height:1.1}
.mpick button[aria-checked=true]{border-color:var(--yellow);box-shadow:0 0 0 2px var(--yellow) inset}
.mpick button[aria-checked=true] img{opacity:1}
.mpick button[aria-checked=true] span{background:var(--yellow);color:#17171d}
.mpick button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.upcard .tchips{margin:0}
.upcard .chk{display:flex;gap:10px;font-weight:400;font-size:13.5px;color:#cfc9c2;align-items:flex-start;line-height:1.5}
.upcard .chk input{width:22px;height:22px;margin-top:2px;flex:none}
.upcard .chk a{color:#fff;text-decoration:underline}
.upcard #tryUp{width:100%;justify-content:center;min-height:54px;font-size:18px}
.upcard .pill:disabled{opacity:.5;cursor:not-allowed}
.upcard .trymsg{min-height:0;margin:0}
.upout{max-width:340px;margin:6px auto 0}
/* the visitor's own result has its own frame under the upload button on every screen size; the top frame shows only the system pictures (no download button there) */
@media (max-width:900px){
 /* phone: the page reads top to bottom - garments, place, status, ready-made picture, then the upload card with ITS OWN picture below it */
 .trygrid{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:22px}
 .tryctl{display:contents}
 .tryctl h3{margin:8px 0 0} .tgrid,.tchips{margin-bottom:0}
 .tryout{order:1;max-width:300px}
 .upcard{order:0;margin-top:14px;padding:18px}   /* the two cards now come first on a phone too */
 .uphead h3{font-size:20px}
}
/* =====================================================================================================
   v2 tweaks: bigger yellow logo, no nav / red buttons, white "see examples", tighter spacing (all screens)
   ===================================================================================================== */
nav{padding:16px 48px}
.logo{font-size:54px;line-height:1;font-weight:700;color:var(--yellow);letter-spacing:1px} .logo i{color:var(--yellow)}
.tag-y{font-size:19px;padding:10px 26px}
.pill.white{background:#fff;color:#17171d;border:0;box-shadow:0 10px 30px rgba(0,0,0,.35)} .pill.white:hover{background:#f1ece4}

/* spacing: desktop */
.hero{min-height:820px}
.hero-gal{height:820px}
.hero-text{padding:104px 0 36px}
h1{margin:18px 0 14px}
.cta{margin-top:24px}
.stats{gap:32px;margin-top:26px;padding-top:18px}
.stats>div{flex:none}
section{padding:80px 0 24px}
.try{padding-top:60px}
.trygrid{gap:36px;margin-top:22px}
.tgrid{margin-bottom:18px;gap:10px} .tchips{margin-bottom:14px}
.upcard{margin-top:20px}
.looks{margin:56px 28px 0;padding:64px 0 56px}
.steps{margin-top:34px;gap:30px} .who{margin-top:34px}
.final{margin:70px 28px 22px;padding:64px 0}
footer{padding:30px 48px}

/* ---------------- phone ---------------- */
@media (max-width:760px){
 nav{padding:12px 18px}
 .logo{font-size:46px}
 .hero{padding-bottom:6px}
 .hero-text{padding:74px 20px 8px}
 .tag-y{font-size:16px;padding:8px 18px}
 h1{font-size:40px;margin:12px 0 8px}
 .lead{font-size:17px;line-height:1.55}
 .cta{margin-top:14px}
 .stats{flex-wrap:nowrap;justify-content:space-between;gap:10px;margin-top:16px;padding-top:12px}
 .stats>div{flex:1 1 0;min-width:0}
 .stats b{font-size:30px} .stats span{display:block;font-size:12px;line-height:1.25}
 .hero-gal{height:290px;margin:0}
 section{padding:36px 0 12px}
 h2{font-size:31px}
 #how{padding-bottom:26px} .ba{gap:20px}
 .try{padding-top:30px}
 .trygrid{gap:10px;margin-top:12px}
 .tryctl h3{margin:4px 0 0}
 .upcard{margin-top:6px;padding:16px;gap:12px}
 .final{margin:30px 12px 10px;padding:28px 0}
 /* everything from the upload card to the bottom of the page: 10% smaller, so the page scrolls less */
 .upcard,.try ~ *,.final,footer{zoom:.9}
 .looks{margin:30px 12px 0;padding:32px 0}
 .slides{height:440px}
 .steps{gap:14px;margin-top:18px} .step .n{font-size:64px}
 .who{gap:12px;margin-top:18px} .wc{height:290px;padding:18px}
 footer{padding:16px 20px}
}
/* nav links closer together (no button any more) so the last link does not touch the gallery; gallery a little lower on a phone */
nav{gap:34px}
nav .links{gap:22px;font-size:15px}
@media (max-width:760px){ .hero-gal{margin-top:26px} }

/* ---------------- v3 (2026-10-27): white V in the logo, centred stats, smaller gallery / who pictures ---------------- */
.logo .lv{color:#fff}
#upForm{scroll-margin-top:24px}
.slides{height:420px}
.wc{height:340px}
@media (max-width:760px){ .slides{height:360px} .wc{height:230px} }
.drop[hidden],.upfield[hidden]{display:none!important}   /* the second picture (trousers) and its fit choice only exist for the shirt + trousers kind */
.stats b.inf{font-size:72px;font-weight:500;height:44px;line-height:44px}   /* the infinity sign is small in the font: bigger so it looks as large as the digits 15 and 0 */
@media (max-width:760px){ .stats b.inf{font-size:54px;font-weight:500;height:33px;line-height:33px} }

/* the personal demo card (phForm): a short intro, and garments that cannot be chosen are dimmed */
.phintro{font-size:14px;line-height:1.5;color:#cfc6c0;margin:0}
#phG .tg:disabled{opacity:.35;cursor:not-allowed}
#phOwnToggle{margin-top:10px}


/* ---- the proposed redesign of the personal-photo card: closed row, three short steps, one strip, one confirmation ---- */
.phcard{gap:14px}
.phrow{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;color:#fff;font:inherit;text-align:right;padding:0;cursor:pointer}
.phico{flex:none;width:46px;height:46px;border-radius:50%;background:var(--yellow,#ffcd28);color:#17120a;display:grid;place-items:center}
.phtxt b{display:block;font-size:20px} .phtxt small{display:block;color:#bdb4aa;font-size:13.5px;line-height:1.45;margin-top:2px}
.pharr{margin-inline-start:auto;font-size:26px;color:var(--yellow,#ffcd28);transition:transform .2s} .phcard.open .pharr{transform:rotate(-90deg)}
.phbody{display:grid;gap:12px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.phbody[hidden]{display:none}
.phstep{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px}
.phstep i{font-style:normal;flex:none;width:26px;height:26px;border-radius:50%;background:var(--yellow,#ffcd28);color:#17120a;display:grid;place-items:center;font-size:14px}
.phline1{display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:center}
.phdrop{min-height:0;padding:12px}
.phwho{display:grid;gap:6px} .phsmall{font-size:12.5px;color:#bdb4aa}
.phstrip{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
.phstrip[hidden]{display:none}
.phs{flex:none;width:84px;background:none;border:2px solid transparent;border-radius:14px;padding:3px;color:#fff;font:inherit;font-size:12px;cursor:pointer}
.phs img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;display:block} .phs span{display:block;margin-top:4px}
.phs[aria-pressed=true]{border-color:var(--yellow,#ffcd28)} .phs:disabled{opacity:.35;cursor:not-allowed}
#phOwn{display:grid;gap:8px} #phOwn[hidden]{display:none}
.linkbtn{background:none;border:0;color:var(--yellow,#ffcd28);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0;justify-self:start}
.phagree{font-size:13.5px;line-height:1.5}

/* ---- v4: both cards (the upload card and the personal-photo card) are more compact: less spacing, a lower drop box, smaller buttons ---- */
.upcard{gap:11px;padding:16px 18px;margin-top:16px}
.upcard .uphead h3{font-size:19px}
.drop{min-height:0;padding:12px 14px}
.dropempty{gap:3px} .dropempty svg{width:26px;height:26px} .dropempty b{font-size:15.5px}
.dropempty small,.dropfull small{font-size:12px}
.dropfull img{width:54px;height:72px}
.upfield{gap:6px} .uplabel{font-size:13px}
.seg{gap:6px} .seg button{min-height:36px;padding:0 14px;font-size:14px}
.tl{min-height:38px;padding:0 15px;font-size:14.5px}
.upcard .tchips{gap:6px}
.mpick{max-width:176px;gap:5px}
.upcard .chk{font-size:12.5px;line-height:1.4} .upcard .chk input{width:19px;height:19px}
.upcard #tryUp{min-height:46px;font-size:16.5px}
.phbody{gap:9px}

/* the title of the upload card is yellow */
#upForm .uphead h3{color:var(--yellow,#ffcd28)}
/* the ready-made picks come after the cards: a little air above them */
#tryG{margin-top:4px}
.tryctl>h3:first-of-type{margin-top:26px}

/* ---- bigger titles; the "or" link of the personal-photo card (white, big "או") ---- */
#upForm .uphead h3{font-size:25px;line-height:1.25}
.phtxt b{font-size:22px;line-height:1.25}
#phOwnToggle{font-size:19px;line-height:1.3}
#phOwnToggle .or{color:#fff;font-size:30px;font-weight:800;text-decoration:none;display:inline-block;margin-inline-start:2px;vertical-align:-3px}

/* ---------- languages (i18n.js): the switcher, English = left-to-right, Arabic font ---------- */
.lang{display:flex;gap:6px;align-items:center;margin-inline-start:auto}
.lang button{--s:24px;width:var(--s);height:var(--s);padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);background:#1d1d24;color:#fff;cursor:pointer;overflow:hidden;display:grid;place-items:center;
 font:800 13px/1 "Segoe UI",Tahoma,Arial,sans-serif;opacity:.8}
.lang button:hover{opacity:1} .lang button[aria-pressed=true]{border-color:var(--yellow);opacity:1;box-shadow:0 0 0 2px rgba(255,201,51,.3)}
.lang button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.lang svg{width:100%;height:100%;display:block}
.lang .mix{position:relative;display:block;width:100%;height:100%} .lang .mix svg{position:absolute;inset:0;opacity:.4} .lang .mix b{position:absolute;right:3px;top:44%;transform:translateY(-50%);font-weight:800;font-size:11px;line-height:1;text-shadow:0 0 3px #000,0 0 3px #000,0 0 2px #000}      /* the letter sits at the right edge, so the Star of David in the middle stays visible (computer: as it was) */
@media (max-width:760px){ .lang button{--s:28px} nav .lang{gap:6px} .lang .mix b{position:absolute;right:calc(var(--s,24px)*.06);top:43%;transform:translateY(-50%);font-weight:900;font-size:calc(var(--s,24px)*.7);line-height:1;color:#fff;-webkit-text-stroke:.35px #fff;text-shadow:0 0 2px #000,0 0 3px #000,0 1px 4px #000} }      /* phone and menu: the Arabic letter is bigger and bolder (the owner liked it there) */

html[lang=ar] body, html[lang=ar] button, html[lang=ar] input, html[lang=ar] select, html[lang=ar] .pill, html[lang=ar] .pick button, html[lang=ar] .stats b, html[lang=ar] .step .n{font-family:"Noto Sans Arabic",Heebo,"Segoe UI",Arial,sans-serif}
html[lang=ar] *{letter-spacing:0!important}        /* Arabic letters join: the tight letter-spacing of the Hebrew design would break them apart */
html[lang=ar] body{line-height:1.75}
html[lang=ar] h1{line-height:1.25}
html[lang=en] h1{font-size:68px;letter-spacing:-2px}

/* English: the hero text sits on the LEFT, the gallery on the right (the Hebrew design is the mirror image) */
html[dir=ltr] .hero-shade{background:linear-gradient(90deg,rgba(24,15,12,.82) 0%,rgba(24,15,12,.62) 45%,rgba(24,15,12,.3) 100%),linear-gradient(rgba(0,0,0,.45),transparent 22%),linear-gradient(transparent 72%,rgba(13,13,18,.95))}
html[dir=ltr] .hero-text{margin-right:0;margin-left:max(24px,calc((100vw - 1320px)/2 + 48px))}
html[dir=ltr] .hero-gal{margin-left:0;margin-right:-40px;transform:rotate(7deg) scale(1.08)}
html[dir=ltr] .hintline{letter-spacing:0}
@media (max-width:760px){
 html[dir=ltr] .hero-shade{background:linear-gradient(rgba(24,15,12,.82),rgba(24,15,12,.55) 55%,rgba(13,13,18,.92))}
 html[dir=ltr] .hero-text{margin-left:0;margin-right:0}
 html[dir=ltr] .hero-gal{margin-right:0}
 html[lang=en] h1{font-size:46px}
}

/* ---------- the floating explanation ("three ways to use it"): a window that follows hover / keyboard focus, and a tap on a touch screen ---------- */
[data-tip]{cursor:help}
.tip{position:fixed;z-index:60;width:max-content;max-width:min(380px,calc(100vw - 24px));background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:#17171d;border-radius:16px;padding:16px 20px 12px;box-shadow:0 18px 50px rgba(0,0,0,.45);font-size:15px;line-height:1.55;border-top:5px solid var(--yellow)}
.tip[data-glass=dark]{background:rgba(22,22,28,.7);color:#fff;border:1px solid rgba(255,255,255,.18);border-top:5px solid var(--yellow)} .tip[data-glass=dark] h4{color:#fff} .tip[data-glass=dark] a:hover,.tip[data-glass=dark] a:focus-visible{background:rgba(255,201,51,.26);color:#fff}
.tip::before,.tip::after{content:"";position:absolute;left:0;right:0;height:16px}      /* an invisible bridge over the gap to the element: the pointer can travel from the link into the window without it closing */
.tip::before{top:-16px} .tip::after{bottom:-16px}
.tip a{display:block;color:inherit;text-decoration:none;padding:6px 10px;margin:0 -10px;border-radius:10px} .tip a:hover,.tip a:focus-visible{background:rgba(255,201,51,.42);outline:none}
.flash{animation:vmflash 1.6s ease-out}
@keyframes vmflash{0%{box-shadow:0 0 0 0 rgba(255,201,51,.95)}60%{box-shadow:0 0 0 14px rgba(255,201,51,.28)}100%{box-shadow:0 0 0 22px rgba(255,201,51,0)}}
#upForm,#phForm{scroll-margin-top:24px}
@media (prefers-reduced-motion:reduce){.flash{animation:none;outline:3px solid var(--yellow)}}
.tip[hidden]{display:none}
.tip h4{font-size:17px;font-weight:800;margin:0 0 8px;color:#17171d}
.tip ol{margin:0;padding-inline-start:22px} .tip li{margin-bottom:7px;font-weight:500}
.tipbtn{display:inline-grid;place-items:center;width:22px;height:22px;margin-inline-start:8px;vertical-align:middle;border-radius:50%;border:1.5px solid currentColor;background:transparent;color:var(--gold);font:700 13px/1 Heebo,Arial,sans-serif;cursor:help;padding:0}
.tipbtn:focus-visible,[data-tip]:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
html[lang=ar] .tip{font-family:"Noto Sans Arabic",Heebo,Arial,sans-serif;line-height:1.75}

/* ---------- the phone menu: a round yellow button fixed in the lower corner (where the thumb is) that opens a glass panel upward ---------- */
.menubtn{display:none;position:fixed;z-index:80;bottom:18px;inset-inline-end:16px;flex:none;box-sizing:border-box;width:54px;height:54px;margin:0;padding:0;border:0;border-radius:50%;background:var(--yellow);box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;transition:transform .15s}
.menubtn i{display:block;width:20px;height:2.4px;border-radius:2px;background:#17171d;transition:transform .2s,opacity .2s}
.menubtn:active{transform:scale(.94)} .menubtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.menubtn[aria-expanded=true] i:nth-child(1){transform:translateY(7.4px) rotate(45deg)} .menubtn[aria-expanded=true] i:nth-child(2){opacity:0} .menubtn[aria-expanded=true] i:nth-child(3){transform:translateY(-7.4px) rotate(-45deg)}
.mpanel{position:fixed;z-index:70;inset-inline:12px;bottom:84px;max-height:70vh;overflow:auto;background:rgba(22,22,28,.78);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
 color:#fff;border:1px solid rgba(255,255,255,.18);border-top:5px solid var(--yellow);border-radius:18px;padding:14px 18px 10px;box-shadow:0 22px 60px rgba(0,0,0,.55);font-size:16px}
.mpanel[hidden]{display:none}
.mpanel .mtitle{font-size:19px;font-weight:800;padding-bottom:0!important;min-height:0!important}
.mpanel .msub{font-size:14px;color:rgba(255,255,255,.7);margin:0 0 4px}
.mpanel ol{margin:0 0 6px;padding-inline-start:22px} .mpanel li{margin-bottom:2px}
.mpanel a{display:block;color:inherit;text-decoration:none;padding:10px 10px;margin:0 -10px;border-radius:10px;min-height:44px;line-height:1.4}
.mpanel a:hover,.mpanel a:focus-visible,.mpanel a:active{background:rgba(255,201,51,.26);outline:none}
.mpanel nav{display:block;position:static;padding:8px 0 0;margin-top:6px;border-top:1px solid rgba(255,255,255,.16);font-weight:600}
.mpanel .lang{display:none;margin:8px 0 4px;padding-top:12px;border-top:1px solid rgba(255,255,255,.16)}
.mpanel .lang button{--s:36px}
@media (max-width:760px){ .menubtn{display:flex} html[data-lang-in-menu] nav .lang{display:none} html[data-lang-in-menu] .mpanel .lang{display:flex} }      /* data-lang-in-menu: the language buttons live in the menu, not in the top row */
@media (min-width:761px){ .mpanel,.menubtn{display:none!important} }
html[lang=ar] .mpanel{font-family:"Noto Sans Arabic",Heebo,Arial,sans-serif}
@media (max-width:340px){ nav{padding:12px 12px;gap:8px} .logo{font-size:36px} .lang{gap:4px} .lang button{--s:26px} }      /* the smallest phones (320 px) */      /* the smallest phones (320 px) */

/* ---------- narrow screens (2026-11-02): the gallery's pause bar wraps instead of sticking out, and the hero text stays inside the screen between a phone and a wide laptop ---------- */
.lookbar{display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-top:36px}
.lookbar .dots{flex:1 1 200px;min-width:0;margin:0} .lookbar .dots i{flex:1 1 0;max-width:34px;min-width:10px}
@media (min-width:761px){
 .hero-text{margin-right:max(24px,calc((100vw - 1320px)/2 + 48px))}                                                          /* was a negative margin below 1320 px: the text was pushed out of the screen */
 html[dir=ltr] .hero-text{margin-right:0;margin-left:max(24px,calc((100vw - 1320px)/2 + 48px))}
}
@media (min-width:761px) and (max-width:1319px){ h1,html[lang=en] h1{font-size:clamp(40px,6vw,76px)} html[lang=en] h1{font-size:clamp(40px,6vw,68px)} }      /* the title shrinks with the screen */

/* ---------- tablet (761-1100 px): the hero is stacked like on a phone (text first, the gallery as a band under it) instead of two cramped columns ---------- */
@media (min-width:761px) and (max-width:1100px){
 .hero{display:block;min-height:0;padding-bottom:34px}
 .hero-shade,html[dir=ltr] .hero-shade{background:linear-gradient(rgba(24,15,12,.82),rgba(24,15,12,.55) 55%,rgba(13,13,18,.92))}
 .hero-text,html[dir=ltr] .hero-text{margin:0;padding:118px 48px 20px;max-width:none}
 .lead{max-width:640px}
 .stats{max-width:620px}
 .hero-gal,html[dir=ltr] .hero-gal{height:430px;margin:16px 0 0;transform:rotate(-4deg) scale(1.1)}
 .col{width:176px;gap:14px}
 .tickwrap{margin-top:-10px}
}