/* Minification failed. Returning unminified contents.
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,18): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(24,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(40,19): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-wrapper-gap'
(68,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-content-gap'
(70,29): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-column-gap'
(81,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(82,26): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-button-gap'
(87,29): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(103,19): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-content-gap'
(109,15): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-tag-gap'
(113,26): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(114,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-tag-padding-y'
(114,54): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-tag-padding-x'
(115,25): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(116,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
(118,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(156,21): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-desktop-image-width'
(157,24): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-desktop-image-width'
(170,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(181,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-mobile-wrapper-gap'
(213,29): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(214,26): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(224,33): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(224,62): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(232,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(233,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-image-link-padding-y'
(233,61): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-image-link-padding-x'
(234,26): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(235,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(238,25): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(239,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
(240,33): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(240,62): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(245,25): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(249,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(293,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-wrapper-gap'
(327,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(328,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(329,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(330,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(331,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(332,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(333,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(334,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(335,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(336,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(337,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(338,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(339,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(340,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(341,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(342,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(343,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(344,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(345,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(346,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(347,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(348,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(349,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(350,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(351,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(352,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(353,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(354,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(355,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(356,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(357,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(358,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(359,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(360,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(361,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(362,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(363,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(364,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(365,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(366,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(367,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(368,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(369,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(370,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(371,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(372,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(373,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(381,22): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-column-gap'
(382,22): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-spacing-lg'
(383,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(383,43): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-padding-bottom'
(387,17): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-left-width'
(394,17): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-right-width'
(407,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(411,21): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-h4-size'
(412,22): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-h4-margin-top'
(416,17): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-h5-color'
(417,25): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-text-margin-bottom'
(421,21): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-quote-size'
(422,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-quote-line-height'
(427,22): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-quote-gap'
(440,22): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-author-gap'
(446,17): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-author-image-size'
(447,18): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-author-image-size'
(448,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(453,21): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(454,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(458,21): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(459,23): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
(472,43): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-visual-left-width'
(473,15): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-visual-gap'
(501,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(512,21): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-phone-image-width'
(523,22): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-row-gap'
(550,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(551,22): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-cover-shadow'
(560,43): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-xm-left-width'
(561,15): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-xm-gap'
(579,21): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-xm-desktop-max-width'
(581,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(586,17): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-xm-phone-image-width'
(598,43): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-xm-isolated-left-width'
(599,22): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-xm-gap'
(625,29): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(630,21): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-xm-phone-isolated-width'
(644,19): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-hero-row-gap'
(649,22): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-hero-text-height'
(650,19): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-hero-container-padding-y'
(650,66): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-hero-container-padding-x'
(661,21): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-hero-content-max-width'
(664,19): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-hero-content-row-gap'
(674,25): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-hero-text-max-width'
(680,18): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-hero-visual-height'
(706,18): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-figure-margin-top'
(706,60): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-figure-margin-bottom'
(714,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(718,22): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-figcaption-margin-top'
(719,21): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-figcaption-size'
(720,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-figcaption-line-height'
(721,17): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-figcaption-color'
(743,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(744,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(745,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(746,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(747,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(748,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(749,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(750,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(751,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(752,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(757,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-mobile-row-gap'
(776,19): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-mobile-grid-gap'
(780,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-heading'
(804,27): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-hero-subpage-mobile-top'
(808,31): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-hero-subpage-container-top'
(824,27): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-mobile-hero-padding-top'
(828,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(832,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(836,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-lg'
(840,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(844,26): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-figure-margin-top'
(845,29): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-case-figure-margin-bottom'
(856,29): run-time error CSS1039: Token not allowed after unary operator: '-radius-card'
(861,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(862,25): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(863,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-body'
(866,21): run-time error CSS1030: Expected identifier, found '.'
(866,33): run-time error CSS1031: Expected selector, found ')'
(866,33): run-time error CSS1025: Expected comma or open brace, found ')'
(870,21): run-time error CSS1030: Expected identifier, found '.'
(870,33): run-time error CSS1031: Expected selector, found ')'
(870,33): run-time error CSS1025: Expected comma or open brace, found ')'
(875,15): run-time error CSS1030: Expected identifier, found '.'
(875,27): run-time error CSS1031: Expected selector, found ')'
(875,27): run-time error CSS1025: Expected comma or open brace, found ')'
(879,15): run-time error CSS1030: Expected identifier, found '.'
(879,27): run-time error CSS1031: Expected selector, found ')'
(879,27): run-time error CSS1025: Expected comma or open brace, found ')'
(883,15): run-time error CSS1030: Expected identifier, found '.'
(883,27): run-time error CSS1031: Expected selector, found ')'
(883,27): run-time error CSS1025: Expected comma or open brace, found ')'
 */
