:root {
    --font-camber-semibold: "CamberSemibold", sans-serif;
    --font-camber-regular: "CamberRegular", sans-serif;
    --font-camber-light: "CamberLight", sans-serif;
    --color-egg-shell: #F9F9F9;
    --color-egg-shell-10: rgba(249, 249, 249, 0.1);
    --color-black: #000000;
    --color-blue: #005CFF;
}

/*
    START: RESET
    Josh's Custom CSS Reset (with customization)
    https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select, pre {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
    font: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    background: none;
    border: none;
}

#root, #__next {
    isolation: isolate;
}
/* END: RESET */

/* START: UTILS */
.bg-black {
    background-color: var(--color-black);
}

.pointer {
    cursor: pointer;
}

/* Grid System */
.d-grid {
    display: grid;
}

.grid-cols-12 {
    grid-template-columns: repeat(12, 1fr);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-rows-2 {
    grid-template-rows: repeat(2, 1fr);
}

.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

.gap-26 {
    gap: 26px;
}

.gap-30 {
    gap: 30px;
}

.gap-50 {
    gap: 50px;
}

.col-span-1 {
    grid-column: span 1 / span 1;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-7 {
    grid-column: span 7 / span 7;
}

.col-span-8 {
    grid-column: span 8 / span 8;
}

.col-span-9 {
    grid-column: span 9 / span 9;
}

.col-span-10 {
    grid-column: span 10 / span 10;
}

.col-span-11 {
    grid-column: span 11 / span 11;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.col-start-1 {
    grid-column-start: 1;
}

.col-start-2 {
    grid-column-start: 2;
}

.col-start-3 {
    grid-column-start: 3;
}

.col-start-4 {
    grid-column-start: 4;
}

.col-start-5 {
    grid-column-start: 5;
}

.col-start-6 {
    grid-column-start: 6;
}

.col-start-7 {
    grid-column-start: 7;
}

.col-start-8 {
    grid-column-start: 8;
}

.col-start-9 {
    grid-column-start: 9;
}

.col-start-10 {
    grid-column-start: 10;
}

.col-start-11 {
    grid-column-start: 11;
}

.col-start-12 {
    grid-column-start: 12;
}

/* Typography */
.text-light {
    font-family: var(--font-camber-light);
}

.text-regular {
    font-family: var(--font-camber-regular);
}

.text-semibold {
    font-family: var(--font-camber-semibold);
}

.text-14 {
    font-size: 14px;
}

.text-16 {
    font-size: 16px;
}

.text-18 {
    font-size: 18px;
}

.text-20 {
    font-size: 20px;
}

.text-24 {
    font-size: 24px;
}

.text-27 {
    font-size: 27px;
}

.text-32 {
    font-size: 32px;
}

.text-45 {
    font-size: 45px;
}

.text-62 {
    font-size: 62px;
}

.text-72 {
    font-size: 72px;
}

.text-egg-shell {
    color: var(--color-egg-shell);
}

.text-blue {
    color: var(--color-blue);
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.tracking-wide {
    letter-spacing: 1px;
}

.tracking-tight {
    letter-spacing: -1.65px;
}

/* Layout & Alignment */
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.items-start {
    align-items: start;
}

.items-center {
    align-items: center;
}

.items-end {
    align-items: end;
}

.justify-start {
    justify-content: start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: end;
}

.flex-col {
    flex-direction: column;
}

/* Spacing */
.mt-20 {
    margin-top: 20px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-60 {
    margin-top: 60px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-80 {
    margin-bottom: 80px;
}

.py-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.py-100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Object */
.object-cover {
    object-fit: cover;
}

@media (max-width: 768px) {
    /* Grid System */
    .md\:grid-cols-1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .md\:grid-rows-2 {
        grid-template-rows: repeat(2, 1fr);
    }

    .md\:gap-16 {
        gap: 16px;
    }

    .md\:gap-50 {
        gap: 50px;
    }

    .md\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .md\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .md\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .md\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .md\:col-start-1 {
        grid-column-start: 1;
    }

    .md\:col-start-2 {
        grid-column-start: 2;
    }

    .md\:col-start-4 {
        grid-column-start: 4;
    }

    .md\:order-1 {
        order: 1;
    }

    .md\:order-2 {
        order: 2;
    }

    /* Typography */
    .md\:text-13 {
        font-size: 13px;
    }
    
    .md\:text-27 {
        font-size: 27px;
    }

    .md\:text-left {
        text-align: left;
    }

    .md\:text-right {
        text-align: right;
    }

    /* Spacing */
    .md\:mb-16 {
        margin-bottom: 16px;
    }

    .md\:mb-30 {
        margin-bottom: 30px;
    }

    /* Layout & Alignment */
    .md\:max-w-3\/4 {
        max-width: 75%;
    }

    .md\:justify-items-end {
        justify-items: end;
    }
}

/* END: UTILS */

/* START: NAVBAR */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    padding: 20px 0;
}

.navbar__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar__logo {
    width: 84px;
    height: 32px;
}

.navbar__menu {
    display: flex;
    gap: 60px;

    @media (max-width: 768px) {
        display: none;
    }
}

.navbar__link {
    font: 16px/1.2 var(--font-camber-regular);
    color: var(--color-egg-shell);
}

.hamburger {
    display: none;

    @media (max-width: 768px) {
        display: flex;
        padding: 8px 0;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        width: 28px;
        height: 28px;
    }
}
.bar {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--color-egg-shell);
    border-radius: 2px;
}
/* END: NAVBAR */

/* START: FOOTER */
.footer {
    padding: 80px 0;
    background-color: var(--color-blue);

    @media (max-width: 768px) {
        padding-top: 40px;
        padding-bottom: 20px;
    }
}

.footer__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 40px;
}

.footer__grid {
    display: grid;
    grid-template-areas:
        "header menu"
        "logo social";
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: 30px;

    @media (max-width: 768px) {
        grid-template-areas:
            "menu menu"
            "header header"
            "logo social";
        grid-template-columns: repeat(2, auto);
        gap: 25px;
    }
}

.footer__header {
    grid-area: header;
}

.footer__menu {
    grid-area: menu;
    justify-self: end;
    display: flex;
    flex-direction: column;
    gap: 20px;

    @media (max-width: 768px) {
        justify-self: start;
        padding-bottom: 40px;
    }
}

.footer__link {
    font: 24px/1.2 var(--font-camber-regular);
    color: var(--color-egg-shell);

    @media (max-width: 768px) {
        font-size: 22px;
    }
}

.footer__logo {
    grid-area: logo;
    align-self: end;
    max-width: 300px;

    @media (max-width: 768px) {
        align-self: start;
        max-width: 125px;
    }
}

.footer__social {
    grid-area: social;
    justify-self: end;
    align-self: end;
    display: flex;
    gap: 20px;

    @media (max-width: 768px) {
        justify-self: start;
        align-self: start;
        flex-direction: column;
        gap: 5px;
    }
}

.footer__social-link {
    font: 16px/1.2 var(--font-camber-light);
    color: var(--color-egg-shell);

    span {
        
        font-family: var(--font-camber-regular);
    }

    @media (max-width: 768px) {
        font-size: 12px;
    }
}
/* END: FOOTER */

/* START: MAIN */
.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 40px;

    @media (max-width: 768px) {
        padding: 0 20px;
    }
}

.container--service-detail {
    padding: 0;
    margin-bottom: 160px;
}

.banner-title {
    font: 62px/1.2 var(--font-camber-regular);
    color: var(--color-egg-shell);
}

.content-title {
    font: 72px/1.2 var(--font-camber-regular);
    color: var(--color-egg-shell);

    span {
        color: var(--color-blue);
    }
    
    @media (max-width: 768px) {
        font-size: 36px;
    }
}

.content-tag {
    font: 16px/1.2 var(--font-camber-regular);
    color: var(--color-egg-shell);

    span:first-child {
        margin-right: 30px;
    }

    span:last-child {
        margin-left: 30px;
    }

    @media (max-width: 768px) {
        font-size: 12px;

        span:first-child {
            margin-right: 15px;
        }

        span:last-child {
            margin-left: 15px;
        }
    }
}
/* END: MAIN */

/* START: HOMEPAGE */
.what-we-do {
    padding: 80px 0;
}

.what-we-do__header {
    display: flex;
    flex-direction: column;
    gap: 10px;

    @media (max-width: 768px) {
        gap: 20px;
    }
}

.what-we-do__content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 75%;
    margin: 0 0 0 auto;
    padding: 60px 0;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        margin-left: 0;
        max-width: 100%;
    }
}

