/* =========================================================
   AG BODY SHOP — OUR WORK / PROJECTS
========================================================= */


/* =========================================================
   01 — FOUNDATION
========================================================= */

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

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

    --project-ink:
        #17191c;

    --project-text:
        #555b5f;

    --project-muted:
        #777d81;

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

    --project-line-soft:
        rgba(20, 23, 25, .08);

    --project-warm:
        #f4f2ed;

    --project-dark:
        #080b0e;

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

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

    position:
        relative;

    width:
        100%;

    overflow:
        hidden;

    color:
        var(--project-ink);

    background:
        #ffffff;

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


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


.project-archive h1,
.project-archive h2,
.project-archive h3,
.project-archive p,
.project-archive figure,
.project-archive ul,
.project-single h1,
.project-single h2,
.project-single h3,
.project-single p,
.project-single figure,
.project-single dl,
.project-single dt,
.project-single dd,
.project-single blockquote {
    margin:
        0;

    padding:
        0;
}


.project-archive img,
.project-single img {
    display:
        block;

    max-width:
        100%;
}


.project-archive a,
.project-single a {
    color:
        inherit;

    text-decoration:
        none;
}


.project-archive button,
.project-single button {
    font:
        inherit;
}


.project-shell {
    width:
        min(1480px, 100%);

    margin:
        0 auto;
}


.project-content-shell {
    width:
        min(1240px, 100%);

    margin:
        0 auto;

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

    padding-left:
        var(--project-page-padding);
}


/* =========================================================
   02 — SHARED BREADCRUMB
========================================================= */

.project-breadcrumb {
    margin-bottom:
        14px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        nowrap;

    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;

    overflow:
        hidden;
}


.project-breadcrumb a {
    flex:
        0 0 auto;

    transition:
        color .2s ease;
}


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


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


.project-breadcrumb__current {
    min-width:
        0;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


/* =========================================================
   03 — ARCHIVE HERO
========================================================= */

.project-archive-hero {
    position:
        relative;

    min-height:
        clamp(280px, 25vw, 340px);

    overflow:
        hidden;

    color:
        #ffffff;

    background:
        radial-gradient(
            circle at 82% 67%,
            rgba(231, 185, 0, .11),
            transparent 31%
        ),
        radial-gradient(
            circle at 15% 9%,
            rgba(255, 255, 255, .045),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #15191d 0%,
            #090c0f 61%,
            #050709 100%
        );
}


.project-archive-hero::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            rgba(4, 6, 8, .24),
            transparent 64%
        );

    box-shadow:
        inset 0 -58px 80px
        rgba(0, 0, 0, .18);
}


 





.project-archive-hero__title {
    width:
        min(760px, 100%);

    color:
        var(--project-yellow);
}


.project-archive-hero__description {
    width:
        min(760px, 100%);

    margin-top:
        16px !important;

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

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

    font-weight:
        300;

    line-height:
        1.65;
}


.project-archive-hero__inner {
    position:
        relative;

    z-index:
        2;

    width:
        min(1480px, 100%);

    min-height:
        inherit;

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(340px, .96fr);
}


.project-archive-hero.has-no-hero-image
.project-archive-hero__inner {
    grid-template-columns:
        1fr;
}


.project-archive-hero__copy {
    position:
        relative;

    z-index:
        4;

    min-width:
        0;

    padding:
        30px
        var(--project-page-padding)
        44px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        flex-start;
}


.project-archive-hero.has-no-hero-image
.project-archive-hero__copy {
    width:
        min(990px, 100%);
}


.project-archive-hero__media {
    position:
        relative;

    z-index:
        2;

    min-width:
        0;

    min-height:
        inherit;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        flex-end;

    pointer-events:
        none;

    isolation:
        isolate;
}


.project-archive-hero__media::before {
    content:
        "";

    position:
        absolute;

    z-index:
        0;

    left:
        50%;

    bottom:
        -34%;

    width:
        90%;

    height:
        76%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(231, 185, 0, .10),
            transparent 67%
        );

    pointer-events:
        none;
}


.project-archive-hero__image {
    position:
        relative;

    z-index:
        2;

    width:
        min(760px, 112%);

    max-width:
        none;

    height:
        auto;

    max-height:
        340px;

    object-fit:
        contain;

    object-position:
        right bottom;

    filter:
        drop-shadow(
            -16px
            24px
            28px
            rgba(0, 0, 0, .40)
        );

    transform:
        translateX(-7%);
}


/* =========================================================
   04 — FEATURED PROJECT
========================================================= */

