/* =======================================================================
   STYLE.CSS — Elisa Bucco
   Struttura:
   1. Design tokens (:root)
   2. Reset & base
   3. Utility (sr-only, reduced motion, scroll lock)
   4. Reveal animations
   5. Keyframes globali
   6. Navigation (desktop + mobile menu)
   7. Hero
   8. Section (layout generico)
   9. Steps
   10. Full-bleed image
   11. Audience list
   12. CTA riutilizzabili (chisono)
   13. Scroll-to-top
   14. Services (percorsi)
   15. Dual cards
   16. Modality
   17. Contact
   18. Form
   19. Footer

   Metodologia: mobile-first. Le regole base descrivono mobile,
   gli @media (min-width: …) aggiungono complessità su viewport maggiori.
   ======================================================================= */

/* ============================================================
   0. SELF-HOSTED FONTS (Archivo variable)
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/archivo-variable-latin.woff2') format('woff2-variations'),
       url('fonts/archivo-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Colori base */
  --color-ink: #1a1a1a;
  --color-bg: #fafaf8;
  --color-bg-alt: #f2f2ee;
  --color-surface: #fff;
  --color-border: #e4e4de;

  /* Feedback */
  --color-success: #4a7c59;
  --color-error: #c9584e;

  /* Overlay */
  --overlay-services: rgba(0, 0, 0, 0.9);
  --overlay-fullbleed: linear-gradient(to bottom, rgba(0,0,0,0.22), rgba(0,0,0,0.32));
  --overlay-hero: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.1), rgba(0,0,0,0.45));

  /* Bordi / hairlines scuri */
  --border-dark-soft: rgba(255, 255, 255, 0.1);
  --border-dark-softer: rgba(255, 255, 255, 0.08);

  /* Timing */
  --ease-smooth: cubic-bezier(.25, .1, .25, 1);
  --ease-soft:   cubic-bezier(0, .55, .45, 1);
  --t-fast:   .3s;
  --t-base:   .4s;
  --t-slow:   .6s;
  --t-slower: .7s;

  /* Z-index scale */
  --z-content: 2;
  --z-floater: 90;
  --z-menu:    999;
  --z-nav:     1000;
  --z-nav-top: 1001;
  --z-sr:      9999;

  /* Typography */
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --track-widest: 0.14em;
  --track-wide:   0.08em;

  /* Layout */
  --container: min(90%, 75rem);
  --container-wide: min(75rem, 90vw);

  /* Radius */
  --radius-card-sm: 1rem;
  --radius-card-md: 1.25rem;
  --radius-card-lg: 1.5rem;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img, video, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font: inherit; }

html {
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--color-ink); color: var(--color-bg); }

/* Focus ring globale */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* ============================================================
   3. UTILITY
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus-visible {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 1rem 1.5rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--color-ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  z-index: var(--z-sr);
}

/* Scroll lock (toggled by main.js) */
body.is-locked { overflow: hidden; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
  .reveal, .reveal-img { opacity: 1; transform: none; }
  .hero__bg, .fullbleed__img { animation: none; transform: none; }
}

/* ============================================================
   4. REVEAL ANIMATIONS (gestite da IntersectionObserver in main.js)
   ============================================================ */
.reveal, .reveal-img {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity   var(--t-slower) var(--ease-soft),
    transform var(--t-slower) var(--ease-soft);
}
.reveal-img { transform: translateY(2.5rem) scale(.97); }
.reveal.visible,
.reveal-img.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.reveal--d1 { transition-delay: .12s; }
.reveal--d2 { transition-delay: .24s; }
.reveal--d3 { transition-delay: .36s; }

/* ============================================================
   5. KEYFRAMES GLOBALI
   ============================================================ */
