@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=DM+Sans:wght@300;400;500&display=swap');

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: #fffcef; }
body { font-family: 'DM Sans', system-ui, sans-serif; background: #fffcef; color: #3A3835; line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ═══ VARIABILI ═══ */
:root {
  --cream:#F7F2EA; --sand:#E8D9C0; --sand-mid:#D4BFA0;
  --terra:#C2714F; --terra-lt:#D98B68;
  --navy:#2D3B55; --navy-lt:#3D4F6E;
  --teal:#7BA5A0; --teal-lt:#A8C5C0;
  --charcoal:#1E1E1E; --mid:#6B5D52; --light:#A89888; --white:#F7F2EA;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --nav-h:76px; --r:14px;
  --sh:0 4px 32px rgba(30,20,10,.09);
  --sh-lg:0 12px 60px rgba(30,20,10,.14);
  --mx-px:350;  /* <-- CAMBIA SOLO QUESTO NUMERO */
  --mx:clamp(2rem, calc(var(--mx-px) / 1920 * 100vw), calc(var(--mx-px) * 1px));
}

/* ═══ LAYOUT BASE ═══
   Sezioni: 100% larghezza, sfondo arriva ai bordi
   .wrap: rientra il contenuto di --mx (200px) per lato */
section { display:block; width:100%; padding:6rem 0; }
.wrap    { width:100%; padding-left:var(--mx); padding-right:var(--mx); }
.wrap-sm { width:100%; padding-left:var(--mx); padding-right:var(--mx); }

/* ═══ NAVBAR ═══ */
nav {
  position:sticky; top:0; z-index:200;
  width:100%; height:var(--nav-h);
  background:var(--cream); border-bottom:1px solid var(--sand);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--mx); transition:box-shadow .3s;
}
nav.scrolled { box-shadow:0 4px 28px rgba(30,20,10,.1); }
/* flex-shrink:0 sul logo/nome: senza, quando lo spazio scarseggia il blocco
   si restringe insieme al resto e "Muta Mentis"/"Area personale" vanno a
   capo su due righe (bug segnalato) — meglio che sia lo spazio tra le voci
   di menu a comprimersi (gap ridotto sotto), non il logo. */
