/*
 * Gentlebrand — componenti e pagine.
 * Ogni valore visivo viene da tokens.css. Comportamenti in site.js.
 * Breakpoint: ≤1100 (desktop stretto), ≤900 (tablet), ≤600 (mobile).
 */

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--colore-testo);
  background: var(--colore-sfondo);
  font-family: var(--font-testo);
  font-weight: var(--peso-regular);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a, button { color: inherit; }
a { text-decoration: none; }
button { font: inherit; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--colore-focus); outline-offset: 3px; border-radius: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--spazio-4); top: var(--spazio-4); z-index: 200;
  padding: var(--spazio-3) var(--spazio-5); border-radius: var(--raggio-pill);
  background: var(--colore-primario); color: var(--colore-su-primario);
  font-weight: var(--peso-bold); transform: translateY(-200%);
  transition: transform var(--durata-base) var(--easing);
}
.skip-link:focus { transform: none; }

.site { overflow: clip; background: var(--colore-sfondo); }
.site > main { padding-top: var(--altezza-header); }

/* ============ Componente: Wordmark ============ */
.wordmark { display: block; width: var(--larghezza-logo); height: auto; aspect-ratio: 186 / 30; transition: width .45s var(--easing); }
.wordmark-light { filter: invert(1); }

/* ============ Componente: Header + navigazione ============ */
.header {
  position: fixed; inset: 0 0 auto; z-index: 20;
  height: var(--altezza-header);
  padding: 0 var(--margine-pagina);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--colore-sfondo-header);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .45s var(--easing), height .45s var(--easing);
  will-change: transform;
}
.header-hidden { transform: translateY(-100%); }
.header-compact { height: var(--altezza-header-compatto); }
.header-compact .wordmark { width: 155px; }
.logo-link { display: block; }

.nav { display: flex; align-items: center; gap: 22px; font-size: var(--testo-ui); font-weight: var(--peso-bold); }
.nav a { position: relative; }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px;
  background: currentColor; transition: right var(--durata-base) var(--easing);
}
.nav a:hover::after, .nav .nav-active::after { right: 0; }
.nav .nav-contact {
  min-height: 48px; padding: 0 var(--spazio-5);
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--colore-su-primario); background: var(--colore-primario);
  border-radius: var(--raggio-pill);
  transition: transform .3s var(--easing), box-shadow .3s var(--easing);
}
.nav .nav-contact::after { display: none; }
.nav .nav-contact:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #0002; }
.nav-contact img { width: 16px; height: 16px; transition: transform .3s var(--easing); }
.nav-contact:hover img { transform: translate(3px, -3px); }
.nav-divider { width: 1px; height: 32px; margin: 0 var(--spazio-1); background: var(--colore-bordo); }

