/* ═══════════════════════════════════════
   ROOT & RESET
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.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; }

:root {
  /* Brand palette */
  --p:        #026672;
  --p-dark:   #023D46;
  --p-mid:    #025C66;
  --p-light:  #1CABB0;
  --p-dim:    rgba(28,171,176,.10);
  --p-glow:   rgba(28,171,176,.22);

  /* Surfaces */
  --bg:    #0A0A0A;
  --s1:    #111111;
  --s2:    #181818;
  --s3:    #202020;

  /* Borders */
  --bdr:   rgba(255,255,255,.07);
  --bdr-m: rgba(255,255,255,.13);
  --bdr-s: rgba(255,255,255,.04);

  /* Text */
  --tx:    #EDEAE4;
  --tx-2:  #96918A;
  --tx-3:  #857F76;
  --white: #FFFFFF;

  /* Typography */
  --mono: 'Roboto Mono', 'Courier New', monospace;
  --sans: 'Inter', system-ui, sans-serif;

  /* Sistema tipografico — restyling chirurgico */
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Roboto Mono', 'Courier New', monospace;

  /* Layout */
  --w:    1280px;
  --gx:   clamp(1.375rem, 4.5vw, 3rem);
  --spy:  clamp(5.5rem, 11vw, 9rem);

  /* Easing */
  --ease:   cubic-bezier(.25,.46,.45,.94);
  --ease-o: cubic-bezier(.16,1,.3,1);
}

/* ═══════════════════════════════════════
   LIGHT MODE — variabili
   Hero, Inside e CTA-block restano sempre
   scure (foto/video di sfondo): vedi blocco
   di scope-lock più sotto.
═══════════════════════════════════════ */
html[data-theme="light"] {
  --p:        #026672;
  --p-dark:   #023D46;
  --p-mid:    #025C66;
  --p-light:  #026A73;
  --p-dim:    rgba(2,102,114,.08);
  --p-glow:   rgba(2,102,114,.16);

  --bg:    #F6F4EF;
  --s1:    #FFFFFF;
  --s2:    #EFEBE3;
  --s3:    #E4DFD3;

  --bdr:   rgba(10,10,10,.09);
  --bdr-m: rgba(10,10,10,.16);
  --bdr-s: rgba(10,10,10,.05);

  --tx:    #16150F;
  --tx-2:  #625E54;
  --tx-3:  #726B5D;
  --white: #FFFFFF;
}

/* Sezioni con foto/video di sfondo o chiusura scura — restano sempre scure */
.hero, .inside, .cta-block, .reviews {
  --bg:    #0A0A0A;
  --s1:    #111111;
  --s2:    #181818;
  --s3:    #202020;
  --bdr:   rgba(255,255,255,.07);
  --bdr-m: rgba(255,255,255,.13);
  --bdr-s: rgba(255,255,255,.04);
  --tx:    #EDEAE4;
  --tx-2:  #96918A;
  --tx-3:  #857F76;
  --p-light: #1CABB0;
  --p-dim:   rgba(28,171,176,.10);
  --p-glow:  rgba(28,171,176,.22);
}

/* Fix puntuali per il tema chiaro */
html[data-theme="light"] .btn-inv {
  color: #F6F4EF;
}
html[data-theme="light"] .footer-logo img {
  filter: invert(1);
}
html[data-theme="light"] .work-card-logo img {
  filter: brightness(0) invert(0);
  opacity: .55;
}
html[data-theme="light"] .work-card:hover .work-card-logo img {
  opacity: .85;
}
html[data-theme="light"] .logo-cell.logo-dainese img {
  filter: grayscale(1) brightness(.5);
}
html[data-theme="light"] .logo-cell.logo-dainese:hover img {
  filter: grayscale(1) brightness(.85);
}
html[data-theme="light"] body {
  background: var(--bg);
}

/* ═══════════════════════════════════════
   TEMA CHIARO — NAVBAR E MENU
   Corregge il contrasto: nel tema chiaro logo, link e burger
   ereditavano i colori pensati per il fondo scuro.
   La modalità scura non viene toccata.
═══════════════════════════════════════ */

/* Barra: fondo avorio e bordo visibile dopo lo scroll */
html[data-theme="light"] .nav.solid {
  background: rgba(246,244,239,.94);
  border-bottom-color: rgba(10,10,10,.12);
}

/* Logo scuro (il file SVG resta bianco e non viene modificato) */
html[data-theme="light"] .nav-logo img { filter: brightness(0); }

/* Link in antracite, senza ombra chiara ereditata dal tema scuro */
html[data-theme="light"] .nav-links a {
  color: #16150F;
  text-shadow: none;
}
html[data-theme="light"] .nav-links a:hover { color: var(--p); }
html[data-theme="light"] .nav-links a[aria-current="page"] { color: #16150F; }

/* Burger in antracite */
html[data-theme="light"] .nav-burger span { background: #16150F; }

/* ── Eccezione: homepage con hero fotografica ──
   Finché la navbar è sovrapposta alla foto scura (nav senza .solid)
   logo, link e burger restano chiari. Con .solid tornano scuri. */
html[data-theme="light"] body.has-hero .nav:not(.solid) .nav-logo img { filter: none; }
html[data-theme="light"] body.has-hero .nav:not(.solid) .nav-links a {
  color: rgba(242,239,233,.88);
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
html[data-theme="light"] body.has-hero .nav:not(.solid) .nav-links a:hover,
html[data-theme="light"] body.has-hero .nav:not(.solid) .nav-links a[aria-current="page"] { color: #FFFFFF; }
html[data-theme="light"] body.has-hero .nav:not(.solid) .nav-burger span { background: #EDEAE4; }

/* ── Menu mobile aperto: sempre scuri sul fondo avorio ── */
html[data-theme="light"] body.has-hero.menu-open .nav:not(.solid) .nav-logo img,
html[data-theme="light"] body.menu-open .nav-logo img { filter: brightness(0); }
html[data-theme="light"] body.has-hero.menu-open .nav:not(.solid) .nav-burger span,
html[data-theme="light"] body.menu-open .nav-burger span { background: #16150F; }

html[data-theme="light"] .nav-overlay { background: rgba(246,244,239,.98); }
html[data-theme="light"] .nav-overlay a { color: #16150F; }
html[data-theme="light"] .nav-overlay a:hover,
html[data-theme="light"] .nav-overlay a[aria-current="page"] { color: var(--p); }

/* Nessuna transizione durante il cambio tema: evita colori intermedi */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans); /* Base in Inter per leggibilità */
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

::selection { background: var(--p); color: #fff; }
a { color: inherit; text-decoration: none; }
img, video, svg, canvas, iframe { display: block; max-width: 100%; }
svg { height: auto; }
button { font-family: var(--font-body); border: none; background: none; cursor: pointer; }
input, select, textarea { font-family: var(--sans); }

/* Focus ring — accessibilità tastiera */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--p-light);
  outline-offset: 3px;
  border-radius: 4px;
}
body.touch :focus-visible { outline: none; }

/* ═══════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════ */
#pbar { position:fixed; top:0; left:0; height:1.5px; width:0%; background:var(--p); z-index:1000; }

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.wrap { width:100%; max-width:var(--w); margin:0 auto; padding:0 var(--gx); }
.section { padding: var(--spy) 0; }

/* Eyebrow label */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--p-light);
}

/* Reveal system */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease-o), transform .55s var(--ease-o);
}
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-d="1"]{ transition-delay:.08s; }
[data-reveal][data-d="2"]{ transition-delay:.16s; }
[data-reveal][data-d="3"]{ transition-delay:.24s; }
[data-reveal][data-d="4"]{ transition-delay:.32s; }
[data-reveal][data-d="5"]{ transition-delay:.4s; }
[data-reveal][data-d="6"]{ transition-delay:.48s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 1rem 2rem;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-radius: 12px;
  transition: all .28s var(--ease);
  white-space: nowrap;
}
.btn .arr { transition: transform .25s var(--ease); display:inline-block; }
.btn:hover .arr { transform: translateX(5px); }