.nav-brand { display:flex; align-items:center; gap:.9rem; flex-shrink:0; white-space:nowrap; }
.nav-leaf { width:40px; height:40px; border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; font-size:1.3rem; border:1.5px solid var(--sand-mid); }
.nav-name { font-family:var(--serif); font-size:1.15rem; font-weight:400; color:var(--navy); line-height:1.1; }
.nav-role { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--light); }
.nav-links { list-style:none; display:flex; align-items:center; gap:1.5rem; }
.nav-links>li { position:relative; }
.nav-links>li>a { font-size:.8rem; letter-spacing:.07em; text-transform:uppercase; font-weight:500; color:var(--mid); transition:color .2s; padding-bottom:3px; position:relative; white-space:nowrap; }
.nav-links>li>a::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:2px; background:var(--terra); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.nav-links>li>a:hover,.nav-links>li>a.active { color:var(--terra); }
.nav-links>li>a:hover::after,.nav-links>li>a.active::after { transform:scaleX(1); }
.nav-drop { display:none; position:absolute; top:calc(100% + 14px); left:0; background:var(--cream); border:1px solid var(--sand); border-radius:var(--r); box-shadow:var(--sh); min-width:210px; padding:.5rem 0; z-index:300; }
.nav-links>li:hover .nav-drop { display:block; }
.nav-drop a { display:block; padding:.6rem 1.3rem; font-size:.83rem; color:var(--mid); transition:all .15s; }
.nav-drop a:hover { background:var(--sand); color:var(--terra); padding-left:1.6rem; }
.nav-cta { background:var(--navy); color:#fff!important; padding:.6rem 1.5rem; border-radius:50px; font-size:.8rem!important; font-weight:500!important; text-transform:none!important; transition:background .2s!important; white-space:nowrap; }
.nav-cta:hover { background:var(--navy-lt)!important; }
.nav-cta::after { display:none!important; }

/* ═══ HERO ═══ */
.hero-outer {
  background:var(--cream);
  padding:1rem var(--mx) 6rem;
  width:100%;
}
.hero-eyebrow { display:flex; align-items:center; gap:.7rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--terra); font-weight:500; margin-bottom:1.8rem; }
.hero-eyebrow::before { content:''; width:26px; height:1.5px; background:var(--terra); display:inline-block; }
.hero-h1 { font-family:var(--serif); font-size:clamp(2rem,2.8vw,3.2rem); font-weight:300; line-height:1.18; color:var(--navy); margin-bottom:1.2rem; }
.hero-h1 em { font-style:italic; color:var(--terra); }
.hero-p { font-size:.96rem; line-height:1.8; color:var(--mid); max-width:420px; margin-bottom:2rem; font-weight:300; }
.hero-btns { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.hero-trust { display:flex; gap:1.5rem; margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(45,59,85,.12); }

/* ═══ BUTTONS ═══ */
.btn { display:inline-flex; align-items:center; gap:.5rem; border:none; cursor:pointer; font-family:var(--sans); transition:all .25s; }
.btn-navy { background:var(--navy); color:var(--cream); padding:.85rem 2rem; border-radius:50px; font-size:.88rem; font-weight:500; }
.btn-navy:hover { background:var(--navy-lt); transform:translateY(-2px); box-shadow:0 8px 28px rgba(45,59,85,.3); }
.btn-outline { background:transparent; color:var(--navy); padding:.82rem 1.8rem; border-radius:50px; font-size:.88rem; border:1.5px solid var(--sand-mid); font-weight:400; }
.btn-outline:hover { border-color:var(--navy); background:rgba(45,59,85,.04); }
.btn-cream { background:var(--cream); color:var(--terra); padding:.9rem 2.2rem; border-radius:50px; font-size:.95rem; font-weight:500; display:inline-block; transition:all .25s; }
.btn-cream:hover { background:#fff; transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,.2); }
.btn-booking { background:#DC8780; color:#fff; padding:.85rem 2rem; border-radius:50px; font-size:.88rem; font-weight:500; display:inline-block; transition:all .25s; }
.btn-booking:hover { background:#D97A88; color:#fff; transform:translateY(-2px); box-shadow:0 8px 28px rgba(220,135,128,.3); }

/* ═══ TIPOGRAFIA ═══ */
.eyebrow { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--terra); margin-bottom:1rem; display:block; }
.h2 { font-family:var(--serif); font-size:clamp(1.9rem,2.8vw,3rem); font-weight:300; line-height:1.2; color:var(--navy); margin-bottom:1.1rem; }
.h2 em { font-style:italic; color:var(--terra); }
.lead { font-size:.96rem; line-height:1.82; color:var(--mid); font-weight:300; }
.center { text-align:center; }

/* ═══ INTRO ═══ */
#intro { background:var(--cream); }
/* align-items:start invece di center: con "center" la foto veniva centrata
   sull'altezza della colonna di testo — su schermi più stretti (scala Windows
   125%/150%) il testo va a capo su più righe (riga più alta) mentre la foto si
   restringe, e il centraggio la spingeva sempre più in basso man mano che si
   restringeva. Con "start" resta ancorata in alto, indipendentemente da
   quanto testo c'è accanto. */
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
/* Spostata leggermente più in basso su richiesta, solo su desktop/tablet —
   la versione mobile la azzera già più sotto (margin-top:0 !important). */
.intro-grid img { margin-top:70px; }

/* ═══ SERVIZI ═══ */
#servizi { background:var(--sand); }
.services-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; margin-top:3.5rem; }
.svc-card { background:var(--cream); border-radius:20px; padding:2.6rem 2.4rem; box-shadow:var(--sh); transition:transform .3s,box-shadow .3s; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--terra); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.svc-card:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.svc-card:hover::before { transform:scaleX(1); }
.svc-icon { font-size:2.5rem; margin-bottom:1.3rem; }
.svc-name { font-family:var(--serif); font-size:1.7rem; font-weight:400; color:var(--navy); margin-bottom:.8rem; }
.svc-sub { font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--terra); font-weight:500; margin-bottom:1rem; }
.svc-desc { font-size:.9rem; line-height:1.8; color:var(--mid); font-weight:300; margin-bottom:1.5rem; }
.svc-list { list-style:none; }
.svc-list li { font-size:.87rem; color:var(--mid); line-height:1.7; padding-left:1.2rem; position:relative; margin-bottom:.3rem; font-weight:300; }
.svc-list li::before { content:'↳'; position:absolute; left:0; color:var(--terra); }
.svc-link { display:inline-flex; align-items:center; gap:.4rem; margin-top:1.5rem; font-size:.8rem; font-weight:500; color:var(--navy); letter-spacing:.06em; text-transform:uppercase; border-bottom:1.5px solid transparent; transition:border-color .2s; position:relative; z-index:2; }
.svc-link:hover { border-color:var(--navy); }

/* ═══ COME LAVORO ═══ */
#come { background:var(--cream); }
/* align-items:start invece di center — stesso motivo di .intro-grid: con
   "center" la foto scivolava sempre più in basso restringendo lo schermo,
   perché il testo accanto (i 3 passi) va a capo su più righe. */
.come-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.steps { margin-top:2.5rem; }
.step-item { display:flex; gap:1.4rem; align-items:flex-start; padding-bottom:2rem; position:relative; }
.step-item:not(:last-child)::after { content:''; position:absolute; left:19px; top:44px; bottom:0; width:1px; background:var(--sand); }
.step-num { width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--cream); font-family:var(--serif); font-size:1.1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; z-index:1; }
.step-title { font-family:var(--serif); font-size:1.2rem; font-weight:400; color:var(--navy); margin-bottom:.4rem; }
.step-desc { font-size:.87rem; line-height:1.75; color:var(--mid); font-weight:300; }
.come-visual { background:var(--sand); border-radius:24px; padding:2.8rem; box-shadow:var(--sh); position:relative; overflow:hidden; }
.come-visual::after { content:'🍃'; position:absolute; bottom:1rem; right:1.5rem; font-size:5rem; opacity:.12; transform:rotate(15deg); }
.come-visual .h2 { font-size:2rem; margin-bottom:1.4rem; }
.come-visual .lead { font-size:.9rem; }
.come-cta { margin-top:2rem; }

