/* =======================================================
   Fluids Studio — Danilo Picicci
   ======================================================= */

/* =============== FONT =================================
   Serviti dal nostro dominio, non da Google: nessun IP dei
   visitatori esce verso terzi e non serve una connessione in più.
   File in assets/fonts/, licenza SIL OFL (copia accanto ai woff2).

   `unicode-range` fa sì che il browser scarichi latin-ext solo se
   la pagina contiene davvero caratteri fuori dal latino base:
   per un sito in italiano, di norma non lo scarica mai.
   `font-display:swap` mostra subito il fallback ed evita il testo
   invisibile mentre il woff2 arriva.
   ======================================================= */

/* --- Inter Tight (sans) · pesi realmente usati: 300, 400, 500 --- */
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:300; font-display:swap;
  src:url(assets/fonts/inter-tight-latin-300-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:400; font-display:swap;
  src:url(assets/fonts/inter-tight-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:500; font-display:swap;
  src:url(assets/fonts/inter-tight-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:300; font-display:swap;
  src:url(assets/fonts/inter-tight-latin-ext-300-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:400; font-display:swap;
  src:url(assets/fonts/inter-tight-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter Tight"; font-style:normal; font-weight:500; font-display:swap;
  src:url(assets/fonts/inter-tight-latin-ext-500-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* --- Instrument Serif · solo 400, tondo e corsivo --- */
@font-face{
  font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url(assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url(assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url(assets/fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url(assets/fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#07070a;
  --bg-soft:#0d0d12;
  --ink:#f4f2ee;
  --ink-dim:#c2c0c9;      /* 11.2:1 su sfondo — leggibile anche a 12px */
  --ink-faint:#a3a1ac;    /* solo per micro-testi decorativi */
  --line:rgba(255,255,255,.14);
  --accent:#7c5cff;
  --accent-text:#9b83ff;  /* versione schiarita per testi piccoli */
  --accent-2:#00e2b8;
  --accent-3:#ff5c8a;
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pad:clamp(20px, 5vw, 90px);
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;  /* impedisce a iOS di ingrandire i testi da solo */
  overflow-x:hidden;              /* nessuno scorrimento laterale accidentale */
}

/* Blocca lo zoom (pinch e doppio tap) solo sui touch screen.
   Da iOS 10 in poi Safari ignora "user-scalable=no" nel meta viewport, quindi
   pan-y è l'unico modo che funziona davvero: lascia libero lo scroll verticale
   e blocca il resto.

   ⚠ Da sapere: impedire l'ingrandimento è una violazione WCAG 1.4.4 e Lighthouse
   la segnala nell'audit di accessibilità. Chi ha problemi di vista non può
   ingrandire il testo. Se il punteggio di accessibilità conta (e per un sito
   che vende siti probabilmente sì), basta cancellare questo blocco: il layout
   regge lo zoom senza rompersi, l'unico effetto collaterale è il doppio tap
   che a volte ingrandisce per sbaglio. */
@media (hover:none){
  html, body{ touch-action:pan-y; }
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; height:100vh; }
@media (hover:hover){
  body, a, button{ cursor:none; }
}

a{ color:inherit; text-decoration:none; }
em{ font-family:var(--serif); font-style:italic; font-weight:400; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- scrollbar ---------- */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#26262e; border-radius:9px; }
::-webkit-scrollbar-thumb:hover{ background:#3a3a46; }

/* =============== PRELOADER =============== */
.loader{
  position:fixed; inset:0; z-index:200;
  /* fondo pieno solo finché la tenda non prende il comando: evita che un JS
     lento lasci intravedere la pagina nel primo fotogramma */
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
}
/* il path che copre lo schermo; a fine sequenza risale ondeggiando */
.loader__curtain{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block; pointer-events:none;
}
.loader__inner{
  position:relative;
  width:min(460px, 84vw); text-align:center;
}
.loader__mark{
  width:clamp(96px,15vw,132px); height:clamp(96px,15vw,132px);
  display:block; margin:0 auto 26px;
  overflow:visible;
}
#loaderRingBg{ opacity:0; }
/* l'anello parte "non disegnato": pathLength=1 permette di usare valori
   normalizzati (0 = pieno, 1 = vuoto) invece della circonferenza reale */
.loader__ring{ stroke-dasharray:1; stroke-dashoffset:1; }
#loaderWave, #loaderWave2{ stroke-dasharray:1; stroke-dashoffset:1; }
#loaderDropPos{ opacity:0; }
#loaderPing{ opacity:0; }

/* wordmark che si riempie di liquido */
.loader__word{
  width:min(330px, 74vw); height:auto;
  display:block; margin:0 auto; overflow:visible;
  opacity:0;
}
.lw{
  font-family:var(--sans);
  font-size:21px; font-weight:300; letter-spacing:7.5px;
}
.lw--ghost{ fill:rgba(244,242,238,.15); }
.lw--fill{ fill:url(#gWord); }

/* niente coreografia se l'utente ha chiesto meno movimento */
@media (prefers-reduced-motion:reduce){
  #loaderRingBg, .loader__word, #loaderDropPos{ opacity:1; }
  .loader__ring, #loaderWave, #loaderWave2{ stroke-dashoffset:0; }
}

/* =============== CURSOR =============== */
/* goccia liquida: nessun anello, si allunga nella direzione del movimento */
.cursor{
  position:fixed; top:0; left:0; z-index:150;
  width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 20px rgba(0,226,184,.4), 0 0 6px rgba(124,92,255,.5);
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  transition:width .4s var(--ease), height .4s var(--ease),
             background .4s, box-shadow .4s;
}
.cursor.is-hover{
  width:58px; height:58px;
  background:rgba(124,92,255,.22);
  box-shadow:0 0 32px rgba(124,92,255,.28);
  backdrop-filter:blur(3px);
}
.cursor__label{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); opacity:0; transform:scale(.7);
  transition:opacity .3s, transform .3s var(--ease); white-space:nowrap;
}
.cursor.is-label{ background:rgba(124,92,255,.9); box-shadow:0 0 30px rgba(124,92,255,.5); }
.cursor.is-label .cursor__label{ opacity:1; transform:scale(1); }

@media (hover:none), (max-width:900px){ .cursor{ display:none; } }

/* =============== CANVAS / GRAIN =============== */
#scene{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.grain{
  position:fixed; inset:-200%; z-index:1; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-10%)}
  30%{transform:translate(3%,-15%)} 50%{transform:translate(-8%,5%)}
  70%{transform:translate(6%,8%)} 90%{transform:translate(-3%,12%)}
}

/* velo scuro sopra il 3D: mantiene leggibile il testo senza spegnere la scena */
.scrim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(7,7,10,.30), rgba(7,7,10,.62) 75%),
    linear-gradient(180deg, rgba(7,7,10,.35), rgba(7,7,10,.5));
}

main, .nav, .footer{ position:relative; z-index:2; }

/* =============== NAV =============== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  transition:background .4s, backdrop-filter .4s, padding .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,7,10,.72); backdrop-filter:blur(14px);
  padding:14px var(--pad); border-bottom-color:var(--line);
}
.nav__logo{ display:flex; align-items:center; }
.nav__mark{
  width:36px; height:36px; display:block;
  transition:transform .5s var(--ease);
}
.nav__logo:hover .nav__mark{ transform:rotate(18deg); }
.nav__links{ display:flex; gap:34px; font-size:14.5px; color:var(--ink-dim); }
.nav__links a{ position:relative; transition:color .3s; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background:var(--ink); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__cta{
  font-size:13.5px; padding:9px 20px; border:1px solid rgba(255,255,255,.22);
  border-radius:100px; transition:background .35s, color .35s, border-color .35s;
}
.nav__cta:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
@media (max-width:900px){ .nav__links{ display:none; } }

/* =============== TYPOGRAPHY HELPERS =============== */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim);
}
.pulse{
  width:6px; height:6px; border-radius:50%; background:var(--accent-2);
  box-shadow:0 0 0 0 rgba(0,226,184,.6); animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(0,226,184,.55)}
  70%{box-shadow:0 0 0 12px rgba(0,226,184,0)}
  100%{box-shadow:0 0 0 0 rgba(0,226,184,0)}
}
.h2{
  font-size:clamp(34px, 5.4vw, 76px);
  line-height:1.02; letter-spacing:-.035em; font-weight:400;
  margin-bottom:clamp(40px,6vw,74px);
}
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word i{ display:inline-block; font-style:inherit; }

/* =============== SECTION =============== */
.section{ padding:clamp(90px,13vh,170px) var(--pad); }
.sec-head{
  display:flex; align-items:center; gap:14px;
  padding-bottom:16px; margin-bottom:clamp(38px,6vw,70px);
  border-bottom:1px solid var(--line);
  font-size:12.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim);
}
.sec-num{ color:var(--accent-text); }

/* =============== HERO =============== */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px var(--pad) 44px;
}

/* logotipo "Fluid Studio": icona a cerchio (onda animata) + scritta */
.brandmark{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  margin-bottom:clamp(20px,3vw,32px);
  opacity:0; /* rivelato da GSAP nell'intro */
}
.brandmark__icon{
  width:clamp(66px,8.4vw,86px); height:clamp(66px,8.4vw,86px);
  flex:none; overflow:visible;
  /* alone luminoso: stacca l'onda dal fondo scuro e la rende molto più visibile */
  filter:drop-shadow(0 0 10px rgba(124,92,255,.55)) drop-shadow(0 0 22px rgba(0,226,184,.28));
}
.brandmark__wave{
  /* tratto più lungo e visibile, che scorre più velocemente */
  stroke-dasharray:.34 .66;
  animation:brandflow 2s linear infinite;
}
@keyframes brandflow{ to{ stroke-dashoffset:-1; } }
/* logotipo lineare: maiuscolo leggero e spaziato, come una maison.
   Il peso 300 e la tracciatura ampia danno l'aria "lusso minimal";
   il contrasto di colore separa le due parole senza bisogno di simboli. */
.brandmark__word{
  display:flex; flex-direction:column; align-items:flex-start; gap:.42em;
  line-height:1;
  font-size:clamp(15px,1.9vw,22px);
  text-transform:uppercase;
}
.brandmark__fluid,
.brandmark__studio{
  font-family:var(--sans);
  font-weight:300;
  /* compensa lo spazio che la tracciatura aggiunge dopo l'ultima lettera */
  margin-right:-.34em;
}
.brandmark__fluid{ color:var(--ink); letter-spacing:.34em; font-size:1em; }
/* "STUDIO" più piccolo ma con tracciatura maggiore: così le due righe
   risultano otticamente della stessa larghezza, come nei loghi di maison */
.brandmark__studio{ color:var(--ink-dim); letter-spacing:.82em; font-size:.66em; }
.hero__title{
  font-size:clamp(44px, 9.2vw, 152px);
  line-height:.95; letter-spacing:-.045em; font-weight:400;
  margin-bottom:clamp(34px,5vw,60px);
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }
.hero__title em{
  background:linear-gradient(100deg,var(--accent),var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.06em;
}
.hero__eyebrow, .eyebrow.reveal-up{ margin-bottom:clamp(26px,4vw,40px); }
.hero__meta{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:28px;
}
.hero__sub{ max-width:46ch; font-size:clamp(16px,1.35vw,19px); color:var(--ink-dim); }
.hero__scroll{
  margin-top:44px; display:flex; align-items:center; gap:14px;
  font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim);
}

/* Stato iniziale "nascosto" per l'intro della hero: qui si imposta SOLO
   l'opacità, mai i transform. I movimenti li gestisce interamente GSAP con
   fromTo(), altrimenti mescolare percentuali CSS e yPercent di GSAP lascia
   gli elementi bloccati fuori posizione. Se lo script non parte, la rete di
   sicurezza in main.js (blocco DOMContentLoaded) li rimette visibili. */
.nav,
.hero__eyebrow,
.hero__title .line > span,
.hero__sub .word i,
.hero .btn,
.hero__scroll{ opacity:0; }
.hero__scrollline{ width:70px; height:1px; background:var(--line); overflow:hidden; }
.hero__scrollline i{ display:block; width:30%; height:100%; background:var(--accent); animation:sl 2.2s var(--ease) infinite; }
@keyframes sl{ 0%{transform:translateX(-110%)} 100%{transform:translateX(340%)} }

.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 28px; border-radius:100px;
  background:var(--ink); color:var(--bg);
  font-size:14.5px; font-weight:500; white-space:nowrap;
  transition:transform .4s var(--ease), box-shadow .4s;
}
.btn svg{ width:18px; height:18px; transition:transform .4s var(--ease); }
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(124,92,255,.32); }
.btn:hover svg{ transform:translateX(5px); }

/* =============== MARQUEE =============== */
.marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; overflow:hidden; background:rgba(13,13,18,.5);
}
.marquee__track{ display:flex; white-space:nowrap; will-change:transform; }
.marquee__track span{
  font-size:clamp(22px,3.2vw,44px); font-family:var(--serif);
  letter-spacing:-.02em; padding-right:.4em; color:var(--ink);
}
.marquee__track i{ color:var(--accent); font-style:normal; margin:0 .45em; font-size:.4em; vertical-align:middle; }

