/* ============================================================
   DISTA SPACE — kinetic editorial site
   ============================================================ */

/* ---- PRELOADER ---- */
.preloader{ position:fixed; inset:0; z-index:9999; background:#EFEEE7;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0;
  transition:opacity .9s ease, filter .9s ease, transform .9s ease; }
.preloader.is-done{ opacity:0; filter:blur(26px); transform:scale(1.04); pointer-events:none; }
.pl__word{ font-family:"Space Grotesk", system-ui, sans-serif; color:#16120B;
  font-size:clamp(34px,8vw,120px); font-weight:700; letter-spacing:-.02em; line-height:1;
  transition:color .4s ease; }
.pl__bottom{ position:absolute; left:0; right:0; bottom:clamp(28px,6vh,64px);
  display:flex; align-items:center; gap:18px; padding:0 clamp(20px,5vw,64px); }
.pl__bar{ flex:1; height:2px; background:rgba(22,17,9,.16); overflow:hidden; }
.pl__bar span{ display:block; height:100%; width:0%; background:#16120B; }
.pl__pct{ font-family:"Space Grotesk", system-ui, sans-serif; font-size:clamp(28px,5vw,72px); font-weight:700;
  color:#16120B; line-height:1; min-width:2.5ch; text-align:right; }
.pl__pct::after{ content:"%"; font-size:.42em; vertical-align:super; margin-left:.1em; opacity:.6; }
@media (prefers-reduced-motion: reduce){ .preloader{ display:none; } }

:root{
  --bg:        #EFEEE7;
  --bg-deep:   #E6E4DB;
  --paper:     #FAF9F4;
  --paper-2:   #ECEBE3;
  --ink:       #16120B;
  --ink-soft:  #6B6256;
  --line:      rgba(22,17,9,.13);

  --accent:    #FF6A12;   /* dista orange, deepened */
  --accent-2:  #1E2BE6;   /* electric cobalt — used sparingly */
  --arancio:   #FFB757;   /* soft brand orange */
  --corallo:   #FF5C39;
  --sabbia:    #E8DFD0;
  --terra:     #C46A3A;

  --maxw: 1680px;
  --pad: max(clamp(20px, 4.4vw, 84px), calc((100vw - var(--maxw)) / 2));

  --ff-display: "League Spartan", system-ui, sans-serif;
  --ff-sans: "Space Grotesk", system-ui, sans-serif;
  --ff-serif: "Space Grotesk", system-ui, sans-serif;
  --ff-mono: "Space Grotesk", ui-monospace, monospace;

  --ease: cubic-bezier(.22,1,.36,1);
  --energy: 1;
}

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

html{ -webkit-text-size-adjust:100%; overflow-x:clip; max-width:100%; }
body{
  font-family: var(--ff-sans);
  font-feature-settings: "ss01", "cv11";
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--ink);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: none;
  letter-spacing: -0.005em;
}
@media (max-width: 760px){ body{ cursor:auto; } }

::selection{ background: var(--accent); color:#fff; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:none; }

/* ---------- micro label (mono eyebrow) ---------- */
.mono{
  font-family: var(--ff-mono);
  font-size: clamp(10px, .8vw, 12.5px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px var(--pad);
  mix-blend-mode: difference; color:#fff;
  pointer-events:none;
}
.nav *{ pointer-events:auto; }
.nav__brand{
  font-family: var(--ff-sans);
  font-weight: 800; font-size: 18px; letter-spacing:-.02em;
}
.nav__links{ display:flex; gap: clamp(14px,2vw,34px); align-items:center; }
.nav__links a{
  font-family: var(--ff-mono); font-size: 12px; letter-spacing:.12em;
  text-transform: uppercase; position:relative;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px;
  background: currentColor; transition: right .4s var(--ease);
}
.nav__links a:hover::after{ right:0; }
@media (max-width:760px){ .nav__links a:not(.nav__cta){ display:none; } }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor{
  position: fixed; top:0; left:0; z-index:200; pointer-events:none;
  width: 13px; height:13px; border-radius:50%;
  background: #fff;
  transform: translate(-50%,-50%);
  mix-blend-mode: difference;
  transition: width .3s var(--ease), height .3s var(--ease);
}
.cursor--big{ width:78px; height:78px; background:#fff; }
.cursor--xl{ width:132px; height:132px; background:#fff; }
.cursor__label{
  position:fixed; top:0; left:0; z-index:201; pointer-events:none;
  transform: translate(-50%,-50%);
  font-family: var(--ff-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; opacity:0;
  mix-blend-mode: difference;
  transition: opacity .25s;
}
@media (max-width:760px){ .cursor, .cursor__label{ display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 88px var(--pad) 32px;
  overflow: hidden;
}
.hero__line{
  display:flex; align-items:center; justify-content:center;
  gap: clamp(6px, 1vw, 22px);
  width:100%;
}
.hero__word{
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--hsize, clamp(40px, 13vw, 260px));
  line-height: .84;
  letter-spacing: -0.012em;
  white-space: nowrap;
  font-variation-settings: "wght" 800, "wdth" 104;
  will-change: transform, letter-spacing;
  user-select:none;
}
.hero__word--l{ transform-origin: left center; }
.hero__word--r{ transform-origin: right center; }

/* media box in the middle of the title */
.hero__box{
  position: relative;
  flex: 0 0 auto;
  width: clamp(108px, 14vw, 270px);
  aspect-ratio: 4/5;
  border-radius: 8px;
  overflow:hidden;
  background: var(--ink);
  box-shadow: 0 30px 80px -30px rgba(22,17,9,.5);
  will-change: width, transform;
}
.hero__frame{
  position:absolute; inset:0;
  opacity:0; transform: scale(1.06);
  transition: opacity .55s var(--ease), transform .9s var(--ease);
  display:flex; align-items:flex-end;
}
.hero__frame.is-active{ opacity:1; transform: scale(1); }
.hero__frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.hero__frame .cap{
  position:relative; z-index:2; margin: 16px; color:#fff;
  font-family: var(--ff-mono); font-size: clamp(9px,.85vw,12px);
  letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
  mix-blend-mode: difference;
}
.hero__boxnum{
  position:absolute; top:12px; right:14px; z-index:3;
  font-family:var(--ff-mono); font-size:11px; color:#fff;
  mix-blend-mode: difference; letter-spacing:.1em;
}

/* hero meta row */
.hero__meta{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top: clamp(22px, 4vh, 60px); gap:20px; flex-wrap:wrap;
}
.hero__tag{ max-width: 30ch; }
.hero__tag h2{
  font-size: clamp(15px, 1.5vw, 22px); font-weight:600;
  line-height:1.2; font-variation-settings:"wght" 600,"wdth" 100;
}
.hero__scroll{ display:flex; align-items:center; gap:10px; }
.hero__scroll .dot{
  width:38px;height:38px;border:1.5px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;
}
.hero__scroll .dot span{ animation: bob 1.6s var(--ease) infinite; }
@keyframes bob{ 0%,100%{transform:translateY(-3px)} 50%{transform:translateY(3px)} }

/* floating shapes */
.shape{
  position:absolute; z-index:0; pointer-events:none; will-change:transform;
}
.shape--a{ width:90px;height:90px;border-radius:50%; background:var(--accent); }
.shape--b{ width:70px;height:120px;border-radius:60px; background:var(--accent-2); }
.shape--c{ width:84px;height:84px; background:var(--ink);
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.shape--ring{ width:120px;height:120px;border-radius:50%;
  background:transparent;border:14px solid var(--accent); }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{ position:relative; padding: clamp(80px,12vh,170px) var(--pad); }
.wrap{ max-width: var(--maxw); margin:0 auto; }
.eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom: 30px; }
.eyebrow .num{ font-family:var(--ff-mono); font-size:12px; color:var(--accent); }
.eyebrow .ln{ flex:1; height:1px; background:var(--line); }

.h-big{
  font-family: var(--ff-display);
  font-weight:500; line-height:.94;
  font-size: clamp(40px, 7vw, 132px);
  letter-spacing:-.025em;
  font-variation-settings:"opsz" 144,"wght" 500;
}
.h-mid{
  font-family: var(--ff-display);
  font-weight:500; line-height:1.0;
  font-size: clamp(28px,4.4vw,68px);
  letter-spacing:-.02em;
  font-variation-settings:"opsz" 144,"wght" 500;
}

/* reveal */
.reveal{ opacity:0; transform: translateY(calc(40px * var(--energy,1))); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.08s; } .reveal-d2{ transition-delay:.16s; }
.reveal-d3{ transition-delay:.24s; } .reveal-d4{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* line-mask reveal for big headings */
.lines span{ display:block; overflow:hidden; }
.lines span > i{ display:block; font-style:normal; transform: translateY(105%); transition: transform 1s var(--ease); }
.lines.in span > i{ transform:none; }
.lines.in span:nth-child(2) > i{ transition-delay:.09s; }
.lines.in span:nth-child(3) > i{ transition-delay:.18s; }

/* decode-on-hover (scramble) */
[data-scramble]{ white-space:nowrap; }
.scramble-dud{ opacity:.55; }

/* per-letter wave (big headings) */
[data-wave]{ white-space:nowrap; }
[data-wave] .wv{ display:inline-block; will-change:transform; }

/* ============================================================
   INTRO
   ============================================================ */
.intro{ background: var(--ink); color: var(--paper); }
.intro .eyebrow .ln{ background: rgba(255,255,255,.18); }
.intro__grid{ display:grid; grid-template-columns: 1.3fr .9fr; gap: clamp(30px,5vw,90px); align-items:end; }
.intro__lead{ font-size: clamp(20px,2.4vw,40px); line-height:1.16; font-weight:400;
  font-family: var(--ff-display); letter-spacing:-.02em;
  font-variation-settings:"opsz" 144,"wght" 420; max-width: 18ch; }
.intro__body{ color: rgba(251,248,241,.72); font-size: clamp(15px,1.15vw,18px); line-height:1.65; }
.intro__body p+p{ margin-top:1.1em; }
.intro__socials{ margin-top:26px; display:flex; gap:10px; flex-wrap:wrap; }
.intro__socials a{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.25); border-radius:40px; padding:9px 16px; transition:.35s var(--ease); }
.intro__socials a:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
@media (max-width:880px){ .intro__grid{ grid-template-columns:1fr; align-items:start; } }

/* ============================================================
   SERVICES
   ============================================================ */
.svc__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom: clamp(30px,5vh,60px); }
.svc__list{ border-top:1px solid var(--line); }
.svc__row{
  position:relative; display:grid; grid-template-columns: 64px 1fr auto;
  gap: clamp(16px,3vw,48px); align-items:center;
  padding: clamp(22px,3.2vw,40px) 0; border-bottom:1px solid var(--line);
  transition: padding .5s var(--ease);
}
.svc__row .idx{ font-family:var(--ff-mono); font-size:13px; color:var(--ink-soft); }
.svc__title{ font-family:var(--ff-display); font-weight:500; font-size: clamp(26px,4.2vw,58px); letter-spacing:-.02em;
  font-variation-settings:"opsz" 144,"wght" 500; transition: font-variation-settings .5s var(--ease), font-style .4s, transform .5s var(--ease); }
.svc__desc{ max-width: 34ch; color:var(--ink-soft); font-size: clamp(13px,1vw,16px); line-height:1.5;
  opacity:0; max-height:0; overflow:hidden; transition: opacity .5s var(--ease), max-height .5s var(--ease), margin .5s var(--ease); }
.svc__arrow{ width:54px;height:54px;border-radius:50%;border:1.5px solid var(--ink);
  display:grid;place-items:center; transition:.5s var(--ease); flex:0 0 auto; }
.svc__arrow svg{ transition: transform .5s var(--ease); }
/* hover state */
.svc__row::before{ content:""; position:absolute; inset:0; background:var(--accent); transform: scaleY(0); transform-origin:bottom; transition: transform .55s var(--ease); z-index:-1; }
.svc__row:hover::before{ transform: scaleY(1); }
.svc__row:hover{ color:#fff; padding-left: clamp(14px,2vw,34px); padding-right: clamp(14px,2vw,34px); }
.svc__row:hover .idx{ color:rgba(255,255,255,.8); }
.svc__row:hover .svc__title{ font-variation-settings:"opsz" 144,"wght" 500; font-style:italic; }
.svc__row:hover .svc__desc{ opacity:1; max-height:90px; margin-top:12px; color:rgba(255,255,255,.9); }
.svc__row:hover .svc__arrow{ border-color:#fff; background:#fff; }
.svc__row:hover .svc__arrow svg{ transform: rotate(-45deg); stroke:var(--accent); }
@media (max-width:680px){
  .svc__row{ grid-template-columns: 34px 1fr 40px; gap:14px; }
  .svc__arrow{ width:40px;height:40px; }
}

/* ============================================================
   TRUST  ("Non sei online?")
   ============================================================ */
.trust{ background: var(--accent); color: var(--ink); overflow:hidden; }
.trust__big{ font-family:var(--ff-display); font-weight:500; line-height:.92; letter-spacing:-.03em;
  font-size: clamp(48px,11vw,190px); font-variation-settings:"opsz" 144,"wght" 540; }
.trust__big em{ font-style:italic; -webkit-text-stroke:1.5px var(--ink); color:transparent; }
.trust__grid{ display:grid; grid-template-columns: 1fr 1fr; gap:clamp(28px,5vw,80px); margin-top: clamp(40px,6vh,80px); align-items:start; }
.trust__q{ font-size:clamp(18px,2vw,28px); font-weight:600; line-height:1.3; font-variation-settings:"wght" 600,"wdth" 100; }
.trust__body{ font-size:clamp(14px,1.1vw,17px); line-height:1.6; }
.trust__body p+p{ margin-top:1em; }
.trust__cta{ margin-top:28px; }
@media (max-width:780px){ .trust__grid{ grid-template-columns:1fr; } }

/* number stats marquee */
.statline{ display:flex; gap:clamp(30px,5vw,80px); align-items:baseline; justify-content:center; flex-wrap:wrap; margin-top:clamp(40px,6vh,70px); border-top:2px solid var(--ink); padding-top:30px; text-align:center; }
.stat b{ display:block; font-family:var(--ff-display); font-weight:500; font-size:clamp(40px,6vw,92px); line-height:1; font-variation-settings:"opsz" 144,"wght" 500; font-style:italic; }
.stat span{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

/* ============================================================
   PORTFOLIO marquee
   ============================================================ */
.folio{ background: var(--bg); }
.marquee{ position:relative; width:100%; overflow:hidden; padding: 18px 0; border-block:1px solid var(--line); }
.marquee__track{ display:flex; gap: clamp(30px,5vw,80px); width:max-content; animation: slide calc(38s / var(--energy,1)) linear infinite; }
.marquee--rev .marquee__track{ animation-direction: reverse; animation-duration: calc(46s / var(--energy,1)); }
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes slide{ to{ transform: translateX(-50%); } }
.logo{ flex:0 0 auto; width: clamp(180px,18vw,300px); height: clamp(120px,12vw,200px);
  border-radius:6px; display:grid; place-items:center; background:var(--bg);
  font-family:var(--ff-mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  transition:.4s var(--ease); }
.logo:hover{ background:var(--ink); color:#fff; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background: var(--ink); color: var(--paper); overflow:hidden; }
.contact .wrap{ position:relative; z-index:1; }
.contact .eyebrow .ln{ background:rgba(255,255,255,.18); }
.contact__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,90px); }
.contact__left h2{ font-family:var(--ff-display); font-weight:500; font-size:clamp(40px,6.5vw,118px); line-height:.96; letter-spacing:-.03em;
  font-variation-settings:"opsz" 144,"wght" 500; }
.contact__sub{ color:rgba(251,248,241,.7); margin-top:22px; font-size:clamp(15px,1.2vw,19px); line-height:1.5; max-width:34ch; }
.contact__info{ margin-top:36px; display:flex; flex-direction:column; gap:14px; }
.contact__info a{ display:flex; align-items:center; gap:14px; font-size:clamp(16px,1.4vw,22px); font-weight:600;
  font-variation-settings:"wght" 600,"wdth" 100; transition:.35s var(--ease); }
.contact__info a:hover{ color:var(--accent); }
.contact__info .k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); width:60px; }

form.qf{ display:grid; gap:18px; }
.qf label{ display:block; }
.qf .lab{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:8px; display:block; }
.qf input, .qf textarea, .qf select{
  width:100%; background:transparent; border:none; border-bottom:1.5px solid rgba(255,255,255,.25);
  color:var(--paper); font-family:var(--ff-sans); font-size:clamp(16px,1.3vw,20px); padding:10px 0; transition:.35s var(--ease);
  cursor:none;
}
.qf input:focus, .qf textarea:focus, .qf select:focus{ outline:none; border-color:var(--accent); }
.qf textarea{ resize:none; min-height:84px; }
.qf option{ color:#000; }
.qf__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:880px){ .contact__grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .qf__row{ grid-template-columns:1fr; } }

/* big button */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  background:var(--accent); color:#fff; border:none; border-radius:50px;
  padding:18px 30px; font-weight:700; font-size:clamp(14px,1.1vw,17px);
  font-variation-settings:"wght" 700,"wdth" 105; overflow:hidden; isolation:isolate;
}
.btn::before{ content:""; position:absolute; inset:0; background:var(--ink); transform: translateY(101%); transition: transform .5s var(--ease); z-index:-1; }
.btn:hover::before{ transform: translateY(0); }
.btn svg{ transition: transform .5s var(--ease); }
.btn:hover svg{ transform: translateX(5px); }
.btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn--ghost::before{ background:var(--ink); }
.btn--ghost:hover{ color:#fff; }
.btn--onaccent{ background:var(--ink); color:#fff; }
.btn--onaccent::before{ background:var(--paper); }
.btn--onaccent:hover{ color:var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--bg); color:var(--ink); padding: clamp(40px,6vh,80px) var(--pad) 36px; }
.footer__name{ font-family:var(--ff-display); font-weight:500; line-height:.86; font-size: clamp(40px,12.2vw,200px); letter-spacing:-.03em;
  font-variation-settings:"opsz" 144,"wght" 480; text-align:center; white-space:nowrap; }
.footer__meta{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.footer__meta .mono{ line-height:1.8; }

/* progress bar */
.prog{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent); z-index:120; }

/* ============================================================
   LOGHI — animated, mouse-reactive logo marquee
   ============================================================ */
.logos{ position:relative; background:var(--bg-deep); padding:clamp(40px,7vh,90px) 0; overflow:hidden; }
.logos__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:0 var(--pad) clamp(24px,4vh,46px); color:var(--ink-soft); }
.logos__head .mono{ letter-spacing:.16em; text-transform:uppercase; font-size:12px; }
.logos__hint{ opacity:.6; }
.logos__viewport{ position:relative; width:100%; overflow:hidden; cursor:ew-resize;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.logos__track{ display:flex; gap:clamp(20px,2.4vw,44px); width:max-content; will-change:transform; }
.logo-tile{ flex:0 0 auto; width:clamp(180px,17vw,260px); height:clamp(120px,11vw,160px);
  transform:skewX(var(--skew,0deg)) scale(var(--sc,1)); transition:filter .35s var(--ease);
  will-change:transform; }
.logo-tile .logo-slot{ display:block; width:100%; height:100%;
  background:var(--paper); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.logo-tile:hover{ filter:drop-shadow(0 18px 30px rgba(22,17,9,.22)); }
@media (max-width: 720px){
  .logo-tile{ width:46vw; height:30vw; }
}

/* ============================================================
   SHOWREEL — scroll-driven expanding video
   ============================================================ */
.scroll-video{ position:relative; height:280vh; background:#000; color:var(--paper); }
.scroll-video__sticky{ position:sticky; top:0; height:100vh; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.scroll-video__crop{
  --p:0; position:relative;
  width: calc(46vw + 54vw * var(--p));
  height: calc(56vh + 44vh * var(--p));
  max-width:100vw; max-height:100vh;
  border-radius: calc(14px * (1 - var(--p)));
  overflow:hidden; background:#000;
  box-shadow: 0 40px 90px -30px rgba(0,0,0, calc(.7 * (1 - var(--p))));
  transition: box-shadow .3s ease;
}
.scroll-video__media{ position:absolute; inset:0; }
.scroll-video__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.scroll-video__media iframe{ border:0; display:block; pointer-events:none; }
.scroll-video__media #svYtPlayer{ position:absolute; inset:0; }
/* mute / unmute toggle */
.sv-mute{ position:absolute; top:clamp(10px,1.6vw,22px); left:50%; transform:translateX(-50%);
  z-index:6; pointer-events:auto; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border-radius:999px; cursor:pointer;
  background:rgba(10,8,5,.42); border:1px solid rgba(251,248,241,.32); color:var(--paper);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  opacity: calc(.35 + .65 * var(--p)); transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.sv-mute:hover{ background:rgba(10,8,5,.72); border-color:rgba(251,248,241,.72); transform:translateX(-50%) scale(1.06); }
.sv-mute svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block; }
.sv-mute .ic-off{ display:none; }
.sv-mute[data-muted="1"] .ic-on{ display:none; }
.sv-mute[data-muted="1"] .ic-off{ display:block; }
.scroll-video__vignette{ position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
  mix-blend-mode:multiply; opacity: calc(.4 + .35 * var(--p)); }
.scroll-video__grain{ position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px), radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size:3px 3px, 5px 5px; background-position:0 0, 1px 1px; opacity:.45; mix-blend-mode:overlay; }
.scroll-video__tc{ position:absolute; font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,248,241,.85); z-index:4; opacity: calc(.1 + .9 * var(--p)); padding: clamp(10px,1.5vw,22px); }
.scroll-video__tc.tl{ top:0; left:0; } .scroll-video__tc.tr{ top:0; right:0; text-align:right; }
.scroll-video__tc.bl{ bottom:0; left:0; } .scroll-video__tc.br{ bottom:0; right:0; text-align:right; }
.scroll-video__tc .rec{ width:8px;height:8px;border-radius:999px;background:var(--corallo);display:inline-block;margin-right:8px;vertical-align:1px;animation:tcPulse 1.4s ease-in-out infinite; }
@keyframes tcPulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.scroll-video__caption{ position:absolute; left:0; right:0; bottom: clamp(40px,8vh,100px); text-align:center; z-index:5; padding:0 clamp(18px,5vw,56px); pointer-events:none; }
.scroll-video__eyebrow{ color:rgba(251,248,241,.7); opacity:0; transition:opacity .3s ease, transform .3s ease; display:inline-block; }
.scroll-video__title{ font-family:var(--ff-display); font-size: clamp(26px,3.7vw,54px); line-height:1.05; letter-spacing:-.03em;
  font-weight:400; font-variation-settings:"opsz" 144,"wght" 460; margin: clamp(12px,1.6vw,20px) auto 0; max-width:30ch; opacity:0;
  transition:opacity .35s ease, transform .35s ease; text-wrap:balance; color:var(--paper); }
.scroll-video__title em{ font-style:italic; color:var(--accent); font-variation-settings:"opsz" 144,"wght" 360; }
.scroll-video__sub{ margin: clamp(14px,2vw,22px) auto 0; max-width:560px; font-size:clamp(14px,1.3vw,17px); line-height:1.5;
  color:rgba(251,248,241,.7); opacity: calc(0 + 1 * max(0, var(--p) - 0.75) * 4); }
@media (max-width:760px){
  .scroll-video{ height:220vh; }
  .scroll-video__crop{ width: calc(82vw + 18vw * var(--p)); height: calc(54vh + 46vh * var(--p)); }
  .scroll-video__tc{ font-size:9px; padding:12px; }
}

/* fallback cinematic stage */
.sv-fallback{ position:absolute; inset:0; background:#0A0A0A; overflow:hidden; }
.sv-fallback__glow{ position:absolute; left:-20%; top:-20%; width:140%; height:140%;
  background: radial-gradient(ellipse at 30% 60%, rgba(255,183,87,.6) 0%, rgba(255,92,57,.25) 35%, rgba(10,10,10,1) 70%);
  animation: fbDrift 16s ease-in-out infinite alternate; }
.sv-fallback__line{ position:absolute; left:0; right:0; top:62%; height:1px; background:rgba(251,248,241,.18); }
@keyframes fbDrift{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-3%,2%) scale(1.06);} }

/* ============================================================
   LAVORI SELEZIONATI — poster fan
   ============================================================ */
.work{ background:var(--ink); color:var(--paper); }
.work__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:24px; border-bottom:1px solid rgba(251,248,241,.18); }
.work__archive{ color:var(--paper); letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
.poster-stage{ position:relative; height: clamp(520px,70vw,760px); display:flex; align-items:center; justify-content:center; perspective:1600px; padding: clamp(20px,4vw,60px) 0; }
.poster{
  position:absolute; left:50%; top:50%;
  width: clamp(220px,26vw,340px); height: clamp(340px,40vw,510px);
  margin-left: calc(clamp(220px,26vw,340px) / -2);
  margin-top: calc(clamp(340px,40vw,510px) / -2);
  border-radius:4px;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.6), 0 6px 12px -6px rgba(0,0,0,.4);
  transform: translate(var(--tx,0), var(--ty,0)) rotate(var(--rot,0)) scale(var(--scale,1));
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), filter .55s ease;
  will-change:transform; overflow:hidden; text-decoration:none; display:block; filter:saturate(.95);
}
.poster:hover{ filter:saturate(1.05); box-shadow: 0 50px 90px -30px rgba(0,0,0,.7), 0 10px 18px -8px rgba(0,0,0,.5); }
.poster__grain{ position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:3px 3px, 5px 5px; background-position:0 0, 1px 1px; mix-blend-mode:multiply; opacity:.5; }
.poster__sheen{ position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 25%, rgba(0,0,0,.18) 100%); mix-blend-mode:overlay; opacity:.55; }
.poster__head{ position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; z-index:3; }
.poster__body{ position:absolute; inset:0; }
.poster__title{ position:absolute; left:14px; right:14px; bottom:44px; font-family:var(--ff-display);
  font-size: clamp(28px,3.6vw,44px); line-height:.95; letter-spacing:-.02em; font-style:italic; z-index:3; }
.poster__foot{ position:absolute; left:14px; right:14px; bottom:14px; display:flex; justify-content:space-between; align-items:center; font-size:11px; z-index:3; }
.poster-caption{ margin-top: clamp(36px,6vw,60px); text-align:center; min-height:150px; }
.poster-caption > *{ transition: opacity .35s; }
.poster-caption__num{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; color:rgba(251,248,241,.55); }
.poster-caption__title{ font-family:var(--ff-display); font-size: clamp(36px,5.5vw,64px); line-height:1.02; margin-top:14px;
  font-style:italic; font-variation-settings:"opsz" 144,"wght" 460; letter-spacing:-.025em; }
.poster-caption__desc{ font-size: clamp(14px,1.4vw,17px); color:rgba(251,248,241,.7); margin:12px auto 0; max-width:480px; }

@media (max-width:760px){
  .poster-stage{ height:auto; display:grid; grid-auto-flow:column; grid-auto-columns:74%; gap:14px;
    padding:24px 18px 36px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; perspective:none; scrollbar-width:none; }
  .poster-stage::-webkit-scrollbar{ display:none; }
  .poster{ position:relative; left:auto; top:auto; margin:0; width:100%; height:420px; transform:none !important; scroll-snap-align:center; flex-shrink:0; filter:none; }
  .poster-caption{ display:none; }
  .work__head{ flex-direction:column; gap:10px; align-items:flex-start; }
}

/* ============================================================
   DISPLAY TYPE — Archivo grotesque (original)
   ============================================================ */
.hero__word,.h-big,.h-mid,.trust__big,.contact__left h2,.footer__name,
.scroll-video__title,.scroll-video__title em,.poster__title,.poster-caption__title,.stat b{
  font-family: var(--ff-display);
  text-transform: none;
  font-style: normal;
}
.h-big{ font-variation-settings:"wght" 780,"wdth" 110; letter-spacing:-.02em; line-height:.92; }
.h-mid{ font-variation-settings:"wght" 720,"wdth" 105; letter-spacing:-.015em; line-height:.98; }
.trust__big{ font-variation-settings:"wght" 800,"wdth" 112; letter-spacing:-.02em; line-height:.88; }
.trust__big em{ font-style:normal; -webkit-text-stroke:2px var(--ink); color:transparent; }
.contact__left h2{ font-variation-settings:"wght" 800,"wdth" 110; letter-spacing:-.02em; line-height:.92; }
.footer__name{ font-variation-settings:"wght" 800,"wdth" 106; letter-spacing:-.02em; line-height:.86; }
.scroll-video__title{ font-variation-settings:"wght" 760,"wdth" 106; letter-spacing:-.02em; line-height:1.02; }
.scroll-video__title em{ font-style:italic; color:var(--accent); font-variation-settings:"wght" 400,"wdth" 100; }
.poster__title,.poster-caption__title{ font-family:var(--ff-serif); font-variation-settings:"opsz" 144,"wght" 460; letter-spacing:-.01em; font-style:italic; }
.work .h-mid{ font-family:var(--ff-serif); font-style:italic; font-variation-settings:"opsz" 144,"wght" 400; letter-spacing:-.01em; }
.stat b{ font-variation-settings:"wght" 800,"wdth" 110; font-style:italic; }

/* ---- centred section titles (reference look) ---- */
.trust .eyebrow{ justify-content:center; }
.trust .eyebrow .ln{ display:none; }
.trust__big{ text-align:center; }
.trust__grid{ max-width:1100px; margin-left:auto; margin-right:auto; }

/* ============================================================
   SERVIZI v2 — faded list, ink on hover, floating media (studionamma-style)
   ============================================================ */
.svc2{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding: clamp(80px,12vh,150px) var(--pad); background:var(--bg); overflow:hidden; }
.svc2__label{ position:absolute; top: clamp(28px,6vh,64px); left: var(--pad); }
.svc2__seeall{ position:absolute; bottom: clamp(28px,6vh,56px); left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px; }
.svc2__seeall svg{ transition: transform .4s var(--ease); }
.svc2__seeall:hover svg{ transform: translateX(6px); }

.svc2__stage{ position:static; }
.svc2__list{ list-style:none; text-align:center; position:relative; z-index:2; }
.svc2__row{
  display:block; position:relative; cursor:none; white-space:nowrap;
  font-family:var(--ff-display); text-transform:uppercase;
  font-size: clamp(30px,5.6vw,82px); line-height:1.16; letter-spacing:.005em;
  font-variation-settings:"wght" 800,"wdth" 100;
  color: color-mix(in oklch, var(--ink) 20%, var(--bg));
  transition: color .35s var(--ease), transform .55s var(--ease);
  padding: clamp(1px,.3vw,4px) 0;
  will-change: transform;
}
.svc2__row:hover,.svc2__row.is-on{ color: var(--ink); }
.svc2__row:hover,.svc2__row:focus-visible{ transform: translateX(clamp(10px,1.6vw,26px)); }
.svc2__row .tag{
  font-family:var(--ff-mono); text-transform:uppercase; font-size: clamp(10px,.85vw,13px);
  letter-spacing:.14em; color: var(--ink-soft); vertical-align: middle; margin-left: 14px;
  opacity:0; transform: translateX(-8px); display:inline-block;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.svc2__row:hover .tag,.svc2__row.is-on .tag{ opacity:1; transform:none; }

/* floating media box — follows the cursor to the sides (JS-driven) */
.svc2__media{
  position:absolute; left:0; top:0; pointer-events:none; z-index:1;
  width: clamp(220px, 24vw, 420px); aspect-ratio: 4/3; border-radius:8px; overflow:hidden;
  background:var(--ink); box-shadow: 0 30px 70px -28px rgba(22,17,9,.5);
  opacity:0; transform: translate3d(0,0,0) scale(.94);
  transition: opacity .4s var(--ease);
  will-change: transform, opacity;
}
.svc2.is-active .svc2__media{ opacity:1; }
.svc2__frame{ position:absolute; inset:0; opacity:0; transform:scale(1.06);
  transition: opacity .5s var(--ease), transform .8s var(--ease); display:flex; align-items:flex-end; }
.svc2__frame.is-active{ opacity:1; transform:none; }
.svc2__frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.svc2__frame .cap{ position:relative; z-index:2; margin:14px; color:#fff; font-family:var(--ff-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; mix-blend-mode:difference; }

@media (max-width: 900px){
  .svc2__media{ display:none; }
}
@media (hover: none), (max-width: 760px){
  .svc2__row{ color: var(--ink); }
  .svc2__row .tag{ opacity:1; transform:none; }
  .svc2__media{ display:none; }
}

/* ============================================================
   LA NOSTRA STORIA — full-screen, posters drift in at angles
   (papertiger-style scroll). Black, fluid, animated.
   ============================================================ */
.history{ position:relative; height:420vh; background:#16120b; color:var(--paper); }
.history__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
.history__head{ position:absolute; top:clamp(80px,11vh,130px); left:var(--pad); z-index:4; max-width:60vw; }
.history__head .eyebrow{ margin-bottom:20px; }
.history__head .eyebrow .num{ color:var(--accent); }
.history__head .eyebrow .ln{ display:none; }
.history__title{ font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(40px,7vw,118px); line-height:.92; letter-spacing:-.01em;
  font-variation-settings:"wght" 820,"wdth" 78; color:var(--accent); }
/* DIANA sits in a fixed-size slot so the font/case cycling never reflows the
   heading or the paragraph below it. The cycling word is absolutely centred
   inside, so its changing width/height can't push anything. */
.diana-slot{ display:inline-block; position:relative; width:3em; height:.72em;
  vertical-align:baseline; }
#dianaWord{ position:absolute; left:0; bottom:0;
  white-space:nowrap; line-height:1; will-change:font-family; }
.history__sub{ margin-top:clamp(18px,2.4vw,30px); max-width:30ch; color:var(--paper);
  font-size:clamp(16px,1.5vw,24px); line-height:1.32; font-weight:500; }
.history__copy{ position:absolute; right:var(--pad); top:clamp(150px,26vh,300px); z-index:4;
  max-width:38ch; color:rgba(251,248,241,.74); font-size:clamp(15px,1.25vw,19px); line-height:1.5; }
.history__hint{ position:absolute; bottom:clamp(20px,4vh,40px); left:var(--pad); color:rgba(251,248,241,.45); z-index:4; }

.history__viewport{ position:absolute; inset:0; overflow:hidden; z-index:2; }
.history__track{ position:absolute; left:0; bottom:0; display:flex; align-items:flex-end;
  padding:0 6vw clamp(40px,9vh,120px); will-change:transform; }
.hcard{ flex:0 0 auto; position:relative; width:clamp(220px,23vw,360px);
  margin-left:clamp(-70px,-3.4vw,-34px); transform-origin:center bottom;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.55)); }
.hcard:first-child{ margin-left:0; }
.hcard__img{ display:block; width:100%; height:clamp(300px,31vw,500px); background:#141210; border-radius:3px;
  outline:1px solid rgba(251,248,241,.06); }
.hcard__tag{ position:absolute; left:12px; right:12px; bottom:12px; z-index:4; max-width:calc(100% - 24px);
  font-family:var(--ff-mono); font-size:12px; line-height:1.35; letter-spacing:.02em; text-transform:none;
  color:#fff; background:rgba(10,8,5,.55); padding:8px 10px; border-radius:7px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); pointer-events:auto; text-wrap:pretty; }
.hcard--back .hcard__tag{ top:12px; bottom:auto; }
.hcard__tag b{ font-weight:400; }

@media (max-width: 760px){
  .history{ height:auto; }
  .history__sticky{ position:static; height:auto; padding-bottom:40px; }
  .history__head{ position:static; max-width:none; padding:90px var(--pad) 0; }
  .history__copy{ position:static; max-width:none; padding:22px var(--pad) 0; }
  .history__viewport{ position:static; height:auto; }
  .history__track{ position:static; transform:none !important; align-items:flex-start;
    overflow-x:auto; overflow-y:hidden; padding:30px var(--pad) 8px; gap:14px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .history__track::-webkit-scrollbar{ display:none; }
  .hcard{ width:70vw; margin-left:0 !important; transform:none !important; scroll-snap-align:center;
    filter:drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
  .history__hint{ position:static; padding:0 var(--pad); }
}

/* ============================================================
   TWEAK — type-voice variants (reshape the display character)
   ============================================================ */
/* Grotesk: swap the display family from League Spartan to Space Grotesk */
.voice-serif{ --ff-display: "Space Grotesk", system-ui, sans-serif; }
.voice-serif .hero__word,
.voice-serif .h-big,
.voice-serif .h-mid,
.voice-serif .trust__big,
.voice-serif .contact__left h2,
.voice-serif .footer__name,
.voice-serif .history__title{ font-variation-settings:"wght" 600 !important; font-weight:600 !important; letter-spacing:-.02em; }

/* Condensed: League Spartan at max weight, extra-tight tracking */
.voice-cond .h-big,
.voice-cond .h-mid,
.voice-cond .trust__big,
.voice-cond .contact__left h2,
.voice-cond .footer__name,
.voice-cond .history__title,
.voice-cond .svc2__row{ font-variation-settings:"wght" 900 !important; font-weight:900 !important; letter-spacing:-.045em; }
.voice-cond .history__title{ font-size:clamp(48px,8.4vw,150px); }

/* ============================================================
   Editorial emphasis — magazine-style accent within body copy
   ("laboratorio creativo", "e nessuna voglia di dirlo…")
   ============================================================ */
.ed-em{ font-family:var(--ff-serif); font-style:italic; font-weight:500;
  font-variation-settings:"opsz" 40,"wght" 500; letter-spacing:.005em; color:var(--paper); }

/* Drag-and-drop photo slots inside the hero box + the services float */
.hero__frame{ pointer-events:none; }
.hero__frame.is-active{ pointer-events:auto; }
.hero__frame .hero__slot{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.svc2__frame{ pointer-events:none; }
.svc2__frame.is-active{ pointer-events:auto; }
.svc2.is-active .svc2__media{ pointer-events:auto; }
.svc2__frame .svc2__slot{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }

/* ============================================================
   RESTYLING — "Prima → Dopo" with the self-drawing design line
   ============================================================ */
.restyle{ background: var(--paper); color: var(--ink); }
.restyle__head{ margin-bottom: clamp(52px,9vh,120px); }
.restyle__title{ margin:0; max-width: 18ch; color:var(--accent);
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(40px,7vw,118px); line-height:.92; letter-spacing:-.01em;
  font-variation-settings:"wght" 820,"wdth" 78; }
.restyle__title em{ font-style:italic; text-transform:none; color:var(--ink);
  font-family:'Fraunces', serif; font-variation-settings:"opsz" 72,"wght" 480;
  letter-spacing:0; }

/* featured work sits beside the title, right-aligned & capped */
.restyle-work--feat{ max-width: 680px; width:100%; margin-left:auto; }

/* manifesto tile — reads as an editorial caption inside the mosaic */
.restyle-note{ align-self:start; max-width: 34ch; padding-top: clamp(8px,2.5vh,34px); }
.restyle-note__txt{ margin:0; font-family:var(--ff-display); text-transform:none;
  font-variation-settings:"wght" 560,"wdth" 92; font-size:clamp(20px,2.2vw,32px);
  line-height:1.16; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.restyle-note__em{ margin:.55em 0 0; font-family:'Fraunces', serif; font-style:italic;
  font-size:clamp(22px,2.5vw,36px); line-height:1.05; color:var(--accent); }
.restyle__lead{ max-width: 40ch; color: var(--ink-soft);
  font-family:'Space Mono', monospace; font-size: clamp(13px,1.05vw,16px); line-height:1.6; }

/* ── mosaic: large works, alternating left / right ── */
.restyle__mosaic{ display:flex; flex-direction:column; gap: clamp(64px,10vh,150px); }
.restyle__mosaic > .restyle-work{ width: min(100%, 1500px); align-self:center; }

.restyle-work{ position:relative; display:grid;
  grid-template-columns: minmax(120px, 26%) 1fr;
  gap: clamp(18px,2vw,42px); align-items:end; }
.restyle-work[data-side="right"]{ grid-template-columns: 1fr minmax(120px, 26%); }
.restyle-work[data-side="right"] .restyle-row__before{ order:2; }
.restyle-work[data-side="right"] .restyle-row__after{ order:1; }

/* mosaic works gain a 3rd column: the caption lives in the empty space on the
   OUTER side of the big restyled hero (opposite the small thumbnail), centered.
   The restyled square is sized by viewport height so it always fits the screen;
   its column is auto (hugs the square), the caption column takes the slack. */
.restyle__mosaic .restyle-work{ gap: clamp(48px,6vw,150px); }
.restyle__mosaic .restyle-work[data-side="left"]{ grid-template-columns: 1fr auto 1fr; }
.restyle__mosaic .restyle-work[data-side="right"]{ grid-template-columns: 1fr auto 1fr; }
.restyle__mosaic .restyle-work[data-side="left"]  .restyle-row__before{ grid-column:1; justify-self:end; }
.restyle__mosaic .restyle-work[data-side="left"]  .restyle-row__after { grid-column:2; }
.restyle__mosaic .restyle-work[data-side="left"]  .restyle-cap        { grid-column:3; justify-self:start; }
.restyle__mosaic .restyle-work[data-side="right"] .restyle-cap        { grid-column:1; justify-self:end; }
.restyle__mosaic .restyle-work[data-side="right"] .restyle-row__after { grid-column:2; }
.restyle__mosaic .restyle-work[data-side="right"] .restyle-row__before{ grid-column:3; justify-self:start; }
.restyle__mosaic .restyle-row__before{ align-self:end; width: clamp(116px, 13vw, 190px); }
.restyle__mosaic .restyle-cap{ align-self:center; flex:0 1 auto; padding-bottom:0; max-width:34ch; }
/* pin the three real columns to a single row so the caption centers against
   the tall hero (otherwise source-order + auto-rows shunt it into a short row) */
.restyle__mosaic .restyle-work > .restyle-cap,
.restyle__mosaic .restyle-work > .restyle-row__before,
.restyle__mosaic .restyle-work > .restyle-row__after{ grid-row:1; }

/* the caption fills the empty space above the small thumbnail, vertically
   centered so it reads beside the large restyled hero */
.restyle-cap{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  padding-bottom: clamp(16px,2.4vh,30px); }
.restyle-work[data-side="right"] .restyle-cap{ text-align:right; }
.restyle__mosaic .restyle-work[data-side="left"]  .restyle-cap{ text-align:left; }
.restyle__mosaic .restyle-work[data-side="right"] .restyle-cap{ text-align:right; }
.restyle-cap .restyle-note__txt{ font-size:clamp(15px,1.45vw,21px); line-height:1.18; }
.restyle-cap .restyle-note__em{ font-size:clamp(16px,1.55vw,23px); }

/* ── modern entry animations: keyframes triggered by .is-in. Resting state is
   fully visible (no base opacity:0), so content is never permanently hidden if
   the observer misfires. Transform/clip only — never fights JS tilt/parallax
   (those write transform on the FRAMES and COLUMNS, not these targets). ── */
@media (prefers-reduced-motion: no-preference){
  @keyframes rstRise{ from{ opacity:0; transform: translateY(30px) scale(.985); } to{ opacity:1; transform:none; } }
  @keyframes rstFade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes rstWipe{ from{ clip-path: inset(0 100% 0 0); opacity:0; } to{ clip-path: inset(0 0 0 0); opacity:1; } }

  .restyle__title.is-in{ animation: rstWipe 1.05s var(--ease) both; }
  .restyle__mosaic .restyle-work.is-in .restyle-media{ animation: rstRise 1.05s var(--ease) .06s both; }
  .restyle__mosaic .restyle-work.is-in .restyle-thumb{ animation: rstRise .9s var(--ease) .28s both; }
  .restyle__mosaic .restyle-work.is-in .restyle-cap{ animation: rstFade .8s ease .44s both; }
  .restyle__mosaic .restyle-work.is-in .restyle-tag{ animation: rstFade .65s ease .52s both; }
}

.restyle-row__before{ position:relative; z-index:1;
  perspective: 1100px; will-change: transform;
  align-self:stretch; display:flex; flex-direction:column; }
.restyle-row__after{ position:relative; z-index:2;
  perspective: 1100px; will-change: transform; }

/* the design line — drawn by restyle.js, routed through the gutter */
.restyle-line{ position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:0; }
.restyle-line path{ fill:none; stroke: var(--accent); stroke-width:1.5;
  stroke-linecap:butt; stroke-linejoin:miter; miter-limit:4; opacity:.5;
  transition: stroke-dashoffset 1.1s var(--ease), opacity .4s ease, stroke-width .4s ease; }
.restyle-work:hover .restyle-line path{ opacity:1; stroke-width:2; }

/* traveling light */
.restyle-comet{ position:absolute; left:0; top:0; width:10px; height:10px; z-index:1;
  border-radius:50%; background: var(--accent); pointer-events:none;
  margin:-5px 0 0 -5px; opacity:0; transition:opacity .4s ease;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
              0 0 16px 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.restyle-comet.is-live{ opacity:1; }

/* media frames — tilt target */
.restyle-frame{ position:relative; transform-style:preserve-3d; will-change:transform;
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.restyle-frame--before{ filter:saturate(.82) contrast(.96);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.restyle-work:hover .restyle-frame--before{ filter:saturate(1) contrast(1); }

/* the original is a small thumbnail; the restyled "after" is the large square hero */
.restyle-thumb{ display:block; width:100%; height:auto; aspect-ratio:4/5;
  background:#E6DDCE; outline:1px solid var(--line);
  box-shadow: 0 18px 40px -28px rgba(22,17,9,.5); }
.restyle-media{ display:block; width:100%; height:auto; aspect-ratio:1/1;
  background:#E6DDCE; outline:1px solid var(--line);
  box-shadow: 0 44px 80px -42px rgba(22,17,9,.5); }
/* mosaic restyled square: sized by viewport height so it fits on screen */
.restyle__mosaic .restyle-media{ width:auto; height: clamp(320px, 62vh, 700px); }

/* kinetic "Restyled" stamp on the after frame */
.restyle-stamp{ position:absolute; top: clamp(12px,1.4vw,18px); left: clamp(12px,1.4vw,18px);
  z-index:4; font-family:'Archivo', sans-serif; font-variation-settings:"wght" 680,"wdth" 118;
  text-transform:uppercase; letter-spacing:.14em; font-size: clamp(9px,.78vw,11px); color:#fff;
  padding:6px 12px; border-radius:999px; background: var(--accent);
  transform: translateY(-8px) scale(.92); opacity:0;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }
.restyle-work.is-in .restyle-stamp{ transform: translateY(0) scale(1); opacity:1;
  transition-delay:.5s; }

/* labels — modern grotesk, tight tracking */
.restyle-tag{ font-family:'Archivo', sans-serif; font-variation-settings:"wght" 640,"wdth" 96;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.16; color: var(--accent);
  font-size: clamp(10px,.92vw,13px); }
.restyle-tag--before{ margin-top: 14px; }
.restyle-step{ display:block; font-family:'Archivo', sans-serif;
  font-variation-settings:"wght" 840,"wdth" 125; font-size: clamp(30px,3.6vw,52px); line-height:.9;
  color: var(--ink); opacity:.15; margin-bottom:6px; letter-spacing:-.01em;
  font-variant-numeric: tabular-nums; }
.restyle-tag--after{ margin-top: 14px; text-align:left; }
.restyle-work[data-side="right"] .restyle-tag--after{ text-align:right; }

@media (max-width: 920px){
  .restyle__head{ grid-template-columns: 1fr; gap: clamp(28px,7vw,52px); }
  .restyle-work--feat{ max-width: 520px; margin-left:0; }
  .restyle__mosaic{ gap: clamp(48px,9vw,90px); }
  .restyle__mosaic > .restyle-work{ width:100%; align-self:stretch; }
  .restyle-note{ max-width: none; }
}
@media (max-width: 560px){
  .restyle-work{ grid-template-columns: 1fr; gap: clamp(20px,6vw,32px); align-items:start; }
  .restyle-work[data-side="right"] .restyle-row__before{ order:1; }
  .restyle-work[data-side="right"] .restyle-row__after{ order:2; }
  .restyle-work[data-side]{ grid-template-columns: 1fr; }
  .restyle-row__before{ max-width: 240px; }
  .restyle-tag--after, .restyle-work[data-side="right"] .restyle-tag--after{ text-align:left; }
  .restyle-line, .restyle-comet{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .restyle-comet{ display:none; }
  .restyle-frame, .restyle-frame--before{ transition:none; }
}


/* ============================================================
   DAV — "Prima → Dopo" rebuilt (davincis-style):
   floating photos that drift on scroll · large two-tone
   headline · before→after with an L-shaped connector line.
   ============================================================ */
.dav{ background: var(--bg); color: var(--ink); overflow:hidden; }
.dav .wrap{ max-width: var(--maxw); margin:0 auto; position:relative; z-index:1; }

.dav__intro{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,6vw,130px);
  max-width: 1120px; margin-top: clamp(26px,4.5vh,56px); }
.dav__lead{ font-family:var(--ff-sans); font-size:clamp(15px,1.2vw,18px); line-height:1.5;
  color:var(--ink); max-width:46ch; text-wrap:pretty; }
.dav__lead strong{ font-weight:700; }

/* giant headline + floats */
.dav__hero{ position:relative; margin: clamp(60px,12vh,150px) 0 clamp(40px,7vh,90px);
  min-height: clamp(300px, 40vw, 560px); display:flex; align-items:center; }
.dav__headline{ position:relative; z-index:3; margin:0;
  font-family:var(--ff-display); text-transform:uppercase; font-weight:900;
  font-variation-settings:"wght" 900,"wdth" 116;
  font-size: clamp(38px, 8.2vw, 142px); line-height:.86; letter-spacing:-.025em;
  max-width: 15ch; text-wrap:balance; }
.dav__headline .red{ color: var(--accent); }
.dav__headline .blk{ color: var(--ink); display:inline-block; }
.dav__headline .q{ color: var(--accent); font-family:var(--ff-serif); font-style:italic;
  font-variation-settings:"opsz" 144,"wght" 600; }

.dav__float{ position:absolute; z-index:1; display:block;
  width: clamp(120px, 13vw, 210px); height: clamp(150px, 16vw, 260px);
  border-radius:2px; box-shadow: 0 36px 60px -34px rgba(20,15,8,.5);
  will-change: transform; }
.dav__float--tall{ height: clamp(180px, 20vw, 320px); }
.dav__float--sm{ width: clamp(96px,10vw,150px); height: clamp(120px,12vw,190px); z-index:4; }

.dav__foot{ max-width: 52ch; margin-left:auto; font-family:var(--ff-sans);
  font-size:clamp(15px,1.2vw,18px); line-height:1.5; color:var(--ink); text-wrap:pretty; }

/* before → after */
.dav__ba{ position:relative; margin-top: clamp(70px,11vh,160px);
  min-height: clamp(380px, 50vw, 740px); }
.dav__orig{ position:absolute; top:0; left:0; width: clamp(160px, 17vw, 260px); z-index:2; }
.dav__orig-img{ display:block; width:100%; height: clamp(200px, 21vw, 320px); border-radius:2px;
  box-shadow:0 30px 50px -32px rgba(20,15,8,.45); }
.dav__after{ position:absolute; top:0; right:0; width: min(66%, 1040px); z-index:2; }
.dav__after-vid{ display:block; width:100%; height: clamp(360px, 42vw, 700px); border-radius:2px;
  box-shadow:0 50px 80px -40px rgba(20,15,8,.5); }

.dav__label{ font-family:var(--ff-mono); text-transform:uppercase; color:var(--accent);
  font-weight:700; font-size: clamp(11px,.92vw,13.5px); letter-spacing:.05em; line-height:1.28; }
.dav__orig .dav__label{ margin-top:14px; text-align:right; }
.dav__label--after{ position:absolute; z-index:3; right:0; bottom:0; text-align:right; }

.dav__connector{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; overflow:visible; }
.dav__connector path{ fill:none; stroke:var(--accent); stroke-width:1.3;
  stroke-dasharray: var(--len,1); stroke-dashoffset: var(--off,0);
  transition: stroke-dashoffset 1.1s var(--ease); }

@media (max-width: 860px){
  .dav__intro{ grid-template-columns:1fr; gap:20px; }
  .dav__hero{ min-height:0; margin: 48px 0 32px; }
  .dav__headline{ font-size: clamp(34px,10.5vw,82px); }
  .dav__float--sm{ display:none; }
  .dav__float{ opacity:.9; }
  .dav__ba{ min-height:0; display:flex; flex-direction:column; gap:22px; }
  .dav__orig,.dav__after{ position:static; width:auto; }
  .dav__orig{ width: clamp(150px,40vw,240px); }
  .dav__after-vid{ height: clamp(240px,62vw,440px); }
  .dav__connector,.dav__label--after{ display:none; }
}


/* ============================================================
   GALLERIA — 4 pannelli a tutta altezza che si espandono
   all'hover (alla lalibre · ukraine-mines). L'espansione usa
   flex-grow: nessun salto di layout, il viewport resta fermo;
   le foto sono in cover (full-height) quindi allargando si
   rivela di più senza che l'inquadratura si sposti.
   ============================================================ */
.gallery{ display:flex; width:100%; height: clamp(440px, 84vh, 920px);
  background:#0b0906; overflow:hidden; gap:2px; isolation:isolate; }
.gallery__panel{ position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  cursor:pointer; transition: flex-grow .7s var(--ease); }
.gallery__panel:hover{ flex-grow: 3; }

.gallery__img{ position:absolute; inset:0; width:100%; height:100%; display:block;
  background:#0b0906; transition: filter .6s ease; filter: brightness(.74) saturate(.96); }
.gallery__panel:hover .gallery__img{ filter: brightness(1) saturate(1.02); }
.gallery:hover .gallery__panel:not(:hover) .gallery__img{ filter: brightness(.46) saturate(.85); }

.gallery__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to bottom,
    rgba(11,9,6,.42) 0%, rgba(11,9,6,.06) 26%,
    rgba(11,9,6,.12) 60%, rgba(11,9,6,.78) 100%);
  transition: opacity .6s ease; }
.gallery__panel:hover .gallery__veil{ opacity:.82; }

/* centred title — only legible (and only shown) once the panel opens */
.gallery__title{ position:absolute; left:50%; top:50%; z-index:3;
  transform:translate(-50%,-42%); width: min(78%, 440px); text-align:center;
  margin:0; color:#fff; font-family:var(--ff-serif);
  font-size: clamp(20px,1.9vw,34px); line-height:1.16; letter-spacing:-.01em;
  font-variation-settings:"opsz" 72,"wght" 470; text-wrap:balance;
  opacity:0; pointer-events:none;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
  transition: opacity .5s ease, transform .7s var(--ease); }
.gallery__panel:hover .gallery__title{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%);
  transition-delay:.12s; }

/* number + tag pinned to the foot, with a hairline rising from the number */
.gallery__foot{ position:absolute; left:0; right:0; bottom: clamp(22px,4.4vh,46px);
  z-index:3; text-align:center; padding:0 10px; }
.gallery__foot::before{ content:""; display:block; width:1px;
  height: clamp(26px,5.5vh,52px); margin:0 auto 16px;
  background: linear-gradient(to top, rgba(255,255,255,.6), rgba(255,255,255,0)); }
.gallery__num{ display:block; font-family:var(--ff-serif); font-style:italic;
  font-size: clamp(26px,2.5vw,42px); line-height:1; color: var(--accent);
  font-variation-settings:"opsz" 144,"wght" 500; }
.gallery__tag{ display:block; margin-top:9px; font-family:var(--ff-mono);
  text-transform:uppercase; letter-spacing:.16em; font-size: clamp(10.5px,.85vw,13px);
  color:#fff; white-space:nowrap; }

@media (max-width: 760px){
  .gallery{ flex-direction:column; height:auto; gap:3px; }
  .gallery__panel{ flex:none; height: 62vw; min-height:230px; }
  .gallery__panel:hover{ flex:none; }
  .gallery__img,
  .gallery:hover .gallery__panel:not(:hover) .gallery__img{ filter: brightness(.82) saturate(1); }
  .gallery__title{ opacity:1; transform:translate(-50%,-50%); top:42%; }
  .gallery__foot{ bottom: 20px; }
}


/* ---- GALLERIA: entrata "a ventaglio" (sale + si apre, in cascata) ---- */
@media (prefers-reduced-motion: no-preference){
  .gallery__panel:nth-child(1){ --fan:-10deg; }
  .gallery__panel:nth-child(2){ --fan:-4deg; }
  .gallery__panel:nth-child(3){ --fan:4deg; }
  .gallery__panel:nth-child(4){ --fan:10deg; }
  .gallery__panel{ transform-origin: 50% 100%; }
  .gallery:not(.is-in) .gallery__panel{ opacity:0; }
  .gallery.is-in .gallery__panel{ animation: fanRise 1s var(--ease) both; }
  .gallery.is-in .gallery__panel:nth-child(1){ animation-delay:0s; }
  .gallery.is-in .gallery__panel:nth-child(2){ animation-delay:.1s; }
  .gallery.is-in .gallery__panel:nth-child(3){ animation-delay:.2s; }
  .gallery.is-in .gallery__panel:nth-child(4){ animation-delay:.3s; }
}
@keyframes fanRise{
  from{ opacity:0; transform: translateY(54px) rotate(var(--fan,0deg)); }
  to{ opacity:1; transform: translateY(0) rotate(0deg); }
}


/* ============================================================
   TIPOGRAFIA 2.0 — League Spartan (display) × Space Grotesk
   Look contemporaneo: titoli enormi, tutti maiuscoli, tracking
   stretto e interlinea compressa; testo + label in Space Grotesk.
   Il contrasto grande/piccolo (titolo gigante ↔ micro-label) è
   ciò che dà il mood "spezzato / artistico".
   ============================================================ */

/* — big display titles → League Spartan heavy, UPPERCASE, tight — */
.h-big,.h-mid,.trust__big,.contact__left h2,.history__title,.footer__name{
  font-family: var(--ff-display); text-transform: uppercase; font-style: normal;
  letter-spacing: -.025em; line-height: .9;
}
.h-big{ font-variation-settings:"wght" 800; font-weight:800; line-height:.86; }
.h-mid{ font-variation-settings:"wght" 760; font-weight:760; line-height:.9; }
.trust__big{ font-variation-settings:"wght" 860; font-weight:860; line-height:.82; letter-spacing:-.035em; }
.trust__big em{ font-style:normal; -webkit-text-stroke:2px var(--ink); color:transparent; }
.contact__left h2{ font-variation-settings:"wght" 820; font-weight:820; line-height:.86; }
.history__title{ font-variation-settings:"wght" 800; font-weight:800; letter-spacing:-.022em; line-height:.86; }
.footer__name{ font-variation-settings:"wght" 800; font-weight:800; letter-spacing:-.03em; }
.hero__word{ font-variation-settings:"wght" 800; font-weight:800; }

/* — DAV manifesto headline (two-tone) → League Spartan very heavy — */
.dav__headline{ font-family: var(--ff-display); text-transform:uppercase; font-style:normal;
  font-variation-settings:"wght" 860; font-weight:860; line-height:.82; letter-spacing:-.035em; }
.dav__headline .q{ font-family: var(--ff-display); font-style:normal; font-weight:500;
  font-variation-settings:"wght" 500; }

/* — work poster titles → Space Grotesk medium, normal case — */
.poster__title,.poster-caption__title,.work .h-mid{ font-family: var(--ff-sans); font-style:normal;
  text-transform:none; font-variation-settings:"wght" 500; font-weight:500; letter-spacing:-.02em; }

/* — trailer caption: titolo League Spartan in CAPS, tag Space Grotesk, leading 0.90 — */
.scroll-video__title{ font-family: var(--ff-display); text-transform:uppercase; font-style:normal;
  font-size: clamp(30px,4.4vw,68px);
  font-variation-settings:"wght" 760,"wdth" 102; font-weight:760; letter-spacing:-.02em; line-height:.85; }
.scroll-video__title em{ font-family: var(--ff-display); font-style:normal; color:var(--accent);
  font-variation-settings:"wght" 760,"wdth" 102; line-height:.85; }
.scroll-video__eyebrow,
.scroll-video__sub{ font-family: var(--ff-sans); line-height:.90; }

/* — galleria: numero League Spartan heavy, titolo Space Grotesk — */
.gallery__num{ font-family: var(--ff-display); font-style:normal;
  font-variation-settings:"wght" 800; font-weight:800; letter-spacing:-.01em; }
.gallery__title{ font-family: var(--ff-sans); font-style:normal;
  font-variation-settings:"wght" 500; font-weight:500; letter-spacing:-.015em; }

/* — stat numbers → League Spartan heavy — */
.stat b{ font-family: var(--ff-display); font-style:normal;
  font-variation-settings:"wght" 800; font-weight:800; }

/* — micro-labels / eyebrows: Space Grotesk, wide tracking, the "small" half
     of the big/small contrast — */
.mono{ font-family: var(--ff-mono); letter-spacing:.2em; font-weight:500; }
.eyebrow .num{ font-family: var(--ff-mono); }

/* — body text a touch more present in Space Grotesk — */
body{ font-weight: 400; letter-spacing: -.01em; }
.dav__lead,.dav__foot{ font-weight:400; }

/* — typewriter caret for the "diana" title (League Spartan, one font) — */
#histTitle{ font-family: var(--ff-display) !important; }
.type-caret{ display:inline-block; width:.07em; min-width:3px; height:.78em;
  margin-left:.04em; background: var(--accent); vertical-align:baseline;
  transform: translateY(.02em); animation: caretBlink 1.05s steps(1) infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }

/* — scroll-drawn annotation arrow in the Restyling manifesto — */
.dav__annot{ position:relative; width:100%; height: clamp(120px,18vh,210px);
  margin: clamp(8px,2vh,28px) 0 clamp(4px,1vh,14px); pointer-events:none; z-index:2; }
.dav__annot-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dav__arrow-line,.dav__arrow-head{ fill:none; stroke:var(--accent);
  stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.dav__arrow-head{ opacity:0; transition:opacity .18s linear; }
.dav__annot-text{ font-family:'Caveat', cursive; font-weight:700;
  font-size:46px; fill:var(--accent); letter-spacing:.01em; }
@media (max-width:760px){ .dav__annot{ height: clamp(96px,22vw,150px); }
  .dav__annot-text{ font-size:54px; } }

/* ============================================================
   LIGHTBOX — project gallery (immagini + video)
   ============================================================ */
html.lb-open{ overflow:hidden; }

.lb{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
  justify-content:center; padding: clamp(12px,3vw,48px); }
.lb[hidden]{ display:none; }
.lb__scrim{ position:absolute; inset:0; background:rgba(12,9,5,.62);
  backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1); }

.lb__dialog{ position:relative; width:min(1120px, 100%); max-height: calc(100dvh - 24px);
  display:flex; flex-direction:column; background:var(--paper); color:var(--ink);
  border-radius: 20px; overflow:hidden; box-shadow: 0 40px 120px -30px rgba(0,0,0,.6); }
/* entrance: slide+scale only (opacity stays 1) so it always resolves visible */
@keyframes lbDialogIn{ from{ transform: translateY(26px) scale(.965); } to{ transform:none; } }
.lb.is-open .lb__dialog{ animation: lbDialogIn .5s var(--ease) both; }

.lb__bar{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding: clamp(16px,2.4vw,26px) clamp(18px,2.6vw,30px) clamp(12px,1.6vw,16px);
  border-bottom:1px solid var(--line); }
.lb__meta{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.lb__num{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--terra); }
.lb__title{ margin:0; font-family:var(--ff-display); font-weight:800; letter-spacing:-.02em;
  font-size: clamp(26px,3.4vw,46px); line-height:.98; }
.lb__desc{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); }
.lb__bar-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.lb__tag{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--corallo);
  border:1px solid currentColor; border-radius:999px; padding:5px 11px; }
.lb__x{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition: background .2s ease, transform .2s var(--ease), color .2s ease; }
.lb__x svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.lb__x:hover{ background:var(--ink); color:var(--paper); transform: rotate(90deg); }

.lb__stage{ position:relative; flex:1; min-height:0; display:flex; align-items:center;
  background:var(--paper-2); }
.lb__track{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  width:100%; height: min(64dvh, 640px); scrollbar-width:none; outline:none;
  -webkit-overflow-scrolling:touch; }
.lb__track::-webkit-scrollbar{ display:none; }
.lb__slide{ flex:0 0 100%; scroll-snap-align:center; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(12px,2vw,26px); }
.lb__pair{ display:flex; gap: clamp(12px,1.8vw,24px); height:100%; width:100%;
  align-items:center; justify-content:center; }
.lb__media{ height:100%; width:auto; aspect-ratio:9/16; max-width:48%;
  border-radius:12px; overflow:hidden; background:var(--sabbia);
  box-shadow:0 18px 50px -24px rgba(0,0,0,.5); }

.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--ink); color:var(--paper); display:grid; place-items:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
  transition: opacity .2s ease, transform .2s var(--ease), background .2s ease; }
.lb__nav svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lb__nav--prev{ left: clamp(8px,1.4vw,18px); }
.lb__nav--next{ right: clamp(8px,1.4vw,18px); }
.lb__nav:hover{ background:var(--corallo); }
.lb__nav:disabled{ opacity:0; pointer-events:none; }

.lb__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: clamp(12px,1.8vw,18px) clamp(18px,2.6vw,30px); border-top:1px solid var(--line); }
.lb__dots{ display:flex; gap:9px; }
.lb__dot{ width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:var(--line); transition: background .2s ease, transform .2s var(--ease); }
.lb__dot.is-on{ background:var(--corallo); transform:scale(1.35); }
.lb__counter{ font-size:11px; letter-spacing:.16em; color:var(--ink-soft); }

@media (max-width:760px){
  .lb{ padding:0; }
  .lb__dialog{ width:100%; height:100dvh; max-height:100dvh; border-radius:0; }
  .lb__bar{ padding:16px 16px 12px; }
  .lb__bar-right .lb__tag{ display:none; }
  .lb__track{ height:auto; flex:1; }
  .lb__slide{ padding:14px; }
  .lb__pair{ gap:10px; }
  .lb__media{ height:auto; width:auto; flex:1 1 0; min-width:0; max-width:none; max-height:100%; }
  .lb__nav{ display:none; }               /* swipe instead — more dynamic on touch */
  .lb__stage{ flex:1; }
}
@media (prefers-reduced-motion: reduce){
  .lb.is-open .lb__dialog{ animation:none; }
  .lb__track{ scroll-behavior:auto; }
}

/* ============================================================
   WIP (cantiere) + INSTAGRAM
   ============================================================ */
.wip{ background: var(--ink); color: var(--paper); overflow:hidden; padding: clamp(110px,18vh,220px) var(--pad) clamp(80px,12vh,150px); }
.wip__top{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.wip__chip{ display:inline-flex; align-items:center; gap:11px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid rgba(251,248,241,.22); border-radius:40px; padding:10px 18px; color:rgba(251,248,241,.75); }
.wip__dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation: wipPulse calc(1.6s / var(--energy,1)) ease-in-out infinite; }
@keyframes wipPulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.3; transform:scale(.6) } }
.wip__big{ margin: clamp(52px,9vh,110px) 0 0; font-family:var(--ff-display); text-transform:uppercase; font-weight:800; font-variation-settings:"wght" 820;
  letter-spacing:-.032em; line-height:.94; font-size:clamp(38px,8.2vw,146px); display:flex; flex-direction:column; gap:clamp(6px,1.2vh,18px); }
.wip__big em{ font-style:normal; color:var(--accent); }
.wip__big span:nth-child(2){ margin-left:clamp(16px,7vw,150px); }
.wip__big span:nth-child(3){ margin-left:clamp(32px,14vw,300px); }
.wip__note{ margin-top: clamp(44px,7vh,90px); max-width:50ch; color:rgba(251,248,241,.7); font-size:clamp(16px,1.35vw,21px); line-height:1.75; }
.wip__board{ margin-top: clamp(56px,9vh,110px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,70px);
  border-top:1px solid rgba(251,248,241,.16); padding-top: clamp(30px,4.5vh,48px); }
@media (max-width:780px){ .wip__board{ grid-template-columns:1fr; gap:34px; } }
.wip__cell{ display:flex; flex-direction:column; gap:16px; }
.wip__cell .k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(251,248,241,.45); }
.wip__cell .v{ font-family:var(--ff-display); font-weight:800; font-variation-settings:"wght" 820; font-size:clamp(32px,4.2vw,64px); line-height:1; letter-spacing:-.035em; }
.wip__meter{ height:4px; border-radius:4px; background:rgba(251,248,241,.14); overflow:hidden; }
.wip__meter i{ display:block; height:100%; background:var(--accent); width:0; animation: wipGrow calc(1.9s / var(--energy,1)) cubic-bezier(.16,1,.3,1) .35s both; }
@keyframes wipGrow{ to{ width:var(--w,60%) } }
.igdisc{ position:relative; width:min(250px,52vw); aspect-ratio:1; display:grid; place-items:center; color:var(--paper); }
.igdisc__ring{ position:absolute; inset:0; animation: igSpin calc(24s / var(--energy,1)) linear infinite; }
.igdisc__ring svg{ width:100%; height:100%; }
.igdisc__ring text{ font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.22em; fill:rgba(251,248,241,.55); }
@keyframes igSpin{ to{ transform:rotate(360deg) } }
.igdisc__core{ position:relative; z-index:1; width:66%; aspect-ratio:1; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center;
  text-align:center; font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; line-height:1.6; transition:transform .55s cubic-bezier(.16,1,.3,1); }
.igdisc:hover .igdisc__core{ transform:scale(1.09); }
/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background: var(--ink); color: var(--paper); overflow:hidden; }
.contact .wrap{ position:relative; z-index:1; }
.contact .eyebrow .ln{ background:rgba(255,255,255,.18); }
.contact__grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,90px); }
.contact__left h2{ font-family:var(--ff-display); font-weight:500; font-size:clamp(40px,6.5vw,118px); line-height:.96; letter-spacing:-.03em;
  font-variation-settings:"opsz" 144,"wght" 500; }
