/*
  MedEstetica – Stili base mobile-first
  /* Reset & base */

  * {
    color: inherit;
    text-decoration: none;

  html,
  body {
    margin: 0;
    padding: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: #050404;
    color: #f4ece6;
    line-height: 1.6;
  }

  .container {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Header */

  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    transition:
      background-color 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease,
      color 220ms ease;
    color: #ffffff;
  }

  .header-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    gap: 16px;
  }

  /* logo più vicino al bordo sinistro senza spostare nav e CTA */
  .site-header .container {
    padding-left: 0; /* logo più vicino possibile al bordo sinistro */
    padding-right: 20px;
  }

  .logo {
    margin-right: 8px; /* piccolo distacco dalla nav */
  }

  .logo {
    font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: inherit;
  }

  .main-nav ul {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
  }

  .main-nav a {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
  }

  .main-nav a:hover {
    opacity: 0.85;
    text-decoration: none;
  }

  .main-nav a.nav-active {
    color: #f0cf98;
    opacity: 1;
  }

  .nav-toggle {
    display: none;
  }

  /* Buttons */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
  }

  .btn-primary {
    background: #f0cf98;
    color: #050404;
    box-shadow: 0 16px 40px rgba(240, 207, 152, 0.25);
    position: relative;
    overflow: hidden;
    transition:
      background 300ms ease,
      transform 400ms cubic-bezier(0.19, 1, 0.22, 1),
      box-shadow 400ms cubic-bezier(0.19, 1, 0.22, 1);
  }

  /* Riflesso shimmer */
  .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 35%,
      rgba(255, 255, 255, 0.45) 50%,
      transparent 65%
    );
    transform: translateX(-100%);
    transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
  }

  .btn-primary:hover::after {
    transform: translateX(100%);
  }

  .btn-primary:hover {
    background: #f3d8aa;
    transform: translateY(-2px);
    box-shadow: 0 22px 60px rgba(240, 207, 152, 0.38);
  }

  /* Stato header dopo lo scroll oltre ~80% della hero */
  .site-header--solid {
    background: rgba(255, 255, 255, 0.9);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    color: #111111;
  }

  .btn-small {
    padding-inline: 1rem;
    padding-block: 0.45rem;
    font-size: 0.8rem;
  }

  /* Sections */

  .section {
    padding: 52px 0;
    background: #050404;
  }

  .section-alt {
    background: #111010;
  }

  .section-header {
    max-width: 640px;
    margin: 0 auto 32px;
    text-align: center;
  }

  .section-header h2 {
    font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.8rem;
    margin: 0 0 12px;
  }

  .section-header p {
    margin: 0;
    color: #a79a92;
  }

  .section-cta {
    margin-top: 32px;
    text-align: center;
  }

  /* Hero */

  .hero {
    position: relative;
    min-height: 100vh;
    height: 100vh;
    color: #ffffff;
    overflow: hidden;
  }

  .hero-media-full {
    position: relative;
    width: 100%;
    height: 100%;
    transform: scale(1.03);
    transform-origin: center;
    animation: hero-zoom 20s ease-in-out infinite alternate;
  }

  .hero-media-full img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }

  #hero-contatti .hero-media-full img {
    object-position: center 30%;
  }

  .hero-image-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05);
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.78));
    mix-blend-mode: multiply;
    animation: overlay-breathe 28s linear infinite alternate;
  }

  #hero-metodo .hero-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.92));
  }

  .hero-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 44vh 24px 0;
    text-align: center;
    opacity: 1; /* visibile di base */
    transform: translateY(0);
    animation: hero-content-in 900ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: 200ms;
  }

  .hero-center h1 {
    font-family: "Raleway", "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(2.4rem, 4vw, 3.1rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 12px;
  }

  .hero-center-subtitle {
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0;
  }

  @keyframes hero-zoom {
    0% {
      transform: scale(1.03) translateY(0);
    }
    100% {
      transform: scale(1.08) translateY(-10px);
    }
  }

  @keyframes overlay-breathe {
    0% {
      opacity: 0.6;
    }
    100% {
      opacity: 0.9;
    }
  }

  @keyframes hero-content-in {
    0% {
      opacity: 0;
      transform: translateY(32px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Griglie & card base (pulite) */

  .grid {
    display: grid;
    gap: 20px;
  }

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

  .card {
    background: #151313;
    border-radius: 18px;
    padding: 22px 22px 24px;
    border: 1px solid #3a312c;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    transform: translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    transition:
      transform 260ms cubic-bezier(0.19, 1, 0.22, 1),
      box-shadow 260ms cubic-bezier(0.19, 1, 0.22, 1),
      border-color 220ms ease-out,
      background-color 200ms ease-out;
  }

  .card:hover {
    transform: translateY(-6px) translateZ(12px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.75);
    border-color: rgba(210, 190, 150, 0.9);
    background: #191515;
  }

  .card h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: #f8f2ee;
  }

  .card p {
    margin: 0;
    color: #b2a89f;
  }

  /* ── TEASER SECTIONS ─────────────────────────────────────────── */

  .teaser-section {
    padding: 110px 0;
    background: #050404;
    position: relative;
    overflow: hidden;
  }

  .teaser-section--alt {
    background: #0b0909;
  }

  .teaser-section--cta {
    background: #0b0909;
    text-align: center;
    padding: 120px 0;
  }

  /* Layout a due colonne */
  .teaser-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
  }

  /*
   * Ordine naturale (DOM): [visual] [testo]  → numero SX, testo DX  (01, 03, 05)
   * Con --reverse:         [testo] [visual]  → testo SX, numero DX  (02, 04, 06)
   */
  .teaser-layout--reverse .teaser-text {
    order: -1;
  }

  .teaser-layout--reverse .teaser-visual {
    order: 1;
  }

  /* ── Colonna testo ── */
  .teaser-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 64px;
  }

  /* Su --reverse il testo è a SX: padding più verso il centro (destra) */
  .teaser-layout--reverse .teaser-text {
    padding: 0 64px 0 0;
  }

  /* Su layout normale il testo è a DX: padding più verso il centro (sinistra) */
  .teaser-layout:not(.teaser-layout--reverse) .teaser-text {
    padding: 0 0 0 64px;
  }

  .teaser-label {
    font-size: 0.72rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #f0cf98;
    font-weight: 600;
    font-family: "DM Sans", sans-serif;
  }

  .teaser-text h2 {
    font-family: "Raleway", sans-serif;
    font-size: clamp(1.9rem, 2.6vw, 2.7rem);
    font-weight: 700;
    line-height: 1.18;
    margin: 0;
    color: #f4ece6;
    letter-spacing: -0.01em;
  }

  .teaser-text p {
    font-size: 1rem;
    color: #8a7f79;
    margin: 0;
    line-height: 1.8;
  }

  .teaser-text .btn {
    align-self: flex-start;
    margin-top: 4px;
  }

  /* ── Colonna visual (numero decorativo) ── */
  .teaser-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 20px;
    padding: 0 64px;
  }

  /* Su layout normale il visual è a SX: padding verso il centro (destra) */
  .teaser-layout:not(.teaser-layout--reverse) .teaser-visual {
    padding: 0 64px 0 0;
  }

  /* Su --reverse il visual è a DX: padding verso il centro (sinistra) */
  .teaser-layout--reverse .teaser-visual {
    padding: 0 0 0 64px;
  }

  .teaser-number {
    font-family: "Raleway", sans-serif;
    font-size: clamp(7rem, 14vw, 12rem);
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(240, 207, 152, 0.015);
    user-select: none;
    letter-spacing: -0.04em;
    transition:
      -webkit-text-stroke 700ms cubic-bezier(0.19, 1, 0.22, 1),
      text-shadow 700ms cubic-bezier(0.19, 1, 0.22, 1);
    text-shadow: none;
  }

  /* Stato illuminato: arriva nel viewport */
  .teaser-section.is-visible .teaser-number {
    -webkit-text-stroke: 1px rgba(240, 207, 152, 0.85);
    text-shadow:
      0 0 40px rgba(240, 207, 152, 0.25),
      0 0 80px rgba(240, 207, 152, 0.12);
  }

  /* (removed) previously forced illuminated style for #recensioni; now handled by .teaser-section.is-visible */

  /* Hover aggiuntivo sopra allo stato illuminato */
  .teaser-section.is-visible:hover .teaser-number {
    -webkit-text-stroke: 1px rgba(240, 207, 152, 1);
    text-shadow:
      0 0 40px rgba(240, 207, 152, 0.45),
      0 0 100px rgba(240, 207, 152, 0.2);
  }

  .teaser-accent-line {
    width: 52px;
    height: 1.5px;
    background: linear-gradient(90deg, #f0cf98 0%, transparent 100%);
    border-radius: 2px;
    align-self: center;
  }

  /* Colori del testo della sezione Recensioni allineati alla sezione 04 (team)
     titolo chiaro, paragrafo tono caldo */
  #recensioni .teaser-text h2 {
    color: #f4ece6; /* stesso del .teaser-text h2 */
  }
  #recensioni .teaser-text p {
    color: #8a7f79; /* stesso del .teaser-text p */
  }

  /* ── CTA block (sezione contatti) ── */
  .teaser-cta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    max-width: 620px;
    margin: 0 auto;
  }

  .teaser-cta-block h2 {
    font-family: "Raleway", sans-serif;
    font-size: clamp(2.1rem, 3.4vw, 3.1rem);
    font-weight: 700;
    color: #f4ece6;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .teaser-cta-block p {
    color: #8a7f79;
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.75;
    max-width: 480px;
  }

  .teaser-cta-block .teaser-label {
    margin-bottom: 0;
  }

  /* ── Divisore sezioni ── */
  .section-divider {
    width: 320px;
    height: 1px;
    margin: 0 auto;
    background: linear-gradient(90deg, transparent 0%, #f0cf98 50%, transparent 100%);
    opacity: 0.55;
  }

  /* ── Bottone grande ── */
  .btn-large {
    padding: 0.95rem 2.4rem;
    font-size: 1rem;
    letter-spacing: 0.04em;
    margin-top: 8px;
  }

  /* ── Form contatti ── */
  .contact-form {
    width: 100%;
    max-width: 720px;
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .form-field--full {
    grid-column: 1 / -1;
  }

  .form-field label {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #a79a92;
    font-weight: 600;
  }

  .form-optional {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #5a5150;
    font-size: 0.72rem;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(240, 207, 152, 0.14);
    border-radius: 10px;
    color: #f4ece6;
    font-family: "DM Sans", sans-serif;
    font-size: 0.95rem;
    padding: 0.85rem 1.1rem;
    outline: none;
    transition:
      border-color 220ms ease,
      background 220ms ease,
      box-shadow 220ms ease;
    -webkit-appearance: none;
    appearance: none;
  }

  .form-field input::placeholder,
  .form-field textarea::placeholder {
    color: #4a4340;
  }

  .form-field select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a79a92' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    padding-right: 2.5rem;
  }

  .form-field select option {
    background: #151313;
    color: #f4ece6;
  }

  .form-field textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.6;
  }

  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus {
    border-color: rgba(240, 207, 152, 0.55);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(240, 207, 152, 0.08);
  }

  .form-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
  }

  .form-privacy {
    font-size: 0.78rem;
    color: #4a4340;
    margin: 0;
    line-height: 1.6;
    text-align: center;
  }

  .form-privacy a {
    color: #7a706a;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 200ms ease;
  }

  .form-privacy a:hover {
    color: #f0cf98;
  }

  /* Form responsive mobile */
  @media (max-width: 600px) {
    .form-row {
      grid-template-columns: 1fr;
    }

    .form-footer {
      flex-direction: column;
      align-items: stretch;
    }

    .form-footer .btn {
      text-align: center;
      justify-content: center;
    }
  }

  /* ── Responsive mobile ── */
  @media (max-width: 767px) {
    .teaser-section {
      padding: 72px 0;
    }

    .teaser-section--cta {
      padding: 80px 0;
    }

    .teaser-layout {
      grid-template-columns: 1fr;
      gap: 36px;
    }

    .teaser-layout--reverse .teaser-visual,
    .teaser-layout--reverse .teaser-text {
      order: unset;
    }

    .teaser-visual {
      display: none;
    }

    .teaser-text,
    .teaser-layout:not(.teaser-layout--reverse) .teaser-text,
    .teaser-layout--reverse .teaser-text {
      padding: 0;
    }
  }