.language-switch { display: flex; align-items: center; gap: 9px; font-size: var(--testo-piccolo); }
.language-switch button {
  padding: var(--spazio-1) 0; border: 0; background: none; cursor: pointer;
  color: var(--colore-testo-disabilitato); font-weight: var(--peso-bold);
  transition: color var(--durata-rapida) ease;
}
.language-switch button.is-active { color: var(--colore-testo); }
.language-switch > span { color: #b6b7b7; }

.menu { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: none; cursor: pointer; }
.menu span { display: block; width: 100%; height: 2px; margin: 6px 0; background: var(--colore-testo); transition: transform var(--durata-base) var(--easing); }
.menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ============ Componente: Bottone pill ============ */
.pill {
  min-height: 52px; padding: 0 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spazio-2);
  background: var(--colore-primario); color: var(--colore-su-primario);
  border: 1px solid var(--colore-primario); border-radius: var(--raggio-pill);
  font-size: var(--testo-base); font-weight: var(--peso-bold); cursor: pointer;
  transition: transform var(--durata-base) var(--easing), box-shadow var(--durata-base) var(--easing);
}
.pill:hover, .pill.is-hover { transform: translateY(-3px); box-shadow: var(--ombra-hover); }
.pill:hover .arrow, .pill.is-hover .arrow { transform: translate(3px, -3px); }
.pill-outline { background: var(--colore-sfondo); color: var(--colore-testo); border-color: #12141442; }
.pill-large { min-height: 66px; padding-inline: 42px; }
.pill[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.arrow { width: 18px; height: 18px; object-fit: contain; flex: none; transition: transform var(--durata-base) var(--easing); }

/* ============ Componenti: chip ed eyebrow ============ */
.chip {
  align-self: flex-start; padding: 5px var(--spazio-3);
  background: var(--colore-sfondo); border-radius: var(--raggio-pill);
  font-size: 11px; font-weight: var(--peso-bold); letter-spacing: .08em;
}
.eyebrow {
  font-size: var(--testo-eyebrow); font-weight: var(--peso-bold);
  text-transform: uppercase; letter-spacing: var(--spaziatura-lettere-maiuscolo);
  color: var(--colore-testo-attenuato);
}

/* ============ Movimento: reveal allo scroll ============ */
.reveal { opacity: 0; transform: translateY(45px); transition: opacity var(--durata-reveal) var(--easing), transform var(--durata-reveal) var(--easing); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ============ Home: hero ============ */
.hero { text-align: center; padding: 28px 5% 74px; }
.hero h1 {
  margin: 0; font-size: var(--testo-display); font-weight: var(--peso-bold);
  line-height: 1.08; letter-spacing: var(--spaziatura-lettere-titoli);
  animation: hero-in .95s var(--easing) both;
}
.hero > p {
  margin: 34px 0 0; color: var(--colore-testo-secondario);
  font-size: 21px; font-weight: var(--peso-light); line-height: 1.6;
  animation: hero-in .95s .18s var(--easing) both;
}
.hero-actions { display: flex; justify-content: center; gap: var(--spazio-4); margin-top: 46px; animation: hero-in .95s .34s var(--easing) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(30px); } }

/* ============ Home: showreel (sticky, si apre allo scroll) ============ */
.showcase { --progress: 0; height: 155vh; position: relative; }
.showcase-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  clip-path: inset(0 calc((1 - var(--progress)) * 5%) round calc((1 - var(--progress)) * 54px));
}
.showcase-slides { position: absolute; inset: 0; transform: scale(calc(1.1 - var(--progress) * .1)); }
.showcase-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase-slide-next { animation: showcase-slide 12s ease-in-out infinite; }
@keyframes showcase-slide {
  0%, 42% { opacity: 0; }
  50%, 92% { opacity: 1; }
  100% { opacity: 0; }
}
.play {
  position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%;
  width: 110px; height: 110px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--colore-sfondo);
  box-shadow: 0 0 11px #0000000a; cursor: pointer;
  transition: transform var(--durata-base) var(--easing);
}
.play:hover { transform: scale(1.08); }
.play img { width: 34px; height: 34px; margin-left: 4px; }

/* ============ Componente: modale video ============ */
.video-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: var(--spazio-8);
  background: var(--colore-sfondo-overlay);
  animation: video-overlay-in .45s var(--easing) both;
}
.video-overlay[hidden] { display: none; }
.video-frame {
  width: min(1400px, 92vw); aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--raggio-piccolo); box-shadow: var(--ombra-modale); background: #000;
  animation: video-frame-in .65s var(--easing) both;
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-close {
  position: absolute; top: 28px; right: var(--spazio-6);
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: #ffffff14;
  transition: background .3s var(--easing), transform .3s var(--easing);
}
.video-close:hover { background: #ffffff2e; transform: rotate(5deg); }
.video-close span { position: absolute; left: 12px; top: 21px; width: 20px; height: 2px; background: var(--colore-testo-su-scuro); }
.video-close span:first-child { transform: rotate(45deg); }
.video-close span:last-child { transform: rotate(-45deg); }
@keyframes video-overlay-in { from { opacity: 0; } }
@keyframes video-frame-in { from { opacity: 0; transform: translateY(24px) scale(.96); } }

/* ============ Home: sezioni ============ */
.section { padding: var(--spazio-10) var(--margine-pagina) 0; }
.section-title {
  margin: 0 0 var(--spazio-8);
  font-size: var(--testo-sezione); font-weight: var(--peso-semibold);
  line-height: var(--interlinea-titoli); letter-spacing: var(--spaziatura-lettere-titoli);
}
.center { display: flex; justify-content: center; margin-top: 56px; }

/* Approccio: griglia a tre colonne */
/* Altezza fissata sulle proporzioni del Figma (~950px a 1920): le foto riempiono, non dettano l'altezza */
.approach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-griglia); height: clamp(640px, 50vw, 960px); }
.approach-grid > *, .approach-stack > * { border-radius: var(--raggio-grande); overflow: hidden; }
/* gap = distanza minima chip/testo quando il testo riempie la card (mobile) */
.approach-copy { background: var(--colore-accento-approccio); padding: var(--spazio-7); display: flex; flex-direction: column; justify-content: space-between; gap: var(--spazio-7); }
.approach h2 { margin: 0 0 26px; font-size: clamp(32px, 2.4vw, 46px); font-weight: var(--peso-semibold); line-height: 1.08; letter-spacing: -.025em; }
.approach-copy p { margin: 0 0 34px; color: #121414b8; font-size: var(--testo-corpo); line-height: 1.6; }
.approach-image, .team-image { position: relative; min-height: 0; }
.approach-image img, .team-image img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.approach-stack { display: grid; grid-template-rows: 39fr 61fr; gap: var(--gap-griglia); }
.principle { background: var(--colore-accento-identita); padding: var(--spazio-7); display: flex; flex-direction: column; justify-content: space-between; gap: var(--spazio-7); }
.principle p { margin: 0; font-size: 32px; font-weight: var(--peso-medium); line-height: 1.15; letter-spacing: -.02em; }

/* Componente: card progetto in evidenza (home) */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
.work-card { display: block; }
.work-card.offset { padding-top: 120px; }
.work-image { aspect-ratio: 1; overflow: hidden; border-radius: var(--raggio-grande); background: var(--colore-segnaposto-3); }
.work-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s var(--easing); }
.work-card:hover .work-image img { transform: scale(1.04); }
.work-card .eyebrow { margin: 22px 0 6px; }
.work-card h3 { margin: 0; display: flex; align-items: center; gap: var(--spazio-3); font-size: var(--testo-h3); font-weight: var(--peso-semibold); }
.work-card h3 .arrow { opacity: 0; transform: translate(-8px, 8px); transition: .45s var(--easing); }
.work-card:hover h3 .arrow, .work-card:focus-visible h3 .arrow { opacity: 1; transform: none; }

