#contacts{font-family:Manrope,Arial,sans-serif;color:#17383a;--contact-radius:18px;width:100%;margin:auto;container-type:inline-size}
#contacts *{box-sizing:border-box}
#contacts .contact-preview{background:#f3f7f5;border-radius:var(--contact-radius);overflow:hidden;padding-bottom:30px}
#contacts .contact-cover{display:grid;grid-template-columns:1fr 1fr;background:#123c39;min-height:420px}
#contacts .contact-intro{padding:35px 34px 50px;display:flex;flex-direction:column;align-items:start;color:#f1f7f3}
#contacts .brand-label{font-size:10px;letter-spacing:.13em;color:#afd7cb}
#contacts h2{font-size:48px;line-height:1.15;letter-spacing:-.055em;font-weight:400;margin:28px 0 35px}
#contacts h2 span{display:block;color:#a5d9c9}
#contacts .location{margin-top:auto}
#contacts h3{font-size:24px;line-height:1.4;letter-spacing:-.04em;font-weight:400;margin:0}
#contacts .location p{font-size:12px;color:#c0d9ce;margin:15px 0 0}
#contacts .entrance{display:block;width:100%;height:100%;min-height:420px;max-height:480px;object-fit:cover;object-position:50% 55%}
#contacts .contact-card{position:relative;margin:-16px 25px 0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;background:#e0ebe1;border-radius:14px;padding:28px 26px;box-shadow:0 12px 25px #163d390a}
#contacts a{color:inherit;text-decoration:none}
#contacts .small-label{font-size:9px;letter-spacing:.12em;color:#577d71;margin-bottom:16px;display:block}
#contacts .phones a{display:block;font-size:25px;font-weight:400;line-height:1.55;letter-spacing:-.04em;white-space:nowrap}
#contacts .contact-actions{display:flex;flex-direction:column;align-items:stretch;gap:20px}
#contacts .map-button{background:#214c43;color:#f3f7f5;border-radius:40px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;min-height:55px;font-size:13px}
#contacts .map-button svg{width:18px;height:18px;stroke-width:1.4;flex-shrink:0}
#contacts .email{align-self:center;border-bottom:1px solid #97b0a5;padding-bottom:4px;font-size:12px}
#contacts .contact-notes{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:26px 35px 0}
#contacts .contact-notes p{font-size:11px;line-height:1.9;color:#617c73;margin:0}
#contacts .contact-notes strong{font-weight:500;color:#3f6459}
@container(max-width:590px){
 #contacts .contact-cover{min-height:350px}
 #contacts .contact-intro{padding:24px 20px 35px}
 #contacts h2{font-size:36px;margin:24px 0 25px}
 #contacts h3{font-size:19px}
 #contacts .entrance{min-height:350px;max-height:390px}
 #contacts .contact-card{margin:-12px 16px 0;gap:20px;padding:23px 20px}
 #contacts .phones a{font-size:21px}
 #contacts .map-button{padding:15px 17px;font-size:12px}
 #contacts .contact-notes{padding:23px 26px 0;gap:24px}
}
@container(max-width:450px){
 #contacts .contact-cover{grid-template-columns:1fr}
 #contacts .contact-intro{padding:28px 25px 30px}
 #contacts h2{font-size:44px;margin:24px 0}
 #contacts h3{font-size:22px}
 #contacts .entrance{height:350px;min-height:0;max-height:none;object-position:50% 56%}
 #contacts .contact-card{grid-template-columns:1fr;gap:24px;padding:25px;margin:-14px 15px 0}
 #contacts .phones a{font-size:26px;line-height:1.65}
 #contacts .map-button{font-size:14px}
 #contacts .contact-actions{gap:17px}
 #contacts .contact-notes{grid-template-columns:1fr;padding:24px 26px 0;gap:13px}
 #contacts .contact-notes p{font-size:12px}
}
/* Centered composition and compact contact strip. */
#contacts .contact-intro{align-items:center;text-align:center;justify-content:center;padding:32px 24px 42px}
#contacts h2{margin:28px 0 36px}
#contacts .location{margin-top:0}
#contacts .contact-card{padding:18px 26px;gap:26px}
#contacts .phones{text-align:center}
#contacts .phones a{line-height:1.5}
#contacts .contact-actions{gap:12px}
#contacts .map-button{justify-content:center;text-align:center;min-height:48px;padding:14px 22px}
@container(max-width:590px){
 #contacts .contact-card{padding:17px 20px;gap:18px}
 #contacts .contact-intro{padding:24px 16px 34px}
}
@container(max-width:450px){
 #contacts .contact-card{padding:20px 24px;gap:17px}
 #contacts .contact-intro{padding:28px 25px 32px}
 #contacts h2{margin:24px 0 28px}
}
/* Vertical centering with consistent left alignment. */
#contacts .contact-intro{align-items:flex-start;text-align:left;justify-content:center;padding:34px 48px 46px}
#contacts .phones{text-align:left;align-self:center}
#contacts .contact-card{margin-left:24px;margin-right:24px;padding:22px 24px;row-gap:22px;box-shadow:none}
#contacts .contact-notes{grid-column:1/-1;border-top:1px solid #bdcec3;padding:20px 0 0;gap:18px 26px;align-items:start}
#contacts .access-note{display:flex;align-items:flex-start;gap:12px}
#contacts .access-note svg{width:20px;height:20px;flex-shrink:0;stroke-width:1.4;color:#497565;margin-top:2px}
#contacts .access-note h4{font-size:12px;line-height:1.6;font-weight:500;margin:0 0 5px;color:#244f43}
#contacts .contact-notes p{font-size:11px;line-height:1.8;color:#4f6e62}
#contacts .contact-notes .region{grid-column:1/-1;font-size:10px;color:#657e71}
#contacts .contact-preview{padding-bottom:24px}
#contacts #appointment{scroll-margin-top:110px}
@container(min-width:900px){
 #contacts .contact-cover{min-height:580px}
 #contacts .entrance{height:580px;min-height:580px;max-height:580px;object-position:50% 58%}
 #contacts .contact-intro{padding:44px 64px 54px}
 #contacts h2{font-size:64px}
 #contacts h3{font-size:30px}
 #contacts .brand-label{font-size:12px}
 #contacts .location p{font-size:16px}
 #contacts .contact-card{margin-left:32px;margin-right:32px;padding:26px 32px;column-gap:48px}
 #contacts .phones a{font-size:30px}
 #contacts .map-button{font-size:16px;min-height:58px}
 #contacts .email{font-size:14px}
 #contacts .access-note h4{font-size:16px}
 #contacts .contact-notes p{font-size:14px}
 #contacts .contact-notes .region{font-size:12px}
}
@container(max-width:590px){
 #contacts .contact-intro{padding:28px 28px 38px}
 #contacts .contact-card{margin-left:16px;margin-right:16px;padding:20px;column-gap:18px}
 #contacts .contact-notes{column-gap:18px}
}
@container(max-width:450px){
 #contacts .contact-intro{padding:32px 36px}
 #contacts .contact-card{padding:22px 20px}
 #contacts .contact-notes{gap:18px;padding-top:20px}
 #contacts .access-note h4{font-size:13px}
 #contacts .contact-notes p{font-size:12px}
}