/* =========================================================
   LUCA RUGGIERO — v2 · cinematic dark · automotive-first
   ========================================================= */
@font-face{
  font-family:"Identification 05C";
  src:url("../fonts/identification-05c.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --bg:#08080a;
  --bg-1:#0d0d10;
  --bg-2:#131318;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);
  --fg:#f2f2ef;
  --fg-dim:#9a9a97;
  --fg-faint:#616160;
  --accent:#3457e0;          /* deep cinematic azure */
  --accent-2:#7387f2;
  --maxw:1680px;
  --pad:clamp(20px,4.5vw,80px);
  --ease:cubic-bezier(.19,1,.22,1);
  --e-expo:cubic-bezier(.16,1,.3,1);
  --f-serif:"Fraunces",Georgia,serif;
  --f-disp:"Archivo",system-ui,sans-serif;
  --f-mono:"Space Mono",ui-monospace,monospace;
  --f-hero:"Identification 05C","Archivo",system-ui,sans-serif; /* real hero face + fallback */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
body{
  background:var(--bg);color:var(--fg);
  font-family:var(--f-disp);font-weight:400;font-size:16px;line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  /* typographic correctness — kerning, ligatures, optical sizing on everywhere */
  font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1;
  font-optical-sizing:auto;text-rendering:optimizeLegibility;
}
/* tabular figures where numbers align or animate (indices, counters, data) */
.mono,.label,.deck-index,.fc-no,.tile .no,.foot-bar,.pn,.deck-index .cur{font-variant-numeric:tabular-nums}
/* Fraunces reads best a touch lighter/softer at display sizes on dark */
.serif,.rev p{font-optical-sizing:auto}
body.intro-lock{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
/* <picture> e' solo un contenitore per la sorgente WebP: non deve generare un box,
   cosi' l'<img> resta figlio diretto ai fini di flex/grid e di ogni selettore esistente */
picture{display:contents}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}
body::-webkit-scrollbar{width:9px}
body::-webkit-scrollbar-track{background:var(--bg)}
body::-webkit-scrollbar-thumb{background:#26262b;border-radius:9px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}
.label .sl{color:var(--accent)}
.serif{font-family:var(--f-serif);font-weight:300}
.disp{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:.92}

/* ---------------- INTRO GRID ---------------- */
#intro{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;align-items:center;justify-content:center}
#intro .intro-g{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:6px;width:min(70vh,92vw);height:min(70vh,92vw)}
#intro .cell{position:relative;overflow:hidden;background:var(--bg-2);opacity:0;transform:scale(1.06)}
#intro .cell img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
#intro .brand{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0}
#intro .brand span{font-family:var(--f-mono);font-size:13px;letter-spacing:.5em;text-transform:uppercase;color:#fff}
.intro-count{position:absolute;bottom:calc(var(--pad));right:var(--pad);z-index:3;font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--fg-dim)}

/* ---------------- CURSOR ---------------- */
.cursor{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);
  pointer-events:none;z-index:900;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s;mix-blend-mode:difference}
.cursor.big{width:64px;height:64px;background:transparent;border:1px solid var(--fg)}
@media (hover:none){.cursor{display:none}}

/* ---------------- HEADER ---------------- */
.head{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--pad);transition:padding .4s var(--ease),background .4s,border-color .4s;border-bottom:1px solid transparent;mix-blend-mode:difference}
.head.small{padding-block:16px}
.head .logo{font-family:var(--f-disp);font-weight:800;letter-spacing:.02em;font-size:1.1rem}
.head .logo b{color:var(--accent)}
.nav{display:flex;gap:clamp(16px,2vw,34px)}
.nav a{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);opacity:.8;transition:opacity .3s;white-space:nowrap}
.nav a::before{content:"// ";color:var(--accent)}
.nav a:hover{opacity:1}
.nav a[aria-current="page"]{opacity:1;color:var(--accent-2)}
.mnav a[aria-current="page"]{color:var(--fg)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:26px;height:2px;background:var(--fg);transition:.35s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mnav{position:fixed;inset:0;z-index:199;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--pad);transform:translateY(-100%);transition:transform .6s var(--ease)}
.mnav.open{transform:none}
.mnav a{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,10vw,3.4rem);color:var(--fg-dim)}
.mnav a:hover{color:var(--fg)}

/* ---------------- HERO ---------------- */
.hero{position:relative;height:100svh;min-height:600px;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden}
.hero video,.hero .hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 80% at 50% 40%,rgba(8,8,10,.28),rgba(8,8,10,.62) 70%,rgba(8,8,10,.9))}
.hero-top{position:absolute;top:clamp(90px,13vh,140px);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:20px}
.hero-name{font-family:var(--f-hero);font-weight:400;text-transform:uppercase;text-align:center;white-space:nowrap;
  font-size:clamp(1.25rem,3.9vw,3.5rem);line-height:1;letter-spacing:.3em;text-indent:.3em}