/* ==========================================
   PORTFOLIO SECTION - HOME PAGE ONLY
   ========================================== */

#portfolio {
    --portfolio-wrapper-gap: clamp(28px, 6vh, 64px);
    --portfolio-mobile-wrapper-gap: clamp(8px, 1.6vh, 16px);
    --portfolio-column-gap: 9vw;
    --portfolio-card-radius: clamp(20px, 1.5vw, 28px);
    --portfolio-content-gap: var(--text-gap-sm);
    --portfolio-button-gap: var(--text-gap-md);
    --portfolio-tag-gap: clamp(6px, 1vw, 10px);
    --portfolio-tag-padding-y: clamp(4px, 0.5vw, 6px);
    --portfolio-tag-padding-x: clamp(8px, 0.8vw, 12px);
    --portfolio-image-link-padding-y: clamp(10px, 3vw, 14px);
    --portfolio-image-link-padding-x: clamp(14px, 4vw, 20px);
    --portfolio-desktop-image-width: calc((100% - 6vw) / 2);
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(100vh - 20%) !important;
    justify-content: space-between;
    margin: var(--margin-80px) 0;
    padding: 0 var(--base-padding-x);
}

    #portfolio .title {
        display: flex;
        flex-direction: column;
    }

        #portfolio .title > div {
            align-self: flex-end;
            width: 50%;
        }

#portfolio-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: var(--portfolio-wrapper-gap);
}

#portfolio-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    height: 50vh;
    overflow: hidden;
}

.portfolio-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    height: 50vh;
    opacity: 0;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0;
}

    .portfolio-item .left {
        display: flex;
        flex-direction: column;
        row-gap: var(--portfolio-content-gap);
        width: 50%;
        padding-right: var(--portfolio-column-gap);
        height: 100%;
        justify-content: space-between;
    }

    .portfolio-item .right {
        width: 50%;
        height: 100%;
    }

    .portfolio-item .left .buttonSecondary {
        color: var(--primary-color);
        margin-top: var(--portfolio-button-gap);
    }

    /* Desktop / normal image */
    .portfolio-item .right .item-image {
        border-radius: var(--portfolio-card-radius);
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        display: block;
    }

/* Mobile-only CTA under image */
.portfolio-image-link {
    display: none;
}

.left-top {
    display: flex;
    flex-direction: column;
    row-gap: var(--portfolio-content-gap);
}

.item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--portfolio-tag-gap);
}

    .item-tags span {
        background: var(--tertiary-color);
        padding: var(--portfolio-tag-padding-y) var(--portfolio-tag-padding-x);
        font-size: var(--font-small);
        line-height: var(--lh-label);
        border-radius: 999px;
        color: var(--white-color);
    }

.item-button,
.item-paragraph,
.item-title {
    display: flex;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s, transform .5s;
}

.item-button {
    position: relative;
    z-index: 10;
}

.item-image {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1s;
}

.active-portfolio {
    z-index: 12;
}

.active .buttonSecondary {
    visibility: visible;
}

/* ==========================================
   DESKTOP
   ========================================== */

@media only screen and (min-width: 1025px) {

    .portfolio-item .right {
        width: var(--portfolio-desktop-image-width);
        flex: 0 0 var(--portfolio-desktop-image-width);
        margin-left: auto;
    }
}


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

