/* ============================================================
   DROP Films — shared design system
   Aesthetic inherited from DROP Lab. Brand gradient (orange->red)
   replaced by a single flat accent: #f9cc15.
   ============================================================ */

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

:root {
  --bg: #000000;
  --bg-lift: #0A0A0A;
  --bg-card: #0E0E0E;
  --bg-card-hover: #161616;
  --ink: #FFFFFF;
  --ink-soft: #9A9A9A;
  --ink-faint: #777777;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.15);

  /* Brand accent — flat yellow. No gradient, no red/orange. */
  --accent: #f9cc15;
  --accent-ink: #000000;            /* text/icons sitting ON accent fill */
  --accent-soft: rgba(249,204,21,0.14);
  --accent-glow: rgba(249,204,21,0.30);

  --max: 1400px;
  --gutter: clamp(20px, 4vw, 64px);
  --content-edge: max(var(--gutter), calc(50vw - var(--max) / 2 + var(--gutter)));
  --radius-pill: 999px;
  --radius-card: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --section-pad: clamp(72px, 11vw, 160px); /* ritmo verticale comune sezioni standard */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Lenis 1.3.26 (assets/js/vendor): la libreria mette su <html> le classi lenis, lenis-smooth
   (solo durante lo scroll morbido), lenis-stopped, lenis-locked, lenis-scrolling.
   Regole del CSS ufficiale: evitano il conflitto con html { scroll-behavior: smooth }.
   Restano prima di html.intro-busy, che deve vincere durante l'intro della home. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  *, *::before, *::after { transition-delay: 0s !important; animation-delay: 0s !important; }
  .reveal { opacity: 1 !important; transform: none !important; translate: none !important; animation: none !important; }
  .hero-enter > img.bg, .hero-enter > h1, .faq details[open] .a { opacity: 1 !important; animation: none !important; filter: none !important; }
  img.is-pending { opacity: 1 !important; }
  img.is-loaded { animation: none !important; }
  .marquee-track { animation: none !important; }
}

body {
  font-family: 'Inter Tight', system-ui, sans-serif;
  background: var(--bg); color: var(--ink);
  font-size: 15px; line-height: 1.55; font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a, button { cursor: pointer; }
a { color: inherit; text-decoration: none; transition: color 280ms ease, opacity 280ms ease; }
button { background: none; border: none; font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* typographic finesse: balanced headlines, no orphans in body, branded selection */
h1, h2, h3, .mani { text-wrap: balance; }
p, li, figcaption, .lab2-sub { text-wrap: pretty; }
::selection { background: var(--accent); color: #000; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #000; padding: 12px 16px; font-weight: 600; font-size: 11px; z-index: 1000; }
.skip:focus { left: 16px; top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- highlight (replaces DROP Lab gradient text) ---- */
.hl { color: var(--accent); }
em { font-style: normal; }

/* ---- layout helpers ---- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section-pad) 0; }
.section--tight { padding: clamp(48px, 7vw, 96px) 0; }

/* section label = pill, like DROP Lab (.sec-tag): grey text, accent italic number */
.eyebrow {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 8px 16px;
  background: rgba(10,10,10,0.5); backdrop-filter: blur(8px);
}
.eyebrow .num { font-style: italic; font-weight: 600; color: var(--accent); margin-right: 8px; padding-right: 2px; }

.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head h2 {
  font-size: clamp(28px, 4vw, 52px); font-weight: 700;
  line-height: 1.04; letter-spacing: -0.035em; margin-top: 16px;
}
.sec-head p { color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 18px); margin-top: 18px; max-width: 56ch; }

/* ---- reveal ---- */
/* animazione e non transition: le card hanno transition proprie (hover) che la annullavano, e il ritardo
   dello stagger non deve rallentare l'hover. Si anima 'translate' (non transform) per non toccare gli hover. */
:root { --reveal-dur: 800ms; --reveal-y: 18px; }
@keyframes revealUp { from { opacity: 0; translate: 0 var(--reveal-y); } }
.reveal:not(.in) { opacity: 0; }
.reveal.in { animation: revealUp var(--reveal-dur) var(--ease) var(--rd, 0ms) backwards; }
.reveal[data-delay="1"] { --rd: 80ms; }
.reveal[data-delay="2"] { --rd: 160ms; }
.reveal[data-delay="3"] { --rd: 240ms; }
.reveal[data-delay="4"] { --rd: 320ms; }

/* ingresso delle testate interne (Works, About, Contatti, Merch), al caricamento: la foto (LCP) non parte
   mai trasparente, si assesta solo di scala; il titolo arriva con dissolvenza e un velo di sfocatura */
@keyframes heBg { from { scale: 1.06; } }
@keyframes heTitle { from { opacity: 0; translate: 0 22px; filter: blur(8px); } }
.hero-enter > img.bg { animation: heBg 1800ms var(--ease) both; }
.hero-enter > h1 { animation: heTitle 1000ms var(--ease) 160ms both; }
.hero-wait > img.bg, .proj-hero.hero-wait .ph-bg { animation-play-state: paused; }

/* immagini: dissolvenza al caricamento (solo lazy non ancora arrivate, la classe la mette il JS) */
@keyframes imgIn { from { opacity: 0; } }
img.is-pending { opacity: 0 !important; }
img.is-loaded { animation: imgIn 600ms var(--ease); }

/* ============== NAV ============== */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--max) - 2 * var(--gutter));
  padding: 10px 14px 10px 18px;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(10,10,10,0.72); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 16px; letter-spacing: -0.015em;
}
.nav-brand .films { font-weight: 400; color: var(--ink-soft); }
.brand-logo { display: block; width: auto; }
.nav-brand .brand-logo { height: 17px; }
.nav-links { display: flex; gap: 2px; }
/* da computer le voci stanno al centro della pagina, non a metà tra logo e bottoni
   (il blocco di destra è più largo del logo): due colonne laterali uguali */
@media (min-width: 901px) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; }
  .nav-brand { justify-self: start; }
  .nav-right { justify-self: end; }
  .nav-links { position: relative; left: -2px; }  /* compensa il padding della pillola: 18px a sinistra, 14px a destra */
}
.nav-links a {
  font-size: 13px; font-weight: 500;
  padding: 7px 13px; border-radius: var(--radius-pill);
  color: var(--ink-soft);
  transition: color 280ms ease, background 280ms ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); background: rgba(255,255,255,0.05); }
.nav-links a[aria-current="page"] { color: var(--accent); }
/* voce "Lab": l'unica del menu col gradiente di DROP Lab (porta al sito del Lab, nuova scheda) */
/* a riposo grigia come le altre voci; all'hover una scia luminosa attraversa la parola e lascia il gradiente di DROP Lab.
   Sfondo largo 3 volte la parola: [gradiente | scia | grigio]; si vede il terzo grigio, all'hover scorre al primo */
.nav-lab span {
  background-image: linear-gradient(90deg, #FE9B08 0%, #FF0C0C 33%, #ffd7a0 35%, #ffffff 36%, var(--ink-soft) 39%, var(--ink-soft) 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position 0.75s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
}
.nav-lab:hover span, .nav-lab:focus-visible span { background-position: 0% 0; filter: drop-shadow(0 0 7px rgba(255, 90, 20, 0.45)); }
@media (prefers-reduced-motion: reduce) { .nav-lab span { transition: none; } }

.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: var(--ink); color: var(--bg);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  transition: background 280ms ease, color 280ms ease;
}
.nav-cta:hover { background: var(--accent); color: var(--accent-ink); }
.nav-cta .arrow { transition: transform 280ms ease; display: inline-block; }
.nav-cta:hover .arrow { transform: translateX(2px); }

.nav-right { display: inline-flex; align-items: center; gap: 8px; }
.lang-toggle {
  display: inline-flex; gap: 2px;
  padding: 3px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.4);
}
.lang-btn {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  padding: 5px 10px; border-radius: var(--radius-pill);
  color: var(--ink-soft); background: transparent;
  transition: color 200ms ease, background 200ms ease;
}
.lang-btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.lang-btn:not([aria-pressed="true"]):hover { color: var(--ink); }

.nav-burger { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); align-items: center; justify-content: center; }
.nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--ink); position: relative; }
.nav-burger span::before, .nav-burger span::after { content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--ink); }
.nav-burger span::before { top: -5px; } .nav-burger span::after { top: 5px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; width: 44px; height: 44px; flex: none; }
  .nav-cta { white-space: nowrap; }
  .lang-btn { padding: 11px 16px; font-size: 12px; }
}
/* nav compatta: sotto i 520px la CTA vive nella dock e nel footer, il burger deve starci */
@media (max-width: 520px) {
  .nav-cta { display: none; }
}

/* ============== BUTTONS ============== */
.btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 15px;
  transition: transform 280ms var(--ease), box-shadow 280ms ease, filter 200ms ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -12px var(--accent-glow); filter: brightness(1.05); }
.btn-cta-scrivici { background: #fff; color: #000; transition: background 300ms var(--ease), color 300ms var(--ease), transform 280ms var(--ease), box-shadow 280ms ease; }
.btn-cta-scrivici:hover { background: var(--accent); color: var(--accent-ink); }
.btn-primary .arrow { transition: transform 280ms ease; }
.btn-primary:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); color: var(--ink);
  font-weight: 500; font-size: 15px;
  transition: border-color 280ms ease, background 280ms ease;
}
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn-ghost .play { width: 0; height: 0; border-left: 8px solid var(--accent); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }

/* ============== HERO ============== */
.hero {
  min-height: 100vh; padding: 128px var(--gutter) 40px;
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; overflow: hidden;
}
.hero-photo {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 40%, rgba(249,204,21,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 80% 70% at 50% 90%, rgba(249,204,21,0.10) 0%, transparent 60%),
    linear-gradient(180deg, #100c00 0%, #050400 60%, #000 100%);
}
.hero-photo video, .hero-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.hero-photo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 80% at 50% 46%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.92) 100%); }
.hero-photo::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 3px); pointer-events: none; }

.hero-content { position: relative; z-index: 2; max-width: 1000px; }
.hero-headline {
  font-size: clamp(38px, 5.8vw, 84px); font-weight: 700;
  line-height: 1; letter-spacing: -0.04em;
}
.hero-sub { color: var(--ink-soft); font-size: clamp(16px, 1.8vw, 21px); margin-top: 28px; line-height: 1.5; }
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

.hero-bottom {
  position: absolute; bottom: 26px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--gutter);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}
.hero-bottom .df-link { color: var(--ink-soft); }
.hero-bottom .df-link:hover { color: var(--accent); }
.scroll-hint .arrow { display: inline-block; animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(3px);} }
@media (max-width: 700px) { .hero-bottom { font-size: 9px; gap: 8px; } .hero-bottom .scroll-hint { display: none; } }

/* corner tags for media frames */
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

/* ============== MANIFESTO ============== */

/* ============== CLIENTS MARQUEE ============== */
.marquee { position: relative; padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 64px; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-size: clamp(20px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink-faint); white-space: nowrap; transition: color 280ms ease; }
.marquee-track span:hover { color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============== CARD GRID (works / services) ============== */
.grid { display: grid; gap: 18px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.work-card {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-card);
  overflow: hidden; background: var(--bg-card); aspect-ratio: 4 / 3;
  transition: border-color 320ms ease, transform 320ms var(--ease);
}
.work-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.work-card .thumb { position: absolute; inset: 0; background: linear-gradient(135deg, #161616 0%, #0b0b0b 100%); transition: transform 600ms var(--ease); }
.work-card img, .work-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease), opacity 320ms ease; }
.work-card:hover img, .work-card:hover video { transform: scale(1.04); }
.work-card .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%); }
.work-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; }
.work-card .cat { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.work-card .title { font-size: clamp(19px, 2vw, 24px); font-weight: 600; letter-spacing: -0.02em; margin-top: 8px; }
.work-card .client { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }
.work-card .corner { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; color: var(--ink); opacity: 0; transform: translateY(-4px); transition: opacity 280ms ease, transform 280ms ease, background 280ms ease, color 280ms ease; }
.work-card:hover .corner { opacity: 1; transform: none; background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* feature card (services) */
.feature {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--bg-card); padding: 30px;
  transition: border-color 320ms ease, background 320ms ease, transform 320ms var(--ease);
}
.feature:hover { border-color: var(--line-strong); background: var(--bg-card-hover); transform: translateY(-3px); }
.feature .fnum { font-style: italic; font-weight: 600; color: var(--accent); font-size: 14px; padding-right: 4px; }
.feature h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 18px 0 10px; }
.feature p { color: var(--ink-soft); font-size: 14.5px; }