/* Componente: card disciplina */
.disciplines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-griglia); }
.discipline {
  display: flex; flex-direction: column; padding: var(--spazio-5); border-radius: var(--raggio-grande);
  transition: transform .5s var(--easing), box-shadow .5s var(--easing), opacity var(--durata-reveal) var(--easing);
}
.discipline-strategy { background: var(--colore-accento-strategia); }
.discipline-identity { background: var(--colore-accento-identita); }
.discipline-packaging { background: var(--colore-accento-packaging); }
.discipline-image { aspect-ratio: 4 / 3; border-radius: var(--raggio-piccolo); overflow: hidden; }
.discipline-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .9s var(--easing); }
.discipline h3 { margin: 28px 0 var(--spazio-4); font-size: 27px; font-weight: var(--peso-bold); }
.discipline p { margin: 0 0 35px; font-size: var(--testo-base); font-weight: var(--peso-light); line-height: 1.7; }
.discipline > a { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: var(--peso-bold); }
.discipline.is-visible:hover { transform: translateY(-8px); box-shadow: var(--ombra-card-hover); }
.discipline:hover .discipline-image img { transform: scale(1.07); }
.discipline:hover .arrow { transform: translate(6px, -6px); }

/* Componente: nastro clienti (scorre all'infinito) */
.clients { padding: 90px 0 var(--spazio-10); overflow: hidden; }
.client-track { display: flex; width: max-content; animation: client-drift 36s linear infinite; }
.clients:hover .client-track { animation-play-state: paused; }
.client-set { display: flex; align-items: center; gap: 64px; padding-right: 64px; }
.client-set img { width: 190px; height: 110px; object-fit: contain; }
@keyframes client-drift { to { transform: translateX(-50%); } }

/* Componente: call to action finale (si "chiude" allo scroll) */
.final-section { background: var(--colore-sfondo-scuro); }
.final-panel {
  --close-progress: 0;
  padding: 118px 6% 128px; text-align: center; background: var(--colore-sfondo);
  clip-path: inset(0 calc(var(--close-progress) * 3.2%) calc(var(--close-progress) * 5%) round calc(var(--close-progress) * 36px));
}
.final-panel .eyebrow { margin: 0 0 22px; }
.final-panel h2 { margin: 0; font-size: clamp(48px, 4.1vw, 78px); font-weight: var(--peso-regular); line-height: 1.06; letter-spacing: -.025em; }
.final-copy { margin: 28px 0 46px; font-size: 19px; font-weight: var(--peso-light); }