.project-featured {
    position:
        relative;

    padding:
        clamp(62px, 7vw, 96px)
        var(--project-page-padding);

    background:
        #ffffff;
}


.project-featured__inner {
    width:
        min(1480px, 100%);

    margin:
        0 auto;
}


.project-featured__card {
    width:
        100%;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.42fr)
        minmax(320px, .58fr);

    align-items:
        stretch;

    background:
        var(--project-warm);

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


.project-featured__media {
    position:
        relative;

    min-width:
        0;

    min-height:
        clamp(390px, 37vw, 560px);

    overflow:
        hidden;

    display:
        block;

    background:
        #dcd9d2;
}


.project-featured__image,
.project-featured__placeholder {
    width:
        100%;

    height:
        100%;
}


.project-featured__image {
    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .55s ease,
        filter .55s ease;
}


.project-featured__placeholder {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(23, 25, 28, .20);

    background:
        radial-gradient(
            circle at 75% 72%,
            rgba(231, 185, 0, .16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #efede8,
            #d8d5ce
        );

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

    font-size:
        48px;
}


.project-featured__shade {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

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


.project-featured__media:hover
.project-featured__image {
    transform:
        scale(1.025);

    filter:
        brightness(1.025);
}


.project-featured__content {
    position:
        relative;

    min-width:
        0;

    padding:
        clamp(38px, 4.8vw, 70px)
        clamp(32px, 4vw, 58px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.project-featured__content::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        3px;

    height:
        100%;

    background:
        linear-gradient(
            180deg,
            var(--project-yellow),
            rgba(231, 185, 0, .18),
            transparent 86%
        );
}


.project-featured__label {
    color:
        #8e7000;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        1.35px;

    text-transform:
        uppercase;
}


.project-featured__meta {
    margin-top:
        19px !important;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        6px 9px;

    color:
        #806600;

    font-size:
        9px;

    font-weight:
        700;

    line-height:
        1.5;

    letter-spacing:
        .68px;

    text-transform:
        uppercase;
}


.project-featured__meta span[aria-hidden="true"] {
    color:
        rgba(23, 25, 28, .25);
}


.project-featured__title {
    margin-top:
        12px !important;

    color:
        var(--project-ink);

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

    font-size:
        clamp(31px, 2.6vw, 45px);

    font-weight:
        400;

    line-height:
        1.07;

    letter-spacing:
        -.3px;
}


.project-featured__title a {
    transition:
        color .2s ease;
}


.project-featured__title a:hover {
    color:
        #8e7000;
}


.project-featured__excerpt {
    margin-top:
        19px !important;

    color:
        var(--project-text);

    font-size:
        14px;

    font-weight:
        300;

    line-height:
        1.72;
}


.project-featured__link,
.project-card__link,
.project-section-link {
    width:
        max-content;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .85px;

    text-transform:
        uppercase;

    transition:
        color .2s ease;
}


.project-featured__link {
    margin-top:
        27px;

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


.project-featured__link:hover,
.project-card__link:hover,
.project-section-link:hover {
    color:
        #806600;
}


.project-featured__link svg,
.project-card__link svg,
.project-section-link svg {
    width:
        36px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .2s ease;
}


.project-featured__link:hover svg,
.project-card__link:hover svg,
.project-section-link:hover svg {
    transform:
        translateX(5px);
}


/* =========================================================
   05 — ARCHIVE PROJECT LIST
========================================================= */

.project-archive-list {
    padding:
        clamp(64px, 7vw, 96px)
        var(--project-page-padding)
        clamp(72px, 8vw, 108px);

    color:
        var(--project-ink);

    background:
        #ffffff;
}


.project-featured +
.project-archive-list {
    padding-top:
        0;
}


.project-archive-list__inner {
    width:
        min(1480px, 100%);

    margin:
        0 auto;
}


.project-archive-list__header {
    margin-bottom:
        clamp(32px, 4vw, 50px);

    padding-bottom:
        22px;

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


.project-archive-list__title,
.project-archive-summary__title,
.project-section-title {
    color:
        var(--project-ink);
}


.project-archive-grid,
.project-grid {
    width:
        100%;

    display:
        grid;

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

    gap:
        clamp(42px, 5vw, 68px)
        clamp(22px, 2.6vw, 38px);
}


/* =========================================================
   06 — PROJECT CARD
========================================================= */

.project-card {
    min-width:
        0;

    padding-bottom:
        30px;

    background:
        #ffffff;

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


.project-card__media {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        4 / 3;

    overflow:
        hidden;

    display:
        block;

    background:
        #e7e4de;
}


.project-card__image,
.project-card__placeholder {
    width:
        100%;

    height:
        100%;
}


.project-card__image {
    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .45s ease,
        filter .45s ease;
}


.project-card__placeholder {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(23, 25, 28, .22);

    background:
        radial-gradient(
            circle at 75% 72%,
            rgba(231, 185, 0, .16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #efede8,
            #dcd9d2
        );

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

    font-size:
        36px;
}


.project-card__shade {
    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .58;

    background:
        linear-gradient(
            180deg,
            transparent 62%,
            rgba(0, 0, 0, .14)
        );

    transition:
        opacity .3s ease;
}


.project-card:hover
.project-card__image {
    transform:
        scale(1.025);

    filter:
        brightness(1.025);
}


.project-card:hover
.project-card__shade {
    opacity:
        .28;
}


.project-card__body {
    padding-top:
        19px;
}


.project-card__meta {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        5px 8px;

    color:
        #806600;

    font-size:
        8.5px;

    font-weight:
        800;

    line-height:
        1.45;

    letter-spacing:
        .72px;

    text-transform:
        uppercase;
}


.project-card__meta span[aria-hidden="true"] {
    color:
        var(--project-muted);
}


.project-card__title {
    margin-top:
        12px !important;

    color:
        var(--project-ink);

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

    font-size:
        clamp(22px, 1.65vw, 29px);

    font-weight:
        400;

    line-height:
        1.15;
}


.project-card__title a {
    transition:
        color .2s ease;
}


.project-card__title a:hover {
    color:
        #8a6d00;
}


.project-card__excerpt {
    margin-top:
        13px !important;

    color:
        var(--project-text);

    font-size:
        13.5px;

    font-weight:
        300;

    line-height:
        1.7;
}


.project-card__link {
    margin-top:
        20px;

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


.project-card--compact
.project-card__excerpt {
    display:
        -webkit-box;

    overflow:
        hidden;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;
}


/* =========================================================
   07 — REVEAL ENHANCEMENT
========================================================= */

.project-archive [data-project-reveal],
.project-single [data-project-reveal] {
    opacity:
        1;

    transform:
        none;
}


.project-archive.is-enhanced
[data-project-reveal],
.project-single.is-enhanced
[data-project-reveal] {
    opacity:
        0;

    transform:
        translateY(18px);

    transition:
        opacity .55s ease,
        transform .55s ease;
}


.project-archive.is-enhanced
[data-project-reveal].is-visible,
.project-single.is-enhanced
[data-project-reveal].is-visible {
    opacity:
        1;

    transform:
        translateY(0);
}


/* =========================================================
   08 — PAGINATION
========================================================= */

.project-pagination {
    margin-top:
        clamp(44px, 5vw, 64px);

    padding-top:
        26px;

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


.project-pagination ul {
    margin:
        0;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

    list-style:
        none;
}


.project-pagination .page-numbers {
    min-width:
        40px;

    height:
        40px;

    padding:
        0 13px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--project-ink);

    background:
        #ffffff;

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

    border-radius:
        50%;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;

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


.project-pagination .prev,
.project-pagination .next {
    min-width:
        50px;

    border-radius:
        22px;

    font-size:
        16px;
}


.project-pagination a.page-numbers:hover,
.project-pagination .page-numbers.current {
    color:
        #111416;

    background:
        var(--project-yellow);

    border-color:
        var(--project-yellow);

    transform:
        translateY(-2px);
}


/* =========================================================
   09 — ARCHIVE EMPTY STATE
========================================================= */

.project-archive-empty {
    width:
        100%;

    padding:
        58px 28px;

    text-align:
        center;

    background:
        var(--project-warm);

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


.project-archive-empty h3 {
    color:
        var(--project-ink);

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

    font-size:
        clamp(25px, 1.8vw, 30px);

    font-weight:
        400;
}


.project-archive-empty p {
    width:
        min(560px, 100%);

    margin:
        12px auto 0 !important;

    color:
        var(--project-text);

    font-size:
        14px;

    line-height:
        1.65;
}


.project-archive-empty__link {
    min-height:
        42px;

    margin-top:
        24px;

    padding:
        0 20px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #111416;

    background:
        var(--project-yellow);

    border:
        1px solid
        var(--project-yellow);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .9px;

    text-transform:
        uppercase;

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


.project-archive-empty__link:hover {
    background:
        var(--project-yellow-hover);

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

    transform:
        translateY(-2px);
}


/* =========================================================
   10 — ARCHIVE SUMMARY
========================================================= */

.project-archive-summary {
    padding:
        0
        var(--project-page-padding)
        clamp(62px, 7vw, 92px);

    background:
        #ffffff;

    scroll-margin-top:
        120px;
}


.project-archive-summary__inner {
    width:
        min(1340px, 100%);

    margin:
        0 auto;

    padding-top:
        clamp(26px, 3vw, 38px);

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


.project-archive-summary__title {
    margin-bottom:
        20px !important;
}


.project-archive-summary__content-wrap {
    position:
        relative;

    width:
        100%;
}


.project-archive-summary__content {
    width:
        100%;

    overflow:
        visible;

    transition:
        max-height .45s ease;
}


.project-archive.is-enhanced
.project-archive-summary.has-overflow:not(.is-expanded)
.project-archive-summary__content {
    max-height:
        var(
            --project-summary-collapsed-height,
            76px
        );

    overflow:
        hidden;
}


.project-archive.is-enhanced
.project-archive-summary.has-overflow:not(.is-expanded)
.project-archive-summary__content-wrap::after {
    content:
        "";

    position:
        absolute;

    z-index:
        2;

    left:
        0;

    right:
        0;

    bottom:
        46px;

    height:
        54px;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, .99)
        );
}


.project-archive-summary.is-expanded
.project-archive-summary__content {
    max-height:
        var(
            --project-summary-expanded-height,
            2000px
        );
}


.project-archive-summary__toggle {
    position:
        relative;

    z-index:
        3;

    min-width:
        118px;

    min-height:
        40px;

    margin:
        24px auto 0;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    color:
        #ffffff;

    background:
        #090b0d;

    border:
        1px solid
        #090b0d;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

    cursor:
        pointer;

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


.project-archive-summary__toggle[hidden] {
    display:
        none;
}


.project-archive-summary__toggle:hover {
    color:
        #111416;

    background:
        var(--project-yellow);

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


.project-archive-summary__toggle svg {
    width:
        14px;

    height:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .25s ease;
}


.project-archive-summary.is-expanded
.project-archive-summary__toggle svg {
    transform:
        rotate(180deg);
}


/* =========================================================
   11 — SINGLE PROJECT HERO
========================================================= */

.project-single-hero {
    position:
        relative;

    min-height:
        clamp(410px, 38vw, 550px);

    overflow:
        hidden;

    color:
        #ffffff;

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


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

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

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

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


.project-single-hero__inner {
    position:
        relative;

    z-index:
        2;

    min-height:
        inherit;

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

    display:
        grid;

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

    align-items:
        center;

    gap:
        clamp(30px, 4vw, 64px);
}


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

    padding-right:
        0;
}


.project-single-hero__content {
    min-width:
        0;

    padding:
        30px
        0
        46px
        var(--project-page-padding);
}


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

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


.project-single-hero__title {
    width:
        min(690px, 100%);

    color:
        var(--project-yellow);

    line-height:
        1.02 !important;
}


.project-single-hero__description {
    width:
        min(620px, 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;
}


.project-single-facts {
    margin-top:
        22px !important;

    padding-top:
        18px !important;

    display:
        grid;

    gap:
        12px;

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


.project-single-facts__item {
    display:
        grid;

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

    align-items:
        start;

    gap:
        16px;
}


.project-single-facts dt {
    color:
        rgba(255, 255, 255, .42);

    font-size:
        8.5px;

    font-weight:
        800;

    line-height:
        1.5;

    letter-spacing:
        1px;

    text-transform:
        uppercase;
}


.project-single-facts dd {
    color:
        rgba(255, 255, 255, .78);

    font-size:
        12.5px;

    line-height:
        1.55;
}


.project-single-facts dd span {
    margin:
        0 4px;

    color:
        var(--project-yellow);
}


.project-single-hero__actions {
    margin-top:
        26px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        18px;
}


.project-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;
}


.project-button--primary {
    min-width:
        178px;

    padding:
        0 20px;

    color:
        #111416;

    background:
        var(--project-yellow);

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


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

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

    transform:
        translateY(-2px);
}


.project-button--text {
    min-height:
        32px;

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

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


.project-button--text:hover {
    color:
        #ffffff;

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


.project-button svg {
    width:
        34px;

    height:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        transform .2s ease;
}


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


.project-single-hero__media {
    position:
        relative;

    min-width:
        0;

    width:
        100%;

    height:
        clamp(340px, 31vw, 450px);

    overflow:
        hidden;

    align-self:
        center;

    background:
        #111519;

    box-shadow:
        0 22px 48px
        rgba(0, 0, 0, .24);
}


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

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

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

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


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

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


/* =========================================================
   12 — SHARED SINGLE SECTION HEADERS
========================================================= */

.project-section-header {
    margin-bottom:
        clamp(29px, 3.5vw, 46px);
}


.project-section-header > p {
    width:
        min(670px, 100%);

    margin-top:
        15px !important;

    color:
        var(--project-muted);

    font-size:
        13.5px;

    line-height:
        1.68;
}


.project-section-header--content {
    padding-bottom:
        25px;

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


.project-section-header--split {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;
}


.project-section-title a {
    transition:
        color .2s ease;
}


.project-section-title a:hover {
    color:
        #8a6d00;
}


.project-section-link {
    flex:
        0 0 auto;

    color:
        var(--project-muted);
}


/* =========================================================
   13 — BEFORE / AFTER
========================================================= */

.project-comparison {
    padding:
        clamp(64px, 7vw, 96px)
        var(--project-page-padding)
        clamp(72px, 8vw, 108px);

    background:
        #ffffff;
}


.project-comparison__grid {
    display:
        grid;

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

    gap:
        clamp(18px, 2.5vw, 36px);
}


.project-comparison__grid.has-one-image {
    grid-template-columns:
        minmax(0, 1fr);
}


.project-comparison__grid.has-one-image
.project-comparison-card {
    width:
        min(980px, 100%);

    margin:
        0 auto;
}


.project-comparison-card {
    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;

    background:
        #e5e2dc;
}


.project-comparison-card__media {
    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    background:
        #e5e2dc;
}


.project-comparison-card__media::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

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


.project-comparison-card__image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


.project-comparison-card__label {
    position:
        absolute;

    z-index:
        2;

    top:
        16px;

    left:
        16px;

    min-width:
        72px;

    min-height:
        32px;

    padding:
        0 13px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #111416;

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

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

    font-size:
        8.5px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .9px;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.project-comparison-card:last-child
.project-comparison-card__label {
    background:
        var(--project-yellow);

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


/* =========================================================
   14 — PROJECT OVERVIEW
========================================================= */

.project-overview {
    padding:
        clamp(64px, 7vw, 92px)
        0
        clamp(72px, 8vw, 104px);

    background:
        var(--project-warm);
}


.project-richtext {
    width:
        100%;
}


.project-page-links {
    margin-top:
        34px;

    padding-top:
        20px;

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        8px;

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

    color:
        var(--project-text);

    font-size:
        12px;

    font-weight:
        700;
}

/* =========================================================
   15 — CASE STUDY — FULL-WIDTH SINGLE COLUMN
========================================================= */

.project-case-study {
    width:
        100%;

    color:
        var(--project-ink);

    background:
        #ffffff;
}


.project-case-study__inner {
    width:
        min(1480px, 100%);

    margin:
        0 auto;

    padding:
        clamp(20px, 3vw, 38px)
        var(--project-page-padding)
        clamp(70px, 8vw, 108px);
}


.project-case-study__item {
    width:
        100%;

    padding:
        clamp(42px, 5vw, 66px)
        0;

    display:
        block;

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


.project-case-study__item:last-child {
    border-bottom:
        1px solid
        var(--project-line);
}


.project-case-study__title {
    position:
        static;

    width:
        100%;

    margin:
        0
        0
        clamp(22px, 2.5vw, 32px) !important;
}


.project-case-study__item
.project-richtext {
    width:
        100%;

    max-width:
        none;
}

/* =========================================================
   16 — PROJECT GALLERY
========================================================= */

.project-gallery {
    padding:
        clamp(64px, 7vw, 96px)
        var(--project-page-padding)
        clamp(72px, 8vw, 108px);

    color:
        #ffffff;

    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(231, 185, 0, .055),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #0d1013,
            #050709
        );
}


.project-gallery
.project-section-title {
    color:
        var(--project-yellow);
}


.project-gallery__grid {
    display:
        grid;

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

    grid-auto-rows:
        clamp(220px, 22vw, 340px);

    gap:
        clamp(12px, 1.4vw, 20px);
}


.project-gallery__item {
    min-width:
        0;

    overflow:
        hidden;

    background:
        #171b1f;
}


.project-gallery__item--large {
    grid-column:
        span 2;

    grid-row:
        span 2;
}


.project-gallery__image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .48s ease,
        filter .48s ease;
}


.project-gallery__item:hover
.project-gallery__image {
    transform:
        scale(1.025);

    filter:
        brightness(1.035);
}


/* =========================================================
   17 — CUSTOMER FEEDBACK
========================================================= */

.project-feedback {
    padding:
        clamp(64px, 7vw, 94px)
        0;

    background:
        var(--project-warm);
}


.project-feedback__quote {
    position:
        relative;

    width:
        min(960px, 100%);

    margin:
        0 auto !important;

    padding:
        0
        clamp(22px, 4vw, 54px);

    text-align:
        center;
}


.project-feedback__quote::before {
    content:
        "“";

    display:
        block;

    height:
        44px;

    color:
        var(--project-yellow);

    font-family:
        Georgia,
        serif;

    font-size:
        74px;

    line-height:
        1;
}


.project-feedback__quote p {
    width:
        min(900px, 100%);

    margin:
        0 auto !important;

    color:
        var(--project-ink);

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

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

    font-weight:
        400;

    line-height:
        1.5;
}


.project-feedback__quote cite {
    display:
        block;

    margin-top:
        24px;

    color:
        #806600;

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

    font-size:
        clamp(11px, .78vw, 13px);

    font-style:
        normal;

    font-weight:
        700;

    line-height:
        1.4;

    letter-spacing:
        1.05px;

    text-transform:
        uppercase;
}


/* =========================================================
   18 — SERVICES USED
========================================================= */

.project-services {
    position:
        relative;

    padding:
        clamp(64px, 7vw, 94px)
        var(--project-page-padding)
        clamp(72px, 8vw, 104px);

    color:
        #ffffff;

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

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


.project-services
.project-section-title {
    color:
        var(--project-yellow);
}


.project-services
.project-section-link {
    color:
        rgba(255, 255, 255, .62);
}


.project-services
.project-section-link:hover {
    color:
        var(--project-yellow);
}


.project-services__grid {
    display:
        grid;

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

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

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


.project-service-card {
    min-width:
        0;

    border-right:
        1px solid
        rgba(255, 255, 255, .12);
}


.project-service-card:last-child {
    border-right:
        0;
}


.project-service-card__link {
    position:
        relative;

    min-height:
        260px;

    padding:
        27px
        clamp(22px, 2.4vw, 34px)
        30px;

    display:
        flex;

    flex-direction:
        column;

    color:
        #ffffff;

    background:
        transparent;

    transition:
        background-color .25s ease;
}


.project-service-card__link:hover {
    background:
        rgba(255, 255, 255, .045);
}


.project-service-card__index {
    color:
        var(--project-yellow);

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        1.2px;
}


.project-service-card__content {
    margin-top:
        32px;
}


.project-service-card__content h3 {
    color:
        #ffffff;

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

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

    font-weight:
        400;

    line-height:
        1.16;

    transition:
        color .2s ease;
}


.project-service-card__link:hover
.project-service-card__content h3 {
    color:
        var(--project-yellow);
}


.project-service-card__content p {
    margin-top:
        13px !important;

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

    font-size:
        12.5px;

    font-weight:
        300;

    line-height:
        1.64;
}


.project-service-card__arrow {
    width:
        100%;

    margin-top:
        auto;

    padding-top:
        25px;

    display:
        flex;

    justify-content:
        flex-end;

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


.project-service-card__arrow svg {
    width:
        38px;

    height:
        15px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.35;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        color .2s ease,
        transform .2s ease;
}


.project-service-card__link:hover
.project-service-card__arrow svg {
    color:
        var(--project-yellow);

    transform:
        translateX(5px);
}


/* =========================================================
   19 — RELATED PROJECTS
========================================================= */

.project-related {
    padding:
        clamp(64px, 7vw, 94px)
        var(--project-page-padding)
        clamp(74px, 8vw, 108px);

    color:
        var(--project-ink);

    background:
        #ffffff;
}


.project-related
.project-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


/* =========================================================
   20 — LARGE TABLET
========================================================= */

@media(max-width:1120px) {

    .project-featured__card {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(310px, .85fr);
    }


    .project-archive-grid,
    .project-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .project-single-hero__inner {
        grid-template-columns:
            minmax(0, .92fr)
            minmax(360px, 1.08fr);

        gap:
            28px;
    }


    .project-services__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .project-service-card:nth-child(2n) {
        border-right:
            0;
    }


    .project-service-card:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(255, 255, 255, .12);
    }

}


/* =========================================================
   21 — TABLET
========================================================= */

@media(max-width:980px) {

    .project-archive-hero {
        min-height:
            auto;
    }


    .project-archive-hero__inner {
        min-height:
            300px;
    
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, .90fr);
    }
    
    
    .project-archive-hero__image {
        width:
            min(650px, 115%);
    
        max-height:
            300px;
    
        transform:
            translateX(-2%);
    }


    .project-featured__card {
        grid-template-columns:
            1fr;
    }


    .project-featured__media {
        min-height:
            0;

        aspect-ratio:
            16 / 9;
    }


    .project-featured__content::before {
        width:
            100%;

        height:
            3px;

        background:
            linear-gradient(
                90deg,
                var(--project-yellow),
                rgba(231, 185, 0, .18),
                transparent 86%
            );
    }


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


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

        padding-right:
            28px;

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

        gap:
            25px;
    }


    .project-single-hero__content {
        padding:
            30px
            0
            38px
            28px;
    }


    .project-single-hero__media {
        height:
            330px;
    }



    .project-gallery__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-auto-rows:
            clamp(210px, 31vw, 300px);
    }

}


/* =========================================================
   22 — MOBILE
========================================================= */

@media(max-width:720px) {

    .project-archive,
    .project-single {
        --project-page-padding:
            18px;
    }


    /* Archive Hero
    ----------------------------------------------------- */

    .project-archive-hero__inner,
.project-archive-hero.has-no-hero-image
.project-archive-hero__inner {
    min-height:
        0;

    grid-template-columns:
        1fr;
}


.project-archive-hero__copy {
    width:
        100%;

    padding:
        30px
        18px
        25px;
}


.project-archive-hero.has-no-hero-image
.project-archive-hero__copy {
    padding-bottom:
        38px;
}


.project-archive-hero__media {
    min-height:
        190px;

    margin-top:
        -12px;

    padding:
        0
        18px;

    align-items:
        flex-end;

    justify-content:
        center;
}


.project-archive-hero__media::before {
    bottom:
        -40%;

    width:
        96%;

    height:
        82%;
}


.project-archive-hero__image {
    width:
        min(470px, 120%);

    max-height:
        230px;

    object-position:
        center bottom;

    transform:
        none;

    filter:
        drop-shadow(
            0
            20px
            22px
            rgba(0, 0, 0, .36)
        );
}


.project-archive-hero__description {
    font-size:
        14px;
}



    .project-archive-hero__description {
        font-size:
            14px;
    }


    /* Featured
    ----------------------------------------------------- */

    .project-featured {
        padding:
            50px
            18px;
    }


    .project-featured__media {
        aspect-ratio:
            4 / 3;
    }


    .project-featured__content {
        padding:
            32px
            24px
            35px;
    }


    .project-featured__title {
        font-size:
            clamp(29px, 8.5vw, 38px);
    }


    /* Archive Grid
    ----------------------------------------------------- */

    .project-archive-list {
        padding:
            54px
            18px
            70px;
    }


    .project-featured +
    .project-archive-list {
        padding-top:
            8px;
    }


    .project-archive-grid,
    .project-grid {
        grid-template-columns:
            1fr;

        gap:
            42px;
    }


    .project-card {
        padding-bottom:
            27px;
    }


    .project-card__media {
        aspect-ratio:
            16 / 11;
    }


    .project-card__title {
        font-size:
            clamp(24px, 7vw, 30px);
    }


    /* Archive Summary
    ----------------------------------------------------- */

    .project-archive-summary {
        padding:
            0
            18px
            66px;
    }


    /* Single Hero
    ----------------------------------------------------- */

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

        grid-template-columns:
            1fr;
    }


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

        padding:
            30px
            18px
            28px;
    }


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


    .project-single-facts__item {
        grid-template-columns:
            70px
            minmax(0, 1fr);

        gap:
            12px;
    }


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

        flex-direction:
            column;

        gap:
            13px;
    }


    .project-button--primary {
        width:
            100%;
    }


    .project-single-hero__media {
        width:
            auto;

        height:
            250px;

        margin:
            0
            18px
            22px;
    }


    /* Comparison
    ----------------------------------------------------- */

    .project-comparison {
        padding:
            54px
            18px
            68px;
    }


    .project-comparison__grid,
    .project-comparison__grid.has-two-images,
    .project-comparison__grid.has-one-image {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .project-comparison-card__media {
        aspect-ratio:
            4 / 3;
    }


    /* Overview
    ----------------------------------------------------- */

    .project-overview {
        padding:
            54px
            0
            68px;
    }


    .project-content-shell {
        padding-right:
            18px;

        padding-left:
            18px;
    }


    /* Case Study
    ----------------------------------------------------- */

    .project-case-study__inner {
        padding-top:
            8px;

        padding-bottom:
            68px;
    }


    
    .project-case-study__item {
        padding:
            38px
            0;
    }
    
    
    .project-case-study__title {
        margin-bottom:
            20px !important;
    }


    /* Gallery
    ----------------------------------------------------- */

    .project-gallery {
        padding:
            54px
            18px
            68px;
    }


    .project-gallery__grid {
        grid-template-columns:
            1fr;

        grid-auto-rows:
            auto;

        gap:
            14px;
    }


    .project-gallery__item,
    .project-gallery__item--large {
        grid-column:
            auto;

        grid-row:
            auto;

        aspect-ratio:
            4 / 3;
    }


    /* Feedback
    ----------------------------------------------------- */

    .project-feedback {
        padding:
            56px
            0;
    }


    .project-feedback__quote {
        padding:
            0;
    }


    .project-feedback__quote::before {
        height:
            38px;

        font-size:
            66px;
    }


    .project-feedback__quote p {
        font-size:
            clamp(19px, 5.8vw, 25px);
    
        line-height:
            1.48;
    }
    
    
    .project-feedback__quote cite {
        font-size:
            11px;
    }


    /* Section Headers
    ----------------------------------------------------- */

    .project-section-header--split {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            17px;
    }


    /* Services
    ----------------------------------------------------- */

    .project-services {
        padding:
            56px
            18px
            70px;
    }


    .project-services__grid {
        grid-template-columns:
            1fr;
    }


    .project-service-card,
    .project-service-card:nth-child(2n) {
        border-right:
            0;
    }


    .project-service-card:nth-child(n + 2) {
        border-top:
            1px solid
            rgba(255, 255, 255, .12);
    }


    .project-service-card__link {
        min-height:
            230px;

        padding:
            25px
            22px
            27px;
    }


    /* Related
    ----------------------------------------------------- */

    .project-related {
        padding:
            56px
            18px
            72px;
    }


    .project-related
    .project-grid {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   23 — VERY SMALL MOBILE
========================================================= */

@media(max-width:420px) {

    .project-archive-hero__media {
        min-height:
            165px;
    }
    
    
    .project-archive-hero__image {
        width:
            min(390px, 125%);
    
        max-height:
            200px;
    }


    .project-featured__content {
        padding:
            29px
            20px
            32px;
    }


    .project-featured__meta {
        font-size:
            8px;
    }


    .project-single-facts__item {
        grid-template-columns:
            1fr;

        gap:
            4px;
    }


    .project-single-hero__media {
        height:
            220px;
    }


    .project-comparison-card__label {
        top:
            11px;

        left:
            11px;
    }


    .project-service-card__link {
        min-height:
            215px;
    }

}


/* =========================================================
   24 — FOCUS STATES
========================================================= */

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

    outline-offset:
        4px;
}


/* =========================================================
   25 — REDUCED MOTION
========================================================= */

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

    .project-archive *,
    .project-archive *::before,
    .project-archive *::after,
    .project-single *,
    .project-single *::before,
    .project-single *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }


    .project-archive.is-enhanced
    [data-project-reveal],
    .project-single.is-enhanced
    [data-project-reveal] {
        opacity:
            1;

        transform:
            none;
    }

}


/* =========================================================
   26 — PRINT
========================================================= */

@media print {

    .project-single-hero__actions,
    .project-gallery,
    .project-services,
    .project-related,
    #vehicle-assessment,
    .s6-contact,
    .mobile-bottom-nav {
        display:
            none !important;
    }


    body,
    .project-single,
    .project-single-hero,
    .project-comparison,
    .project-overview,
    .project-case-study,
    .project-feedback {
        color:
            #000000 !important;

        background:
            #ffffff !important;
    }


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


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


    .project-single-hero__inner {
        display:
            block;

        padding:
            0;
    }


    .project-single-hero__content {
        padding:
            0
            0
            28px;
    }


    .project-single-hero__title,
    .project-section-title,
    .project-feedback__quote p {
        color:
            #000000 !important;
    }


    .project-single-hero__description,
    .project-single-facts dt,
    .project-single-facts dd {
        color:
            #333333 !important;
    }


    .project-single-hero__media {
        height:
            auto;

        box-shadow:
            none;
    }


    .project-single-hero__image {
        height:
            auto;
    }


    .project-case-study__title {
        position:
            static;
    }

}