/* ============ Font ospitati sul sito (nessuna chiamata a Google) ============
   Fraunces (titoli, asse opsz + wght) e Karla (testo, asse wght): font variabili
   con licenza SIL OFL, sottoinsieme latino (copre l'italiano). Fonte: pacchetti
   @fontsource-variable/fraunces e @fontsource-variable/karla. */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Karla';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============ Design tokens ============ */
  :root{
    --paper: #FAF3EC;
    --paper-soft: #F1E6D8;
    --ink: #2B2130;
    --ink-soft: #6B5C6C;
    --sage: #6E8862;
    --sage-dark: #4F6B45;
    --rose: #C68C7C;
    --rose-soft: #F1DFD6;
    --sand: #EFDFC4;
    --line: rgba(43,33,48,0.15);
    --shadow: rgba(43,33,48,0.10);
    --focus: #4F6B45;
    --on-sage: #FFFFFF;
    --poppy: #C0392B;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper: #221A26;
      --paper-soft: #2B2130;
      --ink: #F3E9DC;
      --ink-soft: #CBBBC7;
      --sage: #9BB98B;
      --sage-dark: #7C9473;
      --rose: #DDA998;
      --rose-soft: #3A2A2E;
      --sand: #3A2E30;
      --line: rgba(243,233,220,0.18);
      --shadow: rgba(0,0,0,0.35);
      --focus: #9BB98B;
      --on-sage: #221A26;
      --poppy: #E3705C;
    }
  }
  :root[data-theme="dark"]{
    --paper: #221A26;
    --paper-soft: #2B2130;
    --ink: #F3E9DC;
    --ink-soft: #CBBBC7;
    --sage: #9BB98B;
    --sage-dark: #7C9473;
    --rose: #DDA998;
    --rose-soft: #3A2A2E;
    --sand: #3A2E30;
    --line: rgba(243,233,220,0.18);
    --shadow: rgba(0,0,0,0.35);
    --focus: #9BB98B;
    --on-sage: #221A26;
    --poppy: #E3705C;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }

  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Karla', sans-serif;
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    line-height:1.15;
    margin:0 0 .5em;
    letter-spacing:-0.01em;
  }
  h1{font-weight:400;}
  p{margin:0 0 1em;}
  a{color:inherit;}
  img,svg{max-width:100%;display:block;}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px;}
  section{padding:110px 0;overflow-x:hidden;}
  @media (max-width:720px){ section{padding:72px 0;} }

  .eyebrow-free{ /* placeholder to remind: no ALL-CAPS eyebrows used anywhere */ }

  .measure{max-width:62ch;}
  .measure-wide{max-width:70ch;}

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
    outline:2.5px solid var(--focus);
    outline-offset:3px;
  }

  /* ============ Header ============ */
  /* Il blur sta su ::before: un backdrop-filter sull'header stesso farebbe
     diventare l'header il "contenitore" degli elementi position:fixed (il menu mobile). */
  header{
    position:sticky; top:0; z-index:50;
    border-bottom:1px solid var(--line);
  }
  header::before{
    content:'';position:absolute;inset:0;z-index:-1;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 28px;max-width:1120px;margin:0 auto;
  }
  .brand{
    font-family:'Fraunces', serif; font-size:1.15rem; font-weight:500;
    text-decoration:none; color:var(--ink); display:flex; align-items:center; gap:10px;
    position:relative; z-index:2; white-space:nowrap; min-width:0;
  }
  .brand img{width:28px;height:28px;flex:none;display:block;}
  .navlinks{display:flex;gap:34px;list-style:none;margin:0;padding:0;align-items:center;}
  .navlinks a{
    text-decoration:none;font-size:.97rem;color:var(--ink-soft);
    position:relative;padding-bottom:3px;
  }
  .navlinks a::after{
    content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;
    background:var(--sage-dark);transition:right .25s ease;
  }
  .navlinks a:hover{color:var(--ink);}
  .navlinks a:hover::after{right:0;}
  .nav-cta{
    background:var(--sage-dark);color:var(--on-sage);text-decoration:none;
    padding:10px 20px;border-radius:22px 8px 22px 8px;font-size:.93rem;font-weight:600;
    white-space:nowrap;
  }
  .navlinks a.nav-cta{color:var(--on-sage);padding-bottom:10px;}
  .navlinks a.nav-cta::after{display:none;}
  .nav-cta:hover{background:var(--sage);}
  .nav-cta-long, .nav-contact{display:none;}
  .burger{display:none;}

  /* ---- Menu mobile: pannello a schermo intero ---- */
  @media (max-width:860px){
    :root{--nav-h:64px;}
    .nav{min-height:var(--nav-h);padding:0 22px;}
    .brand{font-size:clamp(.92rem, 4.3vw, 1.06rem);gap:8px;}
    .brand img{width:26px;height:26px;}

    .burger{
      display:flex;flex-direction:column;justify-content:center;align-items:center;
      width:48px;height:48px;margin-right:-12px;padding:0;
      background:none;border:none;cursor:pointer;color:var(--ink);
      position:relative;z-index:2;-webkit-tap-highlight-color:transparent;
    }
    .burger span{
      display:block;width:24px;height:2px;margin:3px 0;background:currentColor;border-radius:2px;
      transition:transform .25s ease, opacity .2s ease;
    }
    .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
    .burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
    .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

    .navlinks{
      position:fixed;inset:0;z-index:1;
      flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
      padding:calc(var(--nav-h) + 8px) 22px calc(28px + env(safe-area-inset-bottom, 0px));
      background:var(--paper);
      overflow-y:auto;overscroll-behavior:contain;
      opacity:0;visibility:hidden;transform:translateY(-8px);
      transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    }
    .navlinks.open{
      opacity:1;visibility:visible;transform:none;
      transition:opacity .22s ease, transform .22s ease, visibility 0s;
    }
    .navlinks li{width:100%;border-bottom:1px solid var(--line);}
    .navlinks a{
      display:flex;align-items:center;justify-content:space-between;gap:16px;
      min-height:64px;padding:14px 2px;
      font-family:'Fraunces', serif;font-size:1.55rem;font-weight:500;letter-spacing:-0.01em;
      color:var(--ink);-webkit-tap-highlight-color:transparent;
    }
    /* la sottolineatura desktop diventa una freccia */
    .navlinks a::after{
      position:static;flex:none;width:10px;height:10px;background:none;
      border-top:2px solid var(--rose);border-right:2px solid var(--rose);
      transform:rotate(45deg);transition:none;
    }
    .navlinks a:hover::after{right:auto;}
    .navlinks a:active{color:var(--sage-dark);}

    .navlinks li.nav-cta-item{border-bottom:0;margin-top:30px;}
    .navlinks a.nav-cta{
      justify-content:center;gap:0;min-height:58px;padding:16px 24px;
      font-family:'Karla', sans-serif;font-size:1.08rem;font-weight:700;letter-spacing:0;
      border-radius:28px 9px 28px 9px;
    }
    .navlinks a.nav-cta::after{display:none;}
    .navlinks a.nav-cta:active{background:var(--sage);color:var(--on-sage);}
    .nav-cta-long{display:inline;white-space:pre;}

    .navlinks li.nav-contact{
      display:flex;flex-direction:column;align-items:flex-start;
      border-bottom:0;margin-top:auto;padding-top:34px;
    }
    .nav-contact-label{font-size:.92rem;color:var(--ink-soft);margin-bottom:2px;}
    .navlinks .nav-contact a{
      min-height:46px;padding:8px 0;font-family:'Karla', sans-serif;
      font-size:1.05rem;font-weight:600;color:var(--ink);
    }
    .navlinks .nav-contact a::after{display:none;}

    html.menu-open, html.menu-open body{overflow:hidden;}
  }

  /* ============ Hero ============ */
  .hero{padding:80px 0 60px;position:relative;}
  .hero-grid{
    display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
  }
  @media (max-width:860px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1{font-size:clamp(2.3rem, 4.6vw, 3.6rem);}
  .hero .lede{font-size:1.18rem;color:var(--ink-soft);}
  .hero .hero-name{font-size:clamp(1.25rem, 2.2vw, 1.55rem);font-weight:500;line-height:1.3;margin:0 0 20px;}
  .hero .hero-name .hero-role{display:block;margin-top:6px;font-size:.78em;font-weight:600;color:var(--sage-dark);letter-spacing:.02em;}
  .hero-quote{margin:0 0 22px;}
  .hero-quote blockquote{margin:0;}
  .quote-line{display:inline;}
  .hero-quote p{margin:0 auto;font-size:clamp(1.2rem, 2vw, 1.5rem);line-height:1.35;color:var(--ink);
    max-width:22ch;text-align:justify;text-align-last:center;hyphens:auto;-webkit-hyphens:auto;}
  .hero-quote figcaption{
    margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px;
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-dark);font-weight:600;
  }
  .hero-quote figcaption::before,
  .hero-quote figcaption::after{content:"";width:28px;height:1.5px;background:var(--rose);flex:none;}
  .hero .hero-intro{font-size:.98rem;line-height:1.7;padding-left:18px;border-left:2px solid var(--rose-soft);max-width:58ch;}
  .hero-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;}
  .btn-primary{
    background:var(--sage-dark);color:var(--on-sage);text-decoration:none;
    padding:15px 28px;border-radius:26px 8px 26px 8px;font-weight:600;
    display:inline-block;border:none;cursor:pointer;font-size:1rem;font-family:inherit;
    transition:transform .18s ease, background .18s ease;
  }
  .btn-primary:hover{background:var(--sage);transform:translateY(-1px);}
  .btn-whatsapp{
    display:inline-block;text-decoration:none;font-weight:600;font-size:1rem;font-family:inherit;
    color:var(--sage-dark);background:transparent;padding:15px 28px;
    border:1.5px solid var(--sage-dark);border-radius:26px 8px 26px 8px;
    transition:background .18s ease, color .18s ease;
  }
  .btn-whatsapp:hover{background:var(--sage-dark);color:var(--on-sage);}
  .btn-ghost{
    text-decoration:none;color:var(--ink);padding:15px 6px;font-weight:600;
    border-bottom:1.5px solid var(--rose);display:inline-block;
  }
  .hero-art{position:relative;max-width:420px;margin-inline:auto;}
  .hero-art svg{width:100%;height:auto;display:block;}
  /* Animazione al caricamento: i tratti (verde e inchiostro) si "disegnano"
     con lo stesso keyframe di prima (stroke-dashoffset, 2.1s); i colori pieni
     (petali rossi e centro) sfumano subito dopo. pathLength="1" sui path
     rende il dash indipendente dalla lunghezza reale di ogni tratto. */
  .hero-draw .hp-green path,
  .hero-draw .hp-ink path{
    stroke-dasharray:1 2; stroke-dashoffset:1;
    animation:draw 2.1s ease forwards;
  }
  @keyframes draw{to{stroke-dashoffset:0;}}
  @keyframes fadein{to{opacity:1;}}
  .hero-draw .hp-green path{stroke:var(--sage-dark);stroke-width:3.8;}
  .hero-draw .hp-ink path{stroke:var(--ink);stroke-width:3.6;}
  .hero-draw .hp-fill path{fill:#DE3C28;stroke:none;}
  .hero-draw .hp-core path{fill:#2B2130;stroke:none;}
  .hero-draw .hp-photo{opacity:0;animation:fadein 1s ease 1s forwards;}
  /* Gambo e ramificazioni più trasparenti: nel tema chiaro non si confondono col testo */
  .hero-draw .hp-green{opacity:.42;}

  /* Smartphone e tablet (sotto 860px).
     Nome a sinistra, papaveri a destra; i gambi scendono fino alla citazione
     (sfumati solo in fondo). Subito sotto c'è il pulsante di prenotazione. */
  @media (max-width:860px){
    .hero{padding:18px 0 40px;}
    .hero .wrap{position:relative;}
    .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);row-gap:0;}
    .hero-grid > div:first-child{display:contents;}
    .hero-grid > div:first-child > *{grid-column:1;position:relative;z-index:1;}

    .hero .hero-name{
      grid-row:1;max-width:56%;margin:0;
      font-size:clamp(1.4rem, 6.4vw, 1.75rem);line-height:1.12;
    }
    .hero .hero-name .hero-role{margin-top:8px;font-size:.62rem;line-height:1.35;letter-spacing:.03em;}

    .hero-art{
      position:absolute;z-index:0;top:0;right:-6px;
      width:min(200px, 54vw);max-width:none;margin:0;opacity:1;
      -webkit-mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
              mask-image:linear-gradient(to bottom,#000 84%,transparent 100%);
    }

    .hero-actions{order:3;flex-direction:column;align-items:stretch;margin:22px 0 0;gap:12px;}
    .hero-actions .btn-primary,
    .hero-actions .btn-whatsapp{text-align:center;padding:17px 28px;}

    .hero-quote{order:1;text-align:center;margin:22px 0 14px;padding-top:16px;border-top:1px solid var(--line);}
    .hero-quote blockquote{margin:0 auto;}
    .hero-quote p{margin:0 auto;max-width:24ch;}
    .quote-line{display:block;}

    .hero .hero-intro{
      order:2;max-width:none;font-size:.8rem;line-height:1.4;color:var(--ink-soft);
      text-align:left;hyphens:manual;-webkit-hyphens:manual;word-spacing:normal;
      overflow-wrap:normal;word-break:normal;
      padding-left:12px;border-left:2px solid var(--rose-soft);
    }
  }

  /* ============ Hero desktop (da 861px in su) ============
     Gerarchia: nome (h1) > qualifica > citazione > introduzione > pulsanti. Tutto a sinistra, allineato; i papaveri a destra su un alone
     caldo. L'hero riempie la prima schermata, così pulsanti e contatto sono
     visibili senza scorrere. Lo smartphone non è toccato (regole nel proprio @media). */
  @media (min-width:861px){
    .hero{display:flex;align-items:center;padding:40px 0 16px;}
    .hero .wrap{width:100%;}
    .hero-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);gap:56px;align-items:center;}

    .hero .hero-name{
      font-size:clamp(2.3rem, 3.7vw, 3.2rem);font-weight:450;line-height:1.06;
      letter-spacing:-.02em;margin:0 0 14px;text-wrap:balance;
    }
    .hero .hero-name .hero-role{
      margin-top:12px;font-family:'Karla', sans-serif;font-size:1.02rem;font-weight:700;
      letter-spacing:.02em;line-height:1.4;color:var(--sage-dark);
    }
    .hero .hero-name .hero-role br{display:none;}

    .hero-quote{margin:26px 0 18px;text-align:left;}
    .hero-quote::before{content:"";display:block;width:44px;height:2px;background:var(--rose);margin-bottom:18px;}
    .hero-quote p{
      margin:0;font-family:'Karla', sans-serif;font-weight:400;
      font-size:clamp(1.1rem, 1.6vw, 1.3rem);line-height:1.35;color:var(--ink);
      white-space:nowrap;text-align:left;
    }
    .hero-quote figcaption{justify-content:flex-start;margin-top:12px;font-size:.74rem;}
    .hero-quote figcaption::after{display:none;}

    .hero .hero-intro{
      max-width:54ch;margin:0;font-size:1.06rem;line-height:1.7;color:var(--ink-soft);
      padding-left:0;border-left:none;
    }

    .hero-actions{margin-top:30px;gap:14px;flex-wrap:wrap;}
    .hero-actions .btn-primary,
    .hero-actions .btn-whatsapp{padding:15px 26px;font-size:.98rem;}


    .hero-art{max-width:470px;margin:0 0 0 auto;}
    .hero-art::before{
      content:"";position:absolute;left:50%;top:4%;width:100%;aspect-ratio:1;
      transform:translateX(-50%);border-radius:50%;
      background:radial-gradient(circle, var(--rose-soft) 0%, transparent 68%);opacity:.8;
    }
    .hero-art svg{position:relative;}
  }
  /* Desktop stretto / tablet in orizzontale: pulsanti più compatti, restano su una riga */
  @media (min-width:861px) and (max-width:1100px){
    .hero-grid{gap:40px;}
    .hero-actions{gap:10px;}
    .hero-actions .btn-primary,
    .hero-actions .btn-whatsapp{padding:14px 18px;font-size:.93rem;}
  }

  @media (min-width:861px){ #chi-sono{padding-top:40px;} }

  /* ============ Section headings ============ */
  .sec-head{max-width:640px;margin-bottom:52px;}
  .sec-head h2{font-size:clamp(1.7rem,3vw,2.35rem);}
  .sec-head p{color:var(--ink-soft);font-size:1.05rem;}

  .band{background:color-mix(in srgb, var(--paper-soft) 55%, transparent);} /* semitrasparente: lascia intravedere le radici dietro */

  /* ============ Chi sono ============ */
  .chisono-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;}
  @media (max-width:860px){ .chisono-grid{grid-template-columns:1fr;} }
  .portrait{
    aspect-ratio:2/3;border-radius:38px 10px 38px 10px;
    background:linear-gradient(160deg, var(--sand), var(--rose-soft));
    display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  }
  .portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;}
  .credentials{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px;}
  .credentials li{display:flex;gap:12px;font-size:.97rem;color:var(--ink-soft);align-items:flex-start;}
  .credentials li.sub{padding-left:32px;}
  .credentials li.sub svg{display:none;}
  .credentials li.sub::before{content:"\25C6";flex:none;width:20px;margin-top:5px;font-size:.6rem;line-height:1;color:var(--rose);}
  .credentials svg{flex:none;width:20px;height:20px;margin-top:2px;color:var(--sage-dark);}

  /* ============ Servizi ============ */
  /* Flex invece di grid: con 5, 6, 7... servizi l'ultima riga resta centrata */
  .servizi-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;}
  .servizi-grid > .servizio{flex:0 1 calc((100% - 66px) / 4);min-width:0;}
  @media (max-width:980px){ .servizi-grid > .servizio{flex-basis:calc((100% - 22px) / 2);} }
  /* Telefono: 2 colonne (2x2) invece di una lista lunga, per risparmiare spazio */
  @media (max-width:560px){
    .servizi-grid{gap:14px;}
    .servizi-grid > .servizio{flex-basis:calc((100% - 14px) / 2);}
    .servizio{padding:22px 16px;}
    .servizio svg{width:30px;height:30px;margin-bottom:12px;}
    .servizio h3{font-size:1rem;}
    .servizio p{font-size:.88rem;}
  }
  .servizio{
    display:block;text-decoration:none;color:inherit;
    background:var(--paper);border:1px solid var(--line);
    border-radius:28px 10px 28px 10px;padding:30px 24px;
  }
  .servizio:nth-child(2n){border-radius:10px 28px 10px 28px;}
  .servizio svg{width:38px;height:38px;color:var(--sage-dark);margin-bottom:16px;}
  .servizio h3{font-size:1.12rem;margin-bottom:8px;}
  .servizio p{font-size:.95rem;color:var(--ink-soft);margin:0;}
  .servizio-link{display:inline-block;margin-top:16px;font-size:.95rem;font-weight:600;color:var(--sage-dark);}
  .servizio-link::after{content:' \2192';}

  /* ============ Come funziona (timeline) ============ */
  .timeline{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
  @media (max-width:780px){ .timeline{grid-template-columns:1fr;} }
  .timeline::before{
    content:'';position:absolute;top:22px;left:8%;right:8%;height:1.5px;
    background-image:linear-gradient(to right, var(--line) 60%, transparent 0%);
    background-size:14px 1.5px;background-repeat:repeat-x;
  }
  @media (max-width:780px){ .timeline::before{display:none;} }
  .step{position:relative;}
  .step .num{
    width:46px;height:46px;border-radius:50%;background:var(--sage-dark);color:var(--on-sage);
    display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;
    font-size:1.15rem;margin-bottom:18px;position:relative;z-index:2;
  }
  .step h3{font-size:1.1rem;}
  .step p{color:var(--ink-soft);font-size:.96rem;}

  /* ============ Blog ============ */
  #blog-list.hidden, #blog-article.hidden{display:none;}
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  @media (max-width:900px){ .blog-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .blog-grid{grid-template-columns:1fr;} }
  .post-card{
    background:var(--paper);border:1px solid var(--line);border-radius:20px;
    padding:26px;cursor:pointer;text-align:left;font:inherit;color:inherit;
    display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s ease, transform .2s ease;
  }
  .post-card:hover{box-shadow:0 14px 30px var(--shadow);transform:translateY(-3px);}
  .tag{
    align-self:flex-start;background:var(--rose-soft);color:var(--ink);
    font-size:.78rem;font-weight:600;padding:5px 12px;border-radius:20px;
  }
  .post-card h3{font-size:1.12rem;margin:2px 0 0;}
  .post-date{font-size:.85rem;color:var(--ink-soft);}
  .post-card p{font-size:.94rem;color:var(--ink-soft);margin:0;}

  #blog-article{max-width:70ch;}
  .back-link{
    background:none;border:none;cursor:pointer;color:var(--sage-dark);font-weight:600;
    font-family:inherit;font-size:.95rem;padding:0 0 28px;display:inline-block;
  }
  #blog-article article h2{font-size:1.9rem;}
  #blog-article .post-date{margin-bottom:22px;display:block;}
  #blog-article article p{color:var(--ink);}

  /* ============ FAQ ============ */
  .faq-item{border-bottom:1px solid var(--line);padding:20px 0;}
  .faq-item summary{
    cursor:pointer;font-family:'Fraunces',serif;font-size:1.08rem;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:16px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary .plus{flex:none;font-size:1.4rem;color:var(--sage-dark);transition:transform .2s ease;}
  .faq-item[open] summary .plus{transform:rotate(45deg);}
  .faq-item p{margin-top:12px;color:var(--ink-soft);}

  /* ============ Contatti ============ */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
  @media (max-width:780px){ .contact-grid{grid-template-columns:1fr;} }
  .contact-list{list-style:none;padding:0;margin:0;display:grid;gap:20px;}
  .contact-list li{display:flex;gap:14px;align-items:flex-start;}
  .contact-list svg{flex:none;width:22px;height:22px;color:var(--sage-dark);margin-top:2px;}
  .contact-list a{text-decoration:none;border-bottom:1px solid var(--line);}
  .map-illo{
    background:var(--sand);border-radius:26px;aspect-ratio:4/3;
    display:flex;align-items:center;justify-content:center;
  }
  .map-illo svg{width:44%;color:var(--sage-dark);}

  /* ============ Footer ============ */
  footer{border-top:1px solid var(--line);padding:48px 0 32px;background:color-mix(in srgb, var(--paper-soft) 55%, transparent);}
  .footer-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:center;}
  .footer-links{display:flex;gap:24px;list-style:none;padding:0;margin:0;flex-wrap:wrap;}
  .footer-links a{text-decoration:none;color:var(--ink-soft);font-size:.92rem;}
  .footer-social{display:flex;gap:14px;}
  .footer-social a{
    width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink-soft);
  }
  .fine-print{margin-top:28px;font-size:.85rem;color:var(--ink-soft);}

  /* ============ Rifiniture mobile ============ */
  @media (max-width:720px){
    html{scroll-padding-top:24px;} /* i titoli non finiscono sotto l'header fisso quando si salta a un'ancora */
    .wrap{padding:0 22px;}
    section{padding:56px 0;}
    .sec-head{margin-bottom:34px;}

    .hero{padding:36px 0 20px;}
    .hero-grid{gap:26px;}
    .hero .lede{font-size:1.08rem;}
    .hero-actions{flex-direction:column;align-items:stretch;gap:6px;margin-top:24px;}
    .hero-actions .btn-primary{text-align:center;padding:17px 24px;}
    .hero-actions .btn-ghost{align-self:center;}

    .portrait{max-width:300px;aspect-ratio:2/3;margin:0 auto;}
    .servizio{padding:26px 22px;}

    .faq-item{padding:4px 0;}
    .faq-item summary{min-height:56px;padding:10px 0;}

    .btn-primary{padding:16px 26px;}

    /* area di tocco più ampia senza spostare le sottolineature */
    .contact-list a{position:relative;}
    .contact-list a::before{content:'';position:absolute;inset:-14px -8px;}
    .breadcrumb a{position:relative;}
    .breadcrumb a::before{content:'';position:absolute;inset:-14px -8px;}
    .map-illo{aspect-ratio:16/9;}

    .footer-links{gap:0 22px;}
    .footer-links a{display:inline-block;padding:14px 0;}
    .footer-social a{width:44px;height:44px;}
  }

  /* Pagina servizio: testo + "Per chi è pensato" (due colonne solo da tablet in su) */
  .service-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start;}
  @media (max-width:860px){ .service-grid{grid-template-columns:1fr;gap:28px;} }