/* ── FOOTER ──────────────────────────────────────────────────── */

.site-footer {
  background: #030202;
  color: #f4ece6;
  padding: 72px 0 0;
  border-top: 1px solid rgba(240, 207, 152, 0.08);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Riga principale: 3 colonne */
.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}

/* Brand */
.footer-logo {
  font-family: "Raleway", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f4ece6;
  display: block;
  margin-bottom: 16px;
}

.footer-tagline {
  font-size: 0.9rem;
  color: #6b6159;
  line-height: 1.75;
  margin: 0;
  max-width: 260px;
}

/* Colonne nav e contatti */
.footer-nav-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f0cf98;
  font-weight: 600;
  margin-bottom: 20px;
}

.footer-nav ul,
.footer-contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav a,
.footer-contact a,
.footer-contact .footer-hours {
  font-size: 0.88rem;
  color: #7a706a;
  text-decoration: none;
  transition: color 200ms ease;
}

.footer-nav a:hover,
.footer-contact a:hover {
  color: #f4ece6;
}

.footer-hours {
  font-size: 0.88rem;
  color: #7a706a;
}

/* Divider */
.footer-divider {
  height: 1px;
  background: rgba(240, 207, 152, 0.08);
}

/* Riga bottom */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  gap: 16px;
}

