/* ════════════════════════════════════════════════════════════
   SET DESIGN SRL · style.css

   01 · Font                  12 · Impatto
   02 · Reset e token         13 · Clienti
   03 · Bottoni e link        14 · Processo
   04 · Cursore               15 · Expertise
   05 · Logo                  16 · Call to action
   06 · Topbar                17 · Contatto
   07 · Bottom nav            18 · Pagine di testo (privacy, 404)
   08 · Ticker                19 · Gallery e viewer
   09 · Comparse              20 · Footer
   10 · Studio                21 · Titoli a contorno
   11 · Hero e mosaico        22 · Keyframes
                              23 · Responsive
                              24 · Stati dei bottoni
════════════════════════════════════════════════════════════ */


/* ── 01 · FONT ──────────────────────────────────────────────
   Tutti serviti dal sito. Inter e Bebas Neue: file e unicode-range di Google Fonts,
   licenze in assets/fonts/OFL-*.txt. Inter e' variabile: un file per tutti i pesi. */

@font-face {
  font-family: "Xtreem2";
  src: url("assets/fonts/Xtreem2.woff2") format("woff2");
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "OLRoundGothic";
  src: url("assets/fonts/OLRoundGothic.woff2") format("woff2");
  font-weight: bold; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/bebas-neue-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/bebas-neue-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;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("assets/fonts/inter-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("assets/fonts/inter-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;
}


/* ── 02 · RESET E TOKEN ─────────────────────────────────── */

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

:root {
  /* spaziatura: scala 4px, ritmo 8px */
  --s-1:   4px;   --s-2:   8px;   --s-3:  12px;   --s-4:  16px;
  --s-6:  24px;   --s-8:  32px;   --s-12: 48px;   --s-16: 64px;
  --s-24: 96px;   --s-32: 128px;

  /* tipografia: 6 step, rapporto 1.250; i titoli display usano clamp() */
  --t-xs:  .64rem;   --t-sm:   .8rem;    --t-md:  1rem;
  --t-lg: 1.25rem;   --t-xl: 1.563rem;   --t-2xl: 1.953rem;

  --f-script:  "Xtreem2", cursive;          /* solo logo: "Set"    */
  --f-gothic:  "OLRoundGothic", sans-serif; /* solo logo: "design" */
  --f-display: "Bebas Neue", sans-serif;
  --f-body:    "Inter", sans-serif;

  /* colore: ruoli semantici */
  --surface:           #121313;
  --on-surface:        #F5F4F0;
  --on-surface-muted:  rgba(245,244,240,.55);   /* testo secondario, minimo AA sulle superfici */
  --surface-soft:      #1a1b1b;
  --surface-raised:    #1e1f1f;
  --on-surface-raised: #F5F4F0;
  --accent:            #FF6044;
  --on-accent:         #121313;
  --accent-hover:      #e14833;
  --accent-line:       rgba(255,96,68,.35);     /* sottolineatura dei link */
  --accent-subtle:     rgba(255,96,68,.08);     /* pressione */
  --border:            rgba(255,255,255,.09);
  --danger:            var(--accent);   /* un secondo rosso non si distinguerebbe: l'errore ha testo e barra laterale */
  --focus:             #FF6044;
  --focus-w:           2px;
  --focus-offset:      2px;

  /* elevazione: in dark mode si sale di superficie, non di ombra */
  --e-0: var(--surface);
  --e-1: var(--surface-soft);
  --e-2: var(--surface-raised);

  --r-none: 0;
  --r-full: 50%;

  --nav-h:    64px;
  --px:       var(--s-12);
  --measure:  65ch;
  --hit:      44px;   /* altezza minima al tocco */
  --hit-min:  24px;   /* area minima di ogni target, WCAG 2.5.8 */
  --bnav-h:   56px;
  --ease:     cubic-bezier(.23,1,.32,1);
  --dur-fast: 150ms;
  --dur-slow: 400ms;
}

/* scroll-padding: ancore e focus da tastiera non finiscono sotto la topbar */
html  { scroll-behavior: smooth; font-size: 17px; scroll-padding-top: calc(var(--nav-h) + var(--s-2)) }
body  { background: var(--surface); color: var(--on-surface); font-family: var(--f-body); overflow-x: hidden }
img   { display: block; max-width: 100% }
a     { text-decoration: none }
::selection { background: var(--accent); color: var(--surface) }

.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 }
.gallery-page { padding-top: var(--nav-h) }

:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset) }


/* ── 03 · BOTTONI E LINK ────────────────────────────────────
   active, disabled e loading nella sezione 24. --btn-ink: colore dello spinner. */

.btn { position: relative; --btn-ink: var(--on-surface); --hit-h: var(--hit) }

.btn-primary {
  background: var(--accent); color: var(--on-accent); border: none; cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  --btn-ink: var(--on-accent);
}
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--accent-hover); transform: translateY(-1px) }

.btn-tertiary {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: .78rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent);
  --btn-ink: var(--accent);
}
/* icona Lucide dopo il testo, stesso colore; al passaggio si sposta verso dove punta */
.btn-icon {
  flex-shrink: 0; width: 1.25em; height: 1.25em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease);
}
.btn-tertiary:hover .btn-icon,
.btn-tertiary:focus-visible .btn-icon    { transform: translateX(var(--s-1)) }
.btn-tertiary:hover .btn-icon-ne,
.btn-tertiary:focus-visible .btn-icon-ne { transform: translate(var(--s-1), calc(var(--s-1) * -1)) }
.exp-more-link .btn-icon { width: 1em; height: 1em; margin-left: var(--s-1); vertical-align: -.125em }

/* link dentro il testo */
.exp-more-link,
.cf-privacy a,
.cf-status a,
.text-page :is(p, li) a { color: var(--accent); border-bottom: 1px solid var(--accent-line); transition: border-color var(--dur-fast) }
.exp-more-link:hover,
.exp-more-link:focus-visible,
.cf-privacy a:hover,
.cf-privacy a:focus-visible,
.cf-status a:hover,
.cf-status a:focus-visible,
.text-page :is(p, li) a:hover,
.text-page :is(p, li) a:focus-visible { border-bottom-color: var(--accent) }

/* area di tocco: lo pseudo-elemento allarga la zona cliccabile senza cambiare la resa */
.topbar-nav > li > a, .hero-scroll { --hit-h: var(--hit) }
.hero-scroll, .topbar-logo a, .ci-value a, .fc-links a, .footer-links a,
.exp-more-link, .cf-privacy a, .cf-status a, .text-page :is(p, li) a { position: relative }
.btn::before,
.topbar-nav > li > a::before,
.hero-scroll::before,
.topbar-logo a::before,
.ci-value a::before,
.fc-links a::before,
.footer-links a::before,
.exp-more-link::before,
.cf-privacy a::before,
.cf-status a::before,
.text-page :is(p, li) a::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: max(100%, var(--hit-min)); height: max(100%, var(--hit-h, var(--hit-min)));
  transform: translate(-50%, -50%);
}