.hero-sub{font-family:"Space Grotesk",var(--f-disp),sans-serif;font-weight:500;font-size:clamp(11px,1.15vw,14.5px);letter-spacing:.28em;text-transform:uppercase;color:var(--fg-dim);text-align:center;margin-top:26px;text-indent:.28em}
.hero-side{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim)}
.hero-bottom{position:absolute;bottom:clamp(30px,5vh,52px);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.hero-desc{max-width:32ch;font-size:clamp(.92rem,1.1vw,1.05rem);color:#d9d9d6;line-height:1.5}
.scrollcue{font-family:var(--f-mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-dim);display:flex;align-items:center;gap:12px}
.scrollcue::after{content:"";width:34px;height:1px;background:var(--fg-dim);position:relative;overflow:hidden}

/* ---------------- SECTION SHELL ---------------- */
.sec{padding-block:clamp(46px,6.5vw,100px);position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(26px,3.4vw,48px);flex-wrap:wrap}
.h-xl{font-size:clamp(2.4rem,7vw,6.5rem)}
.h-lg{font-size:clamp(2rem,5vw,4.4rem)}
.h-md{font-size:clamp(1.5rem,3vw,2.6rem)}
.lead{font-size:clamp(1.05rem,1.6vw,1.5rem);color:var(--fg-dim);max-width:44ch;line-height:1.5}

/* ---------------- TRUSTED BY ---------------- */
.trust{border-block:1px solid var(--line);padding-block:clamp(34px,4vw,54px)}
.trust .label{text-align:center;display:block;margin-bottom:clamp(22px,2.6vw,38px)}
/* infinite logo loop — same calibrated cells, seamless wrap, hover-decelerate, edge fade.
   JS (home.js › logoLoop) clones .logoloop__seq to fill the viewport and drives the transform. */
.logoloop{position:relative;overflow:hidden;max-width:1400px;margin-inline:auto}
.logoloop__track{display:flex;width:max-content;will-change:transform}
.logoloop__seq{display:flex;align-items:center;gap:clamp(8px,1.4vw,30px)}
.trust-cell{flex:0 0 auto;width:clamp(92px,13vw,184px);height:clamp(56px,6.4vw,82px);display:grid;place-items:center}
.trust-cell img{width:auto;height:auto;object-fit:contain;opacity:.8;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.trust-cell .word{max-width:74%;max-height:42%}   /* wide wordmarks: limited by width */
.trust-cell .emb{max-width:40%;max-height:72%}     /* round emblems: taller, to match visual mass */
.trust-cell:hover img{opacity:1;transform:scale(1.14)}
/* edge fade into the page background */
.logoloop::before,.logoloop::after{content:"";position:absolute;top:0;bottom:0;z-index:2;pointer-events:none;
  width:clamp(48px,10%,150px)}
.logoloop::before{left:0;background:linear-gradient(to right,var(--bg) 0%,rgba(8,8,10,0) 100%)}
.logoloop::after{right:0;background:linear-gradient(to left,var(--bg) 0%,rgba(8,8,10,0) 100%)}
/* reduced-motion / no-JS fallback: static centered wall that wraps (no marquee) */
.logoloop.is-static{overflow:visible}
.logoloop.is-static .logoloop__track{width:100%}
.logoloop.is-static .logoloop__seq{flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.8vw,28px) clamp(4px,.8vw,14px)}
.logoloop.is-static::before,.logoloop.is-static::after{display:none}
@media (max-width:520px){
  .trust-cell{width:24vw;height:15vw}
}

/* ---------------- BEST OF (work grid) ---------------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.4vw,22px)}
.tile{position:relative;overflow:hidden;background:var(--bg-2);display:block;grid-column:span 6;aspect-ratio:4/3}
.tile.wide{grid-column:span 8;aspect-ratio:16/9}
.tile.tall{grid-column:span 4;aspect-ratio:3/4}
.tile.half{grid-column:span 6;aspect-ratio:3/2}
.tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.72);transition:filter .7s var(--ease),transform 1.2s var(--ease)}
.tile:hover img{filter:grayscale(0) brightness(.95);transform:scale(1.04)}
.tile .meta{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2vw,34px);
  background:linear-gradient(0deg,rgba(6,6,8,.82),rgba(6,6,8,.1) 46%,transparent 72%)}
.tile .cat{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:8px}
.tile .ttl{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(1.2rem,2.2vw,2rem);line-height:1;letter-spacing:-.01em}
.tile .no{position:absolute;top:clamp(16px,2vw,28px);left:clamp(16px,2vw,28px);font-family:var(--f-mono);font-size:12px;letter-spacing:.15em;color:var(--fg);opacity:.7}
.tile .go{position:absolute;top:clamp(16px,2vw,28px);right:clamp(16px,2vw,28px);width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;opacity:0;transform:translateY(-6px);transition:.4s var(--ease)}
.tile:hover .go{opacity:1;transform:none}
.tile .go svg{width:15px;height:15px}

/* ---------------- REVIEWS ---------------- */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(16px,1.8vw,26px)}
.rev{border:1px solid var(--line);border-radius:14px;padding:clamp(26px,2.4vw,40px);background:var(--bg-1);display:flex;flex-direction:column;gap:20px}
.rev p{font-family:var(--f-serif);font-weight:300;font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.45;color:#e7e7e4}
.rev .who{display:flex;align-items:center;gap:14px;margin-top:auto}
.rev .av{width:42px;height:42px;border-radius:50%;background:var(--bg-2);display:grid;place-items:center;font-family:var(--f-mono);font-size:13px;color:var(--accent-2);border:1px solid var(--line)}
.rev .who b{font-weight:600;font-size:.95rem}
.rev .who span{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--fg-faint);text-transform:uppercase;margin-top:3px}
.stars{color:var(--accent);letter-spacing:3px;font-size:13px}

/* ---------------- CTA ---------------- */
.cta{text-align:center;border-top:1px solid var(--line)}
.cta .big{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(3rem,13vw,12rem);line-height:.9;letter-spacing:-.03em}
.cta .big a{transition:color .3s}
.cta .big a:hover{color:var(--accent)}
.cta .sub{max-width:40ch;margin:26px auto 0;color:var(--fg-dim);font-size:clamp(1rem,1.3vw,1.2rem)}
.btn{display:inline-flex;align-items:center;gap:.7em;border:1px solid var(--line-2);border-radius:100px;padding:15px 30px;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:.35s var(--ease);margin-top:34px}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.solid:hover{background:var(--accent-2);border-color:var(--accent-2);color:#08080a}

/* ---------------- FOOTER ---------------- */
.foot{border-top:1px solid var(--line);background:var(--bg-1);padding-block:clamp(44px,6vw,80px)}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot h5{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:16px}
.foot a{display:block;color:var(--fg-dim);padding:5px 0;transition:color .3s}
.foot a:hover{color:var(--fg)}
.foot a[aria-current="page"]{color:var(--fg)}
.foot-brand{font-family:var(--f-disp);font-weight:800;font-size:1.6rem;letter-spacing:.01em}
.foot-tag{color:var(--fg-faint);margin-top:12px}
.foot-bar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:56px;padding-top:26px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--fg-faint)}

/* ============ SELECTED FILMS — pinned scroll story (bands that expand over each other) ============ */
.filmstory{position:relative;height:640vh}
.filmstage{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.filmpanel{position:absolute;inset:0;display:block;overflow:hidden;color:var(--fg);will-change:transform,clip-path,opacity;transform-origin:center}
.filmpanel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.filmpanel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,6,8,.5),rgba(6,6,8,.12) 42%,rgba(6,6,8,.9))}
.film-meta{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(52px,10vh,120px);z-index:2;display:flex;flex-direction:column;gap:4px}
.film-meta .film-no{font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--accent-2)}
.film-meta .film-cat{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);margin-top:8px}
.film-meta .film-ttl{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;font-size:clamp(2.4rem,8.2vw,7.2rem);margin-top:6px}
.film-meta .film-cta{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);margin-top:20px;opacity:.9}
.filmpanel:hover .film-cta{color:var(--accent-2)}
.film-eyebrow{position:absolute;top:clamp(90px,13vh,140px);left:var(--pad);z-index:20;pointer-events:none}
.film-index{position:absolute;top:clamp(90px,13vh,140px);right:var(--pad);z-index:20;font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--fg-dim)}
.film-index .cur{color:var(--fg)}
.film-dots{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:13px}
.film-dots i{display:block;width:7px;height:7px;border-radius:50%;border:1px solid var(--line-2);transition:background .3s,border-color .3s,transform .3s}
.film-dots i.on{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
/* no-js / reduced-motion / mobile fallback: simple stacked bands */
html.no-js .filmstory{height:auto}html.no-js .filmstage{position:static;height:auto}
html.no-js .filmpanel{position:relative;height:74vh}html.no-js .film-dots,html.no-js .film-index{display:none}
@media (max-width:820px){
  .filmstory{height:auto}
  .filmstage{position:static;height:auto}
  .filmpanel{position:relative;height:70vh;opacity:1!important;transform:none!important;clip-path:none!important;pointer-events:auto!important}
  .film-dots,.film-index,.film-eyebrow{display:none}
  .film-meta{bottom:32px}
}
@media (prefers-reduced-motion:reduce){
  .filmstory{height:auto}.filmstage{position:static;height:auto}
  .filmpanel{position:relative;height:70vh;opacity:1!important;transform:none!important;clip-path:none!important;pointer-events:auto!important}
  .film-dots,.film-index,.film-eyebrow{display:none}
}
/* avoid flash before JS positions the stack (desktop, motion on) */
html.js .filmstage .filmpanel{opacity:0}
html.js .filmstage .filmpanel:first-of-type{opacity:1}

/* ============ SELECTED FILMS — stacked 3D cards (GSAP) ============ */
.filmdeck{position:relative;height:820vh}
.deck-stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;perspective:1400px;perspective-origin:50% 42%}
.filmcard{position:absolute;width:min(1080px,82vw);height:min(68vh,680px);border-radius:20px;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.62);color:var(--fg);display:block;transform-style:preserve-3d;
  will-change:transform,opacity;backface-visibility:hidden;background:var(--bg-2)}
.filmcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fc-shade{position:absolute;inset:0;z-index:4;background:#05050a;opacity:0;pointer-events:none}
.filmcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,8,.32),rgba(6,6,8,.04) 44%,rgba(6,6,8,.9))}
.fc-meta{position:absolute;left:clamp(26px,3.6vw,56px);right:clamp(26px,3.6vw,56px);bottom:clamp(30px,4.5vw,54px);z-index:2;display:flex;flex-direction:column}
.fc-no{font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--accent-2)}
.fc-cat{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);margin-top:9px}
.fc-ttl{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;font-size:clamp(2rem,5.2vw,4.6rem);margin-top:8px}
.fc-cta{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);margin-top:16px;opacity:.9}
.filmcard:hover .fc-cta{color:var(--accent-2)}
.deck-index{position:absolute;top:clamp(90px,13vh,140px);right:var(--pad);z-index:10;font-family:var(--f-mono);font-size:12px;letter-spacing:.24em;color:var(--fg-dim);pointer-events:none}
.deck-index .cur{color:var(--fg)}
/* avoid flash before GSAP positions the stack (desktop, motion on) */
html.js .deck-stage .filmcard{opacity:0}
html.js .deck-stage .filmcard:first-of-type{opacity:1}
/* fallback: static stacked cards (no-js, reduced-motion, mobile) */
html.no-js .filmdeck,html.no-js .deck-stage{height:auto}
html.no-js .deck-stage{position:static;display:block}
html.no-js .filmcard{position:relative;width:auto;height:66vh;margin:0 auto 16px}
html.no-js .deck-index{display:none}
@media (max-width:820px){
  .filmdeck{height:auto}
  .deck-stage{position:static;height:auto;display:block;padding-inline:var(--pad)}
  .filmcard{position:relative;width:auto;height:60vh;margin:0 auto 14px;transform:none!important;opacity:1!important;filter:none!important}
  .fc-ttl{font-size:clamp(1.7rem,7vw,2.6rem)}
  .deck-index{display:none}
}
@media (prefers-reduced-motion:reduce){
  .filmdeck{height:auto}
  .deck-stage{position:static;height:auto;display:block}
  .filmcard{position:relative;width:auto;height:64vh;margin:0 auto 16px;transform:none!important;opacity:1!important;filter:none!important}
  .deck-index{display:none}
}