/* ============ Componente: footer ============ */
.footer {
  display: grid; grid-template-columns: 1.8fr .75fr 1fr 1.35fr; gap: 45px;
  padding: 65px var(--margine-pagina) 35px;
  background: var(--colore-sfondo-scuro); color: var(--colore-testo-su-scuro-secondario); font-size: var(--testo-piccolo);
}
.footer nav { display: flex; flex-direction: column; gap: var(--spazio-3); }
.footer nav b { margin-bottom: 5px; color: var(--colore-testo-su-scuro-attenuato); font-size: 11px; text-transform: uppercase; letter-spacing: .16em; }
.footer a:hover { color: var(--colore-testo-su-scuro); }
.payoff { display: flex; justify-content: flex-end; align-items: center; gap: var(--gap-griglia); }
.payoff > div { display: flex; flex-direction: column; gap: 6px; text-align: right; color: var(--colore-testo-su-scuro); font-size: var(--testo-ui); }
.payoff img { width: 88px; height: 85px; padding: 6px; }
.legal {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 25px;
  margin-top: 15px; padding-top: 25px; border-top: 1px solid var(--colore-bordo-su-scuro); font-size: 11px;
}
.legal nav { flex-direction: row; flex-wrap: wrap; gap: var(--spazio-2) 18px; }

/* ============ Pagina Work ============ */
.work-hero { min-height: calc(68vh - var(--altezza-header)); padding: 8vh var(--margine-pagina); display: flex; align-items: center; }
.work-hero h1 {
  margin: 0; font-size: var(--testo-display-xl); font-weight: var(--peso-bold);
  line-height: var(--interlinea-stretta); letter-spacing: var(--spaziatura-lettere-display);
}
.matrix-section { padding: 30px var(--margine-pagina) 150px; }

/* Componente: barra filtri */
.matrix-toolbar { position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: var(--spazio-8); }
.matrix-count { margin: 0; color: var(--colore-testo-attenuato); font-size: var(--testo-piccolo); font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: .08em; }
.matrix-filters { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--spazio-2); }
.filter-button {
  min-height: 40px; padding: 0 18px;
  border: 1px solid var(--colore-bordo-controllo); border-radius: var(--raggio-pill);
  background: transparent; cursor: pointer;
  font-size: var(--testo-piccolo); font-weight: var(--peso-medium);
  transition: color .3s var(--easing), background .3s var(--easing), transform .3s var(--easing);
}
.filter-button:hover { transform: translateY(-2px); }
.filter-button.is-active { color: var(--colore-su-primario); background: var(--colore-primario); border-color: var(--colore-primario); }

/* Componente: griglia masonry */
.matrix-grid { display: grid; gap: var(--gap-griglia); align-items: start; grid-template-columns: repeat(var(--colonne, 4), minmax(0, 1fr)); }
.matrix-grid[hidden] { display: none; }
.matrix-column { min-width: 0; display: flex; flex-direction: column; gap: var(--gap-griglia); }

/* Componente: card progetto (griglia Work) */
.matrix-card { position: relative; display: block; width: 100%; margin: 0; }
.matrix-media { position: relative; width: 100%; aspect-ratio: 1.15; overflow: hidden; border-radius: var(--raggio-medio); isolation: isolate; background: var(--colore-segnaposto-3); }
.matrix-shape-tall .matrix-media { aspect-ratio: .78; }
.matrix-shape-standard .matrix-media { aspect-ratio: 1.15; }
.matrix-shape-wide .matrix-media { aspect-ratio: 1.5; }
.matrix-shape-square .matrix-media { aspect-ratio: 1; }
.matrix-tone-0 .matrix-media { background: var(--colore-segnaposto-1); }
.matrix-tone-1 .matrix-media { background: var(--colore-segnaposto-2); }
.matrix-tone-2 .matrix-media { background: var(--colore-segnaposto-3); }
.matrix-tone-3 .matrix-media { background: var(--colore-segnaposto-4); }
.matrix-tone-4 .matrix-media { background: var(--colore-segnaposto-5); }
.matrix-tone-5 .matrix-media { background: var(--colore-segnaposto-6); }
.matrix-media::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, #080909b8 100%);
  opacity: 0; transition: opacity var(--durata-media) var(--easing);
}
.matrix-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.15s var(--easing), transform 1.1s var(--easing); }
.matrix-primary { opacity: 0; transform: scale(1.025); }
.matrix-primary.is-loaded { opacity: 1; transform: scale(1); }
.matrix-secondary { opacity: 0; transform: scale(1.045); }
.matrix-title {
  position: absolute; left: 28px; right: 96px; bottom: 26px; z-index: 2;
  color: var(--colore-testo-su-scuro); opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--easing), transform var(--durata-media) var(--easing);
}
.matrix-title p { margin: 0 0 7px; font-size: var(--testo-micro); font-weight: var(--peso-bold); line-height: 1.4; text-transform: uppercase; letter-spacing: .11em; }
.matrix-title h2 { margin: 0; font-size: clamp(22px, 1.7vw, 34px); font-weight: var(--peso-semibold); line-height: 1; letter-spacing: -.035em; }
.matrix-open {
  position: absolute; right: 22px; bottom: 22px; z-index: 2;
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; background: var(--colore-primario);
  opacity: 0; transform: translateY(12px) scale(.9);
  transition: opacity .45s var(--easing), transform .45s var(--easing);
}
.matrix-open .arrow { width: 20px; height: 20px; }
.matrix-card:is(:hover, :focus-within, .is-hover) .matrix-primary { transform: scale(1.06); }
.matrix-card:is(:hover, :focus-within, .is-hover) .matrix-secondary.is-loaded { opacity: 1; transform: scale(1); }
.matrix-card:is(:hover, :focus-within, .is-hover) .matrix-media::after,
.matrix-card:is(:hover, :focus-within, .is-hover) .matrix-title,
.matrix-card:is(:hover, :focus-within, .is-hover) .matrix-open { opacity: 1; transform: none; }
.matrix-card.reveal {
  opacity: 0; transform: translateY(55px); clip-path: inset(0 0 18% 0 round var(--raggio-medio));
  transition: opacity var(--durata-reveal) var(--easing), transform 1s var(--easing), clip-path 1.1s var(--easing);
}
.matrix-card.reveal.is-visible { opacity: 1; transform: none; clip-path: inset(0 round var(--raggio-medio)); }
.matrix-delay-1 { transition-delay: .08s !important; }
.matrix-delay-2 { transition-delay: .16s !important; }
.matrix-delay-3 { transition-delay: .24s !important; }
.matrix-detail-link { position: absolute; inset: 0; z-index: 4; border-radius: var(--raggio-medio); }