/* =============== STUDIO =============== */
.manifesto{ color:var(--ink);
  font-size:clamp(22px,3.4vw,46px); line-height:1.25; letter-spacing:-.025em;
  max-width:22ch; max-width:min(1100px,90%); font-weight:300;
  margin-bottom:clamp(60px,9vw,120px);
}
.studio__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(28px,4vw,60px); }
.studio__item h3{ font-size:19px; font-weight:500; margin-bottom:12px; letter-spacing:-.015em; }
.studio__item p{ color:var(--ink-dim); font-size:16px; max-width:36ch; }

/* =============== CARDS =============== */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.card{
  background:var(--bg); padding:clamp(28px,3.4vw,44px);
  display:flex; flex-direction:column; gap:22px; min-height:330px;
  position:relative; overflow:hidden; transition:background .5s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(124,92,255,.14), transparent 62%);
  opacity:0; transition:opacity .5s;
}
.card:hover::before{ opacity:1; }
.card:hover{ background:var(--bg-soft); }
.card__num{ font-family:var(--serif); font-size:17px; color:var(--accent-text); position:relative; }
.card__body{ margin-top:auto; position:relative; }
.card__body h3{ font-size:clamp(21px,2vw,27px); font-weight:400; letter-spacing:-.025em; margin-bottom:14px; }
.card__body p{ color:var(--ink-dim); font-size:16px; }
.card__tags{ display:flex; flex-wrap:wrap; gap:8px; position:relative; }
.card__tags span{
  font-size:12px; letter-spacing:.05em; padding:5px 12px;
  border:1px solid rgba(255,255,255,.2); border-radius:100px; color:var(--ink-dim);
}

