/* =========================================================
   AG BODY SHOP — SINGLE SERVICE
========================================================= */


/* =========================================================
   01 — LOCAL TOKENS / FOUNDATION
========================================================= */

.service-single {
    --service-yellow:
        var(--color-yellow, #e7b900);

    --service-yellow-hover:
        var(--color-yellow-hover, #f2c600);

    --service-ink:
        #17191c;

    --service-text:
        #555b5f;

    --service-muted:
        #777d81;

    --service-line:
        rgba(20, 23, 25, .13);

    --service-warm:
        #f4f2ed;

    --service-dark:
        #080b0e;

    --service-dark-soft:
        #12161a;

    --service-page-padding:
        clamp(28px, 5vw, 92px);

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    color:
        var(--service-ink);

    background:
        #ffffff;

    font-family:
        var(
            --font-body,
            "AvenirWeb",
            "Avenir",
            Arial,
            sans-serif
        );
}


.service-single,
.service-single *,
.service-single *::before,
.service-single *::after {
    box-sizing:
        border-box;
}


.service-single h1,
.service-single h2,
.service-single h3,
.service-single p,
.service-single figure {
    margin:
        0;

    padding:
        0;
}


.service-single img {
    display:
        block;

    max-width:
        100%;
}


.service-single a {
    color:
        inherit;

    text-decoration:
        none;
}


/* =========================================================
   02 — COMPACT HERO
========================================================= */

.service-single-hero {
    position:
        relative;

    min-height:
        clamp(360px, 33vw, 455px);

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        radial-gradient(
            circle at 20% 12%,
            rgba(255, 255, 255, .045),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 72%,
            rgba(231, 185, 0, .10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #15191d 0%,
            #090c0f 62%,
            #050709 100%
        );
}


.service-single-hero::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(5, 7, 9, .18),
            transparent 58%
        );

    box-shadow:
        inset 0 -55px 70px
        rgba(0, 0, 0, .18);
}


.service-single-hero__inner {
    position:
        relative;

    z-index:
        2;

    width:
        min(1480px, 100%);

    min-height:
        inherit;

    margin:
        0 auto;

    padding-right:
        var(--service-page-padding);

    display:
        grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(420px, 1.12fr);

    gap:
        clamp(28px, 3.5vw, 58px);
}


.service-single-hero.has-no-service-image
.service-single-hero__inner {
    grid-template-columns:
        1fr;

    padding-right:
        0;
}


/* =========================================================
   03 — HERO CONTENT
========================================================= */

.service-single-hero__content {
    position:
        relative;

    z-index:
        4;

    min-width:
        0;

    padding:
        clamp(34px, 3vw, 46px)
        0
        clamp(38px, 3.5vw, 52px)
        var(--service-page-padding);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        flex-start;
}


.service-single-hero.has-no-service-image
.service-single-hero__content {
    width:
        min(900px, 100%);

    padding-right:
        var(--service-page-padding);
}


.service-single-breadcrumb {
    margin-bottom:
        14px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

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

    font-size:
        9.5px;

    font-weight:
        700;

    line-height:
        1.3;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;
}


.service-single-breadcrumb a {
    transition:
        color .2s ease;
}


.service-single-breadcrumb a:hover {
    color:
        var(--service-yellow);
}


.service-single-breadcrumb [aria-current="page"] {
    color:
        rgba(255, 255, 255, .80);
}


/*
 * Same maximum title size as the Services archive:
 * Our Services max = 48px.
 */

.service-single-hero__title {
    max-width:
        650px;

    color:
        var(--service-yellow);

    font-family:
        var(--font-title);

    font-size:
        clamp(36px, 2.75vw, 48px);

    font-weight:
        400;

    line-height:
        1;

    letter-spacing:
        -.35px;
}


.service-single-hero__description {
    width:
        min(600px, 100%);

    margin-top:
        17px !important;

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

    font-size:
        clamp(13.5px, .9vw, 15.5px);

    font-weight:
        300;

    line-height:
        1.65;
}


.service-single-hero__actions {
    margin-top:
        24px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;
}


/* =========================================================
   04 — HERO BUTTONS
========================================================= */

.service-single-button {
    min-height:
        43px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .9px;

    text-transform:
        uppercase;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.service-single-button--primary {
    min-width:
        178px;

    padding:
        0 20px;

    color:
        #111416;

    background:
        var(--service-yellow);

    border:
        1px solid
        var(--service-yellow);
}


.service-single-button--primary:hover {
    background:
        var(--service-yellow-hover);

    border-color:
        var(--service-yellow-hover);

    transform:
        translateY(-2px);
}


.service-single-button svg {
    width:
        34px;

    height:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .2s ease;
}


.service-single-button:hover svg {
    transform:
        translateX(5px);
}


.service-single-button--text {
    min-height:
        32px;

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

    border-bottom:
        1px solid
        rgba(255, 255, 255, .22);
}


.service-single-button--text:hover {
    color:
        #ffffff;

    border-color:
        var(--service-yellow);
}


/* =========================================================
   05 — SHARE / PRINT TOOLS
========================================================= */

.service-single-hero__tools {
    margin-top:
        18px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        9px;
}


.service-single-tool {
    min-height:
        36px;

    padding:
        0 12px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

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

    background:
        rgba(255, 255, 255, .045);

    border:
        1px solid
        rgba(255, 255, 255, .13);

    border-radius:
        20px;

    font-size:
        8.5px;

    font-weight:
        700;

    line-height:
        1;

    letter-spacing:
        .75px;

    text-transform:
        uppercase;

    cursor:
        pointer;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}


.service-single-tool:hover {
    color:
        #111416;

    background:
        var(--service-yellow);

    border-color:
        var(--service-yellow);
}


.service-single-tool svg {
    width:
        15px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.55;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   06 — HERO IMAGE
========================================================= */

.service-single-hero__media {
    position:
        relative;

    z-index:
        3;

    min-width:
        0;

    width:
        100%;

    height:
        360px;

    margin:
        0;

    align-self:
        center;

    overflow:
        hidden;

    background:
        #111519;

    border-radius:
        3px;

    box-shadow:
        0 20px 42px
        rgba(0, 0, 0, .22);
}


.service-single-hero__media::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(8, 11, 14, .28),
            transparent 30%
        );

    box-shadow:
        inset 0 0 55px
        rgba(0, 0, 0, .14);
}


.service-single-hero__image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        38% top;
}