@media only screen and (max-width: 767px) {

    #portfolio {
        --portfolio-button-gap: clamp(4px, 1.5vh, 10px);
        height: 100vh !important;
        margin: 0;
        padding-top: 6px;
    }

        #portfolio .title > div {
            width: 100%;
        }

    #portfolio-wrapper {
        row-gap: var(--portfolio-mobile-wrapper-gap);
    }

    #portfolio-container {
        height: 80vh;
    }

    .portfolio-item {
        flex-wrap: wrap;
        row-gap: clamp(12px, 2.2vh, 20px);
    }

        .portfolio-item .left {
            width: 100%;
            padding: 0;
            justify-content: flex-start;
            height: auto;
            min-height: 0;
        }

            .portfolio-item .left .item-button {
                display: none !important;
            }

    .item-tags {
        display: none;
    }

    .portfolio-item .right {
        width: 100%;
        height: auto;
        overflow: hidden;
        border-radius: var(--portfolio-card-radius);
        background: var(--white-color);
        box-shadow: 2px 2px 16px 0 rgba(5, 32, 41, .18);
    }

        .portfolio-item .right .item-image {
            display: block;
            width: 100%;
            height: 180px;
            max-height: none;
            object-fit: cover;
            border-radius: var(--portfolio-card-radius) var(--portfolio-card-radius) 0 0;
        }

    .portfolio-image-link {
        position: static;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--text-gap-sm);
        padding: var(--portfolio-image-link-padding-y) var(--portfolio-image-link-padding-x);
        background: var(--white-color);
        color: var(--secondary-color-text);
        text-decoration: none;
        font-family: Montserrat-Bold, sans-serif;
        font-size: var(--font-small);
        line-height: var(--lh-label);
        border-radius: 0 0 var(--portfolio-card-radius) var(--portfolio-card-radius);
    }

        .portfolio-image-link::after {
            content: "→";
            color: var(--secondary-color-text);
        }

    #portfolio .portfolio-item .left .buttonSecondary {
        margin-top: var(--text-gap-sm);
    }
}


/* ==========================================
   MOBILE FONT SCALE 150 / 200
   ========================================== */

@media only screen and (max-width: 767px) {

    html.ui-font-150 #portfolio .portfolio-item .right .item-image,
    html.ui-font-200 #portfolio .portfolio-item .right .item-image {
        height: 130px;
    }

    html.ui-font-150 #portfolio .portfolio-image-link,
    html.ui-font-200 #portfolio .portfolio-image-link {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}


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

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    #portfolio {
        height: 100% !important;
    }

    #portfolio-container {
        height: 80vh;
    }

    #portfolio .title > div {
        align-self: flex-start;
    }

    .portfolio-item {
        flex-wrap: wrap;
        row-gap: var(--portfolio-wrapper-gap);
    }

        .portfolio-item .left,
        .portfolio-item .right {
            width: 100%;
            padding-right: 0;
        }

        .portfolio-item .left {
            height: auto;
        }
}

/* =========================================================
   PORTFOLIO CASE STUDY PAGE
   Isolated component
   ========================================================= */

/* =========================================================
   Shared variables
   Uses Portfolio Home variable names where they are semantically shared.
   Because portfolio-home.css scopes those variables to #portfolio, fallbacks
   keep this page independent and avoid changing the validated home section.
   ========================================================= */
