/* ESPINASSE · sito v4 · css/site.css
   Restyling: impaginato editoriale a due colonne (indice e occhiello a sinistra, titolo e corpo a destra),
   corpo staccato dal titolo da spazio e filetto, titoli grandi, card a scacchiera bianco/azzurro, nav a pillola,
   footer con il wordmark gigante. Stessi font (Anton, Inter) e stessi colori (rosso, azzurro, nero, bianco).
   La E compare solo nella transizione tra le pagine e nel footer. */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/anton-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url(../fonts/inter-900.woff2) format('woff2')}

:root{
  --rosso:#D10000; --rosso-d:#A80000; --azzurro:#7EC6F2; --azzurro-h:#5FB6EC; --card:#EAF4FC;
  --nero:#1B1B1B; --grigio:#5B5B5B; --grigio-l:#8A8A8A; --bianco:#FFFFFF; --bordo:#D9E7F2; --campo:#F4F7FA;
  --display:'Anton',Impact,'Arial Narrow',sans-serif; --body:'Inter',system-ui,-apple-system,sans-serif;
  --max:1320px; --pad:clamp(20px,4vw,64px);
  --nav-h:84px;
  --r:28px; --r-s:18px;
  --gap-hb:clamp(32px,4.5vw,64px);       /* distanza tra titolo e corpo: mai attaccati */
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.reduced{scroll-behavior:auto}
body{font-family:var(--body);color:var(--nero);background:var(--bianco);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
svg{display:block}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--azzurro);color:var(--nero)}
:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}