/* ============== PER LE AGENZIE · divisione di ruoli "Voi / Noi" ============== */
.agency .ag-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 7vw, 110px); max-width: 940px; margin: clamp(44px, 6vw, 80px) auto 0; }
.agency .ag-split::before { content: ''; position: absolute; left: 50%; top: 6%; bottom: 6%; width: 1px; background: var(--line-strong); }
.agency .ag-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: clamp(20px, 2.6vw, 30px); }
.agency .ag-col--us .ag-label { color: var(--accent); }
.agency .ag-list { list-style: none; display: flex; flex-direction: column; gap: clamp(11px, 1.4vw, 17px); }
.agency .ag-list li { font-size: clamp(20px, 2.5vw, 33px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.12; }
.agency .ag-col--you .ag-list li { color: var(--ink-soft); }
.agency .ag-col--us .ag-list li { color: var(--ink); }
.agency .ag-archive { color: var(--accent) !important; }
.agency .ag-foot { text-align: center; max-width: 680px; margin: clamp(40px, 5vw, 66px) auto 0; color: var(--ink-soft); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.5; }
/* stagger d'ingresso voci (sopra al fade del blocco .reveal) */
.agency .ag-split .ag-list li { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.agency .ag-split.in .ag-list li { opacity: 1; transform: none; }
.agency .ag-col--you .ag-list li:nth-child(1) { transition-delay: 80ms; } .agency .ag-col--you .ag-list li:nth-child(2) { transition-delay: 150ms; } .agency .ag-col--you .ag-list li:nth-child(3) { transition-delay: 220ms; } .agency .ag-col--you .ag-list li:nth-child(4) { transition-delay: 290ms; }
.agency .ag-col--us .ag-list li:nth-child(1) { transition-delay: 150ms; } .agency .ag-col--us .ag-list li:nth-child(2) { transition-delay: 220ms; } .agency .ag-col--us .ag-list li:nth-child(3) { transition-delay: 290ms; } .agency .ag-col--us .ag-list li:nth-child(4) { transition-delay: 360ms; } .agency .ag-col--us .ag-list li:nth-child(5) { transition-delay: 430ms; }
@media (max-width: 760px) {
  .agency .ag-split { grid-template-columns: 1fr; gap: clamp(30px, 8vw, 44px); max-width: 420px; }
  .agency .ag-split::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .agency .ag-split .ag-list li { opacity: 1; transform: none; transition: none; }
}

/* ============== FILTER BAR ============== */
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
@media (max-width: 900px) {
  .filterbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)) 40px; padding: 0 var(--gutter) 8px; }
  .filterbar::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; white-space: nowrap; }
}
.filter-btn {
  padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line);
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
  transition: color 240ms ease, border-color 240ms ease, background 240ms ease;
}
.filter-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.filter-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ============== FOOTER ============== */
.footer { background: var(--bg-lift); border-top: 1px solid var(--line); padding: clamp(56px, 8vw, 80px) var(--gutter) 28px; margin-top: 0; }
.footer .wrap { max-width: var(--max); margin: 0 auto; padding: 0; }
.footer-inner { display: grid; grid-template-columns: 1.6fr max-content max-content max-content; gap: clamp(32px, 4.5vw, 64px); }
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer-inner > div:first-child { grid-column: 1 / -1; }
}
.footer-brand { font-weight: 700; font-size: 22px; letter-spacing: -0.018em; }
.footer-brand .films { font-weight: 400; color: var(--ink-soft); }
.footer-brand .brand-logo { height: 19px; }
.footer-tag { color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin-top: 14px; max-width: 42ch; }
.footer h4 { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; font-weight: 600; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer ul a { color: var(--ink-soft); font-size: 14px; }
.footer ul a:hover { color: var(--accent); }
.footer-label { display: block; font-size: 9px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.footer-addr { display: block; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.footer-socials { display: flex; gap: 10px; margin-top: 22px; }
.footer-socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); transition: border-color 240ms ease, color 240ms ease, background 240ms ease; }
.footer-socials a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent); }
.footer-socials a img { width: 18px; height: 18px; filter: brightness(0) invert(1); opacity: 0.75; transition: filter 240ms ease, opacity 240ms ease; }
.footer-socials a:hover img { filter: none; opacity: 1; }
/* card merch: polaroid col nastro giallo, quarta colonna a destra (solo dove presente, via :has) */
.footer-inner:has(.footer-merch) { grid-template-columns: 1.6fr max-content max-content max-content auto; }
/* altezza della polaroid merch: stessa regola nel footer di DROP Lab, così i due footer coincidono */
@media (min-width: 901px) { .footer-inner { min-height: 276px; } }
.footer-merch { position: relative; display: flex; flex-direction: column; gap: 11px; width: 210px; padding: 10px 10px 16px; background: #1f1f1f; border: 1px solid var(--line-strong); border-radius: 6px; justify-self: end; transform: rotate(-2.2deg); transform-origin: 50% -4px; transition: transform 550ms var(--ease), border-color 280ms ease; }
/* hover: pendolo con perno sullo scotch, poi si assesta dritta */
.footer-merch:hover { animation: fmSwing 850ms var(--ease) forwards; border-color: var(--accent); }
@keyframes fmSwing { 0% { transform: rotate(-2.2deg); } 45% { transform: rotate(1.5deg); } 75% { transform: rotate(-0.5deg); } 100% { transform: rotate(0deg); } }
.footer-merch .fm-tape { position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(2.5deg); width: 66px; height: 19px; background: var(--accent); opacity: 0.92; border-radius: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
.footer-merch img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; display: block; }
.footer-merch .fm-t { font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: center; }
.footer-merch .fm-s { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); text-align: center; margin-top: 2px; transition: color 280ms ease; }
.footer-merch:hover .fm-s { color: var(--accent); }
@media (max-width: 900px) { .footer-inner:has(.footer-merch) { grid-template-columns: 1fr 1fr; } .footer-merch { justify-self: start; } }
@media (max-width: 480px) {
  .footer-inner, .footer-inner:has(.footer-merch) { grid-template-columns: 1fr; gap: 36px; }
  /* telefono: la polaroid sta a destra delle liste Pagine e Spin off, come l'ultima colonna del desktop */
  .footer-inner:has(.footer-merch) { grid-template-columns: 1fr auto; gap: 36px 18px; }
  .footer-inner:has(.footer-merch) > div:nth-child(-n+2) { grid-column: 1 / -1; }
  .footer-merch { grid-column: 2; grid-row: 3 / span 2; align-self: center; justify-self: end; width: min(158px, 42vw); margin-right: 4px; }
  .footer-merch .fm-t { text-wrap: balance; }
}
@media (prefers-reduced-motion: reduce) { .footer-merch, .footer-merch .fm-s { transition: none; } .footer-merch:hover { animation: none; } }
.footer-bottom { display: flex; flex-direction: column; gap: 14px; margin-top: clamp(48px, 6vw, 64px); padding-top: 22px; border-top: 1px solid var(--line); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #8a8a8a; }
.footer-bottom-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-copy { color: var(--ink-faint); }
.footer-copy .nt { text-transform: none; } /* il nome del brand resta "DROP Films" anche nella riga in maiuscolo */
.nt { text-transform: none; } /* ovunque: "DROP Films" / "DROP Lab" dentro eyebrow, client, label in maiuscolo */
.footer-copy a { color: var(--ink-faint); } .footer-copy a:hover { color: var(--accent); }
.footer-bottom-end { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; }
.footer-privacy { color: var(--ink-faint); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); transition: color 200ms ease, text-decoration-color 200ms ease; }
.footer-privacy:hover { color: var(--accent); text-decoration-color: var(--accent); }
@media (max-width: 900px) { .footer-privacy { display: inline-block; padding: 12px 0; margin: -12px 0; } }
.footer-lang-display .lang { color: var(--accent); }
.footer-legal, .footer-ai { color: #8a8a8a; letter-spacing: 0.1em; line-height: 1.5; }

/* ============== BIG CTA ============== */
.bigcta { text-align: center; padding: clamp(80px, 12vw, 180px) 0; }
.bigcta h2 { font-size: clamp(34px, 5vw, 72px); font-weight: 700; line-height: 1.0; letter-spacing: -0.04em; }
.bigcta p { color: var(--ink-soft); font-size: clamp(15px, 1.6vw, 19px); margin: 22px auto 38px; max-width: 48ch; }

/* ============== PAGE HEADER (inner pages) ============== */
.pagehead { padding: 168px var(--gutter) 0; }
.pagehead .wrap { padding: 0; }
.pagehead h1 { font-size: clamp(40px, 6vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; margin-top: 18px; }
.pagehead p { color: var(--ink-soft); font-size: clamp(16px, 1.7vw, 20px); margin-top: 22px; max-width: 56ch; }

/* ============== PROJECT PAGE ============== */
.proj-head { padding: 156px var(--gutter) 0; }
.proj-head .wrap { padding: 0; }
.proj-title { font-size: clamp(38px, 6vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.04em; margin-top: 16px; }
.proj-meta { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 30px; }
.proj-meta .item .l { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.proj-meta .item .v { font-size: 16px; font-weight: 500; margin-top: 6px; }
.proj-award { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 9px 16px; border: 1px solid var(--accent); border-radius: var(--radius-pill); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }

.proj-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); background: #000; margin-top: clamp(36px, 5vw, 56px); }
.proj-video img.poster { width: 100%; height: 100%; object-fit: cover; opacity: 0.78; transition: opacity 400ms ease, transform 600ms var(--ease); }
.proj-video .pscrim { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%); }
.proj-video iframe, .proj-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
/* video a tutto schermo su Mac: il mirino del sito non c'e', serve il puntatore di sistema */
body.cursor-on .proj-video video:fullscreen { cursor: auto; }
body.cursor-on .proj-video video:-webkit-full-screen { cursor: auto; }
.proj-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.proj-play .pbtn { width: 88px; height: 88px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; transition: transform 320ms var(--ease), filter 200ms ease; }
.proj-video:hover .pbtn { transform: scale(1.07); }
.proj-video:hover img.poster { transform: scale(1.03); }
.proj-play .tri { width: 0; height: 0; margin-left: 4px; border-left: 20px solid currentColor; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }

.proj-body { padding: clamp(56px, 8vw, 96px) 0; }
.proj-concept { font-size: clamp(20px, 2.3vw, 30px); font-weight: 500; line-height: 1.36; letter-spacing: -0.02em; max-width: 54ch; }

.credits-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
@media (max-width: 700px) { .credits-list { grid-template-columns: 1fr; } }
.credits-list .row { background: var(--bg); padding: 20px 24px; display: flex; justify-content: space-between; gap: 16px; }
.credits-list .row .role { color: var(--ink-faint); font-size: 13px; letter-spacing: 0.04em; }
.credits-list .row .name { font-weight: 500; font-size: 15px; text-align: right; }

.proj-next { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(32px, 5vw, 56px); border: 1px solid var(--line); border-radius: var(--radius-card); transition: border-color 320ms ease, background 320ms ease; }
.proj-next:hover { border-color: var(--accent); background: var(--accent-soft); }
.proj-next .l { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.proj-next .t { font-size: clamp(26px, 4vw, 44px); font-weight: 700; letter-spacing: -0.03em; margin-top: 10px; }
.proj-next .big-arrow { font-size: clamp(32px, 5vw, 56px); color: var(--accent); transition: transform 320ms var(--ease); }
.proj-next:hover .big-arrow { transform: translateX(8px); }

/* ============== ABOUT COLLAGE ============== */
.about-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.about-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.about-gallery img:nth-child(1) { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
@media (max-width: 760px) { .about-gallery { grid-template-columns: repeat(2, 1fr); } .about-gallery img:nth-child(1) { grid-column: span 2; aspect-ratio: 16 / 9; } }

/* ============== CLIENT LOGO WALL ============== */
.logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.logo-wall .cell { background: var(--bg); aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; padding: 22px; }
.logo-wall img { max-width: 82%; max-height: 40px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.5; transition: opacity 260ms ease; }
.logo-wall .cell:hover img { opacity: 1; }
@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } }

/* ============== MERCH HOVER + PRODUCT DETAIL ============== */
.prod-card .hover-img { opacity: 0; }
.prod-card:hover .hover-img { opacity: 1; }
/* pagina prodotto merch: layout lookbook, stili .pd2- in product.html */

/* ============== HOME · BANDS ============== */
.band { background: var(--bg-lift); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ============== HOME · HERO REEL ============== */
.hero-reel-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 38px; }
.reel-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); color: var(--ink); font-weight: 500; font-size: 15px; background: rgba(0,0,0,0.25); backdrop-filter: blur(6px); transition: border-color 280ms ease, background 280ms ease; }
.reel-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.reel-btn .play { width: 0; height: 0; border-left: 9px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* ============== CINEMA TAKEOVER ============== */
.cinema { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.96); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 5vw; opacity: 0; transition: opacity 320ms ease; }
.cinema.open { display: flex; opacity: 1; }
.cinema .frame { position: relative; width: min(94vw, calc(84vh * 16 / 9)); aspect-ratio: 16 / 9; }
.cinema iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.cinema .close { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); font-size: 22px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); }
.cinema .close:hover { border-color: var(--accent); color: var(--accent); }

/* ============== PROCESS SCRUB ============== */
.scrub { position: relative; height: 520vh; }
.scrub-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gutter); }
.scrub-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%); font-weight: 800; font-size: clamp(220px, 44vw, 620px); line-height: 1; letter-spacing: -0.06em; color: rgba(249,204,21,0.05); pointer-events: none; user-select: none; }
.scrub-eyebrow { position: absolute; top: clamp(96px, 14vh, 140px); left: 50%; transform: translateX(-50%); }
.scrub-phases { position: relative; display: grid; z-index: 2; min-height: 360px; align-content: center; }
.scrub-phase { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transform: translateY(26px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); pointer-events: none; }
.scrub-phase.is-on { opacity: 1; transform: none; }
.scrub-phase .pk { font-style: italic; font-weight: 600; color: var(--accent); font-size: 15px; padding-right: 4px; margin-bottom: 14px; letter-spacing: 0.02em; }
.scrub-phase .pt { font-size: clamp(40px, 7vw, 92px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.scrub-phase .pd { color: var(--ink-soft); font-size: clamp(16px, 1.8vw, 22px); margin-top: 20px; max-width: 48ch; line-height: 1.5; }
.scrub-rail { position: absolute; bottom: clamp(64px, 10vh, 110px); left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 2; }
.scrub-tick { width: clamp(36px, 5vw, 56px); height: 3px; border-radius: 2px; background: var(--line-strong); position: relative; overflow: hidden; }
.scrub-tick i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 300ms linear; }
.scrub-tick.done i { transform: scaleX(1); }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .scrub { height: auto; }
  .scrub-pin { position: static; height: auto; display: block; padding: clamp(64px,10vw,96px) 0; }
  .scrub-num { display: none; }
  .scrub-eyebrow { position: static; transform: none; display: inline-flex; margin-bottom: 28px; }
  .scrub-phases { display: block; min-height: 0; }
  .scrub-phase { grid-area: auto; display: block; opacity: 1; transform: none; text-align: left; padding: 26px 0; border-top: 1px solid var(--line); }
  .scrub-phase .pt { font-size: clamp(28px, 8vw, 40px); }
  .scrub-phase .pd { margin-left: 0; }
  .scrub-rail { display: none; }
}

/* ============== WORK DRAG-STRIP ============== */
.work-strip-wrap { position: relative; }
.work-strip { display: flex; gap: 18px; overflow-x: auto; padding: 4px var(--content-edge) 8px; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.work-strip::-webkit-scrollbar { display: none; }
.work-strip.dragging { cursor: grabbing; scroll-snap-type: none; }
.work-strip.dragging a { pointer-events: none; }
.work-strip .work-card { flex: 0 0 clamp(290px, 33vw, 460px); aspect-ratio: 4 / 3; scroll-snap-align: center; }
.strip-hint { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: 12px; letter-spacing: 0.04em; }
.strip-hint .arrow { color: var(--accent); }

/* ============== FAQ ============== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 26px 0; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: clamp(18px, 2.2vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { flex: 0 0 auto; color: var(--accent); font-size: 26px; line-height: 1; transition: transform 300ms var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq .a { padding: 0 0 28px; color: var(--ink-soft); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; max-width: 72ch; }
@keyframes faqIn { from { opacity: 0; translate: 0 -6px; } }
.faq details[open] .a { animation: faqIn 460ms var(--ease); }

/* ============== CONTACT DOCK ============== */
.dock { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 160%); z-index: 90; opacity: 0; transition: transform 520ms var(--ease), opacity 360ms ease; }
.dock.show { transform: translateX(-50%); opacity: 1; }
.dock a { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 14px; padding: 13px 22px; border-radius: var(--radius-pill); box-shadow: 0 16px 44px -14px var(--accent-glow); }
.dock a .arrow { transition: transform 260ms ease; }
.dock a:hover .arrow { transform: translateX(3px); }