/* ── 04 · CURSORE ───────────────────────────────────────────
   script.js aggiunge .has-cursor al primo movimento del mouse, solo senza touch:
   senza JavaScript resta il cursore del sistema. La posizione sta nella proprieta'
   translate: dentro transform verrebbe moltiplicata da scale. */

#cur, #cur2 { display: none; position: fixed; top: 0; left: 0; border-radius: var(--r-full); pointer-events: none }
.has-cursor #cur, .has-cursor #cur2 { display: block }
body.has-cursor { cursor: none }
#cur  { width: 44px; height: 44px; margin: -22px 0 0 -22px; z-index: 9999; background: var(--accent); border: 1px solid var(--accent); scale: .136; transition: scale .25s var(--ease), background-color .25s var(--ease) }
#cur2 { width: 28px; height: 28px; margin: -14px 0 0 -14px; z-index: 9998; border: 1px solid var(--accent-line); transition: opacity .14s ease }
#cur.expanded          { scale: 1; background-color: transparent }
#cur.expanded ~ #cur2  { opacity: 0 }


/* ── 05 · LOGO ──────────────────────────────────────────── */

.logo-text   { display: inline-flex; align-items: baseline; gap: 2px; line-height: 1; cursor: pointer }
.logo-set    { font-family: var(--f-script); font-size: 1.55rem; color: var(--on-surface); font-weight: 400; letter-spacing: -.01em; line-height: 1 }
.logo-design { font-family: var(--f-gothic); font-size: 1.05rem; color: var(--on-surface); font-weight: bold; letter-spacing: .06em; text-transform: lowercase }
.logo-r      { font-size: .45em; vertical-align: super; color: rgba(245,244,240,.38); font-weight: 400; font-family: var(--f-body) }


/* ── 06 · TOPBAR ────────────────────────────────────────── */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--s-8); align-items: center;
  padding: 0 var(--px);
  border-bottom: 1px solid transparent;
  transition: transform .5s var(--ease), background .4s, border-color .4s;
}
.topbar.solid  { background: rgba(18,19,19,.97); border-color: var(--border) }
.topbar.hidden { transform: translateY(-100%) }
.topbar:focus-within { transform: none }   /* mai nascosta mentre contiene il focus */
.topbar-logo a { color: inherit }

/* colonne laterali uguali: la voce centrale sta a meta' pagina */
.topbar-nav { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--s-8); align-items: center; list-style: none }
.topbar-nav > li:first-child { justify-self: end }
.topbar-nav > li:last-child  { justify-self: start }
.topbar-nav > li > a {
  display: flex; align-items: center; position: relative; padding-bottom: 2px;
  font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap;
  color: rgba(245,244,240,.5); transition: color var(--dur-fast);
}
.topbar-nav > li > a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease) }
.topbar-nav > li > a:hover,
.topbar-nav > li > a:focus-visible,
.topbar-nav > li > a[aria-current="page"] { color: var(--on-surface) }
.topbar-nav > li > a:hover::after,
.topbar-nav > li > a:focus-visible::after,
.topbar-nav > li > a[aria-current="page"]::after { transform: none }

.topbar-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--s-4) }

/* niente overflow:hidden sul gruppo: taglierebbe l'anello di focus e l'area di tocco */
.lang-toggle { display: flex; align-items: center; border: 1px solid rgba(255,255,255,.18); font-family: var(--f-body) }
.lang-toggle:hover { border-color: var(--accent) }
.lt-opt { font-family: inherit; font-size: .7rem; font-weight: 600; letter-spacing: .2em; color: rgba(245,244,240,.5); padding: var(--s-2) var(--s-3); border: none; background: transparent; cursor: pointer; transition: color var(--dur-fast), background var(--dur-fast) }
.lt-opt:hover,
.lt-opt:focus-visible { color: var(--on-surface) }
.lt-opt[aria-pressed="true"] { color: var(--surface); background: var(--accent) }
.lt-sep { font-size: .6rem; color: rgba(255,255,255,.15) }

.topbar-cta { font-size: .75rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; padding: var(--s-3) var(--s-6) }


/* ── 07 · BOTTOM NAV ────────────────────────────────────────
   Solo sotto i 768px (sezione 23). Sfondo opaco: sotto non deve intravedersi il testo. */

.bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
  height: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--surface); border-top: 1px solid var(--border);
}
.bottom-nav a {
  flex: 1; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .04em;
  color: var(--on-surface-muted); transition: color var(--dur-fast);
}
.bottom-nav a::after { content: ""; position: absolute; top: -1px; left: 25%; right: 25%; height: 2px; background: var(--on-surface); opacity: 0; transition: opacity var(--dur-fast) }
.bottom-nav a:hover,
.bottom-nav a[aria-current] { color: var(--on-surface) }
.bottom-nav a[aria-current]::after { opacity: 1 }
.bottom-nav .bn-cta { color: var(--accent) }
.bottom-nav .bn-cta::after { background: var(--accent) }
.bottom-nav a:active { background: var(--accent-subtle); transition-duration: 0s }
.bottom-nav a:focus-visible { outline-offset: calc(var(--focus-w) * -1) }   /* sul bordo dello schermo: anello interno */


/* ── 08 · TICKER ────────────────────────────────────────── */

.ticker { overflow: hidden; background: var(--accent); padding: var(--s-3) 0 }
.ticker-track { display: flex; white-space: nowrap; animation: tickeranim 24s linear infinite }
.ticker-track:hover { animation-play-state: paused }
.ticker-item        { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: .22em; color: var(--surface); padding: 0 var(--s-12); opacity: .8 }
.ticker-item.accent { opacity: 1 }
.ticker-sep         { color: rgba(18,19,19,.3); margin: 0 var(--s-1) }

/* animazioni continue ferme fuori dallo schermo: la classe la mette script.js */
.is-offscreen :is(.ticker-track, .cm-track, .mosaic-track) { animation-play-state: paused }


/* ── 09 · COMPARSE ──────────────────────────────────────── */

.reveal    { opacity: 0; transform: translateY(32px); transition: opacity .95s var(--ease), transform .95s var(--ease) }
.reveal.in { opacity: 1; transform: none }
/* il focus puo' arrivare prima dell'IntersectionObserver: mai invisibile con il focus */
.reveal:focus-within { opacity: 1; transform: none; transition: none }
.d1 { transition-delay: .08s }
.d2 { transition-delay: .16s }
.d3 { transition-delay: .24s }
.d4 { transition-delay: .32s }


/* ── 10 · STUDIO ────────────────────────────────────────────
   Versione ferma (anche con "riduci movimento"): frase, poi foto con il testo in basso.
   Il movimento legato allo scroll sta sotto, in @supports. */

