/* Layout: foto a tutto schermo e titoli grotesk enormi in maiuscolo; nero, bianco e il rosso del foulard come unico accento. */
:root{
  --bg:#000000; --bg-2:#101010; --fg:#F4F2EF; --muted:rgba(244,242,239,.6); --line:rgba(244,242,239,.16);
  --accent:#D23B2A; --accent-fg:#FFFFFF; --on-photo:#FFFFFF; --photo-shade:rgba(0,0,0,.55);
  --glass-tint:rgba(255,255,255,.10); --glass-edge:rgba(255,255,255,.38); --glass-text:#FFFFFF;
  --grain-opacity:.10; --grain-blend:screen; --grain-filter:none;
  --display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gut:max(16px, env(safe-area-inset-left, 0px));
  --gut-r:max(16px, env(safe-area-inset-right, 0px));
  --pad:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
/* sempre scuro: sfondo nero e scritte bianche su ogni dispositivo (scelta dell'utente) */

*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-fg)}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}

/* grana pellicola */
.grain{position:fixed;inset:-100%;width:300%;height:300%;pointer-events:none;z-index:90;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);filter:var(--grain-filter);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,7%)}80%{transform:translate(6%,2%)}100%{transform:translate(0,0)}}

/* intro */
.intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.intro__name{display:flex;gap:.25em;overflow:hidden;font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(36px,7vw,96px);line-height:1}
.intro__name span{display:block;transform:translateY(110%)}
.intro__count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- vetro liquido ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:999px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;border:0;transform-style:preserve-3d;will-change:transform}
.btn--sm{height:36px;padding:0 16px;font-size:11px}
.glass{--mx:50%;--my:30%;--press:1;position:relative;color:var(--glass-text);background:var(--glass-tint);
  scale:var(--press);
  -webkit-backdrop-filter:blur(14px) saturate(175%) brightness(1.08);backdrop-filter:blur(14px) saturate(175%) brightness(1.08);
  /* spessore del vetro: luce che entra dall'alto, bagliore che si raccoglie in basso, ombra sotto */
  box-shadow:inset 0 1px 1px rgba(255,255,255,.34), inset 0 -10px 14px -10px rgba(255,255,255,.24), inset 0 12px 16px -14px rgba(0,0,0,.35),
             0 12px 32px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.22);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  overflow:hidden;isolation:isolate}
/* riflesso che segue il puntatore e velo di luce dall'alto */
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(140px 70px at var(--mx) var(--my), rgba(255,255,255,.36), rgba(255,255,255,0) 70%),
             linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 42%, rgba(255,255,255,.07) 100%)}
/* filo di luce sul bordo: acceso in alto a sinistra e in basso a destra, come su un vetro vero */
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.10) 32%, rgba(255,255,255,.04) 62%, rgba(255,255,255,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.glass--red{--glass-tint:color-mix(in srgb, var(--accent) 72%, transparent)}
/* con la rifrazione attiva il vetro e' piu' trasparente: si vede l'immagine piegata sul bordo */
.glass.lg-on:not(.glass--red){background:color-mix(in srgb, var(--glass-tint) 65%, transparent)}
.glass.lg-on.glass--red{--glass-tint:color-mix(in srgb, var(--accent) 62%, transparent)}
/* la goccia: onde disegnate pixel per pixel sopra il pulsante */
.drop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:inherit;z-index:1}
.glass-panel{background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.12);border-radius:22px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:20px;padding:calc(18px + env(safe-area-inset-top,0px)) var(--gut-r) 18px var(--gut);transition:transform .6s var(--ease)}
@media (min-width:901px){.nav{padding-left:var(--pad);padding-right:var(--pad)}}
.nav.is-hidden{transform:translateY(-110%)}
.nav__logo{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:18px;margin-right:auto;color:var(--on-photo);mix-blend-mode:difference}
.nav__menu{display:flex;gap:26px;padding:0 26px;height:46px;align-items:center;border-radius:999px}
.nav__menu a{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;position:relative}
.nav__menu a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav__menu a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{height:46px}
.nav__burger{display:none;width:46px;height:46px;border-radius:50%;cursor:pointer}
.nav__burger span{position:absolute;left:14px;right:14px;height:2px;background:#fff;transition:transform .5s var(--ease)}
.nav__burger span:first-child{top:19px}.nav__burger span:last-child{top:26px}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:45;background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:0 var(--gut-r) 0 var(--gut);gap:4px;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease)}
.mobile-menu.is-open{clip-path:inset(0 0 0 0)}
.mobile-menu>a{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(44px,13vw,64px);line-height:1.05}
.mobile-menu__foot{display:flex;gap:24px;margin-top:36px;font-size:14px;color:var(--muted)}
@media (max-width:900px){.nav__menu,.nav__cta{display:none}.nav__burger{display:block}}

