/* #contact: photo + details (socials inside), form panel beside; phone: details, form, photo */
.contact .sec-head{margin-bottom:clamp(32px,4vw,48px)}
.contact .split{align-items:start;row-gap:48px}
.contact .ct-info{grid-column:1/6;display:grid;grid-template-columns:minmax(0,1fr);row-gap:32px;align-items:start}
.contact h3{font-family:var(--font-display);font-size:22px;line-height:1.2}
.contact .ct-panel{grid-column:7/13;padding:clamp(32px,3vw,40px);background:var(--alt);border:1px solid var(--line);border-radius:var(--r-lg)}

.contact .ct-ph{width:100%;max-width:500px}
.contact .ct-det{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.contact .ct-det .tlink{font-size:17px}
.contact .ct-who{font-size:17px;font-weight:600;color:var(--ink)}
.contact .ct-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.contact .ct-list li{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-size:17px;overflow-wrap:normal}
.contact .i{flex:none;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.75}
.contact .ct-list li>.i{color:var(--mute)}
.contact .ct-mail{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-underline-offset:5px;transition:text-decoration-color .18s var(--ease-state),color .18s var(--ease-state)}
.contact .ct-mail .i{color:var(--mute)}
.contact .ct-mail:hover{text-decoration-color:currentColor}
.contact .tlink:active,.contact .ct-mail:active,.contact .ct-soc a:active{color:var(--mute)}
.contact .ct-mail:focus-visible,.contact .tlink:focus-visible,.contact .ct-soc a:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-sm)}

.contact .ct-soc{margin-top:auto;padding-top:16px}
.contact .ct-soc ul{display:flex;flex-wrap:wrap;gap:0 28px;margin:8px 0 0;padding:0;list-style:none}
.contact .ct-soc a{display:inline-flex;align-items:center;min-height:44px;font-size:17px;font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-underline-offset:5px;transition:text-decoration-color .18s var(--ease-state),color .18s var(--ease-state)}
.contact .ct-soc a:hover{text-decoration-color:currentColor}

.contact .ct-panel h3{margin-bottom:20px}
.contact .ct-f{display:grid;gap:20px}
.contact .ct-row{display:grid;gap:20px}
.contact .ct-f textarea{height:120px;min-height:120px}
.contact .ct-f .btn{width:100%}
.contact .field [aria-invalid="true"]{border-color:var(--ink)}
.contact .ct-err{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:15px;line-height:1.4}
.contact .ct-err[hidden]{display:none}

@media (min-width:601px){
  .contact .ct-info{grid-template-columns:200px minmax(0,1fr);column-gap:28px}
  .contact .ct-row{grid-template-columns:1fr 1fr}
  .contact .ct-f .btn{width:auto;justify-self:start;min-width:160px}
}
@media (min-width:901px){
  .contact .ct-info{grid-template-columns:clamp(140px,14vw,200px) minmax(0,1fr);column-gap:clamp(20px,2.2vw,32px)}
}
@media (min-width:901px){.contact .ct-info{grid-column:1/7}.contact .ct-panel{grid-column:7/13;margin-left:24px}}
/* photo 1:1 stretched to the row; left block and form panel share top and bottom */
@media (min-width:1100px){
  .contact .split{align-items:stretch}
  .contact .ct-info{grid-column:1/8;grid-template-columns:minmax(0,1fr) 240px;column-gap:24px;align-items:stretch}
  .contact .ct-ph{align-self:stretch;height:100%}
  .contact .ct-panel{grid-column:8/13;margin-left:0}
}

.contact .ct-mail,.contact .ct-list li{white-space:nowrap}
@media (max-width:600px){.contact .ct-info{display:contents}.contact .ct-ph{order:1;aspect-ratio:16/9}}