/* Concept: a dark screening room. The work is the light source — every page takes its colour from the client's own brand. */
:root{
  --bg:#0c0c0d; --fg:#f2f1ec; --mute:#8e8d88; --line:#26262a; --surface:#151518; --brand:#f2f1ec; --on-brand:#0c0c0d;
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --gl:max(16px, env(safe-area-inset-left,0px)); --gr:max(16px, env(safe-area-inset-right,0px));
  --ease:cubic-bezier(.16,.84,.2,1);
  color-scheme:dark;
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .25s ease both}
::view-transition-new(root){animation:vt-in .45s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0; transform:translateY(14px)}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--bg)}
img,video{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--fg); outline-offset:3px}
html[data-lang="fr"] [lang="en"], html[data-lang="en"] [lang="fr"]{display:none !important}
.wrap{padding-left:var(--gl); padding-right:var(--gr); max-width:1600px; margin:0 auto}
.num{font-variant-numeric:tabular-nums}
.mute{color:var(--mute)}

/* nav */
.nav{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; z-index:50; color:#fff; background:linear-gradient(rgba(0,0,0,.35), transparent); transition:background .3s}
.nav.solid{background:rgba(12,12,13,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.nav .wrap{display:flex; align-items:center; gap:clamp(14px,2.4vw,32px); padding-block:18px}
.nav a{text-decoration:none}
.brandmark{font-family:var(--display); font-weight:800; letter-spacing:-.045em; font-size:22px; line-height:1; white-space:nowrap}

.links{display:flex; gap:clamp(14px,2vw,28px); margin-left:auto; font-size:14px; font-weight:500}
.links a{opacity:.7; transition:opacity .2s}
.links a:hover,.links a[aria-current="page"]{opacity:1}
.langs{display:flex; gap:2px; font-size:12px; font-weight:600}
.langs button{all:unset; cursor:pointer; padding:4px 8px; border-radius:999px; opacity:.55}
.langs button[aria-pressed="true"]{opacity:1; background:#fff; color:#000}
@media (max-width:760px){.links{display:none} .langs{margin-left:auto}}

/* custom cursor */
.cursor{position:fixed; left:0; top:0; z-index:70; pointer-events:none; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#fff; mix-blend-mode:difference;
  display:grid; place-items:center; transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease); font:600 12px/1 var(--body); color:#000}
.cursor span{opacity:0; transition:opacity .2s}
.cursor.big{width:84px; height:84px; margin:-42px 0 0 -42px; mix-blend-mode:normal}
.cursor.big span{opacity:1}
@media (hover:none), (pointer:coarse){.cursor{display:none}}

/* ---------- home ---------- */
.hero{padding-top:clamp(96px,14vw,170px)}
.title{font-family:var(--display); text-transform:uppercase; font-weight:800; letter-spacing:-.065em; line-height:.8; margin:0;
  font-size:clamp(72px,24.5vw,420px); display:grid}
.title span{display:block; overflow:hidden; padding-bottom:.035em}
.title span:last-child{font-weight:300; letter-spacing:-.055em; justify-self:end; margin-top:-.02em}
.title i{display:inline-block; font-style:normal; animation:rise 1.1s var(--ease) both}
.title span:last-child i{animation-delay:.1s}
@media (max-width:600px){.title{font-size:21.5vw}}
@keyframes rise{from{transform:translateY(105%)}}
.hero-foot{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; margin-top:clamp(20px,3vw,40px)}
.hero-foot p{margin:0; font-size:clamp(18px,1.9vw,26px); line-height:1.3; max-width:30em; letter-spacing:-.01em; text-wrap:pretty}
.hero-foot p b{font-weight:600}
.status{display:grid; gap:6px; justify-items:end; font-size:13px; color:var(--mute); text-align:right}
.status .live{color:var(--fg)}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:#3ddc84; margin-right:8px; vertical-align:1px; animation:blink 2s infinite}
@keyframes blink{50%{opacity:.35}}
@media (max-width:760px){.hero-foot{grid-template-columns:1fr} .status{justify-items:start; text-align:left}}

.wall{margin-top:clamp(40px,6vw,80px); display:grid; gap:clamp(8px,1vw,14px); overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)}
.row{display:flex; gap:clamp(8px,1vw,14px); width:max-content; animation:slide var(--dur,60s) linear infinite}
.row.rev{animation-direction:reverse}
.wall:hover .row{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tile{flex:none; height:clamp(150px,19vw,290px); border-radius:10px; overflow:hidden; background:var(--surface); position:relative}
.tile img,.tile video{height:100%; width:100%; max-width:none; object-fit:cover}
.tile.pad{display:grid; place-items:center; padding:0 clamp(24px,3vw,48px)}
.tile.pad img{height:34%; width:auto}
@media (prefers-reduced-motion:reduce){.row{animation:none} .wall{overflow-x:auto}}

.lab{font-size:13px; color:var(--mute); display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:14px}
.sec{padding-top:clamp(90px,12vw,170px)}
.sec-title{font-family:var(--display); font-size:clamp(40px,7vw,104px); line-height:.9; letter-spacing:-.05em; font-weight:700; margin:18px 0 0; max-width:14em; text-wrap:balance}

.stack{display:grid; gap:clamp(14px,2vw,24px); margin-top:clamp(28px,4vw,52px)}
.card{position:sticky; top:clamp(70px,9vh,96px); display:block; text-decoration:none; color:#fff; border-radius:16px; overflow:hidden;
  height:min(78vh,720px); min-height:420px; background:var(--c,#222); isolation:isolate; box-shadow:0 -20px 50px rgba(0,0,0,.45)}
.card .media{position:absolute; inset:0; z-index:-1}
.card .media img,.card .media video{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.card:hover .media img,.card:hover .media video{transform:scale(1.035)}
.card::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.45), transparent 30%, transparent 55%, rgba(0,0,0,.7))}
.card .top{position:absolute; top:clamp(18px,2.4vw,32px); left:clamp(18px,2.4vw,32px); right:clamp(18px,2.4vw,32px); display:flex; justify-content:space-between; align-items:center; gap:16px}
.card .logo{height:clamp(26px,3vw,40px); width:auto}
.wm{font-family:var(--display); font-weight:800; font-size:clamp(22px,2.6vw,34px); letter-spacing:-.03em; line-height:1}
.card .count{font-size:13px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.14); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); white-space:nowrap}
.card .bottom{position:absolute; left:clamp(18px,2.4vw,32px); right:clamp(18px,2.4vw,32px); bottom:clamp(18px,2.4vw,32px); display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px}
.card h3{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(56px,10vw,170px); line-height:.82; letter-spacing:-.06em}
.card p{margin:12px 0 0; font-size:clamp(15px,1.3vw,18px); opacity:.9; max-width:30em}
.card .go{width:clamp(52px,5vw,72px); aspect-ratio:1; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; font-size:22px; transition:transform .4s var(--ease)}
.card:hover .go{transform:rotate(-45deg)}
.card.kleero .media{display:grid; place-items:center; background:radial-gradient(120% 90% at 70% 10%, #10204d 0%, #040a1c 60%)}
.fan{display:flex; gap:clamp(10px,1.5vw,22px); transform:rotate(-6deg) translateY(4%)}
.fan img{width:clamp(110px,13vw,210px); height:auto !important; border-radius:10px; box-shadow:0 30px 60px rgba(0,0,0,.5)}
.fan img:nth-child(2){transform:translateY(-10%)}
@media (max-width:640px){.fan img:nth-child(3){display:none}}

.about{display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.6fr); gap:clamp(24px,5vw,80px); margin-top:clamp(28px,4vw,52px); align-items:start}
.portrait{border-radius:14px; overflow:hidden; aspect-ratio:4/5; background:var(--surface)}
.portrait img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05)}
.about-text{display:grid; gap:clamp(24px,3vw,40px)}
.about-text > p{margin:0; font-family:var(--display); font-size:clamp(24px,3vw,42px); line-height:1.15; letter-spacing:-.03em; font-weight:500; text-wrap:pretty}
.about-text > p em{font-style:normal; color:var(--mute)}
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.facts div{background:var(--bg); padding:18px}
.facts b{display:block; font-weight:600; margin-bottom:4px}
.facts small{color:var(--mute); font-size:14px; line-height:1.4; display:block}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font-size:13px; padding:6px 12px; border-radius:999px; border:1px solid var(--line)}
@media (max-width:760px){.about{grid-template-columns:1fr} .portrait{max-width:300px}}

