/* ==========================================================================
   Spazio — stili generali (home, manifesto, team, nav, footer)
   Le pagine dei lavori caricano in aggiunta assets/css/lavori.css
   ========================================================================== */

/* ---------- Token ---------- */
:root {
  --accent: #DB393C;
  --accent-ink: #C93336;
  --accent-deep: #D3363A;
  --accent-lift: color-mix(in oklab, var(--accent) 72%, #fff);
  --ink: #0B0B0B;
  --paper: #F3F1EC;
  --paper-2: #EDEAE3;
  --mono: 'JetBrains Mono', monospace;
  --wrap: 1480px;
  --pad: 40px;
  --hair-d: rgba(243,241,236,.18);
  --hair-l: rgba(11,11,11,.16);
}

/* ---------- Reset e base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; }
input, textarea, button { font: inherit; color: inherit; }
::selection { background: var(--accent-deep); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Impianto ---------- */
.page { background: var(--paper); color: var(--ink); overflow-x: clip; }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.sec { padding: 120px var(--pad); }
.sec--dark { background: var(--ink); color: var(--paper); }
.col { display: flex; flex-direction: column; }
.stack-14 { gap: 14px; }
.stack-22 { gap: 22px; }
.stack-26 { gap: 26px; }
.stack-42 { gap: 42px; }
.stack-56 { gap: 56px; }

/* ---------- Tipografia ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.eyebrow--light { color: var(--accent-lift); }
.eyebrow--paper { color: rgba(243,241,236,.7); }
.eyebrow--white { color: #fff; }
.label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.label--light { color: var(--accent-lift); }
.label--paper { color: rgba(243,241,236,.7); }
.label--muted { color: rgba(11,11,11,.66); }
.caption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(11,11,11,.64);
}
.t-xl { margin: 0; font-size: clamp(38px,5vw,78px); line-height: 1.02; letter-spacing: -.04em; font-weight: 500; }
.t-l  { margin: 0; font-size: clamp(30px,4vw,60px); line-height: 1.02; letter-spacing: -.035em; font-weight: 500; }
.t-m  { margin: 0; font-size: clamp(28px,3.4vw,50px); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; }
.t-s  { margin: 0; font-size: clamp(26px,3vw,42px); line-height: 1.04; letter-spacing: -.035em; font-weight: 500; }
.lead { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(11,11,11,.72); }
.lead--paper { color: rgba(243,241,236,.78); }
.body-16 { margin: 0; font-size: 16.5px; line-height: 1.62; color: rgba(11,11,11,.72); }
.measure-40 { max-width: 40ch; }
.measure-44 { max-width: 44ch; }
.measure-50 { max-width: 50ch; }
.measure-62 { max-width: 62ch; }

/* ---------- Bottoni, chip, frecce ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 17px 30px;
  border: 0;
  border-radius: 100px;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.btn--accent { background: var(--accent-deep); color: #fff; }
.btn--accent:hover { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; border: 1px solid rgba(243,241,236,.4); color: var(--paper); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); }
.btn--sm { min-height: 44px; padding: 14px 26px; font-size: 13.5px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

.chip {
  padding: 9px 16px;
  border: 1px solid rgba(11,11,11,.2);
  border-radius: 100px;
  background: transparent;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(11,11,11,.8);
}
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip--btn { cursor: pointer; padding: 10px 18px; }
.chip--btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip--dark {
  border-color: rgba(243,241,236,.3);
  color: rgba(243,241,236,.75);
  letter-spacing: .08em;
}
.chip--dark[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.arrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(11,11,11,.24);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.arrow svg { flex: none; display: block; }
.arrow--38 { width: 38px; height: 38px; }
.arrow--44 { width: 44px; height: 44px; border-color: rgba(255,255,255,.7); }
.arrow--52 { width: 52px; height: 52px; border-color: rgba(11,11,11,.28); background: transparent; color: var(--ink); cursor: pointer; }
.arrow--52:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.arrow--86 { width: 86px; height: 86px; border-color: rgba(243,241,236,.35); }
.rot-45 { transform: rotate(-45deg); }
.rot-180 { transform: rotate(180deg); }

/* ---------- Utility ---------- */
.gap-6 { gap: 6px; }
.gap-12 { gap: 12px; }
.gap-34 { gap: 34px; }
.gap-40 { gap: 40px; }
.gap-48 { gap: 48px; }
.gap-50 { gap: 50px; }
.wrap--narrow { max-width: 1180px; }
.d-1 { animation-delay: .08s; }
.d-2 { animation-delay: .2s; }
.d-3 { animation-delay: .32s; }
.sp-2 { grid-column: span 2; }
.sp-3 { grid-column: span 3; }
.sp-4 { grid-column: span 4; }
.sp-6 { grid-column: span 6; }
.ar-1 { aspect-ratio: 1; }
.ar-3-2 { aspect-ratio: 3/2; }
.ar-3-4 { aspect-ratio: 3/4; }
.ar-4-5 { aspect-ratio: 4/5; }
.ar-16-7 { aspect-ratio: 16/7; }
.ar-16-10 { aspect-ratio: 16/10; }
.ar-21-9 { aspect-ratio: 21/9; }
.ar-wide { aspect-ratio: 1740/611; }
.ar-site { aspect-ratio: 1809/776; }
.ar-shop { aspect-ratio: 2.881; }
.ar-flat { aspect-ratio: 1.543; }
.ar-pres { aspect-ratio: 1200/782; }

/* ---------- Griglie a filo (hairline) ---------- */
.hair-grid {
  display: grid;
  gap: 1px;
  background: var(--hair-l);
  border-top: 1px solid var(--hair-l);
}
.hair-grid--dark { background: var(--hair-d); border-top-color: var(--hair-d); }
.hair-grid--150 { grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }
.hair-grid--220 { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }
.hair-grid--240 { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.hair-cell { background: var(--paper); padding: 22px 20px 26px; display: flex; flex-direction: column; gap: 8px; }
.hair-cell--dark { background: var(--ink); padding: 32px 24px 38px; gap: 10px; }
.hair-cell__val { font-size: 17px; letter-spacing: -.015em; }

/* ==========================================================================
   Animazioni
   ========================================================================== */
@keyframes maskUp { from { transform: translateY(108%) rotate(2deg); } to { transform: none; } }
@keyframes maskIn {
  from { transform: translateY(118%) skewY(8deg) scale(1.08); filter: blur(16px); opacity: 0; }
  to { transform: none; filter: none; opacity: 1; }
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes spinBlink { 0%, 60% { opacity: 1; } 80%, 100% { opacity: .15; } }
@keyframes glow {
  from { transform: translate(-50%,-50%) scale(.9); opacity: .45; }
  to { transform: translate(-50%,-50%) scale(1.15); opacity: .8; }
}
@keyframes plateGrain { 0%, 100% { opacity: .1; } 50% { opacity: .2; } }

[data-line] { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.06em; }
[data-line] > span {
  display: block;
  animation: maskIn 1.6s cubic-bezier(.16,1,.3,1) both;
}
[data-in] { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) both; }
[data-fade] { animation: fadeOnly 1.4s ease both; }
[data-glow] { animation: glow 7s ease-in-out infinite alternate; }
[data-words] { display: flex; flex-wrap: wrap; column-gap: .26em; }
[data-words] > span { display: block; overflow: hidden; padding-bottom: .06em; }

/* scroll-driven, con fallback: senza view() il contenuto resta visibile */
@supports (animation-timeline: view()) {
  @keyframes reveal { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
  @keyframes revealSoft { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes parallax { from { transform: translateY(26px) scale(1.04); } to { transform: translateY(-26px) scale(1.04); } }
  @keyframes slideIn { from { opacity: .001; transform: translateX(-120px) skewX(-4deg); } to { opacity: 1; transform: none; } }
  @keyframes slideInR { from { opacity: .001; transform: translateX(120px) skewX(4deg); } to { opacity: 1; transform: none; } }
  @keyframes zoomIn { from { opacity: .001; transform: translateY(90px) scale(.86); } to { opacity: 1; transform: none; } }
  @keyframes wordUp { from { transform: translateY(118%) skewY(10deg); } to { transform: none; } }
  @keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes wipeMedia { from { clip-path: inset(26% 34% 26% 34% round 4px); } to { clip-path: inset(0 0 0 0 round 0); } }
  @keyframes mediaZoom { from { transform: scale(1.45); } to { transform: scale(1); } }
  @keyframes driftL { from { transform: translateX(14vw); } to { transform: translateX(-14vw); } }
  @keyframes driftR { from { transform: translateX(-14vw); } to { transform: translateX(14vw); } }
  @keyframes pinGrow {
    0% { transform: scale(.62); opacity: 0; filter: blur(14px); letter-spacing: .08em; }
    50% { transform: scale(1); opacity: 1; filter: blur(0); letter-spacing: -.045em; }
    100% { transform: scale(1.1); opacity: 1; filter: blur(0); letter-spacing: -.05em; }
  }
  @keyframes rotateIn { from { transform: rotate(-14deg) translateY(90px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes heroScale {
    from { transform: none; opacity: 1; filter: blur(0); }
    to { transform: scale(.82) translateY(-90px); opacity: .08; filter: blur(6px); }
  }
  @keyframes riseStrong {
    from { opacity: 0; transform: translateY(90px) scale(.97); filter: blur(8px); }
    60% { opacity: 1; filter: blur(0); }
    to { opacity: 1; transform: none; filter: blur(0); }
  }

  [data-reveal] { animation: reveal linear forwards; animation-timeline: view(); animation-range: entry 2% cover 26%; }
  [data-reveal-row] { animation: revealSoft linear forwards; animation-timeline: view(); animation-range: entry 0% cover 20%; }
  [data-parallax] { animation: parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  [data-words] > span > span { animation: wordUp linear both; animation-timeline: view(); }
  [data-words] > span:nth-child(1) > span { animation-range: entry 6% entry 62%; }
  [data-words] > span:nth-child(2) > span { animation-range: entry 9% entry 65%; }
  [data-words] > span:nth-child(3) > span { animation-range: entry 12% entry 68%; }
  [data-words] > span:nth-child(4) > span { animation-range: entry 15% entry 71%; }
  [data-words] > span:nth-child(5) > span { animation-range: entry 18% entry 74%; }
  [data-words] > span:nth-child(6) > span { animation-range: entry 21% entry 77%; }
  [data-words] > span:nth-child(7) > span { animation-range: entry 24% entry 80%; }
  [data-words] > span:nth-child(8) > span { animation-range: entry 27% entry 83%; }
  [data-words] > span:nth-child(n+9) > span { animation-range: entry 30% entry 88%; }
  [data-mask] { display: block; overflow: hidden; padding-bottom: .05em; }
  [data-mask] > span { display: block; animation: maskIn linear both; animation-timeline: view(); animation-range: entry 8% cover 18%; }
  [data-wipe] { animation: wipe linear forwards; animation-timeline: view(); animation-range: entry 4% cover 26%; }
  [data-media] { animation: wipeMedia linear forwards; animation-timeline: view(); animation-range: entry 0% cover 34%; }
  [data-media] > [data-parallax] { animation: mediaZoom linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  [data-drift="l"] { animation: driftL linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  [data-drift="r"] { animation: driftR linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  [data-pin] { animation: pinGrow linear both; animation-timeline: view(); animation-range: entry 0% exit 40%; }
  [data-rotate] { animation: rotateIn linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
  [data-rule] { transform-origin: 0 50%; animation: lineGrow linear both; animation-timeline: view(); animation-range: entry 10% cover 24%; }
  [data-scale] { animation: heroScale linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  [data-para] { animation: riseStrong linear both; animation-timeline: view(); animation-range: entry 0% cover 34%; }
  #servizi [data-reveal-row] { animation: slideIn linear forwards; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  #servizi [data-reveal-row]:nth-child(even) { animation-name: slideInR; }
  #lavori [data-reveal-row] { animation: zoomIn linear forwards; animation-timeline: view(); animation-range: entry 0% cover 24%; }
}

/* reveal via IntersectionObserver (assets/js/nav.js): senza JS resta visibile */
[data-anim] { animation: none !important; }
[data-anim="row"]:not([data-shown]) {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1);
}
[data-anim="row"][data-shown] { opacity: 1; transform: none; }
[data-anim="row"]:nth-child(2) { transition-delay: .07s; }
[data-anim="row"]:nth-child(3) { transition-delay: .14s; }
[data-anim="row"]:nth-child(4) { transition-delay: .21s; }
[data-anim="row"]:nth-child(5) { transition-delay: .28s; }
[data-anim="row"]:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-line] > span, [data-in], [data-fade], [data-glow], [data-words] > span > span,
  [data-reveal], [data-reveal-row], [data-parallax], [data-mask] > span, [data-wipe],
  [data-media], [data-drift], [data-pin], [data-rotate], [data-rule], [data-scale],
  [data-para], [data-run], [data-dot] { animation: none !important; }
  [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   Header, menu, tab bar (template/nav.php)
   ========================================================================== */
.head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px var(--pad);
  background: var(--paper);
  border-bottom: 1px solid rgba(11,11,11,.1);
  color: var(--ink);
  backdrop-filter: blur(22px) saturate(1.6);
  transition: background .45s ease, border-color .45s ease, color .45s ease;
}
.head[data-top="false"] { background: rgba(243,241,236,.34); }
.head[data-dark="true"] {
  background: rgba(11,11,11,.34);
  border-bottom-color: rgba(243,241,236,.14);
  color: var(--paper);
}
.head__logo { display: flex; align-items: center; gap: 10px; }
.head__logo img { height: 16px; width: auto; display: block; transition: filter .45s ease; }
.head[data-dark="true"] .head__logo img { filter: brightness(0) invert(1); }

.desknav { display: flex; align-items: center; gap: 34px; font-size: 13px; letter-spacing: .02em; }
.desknav a[data-nav] { position: relative; transition: color .35s ease, opacity .35s ease; }
.desknav a[data-nav]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.desknav a[data-nav][data-active="true"]::after,
.desknav a[data-nav]:hover::after { transform: scaleX(1); }
.desknav a[data-nav][data-active="false"] { opacity: .68; }
.desknav a[data-nav][data-active="true"] { color: var(--accent-ink); }
.head[data-dark="true"] .desknav a[data-nav][data-active="true"] { color: var(--accent-lift); }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 20px;
  border: 1px solid currentColor;
  border-radius: 100px;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nav-cta__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: block; }

.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -8px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.burger span { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.burger span span { display: block; height: 1.5px; background: currentColor; }

.sheet {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 100dvh;
  z-index: 70;
  background: var(--ink);
  color: var(--paper);
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px calc(22px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sheet[data-open="true"] { display: flex; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.sheet[data-open="true"] [data-item] { animation: sheetIn .55s cubic-bezier(.16,1,.3,1) both; }
.sheet [data-item]:nth-child(1) { animation-delay: .06s; }
.sheet [data-item]:nth-child(2) { animation-delay: .12s; }
.sheet [data-item]:nth-child(3) { animation-delay: .18s; }
.sheet [data-item]:nth-child(4) { animation-delay: .24s; }
.sheet [data-item]:nth-child(5) { animation-delay: .30s; }
.sheet__bar { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.sheet__bar img { height: 15px; width: auto; filter: brightness(0) invert(1); }
.sheet__close {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(243,241,236,.3);
  background: transparent;
  color: var(--paper);
  font-size: 20px;
  cursor: pointer;
}
.sheet__nav {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  justify-content: center;
  font-size: clamp(26px,8vw,42px);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.sheet__nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(243,241,236,.14);
}
.sheet__nav a[data-current="true"] { color: var(--accent-lift); }
.sheet__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  min-height: 56px;
  padding: 16px 24px;
  border-radius: 100px;
  background: var(--accent-deep);
  color: #fff;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tabbar {
  display: none;
  position: fixed;
  left: 10px; right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 60;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  border-radius: 26px;
  background: rgba(11,11,11,.82);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(243,241,236,.14);
  box-shadow: 0 16px 40px rgba(11,11,11,.28);
}
.tabbar [data-tab] {
  flex: 1;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: background-color .38s cubic-bezier(.16,1,.3,1), color .3s ease;
}
.tabbar [data-tab] > span:first-child { font-size: 16px; line-height: 1; transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.tabbar [data-tab="scrivici"] { flex: 1.2; background: var(--accent-deep); color: #fff; }
.tabbar [data-tab="menu"] { background: rgba(243,241,236,.1); }
@keyframes tabPop {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-3px) scale(1.14); }
  100% { transform: translateY(-1px) scale(1.06); }
}
@keyframes dotIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.tabbar [data-tab][data-active="true"] { background: rgba(243,241,236,.13); }
.tabbar [data-tab][data-active="true"] > span:first-child { animation: tabPop .5s cubic-bezier(.16,1,.3,1) forwards; }
.tabbar [data-tab][data-active="true"]::after {
  content: "";
  position: absolute;
  left: 34%; right: 34%; bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  animation: dotIn .45s cubic-bezier(.16,1,.3,1) both;
}
.tabbar [data-tab][data-active="false"] { color: rgba(243,241,236,.74); }
.tabbar [data-tab][data-active="false"] > span:first-child { opacity: .62; }
.tabbar [data-tab]:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
  .sheet [data-item],
  .tabbar [data-tab][data-active="true"] > span:first-child,
  .tabbar [data-tab][data-active="true"]::after { animation: none !important; }
}
@media (hover: none) {
  .sheet a, .tabbar a, .tabbar button { -webkit-tap-highlight-color: transparent; }
}

/* ==========================================================================
   Footer (template/footer.php)
   ========================================================================== */
.foot {
  max-width: var(--wrap);
  margin: 110px auto 0;
  padding: 36px 0 44px;
  border-top: 1px solid var(--hair-d);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.foot__brand { display: flex; flex-direction: column; gap: 14px; }
.foot__brand img { width: 220px; height: auto; max-width: 100%; display: block; filter: brightness(0) invert(1); }
.foot__copy { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: rgba(243,241,236,.68); }
.foot__col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: rgba(243,241,236,.72); }
.foot__head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243,241,236,.68);
}

/* ==========================================================================
   Home — hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: 0 var(--pad);
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: clip;
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__bg > div:first-child { position: absolute; inset: 0; background: var(--ink); }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__grain {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg, rgba(243,241,236,.05) 0 1px, transparent 1px 7px);
  animation: plateGrain 1.6s steps(3) infinite;
}
.hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,11,11,.88) 0%, rgba(11,11,11,.72) 46%, rgba(11,11,11,.42) 100%);
}
.hero__fade {
  position: absolute; inset: auto 0 0;
  height: 42%;
  background: linear-gradient(to top, var(--ink) 0%, rgba(11,11,11,0) 100%);
}
.hero__glow {
  position: absolute;
  top: 0; left: 551px;
  width: 1005px; height: 1018px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 55%, transparent) 0%, transparent 68%);
  filter: blur(40px);
  pointer-events: none;
}
.hero__meta {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 27px;
  flex-wrap: wrap;
  padding-top: 153px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: .04em;
  animation-delay: .05s;
}
.hero__meta > span:last-child { letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.hero__h1 {
  position: relative;
  margin: auto 0 0;
  padding-top: 65px;
  font-size: clamp(46px,9vw,142px);
  line-height: .96;
  letter-spacing: -.042em;
  font-weight: 500;
  text-wrap: balance;
}
.hero__h1 [data-line]:first-child { color: var(--accent); }
.hero__foot {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: end;
  padding: 64px 0 56px;
  border-top: 1px solid rgba(243,241,236,.14);
  margin-top: 56px;
}
.hero__foot p {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(243,241,236,.72);
  animation-delay: .55s;
}

/* Marquee */
.marquee {
  background: var(--accent-deep);
  color: #fff;
  padding: 22px 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.marquee__run {
  display: inline-flex;
  gap: 56px;
  padding-right: 56px;
  font-size: clamp(24px,2.6vw,38px);
  letter-spacing: -.02em;
  animation: marquee 26s linear infinite;
}
.marquee__run--b { animation-duration: 34s; animation-direction: reverse; color: var(--ink); }

/* ==========================================================================
   Home — studio
   ========================================================================== */
.studio { padding: 140px var(--pad) 120px; background: var(--paper); }
.studio__grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.25fr);
  gap: 80px;
  align-items: start;
  max-width: var(--wrap);
  margin: 0 auto;
}
.studio__aside { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 120px; }
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(11,11,11,.12);
  border: 1px solid rgba(11,11,11,.12);
}
.stat { background: var(--paper); padding: 26px 22px; display: flex; flex-direction: column; gap: 6px; }
.stat__n { font-size: 44px; line-height: 1; letter-spacing: -.03em; }
.studio__copy { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.rule { height: 1px; background: rgba(11,11,11,.25); }

/* ==========================================================================
   Home — servizi
   ========================================================================== */
.servizi { background: var(--accent-deep); color: #fff; padding: 120px var(--pad); }
.servizi__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding-bottom: 56px;
}
.servizi__head p { margin: 0; max-width: 34ch; font-size: 16.5px; line-height: 1.6; color: #fff; }
.srv-list { border-top: 1px solid rgba(255,255,255,.28); }
.srv {
  display: grid;
  grid-template-columns: 60px minmax(0,1.1fr) minmax(0,1.2fr) 52px;
  gap: 32px;
  align-items: baseline;
  padding: 30px 8px;
  border-bottom: 1px solid rgba(255,255,255,.28);
  color: #fff;
  transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1), padding-left .4s, background .4s;
}
.srv:hover { background: rgba(0,0,0,.18); padding-left: 22px; color: #fff; }
.srv__num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.srv h3 { margin: 0; font-size: clamp(24px,2.4vw,38px); line-height: 1.04; letter-spacing: -.03em; font-weight: 500; }
.srv p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #fff; }
.srv .arrow { justify-self: end; }

/* Frase fissata */
.pin-sec { background: var(--paper); color: var(--ink); height: 180vh; position: relative; }
.pin-sec__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--pad);
  overflow: clip;
}
.pin-sec p {
  margin: 0;
  max-width: 22ch;
  text-align: center;
  font-size: clamp(44px,7vw,104px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 500;
}
.pin-sec p span { color: var(--accent); }

/* ==========================================================================
   Home — team
   ========================================================================== */
.team-sec { background: var(--ink); color: var(--paper); padding: 120px var(--pad); }
.team-sec__head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
  gap: 56px;
  align-items: end;
}
.team-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 1px;
  background: var(--hair-d);
  border-top: 1px solid var(--hair-d);
  border-bottom: 1px solid var(--hair-d);
}
.team-card { background: var(--ink); padding: 34px 26px 40px; display: flex; flex-direction: column; gap: 10px; }
.team-card__t { font-size: 20px; letter-spacing: -.02em; }
.team-card__d { font-size: 15px; line-height: 1.6; color: rgba(243,241,236,.7); }

/* ==========================================================================
   Home — lavori
   ========================================================================== */
.lavori-sec { padding: 20px var(--pad) 130px; background: var(--paper); }
.lavori-sec__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.work-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 28px; }
.work { display: flex; flex-direction: column; gap: 18px; color: inherit; }
.work[hidden] { display: none; }
.work__media {
  position: relative;
  background-color: #E4E1DA;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.work__texture {
  position: absolute;
  inset: -8%;
  background-image: repeating-linear-gradient(135deg, rgba(11,11,11,.055) 0 2px, transparent 2px 11px);
}
.work__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.work__year {
  position: absolute;
  top: 16px; left: 16px;
  padding: 7px 13px;
  border-radius: 100px;
  background: rgba(11,11,11,.86);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.work__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hair-l);
}
.work__foot h3 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; font-weight: 500; }
.work__tags { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.work:hover .arrow--38 { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ==========================================================================
   Home — contatti
   ========================================================================== */
.contatti { background: var(--ink); color: var(--paper); padding: 120px var(--pad) 0; }
.contatti__grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px,1fr));
  gap: 90px 60px;
  align-items: start;
}
.contatti__mail { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.contatti__mail a { font-size: 24px; letter-spacing: -.02em; }
.contatti__mail a + a { color: rgba(243,241,236,.6); }
.form { display: flex; flex-direction: column; gap: 26px; border: 1px solid rgba(243,241,236,.16); padding: 38px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.field > span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243,241,236,.72);
}
.field input, .field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(243,241,236,.3);
  padding: 10px 0;
  font-size: 16px;
  outline: none;
  width: 100%;
  min-width: 0;
}
.field textarea { resize: none; }
.form__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--accent-lift);
}
.form__submit { align-self: flex-start; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; cursor: pointer; }
.consent input {
  appearance: none;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  border: 1px solid rgba(243,241,236,.34);
  background: transparent;
  cursor: pointer;
}
.consent input:checked { background: var(--accent); border-color: var(--accent); }
.consent input:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 2px; }
.consent > span { font-size: 13px; line-height: 1.6; color: rgba(243,241,236,.72); text-wrap: pretty; }
.consent a { color: var(--accent-lift); text-underline-offset: 3px; }
.consent a:hover { color: var(--paper); }

