/* =========================================================
   SIBSOKNSK — ABOUT + CONTACTS V1
   ========================================================= */


/* ABOUT */

.company-hero,
.contacts-hero {
    min-height: 78vh;
    padding: 210px 0 105px;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(197,160,99,.15),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #090a0b,
            #151618 70%,
            #0c0d0e
        );
}

.company-hero::after,
.contacts-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .22;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(255,255,255,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );
    background-size: 110px 110px;
}

.company-hero-grid,
.contacts-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        1.25fr .75fr;
    gap: 110px;
    align-items: end;
}

.company-hero h1,
.contacts-hero h1 {
    margin: 28px 0 0;
    font-size:
        clamp(65px,8vw,125px);
    font-weight: 500;
    line-height: .89;
    letter-spacing: -.06em;
}

.company-hero h1 span,
.contacts-hero h1 span,
.company-directions h2 span {
    color: var(--gold-light);
}

.company-hero-copy {
    max-width: 500px;
}

.company-hero-copy p {
    color: #aaa69f;
    font-size: 18px;
    line-height: 1.7;
}

.company-principles {
    padding: 135px 0;
    background: #ece7de;
    color: #151617;
}

.company-section-heading {
    display: grid;
    grid-template-columns:
        .35fr 1.65fr;
    gap: 70px;
    margin-bottom: 80px;
}

.company-section-heading .eyebrow,
.company-principles .eyebrow {
    color: #806d4e;
}

