/* NIYA — site V1.1. Layout: white studio page, free grid like a gallery wall, media does the talking. */
:root{
  --bg:#FFFFFF; --ink:#0D0F1F; --klein:#002FA7; --chaux:#F1ECE3; --muted:#0D0F1F;
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif","Times New Roman",serif;
  --pad:clamp(20px,3.2vw,56px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.wrap{padding-left:max(var(--pad),env(safe-area-inset-left,0px));padding-right:max(var(--pad),env(safe-area-inset-right,0px))}
i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none}

/* header: no bar, adapts to whatever is under it */
.hd{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding-top:calc(24px + env(safe-area-inset-top,0px));color:#F2F0E0;mix-blend-mode:difference;pointer-events:none}
.hd a{pointer-events:auto}
.hd .mono{height:44px;width:auto;display:block}
.hd nav{display:flex;gap:clamp(20px,3.4vw,52px);font-size:16px}
.lang{position:relative;pointer-events:auto}
.lang button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.lang .lm{position:absolute;inset-inline-end:0;top:calc(100% + 14px);display:none;flex-direction:column;gap:8px;text-align:right;white-space:nowrap}
.lang.open .lm{display:flex}
.lang .lm a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.hd nav a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* hero */
.hero{height:100svh;min-height:520px;position:relative;overflow:hidden;background:var(--ink)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* section titles */
.st{font-family:var(--serif);font-style:italic;font-size:clamp(34px,3.6vw,60px);font-weight:400;letter-spacing:-.01em;line-height:1;margin-bottom:clamp(28px,3.5vw,56px)}
section{padding-bottom:clamp(110px,13vw,200px)}

/* statement */
.statement{padding-block:clamp(150px,17vw,300px)!important}
.statement h1{display:flex;flex-direction:column;gap:.06em;font-weight:300;font-size:clamp(36px,11.5vw,250px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase}
.statement .row{white-space:nowrap;display:flex;align-items:center;gap:.16em}
.statement .row.r{justify-content:flex-end}
.statement .row:last-child::before{content:'';flex:1}.statement .row:last-child::after{content:'';flex:3}
.statement.c3 .row:last-child{justify-content:center}.statement.r3 .row:last-child{justify-content:flex-end}
.statement h1 i{font-size:1.06em;letter-spacing:-.02em}
.chip{display:inline-block;height:.8em;aspect-ratio:16/9;overflow:hidden;flex:none}
.chip img,.chip video{width:100%;height:100%;object-fit:cover}

/* intro */
.intro{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad)}
.intro .st{grid-column:1/5}
.intro p{grid-column:5/12;font-size:clamp(24px,2.6vw,40px);line-height:1.2;letter-spacing:-.02em}
.more{display:inline-block;margin-top:30px;font-size:16px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* services */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad);text-align:center}
.svc p{margin-inline:auto}
.svc a.ex{display:block;margin-bottom:22px;overflow:hidden;aspect-ratio:4/5;background:#f2f2f2}
.svc a.ex img,.svc a.ex video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.svc a.ex:hover img,.svc a.ex:hover video{transform:scale(1.03)}
.svc .see{display:inline-block;margin-top:14px;font-size:16px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.svc h3{font-weight:300;font-size:clamp(24px,2.2vw,36px);letter-spacing:-.02em;line-height:1.05;margin-bottom:14px}
.svc p{color:var(--muted);max-width:30ch}

/* work: gallery wall */
.wall{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--pad);row-gap:clamp(90px,11vw,180px);align-items:start}
.w{display:block}
.w .m{overflow:hidden;background:#f2f2f2}
.w .m img,.w .m video{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.w:hover .m img,.w:hover .m video{transform:scale(1.025)}
.w .t{margin-top:14px;font-size:18px;font-weight:500;letter-spacing:-.01em}
.w .k{font-size:16px;color:var(--muted);line-height:1.35}
.z1{grid-column:1/8}.z2{grid-column:10/13;margin-top:12vw}.z3{grid-column:2/7}.z4{grid-column:8/11;margin-top:4vw}.z5{grid-column:4/7}.z6{grid-column:8/13;margin-top:8vw}.z7{grid-column:1/4;margin-top:4vw}.z8{grid-column:6/11;margin-top:14vw}.z9{grid-column:2/7}.z10{grid-column:10/13;margin-top:10vw}.z11{grid-column:5/9}
.a1{grid-column:1/8}.a2{grid-column:9/13;margin-top:22vw}
.a3{grid-column:3/7}.a4{grid-column:8/12;margin-top:6vw}
.a5{grid-column:1/13}
.a6{grid-column:2/6;margin-top:4vw}.a7{grid-column:8/12;margin-top:16vw}.a8{grid-column:3/7;margin-top:2vw}.a9{grid-column:8/13;margin-top:12vw}.a10{grid-column:1/6;margin-top:4vw}.a11{grid-column:7/11;margin-top:14vw}.a12{grid-column:3/8;margin-top:4vw}
.r45{aspect-ratio:4/5}.r916{aspect-ratio:9/16}.r169{aspect-ratio:16/9}.r21{aspect-ratio:21/9}.r34{aspect-ratio:3/4}
.allwork{display:flex;justify-content:flex-end;margin-top:clamp(50px,6vw,90px)}

/* process: precise timeline, one row per step */
.proc{display:grid}
.step{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad);align-items:baseline;padding-block:clamp(22px,2.4vw,36px)}
.step h3{display:flex;align-items:baseline;gap:clamp(24px,4vw,72px);font-weight:300;font-size:clamp(34px,3.6vw,60px);letter-spacing:-.04em;line-height:1}
.step .when{font-size:16px;letter-spacing:0;min-width:2ch}
.step p{max-width:44ch}
.proc-note{margin-top:clamp(50px,6vw,90px);font-size:clamp(22px,2.2vw,34px);line-height:1.2;letter-spacing:-.02em;max-width:30ch}
.proc-note i{font-size:1.08em}

/* footer, Bonjour-style */
.ft{position:relative;isolation:isolate;background:var(--klein);color:var(--chaux);padding-top:clamp(70px,9vw,140px);padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.ftbg{position:absolute;left:0;top:-15.1vw;width:100%;height:auto;min-height:calc(100% + 15.1vw);object-fit:cover;object-position:50% 0%;filter:grayscale(1) brightness(1.25) contrast(1.15);mix-blend-mode:screen;opacity:.85;z-index:-1}
.ft .cta{max-width:min(31vw,520px);font-weight:300;font-size:clamp(34px,3.6vw,64px);line-height:.98;letter-spacing:-.045em;margin-bottom:clamp(70px,8vw,130px)}
.ft .cta i{font-size:1.06em;letter-spacing:-.01em}
.ft .cols{display:grid;grid-template-columns:1fr auto auto;column-gap:clamp(40px,5vw,96px)}
.ft h4{font-weight:400;font-size:16px;opacity:.7;margin-bottom:22px}
.ft .reach a{font-size:clamp(20px,1.8vw,30px);letter-spacing:-.02em;line-height:1.1;text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
.ft ul{list-style:none}
.ft li{margin-bottom:8px}
.ft li a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.ft{overflow:hidden}
.ft .giant{display:block;width:calc(100% - 2*var(--pad));margin:clamp(60px,8vw,120px) auto calc(-1 * clamp(10px,1.2vw,22px));color:var(--chaux)}
.ft .base{display:flex;justify-content:space-between;gap:20px;margin-top:clamp(80px,10vw,160px);font-size:14px;opacity:.75}

/* page tops */
.pagetop{padding-top:clamp(150px,15vw,220px);padding-bottom:clamp(50px,6vw,90px)}
.pagetop h1{text-align:center;font-weight:300;font-size:clamp(56px,11vw,200px);line-height:.9;letter-spacing:-.05em}

/* project page */
.ph{padding-top:clamp(140px,14vw,200px);padding-bottom:clamp(30px,4vw,60px);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);align-items:end}
.ph h1{grid-column:1/9;font-weight:300;font-size:clamp(44px,7vw,128px);line-height:.92;letter-spacing:-.045em}
.ph .meta{grid-column:10/13;font-size:16px;color:var(--muted);line-height:1.45}
.cover{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.pbody{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pad);padding-top:clamp(70px,8vw,130px)}
.pbody .lead{grid-column:1/7;font-size:clamp(26px,2.8vw,44px);line-height:1.15;letter-spacing:-.02em}
.pbody .txt{grid-column:8/13;color:var(--ink)}
.pbody .txt p+p{margin-top:1em}
.pbody .note{margin-top:1.4em;color:var(--muted);font-size:15px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--pad)}
.pair img,.pair video{width:100%;aspect-ratio:4/5;object-fit:cover}
.pair.nat img{aspect-ratio:auto;height:auto}
.solo{max-width:min(760px,100%);margin-inline:auto}.solo video,.solo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.film{max-width:1180px;margin-inline:auto;width:100%}
.film video{width:100%;aspect-ratio:16/9;background:#000}
.stills{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,20px)}
.stills img{width:100%;aspect-ratio:16/9;object-fit:cover}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,20px)}
.trio img{width:100%;aspect-ratio:4/5;object-fit:cover}
.trio.t916 img{aspect-ratio:9/16}
.pkgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,1.2vw,20px)}.pkgrid img{grid-column:span 2;width:100%;aspect-ratio:4/5;object-fit:cover}.pkgrid img:nth-last-child(2){grid-column:2/4}
.full img{width:100%;object-fit:cover}
.stack{display:grid;gap:var(--pad)}
.next{display:block;padding-top:clamp(40px,5vw,80px)}
.next span{display:block;font-size:16px;color:var(--muted)}
.next b{font-weight:300;font-size:clamp(40px,7vw,120px);letter-spacing:-.045em;line-height:.95}