.footer-copy {
  font-size: 0.78rem;
  color: #4a433f;
  margin: 0;
}

/* Partita IVA: stesso stile del testo footer */
.footer-vat {
  font-size: 0.78rem;
  color: #4a433f;
  margin: 0;
}

.footer-credit {
  font-size: 0.78rem;
  color: #4a433f;
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 0.78rem;
  color: #4a433f;
  text-decoration: none;
  transition: color 200ms ease;
}

.footer-legal a:hover {
  color: #a79a92;
}

/* Footer responsive */
@media (max-width: 767px) {
  .footer-main {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 40px;
  }

  .footer-tagline {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CONTATTI PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout principale: form + sidebar ── */
.contacts-body {
  padding: 100px 0 120px;
  background: #050404;
}

.contacts-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: start;
}

/* ── Sezione form ── */
.contacts-form-section h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  font-weight: 700;
  color: #f4ece6;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.contacts-form-section .contacts-form-sub {
  font-size: 0.95rem;
  color: #5a5150;
  margin: 0 0 40px;
  line-height: 1.6;
}

.contacts-form-section .contact-form {
  max-width: 100%;
  margin-top: 0;
}

/* Spinge il blocco form più in basso rispetto alla sidebar */
.contacts-form-section {
  padding-top: 48px;
}

/* ── Sidebar info ── */
.contacts-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 100px;
}

.contacts-sidebar-block {
  padding: 28px 0;
  border-bottom: 1px solid rgba(240,207,152,0.07);
}

.contacts-sidebar-block:first-child {
  padding-top: 0;
}

.contacts-sidebar-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.contacts-sidebar-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f0cf98;
  font-weight: 600;
  margin-bottom: 14px;
}

.contacts-sidebar-block p {
  font-size: 0.92rem;
  color: #7a706a;
  line-height: 1.7;
  margin: 0 0 8px;
}

.contacts-sidebar-block a {
  font-size: 0.92rem;
  color: #a79a92;
  text-decoration: none;
  transition: color 200ms ease;
  display: inline-block;
}

.contacts-sidebar-block a:hover {
  color: #f4ece6;
}

.contacts-map-link {
  font-size: 0.78rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f0cf98 !important;
  margin-top: 10px;
}

/* Orari */
.contacts-hours {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contacts-hours li {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  color: #6b6159;
}

.contacts-hours li span:last-child {
  color: #a79a92;
}

.contacts-hours li.is-today span {
  color: #f0cf98;
}

/* Social */
.contacts-social-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contacts-social-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #0e0c0c;
  border: 1px solid rgba(240,207,152,0.07);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 250ms ease, background 250ms ease;
  color: #a79a92 !important;
  font-size: 0.88rem !important;
}

.contacts-social-link:hover {
  border-color: rgba(240,207,152,0.22);
  background: #131111;
  color: #f4ece6 !important;
}

.contacts-social-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contacts-social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.contacts-social-icon--ig {
  background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
  color: #fff;
}

.contacts-social-icon--fb {
  background: #1877f2;
  color: #fff;
}

.contacts-social-icon--wa {
  background: #25d366;
  color: #fff;
}

.contacts-social-name {
  font-weight: 600;
  color: inherit;
}

.contacts-social-handle {
  font-size: 0.75rem;
  color: #4a4340;
  display: block;
  margin-top: 1px;
}

/* ── Mappa placeholder ── */
.contacts-map-section {
  background: #0b0909;
  border-top: 1px solid rgba(240,207,152,0.06);
  overflow: hidden;
}

.contacts-map-section iframe {
  display: block;
  width: 100%;
  height: 480px;
  border: 0;
  filter: grayscale(30%) contrast(1.05) brightness(0.9);
}

.contacts-map-cta-bar {
  background: #0b0909;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(240,207,152,0.06);
}

/* ── Responsive contatti ── */
@media (max-width: 960px) {
  .contacts-layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .contacts-sidebar {
    position: static;
  }
}

@media (max-width: 767px) {
  .contacts-body {
    padding: 72px 0 80px;
  }

  .contacts-map-wrap {
    height: 260px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RISULTATI PAGE
   ═══════════════════════════════════════════════════════════════ */

/* ── Strip numeri (sfondo champagne tenue) ── */
.results-numbers {
  background: #0e0c0c;
  border-top: 1px solid rgba(240,207,152,0.08);
  border-bottom: 1px solid rgba(240,207,152,0.08);
  padding: 64px 0;
}

.results-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.results-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px;
  position: relative;
  text-align: center;
}

.results-stat + .results-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(240,207,152,0.1);
}

.results-stat-number {
  font-family: "Raleway", sans-serif;
  font-size: clamp(2.8rem, 4.5vw, 4rem);
  font-weight: 800;
  color: #f0cf98;
  line-height: 1;
  letter-spacing: -0.03em;
}

.results-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a5150;
  max-width: 140px;
  line-height: 1.5;
}

/* ── Sezione intro onestà ── */
.results-honesty {
  padding: 112px 0;
  background: #050404;
}

.results-honesty-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.results-honesty-text .teaser-accent-line {
  margin-bottom: 28px;
}

.results-honesty-text h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 700;
  color: #f4ece6;
  margin: 0 0 28px;
  line-height: 1.2;
}

.results-honesty-text p {
  font-size: 1rem;
  color: #7a706a;
  line-height: 1.85;
  margin: 0 0 18px;
}

.results-honesty-text p:last-child { margin-bottom: 0; }

.results-commitments {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.results-commitment {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 32px;
  background: #0e0c0c;
  border: 1px solid rgba(240,207,152,0.07);
  border-radius: 14px;
  transition: border-color 280ms ease, background 280ms ease;
}

.results-commitment:hover {
  border-color: rgba(240,207,152,0.2);
  background: #121010;
}

.results-commitment-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  margin-top: 2px;
  color: #f0cf98;
}

.results-commitment-body h4 {
  font-family: "Raleway", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #f4ece6;
  margin: 0 0 6px;
}

.results-commitment-body p {
  font-size: 0.88rem;
  color: #6b6159;
  line-height: 1.7;
  margin: 0;
}

/* ── Sezione prima/dopo ── */
.results-cases-section {
  padding: 112px 0;
  background: #0b0909;
}

.results-cases-header {
  text-align: center;
  margin-bottom: 72px;
}

.results-cases-header h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 700;
  color: #f4ece6;
  margin: 0 0 14px;
}