@keyframes heroKenBurns {
  0%   { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
  50%  { transform: scale(1.10) translate3d( 1.2%,  0.6%, 0); }
  100% { transform: scale(1.06) translate3d(-0.8%,  1.0%, 0); }
}

/* ============================================================
   6. NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem max(1.5rem, 5vw);
  background: rgba(250, 250, 248, 0.9);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-bottom: 1px solid var(--color-border);
  transition: transform var(--t-base) var(--ease-smooth);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: var(--color-bg); }
}
.nav__brand {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--color-ink);
}
.nav__links {
  display: none;
  gap: 2rem;
}
.nav__link {
  padding: 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--track-wide);
  color: var(--color-ink);
  transition: color var(--t-base) var(--ease-smooth);
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav__cta {
  padding: 0.55em 1.8em;
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  transition: border-color var(--t-base) var(--ease-smooth);
}
.nav__cta:hover { border-color: var(--color-ink); }

@media (max-width: 767px) {
  .nav__cta { display: none; }
}

.nav__burger {
  position: relative;
  z-index: var(--z-nav-top);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
}
.burger-line {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--color-ink);
  transition: transform var(--t-base) var(--ease-smooth);
  transform-origin: center;
}
.active .burger-line:first-child { transform: translateY(0.3125rem)  rotate(45deg); }
.active .burger-line:last-child  { transform: translateY(-0.3125rem) rotate(-45deg); }

@media (min-width: 768px) {
  .nav__links  { display: flex; }
  .nav__burger { display: none; }
}

/* Mobile menu */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem max(2.5rem, 5vw);
  background: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--t-base) var(--ease-smooth),
    visibility var(--t-base) var(--ease-smooth);
}
.mmenu.open { opacity: 1; visibility: visible; }
.mmenu__nav { display: flex; flex-direction: column; }
.mmenu__link {
  display: block;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: clamp(1.5rem, 7vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-ink);
  transition: padding-left var(--t-base) var(--ease-smooth);
}
.mmenu__link:hover { padding-left: 1rem; }
.mmenu__social {
  margin-top: auto;
  padding-top: 2.5rem;
  display: flex;
  gap: 2rem;
}
.mmenu__social a {
  font-size: 1rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  transform-origin: center center;
  will-change: transform;
  animation: heroKenBurns 24s ease-in-out infinite alternate;
}
@media (max-width: 1024px) {
  .hero__bg { object-position: calc(100% + 50px) center; }
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-hero);
}
@media (max-width: 767px) {
  .hero__overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.7));
  }
}
.hero__inner {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
  padding: 2.5rem;
  max-width: 56.25rem;
}
@media (max-width: 767px) {
  .hero__inner { padding-top: calc(4.75rem + 50px); }
}
.hero__eyebrow {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  opacity: 0.7;
}
.hero__title {
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 400;
  line-height: 1.30;
  letter-spacing: -0.03em;
}
.hero__title em { font-style: italic; }
.hero__sub {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--track-wide);
  color: #fff;
}
.hero__cta {
  display: inline-block;
  margin-top: 4rem;
  padding: 0.55em 1.8em;
  min-height: 3rem;
  line-height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  transition:
    background   var(--t-base) var(--ease-smooth),
    border-color var(--t-base) var(--ease-smooth);
}
.hero__cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

@media (min-width: 768px) {
  .hero__title { font-size: clamp(2.2rem, 5.5vw, 3.8rem); }
  .hero__sub   { font-size: 1rem; }
}

/* ============================================================
   8. SECTION (layout generico: chi-sono, cosa-faccio, come-lo-faccio, a-chi-e-rivolto)
   ============================================================ */
.section { padding-block: clamp(5rem, 12vw, 10rem); }
.section--alt { background: var(--color-bg-alt); }
.section__container {
  width: var(--container);
  margin-inline: auto;
}
.section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
.section__eyebrow {
  margin-bottom: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  color: var(--color-ink);
}
.section__title {
  margin-bottom: 2.5rem;
  max-width: 17ch;
  font-size: clamp(1.777rem, 3.5vw, 2.369rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.section__title em { font-style: italic; }
.section__text {
  max-width: 55ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-ink);
}
.section__text strong { font-weight: 700; }
.section__text p + p { margin-top: 1.5rem; }

@media (min-width: 768px) {
  .section__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
    align-items: start;
  }
  .section__title { font-size: clamp(2.369rem, 5vw, 3.157rem); }
}

/* ============================================================
   9. STEPS (lista numerata: 01 / 02 / 03)
   ============================================================ */
