/* contact.css — la chiusura (17/09): il punto ambra del marchio sta nell'angolo in basso a destra della schermata prodotti; scorrendo si
   allarga fino a prendere lo schermo e svela il form su fondo ambra. Stessa meccanica del prototipo con l'iPad 3D
   (Landing_Apotelic/prototipi/hero-manifesto.html, «LA CHIUSURA: dentro il punto»): un ritaglio circolare con lo stesso centro e lo stesso
   raggio del punto, così il passaggio è senza cuciture; il contenuto entra dopo, salendo di un soffio. Qui la pagina resta un documento
   normale: la sezione contatti ha un palco sticky che si sovrappone alla coda del palco prodotti (come la cupola sulla scena AI), e
   contact.js scrive --ct-r/--ct-cx/--ct-cy (il ritaglio), --ct-on/--ct-rise (il contenuto) e --ct-shift (la stanza che scorre se è più alta
   dello schermo). Senza JS, con movimento ridotto e sui telefoni la sezione è un blocco ambra nel flusso, senza punto né ritaglio
   (decisione del 04/09: sul telefono il contenuto sta nel flusso, gli strati fissi no). */
:root{--ct-run:100svh}   /* la corsa dell'allargamento: una schermata, come nel prototipo */
.contact-section{position:relative;z-index:3;display:block;padding:0;border-top:0;background:var(--accent);color:var(--paper);scroll-margin-top:0}
.ct-stage{position:relative;overflow:clip;background:var(--accent)}
.ct-inner{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:6vw;align-items:center;padding:104px var(--gutter) 48px}   /* struttura F (Fiasco, scelta il 19/09): a sinistra le persone e i fatti, a destra il form in una scheda */
.contact-section.is-live .ct-inner{min-height:100svh;align-content:center;box-sizing:border-box}   /* la stanza aperta è centrata in verticale, come la chiusura del prototipo */
/* la sequenza: comincia esattamente alla fermata finale dei prodotti (risale la coda del palco prodotti più la sua schermata) */
.contact-section.is-live{margin-top:calc(-100svh - var(--ct-run));height:calc(100svh + var(--ct-run) + var(--ct-extra,0px));background:transparent;pointer-events:none}
.contact-section.is-live .ct-stage{position:sticky;top:0;height:100svh;clip-path:circle(var(--ct-r,0px) at var(--ct-cx,100%) var(--ct-cy,100%))}   /* a riposo il raggio è zero (contact.js): invisibile ma raggiungibile con la tastiera */
.contact-section.is-live.is-open{pointer-events:auto}   /* finché il punto non ha preso lo schermo i clic passano ai prodotti sotto */
.contact-section.is-live .ct-inner{opacity:var(--ct-on,0);transform:translateY(calc(var(--ct-rise,26px) - var(--ct-shift,0px)));will-change:opacity,transform}
.ct-anchor{position:absolute;left:0;width:1px;height:1px;pointer-events:none}   /* #contatto in sequenza: l'ancora atterra a stanza aperta, non sul punto */
/* il form rivestito per l'ambra, con le regole di colore del prototipo: la scrittura passa alla carta piena (5,5:1 sull'ambra; l'inchiostro
   farebbe 3,1:1), la punteggiatura e gli accenti passano all'inchiostro, gli stati si leggono con anelli e riempimenti color carta */