#about { --lead: clamp(3.5rem,10.5vw,12rem) }
.studio       { display: grid; grid-template-columns: minmax(0,1fr) }
.studio-stage { display: contents }   /* da ferma, frase e foto sono righe della griglia */
.studio-lead  { grid-row: 1; display: flex; justify-content: center; padding: var(--s-24) var(--px) var(--s-16); overflow-x: clip }
.studio-lead p  { font-size: var(--lead); text-align: center }
.studio-lead em { white-space: nowrap }
.studio-media { grid-row: 2; grid-column: 1; position: relative; min-height: 100vh; overflow: clip }
.studio-media picture { position: absolute; inset: 0 }
.studio-media img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75) saturate(.85) }
.studio-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--surface), rgba(18,19,19,0) 15%, rgba(18,19,19,0) 80%, var(--surface)),
    linear-gradient(to right, rgba(18,19,19,.85), rgba(18,19,19,.75) 40%, rgba(18,19,19,.1) 75%);
}
.studio-body {
  grid-row: 2; grid-column: 1; align-self: end; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--s-6);
  padding: var(--s-16) max(var(--px), (100% - 1280px) / 2) var(--s-24);
}
.studio-body > * { grid-column: 1 / 6 }
.studio-body p { font-size: 1rem; font-weight: 300; color: rgba(245,244,240,.65); line-height: 1.8; max-width: var(--measure); margin-bottom: var(--s-6) }
.studio-body p:last-child { margin-bottom: 0 }

/* i selettori partono da .studio per vincere sulle regole del telefono, che vengono dopo */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* inset 0: senza, la timeline esclude lo scroll-padding e le animazioni partono prima che il palco si fermi */
    .studio         { display: block; view-timeline: --studio block; view-timeline-inset: 0 }
    .studio .studio-stage { display: block; position: sticky; top: 0; height: 100vh; overflow: clip }
    .studio .studio-lead  { position: absolute; inset: 0; z-index: 1; align-items: center; padding: 0 var(--px) }
    .studio .studio-lead p {
      animation: studioLeadGrow ease-in both, studioLeadFade linear both;
      animation-timeline: --studio;
      animation-range: contain 0% contain 55vh, contain 20vh contain 55vh;
    }
    .studio .studio-media {
      position: absolute; inset: 0; min-height: 0;
      animation: studioMediaIn linear both;
      animation-timeline: --studio;
      animation-range: contain 20vh contain 55vh;
    }
    .studio .studio-body { margin-top: 60vh }
    @media (max-width: 768px) {
      .studio .studio-body { padding-bottom: calc(var(--s-16) + var(--bnav-h)) }
    }
  }
}
@keyframes studioLeadGrow { to { scale: 2.5 } }
@keyframes studioLeadFade { to { opacity: 0 } }
@keyframes studioMediaIn { from { opacity: 0 } }


/* ── 11 · HERO E MOSAICO ────────────────────────────────── */

.hero { height: 100svh; display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr; gap: 2px; position: relative; overflow: hidden; background: var(--surface) }
.hero-col { position: relative; overflow: hidden }
.hero-col img { width: 100%; height: 100%; object-fit: cover; object-position: center center; filter: brightness(.42) saturate(.8); transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow) }
.hero-col:hover img { transform: scale(1.03); filter: brightness(.58) saturate(1) }

.hero-center { position: relative; background: var(--surface); z-index: 5 }
.hero-video  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.32) saturate(.85); z-index: 0; pointer-events: none }
.hero-center::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(255,96,68,.07) 0%, transparent 68%); z-index: 1; pointer-events: none }

.hero-title-block { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; white-space: nowrap; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--s-4) }
.hero-logo              { display: flex; align-items: baseline; gap: var(--s-1); line-height: 1 }
.hero-logo .logo-set    { font-size: 5rem;   animation: fadeIn 1.2s var(--ease) both }
.hero-logo .logo-design { font-size: 3.2rem; animation: fadeIn 1.4s var(--ease) .08s both }
.hero-logo .logo-r      { font-size: .9rem }
.hero-line { font-size: .62rem; font-weight: 600; letter-spacing: .55em; text-transform: uppercase; color: var(--accent); animation: fadeIn 1.6s var(--ease) .25s both }

.hero-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--s-8) var(--px); display: flex; justify-content: flex-end; align-items: flex-end; z-index: 10 }

.hero-scroll       { display: inline-flex; flex-direction: column; align-items: center; gap: var(--s-3); cursor: pointer }
.hero-scroll-label { font-size: .62rem; letter-spacing: .38em; text-transform: uppercase; color: rgba(245,244,240,.7); transition: color var(--dur-fast) }
.hero-scroll:hover .hero-scroll-label,
.hero-scroll:focus-visible .hero-scroll-label { color: var(--accent) }
.hero-scroll-chevrons           { position: relative; width: 20px; height: 24px }
.hero-scroll-chevrons .chev      { position: absolute; left: 0; width: 20px; height: 12px; overflow: visible }
.hero-scroll-chevrons .chev path { fill: none; stroke: rgba(245,244,240,.7); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-fast) }
.hero-scroll:hover .chev path,
.hero-scroll:focus-visible .chev path { stroke: var(--accent) }
.chev1 { animation: scrollChev 1.6s var(--ease) infinite }
.chev2 { top: 7px; animation: scrollChev 1.6s var(--ease) infinite .22s }

.hero-corner    { position: absolute; font-size: .54rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(245,244,240,.18) }
.hero-corner.tr { top: calc(var(--nav-h) + var(--s-4)); right: var(--px); text-align: right }

/* mosaico: script.js aggiunge la copia che chiude il giro */
.mosaic       { overflow: hidden; background: var(--surface-soft); pointer-events: none; user-select: none }
.mosaic-track { display: flex; width: max-content; gap: 2px; animation: mosaicScroll 25s linear infinite; will-change: transform; backface-visibility: hidden; transform: translate3d(0,0,0) }
.mosaic-item  { flex: 0 0 auto; position: relative; overflow: hidden; height: 320px }
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.58) saturate(.85) }
.m-cap      { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--s-4); background: linear-gradient(transparent, rgba(18,19,19,.88)) }
.m-cap h4   { font-family: var(--f-display); font-size: 1rem; color: var(--on-surface); letter-spacing: .08em; margin: 0 0 2px }
.m-cap span { font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent) }
.mi-1  { width: 500px } .mi-2  { width: 300px } .mi-3  { width: 380px } .mi-4  { width: 260px } .mi-5  { width: 360px }
.mi-6  { width: 480px } .mi-7  { width: 220px } .mi-8  { width: 440px } .mi-9  { width: 300px } .mi-10 { width: 360px }

.st-h2    { font-family: var(--f-display); font-size: clamp(3.5rem,6vw,6.5rem); line-height: .95; letter-spacing: .02em; color: var(--on-surface); margin-bottom: var(--s-8) }
.st-h2 em { color: var(--accent); font-style: normal }


/* ── 12 · IMPATTO ──────────────────────────────────────── */