/* ---------------- REVEAL ---------------- */
.rv{opacity:0;transform:translateY(34px)}
.rv.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.rv.d1.in{transition-delay:.09s}.rv.d2.in{transition-delay:.18s}.rv.d3.in{transition-delay:.27s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------- IMAGE / TILE REVEAL (mask + rise + scale) — JS-gated so default stays visible ---------- */
html.js .reveal{opacity:0;transform:translateY(30px) scale(.985);clip-path:inset(12% 0% 12% 0%);will-change:opacity,transform,clip-path}
html.js .reveal.in{opacity:1;transform:none;clip-path:inset(0 0 0 0);
  transition:opacity .8s var(--e-expo),transform 1.05s var(--e-expo),clip-path 1.05s var(--e-expo)}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}}

/* hero video sits slightly scaled so parallax never exposes edges */
.hero-vid{transform:scale(1.08);will-change:transform}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .nav,.hero-side{display:none}
  .burger{display:flex}
  .tile,.tile.wide,.tile.tall,.tile.half{grid-column:span 12;aspect-ratio:4/3}
  .hero-bottom{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-desc{max-width:none}
}
@media (max-width:560px){
  #intro .intro-g{gap:4px;width:92vw;height:92vw}
  .hero-name{letter-spacing:.24em;text-indent:.24em}
}

/* ---------------- INTRO STATES (grid -> negative invert -> white -> hero) ---------------- */
#intro .cell.show{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .7s var(--ease)}
#intro.invert{filter:invert(1);transition:filter .3s var(--ease)}      /* negative flash */
#intro.blank .cell{opacity:0;transition:opacity .3s ease}              /* leaves inverted(white) bg */
#intro.gone{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
#intro.removed{display:none}

/* hero reveal after intro */
.hero-name,.hero-sub,.hero-desc,.scrollcue,.hero-side,.hero-top{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.2s var(--ease)}
body.ready .hero-top{opacity:1;transform:none}
body.ready .hero-name{opacity:1;transform:none;transition-delay:.15s}
body.ready .hero-sub{opacity:1;transform:none;transition-delay:.35s}
body.ready .hero-desc{opacity:1;transform:none;transition-delay:.5s}
body.ready .hero-side{opacity:1;transform:none;transition-delay:.6s}
body.ready .scrollcue{opacity:1;transform:none;transition-delay:.6s}
/* if JS disabled, show everything */
.no-js #intro{display:none}
.no-js .hero-name,.no-js .hero-sub,.no-js .hero-desc,.no-js .scrollcue,.no-js .hero-side,.no-js .hero-top,.no-js .rv{opacity:1;transform:none}

/* ============ HOME v2 — composition / negband / work list / marquee ============ */
/* Curated automotive composition */
.cmp{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(58px,6.6vw,112px);gap:14px}
.cmp a{position:relative;overflow:hidden;background:var(--bg-2);display:block}
.cmp img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.82);transition:filter .7s var(--ease),transform 1.2s var(--ease)}
.cmp a:hover img{filter:grayscale(0) brightness(1);transform:scale(1.04)}
.cmp-hero,.cmp-wide{grid-column:span 6;grid-row:span 3}
.cmp-v{grid-column:span 2;grid-row:span 4}
.cmp-h{grid-column:span 3;grid-row:span 2}

/* Scroll B&W / negative band (filter+parallax driven by JS) */
.negband{position:relative;height:62vh;min-height:340px;overflow:hidden;margin-block:clamp(16px,3vw,44px)}
.negband img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover;filter:grayscale(.4);will-change:transform,filter}

/* Work highlight list */
.wl{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:start}
.wl-rows{display:flex;flex-direction:column}
.wl-row{position:relative;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;column-gap:20px;
  padding:clamp(16px,2vw,28px) 4px;border-top:1px solid var(--line);transition:padding-left .4s var(--ease)}
.wl-row:last-of-type{border-bottom:1px solid var(--line)}
.wl-no{font-family:var(--f-mono);font-size:12px;color:var(--fg-faint);letter-spacing:.1em;transition:color .35s}
.wl-ttl{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,2.5vw,2.5rem);line-height:1;letter-spacing:-.01em;color:var(--fg-dim);transition:color .35s var(--ease)}
.wl-cat{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-faint);white-space:nowrap}
.wl-yr{font-family:var(--f-mono);font-size:12px;color:var(--fg-faint)}
.wl-row:hover{padding-left:16px}
.wl-row:hover .wl-ttl,.wl-row.active .wl-ttl{color:var(--fg)}
.wl-row:hover .wl-no,.wl-row.active .wl-no{color:var(--accent)}
.wl-inl{display:none}
.wl-preview{position:sticky;top:118px;aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
.wl-preview img{width:100%;height:100%;object-fit:cover;transition:opacity .4s var(--ease),transform .8s var(--e-expo),clip-path .8s var(--e-expo);transform-origin:center}
.wl-preview img.swap{opacity:0;transform:scale(1.07);clip-path:inset(6%)}

/* Scrolling supercar gallery */
.marquee{overflow:hidden;padding-block:clamp(26px,3.4vw,50px);border-top:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 62s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-track img{height:clamp(180px,26vw,300px);width:auto;flex:0 0 auto;object-fit:cover}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* ============ WORKS PAGE — mixed masonry ============ */
/* padding-block, NON la shorthand: 'padding: X 0 Y' azzerava anche i lati e
   sovrascriveva il padding-inline di .wrap, mandando il testo a filo schermo */
.page-top{padding-block:clamp(104px,13vh,150px) clamp(20px,3vw,40px)}
.wfilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(20px,3vw,40px)}
.wchip{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);
  border:1px solid var(--line);border-radius:100px;padding:9px 18px;cursor:pointer;transition:.3s;background:none}
.wchip:hover{color:var(--fg);border-color:var(--line-2)}
.wchip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.wgrid{columns:4 250px;column-gap:12px}
.wtile{display:block;margin:0 0 12px;break-inside:avoid;position:relative;overflow:hidden;background:var(--bg-2)}
.wtile img{width:100%;display:block;filter:grayscale(1) brightness(.8);transition:filter .6s var(--ease),transform 1s var(--ease)}
.wtile:hover img{filter:grayscale(0) brightness(1);transform:scale(1.03)}
.wcap{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(0deg,rgba(6,6,8,.82),transparent);opacity:0;transition:.35s;pointer-events:none}
.wtile:hover .wcap{opacity:1}
.wcap b{display:block;font-family:var(--f-disp);font-weight:700;font-size:.92rem;text-transform:uppercase;letter-spacing:.01em}
.wcap span{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.wtile.hide{display:none}
/* colour variant (home gallery) */
.wgrid.color .wtile img{filter:brightness(.98)}
.wgrid.color .wtile:hover img{filter:brightness(1);transform:scale(1.03)}

/* ===== HOME photo wall — scroll-linked expand reveal (this section only) ===== */
.hwall{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;grid-auto-flow:dense}
.hwall a{display:block;overflow:hidden;position:relative;background:var(--bg-2);border-radius:4px;aspect-ratio:3/4}
.hwall a.w{grid-column:span 2;aspect-ratio:3/2}
.hwall img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .6s var(--ease),transform 1.1s var(--ease)}
.hwall a:hover img{filter:brightness(1.05);transform:scale(1.04)}
html.js .hwall a{transform:translate3d(0,16px,0) scale(.94);clip-path:inset(5% round 4px);opacity:.34;filter:blur(7px);will-change:transform,clip-path,opacity,filter}
@media (prefers-reduced-motion:reduce){html.js .hwall a{transform:none;clip-path:none;opacity:1;filter:none}}
@media (max-width:760px){.hwall{grid-template-columns:repeat(2,1fr);gap:13px}}
@media (max-width:560px){.wgrid{columns:2 140px;column-gap:8px}.wtile{margin-bottom:8px}}

