/* Shuttrplace contact form – extends the approved website design. */
.contact-body { min-height: 100vh; }
.contact-body .site-header { background: color-mix(in srgb, var(--depth-2) 88%, transparent); border-color: var(--border); backdrop-filter: blur(18px); }
.contact-main { padding: 148px 0 110px; }
.contact-hero { position: relative; padding: 54px 0 48px; border-bottom: 1px solid var(--border); overflow: hidden; }
.contact-hero::before { content: ""; position: absolute; width: 420px; height: 420px; right: 2%; top: -150px; border: 1px solid rgba(184,115,74,.14); border-radius: 50%; box-shadow: inset 0 0 100px rgba(80,107,87,.1); pointer-events: none; }
.contact-hero h1 { max-width: 920px; margin-bottom: 18px; font: 400 clamp(3.1rem,7vw,6rem)/.98 var(--serif); letter-spacing: -.045em; }
.contact-hero .lead { max-width: 760px; color: var(--sand); font-size: 1.08rem; }
.contact-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 30px; align-items: start; padding-top: 58px; }
.contact-panel { padding: clamp(28px,4vw,48px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(145deg,var(--surface),rgba(80,107,87,.045)); box-shadow: var(--shadow); }
.contact-panel h2 { margin: 0 0 12px; font: 400 clamp(2rem,3.5vw,3.2rem)/1.08 var(--serif); letter-spacing: -.03em; }
.contact-panel-intro { color: var(--sand); max-width: 700px; }
.contact-form { display: grid; gap: 22px; margin-top: 34px; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.form-field { display: grid; gap: 8px; }
.form-field label, .form-legend { color: var(--paper); font-weight: 700; font-size: .87rem; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; color: var(--paper); background: color-mix(in srgb,var(--surface-strong) 74%,transparent); font: inherit; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.form-field textarea { min-height: 190px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: rgba(208,138,95,.75); box-shadow: 0 0 0 4px rgba(184,115,74,.12); }
.form-field [aria-invalid="true"] { border-color: #d47a70; box-shadow: 0 0 0 4px rgba(212,122,112,.12); }
.field-hint { color: var(--taupe); font-size: .74rem; }
.field-error { min-height: 1.15em; color: #df9389; font-size: .75rem; }
.contact-consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; color: var(--sand); font-size: .84rem; }
.contact-consent input { width: 19px; height: 19px; margin-top: 3px; accent-color: var(--copper); }
.contact-consent a { color: var(--copper-bright); }
.contact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.contact-actions .button { border: 0; cursor: pointer; }
.contact-actions .button:disabled { opacity: .52; cursor: wait; transform: none; }
.contact-status { flex: 1 1 280px; min-height: 48px; margin: 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; color: var(--sand); background: rgba(255,255,255,.018); font-size: .82rem; }
.contact-status.is-success { border-color: rgba(80,107,87,.62); color: var(--paper); background: rgba(80,107,87,.14); }
.contact-status.is-error { border-color: rgba(212,122,112,.5); color: #efb0a7; background: rgba(130,51,43,.1); }
.contact-status.is-loading { color: var(--copper-bright); }
.contact-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-aside { display: grid; gap: 18px; }
.contact-info-card { padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: 0 22px 65px rgba(0,0,0,.16); }
.contact-info-card h2, .contact-info-card h3 { margin: 0 0 12px; font: 400 1.65rem/1.14 var(--serif); }
.contact-info-card p, .contact-info-card li { color: var(--sand); }
.contact-info-card ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.contact-info-card li::before { content: ""; display: inline-block; width: 18px; height: 1px; margin-right: 10px; background: var(--copper); vertical-align: middle; }
.contact-symbol { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 24px; border: 1px solid rgba(184,115,74,.32); border-radius: 17px; color: var(--copper-bright); background: rgba(184,115,74,.07); font-size: 1.35rem; }
.contact-privacy-note { border-left: 3px solid var(--forest); }
.contact-back { display: inline-flex; gap: 14px; align-items: center; margin-top: 24px; color: var(--copper-bright); text-decoration: none; font-weight: 700; }
.noscript-note { margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(212,122,112,.45); border-radius: 14px; color: #efb0a7; background: rgba(130,51,43,.1); }
@media (max-width: 920px) { .contact-layout { grid-template-columns: 1fr; } .contact-aside { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px) { .contact-main { padding-top: 112px; } .contact-hero { padding-top: 34px; } .form-row, .contact-aside { grid-template-columns: 1fr; } .contact-panel { padding: 28px 21px; } .contact-actions { align-items: stretch; } .contact-actions .button { width: 100%; } }