/* ============== CUSTOM CURSOR (home, fine pointer) ============== */
/* viewfinder cursor, like DROP Lab (yellow) */
.cursor-vf { position: fixed; top: 0; left: 0; width: 32px; height: 32px; margin: -16px 0 0 -16px; pointer-events: none; z-index: 10000; opacity: 0; transition: width 280ms var(--ease), height 280ms var(--ease), margin 280ms var(--ease), opacity 200ms ease; }
.cursor-vf svg { width: 100%; height: 100%; color: var(--accent); filter: drop-shadow(0 0 6px rgba(249,204,21,0.55)); transition: color 200ms ease, filter 200ms ease; }
.cursor-vf.visible { opacity: 1; }
.cursor-vf.hover { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
.cursor-vf.hover svg { color: #fff; filter: drop-shadow(0 0 10px var(--accent)); }
body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on summary, body.cursor-on .panel, body.cursor-on .work-card { cursor: none; }
@media (max-width: 1024px), (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-vf { display: none; } body.cursor-on, body.cursor-on * { cursor: auto; } }

/* ============== SELECTED WORKS · immersive pinned accordion ============== */
.sw-sec { position: relative; background: #000; }
.sw-track { position: relative; height: 200vh; }
.sw-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.sw-pin .accordion { height: 100vh; gap: 6px; }
.sw-pin .accordion .panel { border-radius: 0; }
.sw-pin::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40%; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0.74) 0%, transparent 100%); }
.accordion .panel { transition: flex 820ms var(--ease), opacity 600ms ease; }
.accordion .panel:not(.in) { flex: 0 0 0 !important; opacity: 0; pointer-events: none; }
.sw-head { position: absolute; top: clamp(92px, 13vh, 140px); left: 0; right: 0; z-index: 5; pointer-events: none; text-align: center; }
.sw-head .eyebrow { pointer-events: auto; }
.sw-head h2 { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 4.4vw, 60px); letter-spacing: -0.03em; line-height: 1.02; margin-top: 16px; color: #fff; max-width: 16ch; }
.sw-all { position: absolute; right: var(--content-edge); bottom: clamp(40px, 7vh, 84px); z-index: 5; }
@media (max-width: 900px) {
  .sw-track { height: auto; }
  .sw-pin { position: static; height: auto; overflow: visible; padding-top: clamp(72px, 11vw, 96px); }
  .sw-pin::before { display: none; }
  .sw-pin .accordion { height: auto; gap: 12px; }
  .sw-pin .accordion .panel { border-radius: 16px; }
  .accordion .panel:not(.in) { flex: 0 0 min(82vw, 460px) !important; opacity: 1; pointer-events: auto; }
  .sw-head { position: static; padding: 0 var(--gutter); margin-bottom: 26px; }
  .sw-head h2 { max-width: none; }
  .sw-all { position: static; display: inline-flex; margin: 28px var(--gutter) 0; }
}

/* mobile menu sheet */
.mobile-sheet { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.96); backdrop-filter: blur(8px); display: flex; flex-direction: column; padding: 88px var(--gutter) var(--gutter); opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease), visibility 0s linear 320ms; }
.mobile-sheet.open { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease), visibility 0s; }
.mobile-sheet > a { opacity: 0; translate: 0 10px; transition: opacity 360ms var(--ease), translate 460ms var(--ease), color 280ms ease; }
.mobile-sheet.open > a { opacity: 1; translate: none; }
.mobile-sheet.open > a:nth-of-type(2) { transition-delay: 40ms; }
.mobile-sheet.open > a:nth-of-type(3) { transition-delay: 80ms; }
.mobile-sheet.open > a:nth-of-type(4) { transition-delay: 120ms; }
.mobile-sheet.open > a:nth-of-type(5) { transition-delay: 160ms; }
.mobile-sheet.open > a:nth-of-type(n+6) { transition-delay: 200ms; }
.mobile-sheet a { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.mobile-sheet a:hover, .mobile-sheet a[aria-current="page"] { color: var(--accent); }
.mobile-sheet .close { position: absolute; top: 26px; right: var(--gutter); width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; font-size: 22px; color: var(--ink); }

/* ============================================================
   PREMIUM v2 — DROP Films luxury pass (home)
   Serif display, centrality, restraint. Loaded after base so it wins.
   ============================================================ */
:root { --display: 'Inter Tight', system-ui, sans-serif; }

/* premium display treatment: Inter Tight, lighter weight, tight tracking */
.sec-head h2, .bigcta h2, .pagehead h1, .proj-title,
.scrub-phase .pt, .mani, .accordion .panel .meta .t,
.process .p-text h3, .cta-photo h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.03em;
}

/* centrality helper for home sections */
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; max-width: 760px; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head.center p { margin-left: auto; margin-right: auto; }

/* ---- HERO premium: image first, almost no chrome ---- */
.hero { padding: 96px var(--gutter) 40px; }
.hero-photo > video, .hero-photo > img { opacity: 0.92; }
.hero-photo::before { background: radial-gradient(ellipse 110% 90% at 50% 50%, transparent 30%, rgba(0,0,0,0.45) 100%), linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 24%, transparent 62%, rgba(0,0,0,0.65) 100%); }
.hero-photo::after { opacity: 0.5; }
.hero-min { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 100vh; padding-bottom: 30px; text-align: center; }
.hero-min .scroll-cue { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255,255,255,0.65); display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-min .scroll-cue .line { width: 1px; height: 46px; background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent); animation: cueLine 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cueLine { 0%,100%{ transform: scaleY(0.4); opacity: 0.4; } 50%{ transform: scaleY(1); opacity: 1; } }

/* ============== INTRO · film leader -> messa a fuoco (WebGL) -> showreel ============== */
.intro { position: relative; height: 100vh; overflow: hidden; background: #000; }
.intro .hero-photo { z-index: 0; }
.intro .hero-video { opacity: 0; transition: opacity 700ms var(--ease); }
.intro.intro-done .hero-video { opacity: 0.92; }
.intro-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 450ms var(--ease); pointer-events: none; }

/* loader (film leader) */
.intro-loader { position: absolute; inset: 0; z-index: 10; }
.intro-cover { position: absolute; inset: 0; z-index: 3; background: #000; transition: opacity 850ms var(--ease); }
.intro-cover::after { content: ''; position: absolute; inset: 0; opacity: 0.05; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* barre letterbox: nascoste dal cover, si ritraggono nel finale */
.intro-bar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; z-index: 2; transition: transform 750ms var(--ease); }
.intro-bar-top { top: 0; }
.intro-bar-bot { bottom: 0; }
/* wordmark = logo vettoriale DROP Films, sale da una maschera */
/* --intro-dy: correzione per iPhone calcolata in home.js (0 altrove) */
.intro-wordmark { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; translate: 0 var(--intro-dy, 0px); }
.iw-mask { display: inline-block; overflow: hidden; line-height: 0; }
.iw-logo { display: block; width: clamp(225px, 29.5vw, 485px); height: auto; transform: translateY(112%); animation: iwRise 1100ms var(--ease) 250ms both; }
@keyframes iwRise { to { transform: translateY(0); } }
/* counter + barra di avanzamento */
.intro-tc { position: absolute; left: 50%; bottom: clamp(40px, 7vh, 88px); transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 13px; opacity: 0; animation: tcIn 600ms var(--ease) 650ms both; }
.intro-tc-num { font-size: 12px; letter-spacing: 0.34em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.intro-tc-bar { width: clamp(120px, 16vw, 220px); height: 1px; background: rgba(255,255,255,0.16); overflow: hidden; }
.intro-tc-fill { display: block; height: 100%; width: 0%; background: var(--accent); }
@keyframes tcIn { to { opacity: 1; } }

/* stato REVEAL: il cover sfuma sul canvas a fuoco, wordmark e counter escono */
.intro.intro-reveal .intro-cover { opacity: 0; }
.intro.intro-reveal .intro-gl { opacity: 1; }
.intro.intro-reveal .intro-wordmark { opacity: 0; transform: scale(1.06); transition: opacity 650ms var(--ease), transform 950ms var(--ease); }
.intro.intro-reveal .intro-tc { opacity: 0; transition: opacity 400ms ease; }
.intro.intro-reveal .intro-bar-top { transform: translateY(-100%); }
.intro.intro-reveal .intro-bar-bot { transform: translateY(100%); }

/* stato DONE: video nitido, canvas e loader via, chrome dentro */
.intro .hero-min { opacity: 0; transition: opacity 700ms var(--ease); }
.intro.intro-done .hero-min { opacity: 1; }
.intro.intro-done .intro-gl { opacity: 0; }
.intro.intro-done .intro-loader { display: none; }
/* scroll bloccato durante l'intro */
html.intro-busy, html.intro-busy body { overflow: hidden; height: 100%; }
.intro-loader { position: fixed; }

/* reduced-motion: niente sequenza, showreel diretto */
@media (prefers-reduced-motion: reduce) {
  .intro-loader, .intro-gl { display: none !important; }
  .intro .hero-video { opacity: 0.92; }
  .intro .hero-min { opacity: 1; }
}

/* ============== MANIFESTO · scroll color reveal ============== */
.manifesto { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(72px, 12vh, 160px) 0; }
.mani { font-size: clamp(24px, 3vw, 44px); line-height: 1.22; letter-spacing: -0.022em; max-width: 1080px; margin: 0 auto; }
.mani .w { color: #3a3a3a; transition: color 360ms var(--ease); display: inline-block; }
.mani .w.lit { color: var(--ink); }
.mani .mani-accent .w { color: #4a3f10; }
.mani .mani-accent .w.lit { color: var(--accent); }
.mani-accent { display: inline; }
@media (prefers-reduced-motion: reduce) { .mani .w { color: var(--ink); } .mani .mani-accent .w { color: var(--accent); } }

/* ============== CLIENTI · carousel loghi (ancorato sotto il manifesto, marquee continuo) ============== */
.logos { width: 100%; max-width: 1080px; margin: clamp(40px, 5vh, 72px) auto 0; overflow: hidden; }
.logos-cap { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 clamp(20px, 2.6vh, 30px); padding: 0 var(--gutter); }
.logos-viewport { -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; align-items: center; width: max-content; animation: marquee 72s linear infinite; }
.logos-track img { flex: none; height: clamp(54px, 7vw, 112px); width: auto; margin-right: clamp(26px, 2.6vw, 40px); object-fit: contain; filter: brightness(0) invert(1); opacity: 0.55; transition: opacity 300ms ease; }
.logos-track img:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .logos-viewport { -webkit-mask-image: none; mask-image: none; }
  .logos-track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; row-gap: 18px; }
  .logos-track img { margin: 0 clamp(28px, 4vw, 48px); }
  .logos-track img[aria-hidden] { display: none; }
}

/* ============== PORTFOLIO · accordion (fisarmonica) ============== */
.accordion { display: flex; gap: 10px; height: min(90vh, 1080px); }
.accordion .panel { position: relative; flex: 1; min-width: 0; border-radius: 16px; overflow: hidden; cursor: pointer; transition: flex 720ms var(--ease); background: var(--bg-card); }
.accordion .panel.is-open { flex: 3.4; }
.accordion:hover .panel:not(:hover) { flex: 1; }
.accordion .panel:hover { flex: 3.8; }
.accordion .panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.15) brightness(0.74); transition: transform 1.2s var(--ease), filter 600ms ease; }
.accordion .panel:hover img, .accordion .panel.is-open img { filter: none; transform: scale(1.04); }
/* lower-third caption: info bottom-left, shown only when the panel is expanded */
.accordion .panel .scrim { position: absolute; inset: 0; opacity: 0; transition: opacity 500ms ease; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 20%, transparent 48%); }
.accordion .panel.is-open .scrim, .accordion .panel:hover .scrim { opacity: 1; }
.accordion:hover .panel.is-open:not(:hover) .scrim { opacity: 0; }
.accordion .panel .meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(28px, 3vw, 52px); text-align: left; opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms var(--ease); }
.accordion .panel:hover .meta, .accordion .panel.is-open .meta { opacity: 1; transform: none; }
.accordion:hover .panel.is-open:not(:hover) .meta { opacity: 0; transform: translateY(14px); }
.accordion .panel .meta .t { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.6vw, 40px); letter-spacing: -0.025em; line-height: 1.05; color: #fff; }
.accordion .panel .meta .cat { font-size: clamp(11px, 1vw, 13px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.accordion .panel .meta .info { font-size: clamp(12px, 1.1vw, 15px); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.74); }
.accordion .panel .meta .info .sep { color: var(--accent); margin: 0 9px; }
@media (max-width: 900px) {
  /* carousel orizzontale: una card a fuoco, la prossima fa capolino */
  .accordion { height: auto; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--gutter); }
  .accordion::-webkit-scrollbar { display: none; }
  .accordion .panel, .accordion .panel.is-open, .accordion .panel:hover, .accordion:hover .panel:not(:hover) { flex: 0 0 min(82vw, 460px); height: auto; aspect-ratio: 2 / 3; min-height: 0; scroll-snap-align: center; }
  .accordion .panel .vtitle { display: none; }
  .accordion .panel .scrim, .accordion:hover .panel.is-open:not(:hover) .scrim { opacity: 1; }
  .accordion .panel .meta, .accordion:hover .panel.is-open:not(:hover) .meta { opacity: 1; transform: none; }
  .accordion .panel img { filter: none; }
}