.steps__item {
  padding-block: 2.5rem;
  border-top: 1px solid var(--color-border);
}
.steps__num {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  color: var(--color-ink);
}
.steps__title {
  margin-bottom: 0.5rem;
  font-size: clamp(1.5rem, 2.5vw, 1.777rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
.steps__text {
  max-width: 40ch;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink);
}

/* ============================================================
   10. FULL BLEED IMAGE
   ============================================================ */
.fullbleed {
  position: relative;
  overflow: hidden;
  line-height: 0;
}
.fullbleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-fullbleed);
  pointer-events: none;
  z-index: 1;
}
.fullbleed__img {
  width: 100%;
  height: clamp(18.75rem, 50vw, 35rem);
  object-fit: cover;
  object-position: center top;
  transform-origin: center center;
  will-change: transform;
  animation: heroKenBurns 28s ease-in-out infinite alternate;
}

/* ============================================================
   11. AUDIENCE LIST (a-chi-e-rivolto)
   ============================================================ */
.audience { display: block; }
.audience__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding-block: 1.125rem;
  border-top: 1px solid var(--color-border);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-ink);
}
.audience__item:last-child { border-bottom: 1px solid var(--color-border); }
.audience__item svg {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.4375rem;
  flex-shrink: 0;
  color: var(--color-ink);
  stroke-width: 1.8;
}

/* ============================================================
   12. CTA "chisono" (riutilizzabile — scuro su sfondo chiaro)
   ============================================================ */
.chisono__cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.55em 1.8em;
  min-height: 3rem;
  line-height: 3rem;
  border: 1px solid rgba(26, 26, 26, 0.3);
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  transition:
    border-color var(--t-base) var(--ease-smooth),
    background   var(--t-base) var(--ease-smooth);
}
.chisono__cta:hover {
  border-color: var(--color-ink);
  background: rgba(26, 26, 26, 0.08);
}

/* ============================================================
   13. SCROLL TO TOP
   ============================================================ */
.totop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-border);
  font-size: 1rem;
  z-index: var(--z-floater);
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  transition:
    opacity      var(--t-base) var(--ease-smooth),
    transform    var(--t-base) var(--ease-smooth),
    border-color var(--t-base) var(--ease-smooth);
}
.totop:hover { border-color: var(--color-ink); }
.totop.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ============================================================
   14. SERVICES (Percorsi)
   ============================================================ */
.services {
  position: relative;
  margin: 0 0.375rem;
  padding: clamp(5rem, 12vw, 10rem) 0;
  overflow: hidden;
  border-radius: var(--radius-card-sm);
}
.services__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.services__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--overlay-services);
}
.services__container {
  position: relative;
  z-index: var(--z-content);
  width: var(--container-wide);
  margin: 0 auto;
}
.services__label,
.services__others-title {
  display: block;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  text-align: center;
}
.services__label        { margin-bottom: 3rem; }
.services__others-title { margin-bottom: 2.5rem; }