/* ═══ PERCHÉ ═══ */
#perche { background:var(--navy); }
#perche .eyebrow { color:var(--teal-lt); }
#perche .h2 { color:#fff; }
#perche .h2 em { color:var(--teal-lt); }
#perche .lead { color:rgba(255,255,255,.55); max-width:560px; margin:0 auto; }
.perche-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3.5rem; }
.perche-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:2rem; transition:background .25s; }
.perche-card:hover { background:rgba(255,255,255,.1); }
.perche-icon { font-size:1.8rem; margin-bottom:1.2rem; }
.perche-title { font-family:var(--serif); font-size:1.2rem; color:#fff; margin-bottom:.8rem; }
.perche-desc { font-size:.86rem; line-height:1.75; color:rgba(255,255,255,.5); font-weight:300; }

/* ═══ CTA BANNER ═══ */
.cta-banner { background:var(--terra); width:100%; padding:5rem var(--mx); text-align:center; }
.cta-banner .h2 { color:#fff; font-size:clamp(2rem,3vw,3rem); }
.cta-banner .h2 em { color:rgba(255,255,255,.75); }
.cta-banner .lead { color:rgba(255,255,255,.8); max-width:520px; margin:0 auto 2.2rem; }
.cta-note { font-size:.76rem; color:rgba(255,255,255,.6); margin-top:1.1rem; }

/* ═══ TESTIMONIANZE ═══ */
#testi { background:var(--cream); }
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:3.5rem; }
.testi-card { background:var(--sand); border-radius:20px; padding:2rem; box-shadow:var(--sh); transition:transform .3s; }
.testi-card:hover { transform:translateY(-4px); }
.testi-stars { color:var(--terra); font-size:.9rem; letter-spacing:.1em; margin-bottom:.9rem; }
.testi-text { font-family:var(--serif); font-size:1.05rem; font-style:italic; line-height:1.6; color:var(--navy); margin-bottom:1.2rem; }
.testi-who { font-size:.75rem; color:var(--light); text-transform:uppercase; letter-spacing:.1em; }

/* ═══ FAQ ═══ */
#faq { background:var(--sand); }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.faq-list { margin-top:1.5rem; }
.faq-item { border-bottom:1px solid var(--sand-mid); }
.faq-q { display:flex; justify-content:space-between; align-items:center; padding:1.2rem 0; cursor:pointer; font-size:.93rem; font-weight:500; color:var(--navy); user-select:none; gap:1rem; }
.faq-q .ico { color:var(--terra); font-size:1.3rem; flex-shrink:0; transition:transform .3s; }
.faq-item.open .faq-q .ico { transform:rotate(45deg); }
.faq-a { font-size:.87rem; line-height:1.75; color:var(--mid); font-weight:300; max-height:0; overflow:hidden; transition:max-height .4s ease,padding .3s; }
/* 250px bastava su desktop ma tagliava le risposte più lunghe su mobile,
   dove lo stesso testo va a capo su più righe (segnalato). */
.faq-item.open .faq-a { max-height:700px; padding-bottom:1.2rem; }

/* ═══ FOOTER ═══ */
footer { background:var(--navy); width:100%; padding:2.8rem var(--mx) 1.6rem; }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2.5rem; margin-bottom:1.6rem; }
.footer-logo-name { font-family:var(--serif); font-size:1.3rem; color:#fff; margin-bottom:.25rem; }
.footer-logo-role { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:1rem; }
.footer-about { font-size:.83rem; color:rgba(255,255,255,.38); line-height:1.75; font-weight:300; }
.footer-col-title { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.28); margin-bottom:1.1rem; font-weight:500; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.55rem; }
.footer-col a { font-size:.83rem; color:rgba(255,255,255,.48); transition:color .2s; }
.footer-col a:hover { color:var(--teal-lt); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:1rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; }
.footer-col a { display:inline-flex; align-items:center; gap:.5rem; }
.footer-col a i { font-size:14px; color:rgba(255,255,255,.4); }
.footer-bottom p { font-size:.74rem; color:rgba(255,255,255,.2); }