/* ============== PROCESS · still + text horizontal ============== */
.process { overflow: hidden; }
.process-track { display: flex; gap: 28px; padding: 8px var(--content-edge) 12px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.process-track::-webkit-scrollbar { display: none; }
.process-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.process-track.dragging a { pointer-events: none; }
.p-text { flex: 0 0 min(64vw, 520px); display: flex; flex-direction: column; justify-content: center; scroll-snap-align: center; }
.p-text .pk { font-style: italic; font-weight: 600; color: var(--accent); font-size: 14px; padding-right: 4px; }
.p-text h3 { font-size: clamp(24px, 2.6vw, 38px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.06; margin: 12px 0 14px; }
.p-text p { color: var(--ink-soft); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; max-width: 42ch; }
.p-shot { flex: 0 0 min(42vw, 380px); display: flex; align-items: center; scroll-snap-align: center; }
.p-shot .frame { width: 100%; border: 1px solid var(--line-strong); border-radius: 6px; padding: 12px; background: var(--bg-card); }
.p-shot .frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; display: block; }
.p-shot .cap { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.p-shot .cap .rec { color: var(--accent); display: inline-flex; align-items: center; gap: 6px; }
.p-shot .cap .rec::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 900px) {
  .process-track { flex-direction: column; overflow: visible; padding: 0 var(--gutter); cursor: auto; mask-image: none; -webkit-mask-image: none; }
  .p-text, .p-shot { flex: auto; }
}

/* ============== DROP LAB · overlapping tab (Lab colors) ============== */
.lab-tab-wrap { padding: clamp(60px, 9vw, 120px) var(--gutter) clamp(40px, 6vw, 72px); overflow: hidden; }
.lab-tab { position: relative; max-width: calc(var(--max) - 4vw); margin: 0 auto; }
.lab-tab .panel { position: relative; background: linear-gradient(135deg, #FE9B08 0%, #FF0C0C 100%); color: #fff; border-radius: 26px; padding: clamp(40px, 6vw, 80px); transform: rotate(-1.3deg); box-shadow: 0 50px 120px -40px rgba(255,70,0,0.55); overflow: hidden; text-align: center; }
.lab-tab .panel::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 3px); pointer-events: none; }
.lab-tab .lip { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 64px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.5); }
.lab-tab .eyebrow2 { font-family: 'Inter Tight', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.92); }
.lab-tab h2 { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: clamp(28px, 4.4vw, 56px); letter-spacing: -0.03em; line-height: 1.02; margin: 16px auto 14px; max-width: 18ch; }
.lab-tab p { color: rgba(255,255,255,0.92); max-width: 46ch; margin: 0 auto 30px; font-size: clamp(15px, 1.5vw, 18px); }
.lab-tab .btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #1a1a1a; font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: var(--radius-pill); transition: transform 280ms var(--ease); }
.lab-tab .btn:hover { transform: translateY(-2px); }
.lab-tab .btn .arrow { transition: transform 280ms ease; }
.lab-tab .btn:hover .arrow { transform: translateX(3px); }
@media (max-width: 700px) { .lab-tab .panel { transform: none; border-radius: 20px; } }

/* ============== CONTACT DOCK · wide bar (like DROP Lab) ============== */
.dock { padding: 0; width: min(660px, calc(100% - 32px)); }
.dock .card { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(12,12,12,0.72); backdrop-filter: blur(16px); border: 1px solid var(--line-strong); border-radius: var(--radius-pill); padding: 11px 11px 11px 22px; box-shadow: 0 18px 50px rgba(0,0,0,0.5); }
.dock .txt .t { font-weight: 600; font-size: 14px; letter-spacing: -0.01em; line-height: 1.2; }
.dock .txt .s { color: var(--ink-soft); font-size: 12px; margin-top: 2px; line-height: 1.2; }
.dock .card .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--bg); font-weight: 500; font-size: 13px; padding: 10px 18px; border-radius: var(--radius-pill); white-space: nowrap; transition: background 240ms ease, color 240ms ease; }
.dock .card .btn:hover { background: var(--accent); color: var(--accent-ink); }
.dock .card .btn .arrow { transition: transform 260ms ease; }
.dock .card:hover .btn .arrow { transform: translateX(3px); }
@media (max-width: 560px) { .dock { left: 14px; right: 14px; width: auto; transform: translateY(180%); } .dock.show { transform: none; } .dock .card { padding: 13px 13px 13px 22px; } .dock .txt .s { display: none; } .dock .card .btn { padding: 12px 18px; } }

/* ============== SPLIT · sticky title left + content right (DROP Lab style) ============== */
.split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.split-head { position: sticky; top: 120px; align-self: start; }
.split-head .eyebrow { margin-bottom: 0; }
.split-title { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4.6vw, 60px); letter-spacing: -0.04em; line-height: 1.0; margin-top: 16px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } .split-head { position: static; } }

/* ============== FAQ · refined (smaller) ============== */
.faq summary { font-size: clamp(16px, 1.6vw, 19px); font-weight: 500; padding: 22px 0; }
.faq summary .ic { font-size: 20px; }
.faq .a { font-size: 15px; padding-bottom: 24px; }

/* ============== CTA with photo ============== */
.cta-photo { position: relative; overflow: hidden; text-align: center; }
.cta-photo .bg { position: absolute; inset: 0; z-index: 0; }
.cta-photo .bg img, .cta-photo .bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.cta-photo .bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 0%, rgba(0,0,0,0.55) 100%); }
.cta-photo .wrap { position: relative; z-index: 2; padding: clamp(120px, 18vw, 220px) var(--gutter); }
.cta-photo h2 { font-size: clamp(40px, 6.2vw, 88px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.cta-photo .sub { color: var(--ink-soft); font-size: clamp(14px, 1.4vw, 17px); letter-spacing: 0.02em; margin-top: 22px; }
.cta-photo .actions { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 900px) {
  /* full screen: il neon riempie lo schermo, testo e bottone centrati */
  .cta-photo { display: flex; align-items: center; justify-content: center; min-height: 100svh; }
  .cta-photo .wrap { padding: 72px var(--gutter); }
  /* due frasi, due blocchi: la seconda (gialla) va a capo dopo il punto; corpo piu' piccolo e righe bilanciate */
  .cta-photo h2 { font-size: clamp(28px, 8vw, 52px); font-size: min(clamp(28px, 8vw, 52px), max(40px, 6.2vw)); text-wrap: balance; }
  .cta-photo h2 .hl { display: block; margin-top: 0.12em; }
}

/* ============== COME LAVORIAMO · filiera centrata (header al centro, card una alla volta) ============== */
.fp-sec { position: relative; background: #000; }
.fp-track { position: relative; height: 420vh; }
.fp-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fp-inner { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 1360px; padding: 0 clamp(16px, 2.4vw, 30px); }
.fp-inner .eyebrow { margin-bottom: 0; }
.fp-title { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 5.2vw, 80px); letter-spacing: -0.04em; line-height: 1; margin: 18px 0 0; }
.fp-sub { color: var(--ink-soft); font-size: clamp(15px, 1.7vw, 18px); margin-top: 16px; }
/* il blocco card si apre sotto l'header e lo spinge su: il flex column centrato ricentra tutto */
.fp-roww { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 900ms var(--ease), opacity 700ms ease, margin-top 900ms var(--ease); width: 100%; }
.fp-roww.open { max-height: 640px; opacity: 1; margin-top: clamp(34px, 4.5vw, 58px); }
.fp-row { display: flex; justify-content: center; align-items: stretch; }
/* ogni card entra animando la larghezza: le altre scivolano e il blocco resta centrato */
.fp-row .phw { width: 0; overflow: hidden; transition: width 750ms var(--ease); flex: none; }
.fp-row .phw.shown { width: 248px; }
.fp-row .phc { width: 248px; padding: 0 8px; }
.fp-row .seg { position: relative; height: 20px; margin-bottom: 14px; }
.fp-row .seg::before { content: ''; position: absolute; left: -8px; right: -8px; top: 9px; height: 2px; background: var(--line); }
.fp-row .seg .fill { position: absolute; left: -8px; right: -8px; top: 9px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 750ms var(--ease) 120ms; }
.fp-row .phw.shown .seg .fill { transform: scaleX(1); }
.fp-row .seg .node { position: absolute; left: 50%; top: 2px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); transition: background 350ms ease 400ms, border-color 350ms ease 400ms; z-index: 2; }
/* la linea parte dal primo nodo e finisce sull'ultimo */
.fp-row .phw:first-child .seg::before, .fp-row .phw:first-child .seg .fill { left: 50%; }
.fp-row .phw:last-child .seg::before, .fp-row .phw:last-child .seg .fill { right: 50%; }
.fp-row .phw.shown .seg .node { background: var(--accent); border-color: var(--accent); }
.fp-row .fcard { margin: 0; background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-align: left; height: 100%; opacity: 0; transform: translateY(26px); transition: opacity 550ms ease 250ms, transform 650ms var(--ease) 250ms, border-color 300ms ease; }
.fp-row .phw.shown .fcard { opacity: 1; transform: none; }
.fp-row .fcard:hover { border-color: var(--line-strong); }
.fp-row .fcard img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.fp-row .fcard figcaption { padding: 15px 15px 20px; }
.fp-row .fcard .n { font-style: italic; font-weight: 600; color: var(--accent); font-size: 14px; padding-right: 4px; }
.fp-row .fcard h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; margin-top: 5px; }
.fp-row .fcard p { color: var(--ink-soft); font-size: 12.5px; line-height: 1.6; margin-top: 8px; }
.fp-hint { position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%); color: var(--ink-faint); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; transition: opacity 400ms ease; }
.fp-hint.off { opacity: 0; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .fp-track { height: auto; }
  .fp-pin { position: static; height: auto; padding: clamp(70px, 12vw, 110px) 0; overflow: visible; }
  .fp-roww, .fp-roww.open { max-height: none; opacity: 1; margin-top: 40px; overflow: visible; }
  .fp-row { flex-direction: column; align-items: center; gap: 18px; }
  .fp-row .phw, .fp-row .phw.shown { width: min(420px, 92vw); overflow: visible; }
  .fp-row .phc { width: 100%; padding: 0; }
  .fp-row .seg { display: none; }
  .fp-row .fcard { opacity: 1; transform: none; }
  .fp-hint { display: none; }
}
/* mobile: carousel orizzontale, la linea si riempie card dopo card */
@media (max-width: 900px) {
  .fp-pin { padding: clamp(56px, 9vw, 84px) 0; }
  .fp-roww, .fp-roww.open { margin-top: 26px; }
  .fp-row { flex-direction: row; align-items: stretch; justify-content: flex-start; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 calc(0px - clamp(16px, 2.4vw, 30px)); padding: 0 clamp(16px, 2.4vw, 30px); }
  .fp-row::-webkit-scrollbar { display: none; }
  .fp-row .phw, .fp-row .phw.shown { width: min(80vw, 336px); flex: none; scroll-snap-align: center; }
  .fp-row .phc { width: 100%; padding: 0 8px; }
  .fp-row .seg { display: block; }
  .fp-row .fcard img { aspect-ratio: 16 / 10; object-position: 50% 30%; }
  .fp-row .phw:last-child .fcard img { object-position: 50% 50%; }
  .fp-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}