/* ==========================================================================
   Manifesto
   ========================================================================== */
.man-hero { background: var(--ink); color: var(--paper); padding: 149px var(--pad) 72px; }
.man-hero__meta {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(243,241,236,.7);
}
.man-hero__meta span:first-child { color: var(--accent); }
.man-hero h1 {
  margin: 0;
  font-size: clamp(38px,5.6vw,88px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 500;
  max-width: 22ch;
}
.man-hero h1 [data-line]:last-child { color: var(--accent); }
.man-hero__sub {
  margin: 0;
  max-width: 60ch;
  font-size: clamp(19px,1.7vw,26px);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: rgba(243,241,236,.78);
  animation-delay: .6s;
}
.man-hero__sub strong { font-weight: 500; color: var(--paper); }

.man-body { padding: 130px var(--pad) 150px; }
.man-body article {
  display: flex;
  flex-direction: column;
  gap: 64px;
  font-size: clamp(19px,1.5vw,23px);
  line-height: 1.62;
  color: rgba(11,11,11,.82);
  text-wrap: pretty;
}
.man-body article > p { margin: 0; max-width: 62ch; }
.values { display: flex; flex-direction: column; border-top: 1px solid var(--hair-l); }
.value {
  display: grid;
  grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
  gap: 28px 56px;
  padding: 40px 0;
  border-bottom: 1px solid var(--hair-l);
}
.value h2 {
  margin: 0;
  font-size: clamp(26px,2.6vw,38px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 500;
  color: var(--ink);
}
.value p { margin: 0; max-width: 52ch; }

.cta-dark { background: var(--ink); color: var(--paper); padding: 96px var(--pad); }
.cta-dark__row {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 36px;
}

/* ==========================================================================
   Team
   ========================================================================== */
.team-hero { background: var(--ink); color: var(--paper); padding: 149px var(--pad) 96px; }
.team-hero h1 {
  margin: 0;
  font-size: clamp(44px,7.4vw,124px);
  line-height: .96;
  letter-spacing: -.045em;
  font-weight: 500;
  max-width: 20ch;
}
.team-hero p {
  margin: 0;
  max-width: 54ch;
  font-size: 19px;
  line-height: 1.55;
  color: rgba(243,241,236,.82);
  animation-delay: .5s;
}
.member-sec { padding: 96px var(--pad) 0; }
.member-sec + .member-sec { padding-top: 90px; }
.member {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0,.55fr) minmax(0,1.45fr);
  gap: 70px;
  align-items: start;
}
.member--flip { grid-template-columns: minmax(0,1.45fr) minmax(0,.55fr); }
.member__photo { position: relative; aspect-ratio: 1; background: #E4E1DA; overflow: hidden; }
.member__photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
}
.member__body { display: flex; flex-direction: column; gap: 26px; }
.member__body h2 { margin: 0; font-size: clamp(34px,5vw,76px); line-height: 1; letter-spacing: -.04em; font-weight: 500; }
.member__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(11,11,11,.78);
  text-wrap: pretty;
}
.member__text p { margin: 0; }
.member__facts { margin-top: 4px; border-top-color: rgba(11,11,11,.14); background: rgba(11,11,11,.14); }
.member__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