.case,
.case-visual,
.xm-visual-row,
.case.xm-visual-row,
.case-hero,
.case-figure,
.xm-case-image,
#hero-image,
#hero.subpage {
    --portfolio-case-spacing-sm: var(--text-gap-sm);
    --portfolio-case-spacing-md: var(--text-gap-md);
    --portfolio-case-spacing-lg: var(--margin-40px);
    --portfolio-case-padding-bottom: var(--margin-40px);
    --portfolio-case-row-gap: var(--portfolio-wrapper-gap, clamp(48px, 6vw, 96px));
    --portfolio-case-column-gap: 3vw;
    --portfolio-case-visual-gap: clamp(32px, 5vw, 80px);
    --portfolio-case-xm-gap: clamp(32px, 4vw, 64px);
    --portfolio-case-left-width: 33.33%;
    --portfolio-case-right-width: 66.67%;
    --portfolio-case-visual-left-width: 38%;
    --portfolio-case-xm-left-width: 32%;
    --portfolio-case-xm-isolated-left-width: 30%;
    --portfolio-case-text-size: var(--font-body);
    --portfolio-case-text-margin-bottom: var(--text-gap-md);
    --portfolio-case-quote-size: var(--font-body);
    --portfolio-case-quote-line-height: var(--lh-body);
    --portfolio-case-quote-gap: var(--text-gap-sm);
    --portfolio-case-h4-size: clamp(14px, 1.5vw, 20px);
    --portfolio-case-h4-margin-top: var(--text-gap-sm);
    --portfolio-case-h5-color: var(--tertiary-color);
    --portfolio-case-author-gap: var(--text-gap-sm);
    --portfolio-case-author-image-size: clamp(56px, 4vw, 64px);
    --portfolio-case-author-name-size: var(--font-body);
    --portfolio-case-author-role-size: var(--font-small);
    --portfolio-case-phone-image-width: min(70%, 260px);
    --portfolio-case-xm-phone-image-width: min(65%, 240px);
    --portfolio-case-xm-phone-isolated-width: min(80%, 340px);
    --portfolio-case-xm-desktop-max-width: 520px;
    --portfolio-case-cover-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    --portfolio-case-figure-margin-top: var(--text-gap-md);
    --portfolio-case-figure-margin-bottom: var(--text-gap-md);
    --portfolio-case-figcaption-margin-top: var(--text-gap-sm);
    --portfolio-case-figcaption-size: var(--font-body);
    --portfolio-case-figcaption-line-height: var(--lh-body);
    --portfolio-case-figcaption-color: var(--secondary-color-text);
    --portfolio-case-hero-text-height: 50vh;
    --portfolio-case-hero-visual-height: 50vh;
    --portfolio-case-hero-row-gap: 0;
    --portfolio-case-hero-container-padding-y: 0;
    --portfolio-case-hero-container-padding-x: var(--base-padding-x);
    --portfolio-case-hero-content-max-width: none;
    --portfolio-case-hero-content-row-gap: var(--text-gap-md);
    --portfolio-case-hero-text-max-width: none;
    --portfolio-case-hero-mobile-padding-top: var(--margin-40px);
    --portfolio-case-hero-subpage-mobile-top: 0px;
    --portfolio-case-hero-subpage-container-top: 5px;
}
/* =========================================================
   Standard case row
   ========================================================= */

.case {
    display: flex;
    column-gap: var(--portfolio-case-column-gap);
    margin-top: var(--portfolio-case-spacing-lg);
    padding: 0 var(--base-padding-x) var(--portfolio-case-padding-bottom);
}

.case-left {
    width: var(--portfolio-case-left-width);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.case-right {
    width: var(--portfolio-case-right-width);
}

.case-left img {
    object-fit: contain;
}

.case-right img {
    object-fit: cover;
}

.case img {
    width: 100%;
    border-radius: var(--radius-card);
}

.case-right h4 {
    font-size: var(--portfolio-case-h4-size);
    margin-top: var(--portfolio-case-h4-margin-top);
}

.case-right h5 {
    color: var(--portfolio-case-h5-color);
    margin-bottom: var(--portfolio-case-text-margin-bottom);
}

.case-right .italic {
    font-size: var(--portfolio-case-quote-size);
    line-height: var(--portfolio-case-quote-line-height);
    margin: 0 !important;
}

.case-right .italic + .italic {
    margin-top: var(--portfolio-case-quote-gap) !important;
}

.case .italic {
    margin-bottom: 0;
}

/* =========================================================
   Case author
   ========================================================= */

.case-author {
    display: flex;
    column-gap: var(--portfolio-case-author-gap);
    align-items: center;
    align-self: center;
}

.case-author img {
    width: var(--portfolio-case-author-image-size) !important;
    height: var(--portfolio-case-author-image-size);
    border-radius: var(--radius-card);
}

.case-author .name {
    font-family: Montserrat-SemiBold;
    font-size: var(--font-body);
    line-height: var(--lh-body);
}

.case-author p {
    font-size: var(--font-small);
    line-height: var(--lh-label);
    text-transform: none;
    font-family: Montserrat-Medium;
    font-weight: 400;
    letter-spacing: normal;
}

/* =========================================================
   Visual case rows
   ========================================================= */

.case-visual {
    display: grid;
    grid-template-columns: minmax(0, var(--portfolio-case-visual-left-width)) minmax(0, 1fr);
    gap: var(--portfolio-case-visual-gap);
    align-items: center;
}

    .case-visual .case-left,
    .case-visual .case-right {
        width: auto;
        align-self: center;
        min-width: 0;
    }

    .case-visual .case-left {
        display: flex;
        justify-content: center;
        align-items: center;
    }

.case-media img,
.case-media-desktop img,
.case-full-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.case-media-desktop img,
.case-full-image img {
    border-radius: var(--radius-card);
}

.case-media-phone {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .case-media-phone img {
        display: block;
        width: var(--portfolio-case-phone-image-width);
        max-width: 100%;
        height: auto;
    }

.case-full-image {
    display: block;
}

.case-visual + .case,
.case + .case-visual {
    margin-top: var(--portfolio-case-row-gap);
}

/* =========================================================
   Hero image for portfolio subpages
   ========================================================= */

#hero-image {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}

    #hero-image img {
        display: block;
        width: 100%;
        height: auto;
    }

/* =========================================================
   Xmaint cover image
   ========================================================= */

.xm-case-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card);
    box-shadow: var(--portfolio-case-cover-shadow);
}