.results-cases-header p {
  color: #5a5150;
  font-size: 0.95rem;
  max-width: 440px;
  margin: 0 auto;
  line-height: 1.7;
}

.results-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.results-case {
  background: #0f0d0d;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  cursor: pointer;
}

.results-case:first-child { border-radius: 16px 0 0 0; }
.results-case:nth-child(2) { border-radius: 0 16px 0 0; }
.results-case:nth-child(3) { border-radius: 0 0 0 16px; }
.results-case:last-child { border-radius: 0 0 16px 0; }

/* Placeholder immagine prima/dopo */
.results-case-visual {
  aspect-ratio: 4/3;
  background: #151313;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}

.results-case-before,
.results-case-after {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.results-case-before {
  background: linear-gradient(135deg, #1a1515 0%, #111010 100%);
}

.results-case-after {
  background: linear-gradient(135deg, #1c1810 0%, #181410 100%);
  border-left: 1px solid rgba(240,207,152,0.12);
}

.results-case-badge {
  position: absolute;
  top: 14px;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
}

.results-case-before .results-case-badge {
  left: 14px;
  background: rgba(0,0,0,0.55);
  color: #a79a92;
  border: 1px solid rgba(255,255,255,0.1);
}

.results-case-after .results-case-badge {
  right: 14px;
  background: rgba(240,207,152,0.15);
  color: #f0cf98;
  border: 1px solid rgba(240,207,152,0.25);
}

/* Icona placeholder */
.results-case-before .results-ph-icon,
.results-case-after .results-ph-icon {
  font-size: 2rem;
  opacity: 0.12;
}

/* Linea divisoria centrale */
.results-case-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(240,207,152,0.2);
  z-index: 2;
}

/* Info sotto */
.results-case-info {
  padding: 28px 32px 32px;
  border-top: 1px solid rgba(240,207,152,0.06);
}

.results-case-category {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f0cf98;
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}

.results-case-info h3 {
  font-family: "Raleway", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #f4ece6;
  margin: 0 0 10px;
}

.results-case-info p {
  font-size: 0.88rem;
  color: #5a5150;
  line-height: 1.7;
  margin: 0;
}

.results-case-meta {
  display: flex;
  gap: 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(240,207,152,0.06);
}

.results-case-meta-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.results-case-meta-value {
  font-family: "Raleway", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #f0cf98;
}

.results-case-meta-key {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3a3330;
}

.results-disclaimer {
  text-align: center;
  margin-top: 40px;
  font-size: 0.78rem;
  color: #3a3330;
  line-height: 1.6;
}

/* ── Testimonianze magazine ── */
.results-testimonials {
  padding: 112px 0;
  background: #050404;
}

.results-testimonials-header {
  margin-bottom: 64px;
}

.results-testimonials-header h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 700;
  color: #f4ece6;
  margin: 0 0 14px;
}

.results-testimonials-header p {
  color: #5a5150;
  font-size: 0.95rem;
  max-width: 400px;
  line-height: 1.7;
  margin: 0;
}

/* Layout asimmetrico: grande a SX, 2 piccole a DX */
.results-testimonials-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}

.results-testimonials-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.results-tcard {
  background: #0e0c0c;
  border: 1px solid rgba(240,207,152,0.07);
  border-radius: 18px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: border-color 280ms ease;
  position: relative;
  overflow: hidden;
}

.results-tcard::before {
  content: "\201C";
  position: absolute;
  top: -12px;
  right: 24px;
  font-family: "Raleway", sans-serif;
  font-size: 8rem;
  font-weight: 900;
  color: rgba(240,207,152,0.04);
  line-height: 1;
  pointer-events: none;
}

.results-tcard:hover {
  border-color: rgba(240,207,152,0.16);
}

.results-tcard--large {
  padding: 52px 48px;
}

.results-tcard--large .results-tcard-quote {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
}

.results-tcard-stars {
  display: flex;
  gap: 4px;
  color: #f0cf98;
  font-size: 0.85rem;
}

.results-tcard-quote {
  font-family: "Raleway", sans-serif;
  font-size: 1rem;
  font-style: italic;
  color: #d4c9c0;
  line-height: 1.65;
  margin: 0;
}

.results-tcard-footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(240,207,152,0.06);
  margin-top: 4px;
}

.results-tcard-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2a2320, #1a1815);
  border: 1px solid rgba(240,207,152,0.15);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.results-tcard-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: #f4ece6;
  display: block;
}

.results-tcard-detail {
  font-size: 0.75rem;
  color: #4a4340;
  display: block;
  margin-top: 2px;
}

/* ── Responsive risultati ── */
@media (max-width: 900px) {
  .results-numbers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .results-stat:nth-child(3)::before {
    display: none;
  }

  .results-honesty-layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .results-testimonials-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .results-honesty,
  .results-cases-section,
  .results-testimonials {
    padding: 72px 0;
  }

  .results-cases-grid {
    grid-template-columns: 1fr;
  }

  .results-case:first-child { border-radius: 16px 16px 0 0; }
  .results-case:nth-child(2) { border-radius: 0; }
  .results-case:nth-child(3) { border-radius: 0; }
  .results-case:last-child { border-radius: 0 0 16px 16px; }

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

  .results-tcard--large {
    padding: 36px 28px;
  }
}

/* ── Hero metodo centrato ── */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  max-width: 720px;
}

.hero-title {
  font-family: "Raleway", sans-serif;
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  color: #ffffff;
}

.hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  margin: 0;
  max-width: 520px;
  text-align: center;
}

/* ── Hero centrato verticalmente e orizzontalmente ── */
.hero-bottom-left {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
}

.hero-bottom-left .container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Sezione intro bipartita ── */
.method-intro {
  padding: 112px 0 96px;
  background: #050404;
}

.method-intro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.method-intro-text h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(2rem, 2.8vw, 2.8rem);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 28px;
  color: #f4ece6;
  letter-spacing: -0.01em;
}

.method-intro-text p {
  font-size: 1rem;
  color: #8a7f79;
  line-height: 1.85;
  margin: 0 0 20px;
}

.method-intro-text p:last-child {
  margin-bottom: 0;
}

.method-intro-aside {
  padding-top: 8px;
}

.method-quote {
  border-left: 2px solid rgba(240, 207, 152, 0.4);
  padding-left: 32px;
  margin: 0 0 40px;
}

.method-quote blockquote {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 600;
  font-style: italic;
  color: #f4ece6;
  line-height: 1.4;
  margin: 0 0 16px;
}

.method-quote cite {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f0cf98;
  font-style: normal;
}

.method-stat-row {
  display: flex;
  gap: 40px;
  margin-top: 40px;
}

.method-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.method-stat strong {
  font-family: "Raleway", sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: #f0cf98;
  line-height: 1;
}

.method-stat span {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6159;
}