.contact__sub{ color:rgba(251,248,241,.7); margin-top:22px; font-size:clamp(15px,1.2vw,19px); line-height:1.5; max-width:34ch; }
.contact__info{ margin-top:36px; display:flex; flex-direction:column; gap:14px; }
.contact__info a{ display:flex; align-items:center; gap:14px; font-size:clamp(16px,1.4vw,22px); font-weight:600;
  font-variation-settings:"wght" 600,"wdth" 100; transition:.35s var(--ease); }
.contact__info a:hover{ color:var(--accent); }
.contact__info .k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.4); width:60px; }

form.qf{ display:grid; gap:18px; }
.qf label{ display:block; }
.qf .lab{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:8px; display:block; }
.qf input, .qf textarea, .qf select{
  width:100%; background:transparent; border:none; border-bottom:1.5px solid rgba(255,255,255,.25);
  color:var(--paper); font-family:var(--ff-sans); font-size:clamp(16px,1.3vw,20px); padding:10px 0; transition:.35s var(--ease);
  cursor:none;
}
.qf input:focus, .qf textarea:focus, .qf select:focus{ outline:none; border-color:var(--accent); }
.qf textarea{ resize:none; min-height:84px; }
.qf option{ color:#000; }
.qf__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:880px){ .contact__grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .qf__row{ grid-template-columns:1fr; } }