.btn-fill  { background:var(--p); color:var(--white); border:1px solid var(--p); }
.btn-fill:hover  { background:var(--p-light); border-color:var(--p-light); transform:translateY(-2px); }

.btn-line  { background:transparent; color:var(--tx); border:1px solid var(--bdr-m); }
.btn-line:hover  { border-color:var(--p); color:var(--p-light); }

.btn-inv   { background:var(--tx); color:var(--p-dark); border:1px solid var(--tx); font-weight:700; }
.btn-inv:hover   { background:var(--white); border-color:var(--white); transform:translateY(-2px); }
.btn-inv .arr { transition:transform .25s var(--ease); }
.btn-inv:hover .arr { transform:translateX(5px); }

.btn-inv-out { background:transparent; color:var(--tx); border:1px solid rgba(237,234,228,.2); }
.btn-inv-out:hover { border-color:rgba(237,234,228,.5); background:rgba(237,234,228,.07); }

.btn-ghost { background:transparent; color:var(--tx-2); border:none; padding-left:0; padding-right:0; font-size:.75rem; }
.btn-ghost:hover { color:var(--p-light); }

.btn-sm { padding:.75rem 1.5rem; font-size:.625rem; }

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 500;
  padding: 1.375rem var(--gx);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .5s var(--ease), backdrop-filter .5s;
}
.nav.solid {
  background: rgba(10,10,10,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-logo {
  display: flex;
  align-items: center;
  width: 220px;
  flex-shrink: 0;
}
.nav-logo img {
  display: block;
  width: 220px;
  height: auto;
  max-height: 42px;
  object-fit: contain;
  opacity: .95;
  transition: opacity .2s;
}
@media(max-width:767px) {
  .nav-logo { width: 160px; }
  .nav-logo img { width: 160px; max-height: 32px; }
}
.nav-logo:hover img { opacity: 1; }

.nav-right { display:flex; align-items:center; gap:1.5rem; }

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--bdr-m);
  border-radius: 50%;
  background: var(--s2);
  color: var(--tx-2);
  flex-shrink: 0;
  transition: border-color .2s, background .2s, color .2s;
}
.theme-toggle:hover { border-color:var(--p); color:var(--p-light); }
.theme-icon { width:16px; height:16px; }
.theme-icon-moon { display:none; }
html[data-theme="light"] .theme-icon-sun { display:none; }
html[data-theme="light"] .theme-icon-moon { display:block; }

.nav-links { display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-links a {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: rgba(242,239,233,.88);
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: color .2s;
}
.nav-links a:hover { color:#FFFFFF; }
.nav-cta-lnk {
  background: #026672 !important;
  color: #FFFFFF !important;
  border: 1px solid #026672 !important;
  font-weight: 600 !important;
  text-shadow: none;
  padding: .625rem 1.25rem;
  border-radius: 10px;
  transition: background .2s, color .2s, border-color .2s !important;
}
.nav-cta-lnk:hover { background:#F2EFE9 !important; color:#16150F !important; border-color:#F2EFE9 !important; }

.nav-burger { display:none; flex-direction:column; gap:5px; padding:4px; }
.nav-burger span { display:block; width:22px; height:1px; background:var(--tx); transition:all .3s var(--ease); }
.nav-burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-overlay {
  position:fixed; inset:0; z-index:490;
  background:rgba(10,10,10,.97);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.nav-overlay.open { opacity:1; pointer-events:all; }
.nav-overlay a { font-family:var(--font-body); font-size:clamp(1.375rem,5vw,2rem); font-weight:600; letter-spacing:0; text-transform:uppercase; color:rgba(242,239,233,.85); transition:color .2s; }
.nav-overlay a:hover { color:var(--p-light); }

/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--bg);
}
.hero-photo {
  position:absolute; inset:0;
  background: url('/assets/hero-studio.jpg') center 35% / cover no-repeat;
  transform:scale(1.04);
  transition:transform 8s var(--ease);
}
.hero-photo.loaded { transform:scale(1); }
.hero-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(10,10,10,.72) 0%, rgba(10,10,10,.3) 60%, rgba(10,10,10,.1) 100%),
    linear-gradient(to bottom, rgba(10,10,10,.15) 0%, rgba(10,10,10,.5) 65%, rgba(10,10,10,.97) 100%);
}
.hero-grain {
  position:absolute; inset:0; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px; pointer-events:none;
}

.hero-body {
  position:relative; z-index:2;
  padding: clamp(5rem,12vw,9rem) var(--gx) clamp(4rem,8vw,6rem);
  width:100%; max-width:var(--w); margin:0 auto;
}

