/* ---------- Tag header -> mini logo al primo scroll ---------- */
/* Stanno nello stesso punto (impilati, uno sopra l'altro), non spostano il
   layout: solo un crossfade di opacità. Il logo sta sempre sullo sfondo
   rosso pieno dell'header (contrasto già ok da solo), quindi qui usa il suo
   colore crema naturale invece di un blend mode. */
.topbar__tag-wrap {
  position: relative;
  display: inline-block;
}

.topbar__tag-logo {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1.6em;
  width: auto;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.topbar__tag {
  transition: opacity .5s ease;
}

.topbar__tag-wrap.is-scrolled .topbar__tag-logo { opacity: 1; }
.topbar__tag-wrap.is-scrolled .topbar__tag { opacity: 0; }

/* ---------- Barra sticky persistente ---------- */
/* Appare poco dopo l'inizio dello scroll e resta sempre visibile, ancorata
   in alto, seguendo la pagina (nav + logo + "Parliamo"). Vive dentro
   #smooth-content (stesso layer del contenuto) e usa una trasformazione
   uguale e opposta a quella dello scroll fluido per restare ferma sullo
   schermo — è il modo per cui mix-blend-mode riesce davvero a leggere cosa
   c'è sotto (foto, video, il wordmark) e invertire il colore solo dove
   serve, in tempo reale. */
#sticky-header-offset {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

/* Niente transform per l'ingresso/uscita (solo opacità): un elemento con
   transform, anche a riposo, finisce sul proprio layer di composizione e
   mix-blend-mode smette di leggere correttamente cosa c'è sotto. */
.sticky-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px calc(var(--gutter) * 0.2);
  font-size: .8rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.sticky-header.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.sticky-header a {
  color: #fff;
  mix-blend-mode: difference;
}

.sticky-header__logo {
  display: block;
  justify-self: start;
  height: 1.6em;
  width: auto;
  mix-blend-mode: difference;
}

.sticky-header__back {
  font-weight: 600;
  white-space: nowrap;
}

.sticky-header__nav {
  display: flex;
  gap: clamp(10px, 1.2vw, 23px);
}

.sticky-header__nav a {
  opacity: .55;
  transition: opacity .2s ease;
}
.sticky-header__nav a:hover,
.sticky-header__nav a.is-active {
  opacity: 1;
  font-weight: 600;
}

.sticky-header .topbar__cta {
  justify-self: end;
}

@media (max-width: 900px) {
  .sticky-header__nav { display: none; }
  .sticky-header { grid-template-columns: 1fr 1fr; }
}

/* ---------- Smooth scroll wrapper ---------- */
#smooth-spacer { width: 1px; }

.has-smooth-scroll #smooth-content {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.16, .8, .3, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-scale {
  transform: scale(.8);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .reveal-scale {
    transform: none;
  }
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-size: inherit; font-weight: inherit; }

/* ---------- Preloader ---------- */
html.is-loading { overflow: hidden; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  transition: transform .8s cubic-bezier(.76, 0, .24, 1);
}

.preloader.is-loaded {
  transform: translateY(-100%);
  pointer-events: none;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16, .8, .3, 1);
}

.preloader__inner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.preloader.is-loaded .preloader__inner {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .35s ease, transform .35s ease;
}

.preloader__logo {
  font-family: var(--ff);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cream);
  letter-spacing: .01em;
}

.preloader__bar {
  position: relative;
  width: 120px;
  height: 2px;
  background: rgba(0, 0, 0, .25);
  overflow: hidden;
}

.preloader__bar-fill {
  position: relative;
  height: 100%;
  width: 0%;
  background: var(--cream);
  transition: width 1.3s cubic-bezier(.65, 0, .35, 1);
}

.preloader__bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 16px;
  background: linear-gradient(90deg, rgba(255, 240, 212, 0), var(--cream));
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
}

/* ---------- Banner cookie ---------- */
.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 9998;
  max-width: 480px;
  background: var(--navy);
  color: var(--cream);
  padding: clamp(20px, 3vw, 28px);
  opacity: 0;
  transform: translateY(calc(100% + 40px));
  pointer-events: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.16, .8, .3, 1);
}

.cookie-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-banner__text {
  font-size: .85rem;
  line-height: 1.55;
  opacity: .85;
  margin: 0 0 20px;
}

.cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
}

.cookie-banner__accept {
  background: var(--red);
  color: var(--cream);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  padding: 11px 24px;
  transition: opacity .2s ease;
}

.cookie-banner__accept:hover { opacity: .82; }

.cookie-banner__reject {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: var(--cream);
  font-size: .85rem;
  padding: 0;
}

@media (max-width: 560px) {
  .cookie-banner { left: 16px; right: 16px; bottom: 16px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: opacity .3s ease; transform: none; }
}

:root {
  --red: #ff3b30;
  --navy: #19192e;
  --cream: #fff0d4;

  --gutter: clamp(20px, 3.02vw, 58px);
  --max: 1920px;
  --radius-img: 8px;

  --ff: "Outfit", system-ui, sans-serif;
}

