/* ==========================================================================
   ABOUT — dark editorial panel
   Used by Views/Home/About.cshtml.
   Photograph on the left, story on the right. Colours deliberately match the
   Gallery and Portfolio pages so the whole dark side of the site reads as one
   piece of work.
   ========================================================================== */

.pxsnap_about {
    background-color: #121212;
}

/* Breathing room inside the scrolling right-hand panel. */
.pxsnap_about_in {
    padding: 110px 80px 90px 80px;
}

/* --- heading -------------------------------------------------------------- */

.ab_head {
    margin-bottom: 46px;
}
.ab_eyebrow {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #9db9d2;
    margin-bottom: 22px;
}
.ab_head h1 {
    margin: 0;
    font-size: 52px;
    line-height: 1.15;
    letter-spacing: 0;
    font-weight: 400;
    color: #fff;
    max-width: 16ch;
}

/* --- story ---------------------------------------------------------------- */

.pxsnap_about .info_holder {
    margin-bottom: 44px;
}
.pxsnap_about .info_holder p {
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0;
    color: #93a7b8;
    margin-bottom: 24px;
}
.pxsnap_about .info_holder p:last-child {
    margin-bottom: 0;
}

/* --- call to action ------------------------------------------------------- */

.ab_cta {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #9db9d2;
    text-decoration: none;
    padding-bottom: 8px;
    border-bottom: 1px solid #9db9d2;
    transition: color .4s ease, border-color .4s ease;
}
.ab_cta:hover,
.ab_cta:focus-visible {
    color: #fff;
    border-bottom-color: #fff;
}

.ab_rule {
    height: 1px;
    background: rgba(255, 255, 255, 0.10);
    margin: 54px 0 34px 0;
}

/* --- social icons on the dark panel --------------------------------------- */

.pxsnap_about .pxsnap_social_icons {
    margin-bottom: 0;
}
.pxsnap_about .pxsnap_social_icons > label {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
}
.pxsnap_about .pxsnap_social_icons > ul > li a {
    color: rgba(255, 255, 255, 0.65);
}
.pxsnap_about .pxsnap_social_icons > ul > li a:hover,
.pxsnap_about .pxsnap_social_icons > ul > li a:focus-visible {
    background-color: rgba(255, 255, 255, 0.10);
    color: #fff;
}

/* --- smaller screens ------------------------------------------------------ */

@media (max-width: 1200px) {
    .pxsnap_about_in {
        padding: 80px 50px 70px 50px;
    }
    .ab_head h1 {
        font-size: 44px;
    }
}

@media (max-width: 1024px) {
    .pxsnap_about_in {
        padding: 70px 30px 60px 30px;
    }
}

@media (max-width: 768px) {
    .pxsnap_about_in {
        padding: 56px 20px 50px 20px;
    }
    .ab_head {
        margin-bottom: 34px;
    }
    .ab_head h1 {
        font-size: 40px;
        max-width: none;
    }
    .pxsnap_about .info_holder p {
        font-size: 15px;
        line-height: 1.75;
    }
}