.hero-tag {
  display:inline-flex; align-items:center; gap:.625rem; margin-bottom:2.5rem;
  opacity:0; animation:fadeUp .8s var(--ease-o) .3s forwards;
}
.hero-tag-dot { width:5px; height:5px; border-radius:50%; background:var(--p-light); animation:blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.hero-tag-txt { font-family:var(--mono); font-size:.5625rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--p-light); }

.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(3.25rem,10vw,9.5rem);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--tx);
  margin-bottom: .3em;
  opacity:0; animation:fadeUp .9s var(--ease-o) .45s forwards;
}
.hero-h1 em { font-style:normal; color:var(--p-light); display:block; }

.hero-sub {
  font-size: clamp(1rem,1.8vw,1.25rem);
  font-weight: 300;
  color: var(--tx-2);
  max-width: 440px;
  line-height: 1.65;
  margin-bottom: 3rem;
  opacity:0; animation:fadeUp .9s var(--ease-o) .6s forwards;
}

/* Dual CTA layout */
.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  opacity:0; animation:fadeUp .9s var(--ease-o) .75s forwards;
}
.hero-ctas-row { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--tx-2);
  border-bottom: 1px solid var(--bdr-m);
  padding-bottom: .1875rem;
  transition: color .2s, border-color .2s;
}
.hero-link .arr { display:inline-block; transition:transform .25s var(--ease); }
.hero-link:hover { color: var(--p-light); border-color: var(--p-light); }
.hero-link:hover .arr { transform: translateX(5px); }

@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }

.hero-scroll {
  position:absolute; bottom:2.5rem; right:var(--gx); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  writing-mode:vertical-rl; font-family:var(--mono); font-size:.5rem; letter-spacing:.22em; text-transform:uppercase; color:var(--tx-3);
  opacity:0; animation:fadeIn .8s var(--ease-o) 1.2s forwards;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.hero-scroll-line { width:1px; height:44px; background:linear-gradient(to bottom,var(--p),transparent); margin-top:.5rem; animation:scrollPulse 2s ease-in-out infinite 1.5s; }
@keyframes scrollPulse {
  0%   { transform:scaleY(0); transform-origin:top; opacity:0; }
  40%  { transform:scaleY(1); transform-origin:top; opacity:1; }
  60%  { transform:scaleY(1); transform-origin:bottom; opacity:1; }
  100% { transform:scaleY(0); transform-origin:bottom; opacity:0; }
}

/* ═══════════════════════════════════════
   INTRO
═══════════════════════════════════════ */
.intro { background:var(--bg); }

.intro-grid { display:grid; grid-template-columns:1fr; gap:5rem; }
@media(min-width:1024px){ .intro-grid{ grid-template-columns:5fr 6fr; gap:8rem; align-items:start; } }

.intro-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem,4.5vw,3.5rem);
  font-weight: 900;
  letter-spacing: -.005em;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 1rem 0 2rem;
}
.intro-heading em { font-style:normal; color:var(--p-light); }

.intro-body {
  font-size: clamp(1rem,1.5vw,1.125rem);
  color: var(--tx-2);
  line-height: 1.85;
  margin-bottom: 1.25rem;
}
.intro-body strong { color:var(--tx); font-weight:500; }

/* ═══════════════════════════════════════
   INSIDE HYPELESS — VIDEO SECTION
═══════════════════════════════════════ */
.inside {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.inside-video-wrap {
  position: relative;
  width: 100%;
  /* Passaggio immersivo compatto, non una seconda hero */
  aspect-ratio: 16/6.5;
  max-height: 62vh;
  overflow: hidden;
  background: var(--s2);
  border-radius: 20px;
}

.inside-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.inside-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(10,10,10,.55) 0%, rgba(10,10,10,.15) 60%, rgba(10,10,10,.1) 100%),
    linear-gradient(to bottom, rgba(10,10,10,.3) 0%, transparent 30%, rgba(10,10,10,.6) 85%, rgba(10,10,10,.95) 100%);
}

.inside-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(2rem,5vw,4rem);
}

.inside-content-inner {
  width: 100%;
  max-width: var(--w);
  margin: 0 auto;
  padding: 0 var(--gx);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.inside-label {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--p-light);
  margin-bottom: .875rem;
}

.inside-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem,3.5vw,3rem);
  font-weight: 900;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--tx);
  line-height: 1.1;
}
.inside-title em { font-style:normal; color:var(--p-light); }

.inside-sub {
  font-size: clamp(.9375rem,1.5vw,1.0625rem);
  color: rgba(237,234,228,.6);
  max-width: 320px;
  line-height: 1.6;
  text-align: right;
}

/* Fallback placeholder se il video non carica */
.inside-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  color:var(--tx-3); font-family:var(--mono); font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase;
  background: linear-gradient(135deg, var(--s2) 0%, var(--bg) 100%);
}
.inside-placeholder svg { width:32px; height:32px; opacity:.2; }

/* ═══════════════════════════════════════
   SERVIZI
═══════════════════════════════════════ */
.services { background:var(--s1); }
.services-head { margin-bottom:4rem; }

.svc-list { border-top:1px solid var(--bdr); }

.svc-sub-label {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx-2);
  margin-top: 3rem;
  margin-bottom: -1px;
}
.svc-list-secondary { opacity: .88; }
.svc-list-secondary .svc-n { color: var(--tx-3); }
.svc-item {
  border-bottom:1px solid var(--bdr);
  display:grid;
  grid-template-columns: 3.5rem 1fr;
  gap:2rem;
  padding:2.25rem 0;
  align-items:start;
  transition:background .25s;
  position:relative; overflow:hidden;
}
.svc-item::after {
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--p); transform:scaleY(0); transform-origin:bottom; transition:transform .35s var(--ease-o);
}
.svc-item:hover::after { transform:scaleY(1); }
.svc-item:hover { background:rgba(2,102,114,.05); }

.svc-n { font-family:var(--mono); font-size:.5625rem; font-weight:700; letter-spacing:.14em; color:var(--p-light); padding-top:.3rem; }
.svc-title {
  font-family: var(--font-display);
  font-size: clamp(1rem,1.8vw,1.25rem);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tx);
  margin-bottom: .75rem;
}
.svc-desc {
  font-size: clamp(1rem,1.4vw,1.0625rem);
  color: var(--tx-2);
  line-height: 1.7;
  max-width: 520px;
}
@media(max-width:639px){
  .svc-item { grid-template-columns:2.5rem 1fr; }
}

