*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --ivory: #FAFAF7;
      --sage: #3D5A4C;
      --sage-light: #5A7A6A;
      --sand: #C8B89A;
      --sand-light: #E8DDD0;
      --fog: #F0EDE8;
      --text: #2A2A25;
      --text-muted: #7A7A72;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--ivory);
      color: var(--text);
      font-size: 16px;
      line-height: 1.7;
      font-weight: 300;
    }

    /* NAV */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.4rem 4rem;
      background: rgba(250,250,247,0.92);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s;
    }
    nav.scrolled { border-color: var(--sand-light); }

    .nav-brand {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.15rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--sage);
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      gap: 2.5rem;
      list-style: none;
    }
    .nav-links a {
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--sage); }

    .nav-cta {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      background: var(--sage);
      color: var(--ivory) !important;
      padding: 0.55rem 1.4rem;
      border-radius: 2px;
      transition: background 0.2s !important;
    }
    .nav-cta:hover { background: var(--sage-light) !important; color: var(--ivory) !important; }

    /* HAMBURGER MENU */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 32px;
      height: 32px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
    }
    .nav-hamburger span {
      display: block;
      width: 100%;
      height: 1.5px;
      background: var(--sage);
      transition: transform 0.25s, opacity 0.25s;
      transform-origin: center;
    }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    /* MOBILE MENU OVERLAY */
    .nav-mobile-menu {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(250,250,247,0.97);
      backdrop-filter: blur(12px);
      z-index: 99;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 2.5rem;
    }
    .nav-mobile-menu.open { display: flex; }
    .nav-mobile-menu a {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.8rem;
      font-weight: 300;
      color: var(--sage);
      text-decoration: none;
      letter-spacing: 0.04em;
      transition: color 0.2s;
    }
    .nav-mobile-menu a:hover { color: var(--sage-light); }
    .nav-mobile-menu .mobile-cta {
      background: var(--sage);
      color: var(--ivory) !important;
      padding: 0.7rem 2.2rem;
      border-radius: 2px;
      font-size: 0.85rem !important;
      font-family: 'Inter', sans-serif !important;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    @media (max-width: 768px) {
      .nav-hamburger { display: flex; }
    }

    /* HERO */
    .hero {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;

      gap: 4rem;
    }

    .hero-text {}

    .hero-eyebrow {
      font-size: 0.72rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--sand);
      margin-bottom: 1.8rem;
    }

    .hero-headline {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2.8rem, 5vw, 4.2rem);
      font-weight: 300;
      line-height: 1.15;
      color: var(--sage);
      margin-bottom: 2rem;
    }
    .hero-headline em {
      font-style: italic;
      color: var(--text);
    }

    .hero-sub {
      font-size: 1rem;
      color: var(--text-muted);
      max-width: 420px;
      margin-bottom: 3rem;
      line-height: 1.8;
    }

    .hero-actions {
      display: flex;
      gap: 1rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .btn-primary {
      display: inline-block;
      background: var(--sage);
      color: var(--ivory);
      padding: 0.85rem 2.2rem;
      font-size: 0.82rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 2px;
      transition: background 0.2s, transform 0.15s;
    }
    .btn-primary:hover { background: var(--sage-light); transform: translateY(-1px); }
    button.btn-primary {
      font-family: 'Inter', sans-serif;
      border: none;
      cursor: pointer;
      appearance: none;
    }

    .btn-secondary {
      display: inline-block;
      color: var(--sage);
      font-size: 0.82rem;
      letter-spacing: 0.08em;
      text-decoration: none;
      border-bottom: 1px solid var(--sand);
      padding-bottom: 2px;
      transition: border-color 0.2s, color 0.2s;
    }
    .btn-secondary:hover { color: var(--sage-light); border-color: var(--sage-light); }

    .hero-visual {
      display: flex;
      justify-content: center;
      align-items: center;
    }


    .hero-photo {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      object-fit: cover;
      object-position: center top;
      border: 3px solid var(--sand-light);
      display: block;
      margin: 0 auto 2rem;
    }
    .hero-card {
      background: var(--fog);
      border-radius: 4px;
      padding: 3rem;
      max-width: 380px;
      width: 100%;
      position: relative;
    }
    .hero-card::before {
      content: '';
      position: absolute;
      top: -1px; left: 2.5rem;
      width: 60px; height: 3px;
      background: var(--sand);
    }

    .hero-card-quote {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      font-style: italic;
      font-weight: 300;
      color: var(--sage);
      line-height: 1.5;
      margin-bottom: 1.8rem;
    }

    .hero-card-meta {
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--sand);
    }

    .hero-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid var(--sand-light);
    }

    .stat-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2rem;
      font-weight: 400;
      color: var(--sage);
      line-height: 1;
    }
    .stat-label {
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      margin-top: 0.3rem;
    }

    /* WAVE DIVIDER — firma del sito */
    .wave-divider {
      width: 100%;
      overflow: hidden;
      line-height: 0;
      padding: 1rem 0;
    }
    .wave-divider svg { display: block; width: 100%; }

    /* SECTION SHARED */
    section { padding: 4rem 4rem; }
    section.alt { background: var(--fog); }

    .section-eyebrow {
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--sand);
      margin-bottom: 1rem;
    }

    .section-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 300;
      color: var(--sage);
      line-height: 1.2;
      margin-bottom: 1.5rem;
    }

    .section-body {
      color: var(--text-muted);
      max-width: 560px;
      font-size: 1rem;
      line-height: 1.85;
    }

    /* Due colonne affiancate, ma senza una soglia fissa: auto-fit le affianca
       finche' ciascuna sta in almeno 24rem, e sotto quella misura ne impila
       una sola. Cosi' si adatta anche ai tablet e alle finestre strette, non
       solo ai due casi "schermo grande" e "telefono". */
    .percorso-colonne {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
      gap: 2rem 3.5rem;
      align-items: start;
      margin-top: 2rem;
    }

    /* Il limite di 560px di .section-body resta buono anche qui, e serve
       proprio nel caso intermedio: quando le colonne si impilano ma la
       finestra e' ancora larga (un tablet), senza limite verrebbero righe da
       novanta caratteri, illeggibili. Affiancate la colonna misura 540px,
       quindi il limite non stringe niente. */

    /* Testi che dal pannello arrivano scritti su piu' righe. La classe la
       mette content-loader.js, e solo quando gli a capo ci sono davvero.
       pre-line li conserva e continua a compattare gli spazi doppi, cosi' un
       testo incollato da Word non si porta dietro la spaziatura originale. */
    .testo-a-capo {
      white-space: pre-line;
    }

    /* CHI SONO */
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
    }

    .about-right {}

    .bio-block {
      margin-top: 2.5rem;
    }
    .bio-block p {
      color: var(--text-muted);
      font-size: 0.97rem;
      line-height: 1.85;
      margin-bottom: 1.2rem;
    }

    .credentials {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      margin-top: 3rem;
    }

    .credential-item {
      display: flex;
      gap: 1.2rem;
      align-items: flex-start;
      padding: 1.2rem 1.5rem;
      background: var(--ivory);
      border-radius: 3px;
      border-left: 2px solid var(--sand);
    }

    .credential-icon {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      color: var(--sage);
    }

    .credential-text {}
    .credential-label {
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--sand);
      margin-bottom: 0.25rem;
    }
    .credential-value {
      font-size: 0.9rem;
      color: var(--text);
      font-weight: 400;
      line-height: 1.45;
    }

    /* AREE DI LAVORO */
    .areas-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3.5rem;
    }

    .area-card {
      padding: 2.2rem;
      background: var(--ivory);
      border-radius: 3px;
      border-top: 2px solid var(--sand-light);
      transition: border-color 0.2s, transform 0.2s;
    }
    .area-card:hover {
      border-color: var(--sage);
      transform: translateY(-3px);
    }

    .area-icon {
      width: 36px; height: 36px;
      color: var(--sage);
      margin-bottom: 1.2rem;
    }

    .area-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.25rem;
      font-weight: 400;
      color: var(--sage);
      margin-bottom: 0.7rem;
    }

    .area-desc {
      font-size: 0.88rem;
      color: var(--text-muted);
      line-height: 1.75;
    }

    /* APPROCCIO */
    .approach-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

    .approach-steps {
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .approach-step {
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
    }

    .step-line {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }
    .step-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--sand);
      flex-shrink: 0;
    }
    .step-connector {
      width: 1px;
      flex: 1;
      min-height: 40px;
      background: var(--sand-light);
      margin-top: 6px;
    }
    .approach-step:last-child .step-connector { display: none; }

    .step-content {}
    .step-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.15rem;
      font-weight: 500;
      color: var(--sage);
      margin-bottom: 0.4rem;
    }
    .step-desc {
      font-size: 0.88rem;
      color: var(--text-muted);
      line-height: 1.75;
    }

    /* RECENSIONI */
    .reviews-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 3.5rem;
    }

    .review-card {
      padding: 2rem;
      background: var(--ivory);
      border-radius: 3px;
      position: relative;
    }
    .review-card::before {
      content: '"';
      font-family: 'Cormorant Garamond', serif;
      font-size: 4rem;
      color: var(--sand-light);
      position: absolute;
      top: 0.5rem; left: 1.5rem;
      line-height: 1;
    }

    .review-text {
      font-size: 0.9rem;
      color: var(--text-muted);
      line-height: 1.8;
      margin-top: 1.5rem;
      margin-bottom: 1.5rem;
      font-style: italic;
    }

    .review-meta {
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--sand);
    }

    .stars {
      color: var(--sand);
      font-size: 0.85rem;
      letter-spacing: 2px;
      margin-bottom: 0.5rem;
    }

    /* SERVIZI & PREZZI */
    .services-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      background: var(--sand-light);
      border: 1px solid var(--sand-light);
      border-radius: 3px;
      overflow: hidden;
      margin-top: 3rem;
    }

    .service-item {
      background: var(--ivory);
      padding: 1.8rem 2rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .service-name {
      font-size: 0.95rem;
      color: var(--text);
      font-weight: 400;
    }
    .service-price {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.3rem;
      color: var(--sage);
      font-weight: 400;
    }

    /* Riga dei pagamenti, sotto le tariffe. Volutamente discreta: risponde a
       una domanda pratica, non deve competere con i prezzi. */
    .services-payment {
      margin-top: 1.2rem;
      font-size: 0.85rem;
      color: var(--text-muted);
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem 0.7rem;
      align-items: baseline;
    }
    .services-payment-label {
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--sand);
    }

    /* CONTATTI */
    /* Colonna unica: da quando il racconto sta nella sezione "Inizia il tuo
       percorso", qui restano solo i pulsanti e una seconda colonna non
       avrebbe niente da contenere. Larghezza limitata perche' pulsanti larghi
       quanto lo schermo si leggono male. */
    /* Larghezza piena, come tutte le altre sezioni: il titolo si allinea a
       quello di "Servizi e tariffe" che sta subito sopra. Erano i pulsanti,
       non la sezione, ad aver bisogno di un limite — e ora ce l'hanno per
       conto loro. */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr;
    }

    /* Niente sfondo: quando la sezione era a due colonne questo riquadro
       distingueva i pulsanti dal testo accanto. Ora che la colonna e' una
       sola racchiude tutta la sezione, quindi ripete il lavoro della sezione
       stessa — e con il colore delle sezioni grigie, rompendo l'alternanza
       avorio/grigio proprio dove doveva tornare avorio. */
    .contact-form-block {
      padding: 0;
    }

    /* Riga facoltativa sopra i pulsanti: se Sofia non scrive niente dal
       pannello non deve lasciare uno spazio vuoto. */
    .contact-form-block .section-body:empty { display: none; }

    .form-note {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin-bottom: 1.6rem;
      line-height: 1.6;
    }

    /* PULSANTI DI CONTATTO DIRETTO */
    /* Due per riga, come la lista delle tariffe qui sopra: e' la convenzione
       del sito per le griglie a due colonne, e i contatti erano l'unica
       sezione che non la seguiva. Con auto-fit su uno schermo largo ne
       entravano tre, lasciando il quarto spaiato.
       Effetto collaterale utile: i pulsanti sulla stessa riga si pareggiano in
       altezza, quindi quelli senza il recapito sotto non risultano piu' bassi
       degli altri. */
    .contact-actions {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 0.7rem;
    }

    .contact-action {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.1rem 1.3rem;
      background: var(--ivory);
      border: 1px solid var(--sand-light);
      border-radius: 3px;
      text-decoration: none;
      color: var(--text);
      transition: border-color 0.2s, transform 0.15s, background 0.2s;
    }
    .contact-action:hover {
      border-color: var(--sage);
      transform: translateY(-2px);
    }
    .contact-action[hidden] { display: none; }

    .contact-action-icon {
      width: 26px;
      height: 26px;
      flex-shrink: 0;
      color: var(--sage);
    }

    .contact-action-label {
      display: block;
      font-size: 0.95rem;
      color: var(--sage);
      font-weight: 400;
      line-height: 1.35;
    }
    .contact-action-note {
      display: block;
      font-size: 0.78rem;
      color: var(--text-muted);
      line-height: 1.4;
      word-break: break-word;
    }
    .contact-action-note:empty { display: none; }

    /* WhatsApp: unico pulsante marcato, è quello che conviene usare. */
    .contact-action.is-whatsapp {
      background: var(--sage);
      border-color: var(--sage);
    }
    .contact-action.is-whatsapp:hover { background: var(--sage-light); border-color: var(--sage-light); }
    .contact-action.is-whatsapp .contact-action-icon,
    .contact-action.is-whatsapp .contact-action-label { color: var(--ivory); }
    .contact-action.is-whatsapp .contact-action-note { color: rgba(250,250,247,0.75); }

    /* FOOTER */
    footer {
      background: var(--sage);
      color: rgba(250,250,247,0.7);
      padding: 1.8rem 4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .footer-brand {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      color: var(--ivory);
      font-weight: 300;
    }
    .footer-note {
      font-size: 0.78rem;
      letter-spacing: 0.05em;
    }
    .footer-links {
      display: flex;
      gap: 2rem;
    }
    .footer-links a {
      font-size: 0.78rem;
      color: rgba(250,250,247,0.6);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--ivory); }

    /* MOBILE */
    @media (max-width: 768px) {
      /* NAV */
      nav { padding: 1rem 1.2rem; }
      .nav-links { display: none; }

      /* HERO — colonna unica, foto in alto centrata */
      .hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        padding: 5.5rem 1.2rem 3rem;
        gap: 2rem;
        min-height: unset;
      }
      /* Foto sopra il testo */
      .hero-visual {
        display: flex;
        justify-content: center;
        order: -1;
      }
      .hero-card {
        max-width: 100%;
        padding: 1.8rem 1.4rem 1.4rem;
      }
      .hero-photo {
        width: 150px;
        height: 150px;
      }
      .hero-stats {
        grid-template-columns: 1fr 1fr;
      }
      .hero-sub { max-width: 100%; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .btn-primary, .btn-secondary {
        text-align: center;
        display: block;
      }

      /* SEZIONI generiche */
      section { padding: 3.5rem 1.2rem; }

      /* ABOUT / APPROCCIO / CONTATTI — singola colonna */
      .about-grid,
      .approach-layout,
      .contact-grid { grid-template-columns: 1fr; gap: 2rem; }

      /* AREE DI LAVORO — 2 colonne su mobile medio, 1 su piccolo */
      .areas-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
      .area-card { padding: 1.4rem 1rem; }

      /* RECENSIONI — slider orizzontale */
      .reviews-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding-bottom: 1rem;
        grid-template-columns: unset;
      }
      .reviews-grid::-webkit-scrollbar { display: none; }
      .review-card {
        flex: 0 0 82vw;
        scroll-snap-align: center;
      }

      /* SERVIZI — 1 colonna, prezzo allineato a destra */
      .services-list { grid-template-columns: 1fr; }
      .service-item { padding: 1.2rem 1rem; }

      /* CONTATTI — su mobile la sezione da' gia' i suoi margini laterali */
      .contact-form-block { padding: 0; }
      .contact-actions { grid-template-columns: 1fr; }

      /* FOOTER */
      footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem 1.2rem;
        gap: 1.5rem;
      }
      .footer-links {
        flex-direction: column;
        gap: 0.8rem;
      }
    }

    /* Schermi molto piccoli (≤ 400px) */
    @media (max-width: 400px) {
      .areas-grid { grid-template-columns: 1fr; }
      .hero-photo { width: 120px; height: 120px; }
      .hero-card { padding: 1.4rem 1rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; animation: none !important; }
    }