.what-we-do__text {
    display: flex;
    flex-direction: column;
    gap: 40px;
    
    h3 {
        font: 18px/1.2 var(--font-camber-semibold);
        color: var(--color-egg-shell);
    }

    p {
        font: 18px/1.5 var(--font-camber-light);
        color: var(--color-egg-shell);
        max-width: 370px;
    }

    @media (max-width: 768px) {
        order: 1;
        padding-bottom: 50px;

        h3 {
            font-size: 13px;
        }

        p {
            font-size: 13px;
            line-height: 1.7;
        }
    }
}

.what-we-do__img-container,
.what-we-do__video-container {
    position: relative;
    overflow: hidden;

    &:hover {
        .what-we-do__img {
            transform: scale(1.1);
        }

        .what-we-do__caption {
            opacity: 1;
        }
    }

    @media (max-width: 768px) {
        &:first-child {
            order: 2;
        }

        &:last-child {
            order: 4;
        }
    }
}

.what-we-do__video-container {
    &:hover {
        video {
            transform: scale(1.1);
        }
    }

    video {
        display: block;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }

    @media (max-width: 768px) {
        order: 3;
    }
}

.what-we-do__caption {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    
    &::before {
        /* overlay */
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 2;
    }
}

.what-we-do__caption-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background-color: var(--color-blue);
    clip-path: polygon(
        0% 0%,
        calc(100% - 65px) 0%,
        100% 35px,
        100% 100%,
        65px 100%,
        0% calc(100% - 35px)
    );
    padding: 30px 20px 20px 30px;

    h3 {
        font: 62px/1.2 var(--font-camber-regular);
        color: var(--color-egg-shell);
    }

    p {
        font: 14px/1.5 var(--font-camber-regular);
        color: var(--color-egg-shell);
        max-width: 95%;
        margin-left: auto;
    }

    span:first-child {
        margin-right: 15px;
    }

    span:last-child {
        margin-left: 15px;
    }

    @media (max-width: 768px) {
        padding: 15px 10px 10px 15px;
        clip-path: polygon(
            0% 0%,
            calc(100% - 40px) 0%,
            100% 20px,
            100% 100%,
            40px 100%,
            0% calc(100% - 20px)
        );

        h3 {
            font-size: 32px;
        }

        p {
            font-size: 10px;
        }

        span:first-child {
            margin-right: 2px;
        }

        span:last-child {
            margin-left: 2px;
        }
    }
}