/* big button */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  background:var(--accent); color:#fff; border:none; border-radius:50px;
  padding:18px 30px; font-weight:700; font-size:clamp(14px,1.1vw,17px);
  font-variation-settings:"wght" 700,"wdth" 105; overflow:hidden; isolation:isolate;
}
.btn::before{ content:""; position:absolute; inset:0; background:var(--ink); transform: translateY(101%); transition: transform .5s var(--ease); z-index:-1; }
.btn:hover::before{ transform: translateY(0); }
.btn svg{ transition: transform .5s var(--ease); }
.btn:hover svg{ transform: translateX(5px); }
.btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn--ghost::before{ background:var(--ink); }
.btn--ghost:hover{ color:#fff; }
.btn--onaccent{ background:var(--ink); color:#fff; }
.btn--onaccent::before{ background:var(--paper); }
.btn--onaccent:hover{ color:var(--ink); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--bg); color:var(--ink); padding: clamp(40px,6vh,80px) var(--pad) 36px; }
.footer__name{ font-family:var(--ff-display); font-weight:500; line-height:.86; font-size: clamp(40px,12.2vw,200px); letter-spacing:-.03em;
  font-variation-settings:"opsz" 144,"wght" 480; text-align:center; white-space:nowrap; }
.footer__meta{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.footer__meta .mono{ line-height:1.8; }

/* progress bar */
.prog{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--accent); z-index:120; }

/* ============================================================
   LOGHI — animated, mouse-reactive logo marquee
   ============================================================ */
.logos{ position:relative; background:var(--bg-deep); padding:clamp(40px,7vh,90px) 0; overflow:hidden; }
.logos__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:0 var(--pad) clamp(24px,4vh,46px); color:var(--ink-soft); }
.logos__head .mono{ letter-spacing:.16em; text-transform:uppercase; font-size:12px; }
.logos__hint{ opacity:.6; }
.logos__viewport{ position:relative; width:100%; overflow:hidden; cursor:ew-resize;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.logos__track{ display:flex; gap:clamp(20px,2.4vw,44px); width:max-content; will-change:transform; }
.logo-tile{ flex:0 0 auto; width:clamp(180px,17vw,260px); height:clamp(120px,11vw,160px);
  transform:skewX(var(--skew,0deg)) scale(var(--sc,1)); transition:filter .35s var(--ease);
  will-change:transform; }
.logo-tile .logo-slot{ display:block; width:100%; height:100%;
  background:var(--paper); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.logo-tile:hover{ filter:drop-shadow(0 18px 30px rgba(22,17,9,.22)); }
@media (max-width: 720px){
  .logo-tile{ width:46vw; height:30vw; }
}

/* ============================================================
   SHOWREEL — scroll-driven expanding video
   ============================================================ */
.scroll-video{ position:relative; height:280vh; background:#000; color:var(--paper); }
.scroll-video__sticky{ position:sticky; top:0; height:100vh; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.scroll-video__crop{
  --p:0; position:relative;
  width: calc(46vw + 54vw * var(--p));
  height: calc(56vh + 44vh * var(--p));
  max-width:100vw; max-height:100vh;
  border-radius: calc(14px * (1 - var(--p)));
  overflow:hidden; background:#000;
  box-shadow: 0 40px 90px -30px rgba(0,0,0, calc(.7 * (1 - var(--p))));
  transition: box-shadow .3s ease;
}
.scroll-video__media{ position:absolute; inset:0; }
.scroll-video__media video{ width:100%; height:100%; object-fit:cover; display:block; }
.scroll-video__media iframe{ border:0; display:block; pointer-events:none; }
.scroll-video__media #svYtPlayer{ position:absolute; inset:0; }
/* mute / unmute toggle */
.sv-mute{ position:absolute; top:clamp(10px,1.6vw,22px); left:50%; transform:translateX(-50%);
  z-index:6; pointer-events:auto; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border-radius:999px; cursor:pointer;
  background:rgba(10,8,5,.42); border:1px solid rgba(251,248,241,.32); color:var(--paper);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  opacity: calc(.35 + .65 * var(--p)); transition:background .2s ease, border-color .2s ease, transform .2s ease; }
.sv-mute:hover{ background:rgba(10,8,5,.72); border-color:rgba(251,248,241,.72); transform:translateX(-50%) scale(1.06); }
.sv-mute svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block; }
.sv-mute .ic-off{ display:none; }
.sv-mute[data-muted="1"] .ic-on{ display:none; }
.sv-mute[data-muted="1"] .ic-off{ display:block; }
.scroll-video__vignette{ position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
  mix-blend-mode:multiply; opacity: calc(.4 + .35 * var(--p)); }
.scroll-video__grain{ position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px), radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size:3px 3px, 5px 5px; background-position:0 0, 1px 1px; opacity:.45; mix-blend-mode:overlay; }
.scroll-video__tc{ position:absolute; font-family:var(--ff-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(251,248,241,.85); z-index:4; opacity: calc(.1 + .9 * var(--p)); padding: clamp(10px,1.5vw,22px); }
.scroll-video__tc.tl{ top:0; left:0; } .scroll-video__tc.tr{ top:0; right:0; text-align:right; }
.scroll-video__tc.bl{ bottom:0; left:0; } .scroll-video__tc.br{ bottom:0; right:0; text-align:right; }
.scroll-video__tc .rec{ width:8px;height:8px;border-radius:999px;background:var(--corallo);display:inline-block;margin-right:8px;vertical-align:1px;animation:tcPulse 1.4s ease-in-out infinite; }
@keyframes tcPulse{ 0%,100%{opacity:1} 50%{opacity:.25} }
.scroll-video__caption{ position:absolute; left:0; right:0; bottom: clamp(40px,8vh,100px); text-align:center; z-index:5; padding:0 clamp(18px,5vw,56px); pointer-events:none; }
.scroll-video__eyebrow{ color:rgba(251,248,241,.7); opacity:0; transition:opacity .3s ease, transform .3s ease; display:inline-block; }
.scroll-video__title{ font-family:var(--ff-display); font-size: clamp(26px,3.7vw,54px); line-height:1.05; letter-spacing:-.03em;
  font-weight:400; font-variation-settings:"opsz" 144,"wght" 460; margin: clamp(12px,1.6vw,20px) auto 0; max-width:30ch; opacity:0;
  transition:opacity .35s ease, transform .35s ease; text-wrap:balance; color:var(--paper); }
.scroll-video__title em{ font-style:italic; color:var(--accent); font-variation-settings:"opsz" 144,"wght" 360; }
.scroll-video__sub{ margin: clamp(14px,2vw,22px) auto 0; max-width:560px; font-size:clamp(14px,1.3vw,17px); line-height:1.5;
  color:rgba(251,248,241,.7); opacity: calc(0 + 1 * max(0, var(--p) - 0.75) * 4); }
@media (max-width:760px){
  .scroll-video{ height:220vh; }
  .scroll-video__crop{ width: calc(82vw + 18vw * var(--p)); height: calc(54vh + 46vh * var(--p)); }
  .scroll-video__tc{ font-size:9px; padding:12px; }
}

/* fallback cinematic stage */
.sv-fallback{ position:absolute; inset:0; background:#0A0A0A; overflow:hidden; }
.sv-fallback__glow{ position:absolute; left:-20%; top:-20%; width:140%; height:140%;
  background: radial-gradient(ellipse at 30% 60%, rgba(255,183,87,.6) 0%, rgba(255,92,57,.25) 35%, rgba(10,10,10,1) 70%);
  animation: fbDrift 16s ease-in-out infinite alternate; }
.sv-fallback__line{ position:absolute; left:0; right:0; top:62%; height:1px; background:rgba(251,248,241,.18); }
@keyframes fbDrift{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(-3%,2%) scale(1.06);} }

/* ============================================================
   LAVORI SELEZIONATI — poster fan
   ============================================================ */
.work{ background:var(--ink); color:var(--paper); }
.work__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-bottom:24px; border-bottom:1px solid rgba(251,248,241,.18); }
.work__archive{ color:var(--paper); letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
.poster-stage{ position:relative; height: clamp(520px,70vw,760px); display:flex; align-items:center; justify-content:center; perspective:1600px; padding: clamp(20px,4vw,60px) 0; }
.poster{
  position:absolute; left:50%; top:50%;
  width: clamp(220px,26vw,340px); height: clamp(340px,40vw,510px);
  margin-left: calc(clamp(220px,26vw,340px) / -2);
  margin-top: calc(clamp(340px,40vw,510px) / -2);
  border-radius:4px;
  box-shadow: 0 30px 60px -25px rgba(0,0,0,.6), 0 6px 12px -6px rgba(0,0,0,.4);
  transform: translate(var(--tx,0), var(--ty,0)) rotate(var(--rot,0)) scale(var(--scale,1));
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), filter .55s ease;
  will-change:transform; overflow:hidden; text-decoration:none; display:block; filter:saturate(.95);
}
.poster:hover{ filter:saturate(1.05); box-shadow: 0 50px 90px -30px rgba(0,0,0,.7), 0 10px 18px -8px rgba(0,0,0,.5); }
.poster__grain{ position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:3px 3px, 5px 5px; background-position:0 0, 1px 1px; mix-blend-mode:multiply; opacity:.5; }
.poster__sheen{ position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 25%, rgba(0,0,0,.18) 100%); mix-blend-mode:overlay; opacity:.55; }
.poster__head{ position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; z-index:3; }
.poster__body{ position:absolute; inset:0; }
.poster__title{ position:absolute; left:14px; right:14px; bottom:44px; font-family:var(--ff-display);
  font-size: clamp(28px,3.6vw,44px); line-height:.95; letter-spacing:-.02em; font-style:italic; z-index:3; }
.poster__foot{ position:absolute; left:14px; right:14px; bottom:14px; display:flex; justify-content:space-between; align-items:center; font-size:11px; z-index:3; }
.poster-caption{ margin-top: clamp(36px,6vw,60px); text-align:center; min-height:150px; }
.poster-caption > *{ transition: opacity .35s; }
.poster-caption__num{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; color:rgba(251,248,241,.55); }
.poster-caption__title{ font-family:var(--ff-display); font-size: clamp(36px,5.5vw,64px); line-height:1.02; margin-top:14px;
  font-style:italic; font-variation-settings:"opsz" 144,"wght" 460; letter-spacing:-.025em; }
.poster-caption__desc{ font-size: clamp(14px,1.4vw,17px); color:rgba(251,248,241,.7); margin:12px auto 0; max-width:480px; }

@media (max-width:760px){
  .poster-stage{ height:auto; display:grid; grid-auto-flow:column; grid-auto-columns:74%; gap:14px;
    padding:24px 18px 36px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; perspective:none; scrollbar-width:none; }
  .poster-stage::-webkit-scrollbar{ display:none; }
  .poster{ position:relative; left:auto; top:auto; margin:0; width:100%; height:420px; transform:none !important; scroll-snap-align:center; flex-shrink:0; filter:none; }
  .poster-caption{ display:none; }
  .work__head{ flex-direction:column; gap:10px; align-items:flex-start; }
}

/* ============================================================
   DISPLAY TYPE — Archivo grotesque (original)
   ============================================================ */
.hero__word,.h-big,.h-mid,.trust__big,.contact__left h2,.footer__name,
.scroll-video__title,.scroll-video__title em,.poster__title,.poster-caption__title,.stat b{
  font-family: var(--ff-display);
  text-transform: none;
  font-style: normal;
}
.h-big{ font-variation-settings:"wght" 780,"wdth" 110; letter-spacing:-.02em; line-height:.92; }
.h-mid{ font-variation-settings:"wght" 720,"wdth" 105; letter-spacing:-.015em; line-height:.98; }
.trust__big{ font-variation-settings:"wght" 800,"wdth" 112; letter-spacing:-.02em; line-height:.88; }
.trust__big em{ font-style:normal; -webkit-text-stroke:2px var(--ink); color:transparent; }
.contact__left h2{ font-variation-settings:"wght" 800,"wdth" 110; letter-spacing:-.02em; line-height:.92; }
.footer__name{ font-variation-settings:"wght" 800,"wdth" 106; letter-spacing:-.02em; line-height:.86; }
.scroll-video__title{ font-variation-settings:"wght" 760,"wdth" 106; letter-spacing:-.02em; line-height:1.02; }
.scroll-video__title em{ font-style:italic; color:var(--accent); font-variation-settings:"wght" 400,"wdth" 100; }
.poster__title,.poster-caption__title{ font-family:var(--ff-serif); font-variation-settings:"opsz" 144,"wght" 460; letter-spacing:-.01em; font-style:italic; }
.work .h-mid{ font-family:var(--ff-serif); font-style:italic; font-variation-settings:"opsz" 144,"wght" 400; letter-spacing:-.01em; }
.stat b{ font-variation-settings:"wght" 800,"wdth" 110; font-style:italic; }

/* ---- centred section titles (reference look) ---- */
.trust .eyebrow{ justify-content:center; }
.trust .eyebrow .ln{ display:none; }
.trust__big{ text-align:center; }
.trust__grid{ max-width:1100px; margin-left:auto; margin-right:auto; }

/* ============================================================
   SERVIZI v2 — faded list, ink on hover, floating media (studionamma-style)
   ============================================================ */
.svc2{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding: clamp(80px,12vh,150px) var(--pad); background:var(--bg); overflow:hidden; }
.svc2__label{ position:absolute; top: clamp(28px,6vh,64px); left: var(--pad); }
.svc2__seeall{ position:absolute; bottom: clamp(28px,6vh,56px); left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px; }
.svc2__seeall svg{ transition: transform .4s var(--ease); }
.svc2__seeall:hover svg{ transform: translateX(6px); }

.svc2__stage{ position:static; }
.svc2__list{ list-style:none; text-align:center; position:relative; z-index:2; }
.svc2__row{
  display:block; position:relative; cursor:none; white-space:nowrap;
  font-family:var(--ff-display); text-transform:uppercase;
  font-size: clamp(30px,5.6vw,82px); line-height:1.16; letter-spacing:.005em;
  font-variation-settings:"wght" 800,"wdth" 100;
  color: color-mix(in oklch, var(--ink) 20%, var(--bg));
  transition: color .35s var(--ease), transform .55s var(--ease);
  padding: clamp(1px,.3vw,4px) 0;
  will-change: transform;
}
.svc2__row:hover,.svc2__row.is-on{ color: var(--ink); }
.svc2__row:hover,.svc2__row:focus-visible{ transform: translateX(clamp(10px,1.6vw,26px)); }
.svc2__row .tag{
  font-family:var(--ff-mono); text-transform:uppercase; font-size: clamp(10px,.85vw,13px);
  letter-spacing:.14em; color: var(--ink-soft); vertical-align: middle; margin-left: 14px;
  opacity:0; transform: translateX(-8px); display:inline-block;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.svc2__row:hover .tag,.svc2__row.is-on .tag{ opacity:1; transform:none; }

/* floating media box — follows the cursor to the sides (JS-driven) */
.svc2__media{
  position:absolute; left:0; top:0; pointer-events:none; z-index:1;
  width: clamp(220px, 24vw, 420px); aspect-ratio: 4/3; border-radius:8px; overflow:hidden;
  background:var(--ink); box-shadow: 0 30px 70px -28px rgba(22,17,9,.5);
  opacity:0; transform: translate3d(0,0,0) scale(.94);
  transition: opacity .4s var(--ease);
  will-change: transform, opacity;
}
.svc2.is-active .svc2__media{ opacity:1; }
.svc2__frame{ position:absolute; inset:0; opacity:0; transform:scale(1.06);
  transition: opacity .5s var(--ease), transform .8s var(--ease); display:flex; align-items:flex-end; }
.svc2__frame.is-active{ opacity:1; transform:none; }
.svc2__frame svg{ position:absolute; inset:0; width:100%; height:100%; }
.svc2__frame .cap{ position:relative; z-index:2; margin:14px; color:#fff; font-family:var(--ff-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; mix-blend-mode:difference; }

@media (max-width: 900px){
  .svc2__media{ display:none; }
}
@media (hover: none), (max-width: 760px){
  .svc2__row{ color: var(--ink); }
  .svc2__row .tag{ opacity:1; transform:none; }
  .svc2__media{ display:none; }
}

/* ============================================================
   LA NOSTRA STORIA — full-screen, posters drift in at angles
   (papertiger-style scroll). Black, fluid, animated.
   ============================================================ */
.history{ position:relative; height:420vh; background:#16120b; color:var(--paper); }
.history__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
.history__head{ position:absolute; top:clamp(80px,11vh,130px); left:var(--pad); z-index:4; max-width:60vw; }
.history__head .eyebrow{ margin-bottom:20px; }
.history__head .eyebrow .num{ color:var(--accent); }
.history__head .eyebrow .ln{ display:none; }
.history__title{ font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(40px,7vw,118px); line-height:.92; letter-spacing:-.01em;
  font-variation-settings:"wght" 820,"wdth" 78; color:var(--accent); }
/* DIANA sits in a fixed-size slot so the font/case cycling never reflows the
   heading or the paragraph below it. The cycling word is absolutely centred
   inside, so its changing width/height can't push anything. */
.diana-slot{ display:inline-block; position:relative; width:3em; height:.72em;
  vertical-align:baseline; }
#dianaWord{ position:absolute; left:0; bottom:0;
  white-space:nowrap; line-height:1; will-change:font-family; }
.history__sub{ margin-top:clamp(18px,2.4vw,30px); max-width:30ch; color:var(--paper);
  font-size:clamp(16px,1.5vw,24px); line-height:1.32; font-weight:500; }
.history__copy{ position:absolute; right:var(--pad); top:clamp(150px,26vh,300px); z-index:4;
  max-width:38ch; color:rgba(251,248,241,.74); font-size:clamp(15px,1.25vw,19px); line-height:1.5; }
.history__hint{ position:absolute; bottom:clamp(20px,4vh,40px); left:var(--pad); color:rgba(251,248,241,.45); z-index:4; }

.history__viewport{ position:absolute; inset:0; overflow:hidden; z-index:2; }
.history__track{ position:absolute; left:0; bottom:0; display:flex; align-items:flex-end;
  padding:0 6vw clamp(40px,9vh,120px); will-change:transform; }
.hcard{ flex:0 0 auto; position:relative; width:clamp(220px,23vw,360px);
  margin-left:clamp(-70px,-3.4vw,-34px); transform-origin:center bottom;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.55)); }
.hcard:first-child{ margin-left:0; }
.hcard__img{ display:block; width:100%; height:clamp(300px,31vw,500px); background:#141210; border-radius:3px;
  outline:1px solid rgba(251,248,241,.06); }
.hcard__tag{ position:absolute; left:12px; right:12px; bottom:12px; z-index:4; max-width:calc(100% - 24px);
  font-family:var(--ff-mono); font-size:12px; line-height:1.35; letter-spacing:.02em; text-transform:none;
  color:#fff; background:rgba(10,8,5,.55); padding:8px 10px; border-radius:7px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); pointer-events:auto; text-wrap:pretty; }
.hcard--back .hcard__tag{ top:12px; bottom:auto; }
.hcard__tag b{ font-weight:400; }

@media (max-width: 760px){
  .history{ height:auto; }
  .history__sticky{ position:static; height:auto; padding-bottom:40px; }
  .history__head{ position:static; max-width:none; padding:90px var(--pad) 0; }
  .history__copy{ position:static; max-width:none; padding:22px var(--pad) 0; }
  .history__viewport{ position:static; height:auto; }
  .history__track{ position:static; transform:none !important; align-items:flex-start;
    overflow-x:auto; overflow-y:hidden; padding:30px var(--pad) 8px; gap:14px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .history__track::-webkit-scrollbar{ display:none; }
  .hcard{ width:70vw; margin-left:0 !important; transform:none !important; scroll-snap-align:center;
    filter:drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
  .history__hint{ position:static; padding:0 var(--pad); }
}

/* ============================================================
   TWEAK — type-voice variants (reshape the display character)
   ============================================================ */
/* Grotesk: swap the display family from League Spartan to Space Grotesk */
.voice-serif{ --ff-display: "Space Grotesk", system-ui, sans-serif; }
.voice-serif .hero__word,
.voice-serif .h-big,
.voice-serif .h-mid,
.voice-serif .trust__big,
.voice-serif .contact__left h2,
.voice-serif .footer__name,
.voice-serif .history__title{ font-variation-settings:"wght" 600 !important; font-weight:600 !important; letter-spacing:-.02em; }

/* Condensed: League Spartan at max weight, extra-tight tracking */
.voice-cond .h-big,
.voice-cond .h-mid,
.voice-cond .trust__big,
.voice-cond .contact__left h2,
.voice-cond .footer__name,
.voice-cond .history__title,
.voice-cond .svc2__row{ font-variation-settings:"wght" 900 !important; font-weight:900 !important; letter-spacing:-.045em; }
.voice-cond .history__title{ font-size:clamp(48px,8.4vw,150px); }

/* ============================================================
   Editorial emphasis — magazine-style accent within body copy
   ("laboratorio creativo", "e nessuna voglia di dirlo…")
   ============================================================ */
.ed-em{ font-family:var(--ff-serif); font-style:italic; font-weight:500;
  font-variation-settings:"opsz" 40,"wght" 500; letter-spacing:.005em; color:var(--paper); }

/* Drag-and-drop photo slots inside the hero box + the services float */
.hero__frame{ pointer-events:none; }
.hero__frame.is-active{ pointer-events:auto; }
.hero__frame .hero__slot{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }
.svc2__frame{ pointer-events:none; }
.svc2__frame.is-active{ pointer-events:auto; }
.svc2.is-active .svc2__media{ pointer-events:auto; }
.svc2__frame .svc2__slot{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; }

/* ============================================================
   RESTYLING — "Prima → Dopo" with the self-drawing design line
   ============================================================ */
.restyle{ background: var(--paper); color: var(--ink); }
.restyle__head{ margin-bottom: clamp(52px,9vh,120px); }
.restyle__title{ margin:0; max-width: 18ch; color:var(--accent);
  font-family:var(--ff-display); text-transform:uppercase;
  font-size:clamp(40px,7vw,118px); line-height:.92; letter-spacing:-.01em;
  font-variation-settings:"wght" 820,"wdth" 78; }
.restyle__title em{ font-style:italic; text-transform:none; color:var(--ink);
  font-family:'Fraunces', serif; font-variation-settings:"opsz" 72,"wght" 480;
  letter-spacing:0; }

/* featured work sits beside the title, right-aligned & capped */
.restyle-work--feat{ max-width: 680px; width:100%; margin-left:auto; }

/* manifesto tile — reads as an editorial caption inside the mosaic */
.restyle-note{ align-self:start; max-width: 34ch; padding-top: clamp(8px,2.5vh,34px); }
.restyle-note__txt{ margin:0; font-family:var(--ff-display); text-transform:none;
  font-variation-settings:"wght" 560,"wdth" 92; font-size:clamp(20px,2.2vw,32px);
  line-height:1.16; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; }
.restyle-note__em{ margin:.55em 0 0; font-family:'Fraunces', serif; font-style:italic;
  font-size:clamp(22px,2.5vw,36px); line-height:1.05; color:var(--accent); }
.restyle__lead{ max-width: 40ch; color: var(--ink-soft);
  font-family:'Space Mono', monospace; font-size: clamp(13px,1.05vw,16px); line-height:1.6; }

/* ── mosaic: large works, alternating left / right ── */
.restyle__mosaic{ display:flex; flex-direction:column; gap: clamp(64px,10vh,150px); }
.restyle__mosaic > .restyle-work{ width: min(100%, 1500px); align-self:center; }

.restyle-work{ position:relative; display:grid;
  grid-template-columns: minmax(120px, 26%) 1fr;
  gap: clamp(18px,2vw,42px); align-items:end; }
.restyle-work[data-side="right"]{ grid-template-columns: 1fr minmax(120px, 26%); }
.restyle-work[data-side="right"] .restyle-row__before{ order:2; }
.restyle-work[data-side="right"] .restyle-row__after{ order:1; }

/* mosaic works gain a 3rd column: the caption lives in the empty space on the
   OUTER side of the big restyled hero (opposite the small thumbnail), centered.
   The restyled square is sized by viewport height so it always fits the screen;
   its column is auto (hugs the square), the caption column takes the slack. */
.restyle__mosaic .restyle-work{ gap: clamp(48px,6vw,150px); }
.restyle__mosaic .restyle-work[data-side="left"]{ grid-template-columns: 1fr auto 1fr; }
.restyle__mosaic .restyle-work[data-side="right"]{ grid-template-columns: 1fr auto 1fr; }
.restyle__mosaic .restyle-work[data-side="left"]  .restyle-row__before{ grid-column:1; justify-self:end; }
.restyle__mosaic .restyle-work[data-side="left"]  .restyle-row__after { grid-column:2; }
.restyle__mosaic .restyle-work[data-side="left"]  .restyle-cap        { grid-column:3; justify-self:start; }
.restyle__mosaic .restyle-work[data-side="right"] .restyle-cap        { grid-column:1; justify-self:end; }
.restyle__mosaic .restyle-work[data-side="right"] .restyle-row__after { grid-column:2; }
.restyle__mosaic .restyle-work[data-side="right"] .restyle-row__before{ grid-column:3; justify-self:start; }
.restyle__mosaic .restyle-row__before{ align-self:end; width: clamp(116px, 13vw, 190px); }
.restyle__mosaic .restyle-cap{ align-self:center; flex:0 1 auto; padding-bottom:0; max-width:34ch; }
/* pin the three real columns to a single row so the caption centers against
   the tall hero (otherwise source-order + auto-rows shunt it into a short row) */
.restyle__mosaic .restyle-work > .restyle-cap,
.restyle__mosaic .restyle-work > .restyle-row__before,
.restyle__mosaic .restyle-work > .restyle-row__after{ grid-row:1; }

/* the caption fills the empty space above the small thumbnail, vertically
   centered so it reads beside the large restyled hero */
.restyle-cap{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  padding-bottom: clamp(16px,2.4vh,30px); }
.restyle-work[data-side="right"] .restyle-cap{ text-align:right; }
.restyle__mosaic .restyle-work[data-side="left"]  .restyle-cap{ text-align:left; }
.restyle__mosaic .restyle-work[data-side="right"] .restyle-cap{ text-align:right; }
.restyle-cap .restyle-note__txt{ font-size:clamp(15px,1.45vw,21px); line-height:1.18; }
.restyle-cap .restyle-note__em{ font-size:clamp(16px,1.55vw,23px); }

/* ── modern entry animations: keyframes triggered by .is-in. Resting state is
   fully visible (no base opacity:0), so content is never permanently hidden if
   the observer misfires. Transform/clip only — never fights JS tilt/parallax
   (those write transform on the FRAMES and COLUMNS, not these targets). ── */
@media (prefers-reduced-motion: no-preference){
  @keyframes rstRise{ from{ opacity:0; transform: translateY(30px) scale(.985); } to{ opacity:1; transform:none; } }
  @keyframes rstFade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes rstWipe{ from{ clip-path: inset(0 100% 0 0); opacity:0; } to{ clip-path: inset(0 0 0 0); opacity:1; } }

  .restyle__title.is-in{ animation: rstWipe 1.05s var(--ease) both; }
  .restyle__mosaic .restyle-work.is-in .restyle-media{ animation: rstRise 1.05s var(--ease) .06s both; }
  .restyle__mosaic .restyle-work.is-in .restyle-thumb{ animation: rstRise .9s var(--ease) .28s both; }
  .restyle__mosaic .restyle-work.is-in .restyle-cap{ animation: rstFade .8s ease .44s both; }
  .restyle__mosaic .restyle-work.is-in .restyle-tag{ animation: rstFade .65s ease .52s both; }
}

.restyle-row__before{ position:relative; z-index:1;
  perspective: 1100px; will-change: transform;
  align-self:stretch; display:flex; flex-direction:column; }
.restyle-row__after{ position:relative; z-index:2;
  perspective: 1100px; will-change: transform; }

/* the design line — drawn by restyle.js, routed through the gutter */
.restyle-line{ position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:0; }
.restyle-line path{ fill:none; stroke: var(--accent); stroke-width:1.5;
  stroke-linecap:butt; stroke-linejoin:miter; miter-limit:4; opacity:.5;
  transition: stroke-dashoffset 1.1s var(--ease), opacity .4s ease, stroke-width .4s ease; }
.restyle-work:hover .restyle-line path{ opacity:1; stroke-width:2; }

/* traveling light */
.restyle-comet{ position:absolute; left:0; top:0; width:10px; height:10px; z-index:1;
  border-radius:50%; background: var(--accent); pointer-events:none;
  margin:-5px 0 0 -5px; opacity:0; transition:opacity .4s ease;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
              0 0 16px 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.restyle-comet.is-live{ opacity:1; }

/* media frames — tilt target */
.restyle-frame{ position:relative; transform-style:preserve-3d; will-change:transform;
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.restyle-frame--before{ filter:saturate(.82) contrast(.96);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.restyle-work:hover .restyle-frame--before{ filter:saturate(1) contrast(1); }

/* the original is a small thumbnail; the restyled "after" is the large square hero */
.restyle-thumb{ display:block; width:100%; height:auto; aspect-ratio:4/5;
  background:#E6DDCE; outline:1px solid var(--line);
  box-shadow: 0 18px 40px -28px rgba(22,17,9,.5); }
.restyle-media{ display:block; width:100%; height:auto; aspect-ratio:1/1;
  background:#E6DDCE; outline:1px solid var(--line);
  box-shadow: 0 44px 80px -42px rgba(22,17,9,.5); }
/* mosaic restyled square: sized by viewport height so it fits on screen */
.restyle__mosaic .restyle-media{ width:auto; height: clamp(320px, 62vh, 700px); }

/* kinetic "Restyled" stamp on the after frame */
.restyle-stamp{ position:absolute; top: clamp(12px,1.4vw,18px); left: clamp(12px,1.4vw,18px);
  z-index:4; font-family:'Archivo', sans-serif; font-variation-settings:"wght" 680,"wdth" 118;
  text-transform:uppercase; letter-spacing:.14em; font-size: clamp(9px,.78vw,11px); color:#fff;
  padding:6px 12px; border-radius:999px; background: var(--accent);
  transform: translateY(-8px) scale(.92); opacity:0;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }
.restyle-work.is-in .restyle-stamp{ transform: translateY(0) scale(1); opacity:1;
  transition-delay:.5s; }

/* labels — modern grotesk, tight tracking */
.restyle-tag{ font-family:'Archivo', sans-serif; font-variation-settings:"wght" 640,"wdth" 96;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.16; color: var(--accent);
  font-size: clamp(10px,.92vw,13px); }
.restyle-tag--before{ margin-top: 14px; }
.restyle-step{ display:block; font-family:'Archivo', sans-serif;
  font-variation-settings:"wght" 840,"wdth" 125; font-size: clamp(30px,3.6vw,52px); line-height:.9;
  color: var(--ink); opacity:.15; margin-bottom:6px; letter-spacing:-.01em;
  font-variant-numeric: tabular-nums; }
.restyle-tag--after{ margin-top: 14px; text-align:left; }
.restyle-work[data-side="right"] .restyle-tag--after{ text-align:right; }

@media (max-width: 920px){
  .restyle__head{ grid-template-columns: 1fr; gap: clamp(28px,7vw,52px); }
  .restyle-work--feat{ max-width: 520px; margin-left:0; }
  .restyle__mosaic{ gap: clamp(48px,9vw,90px); }
  .restyle__mosaic > .restyle-work{ width:100%; align-self:stretch; }
  .restyle-note{ max-width: none; }
}
@media (max-width: 560px){
  .restyle-work{ grid-template-columns: 1fr; gap: clamp(20px,6vw,32px); align-items:start; }
  .restyle-work[data-side="right"] .restyle-row__before{ order:1; }
  .restyle-work[data-side="right"] .restyle-row__after{ order:2; }
  .restyle-work[data-side]{ grid-template-columns: 1fr; }
  .restyle-row__before{ max-width: 240px; }
  .restyle-tag--after, .restyle-work[data-side="right"] .restyle-tag--after{ text-align:left; }
  .restyle-line, .restyle-comet{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .restyle-comet{ display:none; }
  .restyle-frame, .restyle-frame--before{ transition:none; }
}


/* ============================================================
   DAV — "Prima → Dopo" rebuilt (davincis-style):
   floating photos that drift on scroll · large two-tone
   headline · before→after with an L-shaped connector line.
   ============================================================ */
.dav{ background: var(--bg); color: var(--ink); overflow:hidden; }
.dav .wrap{ max-width: var(--maxw); margin:0 auto; position:relative; z-index:1; }

.dav__intro{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,6vw,130px);
  max-width: 1120px; margin-top: clamp(26px,4.5vh,56px); }
.dav__lead{ font-family:var(--ff-sans); font-size:clamp(15px,1.2vw,18px); line-height:1.5;
  color:var(--ink); max-width:46ch; text-wrap:pretty; }
.dav__lead strong{ font-weight:700; }

/* giant headline + floats */
.dav__hero{ position:relative; margin: clamp(60px,12vh,150px) 0 clamp(40px,7vh,90px);
  min-height: clamp(300px, 40vw, 560px); display:flex; align-items:center; }
.dav__headline{ position:relative; z-index:3; margin:0;
  font-family:var(--ff-display); text-transform:uppercase; font-weight:900;
  font-variation-settings:"wght" 900,"wdth" 116;
  font-size: clamp(38px, 8.2vw, 142px); line-height:.86; letter-spacing:-.025em;
  max-width: 15ch; text-wrap:balance; }
.dav__headline .red{ color: var(--accent); }
.dav__headline .blk{ color: var(--ink); display:inline-block; }
.dav__headline .q{ color: var(--accent); font-family:var(--ff-serif); font-style:italic;
  font-variation-settings:"opsz" 144,"wght" 600; }

.dav__float{ position:absolute; z-index:1; display:block;
  width: clamp(120px, 13vw, 210px); height: clamp(150px, 16vw, 260px);
  border-radius:2px; box-shadow: 0 36px 60px -34px rgba(20,15,8,.5);
  will-change: transform; }
.dav__float--tall{ height: clamp(180px, 20vw, 320px); }
.dav__float--sm{ width: clamp(96px,10vw,150px); height: clamp(120px,12vw,190px); z-index:4; }

.dav__foot{ max-width: 52ch; margin-left:auto; font-family:var(--ff-sans);
  font-size:clamp(15px,1.2vw,18px); line-height:1.5; color:var(--ink); text-wrap:pretty; }

/* before → after */
.dav__ba{ position:relative; margin-top: clamp(70px,11vh,160px);
  min-height: clamp(380px, 50vw, 740px); }
.dav__orig{ position:absolute; top:0; left:0; width: clamp(160px, 17vw, 260px); z-index:2; }
.dav__orig-img{ display:block; width:100%; height: clamp(200px, 21vw, 320px); border-radius:2px;
  box-shadow:0 30px 50px -32px rgba(20,15,8,.45); }
.dav__after{ position:absolute; top:0; right:0; width: min(66%, 1040px); z-index:2; }
.dav__after-vid{ display:block; width:100%; height: clamp(360px, 42vw, 700px); border-radius:2px;
  box-shadow:0 50px 80px -40px rgba(20,15,8,.5); }

.dav__label{ font-family:var(--ff-mono); text-transform:uppercase; color:var(--accent);
  font-weight:700; font-size: clamp(11px,.92vw,13.5px); letter-spacing:.05em; line-height:1.28; }
.dav__orig .dav__label{ margin-top:14px; text-align:right; }
.dav__label--after{ position:absolute; z-index:3; right:0; bottom:0; text-align:right; }

.dav__connector{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:1; overflow:visible; }
.dav__connector path{ fill:none; stroke:var(--accent); stroke-width:1.3;
  stroke-dasharray: var(--len,1); stroke-dashoffset: var(--off,0);
  transition: stroke-dashoffset 1.1s var(--ease); }

@media (max-width: 860px){
  .dav__intro{ grid-template-columns:1fr; gap:20px; }
  .dav__hero{ min-height:0; margin: 48px 0 32px; }
  .dav__headline{ font-size: clamp(34px,10.5vw,82px); }
  .dav__float--sm{ display:none; }
  .dav__float{ opacity:.9; }
  .dav__ba{ min-height:0; display:flex; flex-direction:column; gap:22px; }
  .dav__orig,.dav__after{ position:static; width:auto; }
  .dav__orig{ width: clamp(150px,40vw,240px); }
  .dav__after-vid{ height: clamp(240px,62vw,440px); }
  .dav__connector,.dav__label--after{ display:none; }
}


/* ============================================================
   GALLERIA — 4 pannelli a tutta altezza che si espandono
   all'hover (alla lalibre · ukraine-mines). L'espansione usa
   flex-grow: nessun salto di layout, il viewport resta fermo;
   le foto sono in cover (full-height) quindi allargando si
   rivela di più senza che l'inquadratura si sposti.
   ============================================================ */
.gallery{ display:flex; width:100%; height: clamp(440px, 84vh, 920px);
  background:#0b0906; overflow:hidden; gap:2px; isolation:isolate; }
.gallery__panel{ position:relative; flex:1 1 0; min-width:0; overflow:hidden;
  cursor:pointer; transition: flex-grow .7s var(--ease); }
.gallery__panel:hover{ flex-grow: 3; }

.gallery__img{ position:absolute; inset:0; width:100%; height:100%; display:block;
  background:#0b0906; transition: filter .6s ease; filter: brightness(.74) saturate(.96); }
.gallery__panel:hover .gallery__img{ filter: brightness(1) saturate(1.02); }
.gallery:hover .gallery__panel:not(:hover) .gallery__img{ filter: brightness(.46) saturate(.85); }

.gallery__veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(to bottom,
    rgba(11,9,6,.42) 0%, rgba(11,9,6,.06) 26%,
    rgba(11,9,6,.12) 60%, rgba(11,9,6,.78) 100%);
  transition: opacity .6s ease; }
.gallery__panel:hover .gallery__veil{ opacity:.82; }

/* centred title — only legible (and only shown) once the panel opens */
.gallery__title{ position:absolute; left:50%; top:50%; z-index:3;
  transform:translate(-50%,-42%); width: min(78%, 440px); text-align:center;
  margin:0; color:#fff; font-family:var(--ff-serif);
  font-size: clamp(20px,1.9vw,34px); line-height:1.16; letter-spacing:-.01em;
  font-variation-settings:"opsz" 72,"wght" 470; text-wrap:balance;
  opacity:0; pointer-events:none;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
  transition: opacity .5s ease, transform .7s var(--ease); }
.gallery__panel:hover .gallery__title{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%);
  transition-delay:.12s; }

/* number + tag pinned to the foot, with a hairline rising from the number */
.gallery__foot{ position:absolute; left:0; right:0; bottom: clamp(22px,4.4vh,46px);
  z-index:3; text-align:center; padding:0 10px; }
.gallery__foot::before{ content:""; display:block; width:1px;
  height: clamp(26px,5.5vh,52px); margin:0 auto 16px;
  background: linear-gradient(to top, rgba(255,255,255,.6), rgba(255,255,255,0)); }
.gallery__num{ display:block; font-family:var(--ff-serif); font-style:italic;
  font-size: clamp(26px,2.5vw,42px); line-height:1; color: var(--accent);
  font-variation-settings:"opsz" 144,"wght" 500; }
.gallery__tag{ display:block; margin-top:9px; font-family:var(--ff-mono);
  text-transform:uppercase; letter-spacing:.16em; font-size: clamp(10.5px,.85vw,13px);
  color:#fff; white-space:nowrap; }

@media (max-width: 760px){
  .gallery{ flex-direction:column; height:auto; gap:3px; }
  .gallery__panel{ flex:none; height: 62vw; min-height:230px; }
  .gallery__panel:hover{ flex:none; }
  .gallery__img,
  .gallery:hover .gallery__panel:not(:hover) .gallery__img{ filter: brightness(.82) saturate(1); }
  .gallery__title{ opacity:1; transform:translate(-50%,-50%); top:42%; }
  .gallery__foot{ bottom: 20px; }
}


/* ---- GALLERIA: entrata "a ventaglio" (sale + si apre, in cascata) ---- */
@media (prefers-reduced-motion: no-preference){
  .gallery__panel:nth-child(1){ --fan:-10deg; }
  .gallery__panel:nth-child(2){ --fan:-4deg; }
  .gallery__panel:nth-child(3){ --fan:4deg; }
  .gallery__panel:nth-child(4){ --fan:10deg; }
  .gallery__panel{ transform-origin: 50% 100%; }
  .gallery:not(.is-in) .gallery__panel{ opacity:0; }
  .gallery.is-in .gallery__panel{ animation: fanRise 1s var(--ease) both; }
  .gallery.is-in .gallery__panel:nth-child(1){ animation-delay:0s; }
  .gallery.is-in .gallery__panel:nth-child(2){ animation-delay:.1s; }
  .gallery.is-in .gallery__panel:nth-child(3){ animation-delay:.2s; }
  .gallery.is-in .gallery__panel:nth-child(4){ animation-delay:.3s; }
}
@keyframes fanRise{
  from{ opacity:0; transform: translateY(54px) rotate(var(--fan,0deg)); }
  to{ opacity:1; transform: translateY(0) rotate(0deg); }
}


/* ============================================================
   TIPOGRAFIA 2.0 — League Spartan (display) × Space Grotesk
   Look contemporaneo: titoli enormi, tutti maiuscoli, tracking
   stretto e interlinea compressa; testo + label in Space Grotesk.
   Il contrasto grande/piccolo (titolo gigante ↔ micro-label) è
   ciò che dà il mood "spezzato / artistico".
   ============================================================ */

/* — big display titles → League Spartan heavy, UPPERCASE, tight — */
.h-big,.h-mid,.trust__big,.contact__left h2,.history__title,.footer__name{
  font-family: var(--ff-display); text-transform: uppercase; font-style: normal;
  letter-spacing: -.025em; line-height: .9;
}
.h-big{ font-variation-settings:"wght" 800; font-weight:800; line-height:.86; }
.h-mid{ font-variation-settings:"wght" 760; font-weight:760; line-height:.9; }
.trust__big{ font-variation-settings:"wght" 860; font-weight:860; line-height:.82; letter-spacing:-.035em; }
.trust__big em{ font-style:normal; -webkit-text-stroke:2px var(--ink); color:transparent; }
.contact__left h2{ font-variation-settings:"wght" 820; font-weight:820; line-height:.86; }
.history__title{ font-variation-settings:"wght" 800; font-weight:800; letter-spacing:-.022em; line-height:.86; }
.footer__name{ font-variation-settings:"wght" 800; font-weight:800; letter-spacing:-.03em; }
.hero__word{ font-variation-settings:"wght" 800; font-weight:800; }

/* — DAV manifesto headline (two-tone) → League Spartan very heavy — */
.dav__headline{ font-family: var(--ff-display); text-transform:uppercase; font-style:normal;
  font-variation-settings:"wght" 860; font-weight:860; line-height:.82; letter-spacing:-.035em; }
.dav__headline .q{ font-family: var(--ff-display); font-style:normal; font-weight:500;
  font-variation-settings:"wght" 500; }

/* — work poster titles → Space Grotesk medium, normal case — */
.poster__title,.poster-caption__title,.work .h-mid{ font-family: var(--ff-sans); font-style:normal;
  text-transform:none; font-variation-settings:"wght" 500; font-weight:500; letter-spacing:-.02em; }

/* — trailer caption: titolo League Spartan in CAPS, tag Space Grotesk, leading 0.90 — */
.scroll-video__title{ font-family: var(--ff-display); text-transform:uppercase; font-style:normal;
  font-size: clamp(30px,4.4vw,68px);
  font-variation-settings:"wght" 760,"wdth" 102; font-weight:760; letter-spacing:-.02em; line-height:.85; }
.scroll-video__title em{ font-family: var(--ff-display); font-style:normal; color:var(--accent);
  font-variation-settings:"wght" 760,"wdth" 102; line-height:.85; }
.scroll-video__eyebrow,
.scroll-video__sub{ font-family: var(--ff-sans); line-height:.90; }

/* — galleria: numero League Spartan heavy, titolo Space Grotesk — */
.gallery__num{ font-family: var(--ff-display); font-style:normal;
  font-variation-settings:"wght" 800; font-weight:800; letter-spacing:-.01em; }
.gallery__title{ font-family: var(--ff-sans); font-style:normal;
  font-variation-settings:"wght" 500; font-weight:500; letter-spacing:-.015em; }

/* — stat numbers → League Spartan heavy — */
.stat b{ font-family: var(--ff-display); font-style:normal;
  font-variation-settings:"wght" 800; font-weight:800; }

/* — micro-labels / eyebrows: Space Grotesk, wide tracking, the "small" half
     of the big/small contrast — */
.mono{ font-family: var(--ff-mono); letter-spacing:.2em; font-weight:500; }
.eyebrow .num{ font-family: var(--ff-mono); }

/* — body text a touch more present in Space Grotesk — */
body{ font-weight: 400; letter-spacing: -.01em; }
.dav__lead,.dav__foot{ font-weight:400; }

/* — typewriter caret for the "diana" title (League Spartan, one font) — */
#histTitle{ font-family: var(--ff-display) !important; }
.type-caret{ display:inline-block; width:.07em; min-width:3px; height:.78em;
  margin-left:.04em; background: var(--accent); vertical-align:baseline;
  transform: translateY(.02em); animation: caretBlink 1.05s steps(1) infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }

/* — scroll-drawn annotation arrow in the Restyling manifesto — */
.dav__annot{ position:relative; width:100%; height: clamp(120px,18vh,210px);
  margin: clamp(8px,2vh,28px) 0 clamp(4px,1vh,14px); pointer-events:none; z-index:2; }
.dav__annot-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dav__arrow-line,.dav__arrow-head{ fill:none; stroke:var(--accent);
  stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; }
.dav__arrow-head{ opacity:0; transition:opacity .18s linear; }
.dav__annot-text{ font-family:'Caveat', cursive; font-weight:700;
  font-size:46px; fill:var(--accent); letter-spacing:.01em; }
@media (max-width:760px){ .dav__annot{ height: clamp(96px,22vw,150px); }
  .dav__annot-text{ font-size:54px; } }

/* ============================================================
   LIGHTBOX — project gallery (immagini + video)
   ============================================================ */
html.lb-open{ overflow:hidden; }

.lb{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center;
  justify-content:center; padding: clamp(12px,3vw,48px); }
.lb[hidden]{ display:none; }
.lb__scrim{ position:absolute; inset:0; background:rgba(12,9,5,.62);
  backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1); }

.lb__dialog{ position:relative; width:min(1120px, 100%); max-height: calc(100dvh - 24px);
  display:flex; flex-direction:column; background:var(--paper); color:var(--ink);
  border-radius: 20px; overflow:hidden; box-shadow: 0 40px 120px -30px rgba(0,0,0,.6); }
/* entrance: slide+scale only (opacity stays 1) so it always resolves visible */
@keyframes lbDialogIn{ from{ transform: translateY(26px) scale(.965); } to{ transform:none; } }
.lb.is-open .lb__dialog{ animation: lbDialogIn .5s var(--ease) both; }

.lb__bar{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding: clamp(16px,2.4vw,26px) clamp(18px,2.6vw,30px) clamp(12px,1.6vw,16px);
  border-bottom:1px solid var(--line); }
.lb__meta{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.lb__num{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--terra); }
.lb__title{ margin:0; font-family:var(--ff-display); font-weight:800; letter-spacing:-.02em;
  font-size: clamp(26px,3.4vw,46px); line-height:.98; }
.lb__desc{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); }
.lb__bar-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.lb__tag{ font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--corallo);
  border:1px solid currentColor; border-radius:999px; padding:5px 11px; }
.lb__x{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition: background .2s ease, transform .2s var(--ease), color .2s ease; }
.lb__x svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.lb__x:hover{ background:var(--ink); color:var(--paper); transform: rotate(90deg); }

.lb__stage{ position:relative; flex:1; min-height:0; display:flex; align-items:center;
  background:var(--paper-2); }
.lb__track{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  width:100%; height: min(64dvh, 640px); scrollbar-width:none; outline:none;
  -webkit-overflow-scrolling:touch; }
.lb__track::-webkit-scrollbar{ display:none; }
.lb__slide{ flex:0 0 100%; scroll-snap-align:center; height:100%;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(12px,2vw,26px); }
.lb__pair{ display:flex; gap: clamp(12px,1.8vw,24px); height:100%; width:100%;
  align-items:center; justify-content:center; }
.lb__media{ height:100%; width:auto; aspect-ratio:9/16; max-width:48%;
  border-radius:12px; overflow:hidden; background:var(--sabbia);
  box-shadow:0 18px 50px -24px rgba(0,0,0,.5); }

.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--ink); color:var(--paper); display:grid; place-items:center;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.5);
  transition: opacity .2s ease, transform .2s var(--ease), background .2s ease; }
.lb__nav svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lb__nav--prev{ left: clamp(8px,1.4vw,18px); }
.lb__nav--next{ right: clamp(8px,1.4vw,18px); }
.lb__nav:hover{ background:var(--corallo); }
.lb__nav:disabled{ opacity:0; pointer-events:none; }

.lb__foot{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: clamp(12px,1.8vw,18px) clamp(18px,2.6vw,30px); border-top:1px solid var(--line); }
.lb__dots{ display:flex; gap:9px; }
.lb__dot{ width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:var(--line); transition: background .2s ease, transform .2s var(--ease); }
.lb__dot.is-on{ background:var(--corallo); transform:scale(1.35); }
.lb__counter{ font-size:11px; letter-spacing:.16em; color:var(--ink-soft); }

@media (max-width:760px){
  .lb{ padding:0; }
  .lb__dialog{ width:100%; height:100dvh; max-height:100dvh; border-radius:0; }
  .lb__bar{ padding:16px 16px 12px; }
  .lb__bar-right .lb__tag{ display:none; }
  .lb__track{ height:auto; flex:1; }
  .lb__slide{ padding:14px; }
  .lb__pair{ gap:10px; }
  .lb__media{ height:auto; width:auto; flex:1 1 0; min-width:0; max-width:none; max-height:100%; }
  .lb__nav{ display:none; }               /* swipe instead — more dynamic on touch */
  .lb__stage{ flex:1; }
}
@media (prefers-reduced-motion: reduce){
  .lb.is-open .lb__dialog{ animation:none; }
  .lb__track{ scroll-behavior:auto; }
}

/* ============================================================
   WIP (cantiere) + INSTAGRAM
   ============================================================ */
.wip{ background: var(--ink); color: var(--paper); overflow:hidden; padding: clamp(110px,18vh,220px) var(--pad) clamp(80px,12vh,150px); }
.wip__top{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.wip__chip{ display:inline-flex; align-items:center; gap:11px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid rgba(251,248,241,.22); border-radius:40px; padding:10px 18px; color:rgba(251,248,241,.75); }
.wip__dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); animation: wipPulse calc(1.6s / var(--energy,1)) ease-in-out infinite; }
@keyframes wipPulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.3; transform:scale(.6) } }
.wip__big{ margin: clamp(52px,9vh,110px) 0 0; font-family:var(--ff-display); text-transform:uppercase; font-weight:800; font-variation-settings:"wght" 820;
  letter-spacing:-.032em; line-height:.94; font-size:clamp(38px,8.2vw,146px); display:flex; flex-direction:column; gap:clamp(6px,1.2vh,18px); }