/* ═══════════════════════════════════════
   SOUND DESIGN & BRAND AUDIO
═══════════════════════════════════════ */
.brandaudio { background:var(--bg); }

.ba-grid { display:grid; grid-template-columns:1fr; gap:5rem; margin-top:4rem; }
@media(min-width:1024px){ .ba-grid{ grid-template-columns:5fr 6fr; gap:8rem; align-items:start; } }

.ba-intro-heading {
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3.25rem);
  font-weight:900;
  letter-spacing:-.005em;
  text-transform:uppercase;
  line-height:1.1;
  margin:1rem 0 1.75rem;
}
.ba-intro-heading em { font-style:normal; color:var(--p-light); }

.ba-intro-body {
  font-size:clamp(1rem,1.4vw,1.125rem);
  color:var(--tx-2);
  line-height:1.85;
  margin-bottom:1.25rem;
}
.ba-intro-body strong { color:var(--tx); font-weight:500; }

.ba-services { border-top:1px solid var(--bdr); }
.ba-svc {
  border-bottom:1px solid var(--bdr);
  display:grid; grid-template-columns:2.5rem 1fr;
  gap:1.5rem; padding:1.75rem 0; align-items:start;
  transition:background .25s;
}
.ba-svc:hover { background:rgba(2,102,114,.05); }
.ba-svc-n { font-family:var(--mono); font-size:.5rem; font-weight:700; letter-spacing:.14em; color:var(--p-light); padding-top:.3rem; }
.ba-svc-title {
  font-family:var(--font-display);
  font-size:clamp(.875rem,1.5vw,1.0625rem);
  font-weight:900; letter-spacing:0; text-transform:uppercase; color:var(--tx); margin-bottom:.5rem;
}
.ba-svc-sub {
  display:block; font-family:var(--font-body); font-size:.75rem; font-weight:500;
  letter-spacing:.02em; text-transform:none; color:var(--tx-2); margin-bottom:.625rem;
}
.ba-svc-desc { font-size:clamp(.9375rem,1.3vw,1rem); color:var(--tx-2); line-height:1.65; }
.ba-svc:hover .ba-svc-title { color:var(--p-light); transition:color .2s; }

@media(max-width:639px){ .ba-svc{ grid-template-columns:2rem 1fr; } }

/* Brand CTA box */
.ba-cta-box {
  background:var(--s1);
  border:1px solid var(--bdr);
  padding:2.5rem;
  margin-top:2.5rem;
  position:relative;
  overflow:hidden;
  border-radius: 28px;
}
.ba-cta-box::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--p-dim) 0%, transparent 60%);
}
.ba-cta-box-inner { position:relative; }
.ba-cta-box-label { font-family:var(--font-body); font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--p-light); margin-bottom:.875rem; }
.ba-cta-box-text { font-size:clamp(1rem,1.5vw,1.125rem); color:var(--tx); line-height:1.65; margin-bottom:1.5rem; }

/* ═══════════════════════════════════════
   METODO
═══════════════════════════════════════ */
.method { background:var(--s1); }

.method-grid { display:grid; grid-template-columns:1fr; gap:5rem; margin-top:4rem; }
@media(min-width:1024px){ .method-grid{ grid-template-columns:1fr 1.7fr; gap:8rem; } }

.method-sticky { position:sticky; top:7rem; height:fit-content; }
@media(max-width:1023px){ .method-sticky{ position:static; } }

.method-title {
  font-family:var(--font-display); font-size:clamp(2rem,4vw,3.25rem); font-weight:900;
  letter-spacing:0; text-transform:uppercase; line-height:1.1; margin:1rem 0 1.75rem;
}
.method-intro-txt { font-size:clamp(1rem,1.4vw,1.0625rem); color:var(--tx-2); line-height:1.85; }

.step {
  display:grid; grid-template-columns:4.5rem 1fr; gap:2rem;
  padding:2.25rem 0; border-bottom:1px solid var(--bdr); position:relative;
}
.step:first-child { border-top:1px solid var(--bdr); }
.step-n {
  font-family:var(--mono); font-size:clamp(2rem,3.5vw,2.875rem); font-weight:700;
  color:var(--s3); line-height:1; padding-top:.2rem; transition:color .3s; letter-spacing:-.02em;
}
.step:hover .step-n { color:var(--p-dark); }
.step-t { font-family:var(--font-display); font-size:.875rem; font-weight:900; letter-spacing:.02em; text-transform:uppercase; color:var(--tx); margin-bottom:.625rem; }
.step-b { font-size:clamp(1rem,1.4vw,1.0625rem); color:var(--tx-2); line-height:1.7; }
.step:hover .step-t { color:var(--p-light); transition:color .2s; }

/* ═══════════════════════════════════════
   PER CHI È
═══════════════════════════════════════ */
.forwhom { background:var(--bg); }

.forwhom-grid { max-width: 640px; }

.forwhom-title {
  font-family:var(--font-display); font-size:clamp(2rem,4vw,3.25rem); font-weight:900;
  letter-spacing:-.005em; text-transform:uppercase; line-height:1.1; margin:1rem 0 2.5rem;
}
.forwhom-title em { font-style:normal; color:var(--p-light); }

.fw-list { list-style:none; }
.fw-item {
  display:flex; align-items:flex-start; gap:1.25rem;
  padding:1.25rem 0; border-bottom:1px solid var(--bdr);
  font-size:clamp(1rem,1.4vw,1.0625rem);
  color:var(--tx-2); line-height:1.55; transition:color .2s;
}
.fw-item::before {
  content:''; display:block; flex-shrink:0; width:14px; height:1px;
  background:var(--p); margin-top:.85em;
}
.fw-item strong { color:var(--tx); font-weight:600; }
.fw-item:first-child { border-top:1px solid var(--bdr); }
.fw-item:hover { color:var(--tx); }
.fw-item:hover::before { background:var(--p-light); }

.fw-quote { border-left:2px solid var(--p); padding:1.5rem 1.875rem; margin-top:2rem; background:var(--p-dim); border-radius:0 16px 16px 0; }
.fw-quote-text { font-size:clamp(1rem,1.6vw,1.125rem); color:var(--tx); line-height:1.6; }

