/* ══════════════════════════════════════════════════════════════════
   Contacts page only (contacts.html). Loaded after css/style.css: rules keep
   the order they have in the design, so the cascade is the same.
   ══════════════════════════════════════════════════════════════════ */

.center{text-align:center}

/* ---------- Contact details and directions ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s24);align-items:stretch}
.contact-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(184,151,90,.5);display:flex;flex-direction:column;height:100%}
.contact-list li{flex:1 1 auto;display:grid;align-content:center;grid-template-columns:132px minmax(0,1fr);gap:var(--s5);padding:var(--s6) 0;border-bottom:1px solid rgba(184,151,90,.5);align-items:baseline}
.contact-list .t-label{color:var(--grigio)}
.contact-list a,.contact-list strong{font:300 clamp(20px,1.8vw,26px)/1.3 var(--serif);word-break:break-word}
.directions{background:var(--nero);color:var(--bianco);padding:var(--s16) var(--s12);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s10)}
.directions address{font:300 clamp(26px,2.4vw,36px)/1.25 var(--serif);font-style:normal}
.directions ol{list-style:none;margin:0;padding:0;border-top:1px solid rgba(184,151,90,.4)}
.directions li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s3);padding:var(--s4) 0;border-bottom:1px solid rgba(184,151,90,.4);font-size:15px;color:#CFC9BE}
.directions li span{font:italic 300 22px/1.2 var(--serif);color:var(--oro-chiaro)}

/* ---------- Appointment form ---------- */
.form-wrap{max-width:1040px;margin:var(--s20) auto 0;background:var(--bianco);padding:var(--s16)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8) var(--s10)}
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field--full{grid-column:1/-1}
.req{color:var(--oro-testo);font-weight:400;letter-spacing:.08em;text-transform:none}
.field input{height:58px}
.field label{font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--nero)}
.field input,.field textarea{border:1px solid rgba(11,11,11,.22);border-radius:0;background:var(--bianco);padding:var(--s4);font:300 17px/1.4 var(--sans);color:var(--nero);transition:border-color .6s;-webkit-appearance:none;appearance:none;width:100%}
.field input::placeholder,.field textarea::placeholder{color:#8f8a82}
.field textarea{min-height:140px;max-height:500px;resize:vertical;overflow-y:auto}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--oro)}
.check{grid-column:1/-1;display:flex;gap:var(--s4);align-items:flex-start;font-size:14px;color:var(--grigio)}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:var(--s1) 0 0;border:1px solid var(--nero);background:transparent;cursor:pointer;transition:background-color .4s,border-color .4s}
.check input:checked{background:var(--oro);border-color:var(--oro);box-shadow:inset 0 0 0 4px var(--bianco)}
.form__actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.form__note{font-size:14px;color:var(--grigio);margin:0}
.form__legal{grid-column:1/-1;margin:0;font-size:13px;line-height:1.5;color:var(--grigio)}
.form__legal a,.check a{color:var(--nero);border-bottom:1px solid var(--oro)}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .contact-grid{grid-template-columns:1fr;gap:var(--s12)}
}
@media (max-width:760px){
  .form-wrap{padding:var(--s8) var(--s5)}
  .form{grid-template-columns:1fr}
  .directions{padding:var(--s10) var(--s6)}
  .contact-list li{grid-template-columns:1fr;gap:var(--s1)}
}

/* ---------- Former inline styles (last, so they win as the inline styles did) ---------- */
.contact-list__note{font-size:.8em}
.directions__head{display:flex;flex-direction:column;gap:var(--s5)}
.appointment__head{display:flex;flex-direction:column;align-items:center;gap:var(--s6)}
.appointment__text{max-width:520px;margin:0}