/* Ctrl Studio, pagina Contatti: sezione modulo nello stile nuovo (carta, filetti, mono, righe).
   Lavora sulle classi Webflow esistenti dentro main#form, senza toccare il form nativo: l'invio resta a Webflow.
   Gli extra (occhiello, passaggi, scelte rapide, copia email) li aggiunge contatti.js. */
main#form {
  --ct-paper: #f4f4f4;
  --ct-ink: #121212;
  --ct-text: #212121;
  --ct-muted: #5f5f66;
  --ct-rule: #d4d4db;
  --ct-blue: #2e50ff;
  --ct-white: #ffffff;
  --ct-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ct-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ct-ease: cubic-bezier(.165, .84, .44, 1);
  --ct-lines: repeating-linear-gradient(180deg, rgba(18, 18, 18, .09) 0 1px, transparent 1px 5px);
  background: var(--ct-paper);
  color: var(--ct-text);
  font-family: var(--ct-sans);
}
main#form *, main#form *::before, main#form *::after { box-sizing: border-box; }
main#form :focus-visible { outline: 2px solid var(--ct-blue); outline-offset: 3px; }
main#form .page-wrapper-2 { background: var(--ct-paper); border-top: 1px solid var(--ct-ink); }

/* ---------- colonna sinistra ---------- */
main#form .information_section { background: transparent; padding: clamp(2.6rem, 5vw, 4.5rem) clamp(16px, 4vw, 56px); gap: 2.4rem; }
main#form .information_content { display: flex; flex-direction: column; gap: 1.6rem; max-width: 40rem; }
main#form .information_section .display-1 { width: auto; max-width: 13em; margin: 0; padding: 0; font: 600 clamp(2.2rem, 3.6vw, 3.7rem)/1 var(--ct-sans); letter-spacing: -.048em; color: var(--ct-ink); text-wrap: balance; }
main#form .information_section .display-1 .text-span-53 { color: var(--ct-blue); }
main#form .information_content.hide-tablet > p { display: none; }
main#form .divider-2 { display: none; }
main#form .information_footer-links a { font: 500 .72rem/1 var(--ct-mono); text-transform: uppercase; letter-spacing: .07em; color: var(--ct-muted); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .15rem; }
main#form .information_footer-links a:hover { color: var(--ct-ink); }
main#form .information_section.is--footer { display: none; }