/* ═══════════════════════════════════════
   STUDIO
═══════════════════════════════════════ */
.studio { background:var(--s1); }
.studio-heading { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.25rem); font-weight:900; letter-spacing:-.005em; text-transform:uppercase; line-height:1.1; margin:1rem 0 1.25rem; }
.studio-subtext { font-size:clamp(1rem,1.4vw,1.0625rem); color:var(--tx-2); max-width:480px; line-height:1.8; margin-bottom:3.5rem; }

/* ── Studio: immagine protagonista ── */
.studio-hero-img {
  width: 100%;
  aspect-ratio: 16/7;
  background: var(--s2);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--bdr);
}
.studio-hero-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .88;
  transition: opacity .6s var(--ease), transform 1s var(--ease);
}
.studio-hero-img:hover img { opacity: 1; transform: scale(1.012); }

/* ── Studio: strip orizzontale ── */
.studio-strip-wrap {
  position: relative;
  margin-top: 2px;
}
.studio-strip {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.studio-strip::-webkit-scrollbar { display: none; }
.studio-strip.dragging { cursor: grabbing; }

.strip-item {
  flex: 0 0 auto;
  height: clamp(200px, 28vw, 420px);
  background: var(--s2);
  overflow: hidden;
  scroll-snap-align: start;
  position: relative;
}
.strip-item img {
  height: 100%;
  width: auto;
  object-fit: cover;
  opacity: .75;
  transition: opacity .35s, transform .5s var(--ease);
  display: block;
  pointer-events: none;
  user-select: none;
}
.strip-item:hover img { opacity: 1; transform: scale(1.04); }

/* Frecce navigazione */
.strip-nav {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}
.strip-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--bdr-m);
  border-radius: 50%;
  background: var(--s2);
  color: var(--tx-2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;
}
.strip-btn:hover { background: var(--p); border-color: var(--p); color: #fff; }
.strip-btn svg { width: 14px; height: 14px; pointer-events: none; }

/* Indicatore scroll */
.strip-progress {
  height: 1px;
  background: var(--bdr);
  margin-top: .75rem;
  position: relative;
  overflow: hidden;
}
.strip-progress-bar {
  height: 100%;
  background: var(--p-light);
  width: 20%;
  transition: width .15s;
}

.studio-body { display:grid; grid-template-columns:1fr; gap:2rem; margin-top:2.5rem; }
@media(min-width:768px){ .studio-body{ grid-template-columns:1fr 1fr; gap:4rem; } }
.studio-body p { font-size:clamp(1rem,1.4vw,1.0625rem); color:var(--tx-2); line-height:1.85; }

/* Mobile */
@media(max-width:767px) {
  .studio-hero-img { aspect-ratio: 4/3; }
  .strip-item { height: 220px; }
  .strip-nav { display: none; }
}

.studio-meta { display:flex; align-items:flex-start; gap:3rem; flex-wrap:wrap; margin-top:2.25rem; padding-top:2.25rem; border-top:1px solid var(--bdr); }
.studio-meta-item strong { display:block; font-family:var(--mono); font-size:.5625rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--tx-2); margin-bottom:.375rem; }
.studio-meta-item span { font-size:.9375rem; color:var(--tx-3); line-height:1.6; }

/* ═══════════════════════════════════════
   COLLABORAZIONI — FASCIA COMPATTA
═══════════════════════════════════════ */
.collab-compact {
  background: var(--bg);
  border-bottom: 1px solid var(--bdr);
  padding: 2.75rem 0;
}
.collab-compact-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.collab-compact-h {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--tx);
}
.collab-compact-h em { font-style:normal; color:var(--p-light); }

/* Logo grid */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--bdr);
  border: 1px solid var(--bdr);
}
@media(min-width:640px)  { .logo-grid{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:1024px) { .logo-grid{ grid-template-columns:repeat(7,1fr); } }

.logo-cell {
  background: var(--s1);
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem .75rem;
  position: relative;
  overflow: hidden;
  transition: background .3s;
  border-radius: 14px;
}
.logo-cell::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--p-dim);
  opacity: 0;
  transition: opacity .3s;
}
.logo-cell:hover { background:var(--s2); }
.logo-cell:hover::before { opacity: 1; }

.logo-cell img {
  max-width: 75%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) brightness(.65);
  transition: filter .4s var(--ease);
  position: relative;
  z-index: 1;
}
.logo-cell:hover img { filter: grayscale(1) brightness(1); }

/* Kemon — logo piccolo, tenerlo proporzionato */
.logo-cell.logo-kemon img {
  max-height: 36px;
  max-width: 55%;
}

/* Nike, Dainese, Realme — loghi grandi */
.logo-cell.logo-large img {
  max-height: 64px;
  max-width: 85%;
}

/* Dainese — invertito + stesso trattamento degli altri loghi grandi */
.logo-cell.logo-dainese img {
  max-height: 64px;
  max-width: 85%;
  filter: grayscale(1) invert(1) brightness(.65);
}
.logo-cell.logo-dainese:hover img {
  filter: grayscale(1) invert(1) brightness(1);
}

/* ═══════════════════════════════════════
   LAVORI
═══════════════════════════════════════ */
.works { background:var(--s1); }
.works-heading { font-family:var(--font-display); font-size:clamp(2rem,4vw,3.25rem); font-weight:900; letter-spacing:-.005em; text-transform:uppercase; line-height:1.1; margin:1rem 0 1.25rem; }
.works-subtext { font-size:clamp(1rem,1.4vw,1.0625rem); color:var(--tx-2); max-width:400px; line-height:1.8; margin-bottom:3.5rem; }

.works-sub-label {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p-light);
  margin-bottom: 1rem;
}

/* ── Spotify embed ── */
.spotify-embed {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(29,185,84,.28);
  margin-bottom: 2.5rem;
  background: var(--s2);
  box-shadow: 0 0 0 1px rgba(29,185,84,.06), 0 20px 48px -24px rgba(29,185,84,.22);
  transition: border-color .3s, box-shadow .3s;
}
.spotify-embed:hover {
  border-color: rgba(29,185,84,.45);
  box-shadow: 0 0 0 1px rgba(29,185,84,.1), 0 24px 56px -24px rgba(29,185,84,.3);
}
.spotify-embed iframe { display:block; }

/* ── Portfolio cards ── */
.works-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
@media(max-width:900px){ .works-grid{ grid-template-columns:1fr; } }

.work-card {
  background: var(--s2);
  border: 1px solid var(--bdr);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .3s, transform .3s var(--ease);
}
.work-card:hover { border-color: var(--bdr-m); transform: translateY(-3px); }