/* =============== LAVORI =============== */
.works{ display:flex; flex-direction:column; }
.work{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(24px,4vw,60px);
  align-items:center; padding:clamp(34px,4.4vw,60px) 0;
  border-top:1px solid var(--line); position:relative;
}
.works .work:last-child{ border-bottom:1px solid var(--line); }

/* layout alternato: il secondo blocco ha il visual a destra */
.work--reverse .work__visual{ order:2; }
.work--reverse .work__info{ order:1; }

.work__visual{
  aspect-ratio:16/10; border-radius:10px; overflow:hidden; position:relative;
  background:linear-gradient(165deg,#101018,#08080c);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  will-change:transform;
}
.work__info h3{ font-size:clamp(26px,3.4vw,46px); font-weight:400; letter-spacing:-.035em; margin-bottom:16px; }
.work__info p{ color:var(--ink-dim); max-width:44ch; font-size:16px; margin-bottom:18px; }
.work__year{ font-size:12.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-text); }
.works__note{ margin-top:30px; font-size:14px; color:var(--ink-faint); }

/* ---------- 01: mini sito per struttura ricettiva ---------- */
.minisite{ position:absolute; inset:0; display:flex; flex-direction:column; background:#fbf9f6; }
.minisite__bar{
  flex:none; height:22px; display:flex; align-items:center; gap:5px;
  padding:0 9px; background:#e8e3dc; border-bottom:1px solid #d8d2c9;
}
.minisite__dot{ width:6px; height:6px; border-radius:50%; background:#c3bcb1; }
.minisite__url{
  margin-left:8px; flex:1; height:12px; border-radius:20px; background:#fbf9f6;
  font-size:7px; color:#9a9186; display:flex; align-items:center; justify-content:center;
  letter-spacing:.04em;
}
.minisite__viewport{ flex:1; position:relative; overflow:hidden; }
.minisite__page{
  width:100%;
  color:#2b2620; font-size:9px; line-height:1.5;
}

.ms-hero{
  height:150px; position:relative; padding:9px 12px;
  background:linear-gradient(180deg, rgba(20,28,30,.15), rgba(20,28,30,.62)),
             linear-gradient(140deg,#7fb0a5,#3d6b70 55%,#26424f);
  display:flex; flex-direction:column; justify-content:space-between; color:#fff;
}
.ms-nav{ display:flex; align-items:center; gap:8px; }
.ms-logo{ font-family:var(--serif); font-style:italic; font-size:11px; }
.ms-links{ display:flex; gap:6px; margin-left:auto; }
.ms-links i{ display:block; width:16px; height:2.5px; border-radius:2px; background:rgba(255,255,255,.6); }
.ms-btn{
  font-size:6.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3.5px 8px; border-radius:20px; background:#fff; color:#2b2620; white-space:nowrap;
}
.ms-hero__txt{ padding-bottom:6px; }
.ms-eyebrow{ font-size:6.5px; letter-spacing:.22em; text-transform:uppercase; opacity:.85; }
.ms-hero__txt h4{
  font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.1;
  margin:5px 0 9px; letter-spacing:-.01em;
}
.ms-cta{
  display:inline-block; font-size:6.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border:1px solid rgba(255,255,255,.75); border-radius:20px;
}

.ms-sec{ padding:16px 12px; background:#fbf9f6; }
.ms-sec--alt{ background:#f2ede5; }
.ms-sec__title{
  display:block; font-family:var(--serif); font-style:italic; font-size:12px;
  margin-bottom:10px; color:#3a332b;
}
.ms-rooms{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.ms-room span{ display:block; font-size:7px; margin-top:4px; color:#3a332b; }
.ms-room i{ display:block; font-style:normal; font-size:6.5px; color:#8c8377; }
.ms-room__img{ height:44px; border-radius:3px; }
.ms-img-a{ background:linear-gradient(150deg,#9dc0b8,#4d7a76); }
.ms-img-b{ background:linear-gradient(150deg,#e0c9a8,#a8815a); }
.ms-img-c{ background:linear-gradient(150deg,#b9c4d4,#5f7086); }

.ms-serv{ display:flex; flex-wrap:wrap; gap:5px; }
.ms-serv span{
  font-size:6.5px; padding:4px 9px; border-radius:20px;
  background:#fbf9f6; border:1px solid #e2dbd1; color:#5d554b;
}
.ms-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.ms-gallery div{ height:52px; }
.ms-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px; background:#2b2620; color:#e8e2d8; font-size:7px;
}

/* ---------- 02: mini landing page ---------- */
.minisite--land{ background:#0e0f13; }
.minisite--land .minisite__bar{ background:#181a20; border-bottom-color:#262a33; }
.minisite--land .minisite__url{ background:#0e0f13; color:#8b8f99; }
.minisite--land .minisite__page{ color:#e8e8ec; }

.ml-hero{
  padding:9px 12px 16px;
  background:radial-gradient(120% 160% at 15% 0%, #241b4d, #0e0f13 62%);
}
.ml-nav{ display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.ml-logo{ font-family:var(--serif); font-style:italic; font-size:11px; color:#fff; }
.ml-links{ display:flex; gap:6px; margin-left:auto; }
.ml-links i{ display:block; width:14px; height:2.5px; border-radius:2px; background:rgba(232,232,236,.35); }
.ml-btn{
  font-size:6.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3.5px 8px; border-radius:20px;
  background:linear-gradient(120deg,#8f7bff,#00c9a3); color:#0e0f13; white-space:nowrap;
}
.ml-eyebrow{ font-size:6.5px; letter-spacing:.22em; text-transform:uppercase; color:#9b8cff; }
.ml-hero__txt h4{
  font-family:var(--serif); font-weight:400; font-size:20px; line-height:1.12;
  margin:6px 0 8px; letter-spacing:-.01em; color:#fff;
}
.ml-hero__txt p{ font-size:7.5px; color:#a9adb8; max-width:34ch; margin-bottom:11px; }
.ml-cta{
  display:inline-block; font-size:6.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px;
  background:linear-gradient(120deg,#8f7bff,#00c9a3); color:#0e0f13;
}

.ml-sec{ padding:16px 12px; background:#0e0f13; }
.ml-sec--alt{ background:#14151b; }
.ml-sec__title{
  display:block; font-size:6.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#797d88; margin-bottom:10px;
}
.ml-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.ml-feature{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 4px; border-radius:6px; background:#181a20; text-align:center;
}
.ml-feature span:last-child{ font-size:6.5px; color:#c7cad2; }
.ml-feature__ico{
  width:16px; height:16px; border-radius:50%;
  background:linear-gradient(135deg,#8f7bff,#00c9a3);
}
.ml-logos{ display:flex; gap:9px; }
.ml-logos i{ flex:1; height:14px; border-radius:3px; background:#20222a; }

.ml-pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.ml-plan{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:12px 4px; border-radius:6px; background:#181a20; border:1px solid #22242c;
}
.ml-plan--hi{ background:#1d1533; border-color:#4a3f8a; }
.ml-plan span{ font-size:6.5px; letter-spacing:.06em; text-transform:uppercase; color:#9ea2ac; }
.ml-plan i{ font-style:normal; font-size:12px; color:#fff; margin-top:2px; }

.ml-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px; background:#151621; color:#e8e8ec; font-size:7px;
}

/* ---------- 03: mini sito vetrina / portfolio ---------- */
.minisite--gallery{ background:#f3f1ec; }
.minisite--gallery .minisite__bar{ background:#e7e3da; border-bottom-color:#d7d2c6; }
.minisite--gallery .minisite__url{ background:#f3f1ec; color:#948d7e; }
.minisite--gallery .minisite__page{ color:#232019; }

.mv-hero{ padding:9px 12px 16px; background:#f3f1ec; }
.mv-nav{ display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.mv-logo{ font-family:var(--serif); font-style:italic; font-size:11px; }
.mv-links{ display:flex; gap:6px; margin-left:auto; }
.mv-links i{ display:block; width:14px; height:2.5px; border-radius:2px; background:rgba(35,32,25,.3); }
.mv-btn{
  font-size:6.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3.5px 8px; border-radius:2px; background:#232019; color:#f3f1ec; white-space:nowrap;
}
.mv-hero__row{ display:flex; align-items:center; gap:12px; }
.mv-hero__txt{ flex:1; }
.mv-eyebrow{ font-size:6.5px; letter-spacing:.22em; text-transform:uppercase; color:#b5613f; }
.mv-hero__txt h4{
  font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.08;
  margin-top:6px; letter-spacing:-.01em;
}
.mv-hero__img{
  width:58px; height:58px; border-radius:2px; flex:none;
  background:linear-gradient(150deg,#d9b79a,#8a5a42);
}

.mv-sec{ padding:16px 12px; background:#f3f1ec; }
.mv-sec--alt{ background:#ebe7dd; }
.mv-sec__title{
  display:block; font-family:var(--serif); font-style:italic; font-size:12px;
  margin-bottom:10px; color:#232019;
}
.mv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.mv-tile{
  position:relative; height:52px; border-radius:2px; overflow:hidden;
  display:flex; align-items:flex-end; padding:5px;
}
.mv-tile span{
  position:relative; font-size:6px; letter-spacing:.03em; color:#f3f1ec;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.mv-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.42), transparent 60%); }
.mv-img-a{ background:linear-gradient(150deg,#b7c4c9,#4d6169); }
.mv-img-b{ background:linear-gradient(150deg,#cbb9a8,#7a5b45); }
.mv-img-c{ background:linear-gradient(150deg,#c9c2b0,#5f5849); }
.mv-img-d{ background:linear-gradient(150deg,#b3a6ad,#5a4650); }

.mv-bio{ font-size:7.5px; color:#4a463c; max-width:46ch; }

.mv-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px; background:#232019; color:#f3f1ec; font-size:7px;
}

@media (max-width:760px){
  .work{ grid-template-columns:1fr; }
  .work--reverse .work__visual{ order:0; }
  .work--reverse .work__info{ order:0; }
}

/* =============== PROCESSO =============== */
.proc{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(30px,6vw,90px); align-items:start; }
.proc__sticky{ position:sticky; top:22vh; }
.proc__intro{ color:var(--ink-dim); font-size:16px; max-width:34ch; margin-top:-24px; margin-bottom:34px; }
.proc__sticky .h2{ margin-bottom:34px; }
.proc__progress{ height:2px; background:var(--line); max-width:220px; }
.proc__progress span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.proc__steps{ display:flex; flex-direction:column; gap:clamp(34px,5vw,72px); }
.step{ border-top:1px solid var(--line); padding-top:24px; }
.step__n{ font-family:var(--serif); font-size:16px; color:var(--accent-text); display:block; margin-bottom:14px; }
.step h3{ font-size:clamp(24px,3vw,38px); font-weight:400; letter-spacing:-.03em; margin-bottom:14px; }
.step p{ color:var(--ink-dim); font-size:16px; max-width:44ch; }
@media (max-width:860px){ .proc{ grid-template-columns:1fr; } .proc__sticky{ position:static; } }

/* =============== STATS =============== */
.promesse{ padding-top:0; }
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.stat{ background:var(--bg); padding:clamp(28px,3.4vw,44px); }
.stat__v{ font-size:clamp(42px,6vw,84px); font-weight:300; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.stat__u{ font-family:var(--serif); font-size:clamp(20px,2.4vw,32px); color:var(--accent-text); margin-left:4px; }
.stat p{ color:var(--ink-dim); font-size:15px; margin-top:12px; max-width:24ch; }

/* =============== CONTATTI =============== */
.contatti{ text-align:center; padding:clamp(110px,16vh,210px) var(--pad); }
.cta__title{
  font-size:clamp(46px,10.5vw,168px); line-height:.92; letter-spacing:-.05em;
  font-weight:400; margin:26px 0 clamp(38px,5vw,60px);
}
.cta__title .line{ display:block; overflow:hidden; }
.cta__title .line > span{ display:block; }
.cta__title em{
  background:linear-gradient(100deg,var(--accent),var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cta__mail{
  display:inline-block; font-size:clamp(16px,2.4vw,30px);
  border-bottom:1px solid var(--line); padding-bottom:8px;
  transition:border-color .4s, color .4s;
}
.cta__mail:hover{ color:var(--accent-2); border-color:var(--accent-2); }
.cta__note{ margin-top:26px; color:var(--ink-dim); font-size:15px; }

/* =============== FOOTER =============== */
.footer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding:26px var(--pad); border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-dim);
}
.footer a:hover{ color:var(--ink); }
@media (max-width:600px){ .footer__mid{ display:none; } }

/* =============== SCHERMI PICCOLI (telefoni) =============== */
/* Tutto qui sotto vale solo sotto i 480px: non tocca la vista desktop/tablet.
   --pad è usato da nav/hero/sezioni/footer, quindi ridurlo qui stringe
   automaticamente i margini laterali ovunque. */
@media (max-width:480px){
  :root{ --pad:18px; }

  .nav{ padding:16px var(--pad); }
  .nav.is-stuck{ padding:12px var(--pad); }
  .nav__mark{ width:30px; height:30px; }
  .nav__cta{ font-size:12px; padding:8px 16px; }

  .hero{ padding:96px var(--pad) 32px; }
  .brandmark{ gap:11px; margin-bottom:16px; }
  .brandmark__icon{ width:54px; height:54px; }
  /* su schermo stretto riduco un filo la tracciatura, altrimenti va a capo */
  .brandmark__word{ font-size:14px; gap:.38em; }
  .brandmark__fluid{ letter-spacing:.28em; margin-right:-.28em; }
  .brandmark__studio{ letter-spacing:.5em; margin-right:-.5em; }
  .hero__title{ font-size:clamp(32px,11vw,52px); margin-bottom:22px; }
  .hero__sub{ font-size:14px; }
  .btn{ font-size:13px; padding:12px 22px; }
  .hero__scroll{ margin-top:28px; font-size:10px; }

  .marquee{ padding:14px 0; }
  .marquee__track span{ font-size:19px; }

  .section{ padding:64px var(--pad); }
  .sec-head{ margin-bottom:26px; }
  .h2{ font-size:clamp(26px,8vw,38px); margin-bottom:28px; }

  .manifesto{ font-size:19px; margin-bottom:36px; }
  .studio__grid{ gap:22px; }
  .studio__item h3{ font-size:17px; }
  .studio__item p{ font-size:13.5px; }

  .card{ padding:20px; min-height:210px; gap:16px; }
  .card__body h3{ font-size:19px; }
  .card__body p{ font-size:13.5px; }

  .work{ padding:20px 0; gap:16px; }
  .work__info h3{ font-size:21px; margin-bottom:10px; }
  .work__info p{ font-size:13.5px; margin-bottom:12px; }
  .work__year{ font-size:11px; }

  /* Le anteprime hanno misure interne fisse, disegnate per un riquadro largo
     ~560px. Su telefono il riquadro è ~350px, quindi il contenuto risulterebbe
     enorme e tagliato. Rimpicciolendo l'intera pagina in blocco (e allargandola
     di 1/scala per farle riempire ancora il riquadro) le proporzioni restano
     identiche al desktop: è come guardare il sito reale un po' più da lontano. */
  .minisite__bar{ height:17px; padding:0 7px; }
  .minisite__dot{ width:4.5px; height:4.5px; }
  .minisite__url{ height:9px; font-size:5.5px; margin-left:6px; }
  .minisite__page{
    transform:scale(.63);
    transform-origin:top left;
    width:158.7%;   /* 100 / 0.63 */
  }

  .proc__intro{ font-size:13.5px; }
  .step h3{ font-size:19px; }
  .step p{ font-size:13.5px; }

  /* due per riga invece di una colonna sola: più compatto e leggibile */
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat{ padding:18px 14px; }
  .stat__v{ font-size:30px; }
  .stat__u{ font-size:15px; }
  .stat p{ font-size:11.5px; margin-top:8px; }

  .contatti{ padding:70px var(--pad); }
  .cta__title{ font-size:clamp(30px,13vw,52px); margin:18px 0 26px; }
  .cta__mail{ font-size:15px; }
  .cta__note{ font-size:12.5px; }

  .footer{ padding:20px var(--pad); font-size:12px; }
}

/* =============== REVEAL BASE =============== */
.reveal-up{ opacity:0; transform:translateY(24px); }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal-up{ opacity:1; transform:none; }
}