/* Contact-only composition; shared artwork, chrome and viewport rules are reused. */
.contact-page { max-width: 75rem; margin-inline: auto; padding: 2rem; }
.contact-hero__panel { overflow-wrap: anywhere; }
.contact-form { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(2rem, 4vw, 4rem); }
.contact-form__details, .contact-form__message { min-width: 0; }
.contact-field { margin: 0 0 .875rem; min-width: 0; }
.contact-field[hidden] { display: none; }
.contact-field label { display: block; margin-bottom: .25rem; overflow-wrap: anywhere; }
.contact-field input, .contact-field select, .contact-field textarea {
  display: block; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  min-height: 2.75rem; border-radius: 0; padding: .45rem .2rem;
  font: inherit;
}
.contact-field textarea { min-height: 22rem; resize: vertical; padding: 1rem; line-height: 1.5; }
.contact-field__help, .contact-field__errors { font-size: .875rem; line-height: 1.4; overflow-wrap: anywhere; }
.contact-field__help:empty, .contact-field__errors:empty, .contact-errors ul:empty { display: none; }
.contact-field__help span { display: block; }
.contact-field__errors p { margin-block: .25rem; }
.contact-field__counter { box-sizing: content-box; min-height: 1.4em; padding-top: .5rem; font-size: .8125rem; line-height: 1.4; text-align: right; overflow-wrap: anywhere; }
.contact-field--counted.contact-field--quiet-counter:not(:focus-within):not(.contact-field--near-limit) .contact-field__counter { visibility: hidden; }
.contact-brand .contact-field__counter { color: var(--color-cream); }
.contact-field--over-limit .contact-field__counter { font-weight: 600; }
.contact-form__actions { margin-top: 2rem; text-align: center; }
.contact-form__actions button { min-width: min(10rem, 100%); max-width: 100%; overflow-wrap: anywhere; }
.contact-verification { margin-block: 1rem; }
.contact-verification p { font-size: .9375rem; }
/* Turnstile's supported flexible size is 65px high, with a 300px minimum.
   Reserve its height before the async iframe arrives. A very narrow/text-zoomed
   rail scrolls locally instead of stretching the form or clipping verification. */
.contact-verification__widget { width: 100%; min-height: 65px; overflow-x: auto; }
.contact-verification .cf-turnstile { width: 100%; min-width: 300px; min-height: 65px; }
#contact-feedback { display: flow-root; scroll-margin-top: calc(var(--brand-header-initial-height, 0px) + 1rem); }
#contact-feedback:empty { display: none; }
#contact-feedback[data-contact-feedback] { margin-bottom: 1rem; }
.contact-errors:last-child, .contact-notice:last-child { margin-bottom: 0; }
.contact-field input, .contact-field select, .contact-field textarea { scroll-margin-top: calc(var(--brand-header-initial-height, 0px) + 1rem); }
.contact-errors, .contact-notice { padding: 1rem; border: 2px solid currentcolor; margin-bottom: 1.5rem; overflow-wrap: anywhere; }
.contact-errors h2 { font-size: 1.5rem; }
.contact-required-guidance { font-size: .875rem; margin: 0 0 1.5rem; }
.contact-feedback-link { display: inline-block; margin-top: .75rem; }
.contact-brand-main + .brand-footer { margin-top: 0; }
.contact-brand { max-width: none; padding: 0; background: var(--color-forest); color: var(--color-ivory); font: 400 1.125rem/1.5 var(--font-interface); }
.brand-chrome-enabled .contact-hero { align-items: end; overflow: visible; padding: calc(var(--brand-header-initial-height) + 2rem) 0 1.25rem; }
.contact-hero__media { position: absolute; inset: 0; z-index: -1; background: var(--section-base); }
.contact-hero__media picture, .contact-hero__media img { display: block; width: 100%; height: 100%; }
.contact-hero__media img { object-fit: cover; }
.contact-brand .contact-hero__panel { width: min(79%, 67.5rem); margin-inline: auto; padding: 1.5rem clamp(1.5rem, 5vw, 6rem) 2rem; background: var(--color-sage); text-align: center; }
.contact-brand h1 { font: 400 clamp(2.5rem, 4.4vw, 3.75rem)/1.15 var(--font-display); color: inherit; margin: 0; }
.contact-brand .contact-hero__panel p { font-size: clamp(1.125rem, 1.65vw, 1.5rem); margin: 1rem 0 0; }
.contact-brand a { color: inherit; }
.contact-brand .contact-form-section { padding: 1.5rem 0 2rem; width: min(100%, 90rem); margin-inline: auto; container-type: inline-size; }
.contact-brand .contact-frame { --brand-frame-content-inline-gap: clamp(.75rem, 5vw, 5rem); --brand-frame-content-block-gap: 1rem; max-width: 90rem; margin-inline: auto; }
.contact-brand .contact-form-content { align-items: start; }
.contact-brand .contact-field label { font: 400 clamp(1.3rem, 1.7vw, 1.5rem)/1.3 var(--font-display); }
.contact-brand .contact-field input, .contact-brand .contact-field select, .contact-brand .contact-field textarea {
  color: var(--color-sand); background: transparent; border: 0; border-bottom: 1px solid var(--color-sage);
}
.contact-brand .contact-field select option { background: var(--color-forest); color: var(--color-sand); }
.contact-brand .contact-field textarea { border: 1px solid var(--color-sage); margin-top: 1.75rem; }
.contact-brand .contact-field textarea::placeholder { color: var(--color-cream); opacity: 1; }
.contact-brand .contact-field__help { color: var(--color-cream); }
.contact-brand .contact-field__errors { color: var(--color-ivory); font-weight: 600; }
.contact-brand .contact-field [aria-invalid="true"] { border-bottom: 3px solid var(--color-cream); }
.contact-brand .contact-form__actions button { padding-inline: min(var(--space-5), 3vw); color: var(--color-coffee); background: var(--color-sage); font: inherit; }
.contact-brand input:focus-visible, .contact-brand select:focus-visible, .contact-brand textarea:focus-visible,
.contact-brand #contact-feedback:focus-visible { outline: 3px solid var(--color-cream); outline-offset: 4px; }
@media (max-width: 48rem) {
  .contact-page:not(.contact-brand) { padding: 1rem; }
  .contact-form { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .contact-brand .contact-hero__panel { width: calc(100% - 2rem); padding: 1.5rem; }
  .contact-brand .contact-frame { --brand-frame-content-inline-gap: .5rem; }
  .contact-field { margin-bottom: 1.25rem; }
  .contact-field textarea { min-height: 18rem; }
  .contact-brand .contact-field textarea { margin-top: .5rem; }
}
/* Reserve the wrapped over-limit hint on narrow screens, including text zoom.
   Focusing a quiet counter or crossing its limit must not move later fields. */
@media (max-width: 30rem) {
  .contact-field__counter { min-height: 2.8em; }
}

/* Contact height follows questions/errors/textarea resizing, not decoration. */
.contact-brand .contact-form-content { min-height: 0; }
.contact-frame .brand-ornament-frame__edge--left .brand-ornament-frame__pair,
.contact-frame .brand-ornament-frame__edge--right .brand-ornament-frame__pair { display: flex; }
.contact-form--without-message { grid-template-columns: minmax(0, 1fr); }
.contact-brand .contact-field select:has(option[value=""]:checked) { color: var(--color-cream); }
.contact-brand .contact-field input:autofill,
.contact-brand .contact-field textarea:autofill { -webkit-text-fill-color: var(--color-sand); box-shadow: 0 0 0 1000px var(--color-forest) inset; }