html {
  font-family: var(--ff);
  scroll-behavior: smooth;
}

body {
  background: var(--navy);
  color: var(--cream);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(48px, 8vw, 96px) 0;
}

.section--red { background: var(--red); color: var(--cream); }
.section--navy { background: var(--navy); color: var(--red); }

.divider {
  border: none;
  border-top: 1px solid currentColor;
  opacity: .35;
  margin: 0 0 clamp(24px, 3vw, 40px);
}

.section--red .divider { border-color: var(--navy); }

.link-underline {
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity .2s ease;
}
.link-underline:hover { opacity: .7; }

/* ---------- Header ---------- */
.site-header {
  background: var(--red);
  padding: 20px 0 0;
}

/* Pagine interne senza wordmark gigante in vista: il blocco rosso deve
   restare ESATTAMENTE alto quanto quello della home (stessa "l'html misura
   uguale" richiesta), non un'approssimazione a occhio. Il trucco: dentro
   .page-hero-stack teniamo un clone invisibile di wordmark+hero-strip
   (stesse classi/regole della home, quindi stessa identica altezza a
   qualunque larghezza) che riserva lo spazio; claim e titolo vengono
   sovrapposti in un layer assoluto sopra quello spazio, non aggiunti dopo.
   Così l'altezza totale è sempre quella della home, punto. */
.page-hero-stack {
  position: relative;
}

.site-header__ghost {
  visibility: hidden;
}

.page-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(12px, 2vw, 24px);
}

.topbar__logo-link { display: block; }

.topbar__logo-mini {
  display: block;
  height: 1.6em;
  width: auto;
}

.topbar__back {
  color: var(--cream);
  font-weight: 600;
  font-size: .85rem;
  white-space: nowrap;
}

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 calc(var(--gutter) * -0.8) clamp(1px, 1vw, 11px);
  font-size: .8rem;
  font-weight: 500;
}

.topbar__tag { color: var(--cream); }

.topbar__nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: clamp(10px, 1.2vw, 23px);
}

.topbar__nav a {
  color: rgba(255, 242, 214, .55);
  transition: color .2s ease;
}
.topbar__nav a:hover,
.topbar__nav a.is-active {
  color: var(--cream);
  font-weight: 600;
}

.topbar__cta {
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topbar__cta-arrow {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--cream);
  display: block;
}

.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-7px) rotate(-45deg); }

.wordmark {
  width: calc(100% + var(--gutter) * 1.6);
  max-width: none;
  height: auto;
  margin: 0 calc(var(--gutter) * -0.8);
  display: block;
}

.hero-strip {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: 0 calc(var(--gutter) * -0.8);
  padding: clamp(160px, 23vw, 330px) 0 calc(var(--gutter) * 0.2);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.35;
}

.hero-strip__right { text-align: right; }

/* ---------- Showreel ---------- */
.showreel {
  position: relative;
  aspect-ratio: 1920 / 815;
  overflow: hidden;
  background: var(--navy);
}

.showreel__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.showreel__link {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.showreel__label {
  color: var(--cream);
  font-size: clamp(1.75rem, 3.5vw, 3.5rem);
  font-weight: 500;
}

/* ---------- Claim ---------- */
.claim {
  font-size: clamp(1.8rem, 4vw, 4.75rem);
  font-weight: 400;
  line-height: 1.01;
  text-indent: 2.5em;
  margin: 0 0 clamp(28px, 5vw, 48px);
}

/* Headline della pagina Progetti: allineata a destra, vicina al bordo
   (diversa dal claim della home, che è allineato a sinistra). */
.page-hero__content .claim {
  text-align: right;
  text-indent: 0;
  margin: 0;
}

.intro-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 6vw, 64px);
  font-size: 1.75rem;
  line-height: 1.1;
}

.intro-cols p { margin: 0 0 28px; }
.intro-cols > div:not(.intro-cols__right) p { max-width: 397px; }
.intro-cols__right { text-align: right; }

/* ---------- Progetti ---------- */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(24px, 4vw, 40px);
  font-size: .95rem;
}

.section-head__title { font-weight: 600; }

.projects-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.project-tile {
  background: #d9d9d9;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-img);
  overflow: hidden;
}

.projects-grid__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(16px, 2vw, 24px);
}

/* Titolo di sezione usato da solo (senza il link a destra), come in cima
   alla pagina Progetti. */
.page-hero__content .section-head__title {
  display: block;
  margin-bottom: 18px;
  margin-left: -10px;
}

/* Elenco progetti a piena larghezza (pagina Progetti): foto grandi,
   impilate senza gutter, con l'etichetta al centro. Il testo usa
   mix-blend-mode così resta leggibile qualunque sia la foto reale che ci
   metterete sopra. */
.projects-full-list {
  display: block;
}

.project-full {
  position: relative;
  display: block;
  aspect-ratio: 15 / 4;
  background: #d9d9d9;
  overflow: hidden;
}