/* =========================================================
   Xmaint controlled visual rows
   ========================================================= */

.xm-visual-row {
    display: grid;
    grid-template-columns: minmax(0, var(--portfolio-case-xm-left-width)) minmax(0, 1fr);
    gap: var(--portfolio-case-xm-gap);
    align-items: center;
}

.xm-visual-left {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
}

.xm-visual-right {
    min-width: 0;
}

.xm-visual-desktop {
    display: block;
    width: 100%;
    max-width: var(--portfolio-case-xm-desktop-max-width);
    height: auto;
    border-radius: var(--radius-card);
}

.xm-visual-phone {
    display: block;
    width: var(--portfolio-case-xm-phone-image-width);
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* =========================================================
   Xmaint visual rows - isolated override of generic .case
   ========================================================= */

.case.xm-visual-row {
    display: grid;
    grid-template-columns: minmax(0, var(--portfolio-case-xm-isolated-left-width)) minmax(0, 1fr);
    column-gap: var(--portfolio-case-xm-gap);
    align-items: start;
}

    .case.xm-visual-row .case-left,
    .case.xm-visual-row .case-right {
        width: auto;
        min-width: 0;
    }

    .case.xm-visual-row .xm-visual-left {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        padding-top: .5rem;
    }

    .case.xm-visual-row .xm-visual-right {
        display: block;
    }

    .case.xm-visual-row .xm-visual-desktop {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        border-radius: var(--radius-card);
    }

    .case.xm-visual-row .xm-visual-phone {
        display: block;
        width: var(--portfolio-case-xm-phone-isolated-width);
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }

/* =========================================================
   Case study hero
   ========================================================= */

.case-hero {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: var(--portfolio-case-hero-row-gap);
}

.case-hero-container {
    width: 100%;
    min-height: var(--portfolio-case-hero-text-height);
    padding: var(--portfolio-case-hero-container-padding-y) var(--portfolio-case-hero-container-padding-x);
    display: flex;
    align-items: center;
}

.case-hero-wrapper {
    width: 100%;
}

.case-hero-content {
    width: 100%;
    max-width: var(--portfolio-case-hero-content-max-width);
    display: flex;
    flex-direction: column;
    row-gap: var(--portfolio-case-hero-content-row-gap);
    padding-left: 0;
}

    .case-hero-content h1 {
        max-width: none;
        margin: 0;
    }

    .case-hero-content p {
        max-width: var(--portfolio-case-hero-text-max-width);
        margin: 0;
    }

.case-hero-visual {
    width: 100%;
    height: var(--portfolio-case-hero-visual-height);
    max-width: 100%;
    overflow: hidden;
}

    .case-hero-visual picture {
        display: block;
        width: 100%;
        height: 100%;
    }

    .case-hero-visual img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
    }



/* =========================================================
   Case figure
   ========================================================= */

.case-figure {
    margin: var(--portfolio-case-figure-margin-top) 0 var(--portfolio-case-figure-margin-bottom);
}

.case-figure img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: var(--radius-card);
}