/* ---------- testo ---------- */
.h2{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(48px,9vw,150px);line-height:.86;letter-spacing:-.045em;text-wrap:balance}
.h2--sm{font-size:clamp(36px,4.8vw,78px)}
.line{display:block;overflow:hidden;padding-bottom:.04em}
.line>span{display:block}

/* ---------- apertura ---------- */
.hero{position:relative;height:100vh;height:100svh}
.hero__stage{position:relative;height:100%;overflow:hidden;background:#000}
.hero__canvas,.hero__fallback{position:absolute;inset:0;width:100%;height:100%}
.hero__fallback{object-fit:cover;object-position:50% 0;opacity:0}
.hero.no-gl .hero__fallback{opacity:1}
.hero.no-gl .hero__canvas{display:none}
.hero__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 48%,rgba(0,0,0,.7) 100%)}
.hero__copy{position:absolute;left:0;right:0;bottom:0;padding:0 var(--gut-r) clamp(28px,6vh,64px) var(--gut);color:var(--on-photo);display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px}
@media (min-width:901px){.hero__copy{padding-left:var(--pad);padding-right:var(--pad)}}
.hero__kicker{grid-column:1/-1;font-size:14px;line-height:1.45;color:rgba(255,255,255,.82)}
.hero__title{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(72px,11.5vw,210px);line-height:.8;letter-spacing:-.055em;margin-left:-.04em}
.hero__actions{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.hero__frame{position:absolute;top:50%;right:calc(var(--gut-r) + 4px);transform:translateY(-50%) rotate(90deg);transform-origin:right center;display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.75)}
.hero__frame i{width:60px;height:2px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.hero__frame i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left}
@media (max-width:900px){
  .hero__copy{grid-template-columns:1fr;padding-bottom:96px}
  .hero__title{font-size:clamp(64px,21vw,140px)}
  .hero__actions{flex-direction:row;flex-wrap:wrap}
  .hero__actions .btn{flex:1 1 auto;padding:0 18px}
  .hero__frame{display:none}
}

/* ---------- manifesto ---------- */
.manifesto{padding:clamp(110px,20vh,220px) var(--gut-r) clamp(110px,20vh,220px) var(--gut);max-width:1400px}
@media (min-width:901px){.manifesto{padding-left:var(--pad);padding-right:var(--pad)}}
.manifesto__text{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.4vw,68px);line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
.manifesto__text .w{opacity:.16}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}
.marquee__track{display:flex;width:max-content;gap:36px;align-items:center;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(40px,7vw,110px);line-height:.9;letter-spacing:-.04em;white-space:nowrap}
.marquee__track b{width:.28em;height:.28em;background:var(--accent);border-radius:50%}