/* ═══ PAGINE INTERNE ═══ */
/* Il padding scala con l'altezza della finestra invece di un valore fisso — la
   dimensione massima è già raggiunta a ~950px di altezza utile (vedi nota su
   .hero-img in fondo al file), non solo alla piena risoluzione dello schermo. */
.page-hero { background:var(--navy); width:100%; padding:clamp(20px, calc(30vh - 205px), 80px) var(--mx) clamp(16px, calc(24vh - 164px), 64px); text-align:center; }
.page-hero .eyebrow { color:var(--teal-lt); }
/* min(4vw,7vh): il titolo segue il vincolo più stretto tra larghezza e altezza,
   così su schermi larghi ma bassi si riduce insieme al resto invece di restare
   sempre alla dimensione massima (prima seguiva solo la larghezza). */
.page-hero h1 { font-family:var(--serif); font-size:clamp(1.8rem, min(4vw,7vh), 3.6rem); font-weight:300; color:#fff; margin-bottom:clamp(8px, calc(2.4vh - 10px), 12.8px); }
.page-hero h1 em { font-style:italic; color:var(--terra-lt); }
/* max-width più largo di quanto serva ai testi brevi: evita che un sottotitolo
   più lungo (es. chi-sono) vada a capo su due righe e renda quella fascia più
   alta delle altre pagine — a parità di lunghezza del testo, restano tutte
   della stessa altezza. */
.page-hero p { font-size:clamp(.82rem, 1.8vh, .98rem); color:rgba(255,255,255,.55); max-width:800px; margin:0 auto; font-weight:300; line-height:1.75; }
.breadcrumb { background:var(--cream); width:100%; padding:.75rem var(--mx); font-size:.75rem; color:var(--light); display:flex; align-items:center; gap:.5rem; }
.breadcrumb + section,
.breadcrumb + div { padding-top:2.5rem !important; }
.breadcrumb a { color:var(--terra); }

/* ═══ ANIMAZIONI ═══ */
.fi { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.fi.on { opacity:1; transform:none; }

/* ═══ HAMBURGER ═══ */
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.5rem; }
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--mid); border-radius:2px; transition:all .3s; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ═══ TOPBAR nascosta ═══ */
.topbar { display:none; }