.work-card-logo {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--bdr);
  background: var(--s3);
}
.work-card-logo img {
  max-height: 36px;
  max-width: 120px;
  width: auto;
  object-fit: contain;
  opacity: .7;
  filter: brightness(0) invert(1);
  transition: opacity .3s;
}
.work-card:hover .work-card-logo img { opacity: 1; }

.work-card-body {
  padding: 1.5rem 1.75rem;
  flex: 1;
}
.work-card-type {
  font-family: var(--mono);
  font-size: .5rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--p-light);
  display: block;
  margin-bottom: .625rem;
}
.work-card-title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tx);
  margin-bottom: .625rem;
}
.work-card-desc {
  font-size: .9rem;
  color: var(--tx-2);
  line-height: 1.7;
}

.work-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.75rem;
  border-top: 1px solid var(--bdr);
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tx-2);
  transition: color .2s, background .2s;
}
.work-card-cta:hover { color: var(--tx); background: var(--s3); }
.work-card-cta span { font-size: .75rem; }

/* ═══════════════════════════════════════
   RECENSIONI
═══════════════════════════════════════ */
.reviews { background: var(--bg); }
.reviews-head { max-width: 620px; margin-bottom: 3rem; }
.reviews-h {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,3.25rem);
  font-weight: 900;
  letter-spacing: -.005em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--tx);
  margin: 1rem 0 1.25rem;
}
.reviews-sub { font-size:clamp(1rem,1.4vw,1.0625rem); color:var(--tx-2); line-height:1.8; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
@media(max-width:1023px){ .reviews-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:639px){  .reviews-grid{ grid-template-columns:1fr; } }

.review-card {
  background: var(--s1);
  border: 1px solid var(--bdr);
  border-radius: 20px;
  padding: 2rem 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  transition: border-color .3s;
}
.review-card:hover { border-color: var(--bdr-m); }

.review-rating { display:flex; align-items:center; gap:.625rem; }
.review-stars { display:flex; gap:.1875rem; color:#D9A441; }
.review-stars svg { width:15px; height:15px; display:block; }
.review-rating-num { font-family:var(--mono); font-size:.75rem; font-weight:500; color:var(--tx-2); }

.review-quote {
  font-size: 1rem;
  font-style: normal;
  color: var(--tx);
  line-height: 1.75;
  flex: 1;
  margin: 0;
}

.review-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.125rem;
  border-top: 1px solid var(--bdr-s);
}
.review-name {
  font-family: var(--font-body);
  font-style: normal;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--tx);
}
.review-src { font-family:var(--font-body); font-size:.75rem; color:var(--tx-2); }

.reviews-cta { margin-top:2.5rem; }
@media(max-width:639px){
  .reviews-cta .btn { width:100%; justify-content:center; }
}

/* ═══════════════════════════════════════
   CTA FINALE — DUAL TARGET
═══════════════════════════════════════ */
.cta-block {
  background: var(--p-dark) url('/assets/studio-lounge.jpg') center center / cover no-repeat;
  position:relative; overflow:hidden; padding:var(--spy) 0;
}
.cta-block::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(2,18,22,.82) 0%, rgba(2,29,35,.88) 100%);
}
.cta-logo-bg { display:none; }

/* Ritmo verticale — sezioni a contenuto denso: spaziatura ridotta ~18% rispetto a --spy */
.services, .method, .forwhom, .form-section, .cta-block, .reviews {
  padding-top: clamp(4.5rem, 9vw, 7.25rem);
  padding-bottom: clamp(4.5rem, 9vw, 7.25rem);
}

.cta-inner-top { position:relative; text-align:center; max-width:600px; margin:0 auto; }
.cta-h { font-family:var(--font-display); font-size:clamp(2.25rem,5.5vw,4.5rem); font-weight:900; letter-spacing:-.01em; text-transform:uppercase; line-height:1.08; color:var(--tx); margin-bottom:1.25rem; }
.cta-body { font-size:clamp(1rem,1.8vw,1.125rem); color:rgba(237,234,228,.55); line-height:1.75; font-weight:300; margin-bottom:2.25rem; }

.cta-actions { position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem; }

/* ═══════════════════════════════════════
   FORM
═══════════════════════════════════════ */
.form-section { background:var(--bg); }

/* WhatsApp shortcut sopra il form */
.wa-shortcut {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1rem 1.25rem;
  background: rgba(37,210,102,.06);
  border: 1px solid rgba(37,210,102,.18);
  border-radius: 12px;
  margin-bottom: 1.5rem;
  transition: background .2s, border-color .2s;
  text-decoration: none;
}
.wa-shortcut:hover {
  background: rgba(37,210,102,.11);
  border-color: rgba(37,210,102,.32);
}
.wa-shortcut svg { flex-shrink: 0; }
.wa-shortcut-text {
  font-size: .875rem;
  color: var(--tx-2);
  line-height: 1.4;
}
.wa-shortcut-text strong { color: var(--tx); font-weight: 500; }

.form-grid { display:grid; grid-template-columns:1fr; gap:5rem; }
@media(min-width:1024px){ .form-grid{ grid-template-columns:1fr 1.8fr; gap:8rem; align-items:start; } }

.form-sidebar-title { font-family:var(--font-display); font-size:clamp(1.625rem,3.5vw,2.75rem); font-weight:900; letter-spacing:-.005em; text-transform:uppercase; line-height:1.12; margin:1rem 0 1.625rem; }
.form-sidebar-text { font-size:clamp(1rem,1.4vw,1.0625rem); color:var(--tx-2); line-height:1.85; margin-bottom:2rem; }

.form-ping { display:flex; align-items:center; gap:.875rem; padding:1.125rem 1.375rem; background:var(--s1); border-left:2px solid var(--p); margin-bottom:2rem; }
.ping-dot { width:6px; height:6px; border-radius:50%; background:var(--p-light); flex-shrink:0; animation:blink 2.4s ease-in-out infinite; }
.ping-txt { font-size:.875rem; font-weight:500; letter-spacing:.03em; color:var(--tx-2); }

.form-contact-links { display:flex; flex-direction:column; gap:.75rem; }
.form-official-note {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bdr);
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: 0;
  color: var(--tx-3);
  line-height: 1.8;
}
.form-official-note a { color: var(--p-light); text-decoration: underline; text-underline-offset: 3px; }
.form-official-note a:hover { color: var(--white); }