/* ============ Componente: stati (vuoto / errore / caricamento) ============ */
.state {
  display: flex; flex-direction: column; align-items: center; gap: var(--spazio-4);
  padding: var(--spazio-10) var(--spazio-6); text-align: center;
  border: 1px dashed var(--colore-bordo); border-radius: var(--raggio-medio);
}
.state[hidden] { display: none; }
.state h2 { margin: 0; font-size: 32px; font-weight: var(--peso-semibold); letter-spacing: -.02em; }
.state p { max-width: 460px; margin: 0; color: var(--colore-testo-secondario); font-size: var(--testo-base); line-height: var(--interlinea-corpo); }
.state-error { border-style: solid; border-color: var(--colore-pericolo); background: var(--colore-pericolo-sfondo); }
.state-error h2 { color: var(--colore-pericolo); }
.skeleton { position: relative; overflow: hidden; border-radius: var(--raggio-medio); background: var(--colore-superficie-neutra); }
.skeleton::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, #ffffff99, transparent);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }

/* ============ Pagina progetto (case study) ============ */
.project-hero { min-height: calc(88vh - var(--altezza-header)); padding: 55px var(--margine-pagina) 70px; display: flex; flex-direction: column; justify-content: space-between; }
.project-hero h1 {
  margin: 70px 0; font-size: clamp(72px, 9.4vw, 180px); font-weight: var(--peso-bold);
  line-height: .84; letter-spacing: -.065em;
}
.project-hero-meta { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 50px; padding-top: var(--spazio-5); border-top: 1px solid var(--colore-bordo); }
.project-hero-meta > p { max-width: 660px; margin: 0; font-size: clamp(24px, 2.2vw, 38px); font-weight: var(--peso-light); line-height: var(--interlinea-media); letter-spacing: -.025em; }
.project-hero-meta dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin: 0; }
.project-hero-meta dl div { display: flex; flex-direction: column; gap: 7px; }
.project-hero-meta dt { color: #12141480; font-size: var(--testo-micro); font-weight: var(--peso-bold); text-transform: uppercase; letter-spacing: var(--spaziatura-lettere-maiuscolo); }
.project-hero-meta dd { margin: 0; font-size: 14px; }
/* L'altezza non scende mai sotto quella della foto (2189×900) alla larghezza del riquadro: cover taglia solo
   ai lati e la bottiglia, al centro, resta intera. Niente aspect-ratio + min-height: insieme allargano il box oltre lo schermo. */
.project-cover { --cover-larghezza: 95vw; position: relative; height: max(420px, calc(var(--cover-larghezza) * 900 / 2189)); margin: 0 2.5%; overflow: hidden; border-radius: var(--raggio-xl); background: #d9d6cb; }
.project-cover img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }

.case-chapter { display: block; padding: 105px var(--margine-pagina); border-bottom: 1px solid var(--colore-bordo-tenue); }
.case-chapter-intro { border-bottom: 0; }
.case-chapter-copy { width: min(1100px, 66%); margin-left: auto; }
.case-chapter-copy h2 { margin: 0 0 18px; font-size: var(--testo-h2); font-weight: var(--peso-semibold); line-height: 1.03; letter-spacing: -.045em; }
.case-chapter-copy p { max-width: 760px; margin: 0; color: #121414a8; font-size: var(--testo-corpo); font-weight: var(--peso-light); line-height: var(--interlinea-corpo); }
/* La fascia salvia parte a un terzo dell'immagine: l'immagine "galleggia" a cavallo tra bianco e colore */
.case-chapter-split { padding: 85px 0 var(--spazio-10); background: linear-gradient(to bottom, var(--colore-sfondo) 0, var(--colore-sfondo) 31%, var(--colore-accento-approccio) 31%, var(--colore-accento-approccio) 100%); }
.case-chapter-split .case-chapter-copy {
  width: min(1300px, 68%); margin: 62px auto 0;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 7vw;
}
.case-chapter-split .case-visual { width: min(1300px, 68%); height: auto; aspect-ratio: 8 / 5; margin: 0 auto; box-shadow: var(--ombra-media); }
.case-visual { height: min(920px, 78vh); margin: 80px 0 0; overflow: hidden; border-radius: var(--raggio-grande); background: #e6e8e4; }
.case-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }



/* Componente: progetti correlati */
.case-related { padding: 105px var(--margine-pagina) 120px; }
.case-related > h2 { margin: 25px 0 55px; font-size: clamp(50px, 5.5vw, 100px); font-weight: var(--peso-semibold); line-height: 1; letter-spacing: -.05em; }
.case-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-griglia); }
.related-card { display: block; }
.related-card > div { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: #e4e5e1; }
.related-card > div img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .8s var(--easing); }
.related-card h3 { margin: 17px 0 0; display: flex; align-items: center; gap: 10px; font-size: var(--testo-h4); font-weight: var(--peso-semibold); letter-spacing: -.02em; }
.related-card h3 .arrow { opacity: 0; transform: translate(-8px, 8px); transition: opacity .4s var(--easing), transform .4s var(--easing); }
.related-card:hover > div img { transform: scale(1.045); }
.related-card:is(:hover, :focus-visible) h3 .arrow { opacity: 1; transform: none; }