/* ═══ RESPONSIVE TABLET ≤1024px ═══ */
@media (max-width:1024px) {
  :root { --mx:3rem; }
  .hero-outer { padding:2rem var(--mx); }
  .intro-grid,.come-grid,.faq-grid { grid-template-columns:1fr; gap:3rem; }
  .intro-grid img { margin-top:0; }
  .services-grid { grid-template-columns:1fr; }
  .perche-grid { grid-template-columns:repeat(2,1fr); }
  .testi-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  section { padding:4.5rem 0; }
  .breadcrumb + section,
  .breadcrumb + div { padding-top:2rem !important; }
}

/* ═══ RESPONSIVE MOBILE ≤768px ═══ */
@media (max-width:768px) {
  :root { --mx:1.2rem; }
  nav { padding:0 var(--mx); height:64px; }
  .nav-hamburger { display:flex; }
  .nav-links { display:none; position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--cream); flex-direction:column; align-items:stretch; padding:1.5rem 1.5rem 3rem; gap:0; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:999; }
  .nav-links.mobile-open { display:flex; transform:translateZ(0); }
  .nav-links>li>a { display:block; padding:1rem 0; font-size:.95rem; border-bottom:1px solid var(--sand); text-transform:none; letter-spacing:0; }
  .nav-links>li>a::after { display:none; }
  .nav-drop { position:static; box-shadow:none; border:none; padding:0 0 .5rem 1rem; display:none; background:transparent; }
  .nav-links>li:hover .nav-drop { display:none; }
  .nav-links>li.drop-open .nav-drop { display:block; }
  .nav-cta { margin-top:1rem; text-align:center; padding:.9rem!important; border-radius:12px!important; }
  .hero-h1 { font-size:2rem; }
  .hero-p { font-size:.92rem; }
  .hero-btns { flex-direction:column; }
  .hero-trust { gap:1.5rem; flex-wrap:wrap; }
  .services-grid,.perche-grid,.testi-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:1.25rem 1.5rem; }
  .footer-grid > *:first-child { grid-column:1 / -1; }
  .footer-col-title { margin-bottom:.6rem; }
  section { padding:3.5rem 0; }
  .h2 { font-size:1.7rem; }
  .footer-bottom { flex-direction:column; gap:.4rem; }
}

/* ═══ SMALL MOBILE ≤420px ═══ */
@media (max-width:420px) {
  .hero-h1 { font-size:1.75rem; }
}

/* ═══ IL MIO APPROCCIO ═══ */
#approccio { background: var(--sand); }
.approccio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.approccio-foto-wrap {
  width: 100%;
  min-height: 320px;
  border-radius: 20px;
  overflow: hidden;
}
.come-foto-wrap {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border-radius: 20px;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .approccio-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .approccio-right { order: -1; }
  .approccio-foto-wrap, .come-foto-wrap { min-height: 280px; }
}
@media (max-width: 768px) {
  .approccio-foto-wrap, .come-foto-wrap { min-height: 220px; }
}

/* ── Hero credenziale e CTA note ── */
.hero-credenziale {
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--light);
  margin-bottom: 1.2rem;
  font-weight: 400;
}
.hero-cta-note {
  font-size: .8rem;
  color: var(--light);
  margin-top: .75rem;
  font-weight: 300;
}

/* ── Intro home: foto viso ── */
.intro-viso-wrap {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--sand);
}

/* ── Valori narrativi chi-sono ── */
.valori-narrativo p { font-size: 1rem; }