/* =========================================================
   07 — FULL-WIDTH SERVICE CONTENT
========================================================= */

.service-single-content {
    position:
        relative;

    color:
        var(--service-ink);

    background:
        #ffffff;
}


.service-single-content__inner {
    width:
        min(1240px, 100%);

    margin:
        0 auto;

    padding:
        clamp(62px, 6vw, 88px)
        var(--service-page-padding)
        clamp(70px, 7vw, 104px);
}


.service-single-article {
    width:
        100%;

    min-width:
        0;
}


.service-single-article__header {
    margin-bottom:
        clamp(29px, 3vw, 42px);

    padding-bottom:
        clamp(24px, 2.5vw, 34px);

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


.service-single-article__heading {
    max-width:
        850px;

    color:
        var(--service-ink);

    font-family:
        var(--font-title);

    font-size:
        clamp(31px, 2.4vw, 42px);

    font-weight:
        400;

    line-height:
        1.08;

    letter-spacing:
        -.25px;
}


/* =========================================================
   08 — WORDPRESS EDITOR CONTENT
========================================================= */

.service-single-entry {
    width:
        100%;

    color:
        var(--service-text);

    font-size:
        clamp(15px, .95vw, 16.5px);

    font-weight:
        300;

    line-height:
        1.82;
}


.service-single-entry > *:first-child {
    margin-top:
        0 !important;
}


.service-single-entry > *:last-child {
    margin-bottom:
        0 !important;
}


.service-single-entry p {
    margin:
        0 0 22px;
}


.service-single-entry h2 {
    margin:
        clamp(43px, 4.5vw, 62px)
        0
        18px;

    color:
        var(--service-ink);

    font-family:
        var(--font-title);

    font-size:
        clamp(27px, 2.1vw, 37px);

    font-weight:
        400;

    line-height:
        1.12;
}


.service-single-entry h3 {
    margin:
        33px
        0
        14px;

    color:
        #8e7000;

    font-family:
        var(--font-title);

    font-size:
        clamp(21px, 1.55vw, 27px);

    font-weight:
        400;

    line-height:
        1.2;
}


.service-single-entry h4 {
    margin:
        27px
        0
        12px;

    color:
        var(--service-ink);

    font-size:
        15px;

    font-weight:
        700;
}


.service-single-entry strong,
.service-single-entry b {
    color:
        var(--service-ink);

    font-weight:
        700;
}


.service-single-entry a {
    color:
        #806600;

    border-bottom:
        1px solid
        rgba(128, 102, 0, .35);
}


.service-single-entry ul,
.service-single-entry ol {
    margin:
        23px
        0
        27px;

    padding-left:
        24px;
}


.service-single-entry li {
    margin-bottom:
        10px;

    padding-left:
        5px;
}


.service-single-entry li::marker {
    color:
        #9e7d00;
}


.service-single-entry blockquote {
    margin:
        36px 0;

    padding:
        27px
        31px
        27px
        35px;

    color:
        var(--service-ink);

    background:
        var(--service-warm);

    border-left:
        3px solid
        var(--service-yellow);

    font-family:
        var(--font-title);

    font-size:
        clamp(20px, 1.65vw, 26px);

    line-height:
        1.45;
}


.service-single-entry blockquote p {
    margin:
        0;
}


.service-single-entry figure {
    margin:
        clamp(33px, 4vw, 50px)
        0;
}


.service-single-entry figure img,
.service-single-entry > img {
    width:
        100%;

    height:
        auto;
}


.service-single-entry figcaption {
    margin-top:
        10px;

    color:
        var(--service-muted);

    font-size:
        11.5px;

    line-height:
        1.5;
}


.service-single-entry .alignleft {
    float:
        left;

    max-width:
        48%;

    margin:
        8px 28px 20px 0;
}


.service-single-entry .alignright {
    float:
        right;

    max-width:
        48%;

    margin:
        8px 0 20px 28px;
}


.service-single-entry::after {
    content:
        "";

    display:
        table;

    clear:
        both;
}


.service-single-entry table {
    width:
        100%;

    margin:
        34px 0;

    border-collapse:
        collapse;

    font-size:
        14px;
}


.service-single-entry th,
.service-single-entry td {
    padding:
        14px 16px;

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

    text-align:
        left;

    vertical-align:
        top;
}


.service-single-entry th {
    color:
        var(--service-ink);

    background:
        var(--service-warm);

    font-weight:
        700;
}


/* =========================================================
   09 — PAGE LINKS
========================================================= */

.service-single-page-links {
    margin-top:
        36px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;
}


/* =========================================================
   10 — DARK RELATED SERVICES
========================================================= */

.service-single-related {
    position:
        relative;

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(231, 185, 0, .07),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #0d1013,
            #050709
        );

    border-top:
        1px solid
        rgba(255, 255, 255, .07);
}