/* ============ WORKS — project tiles + detail ============ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(12px,1.4vw,20px)}
.ptile{position:relative;display:block;background:var(--bg-2);overflow:hidden;aspect-ratio:4/3}
.ptile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.72);transition:filter .6s var(--ease),transform 1s var(--ease)}
.ptile:hover img{filter:grayscale(0) brightness(.95);transform:scale(1.04)}
.ptile .pmeta{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:linear-gradient(0deg,rgba(6,6,8,.85),rgba(6,6,8,.05) 55%,transparent 74%)}
.ptile .pcat{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:6px}
.ptile .pttl{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:1.05rem;line-height:1.02;letter-spacing:-.01em}
.ptile .pplay{position:absolute;top:15px;right:15px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;background:rgba(8,8,10,.4)}
.ptile .pplay svg{width:12px;height:12px;margin-left:2px;fill:var(--fg)}
.ptile.hide{display:none}
/* youtube video tiles (detail pages) */
.ytile{position:relative;display:block;background:var(--bg-2);overflow:hidden;aspect-ratio:16/9}
.ytile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.72);transition:filter .6s var(--ease),transform 1s var(--ease)}
.ytile:hover img{filter:grayscale(0) brightness(.95);transform:scale(1.04)}
.ytile .pmeta{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:linear-gradient(0deg,rgba(6,6,8,.85),transparent 62%)}
.ytile .pcat{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:5px}
.ytile .pttl{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:1rem;line-height:1.02}
.ytile .pplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;border:1px solid var(--fg);display:grid;place-items:center;background:rgba(8,8,10,.3);transition:.3s}
.ytile:hover .pplay{background:var(--accent);border-color:var(--accent)}
.ytile .pplay svg{width:16px;height:16px;margin-left:2px;fill:var(--fg)}

/* detail page */
.wdet-top{padding:clamp(48px,6vw,92px) 0 clamp(16px,2.4vw,34px)}

/* ---------- WORK DETAIL — full-bleed cinematic cover title card ---------- */
.wcover{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:clamp(58vh,74vh,880px);min-height:430px;overflow:hidden;background:var(--bg-2)}
.wcover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.wcover-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.wcover-por{object-position:center 32%}
@media (prefers-reduced-motion:no-preference){.wcover-img{animation:wkb 24s ease-in-out infinite alternate}}
@keyframes wkb{from{transform:scale(1.03)}to{transform:scale(1.11)}}
.wcover::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,rgba(6,6,8,.9) 0%,rgba(6,6,8,.34) 32%,rgba(6,6,8,0) 56%),
  linear-gradient(to bottom,rgba(6,6,8,.62) 0%,rgba(6,6,8,0) 24%)}
.wcover-back{position:absolute;top:clamp(88px,13vh,132px);left:var(--pad);z-index:3;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);transition:color .3s}
.wcover-back .sl{color:var(--accent)}
.wcover-back:hover{color:var(--fg)}
.wcover-cap{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(30px,5vw,62px);z-index:3}
.wcover-cap .label{color:var(--fg-dim)}
.wcover-ttl{margin-top:12px;font-size:clamp(2.4rem,7.6vw,7rem);line-height:.9;text-transform:uppercase;letter-spacing:-.02em}
.wcover-loc{display:block;margin-top:16px;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
.wcover-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:clamp(66px,7vw,98px);height:clamp(66px,7vw,98px);border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(8,8,10,.3);display:grid;place-items:center;color:#fff;transition:.35s var(--ease)}
a.wcover-play:hover{background:var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.06)}
.wcover-play svg{width:36%;height:36%;fill:currentColor;margin-left:8%}
.wcover-play.is-soon{cursor:default}
.wcover-play.is-soon em{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);font-family:var(--f-mono);font-style:normal;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);white-space:nowrap}
@media (max-width:700px){.wcover{height:62vh;min-height:380px}}
.vidposter{position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:16/9;margin-top:clamp(20px,3vw,40px)}
.vidposter img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.vidposter .pplay{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;border:1px solid var(--fg);display:grid;place-items:center;background:rgba(8,8,10,.32);transition:.3s}
.vidposter:hover .pplay{background:var(--accent);border-color:var(--accent)}
.vidposter .pplay svg{width:22px;height:22px;margin-left:3px;fill:var(--fg)}
.dgal{columns:3 300px;column-gap:12px;margin-top:clamp(28px,4vw,56px)}
.dgal img{width:100%;display:block;margin:0 0 12px;break-inside:avoid;background:var(--bg-2)}
.dmeta{display:flex;flex-wrap:wrap;gap:30px;margin-top:26px;border-top:1px solid var(--line);padding-top:24px}
.dmeta div{min-width:120px}
.dmeta .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint);display:block;margin-bottom:6px}
.dmeta .v{font-size:.98rem;color:var(--fg-dim)}
@media (max-width:560px){.dgal{columns:2 150px}}

/* ---- Work gallery · mixed masonry (columns) · orientations mingle, no imposed rows, flush edges ---- */
.wgal{columns:3 300px;column-gap:12px;margin-top:clamp(28px,4vw,56px)}
.wgal .cell{break-inside:avoid;margin:0 0 12px;overflow:hidden;border-radius:8px;background:var(--bg-2)}
.wgal .cell img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease),filter .6s var(--ease)}
.wgal .cell:hover img{transform:scale(1.04);filter:brightness(1.04)}
@media (max-width:900px){.wgal{columns:2 220px}}
@media (max-width:560px){.wgal{columns:2 150px;column-gap:9px}.wgal .cell{margin-bottom:9px}}