/* ── HERO NEW (colonna singola) ─────────────────────────── */
.hero-outer--new {
  padding: 56px 0 0;
  margin-bottom: 6rem;
}
.hero-new {
  padding-left: var(--mx);
  padding-right: var(--mx);
}
/* Testo sopra e sotto la foto — larghezza contenuta */
.hero-text-top,
.hero-text-bottom {
  max-width: 660px;
}
.hero-new .hero-eyebrow {
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: clamp(8px, calc(4vh - 22px), 16px);
  color: #5E5C58;
  letter-spacing: .08em;
  text-transform: none;
  font-weight: 400;
}
.hero-new .hero-eyebrow::before { display:none; }
.hero-new .hero-h1 {
  /* Prima seguiva solo la larghezza (3.8vw), quindi restava sempre alla
     dimensione massima anche quando l'altezza si riduceva — risultando
     sproporzionato rispetto al resto, che invece si adattava. Ora segue
     anche l'altezza (min tra i due), tarato per restare invariato su una
     finestra a piena risoluzione reale (~1000px di altezza utile). */
  font-size: clamp(2rem, min(3.8vw, calc(5.33vh - 2.1px)), 3.2rem);
  line-height: 1.12;
  margin-bottom: clamp(14px, calc(11vh - 68.5px), 36px);
  font-weight: 400;
  color: var(--charcoal);
  white-space: nowrap;
}
.hero-img-wrap {
  margin-bottom: clamp(14px, calc(11vh - 68.5px), 36px);
  border-radius: 16px;
  overflow: hidden;
  margin-left: 0;
  width: 100%;
  position: relative;
}
.hero-img {
  width: 100%;
  /* Raggiunge la dimensione massima già a ~864px di altezza utile (il caso
     comune con scala Windows 125% su schermi 1080p) invece che solo su
     finestre molto più alte: prima veniva tagliata troppo proprio nel caso
     più comune. Sotto quella soglia si riduce comunque, ma meno di prima. */
  height: clamp(260px, calc(67.1vh - 210px), 370px);
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.hero-new .hero-p {
  font-size: 18px;
  line-height: 1.6;
  max-width: 520px;
  margin-bottom: clamp(14px, calc(9vh - 53.5px), 32px);
  color: var(--mid);
  font-weight: 300;
}
.hero-new .hero-btns {
  margin-bottom: clamp(16px, calc(12vh - 74px), 40px);
  gap: 12px;
}
.hero-divider {
  height: 1px;
  background: #e0ddd5;
  margin: 0 0 24px 0;
  max-width: none;
  width: 100%;
}
.hero-new .hero-cta-note {
  font-size: 14px;
  color: var(--light);
  margin-bottom: 24px;
}
.hero-new .hero-trust {
  gap: 26px;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
@media (max-width: 768px) {
  .hero-outer--new { padding: 48px 0 0; }
  .hero-new .hero-h1 { white-space: normal; font-size: 2rem; }
  .hero-img-wrap { margin-right: calc(-1 * var(--mx)); }
  .hero-img { height: 240px; }
  .hero-new .hero-p { font-size: 16px; }
}

/* ── FIX MOBILE: griglie chi-sono / servizi con stile inline ── */
@media (max-width: 768px) {
  /* Chi sono — "Da dove nasce il mio lavoro" (foto + testo) */
  .intro-grid { grid-template-columns:1fr !important; gap:2rem !important; }
  .intro-grid img { margin-top:0 !important; max-width:220px; margin-left:auto; margin-right:auto; display:block; }

  /* Chi sono — Formazione e specializzazioni */
  .formazione-grid { grid-template-columns:1fr !important; padding-right:0 !important; gap:1.5rem !important; }

  /* Servizi — Step 1/2/3 (sezione "Il processo") */
  .processo-grid { grid-template-columns:1fr !important; gap:1.25rem !important; margin-top:2rem !important; }
}

/* ── COOKIE BANNER ── */
#cookieBanner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2000;
  background: var(--cream);
  border-top: 1px solid var(--sand-mid);
  box-shadow: 0 -8px 30px rgba(0,0,0,.1);
  padding: 1.5rem var(--mx);
  transform: translateY(0);
  transition: transform .35s ease, opacity .35s ease;
}
#cookieBanner.cookie-hide { transform: translateY(100%); opacity: 0; }
.cookie-inner { max-width: 900px; margin: 0 auto; position: relative; }
.cookie-title { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; color: var(--charcoal); margin: 0 0 .5rem; }
.cookie-text { font-size: .85rem; color: var(--mid); line-height: 1.6; margin: 0 0 1.1rem; max-width: 680px; }
.cookie-text a { color: var(--navy); text-decoration: underline; }
.cookie-btns { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.cookie-btns .btn { padding: .7rem 1.6rem; font-size: .85rem; }
.cookie-settings-link { background: none; border: none; font-size: .82rem; color: var(--mid); text-decoration: underline; cursor: pointer; padding: .5rem .3rem; }
.cookie-settings-link:hover { color: var(--charcoal); }
.cookie-close { position: absolute; top: -.4rem; right: 0; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--light); cursor: pointer; padding: .2rem .4rem; }
.cookie-close:hover { color: var(--charcoal); }
@media (max-width: 600px) {
  #cookieBanner { padding: 1.2rem 1.2rem; }
  .cookie-btns { flex-direction: column; }
  .cookie-btns .btn { width: 100%; text-align: center; }
  .cookie-settings-link { width: 100%; text-align: center; }
}

/* ── MODALE "COMPLETA IL PROFILO" (codice fiscale mancante) ──
   Iniettato da js/main.js su qualunque pagina pubblica, non solo in fase
   di prenotazione: chi arriva da Google non ha codice fiscale (Google non
   lo fornisce) e serve subito per fattura/proforma. Nessun pulsante
   "chiudi": deve essere un vero blocco, non un banner ignorabile. */
#cfGateModal {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(30,20,10,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
#cfGateModal .cfg-card { background: var(--white); border-radius: var(--r); box-shadow: var(--sh-lg); max-width: 440px; width: 100%; padding: 2.2rem; }
#cfGateModal .cfg-title { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; color: var(--navy); margin: 0 0 .6rem; }
#cfGateModal .cfg-text { font-size: .86rem; color: var(--mid); line-height: 1.6; margin: 0 0 1.4rem; }
#cfGateModal .cfg-foot { text-align: center; margin-top: 1.2rem; }
#cfGateModal .cfg-logout { background: none; border: none; font-size: .78rem; color: var(--light); text-decoration: underline; cursor: pointer; font-family: var(--sans); }
#cfGateModal .cfg-logout:hover { color: var(--mid); }
/* .cfg-field/.cfg-label/.cfg-input/.cfg-msg sono globali (non scoped al modale):
   lo stesso pannello "Calcola codice fiscale" (setupCfCalculator in js/main.js) e
   il nuovo autocompletamento città→CAP compaiono anche fuori dal gate, es. nel
   form di registrazione tradizionale in accedi.html. */
.cfg-field { margin-bottom: 1rem; }
.cfg-label { display: block; font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--mid); margin-bottom: .35rem; }
.cfg-input { width: 100%; padding: .72rem 1rem; border-radius: 10px; border: 1.5px solid var(--sand-mid); background: var(--cream); font-family: var(--sans); font-size: .88rem; color: var(--charcoal); outline: none; transition: border-color .2s; }
.cfg-input:focus { border-color: var(--navy); background: var(--white); }
.cfg-msg { font-size: .82rem; margin-top: .6rem; display: none; }
.cfg-msg.err { color: #C0392B; }
@media (max-width: 600px) {
  #cfGateModal .cfg-card { padding: 1.6rem; }
}

/* ── STATO CAMPO (spunta verde / asterisco rosso "compilare") ──
   Riusato sia dal gate di registrazione (js/main.js) sia dal form di
   registrazione tradizionale (accedi.html): un piccolo indicatore accanto
   all'etichetta mostra se il campo è già valido o va ancora compilato, e
   al tentativo di salvare i campi mancanti si evidenziano in rosso. */
.fstatus { font-size: .74rem; font-weight: 600; margin-left: .4rem; }
.fstatus-ok { color: var(--teal); }
.fstatus-missing { color: #E05555; }
.field-invalid { border-color: #E05555 !important; background: #FFF5F5 !important; }
/* Su una label (caso checkbox — il quadratino nativo è troppo piccolo per
   un bordo visibile) l'evidenza va sul contenitore, con box-shadow invece
   di un vero bordo per non spostare il layout. */
label.field-invalid { box-shadow: 0 0 0 1.5px #E05555; border-radius: 8px; background: #FFF5F5; }