/* ============ Radici in background (assets/js/roots.js) ============
   Continuano gli steli del papavero nell'hero: stesso verde salvia, stesso
   tratto arrotondato, leaf a contorno e viticci a spirale. */
.roots{position:absolute;top:0;left:0;width:100%;height:0;z-index:-1;pointer-events:none;overflow:hidden;}
.roots svg{display:block;max-width:none;}
.roots path{stroke:var(--sage-dark);stroke-linecap:round;stroke-linejoin:round;fill:none;}
.roots .r-main{stroke-width:2.4;opacity:.8;}
.roots .r-br{stroke-width:1.9;opacity:.75;}
.roots .r-lf{stroke-width:1.7;opacity:.75;}
@media (max-width:640px){ .roots path{opacity:.5 !important;} }
@media (prefers-reduced-motion: reduce){ .roots{display:none;} }
@media print{ .roots{display:none;} }

/* ============ Pulsante secondario (Chi sono) ============ */
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
  font-weight:600;font-size:.98rem;color:var(--sage-dark);background:transparent;
  border:1.5px solid var(--sage-dark);border-radius:26px 8px 26px 8px;padding:14px 22px;
  transition:background .18s ease, color .18s ease;
}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--sage-dark);color:var(--on-sage);}
.chisono-links{display:flex;flex-direction:column;gap:12px;align-self:start;}
@media (min-width:861px){
  .chisono-grid > div:nth-child(2){grid-row:1 / span 2;}
  .chisono-links{grid-column:1;grid-row:2;}
}
@media (max-width:860px){
  .chisono-links{flex-direction:row;flex-wrap:nowrap;gap:10px;margin-top:10px;}
  .chisono-links .btn-outline{flex:1 1 0;min-width:0;padding:14px 10px;font-size:.9rem;line-height:1.25;}
}

