/* =========================================================
   UBUNTU LTD
   CONTACT PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.u-contact-hero {
    position: relative;

    min-height: 680px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background:
        url("../img/women_nursery.jpg")
        center 42%
        / cover
        no-repeat;
}


.u-contact-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(19,35,26,.08) 0%,
            rgba(19,35,26,.24) 40%,
            rgba(19,35,26,.93) 100%
        );
}


.u-contact-hero-inner {
    position: relative;
    z-index: 2;

    width: 100%;

    padding-top: 180px;

    padding-bottom:
        clamp(
            65px,
            8vw,
            105px
        );

    color: #fff;
}


.u-contact-eyebrow {
    margin:
        0 0 1rem;

    color:
        var(--amber-soft);

    font-size:
        .74rem;

    font-weight:
        700;

    letter-spacing:
        .18em;
}


.u-contact-hero h1 {
    max-width:
        900px;

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            3.2rem,
            7vw,
            6.7rem
        );

    font-weight:
        400;

    line-height:
        .95;

    letter-spacing:
        -.045em;
}


.u-contact-hero-copy {
    max-width:
        650px;

    margin:
        1.7rem 0 0;

    color:
        rgba(255,255,255,.76);

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.18rem
        );

    line-height:
        1.7;
}


/* =========================================================
   INTRO
========================================================= */

.u-contact-intro {
    padding-block:
        clamp(
            80px,
            10vw,
            145px
        );

    background:
        var(--paper);
}


.u-contact-intro-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0,.85fr)
        minmax(0,1.15fr);

    gap:
        clamp(
            50px,
            8vw,
            125px
        );

    align-items:
        start;
}


.u-contact-intro-copy h2 {
    max-width:
        10ch;

    margin-bottom:
        1.4rem;

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.8rem
        );
}


.u-contact-lede {
    color:
        var(--ink);

    font-size:
        clamp(
            1.08rem,
            1.6vw,
            1.28rem
        );

    line-height:
        1.7;
}


.u-contact-intro-copy > p {
    max-width:
        55ch;
}


/* =========================================================
   ENQUIRY ROUTES
========================================================= */

.u-contact-routes {
    border-top:
        1px solid
        var(--line);
}


.u-contact-route {
    display:
        grid;

    grid-template-columns:
        60px
        minmax(0,1fr);

    gap:
        24px;

    padding:
        27px 0;

    border-bottom:
        1px solid
        var(--line);
}


.u-contact-route > span {
    color:
        var(--clay);

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .14em;
}


.u-contact-route h3 {
    margin:
        0 0 .45rem;

    font-size:
        1.35rem;
}


.u-contact-route p {
    max-width:
        55ch;

    margin: 0;

    color:
        var(--ink-60);

    font-size:
        .9rem;

    line-height:
        1.65;
}


/* =========================================================
   FORM SECTION
========================================================= */

.u-contact-form-section {
    padding-block:
        clamp(
            80px,
            10vw,
            145px
        );

    background:
        var(--husk-2);
}


.u-contact-form-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0,.72fr)
        minmax(0,1.28fr);

    gap:
        clamp(
            50px,
            8vw,
            120px
        );

    align-items:
        start;
}


.u-contact-form-intro {
    position:
        sticky;

    top:
        115px;
}


.u-contact-form-intro h2 {
    max-width:
        9ch;

    margin-bottom:
        1.3rem;

    font-size:
        clamp(
            2.5rem,
            4.7vw,
            4.5rem
        );
}


.u-contact-form-intro > p:not(.kicker) {
    max-width:
        50ch;

    color:
        var(--ink-60);
}


.u-contact-email {
    margin-top:
        3rem;

    padding-top:
        1.5rem;

    border-top:
        1px solid
        var(--line);
}


.u-contact-email span {
    display:
        block;

    margin-bottom:
        .5rem;

    color:
        var(--leaf);

    font-size:
        .68rem;

    font-weight:
        700;

    letter-spacing:
        .15em;
}


.u-contact-email a {
    color:
        var(--ink);

    font-family:
        var(--serif);

    font-size:
        clamp(
            1.3rem,
            2vw,
            1.8rem
        );

    text-decoration:
        none;

    word-break:
        break-word;
}


/* =========================================================
   FORM
========================================================= */

.u-contact-form-wrap {
    padding:
        clamp(
            28px,
            5vw,
            58px
        );

    background:
        var(--paper);
}