/* Form fields */
.cform { display:flex; flex-direction:column; gap:1.5rem; }
.frow { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media(min-width:600px){ .frow.two{ grid-template-columns:1fr 1fr; } }

.fg { display:flex; flex-direction:column; gap:.625rem; }
.flbl { font-family:var(--font-body); font-size:.75rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--tx-2); }
.flbl .req { color:var(--p-light); }
.flbl .req[hidden] { display: none; }
.fhint { font-family:var(--font-body); font-size:.8125rem; line-height:1.5; color:var(--tx-3); margin-top:.625rem; }

.finp, .fsel, .ftxt {
  width:100%; background:var(--s1); border:1px solid var(--bdr-m); color:var(--tx);
  padding:1rem 1.125rem; font-size:1rem; font-family:var(--sans); border-radius:12px; outline:none;
  transition:border-color .2s,background .2s; -webkit-appearance:none;
}
.finp::placeholder, .ftxt::placeholder { color:var(--tx-3); }
.finp:focus,.fsel:focus,.ftxt:focus { border-color:var(--p); background:var(--s2); }
.fsel {
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E3C3A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; background-size:16px; padding-right:2.5rem;
}
.fsel option { background:var(--s2); color:var(--tx); }
.ftxt { resize:vertical; min-height:120px; }

.radio-g { display:flex; flex-direction:row; flex-wrap:wrap; gap:1rem; }
.ropt { display:flex; align-items:center; gap:.5rem; cursor:pointer; }
.ropt input[type="radio"] {
  appearance:none; -webkit-appearance:none; width:14px; height:14px;
  border:1px solid var(--bdr-m); border-radius:50%; background:var(--s1);
  cursor:pointer; transition:border-color .2s,background .2s; position:relative; flex-shrink:0;
}
.ropt input[type="radio"]:checked { border-color:var(--p); background:var(--p); }
.ropt input[type="radio"]:checked::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:4px; height:4px; border-radius:50%; background:#fff; }
.rlbl { font-size:.9375rem; color:var(--tx-2); cursor:pointer; }

.fsub-wrap { margin-top:.25rem; }
.btn-submit { width:100%; justify-content:center; padding:1.125rem; font-size:.75rem; }
.fdisclaimer { font-size:.8125rem; letter-spacing:.02em; color:var(--tx-3); margin-top:.875rem; text-align:center; }

/* Errori di validazione inline */
.ferr {
  font-family: var(--font-body);
  font-size: .8125rem;
  line-height: 1.5;
  color: #E8776B;
  margin-top: .375rem;
}
.ferr[hidden] { display: none; }
.ferr-general {
  padding: .75rem .875rem;
  border: 1px solid rgba(232,119,107,.35);
  border-radius: 10px;
  background: rgba(232,119,107,.07);
  margin-bottom: .875rem;
}
html[data-theme="light"] .ferr { color: #B03A2E; }
html[data-theme="light"] .ferr-general {
  border-color: rgba(176,58,46,.3);
  background: rgba(176,58,46,.06);
}

/* Privacy checkbox */
.fprivacy {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-top: .25rem;
}
.fprivacy input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--p-light);
  cursor: pointer;
}
.fprivacy-lbl {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--tx-2);
}
.fprivacy-lbl a {
  color: var(--p-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fprivacy-lbl a:hover { color: var(--white); }

.fsuccess { display:none; text-align:center; padding:3.5rem 2rem; background:var(--s1); border:1px solid var(--p); border-radius:28px; }
.fsuccess.show { display:block; }
.fsuccess-icon { width:52px; height:52px; border:1px solid var(--p); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem; color:var(--p-light); }
.fsuccess-title { font-family:var(--font-body); font-size:1.0625rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--tx); margin-bottom:.875rem; }
.fsuccess-body { font-size:1.0625rem; color:var(--tx-2); line-height:1.65; }
.fsuccess-sig { margin-top:1.75rem; font-family:var(--font-body); font-size:.75rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--p-light); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer { background:var(--s1); border-top:1px solid var(--bdr); padding:3.5rem 0 2.5rem; }
.footer-inner { display:flex; flex-direction:column; gap:2.5rem; }
@media(min-width:768px){ .footer-inner{ flex-direction:row; justify-content:space-between; align-items:flex-start; } }
.footer-logo img { height:28px; width:auto; opacity:.55; margin-bottom:.875rem; mix-blend-mode:screen; }
.footer-claim { font-family:var(--font-body); font-size:.8125rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--p-light); }
.footer-desc { font-size:.75rem; color:var(--tx-3); margin-top:.2rem; font-style:normal; }
.footer-addr { font-size:.875rem; color:var(--tx-3); margin-top:.625rem; line-height:1.7; }
.footer-links { display:flex; gap:1.75rem; flex-wrap:wrap; }
.footer-link { font-family:var(--font-body); font-size:.75rem; font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--tx-3); transition:color .2s; }
.footer-link:hover { color:var(--p-light); }
.footer-legal {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bdr);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: 0;
  color: var(--tx-3);
}
.footer-legal a { color: var(--tx-3); transition: color .2s; }
.footer-legal a:hover { color: var(--p-light); }
.footer-bottom { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--bdr-s); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:.8125rem; color:var(--tx-3); }


/* ═══════════════════════════════════════
   STICKY MOBILE BAR
═══════════════════════════════════════ */
.sticky-bar {
  display: none;
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 48px);
  max-width: 420px;
  pointer-events: auto;
  transition: opacity .3s, transform .3s var(--ease-o);
}
.sticky-bar.hide {
  opacity: 0;
  transform: translateX(-50%) translateY(24px);
  pointer-events: none;
}
.sticky-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 58px;
  border-radius: 999px;
  background: #1cabb0;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 12px 36px rgba(28,171,176,.28), 0 2px 8px rgba(0,0,0,.35);
  transition: transform .2s var(--ease-o), box-shadow .2s;
}
.sticky-bar a:active {
  transform: scale(.97);
  box-shadow: 0 6px 18px rgba(28,171,176,.22);
}

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:1023px){
  .sticky-bar{ display:block; }
}
@media(max-width:767px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .hero-ctas { gap: .875rem; }
  .hero-ctas-row {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .hero-ctas-row .btn {
    width: 100%;
    justify-content: center;
  }
  .inside-sub{ display:none; }
  .footer { padding-bottom: calc(3.5rem + 76px + env(safe-area-inset-bottom)); }
  /* Padding ridotto su schermi piccoli */
  .ba-cta-box { padding: 1.75rem; }
}
@media(min-width:768px){
  .nav-overlay{ display:none !important; }
}

/* ═══════════════════════════════════════
   MULTIPAGINA — COMPONENTI
═══════════════════════════════════════ */

/* Hero compatto delle pagine interne */
.page-hero {
  position: relative;
  padding: calc(var(--spy) * .85) 0 0;
  background: var(--bg);
}
.page-hero-inner { max-width: 780px; }
.page-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--tx);
  margin: 1rem 0 1.25rem;
}
.page-h1 em { font-style: normal; color: var(--p-light); }
.page-lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--tx-2);
  line-height: 1.75;
  max-width: 560px;
}