.what-we-do__img {
    transition: transform 0.3s ease;

    img {
        height: auto;
    }
}

.stats {
    padding: 80px 0;
    position: relative;

    @media (max-width: 768px) {
        padding-top: 0;
    }
}

.stats__overlay-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.stats__overlay {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #000000 0%, #005CFF 100%);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;

    @media (max-width: 768px) {
        display: none;
    }
}

.stats__container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-areas: 'content header';
    position: relative;
    z-index: 2;
    padding: 0;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        grid-template-areas: 'header' 'content';
    }
}

.stats__header {
    grid-area: header;
    padding-left: 20%;
    position: relative;

    @media (max-width: 768px) {
        padding: 0 20px;
    }
}

.stats__header-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: fit-content;
    position: sticky;
    top: 80px;

    h3 {
        font: 48px/1.2 var(--font-camber-regular);
        color: var(--color-egg-shell);
        max-width: 450px;
        
        span {
            color: var(--color-blue);
        }
    }

    p {
        font: 18px/1.5 var(--font-camber-light);
        color: var(--color-egg-shell);
    }

    @media (max-width: 768px) {
        position: static;

        h3 {
            font-size: 36px;
        }

        p {
            font-size: 13px;
        }
    }
}

.stats__content {
    grid-area: content;

    ul {
        list-style: none;
    }

    li {
        display: flex;
        align-items: end;
        gap: 10px;
        padding: 40px 50px 30px;
        border-top: 1px solid var(--color-egg-shell);

        &:last-child {
            border-bottom: 1px solid var(--color-egg-shell);
        }

        p:first-child {
            font: 120px/1.2 var(--font-camber-regular);
            color: var(--color-egg-shell);
            position: relative;

            sup {
                position: absolute;
                top: 0;
                right: 0;
                transform: translate(100%, -20%);
            }
        }

        p:last-child {
            font: 18px/1.5 var(--font-camber-light);
            color: var(--color-egg-shell);
            margin-bottom: 30px;
        }
    }

    @media (max-width: 768px) {
        margin-top: 40px;

        li {
            border-top: none;
            border-bottom: 1px solid var(--color-egg-shell);
            padding: 20px;
            margin-right: 20px;

            p:first-child {
                font-size: 97px;
            }

            p:last-child {
                font-size: 13px;
            }
        }
    }
}