/* ---- Project STILLS · cinematic horizontal frames ---- */
.pstills{padding-top:clamp(30px,5vw,64px)}
.pstills-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(22px,3vw,40px)}
.pstills-head .disp{line-height:.88;letter-spacing:-.02em;margin-top:12px}
.pstills-note{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);white-space:nowrap;padding-bottom:6px}
.pstill-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px)}
.pstill{position:relative;display:block;margin:0;overflow:hidden;border-radius:12px;background:var(--bg-2);aspect-ratio:16/9}
.pstill.feat{grid-column:1 / -1}
.pstill img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease),filter .6s var(--ease);filter:saturate(1.02)}
.pstill:hover img{transform:scale(1.035)}
.pstill .pst-no{position:absolute;left:16px;top:13px;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:#fff;mix-blend-mode:difference;opacity:.9}
.pstill .pst-cap{position:absolute;left:16px;bottom:13px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.92;text-shadow:0 1px 14px rgba(0,0,0,.55)}
/* apple-style reveal for stills: settle from soft zoom + clip */
html.js .pstill{transform:scale(.945);clip-path:inset(6% round 12px);opacity:.42;will-change:transform,clip-path,opacity;transition:transform 1.1s var(--ease),clip-path 1.1s var(--ease),opacity 1.1s var(--ease)}
html.js .pstill.in{transform:none;clip-path:inset(0% round 12px);opacity:1}
@media (prefers-reduced-motion:reduce){html.js .pstill{transform:none;clip-path:none;opacity:1}}
@media (max-width:640px){.pstill-grid{grid-template-columns:1fr;gap:10px}.pstill.feat{grid-column:auto}}

/* ---- Project REELS · vertical video ---- */
.dreels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);max-width:720px;margin:0 auto}
.dreel{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:14px;background:var(--bg-2);cursor:pointer;-webkit-tap-highlight-color:transparent}
.dreel video{width:100%;height:100%;object-fit:cover;display:block}
.dreel .dr-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.34));transition:opacity .5s var(--ease)}
.dreel .dr-play svg{width:58px;height:58px;fill:#fff;filter:drop-shadow(0 6px 22px rgba(0,0,0,.5));transition:transform .4s var(--ease)}
.dreel:hover .dr-play svg{transform:scale(1.09)}
.dreel.playing .dr-play{opacity:0;pointer-events:none}
.dreel .dr-cap{position:absolute;left:14px;bottom:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.92;text-shadow:0 1px 12px rgba(0,0,0,.6);pointer-events:none;transition:opacity .4s var(--ease)}
.dreel.playing .dr-cap{opacity:0}
@media (max-width:560px){.dreels{gap:10px}.dreel .dr-play svg{width:46px;height:46px}}

/* ============ WORK WITH ME / ABOUT ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.split .im{aspect-ratio:4/5;overflow:hidden;background:var(--bg-2)}
.split .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.process{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,48px);padding:clamp(22px,3.2vw,42px) 0;border-bottom:1px solid var(--line);align-items:baseline}
.pstep .pn{font-family:var(--f-mono);font-size:13px;color:var(--accent);letter-spacing:.1em}
.pstep h3{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.8rem);letter-spacing:-.01em;line-height:1}
.pstep p{color:var(--fg-dim);max-width:54ch;margin-top:12px;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.5}
.ltalk{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:34px}
.ltalk a{border:1px solid var(--line);border-radius:14px;padding:26px;transition:.3s;background:var(--bg-1)}
.ltalk a:hover{border-color:var(--line-2);background:var(--bg-2)}
.ltalk .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.ltalk .v{display:block;margin-top:8px;font-family:var(--f-disp);font-weight:700;font-size:1.15rem}
.bio p{color:var(--fg-dim);font-size:clamp(1.05rem,1.4vw,1.3rem);line-height:1.6;max-width:60ch}
.bio p+p{margin-top:20px}
@media (max-width:800px){.split{grid-template-columns:1fr}.pstep{grid-template-columns:1fr;gap:6px}}

@media (max-width:900px){
  .cmp{grid-template-columns:repeat(2,1fr);grid-auto-rows:40vw;gap:8px}
  .cmp-hero,.cmp-wide{grid-column:span 2;grid-row:span 1}
  .cmp-v,.cmp-h{grid-column:span 1;grid-row:span 1}
  .negband{height:58vh;min-height:320px}
  .wl{grid-template-columns:1fr}
  .wl-preview{display:none}
  .wl-row{grid-template-columns:auto 1fr auto}
  .wl-yr{display:none}
  .wl-inl{display:block;grid-column:1/-1;width:100%;aspect-ratio:16/10;object-fit:cover;margin-top:8px;filter:grayscale(1)}
}

/* ============================================================
   ABOUT — Manifesto: fixed text, frames scroll past
   ============================================================ */
.mani{padding-block:clamp(30px,5vw,80px)}
.mani-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);align-items:start}
.mani-text{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:22px}
.mani-quote{font-family:var(--f-serif);font-weight:300;font-size:clamp(1.9rem,3.6vw,3.5rem);line-height:1.16;letter-spacing:-.015em;color:var(--fg);max-width:17ch;text-wrap:balance}
.mani-quote em{font-style:italic;color:var(--accent-2)}
.mani-quote b{font-family:var(--f-disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.mani-sub{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-faint);max-width:36ch;line-height:1.8}
.mani-photos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px);align-items:start;padding-block:clamp(20px,7vh,110px)}
.mani-col{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,22px);will-change:transform}
.mani-b{margin-top:0}          /* columns aligned at top & bottom; async drift comes from the parallax (peaks mid-scroll, converges at the ends) */
.mani-shot{margin:0}
.mani-shot img{width:100%;height:auto;display:block;border-radius:8px;background:var(--bg-2);box-shadow:0 22px 54px rgba(0,0,0,.48);transition:transform 1s var(--e-expo)}
.mani-shot:hover img{transform:scale(1.02)}
.mani-shot figcaption{margin-top:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);display:flex;align-items:center;gap:10px}
.mani-shot .mani-no{color:var(--accent-2)}
@media (max-width:820px){
  .mani-grid{grid-template-columns:1fr;gap:22px}
  .mani-text{position:static;min-height:0;padding-block:clamp(18px,6vw,44px)}
  .mani-photos{padding-block:0}
  .mani-col{transform:none !important}   /* no parallax on small screens */
}
@media (max-width:560px){
  .mani-photos{grid-template-columns:1fr;gap:14px}
  .mani-b{margin-top:14px}
}

/* ============================================================
   AESTHETIC PASS — cinematic signature + interaction polish
   Shared by every page through home.css. Boldness is spent in
   one place (the film grain + vignette); the rest is quiet.
   ============================================================ */

/* — signature: 35mm grain + soft vignette over the whole frame — */
body::before,
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9990}
body::before{                                    /* filmic grain (desaturated fractal noise) */
  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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay}
body::after{                                     /* cinematic vignette — pulls the eye to centre */
  background:radial-gradient(128% 100% at 50% 42%,transparent 58%,rgba(4,4,6,.42) 100%)}
@media (prefers-reduced-motion:reduce){body::before{opacity:.032}}

/* — accessibility floor: one consistent keyboard-focus ring — */
a:focus-visible,button:focus-visible,.btn:focus-visible,.tile:focus-visible,.filmcard:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

/* — nav: underline wipes in L→R, keeping the // marker — */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--accent);transition:right .45s var(--ease)}
.nav a:hover::after{right:0}

/* — buttons: subtle lift, smoother state change — */
.btn{transition:background .34s var(--ease),color .34s var(--ease),border-color .34s var(--ease),transform .34s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* — footer / contact links nudge toward the reader — */
.foot a{transition:color .3s,transform .3s var(--ease)}
.foot a:hover{transform:translateX(4px)}

/* — "let's talk" cards lift into focus — */
.ltalk a{transition:border-color .3s,background .3s,transform .35s var(--ease)}
.ltalk a:hover{transform:translateY(-3px)}

/* — art-of-noticing image: quiet colour/scale life on hover — */
.split .im img{transition:transform 1.1s var(--e-expo),filter .7s var(--ease)}
.split .im:hover img{transform:scale(1.035);filter:grayscale(0)}

/* — review cards: hairline accent + gentle rise — */
.rev{transition:border-color .35s var(--ease),transform .4s var(--ease),background .35s var(--ease)}
.rev:hover{transform:translateY(-4px);border-color:var(--line-2)}

/* ---------- FILM play button (button element) + cinematic lightbox ---------- */
button.wcover-play{font:inherit;padding:0}
button.wcover-play:hover{background:var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.06)}
.lr-lb{position:fixed;inset:0;z-index:10000;background:rgba(4,4,6,.94);display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,60px);opacity:0;transition:opacity .3s ease}
.lr-lb.on{opacity:1}
.lr-lb-frame{position:relative;width:min(100%,calc((100vh - 130px) * 16 / 9));aspect-ratio:16/9;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6)}
.lr-lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:4px}
.lr-lb-close{position:absolute;top:-48px;right:0;width:42px;height:42px;border:0;background:none;color:#fff;cursor:pointer;display:grid;place-items:center;opacity:.85;transition:opacity .2s}
.lr-lb-close:hover{opacity:1}
.lr-lb-close svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
@media (max-width:600px){.lr-lb-close{top:-42px;width:38px;height:38px}}

/* ============================================================
   MOTO.IT — dedicated case-study page
   ============================================================ */
/* stats strip (restrained figures, no gradient template) */
.mstat{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,84px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:clamp(28px,3.6vw,50px)}
.mstat div{min-width:130px}
.mstat b{display:block;font-family:var(--f-disp);font-weight:800;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.02em;color:var(--fg)}
.mstat span{display:block;margin-top:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);max-width:22ch;line-height:1.6}
/* scope of work */
.mscope{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(14px,1.8vw,28px);margin-top:clamp(22px,2.6vw,38px)}
.mscope div{border-top:1px solid var(--line);padding-top:16px}
.mscope h4{font-family:var(--f-disp);font-weight:700;font-size:1.05rem;letter-spacing:-.01em}
.mscope p{color:var(--fg-dim);font-size:.94rem;line-height:1.5;margin-top:7px;max-width:32ch}
/* video showcase — featured + grid, click opens the film lightbox */
.mv-feature{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;margin:0 0 clamp(16px,2vw,26px);overflow:hidden;border-radius:12px;cursor:pointer;background:var(--bg-2)}
.mv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(14px,1.6vw,24px)}
.mv-item{position:relative;display:block;border:0;padding:0;margin:0;aspect-ratio:16/9;overflow:hidden;border-radius:10px;cursor:pointer;background:var(--bg-2)}
.mv-feature img,.mv-item img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e-expo)}
.mv-feature:hover img,.mv-item:hover img{transform:scale(1.045)}
.mv-feature::after,.mv-item::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(6,6,8,.82),rgba(6,6,8,.06) 46%,transparent 70%)}
.mv-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(8,8,10,.34);color:#fff;display:grid;place-items:center;transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.mv-feature .mv-play{width:clamp(64px,6vw,90px);height:clamp(64px,6vw,90px)}
.mv-item .mv-play{width:54px;height:54px}
.mv-feature:hover .mv-play,.mv-item:hover .mv-play{background:var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.06)}
.mv-play svg{width:36%;height:36%;fill:currentColor;margin-left:8%}
.mv-cap{position:absolute;left:clamp(16px,2vw,30px);bottom:clamp(14px,1.8vw,24px);z-index:2;text-align:left;pointer-events:none}
.mv-role{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:7px}
.mv-ttl{display:block;font-family:var(--f-disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.02;color:var(--fg)}
.mv-feature .mv-ttl{font-size:clamp(1.5rem,3vw,2.5rem)}
.mv-item .mv-ttl{font-size:clamp(1rem,1.4vw,1.3rem)}
@media(max-width:600px){.mv-grid{grid-template-columns:1fr}}

/* moto.it video tiles — richer hover (all tiles equal weight) */
.mv-item img{transition:transform .9s var(--e-expo),filter .5s var(--ease)}
.mv-item:hover img{transform:scale(1.06);filter:brightness(1.06) saturate(1.04)}
.mv-item .mv-ttl{transition:transform .4s var(--e-expo)}
.mv-item:hover .mv-ttl{transform:translateY(-3px)}
.mv-item .mv-play{opacity:.92}
.mv-item:hover .mv-play{opacity:1}

/* ============================================================
   VIDEO REEL — cinematic 3D coverflow (moto.it films)
   ============================================================ */
.vreel{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;padding-block:clamp(8px,1.6vw,24px)}
.vreel-stage{position:relative;height:min(56vh,520px);perspective:1500px;perspective-origin:50% 50%}
.vreel-track{position:absolute;inset:0;transform-style:preserve-3d}
.vreel-slide{width:min(62vw,780px);aspect-ratio:16/9;margin:0;border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--bg-2)}
.vreel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.vreel--live .vreel-slide{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer;
  will-change:transform,opacity;backface-visibility:hidden;box-shadow:0 34px 90px rgba(0,0,0,.62);
  transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .8s cubic-bezier(.22,1,.36,1)}
