/* Contact page follows the homepage's compact reading scale. */
.contact-page .contact-page-hero { width: min(100%, 1160px); min-height: auto; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: stretch; padding: 64px var(--page-pad); }
.contact-page .contact-page-intro { padding-top: 0; display: flex; flex-direction: column; }
.contact-page .contact-page-intro h1 { max-width: none; font-size: clamp(32px, 3.3vw, 44px); line-height: 1.3; text-align: left; text-wrap: pretty; text-shadow: none; }
.contact-page .accent-word { text-shadow: none; }
.contact-page .contact-page-intro > p:not(.kicker) { margin-top: 24px; font-size: 15px; line-height: 1.85; }
.contact-page .inquiry-panel { padding: 28px; background: var(--snow); border: 1px solid var(--color-fog); border-radius: 24px; }
.contact-page .inquiry-panel__head { margin-bottom: 24px; padding-bottom: 20px; }
.contact-page .inquiry-panel__head .kicker { display: none; }
.contact-page .inquiry-panel__head h2 { font-size: 24px; line-height: 1.3; }
.contact-page .inquiry-panel__head > p:last-child { font-size: 13px; line-height: 1.6; }
.contact-page .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-page .contact-form > * { grid-column: 1 / -1; min-width: 0; }
.contact-page .contact-form > .field:nth-child(1) { grid-column: 1; }
.contact-page .contact-form > .field:nth-child(2) { grid-column: 2; }
.contact-page .field label { font-size: 13px; margin-bottom: 8px; }
.contact-page .field input, .contact-page .field textarea, .contact-page .field select { padding: 12px 14px; font-size: 16px; border: 1px solid var(--color-fog); border-radius: 12px; background: var(--cream); }
.contact-page .field input { min-height: 48px; }
.contact-page .field textarea { min-height: 150px; height: 150px; line-height: 1.6; }
.contact-page .field input:focus-visible, .contact-page .field textarea:focus-visible { outline: 2px solid var(--harbor); outline-offset: 2px; }
.contact-page .field-error:empty, .contact-page .form-status:empty { display: none; }
.contact-page .consent-field { margin: 0; }
.contact-page .consent-field label { align-items: start; font-size: 12px; line-height: 1.7; }
.contact-page .consent-field input { margin-top: 3px; flex-shrink: 0; }
.contact-page .contact-form > button { min-height: 48px; margin: 0; background: var(--harbor); color: var(--snow); box-shadow: none; }
.contact-page .contact-channels .section-inner { max-width: 1160px; }
.contact-page .contact-channels .section-head { display: block; }
.contact-page .contact-channels .display-title { max-width: none; font-size: clamp(30px, 3.3vw, 44px); line-height: 1.25; text-shadow: none; }
@media (max-width: 760px) {
 .contact-page .contact-page-hero { grid-template-columns: minmax(0, 1fr); padding-block: 36px; gap: 28px; }
 .contact-page .contact-page-intro { padding-top: 0; }
 .contact-page .inquiry-panel { padding: 22px; }
 .contact-page .contact-form { grid-template-columns: minmax(0, 1fr); }
 .contact-page .contact-form > .field:nth-child(2) { grid-column: 1; }
}

.contact-brand-photo { position: relative; overflow: hidden; margin: 28px 0 0; border-radius: 24px; background: var(--moss); }
.contact-brand-photo img { display: block; width: 100%; height: 340px; object-fit: cover; object-position: 50% 55%; }
.contact-brand-photo figcaption { position: absolute; bottom: 14px; left: 14px; padding: 8px 12px; border-radius: 20px; background: var(--cream); color: var(--harbor); font-size: 10px; font-weight: 650; letter-spacing: .12em; }
@media (max-width: 760px) { .contact-brand-photo img { height: 260px; object-position: 50% 57%; } }
/* Two social channels followed by four stores in balanced pairs. */
.contact-page .channel-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.contact-page .channel-card { grid-column: span 3; }
.contact-page .channel-card--instagram, .contact-page .channel-card--youtube { grid-column: span 3; }
.channel-card__wordmark { width: 132px; padding: 12px; background: #fff; }
.channel-card__wordmark img { width: 108px; height: auto; max-height: 32px; object-fit: contain; }
@media (max-width: 760px) {
 .contact-page .channel-cards { grid-template-columns: minmax(0, 1fr); }
 .contact-page .channel-card { grid-column: auto; }
}

.contact-page .contact-brand-photo { flex: 1; min-height: 260px; }
.contact-page .contact-brand-photo img { position: absolute; inset: 0; height: 100%; }
.contact-page .field-error { color: var(--danger); font-size: 13px; }
@media(max-width:760px) { .contact-page .contact-brand-photo { flex: none; height: 260px; } }