/* about: one sentence rises from the bottom, sharp at centre, fades out above */
.pin{position:relative;padding:0}
.stick{position:sticky;top:0;height:100svh;overflow:hidden}
.para{position:absolute;left:50%;top:50%;width:min(980px,86vw);text-align:center;font-size:clamp(28px,3.2vw,52px);line-height:1.2;letter-spacing:-.02em;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity,filter}
.para i{font-size:1.08em}
.hello{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--sans),"IBM Plex Sans Arabic","Noto Sans SC",sans-serif;font-weight:300;font-size:clamp(28px,3.2vw,52px);letter-spacing:-.02em;opacity:0;pointer-events:none}
.p3{opacity:0;transition:opacity .45s}
.hint{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-size:15px;transition:opacity .4s;opacity:0}.hint.on{opacity:1}
.rv .wd{color:#c9c9cf;transition:color .3s}
.rv .wd.lit{color:var(--ink)}

/* contact */
.contact{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:150px;padding-bottom:90px}
.contact a{display:block;width:max-content;max-width:100%;font-weight:300;font-size:clamp(48px,9vw,168px);line-height:1;letter-spacing:-.05em}
.contact a:hover{color:var(--klein)}

@media (max-width:820px){
  .intro .st,.intro p{grid-column:1/-1}
  .svc{grid-template-columns:1fr 1fr;gap:48px 20px}.proc{grid-template-columns:1fr;gap:56px}
  .step{grid-template-columns:1fr;gap:12px}
  .z1,.z3,.z6,.z8,.z9{grid-column:1/-1;margin-top:0}.z2,.z4,.z5,.z7,.z10,.z11{grid-column:3/-1;margin-top:0}
  .a1,.a2,.a3,.a4,.a5{grid-column:1/-1;margin-top:0}
  .a6,.a7,.a8,.a9,.a10,.a11,.a12{grid-column:1/-1;margin-top:0}
  .stills,.trio{grid-template-columns:1fr 1fr}
  .pkgrid{grid-template-columns:1fr 1fr}.pkgrid img,.pkgrid img:nth-last-child(2){grid-column:auto}
  .ft .cols{grid-template-columns:1fr 1fr;row-gap:36px}.ft .reach{grid-column:1/-1}
  .hero video{object-position:50% 30%}
  .ph h1,.ph .meta,.pbody .lead,.pbody .txt{grid-column:1/-1}
  .pair{grid-template-columns:1fr}
  .stills{grid-template-columns:1fr 1fr}
  .hd .mono{height:36px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
:focus-visible{outline:2px solid var(--klein);outline-offset:3px}

/* languages */
.i18n-wait body{visibility:hidden}
[dir=rtl] body{font-family:"IBM Plex Sans Arabic",var(--sans)}
[dir=rtl] *{letter-spacing:0!important}
[dir=rtl] i{font-family:inherit;font-style:normal;font-weight:500}
[dir=rtl] .lang .lm{text-align:start}
[dir=rtl] .reach a,[dir=rtl] .base span:first-child{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .statement h1{line-height:1.15}
.statement h1.measure .row{justify-content:flex-start!important;flex-direction:row!important}.statement h1.measure .row::before,.statement h1.measure .row::after{display:none}

/* mobile */
.burger,.mnav{display:none}
@media (max-width:820px){
  .hd nav{display:none}
  .burger{display:flex;flex-direction:column;justify-content:center;gap:7px;width:36px;height:36px;padding:0;background:none;border:0;cursor:pointer;pointer-events:auto;color:inherit}
  .burger span{display:block;height:1.5px;width:100%;background:currentColor;transition:transform .3s}
  .menu-open .burger span:first-child{transform:translateY(4.25px) rotate(45deg)}.menu-open .burger span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
  .mnav{display:flex;position:fixed;inset:0;z-index:19;background:#fff;color:var(--ink);flex-direction:column;justify-content:flex-end;padding:0 max(var(--pad),env(safe-area-inset-left,0px)) calc(40px + env(safe-area-inset-bottom,0px))}
  .mnav[hidden]{display:none}
  .mlinks{display:flex;flex-direction:column;gap:6px;margin-bottom:60px}
  .mlinks a{font-weight:300;font-size:13vw;line-height:1.1;letter-spacing:-.04em}
  .mlang{display:flex;gap:22px;font-size:15px}.mlang a[aria-current]{text-decoration:underline;text-underline-offset:5px}
  .menu-open{overflow:hidden}.menu-open .hd{mix-blend-mode:normal;color:var(--ink);background:#fff!important}
  /* header bar over the hero */
  .hd{padding-bottom:14px;transition:background .3s}
  .bar .hd{mix-blend-mode:normal;background:#000;color:#F2F0E0}
  .menu-open.bar .hd,.menu-open .hd{color:var(--ink);background:#fff}
  .hero{height:auto;min-height:0;aspect-ratio:16/9;margin-top:calc(74px + env(safe-area-inset-top,0px))}
  /* hero 2 under the video, same structure as desktop */
  .statement{min-height:calc(100svh - 74px - 56.25vw);display:flex;align-items:center;padding-block:28px!important}
  .statement h1{width:100%;font-size:12vw;gap:.5em}
  .statement .row{flex-wrap:nowrap}
  /* works: same size, aligned */
  .wall{row-gap:48px}
  .wall .w{grid-column:1/-1!important;margin-top:0!important}
  .wall .w .m{aspect-ratio:4/5}
  .ft .reach a{word-break:break-all}
}
}
@media (min-width:600px) and (max-width:820px){
  .wall{grid-template-columns:1fr 1fr;column-gap:20px}
  .wall .w{grid-column:auto!important}
}