.impact       { background: var(--surface) }
.impact-media { position: relative; overflow: clip; min-height: 88vh; display: flex; align-items: flex-end }
.impact-media picture { position: absolute; inset: 0 }
.impact-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; filter: brightness(.6) saturate(.85) }
.impact-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--surface), rgba(18,19,19,0) 18%),
    linear-gradient(to top, var(--surface) 0%, rgba(18,19,19,.85) 32%, rgba(18,19,19,.3) 70%, rgba(18,19,19,.15) 100%);
}
.impact-body {
  position: relative; z-index: 1; width: 100%;
  padding: var(--s-32) max(var(--px), (100% - 1280px) / 2) var(--s-16);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,22rem); gap: var(--s-12); align-items: end;
}
.impact-h    { font-family: var(--f-display); font-size: clamp(3.5rem,9vw,9rem); line-height: .88; letter-spacing: .02em; color: var(--on-surface) }
.impact-h em { color: var(--accent); font-style: normal }
.ih   { display: block; width: fit-content }
.ih-2 { margin-left: 1.25em }
.ih-3 { margin-left: 2.5em }
.impact-side p { font-size: 1rem; font-weight: 300; line-height: 1.7; color: rgba(245,244,240,.8); margin-bottom: var(--s-6) }

.impact-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-8);
  padding: var(--s-8) max(var(--px), (100% - 1280px) / 2) var(--s-24);
}
.impact-stats > div { border-top: 1px solid var(--border); padding-top: var(--s-6) }
.sp-n { font-family: var(--f-display); font-size: clamp(3rem,5vw,4.5rem); color: var(--accent); line-height: 1 }
.sp-l { font-size: .65rem; letter-spacing: .25em; text-transform: uppercase; color: var(--on-surface-muted); margin-top: var(--s-2) }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .impact-media img {
      animation: impactZoom linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    .ih {
      animation: wordDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    .ih-1 { --drift: -4vw }
    .ih-2 { --drift: 8vw }
    .ih-3 { --drift: 16vw }
  }
}
@keyframes impactZoom { from { transform: scale(1.12) } to { transform: scale(1) } }
@keyframes wordDrift  { from { transform: translateX(var(--drift, 0)) } to { transform: translateX(0) } }


/* ── 13 · CLIENTI ───────────────────────────────────────── */

.clients { overflow: hidden }
.clients-header    { padding: var(--s-16) var(--px) var(--s-12); display: flex; justify-content: space-between; align-items: flex-end; overflow-x: clip }
.clients-header h2 { font-family: var(--f-display); font-size: clamp(3rem,5vw,5.5rem); line-height: .88; letter-spacing: .03em; color: var(--on-surface) }
.clients-header p  { font-size: 1rem; font-weight: 300; color: rgba(245,244,240,.6); max-width: 320px; line-height: 2; text-align: right }

/* script.js aggiunge la copia (.cm-dup) che chiude il giro e calcola la durata dalla lunghezza della fila */
.clients-marquee { display: flex; flex-direction: column; padding: var(--s-2) 0 var(--s-1); border-top: 1px solid var(--border) }
.cm-row { overflow: hidden; white-space: nowrap; padding: var(--s-3) 0; position: relative }
.cm-row::before,
.cm-row::after  { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none }
.cm-row::before { left: 0;  background: linear-gradient(to right, var(--surface), transparent) }
.cm-row::after  { right: 0; background: linear-gradient(to left,  var(--surface), transparent) }
.cm-track        { display: inline-flex; align-items: center; list-style: none; will-change: transform; animation: cmScroll 60s linear infinite }
.cm-track.cm-rev { animation-direction: reverse }
.clients-marquee:hover .cm-track { animation-play-state: paused }
.cm-track li    { display: flex; align-items: center }
.cm-item { font-family: var(--f-display); font-size: clamp(1.6rem,3vw,2.8rem); letter-spacing: .04em; color: rgba(245,244,240,.22); padding: 0 var(--s-1); transition: color var(--dur-fast); display: inline-block }
a.cm-item:hover { color: var(--accent) }
/* separatore anche dopo l'ultimo nome; "/ ''" lo toglie dalla lettura degli screen reader */
.cm-track li::after { content: "\2022"; content: "\2022" / ""; color: var(--accent); opacity: .4; font-size: 1rem; margin: 0 var(--s-6) }


/* ── 14 · PROCESSO ──────────────────────────────────────── */

.process       { padding: var(--s-32) var(--px) }
.process-inner { max-width: 860px; margin: 0 auto }
.process-head  { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: var(--s-24); overflow-x: clip }
.process-head h2 { font-family: var(--f-display); font-size: clamp(3rem,5vw,5rem); letter-spacing: .03em; color: var(--on-surface) }
.process-head p  { font-size: .95rem; font-weight: 300; color: var(--on-surface-muted); max-width: 260px; text-align: right; line-height: 1.85 }

/* linea e pallini condividono le misure; --tl-end (centro dell'ultimo pallino) lo misura script.js */
.process-timeline {
  --tl-pad:  var(--s-12);
  --tl-line: 6px;
  --tl-top:  12px;
  --dot:     14px;
  --tl-end:  0px;
  position: relative; padding-left: var(--tl-pad);
}
.process-timeline::before,
.tl-fill { position: absolute; left: var(--tl-line); top: var(--tl-top); bottom: var(--tl-end); width: 1px }
.process-timeline::before { content: ""; background: rgba(245,244,240,.1) }
.tl-fill { z-index: 1; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .7s var(--ease) }

.pstep            { position: relative; padding-bottom: var(--s-16); opacity: 0; transform: translateX(16px); transition: opacity .6s var(--ease), transform .6s var(--ease) }
.pstep:last-child { padding-bottom: 0 }
.pstep.lit        { opacity: 1; transform: translateX(0) }
.pstep-dot { position: absolute; left: calc(var(--tl-line) + .5px - var(--tl-pad)); top: calc(var(--tl-top) - var(--dot) / 2); width: var(--dot); height: var(--dot); margin-left: calc(var(--dot) / -2); border-radius: var(--r-full); border: 1px solid rgba(245,244,240,.2); background: var(--surface); z-index: 2; transition: border-color .5s, background .5s }
.pstep-dot::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 18px rgba(255,96,68,.5); opacity: 0; transition: opacity .5s }
.pstep.lit .pstep-dot        { border-color: var(--accent); background: var(--accent) }
.pstep.lit .pstep-dot::after { opacity: 1 }

.ps-num             { font-family: var(--f-display); font-size: 2.8rem; color: rgba(245,244,240,.06); line-height: 1; margin-bottom: var(--s-4); transition: color .7s var(--ease) }
.pstep.lit .ps-num  { color: var(--accent) }
.ps-label           { font-size: .7rem; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: rgba(245,244,240,.22); margin-bottom: var(--s-3); display: block; transition: color .5s }
.pstep.lit .ps-label { color: var(--on-surface) }
.ps-text            { font-size: .95rem; font-weight: 300; line-height: 2; color: rgba(245,244,240,.3); transition: color .6s }
.pstep.lit .ps-text { color: rgba(245,244,240,.65) }


/* ── 15 · EXPERTISE ─────────────────────────────────────── */