/* Carosello collaboratori */
.collab { padding: 96px 0 40px; }
.collab__inner {
  border-top: 1px solid var(--hair-l);
  margin: 0 var(--pad);
  padding-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.collab__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.collab__nav { display: flex; gap: 10px; }
.car {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 0 var(--pad) 6px;
  margin: 0 calc(var(--pad) * -1);
  align-items: stretch;
  scrollbar-width: thin;
  scrollbar-color: rgba(11,11,11,.3) transparent;
}
.car::-webkit-scrollbar { height: 6px; }
.car::-webkit-scrollbar-thumb { background: rgba(11,11,11,.28); }
.slide {
  flex: 0 0 clamp(280px, 32%, 420px);
  scroll-snap-align: start;
  background: var(--paper-2);
  padding: 34px 30px 38px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.slide--dark { background: var(--ink); color: var(--paper); }
.slide h3 { margin: 0; font-size: clamp(23px,2.2vw,30px); line-height: 1.08; letter-spacing: -.03em; font-weight: 500; }
.slide p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(11,11,11,.76); text-wrap: pretty; }
.slide--dark p { color: rgba(243,241,236,.82); }
.slide__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--hair-l);
  padding-top: 18px;
  margin-top: auto;
}
.slide--dark .slide__foot { gap: 14px; border-top-color: rgba(243,241,236,.22); }
.slide__val { font-size: 16.5px; letter-spacing: -.015em; }