.wip__big em{ font-style:normal; color:var(--accent); }
.wip__big span:nth-child(2){ margin-left:clamp(16px,7vw,150px); }
.wip__big span:nth-child(3){ margin-left:clamp(32px,14vw,300px); }
.wip__note{ margin-top: clamp(44px,7vh,90px); max-width:50ch; color:rgba(251,248,241,.7); font-size:clamp(16px,1.35vw,21px); line-height:1.75; }
.wip__board{ margin-top: clamp(56px,9vh,110px); display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,70px);
  border-top:1px solid rgba(251,248,241,.16); padding-top: clamp(30px,4.5vh,48px); }
@media (max-width:780px){ .wip__board{ grid-template-columns:1fr; gap:34px; } }
.wip__cell{ display:flex; flex-direction:column; gap:16px; }
.wip__cell .k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(251,248,241,.45); }
.wip__cell .v{ font-family:var(--ff-display); font-weight:800; font-variation-settings:"wght" 820; font-size:clamp(32px,4.2vw,64px); line-height:1; letter-spacing:-.035em; }
.wip__meter{ height:4px; border-radius:4px; background:rgba(251,248,241,.14); overflow:hidden; }
.wip__meter i{ display:block; height:100%; background:var(--accent); width:0; animation: wipGrow calc(1.9s / var(--energy,1)) cubic-bezier(.16,1,.3,1) .35s both; }
@keyframes wipGrow{ to{ width:var(--w,60%) } }
.igdisc{ position:relative; width:min(250px,52vw); aspect-ratio:1; display:grid; place-items:center; color:var(--paper); }
.igdisc__ring{ position:absolute; inset:0; animation: igSpin calc(24s / var(--energy,1)) linear infinite; }
.igdisc__ring svg{ width:100%; height:100%; }
.igdisc__ring text{ font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.22em; fill:rgba(251,248,241,.55); }
@keyframes igSpin{ to{ transform:rotate(360deg) } }
.igdisc__core{ position:relative; z-index:1; width:66%; aspect-ratio:1; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center;
  text-align:center; font-family:var(--ff-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; line-height:1.6; transition:transform .55s cubic-bezier(.16,1,.3,1); }
.igdisc:hover .igdisc__core{ transform:scale(1.09); }
.iginvite__txt h3{ font-family:var(--ff-display); text-transform:uppercase; font-weight:800; font-variation-settings:"wght" 800;
  font-size:clamp(28px,4.6vw,74px); line-height:.94; letter-spacing:-.03em; margin:0; }
.iginvite__txt p{ margin-top:22px; color:rgba(251,248,241,.7); max-width:42ch; font-size:clamp(15px,1.25vw,19px); line-height:1.75; }
.iginvite__go{ display:inline-flex; align-items:center; gap:12px; margin-top:30px; font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.iginvite__go svg{ transition:transform .35s var(--ease); }
.iginvite__go:hover svg{ transform:translateX(6px); }

/* ============================================================
   CONTACT — more air, stacked head + two-column body
   ============================================================ */
.contact{ padding: clamp(110px,18vh,220px) var(--pad) clamp(90px,13vh,170px); }
.contact__grid{ display:block; }
.ct__head{ margin-top: clamp(44px,7.5vh,100px); }
.ct__head h2{ font-size:clamp(42px,8.2vw,148px) !important; display:flex; flex-direction:column; gap:clamp(4px,1vh,14px); }
.ct__head h2 span:nth-child(2){ margin-left:clamp(20px,8vw,170px); }
.ct__sub{ margin-top: clamp(28px,4vh,52px); max-width:44ch; color:rgba(251,248,241,.7); font-size:clamp(16px,1.35vw,21px); line-height:1.75; }
.ct__body{ margin-top: clamp(64px,10vh,130px); display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,7vw,110px);
  border-top:1px solid rgba(251,248,241,.16); padding-top: clamp(40px,6vh,72px); }
@media (max-width:900px){ .ct__body{ grid-template-columns:1fr; gap:52px; } }
.ct__rows{ display:flex; flex-direction:column; }
.ct__row{ display:flex; align-items:baseline; gap:18px; padding:24px 0; border-bottom:1px solid rgba(251,248,241,.14); transition:padding .4s var(--ease); }
.ct__row:first-child{ border-top:1px solid rgba(251,248,241,.14); }
.ct__row .k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,248,241,.45); flex:0 0 44px; }
.ct__row .v{ font-family:var(--ff-display); text-transform:uppercase; font-weight:700; font-variation-settings:"wght" 740;
  font-size:clamp(19px,2.1vw,32px); letter-spacing:-.025em; line-height:1; transition:color .35s var(--ease); }
