.section-contact-hub{
    --chub-navy:#13245c;
    --chub-navy-deep:#0c1a45;
    --chub-navy-band:#0e1d52;
    --chub-bg:#ffffff;
    --chub-border:#e1e4ec;
    --chub-muted:#5b6472;
    background:var(--chub-bg);
    font-family:Roboto,Arial,sans-serif;
    color:var(--chub-navy);
}

.banner.primary-banner.banner-blog {
    display: none;
}
.contact-hub{
    max-width:1280px;
    margin:0 auto;
    padding:14px 24px;
}

/* Full-bleed navy hero band */
.contact-hub__band{
    position:relative;
    padding:145px 0 35px;
}
.contact-hub__band--has-image{
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.contact-hub__band > .contact-hub{
    position:relative;
    z-index:1;
}

/* Hero */
.contact-hub__hero{
    display:flex;
    align-items:center;
    gap:48px;
}
.contact-hub__hero-text{
    flex:1 1 auto;
    max-width:640px;
}
.contact-hub__eyebrow{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.6);
    margin-bottom:14px;
}
.contact-hub__title{
    font-family:Georgia,'Times New Roman',serif;
    font-weight:500;
    font-size:48px;
    line-height:1.1;
    color:#fff;
    margin:0 0 16px;
}
.contact-hub__subtitle{
    font-size:16px;
    line-height:1.6;
    color:rgba(255,255,255,.72);
    margin:0;
}
/* Support type cards (bottom of the navy hero band) */
.contact-hub__types{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-top:50px;
}
.contact-hub__type{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    text-align:left;
    background:#fff;
    border:1px solid var(--chub-border);
    border-radius:14px;
    padding:20px;
    cursor:pointer;
    box-shadow:0 12px 24px -12px rgba(12,26,69,.25);
    transition:border-color .2s ease,box-shadow .2s ease;
    font-family:inherit;
}
.contact-hub__type-icon{
    flex:0 0 auto;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.contact-hub__type-icon img{
    width:32px;
    height:32px;
    display:block;
}
.contact-hub__type-body{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding-right:20px;
}
.contact-hub__type-title{
    font-size:16px;
    font-weight:700;
    color:var(--chub-navy);
}
.contact-hub__type-desc{
    font-size:13px;
    line-height:1.4;
    color:var(--chub-muted);
}
.contact-hub__type-check{
    position:absolute;
    top:50%;
    right:16px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--chub-navy);
    transform:translateY(-50%);
    display:none;
}
.contact-hub__type-check::after{
    content:"";
    position:absolute;
    left:5px;
    top:6px;
    width:9px;
    height:5px;
    border-left:2px solid #fff;
    border-bottom:2px solid #fff;
    transform:rotate(-45deg);
}
.contact-hub__type-arrow{
    position:absolute;
    top:50%;
    right:16px;
    width:16px;
    height:16px;
    opacity:.4;
    transform:translateY(-50%);
}

.wpcf7-checkbox+.wpcf7-not-valid-tip {
    position: relative;
    bottom: 0;
}
.contact-hub__type-arrow::after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    border-right:2px solid var(--chub-navy);
    border-top:2px solid var(--chub-navy);
    transform:rotate(45deg);
    top:4px;
    left:2px;
}
.contact-hub__type.is-active{
    border-color:var(--chub-navy);
    box-shadow:0 0 0 1px var(--chub-navy),0 12px 24px -12px rgba(12,26,69,.25);
}
.contact-hub__type.is-active .contact-hub__type-check{
    display:block;
}
.contact-hub__type.is-active .contact-hub__type-arrow{
    display:none;
}

