/* ============================================================
   14 · Monochrome Luxe — black & white high-fashion editorial
   Trend: pure b/w, extreme contrast, huge condensed type,
   image-forward lookbook. Luxury, confident, no colour at all.
   ============================================================ */
:root{
  --black:#000; --white:#fff; --off:#f4f3f1; --ink:#0a0a0a; --dim:#6d6d6d; --faint:#9c9c9c;
  --line:rgba(255,255,255,.22); --line-d:#e2e0dc;
  --disp:"Anton",Impact,sans-serif; --body:"Inter",ui-sans-serif,system-ui,sans-serif;
  --pad:clamp(16px,4vw,56px); --ease:cubic-bezier(.22,.61,.36,1);
  --grey-1:linear-gradient(150deg,#2a2a2a,#0a0a0a); --grey-2:linear-gradient(150deg,#5a5a5a,#171717);
  --grey-3:linear-gradient(150deg,#8a8a8a,#333);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--off);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.label{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase}
.cond{font-family:var(--disp);text-transform:uppercase;letter-spacing:.005em;font-weight:400}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px var(--pad);mix-blend-mode:difference;color:#fff}
.nav .brand{font-family:var(--disp);text-transform:uppercase;font-size:22px;letter-spacing:.02em}
.nav .links{display:flex;gap:clamp(10px,2vw,30px)}
.nav .links a{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.nav .links a:hover{text-decoration:underline;text-underline-offset:4px}
.lang{display:inline-flex;gap:0;border:1px solid #fff}
.lang button{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.08em;padding:6px 10px;border:0;background:transparent;color:#fff;cursor:pointer}
.lang button+button{border-left:1px solid #fff}
.lang button[aria-pressed="true"]{background:#fff;color:#000}
@media(max-width:720px){.nav .links a:not(.hide-sm){display:none}}

/* hero — full bleed b/w image */
.hero{position:relative;height:100svh;min-height:560px;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--grey-1);color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 40%,transparent,rgba(0,0,0,.5))}
.hero .ph{position:absolute;top:74px;left:var(--pad);font-family:var(--body);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.hero .inner{position:relative;z-index:1;padding:0 var(--pad)}
.hero .label{color:rgba(255,255,255,.7);margin-bottom:18px}
.hero h1{font-family:var(--disp);text-transform:uppercase;font-size:clamp(58px,17vw,270px);line-height:.82;letter-spacing:.01em}
.hero .role{font-family:var(--body);font-size:clamp(13px,1.5vw,17px);font-weight:500;letter-spacing:.3em;text-transform:uppercase;margin-top:20px;color:rgba(255,255,255,.85)}
.scrollcue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:1;font-family:var(--body);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6)}

/* statement */
.statement{padding:clamp(60px,11vw,150px) 0;text-align:center}
.statement p{font-family:var(--disp);text-transform:uppercase;font-size:clamp(30px,6vw,88px);line-height:.98;letter-spacing:.005em;max-width:16ch;margin:0 auto}
.statement p .thin{font-family:var(--body);text-transform:none;font-weight:300;font-style:italic;letter-spacing:-.01em}

/* lookbook rows */
.section{padding:clamp(48px,7vw,110px) 0}
.sec-title{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-top:1px solid var(--line-d);padding-top:16px;margin-bottom:clamp(24px,3vw,44px)}
.sec-title h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(30px,5vw,66px);letter-spacing:.01em}
.sec-title span{font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.look{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px)}
.look .item{position:relative;overflow:hidden;background:var(--grey-2)}
.look .item .img{width:100%;height:100%;min-height:260px;background:inherit;transition:transform .9s var(--ease);filter:grayscale(1)}
.look .item:hover .img{transform:scale(1.05)}
.look .item .cap{position:absolute;left:0;right:0;bottom:0;padding:18px;display:flex;justify-content:space-between;align-items:end;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.look .item .cap h3{font-family:var(--disp);text-transform:uppercase;font-size:clamp(18px,2vw,26px);letter-spacing:.01em}
.look .item .cap span{font-family:var(--body);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.look .item .num{position:absolute;top:14px;left:14px;font-family:var(--body);font-size:10px;letter-spacing:.2em;color:rgba(255,255,255,.5)}
.look .a{grid-column:span 7;aspect-ratio:4/3}
.look .b{grid-column:span 5;background:var(--grey-3)}
.look .c{grid-column:span 5;background:var(--grey-3);aspect-ratio:4/5}
.look .d{grid-column:span 7;background:var(--grey-2);aspect-ratio:16/10}
@media(max-width:760px){.look .a,.look .b,.look .c,.look .d{grid-column:span 12;aspect-ratio:4/3}}

/* about + services */
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center;background:var(--black);color:var(--white);padding:clamp(36px,6vw,90px) var(--pad);margin:clamp(48px,7vw,100px) 0}
@media(max-width:760px){.about{grid-template-columns:1fr}}
.about .big{font-family:var(--disp);text-transform:uppercase;font-size:clamp(34px,5vw,80px);line-height:.92;letter-spacing:.01em}
.about p{color:#c9c9c9;margin-bottom:16px;max-width:46ch}
.about .services{display:grid;gap:0;margin-top:8px}
.about .services div{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.about .services div:last-child{border-bottom:1px solid var(--line)}
.about .services .s{font-family:var(--disp);text-transform:uppercase;font-size:clamp(16px,2vw,22px)}
.about .services .n{font-family:var(--body);font-size:12px;letter-spacing:.14em;color:var(--faint)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
@media(max-width:640px){.stats{grid-template-columns:1fr 1fr}}
.stats .n{font-family:var(--disp);font-size:clamp(40px,6vw,80px);line-height:.9}
.stats .l{font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-top:10px}

/* contact */
.contact{text-align:center;padding:clamp(60px,10vw,150px) 0}
.contact h2{font-family:var(--disp);text-transform:uppercase;font-size:clamp(44px,12vw,190px);line-height:.84;letter-spacing:.01em}
.contact .mail{font-family:var(--body);font-size:clamp(15px,2vw,20px);letter-spacing:.06em;border-bottom:1px solid var(--ink);padding-bottom:3px}
.contact .row{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.contact .row a{font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.contact .row a:hover{color:var(--ink)}
.foot{border-top:1px solid var(--line-d);padding:18px var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:var(--body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.tpl-note{text-align:center;font-family:var(--body);font-size:12px;color:var(--faint);font-style:italic;margin-top:20px}

html.js [data-rise]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js [data-rise].in{opacity:1;transform:none}
html.js [data-rise][data-d="1"]{transition-delay:.1s}html.js [data-rise][data-d="2"]{transition-delay:.2s}html.js [data-rise][data-d="3"]{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}html.js [data-rise]{opacity:1;transform:none;transition:none}}