/* ── Sezione timeline 5 step ── */
.method-steps-section {
  padding: 112px 0;
  background: #0b0909;
}

.method-steps-header {
  text-align: center;
  margin-bottom: 88px;
}

.method-steps-header h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 700;
  color: #f4ece6;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.method-steps-header p {
  font-size: 1rem;
  color: #6b6159;
  margin: 0;
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
}

/* Griglia step: alternanza sx/dx */
.method-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Linea verticale di connessione */
.method-steps::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(240, 207, 152, 0.15) 8%,
    rgba(240, 207, 152, 0.15) 92%,
    transparent 100%
  );
}

.method-step {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  align-items: center;
  min-height: 200px;
  position: relative;
}

/* Numero centrale */
.method-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 2;
  position: relative;
}

.method-step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(240, 207, 152, 0.3);
  background: #0b0909;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Raleway", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #f0cf98;
  transition: border-color 500ms ease, box-shadow 500ms ease;
}

.method-step.is-active .method-step-num {
  border-color: rgba(240, 207, 152, 0.8);
  box-shadow:
    0 0 0 6px rgba(240, 207, 152, 0.06),
    0 0 28px rgba(240, 207, 152, 0.18);
}

/* Step pari: card a destra, spazio a sinistra */
.method-step-content {
  padding: 40px 56px;
}

.method-step:nth-child(odd) .method-step-content {
  padding-left: 0;
  padding-right: 56px;
  text-align: right;
}

.method-step:nth-child(odd) .step-tag {
  justify-content: flex-end;
}

.method-step:nth-child(even) .method-step-content {
  grid-column: 3;
  padding-left: 56px;
  padding-right: 0;
}

/* Step dispari: content nella col 1, col 3 vuota */
.method-step:nth-child(odd) .method-step-content {
  grid-column: 1;
}
.method-step:nth-child(odd) .method-step-node {
  grid-column: 2;
}

/* Step pari: col 1 vuota, node in col 2, content in col 3 */
.method-step:nth-child(even) .method-step-node {
  grid-column: 2;
}
.method-step:nth-child(even) .method-step-empty {
  grid-column: 1;
}

.method-step-empty {
  /* spazio vuoto lato opposto allo step content nella timeline */
  pointer-events: none;
}

.step-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.step-tag-line {
  width: 28px;
  height: 1px;
  background: rgba(240, 207, 152, 0.4);
  flex-shrink: 0;
}

.step-tag-label {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #f0cf98;
  font-weight: 600;
}

/* Su step dispari (testo a dx visivamente) inverti ordine tag */
.method-step:nth-child(odd) .step-tag {
  flex-direction: row-reverse;
}

.method-step-content h3 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.4rem, 1.8vw, 1.9rem);
  font-weight: 700;
  color: #f4ece6;
  margin: 0 0 16px;
  line-height: 1.2;
}

.method-step-content p {
  font-size: 0.97rem;
  color: #7a706a;
  line-height: 1.85;
  margin: 0;
}

.method-step-detail {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Su step dispari allinea detail a destra */
.method-step:nth-child(odd) .method-step-detail {
  align-items: flex-end;
}

.step-bullet {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: #6b6159;
}

.step-bullet::before {
  content: "✦";
  font-size: 0.55rem;
  color: rgba(240, 207, 152, 0.5);
  flex-shrink: 0;
}

/* Su step dispari inverti ordine bullet */
.method-step:nth-child(odd) .step-bullet {
  flex-direction: row-reverse;
}

/* ── Pull-quote section ── */
.method-pullquote-section {
  padding: 110px 0;
  background: #050404;
  overflow: hidden;
  position: relative;
}

.method-pullquote-section::before {
  content: "\"";
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Raleway", sans-serif;
  font-size: 28rem;
  font-weight: 900;
  color: rgba(240, 207, 152, 0.03);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.method-pullquote {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.method-pullquote blockquote {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 600;
  font-style: italic;
  color: #f4ece6;
  line-height: 1.35;
  margin: 0;
}

.method-pullquote blockquote em {
  font-style: normal;
  color: #f0cf98;
}

.method-pullquote cite {
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #5a5150;
  font-style: normal;
}

/* ── Sezione 4 pilastri ── */
.method-pillars-section {
  padding: 112px 0;
  background: #0b0909;
}

.method-pillars-header {
  margin-bottom: 72px;
}

.method-pillars-header h2 {
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  font-weight: 700;
  color: #f4ece6;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.method-pillars-header p {
  font-size: 1rem;
  color: #6b6159;
  max-width: 520px;
  line-height: 1.7;
  margin: 0;
}

.method-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  border: 1px solid rgba(240, 207, 152, 0.06);
  border-radius: 20px;
  overflow: hidden;
}

.method-pillar {
  background: #0f0d0d;
  padding: 52px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: background 250ms ease;
  position: relative;
  overflow: hidden;
}

.method-pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 120% 120%, rgba(240, 207, 152, 0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 350ms ease;
}

.method-pillar:hover::after {
  opacity: 1;
}

.method-pillar:hover {
  background: #131111;
}

.pillar-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.pillar-title {
  font-family: "Raleway", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #f4ece6;
  margin: 0;
}

.pillar-text {
  font-size: 0.95rem;
  color: #6b6159;
  line-height: 1.8;
  margin: 0;
}

.pillar-accent {
  width: 36px;
  height: 1.5px;
  background: linear-gradient(90deg, #f0cf98 0%, transparent 100%);
  margin-top: 4px;
}

/* ── Responsive metodo ── */
@media (max-width: 900px) {
  .method-intro-layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .method-stat-row {
    gap: 28px;
  }
}

@media (max-width: 767px) {
  .method-intro,
  .method-steps-section,
  .method-pullquote-section,
  .method-pillars-section {
    padding: 72px 0;
  }

  .method-steps-header {
    margin-bottom: 52px;
  }

  .method-steps::before {
    left: 20px;
    transform: none;
  }

  /* Ogni step diventa una colonna flex verticale */
  .method-step,
  .method-step:nth-child(odd),
  .method-step:nth-child(even) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding-bottom: 48px;
    gap: 0;
  }

  /* Nodo: cerchio + linea in riga orizzontale */
  .method-step-node,
  .method-step:nth-child(odd) .method-step-node,
  .method-step:nth-child(even) .method-step-node {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    margin-bottom: 20px;
    grid-column: unset;
    grid-row: unset;
    order: 1;
  }

  .method-step-num {
    width: 40px;
    height: 40px;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  /* Contenuto sotto il nodo */
  .method-step-content,
  .method-step:nth-child(odd) .method-step-content,
  .method-step:nth-child(even) .method-step-content {
    grid-column: unset;
    grid-row: unset;
    order: 2;
    padding: 0 0 0 54px;
    text-align: left;
    width: 100%;
  }

  /* Tag FASE UNO allineato a sinistra */
  .method-step:nth-child(odd) .step-tag,
  .method-step:nth-child(even) .step-tag {
    flex-direction: row;
    justify-content: flex-start;
  }

  /* Bullet allineati a sinistra */
  .method-step:nth-child(odd) .step-bullet,
  .method-step:nth-child(even) .step-bullet {
    flex-direction: row;
  }

  .method-step:nth-child(odd) .method-step-detail,
  .method-step:nth-child(even) .method-step-detail {
    align-items: flex-start;
  }

  /* Spazio vuoto nascosto */
  .method-step-empty {
    display: none;
  }

  .method-pillars-grid {
    grid-template-columns: 1fr;
  }

  .method-pillar {
    padding: 40px 28px;
  }

  .hero-bottom-left {
    padding-bottom: 60px;
  }
}

/* ═══════════════════════════════════════
   TRATTAMENTI PAGE
═══════════════════════════════════════ */

.treatments-body {
  background: #050404;
  padding: 100px 0 140px;
}

/* ── Intro ── */
.treatments-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  padding: 80px 0 100px;
  border-bottom: 1px solid rgba(240,207,152,0.08);
}

.treatments-intro-lead {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 300;
  line-height: 1.45;
  color: #f4ece6;
  letter-spacing: -0.01em;
}

.treatments-intro-lead em {
  font-style: italic;
  color: #f0cf98;
}

.treatments-intro-body {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.treatments-intro-body p {
  font-size: 0.97rem;
  line-height: 1.78;
  color: #7a706a;
}

/* ── Sezione categoria ── */
.treatments-category {
  padding: 80px 0 60px;
}

.treatments-category + .treatments-category {
  border-top: 1px solid rgba(240,207,152,0.06);
}

.treatments-category-header {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 52px;
}

.treatments-category-num {
  font-family: 'Raleway', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #3a3330;
  flex-shrink: 0;
}

.treatments-category-header h2 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 300;
  color: #f4ece6;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ── Griglia card ── */
.treatments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(240,207,152,0.04);
  border: 1px solid rgba(240,207,152,0.06);
}

.tcard {
  background: #0b0909;
  padding: 36px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: background 300ms ease;
}

.tcard:hover {
  background: #0f0d0d;
}

.tcard-tag {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f0cf98;
  opacity: 0.7;
  font-weight: 500;
}

.tcard h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #f4ece6;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.3;
}

.tcard p {
  font-size: 0.88rem;
  line-height: 1.72;
  color: #5a5150;
  flex: 1;
}

.tcard-cta {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f0cf98;
  text-decoration: none;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.7;
  transition: opacity 200ms ease, gap 200ms ease;
}

.tcard-cta:hover {
  opacity: 1;
  gap: 10px;
}

/* ── Medicina estetica ── */
.treatments-medicine {
  margin-top: 80px;
  border-top: 1px solid rgba(240,207,152,0.08);
  padding-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.treatments-medicine-text h2 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 300;
  color: #f4ece6;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  line-height: 1.2;
}

.treatments-medicine-text p {
  font-size: 0.96rem;
  line-height: 1.78;
  color: #7a706a;
  margin-bottom: 16px;
}

.treatments-medicine-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(240,207,152,0.08);
}