/* ============== DROP LAB · prompt → generate (pinned AI experience) ============== */
.lab2-sec { position: relative; background: #000; }
.lab2-track { height: 220vh; }
.lab2 { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; background: #000; }
.lab2-scene { grid-area: 1 / 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gutter); position: relative; z-index: 2; }

/* prompt scene */
.lab2-plabel { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 20px; }
.lab2-bar { display: flex; align-items: center; justify-content: flex-start; width: min(620px, 90vw); padding: 20px 26px; border: 1px solid rgba(255,255,255,0.24); border-radius: 16px; background: rgba(255,255,255,0.06); backdrop-filter: blur(8px); text-align: left; overflow: hidden; box-shadow: 0 0 60px -26px rgba(254,155,8,0.25); transition: border-color 400ms ease, box-shadow 400ms ease; }
.lab2.generating .lab2-bar { border-color: rgba(254,155,8,0.5); box-shadow: 0 0 70px -12px rgba(255,80,0,0.4); }
.lab2-caret { color: #fe9b08; font-weight: 600; font-size: clamp(18px, 2vw, 24px); margin-right: 12px; flex: 0 0 auto; }
.lab2-typed { font-size: clamp(17px, 2.1vw, 26px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink); white-space: pre; min-height: 1.2em; }
.lab2-cursor { display: inline-block; width: 2px; height: 1.1em; background: #fe9b08; margin-left: 3px; flex: 0 0 auto; animation: labblink 1.05s steps(1) infinite; }
@keyframes labblink { 50% { opacity: 0; } }
.lab2-gen { height: 2px; width: 0; margin: 26px auto 0; border-radius: 2px; background: linear-gradient(90deg, #fe9b08, #ff0c0c); opacity: 0; transition: width 760ms var(--ease), opacity 300ms ease; }
.lab2.generating .lab2-gen { opacity: 1; width: min(420px, 70%); }

/* background video + scrim (revealed only with the DROP Lab logo, no spoiler) */
.lab2-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity 1100ms ease; }
.lab2.show-output .lab2-video { opacity: 0.55; }
.lab2-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.82) 68%, #000 100%); }

/* output scene */
.lab2-output-scene .eyebrow { margin-bottom: 26px; }
.lab2-logo svg { width: clamp(170px, 33vw, 380px); height: auto; display: block; margin: 0 auto; }
.lab2-sub { color: var(--ink-soft); max-width: 52ch; margin: 30px auto 36px; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.55; }
.lab2-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #000; font-weight: 600; font-size: 15px; padding: 15px 28px; border-radius: var(--radius-pill); transition: background 350ms var(--ease), color 350ms var(--ease), transform 300ms var(--ease), box-shadow 300ms ease; }
.lab2-btn:hover { background: linear-gradient(135deg, #fe9b08, #ff0c0c); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 44px -12px rgba(255,70,0,0.5); }
.lab2-btn .arrow { transition: transform 260ms ease; }
.lab2-btn:hover .arrow { transform: translateX(3px); }

/* glow + noise */
.lab2-glow { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); width: 100vw; height: 90vh; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1100ms ease; background: radial-gradient(ellipse at center, rgba(255,90,0,0.22) 0%, rgba(255,12,12,0.10) 36%, transparent 66%); }
.lab2.show-output .lab2-glow { opacity: 1; }
.lab2-noise { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen; background-size: 220px 220px; transition: opacity 300ms ease; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lab2.generating .lab2-noise { opacity: 0.1; }

/* scene swap (driven by .show-output) */
.lab2.js .lab2-prompt-scene { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.lab2.js .lab2-output-scene { opacity: 0; pointer-events: none; transition: opacity 250ms ease; }
.lab2.js .lab2-output-scene > * { opacity: 0; transform: translateY(26px); transition: opacity 720ms var(--ease), transform 720ms var(--ease); }
.lab2.show-output .lab2-prompt-scene { opacity: 0; transform: translateY(-46px) scale(0.96); pointer-events: none; }
.lab2.show-output .lab2-output-scene { opacity: 1; pointer-events: auto; }
.lab2.show-output .lab2-output-scene > * { opacity: 1; transform: none; }
.lab2.show-output .lab2-output-scene > *:nth-child(1) { transition-delay: 80ms; }
.lab2.show-output .lab2-output-scene > *:nth-child(2) { transition-delay: 250ms; }
.lab2.show-output .lab2-output-scene > *:nth-child(3) { transition-delay: 420ms; }
.lab2.show-output .lab2-output-scene > *:nth-child(4) { transition-delay: 590ms; }
.lab2.no-anim .lab2-prompt-scene, .lab2.no-anim .lab2-output-scene, .lab2.no-anim .lab2-output-scene > * { transition: none !important; }
/* etichetta trasparenza AI sul video di sottofondo: angolo basso a sinistra, visibile solo col video */

@media (prefers-reduced-motion: reduce) {
  .lab2-cursor { animation: none; }
  .lab2.js .lab2-output-scene, .lab2.js .lab2-output-scene > * { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .lab2-track { height: auto; }
  .lab2 { position: static; height: auto; min-height: 100svh; padding: 90px 0; display: grid; place-items: center; }
  .lab2-scene { position: relative; }
}

/* ============== COERENZA DI PROFONDITA · grana neutra sulle sezioni nere ============== */
/* Replica la ricetta noise di .clients/.cl-pin (feTurbulence neutro), molto tenue,
   con mask verticale che sfuma ingresso/uscita. Solo atmosfera, nessun colore di brand.
   .cta-photo esclusa: ha gia foto + vignetta. */
.manifesto, .band.section, .faq-sec { position: relative; }
.manifesto::after, .band.section::after, .faq-sec::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='dn'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23dn)'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.manifesto::after { opacity: 0.05; }
.faq-sec::after { opacity: 0.05; }
.band.section::after { opacity: 0.04; }
.manifesto > .wrap, .manifesto > .logos, .band.section > .wrap, .faq-sec > .wrap { position: relative; z-index: 1; }

/* ============== HERO overlay entrance + nav/side-nav reveal on scroll (home) ============== */
@keyframes heroOverlayDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heroOverlayUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.hero-min .scroll-cue { animation: heroOverlayUp 680ms var(--ease) 1700ms both; }

/* Home: hero full-screen pulito; la nav appare dopo il primo scroll. Altre pagine: nav sempre visibile. */
body:has(.intro) .nav { transition: transform 520ms var(--ease), opacity 360ms ease; }
body:has(.intro) .nav.nav-hidden { transform: translateX(-50%) translateY(-170%); opacity: 0; pointer-events: none; }

/* Side-nav verticale (sezioni in-pagina), solo home, appare con la nav */
.side-nav { position: fixed; right: clamp(16px, 2vw, 30px); top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 15px; opacity: 0; pointer-events: none; transition: opacity 500ms var(--ease); }
.side-nav.show { opacity: 1; pointer-events: auto; }
.side-nav a { display: flex; align-items: center; justify-content: flex-end; gap: 11px; text-decoration: none; }
.side-nav .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.28); transition: background 300ms ease, transform 300ms ease; flex: none; }
.side-nav a:hover .dot, .side-nav a.active .dot { background: var(--accent); transform: scale(1.35); }
/* label solo per screen reader: il menu verticale e' di soli dot */
.side-nav .lbl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1100px) { .side-nav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-min .scroll-cue { animation: none !important; opacity: 1 !important; transform: none !important; }
  body:has(.intro) .nav, .side-nav { transition: none; }
}

/* ============================================================
   PROJECT PAGE v2 · template modulare (hero, narr sticky, rail,
   backstage+lightbox, film, numeri, next)
   ============================================================ */
:root { --rail-pad: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }

/* 1 · HERO full-bleed */
.proj-hero { position: relative; height: min(88vh, 880px); min-height: 520px; overflow: hidden; display: flex; }
.proj-hero .ph-bg { position: absolute; inset: 0; z-index: 0; }
.proj-hero .ph-bg img { width: 100%; height: 100%; object-fit: cover; }
.proj-hero .ph-grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 26%, transparent 45%, rgba(0,0,0,0.82) 100%); }
.proj-hero .ph-inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-top: 120px; padding-bottom: clamp(40px, 6vh, 72px); }
.ph-back { align-self: flex-start; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; transition: color 240ms ease; }
.ph-back:hover { color: var(--accent); }
.ph-foot { margin-top: auto; }
.ph-cat { display: inline-block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.ph-title { font-size: clamp(40px, 8vw, 116px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.ph-client { display: block; margin-top: 14px; font-size: clamp(15px, 1.6vw, 19px); color: var(--ink-soft); }
.ph-cue { position: absolute; bottom: clamp(40px, 6vh, 72px); left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); }

/* 2 · OVERVIEW + meta */
.proj-lead { padding: clamp(64px, 9vw, 130px) 0 clamp(40px, 5vw, 64px); }
.pl-tag { font-size: clamp(24px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.16; max-width: 24ch; }
.pl-meta { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 60px); margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.pl-meta .item { display: flex; flex-direction: column; gap: 7px; }
.pl-meta .item .l { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.pl-meta .item .v { font-size: 15px; color: var(--ink); }
.pl-meta .item-award .v { max-width: 30ch; color: var(--accent); }

/* 3 · NARRATIVE sticky (media fisso + testo che scorre) */
.proj-narr { padding: clamp(64px, 9vw, 132px) 0; }
.proj-narr .pn-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.proj-narr.media-right .pn-grid { grid-template-columns: 1fr 1.05fr; }
.pn-media { border-radius: var(--radius-card); overflow: hidden; position: sticky; top: 110px; aspect-ratio: 4 / 3; background: var(--bg-card); }
.pn-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.pn-text { padding-top: 6px; }
.pn-text .eyebrow { margin-bottom: 22px; }
.pn-text p { font-size: clamp(18px, 1.7vw, 23px); line-height: 1.6; color: var(--ink-soft); }
.pn-text > p + p { margin-top: 1em; }
.pn-text strong, .pws-text strong { color: var(--ink); font-weight: 600; }
/* movimento del testo: kicker, headline e paragrafi salgono in stagger quando il blocco entra */
.pn-text > * { opacity: 0; transform: translateY(16px); transition: opacity 640ms var(--ease), transform 640ms var(--ease); }
.pn-text.in > * { opacity: 1; transform: none; }
.pn-text.in > :nth-child(2) { transition-delay: 80ms; }
.pn-text.in > :nth-child(3) { transition-delay: 160ms; }
.pn-text.in > :nth-child(4) { transition-delay: 240ms; }
.pn-text.in > :nth-child(5) { transition-delay: 320ms; }
.proj-narr.solo .pn-text { max-width: 760px; margin: 0 auto; text-align: center; }

/* 4 · COSA ABBIAMO FATTO */
.proj-work { padding: clamp(40px, 6vw, 90px) 0; }
.pw-list { margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--line); }
.pw-row { display: grid; grid-template-columns: 64px 1fr; gap: clamp(16px, 3vw, 40px); padding: clamp(24px, 3vw, 38px) 0; border-bottom: 1px solid var(--line); }
.pw-n { font-style: italic; font-weight: 600; color: var(--accent); font-size: 15px; padding-right: 4px; }
.pw-c h3 { font-size: clamp(20px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.02em; }
.pw-c p { margin-top: 10px; color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.5; max-width: 60ch; }

/* RAIL (storyboard + verticali) scroll-snap */
.proj-rail-sec { padding: clamp(40px, 6vw, 80px) 0; }
.proj-rail-sec .sec-head { margin-bottom: clamp(24px, 3vw, 36px); }
.proj-rail { display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--rail-pad) 22px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.sb-frame { flex: 0 0 clamp(340px, 54vw, 700px); scroll-snap-align: start; }
.sb-img { border-radius: 12px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--line); }
.sb-img img { width: 100%; height: auto; display: block; }
.sb-frame figcaption { margin-top: 14px; font-size: 13px; color: var(--ink-soft); display: flex; align-items: baseline; gap: 8px; }
.sb-n { font-style: italic; font-weight: 600; color: var(--accent); padding-right: 2px; }
.vert-rail .proj-vert { flex: 0 0 clamp(220px, 24vw, 300px); scroll-snap-align: start; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; }

/* BACKSTAGE masonry + lightbox */
.proj-bts-sec { padding: clamp(40px, 6vw, 90px) 0; }
.proj-bts { columns: 3 260px; column-gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(24px, 3vw, 40px); }
.bts-item { display: block; width: 100%; break-inside: avoid; margin: 0 0 clamp(12px, 1.4vw, 18px); padding: 0; border: 0; background: none; cursor: pointer; position: relative; border-radius: 10px; overflow: hidden; }
.bts-item img { width: 100%; display: block; filter: grayscale(0.25) brightness(0.92); transition: filter 360ms var(--ease), transform 500ms var(--ease); }
.bts-item:hover img { filter: none; transform: scale(1.03); }
.bts-cap { position: absolute; left: 12px; bottom: 10px; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity 300ms ease; text-shadow: 0 1px 6px rgba(0,0,0,0.7); }
.bts-item:hover .bts-cap { opacity: 1; }

/* lightbox */
.proj-lb { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); backdrop-filter: blur(6px); }
.proj-lb.open { display: flex; }
.proj-lb .lb-fig { margin: 0; max-width: 88vw; max-height: 86vh; text-align: center; }
.proj-lb .lb-fig img { max-width: 88vw; max-height: 78vh; object-fit: contain; border-radius: 6px; }
.proj-lb figcaption { margin-top: 14px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.proj-lb .lb-close { position: absolute; top: 22px; right: 26px; background: none; border: 0; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; opacity: 0.7; }
.proj-lb .lb-close:hover { opacity: 1; }
.proj-lb .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 44px; line-height: 1; cursor: pointer; opacity: 0.55; padding: 20px; }
.proj-lb .lb-nav:hover { opacity: 1; }
.proj-lb .lb-prev { left: 8px; } .proj-lb .lb-next { right: 8px; }

/* FINAL VIDEO full-bleed */
.proj-film-sec { padding: clamp(40px, 6vw, 80px) 0; }
.proj-film-sec .sec-head { margin-bottom: clamp(24px, 3vw, 36px); }
.proj-film { width: 100%; aspect-ratio: 16/9; border-radius: 0; }

/* NUMERI / AWARD */
.proj-metrics { padding: clamp(56px, 8vw, 110px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pm-grid { display: flex; flex-wrap: wrap; gap: clamp(36px, 7vw, 100px); justify-content: center; }
.pm-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pm-v { font-size: clamp(44px, 7vw, 92px); font-weight: 700; letter-spacing: -0.04em; color: var(--accent); line-height: 1; }
.pm-l { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.pm-award { text-align: center; margin-top: clamp(28px, 3vw, 44px); color: var(--ink-soft); font-size: 15px; letter-spacing: 0.04em; }

/* CREDITS */
.proj-credits-sec { padding: clamp(48px, 7vw, 100px) 0; }

/* NEXT full-bleed card */
.proj-next2 { position: relative; display: block; height: clamp(280px, 42vw, 460px); overflow: hidden; text-decoration: none; }
.pnx-bg { position: absolute; inset: 0; z-index: 0; }
.pnx-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: brightness(0.5); transition: filter 500ms ease; }
.proj-next2:hover .pnx-bg img { filter: brightness(0.66); }
.pnx-grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5)); }
.pnx-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.pnx-inner .l { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }
.pnx-inner .t { font-size: clamp(32px, 5.5vw, 76px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; margin-top: 12px; }
.pnx-inner .big-arrow { font-size: clamp(28px, 4vw, 48px); margin-top: 20px; transition: transform 360ms var(--ease); }
.proj-next2:hover .big-arrow { transform: translateX(14px); }

/* mobile */
@media (max-width: 900px) {
  .proj-narr .pn-grid, .proj-narr.media-right .pn-grid { grid-template-columns: 1fr; gap: 26px; }
  .pn-media { position: static; }
  .proj-narr.media-right .pn-media { order: -1; }
  .proj-bts { columns: 2 160px; }
  .pw-row { grid-template-columns: 44px 1fr; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bts-item img, .pnx-bg img, .proj-next2:hover .big-arrow { transition: none; }
}

/* ============================================================
   PROJECT PAGE v2.1 · label discrete, fasce/bande, step-con-foto,
   coverflow output social, credits raggruppati
   ============================================================ */
/* label discrete (niente pill nella pagina progetto) */
#proj .eyebrow { border: 0; background: none; backdrop-filter: none; padding: 0; font-size: 11px; letter-spacing: 0.22em; color: var(--ink-faint); }
#proj .eyebrow .num { margin-right: 7px; }

/* fasce: sezioni a fondo alternato */
.band-lift { background: var(--bg-lift); position: relative; }
.band-lift::before, .band-lift::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.band-lift::before { top: 0; } .band-lift::after { bottom: 0; }

/* parallax: niente transition sull'immagine (la guida il JS) */
[data-parallax] { overflow: hidden; }
[data-parallax] img { transition: none !important; will-change: transform; }

/* banda full-bleed tra le sezioni */
.proj-band { height: clamp(300px, 52vh, 620px); overflow: hidden; background: var(--bg-card); }
.proj-band .pb-bg { width: 100%; height: 100%; }
.proj-band .pb-bg img { width: 100%; height: 100%; object-fit: cover; }

/* COSA ABBIAMO FATTO · step con foto (si scoprono allo scroll) */
.pw-steps { margin-top: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: clamp(48px, 8vw, 130px); }
.pw-step { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.pw-step .pws-media { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-card); }
.pw-step .pws-media.wide { aspect-ratio: 16 / 9; }
.pw-step .pws-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease); }
.pw-step:hover .pws-media img { transform: scale(1.04); }
/* nei carousel niente zoom-on-hover: lo scale composito col translate del track dava un parallasse strano */
.pw-step:hover .pws-carousel img { transform: none; }
.pws-track img { transition: none; }
.pw-step.alt .pws-media { order: 2; }
.pws-text .pws-n { font-style: italic; font-weight: 600; color: var(--accent); font-size: 17px; }
.pws-text h3 { font-size: clamp(24px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; margin: 12px 0 14px; }
.pws-text p { color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; max-width: 44ch; }
.pw-step.reveal { --reveal-y: 34px; --reveal-dur: 860ms; }
#proj:empty, #prod:empty { min-height: max(520px, min(88svh, 880px)); }

/* OUTPUT SOCIAL · coverflow 3D */
.proj-cover-sec { padding: clamp(48px, 7vw, 96px) 0; overflow: hidden; }
.proj-cover-sec .sec-head { margin-bottom: clamp(20px, 3vw, 34px); }
.proj-cover { perspective: 1500px; }
.pc-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 36px max(var(--gutter), calc(50% - 165px)); align-items: center; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pc-track::-webkit-scrollbar { display: none; }
.pc-item { flex: 0 0 clamp(240px, 30vw, 330px); aspect-ratio: 9/16; border-radius: 18px; overflow: hidden; scroll-snap-align: center; transform-origin: center; box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8); }
.pc-nav { display: flex; gap: 12px; justify-content: center; margin-top: clamp(24px, 3vw, 38px); }
.pc-btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(255,255,255,0.04); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; transition: background 260ms ease, border-color 260ms ease; }
.pc-btn:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* CREDITS raggruppati e discreti */
.proj-credits { margin-top: clamp(28px, 3vw, 44px); }
/* credits raggruppati: TANTE tappe (>=4 gruppi, es. PAH) -> griglia a 4 colonne (2 sotto 820px): le puntate stanno affiancate con i ruoli allineati */
.proj-credits.crx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 48px) clamp(24px, 3vw, 48px); }
.proj-credits.crx-grid .cr-group { margin-bottom: 0; }
/* gli ultimi 4 gruppi (le puntate) aprono una riga nuova: sopra restano i gruppi fissi */
.proj-credits.crx-grid .cr-group:nth-last-child(4) { grid-column-start: 1; }
.cr-group { break-inside: avoid; margin-bottom: clamp(20px, 2.4vw, 32px); }
.cr-group:last-child { margin-bottom: 0; }
.cr-gl { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 11px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
/* POCHI gruppi grandi (<=3, es. Cyberoo) -> gruppi impilati ma righe su piu' colonne */
.cr-rows { columns: 3 230px; column-gap: clamp(28px, 4vw, 64px); }
.cr-row { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; font-size: 13px; break-inside: avoid; }
.cr-role { color: var(--ink-faint); white-space: nowrap; }
.cr-name { color: var(--ink-soft); text-align: right; }
/* crx-rows (<=3 gruppi, es. Cyberoo/Argivit): righe a blocchi compatti che vanno a capo (come i credits flat) → impacchetta gruppi piccoli e grandi, gestisce i multi-nome */
.proj-credits.crx-rows .cr-rows { columns: unset; display: flex; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 22px) clamp(30px, 4vw, 62px); }
.proj-credits.crx-rows .cr-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 0; }
.proj-credits.crx-rows .cr-role { color: var(--ink-faint); white-space: normal; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.proj-credits.crx-rows .cr-name { text-align: left; font-size: clamp(14px, 1.3vw, 16px); color: var(--ink); }
/* pochi crediti (flat) → blocchi compatti impilati, in riga che va a capo: stessi corpi e spazi di Cyberoo (crx-rows) */
.proj-credits.compact .cr-rows { columns: unset; display: flex; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 22px) clamp(30px, 4vw, 62px); }
.proj-credits.compact .cr-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 0; }
.proj-credits.compact .cr-role { color: var(--ink-faint); white-space: normal; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.proj-credits.compact .cr-name { text-align: left; font-size: clamp(14px, 1.3vw, 16px); color: var(--ink); }
/* griglia (>=4 gruppi): righe impilate con gli stessi corpi di Cyberoo, un nome per riga (lo mette il JS) */
.proj-credits.crx-grid .cr-rows { columns: unset; display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 16px); }
.proj-credits.crx-grid .cr-row { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 0; }
.proj-credits.crx-grid .cr-role { color: var(--ink-faint); white-space: normal; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.proj-credits.crx-grid .cr-name { text-align: left; font-size: clamp(14px, 1.3vw, 16px); color: var(--ink); }

/* COSA FACCIAMO · step card con still (foto + ciak numerato) */
.wc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(28px, 4vw, 52px); }
.wc-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; transition: border-color 300ms var(--ease), transform 300ms var(--ease); }
.wc-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.wc-fig { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-card); }
.wc-fig img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease); }
.wc-card:hover .wc-fig img { transform: scale(1.04); }
.wc-slate { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: baseline; gap: 7px; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.16); padding: 5px 12px 6px; border-radius: 9px; }
.wc-slate b { font-style: italic; font-weight: 700; color: var(--accent); font-size: 19px; letter-spacing: -0.02em; line-height: 1; padding-right: 4px; }
.wc-slate span { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #e8e8e8; font-weight: 600; }
.wc-body { padding: clamp(18px, 1.8vw, 24px); }
.wc-body h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(19px, 1.9vw, 23px); margin: 0 0 9px; }
.wc-body p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0; }
.wc-body p + p { margin-top: 8px; }
.wc-foot { margin-top: clamp(24px, 3vw, 38px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px dashed var(--line); padding-top: 22px; }
.wc-foot > b { color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.wc-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.wc-tags span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.wc-tags span::after { content: '·'; margin-left: 8px; color: var(--ink-faint); }
.wc-tags span:last-child::after { content: ''; }
@media (max-width: 900px) { .wc-grid { grid-template-columns: 1fr; gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .wc-card, .wc-fig img { transition: none; } .wc-card:hover, .wc-card:hover .wc-fig img { transform: none; } }

@media (max-width: 820px) { .cr-rows { columns: 2 150px; } .proj-credits.crx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .pw-step, .pw-step.alt { grid-template-columns: 1fr; gap: 20px; }
  .pw-step.alt .pws-media { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-step.reveal { opacity: 1; transform: none; transition: none; }
  .pw-step .pws-media img { transition: none; }
  .pn-text > * { opacity: 1; transform: none; transition: none; }
  .proj-hero .ph-bg, .proj-hero .ph-cat, .proj-hero .ph-title, .proj-hero .ph-client,
  .proj-hero .ph-cue, .proj-hero .ph-back { animation: none !important; opacity: 1; transform: none; }
}

/* ============================================================
   PROJECT PAGE v2.2 · firma + chiusura
   (sec-head display, entrata hero orchestrata, grana/vignetta,
    poster film acceso, blocco CTA finale)
   ============================================================ */

/* livello display intermedio: headline di sezione tra kicker 11px e corpo 23px */
#proj .sec-head h2 { font-size: clamp(28px, 4vw, 46px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; margin-top: 0; }
#proj .sec-head .eyebrow { margin-bottom: 0; }
.pn-title { font-size: clamp(26px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.06; margin-bottom: clamp(20px, 2.4vw, 32px); }
#proj .pn-text .eyebrow { margin-bottom: 14px; }

/* hero · momento d'ingresso orchestrato (su load, non legato allo scroll) */
@keyframes phBgIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes phUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes phCueIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%); } }
.proj-hero .ph-bg { animation: phBgIn 1200ms var(--ease) both; }
.proj-hero .ph-back { animation: phUp 700ms var(--ease) 200ms both; }
.proj-hero .ph-cat { animation: phUp 760ms var(--ease) 360ms both; }
.proj-hero .ph-title { animation: phUp 820ms var(--ease) 460ms both; }
.proj-hero .ph-client { animation: phUp 820ms var(--ease) 600ms both; }
.proj-hero .ph-cue { animation: phCueIn 700ms var(--ease) 1000ms both; }
.ph-cue::after { content: ''; display: block; width: 1px; height: 22px; margin: 10px auto 0; background: linear-gradient(var(--ink-faint), transparent); }
@media (max-width: 900px) { .ph-cue { display: none; } }

/* grana neutra + profondità (riusa la ricetta feTurbulence di .clients/.cl-pin, solo nero/neutro) */
.proj-hero, .proj-band, .proj-cta { position: relative; }
.proj-hero::after, .proj-band::after, .proj-cta::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='dn'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23dn)'/%3E%3C/svg%3E");
  opacity: 0.06; mix-blend-mode: overlay;
}
.proj-hero::after, .proj-band::after { z-index: 1; }
.proj-cta::before { z-index: 0; opacity: 0.05; }
.proj-cta > .wrap { position: relative; z-index: 1; }
/* vignettatura neutra dentro il gradiente hero */
#proj .proj-hero .ph-grad {
  background:
    radial-gradient(ellipse 92% 78% at 50% 42%, transparent 52%, rgba(0,0,0,0.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 26%, transparent 45%, rgba(0,0,0,0.82) 100%);
}