.vreel-slide::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(6,6,8,.84),rgba(6,6,8,.05) 46%,transparent 70%)}
.vreel-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:clamp(56px,5vw,80px);height:clamp(56px,5vw,80px);border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(8,8,10,.34);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .4s ease,background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.vreel-slide.is-active .vreel-play{opacity:1}
.vreel-slide.is-active:hover .vreel-play{background:var(--accent);border-color:var(--accent);transform:translate(-50%,-50%) scale(1.06)}
.vreel-play svg{width:36%;height:36%;fill:currentColor;margin-left:8%}
.vreel-cap{position:absolute;left:clamp(16px,2vw,30px);bottom:clamp(14px,1.8vw,24px);z-index:2;pointer-events:none;opacity:0;transition:opacity .5s ease}
.vreel-slide.is-active .vreel-cap{opacity:1}
.vreel-role{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:7px}
.vreel-ttl{display:block;font-family:var(--f-disp);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.3rem,2.4vw,2.1rem);color:var(--fg)}
/* HUD */
.vreel-hud{position:absolute;top:clamp(4px,1vw,14px);left:var(--pad);z-index:6;display:flex;gap:18px;align-items:center;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;color:var(--fg-dim);pointer-events:none}
.vreel-rec{display:inline-flex;align-items:center;gap:8px;color:#f2f2ef}
.vreel-rec i{width:9px;height:9px;border-radius:50%;background:#ff3b30;box-shadow:0 0 10px #ff3b30;animation:vreelblink 1.4s steps(1) infinite}
@keyframes vreelblink{0%,49%{opacity:1}50%,100%{opacity:.2}}
.vreel-tc b{color:var(--accent-2);font-weight:700}
.vreel-tc span{opacity:.5;margin:0 6px}
/* nav */
.vreel-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:clamp(42px,3.4vw,52px);height:clamp(42px,3.4vw,52px);border-radius:50%;border:1px solid var(--line-2);background:rgba(8,8,10,.42);color:var(--fg);display:grid;place-items:center;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.vreel-prev{left:clamp(8px,2vw,26px)}.vreel-next{right:clamp(8px,2vw,26px)}
.vreel-nav:hover{background:var(--accent);border-color:var(--accent)}
.vreel-nav:active{transform:translateY(-50%) scale(.94)}
.vreel-nav svg{width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ticks */
.vreel-ticks{display:flex;gap:6px;justify-content:center;margin-top:clamp(16px,2vw,26px)}
.vreel-ticks button{width:16px;height:3px;border:0;padding:0;border-radius:2px;background:rgba(255,255,255,.22);cursor:pointer;transition:background .25s var(--ease),width .25s var(--ease)}
.vreel-ticks button.on{background:var(--accent-2);width:26px}
/* fallback (no JS / reduced motion): simple equal grid */
.vreel:not(.vreel--live) .vreel-hud,.vreel:not(.vreel--live) .vreel-nav,.vreel:not(.vreel--live) .vreel-ticks{display:none}
.vreel:not(.vreel--live) .vreel-track{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;height:auto;padding:0 var(--pad)}
.vreel:not(.vreel--live) .vreel-slide{width:auto}
.vreel:not(.vreel--live) .vreel-play,.vreel:not(.vreel--live) .vreel-cap{opacity:1}
@media (prefers-reduced-motion:reduce){.vreel-rec i{animation:none}}
@media (max-width:700px){.vreel-stage{height:44vh}.vreel-slide{width:82vw}}

/* --- More work CTA --- */
.mw-sec{padding-top:clamp(30px,4vw,60px);padding-bottom:clamp(46px,6vw,90px)}
.more-work{display:inline-flex;flex-direction:column;align-items:center;gap:11px;text-decoration:none}
.more-work .mw-lead{font-family:var(--f-serif);font-style:italic;font-weight:300;font-size:clamp(.92rem,1.3vw,1.12rem);color:var(--fg-faint);transition:color .5s var(--ease)}
.more-work .mw-word{font-family:var(--f-mono);font-weight:700;text-transform:uppercase;letter-spacing:.4em;font-size:clamp(.95rem,1.6vw,1.35rem);color:var(--fg-dim);padding-left:.4em;transition:color .5s var(--ease)}
.more-work .mw-line{display:block;width:20px;height:1px;background:var(--line-2);transition:width .55s var(--ease),background .5s var(--ease)}
.more-work:hover .mw-lead,.more-work:focus-visible .mw-lead{color:var(--fg-dim)}
.more-work:hover .mw-word,.more-work:focus-visible .mw-word{color:var(--fg)}
.more-work:hover .mw-line,.more-work:focus-visible .mw-line{width:62px;background:var(--fg-dim)}
@media (prefers-reduced-motion:reduce){.more-work *{transition:none}}

/* --- Approach --- */
.approach-thesis{font-family:var(--f-serif);font-weight:300;letter-spacing:-.015em;font-size:clamp(2.1rem,5.4vw,4.6rem);line-height:1.06;max-width:19ch;margin-top:clamp(16px,2vw,28px);color:var(--fg)}
.approach-thesis em{font-style:italic;color:var(--accent-2)}
.approach-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,52px);margin-top:clamp(52px,6.5vw,104px)}
.approach-col{position:relative;padding-top:24px}
.approach-col::before{content:"";position:absolute;top:0;left:0;height:1px;width:100%;background:var(--line)}
.approach-col::after{content:"";position:absolute;top:0;left:0;height:1px;width:0;background:var(--accent);transition:width 1s var(--ease)}
.approach-col.in::after{width:100%}
.rv.approach-col.d1.in::after{transition-delay:.14s}
.rv.approach-col.d2.in::after{transition-delay:.28s}
.rv.approach-col.d3.in::after{transition-delay:.42s}
.svc-cols{margin-top:clamp(44px,5vw,84px);row-gap:clamp(30px,3.4vw,54px)}
.approach-k{display:block;font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:14px}
.approach-col p{font-family:var(--f-disp);font-weight:400;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.5;color:var(--fg-dim);max-width:34ch}
@media (max-width:760px){.approach-cols{grid-template-columns:1fr;gap:0}.approach-col{padding-block:26px}.approach-col:last-child p{margin-bottom:0}}
@media (prefers-reduced-motion:reduce){.approach-col::after{transition:none}}

/* --- Contact page --- */
.contact{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(36px,6vw,96px);align-items:start}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
.cf-field{display:flex;flex-direction:column;margin-bottom:clamp(20px,2.4vw,30px)}
.cf-field label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:11px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cf-opt{text-transform:none;letter-spacing:.01em;font-family:var(--f-disp);font-size:12px;color:var(--fg-dim)}
.cf-field input,.cf-field select,.cf-field textarea{font-family:var(--f-disp);font-size:1.05rem;color:var(--fg);background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:12px 2px;width:100%;transition:border-color .35s var(--ease);appearance:none;-webkit-appearance:none}
.cf-field textarea{resize:vertical;min-height:124px;line-height:1.5}
.cf-field input:hover,.cf-field select:hover,.cf-field textarea:hover{border-bottom-color:var(--fg-dim)}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.cf-field select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239a9a97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;background-size:14px;padding-right:26px}
.cf-field select option{background:var(--bg-1);color:var(--fg)}
.cf-note{font-family:var(--f-disp);font-size:.85rem;color:var(--fg-dim);margin-top:16px;max-width:44ch;line-height:1.5}
.contact-side{display:flex;flex-direction:column;gap:clamp(30px,3.4vw,48px)}
.contact-side .label{display:inline-block;margin-bottom:18px}
.cs-links{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cs-links a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);transition:padding-left .4s var(--ease),border-color .35s var(--ease)}
.cs-links a:hover{padding-left:8px;border-bottom-color:var(--line-2)}
.cs-links .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-dim)}
.cs-links .v{font-family:var(--f-disp);font-size:1.02rem;color:var(--fg);text-align:right}
.cs-meta{color:var(--fg);font-size:1.15rem;line-height:1.5}
.cs-meta span{color:var(--fg-dim);font-size:.95rem}
@media (max-width:860px){.contact{grid-template-columns:1fr;gap:clamp(40px,8vw,60px)}}
@media (max-width:560px){.cf-row{grid-template-columns:1fr;gap:0}}
/* auto-advancing cinematic reel — Ken Burns + crossfade (each photo shown in full) */
.reel{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);border-radius:4px;background:var(--bg-2)}
.reel-track{position:absolute;inset:0}
.reel-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);filter:contrast(1.03) saturate(1.03);transition:opacity 1.15s var(--ease);will-change:opacity,transform}
.reel-img.on{opacity:1;animation:reelKB var(--reel-dur,5200ms) linear forwards}
@keyframes reelKB{from{transform:scale(1.05)}to{transform:scale(1.15)}}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(6,6,8,.28),transparent 30%,transparent 58%,rgba(6,6,8,.88))}
.reel-prog{position:absolute;left:0;top:0;width:2px;height:0;background:var(--accent);z-index:2}
.reel-cap{position:absolute;left:16px;bottom:15px;z-index:2;display:flex;align-items:baseline;gap:11px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.reel-cap b{font-weight:700;color:var(--accent-2);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.reel-img{transition:opacity .01s}.reel-img.on{animation:none;transform:scale(1)}.reel-prog{display:none}}

/* ============================================================
   MOBILE POLISH — safe-area (iOS notch), touch targets, narrow
   -screen guards. Appended last on purpose: additive only, so
   the desktop composition is untouched.
   ============================================================ */
/* iOS notch / safe areas on fixed + full-screen UI */
.head{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right));padding-top:calc(24px + env(safe-area-inset-top))}
.head.small{padding-top:calc(16px + env(safe-area-inset-top))}
.mnav{padding-top:max(var(--pad),env(safe-area-inset-top));padding-bottom:max(var(--pad),env(safe-area-inset-bottom))}
.lr-lb{padding-top:max(clamp(16px,4vw,60px),env(safe-area-inset-top));padding-bottom:max(clamp(16px,4vw,60px),env(safe-area-inset-bottom))}