.treatments-medicine-list li {
  padding: 18px 24px;
  font-size: 0.93rem;
  color: #f4ece6;
  border-bottom: 1px solid rgba(240,207,152,0.06);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: background 200ms ease;
}

.treatments-medicine-list li:last-child {
  border-bottom: none;
}

.treatments-medicine-list li:hover {
  background: rgba(240,207,152,0.03);
}

.treatments-medicine-list li::before {
  content: "◦";
  color: #f0cf98;
  opacity: 0.5;
  flex-shrink: 0;
}

/* ── CTA strip ── */
.treatments-cta {
  margin-top: 100px;
  padding: 80px 0;
  border-top: 1px solid rgba(240,207,152,0.08);
  text-align: center;
}

.treatments-cta .teaser-label {
  display: block;
  margin-bottom: 20px;
}

.treatments-cta h2 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: #f4ece6;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.treatments-cta p {
  font-size: 1rem;
  color: #7a706a;
  margin-bottom: 36px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .treatments-intro {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 60px 0 72px;
  }

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

  .treatments-medicine {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

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

/* ═══════════════════════════════════════
   TEAM PAGE
═══════════════════════════════════════ */

.team-body {
  background: #050404;
  padding: 100px 0 140px;
}

/* ── Intro ── */
.team-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  padding: 80px 0 100px;
  border-bottom: 1px solid rgba(240,207,152,0.08);
}

.team-intro-lead {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 300;
  line-height: 1.42;
  color: #f4ece6;
  letter-spacing: -0.01em;
}

.team-intro-lead em {
  font-style: italic;
  color: #f0cf98;
}