.u-contact-form {
    display:
        grid;

    gap:
        24px;
}


.u-form-row {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        18px;
}


.u-field {
    display:
        grid;

    gap:
        8px;
}


.u-field label {
    color:
        var(--ink);

    font-size:
        .78rem;

    font-weight:
        700;

    letter-spacing:
        .04em;
}


.u-field label span {
    color:
        var(--clay);
}


.u-field input,
.u-field select,
.u-field textarea {
    width:
        100%;

    min-width:
        0;

    padding:
        .9rem 1rem;

    border:
        1.5px solid
        var(--line);

    border-radius:
        0;

    outline:
        0;

    background:
        #fff;

    color:
        var(--ink);

    font:
        inherit;

    transition:
        border-color .25s,
        box-shadow .25s;
}


.u-field input,
.u-field select {
    min-height:
        50px;
}


.u-field textarea {
    min-height:
        190px;

    resize:
        vertical;
}


.u-field input:focus,
.u-field select:focus,
.u-field textarea:focus {
    border-color:
        var(--leaf);

    box-shadow:
        0 0 0 3px
        rgba(94,124,65,.1);
}


.u-contact-submit-row {
    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    padding-top:
        6px;
}


.u-contact-submit-row > p {
    max-width:
        50ch;

    margin:
        0;

    color:
        var(--ink-60);

    font-size:
        .73rem;

    line-height:
        1.55;
}


.u-contact-honeypot {
    position:
        absolute !important;

    left:
        -99999px !important;

    width:
        1px !important;

    height:
        1px !important;

    overflow:
        hidden !important;
}


/* =========================================================
   ALERTS
========================================================= */

.u-contact-alert {
    margin-bottom:
        28px;

    padding:
        18px 20px;

    font-size:
        .9rem;

    line-height:
        1.6;
}


.u-contact-alert p {
    margin:
        .35rem 0 0;
}


.u-contact-success {
    border-left:
        4px solid
        var(--leaf);

    background:
        rgba(94,124,65,.1);

    color:
        var(--ink);
}


.u-contact-error {
    border-left:
        4px solid
        var(--clay);

    background:
        rgba(169,65,42,.09);

    color:
        var(--clay);
}


/* =========================================================
   LOCATIONS
========================================================= */

.u-contact-locations {
    padding-block:
        clamp(
            80px,
            10vw,
            145px
        );

    background:
        var(--paper);
}


.u-contact-locations-head {
    max-width:
        850px;

    margin-bottom:
        clamp(
            40px,
            6vw,
            70px
        );
}


.u-contact-locations-head h2 {
    max-width:
        14ch;

    font-size:
        clamp(
            2.6rem,
            5vw,
            4.8rem
        );
}


.u-location-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        20px;
}


.u-location-card {
    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    min-height:
        430px;

    background:
        var(--husk);
}


.u-location-map {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        var(--bark-2);

    color:
        var(--husk);

    text-align:
        center;
}


.u-location-map::before,
.u-location-map::after {
    content:
        "";

    position:
        absolute;

    border:
        1px solid
        rgba(227,166,44,.24);

    border-radius:
        50%;
}


.u-location-map::before {
    width:
        270px;

    height:
        270px;
}


.u-location-map::after {
    width:
        185px;

    height:
        185px;
}


.u-location-map-kenya {
    background:
        var(--leaf);
}


.u-location-map span,
.u-location-map strong {
    position:
        relative;

    z-index:
        2;
}


.u-location-map span {
    margin-bottom:
        .5rem;

    color:
        var(--amber-soft);

    font-size:
        .67rem;

    font-weight:
        700;

    letter-spacing:
        .17em;
}


.u-location-map strong {
    font-family:
        var(--serif);

    font-size:
        clamp(
            2rem,
            4vw,
            3.6rem
        );

    font-weight:
        400;
}


.u-location-content {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    padding:
        clamp(
            28px,
            4vw,
            48px
        );
}


.u-location-label {
    margin:
        0 0 .45rem;

    color:
        var(--leaf);

    font-size:
        .68rem;

    font-weight:
        700;

    letter-spacing:
        .15em;
}


.u-location-content h3 {
    margin:
        0 0 .8rem;

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.8rem
        );
}