.squad { background: var(--ink); color: var(--paper); padding: 104px var(--pad) 96px; }
.squad__head { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: end; }
.squad__cells { border-top-color: var(--hair-d); background: rgba(243,241,236,.22); }
.squad__cells p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(243,241,236,.82); }

.cta-light { padding: 88px var(--pad) 48px; background: var(--paper); }
.cta-light__row {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 40px;
  align-items: center;
}
.cta-light__col { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.foot-sec { background: var(--ink); color: var(--paper); padding: 0 var(--pad) 28px; }
.err { min-height: 78vh; display: flex; align-items: center; padding-bottom: 120px; }
.err .man-hero__sub a { color: var(--accent-lift); }
.err .man-hero__sub a:hover { color: var(--paper); }
.foot-sec .foot { margin-top: 56px; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 860px) {
  :root { --pad: 18px; }
  html { scroll-padding-top: 74px; }

  .head { padding: 12px 16px; }
  .desknav { display: none; }
  .burger { display: flex; }
  .tabbar { display: flex; }

  .foot { grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 70px; padding-bottom: 110px; }

  .hero { min-height: 88dvh; }
  .hero__glow { left: 50%; top: 4%; width: 118vw; transform: translateX(-50%); opacity: .55; }
  .hero__meta { padding-top: 131px; font-size: 11.5px; }
  .hero__meta > span:last-child { white-space: normal; }
  .hero__h1 { padding-top: 56px; font-size: clamp(38px,11.4vw,72px); line-height: 1.02; letter-spacing: -.03em; }
  .hero__foot { grid-template-columns: 1fr; gap: 22px; padding: 28px 0 40px; margin-top: 32px; }
  .hero__foot p { font-size: 15.5px; line-height: 1.55; }
  .marquee__run { animation-duration: 18s; }
  .marquee__run--b { animation-duration: 24s; }

  .studio__grid { grid-template-columns: 1fr; gap: 40px; }
  .studio__aside { position: static; }
  .studio__grid h2 { font-size: clamp(30px,8.4vw,44px); }
  .studio__copy { grid-template-columns: 1fr; gap: 26px; }

  .servizi__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .srv { grid-template-columns: 40px minmax(0,1fr); gap: 6px 16px; padding: 22px 8px; }
  .srv p { grid-column: 2; }
  .srv .arrow { display: none; }

  .pin-sec p { font-size: clamp(34px,11vw,60px); }
  .team-sec__head { grid-template-columns: 1fr; gap: 34px; }

  .lavori-sec__head { flex-direction: column; align-items: flex-start; }
  .work-grid { grid-template-columns: 1fr; gap: 34px; }
  .work { grid-column: auto !important; }
  .work__year { font-size: 10px; }

  .contatti { padding: 90px var(--pad) 0; }
  .contatti__grid { grid-template-columns: 1fr; gap: 48px; }
  .form { padding: 24px; }
  .form__row { grid-template-columns: 1fr; gap: 22px; }
  .contatti .btn { min-height: 48px; }

  .man-body article > div[class="values"],
  .value { grid-template-columns: 1fr; gap: 14px; padding: 30px 0; }
  .man-hero h1 { font-size: clamp(40px,11vw,76px); }
  .value h2 { font-size: clamp(30px,8vw,48px); }

  .team-hero { padding-top: 133px; }
  .team-hero h1 { font-size: clamp(38px,11vw,72px); line-height: 1.02; }
  .member, .member--flip { grid-template-columns: 1fr; gap: 24px; }
  .member--flip .member__body { order: 2; }
  .member__body h2 { font-size: clamp(28px,8vw,46px); }
  .squad__head { grid-template-columns: 1fr; gap: 30px; }

  .collab { padding: 70px 0 28px; }
  .collab__inner { margin: 0 var(--pad); padding-top: 32px; gap: 20px; }
  .car { padding: 0 var(--pad) 8px; margin: 0 calc(var(--pad) * -1); gap: 14px; }
  .slide { flex: 0 0 84%; padding: 26px 22px 30px; }

  .cta-light { padding-bottom: 30px; }
  .cta-dark__row, .cta-light__row { gap: 28px; }
}