.project-full__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Etichetta per le card con foto vera: un tag ancorato in basso a
   sinistra invece del testo enorme al centro in mix-blend-mode (pensato
   per lo sfondo grigio placeholder, stona sopra una foto reale). */
.project-full__caption {
  position: absolute;
  left: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  background: var(--navy);
  color: var(--cream);
  font-size: .85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
}

.project-full__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 500;
  color: #fff;
  mix-blend-mode: difference;
}

@media (max-width: 700px) {
  .project-full { aspect-ratio: 4 / 3; }
}

.projects-grid__row .project-tile { aspect-ratio: 1 / 1; }

/* ---------- Pagina Lo Studio ---------- */
/* Niente padding-top: lo spazio già riservato dentro l'header (uguale a
   Progetti) basta come respiro, la divisoria segue subito come le foto
   di Progetti seguono subito l'header. */
.studio-intro { padding-top: 0; }
.studio-intro .divider { margin-bottom: clamp(32px, 5vw, 64px); }

.studio-columns {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: clamp(16px, 3vw, 40px);
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  line-height: 1.5;
}

.studio-columns > .reveal:nth-child(2) { transition-delay: .08s; }
.studio-columns > .reveal:nth-child(3) { transition-delay: .16s; }

.studio-columns__list { text-align: center; }
.studio-columns__list p { margin: 0 0 8px; }
.studio-columns__right { text-align: right; }

.studio-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #d9d9d9;
  border-radius: var(--radius-img);
}

.testimonial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(24px, 5vw, 64px);
  margin-bottom: clamp(40px, 6vw, 80px);
}

.testimonial__content { padding-top: clamp(16px, 2.5vw, 32px); }

.testimonial--reverse .testimonial__content { order: 2; }

.testimonial__quote {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  margin: 0 0 24px;
}

.testimonial__name { font-weight: 600; margin: 0; }
.testimonial__role { opacity: .7; margin: 0 0 24px; }

.testimonial__media {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: #d9d9d9;
  border-radius: var(--radius-img);
}

@media (max-width: 800px) {
  .studio-columns { grid-template-columns: 1fr; text-align: left; gap: 20px; }
  .studio-columns__list,
  .studio-columns__right { text-align: left; }

  /* Testo sempre prima, foto sempre sotto: stesso ordine per entrambe le
     varianti (su desktop invece si alternano sinistra/destra). */
  .testimonial { grid-template-columns: 1fr; }
  .testimonial__content { padding-top: 0; }
  .testimonial--reverse .testimonial__content { order: 0; }
  .testimonial--reverse .testimonial__media { order: 1; }
}

/* ---------- Pagina Servizi ---------- */
/* Come .studio-intro: lo spazio riservato dentro l'header basta come
   respiro, niente padding-top aggiuntivo qui. */
.servizi-capacita { padding-top: 0; }

.capacita {
  display: grid;
  grid-template-columns: 1fr 2.6fr;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
}

.capacita__label { font-weight: 500; }

.capacita-list .capacita-item:nth-child(2) { transition-delay: .06s; }
.capacita-list .capacita-item:nth-child(3) { transition-delay: .12s; }
.capacita-list .capacita-item:nth-child(4) { transition-delay: .18s; }

.capacita-item { margin-bottom: clamp(20px, 3vw, 32px); }
.capacita-item:last-child { margin-bottom: 0; }
.capacita-item .divider { margin-bottom: clamp(12px, 2vw, 20px); }

.capacita-item__row {
  display: flex;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 32px);
  font-size: .85rem;
}

.capacita-item__services { text-align: right; }
.capacita-item__services p { margin: 0 0 4px; }
.capacita-item__services p:last-child { margin-bottom: 0; }

.section-title-center {
  font-size: clamp(1.75rem, 2.8vw, 2.75rem);
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
  margin: 0 0 clamp(40px, 6vw, 72px);
}

.servizi-testimonials .testimonial__name { font-size: 1.1rem; }
.servizi-testimonials .testimonial__role { font-size: 1rem; margin-bottom: 20px; }

.servizi-testimonials .testimonial__quote {
  font-size: 1rem;
  line-height: 1.6;
  opacity: .85;
  margin: 0;
}

/* ---------- CTA Servizi ---------- */
/* Il titolo resta ancorato in alto alla sezione; l'email invece si centra
   nello spazio restante, non subito sotto al titolo: sono due allineamenti
   diversi, non un unico blocco centrato insieme. */
.servizi-cta {
  display: block;
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(48px, 6vw, 96px);
}

.servizi-cta .container {
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 45vw, 560px);
  text-align: center;
}

.servizi-cta .section-title-center { margin: 0; }

.servizi-cta__email-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 700px) {
  .capacita { grid-template-columns: 1fr; }
  .capacita-item__row { flex-direction: column; gap: 8px; }
  .capacita-item__services { text-align: left; }
}