.ct__row .ar{ margin-left:auto; opacity:0; transform:translateX(-10px); transition:.4s var(--ease); color:var(--accent); }
.ct__row:hover{ padding-left:14px; }
div.ct__row:hover{ padding-left:0; }
div.ct__row .v{ color:rgba(251,248,241,.7); }
.ct__row:hover .v{ color:var(--accent); }
.ct__row:hover .ar{ opacity:1; transform:none; }
.contact form.qf{ gap:clamp(22px,3.2vh,34px); }
.contact .qf input, .contact .qf select{ padding:16px 0; }
.contact .qf textarea{ min-height:118px; padding:16px 0; }
.contact .qf__row{ gap:clamp(22px,3vw,40px); }

/* ============================================================
   MORPH — scroll-driven photo dissolve
   ============================================================ */
.morph{ position:relative; background:var(--ink); color:var(--paper); height:320vh; }
.morph__sticky{ position:sticky; top:0; height:100vh; overflow:hidden; --p:0; }
.morph__stage{ position:absolute; inset:0; }
.morph__layer{ position:absolute; inset:0; }
.morph__layer image-slot{ width:100%; height:100%; display:block; }
.morph__layer--a{ transform: scale(calc(1.06 - var(--p) * 0.06)); filter: saturate(calc(1 - var(--p) * .3)); }
.morph__layer--b{
  transform: scale(calc(1.14 - var(--p) * 0.14));
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 calc(var(--p) * 118%), transparent calc(var(--p) * 118% + 16%));
  mask-image: linear-gradient(to top, #000 0%, #000 calc(var(--p) * 118%), transparent calc(var(--p) * 118% + 16%));
}
.morph__veil{ position:absolute; inset:0; background:linear-gradient(to top, rgba(22,17,9,.86) 0%, rgba(22,17,9,.28) 45%, rgba(22,17,9,.55) 100%); }
.morph__grain{ position:absolute; inset:0; opacity:.14; mix-blend-mode:overlay; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.7) .5px, transparent .5px); background-size:3px 3px; }
.morph__ui{ position:absolute; inset:0; padding: clamp(28px,5vh,64px) var(--pad); display:flex; flex-direction:column; justify-content:space-between; }
.morph__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.morph__loc{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(251,248,241,.62); }
.morph__name{ font-family:var(--ff-display); text-transform:uppercase; font-weight:800; font-variation-settings:"wght" 820;
  font-size:clamp(30px,6.4vw,110px); line-height:.88; letter-spacing:calc(.04em - var(--p) * .06em); margin:0;
  transform: translateY(calc(var(--p) * -1.4vh)); }