.collab {
    padding-top: 15%;
    padding-left: 80px;
    padding-right: 80px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;

    .content-title:nth-child(3) {
        text-align: center;
    }

    @media (max-width: 768px) {
        gap: 0;
        padding-left: 20px;
        padding-right: 20px;

        .content-title {
            max-width: 307px;

            &:nth-child(2) {
                margin-top: 20px;
            }

            &:nth-child(3) {
                text-align: left;
            }
        }
    }
}

.collab--studio {
    padding-left: 40px;
    padding-right: 40px;

    @media (max-width: 768px) {
        padding-left: 0;
        padding-right: 0;
    }
}

.collab__img {
    position: absolute;
    bottom: 0;
    right: 7%;
    z-index: 1;

    img {
        max-width: 106px;
        max-height: 106px;
    }

    @media (max-width: 768px) {
        right: 5%;

        img {
            max-width: 64px;
            max-height: 64px;
        }
    }
}
/* END: HOMEPAGE */

/* START: ABOUT */
.about-banner {
    padding: 50px 0 20%;

    @media (max-width: 768px) {
        padding-top: 40px;
        padding-bottom: 40%;
    }
}

.about-banner__container {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    @media (max-width: 768px) {
        flex-direction: column;
        justify-content: flex-start;
        gap: 60px;
    }
}

.about-banner__header {
    display: flex;
    flex-direction: column;

    .content-tag {
        margin-top: 20px;
    }

    .content-title {
        font-size: 62px;
        max-width: 460px;
        margin-top: 50%;
    }

    .content-title--no-max-width {
        max-width: none;
    }

    @media (max-width: 768px) {
        .content-tag {
            margin-top: 0;
        }

        .content-title {
            font-size: 36px;
            max-width: 100%;
            margin-top: 30px;
        }
    }
}

.about-banner__img-container {
    @media (max-width: 768px) {
        align-self: end;
    }
}
    

.about-banner__img img {
    height: auto;
}

.brands {
    position: relative;

    &::before {
        content: '';
        position: absolute;
        top: -50%;
        right: 0;
        width: 100%;
        max-width: 460px;
        height: 710px;
        background-image: url("/static/img/gradient-pattern-right.webp");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        z-index: -1;
    }

    @media (max-width: 768px) {
        &::before {
            top: -20%;
            height: 363px;
            max-width: 236px;
            background-image: url("/static/img/gradient-pattern-right-mobile.webp");
        }
    }
}

.brands__header {
    display: flex;
    flex-direction: column;
    gap: 25px;

    @media (max-width: 768px) {
        gap: 30px;
    }
}