.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:0;line-height:1.05;text-wrap:balance}
.d-hero{font-size:clamp(52px,8.4vw,136px);line-height:1.02}
.d-xxl{font-size:clamp(46px,6.4vw,104px);line-height:1.05}
.d-xl{font-size:clamp(38px,4.8vw,76px);line-height:1.05}
.d-l{font-size:clamp(28px,3.1vw,46px);line-height:1}
.red{color:var(--rosso)} .blu{color:var(--azzurro)}
.label{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;color:var(--nero)}
.label::before{content:'';width:10px;height:10px;background:var(--rosso);flex:0 0 auto}   /* il quadrato rosso: la grammatica della E */
.label--plain::before,.hero .label::before{display:none}
.lead{font-size:clamp(18px,1.4vw,22px);line-height:1.55}
p{text-wrap:pretty;max-width:58ch}
.nb{display:inline-block}
.band{padding-block:clamp(88px,10vw,150px)}
.band--card{background:var(--card)}
.band--blu{background:var(--azzurro)}
.band--blu .label::before{background:var(--nero)}
.band--blu p,.band--blu .lead{color:var(--nero)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* ---------- SEZIONE EDITORIALE: indice + occhiello a sinistra, titolo + corpo a destra ---------- */
.sec{display:grid;grid-template-columns:minmax(160px,3fr) 9fr;gap:clamp(24px,4vw,64px);align-items:start}
.sec-side{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:14px}
.sec-side .idx{font-family:var(--display);font-size:clamp(56px,6vw,96px);line-height:.85;color:var(--azzurro)}
.band--blu .sec-side .idx{color:#fff}
.sec-main h2{max-width:17ch}
.sec-body{margin-top:var(--gap-hb);padding-top:clamp(22px,2.5vw,32px);border-top:1px solid rgba(27,27,27,.25);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);align-items:start}
.sec-body--one{grid-template-columns:1fr}
.sec-body .lead{color:var(--grigio)}
.band--blu .sec-body{border-top-color:rgba(27,27,27,.35)}
.band--blu .sec-body .lead{color:var(--nero)}
.sec-body .cta-row{margin-top:8px}
.sec-body p+p{margin-top:16px}

/* ---------- PALCO 3D: la E del marchio sopra i contenuti, non intercetta il mouse ---------- */
#stage{position:fixed;inset:0;z-index:5;pointer-events:none;width:100%;height:100%}
.hero-slot{min-height:1px}
html.stage .f-top .wm-e{visibility:hidden}
html.stage [data-walk] .steps{margin-top:clamp(120px,14vw,170px)}   /* spazio per la E che plana sui passaggi */
.hero--text h1{max-width:10ch}
@media(max-width:900px){.hero-home .hero-slot{order:2;height:clamp(190px,58vw,280px)}}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- ANIMAZIONI: stati iniziali, attivi solo se GSAP è partito (html.anim) e senza "riduci movimento" ---------- */
html.anim .rv{opacity:0}
html.anim h1,html.anim h2.rv{visibility:hidden}
.w{display:inline-block;will-change:transform,filter}
html.anim .fig[data-fig]{clip-path:inset(0 0 100% 0 round var(--r))}
.line-mask{padding-bottom:.14em;margin-bottom:-.14em}
.wipe{position:absolute;z-index:3;background:var(--rosso);pointer-events:none;will-change:transform}

/* ---------- LOADER / TRANSIZIONE TRA PAGINE: pannello rosso con la E al centro ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--rosso);display:flex;align-items:center;justify-content:center;color:#fff}
.loader svg{width:clamp(60px,7vw,104px);height:auto;overflow:visible}
html:not(.js) .loader,html.reduced .loader{display:none}

/* ---------- BOTTONI ---------- */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-family:var(--body);font-weight:700;font-size:15px;padding:8px 8px 8px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:color .35s var(--ease),border-color .35s var(--ease);line-height:1.2}
.btn::before{content:'';position:absolute;inset:-2px;z-index:-1;background:var(--fill,var(--nero));border-radius:999px;transform:scaleX(0);transform-origin:right center;transition:transform .55s var(--ease)}
.btn:hover::before,.btn.is-hover::before{transform:scaleX(1);transform-origin:left center}
.btn .ico{position:relative;overflow:hidden;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);transition:background .35s var(--ease),color .35s var(--ease)}
.btn .ico svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.btn .ico svg+svg{position:absolute;transform:translateX(-300%)}
.btn:hover .ico svg:first-child,.btn.is-hover .ico svg:first-child{transform:translateX(300%)}
.btn:hover .ico svg+svg,.btn.is-hover .ico svg+svg{transform:translateX(0)}
.btn-red{background:var(--rosso);color:#fff;border-color:var(--rosso);--fill:var(--nero)}
.btn-red:hover,.btn-red.is-hover{border-color:var(--nero)}
.btn-red:hover .ico,.btn-red.is-hover .ico{background:var(--rosso)}
.btn-line{background:transparent;color:var(--nero);border-color:var(--nero);--fill:var(--nero)}
.btn-line .ico{background:var(--nero);color:#fff}
.btn-line:hover,.btn-line.is-hover{color:#fff}
.btn-line:hover .ico,.btn-line.is-hover .ico{background:var(--rosso)}
.btn-dark{background:var(--nero);color:#fff;border-color:var(--nero);--fill:var(--rosso)}
.btn-dark:hover,.btn-dark.is-hover{border-color:var(--rosso)}
.btn-dark:hover .ico,.btn-dark.is-hover .ico{background:var(--nero)}
.btn-white{background:#fff;color:var(--nero);border-color:#fff;--fill:var(--nero)}
.btn-white .ico{background:var(--rosso);color:#fff}
.btn-white:hover,.btn-white.is-hover{color:#fff;border-color:var(--nero)}
.btn-lg{font-size:17px;padding:10px 10px 10px 30px}
.btn-lg .ico{width:46px;height:46px}
.btn-plain{padding:15px 26px}   /* senza icona */
.btn:disabled{opacity:.6;cursor:progress;transform:none}

/* ---------- NAV a pillola ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;transition:transform .45s var(--ease)}
.nav-in{width:calc(100% - 2*var(--pad));max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:28px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;padding:8px 8px 8px 24px;box-shadow:0 1px 0 rgba(27,27,27,.06),0 12px 40px rgba(27,27,27,.08);transition:box-shadow .3s,background .3s}
.nav--solid .nav-in{background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(27,27,27,.08),0 18px 50px rgba(27,27,27,.12)}
.nav--hide{transform:translateY(-120%)}
.brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.brand .wm{font-family:var(--display);font-size:24px;letter-spacing:.03em;line-height:1;color:var(--rosso)}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-links a{font-size:14px;font-weight:600;text-decoration:none;padding:10px 16px;border-radius:999px;transition:background .2s}
.nav-links a:hover,.nav-links a.on{background:var(--card)}
.nav-cta.btn{font-size:14px;padding:4px 4px 4px 18px;margin-left:8px;white-space:nowrap}
.nav-cta.btn .ico{width:34px;height:34px}
.nav-links .nav-cta:hover{background:var(--rosso)}
.burger{display:none;margin-left:auto;width:44px;height:44px;position:relative;border-radius:50%;background:var(--card)}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:var(--nero);top:50%;transition:transform .35s var(--ease)}
.burger span:first-child{transform:translateY(-4px)}
.burger span:last-child{transform:translateY(4px)}
html.menu-open .burger span:first-child{transform:rotate(45deg)}
html.menu-open .burger span:last-child{transform:rotate(-45deg)}
html.menu-open{overflow:hidden}
.menu{position:fixed;inset:0;z-index:45;background:var(--azzurro);color:var(--nero);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + 20px) var(--pad) 90px;overflow:hidden;transform:translateY(-100%);visibility:hidden;transition:transform .5s var(--ease),visibility 0s .5s}
html.menu-open .menu{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}
.menu-in{display:flex;flex-direction:column;gap:clamp(6px,2vh,18px);position:relative;z-index:2}
.menu-in a{font-family:var(--display);font-size:clamp(44px,11vw,96px);line-height:.95;text-decoration:none;width:max-content}
.menu-in a:hover{color:var(--rosso)}
.menu-in .m-cta{margin-top:18px;font-family:var(--body);font-size:16px;font-weight:700;background:var(--rosso);color:#fff;border-radius:999px;padding:16px 26px}
.menu-tag{position:absolute;left:var(--pad);bottom:32px;z-index:2;font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rosso)}
.menu .bgE{position:absolute;right:-14vw;top:50%;height:110%;transform:translateY(-50%);color:#fff;opacity:.5;pointer-events:none}
.menu .bgE svg{height:100%;width:auto}

/* ---------- HERO: titolo gigante in basso, card immagine a destra, corpo staccato da un filetto rosso ---------- */
.hero{position:relative;background:var(--bianco);padding-block:calc(var(--nav-h) + clamp(40px,6vw,88px)) clamp(48px,6vw,96px);min-height:min(100svh,980px);display:flex;align-items:flex-end}
.hero-in{position:relative;z-index:2;width:100%}
.hero-top{display:grid;grid-template-columns:1fr minmax(260px,34%);gap:clamp(24px,4vw,64px);align-items:end}
.hero-home .hero-top{grid-template-columns:1fr minmax(320px,44%);align-items:center}
.hero .label{margin-bottom:clamp(28px,3.5vw,48px)}
.hero h1{max-width:12ch}
.hero-card{aspect-ratio:4/5;max-height:min(62vh,600px);width:100%;justify-self:end;border-radius:var(--r);overflow:hidden;background:var(--card);box-shadow:0 40px 90px rgba(15,39,51,.16);transform:rotate(-2deg)}
.hero-card img{width:100%;height:100%;object-fit:cover}
.hero-card--e{transform:none;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;aspect-ratio:1/1;max-height:min(74vh,720px);width:100%}
.hero-card--e canvas{width:100%;height:100%;display:block}
.hero-foot{margin-top:var(--gap-hb);padding-top:clamp(24px,3vw,36px);border-top:2px solid var(--rosso);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);align-items:center}
.hero-foot .lead{color:var(--grigio);max-width:46ch}
.hero-foot .lead strong{color:var(--nero);font-weight:600}
.hero-foot .cta-row{justify-content:flex-end}
.hero-foot .cta-row .micro{flex-basis:100%;text-align:right;color:var(--grigio);font-size:14px}
.hero--text .hero-top{grid-template-columns:1fr}
.hero--text h1{max-width:13ch}
.hero--compact{min-height:0;align-items:flex-start;padding-block:calc(var(--nav-h) + clamp(36px,5vw,72px)) clamp(40px,5vw,72px)}
.hero .strong{font-weight:700;font-size:clamp(18px,1.45vw,23px);line-height:1.45;max-width:38ch;color:var(--nero);text-wrap:balance}
.hero--text .hero-foot{align-items:end}
.hero-foot--wide{grid-template-columns:1fr;gap:28px}
.hero-foot--wide .lead{max-width:64ch}
.hero-foot--wide .cta-row{justify-content:flex-start}
.strong,.punch,.kick{text-wrap:balance}
.hero-foot .stack>p+p{margin-top:14px}

/* ---------- IMMAGINI ---------- */
.fig{position:relative;overflow:hidden;border-radius:var(--r);margin:0;aspect-ratio:var(--ar,3/2);background:var(--card)}
.fig img{width:100%;height:100%;object-fit:cover}
.fig--side{aspect-ratio:4/5}
.fig--wide{aspect-ratio:3/2}
.fig--tall{aspect-ratio:3/4;max-height:70vh}

/* ---------- DEFINIZIONE (cos'è il noleggio): card grande con testo in evidenza ---------- */
.define{display:grid;grid-template-columns:1.55fr 1fr;margin-top:var(--gap-hb);background:var(--card);border-radius:var(--r);overflow:hidden}
.define-card{padding:clamp(28px,4vw,64px);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.define-card p{font-size:clamp(20px,1.75vw,28px);line-height:1.45;max-width:26ch;color:var(--nero)}
.define-card .label{align-self:flex-start}
.define .fig{border-radius:0;aspect-ratio:auto;height:100%;min-height:320px}

/* ---------- CARD a scacchiera ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,22px);margin-top:var(--gap-hb)}
.card{border-radius:var(--r);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;min-height:clamp(260px,24vw,360px);background:#fff;border:1px solid rgba(27,27,27,.14);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(15,39,51,.12)}
.card .n{font-family:var(--display);font-size:clamp(48px,4.8vw,80px);line-height:.85;color:var(--rosso);margin-bottom:auto}
.card .cat{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio);margin-top:36px}
.card h3{font-size:clamp(26px,2.3vw,36px);line-height:1.05;max-width:16ch;margin:10px 0 16px}
.card p{font-size:clamp(15px,1.1vw,17px);color:var(--grigio);line-height:1.55;max-width:34ch}
.cards .card:nth-child(2),.cards .card:nth-child(3){background:var(--azzurro);border-color:var(--azzurro)}
.cards .card:nth-child(2) .cat,.cards .card:nth-child(3) .cat,.cards .card:nth-child(2) p,.cards .card:nth-child(3) p{color:#0f2733}
.band--card .card{border-color:transparent}

/* ---------- I 5 PASSAGGI: in fila su desktop, impilati su mobile ---------- */
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.6vw,22px);margin-top:var(--gap-hb)}
.stp{position:relative;padding-top:22px;padding-bottom:20px;display:flex;flex-direction:column;gap:12px}
.stp::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--nero);transform-origin:left;transition:transform 1s var(--ease)}
.stp:first-child::before{background:var(--rosso)}
html.anim .stp::before{transform:scaleX(0)}
html.anim .stp.in::before{transform:scaleX(1)}
.stp .n{font-family:var(--display);font-size:clamp(34px,3vw,48px);line-height:1;color:var(--rosso)}
.stp .cat{display:block;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.stp h3{font-size:clamp(22px,1.75vw,28px);line-height:1.02;margin-top:8px}
.stp p{font-size:clamp(14px,1.05vw,16px);color:var(--grigio);line-height:1.5;max-width:none}
.stp p+p{margin-top:6px}
.steps-note{margin-top:28px;font-size:14px;color:var(--grigio);max-width:70ch}
.steps-cta{margin-top:clamp(36px,4vw,56px)}
.how-media{margin-top:var(--gap-hb)}

/* ---------- CTA FINALE: card rossa dentro la pagina ---------- */
.final .box{background:var(--rosso);color:#fff;border-radius:var(--r);padding:clamp(40px,6vw,96px) clamp(28px,5vw,80px);display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,64px);align-items:end}
.final h2{max-width:14ch}
.final .lead{color:rgba(255,255,255,.9);margin-top:var(--gap-hb);max-width:40ch}
.final .cta-row{justify-content:flex-end}

/* ---------- CHI SIAMO ---------- */
.manifesto .punch{font-family:var(--display);font-size:clamp(32px,3.6vw,54px);line-height:1;margin-top:22px;max-width:12ch}
.manifesto .strong{font-weight:700;font-size:clamp(17px,1.3vw,20px);max-width:30ch}
.pr-list{margin-top:var(--gap-hb)}
.pr{display:grid;grid-template-columns:minmax(120px,.5fr) 1.2fr 1fr;gap:clamp(20px,3vw,48px);padding:clamp(36px,4.5vw,64px) 0;border-top:1px solid rgba(27,27,27,.25);align-items:start}
.pr:last-child{border-bottom:1px solid rgba(27,27,27,.25)}
.pr-side .n{font-family:var(--display);font-size:clamp(56px,6vw,96px);line-height:.85;color:var(--rosso);display:block;margin-bottom:14px}
.pr-side .cat{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio)}
.pr h3{max-width:16ch}
.pr-body p{font-size:clamp(16px,1.2vw,19px);color:var(--grigio);max-width:44ch}
.pr-body p+p{margin-top:12px}
.pr .kick{font-weight:700;font-size:clamp(17px,1.3vw,20px);color:var(--rosso);margin-top:20px;max-width:40ch}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px)}
.duo>div{background:#fff;border-radius:var(--r);padding:clamp(32px,4vw,56px) clamp(24px,3vw,40px);font-family:var(--display);font-size:clamp(28px,3.2vw,48px);line-height:1;border:1px solid rgba(27,27,27,.08)}
.duo span{color:var(--rosso)}
.evolvere .after{margin-top:clamp(28px,3.5vw,48px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);align-items:start}
.evolvere .after p{color:var(--grigio)}
.evolvere .after p+p{margin-top:14px}

/* ---------- FAQ ---------- */
.avviso .box{background:var(--card);border-radius:var(--r);padding:clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:clamp(20px,3vw,48px);align-items:start}
.avviso h3{font-size:clamp(24px,2.3vw,32px)}
.avviso p{font-size:16px;color:var(--grigio);max-width:72ch}
.avviso p+p{margin-top:8px}
.faqsec{padding-block:clamp(40px,5vw,72px) clamp(64px,8vw,110px)}
.faq-grid{display:grid;grid-template-columns:minmax(200px,3fr) 9fr;gap:clamp(24px,4vw,64px);align-items:start}
.chips{display:flex;flex-direction:column;gap:6px;position:sticky;top:calc(var(--nav-h) + 24px)}
.chip{text-align:left;font-weight:600;font-size:15px;padding:12px 18px;border-radius:999px;background:transparent;transition:background .2s,color .2s}
.chip:hover{background:var(--card)}
.chip.on{background:var(--rosso);color:#fff}
.catblock{display:none}
.catblock.show{display:block}
.catblock h2{font-size:clamp(28px,3vw,44px);color:var(--rosso);margin-bottom:24px}
.fa{border-top:1px solid rgba(27,27,27,.2)}
.fa:last-child{border-bottom:1px solid rgba(27,27,27,.2)}
.fq{width:100%;text-align:left;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 0;font-weight:600;font-size:clamp(17px,1.35vw,21px);line-height:1.3}
.fq .sgn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:2px solid var(--nero);display:inline-flex;align-items:center;justify-content:center;font-size:20px;font-weight:400;line-height:1;margin-top:-3px;transition:background .2s,color .2s,border-color .2s,transform .3s var(--ease)}
.fa.open .fq .sgn{background:var(--rosso);border-color:var(--rosso);color:#fff;transform:rotate(45deg)}
.fbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.fa.open .fbody{grid-template-rows:1fr}
.fbody>div{overflow:hidden}
.fbody p{font-size:16px;color:var(--grigio);max-width:70ch;margin-bottom:10px}
.fbody ul{margin:6px 0 10px 20px;color:var(--grigio);font-size:16px}
.fbody li{margin-bottom:5px}
.fbody>div>:last-child{margin-bottom:26px}
html.reduced .fbody{transition:none}
.domanda-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,3vw,40px);align-items:stretch}
.finalbox{background:var(--rosso);color:#fff;border-radius:var(--r);padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.finalbox .label{color:#fff;margin-bottom:22px}
.finalbox .label::before{background:#fff}
.finalbox h2{max-width:12ch}
.finalbox p{color:rgba(255,255,255,.95);font-size:clamp(17px,1.3vw,20px);margin-top:var(--gap-hb)}
.qcard{background:#fff;border-radius:var(--r);padding:clamp(28px,3.4vw,52px);box-shadow:0 30px 80px rgba(15,39,51,.10)}
.qcard h3{font-size:clamp(28px,2.7vw,40px);margin-bottom:8px}
.qcard .qsub{color:var(--grigio);font-size:15px;margin-bottom:30px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.field{display:flex;flex-direction:column;gap:10px;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--nero)}
.field>span{display:inline-flex;align-items:center;gap:8px}
.field>span::before{content:'';width:7px;height:7px;background:var(--rosso);flex:0 0 auto}
.field.full{grid-column:1/-1}
.field input,.field textarea{font-family:var(--body);font-size:17px;font-weight:400;letter-spacing:0;text-transform:none;background:#fff;border:1.5px solid rgba(27,27,27,.28);border-radius:14px;padding:0 18px;height:58px;color:var(--nero);outline:none;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
.field textarea{resize:vertical;min-height:150px;height:auto;padding:16px 18px;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--grigio-l)}
.field input:hover,.field textarea:hover{border-color:rgba(27,27,27,.55)}
.field input:focus,.field textarea:focus{border-color:var(--rosso);box-shadow:0 0 0 4px rgba(209,0,0,.12)}
.form.validate :is(input,textarea):invalid{border-color:var(--rosso);background:#FFF6F6}
.req{color:var(--rosso)}
.consent{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;cursor:pointer;font-weight:400;color:var(--grigio);padding:16px 18px;background:var(--campo);border-radius:14px}
.consent input{width:20px;height:20px;accent-color:var(--rosso);flex:0 0 auto;margin-top:2px;cursor:pointer}
.consent a{color:var(--nero);text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--rosso)}
.form.validate .consent:has(input:invalid){color:var(--rosso);background:#FFF6F6}
.submit{grid-column:1/-1;margin-top:6px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.submit .btn{width:100%}
.submit .micro{flex-basis:100%;text-align:center}
.micro{font-size:14px;color:var(--grigio)}
.thanks[hidden]{display:none}
.thanks .label{margin-bottom:22px}
.thanks h2{max-width:14ch}
.thanks p{font-size:clamp(17px,1.3vw,20px);margin-top:12px}
.thanks h2+p{margin-top:var(--gap-hb)}

/* ---------- FOOTER: wordmark gigante e la E ---------- */
.footer{background:var(--nero);color:#fff;padding:clamp(56px,7vw,96px) 0 32px;overflow:hidden}
.f-top{padding-bottom:clamp(36px,4vw,56px);border-bottom:1px solid rgba(255,255,255,.18)}
.f-top .wm{font-family:var(--display);font-size:clamp(40px,6vw,88px);line-height:.9;letter-spacing:.02em;display:block;color:var(--rosso)}
.f-top .tag{font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--azzurro);margin-top:18px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.6fr;gap:36px;padding-top:clamp(36px,4vw,56px)}
.f-grid--min{grid-template-columns:1.4fr 1.6fr}
.f-brand .desc{font-size:14px;color:rgba(255,255,255,.6);max-width:34ch}
.footer h4{font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--azzurro);margin-bottom:16px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer li{font-size:14px;color:rgba(255,255,255,.82)}
.footer a{color:rgba(255,255,255,.82);text-decoration:none;transition:color .2s}
.footer a:hover{color:#fff}
.footer .ph{color:rgba(255,255,255,.45)}
.f-legal{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:12px;color:rgba(255,255,255,.55)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .stp:last-child{grid-column:1/-1}
}
@media(max-width:900px){
  :root{--nav-h:76px}
  .nav-links{display:none} .burger{display:block}
  .nav-in{padding:8px 8px 8px 20px}
  .hero{min-height:0;align-items:flex-start}
  .hero-top{grid-template-columns:1fr}
  .hero-card{max-width:min(78%,420px);justify-self:start;max-height:none;transform:rotate(-1.5deg);order:-1;margin-bottom:8px;aspect-ratio:4/3}
  .hero h1,.hero--text h1{max-width:none}
  .hero-foot{grid-template-columns:1fr;border-top:0;padding-top:0;margin-top:clamp(24px,5vw,36px)}
  .hero-foot .cta-row{justify-content:flex-start}
  .hero-foot .cta-row .micro{text-align:left}
  .hero-foot .cta-row .btn{width:100%}
  .sec{grid-template-columns:1fr;gap:20px}
  .sec-side{position:static;flex-direction:row;align-items:baseline;gap:16px}
  .sec-side .idx{font-size:48px}
  .sec-body{grid-template-columns:1fr}
  .define{grid-template-columns:1fr}
  .define .fig{aspect-ratio:3/2;min-height:0}
  /* home mobile: titolo, poi la E, poi il corpo */
  .hero-home .hero-card--e{order:2;aspect-ratio:1;max-width:min(70%,320px);justify-self:center;transform:none;border-radius:0;margin:8px 0 0}
  .hero-home .hero-top{grid-template-columns:1fr;gap:8px}
  .hero-home .hero-card--e{max-height:none}
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .card .n{margin-bottom:0}
  .card .cat{margin-top:22px}
  .steps{grid-template-columns:1fr}
  .stp:last-child{grid-column:auto}
  .stp{flex-direction:row;flex-wrap:wrap;gap:6px 18px;padding-top:18px}
  .stp .n{flex:0 0 56px}
  .stp .stp-t{flex:1;min-width:0}
  .stp h3{margin-top:0}
  .stp p{flex-basis:100%;padding-left:74px}
  .final .box{grid-template-columns:1fr}
  .final .cta-row{justify-content:flex-start}
  .pr{grid-template-columns:1fr;gap:16px}
  .pr-side{display:flex;align-items:baseline;gap:14px}
  .pr-side .n{font-size:48px;margin:0}
  .duo{grid-template-columns:1fr}
  .evolvere .after{grid-template-columns:1fr}
  .avviso .box{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .chips{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  .chip{background:var(--card)}
  .domanda-grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  :root{--r:22px}
  .brand .wm{font-size:21px}
  .f-grid,.f-grid--min{grid-template-columns:1fr}
  .fq{gap:14px}
  .qcard{padding:22px 18px}
  .stp p{padding-left:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.chip,.menu,.fbody,.nav,.card,.stp::before,.btn .ico{transition:none}
}

/* ---- v7: foto del personaggio ---- */
.hero-home .hero-top{align-items:center}
figure.hero-card{aspect-ratio:4/5;margin:0}
.fig--banner{aspect-ratio:21/9}
.finalbox-fig{max-width:min(100%,360px);margin-bottom:24px}
.fig[data-fig]{clip-path:none}
@media(max-width:900px){.fig--banner{aspect-ratio:3/2}.finalbox-fig{max-width:min(100%,280px)}}
@media(max-width:900px){.hero-home figure.hero-card{order:2;max-width:min(78%,420px);justify-self:start;aspect-ratio:4/5;margin:8px 0 0}}
.fig--wide{aspect-ratio:var(--ar,3/2)}
@media(max-width:900px){.fig--wide{aspect-ratio:3/2}}
/* v7: personaggio su bianco accanto al titolo negli hero tipografici (Come funziona, FAQ) */
.hero--text .hero-top:has(.hero-fig){grid-template-columns:1fr minmax(320px,42%);align-items:end;gap:clamp(24px,4vw,64px)}
.hero-fig{background:transparent;border-radius:0;box-shadow:none;overflow:visible;justify-self:end;width:100%;max-height:min(78vh,760px);aspect-ratio:auto}
.hero-fig img{object-fit:contain;object-position:bottom right}
@media(max-width:900px){.hero--text .hero-top:has(.hero-fig){grid-template-columns:1fr}.hero-fig{justify-self:start;max-width:78%;max-height:none;margin-top:4px}.hero-fig img{object-position:bottom left}}
.hero-fig img{mix-blend-mode:multiply}  /* il bianco dello scatto si fonde con il fondo della pagina */
/* v7: mezzo busto negli hero compatti (FAQ): figura meno alta, hero più bassa */
.hero--compact .hero-fig{max-height:min(46vh,420px);aspect-ratio:1/1;max-width:420px}
.hero--compact .hero-fig img{object-position:bottom right}
@media(max-width:900px){.hero--compact .hero-fig{max-width:62%;max-height:none}}

/* ======================== v8 · feedback del cliente dell'8 ottobre ======================== */
/* meno rosso: la card finale diventa azzurra con la CTA rossa */
.final .box{background:var(--azzurro);color:var(--nero)}
.final .lead{color:var(--nero)}
/* numerazioni solo dove c'è una sequenza vera (i 5 passaggi): via indici di sezione e numeri delle card */
.sec-side .idx,.card .n{display:none}
.card{justify-content:flex-start}
.card .cat{margin-bottom:10px}
/* testi secondari un po' più grandi, soprattutto su mobile */
.lead{font-size:clamp(19px,1.45vw,23px)}
.hero .strong{font-size:clamp(19px,1.5vw,24px)}
.stp p{font-size:clamp(15px,1.1vw,17px)}
.card p{font-size:clamp(16px,1.15vw,18px)}
.fbody p,.fbody ul,.avviso p{font-size:17px}
.steps-note{font-size:15px}
.hero-foot .cta-row .micro{font-size:15px}
/* ritmo verticale: sezioni un po' meno alte, più continuità */
.band{padding-block:clamp(72px,8vw,120px)}
.how-media{margin-top:clamp(36px,5vw,72px)}
/* Chi siamo: idea (azzurro) → principi (griglia bianca) → digitale e umano (card) con CTA */
.manifesto .punch{max-width:16ch}
.pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,80px)}
.pr{display:flex;flex-direction:column;gap:14px;padding:clamp(32px,4vw,56px) 0;border-top:1px solid rgba(27,27,27,.25)}
.pr .cat{font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--nero);display:inline-flex;align-items:center;gap:10px}
.pr .cat::before{content:'';width:10px;height:10px;background:var(--rosso)}
.pr h3{max-width:16ch}
.pr-body{margin-top:6px}
.pr-body p{font-size:clamp(17px,1.25vw,20px);color:var(--grigio);max-width:none;line-height:1.55}
.pr-body p+p{margin-top:12px}
.evolvere .kick{font-weight:700;font-size:clamp(18px,1.4vw,22px);color:var(--nero);max-width:28ch}
/* immagini su mobile: tagli meno aggressivi per le scene larghe */
@media(max-width:900px){
  .fig--wide,.fig--banner{aspect-ratio:16/9}
  .pr-grid{grid-template-columns:1fr;gap:0}
  .pr{padding:28px 0}
  .lead{font-size:19px}
  .pr-body p{font-size:17px}
  .card p{font-size:17px}
  .stp p{font-size:16px}
  .band{padding-block:64px}
}
/* v8: il cambio pagina al contrario, come chiede il cliente: fondo azzurro e E rossa (prima rosso pieno con la E bianca) */
.loader{background:var(--azzurro);color:var(--rosso)}
/* v8 · leggibilità: occhielli e testi piccoli più grandi (il cliente li trovava minuti rispetto alle headline) */
.label{font-size:14px;letter-spacing:.12em}
.card .cat,.stp .cat,.pr .cat,.pr-side .cat{font-size:13px;letter-spacing:.12em}
.btn{font-size:16px}
.nav-links a{font-size:15px}
.nav-cta.btn{font-size:15px}
.menu-tag{font-size:13px}
.steps-note,.hero-foot .cta-row .micro,.micro,.consent{font-size:16px}
.chip{font-size:16px}
.qcard .qsub{font-size:17px}
.field{font-size:14px}
.f-top .tag,.footer h4{font-size:13px}
.f-brand .desc,.footer li{font-size:16px}
.f-legal{font-size:14px}
.avviso p,.fbody p,.fbody ul{font-size:18px}
.stp p{font-size:clamp(16px,1.15vw,18px)}
.card p{font-size:clamp(17px,1.2vw,19px)}
.pr-body p{font-size:clamp(18px,1.3vw,21px)}
.lead{font-size:clamp(20px,1.5vw,24px)}
@media(max-width:900px){.lead{font-size:20px}.pr-body p{font-size:18px}.card p{font-size:18px}.stp p{font-size:17px}.label{font-size:13px}}
/* v8 · occhiello sopra il titolo: senza gli indici la colonna di sinistra restava vuota */
.sec{grid-template-columns:1fr;gap:0}
.sec-side{position:static;margin-bottom:clamp(18px,2.2vw,28px)}
.sec-main{max-width:min(100%,1040px)}
/* v8 · principi: una sola riga continua per fila, e una in chiusura */
.pr-grid{column-gap:0;border-bottom:1px solid rgba(27,27,27,.25)}
.pr{border-top:1px solid rgba(27,27,27,.25)}
.pr:nth-child(odd){padding-right:clamp(24px,4vw,64px)}
.pr:nth-child(even){padding-left:clamp(24px,4vw,64px)}
@media(max-width:900px){.pr:nth-child(odd),.pr:nth-child(even){padding-inline:0}}
/* v8 · griglia regolare: occhiello + titolo a sinistra, corpo a destra; immagini e card a tutta larghezza sotto */
.sec{grid-template-columns:5fr 7fr;gap:clamp(28px,5vw,80px);align-items:start}
.sec-side{position:sticky;top:calc(var(--nav-h) + 24px);margin:0;gap:clamp(18px,2.2vw,28px)}
.sec-side h2{max-width:12ch}
.sec-main{max-width:none;padding-top:clamp(10px,1.2vw,18px)}
.sec-body{margin-top:0;padding-top:0;border-top:0;grid-template-columns:1fr}
.sec-body>div+div{margin-top:clamp(18px,2vw,28px)}
.sec--full{grid-template-columns:1fr}
.sec--full .sec-main{display:none}
.define,.cards,.pr-list{margin-top:var(--gap-hb)}
@media(max-width:900px){.sec{grid-template-columns:1fr;gap:20px}.sec-side{position:static;flex-direction:column;align-items:flex-start;gap:14px}.sec-main{padding-top:0}}
/* v8 · sezioni con un blocco grande (card, definizione): titolo in testa, blocco a tutta larghezza sotto */
.sec:has(.define),.sec:has(.cards){grid-template-columns:1fr;gap:0}
.sec:has(.define) .sec-side,.sec:has(.cards) .sec-side{position:static}
.sec:has(.define) .sec-main,.sec:has(.cards) .sec-main{padding-top:0}
.sec:has(.define) .sec-main>.define,.sec:has(.cards) .sec-main>.cards{margin-top:var(--gap-hb)}
.sec:has(.define) .sec-side h2,.sec:has(.cards) .sec-side h2{max-width:14ch}

/* ======================== v8 · grammatica unica delle sezioni ========================
   occhiello su una riga sua · titolo a sinistra · corpo a destra, in cima allineato al titolo · CTA sotto il corpo, a sinistra
   blocchi grandi (card, definizione, passaggi) a tutta larghezza sotto il titolo */
.sec{display:grid;grid-template-columns:5fr 7fr;gap:0 clamp(28px,5vw,80px);align-items:start}
.sec>.label{grid-column:1/-1;margin-bottom:clamp(20px,2.4vw,32px)}
.sec>.label--empty{display:none}
.sec-side{position:static;margin:0;padding:0}
.sec-side h2{max-width:none}
.sec-main{max-width:none;padding-top:clamp(6px,.6vw,10px)}
.sec-body{margin-top:0;padding-top:0;border-top:0;grid-template-columns:1fr}
.sec-body>div+div{margin-top:clamp(18px,2vw,28px)}
.sec-body .cta-row{margin-top:clamp(22px,2.4vw,32px);justify-content:flex-start}
.sec--full .sec-main{display:none}
.sec:has(.define),.sec:has(.cards){grid-template-columns:1fr}
.sec:has(.define) .sec-main,.sec:has(.cards) .sec-main{padding-top:0}
.sec:has(.define) .sec-side h2,.sec:has(.cards) .sec-side h2{max-width:16ch}
.define-card{justify-content:center}
/* hero: la frase meno spezzata, CTA sotto il testo a sinistra come nelle sezioni */
.hero--text h1{max-width:18ch}
.hero-foot{grid-template-columns:1fr;gap:clamp(18px,2vw,28px);align-items:start}
.hero-foot .cta-row{justify-content:flex-start}
.hero-foot .cta-row .micro{flex-basis:auto;text-align:left;margin-left:6px}
.hero-foot .lead{max-width:58ch}
/* principi: titoli su due righe (a capo a mano) e altezza fissa, così i paragrafi partono allineati */
.pr h3{max-width:none;min-height:2em;line-height:1}
.pr-grid{border-top:0}
.pr-list{margin-top:0}
.pr{border-top:1px solid rgba(27,27,27,.25)}
.pr-grid{border-bottom:1px solid rgba(27,27,27,.25)}
@media(max-width:900px){
  .sec{grid-template-columns:1fr;gap:16px}
  .sec>.label{margin-bottom:4px}
  .sec-main{padding-top:0}
  .hero--text h1{max-width:none}
  .pr h3{min-height:0}
}
/* v8 · titoli lunghi: niente colonne strette con il vuoto a destra */
.hero--text h1{max-width:none}
.sec--full{grid-template-columns:1fr}
.sec--full .sec-side h2{max-width:20ch}
.final h2{max-width:22ch}
.final .box{grid-template-columns:1.5fr .5fr}
@media(max-width:900px){.final .box{grid-template-columns:1fr}.final h2{max-width:none}}
/* v8 · hero: body copy a sinistra, CTA a destra (Paolo: "spazio c'è"); nelle sezioni la CTA resta sotto il corpo */
.hero-foot{grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);align-items:center}
.hero--text .hero-foot{align-items:end}
.hero-foot .cta-row{justify-content:flex-end}
.hero-foot .cta-row .micro{flex-basis:100%;text-align:right;margin-left:0}
.hero-foot .lead{max-width:46ch}
.hero-foot--wide{grid-template-columns:1fr 1fr}
.hero-foot--wide .cta-row{justify-content:flex-end}
@media(max-width:900px){.hero-foot,.hero-foot--wide{grid-template-columns:1fr}.hero-foot .cta-row,.hero-foot--wide .cta-row{justify-content:flex-start}.hero-foot .cta-row .micro{text-align:left}}
/* v8 · "Ma cos'è": occhiello, titolo e testo nello stesso riquadro arrotondato dell'immagine */
.define--full{margin-top:0;grid-template-columns:1.45fr 1fr}
.define--full .define-card{justify-content:flex-start;gap:0}
.define--full .define-card .label{margin-bottom:clamp(20px,2.4vw,32px)}
.define--full .define-card h2{max-width:12ch;margin-bottom:clamp(28px,3.5vw,48px)}
.define--full .define-card p{max-width:32ch}
/* v8 · Chi siamo, chiusura di "Come lavoriamo" in grassetto come la chiusura di "Evolvere" */
.manifesto .kick{font-weight:700;font-size:clamp(18px,1.4vw,22px);color:var(--nero);max-width:30ch;margin-top:8px}
/* v8 · principi: una regola sola per le righe, niente doppioni */
.pr-grid{border:0;border-bottom:1px solid rgba(27,27,27,.25)}
.pr{border:0;border-top:1px solid rgba(27,27,27,.25)}
@media(max-width:900px){.define--full{grid-template-columns:1fr}.define--full .define-card h2{max-width:none}.define--full .define-card p{max-width:none}}
/* v8 · immagini per mobile: versioni verticali 4:5 dedicate (img/*-m.jpg) e figure a tutta larghezza */
.fig picture{display:block;width:100%;height:100%}
.fig picture img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .fig--m,.fig--m.fig--wide,.fig--m.fig--banner{aspect-ratio:4/5}
  .hero-home figure.hero-card{max-width:none;width:100%;transform:none;aspect-ratio:4/5}
  .how-media,.fig--banner{margin-inline:0}
}
/* v8 · Chi siamo: la frase di chiusura su una riga, in grassetto, attaccata al testo sopra */
.manifesto .kick{margin-top:16px;max-width:none;white-space:nowrap;font-size:clamp(17px,1.3vw,21px)}
@media(max-width:900px){.manifesto .kick{white-space:normal}}
/* v8 · Chi siamo: la foto dei sedili meno alta (taglio 21:9) */
.fig--low{aspect-ratio:21/9;max-height:460px}
.fig--low img{object-position:center 60%}
@media(max-width:900px){.fig--low{aspect-ratio:3/2;max-height:none}}
/* v8 · Chi siamo: "Ecco come…" è il titolo della griglia dei principi */
.pr-title{max-width:20ch;margin-bottom:var(--gap-hb)}
/* v8 · Chi siamo, Evolvere: chiusura su due righe, subito sotto i paragrafi */
.evolvere .kick{max-width:none;margin-top:16px;white-space:nowrap}
.sec-body>div+div:has(.kick){margin-top:16px}
@media(max-width:900px){.evolvere .kick{white-space:normal}}
/* v8 · hero di Chi siamo: due testi affiancati, allineati in alto (nessuna CTA da allineare in basso) */
.hero-foot--texts{align-items:start}
.hero-foot--texts .strong{max-width:30ch}
/* v8 · foto dei sedili: taglio basso ma con gli occhi della E dentro */
.fig--low img{object-position:center 42%}
/* v8 · FAQ, modulo domanda: titolo sopra a tutta larghezza, sotto la clip in loop (E → ?) e il form */
.domanda-head{display:grid;grid-template-columns:5fr 7fr;gap:0 clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(28px,3.5vw,48px)}
.domanda-head .label{margin-bottom:clamp(18px,2.2vw,28px);display:inline-flex}
.domanda-head h2{max-width:none}
.domanda-head .lead{color:var(--grigio);margin:0;padding-bottom:6px}
.domanda-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,3vw,40px);align-items:stretch}
.finalbox--clip{padding:clamp(16px,1.8vw,24px);justify-content:center}
.finalbox--clip .clip{display:block;width:100%;height:100%;object-fit:cover;border-radius:calc(var(--r) - 10px);aspect-ratio:3/4;background:var(--azzurro)}
@media(max-width:900px){.domanda-head{grid-template-columns:1fr;gap:12px;align-items:start}.domanda-grid{grid-template-columns:1fr}.finalbox--clip .clip{aspect-ratio:3/4}}
/* v8 · hero della home e della landing: l'occhiello lungo (descrizione dell'attività) diventa una pillola, diversa dagli occhielli di sezione */
.hero .label--plain{font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;background:var(--card);color:var(--nero);padding:10px 16px;border-radius:999px;display:inline-block;max-width:none;line-height:1.3}
@media(max-width:900px){.hero .label--plain{font-size:14px;padding:8px 14px}}
/* v8 · FAQ: niente cornice rossa, la clip è una forma unica arrotondata; titolo su una o due righe a tutta larghezza */
.domanda-head{grid-template-columns:1fr;gap:0}
.domanda-head h2{max-width:26ch}
.domanda-head .lead{margin-top:clamp(14px,1.6vw,20px);padding:0}
.finalbox--clip{background:transparent;padding:0;border-radius:var(--r);overflow:hidden;min-height:0}
.finalbox--clip .clip{border-radius:var(--r);height:100%;aspect-ratio:auto;min-height:420px}
@media(max-width:900px){.finalbox--clip .clip{aspect-ratio:3/4;min-height:0;height:auto}}
/* v8 · home, sezione FAQ: la body copy a destra allineata in basso al titolo, non in alto */
#faq .sec{align-items:end}
#faq .sec-main{padding-top:0;padding-bottom:6px}
@media(max-width:900px){#faq .sec{align-items:start}}
/* v8 · "Ma cos'è": il taglio della foto tiene dentro E e calendario */
.define--full .fig img{object-position:68% center}
/* v8 · home FAQ: body copy attaccata alla CTA; card finale: CTA su una riga, lead con a capo prima di "e quando" */
#faq .sec-body>div+div{margin-top:6px}
#faq .sec-body .cta-row{margin-top:14px}
.final .btn{white-space:nowrap}
.final .lead{max-width:none}
/* v8 · Chi siamo: la foto dei sedili larga quanto il testo (il max-height la stringeva a 1070px), bassa per proporzione */
.fig--low{aspect-ratio:2.5/1;max-height:none;width:100%}
.define--full .fig img{object-position:center}
/* v8 · principi: l'ultimo blocco aveva ancora un border-bottom ereditato → riga doppia in basso a destra */
.pr,.pr:last-child{border-bottom:0 !important}
/* v8 · Come funziona: le categorie dei 5 passaggi occupano sempre due righe, così i titoli si allineano */
.stp .cat{min-height:2.7em;line-height:1.35;display:flex;align-items:flex-end}
@media(max-width:900px){.stp .cat{min-height:0;display:block}}
/* v8 · i 5 passaggi come timeline: una linea continua con un punto rosso per ogni tappa */
.steps{gap:0}
.stp{padding-top:30px;padding-right:clamp(16px,2vw,28px)}
.stp::before{background:var(--nero);height:2px}
.stp:first-child::before{background:var(--nero)}
.stp::after{content:'';position:absolute;left:0;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--rosso);box-shadow:0 0 0 4px var(--card)}
.band:not(.band--card) .stp::after{box-shadow:0 0 0 4px var(--bianco)}
.stp:last-child{padding-right:0}
@media(max-width:900px){.steps{gap:clamp(14px,1.6vw,22px)}.stp{padding-top:18px;padding-right:0}.stp::after{display:none}.stp::before{background:var(--nero)}}
/* a capo dei titoli dei passaggi solo da desktop; nel markup lo spazio prima del <br> tiene separate le parole */
@media(max-width:900px){.stp-t br{display:none}}
/* v8 · card finale: la CTA non va mai a capo */
.final .box{grid-template-columns:1fr auto}
.final .btn{white-space:nowrap}
/* v8 · "Ma cos'è": il taglio tiene dentro il piccolo SUV sul palmo */
.define--full .fig img{object-position:78% center}
.define--full .fig img{object-position:92% center}
/* v8 · scene animate: video su desktop, immagine verticale su mobile */
.fig--video .clip{display:block;width:100%;height:100%;object-fit:cover}
.fig--video .clip-mob{display:none}
@media(max-width:900px){.fig--video .clip{display:none}.fig--video .clip-mob{display:block;width:100%;height:100%;object-fit:cover}}
/* v8 · occhielli +15% (richiesta del cliente): 14→16px, categorie 13→15px */
.label{font-size:16px}
.card .cat,.stp .cat,.pr .cat,.pr-side .cat{font-size:15px}
.f-top .tag,.footer h4,.menu-tag{font-size:15px}
@media(max-width:900px){.label{font-size:15px}}
/* v8 · landing: niente doppio respiro tra il banner e "Perché Espinasse" */
.band--banner+.band{padding-top:clamp(56px,6vw,88px)}
/* v8 · landing: la nota sotto i passaggi su una riga sola */
.steps-note{max-width:none;white-space:nowrap}
@media(max-width:900px){.steps-note{white-space:normal}}
/* v8 · clip dentro la card "Ma cos'è" */
.define .fig--video{aspect-ratio:auto;height:100%}
.define .fig--video .clip{object-position:92% center}
@media(max-width:900px){.define .fig--video{aspect-ratio:3/2;height:auto}.define .fig--video .clip-mob{object-position:92% center}}
/* v8 · card finale: stacco bianco uniforme dalla sezione sopra, mai a contatto con il fondo colorato */
.final{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(56px,7vw,100px)}
/* v8 · clip verticale su mobile dove esiste (landing) */
.fig--video .clip.clip-mob{display:none}
@media(max-width:900px){.fig--video .clip.clip-mob{display:block;width:100%;height:100%;object-fit:cover}.fig--video .clip:not(.clip-mob){display:none}}
/* v8 · menu mobile senza la E gigante di sfondo */
.menu .bgE{display:none}
/* 8bis · body copy a destra allineata in basso al titolo, non a metà altezza */
.sec{align-items:end}
.sec-main{padding-top:0;padding-bottom:6px}
.sec--full,.sec:has(.define),.sec:has(.cards){align-items:start}
@media(max-width:900px){.sec{align-items:start}.sec-main{padding-bottom:0}}
/* 8bis · home, Chi siamo: body copy che parte all'altezza del titolo e due paragrafi più vicini */
#chi-siamo .sec{align-items:start}
#chi-siamo .sec-main{padding-top:4px;padding-bottom:0}
#chi-siamo .sec-body>div+div{margin-top:10px}
#chi-siamo .sec-body{gap:0}

/* ======================== v9 · mobile: CTA dentro le forme, testi senza vuoti ======================== */
.skip{position:absolute;left:-999px;top:8px;background:var(--nero);color:#fff;padding:10px 16px;border-radius:999px;z-index:200}
.skip:focus{left:16px}
@media(max-width:900px){
  /* card finale: CTA sotto il testo, dentro la card */
  .final .box{grid-template-columns:1fr;gap:20px}
  .final h2{max-width:none}
  .final .cta-row{justify-content:flex-start}
  .final .btn{white-space:normal}
  /* testi: niente larghezze massime da desktop e niente bilanciamento che lascia vuoti */
  p,.lead,.strong,.kick,.punch,.hero .lead,.hero-foot .lead,.hero .strong,.pr-body p,.define-card p,.sec-body .lead,.lf-side p,.domanda-head .lead,.fbody p,.avviso p,.steps-note,.final .lead,.manifesto .kick,.evolvere .kick,.hero-foot--texts .strong{max-width:none;text-wrap:normal}
  h1,h2,h3,.sec-side h2,.sec--full .sec-side h2,.pr h3,.pr-title,.domanda-head h2,.lf-side h2,.finalbox h2,.define--full .define-card h2{max-width:none;text-wrap:balance}
  /* a capo forzati pensati per il desktop */
  .sec br,.final br,.evolvere br,.pr h3 br,.lf-side br,.hero-foot br{display:inline;content:'';}
  .sec br::after,.final br::after,.evolvere br::after,.pr h3 br::after,.lf-side br::after,.hero-foot br::after{content:' '}
  .nb{display:inline}
  .hero--text h1{max-width:none}
  /* bottoni larghi quanto serve, mai fuori dal contenitore */
  .btn{max-width:100%}
  .cta-row{flex-wrap:wrap}
  .steps-cta .btn,.hero-foot .cta-row .btn{width:auto}
}

/* v9 · mobile: titoli della card finale e dei principi equilibrati; landing hero: CTA a sinistra e piena */
@media(max-width:900px){
  .hero-foot .cta-row{justify-content:flex-start}
  .hero-foot .cta-row .btn{width:100%}
  .hero-foot .cta-row .micro{text-align:left}
  .lead{max-width:none}
}

/* ======================== v9 bis · body copy giustificate (DISATTIVATO: il sito usa la v9, testi a sinistra) ========================
   Per ripristinarlo togliere l'apertura e la chiusura di questo commento, cancellare le righe che iniziano con "--" e rimettere nei template
   le frasi senza <br> (home: "Quanto pago davvero?" e CTA finale; chi siamo: "Il digitale…"; FAQ: <strong class="blk">).
p,.lead,.strong,.kick,.pr-body p,.define-card p,.sec-body .lead,.lf-side p,.fbody p,.avviso p,.card p,.stp p,.steps-note,.final .lead,.hero-foot .lead,.hero .strong,.f-brand .desc,.qcard .qsub,.domanda-head .lead{text-align:justify;text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto;text-justify:inter-word}
h1,h2,h3,.label,.cat,.btn,.chip,.footer li,.f-legal,.micro,.consent,.q,.q.sub,.fq{text-align:left;hyphens:manual}
.hero-foot .cta-row .micro{text-align:right}
@media(max-width:900px){.hero-foot .cta-row .micro{text-align:left}}
   -- 9bis · giustificato pulito: ultima riga a sinistra, niente giustificazione dove la colonna è stretta o il testo è una frase sola
p,.lead,.strong,.kick{text-align-last:left}
.final .lead,.kick,.strong,.hero .strong,.steps-note,.micro,.qcard .qsub,.card p,.stp p,.f-brand .desc{text-align:left;hyphens:manual}
.define-card p{max-width:none}
   -- 9bis · frase in grassetto a capo senza <br>; frasi brevi e box stretti a sinistra
.blk{display:block;margin-top:10px}
.domanda-head .lead,.avviso p{text-align:left;hyphens:manual}
*/