/* il film è il climax: poster acceso, scrim ristretto solo dietro il play */
#proj .proj-film img.poster { opacity: 1; }
#proj .proj-film .pscrim { background: radial-gradient(ellipse 44% 44% at 50% 50%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.12) 46%, transparent 72%); }

/* CTA di chiusura · slim */
.proj-cta { padding: clamp(60px, 8vw, 108px) 0; border-top: 1px solid var(--line); text-align: center; }
.proj-cta .wrap { max-width: 760px; }
.pc-h { font-size: clamp(30px, 4.4vw, 54px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.pc-sub { color: var(--ink-soft); font-size: clamp(15px, 1.5vw, 18px); margin: clamp(14px, 1.6vw, 20px) auto 0; max-width: 46ch; }
.pc-cta-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(24px, 3vw, 36px); background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 15px; padding: 15px 28px; border-radius: var(--radius-pill); transition: transform 280ms var(--ease), filter 220ms ease; }
.pc-cta-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.pc-cta-btn .arrow { transition: transform 280ms var(--ease); }
.pc-cta-btn:hover .arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .pc-cta-btn, .pc-cta-btn .arrow { transition: none; }
}

/* ============================================================
   PROJECT PAGE v2.4 · logo brief, behind-the-scenes, film epico
   ============================================================ */

/* brief media = logo cliente su card scura */
.pn-media.pn-logo { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: #0A0A0A; border: 1px solid var(--line); }
.pn-media.pn-logo img { width: auto; height: auto; max-width: 60%; max-height: 34%; }

/* Behind the scenes · video placeholder autoplay muto */
.proj-bts2 { padding: clamp(48px, 7vw, 96px) 0; }
.proj-bts2 .sec-head { margin-bottom: clamp(24px, 3vw, 40px); }
.proj-bts2-media { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: #000; }
.proj-bts2-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* IL FILM · full-screen, magnetico */
.proj-film-sec.epic { padding: 0; }
.proj-film-sec.epic .proj-film { aspect-ratio: auto; width: 100%; height: 100vh; min-height: 560px; margin-top: 0; border: 0; border-radius: 0; cursor: pointer; }
.proj-film-sec.epic .proj-film .poster { opacity: 1; }
.proj-film-sec.epic .pscrim { background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.18) 18%, transparent 34%, transparent 72%, rgba(0,0,0,0.55) 100%), radial-gradient(ellipse 78% 78% at 50% 50%, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.42) 70%, rgba(0,0,0,0.6) 100%); }
.proj-film-sec.epic .proj-play { transition: transform 280ms var(--ease); }
.proj-film-sec.epic .proj-play .pbtn { width: clamp(96px, 11vw, 132px); height: clamp(96px, 11vw, 132px); animation: pfPulse 2600ms var(--ease) infinite; }
.proj-film-sec.epic .pbtn .tri { border-left-width: 28px; border-top-width: 17px; border-bottom-width: 17px; margin-left: 6px; }
.proj-film-sec.epic:hover .proj-play .pbtn { transform: scale(1.06); }
@keyframes pfPulse { 0% { box-shadow: 0 0 0 0 rgba(249,204,21,0.45); } 70% { box-shadow: 0 0 0 28px rgba(249,204,21,0); } 100% { box-shadow: 0 0 0 0 rgba(249,204,21,0); } }
.pf-kicker { position: absolute; top: clamp(94px, 13vh, 140px); left: 0; right: 0; z-index: 3; text-align: center; font-size: 12px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.7); }
.pf-kicker .num { color: var(--accent); font-style: italic; font-weight: 600; padding-right: 4px; }
.pf-cue { position: absolute; bottom: clamp(34px, 6vh, 64px); left: 0; right: 0; z-index: 3; text-align: center; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.7); }
@media (prefers-reduced-motion: reduce) {
  .proj-film-sec.epic .proj-play .pbtn { animation: none; }
  .proj-film-sec.epic .proj-play { transition: none; }
}
@media (max-width: 900px) {
  .proj-film-sec.epic .proj-film { height: 72vh; min-height: 440px; }
}

/* ============================================================
   PROJECT PAGE v2.8 · titoli di sezione = etichette discrete
   (tick giallo + label maiuscola + hairline; il contenuto pesa)
   ============================================================ */
.sec-lab { display: flex; align-items: center; gap: 16px; }
.sec-lab .sl-tick { width: 26px; height: 2px; background: var(--accent); flex: none; border-radius: 2px; }
#proj .sec-lab h2.sl-txt, #proj .sec-lab .sl-txt {
  font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); margin: 0; line-height: 1.2; white-space: nowrap;
}
.sec-lab .sl-line { flex: 1; height: 1px; background: var(--line); min-width: 24px; }
#proj .pn-text .sec-lab { margin-bottom: clamp(20px, 2.4vw, 30px); }

/* ============================================================
   PROJECT PAGE v3.0 · storyboard marquee + film che si espande
   ============================================================ */

/* STORYBOARD · marquee automatica (frame piccoli, scorre da sola, pausa su hover) */
.sb-marquee { overflow: hidden; padding: 6px 0 10px; }
.sb-mtrack { display: flex; width: max-content; animation: sbScroll 52s linear infinite; will-change: transform; }
.sb-marquee:hover .sb-mtrack { animation-play-state: paused; }
.sb-marquee .sb-frame { flex: 0 0 clamp(240px, 30vw, 400px); margin-right: clamp(14px, 1.6vw, 22px); scroll-snap-align: none; }
@keyframes sbScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sb-mtrack { animation: none; }
  .sb-marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* IL FILM · parte come card (label fuori), poi sullo scroll si espande a full-screen */
.proj-film-sec.expand { --cw: min(980px, 86vw); --ch: calc(var(--cw) * 9 / 16); --p: 0; height: 220vh; padding: 0; position: relative; }
.pf-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.proj-film-sec.expand .proj-film {
  position: absolute; inset: 0; aspect-ratio: auto; margin: 0; border: 0; border-radius: 0;
  clip-path: inset(
    calc((100vh - var(--ch)) / 2 * (1 - var(--p)))
    calc((100vw - var(--cw)) / 2 * (1 - var(--p)))
    round calc(16px * (1 - var(--p)))
  );
}
.proj-film-sec.expand .proj-film .poster { transform: scale(calc(1 + 0.05 * (1 - var(--p)))); will-change: transform; }
/* film in riproduzione: la card si apre a tutto schermo (transizione) e il player sta nel riquadro 16:9 dell'immagine,
   cosi' i controlli non finiscono sotto la nav o sotto la barra di Safari */