.brands__grid-wrapper {
    overflow: hidden;
    margin: 60px auto;

    @media (max-width: 768px) {
        margin-top: 40px;
    }
}

.brands__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(165px, 1fr));
    margin-top: -2px;
    margin-left: -2px;

    @media (max-width: 1280px) {
        grid-template-columns: repeat(4, minmax(85px, 1fr));
    }
}

.brands__grid-item {
    background-color: transparent;
    border-top: 1px solid var(--color-egg-shell-10);
    border-left: 1px solid var(--color-egg-shell-10);
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 165px;

    @media (max-width: 768px) {
        min-height: 85px;
        padding: 0;

        img {
            max-width: 70px;
        }
    }
}

.our-team {
    position: relative;
    padding: 80px 0;

    &::before {
        content: '';
        position: absolute;
        top: -25%;
        left: 0;
        width: 100%;
        max-width: 460px;
        height: 710px;
        background-image: url("/static/img/gradient-pattern-left.webp");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        z-index: -1;
    }

    @media (max-width: 768px) {
        &::before {
            top: -5%;
            height: 363px;
            max-width: 236px;
            background-image: url("/static/img/gradient-pattern-left-mobile.webp");
        }
    }
}

.our-team__container {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.our-team__header {
    display: flex;
    flex-direction: column;
    gap: 25px;

    @media (max-width: 768px) {
        gap: 30px;
    }
}

.our-team__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;

    @media (max-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
    }
}

.our-team__grid-item {
    picture {
        margin-bottom: 20px;
    }

    img {
        width: 100%;
        height: auto;
        filter: grayscale(100%);
        transition: filter 0.3s ease-in-out;
    }

    img:hover {
        filter: grayscale(0%);
    }

    &:nth-child(1) {
        order: 1;
    }

    &:nth-child(2) {
        order: 2;
    }

    &:nth-child(3) {
        order: 3;
    }

    &:nth-child(4) {
        order: 4;
    }

    @media (max-width: 768px) {
        &:nth-child(3) {
            order: 4;
        }

        &:nth-child(4) {
            order: 3;
        }
    }
}

.our-team__role {
    font: 15px/1.5 var(--font-camber-regular);
    color: var(--color-egg-shell);

    @media (max-width: 768px) {
        font-size: 11px;
    }
}

.our-team__name {
    font: 20px/1.5 var(--font-camber-regular);
    color: var(--color-egg-shell);

    @media (max-width: 768px) {
        font-size: 14px;
    }
}

/* END: ABOUT */

/* START: SERVICES */
.services {
    padding: 60px 0;

    @media (max-width: 768px) {
        padding-top: 0;
    }
}

.services__header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: 1px solid rgba(248, 254, 255, 0.2);
    padding: 40px 0;

    @media (max-width: 768px) {
        border-bottom: none;
    }
}

.services__header-wrapper--no-border {
    border-bottom: none;
}

.services__header {
    display: flex;
    flex-direction: column;
    gap: 10px;

    @media (max-width: 768px) {
        gap: 20px;
    }
}

.services__tabs {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;

    @media (max-width: 768px) {
        display: none;
    }
}

.services__tab {
    padding: 10px 20px;
    border: 1px solid rgba(248, 254, 255, 0.3);
    font: 16px/1.5 var(--font-camber-light);
    color: var(--color-egg-shell);
    transition: border-color 0.3s ease, font-family 0.3s ease;

    &:hover,
    &.active {
        border-color: var(--color-egg-shell);
        font-family: var(--font-camber-regular);
    }
}

.how-we-work {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15% 0;

    p {
        font: 18px/1.5 var(--font-camber-light);
        color: var(--color-egg-shell);
        max-width: 31vw;
    }

    @media (max-width: 768px) {
        .content-title {
            max-width: 230px;
        }

        p {
            max-width: 70vw;
            font-size: 13px;
        }
    }
}

.service-index {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    padding: 5% 0;

    @media (max-width: 768px) {
        grid-template-columns: repeat(1, 1fr);
        padding-top: 0;
    }
}