.company-section-heading h2 {
    margin: 0;
    font-size:
        clamp(48px,6vw,88px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.05em;
}

.principles-grid {
    display: grid;
    grid-template-columns:
        repeat(3,1fr);
    border-top:
        1px solid rgba(0,0,0,.18);
    border-left:
        1px solid rgba(0,0,0,.18);
}

.principles-grid article {
    min-height: 370px;
    padding: 36px;
    display: flex;
    flex-direction: column;
    border-right:
        1px solid rgba(0,0,0,.18);
    border-bottom:
        1px solid rgba(0,0,0,.18);
}

.principles-grid article > span {
    color: #806d4e;
    font-size: 11px;
    letter-spacing: .16em;
}

.principles-grid h3 {
    margin: auto 0 20px;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -.03em;
}

.principles-grid p {
    margin: 0;
    color: #69645d;
    line-height: 1.65;
}

.company-directions {
    padding: 140px 0;
    background: #101113;
}

.company-directions-grid {
    display: grid;
    grid-template-columns:
        1.35fr .65fr;
    gap: 110px;
    align-items: end;
}

.company-directions h2 {
    margin: 25px 0 0;
    font-size:
        clamp(50px,7vw,100px);
    font-weight: 500;
    line-height: .95;
    letter-spacing: -.055em;
}

.company-directions-copy {
    max-width: 440px;
}

.company-directions-copy p {
    color: #aaa69f;
    line-height: 1.75;
    margin-bottom: 30px;
}

.company-cta {
    padding: 120px 0;
    background: var(--gold-light);
    color: #111214;
}

.company-cta .eyebrow {
    color: #665130;
}

.company-cta-grid {
    display: grid;
    grid-template-columns:
        1.3fr .7fr;
    gap: 100px;
    align-items: end;
}

.company-cta h2 {
    margin: 20px 0 0;
    font-size:
        clamp(50px,7vw,100px);
    line-height: .95;
    font-weight: 500;
    letter-spacing: -.055em;
}

.company-cta-grid > div:last-child {
    max-width: 430px;
}

.company-cta p {
    color: #584c3b;
    line-height: 1.7;
}

.company-cta .button-primary {
    margin-top: 20px;
    background: #111214;
    color: #fff;
}


/* CONTACTS */

.contacts-hero-side {
    max-width: 460px;
}

.contacts-label {
    display: block;
    margin-bottom: 18px;
    color: var(--gold-light);
    font-size: 10px;
    letter-spacing: .2em;
}

.contacts-hero-side strong {
    display: block;
    margin-bottom: 25px;
    font-size: 35px;
    font-weight: 500;
}

.contacts-hero-side p {
    color: #aaa69f;
    line-height: 1.7;
}

.contacts-form-section {
    padding: 135px 0;
    background: #ece7de;
    color: #151617;
}

.contacts-form-grid {
    display: grid;
    grid-template-columns:
        .75fr 1.25fr;
    gap: 110px;
}

.contacts-form-heading .eyebrow {
    color: #806d4e;
}

.contacts-form-heading h2 {
    margin: 25px 0;
    font-size:
        clamp(43px,5vw,72px);
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.05em;
}

.contacts-form-heading > p {
    color: #6b665f;
}

.contact-form-panel {
    max-width: 820px;
}

.sibsok-contact-form {
    display: grid;
    gap: 30px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.sibsok-contact-form label {
    display: grid;
    gap: 10px;
}

.sibsok-contact-form label > span {
    color: #59554f;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sibsok-contact-form input[type="text"],
.sibsok-contact-form input[type="tel"],
.sibsok-contact-form select,
.sibsok-contact-form textarea {
    width: 100%;
    border: 0;
    border-bottom:
        1px solid rgba(0,0,0,.3);
    border-radius: 0;
    padding: 15px 0;
    background: transparent;
    color: #151617;
    font: inherit;
    outline: none;
    transition:
        border-color .2s ease;
}

.sibsok-contact-form input:focus,
.sibsok-contact-form select:focus,
.sibsok-contact-form textarea:focus {
    border-color: #886f47;
}

.form-message:focus {
    outline: 2px solid #886f47;
    outline-offset: 4px;
}

.sibsok-contact-form textarea {
    resize: vertical;
    min-height: 145px;
}

.form-consent {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    gap: 13px !important;
    max-width: 630px;
}

.form-consent input {
    margin-top: 3px;
}

.form-consent span {
    text-transform: none !important;
    line-height: 1.5;
}

.contact-submit {
    width: max-content;
    min-width: 220px;
    border: 0;
    cursor: pointer;
}

.form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.form-message {
    margin-bottom: 35px;
    padding: 20px 24px;
    border: 1px solid;
    line-height: 1.55;
}

.form-success {
    border-color:
        rgba(71,110,70,.45);
    background:
        rgba(71,110,70,.08);
}

.form-error {
    border-color:
        rgba(140,75,63,.4);
    background:
        rgba(140,75,63,.07);
}

.contacts-bottom {
    padding: 55px 0;
    background: #111214;
}

.contacts-bottom-grid {
    display: grid;
    grid-template-columns:
        1fr 1fr 1fr;
    gap: 40px;
    color: #77746e;
    font-size: 12px;
}

.contacts-bottom-grid > span {
    color: var(--gold-light);
    letter-spacing: .15em;
}

.contacts-bottom-grid p {
    margin: 0;
}

.contacts-bottom-grid strong {
    justify-self: end;
    color: #aaa69f;
    font-weight: 400;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .company-hero,
    .contacts-hero {
        min-height: auto;
        padding: 170px 0 85px;
    }

    .company-hero-grid,
    .contacts-hero-grid,
    .company-directions-grid,
    .company-cta-grid,
    .contacts-form-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .company-section-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .principles-grid {
        grid-template-columns: 1fr;
    }

    .principles-grid article {
        min-height: 270px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contacts-bottom-grid {
        grid-template-columns: 1fr;
    }

    .contacts-bottom-grid strong {
        justify-self: start;
    }

}

@media (max-width: 560px) {

    .company-hero h1,
    .contacts-hero h1 {
        font-size:
            clamp(55px,16vw,82px);
    }

    .company-principles,
    .company-directions,
    .contacts-form-section {
        padding: 90px 0;
    }

}