/* clip e non hidden: contiene la deriva del titolo senza fermare lo sticky */
.expertise       { padding: var(--s-32) var(--px) var(--s-16); overflow-x: clip }
.expertise-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: var(--s-16); align-items: start }
.expertise-head  { position: sticky; top: calc(var(--nav-h) + var(--s-12)) }
.expertise-head h2 { font-size: clamp(2.8rem,5vw,5rem); margin-bottom: var(--s-6) }
.expertise-head p  { font-size: 1rem; font-weight: 300; color: rgba(245,244,240,.6); max-width: 32ch; line-height: 1.7; text-wrap: pretty }
.expertise-head .exp-cities { margin-top: var(--s-4); max-width: none; font-size: var(--t-xs); font-weight: 600; letter-spacing: .3em; line-height: 1.8; text-transform: uppercase; color: var(--on-surface-muted); text-wrap: balance }
.exp-list     { border-top: 1px solid var(--border) }
.exp-row      { display: grid; gap: var(--s-1); padding: var(--s-6) 0; border-bottom: 1px solid var(--border) }
.exp-row-name { font-family: var(--f-display); font-size: clamp(1.5rem,2.2vw,2.1rem); line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; color: var(--on-surface) }
.exp-row-desc { font-size: .95rem; font-weight: 300; color: var(--on-surface-muted); line-height: 1.6; max-width: var(--measure) }
.exp-row--more .exp-row-name { color: var(--accent) }
.exp-more-link { white-space: nowrap }
.expertise-cta { margin-top: var(--s-8) }


/* ── 16 · CALL TO ACTION ────────────────────────────────── */

.full-cta    { min-height: 72vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center }
.full-cta-bg { position: absolute; inset: 0; overflow: hidden }
.full-cta-bg img,
.full-cta-bg video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.16) saturate(1.4) }
.full-cta-accent   { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(255,96,68,.14) 0%, transparent 65%) }

.fcc       { position: relative; z-index: 2; text-align: center; padding: var(--s-12) }
.fcc-eye   { font-size: .68rem; letter-spacing: .62em; text-transform: uppercase; color: rgba(245,244,240,.45); margin-bottom: var(--s-8); display: block }
.fcc h2    { font-family: var(--f-display); font-size: clamp(5rem,14vw,13rem); color: var(--on-surface); line-height: .8; letter-spacing: .02em; margin-bottom: var(--s-12) }
.fcc h2 em { color: var(--accent); font-style: normal; display: block }

.cta-btn { display: inline-block; padding: var(--s-4) var(--s-16); font-size: .75rem; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease) }
.cta-btn:hover,
.cta-btn:focus-visible { background: var(--on-surface); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(255,96,68,.35) }


/* ── 17 · CONTATTO ──────────────────────────────────────── */

.contact      { display: grid; grid-template-columns: 1fr 1fr }
.contact-info { padding: var(--s-24) var(--s-16); border-right: 1px solid var(--border) }
.ci-items     { display: flex; flex-direction: column }
.ci-item      { display: flex; gap: var(--s-6); align-items: flex-start; padding: var(--s-6) 0; border-bottom: 1px solid var(--border) }
/* icone Lucide decorative: un'icona copiata da lucide.dev prende lo stile da qui */
.ci-icon      { flex-shrink: 0; align-self: center; color: var(--accent); font-size: 1rem }
.ci-icon svg  { display: block; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.ci-label     { font-size: .65rem; letter-spacing: .4em; text-transform: uppercase; color: rgba(245,244,240,.45); margin-bottom: var(--s-2); display: block }
.ci-value     { font-size: 1rem; font-weight: 300; color: rgba(245,244,240,.78) }
.ci-value a   { color: inherit; transition: color var(--dur-fast) }
.ci-value a:hover,
.ci-value a:focus-visible { color: var(--accent) }

.contact-form-side { padding: var(--s-24) var(--s-16) }
/* il campo fa da card: sfondo, anello di focus e barra d'errore stanno su .cf-field.
   Anello interno: i campi distano 2px. L'input non ne ha uno proprio. */
.cform    { display: flex; flex-direction: column }
.cf-field { display: flex; flex-direction: column; margin-bottom: 2px; background: var(--surface-soft); transition: background var(--dur-fast) }
.cf-field:focus-within { background: var(--surface-raised); outline: var(--focus-w) solid var(--focus); outline-offset: calc(var(--focus-w) * -1) }
.cf-field.is-invalid   { box-shadow: inset var(--focus-w) 0 0 var(--danger) }
.cf-label { font-size: .65rem; letter-spacing: .42em; text-transform: uppercase; color: var(--on-surface-muted); padding: var(--s-4) var(--s-6) 0 }
.cf-opt   { text-transform: none; letter-spacing: .04em }
.cf-count { font-size: var(--t-sm); font-weight: 300; line-height: 1.5; color: var(--on-surface-muted); padding: 0 var(--s-6) var(--s-2); text-align: right }
.cf-count.is-max { color: var(--accent) }
.cf-count-max::before { content: " · " }
.cf-input,
.cf-textarea { border: none; background: transparent; padding: var(--s-3) var(--s-6) var(--s-4); font-family: var(--f-body); font-size: .95rem; font-weight: 300; color: var(--on-surface); width: 100% }
/* opacity 1: Firefox schiarisce i placeholder di suo */
.cf-input::placeholder,
.cf-textarea::placeholder { color: var(--on-surface-muted); opacity: 1 }
.cf-input:focus-visible,
.cf-textarea:focus-visible { outline: none }
.cf-textarea { resize: none; height: 126px }
.cf-error { font-size: var(--t-sm); line-height: 1.5; color: var(--danger); padding: 0 var(--s-6) var(--s-4) }
.cf-submit { margin-top: 2px; padding: var(--s-6); font-family: var(--f-body); font-size: .78rem; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; width: 100% }
.cf-note,
.cf-privacy { font-size: var(--t-sm); font-weight: 300; line-height: 1.5; color: var(--on-surface-muted) }
.cf-note    { margin-top: var(--s-3) }
.cf-privacy { margin-top: var(--s-2) }

/* vuoto non occupa spazio ma resta nel DOM: una live region nascosta non verrebbe letta */
.cf-status { font-size: .9rem; font-weight: 300; line-height: 1.6; color: rgba(245,244,240,.78) }
.cf-status:not(:empty) { margin-top: var(--s-4) }


/* ── 18 · PAGINE DI TESTO (privacy, 404) ────────────────── */

.text-page     { padding: calc(var(--nav-h) + var(--s-16)) max(var(--px), (100% - 1280px) / 2) var(--s-24) }
.text-page > * { max-width: var(--measure) }
.text-page h1  { font-family: var(--f-display); font-size: clamp(3rem, 8vw, 6rem); line-height: .95; letter-spacing: .02em; color: var(--on-surface) }
.tp-updated    { font-size: var(--t-sm); color: var(--on-surface-muted); margin-top: var(--s-4) }
.text-page h2  { font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1.1; letter-spacing: .04em; color: var(--on-surface); margin-top: var(--s-12) }
.text-page h2 + * { margin-top: var(--s-4) }
.text-page p,
.text-page li  { font-size: 1rem; font-weight: 300; line-height: 1.7; color: rgba(245,244,240,.8) }
.text-page p + p,
.text-page p + ul,
.text-page ul + p { margin-top: var(--s-4) }
.text-page ul  { padding-left: var(--s-6) }
.text-page li + li { margin-top: var(--s-2) }
.text-page strong { font-weight: 500; color: var(--on-surface) }
.tp-lead       { margin-top: var(--s-8) }
.tp-actions    { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-12) }


