/* A big photograph, expressive type and a short invitation to get in touch. */
.contact-page {color:var(--blue)}
.contact-page .contact-header {position:relative;color:var(--blue);padding:18px 5% 20px;align-items:center}
.contact-header .brand .logo-mark {width:100px;height:100px}
.contact-header .hello-link {border-bottom-color:currentColor}
.contact-page .mobile-nav {color:var(--blue);background:var(--cream)}
.contact-canvas {display:grid;grid-template-columns:46% 54%;grid-template-areas:"photo intro" "photo form";background:#f5ebde}
.contact-intro {grid-area:intro;padding:43px 12% 0 14%}
.contact-intro h1 {font:400 clamp(100px,9.1vw,150px)/.84 var(--serif);letter-spacing:-.065em;margin:28px 0 30px}
.contact-intro h1 em {color:var(--burgundy)}
.contact-lede {font-size:20px;line-height:1.6;text-wrap:pretty;max-width:470px}
.contact-photo {grid-area:photo;position:relative;margin:0;min-height:900px}
.contact-photo>img {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.contact-flourish {position:absolute;right:-83px;top:42px;width:230px;color:var(--coral);transform:rotate(12deg);z-index:1}
.contact-wave {position:absolute;right:-108px;bottom:61px;width:340px;color:var(--mustard);transform:rotate(-9deg);opacity:1;z-index:1}
.contact-form-column {grid-area:form;padding:32px 12% 58px 14%;min-width:0;scroll-margin-top:30px}
.session-picker {border:0;margin:0 0 29px;padding:0;min-width:0}
.session-choices {display:flex;flex-wrap:wrap;gap:10px}
.session-choices label {position:relative;cursor:pointer}
.session-choices input {position:absolute;opacity:0;width:1px;height:1px}
.session-choices span {display:block;padding:12px 19px;border:1px solid #24486e80;border-radius:32px;font-size:16px;line-height:1.2;transition:background .15s,transform .15s,color .15s}
.session-choices label:hover span {background:#edc6b6;transform:translateY(-2px)}
.session-choices input:checked+span {background:var(--blue);color:var(--cream);border-color:var(--blue)}
.session-choices input:focus-visible+span {outline:2px solid var(--blue);outline-offset:4px}
.contact-fields {display:grid;grid-template-columns:1fr 1fr;gap:24px 22px}
.field {display:flex;flex-direction:column;gap:9px;min-width:0}
.field-message {grid-column:1/-1}
.field label {font-size:17px;line-height:1.5}
.field input,.field textarea {border:1px solid #24486e60;border-radius:0;background:#fffaf35c;color:var(--blue);padding:13px 14px;font-size:18px;line-height:1.5;width:100%;min-width:0}
.field input {height:53px}
.field textarea {resize:vertical;min-height:140px}
.contact-send {display:block;background:var(--coral);color:#4f262b;font-size:19px;line-height:1.5;padding:17px 32px;margin-top:26px;width:100%;border-radius:36px;border:1px solid transparent}
.contact-send:disabled {cursor:not-allowed}
.contact-signoff {margin-top:30px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.contact-address {font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.contact-footer {padding-top:36px;padding-bottom:32px}
.contact-footer nav {display:flex;gap:22px}
.contact-footer nav a:hover {text-decoration:underline;text-underline-offset:5px}
@media(min-width:1700px) {
  .contact-intro {padding-right:17%;padding-left:15%}
  .contact-form-column {padding-right:17%;padding-left:15%}
}
@media(max-width:1100px) {
  .contact-canvas {grid-template-columns:43% 57%}
  .contact-intro {padding:38px 8% 0 12%}
  .contact-intro h1 {font-size:110px}
  .contact-lede {font-size:19px}
  .contact-form-column {padding:29px 8% 48px 12%}
  .contact-flourish {width:180px;right:-64px;top:55px}
  .contact-wave {width:260px;right:-82px;bottom:60px}
  .session-choices span {padding:11px 16px}
}
@media(max-width:760px) {
  .contact-page .contact-header {padding:16px 24px 18px}
  .contact-header .brand .logo-mark {width:86px;height:86px}
  .contact-page .mobile-nav {top:96px;left:20px;right:20px}
  .contact-canvas {grid-template-columns:1fr;grid-template-areas:"intro" "photo" "form"}
  .contact-intro {padding:24px 24px 32px}
  .contact-intro h1 {font-size:clamp(78px,20vw,140px);line-height:.91;margin:22px 0}
  .contact-intro h1 br {display:none}
  .contact-lede {font-size:18px}
  .contact-lede br {display:none}
  .contact-photo {min-height:0;aspect-ratio:4/5;margin-right:24px}
  .contact-photo>img {object-position:50% 28%}
  .contact-flourish {width:145px;right:-7px;top:-35px;transform:rotate(12deg)}
  .contact-wave {width:250px;right:12px;bottom:-22px;transform:rotate(-7deg)}
  .contact-form-column {padding:56px 24px 45px}
  .session-picker {margin-bottom:27px}
  .session-choices {gap:10px}
  .session-choices span {padding:13px 19px;font-size:16px}
  .contact-fields {grid-template-columns:1fr;gap:23px}
  .field textarea {min-height:170px}
  .contact-signoff {gap:10px;margin-top:28px}
  .contact-footer {padding:28px 24px;gap:25px}
  .contact-footer nav {gap:18px}
  .contact-footer>a:last-child {border-color:#f1e7da55}
}
@media(prefers-reduced-motion:reduce) {.session-choices span {transition:none}}