/* ============ Contatti: schede cliccabili ============ */
.contact-cards{display:grid;gap:12px;margin:0 0 28px;}
.contact-card{
  display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);
  background:var(--sand);border-radius:22px 6px 22px 6px;padding:18px 22px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.contact-card:hover,.contact-card:focus-visible{transform:translateY(-2px);box-shadow:0 12px 26px var(--shadow);}
.contact-card > svg{flex:none;width:26px;height:26px;color:var(--sage-dark);}
.contact-card .cc-text{display:flex;flex-direction:column;}
.contact-card strong{font-family:'Fraunces',serif;font-weight:500;font-size:1.1rem;line-height:1.25;}
.contact-card small{font-size:.9rem;color:var(--ink-soft);margin-top:2px;word-break:break-all;}

/* ============ FAQ ============ */
.faq-narrow{max-width:820px;}

/* ============ Pagine curriculum e orientamento ============ */
.doc-page{padding:56px 0 72px;}
.doc-kicker{margin:0;font-size:.9rem;}
.doc-kicker a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);}
.doc-page h1{font-size:clamp(2rem, 4vw, 2.8rem);line-height:1.12;margin:16px 0 28px;}
.doc-body{max-width:70ch;font-size:1.04rem;line-height:1.75;}
.doc-body p{margin:0 0 1.1em;}
.doc-body em{font-style:italic;}
sup.ref{font-size:.72em;line-height:0;vertical-align:super;}
sup.ref a{color:var(--sage-dark);text-decoration:none;font-weight:600;padding:0 1px;}
sup.ref a:hover{text-decoration:underline;}
.refs-wrap{max-width:70ch;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);}
.refs-wrap h2{font-size:1.2rem;margin:0 0 14px;}
.refs{font-size:.9rem;line-height:1.6;color:var(--ink-soft);padding-left:1.5em;margin:0;}
.refs li{margin-bottom:8px;overflow-wrap:anywhere;}
.refs a{color:var(--sage-dark);}
.ref-back{margin-left:6px;text-decoration:none;color:var(--ink-soft);}
.ref-back:hover{color:var(--sage-dark);}