.contact{padding-block:clamp(110px,15vw,220px) 24px}
.contact h2{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(64px,15vw,250px); line-height:.8; letter-spacing:-.065em}
.contact .row2{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:clamp(28px,4vw,48px)}
.pill{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; font-weight:600; text-decoration:none; border:1px solid var(--line); background:none; color:inherit; font:inherit; font-weight:600; cursor:pointer}
.pill.solid{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.pill:hover{border-color:var(--fg)}
.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; border-top:1px solid var(--line); margin-top:clamp(70px,9vw,120px); padding-top:16px; font-size:13px; color:var(--mute)}

/* ---------- section pages ---------- */
.cover{background:var(--brand); color:var(--on-brand); padding-top:clamp(110px,14vw,180px); padding-bottom:clamp(36px,5vw,64px); position:relative; overflow:hidden}
.cover .logo{height:clamp(30px,3.6vw,52px); width:auto}
.cover .wm{font-size:clamp(30px,4vw,56px)}
.cover h1{margin:clamp(36px,6vw,90px) 0 0; font-family:var(--display); font-weight:800; font-size:clamp(56px,11.5vw,190px); line-height:.86; letter-spacing:-.06em; max-width:9em; text-wrap:balance}
.cover .meta{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px; align-items:end; margin-top:clamp(24px,3vw,40px)}
.cover .meta p{margin:0; font-size:clamp(18px,1.8vw,24px); line-height:1.35; max-width:32em}
.jump{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.jump a{font-size:14px; font-weight:600; text-decoration:none; padding:9px 16px; border-radius:999px; border:1px solid currentColor; opacity:.9}
.jump a:hover{background:var(--on-brand); color:var(--brand)}
@media (max-width:760px){.cover .meta{grid-template-columns:1fr} .jump{justify-content:flex-start}}

.proj{padding-top:clamp(80px,11vw,150px)}
.proj-head{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(20px,4vw,64px); align-items:end; margin-bottom:clamp(24px,3vw,40px)}
.proj-head h2{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(44px,7.5vw,120px); line-height:.86; letter-spacing:-.055em; text-wrap:balance}
.proj-head .side{display:grid; gap:14px}
.proj-head .side p{margin:0; font-size:17px; line-height:1.5; color:#d8d7d2; text-wrap:pretty}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{font-size:12px; padding:5px 11px; border-radius:999px; border:1px solid var(--line); color:var(--mute)}
.tag.on{border-color:var(--brand); background:var(--brand); color:var(--on-brand)}
@media (max-width:860px){.proj-head{grid-template-columns:1fr}}

.grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(8px,1vw,14px)}
.f{margin:0; border-radius:12px; overflow:hidden; background:var(--surface); position:relative}
.f img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.f:hover img{transform:scale(1.03)}
.f.contain img{object-fit:contain}
.s12{grid-column:span 12} .s8{grid-column:span 8} .s7{grid-column:span 7} .s6{grid-column:span 6} .s5{grid-column:span 5} .s4{grid-column:span 4} .s3{grid-column:span 3}
@media (max-width:760px){.s8,.s7,.s6,.s5{grid-column:span 12} .s4{grid-column:span 6} .s3{grid-column:span 6}}
.note{grid-column:span 12; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,3vw,48px); padding-block:clamp(28px,4vw,56px)}
.note h4{margin:0 0 8px; font-size:13px; font-weight:600; color:var(--accent,var(--fg))}
.note p{margin:0; color:#cfcec9; font-size:15px}
@media (max-width:760px){.note{grid-template-columns:1fr}}
.cap{position:absolute; left:12px; bottom:12px; font-size:12px; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; backdrop-filter:blur(6px)}

/* before / after */
.ba{grid-column:span 12; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.42fr); gap:clamp(14px,2vw,28px); align-items:center; background:var(--surface); border-radius:12px; padding:clamp(12px,1.6vw,20px)}
.ba-frame{position:relative; border-radius:8px; overflow:hidden; user-select:none; touch-action:pan-y; background:#000}
.ba-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ba-frame .after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-line{position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; margin-left:-1px; background:#fff; pointer-events:none}
.ba-knob{position:absolute; top:50%; left:var(--pos,50%); width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; background:#fff; color:#000; display:grid; place-items:center; font-weight:700; pointer-events:none; box-shadow:0 4px 18px rgba(0,0,0,.4)}
.ba-frame input{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:ew-resize}
.ba-frame:has(input:focus-visible){outline:2px solid #fff; outline-offset:3px}
.ba-lab{position:absolute; top:12px; font-size:12px; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.6); color:#fff; pointer-events:none}
.ba-lab.l{left:12px} .ba-lab.r{right:12px; background:var(--brand); color:var(--on-brand)}
.ba-side{display:grid; gap:14px; align-content:center; padding:8px}
.ba-side h3{margin:0; font-family:var(--display); font-size:clamp(26px,2.6vw,38px); letter-spacing:-.03em; line-height:1}
.ba-side p{margin:0; color:var(--mute); font-size:14px}
.ba-tabs{display:grid; gap:6px}
.ba-tabs button{all:unset; cursor:pointer; padding:11px 14px; border-radius:10px; border:1px solid var(--line); font-size:14px; display:flex; justify-content:space-between}
.ba-tabs button::after{content:"→"; opacity:.4}
.ba-tabs button[aria-selected="true"]{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.ba-tabs button:focus-visible{outline:2px solid #fff}
@media (max-width:860px){.ba{grid-template-columns:1fr}}

/* reels */
.reels{grid-column:span 12; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,1vw,14px)}
.reel{position:relative; margin:0; aspect-ratio:9/16; border-radius:12px; overflow:hidden; background:var(--surface); cursor:pointer}
.reel video{width:100%; height:100%; object-fit:cover}
.reel figcaption{position:absolute; inset:auto 0 0; padding:40px 14px 14px; font-size:13px; line-height:1.3; background:linear-gradient(to top, rgba(0,0,0,.8), transparent)}
.reel figcaption b{display:block; font-weight:600; font-size:14px}
.snd{position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:0; background:rgba(0,0,0,.55); color:#fff; cursor:pointer}
.snd svg{width:16px; height:16px}
.reel.on .snd{background:#fff; color:#000}
@media (max-width:760px){.reels{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:64%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none} .reel{scroll-snap-align:start}}

.yt{grid-column:span 6; display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; text-decoration:none; padding:18px; border-radius:12px; border:1px solid var(--line); transition:border-color .2s, background .2s}
.yt:hover{border-color:var(--fg); background:var(--surface)}
.yt .play{width:46px; height:46px; border-radius:50%; background:#ff0033; display:grid; place-items:center}
.yt .play::before{content:""; border-left:14px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; margin-left:4px}
.yt b{display:block; font-weight:600}
.yt small{color:var(--mute)}
@media (max-width:760px){.yt{grid-column:span 12}}

.site{grid-column:span 12; display:block; text-decoration:none; border-radius:14px; overflow:hidden; border:1px solid var(--line)}
.site .bar{display:flex; align-items:center; gap:6px; padding:12px 16px; background:#1b1b1f; font-size:12px; color:var(--mute)}
.site .bar i{width:10px; height:10px; border-radius:50%; background:#3a3a40}
.site .bar span{margin:0 auto; padding:4px 40px; background:#26262b; border-radius:6px}
.site .screen{display:grid; gap:clamp(18px,2.6vw,32px); justify-items:start; padding:clamp(32px,6vw,96px); background:radial-gradient(110% 120% at 85% 0%, #14295e 0%, #040a1c 55%)}
.site .screen img{width:clamp(100px,10vw,150px); height:auto}
.site .screen strong{font-family:var(--display); font-size:clamp(34px,6vw,92px); line-height:.95; letter-spacing:-.045em; font-weight:700; max-width:11em}
.site .screen .cta{font-size:15px; font-weight:600; padding:12px 20px; border-radius:999px; background:#fff; color:#040a1c}

.next{display:block; text-decoration:none; padding-top:clamp(100px,13vw,190px)}
.next small{display:block; font-size:13px; color:var(--mute); border-top:1px solid var(--line); padding-top:14px; margin-bottom:12px}
.next b{display:flex; justify-content:space-between; align-items:end; font-family:var(--display); font-weight:800; font-size:clamp(64px,14vw,230px); line-height:.8; letter-spacing:-.065em; transition:color .3s}
.next:hover b{color:var(--nb,#fff)}

/* lightbox */
dialog.lb{border:0; padding:0; background:transparent; width:100vw; height:100vh; max-width:100vw; max-height:100vh}
dialog.lb::backdrop{background:rgba(0,0,0,.94)}
dialog.lb .in{width:100%; height:100%; display:grid; place-items:center; padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
dialog.lb img{max-width:100%; max-height:calc(100vh - 60px); object-fit:contain; border-radius:6px}
dialog.lb button{position:fixed; top:max(16px,env(safe-area-inset-top,0px)); right:max(16px,env(safe-area-inset-right,0px)); width:44px; height:44px; border-radius:50%; border:0; background:#fff; color:#000; font-size:22px; cursor:pointer}

@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important; scroll-behavior:auto !important} @view-transition{navigation:none}}

.site .shot{width:100%; height:auto; display:block}
.phones{display:flex; gap:clamp(10px,1.4vw,18px); justify-content:center; align-items:center; background:var(--surface); border-radius:12px; padding:clamp(14px,2vw,28px); aspect-ratio:8/5}
.phone{margin:0; height:100%; aspect-ratio:390/844; border-radius:22px; overflow:hidden; border:4px solid #26262b; background:#000}
.phone img{width:100%; height:100%; object-fit:cover; object-position:top}
.f.vid video{width:100%; height:100%; object-fit:cover}
.grid .reel{border-radius:12px}
@media (max-width:760px){.phones{grid-column:span 12; aspect-ratio:auto} .phone{height:auto; width:44%}}
@media (max-width:760px){.f.k3{grid-column:span 4}}

.brandmark span{font-weight:300}
.mono{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:clamp(18px,3vw,40px); align-items:end; padding:clamp(20px,3vw,32px); border:1px solid var(--line); border-radius:14px}
.mono-mark{grid-row:span 2; font-family:var(--display); font-weight:800; font-size:clamp(56px,8vw,120px); line-height:.8; letter-spacing:-.06em}
.mono-mark b{font-weight:300}
.mono-eq{font-family:var(--display); font-size:15px; font-weight:600; color:var(--fg)}
.mono-eq i{font-style:normal; color:var(--mute); padding:0 .2em}
.mono small{color:var(--mute); font-size:14px; line-height:1.45; max-width:30em}
@media (max-width:600px){.mono{grid-template-columns:1fr} .mono-mark{grid-row:auto; margin-bottom:12px}}

.reel .ig{display:inline-flex; margin-top:10px; padding:7px 12px; border-radius:999px; background:rgba(255,255,255,.92); color:#000; font-size:12px; font-weight:600; text-decoration:none; width:max-content; max-width:100%}
.reel .ig:hover{background:#fff}
.reel figcaption{display:flex; flex-direction:column}