.contact-letter-page { background: #eef0e9; }
.contact-letter-opening { display: grid; grid-template-columns: 112px minmax(370px,.9fr) minmax(0,1.1fr); min-height: 100svh; padding-top: 84px; }
.contact-letter-opening > aside { display: flex; flex-direction: column; justify-content: space-between; padding: 28px 20px; color: var(--cream); background: var(--forest); writing-mode: vertical-rl; transform: rotate(180deg); }
.contact-letter-opening > aside span { font: 400 30px/1 var(--serif); }.contact-letter-opening > aside p { margin: 0; font-size: 9px; line-height: 1.75; letter-spacing: .16em; text-transform: uppercase; }
.contact-letter-opening > article { display: flex; flex-direction: column; justify-content: center; padding: clamp(42px,6vw,96px); background: #f1f2ed; }
.contact-letter-opening h1 { margin: 0; font: 400 clamp(60px,7.8vw,124px)/.82 var(--serif); letter-spacing: -.075em; }.contact-letter-opening h1 em { color: var(--forest-2); font-style: normal; }
.contact-letter-opening > article > p:not(.eyebrow) { max-width: 480px; margin: 34px 0 0; color: #566153; font-size: 15px; line-height: 1.75; }
.contact-letter-sign { display: grid; gap: 9px; margin: 48px 0; padding-top: 19px; border-top: 1px solid var(--line); }.contact-letter-sign span { font: italic 400 29px/1 var(--serif); }.contact-letter-sign small { color: #687265; font-size: 11px; }
.contact-letter-opening > article > a { align-self: flex-start; padding-bottom: 6px; border-bottom: 1px solid currentColor; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.contact-letter-opening > figure { position: relative; min-height: 660px; margin: 0; overflow: hidden; }.contact-letter-opening > figure img { width: 100%; height: 100%; object-fit: cover; }.contact-letter-opening figcaption, .contact-letter-closing figcaption { position: absolute; right: 18px; bottom: 17px; padding: 8px 10px; background: rgba(238,240,233,.92); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.contact-letter-details { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--pistachio); }
.contact-letter-details article { min-height: 250px; padding: 27px; border-right: 1px solid rgba(35,49,35,.24); border-bottom: 1px solid rgba(35,49,35,.24); }.contact-letter-details article > span { color: #5c6858; font-size: 9px; font-weight: 700; letter-spacing: .16em; }.contact-letter-details h2 { margin: 80px 0 13px; font: 400 29px/1 var(--serif); letter-spacing: -.04em; }.contact-letter-details a, .contact-letter-details address { color: #4f5b4d; font-size: 12px; line-height: 1.55; font-style: normal; }.contact-letter-details address + a { display: inline-block; margin-top: 14px; padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.contact-letter-form { display: grid; grid-template-columns: minmax(300px,.7fr) minmax(0,1.3fr); gap: clamp(50px,10vw,170px); padding: clamp(80px,11vw,170px) var(--gutter); color: var(--cream); background: var(--forest); }
.contact-letter-honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.contact-letter-form-status { grid-column: 1 / -1; min-height: 1.3em; margin: 0; color: #c7d0c3; font-size: 12px; }
.contact-letter-form-status[data-state="error"] { color: #f0b4a5; }
.contact-letter-form-status[data-state="success"] { color: #d2e1c9; }
.contact-letter-form .eyebrow { color: #b8c7b0; }.contact-letter-form h2 { margin: 0; color: var(--cream); font: 400 clamp(50px,6vw,94px)/.84 var(--serif); letter-spacing: -.07em; }.contact-letter-form h2 em { color: #c2cfba; font-style: normal; }.contact-letter-form-intro > p:last-child { max-width: 360px; margin: 32px 0 0; color: #c7d0c3; font-size: 14px; line-height: 1.7; }
.contact-letter-form form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; gap: 28px 24px; }.contact-letter-form label { display: grid; gap: 10px; }.contact-letter-form label > span { color: #bcc8b6; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.contact-letter-form input, .contact-letter-form textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(245,242,233,.38); border-radius: 0; padding: 9px 0 13px; outline: 0; color: var(--cream); background: transparent; font: 400 17px/1.4 var(--sans); resize: vertical; }.contact-letter-form input:focus, .contact-letter-form textarea:focus { border-color: var(--cream); }.contact-letter-form-wide { grid-column: 1 / -1; }.contact-letter-form .contact-letter-consent { grid-column: 1; display: flex; grid-template: none; align-items: center; gap: 10px; }.contact-letter-consent input { width: 16px; height: 16px; margin: 0; accent-color: var(--pistachio); }.contact-letter-consent span { letter-spacing: 0 !important; text-transform: none !important; }.contact-letter-form button { justify-self: end; border: 1px solid rgba(245,242,233,.45); padding: 15px 20px; color: var(--cream); background: transparent; font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; }.contact-letter-form button:hover { color: var(--forest); background: var(--cream); }
.contact-letter-closing { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(330px,.8fr); min-height: 560px; background: #d9e0d4; }.contact-letter-closing figure { position: relative; min-height: 500px; margin: 0; overflow: hidden; }.contact-letter-closing figure img { width: 100%; height: 100%; object-fit: cover; }.contact-letter-closing > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(40px,6vw,90px); }.contact-letter-closing h2 { margin: 0; font: 400 clamp(45px,5vw,78px)/.87 var(--serif); letter-spacing: -.065em; }.contact-letter-closing h2 em { color: var(--forest-2); font-style: normal; }.contact-letter-closing > div > p:not(.eyebrow) { max-width: 380px; margin: 28px 0 40px; color: #586355; font-size: 14px; line-height: 1.65; }.contact-letter-closing > div > a { align-self: flex-start; padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 1050px) { .contact-letter-opening { grid-template-columns: 80px 1fr; }.contact-letter-opening > figure { grid-column: 1 / -1; height: 520px; min-height: 0; }.contact-letter-details { grid-template-columns: repeat(2,1fr); }.contact-letter-form { grid-template-columns: 1fr; }.contact-letter-form-intro { max-width: 620px; } }
@media (max-width: 760px) { .contact-letter-opening { grid-template-columns: 52px 1fr; padding-top: 72px; }.contact-letter-opening > aside { padding: 20px 12px; }.contact-letter-opening > article { min-height: 680px; padding: 40px 24px; }.contact-letter-opening > figure { height: 340px; }.contact-letter-details { grid-template-columns: 1fr; }.contact-letter-details article { min-height: 210px; }.contact-letter-details h2 { margin-top: 55px; }.contact-letter-form { padding: 80px 22px; }.contact-letter-form form { grid-template-columns: 1fr; }.contact-letter-form-wide, .contact-letter-form .contact-letter-consent { grid-column: auto; }.contact-letter-form button { justify-self: start; }.contact-letter-closing { grid-template-columns: 1fr; }.contact-letter-closing figure { min-height: 350px; }.contact-letter-closing > div { min-height: 470px; padding: 44px 24px; } }