.service-index__img-container {
    position: relative;
    overflow: hidden;

    &:hover {
        .service-index__caption {
            opacity: 1;
        }
    }

    @media (max-width: 768px) {
        &:first-child {
            order: 2;
        }

        &:last-child {
            order: 4;
        }
    }
}

.service-index__img {
    img {
        width: 100%;
        height: auto;
    }
}

.service-index__caption {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.3s ease;
    
    &::before {
        /* overlay */
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 2;
    }

    h3 {
        font: 22px/1.2 var(--font-camber-regular);
        color: var(--color-egg-shell);
        z-index: 3;
        margin-left: 20px;
        margin-top: 20px;
    }

    p {
        font: 14px/1.5 var(--font-camber-regular);
        color: var(--color-egg-shell);
        z-index: 3;
        max-width: 95%;
        margin-left: auto;
        margin-right: 20px;
        margin-bottom: 15px;
    }

    span:first-child {
        margin-right: 15px;
    }

    span:last-child {
        margin-left: 15px;
    }

    @media (max-width: 768px) {
        h3 {
            font-size: 18px;
        }

        p {
            font-size: 10px;
        }

        span:first-child {
            margin-right: 2px;
        }

        span:last-child {
            margin-left: 2px;
        }
    }
}

.service-index__caption-img-wrapper {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 15% 12%;
}


.service-index__caption-img {
    width: 100%;
    height: 100%;
    clip-path: polygon(
        0% 0%,
        calc(100% - 65px) 0%,
        100% 35px,
        100% 100%,
        65px 100%,
        0% calc(100% - 35px)
    );
    background-image: url("../img/photography-1.webp");
    background-size: cover;
    background-position: center;

    /* TODO: mobile caption image */
}

/* END: SERVICES */

/* START: CONNECT */
.connect-details {
    padding: 100px 0 150px;

    @media (max-width: 768px) {
        padding-top: 40px;
        padding-bottom: 80px;
    }
}

.connect-details__container {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 40px;
    align-items: start;

    @media (max-width: 1024px) {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

.connect-details__left {
    display: flex;
    flex-direction: column;
    gap: 60px;

    @media (max-width: 768px) {
        gap: 60px;
    }
}

.connect-details__subtitle {
    font: 48px/1.2 var(--font-camber-light);
    color: var(--color-egg-shell);
    letter-spacing: -1.65px;
    max-width: 513px;

    @media (max-width: 768px) {
        font-size: 32px;
    }
}

.connect-details__map-wrapper {
    position: relative;
    width: 100%;
    max-width: 513px;
    aspect-ratio: 513 / 244;
    overflow: hidden;
}

.connect-details__map {
    width: 100%;
    height: 100%;
    border: none;
}

.connect-details__right {
    width: 100%;
    max-width: 660px;
    justify-self: end;

    @media (max-width: 1024px) {
        justify-self: start;
    }
}

.contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.contact-list__item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 40px;
    padding: 30px 0;
    border-top: 1px solid var(--color-egg-shell-10);

    &:last-child {
        border-bottom: 1px solid var(--color-egg-shell-10);
    }

    @media (max-width: 768px) {
        grid-template-columns: 100px 1fr;
        gap: 20px;
        padding: 20px 0;
    }
}

.contact-list__label {
    font: 18px/1.6 var(--font-camber-semibold);
    color: var(--color-egg-shell);

    @media (max-width: 768px) {
        font-size: 16px;
    }
}

.contact-list__value {
    font: 18px/1.6 var(--font-camber-light);
    color: var(--color-egg-shell);
    max-width: 340px;
    white-space: pre-wrap;

    span {
        font-family: var(--font-camber-semibold);
    }

    @media (max-width: 768px) {
        font-size: 16px;
    }
}

.contact-list__socials {
    display: flex;
    gap: 24px;
    align-items: center;

    a {
        display: block;
        width: 24px;
        height: 24px;
        transition: opacity 0.3s ease;

        &:hover {
            opacity: 0.7;
        }
    }

    img {
        width: 100%;
        height: 100%;
    }
}
/* END: CONNECT */