.contact-section .brand-dot{color:var(--ink)}
.contact-section .chapter,.contact-section .field label span,.contact-section .form-bottom p{color:var(--paper)}
.contact-section .field input,.contact-section .field textarea{color:var(--paper);border-bottom-color:#f6f6f48c;caret-color:var(--paper)}
.contact-section .field input:focus,.contact-section .field textarea:focus{border-bottom-color:var(--paper)}
.contact-section .field textarea::placeholder{color:#f6f6f4c7}
.contact-section .field-error{color:var(--paper);font-weight:700}
.contact-section [aria-invalid=true]{border-color:var(--ink)!important}
.contact-section .interest span{border-color:#f6f6f48c}
.contact-section .interest input:checked+span{border-color:var(--paper);background:var(--paper);color:var(--ink)}
.contact-section .interest input:focus-visible+span{outline-color:var(--paper)}
.contact-section a:focus-visible,.contact-section button:focus-visible,.contact-section input:focus-visible,.contact-section textarea:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.contact-section .form-result{background:var(--paper);color:var(--ink)}
.contact-section input:-webkit-autofill,.contact-section textarea:-webkit-autofill{-webkit-text-fill-color:var(--paper);transition:background-color 9999s}
@media(hover:hover){.contact-section .submit-button:hover{background:#000}.contact-section .interest label:hover span{border-color:var(--paper)}}
/* la colonna delle persone e dei fatti */
.ct-left h2{font:400 clamp(44px,4.6vw,78px)/1 Arial,sans-serif;letter-spacing:-.06em;margin:22px 0 0}
.ct-label{margin:0;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--paper)}
.ct-facts{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;margin:44px 0 0}   /* senza il blocco delle persone (tolto il 21/09) i fatti stanno subito sotto il titolo */
.ct-facts dd{margin:9px 0 0;font-size:16px;line-height:1.45;letter-spacing:-.01em;max-width:24ch}
.ct-facts a{display:inline-flex;gap:10px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#f6f6f48c}
.ct-facts a:hover{text-decoration-color:var(--ink)}
.ct-facts .contact-email{display:inline-flex;width:auto;min-height:0;margin-top:0;gap:10px;font-size:16px}   /* il link email di home.css porta margini e altezza suoi: qui sta sotto la sua etichetta come gli altri */
/* la scheda del form: inchiostro sull'ambra, come la pillola «Parliamo» dell'header; campi pieni e morbidi come quelli di Fiasco */
.contact-section .ct-card{width:100%;padding:38px 40px 34px;border-radius:22px;background:var(--ink);color:var(--paper)}
.ct-card-title{margin:0 0 28px;max-width:30ch;font:500 clamp(21px,1.75vw,28px)/1.18 Satoshi,Arial,sans-serif;letter-spacing:-.03em}
.contact-section .ct-card .form-row{gap:14px}
.contact-section .ct-card .field{position:relative;margin-bottom:26px}   /* lo spazio per la riga d'errore, che sta sotto il campo senza pesare sull'altezza */
.contact-section .ct-card .field-error{position:absolute;left:0;right:0;top:100%;margin-top:5px;color:#f19a6e;font-weight:500}
.contact-section .ct-card .field label{font-size:12.5px;margin-bottom:7px;color:#f6f6f4c7}
.contact-section .ct-card .field label span{color:#f6f6f499}
.contact-section .ct-card .field input,.contact-section .ct-card .field textarea{min-height:46px;padding:11px 16px;border:1px solid #f6f6f41f;border-radius:12px;background:#f6f6f40d;color:var(--paper);font-size:16px}
.contact-section .ct-card .field textarea{min-height:92px}
.contact-section .ct-card .field input:focus,.contact-section .ct-card .field textarea:focus{border-color:#f6f6f499;background:#f6f6f414}
.contact-section .ct-card .field textarea::placeholder{color:#f6f6f480}
.contact-section .ct-card [aria-invalid=true]{border-color:#e0703a!important}
.contact-section .ct-card .interest{margin:2px 0 18px;gap:8px}
.contact-section .ct-card .interest legend{font-size:12.5px;margin-bottom:10px;color:#f6f6f4c7}
.contact-section .ct-card .interest span{min-height:38px;padding:0 15px;border-color:#f6f6f433;font-size:13px}
.contact-section .ct-card .interest input:checked+span{border-color:var(--paper);background:var(--paper);color:var(--ink)}
.contact-section .ct-card .form-bottom p{color:#f6f6f4a6}
.contact-section .ct-card .submit-button{background:var(--accent);color:var(--paper)}
@media(hover:hover){.contact-section .ct-card .submit-button:hover{background:#bf4d12}.contact-section .ct-card .interest label:hover span{border-color:#f6f6f499}}
.contact-section .ct-card .form-result{background:#f6f6f414;color:var(--paper)}
@media(max-width:760px){.ct-inner{display:block;padding:76px var(--gutter) 65px}.contact-section .ct-card{margin-top:44px;padding:28px 22px 26px}.ct-facts{grid-template-columns:1fr}}
.contact-section .field textarea{resize:none;height:124px;overflow-y:auto}   /* 23/09: misura fissa, senza la maniglia nell'angolo; oltre il limite il testo scorre dentro, come in una chat */

/* [24/09/2026] Il riquadro dell esito riceve il fuoco da programma (chi usa un lettore di schermo sente il «grazie»): non si preme, quindi niente anello. */
#form-result:focus{outline:none}