.case-figure figcaption {
    margin-top: var(--portfolio-case-figcaption-margin-top);
    font-size: var(--portfolio-case-figcaption-size);
    line-height: var(--portfolio-case-figcaption-line-height);
    color: var(--portfolio-case-figcaption-color);
    text-align: center;
}

/* =========================================================
   Mobile
   ========================================================= */

@media only screen and (max-width: 767px) {

    .case,
    .case-visual,
    .xm-visual-row,
    .case.xm-visual-row,
    .case-hero,
    .case-figure,
    #hero-image {
        /*        --portfolio-case-mobile-row-gap: var(--text-gap-sm);
        --portfolio-case-mobile-grid-gap: var(--text-gap-xl);
        --portfolio-case-mobile-hero-padding-top: var(--portfolio-case-hero-mobile-padding-top);
        --portfolio-case-hero-row-gap: var(--text-gap-sm);*/

        --portfolio-case-mobile-row-gap: var(--text-gap-sm);
        --portfolio-case-mobile-grid-gap: var(--text-gap-xl);
        --portfolio-case-mobile-hero-padding-top: var(--portfolio-case-hero-mobile-padding-top);
        --portfolio-case-hero-row-gap: var(--text-gap-sm);
        --portfolio-case-spacing-lg: var(--base-padding-x);
        --portfolio-case-padding-bottom: var(--base-padding-x);
        --portfolio-case-figure-margin-top: 0;
        --portfolio-case-figure-margin-bottom: 0;
        --portfolio-case-hero-text-height: auto;
        --portfolio-case-hero-visual-height: auto;
    }

    .case {
        flex-direction: column;
        row-gap: var(--portfolio-case-mobile-row-gap);
    }

    .case-hero-visual,
    .case-hero-visual picture,
    .case-hero-visual img {
        height: auto;
    }


    .case-left,
    .case-right {
        width: 100%;
    }

    .case-visual,
    .xm-visual-row,
    .case.xm-visual-row {
        grid-template-columns: 1fr;
        gap: var(--portfolio-case-mobile-grid-gap);
    }

    .case-hero-content h1 {
        line-height: var(--lh-heading);
    }

    .case-visual .case-left,
    .case-visual .case-right {
        width: 100%;
    }

    .case-media-desktop img,
    .case-media-phone img,
    .xm-visual-desktop,
    .xm-visual-phone,
    .case.xm-visual-row .xm-visual-desktop,
    .case.xm-visual-row .xm-visual-phone {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }

    .case.xm-visual-row .xm-visual-left {
        justify-content: center;
    }

    #hero.subpage {
        padding-top: var(--portfolio-case-hero-subpage-mobile-top) !important;
    }

        #hero.subpage .hero-container {
            padding-top: var(--portfolio-case-hero-subpage-container-top) !important;
            padding-bottom: 0 !important;
            margin-top: 0 !important;
        }

        #hero.subpage .hero-wrapper,
        #hero.subpage .hero-left {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        #hero.subpage h1 {
            margin-top: 0 !important;
        }

    .case-hero-container {
        padding-top: var(--portfolio-case-mobile-hero-padding-top);
    }

    .case-right p + h2 {
        margin-top: var(--text-gap-lg);
    }

    .case-right h2 + p {
        margin-top: var(--text-gap-sm);
    }

    .case-right p + h3 {
        margin-top: var(--text-gap-lg);
    }

    .case-right h3 + p {
        margin-top: var(--text-gap-sm);
    }

    .case-figure {
        margin-top: var(--portfolio-case-figure-margin-top);
        margin-bottom: var(--portfolio-case-figure-margin-bottom);
        padding-left: 0;
        padding-right: 0;
    }

    .case-figure img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
        border-radius: var(--radius-card);
    }


    .case-figure figcaption {
        margin-top: var(--text-gap-sm);
        font-size: var(--font-body);
        line-height: var(--lh-body);
    }

    .case-right:has(.case-author) .italic {
        order: 1;
    }

    .case-right:has(.case-author) .case-author {
        order: 2;
        margin-top: var(--text-gap-md);
    }

    .case:has(.case-author) .case-right {
        order: 1;
    }

    .case:has(.case-author) .case-left {
        order: 2;
    }

    .case:has(.case-author) .case-author {
        margin-top: var(--text-gap-md);
    }


}