.u-location-content > p:last-child {
    margin:
        0;

    color:
        var(--ink-60);

    font-size:
        .9rem;

    line-height:
        1.65;
}


/* =========================================================
   WHAT HAPPENS NEXT
========================================================= */

.u-contact-expect {
    padding-block:
        clamp(
            80px,
            10vw,
            140px
        );

    background:
        var(--bark);

    color:
        var(--husk);
}


.u-contact-expect-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1.2fr);

    gap:
        clamp(
            50px,
            8vw,
            120px
        );
}


.u-contact-expect
.kicker {
    color:
        var(--amber-soft);
}


.u-contact-expect h2 {
    max-width:
        11ch;

    color:
        #fff;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.8rem
        );
}


.u-contact-expect-list {
    border-top:
        1px solid
        var(--line-dark);
}


.u-contact-expect-list > div {
    display:
        grid;

    grid-template-columns:
        65px
        minmax(0,1fr);

    gap:
        22px;

    padding:
        25px 0;

    border-bottom:
        1px solid
        var(--line-dark);
}


.u-contact-expect-list span {
    color:
        var(--amber);

    font-size:
        .7rem;

    font-weight:
        700;

    letter-spacing:
        .14em;
}


.u-contact-expect-list p {
    max-width:
        56ch;

    margin: 0;

    color:
        rgba(235,237,228,.7);

    line-height:
        1.7;
}


/* =========================================================
   CTA
   DIFFERENT FROM DARK FOOTER
========================================================= */

.u-contact-cta {
    padding-block:
        clamp(
            80px,
            10vw,
            135px
        );

    background:
        var(--leaf);

    color:
        var(--husk);
}


.u-contact-cta-inner {
    max-width:
        850px;
}


.u-contact-cta
.kicker {
    color:
        var(--amber-soft);
}


.u-contact-cta h2 {
    max-width:
        11ch;

    margin-bottom:
        1rem;

    color:
        #fff;

    font-size:
        clamp(
            2.6rem,
            5vw,
            5rem
        );
}


.u-contact-cta-inner > p:not(.kicker) {
    max-width:
        52ch;

    margin-bottom:
        2rem;

    color:
        rgba(255,255,255,.72);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .u-contact-intro-grid,
    .u-contact-form-grid,
    .u-contact-expect-grid {
        grid-template-columns:
            1fr;
    }


    .u-contact-form-intro {
        position:
            static;
    }


    .u-location-card {
        grid-template-columns:
            1fr;
    }


    .u-location-map {
        min-height:
            310px;
    }

}


@media (max-width: 800px) {

    .u-location-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 620px) {

    .u-contact-hero {
        min-height:
            590px;
    }


    .u-contact-hero h1 {
        font-size:
            clamp(
                3rem,
                14vw,
                4.7rem
            );
    }


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


    .u-contact-form-wrap {
        padding:
            26px 20px;
    }


    .u-contact-submit-row {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .u-contact-route {
        grid-template-columns:
            42px
            minmax(0,1fr);
    }


    .u-contact-expect-list > div {
        grid-template-columns:
            42px
            minmax(0,1fr);
    }

}



/* =========================================================
   OFFICIAL CONTACT DETAILS
========================================================= */

.u-contact-details {
    padding-block:
        clamp(78px, 9vw, 135px);

    background:
        var(--husk);
}


.u-contact-details-head {
    margin-bottom:
        clamp(38px, 5vw, 65px);
}


.u-contact-details-head h2 {
    max-width: 12ch;

    font-size:
        clamp(2.5rem, 4.8vw, 4.6rem);
}


.u-contact-details-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid var(--line);
}


.u-contact-detail {
    position: relative;

    min-height: 390px;

    padding:
        30px
        clamp(18px, 2.3vw, 32px);

    border-right:
        1px solid var(--line);
}


.u-contact-detail:first-child {
    padding-left: 0;
}


.u-contact-detail:last-child {
    border-right: 0;
}


.u-contact-detail-number {
    display: block;

    margin-bottom: 3rem;

    color:
        var(--clay);

    font-size: .69rem;

    font-weight: 700;

    letter-spacing: .15em;
}


.u-contact-detail-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    margin-bottom: 2.2rem;

    border:
        1px solid var(--line);

    border-radius: 50%;

    color:
        var(--leaf);
}


