/* ==========================================================================
   Kìron Torino Via Serao — v5 (stile "floating pill / calm")
   Palette: bianco · nero · blu Kìron #0B1F4F
   ========================================================================== */
:root{
  /* Palette ufficiale Kìron */
  --brand-blue:#082971;
  --dark-blue:#151c2c;
  --wale-dark:#49597a;
  --wale-mid:#8392af;
  --wale-light:#c3ccde;
  --sage-dark:#738a8b;
  --sage-mid:#98b0b1;
  --sage-light:#c9d7d8;
  --yellow:#f8b842;
  --pink-dark:#c0b3a3;
  --pink-mid:#e2d7c9;
  --pink-light:#f0ece1;
  --white:#fff;
  --black:#000;
  --max-width:1600px;
  --plyr-video-control-background-hover:#082971;
  --swiper-theme-color:#082971;

  /* Alias interni del tema */
  --navy:#082971;
  --navy-hover:#061e55;
  --ink:#EEF2F9;      /* fondo pagina */
  --paper:#EEF2F9;    /* sezioni chiare */
  --cream:#ffffff;
  --muted:#c3ccde;
  --muted-hover:#8392af;
  --ease-burger:cubic-bezier(.77,0,.175,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.kiron{margin:0;overflow-x:clip;background:var(--ink);color:var(--dark-blue);font-family:'Libre Franklin',system-ui,sans-serif;font-optical-sizing:auto;font-style:normal;min-height:100%;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%;height:auto}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p,address{margin:0;font-style:normal}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:6px}
.serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic}

