.contact-page { margin: 0; background: #faf6ef; color: #223d3e; }
.contact-page * { box-sizing: border-box; }
.contact-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: calc(14px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) 14px max(20px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid #e2d8ca; background: #fffdf8; }
.contact-brand { display: flex; align-items: center; gap: 10px; color: #bc5227; font-weight: 850; font-size: 1.15rem; text-decoration: none; }
.contact-brand img { object-fit: contain; }
.contact-header .header-tools { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-back { display: inline-flex; align-items: center; min-height: 44px; color: #223d3e; font-weight: 750; }
.contact-main { width: min(1120px, 100% - 40px); margin: 0 auto; padding: 60px 0; }
.contact-hero { max-width: 750px; margin-bottom: 48px; }
.contact-eyebrow { color: #bc5227; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 850; }
.contact-hero h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); line-height: 1.04; letter-spacing: -.045em; margin: 12px 0 20px; }
.contact-hero > p:last-child { font-size: 1.2rem; max-width: 620px; line-height: 1.65; color: #536762; }
.contact-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.contact-intro, .contact-form-card { min-width: 0; }
.contact-mission h2, .contact-form-card h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -.035em; margin: 10px 0 20px; }
.contact-mission p { line-height: 1.75; }
.contact-page a { text-underline-offset: 4px; }
.contact-mission a, .contact-note a { color: #006d71; font-weight: 650; }
.contact-method { display: grid; gap: 6px; text-decoration: none; color: #223d3e; padding: 22px; margin-top: 20px; border: 1px solid #d5dfd6; border-radius: 18px; background: #eef3eb; overflow-wrap: anywhere; }
.contact-method strong { font-size: clamp(1.15rem, 3vw, 1.5rem); }
.contact-method small, .contact-note { color: #536762; font-size: .88rem; line-height: 1.6; }
.contact-form-card { padding: clamp(22px, 3vw, 36px); background: #fff; border: 1px solid #e2d8ca; border-radius: 24px; box-shadow: 0 14px 44px #243d3e08; }
.contact-form-card form { margin-top: 26px; }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-wide { grid-column: 1 / -1; }
.contact-field { display: grid; gap: 9px; }
.contact-form-grid label { display: grid; gap: 9px; font-weight: 750; min-width: 0; }
.contact-form-grid input, .contact-form-grid select, .contact-form-grid textarea { min-width: 0; width: 100%; padding: 13px; border: 1px solid #b8c7c0; border-radius: 10px; background: #fbfcf9; color: #223d3e; font: inherit; font-size: 16px; }
.contact-form-grid textarea { resize: vertical; }
.contact-submit { display: inline-flex; justify-content: center; padding: 14px 24px; min-height: 48px; border: 0; border-radius: 99px; color: #fff; background: #086d70; font: inherit; font-weight: 800; cursor: pointer; }
.contact-submit:disabled { opacity: .6; cursor: wait; }
.contact-status { margin-bottom: 0; overflow-wrap: anywhere; }
.contact-status:empty { display: none; }
.contact-status[data-state="success"] { color: #17613b; }
.contact-status[data-state="error"] { color: #a5351a; }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-rights { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #e2d8ca; }
.contact-footer { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 28px max(20px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); border-top: 1px solid #e2d8ca; font-size: .88rem; }
.contact-footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.contact-footer a { color: #223d3e; min-height: 44px; display: inline-flex; align-items: center; }
.contact-page :focus-visible { outline: 3px solid #dc8141; outline-offset: 4px; }
@media (max-width: 760px) { .contact-main { padding: 32px 0; } .contact-layout { grid-template-columns: 1fr; gap: 24px; } .contact-hero { margin-bottom: 28px; } .contact-form-grid { grid-template-columns: 1fr; } .contact-form-card { border-radius: 18px; } .contact-brand { font-size: 1rem; gap: 6px; } }