/* Info + form panel */
.contact-hub__panel{
    display:grid;
    grid-template-columns:minmax(240px,320px) 1fr;
    gap:24px;
    align-items:start;
}
.contact-hub__info,
.contact-hub__form-block{
    background:#fff;
    border:1px solid var(--chub-border);
    border-radius:16px;
    padding:32px;
}
.contact-hub__info-heading{
    font-family:Georgia,'Times New Roman',serif;
    font-size:22px;
    font-weight:500;
    line-height:1.35;
    color:var(--chub-navy);
    margin:0 0 20px;
}
.contact-hub__info-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:20px;
}
.contact-hub__info-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
}
.contact-hub__info-icon{
    flex:0 0 auto;
    width:20px;
    height:20px;
    margin-top:2px;
}
.contact-hub__info-icon img{
    width:20px;
    height:20px;
    display:block;
}
.contact-hub__info-body{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.contact-hub__info-label{
    font-size:14px;
    font-weight:700;
    color:var(--chub-navy);
}
.contact-hub__info-value{
    font-size:14px;
    color:var(--chub-muted);
    text-decoration:none;
}
a.contact-hub__info-value:hover{
    color:var(--chub-navy);
    text-decoration:underline;
}

.contact-hub__form-head{
    margin-bottom:20px;
}
.contact-hub__form-title{
    font-family:Georgia,'Times New Roman',serif;
    font-size:22px;
    font-weight:500;
    color:var(--chub-navy);
    margin:0 0 6px;
}
.contact-hub__form-desc{
    font-size:14px;
    color:var(--chub-muted);
    margin:0;
}

/* Экран благодарности после успешной отправки: скрыт по умолчанию,
   contact-hub.js добавляет .is-sent на .contact-hub__form-block по
   событию wpcf7mailsent и прячет саму форму. */
.contact-hub__success{
    display:none;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:56px 24px;
    animation:contactHubFadeIn .35s ease;
}
.contact-hub__form-block.is-sent .contact-hub__form{
    display:none;
}
.contact-hub__form-block.is-sent .contact-hub__success{
    display:flex;
}
.contact-hub__success-icon{
    width:56px;
    height:56px;
    flex:0 0 auto;
    border-radius:50%;
    background:rgba(19,36,92,.08);
    color:var(--chub-navy);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
}
.contact-hub__success-icon svg{
    width:26px;
    height:26px;
}
.contact-hub__success-title{
    font-family:Georgia,'Times New Roman',serif;
    font-size:22px;
    font-weight:500;
    color:var(--chub-navy);
    margin:0 0 8px;
}
.contact-hub__success-text{
    font-size:14px;
    line-height:1.6;
    color:var(--chub-muted);
    max-width:360px;
    margin:0 0 24px;
}
.contact-hub__success-reset{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:12px 28px;
    border-radius:10px;
    border:1px solid var(--chub-border);
    background:#fff;
    color:var(--chub-navy);
    font-size:14px;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
    transition:border-color .2s ease,background .2s ease;
}
.contact-hub__success-reset:hover{
    border-color:var(--chub-navy);
    background:rgba(19,36,92,.04);
}
@keyframes contactHubFadeIn{
    from{opacity:0;transform:translateY(6px);}
    to{opacity:1;transform:translateY(0);}
}

/* Форма CF7: сайтовые .form-theme-second-block рисуют жёсткую тёмно-синюю
   2px рамку через ::before/::after (var(--link) !important). Здесь смягчаем
   её до тонкой светлой рамки только в рамках этого блока, без правок
   глобальных стилей формы. */
.contact-hub__form .form-theme-second-block{
    padding:1px;
}
.contact-hub__form .form-theme-second-block::before{
    background:var(--chub-border) !important;
}
.contact-hub__form .form-theme-second-block::after{
    width:calc(100% - 2px) !important;
    height:calc(100% - 2px) !important;
    left:1px;
    top:1px;
}
.contact-hub__form select.wpcf7-form-control:not(.is-init){
    color:var(--chub-navy);
}
.contact-hub__form .form-input,
.contact-hub__form .nice-select{
    border-color:var(--chub-border);
}

/* Валидация CF7: дефолтный "Please fill out this field." приводим к
   единому стилю блока; для чекбокса тултип выносим из общего flex-ряда
   лейбла, иначе он ломает верстку между чекбоксом и текстом согласия. */
.contact-hub__form .wpcf7-not-valid-tip{
    color:#cb2128;
    font-size:12px;
    font-weight:500;
    line-height:1.4;
}
.contact-hub__form .wpcf7-not-valid{
    border-color:#cb2128 !important;
}
.contact-hub__form .custom-checkbox-field{
    position:relative;
    width:100%;
}
.contact-hub__form .custom-checkbox-field .wpcf7-not-valid-tip{
    position:absolute;
    left:0;
    top:100%;
    margin-top:4px;
}
.contact-hub__form .col:has(.custom-checkbox-field){
    padding-bottom:20px;
}

/* Кнопка отправки — сайтовый .link--gradient-secondary красит только текст
   (background-clip:text, без фона) и .link:hover поднимает кнопку на 8px
   (transform:translateY(-8px)). Переопределяем локально: сплошная тёмно-синяя
   "пилюля" со стрелкой, без прыжка при наведении. */
.contact-hub__form .wrap_btn_form{
    position:relative;
    margin-top:8px;
}
.contact-hub__form .submit_a_form{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    background:var(--chub-navy) !important;
    -webkit-background-clip:border-box !important;
    background-clip:border-box !important;
    -webkit-text-fill-color:#fff !important;
    color:#fff !important;
    padding:16px 24px;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    letter-spacing:.01em;
    text-transform:none;
    transition:background .2s ease;
}
.contact-hub__form .submit_a_form:hover{
    background:var(--chub-navy-deep) !important;
    transform:none !important;
}
.contact-hub__form .submit_a_form .link__text{
    color:inherit;
    -webkit-text-fill-color:inherit;
    background:none;
}
.contact-hub__btn-arrow{
    display:inline-block;
    width:16px;
    height:16px;
    flex:0 0 auto;
    position:relative;
}
.contact-hub__btn-arrow::before{
    content:"";
    position:absolute;
    left:0;
    top:6px;
    width:12px;
    height:2px;
    background:#fff;
}
.contact-hub__btn-arrow::after{
    content:"";
    position:absolute;
    right:0;
    top:2px;
    width:8px;
    height:8px;
    border-right:2px solid #fff;
    border-top:2px solid #fff;
    transform:rotate(45deg);
}

/* CF7 по умолчанию рисует тёмный кружок-спиннер отдельным элементом сразу
   после скрытой нативной submit-кнопки — из-за width:100% у .submit_a_form
   он проваливается на новую строку под пилюлю. Перепозиционируем в центр
   кнопки как крупное белое кольцо и на время загрузки прячем текст/стрелку
   (а не просто гасим прозрачностью — иначе кнопка выглядит "сломанной"). */
.contact-hub__form .wpcf7-spinner{
    position:absolute;
    top:50%;
    left:50%;
    margin:0;
    width:22px;
    height:22px;
    background:none;
    transform:translate(-50%,-50%);
    z-index:2;
    /* CF7-ядро само переключает visibility:hidden/visible через .is-active,
       но порядок подключения стилей плагина/темы не гарантирован — не
       полагаемся на visibility и берём показ спиннера полностью на себя. */
    visibility:visible !important;
    opacity:0;
    transition:opacity .15s ease;
}
.contact-hub__form .wpcf7-spinner.is-active{
    opacity:1;
}
.contact-hub__form .wpcf7-spinner::before{
    content:"";
    position:absolute;
    inset:0;
    background:none;
    border:2.5px solid rgba(255,255,255,.3);
    border-top-color:#fff;
    border-radius:50%;
    animation:contactHubSpin .7s linear infinite;
}
@keyframes contactHubSpin{
    to{transform:rotate(360deg);}
}
.contact-hub__form .wrap_btn_form:has(.wpcf7-spinner.is-active) .submit_a_form{
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    pointer-events:none;
}
.contact-hub__form .wrap_btn_form:has(.wpcf7-spinner.is-active) .contact-hub__btn-arrow{
    visibility:hidden;
}

/* Steps footer */
.contact-hub__steps{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:40px;
    padding-bottom:8px;
    flex-wrap:wrap;
}
.contact-hub__step{
    display:flex;
    align-items:center;
    gap:10px;
}
.contact-hub__step-num{
    width:28px;
    height:28px;
    border-radius:50%;
    background:#fff;
    border:1.5px solid var(--chub-navy);
    color:var(--chub-navy);
    font-size:13px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}
.contact-hub__step-text{
    font-size:13px;
    color:var(--chub-navy);
    white-space:nowrap;
}
.contact-hub__step-line{
    width:56px;
    height:1px;
    background:var(--chub-border);
    flex:0 0 auto;
}

@media (max-width:991px){
    .contact-hub__hero{flex-direction:column;align-items:stretch;gap:28px;}
    .contact-hub__title{font-size:36px;}
    .contact-hub__types{grid-template-columns:2fr;margin-top:24px;}
    .contact-hub__panel{grid-template-columns:1fr;}
    .contact-hub__steps{justify-content:flex-start;}
    .contact-hub__step-line{display:none;}
}
@media (max-width:560px){
    .contact-hub__band{padding:36px 0;}
    .contact-hub__types{grid-template-columns:1fr;margin-top:14px;}
    .contact-hub{padding:0 16px;}
    .contact-hub__info,.contact-hub__form-block{padding:22px;}
    .contact-hub__type{padding:16px;}
}