/* Breadcrumb */
.crumb {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--tx-3);
  margin-bottom: 1.5rem;
}
.crumb a { color: var(--tx-2); transition: color .2s; }
.crumb a:hover { color: var(--p-light); }
.crumb span[aria-current] { color: var(--tx-2); }
.crumb-sep { color: var(--tx-3); }

/* Blocco scelta artisti / brand (homepage) */
.choice-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media(min-width:768px){ .choice-grid { grid-template-columns: 1fr 1fr; } }

.choice-card {
  background: var(--s1);
  border: 1px solid var(--bdr);
  border-radius: 22px;
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.choice-card:hover { transform: translateY(-3px) scale(1.005); border-color: var(--bdr-m); background: var(--s2); }
.choice-card-h {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--tx);
  line-height: 1.15;
}
.choice-card-txt { font-size: 1rem; color: var(--tx-2); line-height: 1.75; flex: 1; }
.choice-card .btn { align-self: flex-start; margin-top: .5rem; }

/* Teaser compatto (studio in homepage) */
.teaser {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2.25rem 0;
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
}
.teaser-txt { max-width: 520px; }
.teaser-h {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--tx);
  margin-bottom: .5rem;
}
.teaser-b { font-size: 1rem; color: var(--tx-2); line-height: 1.7; }

/* Riga CTA di sezione */
.sec-cta { margin-top: 2.5rem; }
@media(max-width:639px){ .sec-cta .btn { width: 100%; justify-content: center; } }

/* Divisore di gruppo nelle pagine lunghe */
.group-label {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p-light);
  margin-bottom: 1.25rem;
}

/* ═══════════════════════════════════════
   RECENSIONI — pagina dedicata
═══════════════════════════════════════ */
.reviews-source {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1rem;
}
.reviews-source svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.reviews-source-txt {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tx-2);
}

.reviews-grid-compact {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}
@media(max-width:1199px){ .reviews-grid-compact { grid-template-columns: repeat(3, 1fr); } }
@media(max-width:900px){  .reviews-grid-compact { grid-template-columns: repeat(2, 1fr); } }
@media(max-width:639px){  .reviews-grid-compact { grid-template-columns: 1fr; } }

.review-card-sm {
  background: var(--s1);
  border: 1px solid var(--bdr);
  border-radius: 16px;
  padding: 1.5rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  transition: transform .3s var(--ease), border-color .3s;
}
.review-card-sm:hover { transform: translateY(-3px) scale(1.01); border-color: var(--bdr-m); }
.review-card-sm .review-quote { font-size: .9375rem; }
.review-card-sm .review-meta { padding-top: .875rem; }
.review-card-sm .review-name { font-size: .875rem; }

/* ═══════════════════════════════════════
   METODO — indicatore di avanzamento
═══════════════════════════════════════ */
.steps-wrap { position: relative; padding-left: 1.75rem; }
.steps-line {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--bdr);
  overflow: hidden;
}
.steps-line-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0%;
  background: var(--p-light);
  transform-origin: top;
}
@media(max-width:639px){ .steps-wrap { padding-left: 1.25rem; } }

/* ═══════════════════════════════════════
   ANIMAZIONI
═══════════════════════════════════════ */

/* Reveal a gruppo con stagger */
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease-o), transform .6s var(--ease-o);
  transition-delay: var(--stagger, 0s);
}
[data-reveal-group].in > * { opacity: 1; transform: none; }

/* Reveal immagini con maschera */
.img-reveal {
  clip-path: inset(0 0 14% 0);
  opacity: 0;
  transform: scale(1.035);
  transition: clip-path .8s var(--ease-o), transform .8s var(--ease-o), opacity .5s ease;
  will-change: clip-path, transform;
}
.img-reveal.in {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: scale(1);
  will-change: auto;
}

/* Parallax — solo desktop, gestito da JS */
[data-parallax] { will-change: transform; }

/* Card: hover coerente in tutto il sito */
.work-card:hover { transform: translateY(-3px) scale(1.01); }
.review-card:hover { transform: translateY(-3px) scale(1.01); }
.review-card, .work-card { transition: transform .3s var(--ease), border-color .3s; }

/* Navigazione: underline e stato pagina corrente */
.nav-links a { position: relative; }
.nav-links a:not(.nav-cta-lnk)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav-links a:not(.nav-cta-lnk):hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"]:not(.nav-cta-lnk)::after {
  transform: scaleX(1);
  background: var(--p-light);
}
.nav-links a[aria-current="page"] { color: #FFFFFF; }
.nav-overlay a[aria-current="page"] { color: var(--p-light); }

/* Ingresso navbar */
.nav { opacity: 0; animation: navIn .7s var(--ease-o) .15s forwards; }
@keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Transizioni tra pagine — progressive enhancement */
@view-transition { navigation: auto; }

/* ═══════════════════════════════════════
   ACCESSIBILITÀ DEL MOVIMENTO
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .img-reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .nav { opacity: 1 !important; animation: none !important; }
  .hero-tag, .hero-h1, .hero-sub, .hero-ctas, .hero-scroll {
    opacity: 1 !important;
    animation: none !important;
  }
  .hero-scroll-line, .hero-tag-dot, .ping-dot { animation: none !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Movimento ridotto su mobile */
@media (max-width: 767px) {
  [data-reveal] { transition-duration: .45s; }
  [data-reveal-group] > * { transition-duration: .45s; transition-delay: 0s; }
  .img-reveal { transition-duration: .5s; }
}