.team-intro-body {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.team-intro-body p {
  font-size: 0.97rem;
  line-height: 1.78;
  color: #7a706a;
}

/* ── Profili ── */
.team-profiles {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 80px 0 60px;
}

.team-profile {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 72px;
  align-items: start;
  padding: 64px 0;
  border-bottom: 1px solid rgba(240,207,152,0.06);
}

.team-profile:last-child {
  border-bottom: none;
}

.team-profile--reverse {
  grid-template-columns: 1fr 340px;
}

.team-profile--reverse .team-profile-visual {
  order: 2;
}

.team-profile--reverse .team-profile-text {
  order: 1;
}

.team-profile-visual {
  position: relative;
}

.team-profile-photo {
  width: 100%;
  aspect-ratio: 3/4;
  background: #0f0d0d;
  border: 1px solid rgba(240,207,152,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.team-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-profile-photo-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, #0f0d0d 0%, #150e0e 100%);
  border: 1px solid rgba(240,207,152,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.team-profile-photo-placeholder::after {
  content: "Foto in arrivo";
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3a3330;
}

/* If the placeholder contains an actual image, don't show the "Foto in arrivo" badge */
.team-profile-photo-placeholder:has(img)::after {
  display: none;
}

/* Ensure images inserted into the placeholder fill the box without distortion */
.team-profile-photo-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep the profile number above the image */
.team-profile-photo-placeholder .team-profile-num {
  z-index: 2;
}

/* Floating WhatsApp button (bottom-right) */
.whatsapp-fab {
  position: fixed;
  right: 20px;
  /* raised to sit above cookie/banner elements */
  bottom: 114px;
  width: 56px;
  height: 56px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  /* ensure it's above embedded widgets/banners */
  z-index: 2147483647;
  transition: transform 160ms ease, opacity 160ms ease;
  opacity: 0.98;
}
.whatsapp-fab:hover { transform: translateY(-4px); }
.whatsapp-fab .wh-icon { font-size: 22px; }

@media (max-width: 480px) {
  /* slightly less offset on small screens but still above banners */
  .whatsapp-fab { right: 14px; bottom: 104px; width: 50px; height: 50px; }
  .whatsapp-fab .wh-icon { font-size: 20px; }
}

.team-profile-num {
  position: absolute;
  top: 12px;
  right: 16px;
  left: auto;
  transform: none;
  font-family: 'Raleway', sans-serif;
  font-size: 5rem;
  font-weight: 700;
  color: rgba(255,255,255,0.12);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  text-shadow: none;
}

.team-profile-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 12px;
}

.team-profile-role {
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #f0cf98;
  opacity: 0.7;
}

.team-profile-name {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 300;
  color: #f4ece6;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}

.team-profile-text p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #7a706a;
}

.team-profile-quote {
  margin-top: 8px;
  padding-left: 20px;
  border-left: 2px solid rgba(240,207,152,0.2);
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  font-style: italic;
  color: #c8b89a;
  line-height: 1.6;
}

/* ── Sinergia ── */
.team-synergy {
  padding: 80px 0;
  border-top: 1px solid rgba(240,207,152,0.08);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.team-synergy-text h2 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 300;
  color: #f4ece6;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  line-height: 1.2;
}

.team-synergy-text p {
  font-size: 0.96rem;
  line-height: 1.78;
  color: #7a706a;
  margin-bottom: 16px;
}

.team-synergy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(240,207,152,0.08);
}

.team-synergy-list li {
  padding: 18px 24px;
  font-size: 0.93rem;
  color: #f4ece6;
  border-bottom: 1px solid rgba(240,207,152,0.06);
  display: flex;
  align-items: center;
  gap: 14px;
}

.team-synergy-list li:last-child { border-bottom: none; }

.team-synergy-list li::before {
  content: "◦";
  color: #f0cf98;
  opacity: 0.5;
  flex-shrink: 0;
}

/* ── CTA ── */
.team-cta {
  padding: 80px 0;
  border-top: 1px solid rgba(240,207,152,0.08);
  text-align: center;
}

.team-cta h2 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: #f4ece6;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.team-cta p {
  font-size: 1rem;
  color: #7a706a;
  margin-bottom: 36px;
}

/* ── Responsive team ── */
@media (max-width: 960px) {
  .team-intro { grid-template-columns: 1fr; gap: 32px; padding: 60px 0 72px; }
  .team-profile { grid-template-columns: 1fr; gap: 40px; }
  .team-profile--reverse { grid-template-columns: 1fr; }
  .team-profile--reverse .team-profile-visual { order: 0; }
  .team-profile--reverse .team-profile-text { order: 0; }
  .team-synergy { grid-template-columns: 1fr; gap: 48px; }
  .team-profile-photo-placeholder { aspect-ratio: 4/3; }
}

/* Mobile tweaks: ensure team profile images fill their container and are not shrunk */
@media (max-width: 767px) {
  .team-profile-photo, .team-profile-photo-placeholder {
    width: 100%;
    aspect-ratio: auto !important;
    height: auto !important;
    display: block;
  }

  .team-profile-photo img,
  .team-profile-photo-placeholder img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Reduce oversized profile number on small screens so it doesn't visually dominate */
  .team-profile-num {
    font-size: 3.2rem;
    top: 8px;
    right: 12px;
  }
}


/* ═══════════════════════════════════════
   ESPERIENZA PAGE
═══════════════════════════════════════ */

.esperienza-body {
  background: #050404;
  padding: 100px 0 140px;
}

/* ── Intro ── */
.esperienza-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  padding: 80px 0 100px;
  border-bottom: 1px solid rgba(240,207,152,0.08);
}

.esperienza-intro-lead {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 300;
  line-height: 1.45;
  color: #f4ece6;
  letter-spacing: -0.01em;
}

.esperienza-intro-lead em {
  font-style: italic;
  color: #f0cf98;
}

.esperienza-intro-body {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.esperienza-intro-body p {
  font-size: 0.97rem;
  line-height: 1.78;
  color: #7a706a;
}

/* ── Galleria spazi ── */
.esperienza-gallery {
  padding: 80px 0 60px;
}

.esperienza-gallery-header {
  margin-bottom: 52px;
}

.esperienza-gallery-header h2 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 300;
  color: #f4ece6;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}

.esperienza-spaces-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: rgba(240,207,152,0.04);
  border: 1px solid rgba(240,207,152,0.06);
}

.espace-card {
  background: #0b0909;
  position: relative;
  overflow: hidden;
  transition: background 300ms ease;
}

.espace-card:hover {
  background: #0f0d0d;
}

.espace-card:first-child {
  grid-column: span 2;
}

.espace-img {
  width: 100%;
  aspect-ratio: 16/7;
  background: linear-gradient(160deg, #0f0d0d 0%, #150e0e 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.espace-card:not(:first-child) .espace-img {
  aspect-ratio: 4/3;
}

.espace-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(240,207,152,0.015) 0px, transparent 1px, transparent 60px),
    repeating-linear-gradient(90deg, rgba(240,207,152,0.015) 0px, transparent 1px, transparent 60px);
}

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

.espace-info {
  padding: 28px 32px 36px;
}

.espace-info h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #f4ece6;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.espace-info p {
  font-size: 0.88rem;
  line-height: 1.72;
  color: #5a5150;
}

/* ── Valori ── */
.esperienza-values {
  padding: 80px 0 60px;
  border-top: 1px solid rgba(240,207,152,0.08);
}

.esperienza-values-header {
  margin-bottom: 52px;
}

.esperienza-values-header h2 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 300;
  color: #f4ece6;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}

.esperienza-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: rgba(240,207,152,0.04);
  border: 1px solid rgba(240,207,152,0.06);
}

.evalue-card {
  background: #0b0909;
  padding: 40px 28px 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 300ms ease;
}

.evalue-card:hover {
  background: #0f0d0d;
}

.evalue-icon {
  font-size: 1.1rem;
  color: #f0cf98;
  opacity: 0.5;
}

.evalue-card h3 {
  font-family: 'Raleway', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #f4ece6;
  letter-spacing: -0.01em;
  margin: 0;
}

.evalue-card p {
  font-size: 0.87rem;
  line-height: 1.72;
  color: #5a5150;
}

/* ── CTA ── */
.esperienza-cta {
  padding: 80px 0;
  border-top: 1px solid rgba(240,207,152,0.08);
  text-align: center;
}

.esperienza-cta h2 {
  font-family: 'Raleway', sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 300;
  color: #f4ece6;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.esperienza-cta p {
  font-size: 1rem;
  color: #7a706a;
  margin-bottom: 36px;
}