.services__hero-card {
  max-width: 45rem;
  margin: 0 auto 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-dark-soft);
  text-align: center;
}
.services__hero-name {
  display: block;
  margin-bottom: 1.5rem;
  color: #fff;
  font-size: clamp(3rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.services__hero-card .service-entry__name {
  margin-bottom: 0.5rem;
  color: #fff;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 400;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}
.services__hero-card .service-entry__desc {
  max-width: 50ch;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 400;
  line-height: 1.7;
}
.services__hero-card ul {
  max-width: 40rem;
  margin: 2.5rem auto 0.5rem;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: 0.625rem;
  color: #fff;
  text-align: left;
}
.services__hero-card ul li {
  position: relative;
  padding-left: 2.25rem;
  min-height: 1.5rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  transition:
    color     .35s var(--ease-smooth),
    transform .35s var(--ease-smooth);
}
.services__hero-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.375rem;
  height: 1.375rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.375rem 1.375rem;
  opacity: 0.85;
  transition:
    opacity   .35s var(--ease-smooth),
    transform var(--t-base) var(--ease-smooth);
}
.services__hero-card ul li:hover           { color: #fff; transform: translateX(0.125rem); }
.services__hero-card ul li:hover::before   { opacity: 1;  transform: scale(1.08); }
.services__hero-card ul li.service-entry__desc { margin: 0; }

/* Icone inline (SVG data URI) */
.services__hero-card ul li.icon-body::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='4' r='1.8'/><path d='M10 6 L13 13'/><path d='M11 8 L18 4'/><path d='M11 8 L4 11'/><path d='M13 13 L18 19'/><path d='M13 13 L7 21'/></svg>");
}
.services__hero-card ul li.icon-target::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='5'/><circle cx='12' cy='12' r='1.4' fill='%23ffffff'/></svg>");
}
.services__hero-card ul li.icon-strength::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 6v12'/><path d='M3 9v6'/><path d='M17.5 6v12'/><path d='M21 9v6'/><path d='M6.5 12h11'/></svg>");
}
.services__hero-card ul li.icon-growth::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 17 9 11 13 15 21 7'/><polyline points='15 7 21 7 21 13'/></svg>");
}
.services__hero-card ul li.icon-support::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5c0 4.14-4.03 7.5-9 7.5-1.13 0-2.22-.17-3.23-.5L4 20l1.17-3.5A7.14 7.14 0 0 1 3 11.5C3 7.36 7.03 4 12 4s9 3.36 9 7.5z'/></svg>");
}
.services__hero-card ul li.icon-check::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><polyline points='8 12 11 15 16 9'/></svg>");
}

/* Meta info del percorso Trasformati (Dettagli + Periodi di apertura) */
.services__hero-meta {
  list-style: none;
  max-width: 40rem;
  margin: 2.5rem auto 0;
  padding: 2rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 3rem;
  row-gap: 0.625rem;
  text-align: left;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  line-height: 1.6;
}
.services__hero-meta li {
  position: relative;
  padding-left: 1.25rem;
}
.services__hero-meta li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.9;
}

@media (min-width: 640px) {
  .services__hero-meta { grid-template-columns: 1fr 1fr; }
}

/* Altri percorsi (grid di 2 voci) */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: clamp(3rem, 6vw, 4rem);
}
.service-entry {
  padding: clamp(2rem, 4vw, 2.5rem) 0;
  border-bottom: 1px solid var(--border-dark-softer);
  text-align: center;
}
.service-entry:first-child { padding-top: 0; }
.service-entry:last-child  { border-bottom: none; padding-bottom: 0; }
.service-entry__num {
  display: block;
  margin-bottom: 1rem;
  color: #fff;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.service-entry__name {
  margin-bottom: 0.25rem;
  color: #fff;
  font-size: clamp(0.75rem, 1vw, 0.875rem);
  font-weight: 400;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}
.service-entry__desc {
  margin-bottom: 0;
  color: #fff;
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 400;
  line-height: 1.7;
}

/* Elementi presenti nel markup ma nascosti in questa versione */
.service-entry__tagline,
.service-entry__footer { display: none; }

.services__bottom {
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--border-dark-soft);
  text-align: center;
}
.services__note {
  margin-bottom: 1rem;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
}
.services__cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.55em 1.8em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  min-height: 3rem;
  line-height: 3rem;
  transition:
    border-color var(--t-base) var(--ease-smooth),
    background   var(--t-base) var(--ease-smooth);
}
.services__cta:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

@media (min-width: 480px) {
  .services { margin: 0 0.5rem; border-radius: var(--radius-card-md); }
}
@media (min-width: 768px) {
  .services {
    margin: clamp(3rem, 5vw, 5rem) 0.75rem;
    border-radius: var(--radius-card-lg);
  }
  .services__hero-card {
    margin-bottom: 4rem;
    padding-bottom: 4rem;
  }
  .services__hero-card ul {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 0.875rem;
  }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .service-entry {
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    border-right: 1px solid var(--border-dark-soft);
    border-bottom: none;
  }
  .service-entry:first-child { padding-left: 0; padding-top: 0; }
  .service-entry:last-child  { padding-right: 0; border-right: none; }
}

/* ============================================================
   15. DUAL CARDS (Performance & ASILE)
   ============================================================ */