/* ---------- Blog ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}

.blog-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #d9d9d9;
  border-radius: var(--radius-img);
  overflow: hidden;
  margin-bottom: 20px;
}

.blog-card {
  display: block;
  transition: transform .4s cubic-bezier(.16, .8, .3, 1);
}

.blog-card:hover { transform: translateY(-8px); }

.blog-card__media {
  position: relative;
  overflow: hidden;
}

.blog-card__media img,
.blog-card__media::after { transition: transform .5s cubic-bezier(.16, .8, .3, 1); }

.blog-card:hover .blog-card__media { transform: none; }

.blog-card__num {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: var(--cream);
  font-size: .75rem;
  font-weight: 600;
  border-radius: 50%;
}

.blog-card__eyebrow {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .65;
  margin-bottom: 10px;
}

.blog-card__title {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 10px;
  transition: opacity .25s ease;
}

.blog-card:hover .blog-card__title { opacity: .75; }

.blog-card__excerpt {
  font-size: .9rem;
  line-height: 1.55;
  opacity: .8;
  margin: 0 0 16px;
}

.blog-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid currentColor;
  border-top-color: rgba(0, 0, 0, .12);
}

.section--navy .blog-card__foot { border-top-color: rgba(255, 59, 48, .25); }

.blog-card__meta {
  font-size: .78rem;
  opacity: .6;
}

.blog-card__arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform .3s ease;
}

.blog-card:hover .blog-card__arrow { transform: translate(3px, -3px); }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* Pagina articolo singolo: eyebrow + titolo (h1) dentro l'header, come le
   altre pagine interne, poi corpo testo leggibile e curato come una vera
   pagina editoriale. */
.article-hero .claim { text-indent: 0; }

.article-hero__eyebrow {
  display: block;
  text-align: right;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .75;
  margin-bottom: clamp(10px, 1.5vw, 16px);
}

/* Barra di avanzamento lettura, fissa in alto: stesso linguaggio della
   barra di caricamento del preloader. */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--cream);
  z-index: 9997;
  transition: width .1s linear;
}

.article-wrap { max-width: 760px; }

.article__byline {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: clamp(28px, 4vw, 44px);
  margin-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid rgba(255, 240, 212, .25);
}

.article__byline-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.article__byline-name { font-weight: 600; font-size: .95rem; }
.article__byline-meta { font-size: .8rem; opacity: .65; }

.article__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #d9d9d9;
  border-radius: var(--radius-img);
  margin-bottom: clamp(36px, 5vw, 64px);
}

.article { max-width: 700px; }

.article__lead {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 400;
  line-height: 1.55;
  margin: 0 0 clamp(28px, 4vw, 40px);
}

.article p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 clamp(20px, 3vw, 28px);
}

.article h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 600;
  margin: clamp(44px, 6vw, 72px) 0 clamp(20px, 2.5vw, 26px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid rgba(255, 240, 212, .2);
}

.article h2::before {
  content: attr(data-num);
  font-size: .8rem;
  font-weight: 600;
  opacity: .5;
  white-space: nowrap;
}

.article__pull-quote {
  margin: clamp(36px, 5vw, 56px) 0;
  padding-left: clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--cream);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1.4;
}

.article__meta {
  display: flex;
  gap: 16px;
  font-size: .85rem;
  opacity: .65;
  margin-bottom: clamp(20px, 3vw, 28px);
}

.article__back {
  display: inline-block;
  margin-bottom: clamp(24px, 4vw, 40px);
}

/* Fine articolo: prossime letture + invito a contattarci. */
.article__more {
  margin-top: clamp(56px, 8vw, 96px);
  padding-top: clamp(32px, 5vw, 48px);
  border-top: 1px solid rgba(255, 240, 212, .25);
}

.article__more-title {
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .65;
  margin: 0 0 clamp(20px, 3vw, 28px);
}

.article__more .blog-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }

@media (max-width: 700px) {
  .article__more .blog-grid { grid-template-columns: 1fr; }
}

/* ---------- Case study progetto ---------- */
.project-cover-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.project-cover-split .article__cover { margin-bottom: 0; }

.project-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: clamp(20px, 3vw, 28px) 0 clamp(36px, 5vw, 56px);
}

.project-swatch {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-img);
  display: flex;
  align-items: flex-end;
  padding: 14px;
}

.project-swatch__hex {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Reel verticale (progetti che sono un solo video 9:16, non una griglia
   di foto): player grande e centrato invece della fascia di copertina
   orizzontale usata dagli altri progetti. */
.project-reel {
  max-width: 440px;
  margin: 0 auto clamp(36px, 6vw, 64px);
}

.reel-player {
  position: relative;
  border-radius: var(--radius-img);
  overflow: hidden;
  border: 1px solid rgba(255, 240, 212, .4);
}

.project-reel__video {
  width: 100%;
  aspect-ratio: 9 / 16;
  display: block;
  background: #000;
  cursor: pointer;
}

/* A schermo intero il browser ingrandisce .reel-player a riempire lo
   schermo: qui centriamo il video mantenendo il suo 9:16 invece di
   lasciarlo stirare dalle regole UA di :fullscreen. */
.reel-player:fullscreen,
.reel-player:-webkit-full-screen {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: none;
  border-radius: 0;
}

.reel-player:fullscreen .project-reel__video,
.reel-player:-webkit-full-screen .project-reel__video {
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
}

.reel-player__toggle {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: rgba(6, 8, 20, .45);
  backdrop-filter: blur(4px);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity .25s ease;
}
.reel-player.is-playing .reel-player__toggle { opacity: 0; }
.reel-player:hover .reel-player__toggle,
.reel-player.is-playing:hover .reel-player__toggle { opacity: 1; }

.reel-player__toggle svg { width: 20px; height: 20px; }
.reel-player__icon-pause { display: none; }
.reel-player.is-playing .reel-player__icon-play { display: none; }
.reel-player.is-playing .reel-player__icon-pause { display: block; }

.reel-player__bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 240, 212, .3);
  cursor: pointer;
}