/* ── Responsive esperienza ── */
@media (max-width: 960px) {
  .esperienza-intro { grid-template-columns: 1fr; gap: 32px; padding: 60px 0 72px; }
  .esperienza-values-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .esperienza-spaces-grid { grid-template-columns: 1fr; }
  .espace-card:first-child { grid-column: span 1; }
  .esperienza-values-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════
   PREMIUM ANIMATIONS — MedEstetica
   animations.js le pilota, qui ci sono le definizioni CSS
═══════════════════════════════════════════════════════════ */

/* ── @keyframes ── */

@keyframes pageEnterOverlayOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes heroLabelIn {
  from { opacity: 0; transform: translateY(8px) scaleX(0.92); letter-spacing: 0.35em; }
  to   { opacity: 1; transform: translateY(0)   scaleX(1);    letter-spacing: 0.22em; }
}

@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(32px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

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

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

@keyframes fadeUpBig {
  from { opacity: 0; transform: translateY(60px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0);    }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.88) translateY(20px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

@keyframes lineReveal {
  from { transform: scaleX(0); transform-origin: left; opacity: 0; }
  to   { transform: scaleX(1); transform-origin: left; opacity: 1; }
}

@keyframes shimmerMove {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center;  }
}

/* ── Page overlay ── */

.page-enter-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #050404;
  opacity: 1;
  pointer-events: none;
  transition: opacity 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.page-enter-overlay--out {
  opacity: 0;
}

.page-leave-overlay {
  opacity: 0;
  transition: opacity 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

.page-leave-overlay--in {
  opacity: 1;
}

/* ── Hero content animations (gestite da data-anim in JS) ── */

/* ── Scroll reveal — stati iniziali ── */

[data-anim="fade-up"] {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms);
}

[data-anim="fade-up-big"] {
  opacity: 0;
  transform: translateY(60px);
  filter: blur(2px);
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms),
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms);
}

[data-anim="fade-left"] {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms);
}

[data-anim="fade-right"] {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms);
}

[data-anim="scale-up"] {
  opacity: 0;
  transform: scale(0.88) translateY(20px);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms),
    transform 600ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms);
}

[data-anim="line-reveal"] {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition:
    transform 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay, 0ms),
    opacity 400ms ease var(--anim-delay, 0ms);
}

/* ── Stato "entrato nel viewport" ── */

[data-anim="fade-up"].anim-in,
[data-anim="fade-up-big"].anim-in,
[data-anim="fade-left"].anim-in,
[data-anim="fade-right"].anim-in,
[data-anim="scale-up"].anim-in {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

[data-anim="line-reveal"].anim-in {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

/* ── Button shimmer ── */

.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 80%
  );
  background-size: 200% 100%;
  background-position: -200% center;
  pointer-events: none;
  transition: background-position 0s;
}

.btn-shimmer:hover::after {
  background-position: 200% center;
  transition: background-position 600ms ease;
}

/* ── Riduce animazioni se preferite ridotte (accessibilità) ── */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .page-enter-overlay {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE – HOME (max 767px)
   NON tocca nulla del desktop (min-width: 768px)
   ═══════════════════════════════════════════════════════════════ */

/* Blocca lo scroll orizzontale globalmente */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

@media (max-width: 767px) {

  /* Forza tutti gli elementi a non uscire dal viewport */
  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Ripristina il padding del container header su mobile */
  .site-header .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ── HEADER & NAV ── */
  .header-layout {
    padding: 12px 0;
  }

  .btn-small {
    display: none; /* nasconde "Prenota consulenza" nell'header su mobile */
  }

  .nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 30;
    flex-shrink: 0;
  }

  .nav-toggle span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 300ms ease, opacity 300ms ease;
  }

  /* Hamburger → X quando aperto */
  .nav-toggle.is-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 4, 4, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
  }

  .main-nav.is-open {
    display: flex;
  }

  .nav-toggle {
    position: relative;
    z-index: 201;
  }

  .site-header.nav-is-open {
    z-index: 202;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    padding: 0;
    margin: 0;
  }

  .main-nav li {
    list-style: none;
    text-align: center;
  }

  .main-nav a {
    font-size: 1.3rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #f4ece6;
    display: block;
    padding: 6px 0;
  }

  .main-nav a.nav-active {
    color: #f0cf98;
  }

  /* ── HERO HOME ── */
  .hero-center {
    padding: 38vh 20px 0;
  }

  .hero-center h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
    letter-spacing: 0.14em;
  }

  .hero-center-subtitle {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }

  /* ── SEZIONI TEASER (01–05) ── */
  .teaser-section {
    padding: 64px 0;
  }

  .teaser-section--cta {
    padding: 72px 0;
  }

  .teaser-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Annulla il reverse su mobile — tutto in ordine naturale */
  .teaser-layout--reverse .teaser-visual,
  .teaser-layout--reverse .teaser-text {
    order: unset;
  }

  /* Nasconde il numero decorativo grande */
  .teaser-visual {
    display: none;
  }

  /* Padding testo uniforme su mobile */
  .teaser-text,
  .teaser-layout:not(.teaser-layout--reverse) .teaser-text,
  .teaser-layout--reverse .teaser-text {
    padding: 0 4px;
    gap: 16px;
  }

  .teaser-text h2 {
    font-size: clamp(1.7rem, 7.5vw, 2.2rem);
  }

  .teaser-text p {
    font-size: 0.95rem;
    line-height: 1.75;
  }

  .teaser-label {
    font-size: 0.68rem;
  }

  /* ── CTA / FORM ── */
  .teaser-section--cta {
    text-align: left;
    padding: 72px 0 80px;
  }

  .teaser-cta-block {
    align-items: flex-start;
    max-width: 100%;
  }

  .teaser-cta-block h2 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    text-align: left;
  }

  .teaser-cta-block p {
    text-align: left;
    font-size: 0.95rem;
  }

  .btn-large {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: 0.88rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-footer {
    align-items: stretch;
  }

  .form-footer .btn {
    justify-content: center;
  }

  /* Fix select dropdown su mobile */
  .form-field select {
    font-size: 16px !important;
    padding: 0.95rem 2.5rem 0.95rem 1.1rem;
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(255, 255, 255, 0.06);
    color: #f4ece6 !important;
    width: 100%;
    cursor: pointer;
    min-height: 52px;
  }

  .form-field input,
  .form-field textarea {
    font-size: 16px !important;
  }

  .form-field select option {
    background: #1a1515 !important;
    color: #f4ece6 !important;
    font-size: 16px !important;
    padding: 12px;
  }

  /* ── SECTION DIVIDER ── */
  .section-divider {
    width: 60px;
    margin: 0 20px;
  }

  /* ── FOOTER ── */
  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 36px;
  }

  .footer-tagline {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-legal {
    gap: 16px;
    flex-wrap: wrap;
  }
}