.contacts-page{--cn-pale:#eaf4f6;--cn-soft:#f4f6f7;--cn-line:#d5e0e4;background:#fff;font-family:Manrope,Arial,sans-serif}
.cn-hero{padding:72px 0 76px;background:#fff}
.cn-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);gap:92px;align-items:end}
.cn-hero h1{max-width:690px;margin:0;font-size:clamp(60px,6vw,82px);font-weight:600;letter-spacing:-.058em;line-height:.98}
.cn-hero-copy>p{max-width:680px;margin:25px 0 0;color:var(--muted);font-size:18px;line-height:1.55}
.cn-contact-list{border-top:1px solid var(--cn-line)}
.cn-contact-list>div{display:grid;grid-template-columns:150px 1fr;gap:18px 26px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--cn-line)}
.cn-contact-list span{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cn-contact-list a,.cn-contact-list strong{font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.cn-contact-list a:hover{color:var(--green)}
.cn-contact-list small{grid-column:2;color:var(--muted);font-size:11px;line-height:1.5}

.cn-section{padding:70px 0}
.cn-section h2{max-width:760px;margin:0;font-size:50px;font-weight:600;letter-spacing:-.047em;line-height:1.04}
.cn-section-copy>p,.cn-compact-head>p,.cn-office-copy>p{max-width:560px;margin:18px 0 0;color:var(--muted);font-size:14px;line-height:1.6}
.cn-message{background:var(--cn-soft)}
.cn-message-box{display:grid;grid-template-columns:.78fr 1.22fr;gap:82px;align-items:start;padding:42px;border-radius:32px;background:var(--cn-pale)}
.cn-message-box>*{min-width:0}
.cn-form{display:grid;min-width:0;gap:14px;padding:27px;border-radius:24px;background:#fff;box-shadow:0 20px 50px rgba(16,40,62,.07)}
.cn-form label{font-size:12px;font-weight:700}
.cn-form input,.cn-form select,.cn-form textarea{display:block;width:100%;margin-top:6px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-family:inherit;font-size:14px;font-weight:400;line-height:1.4;outline:none}
.cn-form input:focus,.cn-form select:focus,.cn-form textarea:focus{border-color:#7fb7d4;box-shadow:0 0 0 3px rgba(8,120,201,.08)}
.cn-form textarea{min-height:112px;resize:vertical}
.cn-form .is-invalid{border-color:#b85a51;background:#fffafa}
.cn-form-action{display:flex;align-items:center;gap:16px;min-height:50px}
.cn-form-status{display:none;margin:0;font-size:11px;line-height:1.45}
.cn-form-status.is-visible{display:block}
.cn-form-status[data-state="sending"]{color:var(--blue)}
.cn-form-status[data-state="success"]{color:var(--green)}
.cn-form-status[data-state="error"],.cn-form-status[data-state="validation"]{color:#a34f47}
.cn-form button:disabled{cursor:wait;opacity:.65}
.cn-prototype-note{color:var(--muted);font-size:9px}

.cn-social{background:#fff}
.cn-compact-head{margin-bottom:30px}
.cn-social-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cn-social-list a{position:relative;display:flex;min-width:0;min-height:136px;padding:22px;border:1px solid transparent;border-radius:24px;flex-direction:column;justify-content:flex-end;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.cn-social-list a:hover{transform:translateY(-2px)}
.cn-social-list a:focus-visible{outline:3px solid rgba(45,116,181,.2);outline-offset:3px}
.cn-social-card-telegram{background:#edf7fc;border-color:#d7ebf6!important}
.cn-social-card-telegram:hover{background:#e5f3fa;border-color:#bcdff0!important}
.cn-social-card-max{background:#f4f0fb;border-color:#e5dcf5!important}
.cn-social-card-max:hover{background:#eee8f9;border-color:#d6c8ef!important}
.cn-social-card-vk{background:#eef5fc;border-color:#d9e8f6!important}
.cn-social-card-vk:hover{background:#e6f0fa;border-color:#c2dcf2!important}
.cn-social-icon{position:absolute;top:18px;left:20px;display:grid;width:34px;height:34px;margin:0;border-radius:11px;background:rgba(255,255,255,.78);place-items:center}
.cn-social-icon img{display:block;width:22px;height:22px;object-fit:contain}
.cn-social-icon-vk{color:#2787f5;font-size:11px;font-style:normal;font-weight:800;letter-spacing:-.04em}
.cn-social-list span{font-size:20px;font-weight:700}
.cn-social-list small{margin-top:5px;color:var(--muted);font-size:10px;overflow-wrap:anywhere}
.cn-social-list b{position:absolute;top:20px;right:20px;font-size:16px}
.cn-social-card-telegram b{color:#229ed9}
.cn-social-card-max b{color:#7657d5}
.cn-social-card-vk b{color:#2787f5}

.cn-office{padding-top:62px;background:var(--cn-soft)}
.cn-office-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:80px;align-items:center}
.cn-office-copy address{max-width:470px;margin-top:27px;font-size:24px;font-style:normal;font-weight:600;letter-spacing:-.025em;line-height:1.35}
.cn-map{position:relative;height:300px;border:1px solid var(--cn-line);border-radius:24px;background:#e8f0f2;overflow:hidden}
.cn-map-frame{display:block;width:100%;height:100%;border:0}
.cn-map>a{position:absolute;z-index:4;right:18px;bottom:16px;padding:8px 11px;border-radius:12px;background:rgba(255,255,255,.9);color:var(--green);font-size:10px;font-weight:700}

.cn-details{padding:72px 0 92px;background:#fff}
.cn-details-grid{display:grid;grid-template-columns:.68fr 1.32fr;gap:82px;align-items:start}
.cn-compact-head>p{font-size:17px;font-weight:600;color:var(--ink)}
.cn-requisites{margin:0;border:1px solid var(--cn-line);border-radius:24px;background:#fff;overflow:hidden}
.cn-requisites>div{display:grid;grid-template-columns:190px 1fr;gap:28px;padding:16px 20px;border-bottom:1px solid var(--cn-line)}
.cn-requisites>div:last-child{border-bottom:0}
.cn-requisites dt{color:var(--muted);font-size:11px}
.cn-requisites dd{margin:0;font-size:13px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.cn-requisites .cn-placeholder dd{color:#95643e;font-weight:500}

@media(max-width:1050px){
  .cn-hero-grid,.cn-message-box,.cn-office-grid,.cn-details-grid{grid-template-columns:1fr;gap:42px}
  .cn-contact-list{max-width:760px}
  .cn-message-box{padding:34px}
  .cn-map{max-width:820px}
}
@media(max-width:700px){
  .cn-hero{padding:50px 0 60px}
  .cn-hero h1{font-size:48px}
  .cn-section{padding:58px 0}
  .cn-section h2{font-size:39px}
  .cn-contact-list>div{grid-template-columns:1fr;gap:6px}
  .cn-contact-list small{grid-column:auto}
  .cn-contact-list a,.cn-contact-list strong{font-size:22px}
  .cn-message-box{padding:28px 22px}
  .form-row,.cn-social-list{grid-template-columns:1fr}
  .cn-social-list a{min-height:112px}
  .cn-office-copy address{font-size:21px}
  .cn-map{height:270px}
  .cn-requisites>div{grid-template-columns:1fr;gap:5px}
}