.service-single-related__inner {
    width:
        min(1480px, 100%);

    margin:
        0 auto;

    padding:
        clamp(60px, 6vw, 84px)
        var(--service-page-padding)
        clamp(70px, 7vw, 100px);
}


.service-single-related__header {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        35px;
}


.service-single-related__eyebrow {
    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--service-yellow);

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1.2;

    letter-spacing:
        1.45px;

    text-transform:
        uppercase;
}


.service-single-related__title {
    color:
        #ffffff;

    font-family:
        var(--font-title);

    font-size:
        clamp(34px, 2.7vw, 46px);

    font-weight:
        400;

    line-height:
        1.04;
}


.service-single-related__title a {
    transition:
        color .2s ease;
}


.service-single-related__title a:hover {
    color:
        var(--service-yellow);
}


.service-single-related__all {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

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

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .9px;

    text-transform:
        uppercase;

    transition:
        color .2s ease;
}


.service-single-related__all:hover {
    color:
        var(--service-yellow);
}


.service-single-related__all svg {
    width:
        37px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .2s ease;
}


.service-single-related__all:hover svg {
    transform:
        translateX(5px);
}


.service-single-related__grid {
    margin-top:
        clamp(32px, 4vw, 48px);

    display:
        grid;

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

    gap:
        clamp(18px, 2.2vw, 30px);
}


.service-single-related-card {
    min-width:
        0;

    overflow:
        hidden;

    background:
        rgba(255, 255, 255, .035);

    border:
        1px solid
        rgba(255, 255, 255, .11);

    transition:
        transform .3s ease,
        background-color .3s ease,
        border-color .3s ease;
}


.service-single-related-card:hover {
    transform:
        translateY(-5px);

    background:
        rgba(255, 255, 255, .06);

    border-color:
        rgba(231, 185, 0, .33);
}


.service-single-related-card__media {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    display:
        block;

    background:
        #15191d;
}


.service-single-related-card__media::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0, 0, 0, .30)
        );
}


.service-single-related-card__image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .45s ease;
}


.service-single-related-card:hover
.service-single-related-card__image {
    transform:
        scale(1.045);
}


.service-single-related-card__placeholder {
    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 75% 80%,
            rgba(231, 185, 0, .13),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #252a2f,
            #090c0f
        );
}


.service-single-related-card__content {
    padding:
        23px
        23px
        25px;
}


.service-single-related-card__title {
    color:
        var(--service-yellow);

    font-family:
        var(--font-title);

    font-size:
        clamp(20px, 1.45vw, 26px);

    font-weight:
        400;

    line-height:
        1.14;
}


.service-single-related-card__title a:hover {
    color:
        #ffffff;
}


.service-single-related-card__excerpt {
    margin-top:
        11px !important;

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

    font-size:
        12.5px;

    line-height:
        1.62;
}


