/* A personal invitation with direct contact and a practical office address. */
.contact-page-hero{background:var(--paper);padding-block:50px 65px}
.contact-page-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(45px,7vw,105px);align-items:center}
.contact-page-copy .breadcrumbs{padding:0;margin-bottom:30px}
.contact-page-copy h1{font-size:clamp(44px,4.8vw,70px)}
.contact-page-copy>p{max-width:480px;font-size:18px;line-height:1.8;color:var(--muted);margin:25px 0 28px}
.contact-page-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.contact-page-details{margin-top:35px}
.contact-page-details>a{display:flex;align-items:center;gap:17px;border-top:1px solid var(--line);padding:17px 0;font-size:18px;line-height:1.5}
.contact-page-details>a:last-child{border-bottom:1px solid var(--line)}
.contact-page-details>a>span:nth-child(2){flex:1;min-width:0;overflow-wrap:anywhere}
.contact-page-details small{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.contact-page-details .icon{width:20px;height:20px;flex-shrink:0}
.contact-method-icon{width:42px;height:42px;border:1px solid #d5c9bb;display:grid;place-items:center;flex-shrink:0}
.contact-page-details>a:hover{color:var(--accent)}
.contact-office{background:var(--sand)}
.contact-office-photo{height:350px;overflow:hidden}
.contact-office-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.contact-office-caption{display:flex;align-items:end;justify-content:space-between;gap:20px;background:var(--beige);padding:27px 28px}
.contact-office-caption .eyebrow{font-size:10px;margin-bottom:13px}
.contact-office-caption address{font-style:normal;font-size:16px;line-height:1.75}
.office-route{display:flex;align-items:center;gap:13px;min-height:44px;font-size:13px;border-bottom:1px solid #8c7158}
.office-route .icon{width:19px;height:19px;flex-shrink:0}
.contact-message-section{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(45px,8vw,120px);padding-block:90px;scroll-margin-top:calc(var(--header-height) + 25px)}
.contact-message-intro h2{font-family:var(--font-heading);font-weight:400;letter-spacing:-.04em;line-height:1.1;font-size:clamp(38px,3.8vw,55px)}
.contact-message-intro h2 span{color:var(--accent)}
.contact-message-intro>p:not(.eyebrow){font-size:17px;line-height:1.8;color:var(--muted);margin-top:25px;max-width:400px}
.contact-preparation{margin-top:36px;padding:24px 0 0;border-top:1px solid var(--line);max-width:400px}
.contact-preparation h3{font-size:15px;font-weight:500;margin-bottom:12px}
.contact-preparation p{font-size:14px;line-height:1.8;color:var(--muted);margin-top:12px}
.contact-page-form{background:var(--paper);padding:35px 38px}
.contact-page-form .form-field{margin-bottom:23px}
.contact-page-form label{font-size:14px;margin-bottom:10px}
.contact-page-form label span{font-size:12px;color:var(--muted)}
.contact-page-form input,.contact-page-form select,.contact-page-form textarea{background:#fff;border:1px solid #cec7be;width:100%;font-size:16px;line-height:1.5;padding:13px 14px;border-radius:0;color:var(--ink)}
.contact-page-form textarea{resize:vertical;min-height:145px}
.contact-page-form input::placeholder,.contact-page-form textarea::placeholder{color:#827a71}
.contact-page-form .form-hint{font-size:11px;line-height:1.6;margin-top:9px}
.contact-page-form .button{max-width:100%;font-size:13px}
.contact-form-explanation{font-size:12px;line-height:1.7;color:var(--muted);margin-top:16px;max-width:380px}
.contact-compose-status{font-size:14px;margin-top:20px;border-left:2px solid var(--accent);padding-left:15px}
.contact-compose-status a{text-decoration:underline;text-underline-offset:3px}
.contact-closing{background:var(--ink);color:#fff;padding-block:45px;border-bottom:1px solid #5b5651}
.contact-closing>.container{display:flex;align-items:center;justify-content:space-between;gap:25px}
.contact-closing p{font-family:var(--font-heading);font-size:34px;line-height:1.15;letter-spacing:-.035em}
.contact-closing p span{color:var(--beige)}
.contact-closing .text-link{border-color:var(--beige)}
.contact-closing :focus-visible{outline-color:var(--beige)}
@media(max-width:1000px){.contact-page-grid{gap:35px}.contact-page-copy>p{font-size:16px}.contact-office-caption{display:block;padding:23px}.office-route{width:max-content;margin-top:14px}.contact-message-section{gap:40px}.contact-page-form{padding:28px}.contact-page-details>a{font-size:16px}}
@media(max-width:700px){
.contact-page-hero{padding-block:27px 36px}.contact-page-grid{grid-template-columns:1fr;gap:35px}.contact-page-copy h1{font-size:clamp(39px,9vw,58px)}.contact-page-copy .breadcrumbs{margin-bottom:25px}.contact-page-copy>p{margin:22px 0;font-size:16px}.contact-page-actions{gap:20px}.contact-page-details{margin-top:28px}.contact-page-details>a{gap:12px;font-size:16px}.contact-method-icon{width:36px;height:36px}.contact-office-photo{height:300px}.contact-office-caption{display:flex;align-items:end;gap:15px}.contact-office-caption address{font-size:14px}.office-route{font-size:12px;gap:8px}
.contact-message-section{grid-template-columns:1fr;padding-block:48px;gap:30px}.contact-message-intro h2{font-size:40px}.contact-message-intro>p:not(.eyebrow){font-size:16px}.contact-preparation{margin-top:25px}.contact-page-form{padding:24px 20px}.contact-page-form .button{font-size:12px;padding-inline:16px}.contact-closing>.container{display:block}.contact-closing p{font-size:30px}.contact-closing .text-link{margin-top:20px}
}
@media(max-width:360px){.contact-office-caption{display:block}.contact-page-details>a{font-size:14px}}

/* One place for contact details; quiet form introduction and a shorter footer. */
.contact-message-section{padding-block:70px}
.contact-message-intro h2{font-size:clamp(34px,3.2vw,46px)}
.contact-message-intro>p:not(.eyebrow){max-width:320px;font-size:16px}
.contact-page .footer-top{grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:700px){
.contact-message-section{padding-block:45px;gap:25px}
.contact-message-intro h2{font-size:34px}
.contact-page .footer-top{grid-template-columns:1fr 1fr}
}

/* The office image stands on its own, with a quiet caption underneath. */
.contact-office{background:transparent}
.contact-office-photo{height:390px}
.contact-office-photo img{object-position:50% 35%}
.contact-office-caption{background:transparent;padding:22px 0 0;align-items:center;gap:24px}
.contact-office-caption .eyebrow{display:none}
.contact-office-caption address{font-size:15px;line-height:1.75}
.office-route{width:auto;min-height:44px;margin:0;border:0;gap:14px;font-size:13px;white-space:nowrap}
.office-route>.icon{width:44px;height:44px;padding:12px;border:1px solid #d4ccc2;transition:background .2s,color .2s}
.office-route:hover>.icon{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:1000px){.contact-office-caption{display:flex;padding:20px 0 0;gap:16px}.contact-office-photo{height:360px}}
@media(max-width:700px){.contact-office-photo{height:320px}.contact-office-caption{padding-top:18px;gap:12px}.contact-office-caption address{font-size:14px}.office-route{gap:10px;font-size:12px}}
@media(max-width:360px){.contact-office-caption{align-items:flex-start;flex-direction:column;gap:12px}}
@media(prefers-reduced-motion:reduce){.office-route>.icon{transition:none}}

/* A warm detail image balances the short introduction against the form. */
.contact-message-intro{display:flex;flex-direction:column;align-items:flex-start}
.contact-message-image{width:100%;padding-top:35px;margin-top:auto}
.contact-message-image img{display:block;width:100%;height:auto;aspect-ratio:1.45/1;object-fit:cover;object-position:48% center}
@media(max-width:700px){.contact-message-image{padding-top:24px}.contact-message-image img{aspect-ratio:1.8/1}}