/* ---------- lavori ---------- */
.works{position:relative;padding-top:clamp(80px,12vh,140px);overflow:hidden}
.works__head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;padding:0 var(--gut-r) 0 var(--gut);margin-bottom:36px}
@media (min-width:901px){.works__head{padding-left:var(--pad);padding-right:var(--pad)}}
.works__hint{font-size:14px;color:var(--muted)}
.works__track{display:flex;gap:clamp(20px,3vw,44px);padding:0 var(--pad) clamp(70px,10vh,120px);align-items:flex-start;width:max-content}
.work{flex:none;position:relative;cursor:pointer}
.work__img{position:relative;overflow:hidden;clip-path:inset(10% 10% 10% 10%);height:100%}
.work__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.work--tall{width:clamp(280px,29vw,500px);height:min(58vh,620px)}
.work--mid{width:clamp(240px,23vw,400px);height:min(45vh,480px)}
.work--small{width:clamp(200px,18vw,320px);height:min(35vh,380px)}
.work--low{margin-top:8vh}
.work--high{margin-top:3vh}
.work figcaption{margin-top:12px;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.works__end{flex:none;align-self:center;width:clamp(240px,24vw,380px);aspect-ratio:1;max-width:100%;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(24px,2.4vw,38px);line-height:.95;letter-spacing:-.03em;transition:transform .8s var(--ease)}
.works__end:hover{transform:scale(1.05) rotate(-4deg)}
@media (max-width:900px){
  .works__track{flex-direction:column;width:auto;gap:52px;padding-left:var(--gut);padding-right:var(--gut-r)}
  .work,.work--tall,.work--mid,.work--small{width:100%;height:auto;margin-top:0}
  .work__img{aspect-ratio:4/5}
  .work--small,.work--mid{width:80%}
  .work:nth-child(even){align-self:flex-end}
  .works__end{align-self:center;width:80%}
}

/* effetto pellicola: lampo di luce quando la foto entra */
.leak{position:absolute;inset:-20%;pointer-events:none;z-index:2;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(60% 50% at 30% 40%, rgba(255,240,220,.95), rgba(255,140,60,.75) 35%, rgba(210,59,42,.55) 60%, rgba(210,59,42,0) 80%)}

/* mirino al passaggio del mouse */
.vf{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s}
.vf i{position:absolute;width:22px;height:22px;border:2px solid #fff;transition:transform .5s var(--ease)}
.vf i:nth-child(1){top:14px;left:14px;border-right:0;border-bottom:0;transform:translate(-10px,-10px)}
.vf i:nth-child(2){top:14px;right:14px;border-left:0;border-bottom:0;transform:translate(10px,-10px)}
.vf i:nth-child(3){bottom:14px;left:14px;border-right:0;border-top:0;transform:translate(-10px,10px)}
.vf i:nth-child(4){bottom:14px;right:14px;border-left:0;border-top:0;transform:translate(10px,10px)}
.vf b{position:absolute;top:0;left:0;width:46px;height:46px;margin:-23px 0 0 -23px;border:1.5px solid #fff;transform:translate(var(--fx,50%),var(--fy,50%))}
.vf b::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;background:var(--accent);border-radius:50%}
.vf.is-locked b{border-color:var(--accent)}
.vf em{position:absolute;left:16px;bottom:44px;font-style:normal;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.12em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
[data-photo]:hover .vf{opacity:1}
[data-photo]:hover .vf i{transform:none}
[data-photo] img{transition:filter .5s var(--ease)}
[data-photo].is-focusing img{filter:blur(5px) brightness(1.05)}
@media (hover:none){.vf{display:none}}

/* ---------- immagine piena ---------- */
.wide{position:relative;height:115vh;overflow:hidden}
.wide__img{position:absolute;inset:-15% 0}
.wide__img img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.wide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,transparent 16%,transparent 66%,rgba(0,0,0,.6) 100%)}
.wide__text{position:absolute;left:var(--gut);right:var(--gut-r);bottom:10vh;z-index:2;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;color:var(--on-photo);font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,4.6vw,78px);letter-spacing:-.045em;line-height:.9}
@media (min-width:901px){.wide__text{left:var(--pad);right:var(--pad)}}

/* ---------- chi sono ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,7vw,110px);padding:clamp(100px,16vh,190px) var(--gut-r) clamp(100px,16vh,190px) var(--gut);align-items:center}
@media (min-width:901px){.about{padding-left:var(--pad);padding-right:var(--pad)}}
.about__img{position:relative;overflow:hidden;aspect-ratio:4/5;max-width:100%;clip-path:inset(0 0 100% 0)}
.about__img img{width:100%;height:118%;object-fit:cover}
.about__text{min-width:0}
.about .h2{margin-bottom:32px}
.about__body{font-size:clamp(16px,1.25vw,19px);color:var(--muted);max-width:56ch;margin-bottom:14px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;border-top:1px solid var(--line);padding-top:26px}
.stats dt{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(26px,2.8vw,44px);line-height:1;letter-spacing:-.03em;margin-bottom:8px}
.stats dd{font-size:13px;color:var(--muted)}
@media (max-width:900px){.about{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}

/* ---------- servizi ---------- */
.services{padding:clamp(80px,12vh,150px) var(--gut-r) clamp(80px,12vh,150px) var(--gut)}
@media (min-width:901px){.services{padding-left:var(--pad);padding-right:var(--pad)}}
.services .h2{margin-bottom:44px}
.services__list{list-style:none;border-top:1px solid var(--line)}
.service{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:clamp(20px,3vw,36px) 0;border-bottom:1px solid var(--line);position:relative;isolation:isolate}
.service::before{content:"";position:absolute;inset:0 calc(-1 * var(--pad));background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1}
.service__name{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,4.6vw,72px);line-height:.95;letter-spacing:-.04em;transition:transform .6s var(--ease)}
.service__for{font-size:14px;color:var(--muted);transition:color .4s}
@media (hover:hover){
  .service:hover::before{transform:scaleY(1)}
  .service:hover{color:var(--accent-fg)}
  .service:hover .service__name{transform:translateX(20px)}
  .service:hover .service__for{color:var(--accent-fg)}
}