/* Touch devices / phones: comfortable thumb targets (>=44px tall) */
@media (hover:none),(max-width:900px){
  .foot a{padding:11px 0}
  .foot-bar{gap:14px}
  .foot-bar a{display:inline-block;padding:8px 0}
  .wchip{padding:12px 18px}
  .nav a{padding:6px 2px}
  .cs-links a{padding:18px 0}
}

/* Very narrow screens: keep the nowrap hero name inside the frame */
@media (max-width:380px){
  .hero-name{font-size:1.12rem;letter-spacing:.16em;text-indent:.16em}
  .hero-sub{letter-spacing:.2em}
}

/* ---- ABOUT manifesto: horizontal film-strip on mobile ----
   Desktop keeps its two-column async parallax (unchanged). On phones the
   two stacked columns of ~30 tall photos — an endless vertical scroll —
   become two strips you swipe sideways with scroll-snap. Strictly contained
   so the sideways scroll never widens the page layout. */
@media (max-width:820px){
  .mani{overflow-x:hidden}
  .mani-grid{gap:24px;min-width:0}
  .mani-text{min-width:0}
  .mani-photos{display:block;padding-block:0;min-width:0;overflow:hidden}
  .mani-col{
    display:flex;flex-direction:row;gap:12px;
    width:100%;max-width:100%;min-width:0;box-sizing:border-box;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    transform:none !important;                     /* no parallax on mobile */
    -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
    mask-image:linear-gradient(90deg,#000 84%,transparent);
  }
  .mani-col::-webkit-scrollbar{display:none}
  .mani-col+.mani-col,.mani-b{margin-top:14px}
  .mani-shot{flex:0 0 auto;margin:0;scroll-snap-align:start}
  .mani-shot.rv{opacity:1 !important;transform:none !important}   /* never stuck invisible off to the side */
  .mani-shot img{height:300px;max-height:42vh;width:auto;max-width:86vw;object-fit:cover;border-radius:10px}
}

/* ============================================================
   MOBILE READABILITY — typography pass (phones only).
   The wide "cinematic" letter-spacing that reads beautifully at
   1440px becomes an unreadable stretch on a 390px screen, and
   the all-caps utility labels crowd the edges. Tighten tracking,
   calm the spaced type, give it a little breathing room. The
   desktop composition is deliberately left untouched.
   ============================================================ */
@media (max-width:640px){
  /* utility / mono labels — less tracking = far more legible at small sizes */
  .label{letter-spacing:.1em}
  .mono{letter-spacing:.08em}
  .nav a,.wl-cat,.wl-no,.wl-yr,.wcover-back,.wcover-loc,.film-cat,.film-no,.fc-cat,.fc-no,
  .pcat,.mv-role,.vreel-role,.dr-cap,.pst-cap,.mani-shot figcaption,.foot h5,.foot-bar,
  .dmeta .k,.mscope span,.approach-k,.cf-field label,.cs-links .k,.pstills-note,
  .trust-row span,.rev .who span,.btn,.wchip,.more-work .mw-word,.scrollcue,.hero-side{
    letter-spacing:.08em}

  /* body copy — a touch more line height for comfort on small screens */
  .bio p,.pstep p,.approach-col p,.lead,.rev p,.hero-desc,.cs-meta{line-height:1.6}

  /* HERO — fix the hierarchy: the NAME must dominate. Eyebrows small,
     name large (wraps safely so it never overflows), sub clearly below it. */
  .hero-top{flex-direction:column;align-items:center;gap:6px;text-align:center;top:clamp(78px,11vh,116px)}
  .hero-top .label{font-size:10.5px;letter-spacing:.12em}
  .hero-name{
    font-size:clamp(2rem,9vw,2.7rem);       /* the hero: clearly biggest on the screen */
    letter-spacing:.06em;text-indent:.06em;
    white-space:normal;line-height:1.06;max-width:94vw}
  .hero-sub{
    letter-spacing:.12em;font-size:11.5px;   /* subordinate by size, but still readable */
    margin-top:16px;padding-inline:12px}
}
@media (max-width:380px){
  .hero-name{font-size:clamp(1.8rem,8.5vw,2.2rem);letter-spacing:.04em;text-indent:.04em}
  .hero-sub{font-size:10.5px;letter-spacing:.1em}
}

/* ============================================================
   APPLE DESIGN PASS — refined image cards + tactile interaction
   Additive override block (wins on source order, equal specificity).
   Keeps the cinematic sharp-edge identity; adds a quiet, coherent
   "lift + hairline ring + eased motion" language shared by every
   image grid. Signature grain/vignette untouched.
   ============================================================ */
:root{
  --ring:rgba(255,255,255,.07);
  --ring-hi:rgba(255,255,255,.16);
  --shadow-lift:0 22px 50px -24px rgba(0,0,0,.78),0 6px 16px -10px rgba(0,0,0,.6);
}

/* ---- WORK page: project cards ---- */
.pgrid{gap:clamp(14px,1.6vw,24px)}
.ptile{
  isolation:isolate;
  box-shadow:0 0 0 1px var(--ring);
  transition:transform .6s var(--e-expo),box-shadow .5s var(--e-expo);
  will-change:transform}
.ptile::after{                                   /* inner hairline ring, brightens on hover */
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--ring);transition:box-shadow .5s var(--e-expo)}
.ptile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift),0 0 0 1px var(--ring-hi)}
.ptile:hover::after{box-shadow:inset 0 0 0 1px var(--ring-hi)}
.ptile img{filter:grayscale(1) brightness(.66);transition:filter .8s var(--e-expo),transform 1.1s var(--e-expo)}
.ptile:hover img{filter:grayscale(0) brightness(.98);transform:scale(1.055)}
/* legible, softer gradient */
.ptile .pmeta{padding:clamp(15px,1.5vw,21px);z-index:2;
  background:linear-gradient(0deg,rgba(5,5,7,.92) 0%,rgba(5,5,7,.55) 26%,rgba(5,5,7,.08) 56%,transparent 74%)}