/* ── 19 · GALLERY E VIEWER ──────────────────────────────── */

.gp-intro      { padding: var(--s-24) var(--px) var(--s-16); display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-16); align-items: end }
.gp-eyebrow    { font-size: .66rem; font-weight: 600; letter-spacing: .5em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-6); display: block }
.gp-h1         { font-family: var(--f-display); font-size: clamp(5rem,16vw,16rem); line-height: .82; letter-spacing: .02em; color: var(--on-surface) }
.gp-intro-text { font-size: 1.02rem; font-weight: 300; line-height: 2; color: rgba(245,244,240,.62); padding-bottom: var(--s-4) }

.gp-mosaic {
  padding: var(--s-12) var(--px) var(--s-32);
  display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 150px;
  grid-auto-flow: dense; gap: var(--s-4);
}
.mtile {
  position: relative; overflow: hidden; cursor: pointer;
  border: none; padding: 0; margin: 0; background: var(--surface-raised);
  display: block; width: 100%; height: 100%;
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease) var(--d), transform .7s var(--ease) var(--d);
}
.mtile.in    { opacity: 1; transform: translateY(0) }
.mtile:focus { opacity: 1; transform: translateY(0); transition: none }
.mtile-lg   { grid-column: span 2; grid-row: span 4 }
.mtile-tall { grid-column: span 1; grid-row: span 4 }
.mtile-wide { grid-column: span 2; grid-row: span 2 }
.mtile-md   { grid-column: span 1; grid-row: span 3 }
.mtile-sm   { grid-column: span 1; grid-row: span 2 }

.mtile-img { position: absolute; inset: 0 }
.mtile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.74) saturate(.95); transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow), opacity .7s var(--ease) }
.mtile:hover .mtile-img img,
.mtile:focus-visible .mtile-img img { transform: scale(1.03); filter: brightness(.5) saturate(1.1) }
.mtile-img .mtile-preview      { opacity: 0; pointer-events: none }
.mtile-img .mtile-preview.show { opacity: 1 }

.mtile-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,19,19,.92) 0%, rgba(18,19,19,.15) 45%, transparent 70%); opacity: .7; transition: opacity var(--dur-slow) }
.mtile:hover .mtile-veil,
.mtile:focus-visible .mtile-veil { opacity: .95 }

.mtile-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-6); text-align: left; z-index: 2; transform: translateY(8px); transition: transform var(--dur-slow) var(--ease) }
.mtile:hover .mtile-meta,
.mtile:focus-visible .mtile-meta { transform: translateY(0) }
.mtile-cat   { font-size: .58rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: var(--s-2) }
.mtile-title { font-family: var(--f-display); font-size: clamp(1.3rem,2vw,2rem); letter-spacing: .04em; color: var(--on-surface); line-height: 1; margin-bottom: var(--s-2) }
.mtile-loc   { font-size: .72rem; font-weight: 300; letter-spacing: .1em; color: rgba(245,244,240,.5) }

.mtile-count {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 2;
  width: 32px; height: 32px; border: 1px solid rgba(245,244,240,.4); border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 500; color: var(--on-surface);
  background: rgba(18,19,19,.35); backdrop-filter: blur(6px);
  opacity: 0; transform: scale(.7); transition: opacity var(--dur-slow), transform var(--dur-slow) var(--ease);
}
.mtile:hover .mtile-count,
.mtile:focus-visible .mtile-count { opacity: 1; transform: scale(1) }

/* viewer: da chiuso e' visibility:hidden, cosi' il bottone esce dal tab order.
   --vfit e' l'altezza utile sotto la barra, a cui si adatta ogni foto (--ar = larghezza/altezza). */
#viewer      { --vbar: 84px; --vfit: calc(100svh - var(--vbar) - var(--s-8)); position: fixed; inset: 0; z-index: 4000; background: var(--surface); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s }
#viewer.open { opacity: 1; pointer-events: all; visibility: visible; transition-delay: 0s }
#viewer-bar  {
  position: absolute; top: 0; left: 0; right: 0; height: var(--vbar); z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--px);
  background: linear-gradient(to bottom, rgba(18,19,19,.95), transparent);
}
#viewer-meta  { display: flex; flex-direction: column; gap: var(--s-1) }
#viewer-cat   { font-size: .6rem; font-weight: 600; letter-spacing: .4em; text-transform: uppercase; color: var(--accent) }
#viewer-title { font-family: var(--f-display); font-size: clamp(1.4rem,2.6vw,2.4rem); letter-spacing: .04em; color: var(--on-surface); line-height: 1 }
#viewer-loc   { font-size: .74rem; font-weight: 300; letter-spacing: .1em; color: rgba(245,244,240,.5) }
#viewer-close { width: 46px; height: 46px; flex-shrink: 0; background: rgba(18,19,19,.4); border: 1px solid var(--border); color: var(--on-surface); font-size: 1.5rem; cursor: pointer; font-family: var(--f-body); line-height: 1; display: flex; align-items: center; justify-content: center; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); backdrop-filter: blur(8px) }
#viewer-close:hover,
#viewer-close:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--surface) }

#viewer-progress     { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4; background: rgba(255,255,255,.08) }
#viewer-progress-bar { height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .1s linear }

#viewer-scroll { position: absolute; inset: 0; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--accent) transparent }
#viewer-scroll::-webkit-scrollbar       { width: 4px }
#viewer-scroll::-webkit-scrollbar-thumb { background: var(--accent) }
/* riceve il focus all'apertura (frecce e spazio scorrono le foto); a tutto schermo: anello interno */
#viewer-scroll:focus-visible { outline-offset: calc(var(--focus-w) * -1) }

.vphoto { margin: 0; display: flex; justify-content: center; gap: var(--s-4); background: var(--surface) }
.vphoto:first-child { padding-top: var(--s-24) }
.vphoto + .vphoto   { padding-top: var(--s-4) }
.vphoto img {
  width: min(76vw, 1200px, var(--vfit) * var(--ar, 1.5)); height: auto; aspect-ratio: var(--ar, 3 / 2);
  display: block; object-fit: contain;
  opacity: 0; transform: translateY(30px); animation: vReveal .8s var(--ease) forwards; animation-delay: var(--vd);
}
/* coppia: stessa altezza per le due foto, larghezza totale come una foto singola */
.vpair img { width: calc(min(var(--vfit), (min(76vw, 1200px) - var(--s-4)) / var(--asum)) * var(--ar)) }