/* ---------- navbar a pillola ---------- */
.pill-nav{position:absolute;top:24px;left:50%;transform:translateX(-50%);z-index:50;display:flex;flex-direction:column;align-items:center;gap:10px}
.pill{display:flex;align-items:center;gap:18px;background:#fff;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:8px 10px 8px 18px}
.brand img{height:32px;width:auto}
.burger{width:40px;height:40px;border:0;border-radius:999px;background:transparent;display:grid;place-items:center;position:relative}
.burger span{position:absolute;width:20px;height:2px;background:#000;border-radius:2px;transition:transform .3s var(--ease-burger),opacity .3s}
.burger span:first-child{transform:translateY(-4px)}
.burger span:last-child{transform:translateY(4px)}
.is-open .burger span:first-child{transform:rotate(45deg)}
.is-open .burger span:last-child{transform:rotate(-45deg)}
.pill-menu{background:#fff;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.15);padding:10px;min-width:220px;opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;transition:opacity .25s ease,transform .25s var(--ease-burger)}
.is-open .pill-menu{opacity:1;transform:none;pointer-events:auto}
.nav-links a{display:block;padding:10px 14px;border-radius:12px;font-size:1rem;font-weight:500;color:#000}
.nav-links a:hover{background:#f1f1f1}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;overflow:hidden;margin-bottom:-25px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 24px 64px}
@supports(height:100svh){.hero{height:100svh}}
@media(min-width:768px){.hero{padding-bottom:90px}}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.2)}
.hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.hero-title{color:#fff;font-weight:400;letter-spacing:-.02em;line-height:1.1;font-size:clamp(2.75rem,8.5vw,96px);text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero-title .serif{font-size:1.04em}
.hero-sub{color:rgba(255,255,255,.85);font-weight:500;font-size:1rem;max-width:460px;text-shadow:0 1px 12px rgba(0,0,0,.3)}
@media(min-width:768px){.hero-sub{font-size:1.125rem}}
.cta-bar{display:flex;align-items:center;gap:16px;background:rgba(0,0,0,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:14px;padding:5px 5px 5px 22px;max-width:100%}
.cta-text{color:#fff;font-size:.9375rem;font-weight:500;white-space:nowrap}
.cta-desktop{display:none}
@media(min-width:640px){.cta-desktop{display:inline}.cta-mobile{display:none}}
.btn-white{background:#fff;color:#000;font-size:.9375rem;font-weight:500;padding:12px 20px;border-radius:12px;white-space:nowrap;transition:background .3s}
.btn-white:hover{background:rgba(255,255,255,.9)}

/* ---------- chi siamo ---------- */
.about{position:relative;z-index:10;background:var(--paper);border-radius:25px 25px 0 0;padding:80px 24px}
@media(min-width:768px){.about{padding:128px 24px}}
.about-top{max-width:48rem;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.about-lead{max-width:34rem;font-size:1.0625rem;line-height:1.65}
@media(min-width:768px){.about-lead{font-size:1.1875rem}}
.about-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.about-btns.left{justify-content:flex-start}
.pill-btn{display:inline-flex;align-items:center;gap:12px;border-radius:999px;padding:6px 22px 6px 6px;font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;border:0;transition:background .3s}
.pill-ico{width:34px;height:34px;border-radius:999px;background:#fff;color:var(--navy);display:grid;place-items:center}
.pill-dark{background:var(--navy);color:var(--cream)}
.pill-dark:hover{background:var(--navy-hover)}
.pill-muted{background:var(--muted);color:var(--navy)}
.pill-muted:hover{background:var(--muted-hover)}
.divider{display:flex;align-items:center;gap:2px;margin:72px 0}
.divider i{width:8px;height:8px;border-radius:999px;background:var(--muted)}
.divider span{flex:1;height:2px;background:var(--muted)}
.about-bottom{max-width:72rem;margin:0 auto;display:flex;flex-direction:column;gap:40px}
@media(min-width:768px){.about-bottom{flex-direction:row;align-items:flex-start;gap:80px}}
.about-mark{display:flex;align-items:center;gap:14px;flex:none}
.mark-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;font-weight:600;line-height:1.35}
.about-big{font-size:clamp(1.5rem,3.4vw,42px);line-height:1.3;font-weight:400}
.about-stats{max-width:72rem;margin:72px auto 0;display:grid;gap:24px}
@media(min-width:640px){.about-stats{grid-template-columns:repeat(3,1fr)}}
.stat{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:20px;background:#fff}
.stat b{font-weight:400;font-size:clamp(2.75rem,5vw,4rem);line-height:1;letter-spacing:-.03em}
.stat sup{font-size:.45em;vertical-align:super;opacity:.6}
.stat span{font-size:.9375rem;font-weight:500;opacity:.8}

/* ---------- percorso: sticky + card ---------- */
.features{position:relative;padding:80px 20px;color:#fff;isolation:isolate}
@media(min-width:768px){.features{padding:160px 40px}}
@media(min-width:1024px){.features{padding:190px 64px}}
.features-bg{position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center;background-color:var(--navy)}
.features-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,41,113,.35),rgba(8,41,113,.55))}
.features-grid{display:grid;gap:40px;max-width:1400px;margin:0 auto}
@media(min-width:1024px){.features-grid{grid-template-columns:400px 1fr;gap:96px}}
@media(min-width:1280px){.features-grid{grid-template-columns:460px 1fr;gap:192px}}
.features-left{display:flex;flex-direction:column;gap:40px}
@media(min-width:1024px){.features-left{position:sticky;top:0;height:100vh;justify-content:space-between;padding:128px 0}}
.features-title{font-weight:400;line-height:1.2;font-size:clamp(1.625rem,3.2vw,46px);text-shadow:0 2px 16px rgba(0,0,0,.25)}
.feature-nav{display:none;flex-direction:column;gap:8px;margin-top:40px}
@media(min-width:1024px){.feature-nav{display:flex}}
.feature-nav button{text-align:left;border:0;border-radius:14px;padding:12px 16px;background:rgba(0,0,0,.2);backdrop-filter:blur(6px);color:rgba(255,255,255,.45);font-size:1rem;font-weight:500;transition:color .3s}
.feature-nav button.is-active{color:#fff}
.features-cta{display:none;flex-direction:column;align-items:flex-start;gap:14px}
@media(min-width:1024px){.features-cta{display:flex}}
.features-cta p{font-size:1rem;font-weight:500;max-width:24rem;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.features-right{display:flex;flex-direction:column;gap:40px}
.fcard{background:rgba(0,0,0,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:28px;padding:24px;display:flex;flex-direction:column;gap:20px;opacity:0;transform:translateX(4rem);transition:opacity .7s ease-out,transform .7s ease-out}
@media(min-width:768px){.fcard{padding:40px}}
.fcard.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fcard{opacity:1;transform:none;transition:none}}
.fcard h3{font-size:1.25rem;font-weight:500;display:flex;gap:12px;align-items:baseline}
@media(min-width:768px){.fcard h3{font-size:1.5rem}}
.fnum{font-size:.8125rem;letter-spacing:.15em;opacity:.6}
.fmedia{aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:rgba(0,0,0,.3)}
.fmedia video{width:100%;height:100%;object-fit:cover}
.fcard p{color:rgba(255,255,255,.7);font-weight:500;font-size:1rem;line-height:1.65}
@media(min-width:768px){.fcard p{font-size:1.0625rem}}

/* ---------- servizi ---------- */
.services{position:relative;z-index:10;background:var(--paper);border-radius:25px 25px 0 0;padding:80px 24px}
@media(min-width:768px){.services{padding:128px 24px}}
.services-lead{max-width:34rem;margin:0 auto 48px;text-align:center;font-size:1.0625rem;line-height:1.65}
.services-grid{max-width:72rem;margin:0 auto;display:grid;gap:16px}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.services-grid{grid-template-columns:repeat(3,1fr)}}
.scard{background:#fff;border-radius:24px;padding:28px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.scard:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(8,41,113,.1)}
.scard .q{font-size:.9375rem;opacity:.6;margin-bottom:14px}
.scard h3{font-size:1.25rem;font-weight:500}
.scard p{margin-top:8px;font-size:1rem;line-height:1.6;opacity:.8;flex:1}
.scard .link{margin-top:20px;display:inline-flex;align-items:center;gap:6px;font-size:.9375rem;font-weight:500}
.scard .link svg{transition:transform .3s}
.scard:hover .link svg{transform:translateX(3px)}

/* ---------- footer / contatti ---------- */
.footer{position:relative;z-index:10;background:#fff;padding:80px 24px 32px}
@media(min-width:768px){.footer{padding:128px 24px 40px}}
.footer-grid{max-width:72rem;margin:0 auto;display:grid;gap:48px}
@media(min-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:80px}}
.footer-title{font-size:clamp(2rem,4.5vw,3.25rem);font-weight:400;line-height:1.1;letter-spacing:-.02em}
.footer-lead{margin:20px 0 28px;font-size:1.0625rem;line-height:1.65;max-width:28rem;opacity:.85}
.footer-address{margin-top:32px;font-size:1.0625rem;line-height:1.7;opacity:.85}
.footer-address a:hover{text-decoration:underline}
.form-card{background:var(--paper);border-radius:24px;padding:28px}
.kform{display:flex;flex-direction:column;gap:14px}
.kform-title{font-size:1.125rem;font-weight:500}
.kform label{display:flex;flex-direction:column;gap:6px;font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;opacity:.9}
.kform input:not([type=checkbox]),.kform select{font:inherit;font-size:1.0625rem;color:var(--navy);background:#fff;border:1px solid var(--muted);border-radius:12px;padding:12px 14px;letter-spacing:0;text-transform:none}
.kform input::placeholder{color:rgba(8,41,113,.4)}
.kform .check{flex-direction:row;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:.9375rem;font-weight:400}
.kform .check a{text-decoration:underline}
.kform button{margin-top:6px;align-self:flex-start}
.kform-ok{font-size:1rem}
.kform-err{color:#9b1c1c;font-size:1rem;background:#fff;border-left:3px solid #9b1c1c;padding:8px 12px;border-radius:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.footer .divider{max-width:72rem;margin:64px auto 32px}
.footer-legal{max-width:72rem;margin:0 auto;display:grid;gap:12px;font-size:.9375rem;line-height:1.65;opacity:.8}
.footer-legal .small{font-size:.875rem}
.footer-legal a{text-decoration:underline}

/* pagine interne */
.section-simple{background:var(--paper);min-height:70vh;padding:140px 24px 80px}
.prose{max-width:42rem;margin-top:2rem;line-height:1.7}

/* Fix: l'hero copre sempre lo sfondo fisso della sezione percorso */
.hero{z-index:1;background:var(--navy)}
.hero-video{background:var(--navy)}
/* Mobile: barra CTA senza overflow */
@media(max-width:639px){
  .cta-bar{padding:5px 5px 5px 14px;gap:10px}
  .cta-text{font-size:.875rem;white-space:normal;line-height:1.3}
  .btn-white{padding:10px 14px;font-size:.875rem}
  .hero-title{font-size:2.6rem}
}

/* Hero luminoso: niente velo scuro pieno, solo un gradiente in basso per il testo */
.hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 45%,rgba(21,28,44,.55) 100%)}
.hero-title{font-size:clamp(2.5rem,7.2vw,88px);text-shadow:0 2px 6px rgba(0,0,0,.35),0 8px 40px rgba(0,0,0,.35)}
.hero-sub{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4),0 4px 20px rgba(0,0,0,.35)}
@media(max-width:639px){.hero-title{font-size:2.35rem}}

/* Contrasto titolo sul bianco della casa: gradiente blu dal basso più deciso, titolo leggermente più compatto */
.hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(21,28,44,.35) 70%,rgba(21,28,44,.78) 100%)}
.hero-title{font-size:clamp(2.5rem,6.4vw,80px)}
.hero{padding-bottom:56px}
@media(min-width:768px){.hero{padding-bottom:72px}}


/* ---------- SEO / a11y ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:#fff;color:var(--navy);padding:10px 16px;border-radius:8px;font-weight:500}
.skip-link:focus{left:8px}
.section-title{font-size:clamp(1.75rem,3.6vw,2.75rem);font-weight:400;line-height:1.15;letter-spacing:-.02em;text-align:center;max-width:40rem;margin:0 auto 20px}
.services .section-title{margin-bottom:16px}

/* FAQ */
.faq{position:relative;z-index:10;background:#fff;padding:80px 24px}
@media(min-width:768px){.faq{padding:112px 24px}}
.faq-inner{max-width:52rem;margin:0 auto}
.faq-list{margin-top:40px;display:flex;flex-direction:column;gap:10px}
.faq-item{background:var(--paper);border-radius:18px;padding:0 24px}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item h3{font-size:1.0625rem;font-weight:500;line-height:1.4}
@media(min-width:768px){.faq-item h3{font-size:1.125rem}}
.faq-plus{flex:none;width:30px;height:30px;border-radius:999px;background:#fff;display:grid;place-items:center;font-size:1.25rem;transition:transform .3s}
.faq-item[open] .faq-plus{transform:rotate(45deg)}
.faq-item p{padding:0 0 22px;font-size:1rem;line-height:1.65;opacity:.85;max-width:44rem}

/* Dove siamo */
.where{position:relative;z-index:10;background:var(--paper);padding:80px 24px}
@media(min-width:768px){.where{padding:112px 24px}}
.where-inner{max-width:72rem;margin:0 auto;display:grid;gap:40px;align-items:center}
@media(min-width:900px){.where-inner{grid-template-columns:1fr 1fr;gap:64px}}
.where .section-title{text-align:left;margin:0 0 20px}
.where-text{font-size:1.0625rem;line-height:1.65;margin-bottom:16px;opacity:.9}
.where-text a{text-decoration:underline}
.where .pill-btn{margin-top:8px}
.where-map{aspect-ratio:4/3;border-radius:24px;overflow:hidden;background:#fff}
.where-map iframe{width:100%;height:100%;border:0}


/* =========================================================================
   v2.4 — Revisione UI/UX
   ========================================================================= */
/* Navbar: fissa, si compatta e prende vetro dopo lo scroll */
.pill-nav{position:fixed;transition:top .3s}
.pill{transition:padding .3s,box-shadow .3s,background .3s}
.pill-nav.is-scrolled{top:12px}
.pill-nav.is-scrolled .pill{padding:6px 8px 6px 14px;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(8,41,113,.12)}
.pill-nav.is-scrolled .brand img{height:28px}

/* Hero: gerarchia più netta */
.hero-content{gap:22px}
.hero-title{font-size:clamp(2.4rem,6.4vw,84px);line-height:1.02;letter-spacing:-.03em}
.hero-sub{max-width:520px;font-size:1.0625rem}
@media(min-width:768px){.hero-sub{font-size:1.1875rem}}
.hero-sub strong{font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px}
.btn-lg{padding:15px 22px 15px 24px;font-size:1rem;font-weight:600;border-radius:999px;display:inline-flex;align-items:center;gap:10px;box-shadow:0 12px 30px rgba(0,0,0,.18);transition:transform .25s,box-shadow .25s,background .25s}
.btn-lg:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.22)}
.btn-lg svg{transition:transform .25s}.btn-lg:hover svg{transform:translateX(3px)}
.btn-ghost{color:#fff;font-weight:500;font-size:.9375rem;padding:12px 6px;border-bottom:1px solid rgba(255,255,255,.5);transition:border-color .25s}
.btn-ghost:hover{border-color:#fff}
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:6px;color:rgba(255,255,255,.9);font-size:.875rem;font-weight:500}
.trust-strip b{font-weight:600;color:#fff;margin-right:4px}
.trust-strip li{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;background:rgba(21,28,44,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media(max-width:639px){.trust-strip li:nth-child(n+3){display:none}}

/* Eyebrow: struttura leggibile a colpo d'occhio */
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.6;margin-bottom:14px}
.eyebrow.center{text-align:center}
.features .eyebrow{color:#fff;opacity:.75}

/* Chi siamo: marchio reale, frase più breve con accento serif */
.about-mark img{height:36px;width:auto}
.about-big .serif{font-size:1.06em}
.reveal{opacity:0;transform:translateY(1.25rem);transition:opacity .7s ease-out,transform .7s ease-out}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* Rete di sicurezza: se lo script non parte (errore, blocco, rete lenta) gli
   elementi con .reveal resterebbero invisibili per sempre. Dopo due secondi
   compaiono comunque; quando il JavaScript funziona ha già aggiunto
   .is-visible molto prima e questa animazione non si nota. */
@keyframes kiron-reveal-fallback{to{opacity:1;transform:none}}
.reveal{animation:kiron-reveal-fallback .01s linear 2s forwards}
.reveal.is-visible{animation:none}

/* Processo: via il logo, numero come segno grafico; nav a timeline */
.fhead{display:flex;align-items:flex-start;gap:16px}
.fnum{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:2.25rem;line-height:1;opacity:.9;letter-spacing:0}
.fcard h3{font-size:1.375rem;margin-top:4px}
@media(min-width:768px){.fcard h3{font-size:1.625rem}}
.fcard{border:1px solid rgba(255,255,255,.18);transition:opacity .7s ease-out,transform .7s ease-out,border-color .3s}
.fcard:hover{border-color:rgba(255,255,255,.4)}
.feature-nav{position:relative;padding-left:22px;counter-reset:step}
.feature-nav::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:rgba(255,255,255,.25);border-radius:2px}
.feature-nav li{position:relative}
.feature-nav li::before{content:"";position:absolute;left:-20px;top:18px;width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.35);transition:background .3s,transform .3s}
.feature-nav li:has(.is-active)::before{background:#fff;transform:scale(1.3)}
.feature-nav button{background:transparent;backdrop-filter:none;padding:10px 12px;font-size:1.0625rem}
.feature-nav button.is-active{background:rgba(255,255,255,.12)}

/* Servizi: icona, hover, stessa altezza */
.services-grid{gap:18px}
.scard{padding:30px 28px;border:1px solid transparent;transition:transform .3s,box-shadow .3s,border-color .3s}
.scard:hover{border-color:var(--muted)}
.sicon{width:46px;height:46px;border-radius:14px;background:var(--paper);color:var(--navy);display:grid;place-items:center;margin-bottom:18px}
.scard .q{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:1.125rem;opacity:.75;margin-bottom:8px}

/* FAQ: hover */
.faq-item{transition:background .25s}
.faq-item:hover{background:#e2e8f4}

/* Form: card più leggibile */
.form-card{box-shadow:0 20px 50px rgba(8,41,113,.08)}
.kform-title::after{content:"Rispondiamo entro un giorno lavorativo.";display:block;font-size:.9375rem;font-weight:400;opacity:.7;margin-top:4px}

/* Barra mobile sticky con azioni di contatto */
.mobile-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;gap:8px;padding:8px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:18px;box-shadow:0 10px 30px rgba(8,41,113,.18)}
.mb-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border-radius:12px;font-size:.875rem;font-weight:600;background:var(--paper);color:var(--navy)}
.mb-primary{flex:1.6;background:var(--navy);color:#fff}
@media(min-width:900px){.mobile-bar{display:none}}
@media(max-width:899px){.footer{padding-bottom:96px}}

/* Focus e selezione coerenti */
::selection{background:rgba(8,41,113,.18)}
.btn-white:focus-visible,.pill-btn:focus-visible,.mb-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--navy)}

/* =========================================================================
   Prequalificatore
   ========================================================================= */
.pq{display:flex;flex-direction:column;gap:18px}
.pq-title{font-size:1.5rem;font-weight:500;letter-spacing:-.01em;line-height:1.2}
.pq-sub{margin-top:6px;font-size:1rem;opacity:.75;line-height:1.5}
.pq-progress{margin-top:16px;height:4px;border-radius:4px;background:var(--muted);overflow:hidden}
.pq-progress span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(.16);background:var(--navy);transition:transform .4s ease;will-change:transform}
.pq-step-label{margin-top:8px;font-size:.8125rem;opacity:.65}
.pq-step{display:none;border:0;margin:0;padding:0;min-width:0}
.pq-step.is-active{display:block;animation:pqin .35s ease-out}
@keyframes pqin{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pq-step.is-active{animation:none}}
.pq-step legend{font-size:1.125rem;font-weight:500;line-height:1.35;margin-bottom:14px;padding:0}
.pq-hint{font-size:.9375rem;opacity:.7;margin:-6px 0 14px}
.pq-options{display:grid;gap:10px}
@media(min-width:640px){.pq-options{grid-template-columns:1fr 1fr}.pq-options-3{grid-template-columns:1fr 1fr 1fr}}
.pq-opt{position:relative;display:block;cursor:pointer}
.pq-opt input{position:absolute;opacity:0;inset:0;pointer-events:none}
.pq-opt span{display:block;padding:14px 16px;border-radius:14px;background:#fff;border:1.5px solid var(--muted);font-size:1rem;line-height:1.35;transition:border-color .2s,background .2s,transform .2s}
.pq-opt:hover span{border-color:var(--navy)}
.pq-opt input:checked+span{border-color:var(--navy);background:var(--navy);color:#fff}
.pq-opt input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
.pq-grid{display:grid;gap:14px}
@media(min-width:640px){.pq-grid{grid-template-columns:1fr 1fr}}
.pq-field{display:flex;flex-direction:column;gap:6px;font-size:.8125rem;font-weight:500;text-transform:uppercase;letter-spacing:.08em;opacity:.9}
.pq-field input,.pq-field select{font:inherit;font-size:1.0625rem;color:var(--navy);background:#fff;border:1.5px solid var(--muted);border-radius:12px;padding:12px 14px;letter-spacing:0;text-transform:none;font-weight:400}
.pq-field input:focus,.pq-field select:focus{outline:0;border-color:var(--navy)}
/* Consenso privacy: due colonne, casella e frase. Con `display:flex` i tre
   frammenti di testo e il link diventavano voci separate e si incolonnavano
   ciascuno per conto suo; la griglia tiene la frase in un blocco unico. */
.pq-check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:16px;font-size:.9375rem;line-height:1.55;cursor:pointer}
.pq-check input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:var(--navy);cursor:pointer}
.pq-check span{min-width:0}
.pq-check a{text-decoration:underline;text-underline-offset:2px}
/* area di tocco comoda sul telefono, senza ingrandire il riquadro disegnato */
@media(max-width:640px){
  /* casella allineata alla prima riga, non centrata sul blocco */
  .pq-check{gap:12px;font-size:.875rem;line-height:1.6;align-items:start}
  .pq-check input{width:24px;height:24px;margin-top:1px}
}
.pq-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px}
.pq-back{background:transparent;border:0;color:var(--navy);font-weight:500;text-decoration:underline;padding:10px 4px}
.pq-submit.is-loading{opacity:.6;pointer-events:none}
.pq-error{color:#9b1c1c;font-size:.9375rem;background:#fff;border-left:3px solid #9b1c1c;padding:8px 12px;border-radius:6px}
.pq-result{background:#fff;border-radius:18px;padding:28px;line-height:1.6}
.pq-result-title{font-size:1.375rem;font-weight:500;margin-bottom:10px;letter-spacing:-.01em}
.pq-result a{text-decoration:underline;font-weight:500}
/* Sezione dedicata */
.pq-section{position:relative;z-index:10;background:var(--paper);padding:80px 24px}
@media(min-width:768px){.pq-section{padding:112px 24px}}
.pq-wrap{max-width:72rem;margin:0 auto;display:grid;gap:40px;align-items:start}
@media(min-width:960px){.pq-wrap{grid-template-columns:1fr 1.2fr;gap:64px}}
.pq-side .section-title{text-align:left;margin:0 0 16px}
.pq-side p{font-size:1.0625rem;line-height:1.65;opacity:.85;margin-bottom:14px}
.pq-side ul{margin-top:20px;display:flex;flex-direction:column;gap:10px}
.pq-side li{display:flex;gap:10px;align-items:flex-start;font-size:1rem}
.pq-side li:not(.pq-steps li)::before{content:"✓";flex:none;width:22px;height:22px;border-radius:999px;background:var(--navy);color:#fff;font-size:.75rem;display:grid;place-items:center;margin-top:2px}
.pq-card{background:#fff;border-radius:24px;padding:28px;box-shadow:0 20px 50px rgba(8,41,113,.08)}
@media(min-width:640px){.pq-card{padding:36px}}
.pq-card .pq-opt span,.pq-card .pq-field input,.pq-card .pq-field select,.pq-card .pq-result{background:var(--paper)}
.pq-card .pq-opt input:checked+span{background:var(--navy)}


/* =========================================================================
   v3 — recensioni, pagine servizio, chi siamo, footer
   ========================================================================= */
.reviews{position:relative;z-index:10;background:#fff;padding:80px 24px}
@media(min-width:768px){.reviews{padding:112px 24px}}
.reviews-grid{max-width:72rem;margin:40px auto 0;display:grid;gap:16px}
@media(min-width:640px){.reviews-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.reviews-grid{grid-template-columns:repeat(3,1fr)}}
.review{margin:0;background:var(--paper);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:10px}
.review .stars{color:var(--yellow);letter-spacing:.12em;font-size:.9375rem}
.review p{font-size:1rem;line-height:1.6}
.review footer{margin-top:auto;padding-top:8px;font-size:.875rem;opacity:.75}
.review footer a{text-decoration:underline}
.review.small{padding:18px 20px;background:#fff}
.review.small p{font-size:.9375rem}
.reviews-more{text-align:center;margin-top:32px}
.svc-reviews .review{background:#fff}

.footer-links{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.footer-links ul{display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:1rem}
.footer-links a:hover{text-decoration:underline}

/* Pagine interne */
.crumbs{font-size:.875rem;opacity:.7;margin-bottom:24px}
.crumbs span{margin:0 6px}
.crumbs a:hover{text-decoration:underline}
.svc-hero,.team-hero{background:var(--paper);padding:140px 24px 64px}
@media(min-width:768px){.svc-hero,.team-hero{padding:160px 24px 80px}}
.svc-hero{display:grid;gap:40px;max-width:72rem;margin:0 auto;align-items:center}
@media(min-width:900px){.svc-hero{grid-template-columns:1.1fr .9fr;gap:64px;padding-inline:0}}
.svc-hero h1,.team-hero h1{font-size:clamp(2.25rem,5vw,3.75rem);font-weight:400;line-height:1.08;letter-spacing:-.025em;margin-bottom:20px}
.svc-lead{font-size:1.125rem;line-height:1.65;max-width:34rem;opacity:.9;margin-bottom:28px}
.hero-actions.left{justify-content:flex-start}
.svc-hero-media{margin:0;border-radius:24px;overflow:hidden;aspect-ratio:16/11;box-shadow:0 24px 60px rgba(8,41,113,.14)}
.svc-hero-media video{width:100%;height:100%;object-fit:cover}
.svc-block{background:#fff;padding:72px 24px}
@media(min-width:768px){.svc-block{padding:96px 24px}}
.svc-two{max-width:72rem;margin:0 auto;display:grid;gap:48px}
@media(min-width:900px){.svc-two{grid-template-columns:1fr 1.2fr;gap:80px}}
.svc-two h2{font-size:1.75rem;font-weight:400;letter-spacing:-.02em;margin-bottom:20px}
.svc-list{display:flex;flex-direction:column;gap:12px}
.svc-list li{display:flex;gap:12px;font-size:1.0625rem;line-height:1.5}
.svc-list li::before{content:"";flex:none;width:8px;height:8px;border-radius:999px;background:var(--navy);margin-top:10px}
.svc-steps{display:flex;flex-direction:column;gap:22px}
.svc-steps li{display:flex;gap:18px}
.svc-steps .fnum{color:var(--navy);opacity:.7;font-size:2rem;line-height:1}
.svc-steps h3{font-size:1.125rem;font-weight:500;margin-bottom:4px}
.svc-steps p{font-size:1rem;line-height:1.6;opacity:.85}
.svc-faq{background:var(--paper)}
.svc-faq .faq-list{max-width:52rem;margin:32px auto 0}
.svc-faq .faq-item{background:#fff}
.svc-others{max-width:52rem;margin:40px auto 0;font-size:.9375rem;opacity:.8}
.svc-others a{text-decoration:underline;margin-left:10px}
.svc-reviews{background:var(--paper)}

/* Team */
.team-hero{max-width:72rem;margin:0 auto}
@media(min-width:900px){.team-hero{padding-inline:0}}
.team-hero{background:transparent}
.team{background:var(--paper)}
.team-hero .svc-lead{max-width:42rem}
.trust-strip.dark li{background:#fff;color:var(--navy)}
.trust-strip.dark b{color:var(--navy)}
.trust-strip.dark{justify-content:flex-start;color:var(--navy)}
.team-grid-wrap{padding:24px 24px 80px}
.team-grid{max-width:72rem;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.member{background:#fff;border-radius:28px;padding:28px;display:grid;gap:28px;scroll-margin-top:100px}
@media(min-width:768px){.member{grid-template-columns:280px 1fr;padding:36px;gap:40px}}

.member-ph{background:var(--paper);display:grid;place-items:center;font-family:'Instrument Serif',serif;font-style:italic;font-size:5rem;color:var(--navy);opacity:.5}
.member h2{font-size:2rem;font-weight:400;letter-spacing:-.02em}
.member-role{margin-top:4px;font-size:.9375rem;text-transform:uppercase;letter-spacing:.1em;opacity:.6}
.member-spec{margin-top:10px;font-size:1rem;font-weight:500}
.member-bio{margin-top:14px;font-size:1.0625rem;line-height:1.65;opacity:.9;max-width:42rem}
.member-contacts{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.member-mail{text-decoration:underline;font-size:.9375rem;margin-left:6px}
.member-reviews{margin-top:28px;padding-top:24px;border-top:1px solid var(--muted);display:grid;gap:12px}
@media(min-width:1024px){.member-reviews{grid-template-columns:repeat(3,1fr)}.member-reviews .eyebrow{grid-column:1/-1;margin-bottom:0}}
.member-reviews .review.small{background:var(--paper)}
[hidden]{display:none!important}
.site{background:var(--paper)}
.svc,.team{background:var(--paper)}
.svc-hero{background:transparent}
@media(min-width:900px){.svc-hero{padding-inline:24px}}


/* =========================================================================
   v3.1 — landing servizi, contatti
   ========================================================================= */
.lp,.contact{background:var(--paper)}
.lp-hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;background-image:var(--hero-img);background-size:cover;background-position:center right;padding:140px 24px 64px;color:#fff;isolation:isolate}
@media(min-width:768px){.lp-hero{padding:160px 24px 88px;min-height:88vh}}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(21,28,44,.78) 0%,rgba(21,28,44,.45) 45%,rgba(21,28,44,.1) 100%),linear-gradient(180deg,rgba(21,28,44,0) 50%,rgba(21,28,44,.55) 100%)}
.lp-hero-inner{max-width:72rem;margin:0 auto;width:100%}
.lp-hero h1{font-size:clamp(2.4rem,5.6vw,4.5rem);font-weight:400;line-height:1.04;letter-spacing:-.03em;max-width:16ch;margin-bottom:20px;text-shadow:0 2px 20px rgba(0,0,0,.25)}
.lp-hero .eyebrow{color:#fff;opacity:.8}
.lp-lead{font-size:1.125rem;line-height:1.6;max-width:34rem;opacity:.95;margin-bottom:28px}
@media(min-width:768px){.lp-lead{font-size:1.25rem}}
.lp-hero .trust-strip{justify-content:flex-start;margin-top:24px}
.crumbs.light{color:#fff;opacity:.8}
.lp-numbers{background:var(--navy);color:#fff;display:grid;grid-template-columns:repeat(3,1fr);max-width:none}
.lp-num{padding:28px 16px;text-align:center;border-right:1px solid rgba(255,255,255,.12)}
.lp-num:last-child{border:0}
.lp-num b{display:block;font-weight:400;font-size:clamp(1.75rem,4vw,2.75rem);letter-spacing:-.02em;line-height:1}
.lp-num span{display:block;margin-top:6px;font-size:.875rem;opacity:.8}
.lp-shift{padding:80px 24px}
@media(min-width:768px){.lp-shift{padding:112px 24px}}
.lp-shift-inner{max-width:72rem;margin:0 auto;display:grid;gap:24px;align-items:stretch}
@media(min-width:900px){.lp-shift-inner{grid-template-columns:1fr 60px 1fr}}
.lp-col{border-radius:24px;padding:32px}
.lp-col ul{display:flex;flex-direction:column;gap:14px}
.lp-col li{display:flex;gap:12px;font-size:1.0625rem;line-height:1.5;align-items:flex-start}
.lp-col.pain{background:#fff}
.lp-col.pain li::before{content:"×";flex:none;width:24px;height:24px;border-radius:999px;background:var(--paper);display:grid;place-items:center;font-size:1rem;opacity:.6}
.lp-col.gain{background:var(--navy);color:#fff}
.lp-col.gain .eyebrow{color:#fff}
.lp-col.gain li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:999px;background:#fff;color:var(--navy);display:grid;place-items:center;font-size:.8rem}
.lp-arrow{display:none;place-items:center;color:var(--navy);opacity:.5}
@media(min-width:900px){.lp-arrow{display:grid}}
.lp-benefits{background:#fff;padding:80px 24px}
@media(min-width:768px){.lp-benefits{padding:112px 24px}}
.lp-benefit-grid{max-width:72rem;margin:40px auto 0;display:grid;gap:18px}
@media(min-width:768px){.lp-benefit-grid{grid-template-columns:repeat(3,1fr)}}
.lp-benefit{background:var(--paper);border-radius:24px;padding:30px}
.lp-benefit .sicon{background:#fff}
.lp-benefit h3{font-size:1.25rem;font-weight:500;margin-bottom:8px}
.lp-benefit p{font-size:1rem;line-height:1.6;opacity:.85}
.lp-for{padding:80px 24px}
@media(min-width:768px){.lp-for{padding:112px 24px}}
.lp-for-inner{max-width:72rem;margin:0 auto;display:grid;gap:40px;align-items:center}
@media(min-width:900px){.lp-for-inner{grid-template-columns:1fr 1fr;gap:72px}}
.lp-media{margin:0;border-radius:28px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 70px rgba(8,41,113,.16)}
.lp-media video{width:100%;height:100%;object-fit:cover}
.lp-for h2{font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:400;letter-spacing:-.02em;margin-bottom:24px}
.lp-process{background:#fff;padding:80px 24px}
@media(min-width:768px){.lp-process{padding:112px 24px}}
.lp-steps{max-width:72rem;margin:48px auto 0;display:grid;gap:18px;counter-reset:s}
@media(min-width:768px){.lp-steps{grid-template-columns:repeat(4,1fr)}}
.lp-steps li{position:relative;background:var(--paper);border-radius:22px;padding:28px 24px 24px}
.lp-steps .fnum{display:block;font-size:2.5rem;color:var(--navy);opacity:.35;margin-bottom:8px}
.lp-steps h3{font-size:1.125rem;font-weight:500;margin-bottom:8px}
.lp-steps p{font-size:.9375rem;line-height:1.6;opacity:.85}
.lp-reviews{padding:80px 24px}
@media(min-width:768px){.lp-reviews{padding:112px 24px}}
.lp-reviews .review{background:#fff}
.review footer a{text-decoration:underline}
.lp-final{background:var(--navy);color:#fff;text-align:center;padding:88px 24px}
.lp-final h2{font-size:clamp(1.75rem,3.6vw,2.75rem);font-weight:400;letter-spacing:-.02em;line-height:1.15;margin-bottom:28px}
.lp-final .hero-actions{justify-content:center}
.lp-final .btn-white{color:var(--navy)}

/* Contatti */
.contact-hero{min-height:64vh}
@media(min-width:768px){.contact-hero{min-height:70vh}}
.contact-ways{max-width:72rem;margin:-48px auto 0;position:relative;z-index:2;display:grid;gap:14px;padding:0 24px}
@media(min-width:640px){.contact-ways{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.contact-ways{grid-template-columns:repeat(4,1fr)}}
.way{background:#fff;border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:4px;box-shadow:0 16px 40px rgba(8,41,113,.1);transition:transform .25s,box-shadow .25s}
.way:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(8,41,113,.14)}
.way .sicon{margin-bottom:12px;font-weight:600}
.way b{font-size:.8125rem;text-transform:uppercase;letter-spacing:.12em;opacity:.6}
.way-main{font-size:1.25rem;font-weight:500;letter-spacing:-.01em}
.way-sub{font-size:.9375rem;line-height:1.5;opacity:.75;margin-top:6px}
.way-primary{background:var(--navy);color:#fff}
.way-primary .sicon{background:#fff;color:var(--navy)}
.contact-info{padding:64px 24px}
.contact-info-inner{max-width:72rem;margin:0 auto;display:grid;gap:18px}
@media(min-width:900px){.contact-info-inner{grid-template-columns:1.1fr 1.2fr .9fr}}
.contact-card{background:#fff;border-radius:24px;padding:30px}
.hours{width:100%;border-collapse:collapse;font-size:1rem}
.hours th{text-align:left;font-weight:500;padding:10px 0;border-bottom:1px solid var(--muted);width:40%}
.hours td{padding:10px 0;border-bottom:1px solid var(--muted);opacity:.9}
.hours tr:last-child th,.hours tr:last-child td{border:0}
.hours .closed td{opacity:.45}
.contact-note{margin-top:16px;font-size:.9375rem;line-height:1.6;opacity:.85}
.contact-note a{text-decoration:underline}
.contact-addr{font-size:1.0625rem;line-height:1.6}
.contact-card .hero-actions{margin-top:20px}
.contact-map{max-width:72rem;margin:0 auto;padding:0 24px 24px}
.contact-map iframe{width:100%;height:420px;border:0;border-radius:24px;display:block}

/* =========================================================================
   v3.2 — fix mobile, footer a box, social, WhatsApp, blog, legale, cookie
   ========================================================================= */

/* --- Fix scorrimento laterale su mobile ---
   Causa: elementi larghi (hero video, griglie, mappa) che sforavano il viewport. */
html,body{max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
.site,.hero,.features,.lp,.contact,.blog,.legal{max-width:100vw;overflow-x:clip}
*{min-width:0}
img,video,iframe,table{max-width:100%}
.hero-video{width:100%;height:100%;left:0;top:0}
.features-bg{width:100vw;left:0;right:auto}
@media(max-width:900px){
  /* niente background-attachment fixed su mobile: causa sfarfallio e drift */
  .features-bg{position:absolute;height:100%}
  .features{overflow:hidden}
}
.lp-hero{background-attachment:scroll}

/* --- WhatsApp: CTA evidente --- */
.pill-wa{background:#1f8f4e;color:#fff;padding-right:20px}
.pill-wa:hover{background:#18763f}
.pill-wa .pill-ico{background:#fff;color:#1f8f4e}
.wa-text{display:flex;flex-direction:column;line-height:1.25;text-align:left;text-transform:none;letter-spacing:0}
.wa-text b{font-size:.9375rem;font-weight:600}
.wa-text small{font-size:.75rem;opacity:.9;font-weight:400}
.wa-text small::before{content:"";display:inline-block;width:7px;height:7px;border-radius:999px;background:#8ff0b0;margin-right:6px;animation:wapulse 1.8s ease-in-out infinite}
@keyframes wapulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.wa-text small::before{animation:none}}
.way-wa .sicon{background:#1f8f4e;color:#fff}
.mb-wa{background:#1f8f4e;color:#fff}
.mb-wa svg{color:#fff}

/* --- Social --- */
.socials{display:flex;gap:10px;margin-top:24px}
.socials a{width:42px;height:42px;border-radius:999px;background:var(--paper);color:var(--navy);display:grid;place-items:center;transition:background .25s,color .25s,transform .25s}
.socials a:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}

/* --- Box blu del footer --- */
.footer-boxes{max-width:72rem;margin:56px auto 0;display:grid;gap:16px;align-items:stretch}
@media(min-width:760px){.footer-boxes{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.footer-boxes{grid-template-columns:1fr 1fr 1.2fr}}
.fbox{background:var(--navy);color:#fff;border-radius:22px;padding:32px}
.fbox-title{font-size:1.25rem;font-weight:600;margin-bottom:18px}
.fbox-line{font-size:1rem;line-height:1.75;opacity:.92}
.fbox-line a{text-decoration:underline}
.fbox-list{display:flex;flex-direction:column;gap:14px}
.fbox-list a{font-size:1rem;opacity:.92;transition:opacity .25s}
.fbox-list a:hover{opacity:1;text-decoration:underline}
.fbox-brand{display:flex;flex-direction:column;gap:24px}
.fbox-logo{height:auto;width:min(260px,70%)}
.fbox-nav a{text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:.9375rem}

/* --- Blog --- */
.blog,.post-single,.legal{background:var(--paper)}
.blog-hero,.post-hero,.legal-hero{max-width:72rem;margin:0 auto;padding:140px 24px 40px}
@media(min-width:768px){.blog-hero,.post-hero,.legal-hero{padding:160px 24px 48px}}
.blog-hero h1,.post-hero h1,.legal-hero h1{font-size:clamp(2rem,4.6vw,3.5rem);font-weight:400;line-height:1.08;letter-spacing:-.025em;margin-bottom:18px;max-width:22ch}
.blog-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.blog-cats a{display:inline-block;padding:8px 16px;border-radius:999px;background:#fff;font-size:.9375rem;font-weight:500;transition:background .25s,color .25s}
.blog-cats a:hover,.blog-cats a.is-active{background:var(--navy);color:#fff}
.blog-grid{max-width:72rem;margin:0 auto;padding:0 24px 72px;display:grid;gap:20px}
@media(min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.post-card{background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(8,41,113,.12)}
.post-thumb{aspect-ratio:16/10;background:var(--paper);display:grid;place-items:center;overflow:hidden}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.post-ph{font-family:'Instrument Serif',serif;font-style:italic;font-size:3rem;color:var(--navy);opacity:.25}
.post-body{padding:24px;display:flex;flex-direction:column;flex:1;gap:8px}
.post-meta{font-size:.8125rem;opacity:.6;text-transform:none;letter-spacing:.02em}
.post-body h2{font-size:1.1875rem;font-weight:500;line-height:1.3}
.post-body p{font-size:1rem;line-height:1.6;opacity:.8;flex:1}
.post-body .link{display:inline-flex;align-items:center;gap:6px;font-size:.9375rem;font-weight:500;margin-top:6px}
.blog-empty{grid-column:1/-1;font-size:1.0625rem;opacity:.8}
.blog-nav{padding:0 24px 72px;text-align:center}
.blog-nav .page-numbers{display:inline-block;padding:8px 14px;border-radius:10px;margin:0 3px;background:#fff}
.blog-nav .current{background:var(--navy);color:#fff}
.post-cover{max-width:72rem;margin:0 auto 40px;padding:0 24px}
.post-cover img{width:100%;border-radius:24px}
.post-single .prose,.legal-body{max-width:44rem;margin:0 auto;padding:0 24px 64px;font-size:1.0625rem;line-height:1.75}
.post-single .prose h2,.legal-body h2{font-size:1.75rem;font-weight:400;letter-spacing:-.02em;margin:40px 0 14px}
.post-single .prose h3,.legal-body h3{font-size:1.25rem;font-weight:500;margin:28px 0 10px}
.post-single .prose p,.legal-body p{margin-bottom:16px}
.post-single .prose ul,.legal-body ul{margin:0 0 18px;padding-left:22px;list-style:disc}
.post-single .prose li,.legal-body li{margin-bottom:8px}
.post-single .prose a,.legal-body a{text-decoration:underline}
.legal-body .lead{font-size:1.125rem;opacity:.85;padding-bottom:8px;border-bottom:1px solid var(--muted);margin-bottom:28px}
.legal-table{width:100%;border-collapse:collapse;margin:18px 0 26px;font-size:.9375rem;background:#fff;border-radius:14px;overflow:hidden}
.legal-table th,.legal-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--muted);vertical-align:top}
.legal-table th{font-weight:600;background:var(--paper)}
.legal-table tr:last-child td{border-bottom:0}
@media(max-width:640px){.legal-table,.legal-table tbody,.legal-table tr,.legal-table td,.legal-table th{display:block}.legal-table th{background:transparent;padding-bottom:0}}
.post-cta{max-width:44rem;margin:0 auto 72px;background:#fff;border-radius:24px;padding:32px;text-align:center}
.post-cta h2{font-size:1.5rem;font-weight:400;margin-bottom:20px}
.post-cta .hero-actions{justify-content:center}
.post-related{padding-bottom:32px}
.link-btn{background:none;border:0;padding:0;color:inherit;text-decoration:underline;font:inherit;cursor:pointer}

/* --- Embed con consenso --- */
.embed-gate{background:var(--paper);border:1px dashed var(--muted);border-radius:24px;padding:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;min-height:220px;height:100%}
.embed-gate p{font-size:1rem;line-height:1.6;max-width:32rem}
.embed-gate .pill-btn{margin-top:6px}
.embed-alt{font-size:.9375rem;text-decoration:underline;opacity:.75}
.contact-map .embed-gate,.where-map .embed-gate{min-height:320px}
.video-embed{margin:24px 0}
.video-embed iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:18px}

/* --- Banner cookie --- */
.ck{position:fixed;left:12px;right:12px;bottom:12px;z-index:80}
@media(min-width:900px){.ck{left:auto;right:24px;bottom:24px;max-width:460px}}
.ck-box{background:#fff;border-radius:20px;padding:24px;box-shadow:0 20px 60px rgba(8,41,113,.25)}
.ck-title{font-size:1.125rem;font-weight:600;margin-bottom:8px}
.ck-text{font-size:.9375rem;line-height:1.55;opacity:.85}
.ck-text a{text-decoration:underline}
.ck-prefs{display:flex;flex-direction:column;gap:10px;margin-top:16px;font-size:.9375rem}
.ck-prefs label{display:flex;gap:10px;align-items:center}
.ck-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ck-btn{flex:1;min-width:110px;border:1.5px solid var(--muted);background:#fff;color:var(--navy);border-radius:999px;padding:11px 14px;font-size:.9375rem;font-weight:600;transition:background .25s,border-color .25s}
.ck-btn:hover{border-color:var(--navy)}
.ck-accept{background:var(--navy);border-color:var(--navy);color:#fff}
.ck-accept:hover{background:var(--navy-hover)}
@media(max-width:899px){.mobile-bar{bottom:12px}.ck{bottom:84px}}

/* --- Prequalificatore: opzioni con icona, riferimenti nello scarto --- */
.pq-opt-ico span{display:flex;align-items:center;gap:10px}
.pq-opt-ico i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--paper);color:var(--navy);flex:none}
.pq-opt-ico input:checked+span i{background:rgba(255,255,255,.18);color:#fff}
.pq-scarto{border-left:3px solid var(--navy)}
.pq-refs{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.pq-refs li{display:flex;align-items:center;gap:10px;font-size:1.0625rem}
.pq-refs a{text-decoration:underline;font-weight:500}

/* --- Footer: box compliance (marchi e iscrizioni) --- */
.footer-compliance{max-width:min(var(--max-width),72rem);margin:56px auto 0;display:grid;gap:16px;align-items:stretch}
@media(min-width:900px){.footer-compliance{grid-template-columns:1.35fr 1fr}}
.cbox{background:var(--sage-light);border-radius:22px;padding:30px;display:flex;flex-direction:column;gap:26px;justify-content:space-between}
.cbox-row{display:grid;gap:16px;align-items:start}
@media(min-width:520px){.cbox-row{grid-template-columns:190px 1fr;gap:24px}}
.cbox-logo{display:flex;align-items:flex-start}
.cbox-logo img{height:auto;max-width:180px}
.cbox-heading{font-size:1.375rem;font-weight:400;color:var(--dark-blue);letter-spacing:-.01em}
.cbox p{font-size:.9375rem;line-height:1.6;color:var(--dark-blue)}
.cbox a{text-decoration:underline}
.cbox strong{font-weight:600}
/* logo header: nitidezza su schermi ad alta densità */
.brand img{height:38px;width:auto;image-rendering:auto}
.pill-nav.is-scrolled .brand img{height:32px}
@media(max-width:640px){.brand img{height:32px}}
/* Logo header: dimensioni reali via CSS, sorgente sempre ad alta risoluzione */
.brand img{height:42px;width:auto;max-width:none}
.pill-nav.is-scrolled .brand img{height:34px}
@media(max-width:640px){.brand img{height:34px}}
.team-empty{background:#fff;border-radius:22px;padding:28px;font-size:1.0625rem;line-height:1.6}
.team-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.team-note{margin-top:14px;font-size:.9375rem;opacity:.75}


/* --- Foto dei consulenti: ritaglio forzato 4:5, indipendente dal file caricato --- */
.member{align-items:start}
.member-photo{position:relative;width:100%;max-width:280px;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--paper)}
@media(max-width:767px){.member-photo{max-width:220px}}
.member-photo>img,
.member-photo>a>img,
.member-photo picture,
.member-photo picture>img{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;max-width:none!important;
  object-fit:cover!important;object-position:center 22%!important;
  border-radius:0!important;margin:0!important
}
.member-ph{position:absolute;inset:0;display:grid;place-items:center;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:4.5rem;color:var(--brand-blue);opacity:.35}


/* =========================================================================
   v4 — selettore lingua, blocco argomentativo, sede, lingue
   ====================================================================== */

/* --- Selettore di lingua nella pillola del menu -------------------------- */
.lang-switch{position:relative;margin-left:auto}
.lang-toggle{display:inline-flex;align-items:center;gap:6px;background:var(--paper);color:var(--navy);border:0;border-radius:999px;padding:8px 12px;font:inherit;font-size:.8125rem;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background .2s}
.lang-toggle:hover{background:var(--muted)}
.lang-toggle[aria-expanded="true"]{background:var(--navy);color:#fff}
.lang-switch .lang-code{line-height:1}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;min-width:190px;margin:0;padding:6px;list-style:none;background:#fff;border-radius:16px;box-shadow:0 16px 44px rgba(8,41,113,.18)}
.lang-menu[hidden]{display:none}
.lang-menu li{margin:0}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;font-size:.9375rem;color:var(--dark-blue);text-decoration:none;transition:background .18s}
.lang-menu a:hover{background:var(--paper)}
.lang-menu a.is-current{background:var(--navy);color:#fff;font-weight:600}
.lang-menu .lang-code{flex:0 0 26px;font-size:.6875rem;font-weight:700;letter-spacing:.06em;opacity:.65}
.lang-menu a.is-current .lang-code{opacity:.9}
@media(max-width:640px){.lang-switch{margin-left:0}.lang-toggle{padding:8px 10px}}

/* --- Hero: etichetta sopra al titolo ------------------------------------ */
.hero-kicker{display:inline-block;margin-bottom:14px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase}

/* --- Blocco argomentativo "Perché un mediatore" --------------------------------------------- */
.why{position:relative;z-index:10;background:#fff;border-radius:25px 25px 0 0;padding:80px 24px}
.why-inner{max-width:1180px;margin:0 auto}
.why-head{max-width:46rem}
.why-head .section-title{text-align:left;margin-left:0}
.why-lead{margin-top:18px;font-size:1.0625rem;line-height:1.7;opacity:.85}
.why-grid{display:grid;gap:40px;margin-top:48px}
@media(min-width:900px){.why-grid{grid-template-columns:1.05fr .95fr;align-items:start;gap:56px}}
.why-points{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.why-points li{display:flex;gap:16px;align-items:flex-start}
.why-n{flex:0 0 auto;width:34px;height:34px;border-radius:999px;background:var(--paper);color:var(--navy);display:grid;place-items:center;font-size:.8125rem;font-weight:700;letter-spacing:.02em}
.why-points h3{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.35}
.why-points p{margin:6px 0 0;font-size:.9688rem;line-height:1.6;opacity:.78}
.why-media{margin:0;border-radius:24px;overflow:hidden;background:var(--paper)}
.why-media img,.why-media picture{display:block;width:100%;height:auto}
.why-media figcaption{padding:14px 18px;font-size:.875rem;line-height:1.5;opacity:.7;background:var(--paper)}
.why-foot{margin-top:44px;padding-top:32px;border-top:1px solid var(--wale-light);display:grid;gap:24px}
@media(min-width:900px){.why-foot{grid-template-columns:1.3fr auto;align-items:center;gap:40px}}
.why-note{margin:0;font-size:1rem;line-height:1.7;opacity:.85;max-width:44rem}

/* --- Card del servizio di punta ----------------------------------------- */
.scard-flag{background:var(--navy);color:#fff}
.scard-flag .q{opacity:.72}
.scard-flag p{opacity:.86}
.scard-flag .sicon{background:rgba(255,255,255,.14);color:#fff}
.scard-flag:hover{box-shadow:0 18px 44px rgba(8,41,113,.28)}

/* --- Sezione lingue ------------------------------------------------------ */
.langs{position:relative;z-index:10;background:var(--paper);padding:64px 24px}
.langs-inner{max-width:960px;margin:0 auto;display:flex;gap:24px;align-items:flex-start;background:#fff;border-radius:24px;padding:36px}
@media(max-width:640px){.langs-inner{flex-direction:column;padding:28px;gap:18px}}
.langs-ico{flex:0 0 auto;width:52px;height:52px;border-radius:999px;background:var(--paper);color:var(--navy);display:grid;place-items:center}
.langs .section-title{text-align:left;margin:0 0 12px}
.langs p{margin:0;font-size:1rem;line-height:1.7;opacity:.85}
.langs-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.langs-list a{display:inline-block;padding:8px 16px;border-radius:999px;background:var(--paper);color:var(--navy);font-size:.9375rem;font-weight:500;text-decoration:none;transition:background .2s}
.langs-list a:hover{background:var(--muted)}

/* --- Elenco delle due sedi ---------------------------------------------- */
.where-sedi{list-style:none;margin:22px 0;padding:0;display:grid;gap:14px}
@media(min-width:640px){.where-sedi{grid-template-columns:1fr 1fr;gap:18px}}
.where-sedi li{background:#fff;border-radius:16px;padding:16px 18px}
.where-sedi b{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.55;margin-bottom:5px}
.where-sedi a{font-size:.9688rem;line-height:1.5;color:var(--navy)}

/* --- Card del percorso: immagini al posto dei video --------------------- */
.fmedia img,.fmedia picture{display:block;width:100%;height:100%;object-fit:cover}
.fmedia picture{display:block}

/* --- Indirizzo nel footer, con due sedi --------------------------------- */
.footer-address strong{display:block;margin-top:10px;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.5}
.footer-address strong:first-child{margin-top:0}

/* --- Terza colonna di link nel footer ----------------------------------- */
@media(min-width:900px){.footer-links{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- Contatti: due mappe affiancate, una per sede --------------------- */
.contact-map-due{display:grid;gap:20px}
@media(min-width:900px){.contact-map-due{grid-template-columns:1fr 1fr;gap:24px}}
.contact-map-due figure{margin:0}
.contact-map-due figcaption{margin-bottom:10px;font-size:.8125rem;font-weight:600;letter-spacing:.02em;opacity:.7}
.contact-map-due iframe,.contact-map-due .embed-gate{width:100%;min-height:320px;border:0;border-radius:20px}

/* --- Hero: immagine fissa al posto del video ---------------------------- */
.hero-media{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
@media(max-width:640px){.hero-media img{object-position:70% 40%}}
/* Sull'immagine chiara serve una velatura più decisa perché il testo resti leggibile */
.hero .hero-overlay{background:linear-gradient(100deg,rgba(8,41,113,.88) 0%,rgba(8,41,113,.72) 38%,rgba(8,41,113,.34) 62%,rgba(8,41,113,.18) 100%)}
@media(max-width:900px){.hero .hero-overlay{background:linear-gradient(180deg,rgba(8,41,113,.62) 0%,rgba(8,41,113,.80) 55%,rgba(8,41,113,.90) 100%)}}

/* --- Mobile: la pillola del menu non deve coprire l'etichetta dell'hero ---
   La navbar è flottante e sovrapposta all'hero. Su schermi stretti il logo
   finiva sopra la riga "Mediazione creditizia a Torino · …": diamo all'hero
   uno spazio in alto pari all'altezza reale della pillola. */
@media(max-width:900px){
  /* `justify-content:flex-end` con contenuto più alto del contenitore lo fa
     traboccare dal BORDO SUPERIORE, ignorando il padding: era la ragione per cui
     il logo finiva sopra l'etichetta. Con `margin-top:auto` il margine si annulla
     da solo quando non c'è spazio, e il padding viene rispettato. */
  .hero{height:auto;min-height:100vh;justify-content:flex-start;padding-top:120px}
  .hero-content{margin-top:auto}
  .hero-kicker{margin-bottom:10px}
}
@supports(min-height:100svh){@media(max-width:900px){.hero{min-height:100svh}}}
@media(max-width:640px){
  .hero{padding-top:108px}
  .hero-kicker{font-size:.6875rem;letter-spacing:.07em;padding:6px 12px;line-height:1.45;text-align:center}
}
@media(max-width:380px){
  .hero{padding-top:100px}
  .hero-kicker{padding:5px 10px}
}


/* =========================================================================
   Touch: reattività al primo tocco

   Su iOS un elemento con stili :hover intercetta il primo tocco per mostrare
   l'effetto, e solo il secondo apre il link. Qui l'unica cosa che facciamo è
   NON applicare l'effetto hover dove un puntatore non esiste.

   Volutamente NON usiamo:
   · transform su :active — l'elemento si sposta sotto il dito mentre il
     browser decide se è un tocco o uno scorrimento, e il clic viene annullato;
   · pointer-events:none sui figli — non serve, l'intera card è già un <a>,
     e aggiunge un punto di rottura in più.
   ====================================================================== */
@media (hover: none), (pointer: coarse) {
  /* nessuno spostamento al tocco: la card resta ferma e il link parte subito */
  .scard,
  .scard:hover,
  .scard:focus,
  .way:hover,
  .review:hover,
  .lp-benefit:hover,
  .post-card:hover { transform: none; }

  .scard:hover .link svg { transform: none; }

  /* riscontro visivo senza muovere nulla */
  .scard:active { background: var(--muted); }
  .scard-flag:active { background: var(--dark-blue); }
  .way:active,
  .post-card:active { background: var(--muted); }

  /* L'animazione d'ingresso sposta l'elemento di 20 px verso l'alto con un
     ritardo scalato fino a 360 ms. Se il dito arriva mentre il movimento è in
     corso, il browser interpreta il tocco su un bersaglio che si sta spostando
     e annulla il clic: è la ragione per cui serviva tappare più volte.
     Su touch teniamo la sola dissolvenza, che non muove nulla. */
  .reveal { transform: none; transition: opacity .35s ease-out; transition-delay: 0ms !important; }
  .reveal.is-visible { transform: none; }
}

/* Nessun ritardo di 300 ms sugli elementi cliccabili */
a, button, [role="button"], label, summary,
.scard, .way, .pill-btn, .mb-btn { touch-action: manipulation; }

.scard, .way, .mb-btn, .pill-btn { -webkit-tap-highlight-color: rgba(8,41,113,.10); }


/* =========================================================================
   Banner cookie: non deve rendere irraggiungibile ciò che sta sotto.
   È fisso e resta finché l'utente non sceglie. Finché è aperto la pagina
   riserva in fondo uno spazio pari alla sua altezza (--ck-h, impostata dal
   suo script), così qualsiasi elemento può essere portato allo scoperto
   scorrendo. Teniamo inoltre il riquadro compatto.
   ====================================================================== */
body.ck-open .site { padding-bottom: calc(var(--ck-h, 0px) + 16px); }
@media(max-width:899px){ body.ck-open .site { padding-bottom: calc(var(--ck-h, 0px) + 92px); } }

.ck-box { max-width: 100%; }
.ck-text { font-size: .875rem; line-height: 1.5; }
@media(min-width:900px){
  .ck { max-width: 400px; }
  .ck-text { font-size: .8125rem; }
}
/* Su telefono il banner deve restare una fascia, non mezza schermata */
@media(max-width:899px){
  .ck-box   { padding: 16px 16px 14px; border-radius: 16px; }
  .ck-title { font-size: .9375rem; margin-bottom: 4px; }
  .ck-text  { font-size: .8125rem; line-height: 1.45; }
  .ck-actions { gap: 6px; margin-top: 12px; }
  .ck-btn   { min-width: 0; padding: 9px 10px; font-size: .8125rem; }
  /* i tre tasti su una riga sola: è ciò che alza di più il riquadro */
  .ck-actions { flex-wrap: nowrap; }
}


/* =========================================================================
   Intestazione: eliminazione del rettangolo fantasma

   .pill-nav è un contenitore flex in colonna che contiene la pillola visibile
   e il menu a tendina. Il menu chiuso è invisibile (opacity:0) e non riceve il
   tocco, ma restava nel flusso: il box dell'header risultava alto 440 px
   invece di 56, ed essendo position:fixed con z-index:50 copriva metà schermo.
   Qualsiasi elemento cliccabile finisse in quella fascia diventava inerte.

   Due interventi: il primo toglie il tocco al contenitore, il secondo rimuove
   la causa facendo uscire il menu chiuso dal flusso.
   ====================================================================== */

/* 1 · il contenitore non intercetta nulla; lo fanno solo i figli utili */
.pill-nav { pointer-events: none; }
.pill-nav .pill { pointer-events: auto; }
.pill-nav.is-open .pill-menu { pointer-events: auto; }

/* 2 · il menu esce dal flusso: l'header torna alto quanto la pillola */
.pill-nav { align-items: stretch; gap: 0; }
.pill-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 10px;
  transform-origin: top center;
  transform: translate(-50%, -8px) scale(.96);
}
/* la regola esistente usa `transform:none` sul menu aperto: va sovrascritta,
   altrimenti la traslazione che centra il menu viene annullata */
.pill-nav.is-open .pill-menu { transform: translate(-50%, 0) scale(1); }
@media (min-width: 900px) {
  .pill-menu { left: auto; right: 0; transform: translate(0, -8px) scale(.96); }
  .pill-nav.is-open .pill-menu { transform: translate(0, 0) scale(1); }
}

/* 3 · strati puramente decorativi: non devono ricevere il tocco */
.hero-overlay,
.features-bg,
.hero-media { pointer-events: none; }


/* La barra dei contatti si ritrae sul footer, così i link in fondo restano
   toccabili; e la pagina riserva comunque lo spazio della barra. */
.mobile-bar { transition: transform .25s ease, opacity .25s ease; }
.mobile-bar.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media(max-width:899px){ .site { padding-bottom: 88px; } }


/* =========================================================================
   v5 — RITMO DELLE SEZIONI

   Obiettivo: lo sguardo scende lungo la pagina incontrando un blocco alla
   volta, ciascuno con un solo messaggio e una sola azione. Tre strumenti:

   1. Fondi alternati. Nessuna sezione ha lo stesso fondo di quella che la
      precede. La sequenza è chiaro → scuro → chiaro, con due ancoraggi scuri
      per pagina che fanno da "respiro" e da cambio di capitolo.
   2. Spaziatura verticale unica (--sec-pad) più generosa di prima: è lo
      spazio vuoto, non una linea, a dire dove finisce un blocco.
   3. Bordo superiore arrotondato sulle sezioni chiare che salgono su una
      scura: il blocco successivo sembra scorrere sopra il precedente.

   Gerarchia interna: .section-head tiene insieme etichetta, titolo e
   sommario, e nessun altro elemento può stare tra loro.
   ====================================================================== */
:root{
  --sec-pad: clamp(76px, 9vw, 136px);
  --sec-pad-sm: clamp(56px, 6vw, 88px);
  --sec-round: 28px;
}

/* 1 · spaziatura comune */
.sec{ padding-block: var(--sec-pad); position:relative; z-index:10 }
.sec.contact-info{ padding-block: var(--sec-pad-sm) }

/* 2 · fondi alternati: home */
.services{ background:#fff }
.langs{ background:var(--paper) }
.reviews{ background:var(--paper) }
.faq{ background:#fff }
.where{ background:var(--paper) }
.pq-on-white{ background:#fff }
.pq-on-white .pq-card{ background:var(--paper) }
.pq-on-white .pq-card .pq-opt span,
.pq-on-white .pq-card .pq-field input,
.pq-on-white .pq-card .pq-field select,
.pq-on-white .pq-card .pq-result{ background:#fff }

/* 3 · bordo arrotondato dove una sezione chiara sale su una scura */
.services,.langs{ border-radius: var(--sec-round) var(--sec-round) 0 0 }
.footer{ border-radius: var(--sec-round) var(--sec-round) 0 0; margin-top:-1px }

/* Intestazione di sezione: etichetta, titolo, sommario. Niente in mezzo. */
.section-head{ max-width:44rem; margin:0 auto clamp(40px,5vw,64px); text-align:center }
.section-head .eyebrow{ margin-bottom:12px }
.section-head .section-title{ margin-bottom:0 }
.section-head .services-lead{ margin:16px auto 0 }
.section-head .section-title + .services-lead{ margin-top:18px }
/* filo sottile sotto l'etichetta: segna l'inizio del blocco senza pesare */
.section-head .eyebrow::after{
  content:""; display:block; width:34px; height:2px; margin:12px auto 0;
  background:currentColor; opacity:.35; border-radius:2px;
}
.why .section-head .eyebrow::after,
.lp-story .section-head .eyebrow::after{ margin-inline:0 }


/* =========================================================================
   Card dei servizi: immagine + titolo + testo
   ====================================================================== */
.scard{
  padding:0; overflow:hidden; display:flex; flex-direction:column;
  background:#fff; border-radius:24px;
}
.scard-media{
  display:block; position:relative; aspect-ratio:3/2; overflow:hidden;
  background:var(--paper); flex:none;
}
.scard-media img,.scard-media picture{ display:block; width:100%; height:100%; object-fit:cover }
.scard-media img{ transition:transform .6s cubic-bezier(.2,.7,.3,1) }
.scard:hover .scard-media img{ transform:scale(1.045) }
.scard-body{ padding:24px 26px 28px; display:flex; flex-direction:column; flex:1 }
.scard .q{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:1.0625rem; line-height:1.35; opacity:.72; margin-bottom:10px;
}
.scard h3{ font-size:1.3125rem; font-weight:500; line-height:1.25 }
.scard p{ margin-top:10px }
.scard .link{ margin-top:18px }
/* la card di punta resta blu, ma solo nel corpo: l'immagine non va velata */
.scard-flag{ background:var(--navy); color:#fff }
.scard-flag .scard-body{ background:var(--navy) }
@media (hover: none),(pointer: coarse){
  .scard:hover .scard-media img{ transform:none }
}


/* =========================================================================
   Blocco argomentativo "Perché un mediatore" — ancoraggio scuro della home
   ====================================================================== */
.why{ background:var(--dark-blue); color:#fff; border-radius:0 }
.why-inner{ max-width:1180px; margin:0 auto }
.why-head{ max-width:46rem }
.why-head .section-title{ text-align:left; margin-left:0; margin-bottom:0 }
.why .eyebrow{ color:#fff; opacity:.7 }
.why-lead{ margin-top:18px; font-size:1.0625rem; line-height:1.7; opacity:.82 }
.why-grid{ display:grid; gap:40px; margin-top:clamp(40px,5vw,56px) }
@media(min-width:900px){ .why-grid{ grid-template-columns:1.05fr .95fr; align-items:start; gap:56px } }
.why-points{ list-style:none; margin:0; padding:0; display:grid; gap:26px }
.why-points li{ display:flex; gap:16px; align-items:flex-start }
.why-n{
  flex:0 0 auto; width:34px; height:34px; border-radius:999px;
  background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center;
  font-size:.8125rem; font-weight:700;
}
.why-points h3{ margin:0; font-size:1.0625rem; font-weight:600; line-height:1.35; color:#fff }
.why-points p{ margin:6px 0 0; font-size:.9688rem; line-height:1.65; opacity:.75 }
.why-media{ margin:0; border-radius:24px; overflow:hidden; background:rgba(255,255,255,.06) }
.why-media img,.why-media picture{ display:block; width:100%; height:auto }
.why-media figcaption{ padding:14px 18px; font-size:.875rem; line-height:1.5; opacity:.7 }
.why-foot{
  margin-top:clamp(40px,5vw,52px); padding-top:32px;
  border-top:1px solid rgba(255,255,255,.16); display:grid; gap:24px;
}
@media(min-width:900px){ .why-foot{ grid-template-columns:1.3fr auto; align-items:center; gap:40px } }
.why-note{ margin:0; font-size:1rem; line-height:1.75; opacity:.8; max-width:44rem }
.pill-light{ background:#fff; color:var(--navy) }
.pill-light:hover{ background:var(--wale-light) }
.pill-light .pill-ico{ background:var(--navy); color:#fff }


/* =========================================================================
   Pagine servizio: blocco narrativo al posto di "questa pagina è per te se"
   ====================================================================== */
.lp-story{ background:#fff }
.lp-story-inner{ max-width:72rem; margin:0 auto; display:grid; gap:40px; align-items:center }
@media(min-width:900px){ .lp-story-inner{ grid-template-columns:1fr 1fr; gap:72px } }
.lp-story-text h2{
  font-size:clamp(1.75rem,3.2vw,2.5rem); font-weight:400;
  letter-spacing:-.02em; line-height:1.15; margin-bottom:22px;
}
.lp-story-text p{ font-size:1.0625rem; line-height:1.75; opacity:.88; margin-bottom:18px }
.lp-story-text .pill-btn{ margin-top:8px }

/* fondi delle pagine servizio, alternati */
.lp-benefits{ background:var(--paper) }
.lp-benefit{ background:#fff }
.lp-benefit .sicon{ background:var(--paper) }
.lp-process{ background:#fff }
.lp-reviews{ background:var(--dark-blue); color:#fff }
.lp-reviews .eyebrow,.lp-reviews .section-title{ color:#fff }
.lp-reviews .eyebrow{ opacity:.7 }
.lp-reviews .review{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12) }
.lp-reviews .review footer{ opacity:.7 }
.svc-faq{ background:#fff }
.svc-faq .faq-item{ background:var(--paper) }
.svc-faq .faq-item:hover{ background:#e2e8f4 }

/* la fascia dei numeri fa da cerniera tra testata e primo blocco */
.lp-numbers{ position:relative; z-index:10 }
.lp-shift{ border-radius:var(--sec-round) var(--sec-round) 0 0 }

/* colonne del confronto: etichette più esplicite, stessa altezza */
.lp-shift-inner{ align-items:stretch }
.lp-col{ display:flex; flex-direction:column }
.lp-col .eyebrow{ margin-bottom:18px }


/* =========================================================================
   Dettagli di rifinitura
   ====================================================================== */
/* Griglia della zona nel modulo: nove province più la voce di scarto */

/* Elenco "dove siamo": indirizzo e orari come due schede */
.where-sedi span{ font-size:.9688rem; line-height:1.5; color:var(--navy) }

/* Footer: riga minore nel box del titolare */
.fbox-small{ margin-top:12px; font-size:.875rem; opacity:.75 }

/* Contatti: una sola mappa, a piena larghezza */
.contact-map figure{ margin:0 }
.contact-map figcaption{ margin-bottom:10px; font-size:.8125rem; font-weight:600; opacity:.7 }
.contact-map .embed-gate{ min-height:380px; border-radius:24px }

/* Chi siamo: la griglia respira come le altre sezioni */
.team-grid-wrap{ padding-block:0 var(--sec-pad) }

/* Su schermi molto larghi il testo non deve stirarsi */
.about-lead,.why-lead,.lp-story-text p{ max-width:38rem }
.section-head .services-lead{ max-width:36rem }


/* =========================================================================
   v5.1 — Striscia di fiducia, fascia garanzia, confronto in home
   ====================================================================== */

/* Striscia sopra la testata: unica riga, sta sotto la pillola flottante */
.trustbar{
  position:relative; z-index:40; display:flex; flex-wrap:wrap; justify-content:center;
  align-items:center; gap:6px 12px; padding:10px 20px;
  background:var(--dark-blue); color:rgba(255,255,255,.88);
  font-size:.8125rem; font-weight:500; line-height:1.4; text-align:center;
}
.trustbar-score{ display:inline-flex; align-items:center; gap:6px }
.trustbar-score:hover{ text-decoration:underline }
.trustbar-stars{ color:var(--yellow); letter-spacing:.08em }
.trustbar-score b{ color:#fff; font-weight:700 }
.trustbar-sep{ opacity:.4 }
@media(max-width:640px){
  .trustbar{ font-size:.75rem; padding:7px 14px; gap:2px 10px; line-height:1.35 }
  .trustbar-sep{ display:none }
}
/* la barra spinge in basso l'hero: la pillola del menu resta sopra di essa */
.pill-nav{ top:64px }
.pill-nav.is-scrolled{ top:12px }
@media(max-width:900px){ .hero{ padding-top:96px } }

/* Fascia garanzia: una promessa, una sola azione */
.risk{ position:relative; z-index:10; background:var(--navy); color:#fff; padding:clamp(40px,5vw,64px) 24px }
.risk-inner{
  max-width:72rem; margin:0 auto; display:grid; gap:22px; align-items:center;
  grid-template-columns:auto 1fr;
}
@media(min-width:1000px){ .risk-inner{ grid-template-columns:auto 1fr auto; gap:32px } }
.risk-ico{
  width:60px; height:60px; border-radius:999px; background:rgba(255,255,255,.14);
  display:grid; place-items:center; flex:none;
}
.risk h2{ font-size:clamp(1.375rem,2.6vw,2rem); font-weight:400; letter-spacing:-.02em; line-height:1.2 }
.risk p{ margin-top:10px; font-size:1rem; line-height:1.7; opacity:.85; max-width:52rem }
@media(max-width:999px){
  .risk-inner{ grid-template-columns:1fr }
  .risk-inner > .pill-btn{ justify-self:start }
}

/* Confronto in home: riusa le colonne delle pagine servizio */
.compare{ background:var(--paper) }
.compare .lp-shift-inner{ max-width:72rem; margin:0 auto; display:grid; gap:24px; align-items:stretch }
@media(min-width:900px){ .compare .lp-shift-inner{ grid-template-columns:1fr 60px 1fr } }

/* nota legale sotto la fascia garanzia e claim nella striscia */
.risk-note{ max-width:72rem; margin:20px auto 0; font-size:.8125rem; line-height:1.6; opacity:.6 }
.trustbar-risk{ font-weight:600; color:#fff }
@media(max-width:640px){ .trustbar-risk{ display:none } }

/* =========================================================================
   v5.2 — Blocco «hai ragione, ma…»

   Ogni voce è una coppia: la frase che il lettore ha in testa, in corsivo e
   fra virgolette, e sotto ciò che quella frase non tiene in conto. Il corsivo
   serif fa da "voce del lettore" e distingue a colpo d'occhio le due parti
   senza bisogno di etichette.
   ====================================================================== */
.truth{ background:var(--paper) }
.truth-inner{ max-width:60rem; margin:0 auto }
.truth-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px }
.truth-list li{
  background:#fff; border-radius:22px; padding:26px 28px;
  border-left:3px solid var(--navy);
}
@media(min-width:768px){ .truth-list li{ padding:30px 34px } }
.truth-think{
  font-family:'Instrument Serif',Georgia,serif; font-style:italic;
  font-size:1.25rem; line-height:1.35; color:var(--navy); margin-bottom:12px;
}
@media(min-width:768px){ .truth-think{ font-size:1.4375rem } }
.truth-real{ font-size:1rem; line-height:1.7; opacity:.88 }
@media(min-width:768px){ .truth-real{ font-size:1.0625rem } }

/* Benefici: ora hanno una descrizione lunga, servono più respiro */
.lp-benefit{ padding:32px 30px }
.lp-benefit h3{ font-size:1.1875rem; line-height:1.3; margin-bottom:10px }
.lp-benefit p{ font-size:1rem; line-height:1.7 }
@media(min-width:768px){ .lp-benefit-grid{ align-items:stretch } .lp-benefit{ display:flex; flex-direction:column } }

/* =========================================================================
   v5.3 — Sintesi + approfondimento, prova in linea, rassicurazioni nel modulo

   Il blocco «hai ragione, ma» mostrava quattro paragrafi lunghi di fila: un
   muro, soprattutto su telefono. Ora ogni voce dice la sua in una riga e
   l'approfondimento sta dietro un «Perché» che si apre solo a chi lo vuole.
   ====================================================================== */
.truth-real{ font-size:1.0625rem; line-height:1.6; opacity:.9; font-weight:500 }
@media(min-width:768px){ .truth-real{ font-size:1.125rem } }
.truth-more{ margin-top:14px }
.truth-more summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  font-size:.875rem; font-weight:600; letter-spacing:.02em; color:var(--navy);
  padding:6px 0; text-underline-offset:3px;
}
.truth-more summary::-webkit-details-marker{ display:none }
.truth-more summary::after{ content:"+"; font-size:1.05rem; line-height:1; opacity:.55; transition:transform .25s }
.truth-more[open] summary::after{ transform:rotate(45deg) }
.truth-more summary:hover{ text-decoration:underline }
.truth-more p{ margin-top:8px; font-size:.9688rem; line-height:1.7; opacity:.8 }

/* Prova sociale accanto all'argomento che sostiene, non relegata in fondo */
.proof{
  margin:28px 0 0; background:var(--navy); color:#fff; border-radius:22px;
  padding:26px 30px; display:flex; flex-direction:column; gap:10px;
}
.proof .stars{ color:var(--yellow); letter-spacing:.12em; font-size:.9375rem }
.proof p{ font-size:1.0625rem; line-height:1.65 }
.proof footer{ font-size:.875rem; opacity:.8 }
.proof footer a{ text-decoration:underline }

/* Le tre righe che tolgono le barriere, dove si chiede il numero */
.pq-reassure{ margin:18px 0 0; display:grid; gap:8px; list-style:none; padding:0 }
.pq-reassure li{
  display:flex; gap:9px; align-items:flex-start;
  font-size:.9063rem; line-height:1.5; opacity:.8;
}
.pq-reassure li::before{
  content:"✓"; flex:none; width:18px; height:18px; border-radius:999px;
  background:var(--navy); color:#fff; font-size:.625rem;
  display:grid; place-items:center; margin-top:2px;
}

/* =========================================================================
   v5.4 — Correzioni

   1. Griglia delle province. Su schermo largo cinque colonne strette
      spezzavano "Verbano-Cusio-Ossola" su tre righe e allungavano tutte le
      caselle. Ora le colonne si adattano al contenuto e la voce di scarto,
      che è la più lunga e non è una provincia, prende una riga sua.
   2. Nota della fascia garanzia allineata al titolo invece che centrata.
   ====================================================================== */

/* Nota legale della fascia garanzia: stessa colonna del testo */
.risk-note{ max-width:none; margin:16px 0 0; grid-column:auto }
@media(min-width:1000px){ .risk-inner > .risk-note{ grid-column:2 / 3 } }

/* =========================================================================
   v5.5 — Griglia delle province

   Prima c'erano tre regole diverse su .pq-options-4, scritte in momenti
   diversi, con quattro, cinque e "auto-fit" colonne: si sovrascrivevano a
   vicenda e il risultato cambiava con la larghezza della finestra. Ora ce n'è
   una sola.

   Le province non hanno lunghezze paragonabili — "Asti" contro
   "Verbano-Cusio-Ossola" — quindi una griglia a colonne uguali costringe le
   etichette lunghe a spezzarsi su tre righe e alza tutta la riga. Le trattiamo
   come etichette che si dimensionano sul contenuto e vanno a capo da sole:
   nessuna parola spezzata, nessuna casella più alta delle altre.
   ====================================================================== */
.pq-options-4{
  display:flex; flex-wrap:wrap; gap:10px; align-items:stretch;
}
.pq-options-4 .pq-opt{ flex:0 1 auto }
.pq-options-4 .pq-opt span{
  display:flex; align-items:center; justify-content:center; height:100%;
  padding:13px 18px; font-size:.9375rem; line-height:1.3;
  text-align:center; white-space:nowrap;
}
/* La voce di scarto non è una provincia: riga propria, a piena larghezza,
   e testo su una riga sola perché qui possiamo permetterci di andare a capo. */
.pq-options-4 .pq-opt:last-child{ flex:1 0 100%; margin-top:6px }
.pq-options-4 .pq-opt:last-child span{ white-space:normal }
@media(max-width:520px){
  .pq-options-4 .pq-opt{ flex:1 1 calc(50% - 5px) }
  .pq-options-4 .pq-opt span{ white-space:normal; padding:13px 10px }
}

/* la nota ora è dentro la colonna del testo: eredita l'allineamento */
.risk-note{ max-width:none; margin:14px 0 0; font-size:.8125rem; line-height:1.6; opacity:.6 }

/* =========================================================================
   v5.6 — Nuovo ordine delle pagine servizio

   I benefici ora vengono prima del blocco narrativo: dopo aver mostrato al
   lettore cosa non sta considerando, gli si dice subito cosa facciamo noi, e
   solo dopo si scende nell'approfondimento. I fondi vanno rialternati di
   conseguenza, perché la sequenza è cambiata.
   ====================================================================== */
.truth{ background:#fff }
.truth-list li{ background:var(--paper) }
.lp-benefits{ background:var(--paper) }
.lp-benefit{ background:#fff }
.lp-story{ background:#fff }
.lp-process{ background:var(--paper) }
.lp-process .lp-steps li{ background:#fff }

/* =========================================================================
   v5.7 — Testata della pagina Contatti

   Le testate delle pagine servizio hanno il soggetto sulla destra e usano
   `background-position: center right`, con il ritaglio verticale centrato.
   Su Contatti però la foto è di gruppo: centrando in verticale, `cover`
   taglia le teste della fila in alto. Qui ancoriamo il ritaglio al bordo
   superiore e al centro in orizzontale, così le persone restano intere e
   l'immagine scende dentro il riquadro invece di essere tranciata.
   ====================================================================== */
.contact-hero{
  /* 20% invece di 0: il ritaglio scende un po' dentro la foto, così
     l'immagine risale nel riquadro senza tornare a tagliare le teste. */
  background-position: center 20%;
  min-height: 68vh;
}
@media(min-width:768px){
  .contact-hero{ min-height: 76vh }
}

/* =========================================================================
   v6.1 — Testata su telefono

   Impianto: fotografia in una banda propria in alto, testo sotto su fondo
   pieno. Il testo non sta MAI sopra l'immagine — su una colonna sola non c'è
   modo di renderlo leggibile senza spegnere la foto.

   La banda ha tre accorgimenti:

   1. comincia sotto la pillola del menu (--band-top): sopra c'è blu pieno,
      così il logo bianco sta su fondo compatto;
   2. il suo bordo superiore non è un taglio ma una dissolvenza dal blu:
      l'immagine emerge dal fondo invece di essere appoggiata sopra;
   3. il bordo inferiore fa la stessa cosa al contrario, sfumando nel blu del
      blocco di testo, così la giunzione non si vede.

   L'altezza è in vw e non in vh perché su telefono la barra del browser che
   compare e sparisce fa ballare i vh.
   ====================================================================== */
@media (max-width: 767px) {
  .lp-hero{
    /* La fotografia parte dal bordo superiore: la fascia di blu pieno che
       prima riservavamo alla pillola non serve più, perché con una verticale
       3:4 la banda è già alta e quello spazio spingeva il testo fuori dallo
       schermo. Il logo resta leggibile perché la velatura è scura proprio
       nei primi pixel, dove la pillola ci passa sopra. */
    --band-top: 0px;
    /* 56.25vw è esattamente l'altezza di un 16:9 a piena larghezza: le
       immagini di testata sono 1600×900, quindi con questa quota entrano
       intere e non viene tagliato nulla ai lati. */
    --band-h: 56.25vw;
    /* se in bacheca è stata caricata un'immagine per telefono si usa quella;
       --band-h arriva dal PHP, calcolata sulle proporzioni reali del file,
       così la banda combacia con la foto e non ne taglia nemmeno un lato */
    background-image: var(--hero-img-mob, var(--hero-img));
    background-repeat: no-repeat;
    background-position: center var(--band-top);
    background-size: 100% var(--band-h);
    background-color: var(--dark-blue);
    min-height: 0;
    align-items: flex-start;
    padding: calc(var(--band-top) + var(--band-h) + 8px) 22px 46px;
  }
  .lp-hero::before{
    inset: var(--band-top) 0 auto 0;
    height: var(--band-h);
    /* le prime tre tappe sono in pixel: devono coprire la pillola, che è
       alta 56px e sta a 64px dal bordo, non una quota dello schermo */
    background: linear-gradient(
      180deg,
      rgba(21,28,44,.94) 0,
      rgba(21,28,44,.78) 84px,
      rgba(21,28,44,0)   220px,
      rgba(21,28,44,0)   62%,
      rgba(21,28,44,.90) 92%,
      rgba(21,28,44,1)   100%
    );
  }
  .lp-hero h1{ max-width:none; text-shadow:none }
  .lp-hero .lp-lead{ text-shadow:none }
  .lp-hero .crumbs{ margin-bottom:12px }

  /* Contatti: foto di gruppo, banda più alta e ritaglio dall'alto per non
     tagliare la fila in piedi */
  .contact-hero{ background-position: center var(--band-top) }

  /* --- Home: stessa logica, ma la foto è un <img> dentro <picture> --- */
  .hero{
    --band-top: 0px;     /* nessuna fascia vuota: la foto parte subito */
    /* valore di ripiego: normalmente --band-h arriva dal PHP, calcolata
       sulle proporzioni del file caricato in bacheca */
    --band-h: 133.333vw;
    height: auto;
    min-height: 0;
    display: block;
    overflow: visible;
    padding: 0 22px 96px;   /* spazio per la barra azioni fissa in basso */
    background: var(--dark-blue);
    margin-bottom: 0;
  }
  .hero-media{
    position: relative;
    inset: auto;
    width: auto;            /* senza questo il 100% ereditato lascia scoperto
                               un bordo, perché i margini negativi allargano */
    height: var(--band-h);
    margin: var(--band-top) -22px 0;
  }
  .hero-media img{ height:100%; object-fit:cover; object-position:center }
  /* La velatura sta ADDOSSO all'immagine, non è più un elemento assoluto
     posizionato per conto suo: essendo un figlio di <picture> ne eredita
     esattamente riquadro e altezza, quindi non può disallinearsi. Prima
     l'overlay e la banda partivano da due riferimenti diversi e la
     dissolvenza finiva sfasata di qualche decina di pixel. */
  .hero-overlay{ display:none }
  .hero-media::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(
      180deg,
      rgba(21,28,44,.94) 0,
      rgba(21,28,44,.78) 84px,
      rgba(21,28,44,0)   220px,
      rgba(21,28,44,0)   62%,
      rgba(21,28,44,.90) 92%,
      rgba(21,28,44,1)   100%
    );
  }
  .hero-content{
    position: relative;
    /* Il testo risale dentro l'ultimo tratto della banda, che la velatura
       ha già portato a blu pieno: visivamente non copre nulla della foto e
       guadagna una quarantina di pixel, quanto basta perché il titolo entri
       nella prima schermata. */
    margin-top: calc(var(--band-h) * -0.075);
    padding-top: 0;
    align-items: flex-start;
    text-align: left;
  }
  .hero-title{ font-size:clamp(2.1rem,7.4vw,2.9rem); line-height:1.06; text-shadow:none }
  .hero-sub{ font-size:.9688rem; line-height:1.55; max-width:none; text-shadow:none }
  .hero-kicker{
    font-size:.6875rem; letter-spacing:.08em; padding:0;
    background:none; backdrop-filter:none; margin-bottom:10px;
    color:rgba(255,255,255,.72);
  }
  .hero-actions{ justify-content:flex-start }
  .hero .trust-strip{ justify-content:flex-start }
}


/* =========================================================================
   Kìron Cesano Maderno — aggiunte al foglio del tema di partenza
   Testata in vetro sopra il video, sezione «Ultime consulenze»,
   scheda sintetica delle pagine servizio.
   ========================================================================= */

/* ---------- vetro liquido ----------
   È l'effetto della testata e dei riquadri sopra il video: un fondo scuro
   molto trasparente, una sfocatura leggera e un bordo che si accende in alto
   e in basso, come il riflesso su un vetro reale. Il bordo è disegnato con uno
   pseudo-elemento in maschera, non con `border`, perché così segue anche gli
   angoli arrotondati senza tagli. */
.liquid-glass{
  background:rgba(0,0,0,.4);
  background-blend-mode:luminosity;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border:none;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1);
  position:relative;
  overflow:hidden;
}
.liquid-glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,.1) 80%, rgba(255,255,255,.3) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
/* Dove il vetro sta su fondo chiaro (testata delle pagine interne) il nero
   trasparente diventa illeggibile: si ribalta in bianco. */
.gnav-solid .liquid-glass{background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(8,41,113,.10)}
.gnav-solid .liquid-glass::before{display:none}

/* ---------- testata ---------- */
.gnav{position:absolute;top:0;left:0;right:0;z-index:60}
.gnav-wrap{padding:24px 24px 0}
@media(min-width:768px){.gnav-wrap{padding:24px 48px 0}}
@media(min-width:1024px){.gnav-wrap{padding:24px 64px 0}}
.gnav-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:14px;padding:8px 10px 8px 16px}

.gnav-brand{display:flex;align-items:center;flex:none}
.gnav-brand img{height:30px;width:auto}
.gnav-brand .brand-dark,.gnav-solid .gnav-brand .brand-light{display:none}
.gnav-solid .gnav-brand .brand-dark{display:block}

.gnav-links{display:none}
@media(min-width:1024px){.gnav-links{display:block}}
.gnav-links .nav-links{display:flex;align-items:center;gap:28px}
.gnav-links .nav-links a{display:inline;padding:0;border-radius:0;font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.85);background:none;transition:color .25s}
.gnav-links .nav-links a:hover{color:#fff;background:none}
.gnav-solid .gnav-links .nav-links a{color:var(--navy)}
.gnav-solid .gnav-links .nav-links a:hover{color:var(--navy-hover);text-decoration:underline;text-underline-offset:4px}

.gnav-cta{display:flex;align-items:center;gap:8px;flex:none}
.gnav-btn{display:none;background:#fff;color:#000;padding:11px 22px;border-radius:10px;font-size:.875rem;font-weight:600;white-space:nowrap;transition:background .25s,transform .25s}
.gnav-btn:hover{background:rgba(255,255,255,.88);transform:translateY(-1px)}
@media(min-width:768px){.gnav-btn{display:inline-block}}
.gnav-solid .gnav-btn{background:var(--navy);color:#fff}
.gnav-solid .gnav-btn:hover{background:var(--navy-hover)}
.gnav-tel{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;color:#fff;background:rgba(255,255,255,.14)}
.gnav-solid .gnav-tel{color:var(--navy);background:rgba(8,41,113,.08)}
@media(min-width:768px){.gnav-tel{display:none}}
.gnav .burger span{background:#fff}
.gnav-solid .burger span{background:var(--navy)}
@media(min-width:1024px){.gnav .burger{display:none}}

/* Testata fissa e opaca dopo lo scroll */
.gnav.is-scrolled{position:fixed;top:0}
.gnav.is-scrolled .gnav-wrap{padding-top:10px;padding-bottom:10px}
.gnav.is-scrolled .gnav-bar{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(8,41,113,.12)}
.gnav.is-scrolled .gnav-bar::before{display:none}
.gnav.is-scrolled .brand-light{display:none}
.gnav.is-scrolled .brand-dark{display:block}
.gnav.is-scrolled .gnav-links .nav-links a{color:var(--navy)}
.gnav.is-scrolled .gnav-btn{background:var(--navy);color:#fff}
.gnav.is-scrolled .gnav-tel{color:var(--navy);background:rgba(8,41,113,.08)}
.gnav.is-scrolled .burger span{background:var(--navy)}

/* Pannello del menu su telefono */
.gnav-panel{margin-top:10px;border-radius:16px;padding:10px;opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:opacity .25s ease,transform .25s var(--ease-burger)}
.gnav.is-open .gnav-panel{opacity:1;transform:none;pointer-events:auto}
.gnav-panel .nav-links a{color:#fff}
.gnav-panel .nav-links a:hover{background:rgba(255,255,255,.12)}
.gnav-solid .gnav-panel .nav-links a,.gnav.is-scrolled .gnav-panel .nav-links a{color:var(--navy)}
.gnav-solid .gnav-panel .nav-links a:hover,.gnav.is-scrolled .gnav-panel .nav-links a:hover{background:#f1f4f9}
.gnav.is-scrolled .gnav-panel{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(8,41,113,.15)}
.gnav.is-scrolled .gnav-panel::before{display:none}
.gnav-panel-cta{display:flex;flex-wrap:wrap;gap:8px;padding:10px 6px 4px}
@media(min-width:1024px){.gnav-panel{display:none}}

/* ---------- testata con il video ---------- */
/* Lo sfondo della testata è l'immagine, e il video — quando c'è — ci va sopra.
   Vale anche quando video non ce n'è affatto: se in bacheca si sostituisce il
   filmato con una fotografia, quella diventa lo sfondo. Il colore pieno resta
   dietro come ultima rete, per il momento in cui l'immagine non è ancora
   arrivata. */
.vhero{position:relative;z-index:1;isolation:isolate;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;margin-bottom:-25px;background-color:#0b1220;background-image:var(--hero-img);background-size:cover;background-position:center;background-repeat:no-repeat}
/* `z-index` e `isolation` non sono decorazione: lo sfondo in parallasse della
   sezione «Come lavoro» è fisso e sta su un piano negativo, e senza questo
   riemergeva da sotto la testata ogni volta che il video tardava a partire. */
@supports(height:100svh){.vhero{min-height:100svh}}
.vhero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Una velatura, non un velo.
   Il modello di partenza non ne prevedeva nessuna, e sopra un video scuro
   funziona. Ma la stessa testata mostra l'immagine di riserva quando il video
   tarda, non parte o l'utente ha chiesto meno animazioni — e su una foto
   chiara il testo bianco sparisce. Questa sfumatura scurisce solo i due bordi,
   dove ci sono la testata e il titolo, e lascia intatto il centro
   dell'inquadratura. Per toglierla del tutto basta cancellare questa regola. */
.vhero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,14,30,.45) 0%, rgba(6,14,30,.05) 26%,
    rgba(6,14,30,.12) 52%, rgba(6,14,30,.78) 100%);
}
/* Su schermo largo il testo sta tutto a sinistra: una seconda sfumatura
   orizzontale lo stacca dal fondo senza spegnere la metà destra
   dell'inquadratura, che è quella che si guarda. */
@media(min-width:768px){
  .vhero::after{
    background:
      linear-gradient(90deg, rgba(6,14,30,.55) 0%, rgba(6,14,30,.18) 42%, rgba(6,14,30,0) 68%),
      linear-gradient(180deg, rgba(6,14,30,.45) 0%, rgba(6,14,30,.05) 26%, rgba(6,14,30,.12) 52%, rgba(6,14,30,.78) 100%);
  }
}
.vhero-inner{position:relative;z-index:1;width:100%;padding:0 24px 56px}
@media(min-width:768px){.vhero-inner{padding:0 48px 64px}}
@media(min-width:1024px){.vhero-inner{padding:0 64px 72px}}
.vhero-grid{display:flex;flex-direction:column;gap:28px}
@media(min-width:1024px){.vhero-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:flex-end;gap:48px}}

.vhero-kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:14px;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.vhero-title{font-weight:400;line-height:1.05;letter-spacing:-.04em;font-size:clamp(2.25rem,7.2vw,5rem);margin-bottom:18px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.chars-line{display:block}
.ch{display:inline-block;transition:opacity .5s ease,transform .5s ease}
/* Lo stato di partenza vale solo se il JavaScript è vivo: senza, il titolo si
   vede normalmente invece di restare invisibile per sempre. */
.js-anim .vhero-title .ch{opacity:0;transform:translateX(-18px)}
.js-anim .vhero-title.is-in .ch{opacity:1;transform:none}

.fade-in{transition:opacity 1s ease}
.js-anim .vhero .fade-in{opacity:0;transition-delay:var(--fade-delay,0ms)}
.js-anim .vhero .fade-in.is-in{opacity:1}

.vhero-sub{font-size:1.0625rem;line-height:1.6;color:rgba(255,255,255,.92);max-width:34rem;margin-bottom:24px;text-shadow:0 1px 12px rgba(0,0,0,.45)}
@media(min-width:768px){.vhero-sub{font-size:1.1875rem}}
.vhero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
.btn-glass{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:14px 26px;font-size:.9375rem;font-weight:500;color:#fff;transition:background .3s,color .3s}
.btn-glass:hover{background:#fff;color:#000}
.btn-glass:hover::before{opacity:0}

.vhero-badges{display:flex;flex-wrap:wrap;gap:10px}
.vhero-badges li{border-radius:999px;padding:9px 18px;font-size:.8125rem;font-weight:500;color:#fff}
.vhero-right{display:flex;align-items:flex-end;justify-content:flex-start}
@media(min-width:1024px){.vhero-right{justify-content:flex-end}}
.vhero-tag{border-radius:14px;padding:16px 24px;font-size:1.0625rem;font-weight:300;letter-spacing:-.01em;color:#fff}
@media(min-width:768px){.vhero-tag{font-size:1.375rem}}

@media(prefers-reduced-motion:reduce){
  .ch,.fade-in{transition:none}
  .js-anim .vhero-title .ch{opacity:1;transform:none}
  .js-anim .vhero .fade-in{opacity:1}
}

/* ---------- «Ultime consulenze»: tre short verticali ---------- */
.shorts{position:relative;z-index:10;background:var(--paper);border-radius:25px 25px 0 0;padding:80px 24px}
@media(min-width:768px){.shorts{padding:112px 24px}}
.shorts-grid{max-width:64rem;margin:0 auto;display:grid;gap:24px}
@media(min-width:640px){.shorts-grid{grid-template-columns:repeat(3,1fr)}}
.short{background:#fff;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 5px 15px rgba(8,41,113,.06);transition:transform .3s,box-shadow .3s}
.short:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(8,41,113,.1)}
/* 9:16, che è il formato degli short: così il riquadro non cambia forma quando
   il video sostituisce il segnaposto. */
.short-frame{position:relative;aspect-ratio:9/16;background:var(--dark-blue)}
.short-frame iframe,.short-frame .embed-gate{position:absolute;inset:0;width:100%;height:100%;border:0}
.short-frame .embed-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px;color:#fff;background:linear-gradient(160deg,#12203c,#082971)}
.short-frame .embed-gate p{font-size:.9375rem;line-height:1.5;display:flex;flex-direction:column;align-items:center;gap:14px}
.short-frame .embed-gate .embed-alt{font-size:.8125rem;text-decoration:underline;opacity:.75;color:#fff}
.short-body{padding:20px 22px 24px}
.short-body h3{font-size:1.0625rem;font-weight:500;line-height:1.35}
.short-body p{margin-top:6px;font-size:.9375rem;line-height:1.55;opacity:.75}

/* ---------- scheda sintetica delle pagine servizio ----------
   Sei righe con icona, etichetta e valore: è la parte che si legge in dieci
   secondi prima di decidere se leggere il resto. Le due righe in fondo, su
   fondo caldo, sono quelle che tolgono il rischio (costo e garanzie): stanno
   staccate apposta. */
.facts{position:relative;z-index:10;background:var(--paper);border-radius:25px 25px 0 0;padding:64px 24px}
@media(min-width:768px){.facts{padding:88px 24px}}
.facts-inner{max-width:52rem;margin:0 auto}
.facts-list{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.facts-list+.facts-list{margin-top:14px}
.fact{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:16px;padding:18px 20px}
.fact-ico{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(8,41,113,.07);color:var(--navy)}
.fact div{display:flex;flex-direction:column;gap:3px}
.fact b{font-size:1.0625rem;font-weight:600;line-height:1.3}
.fact span{font-size:.9375rem;line-height:1.55;opacity:.85}
.facts-warm .fact{background:#fdf6e6}
.facts-warm .fact-ico{background:rgba(248,184,66,.22);color:#8a6410}
.facts-note{margin-top:18px;font-size:.875rem;line-height:1.6;opacity:.65}

/* ---------- titolo delle recensioni ---------- */
.review-title{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:1.1875rem;line-height:1.3;color:var(--navy);margin-bottom:10px}

/* ---------- pagina «Chi sono» ---------- */
.bio{position:relative;z-index:10;background:#fff;padding:72px 24px}
@media(min-width:768px){.bio{padding:104px 24px}}
.bio-inner{max-width:64rem;margin:0 auto;display:grid;gap:40px;align-items:start}
@media(min-width:900px){.bio-inner{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:64px}}
.bio-photo{margin:0;position:relative}
.bio-photo img{width:100%;border-radius:24px;background:var(--paper);object-fit:cover}
.bio-photo figcaption{margin-top:14px;display:flex;flex-direction:column;gap:2px;font-size:.9375rem}
.bio-photo figcaption b{font-size:1.0625rem}
.bio-photo figcaption span{opacity:.75}
.bio-photo figcaption a{text-decoration:underline;opacity:.85;word-break:break-all}
.bio-text p{font-size:1.0625rem;line-height:1.7;margin-bottom:18px}
@media(min-width:768px){.bio-text p{font-size:1.125rem}}

/* ---------- elenco a pastiglie ---------- */
.chips{max-width:64rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;list-style:none;padding:0}
.chips a{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:12px 20px;font-size:.9375rem;font-weight:500;color:var(--navy);box-shadow:0 3px 10px rgba(8,41,113,.06);transition:transform .25s,box-shadow .25s}
.chips a:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(8,41,113,.12)}

/* ---------- rifiniture ---------- */
.pill-wa{background:#25d366;color:#053d1c}
.pill-wa:hover{background:#1eb857}
.wa-text{display:flex;flex-direction:column;line-height:1.25;text-align:left}
.wa-text small{font-weight:400;opacity:.8;font-size:.75rem}
.link-btn{background:none;border:0;padding:0;color:inherit;text-decoration:underline;font:inherit;cursor:pointer}

/* Testata su telefono: la foto si vede intera.
   A pieno schermo l'immagine veniva ritagliata al centro e di una fotografia
   orizzontale restava una striscia: teste tagliate, contesto perso. Qui la
   testata torna a essere una banda alta esattamente quanto il file — l'altezza
   arriva dal PHP, calcolata sulle proporzioni reali di quello che è stato
   caricato — e il testo scorre sotto, sul blu pieno.
   L'altezza è in vw e non in vh perché su telefono la barra del browser che
   compare e sparisce fa ballare i vh. */
@media(max-width:767px){
  .vhero{
    /* ripiego se il PHP non riesce a leggere le proporzioni, per esempio
       quando lo spazio contiene un video: 4:3, la forma più comune */
    --band-h:133.333vw;
    display:block;
    height:auto;
    min-height:0;
    margin-bottom:0;
    background-color:var(--dark-blue);
    background-image:var(--hero-img-mob, var(--hero-img));
    background-repeat:no-repeat;
    background-position:center top;
    background-size:100% var(--band-h);
  }
  /* La velatura copre la sola banda, non tutta la sezione: scura nei primi
     pixel per far risaltare il logo che le passa sopra, trasparente al centro
     dove c'è la fotografia, e blu pieno in fondo per saldarsi al testo senza
     che si veda la giunzione. */
  .vhero::after{
    inset:0 0 auto 0;
    height:var(--band-h);
    background:linear-gradient(180deg,
      rgba(21,28,44,.94) 0,
      rgba(21,28,44,.72) 84px,
      rgba(21,28,44,0)   210px,
      rgba(21,28,44,0)   58%,
      rgba(21,28,44,.90) 90%,
      rgba(21,28,44,1)   100%);
  }
  /* Il video, quando c'è, sta dentro la banda come la fotografia. */
  .vhero .hero-video-layer{inset:0 0 auto 0;height:var(--band-h)}
  .vhero-video{height:var(--band-h)}

  /* Il testo risale dentro l'ultimo tratto della banda, che la velatura ha già
     portato a blu pieno: non copre nulla della foto e guadagna una quarantina
     di pixel, quanto basta perché il titolo entri nella prima schermata. */
  .vhero-inner{padding:calc(var(--band-h) - 7vw) 22px 96px}
  .vhero-grid{gap:16px}
  .vhero-kicker{font-size:.6875rem;letter-spacing:.12em;margin-bottom:10px}
  .vhero-title{font-size:clamp(2rem,9vw,2.75rem);margin-bottom:14px;text-shadow:none}
  .vhero-sub{font-size:1rem;margin-bottom:18px;text-shadow:none}
  .vhero-actions{gap:10px;margin-bottom:16px}
  .vhero-actions .btn-lg,.vhero-actions .btn-glass{padding:13px 22px;font-size:.9375rem}
  .vhero-badges{gap:8px}
  .vhero-badges li{padding:8px 14px;font-size:.75rem}
  /* Il riquadro «Mutui. Surroghe. Prestiti.» ripete quello che dicono già le
     etichette di fiducia: su uno schermo stretto è una riga di troppo. */
  .vhero-right{display:none}
}

/* =========================================================================
   Spazi media: ogni riquadro può contenere una foto o un video
   ========================================================================= */

/* Lo strato video delle testate.
   Sta SOPRA l'immagine di fondo e SOTTO la velatura: l'immagine resta il
   fotogramma di riserva per chi il video non lo scarica — connessione lenta,
   risparmio dati, animazioni ridotte — e la pagina non mostra mai un
   rettangolo nero. */
.hero-video-layer{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.hero-video-layer video{width:100%;height:100%;object-fit:cover;display:block}

/* Su telefono la testata delle pagine interne mostra la foto dentro una banda
   alta quanto il file: il video deve stare esattamente lì, non a tutta pagina. */
@media(max-width:767px){
  .lp-hero .hero-video-layer{inset:var(--band-top,0) 0 auto 0;height:var(--band-h)}
}

/* Un video usato al posto di una fotografia dentro il flusso della pagina:
   prende lo stesso riquadro che avrebbe avuto l'immagine. */
.kmedia{width:100%;height:100%;object-fit:cover;display:block;background:var(--dark-blue)}

/* Le due versioni, grande e per telefono. Quella nascosta non viene nemmeno
   scaricata: i video hanno `data-src` e li carica il JavaScript solo quando
   entrano in vista, e un elemento con display:none in vista non ci va mai. */
.only-mob{display:none}
@media(max-width:767px){
  .only-desk{display:none}
  .only-mob{display:block}
}

@media(prefers-reduced-motion:reduce){
  .hero-video-layer{display:none}
}

/* Instagram incornicia il reel dentro una scheda sua, con intestazione e
   didascalia sotto. Teniamo comunque il riquadro 9:16 di tutti gli altri: i tre
   video devono avere la stessa forma, altrimenti la fila viene sbilenca. Il
   filmato sta in cima all'incorporamento, quindi quello che resta fuori è la
   didascalia — che comunque si legge aprendo il reel. */
.short-instagram .short-frame{background:#fff}

/* Il segnaposto di un contenuto esterno è cliccabile per intero, non solo sul
   pulsante: è quello che si fa istintivamente su un telefono. */
.embed-gate{cursor:pointer}
.embed-gate:hover .pill-btn,.embed-gate:focus-within .pill-btn{background:var(--navy-hover)}
.embed-gate a{cursor:pointer}
.short-frame .embed-gate:hover{filter:brightness(1.08)}

/* La testata fissa mangiava i clic.
   `.gnav-wrap` è il contenitore con il margine attorno alla barra: è
   trasparente e non si vede, ma essendo dentro un elemento fisso largo quanto
   lo schermo intercettava tutto quello che gli capitava sotto. In pratica una
   fascia invisibile alta un'ottantina di pixel, per tutta la larghezza,
   ingoiava i tocchi su qualunque cosa passasse lì: i riquadri dei video, i link
   delle card, i bottoni. Su telefono, dove la fascia occupa un decimo dello
   schermo, era sistematico.
   Il contenitore ora lascia passare i clic; li ricevono solo la barra e il
   pannello del menu, che sono le uniche parti che si vedono. */
.gnav,.gnav-wrap{pointer-events:none}
.gnav-bar{pointer-events:auto}
/* Il pannello del menu solo quando è aperto: chiuso resta nel documento,
   trasparente, e se lo riattivassimo qui tornerebbe a ingoiare i clic — che è
   esattamente il difetto che stiamo togliendo, spostato di due centimetri. */
.gnav.is-open .gnav-panel{pointer-events:auto}

/* Card video: finché c'è il segnaposto la card intera è un bersaglio.
   `:has()` è supportato da tutti i browser aggiornati; dove non lo fosse si
   perde solo il puntatore a manina, non il funzionamento, che è in JavaScript. */
.short:has(.embed-gate){cursor:pointer}

/* Card servizio: oltre al sollevamento serve un segnale che sia un link.
   Il bordo che si accende sul lato e il titolo che cambia colore lo dicono
   anche a chi non muove il mouse, per esempio su un touch screen. */
.scard{cursor:pointer}
.scard:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.scard:hover h3{text-decoration:underline;text-underline-offset:3px}

/* Banner dei cookie su telefono: era alto quasi metà schermo e restava lì
   finché non si sceglieva, coprendo tutto quello che gli finiva sotto. Ora è
   compatto e i tre pulsanti stanno su una riga sola. */
@media(max-width:640px){
  .ck-box{padding:16px 16px 14px}
  .ck-title{font-size:.9375rem;margin-bottom:4px}
  .ck-text{font-size:.8125rem;line-height:1.45}
  .ck-actions{gap:8px;flex-wrap:nowrap}
  .ck-btn{padding:10px 12px;font-size:.8125rem;flex:1 1 0;min-width:0;white-space:nowrap}
}

/* =========================================================================
   Pagine servizio — impianto decisionale
   ========================================================================= */

/* ---------- fascia di fiducia, subito sotto la testata ---------- */
.trustband{position:relative;z-index:10;background:var(--navy);color:#fff;padding:26px 24px}
.trustband-inner{max-width:72rem;margin:0 auto;display:grid;gap:22px;align-items:center}
@media(min-width:900px){.trustband-inner{grid-template-columns:auto minmax(0,1fr) auto;gap:40px}}
.tb-score{display:flex;flex-direction:column;gap:2px;flex:none}
.tb-score .stars{color:var(--yellow);font-size:.9375rem;letter-spacing:2px;margin:0}
.tb-score b{font-size:1.75rem;line-height:1;font-weight:400}
.tb-score span{font-size:.8125rem;opacity:.8}
.tb-quote{margin:0;border-left:2px solid rgba(255,255,255,.25);padding-left:20px}
.tb-quote p{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:1.125rem;line-height:1.35}
.tb-quote footer{margin-top:6px;font-size:.8125rem;opacity:.75}
.tb-quote footer a{text-decoration:underline}
.tb-signals{display:flex;flex-direction:column;gap:8px;font-size:.8125rem;opacity:.85}
.tb-signals li{display:flex;align-items:center;gap:8px}
.tb-signals svg{flex:none;opacity:.7}

/* ---------- le tre card del servizio ----------
   Rispondono, in quest'ordine, alle tre domande che uno si fa: «riguarda me?»,
   «come funziona?», «cosa ci guadagno?». Sono tre e non sei di proposito: una
   griglia più lunga torna a essere l'elenco indistinto in cui nessuna riga
   sembra più importante delle altre. */
.decide{position:relative;z-index:10;background:var(--paper);border-radius:25px 25px 0 0;padding:72px 24px}
@media(min-width:768px){.decide{padding:96px 24px}}
.decide-grid{max-width:72rem;margin:0 auto;display:grid;gap:20px}
@media(min-width:820px){.decide-grid{grid-template-columns:repeat(3,1fr)}}
.dcard{background:#fff;border-radius:24px;padding:32px 28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 5px 15px rgba(8,41,113,.05)}
.dcard-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(8,41,113,.07);color:var(--navy)}
.dcard h2{font-size:1.25rem;font-weight:500;line-height:1.3}
.dcard p{font-size:1rem;line-height:1.6;opacity:.85}

/* ---------- fascia tecnica ---------- */
.specs{max-width:72rem;margin:26px auto 0;display:grid;gap:1px;background:var(--muted);border-radius:18px;overflow:hidden}
@media(min-width:820px){.specs{grid-template-columns:repeat(2,1fr)}}
.specs li{background:var(--paper);padding:16px 22px;display:flex;flex-direction:column;gap:2px}
.specs b{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;opacity:.6;font-weight:600}
.specs span{font-size:.9375rem;line-height:1.5}
/* Con un numero dispari di voci restava una cella grigia vuota in fondo:
   l'ultima riga si allarga e la cella sparisce. */
@media(min-width:820px){.specs li:last-child:nth-child(odd){grid-column:1 / -1}}

/* ---------- da solo o con me ----------
   Due colonne e una freccia. Su telefono la freccia ruota di novanta gradi,
   perché le colonne diventano una sopra l'altra e una freccia orizzontale
   punterebbe fuori dallo schermo. */
.compare{position:relative;z-index:10;background:#fff;padding:72px 24px}
@media(min-width:768px){.compare{padding:96px 24px}}
.compare-inner{max-width:64rem;margin:0 auto}
.compare-grid{display:grid;gap:16px;align-items:stretch;margin-top:36px}
@media(min-width:820px){.compare-grid{grid-template-columns:1fr auto 1fr;gap:20px}}
.cmp{border-radius:22px;padding:28px 26px}
.cmp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-bottom:16px}
.cmp ul{display:flex;flex-direction:column;gap:12px}
.cmp li{font-size:1rem;line-height:1.45;padding-left:20px;position:relative}
.cmp li::before{content:'';position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:999px}
.cmp-before{background:var(--paper);color:var(--dark-blue)}
.cmp-before .cmp-label{opacity:.6}
.cmp-before li{opacity:.8}
.cmp-before li::before{background:var(--wale-mid)}
.cmp-after{background:var(--navy);color:#fff;box-shadow:0 20px 40px rgba(8,41,113,.16)}
.cmp-after .cmp-label{color:var(--yellow)}
.cmp-after li::before{background:var(--yellow)}
.cmp-arrow{display:grid;place-items:center;color:var(--navy);transform:rotate(90deg)}
@media(min-width:820px){.cmp-arrow{transform:none}}
.compare-note{margin-top:22px;font-size:.9375rem;line-height:1.6;opacity:.7;max-width:44rem}
.compare .about-btns{margin-top:24px}

/* ---------- i passaggi della consulenza, accanto al modulo ----------
   Prima erano una sezione a sé, in fondo alla pagina, dove nessuno arrivava.
   Stanno meglio qui: chi sta per compilare il modulo vuole sapere cosa succede
   dopo aver premuto invio, e la risposta ce l'ha sotto gli occhi. */
.pq-steps{margin-top:26px;display:flex;flex-direction:column;gap:18px;list-style:none;padding:0}
.pq-steps li{display:flex;gap:14px;align-items:flex-start}
.pq-step-n{flex:none;width:30px;height:30px;border-radius:999px;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:.875rem;font-weight:600}
.pq-steps div{display:flex;flex-direction:column;gap:3px}
.pq-steps b{font-size:1rem;font-weight:600;line-height:1.35}
.pq-steps span{font-size:.9375rem;line-height:1.55;opacity:.8}
/* La colonna accanto al modulo mette una spunta davanti a ogni voce di elenco:
   davanti ai passaggi numerati diventava un segno di troppo. */
.pq-side .pq-steps li::before{content:none}

/* ---------- chi segue la pratica ---------- */
.advisor{position:relative;z-index:10;background:var(--dark-blue);color:#fff;padding:72px 24px}
@media(min-width:768px){.advisor{padding:88px 24px}}
.advisor-inner{max-width:64rem;margin:0 auto;display:grid;gap:32px;align-items:center}
@media(min-width:820px){.advisor-inner{grid-template-columns:220px minmax(0,1fr);gap:48px}}
.advisor-photo{margin:0}
.advisor-photo img{width:100%;border-radius:22px;background:rgba(255,255,255,.06);object-fit:cover}
.advisor-body h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:400;letter-spacing:-.02em;margin:6px 0 4px}
.advisor-role{font-size:.9375rem;opacity:.75;margin-bottom:14px}
.advisor-text{font-size:1.0625rem;line-height:1.65;opacity:.9;max-width:38rem}
.advisor-facts{margin:20px 0 24px;display:flex;flex-direction:column;gap:10px;font-size:.9375rem;opacity:.85}
.advisor-facts li{display:flex;align-items:flex-start;gap:10px;line-height:1.5}
.advisor-facts svg{flex:none;margin-top:3px;opacity:.7}
.advisor .pill-muted{background:rgba(255,255,255,.14);color:#fff}
.advisor .pill-muted:hover{background:rgba(255,255,255,.24)}
.advisor .pill-muted .pill-ico{background:rgba(255,255,255,.9)}

/* Tre passaggi invece di quattro, dove la griglia serve ancora */
@media(min-width:820px){.lp-steps-3{grid-template-columns:repeat(3,1fr)}}

/* Il titolo della recensione è blu Kìron: sul fondo scuro delle pagine servizio
   spariva. Lì passa al bianco. */
.lp-reviews .review-title{color:#fff;opacity:.95}

/* ---------- riquadro video ancora da compilare ----------
   Lo vede solo chi amministra il sito. */
.short-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:26px 22px;color:#fff;background:linear-gradient(160deg,#12203c,#082971)}
.short-num{width:38px;height:38px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:1rem;font-weight:600}
.short-empty p{font-size:.9375rem;font-weight:600}
.short-empty .short-empty-note{font-size:.8125rem;font-weight:400;line-height:1.5;opacity:.75}

/* ---------- ancore: il salto si ferma sotto la testata ----------
   La barra in alto è fissa e alta una settantina di pixel: senza questo, un
   link a un'ancora porta il bersaglio esattamente sotto la barra, che ne copre
   il titolo. Chi arriva pensa di essere finito nel punto sbagliato. Il
   margine di scorrimento tiene conto della barra e lascia un po' d'aria.
   Vale anche per il modulo, che è il bersaglio più cliccato del sito. */
#valuta,#servizi,#ultime-consulenze,#recensioni,#faq,#dove-siamo,#chi-sono,#percorso,#garanzia,#metodo{
  scroll-margin-top:104px;
}
@media(max-width:767px){
  #valuta,#servizi,#ultime-consulenze,#recensioni,#faq,#dove-siamo,#chi-sono,#percorso,#garanzia,#metodo{
    scroll-margin-top:92px;
  }
}
/* Sul modulo il bersaglio è più stretto degli altri.
   La sezione ha ottanta pixel di respiro sopra: sommati all'altezza della
   barra, chi arriva vede una fascia vuota e pensa di essere atterrato prima
   del contenuto. Qui il salto si ferma appena sotto la barra e la sezione
   stringe il margine superiore, così la prima cosa che si legge è il titolo
   del modulo. */
#valuta{scroll-margin-top:80px}
@media(max-width:767px){#valuta{scroll-margin-top:74px}}
.pq-section{padding-top:52px}
@media(min-width:768px){.pq-section{padding-top:64px}}

/* Su schermo stretto le due colonne si impilano e il modulo finiva sotto la
   sua introduzione: chi premeva «Consulenza» atterrava su un testo, con il
   modulo ancora sotto la piega. Sotto i 960 px il modulo passa davanti e
   l'introduzione — che è rassicurazione, non istruzione — lo segue. */
@media(max-width:959px){
  .pq-card{order:-1}
}