.reel-player__bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 2px;
  background: var(--cream);
}

.reel-player__bar-fill::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cream);
  opacity: 0;
  transition: opacity .2s ease;
}
.reel-player:hover .reel-player__bar-fill::after { opacity: 1; }

@media (max-width: 480px) {
  .project-reel { max-width: 300px; }
}

@media (max-width: 700px) {
  .project-cover-split { grid-template-columns: 1fr; }
}

/* ---------- Marquee (loghi clienti) ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee:not(.reels) { margin-bottom: clamp(48px, 9vw, 130px); }

.logo-tile {
  width: clamp(90px, 8.5vw, 120px);
  aspect-ratio: 1 / 1;
  background: #d9d9d9;
  flex: 0 0 auto;
  border-radius: var(--radius-img);
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Social / reel ---------- */
.social-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: clamp(20px, 2.5vw, 36px);
  padding-bottom: 12px;
  border-top: 1px solid currentColor;
  font-size: 1.5rem;
}

.social-head__title { font-weight: 600; }

.social-head__links {
  display: flex;
  gap: clamp(16px, 3vw, 32px);
}

.social-head__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.social-head__links a svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

.social-head__links a:hover { opacity: .7; }

.reels {
  margin-top: clamp(24px, 4vw, 40px);
}

.reels__track {
  display: flex;
  gap: clamp(12px, 1.5vw, 20px);
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}

.reels:hover .reels__track { animation-play-state: paused; }

.reel-tile {
  display: block;
  position: relative;
  width: clamp(160px, 15vw, 244px);
  aspect-ratio: 9 / 16;
  background: #d9d9d9;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: var(--radius-img);
}

.reel-tile img,
.reel-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- Approccio ---------- */
.approach-title {
  font-size: clamp(1.75rem, 2.8vw, 2.75rem);
  font-weight: 400;
  margin: 0 0 clamp(24px, 4vw, 40px);
}

.approach-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.2fr;
  gap: clamp(60px, 10vw, 200px);
  padding: clamp(24px, 3.5vw, 40px) 0;
  border-top: 1px solid currentColor;
  font-size: 1.25rem;
  line-height: 1.35;
}

.approach-row:last-of-type { border-bottom: 1px solid currentColor; }

.approach-row__label { font-weight: 400; }

.approach-row p { max-width: 560px; }

.approach-media {
  margin-top: clamp(32px, 5vw, 56px);
  background: #d9d9d9;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-img);
}

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid rgba(255, 240, 212, .25); }

.faq-item { border-bottom: 1px solid rgba(255, 240, 212, .25); }

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: clamp(18px, 3vw, 26px) 0;
  background: none;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.faq-item__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform .3s ease;
}

.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }

.faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s ease, opacity .3s ease;
}

.faq-item.is-open .faq-item__answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-item__answer > p {
  overflow: hidden;
  margin: 0;
  padding-bottom: clamp(18px, 3vw, 26px);
  max-width: 720px;
  font-size: .95rem;
  line-height: 1.6;
  opacity: .85;
}

/* FAQ in piccolo nella colonna di destra del footer, sotto "Sassuolo |
   Italia". Nessun limite di altezza: se serve più spazio della colonna
   newsletter accanto, la riga del footer semplicemente si allunga. */
.footer-faq {
  margin-top: 20px;
}

.footer-faq__label {
  display: block;
  font-size: .75rem;
  opacity: .6;
  margin-bottom: 8px;
}

.faq-list--compact { border-top: none; }
.faq-list--compact .faq-item { border-bottom-color: rgba(255, 242, 214, .15); }

.faq-list--compact .faq-item__question {
  padding: 8px 0;
  font-size: .75rem;
  font-weight: 500;
  gap: 12px;
}

.faq-list--compact .faq-item__icon { width: 9px; height: 9px; }

.faq-list--compact .faq-item__answer > p {
  padding-bottom: 8px;
  max-width: 240px;
  font-size: .7rem;
  line-height: 1.5;
}

/* ---------- CTA ---------- */
.cta-block {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: clamp(60px, 10vw, 140px);
  padding-bottom: clamp(140px, 20vw, 260px);
}

.cta-block a {
  font-size: clamp(1.5rem, 3vw, 3.25rem);
  font-weight: 500;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--red);
  color: var(--cream);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr .9fr .7fr;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 80px);
}