.vnext       { width: 100%; min-height: 42vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); cursor: pointer; border: 0; border-top: 1px solid var(--border); background: var(--surface-soft); font: inherit; color: inherit; transition: background var(--dur-fast) }
.vnext:hover,
.vnext:focus-visible { background: var(--surface-raised) }
.vnext:focus-visible { outline-offset: calc(var(--focus-w) * -1) }
.vnext-label { font-size: .64rem; font-weight: 600; letter-spacing: .45em; text-transform: uppercase; color: rgba(245,244,240,.4) }
.vnext-title { font-family: var(--f-display); font-size: clamp(2rem,5vw,4rem); letter-spacing: .04em; color: var(--on-surface); transition: color var(--dur-fast) }
.vnext:hover .vnext-title,
.vnext:focus-visible .vnext-title { color: var(--accent) }


/* ── 20 · FOOTER ────────────────────────────────────────── */

footer       { background: var(--surface-soft); color: var(--on-surface); padding: var(--s-24) var(--px) var(--s-12) }
.footer-logo { margin-bottom: var(--s-8) }
.footer-top  { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-16); margin-bottom: var(--s-16); padding-bottom: var(--s-16); border-bottom: 1px solid var(--border) }
.fb-text     { font-size: .92rem; font-weight: 300; color: var(--on-surface-muted); line-height: 2; max-width: 280px }
.fc-head     { display: block; font-size: .65rem; letter-spacing: .4em; text-transform: uppercase; color: var(--on-surface-muted); margin-bottom: var(--s-6) }
.fc-links    { list-style: none; display: flex; flex-direction: column; gap: var(--s-3) }
.fc-links a,
.fc-links .fc-text { font-size: .9rem; font-weight: 300; color: var(--on-surface-muted); transition: color var(--dur-fast) }
.fc-links a:hover,
.fc-links a:focus-visible { color: var(--accent) }
.footer-bottom  { display: flex; justify-content: space-between; align-items: center }
.footer-copy    { font-size: .68rem; letter-spacing: .18em; color: var(--on-surface-muted); text-transform: uppercase }
.footer-links   { display: flex; gap: var(--s-6) }
.footer-links a { font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--on-surface-muted); transition: color var(--dur-fast) }
.footer-links a:hover,
.footer-links a:focus-visible { color: var(--accent) }


/* ── 21 · TITOLI A CONTORNO ─────────────────────────────────
   Dopo i componenti: devono vincere su regole come ".process-head h2", con la stessa
   specificita'. Dove il contorno non esiste il testo resta pieno. */

:is(h2, p).outline-title {
  font-family: var(--f-display); letter-spacing: .02em; line-height: 1.05;
  text-wrap: balance;
  color: var(--on-surface);
  transition: opacity .95s var(--ease), color var(--dur-fast), -webkit-text-stroke-color var(--dur-fast);
}
.outline-title em { color: var(--accent); font-style: normal }
@supports (-webkit-text-stroke: 1px) {
  :is(h2, p).outline-title { color: transparent; -webkit-text-stroke: max(1px, .012em) var(--on-surface) }
  .outline-title em        { color: var(--accent); -webkit-text-stroke-color: var(--accent) }
}
:is(h2, p).outline-title:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent) }

/* il contenitore deve avere overflow-x: clip */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .outline-title {
      animation: ilDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
  }
}
@keyframes ilDrift { from { transform: translateX(6vw) } to { transform: translateX(0) } }


/* ── 22 · KEYFRAMES ─────────────────────────────────────── */

@keyframes tickeranim   { from { transform: translateX(0) }         to { transform: translateX(-50%) } }
@keyframes mosaicScroll { from { transform: translate3d(-50%,0,0) } to { transform: translate3d(0,0,0) } }
@keyframes cmScroll     { from { transform: translateX(0) }         to { transform: translateX(-50%) } }
@keyframes fadeIn       { from { opacity: 0 }                       to { opacity: 1 } }
@keyframes scrollChev {
  0%   { transform: translateY(-4px); opacity: 0 }
  35%  { opacity: 1 }
  70%  { transform: translateY(5px);  opacity: 0 }
  100% { opacity: 0 }
}
@keyframes vReveal { to { opacity: 1; transform: translateY(0) } }
@keyframes btnSpin { to { transform: rotate(360deg) } }


/* ── 23 · RESPONSIVE ────────────────────────────────────── */

@media(max-width:1100px) {
  .hero        { grid-template-columns: 1fr 3fr 1fr }
  .hero-col:nth-child(2),
  .hero-col:nth-child(4) { display: none }
  .footer-top  { grid-template-columns: 1fr 1fr }
}

/* sotto i 1000px il bottone della topbar non lascia spazio al menu centrato */
@media(max-width:1000px) {
  .topbar-cta { display: none }
}

@media(max-width:1024px) {
  .gp-intro   { grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-16) var(--px) var(--s-12) }
  .gp-mosaic  { grid-template-columns: repeat(2,1fr); grid-auto-rows: 140px }
  .mtile-lg   { grid-column: span 2; grid-row: span 4 }
  .mtile-wide { grid-column: span 2; grid-row: span 2 }
  .mtile-tall, .mtile-md, .mtile-sm { grid-column: span 1 }
}

@media(max-width:900px) {
  .vphoto img, .vpair img { width: min(100vw, var(--vfit) * var(--ar, 1.5)) }
  .vpair { flex-direction: column; align-items: center }
}

