/* YAVENO · home più corta (15l). Le sezioni sotto i campioni sono più strette: titoli e spazi più piccoli,
   gli extra in una riga di tre schede, «Come lavoriamo» in quattro righe, Giovanni con tre punti e tre domande.
   Il telefono (sotto i 760 px) ha le sue regole in telefono.css, che si carica dopo. */

/* ---------- campioni e riquadri ---------- */
.rf-work{padding:clamp(48px,5vw,72px) var(--g) clamp(40px,4vw,60px)}
.rf-heading{margin-bottom:24px}
.rf-more{max-width:1344px;margin:14px auto 0;font-size:15.5px;line-height:1.5;color:var(--muted)}
.rf-more a{color:var(--ink);font-weight:500;text-underline-offset:4px}
.s-bento{padding:clamp(48px,5vw,72px) var(--g) clamp(40px,4vw,60px)}
.s-bento .section-head{margin-bottom:clamp(20px,2.4vw,30px)}
.s-bento .section-head h2{font-size:clamp(34px,4.2vw,60px)}

/* ---------- prezzi ---------- */
.prices{padding:clamp(48px,5vw,76px) var(--g)}
.prices .section-head{margin-bottom:clamp(20px,2.4vw,32px)}
.prices .section-head h2{font-size:clamp(34px,4.2vw,60px)}
.terms{margin-top:28px;gap:24px}

/* ---------- extra: tre schede in una riga ---------- */
.extras-mini{padding:clamp(40px,4vw,60px) var(--g) clamp(44px,4.4vw,64px)}
.extras-mini .section-head{display:block;margin-bottom:clamp(18px,2vw,26px)}
.extras-mini .section-head h2{font-size:clamp(30px,3.4vw,48px)}
.extras-mini .extra-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.extras-mini .extra,.extras-mini .extra:last-child{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;align-content:start;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.extras-mini .extra h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.025em;margin:0}
.extras-mini .extra-price{font-size:clamp(22px,2vw,28px);text-align:right;white-space:nowrap}
.extras-mini .extra-price span{display:block;font-size:13px;margin-top:2px;color:var(--muted)}
.extras-mini .extra>p:not(.extra-price){grid-column:1/-1;max-width:none;font-size:15.5px;line-height:1.42;color:#3b4045}
.extras-mini .extra-more{grid-column:1/-1;display:inline-flex;align-items:center;justify-self:start;min-height:44px;font-weight:500;color:var(--ink);text-underline-offset:4px}
.extras-mini .extra-more:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.extras-mini .extras-foot{display:block;max-width:72ch;margin-top:18px;font-size:15.5px;line-height:1.5}

/* ---------- come lavoriamo: quattro passi in una riga ---------- */
.come{padding:clamp(40px,4vw,60px) var(--g) clamp(44px,4.4vw,64px);background:var(--white);border-top:1px solid var(--line)}
.come .section-head{display:block;margin-bottom:clamp(18px,2vw,26px)}
.come .section-head h2{font-size:clamp(30px,3.4vw,48px)}
.come-list{list-style:none;margin:0 auto;padding:0;max-width:var(--max);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.come-list li{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:1px solid var(--ink)}
.come-list b{font:500 clamp(21px,1.8vw,26px)/1.1 Ronzino,sans-serif;letter-spacing:-.03em}
.come-list span{font-size:15.5px;line-height:1.45;color:#3b4045}
.come-more{max-width:var(--max);margin:18px auto 0;font-size:15.5px}
.come-more a{color:var(--ink);font-weight:500;text-underline-offset:4px}

/* ---------- Giovanni e le domande ---------- */
.founder{padding:clamp(48px,5vw,76px) var(--g);gap:28px clamp(32px,5vw,72px)}
.founder h2{font-size:clamp(40px,4.6vw,72px);margin-bottom:20px}
.founder-copy p{font-size:clamp(17px,1.35vw,20px);margin-bottom:14px}
.founder-pts{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:10px;max-width:46ch}
.founder-pts li{font-size:16px;line-height:1.42;color:#2c3135}
.founder-pts strong{font-weight:500;color:var(--ink)}
.founder .faq-title{padding:14px 0}
.founder .faq summary{padding:16px 0;font-size:clamp(18px,1.5vw,22px)}
.founder .faq details p{padding:0 0 18px}
.faq-more{margin:0;padding:14px 0 0;font-size:15.5px}
.faq-more a{color:var(--ink);font-weight:500;text-underline-offset:4px}

/* ---------- contatto ---------- */
.contact{padding:clamp(48px,5vw,80px) var(--g);gap:36px clamp(40px,5vw,72px)}
.contact h2{font-size:clamp(40px,5.2vw,84px);margin-bottom:20px}
.contact-left>p{margin-bottom:24px}
.contact-who{margin-top:20px}
.contact-form{gap:18px}