.footer-heading {
  font-size: clamp(1.5rem, 2.6vw, 3rem);
  font-weight: 600;
  margin: 0 0 clamp(24px, 3vw, 36px);
}

.footer-col a { display: block; }

.newsletter-label {
  font-size: .85rem;
  margin-bottom: 8px;
  display: block;
}

.newsletter-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  border-bottom: 1px solid var(--cream);
  max-width: 320px;
  padding-bottom: 6px;
}

.newsletter-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--cream);
  font-size: .9rem;
}

.newsletter-form input::placeholder { color: rgba(255, 242, 214, .55); }

.newsletter-form button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--cream);
  font-size: .9rem;
  text-decoration: underline;
}

.newsletter-status {
  font-size: .8rem;
  margin-top: 10px;
  min-height: 1em;
}

.footer-nav { font-size: .95rem; }
.footer-nav li { margin-bottom: 10px; }
.footer-nav a:hover { opacity: .7; }

.footer-meta {
  font-size: .85rem;
  line-height: 1.5;
}

.footer-meta__extra { margin-top: 20px; }

.footer-logo {
  padding-bottom: clamp(0px, 1vw, 2px);
}

/* ---------- Pagina Contatti ---------- */
.contatti-main { padding-top: 0; }
.contatti-main .divider { margin-bottom: clamp(32px, 5vw, 64px); }

.contatti-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(32px, 6vw, 80px);
}

.contatti-info__block:nth-child(2) { transition-delay: .08s; }
.contatti-info__block:nth-child(3) { transition-delay: .16s; }
.contatti-info__block:nth-child(4) { transition-delay: .24s; }

.contatti-info__block { margin-bottom: clamp(28px, 4vw, 44px); }
.contatti-info__block:last-child { margin-bottom: 0; }

.contatti-info__label {
  display: block;
  font-size: .85rem;
  opacity: .7;
  margin-bottom: 8px;
}

.contatti-info__block a,
.contatti-info__block p { font-size: 1.1rem; margin: 0; }

.contatti-info__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contatti-info__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}

.contatti-info__links a svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

@media (max-width: 800px) {
  .contatti-grid { grid-template-columns: 1fr; }
}

/* ---------- Contact form ---------- */
.contact-form { max-width: 560px; }

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.contact-field label { font-size: .85rem; }

.contact-field input,
.contact-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cream);
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  padding: 8px 0;
  outline: none;
  resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder { color: rgba(255, 242, 214, .55); }

/* ---------- Tendina custom (Settore) ---------- */
.custom-select { position: relative; }

.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--cream);
  color: var(--cream);
  font-family: inherit;
  font-size: 1rem;
  padding: 8px 0;
  cursor: pointer;
  text-align: left;
}

.custom-select__value[data-is-placeholder="true"] { color: rgba(255, 242, 214, .55); }

.custom-select__arrow {
  width: 12px;
  height: 8px;
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform .2s ease;
}

.custom-select.is-open .custom-select__arrow { transform: rotate(180deg); }

.custom-select__options {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: var(--navy);
  color: var(--cream);
  font-size: .95rem;
  max-height: 260px;
  overflow-y: auto;
  border-radius: var(--radius-img);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}

.custom-select__options[hidden] { display: none; }

.custom-select__options li {
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.custom-select__options li:hover,
.custom-select__options li.is-active {
  background: var(--red);
  color: var(--cream);
}

.contact-form button {
  margin-top: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 10001;
  }

  /* Il menu vero e proprio (.topbar__nav) resta nascosto: a questa
     larghezza usiamo invece .mobile-nav, un suo clone creato via JS e
     agganciato fuori da #smooth-content. Necessario perché #smooth-content
     ha un transform continuo (per lo scroll fluido) che lo rende containing
     block di qualunque discendente position:fixed, rompendolo — lo stesso
     problema già risolto per la barra sticky. */
  .topbar__nav { display: none; }

  .topbar { position: relative; flex-wrap: wrap; }
  .topbar__tag { order: 1; }
  .topbar__cta { order: 2; }
  .nav-toggle { order: 3; }

  html.nav-is-open { overflow: hidden; }
  /* La X del bottone hamburger resta sotto l'overlay ma a volte fa capolino
     (stacking context di #smooth-content): a menu aperto usiamo solo la X
     dedicata dentro l'overlay, quella dell'header si nasconde. */
  html.nav-is-open .nav-toggle { visibility: hidden; }

  .intro-cols { grid-template-columns: 1fr; }
  .projects-grid__row { grid-template-columns: 1fr; }
  .approach-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-strip { font-size: .8rem; }

  .social-head__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* Overlay del menu mobile: fuori da #smooth-content (vedi commento sopra),
   quindi position:fixed funziona davvero contro il vero viewport. Creato e
   riempito via JS (clone di .topbar__nav) in initNavToggle(). */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  background: var(--red);
  padding: 0 var(--gutter);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}

.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease, visibility 0s linear 0s;
}

