:root{
  --ivory:#FAF6ED;
  --beige:#F2EADB;
  --taupe:#6A625A;
  --brown:#5A524B;
  --terra:#C26B4F;
  --terra-dark:#A8543B;
  --line:#DDD2C1;
  --soft:#F7F1E6;
  --white:#FFFDF9;
  --max:1180px;
  --nav-height:82px;
  --shadow:0 18px 60px rgba(74,61,53,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
main[id],main [id]{scroll-margin-top:calc(var(--nav-height) + 17px)}
body{
  margin:0;
  background:var(--ivory);
  color:var(--taupe);
  font-family:"DM Sans",Arial,sans-serif;
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{width:min(calc(100% - 48px),var(--max));margin:0 auto}
.eyebrow{
  font-size:.77rem;
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--terra-dark);
  margin:0 0 18px;
}
h1,h2,h3,.serif{font-family:"Lora",Georgia,serif;color:var(--brown);font-weight:500;line-height:1.16}
h1{font-size:clamp(3.1rem,7.2vw,6.8rem);letter-spacing:-.035em;margin:0}
h2{font-size:clamp(2.15rem,4.7vw,4.25rem);letter-spacing:-.025em;margin:0 0 28px}
h3{font-size:clamp(1.55rem,2.4vw,2.25rem);margin:0 0 16px}
p{margin:0 0 18px}
strong{font-weight:600}
.accent{color:var(--terra)}
.cta{
  display:inline-flex;align-items:center;gap:.6em;
  color:var(--terra-dark);font-weight:600;
  border-bottom:1px solid rgba(168,84,59,.35);
  padding-bottom:3px;
}
.cta::after{content:"→";transition:transform .2s ease}
.cta:hover::after{transform:translateX(4px)}
.cta-button{
  display:inline-flex;align-items:center;gap:.55em;
  background:var(--terra-dark);color:var(--ivory);
  border-radius:999px;padding:13px 19px;font-size:.93rem;font-weight:600;
}
.cta-button::after{content:"→"}

/* NAV */
.site-header{
  position:sticky;top:0;z-index:30;
  background:rgba(250,246,237,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(90,82,75,.09);
}
.nav{height:var(--nav-height);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Lora",Georgia,serif;color:var(--brown);font-size:1.34rem}
/* Original logo alpha bounds: (377,267)–(649,663) in the 1024px PNG.
   Preserve its exact silhouette and accent; apply the approved site colour. */
.brand-mark{
  width:26px;height:28px;position:relative;display:inline-block;flex:none;
  background:var(--terra);
  -webkit-mask:url('./assets/originals/logo-serenamente-verde.png') center -18.77px / 72px 72px no-repeat;
  mask:url('./assets/originals/logo-serenamente-verde.png') center -18.77px / 72px 72px no-repeat;
}
.menu{display:flex;align-items:center;gap:28px;font-size:.88rem;color:var(--brown)}
.menu a{position:relative}
.dropdown{position:relative;padding:28px 0}
.dropdown-panel{display:none;position:absolute;top:66px;left:-22px;min-width:255px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow)}
.dropdown:hover .dropdown-panel{display:block}
.dropdown-panel a{display:block;padding:10px 12px;border-radius:9px;color:var(--taupe)}
.dropdown-panel a:hover{background:var(--soft)}
.mobile-toggle{display:none;border:0;background:transparent;font-size:1.5rem;color:var(--brown);cursor:pointer;min-width:44px;min-height:44px}
.mobile-panel{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - var(--nav-height) - 1px);max-height:calc(100dvh - var(--nav-height) - 1px);overflow-y:auto;overscroll-behavior:contain;background:var(--ivory);border-top:1px solid var(--line);padding:10px 24px 24px}
.mobile-panel a{padding:10px 0;min-height:44px;color:var(--brown)}
.mobile-panel .sub{padding-left:18px;font-size:.9rem;color:var(--taupe)}

/* HERO */
.hero{min-height:820px;display:grid;align-items:center;text-align:center;padding:90px 0 86px}
.hero-inner{max-width:980px;margin:0 auto}
.hero .eyebrow{margin-bottom:30px}
.hero h1{max-width:900px;margin:0 auto 18px}
.hero-kicker{font-family:"Lora",Georgia,serif;font-style:italic;color:var(--terra);font-size:clamp(1.5rem,3vw,2.35rem);margin-bottom:34px}
.hero-copy{max-width:715px;margin:0 auto 32px;font-size:1.08rem}
.hero-note{font-size:.88rem;margin-top:10px;color:#7a7168}

/* QUICK DOORS + TRUST */
.quick-doors{padding:0 0 62px}
.door-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.door-row a{padding:24px 16px;text-align:center;color:var(--brown);font-weight:600;position:relative}
.door-row a:not(:last-child){border-right:1px solid var(--line)}
.door-row a::after{content:"→";margin-left:8px;color:var(--terra-dark)}
.trust-strip{background:transparent;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 8px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap;font-size:.88rem;color:var(--brown);margin-top:30px}
.trust-strip span:not(:last-child)::after{content:"·";margin-left:18px;color:var(--terra)}

/* METHOD */
.section{padding:126px 0}
.section.beige{background:var(--beige)}
.method-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start}
.method-intro{max-width:560px}
.method-intro h2{font-size:clamp(2.3rem,4vw,3.75rem)}
.method-intro .lead{font-family:"Lora",Georgia,serif;font-size:clamp(1.6rem,2.6vw,2.25rem);line-height:1.35;color:var(--brown)}
.method-steps{border-top:1px solid var(--line)}
.method-step{padding:28px 0;border-bottom:1px solid var(--line)}
.method-step .eyebrow{margin-bottom:8px}
.method-step p{margin:0}
/* Variante «Il percorso»: due colonne 1.05/.95, filetto verticale al posto di
   quello orizzontale, passi centrati sull'altezza della colonna di testo.
   Agganciata a #metodo, che hanno soltanto la Home e Per te: Il metodo (sei
   sezioni) e Contatti usano .method-grid con la proporzione .8/1.2, dove la
   colonna larga serve al testo lungo e al modulo, e restano come sono. */
#metodo .method-grid{grid-template-columns:1.05fr .95fr;align-items:stretch}
#metodo .method-intro{max-width:540px}
#metodo .method-intro .lead{margin-bottom:22px}
#metodo .method-steps{border-top:0;border-left:1px solid var(--line);padding-left:48px;
  align-self:stretch;display:flex;flex-direction:column;justify-content:center}
#metodo .method-step:first-child{padding-top:0}
#metodo .method-step:last-child{border-bottom:0;padding-bottom:0}

/* MIRROR */
.mirror{padding:155px 0;text-align:center}
.mirror-inner{max-width:920px;margin:0 auto}
.mirror h2{font-size:clamp(3rem,5.8vw,5.7rem);margin-bottom:22px}
.mirror .statement{font-family:"Lora",Georgia,serif;font-style:italic;color:var(--terra);font-size:clamp(1.9rem,3.4vw,3.2rem);line-height:1.32;margin:0 auto 40px;max-width:850px}
.mirror .body{max-width:700px;margin:0 auto 30px}
.mirror .bridge{font-family:"Lora",Georgia,serif;font-style:italic;color:var(--terra-dark);max-width:760px;margin:44px auto 0}

/* PERMISSION */
.dark{background:var(--brown);color:var(--ivory)}
.dark h2,.dark h3,.dark .serif{color:var(--ivory)}
.permission{padding:135px 0}
.permission-grid{display:grid;grid-template-columns:1fr .9fr;gap:110px;align-items:center}
.permission-copy{max-width:610px}
.permission .eyebrow{color:#E7B3A1}
.permission-manifesto{font-family:"Lora",Georgia,serif;font-size:clamp(2.1rem,4.1vw,3.9rem);line-height:1.23;margin:0 0 32px;color:var(--ivory)}
.permission-question{font-family:"Lora",Georgia,serif;font-style:italic;color:#F2D3C8;font-size:1.25rem}

/* PERSON */
.person{padding:126px 0}
.person-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:90px;align-items:center}
.portrait-card{min-height:520px;border:1px solid var(--line);border-radius:34px;background:#fff;position:relative;overflow:hidden}
.portrait-card img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.practice-badge{display:inline-flex;align-items:baseline;gap:12px;margin-bottom:28px}
.practice-badge .n{font-family:"Lora",Georgia,serif;font-size:4.4rem;color:var(--terra);line-height:1}
.practice-badge .t{text-transform:uppercase;font-size:.78rem;letter-spacing:.16em;color:var(--brown);font-weight:600}
.credentials{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:27px 0;text-align:center}
.pill{border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-size:.78rem;color:var(--brown);background:var(--white)}
.person-note{font-size:.86rem;color:#7b7168}

/* PATHS */
.paths{padding:126px 0;background:var(--beige)}
.paths-head{max-width:700px;margin-bottom:50px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:780px}
.card{--pad:34px;--lift:0px;background:var(--white);border:1px solid var(--line);border-radius:28px;padding:var(--pad);padding-bottom:calc(var(--pad) - var(--lift));min-height:390px;display:flex;flex-direction:column}
.card.featured{--lift:12px;background:var(--terra-dark);border-color:var(--terra-dark);color:var(--ivory);transform:translateY(calc(-1 * var(--lift)))}
.card.featured h3,.card.featured .eyebrow,.card.featured .cta{color:var(--ivory)}
.card.featured .cta{border-bottom-color:rgba(255,253,249,.6)}
.card .eyebrow{margin-bottom:14px}
.card h3{margin-bottom:18px}
.card p{font-size:.94rem}
.card .cta{margin-top:auto;align-self:flex-start}
.card .claim{margin-top:auto}
.card .claim+.cta{margin-top:0}
.card .meta{font-size:.73rem;letter-spacing:.09em;text-transform:uppercase;margin:0 0 14px;opacity:.85}

/* SCHOOLS */
.schools{padding:140px 0}
.schools-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center}
.school-card{border:1px solid var(--brown);border-radius:30px;padding:48px;background:var(--white);box-shadow:var(--shadow)}
.school-card h3{font-size:clamp(2rem,3.2vw,3rem)}
.company-line{margin-top:32px;padding-top:28px;border-top:1px solid var(--line);font-size:.92rem}

/* PEACE */
.peace{padding:145px 0;text-align:center}
.peace .brand-mark{margin:0 auto 42px;transform:scale(1.25)}
.peace-inner{max-width:900px;margin:0 auto}
.peace p{font-family:"Lora",Georgia,serif;font-size:clamp(1.45rem,2.6vw,2.25rem);line-height:1.55;margin-bottom:32px;color:var(--ivory)}
.peace p.italic{font-style:italic;color:#F3D7CE}
.peace p.final{color:#F0B5A2;font-size:clamp(1.75rem,3.3vw,2.8rem);line-height:1.4;margin-top:42px}

/* CLOSING */
.closing{padding:150px 0 105px;text-align:center}
.closing-inner{max-width:890px;margin:0 auto}
.closing h2{font-size:clamp(3rem,6vw,5.9rem);margin-bottom:14px}
.closing .second{font-family:"Lora",Georgia,serif;font-style:italic;color:var(--terra);font-size:clamp(2rem,3.9vw,3.5rem);margin-bottom:48px}
.closing-note{font-family:"Lora",Georgia,serif;font-style:italic;margin-top:23px}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:44px 0 54px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}
.footer-brand{display:flex;align-items:center;gap:11px;font-family:"Lora",Georgia,serif;font-size:1.6rem;color:var(--brown);margin-bottom:6px}
.footer-copy{font-size:.86rem}
.footer-links{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap;font-size:.82rem;color:var(--brown)}
.footer-small{font-size:.74rem;margin-top:16px;color:var(--taupe)}

@media(max-width:900px){
  body{font-size:17px}
  .wrap{width:min(calc(100% - 32px),var(--max))}
  .menu{display:none}
  .mobile-toggle{display:block}
  .mobile-panel.open{display:grid;gap:4px}
  .brand{min-height:44px}
  .hero{min-height:720px;padding:82px 0 64px}
  .door-row{grid-template-columns:1fr}
  .door-row a:not(:last-child){border-right:0;border-bottom:1px solid var(--line)}
  .trust-strip{display:grid;gap:4px;text-align:center}
  .trust-strip span:not(:last-child)::after{content:"";margin:0}
  .method-grid,.permission-grid,.person-grid,.schools-grid{grid-template-columns:1fr;gap:48px}
  /* le regole #metodo qui sopra hanno specificita' maggiore: il collasso a una
     colonna e il ritorno al filetto orizzontale vanno ripetuti per loro. */
  #metodo .method-grid{grid-template-columns:1fr}
  #metodo .method-steps{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:32px;display:block}
  #metodo .method-step:first-child{padding-top:28px}
  .section,.person,.paths,.schools{padding:92px 0}
  .mirror{padding:110px 0}
  .permission{padding:100px 0}
  .cards{grid-template-columns:1fr;max-width:none}
  .card{min-height:auto}
  .card.featured{--lift:0px}
  .portrait-card{width:100%;max-width:430px;min-height:430px;justify-self:center;order:2}
  .person-copy{order:1}
  .peace{padding:105px 0}
  .closing{padding:110px 0 80px}
  .footer-grid{grid-template-columns:1fr}
  .footer-links{justify-content:flex-start}
}
@media(max-width:560px){
  :root{--nav-height:70px}
  h1{font-size:3.25rem}
  .hero-kicker{font-size:1.45rem}
  .hero-copy{font-size:1rem}
  .brand{font-size:1.2rem}
  .method-intro .lead{font-size:1.55rem}
  .mirror h2{font-size:3.15rem}
  .mirror .statement{font-size:1.85rem}
  .school-card{padding:28px}
  .card{--pad:28px}
  .peace p{font-size:1.45rem}
  .peace p.final{font-size:1.9rem}
}

/* ==========================================================================
   Banner consenso cookie (iubenda) — allineamento al design system
   --------------------------------------------------------------------------
   Il banner vive nel DOM della pagina (#iubenda-cs-banner), non in un iframe,
   quindi possiamo ricolorarlo da qui senza dipendere dal piano iubenda.
   Due accortezze:
   1) iubenda inietta i propri stili in un <style> dopo il nostro foglio e usa
      !important ovunque, quindi ogni regola qui sotto deve avere specificita'
      superiore alla sua: da qui il prefisso lungo su ogni selettore.
   2) .iubenda-cs-content riceve dal widget uno stile inline con !important
      (sfondo bianco, testo nero) che nessun foglio d'autore puo' sovrascrivere;
      lo copriamo dipingendo il figlio .iubenda-cs-rationale.
   Il badge "Created with iubenda" resta visibile: e' richiesto dal piano.
   ========================================================================== */

/* Card: staccata dalla navigazione, bordi e ombra del sito. */
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-content{
  margin:calc(var(--nav-height) + 14px) 16px 16px !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  box-shadow:var(--shadow) !important;
}
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-content .iubenda-cs-rationale{
  background:var(--white) !important;
  padding:26px 28px 22px !important;
}

/* Testo. */
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-banner-content{
  color:var(--brown) !important;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.65 !important;
  padding:0 0 18px !important;
}
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-banner-content b,
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-banner-content strong{
  color:var(--brown) !important;
  font-weight:600 !important;
}
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-banner-content a{
  color:var(--terra-dark) !important;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif !important;
  font-weight:500 !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}

/* Pulsanti: stessa forma delle CTA del sito. Accetta e Rifiuta hanno peso
   visivo identico, cosi' rifiutare non e' piu' faticoso che accettare. */
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:12px !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin:0 !important;
}
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group-consent{
  display:flex !important;
  gap:12px !important;
}
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group button{
  font-family:'DM Sans',system-ui,-apple-system,sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
  border-radius:999px !important;
  padding:11px 26px !important;
  margin:0 !important;
  width:auto !important;
  cursor:pointer !important;
  transition:background-color .18s ease,border-color .18s ease !important;
}
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group button.iubenda-cs-accept-btn,
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group button.iubenda-cs-reject-btn{
  background-color:var(--terra-dark) !important;
  color:var(--white) !important;
  border:1px solid var(--terra-dark) !important;
}
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group button.iubenda-cs-accept-btn:hover,
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group button.iubenda-cs-reject-btn:hover{
  background-color:var(--terra) !important;
  border-color:var(--terra) !important;
}
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group button.iubenda-cs-customize-btn{
  background-color:var(--beige) !important;
  color:var(--brown) !important;
  border:1px solid var(--line) !important;
}
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group button.iubenda-cs-customize-btn:hover{
  background-color:var(--soft) !important;
}
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group button:focus-visible{
  outline:2px solid var(--terra-dark) !important;
  outline-offset:2px !important;
}

/* Badge iubenda: lasciato visibile, solo smorzato nei bordi. */
#iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-brand-badge{
  background-color:var(--white) !important;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif !important;
  font-size:13px !important;
  border:1px solid var(--line) !important;
  border-radius:8px !important;
  color:var(--taupe) !important;
}

@media (max-width:640px){
  #iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-content{
    margin:calc(var(--nav-height) + 10px) 12px 12px !important;
  }
  #iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-content .iubenda-cs-rationale{
    padding:20px 20px 18px !important;
  }
  #iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group{
    flex-direction:column-reverse !important;
    align-items:stretch !important;
  }
  #iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group-consent{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
  #iubenda-cs-banner.iubenda-cs-visible .iubenda-cs-container .iubenda-cs-opt-group button{
    padding:12px 18px !important;
    width:100% !important;
  }
}