.ct-eyebrow { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding-top: .9rem; border-top: 1px solid var(--ct-ink, #121212); font: 500 .75rem/1 var(--ct-mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ct-muted); }
.ct-eyebrow b { font-weight: 500; color: var(--ct-ink); }
/* il sito mette display:flex sulle liste: qui serve una colonna piena */
.ct-steps { display: grid; grid-template-columns: minmax(0, 1fr); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ct-ink); }
.ct-steps li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: baseline; margin: 0; padding: 1rem 0; border-bottom: 1px solid var(--ct-rule); }
.ct-steps b { font: 500 .72rem/1.3 var(--ct-mono); color: var(--ct-blue); font-variant-numeric: tabular-nums; }
.ct-steps span { font: 400 clamp(1rem, 1.25vw, 1.15rem)/1.4 var(--ct-sans); letter-spacing: -.015em; color: var(--ct-text); }
.ct-mail { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0; font: 400 .85rem/1.3 var(--ct-mono); color: var(--ct-muted); }
.ct-mail a { color: var(--ct-ink); text-decoration: none; text-transform: none; border-bottom: 1px solid currentColor; }
.ct-mail a:hover { color: var(--ct-blue); }
.ct-copy { appearance: none; cursor: pointer; margin: 0; padding: .3rem .55rem .32rem; border: 1px solid #c4c4cc; border-bottom-width: 2px; border-radius: .3rem; background: var(--ct-white); color: var(--ct-text); font: 500 .66rem/1 var(--ct-mono); text-transform: uppercase; letter-spacing: .06em; }
.ct-copy:hover { border-color: var(--ct-ink); }

/* ---------- colonna destra: il foglio del modulo ---------- */
main#form .form_section { background: transparent; padding: clamp(2.6rem, 5vw, 4.5rem) clamp(16px, 4vw, 56px); }
main#form .form_block { position: relative; width: min(100%, 34rem); margin: 0; padding: 0 clamp(1.2rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.2rem); background: var(--ct-white); border: 1px solid var(--ct-rule); box-shadow: 0 24px 50px -36px rgba(18, 18, 18, .35); }
/* barra in alto, a righe come il filtro delle immagini */
main#form .form_block::before { content: "nuova richiesta"; display: block; margin: 0 calc(-1 * clamp(1.2rem, 3vw, 2.2rem)) clamp(1.4rem, 3vw, 2rem); padding: .8rem clamp(1.2rem, 3vw, 2.2rem); border-bottom: 1px solid var(--ct-rule); background: var(--ct-lines), var(--ct-paper); font: 500 .68rem/1 var(--ct-mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ct-muted); }
main#form .form-3 { counter-reset: ct; }
main#form .form_field-label { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .2rem; font: 500 .7rem/1.3 var(--ct-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ct-muted); }
main#form .form_field-label::before { counter-increment: ct; content: counter(ct, decimal-leading-zero) " /"; color: var(--ct-blue); }
main#form .form_field-label small { font: inherit; text-transform: none; letter-spacing: .02em; opacity: .75; }
main#form .form_text-field { display: block; width: 100%; height: auto; margin: 0 0 1.7rem; padding: .55rem 0 .7rem; border: 0; border-bottom: 1px solid var(--ct-rule); border-radius: 0; background: transparent; box-shadow: none; color: var(--ct-ink); font: 400 1.1rem/1.3 var(--ct-sans); letter-spacing: -.015em; transition: border-color .2s var(--ct-ease), box-shadow .2s var(--ct-ease); -webkit-appearance: none; appearance: none; }
main#form .form_text-field::placeholder { color: #9b9ba4; opacity: 1; }
main#form .form_text-field:hover { border-bottom-color: #a9a9b2; }
main#form .form_text-field:focus { outline: none; border-bottom-color: var(--ct-ink); box-shadow: 0 1px 0 var(--ct-ink); }
main#form .form_text-field.messaggio { height: auto; min-height: 0; }

/* scelte rapide (contatti.js): span, non pulsanti, cosi' Webflow non le spedisce come campi */
.ct-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .45rem 0 1.7rem; }
.ct-chip { display: inline-flex; align-items: center; padding: .5rem .75rem; border: 1px solid var(--ct-rule); border-radius: 100vw; background: var(--ct-white); color: var(--ct-muted); font: 500 .7rem/1 var(--ct-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; user-select: none; transition: background .2s var(--ct-ease), color .2s var(--ct-ease), border-color .2s var(--ct-ease); }
.ct-chip:hover { border-color: var(--ct-ink); color: var(--ct-ink); }
.ct-chip[aria-checked="true"] { background: var(--ct-ink); border-color: var(--ct-ink); color: var(--ct-white); }
.ct-chip:focus-visible { outline: 2px solid var(--ct-blue); outline-offset: 2px; }

/* consenso */
main#form .w-checkbox { display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 1.5rem; padding-left: 0; }
main#form .w-checkbox-input { float: none; flex: none; width: 1rem; height: 1rem; margin: .1rem 0 0; border: 1px solid var(--ct-ink); border-radius: 2px; background: var(--ct-white); -webkit-appearance: none; appearance: none; cursor: pointer; }
main#form .w-checkbox-input:checked { background: var(--ct-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / .75rem no-repeat; }
main#form .checkbox-label { margin: 0; font: 400 .82rem/1.45 var(--ct-sans); text-transform: none; letter-spacing: -.005em; color: var(--ct-muted); }

/* invio: pillola nera a righe, al passaggio diventa blu e le righe scorrono */
@keyframes ct-scan { to { background-position: right 1.4rem center, 0 10px; } }
main#form .button-11 { display: block; width: 100%; height: auto; margin: 0; padding: 1.15rem 3rem 1.15rem 1.45rem; border: 0; border-radius: 100vw; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") right 1.4rem center / .95rem no-repeat, repeating-linear-gradient(180deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 5px) 0 0 / 100% 10px, var(--ct-ink); color: var(--ct-white); font: 500 .82rem/1.2 var(--ct-sans); text-align: left; text-transform: uppercase; letter-spacing: -.0238em; cursor: pointer; transition: letter-spacing .2s var(--ct-ease), background-color .2s var(--ct-ease); -webkit-appearance: none; appearance: none; }
main#form .button-11:hover { letter-spacing: .03em; background-color: var(--ct-blue); animation: ct-scan .6s linear infinite; }
main#form .text-block-95 { margin-top: 1.1rem; padding: 0; font: 400 .8rem/1.6 var(--ct-sans); color: var(--ct-muted); text-transform: none; }
main#form .text-block-95 a { color: var(--ct-ink); text-decoration: none; text-transform: none; border-bottom: 1px solid currentColor; }
main#form .text-block-95 a:hover { color: var(--ct-blue); }
main#form .text-block-95 .text-span-54 { font-weight: 500; }
main#form .form_success-message, main#form .form_error-message { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--ct-rule); border-radius: 0; background: var(--ct-paper); font: 400 .85rem/1.45 var(--ct-mono); color: var(--ct-ink); }
main#form .form_error-message { border-color: #e2b4b4; background: #fbf1f1; }

@media (max-width: 991px) {
  main#form .information_section { padding-bottom: 1rem; }
  main#form .form_section { padding-top: 1rem; }
}
@media (max-width: 480px) {
  main#form .button-11 { padding: 1.1rem 2.5rem 1.1rem 1.2rem; font-size: .72rem; letter-spacing: -.03em; background-position: right 1.05rem center, 0 0; }
  main#form .button-11:hover { letter-spacing: -.03em; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  main#form .button-11:hover { animation: none; }
  main#form *, .ct-chip { transition: none !important; }
}
/* il site-wide override mobile "body * { font-family: Geist !important }" non deve toccare le parti mono */
@media screen and (max-width: 767px) {
  main#form .form_field-label, main#form .form_field-label *, main#form .form_block::before, .ct-eyebrow, .ct-eyebrow *, .ct-steps b, .ct-mail, .ct-copy, .ct-chip, main#form .information_footer-links a, main#form .form_success-message, main#form .form_error-message { font-family: "Geist Mono", ui-monospace, Menlo, Consolas, monospace !important; }
}