/* ============ Note e ritorni nelle pagine di approfondimento ============
   Su iOS lo scroll fluido si interrompe se la pagina cambia altezza durante il
   movimento (font e immagini che si caricano): nelle pagine con note lo scroll
   è immediato, e il titolo della nota non finisce sotto l'header. */
html:has(.doc-page){scroll-behavior:auto;}
html{scroll-padding-top:96px;}
sup.ref{scroll-margin-top:110px;}

/* ============ Lettore PDF incorporato (orientamento) ============ */
.doc-viewer-wrap{max-width:70ch;margin-top:44px;}
.doc-viewer-wrap h2{font-size:1.2rem;margin:0 0 8px;}
.viewer-note{font-size:.92rem;color:var(--ink-soft);margin:0 0 16px;}
.viewer-note a{color:var(--sage-dark);}
.pdf-viewer{
  max-height:min(78vh, 900px);overflow:auto;-webkit-overflow-scrolling:touch;
  background:var(--paper-soft);border-radius:16px;padding:14px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.pdf-viewer canvas{display:block;max-width:100%;height:auto;background:#fff;border-radius:4px;box-shadow:0 6px 18px var(--shadow);}
.pdf-status{margin:24px 0;font-size:.95rem;color:var(--ink-soft);text-align:center;}