.mobile-nav a {
  display: block;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 242, 214, .15);
  color: var(--cream);
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  font-weight: 500;
}

.mobile-nav a.is-active { font-weight: 700; }
.mobile-nav a:last-child { border-bottom: 1px solid rgba(255, 242, 214, .15); }

.mobile-nav__close {
  position: absolute;
  top: 20px;
  right: var(--gutter);
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  padding: 8px;
}

.mobile-nav__close svg { width: 24px; height: 24px; display: block; }

@media (min-width: 901px) {
  .mobile-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: opacity .2s ease, visibility 0s linear 0s; }
}

@media (max-width: 700px) {
  .claim br.brk { display: none; }
}

@media (max-width: 560px) {
  .claim { text-indent: 0; }
  .social-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- WhatsApp flottante ---------- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }
@media (max-width: 560px) {
  .whatsapp-float { right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .whatsapp-float svg { width: 25px; height: 25px; }
}

/* ==========================================================================
   Videorecensioni clienti (home, servizi, landing)
   Copertina leggera finché non si preme play: il video (5 MB) si scarica
   solo se la persona vuole guardarlo.
   ========================================================================== */
.vreview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.vreview__player {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-img); background: var(--navy);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .55);
}
.vreview__player video, .vreview__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vreview__poster { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; color: var(--cream); font: inherit; }
.vreview__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(25, 25, 46, 0) 45%, rgba(25, 25, 46, .75) 100%); }
.vreview__play {
  position: absolute; left: clamp(16px, 2.5vw, 28px); bottom: clamp(16px, 2.5vw, 28px); z-index: 1;
  display: inline-flex; align-items: center; gap: 14px; font-weight: 600; font-size: clamp(.95rem, 1.2vw, 1.1rem);
}
.vreview__play i {
  width: clamp(54px, 5vw, 72px); height: clamp(54px, 5vw, 72px); border-radius: 50%;
  background: var(--red); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5);
  transition: transform .25s ease;
}
.vreview__play i svg { width: 38%; height: 38%; margin-left: 6%; fill: var(--cream); }
.vreview__poster:hover .vreview__play i { transform: scale(1.08); }
.vreview__poster:focus-visible { outline: 3px solid var(--cream); outline-offset: -3px; }

.vreview__quote { font-size: clamp(1.9rem, 3.4vw, 3.4rem); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; margin: 0 0 22px; }
.vreview__name { font-weight: 700; font-size: 1.1rem; margin: 0 0 28px; }
.vreview__name span { font-weight: 500; opacity: .75; }
.vreview__wins { display: grid; gap: 10px; }
.vreview__wins > div {
  display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 16px; align-items: baseline;
  padding: 14px 18px; border-radius: 14px; background: rgba(25, 25, 46, .14);
}
.section--navy .vreview__wins > div { background: rgba(255, 240, 212, .05); }
.vreview__wins b { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--cream); }
.vreview__wins span { font-size: .95rem; line-height: 1.45; opacity: .9; }
.section--navy .vreview__wins span { color: var(--cream); }
.vreview__sign { margin: 22px 0 0; font-size: 1.05rem; line-height: 1.45; opacity: .9; }
.vreview__sign strong { font-weight: 800; opacity: 1; }
@media (max-width: 480px) { .vreview__wins > div { grid-template-columns: 1fr; gap: 4px; } }
.vreview__role { opacity: .75; margin: 2px 0 26px; }
.vreview__points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.vreview__points li { padding-left: 22px; position: relative; line-height: 1.5; opacity: .92; }
.vreview__points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: currentColor; }
.vreview__badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85;
}
.vreview__badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.section--navy .vreview__play i { background: var(--red); }
.section--navy .vreview__quote, .section--navy .vreview__name { color: var(--cream); }
@media (max-width: 900px) { .vreview { grid-template-columns: 1fr; } }

/* ==========================================================================
   Landing "Hai un'attività a Sassuolo?" (sponsorizzata Meta)
   ========================================================================== */
