/* Contact page: toolbox split grid and border-list rhythm, with larger contact values. */
.contact-hero{padding: clamp(22rem, 21vw, 30rem) 0 var(--lg-space);}
.contact-hero h1{font-size: clamp(5.6rem, 7vw, 12rem); letter-spacing: -.035em;}
.contact-company h2, .contact-form-intro h2{margin-bottom: var(--md-space);}
.contact-company > p, .contact-form-intro > p{color: var(--grey-color);}
.contact-company .btn{margin-top: var(--md-space);}
.contact-overview, .contact-write-layout{align-items: start;}
.contact-list > div{padding: var(--md-space) 0; border-bottom: .1rem solid #555;}
.contact-list > div:first-child{padding-top: 0;}
.contact-list dt{color: var(--grey-color); font-size: var(--fs-md); margin-bottom: var(--gutter-half);}
.contact-list dd{margin: 0; font-family: var(--font-medium); font-size: clamp(2.2rem, 2.2vw, 3.8rem); line-height: 1.25; letter-spacing: -.02em;}
.contact-list .contact-primary{font-size: clamp(2.4rem, 3.1vw, 5.6rem);}
.contact-list a{color: inherit; overflow-wrap: anywhere; transition: color 180ms ease;}
.contact-list a:hover{color: #ef343b;}
.contact-map-heading p{font-family: var(--font-medium); font-size: var(--fs-xl); margin-bottom: var(--gutter-half);}
.contact-map-heading a{color: var(--grey-color); text-decoration: underline; text-underline-offset: .4rem;}
.contact-map{border-radius: var(--border-radius); overflow: hidden; background: #242424;}
.contact-map iframe{display: block; width: 100%; height: clamp(32rem, 35vw, 56rem); border: 0;}
.contact-form-intro{max-width: 34rem;}
.contact-form-intro .contact-required-note{font-size: var(--fs-sm); margin-top: var(--md-space);}
.contact-form-fields{min-width: 0; display: grid; gap: var(--md-space);}
.contact-fields-grid{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--md-space) var(--gutter);}
.contact-field{min-width: 0;}
.contact-field > label{display: block; font-family: var(--font-medium); margin-bottom: 1rem;}
.contact-field input, .contact-field select, .contact-field textarea{display: block; width: 100%; min-width: 0; padding: 1.5rem 1.6rem; border: .1rem solid #555; border-radius: .3rem; color: var(--white-color); background: #242424; font: inherit; color-scheme: dark; transition: border-color 180ms ease;}
.contact-field input, .contact-field select{min-height: 5.4rem;}
.contact-field select{cursor: pointer; padding-right: 3.2rem;}
.contact-field textarea{resize: vertical; min-height: 17rem;}
.contact-field input:hover, .contact-field select:hover, .contact-field textarea:hover{border-color: #aaa;}
.contact-privacy{display: flex; align-items: flex-start; gap: 1.2rem; color: var(--grey-color); font-size: var(--fs-md); cursor: pointer;}
.contact-privacy input{flex: 0 0 auto; width: 1.9rem; height: 1.9rem; margin-top: .3rem; accent-color: #ef343b; cursor: pointer;}
.contact-privacy a{text-decoration: underline; text-underline-offset: .3rem; color: var(--white-color);}
.contact-submit{justify-self: start; cursor: pointer;}
.contact-submit:not(:disabled):hover{background: #ddd;}
.contact-submit:not(:disabled):active{transform: translateY(.1rem);}
.contact-page :is(a, input, select, textarea, button):focus-visible{outline: .2rem solid var(--white-color); outline-offset: .4rem;}
.contact-write-section{scroll-margin-top: 10rem;}
@media(width < 992px){
  .contact-hero{padding-top: 21rem;}
  .contact-overview, .contact-write-layout{gap: var(--lg-space);}
  .contact-form-intro{max-width: 55rem;}
}
@media(width < 576px){
  .contact-fields-grid{grid-template-columns: 1fr;}
  .contact-submit{width: 100%; min-width: 0;}
}
@media(prefers-reduced-motion: reduce){
  .contact-page *{transition: none !important;}
}