.dual-cards {
  padding: clamp(5rem, 12vw, 10rem) 0;
  background: var(--color-bg);
}
.dual-cards__container {
  width: var(--container-wide);
  margin: 0 auto;
}
.dual-cards__header {
  max-width: 43.75rem;
  margin: 0 auto 4rem;
  text-align: center;
}
.dual-cards__label {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}
.dual-cards__header > .dual-cards__title {
  color: var(--color-ink);
  font-size: clamp(1.777rem, 3.5vw, 2.369rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.dual-cards__header > .dual-cards__title em {
  font-style: italic;
  font-weight: 500;
}
.dual-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Card singola */
.dual-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--t-base) var(--ease-smooth);
}
.dual-card:hover { border-color: var(--color-ink); }

.dual-card__media {
  overflow: hidden;
  margin: 0;
  aspect-ratio: 16 / 10;
}
@supports not (aspect-ratio: 16 / 10) {
  .dual-card__media {
    position: relative;
    padding-top: 62.5%;
  }
  .dual-card__media > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.dual-card__media img,
.dual-card__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-soft);
}
.dual-card:hover .dual-card__media img,
.dual-card:hover .dual-card__media video {
  transform: scale(1.03);
}

/* Slider crossfade (usato in ASILE Studio) — auto-play + controllo manuale via dots */
.dual-card__slider { position: relative; }
.dual-card__slider .dual-card__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s var(--ease-smooth);
  will-change: opacity;
}
.dual-card__slider .dual-card__slide.is-active { opacity: 1; }

/* Dots di navigazione */
.dual-card__dots {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
}
.dual-card__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition:
    background-color var(--t-base) var(--ease-smooth),
    transform        var(--t-base) var(--ease-smooth);
}
.dual-card__dot:hover { background: rgba(255, 255, 255, 0.75); }
.dual-card__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

/* Disabilita zoom-in al hover della card sulle slide (per non disturbare il crossfade) */
.dual-card:hover .dual-card__slider .dual-card__slide { transform: none; }

/* Reduced motion: mostra solo la prima slide, niente transizione */
@media (prefers-reduced-motion: reduce) {
  .dual-card__slider .dual-card__slide { transition: none; }
}

.dual-card__body { padding: 2rem 1.5rem; }
.dual-card__body .dual-card__title {
  margin-bottom: 1rem;
  color: var(--color-ink);
  font-size: clamp(1.5rem, 2.5vw, 1.777rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.dual-card__text {
  margin-bottom: 1.5rem;
  color: var(--color-ink);
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 400;
  line-height: 1.7;
}
.dual-card__list {
  margin: 0 0 1.5rem;
  padding: 0;
}
.dual-card__list li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.375rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
}
.dual-card__list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-ink);
}
.dual-card__cta {
  display: inline-block;
  padding: 0.55em 1.8em;
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  min-height: 3rem;
  line-height: 3rem;
  transition:
    border-color var(--t-base) var(--ease-smooth),
    background   var(--t-base) var(--ease-smooth);
}
.dual-card__cta:hover {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #fff;
}

@media (min-width: 768px) {
  .dual-cards__header > .dual-cards__title {
    font-size: clamp(2.369rem, 5vw, 3.157rem);
  }
  .dual-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .dual-card__body { padding: 2.5rem 2rem; }
}

/* ============================================================
   16. MODALITY (Online / Presenza)
   ============================================================ */