.ptile .pcat{color:var(--accent-2);opacity:.86;transition:opacity .4s var(--ease)}
.ptile:hover .pcat{opacity:1}
.ptile .pttl{position:relative;display:inline-block;font-size:clamp(1.02rem,1.25vw,1.24rem);
  transition:transform .55s var(--e-expo)}
.ptile:hover .pttl{transform:translateY(-3px)}
.ptile .pttl::after{content:"";position:absolute;left:0;bottom:-5px;height:1px;width:0;
  background:var(--accent-2);transition:width .6s var(--e-expo)}
.ptile:hover .pttl::after{width:32px}
/* film tiles: play button consistent with the rest of the site (fills accent on hover) */
.ptile .pplay{top:14px;right:14px;width:40px;height:40px;z-index:4;
  background:rgba(8,8,10,.34);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-color:rgba(255,255,255,.3);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.ptile:hover .pplay{background:var(--accent);border-color:var(--accent);transform:scale(1.07)}
@media (prefers-reduced-motion:reduce){
  .ptile,.ptile img,.ptile .pttl,.ptile::after{transition:none}
  .ptile:hover{transform:none}
}

/* ---- WORK page: filter chips ---- */
.wfilter{gap:8px}
.wchip{transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),transform .25s var(--e-expo)}
.wchip:hover{transform:translateY(-1px)}
.wchip:active{transform:scale(.97)}
.wchip.on{box-shadow:0 6px 18px -10px rgba(255,255,255,.5)}

/* ---- WORK page: intro breathing room ---- */
.page-top .lead{max-width:52ch}

/* ---- Coherent tactile language on the other image grids ---- */
.tile,.cmp a{transition:transform .6s var(--e-expo),box-shadow .5s var(--e-expo)}
.tile::after,.cmp a::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--ring);transition:box-shadow .5s var(--e-expo)}
.tile:hover,.cmp a:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.tile:hover::after,.cmp a:hover::after{box-shadow:inset 0 0 0 1px var(--ring-hi)}
@media (prefers-reduced-motion:reduce){
  .tile,.cmp a{transition:none}
  .tile:hover,.cmp a:hover{transform:none}
}
/* keep the home best-of caption/controls above the new ring */
.tile .meta{z-index:2}.tile .no,.tile .go{z-index:4}

/* ---- Touch devices: no hover-lift residue, keep it flat & fast ---- */
@media (hover:none){
  .ptile:hover,.tile:hover,.cmp a:hover{transform:none}
  .ptile:hover img{transform:none}
}

/* ---- 404 ---- */
.e404{position:relative;min-height:100svh;display:grid;place-items:center;
  padding:calc(var(--pad) + 60px) var(--pad);overflow:hidden;text-align:center}
.e404-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:grayscale(1) brightness(.34)}
.e404::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 50% 45%,rgba(8,8,10,.45),rgba(8,8,10,.86) 70%,rgba(8,8,10,.97))}
.e404-code{font-size:clamp(5rem,22vw,16rem);line-height:.88;margin:18px 0 0;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.e404-lead{margin:22px auto 0;max-width:40ch;color:var(--fg-dim);
  font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.55}
.e404-act{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,44px)}

/* =========================================================
   MOBILE — target touch e comfort di lettura
   ========================================================= */
/* NB: footer, chip filtro, nav e .cs-links hanno gia' i loro target touch
   nel blocco "Touch devices / phones" piu' sopra. Qui SOLO cio' che manca:
   non ridichiarare .foot a / .cs-links a, si rompe l'impaginazione. */
@media (hover:none){
  /* burger e bottoni erano sotto i 44px */
  .burger{min-width:44px;min-height:44px;padding:11px;align-items:center;justify-content:center}
  .btn{min-height:48px}
  /* niente flash grigio al tap su tutto cio' che si tocca */
  a,button,.ptile,.tile,.wchip{-webkit-tap-highlight-color:transparent}
  /* i campi del form: 16px evita lo zoom automatico di iOS al focus */
  input,select,textarea{font-size:16px}
}
@media (max-width:560px){
  /* la CTA del contatto va a piena larghezza: piu' facile da centrare col pollice */
  .e404-act .btn,.cf-done .btn{width:100%;justify-content:center}
}

/* ---- Contact form: honeypot + success state ---- */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-done{max-width:46ch;opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--e-expo),transform .7s var(--e-expo)}
.cf-done.in{opacity:1;transform:none}
.cf-done h3{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:22px 0 14px;outline:none}
.cf-done p{color:var(--fg-dim);line-height:1.6;margin-bottom:28px}
.cf-tick{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:rgba(52,87,224,.14);border:1px solid var(--accent);color:var(--accent-2)}
.cf-tick svg{width:26px;height:26px;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;animation:cfTick .5s .25s var(--e-expo) forwards}
@keyframes cfTick{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .cf-done{transition:none}.cf-tick svg{animation:none;stroke-dashoffset:0}
}

/* ---- Skip link — invisible until keyboard-focused ---- */
.skip{position:absolute;left:-9999px;top:0;z-index:1200;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:#fff;padding:14px 22px;border-radius:0 0 6px 0}
.skip:focus{left:0}

/* =========================================================
   SIGNATURE LAYER — contextual cursor · magnetic · line reveal
   ========================================================= */

/* ---- Contextual cursor: dot → ring → labelled disc ---- */
.cursor{display:grid;place-items:center;will-change:transform}
.cursor .clabel{
  position:absolute;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;white-space:nowrap;pointer-events:none;
  opacity:0;transform:scale(.5);transition:opacity .28s var(--ease),transform .28s var(--e-expo)}
.cursor.label{
  width:74px;height:74px;background:rgba(52,87,224,.16);border:1px solid var(--accent-2);
  mix-blend-mode:normal;-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
.cursor.label .clabel{opacity:1;transform:scale(1)}
.cursor.play{width:74px;height:74px;background:rgba(52,87,224,.9);border-color:var(--accent);mix-blend-mode:normal}
.cursor.play .clabel{opacity:1;transform:scale(1)}
.cursor.hidden{opacity:0}
@media (prefers-reduced-motion:reduce){.cursor .clabel{transition:none}}

/* ---- Magnetic elements — JS drives transform; keep transitions tidy on release ---- */
.mag{will-change:transform}
.mag>.mag-i{display:inline-flex;align-items:center;gap:inherit;will-change:transform}
@media (hover:none),(prefers-reduced-motion:reduce){
  .mag,.mag>.mag-i{transform:none!important}
}

/* ---- Display headings: cinematic line-by-line rise ---- */
html.js .disp.lines .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
html.js .disp.lines .ln-i{display:block;transform:translateY(112%);
  transition:transform 1.05s var(--e-expo)}
html.js .disp.lines.lines-in .ln-i{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  html.js .disp.lines .ln-i{transform:none;transition:none}
}