.proj-film-sec.expand.is-playing .proj-film { transition: clip-path 700ms var(--ease); }
/* la card riempie la sticky (100vh) a ogni larghezza: con il min-height di .epic il player 16:9 si centrava sotto la finestra */
.proj-film-sec.epic.expand .proj-film { height: 100%; min-height: 0; }
.proj-film-sec.expand .proj-film video, .proj-film-sec.expand .proj-film iframe { inset: 0; margin: auto; width: min(100%, calc(100vh * 16 / 9)); height: auto; aspect-ratio: 16 / 9; }
.pf-lab {
  position: absolute; z-index: 5;
  left: calc((100vw - var(--cw)) / 2); width: var(--cw);
  top: calc((100vh - var(--ch)) / 2 - 46px);
  opacity: calc(1 - var(--p) * 3.5); pointer-events: none;
}
.proj-film-sec.expand .pf-cue { opacity: var(--p); }
@media (max-width: 900px) {
  .proj-film-sec.expand { --cw: 90vw; height: 200vh; }
  .pf-lab { top: calc((100vh - var(--ch)) / 2 - 40px); }
}

/* ============================================================
   PROJECT PAGE v3.2 · finale = solo prossimo lavoro (niente CTA, c'e' la nav sticky)
   ============================================================ */
/* SPIN-OFF · trittico video (ARGIVIT): 3 card 4:5, video muted loop */
.proj-spinoffs .so-intro { color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 18px); max-width: 52ch; margin: 0 0 clamp(26px, 4vh, 46px); }
/* 3 reels verticali 4:5 che partono in autoplay muto/loop. Pill "Audio" per attivare il suono */
.so-reels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.so-reel { position: relative; margin: 0; }
.so-rmedia { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); background: #000; transition: transform 500ms var(--ease), border-color 300ms ease; }
.so-reel:hover .so-rmedia { transform: translateY(-6px); border-color: var(--line-strong); }
.so-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.so-rgrad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, transparent 30%, transparent 52%, rgba(0,0,0,0.7) 100%); pointer-events: none; }
.so-rmeta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 10px; padding: clamp(14px, 1.4vw, 20px); }
.so-rn { font-style: italic; font-weight: 600; color: var(--accent); font-size: 15px; padding-right: 2px; }
.so-rname { font-weight: 700; letter-spacing: -0.01em; font-size: clamp(16px, 1.7vw, 22px); color: #fff; }
.so-sound { position: absolute; top: 14px; right: 14px; z-index: 2; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #000; background: rgba(255,255,255,0.9); border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: background 200ms ease, transform 200ms var(--ease); }
.so-sound:hover { transform: scale(1.05); }
.so-reel.sound .so-sound { background: var(--accent); }
@media (max-width: 900px) { .so-reels { grid-template-columns: 1fr; max-width: 78vw; margin: 0 auto; } }

/* FINALE · CTA contatto: riusa interamente lo stile della CTA home (.cta-photo). .proj-cta-end = solo hook JS (dock) */

/* ============================================================
   PROJECT PAGE v3.3 · output social statici (immagini) + caption film
   ============================================================ */
/* card social senza video: immagine piena, niente velatura */
.pc-item.pc-static img.poster { opacity: 1; }
/* caption sotto il label del film (es. "Due generazioni. Stesso istinto.") */
.pf-cap { margin-top: 10px; max-width: var(--cw); color: var(--ink-soft); font-size: clamp(14px, 1.4vw, 17px); line-height: 1.45; }
.pf-cap strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   PROJECT PAGE v3.4 · carousel foto negli step + social card 2:3
   ============================================================ */
/* carousel automatico delle foto in "cosa abbiamo fatto" (slide orizzontale) */
.pws-carousel { position: relative; width: 100%; height: 100%; overflow: hidden; }
.pws-track { display: flex; width: 100%; height: 100%; transition: transform 800ms var(--ease); will-change: transform; }
.pws-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
@media (prefers-reduced-motion: reduce) { .pws-track { transition: none; } }

/* output social (screenshot IG, formati misti 2025/2026): card 9:16, immagine intera (contain) per non tagliare angoli/logo */
/* card social: ingombro preciso = formato naturale dello screenshot (niente lettering box, niente crop) */
.pc-item.pc-static { aspect-ratio: auto; background: transparent; box-shadow: 0 24px 60px -28px rgba(0,0,0,0.8); }
.pc-item.pc-static img.poster { width: 100%; height: auto; object-fit: fill; opacity: 1; }

/* ============================================================
   PROJECT PAGE v3.5 · sezione Spin & Win (gioco da tavolo)
   ============================================================ */
.proj-spin { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(44px, 6vw, 90px); }

/* ============================================================
   PROJECT PAGE v4.0 · Spin & Win · LA PLANCIA + gioco live
   ============================================================ */
/* blocco live: claim+copy a sinistra, ruota interattiva a destra (niente colonna vuota) */
.proj-spin .spin-live { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(20px, 3vw, 44px) 0 clamp(36px, 5vw, 68px); }
.spin-copy .spin-claim { font-size: clamp(30px, 4.4vw, 60px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; margin: 0 0 22px; }
.spin-copy .spin-claim .hl { color: var(--accent); }
.spin-text p { color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; max-width: 42ch; }
.spin-text p + p { margin-top: 0.5em; }
.spin-metrics { display: flex; gap: clamp(26px, 4vw, 56px); margin-top: clamp(22px, 3vw, 36px); }
.sm-item { display: flex; flex-direction: column; }
.sm-v { font-style: italic; font-weight: 600; color: var(--accent); font-size: clamp(30px, 3.6vw, 46px); line-height: 1; padding-right: 4px; }
.sm-l { font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft); margin-top: 8px; max-width: 18ch; }

/* la ruota */
.spin-stage { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 30px); }
.spin-wheel-wrap { position: relative; width: min(86%, 440px); aspect-ratio: 1 / 1; cursor: pointer; }
.spin-pointer { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 24px solid var(--accent); z-index: 3; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55)); }
.spin-wheel { width: 100%; height: 100%; border-radius: 50%; transform: rotate(0deg); will-change: transform; box-shadow: 0 36px 90px -34px rgba(0,0,0,0.95), 0 0 0 7px #0b0b0b, 0 0 0 9px rgba(255,255,255,0.07); }
.spin-svg { display: block; width: 100%; height: 100%; }
.spin-ctrl { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 96px; }
.spin-go { background: var(--accent); color: var(--accent-ink); border: none; font-family: inherit; font-weight: 700; font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; padding: 14px 40px; border-radius: 40px; cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); box-shadow: 0 12px 34px -12px rgba(249,204,21,0.7); }
.spin-go:hover { transform: translateY(-2px); }
.spin-go:active { transform: scale(0.97); }
.spin-go[disabled] { opacity: 0.45; cursor: default; box-shadow: none; }
.spin-result-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); }
.spin-result { font-size: clamp(18px, 2vw, 24px); font-weight: 600; color: #fff; min-height: 1.2em; }
.spin-result.win { color: var(--accent); }

/* i pezzi · caselle nominate */
.spin-pieces { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.5vw, 20px); margin-top: clamp(24px, 3vw, 44px); }
.spin-piece { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-card); }
.spin-piece .sp-img { aspect-ratio: 4 / 3; overflow: hidden; }
.spin-piece .sp-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.spin-piece:hover .sp-img img { transform: scale(1.05); }
.spin-piece figcaption { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.sp-n { font-style: italic; font-weight: 600; color: var(--accent); font-size: 14px; padding-right: 4px; }
.sp-t { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.sp-d { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

/* payoff FINISH · i piloti che giocano */
.spin-payoff { position: relative; margin-top: clamp(40px, 5vw, 76px); height: min(64vh, 600px); min-height: 360px; overflow: hidden; display: flex; }
.spin-payoff .sf-bg { position: absolute; inset: 0; }
.spin-payoff .sf-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.spin-payoff .sf-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 30%, transparent 48%, rgba(0,0,0,0.85) 100%); }
.spin-payoff .sf-inner { position: relative; z-index: 2; align-self: flex-end; padding-bottom: clamp(36px, 5vw, 64px); }
.sf-eye { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.sf-t { font-size: clamp(24px, 3.4vw, 44px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin-top: 14px; max-width: 20ch; }

@media (prefers-reduced-motion: reduce) { .spin-wheel { transition: none !important; } }
@media (max-width: 900px) {
  .proj-spin .spin-live { grid-template-columns: 1fr; gap: 36px; }
  .spin-wheel-wrap { width: min(82%, 360px); margin: 0 auto; }
  .spin-pieces { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PROJECT PAGE v4.1 · Spin & Win · TABELLONE esplorato (scroll-driven)
   lead (claim+metrics) → board pinnato con spotlight che scorre → payoff
   ============================================================ */
/* === FASCIA UNICA pinnata: intro + tabellone (scene zoom) + foto, tutto in .bd-stick === */
.proj-board-sec { position: relative; height: calc((var(--bscenes, 7) + 1) * 82vh); background: var(--bg); }
.bd-stick { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; background: var(--bg); }

/* fondo: solo una sfumatura radiale discreta (pool di luce al centro) */
.bd-floor { position: absolute; inset: 0; z-index: 0; background: radial-gradient(62% 58% at 50% 46%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 52%); transform: translateZ(0); }

/* board centrato; appare/scompare per scena (entra animato) */
.bd-stage { position: absolute; z-index: 1; left: 50%; top: 50%; width: min(90vh, 94vw); height: min(90vh, 94vw); transform: translate(-50%, -50%) scale(0.94); opacity: 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.bd-stick.is-board .bd-stage { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bd-board { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 0.8s var(--ease); }
.bd-board > img.bd-base { width: 100%; height: 100%; object-fit: contain; display: block; }
/* scrim sinistro (leggibilita' testi sul board) */
.bd-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease); background: linear-gradient(100deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.6) 16%, rgba(0,0,0,0.22) 38%, rgba(0,0,0,0) 56%); }
.bd-stick.is-board .bd-scrim { opacity: 1; }

/* EVIDENZIAZIONE = finestra a rettangolo arrotondato (dim. = componente, in px viewport, centrata), box-shadow MEDIO solido fuori (no blur -> economica, no jank). Solo sugli step zoomati */
.bd-spot { position: absolute; left: var(--sx, 50%); top: var(--sy, 50%); width: var(--mw, 60%); height: var(--mh, 40%); transform: translate(-50%, -50%); border-radius: clamp(10px, 1.4vw, 20px); outline: 1.5px solid rgba(249, 204, 21, 0.85); box-shadow: 0 0 0 100vmax rgba(0,0,0,0.6); opacity: 0; pointer-events: none; z-index: 2; transition: opacity 0.45s var(--ease), width 0.7s var(--ease), height 0.7s var(--ease), left 0.8s var(--ease), top 0.8s var(--ease), border-radius 0.5s var(--ease); }
.bd-spot.round { border-radius: 50%; }
.bd-stick.is-focus .bd-spot { opacity: 1; }

/* label SPIN & WIN sempre presente */
.bd-label { position: absolute; z-index: 6; top: clamp(92px, 13vh, 132px); left: 0; right: 0; }

/* INTRO (scena 0) centrata; esce verso l'alto in fade */
.bd-intro { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; text-align: center; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.bd-stick:not(.is-intro) .bd-intro { opacity: 0; transform: translateY(-46px); pointer-events: none; }
.bd-intro-claim { font-size: clamp(34px, 6vw, 82px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.0; margin: 0 auto; max-width: 17ch; }
.bd-intro-sub { font-size: clamp(16px, 1.7vw, 21px); color: var(--ink-soft); line-height: 1.6; max-width: 54ch; margin: clamp(22px, 3.4vh, 36px) auto 0; }
.bd-intro-sub strong { color: var(--ink); font-weight: 600; }

/* didascalie step: entrano dal basso, escono verso l'alto */
.bd-captions { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; pointer-events: none; opacity: 0; transition: opacity 0.4s var(--ease); }
.bd-stick.is-board .bd-captions { opacity: 1; }
.bd-captions .wrap { width: 100%; }
.bd-caps-inner { position: relative; max-width: 30rem; min-height: 280px; }
.bd-cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(34px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); pointer-events: none; }
.bd-cap.active { opacity: 1; transform: none; }
.bd-cap.exit { opacity: 0; transform: translateY(-34px); }
.bd-eye { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.bd-t { font-size: clamp(30px, 4vw, 54px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; margin: 14px 0 14px; }
.bd-d { font-size: clamp(15px, 1.5vw, 19px); color: var(--ink-soft); line-height: 1.55; max-width: 30ch; }
.bd-idx { margin-top: 24px; font-size: 12px; letter-spacing: 0.1em; color: var(--ink-faint); }
.bd-idx i { font-style: italic; font-weight: 600; color: var(--accent); padding-right: 3px; }

/* FOTO piloti (ultima scena): entra dal basso */
.bd-photos { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); pointer-events: none; }
.bd-stick.is-photos .bd-photos { opacity: 1; transform: none; }
.bd-photos .wrap { width: 100%; }
.bd-photos-t { font-size: clamp(24px, 3.2vw, 44px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; margin: 14px auto clamp(26px, 4vh, 46px); max-width: 22ch; }
.bd-photos-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.bd-photo { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-card); margin: 0; }
.bd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* le tre foto entrano una alla volta, dopo il titolo; all'uscita svaniscono insieme (il ritardo vale solo in entrata) */
.bd-photo { opacity: 0; transform: translateY(36px) scale(0.97); transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); }
.bd-stick.is-photos .bd-photo { opacity: 1; transform: none; }
.bd-stick.is-photos .bd-photo:nth-child(1) { transition-delay: 0.3s; }
.bd-stick.is-photos .bd-photo:nth-child(2) { transition-delay: 0.48s; }
.bd-stick.is-photos .bd-photo:nth-child(3) { transition-delay: 0.66s; }

@media (prefers-reduced-motion: reduce) {
  .proj-board-sec { height: auto; }
  .bd-stick { position: static; height: auto; overflow: visible; padding: clamp(40px, 7vw, 90px) 0; }
  .bd-floor { display: none; }
  .bd-stage { position: relative; left: auto; top: auto; transform: none; opacity: 1; width: min(86vw, 64vh); height: min(86vw, 64vh); margin: 0 auto clamp(22px, 4vw, 38px); filter: none; }
  .bd-board { transition: none; }
  .bd-scrim, .bd-spot { display: none; }
  .bd-label { position: static; margin-bottom: 18px; }
  .bd-intro { position: static; opacity: 1; transform: none; margin-bottom: clamp(28px, 6vw, 56px); }
  .bd-intro, .bd-photos, .bd-captions { display: block; }
  .bd-captions { position: static; opacity: 1; }
  .bd-captions .wrap { padding-left: 0; padding-right: 0; }
  .bd-caps-inner { max-width: none; min-height: 0; text-align: center; }
  .bd-cap { position: static; opacity: 1; transform: none; margin-bottom: 14px; }
  .bd-photos { position: static; opacity: 1; transform: none; margin-top: clamp(28px, 6vw, 56px); }
  .bd-photo { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 900px) {
  .proj-board-sec { height: calc((var(--bscenes, 7) + 1) * 82vh); }
  .bd-stage { width: 94vw; height: 94vw; }
  .bd-captions { align-items: flex-end; }
  .bd-caps-inner { max-width: 82%; min-height: 160px; margin-bottom: 14vh; }
  .bd-scrim { background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 66%, rgba(0,0,0,0.92) 100%); }
  .bd-d { max-width: none; }
  .bd-label { top: 80px; }
  .bd-photos-row { grid-template-columns: 1fr; max-width: 66vw; margin: 0 auto; gap: 10px; }
  .bd-photo { aspect-ratio: 16 / 9; }
  .bd-photos-t { font-size: clamp(20px, 5.6vw, 28px); }
}

/* componenti montate sul tabellone (ruota+logo, carte, pedine): sempre visibili, sotto la mask */
.bd-el { position: absolute; }
.bd-wheel { aspect-ratio: 1 / 1; }
.bd-wheel-disc { width: 100%; height: 100%; border-radius: 50%; display: block; box-shadow: 0 10px 34px -6px rgba(0,0,0,0.6); }
.bd-wheel-logo { position: absolute; left: 50%; top: 50%; width: 26%; transform: translate(-50%, -50%); border-radius: 50%; display: block; }
.bd-card { display: block; height: auto; border-radius: 4px; transform-origin: center center; box-shadow: 0 8px 24px -4px rgba(0,0,0,0.55); }
.bd-pedine { display: block; height: auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.6)); }
/* ruota-overlay: stesso canvas del tabellone, si sovrappone esatta; ruota sul proprio asse (transform-origin inline) */
.bd-wheel-spin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .bd-wheel-spin { transition: none !important; } }

/* payoff · foto dei piloti che ci giocano (sotto la band FINISH) */
.spin-payoff-grid { padding: clamp(14px, 2vw, 26px) 0 clamp(40px, 6vw, 90px); background: var(--bg); }
.spin-payoff-grid .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); }
.sf-shot { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-card); }
.sf-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.sf-shot:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .spin-payoff-grid .wrap { grid-template-columns: 1fr; } }

