/* ==========================================================================
   Outside The Box — CSS della home (solo gli elementi di questa pagina)
   ========================================================================== */

/* ---------- Apertura ---------- */
.apertura{border-bottom:1px solid var(--linea)}
.apertura__griglia{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(40px,5vw,72px);padding-block:clamp(36px,5vw,72px) clamp(48px,6vw,88px)}
.apertura__testo{flex:1 1 520px;min-width:0}
.apertura__titolo{margin-top:26px;font-family:var(--font-titoli);font-weight:400;font-size:clamp(96px,13.4vw,196px);line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--inchiostro)}
.apertura__sottotitolo{margin-top:30px;max-width:600px;font-size:clamp(18px,1.5vw,21px);line-height:1.6;font-weight:300;color:var(--testo)}
.apertura__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.apertura__fiducia{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:40px;padding-top:22px;border-top:1px solid var(--linea);font-size:14px;color:var(--grigio-blu)}
.apertura__fiducia li{display:inline-flex;align-items:center;gap:8px}

.apertura__visivo{flex:0 1 520px;min-width:280px;margin-inline:auto}
.collage{position:relative;width:100%;aspect-ratio:520/620}
.collage__riquadro{position:absolute;left:12%;top:7%;width:80%;aspect-ratio:1/1;border:clamp(7px,.8vw,11px) solid var(--accento)}
.collage__foto{position:absolute;margin:0}
.collage__foto img{width:100%;aspect-ratio:531/940;object-fit:cover;box-shadow:0 24px 48px rgba(0,0,0,.12)}
.collage__foto figcaption{position:absolute;left:0;bottom:0;padding:7px 12px;background:#FFFFFF;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--inchiostro)}
.collage__foto--a{left:0;top:22%;width:48%}
.collage__foto--b{right:0;top:0;width:43%}
.collage__quadrato{position:absolute;left:5%;top:1%;width:11%;aspect-ratio:1/1;background:var(--blu)}
/* leggero movimento delle foto col mouse, solo su desktop */
@media (hover:hover) and (pointer:fine){
  .collage__foto{transition:transform .9s var(--curva)}
  .collage__foto--a{transform:translate(var(--px-a,0),var(--py-a,0))}
  .collage__foto--b{transform:translate(var(--px-b,0),var(--py-b,0))}
}

/* ---------- Fascia scorrevole ---------- */
.fascia{background:var(--accento);color:#FFFFFF;overflow:hidden;white-space:nowrap}
.fascia__binario{display:flex;width:max-content;animation:otbFascia 38s linear infinite}
.fascia:hover .fascia__binario{animation-play-state:paused}
.fascia__lista{display:flex;align-items:center;padding:20px 0}
.fascia__lista li{display:inline-flex;align-items:center;gap:28px;padding-right:28px;font-size:15px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.fascia__lista li::after{content:"";width:7px;height:7px;background:#FFFFFF}
@keyframes otbFascia{to{transform:translateX(-50%)}}

/* ---------- Servizi ---------- */
.servizi{background:var(--scuro);color:#FFFFFF}
.servizi > .contenitore{padding-block:clamp(64px,7vw,110px)}
.servizi__testa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:40px 64px}
.servizi__intro{flex:1 1 460px;max-width:640px}
.servizi__intro .testo-intro{margin-top:24px;max-width:520px;color:#CFCFCF}
.servizi__illustrazione{flex:0 1 460px;min-width:260px}
.servizi__illustrazione svg{display:block;width:100%;max-width:460px;margin-left:auto;overflow:visible}
.servizi__griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:1px;margin-top:clamp(40px,5vw,64px);background:#333333;border:1px solid #333333}
.servizio{background:var(--scuro);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;gap:18px;transition:background .35s}
.servizio:hover{background:#1B1B1B}
.servizio__testa{display:flex;align-items:center;justify-content:space-between}
.servizio__icona{width:58px;height:58px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--accento);transition:background .35s}
.servizio:hover .servizio__icona{background:rgba(228,66,0,.12)}
.servizio__numero{font-family:var(--font-titoli);font-size:64px;line-height:1;color:#4A4A4A}
.servizio__area{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#9FCBEF}
.servizio h3{font-size:clamp(26px,2.3vw,32px);line-height:1.2;font-weight:500}
.servizio p:not([class]){font-size:17px;line-height:1.65;font-weight:300;color:#CFCFCF}
.servizio__voci{margin-top:6px;padding-top:18px;border-top:1px solid #333333;font-size:14px;line-height:1.7;color:#E6E6E6}

/* ---------- Lavori ---------- */
.lavori > .contenitore{padding-block:clamp(64px,7vw,110px)}
.testa-sezione{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 64px}
.testa-sezione .testo-intro{flex:0 1 420px;margin-bottom:12px}
.lavori__griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,220px),1fr));gap:clamp(28px,2.4vw,36px) clamp(14px,1.8vw,24px);margin-top:clamp(40px,5vw,56px)}
.lavoro picture{overflow:hidden;background:var(--sfondo-2)}
.lavoro img{width:100%;aspect-ratio:4/6;object-fit:cover;object-position:top center;transition:transform 1.2s var(--curva)}
.lavoro:hover img{transform:scale(1.04)}
.lavoro h3{margin-top:14px;font-size:18px;font-weight:500;line-height:1.3}
.lavoro p{margin-top:4px;font-size:14px;line-height:1.5;color:var(--grigio-blu)}
.lavori__prossimo a{display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:300px;padding:24px;background:var(--accento);color:#FFFFFF;text-decoration:none;transition:background .3s}
.lavori__prossimo a:hover{background:var(--accento-scuro);color:#FFFFFF}
.lavori__prossimo-titolo{font-family:var(--font-titoli);font-size:clamp(46px,5vw,76px);line-height:.95;text-transform:uppercase}
.lavori__prossimo-cta{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500}
.lavori__prossimo a:hover .ico--freccia{transform:translateX(4px)}
.lavori__prossimo .ico--freccia{transition:transform .3s var(--curva)}
@media (max-width:700px){.lavori__prossimo{grid-column:1/-1}}

/* ---------- Metodo ---------- */
.metodo{background:var(--sfondo-2)}
.metodo__griglia{display:flex;flex-wrap:wrap;gap:32px clamp(40px,6vw,96px);padding-block:clamp(64px,7vw,110px)}
.metodo__intro{flex:1 1 320px;max-width:420px}
.metodo__intro .testo-intro{margin-top:24px}
.passi{flex:2 1 560px;align-self:flex-start;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--linea-2);border:1px solid var(--linea-2)}
.passo{background:#FFFFFF;padding:30px 28px 34px;display:flex;flex-direction:column;gap:14px}
.passo__testa{display:flex;align-items:center;justify-content:space-between}
.passo__numero{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;background:var(--blu);color:#FFFFFF;font-size:15px;font-weight:700}
.passo h3{margin-top:6px;font-size:22px;line-height:1.25;font-weight:500}
.passo p{font-size:16px;line-height:1.65;font-weight:300;color:var(--testo-2)}

/* ---------- Recensioni ---------- */
.recensioni{background:var(--blu);color:#FFFFFF}
.recensioni__griglia{display:flex;flex-wrap:wrap;gap:40px clamp(40px,6vw,96px);padding-block:clamp(64px,7vw,110px)}
.recensioni__intro{flex:1 1 300px;max-width:380px}
.recensioni__intro .bottone{margin-top:30px;min-height:52px;padding:0 24px;font-size:15px}
.recensioni__elenco{flex:2 1 560px;display:flex;flex-direction:column;gap:40px}
.recensione{padding-left:clamp(20px,3vw,40px);border-left:1px solid rgba(255,255,255,.4)}
.recensione blockquote{margin:0;font-size:clamp(21px,1.9vw,26px);line-height:1.5;font-weight:300}
.recensione figcaption{margin-top:18px;font-size:14px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}

/* ---------- Libri ---------- */
.libri{border-bottom:1px solid var(--linea)}
.libri__griglia{display:flex;flex-wrap:wrap;align-items:center;gap:40px clamp(40px,6vw,96px);padding-block:clamp(64px,7vw,110px)}
.libri__intro{flex:1 1 320px;max-width:420px}
.libri__intro .testo-intro{margin-top:24px}
.libri__intro .bottone{margin-top:28px;min-height:52px;padding:0 24px;font-size:15px}
.libri__elenco{flex:2 1 560px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(46%,170px),1fr));gap:18px}
.libri__elenco li{display:flex;flex-direction:column;gap:10px}
.libri__elenco img{width:100%;aspect-ratio:1/1;object-fit:contain;transition:transform .8s var(--curva)}
.libri__elenco li:hover img{transform:translateY(-6px) rotate(-1.5deg)}
.libri__elenco span{font-size:16px;font-weight:500;line-height:1.35;text-align:center}

/* ---------- Contatti e modulo ---------- */
.contatti{background:var(--sfondo-2)}
.contatti__griglia{display:flex;flex-wrap:wrap;gap:clamp(40px,5vw,80px);padding-block:clamp(64px,7vw,110px)}
.contatti__info{flex:1 1 400px;min-width:0}
.titolo-sezione--contatti{font-size:clamp(96px,11vw,168px);line-height:.88}
.contatti__info .testo-intro{margin-top:24px;max-width:480px}
.recapiti{margin-top:36px;border-top:1px solid var(--linea-2)}
.recapiti li{display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--linea-2);font-size:18px}
.recapiti a{text-decoration:none}
.recapiti__etichetta{display:block;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grigio-blu)}
.recapiti__doppio{display:flex;flex-wrap:wrap;gap:6px 20px}
.recapiti__wa{color:var(--accento-scuro)}
.contatti__illustrazione{display:block;width:100%;max-width:360px;margin-top:40px;overflow:visible}

.modulo{flex:1 1 520px;min-width:0;background:#FFFFFF;padding:clamp(28px,3.4vw,48px);border-top:6px solid var(--accento);display:flex;flex-direction:column;gap:22px;align-self:flex-start}
.modulo__campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.campo{display:flex;flex-direction:column;gap:8px}
.campo label,.scelte legend{font-size:14px;font-weight:500}
.facoltativo{font-weight:400;color:var(--grigio-blu)}
.campo input,.campo textarea{width:100%;min-height:50px;padding:0 14px;border:1px solid #BDBBB6;border-radius:0;background:#FFFFFF;font:inherit;font-size:16px;color:var(--inchiostro);transition:border-color .2s,box-shadow .2s}
.campo textarea{padding:14px;line-height:1.5;resize:vertical;min-height:140px}
.campo input:focus,.campo textarea:focus{outline:none;border-color:var(--blu);box-shadow:0 0 0 3px rgba(0,108,183,.18)}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:#B3261E}
.campo__errore{font-size:13px;color:#B3261E}
.scelte{margin:0;padding:0;border:0;min-width:0}
.scelte__elenco{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.scelta{position:relative;cursor:pointer}
.scelta input{position:absolute;opacity:0;width:1px;height:1px}
.scelta span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:1.5px solid #BDBBB6;background:#FFFFFF;font-size:15px;transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.scelta:hover span{border-color:var(--inchiostro)}
.scelta input:checked + span{background:var(--inchiostro);border-color:var(--inchiostro);color:#FFFFFF;box-shadow:inset 0 -4px 0 var(--accento)}
.scelta input:focus-visible + span{outline:2px solid var(--blu);outline-offset:2px}
.trappola{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.consenso{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--testo-2);cursor:pointer}
.consenso input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--blu);flex:0 0 auto}
.modulo__esito{padding:14px 16px;font-size:15px;line-height:1.5}
.modulo__esito.ok{background:#E8F3EC;border-left:4px solid #1E7B43;color:#14532D}
.modulo__esito.errore{background:#FBEAEA;border-left:4px solid #B3261E;color:#7A1C17}
.modulo__recaptcha{font-size:12px;line-height:1.5;color:var(--grigio-blu)}
.modulo__recaptcha a{color:var(--grigio-blu)}
.grecaptcha-badge{visibility:hidden!important}
.modulo.inviato .modulo__campi,.modulo.inviato .scelte,.modulo.inviato .campo,.modulo.inviato .consenso,.modulo.inviato [data-invia]{display:none}