/* Phase 9.8.6 — Contacts page */

.sym-contacts-v986{
    width:min(1180px,calc(100vw - 40px));
    margin:clamp(22px,4vw,54px) auto clamp(70px,8vw,120px);
    color:#0b1015;
    font-family:Manrope,Inter,system-ui,sans-serif;
}

.sym-contacts-v986,
.sym-contacts-v986 *{
    box-sizing:border-box;
}

.sym-contacts-v986__hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 220px;
    gap:28px;
    align-items:center;
    padding:32px;
    border:1px solid rgba(10,24,36,.10);
    border-radius:32px;
    background:
        radial-gradient(circle at 92% 0%,rgba(18,230,173,.26),transparent 36%),
        linear-gradient(135deg,#fff,rgba(226,255,247,.72));
    box-shadow:0 22px 70px rgba(20,36,55,.12);
}

.sym-contacts-v986__eyebrow{
    margin:0 0 12px;
    color:#12e6ad;
    font-size:11px;
    line-height:1;
    font-weight:950;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.sym-contacts-v986 h1{
    margin:0;
    color:#0b1015;
    font-size:clamp(44px,6.4vw,84px);
    line-height:.88;
    font-weight:860;
    letter-spacing:-.055em;
}

.sym-contacts-v986 p{
    max-width:760px;
    margin:18px 0 0;
    color:rgba(11,16,21,.68);
    font-size:16px;
    line-height:1.52;
    font-weight:650;
}

.sym-contacts-v986__badge{
    min-height:180px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:12px;
    border-radius:24px;
    background:
        radial-gradient(circle at 45% 35%,rgba(18,230,173,.18),transparent 45%),
        linear-gradient(135deg,rgba(255,255,255,.72),rgba(232,255,249,.66));
}

.sym-contacts-v986__badge span{
    color:#12e6ad;
    font-size:12px;
    font-weight:950;
    letter-spacing:.18em;
}

.sym-contacts-v986__badge b{
    color:#0b1015;
    font-size:30px;
    line-height:1;
    font-weight:950;
    letter-spacing:.04em;
}

.sym-contacts-v986__layout{
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    gap:18px;
    margin-top:18px;
}

.sym-contacts-v986__side,
.sym-contacts-v986__form{
    border:1px solid rgba(10,24,36,.09);
    border-radius:28px;
    background:rgba(255,255,255,.74);
    box-shadow:0 18px 48px rgba(20,36,55,.10);
}

.sym-contacts-v986__side{
    display:grid;
    gap:12px;
    align-content:start;
    padding:18px;
}

.sym-contacts-v986__mini{
    padding:18px;
    border:1px solid rgba(18,230,173,.20);
    border-radius:20px;
    background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(226,255,247,.42));
}

.sym-contacts-v986__mini b{
    display:block;
    margin-bottom:8px;
    color:#0b1015;
    font-size:18px;
    line-height:1.05;
    font-weight:850;
}

.sym-contacts-v986__mini span{
    display:block;
    color:rgba(11,16,21,.62);
    font-size:13px;
    line-height:1.42;
    font-weight:650;
}

.sym-contacts-v986__form{
    padding:24px;
}

.sym-contacts-v986__form .fluentform,
.sym-contacts-v986__form form{
    margin:0!important;
}

.sym-contacts-v986__form .ff-el-group{
    margin-bottom:16px!important;
}

.sym-contacts-v986__form .ff-el-input--label label,
.sym-contacts-v986__form label{
    color:#0b1015!important;
    font-weight:850!important;
}

.sym-contacts-v986__form .ff-el-form-control,
.sym-contacts-v986__form input[type=email],
.sym-contacts-v986__form input[type=text],
.sym-contacts-v986__form textarea,
.sym-contacts-v986__form select{
    min-height:46px!important;
    border:1px solid rgba(10,24,36,.12)!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.88)!important;
    color:#0b1015!important;
    box-shadow:none!important;
    font-weight:650!important;
}

.sym-contacts-v986__form textarea{
    min-height:150px!important;
}

.sym-contacts-v986__form .ff-btn-submit,
.sym-contacts-v986__form button[type=submit],
.sym-contacts-v986__form input[type=submit]{
    min-height:44px!important;
    padding:11px 20px!important;
    border:1px solid rgba(18,230,173,.50)!important;
    border-radius:14px!important;
    background:#12e6ad!important;
    background-image:linear-gradient(135deg,#12e6ad,#6effc9)!important;
    color:#04110e!important;
    font-weight:950!important;
    letter-spacing:.02em!important;
    box-shadow:0 0 22px rgba(18,230,173,.18)!important;
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease!important;
}

.sym-contacts-v986__form .ff-btn-submit:hover,
.sym-contacts-v986__form button[type=submit]:hover,
.sym-contacts-v986__form input[type=submit]:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 0 28px rgba(18,230,173,.30)!important;
    filter:saturate(1.08)!important;
}

.sym-contacts-v986__fallback{
    display:grid;
    gap:8px;
    padding:24px;
    border:1px dashed rgba(10,24,36,.16);
    border-radius:20px;
    color:rgba(11,16,21,.70);
}

.sym-contacts-v986__fallback b{
    color:#0b1015;
    font-size:20px;
}

html[data-theme="dark"] .sym-contacts-v986{
    color:#f3f7ff;
}