.service-single-related-card__link {
    width:
        max-content;

    margin-top:
        19px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

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

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

    transition:
        color .2s ease;
}


.service-single-related-card__link:hover {
    color:
        var(--service-yellow);
}


.service-single-related-card__link svg {
    width:
        33px;

    height:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .2s ease;
}


.service-single-related-card__link:hover svg {
    transform:
        translateX(5px);
}


/* =========================================================
   11 — TABLET
========================================================= */

@media (max-width: 980px) {

    .service-single-hero {
        min-height:
            auto;
    }


    .service-single-hero__inner {
        min-height:
            0;

        padding-right:
            28px;

        grid-template-columns:
            minmax(0, .92fr)
            minmax(330px, 1.08fr);

        gap:
            25px;
    }


    .service-single-hero__content {
        padding:
            32px
            0
            38px
            28px;
    }


    .service-single-hero__media {
        height:
            310px;
    
        margin:
            0;
    
        align-self:
            center;
    }

}


/* =========================================================
   12 — MOBILE
========================================================= */

@media (max-width: 720px) {

    .service-single {
        --service-page-padding:
            18px;
    }


    .service-single-hero__inner,
    .service-single-hero.has-no-service-image
    .service-single-hero__inner {
        padding-right:
            0;

        grid-template-columns:
            1fr;
    }


    .service-single-hero__content,
    .service-single-hero.has-no-service-image
    .service-single-hero__content {
        width:
            100%;

        padding:
            30px
            18px
            27px;
    }


    .service-single-hero__title {
        font-size:
            clamp(32px, 9.5vw, 42px);
    }


    .service-single-hero__description {
        font-size:
            14px;
    }


    .service-single-hero__actions {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            13px;
    }


    .service-single-button--primary {
        width:
            100%;
    }


    .service-single-hero__tools {
        margin-top:
            16px;
    }


    .service-single-hero__media {
        width:
            auto;
    
        height:
            220px;
    
        margin:
            0
            18px
            22px;
    }


    .service-single-content__inner {
        padding-top:
            54px;

        padding-bottom:
            68px;
    }


    .service-single-article__heading {
        font-size:
            clamp(29px, 8.5vw, 38px);
    }


    .service-single-entry {
        font-size:
            15px;

        line-height:
            1.75;
    }


    .service-single-entry h2 {
        font-size:
            clamp(26px, 7.5vw, 34px);
    }


    .service-single-entry .alignleft,
    .service-single-entry .alignright {
        float:
            none;

        width:
            100%;

        max-width:
            100%;

        margin:
            28px 0;
    }


    .service-single-entry table {
        display:
            block;

        overflow-x:
            auto;

        white-space:
            nowrap;
    }


    .service-single-related__inner {
        padding-left:
            18px;

        padding-right:
            18px;
    }


    .service-single-related__header {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            17px;
    }


    .service-single-related__title {
        font-size:
            clamp(32px, 9vw, 41px);
    }


    .service-single-related__grid {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   13 — FOCUS
========================================================= */

.service-single a:focus-visible,
.service-single button:focus-visible {
    outline:
        2px solid
        var(--service-yellow);

    outline-offset:
        4px;
}


/* =========================================================
   14 — PRINT
========================================================= */

@media print {

    .site-header,
    .service-single-hero__actions,
    .service-single-hero__tools,
    .service-single-related,
    #vehicle-assessment,
    .site-footer {
        display:
            none !important;
    }


    body,
    .service-single,
    .service-single-content {
        color:
            #000000 !important;

        background:
            #ffffff !important;
    }


    .service-single-hero {
        min-height:
            auto;

        color:
            #000000;

        background:
            #ffffff;
    }


    .service-single-hero::after {
        display:
            none;
    }


    .service-single-hero__inner {
        display:
            block;

        padding:
            0;
    }


    .service-single-hero__content {
        padding:
            0 0 24px;
    }


    .service-single-breadcrumb {
        color:
            #555555;
    }


    .service-single-hero__title {
        color:
            #000000;
    }


    .service-single-hero__description {
        color:
            #333333;
    }


    .service-single-hero__media {
        height:
            280px;

        margin:
            0 0 28px;

        box-shadow:
            none;
    }


    .service-single-content__inner {
        width:
            100%;

        padding:
            0;
    }

}


/* =========================================================
   15 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .service-single-button,
    .service-single-button svg,
    .service-single-tool,
    .service-single-related__all,
    .service-single-related__all svg,
    .service-single-related-card,
    .service-single-related-card__image,
    .service-single-related-card__link,
    .service-single-related-card__link svg {
        transition:
            none !important;
    }

}