.morph__roles{ position:relative; margin-top:clamp(14px,2.4vh,26px); height:1.6em; }
.morph__roles span{ position:absolute; inset:0; display:flex; gap:clamp(12px,2vw,30px); flex-wrap:wrap;
  font-family:var(--ff-mono); font-size:clamp(10.5px,1.05vw,13px); letter-spacing:.2em; text-transform:uppercase; color:rgba(251,248,241,.78); transition:none; }
.morph__roles .r1{ opacity:calc(1 - var(--p) * 2.2); transform:translateY(calc(var(--p) * -1.2em)); }
.morph__roles .r2{ opacity:calc(var(--p) * 2.2 - 1); transform:translateY(calc((1 - var(--p)) * 1.2em)); }
.morph__card{ position:absolute; right:var(--pad); bottom:clamp(28px,5vh,64px); width:min(230px,26vw); aspect-ratio:3/4; border-radius:4px; overflow:hidden;
  transform: translateY(calc((1 - var(--p)) * 14px)) rotate(calc(3deg - var(--p) * 6deg)); box-shadow:0 30px 60px rgba(0,0,0,.45); }
.morph__card image-slot{ width:100%; height:100%; display:block; }
.morph__card::after{ content:""; position:absolute; inset:0; border:1px solid rgba(251,248,241,.22); }
@media (max-width:720px){ .morph__card{ width:38vw; } }
.morph__scroll{ position:absolute; left:50%; bottom:clamp(20px,3.5vh,36px); transform:translateX(-50%);
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(251,248,241,.5);
  opacity:calc(1 - var(--p) * 3); }