.lp-hero { position: relative; overflow: hidden; background: var(--red); color: var(--cream); }
.lp-blobs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lp-blobs path { fill: var(--navy); }
.lp-hero .container { position: relative; z-index: 1; }
.lp-hero__inner { min-height: min(88vh, 900px); display: flex; flex-direction: column; justify-content: center; padding: clamp(110px, 14vw, 170px) 0 clamp(60px, 9vw, 120px); max-width: 1100px; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: clamp(.85rem, 1vw, 1rem); letter-spacing: .04em; margin-bottom: 22px; }
.lp-eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.lp-title { font-size: clamp(2.6rem, 7.4vw, 7rem); line-height: .95; font-weight: 800; letter-spacing: -.045em; margin: 0; }
.lp-title em { font-style: normal; display: block; }
.lp-sub { font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1.45; max-width: 720px; margin: clamp(20px, 3vw, 34px) 0 0; }
.lp-sub b { font-weight: 700; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vw, 44px); }
.lp-btn {
  display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 700; font-size: 1.05rem;
  padding: 16px 26px; border-radius: 999px; border: 2px solid var(--cream); cursor: pointer; text-decoration: none;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.lp-btn--solid { background: var(--cream); color: var(--red); }
.lp-btn--ghost { background: transparent; color: var(--cream); }
.lp-btn:hover { transform: translateY(-2px); }
.lp-btn--ghost:hover { background: var(--cream); color: var(--red); }
.lp-btn svg { width: 18px; height: 18px; }

.lp-kicker { font-size: .95rem; font-weight: 600; letter-spacing: .04em; margin: 0 0 14px; opacity: .85; }
.lp-h2 { font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1; font-weight: 700; letter-spacing: -.035em; margin: 0 0 clamp(28px, 4vw, 52px); max-width: 1000px; }
.section--navy .lp-h2 { color: var(--cream); }

.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.lp-card { border: 1.5px solid rgba(255, 59, 48, .35); border-radius: 18px; padding: clamp(22px, 2.6vw, 34px); }
.lp-card b { display: block; font-size: clamp(1.15rem, 1.6vw, 1.45rem); color: var(--cream); margin: 14px 0 10px; letter-spacing: -.01em; }
.lp-card p { margin: 0; color: rgba(255, 240, 212, .78); line-height: 1.55; }
.lp-card .n { font-size: .9rem; font-weight: 700; color: var(--red); }

.lp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); border-top: 1px solid rgba(25, 25, 46, .35); }
.lp-list > div { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 24px 0; border-bottom: 1px solid rgba(25, 25, 46, .35); }
.lp-list .n { font-weight: 700; opacity: .7; }
.lp-list b { display: block; font-size: clamp(1.15rem, 1.5vw, 1.35rem); margin-bottom: 6px; }
.lp-list p { margin: 0; line-height: 1.55; opacity: .9; }

.lp-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); counter-reset: s; }
.lp-step { background: rgba(255, 240, 212, .04); border-radius: 18px; padding: clamp(22px, 2.6vw, 34px); }
.lp-step::before { counter-increment: s; content: "0" counter(s); display: block; font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; color: var(--red); line-height: 1; margin-bottom: 18px; }
.lp-step b { display: block; color: var(--cream); font-size: clamp(1.1rem, 1.5vw, 1.3rem); margin-bottom: 8px; }
.lp-step p { margin: 0; color: rgba(255, 240, 212, .78); line-height: 1.55; }

.lp-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.lp-contact__alt { display: grid; gap: 12px; margin-top: 28px; }
.lp-contact__alt a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.lp-form { background: var(--cream); color: var(--navy); border-radius: 22px; padding: clamp(22px, 3vw, 40px); display: grid; gap: 14px; }
.lp-form label { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; }
.lp-form input, .lp-form textarea {
  font: inherit; font-size: 1rem; color: var(--navy); background: #fff; border: 1.5px solid rgba(25, 25, 46, .14);
  border-radius: 12px; padding: 13px 14px; outline: none; transition: border-color .15s;
}
.lp-form input:focus, .lp-form textarea:focus { border-color: var(--red); }
.lp-form textarea { resize: vertical; min-height: 96px; }
.lp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lp-form button { margin-top: 6px; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--cream); background: var(--red); border: 0; border-radius: 999px; padding: 16px 24px; cursor: pointer; transition: transform .2s ease; }
.lp-form button:hover { transform: translateY(-2px); }
.lp-form .newsletter-status { margin: 0; font-size: .95rem; font-weight: 600; min-height: 1.2em; }
.lp-form small { font-size: .78rem; opacity: .65; line-height: 1.45; }

@media (max-width: 900px) {
  .lp-cards, .lp-steps, .lp-list, .lp-contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lp-form__row { grid-template-columns: 1fr; }
  .lp-btn { width: 100%; justify-content: center; }
}
.lp-checks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; }
.lp-checks li { position: relative; padding-left: 38px; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.45; }
.lp-checks li::before {
  content: ""; position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ff3b30' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.lp-checks b { display: block; font-weight: 800; }
.lp-wa { font-weight: 600; }
.lp-form__title { margin: 0 0 4px; font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; }
.section--navy .lp-kicker { color: var(--red); }

/* Landing corta: titolo, video, modulo */
.lp-form--short { max-width: 560px; margin: 0 auto; }
.lp-form__sub { margin: 0 0 6px; font-size: 1rem; line-height: 1.5; opacity: .8; }
.lp-form small a { text-decoration: underline; font-weight: 600; }
.lp-proof { padding: clamp(40px, 6vw, 80px) 0; }
.vreview--short .vreview__quote { font-size: clamp(1.6rem, 2.8vw, 2.8rem); }
.vreview--short .vreview__name { margin-bottom: 0; }
@media (max-width: 700px) {
  .lp-hero__inner { min-height: 0; padding: 120px 0 56px; }
  .lp-title { font-size: clamp(2.3rem, 11vw, 3.2rem); }
  .lp-eyebrow { margin-bottom: 14px; }
  .vreview { gap: 22px; }
  .vreview__quote { font-size: 1.6rem; }
}