/* Componente: paginazione tra progetti */
.case-pagination { display: grid; grid-template-columns: 1fr 92px 1fr; align-items: stretch; border-top: 1px solid #12141438; border-bottom: 1px solid #12141438; }
.case-pagination a { min-height: 150px; padding: 30px var(--margine-pagina); display: flex; align-items: center; transition: background var(--durata-base) var(--easing); }
.case-pagination-project { gap: 22px; }
.case-pagination-next { justify-content: flex-end; text-align: right; }
.case-pagination-project:hover { background: var(--colore-superficie-hover); }
.case-pagination-arrow { font-size: 25px; line-height: 1; transition: transform var(--durata-base) var(--easing); }
.case-pagination-previous:hover .case-pagination-arrow { transform: translateX(-6px); }
.case-pagination-next:hover .case-pagination-arrow { transform: translateX(6px); }
.case-pagination-all { justify-content: center; padding: 0 !important; }
.case-pagination-all:hover { background: var(--colore-primario); }
.case-pagination strong { font-size: clamp(18px, 1.4vw, 25px); font-weight: var(--peso-semibold); letter-spacing: -.02em; }
.case-grid-icon { width: 17px; height: 17px; display: grid; grid-template-columns: repeat(3, 3px); grid-template-rows: repeat(3, 3px); gap: 4px; }
.case-grid-icon i { width: 3px; height: 3px; display: block; border-radius: 50%; background: var(--colore-testo); transition: background var(--durata-rapida) ease; }
.case-pagination-all:hover .case-grid-icon i { background: var(--colore-testo-su-scuro); }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .nav { gap: 16px; font-size: 14px; }
  .nav .nav-contact { padding: 0 18px; }
  .approach-copy, .principle { padding: var(--spazio-6); }
  .principle p { font-size: 26px; }
  .footer { grid-template-columns: 1.2fr .8fr 1fr 1.3fr; gap: var(--spazio-6); }
}