html[data-theme="dark"] .sym-contacts-v986__hero,
html[data-theme="dark"] .sym-contacts-v986__side,
html[data-theme="dark"] .sym-contacts-v986__form{
    border-color:rgba(255,255,255,.10);
    background:
        radial-gradient(circle at 92% 0%,rgba(18,230,173,.12),transparent 36%),
        linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
    box-shadow:0 22px 70px rgba(0,0,0,.24);
}

html[data-theme="dark"] .sym-contacts-v986 h1,
html[data-theme="dark"] .sym-contacts-v986__badge b,
html[data-theme="dark"] .sym-contacts-v986__mini b,
html[data-theme="dark"] .sym-contacts-v986__form .ff-el-input--label label,
html[data-theme="dark"] .sym-contacts-v986__form label{
    color:#f3f7ff!important;
}

html[data-theme="dark"] .sym-contacts-v986 p,
html[data-theme="dark"] .sym-contacts-v986__mini span{
    color:rgba(243,247,255,.68);
}

html[data-theme="dark"] .sym-contacts-v986__badge,
html[data-theme="dark"] .sym-contacts-v986__mini{
    border-color:rgba(255,255,255,.09);
    background:rgba(255,255,255,.055);
}

html[data-theme="dark"] .sym-contacts-v986__form .ff-el-form-control,
html[data-theme="dark"] .sym-contacts-v986__form input[type=email],
html[data-theme="dark"] .sym-contacts-v986__form input[type=text],
html[data-theme="dark"] .sym-contacts-v986__form textarea,
html[data-theme="dark"] .sym-contacts-v986__form select{
    border-color:rgba(255,255,255,.14)!important;
    background:rgba(255,255,255,.08)!important;
    color:#f3f7ff!important;
}

@media(max-width:860px){
    .sym-contacts-v986{
        width:min(100% - 24px,720px);
    }

    .sym-contacts-v986__hero,
    .sym-contacts-v986__layout{
        grid-template-columns:1fr;
    }

    .sym-contacts-v986__hero{
        padding:22px;
        border-radius:26px;
    }

    .sym-contacts-v986__badge{
        min-height:110px;
    }
}


/* Phase 9.8.7 — Contacts: wide horizontal rows */

.sym-contacts-v986{
    width:min(1480px,calc(100vw - 64px))!important;
    max-width:none!important;
    margin-top:clamp(10px,2.4vw,28px)!important;
}

.sym-contacts-v986__hero{
    grid-template-columns:minmax(0,1fr) minmax(240px,340px)!important;
    padding:clamp(26px,3.2vw,42px)!important;
}

.sym-contacts-v986 h1{
    max-width:760px;
}

.sym-contacts-v986 p{
    max-width:820px!important;
}

.sym-contacts-v986__badge{
    min-height:210px!important;
}

.sym-contacts-v986__layout{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    margin-top:18px!important;
}

.sym-contacts-v986__side{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
    padding:18px!important;
}

.sym-contacts-v986__mini{
    min-height:128px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.sym-contacts-v986__form{
    width:100%!important;
    padding:clamp(22px,2.8vw,36px)!important;
}

/* Make FluentForm occupy the full available row instead of looking like a narrow sidebar card. */
.sym-contacts-v986__form .fluentform,
.sym-contacts-v986__form form,
.sym-contacts-v986__form .frm-fluent-form,
.sym-contacts-v986__form .ff_form_instance_1{
    width:100%!important;
    max-width:none!important;
}

/* Build a comfortable editorial contact form layout without breaking FluentForm internals. */
.sym-contacts-v986__form form{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px 18px!important;
    align-items:start!important;
}

.sym-contacts-v986__form .ff-el-group{
    width:100%!important;
    margin-bottom:0!important;
}

.sym-contacts-v986__form .ff-el-group:has(textarea),
.sym-contacts-v986__form .ff_submit_btn_wrapper,
.sym-contacts-v986__form .ff-el-group:last-child{
    grid-column:1 / -1!important;
}

.sym-contacts-v986__form textarea{
    min-height:180px!important;
}

.sym-contacts-v986__form .ff-btn-submit,
.sym-contacts-v986__form button[type=submit],
.sym-contacts-v986__form input[type=submit]{
    min-width:min(320px,100%)!important;
}

/* If browser does not support :has, still make common textarea wrappers full-width via FluentForm classes. */
.sym-contacts-v986__form .ff-el-group.ff-el-form-top:has(textarea),
.sym-contacts-v986__form .ff-el-input--content textarea{
    width:100%!important;
}

@media(max-width:980px){
    .sym-contacts-v986{
        width:min(100% - 28px,820px)!important;
    }

    .sym-contacts-v986__hero{
        grid-template-columns:1fr!important;
    }

    .sym-contacts-v986__badge{
        min-height:120px!important;
    }

    .sym-contacts-v986__side,
    .sym-contacts-v986__form form{
        grid-template-columns:1fr!important;
    }
}

@media(max-width:560px){
    .sym-contacts-v986{
        width:min(100% - 20px,520px)!important;
    }

    .sym-contacts-v986__hero,
    .sym-contacts-v986__form,
    .sym-contacts-v986__side{
        padding:16px!important;
        border-radius:22px!important;
    }
}