/* ---------- contatti ---------- */
.contact{position:relative;overflow:hidden;padding:clamp(100px,16vh,180px) var(--gut-r) clamp(80px,12vh,140px) var(--gut);color:var(--on-photo);min-height:100vh;background:#000}
@media (min-width:901px){.contact{padding-left:var(--pad);padding-right:var(--pad)}}
.contact__bg{position:absolute;inset:-10% 0}
.contact__canvas,.contact__fallback{position:absolute;inset:0;width:100%;height:100%}
.contact__fallback{object-fit:cover;opacity:0}
.contact.no-gl .contact__fallback{opacity:1}
.contact.no-gl .contact__canvas{display:none}
.contact__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.45) 55%,rgba(0,0,0,.25) 100%)}
.contact__inner{position:relative;z-index:2}
.contact__title{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(50px,10vw,170px);line-height:.84;letter-spacing:-.05em;margin-bottom:clamp(40px,7vh,84px)}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:start}
.contact__big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.25);padding:20px 0}
.contact__big span{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.04em;line-height:1;transition:transform .6s var(--ease),color .3s}
.contact__big small{font-size:15px;color:rgba(255,255,255,.75);overflow-wrap:anywhere}
a.contact__big:hover span{transform:translateX(10px);color:var(--accent)}
.contact__mail .btn{margin-left:auto;align-self:center}
.selectable{user-select:all}
.form{display:grid;gap:18px;padding:clamp(22px,3vw,38px)}
.form label{display:grid;gap:6px}
.form label span{font-size:13px;color:rgba(255,255,255,.7)}
.form input,.form select,.form textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);color:#fff;font:inherit;font-size:16px;padding:8px 0;border-radius:0}
.form select option{color:#000}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form .btn{justify-self:start;margin-top:6px}
.form__out{font-size:15px}
.form__out a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.contact__grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- footer ---------- */
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:26px var(--gut-r) 26px var(--gut);font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
@media (max-width:900px){.footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}}

/* ---------- WhatsApp fisso su telefono ---------- */
.wa-float{display:none}
@media (max-width:900px){
  .wa-float{display:flex;position:fixed;left:var(--gut);right:var(--gut-r);bottom:calc(14px + env(safe-area-inset-bottom,0px));height:54px;z-index:60;transform:translateY(160%);transition:transform .7s var(--ease)}
  .wa-float.is-visible{transform:none}
}

/* ---------- pagina progetto ---------- */
.project{position:fixed;inset:0;z-index:70;background:var(--bg);overflow-y:auto;visibility:hidden;opacity:0}
.project.is-open{visibility:visible;opacity:1}
.project__close{position:fixed;top:calc(18px + env(safe-area-inset-top,0px));right:var(--gut-r);z-index:3}
.project__hero{position:relative;height:100vh;height:100svh;overflow:hidden}
.project__hero img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.project__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.65))}
.project__title{position:absolute;left:var(--gut);bottom:5vh;z-index:2;color:var(--on-photo);font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(64px,15vw,240px);line-height:.8;letter-spacing:-.055em}
.project__body{padding:clamp(48px,8vh,96px) var(--gut-r) clamp(60px,10vh,120px) var(--gut)}
.project__note{max-width:56ch;color:var(--muted);font-size:17px;margin-bottom:40px}
.project__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.project__grid img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:600px){.project__grid{grid-template-columns:minmax(0,1fr)}}
.flip-clone{position:fixed;z-index:80;object-fit:cover;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .grain{animation:none}
  *{transition-duration:.01ms!important}
}