.morph__bar{ position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:2px; background:rgba(251,248,241,.16); }
.morph__bar i{ display:block; height:100%; width:calc(var(--p) * 100%); background:var(--accent); }

/* morph — instagram disc in place of the card */
.morph__igdisc{ position:absolute; right:var(--pad); bottom:clamp(28px,5vh,64px);
  transform: translateY(calc((1 - var(--p)) * 16px)) scale(calc(.94 + var(--p) * .06)); }
.morph__igdisc .igdisc{ width:min(210px,26vw); }
.morph__igdisc .igdisc__ring text{ fill:rgba(251,248,241,.7); }
@media (max-width:720px){ .morph__igdisc .igdisc{ width:40vw; } }

/* ============================================================
   HERO — wireframe 3D object (no panel, no glow)
   ============================================================ */
.hero__box{ background:transparent !important; box-shadow:none !important; }
.hero__box .hero__frame{ display:none !important; }
.hero__obj{ position:absolute; inset:0; display:grid; place-items:center; perspective:1000px; z-index:1; color:var(--ink); }
.hero__obj{ align-items:end !important; --floor:58px; padding-bottom:var(--floor); overflow:hidden; }
.hero__ball{ position:relative; width:30%; aspect-ratio:1; transform-origin:50% 100%; --amp:100%;
  animation: ballBounce calc(1.5s / var(--energy,1)) linear infinite; }
