/* =========================================================
   SYMKH SERVICES
========================================================= */

.services-page {
    margin: 0;
    background: #f7f0e6;
    color: #171512;
}


/* =========================================================
   ACTIVE NAV
========================================================= */

.services-page .nav nav a.active {
    color: #b17e39;
    border-bottom: 1px solid #b17e39;
}


/* =========================================================
   COMMON
========================================================= */

.services-page .eyebrow {
    margin: 0 0 14px;

    color: #aa7837;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 2.2px;

    text-transform: uppercase;
}


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

.services-hero {
    min-height: 620px;

    display: grid;

    grid-template-columns:
        1.25fr
        .75fr;

    background:
        linear-gradient(
            110deg,
            #f8f0e5 0%,
            #f3e3cf 65%,
            #e5cba9 100%
        );

    border-bottom:
        1px solid #d9c7b0;

    overflow: hidden;
}


/* HERO COPY */

.services-hero-copy {
    padding:
        90px
        7vw;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.services-hero h1 {
    margin: 0;

    color: #151310;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(65px, 7.5vw, 110px);

    font-weight: 400;

    line-height: .82;

    letter-spacing: -4px;
}

.services-lead {
    max-width: 570px;

    margin:
        30px
        0
        28px;

    color: #575047;

    font-size: 14px;

    line-height: 1.75;
}

.services-hero-btn {
    width: fit-content;

    padding:
        15px
        22px;

    display: inline-flex;

    align-items: center;

    gap: 20px;

    background: #171512;

    color: #fff;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.4px;

    text-decoration: none;
}


/* =========================================================
   HERO SIDE PANEL
========================================================= */

.services-hero-side {
    min-width: 0;

    padding:
        65px
        5vw
        60px;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(203,157,87,.17),
            transparent 35%
        ),
        #171512;

    color: #fff;

    box-sizing: border-box;
}

.service-number-large {
    position: absolute;

    right: 3vw;
    top: 20px;

    color:
        rgba(201,153,82,.11);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(150px, 20vw, 290px);

    line-height: 1;

    pointer-events: none;
}

.hero-service-list {
    position: relative;

    z-index: 2;

    border-top:
        1px solid #4b4237;
}

.hero-service-list > div {
    padding:
        23px
        0;

    display: grid;

    grid-template-columns:
        50px
        1fr;

    border-bottom:
        1px solid #4b4237;
}

.hero-service-list span {
    color: #c3954d;

    font-size: 9px;
}

.hero-service-list p {
    margin: 0;

    color: #f2ebe2;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;

    line-height: 1.2;
}