@media (max-width: 900px) {
  .site > main { padding-top: var(--altezza-header-mobile); }
  .header { height: var(--altezza-header-mobile); padding: 0 var(--margine-pagina-mobile); }
  .header.header-compact { height: var(--altezza-header-mobile-compatto); }
  .wordmark { width: 145px; }
  .header-compact .wordmark { width: 132px; }
  .menu { display: block; }
  .nav {
    position: absolute; inset: var(--altezza-header-mobile) 0 auto;
    padding: 25px var(--margine-pagina-mobile) 35px;
    flex-direction: column; align-items: flex-start; gap: 20px;
    font-size: 22px; background: var(--colore-sfondo);
    box-shadow: 0 24px 40px #0000000f;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .3s var(--easing), transform .3s var(--easing), visibility .3s;
  }
  .header-compact .nav { inset-block-start: var(--altezza-header-mobile-compatto); }
  .nav-open { opacity: 1; visibility: visible; transform: none; }
  .nav .nav-contact { font-size: var(--testo-ui); padding: 0 var(--spazio-5); }
  .nav-divider { width: 100%; height: 1px; margin: 6px 0; }
  .language-switch { font-size: 14px; }

  .hero { padding-top: 38px; }
  .hero h1 { font-size: clamp(42px, 11vw, 68px); }
  .hero > p { font-size: var(--testo-corpo); }
  .showcase { height: 125vh; }
  .showcase-stage { height: 76vh; top: 12vh; }

  .approach-grid { grid-template-columns: 1fr 1fr; height: auto; }
  .approach-copy { grid-column: 1 / -1; min-height: 420px; }
  .approach-image, .approach-stack { height: 560px; }
  .work-card.offset { padding-top: 80px; }
  .disciplines { grid-template-columns: 1fr 1fr; }
  .discipline:first-child { grid-column: 1 / -1; }
  .discipline:first-child .discipline-image { aspect-ratio: 16 / 9; }

  .footer { grid-template-columns: 1fr 1fr; }
  .payoff { justify-content: flex-start; }
  .payoff > div { text-align: left; }
  .legal { flex-direction: column; }

  .work-hero { min-height: calc(62vh - var(--altezza-header-mobile)); padding: 7vh var(--margine-pagina-mobile); }
  .work-hero h1 { font-size: clamp(70px, 14vw, 120px); }
  .matrix-section { padding-inline: var(--margine-pagina-mobile); }
  .matrix-toolbar { flex-direction: column-reverse; align-items: flex-start; gap: var(--spazio-4); }
  .matrix-filters { justify-content: flex-start; }
  .matrix-grid, .matrix-column { gap: var(--spazio-4); }

  .project-hero { min-height: calc(82vh - var(--altezza-header-mobile)); padding: 45px var(--margine-pagina-mobile) 60px; }
  .project-hero-meta { grid-template-columns: 1fr; gap: var(--spazio-6); }
  .project-hero-meta dl { max-width: 520px; }
  .project-hero h1 { font-size: clamp(52px, 9vw, 80px); }
  .project-cover { --cover-larghezza: 94vw; height: max(56vh, calc(var(--cover-larghezza) * 900 / 2189)); margin-inline: 3%; }
  .case-chapter { padding: 90px var(--margine-pagina-mobile); }
  .case-chapter-copy { width: min(780px, 82%); }
  .case-chapter-split { padding: 70px 0 90px; }
  .case-chapter-split .case-visual, .case-chapter-split .case-chapter-copy { width: 84%; }
  .case-chapter-split .case-chapter-copy { gap: 5vw; }
  .case-visual { height: 62vh; }
  .case-related { padding: 90px var(--margine-pagina-mobile); }
  .case-related-grid { grid-template-columns: 1fr 1fr; }
  .case-related-grid > :last-child { display: none; }
}