/* ============================================================
   GRIGLIA CITTA (proj-cities) · card foto verticale 3/4 + nome citta (label accent)
   prefisso .pcity- per non collidere con .pc- (cover carousel)
   ============================================================ */
.proj-cities { padding: clamp(40px, 6vw, 90px) 0; }
.proj-cities .pcity-intro { color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 18px); max-width: 52ch; margin: 0 0 clamp(26px, 4vh, 46px); }
.pcity-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 26px); }
.pcity-card { margin: 0; }
.pcity-media { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-card); aspect-ratio: 3 / 4; transition: border-color 320ms ease; }
.pcity-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.92); transition: transform 600ms var(--ease), filter 400ms var(--ease); }
.pcity-card:hover .pcity-media { border-color: var(--line-strong); }
.pcity-card:hover .pcity-media img { transform: scale(1.04); filter: brightness(1); }
.pcity-name { margin-top: 14px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .pcity-media, .pcity-media img { transition: none; }
  .pcity-card:hover .pcity-media img { transform: none; }
}
@media (max-width: 900px) { .pcity-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   GRIGLIA FOTO generica (proj-gallery) · frame 16:9 + nome/sub opzionale
   ============================================================ */
.proj-gallery { padding: clamp(40px, 6vw, 90px) 0; }
.proj-gallery .pgal-intro { color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 18px); max-width: 52ch; margin: 0 0 clamp(26px, 4vh, 46px); }
.pgal-grid { display: grid; gap: clamp(14px, 1.8vw, 26px); }
.pgal-card { margin: 0; }
.pgal-media { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-card); aspect-ratio: 16 / 9; transition: border-color 320ms ease; }
.pgal-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.92); transition: transform 600ms var(--ease), filter 400ms var(--ease); }
.pgal-card:hover .pgal-media { border-color: var(--line-strong); }
.pgal-card:hover .pgal-media img { transform: scale(1.04); filter: brightness(1); }
.pgal-name { display: block; margin-top: 14px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.pgal-sub { display: block; margin-top: 5px; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) {
  .pgal-media, .pgal-media img { transition: none; }
  .pgal-card:hover .pgal-media img { transform: none; }
}
@media (max-width: 900px) { .pgal-grid { grid-template-columns: 1fr !important; max-width: 82vw; margin: 0 auto; } }

/* ============================================================
   GRIGLIA CLIP video (proj-clips) · facade 16:9 playable ("Guarda i video")
   ============================================================ */
.proj-clips { padding: clamp(40px, 6vw, 90px) 0; }
.proj-clips .clip-intro { color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 18px); max-width: 52ch; margin: 0 0 clamp(26px, 4vh, 46px); }
.clip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 26px); }
.clip-card { margin: 0; }
.clip-media { position: relative; margin-top: 0; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-card); aspect-ratio: 16 / 9; }
.clip-media .poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.clip-card:hover .clip-media .poster { transform: scale(1.03); }
.clip-cap { margin-top: 14px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .clip-media .poster { transition: none; } .clip-card:hover .clip-media .poster { transform: none; } }
@media (max-width: 900px) { .clip-grid { grid-template-columns: 1fr; max-width: 82vw; margin: 0 auto; } }

/* ============================================================
   SLIDER PUNTATE (proj-episodes) · scroll-snap orizzontale + nome puntata + nav
   ============================================================ */
.proj-episodes { padding: clamp(48px, 7vw, 96px) 0; overflow: hidden; }
.proj-episodes .ep-intro { color: var(--ink-soft); font-size: clamp(15px, 1.4vw, 18px); max-width: 56ch; margin: 0 0 clamp(24px, 3.5vh, 40px); }
.ep-slider { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 0 8px; }
.ep-slider::-webkit-scrollbar { display: none; }
.ep-track { display: flex; gap: clamp(14px, 1.6vw, 24px); width: max-content;
  padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  padding-right: var(--gutter); }
.ep-card { flex: 0 0 clamp(320px, 66vw, 760px); margin: 0; scroll-snap-align: start; }
.ep-media { position: relative; margin-top: 0; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-card); aspect-ratio: 16 / 9; }
.ep-media .poster { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.ep-card:hover .ep-media .poster { transform: scale(1.03); }
.ep-cap { display: flex; align-items: baseline; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.ep-cap .ep-n { font-style: italic; font-weight: 600; color: var(--accent); font-size: 15px; padding-right: 2px; }
.ep-cap .ep-t { font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.ep-cap .ep-sub { flex-basis: 100%; margin-top: 4px; font-size: 12.5px; letter-spacing: 0.01em; text-transform: none; color: var(--ink-soft); }
.ep-nav { display: flex; justify-content: center; gap: 14px; margin-top: clamp(20px, 3vw, 30px); }
.ep-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--ink); font-size: 20px; display: flex; align-items: center; justify-content: center; transition: border-color 200ms ease, background 200ms ease, color 200ms ease; }
.ep-btn:hover { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .ep-media .poster { transition: none; } .ep-card:hover .ep-media .poster { transform: none; } }
@media (max-width: 900px) { .ep-card { flex-basis: 82vw; } }

/* ============================================================
   PRODUZIONI (proj-shows) · blocchi alternati eyebrow + titolo + desc + CTA "Guarda le puntate"
   ============================================================ */
.proj-shows { padding: clamp(48px, 7vw, 96px) 0; }
.show-list { display: flex; flex-direction: column; gap: clamp(48px, 8vw, 116px); margin-top: clamp(28px, 4vw, 56px); }
.show-block { display: grid; grid-template-columns: 1.08fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.show-block.alt .show-media { order: 2; }
.show-media { margin: 0; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 10; background: var(--bg-card); }
.show-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease); }
.show-block:hover .show-media > img { transform: scale(1.04); }
.show-media .pws-track img { object-position: center; }
.show-block:hover .show-media .pws-track img { transform: none; }
.show-eye { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.show-title { font-family: var(--display); font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; letter-spacing: -0.03em; margin: 14px 0 16px; line-height: 1.03; }
.show-text p { color: var(--ink-soft); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; max-width: 46ch; margin: 0; }
.show-btn { margin-top: clamp(22px, 3vw, 34px); }
@media (prefers-reduced-motion: reduce) { .show-media img { transition: none; } .show-block:hover .show-media img { transform: none; } }
@media (max-width: 900px) { .show-block, .show-block.alt { grid-template-columns: 1fr; gap: 22px; } .show-block.alt .show-media { order: 0; } }

/* IN VETRINA · uno show featured + lista compatta (podcast produzioni) */
.vt-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: clamp(24px, 3.4vw, 52px); align-items: start; margin-top: clamp(28px, 4vw, 52px); }
.vt-art { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); background: var(--bg-card); }
.vt-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease); }
.vt-art:hover img { transform: scale(1.04); }
.vt-play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 250ms var(--ease); pointer-events: none; }
.vt-art:hover .vt-play { opacity: 1; }
.vt-play i { width: 62px; height: 62px; border-radius: 50%; background: rgba(249,204,21,0.92); display: grid; place-items: center; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.vt-play i::after { content: ''; border-left: 18px solid var(--accent-ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.vt-fcap { padding-top: 16px; }
.vt-badge { display: inline-block; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--accent-ink); background: var(--accent); padding: 3px 10px; border-radius: var(--radius-pill); margin-bottom: 12px; }
.vt-eye { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.vt-fcap h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.025em; font-size: clamp(22px, 2.4vw, 30px); margin: 7px 0 10px; line-height: 1.05; }
.vt-fcap p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }
.vt-art .pws-track img { object-position: center; }
.vt-art:hover .pws-track img { transform: none; }
.vt-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.vt-cta .arrow { transition: transform 200ms var(--ease); }
.vt-cta:hover .arrow { transform: translateX(4px); }
.vt-list { display: flex; flex-direction: column; }
.vt-row { display: grid; grid-template-columns: 128px 1fr auto; gap: 16px; align-items: center; width: 100%; padding: 14px 10px; border: 0; border-top: 1px solid var(--line); border-radius: 12px; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; transition: background 200ms var(--ease); }
.vt-row:last-child { border-bottom: 1px solid var(--line); }
.vt-row:hover { background: var(--bg-card); }
.vt-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* cross-fade master-detail */
.vt-left, .vt-list { transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.vt-left.vt-swapping { opacity: 0; transform: translateY(10px); }
.vt-list.vt-swapping { opacity: 0; }
.vt-th { aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-card); }
.vt-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-meta { min-width: 0; }
.vt-ti { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-top: 3px; color: var(--ink); }
.vt-arrow { color: var(--ink-faint); font-size: 20px; transition: color 200ms var(--ease), transform 200ms var(--ease); }
.vt-row:hover .vt-arrow { color: var(--accent); transform: translateX(3px); }
@media (max-width: 900px) { .vt-grid { grid-template-columns: 1fr; gap: 26px; } .vt-row { grid-template-columns: 104px 1fr auto; } }
@media (prefers-reduced-motion: reduce) { .vt-art img, .vt-play, .vt-row, .vt-arrow, .vt-cta .arrow, .vt-left, .vt-list { transition: none; } .vt-art:hover img { transform: none; } .vt-left.vt-swapping, .vt-list.vt-swapping { opacity: 1; transform: none; } }

/* piccolo disclaimer (es. NDA), non invadente */
.proj-disclaimer { padding: clamp(20px, 2.8vw, 34px) 0 0; }
.proj-disclaimer p { font-size: 12px; line-height: 1.5; color: var(--ink-faint); margin: 0; }

/* STAT · card callout con foto di sfondo + numero grande */
.proj-stat { padding: clamp(24px, 4vw, 56px) 0; }
.stat-card { position: relative; overflow: hidden; border-radius: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-lift); min-height: clamp(240px, 30vw, 420px); display: flex; align-items: center; }
.stat-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.42); }
.stat-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.6) 100%); }
.stat-inner { position: relative; z-index: 1; padding: clamp(32px, 5vw, 72px) var(--rail-pad); }
.stat-v { display: block; font-family: var(--display); font-size: clamp(56px, 10vw, 150px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.88; color: var(--accent); }
.stat-l { display: block; margin-top: clamp(12px, 1.6vw, 20px); font-size: clamp(16px, 1.9vw, 25px); font-weight: 500; color: #fff; max-width: 26ch; line-height: 1.28; }
.stat-l strong { color: var(--accent); font-weight: 600; }

/* ============== MOBILE · pattern DROP Lab + touch (il desktop non cambia) ============== */
/* home: svh per stabilita' iOS + ritmo verticale */
@media (max-width: 900px) {
  .intro { height: 100svh; }
  .hero-min { min-height: 100svh; }
  .manifesto { padding: clamp(72px, 12vh, 160px) var(--gutter); }
}
/* affordance solo-hover: su touch sempre visibili */
@media (hover: none) {
  .work-card .corner { opacity: 1; transform: none; }
  .vt-art .vt-play { opacity: 1; }
}
/* project: hero in svh, tap target, niente layout shift sulle card social, snap netto */
@supports (height: 1svh) { .proj-hero { height: min(88svh, 880px); } }
@media (max-width: 900px) {
  .footer-socials a { width: 44px; height: 44px; }
  .ph-back { padding: 12px 0; margin: -12px 0; }
  .so-sound { padding: 10px 16px; }
  .pc-item.pc-static { min-height: 320px; }
  .work-strip { scroll-snap-type: x mandatory; }
}