@media(max-width:768px) {
  :root { --px: var(--s-6); --nav-h: var(--s-12) }

  .topbar-nav, .topbar-cta { display: none }
  .bottom-nav { display: flex }
  html { scroll-padding-bottom: calc(var(--bnav-h) + var(--s-2)) }

  .studio-body p, .ps-text, .process-head p, .expertise-head p,
  .clients-header p, .exp-row-desc, .fb-text, .gp-intro-text { line-height: 1.6 }
  .sp-l, .ps-label, .fcc-eye, .ci-label,
  .cf-label, .fc-head, .footer-copy, .footer-links a, .hero-scroll-label,
  .gp-eyebrow { font-size: var(--t-sm); letter-spacing: .2em }
  .sp-l, .fcc-eye, .ci-label,
  .fc-head, .footer-copy, .footer-links a { color: var(--on-surface-muted) }

  .hero { grid-template-columns: 1fr; height: calc(100svh - var(--bnav-h)) }
  .hero-col { display: none !important }
  .hero-center { grid-column: 1 }
  .hero-title-block { width: calc(100% - 2 * var(--px)); white-space: normal }
  .hero-logo .logo-set    { font-size: 3.2rem }
  .hero-logo .logo-design { font-size: 2rem }
  .hero-line   { font-size: var(--t-sm); letter-spacing: .3em; line-height: 1.8; text-wrap: balance }
  .hero-corner { display: none }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding-bottom: var(--s-8) }

  .st-h2 { font-size: clamp(3rem,10vw,5rem) }
  .mosaic { display: none }

  /* 18vw: "SI COSTRUISCE" sta nella riga anche a 320px */
  #about         { --lead: clamp(2.5rem,18vw,6rem) }
  .studio-lead   { padding: var(--s-16) var(--px) var(--s-12) }
  .studio-media::after { background: linear-gradient(to bottom, var(--surface), rgba(18,19,19,0) 20%) }
  .studio-body   { display: block; padding: var(--s-16) var(--px); background: linear-gradient(to bottom, rgba(18,19,19,0), rgba(18,19,19,.9) var(--s-16)) }
  .studio-body .st-h2 { margin-bottom: var(--s-6) }

  .impact-media { min-height: 0 }
  .impact-media picture { top: -35% }
  .impact-media::after {
    background:
      linear-gradient(to bottom, var(--surface), rgba(18,19,19,0) 18%),
      linear-gradient(to top, var(--surface) 0%, rgba(18,19,19,.9) 40%, rgba(18,19,19,.72) 68%, rgba(18,19,19,.1) 100%);
  }
  .impact-body  { grid-template-columns: 1fr; gap: var(--s-6); padding: 40vw var(--px) var(--s-8) }
  .impact-h     { font-size: clamp(3rem,15vw,5rem) }
  .ih-2 { margin-left: 1em }
  .ih-3 { margin-left: 2em }
  .ih-1 { --drift: -3vw }
  .ih-2 { --drift: 5vw }
  .ih-3 { --drift: 10vw }
  .impact-stats { grid-template-columns: auto 1fr; align-items: center; gap: var(--s-4) var(--s-6); padding: var(--s-4) var(--px) var(--s-16) }
  .impact-stats > div { display: contents }
  .sp-n { font-size: 2.4rem }
  .sp-l { margin-top: 0; line-height: 1.5 }

  .clients-header   { flex-direction: column; align-items: flex-start; gap: var(--s-6); padding: var(--s-12) var(--px) var(--s-8) }
  .clients-header p { text-align: left; max-width: none }
  .cm-row::before, .cm-row::after { width: var(--s-8) }

  .process      { padding: var(--s-16) var(--px) }
  .process-head { flex-direction: column; align-items: flex-start; gap: var(--s-4); padding-bottom: var(--s-12) }
  .process-head p { text-align: left; max-width: none }
  .process-timeline { --dot: 12px }
  .ps-num { font-size: 2.2rem }
  .pstep  { padding-bottom: var(--s-12) }

  .expertise        { padding: var(--s-16) var(--px) }
  .expertise-inner  { grid-template-columns: 1fr; gap: var(--s-8) }
  .expertise-head   { position: static }
  .expertise-head p { max-width: none }
  .expertise-head .exp-cities { font-size: var(--t-sm); letter-spacing: .2em }
  .exp-row       { padding: var(--s-4) 0 }
  .expertise-cta { margin-top: var(--s-6) }

  .full-cta { min-height: 50vh }
  .fcc h2   { font-size: clamp(3rem,12vw,6rem) }

  .contact           { grid-template-columns: 1fr }
  .contact-info      { border-right: none; border-bottom: 1px solid var(--border); padding: var(--s-12) var(--px) }
  .contact-form-side { padding: var(--s-12) var(--px) }
  .cf-submit         { letter-spacing: .2em; text-wrap: balance }

  /* il fondo del footer scorre sotto la barra in basso */
  footer         { padding: var(--s-12) var(--px) calc(var(--s-8) + var(--bnav-h)) }
  .footer-copy   { line-height: 1.6 }
  .footer-top    { grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-6); margin-bottom: var(--s-8); padding-bottom: var(--s-8) }
  .footer-top > :first-child,
  .footer-top > :last-child { grid-column: 1 / -1 }
  .footer-logo   { margin-bottom: var(--s-4) }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s-4); text-align: left }

  .reveal, .pstep { opacity: 1; transform: none; transition: none }
  .mtile { transform: none; transition: opacity .4s ease-out }
  .hero-logo .logo-set, .hero-logo .logo-design, .hero-line { animation-duration: .6s; animation-delay: 0s }
}

@media(max-width:640px) {
  #viewer { --vbar: 68px }
  .vphoto:first-child { padding-top: var(--s-16) }
}

@media(max-width:560px) {
  .gp-mosaic { grid-template-columns: 1fr; grid-auto-rows: auto; gap: var(--s-4) }
  .mtile, .mtile-lg, .mtile-tall, .mtile-wide, .mtile-md, .mtile-sm { grid-column: auto; grid-row: auto; height: 62vw; min-height: 240px }
  .mtile-count { opacity: 1; transform: scale(1) }
  .mtile-meta  { transform: translateY(0) }
}

@media(max-width:480px) {
  :root { --px: var(--s-4) }
  .hero-logo .logo-set    { font-size: 2.6rem }
  .hero-logo .logo-design { font-size: 1.6rem }
  .ticker-item { font-size: .9rem }
}

@media(hover: none) {
  .hero-col:hover img { transform: none; filter: brightness(.42) saturate(.8) }
}

@media(prefers-reduced-motion: reduce) {
  html           { scroll-behavior: auto }
  .reveal        { opacity: 1; transform: none; transition: none }
  .ticker-track  { animation: none }
  .hero-logo .logo-set, .hero-logo .logo-design, .hero-line { animation: none }
  .hero-col img, .mtile-img img, .btn-icon { transition: none }
  .topbar        { transition: background .4s, border-color .4s }
  .chev1, .chev2 { animation: none }
  .chev2         { opacity: .6 }
  .mosaic-track  { animation: none }
  /* marquee fermo: i nomi vanno a capo e si leggono tutti */
  .cm-row        { white-space: normal }
  .cm-row::before, .cm-row::after { display: none }
  .cm-track      { animation: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-6); padding: 0 var(--px) }
  .cm-track .cm-dup   { display: none }   /* due classi: deve vincere su ".cm-track li" */
  .cm-track li::after { content: none }
  .pstep         { transition: none; opacity: 1; transform: none }
  .ps-num, .ps-label, .ps-text { transition: none }
  .tl-fill       { transition: none }
  .mtile         { opacity: 1; transform: none; transition: none }
  .vphoto img    { animation: none; opacity: 1; transform: none }
}


/* ── 24 · STATI DEI BOTTONI ─────────────────────────────────
   In fondo: devono vincere sugli :hover dei componenti, con la stessa specificita'. */

/* active: feedback immediato, nessuna transizione in pressione */
.btn:active                       { transform: translateY(1px); transition-duration: 0s }
.btn-primary:active               { box-shadow: none }
.lt-opt:not([aria-pressed="true"]):active { background: var(--accent-subtle) }
.btn-tertiary:active              { color: var(--on-surface) }
.mtile:active .mtile-veil         { opacity: 1; transition-duration: 0s }
.vnext:active                     { background: var(--surface); transition-duration: 0s }

/* disabled: pointer-events:none spegne anche hover e active.
   aria-disabled resta focalizzabile: il JS deve ignorarne il click. */
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .4; pointer-events: none; transform: none; box-shadow: none }

/* loading: il testo diventa trasparente ma resta nel flusso, la larghezza non cambia */
.btn[aria-busy="true"] { color: transparent; pointer-events: none }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 1em; height: 1em; margin: -.5em 0 0 -.5em;
  border: 2px solid var(--btn-ink); border-right-color: transparent; border-radius: var(--r-full);
  animation: btnSpin .7s linear infinite;
}