.u-contact-detail-icon svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.u-contact-detail-label {
    margin:
        0 0 .6rem;

    color:
        var(--leaf);

    font-size: .67rem;

    font-weight: 700;

    letter-spacing: .14em;
}


.u-contact-detail h3 {
    margin:
        0 0 .85rem;

    font-size:
        1.35rem;
}


.u-contact-detail > p:last-child {
    margin: 0;

    color:
        var(--ink-60);

    font-size: .9rem;

    line-height: 1.7;
}


.u-contact-detail > a {
    display: block;

    margin-bottom: .55rem;

    color:
        var(--ink);

    font-size:
        .94rem;

    font-weight: 600;

    line-height: 1.5;

    text-decoration: none;

    overflow-wrap: anywhere;
}


.u-contact-detail > a:hover {
    color:
        var(--clay);
}


/* Location contact links */

.u-location-content a {
    color: inherit;

    text-decoration: none;
}


.u-location-content a:hover {
    color:
        var(--clay);
}


/* =========================================================
   CONTACT DETAILS RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .u-contact-details-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .u-contact-detail {
        border-bottom:
            1px solid var(--line);
    }

}


@media (max-width: 620px) {

    .u-contact-details-grid {
        grid-template-columns:
            1fr;
    }


    .u-contact-detail {
        min-height: 0;

        padding:
            30px 0;

        border-right: 0;
    }


    .u-contact-detail-number {
        margin-bottom: 1.8rem;
    }


    .u-contact-detail-icon {
        margin-bottom: 1.5rem;
    }

}







/* =========================================================
   CONTACT TYPOGRAPHY REFINEMENT
========================================================= */


/* =========================================================
   HERO
   Smaller heading + single line on desktop
========================================================= */

.ubuntu-contact-page
.u-contact-hero-inner {
    width: 100%;
    max-width: none;
}


.ubuntu-contact-page
.u-contact-hero h1 {
    width: 100%;
    max-width: none;

    margin: 0;

    font-size:
        clamp(
            2.8rem,
            4.2vw,
            4.4rem
        ) !important;

    line-height: .98;

    letter-spacing: -.045em;

    white-space: nowrap;
}



/* =========================================================
   TWO-COLUMN HEADINGS
   Keep them within their own column
========================================================= */

.ubuntu-contact-page
.u-contact-intro-copy h2,

.ubuntu-contact-page
.u-contact-form-intro h2 {
    max-width: 100%;

    font-size:
        clamp(
            2.25rem,
            3.7vw,
            3.7rem
        ) !important;

    line-height: 1;

    letter-spacing: -.04em;
}



/* =========================================================
   FULL-WIDTH SECTION HEADINGS
   These headings are NOT inside multi-column copy layouts
========================================================= */

.ubuntu-contact-page
.u-contact-details-head,

.ubuntu-contact-page
.u-contact-locations-head {
    width: 100%;
    max-width: none;
}


.ubuntu-contact-page
.u-contact-details-head h2,

.ubuntu-contact-page
.u-contact-locations-head h2 {
    width: 100%;
    max-width: none !important;

    margin-left: 0;
    margin-right: 0;

    font-size:
        clamp(
            2.5rem,
            4.3vw,
            4.4rem
        ) !important;

    line-height: .98;

    letter-spacing: -.045em;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .ubuntu-contact-page
    .u-contact-hero h1 {
        font-size:
            clamp(
                2.8rem,
                7vw,
                4.3rem
            ) !important;

        white-space: normal;
    }


    .ubuntu-contact-page
    .u-contact-intro-copy h2,

    .ubuntu-contact-page
    .u-contact-form-intro h2,

    .ubuntu-contact-page
    .u-contact-details-head h2,

    .ubuntu-contact-page
    .u-contact-locations-head h2 {
        font-size:
            clamp(
                2.4rem,
                6vw,
                3.7rem
            ) !important;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    .ubuntu-contact-page
    .u-contact-hero h1 {
        font-size:
            clamp(
                2.5rem,
                10vw,
                3.5rem
            ) !important;
    }


    .ubuntu-contact-page
    .u-contact-intro-copy h2,

    .ubuntu-contact-page
    .u-contact-form-intro h2,

    .ubuntu-contact-page
    .u-contact-details-head h2,

    .ubuntu-contact-page
    .u-contact-locations-head h2 {
        font-size:
            clamp(
                2.2rem,
                9vw,
                3.1rem
            ) !important;
    }

}