/* nav sopra la pagina (non sopra la foto): il vetro prende i colori della pagina */
.nav.is-scrolled .glass:not(.glass--red){--glass-tint:color-mix(in srgb, var(--bg) 62%, transparent);--glass-text:var(--fg);--glass-edge:var(--line)}
.nav.is-scrolled .nav__logo{mix-blend-mode:normal;color:var(--fg)}
.nav__burger span{background:var(--glass-text)}
.project__close{--glass-tint:rgba(0,0,0,.38)}

/* ---------- nav: icona Instagram ---------- */
.nav__menu svg{display:block}
.nav__menu a[aria-label]::after{display:none}

/* ---------- pubblicazioni e brand ---------- */
.press{display:grid;gap:clamp(48px,8vh,90px);padding:0 var(--gut-r) clamp(90px,14vh,160px) var(--gut)}
@media (min-width:901px){.press{padding-left:var(--pad);padding-right:var(--pad)}}
.press__row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:24px;align-items:center;border-top:1px solid var(--line);padding-top:28px}
.press__label{font-family:var(--body);font-weight:400;font-size:15px;color:var(--muted)}
.press__list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(22px,3.4vw,56px)}
.logo{color:var(--fg);line-height:1;white-space:nowrap;opacity:.88;transition:opacity .3s,color .3s}
.logo:hover{opacity:1;color:var(--accent)}
.logo--officiel{font-family:"Bodoni Moda",Didot,serif;font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(20px,2vw,30px)}
.logo--elle{font-family:"Bodoni Moda",Didot,serif;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(34px,3.6vw,56px)}
.logo--vogue{font-family:"Bodoni Moda",Didot,serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(32px,3.4vw,54px)}
.logo--vanguard{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;font-size:clamp(22px,2.2vw,34px)}
.logo--vous{font-family:"Bodoni Moda",Didot,serif;font-style:italic;font-weight:600;font-size:clamp(30px,3vw,46px)}
.logo--modic{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.32em;font-size:clamp(13px,1.2vw,17px)}
.logo--brand{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(22px,2.6vw,40px)}
.logo--more{font-size:15px;color:var(--muted)}
@media (max-width:700px){.press__row{grid-template-columns:minmax(0,1fr)}.logo{white-space:normal}}

/* ---------- Cosmo: anteprima nella pagina ---------- */
.cosmo-teaser{position:relative;height:100vh;min-height:620px;overflow:hidden;display:grid;place-items:center;text-align:center}
.cosmo-teaser__orbit{position:absolute;inset:0;pointer-events:none}
.cosmo-teaser__orbit img{position:absolute;left:50%;top:50%;width:calc(clamp(90px,11vw,170px) * var(--s));aspect-ratio:3/4;object-fit:cover;opacity:.85;
  transform:translate(-50%,-50%) translate(calc(cos(var(--a) + var(--rot,0) * 6.2832rad) * 42vw * var(--r)), calc(sin(var(--a) + var(--rot,0) * 6.2832rad) * 36vh * var(--r)))}
.cosmo-teaser__copy{position:relative;z-index:2;display:grid;justify-items:center;gap:20px;padding:0 var(--gut-r) 0 var(--gut);max-width:640px}
.cosmo-teaser__title{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(80px,18vw,300px);line-height:.8;letter-spacing:-.06em}
.cosmo-teaser__text{color:var(--muted);font-size:17px;max-width:40ch}
@media (max-width:700px){.cosmo-teaser__orbit img{opacity:.5}}

/* ---------- Cosmo: tela a tutto schermo ---------- */
.cosmo{position:fixed;inset:0;z-index:75;background:var(--bg);visibility:hidden;overflow:hidden;touch-action:none}
.cosmo.is-open{visibility:visible}
.cosmo__field{position:absolute;inset:0;cursor:grab;transform-origin:50% 50%}
.cosmo.is-dragging .cosmo__field{cursor:grabbing}
.cosmo__item{position:absolute;top:0;left:0;will-change:transform}
.cosmo__item img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none;transition:filter .4s}
@media (hover:hover){.cosmo__item:hover img{filter:brightness(1.12)}}
.cosmo__ui{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:16px;padding:calc(16px + env(safe-area-inset-top,0px)) var(--gut-r) 16px var(--gut);pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.6),transparent)}
.cosmo__ui > *{pointer-events:auto}
.cosmo__name{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:22px;letter-spacing:-.03em}
.cosmo__hint{font-size:14px;color:var(--muted);margin-right:auto}
@media (max-width:700px){.cosmo__hint{display:none}.cosmo__name{margin-right:auto}}
.cosmo__view{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:calc(70px + env(safe-area-inset-top,0px)) var(--gut-r) calc(24px + env(safe-area-inset-bottom,0px)) var(--gut)}
.cosmo__view[hidden]{display:none!important}
.cosmo__view img{max-width:100%;max-height:100%;object-fit:contain}
.cosmo__back{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:var(--gut-r)}