.hero-side-note {
    margin:
        30px
        0
        0;

    position: relative;

    z-index: 2;

    color: #a89f94;

    font-size: 9px;

    line-height: 1.7;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.services-intro {
    padding:
        100px
        8vw;

    display: grid;

    grid-template-columns:
        1fr
        .9fr;

    align-items: center;

    gap: 100px;

    background: #fff;
}

.services-intro h2 {
    margin: 0;

    color: #171512;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(50px, 5.5vw, 80px);

    font-weight: 400;

    line-height: .9;

    letter-spacing: -2px;
}

.services-intro-copy {
    max-width: 580px;
}

.intro-large {
    margin:
        0
        0
        18px;

    color: #29241f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    line-height: 1.5;
}

.services-intro-copy > p:not(.intro-large) {
    margin: 0;

    color: #645d55;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   SERVICE DETAIL
========================================================= */

.service-detail {
    min-height: 520px;

    padding:
        75px
        7vw;

    display: grid;

    grid-template-columns:
        90px
        .9fr
        1.1fr;

    gap: 55px;

    align-items: start;

    border-top:
        1px solid #d9ccbc;

    box-sizing: border-box;
}


/* alternate backgrounds */

.website-service {
    background: #f6eee3;
}

.graphic-service {
    background: #eee0ce;
}

.tech-service {
    background: #f8f4ed;
}


/* NUMBER */

.service-detail-number {
    color: #b17e39;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 35px;
}


/* TITLE */

.service-detail-title h2 {
    margin: 0;

    color: #171512;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(45px, 4.5vw, 67px);

    font-weight: 400;

    line-height: .92;

    letter-spacing: -2px;
}


/* CONTENT */

.service-detail-content {
    max-width: 620px;
}

.service-lead {
    margin:
        0
        0
        18px;

    color: #29241f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;

    line-height: 1.5;
}

.service-detail-content > p:not(.service-lead) {
    margin:
        0
        0
        28px;

    color: #625b53;

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   SERVICE INCLUDES
========================================================= */

.service-includes {
    margin:
        28px
        0;

    padding:
        22px
        0;

    border-top:
        1px solid #cdbda9;

    border-bottom:
        1px solid #cdbda9;
}

.service-includes > p {
    margin:
        0
        0
        15px;

    color: #a77738;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.service-includes ul {
    margin: 0;

    padding: 0;

    display: grid;

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

    gap:
        10px
        30px;

    list-style: none;
}

.service-includes li {
    position: relative;

    padding-left: 14px;

    color: #49433c;

    font-size: 10px;

    line-height: 1.4;
}

.service-includes li::before {
    content: "—";

    position: absolute;

    left: 0;

    color: #b17e39;
}


/* =========================================================
   SERVICE BUTTON
========================================================= */

.service-button {
    padding:
        13px
        18px;

    display: inline-flex;

    align-items: center;

    gap: 18px;

    background: #171512;

    color: #fff;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.2px;

    text-decoration: none;
}


/* =========================================================
   PROCESS
========================================================= */

.services-process {
    padding:
        95px
        7vw;

    display: grid;

    grid-template-columns:
        .65fr
        1.35fr;

    gap: 80px;

    background: #171512;

    color: #fff;
}

.services-process .eyebrow {
    color: #c59750;
}

.process-heading h2 {
    margin: 0;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(52px, 5.5vw, 78px);

    font-weight: 400;

    line-height: .9;
}

.process-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    border-top:
        1px solid #4d4439;

    border-bottom:
        1px solid #4d4439;
}

.process-grid article {
    min-height: 280px;

    padding:
        25px;

    border-right:
        1px solid #4d4439;
}

.process-grid article:last-child {
    border-right: 0;
}

.process-grid span {
    color: #c59750;

    font-size: 9px;
}

.process-grid h3 {
    margin:
        55px
        0
        17px;

    color: #fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;

    font-weight: 400;

    line-height: 1.05;
}

.process-grid p {
    margin: 0;

    color: #bbb2a7;

    font-size: 10px;

    line-height: 1.6;
}


/* =========================================================
   SHOP CALLOUT
========================================================= */

.services-shop {
    padding:
        85px
        8vw;

    display: grid;

    grid-template-columns:
        1fr
        .8fr;

    align-items: center;

    gap: 90px;

    background:
        linear-gradient(
            120deg,
            #ead4b8,
            #f9f1e7,
            #eee0cd
        );
}

.services-shop h2 {
    margin: 0;

    color: #171512;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(50px, 5vw, 75px);

    font-weight: 400;

    line-height: .9;
}

.services-shop > div:last-child p {
    margin:
        0
        0
        25px;

    color: #5c554d;

    font-size: 13px;

    line-height: 1.75;
}

.services-shop a {
    padding:
        14px
        20px;

    display: inline-flex;

    gap: 18px;

    background: #171512;

    color: #fff;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-decoration: none;
}


/* =========================================================
   FINAL CTA
========================================================= */

.services-final {
    padding:
        95px
        7vw;

    text-align: center;

    background: #fff;
}

.services-final h2 {
    margin: 0;

    color: #171512;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(55px, 6vw, 85px);

    font-weight: 400;

    line-height: .88;

    letter-spacing: -2px;
}

.services-final > p:not(.eyebrow) {
    max-width: 540px;

    margin:
        25px
        auto;

    color: #655e55;

    font-size: 12px;

    line-height: 1.7;
}

.services-final > a {
    padding:
        15px
        24px;

    display: inline-flex;

    gap: 18px;

    background:
        linear-gradient(
            135deg,
            #a87532,
            #c99a50
        );

    color: #fff;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-decoration: none;
}


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

@media (max-width: 1000px) {

    .services-hero {
        grid-template-columns:
            1fr
            .65fr;
    }

    .services-hero h1 {
        font-size: 72px;
    }

    .services-intro {
        gap: 50px;
    }

    .service-detail {
        grid-template-columns:
            60px
            .8fr
            1.2fr;

        gap: 30px;
    }

    .services-process {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 760px) {

    .services-hero {
        grid-template-columns: 1fr;
    }

    .services-hero-copy {
        padding:
            65px
            7vw;
    }

    .services-hero h1 {
        font-size:
            clamp(58px,17vw,80px);
    }

    .services-hero-side {
        padding:
            55px
            7vw;
    }


    /* INTRO */

    .services-intro {
        padding:
            70px
            7vw;

        grid-template-columns: 1fr;

        gap: 35px;
    }


    /* SERVICE */

    .service-detail {
        padding:
            65px
            7vw;

        grid-template-columns: 1fr;

        gap: 20px;
    }

    .service-detail-number {
        font-size: 24px;
    }

    .service-includes ul {
        grid-template-columns: 1fr;
    }


    /* PROCESS */

    .services-process {
        padding:
            70px
            7vw;

        gap: 40px;
    }

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

    .process-grid article {
        min-height: 220px;

        border-right: 0;

        border-bottom:
            1px solid #4d4439;
    }

    .process-grid article:last-child {
        border-bottom: 0;
    }

    .process-grid h3 {
        margin-top: 35px;
    }


    /* SHOP */

    .services-shop {
        padding:
            70px
            7vw;

        grid-template-columns: 1fr;

        gap: 35px;
    }


    /* FINAL */

    .services-final {
        padding:
            75px
            7vw;
    }

}