.modality {
  padding: clamp(5rem, 12vw, 10rem) 0;
  background: var(--color-bg-alt);
}
.modality__container {
  width: var(--container-wide);
  margin: 0 auto;
}
.modality__header {
  max-width: 43.75rem;
  margin: 0 auto 3rem;
  text-align: center;
}
.modality__label {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}
.modality__title {
  color: var(--color-ink);
  font-size: clamp(1.777rem, 3.5vw, 2.369rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.modality__title em { font-style: italic; font-weight: 500; }
.modality__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.modality-card {
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.modality-card__title {
  margin-bottom: 1rem;
  color: var(--color-ink);
  font-size: clamp(1.5rem, 2.5vw, 1.777rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.modality-card__text {
  color: var(--color-ink);
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 400;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .modality__title { font-size: clamp(2.369rem, 5vw, 3.157rem); }
  .modality__grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   17. CONTACT
   ============================================================ */
.contact {
  padding: clamp(5rem, 12vw, 10rem) 0;
  background: var(--color-bg);
}
.contact__container {
  width: var(--container-wide);
  margin: 0 auto;
}
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 3rem;
}
.contact__label {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}
.contact__title {
  margin-bottom: 1.5rem;
  color: var(--color-ink);
  font-size: clamp(1.777rem, 3.5vw, 2.369rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.contact__title em { font-style: italic; font-weight: 500; }
.contact__desc {
  color: var(--color-ink);
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 400;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .contact__grid {
    grid-template-columns: 40% 1fr;
    gap: 4rem;
  }
  .contact__title { font-size: clamp(2.369rem, 5vw, 3.157rem); }
}

/* ============================================================
   18. FORM
   ============================================================ */
.form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.form__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.form__label {
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.form__input,
.form__select,
.form__textarea {
  padding: 0.625rem;
  border: 1px solid var(--color-border);
  border-radius: 0;
  outline: none;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  transition: border-color var(--t-base) var(--ease-smooth);
}
.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--color-ink);
}
.form__select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a1a1a' fill='none' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
  appearance: none;
}
#lezioni-private,
#lezioni-private:focus { border-color: transparent; }
.form__textarea {
  min-height: 7.5rem;
  resize: vertical;
}

/* Radio */
.form__radio-group {
  display: flex;
  gap: 1.5rem;
  padding-top: 0.25rem;
  flex-wrap: wrap;
}
.form__radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
}
.form__radio-label input[type="radio"] {
  position: relative;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  transition: border-color var(--t-fast) ease;
  cursor: pointer;
  appearance: none;
}
.form__radio-label input[type="radio"]:checked { border-color: var(--color-ink); }
.form__radio-label input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-ink);
  transform: translate(-50%, -50%);
}

/* Privacy checkbox */
.form__privacy { margin-top: 0.25rem; }
.form__checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}
.form__checkbox-label a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form__checkbox-label input[type="checkbox"] {
  position: relative;
  width: 1.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  margin-top: 1px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  transition: border-color var(--t-fast) ease;
  cursor: pointer;
  appearance: none;
}
.form__checkbox-label input[type="checkbox"]:checked {
  border-color: var(--color-ink);
  background: var(--color-ink);
}
.form__checkbox-label input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.3125rem;
  width: 0.3125rem;
  height: 0.5625rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Submit */
.contact__submit {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.55em 1.8em;
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
  cursor: pointer;
  min-height: 3rem;
  transition:
    border-color var(--t-base) var(--ease-smooth),
    background   var(--t-base) var(--ease-smooth),
    color        var(--t-base) var(--ease-smooth);
}
.contact__submit:hover {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: #fff;
}
.contact__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Feedback */
.form__feedback {
  margin-top: 0.75rem;
  min-height: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-line;
}
.form__feedback:empty { display: none; }
.form__feedback--success { color: var(--color-success); }
.form__feedback--error   { color: var(--color-error); }

@media (min-width: 480px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   19. FOOTER
   ============================================================ */
.footer {
  background: var(--color-bg);
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.footer__container {
  width: 100%;
  padding-inline: max(1.5rem, 5vw);
}
.footer > .footer__container { padding-top: 3rem; }
.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--color-border);
}
.footer__heading {
  margin-bottom: 1rem;
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--track-widest);
  text-transform: uppercase;
}
.footer__list li { margin-bottom: 0.5rem; }
.footer__list a {
  color: var(--color-ink);
  font-size: 0.875rem;
  font-weight: 400;
  transition: color var(--t-base) var(--ease-smooth);
}
.footer__bottom { padding: 1rem 0; }
.footer__bottom .footer__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer__bottom p,
.footer__credits {
  color: var(--color-ink);
  font-size: 0.75rem;
  font-weight: 400;
}
.footer__credits { transition: color var(--t-base) var(--ease-smooth); }

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}