/* ---------- riviste principali con logo, le altre in piccolo ---------- */
.press__mags{display:grid;gap:18px;min-width:0}
.press__logos{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,5vw,80px)}
.mag{display:block;width:auto;max-width:100%;opacity:.92;transition:opacity .3s}
.mag:hover{opacity:1}
.mag--officiel{height:clamp(30px,3.6vw,52px)}
.mag--elle{height:clamp(34px,4.2vw,60px)}
.mag--vogue{height:clamp(32px,3.9vw,56px)}
.press__minor{font-size:15px;color:var(--muted)}

/* ---------- quattro foto in dissolvenza lenta ---------- */
.wide__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:0;
  animation:wideFade 28s linear infinite both}
.wide__img img:nth-child(1){animation-delay:-2.5s}
.wide__img img:nth-child(2){animation-delay:4.5s}
.wide__img img:nth-child(3){animation-delay:11.5s}
.wide__img img:nth-child(4){animation-delay:18.5s}
@keyframes wideFade{
  0%{opacity:0;transform:scale(1.02)}
  9%{opacity:1}
  25%{opacity:1}
  34%{opacity:0;transform:scale(1.09)}
  100%{opacity:0;transform:scale(1.09)}
}
@media (prefers-reduced-motion: reduce){
  .wide__img img{animation:none}
  .wide__img img:first-child{opacity:1}
}

