.contact-page { padding-bottom: 70px; }
.contact-section { padding-top: 110px; }
.contact-page h1 { font-size: clamp(32px, 5vw, 48px); letter-spacing: .08em; margin: 12px 0 20px; }
.contact-page h2 { font-size: 24px; margin: 0 0 20px; font-family: 'Noto Serif TC', serif; }
.contact-lead { font-size: 20px; margin-bottom: 40px; }
.contact-grid { display: grid; gap: 36px; align-items: start; }
.contact-details a, .contact-privacy a, .contact-consent a { color: #0d6575; overflow-wrap: anywhere; }
.contact-page .button-cyan { background: #0d6575; color: white; }
.contact-page .button { text-align: center; letter-spacing: 1px; padding: 12px 18px; }
.contact-details p { margin: 0 0 16px; }
.contact-visit-note { margin-top: 36px; padding-top: 28px; border-top: 1px solid #b8c4bf; }
.contact-form-panel { position: relative; padding: 24px; border: 1px solid #b8c4bf; background: rgba(255,255,255,.25); border-radius: 4px; min-width: 0; }
.contact-form-panel > p { margin-bottom: 24px; }
.contact-fields { display: grid; gap: 20px; margin-bottom: 20px; }
.contact-form-panel label { display: block; }
.contact-form-panel label > span:not(.contact-consent span) { color: #62615b; }
.contact-form-panel input:not([type=checkbox]), .contact-form-panel select, .contact-form-panel textarea {
    display: block; box-sizing: border-box; width: 100%; margin-top: 8px; padding: 11px 12px;
    font: inherit; color: #302c2b; background: #fffcf7; border: 1px solid #9eaaa3; border-radius: 3px;
}
.contact-form-panel textarea { resize: vertical; min-height: 150px; }
.contact-form-panel :is(input,select,textarea):focus-visible { outline: 2px solid #0d6575; outline-offset: 2px; }
.contact-hint { color: #62615b; font-size: 15px; margin-top: 8px; }
.contact-consent { display: flex !important; align-items: flex-start; gap: 10px; margin: 24px 0; }
.contact-consent input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 6px; accent-color: #0d6575; }
.contact-status { padding: 12px 0; margin: 0 0 12px; }
.contact-status[data-state=error] { color: #8a342e; }
.contact-status[data-state=success] { color: #356047; }
.contact-form-panel button { cursor: pointer; font: inherit; }
.contact-form-panel button:disabled { opacity: .55; cursor: not-allowed; }
.contact-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-privacy { margin-top: 40px; padding: 20px 0; border-block: 1px solid #b8c4bf; scroll-margin-top: 80px; }
.contact-privacy summary { cursor: pointer; color: #0d6575; font-weight: 700; }
.contact-privacy p { margin: 18px 0 0; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: .8fr 1.6fr; } .contact-form-panel { padding: 30px; } }
@media (min-width: 1200px) { .contact-fields { grid-template-columns: 1fr 1fr; } }
/* sent: the form greyed out, the message over it */
#contact-form.sent { opacity: .35; filter: grayscale(1); }
.contact-sent { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.contact-sent[hidden] { display: none; }
.contact-sent > div { max-width: 440px; padding: 32px 28px; text-align: center; background: #f1f1ef url('../images/bg-paper.webp') 0 0 / 480px; border: 1px solid #0d6575; border-radius: 4px; box-shadow: 0 8px 30px rgba(48, 44, 43, .15); }
.contact-sent:focus { outline: none; }
.contact-sent h3 { margin: 0 0 12px; font-family: 'Noto Serif TC', serif; font-size: 26px; color: #0d6575; letter-spacing: .06em; }
.contact-sent p { margin: 0; }
.contact-sent p + p { margin-top: 8px; color: #62615b; }