@keyframes ballBounce{
  /* --- big drop: gravity, so it accelerates --- */
  0%    { transform: translateY(calc(var(--amp) * -1.5)) scaleY(1) scaleX(1) }
  8%    { transform: translateY(calc(var(--amp) * -1.41)) scaleY(1.01) scaleX(.99) }
  16%   { transform: translateY(calc(var(--amp) * -1.17)) scaleY(1.03) scaleX(.97) }
  24%   { transform: translateY(calc(var(--amp) * -.79)) scaleY(1.06) scaleX(.94) }
  30%   { transform: translateY(calc(var(--amp) * -.45)) scaleY(1.1) scaleX(.9) }
  34%   { transform: translateY(calc(var(--amp) * -.18)) scaleY(1.13) scaleX(.88) }
  36%   { transform: translateY(0) scaleY(1.12) scaleX(.89) }
  /* --- contact: squash, then release --- */
  38.5% { transform: translateY(0) scaleY(.72) scaleX(1.28) }
  41%   { transform: translateY(0) scaleY(1.08) scaleX(.93) }
  /* --- rebound up, decelerating --- */
  46%   { transform: translateY(calc(var(--amp) * -.4)) scaleY(1.09) scaleX(.92) }
  52%   { transform: translateY(calc(var(--amp) * -.72)) scaleY(1.04) scaleX(.97) }
  58%   { transform: translateY(calc(var(--amp) * -.88)) scaleY(1) scaleX(1) }
  62%   { transform: translateY(calc(var(--amp) * -.9)) scaleY(1) scaleX(1) }
  /* --- second, smaller fall --- */
  68%   { transform: translateY(calc(var(--amp) * -.74)) scaleY(1.03) scaleX(.97) }
  74%   { transform: translateY(calc(var(--amp) * -.42)) scaleY(1.07) scaleX(.94) }
  78%   { transform: translateY(calc(var(--amp) * -.12)) scaleY(1.1) scaleX(.91) }
  79.5% { transform: translateY(0) scaleY(1.09) scaleX(.92) }
  81.5% { transform: translateY(0) scaleY(.82) scaleX(1.16) }
  83.5% { transform: translateY(0) scaleY(1.05) scaleX(.96) }
  /* --- little hop, settle, then wind back up --- */
  87%   { transform: translateY(calc(var(--amp) * -.26)) scaleY(1.03) scaleX(.97) }
  90%   { transform: translateY(calc(var(--amp) * -.34)) scaleY(1) scaleX(1) }
  94%   { transform: translateY(calc(var(--amp) * -.86)) scaleY(1.03) scaleX(.97) }
  100%  { transform: translateY(calc(var(--amp) * -1.5)) scaleY(1) scaleX(1) }
}
.hero__ball-in{ position:absolute; inset:0; border-radius:50%; background:var(--accent);
  background-image: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 46%); }
.hero__ball-hi{ position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--ink); opacity:.22; }
.hero__ball-shadow{ position:absolute; bottom:calc(var(--floor) - 6px); left:50%; z-index:-1; width:24%; aspect-ratio:5/1; border-radius:50%;
  background:var(--ink); opacity:.16; transform:translateX(-50%);
  animation: ballShadow calc(1.5s / var(--energy,1)) linear infinite; }
@keyframes ballShadow{
  0%    { transform:translateX(-50%) scale(.5); opacity:.05 }
  24%   { transform:translateX(-50%) scale(.68); opacity:.09 }
  36%   { transform:translateX(-50%) scale(1); opacity:.17 }
  38.5% { transform:translateX(-50%) scale(1.14); opacity:.2 }
  41%   { transform:translateX(-50%) scale(1); opacity:.17 }
  52%   { transform:translateX(-50%) scale(.72); opacity:.1 }
  62%   { transform:translateX(-50%) scale(.66); opacity:.08 }
  79.5% { transform:translateX(-50%) scale(1); opacity:.17 }
  81.5% { transform:translateX(-50%) scale(1.1); opacity:.19 }
  90%   { transform:translateX(-50%) scale(.86); opacity:.13 }
  100%  { transform:translateX(-50%) scale(.5); opacity:.05 }
}
.hero__clients{ position:absolute; left:50%; bottom:1%; transform:translateX(-50%); z-index:3;
  display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:40px; background:transparent;
  border:1px solid rgba(22,17,9,.35); color:var(--ink); cursor:pointer;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap; transition:.4s var(--ease); }
.hero__clients b{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.hero__clients:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.hero__clients:hover b{ background:#fff; }

/* ============================================================
   CLIENTI overlay — blur only, logos poing into a ring
   ============================================================ */
.clov{ position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);
  pointer-events:none; opacity:0; visibility:hidden;
  transition: opacity .5s var(--ease), visibility .5s, backdrop-filter .7s var(--ease), -webkit-backdrop-filter .7s var(--ease); }
.clov.is-open{ opacity:1; visibility:visible; pointer-events:auto;
  backdrop-filter:blur(22px) saturate(1.1); -webkit-backdrop-filter:blur(22px) saturate(1.1); }
.clov__head{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.clov__head .clov__title{ position:absolute; top:clamp(22px,4vh,44px); left:var(--pad); }
.clov__title{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  opacity:0; transform:translateY(-10px); transition:.6s var(--ease) .15s; }
.clov.is-open .clov__title{ opacity:1; transform:none; }
.clov__x{ position:absolute; left:50%; top:max(14px, calc(50% - var(--r) - 9rem)); transform:translateX(-50%);
  width:clamp(46px,4.4vw,60px); aspect-ratio:1; border-radius:50%; border:1px solid rgba(22,17,9,.3);
  background:transparent; display:grid; place-items:center; color:var(--ink); cursor:pointer;
  transition:.45s var(--ease); opacity:0; transform:scale(.6) rotate(-60deg); }
.clov.is-open .clov__x{ opacity:1; transform:none; transition-delay:.25s; }
.clov__x:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:rotate(90deg) scale(1.06); }
.clov__x svg{ width:42%; height:42%; }
.clov{ --r:31vmin; }
.clov__ring{ position:relative; width:min(92vmin,1020px); aspect-ratio:1; }
.clov__cell{ position:absolute; top:50%; left:50%; width:clamp(112px,15.5vmin,184px); aspect-ratio:3/2; margin:0;
  transform: translate(-50%,-50%) scale(.2); opacity:0;
  transition: transform .72s cubic-bezier(.34,1.56,.44,1), opacity .4s ease;
  transition-delay: calc(var(--i) * 70ms); }
.clov.is-open .clov__cell{ opacity:1;
  transform: translate(calc(-50% + var(--cos) * var(--r)), calc(-50% + var(--sin) * var(--r))) rotate(var(--rot)) scale(1);
  animation: cellFloat var(--dur) ease-in-out infinite alternate;
  animation-delay: calc(.8s + var(--i) * 70ms); }
@keyframes cellFloat{
  to{ transform: translate(calc(-50% + var(--cos) * var(--r) + var(--fx)), calc(-50% + var(--sin) * var(--r) + var(--fy))) rotate(calc(var(--rot) * -1)) scale(1.04) }
}
.clov__slot{ display:block; width:100%; height:100%; }
.clov__hint{ position:absolute; bottom:clamp(20px,3.5vh,40px); left:50%; transform:translateX(-50%);
  font-family:var(--ff-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(22,17,9,.6);
  opacity:0; transition:.6s var(--ease) .6s; }
.clov.is-open .clov__hint{ opacity:1; }

/* X anchored just above the logo ring */
.clov__head{ pointer-events:none; }
.clov__head .clov__x{ pointer-events:auto; }
.clov__x{ opacity:0; transform:translateX(-50%) scale(.6) rotate(-60deg); }
.clov.is-open .clov__x{ opacity:1; transform:translateX(-50%) scale(1) rotate(0deg); transition-delay:.25s; }
.clov__x:hover{ background:var(--accent); border-color:var(--accent); color:#fff; transform:translateX(-50%) rotate(90deg) scale(1.06); }

/* ============================================================
   MOBILE — keep every animation, fix fit & centering
   ============================================================ */
@media (max-width:760px){
  html,body{ overflow-x:clip; }

  /* hero: stack the wordmark and give the ball its own centered row */
  .hero__box{ margin-inline:auto; }
  .hero__obj{ --floor:44px; }
  .hero__ball{ width:34%; --amp:75%; }
  .hero__ball-shadow{ width:27%; bottom:calc(var(--floor) - 5px); }
  .hero__clients{ bottom:0; font-size:10px; letter-spacing:.12em; padding:11px 18px; min-height:44px; }

  /* morph: readable name, roles stack, disc centered under the text */
  .morph{ height:280vh; }
  .morph__name{ font-size:clamp(30px,10.5vw,58px); }
  .morph__roles{ height:auto; min-height:3.4em; }
  .morph__roles span{ position:absolute; gap:10px 14px; font-size:10px; letter-spacing:.14em; }
  .morph__igdisc{ left:50%; right:auto; transform:translateX(-50%) translateY(calc((1 - var(--p)) * 16px)); }
  .morph__igdisc .igdisc{ width:38vw; }
  .morph__ui{ padding-bottom:clamp(150px,34vw,210px); }
  .morph__scroll{ bottom:auto; top:clamp(64px,12vh,90px); }

  /* clienti popup: wider ring, smaller tiles, no overlap */
  .clov{ --r:36vw; }
  .clov__ring{ width:92vw; }
  .clov__cell{ width:clamp(80px,24vw,104px); }
  .clov__x{ width:46px; }
  .clov__title{ font-size:10px; letter-spacing:.16em; }
  .clov__hint{ bottom:clamp(16px,3vh,28px); }

  /* touch targets */
  .ct__row{ padding:20px 0; min-height:56px; align-items:center; }
  .nav__cta{ min-height:44px; display:inline-flex; align-items:center; }
  .igdisc__core{ font-size:10px; }
}
@media (max-width:420px){
  .clov{ --r:34vw; }
  .clov__cell{ width:76px; }
  .hero__ball{ width:38%; --amp:70%; }
}

/* gallery — client logo badge, pinned to each panel's top-left corner */
.gallery__logo{ position:absolute; top:clamp(16px,2.2vw,28px); left:clamp(16px,2.2vw,28px); z-index:2; pointer-events:none;
  width:clamp(78px,7.5vw,112px); height:clamp(38px,3.6vw,54px); object-fit:contain; object-position:left center;
  filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.35)); opacity:.62;
  transition:opacity .6s ease, transform .9s cubic-bezier(.16,1,.3,1); transform-origin:left top; }
.gallery__panel:hover .gallery__logo{ opacity:.95; transform:scale(1.08); }
.gallery:hover .gallery__panel:not(:hover) .gallery__logo{ opacity:.38; }

/* gallery — photo OR video per panel */
.gallery__vid{ opacity:0; pointer-events:none; transition:opacity .5s ease, filter .6s ease; }
.gallery__panel.has-video .gallery__vid,
.gallery__panel.is-vdrag .gallery__vid{ opacity:1; pointer-events:auto; }
.gallery__addvid{ position:absolute; right:clamp(14px,2vw,24px); top:clamp(14px,2vw,24px); z-index:3;
  font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:rgba(10,8,5,.5); border:1px solid rgba(255,255,255,.3); border-radius:40px;
  padding:9px 14px; min-height:36px; cursor:pointer; backdrop-filter:blur(6px);
  opacity:0; transform:translateY(-4px); transition:opacity .35s ease, transform .35s ease, background .3s; }
.gallery__panel:hover .gallery__addvid{ opacity:1; transform:none; }
.gallery__addvid:hover{ background:var(--accent); border-color:var(--accent); }
.gallery__panel.has-video .gallery__addvid{ display:none; }
@media (hover:none){ .gallery__addvid{ opacity:.85; transform:none; } }

/* ============================================================
   TOUCH + TABLET polish
   ============================================================ */
/* I.A stays in the nav on phones too */
@media (max-width:760px){
  .nav__links{ gap:16px; }
  .nav__links a[href="#showreel"]{ display:inline-flex !important; align-items:center; min-height:44px; }
}
/* gallery on touch: scroll-in light-up + tap to expand (tablet row layout) */
@media (hover:none){
  .gallery__panel .gallery__img{ filter:brightness(.66) saturate(.92); transition:filter .8s ease; }
  .gallery__panel.is-inview .gallery__img,
  .gallery__panel.is-tap .gallery__img{ filter:brightness(1) saturate(1.02); }
  .gallery__panel .gallery__logo{ opacity:.5; transform:scale(.96); }
  .gallery__panel.is-inview .gallery__logo,
  .gallery__panel.is-tap .gallery__logo{ opacity:.95; transform:scale(1.06); }
  .gallery__panel.is-inview .gallery__foot{ transform:translateY(-4px); }
  .gallery__foot{ transition:transform .8s cubic-bezier(.16,1,.3,1); }
}
@media (hover:none) and (min-width:761px){
  .gallery__panel{ transition:flex-grow .9s cubic-bezier(.16,1,.3,1); }
  .gallery__panel.is-tap{ flex-grow:3; }
}
/* tablet: gallery a bit shorter so it fits a portrait screen */
@media (min-width:761px) and (max-width:1100px){
  .gallery{ height: clamp(420px, 70vh, 760px); }
  .gallery__logo{ width:92px; height:44px; }
}


/* ============================================================
   RESPONSIVE PASS — phone + tablet
   ============================================================ */
@media (min-width:761px) and (max-width:1100px){
  .hero__box{ width:clamp(150px,20vw,230px) !important; }
  .svc2{ min-height:auto; padding:clamp(120px,14vh,160px) var(--pad) clamp(100px,11vh,140px); }
  .wip{ padding:clamp(110px,12vh,150px) var(--pad) clamp(90px,10vh,120px); }
  .contact{ padding:clamp(110px,12vh,150px) var(--pad) clamp(90px,10vh,120px); }
}
@media (max-width:760px){
  /* hero: DISTA / ball / SPACE stacked, centred in the screen */
  .hero{ justify-content:center; padding:96px var(--pad) 26px; }
  .hero__line{ flex-direction:column; gap:12px; flex:1 1 auto; justify-content:center; }
  .hero__word{ transform:none !important; line-height:.82; }
  .hero__box{ width:min(58vw,250px) !important; aspect-ratio:1 !important; transform:none !important; }
  .hero__meta{ margin-top:28px !important; column-gap:16px !important; align-items:flex-end; flex-wrap:nowrap; }
  .hero__tag h2{ font-size:17px; }
  .hero__clients{ font-size:11px; }
  .hero .mono{ font-size:11px; }
  /* servizi: rows wrap instead of overflowing */
  .svc2{ min-height:auto; padding:104px var(--pad) 84px; }
  .svc2__row{ white-space:normal; font-size:clamp(28px,8.6vw,44px); line-height:1.02; padding:9px 0; }
  .svc2__row .tag{ display:block; margin:6px 0 0; font-size:10.5px; }
  /* cantiere */
  .wip{ padding:96px var(--pad) 76px; }
  .wip__big{ margin-top:40px; font-size:clamp(32px,10.4vw,58px); }
  .wip__big span:nth-child(2){ margin-left:7vw; }
  .wip__big span:nth-child(3){ margin-left:0; }
  .wip__note{ margin-top:28px; }
  .wip__board{ margin-top:40px; padding-top:28px; }
  /* contatti */
  .contact{ padding:96px var(--pad) 76px; }
  .ct__head{ margin-top:32px; }
  .ct__body{ margin-top:44px; padding-top:32px; }
  /* galleria: taller tiles on phones */
  .gallery__panel{ min-height:62vw; }
}
@media (hover:none){
  .hero__scroll .mono{ display:none; }
}

@media (min-width:761px) and (max-width:1100px) and (orientation:portrait){
  .hero{ justify-content:center; }
  .hero__line{ flex-direction:column; gap:18px; flex:1 1 auto; justify-content:center; }
  .hero__word{ transform:none !important; line-height:.82; }
  .hero__box{ width:min(40vw,360px) !important; aspect-ratio:1 !important; transform:none !important; }
  .hero__meta{ margin-top:36px !important; column-gap:24px !important; flex-wrap:nowrap; align-items:flex-end; }
}

/* ===== mobile/tablet fixes v2 ===== */
@media (max-width:1100px){
  .hero .shape--c{ display:none !important; }
  .hero .shape--a{ display:none !important; }
}
@media (max-width:760px){
  .hero .shape--ring{ width:64px !important; height:64px !important; border-width:8px !important; bottom:5% !important; right:4% !important; }
  /* sticky sections sized to the visible screen */
  .morph__sticky,.scroll-video__sticky{ height:100svh; }
  /* morph: show the right side of the photo (where Diana is) */
  .morph__layer{ overflow:hidden; }
  .morph__layer image-slot{ position:absolute; top:0; height:100%; width:calc(100svh * 1916 / 821); max-width:none;
    left:calc(50vw - 100svh * 1916 / 821 * .72); }
  /* trailer: grows to full screen, holds, then shrinks */
  .scroll-video{ height:320svh; }
  .scroll-video__crop{ width:calc(78vw + 22vw * var(--p)) !important; height:calc(46svh + 54svh * var(--p)) !important; border-radius:calc((1 - var(--p)) * 14px); }
  /* contatti: headline left aligned */
  .ct__head, .ct__head h2{ text-align:left; align-items:flex-start; }
  .ct__head h2 span:nth-child(2){ margin-left:0 !important; }
}

@media (max-width:1100px){ .nav__links a:not(.nav__cta){ display:none !important; } }

/* forme sempre dietro le scritte */
.hero .shape{ z-index:0 !important; }
.hero__line,.hero__meta,.hero__word{ position:relative; z-index:2; }

@media (max-width:1100px), (hover:none){ .hero__scroll .mono, .logos__hint{ display:none !important; } }