/* ---------- correzioni 10 nov: Cosmo centrato, foto arrotondate, dissolvenze piu' morbide ---------- */
.cosmo-teaser__copy{max-width:none;width:100%}
.cosmo-teaser__title{padding-left:.06em}
.cosmo-teaser__text{margin-inline:auto}
.cosmo-teaser__orbit img{border-radius:clamp(18px,2vw,34px);aspect-ratio:4/5;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.cosmo-teaser__orbit img:nth-child(3n){border-radius:999px;aspect-ratio:1}
.cosmo-teaser__orbit img:nth-child(4n+1){border-radius:999px 999px clamp(18px,2vw,34px) clamp(18px,2vw,34px)}
.cosmo__item img{border-radius:14px}
@keyframes wideFade{
  0%{opacity:0;transform:scale(1)}
  9%{opacity:1}
  25%{opacity:1}
  34%{opacity:0;transform:scale(1.04)}
  100%{opacity:0;transform:scale(1.04)}
}
.wide__img img{image-rendering:auto}

/* scelta dell'apertura (solo per la prova) */
.hero-pick{position:fixed;left:var(--gut);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:65;display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px}
.hero-pick span{font-size:12px;padding:0 8px 0 10px;color:#fff}
.hero-pick a{font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:9px 14px;border-radius:999px;color:#fff}
.hero-pick a[aria-current="true"]{background:var(--accent)}
@media (max-width:900px){.hero-pick{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* ---------- Cosmo: due rullini 35 mm che scorrono in versi opposti ---------- */
.cosmo-teaser{height:auto;min-height:0;display:block;text-align:center;padding:clamp(90px,14vh,160px) 0 clamp(80px,12vh,140px)}
.cosmo-teaser__copy{padding:0 var(--gut-r) 0 var(--gut);display:grid;justify-items:center;gap:18px}
.cosmo-teaser__cta{display:flex;justify-content:center;padding:0 var(--gut-r) 0 var(--gut)}
.films{display:grid;gap:clamp(18px,3vw,34px);margin:clamp(40px,7vh,72px) 0;transform:rotate(-2.5deg);width:112%;margin-left:-6%}
.film{--hole:#e9e1d3;position:relative;overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg,#120d0a,#1b1410 50%,#120d0a);padding:34px 0;
  box-shadow:0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04)}
/* fori di trascinamento sopra e sotto */
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:11px;z-index:2;pointer-events:none;
  background-image:linear-gradient(var(--hole),var(--hole));background-size:14px 11px;background-repeat:repeat-x;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 14px,transparent 14px 26px);mask:repeating-linear-gradient(90deg,#000 0 14px,transparent 14px 26px);
  background-size:100% 100%;border-radius:2px;opacity:.85;filter:drop-shadow(0 0 2px rgba(255,220,180,.25))}
.film::before{top:11px}
.film::after{bottom:11px}
.film__track{display:flex;gap:12px;width:max-content;padding-left:12px;animation:filmMove 160s linear infinite}
.film--rev .film__track{animation-direction:reverse;animation-duration:180s}
.film:hover .film__track{animation-play-state:paused}
@keyframes filmMove{to{transform:translateX(-50%)}}
.frame{position:relative;flex:none;margin:0}
.frame img{display:block;height:clamp(160px,19vw,280px);aspect-ratio:2/3;width:auto;object-fit:cover;border-radius:7px;
  filter:saturate(.92) contrast(1.04);transition:filter .5s var(--ease),transform .6s var(--ease)}
.film:hover .frame img{filter:saturate(1) contrast(1.06) brightness(1.06)}
.frame__edge{position:absolute;left:4px;top:-25px;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.14em;color:#E9A23B;white-space:nowrap;opacity:.9}
.frame__edge i{font-style:normal;margin:0 6px}
.frame__edge--b{top:auto;bottom:-25px;letter-spacing:.3em}
@media (max-width:700px){
  .films{transform:rotate(-2deg)}
  .frame img{height:150px}
  .film{padding:30px 0}
}
@media (prefers-reduced-motion: reduce){.film__track{animation:none}}

/* fori che scorrono insieme alla pellicola */
.film::before,.film::after{display:none}
.film__track{position:relative}
.film__track::before,.film__track::after{content:"";position:absolute;left:0;right:0;height:11px;pointer-events:none;
  background:repeating-linear-gradient(90deg,#e9e1d3 0 14px,transparent 14px 26px);border-radius:2px;opacity:.85}
.film__track::before{top:-23px}
.film__track::after{bottom:-23px}
/* meno vuoto nero tra l'apertura bruciata e il testo */
.manifesto{padding-top:clamp(36px,7vh,80px)}
/* il testo dopo l'apertura sale sopra la parte gia' bruciata (in basso e' gia' nera) */
.manifesto{position:relative;z-index:3;margin-top:-38vh}
@media (max-width:900px){.manifesto{margin-top:-28vh}}

/* ---------- tasto lingua IT / EN ---------- */
.lang{display:flex;align-items:center;gap:2px;height:46px;padding:4px;border-radius:999px}
.lang button{border:0;background:transparent;cursor:pointer;height:38px;min-width:40px;padding:0 10px;border-radius:999px;
  font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--glass-text);opacity:.65;transition:background .3s,opacity .3s}
.lang button[aria-pressed="true"]{background:var(--accent);color:#fff;opacity:1}
.lang button:hover{opacity:1}
.nav.is-scrolled .lang{--glass-tint:color-mix(in srgb, var(--bg) 62%, transparent);--glass-text:var(--fg);--glass-edge:var(--line)}
@media (max-width:900px){.lang{height:42px}.lang button{height:34px;min-width:36px;padding:0 8px}}

/* ---------- chi sono: il 10 enorme ---------- */
.about__lead{color:var(--fg)}
.about__cta{margin-top:14px}
.stats{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);align-items:end}
.stats__big dt{font-size:clamp(110px,14vw,230px);line-height:.78;letter-spacing:-.07em;color:var(--fg)}
.stats__big dd{font-size:15px;color:var(--fg)}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}.stats__big{grid-column:1/-1}}

/* ---------- servizi ---------- */
.services .h2{margin-bottom:14px}
.services__hint{color:var(--muted);font-size:16px;margin-bottom:36px}
.project__cta{margin-top:40px}
.project__note{color:var(--fg);opacity:.75}

/* ---------- pellicola: fori arrotondati veri, testi arancio tra fori e fotogrammi ---------- */
.film{padding:46px 0}
.film__track::before,.film__track::after{height:12px;opacity:1;border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect x='7' y='0' width='14' height='12' rx='2.6' fill='%23ece4d6'/%3E%3C/svg%3E") repeat-x 0 0 / 28px 12px}
.film__track::before{top:-38px}
.film__track::after{bottom:-38px}
.frame__edge{top:-21px;font-size:9px;letter-spacing:.18em;color:#F0A23A;text-shadow:0 0 6px rgba(240,162,58,.35)}
.frame__edge--b{top:auto;bottom:-21px}
.film::after{display:block;content:"";position:absolute;inset:0;pointer-events:none;height:auto;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 12%,transparent 88%,rgba(0,0,0,.55));-webkit-mask:none;mask:none;filter:none;opacity:1}
@media (max-width:700px){.film{padding:40px 0}.film__track::before{top:-33px}.film__track::after{bottom:-33px}}
/* il mare si deve vedere: velo scuro piu' leggero, piu' scuro solo dietro i testi in basso */
.contact__bg::after{background:linear-gradient(90deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.22) 50%,rgba(0,0,0,.08) 100%),linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%)}
/* finche' il mare animato non e' pronto si vede la foto ferma (niente nero) */
.contact__fallback{opacity:1;transition:opacity .6s}
.contact.gl-ready .contact__fallback{opacity:0}
.form__sent{font-size:15px;color:#fff;background:rgba(46,160,90,.25);padding:10px 14px;border-radius:12px}
.form__error{font-size:15px;color:#fff;background:rgba(210,59,42,.3);padding:10px 14px;border-radius:12px}

/* ---------- rifiniture del 10 nov (sera) ---------- */
/* mirino: la messa a fuoco "cerca" il punto (va oltre e torna), poi aggancia */
[data-photo].is-focusing img{filter:none;animation:afHunt .6s cubic-bezier(.3,.7,.2,1) both}
@keyframes afHunt{0%{filter:blur(7px) brightness(1.04)}42%{filter:blur(0)}62%{filter:blur(2.4px)}100%{filter:blur(0)}}
.vf.is-locked b{animation:afLock .28s cubic-bezier(.2,1.6,.4,1)}
@keyframes afLock{0%{scale:1.35}100%{scale:1}}

/* pellicola 35 mm: 8 fori per fotogramma, come quella vera, attaccati al fotogramma (scorrono con lui) */
.film__track{animation:none!important;will-change:transform}
.film__track::before,.film__track::after{display:none}
.frame::before,.frame::after{content:"";position:absolute;left:-6px;right:-6px;height:12px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 12' preserveAspectRatio='none'%3E%3Crect x='7.5' y='0.5' width='13' height='11' rx='2.4' fill='%23ece4d6'/%3E%3C/svg%3E") repeat-x 0 0 / 12.5% 100%}
.frame::before{top:-38px}
.frame::after{bottom:-38px}
@media (max-width:700px){.frame::before{top:-33px}.frame::after{bottom:-33px}}

/* menu: le voci non vanno mai a capo; sotto i 1100 px si passa al menu a comparsa */
.nav__logo,.nav__menu a{white-space:nowrap}
@media (max-width:1100px){.nav__menu,.nav__cta{display:none}.nav__burger{display:block}}

/* ---------- dati obbligatori e privacy ---------- */
.footer__links{display:flex;gap:20px;flex-wrap:wrap}
.footer a:hover{color:var(--fg)}
.vat{color:var(--fg)}
.form__privacy{font-size:12px;color:rgba(255,255,255,.6);margin-top:-4px}
.form__privacy a{text-decoration:underline;text-underline-offset:2px}


/* ---------- novita' (GSAP + Lenis + effetti ispirati a React Bits) ---------- */
/* titoli: maschera per le parole che salgono */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.sw>span{display:inline-block;will-change:transform}
/* galleria progetto: colonne con le foto intere (non piu' ritagliate) che compaiono scorrendo */
.project__grid{display:block;columns:2;column-gap:clamp(12px,2vw,28px)}
.project__grid img{aspect-ratio:auto;height:auto;margin-bottom:clamp(12px,2vw,28px);break-inside:avoid;display:block;
  opacity:0;transform:translateY(60px) scale(1.03);clip-path:inset(12% 0 0 0);transition:opacity 1s var(--ease),transform 1.2s var(--ease),clip-path 1.2s var(--ease)}
.project__grid img.is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
@media (max-width:600px){.project__grid{columns:1}}
@media (prefers-reduced-motion:reduce){.project__grid img{opacity:1;transform:none;clip-path:none;transition:none}}
/* servizi: bagliore che segue il mouse */
@media (hover:hover){.service::after{content:"";position:absolute;inset:0 calc(-1 * var(--pad));background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.22),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:-1;mix-blend-mode:overlay}
  .service:hover::after{opacity:1}}