/* ═══════════════════════════════════════════════════════
   PROGRESS BAR
═══════════════════════════════════════════════════════ */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--primary);
  z-index: 200;
  width: 0%;
  transition: width 60ms linear;
  transform-origin: left;
}

/* ═══════════════════════════════════════════════════════
   NAV — Floating pill
═══════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 16px;
  left: 0; right: 0;
  z-index: 100;
  padding-inline: var(--gutter);
  pointer-events: none;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav--footer-hidden {
  transform: translateY(calc(-100% - 32px));
  pointer-events: none !important;
}
.nav--footer-hidden .nav__inner {
  pointer-events: none !important;
}

.nav__inner {
  pointer-events: auto;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(160%) brightness(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(160%) brightness(1.04);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 100px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.40);
  padding: var(--space-3) var(--space-4);
  transition:
    border-radius var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}

[data-theme="dark"] .nav__inner {
  background: rgba(10,10,10,0.30);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    0 4px 24px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.nav.menu-open .nav__inner {
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  box-shadow: none;
  border-color: rgba(160,160,200,0.18);
  border-bottom-color: transparent;
}

/* ─── Menu button (left) ────────────────────────────── */
.nav__menu-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: 100px;
  transition: background var(--dur-fast) var(--ease-out);
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--primary);
  user-select: none;
}
.nav__menu-btn:hover { background: var(--black-04); }

.nav__menu-icon {
  display: flex;
  flex-direction: column;
  gap: 4.5px;
  width: 18px;
  flex-shrink: 0;
}
.nav__menu-icon span {
  display: block;
  height: 1.5px;
  background: var(--primary);
  border-radius: 2px;
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.nav.menu-open .nav__menu-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.nav.menu-open .nav__menu-icon span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav.menu-open .nav__menu-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.nav__menu-label-open  { display: none; }
.nav__menu-label-close { display: inline; }
.nav.menu-open .nav__menu-label-open  { display: inline; }
.nav.menu-open .nav__menu-label-close { display: none; }

/* ─── Theme & Lang toggle buttons ───────────────────── */
.nav__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  cursor: pointer;
  color: var(--black);
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.nav__icon-btn:hover { background: rgba(0,0,0,0.08); transform: scale(1.08); }
.nav__icon-btn svg { width: 16px; height: 16px; }

[data-theme="dark"] .nav__icon-btn {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #f0f0f0;
}
[data-theme="dark"] .nav__icon-btn:hover { background: rgba(255,255,255,0.12); }

.nav__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  cursor: pointer;
  color: var(--black);
  font-family: var(--font-secondary);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast);
}
.nav__lang-btn:hover { background: rgba(0,0,0,0.08); }

[data-theme="dark"] .nav__lang-btn {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #f0f0f0;
}
[data-theme="dark"] .nav__lang-btn:hover { background: rgba(255,255,255,0.12); }

.nav__nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: end;
}

/* ─── Avatar with photo ──────────────────────────────── */
.nav__avatar.has-photo::before,
.nav__avatar.has-photo::after { display: none; }
.nav__avatar.has-photo {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* ─── Logo (center grid column) ─────────────────────── */
.nav__logo {
  position: static;
  transform: none;
  justify-self: center;
  line-height: 0;
}
.nav__logo img {
  height: 48px;
  width: auto;
  display: block;
  transition: filter var(--dur-fast) var(--ease-out);
}
.nav__logo:hover img { filter: saturate(1.25) contrast(1.12); }

/* ─── Join Us (right) ───────────────────────────────── */
.nav__joinus {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--primary);
  color: var(--white);
  border-radius: 100px;
  padding: 8px var(--space-5);
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.nav__joinus:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  color: var(--white);
}


.nav__joinus-avatars {
  display: flex;
}
.nav__joinus-avatars .nav__avatar + .nav__avatar { margin-left: -7px; }

/* ─── Avatars ────────────────────────────────────────── */
.nav__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--primary);
  flex-shrink: 0;
  overflow: hidden;
  background: #e8b4c8;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.nav__avatar::before {
  content: '';
  position: absolute;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.75);
}
.nav__avatar::after {
  content: '';
  width: 18px;
  height: 11px;
  border-radius: 50% 50% 0 0;
  background: rgba(255,255,255,0.75);
  flex-shrink: 0;
}
.nav__avatar:nth-child(2) { background: #c89ab4; }
.nav__avatar:nth-child(3) { background: #d4a8c0; }
.nav__avatar:nth-child(4) { background: #b88aa4; }
.nav__avatar:nth-child(5) { background: #e0b0cc; }

/* ─── Mega dropdown ──────────────────────────────────── */
.nav__mega-wrapper {
  pointer-events: auto;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.nav.menu-open .nav__mega-wrapper {
  grid-template-rows: 1fr;
}

.nav__mega {
  overflow: hidden;
  border-radius: 0 0 24px 24px;
}

.nav__mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-radius: 0 0 24px 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  border-top: none;
  box-shadow: 0 20px 48px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
  background: rgba(12,12,12,0.35);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

.nav__mega-panel {
  padding: var(--space-8);
}

.nav__mega-panel--dark {
  background: transparent;
  color: var(--white);
}

.nav__mega-panel--pink {
  background: var(--primary);
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.nav__mega-label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-6);
}

.nav__mega-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.nav__mega-links--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-8);
}
/* pannello servizi: padding-right extra per staccare visivamente da "Esplora" */
.nav__mega-panel--dark:first-child {
  padding-right: var(--space-16);
}
.nav__mega-links a {
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  /* testo bianco sul pannello vetro scuro — leggibile nel default */
  color: #fff;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  display: block;
  border-radius: 100px;
  /* pill con respiro verticale — margin negativo mantiene allineamento */
  padding: 7px 12px;
  margin: 0 -12px;
  outline: none;
  text-decoration: none;
}
.nav__mega-links--2col a {
  margin: 0 -8px;
  padding: 6px 8px;
}
/* hover/focus: pill bianco quasi-opaco + testo scuro
   → contrasto garantito strutturalmente su qualsiasi sfondo */
.nav__mega-links a:hover {
  color: #111;
  background: rgba(255,255,255,0.93);
}
.nav__mega-links a:active {
  color: #fff;
  background: var(--primary);
}
.nav__mega-links a:focus-visible {
  color: #111;
  background: rgba(255,255,255,0.93);
  box-shadow: 0 0 0 2px #fff;
}

/* --dark panels: stessi pannelli del menu, stesse regole — nessuna variante che abbassa il contrasto */
.nav__mega-panel--dark .nav__mega-links a { color: #fff; }
.nav__mega-panel--dark .nav__mega-links a:hover {
  color: #111;
  background: rgba(255,255,255,0.93);
}
.nav__mega-panel--dark .nav__mega-links a:active {
  color: #fff;
  background: var(--primary);
}
.nav__mega-panel--dark .nav__mega-links a:focus-visible {
  color: #111;
  background: rgba(255,255,255,0.93);
  box-shadow: 0 0 0 2px #fff;
}

.nav__mega-avatars {
  display: flex;
}
.nav__mega-avatars .nav__avatar {
  width: 56px;
  height: 56px;
  border-color: rgba(219,0,90,0.4);
}
.nav__mega-avatars .nav__avatar + .nav__avatar { margin-left: -14px; }

.nav__mega-headline {
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: 400;
  line-height: 1.15;
  color: var(--white);
  white-space: nowrap;
}
.nav__mega-headline strong { font-weight: 400; color: inherit; }

.nav__joinus--outline {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  margin-top: var(--space-6);
  padding-block: 10px;
  padding-left: 6px;
  padding-right: var(--space-6);
  width: 100%;
  justify-content: center;
}
.nav__joinus--outline:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-1px);
  color: var(--white);
}
.nav__joinus--outline .nav__avatar { border-color: rgba(255,255,255,0.4); }

/* ─── Responsive: mobile ────────────────────────────── */
@media (max-width: 768px) {
  .nav { top: 10px; padding-inline: var(--space-4); }

  .nav__menu-label-close,
  .nav__menu-label-open { display: none !important; }

  .nav__logo img { height: 38px; }

  .nav__mega-inner {
    grid-template-columns: 1fr;
    border-radius: 0 0 20px 20px;
    max-height: 80vh;
    overflow-y: auto;
  }

  .nav__mega-panel { padding: var(--space-6); }

  .nav__mega-avatars .nav__avatar { width: 44px; height: 44px; }
  .nav__mega-avatars .nav__avatar + .nav__avatar { margin-left: -10px; }
}

/* ─── Overlay (close on outside click) ──────────────── */
.nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: none;
}
.nav.menu-open ~ .nav__overlay,
.nav.menu-open + .nav__overlay { display: block; }

/* ─── Old dropdown (kept for fallback, hidden) ──────── */
.nav__dropdown-menu {
  display: none;
}

/* ─── LEGACY: keep .nav__dropdown-item styles minimal ── */
.nav__dropdown-item {
  display: block;
  background: var(--white);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black-50);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    padding-left var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.nav__dropdown-item:hover {
  background: rgba(219,0,90,0.04);
  color: var(--primary);
  padding-left: calc(var(--space-5) + 4px);
}

.nav__dropdown-item--active { color: var(--black); font-weight: 600; }

/* ─── MOBILE MENU (legacy, replaced by mega dropdown) ── */
.nav__mobile { display: none; }
.nav__mobile-service {
  display: block;
  background: var(--white);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black-50);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav__mobile-service:hover { color: var(--primary); background: rgba(219,0,90,0.04); }

/* ═══════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════ */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: clamp(100px, 12vh, 140px);
  position: relative;
  overflow: hidden;
  background: var(--white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__noise {
  position: absolute;
  inset: 0;
  opacity: 0.15;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 256px;
}

.hero__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 92% 8%,  rgba(219,0,90,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 4%  88%, rgba(219,0,90,0.05) 0%, transparent 50%);
  will-change: transform;
}

.hero__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--space-8);
  padding-block: var(--space-16) var(--space-20);
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.hero__eyebrow::before {
  content: '';
  display: block;
  width: 24px; height: 1.5px;
  background: var(--primary);
  flex-shrink: 0;
}

.hero__title {
  font-family: var(--font-primary);
  font-size: clamp(3.5rem, 9vw, var(--text-9xl));
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--black);
  grid-column: 1 / -1;
}
.hero__title em {
  font-style: normal;
  color: var(--primary);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-enter) var(--ease-out);
}
.hero__title .line-inner.visible { transform: translateY(0); }
.hero__title .line:nth-child(2) .line-inner { transition-delay: 80ms; }
.hero__title .line:nth-child(3) .line-inner { transition-delay: 160ms; }

.hero__sub {
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--black-60);
  line-height: 1.7;
  max-width: 38ch;
  align-self: end;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
  align-self: end;
}

/* hero bottom bar */
.hero__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-6);
  border-top: var(--border);
  position: relative;
  z-index: 1;
}

.hero__tag {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black-50);
}

.hero__marquee-wrap {
  overflow: hidden;
  flex: 1;
  margin-inline: var(--space-10);
}
.hero__marquee {
  display: flex;
  gap: var(--space-8);
  animation: marquee 22s linear infinite;
  white-space: nowrap;
}
.hero__marquee span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black-40);
  flex-shrink: 0;
}
.hero__marquee span.sep { color: var(--primary); }

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

.hero__scroll-hint {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black-50);
}
.hero__scroll-line {
  width: 36px; height: 1px;
  background: var(--black-20);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--primary);
  animation: scan 2.4s var(--ease-in-out) infinite 2s;
}
@keyframes scan { to { left: 200%; } }

/* ═══════════════════════════════════════════════════════
   SECTION COMMON
═══════════════════════════════════════════════════════ */
.section {
  padding-block: clamp(var(--space-20), 8vw, var(--space-40));
}

.section__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-10);
}
.section__label::before {
  content: '';
  display: block;
  width: 18px; height: 1.5px;
  background: var(--primary);
}

.section__heading {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-4xl), 5.5vw, var(--text-7xl));
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--black);
}
.section__heading em {
  font-style: normal;
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-8);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: var(--primary);
  color: var(--white);
  isolation: isolate;
}
.btn--primary::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--black);
  transform: translateX(-101%);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: -1;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--white);
  background: var(--black);
}
.btn--primary:hover::before { transform: translateX(0); }

.btn--outline {
  background: transparent;
  color: var(--black-60);
  border: 1px solid var(--black-20);
  isolation: isolate;
}
.btn--outline::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--black);
  transform: translateX(-101%);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: -1;
}
.btn--outline:hover {
  border-color: var(--black);
  color: var(--white);
  background: var(--black);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--outline:hover::before { transform: translateX(0); }

.btn--ghost {
  background: transparent;
  color: var(--black-50);
  padding-inline: 0;
  overflow: visible;
}
.btn--ghost:hover { color: var(--black); }

/* ═══════════════════════════════════════════════════════
   ABOUT
═══════════════════════════════════════════════════════ */
.about { border-top: var(--border); }

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-12), 7vw, var(--space-40));
  align-items: center;
}

.about__body {
  margin-top: var(--space-8);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--black-60);
  line-height: 1.7;
  max-width: 50ch;
}
.about__body strong { color: var(--black); font-weight: 600; }
.about__body + .about__body { margin-top: var(--space-5); }

.about__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: var(--space-12);
  background: var(--black-08);
  border: var(--border);
}

.stat {
  background: var(--white);
  padding: var(--space-8) var(--space-6);
  position: relative;
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.stat::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px; width: 0;
  background: var(--primary);
  transition: width var(--dur-slow) var(--ease-out);
}
.stat:hover { background: rgba(219,0,90,0.03); }
.stat:hover::after { width: 100%; }

.stat__number {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-4xl), 4.5vw, var(--text-6xl));
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--primary);
}

.stat__label {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--black-50);
  margin-top: var(--space-2);
}

/* about visual */
.about__visual {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
}
.about__visual-inner {
  position: absolute;
  inset: 0;
  background: rgba(219,0,90,0.03);
  overflow: hidden;
}
.about__visual-inner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(219,0,90,0.07) 0%, transparent 45%),
    linear-gradient(315deg, rgba(0,0,0,0.02) 0%, transparent 45%);
}
.about__visual-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--black-06) 1px, transparent 1px),
    linear-gradient(90deg, var(--black-06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.about__visual-accent {
  position: absolute;
  bottom: var(--space-10);
  right: var(--space-8);
  font-family: var(--font-primary);
  font-size: clamp(3.5rem, 7vw, 7rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--black-06);
  writing-mode: vertical-rl;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════
   SERVICES (homepage — 3 col grid)
═══════════════════════════════════════════════════════ */
.services { border-top: var(--border); }

.services__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-16);
}

.services__intro {
  font-size: var(--text-lg);
  color: var(--black-60);
  line-height: 1.7;
  max-width: 44ch;
  align-self: end;
}

.services__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--black-08);
  border: var(--border);
}

.service-card {
  background: var(--white);
  padding: var(--space-10) var(--space-8) var(--space-12);
  position: relative;
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  cursor: default;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  background: var(--primary);
  transition: height var(--dur-base) var(--ease-out);
}
.service-card:hover {
  background: rgba(219,0,90,0.02);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.service-card:hover::before { height: 2px; }

.service-card__num {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--primary);
  margin-bottom: var(--space-8);
}

.service-card__title {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-xl), 2.2vw, var(--text-3xl));
  letter-spacing: -0.015em;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: var(--space-5);
  color: var(--black);
  position: relative;
}

.service-card__desc {
  font-size: var(--text-sm);
  color: var(--black-50);
  line-height: 1.75;
}

.service-card__arrow {
  position: absolute;
  bottom: var(--space-8);
  right: var(--space-8);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--black-10);
  color: var(--black-20);
  font-size: 12px;
  transform: rotate(-45deg);
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    background var(--dur-base) var(--ease-out);
}
.service-card:hover .service-card__arrow {
  transform: rotate(0deg);
  border-color: var(--primary);
  color: var(--white);
  background: var(--primary);
}

/* ═══════════════════════════════════════════════════════
   WORK / PROJECTS
═══════════════════════════════════════════════════════ */
.work { border-top: var(--border); }

.work__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-12);
}

.work__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black-50);
  transition: color var(--dur-fast) var(--ease-out);
}
.work__link:hover { color: var(--primary); }
.work__link svg { transition: transform var(--dur-base) var(--ease-out); }
.work__link:hover svg { transform: translateX(5px); }

.work__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
}

.project-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.project-card:nth-child(1) { grid-column: 1 / 8; grid-row: 1; }
.project-card:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
.project-card:nth-child(3) { grid-column: 1 / 5;  grid-row: 2; }
.project-card:nth-child(4) { grid-column: 5 / 13; grid-row: 2; }

.project-card__media {
  background: var(--black-04);
  overflow: hidden;
  position: relative;
}
.project-card:nth-child(1) .project-card__media { aspect-ratio: 16/9; }
.project-card:nth-child(2) .project-card__media { aspect-ratio: 4/5; }
.project-card:nth-child(3) .project-card__media { aspect-ratio: 4/5; }
.project-card:nth-child(4) .project-card__media { aspect-ratio: 16/9; }

.project-card__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform var(--dur-slow) var(--ease-out);
}
.project-card:hover .project-card__placeholder { transform: scale(1.05); }

.project-card:nth-child(1) .project-card__placeholder { background: linear-gradient(135deg, #f5e0e8 0%, #ede8f5 100%); }
.project-card:nth-child(2) .project-card__placeholder { background: linear-gradient(135deg, #fce4ee 0%, #f0e8f7 100%); }
.project-card:nth-child(3) .project-card__placeholder { background: linear-gradient(135deg, #e8f0e8 0%, #f5f5e0 100%); }
.project-card:nth-child(4) .project-card__placeholder { background: linear-gradient(135deg, #fce0ec 0%, #e8f0f8 100%); }

.project-card__placeholder-text {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 5vw, 6rem);
  letter-spacing: -0.05em;
  text-transform: uppercase;
  opacity: 0.10;
  color: var(--black);
  user-select: none;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.project-card:hover .project-card__placeholder-text { opacity: 0.18; }

.project-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.20) 50%, transparent 100%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  display: flex; align-items: flex-end;
  padding: var(--space-6);
}
.project-card:hover .project-card__overlay { opacity: 1; }

.project-card__overlay-inner {
  transform: translateY(12px);
  transition: transform var(--dur-base) var(--ease-out);
}
.project-card:hover .project-card__overlay-inner { transform: translateY(0); }

.project-card__cat {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
}

.project-card__info {
  padding-top: var(--space-4);
  transition: transform var(--dur-base) var(--ease-out);
}
.project-card:hover .project-card__info { transform: translateX(4px); }

.project-card__title {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--black);
}

.project-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}

.project-card__tag {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--black-50);
}
.project-card__tag + .project-card__tag::before {
  content: '·';
  margin-right: var(--space-3);
  color: var(--black-20);
}

/* overlay titles (white) */
.project-card__overlay .project-card__title { color: var(--white); }

/* ═══════════════════════════════════════════════════════
   MANIFESTO / CTA BAND
═══════════════════════════════════════════════════════ */
.manifesto {
  border-top: var(--border);
  position: relative;
  overflow: hidden;
  background: var(--black);
}

.manifesto__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(219,0,90,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 15%, rgba(219,0,90,0.10) 0%, transparent 50%);
  pointer-events: none;
}

.manifesto__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-block: clamp(var(--space-24), 14vw, var(--space-48));
}

.manifesto__title {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-4xl), 9vw, var(--text-9xl));
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-10);
}
.manifesto__title em {
  font-style: normal;
  -webkit-text-stroke: 1px rgba(255,255,255,0.6);
  color: transparent;
}

.manifesto__sub {
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--white-55);
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--space-10);
  line-height: 1.65;
}

/* manifesto button override */
.manifesto .btn--primary {
  background: var(--white);
  color: var(--black);
}
.manifesto .btn--primary::before { background: var(--primary); }
.manifesto .btn--primary:hover { color: var(--white); }

/* ═══════════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════════ */
.contact { border-top: var(--border); }

.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-12), 7vw, var(--space-32));
  align-items: start;
}

.contact__body {
  font-size: var(--text-lg);
  color: var(--black-60);
  line-height: 1.7;
  margin-top: var(--space-8);
  max-width: 44ch;
}

.contact-info-block {
  display: block;
  padding: var(--space-8) var(--space-7);
  border: var(--border);
  margin-top: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.contact-info-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
a.contact-info-block:hover {
  border-color: var(--black-20);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
a.contact-info-block:hover::before { transform: scaleX(1); }
a.contact-info-block:hover .contact-info-block__value { color: var(--primary); }

.contact-info-block__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black-50);
  margin-bottom: var(--space-3);
}
.contact-info-block__value {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.1;
  transition: color var(--dur-fast) var(--ease-out);
}

/* ─── contact form ────────────────────────────────────── */
.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-field label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black-50);
  transition: color var(--dur-fast);
}
.form-field:focus-within label { color: var(--primary); }

.form-field input,
.form-field textarea,
.form-field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--black-20);
  color: var(--black);
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  font-weight: 400;
  padding: var(--space-4) 0;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.form-field input:focus,
.form-field textarea:focus { border-bottom-color: var(--primary); }
.form-field textarea { resize: none; min-height: 100px; }
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--black-20); }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.footer {
  border-top: var(--border);
  padding-block: var(--space-10) var(--space-8);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-8);
}
.footer__logo img { height: 20px; width: auto; opacity: 0.45; transition: opacity var(--dur-fast), transform var(--dur-fast); }
.footer__logo:hover img { opacity: 1; transform: scale(1.04); }
.footer__social { display: flex; gap: var(--space-6); }
.footer__social-link {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black-50);
  transition: color var(--dur-fast) var(--ease-out);
  position: relative;
}
.footer__social-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--primary);
  transition: width var(--dur-base) var(--ease-out);
}
.footer__social-link:hover { color: var(--primary); }
.footer__social-link:hover::after { width: 100%; }
.footer__copy {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--black-40);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black-40);
  margin-bottom: var(--space-10);
}
.breadcrumb a { color: var(--black-40); transition: color var(--dur-fast); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb__sep { color: var(--black-10); }
.breadcrumb__current { color: var(--black-60); font-weight: 600; }

/* ═══════════════════════════════════════════════════════
   PAGE HERO (inner pages)
═══════════════════════════════════════════════════════ */
.page-hero {
  padding-top: clamp(120px, 14vh, 160px);
  padding-bottom: clamp(var(--space-16), 7vw, var(--space-32));
  position: relative;
  overflow: hidden;
  border-bottom: var(--border);
  background: var(--white);
}

.page-hero__bg {
  position: absolute; inset: 0;
  pointer-events: none;
}
.page-hero__noise {
  position: absolute; inset: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 256px;
}
.page-hero__gradient { position: absolute; inset: 0; }

.page-hero--services .page-hero__gradient {
  background:
    radial-gradient(ellipse 55% 80% at 100% 0%,  rgba(219,0,90,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 35% 50% at 0%  100%, rgba(219,0,90,0.03) 0%, transparent 50%);
}
.page-hero--contact .page-hero__gradient {
  background:
    radial-gradient(ellipse 55% 70% at 0%   0%,  rgba(219,0,90,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 35% 40% at 100% 100%, rgba(0,0,0,0.02) 0%, transparent 50%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: var(--space-8);
}

.page-hero__kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.page-hero__kicker::before {
  content: '';
  display: block;
  width: 18px; height: 1.5px;
  background: var(--primary);
}

.page-hero__title {
  font-family: var(--font-primary);
  font-size: clamp(3rem, 7.5vw, var(--text-8xl));
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--black);
  grid-column: 1 / -1;
}
.page-hero__title em { font-style: normal; color: var(--primary); }

.page-hero__sub {
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--black-60);
  line-height: 1.7;
  max-width: 46ch;
  align-self: end;
}
.page-hero__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  align-self: end;
}
.page-hero__meta-item {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black-50);
  text-align: right;
}

/* ═══════════════════════════════════════════════════════
   SERVICES FULL LIST (servizi.html)
═══════════════════════════════════════════════════════ */
.services-full { border-top: 0; padding-top: 0; }

.service-row {
  display: grid;
  grid-template-columns: 56px 1fr 2fr auto;
  gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-8);
  border-bottom: var(--border);
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  padding-inline: var(--space-4);
}
.service-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--primary);
  transition: width var(--dur-fast) var(--ease-out);
}
.service-row:hover { background: rgba(219,0,90,0.025); }
.service-row:hover::before { width: 3px; }
.service-row:hover .service-row__title { color: var(--primary); transform: translateX(4px); }
.service-row:hover .service-row__arrow { opacity: 1; transform: translateX(0); }

.service-row__num {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.service-row__title {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-5xl));
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--black);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.service-row__desc {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--black-50);
  line-height: 1.75;
  max-width: 52ch;
}

.service-row__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}
.service-row__tag {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black-40);
}

.service-row__arrow {
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
  color: var(--primary);
  font-size: 18px;
  margin-left: var(--space-4);
}

/* ═══════════════════════════════════════════════════════
   SERVICE SUBPAGE DETAIL
═══════════════════════════════════════════════════════ */
.service-detail { border-top: 0; }

.service-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-16), 8vw, var(--space-40));
  align-items: start;
}

.service-detail__body {
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--black-60);
  line-height: 1.7;
  margin-top: var(--space-8);
}
.service-detail__body strong { color: var(--black); font-weight: 600; }
.service-detail__body p + p { margin-top: var(--space-6); }

.service-detail__panel {
  background: transparent;
  border: var(--border);
  padding: var(--space-10) var(--space-8);
  position: relative;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.service-detail__panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--primary);
}
.service-detail__panel:hover { box-shadow: var(--shadow-md); }

.service-detail__panel-title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--black-50);
  margin-bottom: var(--space-8);
}

.service-detail__list { display: flex; flex-direction: column; }

.service-detail__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: var(--border);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--black-60);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.service-detail__item:last-child { border-bottom: none; }
.service-detail__item::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.service-detail__item:hover { color: var(--black); transform: translateX(4px); }
.service-detail__item:hover::before { transform: scale(1.5); }

.service-detail__cta-box {
  margin-top: var(--space-6);
  padding: var(--space-8);
  border: var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.service-detail__cta-box:hover { box-shadow: var(--shadow-sm); }

.service-detail__cta-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black-50);
}

/* ═══════════════════════════════════════════════════════
   SVC-HERO — split hero for service pages (form + image)
═══════════════════════════════════════════════════════ */
.svc-hero {
  padding-top: 82px;
  background: #fff;
  min-height: 100svh;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.svc-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
  width: 100%;
  min-height: calc(100svh - 82px);
  padding-top: clamp(2rem, 4vh, 3rem);
  padding-bottom: clamp(2rem, 4vh, 3rem);
}

.svc-hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}

.svc-hero__kicker {
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.svc-hero__title {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 4.5vw, 72px);
  font-weight: 900;
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.5rem;
}
.svc-hero__title em {
  font-style: normal;
  color: var(--primary);
}

.svc-hero__sub {
  font-family: var(--font-secondary);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  color: var(--black-60);
  line-height: 1.5;
  max-width: 48ch;
}

.svc-hero__tagline {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  color: var(--black);
  margin-bottom: 0.25rem;
}

.svc-hero__form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.svc-hero__field {
  width: 100%;
  padding: 0.55rem var(--space-4);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px;
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black);
  background: #fff;
  transition: border-color var(--dur-fast);
  outline: none;
}
.svc-hero__field::placeholder { color: var(--black-40); }
.svc-hero__field:focus { border-color: var(--primary); }

.svc-hero__privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  color: var(--black-60);
  line-height: 1.5;
  cursor: pointer;
}
.svc-hero__privacy input { margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; }
.svc-hero__privacy a { color: var(--primary); text-decoration: underline; }

.svc-hero__submit {
  width: 100%;
  padding: 0.75rem var(--space-4);
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  margin-top: var(--space-1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

.svc-hero__right {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.svc-hero__video-wrap {
  width: 100%;
  flex: 1;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  min-height: 400px;
}
.svc-hero__video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: none;
}

.svc-hero__img-wrap {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: 20px;
  background: #f4f4f4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-hero__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

@media (max-width: 900px) {
  .svc-hero__inner {
    grid-template-columns: 1fr;
  }
  .svc-hero__right { display: none; }
  .svc-hero { padding-top: calc(82px + 2rem); }
}

/* ═══════════════════════════════════════════════════════
   SVC-PROCESS — 3-column process/steps section
═══════════════════════════════════════════════════════ */
.svc-process {
  background:
    radial-gradient(ellipse 45% 30% at 88% 50%, rgba(219,0,90,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 38% 28% at 10% 50%, rgba(219,0,90,0.05) 0%, transparent 70%),
    linear-gradient(180deg, #fff 0%, #fdf2f7 50%, #fff 100%);
}

.svc-process__title {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.svc-process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.svc-process__card {
  background: var(--white);
  border: var(--border);
  border-radius: 16px;
  padding: clamp(2rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.svc-process__card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.svc-process__icon {
  width: 48px;
  height: 48px;
  color: var(--primary);
  flex-shrink: 0;
}
.svc-process__icon svg { width: 100%; height: 100%; }

.svc-process__card-title {
  font-family: var(--font-primary);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1.2;
}

.svc-process__card-text {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black-60);
  line-height: 1.7;
}

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

/* ═══════════════════════════════════════════════════════
   SVC-SECTION-TITLE — large section heading (46px)
═══════════════════════════════════════════════════════ */
.svc-section-title {
  font-family: var(--font-primary);
  font-size: 46px;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: var(--space-8);
}

/* ═══════════════════════════════════════════════════════
   SVC-DIVIDER — full-width zampa image between sections
═══════════════════════════════════════════════════════ */
.svc-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-bottom: -8rem;
}
.svc-divider__img {
  width: 100%;
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════
   SVC-TOOLS — "che tools utilizziamo" section
═══════════════════════════════════════════════════════ */
.svc-tools {
  background: #fff;
  border-top: var(--border);
}

.svc-tools__title {
  font-family: var(--font-primary);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.svc-tools__grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(2rem, 4vw, 4rem);
}

.svc-tools__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  transition: transform var(--dur-base) var(--ease-out);
}
.svc-tools__item:hover { transform: translateY(-4px); }

.svc-tools__item svg {
  width: 64px;
  height: 64px;
}

.svc-tools__item span {
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black-60);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   SVC-CLIENTS — dual marquee ticker
═══════════════════════════════════════════════════════ */
.svc-clients {
  overflow: hidden;
}

.svc-clients__title {
  font-family: var(--font-primary);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.svc-clients__marquee-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.svc-clients__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee-left 150s linear infinite;
}
.svc-clients__track--rev {
  animation-direction: reverse;
}
.svc-clients__track:hover,
.svc-clients__track--rev:hover {
  animation-play-state: paused;
}

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

.svc-clients__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 200px;
}
.svc-clients__logo img {
  max-width: 220px;
  max-height: 100px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.75;
  transition: opacity var(--dur-fast);
}
.svc-clients__logo:hover img {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   SVC-MAGIC — "altre magie" cat + service links section
═══════════════════════════════════════════════════════ */
.svc-magic {
  background:
    radial-gradient(ellipse 45% 30% at 88% 50%, rgba(219,0,90,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 38% 28% at 10% 50%, rgba(219,0,90,0.05) 0%, transparent 70%),
    linear-gradient(180deg, #fff 0%, #fdf2f7 50%, #fff 100%);
}

.svc-magic__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: center;
}

.svc-magic__cat {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.svc-magic__cat img {
  width: clamp(320px, 50vw, 600px);
  height: auto;
  object-fit: contain;
}

.svc-magic__title {
  font-family: var(--font-primary);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.15;
}

.svc-magic__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.svc-magic__pill {
  display: block;
  padding: var(--space-4) var(--space-6);
  background: var(--black);
  color: var(--white);
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  border-radius: 100px;
  text-decoration: none;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.svc-magic__pill:hover {
  background: var(--primary);
  transform: translateX(4px);
}
.svc-magic__pill--outline {
  background: transparent;
  border: 2px solid var(--black);
  color: var(--black);
}
.svc-magic__pill--outline:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

@media (max-width: 768px) {
  .svc-magic__inner { grid-template-columns: 1fr; }
  .svc-magic__cat { display: none; }
}

/* ═══════════════════════════════════════════════════════
   SVC-CAFFE — bottom CTA section with form
═══════════════════════════════════════════════════════ */
.svc-caffe {
  background:
    radial-gradient(ellipse 55% 60% at 0% 50%, rgba(219,0,90,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 100% 100%, rgba(219,0,90,0.10) 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    #050505;
}

.svc-caffe__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  padding-block: clamp(4rem, 8vw, 7rem);
}

.svc-caffe__left {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.svc-caffe__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white);
  line-height: 0.95;
  letter-spacing: -0.01em;
}

.svc-caffe__sub {
  font-family: var(--font-secondary);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: rgba(255,255,255,0.55);
}

.svc-caffe__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}
.hc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}
.hc-textarea { min-height: 130px; resize: vertical; }
@media (max-width: 640px) {
  .hc-row { grid-template-columns: 1fr; }
}

.svc-caffe__field {
  width: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  outline: none;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.svc-caffe__field::placeholder { color: rgba(255,255,255,0.35); }
.svc-caffe__field:focus {
  border-color: var(--primary);
  background: rgba(255,255,255,0.10);
}

.svc-caffe__privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  line-height: 1.5;
  cursor: pointer;
}
.svc-caffe__privacy a { color: var(--primary); }
.svc-caffe__privacy input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; accent-color: var(--primary); }

.svc-caffe .btn--primary:hover {
  background: var(--white) !important;
  color: var(--black) !important;
  border-color: var(--white) !important;
  transform: translateY(-2px);
}
.svc-caffe .btn--primary::before { display: none; }

@media (max-width: 768px) {
  .svc-caffe__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ═══════════════════════════════════════════════════════
   SVC-HERO — platform icons row
═══════════════════════════════════════════════════════ */
.svc-hero__platforms {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.svc-hero__platforms img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: transform var(--dur-fast);
}
.svc-hero__platforms img:hover { transform: scale(1.15); }

/* ═══════════════════════════════════════════════════════
   SVC-ADVANTAGES — 6-item 3-col cards (same style as svc-process)
═══════════════════════════════════════════════════════ */
.svc-advantages__title {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
  line-height: 1.15;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.svc-advantages {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.svc-advantages__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.svc-advantages__item {
  background: var(--white);
  border: var(--border);
  border-radius: 16px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.svc-advantages__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.svc-advantages__icon {
  width: 48px;
  height: 48px;
  color: var(--primary);
  flex-shrink: 0;
}
.svc-advantages__icon svg { width: 100%; height: 100%; }

.svc-advantages__item-title {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--primary);
  line-height: 1.2;
}

.svc-advantages__item-text {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black-60);
  line-height: 1.7;
}

@media (max-width: 900px) {
  .svc-advantages__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .svc-advantages__grid { grid-template-columns: 1fr; }
  .svc-advantages { min-height: unset; }
}

/* ═══════════════════════════════════════════════════════
   SVC-STATEMENT — large fucsia quote/tagline section
═══════════════════════════════════════════════════════ */
.svc-statement {
  text-align: center;
  padding-bottom: 0;
  border-bottom: var(--border);
  min-height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-statement__text {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  line-height: 1.0;
  letter-spacing: 0.04em;
  transform: scaleY(1.18);
  transform-origin: center top;
  display: block;
  max-width: 100%;
  margin-inline: auto;
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

/* ═══════════════════════════════════════════════════════
   SVC-FEATURES — alternating image + text rows
═══════════════════════════════════════════════════════ */
.svc-features__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: var(--border);
}
.svc-features__item--flip .svc-features__visual { order: 2; }
.svc-features__item--flip .svc-features__copy  { order: 1; }

.svc-features__visual {
  border-radius: 16px;
  overflow: hidden;
  background: #f0f0f0;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #ddd;
}
.svc-features__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-features__placeholder {
  width: 100%;
  height: 100%;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: #f4f4f4;
  border-radius: 14px;
  color: var(--primary);
  opacity: 0.35;
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
}
.svc-features__placeholder svg {
  width: 40px;
  height: 40px;
}

.svc-features__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Eyebrow pill tag */
.svc-features__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(219,0,90,0.08);
  color: var(--primary);
  border-radius: 100px;
  padding: 0.3rem 0.9rem;
  font-family: var(--font-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  width: fit-content;
}

.svc-features__title {
  font-family: var(--font-primary);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.0;
  letter-spacing: -0.01em;
}
.svc-features__subtitle {
  font-family: var(--font-secondary);
  font-size: clamp(0.8rem, 1.1vw, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black-60);
  line-height: 1.4;
}
.svc-features__text {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black-60);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════
   SVC-AI STYLE COMPONENTS
   (layout reference: Pagina-servizi-AI)
═══════════════════════════════════════════════════════ */

/* — Section header centrato con eyebrow — */
.svc-section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.svc-section-header__eyebrow {
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-3);
}
.svc-section-header__title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.svc-section-header__sub {
  font-family: var(--font-secondary);
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  color: var(--black-60);
  max-width: 560px;
  margin-inline: auto;
  line-height: 1.6;
}

/* — Wrapper section with light gray bg — */
.svc-blocks-section {
  background: #f5f5f5;
  padding-block: 0;
}
.svc-blocks-section .container {
  padding-block: clamp(2rem, 4vw, 3rem);
}

/* — Content block: text(wider) + image 2-col — */
.svc-content-block {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid #e0e0e0;
}
.svc-content-block:first-child { border-top: none; }
.svc-content-block:last-child { padding-bottom: 0; }
.svc-content-block--flip .svc-content-block__visual { order: 1; }
.svc-content-block--flip .svc-content-block__copy   { order: 2; }

.svc-content-block__visual {
  border-radius: 12px;
  overflow: hidden;
  background: #e8e8e8;
  aspect-ratio: 5/3;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed #c8c8c8;
}
.svc-content-block__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.svc-content-block__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary);
  opacity: 0.4;
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  color: #aaa;
}
.svc-content-block__placeholder svg { width: 36px; height: 36px; color: var(--primary); opacity: 0.5; }

.svc-content-block__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Eyebrow pill — fucsia tint bg, fucsia text */
.svc-content-block__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(219,0,90,0.07);
  color: var(--primary);
  border-radius: 100px;
  padding: 0.45rem 1.1rem;
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: fit-content;
}
.svc-content-block__tag svg { vertical-align: middle; flex-shrink: 0; }

.svc-content-block__title {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.1;
  letter-spacing: 0.04em;
  display: block;
  margin-top: var(--space-1);
  margin-bottom: var(--space-5);
}

.svc-content-block__text {
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  color: #444;
  line-height: 1.75;
  margin-top: var(--space-5);
}

/* Checklist con spunta fucsia */
.svc-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
}
.svc-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black-80);
  line-height: 1.5;
}
.svc-checklist li::before {
  content: "✓";
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Box "I Vantaggi" — sfondo rosa, bordo sinistro fucsia */
.svc-callout {
  background: rgba(219,0,90,0.05);
  border-left: 3px solid var(--primary);
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem;
}
.svc-callout__label {
  font-family: var(--font-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-3);
  display: block;
}

/* Feature badge pills (⚡ Più rapidi, etc.) */
.svc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.svc-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1.5px solid var(--black-12);
  border-radius: 100px;
  padding: 0.45rem 1rem;
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--black);
  background: var(--white);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.svc-badge:hover { border-color: var(--primary); color: var(--primary); }
.svc-badge__icon { font-size: 1rem; line-height: 1; }

@media (max-width: 768px) {
  .svc-content-block { grid-template-columns: 1fr; }
  .svc-content-block--flip .svc-content-block__visual { order: 0; }
  .svc-content-block--flip .svc-content-block__copy   { order: 0; }
}

/* ═══════════════════════════════════════════════════════
   SVC-CHANNELS — social platform icons
═══════════════════════════════════════════════════════ */
.svc-channels__title {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
  line-height: 1.15;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.svc-channels__grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.svc-channels__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  transition: transform var(--dur-base) var(--ease-out);
}
.svc-channels__item:hover { transform: translateY(-5px); }

.svc-channels__item img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}

.svc-channels__item span {
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black-60);
}

/* ═══════════════════════════════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }

/* ═══════════════════════════════════════════════════════
   FOCUS STYLES (accessibility)
═══════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════
   NAV ACTIVE
═══════════════════════════════════════════════════════ */
.nav__link--active { color: var(--black); }
.nav__link--active::after { width: 100%; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .service-row { grid-template-columns: 48px 1fr 2fr; }
  .service-row__tags { display: none; }
}

@media (max-width: 1024px) {
  .services__list { grid-template-columns: repeat(2, 1fr); }

  .project-card:nth-child(1) { grid-column: 1 / -1; }
  .project-card:nth-child(2) { grid-column: 1 / 7;  grid-row: 2; }
  .project-card:nth-child(3) { grid-column: 7 / 13; grid-row: 2; }
  .project-card:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 768px) {
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: flex; }

  .hero__content { grid-template-columns: 1fr; }
  .hero__title { font-size: clamp(3rem, 15vw, 5rem); }
  .hero__sub { max-width: 100%; }
  .hero__actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .hero__marquee-wrap { display: none; }

  .about__grid { grid-template-columns: 1fr; }
  .about__visual { display: none; }
  .about__stats { grid-template-columns: 1fr 1fr; }

  .services__header { grid-template-columns: 1fr; }
  .services__list { grid-template-columns: 1fr; }

  .work__grid { grid-template-columns: 1fr; }
  .project-card:nth-child(n) { grid-column: 1/-1; grid-row: auto; }

  .manifesto__title { font-size: clamp(2.5rem, 13vw, 4rem); }

  .contact__grid { grid-template-columns: 1fr; }

  .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__meta { align-items: flex-start; }

  .service-row { grid-template-columns: 40px 1fr; }
  .service-row__desc { display: none; }
  .service-row__title { font-size: clamp(var(--text-2xl), 7vw, var(--text-3xl)); }

  .service-detail__grid { grid-template-columns: 1fr; }

  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__logo { grid-column: 1; }
  .footer__copy { grid-column: 1/-1; grid-row: 2; text-align: left; }
  .footer__social { grid-column: 2; justify-content: flex-end; }
}

@media (max-width: 480px) {
  .about__stats { grid-template-columns: 1fr; }
  .hero__footer { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .service-row { padding-block: var(--space-6); }
}

/* ═══════════════════════════════════════════════════════
   HERO HOME
═══════════════════════════════════════════════════════ */
.hero-home {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(100px, 12vh, 140px);
  padding-bottom: var(--space-16);
  position: relative;
  overflow: hidden;
  background: var(--white);
}

.hero-home__cat {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(220px, 28vw, 420px);
  z-index: 1;
  pointer-events: none;
}
.hero-home__cat img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-home__title {
  font-family: var(--font-primary);
  font-size: clamp(4.5rem, 13vw, var(--text-9xl));
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-bottom: var(--space-10);
}
.hero-home__title .line { display: block; overflow: hidden; }
.hero-home__title .line-inner {
  display: block;
  animation: heroLineUp var(--dur-enter) var(--ease-out) both;
}
.hero-home__title .line:nth-child(2) .line-inner { animation-delay: 80ms; }
.hero-home__title .line:nth-child(3) .line-inner { animation-delay: 160ms; }

@keyframes heroLineUp {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

.line--solid { color: var(--primary); }
.line--outline {
  color: transparent;
  -webkit-text-stroke: 2px rgba(0,0,0,0.15);
}

.hero-home__below {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.hero-home__tagline {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--primary);
}

.hero-home__sub {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--black-60);
}

/* ═══════════════════════════════════════════════════════
   SERVICES GRID (homepage)
═══════════════════════════════════════════════════════ */
.svc-grid { border-top: var(--border); }

.svc-grid__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-left: var(--border);
  border-top: var(--border);
}

.svc-item {
  padding: var(--space-8) var(--space-6);
  border-right: var(--border);
  border-bottom: var(--border);
  transition: background var(--dur-base) var(--ease-out);
  position: relative;
}
.svc-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  background: var(--primary);
  transition: height var(--dur-fast) var(--ease-out);
}
.svc-item:hover { background: rgba(219,0,90,0.02); }
.svc-item:hover::before { height: 2px; }

.svc-item__num {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 2.8vw, 3rem);
  font-weight: 900;
  -webkit-text-stroke: 1.5px var(--black);
  color: transparent;
  line-height: 1;
  margin-bottom: var(--space-4);
  display: block;
}

.svc-item__name {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  line-height: 1.3;
  margin-bottom: var(--space-3);
}
.svc-item__name a {
  color: inherit;
  transition: opacity var(--dur-fast);
}
.svc-item__name a:hover { opacity: 0.75; }

.svc-item__desc {
  font-size: var(--text-xs);
  color: var(--black-60);
  line-height: 1.65;
}
.svc-item__desc strong {
  color: var(--black);
  font-weight: 700;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════
   VIDEO SECTION
═══════════════════════════════════════════════════════ */
.video-section { border-top: var(--border); }

.video-section__embed {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  border: 2px solid var(--black);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-section__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ═══════════════════════════════════════════════════════
   ABOUT SECTION (homepage)
═══════════════════════════════════════════════════════ */
.about-section { border-top: var(--border); overflow: hidden; }

.about-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-20));
  align-items: center;
}

/* Left column */
.about-section__left {
  position: relative;
}

.about-section__big {
  font-family: var(--font-primary);
  font-size: 150px;
  font-weight: 900;
  text-transform: uppercase;
  -webkit-text-stroke: 2px var(--primary);
  color: transparent;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-6);
  user-select: none;
}

.about-section__img-wrap {
  position: relative;
  display: inline-block;
}

.about-section__circle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 115%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--black-10);
  pointer-events: none;
}

.about-section__img-wrap img {
  position: relative;
  z-index: 1;
  width: clamp(240px, 35vw, 480px);
  height: auto;
  display: block;
}

/* Right column */
.about-section__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.about-section__tail {
  width: clamp(120px, 20vw, 220px);
  height: auto;
  align-self: flex-end;
  margin-bottom: var(--space-2);
}

.about-section__heading {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-5xl));
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--black);
}

.about-section__kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black-60);
}

.about-section__body {
  font-size: var(--text-base);
  color: var(--black-60);
  line-height: 1.75;
}
.about-section__body strong { color: var(--black); font-weight: 700; }

/* ═══════════════════════════════════════════════════════
   CLIENTS SECTION
═══════════════════════════════════════════════════════ */
.clients-section { border-top: var(--border); }

.clients__heading {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-3xl), 5.5vw, var(--text-6xl));
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1;
  -webkit-text-stroke: 2px var(--primary);
  color: transparent;
  text-align: center;
  margin-bottom: var(--space-16);
}

.clients__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-6) var(--space-10);
  row-gap: var(--space-8);
}

.client-logo {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--black);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  cursor: default;
}
.client-logo:hover { color: var(--primary); transform: scale(1.06); }

.client-logo--xl { font-size: var(--text-xl); font-weight: 700; }
.client-logo--bold { font-weight: 700; }
.client-logo--light { font-weight: 400; }
.client-logo--italic { font-style: italic; }
.client-logo--sm { font-size: var(--text-sm); }
.client-logo--green { color: #1DB954; font-weight: 700; }
.client-logo--green:hover { color: #1DB954; opacity: 0.8; }

/* ═══════════════════════════════════════════════════════
   GATTO PRE-FOOTER
═══════════════════════════════════════════════════════ */
.gatto-footer {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  padding-top: var(--space-16);
}
.gatto-footer img {
  width: clamp(260px, 40vw, 520px);
  height: auto;
  display: block;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — HOME ADDITIONS
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .svc-grid__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .hero-home__cat { width: clamp(140px, 38vw, 220px); }
  .hero-home__title { font-size: clamp(3.5rem, 16vw, 6rem); }
  .line--outline { -webkit-text-stroke-width: 1.5px; }

  .svc-grid__list { grid-template-columns: repeat(2, 1fr); }

  .about-section__grid { grid-template-columns: 1fr; }
  .about-section__big { font-size: clamp(3.5rem, 8vw, 10rem); }
  .about-section__tail { align-self: flex-start; }

  .clients__heading { font-size: clamp(var(--text-2xl), 8vw, var(--text-4xl)); }
  .clients__logos { gap: var(--space-5) var(--space-6); }
}

@media (max-width: 480px) {
  .svc-grid__list { grid-template-columns: 1fr 1fr; }
  .hero-home__title { font-size: clamp(3rem, 18vw, 5rem); }
}

/* ─── CASE STUDIES ───────────────────────────────────── */
.case-studies { padding-block: var(--space-24); }

.case-studies__heading {
  font-family: var(--font-primary);
  font-size: 90px;
  font-weight: 800;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px var(--primary);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-16);
}

.case-studies__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-12) var(--space-8);
  align-items: center;
  justify-items: center;
  max-width: 800px;
  margin-inline: auto;
}

.cs-logo {
  font-family: var(--font-secondary);
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  color: var(--black);
  text-align: center;
  cursor: default;
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.cs-logo:hover { color: var(--primary); transform: scale(1.08); }
.cs-logo strong { display: inline-block; background: var(--black); color: var(--white); padding: 0 4px; font-weight: 900; }
.cs-logo--light { font-weight: 300; letter-spacing: 0.06em; }
.cs-logo--tracked { letter-spacing: 0.12em; font-size: clamp(0.8rem, 1.4vw, 1.2rem); }
.cs-logo--grunge { font-style: italic; font-weight: 900; text-transform: uppercase; }
.cs-logo--bold { font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.cs-logo--serif { font-style: italic; font-weight: 400; }
.cs-logo--script { font-style: italic; font-size: clamp(0.85rem, 1.3vw, 1.1rem); font-weight: 400; }
.cs-logo--redbull { text-transform: uppercase; font-weight: 900; }
.cs-logo--stacked { line-height: 1.1; font-weight: 900; letter-spacing: 0.05em; }

@media (max-width: 600px) {
  .case-studies__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══ CS2 — CASE STUDIES REDESIGN ═══════════════════════════════ */

.cs2 {
  background: var(--white);
  padding-block: clamp(5rem, 10vw, 9rem);
  overflow: hidden;
}

/* ── Intro ── */
.cs2__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.cs2__eyebrow {
  display: block;
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-3);
}

.cs2__title {
  font-family: var(--font-primary);
  font-size: 150px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-align: center;
}

.cs2__sub {
  font-family: var(--font-secondary);
  font-size: var(--text-lg);
  color: var(--black-50);
  line-height: 1.55;
  max-width: 420px;
  text-align: center;
}

/* ── Logo wall — mosaico creativo ── */
.cs2__wall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1vw, 14px);
}

.cs2__tile {
  background: var(--white);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  cursor: default;
  border: 1.5px solid var(--black-10);
  border-radius: 14px;
  transition:
    transform 0.4s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

/* accenti a scacchiera: su sfondo bianco, alcune tile con bordo fucsia */
.cs2__tile:nth-child(2),
.cs2__tile:nth-child(5) {
  border-color: rgba(219,0,90,0.25);
  background: rgba(219,0,90,0.03);
}

/* stellina decorativa nell'angolo */
.cs2__tile::before {
  content: '✦';
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 0.7rem;
  color: var(--primary);
  opacity: 0;
  transform: rotate(-90deg);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1);
  z-index: 2;
}
.cs2__tile:hover::before {
  opacity: 1;
  transform: rotate(0deg);
}

/* riempimento fucsia dal basso al hover */
.cs2__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.cs2__tile:hover::after {
  transform: scaleY(1);
}

.cs2__tile:hover {
  transform: translateY(-6px) rotate(-1.2deg);
  box-shadow: 0 18px 40px rgba(219,0,90,0.22);
  border-color: var(--primary);
}

.cs2__logo {
  font-family: var(--font-primary);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  color: var(--black);
  text-align: center;
  position: relative;
  z-index: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: color 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.cs2__tile:hover .cs2__logo {
  color: #fff;
  transform: scale(1.12) rotate(1.2deg);
}

.cs2__logo strong {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  padding: 0 4px;
  font-weight: 900;
  transition: background 0.4s ease, color 0.4s ease;
}

.cs2__tile:hover .cs2__logo strong {
  background: #fff;
  color: var(--primary);
}

.cs2__logo--light   { font-weight: 300; letter-spacing: 0.06em; }
.cs2__logo--tracked { letter-spacing: 0.14em; font-size: clamp(0.85rem, 1.3vw, 1.15rem); }
.cs2__logo--grunge  { font-style: italic; font-weight: 900; text-transform: uppercase; }
.cs2__logo--bold    { font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.cs2__logo--serif   { font-style: italic; font-weight: 400; }
.cs2__logo--script  { font-style: italic; font-weight: 400; font-size: clamp(0.85rem, 1.2vw, 1.05rem); }
.cs2__logo--stacked { line-height: 1.1; font-weight: 900; letter-spacing: 0.05em; }

.cs2__logo-img {
  max-width: 80%;
  max-height: 72%;
  width: auto;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), filter 0.4s ease;
}

/* Tile scuri e fucsia: logo invertito a bianco per contrasto */
.cs2__tile:nth-child(2) .cs2__logo-img,
.cs2__tile:nth-child(4) .cs2__logo-img,
.cs2__tile:nth-child(5) .cs2__logo-img,
.cs2__tile:nth-child(7) .cs2__logo-img,
.cs2__tile:nth-child(10) .cs2__logo-img,
.cs2__tile:nth-child(11) .cs2__logo-img {
  filter: brightness(0) invert(1);
}

/* Hover: tutti i tile diventano scuri → logo bianco */
.cs2__tile:hover .cs2__logo-img {
  transform: scale(1.1);
  filter: brightness(0) invert(1);
}

/* Loghi più piccoli che necessitano di ingrandimento */
.cs2__tile:nth-child(2) .cs2__logo-img,
.cs2__tile:nth-child(3) .cs2__logo-img,
.cs2__tile:nth-child(5) .cs2__logo-img,
.cs2__tile:nth-child(6) .cs2__logo-img,
.cs2__tile:nth-child(7) .cs2__logo-img,
.cs2__tile:nth-child(8) .cs2__logo-img,
.cs2__tile:nth-child(9) .cs2__logo-img,
.cs2__tile:nth-child(11) .cs2__logo-img {
  max-width: 90%;
  max-height: 85%;
}

/* ── Footer CTA ── */
.cs2__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.cs2__footer-btn {
  border-color: var(--black) !important;
  color: var(--black) !important;
}

.cs2__footer-btn:hover {
  border-color: var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

.cs2__footer-note {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black-40);
  font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .cs2__wall { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .cs2__title { font-size: clamp(4rem, 18vw, 150px); }
  .cs2__tile { aspect-ratio: 4 / 3; }
}

/* ─── CASE STUDIES TAB (light) ──────────────────────── */
.cst-tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 2rem;
}
.cst-tab {
  background: var(--white);
  border: 1.5px solid var(--black-10);
  border-radius: 10px;
  padding: 14px 10px;
  font-family: var(--font-primary);
  font-size: clamp(0.75rem, 1.1vw, 1rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black-40);
  cursor: pointer;
  transition: 0.25s;
  position: relative;
  overflow: hidden;
}
.cst-tab::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--primary);
  transition: width 0.3s;
}
.cst-tab:hover { border-color: rgba(219,0,90,0.3); color: var(--black); }
.cst-tab:hover::after { width: 40%; }
.cst-tab.on { border-color: var(--primary); color: var(--primary); background: rgba(219,0,90,0.04); }
.cst-tab.on::after { width: 70%; }

.cst-panels { position: relative; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cst-panel { display: none; animation: cstFadeLight 0.4s ease both; }
.cst-panel.on { display: block; }
@keyframes cstFadeLight { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cst-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.cst-img {
  border-radius: 16px;
  overflow: hidden;
  background: #f0f0f0;
  border: 1.5px solid var(--black-10);
  height: 530px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
}
.cst-img img {
  max-width: 66%;
  max-height: 150px;
  width: auto;
  object-fit: contain;
  display: block;
  opacity: 1;
}
.cst-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cst-info {
  background: var(--white);
  border: 1.5px solid var(--black-10);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 0;
}
.cst-info__sector {
  font-family: var(--font-secondary);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 600;
}
.cst-info__title {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: var(--black);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.cst-info__text {
  font-family: var(--font-secondary);
  font-size: 13px;
  color: var(--black-60);
  line-height: 1.7;
}
.cst-info__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cst-info__tags span {
  font-family: var(--font-secondary);
  font-size: 10px;
  padding: 4px 9px;
  border-radius: 100px;
  background: var(--black-04);
  border: 1px solid var(--black-10);
  color: var(--black-50);
}
.cst-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cst-stat {
  background: var(--white);
  border: 1.5px solid var(--black-10);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 0.25s;
}
.cst-stat:hover {
  border-color: rgba(219,0,90,0.3);
  background: rgba(219,0,90,0.04);
  transform: translateY(-2px);
}
.cst-stat__val {
  font-family: var(--font-primary);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--primary);
}
.cst-stat__lbl {
  font-family: var(--font-secondary);
  font-size: 10px;
  color: var(--black-40);
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .cst-tabs { grid-template-columns: repeat(3, 1fr); }
  .cst-grid { grid-template-columns: 1fr; }
  .cst-img { height: auto; aspect-ratio: 16/9; }
}
@media (max-width: 600px) {
  .cst-tabs { grid-template-columns: repeat(2, 1fr); }
  .cst-stats { grid-template-columns: 1fr; }
}

/* ─── CASE STUDIES TAB SECTION ──────────────────────── */
.cs-trust {
  background: #080808;
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid rgba(255,255,255,0.04);
}
.cs-trust__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--gutter, 1.5rem);
}
.cs-trust__tag {
  display: block;
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  text-align: center;
  margin-bottom: 1rem;
}
.cs-trust__tag::before { content: "— "; }
.cs-trust__title {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #f3efe0;
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.cs-trust__title em {
  font-style: normal;
  color: var(--primary);
}

/* Tabs */
.cs-trust-tabs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  margin-bottom: 2rem;
}
.cs-trust-tab {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: 0.28s;
  position: relative;
  overflow: hidden;
  font-family: var(--font-secondary);
}
.cs-trust-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width 0.3s;
}
.cs-trust-tab:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.cs-trust-tab:hover::after { width: 40%; }
.cs-trust-tab.on { background: rgba(219,0,90,0.07); border-color: rgba(219,0,90,0.35); }
.cs-trust-tab.on::after { width: 70%; }

.cs-trust-tab__logo {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: opacity 0.25s;
}
.cs-trust-tab__logo img {
  max-height: 100%;
  max-width: 90px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.8);
  transition: filter 0.25s;
}
.cs-trust-tab.on .cs-trust-tab__logo,
.cs-trust-tab:hover .cs-trust-tab__logo { opacity: 1; }
.cs-trust-tab.on .cs-trust-tab__logo img { filter: none; }
.cs-trust-tab__name {
  font-size: 10px;
  color: rgba(243,239,224,0.4);
  letter-spacing: 0.2px;
  transition: color 0.25s;
  text-align: center;
}
.cs-trust-tab.on .cs-trust-tab__name,
.cs-trust-tab:hover .cs-trust-tab__name { color: #f3efe0; }

/* Panels */
.cs-trust-panels { position: relative; }
.cs-trust-panel { display: none; animation: cstFade 0.4s ease both; }
.cs-trust-panel.on { display: block; }
@keyframes cstFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cs-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.cs-trust-img {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-trust-img img {
  max-width: 55%;
  max-height: 55%;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.15);
}
.cs-trust-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-trust-info {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 0;
}
.cs-trust-info__logo {
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.cs-trust-info__logo img {
  max-height: 100%;
  max-width: 150px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.cs-trust-info__sector {
  font-family: var(--font-secondary);
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--primary);
}
.cs-trust-info__title {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  color: #f3efe0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.cs-trust-info__text {
  font-family: var(--font-secondary);
  font-size: 13px;
  color: rgba(243,239,224,0.6);
  line-height: 1.7;
}
.cs-trust-info__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cs-trust-info__tags span {
  font-size: 10px;
  padding: 4px 9px;
  border-radius: 100px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(243,239,224,0.5);
  font-family: var(--font-secondary);
}
.cs-trust-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cs-trust-stat {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: 0.25s;
}
.cs-trust-stat:hover {
  border-color: rgba(219,0,90,0.35);
  background: rgba(219,0,90,0.05);
  transform: translateY(-2px);
}
.cs-trust-stat__val {
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--primary);
}
.cs-trust-stat__lbl {
  font-family: var(--font-secondary);
  font-size: 10px;
  color: rgba(243,239,224,0.45);
  line-height: 1.45;
}
.cs-trust__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.cs-trust__footer-note {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: rgba(243,239,224,0.35);
  font-style: italic;
}

/* Responsive */
@media (max-width: 1100px) {
  .cs-trust-tabs { grid-template-columns: repeat(4, 1fr); }
  .cs-trust-grid { grid-template-columns: 1fr; }
  .cs-trust-img { height: auto; aspect-ratio: 16/9; }
}
@media (max-width: 640px) {
  .cs-trust-tabs { grid-template-columns: repeat(2, 1fr); }
  .cs-trust-stats { grid-template-columns: 1fr; }
}

/* ─── CTA PENNELLATA ─────────────────────────────────── */
.cta-brush {
  overflow: hidden;
  position: relative;
}

.cta-brush__wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(280px, 35vw, 480px);
}

.cta-brush__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.cta-brush__content {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: var(--space-8);
}

.cta-brush__title {
  font-family: var(--font-secondary);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin-bottom: var(--space-8);
}

.cta-brush .btn--primary {
  background: var(--primary);
  color: var(--white);
}
.cta-brush .btn--primary::before { background: var(--white); }
.cta-brush .btn--primary:hover { background: var(--white); color: var(--black); }

/* ─── TIPS & TRICKS ──────────────────────────────────── */
.tips-section { padding-block: var(--space-24); border-top: var(--border); }

.tips-section__heading {
  font-family: var(--font-primary);
  font-size: 150px;
  font-weight: 800;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 2px rgba(0,0,0,0.12);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-12);
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.tip-card { display: flex; flex-direction: column; gap: var(--space-3); }

.tip-card__img {
  border-radius: 4px;
  overflow: hidden;
}
.tip-card__img img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tip-card:hover .tip-card__img img { transform: scale(1.04); }

.tip-card__date {
  font-size: var(--text-xs);
  color: var(--black-40);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.tip-card__title {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .tips-grid { grid-template-columns: 1fr; }
  .cta-brush__wrap { min-height: 240px; }
}

/* ─── CONTACT HOME ───────────────────────────────────── */
.contact-home {
  background: var(--primary);
  padding-block: var(--space-24);
}

.contact-home__inner { max-width: 640px; margin-inline: auto; text-align: center; }

.contact-home__heading {
  font-family: var(--font-primary);
  font-size: 150px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  margin-bottom: var(--space-12);
}

.contact-home__sub {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-10);
}

.contact-home__form { display: flex; flex-direction: column; gap: var(--space-4); text-align: left; }

.contact-home__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.contact-home__field {
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--white);
  border: none;
  border-radius: 4px;
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black-60);
  outline: none;
  transition: box-shadow var(--dur-fast);
}
.contact-home__field:focus { box-shadow: 0 0 0 2px var(--black); }
.contact-home__field::placeholder { color: var(--black-40); }
.contact-home__textarea { resize: vertical; min-height: 120px; }

.contact-home__privacy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--white);
  font-weight: 500;
  cursor: pointer;
}
.contact-home__privacy a { text-decoration: underline; color: inherit; }
.contact-home__privacy input { margin-top: 3px; accent-color: var(--black); }

.contact-home__submit-wrap { display: flex; justify-content: center; margin-top: var(--space-2); }

.contact-home__submit {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-8);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--dur-fast);
}
.contact-home__submit:hover { background: var(--black); color: var(--white); }

@media (max-width: 600px) {
  .contact-home__row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   UI REFINEMENTS — homepage design pass
   Interventi esclusivamente estetici/layout, zero modifiche a testi o contenuti
═══════════════════════════════════════════════════════ */

/* ─── HERO: layout a colonne, tagline sinistra ─────── */
.hero-home {
  justify-content: center;
  padding-bottom: var(--space-24);
}
.hero-home .container {
  display: grid;
  grid-template-rows: auto auto;
  align-items: end;
}
.hero-home__title {
  font-size: clamp(5rem, 15vw, var(--text-9xl));
  margin-bottom: var(--space-8);
}
.hero-home__below {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
  text-align: left;
  padding-top: var(--space-8);
  border-top: var(--border);
}
.hero-home__tagline {
  font-size: var(--text-sm);
  max-width: 28ch;
  line-height: 1.5;
}
.hero-home__sub {
  font-size: var(--text-sm);
  color: var(--black-40);
  flex: 1;
}
.hero-home__cat {
  width: clamp(200px, 24vw, 380px);
  top: -10px;
}

/* ─── SERVICES GRID: più respiro, nome in VanguardCF ─ */
.svc-grid { padding-block: 0; }
.svc-grid__list { border-top: none; }
.svc-item { padding: var(--space-10) var(--space-8); }
.svc-item__num {
  font-size: clamp(2rem, 3vw, 3.5rem);
  -webkit-text-stroke-color: rgba(0,0,0,0.18);
  margin-bottom: var(--space-5);
}
.svc-item__name {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-base), 1.4vw, var(--text-xl));
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-4);
}
.svc-item__desc { font-size: var(--text-xs); line-height: 1.7; }

/* ─── VIDEO: label sopra il player ─────────────────── */
.video-section { padding-block: clamp(var(--space-16), 7vw, var(--space-32)); }
.video-section__embed {
  max-width: 1100px;
  border-radius: 8px;
  border: none;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06);
}

/* ─── ABOUT: proporzioni e spaziature ──────────────── */
.about-section { padding-block: clamp(var(--space-20), 8vw, var(--space-40)); }
.about-section__grid {
  grid-template-columns: 45% 55%;
  gap: clamp(var(--space-12), 6vw, var(--space-24));
  align-items: start;
}
.about-section__big {
  font-size: 150px;
  line-height: 0.9;
  margin-bottom: var(--space-4);
}
.about-section__img-wrap img {
  width: 100%;
  max-width: 380px;
  border-radius: 4px;
}
.about-section__right { gap: var(--space-6); padding-top: var(--space-8); }
.about-section__heading {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-6xl));
  line-height: 0.95;
}
.about-section__body {
  font-size: var(--text-sm);
  color: var(--black-50);
  line-height: 1.8;
}
.about-section__tail {
  width: clamp(100px, 15vw, 180px);
  align-self: flex-end;
}

/* ─── CLIENTS: griglia regolare con separatori ─────── */
.clients-section { padding-block: clamp(var(--space-20), 8vw, var(--space-40)); background: var(--black-04); }
.clients__heading {
  font-size: clamp(var(--text-2xl), 5vw, var(--text-5xl));
  -webkit-text-stroke-width: 1.5px;
  margin-bottom: var(--space-12);
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
  line-height: 1.1;
}
.clients__logos {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
  background: var(--black-10);
  border: 1px solid var(--black-10);
  max-width: 1100px;
  margin-inline: auto;
}
.client-logo {
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  min-height: 64px;
}
.client-logo--xl { font-size: var(--text-base); font-weight: 800; }
.client-logo--sm { font-size: var(--text-xs); }

/* ─── CASE STUDIES: più grande, più bilanciato ─────── */
.case-studies { padding-block: clamp(var(--space-20), 8vw, var(--space-40)); }
.case-studies__heading {
  font-size: clamp(var(--text-5xl), 12vw, var(--text-9xl));
  margin-bottom: var(--space-20);
}
.case-studies__grid {
  max-width: 960px;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--black-10);
  border: 1px solid var(--black-10);
}
.cs-logo {
  background: var(--white);
  padding: var(--space-8) var(--space-6);
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80px;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.cs-logo:hover { background: rgba(219,0,90,0.04); color: var(--primary); transform: none; }

/* ─── CTA BRUSH: titolo più grande, padding generoso ─ */
.cta-brush { padding-block: var(--space-8); }
.cta-brush__wrap { min-height: clamp(320px, 40vw, 560px); }
.cta-brush__title {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-2xl), 5vw, var(--text-6xl));
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-10);
}
.cta-brush__content { padding: var(--space-12) var(--space-10); }

/* ─── TIPS & TRICKS: card più editoriali ───────────── */
.tips-section { padding-block: clamp(var(--space-20), 8vw, var(--space-40)); border-top: none; }
.tips-section__heading {
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.10);
  margin-bottom: var(--space-16);
}
.tips-grid { gap: var(--space-10); }
.tip-card { gap: var(--space-4); cursor: pointer; }
.tip-card__img {
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.tip-card__img img { border-radius: 6px; }
.tip-card__date { font-size: var(--text-xs); letter-spacing: 0.1em; }
.tip-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--black);
  transition: color var(--dur-fast);
}
.tip-card:hover .tip-card__title { color: var(--primary); }

/* ─── CONTACT HOME: heading più bilanciato ──────────── */
.contact-home { padding-block: clamp(var(--space-20), 10vw, var(--space-40)); }
.contact-home__inner { max-width: 760px; }
.contact-home__heading {
  font-size: 150px;
  margin-bottom: var(--space-8);
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.4);
  line-height: 1;
}
.contact-home__sub {
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-8);
  opacity: 0.85;
}
.contact-home__field {
  border-radius: 0;
  border-bottom: 2px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.12);
  color: var(--white);
  padding: var(--space-4);
}
.contact-home__field::placeholder { color: rgba(255,255,255,0.55); }
.contact-home__field:focus {
  box-shadow: none;
  border-bottom-color: var(--white);
  background: rgba(255,255,255,0.18);
}
.contact-home__textarea { border-radius: 0; min-height: 100px; }
.contact-home__privacy { opacity: 0.8; }
.contact-home__submit {
  background: var(--white);
  color: var(--black);
  border-radius: 0;
  padding: var(--space-4) var(--space-12);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.contact-home__submit:hover { background: var(--black); color: var(--white); transform: translateY(-2px); }

/* ─── GATTO FOOTER ──────────────────────────────────── */
.gatto-footer { padding-top: var(--space-8); padding-bottom: 0; }
.gatto-footer img { width: clamp(200px, 30vw, 420px); }

/* ─── RESPONSIVE REFINEMENTS ──────────────────────── */
@media (max-width: 1024px) {
  .clients__logos { grid-template-columns: repeat(5, 1fr); }
  .about-section__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .hero-home__below {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }
  .about-section__grid { grid-template-columns: 1fr; }
  .clients__logos { grid-template-columns: repeat(3, 1fr); }
  .case-studies__grid { grid-template-columns: repeat(2, 1fr); }
  .tips-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .contact-home__inner { max-width: 100%; }
}

@media (max-width: 480px) {
  .clients__logos { grid-template-columns: repeat(2, 1fr); }
  .tips-grid { grid-template-columns: 1fr; }
  .case-studies__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════
   CREATIVE DIRECTOR PASS — Premium redesign
   Senior-level art direction: hero, sezioni, micro-interazioni
═══════════════════════════════════════════════════════ */

/* ── HERO: redesign radicale ──────────────────────────
   Concept: tipo esplosivo full-screen, gatto come elemento
   compositivo dominante, strip editoriale in basso.
   Ispirazione: studi coreani contemporanei + fashion editorial
   ─────────────────────────────────────────────────────── */

.hero-home {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr;
  align-items: stretch;
  padding-top: clamp(80px, 10vh, 116px);
  padding-bottom: 0;
  overflow: hidden;
  background: var(--white);
  position: relative;
}

/* Grain texture sul hero — lusso silenzioso */
.hero-home::before {
  content: '';
  position: absolute;
  inset: 0;
  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='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 180px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

/* Sfumatura sinistra molto leggera — breathing room */
.hero-home::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 0% 100%, rgba(219,0,90,0.035) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}

/* Container: flex colonna, titolo cresce, strip si ancora in basso */
.hero-home .container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  position: relative;
  z-index: 1;
  padding-bottom: 0;
  min-height: calc(100svh - clamp(80px, 10vh, 116px));
}

/* GATTO: elemento compositivo principale.
   Overlappa la tipografia — profondità, tensione visiva */
.hero-home__cat {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(300px, 42vw, 600px);
  height: auto;
  z-index: 3;
  pointer-events: none;
}

.hero-home__cat img {
  width: 100%;
  height: auto;
  display: block;
  animation: heroImgIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
  transform-origin: top right;
}

@keyframes heroImgIn {
  from {
    transform: translateY(-24px) scale(1.03);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* TITOLO: massimo impatto, occupa tutta l'altezza disponibile */
.hero-home__title {
  font-size: clamp(5.5rem, 18.5vw, 13.5rem);
  line-height: 0.83;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-5);
  position: relative;
  z-index: 2;
  /* Titolo spinge contro il gatto — composizione intenzionale */
}

/* Linee: timing più sofisticato e scaglionato */
.hero-home__title .line { display: block; overflow: hidden; }
.hero-home__title .line-inner {
  display: block;
  animation: heroLineUp 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-home__title .line:nth-child(1) .line-inner { animation-delay: 60ms; }
.hero-home__title .line:nth-child(2) .line-inner { animation-delay: 160ms; }
.hero-home__title .line:nth-child(3) .line-inner { animation-delay: 240ms; }

/* Solid: il rosa primario buca lo schermo */
.line--solid { color: var(--primary); }

/* Outline: quasi invisibile, sophistication tramite restraint */
.line--outline {
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(0,0,0,0.09);
  letter-spacing: -0.038em;
}

/* STRIP EDITORIALE: architettura orizzontale,
   stile magazine di moda coreano */
.hero-home__below {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-8);
  border-top: 1px solid rgba(0,0,0,0.08);
  padding-block: var(--space-5);
  padding-bottom: var(--space-6);
  text-align: left;
  position: relative;
  z-index: 4;
  background: var(--white);
  animation: stripIn 700ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both;
}

@keyframes stripIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-home__tagline {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--primary);
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-home__sub {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--black-40);
  letter-spacing: 0.04em;
  text-align: center;
}

/* ── SEZIONE SERVIZI: presenza scenica ────────────────── */
.svc-grid { border-top: none; }
.svc-grid__list {
  border-left: none;
  border-top: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
}
.svc-item {
  background: var(--white);
  padding: var(--space-10) var(--space-7) var(--space-12);
  position: relative;
  overflow: hidden;
  transition: background 240ms var(--ease-out), transform 240ms var(--ease-out);
}
/* Hover: accent verticale sinistro — più elegante del top */
.svc-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  background: var(--primary);
  transition: width 200ms var(--ease-out);
}
.svc-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  background: var(--primary);
  transition: height 160ms var(--ease-out);
}
.svc-item:hover { background: rgba(219,0,90,0.025); }
.svc-item:hover::before { width: 2px; }
.svc-item:hover::after { height: 2px; }

.svc-item__num {
  display: block;
  font-family: var(--font-primary);
  font-size: clamp(2.2rem, 3.2vw, 4rem);
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.18);
  color: transparent;
  margin-bottom: var(--space-5);
  transition: -webkit-text-stroke-color 200ms;
}
.svc-item:hover .svc-item__num { -webkit-text-stroke-color: rgba(0,0,0,0.18); }

.svc-item__name {
  font-family: var(--font-primary);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--black);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  transition: color 200ms;
}
.svc-item__name a { color: inherit; }
.svc-item:hover .svc-item__name { color: var(--primary); }
.svc-item:hover .svc-item__name a { color: var(--primary); }

.svc-item__desc {
  font-size: var(--text-xs);
  color: var(--black-40);
  line-height: 1.7;
  margin-top: auto;
}
.svc-item__desc strong { color: var(--black-75); font-weight: 600; font-style: normal; }

/* ── VIDEO: framing cinematografico ──────────────────── */
.video-section {
  padding-block: clamp(var(--space-20), 8vw, var(--space-32));
  background: var(--black-04);
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.video-section__embed {
  border-radius: 4px;
  max-width: 1040px;
  border: none;
  overflow: hidden;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.14),
    0 12px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  transform: translateZ(0);
  transition: box-shadow 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.video-section__embed:hover {
  box-shadow:
    0 56px 120px rgba(0,0,0,0.18),
    0 20px 48px rgba(0,0,0,0.10),
    0 4px 12px rgba(0,0,0,0.05);
  transform: translateY(-4px);
}

/* ── ABOUT: watermark drammatico, foto che emerge ────── */
.about-section {
  padding-block: clamp(var(--space-24), 10vw, var(--space-48));
  overflow: hidden;
  position: relative;
}
.about-section__big {
  position: absolute;
  top: 50%;
  left: -0.05em;
  transform: translateY(-50%);
  font-size: 150px;
  line-height: 1;
  -webkit-text-stroke: 1.5px rgba(219,0,90,0.12);
  color: transparent;
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}
.about-section__left {
  position: relative;
  z-index: 1;
}
.about-section__img-wrap {
  display: block;
  position: relative;
}
/* Cerchio decorativo più raffinato */
.about-section__circle {
  width: 105%;
  border: 1px solid rgba(219,0,90,0.10);
  top: 50%; left: 52%;
  animation: rotate 40s linear infinite;
}
@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.about-section__img-wrap img {
  width: 100%;
  max-width: 440px;
  border-radius: 2px;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-lg);
  transition: transform 600ms var(--ease-out);
}
.about-section__img-wrap:hover img { transform: scale(1.02) translateY(-4px); }

.about-section__right { position: relative; z-index: 1; }

.about-section__heading {
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-7xl));
  line-height: 0.92;
  letter-spacing: -0.025em;
}

.about-section__kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--primary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.about-section__kicker::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--primary);
  flex-shrink: 0;
}

.about-section__body {
  font-size: var(--text-sm);
  line-height: 1.85;
  color: var(--black-50);
}
.about-section__body strong { color: var(--black); font-weight: 700; }

.about-section__tail {
  width: clamp(90px, 12vw, 160px);
  opacity: 0.85;
  transition: opacity 300ms, transform 300ms;
}
.about-section__tail:hover { opacity: 1; transform: rotate(-6deg); }

/* ── CLIENTI: griglia precisissima con hover reveal ──── */
.clients-section {
  padding-block: clamp(var(--space-20), 8vw, var(--space-40));
  background: #fafafa;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.clients__heading {
  -webkit-text-stroke-width: 1.5px;
  color: transparent;
  -webkit-text-stroke-color: var(--primary);
  max-width: 20ch;
  margin-bottom: var(--space-14);
  line-height: 1.05;
}
.clients__logos {
  gap: 1px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
}
.client-logo {
  background: #fafafa;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--black-60);
  padding: var(--space-6) var(--space-4);
  min-height: 72px;
  position: relative;
  transition: background 200ms, color 200ms;
}
.client-logo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 0;
  background: var(--primary);
  transition: height 160ms var(--ease-out);
}
.client-logo:hover {
  background: var(--white);
  color: var(--black);
}
.client-logo:hover::after { height: 2px; }
.client-logo--xl { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.02em; }
.client-logo--green { color: #1DB954; }
.client-logo--green:hover { color: #1DB954; }

/* ── CASE STUDIES: logo cells premium ───────────────── */
.case-studies {
  padding-block: clamp(var(--space-20), 8vw, var(--space-40));
  background: var(--white);
}
.case-studies__heading {
  -webkit-text-stroke: 1.5px var(--primary);
  font-size: clamp(var(--text-5xl), 14vw, var(--text-9xl));
  margin-bottom: var(--space-16);
  line-height: 0.88;
}
.case-studies__grid {
  max-width: 100%;
  gap: 1px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  grid-template-columns: repeat(4, 1fr);
}
.cs-logo {
  background: var(--white);
  min-height: 100px;
  font-size: clamp(0.9rem, 1.4vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  transition: background 200ms, color 200ms;
}
.cs-logo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  background: var(--primary);
  transition: height 160ms var(--ease-out);
}
.cs-logo:hover { background: rgba(219,0,90,0.03); color: var(--primary); }
.cs-logo:hover::before { height: 2px; }
.cs-logo strong { background: var(--black); color: var(--white); padding: 1px 5px; }

/* ── CTA BRUSH: type on image drammatico ─────────────── */
.cta-brush { padding-block: 0; }
.cta-brush__wrap {
  min-height: clamp(340px, 44vw, 600px);
  position: relative;
}
.cta-brush__content {
  padding: var(--space-16) var(--space-12);
  text-align: center;
  z-index: 3;
}
.cta-brush__title {
  font-family: var(--font-primary);
  font-size: clamp(var(--text-3xl), 6vw, 7rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--space-10);
  text-shadow: 0 2px 40px rgba(0,0,0,0.2);
}

/* ── TIPS & TRICKS: card editoriali numbered ─────────── */
.tips-section {
  padding-block: clamp(var(--space-20), 8vw, var(--space-40));
  background: var(--white);
  border-top: 1px solid rgba(0,0,0,0.06);
}
.tips-section__heading {
  font-size: 150px;
  -webkit-text-stroke: 1.5px rgba(0,0,0,0.08);
  line-height: 0.88;
  margin-bottom: var(--space-16);
}
.tips-grid { gap: var(--space-8); }
.tip-card {
  gap: 0;
  cursor: pointer;
  position: relative;
}
.tip-card__img {
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  margin-bottom: var(--space-4);
}
/* Overlay scuro al hover — premium reveal */
.tip-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 320ms var(--ease-out);
  z-index: 1;
  border-radius: 2px;
}
.tip-card:hover .tip-card__img::after { background: rgba(0,0,0,0.06); }
.tip-card__img img {
  border-radius: 2px;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tip-card:hover .tip-card__img img { transform: scale(1.03); }
.tip-card__date {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--black-40);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  margin-top: var(--space-4);
}
.tip-card__title {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--black);
  letter-spacing: 0;
  text-transform: none;
  transition: color 180ms;
  border-bottom: 1px solid transparent;
  padding-bottom: var(--space-4);
  transition: color 180ms, border-color 180ms;
}
.tip-card:hover .tip-card__title {
  color: var(--primary);
  border-bottom-color: rgba(219,0,90,0.15);
}

/* ── CONTACT FORM: lusso minimalista su primary ──────── */
.contact-home {
  padding-block: clamp(var(--space-24), 12vw, var(--space-48));
  position: relative;
  overflow: hidden;
}
/* Grain sul rosa */
.contact-home::before {
  content: '';
  position: absolute;
  inset: 0;
  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='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 140px;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
}
.contact-home__inner {
  position: relative;
  z-index: 1;
}
.contact-home__heading {
  font-size: 150px;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.35);
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-10);
}
.contact-home__sub {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  margin-bottom: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.contact-home__sub::before,
.contact-home__sub::after {
  content: '';
  flex: 1;
  max-width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.3);
}
.contact-home__form { gap: var(--space-3); }
.contact-home__field {
  border-radius: 0;
  border: none;
  border-bottom: 1.5px solid rgba(255,255,255,0.18);
  background: transparent;
  color: var(--white);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  transition: border-color 180ms;
}
.contact-home__field::placeholder { color: rgba(255,255,255,0.45); font-size: var(--text-xs); }
.contact-home__field:focus {
  box-shadow: none;
  border-bottom-color: rgba(255,255,255,0.8);
  background: transparent;
}
.contact-home__textarea {
  border-radius: 0;
  min-height: 80px;
  border: 1.5px solid rgba(255,255,255,0.18);
  padding: var(--space-4);
  margin-top: var(--space-2);
}
.contact-home__textarea:focus { border-color: rgba(255,255,255,0.8); }
.contact-home__privacy { opacity: 0.65; font-size: 10px; }
.contact-home__submit {
  background: var(--white);
  color: var(--black);
  border-radius: 0;
  padding: var(--space-4) var(--space-16);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 200ms, color 200ms, transform 200ms;
}
.contact-home__submit:hover {
  background: var(--black);
  color: var(--white);
  transform: translateY(-2px);
}

/* ── FOOTER: più pulito e bilanciato ─────────────────── */
.footer {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-block: var(--space-8);
}
.footer__inner { gap: var(--space-6); }

/* ── GATTO PRE-FOOTER: più grande, più presente ──────── */
.gatto-footer {
  padding-top: var(--space-4);
  padding-bottom: 0;
  background: var(--white);
}
.gatto-footer img {
  width: clamp(240px, 32vw, 460px);
  transition: transform 600ms var(--ease-out);
  display: block;
}
.gatto-footer:hover img { transform: translateY(-8px); }

/* ── REVEAL: sistema stratificato con distanze ──────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── RESPONSIVE MOBILE ───────────────────────────────── */
@media (max-width: 1024px) {
  .about-section__big { font-size: clamp(3.5rem, 8vw, 10rem); }
  .svc-grid__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  /* Hero mobile: tipo più grande ancora, gatto che non blocca */
  .hero-home__cat { width: clamp(180px, 46vw, 280px); }
  .hero-home__title { font-size: clamp(4.5rem, 19vw, 6.5rem); line-height: 0.86; }
  .line--outline { -webkit-text-stroke-width: 1.5px; }
  .hero-home__below {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding-block: var(--space-4);
  }
  .hero-home__sub { text-align: left; }

  /* Services: 2 col */
  .svc-grid__list { grid-template-columns: repeat(2, 1fr); }

  /* About: stack */
  .about-section__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .about-section__big { position: static; transform: none; font-size: clamp(3.5rem, 8vw, 10rem); }

  /* Clients */
  .clients__logos { grid-template-columns: repeat(4, 1fr); }

  /* Case studies */
  .case-studies__grid { grid-template-columns: repeat(2, 1fr); }

  /* Tips */
  .tips-grid { grid-template-columns: 1fr; gap: var(--space-10); }

  /* CTA brush */
  .cta-brush__wrap { min-height: 280px; }
  .cta-brush__title { font-size: clamp(var(--text-2xl), 7vw, var(--text-5xl)); }
}

@media (max-width: 480px) {
  .hero-home__title { font-size: clamp(3.5rem, 20vw, 5.5rem); }
  .clients__logos { grid-template-columns: repeat(3, 1fr); }
  .svc-grid__list { grid-template-columns: repeat(1, 1fr); }
}

/* ═══════════════════════════════════════════════════════
   BOLD PASS — Contrasto, pop, creatività unica
   Fix: leggibilità assoluta + audacia visiva
   Nessuna modifica a testi, colori brand, o struttura
═══════════════════════════════════════════════════════ */

/* ── NAV: testo bianco su hero nero (solo homepage) ─── */
body:has(.hero-svc-scene) .nav:not(.scrolled) {
  background: transparent;
}
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__link,
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__dropdown-toggle {
  color: rgba(255,255,255,0.82);
}
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__link:hover,
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__dropdown-toggle:hover {
  color: var(--white);
}
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__logo img {
  filter: none;
}
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__logo:hover img {
  filter: saturate(1.25) contrast(1.12);
}
body:has(.hero-svc-scene) .nav.scrolled .nav__logo img {
  filter: none;
}
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__cta {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__hamburger span {
  background: var(--white);
}

/* ── HERO: sfondo nero, massimo contrasto ─────────────
   Sfondo #0a0a0a: il più bold dei brand color
   Il cat su nero: mix-blend-mode lighten preserva l'img
   ──────────────────────────────────────────────────── */
.hero-home {
  background: #0a0a0a;
}
.hero-home::before { opacity: 0.3; }
.hero-home::after {
  background:
    radial-gradient(ellipse 55% 65% at 100% 0%, rgba(219,0,90,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 0% 100%, rgba(219,0,90,0.06) 0%, transparent 50%);
}

/* Cat: lighten integra sfondo bianco su hero nero senza artefatti */
.hero-home__cat img {
  mix-blend-mode: lighten;
}

/* Titolo: z-index sopra il gatto */
.hero-home__title {
  z-index: 4;
}

/* OUTLINE: FIX CONTRASTO — il testo invisibile diventa
   uno statement grafico forte. Stroke bianco su nero = 
   lettering da manifesto editoriale di lusso */
.line--outline {
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(255,255,255,0.88);
  letter-spacing: -0.04em;
}

/* Solid: rosa puro, esplosivo */
.line--solid {
  color: var(--primary);
}

/* Strip: sfondo nero, testo chiaro */
.hero-home__below {
  background: #0a0a0a;
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 4;
}
.hero-home__tagline {
  color: var(--primary);
}
.hero-home__sub {
  color: rgba(255,255,255,0.42);
}

/* Btn nel hero: outline bianco */
.hero-home__below .btn--primary {
  background: var(--primary);
  color: var(--white);
}
.hero-home__below .btn--primary:hover {
  background: var(--white);
  color: var(--black);
}

/* ── SERVIZI: numeri bold, non trasparenti ────────────
   Default: nero a bassa opacità; fucsia solo sull'hover
   ──────────────────────────────────────────────────── */
.svc-item__num {
  -webkit-text-stroke: 0;
  color: var(--black);
  opacity: 0.18;
  transition: opacity 200ms, color 200ms;
}
.svc-item:hover .svc-item__num {
  opacity: 0.45;
  color: var(--black);
}

/* ── CLIENTS: heading a contrasto pieno ──────────────── */
.clients__heading {
  color: var(--black);
  -webkit-text-stroke: 0;
  /* Accent: spessa linea rosa a sinistra */
  padding-left: var(--space-6);
  border-left: 5px solid var(--primary);
  text-align: left;
  margin-inline: 0;
}

/* ── CASE STUDIES: heading solido e leggibile ─────────
   Grande, nero, senza stroke trasparente
   Accent: numero a sinistra in rosa
   ──────────────────────────────────────────────────── */
.case-studies__heading {
  color: var(--black);
  -webkit-text-stroke: 0;
  position: relative;
}
/* Punto rosso decorativo prima dell'heading */
.case-studies__heading::before {
  content: '●';
  color: var(--primary);
  font-size: 0.22em;
  vertical-align: middle;
  margin-right: 0.5em;
  display: inline-block;
  line-height: 1;
}

/* ── TIPS: heading nero solido ──────────────────────── */
.tips-section__heading {
  color: var(--black);
  -webkit-text-stroke: 0;
}

/* ── CONTACT: heading bianco solido, senza stroke ───── */
.contact-home__heading {
  color: var(--white);
  -webkit-text-stroke: 0;
}

/* ── SEZIONI: separatori più decisi ───────────────────
   Ogni sezione ha un carattere visivo proprio
   ──────────────────────────────────────────────────── */

/* Services: bordo superiore nero full-width */
.svc-grid {
  border-top: 3px solid var(--black);
}

/* Video: bg leggermente scuro, più cinematografico */
.video-section {
  background: #0f0f0f;
}

/* About: bg bianco puro, più luminoso a contrasto */
.about-section {
  background: var(--white);
}
.about-section__big {
  -webkit-text-stroke-color: rgba(219,0,90,0.18);
  color: transparent;
}
.about-section__heading {
  color: var(--black);
}
.about-section__body {
  color: rgba(0,0,0,0.58);
}

/* Clients: bg leggermente warm */
.clients-section {
  background: #f9f8f6;
}
.client-logo {
  background: #f9f8f6;
  color: rgba(0,0,0,0.7);
  font-weight: 600;
}
.client-logo--xl {
  color: var(--black);
  font-weight: 800;
}
.client-logo:hover {
  background: var(--white);
  color: var(--black);
}

/* Case studies: bg off-black per contrasto totale */
.case-studies {
  background: #0a0a0a;
}
.case-studies__heading {
  color: var(--white);
}
.case-studies__heading::before {
  color: var(--primary);
}
.case-studies__grid {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.06);
}
.cs-logo {
  background: #111;
  color: rgba(255,255,255,0.82);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cs-logo:hover {
  background: var(--primary);
  color: var(--white);
}
.cs-logo:hover::before { height: 0; } /* no top bar needed su rosa */
.cs-logo strong {
  background: var(--primary);
  color: var(--white);
  padding: 1px 5px;
}

/* CTA brush: già forte, miglioramento testo leggibile */
.cta-brush__title {
  text-shadow:
    0 2px 60px rgba(0,0,0,0.5),
    0 0 120px rgba(0,0,0,0.3);
  letter-spacing: -0.03em;
}

/* Tips: card più rich, titolo leggibile nero */
.tip-card__title {
  color: var(--black);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.45;
  text-transform: none;
}
.tip-card {
  background: var(--white);
  border-bottom: 2px solid transparent;
  transition: border-color 250ms;
  padding-bottom: var(--space-2);
}
.tip-card:hover {
  border-bottom-color: var(--primary);
}

/* Gatto pre-footer: separatore prima in rosa */
.gatto-footer {
  border-top: 4px solid var(--primary);
}

/* Footer: bg nero per chiusura forte */
.footer {
  background: #0a0a0a;
  border-top: none;
}
.footer__inner {
  border-top: 1px solid rgba(255,255,255,0.07);
}
.footer__copy {
  color: rgba(255,255,255,0.4);
}
.footer__social-link {
  color: rgba(255,255,255,0.6);
}
.footer__social-link:hover {
  color: var(--primary);
}
/* Logo footer in bianco */
.footer .nav__logo img {
  filter: none;
}

/* ── RESPONSIVE BOLD ─────────────────────────────────── */
@media (max-width: 768px) {
  .line--outline { -webkit-text-stroke-width: 2px; }
  .clients__heading {
    border-left-width: 4px;
    padding-left: var(--space-4);
  }
}
@media (max-width: 480px) {
  .line--outline { -webkit-text-stroke-width: 1.5px; }
  .svc-grid { border-top-width: 2px; }
}


/* ═══════════════════════════════════════════════════════
   VIDEO HERO PASS — Video fullscreen background in loop
   Titolo sopra video con contrasto massimo
═══════════════════════════════════════════════════════ */

/* ── Video background: copre tutto il hero ───────────── */
.hero-home__video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Tecnica cover per iframe 16:9:
   vw × 56.25% = altezza proporzionale 16:9
   vh × 177.78% = larghezza proporzionale 16:9
   Prendiamo il MAX per garantire copertura totale */
.hero-home__video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* copertura full-screen rispettando aspect ratio 16:9 */
  width: max(100vw, calc(100vh * 16 / 9));
  height: max(100vh, calc(100vw * 9 / 16));
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none;
  /* Slight scale per eliminare bordi eventuali */
  transform: translate(-50%, -50%) scale(1.04);
}

/* ── Overlay scuro: contrasto testo / video ──────────── */
.hero-home__overlay {
  position: absolute;
  inset: 0;
  /* Gradiente: più scuro in basso dove c'è il titolo */
  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.42) 40%,
      rgba(0,0,0,0.72) 80%,
      rgba(0,0,0,0.85) 100%
    );
  z-index: 1;
  pointer-events: none;
}

/* ── Hero: rimuove grain (non serve su video) ─────────── */
.hero-home::before { display: none; }

/* ── Container: testo centrato verticalmente nel hero ─── */
.hero-home .container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 0;
}

/* ── Titolo: pieno contrasto su video ────────────────── */
.hero-home__title {
  z-index: 2;
  position: relative;
  /* Niente max-width: il testo occupa tutta la larghezza */
  max-width: none;
  /* Margine superiore per non toccare la nav */
  padding-top: clamp(var(--space-16), 12vh, var(--space-32));
}

/* FIX "PRENDONO NON TAGLIATA":
   Le .line hanno overflow:hidden per l'animazione di entrata.
   Con font 18.5vw il font scende sotto la baseline — serve
   padding-bottom sufficiente sulla riga per non clippare le
   lettere che scendono. */
.hero-home__title .line {
  overflow: visible;   /* niente clip — il testo non viene tagliato */
  display: block;
  padding-bottom: 0.06em; /* respiro sotto le lettere discendenti */
}

/* Linee testo: su video usano shadow per leggibilità extra */
.hero-home__title .line-inner {
  text-shadow: 0 2px 32px rgba(0,0,0,0.4);
}

/* Solid: bianco su video (massimo contrasto), accento con rosa */
.line--solid {
  color: var(--white);
  /* "LE IDEE" e "FORMA" sono bianche — pulite, esplosive */
}

/* Outline: stroke bianco nitido su video scuro */
.line--outline {
  color: transparent;
  -webkit-text-stroke: 3px rgba(255,255,255,0.95);
  text-shadow: none; /* no shadow sugli outline, sfuma il bordo */
}

/* "FORMA": ultima riga in rosa per il colpo finale */
.hero-home__title .line:last-child .line-inner {
  color: var(--primary);
}

/* ── Strip in basso: su overlay scuro ───────────────── */
.hero-home__below {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-inline: var(--space-6);
  margin-inline: calc(-1 * var(--space-6));
}

.hero-home__tagline { color: var(--primary); }
.hero-home__sub { color: rgba(255,255,255,0.5); }

/* ── Responsive video hero ──────────────────────────── */
@media (max-width: 768px) {
  .line--outline { -webkit-text-stroke-width: 2px; }
  .hero-home__overlay {
    background:
      linear-gradient(
        to bottom,
        rgba(0,0,0,0.4) 0%,
        rgba(0,0,0,0.55) 40%,
        rgba(0,0,0,0.82) 80%,
        rgba(0,0,0,0.92) 100%
      );
  }
}
@media (max-width: 480px) {
  .line--outline { -webkit-text-stroke-width: 1.5px; }
  .hero-home__title .line { padding-bottom: 0.04em; }
}


/* ═══════════════════════════════════════════════════════
   VIDEO HERO — DEFINITIVO
   Il video occupa l'intera viewport della sezione hero.
   Il titolo è sovrapposto in overlay al video.
   Questo blocco sovrascrive tutti i blocchi precedenti.
═══════════════════════════════════════════════════════ */

/* ── Hero section: esattamente 100vh, nessun padding ─── */
.hero-home {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  padding: 0 !important;
  margin: 0;
  overflow: hidden;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
}

/* ── Video background: riempie intera sezione ─────────── */
.hero-home__video-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background: #0a0a0a;
}

/* Cover 16:9: l'iframe viene ingrandito per coprire
   qualsiasi viewport senza bande nere */
.hero-home__video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Dimensioni: maggiore tra 100vw e l'altezza scalata a 16:9 */
  width: 100vw;
  height: calc(100vw * 9 / 16);
  min-height: 100svh;
  min-width: calc(100svh * 16 / 9);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  display: block;
}

/* ── Overlay: contrasto testo/video ──────────────────── */
.hero-home__overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    160deg,
    rgba(0,0,0,0.28) 0%,
    rgba(0,0,0,0.38) 40%,
    rgba(0,0,0,0.70) 75%,
    rgba(0,0,0,0.88) 100%
  );
}

/* ── Grain disabilitato (non visibile su video) ───────── */
.hero-home::before { display: none !important; }
.hero-home::after  { display: none !important; }

/* ── Container: sovrapposto al video, piena altezza ──── */
.hero-home .container {
  position: relative;
  z-index: 2;
  /* Piena altezza della viewport — il titolo vive qui dentro */
  height: 100svh;
  min-height: unset;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
  /* Flex: contenuto agganciato in basso con spazio per strip */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

/* ── Titolo: sovrapposto al video ─────────────────────── */
.hero-home__title {
  position: relative;
  z-index: 2;
  max-width: none;
  padding-top: 0;
  /* Margine dal basso: separa il titolo dalla strip */
  margin-bottom: 0;
}

/* Linee: overflow VISIBILE — PRENDONO non viene tagliata */
.hero-home__title .line {
  display: block;
  overflow: visible;
  line-height: 0.88;
}

/* Testi su video scuro */
.line--solid   { color: var(--white); text-shadow: 0 2px 40px rgba(0,0,0,0.45); }
.line--outline {
  color: transparent;
  -webkit-text-stroke: 3px rgba(255,255,255,0.92);
  text-shadow: none;
}
/* FORMA: rosa per il colpo finale */
.hero-home__title .line:last-child .line-inner {
  color: var(--primary);
  text-shadow: 0 2px 40px rgba(219,0,90,0.4);
}

/* ── Strip in basso: ancorata al fondo della viewport ─── */
.hero-home__below {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-top: 1px solid rgba(255,255,255,0.09);
  padding-block: var(--space-5);
  padding-inline: var(--space-6);
  margin-inline: calc(-1 * var(--space-6));
  /* Grid 3 colonne */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-8);
  /* Niente animazione reveal — visibile subito */
  animation: stripIn 700ms cubic-bezier(0.16, 1, 0.3, 1) 400ms both;
}
.hero-home__tagline { color: var(--primary); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.16em; white-space: nowrap; }
.hero-home__sub     { color: rgba(255,255,255,0.45); font-size: var(--text-xs); text-align: center; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-home__below {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding-block: var(--space-4);
  }
  .hero-home__sub { text-align: left; }
  .line--outline  { -webkit-text-stroke-width: 2px; }
}
@media (max-width: 480px) {
  .line--outline { -webkit-text-stroke-width: 1.5px; }
}


/* ═══════════════════════════════════════════════════════
   HERO FINALE — Video sotto nav, panel slide-up in basso
   Sostituisce tutti i blocchi hero precedenti.
═══════════════════════════════════════════════════════ */

/* Altezza della nav: usata per posizionare il video */
:root { --nav-h: 82px; }

/* ── Nav: trasparente sulla hero — il glass della pill gestisce la leggibilità ── */
body:has(.hero-svc-scene) .nav:not(.scrolled) { background: transparent; }

/* ── Pill glass sulla hero: più opaca per rendere logo e testo leggibili ── */
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__inner {
  background: rgba(255,255,255,0.38);
  backdrop-filter: blur(20px) saturate(160%) brightness(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(160%) brightness(1.04);
}
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__link,
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__dropdown-toggle { color: var(--black); }
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__cta { background: var(--primary); color: var(--white); border-color: var(--primary); }
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__hamburger span { background: var(--black); }

/* ── Fallback CSS puro: hero sempre scura → menu e icone bianchi sin dal primo paint
   Copre il caso refresh prima che il JS applichi nav--on-dark                        */
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__menu-btn { color: var(--primary); }
body:has(.hero-svc-scene) .nav:not(.scrolled) .nav__menu-icon span { background: var(--primary); }

/* ── Sezione hero: occupa viewport esattamente sotto la nav ── */
.hero-home {
  position: relative;
  /* Inizia subito sotto la nav */
  margin-top: var(--nav-h);
  /* Altezza = viewport meno la nav */
  height: calc(100svh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  max-height: calc(100svh - var(--nav-h));
  width: 100%;
  overflow: hidden;
  background: #0a0a0a;
  /* Reset tutti i padding e display precedenti */
  padding: 0 !important;
  display: block;
}

/* ── Pseudo-elementi: nessuno nel hero ───────────────── */
.hero-home::before,
.hero-home::after { display: none !important; }

/* ── Video background: riempie l'intera sezione hero ─── */
.hero-home__video-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background: #0a0a0a;
  /* Maschera sottile in basso per fondere col panel */
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* Tecnica cover 16:9 garantita:
   - width: 100% dell'hero  height: 9/16 di quella width
   - Se l'hero è più alto del 9/16, min-height lo forza a coprire
   - min-width garantisce che in viewport molto alti copra in larghezza */
.hero-home__video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(100% * 16 / 9);   /* più largo = scala in altezza */
  min-height: 100%;
  min-width: calc(100% * 16 / 9); /* più alto = scala in larghezza */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  display: block;
}

/* ── Panel: sale dal basso con slide-up ───────────────── */
.hero-home__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  /* Sfondo scuro con blur sul video sottostante */
  background: rgba(8, 8, 8, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: clamp(var(--space-8), 4vw, var(--space-12)) clamp(var(--space-6), 5vw, var(--space-20));
  /* Layout interno: verticale, nessuna sovrapposizione */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* Slide-up all'ingresso della pagina */
  animation: heroPanelUp 900ms cubic-bezier(0.16, 1, 0.3, 1) 300ms both;
}

@keyframes heroPanelUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── Titolo: tre righe impilate, leggibili ─────────────
   Ogni span è un blocco separato — nessuna sovrapposizione
   ─────────────────────────────────────────────────────── */
.hero-home__title {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  font-family: var(--font-primary);
  font-size: clamp(3.5rem, 11vw, 9.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-weight: 900;
  /* Titolo e info separati dal flex gap del panel */
}

/* "LE IDEE" e "FORMA": bianco pieno */
.hero-home__title .line--solid,
.hero-home__title span.line--solid {
  display: block;
  color: var(--white);
  text-shadow: 0 2px 32px rgba(0,0,0,0.3);
}

/* "PRENDONO": outline bianco — netto su sfondo scuro */
.hero-home__title .line--outline,
.hero-home__title span.line--outline {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2.5px rgba(255,255,255,0.90);
  text-shadow: none;
}

/* "FORMA": rosa brand — colpo finale */
.hero-home__title .line--pink,
.hero-home__title span.line--pink {
  display: block;
  color: var(--primary);
  text-shadow: 0 2px 48px rgba(219,0,90,0.5);
}

/* ── Info row: tagline + sub + CTA impilati ────────────
   Disposizione orizzontale su desktop:
   [tagline + sub a sinistra] [CTA a destra]
   ─────────────────────────────────────────────────────── */
.hero-home__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: var(--space-5);
}

.hero-home__tagline {
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--primary);
  text-transform: uppercase;
  margin: 0;
}

.hero-home__sub {
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  margin: 0;
}

/* Tagline + sub in colonna a sinistra */
.hero-home__info > :not(.hero-home__cta) {
  display: block;
}

/* Wrapper testo a sinistra */
.hero-home__info {
  flex-wrap: wrap;
}
.hero-home__tagline { order: 1; flex-basis: 100%; max-width: 55%; }
.hero-home__sub     { order: 2; flex-basis: 100%; max-width: 55%; }
.hero-home__cta     { order: 3; margin-left: auto; flex-shrink: 0; }

/* CTA button nel panel */
.hero-home__cta.btn--primary {
  background: var(--primary);
  color: var(--white);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  padding: var(--space-4) var(--space-10);
  border-radius: 0;
  font-weight: 700;
  transition: background 200ms, color 200ms, transform 200ms;
}
.hero-home__cta.btn--primary:hover {
  background: var(--white);
  color: var(--black);
  transform: translateY(-2px);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --nav-h: 72px; }
  .hero-home__title { font-size: clamp(2.8rem, 13vw, 6rem); }
}

@media (max-width: 640px) {
  :root { --nav-h: 68px; }
  .hero-home__title { font-size: clamp(2.4rem, 16vw, 4.5rem); line-height: 0.92; }
  .hero-home__title .line--outline { -webkit-text-stroke-width: 2px; }

  /* Mobile: info in colonna, CTA sotto i testi */
  .hero-home__info {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .hero-home__tagline,
  .hero-home__sub { max-width: none; }
  .hero-home__cta { margin-left: 0; }
}


/* ═══════════════════════════════════════════════════════
   HERO REBUILD — due sezioni distinte
   1. .hero-video  — video fullscreen sotto la nav
   2. .hero-title  — titolo imponente + sub + CTA allo scroll
═══════════════════════════════════════════════════════ */

/* ── Variabile altezza nav (dichiarata anche sopra, ridefinita qui) */
:root { --nav-h: 82px; }

/* ─────────────────────────────────────────────────────
   SEZIONE 1 — VIDEO
   Inizia subito dopo la nav con 20px di margine.
   Occupa esattamente il resto della viewport.
   ───────────────────────────────────────────────────── */
.hero-video {
  /* Parte subito sotto la nav + 20px gap */
  margin-top: calc(var(--nav-h) + 20px);
  /* Altezza = viewport totale meno nav meno gap */
  height: calc(100vh - var(--nav-h) - 20px);
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
  /* Annulla qualsiasi .section o .hero-home precedente */
  padding: 0;
  display: block;
}

/* Wrapper iframe: riempie tutto il contenitore */
.hero-video__wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Cover tecnica 16:9 — copre tutta la sezione senza bande nere */
.hero-video__wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Altezza = larghezza × 9/16 */
  width: 100%;
  height: calc(100% * 16 / 9);
  /* Se l'altezza della section supera quello ratio, scala */
  min-height: 100%;
  min-width: calc(100% * 16 / 9);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  display: block;
}

/* ─────────────────────────────────────────────────────
   SEZIONE 2 — TITOLO
   Appare allo scroll down.
   Sfondo nero (--black), testo bianco e rosa.
   Tutto centrato, nessuna sovrapposizione.
   ───────────────────────────────────────────────────── */
.hero-title {
  background: #0a0a0a;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(var(--space-20), 10vh, var(--space-40));
  /* Nessun padding laterale: lo gestisce .container */
}

.hero-title__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* Titolo: grande, imponente, centrato */
.hero-title__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-primary);
  font-size: clamp(4.5rem, 15vw, 13rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  font-weight: 900;
  margin: 0 0 clamp(var(--space-10), 4vh, var(--space-16)) 0;
}

/* Riga 1 "LE IDEE": bianco pieno */
.hero-title__heading span:nth-child(1) {
  color: var(--white);
}

/* Riga 2 "PRENDONO": outline bianco — nessuna clip, visibile per intero */
.hero-title__heading span:nth-child(2) {
  color: transparent;
  -webkit-text-stroke: 3px var(--white);
}

/* Riga 3 "FORMA": rosa brand, colpo finale */
.hero-title__heading span:nth-child(3) {
  color: var(--primary);
}

/* Tagline: bianco, tracking largo, separatore decorativo sopra */
.hero-title__tagline {
  font-family: var(--font-secondary);
  font-size: clamp(var(--text-xs), 1.2vw, var(--text-sm));
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 var(--space-3) 0;
  /* Lineetta rosa decorativa sopra */
  padding-top: var(--space-5);
  position: relative;
}
.hero-title__tagline::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: var(--primary);
  margin: 0 auto var(--space-5);
  border-radius: 2px;
}

/* Sottotitolo: bianco attenuato */
.hero-title__sub {
  font-family: var(--font-secondary);
  font-size: clamp(var(--text-sm), 1.4vw, var(--text-base));
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
  margin: 0 0 clamp(var(--space-10), 4vh, var(--space-14)) 0;
}

/* CTA button: bianco su nero — contrasto invertito sul bg scuro */
.hero-title__cta {
  display: inline-block;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-14);
  border: 2px solid var(--white);
  border-radius: 0;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
  cursor: pointer;
}
/* Hover: inversione — sfondo rosa, testo bianco */
.hero-title__cta:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  transform: translateY(-3px);
}

/* ── Nav trasparente sulle pagine servizio */
body:has(.hero-video) .nav:not(.scrolled) {
  background: transparent;
}
body:has(.hero-video) .nav:not(.scrolled) .nav__link,
body:has(.hero-video) .nav:not(.scrolled) .nav__dropdown-toggle { color: var(--black); }
body:has(.hero-video) .nav:not(.scrolled) .nav__logo img {
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,0.55))
    drop-shadow(0 0 22px rgba(255,255,255,0.28))
    drop-shadow(0 2px 6px rgba(0,0,0,0.22));
}
body:has(.hero-video) .nav:not(.scrolled) .nav__cta { background: var(--primary); color: var(--white); }
body:has(.hero-video) .nav:not(.scrolled) .nav__hamburger span { background: var(--black); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --nav-h: 72px; }
  .hero-title__heading span:nth-child(2) { -webkit-text-stroke-width: 2.5px; }
}
@media (max-width: 640px) {
  :root { --nav-h: 68px; }
  .hero-title__heading span:nth-child(2) { -webkit-text-stroke-width: 2px; }
  .hero-title__cta { padding: var(--space-4) var(--space-10); }
}

/* ═══════════════════════════════════════════════════════
   FIX PASS — video zoom, margine, titolo leggibile, CTA uniforme
═══════════════════════════════════════════════════════ */

/* ── 1. VIDEO: niente 20px, video adattato senza zoom ─── */
.hero-video {
  margin-top: var(--nav-h);              /* direttamente sotto la nav */
  height: calc(100vh - var(--nav-h));    /* riempie il resto della viewport */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  overflow: hidden;
  padding: 0;
}

/* Wrapper 16:9: mostra il video per intero, nessun crop */
.hero-video__wrap {
  position: relative;
  width: 100%;
  /* aspect-ratio mantiene le proporzioni — nessuno zoom */
  aspect-ratio: 16 / 9;
  /* Non supera mai l'altezza disponibile */
  max-height: 100%;
}

.hero-video__wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  display: block;
}

/* ── 2. TITOLO SEZIONE: leggibile, centrato, meno pesante ─
   Sfondo bianco per massima leggibilità e pulizia visiva
   ─────────────────────────────────────────────────────── */
.hero-title {
  background: var(--white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(var(--space-20), 12vh, var(--space-48));
}

.hero-title__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

/* Titolo: dimensione leggibile, peso bilanciato */
.hero-title__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-primary);
  font-size: clamp(3rem, 9.5vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 clamp(var(--space-10), 5vh, var(--space-16)) 0;
}

/* "LE IDEE": nero su bianco — massimo contrasto */
.hero-title__heading span:nth-child(1) {
  color: var(--black);
}

/* "PRENDONO": rosa pieno — nessuno stroke, nessun artificio tipografico */
.hero-title__heading span:nth-child(2) {
  color: var(--primary);
  -webkit-text-stroke: 0;
}

/* "FORMA": nero — chiude il titolo in modo netto */
.hero-title__heading span:nth-child(3) {
  color: var(--black);
}

/* Separatore decorativo rosa */
.hero-title__tagline::before {
  content: '';
  display: block;
  width: 36px;
  height: 3px;
  background: var(--primary);
  margin: 0 auto var(--space-5);
  border-radius: 2px;
}

/* Tagline: nero leggibile su bianco */
.hero-title__tagline {
  font-family: var(--font-secondary);
  font-size: clamp(var(--text-xs), 1.1vw, var(--text-sm));
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--black);
  margin: 0 0 var(--space-3) 0;
  padding-top: 0;
}

/* Sottotitolo: grigio scuro — chiaramente leggibile */
.hero-title__sub {
  font-family: var(--font-secondary);
  font-size: clamp(var(--text-sm), 1.3vw, var(--text-base));
  color: var(--black-50);
  letter-spacing: 0.02em;
  margin: 0 0 clamp(var(--space-10), 4vh, var(--space-14)) 0;
}

/* ── 3. CTA: uniforme con il resto della pagina ──────────
   Usa esattamente .btn--primary: rosa → hover nero
   Nessun override, stesso comportamento di tutti i CTA
   ─────────────────────────────────────────────────────── */
.hero-title__cta {
  /* Reset override precedente */
  all: unset;
  /* Replica btn base */
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--space-4) var(--space-10);
  /* Stile btn--primary: rosa, testo bianco */
  background: var(--primary);
  color: var(--white);
  border: 2px solid var(--primary);
  border-radius: 0;
  isolation: isolate;
  transition: background var(--dur-base), color var(--dur-base), transform var(--dur-base), border-color var(--dur-base);
}
.hero-title__cta:hover {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  transform: translateY(-2px);
}

/* Nav: trasparente prima dello scroll */
body:has(.hero-video) .nav:not(.scrolled) {
  background: transparent;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-title__heading { font-size: clamp(2.5rem, 13vw, 5rem); }
}


/* ═══════════════════════════════════════════════════════
   VIDEO FULL VIEWPORT — definitivo
   Sezione occupa tutta la viewport dalla nav in giù.
   Iframe riempie il 100% della sezione.
   YouTube adatta il contenuto internamente.
═══════════════════════════════════════════════════════ */

.hero-video {
  /* Inizia subito sotto la nav */
  margin-top: var(--nav-h);
  /* Occupa esattamente il resto della viewport */
  width: 100vw;
  height: calc(100vh - var(--nav-h));
  /* Reset tutto il precedente */
  display: block;
  position: relative;
  overflow: hidden;
  background: #000;
  padding: 0;
  flex-direction: unset;
  align-items: unset;
  justify-content: unset;
}

.hero-video__wrap {
  /* Riempie l'intera sezione */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Reset aspect-ratio precedente */
  aspect-ratio: unset;
  max-height: unset;
}

/* L'iframe occupa tutto lo spazio disponibile.
   YouTube mostra il video adattato (con bande nere se necessario)
   ma non lo taglia — il contenuto è sempre visibile per intero. */
.hero-video__wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  display: block;
}


/* ═══════════════════════════════════════════════════════
   .vhero — video hero, classe isolata senza conflitti
   Occupa tutta la viewport dalla nav in giù, centrato.
═══════════════════════════════════════════════════════ */

.vhero {
  /* Flusso normale — parte subito sotto la nav */
  display: block;
  position: relative;
  margin-top: var(--nav-h);
  width: 100%;
  /* Riempie tutta la viewport rimasta sotto la nav */
  height: calc(100vh - var(--nav-h));
  background: #000;
  overflow: hidden;
}

.vhero__iframe {
  /* Centrato nella sezione */
  position: absolute;
  top: 50%;
  left: 50%;
  /* Cover 16:9: scala per coprire l'intero spazio, video centrato */
  width: 100%;
  height: 56.25vw;      /* 100vw × 9/16 */
  min-height: 100%;
  min-width: 177.78vh;  /* 100vh × 16/9 */
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none;
  display: block;
}


/* ═══════════════════════════════════════════════════════
   VHERO v2 — layout split: testo 30% | video 70%
═══════════════════════════════════════════════════════ */

.vhero {
  display: grid;
  grid-template-columns: 30% 70%;
  margin-top: var(--nav-h);
  width: 100%;
  height: calc(100vh - var(--nav-h));
  background: #0a0a0a;
  overflow: hidden;
  position: relative;
}

/* ── Colonna sinistra: testo centrato verticalmente ───── */
.vhero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--space-8), 4vw, var(--space-16))
           clamp(var(--space-6), 3vw, var(--space-12));
  background: #0a0a0a;
  position: relative;
  z-index: 1;
  /* Sottile separatore a destra */
  border-right: 1px solid rgba(255,255,255,0.08);
}

/* Titolo */
.vhero__title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-primary);
  font-size: clamp(2.2rem, 4.5vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-weight: 900;
  margin: 0 0 clamp(var(--space-6), 3vh, var(--space-10)) 0;
}

/* "LE IDEE": bianco */
.vhero__title span:nth-child(1) { color: var(--white); }

/* "PRENDONO": rosa brand */
.vhero__title span:nth-child(2) { color: var(--primary); }

/* "FORMA": bianco */
.vhero__title span:nth-child(3) { color: var(--white); }

/* Tagline */
.vhero__tagline {
  font-family: var(--font-secondary);
  font-size: clamp(0.6rem, 0.8vw, var(--text-xs));
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 var(--space-2) 0;
}

/* Sottotitolo */
.vhero__sub {
  font-family: var(--font-secondary);
  font-size: clamp(0.65rem, 0.85vw, var(--text-sm));
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin: 0 0 clamp(var(--space-6), 3vh, var(--space-10)) 0;
}

/* CTA: uguale agli altri btn--primary della pagina */
.vhero__cta {
  align-self: flex-start;
}

/* ── Colonna destra: video riempie tutto ──────────────── */
.vhero__right {
  position: relative;
  overflow: hidden;
  background: #000;
}

/* Cover centrato: il video riempie la colonna destra
   mantenendo l'aspect ratio 16:9, centrato */
.vhero__iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 56.25vw;      /* 100% larghezza × 9/16 */
  min-height: 100%;
  min-width: 177.78vh;  /* 100% altezza × 16/9 */
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none;
  display: block;
}

/* ── Responsive: mobile stack verticale ───────────────── */
@media (max-width: 768px) {
  .vhero {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: auto;
    min-height: calc(100vh - var(--nav-h));
  }
  .vhero__left {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: var(--space-10) var(--space-6);
  }
  .vhero__title { font-size: clamp(2.5rem, 12vw, 4rem); }
  .vhero__right {
    height: 56vw; /* aspect ratio sul mobile */
  }
  .vhero__iframe {
    min-width: unset;
    min-height: unset;
    width: 100%;
    height: 100%;
    transform: none;
    top: 0;
    left: 0;
  }
}


/* ══ CLIENTS MARQUEE ══════════════════════════════════════════ */

.clients {
  padding-block: var(--space-24);
  overflow: hidden;
}

.clients__track-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  overflow: hidden;
}

.clients__track {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.clients__row {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  white-space: nowrap;
  width: max-content;
}

.clients__track--fwd .clients__row {
  animation: clients-fwd 400s linear infinite;
}

.clients__track--rev .clients__row {
  animation: clients-rev 400s linear infinite;
}

.clients__logo {
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-40);
  flex-shrink: 0;
  transition: color var(--dur-base) var(--ease-out);
}

.clients__logo:hover {
  color: var(--white);
}

.clients__sep {
  color: var(--spring-green);
  font-size: var(--text-sm);
  flex-shrink: 0;
  opacity: 0.6;
}

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

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

.clients__track:hover .clients__row {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .clients__row { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   SVC-ZAMPA — dark stat section (influencer marketing)
═══════════════════════════════════════════════════════ */
.svc-zampa {
  background: var(--black);
  padding-block: 0;
}
.svc-zampa__title {
  font-family: var(--font-primary);
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 0.04em;
  transform: scaleY(1.18);
  transform-origin: left top;
  display: block;
  padding-block: clamp(3rem, 6vw, 6rem);
  line-height: 1;
}
.svc-zampa__stat-wrap {
  background: #fff;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.svc-zampa__stat {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.svc-zampa__num {
  font-family: var(--font-primary);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 900;
  color: var(--primary);
  letter-spacing: 0.02em;
  transform: scaleY(1.18);
  transform-origin: left top;
  display: block;
  flex-shrink: 0;
  line-height: 1;
}
.svc-zampa__desc {
  font-family: var(--font-secondary);
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════
   SVC-COLLAB — featured celebrity video section
═══════════════════════════════════════════════════════ */
.svc-collab {
  background: var(--black);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.svc-collab__inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.svc-collab__video {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 9/16;
  max-height: 600px;
}
.svc-collab__video iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.svc-collab__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.svc-collab__label {
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.svc-collab__yt {
  display: flex;
  align-items: center;
}
.svc-collab__name {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 0.04em;
  transform: scaleY(1.18);
  transform-origin: left top;
  display: block;
  line-height: 1;
}
.svc-collab__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  padding: 0.6rem 1.4rem;
  font-family: var(--font-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
  transition: background var(--dur-base), border-color var(--dur-base);
}
.svc-collab__btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
}

/* ═══════════════════════════════════════════════════════
   SVC-COLLAB-GRID — photo grid "alcune collaborazioni"
═══════════════════════════════════════════════════════ */
.svc-collab-grid__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.svc-collab-grid__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.svc-collab-grid__photo {
  border-radius: 12px;
  overflow: hidden;
  background: #f5f5f5;
}
.svc-collab-grid__photo img {
  width: 100%;
  height: auto;
  display: block;
}
.svc-collab-grid__name {
  font-family: var(--font-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   SVC-TAILOR — tailor made section
═══════════════════════════════════════════════════════ */
.svc-tailor {
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(219,0,90,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 30%, rgba(219,0,90,0.12) 0%, transparent 55%),
    #060606;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.svc-tailor__inner {
  display: grid;
  grid-template-columns: 45fr 55fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.svc-tailor__visual {
  border-radius: 16px;
  overflow: hidden;
  background: #f5f5f5;
}
.svc-tailor__tag {
  font-family: var(--font-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-3);
}
.svc-tailor__title {
  font-family: var(--font-primary);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--white) !important;
  color: var(--primary);
  letter-spacing: 0.04em;
  transform: scaleY(1.18);
  transform-origin: left top;
  display: block;
  line-height: 1.05;
  margin-bottom: var(--space-6);
}
.svc-tailor__text {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════
   SVC-MINI-FEATURES — icon 3-col grid inside content block
═══════════════════════════════════════════════════════ */
.svc-mini-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid #e8e8e8;
}
.svc-mini-features__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.svc-mini-features__item svg {
  color: var(--primary);
  flex-shrink: 0;
}
.svc-mini-features__item span {
  font-family: var(--font-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════
   SVC-SETTORI — influencer sector icon grid
═══════════════════════════════════════════════════════ */
.svc-settori__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
.svc-settori__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.svc-settori__item svg {
  color: var(--black);
  stroke-width: 1.5px;
}
.svc-settori__item span {
  font-family: var(--font-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════
   SVC-TALENT-PRONTI — photo + bullet list
═══════════════════════════════════════════════════════ */
.svc-talent-pronti {
  background: #fff;
}
.svc-talent-pronti__inner {
  display: grid;
  grid-template-columns: 30fr 70fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.svc-talent-pronti__visual {
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.svc-talent-pronti__visual img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 16px;
}
/* Niente scaleY: stirava il titolo del 18% in altezza senza che
   il riquadro se ne accorgesse, quindi le lettere debordavano
   sotto e finivano addosso alla prima riga dell'elenco. */
.svc-talent-pronti__title {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--primary);
  letter-spacing: 0.04em;
  display: block;
  line-height: 1.05;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.svc-talent-pronti__item {
  margin-bottom: var(--space-6);
}
.svc-talent-pronti__item:last-child { margin-bottom: 0; }
.svc-talent-pronti__label {
  font-family: var(--font-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-2);
}
.svc-talent-pronti__item p {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black-80);
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════
   SVC-INTEGRAZIONE — ad integrazione section + wave
═══════════════════════════════════════════════════════ */
.svc-integrazione {
  background: #fff;
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  position: relative;
}
.svc-integrazione__deco {
  position: absolute;
  right: calc(-1 * var(--gutter, 2rem));
  top: 50%;
  transform: translateY(-50%);
  width: clamp(300px, 40vw, 560px);
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.svc-integrazione__header {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.svc-integrazione__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-start;
}
.svc-integrazione__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--black);
  background: #fff;
  transition: border-color 200ms, color 200ms, background 200ms;
}
.svc-integrazione__pill svg { color: var(--primary); flex-shrink: 0; }
.svc-integrazione__pill:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(219,0,90,0.04);
}
.svc-integrazione__title {
  font-family: var(--font-secondary);
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--black);
  text-align: center;
  line-height: 1.5;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.svc-integrazione__grid {
  display: flex;
  justify-content: center;
  gap: clamp(3rem, 8vw, 8rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.svc-integrazione__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.svc-integrazione__item svg {
  color: var(--black);
}
.svc-integrazione__item span {
  font-family: var(--font-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  text-align: center;
  line-height: 1.4;
}
/* wave removed */

/* ═══════════════════════════════════════════════════════
   SVC-STAT-VIDEO — video + 87% stat side by side (dark)
═══════════════════════════════════════════════════════ */
.svc-stat-video {
  background:
    radial-gradient(ellipse 60% 70% at 100% 50%, rgba(219,0,90,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 0% 50%, rgba(219,0,90,0.05) 0%, transparent 60%),
    #fff;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.svc-stat-video__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.svc-stat-video__video {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.svc-stat-video__video iframe {
  width: 100%;
  height: 100%;
  display: block;
}
.svc-stat-video__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.svc-stat-video__num {
  font-family: var(--font-primary);
  font-size: clamp(6rem, 14vw, 13rem);
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.02em;
  transform: scaleY(1.18);
  transform-origin: left top;
  display: block;
  line-height: 0.9;
}
.svc-stat-video__pct {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 1;
}
.svc-stat-video__desc {
  font-family: var(--font-secondary);
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  font-weight: 500;
  color: var(--black-80);
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  max-width: 380px;
}
.svc-stat-video__line {
  width: 60px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════
   SVC-INTRO-MARKET — text + photo 2-col section
═══════════════════════════════════════════════════════ */
.svc-intro-market {
  background: #fff;
}
.svc-intro-market__inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.svc-intro-market__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.svc-intro-market__text p {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black-80);
  line-height: 1.75;
}
.svc-intro-market__photo {
  border-radius: 16px;
  overflow: hidden;
}
.svc-intro-market__photo img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

/* ── stat-video: video left, stat right ── */
.svc-stat-video__inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.svc-stat-video__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.svc-stat-video__num {
  line-height: 0.9;
}

/* ── tailor divider ── */
.svc-tailor__divider {
  width: 48px;
  height: 3px;
  background: var(--primary);
  border-radius: 2px;
  margin-block: var(--space-5);
}

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY STANDARD — sistema universale pagine servizi
   H2 → clamp(2.5rem, 6vw, 85px) | w800 | ls -0.01em
   H3 → clamp(1.25rem, 3vw, 2.6rem) | w800 | ls -0.01em
═══════════════════════════════════════════════════════ */

/* ── H2: tutti i titoli di sezione principali ── */
.svc-process__title,
.svc-tools__title,
.svc-clients__title,
.svc-magic__title,
.svc-advantages__title,
.svc-channels__title,
.svc-section-title,
.svc-section-header__title,
.svc-caffe__title {
  font-family: var(--font-primary) !important;
  font-size: clamp(2.5rem, 6vw, 85px) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 1.05 !important;
  transform: none !important;
}

/* Colori di contesto */
.svc-process__title   { color: var(--black); }
.svc-tools__title     { color: var(--black); }
.svc-advantages__title { color: var(--black); }
.svc-channels__title  { color: var(--black); }
.svc-section-title    { color: var(--black); }
.svc-section-header__title { color: var(--black); }
/* svc-clients e svc-magic: colore gestito da hero.css */

/* ── H3: titoli card/blocco — proporzione 1:2 rispetto all'H2 ── */
.svc-process__card-title,
.svc-advantages__item-title,
.svc-tailor__title,
.svc-content-block__title,
.svc-features__title,
.svc-integrazione__section-title {
  font-family: var(--font-primary) !important;
  font-size: clamp(1.25rem, 3vw, 2.6rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
}

/* ── Eyebrow / kicker ── */
.svc-section-header__eyebrow,
.svc-tailor__tag,
.svc-collab-grid__name,
.svc-settori__item span,
.svc-integrazione__item span,
.svc-talent-pronti__label,
.svc-mini-features__item span {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

/* ── Body text ── */
.svc-section-header__sub,
.svc-content-block__text,
.svc-features__text,
.svc-process__card-text,
.svc-advantages__item-text,
.svc-talent-pronti__item p,
.svc-intro-market__text p,
.svc-integrazione__title {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.85 !important;
  letter-spacing: 0 !important;
  color: var(--black-50) !important;
}

/* Body su sfondo scuro */
.svc-tailor__text {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.85 !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,0.72) !important;
}

/* ── Stat description text
   Keep readable with proper sizing
   ── */
.svc-stat-video__desc {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.8 !important;
  letter-spacing: 0.04em !important;
  color: var(--black-60) !important;
}

/* ── Checklist text
   Match about body size
   ── */
.svc-checklist li {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.75 !important;
}

/* ── Step number + subtitle per strategia-digitale ── */
.svc-step-num {
  display: block;
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 0;
}
.svc-content-block__copy .svc-content-block__title {
  margin-bottom: var(--space-5) !important;
  line-height: 1.08 !important;
}
.svc-step-subtitle {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--black);
  line-height: 1.4;
  margin-bottom: var(--space-2);
}
.svc-content-block__copy .svc-content-block__text {
  margin-top: 0;
}

   Keep scaleY for display heading
   ── */

/* ── magic__title on light bg stays black ── */
.svc-magic__title {
  color: var(--black) !important;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* ── svc-intro-market: compact padding + cat tail deco ── */
.svc-intro-market {
  padding-block: clamp(2rem, 4vw, 3.5rem) !important;
  position: relative;
  overflow: visible;
}
.svc-intro-market__deco {
  position: absolute;
  left: calc(-1 * var(--gutter, 2rem));
  top: 8%;
  transform: scaleX(-1);
  width: clamp(200px, 28vw, 380px);
  height: auto;
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
  z-index: -1;
}
.svc-intro-market__inner {
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════
   WEB DESIGN PAGE
═══════════════════════════════════════════════════════ */

/* ── numbered list (stile svc-grid homepage) ── */
.svc-wd-list-section { padding-block: clamp(3rem, 6vw, 6rem); }
.svc-wd-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1.5px solid rgba(0,0,0,0.1);
}
@media (max-width: 768px) {
  .svc-wd-list { grid-template-columns: 1fr; }
}
.svc-wd-list__item {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1vw, 1rem);
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 2rem);
  border-bottom: 1.5px solid rgba(0,0,0,0.1);
  border-right: 1.5px solid rgba(0,0,0,0.1);
  transition: background 0.2s;
}
.svc-wd-list__item:last-child { border-right: none; }
.svc-wd-list__item:hover { background: rgba(219,0,90,0.03); }
.svc-wd-list__num {
  font-family: var(--font-primary);
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
  min-width: 3ch;
}
.svc-wd-list__name {
  font-family: var(--font-primary);
  font-size: clamp(1.2rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 0.5rem;
}
.svc-wd-list__desc {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--black);
  max-width: 60ch;
}

/* ── kicker overrides inside svc-wd-about ── */
.svc-wd-about .about-section__kicker {
  margin-bottom: var(--space-5);
}
.svc-wd-about .about-section__kicker::before {
  display: none;
}
.svc-wd-about .about-section__heading {
  margin-top: 0;
}

/* ── about-style intro ── */
.svc-wd-about {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 7rem);
}
.svc-wd-about__tail {
  position: absolute;
  right: calc(-1 * var(--gutter, 2rem));
  top: 5%;
  width: clamp(200px, 30vw, 420px);
  height: auto;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.svc-wd-about__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .svc-wd-about__grid { grid-template-columns: 1fr; }
}
.svc-wd-about__big {
  font-family: var(--font-primary);
  font-size: clamp(6rem, 18vw, 18rem);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(219,0,90,0.18);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.9;
  user-select: none;
}

/* ── block header (eyebrow + h2) ── */
.svc-wd-block__header { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* ── tag/pill list for features ── */
.svc-wd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.svc-wd-tag {
  font-family: var(--font-secondary);
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--black);
  background: rgba(219,0,90,0.08);
  border: 1.5px solid rgba(219,0,90,0.2);
  border-radius: 999px;
  padding: 0.4em 1.1em;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s;
}
.svc-wd-tag:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* ── dark background block variant ── */
.svc-wd-block--dark { background: #f7f7f7; }

/* 3-card overview */
.svc-wd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-block: clamp(2rem, 4vw, 3.5rem);
}
@media (max-width: 768px) {
  .svc-wd-cards { grid-template-columns: 1fr; }
}
.svc-wd-card {
  text-align: center;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1rem, 2vw, 1.5rem);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.svc-wd-card:hover {
  box-shadow: 0 8px 32px rgba(219,0,90,0.08);
  border-color: rgba(219,0,90,0.2);
}
.svc-wd-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto clamp(0.75rem, 1.5vw, 1.25rem);
  color: var(--black);
}
.svc-wd-card__icon svg { width: 100%; height: 100%; }
.svc-wd-card__title {
  font-family: var(--font-primary);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.svc-wd-card__text {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--black);
}

/* intro text + visual */
.svc-wd-intro {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  margin-block: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 768px) {
  .svc-wd-intro { grid-template-columns: 1fr; }
}
.svc-wd-intro__text p {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* alternating bg for sub-sections */
.svc-wd-block:nth-child(odd) {
  background: #fafafa;
}

/* 6-icon feature grid */
.svc-wd-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-block: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 768px) {
  .svc-wd-features { grid-template-columns: repeat(2, 1fr); }
}
.svc-wd-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: clamp(1rem, 1.5vw, 1.5rem) 0.5rem;
}
.svc-wd-feature__icon {
  width: 60px;
  height: 60px;
  color: var(--black);
  flex-shrink: 0;
}
.svc-wd-feature__icon svg { width: 100%; height: 100%; }
.svc-wd-feature__label {
  font-family: var(--font-secondary);
  font-size: clamp(0.7rem, 1.1vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  line-height: 1.3;
}

/* detail: image left + text right */
.svc-wd-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  margin-block: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 768px) {
  .svc-wd-detail { grid-template-columns: 1fr; }
}
.svc-wd-detail__text p {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin-bottom: 1rem;
}

/* ── CTA su sezioni scure: hover bianco/nero ── */
.svc-tailor .btn--primary:hover,
.svc-caffe .btn--primary:hover,
.svc-clients .btn--primary:hover {
  background: var(--white) !important;
  color: var(--black) !important;
  border-color: var(--white) !important;
}
.svc-tailor .btn--primary::before,
.svc-caffe .btn--primary::before {
  background: var(--white) !important;
}
.svc-tailor .btn--primary:hover,
.svc-caffe .btn--primary:hover {
  color: var(--black) !important;
}

/* ══════════════════════════════════════════════════════════════
   PRODUZIONE FOTO / VIDEO — sezioni servizi
   ══════════════════════════════════════════════════════════════ */

.svc-prod {
  padding-block: clamp(4rem, 8vw, 5rem);
  background:
    radial-gradient(ellipse 45% 30% at 88% 50%, rgba(219,0,90,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 38% 28% at 10% 50%, rgba(219,0,90,0.05) 0%, transparent 70%),
    linear-gradient(180deg, #fff 0%, #fdf2f7 50%, #fff 100%);
}

.svc-prod--dark {
  background:
    radial-gradient(ellipse 45% 30% at 88% 50%, rgba(219,0,90,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 38% 28% at 10% 50%, rgba(219,0,90,0.08) 0%, transparent 70%),
    linear-gradient(180deg, #0d0d0d 0%, #161016 50%, #0d0d0d 100%);
}

.svc-prod--fucsia {
  background:
    radial-gradient(ellipse 50% 40% at 80% 50%, rgba(255,255,255,0.12) 0%, transparent 70%),
    linear-gradient(180deg, #DB005A 0%, #c0004e 100%);
}

/* ── Intestazione centrata ──────────────────────────────────── */
.svc-prod__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.svc-prod__kicker {
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  color: var(--primary);
}
.svc-prod--dark   .svc-prod__kicker { color: var(--primary); }
.svc-prod--fucsia .svc-prod__kicker { color: rgba(255,255,255,0.7); }

.svc-prod__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 85px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: var(--space-5);
}
.svc-prod         .svc-prod__title { color: var(--black); }
.svc-prod--dark   .svc-prod__title { color: var(--white); }
.svc-prod--fucsia .svc-prod__title { color: var(--white); }

.svc-prod__sub {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--black-60);
}
.svc-prod--dark   .svc-prod__sub { color: rgba(255,255,255,0.6); }
.svc-prod--fucsia .svc-prod__sub { color: rgba(255,255,255,0.8); }

/* ── Griglia carte ──────────────────────────────────────────── */
.svc-prod__grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.svc-prod__grid--foto  { grid-template-columns: repeat(2, 1fr); }
.svc-prod__grid--video { grid-template-columns: repeat(3, 1fr); }

.svc-prod__item {
  background: var(--white);
  border: var(--border);
  border-radius: 16px;
  padding: clamp(1.75rem, 2.6vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.svc-prod__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.svc-prod--dark   .svc-prod__item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); }
.svc-prod--fucsia .svc-prod__item { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.svc-prod--dark   .svc-prod__item:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
.svc-prod--fucsia .svc-prod__item:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.2); }

.svc-prod__num {
  display: block;
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--primary);
}
.svc-prod--fucsia .svc-prod__num { -webkit-text-stroke-color: rgba(255,255,255,0.6); }

.svc-prod__name {
  font-family: var(--font-primary);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--primary);
}
.svc-prod--dark   .svc-prod__name { color: var(--primary); }
.svc-prod--fucsia .svc-prod__name { color: var(--white); }

.svc-prod__text {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--black-60);
}
.svc-prod--dark   .svc-prod__text { color: rgba(255,255,255,0.55); }
.svc-prod--fucsia .svc-prod__text { color: rgba(255,255,255,0.8); }

@media (max-width: 900px) {
  .svc-prod__grid--foto,
  .svc-prod__grid--video { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .svc-prod__grid--foto,
  .svc-prod__grid--video { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   MODELLAZIONE 3D — sezioni specifiche
   ══════════════════════════════════════════════════════════════ */

/* ── Banner "COSA POSSIAMO FARE INSIEME" ────────────────────── */
.svc-3d-banner {
  position: relative;
  min-height: clamp(280px, 40vw, 520px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--primary);
}

.svc-3d-banner__bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.18;
}

.svc-3d-banner__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.svc-3d-banner__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 6vw, 5rem);
}

.svc-3d-banner__title {
  font-family: var(--font-primary);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--white);
}

/* ── Lista puntata use-case ─────────────────────────────────── */
.svc-3d-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.svc-3d-list li {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  color: var(--black-75);
  padding-left: var(--space-5);
  position: relative;
  line-height: 1.4;
}

.svc-3d-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* ── FACCIAMOLO INSIEME mid-section ────────────────────────── */
.svc-3d-cta-mid {
  background: #f7f7f7;
  border-top: var(--border);
  border-bottom: var(--border);
}

.svc-3d-cta-mid__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.svc-3d-cta-mid__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 85px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--primary);
}

.svc-3d-cta-mid__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.svc-3d-cta-mid__label {
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black-60);
}

.svc-3d-cta-mid__text {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--black-60);
}

@media (max-width: 768px) {
  .svc-3d-cta-mid__inner {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   SERVIZIO AI — classi specifiche
   ══════════════════════════════════════════════════════════════ */

/* ── Kicker con lineetta fucsia ─────────────────────────────── */
.svc-ai-pill-kicker {
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-4);
}

/* ── Pill badge per le sotto-sezioni ────────────────────────── */
.svc-ai-badge {
  display: inline-flex;
  align-items: center;
  background: var(--primary);
  color: var(--white);
  border-radius: 999px;
  padding: 0.25rem 0.9rem;
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-5);
}

/* ── Tag pills (Più rapidi, ecc.) ───────────────────────────── */
.svc-ai-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.svc-ai-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--primary);
}

/* ── Checklist (✓ fucsia) ───────────────────────────────────── */
.svc-ai-checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.svc-ai-checklist li {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black-75);
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
}
.svc-ai-checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* ── Box "I Vantaggi" ───────────────────────────────────────── */
.svc-ai-vantaggi {
  background: rgba(219,0,90,0.06);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
  padding: var(--space-6);
  margin-top: var(--space-6);
}
.svc-ai-vantaggi__title {
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-3);
}

/* ── Sezione "Le Nostre Capacità" ───────────────────────────── */
.svc-ai-capacita__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.svc-ai-capacita__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 85px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--black);
  margin-bottom: var(--space-4);
}
.svc-ai-capacita__sub {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  color: var(--black-60);
  line-height: 1.6;
}

/* ── Approccio (2 colonne) ──────────────────────────────────── */
.svc-ai-approccio {
  background: #f7f7f7;
  border-top: var(--border);
  border-bottom: var(--border);
}
.svc-ai-approccio__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
.svc-ai-approccio__title {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--black);
  margin-bottom: var(--space-6);
}

/* ── Numbered steps (approccio) ─────────────────────────────── */
.svc-ai-steps {
  list-style: none;
  padding: 0;
}
.svc-ai-step {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: var(--border);
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  color: var(--black-75);
}
.svc-ai-step:first-child { border-top: var(--border); }
.svc-ai-step__num {
  width: 32px;
  height: 32px;
  background: var(--primary);
  color: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Workflow section ────────────────────────────────────────── */
.svc-ai-workflow { background: #f7f7f7; }
.svc-ai-workflow__head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(3rem, 5vw, 4rem);
}
.svc-ai-workflow__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 6vw, 85px);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--black);
  margin-bottom: var(--space-4);
}
.svc-ai-workflow__sub {
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  color: var(--black-60);
  line-height: 1.6;
}
.svc-ai-workflow__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2vw, 2rem);
}
.svc-ai-workflow__card {
  background: var(--white);
  border: var(--border);
  border-radius: 16px;
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
}
.svc-ai-workflow__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.svc-ai-workflow__icon {
  width: 24px;
  height: 24px;
  color: var(--primary);
  flex-shrink: 0;
}
.svc-ai-workflow__card-title {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--black);
}
.svc-ai-workflow__steps {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.svc-ai-workflow__step {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black-60);
  line-height: 1.4;
}
.svc-ai-workflow__num {
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 1.2rem;
}

@media (max-width: 768px) {
  .svc-ai-approccio__inner,
  .svc-ai-workflow__grid { grid-template-columns: 1fr; }
}

/* ── Badge "Servizio" per i blocchi AI services ─────────────── */
.svc-ai-service-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(219,0,90,0.1);
  color: var(--primary);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-5);
}

/* sfondo alternato per i blocchi AI services */
.svc-ai-services .svc-content-block[style*="background:#f7f7f7"] {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
}

/* ══════════════════════════════════════════════════════════════
   SERVIZIO AI — fix leggibilità e layout
   ══════════════════════════════════════════════════════════════ */

/* Body text più leggibile ovunque nella pagina AI */
.svc-ai-capacita .svc-content-block__text,
.svc-blocks-section .svc-content-block__text {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--black-75);
}

/* Tag: hug content (già flex-wrap, ma forza inline) */
.svc-ai-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* CTA nei content block: hug content */
.svc-content-block__copy .btn {
  display: inline-block !important;
  width: auto !important;
}

/* Workflow card title — leggibilità */
.svc-ai-workflow__card-head {
  border-bottom: 1.5px solid var(--black-10);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
}
.svc-ai-workflow__icon {
  width: 20px;
  height: 20px;
  color: var(--primary);
}
.svc-ai-workflow__card-title {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--black);
}

/* Workflow card: più respiro */
.svc-ai-workflow__card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

/* Steps nel workflow: più leggibili */
.svc-ai-workflow__step {
  font-size: var(--text-base);
  color: var(--black-60);
  line-height: 1.5;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--black-10);
}
.svc-ai-workflow__step:last-child { border-bottom: none; }
.svc-ai-workflow__num {
  font-size: var(--text-base);
  font-weight: 700;
  min-width: 1.5rem;
}

/* Checklist: più leggibile */
.svc-ai-checklist li {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--black-75);
}

/* Steps approccio: più leggibili */
.svc-ai-step {
  font-size: var(--text-base);
  color: var(--black-75);
}

/* Vantaggi box body */
.svc-ai-vantaggi .svc-ai-checklist li {
  color: var(--black-75);
}

/* ── AI service rows: full-screen alternating backgrounds ─── */
.svc-ai-service-row {
  background: var(--white);
  width: 100%;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.svc-ai-service-row--alt {
  background: #f7f7f7;
}
.svc-ai-service-row .svc-content-block {
  background: transparent !important;
  padding-block: 0 !important;
  border-top: none !important;
}

/* ── Hug-content: badges & CTAs ─────────────────────────── */
.svc-ai-service-badge,
.svc-ai-badge {
  display: inline-flex !important;
  width: auto !important;
  align-self: flex-start;
}
.svc-ai-cta,
.svc-content-block__copy .btn {
  display: inline-flex !important;
  width: auto !important;
  align-self: flex-start;
  margin-top: var(--space-6);
}

/* ══════════════════════════════════════════════════════════════
   TASK 1 — ICONE SVG: bold, pop, imponenti nei placeholder
   ══════════════════════════════════════════════════════════════ */

/* Placeholder visivo: sfondo con gradient accent tint */
.svc-content-block__placeholder {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-4) !important;
  background: linear-gradient(135deg, #fdf0f5 0%, #f7f7f7 100%) !important;
  border: 2px solid rgba(219,0,90,0.15) !important;
  border-radius: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  opacity: 1 !important;
  color: var(--primary) !important;
  min-height: 220px !important;
}

/* Alone decorativo dietro l'icona */
.svc-content-block__placeholder::before {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(219,0,90,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* SVG principale: grande e bold */
.svc-content-block__placeholder > svg,
.svc-content-block__placeholder svg:first-child {
  width: 96px !important;
  height: 96px !important;
  color: var(--primary) !important;
  opacity: 1 !important;
  stroke-width: 1.5 !important;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 16px rgba(219,0,90,0.25));
}

/* Label testuale sotto l'icona */
.svc-content-block__placeholder > span,
.svc-content-block__placeholder small {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  opacity: 0.7 !important;
  position: relative;
  z-index: 1;
}

/* Icone nelle process card: sfondo solido, icona bianca */
.svc-process__icon {
  width: 80px !important;
  height: 80px !important;
  background: var(--primary) !important;
  border-radius: 20px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.svc-process__icon svg {
  width: 100% !important;
  height: 100% !important;
  color: #fff !important;
  stroke: #fff !important;
}

/* Icone negli advantages: sfondo solido, icona bianca */
.svc-advantages__icon {
  width: 72px !important;
  height: 72px !important;
  background: var(--primary) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.svc-advantages__icon svg {
  width: 100% !important;
  height: 100% !important;
  color: #fff !important;
  stroke: #fff !important;
}

/* Placeholder con aspect-ratio circolare (come in 3d) */
.svc-content-block__placeholder[style*="border-radius:50%"] > svg,
.svc-content-block__placeholder[style*="border-radius: 50%"] > svg {
  width: 72px !important;
  height: 72px !important;
}

/* ══════════════════════════════════════════════════════════════
   TASK 2 — TYPOGRAPHY & VISUAL PATTERN UNIFICATION
   Si applica a tutte le pagine servizio
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Hero section: font-size uniforme ── */
.svc-hero__title {
  font-size: clamp(1.8rem, 4.5vw, 72px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  line-height: 0.95 !important;
}
.svc-hero__kicker {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
}
.svc-hero__sub {
  font-family: var(--font-secondary) !important;
  font-size: clamp(0.875rem, 1.2vw, 1rem) !important;
  color: var(--black-60) !important;
  line-height: 1.6 !important;
}

/* ── 2. Titoli di sezione H2: uniformi ── */
.svc-process__title,
.svc-tools__title,
.svc-clients__title,
.svc-magic__title,
.svc-advantages__title,
.svc-channels__title,
.svc-section-title,
.svc-section-header__title,
.svc-caffe__title,
.svc-ai-capacita__title,
.svc-ai-workflow__title,
.svc-3d-banner__title,
.svc-features__section-title {
  font-family: var(--font-primary) !important;
  font-size: clamp(2.5rem, 6vw, 85px) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 1.0 !important;
}

/* ── 3. Titoli H3: card e content block ── */
.svc-process__card-title,
.svc-advantages__item-title,
.svc-content-block__title,
.svc-features__title,
.svc-integrazione__section-title,
.svc-ai-approccio__title,
.svc-wd-card__title,
.svc-wd-feature__title {
  font-family: var(--font-primary) !important;
  font-size: clamp(1.25rem, 3vw, 2.6rem) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 1.05 !important;
}

/* ── 4. Body text: leggibile, uniforme ── */
.svc-content-block__text,
.svc-process__card-text,
.svc-advantages__item-text,
.svc-section-header__sub,
.svc-features__text,
.svc-ai-capacita__sub,
.svc-ai-workflow__sub,
.svc-ai-step,
.svc-ai-checklist li {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-base) !important;
  line-height: 1.8 !important;
  color: var(--black-75) !important;
}

/* ── 5. Sezioni con sfondo alternato: padding-block uniforme ── */
.svc-process,
.svc-tools,
.svc-advantages,
.svc-channels,
.svc-ai-capacita,
.svc-ai-approccio,
.svc-ai-workflow,
.svc-ai-service-row,
.svc-blocks-section,
.svc-features,
.svc-integrazione {
  padding-block: clamp(var(--space-20), 8vw, var(--space-40)) !important;
}

/* Sfondo alternato: grigio chiaro uniforme */
.svc-ai-approccio,
.svc-ai-workflow,
.svc-ai-service-row--alt {
  background: #f7f7f7 !important;
}

/* ── 6. Card/bordered elements: radius, border, padding uniformi ── */
.svc-process__card,
.svc-advantages__item,
.svc-ai-workflow__card,
.svc-wd-card {
  border-radius: 16px !important;
  border: var(--border) !important;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) !important;
}
.svc-process__card:hover,
.svc-advantages__item:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px) !important;
}

/* ── 7. Content block: spaziatura uniforme ── */
.svc-content-block {
  padding-block: clamp(var(--space-8), 3vw, var(--space-16)) !important;
  border-top: 1px solid var(--black-08) !important;
}
.svc-content-block:first-child { border-top: none !important; }

/* ── 8. Section principale: padding uniforme ── */
.section,
.svc-blocks-section {
  padding-block: clamp(var(--space-20), 8vw, var(--space-40));
}

/* ── 9. Eyebrow / tag pill: uniforme ── */
.svc-content-block__tag,
.svc-ai-service-badge,
.svc-ai-badge {
  font-family: var(--font-secondary) !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: rgba(219,0,90,0.08) !important;
  color: var(--primary) !important;
  border-radius: 999px !important;
  padding: 0.35rem 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  width: auto !important;
  align-self: flex-start !important;
}

/* ── 10. Colore body text: uniforma var(--black-75) ── */
.svc-content-block__text { color: var(--black-75) !important; }
.svc-process__card-text  { color: var(--black-75) !important; }
.svc-ai-step             { color: var(--black-75) !important; }

/* ═══════════════════════════════════════════════════════
   PLACEHOLDER: plain gray box, NO SVG icons — safety net
═══════════════════════════════════════════════════════ */
.svc-content-block__placeholder {
  background: #f0f0f0 !important;
  border: none !important;
  background-image: none !important;
}
.svc-content-block__placeholder::before { display: none !important; }
.svc-content-block__placeholder svg,
.svc-content-block__placeholder > svg,
.svc-content-block__placeholder svg:first-child { display: none !important; }
.svc-content-block__placeholder > span,
.svc-content-block__placeholder small {
  color: #aaa !important;
  opacity: 1 !important;
  filter: none !important;
}


/* ── SMM: righe alternato scuro/chiaro ──────────────────── */
.smm-row {
  background: var(--white);
  width: 100%;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.smm-row--dark {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(219,0,90,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 100%, rgba(99,0,255,0.12) 0%, transparent 65%),
    #050505;
}
.smm-row .svc-content-block,
.smm-row--dark .svc-content-block {
  background: transparent !important;
  padding-block: 0 !important;
  border-top: none !important;
}

/* Testo chiaro su sfondo scuro */
.smm-title--light { color: var(--white) !important; }
.smm-text--light  { color: rgba(255,255,255,0.72) !important; }
.smm-tag--light   {
  color: var(--primary) !important;
  background: rgba(219,0,90,0.15) !important;
  border-color: rgba(219,0,90,0.4) !important;
}
.smm-checklist--light li { color: rgba(255,255,255,0.75) !important; }
.smm-checklist--light li::before { color: var(--primary) !important; }

/* Placeholder su sfondo scuro */
.smm-placeholder--dark {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.smm-placeholder--dark span {
  color: rgba(255,255,255,0.4) !important;
}

/* SMM statement — sezione chiara editoriale */
.smm-statement--gradient {
  background: #ffffff;
  padding-top: clamp(5rem, 10vw, 9rem) !important;
  padding-bottom: clamp(5rem, 10vw, 9rem) !important;
}

.smm-statement__headline {
  display: block !important;
  text-align: left !important;
  font-family: var(--font-primary) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  line-height: 0.92 !important;
  letter-spacing: -0.03em !important;
}

.smm-hl {
  display: block;
}

/* riga principale — nera enorme */
.smm-hl--main {
  font-size: clamp(4rem, 9vw, 10rem);
  color: #080808;
}

/* riga accent — fucsia, uguale dimensione */
.smm-hl--accent {
  font-size: clamp(4rem, 9vw, 10rem);
  color: var(--primary);
}

/* riga sottotitolo — piccola, grigia, peso normale */
.smm-hl--sub {
  font-family: var(--font-secondary) !important;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap;
  color: rgba(0,0,0,0.45);
  text-transform: none !important;
  line-height: 1.6 !important;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 44ch;
  display: block;
}

/* ══ INFLUENCER MARKETING: redesign estetico sezioni ══════ */

/* ── 87% stat + video: sfondo scuro drammatico ────────── */
.svc-stat-video {
  background:
    radial-gradient(ellipse 55% 80% at 0% 50%, rgba(219,0,90,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 100% 50%, rgba(219,0,90,0.10) 0%, transparent 55%),
    #0a0a0a !important;
  padding-block: clamp(5rem, 10vw, 9rem) !important;
}

.svc-stat-video__num {
  font-size: clamp(8rem, 18vw, 18rem) !important;
  color: transparent !important;
  -webkit-text-stroke: 2px #DB005A !important;
  line-height: 0.85 !important;
}

.svc-stat-video__num .svc-stat-video__pct {
  -webkit-text-stroke: 1.5px #DB005A !important;
}

.svc-stat-video__desc {
  color: rgba(255,255,255,0.75) !important;
  font-size: clamp(0.9rem, 1.4vw, 1.1rem) !important;
  border-left: 3px solid #DB005A;
  padding-left: 1.2rem;
  max-width: 340px !important;
}

.svc-stat-video__line { display: none !important; }

.svc-stat-video__video {
  border-radius: 20px !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(219,0,90,0.15) !important;
}

/* ── intro mercato: foto grande, testo affiancato ─────── */
.svc-intro-market {
  background: #fff !important;
  padding-block: clamp(4rem, 8vw, 7rem) !important;
}

.svc-intro-market__inner {
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(3rem, 6vw, 6rem) !important;
  align-items: center !important;
}

.svc-intro-market__photo {
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.12) !important;
}

.svc-intro-market__photo img {
  width: 100% !important;
  height: clamp(380px, 50vw, 600px) !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: block !important;
}

.svc-intro-market__big {
  font-size: clamp(5rem, 14vw, 14rem) !important;
  -webkit-text-stroke: 1.5px rgba(219,0,90,0.2) !important;
  margin-bottom: 1.5rem !important;
}

/* ── alcune collaborazioni: foto grandi, nome in overlay ── */
.svc-collab-grid {
  background: #050505 !important;
  padding-block: clamp(4rem, 8vw, 7rem) !important;
}

.svc-collab-grid .svc-section-title {
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
}

.svc-collab-grid__items {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  margin-top: clamp(2.5rem, 4vw, 4rem) !important;
}

.svc-collab-grid__item {
  position: relative !important;
  gap: 0 !important;
}

.svc-collab-grid__photo {
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #111 !important;
  aspect-ratio: 3/4 !important;
  position: relative !important;
}

.svc-collab-grid__photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  display: block !important;
  transition: transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.svc-collab-grid__item:hover .svc-collab-grid__photo img {
  transform: scale(1.04) !important;
}

.svc-collab-grid__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
  border-radius: 16px;
  z-index: 1;
}

.svc-collab-grid__name {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 1rem 1.2rem !important;
  color: #fff !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(1.1rem, 2vw, 1.6rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  z-index: 2 !important;
  text-align: left !important;
}

/* ══ INFLUENCER: alternanza sfondi + fix stat-video ══════ */

/* 87% → bianco, meno spazio top */
.svc-stat-video {
  background: #fff !important;
  padding-top: clamp(2rem, 3vw, 3rem) !important;
}
.svc-stat-video__num {
  color: #DB005A !important;
  -webkit-text-stroke: 0 !important;
}
.svc-stat-video__desc {
  color: var(--black-80) !important;
}
.svc-stat-video__video {
  box-shadow: 0 16px 48px rgba(0,0,0,0.12) !important;
}

/* intro mercato → tinta chiara */
.svc-intro-market {
  background: #f8f3f6 !important;
}

/* alcune collaborazioni → bianco (override dark precedente) */
.svc-collab-grid {
  background: #fff !important;
}
.svc-collab-grid .svc-section-title {
  color: var(--black) !important;
}

/* smm-row alternante → tinta chiara */
.smm-row--alt {
  background: #f8f3f6 !important;
}

/* ══ INFLUENCER: redesign settori + talent + integrazione ═ */

/* ── I SETTORI: dark, icone in capsule fucsia ─────────── */
.svc-settori {
  background: #0a0a0a !important;
  padding-block: clamp(5rem, 9vw, 8rem) !important;
}
.svc-settori .svc-section-title {
  color: #fff !important;
}
.svc-settori__grid {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: clamp(1.2rem, 2.5vw, 2rem) !important;
  margin-top: clamp(3rem, 5vw, 4.5rem) !important;
}
.svc-settori__item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 20px !important;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) 1rem !important;
  gap: 1.25rem !important;
  transition: background 300ms ease, border-color 300ms ease, transform 300ms ease !important;
  cursor: default !important;
}
.svc-settori__item:hover {
  background: rgba(219,0,90,0.10) !important;
  border-color: rgba(219,0,90,0.35) !important;
  transform: translateY(-4px) !important;
}
.svc-settori__item svg {
  color: #DB005A !important;
  width: 40px !important;
  height: 40px !important;
  stroke-width: 1.5 !important;
}
.svc-settori__item span {
  color: rgba(255,255,255,0.82) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
}

/* ── I TALENT PRONTI: alternanza chiara, foto grande ──── */
.svc-talent-pronti {
  background: #f8f3f6 !important;
  padding-block: clamp(5rem, 9vw, 8rem) !important;
}
.svc-talent-pronti__inner {
  grid-template-columns: 42fr 58fr !important;
  gap: clamp(3rem, 6vw, 7rem) !important;
  align-items: center !important;
}
.svc-talent-pronti__visual {
  border-radius: 24px !important;
  overflow: hidden !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.14) !important;
  aspect-ratio: 3/4 !important;
}
.svc-talent-pronti__visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  border-radius: 0 !important;
}
.svc-talent-pronti__title {
  font-size: clamp(2.2rem, 4vw, 4rem) !important;
  line-height: 0.95 !important;
  margin-bottom: clamp(2rem, 4vw, 3.5rem) !important;
}
.svc-talent-pronti__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.svc-talent-pronti__item {
  border-top: 1px solid rgba(0,0,0,0.1) !important;
  padding: clamp(1.2rem, 2vw, 1.8rem) 0 !important;
  margin-bottom: 0 !important;
}
.svc-talent-pronti__item:last-child {
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
}
.svc-talent-pronti__label {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #DB005A !important;
  margin-bottom: 0.6rem !important;
}

/* ══ AD INTEGRAZIONE — sezione pulita sfondo bianco ══════ */
.svc-integrazione {
  background: #fff !important;
  padding-block: clamp(5rem, 9vw, 8rem) !important;
  overflow: hidden !important;
}
.svc-integrazione__deco {
  opacity: 0.05 !important;
  filter: none !important;
}
.svc-integrazione__header {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
}
.svc-integrazione__header .svc-section-header__eyebrow {
  font-family: var(--font-secondary) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
  margin-bottom: 1rem !important;
  display: block !important;
}
.svc-integrazione__header .svc-section-title {
  font-family: var(--font-primary) !important;
  font-size: clamp(2rem, 5vw, 55px) !important;
  line-height: 1.0 !important;
  color: #111 !important;
  text-transform: uppercase !important;
}
.svc-integrazione__pills {
  gap: 0.75rem !important;
  margin-top: 0 !important;
}
.svc-integrazione__pill {
  background: #fff !important;
  border: 1.5px solid rgba(0,0,0,0.12) !important;
  color: #111 !important;
  border-radius: 999px !important;
  padding: 0.85rem 1.75rem !important;
  font-family: var(--font-secondary) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transition: background 220ms, border-color 220ms, color 220ms !important;
}
.svc-integrazione__pill:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  transform: none !important;
}
.svc-integrazione__pill svg {
  color: var(--primary) !important;
  width: 18px !important;
  height: 18px !important;
}
.svc-integrazione__pill:hover svg {
  color: #fff !important;
}

/* ══ PRODUZIONE CONTENUTI: redesign card creative ═════════ */

/* ── PRODUZIONE FOTO: dark, bento grid ────────────────── */
.svc-prod:has(#prod-foto-title) {
  background: #0a0a0a !important;
}
.svc-prod:has(#prod-foto-title) .svc-prod__title { color: #fff !important; }
.svc-prod:has(#prod-foto-title) .svc-prod__sub   { color: rgba(255,255,255,0.55) !important; }
.svc-prod:has(#prod-foto-title) .svc-prod__kicker{ color: #DB005A !important; }

.svc-prod__grid--foto {
  grid-template-columns: 3fr 2fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: clamp(0.75rem, 1.2vw, 1rem) !important;
  min-height: 480px;
}

/* card 01: alta, occupa 2 righe a sinistra */
.svc-prod__grid--foto .svc-prod__item:nth-child(1) {
  grid-row: 1 / 3 !important;
  background: rgba(219,0,90,0.08) !important;
  border-color: rgba(219,0,90,0.2) !important;
  justify-content: flex-end !important;
  min-height: 320px !important;
  position: relative !important;
  overflow: hidden !important;
}
.svc-prod__grid--foto .svc-prod__item:nth-child(1)::before {
  content: '📷';
  position: absolute;
  top: -0.1em; right: -0.05em;
  font-size: 8rem;
  opacity: 0.07;
  line-height: 1;
  pointer-events: none;
}

/* cards 02 e 03: normali, colonna destra */
.svc-prod__grid--foto .svc-prod__item:nth-child(2),
.svc-prod__grid--foto .svc-prod__item:nth-child(3) {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* card 04: larga, sotto, span full */
.svc-prod__grid--foto .svc-prod__item:nth-child(4) {
  grid-column: 1 / -1 !important;
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.07) !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2rem !important;
}
.svc-prod__grid--foto .svc-prod__item:nth-child(4) .svc-prod__num {
  font-size: clamp(3rem, 6vw, 6rem) !important;
  flex-shrink: 0 !important;
}

/* testo nelle dark cards */
.svc-prod:has(#prod-foto-title) .svc-prod__num  { -webkit-text-stroke-color: rgba(219,0,90,0.7) !important; }
.svc-prod:has(#prod-foto-title) .svc-prod__name { color: #fff !important; }
.svc-prod:has(#prod-foto-title) .svc-prod__text { color: rgba(255,255,255,0.55) !important; }
.svc-prod:has(#prod-foto-title) .svc-prod__item:hover {
  background: rgba(219,0,90,0.12) !important;
  border-color: rgba(219,0,90,0.3) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}

/* ── PRODUZIONE VIDEO: chiaro, card hero + griglia ──────── */
.svc-prod:has(#prod-video-title) {
  background: #f8f3f6 !important;
}

.svc-prod__grid--video {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(0.75rem, 1.2vw, 1rem) !important;
}

/* card 01: wide hero, span 2 col */
.svc-prod__grid--video .svc-prod__item:nth-child(1) {
  grid-column: span 2 !important;
  background: #0a0a0a !important;
  border-color: transparent !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2.5rem !important;
  padding: clamp(2rem, 3vw, 3rem) !important;
  min-height: 180px !important;
  position: relative !important;
  overflow: hidden !important;
}
.svc-prod__grid--video .svc-prod__item:nth-child(1)::after {
  content: '▶';
  position: absolute;
  right: 2rem; top: 50%;
  transform: translateY(-50%);
  font-size: 3.5rem;
  opacity: 0.07;
  pointer-events: none;
}
.svc-prod__grid--video .svc-prod__item:nth-child(1) .svc-prod__num { font-size: clamp(3.5rem, 6vw, 6rem) !important; flex-shrink: 0; -webkit-text-stroke-color: rgba(219,0,90,0.8) !important; }
.svc-prod__grid--video .svc-prod__item:nth-child(1) .svc-prod__name { color: #fff !important; font-size: clamp(1.1rem, 2vw, 1.6rem) !important; }
.svc-prod__grid--video .svc-prod__item:nth-child(1) .svc-prod__text { color: rgba(255,255,255,0.55) !important; }

/* card 02: accent fucsia */
.svc-prod__grid--video .svc-prod__item:nth-child(2) {
  background: #DB005A !important;
  border-color: transparent !important;
}
.svc-prod__grid--video .svc-prod__item:nth-child(2) .svc-prod__num  { -webkit-text-stroke-color: rgba(255,255,255,0.4) !important; }
.svc-prod__grid--video .svc-prod__item:nth-child(2) .svc-prod__name { color: #fff !important; }
.svc-prod__grid--video .svc-prod__item:nth-child(2) .svc-prod__text { color: rgba(255,255,255,0.75) !important; }

/* card 07 (Drone): wide, span 2 col */
.svc-prod__grid--video .svc-prod__item:nth-child(7) {
  grid-column: span 2 !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 2rem !important;
  background: rgba(219,0,90,0.06) !important;
  border-color: rgba(219,0,90,0.15) !important;
}
.svc-prod__grid--video .svc-prod__item:nth-child(7) .svc-prod__num {
  font-size: clamp(3rem, 5vw, 5rem) !important;
  flex-shrink: 0 !important;
}

/* ── PRODUZIONE FOTO: override → sfondo chiaro ─────────── */
.svc-prod:has(#prod-foto-title) {
  background: #fff !important;
}
.svc-prod:has(#prod-foto-title) .svc-prod__title { color: #111 !important; }
.svc-prod:has(#prod-foto-title) .svc-prod__sub   { color: rgba(0,0,0,0.55) !important; }

.svc-prod__grid--foto .svc-prod__item:nth-child(1) {
  background: #f8f3f6 !important;
  border-color: rgba(219,0,90,0.12) !important;
}
.svc-prod__grid--foto .svc-prod__item:nth-child(2),
.svc-prod__grid--foto .svc-prod__item:nth-child(3) {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
}
.svc-prod__grid--foto .svc-prod__item:nth-child(4) {
  background: #f8f3f6 !important;
  border-color: rgba(219,0,90,0.10) !important;
}

.svc-prod:has(#prod-foto-title) .svc-prod__num  { -webkit-text-stroke-color: rgba(219,0,90,0.5) !important; }
.svc-prod:has(#prod-foto-title) .svc-prod__name { color: #111 !important; }
.svc-prod:has(#prod-foto-title) .svc-prod__text { color: rgba(0,0,0,0.55) !important; }
.svc-prod:has(#prod-foto-title) .svc-prod__item:hover {
  background: rgba(219,0,90,0.06) !important;
  border-color: rgba(219,0,90,0.2) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.08) !important;
}

/* card hero video → dark card rimane ma su sfondo chiaro */
.svc-prod__grid--video .svc-prod__item:nth-child(1) {
  background: #111 !important;
}

/* ── card Drone: label group inline, gap ridotto ─────────── */
.svc-prod__item--drone {
  gap: 1rem !important;
}
.svc-prod__label-group {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-shrink: 0;
}
.svc-prod__label-group .svc-prod__num,
.svc-prod__label-group .svc-prod__name {
  display: inline !important;
}

/* ══ PRODUZIONE: colori Video applicati anche a Foto ══════ */

/* Foto → stessi colori Video */
.svc-prod:has(#prod-foto-title) {
  background: #f8f3f6 !important;
}

/* card 01 Foto: dark come card hero Video */
.svc-prod__grid--foto .svc-prod__item:nth-child(1) {
  background: #111 !important;
  border-color: transparent !important;
}
.svc-prod__grid--foto .svc-prod__item:nth-child(1) .svc-prod__num  { -webkit-text-stroke-color: rgba(219,0,90,0.8) !important; }
.svc-prod__grid--foto .svc-prod__item:nth-child(1) .svc-prod__name { color: #fff !important; }
.svc-prod__grid--foto .svc-prod__item:nth-child(1) .svc-prod__text { color: rgba(255,255,255,0.55) !important; }

/* card 02 Foto: fucsia come card 02 Video */
.svc-prod__grid--foto .svc-prod__item:nth-child(2) {
  background: #DB005A !important;
  border-color: transparent !important;
}
.svc-prod__grid--foto .svc-prod__item:nth-child(2) .svc-prod__num  { -webkit-text-stroke-color: rgba(255,255,255,0.4) !important; }
.svc-prod__grid--foto .svc-prod__item:nth-child(2) .svc-prod__name { color: #fff !important; }
.svc-prod__grid--foto .svc-prod__item:nth-child(2) .svc-prod__text { color: rgba(255,255,255,0.75) !important; }

/* card 03 Foto: bianca standard */
.svc-prod__grid--foto .svc-prod__item:nth-child(3) {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
}
.svc-prod__grid--foto .svc-prod__item:nth-child(3) .svc-prod__num  { -webkit-text-stroke-color: rgba(219,0,90,0.5) !important; }
.svc-prod__grid--foto .svc-prod__item:nth-child(3) .svc-prod__name { color: #111 !important; }
.svc-prod__grid--foto .svc-prod__item:nth-child(3) .svc-prod__text { color: rgba(0,0,0,0.55) !important; }

/* card 04 Foto: tinta fucsia leggera come card Drone Video */
.svc-prod__grid--foto .svc-prod__item:nth-child(4) {
  background: rgba(219,0,90,0.06) !important;
  border-color: rgba(219,0,90,0.15) !important;
}
.svc-prod__grid--foto .svc-prod__item:nth-child(4) .svc-prod__num  { -webkit-text-stroke-color: rgba(219,0,90,0.5) !important; }
.svc-prod__grid--foto .svc-prod__item:nth-child(4) .svc-prod__name { color: #111 !important; }
.svc-prod__grid--foto .svc-prod__item:nth-child(4) .svc-prod__text { color: rgba(0,0,0,0.55) !important; }

/* hover uniforme su Foto */
.svc-prod:has(#prod-foto-title) .svc-prod__item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
}

/* ══ PRODUZIONE CONTENUTI: fix font colori + drone + visual ═ */

/* ── Drone: num a sinistra, nome+testo inline sulla destra ── */
.svc-prod__item--drone {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1.2rem !important;
}
.svc-prod__item--drone .svc-prod__num {
  font-size: clamp(2rem, 3vw, 3rem) !important;
  flex-shrink: 0 !important;
  line-height: 1.1 !important;
}
.svc-prod__drone-content {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0 0.6rem !important;
}
.svc-prod__drone-content .svc-prod__name {
  display: inline !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.svc-prod__drone-content .svc-prod__text {
  display: inline !important;
  margin: 0 !important;
}

/* ── Font colori Foto = Video: card 03/04 nome → #111 ─────── */
.svc-prod:has(#prod-foto-title) .svc-prod__item:nth-child(3) .svc-prod__name,
.svc-prod:has(#prod-foto-title) .svc-prod__item:nth-child(4) .svc-prod__name { color: #111 !important; }

.svc-prod:has(#prod-video-title) .svc-prod__item:nth-child(3) .svc-prod__name,
.svc-prod:has(#prod-video-title) .svc-prod__item:nth-child(4) .svc-prod__name,
.svc-prod:has(#prod-video-title) .svc-prod__item:nth-child(6) .svc-prod__name { color: #111 !important; }

/* ── Card con immagine (card 05 Video) ─────────────────────── */
.svc-prod__item--visual {
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  min-height: 220px !important;
  background: #111 !important;
  border-color: transparent !important;
}
.svc-prod__visual-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  transition: transform 600ms ease !important;
}
.svc-prod__item--visual:hover .svc-prod__visual-img {
  transform: scale(1.05) !important;
}
.svc-prod__visual-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: clamp(1.2rem, 2vw, 1.8rem) !important;
  gap: 0.4rem !important;
  z-index: 1 !important;
}
.svc-prod__item--visual .svc-prod__num  { -webkit-text-stroke-color: rgba(219,0,90,0.8) !important; font-size: clamp(1.2rem, 2vw, 1.8rem) !important; }
.svc-prod__item--visual .svc-prod__name { color: #fff !important; font-size: clamp(0.9rem, 1.3vw, 1.1rem) !important; }
.svc-prod__item--visual .svc-prod__text { color: rgba(255,255,255,0.7) !important; font-size: 0.75rem !important; }

/* ══ PRODUZIONE: layout unificato (--cards) ════════════════════
   Sovrascrive tutti i blocchi precedenti foto/video.
   Entrambe le sezioni: stesso sfondo, stessa griglia, stessi colori.
═══════════════════════════════════════════════════════════════ */

/* sezione */
.svc-prod:has(#prod-foto-title),
.svc-prod:has(#prod-video-title) {
  background: #f8f3f6 !important;
}
.svc-prod:has(#prod-foto-title) .svc-prod__title,
.svc-prod:has(#prod-video-title) .svc-prod__title { color: #111 !important; }
.svc-prod:has(#prod-foto-title) .svc-prod__sub,
.svc-prod:has(#prod-video-title) .svc-prod__sub   { color: rgba(0,0,0,0.55) !important; }
.svc-prod:has(#prod-foto-title) .svc-prod__kicker,
.svc-prod:has(#prod-video-title) .svc-prod__kicker { color: #DB005A !important; }

/* griglia 3 colonne */
.svc-prod__grid--cards {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: clamp(0.75rem, 1.2vw, 1rem) !important;
}

/* card base reset */
.svc-prod__grid--cards .svc-prod__item {
  background: #fff !important;
  border-color: rgba(0,0,0,0.08) !important;
}
.svc-prod__grid--cards .svc-prod__item .svc-prod__num  { -webkit-text-stroke-color: rgba(219,0,90,0.5) !important; }
.svc-prod__grid--cards .svc-prod__item .svc-prod__name { color: #111 !important; }
.svc-prod__grid--cards .svc-prod__item .svc-prod__text { color: rgba(0,0,0,0.55) !important; }
.svc-prod__grid--cards .svc-prod__item:hover {
  background: rgba(219,0,90,0.06) !important;
  border-color: rgba(219,0,90,0.2) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10) !important;
}

/* card 01: dark hero, span 2 col */
.svc-prod__grid--cards .svc-prod__item:nth-child(1) {
  grid-column: span 2 !important;
  background: #111 !important;
  border-color: transparent !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 1.5rem !important;
}
.svc-prod__grid--cards .svc-prod__item:nth-child(1) .svc-prod__num  { font-size: clamp(3.5rem, 6vw, 6rem) !important; flex-shrink: 0 !important; -webkit-text-stroke-color: rgba(219,0,90,0.8) !important; }
.svc-prod__grid--cards .svc-prod__item:nth-child(1) .svc-prod__name { color: #fff !important; font-size: clamp(1.1rem, 2vw, 1.6rem) !important; }
.svc-prod__grid--cards .svc-prod__item:nth-child(1) .svc-prod__text { color: rgba(255,255,255,0.55) !important; }
.svc-prod__grid--cards .svc-prod__item:nth-child(1):hover {
  background: #1a1a1a !important;
  transform: translateY(-4px) !important;
}

/* card 02: fucsia */
.svc-prod__grid--cards .svc-prod__item:nth-child(2) {
  background: #DB005A !important;
  border-color: transparent !important;
}
.svc-prod__grid--cards .svc-prod__item:nth-child(2) .svc-prod__num  { -webkit-text-stroke-color: rgba(255,255,255,0.4) !important; }
.svc-prod__grid--cards .svc-prod__item:nth-child(2) .svc-prod__name { color: #fff !important; }
.svc-prod__grid--cards .svc-prod__item:nth-child(2) .svc-prod__text { color: rgba(255,255,255,0.75) !important; }
.svc-prod__grid--cards .svc-prod__item:nth-child(2):hover {
  background: #b5004a !important;
  transform: translateY(-4px) !important;
}

/* card 07 (Drone/Aerea): span 2, orizzontale */
.svc-prod__grid--cards .svc-prod__item:nth-child(7) {
  grid-column: span 2 !important;
  background: rgba(219,0,90,0.06) !important;
  border-color: rgba(219,0,90,0.15) !important;
}

/* responsive */
@media (max-width: 900px) {
  .svc-prod__grid--cards { grid-template-columns: repeat(2, 1fr) !important; }
  .svc-prod__grid--cards .svc-prod__item:nth-child(1),
  .svc-prod__grid--cards .svc-prod__item:nth-child(7) { grid-column: span 2 !important; }
}
@media (max-width: 560px) {
  .svc-prod__grid--cards { grid-template-columns: 1fr !important; }
  .svc-prod__grid--cards .svc-prod__item:nth-child(1),
  .svc-prod__grid--cards .svc-prod__item:nth-child(7) { grid-column: span 1 !important; }
}

/* ══ ACCORDION PRODUZIONE (svc-acc) ════════════════════════════ */

.svc-prod--acc {
  background: #f8f3f6 !important;
  padding-block: clamp(4rem, 8vw, 8rem);
}
.svc-prod--acc .svc-prod__title { color: #111 !important; }
.svc-prod--acc .svc-prod__sub   { color: rgba(0,0,0,0.55) !important; }
.svc-prod--acc .svc-prod__kicker{ color: #DB005A !important; }
.svc-prod--acc:nth-of-type(even) { background: #fff !important; }

.svc-acc {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1.5px solid rgba(0,0,0,0.10);
}

.svc-acc__item {
  border-bottom: 1.5px solid rgba(0,0,0,0.10);
  overflow: hidden;
}

.svc-acc__trigger {
  all: unset;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  width: 100%;
  padding: clamp(1.2rem, 2vw, 1.8rem) 0;
  cursor: pointer;
  transition: color 250ms;
}

.svc-acc__num {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(219,0,90,0.4);
  flex-shrink: 0;
  width: clamp(3rem, 5vw, 4.5rem);
  transition: -webkit-text-stroke-color 250ms;
  line-height: 1;
}

.svc-acc__name {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 2.8rem);
  text-transform: uppercase;
  color: #111;
  letter-spacing: -0.01em;
  flex: 1;
  transition: color 250ms;
  line-height: 1.1;
}

.svc-acc__icon {
  flex-shrink: 0;
  width: clamp(2rem, 3vw, 2.8rem);
  height: clamp(2rem, 3vw, 2.8rem);
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 250ms, border-color 250ms, transform 250ms;
}
.svc-acc__icon::before,
.svc-acc__icon::after {
  content: '';
  position: absolute;
  background: #111;
  transition: background 250ms, transform 300ms, opacity 250ms;
}
.svc-acc__icon::before { width: 40%; height: 1.5px; }
.svc-acc__icon::after  { width: 1.5px; height: 40%; }

/* hover */
.svc-acc__trigger:hover .svc-acc__num  { -webkit-text-stroke-color: #DB005A; }
.svc-acc__trigger:hover .svc-acc__name { color: #DB005A; }
.svc-acc__trigger:hover .svc-acc__icon {
  background: #DB005A;
  border-color: #DB005A;
}
.svc-acc__trigger:hover .svc-acc__icon::before,
.svc-acc__trigger:hover .svc-acc__icon::after { background: #fff; }

/* open state */
.svc-acc__item.is-open .svc-acc__num  { -webkit-text-stroke-color: rgba(0,0,0,0.15); }
.svc-acc__item.is-open .svc-acc__name { color: #DB005A; }
.svc-acc__item.is-open .svc-acc__icon {
  background: #DB005A;
  border-color: #DB005A;
  transform: rotate(45deg);
}
.svc-acc__item.is-open .svc-acc__icon::before,
.svc-acc__item.is-open .svc-acc__icon::after { background: #fff; }

/* body collapse */
.svc-acc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(0.4,0,0.2,1);
}
.svc-acc__item.is-open .svc-acc__body {
  grid-template-rows: 1fr;
}
.svc-acc__body > * { overflow: hidden; }

.svc-acc__text {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color: rgba(0,0,0,0.6);
  line-height: 1.65;
  padding-bottom: clamp(1.2rem, 2vw, 1.8rem);
  padding-left: calc(clamp(3rem, 5vw, 4.5rem) + clamp(1rem, 2.5vw, 2rem));
  max-width: 60ch;
}

/* ══ ICON GRID — Produzione Foto/Video ═════════════════════════ */

.svc-icons-section {
  background: #f8f3f6 !important;
  padding-block: clamp(4rem, 8vw, 8rem);
}
.svc-icons-section--alt {
  background: #fff !important;
}
.svc-icons-section .svc-prod__title  { color: #111 !important; }
.svc-icons-section .svc-prod__sub    { color: rgba(0,0,0,0.55) !important; }
.svc-icons-section .svc-prod__kicker { color: #DB005A !important; }

/* grid */
.svc-icons-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem);
  margin-top: clamp(2.5rem, 4vw, 4rem);
}
@media (max-width: 900px) { .svc-icons-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .svc-icons-grid { grid-template-columns: repeat(2, 1fr); } }

/* card */
.svc-icon-card { display: flex; justify-content: center; }

.svc-icon-card__btn {
  all: unset;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  cursor: pointer;
  width: 100%;
}

/* badge shapes */
.svc-icon-card__badge {
  width: clamp(90px, 14vw, 140px);
  height: clamp(90px, 14vw, 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 350ms cubic-bezier(0.34,1.56,0.64,1);
  flex-shrink: 0;
}
.svc-icon-card__badge svg {
  width: 46%;
  height: 46%;
}

/* circle */
.svc-icon-card__badge--circle { border-radius: 50%; }

/* diamond */
.svc-icon-card__badge--diamond {
  border-radius: 18%;
  transform: rotate(45deg);
}
.svc-icon-card__badge--diamond svg { transform: rotate(-45deg); }

/* blob */
.svc-icon-card__badge--blob {
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
}

/* scallop — simulated with high border-radius */
.svc-icon-card__badge--scallop {
  border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
}

/* colors */
.svc-icon-card__badge--pink  { background: #DB005A; }
.svc-icon-card__badge--dark  { background: #111; }
.svc-icon-card__badge--light { background: #f0eaf4; border: 2px solid rgba(219,0,90,0.15); }

/* title — nascosto, appare in hover */
.svc-icon-card__title {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #111;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 250ms, transform 250ms;
  line-height: 1.2;
}

/* desc — nascosto, appare al click */
.svc-icon-card__desc {
  font-size: clamp(0.75rem, 1vw, 0.88rem);
  color: rgba(0,0,0,0.55);
  line-height: 1.55;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 350ms ease, opacity 300ms ease;
}

/* hover: mostra titolo + anima badge */
.svc-icon-card__btn:hover .svc-icon-card__badge,
.svc-icon-card.is-open .svc-icon-card__badge {
  transform: scale(1.1);
}
.svc-icon-card__badge--diamond:hover,
.svc-icon-card.is-open .svc-icon-card__badge--diamond {
  transform: rotate(45deg) scale(1.1);
}

.svc-icon-card__btn:hover .svc-icon-card__title,
.svc-icon-card.is-open .svc-icon-card__title {
  opacity: 1;
  transform: translateY(0);
}

/* open: mostra desc */
.svc-icon-card.is-open .svc-icon-card__desc {
  max-height: 120px;
  opacity: 1;
}
/* badge spin on open */
.svc-icon-card.is-open .svc-icon-card__badge--circle {
  animation: badgePop 400ms cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes badgePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18) rotate(8deg); }
  100% { transform: scale(1.1); }
}

/* ══ ICON GRID — fix hover + centering ═════════════════════════ */

/* centra la griglia */
.svc-icons-grid {
  justify-items: center !important;
}

/* badge: default size, hover → rimpicciolisce */
.svc-icon-card__badge {
  transition: transform 350ms cubic-bezier(0.34,1.56,0.64,1), width 350ms ease, height 350ms ease !important;
}

/* al hover: icona si riduce */
.svc-icon-card__btn:hover .svc-icon-card__badge,
.svc-icon-card.is-open .svc-icon-card__badge {
  width: clamp(60px, 9vw, 90px) !important;
  height: clamp(60px, 9vw, 90px) !important;
  transform: scale(1) !important;
}
/* fix: il diamond ruota comunque */
.svc-icon-card__btn:hover .svc-icon-card__badge--diamond,
.svc-icon-card.is-open .svc-icon-card__badge--diamond {
  transform: rotate(45deg) !important;
}

/* titolo: più grande e leggibile in hover */
.svc-icon-card__title {
  font-size: clamp(0.85rem, 1.3vw, 1.05rem) !important;
  min-height: 2.4em;
}
.svc-icon-card__btn:hover .svc-icon-card__title,
.svc-icon-card.is-open .svc-icon-card__title {
  opacity: 1 !important;
  transform: translateY(0) !important;
  color: #111 !important;
}

/* desc leggibile */
.svc-icon-card__desc {
  font-size: clamp(0.78rem, 1vw, 0.9rem) !important;
  text-align: center !important;
}

/* ══ ICON GRID — hover rotation + titoli più grandi ═══════════ */

.svc-icon-card__btn:hover .svc-icon-card__badge--circle,
.svc-icon-card.is-open .svc-icon-card__badge--circle {
  transform: scale(0.72) rotate(15deg) !important;
}
.svc-icon-card__btn:hover .svc-icon-card__badge--blob,
.svc-icon-card.is-open .svc-icon-card__badge--blob {
  transform: scale(0.72) rotate(-12deg) !important;
}
.svc-icon-card__btn:hover .svc-icon-card__badge--scallop,
.svc-icon-card.is-open .svc-icon-card__badge--scallop {
  transform: scale(0.72) rotate(10deg) !important;
}
/* diamond: ruota ulteriormente sull'asse già inclinato di 45° */
.svc-icon-card__btn:hover .svc-icon-card__badge--diamond,
.svc-icon-card.is-open .svc-icon-card__badge--diamond {
  transform: rotate(75deg) scale(0.72) !important;
}
.svc-icon-card__btn:hover .svc-icon-card__badge--diamond svg,
.svc-icon-card.is-open .svc-icon-card__badge--diamond svg {
  transform: rotate(-75deg) !important;
}

/* titoli: grandi, bold, sempre visibili al hover */
.svc-icon-card__title {
  font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
  color: #111 !important;
}
.svc-icon-card__btn:hover .svc-icon-card__title,
.svc-icon-card.is-open .svc-icon-card__title {
  color: #DB005A !important;
}

/* titoli icon card — ancora più grandi */
.svc-icon-card__title {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important;
  font-weight: 900 !important;
}

/* titoli icon card — font size più grande, peso ridotto */
.svc-icon-card__title {
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ══ AI WORKFLOW — redesign timeline ═══════════════════════════ */

.svc-ai-workflow__head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(3rem, 5vw, 5rem);
}
.svc-ai-workflow__title {
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.5rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0.4rem 0 0.8rem;
}
.svc-ai-workflow__sub {
  color: rgba(0,0,0,0.5);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
}

.svc-ai-workflow__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}
@media (max-width: 720px) {
  .svc-ai-workflow__grid { grid-template-columns: 1fr; }
}

/* card */
.svc-ai-workflow__card {
  position: relative;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  padding: clamp(2rem, 3.5vw, 3rem);
  overflow: hidden;
  background: #fff;
  transition: box-shadow 300ms, transform 300ms;
}
.svc-ai-workflow__card:hover {
  box-shadow: 0 24px 64px rgba(0,0,0,0.09);
  transform: translateY(-4px);
}

/* grande numero decorativo */
.svc-ai-workflow__card-deco {
  position: absolute;
  top: -0.2em;
  right: 0.1em;
  font-family: var(--font-primary);
  font-weight: 900;
  font-size: clamp(7rem, 12vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(219,0,90,0.08);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}

/* icona + titolo header */
.svc-ai-workflow__card-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.8rem, 3vw, 2.5rem);
}
.svc-ai-workflow__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #DB005A;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.svc-ai-workflow__icon-wrap svg {
  width: 24px;
  height: 24px;
}
.svc-ai-workflow__card-title {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0;
}

/* timeline */
.svc-ai-workflow__timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.svc-ai-workflow__tl-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
  align-items: start;
}
.svc-ai-workflow__tl-step--last {
  grid-template-rows: auto;
}

/* cerchio numerato */
.svc-ai-workflow__tl-marker {
  grid-column: 1;
  grid-row: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(219,0,90,0.25);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 0.8rem;
  color: #DB005A;
  transition: background 250ms, border-color 250ms, color 250ms;
  z-index: 1;
}
.svc-ai-workflow__card:hover .svc-ai-workflow__tl-marker {
  background: rgba(219,0,90,0.06);
  border-color: #DB005A;
}
.svc-ai-workflow__tl-marker--final {
  background: #DB005A;
  border-color: #DB005A;
  color: #fff;
}

/* linea connettore verticale */
.svc-ai-workflow__tl-line {
  grid-column: 1;
  grid-row: 2;
  width: 2px;
  min-height: 24px;
  background: linear-gradient(to bottom, rgba(219,0,90,0.2), rgba(219,0,90,0.05));
  margin: 4px auto 0;
  border-radius: 1px;
}

/* testo step */
.svc-ai-workflow__tl-text {
  grid-column: 2;
  grid-row: 1 / 3;
  margin: 0;
  padding: 0.45rem 0 1.2rem;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  color: rgba(0,0,0,0.7);
  line-height: 1.45;
  align-self: start;
}

/* ── AI workflow fixes ─────────────────────────────────────── */

/* numeri timeline: più grandi, peso ridotto */
.svc-ai-workflow__tl-marker {
  font-size: 1rem !important;
  font-weight: 400 !important;
}

/* numeri decorativi card: non tagliati */
.svc-ai-workflow__card {
  overflow: visible !important;
}
.svc-ai-workflow__card-deco {
  top: -0.15em !important;
  right: 0.4em !important;
  font-size: clamp(6rem, 10vw, 9rem) !important;
  -webkit-text-stroke: 1.5px rgba(219,0,90,0.12) !important;
}

/* ── AI workflow: consegna finale = stessi altri step + numeri più bassi ── */

/* l'ultimo step ha la stessa tipografia degli altri: solo senza spazio sotto */
.svc-ai-workflow__tl-step--last .svc-ai-workflow__tl-text { padding-bottom: 0 !important; }
.svc-ai-workflow__tl-marker--final {
  background: #fff !important;
  border-color: rgba(219,0,90,0.25) !important;
  color: #DB005A !important;
}
.svc-ai-workflow__card:hover .svc-ai-workflow__tl-marker--final {
  background: rgba(219,0,90,0.06) !important;
  border-color: #DB005A !important;
  color: #DB005A !important;
}

/* numeri 01/02: abbassati */
.svc-ai-workflow__card-deco {
  top: 1.5rem !important;
}

/* rimuovi linee connettore timeline */
.svc-ai-workflow__tl-line { display: none !important; }
.svc-ai-workflow__tl-step { grid-template-rows: auto !important; }
.svc-ai-workflow__tl-text { grid-row: 1 !important; }

/* centra numeri nei cerchi + rimuovi linea sotto titoli card */
.svc-ai-workflow__tl-marker {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
}
.svc-ai-workflow__tl-marker span {
  display: block;
  line-height: 1;
}
.svc-ai-workflow__card-head {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* aumenta kerning numeri decorativi 01/02 */
.svc-ai-workflow__card-deco {
  letter-spacing: 0.15em !important;
}

.svc-ai-workflow__card-deco { letter-spacing: 0.06em !important; }

/* ── Font globale + bottoni ─────────────────────────────────── */
body { font-family: var(--font-secondary) !important; }

.btn, [class*="btn--"], button.btn,
.svc-hero__submit, .nav__joinus,
.svc-magic__pill, .svc-caffe form button,
.svc-ai-cta {
  border-radius: 6px !important;
}

/* tutti i bottoni: arrotondati */
.btn, [class*="btn--"],
.svc-hero__submit, .nav__joinus, .nav__joinus--outline,
.svc-magic__pill, .svc-acc__icon,
.svc-caffe form button, .svc-ai-cta,
input[type="submit"], button[type="submit"] {
  border-radius: 999px !important;
}

/* "ALCUNI AMICI SODDISFATTI..." su due righe, tutte le pagine.
   Il corpo lo fissa la misura condivisa dei titoli di sezione:
   qui restavano tre font-size sovrapposti (1.4rem, 1.1rem, 55px)
   che si annullavano a vicenda e non servivano piu' a nessuno. */
.svc-clients__title {
  line-height: 1.3 !important;
  letter-spacing: 0.01em !important;
}

/* ── SMM statement: font size ridotta */
.smm-hl--solid,
.smm-hl--outline { font-size: clamp(1.8rem, 4.5vw, 5rem) !important; }
.smm-hl--accent  { font-size: clamp(2.2rem, 5.5vw, 6.5rem) !important; }
.smm-hl--small   { font-size: clamp(1.1rem, 2.5vw, 3rem) !important; }

.svc-magic__title { font-size: 55px !important; }

/* ── influencer: Instagram watermark — stesso stile degli altri titoli */
.svc-intro-market__big {
  color: rgba(0,0,0,0.07) !important;
  -webkit-text-stroke: 0 !important;
  font-size: 55px !important;
}

/* ── influencer: intro-market — testo sinistra, immagine grande destra */
.svc-intro-market__inner {
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
}
.svc-intro-market__photo {
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
.svc-intro-market__photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  border-radius: 16px !important;
}

/* ── 87%: line-height per non sovrapporre il testo sotto */
.svc-stat-video__num {
  line-height: 1.1 !important;
}


/* ── influencer: integrazione — 5px extra margin-top */
.svc-integrazione {
  margin-top: 5px !important;
}

/* ══ GOOGLE ADS — process section fuchsia + card contrast ═ */
.svc-process__grid {
  align-items: stretch !important;
}
.svc-process__card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border-color: rgba(255,255,255,0.2) !important;
}
.svc-process__card-text {
  flex: 1 !important;
  color: var(--black-75) !important;
}
/* Sezione sfondo fucsia */
.svc-process {
  background: var(--primary, #DB005A) !important;
}
.svc-process__title {
  color: #fff !important;
}
/* Icone: colore primario (fucsia) su card bianche */
.svc-process__icon {
  color: var(--primary, #DB005A) !important;
}
.svc-process__icon svg * {
  fill: none;
  stroke: currentColor;
}
.svc-process__icon svg circle[fill="currentColor"],
.svc-process__icon svg rect[fill="currentColor"],
.svc-process__icon svg polyline[fill="currentColor"] {
  fill: currentColor !important;
  stroke: none !important;
}
/* Titoli card: colore primario su sfondo bianco */
.svc-process__card-title {
  font-size: clamp(0.85rem, 1.4vw, 1.05rem) !important;
  line-height: 1.3 !important;
  color: var(--primary, #DB005A) !important;
}

/* ══ INFLUENCER MARKETING — imk-intro ═════════════════════ */
.imk-intro {
  background: #fff;
  padding-block: clamp(5rem, 10vw, 8rem);
}

.imk-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: stretch;
}

.imk-intro__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.imk-intro__kicker {
  font-family: var(--font-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0;
}

.imk-intro__title {
  font-family: var(--font-primary);
  font-size: clamp(2.2rem, 5vw, 55px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
}

.imk-intro__text p {
  font-family: var(--font-secondary);
  font-size: 16px;
  line-height: 1.75;
  color: var(--black-60);
  margin: 0;
}

.imk-intro__tail {
  display: block;
  width: clamp(480px, 65vw, 800px);
  margin-top: auto;
  margin-left: calc(-1 * clamp(8rem, 20vw, 22rem));
  transform: scaleX(-1) scaleY(-1);
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}

.imk-intro__photo {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border-radius: 16px;
  overflow: hidden;
}

.imk-intro__photo img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 16px;
}

/* ══ INFLUENCER MARKETING — imk-services ══════════════════ */
.imk-services {
  background: #fff;
  padding-block: clamp(4rem, 8vw, 7rem);
}

.imk-row {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(0,0,0,0.08);
}
.imk-row:first-child { border-top: none; padding-top: 0; }
.imk-row:last-child  { padding-bottom: 0; }

.imk-row--flip .imk-row__card { order: 2; }
.imk-row--flip .imk-row__copy { order: 1; }

/* Card numerata a sinistra */
.imk-row__card {
  position: relative;
  border-radius: 20px;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  overflow: hidden;
}

.imk-row__card--pink {
  background:
    radial-gradient(ellipse 80% 60% at 10% 10%, rgba(219,0,90,0.35) 0%, transparent 65%),
    #0a0a0a;
}

.imk-row__card--dark {
  background:
    radial-gradient(ellipse 70% 70% at 90% 90%, rgba(219,0,90,0.25) 0%, transparent 60%),
    #0a0a0a;
}

.imk-row__num {
  position: absolute;
  top: -0.15em;
  left: 0.05em;
  font-family: var(--font-primary);
  font-size: clamp(7rem, 14vw, 12rem);
  line-height: 1;
  color: rgba(255,255,255,0.06);
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}

.imk-row__label {
  font-family: var(--font-primary);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

/* Contenuto testuale */
.imk-row__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.imk-row__title {
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--black);
}

.imk-row__copy p {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--black-60);
  margin: 0;
}

.imk-row__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.imk-row__list li {
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  color: var(--black-75);
  padding-left: 1.2em;
  position: relative;
}
.imk-row__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════
   SITE FOOTER — new unified footer
═══════════════════════════════════════════════════════ */

/* ── Partners bar ────────────────────────────────────── */
.footer-partners {
  background: #0e0e0e;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 6vw, 7rem);
}
.footer-partners__inner {
  display: flex;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-partners__group {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-partners__label {
  font-family: var(--font-secondary);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  flex-shrink: 0;
}
.footer-partners__divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.footer-partners__logos {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.footer-partners__logos img {
  height: 32px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(1) invert(1) brightness(1.5);
  transition: opacity 220ms, filter 220ms;
}
.footer-partners__logos img:hover {
  opacity: 1;
  filter: grayscale(0) brightness(1.2);
}
/* Google badge is taller */
.footer-partners__logos img.fp-badge { height: 44px; max-width: 160px; }

/* ═══════════════════════════════════════════════════════
   PAGE FAQ — sezione accordion inline
═══════════════════════════════════════════════════════ */
.page-faq {
  padding-block: clamp(4rem, 8vw, 6rem);
  background: #ffffff;
}
.page-faq--dark {
  background: #080808;
}
.page-faq--dark .page-faq__list {
  border-top-color: rgba(255,255,255,0.12);
}
.page-faq--dark .page-faq__item {
  border-bottom-color: rgba(255,255,255,0.12);
}
.page-faq--dark .page-faq__question {
  color: #fff;
}
.page-faq--dark .page-faq__answer-inner {
  color: rgba(255,255,255,0.50);
}
.page-faq__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.page-faq__title {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 8vw, 104px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--primary);
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.page-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(0,0,0,0.10);
}
.page-faq__item {
  border-bottom: 1px solid rgba(0,0,0,0.10);
}
.page-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.25rem 0;
  font-family: var(--font-secondary);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 600;
  color: #080808;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  text-align: left;
}
.page-faq__eye {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(219,0,90,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  position: relative;
}
.page-faq__item:hover .page-faq__eye { border-color: rgba(219,0,90,0.5); transform: scale(1.1); }
.page-faq__item.open .page-faq__eye  { background: var(--primary); border-color: var(--primary); color: #fff; transform: scale(1.1); }
.page-faq__eye svg {
  width: 22px; height: 22px;
  position: absolute;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(.34,1.56,.64,1);
}
.page-faq__eye .eye-open   { opacity: 0; transform: translateY(4px) scale(0.6); }
.page-faq__eye .eye-closed { opacity: 1; transform: translateY(0) scale(1); }
.page-faq__item.open .page-faq__eye .eye-open   { opacity: 1; transform: translateY(0) scale(1); }
.page-faq__item.open .page-faq__eye .eye-closed { opacity: 0; transform: translateY(-4px) scale(0.6); }
.page-faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.page-faq__item.open .page-faq__answer {
  grid-template-rows: 1fr;
}
.page-faq__answer-inner {
  overflow: hidden;
  min-height: 0;
  font-family: var(--font-secondary);
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(0,0,0,0.60);
  padding-bottom: 0;
  transition: padding-bottom 0.32s cubic-bezier(.4,0,.2,1);
}
.page-faq__item.open .page-faq__answer-inner {
  padding-bottom: 1.25rem;
}

/* ── Main footer ─────────────────────────────────────── */
.site-footer {
  background: #0e0e0e;
  color: rgba(255,255,255,0.55);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 6vw, 7rem) clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(255,255,255,0.04);
  position: relative;
  z-index: 201;
  overflow: hidden;
}
.sf-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-size: 22vw;
  line-height: 1;
  color: rgba(255,255,255,0.03);
  letter-spacing: -0.03em;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
  overflow: hidden;
}
.sf-inner {
  position: relative;
  z-index: 1;
}
.sf-cols {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 0.9fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  align-items: start;
}
.sf-logo {
  display: inline-block;
  position: static !important;
  transform: none !important;
}
.sf-logo img {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0) saturate(100%) invert(14%) sepia(97%) saturate(5787%) hue-rotate(325deg) brightness(103%);
}
.sf-tagline {
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.28);
  margin-top: 1.25rem;
  line-height: 1.6;
  font-style: italic;
}
.sf-col__title {
  font-family: var(--font-secondary);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  margin-bottom: 1.1rem;
}
.sf-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.sf-links a {
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.42);
  text-decoration: none;
  transition: color 180ms;
  width: fit-content;
}
.sf-links a:hover { color: #fff; }
.sf-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
.sf-contact__block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sf-contact__block strong {
  font-family: var(--font-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
}
.sf-contact__label {
  font-family: var(--font-secondary);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
}
.sf-contact__block span:last-child {
  font-family: var(--font-secondary);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.6;
}
.sf-social {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.sf-social a {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: background 220ms, border-color 220ms, color 220ms, transform 220ms;
}
.sf-social a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}
.sf-social svg { width: 16px; height: 16px; }
.sf-legal {
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.sf-legal__links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.sf-legal__links a {
  font-family: var(--font-secondary);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.32);
  text-decoration: none;
  font-style: italic;
  transition: color 180ms;
}
.sf-legal__links a:hover { color: rgba(255,255,255,0.7); }
.sf-legal__sep {
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,0.15);
}
.sf-legal__copy {
  font-family: var(--font-secondary);
  font-size: 0.78rem;
  color: var(--primary);
}
@media (max-width: 1024px) {
  .sf-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sf-cols { grid-template-columns: 1fr; }
  .footer-partners__inner { flex-direction: column; align-items: flex-start; }
  .sf-legal { flex-direction: column; align-items: flex-start; }
}


/* ── svc-caffe: variante sfondo fucsia ── */
.svc-caffe--fuchsia {
  background: var(--primary, #DB005A) !important;
}
.svc-caffe--fuchsia .svc-caffe__title {
  color: #fff !important;
}
.svc-caffe--fuchsia .svc-caffe__sub {
  color: rgba(255,255,255,0.80) !important;
}
.svc-caffe--fuchsia .svc-caffe__field {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}
.svc-caffe--fuchsia .svc-caffe__field::placeholder {
  color: rgba(255,255,255,0.60) !important;
}
.svc-caffe--fuchsia .svc-caffe__field:focus {
  background: rgba(255,255,255,0.25) !important;
  border-color: #fff !important;
}
.svc-caffe--fuchsia .svc-caffe__privacy {
  color: rgba(255,255,255,0.85) !important;
}
.svc-caffe--fuchsia .svc-caffe__privacy a {
  color: #fff !important;
  text-decoration: underline;
}

/* ── btn outline bianco (su sfondi colorati) ── */
.btn--outline-white {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  padding-block: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background 0.2s, color 0.2s;
}
.btn--outline-white:hover {
  background: #fff !important;
  color: var(--primary, #DB005A) !important;
}

/* ── svc-hero: video background variant ── */
.svc-hero--video-bg {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}
.svc-hero__video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.svc-hero__video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* 16:9 */
  height: 100%;
  min-width: 100%;
  min-height: 56.25vw; /* 16:9 */
  transform: translate(-50%, -50%);
  border: 0;
}
.svc-hero__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0,0,0,0.65) 0%,
    rgba(219,0,90,0.35) 100%
  );
}
.svc-hero--video-bg .svc-hero__inner--full {
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr;
  max-width: 680px;
}
.svc-hero--video-bg .svc-hero__kicker,
.svc-hero--video-bg .svc-hero__title,
.svc-hero--video-bg .svc-hero__tagline,
.svc-hero--video-bg .svc-hero__sub {
  color: #fff !important;
}
.svc-hero--video-bg .svc-hero__platforms img {
  filter: brightness(0) invert(1);
}
.svc-hero--video-bg .svc-hero__field {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}
.svc-hero--video-bg .svc-hero__field::placeholder {
  color: rgba(255,255,255,0.55) !important;
}
.svc-hero--video-bg .svc-hero__field:focus {
  background: rgba(255,255,255,0.20) !important;
  border-color: #fff !important;
}
.svc-hero--video-bg .svc-hero__privacy {
  color: rgba(255,255,255,0.80) !important;
}
.svc-hero--video-bg .svc-hero__privacy a {
  color: #fff !important;
}

/* ── svc-hero: video YouTube nella colonna destra ── */
.svc-hero__video-wrap--yt {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
}
.svc-hero__video-wrap--yt iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Shorts è 9:16 — adatta proporzioni verticali */
  width: 100%;
  height: 177.78%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* ── svc-hero: MP4 video background ── */
.svc-hero--videobg {
  position: relative;
  overflow: hidden;
}
.svc-hero__bgvideo,
.svc-hero__bgimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}
.svc-hero__bgvideo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(0,0,0,0.72) 0%,
    rgba(219,0,90,0.25) 100%
  );
  z-index: 1;
}
.svc-hero--videobg .svc-hero__inner {
  position: relative;
  z-index: 2;
  display: grid !important;
  /* Colonne come nel riferimento (662/490 su 1320): il form aveva
     la stessa larghezza ma galleggiava in una colonna da 651px,
     con 200px di vuoto accanto, e accanto al titolo sembrava
     minuto. Stretta la colonna, il riquadro la riempie. */
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  max-width: 100%;
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
}
.svc-hero--videobg .svc-hero__left {
  width: 100%;
}
/* card form destra hero servizi */
.svc-hero--videobg .svc-hero__right {
  display: flex;
  flex-direction: column;
  align-self: center;
  padding-right: clamp(1.5rem, 4vw, 3rem);
}
/* ═══════════════════════════════════════════════════════════════
   FORM IN HERO — misure allineate al riferimento
   (estroaziendestrutturate.netlify.app, form della hero): riquadro
   440px, campi da 41px con testo a 13.5px, pulsante a tutta
   larghezza da 48px. Prima il riquadro era piu compatto (campi da
   ~27px, testo a 12.5px) e accanto al titolo della hero risultava
   minuto.
   ═══════════════════════════════════════════════════════════════ */
.svc-hero__form-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 28px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
  width: 100%;
  /* Allineato a sinistra nella sua colonna e steso fino al bordo
     destro: il lato sinistro resta dov'era, si allunga solo quello
     destro. Il cappello fisso e' tolto perche' era lui a fermare
     la crescita prima della fine della colonna. Il contenitore non
     ha padding a destra, quindi la colonna arriva gia' al margine
     della pagina: oltre non si puo' andare senza spostare anche il
     bordo sinistro. */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.svc-hero__form-card .svc-hero__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.svc-hero__form-card .svc-hero__submit {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 14px;
}
.svc-hero__form-card-label {
  font-family: var(--font-secondary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255,255,255,0.92);
  margin-bottom: 14px;
}
.svc-hero__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.svc-hero__textarea {
  resize: none;
  /* l'attributo rows="4" la renderebbe piu alta del riferimento:
     qui l'altezza e fissata come la sua */
  height: 58px;
  min-height: 58px;
}
.svc-hero__form-card .svc-hero__field {
  padding: 12px 14px;
  /* corpo a 16px come il resto del sito: a 13.5px era sotto la
     soglia di leggibilita che teniamo ovunque */
  font-size: 16px;
  line-height: 1.25;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
}
.svc-hero__form-card .svc-hero__field::placeholder { color: rgba(255,255,255,0.45); }
.svc-hero__form-card .svc-hero__field:focus {
  border-color: rgba(255,255,255,0.34);
  background: rgba(255,255,255,0.08);
}
.svc-hero__form-card .svc-hero__form-row {
  gap: 10px;
}
.svc-hero__form-card .svc-hero__privacy {
  font-size: 14px;
  gap: 8px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}
.svc-hero__form-card .svc-hero__privacy a { color: rgba(255,255,255,0.75); }
@media (max-width: 900px) {
  .svc-hero--videobg .svc-hero__inner {
    grid-template-columns: 1fr !important;
  }
  .svc-hero--videobg .svc-hero__right { display: none; }
}
.svc-hero--videobg .svc-hero__kicker,
.svc-hero--videobg .svc-hero__title,
.svc-hero--videobg .svc-hero__sub,
.svc-hero--videobg .svc-hero__tagline {
  color: #fff !important;
}
.svc-hero--videobg .svc-hero__platforms img {
  filter: none;
}
.svc-hero--videobg .svc-hero__field {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}
.svc-hero--videobg .svc-hero__field::placeholder {
  color: rgba(255,255,255,0.55) !important;
}
.svc-hero--videobg .svc-hero__field:focus {
  background: rgba(255,255,255,0.20) !important;
  border-color: #fff !important;
}
.svc-hero--videobg .svc-hero__privacy {
  color: rgba(255,255,255,0.80) !important;
}
.svc-hero--videobg .svc-hero__privacy a {
  color: #fff !important;
}

/* ── Produzione Foto/Video: sezioni più compatte ── */
.svc-icons-section {
  padding-block: clamp(2.5rem, 5vw, 4rem) !important;
}
.svc-icons-section .svc-prod__head {
  margin-bottom: 0;
}
.svc-icons-section .svc-prod__title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  margin-bottom: var(--space-3) !important;
}
.svc-icons-section .svc-prod__sub {
  font-size: 0.9rem !important;
}
.svc-icons-section .svc-icons-grid {
  margin-top: clamp(1.5rem, 2.5vw, 2rem) !important;
  gap: clamp(1rem, 2vw, 1.5rem) clamp(0.75rem, 1.5vw, 1.25rem) !important;
}
.svc-icons-section .svc-icon-card__badge {
  width: clamp(64px, 9vw, 96px) !important;
  height: clamp(64px, 9vw, 96px) !important;
}

/* ── Produzione Foto/Video: card compatte ── */
.svc-icons-section .svc-icon-card__btn {
  gap: 1rem !important;
}
.svc-icons-section .svc-icon-card__title {
  font-size: clamp(14px, 1.3vw, 1rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  opacity: 1 !important;
  transform: none !important;
  color: #111 !important;
  min-height: 0 !important;
  line-height: 1.25 !important;
}
.svc-icons-section .svc-icon-card__desc {
  font-size: clamp(14px, 1.1vw, 0.95rem) !important;
  max-height: 200px !important;
  opacity: 1 !important;
  color: rgba(0,0,0,0.55) !important;
}
.svc-icons-section .svc-icons-grid {
  gap: clamp(1.25rem, 2vw, 2rem) clamp(0.75rem, 1.5vw, 1.25rem) !important;
}


/* ── influencer: stat desc — una frase per riga ── */
.svc-stat-video__desc--nowrap span {
  display: block;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   NAV AUTO-CONTRAST — sfondo scuro/chiaro sotto la nav
   .nav--on-dark aggiunto via JS (IntersectionObserver)
   quando una sezione con data-nav-theme="dark" è visibile.
═══════════════════════════════════════════════════════ */

/* ── transizione fluida su tutti gli elementi che cambiano ── */
/* .nav__menu-icon span ha già la propria transition (include transform/opacity per il burger) */
.nav__menu-btn,
.nav__icon-btn,
.nav__lang-btn {
  transition:
    color       var(--dur-base) var(--ease-out),
    background  var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    filter      var(--dur-base) var(--ease-out);
}

/* ── default: Menu e burger in fucsia ── */
.nav__menu-btn        { color: var(--primary); }
.nav__menu-icon span  { background: var(--primary); }

/* ── su sfondo scuro → menu-btn resta fucsia sempre ── */
.nav--on-dark .nav__menu-btn {
  color: var(--primary);
}
.nav--on-dark .nav__menu-btn:hover {
  background: rgba(255,255,255,0.10);
}
.nav--on-dark .nav__menu-icon span {
  background: var(--primary);
}
.nav--on-dark .nav__icon-btn {
  border-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.nav--on-dark .nav__icon-btn:hover {
  background: rgba(255,255,255,0.15);
}
.nav--on-dark .nav__lang-btn {
  border-color: rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.nav--on-dark .nav__lang-btn:hover {
  background: rgba(255,255,255,0.15);
}
.nav--on-dark .nav__logo img {
  filter: none;
}
/* menu aperto: burger resta fucsia */
.nav--on-dark.menu-open .nav__menu-btn {
  color: var(--primary);
}
.nav--on-dark.menu-open .nav__menu-icon span {
  background: var(--primary);
}

/* ─── Focus-visible: nav bar buttons ───────────────── */
.nav__menu-btn:focus-visible,
.nav__icon-btn:focus-visible,
.nav__lang-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.nav--on-dark .nav__menu-btn:focus-visible,
.nav--on-dark .nav__icon-btn:focus-visible,
.nav--on-dark .nav__lang-btn:focus-visible {
  outline-color: rgba(255,255,255,0.80);
}


/* ═══════════════════════════════════════════════════════════════
   REGOLE GLOBALI DEL SITO
   Stavano nello <style> della homepage e valevano solo lì: ogni
   altra pagina se le riscriveva o ne faceva a meno. Qui valgono
   per tutte, così una modifica si fa in un posto solo.
   ═══════════════════════════════════════════════════════════════ */

/* ── Footer: uguale ovunque ─────────────────────────────────────
   Tutte le voci a 14px — è chiusura di pagina, non testo di
   lettura. Resta fuori la scritta ESTRO di sfondo, che ha un corpo
   suo. */
html body .site-footer a,
html body .site-footer p,
html body .site-footer span,
html body .site-footer li,
html body .site-footer h3,
html body .site-footer h4,
html body .site-footer .sf-col__title,
html body .site-footer .sf-contact__label,
html body .site-footer .sf-legal__copy,
html body .site-footer .sf-legal__sep,
/* strong, b ed em mancavano dall'elenco: "YUBA S.r.l." e' dentro
   uno <strong>, e restava all'unica misura che lo riguardava —
   .sf-contact__block strong a 0.85rem, cioe' 13.6px — mentre tutto
   il resto della colonna era a 14. Una differenza di mezzo pixel
   che si vedeva perche' quella riga sta accanto alle altre. */
html body .site-footer strong,
html body .site-footer b,
html body .site-footer em { font-size: 14px !important; }
/* La ragione sociale non e' testo di lettura, e' un'intestazione:
   maiuscolo, peso pieno e la spaziatura larga che il sito usa per
   le etichette. Con 0.18em di tracking la riga cresce di una
   decina di pixel, e la colonna dei contatti ha spazio. */
html body .site-footer .sf-contact__block strong {
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
html body .site-footer .sf-ghost { font-size: 22vw !important; color: rgba(255,255,255,0.10) !important; }
/* la salita di sezione ha bisogno di vedere fuori dai bordi */
footer.site-footer { overflow: visible; }

/* ── Loghi dei clienti: misure della homepage ───────────────────
   Le altre pagine usavano il fallback del componente (200px di
   colonna, 100px di logo), più grande e disallineato. */
html body .svc-clients__logo {
  width: clamp(100px, 12vw, 180px) !important;
}
html body .svc-clients__logo img {
  max-height: clamp(52px, 7vw, 90px) !important;
  max-width: 100% !important;
  width: auto !important;
  opacity: 0.8;
}
html body .svc-clients__logo--seven img { max-height: clamp(32px, 4.5vw, 56px) !important; }
html body .svc-clients__logo--big img   { max-height: clamp(80px, 11vw, 136px) !important; }
html body .svc-clients__logo--xl img    { max-height: clamp(95px, 13.5vw, 166px) !important; }
html body .svc-clients__logo--xxl img   { max-height: clamp(140px, 20vw, 250px) !important; }

/* ── Corpi dei titoli di sezione ────────────────────────────────
   Due misure per tutto il sito: 150px per i titoli grandi che
   aprono una sezione, 60px per quelli secondari. Restano fuori il
   testo della hero della homepage e il titolo Servizi, che hanno
   una scala loro. */
/* La specificita' alzata serve: quasi ogni pagina aveva la sua
   regola !important su questi titoli, e a parita' di peso vinceva
   quella locale perche' dichiarata dopo. Con html body davanti la
   misura condivisa vince una volta per tutte. */
/* Titoli grandi: aprono la pagina o una sezione portante. */
html body .page-faq .page-faq__title,
html body .hc-title,
html body .svc-magic__title { font-size: min(150px, 26vw) !important; }

/* Titoli di sezione: la misura di riferimento del sito. */
html body .svc-clients .svc-clients__title,
html body .svc-caffe .svc-caffe__title,
html body .svc-section-title,
html body .svc-tools__title,
html body .smm-panel__big-title,
html body .cs2-contact__title,
html body .art-contact__title,
html body .tt-contact__title,
html body .svc-process__title,
html body .svc-channels__title,
html body .svc-ai-workflow__title { font-size: min(60px, 11vw) !important; }

/* ── Niente dissolvenze come transizione fra sezioni ────────────
   Le sezioni si passano il testimone con la salita e il raccordo
   arrotondato; nessun contenuto deve sparire o diventare
   trasparente per far entrare quello dopo. */
.section-fade,
.section-fade__overlay,
.svc-fade-overlay { display: none !important; }

/* ── .reveal nelle pagine servizi: mai invisibile ───────────────
   Nelle pagine servizi l'ingresso dei testi lo fa il linguaggio
   condiviso (ab-armed), non .reveal: quest'ultimo restava a
   opacita' zero quando lo script che doveva sbloccarlo non
   trovava piu' i suoi appigli. Qui si sblocca alla radice, solo
   dentro le sezioni delle pagine servizi. */
.svc-path .reveal,
.svc-clients .reveal,
.page-faq .reveal,
.svc-caffe .reveal,
.service-detail .reveal,
.svc-tools .reveal,
.svc-process .reveal,
.svc-channels .reveal,
.svc-integrazione .reveal,
.imk-intro .reveal,
.svc-ai-approccio .reveal,
.svc-ai-workflow .reveal,
.pc-prod .reveal,
.svc-collab-grid .reveal,
.svc-settori .reveal,
.svc-talent-pronti .reveal,
.svc-stat-video .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Pagine servizi: alternanza degli sfondi ────────────────────
   La prima sezione dopo la hero e' sempre su carta bianca; da li'
   in poi si alternano chiaro e scuro. La hero, la sezione fucsia e
   il footer restano quello che sono. */
main > section.svc-bg-light {
  background: #fff !important;
  color: #080808;
}
main > section.svc-bg-dark {
  background: #050505 !important;
  color: #fff;
}
main > section.svc-bg-light .svc-generic-sticky,
main > section.svc-bg-light > .svc-path__sticky,
main > section.svc-bg-light > .page-faq__sticky { background: #fff; }
main > section.svc-bg-dark .svc-generic-sticky,
main > section.svc-bg-dark > .svc-path__sticky,
main > section.svc-bg-dark > .page-faq__sticky { background: #050505; }
/* sul chiaro il testo va in nero, sullo scuro in bianco */
main > section.svc-bg-light h2,
main > section.svc-bg-light h3,
main > section.svc-bg-light p,
main > section.svc-bg-light li { color: inherit; }

/* Il titolo FAQ e' fucsia in tutte le pagine servizi */
html body .page-faq .page-faq__title { color: var(--primary, #DB005A) !important; }

/* I tools sono tornati una sezione a se': il respiro lo da' la
   sezione, al riquadro resta solo lo stacco sotto al titolo. */
.svc-tools-section .svc-tools__title {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* ═══════════════════════════════════════════════════════════════
   LABEL DEI FORM
   Struttura e comportamento del riferimento: una label visibile
   sopra ogni campo, l'asterisco separato dal testo, il placeholder
   che resta dov'era. Il testo della label e' quello che il campo
   gia' aveva nel placeholder: nessuna parola nuova.
   Un blocco solo per tutto il sito, così font, corpo, spaziatura e
   posizione sono identici ovunque.
   ═══════════════════════════════════════════════════════════════ */
.f-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
html body .f-label {
  font-family: var(--font-secondary);
  /* 14px: e' il corpo del microcopy del sito. La regola generale
     porterebbe ogni <label> a 16px, qui va tenuta piu' bassa
     perche' e' la didascalia del campo, non testo di lettura. */
  font-size: 14px !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: none;
  /* di base scura: i form su carta chiara sono il caso comune */
  color: rgba(0,0,0,0.62);
  margin: 0;
}
/* Sui fondi scuri la label passa al bianco: currentColor non
   bastava perche' il riquadro del form non dichiara un colore
   proprio e finiva per ereditare il nero. */
html body .svc-hero__form-card .f-label,
html body .svc-caffe .f-label,
html body .hc-form .f-label,
html body .cs2-contact .f-label,
html body .art-contact .f-label,
html body .tt-contact .f-label,
html body .lcn-apply__form .f-label,
html body .contact-home__form .f-label { color: rgba(255,255,255,0.72); }
html body .f-label__req {
  color: var(--primary, #DB005A);
  opacity: 1;
  font-weight: 700;
  margin-left: 0.1em;
}
/* Sui fondi fucsia e scuri l'asterisco prende il colore della
   propria etichetta: il fucsia di brand su fucsia sparisce e sul
   nero resta un accento che urla piu' della label che accompagna. */
html body .svc-hero__form-card .f-label .f-label__req,
html body .svc-caffe .f-label .f-label__req,
html body .hc-form .f-label .f-label__req,
html body .cs2-contact .f-label .f-label__req,
html body .art-contact .f-label .f-label__req,
html body .tt-contact .f-label .f-label__req,
html body .lcn-apply__form .f-label .f-label__req,
html body .contact-home__form .f-label .f-label__req { color: inherit; }
/* dentro le righe a due colonne ogni campo e' una colonna intera */
.hc-row > .f-field,
.svc-hero__form-row > .f-field { min-width: 0; }
/* i campi non devono piu' portare il margine che avevano da soli:
   la spaziatura la da' il gruppo */
.f-field > input,
.f-field > textarea,
.f-field > select { margin: 0; }

/* ── La salita si vede anche sulle sezioni agganciate ───────────
   La sezione e' la corsa e riceve raccordo e ombra, ma quello che
   si vede e' il pannello agganciato dentro, che con il suo fondo
   pieno li copriva: la transizione c'era e non si vedeva. Il
   pannello eredita gli stessi valori, quindi il raccordo compare
   dove l'occhio guarda davvero. */
/* ── Il doppio contenitore nelle sezioni agganciate ──────────────
   Qui c'era un errore mio, e si vedeva ovunque ci fosse un
   pannello agganciato. Il raccordo arrotondato della salita sta
   sulla sezione, che e' alta 118dvh; il pannello dentro e' alto
   100dvh e resta fermo mentre la sezione scorre. Dando anche al
   pannello un fondo proprio e gli stessi angoli — border-radius:
   inherit — i due riquadri smettevano di coincidere appena il
   pannello si sganciava: si vedevano due scatole arrotondate una
   dentro l'altra, una ferma e una in movimento.
   La regola giusta e' che il fondo lo dipinga una sola superficie.
   Lo fa la sezione, che e' quella che porta gli angoli e l'ombra
   della salita; il pannello resta trasparente e si limita a tenere
   fermo il contenuto. Solo i clienti fanno eccezione: dentro hanno
   un video da ritagliare, quindi mantengono fondo e taglio. */
html.js-reveal .sx-rise > .svc-generic-sticky,
html.js-reveal .sx-rise > .svc-path__sticky,
html.js-reveal .sx-rise > .page-faq__sticky {
  background: none !important;
  border-radius: 0;
  box-shadow: none;
  /* Il taglio resta. A creare il doppio riquadro erano il fondo e
     gli angoli, non il ritaglio: un pannello trasparente con gli
     angoli quadrati che ritaglia non si vede, ma continua a fare
     il suo lavoro. Togliendolo, il contenuto dei pannelli tarati
     per stare in una schermata — la timeline dei servizi ha respiri
     calcolati al pixel — poteva sbordare sulla sezione seguente
     durante la salita, e la transizione sembrava rotta. */
  overflow: hidden;
}
html.js-reveal .sx-rise > .svc-clients__sticky {
  border-radius: inherit;
  box-shadow: inherit;
  overflow: hidden;
}

/* ── La timeline sul fondo scuro ────────────────────────────────
   Quando l'alternanza porta la sezione dei servizi sul nero, tutto
   il suo contenuto passa al chiaro: titolo, occhiello, tappe,
   riquadro e testi. Prima restava tarato sul bianco e spariva. */
main > section.svc-bg-dark .smm-panel__statement-sub { color: rgba(255,255,255,0.66); }
main > section.svc-bg-dark .svc-tabs__strip::before { background: rgba(255,255,255,0.16); }
main > section.svc-bg-dark .svc-tabs__num {
  background: #0d0d0d;
  border-color: rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.55);
}
main > section.svc-bg-dark .svc-tabs__tab.is-done .svc-tabs__num,
main > section.svc-bg-dark .svc-tabs__tab:hover .svc-tabs__num { border-color: var(--primary, #DB005A); }
main > section.svc-bg-dark .svc-tabs__tab.is-active .svc-tabs__num {
  background: var(--primary, #DB005A);
  border-color: var(--primary, #DB005A);
  color: #fff;
}
main > section.svc-bg-dark .svc-tabs__tag { color: rgba(255,255,255,0.45); }
main > section.svc-bg-dark .svc-tabs__title { color: rgba(255,255,255,0.62); }
main > section.svc-bg-dark .svc-tabs__tab.is-active .svc-tabs__title { color: #fff; }
main > section.svc-bg-dark .svc-tabs__panel {
  background: #0d0d0d;
  border-color: rgba(255,255,255,0.10);
  box-shadow: 0 26px 64px rgba(0,0,0,0.45);
}
main > section.svc-bg-dark .svc-tabs__text { color: rgba(255,255,255,0.68); }
main > section.svc-bg-dark .svc-tabs__points li { color: rgba(255,255,255,0.72); }
main > section.svc-bg-dark .svc-tabs__media {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}
main > section.svc-bg-dark .svc-tabs__media-label { color: rgba(255,255,255,0.55); opacity: 1; }
/* i testi generici delle altre sezioni scure */
main > section.svc-bg-dark p,
main > section.svc-bg-dark li,
main > section.svc-bg-dark .service-detail__body { color: rgba(255,255,255,0.72); }
main > section.svc-bg-dark h2,
main > section.svc-bg-dark h3,
main > section.svc-bg-dark strong { color: #fff; }

/* ── I tools nella loro sezione ───────────────────────
   Il fondo bianco e il filetto che .svc-tools porta da sola
   disegnerebbero un riquadro chiaro dentro la sezione nera: qui
   il colore lo da' la sezione, uno solo. */
.svc-tools-section .svc-tools {
  background: transparent !important;
  border-top: 0 !important;
  padding: 0 !important;
}
/* Sul fondo nero il titolo e le didascalie dei tool passano al
   chiaro: erano nati per la carta bianca della vecchia sezione. */
main > section.svc-bg-dark .svc-tools__title { color: #fff !important; }
main > section.svc-bg-dark .svc-tools__item span { color: rgba(255,255,255,0.62) !important; }

/* ── La sezione fucsia: una schermata piena e un blocco breve ───
   Il pannello e' esattamente una schermata, come in tutte le altre
   sezioni agganciate: con il minimo al posto dell'altezza fissa la
   fucsia cresceva oltre la viewport e sotto al form restava una
   fascia vuota. La corsa e' la schermata piu' un tratto breve:
   quello e' il blocco che si sente scorrendo. Il contenuto ci sta
   perche' i padding interni sono azzerati piu' sotto. */
.svc-caffe-runway {
  background: var(--primary, #DB005A) !important;
  height: 116dvh !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}
.svc-caffe-runway > .svc-generic-sticky {
  background: var(--primary, #DB005A);
  position: sticky;
  top: 0;
  /* Il form appiccicato al bordo alto — a intermittenza, e a posto
     dopo un refresh — nasceva da un'altezza fissa di 100dvh su un
     contenuto che ci sta per un soffio. Bastava che i caratteri
     arrivassero tardi e una label andasse a capo: il contenuto
     superava il pannello e una colonna flex centrata, in quel caso,
     sborda in parti uguali sopra e sotto. Al refresh, con i
     caratteri in cache, tornava a stare dentro e sembrava a posto.
     "safe center" evitava lo sbordamento ma allineava in alto: il
     sintomo era lo stesso, il form contro il bordo.
     La soluzione e' non avere un'altezza fissa. Con min-height il
     pannello vale una schermata quando il contenuto ci sta — ed e'
     il caso normale, quindi centrato come le altre sezioni — e
     cresce quando non ci sta, invece di sbordare o di allinearsi a
     un bordo. Non c'e' piu' un caso limite: sotto la corsa restano
     comunque 16dvh di fucsia, quindi il blocco si sente uguale. */
  height: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 4vh, 3.5rem);
  overflow: visible;
}

/* ── Corsa e pannello: definizione condivisa ────────────────────
   Stavano solo nel blocco locale di alcune pagine servizi: qui
   valgono per tutte, così una sezione agganciata si comporta allo
   stesso modo ovunque. */
.svc-generic-runway {
  height: 118dvh;
  min-height: 0;
  display: block;
  padding: 0;
  overflow: visible;
}
.svc-generic-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: clamp(4rem, 8vh, 6rem);
}

/* ── Dentro il pannello agganciato la fucsia non raddoppia i vuoti
   .svc-caffe__inner porta un padding verticale suo — fino a 112px
   sopra e altrettanti sotto — nato quando la sezione stava per
   conto proprio. Dentro il pannello si sommava a quello del
   pannello: 332px di aria prima di una riga di contenuto, ed era
   questo a far sforare la schermata. Qui il respiro lo da' il
   pannello, uno solo. */
.svc-caffe-runway .svc-caffe__inner { padding-block: 0 !important; }
/* l'area messaggio si accorcia quel tanto che basta a lasciare
   margine anche sugli schermi piu' bassi */
.svc-caffe-runway .hc-textarea,
.svc-caffe-runway .svc-caffe__textarea { min-height: 104px !important; }

/* ── FAQ: stessa resa della homepage ────────────────────────────
   Tre cose separavano la FAQ delle pagine servizi da quella in
   home. Il filetto sopra la lista: in home e' dichiarato nero su
   fondo nero, quindi non si vede; sulla carta bianca delle pagine
   servizi diventava una riga sotto al titolo che non c'entra con
   il disegno. Lo stacco sotto "FAQ": in home il margine e' negativo
   perche' toglie lo spazio che il font si porta dentro la riga su
   un corpo di 150px, altrove restava il clamp del componente e la
   prima domanda cadeva molto piu' in basso. E lo scorrimento
   interno del pannello, che a lista lunga tirava fuori la barra:
   e' quella la linea verticale che compare a destra scorrendo. */
html body main > section.page-faq .page-faq__list { border-top: 0 !important; }
html body main > section.page-faq .page-faq__title {
  line-height: 1 !important;
  margin-top: -0.26em !important;
  margin-bottom: -0.14em !important;
}
html body main > section.page-faq .page-faq__inner,
html body main > section.page-faq .page-faq__list,
html body main > section.page-faq .page-faq__item {
  max-height: none !important;
  overflow: visible !important;
}
/* Senza scorrimento interno le otto voci devono starci davvero:
   respiro delle righe e del pannello copiati dalla home, dove le
   voci sono addirittura nove e il pannello e' lo stesso 100dvh. */
html body main > section.page-faq .page-faq__question {
  padding-block: clamp(0.7rem, 1.6vh, 1.1rem) !important;
}
html body main > section.page-faq > .page-faq__sticky {
  padding-block: 92px 48px !important;
}

/* ── I titoli non ereditano il minimo del corpo ─────────────────
   Otto pagine servizi portano in locale il minimo tipografico
   scritto cosi': "main p, main li, main a, main span, ... { 16px
   !important }". La parola "span" e' la trappola. Nel markup i
   titoli hanno gli a-capo protetti da <span style="white-space:
   nowrap">, e l'effetto acqua spezza ogni titolo in un <span
   class="tl"> per lettera: quelle lettere sono span dentro main,
   quindi prendevano 16px e i titoli si rimpicciolivano tutti
   insieme, dalla hero al "Prendiamoci un caffe". Qui gli elementi
   in linea dentro un titolo tornano a valere quanto il titolo che
   li contiene: piu' specifico della regola locale, quindi vince
   ovunque senza doverla riscrivere pagina per pagina. */
html body main :is(h1, h2, h3, h4, h5, h6) :is(span, em, strong, b, i, a, small) {
  font-size: inherit !important;
}
/* Corpo e peso delle domande e delle risposte nelle pagine
   servizi. Le domande erano bloccate al minimo tipografico, 16px
   fissi: ora sono 20px, cioe' la misura che in homepage la scala
   fluida raggiunge sul desktop, ma senza rimpicciolirsi sotto.
   Il peso e' 600 come in home. */
html body main > section.page-faq .page-faq__question {
  font-size: 20px !important;
  font-weight: 600 !important;
}
html body main > section.page-faq .page-faq__answer-inner {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

/* ── Salita fra sezioni: definizione condivisa ──────────────────
   Lo script che assegna .sx-rise e aggiorna --sxi sta in tutte e
   dieci le pagine servizi, ma il disegno della salita era scritto
   solo nel <style> di SMM e Google Ads: sulle altre otto la classe
   veniva messa e non faceva niente, e le sezioni si passavano il
   testimone di netto. Qui vale per tutte. Le due pagine che la
   ridichiarano in locale portano gli stessi identici valori. */
html.js-reveal .sx-rise {
  position: relative;
  z-index: 2;
  transform: translateY(calc((1 - var(--sxi, 1)) * -22px));
  border-radius: calc((1 - var(--sxi, 1)) * 32px) calc((1 - var(--sxi, 1)) * 32px) 0 0;
  box-shadow: 0 calc((1 - var(--sxi, 1)) * -14px) calc((1 - var(--sxi, 1)) * 34px) rgba(0,0,0,0.30);
  will-change: transform;
}
/* la fascia che riempie i 22px lasciati scoperti dalla salita:
   prende il fondo della sezione stessa, quindi non si vede il
   colore di quella sotto */
html.js-reveal .sx-rise::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: calc((1 - var(--sxi, 1)) * 22px);
  background: inherit;
  pointer-events: none;
  z-index: -1;
}
/* due sezioni scure consecutive: la giunzione cadeva su mezzo pixel
   e lasciava passare il bianco della pagina come una linea sottile.
   La sezione che sale si sovrappone di 2px a quella sopra. */
main > section.svc-bg-dark + section.svc-bg-dark { margin-top: -2px; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .sx-rise { transform: none; border-radius: 0; box-shadow: none; }
  html.js-reveal .sx-rise::after { display: none; }
}

/* ── "IL NOSTRO APPROCCIO": leggibilita' sul fondo scuro ────────
   La sezione e' disegnata per il grigio chiaro (#f7f7f7) che porta
   da sola, ma nell'alternanza degli sfondi le tocca il turno
   scuro: il fondo diventa #050505 e sopra restano i grigi nati per
   la carta chiara — #444 nei paragrafi, black-75 negli step, un
   filetto nero fra una riga e l'altra. Testo scuro su fondo scuro.
   Qui i colori si ribaltano, come gia' succede per la timeline. */
main > section.svc-bg-dark .svc-content-block__text,
main > section.svc-bg-dark .svc-ai-step,
main > section.svc-bg-dark .svc-ai-workflow__sub,
main > section.svc-bg-dark .svc-ai-capacita__text {
  color: rgba(255,255,255,0.72) !important;
}
main > section.svc-bg-dark .svc-ai-step,
main > section.svc-bg-dark .svc-ai-step:first-child {
  border-color: rgba(255,255,255,0.16) !important;
}
/* Il sopratitolo era a --text-xs, cioe' 11px: sotto il minimo dei
   14px che valgono per tag, kicker e CTA in tutto il sito. E su
   fondo scuro il fucsia pieno si stacca poco, quindi si schiarisce
   quel tanto che basta senza uscire dal colore di brand. */
.svc-ai-pill-kicker { font-size: 14px; }
main > section.svc-bg-dark .svc-ai-pill-kicker { color: #FF4D8F !important; }

/* Stacco fra "FAQ" e la prima domanda, pagine servizi.
   Il margine negativo che serve in homepage toglie lo spazio che
   il font si porta dentro la riga; qui, dentro il pannello, il
   risultato si legge come nessuno stacco. Il taglio sopra resta —
   e' quello che libera l'aria sotto la nav — e sotto al titolo
   torna una distanza dichiarata. */
html body main > section.page-faq > .page-faq__sticky .page-faq__title {
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem) !important;
}

/* ── Collaborazioni: le foto rispondono al passaggio del mouse ──
   La sezione era solo tre ritratti fermi; l'unico movimento che
   aveva era la comparsa e la scomparsa legate allo scroll, che ora
   non ci sono piu'. */
.svc-collab-grid__photo {
  overflow: hidden;
  border-radius: 18px;
}
.svc-collab-grid__photo img {
  display: block;
  width: 100%;
  transition: transform 620ms cubic-bezier(0.22,1,0.36,1);
}
.svc-collab-grid__item:hover .svc-collab-grid__photo img { transform: scale(1.04); }
.svc-collab-grid__name {
  margin-top: 0.9rem;
  font-family: var(--font-secondary);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Prima sezione dopo la hero: il dato e il video ─────────────
   Restava il residuo di due disegni sovrapposti — uno per fondo
   scuro, uno per fondo chiaro — e vinceva a meta': il filetto
   fucsia spento, la didascalia sotto il minimo tipografico, il
   video senza stacco dalla pagina bianca. Qui la sezione ha una
   forma sola: il numero come protagonista, un filetto che lo lega
   alla didascalia, il video incorniciato. */
.svc-stat-video__inner { align-items: center; }
.svc-stat-video__video {
  border-radius: 20px !important;
  box-shadow: 0 28px 70px rgba(0,0,0,0.16), 0 0 0 1px rgba(219,0,90,0.14) !important;
}
.svc-stat-video__stat { gap: clamp(1rem, 2vw, 1.5rem) !important; }
.svc-stat-video__num {
  transform: none !important;
  letter-spacing: -0.04em !important;
  line-height: 0.86 !important;
}
.svc-stat-video__pct { font-size: 0.42em !important; vertical-align: super; }
/* niente filetto sopra al numero: il dato si regge da solo */
.svc-stat-video .svc-stat-video__line { display: none !important; }
.svc-stat-video__desc {
  font-size: 16px !important;
  line-height: 1.6 !important;
  max-width: 42ch !important;
  color: rgba(0,0,0,0.72) !important;
}
/* le quattro righe della frase restano righe: erano span in fila
   e andavano a capo dove capitava */
.svc-stat-video__desc span { display: block; }

/* ═══════════════════════════════════════════════════════════════
   INFLUENCER MARKETING — le sezioni del corpo
   Ogni blocco e' disegnato per il fondo che gli tocca nel ritmo
   chiaro-scuro della pagina, dichiarato a mano nello script di
   alternanza. Le regole stanno qui e non nel <style> di pagina
   perche' i componenti (.svc-settori, .svc-talent-pronti,
   .svc-integrazione, .svc-stat-video) sono definiti qui.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Il dato: 87% ────────────────────────────────────────────
   Il numero diventa la superficie, non solo un testo grande: si
   riempie di una sfumatura fucsia e si appoggia a un blocco di
   testo stretto, con l'etichetta del canale sopra. */
.svc-stat-video__num {
  background: linear-gradient(140deg, #FF3D86 0%, #DB005A 55%, #8C0039 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.svc-stat-video__stat { position: relative; }
/* filo verticale a sinistra della frase: lega il dato al testo
   senza tagliare la colonna in due */
.svc-stat-video__desc {
  border-left: 3px solid var(--primary, #DB005A);
  padding-left: clamp(1rem, 1.6vw, 1.4rem);
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.svc-stat-video__video { position: relative; }
.svc-stat-video__video::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
  pointer-events: none;
}

/* ── 2. Mercato Instagram, su nero ──────────────────────────────
   Era un testo scuro su bianco: sul nero l'occhiello resta fucsia,
   il titolo va in bianco e la foto prende un alone caldo che la
   stacca dal fondo invece di galleggiarci sopra. */
main > section.svc-bg-dark.imk-intro {
  background:
    radial-gradient(ellipse 60% 70% at 12% 40%, rgba(219,0,90,0.20) 0%, transparent 62%),
    radial-gradient(ellipse 45% 55% at 92% 80%, rgba(219,0,90,0.10) 0%, transparent 58%),
    #060606 !important;
}
main > section.svc-bg-dark.imk-intro .imk-intro__kicker {
  color: var(--primary, #DB005A) !important;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
main > section.svc-bg-dark.imk-intro .imk-intro__title {
  color: #fff !important;
  font-size: clamp(3rem, 7vw, 96px) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.03em;
}
main > section.svc-bg-dark.imk-intro .imk-intro__text p {
  color: rgba(255,255,255,0.74) !important;
  font-size: 16px !important;
  line-height: 1.85 !important;
}
main > section.svc-bg-dark.imk-intro .imk-intro__text strong { color: #fff !important; }
/* la coda resta del suo fucsia: invertirla la spegneva in un
   grigio che sul nero non si leggeva come colore di brand */
main > section.svc-bg-dark.imk-intro .imk-intro__tail {
  filter: none !important;
  opacity: 0.85 !important;
}
main > section.svc-bg-dark.imk-intro .imk-intro__photo {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(219,0,90,0.22);
}
main > section.svc-bg-dark.imk-intro .imk-intro__photo img {
  display: block;
  width: 100%;
  transition: transform 800ms cubic-bezier(0.22,1,0.36,1);
}
main > section.svc-bg-dark.imk-intro .imk-intro__photo:hover img { transform: scale(1.03); }

/* ── 4. I settori, su bianco ────────────────────────────────────
   Il blocco era nato per il nero: card scavate nel fondo e icone
   fucsia su tessuto scuro. Sul bianco la stessa idea si rovescia —
   carta, bordo sottile, e l'icona dentro una capsula fucsia
   chiarissima che si accende al passaggio del mouse. */
main > section.svc-bg-light.svc-settori {
  background: #fff !important;
  padding-block: clamp(5rem, 9vw, 8rem) !important;
}
main > section.svc-bg-light.svc-settori .svc-section-title { color: #080808 !important; }
main > section.svc-bg-light.svc-settori .svc-settori__item {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
}
main > section.svc-bg-light.svc-settori .svc-settori__item:hover {
  background: #fff !important;
  border-color: rgba(219,0,90,0.35) !important;
  box-shadow: 0 18px 40px rgba(219,0,90,0.14) !important;
  transform: translateY(-6px) !important;
}
main > section.svc-bg-light.svc-settori .svc-settori__item svg {
  box-sizing: content-box;
  padding: 14px;
  border-radius: 50%;
  background: rgba(219,0,90,0.08);
  transition: background 300ms ease, transform 300ms ease;
}
main > section.svc-bg-light.svc-settori .svc-settori__item:hover svg {
  background: rgba(219,0,90,0.16);
  transform: scale(1.06);
}
main > section.svc-bg-light.svc-settori .svc-settori__item span {
  color: rgba(0,0,0,0.72) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ── 5. I talent, su nero ───────────────────────────────────────
   L'elenco era su rosa chiarissimo con i filetti neri. Sul nero
   diventa una lista incisa: filetti chiari, etichette fucsia,
   e la riga si illumina appena quando ci passi sopra. */
main > section.svc-bg-dark.svc-talent-pronti {
  background:
    radial-gradient(ellipse 50% 60% at 88% 20%, rgba(219,0,90,0.16) 0%, transparent 60%),
    #060606 !important;
}
main > section.svc-bg-dark.svc-talent-pronti .svc-talent-pronti__title {
  color: #fff !important;
}
main > section.svc-bg-dark.svc-talent-pronti .svc-talent-pronti__visual {
  box-shadow: 0 40px 90px rgba(0,0,0,0.65), 0 0 0 1px rgba(219,0,90,0.22) !important;
}
main > section.svc-bg-dark.svc-talent-pronti .svc-talent-pronti__item {
  border-top-color: rgba(255,255,255,0.14) !important;
  padding-inline: clamp(0.75rem, 1.4vw, 1.25rem) !important;
  border-radius: 12px;
  transition: background 300ms ease;
}
main > section.svc-bg-dark.svc-talent-pronti .svc-talent-pronti__item:last-child {
  border-bottom-color: rgba(255,255,255,0.14) !important;
}
main > section.svc-bg-dark.svc-talent-pronti .svc-talent-pronti__item:hover {
  background: rgba(255,255,255,0.035);
}
main > section.svc-bg-dark.svc-talent-pronti .svc-talent-pronti__item p {
  color: rgba(255,255,255,0.74) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}
main > section.svc-bg-dark.svc-talent-pronti .svc-talent-pronti__item strong { color: #fff !important; }

/* ── 6. Ad integrazione ─────────────────────────────────────────
   Tre pill in fila su bianco, senza gerarchia. Diventano tre voci
   con un peso loro: capsula piu' generosa, icona in un cerchio
   fucsia, e in hover la capsula si riempie e si solleva. */
.svc-integrazione__pills { flex-wrap: wrap; }
.svc-integrazione__pill {
  gap: 0.85rem !important;
  padding: 1rem 1.9rem 1rem 1rem !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  transition: background 240ms ease, border-color 240ms ease,
              color 240ms ease, transform 240ms ease, box-shadow 240ms ease !important;
}
.svc-integrazione__pill svg {
  box-sizing: content-box;
  padding: 10px;
  border-radius: 50%;
  background: rgba(219,0,90,0.09);
  transition: background 240ms ease;
}
.svc-integrazione__pill:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 34px rgba(219,0,90,0.22) !important;
}
.svc-integrazione__pill:hover svg { background: rgba(255,255,255,0.18); }

/* ── 3. I servizi (timeline), su nero ───────────────────────────
   Il pannello nero c'era gia' come adattamento; qui prende una
   forma sua: il fondo non e' piatto ma acceso da un alone fucsia
   sul lato del riquadro aperto, il titolo si schiarisce quel tanto
   che serve a staccarsi dal nero, la striscia dei numeri corre su
   un filo piu' leggibile e il riquadro aperto ha un bordo che
   segue il fucsia invece del grigio. */
main > section.svc-bg-dark.svc-path > .svc-path__sticky {
  background:
    radial-gradient(ellipse 55% 45% at 78% 68%, rgba(219,0,90,0.16) 0%, transparent 62%),
    #060606 !important;
}
main > section.svc-bg-dark.svc-path .svc-path__head .smm-panel__big-title {
  color: #FF3D86 !important;
}
main > section.svc-bg-dark.svc-path .svc-tabs__panel {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
main > section.svc-bg-dark.svc-path .svc-tabs__media {
  background:
    linear-gradient(150deg, rgba(219,0,90,0.22) 0%, rgba(219,0,90,0.04) 60%),
    rgba(255,255,255,0.04) !important;
  border-color: rgba(219,0,90,0.22) !important;
}
main > section.svc-bg-dark.svc-path .svc-tabs__tab.is-active .svc-tabs__num {
  box-shadow: 0 0 0 6px rgba(219,0,90,0.18);
}
main > section.svc-bg-dark.svc-path .svc-tabs__points li::before {
  background: #FF3D86;
}

/* ── La corsa dei servizi non stacca dal suo pannello ───────────
   Il pannello agganciato ha un fondo acceso da un alone fucsia, la
   sezione che gli fa da corsa e' alta 12dvh in piu' ed era rimasta
   nera piatta: scorrendo, quella fascia di nero diverso spuntava
   da sotto al pannello proprio mentre i settori salivano sopra, e
   sembrava una sezione che usciva da dietro. Stesso fondo. */
main > section.svc-bg-dark.svc-path {
  background:
    radial-gradient(ellipse 55% 45% at 78% 68%, rgba(219,0,90,0.16) 0%, transparent 62%),
    #060606 !important;
}

/* ── Il dato e il video, dentro la sezione Instagram ────────────
   Non sono piu' una sezione: sono la chiusa di quella sopra. Niente
   fondo proprio, respiro ridotto a uno stacco interno, e i colori
   che passano al nero su cui ora vivono. */
main > section > .svc-stat-video {
  background: none !important;
  padding-block: 0 !important;
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
main > section.svc-bg-dark .svc-stat-video__desc {
  color: rgba(255,255,255,0.74) !important;
}
main > section.svc-bg-dark .svc-stat-video__video {
  box-shadow: 0 40px 90px rgba(0,0,0,0.65), 0 0 0 1px rgba(219,0,90,0.22) !important;
}
main > section.svc-bg-dark .svc-stat-video__video::after {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* ── "Ad integrazione", dentro la sezione dei talent ────────────
   Stessa storia: era una sezione di tre capsule in mezzo al vuoto,
   ora e' la coda della lista dei talent. Le capsule diventano di
   vetro, come si conviene al fondo nero. */
main > section > .svc-integrazione {
  background: none !important;
  padding-block: 0 !important;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  position: relative;
  overflow: visible !important;
}
main > section > .svc-integrazione .svc-integrazione__deco { display: none !important; }
main > section.svc-bg-dark .svc-integrazione__header .svc-section-title {
  color: #fff !important;
  font-size: clamp(1.75rem, 3.4vw, 40px) !important;
}
main > section.svc-bg-dark .svc-integrazione__header .svc-section-header__eyebrow {
  font-size: 14px !important;
}
main > section.svc-bg-dark .svc-integrazione__pill {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #fff !important;
}
main > section.svc-bg-dark .svc-integrazione__pill svg {
  background: rgba(219,0,90,0.22);
  color: #FF3D86 !important;
}
main > section.svc-bg-dark .svc-integrazione__pill:hover {
  background: var(--primary, #DB005A) !important;
  border-color: var(--primary, #DB005A) !important;
}
main > section.svc-bg-dark .svc-integrazione__pill:hover svg {
  background: rgba(255,255,255,0.22);
  color: #fff !important;
}

/* ── "Ad integrazione" dentro i talent, su carta chiara ─────────
   Il titolo del blocco fuso non deve competere con quello della
   sezione che lo ospita: scende di corpo e resta il suo occhiello
   fucsia a introdurlo. Le capsule restano quelle chiare del
   disegno originale, solo piu' generose. */
main > section.svc-bg-light > .svc-integrazione .svc-section-title {
  font-size: clamp(1.75rem, 3.4vw, 40px) !important;
}
main > section.svc-bg-light > .svc-integrazione .svc-section-header__eyebrow {
  font-size: 14px !important;
}

/* ── Alcune collaborazioni, su nero ─────────────────────────────
   Nel giro dell'alternanza questa sezione prende il turno scuro: i
   tre ritratti su fondo nero guadagnano contrasto, il titolo passa
   al bianco e sotto ogni foto il nome resta leggibile. */
main > section.svc-bg-dark.svc-collab-grid {
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(219,0,90,0.14) 0%, transparent 62%),
    #060606 !important;
}
main > section.svc-bg-dark.svc-collab-grid .svc-section-title { color: #fff !important; }
main > section.svc-bg-dark.svc-collab-grid .svc-collab-grid__photo {
  box-shadow: 0 30px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(219,0,90,0.20);
}
main > section.svc-bg-dark.svc-collab-grid .svc-collab-grid__name {
  color: rgba(255,255,255,0.82) !important;
}

/* ── I settori, su nero: una griglia, non due riquadri ──────────
   Il blocco disegnato per il nero mette una card sotto ogni icona;
   la sezione, con il suo respiro e il fondo pieno, ne disegnava un
   secondo intorno e si leggevano come due contenitori annidati. La
   griglia non porta piu' un fondo suo: restano le card, e basta. */
main > section.svc-bg-dark.svc-settori .svc-settori__grid {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ── La corsa dei servizi, chiara come il suo pannello ──────────
   QUI STAVA IL BUG DELLA TRANSIZIONE DELLA TIMELINE.
   Questa regola dipingeva di bianco anche il pannello agganciato,
   e con tre classi batteva quella condivisa che lo vuole
   trasparente durante la salita (html.js-reveal .sx-rise >
   .svc-path__sticky, due classi). Risultato: sopra la sezione
   c'era un rettangolo bianco opaco, alto una schermata e ancorato
   al bordo alto, che copriva gli angoli arrotondati, l'ombra e la
   fascia di 48px del sollevamento. La sezione saliva davvero, ma
   non si vedeva niente: e' il motivo per cui la transizione
   sembrava assente solo sulla timeline e solo nel turno chiaro
   (nel turno scuro una regola con :not(.svc-clients) rendeva gia'
   trasparente il pannello, e infatti la' la salita si vedeva).
   Ora il bianco lo dipinge solo la sezione — che e' quella che
   porta angoli e ombra — e il pannello resta trasparente: il
   colore che si vede e' lo stesso, non c'e' nessuna seconda
   scatola, e la salita torna visibile. */
main > section.svc-bg-light.svc-path {
  background: #fff !important;
}
main > section.svc-bg-light.svc-path > .svc-path__sticky {
  background: none !important;
}

/* I talent tengono il loro rosa chiarissimo anche dentro il turno
   chiaro: e' il colore per cui la sezione e' disegnata e da' alla
   pagina un terzo tono fra il bianco e il nero. */
main > section.svc-bg-light.svc-talent-pronti { background: #f8f3f6 !important; }

/* ── "Facciamo anche questo" dentro la sezione dei talent ───────
   Le tre voci ci sono confluite da una sezione loro: qui non hanno
   fondo ne' respiro di sezione, solo lo stacco che le separa
   dall'elenco. La sezione torna alta quanto il suo contenuto:
   l'avevo costretta in una schermata e ne era uscita tagliata. */
main > section.svc-talent-pronti > .svc-integrazione {
  /* niente filetto: a separare basta lo spazio */
  border-top: 0 !important;
  margin-top: clamp(2rem, 4.5vw, 3.25rem) !important;
  padding-top: 0 !important;
}
main > section.svc-talent-pronti > .svc-integrazione .svc-integrazione__header {
  margin-bottom: clamp(1rem, 2vw, 1.5rem) !important;
}
main > section.svc-talent-pronti > .svc-integrazione .svc-section-title {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
  margin: 0 !important;
}
main > section.svc-talent-pronti > .svc-integrazione .svc-section-header__eyebrow {
  font-size: 14px !important;
  margin-bottom: 0.4rem !important;
}

/* Il titolo, una regola sola. Ne aveva quattro sovrapposte, tutte
   !important e in disaccordo: 4rem, 2.2rem, 1.8rem con nowrap, e
   uno stiramento verticale del 18%. Il nowrap impediva a "I talent
   pronti a comunicare" di andare a capo e allargava la colonna
   oltre la griglia. Le altre tre sono state tolte. */
main > section.svc-talent-pronti .svc-talent-pronti__title {
  white-space: normal !important;
  transform: none !important;
  /* le parole non si spezzano mai a meta': vanno a capo intere */
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

/* ── Le foto si inclinano sotto il puntatore ────────────────────
   La classe .tilt3d la mette lo script sui riquadri che partecipano
   (la foto di Instagram e quella dei talent). La prospettiva sta sul
   contenitore e la rotazione sull'immagine: cosi' il riquadro resta
   al suo posto nel layout e a muoversi e' solo la superficie.
   --tx e --ty arrivano dallo script: sono la posizione del cursore
   dentro il riquadro, normalizzata fra -1 e 1. */
.tilt3d {
  perspective: 1100px;
  transform-style: preserve-3d;
}
.tilt3d img {
  transform:
    rotateX(calc(var(--tx, 0) * -6deg))
    rotateY(calc(var(--ty, 0) * 7deg))
    translateZ(0);
  transition: transform 520ms cubic-bezier(0.22,1,0.36,1), box-shadow 520ms ease;
  will-change: transform;
}
/* mentre il puntatore e' dentro, la foto insegue subito: la stessa
   transizione lenta dell'uscita la farebbe sembrare in ritardo */
.tilt3d.tilt-on img {
  transition: transform 120ms linear, box-shadow 520ms ease;
  transform:
    rotateX(calc(var(--tx, 0) * -6deg))
    rotateY(calc(var(--ty, 0) * 7deg))
    scale(1.02)
    translateZ(0);
}
.imk-intro__photo.tilt-on img { box-shadow: 0 40px 80px rgba(0,0,0,0.22); }
@media (prefers-reduced-motion: reduce) {
  .tilt3d img { transform: none !important; transition: none !important; }
}

/* ── Entrata delle card "Alcune Collaborazioni" ─────────────────
   Niente opacita' e niente dissolvenza: le card sono opache dal
   primo fotogramma. A rivelarle e' una tendina — un clip-path che
   si apre dal basso verso l'alto — mentre la foto dentro si muove
   in senso contrario, partendo ingrandita e spostata in su, e si
   assesta quando la tendina finisce di aprirsi. E' il contrasto
   fra i due movimenti a dare profondita', non la trasparenza.
   Lo scarto fra una card e l'altra e' dato dall'indice.
   Il clip finale ha inset negativo: la tendina si apre di 60px
   oltre il bordo, cosi' l'ombra della foto non resta ritagliata a
   filo della card quando l'animazione e' finita.
   Succede una volta sola: .cg-in viene messo e non viene mai
   tolto, quindi riscorrendo la pagina le card restano dove sono. */
.svc-collab-grid__item.cg-armed {
  clip-path: inset(0 0 100% 0);
}
.svc-collab-grid__item.cg-armed .svc-collab-grid__photo img {
  transform: scale(1.16) translateY(-5%);
}
.svc-collab-grid__item.cg-in {
  clip-path: inset(-60px);
  transition: clip-path 980ms cubic-bezier(0.22, 1, 0.36, 1)
              calc(var(--cg-i, 0) * 140ms);
}
.svc-collab-grid__item.cg-in .svc-collab-grid__photo img {
  transform: none;
  transition: transform 1240ms cubic-bezier(0.22, 1, 0.36, 1)
              calc(var(--cg-i, 0) * 140ms);
}
/* l'ingrandimento in hover riparte da fermo, senza litigare con
   quello dell'entrata */
.svc-collab-grid__item.cg-in:hover .svc-collab-grid__photo img {
  transform: scale(1.04);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .svc-collab-grid__item.cg-armed,
  .svc-collab-grid__item.cg-in { clip-path: none; }
  .svc-collab-grid__item.cg-armed .svc-collab-grid__photo img,
  .svc-collab-grid__item.cg-in .svc-collab-grid__photo img { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════
   INSTAGRAM — una schermata, due meta'
   A sinistra il ritratto, a destra il discorso: occhiello, titolo,
   il dato 87% in apertura — e' la prova di quello che i paragrafi
   dicono, quindi sta in cima — e i tre paragrafi.
   La sezione e' alta una schermata e si misura da sola: e' esclusa
   dallo script che aggancia le altre, perche' altrimenti si
   ritrovava un pannello con una seconda altezza e un secondo
   respiro sopra a questi, ed era quello a far uscire sballata la
   salita dopo la hero.
   Conto su una finestra da 900px: ~90 di respiri + ~594 del
   ritratto, che e' il lato piu' alto dei due = 684.
   Sul centraggio: "safe center" centra solo finche' c'e' spazio e
   non puo' sbordare verso l'alto sulla hero; i browser che non lo
   conoscono restano su flex-start, che e' il ripiego giusto.
   ═══════════════════════════════════════════════════════════════ */
/* L'altezza e il blocco li da' lo stesso meccanismo delle altre
   sezioni: la sezione diventa una corsa di 118dvh e dentro c'e' un
   pannello agganciato alto una schermata. Prima me la gestivo qui
   con min-height e flex, e le due cose si pestavano i piedi —
   doppia altezza, doppio respiro, salita sballata. Qui non resta
   nessuna regola di altezza: solo la griglia del contenuto, che e'
   misurata per stare dentro al pannello. */
.imk-intro__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
}

/* ── Il ritratto ────────────────────────────────────────────────
   Senza il video accanto la colonna e' tutta sua: tiene il suo
   rapporto e si limita in altezza, che e' la dimensione che decide
   se la sezione sta in una schermata. */
.imk-intro__media { position: relative; }
.imk-intro__photo {
  position: relative;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 5;
  max-height: 56vh;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 34px 80px rgba(0,0,0,0.16);
}
.imk-intro__photo img {
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center 18%;
}

/* ── Colonna del discorso ─────────────────────────────────────── */
main > section.imk-intro .imk-intro__text {
  display: flex;
  flex-direction: column;
  gap: clamp(0.65rem, 1.5vh, 1.1rem) !important;
}
main > section.imk-intro .imk-intro__kicker { font-size: 14px !important; margin: 0 !important; }
main > section.imk-intro .imk-intro__title {
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  line-height: 0.95 !important;
  margin: 0 0 0.2rem !important;
}
main > section.imk-intro .imk-intro__text p {
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
/* Il dato apre il discorso: numero e frase affiancati, divisi dal
   filetto fucsia. Incolonnati occupavano il doppio dell'altezza. */
.imk-intro__stat {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.5rem) !important;
  margin: clamp(0.35rem, 1vh, 0.75rem) 0 clamp(0.5rem, 1.2vh, 1rem) !important;
  padding-left: clamp(0.9rem, 1.6vw, 1.3rem);
  border-left: 3px solid var(--primary, #DB005A);
}
.imk-intro__stat .svc-stat-video__num {
  font-size: clamp(3.5rem, 7vw, 6.5rem) !important;
  line-height: 0.85 !important;
  margin: 0 !important;
}
.imk-intro__stat .svc-stat-video__desc {
  font-size: 16px !important;
  line-height: 1.4 !important;
  max-width: none !important;
  margin: 0 !important;
  border-left: 0 !important;
  padding-left: 0 !important;
}
.imk-intro__stat .svc-stat-video__line { display: none !important; }

@media (max-width: 1024px) {
  .imk-intro__grid { grid-template-columns: 1fr; gap: clamp(2rem, 5vh, 3rem); }
  .imk-intro__photo { max-height: 52vh; }
}

/* ═══════════════════════════════════════════════════════════════
   SOCIAL ADS — "Guarda quanti vantaggi"
   Sei riquadri bianchi su fondo fucsia non erano un disegno: erano
   sei rettangoli. Qui la sezione diventa un campo fucsia unico con
   sei pannelli di vetro che ci galleggiano sopra — bianco al 12%,
   sfocatura dietro, bordo luminoso — e il testo tutto in chiaro.
   Cambia la lettura: prima l'occhio contava sei scatole, ora legge
   una superficie con sei affacci.
   Tre cose portano il carattere:
   - il numero d'ordine e' un numerale grande a solo contorno
     nell'angolo, non un pallino;
   - la colonna centrale e' sfalsata in verticale, come in un
     mosaico editoriale, cosi' la griglia non e' una tabella;
   - in hover il vetro si schiarisce, il bordo diventa pieno e si
     accende un alone: nessuno spostamento di layout.
   La card resta orizzontale (icona a sinistra, testo a destra):
   e' la forma che tiene bassa l'altezza senza comprimere il testo.
   ── Altezze. Il respiro sopra al pannello e' alzato a 7-9rem: la
   nav e' fissa e alta un centinaio di pixel, e con il respiro
   normale del pannello il titolo le finiva sotto. Conto su una
   finestra da 900px: ~127 di titolo e stacco + ~452 delle due
   righe di card = 579, contro i ~720 che restano nel pannello.
   Sotto i 700px di altezza il conto non passa piu' e lo script
   rinuncia al blocco: la sezione torna libera e il contenuto non
   viene tagliato, che e' la cosa che conta.
   ═══════════════════════════════════════════════════════════════ */
main > section.svc-process {
  background: var(--primary, #DB005A) !important;
  padding-block: clamp(3.5rem, 7vh, 5.5rem) !important;
}
#ads-vantaggi > .svc-generic-sticky {
  padding-block: clamp(7rem, 13vh, 9rem) clamp(2.5rem, 5vh, 4rem) !important;
}
main > section.svc-process .svc-process__title {
  color: #fff !important;
  text-align: center;
  margin-bottom: clamp(1.75rem, 3.5vh, 2.75rem) !important;
}
main > section.svc-process .svc-process__grid {
  gap: clamp(1rem, 1.8vw, 1.5rem) !important;
  counter-reset: vantaggio;
  align-items: start !important;
}
/* la colonna centrale sfalsata: la griglia smette di leggersi come
   una tabella. Sono 22px, quindi non cambia i conti dell'altezza */
main > section.svc-process .svc-process__card:nth-child(3n + 2) {
  margin-top: 22px;
}

/* ── Il pannello di vetro ─────────────────────────────────────── */
main > section.svc-process .svc-process__card {
  position: relative;
  counter-increment: vantaggio;
  overflow: hidden;
  /* height: auto contro un height: 100% !important che sta piu' a
     monte: con le card sfalsate serve che ognuna sia alta quanto
     il suo contenuto */
  height: auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(1rem, 1.6vw, 1.4rem);
  row-gap: 0.4rem;
  align-items: start;
  background: rgba(255,255,255,0.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.28) !important;
  border-radius: 22px !important;
  padding: clamp(1.35rem, 2.2vw, 1.85rem) clamp(1.4rem, 2.2vw, 1.9rem) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,0.14) !important;
  transition: background 420ms ease, border-color 420ms ease,
              box-shadow 420ms ease !important;
}
main > section.svc-process .svc-process__card:hover {
  background: rgba(255,255,255,0.19) !important;
  border-color: rgba(255,255,255,0.65) !important;
  box-shadow: 0 26px 60px rgba(0,0,0,0.20),
              0 0 0 1px rgba(255,255,255,0.25) !important;
  transform: none !important;
}
/* ── I simboli, senza contenitore ────────────────────────────────
   Il quadrato attorno all'icona era il problema di fondo: sulla
   card di vetro diventava un terzo riquadro — card, quadrato,
   glifo — e per starci dentro il glifo restava piccolo. Qualunque
   colore gli dessi, a riposo o in hover, era il riquadro a non
   funzionare: bianco su bianco, fucsia su fucsia, nero e brutto.
   Via il contenitore. Resta il solo simbolo, bianco, grande:
   54px contro i 39 effettivi di prima. Sul campo fucsia il bianco
   e' il valore di contrasto massimo, e vale in tutti gli stati —
   non serve piu' invertire niente.
   I disegni sono stati rifatti con la regola che vale per le icone
   a questa misura: massimo tre o quattro tratti, nessun dettaglio
   interno. Scudo con spunta per la protezione dagli sprechi,
   curva in salita per i profitti, corona per la leadership,
   bersaglio per il pubblico giusto, istogramma per i numeri,
   elenco puntato per le liste.
   In hover non cambia il colore ma il peso: il tratto passa da
   1.7 a 2.05 e il simbolo sale di due pixel. Il riscontro forte
   lo da' gia' la card, che si schiarisce e accende il bordo. */
main > section.svc-process .svc-process__icon {
  grid-area: 1 / 1 / 3 / 2 !important;
  width: clamp(44px, 3.7vw, 54px) !important;
  height: clamp(44px, 3.7vw, 54px) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  margin: 0 !important;
  transition: transform 420ms cubic-bezier(0.22,1,0.36,1) !important;
}
main > section.svc-process .svc-process__card:hover .svc-process__icon {
  transform: translateY(-2px) !important;
}
main > section.svc-process .svc-process__icon svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  /* piu' a monte c'e' un ".svc-process__icon svg { color: #fff }":
     con inherit il colore torna a essere quello del contenitore,
     cosi' resta una sola sorgente di verita' */
  color: inherit !important;
}
main > section.svc-process .svc-process__icon svg,
main > section.svc-process .svc-process__icon svg * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke-width 420ms ease;
}
main > section.svc-process .svc-process__card:hover .svc-process__icon svg,
main > section.svc-process .svc-process__card:hover .svc-process__icon svg * {
  stroke-width: 2.05 !important;
}
/* i punti dell'elenco sono pieni, non anelli */
main > section.svc-process .svc-process__icon svg [fill="currentColor"] {
  fill: currentColor !important;
  stroke: none !important;
}

/* ── Titolo e testo, in chiaro sul vetro ─────────────────────── */
main > section.svc-process .svc-process__card-title {
  grid-area: 1 / 2 / 2 / 3;
  color: #fff !important;
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  /* lo spazio per la cifra */
  padding-right: clamp(2.5rem, 3.4vw, 3.4rem);
}
main > section.svc-process .svc-process__card-text {
  grid-area: 2 / 2 / 3 / 3;
  color: rgba(255,255,255,0.86) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
main > section.svc-process .svc-process__card-text strong {
  color: #fff !important;
  font-weight: 700;
}

/* ── Il numerale a contorno ──────────────────────────────────── */
/* Il numero non e' piu' un numerale a contorno: era un segno
   fragile, che a corpo grande si sfilaccia. Ora e' una cifra
   piena e piccola, nel corpo del microcopy, appoggiata a un filo
   orizzontale — si legge come un indice, non come decorazione. */
/* Il numero: cifra piena, senza filo sotto e con un corpo che si
   vede — 28px del font dei titoli. Niente contorno, che a corpo
   grande si sfilaccia. */
main > section.svc-process .svc-process__card::after {
  content: counter(vantaggio, decimal-leading-zero);
  position: absolute;
  top: clamp(1.2rem, 2vw, 1.6rem);
  right: clamp(1.3rem, 2.1vw, 1.8rem);
  font-family: var(--font-primary);
  font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  color: rgba(255,255,255,0.50);
  pointer-events: none;
  transition: color 420ms ease;
}
main > section.svc-process .svc-process__card:hover::after {
  color: #fff;
}

@media (max-width: 900px) {
  main > section.svc-process .svc-process__card:nth-child(3n + 2) { margin-top: 0; }
}
@media (max-width: 640px) {
  main > section.svc-process .svc-process__card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 0.8rem;
  }
  main > section.svc-process .svc-process__icon { grid-area: auto !important; }
  main > section.svc-process .svc-process__card-title,
  main > section.svc-process .svc-process__card-text { grid-area: auto; }
}
/* ── Social ADS: le due sezioni entrano in una schermata ────────
   Lo script che aggancia le sezioni misura il pannello e, se il
   contenuto sfora, torna indietro: meglio una sezione libera che
   una tagliata. Queste due sforavano, quindi restavano senza
   blocco. Qui si stringono quanto basta perche' la misura passi.
   Il corpo dei testi non si tocca: si recupera dai respiri, dal
   corpo dei titoli e dalla dimensione delle icone. */
/* Della compattazione che avevo messo su questa sezione resta
   solo il corpo del titolo, che avevi chiesto piu' piccolo. Tutto
   il resto — passo fra le colonne, respiri dei paragrafi, padding
   del pannello laterale, stacco del box CTA — e' tornato ai valori
   del componente, cioe' esattamente quelli della sezione gemella
   su Google Ads: erano quelle differenze a spostare le colonne e
   il testo rispetto a li'. */
#ads-detail .svc-section-title {
  /* Scende da 46 a 38px: sono ~16px per riga, due righe, quindi
     una trentina di pixel in meno da far entrare nel pannello.
     E' l'unica leva che tocco: tutto il resto della sezione ha i
     valori del componente, cioe' quelli della gemella su Google
     Ads, e cambiarli la disallineerebbe di nuovo. */
  font-size: clamp(1.75rem, 3.1vw, 38px) !important;
  line-height: 1.05 !important;
}

/* i vantaggi: sei tessere su due righe, tutte dentro la schermata */
/* Del blocco per id resta solo il corpo del titolo: tutto il
   resto — respiri, icona, card — lo detta ora il disegno
   orizzontale qui sopra, e queste regole, avendo un id davanti,
   lo scavalcavano rimettendo il margine sotto all'icona e
   rompendo l'allineamento su due colonne. */
#ads-vantaggi .svc-process__title {
  font-size: clamp(1.75rem, 3.4vw, 46px) !important;
}

/* Il filetto sotto l'ultima voce dei talent chiudeva l'elenco, ma
   ora sotto c'e' "Facciamo anche questo": leggeva come una linea
   di separazione fra i due, che non serve. */
main > section.svc-talent-pronti .svc-talent-pronti__item:last-child {
  border-bottom: 0 !important;
}
/* Il "%" era in apice sopra un numero riempito da una sfumatura
   ritagliata sul testo: l'alzata lo faceva uscire dalla riga e
   sembrava sovrapposto. Resta sulla linea di base, appena piu'
   piccolo e staccato. */
/* Il numero e' riempito da una sfumatura ritagliata sul testo:
   il riempimento e' dichiarato trasparente e la sfumatura sta sul
   contenitore. Il "%" e' un figlio, quindi ereditava il
   riempimento trasparente senza avere una sfumatura propria: si
   vedeva attraverso, e sembrava sovrapposto a qualcos'altro. Qui
   riprende un colore pieno, il fucsia di brand, e torna sulla
   linea di base invece che in apice. */
.svc-stat-video__num .svc-stat-video__pct {
  font-size: 0.38em !important;
  vertical-align: baseline !important;
  line-height: 1 !important;
  margin-left: 0.06em;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--primary, #DB005A) !important;
  -webkit-text-fill-color: var(--primary, #DB005A) !important;
}


/* ── L'elenco dei talent ────────────────────────────────────────
   Erano tre paragrafi separati da un filetto, con l'etichetta in
   fucsia sopra: leggibili ma senza ritmo. Diventano tre voci
   numerate — lo stesso segno che la pagina usa nelle schede e nei
   settori — con l'etichetta trasformata in una targhetta e una
   barra di brand che si disegna a sinistra al passaggio del mouse.
   Testi invariati. */
main > section.svc-talent-pronti .svc-talent-pronti__content {
  counter-reset: talent;
}
main > section.svc-talent-pronti .svc-talent-pronti__item {
  position: relative;
  counter-increment: talent;
  padding-left: clamp(3.5rem, 5.5vw, 4.75rem) !important;
  transition: background 320ms ease;
}
/* il numero, nel cerchio */
main > section.svc-talent-pronti .svc-talent-pronti__item::before {
  content: counter(talent, decimal-leading-zero);
  position: absolute;
  left: clamp(0.4rem, 1vw, 0.9rem);
  top: clamp(1.1rem, 2vw, 1.7rem);
  width: clamp(34px, 3vw, 40px);
  height: clamp(34px, 3vw, 40px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(219,0,90,0.28);
  font-family: var(--font-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--primary, #DB005A);
  transition: background 320ms ease, border-color 320ms ease,
              color 320ms ease, transform 320ms cubic-bezier(.34,1.56,.64,1);
}
/* la barra di brand a sinistra, che si disegna dall'alto */
main > section.svc-talent-pronti .svc-talent-pronti__item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #FF3D86, #DB005A);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 440ms cubic-bezier(0.22,1,0.36,1);
}
main > section.svc-talent-pronti .svc-talent-pronti__item:hover { background: rgba(219,0,90,0.03); }
main > section.svc-talent-pronti .svc-talent-pronti__item:hover::after { transform: scaleY(1); }
main > section.svc-talent-pronti .svc-talent-pronti__item:hover::before {
  background: var(--primary, #DB005A);
  border-color: var(--primary, #DB005A);
  color: #fff;
  transform: scale(1.06);
}
/* l'etichetta diventa una targhetta: si stacca dal paragrafo senza
   bisogno di alzare il corpo */
main > section.svc-talent-pronti .svc-talent-pronti__label {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.8em;
  border-radius: 100px;
  background: rgba(219,0,90,0.08);
  border: 1px solid rgba(219,0,90,0.22);
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 0.65rem !important;
  transition: background 320ms ease, border-color 320ms ease;
}
main > section.svc-talent-pronti .svc-talent-pronti__item:hover .svc-talent-pronti__label {
  background: rgba(219,0,90,0.14);
  border-color: rgba(219,0,90,0.40);
}

/* ── I simboli dei settori ──────────────────────────────────────
   Erano glifi a filo sottile, con un riempimento all'8% che sul
   nero non si vedeva e un tratto che il CSS portava a 1.5 contro
   il 2.5 dichiarato nell'SVG: sembravano sbiaditi e incoerenti fra
   loro. Ora ogni simbolo sta in una piastrella di brand — angoli
   morbidi, sfumatura fucsia, bordo appena visibile — e il glifo e'
   rosa chiaro con un tratto pieno. In hover la piastrella si
   riempie e il glifo passa al bianco. */
main > section.svc-settori .svc-settori__item svg {
  box-sizing: content-box;
  width: clamp(24px, 2.2vw, 28px) !important;
  height: clamp(24px, 2.2vw, 28px) !important;
  padding: clamp(12px, 1.4vw, 16px);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(219,0,90,0.30), rgba(219,0,90,0.08));
  border: 1px solid rgba(219,0,90,0.32);
  color: #FF6BA3 !important;
  stroke-width: 2 !important;
  overflow: visible;
  transition: background 320ms ease, border-color 320ms ease,
              color 320ms ease, transform 320ms cubic-bezier(.34,1.56,.64,1);
}
/* il riempimento al 8% dichiarato nell'SVG spariva sul fondo: qui
   diventa una velatura leggibile che da' corpo alla forma */
main > section.svc-settori .svc-settori__item svg [fill="currentColor"] {
  fill-opacity: 0.22;
}
main > section.svc-settori .svc-settori__item:hover svg {
  background: linear-gradient(145deg, #FF3D86, #DB005A);
  border-color: transparent;
  color: #fff !important;
  transform: translateY(-3px) scale(1.04);
}
main > section.svc-settori .svc-settori__item:hover svg [fill="currentColor"] {
  fill-opacity: 0.28;
}
/* su carta chiara la piastrella resta la stessa, solo piu' tenue */
main > section.svc-bg-light.svc-settori .svc-settori__item svg {
  background: linear-gradient(145deg, rgba(219,0,90,0.16), rgba(219,0,90,0.05));
  border-color: rgba(219,0,90,0.20);
  color: var(--primary, #DB005A) !important;
}
main > section.svc-bg-light.svc-settori .svc-settori__item:hover svg {
  background: linear-gradient(145deg, #FF3D86, #DB005A);
  color: #fff !important;
}

/* ── Le sezioni scure prendono un alone fucsia ──────────────────
   Il nero pieno, ripetuto su piu' sezioni, appiattisce la pagina.
   Due aloni fucsia molto tenui — uno alto a sinistra, uno basso a
   destra — danno profondita' senza toccare la leggibilita': la
   luminosita' resta praticamente quella del nero.
   Restano fuori la sezione fucsia, che ha gia' il suo colore, i
   clienti, dove il nero pieno serve a far sparire il bordo del
   video, e il footer. Le sezioni che dichiarano una sfumatura
   propria la mantengono: questa vale solo dove non c'e'. */
main > section.svc-bg-dark:not(.svc-clients):not(.svc-caffe) {
  background-image:
    radial-gradient(ellipse 60% 55% at 12% 8%, rgba(219,0,90,0.16) 0%, transparent 62%),
    radial-gradient(ellipse 50% 50% at 90% 92%, rgba(219,0,90,0.10) 0%, transparent 58%) !important;
  background-color: #060606 !important;
  background-repeat: no-repeat !important;
}
/* il pannello agganciato resta trasparente, quindi l'alone si
   vede per tutta la corsa e non solo dietro al contenuto */
main > section.svc-bg-dark:not(.svc-clients) > .svc-generic-sticky,
main > section.svc-bg-dark:not(.svc-clients) > .svc-path__sticky,
main > section.svc-bg-dark:not(.svc-clients) > .page-faq__sticky {
  background: none !important;
}


/* ── L'apertura di Social ADS ───────────────────────────────────
   La corsa e' piu' lunga della solita — 136dvh contro 118 — per un
   motivo preciso: quando il pannello si sgancia, il resto della
   corsa e' l'unico spazio che separa la CTA "Richiedi un
   preventivo" dalla sezione che sale. Con 18dvh la sezione
   seguente le arrivava addosso; con 36 c'e' respiro. */
#ads-detail.svc-generic-runway {
  height: 136dvh !important;
}
#ads-detail > .svc-generic-sticky {
  /* Contenuto centrato nella schermata, come su Google Ads: la
     gemella usa il pannello condiviso, che centra e ha il suo
     respiro. Qui c'era un allineamento in alto con un respiro
     diverso, ed era la ragione per cui le due sezioni non si
     leggevano uguali. */
  justify-content: center;
  padding-block: clamp(4rem, 8vh, 6rem) !important;
}
/* Da avvolta la sezione e' una corsa, non un contenitore flex: lo
   stile di pagina la dichiara flex con align-items: center, e su
   una corsa piu' alta della finestra quel centraggio litiga con il
   pannello agganciato. */
#ads-detail.svc-generic-runway {
  display: block !important;
  align-items: normal !important;
}
/* Struttura ripristinata: due colonne come su Google Ads, titolo
   dentro la prima, testi allineati a sinistra. */

/* ═══════════════════════════════════════════════════════════════
   HEADER — colore di "Menu" e del suo simbolo
   La regola e' una: fucsia su fondo chiaro, bianco su fondo scuro
   o fucsia. Il tema lo decide .nav--on-dark, che lo script mette
   quando sotto la nav passa una sezione scura o la sezione fucsia.
   Prima, sul fondo scuro, restavano fucsia — dichiarato cosi' sia
   qui che, in !important, nei blocchi locali di una decina di
   pagine. Su nero il fucsia di brand ha un contrasto di poco piu'
   di 4:1 su un testo piccolo, e sulla fucsia stessa spariva.
   La specificita' e' alzata con html body davanti perche' quelle
   regole locali arrivano dopo e sono tutte in !important: senza,
   continuerebbero a vincere loro pagina per pagina.
   ═══════════════════════════════════════════════════════════════ */
/* Il .nav ripetuto due volte non e' un errore di battitura: la
   regola locale piu' forte da battere e'
   ".nav:not(.scrolled).nav--on-dark .nav__menu-btn", che vale
   quattro classi. Ripetere la classe e' il modo per pareggiarla e
   superarla senza inventare selettori finti o toccare dieci file. */
html body .nav.nav:not(.nav--on-dark) .nav__menu-btn {
  color: var(--primary, #DB005A) !important;
  text-shadow: none !important;
}
html body .nav.nav:not(.nav--on-dark) .nav__menu-icon span {
  background: var(--primary, #DB005A) !important;
  filter: none !important;
}
html body .nav.nav.nav--on-dark .nav__menu-btn {
  color: #fff !important;
  text-shadow: none !important;
}
html body .nav.nav.nav--on-dark .nav__menu-icon span {
  background: #fff !important;
  filter: none !important;
}

/* ── Le etichette del menu a tendina a 14px ─────────────────────
   "I Nostri Servizi", "Esplora", "Team" stavano a --text-xs, cioe'
   11px, e una decina di pagine le riportava a 16px in !important:
   due misure diverse a seconda della pagina. Una sola, 14px, che
   e' il corpo del microcopy del sito. */
html body .nav__mega-label {
  font-size: 14px !important;
}

/* ── Form contatti in homepage: etichette e placeholder ─────────
   Qui la gerarchia si inverte rispetto al resto del sito. Di norma
   l'etichetta e' microcopy a 14px e il campo testo di lettura a 16.
   In questo form l'etichetta sale a 16 e il placeholder scende a
   14: l'etichetta e' l'informazione che resta, il placeholder e'
   un suggerimento che sparisce appena scrivi, quindi puo' pesare
   meno.
   Scopato a #contatti, cioe' alla sola sezione della homepage: la
   classe .hc-form la usano anche i form prima del footer di altre
   nove pagine, che restano come sono. */
html body #contatti .hc-form .f-label {
  font-size: 16px !important;
}
html body #contatti .hc-form .svc-caffe__field::placeholder {
  font-size: 14px !important;
}
html body #contatti .hc-form .svc-caffe__field::-webkit-input-placeholder {
  font-size: 14px !important;
}

/* ── L'occhiello della hero, una misura per tutte ────────────────
   "Social Media Management", "Google ADS", "Strategia Digitale":
   la stessa riga, e stava a due misure diverse. Il componente la
   dichiara a --text-xs, cioe' 11px; otto pagine servizi la
   riportavano a 14 nel loro elenco del microcopy, e Google Ads e
   Social Media Management — le due che avevo sistemato a mano — no.
   A parita' di peso vinceva il blocco di pagina, quindi otto a 14 e
   due a 11. Qui la misura e' una: 14px, come tag, occhielli e CTA
   in tutto il sito. */
html body .svc-hero__kicker {
  font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PAGINE SERVIZI — FAQ e "Prendiamoci un caffè"
   Le due sezioni chiudono ogni pagina servizi e ora hanno lo
   stesso corpo di titolo: 72px. Prima erano lontanissime — la FAQ
   a 150px per la regola dei titoli grandi, il caffè a 60px per
   quella dei titoli di sezione — e una accanto all'altra la
   sproporzione si vedeva.
   I due selettori passano da .page-faq__sticky e da .svc-caffe,
   che esistono solo nelle dieci pagine servizi: la FAQ della
   homepage, che ha una scala sua, non viene toccata.
   ═══════════════════════════════════════════════════════════════ */
/* Il titolo: 72px nelle pagine servizi, 150px in homepage.
   In homepage "Domande Frequenti" a 150px non sta su una riga —
   diciassette caratteri chiedono ~1400px e il contenitore ne da'
   1200 — quindi va su due righe. Due righe a 150px sono 300px di
   altezza contro i 90 effettivi di "FAQ": nel pannello, che e'
   alto una schermata e non ha piu' scorrimento interno, i 128px in
   piu' avrebbero tagliato il fondo dell'elenco.
   Lo spazio si recupera dalle spaziature e dal cerchio dell'occhio,
   mai dal corpo dei testi: domande e risposte restano dove sono.
   Il conto su una finestra da 900px: 140 di respiri + ~240 di
   titolo (300 meno i due margini negativi che togliono lo spazio
   interno della riga) + 9 righe da ~52px = 848 su 900. */
html body main > section.page-faq > .page-faq__sticky .page-faq__title {
  font-size: min(60px, 11vw) !important;
}
html body main > section.page-faq > .page-faq__inner .page-faq__title {
  /* Il titolo e' tornato "FAQ": tre lettere, una riga sola. I 150px
     sono quindi il valore pieno e non hanno piu' bisogno del limite
     in altezza (17vh) che serviva quando "Domande Frequenti" ne
     occupava due e rischiava di far tagliare il fondo dell'elenco.
     Resta un limite in larghezza per i telefoni molto stretti. */
  font-size: min(150px, 40vw) !important;
  line-height: 0.92 !important;
  /* Lo stacco fra titolo e contenuto, come nelle altre sezioni
     della homepage: Tips usa --space-16, cioe' 4rem. Il -0.14em non
     e' un capriccio: il font si porta dietro dello spazio sotto la
     linea di base — su un corpo di 150px sono una ventina di pixel
     — e senza sottrarlo lo stacco che si vede sarebbe piu' grande
     di quello dichiarato. Cosi' il valore scritto e quello
     percepito coincidono. */
  margin-bottom: calc(clamp(2rem, 5.5vh, 4rem) - 0.14em) !important;
}
/* Con il titolo su una riga tornano ~140px di spazio nel pannello:
   le righe delle domande e il cerchio dell'occhio riprendono il
   respiro che avevano prima della stretta. */
html body main > section.page-faq > .page-faq__inner .page-faq__question {
  padding-block: clamp(0.7rem, 1.6vh, 1.1rem) !important;
}
html body main > section.page-faq > .page-faq__inner .page-faq__eye {
  width: 34px;
  height: 34px;
}
html body main > section.page-faq > .page-faq__inner .page-faq__eye svg {
  width: 16px;
  height: 16px;
}
html body .svc-caffe .svc-caffe__title {
  font-size: min(60px, 11vw) !important;
}

/* ── Il form della sezione fucsia: etichette e placeholder ──────
   Stessa inversione del form contatti in homepage: l'etichetta e'
   l'informazione che resta e sale a 16px, il placeholder e' un
   suggerimento che sparisce appena scrivi e scende a 14. */
html body .svc-caffe .f-label {
  font-size: 16px !important;
}
html body .svc-caffe .svc-caffe__field::placeholder {
  font-size: 14px !important;
}
html body .svc-caffe .svc-caffe__field::-webkit-input-placeholder {
  font-size: 14px !important;
}

/* ── "(facoltativo)" non si spezza e non resta orfano ───────────
   Due accorgimenti, perche' i casi sono due. Il nowrap impedisce
   che la parola si rompa a meta'. Il resto lo fa la larghezza: la
   riga del consenso occupava la sola colonna del form, e a 16px la
   frase non ci stava, quindi "(facoltativo)" cadeva da solo sulla
   riga dopo. I consensi prendono tutta la larghezza del pannello,
   cosi' la frase sta su una riga e il "(facoltativo)" le resta
   accanto. */
html body .svc-caffe .svc-caffe__privacy em {
  white-space: nowrap;
}
/* La leva vera e' la larghezza della colonna del form. Le due
   colonne erano 1fr e 1fr con un passo fino a 8vw: a 1440px il
   form aveva ~562px, e a 16px la frase del consenso non ci stava
   su una riga. Il titolo a sinistra, anche a 72px, occupa meno —
   "Prendiamoci" sta in ~440px — quindi la colonna di sinistra puo'
   cedere spazio. Con 0.85/1.15 e un passo piu' corto il form
   arriva a ~646px: dieci caratteri in piu' per riga, che bastano a
   tenere "(facoltativo)" in fila con il resto della frase. */
html body .svc-caffe .svc-caffe__inner {
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 4vw, 4.5rem);
}
html body .svc-caffe .hc-consents .svc-caffe__privacy span {
  /* la frase non si spezza fra l'ultima parola e la parentesi: se
     proprio deve andare a capo, lo fa prima */
  text-wrap: pretty;
}
/* Le parole non si spezzano mai a meta': "Domande" e "Frequenti"
   vanno a capo intere. Perche' possano farlo anche su schermi
   stretti il corpo scende sotto i 900px di larghezza: a 150px la
   sola parola "Domande" chiede ~570px e non ci starebbe. */
html body main > section.page-faq > .page-faq__inner .page-faq__title {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
@media (max-width: 900px) {
  html body main > section.page-faq > .page-faq__inner .page-faq__title {
    font-size: min(96px, 17vw) !important;
  }
}

/* L'eccezione della sezione fucsia: il suo pannello non ritaglia.
   Il contenuto ci sta per un margine stretto — ~608px su 756 — e
   se i caratteri arrivano tardi puo' sforare di qualche pixel. In
   quel caso e' meglio che esca nella corsa, che ha 16dvh di
   margine in fondo, che vedersi tagliare una riga del form.
   La specificita' e' alzata di proposito: senza, la regola qui
   sopra glielo rimetterebbe. */
html.js-reveal .svc-caffe-runway.sx-rise > .svc-generic-sticky {
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   GOOGLE ADS — la sezione di apertura
   Le misure seguono la regola del sito: il corpo del testo a 16px,
   il microcopy — CTA, etichette, voci dell'elenco delle campagne —
   a 14. Il titolo aveva un font-size di 79px scritto inline, che
   la misura condivisa dei titoli di sezione scavalcava comunque:
   l'ho tolto dal markup perche' era una dichiarazione morta che
   confondeva.
   ═══════════════════════════════════════════════════════════════ */
#gads-detail .service-detail__body,
#gads-detail .service-detail__body p {
  font-size: 16px !important;
  line-height: 1.7 !important;
}
#gads-detail .service-detail__item,
#gads-detail .service-detail__panel-title,
#gads-detail .service-detail__cta-label,
#gads-detail .btn {
  font-size: 14px !important;
}
/* le voci dell'elenco si stringono: sono sette, e il pannello deve
   restare dentro la schermata insieme al resto */
#gads-detail .service-detail__item { padding-block: 0.4rem !important; }
#gads-detail .service-detail__panel { padding: clamp(1.25rem, 2vw, 1.75rem) !important; }
#gads-detail .service-detail__cta-box { margin-top: clamp(1rem, 2vh, 1.5rem) !important; }

/* ── I tool: le etichette a 14px ─────────────────────────────────
   Sono nomi di prodotto sotto un'icona, cioe' didascalie: la
   regola del sito le vuole a 14, non al corpo del testo. */
html body .svc-tools__item span {
  font-size: 14px !important;
}

/* ── La salita della prima sezione dopo la hero ──────────────────
   Su questa transizione ho sbagliato bersaglio piu' volte, cercando
   un difetto che non c'era: la salita funzionava, era solo troppo
   timida per leggersi. Le altre sezioni arrivano su un fondo dello
   stesso tono e i 22px di sollevamento bastano; questa arriva su
   una hero scura, a tutta pagina, e 22px su quel contrasto non si
   distinguono da un normale scorrimento.
   Qui il raccordo raddoppia: 48px di sollevamento, angoli fino a
   44px e un'ombra piu' profonda. Il selettore prende la sezione
   che segue la hero, qualunque sia — .svc-path su sette pagine,
   .service-detail su Google Ads e Social ADS, .imk-intro su
   Influencer — quindi la transizione e' la stessa su tutte e dieci
   e non serve una regola per pagina. */
html.js-reveal main > section.svc-hero + section.sx-rise {
  transform: translateY(calc((1 - var(--sxi, 1)) * -48px));
  border-radius: calc((1 - var(--sxi, 1)) * 44px)
                 calc((1 - var(--sxi, 1)) * 44px) 0 0;
  box-shadow: 0 calc((1 - var(--sxi, 1)) * -22px)
                calc((1 - var(--sxi, 1)) * 48px) rgba(0,0,0,0.42);
}
/* la fascia che riempie il tratto scoperto cresce di conseguenza:
   sono i pixel fra il bordo basso della sezione sollevata e quella
   che segue, e devono restare del colore della sezione */
html.js-reveal main > section.svc-hero + section.sx-rise::after {
  height: calc((1 - var(--sxi, 1)) * 48px);
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal main > section.svc-hero + section.sx-rise {
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ── La prima sezione dopo la hero: stessa corsa di Google Ads ───
   Su Google Ads quella sezione e' agganciata dal meccanismo
   condiviso, quindi la sua corsa vale 118dvh: 100 di pannello
   fermo piu' 18 di scorrimento. Le sette pagine in cui dopo la
   hero c'e' la timeline dei servizi dichiaravano 112dvh nel loro
   blocco locale — sei punti in meno, cioe' un tratto di
   scorrimento piu' corto dopo lo sgancio, e la salita si
   consumava in meno spazio.
   Con la stessa corsa e il raccordo condiviso qui sopra, le due
   transizioni sono identiche per costruzione: non c'e' piu' una
   pagina che si comporta diversamente dall'altra. */
html body main > section.svc-hero + section.svc-path {
  height: 118dvh;
}

/* ── Le sezioni che salgono ritagliano i propri angoli ───────────
   Qui stava il difetto che non riuscivo a trovare. Un border-radius
   ritaglia il fondo dell'elemento, ma NON i suoi figli: per farlo
   serve un overflow. Le sezioni agganciate hanno dentro un pannello
   alto una schermata, e quel pannello — che parte dal bordo alto
   della sezione — disegna sopra i due angoli e li squadra. La
   sezione dei clienti si salvava perche' il suo pannello eredita
   raggio e ombra, quindi gli angoli sono i suoi; le altre no.
   Il ritaglio si fa con "clip" e non con "hidden": hidden crea un
   contenitore di scorrimento e romperebbe il position: sticky del
   pannello, cosa che ha gia' fatto danni in passato. clip ritaglia
   senza creare quel contenitore.
   overflow-clip-margin allarga il ritaglio di 60px oltre il bordo,
   cosi' sopravvive la fascia ::after che riempie il tratto lasciato
   scoperto dal sollevamento: e' fuori dal riquadro, e con un clip
   secco spariva. */
html.js-reveal main > section.sx-rise {
  /* !important perche' diverse pagine dichiarano
     "overflow: visible !important" sulle sezioni agganciate. Lo
     facevano per una ragione vera — con "hidden" il pannello si
     ancorava alla sezione invece che alla finestra e lo sticky si
     rompeva — ma con "clip" quella ragione non vale: clip ritaglia
     senza creare un contenitore di scorrimento. */
  overflow: clip !important;
  overflow-clip-margin: 60px;
}
/* La sezione fucsia resta fuori: il suo pannello non ha altezza
   fissa e puo' crescere oltre la corsa, e un ritaglio la
   taglierebbe. Non ha angoli da difendere, il fondo e' pieno. */
html.js-reveal main > section.sx-rise.svc-caffe {
  overflow: visible !important;
}

/* La sezione dopo la hero ritaglia in ogni caso: e' quella con il
   raccordo piu' marcato — 44px di raggio — e quella su cui il
   difetto si vedeva. L'!important serve perche' un paio di pagine
   dichiarano overflow: visible sulle sezioni agganciate, per una
   ragione che con "clip" non vale piu' (clip non crea contenitori
   di scorrimento, quindi non tocca il position: sticky). */
html.js-reveal main > section.svc-hero + section.sx-rise {
  overflow: clip !important;
  overflow-clip-margin: 72px;
}

/* ── Il passaggio dai tool alla timeline, su Google Ads ──────────
   Togliendo i tool dal blocco a piena schermata la sezione e'
   tornata alta quanto il suo contenuto: una striscia di poche
   centinaia di pixel fra due sezioni agganciate, che si attraversa
   in un attimo e non si legge come una sezione. Il raccordo con la
   timeline che segue non aveva spazio per vedersi.
   Non torna a occupare una schermata — non deve — ma prende un
   minimo di altezza e respiri veri, cosi' la salita della sezione
   seguente ha su cosa appoggiarsi. */
main > section.svc-tools-section {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3.5rem, 7vh, 5.5rem) !important;
}

/* ── Il pannello della prima sezione, allineato a Google Ads ─────
   Ultima asimmetria fra le pagine. La sezione dopo la hero e' di
   due tipi: .service-detail agganciata dal meccanismo condiviso —
   Google Ads e Social ADS — oppure .svc-path con un pannello suo,
   sulle altre sette. Le due costruzioni sono ormai identiche in
   tutto (corsa 118dvh, pannello 100dvh, fondo trasparente, angoli
   della sezione, ritaglio) tranne in una cosa: il respiro sopra al
   contenuto. Il pannello condiviso ne ha 64-96px, quello di
   .svc-path 128-176, cioe' il doppio. Con il doppio di respiro il
   contenuto durante la salita sta molto piu' in basso, e la
   sezione che entra sembra muoversi meno.
   Qui prende lo stesso respiro del pannello condiviso, con un
   pavimento: mai meno del bordo basso della nav piu' un dito, che
   e' la ragione per cui quel valore era stato alzato. */
html body main > section.svc-hero + section.svc-path > .svc-path__sticky {
  padding-top: max(clamp(4rem, 8vh, 6rem), calc(var(--nav-h, 100px) + 1rem)) !important;
  padding-bottom: clamp(2rem, 4vh, 3rem) !important;
}


/* ═══════════════════════════════════════════════════════════════
   SERVIZIO AI — "Un approccio trasparente" e il workflow
   ═══════════════════════════════════════════════════════════════ */
/* Gli occhielli delle due sezioni — "IL NOSTRO APPROCCIO" e
   "COME LAVORIAMO" — a 14px: e' la misura che il sito da' a tag,
   occhielli e CTA. Stavano a --text-xs, cioe' 11px. */
html body .svc-ai-pill-kicker {
  font-size: 14px !important;
}
/* Il titolo scende alla misura dei titoli di sezione, 60px: era
   fino a 2.6rem, quindi fuori scala rispetto a tutte le altre
   sezioni del sito. */
html body .svc-ai-approccio__title {
  font-size: min(60px, 11vw) !important;
  line-height: 1.02 !important;
}
/* "Durante la fase di briefing definiamo con precisione:" non e'
   un paragrafo, e' l'intestazione dell'elenco che segue: prende
   corpo, peso e spaziatura di un titoletto, e lo stacco sotto lo
   da' la regola invece di uno stile scritto inline. */
html body .svc-ai-approccio__lead {
  font-family: var(--font-primary) !important;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem) !important;
}
/* La CTA replica il pulsante "Contattaci" della sezione fucsia
   (.svc-caffe .btn--primary): fondo bianco, testo nero e
   sollevamento di 2px, senza tendina — quella regola spegne il
   ::before, quindi il colore cambia in un colpo pulito e a
   muoversi e' solo il pulsante. Qui i valori sono ripetuti perche'
   la sezione non e' .svc-caffe, e il movimento porta !important:
   il loop di scroll scrive un transform inline sul pulsante per
   l'entrata e senza !important vincerebbe lui. Il resto del blocco
   inline (transform, transition, will-change) lo libera lo script
   a rivelazione finita, altrimenti l'hover cambierebbe i valori
   di colpo, senza easing: era quello a far sembrare che l'effetto
   non ci fosse. */
html body .svc-ai-approccio .btn--primary::before { display: none !important; }
html body .svc-ai-approccio .btn--primary:hover,
html body .svc-ai-approccio .btn--primary:focus-visible {
  background: var(--white) !important;
  background-image: none !important;
  border-color: var(--white) !important;
  color: var(--black) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
}


/* ═══════════════════════════════════════════════════════════════
   HEADER — nessun flash al caricamento
   Per i primi due frame la nav non anima nulla: lo stato chiaro/
   scuro viene calcolato prima del paint (js/main.js) e senza
   questa pausa la transition di 0.35s avrebbe comunque mostrato
   il passaggio dal colore di default a quello giusto.
   ═══════════════════════════════════════════════════════════════ */
html body .nav.nav--boot,
html body .nav.nav--boot .nav__inner,
html body .nav.nav--boot .nav__menu-btn,
html body .nav.nav--boot .nav__menu-icon span,
html body .nav.nav--boot .nav__logo img,
html body .nav.nav--boot .nav__icon-btn,
html body .nav.nav--boot .nav__lang-btn {
  transition: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   UN SOLO EFFETTO PER TITOLO — acqua
   "ALCUNI AMICI SODDISFATTI / CHE CI HANNO DATO FIDUCIA" aveva due
   effetti sovrapposti: il reveal lettera per lettera e l'acqua. Il
   reveal e' stato rimosso dagli script, qui vanno spenti gli stati
   iniziali che lo preparavano (opacita' 0 e traslazione), altrimenti
   il titolo resterebbe invisibile. Stessa cosa per i due titoli
   della pagina AI passati all'acqua.
   ═══════════════════════════════════════════════════════════════ */
html body .svc-clients__title,
html body .svc-ai-approccio__title,
html body .svc-ai-workflow__title {
  opacity: 1 !important;
  transform: none !important;
}
html body .svc-clients__title .tl,
html body .svc-ai-approccio__title .tl,
html body .svc-ai-workflow__title .tl {
  opacity: 1 !important;
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   WEB DESIGN — la timeline, prima sezione dopo la hero
   Su carta bianca. Il pannello sta in una schermata sola e non
   scorre: la CTA in fondo non puo' finire fuori vista, quindi il
   titolo e' compattato e il corpo dei testi segue l'altezza della
   finestra invece di essere fisso.
   ═══════════════════════════════════════════════════════════════ */
/* Il titolo era la voce che sforava: due righe in corpo enorme piu'
   la timeline piu' il pannello non stavano in 100dvh. Corpo legato
   anche all'altezza della finestra, interlinea chiusa e respiri
   ridotti: rientra senza spezzare nessuna parola. */
html body #wd-stack .svc-path__head {
  margin-bottom: clamp(0.9rem, 2vh, 1.5rem) !important;
  text-align: center;
}
html body #wd-stack .svc-path__head .smm-panel__big-title { max-width: 22ch; }
html body #wd-stack .svc-path__head .smm-panel__statement-sub { max-width: 48ch; }
html body #wd-stack .svc-path__head .smm-panel__big-title {
  font-size: min(60px, 11vw) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin: 0 auto clamp(0.35rem, 0.9vh, 0.7rem) !important;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
html body #wd-stack .svc-path__head .smm-panel__statement-sub {
  font-size: 16px !important;
  margin: 0 auto !important;
}
/* piu' aria recuperata: sopra bastano la nav e un respiro */
html body main > section#wd-stack > .svc-path__sticky {
  padding-top: max(calc(var(--nav-h, 100px) + clamp(0.75rem, 2vh, 1.5rem)), 6rem) !important;
  padding-bottom: clamp(1.25rem, 2.5vh, 2rem) !important;
}
/* Con il titolo a 60px e i testi a 16px il contenuto puo non stare
   in una schermata bassa. La schermata resta la misura di partenza,
   ma non e piu un tetto: sotto quella soglia il pannello cresce e
   la sezione con lui, invece di tagliare la CTA. */
html body main > section#wd-stack {
  height: auto !important;
  min-height: 118dvh;
}
html body main > section#wd-stack > .svc-path__sticky {
  height: auto !important;
  min-height: 100dvh;
  overflow: visible !important;
}
html body main > section#wd-stack > .svc-path__sticky > .container {
  height: auto;
  min-height: 100%;
}
/* il pannello: due colonne, placeholder a sinistra. Compattato:
   respiri interni e altezza minima ridotti, cosi' il riquadro
   occupa meno schermata a parita' di contenuto. */
html body #wd-stack .svc-tabs__panel.wd-pan {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(1rem, 2.1vw, 2rem);
  align-items: stretch;
  padding: clamp(0.9rem, 1.7vw, 1.45rem);
  border-radius: 18px;
}
/* i pannelli spenti restano spenti: e' la regola che il display
   forzato della prima versione stava scavalcando, ed era per questo
   che i tre pannelli si impilavano e i tab sembravano inerti */
html body #wd-stack .svc-tabs__panel[hidden] { display: none !important; }

/* ── Il placeholder, dentro una finestra di browser ───────────── */
html body #wd-stack .wd-shot {
  position: relative;
  display: block;
  margin: 0;
  height: 100%;
  min-height: clamp(160px, 26vh, 300px);
  aspect-ratio: auto;
  border-radius: 14px;
  overflow: hidden;
  background: #faf7f8 !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
html body #wd-stack .wd-shot__chrome {
  position: absolute;
  inset: 0 0 auto 0;
  height: 30px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
  background: rgba(0,0,0,0.045);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
html body #wd-stack .wd-shot__chrome i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(0,0,0,0.14);
}
html body #wd-stack .wd-shot__chrome i:first-child { background: var(--primary, #DB005A); opacity: 0.55; }
/* lo scheletro: due righe di testo, un blocco e tre riquadri.
   Niente animazione: e' un segnaposto, non un caricamento. */
html body #wd-stack .wd-shot__ph {
  position: absolute;
  inset: 30px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.4vh, 0.85rem);
  padding: clamp(0.9rem, 2vh, 1.4rem);
}
html body #wd-stack .wd-shot__ph-row {
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.09);
}
html body #wd-stack .wd-shot__ph-row--short { width: 58%; }
html body #wd-stack .wd-shot__ph-block {
  flex: 1 1 auto;
  min-height: 54px;
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(219,0,90,0.10) 0%, rgba(219,0,90,0.03) 55%, rgba(0,0,0,0.03) 100%);
  border: 1px dashed rgba(219,0,90,0.22);
}
html body #wd-stack .wd-shot__ph-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.4rem, 1vw, 0.7rem);
}
html body #wd-stack .wd-shot__ph-grid i {
  height: clamp(22px, 4vh, 38px);
  border-radius: 8px;
  background: rgba(0,0,0,0.06);
}

/* ── La colonna di testo ──────────────────────────────────────── */
html body #wd-stack .wd-tabs__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: clamp(0.42rem, 1vh, 0.75rem);
  overflow: visible;
}
/* Corpi fissi: 16px per i testi delle card, 14px per le voci
   dell elenco. Il pannello non si compatta sul corpo dei testi ma
   solo sui respiri: se la schermata e bassa cresce il pannello,
   non rimpicciolisce il testo. */
html body #wd-stack .wd-tabs__copy > .svc-tabs__text {
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  max-width: 62ch;
}
html body #wd-stack .wd-tabs__prose p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 0.45rem;
}
html body #wd-stack .wd-tabs__prose p:last-child { margin-bottom: 0; }
html body #wd-stack .wd-tabs__list.svc-tabs__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 1.75rem);
  row-gap: 0.26rem;
  margin: 0;
  padding-top: clamp(0.32rem, 0.85vh, 0.65rem);
  border-top: 1px solid rgba(0,0,0,0.10);
}
html body #wd-stack .wd-tabs__list.svc-tabs__points li {
  font-size: 14px;
  line-height: 1.4;
}
html body #wd-stack .wd-tabs__copy .svc-tabs__cta {
  align-self: flex-start;
  margin-top: clamp(0.15rem, 0.5vh, 0.45rem);
}

@media (max-width: 900px) {
  html body #wd-stack .svc-tabs__panel.wd-pan { grid-template-columns: 1fr; }
  html body #wd-stack .wd-shot { min-height: 170px; }
}

/* ═══════════════════════════════════════════════════════════════
   WEB DESIGN — "Come lavoriamo / Un sito cucito su misura"
   Chiude la timeline, su fondo nero. I tre passaggi non sono un
   elenco di paragrafi ne' un blocco con un punto in evidenza: sono
   tre schede sfalsate, tutte dello stesso peso, ognuna col numero
   in trasparenza dietro al testo e un filo fucsia in alto che si
   accende al passaggio del mouse.
   ═══════════════════════════════════════════════════════════════ */
/* La classe e' ripetuta per una ragione precisa. Le sezioni scure
   prendono due aloni fucsia da una regola condivisa piu' su
   (main > section.svc-bg-dark:not(.svc-clients):not(.svc-caffe)),
   che vale tre classi: la mia, con una sola classe, perdeva il
   confronto anche con !important, e l'alone restava. Ripetendo la
   classe la regola passa davanti. I clienti sono esclusi da quella
   condivisa, quindi restano nero pieno: qui si dichiara lo stesso
   nero, senza nessuna immagine di fondo. */
html body main > section.wd-deep.wd-deep.wd-deep {
  background-image: none !important;
  background-color: #000 !important;
  color: #fff !important;
  position: relative;
  overflow: clip;
  padding-block: clamp(4.5rem, 9vw, 7.5rem);
}
html body .wd-deep__glow { display: none; }
html body .wd-deep__grid {
  position: relative;
  display: block;
}
/* la testata: occhiello a 14px, titolo su due righe al massimo.
   Il ritorno a capo e' dichiarato nel markup (un <br>, nessuna
   parola toccata) e la colonna e' abbastanza larga da non
   aggiungerne un terzo: e' il modo per garantire le due righe
   senza ridurre il corpo del titolo. */
html body .wd-deep__aside {
  position: static;
  max-width: min(100%, 720px);
  margin-bottom: clamp(2.5rem, 5.5vw, 4.5rem);
}
html body .wd-deep__aside .svc-section-header__eyebrow {
  font-family: var(--font-secondary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--primary, #DB005A) !important;
  margin: 0 0 0.9rem !important;
  display: block;
}
html body .wd-deep__aside .svc-section-title {
  margin: 0 !important;
  color: #fff !important;
  text-wrap: pretty;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

/* le tre schede: stessa importanza, scalinate verso il basso */
html body .wd-deep__lead {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
  margin: 0;
  columns: auto;
}
html body .wd-deep__p {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.4vw, 1.9rem) clamp(1.75rem, 3.2vw, 2.4rem);
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.74);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  /* nessun velo e nessun blur: le schede stanno sullo stesso nero
     della sezione, si distinguono solo per il bordo */
  background: transparent;
  overflow: hidden;
  transition: transform 420ms cubic-bezier(0.22,1,0.36,1),
              border-color 420ms ease,
              background 420ms ease;
}
/* la scalinata: ogni scheda scende un po' piu' della precedente */
html body .wd-deep__p:nth-child(2) { transform: translateY(clamp(1.25rem, 3vw, 2.5rem)); }
html body .wd-deep__p:nth-child(3) { transform: translateY(clamp(2.5rem, 6vw, 5rem)); }
/* il filo fucsia in alto: acceso a meta', pieno al passaggio */
html body .wd-deep__p::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  /* una linea piena, non una sfumatura */
  background: var(--primary, #DB005A);
  transform: scaleX(0.34);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(0.22,1,0.36,1);
}
html body .wd-deep__p:hover {
  border-color: rgba(219,0,90,0.38);
  background: transparent;
}
html body .wd-deep__p:hover::before { transform: scaleX(1); }
html body .wd-deep__p:nth-child(2):hover { transform: translateY(calc(clamp(1.25rem, 3vw, 2.5rem) - 6px)); }
html body .wd-deep__p:nth-child(3):hover { transform: translateY(calc(clamp(2.5rem, 6vw, 5rem) - 6px)); }
html body .wd-deep__p:nth-child(1):hover { transform: translateY(-6px); }
/* il numero: grande, in trasparenza, dietro al testo */
html body .wd-deep__idx {
  position: absolute;
  z-index: -1;
  right: clamp(0.5rem, 1.4vw, 1rem);
  bottom: clamp(-0.9rem, -1.5vw, -0.4rem);
  font-family: var(--font-primary);
  font-size: clamp(4.5rem, 9vw, 7.5rem);
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.16);
  pointer-events: none;
}
html body .wd-deep__p:hover .wd-deep__idx {
  -webkit-text-stroke-color: rgba(219,0,90,0.42);
}

@media (max-width: 1000px) {
  html body .wd-deep__lead { grid-template-columns: 1fr; gap: 1rem; }
  html body .wd-deep__p,
  html body .wd-deep__p:nth-child(2),
  html body .wd-deep__p:nth-child(3) { transform: none; }
  html body .wd-deep__p:nth-child(1):hover,
  html body .wd-deep__p:nth-child(2):hover,
  html body .wd-deep__p:nth-child(3):hover { transform: translateY(-4px); }
  html body .wd-deep__aside { max-width: none; }
}

/* La fascia di raccordo sotto la sezione nera: nero pieno e non
   "background: inherit". Ereditando avrebbe ridipinto il gradiente
   fucsia dentro i suoi 22px, e sotto la sezione sarebbe comparsa
   una riga rosa proprio nel punto di giunzione col nero seguente. */
html.js-reveal main > section.wd-deep.sx-rise::after {
  background: #000 !important;
}

/* ═══════════════════════════════════════════════════════════════
   WEB DESIGN — i clienti non si bloccano, solo qui
   Nelle altre pagine la sezione e' una corsa di 118dvh con dentro
   un pannello agganciato alto una schermata. Su questa pagina no:
   la sezione torna alta quanto il suo contenuto e scorre insieme
   al resto. Il video di sfondo e' in posizione assoluta dentro
   .svc-clients, quindi continua a coprire tutta la sezione.
   ═══════════════════════════════════════════════════════════════ */
html body main > section#wd-clienti {
  height: auto !important;
  min-height: 0 !important;
}
html body main > section#wd-clienti > .svc-clients__sticky {
  position: static !important;
  top: auto !important;
  height: auto !important;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) !important;
  justify-content: flex-start !important;
}

/* ═══════════════════════════════════════════════════════════════
   INFLUENCER MARKETING — misure dei titoli della pagina
   Le due sezioni (Instagram e i talent) e la tagline della hero
   sono solo di questa pagina, quindi le misure stanno qui e non in
   un blocco di pagina: restano insieme a tutte le altre.
   ═══════════════════════════════════════════════════════════════ */
/* La tagline della hero e' ora una regola globale: vedi in fondo al
   foglio, "Sei nel posto giusto! a 16px su tutte le hero". */
/* Instagram: occhiello a 14px, titolo alla misura di riferimento */
html body main > section.imk-intro .imk-intro__kicker {
  font-size: 14px !important;
}
html body main > section.imk-intro .imk-intro__title {
  font-size: min(60px, 11vw) !important;
  line-height: 1.0 !important;
}
/* "I talent pronti a comunicare / il tuo business" */
html body main > section.svc-talent-pronti .svc-talent-pronti__title {
  font-size: min(60px, 11vw) !important;
  line-height: 1.02 !important;
}

/* ── I talent: corpo minimo 16px in tutta la sezione ────────────
   Dentro #imkTalent convivono tre misure piu' piccole arrivate da
   gruppi condivisi diversi: i paragrafi a --text-sm, le etichette
   a 0.82rem e le capsule di "Ad integrazione" a 0.88rem. Qui
   vengono portate tutte al minimo di 16px. L'occhiello resta il
   solo testo minimo della sezione, a 14px: la sua regola viene
   dopo e vale una classe in piu', quindi non la tocca il minimo. */
html body main > section#imkTalent :is(p, li),
html body main > section#imkTalent .svc-talent-pronti__label,
html body main > section#imkTalent .svc-integrazione__pill {
  font-size: max(16px, 1rem) !important;
}
html body main > section#imkTalent .svc-section-header__eyebrow {
  font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   "Sei nel posto giusto!" a 16px su tutte le hero
   Ogni pagina servizi raggruppa .svc-hero__tagline con i testi
   minimi (CTA, tag, occhiello) in un font-size: 14px !important
   dichiarato nel proprio <style>. Quel selettore vale una classe:
   qui se ne mettono due piu' la catena degli elementi, cosi' la
   misura vale su tutte e dieci le pagine senza toccarne nessuna
   una per una. Lo <strong> dentro il paragrafo va incluso, perche'
   il testo sta dentro di lui.
   ═══════════════════════════════════════════════════════════════ */
html body main > section.svc-hero .svc-hero__tagline,
html body main > section.svc-hero .svc-hero__tagline strong,
html body main > section.svc-hero .svc-hero__tagline em,
html body main > section.svc-hero .svc-hero__tagline b {
  font-size: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════
   SOCIAL ADS — misure dei due titoli e sezioni a piena schermata
   ═══════════════════════════════════════════════════════════════ */
/* I due titoli alla misura di riferimento del sito. Le regole di
   pagina e quelle per id li tenevano a 38px e a 46px: qui servono
   quattro elementi davanti per passare loro davanti. */
html body main > section#ads-detail .svc-section-title {
  font-size: min(60px, 11vw) !important;
  line-height: 1.05 !important;
}
html body main > section#ads-vantaggi .svc-process__title {
  font-size: min(60px, 11vw) !important;
  line-height: 1.05 !important;
}
/* Le due sezioni restano agganciate — corsa piu' alta della
   finestra, dentro un pannello che si ferma per una schermata —
   anche ora che i titoli sono piu' grandi. Prima il pannello aveva
   un'altezza fissa di una schermata e lo script, misurandolo,
   scioglieva il blocco appena il contenuto sforava: la sezione
   tornava libera. Ora il pannello parte da una schermata e cresce
   se serve, quindi il contenuto non sfora mai e il blocco resta. */
html body main > section#ads-vantaggi.svc-generic-runway {
  height: auto !important;
  min-height: 118dvh !important;
}
/* #ads-detail teneva 136dvh di corsa per un motivo suo: quando il
   pannello si sgancia, quel che resta e' l'unico spazio fra la CTA
   "Richiedi un preventivo" e la sezione che sale. Resta il valore,
   diventa solo un minimo. */
html body main > section#ads-detail.svc-generic-runway {
  height: auto !important;
  min-height: 136dvh !important;
}
html body main > section#ads-detail > .svc-generic-sticky,
html body main > section#ads-vantaggi > .svc-generic-sticky {
  height: auto !important;
  min-height: 100dvh;
  overflow: visible !important;
}

/* ── I sei vantaggi: card tutte della stessa misura ─────────────
   Prima ognuna era alta quanto il suo testo (align-items: start
   sulla griglia e height: auto sulla card) e la colonna centrale
   era sfalsata di 22px: sei riquadri di sei altezze diverse. Ora
   la griglia ha righe uguali e le card si allungano fino a
   riempirle, quindi hanno tutte la stessa larghezza e la stessa
   altezza. Lo sfalsamento va via: con le righe uguali avrebbe
   accorciato di 22px le card della colonna centrale, che e'
   esattamente quello che si vuole evitare. */
html body main > section.svc-process .svc-process__grid {
  align-items: stretch !important;
  grid-auto-rows: 1fr !important;
}
html body main > section.svc-process .svc-process__card {
  height: 100% !important;
  align-content: start;
}
html body main > section.svc-process .svc-process__card:nth-child(3n + 2) {
  margin-top: 0 !important;
}

/* ── Produzione contenuti: l'occhiello "Cosa facciamo" a 14px ────
   Lo stile di pagina lo teneva a 0.72rem, cioe' ~11.5px: e' un
   occhiello di sezione, e la misura del sito per questi e' 14. */
html body main > section.pc-prod .pc-prod__kicker {
  font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   CASE STUDIES — occhiello, CTA finale, consenso
   ═══════════════════════════════════════════════════════════════ */
/* L'occhiello sopra il titolo prende lo stesso trattamento di
   quelli sopra i titoli delle hero servizi (.svc-hero__kicker):
   secondario, 14px, peso 700, spaziatura 0.2em, maiuscolo,
   fucsia. Qui era a peso 600 e con una spaziatura piu' larga
   (0.28em), quindi si leggeva piu' leggero e piu' rarefatto. */
html body main .cs-hero__kicker {
  font-family: var(--font-secondary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
}
/* La CTA finale: titolo alla misura di riferimento del sito e
   sottotitolo al corpo del testo. */
html body main .cs-cta__title {
  font-size: min(60px, 11vw) !important;
  line-height: 1.0 !important;
}
html body main .cs-cta__sub {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
/* "(facoltativo)" non si spezza e non cade da solo a capo */
html body main .cs-cta .svc-caffe__privacy em {
  white-space: nowrap;
}
html body main .cs-cta .svc-caffe__privacy span {
  text-wrap: pretty;
}

/* ── Case studies: progetti e CTA a piena schermata ─────────────
   Entrambe le sezioni diventano una corsa poco piu' alta della
   finestra con dentro un pannello che si ferma per una schermata,
   come le sezioni delle pagine servizi. I pannelli partono da una
   schermata e crescono se il contenuto chiede di piu': la vista a
   griglia dei case studies e' piu' alta di una finestra per
   definizione, e il form della CTA lo diventa su schermi bassi.
   Cosi' il blocco c'e' dove serve e non taglia mai niente. */
html body main #cs-works {
  height: auto !important;
  min-height: 118dvh;
  padding: 0 !important;
}
html body main #cs-works > .cs-works__sticky {
  position: sticky;
  top: 0;
  height: auto;
  min-height: 100dvh;
  /* Centrato nel pannello, ma con la nav messa in conto: la nav e'
     fissa e alta un centinaio di pixel, e con il contenuto
     appoggiato in alto la testata "I lavori / Progetti" le finiva
     sotto. Il respiro alto vale nav + un respiro, cosi' il centro
     ottico cade sotto l'header. */
  justify-content: center;
  padding: max(calc(var(--nav-h, 100px) + clamp(1rem, 2.5vh, 2rem)), 7rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 4vh, 3.5rem);
}
/* dentro il pannello l'anello segue l'altezza della finestra: con
   i suoi 540px minimi, su una finestra bassa non ci sarebbe stato
   insieme alla testata */
html body main #cs-works > .cs-works__sticky .cs-ring-stage {
  height: clamp(320px, 56dvh, 640px) !important;
}
html body main > section.cs-cta {
  min-height: 118dvh;
}
html body main > section.cs-cta > .cs-cta__inner {
  position: sticky;
  top: 0;
  min-height: 100dvh;
  /* Colonne, respiri e centratura restano quelli della pagina:
     l'allineamento andava bene, il pannello aggiunge solo il
     blocco. */
}
/* Il titolo su tre righe scalettate: i ritorni a capo sono
   dichiarati nel markup (tre span, nessuna parola cambiata) e ogni
   riga rientra un po' piu' della precedente. */
html body main .cs-cta__title--ladder {
  display: flex;
  flex-direction: column;
}
html body main .cs-cta__title--ladder > span {
  display: block;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}
/* Il titolo e' allineato a sinistra, tutte le righe a filo: lo
   scalettamento con i rientri progressivi non serve. */
html body main .cs-cta__title--ladder { text-align: left; align-items: flex-start; }
html body main .cs-cta__title--ladder > span { padding-left: 0 !important; }
/* Il consenso alla newsletter resta su una riga: la colonna del
   form si allarga (la frase a 16px chiede circa 720px) e il
   respiro laterale della sezione scende da 80 a 40px. Il titolo e
   il sottotitolo restano allineati a sinistra come prima: cambia
   la larghezza della colonna, non il loro allineamento. */
html body main > section.cs-cta {
  /* respiro laterale: vedi il blocco dell'allineamento al footer */
}
html body main > section.cs-cta > .cs-cta__inner {
  /* colonne e respiro laterale: decide il blocco in fondo al foglio, quello dell'allineamento al footer */
  gap: clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 1400px) {
  html body main .cs-cta .svc-caffe__privacy span,
  html body main .cs2-contact .svc-caffe__privacy span,
  html body main .faq-contact .svc-caffe__privacy span,
  html body main .nw-contact .svc-caffe__privacy span {
    white-space: nowrap;
  }
}
@media (max-width: 900px) {
  html body main > section.cs-cta > .cs-cta__inner {
    grid-template-columns: 1fr;
    position: static;
    min-height: 0;
  }
  html body main > section.cs-cta { min-height: 0; }
  html body main #cs-works { min-height: 0; }
  html body main #cs-works > .cs-works__sticky {
    position: static;
    min-height: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CASE STUDY DAMA24 — occhiello, titoli, numerazione
   ═══════════════════════════════════════════════════════════════ */
/* L'occhiello della hero prende lo stesso trattamento di quelli
   sopra i titoli delle hero servizi e di case studies: secondario,
   14px, peso 700, spaziatura 0.2em, maiuscolo, fucsia. Qui era a
   0.7rem (~11px), peso 600 e spaziatura 0.22em. */
html body main .d24-hero__kicker span {
  font-family: var(--font-secondary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
}
/* I titoli del corpo a 32px. Lo stile di pagina li lasciava a
   "font-size: revert", cioe' alla misura del browser per un h2
   (~24px), che con !important batteva anche il clamp dichiarato
   piu' su nella stessa pagina. */
html body main .cs2-h2 {
  font-size: 32px !important;
  line-height: 1.12 !important;
}
/* ── La numerazione ──────────────────────────────────────────────
   Prima il numero era dentro il testo del titolo con un trattino
   lungo ("01 — Digital Identity..."): un separatore tipografico
   che non dice niente e allunga la riga. Ora il numero e' un
   elemento suo, in cifra grande a solo contorno fucsia, appoggiato
   a filo del titolo: si legge come un indice, non come parte della
   frase. Le parole del titolo non sono cambiate. */
html body main .cs2-h2--num {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
html body main .cs2-h2__num {
  /* Cifra piena, non in contorno, e senza filetto sotto: e' un
     numero che si legge come un dato, non un elemento decorativo.
     Resta piu' grande del titolo e in fucsia, cosi' l'indice si
     vede subito senza rubare la scena alla frase. */
  font-family: var(--font-primary);
  font-size: 1.5em;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--primary, #DB005A);
  font-variant-numeric: tabular-nums;
  margin-top: -0.04em;
  user-select: none;
}
html body main .cs2-h2__text {
  display: block;
  min-width: 0;
}
@media (max-width: 640px) {
  html body main .cs2-h2 { font-size: 26px !important; }
  html body main .cs2-h2--num { column-gap: 0.7rem; }
}
/* La riga della newsletter non va a capo: la colonna del form si
   allarga (a 16px la frase chiede circa 700px, in mezza griglia non
   ci stavano) e il respiro laterale della sezione scende da 80 a
   40px. La colonna del titolo resta larga quanto serve alle sue
   tre parole a 60px. */
html body main > section.cs2-contact {
  /* respiro laterale: vedi il blocco dell'allineamento al footer */
}
html body main > section.cs2-contact > .cs2-contact__inner {
  /* colonne e respiro laterale: decide il blocco in fondo al foglio, quello dell'allineamento al footer */
  gap: clamp(1.5rem, 3vw, 3rem);
}
html body main .cs2-contact .svc-caffe__privacy em {
  white-space: nowrap;
}
/* La soglia sta a 1400px (vedi il blocco di case studies): sotto,
   nessuna larghezza di colonna basta a tenere la frase su un rigo
   e forzarla sfonderebbe la colonna. */
@media (max-width: 900px) {
  html body main > section.cs2-contact > .cs2-contact__inner {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CONTATTI — il claim della sezione hub
   ═══════════════════════════════════════════════════════════════ */
html body main .contact-hub__claim-big {
  font-size: min(60px, 11vw) !important;
  line-height: 1.02 !important;
}
html body main .contact-hub__claim-intro {
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* ═══════════════════════════════════════════════════════════════
   FAQ e NEWS — il consenso alla newsletter su una riga sola
   La frase a 16px chiede circa 700px: in mezza griglia non ci
   stava. La colonna del form si allarga e il respiro laterale
   della sezione scende da 80 a 40px, come su Dama24. Sotto i
   1200px nessuna larghezza basta e la riga torna libera.
   ═══════════════════════════════════════════════════════════════ */
html body main > section.faq-contact,
html body main > section.nw-contact {
  /* respiro laterale: vedi il blocco dell'allineamento al footer */
}
html body main > section.faq-contact > .faq-contact__inner,
html body main > section.nw-contact > .nw-contact__inner {
  /* colonne e respiro laterale: decide il blocco in fondo al foglio, quello dell'allineamento al footer */
  gap: clamp(1.5rem, 3vw, 3rem);
}
html body main .faq-contact .svc-caffe__privacy em,
html body main .nw-contact .svc-caffe__privacy em {
  white-space: nowrap;
}
/* soglia unica a 1400px, dichiarata nel blocco di case studies */
@media (max-width: 900px) {
  html body main > section.faq-contact > .faq-contact__inner,
  html body main > section.nw-contact > .nw-contact__inner {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LAVORA CON NOI — hero e form della candidatura
   ═══════════════════════════════════════════════════════════════ */
html body main .lcn-hero__title {
  font-size: min(60px, 11vw) !important;
  line-height: 1.05 !important;
}
html body main .lcn-hero__sub,
html body main .lcn-hero__sub strong {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
/* Stessa inversione degli altri form del sito: l'etichetta e'
   l'informazione che resta e sale a 16px, il placeholder e' un
   suggerimento che sparisce appena scrivi e scende a 14. */
html body .lcn-apply__form .f-label {
  font-size: 16px !important;
}
html body .lcn-apply__form .lcn-apply__input::placeholder,
html body .lcn-apply__form .lcn-apply__textarea::placeholder,
html body .lcn-apply__form input::placeholder,
html body .lcn-apply__form textarea::placeholder {
  font-size: 14px !important;
}
html body .lcn-apply__form input::-webkit-input-placeholder,
html body .lcn-apply__form textarea::-webkit-input-placeholder {
  font-size: 14px !important;
}
/* il menu a tendina non e' un placeholder ma la sua prima voce:
   segue la stessa misura */
html body .lcn-apply__form .lcn-apply__select {
  font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   NEWS — card, invito del form, etichette
   ═══════════════════════════════════════════════════════════════ */
/* I titoli delle card news tornano alla misura della pagina: a
   32px la card cresceva e la griglia perdeva il passo. Nessuna
   regola qui, decide lo stile della pagina. */
html body main .nw-contact__sub {
  font-size: 16px !important;
  line-height: 1.6 !important;
}
html body .nw-contact .hc-form .f-label {
  font-size: 16px !important;
}
html body .nw-contact .hc-form .svc-caffe__field::placeholder,
html body .faq-contact .hc-form .svc-caffe__field::placeholder {
  font-size: 14px !important;
}
html body .nw-contact .hc-form .svc-caffe__field::-webkit-input-placeholder,
html body .faq-contact .hc-form .svc-caffe__field::-webkit-input-placeholder {
  font-size: 14px !important;
}
/* La data dell'articolo: microcopy sotto la categoria, mai in
   grassetto e mai in maiuscolo — e' un dato, non un'etichetta. */
html body main .nw-card__date {
  display: block;
  font-family: var(--font-secondary);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(0,0,0,0.42);
  margin: -0.35rem 0 0.7rem;
}
html body main .art-hero__date {
  font-family: var(--font-secondary);
  font-size: 14px !important;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.55) !important;
}

/* ── Etichette dei form a 16px ──────────────────────────────────
   Stessa inversione degli altri form del sito: l'etichetta e'
   l'informazione che resta e sale a 16px, il placeholder e' un
   suggerimento che sparisce appena scrivi e resta a 14.
   Vale per il form della CTA di case studies, per quello dei due
   case study e per quello delle FAQ. */
html body main .cs-cta .f-label,
html body main .cs2-contact .f-label,
html body main .faq-contact .f-label {
  font-size: 16px !important;
}
html body main .cs-cta .svc-caffe__field::placeholder,
html body main .cs2-contact .svc-caffe__field::placeholder,
html body main .faq-contact .svc-caffe__field::placeholder {
  font-size: 14px !important;
}
html body main .cs-cta .svc-caffe__field::-webkit-input-placeholder,
html body main .cs2-contact .svc-caffe__field::-webkit-input-placeholder,
html body main .faq-contact .svc-caffe__field::-webkit-input-placeholder {
  font-size: 14px !important;
}

/* ── Lavora con noi: il blocco della hero al centro ─────────────
   La sezione era "space-between": il testo si appoggiava sotto la
   nav e i numeri in fondo, quindi l'aria restava tutta in mezzo e
   il blocco sembrava schiacciato in alto. Ora il testo e' centrato
   nello spazio libero e i numeri restano ancorati in basso. */
html body main > section.lcn-hero {
  justify-content: center !important;
}
html body main > section.lcn-hero > .lcn-hero__stats {
  margin-top: auto;
}
html body main > section.lcn-hero > .lcn-hero__top {
  margin-top: auto;
  margin-bottom: auto;
}

/* ═══════════════════════════════════════════════════════════════
   ARTICOLI (news e tips&tricks) — una sola gerarchia di testo
   Le due pagine interne avevano una ventina di misure diverse
   scritte a mano, da 0.6rem a 2.8rem, senza una scala. Qui la
   scala e' una e vale per entrambe:
     - corpo di lettura            16px
     - occhielli e tagline          14px
     - tag ed etichette            14px
     - CTA e link di ritorno       14px
     - titoli importanti (h2)      32px
     - titoli secondari            24px
   Il titolo della pagina (h1) resta fuori dalla scala: e' l'unico
   elemento che deve dominare, e ha la sua misura.
   ═══════════════════════════════════════════════════════════════ */

/* ── Titoli importanti: le testate di sezione ─────────────────── */
html body main .art-h2,
html body main .art-pricing__title,
html body main .art-timeline__title,
html body main .art-results__title,
html body main .art-faq__title,
html body main .tt-h2 {
  font-size: 32px !important;
  line-height: 1.15 !important;
}
/* il prezzo e' una cifra display: sta alla misura dei titoli
   importanti, non sopra */
html body main .art-pkg__price {
  font-size: 32px !important;
  line-height: 1.05 !important;
}
/* ── Titoli secondari ─────────────────────────────────────────── */
html body main .art-step__title,
html body main .art-result-card__period,
html body main .art-callout__title,
html body main .tt-callout__title {
  font-size: 24px !important;
  line-height: 1.25 !important;
}

/* ── Corpo di lettura ─────────────────────────────────────────── */
html body main .art-p,
html body main .art-list li,
html body main .art-callout p,
html body main .art-answer__text,
html body main .art-faq__a,
html body main .art-step__text,
html body main .art-result-card__text,
html body main .art-pkg__checklist li,
html body main .art-hero__intro,
html body main .art-contact__sub,
html body main .art-hero__sidebar-list a,
html body main .tt-p,
html body main .tt-list li,
html body main .tt-callout p,
html body main .tt-cta-block p,
html body main .tt-hero__intro,
html body main .tt-contact__sub,
html body main .tt-sidebar__title {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* ── Occhielli, tag, date, tempi: microcopy a 14px ────────────── */
html body main .art-hero__cat,
html body main .art-hero__date,
html body main .art-hero__sidebar-label,
html body main .art-step__time,
html body main .art-pkg__name,
html body main .art-pkg__badge,
html body main .art-contact__label,
html body main .tt-hero__cat,
html body main .tt-hero__date,
html body main .tt-sidebar__label,
html body main .tt-contact__label {
  font-size: 14px !important;
}

/* ── CTA e link di ritorno ────────────────────────────────────── */
html body main .art-back,
html body main .tt-back,
html body main .art-contact .btn,
html body main .tt-contact .btn,
html body main .art-cta,
html body main .tt-cta-block .btn {
  font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   TIPS&TRICKS, pagina interna — il form prima del footer
   Stesso trattamento degli altri form del sito: etichette a 16px,
   placeholder a 14px, e il consenso alla newsletter su una riga
   sola (colonna del form piu' larga, respiro laterale ridotto).
   ═══════════════════════════════════════════════════════════════ */
html body main > section.tt-contact {
  /* respiro laterale: vedi il blocco dell'allineamento al footer */
}
html body main > section.tt-contact > .tt-contact__inner {
  /* colonne e respiro laterale: decide il blocco in fondo al foglio, quello dell'allineamento al footer */
  gap: clamp(1.5rem, 3vw, 3rem);
}
html body main .tt-contact .f-label {
  font-size: 16px !important;
}
html body main .tt-contact .svc-caffe__field::placeholder {
  font-size: 14px !important;
}
html body main .tt-contact .svc-caffe__field::-webkit-input-placeholder {
  font-size: 14px !important;
}
html body main .tt-contact .svc-caffe__privacy em {
  white-space: nowrap;
}
@media (min-width: 1400px) {
  html body main .tt-contact .svc-caffe__privacy span {
    white-space: nowrap;
  }
}
@media (max-width: 900px) {
  html body main > section.tt-contact > .tt-contact__inner {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TIPS&TRICKS, pagina interna — fucsia sul chiaro, bianco sul
   fucsia. Cioe' il comportamento standard del sito: sulle sezioni
   fucsia (hero e form) MENU e simbolo diventano bianchi, sul corpo
   su carta bianca tornano fucsia. Le sezioni fucsia sono marcate
   nel markup, quindi decide l'osservatore condiviso e non serve
   nessuna eccezione di pagina.
   ═══════════════════════════════════════════════════════════════ */
/* il titolo del form: 60px, la misura di riferimento del sito */
html body main .tt-contact__title,
html body main .art-contact__title {
  font-size: min(60px, 11vw) !important;
  line-height: 1.05 !important;
}
/* Le domande delle FAQ dell'articolo prendono la misura e il peso
   delle domande frequenti di tutto il sito: 20px, peso 600. */
html body main .art-faq__q,
html body main .tt-faq__q {
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
/* le etichette del form dell'articolo a 16px, i placeholder a 14 */
html body main .art-contact .f-label {
  font-size: 16px !important;
}
html body main .art-contact .svc-caffe__field::placeholder,
html body main .art-contact .svc-caffe__field::-webkit-input-placeholder {
  font-size: 14px !important;
}

/* Le due liste laterali sono elenchi compatti, non testo corrente:
   restano al corpo di lettura ma con interlinea chiusa, altrimenti
   a 1.7 le voci sfondano il riquadro. */
html body main .tt-sidebar__title,
html body main .art-hero__sidebar-list a {
  line-height: 1.35 !important;
}

/* ═══════════════════════════════════════════════════════════════
   LE SEZIONI FUCSIA PRIMA DEL FOOTER, ALLINEATE AL FOOTER
   Il footer non ha una larghezza massima: il suo contenuto parte e
   finisce a clamp(1.5rem, 6vw, 7rem) dai bordi della finestra. Le
   sezioni fucsia invece usavano .container, che ha max-width 1440
   centrata, gutter a sinistra e — questo era il difetto piu'
   visibile — padding-inline-end: 0, quindi a destra il contenuto
   arrivava al bordo. Da qui nasceva il disallineamento sui due
   lati insieme.
   La regola vale per tutte: il respiro laterale lo porta la
   sezione, con la stessa misura del footer, e il contenitore
   interno smette di stringere e di centrare.
   ═══════════════════════════════════════════════════════════════ */
html body main > section.svc-caffe,
html body main > section.cs-cta,
html body main > section.cs2-contact,
html body main > section.faq-contact,
html body main > section.nw-contact,
html body main > section.tt-contact,
html body main > section.art-contact {
  padding-inline: clamp(1.5rem, 6vw, 7rem) !important;
}
html body main > section.svc-caffe > .container,
html body main > section.svc-caffe > .svc-generic-sticky > .container,
html body main > section.cs-cta > .cs-cta__inner,
html body main > section.cs2-contact > .cs2-contact__inner,
html body main > section.faq-contact > .faq-contact__inner,
html body main > section.nw-contact > .nw-contact__inner,
html body main > section.tt-contact > .tt-contact__inner,
html body main > section.art-contact > .art-contact__inner,
html body main > section.lcn-apply > .lcn-apply__layout {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* Con il respiro del footer (fino a 112px per lato) la colonna del
   form si stringe, e la riga della newsletter a 16px chiede circa
   725px. Le colonne diventano 0.38/0.62: sopra i 1400px di
   finestra la riga sta su un rigo solo, sotto va a capo — nessuna
   larghezza possibile la terrebbe, e forzarla sfonderebbe il
   riquadro. */
html body main > section.cs-cta > .cs-cta__inner,
html body main > section.cs2-contact > .cs2-contact__inner,
html body main > section.faq-contact > .faq-contact__inner,
html body main > section.nw-contact > .nw-contact__inner,
html body main > section.tt-contact > .tt-contact__inner,
html body main > section.art-contact > .art-contact__inner {
  grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}
html body main .art-contact .svc-caffe__privacy em {
  white-space: nowrap;
}
@media (min-width: 1400px) {
  html body main .art-contact .svc-caffe__privacy span {
    white-space: nowrap;
  }
}
@media (max-width: 900px) {
  html body main > section.cs-cta > .cs-cta__inner,
  html body main > section.cs2-contact > .cs2-contact__inner,
  html body main > section.faq-contact > .faq-contact__inner,
  html body main > section.nw-contact > .nw-contact__inner,
  html body main > section.tt-contact > .tt-contact__inner,
  html body main > section.art-contact > .art-contact__inner {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ROBUSTEZZA — browser, zoom, schermi
   Due cose che possono rompere il sito fuori dal browser di casa,
   piu' il rispetto del movimento ridotto.
   Qui sono chiuse tutte e tre con dichiarazioni che non toccano il
   disegno dove tutto funziona.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Unita' dvh. Tutto l'impianto delle sezioni agganciate misura
      in dvh (100dvh il pannello, 118 la corsa). Sui browser che
      non la conoscono — Safari sotto la 15.4, Chrome sotto la 108,
      i WebView vecchi — la dichiarazione viene semplicemente
      scartata: la sezione perde l'altezza e il pannello si
      accartoccia. Qui, e solo li', si torna a vh: qualche pixel di
      differenza quando la barra del browser compare, ma la pagina
      resta in piedi. */
@supports not (height: 100dvh) {
  html body main > section.svc-clients,
  html body main > section.page-faq,
  html body main > section.svc-path,
  html body main > section.svc-caffe,
  html body main > section.svc-generic-runway,
  html body main > section.cs-cta,
  html body main > div#cs-works {
    min-height: 118vh;
  }
  html body .svc-clients__sticky,
  html body .page-faq__sticky,
  html body .svc-path__sticky,
  html body .svc-generic-sticky,
  html body .cs-works__sticky,
  html body .cs-cta__inner {
    min-height: 100vh;
  }
  html body main > section.svc-hero,
  html body main > section.lcn-hero,
  html body main > section.cs-hero {
    min-height: 100vh;
  }
}

/* 3. Movimento ridotto. Chi lo chiede nelle impostazioni di
      sistema non deve vedere ne' salite di sezione, ne' pannelli
      che si sollevano, ne' immagini che si ingrandiscono. Le
      transizioni restano solo sui colori, che non danno malessere
      e servono a capire dove sei. */
@media (prefers-reduced-motion: reduce) {
  html body .wd-deep__p,
  html body #wd-stack .svc-tabs__media-img,
  html body #wd-stack .wd-pan:hover .svc-tabs__media-img,
  html body .cs2-h2__num {
    transition: none !important;
    transform: none !important;
  }
  html body .wd-deep__p:nth-child(1):hover,
  html body .wd-deep__p:nth-child(2):hover,
  html body .wd-deep__p:nth-child(3):hover,
  html body .svc-ai-approccio .btn--primary:hover,
  html body .btn--primary:hover {
    transform: none !important;
  }
  html body .wd-deep__p::before { transform: scaleX(1) !important; }
}

/* ── Mobile: le sezioni agganciate si sciolgono ──────────────────
   Sotto i 900px di larghezza, o su una finestra bassa, un pannello
   alto una schermata dentro una corsa piu' alta diventa una
   trappola: il contenuto non ci sta e il blocco fa perdere il
   filo. Le sezioni tornano a scorrere normali, con il loro
   respiro. Le regole di colore e tipografia restano tutte.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px), (max-height: 620px) {
  html body main > section.svc-path,
  html body main > section.svc-clients,
  html body main > section.page-faq,
  html body main > section.svc-generic-runway,
  html body main > section#wd-stack,
  html body main > section#ads-detail,
  html body main > section#ads-vantaggi,
  html body main > section#ai-clienti,
  html body main > section#wd-clienti,
  html body main > section#smmClienti,
  html body main > section#gadsClienti,
  html body main > section#sd-clienti,
  html body main > section#gd-clienti,
  html body main > section#md-clienti,
  html body main > section#pc-clienti,
  html body main > section#imkClienti,
  html body main > section#ads-clienti,
  html body main > section#amici-section {
    height: auto !important;
    min-height: 0 !important;
  }
  html body .svc-path__sticky,
  html body .svc-clients__sticky,
  html body .page-faq__sticky,
  html body .svc-generic-sticky,
  html body main > section#wd-stack > .svc-path__sticky {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    padding-block: clamp(3rem, 8vw, 4.5rem) !important;
  }
  /* la timeline di web design torna in colonna e il placeholder
     prende un'altezza sua invece di seguire la schermata */
  html body #wd-stack .svc-tabs__panel.wd-pan { grid-template-columns: 1fr !important; }
  html body #wd-stack .wd-shot { min-height: 180px !important; }
  /* i respiri laterali delle sezioni fucsia seguono il footer
     anche qui: il footer su mobile sta a 1.5rem dai bordi */
  html body main > section.svc-caffe,
  html body main > section.cs-cta,
  html body main > section.cs2-contact,
  html body main > section.faq-contact,
  html body main > section.nw-contact,
  html body main > section.tt-contact,
  html body main > section.art-contact {
    padding-inline: 1.5rem !important;
  }
}

/* ── Schermi stretti veri (telefono) ────────────────────────────
   Titoli e numeri scendono di misura solo qui, dove 60px su 360px
   di larghezza vorrebbero dire tre parole per riga. Le parole non
   si spezzano mai: e' la regola del sito.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  html body main .art-h2,
  html body main .art-pricing__title,
  html body main .art-timeline__title,
  html body main .art-results__title,
  html body main .art-faq__title,
  html body main .tt-h2 {
    font-size: 26px !important;
  }
  html body main .art-step__title,
  html body main .art-result-card__period {
    font-size: 20px !important;
  }
  html body main .cs2-h2 { font-size: 24px !important; }
  html body main .wd-deep__p { font-size: 16px !important; }
  html body main .nw-card__date { margin-top: 0 !important; }
  /* niente scorrimento orizzontale: le griglie a colonne fisse
     tornano tutte a una colonna */
  html body main .wd-deep__lead,
  html body main .wd-tabs__list.svc-tabs__points,
  html body main #wd-stack .wd-tabs__list.svc-tabs__points {
    grid-template-columns: 1fr !important;
  }
  html body main :is(h1, h2, h3, h4) {
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — una sola misura per "Menu" e il suo simbolo
   La parola stava a tre misure diverse: 11px in homepage (il
   valore di --text-xs che eredita dal pulsante), 14px su case
   studies, news, tips&tricks, FAQ, lavora-con-noi, i due articoli
   e Dama24, 16px sulle pagine servizi. Cambiando il corpo cambia
   anche l'altezza della pill, ed e' per questo che l'header
   sembrava di dimensioni diverse da pagina a pagina.
   Qui la misura e' una: 16px. La classe e' ripetuta perche' quelle
   dichiarazioni di pagina hanno !important e vanno superate senza
   andare a toccarne dieci.
   ═══════════════════════════════════════════════════════════════ */
html body .nav.nav .nav__menu-btn,
html body .nav.nav .nav__menu-label-close,
html body .nav.nav .nav__menu-label-open {
  font-size: 16px !important;
  letter-spacing: 0.10em !important;
}

/* ═══════════════════════════════════════════════════════════════
   ZOOM E FINESTRE BASSE — la via d'uscita, non il compromesso
   Il problema, per intero. Con lo zoom il viewport misurato in
   pixel CSS si restringe (a 125% una finestra da 900px diventa
   720), mentre i testi sono in px e restano quelli. Le sezioni
   agganciate sono tarate su una schermata esatta: quando il
   contenuto non entra piu', o viene tagliato dove il pannello
   ritaglia, o esce dalla sezione e finisce sopra quella seguente.
   Il primo tentativo era stato rendere automatica l'altezza dei
   pannelli. Funzionava contro i tagli, ma costava il blocco: un
   pannello piu' alto della finestra non si aggancia piu', e le
   sezioni — clienti, domande frequenti, prendiamoci un caffe' —
   perdevano la loro sosta. Che e' esattamente quello che nel
   disegno del sito deve restare.
   Quindi si tiene il disegno e si cambia strada: le sezioni
   restano alte una schermata con il loro blocco, e c'e' UNA via
   d'uscita — quando la finestra e' davvero troppo bassa o troppo
   stretta per contenerle, il blocco si scioglie e tutto torna a
   scorrere. Lo zoom forte ricade in quel caso da solo, perche'
   riduce l'altezza utile: a 150% su un portatile si e' sotto i
   700px e la via d'uscita scatta.
   ═══════════════════════════════════════════════════════════════ */

/* 1. Le hero non hanno un tetto: con lo zoom il testo cresceva
      dentro un max-height fisso e veniva tagliato. Restano alte
      almeno una schermata e crescono se serve. */
html body main > section.svc-hero,
html body main > section.lcn-hero,
html body main > section.tt-hero,
html body main > section.art-hero,
html body main > section.cs-hero,
html body main > section.d24-hero {
  height: auto !important;
  max-height: none !important;
  min-height: 100dvh;
}
html body main > section.svc-hero { overflow: clip; }

/* 2. La via d'uscita. Sotto queste soglie nessun pannello resta
      agganciato: niente tagli, niente sovrapposizioni, si scorre.
      560px di altezza e' la soglia sotto cui una schermata non
      contiene piu' un pannello con titolo, contenuto e CTA. */
@media (max-width: 900px), (max-height: 700px) {
  html body main > section.svc-path,
  html body main > section.svc-clients,
  html body main > section.page-faq,
  html body main > section.svc-caffe,
  html body main > section.svc-caffe-runway,
  html body main > section.svc-generic-runway,
  html body main > section.cs-cta,
  html body main > section#ai-clienti,
  html body main > section#wd-clienti,
  html body main > section#smmClienti,
  html body main > section#gadsClienti,
  html body main > section#sd-clienti,
  html body main > section#gd-clienti,
  html body main > section#md-clienti,
  html body main > section#pc-clienti,
  html body main > section#imkClienti,
  html body main > section#ads-clienti,
  html body main > section#amici-section,
  html body main > section#ads-detail,
  html body main > section#ads-vantaggi,
  html body main > section#wd-stack,
  html body main > section.page-faq#faq,
  html body main > div#cs-works {
    height: auto !important;
    min-height: 0 !important;
  }
  html body .svc-path__sticky,
  html body .svc-clients__sticky,
  html body .page-faq__sticky,
  html body .page-faq__inner,
  html body .svc-generic-sticky,
  html body .amici-sticky,
  html body .cs-works__sticky,
  html body .cs-cta__inner {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — la sezione contatti fucsia a pagina piena
   Qui il fucsia non sta sulla sezione ma sul pannello agganciato:
   la sezione e' nera e fa da corsa. Quando ho allineato al footer
   il respiro laterale delle sezioni fucsia, quel respiro e' finito
   sulla sezione — e siccome il colore sta sul pannello dentro, il
   fucsia si e' ritirato di 112px per lato lasciando due bande nere
   ai fianchi. Inoltre il pannello era alto esattamente una
   schermata e ritagliava: il form veniva tagliato in basso.
   Qui le due cose si rimettono a posto insieme: il respiro passa
   al contenuto del pannello — quindi il fucsia arriva ai bordi e i
   testi restano allineati al footer — e il pannello cresce se il
   contenuto lo chiede, invece di tagliarlo.
   ═══════════════════════════════════════════════════════════════ */
html body main > section.svc-caffe.hc-section {
  padding-inline: 0 !important;
}
html body main > section.svc-caffe.hc-section > .hc-inner {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: clamp(1.5rem, 6vw, 7rem) !important;
  height: auto !important;
  min-height: 100dvh;
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   PLACEHOLDER DEI FORM FUCSIA — una sola opacita'
   Sei pagine (FAQ, news, tips&tricks, case studies, Dama24 e i due
   articoli) portavano il placeholder a bianco 72%; la regola
   condivisa, che vale per la homepage e per le dieci pagine
   servizi, lo teneva a bianco 35% — su fondo fucsia si legge
   appena, ed e' quello che si vede nella schermata dei contatti.
   Misura unica: 72%. Resta chiaramente un suggerimento, non un
   valore inserito, ma si legge.
   ═══════════════════════════════════════════════════════════════ */
html body .svc-caffe .svc-caffe__field::placeholder,
html body .cs-cta .svc-caffe__field::placeholder,
html body .cs2-contact .svc-caffe__field::placeholder,
html body .faq-contact .svc-caffe__field::placeholder,
html body .nw-contact .svc-caffe__field::placeholder,
html body .tt-contact .svc-caffe__field::placeholder,
html body .art-contact .svc-caffe__field::placeholder {
  color: rgba(255,255,255,0.72) !important;
}
html body .svc-caffe .svc-caffe__field::-webkit-input-placeholder,
html body .cs-cta .svc-caffe__field::-webkit-input-placeholder,
html body .cs2-contact .svc-caffe__field::-webkit-input-placeholder,
html body .faq-contact .svc-caffe__field::-webkit-input-placeholder,
html body .nw-contact .svc-caffe__field::-webkit-input-placeholder,
html body .tt-contact .svc-caffe__field::-webkit-input-placeholder,
html body .art-contact .svc-caffe__field::-webkit-input-placeholder {
  color: rgba(255,255,255,0.72) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CASE STUDIES — la hero allineata alla sezione dei progetti
   Il riferimento non e' il respiro del pannello dei progetti, come
   avevo fatto la prima volta: dentro quel respiro c'e' una colonna
   da 1400px centrata (.cs-works__head e .cs-grid-all), ed e' lei a
   decidere dove comincia "PROGETTI". Su una finestra da 1900px
   quella colonna parte a ~254px, mentre la hero — che stava sul
   solo respiro — partiva a 48. Ecco perche' i due titoli non erano
   incolonnati.
   Qui la hero prende la stessa geometria: respiro della sezione
   piu' colonna da 1400px centrata. Cosi' il filo sinistro del
   titolo, dei numeri, del testo e di "PROGETTI" e' lo stesso, a
   qualunque larghezza.
   ═══════════════════════════════════════════════════════════════ */
html body main > section.cs-hero {
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}
html body main > section.cs-hero > .container.cs-hero__inner {
  max-width: 1400px !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

/* Le domande frequenti in homepage restano come erano: la sezione
   e' la corsa da 145dvh tarata su quel pannello, e la regola
   generale qui sopra — che rende l'altezza automatica per non
   tagliare nulla sotto zoom — le toglieva la corsa e con essa il
   ritmo del blocco. Sulla homepage il caso non si pone: il
   pannello ha il suo ritaglio e la sua media query che scioglie il
   blocco quando lo spazio non basta. */
/* Stessa soglia della pagina: il blocco vale dove c'e' spazio per
   tenerlo — almeno 820px di larghezza e 560 di altezza, la soglia
   tornata praticabile ora che il titolo e' "FAQ" su una riga sola.
   Sotto, la sezione resta libera e si legge tutta scorrendo. */
@media (min-width: 820px) and (min-height: 560px) {
  html body main > section.page-faq#faq {
    height: 145dvh !important;
    min-height: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LAVORA CON NOI — la hero respira
   Lo stile di pagina aveva tre passate sovrapposte che stringevano
   sempre di piu' gli stessi respiri, fino a clamp(0.75rem, 1.5vh,
   1.25rem) fra una riga e l'altra: servivano a far stare tutto in
   una schermata esatta, perche' la sezione aveva un'altezza fissa
   e ritagliava. Quel vincolo non c'e' piu' — la hero parte da una
   schermata e cresce se serve — quindi i respiri tornano a misura
   di lettura. Il blocco di testo resta centrato e i numeri
   ancorati in basso.
   ═══════════════════════════════════════════════════════════════ */
html body main > section.lcn-hero {
  padding-top: calc(var(--nav-h) + clamp(2rem, 5vh, 4rem)) !important;
  padding-bottom: clamp(2.5rem, 5vh, 4rem) !important;
}
html body main > section.lcn-hero .lcn-hero__kicker {
  margin-bottom: clamp(1.25rem, 2.6vh, 1.9rem) !important;
}
html body main > section.lcn-hero .lcn-hero__title {
  /* 60px: la misura chiesta per questo titolo. Qui resta solo lo
     stacco sotto, che e' la parte che serviva alla hero meno
     compatta — il corpo non si tocca. */
  font-size: min(60px, 11vw) !important;
  line-height: 1.05 !important;
  margin-bottom: clamp(1.75rem, 3.6vh, 3rem) !important;
}
html body main > section.lcn-hero .lcn-hero__bottom {
  padding-top: clamp(1.5rem, 3vh, 2.5rem) !important;
}
html body main > section.lcn-hero .lcn-hero__sub {
  margin-bottom: clamp(1.5rem, 3vh, 2.25rem) !important;
}
html body main > section.lcn-hero .lcn-hero__stats {
  padding-top: clamp(2rem, 4vh, 3.25rem) !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  margin-bottom: clamp(1rem, 3vh, 2.5rem) !important;
}
html body main > section.lcn-hero .lcn-hero__stat {
  gap: 0.35rem !important;
}
html body main > section.lcn-hero .lcn-hero__stat-num {
  font-size: min(150px, 26vw, 7.5vh) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PAGINE SERVIZI — la timeline a tappe respira
   Revisione cliente: il blocco tappe + riquadro era troppo
   compatto, soprattutto in basso a destra, dove testo, elenco e CTA
   si stringevano contro il bordo del riquadro — e il riquadro
   stesso arrivava a filo del bordo destro della finestra, perche'
   .container non ha padding a destra. Sotto, la sezione successiva
   saliva a 36px dal fondo del riquadro.
   Il pannello non e' piu' chiuso in una schermata fissa: cresce
   quanto serve, quindi i respiri nuovi non possono mai spingere la
   CTA fuori vista, e la sezione e' alta quanto il suo pannello —
   nessuna corsa in cui lo scroll resta fermo.
   ═══════════════════════════════════════════════════════════════ */
html body main > section.svc-path,
html body main > section.svc-hero + section.svc-path {
  height: auto !important;
}
html body main > section.svc-path > .svc-path__sticky,
html body main > section.svc-hero + section.svc-path > .svc-path__sticky {
  height: auto !important;
  min-height: 100dvh;
  padding-bottom: clamp(5.5rem, 13vh, 9rem) !important;
}
html body main > section.svc-path > .svc-path__sticky > .container {
  height: auto;
  flex: 1 0 auto;
  padding-inline-end: var(--gutter);
}
html body main > section.svc-path .svc-tabs__panel {
  padding: clamp(1.5rem, 3vh, 2.5rem) !important;
  gap: clamp(1.75rem, 3.2vw, 3.25rem) !important;
}
html body main > section.svc-path .svc-tabs__media {
  min-height: clamp(260px, 36vh, 420px);
}
html body main > section.svc-path .svc-tabs__copy {
  gap: clamp(1rem, 2vh, 1.5rem) !important;
  padding: clamp(0.5rem, 1.5vh, 1.25rem) clamp(0.5rem, 2vw, 2rem) clamp(0.5rem, 1.5vh, 1.25rem) 0;
}
html body main > section.svc-path .svc-tabs__points {
  gap: 0.65rem !important;
}
html body main > section.svc-path .svc-tabs__cta {
  margin-top: clamp(0.5rem, 1.4vh, 1rem) !important;
}
/* Web design ha un pannello suo (#wd-stack): stessa regola, e la
   corsa minima di 118dvh che lo teneva agganciato va via. */
html body main > section#wd-stack {
  min-height: 0 !important;
}
html body main > section#wd-stack > .svc-path__sticky {
  padding-bottom: clamp(5.5rem, 13vh, 9rem) !important;
}
@media (max-width: 900px) {
  html body main > section.svc-path > .svc-path__sticky,
  html body main > section.svc-hero + section.svc-path > .svc-path__sticky,
  html body main > section#wd-stack > .svc-path__sticky {
    padding-bottom: clamp(3.5rem, 12vw, 5rem) !important;
  }
}

/* Seconda passata (revisione cliente): la card resta ancora
   compatta, soprattutto la colonna di testo a destra. Più margine
   interno alla card, colonna testo staccata dalla foto e dal bordo,
   misura di riga contenuta, respiri veri fra paragrafo, elenco e
   CTA; e molto più stacco dalla sezione che segue. */
html body main > section.svc-path .svc-tabs__panel,
html body #wd-stack .svc-tabs__panel.wd-pan {
  padding: clamp(1.75rem, 3.2vw, 3.25rem) !important;
  gap: clamp(2.25rem, 4.5vw, 4.5rem) !important;
}
html body main > section.svc-path .svc-tabs__copy {
  justify-content: center !important;
  gap: clamp(1.25rem, 2.6vh, 2rem) !important;
  padding: clamp(1rem, 2.4vh, 2rem) clamp(1rem, 3vw, 3rem) clamp(1rem, 2.4vh, 2rem) 0 !important;
}
html body main > section.svc-path .svc-tabs__text {
  max-width: 48ch;
  line-height: 1.7 !important;
}
html body main > section.svc-path .svc-tabs__points {
  gap: 0.85rem !important;
}
html body main > section.svc-path .svc-tabs__cta {
  margin-top: clamp(0.75rem, 2vh, 1.5rem) !important;
}
html body main > section.svc-path > .svc-path__sticky,
html body main > section.svc-hero + section.svc-path > .svc-path__sticky,
html body main > section#wd-stack > .svc-path__sticky {
  padding-bottom: clamp(7rem, 17vh, 11rem) !important;
}
@media (max-width: 900px) {
  html body main > section.svc-path .svc-tabs__copy {
    padding: 0.5rem 0 0 !important;
  }
  html body main > section.svc-path > .svc-path__sticky,
  html body main > section.svc-hero + section.svc-path > .svc-path__sticky,
  html body main > section#wd-stack > .svc-path__sticky {
    padding-bottom: clamp(4rem, 14vw, 6rem) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TIMELINE A TAPPE — di nuovo in una schermata (revisione cliente)
   La sezione deve stare tutta nella viewport, e dentro la card lo
   spazio va dato il più possibile al testo a destra. Quindi:
   · pannello alto esattamente una schermata, sezione alta quanto
     lui (nessuna corsa: lo scroll non si ferma mai);
   · respiri verticali tarati in vh, così si stringono con la
     finestra invece di spingere la card fuori;
   · la foto cede larghezza (40/60) e riempie in altezza quello
     che resta; il testo prende la colonna larga, senza tetto di
     misura, con margini laterali veri.
   Queste regole sostituiscono le due passate precedenti qui sopra.
   Sotto i 700px di altezza (o su schermi stretti) una schermata
   non basta: il pannello torna a crescere col contenuto.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (min-height: 700px) {
  html body main > section.svc-path > .svc-path__sticky,
  html body main > section.svc-hero + section.svc-path > .svc-path__sticky,
  html body main > section#wd-stack > .svc-path__sticky {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding-top: calc(var(--nav-h) + clamp(0.75rem, 2.4vh, 2rem)) !important;
    padding-bottom: clamp(1.75rem, 5vh, 3.5rem) !important;
  }
  html body main > section.svc-path > .svc-path__sticky > .container,
  html body main > section#wd-stack > .svc-path__sticky > .container {
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    display: flex;
    flex-direction: column;
  }
  html body main > section.svc-path .svc-path__head {
    margin-bottom: clamp(0.75rem, 2.2vh, 1.75rem) !important;
  }
  html body main > section.svc-path .svc-path__head .smm-panel__big-title {
    font-size: min(60px, 9vw, 6.4vh) !important;
  }
  html body main > section.svc-path .svc-tabs {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vh, 1.5rem) !important;
  }
  html body main > section.svc-path .svc-tabs__panels {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  html body main > section.svc-path .svc-tabs__panel,
  html body #wd-stack .svc-tabs__panel.wd-pan {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
    padding: clamp(0.9rem, 2.2vh, 1.75rem) !important;
    gap: clamp(1.5rem, 3vw, 3rem) !important;
  }
  html body main > section.svc-path .svc-tabs__media {
    min-height: 0 !important;
    height: 100% !important;
    aspect-ratio: auto !important;
  }
  html body main > section.svc-path .svc-tabs__copy {
    min-height: 0;
    justify-content: center !important;
    gap: clamp(0.6rem, 1.6vh, 1.25rem) !important;
    padding: clamp(0.25rem, 1vh, 0.75rem) clamp(1rem, 2.5vw, 2.75rem) clamp(0.25rem, 1vh, 0.75rem) 0 !important;
  }
  html body main > section.svc-path .svc-tabs__text {
    max-width: none !important;
    line-height: 1.6 !important;
  }
  html body main > section.svc-path .svc-tabs__points {
    gap: clamp(0.3rem, 0.9vh, 0.7rem) !important;
  }
  html body main > section.svc-path .svc-tabs__cta {
    margin-top: clamp(0.25rem, 1vh, 0.75rem) !important;
  }
}
@media (min-width: 901px) and (min-height: 700px) {
  /* più spazio al testo: la foto scende a un terzo della card */
  html body main > section.svc-path .svc-tabs__panel,
  html body #wd-stack .svc-tabs__panel.wd-pan {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
  }
  html body main > section.svc-path .svc-path__head .smm-panel__big-title {
    font-size: min(60px, 9vw, 5.6vh) !important;
  }
  html body main > section.svc-path .svc-tabs__tab {
    gap: clamp(0.4rem, 1.1vh, 0.85rem) !important;
  }
}
/* Rete di sicurezza: se in una sezione anche una sola card non sta
   nella schermata (lo misura js/main.js e aggiunge la classe), quella
   sezione torna a crescere col contenuto invece di tagliare il testo
   o la CTA. Oggi succede solo con finestre basse su Web design, che
   ha un paragrafo in più nelle card. */
html body main > section.svc-path.svc-path--grow > .svc-path__sticky {
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}
html body main > section.svc-path.svc-path--grow .svc-tabs__panel,
html body main > section.svc-path.svc-path--grow .svc-tabs__panel.wd-pan {
  height: auto !important;
}
html body main > section.svc-path.svc-path--grow .svc-tabs__media {
  min-height: clamp(240px, 34vh, 380px) !important;
}
html body main > section#wd-stack.svc-path--grow > .svc-path__sticky {
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}
html body main > section#wd-stack.svc-path--grow > .svc-path__sticky > .container {
  height: auto !important;
}
html body #wd-stack.svc-path--grow .svc-tabs__panel.wd-pan {
  height: auto !important;
}
/* Web design: le card hanno un paragrafo in più. L'elenco — sei
   voci brevi — passa a tre colonne e torna al suo interlinea
   stretto, così la card sta in una schermata anche a 900px. */
@media (min-width: 1100px) and (min-height: 700px) {
  html body main > section#wd-stack .wd-tabs__list.svc-tabs__points {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    row-gap: 0.3rem !important;
    column-gap: clamp(0.9rem, 1.6vw, 1.5rem) !important;
  }
  html body main > section#wd-stack .wd-tabs__copy {
    gap: clamp(0.5rem, 1.2vh, 0.9rem) !important;
  }
}
html body main > section.svc-path.svc-path--grow .svc-tabs__panel {
  min-height: var(--svc-panel-min, 0) !important;
}
html body #wd-stack.svc-path--grow .svc-tabs__panel.wd-pan {
  min-height: var(--svc-panel-min, 0) !important;
}
/* la barra delle tappe non cede altezza: è la card sotto a stringersi */
html body main > section.svc-path .svc-tabs__strip {
  flex: 0 0 auto !important;
  overflow-y: hidden !important;
}
/* la variante "dopo la hero" ha un selettore più specifico: la
   crescita deve valere anche lì */
html body main > section.svc-hero + section.svc-path.svc-path--grow > .svc-path__sticky {
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}
html body main > section.svc-hero + section.svc-path.svc-path--grow > .svc-path__sticky > .container {
  height: auto !important;
}

/* ── Titoli: fade/reveal al posto dell'effetto acqua ────────────
   Lo script delle pagine mette .wl-wait sui titoli che osserva
   (nascosti finché non entrano in scena) e .wl-in quando entrano:
   salgono e compaiono, senza il lampo di prima (titolo visibile →
   sparisce → ricompare). */
html.js-reveal .wl-wait:not(.wl-in) { opacity: 0; }
html.js-reveal .wl-wait.wl-in { animation: wlIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
@keyframes wlIn {
  from { opacity: 0; translate: 0 24px; }
  to   { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .wl-wait { opacity: 1 !important; animation: none !important; }
}
.static-capture .wl-wait { opacity: 1 !important; animation: none !important; }