@media (max-width: 600px) {
  .hero { padding-left: var(--margine-pagina-mobile); padding-right: var(--margine-pagina-mobile); }
  .hero h1 br, .desktop-break { display: none; }
  .hero-actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
  .pill { min-height: 48px; padding: 0 28px; font-size: 14px; }
  .pill-large { min-height: 56px; padding-inline: var(--spazio-6); }
  .play { width: 74px; height: 74px; }
  .play img { width: 26px; height: 26px; }
  .video-overlay { padding: 20px; }
  .video-frame { width: 100%; border-radius: 10px; }
  .video-close { top: 18px; right: 18px; }

  .section { padding: var(--spazio-9) 5% 0; }
  .section-title { margin-bottom: 40px; font-size: 38px; }
  .section-title br { display: none; }
  .approach-grid { display: flex; flex-direction: column; }
  .approach-copy { min-height: 400px; padding: 28px; }
  .approach-image { height: min(120vw, 520px); }
  .approach-stack { height: auto; grid-template-rows: auto auto; }
  .team-image { aspect-ratio: 3 / 2; }
  .principle { min-height: 260px; }
  .principle { padding: 28px; }
  .principle p { font-size: 25px; }
  .work-grid { grid-template-columns: 1fr; gap: 52px; }
  .work-card.offset { padding-top: 0; }
  .work-card h3 { font-size: var(--testo-h4); }
  .work-card h3 .arrow { opacity: 1; transform: none; }
  .disciplines { grid-template-columns: 1fr; }
  .discipline:first-child .discipline-image { aspect-ratio: 4 / 3; }
  .clients { padding: 70px 0; }
  .client-set { gap: 35px; padding-right: 35px; }
  .client-set img { width: 120px; height: 70px; }
  .final-panel { padding: 95px 8% 105px; }
  .final-panel h2 { font-size: 42px; }
  .final-panel h2 br { display: none; }
  .final-copy { font-size: var(--testo-base); }
  .footer { grid-template-columns: 1fr; padding-top: 52px; }
  .payoff { justify-content: space-between; }
  .legal { grid-column: 1; line-height: 1.7; }

  .work-hero { min-height: 46vh; }
  .work-hero h1 { font-size: clamp(56px, 18vw, 82px); }
  .matrix-section { padding-top: 30px; padding-bottom: 100px; }
  .matrix-toolbar { margin-bottom: 36px; }
  /* Filtri su una riga scorrevole: su mobile sette pill su tre righe spingono giù la griglia */
  .matrix-filters {
    flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 2 * var(--margine-pagina-mobile));
    margin-inline: calc(-1 * var(--margine-pagina-mobile)); padding: 2px var(--margine-pagina-mobile) 6px;
    scrollbar-width: none; scroll-snap-type: x proximity;
  }
  .matrix-filters::-webkit-scrollbar { display: none; }
  .filter-button { flex: none; min-height: 38px; padding-inline: 15px; scroll-snap-align: start; }
  .matrix-grid, .matrix-column { gap: var(--gap-griglia); }
  .matrix-card .matrix-media { aspect-ratio: 4 / 3 !important; border-radius: 15px; }
  /* Niente hover su touch: titolo e freccia sempre visibili */
  .matrix-media::after, .matrix-title, .matrix-open { opacity: 1; transform: none; }
  .matrix-title { left: 20px; right: 74px; bottom: 20px; }
  .matrix-title h2 { font-size: 28px; }
  .matrix-open { width: 44px; height: 44px; right: 16px; bottom: 16px; }

  .project-hero { min-height: 70vh; padding: 35px var(--margine-pagina-mobile) 45px; }
  /* "Smartweight" è la parola più lunga: a 12vw sta nello schermo anche a 320px */
  .project-hero h1 { margin: 40px 0; font-size: clamp(38px, 12vw, 54px); overflow-wrap: break-word; }
  .project-hero-meta > p { font-size: 22px; }
  .project-hero-meta dl { grid-template-columns: 1fr 1fr; gap: 20px; }
  .project-cover { --cover-larghezza: 100vw; height: max(62vh, calc(var(--cover-larghezza) * 900 / 2189)); margin-inline: 0; border-radius: 0; }
  .case-chapter { padding: 75px var(--margine-pagina-mobile); }
  .case-chapter-copy { width: 100%; }
  .case-chapter-copy h2 { font-size: 38px; }
  .case-chapter-split { padding: 55px 0 80px; background: linear-gradient(to bottom, var(--colore-sfondo) 0, var(--colore-sfondo) 22%, var(--colore-accento-approccio) 22%, var(--colore-accento-approccio) 100%); }
  .case-chapter-split .case-visual { width: 88%; }
  .case-chapter-split .case-chapter-copy { width: 88%; margin-top: 45px; grid-template-columns: 1fr; gap: var(--spazio-5); }
  .case-visual { height: 55vh; margin-top: 40px; border-radius: 15px; }
  .case-related { padding: 80px var(--margine-pagina-mobile); }
  .case-related > h2 { font-size: 44px; }
  .case-related-grid { grid-template-columns: 1fr; gap: 45px; }
  .case-related-grid > :last-child { display: block; }
  .related-card h3 .arrow { opacity: 1; transform: none; }
  .case-pagination { grid-template-columns: 1fr 64px 1fr; }
  .case-pagination a { min-height: 110px; padding: 20px var(--margine-pagina-mobile); }
  .case-pagination-project { gap: 10px; }
  .case-pagination strong { font-size: 15px; }
  .case-pagination-arrow { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .matrix-card.reveal { opacity: 1; transform: none; clip-path: none; }
  .showcase { height: auto; }
  .showcase-stage { position: relative; height: 80vh; clip-path: none; }
  .showcase-slides { transform: none; }
  .client-track { animation: none; }
}